/* ============================================================
   SUMO — Feuille de style
   Direction artistique : Apple × Arc'teryx × Porsche × B&O
   Palette sobre, très grands titres, énormément d'espace.
   ------------------------------------------------------------
   SOMMAIRE
   1.  Variables & thème
   2.  Reset & bases
   3.  Typographie (titres masqués, eyebrow…)
   4.  Boutons (magnétiques)
   5.  Utilitaires (curseur, préchargeur, nav, progress)
   6.  Le "module" SUMO (octogone + médaille + ruban)
   7.  Sections 1 → 11
   8.  Footer
   9.  Responsive
   10. Accessibilité / reduced-motion
============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES & THÈME
------------------------------------------------------------ */
:root {
  /* Palette imposée */
  --bg:      #F8F7F5;   /* fond */
  --ink:     #111111;   /* texte */
  --grey:    #ECECEC;   /* gris clair */
  --noir:    #0D0D0D;   /* noir profond */
  --accent:  #C89A4B;   /* accent doré */
  --bois:    #A27B5C;   /* bois */

  /* Déclinaisons */
  --ink-60:  rgba(17,17,17,.60);
  --ink-40:  rgba(17,17,17,.40);
  --ink-14:  rgba(17,17,17,.14);
  --line:    rgba(17,17,17,.10);
  --paper:   #FBFAF8;

  /* Rythme */
  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 80px);      /* marge latérale */
  --sp:  clamp(90px, 14vh, 220px);    /* respiration verticale entre sections */

  /* Typo */
  --font: "Inter", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Courbes premium */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);

  /* Ombres */
  --shadow-sm: 0 2px 10px rgba(17,17,17,.06);
  --shadow-md: 0 24px 60px -28px rgba(17,17,17,.35);
  --shadow-lg: 0 50px 120px -40px rgba(17,17,17,.45);

  /* Dimension d'un module SUMO (ajusté par section) */
  --mod: clamp(120px, 15.5vw, 210px);

  /* Silhouette octogonale (nuanciers du configurateur) */
  --oct: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* ------------------------------------------------------------
   2. RESET & BASES
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* piloté par Lenis */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis : scroll fluide */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

/* Titres de sections cachés jusqu'à révélation (évite le FOUC) */
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }

/* ------------------------------------------------------------
   3. TYPOGRAPHIE
------------------------------------------------------------ */
.display {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 6vw, 6rem);
  text-wrap: balance;
}
.display--hero {
  /* très grand titre, à gauche (esprit keynote) — calibré pour
     laisser respirer un espace net avant l'image à droite */
  font-size: clamp(2.8rem, 8vw, 8.2rem);
  line-height: 1.05;            /* + d'air : l'accent de « É » ne touche plus la ligne du dessus */
  letter-spacing: -0.04em;
}
/* le masque est agrandi vers le haut pour ne plus rogner les accents (É) */
.display--hero .line { padding-top: 0.16em; }
.display--story { font-size: clamp(2.2rem, 6.4vw, 5.6rem); }
.display--light { color: var(--bg); }

