/* ═══════════════════════════════════════════════════════════
   LE POTIER — styles communs à l'inscription, la connexion
   et l'espace étudiant. Mêmes couleurs et mêmes typos que la
   page d'accueil.
   ═══════════════════════════════════════════════════════════ */
:root{
  --papier:#F7F6F1; --papier-2:#EFECE2; --papier-3:#E6E2D6;
  --encre:#141210; --encre-2:#1E1A17; --encre-3:#2A2521;
  --texte:#141210; --texte-doux:rgba(20,18,16,.66); --texte-faible:rgba(20,18,16,.42);
  --trait:rgba(20,18,16,.14);
  --clair:#F7F6F1; --clair-doux:rgba(247,246,241,.68); --clair-faible:rgba(247,246,241,.40);
  --trait-clair:rgba(247,246,241,.14);
  --rouge:#B3261E; --rouge-vif:#CE3327; --rouge-sombre:#7A1712;
  --vert:#12A46A; --vert-vif:#17C480;
  --display:'League Spartan',system-ui,sans-serif;
  --corps:'Cabin',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;background:var(--papier);color:var(--texte);
  font-family:var(--corps);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(27px,3.6vw,42px);line-height:1}
h2{font-size:clamp(21px,2.6vw,30px);line-height:1.05}
h3{font-size:clamp(16px,1.8vw,20px);line-height:1.1}
p{margin:0}
::selection{background:var(--rouge);color:var(--papier)}

.wrap{width:min(1180px,calc(100% - clamp(28px,4.4vw,44px)));margin:0 auto}

/* ---------- en-tête ---------- */
.tete{
  position:sticky;top:0;z-index:50;background:rgba(247,246,241,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--trait);
}
.tete-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.logo{
  display:inline-block;padding:6px 0;font-family:var(--display);font-weight:900;
  font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.logo em{font-style:normal;color:var(--rouge)}
.tete-droite{display:flex;align-items:center;gap:14px}
.tete-mail{font-size:13.5px;color:var(--texte-faible);max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le tableau de bord a trois boutons dans l'en-tête. À 360px ils ne
   tiennent pas sur une ligne : le menu débordait de 164px et poussait
   toute la page de côté. On le renvoie sur une deuxième ligne, en
   boutons de largeur égale — plus larges, donc plus faciles au doigt.
   --h-tete porte la hauteur de l'en-tête : la page de la communauté
   calcule sa propre hauteur à partir d'elle. */
:root{--h-tete:62px}
@media(max-width:620px){
  :root{--h-tete:112px}
  .tete-mail{display:none}
  .tete-in{flex-wrap:wrap;row-gap:10px;padding:11px 0 13px}
  .logo{font-size:17px}
  .tete-droite{width:100%;gap:8px}
  .tete-droite .btn-ligne{flex:1 1 0;min-width:0;padding:0 8px;font-size:11.5px;letter-spacing:.03em}
  .tete-droite .btn-ligne:only-child{flex:0 1 auto;padding:0 20px}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--display);font-size:14.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  color:var(--papier);background:var(--rouge);
  box-shadow:0 12px 30px rgba(122,23,18,.26);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,filter .22s;
}
.btn:hover{filter:brightness(1.09);transform:translateY(-2px);box-shadow:0 18px 40px rgba(122,23,18,.32)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.btn-plein{width:100%}
.btn-ligne{
  background:transparent;color:var(--texte);border:1.5px solid var(--trait);
  box-shadow:none;min-height:44px;padding:0 20px;font-size:12.5px;
}
.btn-ligne:hover{border-color:var(--rouge);color:var(--rouge);filter:none}
.lien-texte{
  display:inline-block;background:none;border:0;padding:11px 0;cursor:pointer;color:var(--rouge);
  font-size:15px;text-decoration:underline;text-underline-offset:3px;
}

/* ---------- formulaires ---------- */
.champ{margin-bottom:17px}
.champ label{
  display:block;margin-bottom:7px;font-family:var(--display);font-size:11.5px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);
}
.champ input{
  width:100%;min-height:54px;padding:0 16px;
  border:1.5px solid var(--trait);border-radius:2px;background:#fff;
  color:var(--texte);font-size:16.5px;transition:border-color .2s,box-shadow .2s;
}
.champ input:focus{outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.champ input::placeholder{color:rgba(20,18,16,.32)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.deux{grid-template-columns:1fr}}
.aide{margin-top:7px;font-size:13.5px;color:var(--texte-faible);line-height:1.5}

.alerte{
  margin-bottom:18px;padding:14px 16px;border-radius:2px;
  border-left:3px solid var(--rouge);background:rgba(179,38,30,.07);
  font-size:15.5px;line-height:1.5;color:var(--texte);
}
.alerte.ok{border-left-color:var(--vert);background:rgba(18,164,106,.09)}
.alerte[hidden]{display:none}

/* ---------- carte ---------- */
.carte{
  background:#fff;border:1px solid var(--trait);border-radius:2px;
  padding:clamp(26px,3.4vw,40px);
}

/* ---------- page inscription / connexion ---------- */
.duo{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  min-height:calc(100svh - 62px);
}
.duo-form{display:flex;align-items:center;padding:clamp(32px,5vw,70px) 0}
/* Cette règle vient APRÈS .wrap dans la feuille : elle en écrasait la
   largeur, et avec elle la marge latérale. Sur mobile le formulaire
   collait aux deux bords de l'écran. On reprend ici la gouttière
   exacte de .wrap pour que la page s'aligne sur toutes les autres. */
.duo-form-in{width:min(470px,calc(100% - clamp(28px,4.4vw,44px)));margin:0 auto}
.duo-visuel{position:relative;background:var(--encre);overflow:hidden}
.duo-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 26%}
.duo-visuel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.10),rgba(20,18,16,.80) 72%,rgba(20,18,16,.95));
}
.duo-texte{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3.6vw,46px);color:var(--clair)}
.duo-texte h2{color:var(--clair);max-width:15ch;margin-bottom:18px}
.duo-texte h2 span{color:#E2554A}
.duo-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait-clair)}
.duo-liste li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--trait-clair);
  font-size:15.5px;line-height:1.45;color:var(--clair-doux);
}
.duo-liste li b{color:var(--clair);font-weight:700}
.duo-liste svg{width:15px;height:15px;margin-top:5px;stroke:var(--vert-vif);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .duo{grid-template-columns:1fr;min-height:0}
  .duo-visuel{min-height:300px;order:-1}
  .duo-texte{padding:28px 22px 30px}
}

