/* ==========================================================================
   La Main Verte d'Aurélie : feuille de style principale (v3)

   Direction : vert du logo (#3E6646) comme couleur vivante, vert profond pour les
   blocs, blanc os et vert pâle pour les fonds. Titres en Cormorant Garamond
   (serif classique, proche des capitales du logo), texte en Figtree.

   Système de formes (règle unique, appliquée partout) :
     - boutons et étiquettes  : pilule (999px)
     - cadres, cartes, blocs   : 28px  (--r-lg)
     - images internes         : 18px  (--r-md)
     - champs de formulaire    : 12px  (--r-sm)

   Échelle des z-index (ne pas improviser d'autres valeurs) :
     1-2   couches du comparateur avant/après
     39    menu mobile plein écran
     40    barre de navigation collante
     55    traînée de feuilles (canvas)
     60    grain fixe
     100   lien d'évitement
     (les fiches <dialog> vivent dans la couche supérieure du navigateur, au-dessus de tout)
   ========================================================================== */

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

  --bg: #F4F5EF;
  --bg-2: #E4EEE1;
  --surface: #FBFBF8;
  --ink: #15241B;
  --ink-2: #3F4F45;
  --ink-3: #5E6E62;
  --line: rgba(21, 36, 27, 0.10);
  --line-strong: rgba(21, 36, 27, 0.20);
  --field-border: rgba(21, 36, 27, 0.50);   /* contour des champs : au moins 3:1 contre la carte */
  --tint: rgba(62, 102, 70, 0.08);
  --tint-strong: rgba(62, 102, 70, 0.16);

  --brand: #3E6646;          /* vert du logo */
  --brand-soft: #A7DDB3;
  --deep: #1B4332;           /* blocs vert profond */
  --deep-2: #14362A;
  --on-green: #F4F5EF;
  --on-green-2: rgba(244, 245, 239, 0.76);
  --accent-text: #3E6646;

  --btn-bg: #3E6646;
  --btn-bg-hover: #2F5638;
  --btn-fg: #F4F5EF;
  --focus: #3E6646;

  --error: #A93F27;
  --error-bg: #FBEDE8;
  --shadow-rgb: 21, 36, 27;

  /* Teintes des saisons (sémantiques) */
  --s1-bg: #D6EAD3; --s1-fg: #2F6B3A;
  --s2-bg: #E4EEC1; --s2-fg: #4C6812;
  --s3-bg: #FBE6AE; --s3-fg: #7A5806;
  --s4-bg: #F6D6BE; --s4-fg: #9A4A1E;
  --s5-bg: #DBE5EE; --s5-fg: #46627A;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durées : un seul langage de mouvement */
  --t-fast: 180ms;   /* retours de survol et de focus */
  --t-base: 280ms;   /* changements d'état (cartes, menu, fiche) */
  --t-slow: 700ms;   /* zooms de photos, grandes apparitions */

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  /* Petites tailles de texte, nommées par usage (le texte courant reste à 1.0625rem) */
  --text-fine: .85rem;    /* petits caractères : aide et erreurs des champs, consentement, bas de page */
  --text-label: .9rem;    /* étiquettes : puces, badges, méta, indices, numéros d'étape */
  --text-small: .95rem;   /* texte secondaire : liens de la barre, libellés, petits boutons, descriptions */

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 7.5vw, 7rem);
  --nav-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1711;
    --bg-2: #13211A;
    --surface: #182419;
    --ink: #ECEFE6;
    --ink-2: #B9C4BA;
    --ink-3: #94A196;
    --line: rgba(236, 239, 230, 0.10);
    --line-strong: rgba(236, 239, 230, 0.20);
    --field-border: rgba(236, 239, 230, 0.45);
    --tint: rgba(143, 204, 159, 0.10);
    --tint-strong: rgba(143, 204, 159, 0.18);

    --brand: #8FCC9F;
    --brand-soft: #A7DDB3;
    --deep: #1E4A35;
    --deep-2: #163B2A;
    --on-green: #ECEFE6;
    --on-green-2: rgba(236, 239, 230, 0.76);
    --accent-text: #8FCC9F;

    --btn-bg: #8FCC9F;
    --btn-bg-hover: #A3D8B1;
    --btn-fg: #0E1711;
    --focus: #8FCC9F;

    --error: #E4907B;
    --error-bg: rgba(228, 144, 123, 0.14);
    --shadow-rgb: 0, 0, 0;

    --s1-bg: rgba(143, 204, 159, .18); --s1-fg: #A7DDB3;
    --s2-bg: rgba(190, 210, 120, .18); --s2-fg: #CFDD8A;
    --s3-bg: rgba(250, 220, 140, .18); --s3-fg: #F1D27A;
    --s4-bg: rgba(240, 180, 140, .20); --s4-fg: #F0B58E;
    --s5-bg: rgba(180, 200, 220, .18); --s5-fg: #B9CCDD;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Surfaces du navigateur habillées aux couleurs du site */