.eyebrow {
  font-size: clamp(.7rem, .82vw, .82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.eyebrow--light { color: rgba(255,255,255,.55); }

.section-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  margin-bottom: clamp(48px, 8vh, 110px);
}
.section-head .eyebrow { margin-bottom: 22px; }
.section-head--center { text-align: center; }
.section-head--center .display { margin-inline: auto; }

/* ------------------------------------------------------------
   4. BOUTONS
------------------------------------------------------------ */
.btn {
  --pad-y: 15px;
  --pad-x: 30px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  will-change: transform;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .5s var(--ease);
}
.btn__label { display: inline-block; will-change: transform; }

.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: #000; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-14);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--gold {
  background: var(--accent);
  color: #1a1206;
  box-shadow: 0 20px 50px -20px rgba(200,154,75,.7);
}
.btn--gold:hover { background: #d4a659; }

/* ------------------------------------------------------------
   5. UTILITAIRES GLOBAUX
------------------------------------------------------------ */

/* Renforce l'attribut [hidden] : sans ça, une classe qui impose son propre
   `display` (.field, .field-group…) prime sur le display:none natif du
   navigateur pour [hidden], et l'élément reste visible malgré tout. */
[hidden] { display: none !important; }

/* --- Curseur personnalisé --- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; opacity: 0; }
.cursor__dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
}
body.cursor-hover .cursor__ring { width: 64px; height: 64px; border-color: #fff; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --- Préchargeur --- */
.preloader {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 34px;
  background: var(--bg);
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader--done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.octagon-logo { width: 34px; height: 34px; }
.octagon-logo--sm { width: 20px; height: 20px; }
.preloader__word { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.35em; padding-left: .35em; }
.preloader__bar { width: min(220px, 60vw); height: 2px; background: var(--ink-14); overflow: hidden; border-radius: 2px; }
.preloader__bar span { display: block; width: 0%; height: 100%; background: var(--ink); }

/* --- Barre de progression scroll --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 8000;
  height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--bois));
}

/* --- Navigation --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: transform .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav--hidden { transform: translateY(-100%); }
.nav--solid {
  background: rgba(248,247,245,.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: 1600px; margin: 0 auto;
  padding: 20px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.18em; font-size: .95rem; }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  position: relative; font-size: .9rem; font-weight: 500; color: var(--ink-60);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { --pad-y: 11px; --pad-x: 22px; font-size: .85rem; }

.nav__burger { display: none; flex-direction: column; gap: 6px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { width: 26px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.nav--open .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav--open .nav__burger span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.nav__overlay {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.nav__overlay a { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
.nav--open .nav__overlay { opacity: 1; visibility: visible; transform: translateY(0); }

/* ------------------------------------------------------------
   6. LE MODULE SUMO (octogone + cerclage + médaille + ruban)
   Dessiné en CSS pour piloter finement les animations.
------------------------------------------------------------ */
.module {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--mod); height: var(--mod);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

/* Plaque octogonale noire (le "support") */
.module__plate {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, #2a2a2c 0%, #161618 42%, #0d0d0f 100%);
  clip-path: polygon(30% 2%, 70% 2%, 98% 30%, 98% 70%, 70% 98%, 30% 98%, 2% 70%, 2% 30%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.06),
    0 30px 50px -30px rgba(0,0,0,.7);
}
/* Fente à ruban en haut */
.module__plate::before {
  content: ""; position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 20%; height: 3.2%; border-radius: 6px;
  background: #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.9);
}
/* Empreinte SUMO discrète */
.module__plate::after {
  content: "SUMO"; position: absolute; left: 0; right: 0; bottom: 20%;
  text-align: center; font-size: calc(var(--mod) * .085); letter-spacing: .28em;
  font-weight: 700; color: rgba(255,255,255,.06);
  text-indent: .28em;
}

/* Cerclage de couleur */
.module__ring {
  position: absolute; inset: 15%;
  border-radius: 50%;
  border: 2px solid var(--ring, #c9a24b);
  opacity: .85;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset;
}

/* La médaille (disque + ruban) */
.medal {
  position: absolute; left: 50%; top: 50%;
  width: 58%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.medal__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 38% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 50% 40%, var(--m1, #c99a4b), var(--m2, #7c5a12) 78%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 -6px 14px rgba(0,0,0,.35),
    0 10px 22px -10px rgba(0,0,0,.5);
}
/* léger reflet mobile (piloté par --shine, animé au hover) */
.medal__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(var(--shine, -120%));
  transition: transform .8s var(--ease);
  mix-blend-mode: screen;
}
/* Ruban qui plonge dans la fente */
.medal__ribbon {
  position: absolute; left: 50%; top: -26%;
  width: 16%; height: 34%;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  background: linear-gradient(var(--rib, #2f7fd0), color-mix(in srgb, var(--rib, #2f7fd0) 70%, #000));
  border-radius: 3px 3px 0 0;
  will-change: transform;
}

/* Hover médaille : avance de ~5px, ombre, reflet, ruban oscille */
.module:hover { z-index: 5; }
.module:hover .medal { transform: translate(-50%, -50%) translateZ(26px) translateY(-5px); }
.module:hover .medal__disc { box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.25),
    inset 0 -6px 14px rgba(0,0,0,.35),
    0 22px 34px -14px rgba(0,0,0,.6); }
.module:hover .medal__disc::after { --shine: 120%; }

/* Variantes de taille */
.module--mini { --mod: clamp(70px, 9vw, 104px); position: relative; left: auto; top: auto; transform: none; }
.module--mini .module__plate::after { content: ""; }
.module--hero { --mod: clamp(180px, 24vw, 280px); position: relative; left: auto; top: auto; transform: none; }

/* ------------------------------------------------------------
   7. SECTIONS
------------------------------------------------------------ */

/* =============== SECTION 1 — HERO =============== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 0 var(--gut);
  overflow: hidden;
}
/* Espace demandé : 2 cm entre l'entête et le titre. */
.hero { padding-top: 2cm; }

/* halo lumineux discret sur le mur clair */
.hero__ambient {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 72% 30%, rgba(200,154,75,.10), transparent 70%),
    radial-gradient(70% 60% at 50% 120%, rgba(17,17,17,.05), transparent 60%);
  pointer-events: none;
}

/* Scène produit : la photo à droite (zone du visuel), en absolu →
   n'ampute pas la largeur du grand titre, qui reste à gauche.
   Centrée verticalement, taille généreuse. */
.hero__stage {
  position: absolute; top: 0; right: var(--gut);
  width: min(48vw, 660px); height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  perspective: 1400px;
  pointer-events: none;
  transform: translateY(-26px); /* remonte l'image d'un cran */
}
.hero__frame {
  position: relative;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  will-change: transform, clip-path;
}
/* voile lumineux très léger qui glisse à la révélation */
.hero__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-140%);
  mix-blend-mode: soft-light;
}
.hero__frame.is-revealed::after { transition: transform 1.6s var(--ease) .2s; transform: translateX(140%); }
.hero__photo { width: 100%; height: auto; display: block; }

/* Texte hero : grand, à gauche, au-dessus du visuel */
.hero__copy { position: relative; z-index: 2; max-width: min(58vw, 820px); }
.hero .eyebrow { margin-bottom: 26px; }
.hero__sub {
  margin-top: 30px;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--ink-60);
  max-width: 30ch;
}
.hero__actions { margin-top: 28px; } /* bouton « Découvrir SUMO » remonté légèrement */

