/* ============================================================
   THE MATH OF LOSING WEIGHT — mise en page éditoriale
   Reprend les encres du Kiosque (voir ../../styles.css).

   Principe : la colonne de lecture reste étroite (~65 caractères).
   Le conteneur est plus large. Les planches débordent dans les
   marges par flottant + marge négative, le texte s'enroule autour.
   ============================================================ */

:root {
  --colonne: 640px;   /* largeur de lecture */
  --cadre: 1120px;    /* largeur du conteneur, marges comprises */
}

body { overflow-x: hidden; }

/* ============ ENTÊTE ============ */

.retour {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-bottom: 2.5rem;
}
.retour:hover { border-bottom-color: var(--bleu); }

.article {
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

.entete {
  max-width: var(--colonne);
  margin: 0 auto 3.5rem;
  border-bottom: 3px solid var(--encre);
  padding-bottom: 1.5rem;
}

.entete__surtitre {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 0.9rem;
}

.entete__titre {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.entete__chapeau {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--encre-douce);
}

/* ============ COLONNE DE LECTURE ============ */

.prose {
  max-width: var(--colonne);
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.68;
}

.prose > p { margin-bottom: 1.35rem; }

.prose > h2 {
  clear: both;                     /* ne jamais chevaucher une planche */
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 3rem 0 1.1rem;
}

.prose strong { font-weight: 600; }

.prose em { font-style: italic; }

/* Termes définis : BMR, NEAT, EEE */
.sigle {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.92em;
  color: var(--bleu);
  background: var(--bleu-pale);
  padding: 0.05em 0.3em;
}

/* Symboles définis dans le texte : ΔC, C_i, C_b. Traitement plus
   léger que .sigle, qui sert aux acronymes encadrés. */
.sym {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.94em;
  color: var(--bleu);
  white-space: nowrap;
}

/* ============ ÉQUATIONS ============ */

.equation {
  clear: both;
  margin: 2rem 0;
  padding: 1.15rem 1.25rem;
  background: var(--papier-fonce);
  border-left: 4px solid var(--rouge);
  font-family: var(--mono);
  font-size: 0.98rem;
  line-height: 1.7;
  overflow-x: auto;
}

.equation em {
  font-style: normal;
  color: var(--bleu);
  font-weight: 500;
}

/* Bande séquentielle : trois panneaux 9:16 qui se lisent de gauche
   à droite, séparés par une flèche. */
.bande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 560px;
  margin: 0 auto;
}

/* flex: 1 1 0 + min-width: 0 — sans ça, un panneau refuse de passer
   sous sa largeur intrinsèque et la bande déborde sur mobile.
   height: auto conserve le ratio 9:16 à toutes les tailles. */
.bande img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}

.bande__fleche {
  flex: none;
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rouge);
}

@media (max-width: 560px) {
  .bande { gap: 0.3rem; }
  .bande__fleche { font-size: 1rem; }
}

/* Valeur calculée sous une équation — suit le curseur d'objectif. */
.equation__valeur {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--trait);
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.equation__valeur span[data-goal] {
  color: var(--rouge);
  font-weight: 500;
}

/* ============ WIDGETS ============ */

.widget {
  display: grid;
  gap: 0.9rem;
  padding: 0.35rem 0.15rem;
}

.widget__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.widget__sortie {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bleu);
}

.widget__sortie small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.widget__curseur {
  width: 100%;
  accent-color: var(--bleu);
  cursor: pointer;
}

.widget__bornes {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--encre-douce);
}

.widget__ligne {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--encre-douce);
  padding-top: 0.7rem;
  border-top: 1px solid var(--trait);
}

.widget__ligne b {
  font-weight: 600;
  color: var(--encre);
}

/* Champs du calculateur BMR */
.widget__champs {
  display: grid;
  gap: 0.5rem;
}

.widget__champ {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.widget__champ label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.widget__champ input {
  width: 5.5rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.34rem 0.45rem;
}

.widget__champ input:focus-visible {
  border-color: var(--bleu);
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu-pale);
}

.widget__bascules {
  display: flex;
  gap: 0.35rem;
}

.widget__bascules button {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.34rem 0.6rem;
  cursor: pointer;
}

.widget__bascules button[aria-pressed="true"] {
  color: var(--papier);
  background: var(--bleu);
  border-color: var(--bleu);
}

