/* ═══════════════════════════════════════════════════════════════════════
   FUTURBTS — L'IDENTITÉ ET LE MOUVEMENT

   fx.css porte le système commun (jetons, grille, boutons, cartes) ;
   ce fichier pose ce qui fait FuturBTS : l'en-tête, le sélecteur des BTS
   inspiré des jeux de rythme, les pages de BTS, de matière et de chapitre,
   le quiz, et les animations.

   LE MOUVEMENT, EN TROIS RÈGLES
     · rapide : 160 à 420 ms, jamais plus ; on ne fait pas attendre ;
     · utile  : il dit ce qui change (sélection, validation, progression) ;
     · sobre  : il s'efface entièrement avec « réduire les animations ».
   ═════════════════════════════════════════════════════════════════════ */

/* ── 0. AJUSTEMENTS DU SYSTÈME ─────────────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fb-sortie .18s ease-in both}
::view-transition-new(root){animation:fb-entree .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes fb-sortie{to{opacity:0;transform:translateY(-6px)}}
@keyframes fb-entree{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
h1,h2,h3{letter-spacing:-.025em}
h1{font-weight:800}
.btn{transition:transform var(--t),box-shadow var(--t),background-color var(--t),color var(--t),border-color var(--t)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-1{position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -10px color-mix(in srgb,var(--action) 70%,transparent)}
.btn-1::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s ease}
.btn-1:hover::after{transform:translateX(120%)}
.btn-1:hover{transform:translateY(-1px)}
.carte{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}

/* ── 1. LA MARQUE ET L'EN-TÊTE ─────────────────────────────────────── */
.entete{background:color-mix(in srgb,var(--papier) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--bord) 70%,transparent)}
.marque{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--encre);
  font-family:var(--disp);font-weight:800;font-size:1.22rem;letter-spacing:-.03em}
.marque svg{flex:none;transition:transform .5s var(--ressort)}
.marque:hover svg{transform:rotate(-8deg) scale(1.06)}
.marque b{color:var(--marque);font-weight:800}
.nav a{position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--action)}

/* ── 2. LES APPARITIONS ────────────────────────────────────────────── */
.js [data-apparait]{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 45ms)}
.js [data-apparait].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-apparait]{opacity:1;transform:none;transition:none}}

/* Les jauges se remplissent quand elles entrent à l'écran. */
.js .jauge i{transition:width 1s cubic-bezier(.2,.7,.2,1)}
.js .jauge:not(.vu) i{width:0!important}

/* ── 3. L'ACCUEIL ──────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,96px) clamp(36px,6vw,80px)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:62vw;height:62vw;max-width:820px;max-height:820px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cobalt) 16%,transparent),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;left:-14vw;bottom:-30vw;width:50vw;height:50vw;max-width:640px;max-height:640px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--marque) 12%,transparent),transparent 70%);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:920px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.surtitre{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:var(--r-p);
  background:var(--papier);border:1px solid var(--bord);font-weight:600;font-size:.88rem;color:var(--encre-2);box-shadow:var(--om-1)}
.surtitre i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-f)}
.hero h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,4.1rem);line-height:1.02;margin:18px 0 18px;letter-spacing:-.04em}
.hero h1 .souligne{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--marque) 26%,transparent) 62%);padding-inline:.06em}
.hero .chapo{font-size:clamp(1.04rem,.95rem + .4vw,1.22rem);color:var(--encre-2);max-width:56ch}
.hero .gages{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;color:var(--gris);font-size:.92rem}
.hero .gages span{display:inline-flex;align-items:center;gap:6px}
.hero .gages svg{color:var(--ok)}

/* La vitrine de l'accueil : les BTS qui défilent d'eux-mêmes. */
.vitrine{position:relative;height:440px;perspective:900px}
@media (max-width:920px){.vitrine{height:330px}}
.vitrine .v-carte{position:absolute;left:8%;right:4%;top:50%;height:96px;margin-top:-48px;border-radius:22px;
  background:var(--papier);border:1px solid var(--bord);box-shadow:var(--om-2);display:flex;align-items:center;gap:16px;padding:0 22px;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease,box-shadow .8s ease;will-change:transform}
.vitrine .v-carte .v-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:var(--teinte-f);color:var(--teinte-i)}
.vitrine .v-carte b{font-family:var(--disp);font-size:1.12rem;display:block;letter-spacing:-.02em}
.vitrine .v-carte small{color:var(--gris);font-size:.86rem}
.vitrine .v-carte.actif{box-shadow:0 0 0 2px var(--teinte),0 24px 50px -24px color-mix(in srgb,var(--teinte) 70%,transparent)}

.etapes{counter-reset:etape}
.etape{position:relative;padding:22px 22px 20px;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--bord)}
.etape .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--teinte-f,var(--action-f));color:var(--teinte-i,var(--action-i));margin-bottom:14px}
.etape h3{font-size:1.12rem;margin-bottom:6px}
.etape p{color:var(--encre-2);font-size:.96rem;margin:0}

.chiffres-bandeau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:720px){.chiffres-bandeau{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chiffre{padding:18px 20px;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--bord)}
.chiffre b{display:block;font-family:var(--disp);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.04em;color:var(--encre)}
.chiffre span{color:var(--gris);font-size:.9rem}

/* ── 4. LE SÉLECTEUR DES BTS — l'hommage aux jeux de rythme ────────────
   Une colonne de cartes qui défile nativement (molette, pavé tactile, doigt,
   clavier) et s'aimante au centre. Le script courbe la colonne en arc et
   met en avant la carte centrale ; sans lui, la liste reste une liste. */
.osu{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,44px);
  align-items:stretch;min-height:calc(100vh - var(--entete-h) - 40px);padding-block:22px 40px}