.hero__scroll {
  position: absolute; left: var(--gut); bottom: 34px;
  display: flex; align-items: center; gap: 14px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40);
}
.hero__scroll-line { position: relative; width: 60px; height: 1px; background: var(--ink-14); overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%); animation: scrollLine 2.4s var(--ease-inout) infinite;
}
@keyframes scrollLine { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* =============== SECTION 1bis — LE CONSTAT ===============
   Repris de sumo-landing.html, adapté à la palette / typo du
   site. Les animations (trait sur « tiroir », tracé GPX) sont
   déclenchées par la classe .in ajoutée au wrap via
   ScrollTrigger, et ralenties (+2 s) pour plus de progressivité. */
.constat {
  /* fond : paysage volcanique de La Réunion, sous un voile clair
     pour garder le texte sombre parfaitement lisible */
  background:
    linear-gradient(rgba(248,247,245,.86), rgba(248,247,245,.88)),
    url("images/paysage-2.jpg") center / cover no-repeat;
  padding: var(--sp) var(--gut);
}
.constat__wrap { max-width: 880px; margin: 0 auto; text-align: center; }
.constat__wrap .eyebrow { margin-bottom: 26px; }
.constat__title {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin-bottom: .6em;
}
/* le titre apparaît par masque (comme les autres titres) : marge haute
   pour ne pas rogner les accents lors de la révélation */
.constat__title .line { padding-top: 0.08em; }
/* le mot « tiroir » : rayé lentement, puis grisé */
.constat__title em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  color: var(--ink);
  transition: color 2.45s var(--ease) 1.4s;   /* ralenti : +2 s */
}
.constat__wrap.in .constat__title em { color: var(--ink-40); }
.constat__title em::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 52%;
  height: .12em; border-radius: 2px;
  background: #D8443A; /* trait rouge (rouge lave) */
  transform: scaleX(0); transform-origin: left center;
  transition: transform 2.5s var(--ease) 1.4s; /* ralenti : +2 s (0.48 s → 2.5 s) */
}
.constat__wrap.in .constat__title em::after { transform: scaleX(1); }
.constat__text {
  color: var(--ink-60);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 60ch; margin-inline: auto;
}

/* --- Tracé GPX : Diagonale des Fous --- */
.gpx { margin: clamp(36px, 5vw, 56px) auto 0; width: min(300px, 64vw); }
.gpx svg { width: 100%; height: auto; display: block; overflow: visible; }
.gpx-isle { fill: none; stroke: var(--ink); stroke-width: .5; opacity: .22; }
.gpx-trace {
  fill: none; stroke: var(--accent); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
/* vitesse LINÉAIRE, accéléré de 2 s : 19 s → 17 s */
.constat__wrap.in .gpx-trace { animation: gpxDraw 17s linear .75s forwards; }
@keyframes gpxDraw { to { stroke-dashoffset: 0; } }
.gpx-dot { fill: var(--bois); }
.gpx-end { fill: var(--accent); opacity: 0; }
.constat__wrap.in .gpx-end { animation: gpxEnd .5s ease 17.75s forwards; }        /* décalé après le tracé */
@keyframes gpxEnd { to { opacity: 1; } }
.gpx text {
  font-family: var(--font);
  font-size: 3.4px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  fill: var(--ink-40);
}

/* =============== SECTION 2 — LE PRODUIT (schéma annoté) =============== */
/* padding bas garanti : la mention matière (hors flux) tient sous l'image */
.product { padding: var(--sp) 0 max(var(--sp), 170px); }
.product__annotated {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.6vw, 44px);
  max-width: 1220px; margin: 0 auto; padding: 0 var(--gut);
}
/* colonnes de caractéristiques */
.annot { display: flex; flex-direction: column; gap: clamp(30px, 6vh, 66px); }
.annot-item { display: flex; align-items: center; gap: 14px; }
.annot--left .annot-item  { justify-content: flex-end;   text-align: right; }
.annot--right .annot-item { justify-content: flex-start; text-align: left; }
.annot-text {
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); max-width: 16ch;
}
.annot-arrow { flex: none; width: clamp(46px, 4vw, 66px); height: auto; color: var(--accent); }
.annot-arrow--flip { transform: scaleX(-1); }

/* centre : l'octogone SUMO (flotte via JS) */
.product__float {
  position: relative; display: flex; justify-content: center;
  will-change: transform; transform-style: preserve-3d;
}
.annot-octa { --mod: clamp(190px, 24vw, 300px); }
/* Carrousel des 3 modules détourés (fondu auto toutes les 3 s) */
.product__carousel {
  position: relative; width: clamp(320px, 42vw, 520px);
  aspect-ratio: 1 / 1; margin: 0 auto;
}
.product__octa-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; /* détourées de ratios différents → uniformisées */
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.28));
  opacity: 0; transition: opacity .4s var(--ease); /* fondu rapide entre les images */
}
.product__octa-img.is-active { opacity: 1; }
/* colonne centrale : image (carrousel) — la mention matière est sortie du
   flux pour que le carrousel s'aligne verticalement avec le texte gauche/droite */
.product__center { position: relative; display: flex; flex-direction: column; align-items: center; }
/* annotation du bas : sous l'image, hors flux → n'influe pas sur le centrage */
.annot-bottom {
  position: absolute; top: 100%; left: 0; right: 0;
  max-width: 440px; margin: 6px auto 0; /* juste sous l'image */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.annot-arrow-v { width: 40px; height: auto; color: var(--accent); }
.annot-bottom__text {
  font-size: clamp(.95rem, 1.15vw, 1.12rem); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); max-width: 42ch;
}