::selection { background: rgba(62, 102, 70, .26); color: var(--ink); }
html { scrollbar-color: var(--brand) var(--bg-2); }
input, textarea, select { caret-color: var(--brand); }
@media (prefers-color-scheme: dark) {
  ::selection { background: rgba(143, 204, 159, .32); }
}
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur les surfaces vert profond, l'anneau passe en vert clair (7:1) */
.section--deep :focus-visible, .marquee :focus-visible, .contact__copy :focus-visible { outline-color: var(--brand-soft); }

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

.section { padding-block: var(--section); }
.section--tint { background: var(--bg-2); }
.section--deep { background: var(--deep); color: var(--on-green); border-radius: clamp(24px, 4vw, 56px); }

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 54px; padding: .5rem .5rem .5rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn:active { transform: scale(.96); }
/* Sur un écran étroit, le libellé passe à la ligne plutôt que de déborder de sa carte */
.btn__label { line-height: 1.2; text-align: start; }

.btn__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  transition: transform var(--t-base) var(--ease-soft);
}
/* Survols réservés aux appareils qui survolent vraiment (souris, pavé tactile) : sur un écran
   tactile, un survol resterait collé après un toucher */
@media (hover: hover) { .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); } }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 14px 30px -18px rgba(62, 102, 70, .7); }
@media (hover: hover) { .btn--primary:hover { background: var(--btn-bg-hover); } }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .18); }
@media (prefers-color-scheme: dark) {
  .btn--primary { box-shadow: none; }
  .btn--primary .btn__icon { background: rgba(14, 23, 17, .16); }
}

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) { .btn--ghost:hover { background: var(--tint); border-color: var(--ink-3); } }
.btn--ghost .btn__icon { background: var(--tint); }

.btn--sm { min-height: 46px; padding: .35rem .35rem .35rem 1.15rem; font-size: var(--text-small); gap: .7rem; }
.btn--sm .btn__icon { width: 32px; height: 32px; font-size: 1rem; }

.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .72; cursor: progress; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.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;
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: 0; line-height: 1;
}
.brand picture { display: contents; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; flex: none; }
.brand__name em { font-style: italic; font-weight: 500; color: var(--ink-2); }

.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  text-decoration: none; padding: .7rem .95rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 500; font-size: var(--text-small); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a.is-active { color: var(--ink); background: var(--tint); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); background: var(--tint); } }

.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .5s 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); }

/* La barre complète (marque, liens, bouton) demande environ 960 px : en dessous, elle passe au menu */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Menu mobile plein écran */
.menu {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.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; }
/* Menu ouvert : la barre devient opaque, sinon les liens qui défilent passent derrière le nom */
body.menu-open .nav { background: var(--bg); }

