/* ============================================================================
   RCF ACADEMY 11 — THÈME DÉDIÉ (§ 5 à § 7, § 16 à § 28)
   ----------------------------------------------------------------------------
   Academy reçoit sa propre couche d'identité, comme Cyclodex et la Bible. Deux
   règles gouvernent ce fichier, et rien d'autre ne doit y entrer.

   1. LE THÈME EST SCOPÉ, ET C'EST VÉRIFIABLE. Chaque sélecteur commence par un
      ancrage Academy (`.academy-wrap`, `#scAcademy`, `#scAcademyM02`). Les
      jetons eux-mêmes sont déclarés SUR `.academy-wrap`, jamais sur `:root` :
      un jeton posé sur `:root` redéfinirait la couleur de Carrière, du
      Cyclodex et des Quêtes d'un seul trait. Ici, la cascade s'arrête au bord
      de l'Academy. `tools/academy/A11_scope_css.py` le prouve fichier par
      fichier — c'est un contrôle, pas une promesse.

   2. LE FOND EST UN DÉCOR, LE TEXTE VIT EN HTML (§ 31). Les cinq fonds validés
      ont une luminance médiane de 47 à 82 et un écart p05→p95 de 8 à 228 : sur
      la même image, un texte blanc est lisible à un endroit et illisible dix
      pixels plus loin. Aucun texte fonctionnel ne peut donc reposer sur
      l'image. Il repose sur une SURFACE, et c'est la surface qui garantit le
      contraste — d'où `--ac-verre-lit`, volontairement très opaque, pour les
      écrans de lecture (§ 28).

   POURQUOI LE VOILE ÉCLAIRCIT AU LIEU D'ASSOMBRIR. Le réflexe est de poser un
   scrim noir. Ces images-ci sont DÉJÀ sombres (médiane 47 à 82) : un scrim
   noir les enterre, et le § 3 demande l'inverse — « lumineux et accueillant ».
   Le voile est donc un dégradé bleu nuit TRANSPARENT au centre, qui laisse la
   lumière de l'atelier traverser, et ne se referme qu'aux bords où le texte
   se pose.

   Le calque de fond est ancré à la SCÈNE (`position:fixed` dans `#rcfStage`,
   qui porte un `transform` et sert donc de bloc conteneur), pas au contenu qui
   défile. C'est la leçon déjà payée au HOTFIX « page 1 a un décor, pas les
   2, 3 et 4 » : un décor posé sur le contenu s'en va avec le défilement.
   ============================================================================ */

/* ---------------------------------------------------------------- jetons ---
   Déclarés sur le conteneur Academy : la cascade ne peut pas sortir. */
.academy-wrap{
  /* § 6 — la palette est relevée sur les cinq fonds validés eux-mêmes. */
  --ac-nuit:#081726;
  --ac-nuit-2:#04101c;
  --ac-acier:#8fb0cb;
  --ac-acier-sombre:#5c7a95;
  --ac-clair:#e9f1f8;
  --ac-jaune:#ffc02e;
  --ac-jaune-vif:#ffd45e;
  --ac-jaune-sombre:#c98f00;

  /* Surfaces. « verre léger » du § 6 : translucide là où le fond doit vivre,
     franchement opaque là où l'on LIT (§ 28). */
  /* LOT 11.3 § 2 — relevé de .78/.88 à .86/.92. Le fond doit rester
     perceptible AUTOUR des surfaces, pas à travers le texte. */
  --ac-verre:linear-gradient(168deg,rgba(9,32,52,.86),rgba(4,16,27,.92));
  --ac-verre-lit:linear-gradient(168deg,rgba(11,30,50,.955),rgba(4,14,25,.975));

  /* LOT 11.4 — ON RETIRE DE LA MATIÈRE, ON N'EN REPEINT PAS.
     ---------------------------------------------------------------------
     Deux mécanismes ont été essayés et mesurés avant celui-ci.

     Un dégradé radial en % de la boîte : refusé. Un pourcentage se rapporte à
     la boîte, or ces panneaux sont larges et bas — le fondu atteignait le
     texte avant d'atteindre les angles. Mesuré : jusqu'à 13/255 sous le
     texte, et +0,68 seulement de respiration sur la carte question.

     Deux dégradés croisés en pixels : meilleur (respiration +6 à +10), mais
     encore +2,0/255 sur TOUT le noyau, à profondeur constante. La cause n'est
     pas géométrique : recomposer deux translucides de couleurs différentes ne
     redonne pas la couleur d'un seul, même quand les alphas se composent
     juste. Le noyau n'était donc pas « celui du 11.3 », seulement proche.

     La bonne opération n'était pas de repeindre la surface, mais d'en RETIRER
     sur la couronne. C'est un masque. La surface garde le dégradé du Lot 11.3
     au bit près ; le masque vaut 1 partout où un glyphe peut se poser, et ne
     descend que dans le retrait. Le noyau devient identique par construction,
     plus par calcul — et cela se vérifie à zéro près.

     Le masque est porté par `::after`, pas par l'élément : appliqué à
     l'élément, il effacerait aussi le texte et le filet jaune de la question. */
  --ac-fondu:14px;
  --ac-fondu-lit:16px;
  --ac-masque:
    linear-gradient(to right,  rgba(0,0,0,.76) 0, #000 var(--ac-fondu),
      #000 calc(100% - var(--ac-fondu)), rgba(0,0,0,.76) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.76) 0, #000 var(--ac-fondu),
      #000 calc(100% - var(--ac-fondu)), rgba(0,0,0,.76) 100%);
  --ac-masque-lit:
    linear-gradient(to right,  rgba(0,0,0,.76) 0, #000 var(--ac-fondu-lit),
      #000 calc(100% - var(--ac-fondu-lit)), rgba(0,0,0,.76) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.76) 0, #000 var(--ac-fondu-lit),
      #000 calc(100% - var(--ac-fondu-lit)), rgba(0,0,0,.76) 100%);
  --ac-verre-haut:rgba(6,19,32,.93);
  --ac-bord:rgba(143,176,203,.26);
  --ac-bord-vif:rgba(255,192,46,.58);

  /* § 14 — deux vitesses, et c'est la dissymétrie qui fait le toucher :
     l'enfoncement doit être là avant que le doigt s'en aperçoive, le retour
     doit être doux. 40 ms à l'aller (« < 100 ms » du § 14), 170 ms au
     retour (fenêtre 140–190 ms). */
  --ac-presse:40ms;
  --ac-retour:170ms;

  --ac-ray:18px;
  --ac-ray-sm:13px;
  --ac-tap:48px;
  --ac-duree:180ms;              /* § 25 — dans la fenêtre 150–250 ms */
  --ac-courbe:cubic-bezier(.2,.7,.3,1);
  --ac-ombre:0 18px 42px -26px rgba(0,0,0,.92);
}

/* ------------------------------------------------------------ le décor -----
   Un seul fond chargé à la fois (§ 4) : la règle générique ne porte AUCUNE
   image, chaque variante en nomme une et une seule. La teinte de repli est
   peinte sous l'image — c'est elle qui supprime le flash blanc pendant le
   décodage, sans rien précharger. */
.academy-wrap .ac-fond{
  position:fixed; inset:0; z-index:0;
  background-color:var(--ac-nuit-2);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  pointer-events:none;
}
.academy-wrap .ac-fond[data-fond="menu"]{background-image:url('../../assets/academy/fond-menu.webp')}
.academy-wrap .ac-fond[data-fond="fondamentaux"]{background-image:url('../../assets/academy/fond-fondamentaux.webp')}
.academy-wrap .ac-fond[data-fond="direction"]{background-image:url('../../assets/academy/fond-direction.webp')}
.academy-wrap .ac-fond[data-fond="derailleur"]{background-image:url('../../assets/academy/fond-derailleur.webp')}
.academy-wrap .ac-fond[data-fond="frein"]{background-image:url('../../assets/academy/fond-frein.webp')}

/* Le voile. Transparent au centre pour garder l'image vivante, refermé en haut
   et en bas où le texte se pose. */
.academy-wrap .ac-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(4,14,25,.62) 0%, rgba(4,14,25,.24) 28%,
    rgba(4,14,25,.22) 60%, rgba(4,14,25,.74) 100%);
}
/* ACADEMY 11.1 § 25 — LE VOILE A ÉTÉ ALLÉGÉ. Le Lot 11 l'avait réglé pour
   garantir la lisibilité ; il la garantissait deux fois, puisque tout texte
   fonctionnel repose déjà sur une surface opaque. Résultat : les cinq fonds
   validés étaient payés puis masqués. Les opacités sont donc descendues de
   .80/.42/.38/.86 à .62/.24/.22/.74 — le fond redevient perceptible sans que
   la moindre ligne de texte dépende de lui. */

/* § 28 — pendant une question, le fond reste VISIBLE mais très calmé : c'est
   la surface de lecture qui doit gagner, pas l'image. */
