/* ============================================================
   UPGRADE™ · Landing marketing
   Vanilla CSS · tokens de marque · base typographique.
   Le DESIGN des sections viendra ensuite (charte fournie par Eric).
   ============================================================ */

/* ----- Police de marque (titres ET corps) -----
   Hiragino Kaku Gothic Pro W3 · sous-ensemble latin/français (15 Ko).
   Le site actuel (upgradesystem.com) utilise déjà Hiragino W3 partout → on suit.
   ⚠️ GRAISSE UNIQUE (W3 = Light 300) : pas de gras réel. Emphase par
   TAILLE / interlettrage / couleur accent (or), JAMAIS par faux-gras synthétique.
   LICENCE : police commerciale · licence webfont acquise par Upgrade (OK). */
@font-face {
  font-family: 'Hiragino Kaku';
  src: url('./assets/fonts/hiragino-latin.woff2') format('woff2'),
       url('./assets/fonts/hiragino-latin.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS DE MARQUE · charte UPGRADE terreuse (confirmée)
   ⚠️ OR à verrouiller : #C6921E (mockup) vs #b38118 (widget chat prod).
   ============================================================ */
:root {
  /* Couleurs de marque */
  --paper:   #b8ad98;      /* fond clair · sable greige */
  --paper-2: #c8bfad;      /* fond alterné · sable clair */
  --surface: #5c534c;      /* surfaces / cartes foncées · brun taupe */
  --ink:     #37302b;      /* texte / encre · anthracite chaud */
  --on-dark: #f4f1ec;      /* texte sur fonds foncés · crème */
  --muted:   #6e655b;      /* texte secondaire */
  --line: rgba(55, 48, 43, 0.14);
  --accent:  #C6921E;      /* or · À CONFIRMER (#C6921E vs #b38118) */

  /* Typographie */
  --font-brand: 'Hiragino Kaku', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Hiragino Kaku', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Échelle (playbook §7.4) */
  --h1: 3rem;     /* 48px */
  --h2: 2rem;     /* 32px */
  --h3: 1.5rem;   /* 24px */
  --body: 1rem;   /* 16px */
  --small: 0.875rem;

  /* Layout */
  --maxw: 1140px;
  --radius: 1rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ----- Reset léger ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;            /* lisibilité WCAG 1.4.12 */
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: 300;          /* W3 = graisse unique ; hiérarchie par TAILLE */
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }

/* ----- Conteneur ----- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ----- Accessibilité : skip link + sr-only (playbook §5.3) ----- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----- En-tête provisoire (scaffold) ----- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
}

/* ============================================================
   prefers-reduced-motion (playbook §8.3) · neutralise les anims
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   VARIABLES COMPLÉMENTAIRES (motion / accents)
   ============================================================ */
:root {
  --gold-deep: #a87815;
  --band-h: 66px;             /* hauteur de la nav (topbar retirée) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   BANDEAU FIXE : topbar + navigation
   Transparent au-dessus du hero, anthracite plein au scroll.
   ============================================================ */
.siteband {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: transform .45s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.siteband.is-hidden { transform: translateY(-100%); }
.siteband.is-scrolled {
  background: var(--ink);
  border-bottom-color: rgba(244, 241, 236, 0.10);
}

/* Topbar */
.topbar { border-bottom: 1px solid rgba(244, 241, 236, 0.12); }
.topbar__in {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
  height: 38px; display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--on-dark);
}
.topbar a { color: var(--on-dark); opacity: .9; }
.topbar a:hover { opacity: 1; color: var(--accent); }
.topbar__tag { color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.7rem; }

/* Nav */
.nav__in {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav__brand img { height: 26px; width: auto; }
.nav__links { display: flex; gap: 1.6rem; align-items: center; }
.nav__links a {
  color: var(--on-dark); font-size: 0.92rem; letter-spacing: 0.02em;
  position: relative; padding: 4px 0; opacity: .92;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right .35s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { right: 0; }
.nav__burger {
  display: none; background: none; border: 0; cursor: pointer; color: var(--on-dark);
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav__burger svg { width: 26px; height: 26px; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.95rem 1.6rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn--gold { background: var(--accent); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(244,241,236,0.45); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn--block { width: 100%; justify-content: center; }
.btn .chev { transition: transform .25s var(--ease); }
.btn:hover .chev { transform: translateX(4px); }

/* ============================================================
   HERO · éditorial / golden hour
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--on-dark);
  padding: calc(var(--band-h) + 2rem) var(--gutter) clamp(2.5rem, 7vh, 5rem);
}
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
/* Scrim : sombre à gauche/bas pour la lisibilité, + protection du bandeau en haut */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(40,35,31,0.92) 0%, rgba(40,35,31,0.55) 38%, rgba(40,35,31,0.05) 68%, rgba(40,35,31,0) 100%),
    linear-gradient(to bottom, rgba(40,35,31,0.45) 0%, rgba(40,35,31,0) 22%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.hero__index {
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244,241,236,0.6); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .8rem;
}
.hero__index::before { content: ""; width: 38px; height: 1px; background: var(--accent); display: inline-block; }
.hero__eyebrow {
  font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.hero__title {
  font-family: var(--font-brand); font-weight: 300; color: var(--on-dark);
  font-size: clamp(2.8rem, 8.5vw, 6.6rem); line-height: 0.98; letter-spacing: -0.02em;
  margin: 0 0 1.5rem; max-width: 14ch;
}
.hero__title .soft { color: inherit; }

/* Décorations retirées : petites capitales sans lien avec la marque (feedback Eric) */
.kicker, .hero__eyebrow, .hero__index, .hero__verbs, .hero__scroll, .topbar__tag, .chev { display: none !important; }

/* Masque de révélation de titre (lignes SplitText) */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }

/* Placeholder type wireframe (image à fournir) */
.ph {
  position: relative; min-height: 320px; padding: 1rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, rgba(92,83,76,.10) 0 14px, rgba(92,83,76,.03) 14px 28px);
  border: 1px dashed rgba(55,48,43,.32); color: var(--muted); font-size: .9rem; letter-spacing: .03em;
}
.section--dark .ph {
  background: repeating-linear-gradient(45deg, rgba(244,241,236,.07) 0 14px, rgba(244,241,236,.02) 14px 28px);
  border-color: rgba(244,241,236,.25); color: rgba(244,241,236,.6);
}
[data-speed], [data-parallax] { will-change: transform; }
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 46ch;
  color: rgba(244,241,236,0.92); margin: 0 0 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Verbes verticaux (bord droit) · touche éditoriale */
.hero__verbs {
  position: absolute; right: max(1.2rem, 2vw); bottom: clamp(2.5rem, 8vh, 6rem); z-index: 2;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(244,241,236,0.7); display: flex; gap: 1.6rem; align-items: center;
}
.hero__verbs span { position: relative; }
.hero__verbs span::after {
  content: "·"; position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%);
  color: var(--accent);
}
.hero__verbs span:last-child::after { content: none; }

/* Indice de scroll */
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 2;
  font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(244,241,236,0.55); display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent);
  animation: scrollcue 1.8s var(--ease) infinite;
}
@keyframes scrollcue { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 50.1%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ============================================================
   MENU MOBILE (overlay) + CTA collant
   ============================================================ */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; padding: var(--gutter);
  transform: translateY(-100%); transition: transform .5s var(--ease); visibility: hidden;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu a { font-family: var(--font-brand); font-weight: 300; font-size: 2rem; color: var(--on-dark); }
.menu a:hover { color: var(--accent); }
.menu__close { position: absolute; top: 1rem; right: var(--gutter); background: none; border: 0; color: var(--on-dark); width: 44px; height: 44px; cursor: pointer; }
.menu__meta { margin-top: 2rem; font-size: 0.85rem; color: rgba(244,241,236,0.6); letter-spacing: 0.04em; }

.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  background: var(--ink); border-top: 1px solid rgba(244,241,236,0.12);
  padding: 0.7rem; gap: 0.6rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
}
.mcta .btn { flex: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  :root { --band-h: 56px; }
  .topbar { display: none; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .siteband { background: var(--ink); border-bottom-color: rgba(244,241,236,0.10); }
  .hero { align-items: center; }
  .hero__verbs { display: none; }
  .hero__media img { object-position: 64% 30%; }
  .mcta { display: flex; }
  .hero__scroll { display: none; }
  .hero__eyebrow { letter-spacing: 0.2em; font-size: 0.72rem; }
  .hero__index { letter-spacing: 0.2em; }
  main { padding-bottom: 72px; } /* espace pour le CTA collant */
}
@media (min-width: 861px) {
  .menu { display: none; }
}

/* ============================================================
   PRIMITIVES DE SECTION
   ============================================================ */
.section { padding: clamp(4rem, 10vh, 8rem) var(--gutter); }
.section[id] { scroll-margin-top: var(--band-h); }
.section--dark  { background: var(--ink);     color: var(--on-dark); }
.section--sable { background: var(--paper);    color: var(--ink); }
.section--band  { background: var(--paper-2);  color: var(--ink); }
.wrap { max-width: var(--maxw); margin-inline: auto; }

.kicker {
  display: flex; align-items: center; gap: .8rem;
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.2rem;
}
.kicker::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
.section__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.04; font-weight: 300;
  max-width: 18ch; margin: 0 0 1.1rem;
}
.section__lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; max-width: 52ch; color: inherit; opacity: .82; }
.section--dark .section__lead { opacity: .9; }
.micro-cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.8rem;
  font-size: 1rem; letter-spacing: .01em; color: var(--ink);
  border-bottom: 3px solid var(--accent); padding-bottom: 4px;
}
.micro-cta:hover { color: var(--gold-deep); }
.section--dark .micro-cta { color: var(--on-dark); }

/* ============================================================
   §2 RÉALISATIONS · galerie éditoriale
   ============================================================ */
.gallery {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px;
  gap: 14px; margin-top: 2.6rem;
}
.gallery figure { margin: 0; overflow: hidden; position: relative; background: var(--surface); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem;
  font-size: 0.82rem; letter-spacing: .04em; color: #fff;
  background: linear-gradient(to top, rgba(40,35,31,.8), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }
.g1 { grid-column: span 8; grid-row: span 2; }
.g2 { grid-column: span 4; }
.g3 { grid-column: span 4; }
.g4 { grid-column: span 12; }

/* ============================================================
   §3 LES 4 PILIERS — empilement épinglé (réf. Herzog)
   Technique : pin + translateY. Le conteneur .pin reste figé
   pendant que les cartes montent une à une pour se recouvrir,
   en commençant par recouvrir le titre de section. En-têtes
   qui s'empilent (la barre titre de chaque carte reste visible).
   Sans JS / motion réduit : cartes en flux normal, empilées.
   ============================================================ */
.pillars-sec { position: relative; }
/* JS bureau : la section devient haute et .pin colle (sticky) — pas de pin GSAP,
   donc aucun "handoff" fixed = plus de saccade à l'apparition du titre. */
.pillars-sec.sticky-on { height: 480svh; }
.pin { position: relative; min-height: 100svh; overflow: hidden; }
.sticky-on .pin { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* Titre de section : visible au départ, recouvert par la 1re carte */
.pin__intro {
  position: relative; z-index: 0;
  display: flex; align-items: center; min-height: 60svh;
  padding: calc(var(--band-h) + clamp(2rem, 6vh, 4rem)) var(--gutter) clamp(2rem, 6vh, 4rem);
}
.pin__intro .section__title { max-width: var(--maxw); width: 100%; margin-inline: auto; }
.pin__title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.04; }

/* Cartes : flux normal par défaut (fallback) ; absolues quand le JS prend la main */
.pcard { position: relative; border-radius: 22px; overflow: hidden; min-height: 44svh; }
/* Bureau : titre en HAUT du panneau (visible dès l'arrivée, pas d'écran de beige) */
.pin--js .pin__intro { position: absolute; inset: 0; min-height: 0; align-items: flex-start; }
.pin--js .pcard { min-height: 0; }
.pin--js .pcard { position: absolute; left: 0; right: 0; top: 0; bottom: 0; will-change: transform; }

.pcard__in {
  max-width: var(--maxw); margin-inline: auto; height: 100%;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; align-content: center;
  padding: calc(var(--band-h) + clamp(1rem, 3vh, 2rem)) var(--gutter) clamp(2rem, 5vw, 3rem);
}
.pcard__head { display: flex; align-items: center; gap: 1.1rem; }
.pile-num { font-family: var(--font-brand); font-weight: 300; font-size: 1.4rem; }
.pile-ico { width: clamp(42px, 4vw, 58px); height: auto; flex: none; display: block; }
.pcard h3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 300; line-height: 1.05; margin: 0; }
.pcard__desc { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; margin: 0; max-width: 44ch; }

/* Dégradé clair -> anthracite, cartes tardives au-dessus */
.pcard--1 { background: #c8bfad; color: var(--ink);     z-index: 1; }
.pcard--2 { background: #9d9279; color: var(--ink);     z-index: 2; }
.pcard--3 { background: #5c534c; color: var(--on-dark); z-index: 3; }
.pcard--4 { background: #37302b; color: var(--on-dark); z-index: 4; }
.pcard--1 .pile-num, .pcard--2 .pile-num { color: #6e4e0f; }
.pcard--3 .pile-num, .pcard--4 .pile-num { color: var(--accent); }

@media (max-width: 860px) {
  .pcard__in { grid-template-columns: 1fr; gap: .8rem; padding-top: clamp(1.3rem, 4vw, 1.8rem); }
  .pcard h3 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  /* Mobile : le titre ne flotte plus dans 52svh de vide, il s'affiche en haut de section */
  .pin__intro { min-height: auto; align-items: flex-start;
    padding: clamp(2.6rem, 8vh, 4rem) var(--gutter) clamp(1.4rem, 4vh, 2.4rem); }
  .pin__title { font-size: clamp(2rem, 8vw, 2.8rem); }
}

/* ============================================================
   §4 ÉCOSYSTÈME · 3 cartes produits
   ============================================================ */
.eco-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 2.8rem; }
.eco-card {
  background: var(--paper); border: 1px solid var(--line); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.eco-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(55,48,43,.16); }
.eco-card__media { overflow: hidden; aspect-ratio: 3/2; }
.eco-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.eco-card:hover .eco-card__media img { transform: scale(1.07); }
.eco-card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.eco-card__body img.eco-logo { height: 52px; width: auto; max-width: 85%; align-self: flex-start; object-fit: contain; }
.eco-card__body p { font-size: 1rem; line-height: 1.55; color: var(--muted); flex: 1; }
.eco-card__link { font-size: 0.98rem; letter-spacing: .01em; color: var(--ink); display: inline-flex; align-items: center; gap: .6rem; }
.eco-card__link::after { content: ""; width: 20px; height: 3px; background: var(--accent); transition: width .25s var(--ease); }
.eco-card:hover .eco-card__link::after { width: 34px; }

/* ============================================================
   §5 MÉTHODE · 2 colonnes (texte + preuve)
   ============================================================ */
.method { display: block; }
.method__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.method__intro .section__lead { margin-top: 1.2rem; }
.method__media--wide { margin: 0; position: relative; }
.method__media--wide .ph { aspect-ratio: 16/9; border-radius: 22px; min-height: 0; }
.method__media--wide img { width: 100%; height: auto; display: block; border-radius: 22px; }
/* voile sombre pour noircir un peu l'image */
.method__media--wide::after { content: ""; position: absolute; inset: 0; border-radius: 22px; background: rgba(24, 20, 17, .42); pointer-events: none; }
.steps { list-style: none; margin: 2.2rem 0 0; padding: 0; counter-reset: s; }
.method__top .steps { margin-top: 0; }
.steps li {
  counter-increment: s; position: relative; padding: 1.3rem 0 1.3rem 3.4rem;
  border-top: 1px solid rgba(244,241,236,.14);
}
.steps li:last-child { border-bottom: 1px solid rgba(244,241,236,.14); }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem;
  font-size: 0.8rem; letter-spacing: .1em; color: var(--accent);
}
.steps h4 { font-size: 1.15rem; font-weight: 300; margin: 0 0 .35rem; }
.steps p { font-size: 0.92rem; line-height: 1.5; opacity: .76; margin: 0; }
.method__media img { width: 100%; height: auto; }

/* ============================================================
   §6 RÉASSURANCE · bande de repères
   ============================================================ */
.assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.assure__item { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.assure__item strong { font-weight: 300; font-size: 1.2rem; }
.assure__item span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* ============================================================
   §7 SOUMISSION · pitch + formulaire
   ============================================================ */
.lead-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lead-form { background: var(--surface); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1rem; }
.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,241,236,.7); }
.field input, .field select {
  background: rgba(244,241,236,.06); border: 1px solid rgba(244,241,236,.18); color: var(--on-dark);
  padding: .8rem .9rem; font-family: var(--font-body); font-size: .95rem;
}
.field input::placeholder { color: rgba(244,241,236,.4); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field select option { color: #111; }
.field-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: rgba(244, 241, 236, .82); cursor: pointer; }
.field-consent input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin-top: .15rem; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .8rem; color: rgba(244,241,236,.6); }
.form-status { font-size: .9rem; color: var(--accent); min-height: 1.2em; }

/* ============================================================
   §8 FAQ · accordéon natif
   ============================================================ */
.faq { margin-top: 2.4rem; max-width: 64ch; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.3rem 2rem 1.3rem 0; position: relative;
  font-size: 1.1rem; font-weight: 300;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 1.1rem; color: var(--accent); font-size: 1.4rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 1.4rem; color: var(--muted); line-height: 1.6; max-width: 60ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { position: relative; z-index: 5; background: var(--ink); color: var(--on-dark); padding: clamp(3.5rem,7vh,5.5rem) var(--gutter) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer__brand img { height: 28px; margin-bottom: 1.2rem; }
.footer__brand p { font-size: .92rem; line-height: 1.6; opacity: .7; max-width: 30ch; }
.footer__col h4 { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; font-weight: 400; }
.footer__col a, .footer__col p { display: block; font-size: .92rem; color: var(--on-dark); opacity: .82; margin-bottom: .7rem; }
.footer__col a:hover { opacity: 1; color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(244,241,236,.12);
  font-size: .8rem; opacity: .62;
}
.footer__bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--accent); opacity: 1; }

/* ============================================================
   RESPONSIVE · sections
   ============================================================ */
@media (max-width: 860px) {
  .gallery { grid-auto-rows: 200px; }
  .g1 { grid-column: span 12; grid-row: span 1; }
  .g2, .g3 { grid-column: span 6; }
  .g4 { grid-column: span 12; }
  .pillars { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
  .pillar { padding: 0 1.4rem; }
  .pillar:nth-child(3) { border-left: 0; padding-left: 0; }
  .eco-grid { grid-template-columns: 1fr; }
  .method__top { grid-template-columns: 1fr; gap: 1.6rem; }
  .assure { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-form .row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
  .pillars, .assure, .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   DÉ-BOXING (feedback Eric) : coins adoucis, filets fins retirés,
   gros chiffres pleins plutôt que petites lignes.
   ============================================================ */
.btn, .field input, .field select { border-radius: 10px; }
.gallery figure, .ph, .lead-form { border-radius: 20px; }

.eco-card { border: none; border-radius: 20px; box-shadow: 0 14px 38px rgba(55,48,43,.12); }
.eco-card:hover { box-shadow: 0 28px 64px rgba(55,48,43,.20); }

/* Réassurance : barre or pleine (pas un filet fin) */
.assure__item { border-left: none; padding-left: 0; }
.assure__item strong { position: relative; padding-top: 1rem; display: block; }
.assure__item strong::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 5px; background: var(--accent); border-radius: 3px; }

/* Méthode : gros chiffres pleins, plus aucun filet fin */
.steps li { border-top: none; padding: 1.1rem 0 1.1rem 4.4rem; }
.steps li:last-child { border-bottom: none; }
.steps li::before {
  font-family: var(--font-brand); font-size: 2.4rem; line-height: 1;
  letter-spacing: 0; top: 0.9rem; color: var(--accent);
}
.steps h4 { font-size: 1.3rem; }

/* FAQ : trait d'accent plus présent que le hairline */
.faq summary { font-size: 1.2rem; }

/* ============================================================
   CONFIGURATEUR UFence : changement de couleur (sable -> anthracite)
   + image arrondie qui arrive en parallaxe (effet réf. Sóller)
   ============================================================ */
/* Bannière configurateur : texte à gauche, image preview à droite (arrivée latérale) */
/* §4b Cinématique : la vidéo s'agrandit en plein écran au scroll (réf. Osmo) */
.cine { position: relative; height: 100svh; background: var(--anthracite, #37302b); }
.cine--js { height: 220vh; }
.cine__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.cine__media { position: relative; width: 100vw; height: 100svh; overflow: hidden; will-change: transform; }
.cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine__scrim { position: absolute; inset: 0; background: rgba(35, 30, 27, 0); pointer-events: none; }
.cine__caption { position: absolute; z-index: 2; text-align: center; color: var(--on-dark); padding: 0 var(--gutter); opacity: 0; }
.cine__title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; line-height: 1.05; margin: 0 0 1rem; }
.cine__sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; opacity: .92; max-width: 46ch; margin: 0 auto; }

/* Bannière = FONCÉ (continuité avec la fin foncée des pieux) */
.config { position: relative; background: var(--anthracite, #37302b); color: var(--on-dark); overflow: hidden; }
.config-banner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(4rem, 9vh, 7rem) var(--gutter) clamp(5.5rem, 12vh, 9rem);
}
.config-banner__text .section__title { max-width: 16ch; margin-bottom: 1.2rem; }
.config-banner__text p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 50ch; margin: 0 0 1.8rem; }
/* Côté droit de la bannière = tuiles 3D (aperçus du configurateur) */
.config-banner__img { perspective: 1300px; display: flex; justify-content: center; }
@media (max-width: 860px) { .config-banner { grid-template-columns: 1fr; gap: 2.4rem; } }

/* Explication des 8 étapes = CLAIR (le moment fort après le foncé) */
.config-explain { background: var(--paper); color: var(--ink); padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) clamp(4rem, 8vh, 6rem); }
.config-explain .wrap { max-width: var(--maxw); margin-inline: auto; }
.config-explain .section__lead { color: rgba(55, 48, 43, .8); }
/* Tuiles « depth loop » 3D */
.depth-tiles { position: relative; width: 100%; max-width: 330px; aspect-ratio: 6 / 5; transform-style: preserve-3d; }
.dt-tile { position: absolute; inset: 0; margin: 0; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(35, 30, 27, .10);
  box-shadow: 0 2px 6px rgba(35, 30, 27, .12), 0 22px 50px rgba(35, 30, 27, .30);
  will-change: transform, opacity; transform-style: preserve-3d; }
.dt-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-tile .ph { width: 100%; height: 100%; min-height: 0; border-radius: 16px; }
@media (max-width: 860px) {
  .config-explain__head { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .depth-tiles { max-width: 270px; }
}

/* Section pieux vissés : change de couleur au scroll (sable -> anthracite) */
.pieux { position: relative; background: #b8ad98; color: var(--ink); overflow: hidden; padding: clamp(4.5rem, 11vh, 8rem) 0; }
/* Texte AU-DESSUS de la photo (empilé) + TOUT centré, image réduite de 25% */
.pieux__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 5vh, 3.5rem); justify-items: center; text-align: center; }
.pieux__text { max-width: 720px; margin-inline: auto; }
/* override du .section__title global (max-width:18ch + margin:0 le calait à gauche) */
.pieux__text .section__title { max-width: none; margin: 0 auto 1.3rem; }
.pieux__text .section__lead { color: inherit; max-width: none; margin: 0 auto; }
.pieux__img { margin: 0 auto; max-width: 660px; }
.pieux__img img { width: 100%; height: auto; display: block; }
.pieux__img figcaption { margin-top: .9rem; font-size: .9rem; opacity: .72; }
.config-h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; margin: 2.4rem 0 .8rem; }
.config-steps { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; }
.config-steps li { display: flex; gap: 1rem; align-items: flex-start; }
/* Chiffre dans un cercle foncé (l'or sur beige était illisible ; or sur anthracite = OK) */
.cs-num { font-family: var(--font-brand); font-weight: 300; color: var(--accent); font-size: 1.05rem; flex: none; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--anthracite, #37302b); }
.config-steps b { display: block; font-weight: 300; font-size: 1.1rem; margin-bottom: .25rem; color: var(--ink); }
.config-steps p { font-size: .92rem; line-height: 1.5; color: rgba(55, 48, 43, .72); margin: 0; }
.config-tip { margin: 2rem 0 0; font-size: .98rem; line-height: 1.5; color: rgba(55, 48, 43, .85); border-left: 3px solid var(--accent); padding-left: 1rem; max-width: 60ch; }
@media (max-width: 860px) { .config-steps { grid-template-columns: 1fr; gap: 1.3rem; } }
.config-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; padding: 0; margin: 2.4rem 0 2.6rem; }
.config-perks li { display: flex; align-items: center; gap: .55rem; font-size: .98rem; color: rgba(55, 48, 43, .9); }
.config-perks li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex: none; }
.btn--lg { padding: 1.15rem 2.2rem; font-size: 1.05rem; }

/* ============================================================
   PAGE UFENCE
   ============================================================ */
/* Hero « overlap » (réf. Osmo) : le hero reste fixe derrière, la suite du
   contenu monte au scroll et le recouvre. Le hero ne monte que de ~22% et
   s'assombrit = différentiel de parallaxe. Partagé par les pages produits. */
.hero--overlap { position: fixed; top: 0; left: 0; right: 0; height: 100svh; min-height: 0; z-index: 0; will-change: transform; }
.hero__cover { position: absolute; inset: 0; z-index: 3; background: #1a1512; opacity: 0; pointer-events: none; }
.overlap-flow { position: relative; z-index: 1; }
.hero-spacer { height: 100svh; }

/* Section inspiration : bandeau pleine largeur (wallpaper monstera) en en-tête */
.insp { padding: 0; }
.insp__bandeau {
  position: relative; text-align: center; color: var(--ink);
  padding: clamp(4.5rem, 13vh, 9rem) var(--gutter);
  /* wallpaper monstera (clair) + voile CLAIR pour la lisibilité du titre foncé */
  background:
    linear-gradient(rgba(244, 241, 236, .4), rgba(244, 241, 236, .5)),
    url('/assets/img/insp-bandeau.webp') center / cover no-repeat,
    #e9e3d6;
}
.insp__bandeau .section__title { margin-inline: auto; max-width: 18ch; color: var(--ink); }
.insp__bandeau .section__lead { margin-inline: auto; max-width: 56ch; color: rgba(55, 48, 43, .85); opacity: 1; }
.insp__body { padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(4rem, 10vh, 8rem); }

/* Galerie inspiration : grille éditoriale, parallaxe multi-vitesse (JS) */
.insp__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); max-width: var(--maxw); margin-inline: auto; }
.insp__item { position: relative; overflow: hidden; border-radius: 18px; margin: 0; will-change: transform; }
.insp__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.2rem .9rem; font-size: .92rem; color: #fff;
  background: linear-gradient(to top, rgba(20,17,15,.72), transparent); }
