/* =====================================================================
   Automatia — Feuille de style principale
   ---------------------------------------------------------------------
   Organisation :
     1. Tokens (couleurs de marque, typo, espacements)
     2. Base / reset / utilitaires
     3. Navigation
     4. Hero (couches : photo → scrim → plan technique → logo → contenu)
     5. (retiré le 2026-09-13 : motif circuit v20)
     6. Sections communes, cartes, décors parallax
     7. Sections spécifiques (problème, solutions, méthode, à propos, FAQ, contact)
     8. Pied de page
     9. Système d'apparition (reveal) + parallax + profils de perf
    10. Accessibilité (reduced-motion, focus) et responsive

   Règle d'or (CLAUDE.md) : toute animation passe par transform/opacity ;
   jamais top/left/width/height animés. Les positions calculées par JS
   (logo, hint) sont posées une fois, pas animées.
   Nommage : BEM léger (bloc__élément, bloc--modificateur).
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Couleurs de marque — exactes, tirées du logo (Logo/automatia-logo.svg) */
  --navy: #273e60;
  --orange: #e18f45;
  /* Dérivés */
  --navy-deep: #1b2c46;      /* fonds sombres (contact, footer) */
  --navy-ink: #16233a;       /* titres sur fond clair : plus de contraste que --navy */
  --orange-text: #a3561a;    /* orange assombri : seul orange autorisé en texte sur fond clair (≥ 4.5:1) */
  --orange-soft: rgba(225, 143, 69, 0.14);
  --bg: #f5f4f1;             /* blanc cassé chaud (hérité de la v20) */
  --surface: #ffffff;
  --ink: #14161a;
  --muted: #5d636d;          /* 5.6:1 sur --bg */
  --line: #dedbd4;
  --line-strong: #c7c3ba;
  --on-dark: #f3f1ec;
  --on-dark-muted: #b8bfcc;  /* 7:1 sur --navy-deep */

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 6px;
  --wrap: 1120px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(72px, 10vw, 128px);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --stagger: 90ms;           /* délai entre éléments d'un même groupe (réduit selon le profil) */
  --reveal-dur: 0.75s;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }

h1, h2, h3 { color: var(--navy-ink); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 42px); max-width: 18ch; }
h3 { font-size: 19px; }
p { max-width: 62ch; }

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: 14px; max-width: none;
}
.eyebrow--light { color: var(--orange); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm);
  transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(76px); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform 0.18s var(--ease-out), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  /* zone tactile ≥ 44px */
  min-height: 46px;
}
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 -3px 0 rgba(0,0,0,0.12); }
.btn--primary:hover { background: var(--navy-deep); transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(39,62,96,0.55), inset 0 -3px 0 var(--orange); }
.btn--ghost { border-color: var(--line-strong); color: var(--navy-ink); background: rgba(255,255,255,0.55); }
.btn--ghost:hover { border-color: var(--navy); background: #fff; transform: translateY(-1px); }
.btn--light { background: var(--on-dark); color: var(--navy-ink); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn--sm { padding: 9px 16px; min-height: 38px; font-size: 14px; }
/* Grand bouton orange sur fond sombre : texte navy ≥ 19px gras = « texte large » WCAG (3:1 suffit, on est à ~4.2:1) */
.btn--lg { padding: 18px 28px; font-size: 19px; font-weight: 700; background: var(--orange); color: var(--navy-ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.14); }
.btn--lg:hover { background: #eea15a; transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(225,143,69,0.7), inset 0 -3px 0 rgba(0,0,0,0.14); }
.btn--block { width: 100%; }

/* ---------- 3. NAVIGATION ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding: 14px 0;
  background: rgba(245, 244, 241, 0);
  border-bottom: 1px solid rgba(0,0,0,0);
  /* Pas de transition de padding : ce serait un reflow à chaque image (règle CLAUDE.md) */
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nav.is-scrolled {
  background: rgba(245, 244, 241, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { opacity: 0; transition: opacity 0.3s; }
.nav__brand img { height: 19px; width: auto; }
.nav.is-scrolled .nav__brand, .nav.is-open .nav__brand { opacity: 1; }
.nav__menu { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--navy-ink); }
.nav__menu a:not(.btn) { position: relative; padding: 6px 0; }
.nav__menu a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out);
}
.nav__menu a:not(.btn):hover::after { transform: scaleX(1); }
.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: var(--radius-sm); }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--navy-ink); transition: transform 0.25s, opacity 0.2s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 4. HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  /* --px/--py : décalage souris (main.js), --sy : parallax au scroll */
  --px: 0; --py: 0;
}
.hero__bg {
  position: absolute; inset: 0; /* pas de débord : logo-effect.js calcule le mapping photo/logo sur la taille exacte du hero.
                                   Le parallax peut découvrir le bas de la photo, mais le scrim y est déjà opaque. */
  z-index: 0; pointer-events: none; overflow: hidden;
  background-color: var(--bg);
  /* Photo paysage : le mur de béton est dans la moitié gauche, d'où le calage à gauche (logo aligné sur le texte).
     Sous 768 px, une photo portrait dédiée prend le relais (voir bloc mobile). logo-effect.js remplace
     taille/position par un mapping exact ; ces valeurs ne servent qu'au profil léger. */
  background-image: url("../assets/hero-desktop.jpg");
  background-image: image-set(url("../assets/hero-desktop.webp") type("image/webp"), url("../assets/hero-desktop.jpg") type("image/jpeg"));
  background-size: cover; background-position: left 35%; background-repeat: no-repeat;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--sy, 0px) + var(--py) * 6px), 0);
}
.hero__photo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* préchargement seulement */
/* Rayons de lumière (v20) : lumière qui tombe du plafond, léger balancement */
.hero__beam {
  position: absolute; top: -35%; height: 170%;
  background: linear-gradient(180deg, rgba(255,251,238,0.65) 0%, rgba(255,251,238,0.22) 45%, transparent 78%);
  filter: blur(7px); mix-blend-mode: screen; transform-origin: top center;
}
.hero__beam--1 { left: 14%; width: 220px; animation: beamSway1 15s ease-in-out infinite; }
.hero__beam--2 { left: 52%; width: 180px; opacity: 0.85; animation: beamSway2 19s ease-in-out infinite; }
.hero__beam--3 { left: 74%; width: 140px; opacity: 0.65; animation: beamSway1 22s ease-in-out infinite reverse; }
@keyframes beamSway1 { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(15.5deg); } }
@keyframes beamSway2 { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-12deg); } }
/* Poussières dans les rayons (générées par main.js, profil riche seulement) */
.dust {
  position: absolute; bottom: -5%; border-radius: 50%;
  background: rgba(255,251,240,0.9); filter: blur(0.5px); opacity: 0;
  animation: dustFloat linear infinite;
}
@keyframes dustFloat {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.75; }
  88% { opacity: 0.5; }
  100% { transform: translate(var(--dx), -130vh); opacity: 0; }
}
/* Scrim : léger voile en haut (lisibilité de la nav), photo nette au milieu, fondu vers --bg seulement dans
   les derniers 160 px, sous les boutons, pour raccorder la section suivante. Le contraste du texte n'est plus
   assuré ici mais par le voile localisé .hero__content::before : la photo n'est plus brouillée sur toute la largeur. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(245,244,241,0.30) 0%, rgba(245,244,241,0.05) 22%, rgba(245,244,241,0) 40%,
                    rgba(245,244,241,0) calc(100% - 160px), rgba(245,244,241,0.7) calc(100% - 70px), var(--bg) 100%);
}
.hero__network {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(calc(var(--px) * -14px), calc(var(--sy, 0px) + var(--py) * -10px), 0);
  /* Le plan s'efface vers le bas : il ne doit jamais passer derrière le titre (contraste AA). Masque = compositing, pas de reflow. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 66%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 66%);
}
.network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#heroCanvas { position: absolute; inset: 0; z-index: 3; touch-action: pan-y; }
/* Logo vectoriel net affiché au repos par-dessus les cubes (position posée par logo-effect.js) */
#logoOverlay { position: absolute; z-index: 3; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; will-change: opacity; }
#logoOverlay svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(30,40,60,0.22)); }
#logoOverlay.masque { opacity: 0; transition: opacity 0.1s ease; }
/* Fallback profil léger : pas de Three.js, le SVG est posé en CSS sur le mur, bord gauche aligné sur la colonne
   de texte (même calcul que .wrap). Le plancher de 96 px évite la plante au bord gauche de la photo. */
.hero.is-static #logoOverlay {
  left: max(calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter)), 96px);
  top: 38%; width: min(560px, 40vw); transform: translateY(-50%);
}
.hero.is-static #heroCanvas { display: none; }
.hero__hint {
  position: absolute; z-index: 4; pointer-events: none;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; background: rgba(245,244,241,0.75);
  opacity: 0; transform: translate(-8px, -50%); transition: opacity 0.5s, transform 0.5s var(--ease-out);
  white-space: nowrap;
}
.hero__hint.is-on { opacity: 1; transform: translate(0, -50%); }
.hero__hint::before { content: '← '; color: var(--orange-text); }
.hero__hint::after { content: ' →'; color: var(--orange-text); }
/* Le logo est ancré par logo-effect.js à ~36 % de la hauteur du hero : le contenu commence juste en dessous.
   Dimensionné pour tenir dans un écran de 700 px de haut sans pousser le titre sous le pli. */