.sur-titre{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
  font-family:var(--display);font-size:11.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);
}
.sur-titre::before{content:"";width:28px;height:1.5px;background:var(--rouge);flex:0 0 28px}

.prix-ligne{
  display:flex;align-items:baseline;gap:9px;margin:4px 0 20px;flex-wrap:wrap;
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1;
}
/* Le montant ne doit jamais se casser en deux : « 50 » sur une ligne et
   « 000 » en dessous, c'est le premier chiffre que voit l'acheteur. */
.prix-ligne .n{font-size:38px;white-space:nowrap}
.prix-ligne .d{font-size:15px;color:var(--rouge)}
.prix-ligne .note{margin-left:auto;font-family:var(--corps);font-weight:400;font-size:13.5px;letter-spacing:0;color:var(--texte-faible)}
/* Sur un écran étroit la mention passe sous le montant, alignée à
   gauche, au lieu d'être compressée dans ce qui reste de place. */
@media(max-width:560px){.prix-ligne .note{margin-left:0;flex-basis:100%;margin-top:9px;font-size:14px}}

/* ---------- espace étudiant ---------- */
.bandeau{background:var(--encre);color:var(--clair);padding:clamp(28px,3.6vw,46px) 0}
.bandeau h1{color:var(--clair)}
.bandeau h1 span{color:var(--rouge-vif)}
.bandeau p{color:var(--clair-doux);margin-top:12px;max-width:52ch}

.jauge{margin-top:26px;max-width:460px}
.jauge-barre{height:6px;border-radius:99px;background:rgba(247,246,241,.16);overflow:hidden}
.jauge-barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rouge),var(--rouge-vif));transition:width .7s cubic-bezier(.2,.8,.3,1)}
.jauge-txt{
  margin-top:10px;font-family:var(--display);font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clair-faible);
}

.grille-espace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,3vw,44px);align-items:start;padding:clamp(30px,4vw,54px) 0 70px}
@media(max-width:940px){.grille-espace{grid-template-columns:1fr}}

