/* ============================================================
   VAUBAN : site.css
   L'Épure : encre, lavis et garance.
   Thème clair unique, verrouillé (aucune bascule sombre) :
   le footer-cartouche et le bandeau final sont des composants
   d'encre DANS une page claire, jamais un thème.
   ============================================================ */

/* ------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------ */
:root {
  /* Palette (repli hexadécimal) */
  --papier: #F3F7F3;
  --papier-grise: #E4EDE5;
  --encre: #12271D;
  --corps: #2C4237;
  --garance: #B23B1C;
  --garance-sombre: #9D3115;
  --garance-claire: #E0A78F;
  --lavis: #BFD3C4;
  --lavis-profond: #264D39;
  --glacis: #2F6B4F;
  --hachure: #C7D2E0;
  --nuit: #131A29;
  --projet: #C08A28;

  /* Dérivés */
  --corps-estompe: #4C6355;               /* diptyque « de mémoire » uniquement (4,7:1) */
  --papier-82: rgb(243 247 243 / .82);    /* texte courant sur encre */
  --papier-16: rgb(243 247 243 / .16);    /* hairlines sur encre */
  --papier-28: rgb(243 247 243 / .28);
  --encre-06: rgb(18 39 29 / .06);
  --encre-25: rgb(18 39 29 / .25);

  /* Typographies */
  --fonte-titre: "Spectral", "Iowan Old Style", Georgia, serif;
  --fonte-corps: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle */
  --t-h1: clamp(2.5rem, 1.4rem + 3.2vw, 4.75rem);
  --t-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  --t-h3: clamp(1.3rem, 1.12rem + .6vw, 1.65rem);

  /* Géométrie */
  --rayon: 3px;                            /* rayon unique du site, aucune pilule */
  --colonne: 72rem;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);

  /* Mouvement : deux courbes, pas une de plus */
  --sortie-expo: cubic-bezier(.16, 1, .3, 1);
  --sortie-quint: cubic-bezier(.22, 1, .36, 1);

  /* Plans (échelle z sémantique) */
  --z-entete: 40;
  --z-tiroir: 45;
  --z-burger: 50;
  --z-saut: 60;

  --ombre-entete: 0 8px 24px var(--encre-06);

  interpolate-size: allow-keywords;        /* accordéons details/summary animés */
}

@supports (color: oklch(50% 0 0)) {
  :root {
    --papier: oklch(.972 .006 155);
    --papier-grise: oklch(.945 .008 248);
    --encre: oklch(.235 .03 262);
    --corps: oklch(.36 .024 260);
    --garance: oklch(.47 .14 18);
    --garance-sombre: oklch(.38 .13 16);
    --garance-claire: oklch(.75 .08 15);
    --lavis: oklch(.87 .03 240);
    --lavis-profond: oklch(.42 .055 155);
    --glacis: oklch(.47 .08 155);
    --hachure: oklch(.85 .012 248);
    --nuit: oklch(.22 .03 262);
    --projet: oklch(.66 .11 85);
    --corps-estompe: oklch(.48 .03 262);
  }
}

/* ------------------------------------------------------------
   2. SOCLE (reset minimal)
   ------------------------------------------------------------ */
*, ::before, ::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;                      /* repli pour les navigateurs sans « clip » */
  overflow-x: clip;                        /* le plan déborde du bord, jamais la page */
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

html { overflow-x: clip; }
body { overflow-x: clip;
  margin: 0;
  background: var(--papier);
  color: var(--corps);
  font: 400 1.0625rem/1.65 var(--fonte-corps);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

::selection { background: var(--lavis); color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--lavis-profond); /* anneau clavier : 2 px, décalé de 2 px */
  outline-offset: 2px;
  border-radius: var(--rayon);
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------
   3. TYPOGRAPHIE
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--fonte-titre);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -0.01em;                 /* jamais plus serré */
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.16; }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { text-wrap: pretty; max-width: 72ch; }

.voix {                                    /* accent de voix : italique Spectral */
  font-family: var(--fonte-titre);
  font-style: italic;
  font-weight: 500;
}

.sous-titre {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  line-height: 1.55;
  max-width: 58ch;
}

code, kbd, samp, .puce-code, .mono {
  font-family: var(--fonte-mono);
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}

/* Colonne de lecture */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .45em; }

/* ------------------------------------------------------------
   4. UTILITAIRES
   ------------------------------------------------------------ */
