/* ============================================================================
   RCF · LOT 11 — RCF ACADEMY — STYLE
   ----------------------------------------------------------------------------
   Aucune direction artistique nouvelle : tout est exprimé avec les JETONS du
   thème (--panel, --edge, --ink, --dim, --faint, --hivis, --radius, --tap,
   --disp, --mono), avec un repli pour rester valable dans un thème plus ancien.
   Le Lot 12 reprendra l'habillage ; la logique fonctionnelle n'en dépend pas.

   Une seule hiérarchie est structurante et vient du CDC : sur l'écran de
   résultat, le statut puis les DEUX notes doivent dominer nettement les six
   pourcentages par thème. C'est la raison des tailles ci-dessous, pas un
   effet de style.
   ============================================================================ */

.wrap:has(#scAcademy.on) header.top{display:none}
.academy-wrap{padding-bottom:26px}

.ac-wrap{display:block}
.ac-head{margin:2px 0 16px}
.ac-eyebrow{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hivis,#ffbd19)}
.ac-title{font-family:var(--disp,sans-serif);font-size:24px;line-height:1.12;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:4px 0 0}
.ac-sub{font-size:13px;color:var(--dim);margin:6px 0 0}
.ac-h3{font-family:var(--disp,sans-serif);font-size:16px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin:20px 0 8px}

/* --- Hub : le catalogue des modules -------------------------------------- */
.ac-mods{display:flex;flex-direction:column;gap:11px}
.ac-mod{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;
  cursor:pointer;padding:14px 15px;color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius,16px);
  background:var(--glassgrad,linear-gradient(180deg,rgba(15,37,59,.76),rgba(5,18,31,.88)))}
.ac-mod:hover{border-color:var(--steel)}
.ac-mod:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}
.ac-mod-n{font-family:var(--disp,sans-serif);font-size:18px;letter-spacing:.02em;
  text-transform:uppercase}