.widget__reset {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  background: none;
  border: none;
  border-bottom: 1px solid var(--trait);
  padding: 0 0 1px;
  cursor: pointer;
}

.widget__reset:hover { border-bottom-color: var(--bleu); }

/* ============ TABLE DES EXERCICES ============ */

.exos__reglages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.exos__reglages .widget__champ { grid-template-columns: auto auto; }

.exos__recherche {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.4rem 0.55rem;
}

.exos__recherche:focus-visible {
  border-color: var(--bleu);
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu-pale);
}

.exos__categorie {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.38rem 0.5rem;
  max-width: 100%;
  cursor: pointer;
}

.exos__categorie:focus-visible {
  border-color: var(--bleu);
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu-pale);
}

.exos__base {
  font-size: 0.8rem;
  color: var(--encre-douce);
  margin-top: -0.35rem;
}

.exos__base b {
  font-weight: 600;
  color: var(--bleu);
}

.exos__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  border-top: 1px solid var(--trait);
}

.exo {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px solid var(--trait);
}

/* En-tête de colonnes : sans lui, on ne sait pas à quoi se rapporte
   chaque nombre. Collant, puisque la liste défile. */
.exo--tete {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--papier-fonce);
  border-bottom: 1px solid var(--encre);
  padding-bottom: 0.4rem;
}

.exo--tete span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.exo--tete span:not(:first-child) { text-align: right; }

.exo--tete span:nth-child(2) { min-width: 5rem; }
.exo--tete span:nth-child(3) { min-width: 4.5rem; }

.exo__nom { font-size: 0.9rem; }

.exo__kcal {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--bleu);
  text-align: right;
  min-width: 5rem;
}

.exo__kcal small {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--encre-douce);
  margin-left: 0.25rem;
}

/* Durée nécessaire pour couvrir le déficit du curseur d'objectif */
.exo__duree {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--rouge);
  text-align: right;
  min-width: 4.5rem;
}

.exos__vide {
  padding: 1.25rem 0.15rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.exos__pied {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.exos__pied a { color: var(--bleu); }

@media (max-width: 560px) {
  .exo { grid-template-columns: 1fr auto; }
  .exo__duree { grid-row: 2; grid-column: 2; text-align: right; }
  /* La grille se replie sur deux lignes : l'en-tête ne s'aligne plus. */
  .exo--tete { display: none; }
}

/* Signal discret quand le rythme visé sort des repères usuels */
.widget__ligne[data-alerte="true"] b { color: var(--rouge); }

/* ============ WIDGET — DOMAINES D'APPLICATION ============ */

.impact__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.impact__onglet {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.impact__onglet:hover { color: var(--encre); }

.impact__onglet[aria-selected="true"] {
  color: var(--papier);
  background: var(--bleu);
  border-color: var(--bleu);
}

.impact__panneau {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* display: grid l'emporte sur [hidden] : sans cette règle, les cinq
   panneaux s'affichent en même temps. */
.impact__panneau[hidden] { display: none; }

.impact__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--trait);
}

.impact__texte {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

@media (max-width: 620px) {
  .impact__panneau { grid-template-columns: 1fr; gap: 1rem; }
  .impact__onglet { font-size: 0.68rem; padding: 0.4rem 0.55rem; }
}

/* ============ WIDGET — RÉGION FAISABLE ============ */

.yt { gap: 0.65rem; }

.yt__plot svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

.yt__zone {
  fill: var(--bleu);
  fill-opacity: 0.18;
  stroke: var(--bleu);
  stroke-width: 1.5;
}

.yt__contrainte { stroke-width: 2; fill: none; }
.yt__contrainte--a { stroke: var(--bleu); }
.yt__contrainte--b { stroke: var(--encre-douce); }
.yt__contrainte--c { stroke: var(--encre); stroke-dasharray: 2 4; }
.yt__contrainte--d { stroke: var(--bleu); opacity: 0.55; stroke-dasharray: 10 4; }

.yt__profit {
  stroke: var(--rouge);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.yt__axe { stroke: var(--encre); stroke-width: 1.5; }

.yt__point {
  fill: var(--rouge);
  stroke: var(--papier);
  stroke-width: 2;
}

.yt__grad, .yt__legende {
  font-family: var(--mono);
  fill: var(--encre-douce);
}
.yt__grad { font-size: 11px; }
.yt__legende { font-size: 12px; }

.yt__sortie {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--encre-douce);
  padding-top: 0.6rem;
  border-top: 1px solid var(--trait);
}

.yt__sortie b { color: var(--bleu); font-weight: 600; }

.yt__glisse,
.yt__reglage {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.6rem;
}

.yt__glisse {
  padding: 0.5rem 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.yt__glisse span,
.yt__reglage span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.yt__glisse output,
.yt__reglage output {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--bleu);
  text-align: right;
}

.yt__glisse output { color: var(--rouge); }

/* Deux colonnes : les quatre réglages du problème tiennent sur deux
   lignes au lieu de quatre. */
.yt__reglages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.5rem;
}

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

@media (max-width: 620px) {
  .yt__glisse,
  .yt__reglage {
    grid-template-columns: minmax(0, 1fr) 3rem;
  }
  .yt__glisse span,
  .yt__reglage span { grid-column: 1 / -1; }
}

/* ============ WIDGET — SÉLECTEUR ============ */

.sel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.sel__col { display: grid; gap: 0.5rem; align-content: start; }

.sel__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--encre);
}