.contenant {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section { padding-block: clamp(3.25rem, 6vw, 6rem); }
.section-serree { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.entame {                                   /* chapeau de section */
  max-width: 62ch;
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
}

/* Filigrane : le tracé bastionné à 4 % d'encre derrière les cartouches */
.filigrane { position: relative; }
.filigrane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M288%20176%20L297%20125%20L32%2075%20L343%20125%20L352%20176%20L399%20196%20L441%20166%20L493%20147%20L474%20199%20L444%20241%20L464%20288%20L515%20297%20L565%2032%20L515%20343%20L464%20352%20L444%20399%20L474%20441%20L493%20493%20L441%20474%20L399%20444%20L352%20464%20L343%20515%20L32%20565%20L297%20515%20L288%20464%20L241%20444%20L199%20474%20L147%20493%20L166%20441%20L196%20399%20L176%20352%20L125%20343%20L75%2032%20L125%20297%20L176%20288%20L196%20241%20L166%20199%20L147%20147%20L199%20166%20L241%20196%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23171F31%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M352%20243%20L397%20288%20L397%20352%20L352%20397%20L288%20397%20L243%20352%20L243%20288%20L288%20243%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23171F31%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") right -120px center / 520px 520px no-repeat;
  opacity: .04;
  pointer-events: none;
}
.filigrane > * { position: relative; }

.filigrane-nuit::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M288%20176%20L297%20125%20L32%2075%20L343%20125%20L352%20176%20L399%20196%20L441%20166%20L493%20147%20L474%20199%20L444%20241%20L464%20288%20L515%20297%20L565%2032%20L515%20343%20L464%20352%20L444%20399%20L474%20441%20L493%20493%20L441%20474%20L399%20444%20L352%20464%20L343%20515%20L32%20565%20L297%20515%20L288%20464%20L241%20444%20L199%20474%20L147%20493%20L166%20441%20L196%20399%20L176%20352%20L125%20343%20L75%2032%20L125%20297%20L176%20288%20L196%20241%20L166%20199%20L147%20147%20L199%20166%20L241%20196%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23F4F7FB%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M352%20243%20L397%20288%20L397%20352%20L352%20397%20L288%20397%20L243%20352%20L243%20288%20L288%20243%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23F4F7FB%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E");
  opacity: .05;
}

/* ------------------------------------------------------------
   5. LIGNE COTÉE (séparateur de sections, à la place des hr)
   ------------------------------------------------------------ */
.ligne-cotee {
  --lc: var(--hachure);
  --lc-pointe: var(--lavis-profond);
  position: relative;
  height: 9px;
  margin-block: clamp(2.75rem, 5vw, 4.5rem);
  background:
    linear-gradient(var(--lc), var(--lc)) 0 4px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lc) 0 1px, transparent 1px 28px) 0 0 / 100% 9px no-repeat;
}
.ligne-cotee::before, .ligne-cotee::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 13px;
  height: 1.5px;
  background: var(--lc-pointe);
  transform: rotate(-45deg);
  transform-origin: center;
}
.ligne-cotee::before { left: -2px; }
.ligne-cotee::after { right: -2px; }

/* Variante sur encre (tête de footer) : hairline papier, ticks garance-claire */
.ligne-cotee-nuit::before { left: 0; }
.ligne-cotee-nuit::after { right: 0; }
.ligne-cotee-nuit {
  --lc: var(--papier-28);
  --lc-pointe: var(--garance-claire);
  margin-block: 0;
  background:
    linear-gradient(var(--papier-16), var(--papier-16)) 0 4px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--garance-claire) 0 1px, transparent 1px 42px) 0 0 / 100% 9px no-repeat;
}

/* ------------------------------------------------------------
   6. LIENS ET BOUTONS
   ------------------------------------------------------------ */
a {
  color: var(--garance);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness 140ms ease, color 140ms ease;
}
a:hover { text-decoration-thickness: 2px; color: var(--garance-sombre); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .74em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: 600 .9375rem/1.2 var(--fonte-corps);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms var(--sortie-quint);
}
.btn:active { transform: scale(.97); transition-duration: 80ms; }

.btn-plein { background: var(--garance); color: var(--papier); }
@media (hover: hover) and (pointer: fine) {
  .btn-plein:hover { background: var(--garance-sombre); transform: translateY(-1px); }
  .btn-plein:hover:active { transform: scale(.97); }
}

.btn-trace {
  background: transparent;
  border-color: var(--encre-25);
  color: var(--encre);
}
@media (hover: hover) and (pointer: fine) {
  .btn-trace:hover { border-color: var(--encre); background: var(--papier-grise); transform: translateY(-1px); }
  .btn-trace:hover:active { transform: scale(.97); }
}

/* Lien secondaire d'appel (hero) */
.lien-second { font-weight: 500; }

/* Groupe d'actions */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.1rem;
}

/* ------------------------------------------------------------
   7. RÉFÉRENCES LÉGALES : puces mono, code, kbd
   ------------------------------------------------------------ */
.puce-code {
  display: inline-block;
  padding: .16em .55em;
  background: var(--papier-grise);
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  color: var(--encre);
  white-space: nowrap;
}
.sur-grise .puce-code, .memo .puce-code { background: var(--papier); }