.academy-wrap .ac-fond--calme::after{
  background:linear-gradient(180deg,
    rgba(4,14,25,.90) 0%, rgba(4,14,25,.80) 40%,
    rgba(4,14,25,.84) 100%);
}
.academy-wrap .ac-fond--calme{filter:saturate(.88)}

/* Le contenu passe DEVANT le décor. */
.academy-wrap .ac-wrap{position:relative; z-index:1}

/* ------------------------------------------------------------ typographie --
   § 7 — la condensée RCF (`--disp`) reste pour les titres, les badges et les
   chiffres. Le texte courant — questions, réponses, explications, formulaire —
   passe en `--body`, non condensé : c'est lui qu'on lit vingt-cinq fois de
   suite. */
.academy-wrap .ac-q,
.academy-wrap .ac-answer,
.academy-wrap .ac-ctxt,
.academy-wrap .ac-in,
.academy-wrap .ac-err-q,
.academy-wrap .ac-synth{
  font-family:var(--body,system-ui,sans-serif);
}

/* ============================================================================
   § 8 — MENU GÉNÉRAL : deux accès, pas un empilement de cadres
   ========================================================================== */
.academy-wrap .ac-hub .ac-head{margin:2px 0 18px}
/* § 5 / § 26 — UN SEUL TITRE, ET PLUS DE CADRE AUTOUR.
   Le Lot 11 posait le hero dans un panneau bordé parce que son texte reposait
   sinon sur la typographie imprimée du kakémono. Le panneau réglait la
   lisibilité et créait le défaut suivant : un cadre de plus, et un fond de
   moins. La surface est donc remplacée par un DÉGRADÉ LOCALISÉ (§ 25), posé
   derrière le seul texte, sans bord ni coin : il assombrit ce qu'il faut, là
   où il le faut, et s'éteint avant le bord de l'écran.

   Le `z-index:-1` reste enfermé dans l'Academy : `.ac-wrap` porte `z-index:1`
   et crée donc un contexte d'empilement — le dégradé passe derrière le titre,
   jamais derrière le décor.

   DEUX ESSAIS ONT ÉTÉ NÉCESSAIRES, ET LA CAPTURE A TRANCHÉ LES DEUX FOIS.

   1. Un radial débordant de 20 px à gauche et à droite. `.ac-wrap` n'ayant
      que 3 px de marge interne, il sortait de la zone qui défile : 7 px de
      défilement horizontal en 360 × 800, mesurés par la recette, que le
      § 28 interdit.
   2. Le même radial arrêté aux bords du conteneur. Plus de débordement,
      mais le radial étant centré à 14 % de la largeur, il valait encore
      .9 d'opacité au bord gauche : la coupure franche se voyait à l'œil
      comme un rectangle pâle derrière le titre. Aucun test ne l'attrapait.

   La forme retenue est donc un dégradé VERTICAL. Il couvre toute la largeur
   — aucune couture latérale n'est possible — et s'éteint en haut comme en
   bas, là où il n'y a plus de texte à porter. Le titre est aligné à gauche
   et commence au bord : il fallait de l'opacité jusqu'au bord, donc une
   forme qui ne dégrade pas horizontalement. */
.academy-wrap .ac-hero{
  position:relative; margin:2px 0 22px; padding:20px 2px 18px;
  border:0; background:none; border-radius:0;
}
.academy-wrap .ac-hero::before{
  content:""; position:absolute; z-index:-1;
  inset:-16px 0 -12px;
  background:linear-gradient(180deg,
    rgba(4,14,25,0) 0%, rgba(4,14,25,.82) 15%,
    rgba(4,14,25,.82) 76%, rgba(4,14,25,0) 100%);
}
.academy-wrap .ac-hero-t{
  font-family:var(--disp,sans-serif); font-size:38px; line-height:1.02;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
  margin:0; text-shadow:0 2px 20px rgba(0,0,0,.72);
}
.academy-wrap .ac-hero-s{
  font-size:14px; line-height:1.5; color:var(--ac-clair); margin:12px 0 0;
  max-width:32ch; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
/* Le filet jaune marque le titre sans ajouter de boîte (§ 6). */
.academy-wrap .ac-hero-t::after{
  content:""; display:block; width:62px; height:3px; margin-top:13px;
  border-radius:2px; background:var(--ac-jaune);
}

/* Les deux accès, puis les trois métiers : MÊME composant, même langage (§ 9). */
.academy-wrap .ac-cards{display:flex; flex-direction:column; gap:12px}
/* § 5 / § 6 — LA CARTE LAISSE VOIR LE FOND. Le Lot 11 la remplissait d'un
   verre presque opaque : deux cartes suffisaient à recouvrir l'image. La
   surface est allégée, la bordure affinée (§ 6 : « les bordures doivent être
   fines »), et le fond respire entre les deux accès.

   `touch-action` et `-webkit-tap-highlight-color` viennent du § 15 : le
   navigateur n'attend plus le double-tap avant de réagir, et son surlignage
   gris par défaut ne vient plus se superposer à l'état pressed du thème. */
.academy-wrap .ac-card{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  padding:16px 17px; color:var(--ink,#f6f8fb); overflow:hidden;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(143,176,203,.24); border-radius:var(--ac-ray);
  /* LOT 11.3 § 2 — c'était la surface la plus transparente de l'Academy
     (.62 / .74) : sur mobile, l'atelier passait littéralement à travers le
     titre du parcours. Relevée dans la plage demandée, avec un flou d'arrière
     -plan qui calme ce qui reste visible sans assombrir la page. La vignette
     du métier est un ENFANT de la carte : elle passe au-dessus de ce fond et
     reste donc aussi lisible qu'avant. */
  background:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -24px rgba(0,0,0,.88);
  transition:border-color var(--ac-retour) var(--ac-courbe),
             transform var(--ac-retour) var(--ac-courbe),
             box-shadow var(--ac-retour) var(--ac-courbe),
             background var(--ac-retour) var(--ac-courbe);
}
/* LOT 11.4 — la surface de la carte, posée derrière le contenu et masquée sur
   son retrait. `backdrop-filter` fait déjà de la carte un contexte
   d'empilement : le `z-index:-1` reste donc à l'intérieur d'elle. */
.academy-wrap .ac-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(168deg,rgba(7,28,45,.86),rgba(4,16,27,.91));
  -webkit-mask-image:var(--ac-masque); mask-image:var(--ac-masque);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* La vignette du métier : l'image DANS la carte, jamais sous le texte. */
.academy-wrap .ac-card-vignette{
  position:absolute; inset:0 0 0 auto; width:46%;
  background-position:center; background-size:cover; opacity:.62;
  transition:opacity var(--ac-retour) var(--ac-courbe);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 62%);
          mask-image:linear-gradient(90deg,transparent,#000 62%);
  pointer-events:none;
}
/* `display:block` n'est pas décoratif ici : `.ac-card-in` est un `<span>`, et
   sur une boîte INLINE le `padding-right` ne s'applique qu'à la fin de la
   dernière ligne, pas aux blocs enfants. Sans lui, la gouttière réservée à la
   flèche est ignorée et la description passe DESSOUS — mesuré : bord droit du
   texte à 360 px pour une flèche commençant à 332 px. */
.academy-wrap .ac-card-in{
  display:block; position:relative; z-index:1; padding-right:38px;
}
.academy-wrap .ac-card-k{
  font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ac-jaune);
}
.academy-wrap .ac-card-n{
  display:block; font-family:var(--disp,sans-serif); font-size:19px;
  line-height:1.14; letter-spacing:.015em; text-transform:uppercase;
  color:#fff; margin:5px 0 0;
}
.academy-wrap .ac-card-d{
  display:block; font-size:13px; line-height:1.45; color:var(--ac-clair);
  opacity:.86; margin:6px 0 0;
}
/* La flèche jaune : l'action, réservée au jaune (§ 6). */
.academy-wrap .ac-card-go{
  position:absolute; right:14px; bottom:13px; z-index:1;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; color:#06121f;
  background:var(--ac-jaune);
  transition:transform var(--ac-duree) var(--ac-courbe);
}
/* § 17 — les quatre états, et la dissymétrie de durée qui les rend
   agréables : l'enfoncement arrive en 40 ms, le relâchement se détend en
   170 ms. */
.academy-wrap .ac-card:hover{
  border-color:var(--ac-bord-vif); transform:translateY(-2px);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.94);
}
.academy-wrap .ac-card:hover .ac-card-vignette{opacity:.72}
.academy-wrap .ac-card:hover .ac-card-go{transform:translateX(3px)}
.academy-wrap .ac-card:active{
  transform:translateY(0) scale(.988);
  border-color:var(--ac-jaune);
  box-shadow:0 6px 16px -14px rgba(0,0,0,.9);
  transition-duration:var(--ac-presse);
}
.academy-wrap .ac-card:active .ac-card-go{transform:scale(.94)}
.academy-wrap .ac-card:focus-visible{
  outline:none; border-color:var(--ac-jaune);
  box-shadow:0 0 0 3px rgba(255,192,46,.34), var(--ac-ombre);
}
.academy-wrap .ac-card--soon{cursor:not-allowed; opacity:.5}
.academy-wrap .ac-card--soon .ac-card-go{background:var(--ac-acier-sombre); color:var(--ac-clair)}

