/* Making-of « Leave the Window Open ». Design system Versio : Geist et Geist Mono, angles droits,
   libellés en capitales à chasse fixe, fonds qui alternent d'une section à l'autre.
   Mise en page : en-tête nuit avec les deux montages, sept étapes en sections alternées A / B, pied nuit.
   Sombre par défaut (thème nuit) ; en clair, les sections A et B prennent le blanc et le gris pâle de la charte. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/Geist-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/Geist-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/Geist-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/Geist-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/Geist-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/Geist-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/GeistMono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/GeistMono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/GeistMono-400-symbols2.woff2) format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/GeistMono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/GeistMono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/GeistMono-500-symbols2.woff2) format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }

:root {
  color-scheme: dark;
  /* Fond nuit : le même dans les deux thèmes (en-tête, pied). */
  --n-bg: #050b1a; --n-panel: #0a1430; --n-fg: #ffffff; --n-soft: #c9d3e6; --n-muted: #9aa8c4; --n-dim: #7385a8;
  --n-acc: #15a8dc; --n-line: #16233f; --n-line2: #2a3d63;
  /* Fond A : nuit décalée en sombre, blanc en clair. */
  --a-bg: #0a1430; --a-panel: #050b1a; --a-fg: #ffffff; --a-soft: #c9d3e6; --a-muted: #9aa8c4; --a-dim: #7385a8;
  --a-acc: #15a8dc; --a-line: #2a3d63; --a-line2: #2a3d63;
  /* Fond B : nuit en sombre, gris pâle en clair. */
  --b-bg: #050b1a; --b-panel: #0a1430; --b-fg: #ffffff; --b-soft: #c9d3e6; --b-muted: #9aa8c4; --b-dim: #7385a8;
  --b-acc: #15a8dc; --b-line: #16233f; --b-line2: #2a3d63;
  /* Fixes. */
  --brand: #15a8dc; --on-brand: #050b1a; --night: #050b1a; --on-night: #ffffff; --code-comment: #9aa8c4;
  --mark: rgba(21, 168, 220, 0.28);

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 1320px;
  --measure: 760px;
  --gutter: clamp(16px, 3vw, 48px);
  --touch: 44px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --a-bg: #ffffff; --a-panel: #f4f6f9; --a-fg: #0a1428; --a-soft: #26324a; --a-muted: #4e5b74; --a-dim: #66738a;
    --a-acc: #05709d; --a-line: #e3e7ee; --a-line2: #c9d0dc;
    --b-bg: #f1f3f7; --b-panel: #e6eaf0; --b-fg: #0a1428; --b-soft: #26324a; --b-muted: #4a576f; --b-dim: #626f86;
    --b-acc: #05709d; --b-line: #dde2ea; --b-line2: #c3cbd8;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --a-bg: #ffffff; --a-panel: #f4f6f9; --a-fg: #0a1428; --a-soft: #26324a; --a-muted: #4e5b74; --a-dim: #66738a;
  --a-acc: #05709d; --a-line: #e3e7ee; --a-line2: #c9d0dc;
  --b-bg: #f1f3f7; --b-panel: #e6eaf0; --b-fg: #0a1428; --b-soft: #26324a; --b-muted: #4a576f; --b-dim: #626f86;
  --b-acc: #05709d; --b-line: #dde2ea; --b-line2: #c3cbd8;
}

/* Chaque section reprend les variables de son fond sous les noms de la charte. */
[data-fond="n"] { --bg: var(--n-bg); --panel: var(--n-panel); --fg: var(--n-fg); --soft: var(--n-soft); --muted: var(--n-muted); --dim: var(--n-dim); --acc: var(--n-acc); --line: var(--n-line); --line2: var(--n-line2); color-scheme: dark; }
[data-fond="a"] { --bg: var(--a-bg); --panel: var(--a-panel); --fg: var(--a-fg); --soft: var(--a-soft); --muted: var(--a-muted); --dim: var(--a-dim); --acc: var(--a-acc); --line: var(--a-line); --line2: var(--a-line2); }
[data-fond="b"] { --bg: var(--b-bg); --panel: var(--b-panel); --fg: var(--b-fg); --soft: var(--b-soft); --muted: var(--b-muted); --dim: var(--b-dim); --acc: var(--b-acc); --line: var(--b-line); --line2: var(--b-line2); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--n-bg);
  color: var(--n-fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
::selection { background: var(--mark); }
a { color: var(--acc); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

section, header.tete, footer.pied { background: var(--bg); color: var(--fg); }

.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.etape > .wrap { padding-block: clamp(64px, 9vw, 104px); }

/* Libellés : Geist Mono, capitales. */
.label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0;
}
.label.discret { color: var(--muted); }

h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.04em; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -0.025em; }