kbd {
  padding: .12em .45em;
  background: var(--papier-grise);
  border: 1px solid var(--hachure);
  border-bottom-width: 2px;
  border-radius: var(--rayon);
  color: var(--encre);
}

.nappe { display: flex; flex-wrap: wrap; gap: .55rem; }

/* Champ de code copiable (URL du connecteur) */
.champ-copie {
  display: flex;
  align-items: stretch;
  max-width: 46rem;
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  background: var(--papier-grise);
  overflow: hidden;
}
.champ-copie code {
  flex: 1 1 auto;
  min-width: 0;
  padding: .72em .9em;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--encre);
}
.champ-copie .btn {
  flex: none;
  border-radius: 0;
  border-left: 1px solid var(--hachure);
}
.champ-copie .btn.copie-ok {
  background: var(--glacis);
  color: var(--papier);
  border-color: var(--glacis);
}

/* ------------------------------------------------------------
   8. TABLEAUX
   ------------------------------------------------------------ */
.table-defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption {
  text-align: left;
  font: italic 500 1.05rem/1.4 var(--fonte-titre);
  color: var(--encre);
  padding-block: .5em;
}
th {
  font: 600 .8125rem/1.35 var(--fonte-corps);
  color: var(--encre);
  text-align: left;
  border-bottom: 1px solid var(--lavis-profond);
  padding: .6em .8em;
}
td { border-bottom: 1px solid var(--hachure); padding: .62em .8em; }
.num { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: .9em; }

/* ------------------------------------------------------------
   9. LÉGENDE D'ÉPURE (bande de preuve, cartouches de faits)
   ------------------------------------------------------------ */
.legende {
  position: relative;
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--papier);
}
.legende-titre {
  position: absolute;
  top: 0;
  left: clamp(1.1rem, 3vw, 2rem);
  transform: translateY(-56%);
  padding-inline: .75rem;
  background: var(--papier);
  font: italic 500 1.125rem/1 var(--fonte-titre);
  color: var(--encre);
}
.legende-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1.5rem 2.25rem;
}
.legende-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
}
.legende-nom { display: block; font: 600 .95rem/1.35 var(--fonte-corps); color: var(--encre); }
.legende-detail {
  display: block;
  margin-top: .2rem;
  font: 400 .8rem/1.5 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--corps);
}

/* Symboles-matières de la légende */
.sym {
  width: 36px; height: 22px;
  margin-top: .15rem;
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  background-color: var(--papier);
}
.sym-trait { background-image: linear-gradient(to bottom, transparent calc(50% - 1px), var(--encre) calc(50% - 1px) calc(50% + 1px), transparent 0); }
.sym-double {
  background-image:
    linear-gradient(to bottom, transparent 7px, var(--encre) 7px 8px, transparent 8px),
    linear-gradient(to bottom, transparent 13px, var(--encre) 13px 14px, transparent 14px);
}
.sym-garance { background-image: linear-gradient(to bottom, transparent calc(50% - 1px), var(--garance) calc(50% - 1px) calc(50% + 1px), transparent 0); }
.sym-hachures { background-image: repeating-linear-gradient(45deg, var(--lavis-profond) 0 1px, transparent 1px 6px); }
.sym-millesimes { background-image: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 8px); background-size: 100% 60%; background-position: 0 20%; background-repeat: no-repeat; }
.sym-lavis { background-color: var(--lavis); }
.sym-lavis-hachure {
  background-color: var(--lavis);
  background-image: repeating-linear-gradient(45deg, var(--lavis-profond) 0 1px, transparent 1px 7px);
}
.sym-croisee {
  background-image:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--encre) calc(50% - .5px) calc(50% + .5px), transparent 0),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--encre) calc(50% - .5px) calc(50% + .5px), transparent 0);
}

/* ------------------------------------------------------------
   10. LISTE DE FAITS (corpus), sans cartes
   ------------------------------------------------------------ */
.faits { display: grid; gap: .7rem; }
.faits li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: baseline;
  max-width: 62ch;
}
.faits li::before {
  content: "";
  width: 8px; height: 8px;
  transform: translateY(.5px);
  border: 1.5px solid var(--lavis-profond);
}

/* ------------------------------------------------------------
   11. CARTE-MÉMO (la pièce à l'appui) : typographiée, sans chrome
   ------------------------------------------------------------ */
.memo {
  background: var(--papier-grise);
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.memo-question {
  font: italic 500 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.5 var(--fonte-titre);
  color: var(--encre);
  max-width: 56ch;
}
.memo-reponse { margin-top: 1.1rem; max-width: 62ch; }
.memo-visas {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hachure);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .6rem;
}
.memo-visas-titre { font: 600 .8125rem/1 var(--fonte-corps); color: var(--garance); margin-right: .3rem; }

