:root {
  --bleu: #002FA7;
  --blanc: #fff;
  --encre: var(--blanc);
  --fond: var(--bleu);
  --grille-fine: rgb(255 255 255 / .1);
  --grille-forte: rgb(255 255 255 / .22);

  --marge: 28px;
  --tete: 52px;
  --gouttiere: 32px;
  --pas: 24px;

  --titre: "Besley", "Clarendon", Georgia, serif;
  --figure: "Old Standard TT", "Times New Roman", serif;
  --texte: "Courier Prime", "Courier New", monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--marge) + var(--tete));
}

body {
  margin: 0;
  color: var(--encre);
  font: 400 18px/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
  background-color: var(--fond);
  background-image:
    linear-gradient(var(--grille-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px),
    linear-gradient(var(--grille-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-fine) 1px, transparent 1px);
  background-size:
    calc(var(--pas) * 5) calc(var(--pas) * 5),
    calc(var(--pas) * 5) calc(var(--pas) * 5),
    var(--pas) var(--pas),
    var(--pas) var(--pas);
}

h1, h2, h3, p, ol, dl, dd, figure { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.evitement {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 12px; background: var(--blanc); color: var(--bleu);
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* Cadre de la planche, fixé à la fenêtre */

.cadre {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  border: var(--marge) solid var(--bleu);
}
.cadre::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--blanc);
  outline: 1px solid var(--blanc);
  outline-offset: -7px;
}

.zones {
  position: absolute; display: flex;
  font-size: 11px; line-height: 1; color: var(--blanc);
}
.zones span { flex: 1; display: grid; place-items: center; border-left: 1px solid rgb(255 255 255 / .5); }
.zones span:first-child { border-left: 0; }
.zones--h { left: 0; right: 0; top: calc(var(--marge) * -1); height: var(--marge); }
.zones--v { top: 0; bottom: 0; left: calc(var(--marge) * -1); width: var(--marge); flex-direction: column; }
.zones--v span { border-left: 0; border-top: 1px solid rgb(255 255 255 / .5); }
.zones--v span:first-child { border-top: 0; }

/* Réticule de table à dessin */

.reticule {
  position: fixed; top: 0; left: 0; z-index: 45; pointer-events: none;
  background: var(--blanc); opacity: 0; transition: opacity .2s;
}
.reticule--v { width: 1px; height: 100vh; }
.reticule--h { height: 1px; width: 100vw; }
.has-reticule .reticule { opacity: .32; }
.sur-negatif .reticule { background: var(--bleu); }

/* En-tête */

.tete {
  position: fixed; z-index: 40;
  top: calc(var(--marge) + 2px); left: calc(var(--marge) + 2px); right: calc(var(--marge) + 2px);
  height: var(--tete);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px;
  padding: 0 calc(var(--gouttiere) - 2px);
  background: var(--bleu); color: var(--blanc);
  border-bottom: 1px solid var(--blanc);
}
.tete__nom { font: 700 19px/1 var(--titre); text-decoration: none; }
.tete__menu { display: none; }
.tete__nav { display: flex; gap: 28px; justify-self: center; font-size: 15px; }
.tete__nav a { text-decoration: none; white-space: nowrap; padding: 6px 0; border-bottom: 1px solid transparent; }
.tete__nav a:hover, .tete__nav a[aria-current] { border-bottom-color: var(--blanc); }
.tete__nav i { font: italic 400 17px/1 var(--figure); margin-right: 3px; }
.tete__info { justify-self: end; font-size: 15px; white-space: nowrap; }
.tete__cta {
  padding: 9px 16px; border: 1px solid var(--blanc);
  background: var(--blanc); color: var(--bleu);
  font: 700 15px/1 var(--texte); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.tete__cta:hover { background: var(--bleu); color: var(--blanc); }
.tete__xy { margin-left: 18px; font-variant-numeric: tabular-nums; }

/* Planche 1 : la scène qui se monte au défilement */

.pin { height: 760vh; }

.scene {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 27%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: 24px;
  padding: calc(var(--marge) + var(--tete) + 26px) calc(var(--marge) + var(--gouttiere)) calc(var(--marge) + 18px);
}

.scene__texte { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.accroche { font-size: 19px; line-height: 1.5; max-width: 32ch; transition: opacity .3s; }

.bouton {
  display: inline-block; margin-top: 22px; padding: 11px 18px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1px solid var(--encre); background: var(--fond); color: var(--encre);
  transition: background .15s, color .15s, opacity .3s;
}
.bouton:hover { background: var(--encre); color: var(--fond); }

.is-eclate .accroche, .is-eclate .scene__texte .bouton,
.is-rassemble .accroche, .is-rassemble .scene__texte .bouton { opacity: 0; pointer-events: none; }

/* Vue éclatée : le catalogue prend la place de l'accroche */

.legende { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
.is-eclate .legende { opacity: 1; visibility: visible; pointer-events: auto; }
.legende div + div { margin-top: 26px; }
.legende__titre {
  margin-bottom: 8px;
  font: 700 32px/1 var(--titre);
  paint-order: stroke fill; -webkit-text-stroke: 1.5px var(--blanc);
}
.legende__titre--plein { color: var(--blanc); }
.legende__titre--trait { color: var(--bleu); }
.legende ol { max-width: 350px; }
.legende a { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) auto; padding: 4px 8px 4px 0; font-size: 18px; line-height: 1.25; text-decoration: none; transition: background .12s, color .12s; }
.legende a::after { content: "→"; grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: .55; }
.legende b { grid-row: span 2; font: italic 400 20px/1.15 var(--figure); }
.legende span { grid-column: 2; font-size: 14px; }
.legende__texte { font-size: 16px; line-height: 1.4; max-width: 34ch; }
.legende a:hover, .legende a:focus-visible { background: var(--blanc); color: var(--bleu); }
.legende a:hover::after, .legende a:focus-visible::after { opacity: 1; }

.scene__dessin { grid-column: 2; grid-row: 1 / 3; min-height: 0; position: relative; z-index: 1; }

.scene__legende { grid-column: 1; grid-row: 2; position: relative; z-index: 2; min-height: 104px; }
.etat { position: absolute; left: 0; bottom: 10px; max-width: 30ch; font-size: 15px; line-height: 1.4; opacity: 0; transition: opacity .35s; }
.etat .fig { display: block; margin-bottom: 4px; }
[data-etat="monte"] .etat--monte,
[data-etat="eclate"] .etat--eclate { opacity: 1; }

.fig { font: italic 400 34px/1 var(--figure); }

.marque {
  grid-column: 1 / -1; grid-row: 3;
  --fit: 9.2;
  font: 700 calc((100vw - 2 * (var(--marge) + var(--gouttiere)) - 16px) / var(--fit))/.98 var(--titre);
  letter-spacing: -.012em;
  white-space: nowrap;
  position: relative; z-index: 0;
}
.marque span { paint-order: stroke fill; -webkit-text-stroke: 2px var(--blanc); transition: color .3s; }
.marque__blue { color: var(--bleu); }
.is-lit .marque__blue { color: var(--blanc); }
.is-lit .marque__data { color: var(--bleu); }

/* Engrenage du catalogue */

.engrenage { position: absolute; inset: 0; z-index: 3; display: none; opacity: 0; visibility: hidden; pointer-events: none; }
.js .engrenage { display: block; }
.engrenage__roue, .engrenage__pignon { position: absolute; will-change: transform; }
.engrenage__vue { position: absolute; }
.engrenage__repere { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.engrenage__repere .c { fill: none; stroke: var(--blanc); stroke-width: 1; stroke-dasharray: 16 4 2 4; }

.engrenage__fiches {
  position: absolute;
  top: calc(var(--marge) + var(--tete) + 24px);
  right: calc(var(--marge) + var(--gouttiere));
  width: min(680px, 48vw);
  height: 226px;
}
.fiche { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 28px; align-content: start; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
.fiche.is-active { opacity: 1; transform: none; }
.fiche__detail, .fiche__statut, .fiche__nom { grid-column: 1; }
.fiche__detail { margin-bottom: 10px; font: italic 400 24px/1 var(--figure); }
.fiche__statut { font: 700 34px/1 var(--titre); }
.fiche__nom { margin: 16px 0 20px; font: 700 clamp(40px, 4.8vw, 74px)/1 var(--titre); letter-spacing: -.015em; overflow-wrap: normal; }
.fiche__cotes { grid-column: 2; grid-row: 1 / span 2; font-size: 19px; line-height: 1.4; }
.fiche__usage { grid-column: 2; grid-row: 3; font-size: 16px; }
.engrenage__cta { position: absolute; right: 0; bottom: 0; margin: 0; }

/* Vidéo : tirage cyanotype sur calque, scotché au plan */

.tirages { position: absolute; }
.tirage {
  position: absolute; inset: 0; margin: 0; visibility: hidden;
  padding: 0 var(--papier, 14px) var(--papier, 14px);
  background: rgb(238 242 250 / .9);
  box-shadow: 0 1px 2px rgb(0 8 50 / .35), 0 18px 34px rgb(0 8 50 / .4);
  will-change: transform;
}
.tirage i { position: absolute; width: 66px; height: 20px; background: rgb(255 255 255 / .5); }
.tirage i:nth-of-type(1) { left: -22px; top: 6px; transform: rotate(-42deg); }
.tirage i:nth-of-type(2) { right: -22px; top: 6px; transform: rotate(42deg); }
.tirage i:nth-of-type(3) { left: -22px; bottom: 6px; transform: rotate(42deg); }
.tirage i:nth-of-type(4) { right: -22px; bottom: 6px; transform: rotate(-42deg); }
.tirage figcaption { display: flex; justify-content: space-between; align-items: center; height: var(--bandeau, 30px); color: var(--bleu); font: italic 400 19px/1 var(--figure); }
.tirage--accueil {
  --papier: 10px; --bandeau: 24px;
  display: none; z-index: 2; opacity: 0; transform: translateY(-14px) rotate(-3deg);
  transition: opacity .3s, transform .4s, visibility .3s;
}
.js .tirage--accueil { display: block; }
.js .tirage--accueil[hidden] { display: none; }
[data-etat="monte"] .tirage--accueil { opacity: 1; visibility: visible; transform: rotate(-1.4deg); }
.tirage--accueil i { width: 48px; height: 15px; }
.tirage--accueil figcaption { font-size: 15px; }
.sans-bouton .scene__texte .bouton { display: none; }
.sans-legende .etat--monte { visibility: hidden; }
.tirage__image { position: relative; isolation: isolate; overflow: hidden; background: var(--bleu); aspect-ratio: 16 / 9; }
.tirage__image video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.05); }
.tirage__image::after { content: ""; position: absolute; inset: 0; background: var(--bleu); mix-blend-mode: screen; }
.is-roue .engrenage__cta { pointer-events: auto; }

/* Dessins */

.dessin { display: block; width: 100%; height: 100%; overflow: visible; }
.dessin * { vector-effect: non-scaling-stroke; }
.dessin .o { fill: var(--bleu); stroke: var(--blanc); stroke-width: 1.2; stroke-linejoin: round; }
.dessin .p { fill: var(--bleu); stroke: var(--blanc); stroke-width: .6; }
.dessin .l { fill: none; stroke: var(--blanc); stroke-width: 1; }
.dessin .g { fill: none; stroke: var(--blanc); stroke-width: 1.5; }
.dessin .f { fill: none; stroke: var(--blanc); stroke-width: .55; }
.dessin .d { fill: none; stroke: var(--blanc); stroke-width: .75; stroke-dasharray: 5 4; }
.dessin .c { fill: none; stroke: var(--blanc); stroke-width: .75; stroke-dasharray: 16 4 2 4; }
.dessin .tube, .dessin .tube-in, .dessin .led--tube { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.dessin .tube { stroke: var(--blanc); }
.dessin .tube-in { stroke: var(--bleu); }
.dessin .lead { fill: none; stroke: var(--blanc); stroke-width: .8; }
.dessin .ref { fill: var(--blanc); font: 400 60px var(--titre); dominant-baseline: central; }
.dessin .cote { fill: var(--blanc); font: 400 36px var(--texte); }

.dessin .renvoi { opacity: var(--renvois, 0); }
.dessin .guide { opacity: 0; }

.dessin .part { transition: opacity .3s; }
.is-eclate .dessin .part--decor { opacity: .3; }
.is-rassemble .dessin .part--decor { opacity: 0; transition: opacity .5s; }
.dessin.is-focus .part:not(.on) { opacity: .16; }

.dessin .led { opacity: 0; }
.dessin .led--plein { fill: var(--blanc); stroke: none; }
.dessin .led--tube { stroke: var(--blanc); }
.is-lit .dessin .led { animation: allume .5s steps(4) calc(var(--i) * .11s) both; }
.is-demonte .dessin .led.garde { opacity: 1; }
.roue .ref { font-size: 30px; }

.dessin .cone { stroke: none; }
.dessin .beam { opacity: 0; transition: opacity .35s calc(var(--i) * .05s); }
.is-lit .dessin .beam { opacity: 1; }

@keyframes allume {
  0% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: .2; } 100% { opacity: 1; }
}

.js .scene__dessin .dessin { animation: trace 1.5s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes trace {
  from { clip-path: inset(-20% -40% 120% -40%); }
  to { clip-path: inset(-20% -40% -20% -40%); }
}

/* Sections */

.section {
  position: relative;
  padding: clamp(120px, 18vh, 200px) calc(var(--marge) + var(--gouttiere)) clamp(96px, 14vh, 160px);
}
.section__tete { margin-bottom: clamp(48px, 7vh, 88px); }
.kicker { font-size: 17px; margin-bottom: 10px; }
h2 { font: 700 clamp(46px, 8.6vw, 136px)/.98 var(--titre); letter-spacing: -.015em; overflow-wrap: anywhere; hyphens: manual; }
  display: grid;
  grid-template-columns: clamp(80px, 11vw, 170px) minmax(0, 1fr) minmax(0, 44%);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding-block: clamp(32px, 5vh, 64px);
  border-top: 1px solid var(--encre);
}

.js .trace .dessin { clip-path: inset(-5% 105% -5% -5%); transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1); }
.js .trace.is-in .dessin { clip-path: inset(-5% -5% -5% -5%); }

/* Régie : le procédé en trois étapes */

.regie__tete {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.regie__figure { position: relative; height: clamp(300px, 56vh, 560px); }
.regie__figure figcaption { position: absolute; right: 0; bottom: -6px; }
.regie__figure .led { opacity: 1; }

.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--encre); border-bottom: 1px solid var(--encre); }
.etape { padding: clamp(20px, 3vh, 32px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 40px); border-left: 1px solid var(--encre); }
.etape:first-child { padding-left: 0; border-left: 0; }
.etape__lettre { font: italic 400 44px/1 var(--figure); margin-bottom: 14px; }
.etape h3 { font: 700 clamp(28px, 3.2vw, 48px)/1.05 var(--titre); margin-bottom: 12px; }
.etape p:last-child { font-size: 18px; max-width: 32ch; }

/* Domaine d'application : la nomenclature */

.domaines { width: 100%; border-collapse: collapse; border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre); }
.domaines thead th { padding: 10px 16px; text-align: left; font: 400 15px/1 var(--texte); border-bottom: 1px solid var(--encre); }
.domaines tbody tr { border-top: 1px solid var(--encre); background: var(--fond); transition: background .12s, color .12s; }
.domaines tbody tr:first-child { border-top: 0; }
.domaines tbody tr:hover { background: var(--encre); color: var(--fond); }
.domaines td, .domaines tbody th { padding: clamp(14px, 2.2vh, 24px) 16px; vertical-align: baseline; text-align: left; }
.domaines td:first-child { width: 8%; font: italic 400 30px/1 var(--figure); }
.domaines tbody th { font: 700 clamp(28px, 4vw, 62px)/1.05 var(--titre); }
.domaines td:last-child { width: 32%; font-size: 17px; }

