:root {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --glass: rgba(255, 255, 255, .86);
  --ink: #1c1c1a;
  --ink-soft: #5b5b56;
  --line: #e5e4df;
  --accent: #c2410c;
  --accent-soft: #fde9df;
  --tip: #0f766e;
  --tip-bg: #e6f4f1;
  --warn: #b45309;
  --warn-bg: #fbeecb;
  --radius: 12px;
  --reading: 44rem;
  --topbar-h: 3.25rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Encoches et barre gestuelle. Isolées ici pour être combinables dans des
     calc()/max() sans répéter env() partout. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --edge-fade: rgba(0, 0, 0, .17);
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a;
    --panel: #1f1f23;
    --glass: rgba(31, 31, 35, .88);
    --ink: #ececea;
    --ink-soft: #a1a19b;
    --line: #33333a;
    --accent: #fb923c;
    --accent-soft: #3a2415;
    --tip: #5eead4;
    --tip-bg: #123330;
    --warn: #fbbf24;
    --warn-bg: #362a12;
    --edge-fade: rgba(255, 255, 255, .16);
    /* L'accent clair du thème sombre exige un texte sombre pour rester lisible. */
    --on-accent: #17171a;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;   /* pas de gonflage du texte en paysage sur iOS */
  text-size-adjust: 100%;
}

#app { display: flex; height: 100vh; overflow: hidden; }
@supports (height: 100dvh) { #app { height: 100dvh; } }

/* ---- Barre supérieure (mobile) ----
   Masquée sur grand écran, où les rails sont visibles en permanence. */
#topbar { display: none; }
#topbar .live-dot { margin-left: .55rem; margin-right: .3rem; }
#topbar-title {
  flex: 1; min-width: 0;
  font-weight: 700; font-size: 1rem; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { background: var(--bg); }
/* Pastille « séance aujourd'hui » sur le bouton de navigation. */
#nav-toggle { position: relative; }
#nav-toggle.has-today::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel);
}
.icon-btn svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

/* ---- Colonnes de navigation ----
   Deux rails distincts : les pages de référence à gauche, les séances (datées,
   avec leur calendrier) à droite. Séparer les deux évite qu'une liste de séances
   qui s'allonge repousse les pages générales hors de l'écran. */
#nav { display: flex; flex: 0 0 auto; min-height: 0; }
#nav-head { display: none; }
.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#rail-generic { width: 226px; flex: 0 0 226px; }
#rail-sessions { width: 276px; flex: 0 0 276px; }

#brand {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.brand-mark { font-size: 1.25rem; }
.brand-name { letter-spacing: .2px; }
.live-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  transition: background .3s;
}
.live-dot.flash { animation: pulse .9s ease-out; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}

/* En-tête de la colonne séances — rappelle la date du jour, référence de tout le
   repérage « aujourd'hui / à venir » juste en dessous. */
.rail-head {
  padding: .85rem 1.1rem .8rem;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .1rem;
}
.rail-title { font-weight: 700; letter-spacing: .2px; }
.rail-sub { font-size: .72rem; color: var(--ink-soft); }
/* Le calendrier reste en haut, seul l'agenda défile : la vue d'ensemble ne doit
   jamais sortir de l'écran quand l'historique s'allonge. */
#sessions-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#calendar { flex: 0 0 auto; }
#tablist-sessions { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

