/* Page d'écoute : une page de livre ouverte. L'épisode dans la marge de gauche, les mots dans
   celle de droite, le texte au centre. Seule la phrase dite est en pleine encre, soulignée de vert.
   Tout tient dans l'écran : le texte se lit page par page. */

html.page-episode {
  --taille-texte: clamp(19px, 0.75vw + 11px, 24px);
  --encre-attente: #73777f;
}
:root.page-episode[data-theme="dark"] { --encre-attente: #8c8f95; }

html.page-episode,
.page-episode body { height: 100%; overflow: hidden; }

.ecran {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.page-episode .entete { position: relative; }
.page-episode .entete .conteneur { max-width: 1440px; }
.titre-court { display: none; font-weight: 700; font-size: 15px; letter-spacing: -0.015em; }
.seulement-mobile { display: none !important; }

/* ——— La scène : marge, page, marge ——— */

.scene {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 250px;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding: 22px var(--gouttiere) 16px;
}
.colonne { display: contents; }
.colonne[hidden] { display: none; }
.feuille { grid-column: 2; grid-row: 1; }
.marge { grid-column: 1; grid-row: 1; }
.lexique { grid-column: 3; grid-row: 1; }

/* ——— La marge de gauche : l'épisode ——— */

.marge { min-height: 0; display: flex; flex-direction: column; gap: 18px; overflow: auto; scrollbar-width: none; padding-top: 6px; }
.marge::-webkit-scrollbar { display: none; }
.fiche-episode { display: flex; flex-direction: column; gap: 18px; }
.fiche-episode .pochette { width: 112px; }
.fiche-episode .pochette .titre { font-size: 17cqw; top: 38%; }
.marge h1 { font-size: clamp(28px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.marge .meta { margin-top: 10px; font-size: 14px; color: var(--gris); }
.marge .meta .pastille { font-size: 14px; }
.resume { margin: 0; color: var(--gris); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.lien-quiz {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet);
  background: none; text-align: left; cursor: pointer; color: var(--encre);
}
.lien-quiz > span { display: flex; flex-direction: column; }
.lien-quiz strong { font-size: 15px; }
.lien-quiz small { font-size: 13px; color: var(--gris); }
.lien-quiz svg { width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--sortie); }
.lien-quiz:hover svg { transform: translateX(3px); }
.lien-raccourcis { align-self: flex-start; border: 0; background: none; padding: 2px 0; font-size: 13.5px; color: var(--gris); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
.lien-raccourcis:hover { color: var(--encre); }

/* ——— La page ——— */

.feuille { min-height: 0; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
.feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; margin-bottom: 14px; border-bottom: 1px solid var(--filet); padding-bottom: 8px; }
.tete-gauche { display: flex; align-items: center; gap: 12px; min-width: 0; }
.indic-page { font-size: 13.5px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reprise { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--encre); white-space: nowrap; animation: arrivee 0.4s var(--sortie); }
.reprise::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reprise button { border: 0; background: none; padding: 2px 0; font-size: 13.5px; font-weight: 600; color: var(--gris); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.reprise button:hover { color: var(--encre); }
.tete-gauche:has(.reprise:not([hidden])) .indic-page { display: none; }

.outils { display: flex; align-items: center; gap: 2px; }
.outil {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--r-petit); background: none;
  color: var(--gris); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.outil:hover { background: var(--surface-2); color: var(--encre); }
.outil[aria-pressed="true"] { color: var(--encre); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.outil svg { width: 16px; height: 16px; }
.outils-sep { width: 1px; height: 16px; background: var(--filet); margin: 0 6px; }
@container (max-width: 640px) {
  .outil span:not(.outil-aa) { display: none; }
  .outil { width: 34px; padding: 0; justify-content: center; }
}

.zone { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* Le texte synchronisé */
.texte { height: 100%; max-width: 34em; margin: 0 auto; }
.texte p {
  font-size: calc(var(--taille-texte) * var(--echelle-texte, 1));
  line-height: 1.6; font-weight: 450; letter-spacing: -0.01em;
  margin: 0 0 0.9em;
}
.texte p:last-child { margin-bottom: 0; }
.texte.texte-serif p { font-family: var(--lecture-serif); font-weight: 400; letter-spacing: 0; font-size: calc(var(--taille-texte) * var(--echelle-texte, 1) * 1.12); line-height: 1.52; }
.page.entree { animation: entree-page 0.45s var(--sortie); }
.page.entree.arriere { animation-name: entree-page-arriere; }
@keyframes entree-page { from { opacity: 0; transform: translateX(16px); } }
@keyframes entree-page-arriere { from { opacity: 0; transform: translateX(-16px); } }

.phrase { cursor: pointer; transition: color 0.45s ease; }

/* Le mot dit : un trait vert apparaît vite, puis s'efface lentement quand la voix passe au mot suivant */
.texte .mot { position: relative; }
.texte .mot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 2px;
  background: var(--accent); border-radius: 1px;
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease-out;
}
.texte .mot.dit::after { opacity: 1; transition-duration: 0.18s; }
.texte .phrase:hover { color: var(--encre); }
/* Quand la lecture a commencé : la phrase dite en pleine encre, soulignée ; le reste en gris */
.texte.focus:has(.phrase.active) .phrase { color: var(--encre-attente); }
.texte.focus .phrase.active,
.texte.focus:has(.phrase.active) .phrase.active { color: var(--encre); }
.texte.focus:has(.phrase.active) .phrase:not(.active):hover { color: var(--encre); }

.lex {
  text-decoration: underline dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.25s ease;
}
.lex:hover { text-decoration-style: solid; }
.lex:focus:not(:focus-visible) { outline: none; }
.texte .lex.ouvert { color: var(--encre); background: var(--accent-pale); box-shadow: 0 0 0 3px var(--accent-pale); text-decoration-style: solid; }
.lex.repere { animation: repere 1.4s ease-out; }
@keyframes repere { 0%, 30% { background: var(--accent-pale); box-shadow: 0 0 0 6px var(--accent-pale); } 100% { box-shadow: 0 0 0 3px transparent; } }
.texte .mot.mot-sauve { background: var(--accent-pale); box-shadow: 3px 0 0 var(--accent-pale), -3px 0 0 var(--accent-pale); border-radius: 3px; }
.texte ::selection { background: var(--accent-pale); }

/* Texte masqué : on n'écoute plus qu'avec l'oreille */
.texte.masque .flou { filter: blur(9px); opacity: 0.6; user-select: none; pointer-events: none; transition: filter 0.4s ease, opacity 0.4s ease; }
.voile-masque { display: none; position: absolute; inset: 0; place-items: center; pointer-events: none; }
.zone:has(.texte.masque) .voile-masque { display: grid; }
.voile-masque > div { pointer-events: auto; text-align: center; max-width: 340px; padding: 28px 30px; background: var(--surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); border-radius: var(--r-surface); }
.voile-masque h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 8px; }
.voile-masque p { color: var(--gris); font-size: 15px; margin: 0 0 20px; }

/* Squelette et erreur */
.squelette { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; max-width: 34em; margin: 0 auto; }
.squelette i { display: block; height: 16px; border-radius: 2px; background: var(--surface-2); animation: attente-tardive 0.25s ease 0.3s both, respire 1.4s ease-in-out 0.55s infinite; }
.squelette i.court { width: 62%; }
.squelette i.vide { background: none; animation: none; height: 6px; }
.erreur-episode { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; max-width: 34em; margin: 0 auto; padding: 24px 0; }
.erreur-episode h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -0.05em; }
.erreur-episode p { color: var(--gris); margin: 0 0 8px; }

html.episode-introuvable .feuille-tete, html.episode-introuvable .pagination { visibility: hidden; }
html.episode-introuvable .scene { grid-template-columns: minmax(0, 1fr); }
html.episode-introuvable .feuille { grid-column: 1; }

/* Traduction de la phrase en cours */
.traduction { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); min-height: 58px; max-width: calc(34em * 1.15); width: 100%; align-self: center; }
.traduction-etiquette { flex: none; font-size: 12px; font-weight: 700; color: var(--encre); }
.traduction p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pages : une ligne fine segmentée */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding-top: 10px; }
.page-segments { flex: 1; max-width: 520px; display: flex; gap: 3px; }
.page-segment { flex: 1; min-width: 6px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.page-segment::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--filet); transition: background 0.25s ease, transform 0.2s ease; }
.page-segment.lue::before { background: var(--filet-fort); }
.page-segment.en-ecoute::before { background: var(--accent); }
.page-segment.courante::before { background: var(--encre); }
.page-segment:hover::before { transform: scaleY(2); }
.page-fleche { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--gris); cursor: pointer; display: grid; place-items: center; }
.page-fleche:hover:not(:disabled) { background: var(--surface-2); color: var(--encre); }
.page-fleche:disabled { opacity: 0.3; cursor: default; }
.page-fleche svg { width: 18px; height: 18px; }
.page-compteur { min-width: 52px; text-align: center; font-size: 13.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.page-numeros { display: flex; gap: 2px; }
.page-num { min-width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; color: var(--gris); cursor: pointer; font-variant-numeric: tabular-nums; }
.page-num.courante { background: var(--encre); color: var(--papier); }

/* ——— La marge de droite : les mots ——— */

.lexique { min-height: 0; display: flex; flex-direction: column; padding-top: 6px; }
.lexique-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--encre); }
.lexique h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.lexique ul {
  flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}