/* ------------------------------------------------------------
   12. BASCULE CUSTOMS / TAX (radios, fondu croisé 220 ms)
   ------------------------------------------------------------ */
.bascule input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: -1px;
  pointer-events: none;
}
.bascule-onglets {
  display: inline-flex;
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  background: var(--papier-grise);
  padding: 3px;
  gap: 3px;
}
.bascule-onglets label {
  padding: .5em 1.15em;
  border-radius: var(--rayon);
  font: 600 .875rem/1.2 var(--fonte-corps);
  color: var(--corps);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .bascule-onglets label:hover { color: var(--encre); }
}
#bascule-customs:checked ~ .bascule-onglets label[for="bascule-customs"],
#bascule-tax:checked ~ .bascule-onglets label[for="bascule-tax"] {
  background: var(--encre);
  color: var(--papier);
}
#bascule-customs:focus-visible ~ .bascule-onglets label[for="bascule-customs"],
#bascule-tax:focus-visible ~ .bascule-onglets label[for="bascule-tax"] {
  outline: 2px solid var(--lavis-profond);
  outline-offset: 2px;
}
.bascule-scene { display: grid; margin-top: 1.4rem; max-width: 56rem; }
.bascule-scene > .memo {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--sortie-quint), visibility 0s 220ms;
}
#bascule-customs:checked ~ .bascule-scene .memo-customs,
#bascule-tax:checked ~ .bascule-scene .memo-tax {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--sortie-quint);
}

/* ------------------------------------------------------------
   13. TAMPON « INVÉRIFIABLE » et diptyque
   ------------------------------------------------------------ */
.diptyque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
}
.volet { padding: clamp(1.5rem, 3.5vw, 2.5rem); min-width: 0; }
.volet + .volet { border-left: 1px solid var(--hachure); }
.volet-titre { font: 600 .9375rem/1.3 var(--fonte-corps); color: var(--encre); margin-bottom: .85rem; }
.volet-memoire p { color: var(--corps-estompe); }

.tampon {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .38em .8em;
  border: 2px solid var(--corps-estompe);
  border-radius: var(--rayon);
  transform: rotate(-5deg);
  font: 700 .8125rem/1.2 var(--fonte-corps);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--corps-estompe);
  background: repeating-linear-gradient(45deg, rgb(59 68 89 / .08) 0 1px, transparent 1px 6px);
}

.visas { display: grid; gap: .55rem; margin-top: 1.2rem; }
.visas li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font: 500 .875rem/1.5 var(--fonte-mono);
  color: var(--garance);
}
.visas li::before { content: ""; width: 12px; height: 2px; background: var(--garance); margin-top: .55em; }

/* ------------------------------------------------------------
   14. ENCADRÉ SOBRE (limites, avertissements)
   ------------------------------------------------------------ */
.encadre {
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.encadre h2, .encadre h3 { font-size: var(--t-h3); }
.encadre ul { display: grid; gap: .6rem; margin-top: 1.1rem; padding-left: 1.15em; }
.encadre li::marker { color: var(--lavis-profond); }

/* ------------------------------------------------------------
   15. ACCORDÉONS NATIFS (FAQ)
   ------------------------------------------------------------ */
.accordeon { border-top: 1px solid var(--hachure); }
.accordeon details { border-bottom: 1px solid var(--hachure); }
.accordeon summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.05rem .15rem;
  cursor: pointer;
  list-style: none;
  font: 600 1.05rem/1.4 var(--fonte-corps);
  color: var(--encre);
  border-radius: var(--rayon);
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: "+";
  flex: none;
  font: 500 1.25rem/1 var(--fonte-mono);
  color: var(--garance);
  transition: transform 240ms var(--sortie-quint);
}
.accordeon details[open] summary::after { transform: rotate(45deg); }
.accordeon details p { padding: 0 .15rem 1.2rem; max-width: 66ch; }
@supports (interpolate-size: allow-keywords) {
  .accordeon details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 240ms var(--sortie-quint), content-visibility 240ms allow-discrete;
  }
  .accordeon details[open]::details-content { block-size: auto; }
}

/* ------------------------------------------------------------
   16. EN-TÊTE
   ------------------------------------------------------------ */
.saut-contenu {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: var(--z-saut);
  padding: .65em 1.1em;
  background: var(--encre);
  color: var(--papier);
  border-radius: var(--rayon);
  font: 600 .9375rem/1.2 var(--fonte-corps);
  text-decoration: none;
}
.saut-contenu:focus-visible { top: .75rem; outline-color: var(--garance); }

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--papier);
  border-bottom: 1px solid var(--hachure);
}
@supports (animation-timeline: scroll()) {
  .entete {
    animation: ombre-entete linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }
  @keyframes ombre-entete { to { box-shadow: var(--ombre-entete); } }
}

