@charset "UTF-8";
/* ==========================================================================
   Révisions médecine — feuille de style
   Direction : « la lame ». Palette dérivée de la coloration hématoxyline-
   éosine (histologie) : violets profonds, roses tissulaires, verre de lame.
   Le niveau de maîtrise est encodé par l'intensité de la teinte, pas par un
   feu tricolore — plus la teinte est profonde, mieux c'est acquis.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
  /* Encres */
  --ink: #22192b;
  --ink-2: #6b5e77;
  --ink-3: #9c90a6;

  /* Fonds */
  --slide: #fbfafc;
  --paper: #ffffff;
  --wash: #f5f1f7;

  /* Filets */
  --rule: #eae4ee;
  --rule-strong: #d9d0df;

  /* Accents */
  --eosin: #b14c6b;
  --eosin-soft: #f7ecf0;
  --haematin: #4a3a6b;

  /* Rampe de maîtrise (une seule teinte, quatre intensités) */
  --m0: transparent;
  --m1: #f4e4ea;
  --m2: #dda2b7;
  --m3: #8e3e5c;
  --m0-edge: var(--rule-strong);
  --m1-ink: var(--ink);
  --m2-ink: #3d1c2a;
  --m3-ink: #ffffff;

  /* Rythme (base 4) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 56px);
  --shell: 1120px;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;


  /* Os en 3D : deux teintes par état, interpolées selon l'éclairage. */
  --os-clair: #fffcfa;
  --os-sombre: #937a87;
  --os-survol-clair: #fdeaf0;
  --os-survol-sombre: #ab6d83;
  --os-choisi-clair: #f6c3d3;
  --os-choisi-sombre: #8e3e5c;
  /* Pièce de substitution : teinte neutre, pour qu'on voie qu'elle n'est pas réelle. */
  --os-schema-clair: #e4dfe8;
  --os-schema-sombre: #6f6878;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="clair"]) {
    --ink: #ece5f1;
    --ink-2: #a89bb4;
    --ink-3: #7d7188;
    --slide: #171320;
    --paper: #1d1728;
    --wash: #241d31;
    --rule: #2f2740;
    --rule-strong: #403654;
    --eosin: #e6a3b8;
    --eosin-soft: #2a1f2c;
    --haematin: #b7a4dd;
    --m1: #4a3547;
    --m2: #8f5b70;
    --m3: #e5a8bc;
    --m1-ink: var(--ink);
    --m2-ink: #ffffff;
    --m3-ink: #24101a;

    --os-clair: #f6ecf1;
    --os-sombre: #5d4a56;
    --os-survol-clair: #f7dde6;
    --os-survol-sombre: #6d4657;
    --os-choisi-clair: #ffc9d9;
    --os-choisi-sombre: #7d3350;
    --os-schema-clair: #4f4a58;
    --os-schema-sombre: #2e2a36;
  }
}

:root[data-mode="sombre"] {
  --ink: #ece5f1;
  --ink-2: #a89bb4;
  --ink-3: #7d7188;
  --slide: #171320;
  --paper: #1d1728;
  --wash: #241d31;
  --rule: #2f2740;
  --rule-strong: #403654;
  --eosin: #e6a3b8;
  --eosin-soft: #2a1f2c;
  --haematin: #b7a4dd;
  --m1: #4a3547;
  --m2: #8f5b70;
  --m3: #e5a8bc;
  --m1-ink: var(--ink);
  --m2-ink: #ffffff;
  --m3-ink: #24101a;

  --os-clair: #f6ecf1;
  --os-sombre: #5d4a56;
  --os-survol-clair: #f7dde6;
  --os-survol-sombre: #6d4657;
  --os-choisi-clair: #ffc9d9;
  --os-choisi-sombre: #7d3350;
  --os-schema-clair: #4f4a58;
  --os-schema-sombre: #2e2a36;
}

/* --- Socle -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--slide);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--eosin);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--m2);
  color: var(--m2-ink);
}

.u-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-hidden {
  display: none !important;
}

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Micro-libellé : la voix « étiquette de spécimen » de l'interface. */
.u-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Grecques : « β-oxydation » sous text-transform donnerait « Β-OXYDATION », et
   la capitale grecque est indiscernable d'un B latin. prose() enrobe donc les
   grecques ici pour les laisser telles quelles, casse comprise. */
.u-casse-non {
  text-transform: none;
}