.lexique ul::-webkit-scrollbar { display: none; }
.lexique li { border-bottom: 1px solid var(--filet); }
.lexique li.lexique-groupe { border-bottom: 0; padding: 16px 0 4px; font-size: 13px; font-weight: 600; color: var(--gris); }
.lexique li.lexique-groupe:first-child { padding-top: 10px; }
.lexique li button {
  width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  transition: opacity 0.3s ease;
}
.lexique li strong { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; transition: color 0.3s; }
.lexique li span { color: var(--gris); font-size: 13.5px; line-height: 1.4; }
.lexique li button:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lexique li.a-venir button { opacity: 0.45; }
.lexique li.a-venir button:hover { opacity: 1; }
/* Le dernier mot entendu : en encre, avec un trait à gauche. Le vert reste réservé aux mots enregistrés. */
.lexique li button { transition: opacity 0.3s ease, padding 0.3s var(--sortie), box-shadow 0.3s; }
.lexique li.actuel button { padding-left: 10px; box-shadow: inset 2px 0 0 var(--encre); }
.lexique li.actuel span { color: var(--encre); }
.lexique li.sauve strong::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.astuce { margin: 12px 0 0; font-size: 13px; color: var(--gris); }
.astuce-compte { display: block; margin-top: 6px; color: var(--accent); font-weight: 600; }
.astuce-compte::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.astuce-compte a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Déjà écouté (membres), à côté du niveau et de la durée */
.ecoute-faite { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.ecoute-faite svg { width: 12px; height: 12px; }

/* L'histoire suivante, sous le quiz */
.lien-suivant { display: flex; flex-direction: column; gap: 1px; padding: 12px 0; border-bottom: 1px solid var(--filet); color: var(--encre); }
.lien-suivant[hidden] { display: none; }
.lien-suivant small { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.lien-suivant strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.lien-suivant strong::after { content: " →"; color: var(--gris); font-weight: 500; }
.lien-suivant:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.outil-quiz[hidden] { display: none !important; }
.fermer-feuille { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--gris); }
.fermer-feuille svg { width: 14px; height: 14px; }

/* ——— Bulle de définition ——— */

.bulle {
  position: fixed; z-index: 60;
  width: min(340px, calc(100vw - 32px));
  padding: 20px 20px 12px;
  background: var(--surface); border-radius: var(--r-surface);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.25s var(--sortie);
  pointer-events: none;
}
.bulle.ouverte { opacity: 1; transform: none; pointer-events: auto; }
.bulle .nature { font-size: 13px; color: var(--gris); font-style: italic; padding-right: 90px; }
.bulle h3, .bulle h4 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 2px 0 10px; }
.bulle .def { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; }
.bulle .en { font-size: 14.5px; color: var(--gris); margin: 0 0 14px; }
.bulle .en b, .fin-mot-detail .en b { font-size: 11.5px; font-weight: 700; color: var(--encre); margin-right: 8px; }
.bulle .pied-bulle { border-top: 1px solid var(--filet); padding-top: 8px; display: flex; justify-content: space-between; }
.bulle .pied-bulle button { border: 0; background: none; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; color: var(--encre); }
.bulle .pied-bulle button + button { color: var(--gris); font-weight: 500; }
.bulle .etoile { position: absolute; top: 14px; right: 14px; }

/* Enregistrer un mot */
.etoile {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface);
  color: var(--encre); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.etoile svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.etoile:hover { border-color: var(--encre); }
.etoile:active { transform: translateY(1px); }
.etoile[aria-pressed="true"] { background: var(--accent-pale); color: var(--accent); border-color: transparent; }
.etoile[aria-pressed="true"] svg { fill: currentColor; animation: etoile 0.35s var(--sortie); }
@keyframes etoile { from { transform: scale(0.5); } }