/* ---------- Héro ---------- */
.hero {
  position: relative; overflow: clip;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
}
.hero::before {
  top: -25%; right: -12%;
  width: min(60vw, 820px); height: min(60vw, 820px);
  background: radial-gradient(closest-side, rgba(143, 204, 159, .38), transparent 72%);
}
.hero::after {
  bottom: -30%; left: -10%;
  width: min(45vw, 600px); height: min(45vw, 600px);
  background: radial-gradient(closest-side, rgba(235, 240, 200, .8), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  .hero::before { background: radial-gradient(closest-side, rgba(143, 204, 159, .16), transparent 72%); }
  .hero::after { background: radial-gradient(closest-side, rgba(143, 204, 159, .08), transparent 72%); }
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.hero__copy { grid-column: 1 / 7; padding-bottom: clamp(1.5rem, 5vw, 5rem); }
.hero__media { grid-column: 7 / 13; position: relative; }
@media (min-width: 1340px) {
  /* Le comparateur déborde légèrement à droite : la page respire hors de la grille.
     Pas sous 1 340 px : le bord de l'écran rognerait le cadre et l'étiquette « Après » */
  .hero__media { margin-right: -5vw; }
}


.hero h1 {
  font-size: clamp(3rem, 1.6rem + 4.2vw, 5rem);
  line-height: 1;
}
.hero__lede {
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  color: var(--ink-2); max-width: 36ch; text-wrap: pretty;
}
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__hint {
  margin-top: .9rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: var(--text-label); color: var(--ink-2);
}
.hero__hint i { font-size: 1.1rem; }

@media (max-width: 900px) {
  /* Une seule colonne : les 11 espacements d'une grille à 12 colonnes dépasseraient la largeur d'un téléphone */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero__copy, .hero__media { grid-column: 1 / -1; }
  .hero__media { margin-top: 1rem; }
}

/* ---------- Cadre à double bordure (photos) ---------- */
.frame {
  padding: 8px; border-radius: var(--r-lg);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(var(--shadow-rgb), .4);
}
.frame__inner {
  border-radius: calc(var(--r-lg) - 8px); overflow: hidden;
  background: var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Contour de 1 px sur les photos qui touchent le bord de leur carte : l'ombre intérieure de la carte
   passe sous la photo, ce contour-ci passe par-dessus (noir à 10 % en clair, blanc à 10 % en sombre) */
.svc__media, .project__media, .pair__img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
@media (prefers-color-scheme: dark) {
  .svc__media, .project__media, .pair__img { outline-color: rgba(255, 255, 255, .1); }
}

/* ---------- Comparateur avant / après ----------
   Balayage automatique (propriété CSS typée animée), pause au survol ou au focus,
   prise en main à la souris, au doigt ou au clavier via un <input type="range"> invisible. */
@property --pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
.ba {
  --pos: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 6 / 7;
  touch-action: pan-y;
  background: var(--bg-2);
}
@media (max-width: 900px) { .ba { aspect-ratio: 4 / 3; } }
/* Chaque photo vit dans sa propre couche avec son étiquette : l'étiquette « Avant »
   n'existe que sur la photo d'avant, « Après » que sur la photo d'après. */
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Chaque couche a son propre contexte d'empilement : l'étiquette « Après » ne peut pas
   passer au-dessus de la couche « Avant » quand celle-ci recouvre tout. */
.ba__layer--after { z-index: 1; }
.ba__layer--before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* La ligne est une couche pleine largeur déplacée par transform : aucun recalcul de mise en page,
   et elle passe au-dessus des deux photos (z-index 3). */
.ba__divider {
  position: absolute; inset: 0; z-index: 3;
  transform: translateX(var(--pos));
  pointer-events: none;
}
.ba__divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(14, 36, 23, .18), 0 0 24px rgba(0, 0, 0, .25);
}
.ba__handle {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(255, 255, 255, .96); color: #15241B;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55);
}
/* Anneau de pulsation : transform et opacité seulement */
.ba__handle::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75); opacity: 0;
}
.ba__tag {
  position: absolute; bottom: 1.1rem; z-index: 1;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  pointer-events: none;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.ba__tag--before { left: 1.1rem; color: #F4F5EF; background: rgba(21, 36, 27, .78); }
.ba__tag--after { right: 1.1rem; color: #15241B; background: rgba(244, 245, 239, .94); }
/* Le range invisible ne sert qu'au clavier : la souris et le doigt sont gérés sur .ba lui-même */
.ba { cursor: ew-resize; }
.ba__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
@media (pointer: coarse) {
  /* Poignée plus grosse au toucher */
  .ba__handle { width: 68px; height: 68px; font-size: 1.7rem; }
}
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--focus); outline-offset: -3px; }

@keyframes ba-sweep {
  0%   { --pos: 18%; }
  50%  { --pos: 82%; }
  100% { --pos: 18%; }
}
@keyframes ba-pulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ba.is-auto { animation: ba-sweep 12s cubic-bezier(.45, 0, .55, 1) infinite; }
.ba.is-auto .ba__handle::after { animation: ba-pulse 2.4s ease-out infinite; }
.ba.is-auto:hover,
.ba.is-auto:focus-within,
.ba.is-auto.is-offscreen { animation-play-state: paused; }
.ba.is-auto:hover .ba__handle::after,
.ba.is-auto:focus-within .ba__handle::after,
.ba.is-auto.is-offscreen .ba__handle::after { animation-play-state: paused; }

/* ---------- Bande défilante des services ---------- */
.marquee {
  overflow: hidden; position: relative;
  padding: 1.1rem 0;
  background: var(--deep); color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .08);
  cursor: grab; user-select: none; touch-action: pan-y;
}
.marquee.is-dragging { cursor: grabbing; }
.marquee__pause {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(27, 67, 50, .85); color: var(--on-green);
  display: grid; place-items: center; font-size: 1.1rem;
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) { .marquee__pause:hover { background: rgba(255, 255, 255, .14); } }
.marquee__pause:focus-visible { outline-color: var(--brand-soft); }
/* Fondus aux deux extrémités : les mots s'estompent avant le bord et avant le bouton pause */
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; width: 5rem; background: linear-gradient(to right, var(--deep) 20%, transparent); }
.marquee::after { right: 0; width: 10rem; background: linear-gradient(to left, var(--deep) 45%, transparent); }

