/* ————————————————————————————————————————————————
   LE CARNET DE CHANTIER — scrollytelling cinématique.
   Scènes papier animées (Seedream + Kling), annotations manuscrites.
   Lora · Caveat · Manrope.
   ———————————————————————————————————————————————— */

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0152-0153;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-024F, U+0152-0153;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0152-0153;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0152-0153;
}

:root {
  --nuit: #131F3A;
  --nuit-2: #0D1730;
  --papier: #F6F0E1;
  --papier-2: #EFE7D2;
  --encre: #22293B;
  --encre-douce: #5A6172;
  --vermillon: #D93A2B;
  --ambre: #F0A050;
  --serif: 'Lora', Georgia, serif;
  --hand: 'Caveat', cursive;
  --sans: 'Manrope', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--nuit);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--vermillon); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(217, 58, 43, .25); }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* ————— Chapitres vidéo ————— */
.chapitre {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: clip;
  display: flex;
  /* centré, pour que le vide se répartisse quelle que soit la longueur du texte :
     avec un ancrage bas, un chapitre court laissait tout le vide en haut.
     "safe" : si le contenu dépasse la hauteur, on retombe sur un alignement haut
     plutôt que de couper le début du titre. */
  align-items: safe center;
}
.chapitre video, .chapitre .still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.chapitre::after {
  content: '';
  position: absolute; inset: 0;
  /* le texte étant remonté vers le milieu, la protection doit monter avec lui */
  background: linear-gradient(to top,
    rgba(13, 23, 48, .86) 0%,
    rgba(13, 23, 48, .68) 30%,
    rgba(13, 23, 48, .40) 58%,
    rgba(13, 23, 48, .14) 84%,
    rgba(13, 23, 48, .08) 100%);
}
.chapitre .plaque {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: min(1060px, calc(100% - clamp(32px, 8vw, 120px)));
  /* décale le centre optique sous le milieu géométrique : un bloc centré à 50 %
     exact paraît trop haut, et l'image doit garder le dessus de la scène. */
  padding-top: clamp(30px, 8vh, 90px);
  color: var(--papier);
}
.chapitre .num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ambre);
  display: flex; align-items: center; gap: 14px;
}
.chapitre .num::after { content: ''; flex: none; width: 44px; height: 1px; background: var(--ambre); opacity: .7; }
.chapitre h1, .chapitre h2 {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 12px 0 10px;
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(13, 23, 48, .8);
}
.chapitre .propos {
  max-width: 54ch;
  font-size: clamp(.9688rem, 1.5vw, 1.125rem);
  color: rgba(246, 240, 225, .88);
  text-shadow: 0 1px 12px rgba(13, 23, 48, .9);
}
.chapitre .propos b { color: #fff; font-weight: 600; }

/* Chapitre I : le bloc respire au lieu d'être plaqué au bord.
   Les chapitres suivants gardent l'ancrage bas — le texte y monte au scroll. */
#atelier .propos { max-width: 46ch; }

/* voile haut : le scrim principal ne vaut que .10 en haut, or c'est là que la
   scène est la plus claire (lampe, plans blancs). Chapitre I seulement. */
#atelier::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(110px, 18vh, 180px);
  z-index: 1;
  background: linear-gradient(to bottom, rgba(13, 23, 48, .55), transparent);
}
/* en-tête de document : métadonnée, pas titre — même gabarit que .plaque */
.entete {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  margin: 0 auto;
  width: min(1060px, calc(100% - clamp(32px, 8vw, 120px)));
  padding-top: clamp(24px, 4vh, 44px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(246, 240, 225, .72);
}

/* annotation manuscrite sur scène */
.annotation {
  position: absolute;
  z-index: 3;
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: #FFD9A0;
  transform: rotate(-4deg);
  text-shadow: 0 2px 14px rgba(13, 23, 48, .9);
  max-width: 30ch;
}
.annotation .fleche {
  display: block;
  font-size: 1.6em;
  transform: rotate(12deg);
  line-height: .6;
}

/* défiler indicateur */
.descendre {
  position: absolute;
  right: clamp(18px, 4vw, 48px);
  bottom: clamp(38px, 7vh, 84px);
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: .6563rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(246, 240, 225, .75);
  display: flex; align-items: center; gap: 12px;
}
.descendre::after {
  content: '';
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--ambre), transparent);
  animation: goutte 2.1s ease-in-out infinite;
}
@keyframes goutte {
  0% { transform: scaleY(.15); transform-origin: top; opacity: .1; }
  45% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ————— Pages papier ————— */
.page {
  position: relative;
  background: var(--papier);
  padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 72px);
}
/* bord déchiré */
.page::before, .page::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 14px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 8 Q6 2 13 7 T27 6 T41 8 T55 5 T69 8 T83 4 T97 8 T111 5 L120 8 L120 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 8 Q6 2 13 7 T27 6 T41 8 T55 5 T69 8 T83 4 T97 8 T111 5 L120 8 L120 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  -webkit-mask-size: 120px 14px;
  mask-size: 120px 14px;
}
.page::before { top: -13px; }
.page::after { bottom: -13px; transform: scaleY(-1); }