.osu::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:background .6s ease;
  background:radial-gradient(60vw 60vw at 15% 50%,color-mix(in srgb,var(--sel,var(--cobalt)) 13%,transparent),transparent 70%),
             radial-gradient(40vw 40vw at 90% 15%,color-mix(in srgb,var(--sel,var(--cobalt)) 8%,transparent),transparent 70%)}
.osu-liste{position:relative;height:calc(100vh - var(--entete-h) - 80px);min-height:460px;max-height:820px;overflow-y:auto;
  scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  outline:none}
.osu-liste::-webkit-scrollbar{display:none}
.osu-liste ol{list-style:none;margin:0;padding:calc((100vh - var(--entete-h) - 80px) / 2 - 52px) 0}
.osu-item{scroll-snap-align:center;height:104px;display:flex;align-items:center;padding:6px 0}
.osu-carte{--d:0;position:relative;width:100%;height:92px;display:flex;align-items:center;gap:16px;padding:0 18px 0 14px;
  border-radius:20px;text-decoration:none;color:var(--encre);background:var(--papier);border:1px solid var(--bord);
  box-shadow:var(--om-1);transform-origin:0% 50%;will-change:transform,opacity;
  transition:box-shadow .3s ease,border-color .3s ease,background-color .3s ease}
.osu-carte .o-ic{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;flex:none;
  background:var(--teinte-f);color:var(--teinte-i);transition:transform .45s var(--ressort)}
.osu-carte .o-t{min-width:0}
.osu-carte .o-t b{display:block;font-family:var(--disp);font-weight:800;font-size:1.14rem;letter-spacing:-.02em;line-height:1.15}
.osu-carte .o-t small{display:block;color:var(--gris);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osu-carte .o-pct{margin-left:auto;font-family:var(--mono);font-size:.82rem;color:var(--teinte-i);flex:none}
.osu-carte::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--teinte);
  opacity:.0;transition:opacity .3s ease}
.osu-carte[aria-current="true"]{border-color:color-mix(in srgb,var(--teinte) 55%,var(--bord));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--teinte) 40%,transparent),0 22px 44px -22px color-mix(in srgb,var(--teinte) 75%,transparent)}
.osu-carte[aria-current="true"]::before{opacity:1}
.osu-carte[aria-current="true"] .o-ic{transform:scale(1.08) rotate(-4deg)}
.osu-carte:focus-visible{outline:3px solid var(--teinte);outline-offset:3px}
.osu-aide{position:absolute;left:0;bottom:-6px;display:flex;gap:14px;color:var(--gris);font-size:.82rem}
.osu-aide kbd{font-family:var(--mono);font-size:.76rem;padding:1px 6px;border-radius:6px;border:1px solid var(--bord);background:var(--papier);color:var(--encre-2)}

.osu-detail{position:sticky;top:calc(var(--entete-h) + 22px);align-self:start;border-radius:28px;overflow:hidden;
  background:var(--papier);border:1px solid var(--bord);box-shadow:var(--om-3)}
.osu-detail .d-haut{position:relative;padding:28px 28px 24px;color:var(--encre);
  background:linear-gradient(135deg,var(--teinte-f),color-mix(in srgb,var(--teinte-f) 30%,var(--papier)))}
.osu-detail .d-haut::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teinte) 30%,transparent),transparent)}
.osu-detail .d-sigle{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.82rem;font-weight:600;
  color:var(--teinte-i);background:var(--papier);padding:4px 10px;border-radius:var(--r-p)}
.osu-detail h1{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);margin:14px 0 8px;line-height:1.05}
.osu-detail .d-acc{color:var(--encre-2);margin:0;max-width:44ch}
.osu-detail .d-corps{padding:22px 28px 26px}
.d-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.d-stats div{padding:10px 12px;border-radius:14px;background:var(--brume)}
.d-stats b{display:block;font-family:var(--disp);font-size:1.3rem;letter-spacing:-.03em}
.d-stats span{font-size:.78rem;color:var(--gris)}
.d-mats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none}
.d-mats li{font-size:.84rem;padding:5px 11px;border-radius:var(--r-p);border:1px solid var(--bord);color:var(--encre-2);background:var(--papier)}
.osu-detail .d-anim{animation:fb-detail .42s cubic-bezier(.2,.7,.2,1)}
@keyframes fb-detail{from{opacity:0;transform:translateY(8px)}}
.osu-go{width:100%;justify-content:center;background:var(--teinte)!important;border-color:var(--teinte)!important;color:#fff!important;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--teinte) 85%,transparent)!important}
:root[data-theme="sombre"] .osu-go{color:#0E1222!important}

/* La validation : un éclat de la couleur du BTS qui recouvre l'écran. */
.osu-eclat{position:fixed;z-index:300;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:var(--sel,var(--cobalt));pointer-events:none;transform:scale(0);opacity:.96}
.osu-eclat.go{animation:fb-eclat .55s cubic-bezier(.7,0,.3,1) forwards}
@keyframes fb-eclat{to{transform:scale(160)}}
.osu-carte.choisie{animation:fb-pulse .4s var(--ressort)}
@keyframes fb-pulse{50%{transform:scale(1.04)}}

@media (max-width:860px){
  .osu{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:12px 28px}
  .osu-liste{height:auto;min-height:0;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .osu-liste ol{display:flex;padding:8px calc(50% - 120px)}
  .osu-item{height:auto;width:240px;flex:none;padding:0 6px}
  .osu-carte{height:auto;flex-direction:column;align-items:flex-start;padding:16px;gap:10px;transform-origin:50% 50%}
  .osu-carte .o-pct{margin-left:0}
  .osu-carte .o-t small{white-space:normal}
  .osu-aide{display:none}
  .osu-detail{position:relative;top:0}
  .d-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 5. LA PAGE D'UN BTS ET D'UNE MATIÈRE ──────────────────────────── */
.bande{position:relative;overflow:hidden;border-radius:28px;padding:clamp(22px,4vw,40px);
  background:linear-gradient(135deg,var(--teinte-f),color-mix(in srgb,var(--teinte-f) 25%,var(--papier)));
  border:1px solid color-mix(in srgb,var(--teinte) 18%,var(--bord))}
.bande::after{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teinte) 22%,transparent),transparent);pointer-events:none}
.bande > *{position:relative;z-index:1}
.bande h1{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.9rem);margin:10px 0 8px}
.bande p{color:var(--encre-2);max-width:62ch;margin:0}
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.86rem;color:var(--gris)}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--encre)}
.fil svg{opacity:.5}
.etiquette{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.78rem;font-weight:600;
  color:var(--teinte-i);background:var(--papier);padding:4px 10px;border-radius:var(--r-p);border:1px solid color-mix(in srgb,var(--teinte) 22%,var(--bord))}

.tuiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tuile{padding:16px 16px 14px;border-radius:18px;text-align:center;background:var(--tf,var(--papier));border:1px solid var(--bord)}
.tuile b{display:block;font-family:var(--disp);font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);letter-spacing:-.03em;color:var(--ti,var(--encre))}
.tuile span{font-size:.84rem;color:var(--gris)}

.mat-carte{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:22px;text-decoration:none;
  color:var(--encre);background:var(--papier);border:1px solid var(--bord);box-shadow:var(--om-1);overflow:hidden}
.mat-carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teinte)}
.mat-carte:hover{transform:translateY(-3px);box-shadow:var(--om-2);border-color:color-mix(in srgb,var(--teinte) 40%,var(--bord))}
.mat-carte .m-code{font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--teinte-i);background:var(--teinte-f);
  padding:3px 9px;border-radius:var(--r-p);align-self:flex-start}
.mat-carte .m-t{font-family:var(--disp);font-weight:800;font-size:1.12rem;line-height:1.2;letter-spacing:-.02em}
.mat-carte .m-d{color:var(--gris);font-size:.87rem;line-height:1.45}
.mat-carte .m-pied{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--gris);font-size:.84rem}
.mat-carte .jauge{--teinte:var(--teinte)}

.reprise{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:20px;background:var(--papier);
  border:1px solid var(--bord);box-shadow:var(--om-1);text-decoration:none;color:var(--encre)}
.reprise:hover{box-shadow:var(--om-2);transform:translateY(-2px)}
.reprise .r-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--action-f);color:var(--action-i);flex:none}
.reprise small{color:var(--gris);display:block;font-size:.82rem}
.reprise b{font-family:var(--disp)}

.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-p);border:1px solid var(--bord);
  background:var(--papier);color:var(--encre-2);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;
  transition:background-color var(--t),color var(--t),border-color var(--t)}
.puce:hover{border-color:var(--bord-fort);color:var(--encre)}
.puce[aria-pressed="true"],.puce[aria-current="page"]{background:var(--action);border-color:var(--action);color:#fff}
:root[data-theme="sombre"] .puce[aria-pressed="true"]{color:#0E1222}

/* La liste des chapitres : chaque chapitre se déplie sur ses trois espaces. */
.theme-t{display:flex;align-items:baseline;gap:10px;margin:34px 0 4px}
.theme-t .n{font-family:var(--mono);font-weight:600;color:var(--teinte-i)}
.theme-t h2{font-size:1.3rem}
.theme-m{color:var(--gris);font-size:.88rem;margin:0 0 12px}
.chap{border-radius:18px;background:var(--papier);border:1px solid var(--bord);margin-bottom:10px;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t)}
.chap[open]{border-color:color-mix(in srgb,var(--teinte) 45%,var(--bord));box-shadow:var(--om-2)}
.chap summary{list-style:none;display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer}
.chap summary::-webkit-details-marker{display:none}
.chap .c-num{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-family:var(--mono);
  font-weight:600;font-size:.9rem;background:var(--brume);color:var(--encre-2);transition:background-color var(--t),color var(--t)}
.chap.fait .c-num{background:var(--ok-f);color:var(--ok-i)}
.chap[open] .c-num{background:var(--teinte-f);color:var(--teinte-i)}
.chap .c-t{min-width:0;flex:1}
.chap .c-t b{display:block;font-family:var(--disp);font-weight:700;font-size:1.02rem;line-height:1.3}
.chap .c-t small{color:var(--gris);font-size:.84rem}
.chap .c-pil{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chap .c-fl{color:var(--gris);transition:transform .3s ease;flex:none}
.chap[open] .c-fl{transform:rotate(180deg)}
.chap .c-espaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 16px 16px}
@media (max-width:640px){.chap .c-espaces{grid-template-columns:minmax(0,1fr)}.chap .c-pil .pilule:not(.p-ok):not(.p-action){display:none}}
.espace-lien{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--bord);
  text-decoration:none;color:var(--encre);background:var(--fond);transition:transform var(--t),border-color var(--t),background-color var(--t)}