.insp__item--a { grid-column: span 7; aspect-ratio: 16/11; }
.insp__item--b { grid-column: span 5; aspect-ratio: 4/5; }
.insp__item--c { grid-column: span 4; aspect-ratio: 3/4; }
.insp__item--d { grid-column: span 8; aspect-ratio: 16/9; }
.insp__item--e { grid-column: span 6; aspect-ratio: 4/3; }
.insp__item--f { grid-column: span 6; aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .insp__grid { grid-template-columns: 1fr 1fr; }
  .insp__item--a, .insp__item--d { grid-column: span 2; aspect-ratio: 16/10; }
  .insp__item--b, .insp__item--c, .insp__item--e, .insp__item--f { grid-column: span 1; aspect-ratio: 3/4; }
}

/* Remplissages */
.fills { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); max-width: var(--maxw); margin-inline: auto; }
.fill { margin: 0; }
.fill__media { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
.fill__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fill__media .ph { width: 100%; height: 100%; min-height: 0; border-radius: 16px; }
.fill h3 { font-size: 1.2rem; font-weight: 300; margin: 0 0 .4rem; }
.fill p { font-size: .95rem; line-height: 1.55; color: inherit; opacity: .82; margin: 0; }
@media (max-width: 860px) { .fills { grid-template-columns: 1fr; max-width: 460px; } }

/* Avantages UFence */
.adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); max-width: var(--maxw); margin-inline: auto; }
.adv__item { border-top: 1px solid rgba(244,241,236,.16); padding-top: 1.2rem; }
.adv__item h3 { font-size: 1.15rem; font-weight: 300; margin: 0 0 .5rem; color: var(--on-dark); }
.adv__item p { font-size: .95rem; line-height: 1.55; color: rgba(244,241,236,.74); margin: 0; }
.adv__num { font-family: var(--font-brand); font-size: .85rem; color: var(--accent); letter-spacing: .1em; }
@media (max-width: 860px) { .adv { grid-template-columns: 1fr; } }

