/* Lingua — feuille de style unique */

:root{
  --bg:#0a0a0c;
  --surface:#15161a;
  --surface-2:#1d1f25;
  --surface-3:#282b33;
  --line:#2b2e36;
  --text:#f3f4f6;
  --dim:#8d919c;
  --dim-2:#5f636d;
  --accent:#ff6a1a;
  --accent-soft:rgba(255,106,26,.16);
  --accent-2:#ffb27a;
  --ok:#3ddc84;
  --bad:#ff5b4a;
  --radius:14px;
  --maxw:860px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",
      Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--ff);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent-soft)}
/* `hidden` doit gagner contre nos propres `display`. Sans ça un panneau en
   position:fixed display:flex reste étendu sur toute la page une fois caché :
   invisible, mais il intercepte tous les clics, et plus rien ne répond. */
[hidden]{display:none!important}

/* barres de défilement discrètes */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#2e313a;border-radius:8px;border:3px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- en-tête */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(10,10,12,.86);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:19px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent)}
.spacer{flex:1}

.iconbtn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--dim);transition:.15s;flex:none;
}
.iconbtn:hover{background:var(--surface-3);color:var(--text)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:11px;
  background:var(--surface-2);font-weight:600;font-size:14px;transition:.15s;
}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);color:#17120d}
.btn.primary:hover{background:#ff7d36}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* -------------------------------------------------------- bibliothèque */
.hero{padding:40px 0 22px}
.hero h1{margin:0 0 8px;font-size:32px;letter-spacing:-.03em;font-weight:760}
.hero p{margin:0;color:var(--dim);font-size:15px;line-height:1.55}

.searchbar{
  display:flex;align-items:center;gap:10px;margin-top:4px;padding:0 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:border-color .15s;
}
.searchbar:focus-within{border-color:rgba(255,106,26,.45)}
.searchbar svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--dim-2);
  stroke-width:2.2;stroke-linecap:round}
.searchbar input{
  flex:1;min-width:0;padding:12px 0;border:0;background:none;
  font-size:14.5px;outline:none;
}
.searchbar input::placeholder{color:var(--dim-2)}
.searchbar input::-webkit-search-cancel-button{filter:invert(.6)}

.chips{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 26px;
  position:sticky;top:62px;z-index:30;background:var(--bg)}
.chip{
  padding:8px 15px;border-radius:999px;background:var(--surface);color:var(--dim);
  font-size:13.5px;font-weight:600;border:1px solid transparent;transition:.15s;
}
.chip:hover{color:var(--text);background:var(--surface-2)}
.chip.on{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(255,106,26,.35)}
.chip .n{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px 18px;padding-bottom:70px}

.card{display:block;position:relative;transition:.18s}
.card:hover{transform:translateY(-3px)}
.card .thumb{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:.3s;opacity:.92}
.card:hover .thumb img{opacity:1;transform:scale(1.04)}
.card .dur{
  position:absolute;right:7px;bottom:7px;padding:2.5px 7px;border-radius:6px;
  background:rgba(0,0,0,.82);font-size:11.5px;font-weight:650;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.card .play{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.2s;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%);
}
.card:hover .play{opacity:1}
.card .play span{
  width:50px;height:50px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.card .play svg{width:20px;height:20px;fill:#17120d;margin-left:3px}
.card h3{margin:11px 0 5px;font-size:14.5px;font-weight:620;line-height:1.35;
  letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card .chan{margin:0 0 6px;color:var(--dim);font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{display:flex;align-items:center;gap:7px;color:var(--dim-2);font-size:12.5px}
.card .meta .tag{color:var(--accent-2);background:var(--accent-soft);
  padding:1.5px 7px;border-radius:5px;font-weight:620;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em}
.card .del{
  position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:8px;
  background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;opacity:0;
  transition:.15s;
}
.card:hover .del{opacity:1}
.card .del:hover{background:#c0392b}
.card .del svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}

.empty{padding:70px 20px;text-align:center;color:var(--dim)}
.empty h2{margin:0 0 10px;font-size:19px;color:var(--text);font-weight:650}
.empty p{margin:0 0 22px;font-size:14.5px;line-height:1.6}

/* ------------------------------------------------------------- fenêtre */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(5,5,7,.76);
  backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}}
.modal{
  width:min(520px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:26px;box-shadow:0 26px 70px rgba(0,0,0,.6);
  animation:pop .2s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}}
.modal h2{margin:0 0 6px;font-size:19px;font-weight:680;letter-spacing:-.02em}
.modal .sub{margin:0 0 20px;color:var(--dim);font-size:13.5px;line-height:1.55}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:650;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.field input,.field select{
  width:100%;padding:12px 14px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line);outline:none;font-size:14.5px;transition:.15s;
}
.field input:focus,.field select:focus{border-color:var(--accent);
  background:var(--surface-3)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238d919c'><path d='M6 9L1 3h10z'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

.progress{margin-top:18px}
.progress .bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--accent);
  border-radius:999px;transition:width .4s ease;width:0}
.progress .lbl{margin-top:9px;font-size:13px;color:var(--dim);display:flex;
  justify-content:space-between;gap:10px}