.barre-mot {
  position: fixed; z-index: 65;
  display: flex; align-items: center; gap: 14px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 10px 10px 16px;
  background: var(--surface); border-radius: var(--r-surface);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
  animation: deplier 0.15s ease;
}
.barre-mot-texte { display: flex; flex-direction: column; min-width: 0; }
.barre-mot-texte strong { font-size: 20px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.barre-mot-texte small { color: var(--gris); font-size: 12.5px; }
.barre-mot-nature { font-style: italic; }
.barre-mot .etoile { flex: none; }
.barre-mot-erreur { margin: 0 6px 0 0; font-size: 13.5px; color: var(--gris); }

/* ——— Le lecteur ——— */

.lecteur { background: var(--papier); border-top: 1px solid var(--filet); padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); }
.lecteur .conteneur { max-width: 1440px; position: relative; display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; align-items: center; gap: 24px; }
.lecteur .infos { min-width: 0; }
.lecteur .infos strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lecteur .infos span { font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.lecteur .centre { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lecteur .droite { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.commandes { display: flex; align-items: center; gap: 8px; }
.cmd { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--encre); transition: background 0.15s, transform 0.12s; }
.cmd:hover { background: var(--surface-2); }
.cmd:active { transform: scale(0.94); }
.cmd svg { width: 21px; height: 21px; }
.cmd.secondaire { color: var(--gris); }
.cmd.principal { width: 48px; height: 48px; background: var(--encre); color: var(--papier); }
.cmd.principal:hover { background: var(--action-fonce); }
.cmd.principal svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.cmd.principal .i-pause, .cmd.principal.en-lecture .i-lecture { display: none; }
.cmd.principal.en-lecture .i-pause { display: block; }
.barre { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.barre span { min-width: 34px; }
.barre span:last-child { text-align: right; }
.barre input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer; margin: 0;
}
.barre input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--filet-fort) var(--p, 0%)); }
.barre input[type="range"]::-moz-range-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--filet-fort) var(--p, 0%)); }
.barre input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--encre); border: 0; transition: transform 0.15s; }
.barre input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--encre); border: 0; }
.barre input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }
.modes { display: flex; gap: 2px; }
.mode {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--r-petit); background: none;
  color: var(--gris); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode svg { width: 16px; height: 16px; }
.mode:hover { background: var(--surface-2); color: var(--encre); }
.mode[aria-pressed="true"] { color: var(--encre); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.vitesse { height: 32px; min-width: 52px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: none; font-size: 13.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--encre); }
.vitesse:hover, .vitesse[aria-expanded="true"] { border-color: var(--encre); }
/* La liste des vitesses, au-dessus du bouton */
.vitesse-boite { position: relative; }
.vitesse-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 190px; padding: 6px; border-radius: 12px; background: var(--papier); box-shadow: 0 0 0 1px var(--filet-fort), 0 18px 40px -16px rgba(0, 0, 0, 0.35); display: grid; gap: 2px; }
.vitesse-menu[hidden] { display: none; }
.vitesse-menu button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--encre); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.vitesse-menu button b { min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.vitesse-menu button span { color: var(--gris); }
.vitesse-menu button:hover, .vitesse-menu button:focus-visible { background: var(--surface); outline: none; }
.vitesse-menu button[aria-checked="true"] { background: var(--surface); }
.vitesse-menu button[aria-checked="true"] b::after { content: " ✓"; color: var(--accent); }
.invite {
  position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%);
  white-space: nowrap; padding: 9px 16px; border-radius: var(--r-petit);
  background: var(--encre); color: var(--papier); font-size: 14px; font-weight: 500;
  box-shadow: var(--ombre-flottante);
  animation: invite 0.35s var(--sortie);
}
.invite kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--papier) 40%, transparent); }
@keyframes invite { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ——— Réglages « Aa » ——— */

.affichage { position: relative; }
.outil-aa { font-size: 16px; font-weight: 700; line-height: 1; }
#b-affichage { width: 36px; padding: 0; justify-content: center; }
#b-affichage[aria-expanded="true"] { background: var(--surface-2); color: var(--encre); }
.panneau-affichage {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 290px; padding: 16px;
  background: var(--surface); border-radius: var(--r-surface);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
  animation: deplier 0.2s var(--sortie);
}
.panneau-titre { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--gris); }
.panneau-titre + .choix-segments { margin-bottom: 16px; }
.choix-segments { display: flex; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); overflow: hidden; }
.choix-segments button { flex: 1; height: 36px; border: 0; background: none; color: var(--gris); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, color 0.15s; }
.choix-segments button + button { border-left: 1px solid var(--filet); }
.choix-segments button:hover { color: var(--encre); }
.choix-segments button[aria-checked="true"] { background: var(--encre); color: var(--papier); }
.apercu-sans { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.apercu-serif { font-family: var(--lecture-serif); font-size: 17px; }
.interrupteur-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 14px; cursor: pointer; }
/* Le guide du lecteur, au bas des réglages d'affichage : là où l'on cherche de l'aide en écoutant. */
.panneau-lien { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.panneau-lien:hover { text-decoration-thickness: 2px; }
.bascule { position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 12px; background: var(--filet-fort); cursor: pointer; transition: background 0.2s ease; }
.bascule span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--sortie); }
.bascule[aria-pressed="true"] { background: var(--accent); }
.bascule[aria-pressed="true"] span { transform: translateX(16px); }

/* ——— Fenêtres : raccourcis, fin d'épisode ——— */

.liste-raccourcis { margin: 0; }
.liste-raccourcis div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--filet); }
.liste-raccourcis dt { order: 2; white-space: nowrap; }
.liste-raccourcis dd { margin: 0; font-size: 15px; }

.fin {
  width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  border: 0; border-radius: var(--r-surface);
  padding: 40px 36px 28px;
  background: var(--surface); color: var(--encre);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
}
.fin::backdrop { background: rgba(23, 24, 28, 0.32); }
.fin[open] { animation: fenetre-entree 0.45s var(--sortie); }
.fin-bravo { margin-bottom: 28px; }
.fin-medaille { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; animation: medaille 0.6s var(--sortie) 0.15s backwards; }
.fin-medaille svg { width: 24px; height: 24px; }
@keyframes medaille { from { transform: scale(0.5); opacity: 0; } }
.fin h2 { font-size: clamp(44px, 7vw, 64px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; margin: 0; }
.fin-bravo p { color: var(--gris); margin: 12px 0 0; font-size: 17px; }
.fin.mode-quiz .fin-medaille, .fin.mode-quiz .fin-bravo p { display: none; }
.fin.mode-quiz .fin-bravo { margin-bottom: 20px; }
.fin.mode-quiz h2 { font-size: 36px; }
.quiz { border-top: 1px solid var(--encre); padding-top: 18px; }
.fin.mode-quiz .quiz { border-top-color: var(--encre); }
.quiz-tete { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.quiz-points { display: flex; gap: 3px; }
.quiz-points i { width: 16px; height: 2px; background: var(--filet); }
.quiz-points i.fait { background: var(--accent); }
.quiz-points i.courant { background: var(--encre); }
.quiz-question { font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; margin: 14px 0 18px; }
.quiz-choix { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  text-align: left; padding: 13px 16px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface);
  font-size: 16px; color: var(--encre); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--encre); }