/* ============================================================================
   § 10 — ENTRÉE D'UN MODULE : le fond joue, le texte reste court
   ========================================================================== */
/* § 9 / § 25 — même traitement que le hero : le cadre disparaît, un
   dégradé localisé tient la lisibilité, et le fond du métier redevient
   visible dès l'entrée dans le module. */
/* LE DÉGRADÉ COUVRE TOUT CE QUI REPOSE DESSUS, PAS SEULEMENT LE TITRE.
   Une première version le portait sur `.ac-entete`. Il s'arrêtait donc sous le
   titre, et les deux lignes suivantes — le nom du module et la ligne de
   chiffres — se retrouvaient à même l'image : « 70 % seuil de validation »
   tombait en plein sur la typographie imprimée du kakémono. C'est exactement
   ce que la mesure de luminance du Lot 11 interdit, et c'est la capture qui
   l'a montré. Le dégradé est donc porté par `.ac-intro`, le bloc qui contient
   l'ensemble. */
.academy-wrap .ac-intro{position:relative}
.academy-wrap .ac-intro::before{
  content:""; position:absolute; z-index:-1;
  inset:-14px 0 -14px;
  background:linear-gradient(180deg,
    rgba(4,14,25,0) 0%, rgba(4,14,25,.84) 13%,
    rgba(4,14,25,.84) 80%, rgba(4,14,25,0) 100%);
}
.academy-wrap .ac-entete{
  position:relative; margin:2px 0 4px; padding:16px 2px 4px;
  border:0; border-radius:0; background:none;
}
.academy-wrap .ac-entete-k{
  font-family:var(--mono,monospace); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ac-jaune);
}
.academy-wrap .ac-entete-t{
  font-family:var(--disp,sans-serif); font-size:30px; line-height:1.04;
  letter-spacing:.015em; text-transform:uppercase; color:#fff; margin:6px 0 0;
  text-shadow:0 2px 18px rgba(0,0,0,.70);
}
/* ============================================================================
   § 11 — FORMULAIRE : une seule carte, compacte
   ========================================================================== */
.academy-wrap .ac-form--compact{
  display:flex; flex-direction:column; gap:0; padding:14px 14px 15px;
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray);
  background:var(--ac-verre-lit); box-shadow:var(--ac-ombre);
}
.academy-wrap .ac-form--compact .ac-lab{
  font-family:var(--mono,monospace); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ac-acier); margin:11px 0 4px;
}
.academy-wrap .ac-form--compact .ac-lab:first-child{margin-top:0}
.academy-wrap .ac-form--compact .ac-in{
  width:100%; min-height:42px; padding:0 12px; font-size:16px; /* 16px : pas de zoom iOS */
  color:var(--ink,#f6f8fb); background:rgba(0,0,0,.30);
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray-sm);
  transition:border-color var(--ac-duree) var(--ac-courbe),
             box-shadow var(--ac-duree) var(--ac-courbe);
}
.academy-wrap .ac-form--compact .ac-in:focus{
  outline:none; border-color:var(--ac-jaune);
  box-shadow:0 0 0 3px rgba(255,192,46,.20);
}
/* Deux champs côte à côte : c'est ce qui fait tenir le formulaire sans
   défilement sur un 390 × 844 clavier ouvert (§ 11, § 29). */
.academy-wrap .ac-duo{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.academy-wrap .ac-duo>div{min-width:0}
.academy-wrap .ac-aide{
  margin:7px 0 0; font-size:11.5px; line-height:1.4; color:var(--ac-acier);
}
.academy-wrap .ac-err{margin:9px 0 0; font-size:13px; color:var(--red,#ff6677)}

/* ============================================================================
   § 16 À § 21 — MODE FOCUS : la question est l'élément principal
   ----------------------------------------------------------------------------
   Budget vertical sur le viewport de référence 390 × 844 (§ 29). C'est un
   budget, pas une intention : il est vérifié au pixel par la recette.

       barre haute compacte ......................  56 px
       badge de type .............................  26 px
       carte question ............................ ~96 px
       trois réponses (3 × 62 + 2 × 9) ........... 204 px
       marges internes ........................... ~40 px
                                                  --------
                                                   422 px

   Le hero de marque qui occupait le haut de chaque question valait à lui seul
   plus de 200 px et se répétait vingt-cinq fois : il disparaît pendant la
   session (§ 16). Il reste à l'ENTRÉE du module, où il a un sens.
   ========================================================================== */

/* --- § 17 — barre haute ---------------------------------------------------- */
/* § 17 / § 18 — la barre porte désormais la sortie de session. Elle reste
   sous 70 px : c'est mesuré par la recette, pas espéré. */
.academy-wrap .ac-hud{
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 12px; margin:0 0 12px;
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray-sm);
  background:var(--ac-verre-haut);
}
.academy-wrap .ac-hud-x{flex:1; min-width:0}
.academy-wrap .ac-hud-l{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.academy-wrap .ac-hud-m{
  font-family:var(--disp,sans-serif); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ac-clair);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.academy-wrap .ac-hud-n{
  font-family:var(--mono,monospace); font-size:11.5px; color:var(--ac-jaune);
  white-space:nowrap;
}
/* § 20 — la progression : plus précise (la barre est plus haute et le
   remplissage porte une tête lumineuse qui dit exactement où l'on en est),
   plus fluide, et sous la limite. Le Lot 11 animait la largeur en 260 ms,
   au-dessus du plafond de 250 ms fixé par le § 20 : 220 ms. */
.academy-wrap .ac-hud-bar{
  height:6px; margin-top:7px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(143,176,203,.14);
}
.academy-wrap .ac-hud-bar>span{
  display:block; height:100%; border-radius:3px; position:relative;
  background:linear-gradient(90deg,var(--ac-jaune-sombre),var(--ac-jaune) 62%,
             var(--ac-jaune-vif));
  box-shadow:0 0 10px -1px rgba(255,192,46,.55);
  transition:width 220ms var(--ac-courbe);
}
/* § 24 — le jalon : une pulsation d'un quart de seconde sur la barre, pas une
   fenêtre qui s'ouvre. */
.academy-wrap .ac-hud-bar--jalon>span{animation:ac-jalon 240ms var(--ac-courbe)}
@keyframes ac-jalon{
  0%{box-shadow:0 0 0 0 rgba(255,192,46,0)}
  50%{box-shadow:0 0 12px 2px rgba(255,192,46,.75)}
  100%{box-shadow:0 0 0 0 rgba(255,192,46,0)}
}

/* --- § 19 — le type de contenu : badge discret, TERMES INCHANGÉS ----------- */
.academy-wrap .ac-type{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; margin:0 0 10px; border-radius:99px;
  font-family:var(--mono,monospace); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase;
  border:1px solid var(--ac-bord); background:rgba(6,19,32,.72);
  color:var(--ac-clair);
}
.academy-wrap .ac-type i{
  width:6px; height:6px; border-radius:50%; background:var(--ac-acier);
  font-style:normal;
}
.academy-wrap .ac-type--situation i{background:var(--ac-jaune)}

/* --- § 18 — la carte question --------------------------------------------- */
/* § 13 — plus d'air autour du texte, un contraste plus franc, et surtout
   aucune ressemblance avec un champ de formulaire : pas de bordure claire,
   une surface pleine et un filet jaune vertical qui désigne la question. */
.academy-wrap .ac-question{
  position:relative; padding:18px 18px 19px 20px; margin:0 0 14px;
  border:1px solid rgba(143,176,203,.16); border-radius:var(--ac-ray);
  /* LOT 11.4 — noyau au niveau du Lot 11.3, couronne ouverte. Le flou
     d'arrière-plan accompagne l'ouverture : ce qu'on laisse revenir dans la
     marge doit rester calme, sinon on a rouvert le défaut du Lot 11.0. */
  background:none; box-shadow:var(--ac-ombre);
  isolation:isolate; overflow:hidden;
}
.academy-wrap .ac-question::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--ac-verre-lit);
  -webkit-mask-image:var(--ac-masque-lit); mask-image:var(--ac-masque-lit);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.academy-wrap .ac-question::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--ac-jaune),rgba(255,192,46,.12));
}
.academy-wrap .ac-question .ac-q{
  font-size:18.5px; line-height:1.42; color:#fff; margin:0; font-weight:600;
  letter-spacing:.002em;
}
/* Le contexte d'une situation n'apparaît qu'à la première étape : aux étapes
   suivantes il est déjà lu, et le répéter repousserait les réponses hors de
   l'écran. */