/* En-tête de page */
.tete .wrap { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 104px); }
.tete-haut { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { display: block; padding: 4px 0; }
.logo img { width: 92px; height: 36px; }
.tete-titre {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-top: clamp(40px, 6vw, 72px);
}
h1 {
  font-size: clamp(44px, 7.2vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}
.mot { display: inline-block; white-space: nowrap; }
.lead { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0; }
.lead strong { color: var(--fg); font-weight: 500; }

.fiche {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(40px, 5vw, 56px) 0 0;
  border-top: 1px solid var(--line2);
}
.fiche div { padding: 14px 16px 0 0; }
.fiche dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.fiche dd { margin: 4px 0 0; font-size: 17px; }

/* Les deux montages */
.montages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
.montage { margin: 0; min-width: 0; display: grid; gap: 14px; align-content: start; }
.montage video { width: 100%; aspect-ratio: 16 / 9; background: var(--night); border: 1px solid var(--line2); }
.montage figcaption { display: grid; gap: 6px; }
.montage figcaption p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.note-montages { margin: 24px 0 0; color: var(--muted); font-size: 15px; max-width: var(--measure); }

/* Sommaire des étapes */
.sommaire { margin-top: clamp(48px, 6vw, 72px); }
.sommaire ol {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line2); border-left: 1px solid var(--line2);
}
.sommaire li { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.sommaire a {
  display: flex; flex-direction: column; gap: 6px; min-height: var(--touch);
  padding: 14px 14px 16px; color: var(--fg); text-decoration: none; height: 100%;
  transition: background-color 0.35s, color 0.35s;
}
.sommaire a span { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--acc); transition: color 0.35s; }
.sommaire a:hover { background: var(--fg); color: var(--bg); }
.sommaire a:hover span { color: var(--bg); }

/* En-tête d'étape : numéro et titre à gauche, introduction à droite. */
.etape-tete {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.etape-tete .num { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--acc); margin: 0 0 18px; }
.etape-tete .lead { font-size: 18px; }

/* Texte courant */
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--soft); font-size: 18px; line-height: 1.7; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.2em; }
.prose li { margin: 0.25em 0; }
.prose li::marker { color: var(--acc); }
.prose strong { color: var(--fg); font-weight: 500; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose h3:first-child { margin-top: 0; }
em.en { font-style: normal; font-family: var(--mono); font-size: 0.86em; color: var(--fg); }

.deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.deux > * { min-width: 0; }
.bloc { margin-top: clamp(48px, 6vw, 72px); }
.bloc > .label { margin-bottom: 16px; }

/* Citations des consignes */
.citation { margin: 0; padding: 0; }
.citation p {
  margin: 10px 0 0;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--fg);
  max-width: 34ch;
}
.citations { display: grid; gap: 32px; }
.citation p.label { font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; margin: 0; max-width: none; color: var(--acc); }

/* Figures : images nettes, à angles droits, cliquables pour la taille réelle. */
figure.image { margin: 0; min-width: 0; display: grid; gap: 10px; align-content: start; }
figure.image a { display: block; border: 1px solid var(--line2); }
figure.image img { width: 100%; }
figure.image figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); }
figure.image figcaption .label { display: block; margin-bottom: 4px; }
.grille { display: grid; gap: 24px; }
.grille.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tableaux */
.tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); border-bottom-color: var(--line2); }
td { color: var(--soft); }
td:first-child { font-family: var(--mono); color: var(--acc); white-space: nowrap; }
.modeles td:first-child { font-family: var(--sans); color: var(--fg); font-weight: 500; white-space: normal; width: 18%; }
.modeles td:nth-child(2) { color: var(--fg); width: 30%; }