.mod{border-bottom:1px solid var(--trait)}
.mods{border-top:1px solid var(--trait)}
.mod>summary{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:clamp(13px,2vw,24px);align-items:center;cursor:pointer;list-style:none;
  padding:clamp(15px,2vw,21px) clamp(8px,1.2vw,14px);
  transition:background .25s,padding-left .3s cubic-bezier(.2,.8,.3,1);
}
.mod>summary::-webkit-details-marker{display:none}
.mod>summary::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rouge);
  transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.mod>summary:hover{background:#fff;padding-left:clamp(16px,2.2vw,26px)}
.mod>summary:hover::before,.mod[open]>summary::before{transform:scaleY(1)}
.mod[open]{background:rgba(255,255,255,.62)}
.mod .n{
  font-family:var(--display);font-weight:900;line-height:.82;font-size:clamp(21px,2.6vw,32px);
  letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.3px rgba(179,38,30,.5);min-width:2.1ch;
}
.mod[open] .n,.mod>summary:hover .n{-webkit-text-stroke-color:var(--rouge)}
.mod h3{font-size:clamp(15.5px,1.7vw,19px);text-transform:none;font-weight:700;line-height:1.15}
.mod .meta{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-faible);
}
.mod .plus{position:relative;width:13px;height:13px;transition:transform .3s}
.mod .plus::before,.mod .plus::after{content:"";position:absolute;background:var(--rouge);border-radius:2px}
.mod .plus::before{left:0;top:5.5px;width:13px;height:2px}
.mod .plus::after{left:5.5px;top:0;width:2px;height:13px;transition:opacity .3s}
.mod[open] .plus{transform:rotate(180deg)}
.mod[open] .plus::after{opacity:0}
@media(max-width:700px){
  .mod>summary{grid-template-columns:auto minmax(0,1fr) auto;row-gap:4px;align-items:start;padding:14px 6px}
  .mod .n{grid-row:1/3;font-size:20px;padding-top:2px}
  .mod h3,.mod .meta{grid-column:2}
  .mod .plus{grid-column:3;grid-row:1;margin-top:4px}
}