.entete-int {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--encre);
}
.lockup svg { flex: none; }
.lockup-nom { font: 600 1.25rem/1 var(--fonte-titre); letter-spacing: 0; }

.nav-tiroir { display: contents; }
.nav-tiroir > nav { margin-left: auto; }
.nav-liste {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}
.nav-lien {
  position: relative;
  display: inline-block;
  padding: .4em 0;
  font: 500 .9375rem/1.2 var(--fonte-corps);
  color: var(--corps);
  text-decoration: none;
  transition: color 140ms ease;
}
.nav-lien:hover { color: var(--encre); text-decoration: none; }
.nav-lien[aria-current="page"] { color: var(--encre); }
.nav-lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 16px;
  height: 2px;
  background: var(--garance);
  translate: -50% 0;
}
.nav-pied { display: none; }

/* Interrupteur de menu : la case à cocher EST le bouton (44 px, focusable) */
.nav-interrupteur {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  border: 0;
  background: transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  position: relative;
  z-index: var(--z-burger);
}
.nav-interrupteur::before, .nav-interrupteur::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--encre);
  transition: transform 200ms var(--sortie-quint), box-shadow 120ms ease;
}
.nav-interrupteur::before { top: 15px; box-shadow: 0 6px 0 var(--encre); }
.nav-interrupteur::after { top: 27px; }
.nav-interrupteur:checked::before { box-shadow: none; transform: translateY(6px) rotate(45deg); }
.nav-interrupteur:checked::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899px) {
  .entete-int { height: 60px; gap: 1rem; }
  .nav-interrupteur { display: block; }

  .nav-tiroir {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--z-tiroir);
    background: var(--papier);
    padding: calc(60px + 1.5rem) var(--gouttiere) 2rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms var(--sortie-quint), transform 220ms var(--sortie-quint), visibility 0s 220ms;
  }
  .nav-interrupteur:checked ~ .nav-tiroir {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 220ms var(--sortie-quint), transform 220ms var(--sortie-quint);
  }

  .nav-tiroir > nav { margin: 0 0 2.25rem; }
  .nav-liste { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .nav-lien { font: 500 1.75rem/1.2 var(--fonte-titre); color: var(--encre); }
  .nav-lien[aria-current="page"]::after { left: 0; translate: 0 0; width: 22px; }
  .nav-cta { width: 100%; }

  .nav-pied {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid var(--hachure);
    font-size: .875rem;
  }
  .nav-pied a { color: var(--corps); }
}

body:has(.nav-interrupteur:checked) { overflow: hidden; }

/* ------------------------------------------------------------
   17. HERO « LA TABLE DE L'INGÉNIEUR »
   ------------------------------------------------------------ */
.heros { padding-block: clamp(3rem, 8vh, 5.75rem) clamp(2.25rem, 4vw, 3.5rem); overflow-x: clip; }
.heros-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.heros h1 span { display: block; }
.heros .sous-titre { margin-top: 1.4rem; }
.heros .actions { margin-top: 2.1rem; }

/* Le plan déborde du bord droit, comme un coin de plan déroulé */
.heros-fig {
  min-width: 0;
  margin-right: calc(-1 * ((100vw - min(100vw, var(--colonne))) / 2 + var(--gouttiere) + 7vw));
}
.heros-fig svg { width: 100%; max-width: none; }
@media (max-width: 899px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr); }
  .heros-fig { order: 2; margin-right: calc(-1 * (var(--gouttiere) + 13vw)); }
  .heros-fig svg { width: min(100%, 460px); margin-left: auto; }
}
@media (max-width: 430px) {
  .heros h1 { font-size: 2.25rem; } /* deux lignes garanties à 390 px */
}

/* ------------------------------------------------------------
   18. PLACES FORTES (bandes produit, composition miroir)
   ------------------------------------------------------------ */