/* =============== SECTION 2bis — CONFIGURATEUR CERCLAGE ===============
   Repris de sumo-landing.html, adapté à la palette premium :
   teinte dorée alignée sur --accent (#C89A4B). Section sombre. */
.configurator { position: relative; overflow: hidden; background: var(--noir); color: var(--bg); }
.configurator__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("images/paysage-3.jpg") center / cover no-repeat;
  opacity: .72;
}
.configurator::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,13,.6) 0%, rgba(13,13,13,.44) 45%, rgba(13,13,13,.72) 100%);
}
.configurator__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--sp) var(--gut);
}
.configurator__grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.config-stage { display: flex; justify-content: center; position: relative; }
.config-stage svg { width: min(76vw, 380px); filter: drop-shadow(0 34px 70px rgba(0,0,0,.55)); }
#cfgRing { transition: stroke .28s ease; }
#cfgLogo { font-family: var(--font); font-weight: 700; letter-spacing: 3px; fill: #F0E9DB; }

.configurator__copy { max-width: 560px; }
.configurator .display--light em { font-style: normal; }
#cfgWord { color: var(--accent); transition: color .28s ease; }
.config-lead {
  color: rgba(255,255,255,.6); max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem); margin-top: 22px;
}

/* nuanciers octogonaux */
.sw-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 16px; }
.sw {
  width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer;
  position: relative; background: transparent; transition: transform .18s var(--ease);
}
.sw .swc {
  position: absolute; inset: 4px; clip-path: var(--oct); background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); /* définit les teintes sombres/claires (noir, blanc cassé) */
  transition: inset .2s var(--ease);
}
/* nuancier sélectionné : pas de contour doré — la pastille s'agrandit légèrement */
.sw[aria-pressed="true"] .swc { inset: 1px; }
@media (hover: hover) and (pointer: fine) { .sw:not(:disabled):hover { transform: translateY(-3px); } }
.sw:not(:disabled):active { transform: scale(.92); transition-duration: .1s; }
/* teinte indisponible : grisée + barre diagonale (esthétique, non cliquable) */
.sw--off { cursor: not-allowed; opacity: .4; }
.sw--off .swc { filter: grayscale(.5); }
.sw--off::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 122%; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.8);
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 0 2px rgba(0,0,0,.6);
}
/* apparition en cascade des nuanciers à la révélation */
.sw-row[data-reveal] .sw { --swd: calc(var(--i) * 55ms); }

.readout { font-size: .9rem; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.readout b { color: var(--accent); font-weight: 600; }
.config-actions { margin-top: 30px; }
.config-spec { margin-top: 26px; font-size: .74rem; letter-spacing: .14em; color: rgba(255,255,255,.45); text-transform: uppercase; }

/* Bouton « Commander ce cerclage » — version claire / verre (esprit Apple) :
   fond translucide + flou, filet fin, texte clair, flèche dorée. */
.btn--order {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 15px 26px;
  font-size: .95rem; font-weight: 500; letter-spacing: -0.01em;
  border-radius: 100px; gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .5s var(--ease), box-shadow .4s var(--ease);
}
.btn--order:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 34px -18px rgba(0,0,0,.55);
}
.btn--order .btn__arrow { flex: none; color: var(--accent); transition: transform .4s var(--ease); }
.btn--order:hover .btn__arrow { transform: translateX(4px); }

/* =============== SECTION 2ter — À TON IMAGE (variantes / tarifs) ===============
   Repris de sumo-landing.html, adapté à la palette premium claire. */
.variants { padding: var(--sp) 0; }
.variants__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px);
}
.vcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 28px 30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(200,154,75,.5); }
.vcard--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* Halo doré « Le 5ᵉ est offert » — additif et isolé : pour revenir en arrière,
   il suffit de retirer la classe vcard--gold-shine dans le HTML (rien d'autre
   à toucher, .vcard--featured reste inchangé). */
.vcard--gold-shine {
  border-color: #DDB56A;
  animation: gold-breathe 3.6s ease-in-out infinite;
}
@keyframes gold-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px #C89A4B inset,
      0 0 0 1px rgba(221,181,106,.45),
      0 14px 40px -18px rgba(200,154,75,.6),
      0 0 16px rgba(200,154,75,.10);
  }
  50% {
    box-shadow:
      0 0 0 1.5px #C89A4B inset,
      0 0 0 1.5px rgba(221,181,106,.8),
      0 22px 50px -16px rgba(200,154,75,.75),
      0 0 34px rgba(200,154,75,.35);
  }
}
/* la pastille « Le 5ᵉ est offert » scintille doucement en rythme avec le halo */
.vcard--gold-shine .vcard__tag {
  animation: gold-tag-twinkle 3.6s ease-in-out infinite;
}
@keyframes gold-tag-twinkle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,154,75,0); filter: brightness(1); }
  50% { box-shadow: 0 0 14px 2px rgba(200,154,75,.5); filter: brightness(1.1); }
}
.vcard__tag {
  position: absolute; top: -12px; left: 26px;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: #1a1305; padding: 5px 12px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px;
}
.vcard__tag-spark { width: 11px; height: 11px; flex: none; }
.vcard--gold-shine .vcard__tag-spark {
  animation: gold-spark-twinkle 3.6s ease-in-out infinite;
}
@keyframes gold-spark-twinkle {
  0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(14deg); }
}
.vcard__oc {
  width: 46px; height: 46px; margin-bottom: 22px; color: var(--accent);
  display: grid; place-items: center; background: transparent;
}
.vcard__oc svg { width: 46px; height: 46px; }
.vcard h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.vcard__incl { display: inline; font-style: italic; font-weight: 400; font-size: .82rem; letter-spacing: 0; color: var(--ink-60); }
.vcard__price { font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--accent); margin: .3em 0 .12em; }
.vcard__price small { font-size: .5em; color: var(--ink-40); font-weight: 500; letter-spacing: 0; }
.vcard__price-was {
  display: block; font-size: .95rem; font-weight: 500; letter-spacing: 0;
  color: var(--ink-40); text-decoration: line-through; margin-bottom: 2px;
}
.vcard__desc { font-size: .95rem; color: var(--ink-60); margin-bottom: 20px; }
.vcard__list { list-style: none; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.vcard__list--tight { margin-top: 14px; }
.vcard__list li { font-size: .92rem; color: var(--ink); display: flex; gap: .6em; align-items: flex-start; }
.vcard__list li::before { content: "✦"; color: var(--accent); font-size: .78em; margin-top: .25em; }
.vcard__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-size: .92rem; font-weight: 600; color: var(--ink);
  transition: color .3s var(--ease);
}
.vcard__cta svg { color: var(--accent); transition: transform .35s var(--ease); }
.vcard__cta:hover { color: var(--accent); }
.vcard__cta:hover svg { transform: translateX(4px); }