.quiz-option:active:not(:disabled) { transform: translateY(1px); }
.quiz-option:disabled { cursor: default; color: var(--gris); }
.quiz-option.juste { background: var(--accent-pale); border-color: var(--accent); color: var(--encre); }
.quiz-option.juste::after { content: "  ✓"; color: var(--accent); font-weight: 700; }
.quiz-option.faux { border-color: var(--rouge); color: var(--encre); }
.quiz-explication { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.55; color: var(--gris); }
.quiz > .bouton { margin-top: 18px; margin-left: auto; display: flex; }
.quiz-resultat { padding: 8px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.quiz-resultat strong { font-size: 72px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-resultat span { color: var(--gris); }
.quiz-note { margin-top: 4px; border: 0; background: none; padding: 4px 0; font-size: 14.5px; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.fin-mots { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--filet); }
.fin-mots h3 { font-size: 18px; letter-spacing: -0.02em; margin: 0 0 4px; }
.fin-mots-aide { margin: 0 0 14px; font-size: 14px; color: var(--gris); }
.fin-mots-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-mot { border: 1px solid var(--filet-fort); padding: 6px 12px; border-radius: var(--r-petit); background: none; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--encre); }
.fin-mot:hover { border-color: var(--encre); }
.fin-mot[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.fin-mot-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 4px; animation: deplier 0.2s ease; }
.fin-mot-detail small { font-style: italic; color: var(--gris); font-size: 13px; }
.fin-mot-detail strong { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.fin-mot-detail p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.fin-mot-detail .en { color: var(--gris); font-size: 14.5px; }
.fin-mot-detail .bouton.discret { box-shadow: none; height: auto; padding: 8px 0 2px; font-size: 14px; }
.fin-mot-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.fin-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--filet); flex-wrap: wrap; }

.fond-feuille { display: none; }
.annonce-immersion {
  position: fixed; top: 20px; left: 50%; z-index: 70;
  transform: translate(-50%, -12px);
  padding: 8px 16px; border-radius: var(--r-petit);
  background: var(--encre); color: var(--papier); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--ombre-flottante);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s var(--sortie);
}
.annonce-immersion.visible { opacity: 1; transform: translate(-50%, 0); }

/* ——— Mode concentration : le texte seul, plus grand ——— */

html.immersion { --taille-texte: clamp(22px, 1vw + 13px, 31px); }
.page-episode .entete { transition: margin-top 0.5s var(--sortie), opacity 0.35s ease; }
.marge, .lexique { transition: opacity 0.35s ease; }
html.immersion .entete { margin-top: calc(-1 * var(--haut-entete) - 1px); opacity: 0; pointer-events: none; }
html.immersion .scene { grid-template-columns: 0 minmax(0, 1fr) 0; }
html.immersion .marge, html.immersion .lexique { opacity: 0; pointer-events: none; overflow: hidden; visibility: hidden; }
html.immersion .feuille-tete { border-bottom-color: transparent; opacity: 0.35; transition: opacity 0.3s ease; }
html.immersion .feuille-tete:hover, html.immersion .feuille-tete:focus-within { opacity: 1; }
html.immersion .pagination { opacity: 0.5; transition: opacity 0.3s ease; }
html.immersion .pagination:hover { opacity: 1; }
html.immersion #b-vocab { display: none !important; }
.outil-immersion .i-sortir, .outil-immersion .libelle-sortir,
html.immersion .outil-immersion .i-entrer, html.immersion .outil-immersion .libelle-entrer { display: none; }
html.immersion .outil-immersion .i-sortir { display: block; }
html.immersion .outil-immersion .libelle-sortir { display: inline; }
@media (hover: none) { html.immersion .feuille-tete, html.immersion .pagination { opacity: 0.75; } }

/* ——— Écrans moyens : une seule marge, à droite ——— */

@media (max-width: 1200px) and (min-width: 901px) {
  .scene { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto minmax(0, 1fr); row-gap: 22px; }
  .feuille { grid-column: 1; grid-row: 1 / -1; }
  .marge { grid-column: 2; grid-row: 1; overflow: visible; gap: 12px; }
  .lexique { grid-column: 2; grid-row: 2; padding-top: 0; }
  .fiche-episode { flex-direction: row; align-items: center; gap: 14px; }
  .fiche-episode .pochette { width: 56px; }
  .fiche-episode .pochette .auteur, .fiche-episode .pochette .maison { display: none; }
  .fiche-episode .pochette .titre { top: auto; bottom: 4%; right: auto; font-size: 56cqw; white-space: nowrap; letter-spacing: -0.06em; line-height: 1; }
  .marge h1 { font-size: 26px; }
  .resume, .lien-raccourcis { display: none; }
  .lien-quiz { padding: 10px 0; }
  html.immersion .scene { grid-template-columns: minmax(0, 1fr) 0; }
  .mode span { display: none; }
  .mode { width: 34px; padding: 0; justify-content: center; }
}

/* ——— Tablette et téléphone : les marges deviennent une feuille qui glisse depuis le bas ——— */