.page .cadre { max-width: 1020px; margin: 0 auto; }

.filet {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vermillon);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.filet::after { content: ''; width: 44px; height: 1px; background: currentColor; opacity: .6; }

.page h2.titre, .page h1.titre {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 16px;
  max-width: 26ch;
  text-wrap: balance;
}
.page .chapo { max-width: 58ch; color: var(--encre-douce); margin-bottom: clamp(26px, 4vh, 44px); }
.page .chapo b { color: var(--encre); font-weight: 600; }

/* notes de chantier (compris) */
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); }
.note {
  position: relative;
  background: #FDFAF1;
  border: 1px solid rgba(34, 41, 59, .14);
  box-shadow: 0 2px 6px rgba(34, 41, 59, .07), 0 12px 30px rgba(34, 41, 59, .07);
  padding: 22px 24px 20px;
  /* titre et texte alignés d'une carte à l'autre : les deux lignes de la carte
     sont des pistes de la grille parente, donc partagées par toute la rangée */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 6px;
}
.note::before {
  /* morceau de ruban adhésif */
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 86px; height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(240, 160, 80, .35);
  border-left: 1px dashed rgba(34, 41, 59, .15);
  border-right: 1px dashed rgba(34, 41, 59, .15);
}
.note:nth-child(even) { transform: rotate(.4deg); }
.note:nth-child(odd) { transform: rotate(-.35deg); }
.note .lu {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--vermillon);
  line-height: 1.15;
  display: block;
  margin-bottom: 8px;
}
/* 1.3 et non l'interligne de corps hérité (1.65) : un titre se serre, il ne s'aère
   pas plus que son paragraphe. Aligné sur .materiau h3. */
.note h3 { font-size: 1.0625rem; font-weight: 640; line-height: 1.3; }
.note p { font-size: .9063rem; color: var(--encre-douce); }
.note p b { color: var(--encre); font-weight: 600; }

/* matériaux (pourquoi moi) */
.materiaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 34px); }
.materiau {
  border-top: 3px solid var(--vermillon);
  background: #FDFAF1;
  border-left: 1px solid rgba(34, 41, 59, .12);
  border-right: 1px solid rgba(34, 41, 59, .12);
  border-bottom: 1px solid rgba(34, 41, 59, .12);
  box-shadow: 0 2px 6px rgba(34, 41, 59, .06), 0 12px 30px rgba(34, 41, 59, .07);
  padding: 22px 24px;
  /* même principe que .note, sur trois lignes : étiquette, titre, texte.
     row-gap 0 : les margin-bottom existantes portent déjà l'espacement */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}
.materiau .etiquette {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6563rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vermillon);
  display: block; margin-bottom: 10px;
}
.materiau h3 { font-size: 1.125rem; font-weight: 640; line-height: 1.25; margin-bottom: 8px; }
.materiau p { font-size: .9063rem; color: var(--encre-douce); }
.materiau p b { color: var(--encre); font-weight: 600; }

/* repli : sans subgrid, on réserve deux lignes de titre — approximation, mais
   les cartes ne se décalent plus */
@supports not (grid-template-rows: subgrid) {
  .note h3, .materiau h3 { min-height: 2.6em; }
}

/* jalons (parcours) */
.jalons { position: relative; max-width: 780px; }
.jalons::before {
  content: '';
  position: absolute; top: 6px; bottom: 6px; left: 7px;
  border-left: 2px dashed rgba(217, 58, 43, .45);
}
.jalon {
  position: relative;
  padding: 0 0 clamp(22px, 3.4vh, 34px) 42px;
}
.jalon::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--papier);
  border: 3px solid var(--vermillon);
}
.jalon .quand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermillon);
}
.jalon h3 { font-size: 1.125rem; font-weight: 640; margin: 3px 0 4px; }
.jalon h3 span { font-weight: 420; font-style: italic; color: var(--encre-douce); }
.jalon p { font-size: .9375rem; color: var(--encre-douce); max-width: 60ch; }
.jalon p b { color: var(--encre); font-weight: 600; }
.jalon .griffe {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--vermillon);
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-top: 4px;
}