/* ============================================================
   PAGES LÉGALES (politiques Loi 25, conditions d'utilisation)
   ============================================================ */
body.legal-page { background: #f4f1ec; }
.legal { max-width: 820px; margin-inline: auto; color: var(--ink);
  padding: calc(var(--band-h) + clamp(3rem, 7vh, 5rem)) var(--gutter) clamp(4rem, 9vh, 7rem); }
.legal h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 300; line-height: 1.08; margin: 0 0 .6rem; }
.legal__updated { font-size: .85rem; color: rgba(55, 48, 43, .6); margin: 0 0 2.4rem; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 300; margin: 2.6rem 0 .8rem; }
.legal h3 { font-size: 1.1rem; font-weight: 400; margin: 1.6rem 0 .5rem; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.7; color: rgba(55, 48, 43, .88); }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .45rem; }
.legal a { color: #6e4e0f; text-decoration: underline; }
.legal strong { font-weight: 400; color: var(--ink); }
.legal__box { background: var(--paper); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 1.2rem 1.4rem; margin: 1.8rem 0; }
.legal__box p:last-child { margin-bottom: 0; }
.legal__back { display: inline-block; margin-top: 2.6rem; font-size: .95rem; }

/* ============================================================
   §X CONSENTEMENT (Loi 25) · bannière + modale + bouton biscuit
   ============================================================ */
.cc-banner {
  position: fixed; left: 24px; z-index: 60;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 380px; max-width: calc(100vw - 28px);
  background: rgba(37, 30, 27, 0.97); color: var(--on-dark);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 241, 236, .16); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transform: translateY(170%); transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.cc-banner.is-visible { transform: translateY(0); }
.cc-banner[hidden] { display: none; }
.cc-banner__inner { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.cc-banner__head { font-size: 1.05rem; }
.cc-banner__txt { font-size: .9rem; color: rgba(244, 241, 236, .74); line-height: 1.55; margin: 0; }
.cc-banner__links { font-size: .82rem; margin: 0; }
.cc-banner__links a { color: var(--accent); }
.cc-banner__links a:hover { text-decoration: underline; }
.cc-banner__links span { color: rgba(244, 241, 236, .4); margin: 0 5px; }
.cc-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cc-banner__actions .btn { width: 100%; }
.cc-banner__actions .btn[data-cc="accept"] { grid-column: 1 / -1; }

.cc-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s ease; }
.cc-modal[hidden] { display: none; }
.cc-modal.is-visible { opacity: 1; }
.cc-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 12, 10, .72); }
.cc-modal__card {
  position: relative; width: 100%; max-width: 480px;
  background: #2a221e; color: var(--on-dark);
  border: 1px solid rgba(244, 241, 236, .16); border-radius: 20px;
  padding: 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: scale(.96); transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  max-height: 90vh; overflow-y: auto;
}
.cc-modal.is-visible .cc-modal__card { transform: scale(1); }
.cc-modal__title { font-size: 1.4rem; font-weight: 300; margin: 0; }
.cc-modal__lead { font-size: .9rem; color: rgba(244, 241, 236, .74); line-height: 1.55; margin: .6rem 0 1.2rem; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid rgba(244, 241, 236, .12); }
.cc-row--toggle { cursor: pointer; }
.cc-row__txt strong { display: block; font-size: 1rem; font-weight: 300; }
.cc-row__txt span { font-size: .86rem; color: rgba(244, 241, 236, .68); }
.cc-badge { font-size: .72rem; color: rgba(244, 241, 236, .7); border: 1px solid rgba(244, 241, 236, .22); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.cc-row--toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex: none; }
.cc-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.cc-reopen {
  position: fixed; left: 18px; bottom: 18px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 30, 27, .92); color: rgba(244, 241, 236, .8);
  border: 1px solid rgba(244, 241, 236, .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.cc-reopen:hover { color: var(--on-dark); border-color: var(--accent); transform: translateY(-2px); }
.cc-reopen svg { width: 21px; height: 21px; }
.cc-reopen[hidden] { display: none; }

/* Pendant le choix de consentement, on masque le CTA collant mobile (évite le chevauchement bas) */
body.cc-open .mcta { display: none; }
/* Sur mobile, le CTA collant occupe le bas : on remonte le biscuit au-dessus */
@media (max-width: 860px) {
  .cc-reopen { left: 16px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 460px) {
  .cc-banner { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cc-reopen { left: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   SÉQUENCE CONFIGURATEUR (page UFence) — le panneau se
   transforme au scroll. Fond or = couleur exacte des vidéos
   (#E6C26F) → les panneaux flottent sans coupure.
   ============================================================ */
/* fond = teinte décodée de l'or des vidéos (pleine plage -> affiché tel quel) */
/* fond = teinte AFFICHÉE de l'or des vidéos (bt709 #E6C26F -> sRGB #E9C87C) */
.cfgseq { background: #E9C87C; color: var(--ink); position: relative; overflow: clip; }
.cfgseq__intro {
  max-width: 800px; margin-inline: auto; text-align: center;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) 0;
}
.cfgseq__intro .section__title { color: var(--ink); }
.cfgseq__intro p { margin: 1rem auto 0; max-width: 46ch; color: #6b5526; }

/* course de scroll qui pilote le scrub (4 étapes) — généreuse pour laisser
   le temps de voir chaque animation avant la bascule */
.cfgseq__scroll { position: relative; height: 460vh; }
.cfgseq__stage {
  position: sticky; top: 0; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 3.5vh, 2.4rem); padding: 8vh 0;
}
.cfgseq__inner {
  width: 100%; max-width: 1180px; margin-inline: auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.cfgseq__viewport { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: clip; }
.cfgseq__viewport video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; will-change: opacity;
  /* crop ~2px du pourtour : supprime le liseré de bord (compositing) sans
     réduire la taille perçue ; le fond (déjà raccord) comble le pourtour */
  clip-path: inset(2px);
}
.cfgseq__viewport video[data-cfg="0"] { opacity: 1; }   /* état initial sans JS */

.cfgseq__caps { position: relative; min-height: 12rem; }
.cfgseq__cap { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.cfgseq__cap[data-cap="0"] { opacity: 1; }
.cfgseq__num {
  display: block; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1;
  color: var(--ink); opacity: 0.22; letter-spacing: -0.02em;
}
.cfgseq__cap h3 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); margin: 0.35rem 0 0.55rem; color: var(--ink); }
.cfgseq__cap p { color: #5b4a26; max-width: 34ch; line-height: 1.55; }

.cfgseq__dots {
  display: flex; gap: clamp(1rem, 3vw, 2rem); list-style: none; padding: 0; margin: 0;
}
.cfgseq__dot {
  font: inherit; background: none; border: 0; cursor: pointer; padding: 0.2rem 0.1rem;
  font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--ink); opacity: 0.32; position: relative;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
/* trait sous le chiffre = repère « cliquable » */
.cfgseq__dot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.28rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.cfgseq__dot:hover { opacity: 1; transform: translateY(-2px); color: var(--accent); }
.cfgseq__dot:hover::after { transform: scaleX(1); }
.cfgseq__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.cfgseq__dot.is-active { opacity: 1; }
.cfgseq__dot.is-active::after { transform: scaleX(1); }

.cfgseq__cta { text-align: center; padding: 0; margin-top: clamp(0.4rem, 1.5vh, 1rem); }

/* Étape 4 (Éclairage DEL) : section sombre → texte clair (harmonie vidéo nuit).
   Le fond est animé en JS (or -> olive #463B21) ; ici on gère les couleurs. */
.cfgseq__cap h3, .cfgseq__cap p, .cfgseq__num, .cfgseq__dot {
  transition: color 0.45s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cfgseq.is-night .cfgseq__cap h3 { color: var(--on-dark); }
.cfgseq.is-night .cfgseq__cap p { color: rgba(244, 241, 236, 0.78); }
.cfgseq.is-night .cfgseq__num { color: var(--on-dark); }
.cfgseq.is-night .cfgseq__dot { color: var(--on-dark); }
.cfgseq.is-night .cfgseq__dot:hover { color: var(--accent); }

/* bouton foncé (sur fond or) */
.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: #241f1b; }

@media (max-width: 860px) {
  .cfgseq__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .cfgseq__caps { min-height: 9.5rem; text-align: center; }
  .cfgseq__cap p { margin-inline: auto; }
  .cfgseq__scroll { height: 400vh; }
}

/* ============================================================
   INSPIRATION (placeholder) — galerie déplacée vers une page
   dédiée. Fond PÂLE, cadrages d'attente.
   ============================================================ */
.insp-soon { background: var(--creme, #F4F1EC); color: var(--ink); }
.insp-soon__head { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.insp-soon__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.insp-soon__item { margin: 0; }
.insp-soon__item .ph {
  aspect-ratio: 4 / 3; width: 100%; min-height: 0; border-radius: 16px;
  background: #ece6db; border: 1px dashed rgba(55, 48, 43, 0.22);
  display: flex; align-items: center; justify-content: center;
  color: rgba(55, 48, 43, 0.45); font-size: 0.85rem; letter-spacing: 0.04em;
}
.insp-soon__item figcaption {
  margin-top: 0.6rem; font-size: 0.92rem; color: var(--muted);
}
@media (max-width: 860px) {
  .insp-soon__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .insp-soon__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INDICATEUR DE SCROLL (souris animée) — hero
   ============================================================ */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 4vh, 2.4rem);
  transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  color: var(--on-dark); opacity: 0.9; transition: opacity 0.45s var(--ease);
}
.scroll-cue__mouse {
  width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 14px;
  position: relative; opacity: 0.9;
}
.scroll-cue__wheel {
  position: absolute; top: 7px; left: 50%; width: 3px; height: 7px;
  border-radius: 2px; background: currentColor;
  transform: translateX(-50%); animation: scrollCue 1.7s ease-in-out infinite;
}
.scroll-cue__label {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8;
}
@keyframes scrollCue {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  25%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 15px); }
}
/* disparaît dès qu'on défile */
.has-scrolled .scroll-cue { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scroll-cue__wheel { animation: none; } }

/* ============================================================
   SECTION SANS BÉTON (UFence) — texte gauche, image droite,
   fond pâle, arrivée animée de l'image (data-arrive="right").
   ============================================================ */
.beton { background: #EFE9DD; color: var(--ink); }
.beton__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.beton__text .section__title { color: var(--ink); max-width: 18ch; }
.beton__text .section__lead { color: var(--muted); }
.beton__text .section__lead + .section__lead { margin-top: 1rem; }
.beton__img { margin: 0; }
.beton__img img { width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 860px) {
  .beton__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ===== Chiffre SUIVANT qui pulse (incite au clic) ===== */
.cfgseq__dot.is-next { animation: cfgPulse 1.5s ease-in-out infinite; }
@keyframes cfgPulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.22) translateY(-1px); opacity: 0.95; color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .cfgseq__dot.is-next { animation: none; opacity: 0.6; } }

/* ===== Souris scroll-down SOUS les chiffres (section config) ===== */
.scroll-cue--cfg {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: clamp(1rem, 3vh, 1.8rem); color: var(--ink); opacity: 0.7;
}
.cfgseq.is-night .scroll-cue--cfg { color: var(--on-dark); }   /* nuit : clair */

/* ===== CTA qui suit le fond foncé (clair quand nuit) ===== */
.cfgseq.is-night .cfgseq__cta .btn--dark { background: var(--on-dark); color: var(--ink); }
.cfgseq.is-night .cfgseq__cta .btn--dark:hover { background: #fff; }

/* ============================================================
   PANNEAU CONFIGURATEUR « boîte technique » (UFence — refonte)
   Abandon du match de couleur : la vidéo vit dans un cadre
   anthracite assumé. Fond de section = or fixe (comme 1-3).
   Structure verticale identique mobile + bureau :
   en-tête (n° + titre + desc) · écran vidéo · contrôles 01-04.
   ============================================================ */
.cfgseq { background: #E9C87C; }
.cfgseq__stage { background: none; }          /* plus d'échantillonnage : or de section autour */

.cfgpanel {
  width: min(620px, 92vw); margin-inline: auto;
  background: var(--ink);
  border: 1px solid rgba(244, 241, 236, 0.12);
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.30);
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
  display: flex; flex-direction: column; gap: clamp(0.9rem, 2.2vw, 1.5rem);
  color: var(--on-dark);
}

/* En-tête : grand numéro + titre + description (crossfade par étape) */
.cfgpanel__head { position: relative; min-height: 5rem; }
.cfgpanel__head .cfgseq__cap {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.3rem);
}
.cfgpanel__head .cfgseq__cap[data-cap="0"] { opacity: 1; }
.cfgpanel__head .cfgseq__num {
  font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 1; color: var(--accent);
  opacity: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; flex: none;
}
.cfgseq__cap-txt h3 { font-size: clamp(1.25rem, 3vw, 1.8rem); color: var(--on-dark); margin: 0 0 0.25rem; }
.cfgseq__cap-txt p { color: rgba(244, 241, 236, 0.72); margin: 0; max-width: 42ch; line-height: 1.5; }

/* Écran : la vidéo encadrée. Fond OR (couleur des vidéos jour) : pendant le
   fondu enchaîné, tout transparu reste or = aucun assombrissement. */
.cfgpanel__screen {
  position: relative; width: 100%; aspect-ratio: 1280 / 800;
  border-radius: 14px; overflow: clip; background: #E4C876;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.08);
}
.cfgpanel__screen video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; clip-path: none; will-change: opacity;
}
.cfgpanel__screen video[data-cfg="0"] { opacity: 1; }

/* Contrôles : 01 02 03 04 en bas, comme des onglets */
.cfgpanel__controls {
  display: flex; justify-content: center; gap: clamp(0.8rem, 3vw, 2rem);
  list-style: none; padding: clamp(0.5rem, 1.5vw, 0.9rem) 0 0; margin: 0;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
}
.cfgpanel__controls .cfgseq__dot {
  font: inherit; background: none; border: 0; cursor: pointer; padding: 0.35rem 0.55rem;
  font-size: clamp(1.1rem, 3vw, 1.6rem); line-height: 1; color: var(--on-dark);
  opacity: 0.4; position: relative;
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.cfgpanel__controls .cfgseq__dot::after {
  content: ""; position: absolute; left: 0.55rem; right: 0.55rem; bottom: -0.5rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .28s var(--ease);
}
.cfgpanel__controls .cfgseq__dot:hover { opacity: 1; color: var(--accent); transform: translateY(-1px); }
.cfgpanel__controls .cfgseq__dot:hover::after { transform: scaleX(1); }
.cfgpanel__controls .cfgseq__dot.is-active { opacity: 1; }
.cfgpanel__controls .cfgseq__dot.is-active::after { transform: scaleX(1); }

/* scroll-cue sous le panneau, sur l'or */
.scroll-cue--cfg { color: var(--ink); }

@media (max-width: 600px) {
  .cfgpanel { padding: 1rem; gap: 0.9rem; }
  .cfgpanel__head { min-height: 4.4rem; }
}

/* ============================================================
   LES 4 FAÇONS — slider en cascade (Élever · Délimiter ·
   Sécuriser · Intimiser). Auto 3 s + glisser/swipe. Carte active
   = photo + icône + titre ; cartes latérales = icône seule.
   Texte explicatif dessous (remplace les flèches). Réf. Osmo.
   ============================================================ */
.facons { background: var(--paper); color: var(--ink); overflow: clip; }
/* centrage : le .section__title global (max-width:18ch + margin:0) se cale à gauche → margin auto */
.facons__head .section__title { color: var(--ink); margin-inline: auto; }
.facons__head .section__lead { color: #4a403a; margin-inline: auto; }
.facons__slider { margin-top: clamp(1.6rem, 4vh, 3rem); user-select: none; }
.facons__stage {
  position: relative; width: 100%; max-width: 1100px; margin-inline: auto;
  height: clamp(300px, 42vw, 520px); touch-action: pan-y; cursor: grab;
}
.facons__stage:active { cursor: grabbing; }
.facon-card {
  position: absolute; top: 50%; left: 50%;
  width: min(58%, 640px); aspect-ratio: 3 / 2; margin: 0;
  border-radius: 18px; overflow: clip; opacity: 0;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.38);
  will-change: transform, opacity;
}
.facon-card__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.facon-card__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.60) 100%);
}
/* Coin haut-gauche : « pièce ajoutée » (plastique ombré) qui tient l'image et porte le logo */
.facon-card__badge {
  position: absolute; top: 0; left: 0; width: clamp(58px, 6.8vw, 80px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(150deg, rgba(64,56,47,0.94) 0%, rgba(28,23,18,0.95) 100%);
  border-radius: 18px 0 22px 0;     /* coin ext. = rayon carte ; coin int. arrondi */
  box-shadow: 0 9px 20px rgba(0,0,0,0.42), inset 0 1.5px 0 rgba(255,255,255,0.16), inset -1.5px -1.5px 3px rgba(0,0,0,0.45);
}
.facon-card__icon {
  width: 52%; height: auto; pointer-events: none; opacity: 0.97;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
}
@media (max-width: 700px) {
  .facon-card__badge { width: clamp(50px, 12vw, 66px); border-radius: 14px 0 18px 0; }
}
/* Légende sous le slider : titre (déplacé depuis l'image) + texte inspirant */
.facons__caption {
  text-align: center; max-width: 52ch; margin: clamp(1.2rem, 3vh, 2rem) auto 0; padding: 0 var(--gutter);
}
.facons__name {
  color: var(--ink); font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin: 0 0 0.45rem;
  letter-spacing: -0.01em; transition: opacity .3s var(--ease);
}
.facons__desc {
  color: #4a403a; line-height: 1.55; margin: 0; min-height: 3em;
  transition: opacity .35s var(--ease);
}
@media (max-width: 700px) {
  .facon-card { width: 74%; border-radius: 14px; }
  .facons__stage { height: clamp(280px, 60vw, 420px); }
}

/* ============================================================
   SECTION « LA CLÔTURE DU FUTUR » — jour → nuit DEL au scroll.
   Fond pâle qui s'assombrit + image qui transite vers la version
   éclairée + texte qui passe en clair (JS scrub dans animations.js).
   ============================================================ */
/* « La clôture du futur » — section épinglée : la course de scroll (.futur__scroll)
   pilote la transition jour→nuit pendant que le stage reste figé (sticky). */
.futur { background: #EFE9DD; overflow: clip; }
.futur__scroll { position: relative; height: 200vh; }
.futur__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 6vh, 4rem) 0;
}
/* Texte à gauche, image à droite : tout tient dans l'écran figé. L'image (colonne
   droite) est de fait plus petite que pleine largeur (réduction demandée) et plafonnée
   en hauteur pour ne jamais déborder sous la ligne de flottaison. */
.futur__stage .method {
  width: 100%;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.futur__media { position: relative; margin: 0; }
.futur__media img { width: 100%; height: auto; max-height: 66vh; object-fit: cover; border-radius: 22px; display: block; }
.futur__night { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; }
@media (max-width: 860px) {
  .futur__stage .method { grid-template-columns: 1fr; gap: 1.6rem; }
  .futur__scroll { height: 170vh; }
  .futur__media img { max-height: 48vh; }
}

/* ── Pages « en construction » (stubs : la structure d'URL existe, contenu à venir) ── */
.construction {
  background: var(--ink); color: var(--on-dark);
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
}
.construction__in { max-width: 620px; }
.construction__icon {
  display: inline-flex; width: 66px; height: 66px; margin-bottom: 1.7rem;
  align-items: center; justify-content: center; border-radius: 16px;
  background: rgba(198, 146, 30, 0.12); color: var(--accent);
}
.construction__icon svg { width: 32px; height: 32px; }
.construction__kicker {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem;
  color: var(--accent); margin: 0 0 0.85rem;
}
.construction__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.06; margin: 0 0 1rem; }
.construction__lead {
  color: rgba(244, 241, 236, 0.74); font-size: 1.05rem; line-height: 1.6;
  max-width: 46ch; margin: 0 auto 2.2rem;
}
.construction__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ── Page Inspiration : logo seul (pas de menu sur l'anim de départ) ── */
.insp-logo {
  position: fixed; z-index: 60;
  top: clamp(1rem, 2.6vh, 1.7rem); left: clamp(1.25rem, 4vw, 3rem);
  display: inline-flex; animation: inspLogoIn 0.8s ease 0.2s both;
}
.insp-logo img { height: 26px; width: auto; display: block; }
@keyframes inspLogoIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Page Inspiration : hero « fente centrale » (rideau beige) ── */
.insp-hero { position: relative; background: #e8dbc3; }              /* beige (rideau + suite) */
.insp-hero__scroll { position: relative; height: 230vh; }           /* course du scrub */
.insp-hero__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.insp-hero__bg { position: absolute; inset: 0; margin: 0; overflow: clip; z-index: 1; will-change: transform, opacity; }
.insp-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.insp-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.05); pointer-events: none; } /* voile noir : lisibilité du texte */
.insp-hero__text {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: 0.5rem;
  text-align: center; padding: 0 8vw; color: var(--on-dark); pointer-events: none;
}
.insp-hero__kicker { text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.8rem; opacity: 0.92; margin: 0; }
.insp-hero__title {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 600; line-height: 1.08;
  margin: 0; max-width: 22ch; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.42);
}
.insp-hero__curtain { position: absolute; inset: 0; margin: 0; z-index: 3; background: #e8dbc3; will-change: clip-path; }
@media (max-width: 760px) {
  .insp-hero__scroll { height: 175vh; }              /* intro plus courte au doigt sur mobile */
  .insp-hero__title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

/* ── Page Innovation ───────────────────────────────────────────────── */
/* « Conquérir l'imaginable » : 4 capacités */
.innov-capac { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: clamp(2rem, 5vh, 3.5rem); text-align: left; }
.innov-capac__ico { width: 60px; height: 60px; object-fit: contain; object-position: left center; margin-bottom: 1rem; }
.innov-capac__item h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.innov-capac__item p { margin: 0; color: rgba(55, 48, 43, 0.72); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 760px) { .innov-capac { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.4rem; } }

/* sections 2 colonnes texte + image (interopérabilité, finition) */
.innov-feat { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.innov-feat--rev .innov-feat__img { order: -1; }                 /* image à gauche */
.innov-feat__img { margin: 0; border-radius: 20px; overflow: hidden; }
.innov-feat__img img { width: 100%; height: auto; max-height: 620px; object-fit: cover; display: block; }
@media (max-width: 820px) { .innov-feat { grid-template-columns: 1fr; gap: 1.8rem; } .innov-feat--rev .innov-feat__img { order: 0; } }

/* installation sur pieux : liste d'avantages + image (sur fond foncé) */
.innov-pieux { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.innov-pieux__img { margin: 0; }
.innov-pieux__img img { width: 100%; height: auto; max-height: 660px; object-fit: contain; display: block; }
.innov-adv { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.innov-adv li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.innov-adv li::before { content: ""; width: 9px; height: 9px; margin-top: 0.5rem; border-radius: 50%; background: var(--accent); }
.innov-adv b { display: block; margin-bottom: 0.15rem; }
.innov-adv span { color: rgba(244, 241, 236, 0.72); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 820px) { .innov-pieux { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ── Footer : icônes réseaux sociaux ── */
.footer__social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.footer__social a, .footer__social span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: rgba(244, 241, 236, 0.72);
  border: 1px solid rgba(244, 241, 236, 0.16);
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.footer__social a:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer__social .is-soon { opacity: 0.38; cursor: default; }     /* TikTok : icône sans lien (compte à corriger) */

/* ── Widget chat (override de la bulle teaser .upg-teaser, light DOM) ──
   La bulle d'origine est trop étroite (largeur shrink-to-fit dans un conteneur de 54px).
   On lui donne une largeur explicite + un ombrage doux et plus de rondeur. !important :
   le widget injecte son <style> APRÈS styles.css, donc on doit gagner la cascade. */
.upg-teaser {
  width: 252px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  color: #2b2622 !important;
  border-radius: 16px !important;
  padding: 13px 38px 14px 16px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  border: 1px solid rgba(35, 30, 27, 0.06) !important;
  box-shadow: 0 14px 34px rgba(35, 30, 27, 0.20), 0 3px 10px rgba(35, 30, 27, 0.10) !important;
}
.upg-tcls { color: #c7bfb2 !important; }
.upg-tcls:hover { color: var(--accent) !important; }

/* ════ Page Inspiration · LA SUITE (funnel : intention → façons → ambiances → gammes → action) ════ */
/* A. Intention (continue le beige du rideau du hero) */
.insp-intent { background: #e8dbc3; color: var(--ink); text-align: center; }
.insp-intent .wrap { max-width: 760px; }
.insp-intent .scroll-cue { position: static; margin: clamp(2rem, 5vh, 3.5rem) auto 0; color: rgba(55,48,43,0.6); }

/* B. Les 4 façons — tuiles portrait (lentilles d'intention) */
.facon-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 1.5vw, 1.2rem); margin-top: clamp(2rem, 5vh, 3.4rem); }
.facon-tile { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 3/4; }
.facon-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facon-tile__cap { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem 1.2rem; color: #fff;
  background: linear-gradient(to top, rgba(20,16,12,0.8), rgba(20,16,12,0.05) 72%, transparent); }
.facon-tile__name { font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 600; margin: 0 0 0.2rem; }
.facon-tile__need { font-size: 0.9rem; line-height: 1.4; opacity: 0.86; margin: 0; }
@media (max-width: 760px) { .facon-tiles { grid-template-columns: repeat(2, 1fr); } }

/* C. Galerie d'ambiances — bento, fond ink, filtres */
.amb { background: var(--ink); color: var(--on-dark); }
.amb__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(1.4rem,3vh,2rem) 0 clamp(1.6rem,4vh,2.4rem); }
.amb__chip { background: transparent; color: rgba(244,241,236,0.7); border: 1px solid rgba(244,241,236,0.2);
  border-radius: 999px; padding: 0.5rem 1.05rem; font: inherit; font-size: 0.9rem; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s; }
.amb__chip:hover { color: var(--on-dark); border-color: rgba(244,241,236,0.5); }
.amb__chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.amb__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vh, 210px); gap: clamp(0.7rem, 1.3vw, 1rem); grid-auto-flow: dense; }
.amb__tile { position: relative; overflow: hidden; border-radius: 18px; will-change: transform; }
.amb__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amb__tile.is-wide { grid-column: span 2; }
.amb__tile.is-tall { grid-row: span 2; }
.amb__tile.is-big  { grid-column: span 2; grid-row: span 2; }
.amb__tile.is-full { grid-column: 1 / -1; }
.amb__cap { position: absolute; inset: auto 0 0 0; padding: 0.9rem 1rem 1rem; color: #fff;
  background: linear-gradient(to top, rgba(20,16,12,0.76), transparent); }
.amb__gamme { display: inline-block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.25rem; }
.amb__name { font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
@media (max-width: 860px) {
  .amb__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 22vh, 190px); }
  .amb__tile.is-wide, .amb__tile.is-full { grid-column: span 2; }
  .amb__tile.is-big { grid-column: span 2; grid-row: span 2; }
  .amb__tile.is-tall { grid-row: span 1; }
}
/* D. Gammes — section claire (réutilise .eco-grid/.eco-card de l'accueil) */
.insp-gammes { background: #efe9dd; }

/* ── Inspiration · finitions de design ── */
/* Intent : contenu en HAUT de la section (le titre entre dans le champ et émerge dès
   que le rideau beige remplit l'écran) + respiration confortable. */
.insp-intent { padding-block: clamp(3.5rem, 11vh, 8rem); }
/* Façon : tuiles cliquables qui mènent à la galerie */
.facon-tile { cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.facon-tile:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(20, 16, 12, 0.30); }
.facon-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.facon-tile__go { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.55rem;
  font-size: 0.82rem; font-weight: 600; color: var(--accent);
  opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
.facon-tile:hover .facon-tile__go, .facon-tile:focus-visible .facon-tile__go { opacity: 1; transform: none; }
/* « À toute heure » : le moment jour→nuit (.futur) sur fond clair pour enchaîner depuis les gammes */
.insp-toute-heure.futur { background: #efe9dd; }

/* ════════ Page COMMERCIAL / immobilier — ton architectural ════════ */
/* Hero : titre plus mesuré (texte plus long, ton architectural) */
/* Bloc centré verticalement : réduit le grand vide au-dessus du titre et
   redonne de l'air sous les boutons de conversion (feedback Eric). */
.hero--comm { align-items: center; padding-bottom: clamp(4rem, 9vh, 6.5rem); }
.hero--comm .hero__title { font-size: clamp(1.55rem, 3.1vw, 2.7rem); line-height: 1.14; max-width: 28ch; }
.hero--comm .hero__sub { max-width: 62ch; }

/* Énoncé valorisé · fond brun foncé, paragraphe révélé mot à mot au scroll (épinglé) */
.statement { background: var(--ink); color: var(--on-dark); }
.statement__scroll { position: relative; height: 220vh; }
.statement__stage { position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; place-items: center; padding: clamp(4rem, 12vh, 8rem) var(--gutter); }
.statement__text { max-width: min(960px, 90vw); margin: 0; text-align: center;
  font-family: var(--font-brand); font-weight: 300; letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.34; }
/* Effet 1 · « Du plan à la réalité » : blueprint → esquisse → modélisation (crossfade épinglé) */
.process { background: var(--ink); color: var(--on-dark); }
.process__scroll { position: relative; height: 340vh; }
/* Titre + message au-dessus, cadre en dessous : une vraie respiration verticale */
.process__stage { position: sticky; top: 0; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.6rem, 4vh, 2.8rem);
  padding: clamp(4.5rem, 11vh, 7rem) var(--gutter) clamp(3.5rem, 8vh, 5.5rem); }
.process__head { width: min(760px, 92vw); text-align: center; }
.process__lead { margin: 1.1rem auto 0; max-width: 58ch; font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.55; color: rgba(244, 241, 236, 0.82); }
.process__frame { position: relative; width: min(900px, 84vw); aspect-ratio: 1672 / 941; margin: 0;
  border-radius: 16px; overflow: clip; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.process__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; }
.process__img[data-stage="0"] { opacity: 1; }

/* Effet 2 · « Effet d'approche » : dolly far → close (épinglé) */
.approche { background: #11100e; color: var(--on-dark); }
.approche__scroll { position: relative; height: 260vh; }
.approche__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.approche__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.approche__close { opacity: 0; }
.approche__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.78), rgba(10, 9, 8, 0.05) 55%, transparent); }
.approche__caption { position: absolute; left: 0; right: 0; bottom: clamp(3rem, 9vh, 6rem); z-index: 3;
  text-align: center; padding: 0 var(--gutter); }
.approche__caption .section__title { margin-inline: auto; max-width: 18ch; }
.approche__caption .section__lead { margin: 1rem auto 0; max-width: 52ch; color: rgba(244, 241, 236, 0.82); }

/* Applications (grille de 6 cartes sobres, fond foncé) */
.comm-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2rem, 5vh, 3.4rem); }
.comm-app { border: 1px solid rgba(244, 241, 236, 0.14); border-radius: 16px; padding: clamp(1.4rem, 2.4vw, 2rem);
  background: rgba(244, 241, 236, 0.02); }
.comm-app__n { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--accent); }
.comm-app h3 { font-size: 1.12rem; margin: 0.5rem 0; }
.comm-app p { margin: 0; color: rgba(244, 241, 236, 0.7); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 860px) { .comm-apps { grid-template-columns: 1fr; } }

/* Documentation : liste sur 2 colonnes */
.comm-doclist { list-style: none; margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 2rem; }
.comm-doclist li { position: relative; padding-left: 1.4rem; color: var(--ink); line-height: 1.45; }
.comm-doclist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) { .comm-doclist { grid-template-columns: 1fr; } }

/* Modularité : phrase de mise en valeur */
.comm-hl { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; line-height: 1.22; max-width: 24ch;
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0; color: var(--ink); }
.section--dark .comm-hl { color: var(--on-dark); }

/* Montage d'images (section « actif ») : chaque image arrive de la droite (JS) */
.comm-actif { overflow: clip; } /* contient l'arrivée latérale décalée des figures */
.comm-montage { display: grid; grid-template-columns: 1.4fr 1fr; grid-auto-rows: 1fr; gap: clamp(0.7rem, 1.4vw, 1.1rem); }
.comm-montage figure { margin: 0; overflow: clip; border-radius: 16px;
  border: 1px solid rgba(40, 35, 31, 0.10); box-shadow: 0 16px 44px rgba(40, 35, 31, 0.16); will-change: transform, opacity; }
.comm-montage figure:first-child { grid-row: span 2; }
.comm-montage img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 180px; }
@media (max-width: 760px) { .comm-montage { grid-template-columns: 1fr 1fr; } .comm-montage figure:first-child { grid-row: span 1; grid-column: span 2; } }