.lecons{margin:0;padding:0 clamp(8px,1.2vw,14px) 14px;list-style:none}
.lecon{border-top:1px solid var(--trait);padding:12px 0 12px clamp(34px,4.6vw,62px)}
.lecon-tete{display:flex;align-items:center;gap:14px}
.lecon-tete .t{flex:1;font-size:15.5px;line-height:1.35}
.lecon-tete .d{
  font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-faible);white-space:nowrap;
}
.coche{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;
  width:26px;height:26px;border:1.5px solid var(--trait);border-radius:50%;
  background:#fff;cursor:pointer;transition:background .2s,border-color .2s;
}
.coche::after{content:"";position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px}
.coche svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.coche.on{background:var(--vert);border-color:var(--vert)}
.coche.on svg{opacity:1}
.video{margin-top:12px;position:relative;aspect-ratio:16/9;background:var(--encre-2);border-radius:2px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .bientot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;color:var(--clair-faible);
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.ouvrir{
  margin-top:4px;display:inline-flex;align-items:center;min-height:42px;
  background:none;border:0;padding:9px 0;cursor:pointer;color:var(--rouge);
  font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

.flanc{display:grid;gap:18px;position:sticky;top:84px}
@media(max-width:940px){.flanc{position:static}}
.bloc{border:1px solid var(--trait);border-radius:2px;background:#fff;padding:22px}
.bloc h4{font-size:11.5px;letter-spacing:.18em;color:var(--rouge);margin-bottom:12px}
.bloc p{font-size:15.5px;line-height:1.55;color:var(--texte-doux)}
.bloc .btn{margin-top:14px;min-height:46px;font-size:12.5px;width:100%}

.attente{max-width:620px;margin:0 auto;padding:clamp(40px,6vw,80px) 0;text-align:center}
.attente h1{margin-bottom:18px}
.attente p{color:var(--texte-doux);margin-bottom:26px}

.pied{border-top:1px solid var(--trait);padding:26px 0;font-size:13.5px;color:var(--texte-faible)}
.pied-in{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

.chargement{padding:80px 0;text-align:center;color:var(--texte-faible);font-size:15px}
.chargement i{
  display:block;width:26px;height:26px;margin:0 auto 16px;border-radius:50%;
  border:2px solid var(--trait);border-top-color:var(--rouge);animation:tourne .8s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- pages de texte (légal) ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(34px,5vw,64px) 0 80px}
.doc h1{margin-bottom:10px}
.doc .maj{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible);margin-bottom:34px}
.doc h2{margin:38px 0 14px;font-size:clamp(18px,2.1vw,23px)}
.doc p{margin-bottom:15px;color:var(--texte-doux);line-height:1.72}
.doc ul{margin:0 0 18px;padding-left:20px;color:var(--texte-doux)}
.doc li{margin-bottom:9px;line-height:1.65}
.doc b,.doc strong{color:var(--texte)}
.doc a{color:var(--rouge)}
.doc table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:11px 14px;border:1px solid var(--trait);vertical-align:top}
.doc th{background:var(--papier-2);font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.acompleter{
  display:inline-block;padding:2px 8px;border-radius:2px;
  background:rgba(179,38,30,.10);color:var(--rouge);
  font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.04em;
}
.pied-liens{display:flex;flex-wrap:wrap;gap:16px}
.pied-liens a{display:inline-block;padding:7px 0;color:var(--texte-faible);text-decoration:none}
.pied-liens a:hover{color:var(--rouge)}

/* ---------- avatar ---------- */
.ava{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:var(--encre-2);color:var(--clair);
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;
  text-transform:uppercase;user-select:none;
}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.grand{width:104px;height:104px;font-size:34px}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;height:calc(100svh - var(--h-tete))}
.chat-tete{padding:18px 0 16px;border-bottom:1px solid var(--trait)}
.chat-tete h1{font-size:clamp(21px,2.6vw,29px)}
.chat-tete p{margin-top:6px;font-size:14.5px;color:var(--texte-faible)}
.chat-flux{flex:1;overflow-y:auto;padding:22px 0 10px;display:flex;flex-direction:column;gap:18px}
.msg{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.msg-corps{min-width:0}
.msg-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.msg-nom{font-family:var(--display);font-size:13.5px;font-weight:800;letter-spacing:.02em}
.msg-nom .ens{
  margin-left:7px;padding:1px 7px;border-radius:99px;background:rgba(179,38,30,.12);
  color:var(--rouge);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.msg-h{font-size:12.5px;color:var(--texte-faible)}
.msg-txt{font-size:16px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.msg-suppr{
  background:none;border:0;padding:0;cursor:pointer;color:var(--texte-faible);
  font-size:12.5px;text-decoration:underline;text-underline-offset:3px;opacity:0;transition:opacity .2s;
  padding:7px 0;min-height:34px;
}
.msg:hover .msg-suppr,.msg:focus-within .msg-suppr{opacity:1}
.msg-suppr:hover{color:var(--rouge)}
@media(hover:none){.msg-suppr{opacity:.7}}
.chat-jour{
  align-self:center;padding:4px 14px;border-radius:99px;background:var(--papier-3);
  font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texte-faible);
}
.chat-barre{
  position:sticky;bottom:0;background:var(--papier);
  border-top:1px solid var(--trait);padding:14px 0 18px;
}
.chat-ligne{display:flex;gap:10px;align-items:flex-end}
.chat-ligne textarea{
  flex:1;min-height:52px;max-height:160px;padding:14px 16px;resize:none;
  border:1.5px solid var(--trait);border-radius:2px;background:#fff;
  font-size:16.5px;line-height:1.45;font-family:var(--corps);
}
.chat-ligne textarea:focus{outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.chat-ligne .btn{min-height:52px;padding:0 22px;font-size:13px;white-space:nowrap}
.chat-regle{margin-top:9px;font-size:12.5px;color:var(--texte-faible);line-height:1.45}
.chat-vide{margin:auto;text-align:center;color:var(--texte-faible);font-size:15.5px;max-width:34ch;line-height:1.6}

/* ---------- mon compte ---------- */
.compte{max-width:620px;margin:0 auto;padding:clamp(30px,4vw,56px) 0 80px}
.compte section{margin-bottom:34px}
.compte h2{margin-bottom:6px}
.compte .sous{font-size:15px;color:var(--texte-faible);margin-bottom:20px;line-height:1.55}
.photo-ligne{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.photo-actions{display:flex;flex-direction:column;gap:9px}
.photo-actions .btn-ligne{justify-content:flex-start}

/* ══════════════════════════════════════════════════════════════════ */
/* Parcours verrouillé : états des leçons, des modules et des spots   */
/* ══════════════════════════════════════════════════════════════════ */

/* --- la pastille en tête de leçon : coche verte, cadenas, ou rien --- */
.puce{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;
  width:26px;height:26px;border:1.5px solid var(--trait);border-radius:50%;
  background:#fff;
}
.puce svg{width:13px;height:13px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lec-fait .puce{background:var(--vert);border-color:var(--vert)}
.lec-fait .puce svg{stroke:#fff;stroke-width:3}
.lec-verrouille .puce svg{stroke:var(--texte-faible);width:12px;height:12px}
.lec-courant .puce{border-color:var(--rouge);border-width:2px;box-shadow:0 0 0 3px rgba(179,38,30,.12)}

/* --- la leçon du jour ressort, les suivantes s'effacent ---
   Pas de marge négative ici : à 390 px elle sortait de l'écran. */
.lec-courant{background:#fff;box-shadow:inset 3px 0 0 var(--rouge)}
.lec-verrouille .lecon-tete .t,
.lec-verrouille .lecon-tete .d{color:var(--texte-faible)}
.note-verrou{
  margin:9px 0 2px;font-size:13.5px;line-height:1.45;color:var(--texte-faible);
}
.note-erreur{
  margin:9px 0 2px;font-size:13.5px;line-height:1.45;color:var(--rouge);
}

/* --- le bouton qui valide l'étape ---
   Vert assombri : sur le vert de la charte, du blanc en 12 px passait
   sous le seuil de lisibilité. Même teinte, assez foncée pour être lue. */
:root{--vert-bouton:#0B7A4E}
/* le bouton de lecture prend sa propre ligne, sinon les deux se touchent */
.lec-courant>.ouvrir{display:flex;justify-content:flex-start}
.fini{
  margin-top:11px;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;cursor:pointer;
  border:0;border-radius:2px;background:var(--vert-bouton);color:#fff;
  font-family:var(--display);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  transition:filter .2s,opacity .2s;
}
.fini:hover{filter:brightness(1.08)}
.fini:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.fini[disabled]{opacity:.55;cursor:default}
@media(max-width:560px){.fini{width:100%}}

/* --- l'étiquette d'état du module --- */
.etiq{
  font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:2px;
}
.etiq-fait{color:#fff;background:var(--vert)}
.etiq-courant{color:#fff;background:var(--rouge)}
.etiq-verrouille{color:var(--texte-faible);background:var(--papier-3)}
.etiq-avenir{color:var(--texte-faible);background:var(--papier-3)}

.mod-verrouille>summary .n,.mod-avenir>summary .n{-webkit-text-stroke-color:rgba(20,18,16,.22)}
.mod-verrouille>summary h3,.mod-avenir>summary h3{color:var(--texte-faible)}

@media(max-width:700px){
  .mod>summary{grid-template-columns:auto minmax(0,1fr) auto}
  .mod .etiq{grid-column:3;grid-row:2;justify-self:end;align-self:start}
}

/* --- la carte d'un spot, entre deux modules --- */
.spot{
  border-bottom:1px solid var(--trait);
  padding:clamp(15px,2vw,20px) clamp(8px,1.2vw,14px);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
}
.spot-et{
  font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;
}
.spot .video{flex-basis:100%;margin-top:4px}
.spot-courant{background:var(--encre);box-shadow:inset 3px 0 0 var(--rouge)}
.spot-courant .spot-et{color:var(--rouge-vif)}
.spot-courant .ouvrir{color:var(--clair);margin-top:0}
.spot-courant .fini{margin-top:0}
.spot-fait .spot-et,.spot-verrouille .spot-et{color:var(--texte-faible)}
.spot-fait .ouvrir{margin-top:0}
@media(max-width:560px){
  .spot{gap:4px 14px}
  .spot-courant .ouvrir{flex-basis:100%}
}

/* ══════════════════════════════════════════════════════════════════ */
/* Lecteur maison : plus rien de YouTube n'est cliquable              */
/* ══════════════════════════════════════════════════════════════════ */
.lecteur{margin-top:12px}
.lecteur .video{margin-top:0}
/* le cœur du dispositif : l'image reste, les clics ne passent plus */
.lecteur .video iframe{pointer-events:none}
.lecteur .cadre{position:absolute;inset:0;width:100%;height:100%}

.barre-lecture{
  display:flex;align-items:center;gap:13px;
  background:var(--encre);padding:9px 11px;
}
.pp{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.26);background:none;
  transition:background .2s,border-color .2s;
}
.pp:hover{background:rgba(255,255,255,.1);border-color:var(--rouge-vif)}
.pp:focus-visible{outline:2px solid var(--rouge-vif);outline-offset:2px}
.pp svg{width:19px;height:19px;fill:var(--clair)}
.pp .i-play{display:block;margin-left:2px}
.pp .i-pause{display:none}
.lecteur.en-lecture .pp .i-play{display:none}
.lecteur.en-lecture .pp .i-pause{display:block}
.pp-txt{
  font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clair-faible);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- plein écran : notre bouton, jamais celui de YouTube --- */
/* Réactiver le leur ferait revenir leur barre, leur logo et leurs
   suggestions de fin. On agrandit donc nous-mêmes le cadre, et le
   verrouillage de l'iframe reste intact. */
.pe{
  flex:0 0 40px;width:40px;height:40px;margin-left:auto;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.26);background:none;
  transition:background .2s,border-color .2s;
}
.pe:hover{background:rgba(255,255,255,.1);border-color:var(--rouge-vif)}
.pe:focus-visible{outline:2px solid var(--rouge-vif);outline-offset:2px}
.pe svg{
  width:17px;height:17px;fill:none;stroke:var(--clair);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.pe .i-sortie{display:none}

/* Les trois états du plein écran s'écrivent séparément : un seul
   sélecteur inconnu suffirait à faire sauter toute la règle. */
.lecteur:fullscreen{display:flex;flex-direction:column;background:#000;margin:0}
.lecteur:fullscreen .video{flex:1 1 auto;aspect-ratio:auto;min-height:0;border-radius:0}
.lecteur:fullscreen .i-plein{display:none}
.lecteur:fullscreen .i-sortie{display:block}

.lecteur:-webkit-full-screen{display:flex;flex-direction:column;background:#000;margin:0}
.lecteur:-webkit-full-screen .video{flex:1 1 auto;aspect-ratio:auto;min-height:0;border-radius:0}
.lecteur:-webkit-full-screen .i-plein{display:none}
.lecteur:-webkit-full-screen .i-sortie{display:block}

/* Recours quand le navigateur refuse l'API — l'iPhone, surtout. */
.lecteur.plein-secours{
  position:fixed;inset:0;z-index:9000;margin:0;
  display:flex;flex-direction:column;background:#000;
}
.lecteur.plein-secours .video{flex:1 1 auto;aspect-ratio:auto;min-height:0;border-radius:0}
.lecteur.plein-secours .i-plein{display:none}
.lecteur.plein-secours .i-sortie{display:block}

/* ce qu'il reste avant le certificat, dans le flanc du dashboard */
.certif-manque{margin:12px 0 0;padding:0;list-style:none}
.certif-manque li{
  position:relative;padding:6px 0 6px 18px;font-size:14px;line-height:1.45;
  color:var(--texte-faible);
}
.certif-manque li::before{
  content:"";position:absolute;left:0;top:13px;width:7px;height:7px;
  border:1.4px solid var(--rouge);border-radius:50%;
}

/* ══════════════════════════════════════════════════════════════════ */
/* Les onglets du parcours et des audios                              */
/* ══════════════════════════════════════════════════════════════════ */
.onglets{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--trait)}
.onglet{
  position:relative;background:none;border:0;cursor:pointer;
  padding:11px 16px 13px;color:var(--texte-faible);
  font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .2s;
}
.onglet::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;
  background:var(--rouge);transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.onglet:hover{color:var(--texte)}
.onglet.actif{color:var(--encre)}
.onglet.actif::after{transform:scaleX(1)}
.onglet:focus-visible{outline:2px solid var(--vert);outline-offset:-3px}
@media(max-width:420px){.onglet{flex:1 1 0;padding:11px 6px 13px;font-size:11.5px;letter-spacing:.06em}}

.audio-intro{
  margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--texte-doux);
}
.audio-intro b{color:var(--texte);font-weight:700}

.puce-audio{border-color:var(--trait)}
.puce-audio svg{
  width:13px;height:13px;fill:none;stroke:var(--rouge);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.audio-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.telecharger{
  display:inline-flex;align-items:center;min-height:42px;padding:9px 0;
  font-family:var(--display);font-size:12.5px;font-weight:800;
  letter-spacing:.03em;color:var(--texte-faible);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.telecharger:hover{color:var(--encre);border-bottom-color:var(--encre)}
.lecteur-audio{display:block;width:100%;margin-top:11px}

/* le lien de téléchargement pendant l'enregistrement */
.telecharger.en-cours{
  color:var(--rouge);border-bottom-color:transparent;cursor:default;
  font-variant-numeric:tabular-nums;
}