@charset "utf-8";
/* ===========================================================================
   Formation GoSchool — feuille de style unique.

   --- Le principe ----------------------------------------------------------
   Une page, six cartes, un lecteur. Rien d'autre. Le site est un sommaire
   que l'on ouvre au moment d'apprendre, pas une plaquette : le texte reste
   court, et c'est la couleur du public qui oriente l'œil.

   --- La couleur -----------------------------------------------------------
   La charte est celle de l'application (SchoolConfig) et celle du logo :

     --vert  #7EA468   --bleu  #2D99C6   --or  #F2B84A
     --teal  #26AFC0   --marine #1B3A6E        (le dégradé du logo)

   Chaque public porte une de ces teintes et la garde partout : filtre, badge,
   liseré de carte, sommaire du lecteur. C'est le seul repère de navigation,
   donc il ne varie jamais.

   --- Le thème sombre ------------------------------------------------------
   Toutes les couleurs sont définies sur :root, puis redéfinies — les mêmes
   noms, d'autres valeurs — dans le bloc prefers-color-scheme. Aucune couleur
   n'a sa seule définition à l'intérieur du bloc sombre.
   =========================================================================== */

/* --- Les fontes ----------------------------------------------------------- */
/* Inter, comme le manuel et les flyers. Les fichiers sont dans le dossier :
   le site fonctionne hors ligne, sans requête vers un CDN. */
@font-face{
  font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';src:url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter Display';src:url('../fonts/InterDisplay-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* --- Les jetons ----------------------------------------------------------- */
:root{
  /* La charte */
  --vert:#7EA468;        --vert-clair:#A7C493;   --vert-fonce:#5F824E;
  --bleu:#2D99C6;        --bleu-clair:#67C1E6;   --bleu-fonce:#1E769B;
  --or:#F2B84A;          --or-fonce:#C99024;
  --rose:#BC2D57;
  --teal:#26AFC0;        --marine:#1B3A6E;

  /* Les aplats profonds du bandeau — les mêmes que ceux des flyers */
  --profond:#0F2340;
  --profond-clair:#1B3A6E;
  --profond-vert:#35523C;

  /* La page */
  --fond:#FAFAF7;
  --surface:#FFFFFF;
  --surface-creuse:#F2F2EE;
  --bordure:#E0E0DA;
  --bordure-forte:#CBCBC3;
  --encre:#1E252B;
  --encre-douce:#5E6A74;
  --encre-tres-douce:#8A949C;

  /* Les teintes de public, nommées comme dans data.js */
  --public-or:#C99024;
  --public-bleu:#1E769B;
  --public-vert:#5F824E;
  --public-teal:#1C8A99;
  --public-rose:#BC2D57;

  /* Le rythme */
  --r-s:8px; --r-m:14px; --r-l:22px;
  --ombre-1:0 1px 2px rgb(16 28 40 / .05), 0 2px 8px rgb(16 28 40 / .04);
  --ombre-2:0 2px 6px rgb(16 28 40 / .07), 0 12px 32px rgb(16 28 40 / .10);
  --ombre-3:0 24px 70px rgb(8 16 28 / .38);
  --lisiere:1200px;
}

@media (prefers-color-scheme:dark){
  :root{
    --fond:#0E141A;
    --surface:#161E26;
    --surface-creuse:#1D2831;
    --bordure:#27333D;
    --bordure-forte:#37454F;
    --encre:#E9EDF0;
    --encre-douce:#9DAAB4;
    --encre-tres-douce:#76838D;

    --public-or:#F2B84A;
    --public-bleu:#67C1E6;
    --public-vert:#A7C493;
    --public-teal:#4FC9D8;
    --public-rose:#E4708F;

    --ombre-1:0 1px 2px rgb(0 0 0 / .30), 0 2px 8px rgb(0 0 0 / .22);
    --ombre-2:0 2px 6px rgb(0 0 0 / .34), 0 12px 32px rgb(0 0 0 / .40);
    --ombre-3:0 24px 70px rgb(0 0 0 / .64);
  }
}

/* --- Remise à zéro -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  background:var(--fond);
  color:var(--encre);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
ol,ul{list-style:none}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--bleu);
  outline-offset:3px;
  border-radius:4px;
}

.lisiere{width:min(100% - 40px,var(--lisiere));margin-inline:auto}

/* Le lien d'évitement : visible seulement au clavier. */
.saut{
  position:absolute;left:12px;top:-60px;z-index:60;
  background:var(--surface);color:var(--encre);
  padding:10px 16px;border-radius:var(--r-s);box-shadow:var(--ombre-2);
  transition:top .15s ease;
}
.saut:focus{top:12px}

/* ===== La barre ============================================================ */
.barre{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--fond) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--bordure);
}
.barre__contenu{display:flex;align-items:center;gap:16px;min-height:62px}
.barre__marque{display:flex;align-items:center;gap:11px;text-decoration:none}
.barre__logo{width:30px;height:30px;object-fit:contain}
.barre__nom{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.01em;line-height:1;
}
.barre__nom span{color:var(--encre-tres-douce);font-weight:500}
.barre__espace{flex:1}

