/* ==========================================================================
   Lore & Soul : « le codex noir »
   Chaque pièce de Mattéo reçoit sa page de codex. Cuir noir, encre os, filets acier, et un seul
   accent chaud, le cuivre, qui ne s'allume que là où la peinture est posée (action, focus, état
   actif). Couleurs relevées sur sa vraie figurine peinte (chevalier ailé) et sur son logo.

   Système de formes (règle unique) : coins vifs partout (2px au plus), filets doubles de reliure
   pour les planches et les boutons. Aucune carte arrondie, aucun verre dépoli.

   Échelle des z-index :
     -1   fond de cuir fixe
     39   menu mobile plein écran
     40   barre de navigation
     100  lien d'évitement
     (le <dialog> vit dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Polices hébergées sur le site ---------- */
@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../assets/fonts/grenze-gotisch-normal-600-800-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: "Grenze Gotisch";
  font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../assets/fonts/grenze-gotisch-normal-600-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/alegreya-normal-400-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: "Alegreya";
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/alegreya-normal-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/alegreya-italic-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: "Alegreya";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/alegreya-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya SC";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/alegreya-sc-normal-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: "Alegreya SC";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/alegreya-sc-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya SC";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/alegreya-sc-normal-700-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: "Alegreya SC";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/alegreya-sc-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: dark;

  --cuir: #0E0D0F;            /* fond : cuir noir, jamais noir pur */
  --cuir-2: #151417;          /* surfaces posées (fiche, champs) */
  --cuir-3: #1C1B1F;          /* surfaces levées */
  --os: #D6CFC4;              /* encre principale : 12,4:1 sur --cuir */
  --os-2: #A59E94;            /* texte secondaire : 7,3:1 */
  --os-3: #8C857B;            /* aides, légendes : 5,2:1 */
  --appret: #8A8C90;          /* gris d'apprêt : titres avant qu'ils ne soient peints */
  --acier: #565454;           /* filets */
  --acier-2: #2E2D31;         /* filets discrets */
  --field-border: #7A7672;    /* contour des champs : 4:1 contre --cuir-2 */
  --cuivre: #B48466;          /* L'UNIQUE accent : 5,9:1 sur --cuir */
  --cuivre-vif: #CA9B7C;      /* survol */
  --cuivre-voile: rgba(180, 132, 102, .16);
  --sur-cuivre: #0E0D0F;      /* texte sur un bouton cuivre : 5,9:1 */

  --erreur: #E7967F;          /* 7,6:1 sur --cuir-2 */
  --erreur-fond: rgba(231, 150, 127, .10);

  --tshadow: 0 1px 2px rgba(5, 5, 8, .95), 0 3px 12px rgba(5, 5, 8, .78), 0 10px 44px rgba(5, 5, 8, .8);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);          /* sortie exponentielle : apparitions, survols */
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);    /* pressions, menu */
  --t-fast: 180ms;   /* retours de survol et de focus */
  --t-base: 320ms;   /* changements d'état */
  --t-slow: 900ms;   /* peinture des titres, grandes apparitions */

  --font-display: "Grenze Gotisch", "Palatino Linotype", Georgia, serif;
  --font-body: "Alegreya", Georgia, "Times New Roman", serif;
  --font-sc: "Alegreya SC", "Alegreya", Georgia, serif;

  --text-fine: .88rem;    /* petits caractères : aides des champs, consentement, bas de page */
  --text-label: .92rem;   /* étiquettes en petites capitales */
  --text-small: 1rem;     /* texte secondaire */

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --chapitre: clamp(6rem, 11vw, 10.5rem);
  --nav-h: 68px;

  --bar: 0px;             /* hauteur de la barre d'adresse des téléphones (0 sur ordinateur) */
}
@supports (height: 1svh) { :root { --bar: calc(100lvh - 100svh); } }

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

html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--acier) var(--cuir);
  background: var(--cuir);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--cuir);
  color: var(--os);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.62;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