#tablist-generic { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.tablist { padding: .6rem; }
.rail-empty {
  margin: .1rem .55rem .4rem;
  font-size: .74rem; line-height: 1.45; color: var(--ink-soft);
}
.tab-group-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 700;
  padding: .9rem .55rem .35rem;
}
.tab-group-label:first-child { padding-top: .35rem; }
.group-note { letter-spacing: 0; opacity: .65; }
.tab {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font: inherit;
  padding: .5rem .6rem; border-radius: 8px; margin-bottom: 2px;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.tab:active { background: var(--bg); }
.tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab .tab-title { display: block; }
.tab .tab-meta {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  font-size: .72rem; color: var(--ink-soft); margin-top: 2px;
}
.tab .tab-date { color: var(--ink-soft); }
.tab.active .tab-date { color: var(--accent); opacity: .8; }
/* Badge de sport — n'apparaît que si plusieurs sports sont actifs.
   Réutilise les couleurs de callout, déjà déclinées en clair et sombre. */
.tab-sport {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .3rem; border-radius: 4px;
  background: var(--bg); color: var(--ink-soft); white-space: nowrap;
}
.tab-sport[data-sport="natation"] { background: var(--tip-bg); color: var(--tip); }
.tab-sport[data-sport="cyclisme-route"] { background: var(--warn-bg); color: var(--warn); }

/* Chip relative (« aujourd'hui », « demain », « dans 3 j ») — ce qui situe la
   séance dans le temps sans avoir à calculer depuis la date. */
.tab-rel {
  font-size: .68rem; padding: .05rem .3rem; border-radius: 4px;
  background: var(--bg); color: var(--ink-soft); white-space: nowrap;
}

/* États d'une séance dans l'agenda */
.tab.is-today { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.tab.is-today .tab-rel { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tab.is-next { box-shadow: inset 2px 0 0 var(--ink-soft); }
.tab.is-next .tab-rel { color: var(--ink); }
.tab.is-past { color: var(--ink-soft); }
.tab.is-past.active { color: var(--accent); }

/* ---- Bandeau calendrier ----
   La semaine en cours et les suivantes, un point coloré par séance : on voit
   d'un coup d'œil où sont les jours chargés et lesquels sont libres. */
/* max-width : au-delà, les cases s'étirent et la grille se lit moins bien qu'un
   petit bloc compact (cas des largeurs intermédiaires où le rail s'élargit). */
#calendar { padding: .7rem .6rem .55rem; max-width: 320px; border-bottom: 1px solid var(--line); }
#calendar:empty { padding: 0; border-bottom: 0; }
.cal-caption {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 700; padding: 0 .1rem .45rem;
}
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head { margin-bottom: 2px; }
.cal-dow {
  text-align: center; font-size: .62rem; font-weight: 700;
  color: var(--ink-soft); opacity: .7;
}
.cal-grid { display: flex; flex-direction: column; gap: 2px; }
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 0 5px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-soft); font: inherit;
}
button.cal-day { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.cal-day:active { background: var(--bg); }
.cal-num { font-size: .72rem; line-height: 1; }
.cal-dots { display: flex; gap: 2px; height: 5px; align-items: center; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.dot[data-sport="natation"] { background: var(--tip); }
.dot[data-sport="cyclisme-route"] { background: var(--warn); }
.cal-day.has-session { color: var(--ink); font-weight: 600; background: var(--bg); }
.cal-day.is-past { opacity: .42; }
.cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent); font-weight: 700;
}
.cal-day.is-active { background: var(--accent-soft); color: var(--accent); }

#side-foot {
  padding: .6rem 1.1rem; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--ink-soft);
}

/* Le survol n'a de sens qu'avec un pointeur : sur écran tactile il reste collé
   après le tap et fait croire à une sélection. */
@media (hover: hover) {
  .tab:hover { background: var(--bg); }
  button.cal-day:hover { background: var(--bg); }
  .icon-btn:hover { background: var(--bg); }
  .pg:hover { border-color: var(--ink-soft); }
}

/* ---- Content ---- */
#content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.doc {
  --doc-pad: 2rem;
  max-width: var(--reading);
  margin: 0 auto;
  padding: 3rem var(--doc-pad) 6rem;
  line-height: 1.68;
  font-size: 1.02rem;
}
.doc.empty { color: var(--ink-soft); }

/* Titres fluides : la même échelle se resserre progressivement jusqu'au mobile,
   sans marche d'escalier à un point de rupture. */