/* Art antérieur : tirage inversé */

.negatif {
  --encre: var(--bleu);
  --fond: var(--blanc);
  --grille-fine: rgb(0 47 167 / .1);
  --grille-forte: rgb(0 47 167 / .22);
  color: var(--encre);
  background-color: var(--fond);
  background-image:
    linear-gradient(var(--grille-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px),
    linear-gradient(var(--grille-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-fine) 1px, transparent 1px);
  background-size:
    calc(var(--pas) * 5) calc(var(--pas) * 5),
    calc(var(--pas) * 5) calc(var(--pas) * 5),
    var(--pas) var(--pas),
    var(--pas) var(--pas);
}
.anterieur { font-style: italic; font-weight: 700; text-decoration: underline; text-decoration-thickness: .045em; text-underline-offset: .12em; }

.origine { display: grid; gap: clamp(36px, 6vh, 72px); }
.origine__hmf { font: 900 calc((100vw - 2 * (var(--marge) + var(--gouttiere)) - 16px) / 2.95)/.8 var(--titre); letter-spacing: -.03em; white-space: nowrap; }
.origine__texte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.origine__texte > p { font-size: 20px; max-width: 44ch; }

.duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--encre); }
.duo > div { padding: 18px 16px 0 0; }
.duo dt { font: 700 clamp(44px, 5.4vw, 84px)/1 var(--titre); paint-order: stroke fill; -webkit-text-stroke: 2px var(--encre); }
.duo__plein { color: var(--encre); }
.duo__trait { color: var(--fond); }
.duo dd { margin-top: 10px; font-size: 17px; }