::selection { background: rgba(180, 132, 102, .38); color: #F2ECE3; }
input, textarea, select { caret-color: var(--cuivre); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cuir); }
::-webkit-scrollbar-thumb { background: var(--acier); border: 3px solid var(--cuir); }

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

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .65rem 1.1rem; background: var(--cuivre); color: var(--sur-cuivre);
  font-family: var(--font-sc); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: .75rem; }
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
main:focus { outline: none; }

/* ---------- Le cuir : un seul fond fixe, grain très fin et lumière de lampe qui dérive ---------- */
.cuir {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--cuir);
}
.cuir::before {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .84 0 0 0 0 .81 0 0 0 0 .77 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.cuir::after {
  content: ""; position: absolute; width: 90vmax; height: 90vmax; left: 50%; top: -30vmax;
  margin-left: -45vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(180, 132, 102, .055), rgba(180, 132, 102, 0));
  animation: lampe 84s var(--ease-soft) -20s infinite alternate;
}
@keyframes lampe {
  from { transform: translate3d(-18vw, 0, 0); }
  to { transform: translate3d(18vw, 12vh, 0); }
}
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* ---------- Boutons : plaques estampées, filet double ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 52px; padding: .75rem 1.35rem .72rem 1.5rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--font-sc); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em;
  line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn::after {   /* le filet intérieur de la plaque */
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border: 1px solid transparent; border-radius: 1px; transition: border-color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn__label { text-align: start; }
.btn .icone { transition: transform var(--t-base) var(--ease); }
@media (hover: hover) { .btn:hover .icone { transform: translateX(3px); } }
.btn--primary { background: var(--cuivre); color: var(--sur-cuivre); }
.btn--primary::after { border-color: rgba(14, 13, 15, .35); }
@media (hover: hover) { .btn--primary:hover { background: var(--cuivre-vif); } }
.btn--ghost { background: transparent; color: var(--os); border-color: var(--acier); }
.btn--ghost::after { border-color: var(--acier-2); }
@media (hover: hover) { .btn--ghost:hover { border-color: var(--os-3); background: rgba(214, 207, 196, .05); } }
.btn--sm { min-height: 44px; padding: .55rem 1rem .52rem 1.15rem; font-size: .95rem; gap: .6rem; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .7; cursor: progress; }
@media (pointer: coarse) { .btn { min-height: 48px; } }

/* ---------- Barre du haut : un titre courant de codex ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav.is-solid { background: rgba(14, 13, 15, .94); box-shadow: 0 1px 0 var(--acier-2); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: .005em; }
.nav__links { display: flex; gap: .2rem; }
.nav__links a {
  position: relative; padding: .6rem .85rem; text-decoration: none;
  font-family: var(--font-sc); font-weight: 500; font-size: 1rem; letter-spacing: .05em; color: var(--os-2);
  transition: color var(--t-fast) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .35rem; height: 1px;
  background: var(--cuivre); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease);
}
.nav__links a.is-active { color: var(--os); }
.nav__links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) { .nav__links a:hover { color: var(--os); } .nav__links a:hover::after { transform: scaleX(1); } }
.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 46px; height: 46px; border: 1px solid var(--acier); border-radius: 2px;
  background: rgba(14, 13, 15, .6); cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 20px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--os);
  transition: transform var(--t-base) var(--ease-soft);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Seuil du menu : la barre complète demande environ 980 px (mesuré). Même valeur plus 1 dans js/main.js. */
@media (max-width: 1060px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

.menu {
  position: fixed; inset: 0; z-index: 39; padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(14, 13, 15, .97); opacity: 0; transition: opacity .35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem 3rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1.15;
  text-decoration: none; padding: .7rem 0; border-bottom: 1px solid var(--acier-2);
}
.menu__inner > a {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu.is-open .menu__inner > a { opacity: 1; transform: none; }
.menu__inner .btn { margin-top: 1.75rem; justify-self: start; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { background: var(--cuir); }

/* ==========================================================================
   Héros défilant
   ========================================================================== */
.hero { position: relative; height: 100vh; height: 100lvh; min-height: 560px; }
html[data-hero-mode="landscape"] .hero { height: 720vh; }
html[data-hero-mode="portrait"] .hero { height: 1000vh; }

.hero__stage {
  position: sticky; top: 0; overflow: hidden;
  height: 100vh; height: 100lvh; min-height: 560px;
  background: #080809;
}
.hero__poster, .hero__finale, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img, .hero__finale img, .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__video {
  opacity: 0; pointer-events: none; transform: translateZ(0); will-change: transform;
  transition: opacity .6s var(--ease);
}
.hero__stage.video-ready .hero__video { opacity: 1; }
.hero__finale { opacity: 0; }
.hero__finale img { object-position: 50% 52%; }

/* Voile de base : aucune image n'est jamais brute sous le texte */
.hero__voile {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, 0) 18%),
    radial-gradient(ellipse 120% 90% at 50% 46%, rgba(8, 8, 10, 0) 38%, rgba(8, 8, 10, .6) 100%);
}

/* Anneau de chargement honnête : il ne se montre que pendant le téléchargement */
.hero__anneau {
  position: absolute; left: 50%; bottom: calc(var(--bar) + 28px); width: 44px; height: 44px;
  margin-left: -22px; opacity: 0; transform: rotate(-90deg); transition: opacity .4s var(--ease);
  pointer-events: none;
}
.hero__stage.is-loading .hero__anneau { opacity: .9; }
.hero__anneau circle { fill: none; stroke-width: 2; }
.hero__anneau-fond { stroke: rgba(214, 207, 196, .16); }
.hero__anneau-trait { stroke: var(--cuivre); stroke-dasharray: 126; stroke-dashoffset: var(--ld, 126); stroke-linecap: butt; transition: stroke-dashoffset .12s linear; }

/* ---------- Bandes de texte ---------- */
.band {
  position: absolute; z-index: 4; opacity: 0; visibility: hidden;
  text-shadow: var(--tshadow); color: var(--os);
}
.band .btn { text-shadow: none; }
/* Voile local : il s'assombrit seulement pendant que sa bande est lue */
.band::before {
  content: ""; position: absolute; inset: -30% -35%; z-index: -1; pointer-events: none;
  opacity: calc(.3 + .7 * var(--k, 1));
  background: radial-gradient(ellipse 60% 58% at 50% 50%, rgba(6, 6, 9, .66) 0%, rgba(6, 6, 9, .42) 48%, rgba(6, 6, 9, 0) 76%);
}
.band__texte {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.1rem + 2.7vw, 4.3rem); line-height: 1.04; letter-spacing: .002em;
  max-width: 13ch;
}
.split { display: inline; }
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }

/* Paysage : l'action vit au centre, les mots dans les colonnes de gauche et de droite */
html[data-hero-mode="landscape"] .band--un,
html[data-hero-mode="landscape"] .band--trois { left: max(var(--gutter), 5vw); top: 34%; width: 30vw; }
html[data-hero-mode="landscape"] .band--deux { right: max(var(--gutter), 5vw); top: 40%; width: 30vw; }

/* Poussière qui tombe dans la lumière : les lettres descendent en place */
.fx-poussiere .c {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translate(calc((1 - var(--kc)) * var(--jx, 0px) * .4), calc((1 - var(--kc)) * -0.7em)) rotate(calc((1 - var(--kc)) * var(--jr, 0deg)));
}
/* La caméra avance : les mots arrivent de la profondeur */
.fx-profondeur .w {
  --kw: clamp(0, (var(--k, 0) - var(--wi, 0) * .45) * 2.2, 1);
  opacity: var(--kw);
  transform: scale(calc(.8 + .2 * var(--kw)));
  transform-origin: 50% 70%;
}
/* La peinture : chaque lettre, grise d'apprêt, reçoit sa couleur */
.fx-peinture .c { position: relative; color: var(--appret); }
.fx-peinture .c::after {
  content: attr(data-l); position: absolute; left: 0; top: 0; color: var(--os);
  opacity: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
}
.fx-peinture .w:last-child .c::after { color: var(--cuivre); }

