/* ============================================================================
   RCF · LOT 11.5 — RCF ACADEMY — MODULE 02 — STYLE
   ----------------------------------------------------------------------------
   Toutes les classes propres à ce module sont préfixées `.m02-`. Aucune règle
   ici ne redéfinit une classe du Module 01 : `academy.css` reste la feuille du
   Lot 11, gelée, et les deux modules peuvent cohabiter sans qu'un ajustement
   d'ici déplace un pixel là-bas. Les classes partagées volontairement
   réutilisées — `.ac-wrap`, `.ac-form`, `.ac-in`, `.ac-answers`, `.ac-h3` —
   ne sont ici que CONSOMMÉES, jamais redéfinies.

   La hiérarchie vient de la spécification : le score global domine tout, les
   cinq domaines sont secondaires, le radar ferme la page. Les rappels du monde
   du vélo sont tenus par la géométrie — plateau denté du score, roue à cinq
   rayons du radar, bande d'atelier en tête — jamais par des images.
   ========================================================================== */

/* Le Module 01 masque le bandeau de carrière sur son écran ; le Module 02 fait
   de même sur le sien. C'est un AJOUT pour un nouveau sélecteur, pas une
   redéfinition de la règle du Lot 11. */
.wrap:has(#scAcademyM02.on) header.top{display:none}

.m02-head{margin-bottom:14px}

/* --- Choix du format ------------------------------------------------------ */
.m02-formats{display:flex;flex-direction:column;gap:11px}
.m02-format{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;
  cursor:pointer;padding:15px 16px;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)))}
.m02-format:hover{border-color:var(--steel)}
.m02-format:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}
.m02-format-n{font-family:var(--disp,sans-serif);font-size:20px;letter-spacing:.02em;
  text-transform:uppercase}
.m02-format-d{font-size:13.5px;color:var(--dim)}
.m02-format-s{margin-top:3px;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hivis,#ffbd19)}

/* --- Questionnaire -------------------------------------------------------- */
.m02-domaine{display:flex;align-items:center;gap:7px;margin:10px 0 2px;
  font-size:12px;color:var(--faint)}
.m02-picto{width:17px;height:17px;flex:0 0 17px;fill:none;
  stroke:var(--steel,#7895ae);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round}
.m02-choix{display:flex;align-items:flex-start;gap:11px}
.m02-lettre{flex:0 0 24px;height:24px;display:inline-flex;align-items:center;
  justify-content:center;margin-top:1px;border-radius:7px;
  font-family:var(--mono,monospace);font-size:12px;color:var(--hivis,#ffbd19);
  border:1px solid var(--edge);background:rgba(0,0,0,.25)}
.m02-texte{flex:1}

/* --- Résultat : en-tête --------------------------------------------------- */
.m02-res-head{position:relative;overflow:hidden;margin:0 0 16px;
  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)))}
.m02-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)}
.m02-res-title{font-family:var(--disp,sans-serif);font-size:22px;line-height:1.12;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:3px 0 12px}

/* --- Résultat : la roue du score, dominante ------------------------------- */
.m02-score{display:flex;justify-content:center;margin:2px 0 4px}
.m02-roue{width:100%;max-width:236px;height:auto}
.m02-dent{stroke:var(--steel,#7895ae);stroke-width:2;opacity:.45}
.m02-roue-f{fill:none;stroke:rgba(255,255,255,.10);stroke-width:11}
.m02-roue-v{fill:none;stroke:var(--hivis,#ffbd19);stroke-width:11;
  stroke-linecap:butt}
.m02-rayon{stroke:rgba(255,255,255,.13);stroke-width:1.4}
.m02-moyeu{fill:rgba(6,17,28,.82)}
.m02-roue-s{font-family:var(--disp,sans-serif);font-size:23px;
  fill:var(--dim);letter-spacing:.02em}
.m02-roue-p{font-family:var(--disp,sans-serif);font-size:34px;
  fill:var(--hivis,#ffbd19)}

.m02-phrase{margin:8px 0 0;padding:12px 15px;text-align:center;font-size:16px;
  line-height:1.4;color:var(--ink);border:1px solid var(--edge);
  border-radius:var(--radius,16px);background:rgba(255,189,25,.07)}

/* --- Résultat : les cinq domaines ----------------------------------------- */
.m02-domaines{display:flex;flex-direction:column;gap:9px}
.m02-dom{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"p n v" "b b b";align-items:center;gap:4px 9px}
.m02-dom-p{grid-area:p;display:inline-flex}
.m02-dom-n{grid-area:n;font-size:13.5px;color:var(--dim);line-height:1.3}
.m02-dom-v{grid-area:v;font-family:var(--mono,monospace);font-size:13px;
  color:var(--hivis,#ffbd19);min-width:46px;text-align:right}
.m02-dom-b{grid-area:b;height:7px;border-radius:4px;
  background:rgba(255,255,255,.09);overflow:hidden}
.m02-dom-b>span{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--steel,#7895ae),var(--hivis,#ffbd19))}

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

/* --- Format principal RCF : vertical 9:16, référence 414 x 736 ------------ */
@media (max-width:520px){
  .m02-res-title{font-size:20px}
  .m02-roue{max-width:212px}
  .m02-phrase{font-size:15px}
  .m02-format-n{font-size:18px}
  .m02-rd-lab{font-size:11px}
  .m02-rd-val{font-size:10.5px}
}
@media (max-width:360px){
  .m02-roue{max-width:196px}
  .m02-dom-n{font-size:12.5px}
}