/* questions du maître d'ouvrage */
.questions { max-width: 860px; }
.questions details {
  background: #FDFAF1;
  border: 1px solid rgba(34, 41, 59, .13);
  box-shadow: 0 2px 6px rgba(34, 41, 59, .05);
  margin-bottom: 12px;
}
.questions summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 20px;
  font-weight: 630;
  font-size: 1.0313rem;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary .q {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--vermillon);
  flex: none;
  line-height: 1;
}
.questions summary .ouvrir { margin-left: auto; color: var(--encre-douce); font-family: var(--sans); font-size: 1.2rem; transition: transform .25s; }
.questions details[open] .ouvrir { transform: rotate(45deg); }
.questions .rep { padding: 0 20px 18px 54px; font-size: .9375rem; color: var(--encre-douce); max-width: 66ch; }
.questions .rep b { color: var(--encre); font-weight: 600; }

/* phases de chantier (90 jours) */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 34px); }
.phase {
  background: #FDFAF1;
  border: 1px solid rgba(34, 41, 59, .13);
  box-shadow: 0 2px 6px rgba(34, 41, 59, .06), 0 12px 30px rgba(34, 41, 59, .07);
  padding: 22px 24px;
}
.phase .periode {
  font-family: var(--sans);
  font-weight: 700; font-size: .6563rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vermillon);
}
.phase h3 { font-size: 1.1875rem; font-weight: 650; margin: 6px 0 10px; }
.phase ul { list-style: none; }
.phase li {
  position: relative;
  font-size: .9063rem; color: var(--encre-douce);
  padding: 3px 0 3px 18px;
}
.phase li::before { content: '—'; position: absolute; left: 0; color: var(--vermillon); }
.phase li b { color: var(--encre); font-weight: 600; }
.mention { margin-top: clamp(20px, 3vh, 32px); font-style: italic; color: var(--encre-douce); max-width: 60ch; }

/* croquis d'étude (hypothèses) */
.croquis { columns: 2; column-gap: clamp(18px, 3vw, 34px); max-width: 1020px; }
.hypothese {
  break-inside: avoid;
  background: #FDFAF1;
  border: 1px solid rgba(34, 41, 59, .13);
  box-shadow: 0 2px 6px rgba(34, 41, 59, .05);
  padding: 16px 20px 14px;
  margin-bottom: clamp(14px, 2vw, 22px);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}
.hypothese .n {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--vermillon);
  line-height: 1;
}
.hypothese h3 { font-size: .9844rem; font-weight: 650; margin-bottom: 3px; }
.hypothese p { font-size: .8594rem; color: var(--encre-douce); }

/* clôture (sur le chapitre phare) */
.chapitre .cta-rangee { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; }
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s;
}
.bouton.plein { background: var(--vermillon); color: #FFF4E6; box-shadow: 0 10px 30px rgba(217, 58, 43, .4); }
.bouton.ligne { border: 1.5px solid rgba(246, 240, 225, .5); color: var(--papier); }
.bouton:hover { transform: translateY(-2px); }
.chapitre .signature {
  margin-top: 26px;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.5rem;
  color: #FFD9A0;
  transform: rotate(-2deg);
  display: inline-block;
}
.chapitre .pied {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: .6563rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246, 240, 225, .6);
  display: flex; gap: 22px; flex-wrap: wrap;
}
.chapitre .pied a { text-underline-offset: 4px; }
.chapitre .pied a:hover { color: var(--papier); }

/* révélations */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s ease; }
.rv.vu { opacity: 1; transform: none; }

/* ————— Onglets de tranche —————
   La tranche d'un registre : un bloc de papier adossé au bord droit de l'écran,
   titré verticalement, où chaque ligne est une languette. Un seul objet plein
   plutôt que cinq pastilles flottantes — c'est ce qui le rend repérable sur les
   scènes sombres. Sommaire et repère de progression confondus. */
.onglets {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  display: flex;
  align-items: stretch;
  /* même papier que les cartes de la page : sur une section claire, la tranche
     doit se détacher du fond comme une note posée dessus, pas s'y fondre */
  background: #FDFAF1;
  border: 1px solid rgba(34, 41, 59, .2);
  border-right: none;
  border-radius: 7px 0 0 7px;
  /* ombre longue et portée vers la gauche : la tranche décolle du fond, quel que
     soit ce qu'il y a dessous — scène de nuit comme page de papier */
  box-shadow: -10px 8px 34px rgba(13, 23, 48, .42), -1px 0 0 rgba(255, 255, 255, .5) inset;
  /* le carnet s'ouvre avant de montrer sa tranche : révélé après le chapitre I,
     et il entre en glissant depuis le bord — c'est ce mouvement qui le fait voir */
  transform: translateY(-50%) translateX(102%);
  opacity: 0;
  visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .8, .25, 1), opacity .45s ease, visibility .6s;
}
.onglets.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
}