.academy-wrap .ac-question .ac-ctxt{
  font-size:13.5px; line-height:1.5; color:var(--ac-clair); opacity:.88;
  margin:0 0 10px; padding:0 0 10px;
  border-bottom:1px solid rgba(143,176,203,.18);
}
.academy-wrap .ac-question .ac-sit-t{
  font-family:var(--disp,sans-serif); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ac-jaune); margin:0 0 7px;
}

/* --- § 20 — les réponses : cartes tactiles --------------------------------- */
/* ============================================================================
   § 14 / § 15 — LE PLAISIR DU TOUCHER
   ----------------------------------------------------------------------------
   C'est la priorité du lot, et elle tient en trois décisions.

   1. L'ENFONCEMENT EST IMMÉDIAT, LE RETOUR EST DOUX. Une transition unique
      donne soit un appui mou, soit un relâchement sec. Les deux sens ont donc
      des durées différentes : `--ac-presse` (40 ms) imposé sur `:active`,
      `--ac-retour` (170 ms) au relâchement. Le § 14 demande < 100 ms à
      l'aller et 140–190 ms au retour ; on est dans les deux fenêtres.

   2. RIEN NE S'INTERPOSE. `touch-action:manipulation` supprime l'attente du
      double-tap-zoom, qui retardait le `:active` d'environ 300 ms sur mobile.
      `-webkit-tap-highlight-color:transparent` supprime le carré gris que le
      navigateur peignait PAR-DESSUS l'état du thème.

   3. LA SÉLECTION NE REPOSE PAS SUR LA COULEUR SEULE (§ 14, § 29). Elle
      change la bordure, la surface, la pastille ET ajoute une coche : un
      joueur qui ne distingue pas le jaune voit quand même son choix.
   ========================================================================== */
.academy-wrap .ac-answers{display:flex; flex-direction:column; gap:10px}
.academy-wrap .ac-answer{
  position:relative; display:flex; align-items:center; gap:11px;
  width:100%; min-height:var(--ac-tap); padding:13px 14px;
  text-align:left; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  font-size:14.5px; line-height:1.38; color:var(--ink,#f6f8fb);
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray-sm);
  background:var(--ac-verre);
  box-shadow:0 10px 24px -22px rgba(0,0,0,.9);
  transition:border-color var(--ac-retour) var(--ac-courbe),
             background var(--ac-retour) var(--ac-courbe),
             box-shadow var(--ac-retour) var(--ac-courbe),
             transform var(--ac-retour) var(--ac-courbe);
}
/* La pastille de rang : elle donne le point d'ancrage du regard et sert de
   cible visuelle à la sélection. */
.academy-wrap .ac-answer-k{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono,monospace); font-size:11px; color:var(--ac-clair);
  border:1px solid var(--ac-bord); background:rgba(0,0,0,.28);
  transition:background-color var(--ac-duree) var(--ac-courbe),
             color var(--ac-duree) var(--ac-courbe),
             border-color var(--ac-duree) var(--ac-courbe);
}
.academy-wrap .ac-answer-text{flex:1; min-width:0}
.academy-wrap .ac-answer:hover{
  border-color:rgba(143,176,203,.52);
  background:linear-gradient(168deg,rgba(20,50,78,.84),rgba(7,22,37,.9));
}
.academy-wrap .ac-answer:focus-visible{
  outline:none; border-color:var(--ac-jaune);
  box-shadow:0 0 0 3px rgba(255,192,46,.30);
}
/* ÉTAT PRESSED — l'ombre se rétracte, la carte descend, l'accent jaune
   apparaît. Trois signaux pour un seul geste, tous en 40 ms. */
.academy-wrap .ac-answer:active{
  transform:scale(.988);
  border-color:var(--ac-bord-vif);
  background:linear-gradient(168deg,rgba(26,56,86,.9),rgba(9,26,43,.94));
  box-shadow:0 3px 9px -8px rgba(0,0,0,.95);
  transition-duration:var(--ac-presse);
}
.academy-wrap .ac-answer:active .ac-answer-k{
  border-color:var(--ac-jaune); color:var(--ac-jaune-vif);
  transition-duration:var(--ac-presse);
}
/* ÉTAT SELECTED — vu pendant 140 ms avant la question suivante (§ 14). */
.academy-wrap .ac-answer.on,
.academy-wrap .ac-answer[aria-pressed="true"]{
  border-color:var(--ac-jaune);
  background:linear-gradient(168deg,rgba(72,55,13,.92),rgba(34,24,5,.94));
  box-shadow:0 0 0 1px rgba(255,192,46,.34),
             0 14px 30px -22px rgba(255,192,46,.5);
  transform:none;
}
.academy-wrap .ac-answer.on .ac-answer-k{
  background:var(--ac-jaune); color:#06121f; border-color:var(--ac-jaune);
  animation:ac-pastille 200ms var(--ac-courbe);
}
/* La coche : la différence de FORME qui double la différence de couleur. */
.academy-wrap .ac-answer.on::after{
  content:"\2713"; position:absolute; right:12px;
  font-size:14px; line-height:1; color:var(--ac-jaune);
  animation:ac-coche 180ms var(--ac-courbe);
}
.academy-wrap .ac-answer.on .ac-answer-text{padding-right:20px}
@keyframes ac-pastille{
  0%{transform:scale(.82)} 60%{transform:scale(1.08)} 100%{transform:none}
}
@keyframes ac-coche{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
/* § 21 — après validation, plus rien ne réagit : pas de double-clic possible. */
/* § 14 — l'état « disabled après validation » : les réponses écartées
   s'effacent, la choisie reste pleine. C'est ce contraste, pendant les
   140 ms de confirmation, qui donne la sensation d'engagement. */
.academy-wrap .ac-answers--verrou .ac-answer{
  pointer-events:none; opacity:.42; transform:scale(.995);
}
.academy-wrap .ac-answers--verrou .ac-answer.on{opacity:1; transform:none}

/* --- § 24/§ 25 — apparition de la question suivante ------------------------ */
.academy-wrap .ac-anim{animation:ac-entree var(--ac-duree) var(--ac-courbe)}
@keyframes ac-entree{
  from{opacity:0; transform:translateY(7px)}
  to{opacity:1; transform:none}
}

/* § 25 — respect strict de la préférence système. */
@media (prefers-reduced-motion:reduce){
  .academy-wrap *,
  .academy-wrap *::before,
  .academy-wrap *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
}

/* --- § 19 — l'instruction d'usage, une seule fois ------------------------
   Elle n'est plus qu'un paragraphe, affiché à la première question et à elle
   seule : la garder vingt-cinq fois coûtait de la hauteur mobile pour répéter
   ce que le joueur venait de faire. Le pied de session disparaît avec elle —
   « Quitter » est monté dans la barre haute (§ 18). */
.academy-wrap .ac-pied-note{
  display:block; margin:13px 2px 0; text-align:center;
  font-size:11.5px; line-height:1.4; color:var(--ac-acier);
}

/* ============================================================================
   § 26 / § 27 — RÉSULTATS : plus gratifiants, mêmes règles
   ----------------------------------------------------------------------------
   Aucune règle de réussite ne change ici : le seuil de 70 % sans compensation
   et le couple VALIDÉ / NON VALIDÉ viennent du moteur et du contrat V3. Seule
   la PRÉSENTATION est reprise — c'est très exactement ce que le § 26 autorise.
   Le fond redevient fort (§ 28) : c'est l'écran qu'on montre.
   ========================================================================== */
.academy-wrap .ac-res-head{
  border-color:var(--ac-bord);
  background:var(--ac-verre-lit);
  box-shadow:var(--ac-ombre);
}
.academy-wrap .ac-statut{
  box-shadow:0 14px 40px -22px rgba(0,0,0,.9);
  animation:ac-statut 260ms var(--ac-courbe);
}
@keyframes ac-statut{
  from{opacity:0; transform:scale(.97)}
  to{opacity:1; transform:none}
}
.academy-wrap .ac-note{
  border-color:var(--ac-bord); background:var(--ac-verre-lit);
  box-shadow:var(--ac-ombre);
}
.academy-wrap .ac-radar-box{
  border-color:var(--ac-bord);
  background:radial-gradient(120% 90% at 50% 32%,
    rgba(143,176,203,.16), rgba(4,14,25,.62) 70%);
}
.academy-wrap .ac-err-c{
  border-color:var(--ac-bord); background:var(--ac-verre);
  border-radius:var(--ac-ray-sm);
}
/* § 24 — « À RETENIR », ENFIN SUR LA BONNE PHRASE.
   Le Lot 11 avait créé ce filet jaune en le nommant « À retenir » dans son
   commentaire — mais la classe portée par le filet, `.ac-err-f`, habillait
   en réalité la note de divergence, tandis que la ligne pédagogique restait
   un paragraphe gris parmi d'autres. Le filet passe donc sur `.ac-err-r`,
   celle qui porte vraiment la phrase à emporter. */
.academy-wrap .ac-err-r{
  margin-top:9px; padding:10px 12px;
  font-style:normal; font-size:12.5px; line-height:1.5;
  color:#fff;
  border-left:3px solid var(--ac-jaune);
  border-radius:0 var(--ac-ray-sm) var(--ac-ray-sm) 0;
  background:rgba(255,192,46,.10);
}
.academy-wrap .ac-err-r b{
  display:block; margin-bottom:3px;
  font-family:var(--mono,monospace); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ac-jaune); font-weight:400;
}
/* La note de divergence redevient ce qu'elle est : un repère, pas une leçon. */
.academy-wrap .ac-err-f{
  margin-top:7px; font-size:11.5px; line-height:1.45;
  color:var(--ac-acier); font-style:italic;
}
.academy-wrap .ac-export{
  border-color:var(--ac-bord); background:var(--ac-verre-haut);
  border-radius:var(--ac-ray-sm);
}