.hero__spacer { height: 46vh; height: 46svh; flex: none; }
.hero__content { position: relative; z-index: 4; padding-bottom: clamp(56px, 8vh, 96px); }
/* Voile de lecture derrière la colonne de texte seulement (AA : le bas de la photo a des chaises noires).
   Bords fondus par masque : entrée douce sous la baseline, sortie à gauche et vers la droite, où la photo
   reste nette. z-index -1 : sous le texte, mais dans le contexte d'empilement de .hero__content. */
.hero__content::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -12px; bottom: -240px; left: -80px; right: 0; /* bas : prolongé jusqu'au bord du hero (rogné par overflow) */
  background: rgba(245,244,241,0.92);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 62%, transparent 82%),
                      linear-gradient(180deg, transparent 0, #000 56px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 62%, transparent 82%),
                      linear-gradient(180deg, transparent 0, #000 56px);
          mask-composite: intersect;
}
/* La baseline tombe sur le béton, sous le logo, où le scrim est encore léger : ~3:1 mesuré sans fond.
   La pastille la ramène au-dessus de 4.5:1 (AA). Marge négative = le texte reste aligné sur le logo et le titre. */
.hero__content > .eyebrow {
  display: inline-block; padding: 5px 12px; margin-left: -12px;
  background: rgba(245,244,241,0.9); border-radius: 999px;
}
.hero__title { font-size: clamp(30px, 4.1vw, 50px); max-width: 26ch; margin-bottom: 18px; font-weight: 800; }
.hero__lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muted); max-width: 58ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; z-index: 4; transform: translateX(-50%);
  width: 1px; height: 34px; background: var(--line-strong); overflow: hidden;
}
.scroll-cue::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--navy);
  transform: translateY(-100%); animation: scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- 6. SECTIONS, CARTES, DÉCORS ---------- */
.section { position: relative; padding: var(--section-y) 0; overflow: hidden; }
.section__head { margin-bottom: clamp(36px, 5vw, 56px); }
.section__lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muted); margin-top: 16px; }
.section__note { margin-top: 36px; font-size: 17px; font-weight: 500; color: var(--navy-ink); max-width: 56ch; }

.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
  /* --mx/--my : position du curseur (main.js) pour le halo lumineux */
  --mx: 50%; --my: 50%;
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(225,143,69,0.18), transparent 62%);
  opacity: 0; transition: opacity 0.35s;
}
.card::after { /* liseré orange qui « s'allume » au survol */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(39,62,96,0.35); border-color: var(--line-strong); }
.card:hover::before, .card:hover::after { opacity: 1; transform: none; }
.card > * { position: relative; }

/* Décors d'arrière-plan animés au scroll (parallax) — jamais devant le texte */
.deco { position: absolute; pointer-events: none; z-index: 0; transform: translate3d(0, var(--sy, 0px), 0); }
.deco--blob { width: 520px; height: 520px; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.deco--blob-orange { background: rgba(225,143,69,0.28); right: -160px; top: -120px; }
.deco--blob-navy { background: rgba(39,62,96,0.16); left: -200px; bottom: -160px; }
.deco--blob-sm { width: 360px; height: 360px; right: auto; left: -120px; top: 40px; }
.deco--grid {
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}
.section > .wrap { position: relative; z-index: 1; }

/* ---------- 7. SECTIONS SPÉCIFIQUES ---------- */
/* Problème */
.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pain__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-text); font-size: 20px; margin-bottom: 16px; }
.pain h3 { margin-bottom: 8px; font-size: 18px; }
.pain p { color: var(--muted); font-size: 15.5px; }

/* Solutions */
.section--solutions { background: var(--surface); }
.cap-list { border-top: 1px solid var(--line); }
.cap-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--line);
  transition: background-color 0.3s;
}
.cap-row__tag { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.cap-row .node {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);
  margin-right: 10px; vertical-align: middle; transform: scale(0.85);
  transition: background-color 0.5s, box-shadow 0.5s, transform 0.5s;
}
.cap-row.is-visible .node { background: var(--orange); box-shadow: 0 0 0 4px rgba(225,143,69,0.18); transform: scale(1); }
.cap-row h3 { margin-bottom: 6px; }
.cap-row p { color: var(--muted); font-size: 15.5px; max-width: 60ch; }
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.stack li { font-size: 13px; font-weight: 500; color: var(--navy-ink); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }

/* Méthode */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step__num { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--orange-text); margin-bottom: 14px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* À propos */
.section--about { background: var(--surface); }
.about { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 860px; }
/* Sans photo (fondateur anonyme), la fiche passe sous le texte en bandeau : pas de colonne vide à droite */
.about__text p { margin-top: 16px; color: var(--muted); font-size: 16.5px; }
.about__text h2 + p { margin-top: 20px; }
.about__points { margin-top: 28px; display: grid; gap: 12px; }
.about__points li { padding-left: 22px; position: relative; font-size: 15.5px; color: var(--muted); }
.about__points li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.about__points strong { color: var(--navy-ink); font-weight: 600; }
.about__card { padding: 18px; }
.about__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.about__facts div { display: grid; gap: 4px; align-content: start; font-size: 14.5px; }
.about__facts dt { color: var(--muted); }
.about__facts dd { color: var(--navy-ink); font-weight: 500; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 600; font-size: 17px; color: var(--navy-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--orange-text); font-weight: 500; transition: transform 0.3s, background-color 0.3s;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--orange-soft); }
.faq__item p { color: var(--muted); padding: 0 0 22px; max-width: 70ch; }

/* Contact (fond sombre + réseau sombre) */
.section--contact { background: var(--navy-deep); color: var(--on-dark); }
.section--contact h2 { color: #fff; }
.contact__network { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__lead { color: var(--on-dark-muted); font-size: 17px; margin-top: 16px; }
.contact__cta { margin-top: 32px; }
.contact__steps { list-style: none; counter-reset: step; display: grid; gap: 12px; color: var(--on-dark-muted); font-size: 15px; }
.contact__steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; align-items: baseline; }
/* Numéro façon repère de plan, en écho à l’arrière-plan « bus » de la section */
.contact__steps li::before { content: "0" counter(step); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--orange); }
.contact__small { margin-top: 14px; font-size: 14px; color: var(--on-dark-muted); }
.contact__small a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