.espace-lien:hover{transform:translateY(-2px);border-color:var(--teinte);background:var(--papier)}
.espace-lien svg{color:var(--teinte-i)}
.espace-lien b{font-family:var(--disp)}
.espace-lien small{color:var(--gris)}
.chap .c-obj{padding:0 16px 10px 70px;color:var(--encre-2);font-size:.93rem;margin:0}
@media (max-width:640px){.chap .c-obj{padding-left:16px}}

/* ── 6. LE CHAPITRE ────────────────────────────────────────────────── */
.ch-tete{padding-block:22px 0}
.ch-tete h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.7rem);margin:12px 0 10px;max-width:24ch}
.ch-tete .obj{color:var(--encre-2);max-width:70ch;margin:0 0 14px}
.ch-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--gris);font-size:.88rem;align-items:center}
.ch-meta span{display:inline-flex;align-items:center;gap:6px}

/* Les trois espaces du chapitre : un sélecteur segmenté. */
.espaces{position:sticky;top:var(--entete-h);z-index:30;margin-top:18px;padding-block:10px;
  background:color-mix(in srgb,var(--fond) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.espaces-in{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--brume);border:1px solid var(--bord);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.espaces-in a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;font-weight:600;font-size:.94rem;
  color:var(--encre-2);text-decoration:none;white-space:nowrap;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.espaces-in a:hover{color:var(--encre)}
.espaces-in a[aria-current="page"]{background:var(--papier);color:var(--encre);box-shadow:var(--om-1)}
.espaces-in a[aria-current="page"] svg{color:var(--teinte-i,var(--action-i))}
.espaces-in .nb{font-size:.76rem;color:var(--gris);font-family:var(--mono)}
.lecture-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:150;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--teinte,var(--action)),var(--marque))}

.ch-corps{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;margin-top:18px}
@media (max-width:1020px){.ch-corps{grid-template-columns:minmax(0,1fr)}.ch-somm{display:none}}
.ch-somm{position:sticky;top:calc(var(--entete-h) + 80px);max-height:calc(100vh - var(--entete-h) - 110px);overflow:auto;scrollbar-width:thin}
.ch-somm p{font-family:var(--disp);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0 0 8px}
.ch-somm ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--bord)}
.ch-somm a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--encre-2);
  text-decoration:none;font-size:.9rem;line-height:1.35;transition:color var(--t),border-color var(--t)}
.ch-somm a:hover{color:var(--encre)}
.ch-somm a.ici{color:var(--encre);font-weight:600;border-left-color:var(--teinte,var(--action))}
.ch-somm a span{font-family:var(--mono);color:var(--gris);margin-right:6px;font-size:.8rem}

.feuille{background:var(--papier);border:1px solid var(--bord);border-radius:24px;padding:clamp(18px,4vw,48px);box-shadow:var(--om-1);min-width:0}
.feuille + .feuille{margin-top:16px}

/* Le manuel garde ses encadrés ; on lui donne les polices et l'encre du site. */
.manuel{--f-titre:var(--disp);--f-texte:var(--corps);--f-sous:var(--disp);color:var(--encre);font-family:var(--corps);
  font-size:1.03rem;line-height:1.72;min-width:0;overflow-wrap:break-word}
.manuel h2.partie{scroll-margin-top:calc(var(--entete-h) + 90px)}
.manuel table:not(.sc table){display:block;max-width:100%;overflow-x:auto}
.manuel .sc{max-width:100%}
.manuel figure.schema{max-width:100%;min-width:0}
.manuel .sch-svg{max-width:100%;overflow-x:auto}

.fin-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:22px}
@media (max-width:640px){.fin-ch{grid-template-columns:minmax(0,1fr)}}
.voisin{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:18px;border:1px solid var(--bord);background:var(--papier);
  text-decoration:none;color:var(--encre);transition:transform var(--t),border-color var(--t)}
.voisin:hover{transform:translateY(-2px);border-color:var(--bord-fort)}
.voisin small{color:var(--gris)}
.voisin b{font-family:var(--disp);font-size:1rem}
.voisin.suiv{text-align:right}
.termine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border-radius:22px;
  background:linear-gradient(135deg,var(--ok-f),var(--papier));border:1px solid color-mix(in srgb,var(--ok) 25%,var(--bord));margin-top:22px}
.termine h3{font-size:1.15rem;margin:0 0 3px}
.termine p{margin:0;color:var(--encre-2);font-size:.94rem}

/* Le mur de l'abonnement : on montre ce qu'il y a derrière, flouté. */
.mur{position:relative;margin-top:8px}
.mur .apercu{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);pointer-events:none;user-select:none}
.mur-carte{position:relative;margin-top:-40px;padding:clamp(22px,4vw,34px);border-radius:24px;text-align:center;background:var(--papier);
  border:1px solid var(--bord);box-shadow:var(--om-3)}
.mur-carte .ic{width:56px;height:56px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:var(--action-f);color:var(--action-i)}
.mur-carte h2{font-size:1.45rem;margin-bottom:8px}
.mur-carte p{color:var(--encre-2);max-width:52ch;margin:0 auto 18px}
.mur-carte .prix{font-family:var(--disp);font-weight:800;font-size:1.05rem}
.mur-carte .prix s{color:var(--gris);font-weight:600;margin-left:6px}