/* ============================================================================
   § 29 / § 30 — MOBILE D'ABORD, PUIS DESKTOP
   ----------------------------------------------------------------------------
   Le jeu vit déjà dans une scène 9:16 (`stage-916.css`) : sur un PC 1920 la
   colonne Academy fait la même largeur que sur un téléphone. Le desktop n'a
   donc pas besoin d'une seconde grille — « même système, même hiérarchie »
   (§ 30). Il gagne seulement en respiration, parce que la hauteur disponible
   y est plus grande.
   ========================================================================== */

/* 360 × 800 — le plus étroit des trois viewports imposés. */
@media (max-width:379px){
  .academy-wrap .ac-hero-t{font-size:27px}
  .academy-wrap .ac-entete-t{font-size:25px}
  .academy-wrap .ac-question .ac-q{font-size:16.5px}
  .academy-wrap .ac-answer{font-size:14px; padding:11px 12px; gap:9px}
  .academy-wrap .ac-answer-k{flex-basis:24px; width:24px; height:24px}
  .academy-wrap .ac-card-in{max-width:100%}
  /* Sous 380 px, la vignette volerait la place du texte. */
  .academy-wrap .ac-card-vignette{display:none}
  .academy-wrap .ac-duo{grid-template-columns:1fr}
}

/* À partir de 430 px de large et 780 px de haut : la place existe vraiment. */
@media (min-width:430px) and (min-height:780px){
  .academy-wrap .ac-hero-t{font-size:34px}
  .academy-wrap .ac-question{padding:18px 19px 19px}
  .academy-wrap .ac-question .ac-q{font-size:18.5px}
  .academy-wrap .ac-answer{padding:14px 15px; font-size:15px}
  .academy-wrap .ac-cards{gap:14px}
  .academy-wrap .ac-card{padding:17px 18px}
}

/* ============================================================================
   ACADEMY 11.1 — COMPOSANTS AJOUTÉS PAR LA FINITION
   ----------------------------------------------------------------------------
   Tout ce qui suit remplace un empilement de cadres par une surface unique
   et une ligne de texte. Le § 6 le dit en une phrase — « ne pas transformer
   chaque information en rectangle autonome » — et c'est la règle qui a guidé
   chacune de ces classes.
   ========================================================================== */

/* --- § 6 / § 11 — la ligne de chiffres, sans encadrer chaque chiffre -------
   Le Lot 11 posait chaque repère dans sa propre boîte bordée. À trois repères,
   cela faisait trois cadres dans un écran qui en comptait déjà quatre, et
   « Aucun seuil éliminatoire » se retrouvait comprimé dans un encart de la
   largeur du mot (§ 11). Une ligne, des points de séparation, zéro bordure. */
.academy-wrap .ac-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 9px;
  margin:11px 0 2px; font-size:12.5px; line-height:1.4;
  color:var(--ac-clair);
}
.academy-wrap .ac-meta-i{white-space:nowrap}
.academy-wrap .ac-meta-i--long{white-space:normal}
.academy-wrap .ac-meta-i b{
  font-family:var(--disp,sans-serif); font-size:15px; letter-spacing:.02em;
  color:var(--ac-jaune); font-weight:400;
}
.academy-wrap .ac-meta-p{color:var(--ac-acier-sombre)}

/* --- la ligne de contexte sous un titre d'écran ---------------------------- */
.academy-wrap .ac-sous{
  margin:10px 0 2px; font-size:13.5px; line-height:1.5;
  color:var(--ac-clair); max-width:36ch;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* --- § 18 — QUITTER LA SESSION : secondaire, jamais minuscule -------------
   Il occupait une ligne entière sous les réponses, en bouton plein, et
   concurrençait donc l'action qu'on attend du joueur. Il monte dans la barre
   haute, en ghost — mais à 44 px de côté, parce que « secondaire » ne veut
   pas dire « difficile à atteindre » (§ 18, § 28). */
.academy-wrap .ac-quit{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px;
  min-width:44px; min-height:44px; padding:4px 6px;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  color:var(--ac-acier); background:none; border:1px solid transparent;
  border-radius:var(--ac-ray-sm);
  transition:color var(--ac-retour) var(--ac-courbe),
             background var(--ac-retour) var(--ac-courbe),
             border-color var(--ac-retour) var(--ac-courbe);
}
.academy-wrap .ac-quit span{font-size:15px; line-height:1}
.academy-wrap .ac-quit b{
  font-family:var(--mono,monospace); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:400;
}
.academy-wrap .ac-quit:hover{
  color:var(--ac-clair); background:rgba(143,176,203,.12);
  border-color:rgba(143,176,203,.22);
}
.academy-wrap .ac-quit:active{
  transform:scale(.94); transition-duration:var(--ac-presse);
}
.academy-wrap .ac-quit:focus-visible{
  outline:none; color:var(--ac-clair); border-color:var(--ac-jaune);
  box-shadow:0 0 0 3px rgba(255,192,46,.28);
}

/* ============================================================================
   § 17 — LES BOUTONS PRINCIPAUX ACADEMY
   ----------------------------------------------------------------------------
   Le « bouton principal doit ressembler à une action, pas à un badge ». Il
   reçoit donc le jaune plein — réservé par le § 17 aux CTA, à la
   progression, à la sélection et au résultat clé — et les quatre états.

   Ces règles sont ancrées sur `.academy-wrap` : elles ne peuvent pas
   atteindre les boutons de Carrière, du Cyclodex ou des Quêtes, qui portent
   pourtant les mêmes classes `.btn.go`.
   ========================================================================== */
.academy-wrap .ac-actions{
  display:flex; justify-content:stretch; margin:18px 0 6px;
}
.academy-wrap .ac-actions .btn.go{
  flex:1; min-height:52px; padding:0 20px; cursor:pointer;
  font-family:var(--disp,sans-serif); font-size:16px; letter-spacing:.05em;
  text-transform:uppercase;
  color:#06121f; border:1px solid var(--ac-jaune-sombre);
  border-radius:var(--ac-ray-sm);
  background:linear-gradient(180deg,var(--ac-jaune-vif),var(--ac-jaune));
  box-shadow:0 10px 26px -14px rgba(255,192,46,.6),
             inset 0 -2px 0 rgba(0,0,0,.18);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--ac-retour) var(--ac-courbe),
             box-shadow var(--ac-retour) var(--ac-courbe),
             filter var(--ac-retour) var(--ac-courbe);
}
.academy-wrap .ac-actions .btn.go:hover{filter:brightness(1.06)}
/* « Petit enfoncement » (§ 17) : la touche descend et son ombre portée se
   referme — c'est l'ombre qui fait l'enfoncement, pas seulement le décalage. */
.academy-wrap .ac-actions .btn.go:active{
  transform:translateY(2px);
  box-shadow:0 3px 10px -8px rgba(255,192,46,.5),
             inset 0 -1px 0 rgba(0,0,0,.18);
  transition-duration:var(--ac-presse);
}
.academy-wrap .ac-actions .btn.go:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,192,46,.40),
             0 10px 26px -14px rgba(255,192,46,.6);
}
.academy-wrap .ac-actions .btn.go:disabled,
.academy-wrap .ac-actions .btn.go[disabled]{
  cursor:not-allowed; filter:none;
  color:var(--ac-acier); background:rgba(143,176,203,.14);
  border-color:rgba(143,176,203,.22); box-shadow:none;
}
/* Le bouton secondaire du bilan (« Enregistrer le PDF ») partage la même
   grammaire, sans le jaune : une action, mais pas L'action. */
.academy-wrap .ac-export .btn.ghost{
  min-height:44px; padding:0 16px; cursor:pointer;
  color:var(--ac-clair); border:1px solid var(--ac-bord);
  border-radius:var(--ac-ray-sm); background:rgba(0,0,0,.22);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--ac-retour) var(--ac-courbe),
             background var(--ac-retour) var(--ac-courbe),
             transform var(--ac-retour) var(--ac-courbe);
}
.academy-wrap .ac-export .btn.ghost:hover{
  border-color:var(--ac-bord-vif); background:rgba(143,176,203,.14);
}
.academy-wrap .ac-export .btn.ghost:active{
  transform:scale(.985); transition-duration:var(--ac-presse);
}
.academy-wrap .ac-export .btn.ghost:focus-visible{
  outline:none; border-color:var(--ac-jaune);
  box-shadow:0 0 0 3px rgba(255,192,46,.28);
}