/* Le repos : sa vraie photo au centre, la marque gravée à gauche, l'offre à droite */
.band--fin { inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding: calc(var(--nav-h) + 2rem) max(var(--gutter), 4vw) calc(var(--bar) + 3rem); }
.band--fin::before { display: none; }
.fin__titre { grid-column: 1; display: grid; gap: .9rem; position: relative; }
.fin__bloc { grid-column: 3; display: grid; gap: 1.6rem; justify-items: start; position: relative; }
.fin__titre::before, .fin__bloc::before {
  content: ""; position: absolute; inset: -40% -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(6, 6, 9, .7) 0%, rgba(6, 6, 9, .45) 50%, rgba(6, 6, 9, 0) 78%);
}
.fin__marque {
  font-family: var(--font-display); font-weight: 800; color: var(--cuivre);
  font-size: clamp(3rem, 1.4rem + 4.4vw, 6rem); line-height: .92; letter-spacing: -.005em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 236, 214, .08), var(--tshadow);
}
.fin__offre { font-family: var(--font-sc); font-weight: 500; font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem); letter-spacing: .05em; color: var(--os); max-width: 22ch; }
.fin__texte { font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.45; max-width: 24ch; }
.fin__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.fin__legende {
  position: absolute; right: max(var(--gutter), 4vw); bottom: calc(var(--bar) + 1.4rem);
  font-style: italic; font-size: var(--text-fine); color: var(--os-2);
}
/* Arrivées étagées du repos : la marque, l'offre, puis les boutons */
.band--fin .fin__marque, .band--fin .fin__offre, .band--fin .fin__texte, .band--fin .fin__actions, .band--fin .fin__legende {
  --ks: clamp(0, (var(--k, 0) - var(--d, 0)) * 3.4, 1);
  opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 18px));
}
.band--fin .fin__offre { --d: .12; }
.band--fin .fin__texte { --d: .32; }
.band--fin .fin__actions { --d: .48; }
.band--fin .fin__legende { --d: .6; }

/* Portrait (téléphones) : texte en haut ou en bas, jamais sur les côtés ; l'action reste au milieu */
html[data-hero-mode="portrait"] .band--un,
html[data-hero-mode="portrait"] .band--trois { left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 3.5vh); }
html[data-hero-mode="portrait"] .band--deux { left: var(--gutter); right: var(--gutter); bottom: calc(var(--bar) + 9vh); }
html[data-hero-mode="portrait"] .band__texte { font-size: clamp(1.95rem, .9rem + 5.6vw, 2.8rem); max-width: 15ch; }
html[data-hero-mode="portrait"] .band::before {
  inset: -60% -20%;
  background: radial-gradient(ellipse 80% 62% at 40% 50%, rgba(6, 6, 9, .72) 0%, rgba(6, 6, 9, .45) 50%, rgba(6, 6, 9, 0) 78%);
}
html[data-hero-mode="portrait"] .band--fin,
html[data-hero-mode="static"] .band--fin { grid-template-columns: minmax(0, 1fr); align-content: space-between; align-items: start; }
html[data-hero-mode="portrait"] .fin__titre,
html[data-hero-mode="portrait"] .fin__bloc { grid-column: 1; }

/* ---------- Mode image fixe (mouvement réduit, économie de données, panne, fichier local) ----------
   L'état par défaut du balisage : sa vraie pièce plein cadre, le repos entièrement assemblé. */
html[data-hero-mode="static"] .hero__poster,
html[data-hero-mode="static"] .hero__video,
html[data-hero-mode="static"] .hero__anneau,
html[data-hero-mode="static"] .band:not(.band--fin) { display: none; }
html[data-hero-mode="static"] .hero__finale { opacity: 1; }
html[data-hero-mode="static"] .band--fin { opacity: 1; visibility: visible; --k: 1; }
@media (min-width: 901px) {
  html[data-hero-mode="static"] .band--fin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; align-content: normal; }
  html[data-hero-mode="static"] .fin__titre { grid-column: 1; }
  html[data-hero-mode="static"] .fin__bloc { grid-column: 3; }
}
@media (max-width: 900px) {
  html[data-hero-mode="static"] .fin__titre, html[data-hero-mode="static"] .fin__bloc { grid-column: 1; }
}
@media (max-height: 560px) { .fin__legende { display: none; } }