/* Cartouche */

.cartouche {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; padding: 1px;
  background: var(--encre);
  border: 2px solid var(--encre);
}
.cellule {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px 14px; margin: 0;
  font-size: 15px; background: var(--fond);
}
.cellule--large { grid-column: span 2; }
.cellule--description { grid-column: span 3; }
.cellule input, .cellule textarea {
  width: 100%; padding: 0; border: 0; border-radius: 0; resize: vertical;
  background: transparent; color: var(--blanc);
  font: 700 21px/1.35 var(--texte);
}
.cellule input:focus, .cellule textarea:focus { outline: none; }
.cellule:focus-within { outline: 2px solid var(--blanc); outline-offset: -5px; }
.cellule--envoi {
  grid-column: 1 / -1; align-items: center; justify-content: center;
  padding: 26px; border: 0; cursor: pointer;
  background: var(--blanc); color: var(--bleu);
  font: 700 clamp(26px, 3.6vw, 52px)/1 var(--titre);
  transition: background .15s, color .15s;
}
.cellule--envoi:hover { background: var(--bleu); color: var(--blanc); }
.cartouche__statut { grid-column: 1 / -1; background: var(--fond); padding: 0 16px; font-size: 16px; }
.cartouche__statut:not(:empty) { padding-block: 12px; }