/* L'anneau de progression : le seul chiffre que l'on suit du regard. */
.anneau{display:flex;align-items:center;gap:10px}
.anneau__texte{font-size:13px;color:var(--encre-douce);white-space:nowrap}
.anneau__texte b{color:var(--encre);font-weight:600}
.anneau__svg{width:34px;height:34px;transform:rotate(-90deg);flex:none}
.anneau__piste{fill:none;stroke:var(--bordure);stroke-width:3.5}
.anneau__jauge{
  fill:none;stroke:var(--vert);stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dashoffset .45s cubic-bezier(.4,0,.2,1);
}

/* ===== Le bandeau ========================================================== */
.heros{
  position:relative;overflow:hidden;color:#FFFFFF;
  background:
    radial-gradient(64% 70% at 86% 6%,
      color-mix(in srgb,var(--teal) 40%,transparent) 0%,transparent 62%),
    radial-gradient(58% 64% at 0% 100%,
      color-mix(in srgb,var(--vert) 34%,transparent) 0%,transparent 66%),
    linear-gradient(148deg,var(--profond-clair) 0%,var(--profond) 60%,
      var(--profond-vert) 100%);
}
/* L'étoile à huit branches du logo, en filigrane. */
.heros__filigrane{
  position:absolute;top:-14%;right:-8%;width:min(520px,56%);
  opacity:.07;pointer-events:none;
}
.heros__contenu{position:relative;padding:72px 0 80px}
.heros__oeil{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--or);
  border:1px solid color-mix(in srgb,var(--or) 42%,transparent);
  background:color-mix(in srgb,var(--or) 12%,transparent);
  padding:6px 14px;border-radius:999px;
}
.heros__titre{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.025em;
  margin:22px 0 0;max-width:17ch;
}
.heros__titre em{font-style:normal;color:var(--or)}
.heros__chapeau{
  margin-top:20px;max-width:60ch;
  font-size:clamp(16px,1.6vw,19px);line-height:1.65;
  color:color-mix(in srgb,#FFFFFF 82%,transparent);
}
.heros__chiffres{
  display:flex;flex-wrap:wrap;gap:14px 46px;
  margin-top:38px;padding-top:30px;
  border-top:1px solid color-mix(in srgb,#FFFFFF 16%,transparent);
}
.chiffre__valeur{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:30px;line-height:1.1;letter-spacing:-.02em;
}
.chiffre__libelle{
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:color-mix(in srgb,#FFFFFF 62%,transparent);margin-top:3px;
}

/* ===== Les filtres ========================================================= */
.parcours{padding:56px 0 90px}
.section__tete{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:8px;
}
.section__titre{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.02em;
}
.section__note{color:var(--encre-douce);font-size:14.5px}

.filtres{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 30px}
.filtre{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--bordure-forte);
  background:var(--surface);
  font-size:14px;font-weight:500;color:var(--encre-douce);
  transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease;
}
.filtre:hover{border-color:var(--encre-tres-douce);color:var(--encre);transform:translateY(-1px)}
.filtre__pastille{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.filtre__compte{font-size:12px;font-variant-numeric:tabular-nums;color:var(--encre-tres-douce)}
.filtre[aria-pressed="true"]{
  background:color-mix(in srgb,var(--teinte,var(--encre)) 11%,var(--surface));
  border-color:color-mix(in srgb,var(--teinte,var(--encre)) 48%,transparent);
  color:var(--teinte,var(--encre));
}
.filtre[aria-pressed="true"] .filtre__compte{color:inherit;opacity:.72}
.filtre--tous{--teinte:var(--encre)}
.filtre--or{--teinte:var(--public-or)}
.filtre--bleu{--teinte:var(--public-bleu)}
.filtre--vert{--teinte:var(--public-vert)}
.filtre--teal{--teinte:var(--public-teal)}
.filtre--rose{--teinte:var(--public-rose)}

/* ===== La grille =========================================================== */
.grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

.carte{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--bordure);
  border-radius:var(--r-l);
  box-shadow:var(--ombre-1);
  overflow:hidden;
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease,border-color .18s ease;
}
.carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-2);border-color:var(--bordure-forte)}
/* Le liseré du haut : la teinte du public, sur toute la largeur. */
.carte::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--teinte)}
.carte--or{--teinte:var(--public-or)}
.carte--bleu{--teinte:var(--public-bleu)}
.carte--vert{--teinte:var(--public-vert)}
.carte--teal{--teinte:var(--public-teal)}
.carte--rose{--teinte:var(--public-rose)}