/* --- Lots (Standard uniquement) : mêmes cartes, grille resserrée à 2 colonnes --- */
.variants--bundles { padding-top: calc(var(--sp) * .4); }
.variants--bundles .section-head { margin-bottom: clamp(36px, 6vh, 80px); }
/* le masque est agrandi vers le bas pour ne plus rogner le « g » de « grandit » */
.variants--bundles .display .line { padding-bottom: 0.14em; }
.bundles__lead {
  max-width: 56ch; margin: 22px auto 0; text-align: center;
  color: var(--ink-60); font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6;
}
.variants__grid--bundles {
  max-width: 800px; grid-template-columns: repeat(2, 1fr);
}

/* --- Carrousel de rendus dans chaque carte (clic ‹ ›) --- */
.vcard__carousel {
  position: relative; margin-bottom: 22px;
  border-radius: 12px; overflow: hidden;
  background: var(--grey); aspect-ratio: 4 / 3;
}
.vcard__track { display: flex; height: 100%; will-change: transform; transition: transform .5s var(--ease); }
.vcard__slide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; }
.vcard__slide span { font-size: .82rem; font-style: italic; color: var(--ink-40); }
.vcard__slide img { width: 100%; height: 100%; object-fit: cover; } /* prêt pour les vraies photos */
.vcard__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.vcard__nav:hover { background: #fff; }
.vcard__nav--prev { left: 10px; }
.vcard__nav--next { right: 10px; }
.vcard__nav:active { transform: translateY(-50%) scale(.92); }
.vcard__dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.vcard__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(17,17,17,.25); transition: background .3s var(--ease); }
.vcard__dots span.is-active { background: var(--accent); }

/* --- Variante « Trois façons de l'exposer » : cartes titre + photo --- */
.variants--expose .vcard { align-items: stretch; }
.variants--expose .vcard h3 { text-align: center; margin-bottom: 6px; }
/* méthode de pose : petite légende italique entre le titre et la photo */
.vcard__method {
  text-align: center; font-style: italic; font-weight: 400;
  font-size: .82rem; line-height: 1.4; color: var(--ink-40);
  margin-bottom: 18px;
}
.vcard__photo {
  flex: 1; min-height: clamp(220px, 24vw, 300px);
  display: grid; place-items: center;
  border: 1px dashed rgba(17,17,17,.18);
  border-radius: 14px;
  background: var(--grey);
  overflow: hidden;
}
.vcard__photo span { font-size: .82rem; font-style: italic; color: var(--ink-40); }
.vcard__photo img { width: 100%; height: 100%; object-fit: cover; } /* prêt pour les photos */
/* récit sous la photo : ton éditorial, plus affirmé que la légende du haut */
.vcard__story {
  margin-top: 18px;
  font-size: .96rem; line-height: 1.55; letter-spacing: -0.005em;
  color: var(--ink-60); text-align: center;
}

/* --- Panneau vidéo de démonstration (montage des trois façons) --- */
.demo-video { max-width: var(--maxw); margin: clamp(16px, 1.8vw, 24px) auto 0; padding: 0 var(--gut); display: flex; justify-content: center; }
/* la vidéo (montage d'assemblage) est filmée en portrait : cadre au format
   réel plutôt qu'un 16/9 qui l'aurait recadrée en gros plan illisible */