.sel__titre {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.sel__compte {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
}

/* Plafond atteint : le compteur le dit avant que les cases grisées
   ne laissent le lecteur perplexe. */
.sel__compte[data-plein="true"] { color: var(--rouge); }

.sel__recherche {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.35rem 0.5rem;
}

.sel__recherche:focus-visible {
  border-color: var(--bleu);
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu-pale);
}

.sel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.sel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.15rem;
  border-bottom: 1px solid var(--trait);
  cursor: pointer;
}

.sel__item input { accent-color: var(--bleu); cursor: pointer; }
.sel__item:has(input:disabled) { cursor: default; opacity: 0.45; }
.sel__item[data-actif="true"] { background: var(--bleu-pale); }

.sel__item:has(input:focus-visible) {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
}

.sel__nom { font-size: 0.86rem; }

.sel__meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--encre-douce);
  text-align: right;
  white-space: nowrap;
}

.sel__vide {
  padding: 1rem 0.15rem;
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.sel__sources {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--trait);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.sel__sources a { color: var(--bleu); }

@media (max-width: 700px) {
  .sel { grid-template-columns: 1fr; gap: 1.75rem; }
  .sel__item { grid-template-columns: auto minmax(0, 1fr); }
  .sel__meta { grid-column: 2; text-align: left; }
}

/* ============ WIDGET — NOTATION Pe ============ */

.note-pe {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
}

.note-pe__intro {
  grid-column: 1 / -1;
  margin: 0 0 0.3rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.note-pe__col { display: grid; gap: 0.5rem; align-content: start; }

.note-pe__liste { list-style: none; margin: 0; padding: 0; }

.note-pe__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 5.5rem) 2.2rem;
  align-items: center;
  gap: 0.2rem 0.6rem;
  padding: 0.4rem 0.15rem;
  border-bottom: 1px solid var(--trait);
}

.note-pe__nom {
  grid-column: 1 / 3;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Même traitement que .sym dans le texte : l'étiquette fait le lien
   avec les sommes qui suivent. */
.note-pe__cle {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8em;
  color: var(--bleu);
  margin-right: 0.45rem;
}

.note-pe__meta {
  grid-row: 2;
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--encre-douce);
}

.note-pe__curseur {
  grid-row: 2;
  grid-column: 2;
  width: 100%;
  accent-color: var(--bleu);
  cursor: pointer;
}

.note-pe__valeur {
  grid-row: 1 / 3;
  grid-column: 3;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: right;
}

/* Le signe porte le sens : douleur en rouge, plaisir en bleu. */
.note-pe__valeur[data-signe="moins"] { color: var(--rouge); }
.note-pe__valeur[data-signe="plus"]  { color: var(--bleu); }
.note-pe__valeur[data-signe="zero"]  { color: var(--encre-douce); }