.form { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5); }
.form__title { margin-bottom: 18px; }
.form__row { margin-bottom: 16px; }
.form__row label { display: block; font-size: 14px; font-weight: 600; color: var(--navy-ink); margin-bottom: 6px; }
.form__row label span { color: var(--orange-text); }
.form__row input, .form__row textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(39,62,96,0.15); }
.form__row.has-error input, .form__row.has-error textarea { border-color: #b3261e; }
.form__error { font-size: 13px; color: #b3261e; margin-top: 6px; min-height: 0; }
/* Légende de l'astérisque, indice sous le libellé (lié par aria-describedby) et compteur près de la limite */
.form__legend { margin: -8px 0 16px; font-size: 13px; color: var(--muted); }
.form__legend span { color: var(--orange-text); }
.form__hint { margin: -2px 0 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.form__count { margin-top: 6px; font-size: 12.5px; color: var(--muted); text-align: right; }
.form__count:empty { display: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 14px; font-size: 14.5px; font-weight: 500; color: var(--navy-ink); }
.form__status.is-error { color: #b3261e; }
.form__note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* ---------- 8. PIED DE PAGE ---------- */
.footer { background: #14213a; color: var(--on-dark-muted); padding: 48px 0 36px; font-size: 14px; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.footer__brand img { height: 20px; width: auto; margin-bottom: 14px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a:hover { color: #fff; }
.footer__legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; }

/* ---------- 9. REVEAL + PARALLAX + PROFILS ---------- */
/* Apparition : fondu + léger décalage vertical. Seulement si JS actif (sinon tout est visible). */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Éléments avec leur propre transform (cartes au survol) : on isole le reveal sur un état terminal sans transform */
.js .card[data-reveal].is-visible { transform: translate3d(0, 0, 0); }
.js .card[data-reveal].is-visible:hover { transform: translateY(-3px); }

/* Couches parallax : la valeur --sy est posée par main.js (rAF), rien d'autre ne bouge */
[data-parallax] { will-change: transform; }

/* Profil moyen : stagger plus court, décors flous plus légers */
html[data-perf="medium"] { --stagger: 60ms; --reveal-dur: 0.6s; }
html[data-perf="medium"] .deco--blob { filter: blur(50px); }
html[data-perf="medium"] .hero__beam { filter: blur(5px); }

/* Profil léger : fondus simples, aucun parallax, aucun flou coûteux, pas de rayons animés */
html[data-perf="lite"] { --stagger: 0ms; --reveal-dur: 0.45s; }
html[data-perf="lite"] [data-reveal] { transform: none; }
html[data-perf="lite"] [data-parallax], html[data-perf="lite"] .deco { transform: none; will-change: auto; }
html[data-perf="lite"] .deco--blob { filter: none; opacity: 0.25; }
html[data-perf="lite"] .hero__beam, html[data-perf="lite"] .dust { display: none; }
html[data-perf="lite"] .card:hover { transform: none; }
html[data-perf="lite"] .card::before { display: none; }

/* ---------- 10. ACCESSIBILITÉ ET RESPONSIVE ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none; transition: opacity 0.35s ease; transition-delay: 0s; }
  [data-parallax], .deco, .hero__bg, .hero__network { transform: none; will-change: auto; }
  .hero__beam, .dust, .scroll-cue::after { animation: none; }
  .hero__beam { opacity: 0.3; }
  .card, .card::before, .card::after, .btn, .nav, .faq__item summary::after { transition: none; }
  .card:hover { transform: none; }
}

/* Écrans peu hauts (laptops 768 px) : le titre et les CTA doivent rester au-dessus du pli */
@media (max-height: 820px) and (min-width: 769px) {
  .hero__spacer { height: 44vh; height: 44svh; }
  .hero__title { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 14px; }
  .hero__lead { font-size: 16px; margin-bottom: 22px; }
  .hero__content { padding-bottom: 48px; }
}

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablette : la colonne de texte occupe ~70 % de la largeur, le voile doit s'estomper plus loin (AA mesuré) */
  .hero__content::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 78%, transparent 96%),
                        linear-gradient(180deg, transparent 0, #000 56px);
            mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 78%, transparent 96%),
                        linear-gradient(180deg, transparent 0, #000 56px);
  }
}

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(245,244,241,0.98); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 18px;
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 0.25s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  .nav.is-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav.is-open { background: rgba(245,244,241,0.98); }
  .nav__menu a:not(.btn) { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin-top: 12px; }

  /* Mobile : photo zoomée (×1,2) pour que le mur commence juste sous la nav, sans bande de plafond vide ;
     logo à 26 % de la hauteur (logo-effect.js), le texte suit en dessous.
     Moins de parallax (facteurs réduits dans main.js), CTA pleine largeur accessible au pouce. */
  .hero__spacer { height: 31vh; height: 31svh; }
  .hero__title { font-size: clamp(28px, 8vw, 34px); }
  .hero__lead { font-size: 15.5px; margin-bottom: 22px; }
  .hero__scrim { background: linear-gradient(180deg, rgba(245,244,241,0.25) 0%, rgba(245,244,241,0) 14%, rgba(245,244,241,0) calc(100% - 120px), var(--bg) 100%); }
  /* Le texte occupe toute la largeur : voile sur toute la colonne, seule l'entrée par le haut reste fondue */
  .hero__content::before {
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px);
            mask-image: linear-gradient(180deg, transparent 0, #000 56px);
  }
  .hero__title br { display: none; }
  .hero__actions .btn { width: 100%; }
  .hero__hint { display: none; }
  .hero__bg {
    background-image: url("../assets/hero-mobile.jpg");
    background-image: image-set(url("../assets/hero-mobile.webp") type("image/webp"), url("../assets/hero-mobile.jpg") type("image/jpeg"));
    /* Profil léger : même cadrage que logo-effect.js (hauteur ×1,2, calée en bas ≈ mur sous la nav) ;
       le max() garantit la couverture en largeur sur les tablettes. 1.7787 = ratio 1672/940 de la photo. */
    background-size: auto max(120%, calc(100vw * 1.7787));
    background-position: center 97%;
  }
  /* Logo + capsule forment un bloc centré : 80 % de la largeur, 300 px max (même règle dans logo-effect.js) */
  .hero.is-static #logoOverlay { left: 50%; top: 26%; width: min(80vw, 300px); transform: translate(-50%, -50%); }
  /* Capsule centrée sous le logo, sur deux lignes (le « · » disparaît) : 12 px lisibles sans dépasser 300 px */
  .hero__content > .eyebrow {
    display: block; width: fit-content; max-width: min(80vw, 300px); margin: 0 auto 16px;
    text-align: center; font-size: 12px; letter-spacing: 0.08em; line-height: 1.45;
    padding: 5px 14px; border-radius: 12px;
  }
  .eyebrow__sep { display: none; }
  .eyebrow__part { display: block; }
  .contact { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .cap-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .steps { grid-template-columns: 1fr; }
  .deco--blob { width: 320px; height: 320px; }
}

@media (max-width: 400px) {
  .btn { padding: 13px 16px; }
  .card { padding: 22px; }
}

@media (min-width: 1600px) {
  :root { --wrap: 1240px; }
  .hero__title { font-size: 60px; }
}