@media (max-width: 900px) {
  .seulement-mobile { display: inline-flex !important; }
  .titre-court { display: block; position: absolute; left: 50%; transform: translateX(-50%); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scene { grid-template-columns: minmax(0, 1fr); padding: 10px var(--gouttiere) 8px; }
  .feuille { grid-column: 1; }
  .colonne {
    display: flex; flex-direction: column; gap: 18px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: min(80dvh, 660px);
    background: var(--surface);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 40px rgba(23, 24, 28, 0.18);
    padding: 20px var(--gouttiere) calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.45s var(--sortie);
  }
  .colonne.ouverte { transform: none; }
  .marge { overflow: visible; gap: 12px; padding-top: 0; flex: none; }
  .fiche-episode { flex-direction: row; align-items: center; gap: 14px; }
  .fiche-episode .pochette { width: 48px; }
  .fiche-episode .pochette .auteur, .fiche-episode .pochette .maison { display: none; }
  .fiche-episode .pochette .titre { top: auto; bottom: 4%; right: auto; font-size: 56cqw; white-space: nowrap; letter-spacing: -0.06em; line-height: 1; }
  .marge h1 { font-size: 24px; }
  .resume, .lien-raccourcis { display: none; }
  .lien-quiz { padding: 10px 0; }
  .lexique { flex: 1; padding-top: 0; }
  .lexique-tete { order: 0; }
  .fond-feuille { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(23, 24, 28, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .fond-feuille.visible { opacity: 1; pointer-events: auto; }

  .lecteur { position: relative; padding-top: 12px; }
  .lecteur .conteneur { grid-template-columns: 1fr; gap: 0; }
  .lecteur .infos { display: none; }
  .lecteur .droite { position: static; }
  .lecteur .vitesse-boite { position: absolute; right: var(--gouttiere); top: 4px; }
  .modes { position: absolute; left: var(--gouttiere); top: 4px; }
  .mode span { display: none; }
  .mode { width: 36px; height: 36px; padding: 0; justify-content: center; }
  html.immersion .scene { grid-template-columns: minmax(0, 1fr); }
  html.immersion .colonne { transform: translateY(105%); }
  html.immersion .feuille-tete { opacity: 0.7; }
  html.immersion .outil-immersion .libelle-sortir { display: none; }
}
@media (max-width: 600px) {
  .titre-court { display: none; }
  .cmd.secondaire { display: none; }
  .feuille-tete { flex-wrap: wrap; row-gap: 6px; }
  .outils { margin-left: auto; }
  .tete-gauche:has(.reprise:not([hidden])) { flex-basis: 100%; }
  .outils-sep { display: none; }
  .traduction { min-height: 62px; }
  .traduction p { font-size: 14.5px; -webkit-line-clamp: 3; }
  .fin { padding: 32px 22px 22px; }
  .invite { font-size: 13px; }
  .page-segments { max-width: none; }
  /* Téléphone : les traits des pages sur toute la largeur, puis, dessous, ‹ 3 / 38 › : avec la traduction, une histoire
     a vite 30 ou 40 pages, et le compteur ne doit jamais sortir de l'écran. */
  .pagination { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "traits traits traits" "avant compteur apres"; gap: 0 8px; margin-top: 8px; padding-top: 6px; }
  .page-segments { grid-area: traits; min-width: 0; gap: 2px; }
  .page-segment { min-width: 0; }
  .page-compteur { grid-area: compteur; }
  .page-fleche[data-sens="-1"] { grid-area: avant; }
  .page-fleche[data-sens="1"] { grid-area: apres; }
}

/* Une seule indication de page (sous le texte), pas deux */
#l-page { display: none; }
#b-vocab span, #b-quiz-mobile span { display: inline !important; }
#b-vocab { width: auto !important; padding: 0 10px !important; }
.titre-court-niveau { margin-left: 8px; font-weight: 500; color: var(--gris); font-size: 13.5px; }
@media (max-width: 600px) {
  .page-episode .marque { display: none; }
  /* Un long titre se coupe (…) au lieu de pousser le menu hors de l'écran : le menu et « Sign in » gardent leur place. */
  .page-episode .titre-court { display: block; position: static; transform: none; max-width: none; font-size: 17px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-episode .entete, .page-episode .entete .conteneur { min-width: 0; max-width: 100%; }
  .page-episode .entete .conteneur { gap: 14px; }
  .page-episode .entete .conteneur > :not(.titre-court) { flex-shrink: 0; }
}

/* Sur grand écran, le titre suffit : pas de miniature de couverture dans la marge */
@media (min-width: 901px) { .fiche-episode .pochette { display: none; } }

/* Raccourcis clavier affichés sous le questionnaire, sur grand écran */
.raccourcis-marge { display: none; }
@media (min-width: 1201px) and (min-height: 700px) {
  .raccourcis-marge { display: block; margin-top: 6px; }
  .raccourcis-marge + .lien-raccourcis { display: none; }
}
.raccourcis-marge h2 { font-size: 13px; font-weight: 600; color: var(--gris); letter-spacing: 0; margin: 0 0 6px; }
.raccourcis-marge dl { margin: 0; }
.raccourcis-marge div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--filet); font-size: 13.5px; }
.raccourcis-marge dd { margin: 0; color: var(--gris); }
.raccourcis-marge kbd { font-size: 11px; padding: 0 5px; }
.astuce b { color: var(--encre); font-weight: 600; }
@media (hover: hover) { .astuce-tactile { display: none; } }

/* Questionnaire verrouillé tant que l'histoire n'a pas été écoutée : la ligne se remplit de vert */
.lien-quiz.verrou { cursor: default; color: var(--gris); background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / var(--entendu, 0%) 2px; }
.lien-quiz.verrou strong { color: var(--gris); }
.lien-quiz.verrou svg { display: none; }
.lien-quiz.verrou::before {
  content: ""; flex: none; order: 2; width: 14px; height: 14px; opacity: 0.7;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lien-quiz.verrou:hover svg { transform: none; }

/* Téléphone (audit du 07/10) : la barre d'outils et la pagination gardent leur taille, avec une zone à toucher de 44 px */
@media (max-width: 760px), (pointer: coarse) {
  .outil, .page-fleche { position: relative; }
  .outil::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .page-fleche::after { content: ""; position: absolute; inset: -5px; }
  .page-segment::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
}

/* Sur un écran tactile : des zones à toucher d'au moins 44 pixels de haut, sans changer la mise en page (la page
   d'une histoire tient toujours dans l'écran) : la zone s'agrandit, le dessin reste le même. */
@media (pointer: coarse), (max-width: 760px) {
  .page-segment::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
  .barre input[type="range"] { height: 44px; margin-top: -13px; margin-bottom: -13px; }
}

/* Sur un écran tactile, pas de sélection de l'iPhone dans le texte de l'histoire (ni son menu Copier, Rechercher…) :
   un appui long sur un mot ouvre sa traduction (episode.js). Le mot appuyé se teinte le temps que la barre est ouverte. */
@media (pointer: coarse) {
  #paragraphes { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}
.mot.mot-appuye { background: var(--accent-pale); border-radius: 4px; box-shadow: 0 0 0 2px var(--accent-pale); }
/* De 761 à 900 px, le menu complet occupe le milieu de la barre : le titre court n'y a pas de place (il passerait dessus).
   Il reste dans la feuille de l'épisode. */
@media (min-width: 761px) and (max-width: 900px) {
  .page-episode .titre-court { display: none; }
}

/* ——— Dans l'espace membre : la barre de gauche reste ———
   Grand écran : une ligne compacte en haut (couverture, titre, progression, outils), le texte au centre, le lecteur
   en bas ; les mots dans un panneau à droite, dont seule la languette dépasse (episode.js : « Le panneau des mots »).
   Téléphone : la page d'écoute prend tout l'écran, comme avant (pas d'onglets en bas : le lecteur est là). */

.lex-detail, .ec-avance, .ec-languette, .ec-panneau-pied { display: none; }
html.espace .lexique-tete h2 small { margin-left: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gris); }

@media (max-width: 900px) {
  html.espace.page-episode body { display: block; padding-bottom: 0; }
  html.espace.page-episode .em-cote, html.espace.page-episode .em-onglets { display: none !important; }
  html.espace.page-episode .entete .marque { display: block !important; }
  html.espace.page-episode .fiche-episode .pochette { width: 64px; }
  html.espace.page-episode .feuille-tete .fiche-episode { display: none; }
}

@media (min-width: 901px) {
  html.espace.page-episode .ecran { height: 100dvh; }
  html.espace.page-episode .entete .conteneur { max-width: none; }
  html.espace.page-episode .scene { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 clamp(24px, 3vw, 40px) 12px; }
  html.espace.page-episode .marge { display: none; }
  html.espace.page-episode .feuille { grid-column: 1; }
  html.espace.page-episode .lecteur .conteneur { max-width: none; padding-inline: clamp(24px, 3vw, 40px); }

  /* La ligne du haut */
  html.espace.page-episode .feuille-tete { gap: 18px; min-height: 0; padding: 0 0 16px; margin-bottom: 18px; }
  html.espace.page-episode .feuille-tete .fiche-episode { flex-direction: row; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
  html.espace.page-episode .feuille-tete .pochette { display: block; width: 44px; flex: none; border-radius: 6px; }
  html.espace.page-episode .feuille-tete .pochette .titre { display: none; }
  html.espace.page-episode .feuille-tete h1 { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.espace.page-episode .feuille-tete .meta { margin-top: 2px; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
  html.espace.page-episode .feuille-tete .meta .pastille { font-size: 12.5px; }
  html.espace.page-episode .tete-gauche { display: none; }
  html.espace.page-episode .tete-gauche:has(.reprise:not([hidden])) { display: flex; }
  html.espace.page-episode .ec-avance { display: block; width: clamp(120px, 14vw, 200px); flex: none; }
  .ec-barre { display: block; height: 4px; border-radius: 2px; background: var(--filet); overflow: hidden; }
  .ec-barre i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .4s linear; }
  .ec-avance small { display: block; margin-top: 5px; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.espace.page-episode .outils { margin-left: auto; }
  html.espace.page-episode #b-vocab { display: none !important; }
  html.espace.page-episode #b-quiz-mobile:not([hidden]) { display: inline-flex !important; }

  /* Le panneau des mots */
  html.espace.page-episode .lexique {
    position: fixed; z-index: 30; right: 0; top: var(--panneau-haut, 120px); bottom: var(--panneau-bas, 96px);
    width: 340px; padding: 20px 22px 16px;
    background: var(--papier); border-left: 1px solid var(--filet);
    box-shadow: -18px 0 40px -28px rgba(23, 24, 28, .35);
    margin-right: -340px; transition: margin-right .38s var(--sortie), box-shadow .38s;
  }
  html.espace.page-episode .lexique:not(.ouvert) { box-shadow: none; }
  html.espace.page-episode .lexique.ouvert { margin-right: 0; }
  html.espace.page-episode .lexique:not(.ouvert) > :not(.ec-languette) { visibility: hidden; transition: visibility 0s .38s; }
  html.espace.page-episode .lexique-tete { border-bottom: 0; padding-bottom: 6px; }
  html.espace.page-episode .lexique h2 { font-size: 17px; letter-spacing: -0.02em; }
  html.espace.page-episode .lexique ul { mask-image: none; }
  html.espace.page-episode .lexique li button { padding: 10px 2px; }
  html.espace.page-episode .lexique li strong { font-size: 17px; }
  html.espace.page-episode .lexique li.actuel button { padding-left: 2px; box-shadow: none; }
  html.espace.page-episode .lexique li.actuel { border-bottom-color: transparent; }
  html.espace.page-episode .lexique li.actuel,
  html.espace.page-episode .lexique li.deplie { background: var(--accent-pale); border-radius: 10px; padding: 0 12px; margin: 4px 0; border-bottom-color: transparent; }
  html.espace.page-episode .lexique li.actuel span, html.espace.page-episode .lexique li.deplie span { color: var(--encre); }
  html.espace.page-episode .lexique li.deplie button, html.espace.page-episode .lexique li.deplie.a-venir button { opacity: 1; }
  html.espace.page-episode .lexique li.deplie .lex-detail { display: block; padding: 0 2px 12px; }
  .lex-detail small { display: block; font-size: 12.5px; font-style: italic; color: var(--gris); }
  .lex-detail p { margin: 4px 0 10px; font-size: 14px; line-height: 1.5; color: var(--encre); }
  .lex-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .lex-ecouter { border: 0; background: none; padding: 4px 0; font: 600 13px var(--sans); color: var(--encre); cursor: pointer; }
  .lex-ecouter:hover { text-decoration: underline; text-underline-offset: 3px; }
  html.espace.page-episode .astuce { margin-top: 14px; }
  html.espace.page-episode .ec-panneau-pied { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); }
  html.espace.page-episode .ec-panneau-pied .lien-suivant { border-bottom: 0; padding: 0; }
  html.espace.page-episode .ec-panneau-pied .lien-raccourcis { margin-top: 0; }

  /* La languette : elle dépasse du bord droit, une flèche au milieu ; elle s'élargit pour annoncer un mot entendu. */
  .ec-languette {
    display: flex; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%);
    align-items: center; gap: 8px; width: max-content; height: 64px; min-width: 30px; padding: 0 8px 0 9px;
    border: 1px solid var(--filet); border-right: 0; border-radius: 14px 0 0 14px;
    background: var(--papier); color: var(--gris); cursor: pointer;
    box-shadow: -8px 0 20px -14px rgba(23, 24, 28, .35);
    transition: color .2s, padding .3s var(--sortie);
  }
  .ec-languette:hover { color: var(--encre); }
  .ec-languette svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--sortie); }
  .lexique.ouvert .ec-languette svg { transform: rotate(180deg); }
  .ec-annonce { display: grid; max-width: 0; overflow: hidden; white-space: nowrap; text-align: left; transition: max-width .45s var(--sortie); }
  .ec-annonce i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); }
  .ec-annonce span { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; color: var(--encre); }
  .ec-languette.dit-mot { padding-right: 16px; }
  .ec-languette.dit-mot .ec-annonce { max-width: 220px; }

  /* Immersion : seulement le texte et le lecteur, la barre de gauche s'efface aussi. */
  html.espace.page-episode.immersion body { grid-template-columns: 0 minmax(0, 1fr); }
  html.espace.page-episode.immersion .em-cote { visibility: hidden; }
  html.espace.page-episode.immersion .lexique { margin-right: -340px; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html.espace.page-episode .lexique, .ec-annonce, .ec-languette { transition: none; }
}

/* La ligne du haut, sans chevauchement : chaque morceau garde sa place ; s'il manque de largeur, les outils passent
   à la ligne suivante. Le retour à toutes les histoires en tête. */
@media (min-width: 901px) {
  html.espace.page-episode .feuille-tete { flex-wrap: wrap; row-gap: 10px; }
  html.espace.page-episode .feuille-tete .fiche-episode { flex: 0 1 auto; min-width: 140px; max-width: 320px; }
  html.espace.page-episode .feuille-tete .fiche-texte { min-width: 0; }
  html.espace.page-episode .feuille-tete .meta { overflow: hidden; text-overflow: ellipsis; }
  html.espace.page-episode .tete-gauche { flex: none; }
  html.espace.page-episode .outils { flex: none; }
  .ec-retour { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; color: var(--gris); }
  .ec-retour:hover { background: var(--surface-2); color: var(--encre); }
  .ec-retour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 900px) { .ec-retour { display: none; } }
/* Sur téléphone et tablette, le retour à toutes les histoires (episode.html), en tête de la barre : ni la barre de
   gauche de l'espace membre ni ses onglets ne sont là. Sur téléphone, il prend la place du nom du site, à côté du titre
   (comme pour un visiteur). */
.retour-histoires { display: none; }
@media (max-width: 900px) {
  .retour-histoires { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0 -8px 0 -10px; border-radius: 50%; color: var(--encre); }
  .retour-histoires:hover { background: var(--surface-2); }
  .retour-histoires svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 600px) {
  html.espace.page-episode .entete .marque { display: none !important; }
}

/* ——— La fin de l'histoire (src/apercu.mjs) : après la dernière page, dans la zone du texte ——— */
.zone > .fin-histoire { position: absolute; inset: 0; z-index: 4; overflow-y: auto; padding: 8px 2px 24px; background: var(--papier); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.zone > .fin-histoire.ouverte { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.zone.fin-ouverte .voile-masque { display: none; }
.plus-loin { display: flex; flex-direction: column; gap: 3px; padding: 0 0 12px; border-bottom: 1px solid var(--filet); }
.plus-loin small { font-size: 12.5px; color: var(--gris); font-weight: 600; margin-bottom: 2px; }
.plus-loin a { color: var(--encre); font-size: 14px; font-weight: 650; text-decoration: none; line-height: 1.35; }
.plus-loin a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plus-loin a span { color: var(--gris-doux); font-weight: 500; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .zone > .fin-histoire { transition: none; transform: none; } }

/* ——— Le guide de la première histoire (public/guide-histoire.js) ———
   Un voile sombre laisse voir l'élément montré ; une bulle explique, avec ses étapes, « Skip the tour » et « Next ». */
.panneau-guide { border: 0; border-top: 0; margin-top: 8px; padding: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.raccourcis-guide { display: inline-block; margin-top: 18px; font-size: 14px; }
.gd-bouclier { position: fixed; inset: 0; z-index: 899; }
.gd-voile { position: fixed; z-index: 900; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(14, 15, 18, .52); pointer-events: none; }
.gd-voile.rond { border-radius: 999px; }
.gd-anneau { position: fixed; z-index: 901; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 28%, transparent); animation: gd-pulse 1.6s ease-in-out infinite; }
@keyframes gd-pulse { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent); } }
.gd-bulle { position: fixed; z-index: 902; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--encre); border-radius: 16px; padding: 18px 20px 16px;
  box-shadow: 0 2px 6px rgba(23, 24, 28, .08), 0 28px 70px -18px rgba(23, 24, 28, .45); font-family: var(--sans); animation: gd-entre .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes gd-entre { from { opacity: 0; transform: translateY(6px); } }
.gd-bulle::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); left: var(--fleche-x, 50%); margin-left: -7px; }
.gd-bulle.dessus::after { bottom: -7px; }
.gd-bulle.dessous::after { top: -7px; }
.gd-etape { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gris); margin-bottom: 8px; }
.gd-etape i { width: 6px; height: 6px; border-radius: 50%; background: var(--filet-fort); }
.gd-etape i.ici { width: 16px; border-radius: 3px; background: var(--accent); }
.gd-etape span { margin-left: auto; }
.gd-nouveau { font-size: 12px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 9px; border-radius: 99px; }
.gd-bulle h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 6px; }
.gd-bulle p { font-size: 15px; line-height: 1.45; color: var(--gris); margin: 0; }
.gd-bulle p.gd-bravo { color: var(--accent); font-weight: 600; }
.gd-essai { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 13.5px; font-weight: 600; }
.gd-essai i { width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--accent); animation: lg-pouls 1.6s ease-out infinite; }
.gd-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.gd-passer, .gd-montrer { border: 0; background: none; font: inherit; font-size: 14px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; }
.gd-suivant { border: 0; background: var(--encre); color: var(--papier); font: inherit; font-size: 14.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.gd-suivant:focus-visible, .gd-passer:focus-visible, .gd-montrer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gd-bulle, .gd-anneau, .gd-essai i { animation: none; } }