/* ==========================================================================
   Chapitres
   ========================================================================== */
.chapitre { position: relative; padding-block: var(--chapitre); }
/* Un lien vers un chapitre le place en haut de l'écran : sa propre marge garde le titre sous la barre,
   et la fin du héros ne reste pas visible sous la barre encore transparente. */
.chapitre[id] { scroll-margin-top: calc(-1 * (var(--nav-h) + 1.5rem)); }
.chapitre + .chapitre::before {   /* le vide noir entre deux chapitres, marqué d'un filet de reliure */
  content: ""; position: absolute; top: 0; left: 50%; width: min(240px, 40vw); height: 5px;
  transform: translateX(-50%);
  border-top: 1px solid var(--acier); border-bottom: 1px solid var(--acier-2);
}
.chapitre__tete { max-width: 44rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.chapitre__chapo { margin-top: 1.4rem; font-size: 1.22rem; line-height: 1.55; color: var(--os-2); max-width: 46ch; text-wrap: pretty; }

/* Titres peints : gris d'apprêt, puis l'encre os passe d'un coup de pinceau de gauche à droite */
.titre-peint {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.7rem, 1.5rem + 4vw, 5.4rem); line-height: 1.02; letter-spacing: .002em;
  color: var(--os);
}
/* Le gris d'apprêt n'apparaît que si le module de peinture tourne (sinon le titre reste en encre os) */
.peinture-on .titre-peint { color: var(--appret); }
.titre-peint__couche {
  position: absolute; inset: 0; color: var(--os); pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.4s var(--ease), mask-position 1.4s var(--ease);
}
.titre-peint.is-peint .titre-peint__couche { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ---------- La galerie : toutes les pièces ensemble, montées en planches ---------- */
.galerie { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
/* Le genre du groupe, en petites capitales, suivi d'un filet de reliure */
.galerie__titre {
  display: flex; align-items: center; gap: 1.1rem; margin-bottom: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-sc); font-weight: 500; font-size: var(--text-label); letter-spacing: .06em; color: var(--os-2);
}
.galerie__titre::after { content: ""; flex: 1; height: 1px; background: var(--acier-2); }
.galerie__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.6rem); }
.galerie__grille li { min-width: 0; }
.tuile {   /* passe-partout, comme les planches de l'avant, après : filet, retrait, filet intérieur */
  position: relative; display: block; aspect-ratio: 1; padding: 9px;
  border: 1px solid var(--acier-2); background: #09090A;
  box-shadow: inset 0 0 0 4px #09090A, inset 0 0 0 5px var(--acier-2);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.tuile__image { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; }
/* La photo garde ses proportions ; ses bords se fondent dans le noir de la planche */
.tuile__image img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  transition: transform var(--t-slow) var(--ease);
}
/* La lampe au-dessus de la pièce choisie */
.tuile__image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(214, 196, 170, .16), rgba(214, 196, 170, 0) 70%);
  transition: opacity var(--t-base) var(--ease);
}
@media (hover: hover) {
  .galerie:has(.tuile:hover) .tuile:not(:hover) { opacity: .5; }
  .tuile:hover { border-color: var(--cuivre); }
  .tuile:hover .tuile__image::after { opacity: 1; }
  .tuile:hover .tuile__image img { transform: scale(1.04); }
}
.galerie:has(.tuile:focus-visible) .tuile:not(:focus-visible) { opacity: .5; }
.tuile:focus-visible { border-color: var(--cuivre); }
.tuile:focus-visible .tuile__image::after { opacity: 1; }
@media (max-width: 900px) { .galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .tuile { padding: 6px; box-shadow: inset 0 0 0 3px #09090A, inset 0 0 0 4px var(--acier-2); }
}

/* ---------- La visionneuse : une pièce en grand, puis la précédente ou la suivante ---------- */
.fiche {
  width: min(100% - 2rem, 1040px); max-height: min(94vh, 980px); margin: auto; padding: 0;
  border: 1px solid var(--acier); border-radius: 2px; background: var(--cuir-2); color: var(--os);
  overflow: hidden;
}
.fiche::backdrop { background: rgba(6, 6, 8, .86); }
.fiche[open] { animation: fiche-in .45s var(--ease); }
@keyframes fiche-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fiche__page { display: grid; max-height: inherit; overflow-y: auto; }
.fiche__planche { position: relative; display: grid; place-items: center; background: #080809; }
.fiche__image { width: 100%; height: min(76vh, 800px); object-fit: contain; }
.fiche__nav, .fiche__fermer {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--acier); border-radius: 2px; background: rgba(14, 13, 15, .82); color: var(--os); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.fiche__nav { top: 50%; transform: translateY(-50%); }
.fiche__nav:active { transform: translateY(-50%) scale(.96); }
.fiche__nav--prec { left: .75rem; }
.fiche__nav--suiv { right: .75rem; }
.fiche__fermer { top: .75rem; right: .75rem; }
@media (hover: hover) { .fiche__nav:hover, .fiche__fermer:hover { border-color: var(--os-3); } }
.fiche__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 1.6rem); border-top: 1px solid var(--acier-2);
}
.fiche__compte {
  margin-right: auto; font-family: var(--font-sc); font-weight: 500; font-size: var(--text-label);
  letter-spacing: .06em; color: var(--os-2);
}
.fiche__vues { display: flex; flex-wrap: wrap; gap: .5rem; }
.fiche__vues:empty { display: none; }
.fiche__vue {
  width: 56px; height: 56px; padding: 0; border: 1px solid var(--acier-2); border-radius: 2px;
  background: #080809; cursor: pointer; overflow: hidden; transition: border-color var(--t-fast) var(--ease);
}
.fiche__vue img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vue[aria-pressed="true"] { border-color: var(--cuivre); }
@media (hover: hover) { .fiche__vue:hover { border-color: var(--os-3); } }
@media (max-width: 640px) {
  .fiche { width: calc(100% - 1rem); }
  .fiche__image { height: min(60vh, 520px); }
  .fiche__nav { width: 44px; height: 44px; }
  .fiche__nav--prec { left: .5rem; }
  .fiche__nav--suiv { right: .5rem; }
  .fiche__cta { width: 100%; justify-content: center; }
}