.doc h1 {
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 1.9rem);
  line-height: 1.18; margin: 0 0 .3rem; text-wrap: balance;
}
.doc h2 {
  font-size: clamp(1.15rem, 1.02rem + .7vw, 1.3rem);
  margin: 2.4rem 0 .8rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.doc h3 {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.08rem);
  margin: 1.8rem 0 .6rem; text-wrap: balance;
}
.doc p { margin: .9rem 0; }
.doc a { color: var(--accent); }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: .35rem 0; }
.doc img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.4rem 0; }
.doc video, .doc iframe { max-width: 100%; border-radius: var(--radius); margin: 1.4rem 0; border: 0; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.doc blockquote {
  margin: 1.4rem 0; padding: .2rem 1.1rem;
  border-left: 3px solid var(--line); color: var(--ink-soft);
}
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg); padding: .12em .4em; border-radius: 5px; font-size: .9em;
}
.doc pre {
  background: var(--panel); border: 1px solid var(--line);
  padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto;
}
.doc pre code { background: none; padding: 0; }
/* Mot à rallonge (nom de séance, URL) : il déborderait de la colonne sur mobile. */
.doc p, .doc li, .doc td, .doc th, .doc h1, .doc h2, .doc h3 { overflow-wrap: break-word; }

.doc table {
  width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem;
}
.doc th, .doc td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.doc th { background: var(--bg); font-weight: 600; }
/* Tout tableau est enveloppé par app.js : si les colonnes ne rentrent pas, on
   défile horizontalement au lieu de déborder de la page. */
.table-scroll { margin: 1.4rem 0; }
/* Schémas SVG dessinés dans un viewBox large : app.js leur fixe une largeur
   minimale pour que les libellés restent lisibles, la figure défile si besoin. */
.table-scroll, .figure-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  /* Ombre au bord du côté où il reste du contenu caché — sans elle, rien ne dit
     qu'un tableau ou un schéma se prolonge hors écran. Les deux dégradés « local »
     suivent le contenu et masquent l'ombre quand on est en butée. */
  background:
    linear-gradient(to right, var(--bg) 40%, rgba(0, 0, 0, 0)) left center,
    linear-gradient(to left, var(--bg) 40%, rgba(0, 0, 0, 0)) right center,
    radial-gradient(farthest-side at 0 50%, var(--edge-fade), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, var(--edge-fade), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 11px 100%, 11px 100%;
  background-attachment: local, local, scroll, scroll;
  background-origin: border-box;
}

/* Checklists (GFM task lists) */
.doc li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.4rem; }
.doc input[type=checkbox] { margin-right: .55rem; transform: scale(1.15); accent-color: var(--accent); }

/* Encadrés — le coach peut écrire <div class="callout tip|warn"> ... </div> */
.callout {
  margin: 1.4rem 0; padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid transparent;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout.tip { background: var(--tip-bg); }
.callout.tip strong:first-child { color: var(--tip); }
.callout.warn { background: var(--warn-bg); }
.callout.warn strong:first-child { color: var(--warn); }

/* ---- Enchaînement page à page (mobile) ---- */
#pager { display: none; }
.pg {
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 56px; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pg:active { background: var(--bg); }
.pg-next { grid-column: 2; text-align: right; align-items: flex-end; }
.pg-dir {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 700;
}
.pg-title {
  font-size: .88rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Écran de mot de passe ----
   N'apparaît que si le serveur répond 401 sur /data/ (donc jamais en local). */
#login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: max(1.5rem, var(--safe-l)) max(1.2rem, var(--safe-r));
  background: var(--bg);
}
/* Le sélecteur d'id l'emporterait sur le display:none de l'attribut hidden. */
#login[hidden] { display: none; }
body.locked { overflow: hidden; }
#login-form {
  width: 100%; max-width: 21rem;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.6rem 1.4rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .1);
  text-align: center;
}
/* L'icône de l'app plutôt qu'un emoji : sur l'écran de connexion c'est le seul
   graphisme, il ne peut pas dépendre de la police emoji de l'appareil. */
.login-mark { width: 56px; height: 56px; border-radius: 13px; align-self: center; margin-bottom: .2rem; }
#login-form h1 { font-size: 1.25rem; margin: 0; }
#login-msg { margin: 0 0 .2rem; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
#login-msg.is-error { color: var(--accent); font-weight: 600; }
#login-pw {
  font: inherit; font-size: 1.05rem;   /* ≥ 16 px : sinon iOS zoome sur le champ */
  min-height: 46px; padding: .65rem .8rem; text-align: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink);
}
#login-pw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#login-go {
  font: inherit; font-weight: 600; font-size: 1rem;
  min-height: 46px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#login-go:active { filter: brightness(.94); }