.demo-video__frame {
  position: relative;
  width: min(84vw, 380px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  background:
    radial-gradient(60% 80% at 50% 30%, rgba(200,154,75,.08), transparent 70%),
    var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  overflow: hidden;
  cursor: pointer;
}
.demo-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-video__play {
  position: relative; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  box-shadow: 0 18px 44px -14px rgba(17,17,17,.35);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.demo-video__frame:hover .demo-video__play { transform: scale(1.06); }
/* une fois lancée : le bouton disparaît, les commandes natives prennent le relais */
.demo-video__frame.is-playing .demo-video__play { opacity: 0; pointer-events: none; }

/* =============== SECTION 3 — STORYTELLING =============== */
.story {
  position: relative;
  background: #fff;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(30px, 6vw, 90px);
  padding: var(--sp) var(--gut);
}
.story__media {
  position: relative; overflow: hidden; border-radius: 22px;
  aspect-ratio: 7 / 10;            /* cadre plus haut → on voit plus de l'image complète */
  box-shadow: var(--shadow-md);
}
.story__media img { width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.story__grain { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.12)); pointer-events: none; }
.story__copy { max-width: 560px; }
.story__text { margin-top: 34px; max-width: 48ch; } /* élargi pour le récit plus long */
.story__text p { color: var(--ink-60); font-size: clamp(1rem, 1.3vw, 1.15rem); margin-bottom: 16px; }

/* Jauge de collection */
.story__gauge { margin-top: 52px; }
.story__gauge-track { display: flex; gap: 10px; }
.story__pip {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--grey);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.story__pip.is-filled {
  background: linear-gradient(150deg, var(--accent), var(--bois));
  box-shadow: 0 6px 14px -6px rgba(200,154,75,.7);
  transform: translateY(-2px);
}
.story__gauge-label { display: inline-block; margin-top: 16px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }

/* =============== SECTION 4 — TIMELINE =============== */
.timeline { padding: var(--sp) 0; overflow: hidden; }
.timeline__stage { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gut) 0; }
.timeline__track {
  position: relative;
  height: 300px;
  margin-top: 60px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
/* la ligne */
.timeline__track::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 46px; height: 2px;
  background: var(--ink-14);
}
.timeline__progress {
  position: absolute; left: 0; bottom: 46px; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--bois));
}
.runner {
  position: absolute; bottom: 46px; left: 0;
  transform: translate(-50%, 12px);
  color: var(--ink);
  will-change: left;
}
.milestone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  flex: 1;
}
.milestone__dot {
  order: 3;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink-14);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.milestone__label {
  order: 4;
  margin-top: 12px;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-40);
  transition: color .4s var(--ease);
}
.milestone .module--mini {
  order: 1;
  opacity: 0; transform: translateY(-24px) scale(.8);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.milestone.is-reached .module--mini { opacity: 1; transform: translateY(0) scale(1); }
.milestone.is-reached .milestone__dot { border-color: var(--accent); background: var(--accent); transform: scale(1.15); }
.milestone.is-reached .milestone__label { color: var(--ink); }
.timeline__caption { text-align: center; margin-top: 56px; font-size: .9rem; color: var(--ink-40); transition: color .4s; }

/* =============== SECTION 5 — COMPARAISON =============== */
.compare { padding: var(--sp) 0; }
.compare__frame {
  position: relative;
  max-width: 640px; margin: 0 auto;
  width: calc(100% - 2 * var(--gut));
  aspect-ratio: 4 / 5;             /* format portrait, assorti aux photos */
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  cursor: ns-resize; user-select: none;
  touch-action: pan-x;
}
.compare__after, .compare__before { position: absolute; inset: 0; overflow: hidden; }
/* fond flou dérivé de la photo : remplit le cadre portrait sans bandes vides */
.compare__after::before, .compare__before::before {
  content: ""; position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  filter: blur(30px) brightness(.82); transform: scale(1.06);
}
.compare__after::before  { background-image: url("images/tiroir.PNG"); }
.compare__before::before { background-image: url("images/triangle.PNG"); }
/* image NETTE et ENTIÈRE (pas de plan grossi), centrée sur le fond flou */
.compare__after img, .compare__before img {
  position: relative; width: 100%; height: 100%; object-fit: contain; display: block;
}
/* AVANT : plein cadre, révélé par clip-path piloté en JS (balayage haut/bas) */
.compare__before { clip-path: inset(0 0 50% 0); will-change: clip-path; }
.compare__tag {
  position: absolute; z-index: 3;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(8px);
}
.compare__tag--before { top: 20px; left: 20px; background: rgba(17,17,17,.06); color: var(--ink-60); }
.compare__tag--after  { bottom: 20px; right: 20px; background: rgba(255,255,255,.75); color: var(--ink); }
.compare__handle {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 4;
  height: 44px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
}
.compare__handle-line { position: absolute; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 12px rgba(0,0,0,.25); }
.compare__handle-grip {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.compare__handle-grip i { width: 14px; height: 2px; background: var(--ink-40); border-radius: 2px; }
.compare__handle:focus-visible { outline: none; }
.compare__handle:focus-visible .compare__handle-grip { box-shadow: 0 0 0 3px var(--accent); }

/* =============== SECTION 6 — LES DÉTAILS =============== */
.details { padding: var(--sp) 0; }
.details__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
}
.detail-card {
  position: relative; overflow: hidden; border-radius: 20px;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-md);
}
.detail-card--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.detail-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.detail-card:hover img { transform: scale(1.05); }
/* reflet lumineux qui suit le curseur */
.detail-card__gloss {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.32), transparent 60%);
  transition: opacity .4s var(--ease);
  mix-blend-mode: soft-light;
}
.detail-card:hover .detail-card__gloss { opacity: 1; }
.detail-card figcaption {
  position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 2;
  color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5);
  font-size: .95rem; line-height: 1.4;
}
.detail-card figcaption b { display: block; font-size: 1.05rem; margin-bottom: 3px; letter-spacing: -0.01em; }

/* =============== SECTION 7 — FABRICATION (cinématique horizontale) ===============
   Bloc repris de site-premium-v4 : défilement horizontal épinglé,
   panneaux resserrés (gap 0, largeur 400). */