/* ── 7. LES EXERCICES ──────────────────────────────────────────────── */
.exo{border-radius:22px;background:var(--papier);border:1px solid var(--bord);margin-bottom:14px;overflow:hidden;scroll-margin-top:calc(var(--entete-h) + 80px)}
.exo.fait{border-color:color-mix(in srgb,var(--ok) 35%,var(--bord))}
.exo-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 22px 0}
.exo-n{font-family:var(--mono);font-weight:600;font-size:.82rem;color:var(--teinte-i);background:var(--teinte-f);padding:4px 10px;border-radius:var(--r-p)}
.exo-tete h2{font-size:1.15rem;flex:1;min-width:200px;margin:0}
.niv{display:inline-flex;gap:3px;align-items:center}
.niv i{width:8px;height:8px;border-radius:50%;background:var(--brume-2)}
.niv i.on{background:var(--marque)}
.exo-corps{padding:6px 22px 4px}
.exo-pied{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 22px 18px;border-top:1px dashed var(--bord);margin-top:8px}
.corrige{border-top:1px solid var(--bord);background:color-mix(in srgb,var(--ok-f) 35%,var(--papier))}
.corrige summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 22px;font-weight:600;color:var(--ok-i)}
.corrige summary::-webkit-details-marker{display:none}
.corrige summary svg{transition:transform .3s ease}
.corrige[open] summary svg{transform:rotate(180deg)}
.corrige .c-in{padding:0 22px 18px}
.corrige[open] .c-in{animation:fb-deplie .35s ease}
@keyframes fb-deplie{from{opacity:0;transform:translateY(-6px)}}
.exo-fait-btn[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}

/* ── 8. LE QUIZ ────────────────────────────────────────────────────── */
.quiz-carte{border-radius:24px;background:var(--papier);border:1px solid var(--bord);padding:clamp(18px,3.5vw,32px);box-shadow:var(--om-1)}
.quiz-tete{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.quiz-tete .jauge{flex:1}
.quiz-tete .compteur{font-family:var(--mono);font-size:.86rem;color:var(--gris);white-space:nowrap}
.q{margin:0 0 26px}
.q legend{font-family:var(--disp);font-weight:700;font-size:1.12rem;line-height:1.35;margin-bottom:12px;padding:0}
.q fieldset{border:0;margin:0;padding:0;min-width:0}
.opt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:13px 15px;margin-bottom:8px;border-radius:14px;
  border:1.5px solid var(--bord);background:var(--papier);cursor:pointer;transition:border-color var(--t),background-color var(--t),transform var(--t)}