.progress.err .bar i{background:#e74c3c}
.progress.err .lbl{color:#ff8f81}

/* --------------------------------------------------------------- lecteur */
body.player{
  display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;
  /* La colonne doit être posée, pas déduite. Sans elle, elle vaut `auto` et se
     règle sur le contenu le plus large : le titre de la vidéo est en
     `nowrap`, et `min-width:0` autorise un élément flex à se réduire mais ne
     réduit pas ce qu'il réclame à la grille. Un titre de 884 px poussait donc
     tout le lecteur à 884 px — invisible sur un écran large, et toute la page
     de travers sur un téléphone. */
  grid-template-columns:minmax(0,1fr);
  height:100vh;height:100dvh;overflow:hidden;
}
body.player>script,body.player>link{display:none}

.p-top{
  display:flex;align-items:center;gap:12px;padding:10px 14px;flex:none;
  border-bottom:1px solid var(--line);
}
.p-top .title{flex:1;min-width:0;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
.p-top .count{font-size:13px;color:var(--dim-2);font-variant-numeric:tabular-nums;
  flex:none}

.p-video{flex:none;background:#000;position:relative;width:100%}
.p-video .ratio{position:relative;width:100%;margin:0 auto;aspect-ratio:16/9;
  max-width:min(100%,calc(44dvh * 16 / 9))}
.p-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.p-seek{height:3px;background:var(--surface-3);position:relative;cursor:pointer;flex:none}
.p-seek i{display:block;height:100%;background:var(--accent);width:0}
.p-seek:hover{height:6px;transition:height .12s}

/* flux de sous-titres */
.p-track{
  position:relative;min-height:0;overflow-y:auto;scroll-behavior:smooth;padding:40px 0 46vh;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 56px);
  mask-image:linear-gradient(to bottom,transparent,#000 56px);
}
.p-track .inner{max-width:760px;margin:0 auto;padding:0 22px}

.ln{
  padding:15px 16px;margin:3px -16px;border-radius:16px;cursor:pointer;
  opacity:.3;transition:opacity .25s,background .25s;
}
.ln:hover{opacity:.62;background:var(--surface)}
.ln.seen{opacity:.34}
.ln.on{opacity:1;background:var(--surface);box-shadow:0 2px 24px rgba(0,0,0,.35)}
.ln.on:hover{opacity:1}

.ln .en{font-size:25px;font-weight:650;letter-spacing:-.02em;line-height:1.62;
  margin:0}
.ln .wd{position:relative;display:inline-block;margin-right:.18em;
  white-space:nowrap;text-align:center;vertical-align:baseline}
.ln .wd .tx{
  position:relative;display:inline-block;padding:1px 4px;margin:0 -2px;
  border-radius:7px;transition:background .09s linear,color .09s linear;
}
.ln .wd.sung .tx{background:var(--accent);color:#17120d}
.ln .wd .gl{
  display:block;font-size:11.5px;font-weight:500;color:var(--dim-2);
  line-height:1.3;letter-spacing:0;margin-bottom:-2px;padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;max-width:13ch;white-space:nowrap;
}
.ln.on .wd .gl{color:var(--dim)}
.ln .fr{
  margin:9px 0 0;font-size:15.5px;color:var(--dim);line-height:1.5;font-weight:450;
}

body[data-gloss="0"] .ln .gl{display:none}
body[data-fr="0"] .ln .fr{display:none}
body[data-blind="1"] .ln:not(.on) .en{filter:blur(5px);user-select:none}

/* barre de contrôle */
.p-bar{
  position:relative;z-index:2;
  border-top:1px solid var(--line);background:#0c0c0f;padding:9px 14px 12px;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.ctl{
  min-width:48px;height:46px;padding:0 10px;border-radius:12px;display:grid;
  place-items:center;gap:2px;color:var(--dim);transition:.15s;
}
.ctl:hover{background:var(--surface-2);color:var(--text)}
.ctl.on{color:var(--accent)}
.ctl svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ctl .cap{font-size:9.5px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;line-height:1}
.ctl.big{width:58px;height:52px;background:var(--accent);color:#17120d;border-radius:15px}
.ctl.big:hover{background:#ff7d36;color:#17120d}
.ctl.big svg{width:25px;height:25px;fill:currentColor;stroke:none}
.ctl.rate{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* fenêtre d'un mot */
.wordpop{
  position:fixed;z-index:120;width:min(300px,calc(100vw - 28px));
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:pop .16s cubic-bezier(.2,.9,.3,1.3);
}
.wordpop .hd{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.wordpop .w{font-size:21px;font-weight:700;letter-spacing:-.02em}
.wordpop .fr{font-size:16px;color:var(--accent-2);font-weight:600;margin-bottom:11px}
.wordpop .sense{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:3px}
.wordpop .sense b{color:var(--dim-2);font-weight:600;font-style:italic;
  margin-right:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.wordpop .row{display:flex;gap:8px;margin-top:13px}
.wordpop .row .btn{flex:1;justify-content:center;padding:9px 12px;font-size:13px}
.wordpop .saved{color:var(--ok)}

/* ------------------------------------------------------------- vocabulaire */
.vocab{padding:28px 0 70px}
.vocab .row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;
  background:var(--surface);margin-bottom:8px;
}
.vocab .row .w{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;flex:none;
  width:200px;font-size:16.5px;font-weight:650}
.vocab .row .fr{color:var(--accent-2);font-size:15px;flex:1}
.vocab .row .ctx{color:var(--dim-2);font-size:12.5px;flex:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vocab .row a.ctx:hover{color:var(--accent-2)}
.vocab .row .x{color:var(--dim-2);font-size:20px;padding:0 6px;line-height:1}
.vocab .row .x:hover{color:#e74c3c}
.vtotal{color:var(--dim-2);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;flex:none}
/* D'où vient le mot. C'est l'onglet « vocabulaire à apprendre » qui ramasse tout
   le site : sans cette étiquette, trois chemins d'apprentissage se retrouvent
   mélangés dans une seule liste plate. */
.orig{padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;background:var(--surface-3);
  color:var(--dim)}
.o-video{background:var(--accent-soft);color:var(--accent-2)}
.o-entrainement{background:rgba(61,220,132,.14);color:#8df0b6}
.o-histoire{background:rgba(124,150,255,.16);color:#aec0ff}
.o-programme{background:rgba(255,186,73,.16);color:#ffd08a}

.toast{
  position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:200;
  background:var(--surface-3);padding:11px 18px;border-radius:12px;font-size:14px;
  font-weight:550;box-shadow:0 10px 34px rgba(0,0,0,.55);animation:pop .18s;
  border:1px solid var(--line);pointer-events:none;
}

@media (max-width:620px){
  .hero h1{font-size:25px}
  .ln .en{font-size:21px;line-height:1.7}
  .ln .fr{font-size:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px 12px}
  .p-video .ratio{max-width:100%}
  /* Neuf commandes à largeur posée font 418 px : sur un téléphone, les deux du
     bord sortaient de l'écran. On arrête de fixer des largeurs et on partage
     celle qu'il y a — une part et demie pour Lecture, qui doit rester le gros
     bouton. Ça tient à n'importe quelle largeur, au lieu de tomber juste à 390. */
  .p-bar{gap:2px;padding:9px 8px 12px}
  .ctl{flex:1;min-width:0;padding:0}
  .ctl.big{flex:1.5;width:auto}
}

/* ======================================================= page d'accueil */
/* Le site s'ouvre sur un choix, pas sur un menu : regarder, s'entraîner, lire. */
body.home{display:grid;place-items:center;padding:30px 0}
/* Plus large que le reste du site : trois cartes côte à côte dans 860 px
   écraseraient leur texte en colonnes de six mots. */
body.home .wrap{width:100%;max-width:1000px;text-align:center}
.homebrand{display:inline-flex;align-items:center;gap:11px;font-weight:700;
  font-size:20px;letter-spacing:-.02em;margin-bottom:46px}
.homebrand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px var(--accent)}
.hometitle{margin:0 0 10px;font-size:34px;letter-spacing:-.035em;font-weight:760}
.homesub{margin:0 auto 38px;max-width:430px;color:var(--dim);font-size:14.5px;
  line-height:1.6}

.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;text-align:left}
/* En nombre impair, la dernière carte prend toute la largeur au lieu de laisser
   un trou à côté d'elle. */
.pick .pickcard:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:760px){.pick{grid-template-columns:1fr}}

/* Le but, au-dessus des cartes : la cible, la barre, les jours. C'est la
   première chose qu'on voit en arrivant, parce que c'est la raison du site. */
.but{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:center;
  margin:0 auto 30px;max-width:var(--maxw);padding:18px 22px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.buttxt b{display:block;font-size:15.5px;font-weight:650;margin-bottom:4px}
.buttxt span{display:block;font-size:13px;line-height:1.6;color:var(--dim)}
.butbar{grid-column:1;height:7px;border-radius:999px;background:var(--surface-3)}
.butbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.butdays{grid-column:2;grid-row:1/3;text-align:right;flex:none;
  padding-left:20px;border-left:1px solid var(--line)}
.butdays b{display:block;font-size:27px;font-weight:700;line-height:1.05;
  color:var(--accent);font-variant-numeric:tabular-nums}
.butdays span{font-size:11.5px;color:var(--dim)}
@media (max-width:620px){
  .but{padding:16px}
  .butdays{padding-left:14px}
  .butdays b{font-size:22px}
}
.pickcard{
  display:flex;flex-direction:column;gap:11px;padding:26px 24px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  transition:.18s;
}
.pickcard:hover{transform:translateY(-3px);border-color:rgba(255,106,26,.4);
  background:var(--surface-2)}
.picon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-soft);margin-bottom:4px}
.picon svg{width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.picon.watch svg path:first-child{fill:var(--accent);stroke:none}
.pickcard b{font-size:20px;font-weight:700;letter-spacing:-.025em}
.pdesc{color:var(--dim);font-size:13.5px;line-height:1.6;flex:1}
.pstat{color:var(--dim-2);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;min-height:1em}

.homevocab{display:inline-flex;align-items:center;gap:8px;margin-top:34px;
  color:var(--dim);font-size:13.5px;font-weight:600;transition:.15s}
.homevocab:hover{color:var(--text)}
.homevocab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.homevocab .n{opacity:.6;font-variant-numeric:tabular-nums}

/* ============================================= bascule entre les deux modes */
/* Posée par common.js dans l'en-tête de toutes les pages : on doit pouvoir
   changer de mode au milieu de n'importe quoi. */
.modeswitch{display:flex;gap:3px;padding:3px;background:var(--surface-2);
  border-radius:12px;flex:none}
.modeswitch .seg{display:flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:9px;color:var(--dim);font-size:13.5px;font-weight:620;
  transition:.15s;white-space:nowrap}
.modeswitch .seg:hover{color:var(--text)}
.modeswitch .seg.on{background:var(--surface-3);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.modeswitch .seg.on .ic svg{stroke:var(--accent)}
.modeswitch .ic{display:grid;place-items:center}
.modeswitch .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.modeswitch.compact{margin-left:4px}
.modeswitch.compact .seg{padding:7px 9px}

/* ===================================================== le chemin des unités */
.stats{display:flex;gap:7px;flex:none}
.stat{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border-radius:10px;background:var(--surface-2);font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.stat svg{width:15px;height:15px;fill:var(--accent);stroke:none}
.stat b{font-weight:700}

.revrow{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:30px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.revtxt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.revtxt b{font-size:15px;font-weight:680}
.revtxt span{color:var(--dim);font-size:13px}

.levelsep{display:flex;align-items:center;gap:14px;margin:34px 0 24px;
  color:var(--dim-2);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em}
.levelsep::before,.levelsep::after{content:"";height:1px;background:var(--line);flex:1}
.levelsep:first-child{margin-top:6px}

.unit{margin-bottom:34px}
/* Le bandeau d'unité : il tient toute la largeur, comme sur Duolingo, sinon le
   titre flotte seul à gauche d'un chemin centré et l'unité ne se lit plus
   comme un bloc. */
.uhead{display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.uhead b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.uprev{display:block;margin-top:2px;color:var(--dim);font-size:13px}
.ucount{margin-left:auto;padding:5px 11px;border-radius:999px;
  background:var(--surface-2);color:var(--dim);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;flex:none}
.ucount.full{background:rgba(61,220,132,.16);color:var(--ok)}

.bubbles{display:flex;flex-direction:column;align-items:center;gap:13px;padding:14px 0}
.bub{position:relative;width:64px;height:60px;border-radius:50%;flex:none;
  display:grid;place-items:center;transition:.14s}
.bub .bface{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  transition:.14s}
.bub svg{width:26px;height:26px;fill:none;stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round}
.bub.done .bface{background:var(--ok);box-shadow:0 5px 0 #26a862}
.bub.done svg{stroke:#0c2b1a}
.bub.open .bface{background:var(--accent);box-shadow:0 5px 0 #c04a0c}
.bub.open svg{stroke:#2a1708;fill:#2a1708;stroke-width:1}
.bub.locked .bface{background:var(--surface-2);box-shadow:0 5px 0 #14151a}
.bub.locked svg{stroke:var(--dim-2)}
.bub:not(.locked):hover .bface{filter:brightness(1.08)}
.bub:not(.locked):active .bface{box-shadow:0 1px 0 rgba(0,0,0,.3);transform:translateY(4px)}
.bub.ici::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2.5px solid var(--accent);opacity:.55;animation:ping 1.7s ease-out infinite}
@keyframes ping{0%{transform:scale(.92);opacity:.6}70%{transform:scale(1.14);opacity:0}
  100%{opacity:0}}
.ibadge{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  padding:2px 9px;border-radius:7px;background:var(--accent);color:#2a1708;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}

/* ========================================================== l'étape en cours */
body.inquiz{overflow:hidden}
.quiz{position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;animation:fade .16s ease}

.qtop{display:flex;align-items:center;gap:14px;max-width:var(--maxw);width:100%;
  margin:0 auto;padding:16px 20px 10px;flex:none}
.qbar{flex:1;height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.qbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.qcount{color:var(--dim);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;flex:none}

.qscroll{flex:1;overflow-y:auto;display:flex}
.qmain{max-width:var(--maxw);width:100%;margin:0 auto;padding:26px 20px 40px;
  display:flex;flex-direction:column;gap:22px}
.qkind{color:var(--dim);font-size:14px;font-weight:650}
.qbody{display:flex;flex-direction:column;gap:18px}
.qbody.locked{pointer-events:none}

.prompt{padding:12px 0 4px}
.bigen{font-size:38px;font-weight:720;letter-spacing:-.03em}
.bigfr{font-size:30px;font-weight:700;letter-spacing:-.025em;color:var(--accent-2)}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opts.row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.opt{display:flex;align-items:center;gap:11px;padding:15px 16px;text-align:left;
  background:var(--surface);border:1.5px solid var(--line);border-bottom-width:3.5px;
  border-radius:13px;font-size:15.5px;font-weight:600;transition:.12s}
.opt:hover{background:var(--surface-2)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.opt.isgood{border-color:var(--ok);background:rgba(61,220,132,.14);color:#8df0b6}
.opt.isbad{border-color:var(--bad);background:rgba(255,91,74,.13);color:#ffa79c}
.opt kbd{width:22px;height:22px;border-radius:6px;background:var(--surface-3);
  color:var(--dim);font:inherit;font-size:11.5px;font-weight:700;display:grid;
  place-items:center;flex:none}
.opt.sel kbd,.opt.isgood kbd,.opt.isbad kbd{background:rgba(0,0,0,.28);color:inherit}

/* relier */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pcol{display:flex;flex-direction:column;gap:11px}
.ptile{padding:15px 14px;background:var(--surface);border:1.5px solid var(--line);
  border-bottom-width:3.5px;border-radius:13px;font-size:15.5px;font-weight:620;
  transition:.12s}
.ptile.fr{color:var(--accent-2)}
.ptile:hover{background:var(--surface-2)}
.ptile.sel{border-color:var(--accent);background:var(--accent-soft)}
.ptile.matched{opacity:.3;border-color:var(--ok);pointer-events:none}
.ptile.bad{border-color:var(--bad);background:rgba(255,91,74,.13);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* compléter */
.sent{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;
  font-size:25px;font-weight:620;letter-spacing:-.01em;line-height:1.5}
.slot{min-width:110px;padding:1px 10px;border-radius:9px;font:inherit;
  background:var(--accent-soft);border-bottom:2.5px dashed var(--accent);
  color:var(--accent-2)}
.slot.filled{border-bottom-style:solid}
/* Ponctuation sortie du trou : elle annule l'écart de la rangée pour se
   recoller au mot qui la précède, comme dans « so ___?" ». */
.sent .sw.glue{margin-left:-9px}
.trad{color:var(--dim);font-size:15px;line-height:1.6}
.trad.big{font-size:23px;font-weight:620;color:var(--text);letter-spacing:-.02em;
  line-height:1.45}
.srcline{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:6px 11px;border-radius:9px;background:var(--surface);color:var(--dim-2);
  font-size:12.5px;font-weight:600;max-width:100%;transition:.15s}
.srcline:hover{background:var(--surface-2);color:var(--accent-2)}
.srcline span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcline .ic{display:grid;place-items:center;flex:none}
.srcline svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}

/* remettre dans l'ordre */
.buildline{display:flex;flex-wrap:wrap;gap:9px;min-height:62px;padding:11px 4px;
  border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
  align-content:flex-start}
.buildline.isbad{border-color:var(--bad)}
.bank{display:flex;flex-wrap:wrap;gap:9px;padding-top:4px}
.tile{padding:11px 15px;background:var(--surface);border:1.5px solid var(--line);
  border-bottom-width:3.5px;border-radius:11px;font-size:17px;font-weight:620;
  transition:.12s}
.tile:hover{background:var(--surface-2)}
.tile.used{opacity:.22;background:var(--surface-2);border-color:transparent;
  pointer-events:none}

/* écrire */
.typebox{width:100%;padding:16px 18px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:14px;font-size:22px;font-weight:620;
  outline:none;transition:border-color .15s}
.typebox:focus{border-color:rgba(255,106,26,.5)}
.typebox::placeholder{color:var(--dim-2);font-weight:500;letter-spacing:.14em}
.typebox.isgood{border-color:var(--ok);background:rgba(61,220,132,.14);color:#8df0b6}
.typebox.isbad{border-color:var(--bad);background:rgba(255,91,74,.13);color:#ffa79c}

/* la barre de correction */
.qfoot{flex:none;border-top:1px solid var(--line);background:var(--surface)}
.qfwrap{max-width:var(--maxw);margin:0 auto;padding:16px 20px;display:flex;
  align-items:center;gap:16px;min-height:76px}
.qverdict{flex:1;display:none;flex-direction:column;gap:2px;min-width:0}
.qverdict.show{display:flex}
.qverdict b{font-size:16px;font-weight:720}
.qverdict span{font-size:14px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.qverdict.good b{color:var(--ok)}
.qverdict.bad b{color:var(--bad)}
.qverdict.bad span{color:var(--accent-2)}
.qgo{margin-left:auto;padding:14px 34px;font-size:15px;border-radius:13px;flex:none}

/* fin d'étape */
.qmain.done{align-items:center;text-align:center;justify-content:center;gap:16px;
  padding-top:min(14vh,110px)}
.bigcheck{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);animation:pop .3s}
.bigcheck.perfect{background:rgba(61,220,132,.16)}
.bigcheck svg{width:46px;height:46px;fill:none;stroke:var(--accent);stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.bigcheck.perfect svg{stroke:var(--ok)}
.qmain.done h2{margin:0;font-size:27px;font-weight:740;letter-spacing:-.03em}
.score{display:flex;gap:14px;margin:6px 0 10px}
.score>div{min-width:116px;padding:14px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;
  gap:2px}
.score b{font-size:23px;font-weight:740;color:var(--accent);
  font-variant-numeric:tabular-nums}
.score span{font-size:12px;color:var(--dim);font-weight:600}
.endsub{margin:-8px 0 0;max-width:430px;color:var(--dim);font-size:14.5px;
  line-height:1.55}
.endbtns{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}

/* =============================================================== histoires */
/* La liste : un bandeau par niveau, puis des cartes carrées. Les cartes sont
   plus petites que celles des vidéos — une histoire est un petit objet, et
   quatre par rangée se survolent d'un coup d'œil. */
.lvl{margin-bottom:34px}
.lvlhd{display:flex;align-items:center;gap:14px;padding:13px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.lvlcode{width:40px;height:40px;border-radius:12px;flex:none;display:grid;
  place-items:center;background:var(--accent-soft);color:var(--accent-2);
  font-size:13px;font-weight:800;letter-spacing:.03em}
.lvlwho{flex:1;min-width:0}
.lvlwho b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.lvlwho span{display:block;margin-top:2px;color:var(--dim);font-size:13px}
.lvlnb{margin-left:auto;padding:5px 11px;border-radius:999px;flex:none;
  background:var(--surface-2);color:var(--dim);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.lvlnb.full{background:rgba(61,220,132,.16);color:var(--ok)}

.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:20px 16px;padding:18px 2px 0}
.scard{display:flex;flex-direction:column;text-align:left;transition:.18s}
.scard:hover{transform:translateY(-3px)}
.sthumb{position:relative;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.45);background:var(--surface-2)}
.sthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:.3s;opacity:.94}
.scard:hover .sthumb img{opacity:1;transform:scale(1.05)}
/* L'emoji n'est là que pour les histoires dont le dessin n'existe pas encore :
   dès qu'une image est présente il s'efface, et le gestionnaire d'erreur de
   stories.js retire l'image, ce qui le fait réapparaître tout seul. */
.semoji{font-size:46px;line-height:1}
.sthumb img ~ .semoji{display:none}
.smins{position:absolute;right:7px;bottom:7px;padding:2.5px 7px;border-radius:6px;
  background:rgba(0,0,0,.82);font-size:11.5px;font-weight:650;
  font-variant-numeric:tabular-nums}
.sflag{position:absolute;left:7px;top:7px;width:24px;height:24px;border-radius:50%;
  background:var(--ok);display:grid;place-items:center}
.sflag svg{width:14px;height:14px;fill:none;stroke:#0c2b1a;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.scard.is-lu .sthumb{outline:1.5px solid rgba(255,106,26,.45);outline-offset:-1.5px}
.scard.is-fait .sthumb{outline:1.5px solid rgba(61,220,132,.5);outline-offset:-1.5px}
.scard.is-fait .sthumb img{opacity:.6}
.sttl{margin-top:10px;font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  line-height:1.3}
.sfr{margin-top:3px;color:var(--accent-2);font-size:12.5px;font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres{margin-top:6px;color:var(--dim);font-size:12.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Un fond par thème, pour que deux histoires voisines ne se ressemblent pas
   quand ni l'une ni l'autre n'a encore son dessin. */
.th-business{background:linear-gradient(150deg,#243447,#14161c)}
.th-tech{background:linear-gradient(150deg,#1c3340,#14161c)}
.th-science{background:linear-gradient(150deg,#1f3a33,#14161c)}
.th-scifi{background:linear-gradient(150deg,#2b2448,#14161c)}
.th-mystere{background:linear-gradient(150deg,#332036,#14161c)}
.th-sport{background:linear-gradient(150deg,#3a2a1c,#14161c)}
.th-musique{background:linear-gradient(150deg,#3a1f2e,#14161c)}
.th-cinema{background:linear-gradient(150deg,#1f2440,#14161c)}
.th-vie{background:linear-gradient(150deg,#2f3320,#14161c)}

/* ------------------------------------------------------------- la lecture */
body.inread{overflow:hidden}
/* Sous le panneau de questions (z-index 90) : les questions d'après s'ouvrent
   par-dessus l'histoire, et la retrouvent intacte si on les quitte. */
.sread{position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;animation:fade .16s ease}
.rtop{display:flex;align-items:center;gap:10px;padding:10px 14px;flex:none;
  border-bottom:1px solid var(--line)}
.rttl{flex:1;min-width:0}
.rttl b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rttl span{display:block;color:var(--dim-2);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rscroll{flex:1;overflow-y:auto}
.rwrap{max-width:760px;margin:0 auto;padding:24px 22px 90px}

.rimg{margin:0 0 24px;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.45)}
.rimg img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.rimg .remoji{display:grid;place-items:center;aspect-ratio:16/9;font-size:70px;
  line-height:1}
.rimg img ~ .remoji{display:none}
.rimg figcaption{padding:14px 18px;background:var(--surface);color:var(--dim);
  font-size:14px;line-height:1.6}

.rkeys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.rkhd{color:var(--dim-2);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;margin-right:4px}
.rkey{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);
  transition:.14s}
.rkey:hover{background:var(--surface-2)}
.rkey b{font-size:14px;font-weight:680}
.rkey span{font-size:12.5px;color:var(--accent-2)}
.rkey.saved{background:rgba(61,220,132,.1);border-color:rgba(61,220,132,.42)}
.rkey.saved b::after{content:" ✓";color:var(--ok);font-weight:700}

/* Le texte reprend exactement les lignes du lecteur vidéo — mêmes mots, mêmes
   gloses au-dessus. Ce qui change : plus rien n'est en train d'être dit, donc
   rien n'est éteint, et la taille baisse un peu puisqu'on lit d'affilée. */
.rtext .ln{opacity:1;cursor:default;padding:9px 16px;margin:2px -16px}
.rtext .ln:hover{opacity:1;background:none}
.rtext .ln .en{font-size:22px;line-height:1.78}
.rtext .ln .fr{margin-top:6px;font-size:14.5px}
.rtext .ln .wd{cursor:pointer}
/* Le lecteur vidéo rogne les gloses à 13 caractères pour que la ligne anglaise
   garde sa largeur : le bloc orange suit la voix, il ne doit pas se décaler
   d'un mot à l'autre. Ici rien ne défile et rien n'est chronométré, donc ce
   plafond ne ferait que perdre la fin du mot — « ninety » s'affichait
   « quatre vingt… ». On rend la traduction entière, quitte à écarter un peu. */
.rtext .ln .wd .gl{color:var(--dim);max-width:none;overflow:visible}
.rtext .ln .wd:hover .tx{background:var(--accent-soft);color:var(--accent-2)}
.rtext .ln .wd.key .tx{box-shadow:inset 0 -2.5px 0 var(--accent-soft)}
.rtext .ln .wd.saved .tx{box-shadow:inset 0 -2.5px 0 rgba(61,220,132,.55)}

.rend{margin-top:32px;padding:24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);display:flex;
  flex-direction:column;align-items:flex-start;gap:15px}
.rend p{margin:0;max-width:52ch;color:var(--dim);font-size:14.5px;line-height:1.6}
.btn.big{padding:14px 28px;font-size:15px;border-radius:13px}

@media (max-width:620px){
  .pick{grid-template-columns:1fr}
  .hometitle{font-size:27px}
  .modeswitch .seg span:last-child{display:none}
  .modeswitch .seg{padding:8px 11px}
  /* Depuis que la bascule a trois segments, la barre du haut ne tient plus sur
     un telephone : « Vocabulaire », les points et la serie sortaient de l'ecran
     sans rien pour le signaler. On enleve ce qui est redit juste en dessous —
     le nom du site, le libelle des boutons — et on garde les icones, le
     compteur de mots et les chiffres, qui eux ne sont ecrits nulle part ailleurs. */
  .topbar .btn .lbl{display:none}
  .brand .bname{display:none}
  .topbar .wrap{gap:9px}
  .bigen{font-size:31px}
  .bigfr{font-size:25px}
  .sent{font-size:21px}
  .trad.big{font-size:19px}
  .opts{grid-template-columns:1fr}
  .qgo{padding:13px 22px}
  .bub{width:58px;height:55px}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:16px 12px}
  .lvlwho span{display:none}
  .lvlhd{padding:11px 14px;gap:11px}
  .rwrap{padding:18px 16px 80px}
  .rtext .ln .en{font-size:19px;line-height:1.8}
  .rtext .ln{padding:8px 12px;margin:2px -12px}
}

/* ============================================================== les examens */

/* Le texte d'une épreuve. Il défile dans son propre cadre : sans ça, sur un
   passage IELTS de 500 mots, la question et le bouton « Vérifier » sortent de
   l'écran et il faut remonter à chaque fois. */
.qpassage{max-height:40vh;overflow:auto;padding:16px 18px;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;line-height:1.72;color:#dcdee4;overscroll-behavior:contain}
.qpassage h4{margin:0 0 12px;font-size:13px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.qpassage p{margin:0 0 13px}
.qpassage p:last-child{margin-bottom:0}
/* Les repères A, B, C : l'appariement de titres demande « le paragraphe C » et
   n'a aucun sens sans eux. */
.qpassage.lettered{counter-reset:para}
.qpassage.lettered p{counter-increment:para;position:relative;padding-left:30px}
.qpassage.lettered p::before{content:counter(para,upper-alpha);position:absolute;
  left:0;top:1px;width:21px;height:21px;display:grid;place-items:center;
  border-radius:6px;background:var(--surface-3);color:var(--accent-2);
  font-size:11.5px;font-weight:700}

/* Le chronomètre, dans la barre du haut des questions. */
.qtime{flex:none;padding:5px 11px;border-radius:999px;background:var(--surface-2);
  color:var(--dim);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.qtime.urgent{background:rgba(255,91,74,.15);color:var(--bad)}
.qtime.over{background:rgba(255,91,74,.15);color:var(--bad)}

/* Un trou au milieu d'une phrase : l'input se pose exactement où le mot
   manque, au lieu d'une boîte posée en dessous. */
.sentline{font-size:19px;line-height:2.1;color:var(--text)}
.typebox.inline{display:inline-block;width:auto;min-width:170px;padding:6px 13px;
  margin:0 4px;font-size:17px;text-align:center;border-radius:10px;
  background:var(--surface-2);vertical-align:baseline}
.typebox.inline::placeholder{letter-spacing:normal;font-style:italic}
.lead{padding:13px 16px;margin-bottom:18px;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  font-size:16px;line-height:1.6;color:#dcdee4}
.keyword{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  padding:7px 14px;border-radius:999px;background:var(--accent-soft)}
.keyword b{font-size:15px;letter-spacing:.09em;color:var(--accent-2)}
.kwlbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dim)}
.qnote{margin-top:16px;font-size:13px;color:var(--dim)}
/* L'explication de la règle, sous le verdict. C'est elle qui fait apprendre
   quelque chose à une erreur, donc elle a de la place. */
.why{display:block;margin-top:9px;max-width:62ch;font-size:13.5px;line-height:1.6;
  font-style:normal;color:var(--dim);border-top:1px solid var(--line);padding-top:9px}

/* La pastille de niveau, dans la barre de chaque page. */
.lvlchip{display:flex;align-items:center;gap:8px;flex:none;padding:5px 11px 5px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.lvlchip:hover{border-color:var(--accent)}
.lvlchip b{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--accent-2)}
.lvlchip .bar{display:block;width:46px;height:4px;border-radius:999px;
  background:var(--surface-3);overflow:hidden}
.lvlchip .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* --- la jauge de progression --- */
.jauge{margin-bottom:34px;padding:22px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.jhd{display:flex;align-items:flex-start;gap:20px}
.jhd h2{margin:0 0 6px;font-size:19px;font-weight:650}
.jhd p{margin:0;font-size:14px;line-height:1.6;color:var(--dim);max-width:52ch}
.jdays{margin-left:auto;flex:none;text-align:right}
.jdays b{display:block;font-size:30px;font-weight:700;color:var(--accent);
  line-height:1.05;font-variant-numeric:tabular-nums}
.jdays span{font-size:12px;color:var(--dim)}
.jbar{position:relative;height:9px;margin:30px 0 32px;border-radius:999px;
  background:var(--surface-3)}
.jbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* Les six paliers CECR posés sur la barre : un pourcentage nu ne dit rien,
   « entre B2 et C1 » dit tout. */
.jtick{position:absolute;top:-5px;width:1px;height:19px;background:var(--line)}
.jtick::after{content:attr(data-l);position:absolute;top:23px;left:50%;
  transform:translateX(-50%);font-size:10.5px;font-weight:650;letter-spacing:.05em;
  color:var(--dim-2)}
.jtick.cible{background:var(--accent)}
.jtick.cible::after{color:var(--accent)}
.jsous{font-size:12.5px;color:var(--dim-2)}
.jvide{margin:18px 0 0;font-size:14px;line-height:1.65;color:var(--dim);max-width:60ch}

/* --- un examen --- */
.exam{margin-bottom:34px}
.examhd{display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}
.exsig{flex:none;padding:7px 12px;border-radius:9px;background:var(--accent-soft);
  color:var(--accent-2);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.exwho{min-width:0}
.exwho b{display:block;font-size:16px;font-weight:650;margin-bottom:3px}
.exwho span{display:block;font-size:13px;line-height:1.55;color:var(--dim);max-width:70ch}
.papiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-bottom:0}
.pap{padding:11px 14px;background:var(--surface)}
.pap b{display:block;font-size:12.5px;font-weight:650;margin-bottom:2px}
.pap span{font-size:11.5px;color:var(--dim-2)}
.pap.lien b{color:var(--accent-2)}
.pap.lien:hover{background:var(--surface-2)}
.exnote{margin:0;padding:12px 16px;background:var(--surface-2);
  border:1px solid var(--line);border-bottom:0;font-size:13px;line-height:1.6;
  color:var(--dim)}
.secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.sec{display:flex;flex-direction:column;gap:9px;padding:17px 18px;text-align:left;
  background:var(--surface);border:0;cursor:pointer;font:inherit;color:inherit}
.sec:hover{background:var(--surface-2)}
.sechd{display:flex;align-items:center;gap:10px}
.sechd b{font-size:14.5px;font-weight:650}
.seccefr{flex:none;margin-left:auto;padding:3px 8px;border-radius:6px;
  background:var(--surface-3);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:var(--dim)}
.secquoi{font-size:13px;line-height:1.6;color:var(--dim)}
.secmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:auto;
  padding-top:5px;font-size:11.5px;color:var(--dim-2)}
.secmeta>span{padding:3px 8px;border-radius:6px;background:var(--surface-2)}
.score{background:rgba(255,91,74,.14)!important;color:#ffa79c;font-weight:650}
.score.pass{background:rgba(61,220,132,.14)!important;color:#8df0b6}
.nonote{font-style:italic}
.dern.alert{color:var(--bad)}
.sec.done{border-left:2px solid var(--accent)}
.sec.libre{border-left:2px solid var(--surface-3)}

/* --- Writing et Speaking, par-dessus la liste --- */
.ltop{display:flex;align-items:center;gap:14px;max-width:var(--maxw);width:100%;
  margin:0 auto;padding:14px 20px;border-bottom:1px solid var(--line)}
.ltop .title{min-width:0}
.ltop .title b{display:block;font-size:15px;font-weight:650}
.ltop .title span{display:block;font-size:12.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lscroll{flex:1;overflow:auto;max-width:var(--maxw);width:100%;margin:0 auto;
  padding:24px 20px 80px}
.lnonote{margin:0 0 26px;padding:14px 16px;background:var(--accent-soft);
  border-radius:11px;font-size:13.5px;line-height:1.65;color:var(--accent-2)}
.ltache{margin-bottom:26px;padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.ltache header{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.ltache header b{font-size:15.5px;font-weight:650}
.lmin{padding:3px 9px;border-radius:6px;background:var(--surface-2);
  font-size:11.5px;color:var(--dim)}
.ltache header .btn{margin-left:auto}
.ltache header .qtime{margin-left:auto}
.ltache header .qtime+.btn{margin-left:0}
.lconsigne{margin:0 0 12px;font-size:14.5px;line-height:1.65}
.lsujet{margin:0 0 18px;padding-left:20px;font-size:14px;line-height:1.7;
  color:var(--dim)}
.lzone{position:relative}
.libretxt{width:100%;padding:16px 18px 34px;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;font-size:15px;line-height:1.7;
  resize:vertical;font-family:var(--ff)}
.libretxt:focus{outline:none;border-color:rgba(255,106,26,.5)}
.wc{position:absolute;right:14px;bottom:11px;font-size:11.5px;
  font-variant-numeric:tabular-nums;color:var(--dim-2)}
.wc.short{color:var(--bad)}
.wc.ok{color:var(--ok)}
.lgrille{margin-top:16px}
.lgrille summary{cursor:pointer;font-size:13px;color:var(--accent-2);
  padding:8px 0;list-style:none}
.lgrille summary::-webkit-details-marker{display:none}
.lgrille summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.lgrille[open] summary::before{content:'▾ '}
.lgrille ul{margin:8px 0 0;padding:0;list-style:none}
.lgrille li{margin-bottom:3px}
.lgrille label{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;
  border-radius:9px;cursor:pointer;font-size:13.5px;line-height:1.6;color:var(--dim)}
.lgrille label:hover{background:var(--surface-2)}
.lgrille input{margin-top:3px;flex:none;accent-color:var(--accent)}
.lgrille input:checked+span{color:var(--text)}

/* --- le programme de douze mois --- */
.pact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.pjour{font-size:12.5px;color:var(--dim-2);font-variant-numeric:tabular-nums}
.jsous .pmanque{display:block;margin-top:7px;color:var(--accent-2)}

.pm{margin-bottom:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.pm.open{border-color:rgba(255,106,26,.34)}
.pmhd{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;
  text-align:left}
.pmhd:hover{background:var(--surface-2)}
/* Le numéro du mois. Celui où on en est est le seul repère de la page qui dise
   « c'est ici » : les onze autres sont des mois, pas des étapes à franchir. */
.pmn{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;background:var(--surface-3);color:var(--dim);
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pmn.ici{background:var(--accent);color:#17120d}
.pmwho{flex:1;min-width:0}
.pmwho b{display:block;font-size:15.5px;font-weight:650;margin-bottom:3px}
.pmwho span{display:block;font-size:13px;line-height:1.55;color:var(--dim)}
.pm.passe .pmwho b{color:var(--dim)}
.pmbody{padding:2px 18px 18px;border-top:1px solid var(--line)}
.pmgo{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 0 4px}
.pmgo .btn{min-height:40px}
.pmgo span{font-size:13px;color:var(--dim)}

/* Les mots du mois. Deux cents lignes : elles tiennent en colonnes, et chacune
   s'ouvre sur la phrase où le mot est réellement dit. */
.pmlex{margin-top:14px}
.pmlex>summary{padding:9px 0;list-style:none;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--accent-2)}
.pmlex>summary::-webkit-details-marker{display:none}
.pmlex>summary::before{content:'▸ '}
.pmlex[open]>summary::before{content:'▾ '}
.pwords{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:1px;margin-top:8px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.mw{background:var(--surface);min-width:0}
.mw.su{box-shadow:inset 2.5px 0 0 var(--ok)}
.mwhd{display:flex;align-items:baseline;gap:8px;min-height:42px;padding:11px 13px;
  box-sizing:border-box;list-style:none}
details.mw>.mwhd{cursor:pointer}
details.mw>.mwhd:hover{background:var(--surface-2)}
.mwhd::-webkit-details-marker{display:none}
.mwhd b{font-size:14.5px;font-weight:650;flex:none}
.mwfr{min-width:0;font-size:12.5px;color:var(--accent-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwa{margin-left:auto;flex:none;padding:2px 6px;border-radius:5px;
  background:var(--surface-3);font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim-2)}
.mwex{display:flex;flex-direction:column;gap:6px;padding:0 13px 12px}
.mwen{font-size:13.5px;line-height:1.55}
.mwtr{font-size:12.5px;line-height:1.5;color:var(--dim)}
/* Ailleurs la ligne de source n'est qu'une étiquette ; ici c'est un lien vers
   le passage de la vidéo, donc une cible à viser au doigt : 40 px. */
.mwex .srcline{background:var(--surface-2);min-height:40px}

/* Ce qu'il y a à faire du mois, en dehors des mots : les vidéos, l'histoire,
   l'épreuve. Trois listes de la même forme, parce que c'est le même geste. */
.pbloc{margin-top:20px}
.pbloc h3{margin:0 0 9px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim-2)}
/* `minmax(0,1fr)` et pas la colonne implicite : un titre de vidéo en
   `white-space:nowrap` donne une largeur minimale de 430 px, et une piste de
   grille `auto` s'y plie — la liste sortait de l'écran. */
.plist{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.pvid,.phist,.pep{display:flex;align-items:center;gap:12px;min-height:46px;
  padding:11px 14px;background:var(--surface);box-sizing:border-box}
.pvid:hover,.phist:hover,.pep:hover{background:var(--surface-2)}
/* Le lien porte le titre et la ligne en dessous : 37 px de texte, trop court
   pour un doigt. On le centre dans 40 px au lieu d'agrandir la ligne. */
.pwho{display:flex;flex-direction:column;justify-content:center;flex:1;
  min-width:0;min-height:40px}
.pwho b{display:block;font-size:14px;font-weight:650;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwho span{display:block;font-size:12px;color:var(--dim-2)}
.vu .pwho b{color:var(--dim)}
.pcheck{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;background:var(--surface-2);color:var(--dim-2)}
.pcheck svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pvid.vu .pcheck{background:rgba(61,220,132,.16);color:var(--ok)}
.pdone{flex:none;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:650;
  background:rgba(61,220,132,.14);color:#8df0b6}
.pvide{margin:0;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;font-size:13px;line-height:1.6;
  color:var(--dim-2)}

/* Le téléphone, pour tout ce qui précède. Ces deux derniers blocs doivent
   rester en fin de fichier : les règles ci-dessus ont la même spécificité, donc
   celle qui gagne est celle qui vient après. */
@media (max-width:620px){
  /* Mesuré dans Chrome à 390 px : rien ne débordait, mais tout ce qui se touche
     était sous les 40 px recommandés — la bascule de mode faisait 38×32, les
     boutons de l'en-tête 37 de haut. Au doigt, ça se rate. */
  /* 38 et pas 42 depuis le cinquième mode : à 42, les cinq icônes plus les
     chiffres de l'en-tête sortaient de l'écran de 11 px. 36 est le minimum
     visable au doigt, on garde 2 px de marge. */
  .modeswitch .seg{min-width:38px;min-height:42px;justify-content:center;padding:8px 10px}
  .iconbtn{width:42px;height:42px}
  .iconbtn svg{width:20px;height:20px}
  .topbar .btn,.rend .btn,.endbtns .btn{padding:12px 16px}
  .chip{padding:11px 15px}
  /* Sous 16 px, iOS zoome la page dès qu'on touche le champ, et il ne la
     dézoome jamais tout seul : la bibliothèque restait de travers. */
  .searchbar input,.modal input,.modal select{font-size:16px}
  /* Les deux tailles sous 11 px : ce sont des badges de niveau, pas de la
     décoration — on les lit au même titre que le reste. */
  .ibadge,.seccefr,.orig,.jtick span{font-size:11.5px}
  /* Le seul lien de la page d'accueil qui ne soit pas une carte : 18 px de
     haut, soit la hauteur de son texte, et rien autour pour le viser. */
  .homevocab{padding:11px 14px;margin:24px -14px 0;border-radius:11px;
    background:var(--surface)}
  /* La pastille de niveau garde sa lettre et perd sa barre : la lettre est
     l'information, la barre n'en est que l'illustration. */
  .lvlchip .bar{display:none}
  .lvlchip{padding:5px 9px}
  .jauge{padding:18px 16px}
  .jhd{flex-direction:column;align-items:flex-start;gap:12px}
  .jdays{margin-left:0;text-align:left;display:flex;align-items:baseline;gap:7px}
  .jdays b{font-size:23px}
  .examhd{padding:13px 14px;gap:11px}
  .exwho span{display:none}
  .papiers{grid-template-columns:1fr 1fr}
  .secs{grid-template-columns:1fr}
  .qpassage{max-height:34vh;padding:14px 15px;font-size:14.5px}
  .qpassage.lettered p{padding-left:27px}
  .sentline{font-size:17px;line-height:2.3}
  .typebox.inline{min-width:135px;font-size:16px}
  .lead{font-size:15px}
  .ltop{padding:12px 16px}
  .lscroll{padding:18px 16px 70px}
  .ltache{padding:16px 15px}
  .ltache header{flex-wrap:wrap}
  .pmhd{padding:13px 14px;gap:11px}
  .pmwho span{display:none}
  .pmbody{padding:2px 14px 16px}
  /* Une seule colonne de mots : à 390 px, deux colonnes de 160 px coupaient
     la traduction au deuxième mot. */
  .pwords{grid-template-columns:1fr}
  .pcheck{width:42px;height:42px}
  .mwa{font-size:10px}
}

/* Un écran tactile n'a pas de survol, mais le navigateur laisse quand même le
   `:hover` collé sur le dernier élément touché, jusqu'au prochain appui
   ailleurs. Sur les surfaces qui servent aussi à montrer un choix, ça mentait :
   la réponse qu'on venait de toucher restait surlignée comme si elle était
   cochée, une carte touchée restait soulevée et bordée d'orange, un filtre
   touché avait l'air actif. On annule donc l'effet là où le survol n'existe
   pas — et seulement sur ces surfaces-là.
   shortcut: les survols purement décoratifs (boutons, liens) sont laissés
   tels quels, ils ne ressemblent à aucun état ; à revoir si l'un d'eux finit
   par porter une sélection. */
@media (hover:none){
  .opt:hover,.ptile:hover,.tile:hover,.sec:hover,.srcline:hover,
  .rkey:hover,.chip:hover{background:var(--surface)}
  .lgrille label:hover{background:none}
  .srcline:hover{color:var(--dim-2)}
  .chip:hover{color:var(--dim)}
  .modeswitch .seg:hover{color:var(--dim)}
  .modeswitch .seg.on:hover{color:var(--text)}
  .card:hover,.scard:hover,.pickcard:hover{transform:none}
  .pickcard:hover{border-color:var(--line);background:var(--surface)}
  .lvlchip:hover{border-color:var(--line)}
  .bub:not(.locked):hover .bface{filter:none}
  /* L'inverse du même problème : ce qui n'apparaissait qu'au survol ne se
     montrait jamais. Le triangle de lecture sur une vignette est le seul à
     manquer vraiment — le bouton de suppression, lui, reste caché, à deux
     millimètres d'une vignette qu'on touche pour lancer la vidéo. */
  .card .play{opacity:1}
}