@media (max-width: 700px) {
  .note-pe { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============ WIDGET — NEAT ============ */

.neat__choix { display: grid; gap: 0.3rem; }

/* Variante en rangée : quatre choix courts tiennent sur une ligne
   dans une planche pleine largeur. */
.neat__choix--rangee {
  display: flex;
  flex-wrap: wrap;
}

.neat__choix button {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: left;
  color: var(--encre-douce);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.neat__choix button:hover { color: var(--encre); }

.neat__choix button[aria-pressed="true"] {
  color: var(--papier);
  background: var(--bleu);
  border-color: var(--bleu);
}

/* ============ WIDGET — SOLUTION ============ */

.sol { gap: 0.8rem; }

.sol__entete { display: grid; gap: 0.3rem; }

.sol__corps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--trait);
}

.sol__col { display: grid; gap: 0.4rem; align-content: start; }

.sol__titre {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.sol__liste { list-style: none; margin: 0; padding: 0; }

.sol__liste li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--trait);
}

.sol__n {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--bleu);
}

.sol__nom { font-size: 0.86rem; }

.sol__pe {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-align: right;
}

.sol__pe[data-signe="moins"] { color: var(--rouge); }
.sol__pe[data-signe="plus"]  { color: var(--bleu); }
.sol__pe[data-signe="zero"]  { color: var(--encre-douce); }

.sol__rien, .sol__echec {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.sol__echec {
  grid-column: 1 / -1;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--rouge);
  background: var(--rouge-pale);
}

.sol__bilan {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--trait);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--encre-douce);
}

.sol__bilan b { color: var(--bleu); font-weight: 500; }

/* Dans une planche latérale, la largeur utile tombe à ~270 px : les
   deux colonnes s'y chevauchent. La requête média ne peut pas le
   détecter, elle regarde la fenêtre et non le conteneur. */
.planche--gauche .sol__corps,
.planche--droite .sol__corps {
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (max-width: 700px) {
  .sol__corps { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============ WIDGET — COUPE 2D ============ */

.coupe__axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
}

.coupe__axe {
  display: grid;
  gap: 0.25rem;
  min-width: 0;   /* sinon le contenu du select impose sa largeur à la grille */
}

.coupe__axe span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.coupe__axe select {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  padding: 0.35rem 0.45rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
}

.coupe__axe select:focus-visible {
  border-color: var(--bleu);
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu-pale);
}

.coupe__point { fill: var(--encre); opacity: 0.45; }

.coupe__meilleur {
  fill: none;
  stroke: var(--rouge);
  stroke-width: 2.5;
}

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

/* ============ ENCADRÉ ============ */

/* display: flow-root — l'encadré établit son propre contexte de
   formatage : il se rétrécit à côté d'une planche flottante au lieu
   de passer derrière elle, bordure comprise. */
.note {
  display: flow-root;
  margin: 2rem 0;
  padding: 1.1rem 1.25rem;
  border: 2px dashed var(--trait);
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.note strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 0.4rem;
}

/* ============ PLANCHES (images + widgets) ============ */

.planches { counter-reset: planche; }

.planche {
  background: var(--papier-fonce);
  border: 2px solid var(--encre);
  box-shadow: 5px 5px 0 var(--bleu);
  margin: 2rem 0;
}

.planche__corps {
  padding: 1rem;
}

/* Les fichiers sources restent en pleine résolution ; on ne borne
   que l'affichage. height:auto préserve le ratio dans tous les cas. */
.planche__corps img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Planche pleine largeur : sans plafond, une image haute mangerait
   tout l'écran. */
.planche--pleine .planche__corps img { max-height: 460px; }

/* Planche latérale : le plafond est plus bas, sinon une image
   portrait descend bien plus bas que le texte censé l'entourer. */
.planche--gauche .planche__corps img,
.planche--droite .planche__corps img { max-height: 300px; }

/* Emplacement encore vide — à remplacer par l'image ou le widget */
.planche__slot {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--trait);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-align: center;
}

/* Le compteur avance sur les légendes : une image sans légende
   (un meme, par exemple) ne consomme pas de numéro de figure. */