.factory { background: var(--noir); color: var(--bg); }
.factory__pin { height: 100vh; overflow: hidden; display: flex; align-items: center; }
.factory__track {
  display: flex; align-items: center; gap: 0; /* panneaux collés */
  padding: 0 max(var(--gut), 8vw); will-change: transform;
}
.factory__panel { flex: 0 0 auto; width: min(400px, 74vw); } /* un peu plus étroits → textes plus proches */
.factory__intro .factory__lead { margin-top: 26px; color: rgba(255,255,255,.55); max-width: 30ch; }
.factory__step { position: relative; padding-left: 4px; }
.factory__num {
  display: block; font-size: clamp(3rem, 7vw, 6rem); font-weight: 800;
  letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  margin-bottom: 18px;
}
.factory__step h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.factory__step p { color: rgba(255,255,255,.55); max-width: 34ch; }
.factory__outro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.factory__signature { color: var(--accent); font-size: 1.05rem; letter-spacing: .02em; }
/* photo de fin de ligne (dans son module) */
.factory__outro-img {
  width: min(82vw, 350px); height: auto; /* agrandie un peu */
  border-radius: 18px;
  box-shadow: 0 34px 70px -20px rgba(0,0,0,.8);
}

/* =============== SECTION 8 — GALERIE (grille asymétrique) =============== */
.gallery { padding: var(--sp) 0; }
.gallery__grid {
  max-width: 1500px; margin: 0 auto; padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 230px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 22px);
}
.gallery__item {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--grey);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--square { grid-row: span 2; aspect-ratio: 1 / 1; align-self: center; }
.gallery__item--crop-low img { object-position: center 15%; }
/* hover : léger zoom + rotation 2° + ombre douce */
.gallery__item:hover { transform: rotate(2deg) translateY(-4px); box-shadow: var(--shadow-md); z-index: 2; }
.gallery__item:hover img { transform: scale(1.08) rotate(-2deg); }

/* =============== SECTION 9 — AVIS (cartes flottantes) =============== */
.reviews { padding: var(--sp) 0; background: linear-gradient(180deg, var(--bg), #f2f0ec); }
.reviews__row {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px);
}
.review {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 30px 34px;
  box-shadow: var(--shadow-sm);
  will-change: transform;
}
.review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.review__avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(150deg, var(--a1), var(--a2));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
}
.review__head b { display: block; font-size: .98rem; }
.review__head span { font-size: .8rem; color: var(--ink-40); }
.review blockquote { font-size: 1.08rem; line-height: 1.5; letter-spacing: -0.015em; }
.review__medal {
  position: absolute; right: 26px; bottom: 26px;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(60% 60% at 38% 30%, rgba(255,255,255,.5), transparent 55%),
              radial-gradient(120% 120% at 50% 40%, var(--m1), var(--m2) 78%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 6px 14px -6px rgba(0,0,0,.5);
}

/* =============== SECTION 10 — FAQ =============== */
.faq { padding: var(--sp) 0; }
.faq__inner {
  max-width: 980px; margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.faq__list { margin-top: 10px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 4px; text-align: left;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: var(--ink); transform: translateY(-50%); transition: transform .4s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: translateY(-50%) rotate(0deg); }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { padding: 0 4px 30px; max-width: 60ch; color: var(--ink-60); font-size: 1.02rem; }

/* =============== SECTION 11 — COMMANDE (formulaire) ===============
   Fond noir, inputs « verre » (translucides + filet fin), accents
   dorés — sobre et premium, dans la continuité du site. */
.order {
  position: relative;
  background: var(--noir); color: var(--bg);
  padding: var(--sp) var(--gut);
  overflow: hidden;
}
.order::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 45% at 50% 0%, rgba(200,154,75,.10), transparent 70%);
  pointer-events: none;
}
.order__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.order__head { text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
.order__head .eyebrow { margin-bottom: 22px; }
.order__lead {
  margin-top: 26px; color: rgba(255,255,255,.55);
  font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 46ch; margin-inline: auto;
}
.order__lead--small { font-size: clamp(.82rem, 1vw, .92rem); max-width: 42ch; }

.order__form { display: flex; flex-direction: column; gap: 22px; }
.order__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 9px; }
.field__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.field__label em { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.35); }
.field input, .field select, .field textarea {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 15px 18px;
  font-family: var(--font); font-size: 1rem; color: #fff;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.28); }
.field select { cursor: pointer; }
.field select:invalid { color: rgba(255,255,255,.28); }
.field select option { color: var(--ink); background: #fff; }
/* chevron du select */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%23C89A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
  padding-right: 44px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.30); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(200,154,75,.18);
}
.field--promo { max-width: 300px; }

/* Bouton bascule « Ajouter mon chrono » — même vocabulaire visuel que la
   case à cocher CGV (pastille qui se remplit), plutôt qu'un champ imposé. */
.field__toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 15px 18px; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: .95rem; color: rgba(255,255,255,.55);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.field__toggle:hover { border-color: rgba(255,255,255,.30); color: rgba(255,255,255,.8); }
.field__toggle-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  transition: border-color .25s var(--ease);
}
.field__toggle-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: scale(0); transition: transform .2s var(--ease);
}
.field__toggle[aria-pressed="true"] .field__toggle-dot { border-color: var(--accent); }
.field__toggle[aria-pressed="true"] .field__toggle-dot::after { transform: scale(1); }