#login-go:disabled { opacity: .6; }

/* ---- Tiroir (mobile) : masqué hors mode mobile ---- */
#scrim { display: none; }

/* ============================================================
   Largeurs intermédiaires — les rails se resserrent.
   ============================================================ */
@media (max-width: 1180px) {
  #rail-generic { width: 194px; flex: 0 0 194px; }
  #rail-sessions { width: 244px; flex: 0 0 244px; }
  .doc { --doc-pad: 1.7rem; padding-top: 2.4rem; }
}

/* ============================================================
   Mobile / tablette portrait — la navigation devient un tiroir.
   Le document occupe tout l'écran : c'est lui qu'on vient lire, il ne doit
   jamais démarrer sous deux listes d'onglets. C'est la page qui défile (et non
   une colonne interne) pour que le navigateur puisse escamoter sa propre barre.
   ============================================================ */
@media (max-width: 900px) {
  html, body { height: auto; }
  body { min-height: 100%; }

  #topbar {
    display: flex; align-items: center; gap: .25rem;
    position: sticky; top: 0; z-index: 30;
    min-height: calc(var(--topbar-h) + var(--safe-t));
    padding: var(--safe-t) max(.5rem, var(--safe-r)) 0 max(.5rem, var(--safe-l));
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line);
  }

  #app { display: block; height: auto; overflow: visible; }

  #nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    width: min(88vw, 22rem);
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--line);
    box-shadow: 6px 0 28px rgba(0, 0, 0, .16);
    padding-left: var(--safe-l);
    transform: translateX(-100%);
    visibility: hidden;                  /* sort aussi du parcours de tabulation */
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility .26s;
  }
  body.nav-open #nav { transform: none; visibility: visible; }

  #scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 0, 0, .42);
    opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  body.nav-open #scrim { opacity: 1; pointer-events: auto; touch-action: none; }

  /* Une seule liste à la fois dans le tiroir : le sélecteur remplace le
     défilement interminable « pages puis calendrier puis séances ». */
  #nav-head {
    display: flex; align-items: center; gap: .4rem;
    padding: max(.55rem, var(--safe-t)) .5rem .55rem .6rem;
    border-bottom: 1px solid var(--line);
  }
  #nav-segs {
    display: flex; flex: 1; gap: 2px;
    background: var(--bg); border-radius: 10px; padding: 3px;
  }
  .seg {
    flex: 1; min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-soft);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .seg[aria-pressed="true"] {
    background: var(--panel); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  }
  .seg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

  #nav .rail {
    width: auto; flex: 1 1 auto; min-height: 0;
    border-right: 0; border-bottom: 0;
  }
  #nav[data-seg="generic"] #rail-sessions,
  #nav[data-seg="sessions"] #rail-generic { display: none; }
  /* Le sélecteur nomme déjà la liste affichée : le titre du rail et l'intitulé de
     groupe deviendraient du bruit répété deux fois de suite. */
  #brand, #side-foot, .rail-title, #tablist-generic .tab-group-label { display: none; }
  .rail-head { padding: .55rem 1rem .5rem; }
  .rail-sub { font-size: .76rem; }
  .tablist { padding: .5rem .55rem calc(1rem + var(--safe-b)); }
  #tablist-generic { padding-top: .7rem; }

  /* Cibles tactiles : 44 px minimum, sinon on rate l'onglet visé. */
  .tab { padding: .6rem .65rem; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .tab .tab-meta { margin-top: 3px; }

  #calendar { max-width: none; padding: .8rem .7rem .7rem; }
  .cal-day { padding: 7px 0 8px; min-height: 42px; border-radius: 9px; }
  .cal-num { font-size: .82rem; }
  .cal-dow { font-size: .66rem; }
  .dot { width: 6px; height: 6px; }
  .cal-dots { height: 6px; }

  /* ---- Lecture ----
     17 px et un interlignage plus aéré : c'est la taille où une consigne de
     séance se lit d'une traite au bord du bassin, sans zoomer. */
  #content { overflow: visible; }
  .doc {
    --doc-pad: max(1.15rem, var(--safe-l), var(--safe-r));
    padding: 1.5rem var(--doc-pad) 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.72;
  }
  .doc h1, .doc h2, .doc h3 { scroll-margin-top: calc(var(--topbar-h) + var(--safe-t) + .5rem); }
  .doc h2 { margin-top: 2rem; }
  .doc h3 { margin-top: 1.5rem; }
  .doc ul, .doc ol { padding-left: 1.25rem; }
  .doc li { margin: .4rem 0; }
  .doc hr { margin: 2rem 0; }
  .doc blockquote { padding: .2rem .9rem; }
  .doc pre { font-size: .88rem; padding: .85rem .9rem; }
  .callout { padding: .85rem .95rem; margin: 1.2rem 0; }
  .doc img, .doc video, .doc iframe { margin: 1.2rem 0; }

  /* Tableaux et schémas débordent jusqu'aux bords de l'écran : quelques
     millimètres gagnés de chaque côté changent la lisibilité d'une grille. */
  .table-scroll, .figure-scroll {
    margin-inline: calc(-1 * var(--doc-pad));
    padding-inline: var(--doc-pad);
  }
  /* …sauf dans un encadré, où déborder ferait sortir du cadre coloré. */
  .callout .table-scroll, .callout .figure-scroll { margin-inline: 0; padding-inline: 0; }
  .figure-scroll > svg { min-width: var(--fig-min, 0); }
  .doc th, .doc td { padding: .45rem .6rem; }
  .doc table { font-size: .93rem; }

  #pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    max-width: var(--reading); margin: 0 auto;
    padding: .5rem max(1.15rem, var(--safe-l), var(--safe-r)) calc(2.5rem + var(--safe-b));
  }
}