.place { padding-block: clamp(3rem, 6vw, 5.25rem); }
.place-grise { background: var(--papier-grise); }
.place-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.25rem, 6vw, 5.5rem);
  align-items: center;
}
.place-fig { width: 100%; max-width: 300px; margin-inline: auto; }
.place-fig svg { width: 100%; }
.place-miroir .place-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.place-miroir .place-fig { order: 2; }
.place h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); }
.place-mission { margin-top: .8rem; max-width: 56ch; }
.place .faits { margin-block: 1.5rem; }
.place .nappe { margin-bottom: 1.7rem; }
@media (max-width: 899px) {
  .place-grille, .place-miroir .place-grille { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .place-fig, .place-miroir .place-fig { order: 0; max-width: 200px; margin-inline: 0; }
}

/* ------------------------------------------------------------
   19. LA MÉTHODE EN TROIS PARALLÈLES
   ------------------------------------------------------------ */
.methode-schema { margin-block: clamp(2rem, 4vw, 3rem) clamp(2.25rem, 4vw, 3.25rem); overflow-x: auto; }
.schema-img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  .methode-schema .schema-img { min-width: 560px; }
}
.schema-legende { margin-top: .55rem; font: 500 12px/1.5 var(--fonte-mono); color: var(--lavis-profond); letter-spacing: .02em; }
.schema-legende .obj { color: var(--garance); }
.paralleles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.parallele h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.25rem;
}
.parallele .no { font: 600 1.7rem/1 var(--fonte-titre); color: var(--encre); }
.parallele p { margin-top: .6rem; font-size: 1rem; }
.methode-note { margin-top: 2.25rem; max-width: 66ch; font-size: .95rem; }
@media (max-width: 767px) {
  .paralleles { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   20. À CHACUN SON POSTE (colonnes métiers, sans cartes)
   ------------------------------------------------------------ */
.postes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 4.5rem);
}
.poste h3 { font-size: 1.35rem; }
.poste-profil { padding-block: 1.15rem; border-top: 1px solid var(--hachure); }
.poste h3 + .poste-profil { margin-top: 1.2rem; }
.poste-profil strong { color: var(--encre); font-weight: 600; }
.poste-q {
  display: block;
  margin-top: .4rem;
  font: italic 500 1.0625rem/1.5 var(--fonte-titre);
  color: var(--encre);
}
@media (max-width: 767px) {
  .postes { grid-template-columns: minmax(0, 1fr); }
  .diptyque { grid-template-columns: minmax(0, 1fr); }
  .volet + .volet { border-left: 0; border-top: 1px solid var(--hachure); }
}

/* ------------------------------------------------------------
   21. CARTOUCHE FINAL ET PIED DE PAGE (composants d'encre)
   ------------------------------------------------------------ */
.cartouche-nuit {
  background: var(--nuit);
  color: var(--papier-82);
  padding-block: clamp(3.5rem, 7vw, 5.75rem);
}
.cartouche-nuit h2 { color: var(--papier); }
.cartouche-nuit p { color: var(--papier-82); }
.cartouche-nuit .actions { margin-top: 1.9rem; }
.cartouche-nuit .note { margin-top: 1.2rem; font-size: .9rem; }
.cartouche-nuit :focus-visible { outline-color: var(--papier); }
.cartouche-nuit a:not(.btn) { color: var(--garance-claire); }
.cartouche-nuit a:not(.btn):hover { color: var(--papier); }