/* L'histoire qui revient (src/reecoutes.mjs) : l'écoute sans le texte, ce qu'on a compris, la comparaison. */
.voile-masque .rq-date { display: block; font-size: 13px; color: var(--gris); margin-bottom: 10px; }
.rq-choix { display: grid; gap: 8px; margin: 0 0 6px; }
.rq-choix button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 12px; background: transparent; font: inherit; font-size: 17px; color: var(--encre); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rq-choix button:hover:not(:disabled) { border-color: var(--encre); }
.rq-choix button:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.rq-choix button:disabled { cursor: default; }
.rq-choix button.pris { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rq-jauge { display: inline-flex; gap: 3px; flex: none; }
.rq-jauge i { width: 6px; height: 16px; border-radius: 2px; background: var(--filet); }
.rq-jauge i.plein { background: var(--accent); }
.rq-premiere { margin: -8px 0 28px; }
.rq-compare { display: grid; margin: 0 0 18px; border-top: 1px solid var(--filet); }
.rq-compare > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.rq-compare small { display: block; color: var(--gris); font-size: 13px; }
.rq-compare b { font-size: 17px; }
.rq-compare .rq-jauge i { width: 8px; height: 20px; }
.rq-suite { color: var(--gris); margin: 0; font-size: 15.5px; }
.rq-erreur { color: var(--rouge, #b42318); font-size: 14.5px; margin: 8px 0 0; }
.fin-reecoute .fin-bravo p { color: var(--gris); margin: 12px 0 0; font-size: 17px; }

/* Mes phrases difficiles : l'encadré de « Bravo », l'exercice (écouter, morceau par morceau, en entier), le bandeau. */
.pd-fin { margin: 0 0 28px; padding: 18px 20px; border-radius: 14px; background: var(--surface-2); }
.pd-fin h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.pd-fin > p { margin: 0 0 12px; color: var(--gris); font-size: 15px; }
.pd-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.pd-liste li { font-size: 16px; line-height: 1.4; padding-left: 14px; position: relative; }
.pd-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pd-liste small { color: var(--gris); font-size: 13px; margin-left: 4px; }
.pd-fin .bouton { width: 100%; justify-content: center; }
.pd { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px 30px 24px; border: 0; border-radius: var(--r-surface, 20px); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); }
.pd::backdrop { background: rgba(23, 24, 28, .32); }
.pd[open] { animation: fenetre-entree 0.45s var(--sortie); }
.pd-tete { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--gris); margin-bottom: 18px; }
.pd-barre { flex: 1; height: 4px; border-radius: 4px; background: var(--filet); overflow: hidden; }
.pd-barre i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--sortie); }
.pd-fermer { border: 0; background: none; padding: 4px; color: var(--gris); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.pd-fermer svg { width: 18px; height: 18px; }
.pd-fermer:hover { color: var(--encre); }
.pd-etapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; }
.pd-etapes li { padding: 5px 11px; border-radius: 99px; color: var(--gris); border: 1px solid var(--filet); }
.pd-etapes li.fait { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pd-etapes li.ici { color: var(--surface); background: var(--encre); border-color: var(--encre); }
.pd h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.pd-consigne { margin: 0 0 20px; color: var(--gris); font-size: 15.5px; }
.pd-phrase { display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; min-height: 70px; padding: 20px 22px; border-radius: 14px; background: var(--surface-2); font-size: 24px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600; margin-bottom: 18px; }
.pd-cache { display: inline-block; max-width: 100%; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--encre) 14%, transparent); }
.pd-morceau { display: inline-block; max-width: 100%; box-sizing: border-box; border-radius: 8px; padding: 2px 6px; margin: -2px -2px; }
.pd-morceau.ici { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.pd-morceau.ici .pd-cache { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pd-sep { color: color-mix(in srgb, var(--encre) 25%, transparent); font-weight: 400; }
.pd-en { margin: -6px 0 20px; color: var(--gris); font-size: 15px; }
.pd-en b { font-size: 11.5px; color: var(--encre); margin-right: 8px; }
.pd-jouer { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pd-jouer button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--filet); background: transparent; font: inherit; font-weight: 600; font-size: 15px; color: var(--encre); cursor: pointer; }
.pd-jouer button:hover { border-color: var(--encre); }
.pd-jouer button.fort { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.pd-jouer button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pd-jouer button:focus-visible, .pd-fermer:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-jouer svg { width: 16px; height: 16px; }
.pd-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--filet); flex-wrap: wrap; }
.pd-note { color: var(--gris); font-size: 14px; }
.pd-bilan { display: grid; margin: 4px 0 20px; }
.pd-bilan div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--filet); font-size: 16px; }
.pd-etat { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.pd-etat.encore { color: var(--rouge); }
.pd-bandeau { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 14.5px; }
.pd-bandeau b { color: var(--accent); font-weight: 600; }
.pd-bandeau q { quotes: "« " " »"; color: var(--encre); }
.pd-bandeau-actions { margin-left: auto; display: inline-flex; gap: 12px; align-items: baseline; }
.pd-bandeau button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pd-bandeau .pd-oublier { text-decoration: none; color: var(--gris); font-size: 18px; line-height: 1; }
@media (max-width: 640px) {
  .pd { padding: 20px 18px; }
  .pd-phrase { font-size: 20px; padding: 16px; }
  .pd h2 { font-size: 22px; }
  .pd-pied .bouton { flex: 1; justify-content: center; }
}

/* Le texte en trois crans (tout, mots-clés, rien) : le réglage de la barre d'outils, les blancs, l'aide. */
.crans { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-2); gap: 2px; flex: none; }
.cran { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 99px; background: none; color: var(--gris); font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.cran[hidden] { display: none; }
.cran:hover { color: var(--encre); }
.cran[aria-pressed="true"] { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: 0 1px 3px rgba(23, 24, 28, .14); }
.cran:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.cran svg { width: 15px; height: 15px; flex: none; }
@container (max-width: 740px) {
  .cran span { display: none; }
  .cran { padding: 0 9px; }
}
/* La ligne du haut trop pleine (episode.js, ajusterTete) : les crans, puis les outils, en icônes seules */
.feuille-tete.serre .cran span { display: none; }
.feuille-tete.serre .cran { padding: 0 9px; }
.feuille-tete.tres-serre .outil span:not(.outil-aa) { display: none; }
.feuille-tete.tres-serre .outil { width: 34px; padding: 0; justify-content: center; }
#texte.cles .phrase .mot.a-entendre { color: transparent; text-decoration: none; border-radius: 5px; background: color-mix(in srgb, var(--encre) 9%, transparent); cursor: pointer; transition: color .2s, background-color .2s; }
#texte.cles .phrase.active .mot.a-entendre { background: color-mix(in srgb, var(--accent) 22%, transparent); }
#texte.cles .phrase .mot.a-entendre.vu { color: var(--gris); background: transparent; }
.aide-cles { position: absolute; z-index: 40; width: 290px; padding: 14px 16px; border-radius: 14px; background: var(--encre); color: var(--surface); font-size: 14.5px; line-height: 1.45; box-shadow: var(--ombre-flottante); }
.aide-cles b { display: block; margin-bottom: 3px; }
.aide-cles button { display: block; margin-top: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aide-cles::before { content: ""; position: absolute; top: -6px; left: var(--fleche, 50%); width: 12px; height: 12px; background: var(--encre); transform: translateX(-50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .cran, #texte.cles .phrase .mot.a-entendre { transition: none; } }