/* ============================================================================
   § 21 / § 22 — LE RÉSULTAT : CLAIR SANS ÊTRE PUNITIF
   ----------------------------------------------------------------------------
   AUCUNE RÈGLE NE CHANGE. Le seuil de 70 % sans compensation, « VALIDÉ » et
   « NON VALIDÉ » viennent du moteur et du contrat V3 ; seule la hiérarchie
   graphique est reprise, ce que le § 21 autorise explicitement.

   CE QUI ÉTAIT FAUX. `academy.css` peignait le statut en aplat plein :
   `.ac-statut.ko{background:var(--red,#ff6473)}` — un pavé corail de la
   largeur de l'écran, qui écrasait le score, la synthèse et les six domaines
   sous une seule information. Le § 21 nomme exactement ce défaut.

   CE QUI EST POSÉ. Une carte sombre, comme toutes les autres surfaces de
   l'Academy — les deux statuts appartiennent à la même famille graphique,
   comme le § 21 l'exige — et l'accent (corail ou vert) CONTENU dans un
   pictogramme, un filet et un mot. Le statut reste immédiatement lisible :
   il ne domine plus, il annonce.

   Le statut ne repose jamais sur la seule couleur : symbole, mot et phrase
   le disent aussi, et c'est déjà le cas dans le HTML.
   ========================================================================== */
.academy-wrap .ac-statut{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:44px 1fr;
  grid-template-areas:"picto titre" "picto phrase";
  align-items:center; column-gap:14px; row-gap:3px;
  text-align:left; padding:16px 17px; margin:0 0 15px;
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray);
  background:var(--ac-verre-lit); color:var(--ac-clair);
  box-shadow:0 16px 40px -24px rgba(0,0,0,.92);
  animation:ac-statut 260ms var(--ac-courbe);
}
/* L'accent : un filet vertical, pas un aplat. */
.academy-wrap .ac-statut::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.academy-wrap .ac-statut.ok::before{background:var(--green,#45d394)}
.academy-wrap .ac-statut.ko::before{background:#ff7a68}
/* Le pictogramme : c'est lui qui porte la couleur, dans 44 px et pas plus. */
.academy-wrap .ac-statut-m{
  grid-area:picto; align-self:center;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1;
}
.academy-wrap .ac-statut.ok .ac-statut-m{
  color:#04121c; background:var(--green,#45d394);
}
.academy-wrap .ac-statut.ko .ac-statut-m{
  color:#2a0b06; background:#ff7a68;
}
.academy-wrap .ac-statut-t{
  grid-area:titre; align-self:end;
  font-family:var(--disp,sans-serif); font-size:25px; line-height:1.02;
  letter-spacing:.05em; text-transform:uppercase;
}
.academy-wrap .ac-statut.ok .ac-statut-t{color:var(--green,#45d394)}
.academy-wrap .ac-statut.ko .ac-statut-t{color:#ff9384}
.academy-wrap .ac-statut-s{
  grid-area:phrase; align-self:start; max-width:34ch;
  font-size:12.5px; line-height:1.4; color:var(--ac-clair); opacity:.9;
}

/* § 22 — le fond du métier reprend la main sur l'écran final. Les surfaces
   de données restent opaques, mais elles ne recouvrent plus toute la page :
   l'en-tête lui laisse la place, comme sur les écrans d'entrée. */
.academy-wrap .ac-res .ac-res-head{
  border:0; background:none; box-shadow:none; position:relative;
  padding:16px 2px 12px; overflow:visible;
}
/* LA BANDE HI-VIS AVAIT PERDU SA BOÎTE. Elle est posée en `inset:0 0 auto 0`
   à l'intérieur de l'en-tête : tant que celui-ci était une carte bordée, la
   bande en dessinait l'arête supérieure, comme une zone de circulation
   d'atelier. L'en-tête n'ayant plus de boîte, elle flottait en travers de
   l'écran, sans rien border — visible seulement à la capture.
   Elle devient un repère court, aligné sur le texte : le même signe, mais
   qui désigne le titre au lieu de barrer la page. */
.academy-wrap .ac-res .ac-res-bande{
  inset:0 auto auto 2px; width:66px; height:5px; border-radius:2px;
  opacity:1;
}
/* MÊME LEÇON QUE `.ac-intro` : le dégradé doit tenir jusque SOUS la dernière
   ligne qu'il porte. Avec un fond qui s'éteignait à 100 % de l'en-tête, le
   bloc d'identité — candidat, poste, parcours, date — tombait dans la partie
   déjà transparente et se lisait par-dessus la typographie imprimée du fond.
   Le dégradé descend donc 34 px plus bas et tient son opacité jusqu'à 84 %. */
.academy-wrap .ac-res .ac-res-head::before{
  content:""; position:absolute; z-index:-1;
  inset:-12px 0 -34px;
  background:linear-gradient(180deg,
    rgba(4,14,25,0) 0%, rgba(4,14,25,.86) 11%,
    rgba(4,14,25,.86) 84%, rgba(4,14,25,0) 100%);
}

/* ============================================================================
   § 27 — PASSE D'ESPACEMENTS
   ----------------------------------------------------------------------------
   Plus d'air ENTRE les groupes, moins de hauteur DEDANS. Les deux vont
   ensemble : c'est en rendant les composants plus serrés qu'on peut se
   permettre de les écarter, et c'est l'écart qui fait lire une page comme
   une suite de blocs plutôt que comme un rouleau.
   ========================================================================== */
.academy-wrap .ac-form--compact{padding:15px 15px 16px; margin-top:20px}
.academy-wrap .ac-form--compact .ac-lab{margin:12px 0 5px}
.academy-wrap .ac-h3{margin:22px 0 10px}
.academy-wrap .ac-themes{gap:7px}
.academy-wrap .ac-errs{gap:11px}
.academy-wrap .ac-err-c{padding:13px 14px}
.academy-wrap .ac-notes{gap:11px}
.academy-wrap .ac-synth{margin:14px 0 4px; line-height:1.55}
.academy-wrap .ac-export{margin-top:20px; padding:14px 15px}

/* ============================================================================
   LOT 11.2 § 4 — LA ROUE DE SCORE DES FONDAMENTAUX POSE SA PROPRE SURFACE
   ----------------------------------------------------------------------------
   Le bilan métier a sa carte de statut ; la phrase positive a son encart ; le
   score des Fondamentaux — le chiffre que le joueur retient — n'avait rien. Le
   moyeu SVG à .82 laissait passer un bureau, un fauteuil et une baie vitrée
   juste derrière « 9 / 30 ». Sur la capture du Lot 11.1, la lecture tient à
   l'ombre du texte, pas à une surface.

   La roue étant un disque, la surface est un disque : un rectangle laisserait
   quatre coins vides autour d'elle. Le dégradé est dense au centre — là où l'on
   LIT — et s'éteint avant la jante, pour que le fond validé reste visible tout
   autour (§ 4, et doctrine § 25 du Lot 11.1 : surfaces localisées sous les
   textes, jamais de voile uniforme).

   Rien ici ne touche au radar, aux six thèmes, ni au moindre calcul : la roue
   reçoit un fond, pas une valeur.
   ========================================================================== */
#scAcademyM02 .academy-wrap .m02-score{
  position:relative; margin:14px 0 10px;
}
#scAcademyM02 .academy-wrap .m02-roue{
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(4,14,25,.94) 0%,
    rgba(5,16,28,.92) 40%,
    rgba(6,19,32,.80) 62%,
    rgba(7,21,35,.44) 82%,
    rgba(7,21,35,.12) 94%,
    rgba(7,21,35,0) 100%);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.95);
}
/* La jante et les dents servaient de décor sur un fond sombre ; sur une photo
   de bureau elles disparaissaient. Sur la surface, elles redeviennent le
   contour de l'objet — c'est ce contour qui fait lire l'arc jaune comme une
   proportion et non comme un trait posé là. */
#scAcademyM02 .academy-wrap .m02-roue-f{stroke:rgba(255,255,255,.16)}
#scAcademyM02 .academy-wrap .m02-dent{opacity:.62}
#scAcademyM02 .academy-wrap .m02-moyeu{fill:rgba(4,13,23,.55)}

/* ============================================================================
   NEUTRALISATION DES COUCHES ACADEMY DU LOT 12
   ----------------------------------------------------------------------------
   `lot12-c3-feedback.css` et `lot12-c7-targeted.css` habillaient les écrans
   Academy AVANT qu'un thème dédié existe. Leurs règles sont posées en
   `!important`, et `lot12-c7` ajoute la spécificité d'un `#scAcademy` : même
   chargé en dernier, un sélecteur de classe ne peut pas les reprendre.

   Ce bloc est la SEULE partie du fichier qui emploie `!important`, et il ne
   fait qu'une chose : rendre au thème dédié les propriétés que ces couches
   avaient figées. Il ne crée aucun style neuf — tout ce qu'il pose est déjà
   défini plus haut, au calme, sans `!important`.

   Mesuré avant correction sur une réponse du Module 01 :
       padding    12px 36px 12px 13px   (attendu 12px 13px)
       min-height 50px                  (attendu var(--ac-tap) = 48px)
       ::after    content "›"           (attendu : aucun)

   Le chevron est le plus visible des trois : il vient de
   `lot12-c3-feedback.css`, promet une navigation là où il n'y a qu'un choix,
   et il apparaissait sur les trois réponses de chaque question.
   ========================================================================== */
#scAcademy .academy-wrap .ac-answer,
#scAcademyM02 .academy-wrap .ac-answer{
  position:relative !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  min-height:var(--ac-tap) !important;
  padding:13px 14px !important;
  font-size:14.5px !important; font-weight:400 !important; line-height:1.38 !important;
  border:1px solid var(--ac-bord) !important;
  background:var(--ac-verre) !important;
  border-radius:var(--ac-ray-sm) !important;
}
/* Le chevron hérité disparaît — mais PAS la coche de sélection du § 14,
   qui emprunte le même `::after`. La règle générale est donc levée sur
   `.on`, et seulement sur `.on`. */
#scAcademy .academy-wrap .ac-answer::after,
#scAcademyM02 .academy-wrap .ac-answer::after,
#scAcademy .academy-wrap .ac-answer::before,
#scAcademyM02 .academy-wrap .ac-answer::before{content:none !important}
#scAcademy .academy-wrap .ac-answer.on::after,
#scAcademyM02 .academy-wrap .ac-answer.on::after{
  content:"\2713" !important;
  position:absolute !important; right:12px !important;
  font-size:14px !important; line-height:1 !important;
  color:var(--ac-jaune) !important;
}
#scAcademy .academy-wrap .ac-answer:hover,
#scAcademyM02 .academy-wrap .ac-answer:hover{
  border-color:rgba(143,176,203,.52) !important;
  background:linear-gradient(168deg,rgba(20,50,78,.84),rgba(7,22,37,.9)) !important;
}
/* § 14 — L'ÉTAT PRESSED DOIT AUSSI PASSER LA COUCHE LOT 12. Le fond et la
   bordure de base y sont posés en `!important` : une règle `:active` sans
   `!important`, même plus spécifique, perdrait contre eux. Sans ce bloc, le
   toucher ne changerait que l'échelle — et c'est précisément le défaut que
   ce lot doit corriger. */