/* ---------- Avant, après : deux planches montées ---------- */
.guide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.guide__tete { grid-column: 1 / 5; align-self: center; }
.planche--avant { grid-column: 5 / 8; }
.planche--apres { grid-column: 8 / 13; }
.planche__cadre {   /* passe-partout : filet extérieur, retrait, filet intérieur */
  display: block; padding: 10px; border: 1px solid var(--acier); background: #09090A;
  box-shadow: inset 0 0 0 5px #09090A, inset 0 0 0 6px var(--acier-2);
}
.planche__cadre img { width: 100%; height: auto; }
.planche figcaption { margin-top: 1rem; color: var(--os-2); font-size: var(--text-small); }
.planche__etape { font-family: var(--font-sc); font-weight: 700; letter-spacing: .06em; color: var(--os); margin-right: .35rem; }
@media (max-width: 960px) {
  .guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .guide__tete { grid-column: 1 / -1; }
  .planche--avant { grid-column: 1; }
  .planche--apres { grid-column: 2; }
}
@media (max-width: 520px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .planche--avant, .planche--apres { grid-column: 1; }
}

/* ---------- Commande : le récit, puis les quatre temps ---------- */
.commande { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.commande__recit { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + 3rem); }
.lettrine { margin-top: 2rem; max-width: 36ch; color: var(--os); font-size: 1.2rem; text-wrap: pretty; }
.lettrine::first-letter {
  float: left; margin: .12em .14em 0 0; font-family: var(--font-display); font-weight: 800;
  font-size: 4.4em; line-height: .78; color: var(--cuivre);
}
.etapes { grid-column: 7 / 13; counter-reset: etape; }
.etapes li {
  counter-increment: etape; position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1.25rem;
  padding: 1.9rem 0; border-bottom: 1px solid var(--acier-2);
}
.etapes li::before {
  content: counter(etape, upper-roman); grid-row: 1 / span 2; padding-top: .35rem;
  font-family: var(--font-sc); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .06em; color: var(--os-3);
}
.etapes h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; }
.etapes p { margin-top: .5rem; color: var(--os-2); max-width: 44ch; text-wrap: pretty; }
@media (max-width: 900px) {
  .commande { grid-template-columns: minmax(0, 1fr); }
  .commande__recit, .etapes { grid-column: 1; position: static; }
}