/* Le numéro, en filigrane dans le coin. */
.carte__numero{
  position:absolute;top:4px;right:18px;
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:78px;line-height:1;letter-spacing:-.04em;
  color:var(--teinte);opacity:.10;pointer-events:none;user-select:none;
}
.carte__corps{padding:24px 24px 0;flex:1;position:relative}
.carte__etiquettes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;
}
.badge--public{color:var(--teinte);background:color-mix(in srgb,var(--teinte) 13%,transparent)}
.badge--etat{color:var(--encre-douce);background:var(--surface-creuse);border:1px solid var(--bordure)}
.badge--pret{
  color:var(--vert-fonce);
  background:color-mix(in srgb,var(--vert) 15%,transparent);
  border-color:transparent;
}
@media (prefers-color-scheme:dark){.badge--pret{color:var(--vert-clair)}}

.carte__titre{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:21px;line-height:1.25;letter-spacing:-.018em;margin:14px 0 0;
}
.carte__accroche{margin-top:7px;color:var(--encre-douce);font-size:14.5px;line-height:1.55}
.carte__quand{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;color:var(--encre-tres-douce);font-variant-numeric:tabular-nums;
}
.carte__quand svg{width:14px;height:14px;flex:none;opacity:.8}
.carte__sommaire{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}

.jeton{
  font-size:12px;line-height:1.45;
  padding:3px 9px;border-radius:var(--r-s);
  background:var(--surface-creuse);color:var(--encre-douce);
  border:1px solid transparent;
}
.jeton--reste{background:transparent;border-color:var(--bordure);color:var(--encre-tres-douce)}