/* ============================================================
   Téléphone — les tableaux à 3 colonnes ou plus se lisent en cartes.
   Une grille de 4 colonnes sur 360 px donne des mots coupés en trois ;
   empilée, chaque ligne (un bloc de séance) redevient une unité de lecture.
   ============================================================ */
@media (max-width: 620px) {
  .table-scroll[data-cards] {
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .table-scroll[data-cards] table,
  .table-scroll[data-cards] tbody,
  .table-scroll[data-cards] tr,
  .table-scroll[data-cards] td { display: block; }
  .table-scroll[data-cards] thead { display: none; }
  .table-scroll[data-cards] table { width: auto; border-collapse: separate; font-size: 1rem; }
  .table-scroll[data-cards] tr {
    margin: .7rem 0; padding: .8rem .9rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel);
  }
  .table-scroll[data-cards] td { border: 0; padding: 0; text-align: left; }
  .table-scroll[data-cards] td + td { margin-top: .6rem; }
  /* Première colonne = l'identité de la ligne (le bloc, le jour) : elle sert de
     titre à la carte, son en-tête n'apporte rien. */
  .table-scroll[data-cards] td:first-child {
    font-size: 1.02rem; font-weight: 600; line-height: 1.35;
  }
  .table-scroll[data-cards] td:not(:first-child)::before {
    content: attr(data-label);
    display: block; margin-bottom: .1rem;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; color: var(--ink-soft);
  }
  .table-scroll[data-cards] td[data-label=""]::before { content: none; }
  .table-scroll[data-cards] td:empty { display: none; }

  .doc { --doc-pad: max(1.05rem, var(--safe-l), var(--safe-r)); }

  /* Deux boutons côte à côte sur un téléphone laissent 150 px par titre, coupé au
     milieu d'un mot : pleine largeur, on lit où l'on va. */
  #pager { grid-template-columns: 1fr; }
  .pg-next { grid-column: 1; }
}

@media (max-width: 380px) {
  .doc { --doc-pad: max(.9rem, var(--safe-l), var(--safe-r)); font-size: 1.04rem; }
  #nav { width: 92vw; }
}

/* Paysage sur téléphone : la hauteur est la ressource rare. */
@media (max-width: 900px) and (max-height: 460px) {
  :root { --topbar-h: 2.75rem; }
  .doc { padding-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #nav, #scrim { transition: none; }
  .live-dot.flash { animation: none; }
}