/* ---------- Tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.tarifs__prix { grid-column: 1 / 7; display: grid; gap: 1.8rem; justify-items: start; }
.tarifs__texte { color: var(--os-2); font-size: 1.2rem; max-width: 42ch; }
.tarifs__vente { grid-column: 8 / 13; margin-top: clamp(1rem, 7vw, 7.5rem); padding: 2rem 0 0; border-top: 1px solid var(--acier); }
.tarifs__vente h3 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.tarifs__vente p { margin-top: .8rem; color: var(--os-2); }
@media (max-width: 900px) {
  .tarifs { grid-template-columns: minmax(0, 1fr); }
  .tarifs__prix, .tarifs__vente { grid-column: 1; }
}
/* Ce qui attend une réponse de Mattéo se voit tout de suite (aperçu seulement) */
.a-confirmer {
  display: grid; gap: .45rem; padding: 1.2rem 1.4rem; max-width: 44ch;
  border: 1px dashed var(--os-3); color: var(--os-2);
}
.a-confirmer__etiquette { font-family: var(--font-sc); font-weight: 700; font-size: var(--text-label); letter-spacing: .06em; color: var(--os); }
.a-confirmer--ligne { display: block; padding: .8rem 1rem; }
.a-confirmer--ligne .a-confirmer__etiquette { margin-right: .5rem; }