.marquee__track {
  display: flex; align-items: center; gap: 2.75rem;
  width: max-content; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: .01em;
  will-change: transform;
}
.marquee__copy { display: flex; align-items: center; gap: 2.75rem; }
.marquee__track i { font-size: 1.15rem; color: var(--brand-soft); }

/* ---------- En-têtes de section ---------- */
.section__head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2, .split__copy h2, .contact h2 {
  font-size: clamp(2.4rem, 1.3rem + 3vw, 3.7rem);
  line-height: 1.04;
}
.section__head p { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.12rem; max-width: 56ch; text-wrap: pretty; }
.section--deep .section__head p { color: var(--on-green-2); }

.section__head--right { margin-left: auto; text-align: right; }
.section__head--right p { margin-left: auto; }

/* Phrase d'amorce en italique (remplace les étiquettes en capitales au-dessus des titres) */
.lead-in {
  margin-bottom: .6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.4rem; color: var(--accent-text);
}

/* ---------- Services : quatre cartes ---------- */
.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;
}
/* Quinconce : la colonne de droite descend, les photos alternent haut et bas */
@media (min-width: 901px) {
  .svc:nth-child(even) { margin-top: 4rem; }
}
.svc.svc--flip { flex-direction: column-reverse; }
.svc {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Ces cartes ne sont pas cliquables : pas de soulèvement au survol, seulement le zoom lent de la photo */
.svc__media { aspect-ratio: 16 / 9; overflow: hidden; }
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
@media (hover: hover) { .svc:hover .svc__media img { transform: scale(1.04); } }
.svc__body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.svc h3 { font-size: 2rem; line-height: 1.08; }
.svc__lede { margin-top: .6rem; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.chips li {
  padding: .45rem .95rem; border-radius: 999px;
  font-size: var(--text-label); font-weight: 500; color: var(--ink);
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Réalisations : portfolio défilant ---------- */
.portfolio { position: relative; }
.portfolio__track {
  display: flex; gap: 1.5rem; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .5rem 1.5rem; margin: -.5rem -.5rem 0;
  scrollbar-width: none;
}
.portfolio__track::-webkit-scrollbar { display: none; }
.portfolio__track:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 4px; border-radius: var(--r-lg); }

.project {
  flex: 0 0 min(100%, 560px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  color: var(--on-green); text-align: left;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) {
  .project:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 40px 80px -40px rgba(0, 0, 0, .7);
  }
}
.project__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .project:hover .project__media img { transform: scale(1.04); } }
.project__badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: .45rem .95rem; border-radius: 999px;
  background: rgba(244, 245, 239, .94); color: #15241B;
  font-weight: 700; font-size: var(--text-label);
}
.project__body { padding: 1.5rem 1.75rem 1.75rem; display: grid; gap: .5rem; align-content: start; }
.project__meta { font-size: var(--text-label); color: var(--on-green-2); }
.project h3 { font-size: 2rem; line-height: 1.1; }
.project__body p:not(.project__meta) { color: var(--on-green-2); text-wrap: pretty; }
.project__cta {
  margin-top: .75rem; justify-self: start;
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: 0 0 .2rem; cursor: pointer;
  color: var(--on-green); font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
@media (hover: hover) { .project:hover .project__cta { border-bottom-color: var(--on-green); gap: .8rem; } }

.project--cta {
  flex-basis: min(100%, 400px); cursor: default;
  justify-content: center; gap: .9rem; padding: 2.25rem;
  background: rgba(255, 255, 255, .04);
  box-shadow: none; border: 1px dashed rgba(255, 255, 255, .28);
}
@media (hover: hover) { .project--cta:hover { transform: none; box-shadow: none; } }
.project--cta h3 { font-size: 1.9rem; }
.project--cta p { color: var(--on-green-2); }
.project--cta .btn { align-self: flex-start; margin-top: .5rem; }

.portfolio__nav { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .25rem; }
.portfolio__nav button {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--on-green);
  display: grid; place-items: center; font-size: 1.2rem;
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) { .portfolio__nav button:hover { background: rgba(255, 255, 255, .1); } }
.portfolio__nav button:disabled { opacity: .35; cursor: default; }