.carte__pied{
  display:flex;align-items:center;gap:12px;
  margin-top:20px;padding:16px 24px;
  border-top:1px solid var(--bordure);
  background:color-mix(in srgb,var(--surface-creuse) 55%,transparent);
}
.carte__meta{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--encre-douce);font-variant-numeric:tabular-nums;
}
.carte__meta svg{width:15px;height:15px;flex:none;opacity:.75}
.carte__espace{flex:1}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 17px;border-radius:999px;
  font-size:14px;font-weight:600;white-space:nowrap;
  border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;
}
.bouton:active{transform:scale(.97)}
/* Un bouton ne rétrécit jamais : c'est le texte autour qui cède. */
.bouton{flex:none}
.carte__meta{min-width:0}
.bouton svg{width:15px;height:15px;flex:none}
.bouton--plein{background:var(--teinte,var(--marine));color:#FFFFFF}
.bouton--plein:hover{filter:brightness(1.08)}
@media (prefers-color-scheme:dark){.bouton--plein{color:#0E141A}}
.bouton--fantome{border-color:var(--bordure-forte);color:var(--encre-douce);background:var(--surface)}
.bouton--fantome:hover{border-color:var(--encre-tres-douce);color:var(--encre)}

/* La coche « vu » : un bouton, pas une case, pour rester cliquable en entier. */
.coche{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--bordure-forte);color:var(--encre-tres-douce);
  background:var(--surface);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.coche svg{width:16px;height:16px}
.coche:hover{border-color:var(--vert);color:var(--vert-fonce)}
.coche[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:#FFFFFF}

/* La carte vue : moins d'encre, le titre s'efface. */
.carte--vue{border-color:color-mix(in srgb,var(--vert) 40%,var(--bordure))}
.carte--vue .carte__numero{opacity:.06}
.carte--vue .carte__titre{color:var(--encre-douce)}

.vide{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--encre-douce)}

/* ===== Le lecteur ========================================================== */
.lecteur{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgb(6 12 20 / .72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:apparait .18s ease;
}
@keyframes apparait{from{opacity:0}to{opacity:1}}

.lecteur__panneau{
  display:flex;flex-direction:column;
  width:min(1180px,100%);max-height:100%;
  background:var(--surface);
  border-radius:var(--r-l);box-shadow:var(--ombre-3);overflow:hidden;
}
.lecteur__tete{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--bordure);
}
.lecteur__pastille{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-s);flex:none;
  font-family:'Inter Display',sans-serif;font-weight:700;font-size:15px;
  color:var(--teinte);background:color-mix(in srgb,var(--teinte) 14%,transparent);
}
.lecteur__titre{
  font-family:'Inter Display',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.015em;line-height:1.25;
}
.lecteur__sous-titre{font-size:13px;color:var(--encre-douce);margin-top:1px}
.lecteur__fermer{
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;flex:none;color:var(--encre-douce);
}
.lecteur__fermer:hover{background:var(--surface-creuse);color:var(--encre)}
.lecteur__fermer svg{width:18px;height:18px}

.lecteur__scene{display:flex;min-height:0;flex:1}
.lecteur__video{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  background:#05090E;
}
.lecteur__video video{width:100%;max-height:70vh;display:block}

/* L'épisode pas encore tourné : on montre quand même son sommaire. */
.attente{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:64px 32px;color:#C9D3DC;min-height:320px;
}
.attente svg{width:44px;height:44px;opacity:.5}
.attente strong{font-family:'Inter Display',sans-serif;font-size:17px;color:#F2F5F8}
.attente p{font-size:14px;max-width:46ch;line-height:1.65}
.attente code{
  font-family:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  font-size:12.5px;background:rgb(255 255 255 / .09);
  padding:1px 5px;border-radius:5px;color:#EAF0F5;
}

.lecteur__flanc{
  width:310px;flex:none;display:flex;flex-direction:column;
  border-left:1px solid var(--bordure);background:var(--surface);overflow-y:auto;
}
.flanc__tete{
  padding:16px 20px 10px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-tres-douce);
}
.flanc__resume{
  padding:0 20px 16px;font-size:14px;line-height:1.6;color:var(--encre-douce);
  border-bottom:1px solid var(--bordure);
}
.chapitres{padding:8px 10px 16px}
.chapitre{
  display:flex;align-items:baseline;gap:11px;width:100%;
  padding:9px 11px;border-radius:var(--r-s);
  font-size:14px;text-align:left;line-height:1.45;color:var(--encre);
}
.chapitre__rang{
  font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--encre-tres-douce);flex:none;min-width:14px;
}
.chapitre__intitule{flex:1;min-width:0}
.chapitre__temps{
  margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--teinte);flex:none;
}
button.chapitre:hover{background:var(--surface-creuse)}
.chapitre--fige{cursor:default;color:var(--encre-douce)}
.chapitre--courant{background:color-mix(in srgb,var(--teinte) 12%,transparent);font-weight:600}

.lecteur__pied{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--bordure);
  background:color-mix(in srgb,var(--surface-creuse) 55%,transparent);
}

/* ===== Le pied de page ===================================================== */
.aide{border-top:1px solid var(--bordure);background:var(--surface);padding:52px 0}
.aide__grille{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.aide h3{
  font-family:'Inter Display',sans-serif;font-size:15px;letter-spacing:-.01em;
  margin-bottom:7px;
}
.aide p{font-size:14px;color:var(--encre-douce);line-height:1.6}
.aide a{color:var(--bleu-fonce);text-decoration-thickness:1px;text-underline-offset:2px}
@media (prefers-color-scheme:dark){.aide a{color:var(--bleu-clair)}}

.pied{
  border-top:1px solid var(--bordure);padding:22px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--encre-tres-douce);
}
.lien-nu{
  font-size:13px;color:var(--encre-douce);text-decoration:underline;
  text-decoration-color:var(--bordure-forte);text-underline-offset:3px;
}
.lien-nu:hover{color:var(--encre)}

/* ===== Les écrans étroits ================================================== */
@media (max-width:900px){
  .lecteur{padding:0}
  .lecteur__panneau{width:100%;height:100%;max-height:100%;border-radius:0}
  .lecteur__scene{flex-direction:column;overflow-y:auto}
  .lecteur__flanc{
    width:auto;border-left:none;border-top:1px solid var(--bordure);overflow:visible;
  }
  .lecteur__video video{max-height:42vh}
}
@media (max-width:620px){
  .lisiere{width:calc(100% - 32px)}
  .heros__contenu{padding:52px 0 58px}
  .heros__chiffres{gap:14px 30px}
  .chiffre__valeur{font-size:25px}
  .grille{grid-template-columns:1fr}
  .carte__pied{flex-wrap:wrap}
  .barre__nom span{display:none}
  .anneau__texte{display:none}
}