.pied {
  background: var(--nuit);
  color: var(--papier-82);
  font-size: .9375rem;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.pied-marque .lockup { color: var(--papier); }
.pied-devise {
  margin-top: 1.1rem;
  font: italic 500 1.0625rem/1.5 var(--fonte-titre);
  color: var(--papier);
  max-width: 30ch;
}
.pied-mention { margin-top: .8rem; font-size: .875rem; max-width: 34ch; }
.pied-titre { font: 600 .9375rem/1.2 var(--fonte-corps); color: var(--papier); margin-bottom: 1.05rem; }
.pied-liens { display: grid; gap: .6rem; }
.pied a {
  color: var(--papier-82);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.pied a:hover { color: var(--papier); text-decoration-color: var(--garance-claire); }
.pied :focus-visible { outline-color: var(--papier); }
.pied-basse {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  justify-content: space-between;
  padding-block: 1.35rem 1.6rem;
  border-top: 1px solid var(--papier-16);
  font-size: .85rem;
}
.pied-basse p { max-width: none; }
@media (max-width: 899px) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}

/* ------------------------------------------------------------
   22. PAGES DOCUMENTAIRES (CGU, confidentialité, mentions, FAQ)
   ------------------------------------------------------------ */
.cartouche-doc {
  border: 1px solid var(--hachure);
  border-radius: var(--rayon);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
}
.cartouche-doc .doc-meta { margin-top: .9rem; font: 400 .85rem/1.6 var(--fonte-mono); color: var(--corps); }
.page-doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.doc-sommaire { position: sticky; top: 92px; }
.doc-sommaire h2 { font-size: 1.05rem; font-family: var(--fonte-corps); font-weight: 600; }
.doc-sommaire ol { margin-top: .9rem; display: grid; gap: .45rem; font-size: .9rem; }
.doc-sommaire a { color: var(--corps); text-decoration-color: transparent; }
.doc-sommaire a:hover { color: var(--garance); text-decoration-color: currentColor; }
@media (max-width: 899px) {
  .page-doc { grid-template-columns: minmax(0, 1fr); }
  .doc-sommaire { position: static; }
}

/* ------------------------------------------------------------
   23. 404 : L'OUVRAGE PROJETÉ (jaune, traits discontinus)
   ------------------------------------------------------------ */
.trace-projet { stroke: var(--projet) !important; stroke-dasharray: 9 7; }
.page-404 { text-align: center; padding-block: clamp(3rem, 8vh, 6rem); }
.page-404 .fort { width: 100%; max-width: 380px; margin-inline: auto; }
.page-404 .actions { justify-content: center; margin-top: 2rem; }

/* ------------------------------------------------------------
   24. MOUVEMENT
   Tout est visible par défaut ; l'état masqué n'existe que sous html.js.
   ------------------------------------------------------------ */
@keyframes lever { to { opacity: 1; transform: none; } }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes paraitre { to { opacity: 1; } }

/* Chargement du hero : orchestré, fini à 880 ms */
.js .lever {
  opacity: 0;
  transform: translateY(14px);
  animation: lever 560ms var(--sortie-expo) forwards;
  animation-delay: var(--retard, 0ms);
}
.js .lever-cta { animation-duration: 480ms; }
.js .fort .t {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracer 700ms var(--sortie-expo) forwards;
}
.js .fort .douve {
  opacity: 0;
  animation: paraitre 500ms var(--sortie-expo) 120ms forwards;
}
/* Les emblèmes de bande ne se tracent pas : ils paraissent avec leur groupe */
.js .fort-emb .t { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.js .fort-emb .douve { opacity: 1; animation: none; }

/* Révélations au défilement : IntersectionObserver ajoute .in, une fois */
.js .reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms var(--sortie-quint), transform 480ms var(--sortie-quint);
}
.js .reveal > *:nth-child(2) { transition-delay: 60ms; }
.js .reveal > *:nth-child(3) { transition-delay: 120ms; }
.js .reveal > *:nth-child(4) { transition-delay: 180ms; }
.js .reveal > *:nth-child(5) { transition-delay: 240ms; }
.js .reveal > *:nth-child(6) { transition-delay: 300ms; }
.js .reveal > *:nth-child(7) { transition-delay: 360ms; }
.js .reveal > *:nth-child(8) { transition-delay: 420ms; }
.js .reveal.in > * { opacity: 1; transform: none; }

.js .reveal-seul {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms var(--sortie-quint), transform 480ms var(--sortie-quint);
}
.js .reveal-seul.in { opacity: 1; transform: none; }

/* Les schémas tracent leur trait au premier passage (900 ms) */
.js .schema .t {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--sortie-expo);
}
.js .schema.in .t { stroke-dashoffset: 0; }
.js .schema .lbl { opacity: 0; transition: opacity 480ms var(--sortie-quint) 420ms; }
.js .schema.in .lbl { opacity: 1; }

/* Mouvement réduit : tracés pleins d'emblée, aucun décalage, la coche de copie reste */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .js .lever, .js .lever-cta, .js .reveal > *, .js .reveal-seul { opacity: 1; transform: none; animation: none; }
  .js .fort .t, .js .schema .t { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .fort .douve, .js .schema .lbl { opacity: 1; animation: none; }
  .btn:active, .btn-plein:hover, .btn-trace:hover { transform: none; }
}