/* Filet inter-bloc */
.u-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* --- Bandeau ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--slide) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.masthead__in {
  display: flex;
  align-items: baseline;
  gap: var(--s6);
  min-height: 62px;
  padding-block: var(--s3);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Le monogramme est le cœur et son tracé. Le cœur emprunte le haut de la rampe
   de maîtrise, qui s'éclaircit en mode sombre ; le tracé prend la couleur du
   papier, donc le contraste reste maximal dans les deux thèmes sans règle en
   double. */
.wordmark__glyph {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.wordmark__coeur {
  fill: var(--m3);
}

.wordmark__trace {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wordmark__text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  align-items: baseline;
  flex-wrap: wrap;
}

.nav__item {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-2);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav__item:hover {
  color: var(--ink);
}

.nav__item[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--eosin);
}

/* État de la sauvegarde : discret, mais elle doit pouvoir vérifier d'un
   coup d'œil que son travail est bien parti sur le serveur. */
.sync {
  font-size: 11.5px;
  color: var(--ink-3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.sync::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
  transform: translateY(-1px);
}

.sync[data-etat="ok"]::before {
  background: var(--m3);
}

.sync[data-etat="envoi"]::before {
  background: var(--m2);
}

.sync[data-etat="erreur"] {
  color: var(--eosin);
}

.sync[data-etat="erreur"]::before {
  background: var(--eosin);
}

/* Bascule clair / sombre : un cercle à moitié plein. L'état n'est pas écrit,
   il est montré — le demi-disque pivote d'un demi-tour. Le libellé accessible
   décrit l'action, lui, et vit dans l'aria-label. */
.mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.mode:hover {
  color: var(--ink);
  background: var(--wash);
}

.mode__ico {
  width: 17px;
  height: 17px;
  display: block;
  transition: transform 0.32s var(--ease);
}

.mode__ico circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.mode__ico path {
  fill: currentColor;
}

/* Le pivot suit le mode EFFECTIF : choix explicite, ou préférence système. */
:root[data-mode="sombre"] .mode__ico {
  transform: rotate(180deg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="clair"]) .mode__ico {
    transform: rotate(180deg);
  }
}

/* --- Vues --------------------------------------------------------------- */

.view {
  padding-block: var(--s8) var(--s9);
}

.view[hidden] {
  display: none;
}

/* --- Ouverture : la thèse ---------------------------------------------- */

/* Double page d'ouverture : la thèse à gauche, la lame en contrepoids à droite. */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--s9);
  align-items: start;
}

.spread__aside {
  padding-top: 6px;
}

.hero {
  display: grid;
  gap: var(--s5);
  max-width: 34ch;
}

/* Hors double page, le titre dispose de toute la largeur. */
.hero--wide {
  max-width: 58ch;
}

.hero--wide .hero__line {
  max-width: 30ch;
}

.hero__eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-2);
  margin: 0;
}

.hero__line {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* Le nombre et son unité ne se séparent jamais en fin de ligne. */
.hero__nb {
  white-space: nowrap;
}

/* Le chiffre en italique serif au cœur d'une phrase en grotesque :
   le geste typographique signature de la page. */
.hero__fig {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--eosin);
  font-size: 1.06em;
}

.hero__sub {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 42ch;
}

.hero__sub em {
  font-style: italic;
  color: var(--ink);
}

.hero__vide {
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 34ch;
}

.hero__acts {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

/* Les trois chapitres à prendre en premier : la réponse à « je fais quoi ». */
.next {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.next__list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.next__item {
  display: grid;
  grid-template-columns: 11px 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  font-size: 14px;
}

.next__item b {
  font-weight: 400;
}

/* --- Boutons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn--solid {
  background: var(--ink);
  color: var(--slide);
}

.btn--solid:hover {
  background: var(--eosin);
}

.btn--quiet {
  border-color: var(--rule-strong);
  color: var(--ink);
}

/* Bouton de rangée : la liste des QCM en porte deux par ligne sur quatre-vingt-dix
   lignes, donc le format pleine taille ferait une colonne de pastilles. */
.btn--mini {
  padding: 6px 14px;
  font-size: 12.5px;
}

.btn--quiet:hover {
  border-color: var(--ink);
}

.btn--text {
  padding: 0;
  border-radius: 0;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}

.btn--text:hover {
  color: var(--eosin);
  border-bottom-color: var(--eosin);
}

/* --- Bandeau de constance --------------------------------------------- */

.streak {
  display: flex;
  align-items: center;
  gap: var(--s5) var(--s7);
  flex-wrap: wrap;
  padding-top: var(--s4);
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
}

.streak__group {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.streak__ticks {
  display: flex;
  gap: 5px;
}

.streak__tick {
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: var(--rule-strong);
}

.streak__tick[data-on="1"] {
  background: var(--eosin);
}

.streak__read {
  font-size: 13px;
  color: var(--ink-2);
}

.streak__read b {
  font-weight: 500;
  color: var(--ink);
}

/* --- Frise des phases -------------------------------------------------- */
/* Sur 21 mois, il faut pouvoir se situer dans l'arc d'un coup d'œil. */

.frise {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.frise__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.frise__rail {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

/* La largeur reste proportionnelle à la durée, mais avec un plancher : sans
   lui, les phases courtes deviennent illisibles. */
.frise__seg {
  flex-basis: 0;
  min-width: 96px;
  display: grid;
  gap: 5px;
}

.frise__barre {
  height: 3px;
  border-radius: 2px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}

.frise__seg--passe .frise__barre {
  background: var(--m2);
}

.frise__seg--ici .frise__barre {
  background: var(--m1);
}

.frise__part {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--eosin);
  border-radius: 2px;
}

.frise__nom {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frise__seg--ici .frise__nom {
  color: var(--ink);
  font-weight: 500;
}

.frise__sous {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frise__obj {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s5) 0 0;
  max-width: 62ch;
}

/* --- Section ------------------------------------------------------------ */

.sect {
  margin-top: var(--s8);
}

.sect__head {
  display: grid;
  grid-template-columns: auto minmax(0, 44ch);
  justify-content: start;
  align-items: baseline;
  gap: var(--s3) var(--s7);
  margin-bottom: var(--s5);
}

.sect__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  font-weight: 500;
  margin: 0;
}

.sect__note {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}

/* --- LA LAME : élément signature -------------------------------------- */

.aside__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
}

.aside__note {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s5) 0 0;
  max-width: 40ch;
}

.lame {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s2);
}

/* Avec quatorze matières, la lame doit rester compacte dans la colonne
   d'ouverture : cellules plus petites, mais toujours cliquables au doigt
   grâce à la zone tactile ajoutée plus bas. */
.lame--hero .lame__cell {
  width: 26px;
  height: 26px;
}

.lame__row {
  padding-block: 3px;
}

.lame__row {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s2);
}