.ac-mod-d{font-size:13px;color:var(--dim);line-height:1.45}
.ac-mod-s{margin-top:4px;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hivis,#ffbd19)}
.ac-mod--soon{cursor:not-allowed;opacity:.58}
.ac-mod--soon .ac-mod-s{color:var(--faint)}

/* --- Fenêtre d'entrée ----------------------------------------------------- */
.ac-form{display:flex;flex-direction:column;gap:6px;padding:15px;
  border:1px solid var(--edge);border-radius:var(--radius,16px);
  background:var(--panelgrad,rgba(16,36,58,.9))}
.ac-lab{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:8px}
.ac-in{width:100%;min-height:var(--tap,48px);padding:0 12px;color:var(--ink);
  font-size:16px;border:1px solid var(--edge);border-radius:var(--radius-sm,11px);
  background:rgba(0,0,0,.22)}
.ac-in:focus{outline:none;border-color:var(--hivis,#ffbd19)}
.ac-jobs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ac-job{min-height:var(--tap,48px);padding:0 14px;cursor:pointer;font-size:14px;
  color:var(--ink);border:1px solid var(--edge);border-radius:var(--radius-sm,11px);
  background:rgba(0,0,0,.18)}
.ac-job.on{border-color:var(--hivis,#ffbd19);color:var(--hivis,#ffbd19)}
.ac-aide{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--faint)}
.ac-err{margin:10px 0 0;font-size:13px;color:var(--red,#ff6473)}

.ac-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ac-actions--quit{margin-top:20px;opacity:.85}

/* --- Session : même structure pour connaissances et situations ------------ */
.ac-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.ac-bar-f{display:block;height:100%;background:var(--hivis,#ffbd19);
  transition:width .25s ease}
.ac-ctx{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 0 6px}
.ac-tag{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hivis,#ffbd19)}
.ac-job-cur{font-size:12px;color:var(--faint)}
.ac-sit-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:6px 0}
.ac-sit-t{font-family:var(--disp,sans-serif);font-size:16px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink)}
.ac-step{font-family:var(--mono,monospace);font-size:12px;color:var(--faint)}
.ac-ctxt{font-size:14px;line-height:1.55;color:var(--dim);margin:4px 0 10px}
.ac-q{font-size:17px;line-height:1.45;color:var(--ink);margin:6px 0 14px}
.ac-answers{display:flex;flex-direction:column;gap:9px}
.ac-answer{min-height:var(--tap,48px);padding:12px 14px;text-align:left;
  cursor:pointer;font-size:15px;line-height:1.4;color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius-sm,11px);
  background:var(--glassgrad,rgba(12,30,48,.82))}
.ac-answer:hover{border-color:var(--steel)}
.ac-answer:active{transform:scale(.995)}
.ac-answer:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}

/* ============================================================================
   RÉSULTAT — l'écran que le joueur emporte (§ 17 à § 25)
   ----------------------------------------------------------------------------
   Le rappel du monde du vélo et de l'atelier est tenu par la GÉOMÉTRIE, pas par
   des images : bande diagonale hi-vis de zone de circulation en tête, couronnes
   dentées autour des deux notes, roue à six rayons pour le radar. Rien à
   télécharger, aucune dépendance, aucune animation.

   Hiérarchie imposée par le CDC : le statut puis les deux notes dominent, les
   six domaines restent discrets. Le statut ne dépend jamais de la seule
   couleur — un symbole et une phrase le disent aussi.
   ========================================================================== */

/* --- A — en-tête d'identité ----------------------------------------------- */
.ac-res-head{position:relative;overflow:hidden;margin:0 0 14px;padding:16px 15px 14px;
  border:1px solid var(--edge);border-radius:var(--radius,16px);
  background:var(--panelgrad,linear-gradient(180deg,rgba(18,42,65,.94),rgba(7,22,37,.97)))}
.ac-res-bande{position:absolute;inset:0 0 auto 0;height:4px;opacity:.85;
  background-image:repeating-linear-gradient(-45deg,var(--hivis,#ffbd19) 0 10px,
    rgba(10,26,42,.95) 10px 20px)}
.ac-res-title{font-family:var(--disp,sans-serif);font-size:23px;line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:3px 0 12px}
.ac-ident{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:9px 14px;margin:0}
.ac-ident>div{min-width:0}
.ac-ident dt{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.ac-ident dd{margin:2px 0 0;font-size:14px;line-height:1.35;color:var(--ink);
  overflow-wrap:anywhere}

/* --- B — badge de statut --------------------------------------------------- */
.ac-statut{display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;padding:15px 12px 13px;border-radius:var(--radius,16px);
  margin:0 0 14px;border:2px solid transparent}
.ac-statut.ok{color:#04121c;background:var(--green,#45d394);border-color:#2fae76}
.ac-statut.ko{color:#1a0508;background:var(--red,#ff6473);border-color:#d9414f}
.ac-statut-m{font-size:24px;line-height:1}
.ac-statut-t{font-family:var(--disp,sans-serif);font-size:32px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase}
.ac-statut-s{font-size:12.5px;line-height:1.35;opacity:.86;max-width:32ch}

/* --- C — les deux notes ---------------------------------------------------- */
.ac-notes{display:flex;flex-direction:column;gap:10px}
.ac-note{display:flex;align-items:center;gap:14px;padding:13px 15px;
  border:1px solid var(--edge);border-radius:var(--radius,16px);
  background:var(--panelgrad,rgba(16,36,58,.9))}
.ac-note.ok{border-left:3px solid var(--green,#45d394)}
.ac-note.ko{border-left:3px solid var(--red,#ff6473)}
.ac-note-x{flex:1;min-width:0}
.ac-note-l{font-family:var(--disp,sans-serif);font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--dim);margin:0}
.ac-note-v{font-family:var(--disp,sans-serif);font-size:30px;line-height:1.05;
  color:var(--hivis,#ffbd19);margin:2px 0 0}
.ac-note-d{font-family:var(--mono,monospace);font-size:11.5px;color:var(--faint);
  margin-top:2px}
.ac-note-s{font-size:12px;margin-top:3px}
.ac-note.ok .ac-note-s{color:var(--green,#45d394)}
.ac-note.ko .ac-note-s{color:var(--red,#ff6473)}

/* Couronne dentée : arc de score, dents de plateau, moyeu. Décorative. */
.ac-ring{flex:0 0 64px;width:64px;height:64px}
.ac-ring-f{fill:none;stroke:rgba(255,255,255,.11);stroke-width:6}
.ac-ring-v{fill:none;stroke-width:6;stroke-linecap:butt}
.ac-ring-v.ok{stroke:var(--green,#45d394)}
.ac-ring-v.ko{stroke:var(--red,#ff6473)}
.ac-ring-d{stroke:var(--steel,#7895ae);stroke-width:1.6;opacity:.5}
.ac-ring-m{fill:var(--steel,#7895ae);opacity:.75}

.ac-rule{font-size:12px;line-height:1.45;color:var(--faint);margin:10px 0 0}

/* --- D — synthèse ---------------------------------------------------------- */
.ac-synth{position:relative;margin:12px 0 0;padding:11px 14px 11px 15px;
  font-size:14px;line-height:1.5;color:var(--ink);
  border:1px solid var(--edge);border-left:3px solid var(--hivis,#ffbd19);
  border-radius:var(--radius-sm,11px);background:rgba(255,189,25,.06)}

/* --- E — les six domaines : volontairement plus discrets que les notes ----- */
.ac-h3{position:relative;padding-left:13px}
.ac-h3::before{content:"";position:absolute;left:0;top:.28em;width:4px;height:.92em;
  border-radius:2px;background:var(--hivis,#ffbd19)}
.ac-themes{display:flex;flex-direction:column;gap:7px}
.ac-theme{display:flex;align-items:center;gap:10px;font-size:13px}
.ac-theme-l{flex:1 1 40%;color:var(--dim)}
.ac-theme-b{flex:1 1 28%;height:6px;border-radius:3px;
  background:rgba(255,255,255,.09);overflow:hidden}
.ac-theme-b>span{display:block;height:100%;background:var(--steel,#7895ae)}
.ac-theme-v{flex:0 0 auto;font-family:var(--mono,monospace);font-size:12px;
  color:var(--dim);min-width:72px;text-align:right}
.ac-theme-d{flex:0 0 auto;font-family:var(--mono,monospace);font-size:11px;
  color:var(--faint);min-width:38px;text-align:right}
.ac-theme.muet .ac-theme-l,.ac-theme.muet .ac-theme-v{color:var(--faint)}
.ac-theme.muet .ac-theme-b{background:repeating-linear-gradient(-45deg,
  rgba(255,255,255,.10) 0 4px,transparent 4px 8px)}
.ac-note-min{font-size:12px;color:var(--faint);margin:8px 0 0}

/* --- F — erreurs détaillées ------------------------------------------------ */
.ac-none{font-size:14px;color:var(--dim)}
.ac-errs{display:flex;flex-direction:column;gap:10px}
.ac-err-c{padding:13px 14px;border:1px solid var(--edge);
  border-radius:var(--radius-sm,11px);background:rgba(0,0,0,.2)}
.ac-err-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ac-err-n{font-family:var(--mono,monospace);font-size:12px;
  color:var(--hivis,#ffbd19)}
.ac-err-t{flex:1;font-family:var(--disp,sans-serif);font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.ac-err-th{font-size:11px;color:var(--faint)}
.ac-err-q{font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 6px}
.ac-err-a,.ac-err-g,.ac-err-w,.ac-err-f{font-size:13px;line-height:1.5;margin:3px 0}
.ac-err-a{color:var(--red,#ff6473)}
.ac-err-g{color:var(--green,#45d394)}
.ac-err-w{color:var(--dim)}
.ac-err-f{color:var(--faint);font-style:italic}

/* --- G — radar des domaines, en bas de page -------------------------------- */
.ac-radar{margin-top:20px}
.ac-radar-box{padding:8px 4px 4px;border:1px solid var(--edge);
  border-radius:var(--radius,16px);
  background:radial-gradient(120% 90% at 50% 32%,rgba(120,149,174,.12),
    rgba(0,0,0,.24) 70%)}
.ac-radar-svg{display:block;width:100%;height:auto;max-width:420px;margin:0 auto}
.ac-rd-grille{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.ac-rd-grille.jante{stroke:var(--steel,#7895ae);stroke-width:1.6;opacity:.75}
.ac-rd-rayon{stroke:rgba(255,255,255,.16);stroke-width:1}
.ac-rd-rayon.muet{stroke-dasharray:3 4}
.ac-rd-zone{fill:rgba(255,189,25,.22);stroke:var(--hivis,#ffbd19);stroke-width:2;
  stroke-linejoin:round}
.ac-rd-trait{stroke:var(--hivis,#ffbd19);stroke-width:2}
.ac-rd-pt{fill:var(--hivis,#ffbd19)}
.ac-rd-moyeu{fill:var(--steel,#7895ae)}
.ac-rd-grad{font-family:var(--mono,monospace);font-size:8.5px;
  fill:var(--faint);opacity:.85}
.ac-rd-lab{font-family:var(--body,sans-serif);font-size:10.5px;fill:var(--dim)}
.ac-rd-val{font-family:var(--mono,monospace);font-size:10px;
  fill:var(--hivis,#ffbd19)}
.ac-rd-lab.muet,.ac-rd-val.muet{fill:var(--faint);font-style:italic}
.ac-radar-leg{font-size:12px;line-height:1.45;color:var(--faint);margin:8px 0 0}

/* --- Export et sortie ------------------------------------------------------ */
.ac-export{margin-top:18px;padding:13px 14px;border:1px solid var(--edge);
  border-radius:var(--radius-sm,11px);background:rgba(0,0,0,.18)}
.ac-pdf,.ac-mail{font-size:13px;color:var(--dim);margin:0 0 6px}
.ac-mail{margin:8px 0 0;color:var(--faint)}

/* --- Format principal RCF : vertical 9:16, référence 414 x 736 ------------- */
@media (max-width:520px){
  .ac-res-title{font-size:21px}
  .ac-statut-t{font-size:27px}
  .ac-note{gap:11px;padding:12px 13px}
  .ac-ring{flex-basis:54px;width:54px;height:54px}
  .ac-note-v{font-size:26px}
  .ac-theme{flex-wrap:wrap;row-gap:3px}
  .ac-theme-l{flex:1 1 100%}
  .ac-theme-b{flex:1 1 auto}
  .ac-rd-lab{font-size:11.5px}
  .ac-rd-val{font-size:11px}
}
@media (max-width:360px){
  .ac-note{flex-wrap:wrap}
  .ac-ident{grid-template-columns:1fr 1fr}
}