/* titre de tranche, dans le sens de la reliure */
.tranche {
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 1px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .6563rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vermillon);
  background: var(--papier-2);
  border-right: 1px solid rgba(34, 41, 59, .13);
  border-radius: 7px 0 0 7px;
}

.pile { display: flex; flex-direction: column; }

.onglet {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 54px;
  padding: 13px 0 13px 16px;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: var(--encre-douce);
  transition: width .38s cubic-bezier(.2, .8, .25, 1), background .2s ease, color .2s ease;
}
.onglet + .onglet { border-top: 1px solid rgba(34, 41, 59, .1); }
/* le filet de section active, posé sur la pliure */
.onglet::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vermillon);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .3s ease;
}
.onglet .chiffre {
  flex: none;
  width: 22px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.onglet .nom {
  font-family: var(--serif);
  font-weight: 550;
  font-size: .9375rem;
  line-height: 1;
}
/* déploiement : au survol du bloc, et une fois à l'arrivée pour se faire voir */
.onglets:hover .onglet,
.onglets:focus-within .onglet,
.onglets.deploie .onglet { width: 198px; }
/* survol : le lavis d'ambre du ruban adhésif des notes. Distinct de l'état actif,
   qui lui ne joue que sur le filet et l'encre — deux signaux qui ne se confondent pas. */
.onglet:hover, .onglet:focus-visible { background: rgba(240, 160, 80, .16); color: var(--encre); }
.onglet[aria-current] { color: var(--encre); }
.onglet[aria-current]::before { transform: scaleY(1); }
.onglet[aria-current] .chiffre { color: var(--vermillon); }
.onglet[aria-current] .nom { font-weight: 640; }

/* desktop étroit : le bloc entier ne se déplie plus, seule la languette visée
   sort — une ligne de texte masquée au lieu de cinq */
@media (min-width: 881px) and (max-width: 1160px) {
  .onglets:hover .onglet, .onglets:focus-within .onglet { width: 54px; }
  .onglets:hover .onglet:hover,
  .onglets:focus-within .onglet:focus-visible,
  .onglets.deploie .onglet { width: 198px; }
}

/* ————— Responsive ————— */
@media (max-width: 880px) {
  .notes, .materiaux, .phases { grid-template-columns: 1fr; }
  .croquis { columns: 1; }
  .annotation { display: none; }
  .descendre { display: none; }
  .chapitre { min-height: 100svh; }
  /* écran étroit : le titre prend déjà 5-6 lignes, on rend la marge haute */
  .chapitre .plaque { padding-top: clamp(20px, 4vh, 44px); }
  #atelier .propos { max-width: none; }
  .entete { font-size: .625rem; letter-spacing: .16em; }

  /* écran étroit : la tranche passe en pied de page — une bande de papier
     collée en bas, chiffres seuls, le filet vermillon souligne la section. */
  .onglets {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: translateY(100%);
    justify-content: center;
    background: var(--papier-2);
    border: none;
    border-top: 1px solid rgba(34, 41, 59, .16);
    border-radius: 0;
    box-shadow: 0 -6px 22px rgba(13, 23, 48, .3);
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
  }
  .onglets.visible { transform: translateY(0); }
  .tranche { display: none; }
  .pile { flex-direction: row; flex: 1; justify-content: center; }
  .onglet + .onglet { border-top: none; }
  .onglet, .onglets:hover .onglet, .onglets:focus-within .onglet,
  .onglets.deploie .onglet, .onglets:hover .onglet:hover {
    width: auto;
    flex: 1 1 0;
    max-width: 76px;
    justify-content: center;
    padding: 9px 0;
    background: none;
    border: none;
    border-radius: 3px;
    box-shadow: none;
    transform: none;
  }
  .onglet .nom { display: none; }
  .onglet .chiffre { width: auto; font-size: .75rem; }
  .onglet::before {
    top: auto; bottom: 2px; left: 50%;
    width: 24px; height: 3px;
    transform: translateX(-50%) scaleX(0);
  }
  .onglet[aria-current]::before { transform: translateX(-50%) scaleX(1); }
  /* la bande couvrirait la fin du dernier chapitre */
  #phare .plaque { padding-bottom: 54px; }
}

@media (max-width: 480px) {
  /* les deux mentions ne tiennent pas sur une ligne — le nom suffit */
  .entete span + span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .descendre::after { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .onglets, .onglet, .onglet::before { transition: none; }
  .chapitre video { display: none; }
  .chapitre .still { display: block !important; }
}