.lame__code {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.lame__cells {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.lame__cell {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  border: 1px solid var(--m0-edge);
  background: var(--m0);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  position: relative;
}

.lame__cell[data-n="1"] {
  background: var(--m1);
  border-color: transparent;
}

.lame__cell[data-n="2"] {
  background: var(--m2);
  border-color: transparent;
}

.lame__cell[data-n="3"] {
  background: var(--m3);
  border-color: transparent;
}

/* La cellule est petite par nécessité graphique ; la cible tactile, elle,
   atteint 44 px via un pseudo-élément transparent. */
.lame__cell::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.lame__cell:hover,
.lame__cell:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 18%, transparent);
  z-index: 2;
}

/* Révélation de la lame au chargement : la teinte « se développe ». */
.lame--reveal .lame__cell {
  animation: stain 0.55s var(--ease) backwards;
  animation-delay: calc(var(--i) * 22ms);
}

@keyframes stain {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.legend {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.legend__chip {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--m0-edge);
  background: var(--m0);
}

.legend__chip[data-n="1"] {
  background: var(--m1);
  border-color: transparent;
}

.legend__chip[data-n="2"] {
  background: var(--m2);
  border-color: transparent;
}

.legend__chip[data-n="3"] {
  background: var(--m3);
  border-color: transparent;
}

/* Infobulle de la lame */
.tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--ink);
  color: var(--slide);
  padding: 7px 11px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 240px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--ink) 28%, transparent);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}

.tip[data-show="1"] {
  opacity: 1;
  transform: none;
}

.tip__sub {
  display: block;
  color: var(--m2);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* --- Liste éditoriale (matières, semaines, fiches) -------------------- */

.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  width: 100%;
  transition: background-color 0.18s var(--ease);
}

.row--btn:hover {
  background: var(--wash);
}

.row__code {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--ink-3);
  padding-top: 4px;
}

.row__name {
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: -0.011em;
  margin: 0;
}

.row__meta {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  margin: 3px 0 0;
}

.row__right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-self: end;
}

/* --- Barre de progression, filiforme ---------------------------------- */

.meter {
  width: 118px;
  height: 2px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--eosin);
  transition: width 0.5s var(--ease);
}

.pct {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  min-width: 3.2em;
  text-align: right;
}

/* --- Sélecteur de niveau (évaluation) --------------------------------- */

.levels {
  display: flex;
  gap: 4px;
}

.levels__btn {
  width: 30px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: all 0.16s var(--ease);
}

.levels__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.levels__btn[aria-pressed="true"][data-n="0"] {
  border-color: var(--ink);
  color: var(--ink);
}

.levels__btn[aria-pressed="true"][data-n="1"] {
  background: var(--m1);
  border-color: transparent;
  color: var(--m1-ink);
}

.levels__btn[aria-pressed="true"][data-n="2"] {
  background: var(--m2);
  border-color: transparent;
  color: var(--m2-ink);
}

.levels__btn[aria-pressed="true"][data-n="3"] {
  background: var(--m3);
  border-color: transparent;
  color: var(--m3-ink);
}

/* --- Fiches : accordéon ----------------------------------------------- */

.fiche {
  border-bottom: 1px solid var(--rule);
}

.fiche__head {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  width: 100%;
  padding-block: var(--s4);
  text-align: left;
  transition: background-color 0.18s var(--ease);
}

.fiche__head:hover {
  background: var(--wash);
}

.fiche__title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.013em;
  margin: 0;
}

.fiche__sign {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1;
  justify-self: end;
  padding-top: 3px;
}

.fiche__body {
  padding: 0 0 var(--s7) 62px;
  max-width: var(--measure);
}

/* Prose de fiche : c'est ici que le serif travaille. */
.prose {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink);
}

.prose h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--eosin);
  margin: var(--s7) 0 var(--s3);
}

.prose h3:first-child {
  margin-top: var(--s2);
}

.prose h4 {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: var(--s6) 0 var(--s2);
}

/* Quatrième niveau : la voix la plus discrète, en italique. */
.prose h5 {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  margin: var(--s5) 0 var(--s1);
}

.prose p {
  margin: 0 0 var(--s3);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
}

.prose li {
  margin-bottom: 5px;
}

.prose li::marker {
  color: var(--m2);
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  background: var(--wash);
  padding: 1px 5px;
  border-radius: 2px;
  /* Jamais de transformation de casse : en génétique la casse EST l'information
     (`A` dominant contre `a` récessif), et les en-têtes de tableau comme les
     titres `##` passent en capitales. Sans cette ligne, un échiquier de
     croisement affiche deux fois le même allèle. */
  text-transform: none;
}

/* Tableau dans une fiche : comparaisons et correspondances, la bonne forme
   quand deux colonnes se répondent. Défile seul si l'écran est étroit. */
.prose__tableau {
  overflow-x: auto;
  margin: var(--s5) 0;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
}

.prose thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}