.field__toggle-value { display: flex; align-items: center; gap: 10px; }
.field__toggle-value input { flex: 1; min-width: 0; }
.field__toggle-clear {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.55); font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.field__toggle-clear:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* Groupe « Personnalisation » : sous-bloc verre regroupant les items de gravure */
.field-group {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.field-group__title {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.field-group__title em { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.35); }
.field-group--disabled { opacity: .4; pointer-events: none; transition: opacity .3s var(--ease); }
.field input:disabled, .field select:disabled, .field textarea:disabled { cursor: not-allowed; }
.field__hint { font-size: .72rem; font-style: italic; color: rgba(255,255,255,.4); }
.order__row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Consentement RGPD */
.order__consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 6px;
  font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.6);
  cursor: pointer;
}
.order__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
  background: rgba(255,255,255,.06); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.order__consent input[type="checkbox"]::after {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--accent); transform: scale(0); transition: transform .2s var(--ease);
}
.order__consent input[type="checkbox"]:checked { border-color: var(--accent); }
.order__consent input[type="checkbox"]:checked::after { transform: scale(1); }
.order__consent input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200,154,75,.25); }
.order__consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.order__submit { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.order__submit .btn--gold { padding: 17px 40px; font-size: 1rem; }
.order__note { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* =============== SECTION 12 — CONTACT (formulaire) ===============
   Même traitement visuel que .order (fond noir, inputs verre). */
.contact {
  position: relative;
  background: var(--noir); color: var(--bg);
  padding: var(--sp) var(--gut);
  overflow: hidden;
}
.contact::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 45% at 50% 0%, rgba(200,154,75,.10), transparent 70%);
  pointer-events: none;
}
.contact .order__inner { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   8. FOOTER
------------------------------------------------------------ */
.footer { background: var(--noir); color: rgba(255,255,255,.7); padding: clamp(60px, 9vh, 110px) var(--gut) 40px; }
.footer__top {
  max-width: var(--maxw); margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: .18em; }
.footer__tag { color: rgba(255,255,255,.5); font-size: 1.05rem; letter-spacing: -0.01em; }
.footer__cols {
  max-width: var(--maxw); margin: 50px auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 40px; justify-content: end;
}
.footer__cols h4 { color: #fff; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.footer__cols a { display: block; padding: 6px 0; font-size: .92rem; color: rgba(255,255,255,.55); transition: color .3s; }
.footer__cols a:hover { color: #fff; }
.footer__bottom {
  max-width: var(--maxw); margin: 60px auto 0;
  display: flex; justify-content: space-between; gap: 20px;
  font-size: .78rem; color: rgba(255,255,255,.4); letter-spacing: .02em;
}
.footer__legal-group { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal { color: rgba(255,255,255,.4); text-decoration: underline; text-underline-offset: 2px; transition: color .25s var(--ease); }
.footer__legal:hover { color: rgba(255,255,255,.75); }

/* ------------------------------------------------------------
   9. RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .hero { justify-content: flex-end; padding-bottom: 14vh; padding-top: 0; } /* l'espace de 2 cm ne vaut que sur desktop */
  /* l'image repasse dans le flux, empilée au-dessus du texte */
  .hero__stage {
    position: static; width: 100%; max-width: none; height: 46vh;
    order: -1; margin: 12vh auto 0; right: auto;
    justify-content: center;
    transform: none; /* pas de décalage vertical sur mobile */
  }
  .hero__frame { width: min(84vw, 480px); margin: 0 auto; }
  .hero__copy { max-width: none; }
  .hero__sub { max-width: none; }
  .display--hero .line { padding-top: 0.08em; }

  /* Produit annoté : octogone au-dessus, caractéristiques empilées */
  .product__annotated { grid-template-columns: 1fr; justify-items: center; gap: 36px; }
  .product__center { order: -1; } /* octogone + matière en haut sur mobile */
  .annot { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 26px; max-width: 520px; }
  .annot--left .annot-item, .annot--right .annot-item { justify-content: center; text-align: center; }
  .annot-text { max-width: none; }
  .annot-arrow { display: none; } /* flèches masquées en pile mobile */

  .configurator__grid { grid-template-columns: 1fr; gap: 34px; }
  .config-stage { order: -1; }

  .variants__grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .vcard--featured { order: -1; }
  #tarifs .vcard--featured { order: 0; } /* Standard > Exploit > Édition limitée sur mobile */

  .story { grid-template-columns: 1fr; }
  .story__media { order: -1; }

  .details__grid { grid-template-columns: 1fr; }
  .detail-card, .detail-card--wide { aspect-ratio: 4 / 3; }

  .reviews__row { grid-template-columns: 1fr; max-width: 560px; }

  .footer__top { flex-direction: column; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
}

@media (max-width: 640px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }

  /* formulaire : une colonne */
  .order__row { grid-template-columns: 1fr; }
  .field--promo { max-width: none; }

  .timeline__track { height: 220px; }
  .milestone__label { font-size: .68rem; }
  .module--mini { --mod: 60px; }

  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------
   10. ACCESSIBILITÉ — respect de prefers-reduced-motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero__scroll-line::after, .arrow--left, .arrow--right { animation: none; }
  /* constat : états finaux immédiats */
  .constat__title em { color: var(--ink-40); }
  .constat__title em::after { transform: scaleX(1); }
  .gpx-trace { stroke-dashoffset: 0; }
  .gpx-end { opacity: 1; }
}