/* L'écran d'ouverture (28/09/2026) : un cerveau qui se trace en lignes cyan, des impulsions qui le parcourent,
   la marque « Les Cortex », puis le choix élève ou parent. Toujours sombre, quel que soit le thème de l'appli :
   c'est la porte d'entrée, elle a une seule apparence. Sous prefers-reduced-motion, tout est posé d'emblée. */
.afo {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 38%, #16304A 0%, #0F131B 58%, #0A0D13 100%);
  color: #E6E8EC; font-family: "Inter", "Segoe UI", system-ui, sans-serif; overflow: hidden;
  transition: opacity .45s ease, transform .45s ease;
}
.afo.afo-sortie { opacity: 0; transform: scale(1.04); pointer-events: none; }
.afo-grille {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(34, 211, 238, .18) 1px, transparent 1.4px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 55% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 40%, #000 20%, transparent 75%);
}
.afo-scene { position: relative; width: min(78vw, 300px); aspect-ratio: 200 / 160; }
.afo-scene svg { width: 100%; height: 100%; overflow: visible; }
.afo-halo {
  position: absolute; inset: 12% 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .28), transparent 72%);
  opacity: 0; animation: afo-halo 3.2s ease-in-out 1.3s infinite;
}
.afo-trace { fill: none; stroke: #22D3EE; stroke-linecap: round; stroke-linejoin: round; }
.afo-contour { stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .55)); }
.afo-sillon { stroke-width: 1.5; opacity: .75; }
.afo-dessin { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: afo-dessin 1.5s cubic-bezier(.6, .05, .3, 1) forwards; animation-delay: var(--d, 0s); }
.afo-impulsion { fill: none; stroke: #E0FBFF; stroke-width: 2.6; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 10 var(--l); stroke-dashoffset: 10;
  animation: afo-impulsion 2.4s ease-in-out infinite; animation-delay: var(--d, 1.6s); }
.afo-noeud { fill: #0F131B; stroke: #22D3EE; stroke-width: 1.6; transform-box: fill-box; transform-origin: center;
  transform: scale(0); animation: afo-noeud .45s cubic-bezier(.3, 1.6, .5, 1) forwards, afo-pouls 2.4s ease-in-out infinite;
  animation-delay: var(--d, 1.2s), calc(var(--d, 1.2s) + .5s); }
.afo-marque { margin-top: 18px; text-align: center; opacity: 0; transform: translateY(10px); animation: afo-monte .7s ease forwards 1.5s; }
.afo-marque h1 {
  margin: 0; font-family: "Barlow Condensed", "Inter", sans-serif; font-weight: 600; font-size: 40px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; padding-left: .22em;
  background: linear-gradient(90deg, #E6E8EC 0%, #E6E8EC 40%, #7DEBFA 50%, #E6E8EC 60%, #E6E8EC 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: afo-reflet 3.5s ease-in-out 2.2s infinite;
}
.afo-marque p { margin: 8px 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #98A2B0; }
.afo-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 380px); margin-top: 34px; }
.afo-choix button {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 120px; padding: 18px 10px 16px;
  border: 0; background: rgba(31, 38, 55, .78); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35); color: #E6E8EC; cursor: pointer;
  font-family: "Barlow Condensed", "Inter", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: 0; transform: translateY(16px); animation: afo-monte .6s ease forwards; animation-delay: var(--d);
  transition: background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.afo-choix button svg { width: 38px; height: 38px; stroke: #22D3EE; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.afo-choix button small { font-family: "Inter", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: #98A2B0; }
.afo-choix button:hover, .afo-choix button:focus-visible { background: rgba(34, 211, 238, .14); box-shadow: inset 3px 0 0 #22D3EE, inset 0 0 0 1px #22D3EE; outline: none; }
.afo-choix button:active { transform: scale(.97); }
.afo-pied { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11px; color: #6B7688; opacity: 0; animation: afo-monte .6s ease forwards 2.4s; padding: 0 16px; }

@keyframes afo-dessin { to { stroke-dashoffset: 0; } }
@keyframes afo-noeud { to { transform: scale(1); } }
@keyframes afo-pouls { 0%, 100% { fill: #0F131B; } 50% { fill: #22D3EE; } }
@keyframes afo-impulsion { 0% { opacity: 0; stroke-dashoffset: 10; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: calc(-1 * var(--l)); } }
@keyframes afo-halo { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes afo-monte { to { opacity: 1; transform: none; } }
@keyframes afo-reflet { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }

@media (max-height: 560px) { .afo-scene { width: min(46vw, 190px); } .afo-choix { margin-top: 18px; } .afo-choix button { min-height: 92px; } }
@media (prefers-reduced-motion: reduce) {
  .afo, .afo *, .afo *::before { animation: none !important; transition: none !important; }
  .afo-dessin { stroke-dashoffset: 0; } .afo-noeud { transform: none; } .afo-impulsion { display: none; }
  .afo-marque, .afo-choix button, .afo-pied { opacity: 1; transform: none; } .afo-halo { opacity: .5; }
}