/* Cases qui partagent leurs filets (concepts, outils, chapitres) */
.cases {
  display: grid;
  border-top: 1px solid var(--line2);
  border-left: 1px solid var(--line2);
}
.cases > * { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 24px; min-width: 0; }
.cases.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cases.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cases h3 { margin: 10px 0 10px; }
.cases p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.cases .retenu { background: var(--panel); }
.etat {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 8px; background: var(--brand); color: var(--on-brand);
}

/* Paroles et prompts : blocs nuit, le texte revient à la ligne. */
.code {
  margin: 0;
  background: var(--night);
  color: var(--on-night);
  border: 1px solid var(--line2);
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code .com { color: var(--code-comment); }
.paroles { font-size: 15px; line-height: 1.75; }
.prompt { display: grid; gap: 10px; min-width: 0; align-content: start; }
.prompt .titre-prompt { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.prompt > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.prompts .large { grid-column: 1 / -1; }

/* Anatomie d'un prompt : l'ordre des phrases, toujours le même. */
.ordre { list-style: none; margin: 0; padding: 0; counter-reset: o; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); }
.ordre li { counter-increment: o; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 16px 18px; display: grid; gap: 4px; }
.ordre li::before { content: counter(o, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--acc); }
.ordre b { font-weight: 500; color: var(--fg); }
.ordre span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Leçons */
.lecons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.lecons li { border-top: 1px solid var(--line2); padding: 20px 0 24px; display: grid; gap: 8px; }
.lecons b { font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.lecons span { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Carte des chapitres, à l'échelle du temps. */
.frise { display: flex; height: 56px; border: 1px solid var(--line2); margin: 0; padding: 0; list-style: none; }
.frise li {
  flex: var(--d) 1 0; min-width: 0; display: flex; align-items: flex-end; padding: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted);
  border-right: 1px solid var(--line2); background: var(--panel); overflow: hidden;
}
.frise li:nth-child(even) { background: transparent; }
.frise li:last-child { border-right: 0; }
.frise-echelle { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 6px; }
.chapitres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 32px; }
.chapitres div { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.chapitres .n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--acc); letter-spacing: 0.08em; }
.chapitres b { font-weight: 500; }
.chapitres .t { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.chapitres p { grid-column: 2 / -1; margin: 0; font-size: 14px; color: var(--muted); }

/* Bande son */
.bande-son { background: var(--panel); border: 1px solid var(--line2); padding: 24px; display: grid; gap: 14px; }
.bande-son .titre-son { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.bande-son h3 { font-size: 23px; }
.bande-son audio { width: 100%; }
.bande-son p { margin: 0; color: var(--muted); font-size: 15px; }

/* Pied de page */
.pied .wrap { padding-block: clamp(64px, 8vw, 104px) 40px; }
.pied-bas { margin-top: clamp(48px, 6vw, 72px); padding-top: 20px; border-top: 1px solid var(--line2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .tete-titre, .etape-tete, .deux { grid-template-columns: minmax(0, 1fr); }
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sommaire ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cases.c3, .cases.c4, .ordre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompts, .lecons, .chapitres { grid-template-columns: minmax(0, 1fr); }
  .grille.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .montages, .grille.g2, .grille.g3 { grid-template-columns: minmax(0, 1fr); }
  .cases.c3, .cases.c4, .ordre { grid-template-columns: minmax(0, 1fr); }
  .sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose p, .prose li { font-size: 17px; line-height: 1.65; }
  .lead { font-size: 17px; }
  .frise li { font-size: 0; padding: 0; }
  .code { padding: 16px; font-size: 12.5px; }
  /* Les tableaux passent en fiches : une ligne par bloc, chaque cellule avec son en-tête. */
  .tableau table { min-width: 0; }
  .tableau thead { display: none; }
  .tableau tr { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .tableau td { border: 0; padding: 0; white-space: normal; }
  .modeles td:first-child, .modeles td:nth-child(2) { width: auto; }
  .tableau td[data-col]::before {
    content: attr(data-col); display: block; margin-bottom: 2px;
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}