#scAcademy .academy-wrap .ac-answer:active,
#scAcademyM02 .academy-wrap .ac-answer:active{
  border-color:var(--ac-bord-vif) !important;
  background:linear-gradient(168deg,rgba(26,56,86,.9),rgba(9,26,43,.94)) !important;
}
#scAcademy .academy-wrap .ac-answer:focus-visible,
#scAcademyM02 .academy-wrap .ac-answer:focus-visible{
  outline:none !important; border-color:var(--ac-jaune) !important;
}
#scAcademy .academy-wrap .ac-answer.on,
#scAcademyM02 .academy-wrap .ac-answer.on{
  border-color:var(--ac-jaune) !important;
  background:linear-gradient(168deg,rgba(72,55,13,.92),rgba(34,24,5,.94)) !important;
}
#scAcademy .academy-wrap .ac-answers,
#scAcademyM02 .academy-wrap .ac-answers{
  display:flex !important; flex-direction:column !important; gap:9px !important;
}
/* UN CADRE DANS LA CARTE QUESTION.
   `lot12-c3-feedback.css:188` pose sur `.ac-q` — le `<h3>` de l'énoncé — une
   bordure complète et un rayon de 13 px, en `!important` :

       .ac-q{border:1px solid rgba(178,214,242,.17)!important;
             border-radius:13px!important; padding:13px 13px 14px!important; …}

   `lot12-c7-targeted.css:218` en annule déjà le fond, l'ombre, les marges et
   le `border-left` — mais PAS les trois autres côtés, ni le rayon. Il restait
   donc un rectangle arrondi pâle à l'intérieur de la carte question : une
   boîte dans une boîte, que le § 6 proscrit, et que seule la capture montre.

   La carte, elle, garde sa bordure : c'est elle qui délimite la question. */
#scAcademy .academy-wrap .ac-question .ac-q,
#scAcademyM02 .academy-wrap .ac-question .ac-q{
  border:0 !important; border-radius:0 !important;
}

/* LE CADRE AUTOUR DU BOUTON « MENU ».
   `lot12-c3-feedback.css:146` habille `.ac-head` en carte translucide bordée,
   avec flou d'arrière-plan, en `!important` :

       .ac-head{padding:10px 10px 11px!important; border:1px solid ...!important;
                border-radius:15px!important; background:rgba(5,20,34,.58)!important;
                backdrop-filter:blur(12px)!important}

   À l'époque, `.ac-head` portait un titre ET un bouton. Le titre en est sorti :
   il ne reste qu'un bouton de 100 px dans une carte de 364 × 61, c'est-à-dire
   un cadre qui n'entoure plus rien. C'est exactement le « cadre pour rien » du
   § 6, et il barrait le haut du menu sur la capture.

   Le bouton, lui, garde son propre fond : c'est lui l'objet cliquable. */
#scAcademy .academy-wrap .ac-head,
#scAcademyM02 .academy-wrap .ac-head{
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; backdrop-filter:none !important;
  display:block !important;
}
/* LOT 11.3 § 3 — LA BANDE CHAUDE DE L'ENTRÉE MÉTIER.
   -----------------------------------------------------------------------
   Le fond validé Dérailleur ne contient aucun coucher de soleil : sa baie
   vitrée donne sur un ciel bleu et des montagnes. La dominante chaude venait
   d'AILLEURS — `lot12-c7-targeted.css:150` pose une SECONDE image dans la
   carte de formulaire elle-même :

       #scAcademy .ac-entry .ac-form{
         padding:72px 14px 14px!important;
         background:linear-gradient(...),
           url("assets/backgrounds/living/game-shift-morning.webp")!important}

   « morning » : un lever de soleil orangé, cadré à 40 % de sa hauteur, donc
   pile sur son ciel. C'est un héritage du Lot 12, de l'époque où l'Academy
   n'avait pas encore ses cinq fonds validés : la carte se décorait toute
   seule. Depuis le Lot 11, le décor est derrière, et cette image ne fait plus
   que poser un ciel étranger au milieu de l'atelier.

   On la retire — c'est la deuxième option du § 3, celle qui préserve le fond
   validé sans lui ajouter le moindre voile. La carte retrouve du même coup la
   surface de lecture du thème (§ 2) : `lot12-c7` la forçait à .78/.88 alors
   que le thème la veut à .955/.975.

   Les 72 px de retrait haut ne servaient qu'à dégager cette image sous la
   pastille « DOSSIER DE SESSION ». Sans image, ils laisseraient un vide : on
   les ramène à la hauteur de la pastille, qui reste posée à 13 px du haut.

   La règle vise les deux écrans d'entrée, parce que c'est UNE règle partagée :
   Direction et Frein portaient la même image chaude, simplement moins visible
   sur leurs fonds plus froids. */
/* La bande haute de cette carte fait 44 px de retrait depuis le Lot 11.3 et ne
   porte que la pastille « DOSSIER DE SESSION ». On avait d'abord fait
   descendre son fondu à 34 px pour profiter de cette bande muette — mesure à
   l'appui, c'était une erreur : la pastille EST un libellé fonctionnel, et son
   adossement total tombait de .987 à .908. Le fondu est donc au même retrait
   que partout ailleurs, et ce gain-là est abandonné. */
#scAcademy .academy-wrap .ac-entry .ac-form::after,
#scAcademyM02 .academy-wrap .m02>.ac-form::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; background:var(--ac-verre-lit);
  -webkit-mask-image:
    linear-gradient(to right,  rgba(0,0,0,.76) 0, #000 16px,
      #000 calc(100% - 16px), rgba(0,0,0,.76) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.76) 0, #000 12px,
      #000 calc(100% - 16px), rgba(0,0,0,.76) 100%);
  mask-image:
    linear-gradient(to right,  rgba(0,0,0,.76) 0, #000 16px,
      #000 calc(100% - 16px), rgba(0,0,0,.76) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.76) 0, #000 12px,
      #000 calc(100% - 16px), rgba(0,0,0,.76) 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
#scAcademy .academy-wrap .ac-entry .ac-form,
#scAcademyM02 .academy-wrap .m02>.ac-form{
  padding:44px 14px 15px !important;
  /* LOT 11.4 — même hiérarchie que les autres panneaux. Les libellés et les
     champs restent sur le noyau ; seule la bande sous la pastille et la
     couronne s'ouvrent. */
  background:none !important; isolation:isolate;
}

/* La pastille de rang doit garder sa taille : `lot12-c3` impose une police de
   17 px aux enfants directs des réponses. */
#scAcademy .academy-wrap .ac-answer-k,
#scAcademyM02 .academy-wrap .ac-answer-k{
  flex:0 0 26px !important; font-size:11px !important;
}
#scAcademy .academy-wrap .ac-answer-text,
#scAcademyM02 .academy-wrap .ac-answer-text,
#scAcademyM02 .academy-wrap .m02-texte{
  font-size:14.5px !important; line-height:1.38 !important; color:var(--ink,#f6f8fb) !important;
}