.opt:hover{border-color:var(--bord-fort);transform:translateX(2px)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .l{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:var(--mono);font-weight:600;
  font-size:.86rem;background:var(--brume);color:var(--encre-2);transition:background-color var(--t),color var(--t)}
.opt:has(input:checked){border-color:var(--action);background:var(--action-f)}
.opt:has(input:checked) .l{background:var(--action);color:#fff}
.opt:has(input:focus-visible){outline:3px solid var(--action);outline-offset:2px}
.opt.bonne{border-color:var(--ok);background:var(--ok-f)}
.opt.bonne .l{background:var(--ok);color:#fff}
.opt.fausse{border-color:var(--danger);background:var(--danger-f)}
.opt.fausse .l{background:var(--danger);color:#fff}
.opt.bonne{animation:fb-bonne .5s var(--ressort)}
.opt.fausse{animation:fb-fausse .4s ease}
@keyframes fb-bonne{40%{transform:scale(1.02)}}
@keyframes fb-fausse{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.expl{margin-top:10px;padding:12px 15px;border-radius:14px;background:var(--brume);color:var(--encre-2);font-size:.96rem}
.expl b{color:var(--encre)}
.js .quiz-pas .q{display:none}
.js .quiz-pas .q.actuelle{display:block;animation:fb-entree .35s cubic-bezier(.2,.7,.2,1)}
.quiz-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.resultat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:22px;border-radius:24px;
  background:linear-gradient(135deg,var(--teinte-f,var(--action-f)),var(--papier));border:1px solid var(--bord);margin-bottom:22px}
@media (max-width:560px){.resultat{grid-template-columns:minmax(0,1fr);text-align:center}.resultat .anneau-sc{margin:auto}}
.anneau-sc{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--sc,var(--ok)) calc(var(--p) * 1%),var(--brume-2) 0);transition:--p 1.2s ease}
.anneau-sc::before{content:"";grid-area:1/1;width:94px;height:94px;border-radius:50%;background:var(--papier)}
.anneau-sc b{grid-area:1/1;position:relative;font-family:var(--disp);font-size:1.6rem;letter-spacing:-.03em}
@property --p{syntax:"<number>";inherits:true;initial-value:0}

/* ── 9. LES FICHES ─────────────────────────────────────────────────── */
.fiche-carte{border-radius:24px;background:var(--papier);border:1px solid var(--bord);padding:clamp(18px,3.5vw,36px);margin-bottom:16px;scroll-margin-top:calc(var(--entete-h) + 20px)}
.fiche-carte .f-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.fiche-carte h2{font-size:1.35rem;margin:6px 0 4px}
.fiche-verrou{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;background:var(--brume);color:var(--encre-2)}
.bientot{position:relative;overflow:hidden;padding:22px;border-radius:22px;border:1px dashed var(--bord-fort);background:var(--papier)}
.bientot .pilule{position:absolute;right:16px;top:16px}

/* ── 10. LES PETITES FÊTES ─────────────────────────────────────────── */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:400}
.toast-fb{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:250;transform:translate(-50%,20px);opacity:0;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:var(--encre);color:var(--papier);
  box-shadow:var(--om-3);font-weight:600;transition:transform .35s var(--ressort),opacity .25s ease}
.toast-fb.voit{transform:translate(-50%,0);opacity:1}

/* ── 11. DIVERS ────────────────────────────────────────────────────── */
.titre-section{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.titre-section h2{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.2rem)}
.titre-section p{color:var(--encre-2);margin:6px 0 0;max-width:60ch}
.surligne{color:var(--action-i)}
.carte-prix{position:relative;border-radius:28px;padding:clamp(22px,4vw,36px);background:var(--papier);border:1px solid var(--bord);box-shadow:var(--om-3);overflow:hidden}
.carte-prix::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--action) 16%,transparent),transparent)}
.carte-prix .montant{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);letter-spacing:-.05em;line-height:1}
.carte-prix ul{list-style:none;padding:0;margin:18px 0}
.carte-prix li{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.carte-prix li svg{color:var(--ok);flex:none;margin-top:3px}
.diplo-bulle{display:flex;gap:14px;align-items:flex-start}
.diplo-bulle .b{position:relative;padding:12px 16px;border-radius:16px;background:var(--papier);border:1px solid var(--bord);box-shadow:var(--om-1)}
.diplo-bulle .b p:last-child{margin:0}
.pied{color:#C3C9DC}
:root[data-theme="sombre"] .pied{background:#080B16}
.pied .marque{color:#fff}
.osu-titre{position:absolute;left:0;top:6px;z-index:2;pointer-events:none}
.osu-titre h1{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);margin:0}
.osu-titre p{margin:4px 0 0;color:var(--gris)}
@media (max-width:860px){.osu-titre{position:static;margin-bottom:10px}}

/* Le manuel prend les couleurs du site (clair et sombre), sans beige ni violet hérités */
body .manuel{--page:transparent;--carte:#FFFFFF;--bord:#E3E6ED;--filet:#E8EBF2;--encre:#131A35;--texte:#3A4262;--doux:#6C7390;
  --marine:#131A35;--sur-marine:#FFFFFF;--mandarine-t:#C24E14;--f-ui:var(--corps);--f-titre:var(--disp);--f-sous:var(--disp);--f-texte:var(--corps);background:transparent}
:root[data-theme="sombre"] body .manuel{--carte:#151A2E;--bord:#283050;--filet:#283050;--encre:#EEF1FA;--texte:#C9CFE4;--doux:#8F97B5;
  --marine:#2A3358;--sur-marine:#EEF1FA;--mandarine-t:#FF9A62;--blanc:#1B2138}
body .manuel{border:0;border-radius:0;padding:0;box-shadow:none;font:inherit;font-size:1.03rem;line-height:1.72}
.quiz-carte fieldset.q{border:0;padding:0;margin:0;min-width:0}
.quiz-carte fieldset.q>legend{padding:0;margin-bottom:16px;font-family:var(--disp);font-weight:700;font-size:1.2rem;line-height:1.35;color:var(--encre)}

/* ── le jeu ── */
.jeu-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:900px){.jeu-grille{grid-template-columns:1fr}}
.jeu-q{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.3;margin:4px 0 18px}
.jeu-opts .opt{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--papier);border:1px solid var(--bord)}
.jeu-opts .opt:hover .l{background:var(--teinte,var(--action));color:#fff}
.jeu-serie{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:600;padding:5px 12px;border-radius:999px;background:var(--brume);color:var(--encre)}
.jeu-serie.chaud{background:var(--marque);color:#fff;animation:fb-pulse 1.6s ease-in-out infinite}
.jeu-retour{border-radius:18px;padding:14px 18px;margin-bottom:14px;border:1px solid}
.jeu-retour.ok{background:var(--ok-f);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.jeu-retour.ko{background:var(--danger-f);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.jeu-retour b{font-family:var(--disp);font-size:1.05rem;margin-right:8px}
.jeu-retour p{margin:6px 0;color:var(--encre-2)}
.jeu-retour a{font-weight:600;font-size:.9rem}
.jeu-revoir{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jeu-revoir li{display:grid}.jeu-revoir small{color:var(--gris)}
@media (prefers-reduced-motion:reduce){.jeu-serie.chaud{animation:none}}

/* ── l'accueil, suite ── */
.vitrine .v-n{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--teinte-i);text-align:right;line-height:1}
.vitrine .v-n small{display:block;font-family:var(--corps);font-weight:500;font-size:.72rem;color:var(--gris)}
.vitrine .v-carte span{min-width:0}.vitrine .v-carte small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bts-carte .b-haut{display:flex;align-items:center;gap:10px}
.bts-carte .b-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--teinte-f);color:var(--teinte-i);transition:transform .3s var(--ressort)}
.bts-carte:hover .b-ic{transform:rotate(-8deg) scale(1.08)}
.accueil-espace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,60px);align-items:center;
  padding:clamp(22px,4vw,44px);border-radius:28px;background:linear-gradient(135deg,var(--cobalt-f),var(--papier) 60%);border:1px solid var(--bord)}
@media (max-width:860px){.accueil-espace{grid-template-columns:1fr}}
.accueil-espace p{color:var(--encre-2)}
.liste-ok{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.liste-ok li{display:flex;gap:10px;align-items:center}.liste-ok svg{color:var(--ok);flex:none}
.maquette{background:var(--papier);border:1px solid var(--bord);border-radius:22px;padding:18px;box-shadow:var(--om-3);display:grid;gap:14px;transform:rotate(1.2deg);transition:transform .5s var(--ressort)}
.maquette:hover{transform:rotate(0) translateY(-4px)}
.mq-tete{display:flex;gap:12px;align-items:center}.mq-tete b{display:block;font-family:var(--disp)}.mq-tete small{color:var(--gris)}
.mq-reprise{padding:14px;border-radius:16px;background:var(--orange-f);display:grid;gap:6px}
.mq-reprise small{color:var(--orange-i);font-weight:600}.mq-reprise b{font-family:var(--disp);font-size:.98rem}
.mq-mats{display:grid;gap:8px}.mq-mats div{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px;font-size:.86rem;color:var(--encre-2)}
.mq-badges{display:flex;flex-wrap:wrap;gap:6px}
.mq-badges span{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--brume);color:var(--encre-2)}
.accueil-offre{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){.accueil-offre{grid-template-columns:1fr}}
.faq-court details{border-bottom:1px solid var(--bord);padding:14px 0}
.faq-court summary{cursor:pointer;font-family:var(--disp);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-court summary::-webkit-details-marker{display:none}
.faq-court summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--gris);transition:transform .25s}
.faq-court details[open] summary::after{transform:rotate(45deg)}
.faq-court details p{margin:10px 0 0;color:var(--encre-2);animation:fb-deplie .3s ease}
.appel-final{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:clamp(22px,4vw,40px);border-radius:28px;
  background:var(--encre);color:#fff}
.appel-final h2{color:#fff;margin:0 0 6px}.appel-final p{margin:0;color:rgba(255,255,255,.78)}
.appel-final>div{flex:1;min-width:220px}
:root[data-theme="sombre"] .appel-final{background:var(--papier);border:1px solid var(--bord)}
.vitrine .v-carte,.mat-carte,.puce,.reprise,.espace-lien{text-decoration:none;color:inherit}
.vitrine .v-n{flex:none}

/* ── les badges ── */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding:16px 12px 14px;border-radius:18px;
  background:var(--papier);border:1px dashed var(--bord-fort,var(--bord));color:var(--gris)}
.badge .bd-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--brume);color:var(--gris);margin-bottom:4px}
.badge b{font-family:var(--disp);font-size:.92rem;color:var(--encre-2)}
.badge small{font-size:.78rem}
.badge .bd-jauge{width:70%;height:4px;border-radius:4px;background:var(--brume);overflow:hidden;margin-top:4px}
.badge .bd-jauge i{display:block;height:100%;background:var(--action)}
.badge.obtenu{border-style:solid;border-color:color-mix(in srgb,var(--marque) 35%,var(--bord));
  background:linear-gradient(180deg,var(--marque-f),var(--papier) 70%);color:var(--encre)}
.badge.obtenu .bd-ic{background:var(--marque);color:#fff;box-shadow:0 8px 18px -8px var(--marque)}
.badge.obtenu.vu .bd-ic{animation:fb-pulse 1.2s var(--ressort) 1}
.bord-autre select{padding:8px 12px;border-radius:12px;border:1px solid var(--bord);background:var(--papier);color:var(--encre);font:inherit;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.badge.obtenu.vu .bd-ic{animation:none}}

/* ── planning : séances ── */
.pl-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.pl-j.fait{border-color:color-mix(in srgb,var(--ok) 40%,var(--bord));background:linear-gradient(180deg,var(--ok-f),var(--papier) 55%)}
.pl-j.fait .pl-b{opacity:.7}
.pl-j.decale{border-style:dashed;background:transparent}
.pl-ok{display:inline-flex;gap:5px;align-items:center;color:var(--ok-i,var(--ok));font-weight:600;font-size:.86rem}
.pl-dec{margin:6px 0 0;color:var(--gris);font-size:.88rem}
.note-jour{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px;border-radius:20px;background:var(--papier);border:1px solid var(--bord)}
.note-jour p{flex:1;min-width:220px;margin:0;color:var(--encre-2)}
.note-jour a{font-weight:600;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.vitrine{overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
@media (max-width:920px){.vitrine{height:300px;margin-top:8px}.vitrine .v-carte{left:2%;right:2%}}

/* ═══ COULEUR DE FOND ═══════════════════════════════════════════════
   Des halos pastel fixes derrière tout le site, et une trame de points
   très légère. Sur les pages d'un BTS, les halos prennent sa teinte. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48vw 48vw at 4% 0%,color-mix(in srgb,var(--h1,var(--marque)) 17%,transparent),transparent 68%),
    radial-gradient(44vw 44vw at 100% 8%,color-mix(in srgb,var(--h2,var(--lilas)) 19%,transparent),transparent 68%),
    radial-gradient(42vw 42vw at 0% 100%,color-mix(in srgb,var(--h3,var(--menthe)) 13%,transparent),transparent 70%),
    radial-gradient(46vw 46vw at 96% 96%,color-mix(in srgb,var(--h4,var(--rose)) 13%,transparent),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:radial-gradient(color-mix(in srgb,var(--encre) 9%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%)}
body[data-teinte]{--h1:var(--page);--h2:var(--page);--h3:var(--lilas);--h4:var(--page)}
:root[data-theme="sombre"] body::before{opacity:.85}
:root[data-theme="sombre"] body::after{opacity:.35}
@media print{body::before,body::after{display:none}}

/* Des bandes teintées pleine largeur, pour rythmer l'accueil. */
.ruban{position:relative;padding-block:clamp(44px,6vw,80px)}
.ruban::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cobalt) 7%,var(--fond)) 18%,color-mix(in srgb,var(--lilas) 9%,var(--fond)) 82%,transparent);
  border-block:1px solid color-mix(in srgb,var(--cobalt) 8%,transparent)}