/* ------------------------------------------------------------
   25. IMPRESSION SOBRE
   ------------------------------------------------------------ */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .entete, .saut-contenu, .nav-interrupteur, .btn, .cartouche-nuit, .heros-fig,
  .methode-schema, .bascule-onglets, .ligne-cotee { display: none !important; }
  .bascule-scene > .memo { opacity: 1 !important; visibility: visible !important; position: static; }
  .pied { background: none; color: #000; }
  .pied-grille { display: none; }
  .pied a, .pied-basse { color: #000; }
  a { color: #000; }
  h1, h2, h3, h4 { color: #000; break-after: avoid; }
  .filigrane::before { display: none; }
}

/* ------------------------------------------------------------
   26. GLUE STRUCTURELLE
   ------------------------------------------------------------ */
.entete-section { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.encadre-renvoi { margin-top: 1.35rem; }
.faq-renvoi { margin-top: 1.5rem; }
#corpus .entete-section { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
.heros .lien-second { padding-block: .35em; }

/* Synthèse livrables sous les cartes produits */
.place-produit { margin: 1.1rem 0 1.6rem; max-width: 62ch; font-size: .98rem; color: var(--corps); }
.place-produit strong { color: var(--encre); }

/* La touche française — liseré tricolore de la maison (lavis, papier, garance) */
.entete { position: relative; }
.entete::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background:
    linear-gradient(to right, transparent 0 calc(100% - 34px), var(--garance) calc(100% - 34px) calc(100% - 32px), transparent calc(100% - 32px)),
    repeating-linear-gradient(to right, rgb(38 77 57 / .5) 0 1px, transparent 1px 9px),
    linear-gradient(to bottom, transparent 0 5px, rgb(38 77 57 / .55) 5px 6px);
  height: 6px;
  pointer-events: none;
}

/* ------------------------------------------------------------
   XX. LE VERROU TEMPOREL (bloc vivant transplanté du site v1 —
   la pièce signature ; tokens mappés sur la charpente)
   ------------------------------------------------------------ */
.section-vivante {
  --v-ligne: var(--lavis);
  --v-encre: var(--encre);
  --v-corps: var(--corps);
  --v-estompe: var(--corps-estompe);
  --v-accent: var(--garance);
}
.section-vivante .rule { display: block; width: 100%; height: auto; overflow: visible; }
.section-vivante .d-line  { stroke: var(--v-ligne); stroke-width: 1.25; fill: none; }
.section-vivante .d-hatch { stroke: var(--v-ligne); stroke-width: 0.75; fill: none; }
.section-vivante .d-tick  { fill: var(--v-estompe); }
.section-vivante .d-label { font: 400 12px var(--fonte-mono); fill: var(--v-estompe); letter-spacing: 0.01em; }
.section-vivante .d-label-pivot { fill: var(--v-accent); font-weight: 700; }
.section-vivante .d-caret-head { fill: var(--v-accent); }
.section-vivante .d-caret-chip-box { fill: var(--v-accent); }
.section-vivante .d-caret-chip-text { font: 700 12px var(--fonte-mono); fill: #ffffff; letter-spacing: 0.02em; }

.lock-wrap { border: 1px solid var(--lavis); background: #fff; padding: clamp(20px, 3.5vw, 36px); }
.lock-svg-wrap { overflow-x: auto; }
.lock-svg-wrap:focus-visible { outline: 2px solid var(--garance); outline-offset: 4px; }
.lock-svg-wrap svg { min-width: 680px; cursor: pointer; touch-action: pan-y; }
.lock-caret { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.lock-year { pointer-events: none; }
.lock-read { display: grid; gap: 12px; margin-top: 18px; }
.living { border: 1px solid var(--lavis); background: var(--papier-grise); padding: 14px 16px 15px; transition: opacity 160ms ease; margin: 0; }
.lock-read.swap .living { opacity: 0.25; }
.living-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.living-cite { font-family: var(--fonte-titre); font-weight: 600; font-size: 15px; color: var(--encre); }
.living-vin { font-family: var(--fonte-mono); font-size: 11.5px; letter-spacing: .02em; color: #fff; background: var(--garance); padding: 2px 8px 3px; white-space: nowrap; }
.living-q { font-family: var(--fonte-mono); font-size: 13px; line-height: 1.62; color: var(--corps); margin: 0; }
.lock-note { margin-top: 14px; font-size: .85rem; color: var(--corps-estompe); }
.lock-note .hint-coarse { display: none; }
@media (pointer: coarse) {
  .lock-note .hint-fine { display: none; }
  .lock-note .hint-coarse { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .lock-caret { transition: none; }
  .living { transition: none; }
}


/* Sous-titre de gamme dans le lockup (pages produit) */
.lockup-nom { display: flex; flex-direction: column; line-height: 1.05; }
.lockup-sous { font-size: .5em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--garance); }
.pied .lockup-sous { color: var(--garance-claire); }

/* ------------------------------------------------------------
   XXI. COUCHE DYNAMIQUE (scroll-driven, registre gravure)
   ------------------------------------------------------------ */
/* Entrée orchestrée de la gravure hero : elle « se pose » après le titre */
@keyframes poser { from { opacity: 0; transform: scale(1.035) translateY(10px); } to { opacity: 1; transform: none; } }
.js .heros-fig img { animation: poser 900ms var(--sortie-quint) 240ms both; }

/* Parallax discret (piloté par anima.js via --plx, uniquement transform) */
.js .plx { transform: translate3d(0, calc(var(--plx, 0) * 1px), 0); will-change: transform; }
.js .heros-fig img.plx { animation: poser 900ms var(--sortie-quint) 240ms both; }

/* La gravure de méthode se révèle en balayage, comme un tracé qui s'exécute */
.js .methode-schema .schema-img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1150ms var(--sortie-quint) 120ms;
}
.js .methode-schema.in .schema-img { clip-path: inset(0 0 0 0); }

/* Verrou temporel épinglé : le scroll déroule les années (index seulement) */
.js .lock-etage { height: 220vh; }
.js .lock-colle { position: sticky; top: max(56px, 7vh); }
@media (max-width: 767px) { .js .lock-etage { height: 175vh; } }

/* Cartouche final : les boutons montent en cascade (le .reveal existant s'en charge),
   l'encre s'assombrit doucement à l'arrivée */
@keyframes maree { from { opacity: .0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .heros-fig img, .js .heros-fig img.plx { animation: none; }
  .js .plx { transform: none !important; will-change: auto; }
  .js .methode-schema .schema-img { clip-path: none; transition: none; }
  .js .lock-etage { height: auto; }
  .js .lock-colle { position: static; }
}