/* ============================================================================
   LOT 11.5 — LA SURFACE DE LECTURE DES QUATRE ÉCRANS FINAUX
   ----------------------------------------------------------------------------
   CE QUE LA MESURE A MONTRÉ, avant d'écrire une seule ligne ici.

   Le bilan n'est pas un panneau : c'est une PILE DE BLOCS. Certains ont déjà
   leur verre Academy — l'en-tête, les deux notes, les cartes d'erreur, le
   bloc d'export, la roue des Fondamentaux. Les autres n'ont AUCUNE surface :
   les titres de section, la liste des six domaines, la section radar avec ses
   étiquettes et sa légende. Ceux-là sont posés directement sur la photo du
   fond — et la photo des Fondamentaux est un bureau ensoleillé.

   D'où les chiffres relevés au Lot 11.4, sur les pixels rendus :

       fondamentaux / nom de thème        1,94:1   (13,5 px)  — AA demande 4,5
       fondamentaux / titre de section    3,55:1   (16 px)
       légende du radar, les 4 écrans     3,79 à 3,98:1 (12 px)

   Le correctif ne touche donc ni la teinte du texte, ni le fond validé, ni
   les blocs qui passent déjà largement (11 à 16:1). Il donne aux blocs restés
   nus la MÊME surface qu'à leurs voisins, bloc par bloc. Le fond continue de
   se voir entre les blocs, dans les marges de la page, derrière la bande
   décorative de l'en-tête et autour de la roue de score : c'est le § 8.

   POURQUOI CETTE DENSITÉ ET PAS UNE AUTRE. Le texte le plus pâle de ces blocs
   est `--faint` (#8296aa), à 11–12 px. Composé sur un pixel de photo BLANC —
   le pire cas possible — un verre à .93 le porte à 4,69:1 et `--dim` à 9,29:1.
   À .90 on tomberait à 4,27:1, sous AA. La densité n'est donc pas un réglage
   d'œil : c'est le plancher calculé du pire cas, vérifié ensuite à l'écran.

   PAS DE FONDU DE BORD ICI, contrairement aux panneaux du Lot 11.4. Le nom de
   domaine commence à la marge intérieure gauche du bloc : un fondu au bord
   rongerait la protection exactement là où le texte démarre. Le § 5 demande
   « une protection directe sous le texte » — on la pose pleine.
   ========================================================================== */
.academy-wrap{
  --ac-verre-res:linear-gradient(168deg,rgba(9,28,46,.93),rgba(4,14,25,.955));
  --ac-res-pad:13px 14px;
}

/* --- Le titre de section et le bloc qu'il annonce ne font qu'un panneau -----
   `.ac-h3` et la liste qui le suit sont deux frères dans le balisage. On leur
   donne la même surface et on supprime l'espace entre eux : à l'écran, c'est
   un seul bloc, avec le filet jaune du titre posé dessus (il vient d'un
   `::before`, donc il reste visible). Le sélecteur vise l'enfant DIRECT du
   bilan : dans `.ac-radar` / `.m02-radar`, le titre est à l'intérieur de la
   section, qui reçoit elle-même la surface — sans quoi on la peindrait deux
   fois. */
#scAcademy .academy-wrap .ac-res>.ac-h3,
#scAcademyM02 .academy-wrap .m02-res>.ac-h3{
  margin:22px 0 0; padding:12px 14px 9px 27px;
  border:1px solid var(--ac-bord); border-bottom:0;
  border-radius:var(--ac-ray) var(--ac-ray) 0 0;
  background:var(--ac-verre-res);
}
#scAcademy .academy-wrap .ac-res>.ac-h3::before,
#scAcademyM02 .academy-wrap .m02-res>.ac-h3::before{ left:14px; top:.88em }
#scAcademy .academy-wrap .ac-res>.ac-h3+.ac-themes,
#scAcademy .academy-wrap .ac-res>.ac-h3+.ac-errs,
#scAcademy .academy-wrap .ac-res>.ac-h3+.ac-none,
#scAcademyM02 .academy-wrap .m02-res>.ac-h3+.m02-domaines{
  margin:0; padding:4px 14px 12px;
  border:1px solid var(--ac-bord); border-top:0;
  border-radius:0 0 var(--ac-ray) var(--ac-ray);
  background:var(--ac-verre-res);
}
/* « Ces pourcentages sont pédagogiques… » ferme le panneau des domaines : il
   descend donc sous la liste, sans couture, et c'est lui qui porte l'arrondi
   du bas. */
#scAcademy .academy-wrap .ac-res>.ac-h3+.ac-themes{
  border-radius:0; padding-bottom:9px;
}
#scAcademy .academy-wrap .ac-res .ac-themes+.ac-note-min{
  margin:0; padding:0 14px 12px;
  border:1px solid var(--ac-bord); border-top:0;
  border-radius:0 0 var(--ac-ray) var(--ac-ray);
  background:var(--ac-verre-res);
}
/* Les cartes d'erreur ont déjà leur propre verre : le panneau qui les porte
   ne doit pas les empiler une seconde fois, il ne sert qu'à adosser le titre
   et les gouttières. */
#scAcademy .academy-wrap .ac-res>.ac-h3+.ac-errs{ padding:10px 12px 12px }

/* --- La règle de validation, seule sous les deux notes ---------------------- */
#scAcademy .academy-wrap .ac-res .ac-rule{
  margin:10px 0 0; padding:var(--ac-res-pad);
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray-sm);
  background:var(--ac-verre-res);
}

/* --- La section radar : titre, tracé, étiquettes et légende d'un bloc ------
   Les étiquettes des six thèmes sont des `<text>` SVG posés AUTOUR du tracé,
   près des bords de la boîte. Le dégradé radial de `.ac-radar-box` y tombe à
   rgba(0,0,0,.24) : insuffisant. La surface est donc portée par la SECTION,
   qui englobe le titre, la boîte, les étiquettes et la légende. */
#scAcademy .academy-wrap .ac-res .ac-radar,
#scAcademyM02 .academy-wrap .m02-res .m02-radar{
  margin-top:20px; padding:4px 6px 12px;
  border:1px solid var(--ac-bord); border-radius:var(--ac-ray);
  background:var(--ac-verre-res);
}
/* Le retrait latéral du panneau est volontairement mince : la boîte du radar
   occupait toute la largeur utile, et un panneau plus épais rétrécirait le
   tracé. Mesuré : à 12 px de retrait, le SVG passait de 354 à 338 px et les
   valeurs « 0 % » de 19,7 à 18,8 px de large. Le titre et la légende, eux,
   reprennent leur gouttière pour ne pas frôler le bord. */
#scAcademy .academy-wrap .ac-res .ac-radar>.ac-h3,
#scAcademyM02 .academy-wrap .m02-res .m02-radar>.ac-h3{ margin-left:7px }
#scAcademy .academy-wrap .ac-res .ac-radar-leg,
#scAcademyM02 .academy-wrap .m02-res .m02-radar-leg{ padding:0 8px }
/* La boîte perd son cadre et son dégradé propres : ils feraient un second
   panneau dans le premier, et le dégradé n'apportait rien sous le tracé. */
#scAcademy .academy-wrap .ac-res .ac-radar-box,
#scAcademyM02 .academy-wrap .m02-res .m02-radar-box{
  border:0; background:none; padding:0;
}

/* --- La phrase de synthèse des Fondamentaux --------------------------------
   Elle est centrée sur un aplat jaune à .07 d'opacité, qui ne protège rien.
   On garde exactement cette teinte d'accent, posée sur le verre du bilan. */
#scAcademyM02 .academy-wrap .m02-res .m02-phrase{
  background:linear-gradient(0deg,rgba(255,189,25,.07),rgba(255,189,25,.07)),
             var(--ac-verre-res);
}
/* Même raisonnement pour le résumé du bilan métier. */
#scAcademy .academy-wrap .ac-res .ac-synth{
  background:linear-gradient(0deg,rgba(255,189,25,.06),rgba(255,189,25,.06)),
             var(--ac-verre-res);
}
/* Et pour le bloc d'export, adossé à rgba(0,0,0,.18) depuis le Lot 11. */
#scAcademy .academy-wrap .ac-res .ac-export{
  background:var(--ac-verre-res);
}