.prose tbody td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose__foot {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* --- Figures ---------------------------------------------------------- */

.fig {
  margin: var(--s6) 0;
  padding: var(--s5) var(--s5) var(--s4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.fig--narrow {
  max-width: 340px;
}

.fig svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fig figcaption {
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

/* Vocabulaire graphique commun à toutes les figures. */
.fig-axis {
  stroke: var(--ink-3);
  stroke-width: 1;
  fill: none;
}

.fig-grid,
.fig-chance,
.fig-mirror,
.fig-dim,
.fig-mark {
  stroke: var(--rule-strong);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  fill: none;
}

.fig-dim,
.fig-mark {
  stroke-dasharray: 3 3;
}

.fig-curve {
  stroke: var(--eosin);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig-curve2 {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.fig-area {
  fill: var(--m1);
}

.fig-dot {
  fill: var(--eosin);
}

.fig-shape {
  fill: var(--wash);
  stroke: var(--ink-3);
  stroke-width: 1;
}

.fig-vesicle {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

.fig-nt {
  fill: var(--eosin);
}

.fig-recep {
  fill: var(--m2);
}

.fig-ring {
  fill: none;
  stroke: var(--rule);
  stroke-width: 18;
}

.fig-arc {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
}

.fig-arc--1 { stroke: var(--m1); }
.fig-arc--2 { stroke: var(--m2); }
.fig-arc--3 { stroke: var(--m3); }
.fig-arc--4 { stroke: var(--m3); }

.fig-tick {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.fig-band {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.fig-band--1 { fill: var(--m1); stroke: none; }
.fig-band--2 { fill: var(--m2); stroke: none; }
.fig-band--3 { fill: var(--m3); stroke: none; }

.fig-band--3 + text,
.fig-band--2 ~ text {
  fill: var(--ink);
}

.fig-cross {
  stroke: var(--eosin);
  stroke-width: 1.5;
  fill: none;
}

.fig-bond {
  stroke: var(--ink-2);
  stroke-width: 1.5;
}

.fig-wedge {
  fill: var(--ink-2);
}

.fig-atom {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.fig-atom-t {
  font-family: var(--serif);
  font-size: 14px;
  fill: var(--ink);
}

.fig-node,
.fig-node rect {
  fill: var(--wash);
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.fig-node--key,
.fig-node--key rect {
  fill: var(--m1);
  stroke: var(--m2);
}

.fig-node-t {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink);
}

.fig-arrow {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  fill: none;
  marker-end: url(#pointe);
}

.fig-bar {
  fill: var(--m2);
}

.fig-bar--weak {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

/* Coupe cellulaire */
.fig-cyto {
  fill: var(--wash);
  stroke: var(--ink-3);
  stroke-width: 1.5;
}

.fig-organelle {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

.fig-organelle--nucleus {
  fill: var(--m1);
  stroke: var(--m3);
  stroke-width: 1.5;
}

.fig-organelle--deep {
  fill: var(--m3);
  stroke: none;
}

.fig-organelle--mito {
  fill: var(--m2);
  stroke: none;
}

.fig-organelle--line {
  fill: none;
  stroke: var(--m2);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fig-golgi,
.fig-golgi path {
  fill: none;
  stroke: var(--m2);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fig-lead {
  stroke: var(--rule-strong);
  stroke-width: 1;
  /* Sans ceci, un `path` d'accolade — « M 366 148 H 372 V 220 H 366 » — est
     rempli en noir : le remplissage par défaut d'un SVG n'est pas « none ». */
  fill: none;
}

/* Typographie des figures : mêmes voix que l'interface. */
.fig-t {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

.fig-n {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Les unités gardent leur casse : « mV » n'est pas « MV ». */
.fig-u {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--ink-3);
}

.fig-k--clair { fill: var(--m3-ink); }

/* Génétique — arbres généalogiques. Convention universelle : carré pour un
   homme, cercle pour une femme, symbole plein pour un sujet atteint, point
   central pour un conducteur. La forme porte le sexe, le remplissage le
   phénotype : deux informations sans jamais recourir à deux teintes. */
.fig-gen {
  fill: var(--paper);
  stroke: var(--ink-2);
  stroke-width: 1.6;
}

.fig-gen--atteint {
  fill: var(--m3);
  stroke: var(--m3);
}

.fig-gen-pt {
  fill: var(--ink-2);
}

.fig-gen-l {
  stroke: var(--ink-3);
  stroke-width: 1.3;
  fill: none;
}

/* Exons et introns : la même bande, deux remplissages. L'exon est ce qui reste,
   donc c'est lui qui porte la teinte pleine. */
.fig-exon {
  fill: var(--m3);
}

.fig-intron {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

/* Séquences : les bases se lisent lettre à lettre, donc chasse fixe. */
.fig-base {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: 0.08em;
}

.fig-codon {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.fig-codon--change {
  fill: var(--eosin-soft);
  stroke: var(--eosin);
  stroke-width: 1.2;
}

/* Le répresseur : une forme qui s'emboîte, pour qu'on voie qu'elle bouche. */
.fig-repress {
  fill: var(--m2);
  stroke: var(--m3);
  stroke-width: 1.2;
}

.fig-barre {
  stroke: var(--eosin);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Étiquette posée dans une bande colorée. La variante claire est indispensable
   sur `--m3`, où l'encre ne passe plus. */
.fig-seg {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--ink);
  text-anchor: middle;
}

.fig-seg--clair {
  fill: var(--paper);
}

/* Remplissages génériques de la rampe, pour les barres empilées et les segments.
   Nommés par leur position dans la rampe et non par un contenu, afin de servir
   toutes les matières : volumes pulmonaires, parts d'un bilan, secteurs d'un
   tube digestif. `--r1` et `--r0` portent un contour, sans quoi un segment très
   clair disparaîtrait sur le papier. */
.fig-r3 {
  fill: var(--m3);
}

.fig-r2 {
  fill: var(--m2);
}

.fig-r1 {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

.fig-r0 {
  fill: var(--wash);
  stroke: var(--rule-strong);
  stroke-width: 1;
}

/* Boîte d'un enchaînement : un maillon d'axe hormonal, une étape d'un cycle. */
.fig-boite {
  fill: var(--wash);
  stroke: var(--m3);
  stroke-width: 1.2;
  rx: 3;
}

/* Lien fin entre deux éléments dessinés — canalicule osseux, filament, pont.
   À distinguer de `.fig-lead`, qui va d'une forme vers son étiquette : ici les
   deux extrémités portent de l'information. */
.fig-relie {
  fill: none;
  stroke: var(--m3);
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* Conduit anatomique : tube rénal, vaisseau, canal. Plus épais qu'un tracé de
   courbe, pour qu'on lise une lumière et non une ligne. */
.fig-tube {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rétrocontrôle négatif : le signe compte autant que la flèche. */
.fig-inhib {
  fill: var(--paper);
  stroke: var(--eosin);
  stroke-width: 1.4;
}

.fig-inhib-t {
  stroke: var(--eosin);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Acide aminé d'une chaîne peptidique. `.fig-node` ne stylait qu'un `rect`
   imbriqué : un `circle` qui portait cette classe sortait en noir. */
.fig-aa {
  fill: var(--m2);
  stroke: var(--m3);
  stroke-width: 1;
}

/* Chromosome : un bâtonnet, assez court pour tenir dans une cellule dessinée. */
.fig-chr {
  fill: var(--m3);
  rx: 1.3;
}

.fig-k {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  fill: var(--ink);
}

/* La courbe se trace au dévoilement : le geste lit le sens de lecture. */
@media (prefers-reduced-motion: no-preference) {
  .fig--anim .fig-curve {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: tracer 1.7s var(--ease) 0.15s forwards;
  }

  .fig--anim .fig-dot,
  .fig--anim .fig-k {
    opacity: 0;
    animation: rise 0.5s var(--ease) 1.2s forwards;
  }
}

@keyframes tracer {
  to {
    stroke-dashoffset: 0;
  }
}

/* --- Formules --------------------------------------------------------- */

/* Une formule détachée est une planche, comme une figure : même cadre,
   même statut dans la page. */
.mthb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--m2);
  border-radius: 3px;
}

.mthb__nom {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}

.mth {
  font-family: var(--serif);
  font-size: 1.06em;
  line-height: 1.5;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.mth--block {
  font-size: 20px;
  line-height: 1.9;
  padding-block: 2px;
}

/* Variables en italique, identifiants et opérateurs en romain :
   la distinction que fait toute publication scientifique. */
.mth-var {
  font-style: italic;
}

.mth-id,
.mth-num-lit,
.mth-par,
.mth-sym,
.mth-ce {
  font-style: normal;
}

.mth-fn {
  font-style: normal;
  padding-right: 0.16em;
}

.mth-txt {
  font-family: var(--sans);
  font-size: 0.82em;
  font-style: normal;
  color: var(--ink-2);
  padding-inline: 0.2em;
}

.mth-rel {
  font-style: normal;
  padding-inline: 0.2em;
}

/* Dans un exposant ou un indice, un signe se colle : « 10⁻¹⁴ », pas « 10 − 14 ». */
.mth-sup .mth-rel,
.mth-sub .mth-rel,
.mth-sup .mth-sym,
.mth-sub .mth-sym {
  padding-inline: 0;
}

.mth-sym {
  padding-inline: 0.14em;
}

.mth-sp {
  display: inline-block;
  width: 0.3em;
}

.mth-sub,
.mth-sup {
  font-size: 0.66em;
  font-style: normal;
  line-height: 0;
}

/* Fraction empilée : numérateur, barre, dénominateur. */
.mth-frac {
  display: inline-grid;
  grid-template-rows: auto auto;
  /* `middle` et non un décalage en em : la ligne de base d'un `inline-grid` est
     celle de sa PREMIÈRE rangée, donc tout décalage fixe alignait le texte
     voisin sur le numérateur — « CMB/CMI ≈ 1 » sortait avec le « ≈ 1 » collé au
     numérateur et la barre en dessous. `middle` cale le milieu de la fraction
     sur l'axe mathématique, ce qui met la barre au niveau du texte. */
  vertical-align: middle;
  text-align: center;
  margin-inline: 0.16em;
}

.mth-num {
  padding: 0 0.34em 0.06em;
  border-bottom: 1px solid currentColor;
}

.mth-den {
  padding: 0.06em 0.34em 0;
}

/* Radical : le glyphe puis un vinculum au-dessus de l'argument. */
.mth-sqrt::before {
  content: "√";
  font-style: normal;
}

.mth-sqrt > span {
  border-top: 1px solid currentColor;
  padding: 0.08em 0.18em 0 0.06em;
  margin-left: -0.04em;
}

/* Mesure algébrique : la barre couvre tout le groupe, contrairement à l'accent
   combinant de `\bar` qui ne se pose que sur le dernier caractère. */
.mth-over > span {
  border-top: 1px solid currentColor;
  padding: 0.06em 0.06em 0 0.06em;
}

/* --- Anatomie 3D ------------------------------------------------------- */

.os3d {
  display: grid;
  gap: var(--s5);
}

.os3d__barre {
  display: flex;
  gap: var(--s5) var(--s7);
  flex-wrap: wrap;
  align-items: baseline;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.os3d__lot {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  flex-wrap: wrap;
}

.os3d__stage {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

/* Les deux couches occupent exactement le même rectangle : le canvas porte la
   matière, le SVG au-dessus porte les zones cliquables et les étiquettes. */
.os3d__couches {
  position: relative;
  aspect-ratio: 2 / 3;
  max-height: 68vh;
  margin-inline: auto;
}

.os3d__toile,
.os3d__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.os3d__scene {
  /* Le glissement sert à tourner : le navigateur ne doit pas le voir défiler. */
  touch-action: none;
  cursor: grab;
}

/* Zones de désignation : invisibles, mais bien présentes pour le pointeur,
   le clavier et les lecteurs d'écran. */
.os3d__zones .os {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.os3d__zones .os:focus {
  outline: none;
}

.os3d__zones .os:focus-visible {
  stroke: var(--eosin);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.os3d__labels {
  pointer-events: none;
}

.os3d__scene--saisi {
  cursor: grabbing;
}

.os3d__scene:focus-visible {
  outline: 2px solid var(--eosin);
  outline-offset: -2px;
}

/* Un os : contour large derrière, corps fin devant — un os cerné d'un filet. */
.os__contour {
  stroke: var(--ink-3);
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}

.os__corps {
  stroke: var(--m1);
  fill: var(--m1);
  stroke-linecap: round;
}

.os {
  cursor: pointer;
}

.os--survol .os__corps {
  stroke: var(--m2);
  fill: var(--m2);
}

.os--survol .os__contour {
  stroke: var(--ink);
}

.os--choisi .os__corps {
  stroke: var(--m3);
  fill: var(--m3);
}

.os--choisi .os__contour {
  stroke: var(--m3);
}

.os:focus {
  outline: none;
}

.os:focus-visible .os__contour {
  stroke: var(--eosin);
  stroke-dasharray: 3 3;
}

.os3d__nom {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
}

.os3d__tige {
  stroke: var(--ink-3);
  stroke-width: 0.7;
}

.os3d__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}

.os3d__nomOs {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
}

.os3d__osNom {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
}

.os3d__vide {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
}

.os3d__lot--zoom {
  margin-left: auto;
}

.zoombtn {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: all 0.16s var(--ease);
}

.zoombtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.os3d__aide {
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 62ch;
}

.os3d__aide kbd {
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0 4px;
}

/* Sélecteur de région : la table des matières de la section anatomie. */
.os3d__regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.regbtn {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  transition: all 0.18s var(--ease);
}

.regbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.regbtn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--slide);
}

.regbtn__n {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.regbtn[aria-pressed="true"] .regbtn__n {
  color: var(--m2);
}

/* Ligne de titre dans la liste des pièces : un intertitre, pas un bouton. */
.row--titre {
  border-bottom-color: var(--ink);
  padding-top: var(--s6);
}

.row--titre .row__name {
  font-weight: 500;
}

/* Marque « forme schématique » : discrète mais explicite. */
.os3d__marque {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Lacune du jeu de données : à dire, pas à masquer. */
.os3d__lacune {
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 300;
  color: var(--eosin);
  margin: 0;
  padding-top: var(--s3);
}

/* Attribution : obligation de la licence CC BY-SA, elle doit rester visible. */
.os3d__credit {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  max-width: 74ch;
}

.os3d__credit strong {
  font-weight: 400;
  color: var(--ink-2);
}

.os3d__credit a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
}

.os3d__credit a:hover {
  color: var(--eosin);
}

.os3d__attente {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
  text-align: center;
  padding: var(--s9) var(--s5);
  margin: 0;
}

.os3d__attente--erreur {
  color: var(--eosin);
  font-style: normal;
  font-family: var(--sans);
  font-size: 14.5px;
}

/* --- Épreuve sur les os ------------------------------------------------ */

.os3d__epreuve[hidden] {
  display: none;
}

.epreuve {
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s4);
}

.epreuve__consigne {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  margin: var(--s2) 0 0;
}

.epreuve__consigne em {
  font-style: italic;
  color: var(--eosin);
}

.epreuve__aide {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  margin: 0;
}

.epreuve__score {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}

.epreuve__score b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Conseils --------------------------------------------------------- */

.advice {
  border-bottom: 1px solid var(--rule);
}

.advice:first-child {
  border-top: 1px solid var(--rule);
}

.advice__head {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  width: 100%;
  padding-block: var(--s5);
  text-align: left;
  transition: background-color 0.18s var(--ease);
}

.advice__head:hover {
  background: var(--wash);
}

.advice__title {
  display: block;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.017em;
  line-height: 1.35;
  max-width: 46ch;
}

.advice__resume {
  display: block;
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: var(--s2);
  max-width: 56ch;
}

.advice--open .advice__resume {
  color: var(--ink);
}

.advice__body {
  padding: 0 0 var(--s7) 92px;
  max-width: 68ch;
}

.refs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  max-width: 72ch;
}

.refs__item {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}


/* --- Vocabulaire des figures de biologie cellulaire -------------------- */

.fig-membrane {
  fill: var(--m1);
}

.fig-membrane-l {
  stroke: var(--m2);
  stroke-width: 1;
}

.fig-tetes,
.fig-tetes circle {
  fill: var(--m2);
}

/* Flèches de transport : le sens porte l'information, d'où la pointe. */
.fig-fleche-in,
.fig-fleche-out {
  stroke: var(--eosin);
  stroke-width: 1.6;
  fill: none;
  marker-end: url(#pointe);
}

.fig-fleche-out {
  stroke: var(--m3);
}

.fig-canal {
  fill: var(--m2);
}

.fig-porteur,
.fig-pompe {
  fill: var(--m2);
  stroke: var(--ink-3);
  stroke-width: 1;
}

.fig-pompe {
  fill: var(--m3);
}

/* Cytosquelette.
   Chaque classe vise l'élément lui-même ET son descendant : un sélecteur en
   « .fig-x path » seul laisse un `path` qui porte directement la classe sortir
   en noir, puisque le remplissage par défaut d'un SVG n'est pas « none ».
   La panne est silencieuse — la figure s'affiche, fausse. */
.fig-actine,
.fig-actine path {
  fill: none;
  stroke: var(--m3);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.fig-fi {
  fill: var(--m1);
  stroke: var(--m2);
  stroke-width: 1;
}

.fig-fi-t {
  fill: none;
  stroke: var(--m2);
  stroke-width: 1.4;
}

.fig-mt {
  fill: var(--m1);
  stroke: var(--m3);
  stroke-width: 1.4;
}

.fig-mt-l {
  stroke: var(--m2);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* Jonctions */
.fig-cellule-p {
  fill: var(--wash);
  stroke: var(--ink-3);
  stroke-width: 1;
}

.fig-serree {
  stroke: var(--m3);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.fig-adherente,
.fig-desmo {
  fill: var(--m2);
}

.fig-desmo {
  fill: var(--m3);
}

.fig-gap {
  fill: var(--m1);
  stroke: var(--m3);
  stroke-width: 1.2;
}

.fig-gap-c {
  stroke: var(--eosin);
  stroke-width: 1.4;
}

.fig-lame {
  stroke: var(--ink-3);
  stroke-width: 2.4;
}

/* Échelles */
.fig-limite {
  stroke: var(--eosin);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}


/* --- Vocabulaire des figures de biophysique ---------------------------- */

/* Le bras d'un levier : une structure, pas un accent — ce sont les forces qui
   portent l'information, et elles prennent la flèche. */
/* Tête polaire d'un phospholipide, posée individuellement — la figure de la
   membrane les groupe dans un `<g class="fig-tetes">`, ce qui ne convient pas
   quand la bicouche est dessinée par une fonction. */
.fig-tetes-p {
  fill: var(--ink-3);
}

.fig-levier {
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* La rétine, arc au fond du globe. Elle est la référence que l'œil du lecteur
   cherche : c'est par rapport à elle que le foyer tombe trop tôt ou trop tard,
   donc elle se voit plus que la paroi. */
.fig-retine {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* --- Vocabulaire des figures de biochimie ------------------------------ */

/* Troisième courbe, quand une figure en compare trois (Lineweaver-Burk). */
.fig-curve3 {
  stroke: var(--m2);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 7 4;
  stroke-linecap: round;
}

/* Brins d'ADN : parental en trait neutre, néosynthétisé en accent. */
.fig-brin {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}

.fig-neuf {
  fill: none;
  stroke: var(--eosin);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* --- Filtres ---------------------------------------------------------- */

.filters {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.filters__btn {
  font-size: 13px;
  color: var(--ink-3);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.filters__btn:hover {
  color: var(--ink);
}

.filters__btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--eosin);
}

/* Intertitre de matière dans la vue niveau. Sans lui, quatre-vingt-cinq lignes
   se suivent sans repère : le code de trois lettres ne suffit pas à savoir où
   l'on est. La jauge dit d'un coup quelle matière est en retard. */
.rows__matiere {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  padding: var(--s6) 0 var(--s3);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s2);
}

.rows__matiere:first-child {
  padding-top: 0;
}

.rows__matiere-etat {
  grid-column: 1;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
}

.rows__matiere-jauge {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

@media (max-width: 620px) {
  .rows__matiere {
    grid-template-columns: 1fr;
  }

  .rows__matiere-jauge {
    grid-row: auto;
    grid-column: 1;
  }
}

/* --- QCM -------------------------------------------------------------- */

.quiz {
  max-width: 56ch;
}

/* Rail de série : où j'en suis dans les questions, sans quitter la question. */
.serie {
  padding-top: 6px;
}

.serie__marks {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.serie__mark {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  background: var(--m0);
}

.serie__mark[data-state="active"] {
  border-color: var(--eosin);
  border-width: 2px;
}

.serie__mark[data-state="juste"] {
  background: var(--m3);
  border-color: transparent;
}

/* Une erreur se lit comme un contour vide, pas comme une punition rouge. */
.serie__mark[data-state="faux"] {
  background: var(--m1);
  border-color: var(--m2);
}

.serie__ch {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  margin: var(--s5) 0 0;
}

.serie__acts {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.quiz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.quiz__q {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: var(--s7) 0 var(--s6);
  text-wrap: pretty;
}

.opts {
  display: grid;
  border-top: 1px solid var(--rule);
}

.opt {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s3);
  align-items: baseline;
  width: 100%;
  padding: var(--s4) var(--s3);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.opt:hover:not(:disabled) {
  background: var(--wash);
}

.opt__key {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
}

.opt__txt {
  font-size: 15.5px;
  line-height: 1.45;
}

.opt[data-state="right"] {
  background: var(--eosin-soft);
}

.opt[data-state="right"] .opt__key {
  color: var(--eosin);
}

.opt[data-state="wrong"] {
  opacity: 0.44;
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
}

.opt[data-state="muted"] {
  opacity: 0.44;
}

/* --- Réponses multiples ------------------------------------------------- */
/* Trois choses à dire sur une proposition, et une seule teinte pour les dire :
   qu'elle est cochée (avant validation), qu'elle est vraie (après), et que le
   jugement porté dessus était faux. La teinte porte la vérité, la mention porte
   l'erreur — jamais deux couleurs pour deux sens. */

.opt {
  grid-template-columns: 26px 1fr auto;
}

/* Cochée, avant validation : la case est prise, rien n'est encore jugé. */
.opt[data-state="pick"] {
  background: var(--wash);
}

.opt[data-state="pick"] .opt__key,
.opt[aria-checked="true"] .opt__key {
  color: var(--eosin);
  font-style: normal;
  font-weight: 600;
}

/* Vraie mais non cochée : même teinte que « vraie et cochée », puisque la teinte
   dit la vérité. C'est la mention « oubliée » qui dit l'erreur. */
.opt[data-state="missed"] {
  background: var(--eosin-soft);
}

.opt[data-state="missed"] .opt__key {
  color: var(--eosin);
}

.opt__note {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eosin);
  border: 1px solid var(--eosin);
  border-radius: 2px;
  padding: 2px 5px;
  white-space: nowrap;
  align-self: center;
}

/* Justification d'une proposition, quand la question en porte une : c'est ce que
   corrige un correcteur de concours, item par item. */
.opt__why {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
  margin-top: var(--s2);
}

.quiz__consigne {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin: calc(-1 * var(--s3)) 0 var(--s5);
}

.verdict__score {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 var(--s3);
}

/* Après validation, les cinq justifications sont à lire — c'est là qu'est
   l'apprentissage. Aucune ne doit donc être atténuée : la distinction passe par
   la teinte, la mention, et la rature du seul énoncé. L'opacité est écartée
   parce qu'un enfant ne peut pas s'en affranchir, et la rature ne porte que sur
   `.opt__enonce`, pour la même raison. */
.opt[data-state="wrong"],
.opt[data-state="muted"] {
  opacity: 1;
  text-decoration: none;
}

.opt[data-state="wrong"] .opt__enonce {
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
}

.opt[data-state="muted"] .opt__enonce {
  color: var(--ink-3);
}

.opt:disabled {
  cursor: default;
}

.verdict {
  margin-top: var(--s6);
  padding-left: var(--s5);
  border-left: 2px solid var(--eosin);
}

.verdict--quiet {
  border-color: var(--rule-strong);
}

.verdict__tag {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--eosin);
  margin: 0 0 var(--s2);
}

.verdict__tag--quiet {
  color: var(--ink-3);
}

.verdict__txt {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.verdict__acts {
  margin-top: var(--s5);
  display: flex;
  gap: var(--s5);
  align-items: center;
  flex-wrap: wrap;
}

.tally {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-2);
}

.tally b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Planning --------------------------------------------------------- */

.week {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.week:first-child {
  border-top: 1px solid var(--rule);
}

.week--rest {
  color: var(--ink-3);
}

.week__when {
  display: grid;
  gap: 2px;
  align-content: start;
}

.week__no {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.week__list {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.week__task {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--s3);
  align-items: baseline;
  font-size: 14.5px;
}

.week__dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--m0-edge);
  background: var(--m0);
  transform: translateY(4px);
}

/* Au format pastille, le niveau 1 est trop pâle pour se lire seul : il garde un bord. */
.week__dot[data-n="1"] {
  background: var(--m1);
  border-color: var(--m2);
}

.week__dot[data-n="2"] {
  background: var(--m2);
  border-color: transparent;
}

.week__dot[data-n="3"] {
  background: var(--m3);
  border-color: transparent;
}

.week__note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
}

/* --- Vide ------------------------------------------------------------- */

.empty {
  padding: var(--s7) 0;
  max-width: 44ch;
}

.empty__txt {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--s4);
}

/* --- Entrée de vue ---------------------------------------------------- */

.enter > * {
  animation: rise 0.5s var(--ease) backwards;
}

.enter > *:nth-child(1) { animation-delay: 0ms; }
.enter > *:nth-child(2) { animation-delay: 55ms; }
.enter > *:nth-child(3) { animation-delay: 110ms; }
.enter > *:nth-child(4) { animation-delay: 165ms; }
.enter > *:nth-child(5) { animation-delay: 220ms; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Étroit ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .spread {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  .spread__aside {
    padding-top: 0;
    max-width: 520px;
  }

  .sect__head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .masthead__in {
    flex-wrap: wrap;
    gap: var(--s3) var(--s4);
    padding-block: var(--s3);
  }

  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: var(--s4);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .mode {
    margin-left: auto;
  }

  .view {
    padding-block: var(--s7) var(--s8);
  }

  .sect {
    margin-top: var(--s8);
  }

  .lame__row {
    grid-template-columns: 40px 1fr;
    gap: var(--s3);
  }

  .lame__cell {
    width: 26px;
    height: 26px;
  }

  .row,
  .fiche__head,
  .advice__head {
    grid-template-columns: 38px 1fr;
    gap: var(--s3);
  }

  .advice__head {
    grid-template-columns: 64px 1fr;
  }

  .advice__body {
    padding-left: 0;
  }

  .fig {
    padding: var(--s4) var(--s3) var(--s3);
  }

  .row__right {
    grid-column: 2;
    justify-self: start;
    margin-top: var(--s3);
  }

  .fiche__sign {
    display: none;
  }

  .fiche__body {
    padding-left: 0;
  }

  .week {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .prose {
    font-size: 16px;
  }
}

/* --- Sobriété de mouvement -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Impression ------------------------------------------------------- */

@media print {
  .masthead,
  .filters,
  .hero__acts,
  .prose__foot {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .view[hidden] {
    display: block !important;
  }
}