.planche__legende {
  counter-increment: planche;
  border-top: 2px solid var(--encre);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.planche__legende::before {
  content: "FIG. " counter(planche) " — ";
  color: var(--rouge);
  font-weight: 500;
}

/* Les trois registres de placement -------------------------- */

.planche--pleine {
  clear: both;
  width: min(var(--cadre), 92vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 1180px) {
  /* clear: both — une seule planche flottante à la fois, sinon deux
     planches opposées prennent la colonne en étau et le texte devient
     illisible. */
  .planche--gauche,
  .planche--droite {
    width: 300px;
    margin-top: 0.4rem;
    clear: both;
  }
  .planche--gauche {
    float: left;
    margin-left: -190px;
    margin-right: 1.75rem;
  }
  .planche--droite {
    float: right;
    margin-right: -190px;
    margin-left: 1.75rem;
  }
}

/* Écrans intermédiaires : on flotte sans déborder */
@media (min-width: 780px) and (max-width: 1179px) {
  .planche--gauche,
  .planche--droite {
    width: 46%;
    margin-top: 0.4rem;
    clear: both;
  }
  .planche--gauche { float: left;  margin-right: 1.5rem; }
  .planche--droite { float: right; margin-left: 1.5rem; }
}

/* Écrans étroits : tout redevient un bloc */
@media (max-width: 779px) {
  .planche--gauche,
  .planche--droite,
  .planche--pleine {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }
  .planche { box-shadow: 4px 4px 0 var(--bleu); }
}

/* ============ BASCULE VERS LA PARTIE 2 ============ */

.bascule {
  clear: both;
  max-width: var(--colonne);
  margin: 4.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 3px solid var(--encre);
  text-align: center;
}

.bascule__question {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* Le bouton qui fera éclater la page — comportement à venir */
.bascule__bouton {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--rouge);
  border: 2px solid var(--encre);
  box-shadow: 5px 5px 0 var(--encre);
  padding: 0.9rem 1.6rem;
  cursor: pointer;
}

.bascule__bouton:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--encre); }
.bascule__bouton:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--encre); }

@media (prefers-reduced-motion: reduce) {
  .bascule__bouton:hover,
  .bascule__bouton:active { transform: none; }
}

/* ============ THÈME INVERSE — PARTIE 2 ============
   On réassigne les variables sur le body : tous les composants
   déjà écrits (planches, équations, widgets) se re-teintent seuls. */

body {
  transition: background-color 500ms ease;
}

body.sombre {
  --papier: #17141F;
  --papier-fonce: #221D2E;
  --encre: #F3EEE3;
  --encre-douce: #A79FB6;
  --bleu: #7C9BFF;
  --bleu-pale: #262A4D;
  --rouge: #FF6A45;
  --rouge-pale: #3A2018;
  --trait: #4A4358;
}

body.sombre .grain { opacity: 0.5; }

.partie2 {
  animation: monter 600ms 120ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Le titre reçoit le focus à la bascule, pour que les lecteurs
   d'écran atterrissent au bon endroit. Il n'est pas atteignable au
   clavier (tabindex -1), donc l'anneau n'apporte rien ici. */
.partie2 .entete__titre:focus { outline: none; }

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

/* ============ ÉCLATEMENT ============
   Chaque morceau est un calque plein écran contenant une copie de
   la page, découpé par un clip-path différent. Les copies étant
   superposées au pixel près, l'ensemble donne l'illusion d'une
   seule page qui se brise. */

.eclat {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}

.eclat__morceau {
  position: fixed;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
  transition: transform 760ms cubic-bezier(0.36, 0, 0.66, -0.4),
              opacity 760ms ease-in;
  transition-delay: var(--delai, 0ms);
}

.eclat--go .eclat__morceau {
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.92);
  opacity: 0;
}

/* Pendant la recomposition, l'état éclaté doit être posé sans
   transition, sinon les morceaux partent de leur place au lieu d'y
   arriver. */
.eclat--fige .eclat__morceau { transition: none; }

/* Ancre de section : discrète, révélée au survol du titre. */
.ancre {
  margin-left: 0.4em;
  font-family: var(--mono);
  font-size: 0.5em;
  font-weight: 400;
  color: var(--bleu);
  text-decoration: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

h2:hover .ancre,
.ancre:focus-visible { opacity: 1; }

/* Éclair bref à l'impact */
.eclat__flash {
  position: fixed;
  inset: 0;
  background: var(--encre);
  opacity: 0;
  animation: flash 260ms ease-out both;
}

@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: 0.5; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .partie2 { animation: none; }
  .eclat__morceau { transition: none; }
  .eclat__flash { animation: none; }
}