.ruban-2::before{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--marque) 8%,var(--fond)) 18%,color-mix(in srgb,var(--jaune) 9%,var(--fond)) 82%,transparent);
  border-color:color-mix(in srgb,var(--marque) 9%,transparent)}

/* ═══ LA SCÈNE DE L'ACCUEIL : le sélecteur tout en haut ══════════════ */
@property --sel-c{syntax:"<color>";inherits:true;initial-value:#2F4BDE}
.scene{position:relative;padding-top:clamp(22px,3.4vw,46px);isolation:isolate}
.scene-tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,4vw,56px);align-items:end}
.scene h1{font-size:clamp(2.1rem,1.3rem + 3.2vw,3.7rem);line-height:1.02;margin:14px 0 0;letter-spacing:-.04em}
.scene h1 .souligne{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--marque) 30%,transparent) 62%);padding-inline:.06em}
.scene .chapo{font-size:clamp(1rem,.95rem + .3vw,1.12rem);color:var(--encre-2);margin:0}
.scene .gages{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;color:var(--gris);font-size:.9rem}
.scene .gages>span{display:inline-flex;align-items:center;gap:6px}
.scene .gages svg{color:var(--ok)}
.scene-invite{display:flex;justify-content:center;margin-top:clamp(20px,3vw,34px)}
.invite-pastille{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--encre-2);background:color-mix(in srgb,var(--papier) 80%,transparent);border:1px solid var(--bord);
  box-shadow:0 8px 24px -16px color-mix(in srgb,var(--sel-c) 80%,transparent);backdrop-filter:blur(8px)}