.btn--light { background: var(--on-green); color: var(--deep); }
@media (hover: hover) { .btn--light:hover { background: #FBFBF8; } }
.btn--light .btn__icon { background: rgba(27, 67, 50, .12); }

@media (max-width: 760px) {
  .project { flex-basis: 86%; }
  .project--cta { flex-basis: 78%; padding: 1.75rem 1.5rem; }
}

/* ---------- Fiche projet (dialog) ---------- */
.lightbox {
  border: 0; padding: 0; margin: auto;
  width: min(1120px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  background: transparent; color: var(--ink);
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(14, 36, 23, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox[open] { animation: lightbox-in .4s var(--ease); }
@keyframes lightbox-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.lightbox__inner {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  max-height: calc(100vh - 2rem); overflow: auto;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .65);
}
.lightbox__head { padding-right: 3rem; }   /* place pour le bouton Fermer, qui flotte en haut à droite */
.lightbox__meta { font-size: var(--text-label); color: var(--ink-3); }
.lightbox__head h3 { font-size: clamp(2rem, 1.2rem + 2vw, 2.9rem); line-height: 1.08; margin-top: .25rem; }
/* Enfant direct du <dialog>, hors de la partie qui défile : il reste à l'écran jusqu'en bas de la fiche */
.lightbox__close {
  position: absolute; top: .75rem; right: .75rem; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  display: grid; place-items: center; font-size: 1.2rem;
  transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
@media (hover: hover) { .lightbox__close:hover { background: var(--tint-strong); transform: rotate(90deg); } }
.lightbox__lede { margin-top: 1.25rem; color: var(--ink-2); max-width: 66ch; text-wrap: pretty; }
body.has-dialog { overflow: hidden; }

/* ---------- Paires avant / après (dans les fiches projet, surface claire) ---------- */
.case + .case {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.case__head { max-width: 66ch; margin-bottom: 2rem; }
.case__head h3, .case__head h4 {
  margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; text-wrap: balance;
  font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1;
}
.case__head p { margin-top: .8rem; color: var(--ink-2); text-wrap: pretty; }
.case__head .chips { margin-top: 1.1rem; }

.pair {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center;
}
.pair__img {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); aspect-ratio: 2 / 1;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(var(--shadow-rgb), .5);
}
.pair__img img { width: 100%; height: 100%; object-fit: cover; }
.pair__label {
  position: absolute; top: 1rem; left: 1rem;
  padding: .5rem 1.05rem; border-radius: 999px;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.pair__img--before .pair__label { color: #F4F5EF; background: rgba(21, 36, 27, .78); }
.pair__img--after .pair__label { color: #15241B; background: rgba(244, 245, 239, .94); }
.pair__arrow {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  color: var(--ink); background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 761px) {
  /* Les deux photos ne sont pas au même niveau : l'avant descend, l'après monte (et l'inverse pour le second volet) */
  .pair__img--before { margin-top: 3.5rem; }
  .pair__img--after { margin-bottom: 3.5rem; }
  .case--alt .pair__img--before { margin-top: 0; margin-bottom: 3.5rem; }
  .case--alt .pair__img--after { margin-bottom: 0; margin-top: 3.5rem; }
}
@media (max-width: 760px) {
  .section__head--right { margin-left: 0; text-align: left; }
  .section__head--right p { margin-left: 0; }
  .pair { grid-template-columns: 1fr; gap: .9rem; }
  .pair__arrow { transform: rotate(90deg); justify-self: center; width: 48px; height: 48px; }
  .pair__img { aspect-ratio: 16 / 9; }
}

/* ---------- Saisons : ligne du temps avec icônes ---------- */
.seasons {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.75rem;
}
.seasons::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px;
  background: var(--line-strong);
}
.season { position: relative; }
.season__icon {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.45rem;
  background: var(--s-bg); color: var(--s-fg);
  box-shadow: 0 0 0 6px var(--bg);
  margin-bottom: 1.1rem;
  transition: transform var(--t-base) var(--ease);
}
@media (hover: hover) { .season:hover .season__icon { transform: scale(1.08); } }
.season--1 { --s-bg: var(--s1-bg); --s-fg: var(--s1-fg); }
.season--2 { --s-bg: var(--s2-bg); --s-fg: var(--s2-fg); }
.season--3 { --s-bg: var(--s3-bg); --s-fg: var(--s3-fg); }
.season--4 { --s-bg: var(--s4-bg); --s-fg: var(--s4-fg); }
.season--5 { --s-bg: var(--s5-bg); --s-fg: var(--s5-fg); }
.season__label { font-size: var(--text-label); font-weight: 600; color: var(--s-fg); }
.season h3 { margin-top: .3rem; font-size: 1.55rem; line-height: 1.12; }
.season p:not(.season__label) { margin-top: .6rem; font-size: var(--text-small); color: var(--ink-2); text-wrap: pretty; }

@media (max-width: 900px) {
  .seasons { grid-template-columns: 1fr; gap: 2.25rem; padding-left: 4rem; }
  .seasons::before { left: 24px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .season__icon { position: absolute; left: -4rem; top: 0; margin: 0; }
}

/* ---------- Approche : split ---------- */
.split {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split__media { grid-column: 1 / 6; position: relative; }
.split__copy { grid-column: 6 / 13; }
@media (min-width: 901px) {
  /* La photo déborde sur la section précédente */
  .split__media { margin-top: -9rem; z-index: 1; }
}
.split__extra {
  position: absolute; right: -2.5rem; bottom: -2.5rem; z-index: 2;
  width: clamp(150px, 16vw, 230px);
  padding: 6px; border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 34px 70px -30px rgba(0, 0, 0, .5);
  transform: rotate(4deg);
  transition: transform var(--t-base) var(--ease);
}
.split__extra img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-md) - 6px); }
@media (hover: hover) { .split__media:hover .split__extra { transform: rotate(1deg) translateY(-6px); } }
@media (max-width: 900px) { .split__extra { display: none; } }
.split__media .frame img { aspect-ratio: 4 / 5; }
.split__copy h2 { font-size: clamp(2.1rem, 1.2rem + 2.3vw, 3rem); line-height: 1.1; }
.split__lede { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.1rem; max-width: 56ch; text-wrap: pretty; }

.steps { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--line);
}
.steps h3 { font-size: 1.6rem; line-height: 1.1; }
.steps p { color: var(--ink-2); font-size: var(--text-small); text-wrap: pretty; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split__media, .split__copy { grid-column: 1 / -1; }
  .split__media .frame img { aspect-ratio: 4 / 3; }
  .steps li { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.contact__copy { grid-column: 1 / 6; }
.contact__form { grid-column: 7 / 13; }
.contact h2 { font-size: clamp(2.3rem, 1.2rem + 2.6vw, 3.4rem); }
.contact__lede { margin-top: 1.25rem; color: var(--on-green-2); font-size: 1.1rem; max-width: 46ch; text-wrap: pretty; }

.next { margin-top: 2.5rem; }
.next h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.next ol { counter-reset: etape; margin-top: 1rem; display: grid; gap: .9rem; }
.next li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: center;
  color: var(--on-green-2);
}
.next li::before {
  counter-increment: etape; content: counter(etape);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); color: var(--on-green);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-label);
}

.direct { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: .5rem; }
.direct p { color: var(--on-green-2); }
.direct a {
  display: inline-flex; align-items: center; gap: .6rem; justify-self: start;
  max-width: 100%; overflow-wrap: anywhere;
  color: var(--on-green); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .direct a:hover { border-bottom-color: currentColor; } }
.direct a i { font-size: 1.15rem; }

@media (max-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .contact__copy, .contact__form { grid-column: 1 / -1; }
}

/* Carte formulaire (double bordure) */
.card {
  padding: 8px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.card__inner {
  background: var(--surface); color: var(--ink);
  border-radius: calc(var(--r-lg) - 8px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) {
  .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
}

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: var(--text-small); }
.field .optional { font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: var(--text-fine); color: var(--ink-3); }
.field .error { display: none; font-size: var(--text-fine); font-weight: 500; color: var(--error); }
.field.is-invalid .error { display: block; }

.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--field-border);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select:invalid { color: var(--ink-3); }
.select i {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink-3); font-size: 1.05rem;
}

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__alert {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r-sm);
  background: var(--error-bg); color: var(--error);
  font-size: var(--text-small); font-weight: 500;
  overflow-wrap: anywhere;   /* l'adresse courriel ne déborde pas sur un écran étroit */
}
.form__alert i { font-size: 1.2rem; flex: none; }
.form__consent { font-size: var(--text-fine); color: var(--ink-3); text-align: center; }

/* Apparition des états du formulaire (erreur, succès) : courte montée depuis le bas */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.form__alert { animation: rise-in var(--t-base) var(--ease); }
.form__success { display: grid; gap: .75rem; padding: 1rem 0; animation: rise-in .45s var(--ease); }
.form__success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--tint-strong); color: var(--accent-text);
}
.form__success h3 { font-size: 1.9rem; line-height: 1.1; }
.form__success p { color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.footer { padding: 4rem 0 2rem; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 2.5rem; }
.footer__brand a { display: inline-block; }
.footer__logo { width: 160px; height: auto; display: block; }
.footer__brand p { margin-top: 1.25rem; color: var(--ink-2); max-width: 36ch; }
.footer h3 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; margin-bottom: .9rem; letter-spacing: 0; }
.footer__nav, .footer__contact { display: grid; gap: .45rem; align-content: start; }
.footer__nav h3, .footer__contact h3 { margin-bottom: .35rem; }
.footer__nav a, .footer__contact a, .footer__contact p {
  display: inline-flex; align-items: center; gap: .55rem; justify-self: start;
  padding: .3rem 0; max-width: 100%; overflow-wrap: anywhere;
  color: var(--ink-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer__contact p { align-items: flex-start; }
.footer__contact p i { margin-top: .3rem; }
@media (hover: hover) { .footer__nav a:hover, .footer__contact a:hover { color: var(--ink); text-decoration: underline; } }
.footer__contact i { font-size: 1.1rem; color: var(--ink-3); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: var(--text-fine); color: var(--ink-3);
}
.footer__bottom a { color: var(--ink-3); }

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Apparition au défilement ----------
   Animation (et non transition) : une fois jouée, elle ne laisse rien dans la cascade et
   l'élément retrouve ses propres transitions de survol. */
@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 .8s var(--ease) calc(var(--i, 0) * 80ms) backwards; }

/* ---------- Matière : léger grain fixe (aucun coût au défilement) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::after { opacity: .09; } }

/* ---------- Traînée de feuilles derrière le curseur ---------- */
/* width/height explicites : sans eux, un canvas positionné prend la taille de son bitmap
   (largeur × ratio de pixels) et les feuilles se dessinent à 2 ou 3 fois la distance du doigt. */
#trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; }

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

/* ---------- Mouvement réduit ----------
   On retire les animations décoratives (apparitions, balayage, pulsation, bande, feuilles,
   zooms de photos, soulèvements de cartes) mais on garde les changements d'état courts
   (couleur au survol, focus), qui restent utiles comme retour d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; animation: none; }
  .ba.is-auto, .ba.is-auto .ba__handle::after { animation: none; }
  .lightbox[open], .form__alert, .form__success { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .project, .season__icon, .split__extra,
  .svc__media img, .project__media img, .btn, .btn__icon, .lightbox__close { transition: none; }
  .project:hover, .season:hover .season__icon, .split__media:hover .split__extra,
  .svc:hover .svc__media img, .project:hover .project__media img, .btn:hover .btn__icon,
  .lightbox__close:hover { transform: none; }
  .marquee { cursor: default; }
  .marquee__pause { display: none; }
  .marquee__track { transform: none !important; width: auto; padding: 0 var(--gutter); }
  .marquee__copy { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: .5rem; }
  .marquee__copy:not(:first-child) { display: none; }
  #trail { display: none; }
}