.pied { margin-top: 40px; font-size: 15px; }

/* Petits écrans */

@media (max-height: 850px) and (min-width: 761px) {
  [data-etat="eclate"] .etat--eclate { opacity: 0; }
}

@media (max-height: 770px) and (min-width: 761px) {
  .legende span { display: none; }
}

@media (max-width: 1360px) {
  .tete__nav { gap: 16px; font-size: 14px; }
  .tete__xy { display: none; }
}

@media (max-width: 1020px) {
  .tete { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; }
  .tete__menu {
    display: block; padding: 5px 8px; font: 700 13px/1 var(--texte);
    background: transparent; color: var(--blanc); border: 1px solid var(--blanc);
  }
  .tete__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 14px 12px; font-size: 18px;
    background: var(--bleu); border-bottom: 1px solid var(--blanc);
  }
  .tete__nav.is-open { display: flex; }
}

@media (max-width: 760px) {
  :root { --marge: 8px; --tete: 46px; --gouttiere: 14px; }

  .zones { display: none; }
  .tete { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .tete__nom { font-size: 15px; line-height: 1.05; }
  .tete__info { display: none; }
  .tete__cta { order: 1; padding: 8px 9px; font-size: 13px; }
  .tete__menu { order: 2; width: 34px; height: 30px; padding: 0; font-size: 0; }
  .tete__menu::before { content: "≡"; font-size: 20px; line-height: 1; }

  .pin { height: 720vh; }
  .engrenage__fiches { top: calc(var(--marge) + var(--tete) + 2px); left: calc(var(--marge) + 2px); right: calc(var(--marge) + 2px); width: auto; height: 144px; padding: 10px 12px; background: var(--bleu); border-bottom: 1px solid var(--blanc); }
  .fiche { display: block; inset: 10px 12px auto; }
  .tirage { --papier: 9px; --bandeau: 24px; }
  .tirage i { width: 44px; height: 14px; }
  .tirage figcaption { font-size: 15px; }
  .tirage--accueil { --papier: 6px; --bandeau: 18px; }
  .tirage--accueil i { width: 30px; height: 10px; }
  .tirage--accueil figcaption { font-size: 12px; }
  .fiche__statut { font-size: 20px; }
  .fiche__nom { margin: 6px 0 6px; font-size: 40px; }
  .fiche__cotes { font-size: 14px; }
  .fiche__usage { display: none; }
  .engrenage__cta { top: 10px; right: 12px; bottom: auto; padding: 7px 10px; font-size: 13px; }
  .fiche__detail { display: none; }
  .scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding-top: calc(var(--marge) + var(--tete) + 14px);
    padding-bottom: calc(var(--marge) + 12px);
  }
  .scene__texte { grid-row: 1; }
  .accroche { font-size: 15px; line-height: 1.4; max-width: none; }
  .scene__texte .bouton { display: none; }
  .legende { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .legende div + div { margin-top: 0; }
  .legende__titre { margin-bottom: 4px; font-size: 22px; -webkit-text-stroke-width: 1px; }
  .legende a { padding: 3px 2px 3px 0; font-size: 14px; }
  .legende b { font-size: 15px; }
  .legende span { display: none; }
  .legende__texte { font-size: 13px; line-height: 1.3; }
  .scene__dessin { grid-column: 1; grid-row: 2; padding-block: 8px; }
  .scene__legende { grid-column: 1; grid-row: 3; min-height: 62px; }
  .etat { max-width: none; font-size: 13px; bottom: 6px; }
  .etat .fig { font-size: 22px; margin-bottom: 2px; }
  .marque { grid-column: 1; grid-row: 4; font-size: 17.4vw; line-height: .94; white-space: normal; }
  .marque span { display: block; -webkit-text-stroke-width: 1.5px; }
  .scene__dessin .dessin .ref { font-size: 92px; }

  body { font-size: 16px; }

  .regie__tete { grid-template-columns: minmax(0, 1fr); }
  .regie__figure { height: 270px; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .etape, .etape:first-child { padding: 18px 0 22px; border-left: 0; border-top: 1px solid var(--encre); }
  .etape:first-child { border-top: 0; }
  .etape__lettre { font-size: 34px; margin-bottom: 8px; }
  .etape p:last-child { font-size: 16px; max-width: none; }

  .domaines thead { display: none; }
  .domaines tbody tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 12px 4px; }
  .domaines td, .domaines tbody th { padding: 0; }
  .domaines td:first-child { width: auto; font-size: 24px; }
  .domaines td:last-child { grid-column: 2; width: auto; font-size: 15px; margin-top: 4px; }

  .origine__texte { grid-template-columns: minmax(0, 1fr); }
  .origine__texte > p { font-size: 17px; }

  .cartouche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cellule--large, .cellule--description, .cellule--lieu { grid-column: 1 / -1; }
  .cellule input, .cellule textarea { font-size: 18px; }
}

@media (max-width: 350px) {
  .tete { gap: 8px; }
  .tete__nom { font-size: 14px; }
  .tete__cta { padding: 7px 6px; font-size: 11px; }
  .tete__menu { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin { height: auto; }
  .scene { position: relative; height: auto; min-height: 100vh; }
  .scene__dessin { min-height: 60vh; }
  .legende { position: static; margin-top: 28px; opacity: 1; visibility: visible; pointer-events: none; }
  .legende a::after { content: none; }
  .js .engrenage, .js .tirage--accueil { display: none; }
  .js .scene__dessin .dessin { animation: none; }
  .js .trace .dessin { clip-path: none; transition: none; }
}