.souris{width:18px;height:27px;border-radius:10px;border:2px solid var(--sel-c);display:grid;justify-items:center;padding-top:4px;transition:border-color .5s}
.souris i{width:3px;height:6px;border-radius:2px;background:var(--sel-c);animation:fb-molette 1.6s ease-in-out infinite}
@keyframes fb-molette{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* Le sélecteur dans la scène : hauteur fixe, fond pleine largeur qui
   prend la couleur du BTS choisi, lumière qui suit la souris. */
.osu{transition:--sel-c .6s ease}
.osu-accueil{min-height:0;padding-block:8px 30px}
.osu-accueil::before{position:absolute;inset:-150px calc(50% - 50vw) -40px;z-index:-1;transition:none;
  background:
    radial-gradient(520px 520px at var(--mx,30%) var(--my,50%),color-mix(in srgb,var(--sel-c) 16%,transparent),transparent 70%),
    radial-gradient(50vw 40vw at 22% 55%,color-mix(in srgb,var(--sel-c) 15%,transparent),transparent 70%),
    radial-gradient(36vw 30vw at 85% 30%,color-mix(in srgb,var(--sel-c) 11%,transparent),transparent 70%);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.osu-accueil .osu-liste{height:clamp(440px,64vh,600px);min-height:0;overscroll-behavior:auto}
.osu-accueil .osu-liste ol{padding:calc(clamp(440px,64vh,600px) / 2 - 52px) 0}
.osu-accueil .osu-detail{position:relative;top:0;align-self:center;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--sel-c) 55%,transparent),var(--om-3);
  border-color:color-mix(in srgb,var(--sel-c) 30%,var(--bord));transition:border-color .5s,box-shadow .5s}
.osu-accueil .osu-carte[aria-current="true"]{box-shadow:0 18px 40px -22px color-mix(in srgb,var(--sel-c) 75%,transparent),var(--om-2)}

/* Le grand sigle en filigrane, contour de la couleur du BTS. */
.osu-filigrane{position:absolute;inset:0;z-index:-1;pointer-events:none;display:flex;align-items:center;justify-content:flex-start}
.osu-filigrane span{--n:3;font-family:var(--disp);font-weight:900;letter-spacing:-.06em;line-height:.8;white-space:nowrap;
  font-size:min(calc(80vw / var(--n)),250px);color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--sel-c) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sel-c) 12%,transparent),transparent 80%);-webkit-background-clip:text;background-clip:text;
  transform:translateX(-6%) rotate(-6deg);opacity:.9}
.osu-filigrane span.entre{animation:fb-fili .6s cubic-bezier(.2,.8,.2,1)}
@keyframes fb-fili{from{opacity:0;transform:translateX(-14%) rotate(-6deg) scale(.96)}}
.osu:not(.osu-accueil) .osu-filigrane{position:fixed;inset:auto 0 0 auto;width:100vw;height:100vh;padding:0 3vw 4vh 0;align-items:flex-end}

/* Les matières qui arrivent l'une après l'autre. */
.d-mats li{animation:fb-mat .4s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms + 80ms)}
@keyframes fb-mat{from{opacity:0;transform:translateY(6px) scale(.96)}}

@media (max-width:860px){
  .scene-tete{grid-template-columns:minmax(0,1fr);gap:12px}
  .osu-accueil .osu-liste{height:auto}
  .osu-accueil .osu-liste ol{padding:8px calc(50% - 120px)}
  .osu-filigrane{align-items:flex-start;justify-content:center}
  .osu-filigrane span{font-size:min(calc(150vw / var(--n)),180px)}
}
@media (prefers-reduced-motion:reduce){
  .souris i,.osu-filigrane span.entre,.d-mats li{animation:none}
  .osu{transition:none}
}
/* Des cartes en verre dépoli : le grand sigle se devine au travers. */
.osu-accueil .osu-carte{background:color-mix(in srgb,var(--papier) 68%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.osu-accueil .osu-carte[aria-current="true"]{background:color-mix(in srgb,var(--papier) 88%,transparent)}