/* L'écran d'ouverture, charte « affiche » (30/09/2026) : un cerveau qui se trace en mandarine sur un fond espresso
   chauffé par une lueur, des impulsions qui le parcourent, la marque « Les Cortex » en Bricolage très gras sur un
   sticker, puis le choix élève ou parent en deux cartes d'affiche. 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(110% 70% at 50% 34%, #4A2A16 0%, #2A1A10 45%, #1A120D 100%);
  color: #F7EEE3; font-family: "Figtree", "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: .5;
  background-image: radial-gradient(rgba(255, 138, 61, .22) 1.2px, transparent 1.6px); background-size: 20px 20px;
  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(255, 138, 61, .32), transparent 72%);
  opacity: 0; animation: afo-halo 3.2s ease-in-out 1.3s infinite;
}
.afo-trace { fill: none; stroke: #FF8A3D; stroke-linecap: round; stroke-linejoin: round; }
.afo-contour { stroke-width: 3; filter: drop-shadow(0 0 5px rgba(255, 138, 61, .5)); }
.afo-sillon { stroke-width: 1.8; opacity: .8; }
.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: #FFE3CC; stroke-width: 2.8; 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: #1A120D; stroke: #FF8A3D; stroke-width: 2; 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: 20px; text-align: center; opacity: 0; transform: translateY(10px); animation: afo-monte .7s ease forwards 1.5s; }
.afo-marque h1 {
  display: inline-block; margin: 0; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.03em; color: #1F120B; background: #FF8A3D; border: 2px solid #1F120B; border-radius: 14px; padding: 8px 18px 10px;
  transform: rotate(-2deg); box-shadow: 5px 5px 0 #F2B84B;
}
.afo-marque p { margin: 12px 0 0; font-family: "Space Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: #D8C7B6; }
.afo-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 380px); margin-top: 34px; }
.afo-choix button {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 124px; padding: 18px 10px 16px;
  border: 2px solid #1F120B; border-radius: 18px; background: #F7EEE3; box-shadow: 5px 5px 0 rgba(0, 0, 0, .55); color: #2A1B12; cursor: pointer;
  font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.02em;
  opacity: 0; transform: translateY(16px); animation: afo-monte .6s ease forwards; animation-delay: var(--d);
  transition: background .2s ease, box-shadow .1s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.afo-choix button svg { width: 40px; height: 40px; stroke: #E8641B; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.afo-choix button small { font-family: "Figtree", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0; color: #5A4636; }
.afo-choix button:hover, .afo-choix button:focus-visible { background: #FFD9BF; outline: none; }
.afo-choix button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }
.afo-pied { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11.5px; color: #BFA995; 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: #1A120D; } 50% { fill: #FF8A3D; } }
@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; } }

@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; }
}