/* ---------- Questions ---------- */
.questions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.questions .titre-peint { grid-column: 1 / 5; }
.faq { grid-column: 6 / 13; }
.faq details { border-bottom: 1px solid var(--acier-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 1.22rem; line-height: 1.35; transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { color: var(--os-3); transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease); }
.faq details[open] summary .icone { transform: rotate(180deg); color: var(--cuivre); }
@media (hover: hover) { .faq summary:hover { color: #F0E9DE; } }
.faq details > p { padding: 0 0 1.5rem; color: var(--os-2); max-width: 56ch; }
@media (max-width: 900px) {
  .questions { grid-template-columns: minmax(0, 1fr); }
  .questions .titre-peint, .faq { grid-column: 1; }
}

/* ---------- Écrire ---------- */
.ecrire { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.ecrire__texte { grid-column: 1 / 6; }
.ecrire__formulaire { grid-column: 6 / 13; padding: clamp(1.5rem, 3.5vw, 2.75rem); border: 1px solid var(--acier); background: var(--cuir-2); box-shadow: inset 0 0 0 5px var(--cuir-2), inset 0 0 0 6px var(--acier-2); }
.direct { margin-top: 2.6rem; display: grid; gap: .55rem; justify-items: start; }
.direct p { color: var(--os-2); margin-bottom: .3rem; }
.direct a, .footer__contact a, .footer__contact p {
  display: inline-flex; align-items: center; gap: .65rem; max-width: 100%; overflow-wrap: anywhere;
  text-decoration: none; padding: .3rem 0; transition: color var(--t-fast) var(--ease);
}
.direct a { color: var(--os); font-size: 1.12rem; }
.direct a span { border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
@media (hover: hover) { .direct a:hover span { border-bottom-color: var(--cuivre); } }
.direct .icone { color: var(--os-3); }
@media (max-width: 960px) {
  .ecrire { grid-template-columns: minmax(0, 1fr); }
  .ecrire__texte, .ecrire__formulaire { grid-column: 1; }
}

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .45rem; align-content: start; }
.field label { font-family: var(--font-sc); font-weight: 500; font-size: 1rem; letter-spacing: .04em; }
.field .optional { font-family: var(--font-body); font-style: italic; letter-spacing: 0; color: var(--os-3); }
.field .hint { font-size: var(--text-fine); color: var(--os-3); }
.field .error { display: none; font-size: var(--text-fine); font-weight: 500; color: var(--erreur); }
.field.is-invalid .error { display: block; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--field-border); border-radius: 2px;
  background: var(--cuir); color: var(--os); transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cuivre); outline-offset: 2px; border-color: var(--cuivre); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--erreur); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select:invalid { color: var(--os-3); }
.select option { background: var(--cuir-2); color: var(--os); }
.select .icone { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--os-3); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__alert {
  display: flex; gap: .65rem; align-items: flex-start; padding: .9rem 1rem;
  background: var(--erreur-fond); color: var(--erreur); font-size: var(--text-small); font-weight: 500;
  overflow-wrap: anywhere; animation: rise-in var(--t-base) var(--ease);
}
.form__alert .icone { margin-top: .15em; }
.form__consent { font-size: var(--text-fine); color: var(--os-3); text-align: center; }
.form__success { display: grid; gap: .8rem; padding: 1.5rem 0; animation: rise-in .45s var(--ease); }
.form__success h3 { display: flex; align-items: baseline; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1.1; }
.form__success h3 .icone { width: .8em; height: .8em; color: var(--cuivre); align-self: center; }
.form__success p { color: var(--os-2); }

/* ---------- Pied de page : le colophon ---------- */
.footer { padding: 5rem 0 2.2rem; border-top: 1px solid var(--acier-2); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 2.5rem; }
.footer__logo-lien { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; }
.footer__logo { width: 72px; height: 72px; border-radius: 50%; }
.footer__marque { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.footer__brand p { margin-top: 1.2rem; color: var(--os-2); max-width: 32ch; }
.footer__titre { font-family: var(--font-sc); font-weight: 700; font-size: var(--text-label); letter-spacing: .06em; color: var(--os-2); margin-bottom: .4rem; }
.footer__nav, .footer__contact { display: grid; gap: .3rem; align-content: start; justify-items: start; }
.footer__nav a { padding: .3rem 0; color: var(--os); text-decoration: none; }
.footer__contact a, .footer__contact p { color: var(--os); }
.footer__contact .icone { color: var(--os-3); }
@media (hover: hover) { .footer__nav a:hover, .footer__contact a:hover { color: #F0E9DE; text-decoration: underline; text-decoration-color: var(--cuivre); } }
.footer__bottom {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--acier-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 2rem;
  font-size: var(--text-fine); color: var(--os-3);
}
.footer__bottom p { max-width: 80ch; }
.footer__bottom a { color: var(--os-2); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } }

/* ---------- Apparitions au défilement (réservées aux blocs qui le méritent) ---------- */
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible { animation: reveal-in .9s var(--ease) calc(var(--i, 0) * 90ms) backwards; }

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* ---------- Mouvement réduit ----------
   Le héros passe en image fixe (décidé par window.HERO). On retire les animations décoratives et on
   montre chaque élément dans son état final ; les retours d'état courts (couleur au survol, focus)
   restent, utiles comme information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cuir::after { animation: none; }
  .js .reveal { opacity: 1; animation: none; }
  .titre-peint__couche { transition: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
  .form__alert, .form__success, .fiche[open] { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .tuile__image img, .btn, .btn .icone, .hero__video { transition: none; }
  .tuile:hover .tuile__image img { transform: none; }
  .fiche__nav:active { transform: translateY(-50%); }
  .btn:hover .icone { transform: none; }
}