/* ================================================================
   THE FRENCH BOOTH · style.css
   DA : minimal éditorial (réf. studios type Locomotive).
   Palette STRICTE : noir · blanc · bleu · rouge. Aucun doré.
   Rouge = CTA / star / actif fort. Bleu = liens, soulignés,
   accents structurels froids. Gris = uniquement rgba du blanc.
   Fluidité : on n'anime que transform & opacity.
   ================================================================ */

/* ----------------------------------------------------------------
   01 · TOKENS
   ---------------------------------------------------------------- */
:root {
  --noir:   #050505;
  --nuit:   #05070f;   /* bleu nuit profond · fondu de fond façon Fubiz */
  --blanc:  #FAFAF7;
  --bleu:   #0c27a4;   /* bleu client exact · surfaces, bordures, aplats */
  --rouge:  #d02618;   /* rouge client exact · CTA, badge star, actif fort */

  /* Teinte claire du bleu — MÊME teinte, éclaircie pour la lisibilité
     AA du texte/hover/liens sur fond noir (le #0c27a4 pur est trop
     sombre pour du petit texte). N'introduit aucune nouvelle couleur. */
  --bleu-clair: #3B57D9;

  /* Gris = rgba du blanc, jamais une couleur à part.
     Hiérarchie STRICTE à 4 niveaux (réf. thefrenchphotobooth.com :
     #ffffff / #aaaaaa / #888888 / #666666 transposés en rgba du blanc). */
  --t72: rgba(250, 250, 247, 0.68);  /* n2 · corps de texte, sous-titres */
  --t55: rgba(250, 250, 247, 0.53);  /* n3 · labels */
  --t30: rgba(250, 250, 247, 0.47);  /* n4 · notes secondaires (contraste AA ≥ 4.5:1) */
  --ligne: rgba(250, 250, 247, 0.08);/* séparateurs neutres */

  /* Alias sémantiques de la même échelle (lisibilité des nouveaux blocs) */
  --n1: var(--blanc);
  --n2: var(--t72);
  --n3: var(--t55);
  --n4: var(--t30);

  /* --- Système visuel réf. (accent = bleu client, jamais doré) ------
     L'or du site de référence est remplacé par le bleu structurel ;
     le rouge reste réservé aux CTA et badges d'urgence. */
  --accent-20:  rgba(59, 87, 217, 0.26);  /* bordures au repos */
  --accent-30:  rgba(59, 87, 217, 0.39);  /* bordures actives, séparateurs */
  --accent-h10: rgba(59, 87, 217, 0.13);  /* halo au repos */
  --accent-h20: rgba(59, 87, 217, 0.26);  /* halo au survol */
  --accent-h30: rgba(59, 87, 217, 0.39);  /* halo porté au survol */
  --rouge-20:   rgba(208, 38, 24, 0.20);
  --rouge-30:   rgba(208, 38, 24, 0.30);

  /* Fond de carte : dégradé diagonal 145°, palette stricte */
  --card-bg: linear-gradient(145deg, var(--nuit), var(--noir));
  /* Séparateur qui s'estompe aux extrémités */
  --sep-line: linear-gradient(90deg, transparent, var(--accent-30), transparent);

  /* Rayons */
  --r-card: 15px;
  --r-block: 12px;
  --r-pill: 50px;

  /* Durées d'interaction alignées sur la référence */
  --t-fast: 0.3s;
  --t-slow: 0.6s;

  /* Montserrat 900 UPPERCASE = titres, chiffres, boutons UNIQUEMENT.
     Inter = tout le reste. Great Vibes = accents script conservés. */
  --font-display: "Montserrat", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "Inter", sans-serif;   /* micro-typo utilitaire */
  --font-serif:   "Inter", sans-serif;   /* ex-Instrument Serif, cf. .serif */
  --font-script:  "Great Vibes", cursive;          /* wordmark du héros uniquement */

  --maxw: 1440px;
  --gutter: clamp(22px, 6vw, 120px);
  --section-pad: clamp(96px, 14vh, 200px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Ease signature de la passe Awwwards (miroir CSS du CustomEase "main") */
  --ease-main: cubic-bezier(0.625, 0.05, 0, 1);
}

/* ----------------------------------------------------------------
   02 · RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto; /* Lenis pilote le scroll */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;       /* 14px · corps réf. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none; /* pas de bounce iOS pendant le pin */
}

body.is-locked { overflow: hidden; height: 100vh; }

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

img, canvas, svg, video { display: block; max-width: 100%; }

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

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Feedback tactile instantané, zéro délai de 300 ms */
a, button { touch-action: manipulation; }

::selection { background: var(--bleu); color: var(--blanc); }

:focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: 4px; }

/* Scrollbar fine noir/blanc (webkit) */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: rgba(250, 250, 247, 0.2); }
::-webkit-scrollbar-thumb:hover { background: rgba(250, 250, 247, 0.35); }

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--noir);
  border: 1px solid var(--blanc);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

/* ----------------------------------------------------------------
   03 · TYPO PARTAGÉE (minimale : titres contenus, labels espacés)
   ---------------------------------------------------------------- */
/* EYEBROW · Inter 900, 12px, uppercase, letter-spacing 3px (réf.) */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;           /* 12px */
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bleu-clair);     /* touche Frenchy : eyebrows en bleu */
}

/* H2 DE SECTION · Montserrat 900 uppercase ~37px (réf.) */
.title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.1vw, 2.34rem);  /* 37.4px desktop */
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  margin-top: 26px;
  max-width: 22ch;
}
.title--sm { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

/* Ex-italique premium (Instrument Serif retiré) : rôle conservé —
   contraste doux, casse normale, face à du Montserrat 900 capitales. */
.serif {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.txt-bleu { color: var(--blanc); }
.txt-rouge { color: var(--rouge); }
.sep { color: var(--t30); }

/* Titre bicolore : 2e ligne d'un h1/h2 dans la couleur d'accent.
   Chez la référence c'est crème/or — chez nous blanc puis bleu clair. */
.txt-accent { color: var(--bleu-clair); }

/* Accent script officiel des ruptures : un mot par section clé,
   légèrement plus grand que le titre, blanc ou bleu clair. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  /* Great Vibes a une hauteur d'x très basse : à taille égale le mot
     paraît deux fois plus petit que les capitales Montserrat d'à côté.
     1.52em ramène ses lettres à la hauteur optique des capitales, et la
     ligne de base remonte de 0.1em pour aligner les milieux de mots. */
  font-size: 1.52em;
  line-height: 0.62;
  vertical-align: 0.1em;
  padding-inline: 0.04em;
}
.script--bleu { color: var(--bleu-clair); }

/* Lignes masquées pour le reveal au scroll.
   Le padding/margin compense les jambages de la script Great Vibes
   (sinon l'overflow:hidden les tronque) — visuellement neutre. */
.line { display: block; overflow: hidden; padding: 0.16em 0; margin: -0.16em 0; }
/* Seules les lignes qui portent un mot script ont besoin d'un masque
   élargi : Great Vibes agrandie déborde largement de la hauteur de ligne
   du titre. Padding et marge se compensent : aucun décalage de mise en
   page, seule la fenêtre de découpe s'élargit. */
.line:has(.script) { padding: 0.46em 0; margin: -0.46em 0; }
.line__inner { display: block; }

/* ----------------------------------------------------------------
   05 · HOVER ROLL (label glisse vers le haut, son double monte)
   Un seul pattern de hover partout · transform only
   ---------------------------------------------------------------- */
.roll {
  display: inline-flex;
  flex-direction: column;
  position: relative;   /* devient le bloc conteneur du double abs → overflow le clippe */
  overflow: hidden;
  vertical-align: bottom;
}
.roll__in {
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.roll__in--dup { position: absolute; top: 100%; left: 0; }/* double posé juste sous le premier */
.has-roll:hover .roll__in { transform: translateY(-100%); }
.has-roll:hover .roll__in { will-change: transform; }

/* ----------------------------------------------------------------
   06 · BOUTONS (petits, sans ombre, angles vifs unifiés)
   ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.75rem;           /* 12px */
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              color 0.4s var(--ease-out);
}
.btn:active { transform: scale(0.98); }

/* Hover directionnel : le voile entre du côté d'où arrive la souris
   (classe .enter-right posée en JS) — transform/opacity only. */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-main);
}
.btn.enter-right::before { transform: translateX(101%); }
.btn > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.btn:hover::before { transform: translateX(0); }
}

.btn--rouge { background: var(--rouge); color: var(--blanc); }
.btn--rouge::before { background: rgba(250, 250, 247, 0.14); }

.btn--ghost { border-color: rgba(250, 250, 247, 0.4); color: var(--blanc); }
.btn--ghost::before { background: rgba(59, 87, 217, 0.14); }/* voile, jamais un aplat bleu près du rouge */
.btn--ghost:hover { border-color: var(--bleu-clair); }

.btn--nav { padding: 11px 20px; }

/* ----------------------------------------------------------------
   07 · LOADER · MATCH-CUT
   ---------------------------------------------------------------- */
#loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.loader__bg { position: absolute; inset: 0; overflow: hidden; background: var(--card-bg); }

/* Halos bleus dérivés du fond vivant du site (mêmes teintes --bleu /
   --bleu-clair). Enfants de .loader__bg : ils héritent du même masque
   iris que le JS applique à .loader__bg, donc le match-cut n'est
   jamais gêné par leur présence. */
.loader__halo {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}
.loader__halo--a {
  top: -14%; left: -16%;
  background: radial-gradient(circle, rgba(59, 87, 217, 0.55) 0%, rgba(59, 87, 217, 0.16) 42%, rgba(59, 87, 217, 0) 72%);
  animation: loaderHaloA 12s ease-in-out infinite;
}
.loader__halo--b {
  bottom: -18%; right: -12%;
  background: radial-gradient(circle, rgba(12, 39, 164, 0.5) 0%, rgba(12, 39, 164, 0.16) 42%, rgba(12, 39, 164, 0) 72%);
  animation: loaderHaloB 15s ease-in-out infinite;
}
@keyframes loaderHaloA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }
  50%      { transform: translate3d(3%, 4%, 0) scale(1.15); opacity: 0.9; }
}
@keyframes loaderHaloB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.5; }
  50%      { transform: translate3d(-4%, -3%, 0) scale(0.95); opacity: 0.8; }
}

.loader__center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.loader__lens { will-change: transform; opacity: 0; }

.lens__ring {
  stroke: var(--blanc); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(1 + var(--p, 0) * 0.06));
  transition: transform 0.2s linear;
}
.lens__dot { fill: var(--blanc); }
.lens__arc { stroke: rgba(250, 250, 247, 0.55); stroke-width: 1.2; }
.lens__arc--outer {
  stroke: rgba(250, 250, 247, 0.22);
  transform-box: fill-box; transform-origin: center;
  animation: loaderArcSpin 40s linear infinite;
}
.lens__arc--outer:nth-of-type(4) { animation-direction: reverse; animation-duration: 46s; }
@keyframes loaderArcSpin { to { transform: rotate(360deg); } }

.loader__meta { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader__name {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blanc);
  padding-left: 0.4em;
}
.loader__logo-wrap { position: relative; overflow: hidden; opacity: 0; }
.loader__logo { display: block; width: clamp(150px, 22vw, 210px); height: auto; }
.loader__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(250, 250, 247, 0.5) 50%, rgba(94, 120, 236, 0.35) 56%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
.loader__tagline {
  opacity: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--t72);
  max-width: 280px;
}
.loader__tagline-accent { color: var(--bleu-clair); }

.loader__progress { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; }
.loader__bar { position: relative; width: 180px; height: 1px; background: rgba(250, 250, 247, 0.15); overflow: visible; }
.loader__bar-fill {
  display: block; height: 100%; width: 100%;
  background: var(--blanc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
.loader__bar-glow {
  position: absolute; top: 50%; right: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bleu-clair);
  box-shadow: 0 0 8px 2px rgba(94, 120, 236, 0.7);
  transform: translate(50%, -50%);
}
.loader__pct {
  display: flex; align-items: baseline; gap: 5px;
  color: var(--blanc);
}
.loader__pct-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.loader__pct-sign {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--t55);
}
.loader__pct-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t55);
  margin-left: 6px;
}

/* ----------------------------------------------------------------
   08 · NAVIGATION
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), padding 0.45s var(--ease-out);
}
/* État discret pendant le héros de l'accueil : fond transparent.
   La nav reste toujours affichée ; seul son habillage change. */
.nav--hero {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 20px; padding-bottom: 20px;
}
/* Voile dégradé pour garder les liens blancs lisibles sur le héros clair */
.nav--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0));
}
.nav__logo { display: flex; align-items: center; font-size: 0.95rem; }
.nav__logo-img { height: 34px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav__links a { white-space: nowrap; }
.nav__links a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blanc);
  padding: 6px 0;
  position: relative;
}
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bleu-clair);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}
.nav__links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  align-items: center;
}
.nav__burger span {
  display: block; width: 26px; height: 1.5px;
  background: var(--blanc);
  transition: transform 0.45s var(--ease-out);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* Menu mobile plein écran */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(180deg, var(--nuit), var(--noir));
  display: grid; align-items: center;
  padding: 0 var(--gutter);
  visibility: hidden; opacity: 0;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease-out); }
.menu__inner { display: flex; flex-direction: column; gap: clamp(10px, 2.4vh, 22px); }
.menu__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 8vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: flex; align-items: baseline; gap: 18px;
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), color 0.4s var(--ease-out);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.10s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.17s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.24s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.31s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0.38s; }
.menu.is-open .menu__link:nth-child(6) { transition-delay: 0.45s; }
.menu__link:hover { color: var(--bleu-clair); }
.menu__link--rouge { color: var(--rouge); }
.menu__link--rouge:hover { color: var(--rouge); opacity: 0.85; }
.menu__num { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; color: var(--t55); }
/* Lien secondaire du menu mobile : ouvre la modal marque */
.menu__about {
  margin-top: clamp(14px, 3vh, 26px);
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t55);
  width: fit-content;
  border-bottom: 1px solid rgba(59, 87, 217, 0.45);
  padding-bottom: 3px;
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out) 0.5s, transform 0.7s var(--ease-out) 0.5s, color 0.4s var(--ease-out);
}
.menu.is-open .menu__about { opacity: 1; transform: none; }
.menu__about:hover { color: var(--bleu-clair); }
.menu__link[aria-current="page"] .menu__num { color: var(--bleu-clair); }

/* ----------------------------------------------------------------
   09 · HÉROS (inchangé dans son fonctionnement ; typo un peu réduite)
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--noir);
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform-origin: center center;
  will-change: transform;
}
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0) 24%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0) 28%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5, 5, 5, 0.28), transparent 75%);
}
.hero__ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
  opacity: 0; visibility: hidden;
}
.hero__ov--final { pointer-events: none; }
.hero__ov--final .btn { pointer-events: auto; }
.hero__ov--final::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 62% 55% at 50% 50%, rgba(5, 5, 5, 0.55), transparent 72%);
}
.hero__ov .eyebrow { margin-bottom: 24px; color: var(--blanc); opacity: 0.9; text-shadow: 0 1px 12px rgba(5, 5, 5, 0.8); }

/* H1 HÉROS · Montserrat 900 uppercase, 46.8px desktop, lh 1.1 (réf.) */
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 2.925rem);  /* 46.8px desktop · ≤32px mobile */
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(5, 5, 5, 0.6);
  max-width: 20ch;
}
.hero__title--md { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }

/* Libellé d'offre par scène · Montserrat 900, un seul à la fois */
.hero__offer {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 3px 30px rgba(5, 5, 5, 0.7);
}
.hero__offer-sub {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;          /* 18px · sous-titre héros réf. */
  line-height: 1.7;
  color: var(--t72);
  text-shadow: 0 2px 18px rgba(5, 5, 5, 0.85);
}
/* Logo de l'extro · reveal doux (fade + léger scale, piloté en JS) */
.hero__logo {
  width: clamp(210px, 30vw, 380px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 6px 42px rgba(5, 5, 5, 0.75));
}

.hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;          /* 18px · sous-titre héros réf. */
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.9);
  margin: 26px 0 34px;
  text-shadow: 0 2px 16px rgba(5, 5, 5, 0.8);
}

/* Scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
}
.hero__cue-label {
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(250, 250, 247, 0.75); padding-left: 0.4em;
}
.hero__cue-line {
  width: 1px; height: 50px;
  background: linear-gradient(180deg, var(--blanc), transparent);
  transform-origin: top center;
  animation: cue-pulse 2.2s var(--ease-out) infinite;
}
@keyframes cue-pulse {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Compteur de frames · signature technique éditoriale */
.hero__counter {
  position: absolute;
  right: var(--gutter); bottom: 30px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: rgba(250, 250, 247, 0.7);
  opacity: 0;
}
.hero__counter-num { color: var(--blanc); font-variant-numeric: tabular-nums; }
.hero__counter-sep, .hero__counter-total { color: rgba(250, 250, 247, 0.45); }
.hero__counter-bar {
  width: 64px; height: 1px; margin-left: 6px;
  background: rgba(250, 250, 247, 0.18); overflow: hidden;
}
.hero__counter-fill {
  display: block; height: 100%; width: 100%;
  background: var(--blanc);
  transform: scaleX(0); transform-origin: left center;
}
@media (max-width: 640px) {.hero__counter { display: none; } }

/* ----------------------------------------------------------------
   10 · INDICATEUR DE SECTION GLOBAL (fixe, droite, desktop)
   ---------------------------------------------------------------- */
.sindex {
  position: fixed;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.sindex.is-visible { opacity: 1; }
.sindex__num {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--t55); font-variant-numeric: tabular-nums;
}
.sindex__track { position: relative; width: 1px; height: 120px; background: rgba(250, 250, 247, 0.14); }
.sindex__dot {
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--bleu-clair); border-radius: 50%;
}
@media (max-width: 1100px) {.sindex { display: none; } }

/* ----------------------------------------------------------------
   11 · SECTIONS COMMUNES + séparateurs numérotés
   ---------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--section-pad) 0;
  /* Pas d'aplat propre : le canvas .fond-vivant fournit le noir + les halos. */
  border-top: 1px solid var(--ligne);
  scroll-margin-top: 70px;
}
.section--slim { padding: clamp(70px, 9vh, 120px) 0; }

/* Numéro de section posé SUR la ligne, aligné au contenu.
   Fond deux tons : noir au-dessus de la ligne (pied de la section
   précédente), bleu nuit en dessous (tête de la section courante). */
.section__index {
  position: absolute;
  top: 0;
  /* Aligné sur le bord gauche du CONTENU, pas sur la gouttière : au-delà
     de 1680px le .container est centré, le numéro dérivait de 120 px vers
     la gauche (décalage signalé par le client en desktop large). */
  left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--noir) 50%, var(--nuit) 50%);
  padding-right: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.2em;
  color: var(--bleu-clair); font-variant-numeric: tabular-nums;
  /* Toujours au-dessus des visuels de la section (boucles de fond,
     collages, cadres) qui pouvaient venir le recouvrir ou le couper. */
  z-index: 4;
}

/* ----------------------------------------------------------------
   12 · CONCEPT (composition asymétrique calme, grille 12 col)
   ---------------------------------------------------------------- */
.concept .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: 8px;
}
.concept .eyebrow { grid-column: 1 / -1; }
.concept .title { grid-column: 1 / span 8; max-width: none; }
.concept__text {
  grid-column: 1 / span 7;
  margin-top: clamp(30px, 5vh, 56px);
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--t72);
}
.concept__tags {
  grid-column: 1 / span 7;
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin-top: 34px;
}
.concept__tags li {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t55);
  border: 1px solid var(--ligne);
  padding: 9px 15px;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.concept__tags li:hover { color: var(--bleu-clair); border-color: rgba(59, 87, 217, 0.4); }

/* Visuel unique : sous le texte en mobile, en colonne droite dès 861px */
.collage {
  grid-column: 1 / -1;
  margin-top: clamp(32px, 5vh, 56px);
}
.collage__item {
  overflow: hidden;
  border: 1px solid var(--ligne);
  background: #0A0A0A;
  aspect-ratio: 4 / 3;
  max-width: 640px;
  margin-inline: auto;
}
.collage__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 861px) {
.concept .eyebrow { grid-row: 1; }
.concept .title   { grid-column: 1 / span 7; grid-row: 2; }
.concept__text    { grid-column: 1 / span 6; grid-row: 3; }
.concept__tags    { grid-column: 1 / span 6; grid-row: 4; }
.collage {
  grid-column: 8 / -1; grid-row: 1 / 5;
  margin-top: 0;
  align-self: stretch;
}
.collage__item { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
}

@media (max-width: 860px) {
.concept .title, .concept__text, .concept__tags { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------
   13 · EXPÉRIENCES · cartes portails
   ---------------------------------------------------------------- */
.exp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(50px, 7vh, 90px);
}
.exp-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--ligne);
  background: rgba(250, 250, 247, 0.015);
  transition: transform 0.6s var(--ease-main), border-color 0.6s var(--ease-main);
}
.exp-card:hover { transform: translateY(-6px); border-color: rgba(250, 250, 247, 0.2); }

/* Sheen directionnel des cartes (côté d'entrée de la souris, via JS).
   Invisible au repos via opacity : aucun overflow:hidden requis
   (les flags des cartes tarif dépassent du cadre). */
.card-sheen::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(59, 87, 217, 0.07), rgba(59, 87, 217, 0) 55%);
  transform: translateX(-40%);
  transition: transform 0.7s var(--ease-main), opacity 0.45s var(--ease-main);
}
.card-sheen.enter-right::after {
  background: linear-gradient(260deg, rgba(59, 87, 217, 0.07), rgba(59, 87, 217, 0) 55%);
  transform: translateX(40%);
}
@media (hover: hover) and (pointer: fine) {
.card-sheen:hover::after { transform: translateX(0); opacity: 1; }
}

/* Cadre plein cadre (réf. elicyon.com) : photo de fond, overlay en bas */
.exp-card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0A0A0A;
}
.exp-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-main);
}
/* Scrim dégradé pour la lisibilité du titre en overlay */
.exp-card__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.10) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0.30) 58%, rgba(5,5,5,0.82) 100%);
}
@media (hover: hover) and (pointer: fine) {
.exp-card:hover .exp-card__img { transform: scale(1.05); }
}

.exp-card__badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blanc);
  background: var(--rouge);
  padding: 6px 12px;
}

/* Overlay texte posé au bas du cadre */
.exp-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
}
.exp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.exp-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.95;
  color: var(--blanc);
  text-shadow: 0 2px 20px rgba(5,5,5,0.5);
}
.exp-card__price {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250, 250, 247, 0.75); white-space: nowrap;
}
.exp-card__desc { color: rgba(250, 250, 247, 0.82); font-size: 0.92rem; }
.exp-card__cta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanc);
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  position: relative;
}
/* Soulignement animé du CTA (réf. elicyon : scaleX origin gauche) */
.exp-card__cta::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--bleu-clair);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-main);
}
.exp-card:hover .exp-card__cta::after { transform: scaleX(1); }
.exp-card__arrow { display: inline-block; transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out); }
.exp-card:hover .exp-card__arrow { transform: translateX(8px); color: var(--bleu-clair); }
/* Tags sous l'image, micro-typo */
.exp-card > .tagline { padding: 16px clamp(4px, 1vw, 10px) 2px; }

/* ---- Pack sur mesure (accueil) · bloc paysage plein largeur,
   ferme la section « Nos expériences » --------------------------- */
.exp-card--custom {
  margin-top: clamp(20px, 3vw, 28px);
}
.exp-card--custom .exp-card__frame { aspect-ratio: 21 / 9; }
@media (max-width: 700px) {
.exp-card--custom .exp-card__frame { aspect-ratio: 4 / 3; }
}

/* ----------------------------------------------------------------
   15 · CHIFFRES CLÉS
   ---------------------------------------------------------------- */
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(40px, 4vw, 60px); }
.stat { display: flex; flex-direction: column; gap: 14px; }
.stat__value {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat__value--txt { color: var(--blanc); text-transform: uppercase; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55);
}

/* ----------------------------------------------------------------
   18 · MARQUEE (translate piloté en JS ; ralenti progressif au hover)
   ---------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding: clamp(48px, 6vh, 84px) 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__list {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 3.8rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 250, 247, 0.3);
  padding-right: 0.5em;
}
.marquee__list i { font-style: normal; -webkit-text-stroke: 0; color: var(--t55); }

/* ----------------------------------------------------------------
   19 · AVIS CLIENTS
   ---------------------------------------------------------------- */
.avis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(50px, 7vh, 90px); }
.avis-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 2.4vw, 38px); border: 1px solid var(--ligne); background: rgba(250, 250, 247, 0.015); }
.avis-card__note { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--t55); }
.avis-card__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; color: var(--blanc); }
.avis-card__author { margin-top: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t55); }
.avis__award {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(48px, 6vh, 76px);
  padding: 13px 24px;
  border: 1px solid rgba(250, 250, 247, 0.22);
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blanc);
}
.avis__award::before { content: ""; width: 6px; height: 6px; background: var(--blanc); border-radius: 50%; }

/* ----------------------------------------------------------------
   20 · CLIENTS PRO
   ---------------------------------------------------------------- */
.logos { border-top: 1px solid var(--ligne); }
.logos__intro { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t55); text-align: center; margin-bottom: clamp(34px, 5vh, 54px); }

/* ----------------------------------------------------------------
   21 · FAQ · accordéon
   ---------------------------------------------------------------- */
/* Mise en page éditoriale FAQ (réf. elicyon.com) : liste + image
   changeante. La liste garde son style ; la grille gère la respiration. */
.faq__grid {
  margin-top: clamp(48px, 6vh, 76px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 72px);
  /* Stretch : la colonne image épouse exactement la hauteur de la liste
     de questions (qui varie selon le nombre de questions ouvertes),
     jamais de zone noire qui dépasse en bas de l'une ou l'autre. */
  align-items: stretch;
}
/* Liste seule (page contact) : garde sa marge et son filet.
   Dans la grille de l'accueil, la grille gère la respiration. */
.faq__list { margin-top: clamp(48px, 6vh, 76px); border-top: 1px solid var(--ligne); max-width: 900px; }
.faq__grid .faq__list { margin-top: 0; max-width: none; }
/* Image de droite qui change selon la question ouverte (crossfade) */
.faq__media {
  position: sticky; top: clamp(90px, 14vh, 140px);
  min-height: 420px;
  border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden;
}
.faq__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.7s var(--ease-main), transform 6s var(--ease-out);
  transform: scale(1.04);
}
.faq__img.is-active { opacity: 1; transform: scale(1); }
.faq__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.0) 55%, rgba(5,5,5,0.5) 100%),
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(5,5,5,0), rgba(5,5,5,0.3) 100%);
}
@media (max-width: 860px) {
.faq__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
.faq__media { position: relative; top: 0; min-height: 0; aspect-ratio: 16 / 10; order: -1; max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
.faq__img { transition: opacity 0.3s var(--ease-out); transform: none; }
.faq__img.is-active { transform: none; }
}
.faq-item { border-bottom: 1px solid var(--ligne); }
.faq-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 25px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--blanc);
  transition: color 0.4s var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.faq-item__q:hover { color: var(--bleu-clair); }
.faq-item__q:active { opacity: 0.65; }
.faq-item__icon {
  flex: none; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: var(--bleu-clair);
  transition: transform 0.45s var(--ease-out);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease-out); }
.faq-item__panel > p { overflow: hidden; min-height: 0; margin: 0; padding: 0 4px; max-width: 40em; color: var(--t72); font-size: 0.95rem; line-height: 1.7; }
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__panel > p { padding-bottom: 26px; }

/* ----------------------------------------------------------------
   22 · CTA FINAL
   ---------------------------------------------------------------- */
.cta {
  position: relative; min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--section-pad) 0;
  /* Fondu Fubiz (jamais un aplat noir plat) : nuit → noir + halo bleu.
     Évite le « grand écran noir » perçu en fin de page. */
  background: linear-gradient(180deg, var(--nuit) 0%, var(--noir) 60%);
  overflow: hidden;
  border-top: 1px solid var(--ligne);
}
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(8, 28, 84, 0.10), transparent 70%);
}
.cta__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase;
}
/* Énoncé signature de l'accueil (repassé en Montserrat 900 · cf. passe 14) */
.cta__title--statement {
  font-family: var(--font-serif);
  font-weight: 400; font-style: italic;
  text-transform: none; letter-spacing: 0;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
}
.cta__sub { margin-top: 28px; font-size: 1rem; color: var(--t72); }
.cta__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: clamp(38px, 5vh, 56px); }
.cta__contact { margin-top: clamp(42px, 6vh, 66px); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--t55); }
.cta__contact a { transition: color 0.4s var(--ease-out); }
.cta__contact a:hover { color: var(--bleu-clair); }
.cta__contact .sep { color: var(--t30); }

/* ----------------------------------------------------------------
   23 · FOOTER ÉDITORIAL
   ---------------------------------------------------------------- */
.footer { border-top: 1px solid var(--ligne); padding-top: clamp(64px, 8vh, 100px); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(50px, 7vh, 80px);
}
.footer__logo { display: block; width: clamp(140px, 15vw, 176px); height: auto; }
.footer__tagline { margin-top: 18px; color: var(--t55); font-size: 0.92rem; line-height: 1.7; }
.footer__cols-inner { display: contents; }
.footer__col { display: flex; flex-direction: column; gap: 13px; }
.footer__col-title { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t55); margin-bottom: 8px; }
.footer__col a { font-size: 0.9rem; color: var(--t72); transition: color 0.4s var(--ease-out); width: fit-content; }
.footer__col a:hover { color: var(--bleu-clair); }

.footer__meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__clock, .footer__dispo {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55); font-variant-numeric: tabular-nums;
}
.footer__tel {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--blanc); transition: color 0.4s var(--ease-out);
}
.footer__tel:hover { color: var(--bleu-clair); }
.footer__dispo { display: inline-flex; align-items: center; gap: 9px; }
.footer__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu-clair); animation: dispo-pulse 2s var(--ease-out) infinite; }
@keyframes dispo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Wordmark géant pleine largeur (outline) */
.footer__giant {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 8vw, 7.6rem);
  line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 250, 247, 0.42);
  padding: clamp(20px, 4vh, 50px) 0 0;
  white-space: nowrap; overflow: hidden;
}

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--ligne);
  padding-top: 24px; padding-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55);
}

/* ----------------------------------------------------------------
   24 · CURSEUR CUSTOM (desktop pointer fine)
   ---------------------------------------------------------------- */
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
.cursor { display: none; position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; }
html.has-cursor .cursor { display: block; }
/* translate3d (posé en JS) promeut déjà ces couches : pas de will-change persistant */
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; }
.cursor__dot { width: 6px; height: 6px; background: var(--blanc); margin: -3px 0 0 -3px; transition: opacity 0.3s var(--ease-out); }
.cursor__ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid rgba(250, 250, 247, 0.45);
  display: grid; place-items: center;
  /* transform posé en JS à chaque frame (translate3d + scale, lerp) : pas de
     transition CSS dessus, elle se battrait avec le lerp. */
  transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cursor__label {
  font-family: var(--font-mono); font-size: 0.54rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blanc); opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.cursor__label--ext { position: absolute; font-size: 0.8rem; letter-spacing: 0; }
.cursor.is-hover .cursor__ring { border-color: var(--bleu-clair); }
.cursor.is-ext .cursor__ring { border-color: var(--bleu-clair); }
.cursor.is-ext .cursor__label--ext { opacity: 1; color: var(--bleu-clair); }
.cursor.is-ext .cursor__dot { opacity: 0; }
.cursor.is-drag .cursor__ring { background: var(--bleu); border-color: var(--bleu); }
.cursor.is-drag .cursor__label { opacity: 1; }
.cursor.is-drag .cursor__dot { opacity: 0; }

/* ----------------------------------------------------------------
   24b · FOND VIVANT · canvas fixe derrière tout le contenu
   Peint par fond-vivant.js (halos --bleu / --bleu-clair en dérive lente).
   Les sections génériques n'ont plus leur propre aplat pour le laisser
   transparaître ; galerie spotlight, CTA à photo, blocs rouges, héros à
   frames et loader gardent leur fond propre et le recouvrent.
   ---------------------------------------------------------------- */
.fond-vivant {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: var(--noir);
}

/* ----------------------------------------------------------------
   25 · GRAIN FILM GLOBAL
   ---------------------------------------------------------------- */
.grain {
  /* inset volontairement PETIT : le grain-shift ne translate que de ±2 %,
     donc une marge de 8 % suffit. Un -60 % (grain 220 % de son bloc
     conteneur) gonflait scrollHeight si un ancêtre portait un transform. */
  position: fixed; inset: -8%; z-index: 350; pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, 2%); } 100% { transform: translate(0, 0); }
}

/* ----------------------------------------------------------------
   26 · PERFORMANCE · content-visibility (retiré)
   content-visibility:auto a été retiré du footer : sur un scroll long,
   le rendu différé pouvait laisser une zone non peinte (perçue comme un
   écran noir) le temps que le navigateur peigne la grande surface du
   footer (wordmark géant en text-stroke). Rendu garanti > micro-gain.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   27 · REVEAL D'IMAGES (clip-path, one-shot, posé par JS)
   Fail-safe : l'état masqué n'est appliqué QUE lorsque le JS « arme »
   l'élément (.is-armed). Sans JS, ou si un reveal ne se déclenche pas,
   l'image reste visible (jamais de cadre noir).
   ---------------------------------------------------------------- */
[data-reveal].is-armed { clip-path: inset(0 0 100% 0); }

/* ----------------------------------------------------------------
   27b · PASSE FRENCHY & AWWWARDS · nouveaux composants
   ---------------------------------------------------------------- */

/* Halo lumineux qui suit le curseur (desktop only, --mx/--my en JS).
   Voile additif ultra-subtil au-dessus des fonds sombres. */
.cursor-glow {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 38%),
              rgba(70, 112, 214, 0.05), transparent 65%);
}
.cursor-glow.is-visible { opacity: 1; }
@media (max-width: 900px), (pointer: coarse) {.cursor-glow { display: none; } }

/* CTA discret de fin de section produit */
.section-cta { margin-top: clamp(38px, 5vh, 60px); }

/* Bandeau sticky mobile des pages produits (fond solide : pas de
   backdrop-filter sur tactile, cf. règles perf) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 7, 15, 0.94);
  border-top: 1px solid var(--ligne);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-main);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__tel {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--blanc); white-space: nowrap;
}
.sticky-cta .btn { padding: 11px 18px; font-size: 0.66rem; letter-spacing: 1.4px; white-space: nowrap; }
/* Petits écrans : le libellé complet et le numéro ne tiennent pas côte à
   côte — le numéro se réduit, le bouton garde la priorité. */
@media (max-width: 420px) {
  .sticky-cta { gap: 10px; padding-inline: 16px; }
  .sticky-cta__tel { font-size: 0.68rem; letter-spacing: 0.04em; }
  .sticky-cta .btn { padding: 11px 14px; font-size: 0.6rem; letter-spacing: 1px; }
}
@media (max-width: 900px) {.sticky-cta { display: flex; } }

/* ----------------------------------------------------------------
   28 · RESPONSIVE · 320 → 2560
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
.exp-grid, .avis-grid { grid-template-columns: 1fr 1fr; }
.stats__grid { grid-template-columns: 1fr 1fr; gap: 50px 40px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
.nav__links { display: none; }
.nav__burger { display: flex; }
}
@media (max-width: 700px) {
.exp-grid, .avis-grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.cta__actions { flex-direction: column; width: 100%; }
.cta__actions .btn { width: 100%; text-align: center; }
}
@media (max-width: 460px) {
.stats__grid { grid-template-columns: 1fr; }
}
/* Montserrat 900 capitales prend plus de largeur : plafonds mobile
   resserrés (h1 ≤ 32px = 2rem) pour qu'aucun titre ne déborde. */
@media (max-width: 768px) {
.title { font-size: clamp(1.4rem, 5.6vw, 1.85rem); }
.title--sm { font-size: clamp(1.3rem, 5.2vw, 1.75rem); }
.ihero__title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
.cta__title { font-size: clamp(1.45rem, 5.8vw, 1.9rem); }
.cta__title--statement { font-size: clamp(1.5rem, 6vw, 2rem); }
.hero__title { font-size: clamp(1.4rem, 6vw, 2rem); }
.hero__title--md { font-size: clamp(1.3rem, 5.4vw, 1.8rem); }
.hero__offer { font-size: clamp(1.3rem, 6.4vw, 2rem); }
.hero__offer-sub, .hero__tagline { font-size: 1rem; }
.merci__title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
.footer__giant { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}
@media (min-width: 1960px) {
:root { --maxw: 1680px; }
body { font-size: 1.06rem; }
}

/* ----------------------------------------------------------------
   29 · REDUCED MOTION / MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {.grain { display: none; } }

@media (prefers-reduced-motion: reduce) {
.marquee__track { transform: none !important; }
.hero__cue-line { animation: none; opacity: 0.6; }
.footer__dot { animation: none; }
.menu, .menu__link, .btn, .exp-card, .exp-card__arrow, .nav__links a:not(.btn)::after, .roll__in { transition: none; }
.grain, .cursor, .cursor-glow { display: none !important; }
[data-reveal] { clip-path: none; }
.btn::before, .card-sheen::after { transition: none; }
}

.reduced #loader { display: none; }
.reduced body, body.reduced-unlock { overflow: auto; height: auto; }
.reduced .nav { transform: none; opacity: 1; visibility: visible; }
.reduced .hero { height: 100vh; height: 100dvh; }
.reduced .hero__ov { opacity: 0; visibility: hidden; }
.reduced .hero__ov--final { opacity: 1; visibility: visible; }
.reduced .hero__cue, .reduced .hero__counter, .reduced .sindex { display: none; }
.reduced .line__inner { transform: none !important; }
.reduced .grain, .reduced .cursor, .reduced .cursor-glow { display: none !important; }
.reduced [data-reveal] { clip-path: none; }

/* ================================================================
   30 · PAGES INTÉRIEURES
   ================================================================ */

/* ---- Transition de page (fade-in au chargement, fade-out au clic) ---
   IMPORTANT : on n'anime QUE l'opacité sur <body>. Animer un transform
   sur le body (même vers `none`) laisse une matrice identité en valeur
   calculée, ce qui fait du body un BLOC CONTENEUR pour les éléments
   `position: fixed` (le grain) → leur `inset` en % se résout contre la
   hauteur de page et non le viewport → scrollHeight gonflé = zone morte. */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.page-interior { animation: page-in 0.4s var(--ease-out) both; }
body.is-leaving { opacity: 0; transition: opacity 0.25s var(--ease-out); animation: none; }
@media (prefers-reduced-motion: reduce) {
.page-interior { animation: none; }
body.is-leaving { transition: none; }
}

/* Nav visible d'emblée sur les pages intérieures (pas de héros pinné) */
.page-interior .nav { transform: none; opacity: 1; visibility: visible; }

/* ---- Héros de page intérieure --------------------------------- */
.ihero {
  position: relative;
  min-height: 66vh; min-height: 66dvh;
  padding: clamp(160px, 26vh, 320px) 0 clamp(70px, 10vh, 120px);
  overflow: hidden;
}
.ihero__inner { position: relative; max-width: 62rem; }
.ihero .eyebrow { margin-bottom: 26px; }
.ihero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 12px; color: var(--blanc);
}
.ihero__badge--bleu { background: var(--bleu); }
.ihero__badge--rouge { background: var(--rouge); }
.ihero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 5.9vw, 5.7rem);
  line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase;
}
.ihero__sub {
  margin-top: 26px; max-width: 34em;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--t72);
}
.ihero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: clamp(34px, 4vh, 50px); }

/* ---- Bloc "à propos" + badges mono ---------------------------- */
.about .container { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 30px); row-gap: 8px; }
.about .eyebrow { grid-column: 1 / -1; }
.about__title { grid-column: 1 / span 7; }
.about__text { grid-column: 6 / span 7; margin-top: clamp(28px, 4vh, 50px); max-width: 34em; font-size: 1rem; line-height: 1.75; color: var(--t72); }
.about__text p + p { margin-top: 1.1em; }
.badges { grid-column: 6 / span 7; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; list-style: none; }
.badges li {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55); border: 1px solid var(--ligne); padding: 9px 15px;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.badges li:hover { color: var(--bleu-clair); border-color: rgba(59, 87, 217, 0.4); }
@media (max-width: 860px) {
.about__title, .about__text, .badges { grid-column: 1 / -1; }
}

/* ---- Formules / tarifs (3 cartes, milieu mise en avant) ------- */
.tarifs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(50px, 7vh, 90px); align-items: stretch; }
.tarif {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 2.6vw, 42px);
  border: 1px solid var(--ligne); background: rgba(250, 250, 247, 0.015);
  transition: border-color 0.5s var(--ease-main), transform 0.5s var(--ease-main);
}
.tarif:hover { border-color: rgba(250, 250, 247, 0.2); transform: translateY(-4px); }
.tarif--featured { border-color: rgba(208, 38, 24, 0.55); }
.tarif--featured:hover { border-color: var(--rouge); }
.tarif__flag {
  position: absolute; top: 0; left: clamp(28px, 2.6vw, 42px); transform: translateY(-50%);
  background: var(--rouge); color: var(--blanc);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 12px;
}
.tarif__name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t55); }
.tarif__price { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.tarif__price span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--t55); display: block; margin-top: 10px; text-transform: uppercase; }
.tarif__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tarif__list li { position: relative; padding-left: 20px; font-size: 0.92rem; color: var(--t72); line-height: 1.5; }
.tarif__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--bleu-clair); }
.tarif .btn { margin-top: auto; text-align: center; }
@media (max-width: 900px) {.tarifs__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- Étapes numérotées (comment ça marche) ---------------------
   Rail horizontal : une ligne (--sep-line) relie les 4 pastilles
   numérotées, posées au-dessus en z-index. La dernière étape (le
   partage, le moment "payoff") passe en rouge — même logique que le
   rouge réservé au CTA / à la formule mise en avant ailleurs sur le
   site. En dessous de 861px, le rail devient une timeline verticale
   (repère déjà utilisé page franchise) : pastille à gauche, ligne +
   chevron descendant entre deux étapes. transform/opacity uniquement. */
.steps__rail {
  --num: clamp(46px, 4.6vw, 62px);
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(50px, 7vh, 90px);
}
.steps__rail::before {
  content: "";
  position: absolute;
  left: calc(var(--num) / 2); right: calc(var(--num) / 2);
  top: calc(var(--num) / 2);
  height: 1px;
  background: var(--sep-line);
}
.step-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform var(--t-fast) var(--ease-out);
}
.step-card:hover { transform: translateY(-4px); }
.step-card__num {
  position: relative; z-index: 1;
  width: var(--num); height: var(--num);
  display: grid; place-items: center;
  border: 1px solid var(--accent-30);
  border-radius: 50%;
  background: var(--noir);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  color: var(--bleu-clair); font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.step-card:hover .step-card__num { transform: scale(1.08); }
.step-card--final .step-card__num { border-color: var(--rouge-30); color: var(--rouge); }
.step-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  letter-spacing: -0.01em; text-transform: uppercase;
}
.step-card__text { font-size: 0.92rem; color: var(--t72); line-height: 1.65; max-width: 26em; }
@media (max-width: 860px) {
.steps__rail { grid-template-columns: 1fr; gap: 0; }
.steps__rail::before { display: none; }
.step-card {
  flex-direction: row; align-items: flex-start;
  gap: clamp(18px, 4vw, 26px);
  padding-bottom: clamp(28px, 6vw, 40px);
}
.step-card::before {
  content: "";
  position: absolute;
  left: calc(var(--num) / 2); top: var(--num); bottom: 0;
  width: 1px; background: var(--accent-30);
}
.step-card::after {
  content: "\25BE";
  position: absolute; left: calc(var(--num) / 2); bottom: 6px;
  transform: translateX(-50%);
  font-size: 0.8rem; color: var(--rouge);
}
.step-card:last-child { padding-bottom: 0; }
.step-card:last-child::before, .step-card:last-child::after { display: none; }
.step-card__num { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.step-card, .step-card__num { transition: none; }
}

/* ---- Bloc OPTION IA ------------------------------------------- */
/* Pas d'overflow:hidden ici : .ia::before est en inset:0, il n'a besoin
   d'aucun clip parent, et un overflow sur .ia rognait le haut du
   numéro de section (.section__index déborde de moitié au-dessus de
   son propre bloc, par design). */
.ia { position: relative; }
.ia::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 85% 20%, rgba(250, 250, 247, 0.02), transparent 62%);
}
/* Grille sans lignes explicites : chaque bloc (tête, colonne texte,
   avant/après, CTA) est full-width et s'empile dans l'ordre du DOM.
   Le row-gap fait toute la respiration verticale — jamais de grid-row
   fixe, jamais deux blocs de hauteurs très différentes forcés dans la
   même ligne (c'était la cause des vides et des chevauchements). */
.ia__inner {
  position: relative; display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: clamp(28px, 4vh, 46px);
}
.ia__head { grid-column: 1 / -1; }
.ia__flag {
  display: inline-block; margin-bottom: 22px;
  background: var(--rouge); color: var(--blanc);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 12px;
}
.ia__col { grid-column: 1 / -1; }
.ia__text { max-width: 34em; color: var(--t72); font-size: 1rem; line-height: 1.75; }
.ia__universes { margin-top: 30px; }
.ia__ba { grid-column: 1 / -1; }
.ia .section-cta { grid-column: 1 / -1; }

/* ---- Arguments (cartes franchise) ----------------------------- */
.args__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(50px, 7vh, 90px); }
.arg { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.4vw, 38px); border: 1px solid var(--ligne); background: rgba(250, 250, 247, 0.015); }
.arg__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--bleu-clair); }
.arg__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.95; }
.arg__text { color: var(--t72); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 860px) {.args__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- Formulaires ---------------------------------------------- */
.formwrap { margin-top: clamp(46px, 6vh, 80px); }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; margin-top: clamp(40px, 6vh, 70px); }
.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > legend { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t55); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; }
.field input, .field select, .field textarea {
  background: transparent; border: 1px solid var(--ligne); border-radius: 0;
  color: var(--blanc); font-family: var(--font-body); font-size: 16px;
  padding: 14px 16px; width: 100%;
  transition: border-color 0.4s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(250, 250, 247, 0.22); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bleu-clair); }
.field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible) { outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--t30); }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FAFAF7' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.field select option { background: var(--noir); color: var(--blanc); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--t72); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--bleu); flex: none; }
.form .btn { justify-self: start; }
.form__note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--t30); }
@media (max-width: 820px) {
.contact-grid { grid-template-columns: 1fr; }
.form__row { grid-template-columns: 1fr; }
}

/* ---- Colonne infos contact ------------------------------------ */
.cinfo { display: flex; flex-direction: column; gap: 28px; }
.cinfo__block { display: flex; flex-direction: column; gap: 8px; }
.cinfo__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t55); }
.cinfo__block a, .cinfo__block p { font-size: 0.98rem; color: var(--t72); width: fit-content; }
.cinfo__block a { transition: color 0.4s var(--ease-out); }
.cinfo__block a:hover { color: var(--bleu-clair); }
.cinfo__socials { display: flex; gap: 20px; }

/* ---- Page Merci ----------------------------------------------- */
.merci {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; text-align: center;
  padding: var(--section-pad) var(--gutter);
}
.merci__inner { max-width: 40ch; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.merci__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 5vw, 4.4rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.92; }

/* ---- Fil d'ariane léger (optionnel, en tête de section) ------- */
.page-interior .section:first-of-type { border-top: none; }

/* ================================================================
   31 · PASSE VISUELLE (packshots, fonds, compositions)
   Chaque image est intégrée au noir (cadre, ombre ou overlay
   dégradé), jamais posée brute sur blanc. Lazy + dimensions
   posées côté HTML (zéro CLS). Reveal clip-path via [data-reveal].
   ================================================================ */

/* -- Cartes expériences (accueil) : le packshot hérite déjà de
      .exp-card__media-inner img (cover + parallax existant) -------- */

/* -- Concept : visuel unique (règles au § 12, avec le reste de la
      section) ; le reveal/parallax [data-collage] JS s'applique tel
      quel à cette figure unique. -------------------------------- */

/* -- CTA final : fond photo + overlay 65 % + vignette ------------ */
/* Base dégradée sous l'image plein cadre : si l'image (lazy) n'est pas
   encore chargée / échoue, on voit un fond nuit dessiné, jamais du noir pur. */
.cta--media {
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(8, 28, 84, 0.14), transparent 68%),
    linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
}
.cta__bgimg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cta--media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.60), rgba(5,5,5,0.72)),
    radial-gradient(ellipse 78% 74% at 50% 44%, rgba(5,5,5,0) 32%, rgba(5,5,5,0.62) 100%);
}
.cta__inner { position: relative; z-index: 2; }

/* -- Héros de page intérieure : visuel produit à droite --------- */
.ihero__inner { z-index: 2; }
.ihero__media {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(50%, 660px); z-index: 1; pointer-events: none; overflow: hidden;
}
.ihero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ihero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--noir) 0%, var(--noir) 16%, rgba(5,5,5,0.30) 62%, rgba(5,5,5,0.05) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.45), rgba(5,5,5,0) 26%),
    linear-gradient(0deg, rgba(5,5,5,0.55), rgba(5,5,5,0) 32%);
}
@media (max-width: 860px) {
.ihero__media { position: relative; width: 100%; height: clamp(230px, 40vh, 340px); margin-top: 30px; }
.ihero__media::after {
    background: linear-gradient(0deg, var(--noir), rgba(5,5,5,0) 55%),
                linear-gradient(180deg, rgba(5,5,5,0.35), rgba(5,5,5,0) 45%);
  }
}

/* -- Héros franchisé : fond réseau (la fête vue de loin) + 70 % -- */
.ihero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 15% 90%, rgba(8, 28, 84, 0.12), transparent 60%),
    linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
}
.ihero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ihero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.66), rgba(5,5,5,0.80));
}

/* -- Galerie layouts (photobooth) ------------------------------- */
.layouts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(46px, 6vh, 76px); max-width: 860px; align-items: start; }
.layout-item { border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden; }
.layout-item img { width: 100%; height: auto; display: block; }
@media (max-width: 620px) {.layouts__grid { grid-template-columns: 1fr; max-width: 420px; } }

/* -- Section à fond photo (formules videobooth) + overlay 80 % --- */
.section--bg { position: relative; }
.section--bg > .container { position: relative; z-index: 2; }
.section__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
}
.section__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0.82), rgba(5,5,5,0.86)); }

/* -- Visuel produit en tête de section (formules livre d'or) ----- */
.section__head-media { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; }
.section__head-txt { flex: 1 1 340px; min-width: 0; }

/* -- Visuel sobre en tête de colonne contact -------------------- */
.cinfo__media { border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden; }
.cinfo__media img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }

/* ================================================================
   32 · RÉACTIVITÉ TACTILE + FINITIONS AWARD
   Objectif : zéro latence perçue au tap sur mobile.
   transform / opacity uniquement. Aucune box-shadow animée.
   ================================================================ */

/* Zéro délai au tap sur tout l'interactif */
a, button, .btn, input, select, textarea, summary, [role="button"], .faq-item__q, .menu__link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Feedback :active INSTANTANÉ (pas de transition sur transform/opacity ici) */
a:active, .menu__link:active, .footer__col a:active, .cinfo__block a:active, .nav__links a:active, .exp-card:active, .tarif:active, .arg:active, .avis-card:active {
  opacity: 0.7;
}
.btn:active { transform: scale(0.98); opacity: 0.9; }

/* Finition award 1 : hover image scale 1.03 doux (desktop pointeur fin only) */
@media (hover: hover) and (pointer: fine) {
.layout-item img, .cinfo__media img {
    transition: transform 0.6s var(--ease-out);
  }
.layout-item:hover img, .cinfo__media:hover img {
    transform: scale(1.03);
  }
}

/* Mobile / écrans tactiles : on allège tout ce qui coûte au tap & au scroll */
@media (max-width: 900px), (pointer: coarse) {
/* backdrop-filter (repeint tout le fond au scroll) -> fond solide */
  .nav { background: rgba(5, 5, 5, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav--hero { background: transparent; }
/* Coupe grain + curseur custom (déjà off en JS, on verrouille en CSS) */
  .grain, .cursor { display: none !important; }
/* Menu + FAQ : animations courtes (≤ 0.25s) */
  .menu { transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s; }
.menu.is-open { transition: opacity 0.25s var(--ease-out); }
.menu.is-open .menu__link { transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out); }
}

/* ---- 5b · Blocs d'usage numérotés 01→04 (réf. fmrg.studio,
   « HERE'S WHEN FOUNDERS USUALLY CALL US » : blocs pleine hauteur,
   numéro accent, titre géant serré, image changeant à chaque étape).
   Desktop : visuel sticky à droite, crossfade piloté par IO.
   Mobile : image inline dans chaque bloc. -------------------------- */
.usages__intro { max-width: 44em; margin-top: clamp(26px, 4vh, 44px); color: var(--t72); font-size: 1rem; line-height: 1.75; }
.usages__grid {
  display: grid; grid-template-columns: 1fr;
  margin-top: clamp(50px, 7vh, 90px);
}
@media (min-width: 981px) {
.usages__grid { grid-template-columns: 1.15fr 1fr; column-gap: clamp(24px, 4vw, 72px); }
}
.usage {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: clamp(40px, 9vh, 90px) 0;
  border-top: 1px solid var(--ligne);
}
.usage:first-child { border-top: none; }
@media (min-width: 981px) {
/* Placement explicite : les 4 blocs restent en colonne 1, le visuel
     sticky occupe la colonne 2 (sinon l'auto-placement grid mettrait
     le bloc 02 en colonne 2). */
  .usage { min-height: 62vh; grid-column: 1; }
}
.usage__num {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em;
  color: var(--bleu-clair); font-variant-numeric: tabular-nums;
}
/* Titre de bloc d'usage — repassé en Inter 500 casse normale (passe 14) */
.usage__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 4.4rem);
  line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase;
}
.usage__text { max-width: 30em; color: var(--t72); font-size: 0.98rem; line-height: 1.7; }
.usage__link {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanc);
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
}
.usage__link .exp-card__arrow { display: inline-block; transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out); }
.usage__link:hover .exp-card__arrow { transform: translateX(8px); color: var(--bleu-clair); }
/* Visuel sticky : un seul jeu d'images pour les deux breakpoints
   (les vignettes inline mobiles faisaient doublon dans le DOM).
   Mobile : cadre 16/9 collé sous la nav. Desktop : cadre 4/5 en colonne 2. */
.usages__visual { display: block; margin-bottom: clamp(20px, 4vw, 32px); }
.usages__frame {
  position: sticky; top: 70px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden;
}
.usages__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.9s var(--ease-main);
}
.usages__frame img.is-active { opacity: 1; }
/* Halo sobre autour du cadre qui défile (point statique, transform/
   opacity uniquement ailleurs sur le site) */
.usages__frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid var(--accent-30);
  box-shadow: 0 0 36px var(--accent-h20), 0 20px 46px -24px rgba(5, 5, 5, 0.85);
}
@media (min-width: 981px) {
.usages__visual { display: block; grid-row: 1 / span 4; grid-column: 2; margin-bottom: 0; }
.usages__frame {
    position: sticky; top: calc(50vh - min(31vw, 330px));
    aspect-ratio: 4 / 5; max-height: 76vh;
    border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden;
  }
.usages__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 0.9s var(--ease-main);
  }
.usages__frame img.is-active { opacity: 1; }
}

/* ---- 5c · Tags de formule séparés par « / » (réf. fmrg.studio :
   tags 16px uppercase, tag coloré / slash neutre — adapté micro-typo :
   tags blanc 55 %, slash bleu clair). ----------------------------- */
.tagline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55);
  line-height: 1.6;
}
.tagline i { font-style: normal; color: var(--bleu-clair); opacity: 0.8; }
.exp-card .tagline { padding-top: 4px; }
.ihero .tagline { margin-top: 22px; }

/* Overlay lumineux (cohérent galerie lumière : opacity + blur one-shot) */
.mono-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(18px, 4vw, 60px);
  background: rgba(5, 7, 15, 0.93);
  visibility: hidden; opacity: 0;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.mono-overlay.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-out); }
.mono-overlay__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: min(92vw, 1080px);
}
.mono-overlay__media {
  max-width: 100%; max-height: 74vh;
  border: 1px solid var(--ligne); background: #0A0A0A; overflow: hidden;
  opacity: 0; filter: blur(8px); transform: scale(1.04);
  transition: opacity 0.7s var(--ease-main), filter 0.7s var(--ease-main), transform 0.7s var(--ease-main);
}
.mono-overlay.is-open .mono-overlay__media { opacity: 1; filter: blur(0); transform: none; }
.mono-overlay__media img, .mono-overlay__media video {
  max-width: 100%; max-height: 74vh; width: auto; height: auto; display: block;
}
.mono-overlay__caption {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t72); text-align: center;
}
.mono-overlay__close {
  position: absolute; top: calc(-1 * clamp(8px, 1.5vh, 14px)); right: 0;
  transform: translateY(-100%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 250, 247, 0.3);
  color: var(--blanc); font-size: 1.1rem; line-height: 1;
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.mono-overlay__close:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); }
@media (prefers-reduced-motion: reduce) {
.mono-overlay, .mono-overlay__media { transition: none; }
.mono-overlay__media { filter: none; transform: none; }
}

/* ---- 5d · CTA final à choix binaire (réf. fmrg.studio
   « HOW WOULD YOU LIKE US TO GET IN TOUCH? » → EMAIL / CALL).
   Page contact : « Appeler » / « Réserver en ligne ». -------------- */
.choice__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(40px, 6vh, 70px);
}
.choice__opt {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(34px, 5vh, 64px) clamp(26px, 3vw, 48px);
  border: 1px solid var(--ligne);
  background: rgba(250, 250, 247, 0.015);
  transition: transform 0.6s var(--ease-main), border-color 0.6s var(--ease-main);
}
.choice__opt:hover { transform: translateY(-6px); border-color: rgba(250, 250, 247, 0.22); }
.choice__opt--rouge { border-color: rgba(208, 38, 24, 0.5); }
.choice__opt--rouge:hover { border-color: var(--rouge); }
.choice__label {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t55);
}
.choice__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--blanc);
}
.choice__sub { color: var(--t72); font-size: 0.92rem; line-height: 1.6; }
.choice__go {
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanc);
  display: inline-flex; align-items: center; gap: 10px;
}
.choice__go .exp-card__arrow { display: inline-block; transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out); }
.choice__opt:hover .choice__go .exp-card__arrow { transform: translateX(8px); color: var(--bleu-clair); }
.choice__opt--rouge:hover .choice__go .exp-card__arrow { color: var(--rouge); }
@media (max-width: 700px) {.choice__grid { grid-template-columns: 1fr; } }

/* ---- M5 · Cartes valeurs (grille 4, réutilise .arg) ------------- */
.args__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {.args__grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  {.args__grid--4 { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- M6 · Avis avec portrait photo, cadrage visage --------------
   object-position posé par image (inline, cas par cas) : recadrage
   ajustable sans jamais retoucher les fichiers sources. */
.avis-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0A0A0A;
  border: 1px solid var(--ligne);
}
.avis-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.avis-card:hover .avis-card__media img { transform: scale(1.03); }
}

/* ================================================================
   35 · PASSE 10 · PATTERNS FUBIZ V3 (réf. fubizv3.netlify.app)
   Fiche : docs/research/components/fubizv3-patterns.spec.md
   transform / opacity only · palette + fondu déjà en place réutilisés
   ================================================================ */

/* g · Compteur de section dans l'eyebrow (« — 04 ») */
.eyebrow__count {
  margin-left: 0.5em;
  color: var(--t30);
  font-variant-numeric: tabular-nums;
}
@keyframes kw-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* e · Rangée de mots en boucle en fond de la section Avis -------- */
/* Pas d'overflow:hidden ici : .avis__loop se découpe déjà lui-même
   (overflow:hidden posé dessus). Un overflow sur .avis rognait le haut
   du numéro de section (.section__index déborde de moitié au-dessus
   de son propre bloc, par design). */
.avis { position: relative; }
.avis__loop {
  position: absolute; left: 0; right: 0; top: clamp(120px, 16vh, 200px);
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0.5;
}
.avis__loop-track { display: flex; width: max-content; will-change: transform; animation: kw-scroll 60s linear infinite; }
.avis.is-paused .avis__loop-track { animation-play-state: paused; }
.avis__loop-list {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 12vw, 9rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(250, 250, 247, 0.06);
}
.avis__loop-list i { font-style: normal; }
.avis > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {.avis__loop-track { transform: none !important; } }

/* ================================================================
   37 · PASSE 14 · SYSTÈME TYPO + VISUEL (réf. thefrenchphotobooth.com)
   Montserrat 900 UPPERCASE avec parcimonie (gros titres, chiffres,
   boutons) — Inter partout ailleurs. Accent = bleu client (jamais
   doré) ; le rouge reste réservé aux CTA et badges d'urgence.
   Contrainte DA maintenue : on n'anime que transform & opacity
   (les halos varient par l'opacité d'un ::after, jamais box-shadow).
   ================================================================ */

/* ---- 14a · MONTSERRAT 900 : gros titres, chiffres, boutons ------ */
.title, .title--sm, .hero__title, .hero__offer, .ihero__title, .merci__title, .cta__title, .cta__title--statement, .menu__link, .marquee__list, .avis__loop-list, .choice__word, .footer__giant, .stat__value, .tarif__price, .btn {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: normal;
}
/* Les trois seuls Montserrat 900 qui gardent un interlettrage : les
   boutons (2px, réf.), le wordmark et les libellés d'offre du héros. */
.btn { letter-spacing: 2px; }
.hero__offer { letter-spacing: 2px; }

/* Échelle des niveaux de titre (desktop) */
.hero__title, .ihero__title, .merci__title { font-size: clamp(1.75rem, 3.6vw, 2.925rem); line-height: 1.1; }/* h1 · 46.8px */
.title { font-size: clamp(1.75rem, 3.1vw, 2.34rem);  line-height: 1.2; }/* h2 · 37.4px */
.title--sm { font-size: clamp(1.6rem, 2.8vw, 2.1rem);    line-height: 1.2; }
.cta__title, .cta__title--statement { font-size: clamp(1.75rem, 3.4vw, 2.7rem);   line-height: 1.15; }
/* L'énoncé signature était en Instrument Serif italique bas de casse :
   il repasse en Montserrat 900 capitales comme les autres h2. */
.cta__title--statement { font-style: normal; text-transform: uppercase; }

/* Displays décoratifs (mots rotatifs, murs de slogan, marquees) :
   conservés, mais recalés — Montserrat 900 capitales est bien plus
   large que l'ancienne graisse 500/600, ils débordaient sinon. */
.menu__link { font-size: clamp(1.4rem, 5vw, 2.3rem);   line-height: 1.15; }
.marquee__list { font-size: clamp(1.2rem, 2.6vw, 2.2rem); line-height: 1.2; }
.avis__loop-list { font-size: clamp(1rem, 2vw, 1.6rem);     line-height: 1.2; }
.choice__word { font-size: clamp(1.3rem, 2.8vw, 2.2rem); line-height: 1.1; }
.footer__giant { font-size: clamp(1.6rem, 5.4vw, 4.2rem); line-height: 1.05; }

/* Chiffres marquants · Montserrat 900, 26-28px (réf.) */
.stat__value, .tarif__price {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);   /* 28px */
  line-height: 1.1;
}
/* Petites valeurs de confiance (« 4.9/5 », « 5 / 5 ») · 16px */
.avis-card__note b { font-family: var(--font-display); font-weight: 900; font-size: 1rem; letter-spacing: normal; }

/* ---- 14b · INTER : sous-titres, titres de cartes, corps --------- */
/* h3 · sous-titre de section · Inter 500, 28px, casse normale */
.usage__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3; letter-spacing: normal; text-transform: none;
}
/* h4 · titre de carte · Inter 500, 24px, casse normale */
.exp-card__name, .arg__title, .faq-item__q {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.3; letter-spacing: normal; text-transform: none;
}
/* Corps & descriptions · Inter 400, 14px, lh 1.6 */
.arg__text, .exp-card__text, .avis-card__text, .concept__text, .usage__text, .ihero__lead, .section__lead {
  font-family: var(--font-body); font-weight: 400;
  line-height: 1.6;
}
/* Listes de features · Inter 400, 14.4px */
.tarif__list li {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.9rem;            /* 14.4px */
  line-height: 1.6;
}
/* Citation d'avis : ex-italique premium, désormais Inter 500 */
.avis-card__quote {
  font-family: var(--font-body); font-weight: 500;
  font-style: normal;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5; letter-spacing: normal;
}
/* Micro-labels sous les chiffres · Inter 400, 10-11px, ls 1px */
.stat__label, .tarif__price span, .footer__col-title, .cinfo__label, .hero__counter, .arg__num {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.6875rem;         /* 11px */
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Labels de résultats · Inter 400, 13-14.4px, ls 2px */
.tarif__name, .concept__tags li, .ia__universes li, .menu__num {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.8125rem;         /* 13px */
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- 14c · EYEBROW EN BADGE (patron de section de la réf.) ------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  justify-self: start;   /* sinon le badge s'étire dans les grilles */
  padding: 7px 16px;
  border: 1px solid var(--accent-30);
  border-radius: var(--r-pill);
  background: rgba(8, 28, 84, 0.08);
  color: var(--bleu-clair);
}
.eyebrow__count { color: var(--t55); letter-spacing: 2px; }
/* Variante urgence : rouge réservé aux CTA / badges d'urgence */
.eyebrow--rouge { border-color: var(--rouge-30); background: rgba(208, 38, 24, 0.08); color: var(--rouge); }
/* Le héros garde un eyebrow sans cadre (lisibilité sur l'image) */
.hero__ov .eyebrow, .ihero .eyebrow { border-color: rgba(250, 250, 247, 0.24); background: rgba(5, 5, 5, 0.34); }

/* Titre bicolore : sur les h1 de page à deux lignes, la seconde passe
   dans la couleur d'accent (blanc puis bleu clair — jamais or ni crème).
   Appliqué en CSS pour rester systématique sur les 7 pages. */
.ihero__title .line:nth-child(2) .line__inner { color: var(--bleu-clair); }

/* Le sous-titre unique du patron de section (eyebrow → h2 → 1 phrase)
   · Inter 400, 18px, lh 1.7. .ihero__sub et .cta__sub jouent déjà ce
   rôle sur les pages : ils sont alignés sur les mêmes valeurs. */
.section__sub, .ihero__sub, .cta__sub {
  margin-top: 18px; max-width: 62ch;
  font-family: var(--font-body); font-weight: 400;
  font-size: 1.125rem;          /* 18px */
  line-height: 1.7;
  color: var(--n2);
}
.ihero__sub { margin-top: 26px; }
.cta__sub { margin-top: 28px; }

/* Séparateur qui s'estompe aux extrémités (signature réf.) */
.sep-fade { display: block; height: 1px; border: 0; background: var(--sep-line); }
.section + .section { border-top-color: transparent; }
.section + .section::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 1px; background: var(--sep-line);
}

/* ---- 14d · CARTES : bordure d'accent, halo, rayon 15px ----------
   Pas d'overflow:hidden sur la carte : les flags des formules
   dépassent volontairement du cadre, et le halo doit rayonner
   AU-DELÀ de la bordure. Ce sont les médias internes qui héritent
   du rayon. Pas de backdrop-filter non plus : nos fonds de carte
   sont opaques (le flou n'y aurait aucun effet visible et coûterait
   un layer de compositing pendant le scrub du héros) — il reste sur
   la nav, seule surface réellement translucide du site. */
.exp-card, .arg, .avis-card, .tarif, .choice__opt {
  border: 1px solid var(--accent-20);
  border-radius: var(--r-card);
  background: var(--card-bg);
  box-shadow: 0 0 20px var(--accent-h10);
}
/* Médias à fond perdu → même rayon que la carte ; médias encartés
   (carte à padding) → rayon de petit bloc. */
.exp-card__frame { border-radius: inherit; }
.avis-card__media { border-radius: var(--r-block); }
/* Halo de survol : ::before en opacité — jamais de box-shadow animé.
   ::after est déjà pris sur ces cartes par .card-sheen (voile
   directionnel posé en JS) : le halo passe donc par ::before. */
.exp-card::before, .arg::before, .avis-card::before, .tarif::before, .choice__opt::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: 0 0 20px var(--accent-h20), 0 10px 30px var(--accent-h30);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.exp-card:hover::before, .arg:hover::before, .avis-card:hover::before, .tarif:hover::before, .choice__opt:hover::before { opacity: 1; }
/* Le rouge reste au CTA / à la formule mise en avant */
.tarif--featured { border-color: var(--rouge-30); box-shadow: 0 0 20px rgba(208, 38, 24, 0.10); }
.tarif--featured::before { box-shadow: 0 0 20px rgba(208, 38, 24, 0.20), 0 10px 30px rgba(208, 38, 24, 0.30); }

/* Petits blocs : rayon 12px */
.stat, .field input, .field textarea, .field select, .concept__tags li, .ia__universes li { border-radius: var(--r-block); }
/* Pilules / badges : rayon 50px · pastilles rondes : 50 % */
.ihero__badge, .exp-card__tag, .btn--pill { border-radius: var(--r-pill); }
.footer__dot { border-radius: 50%; }

/* ---- 14e · VOCABULAIRE D'ANIMATION (transform / opacity only) --- */
/* Brillance qui balaie en boucle · 3s linear, éléments premium */
@keyframes tfb-shine {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}
.has-shine { position: relative; overflow: hidden; }
/* :not(.btn) — sur un bouton, ::before est DÉJÀ pris par le voile de
   hover directionnel ; le balayage y passe par ::after (règle suivante). */
.has-shine:not(.btn)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 45%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(250, 250, 247, 0.16), transparent);
  animation: tfb-shine 3s linear infinite;
}
.btn.has-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 45%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(250, 250, 247, 0.22), transparent);
  animation: tfb-shine 3s linear infinite;
}
/* Lévitation douce · 6s ease-in-out, visuels produits */
@keyframes tfb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.has-float { animation: tfb-float 6s ease-in-out infinite; will-change: transform; }
/* Pulse d'accent · 2s, point de disponibilité / badge */
@keyframes tfb-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.55; }
}
.has-pulse { animation: tfb-pulse 2s ease-in-out infinite; will-change: transform; }

/* Durées d'interaction alignées : 0.3s couleur/survol, 0.6s amples */
.exp-card, .tarif, .choice__opt, .arg, .avis-card {
  transition: transform var(--t-slow) var(--ease-main),
              border-color var(--t-fast) var(--ease-out);
}
.concept__tags li, .ia__universes li, .faq-item__q, .nav__links a {
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
.has-shine:not(.btn)::before, .btn.has-shine::after, .has-float, .has-pulse { animation: none; }
.has-shine:not(.btn)::before, .btn.has-shine::after { opacity: 0; }
.exp-card::before, .arg::before, .avis-card::before, .tarif::before, .choice__opt::before { transition: none; }
}

/* ---- 14f · MOBILE (390px) · rien ne doit déborder --------------- */
@media (max-width: 480px) {
/* Inter 900 + 3px d'interlettrage sur un eyebrow long (« L'ANIMATION
     ÉVÉNEMENTIELLE RÉINVENTÉE ») dépasse 390px : on resserre et on
     autorise le retour à la ligne dans la pilule. */
  .eyebrow { font-size: 0.6875rem; letter-spacing: 1.5px; padding: 7px 14px; text-align: center; }
.title, .title--sm, .hero__title { max-width: none; }
.stat__value, .tarif__price { font-size: 1.5rem; }
.section__sub, .ihero__sub, .cta__sub, .hero__offer-sub, .hero__tagline { font-size: 0.95rem; }
.tarif__name, .concept__tags li, .ia__universes li, .menu__num { letter-spacing: 1.4px; font-size: 0.75rem; }
.btn { letter-spacing: 1.5px; padding: 14px 24px; }
.hero__offer { letter-spacing: 1.5px; }
}

/* ================================================================
   36 · PASSE 15 · RETOUR CLIENT
   Rouge plus présent, mises en page desktop rééquilibrées, galerie
   composite, bandeau logos, mot du fondateur, page franchise.
   Palette inchangée : noir · bleu nuit · blanc · #0c27a4 · #d02618.
   ================================================================ */

/* ---- Bouton compact (CTA de carte) ----------------------------- */
.btn--sm { padding: 11px 20px; font-size: 0.68rem; letter-spacing: 1.6px; }

/* ---- 2.1 · NOTRE MÉTIER · défilement rapide des promesses ------- */
.metier {
  position: relative;
  min-height: 74vh; min-height: 74dvh;
  display: grid; place-items: center;
  padding: clamp(80px, 12vh, 150px) 0;
  overflow: hidden;
  border-top: 1px solid var(--ligne);
}
.metier__bg { position: absolute; inset: 0; z-index: 0; }
.metier__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 1.6s var(--ease-out);
  transform: scale(1.06);
}
.metier__bg img.is-active { opacity: 0.3; transform: scale(1); }
.metier::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,5,5,0.35), rgba(5,5,5,0.82) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.55), rgba(5,5,5,0) 30%, rgba(5,5,5,0.65));
}
.metier__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
  text-align: center;
}
.metier__eyebrow { color: var(--rouge); }
/* Masque à hauteur de ligne : le mot roule verticalement (transform only) */
.metier__mask {
  overflow: hidden;
  height: 1.16em;
  margin: clamp(20px, 3vh, 34px) auto clamp(22px, 3vh, 36px);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.9rem, 6.4vw, 5rem);
  line-height: 1.16; text-transform: uppercase; letter-spacing: -0.02em;
}
.metier__word { font: inherit; letter-spacing: inherit; white-space: nowrap; }
.metier__word em { font-style: normal; color: var(--rouge); }
.metier__sub { color: var(--t72); font-size: clamp(0.9rem, 1.2vw, 1.05rem); }
.metier__cta { margin-top: clamp(26px, 4vh, 42px); }
@media (max-width: 560px) {
.metier__mask { height: 2.4em; white-space: normal; }
.metier__word { white-space: normal; }
}

/* ---- 2.2 · Concept : miniblocs événements en rouge -------------- */
.concept__tags--rouge li {
  color: var(--blanc);
  border-color: var(--rouge-30);
  background: rgba(208, 38, 24, 0.10);
}
.concept__tags--rouge li:hover {
  color: var(--blanc);
  border-color: var(--rouge);
  background: var(--rouge);
}
/* Le placement du bloc éditorial du Concept est désormais géré avec la
   composition photo (section « Concept » plus haut), par breakpoint. */
@media (min-width: 861px) {
.concept .eyebrow { grid-column: 1 / -1; }
}

/* ---- 2.3 · Cartes expériences : badges + vrai bouton ------------ */
.exp-card__badge--bleu { background: var(--bleu); color: var(--blanc); }
.exp-card__badge--blanc { background: var(--blanc); color: var(--noir); }
/* Quand le CTA devient un bouton, on retire le soulignement d'origine */
.exp-card__cta.btn { margin-top: 10px; }
.exp-card__cta.btn::after { content: none; }

/* ---- 2.4 · Chiffres clés : une touche de rouge ------------------ */
.stats__grid--rouge .stat { position: relative; padding-left: 18px; }
.stats__grid--rouge .stat::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; background: var(--rouge);
}
.stats__grid--rouge .stat__value--txt { color: var(--rouge); }
@media (max-width: 700px) {
.stats__grid--rouge .stat { padding-left: 14px; }
}

/* ---- 2.6 · Pourquoi réserver : CTA boutons + numéros rouges ----- */
.usages--rouge .usage__num { color: var(--rouge); }
.usages--rouge .usage { border-top-color: var(--rouge-20); }
.usage__link.btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px; width: max-content;
  font-family: var(--font-display); font-weight: 900;
  font-size: 0.68rem; letter-spacing: 1.6px;
}
.usage__link.btn::after { content: none; }
.usage__link.btn:hover .exp-card__arrow { color: inherit; }

/* ================================================================
   GALERIE SPOTLIGHT · bloc générique et réutilisable (accueil,
   photobooth, videobooth-360, livre-dor — seuls les visuels HTML
   changent). Champ sombre, calque fantôme adouci, masque radial CSS
   qui suit le pointeur, halo décoratif transform-only.
   ================================================================ */
.spotlight__lead { max-width: 40em; margin-top: clamp(14px, 2vh, 22px); color: var(--t72); font-size: 1rem; line-height: 1.75; }

/* overflow:hidden posé ici (sur la scène) et non sur .spotlight (la
   section) : les items en vw peuvent légèrement déborder de la scène,
   mais la section elle-même ne doit jamais rogner le numéro de section
   qui déborde de moitié au-dessus de son propre bloc, par design. */
.spotlight-stage {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 6vh, 64px);
  height: 82vh;
  height: 82svh;
  min-height: 520px;
  max-height: 760px;
  --sl-beam-r: 260px;
}
.spotlight-grid { position: absolute; inset: 0; }
.spotlight-item {
  position: absolute;
  left: var(--l); top: var(--t);
  width: calc(var(--w, 18) * 1vw);
  aspect-ratio: var(--ar, 3 / 2);
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
  will-change: transform;
}
.spotlight-item img, .spotlight-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
/* Calque fantôme : deviné, jamais invisible — la couleur du produit
   reste une part de sa valeur, on ne la noie pas sous le noir. */
.spotlight-grid--base { z-index: 1; }
.spotlight-grid--base .spotlight-item { opacity: 0.2; cursor: pointer; }
.spotlight-grid--base .spotlight-item img,
.spotlight-grid--base .spotlight-item video { filter: grayscale(0.6) brightness(0.92); }
/* Compensation locale (page Videobooth 360°) : son stock de visuels
   penche vers des scènes de nuit/soirée, nativement plus sombres que
   les visuels Photobooth/accueil. On remonte le calque fantôme sur
   cette page seulement plutôt que d'assombrir les autres galeries. */
.spotlight--bright .spotlight-grid--base .spotlight-item { opacity: 0.32; }
.spotlight--bright .spotlight-grid--base .spotlight-item img,
.spotlight--bright .spotlight-grid--base .spotlight-item video { filter: grayscale(0.4) brightness(1.15); }
/* Calque révélé : pleine couleur, découpé par un masque radial centré
   sur le point du faisceau (--sl-x/--sl-y), jamais d'opacity pilotée en JS. */
.spotlight-grid--lit {
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--sl-beam-r) at var(--sl-x, 50%) var(--sl-y, 50%), #000 0%, #000 40%, rgba(0, 0, 0, 0) 78%);
  mask-image: radial-gradient(circle var(--sl-beam-r) at var(--sl-x, 50%) var(--sl-y, 50%), #000 0%, #000 40%, rgba(0, 0, 0, 0) 78%);
}
/* Halo décoratif du faisceau : transform + opacity uniquement. */
.spotlight-beam {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: calc(var(--sl-beam-r) * 2.2); height: calc(var(--sl-beam-r) * 2.2);
  margin: calc(var(--sl-beam-r) * -1.1) 0 0 calc(var(--sl-beam-r) * -1.1);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--accent-h30) 0%, var(--accent-h10) 46%, rgba(59, 87, 217, 0) 74%);
  transform: translate3d(var(--sl-x, 50vw), var(--sl-y, 50vh), 0);
  will-change: transform, opacity;
  transition: opacity 0.4s var(--ease-out);
}
.spotlight.is-lit .spotlight-beam { opacity: 1; }
.spotlight-hint {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vh, 30px); z-index: 4;
  text-align: center; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--t55);
}
@media (max-width: 768px) {
.spotlight-stage { --sl-beam-r: 190px; }
.spotlight-item { width: calc(var(--w, 18) * 1.9vw); }
}

/* Positions organiques des 26 emplacements — communes à toutes les
   pages, jamais éditées : seul le contenu (image ou vidéo) de chaque
   .spotlight-item change d'une page à l'autre, uniquement en HTML. */
.spotlight-item:nth-child(1)  { --l: 1%;  --t: 8%;  --w: 18; --r: -3deg; }
.spotlight-item:nth-child(2)  { --l: 22%; --t: 5%;  --w: 15; --r: 4deg; }
.spotlight-item:nth-child(3)  { --l: 41%; --t: 12%; --w: 22; --r: -2deg; }
.spotlight-item:nth-child(4)  { --l: 65%; --t: 6%;  --w: 16; --r: 5deg; }
.spotlight-item:nth-child(5)  { --l: 84%; --t: 14%; --w: 13; --r: -4deg; }
.spotlight-item:nth-child(6)  { --l: 5%;  --t: 30%; --w: 16; --r: 3deg; }
.spotlight-item:nth-child(7)  { --l: 24%; --t: 26%; --w: 21; --r: -5deg; }
.spotlight-item:nth-child(8)  { --l: 47%; --t: 33%; --w: 14; --r: 4deg; }
.spotlight-item:nth-child(9)  { --l: 64%; --t: 27%; --w: 18; --r: -2deg; }
.spotlight-item:nth-child(10) { --l: 85%; --t: 35%; --w: 13; --r: 3deg; }
.spotlight-item:nth-child(11) { --l: 2%;  --t: 49%; --w: 15; --r: -4deg; }
.spotlight-item:nth-child(12) { --l: 19%; --t: 45%; --w: 22; --r: 2deg; }
.spotlight-item:nth-child(13) { --l: 43%; --t: 51%; --w: 17; --r: -3deg; }
.spotlight-item:nth-child(14) { --l: 62%; --t: 45%; --w: 20; --r: 5deg; }
.spotlight-item:nth-child(15) { --l: 84%; --t: 52%; --w: 14; --r: -2deg; }
.spotlight-item:nth-child(16) { --l: 10%; --t: 59%; --w: 13; --r: 4deg; }
.spotlight-item:nth-child(17) { --l: 28%; --t: 65%; --w: 20; --r: -4deg; }
.spotlight-item:nth-child(18) { --l: 51%; --t: 67%; --w: 16; --r: 3deg; }
.spotlight-item:nth-child(19) { --l: 69%; --t: 63%; --w: 17; --r: -5deg; }
.spotlight-item:nth-child(20) { --l: 88%; --t: 68%; --w: 11; --r: 4deg; }
.spotlight-item:nth-child(21) { --l: 4%;  --t: 71%; --w: 17; --r: 2deg; }
.spotlight-item:nth-child(22) { --l: 15%; --t: 80%; --w: 18; --r: -3deg; }
.spotlight-item:nth-child(23) { --l: 36%; --t: 83%; --w: 14; --r: 5deg; }
.spotlight-item:nth-child(24) { --l: 54%; --t: 78%; --w: 19; --r: -2deg; }
.spotlight-item:nth-child(25) { --l: 73%; --t: 82%; --w: 16; --r: 3deg; }
.spotlight-item:nth-child(26) { --l: 89%; --t: 79%; --w: 11; --r: -4deg; }
.spotlight-item:nth-child(27) { --l: 8%;  --t: 18%; --w: 12; --r: 2deg; }
.spotlight-item:nth-child(28) { --l: 56%; --t: 18%; --w: 13; --r: -3deg; }
.spotlight-item:nth-child(29) { --l: 33%; --t: 38%; --w: 12; --r: 4deg; }
.spotlight-item:nth-child(30) { --l: 75%; --t: 41%; --w: 12; --r: -3deg; }
.spotlight-item:nth-child(31) { --l: 46%; --t: 58%; --w: 12; --r: 3deg; }
.spotlight-item:nth-child(32) { --l: 92%; --t: 58%; --w: 10; --r: -2deg; }
.spotlight-item:nth-child(33) { --l: 62%; --t: 74%; --w: 13; --r: 4deg; }
.spotlight-item:nth-child(34) { --l: 22%; --t: 88%; --w: 12; --r: -3deg; }

/* Repli statique (reduced-motion / sans JS) : grille à plat, tout
   visible en pleine couleur, aucune interaction ni masque. */
.reduced .spotlight-stage {
  height: auto; min-height: 0; max-height: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.reduced .spotlight-grid--lit, .reduced .spotlight-beam, .reduced .spotlight-hint { display: none; }
.reduced .spotlight-grid--base { position: static; display: contents; }
.reduced .spotlight-item {
  position: static; width: 100%; opacity: 1; transform: none;
}
.reduced .spotlight-item img, .reduced .spotlight-item video { filter: none; }

/* ---- 2.11 · Avis : étiquette produit --------------------------- */
.avis-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 11px;
}
.avis-card__tag--bleu { background: var(--bleu);  color: var(--blanc); }
.avis-card__tag--rouge { background: var(--rouge); color: var(--blanc); }
.avis-card__tag--blanc { background: var(--blanc); color: var(--noir); }

/* ---- 2.15 · Bloc Wedding Awards (rapatrié de « À propos ») ------ */
.award {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vh, 80px);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--rouge-30);
  background: linear-gradient(100deg, rgba(208, 38, 24, 0.12), rgba(208, 38, 24, 0) 62%);
}
.award__seal {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 900;
  color: var(--rouge);
}
.award__laurel { font-size: 1.1rem; opacity: 0.75; }
.award__year { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; }
.award__text { flex: 1 1 260px; }
.award__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: -0.01em;
}
.award__sub { margin-top: 6px; color: var(--t72); font-size: 0.9rem; }
.award__cta { flex: 0 0 auto; }
.award--top { margin-top: 0; }

/* ---- 2.12 · Nos principes : une touche de rouge ----------------- */
.args__grid--rouge .arg__num { color: var(--rouge); }
.args__grid--rouge .arg { border-top: 2px solid var(--rouge-30); }
.args__grid--rouge .arg:hover { border-top-color: var(--rouge); }

/* ---- 2.13 · Bandeau logos clients défilant ---------------------
   Les 12 logos fournis sont hétérogènes : 5 ont un fond blanc ou une
   plaque de couleur incrustée (IKEA, Renault, ASF, Keepcool, Société
   Générale). Le filtre monochrome demandé les transformait en simples
   rectangles blancs — on passe donc par une plaque claire uniforme :
   hauteur normalisée, désaturation au repos, couleur de marque au
   survol. Résultat cohérent sur fond sombre, marques respectées. */
.lmq { position: relative; overflow: hidden; margin-top: clamp(30px, 4vh, 48px); }
.lmq::before, .lmq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 130px); z-index: 2;
  pointer-events: none;
}
.lmq::before { left: 0;  background: linear-gradient(90deg, var(--noir), rgba(5,5,5,0)); }
.lmq::after  { right: 0; background: linear-gradient(270deg, var(--noir), rgba(5,5,5,0)); }
.lmq__track { display: flex; width: max-content; animation: lmq-scroll 52s linear infinite; }
.lmq__list { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); padding-right: clamp(14px, 1.8vw, 26px); }
.lmq__item {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: clamp(130px, 14vw, 186px);
  height: clamp(64px, 7vw, 88px);
  padding: 0 clamp(14px, 1.6vw, 22px);
  background: var(--blanc);
  border-radius: 3px;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-main);
}
.lmq__logo {
  width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(28px, 3.4vw, 42px);
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .lmq__item:hover { opacity: 1; filter: grayscale(0); transform: translateY(-3px); }
}
@keyframes lmq-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.lmq.is-paused .lmq__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lmq__track { animation: none; } }

/* ---- 4.2/4.3 · PAGES PRODUITS · rééquilibrage desktop ----------
   Le client signalait un grand vide à gauche : la colonne libérée
   accueille désormais une photo, le texte garde sa moitié droite. */
.about__media {
  margin: 0; overflow: hidden;
  border: 1px solid var(--ligne); background: #0A0A0A;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 861px) {
.about .container { align-items: start; }
.about .eyebrow { grid-row: 1; }
.about__title { grid-column: 1 / span 8; grid-row: 2; }
.about__media {
    grid-column: 1 / span 5; grid-row: 3 / span 3;
    margin-top: clamp(28px, 4vh, 50px);
    align-self: stretch; min-height: clamp(320px, 30vw, 460px);
  }
.about__text { grid-column: 7 / span 6; grid-row: 3; }
.about .badges { grid-column: 7 / span 6; grid-row: 4; }
.about .section-cta { grid-column: 7 / span 6; grid-row: 5; }
}
@media (max-width: 860px) {
.about__media { grid-column: 1 / -1; margin-top: 26px; aspect-ratio: 3 / 2; }
}
/* L'option IA suit la même règle : texte à gauche, visuels à droite.
   Colonne texte et bloc avant/après sont deux items côte à côte sur
   UNE SEULE ligne auto (aucun grid-row fixe, aucun span) : chacun
   garde sa propre hauteur, l'un ne peut plus étirer ni décaler l'autre. */
@media (min-width: 861px) {
.ia__inner { align-items: start; }
.ia__col { grid-column: 1 / span 5; }
.ia__ba { grid-column: 7 / -1; }
}

/* Héros produit : le packshot doit être lisible et entier ---------- */
.ihero__media--produit { width: min(46%, 620px); }
.ihero__media--produit img {
  object-fit: contain;
  object-position: center;
  padding: clamp(16px, 2.4vw, 40px) clamp(10px, 1.6vw, 26px);
  filter: brightness(1.28) contrast(1.04) saturate(1.05);
}
/* Voile fortement allégé : on ne mange plus le produit */
.ihero__media--produit::after {
  background:
    linear-gradient(90deg, var(--noir) 0%, rgba(5,5,5,0.55) 12%, rgba(5,5,5,0.06) 40%, rgba(5,5,5,0) 100%),
    radial-gradient(ellipse 62% 58% at 62% 50%, rgba(8, 28, 84, 0.16), transparent 72%);
}
@media (max-width: 860px) {
.ihero__media--produit { width: 100%; height: clamp(280px, 46vh, 400px); }
.ihero__media--produit img { padding: 14px; }
.ihero__media--produit::after {
    background: linear-gradient(0deg, var(--noir), rgba(5,5,5,0) 42%);
  }
}

/* Héros produit · variante PHOTO (photobooth, livre d'or) : la photo
   réelle occupe le cadre en cover, voile juste assez marqué pour que le
   titre reste lisible à gauche — le produit reste identifiable d'emblée. */
.ihero__media--photo { width: min(52%, 700px); }
.ihero__media--photo img { object-fit: cover; filter: brightness(1.06) saturate(1.03); }
.ihero__media--photo::after {
  background:
    linear-gradient(90deg, var(--noir) 0%, rgba(5,5,5,0.72) 14%, rgba(5,5,5,0.18) 46%, rgba(5,5,5,0) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.40), rgba(5,5,5,0) 30%),
    linear-gradient(0deg, rgba(5,5,5,0.45), rgba(5,5,5,0) 32%);
}
@media (max-width: 860px) {
  .ihero__media--photo { width: 100%; height: clamp(260px, 42vh, 380px); }
  .ihero__media--photo::after {
    background: linear-gradient(0deg, var(--noir), rgba(5,5,5,0) 48%),
                linear-gradient(180deg, rgba(5,5,5,0.30), rgba(5,5,5,0) 40%);
  }
}

/* ---- 4.4 · Pastilles en rouge --------------------------------- */
.badges--rouge li {
  color: var(--blanc);
  border-color: var(--rouge-30);
  background: rgba(208, 38, 24, 0.10);
}
.badges--rouge li:hover { color: var(--blanc); border-color: var(--rouge); background: var(--rouge); }

/* ---- 4.5 · Tarifs : TTC sous le HT ----------------------------- */
.tarif__ttc {
  margin-top: -12px;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--t55);
}
.tarifs__note {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 52em;
  font-size: 0.85rem; line-height: 1.7; color: var(--t55);
}

/* ---- 4.6 · Option IA : mention « liste non limitative » --------- */
.ia__universes-more {
  border-color: transparent !important;
  background: none !important;
  color: var(--bleu-clair) !important;
  padding-left: 4px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.78rem !important;
}

/* ---- 4.7 · Layouts classés par type d'événement ---------------- */
.layouts__lead { max-width: 42em; margin-top: clamp(22px, 3vh, 34px); color: var(--t72); font-size: 1rem; line-height: 1.7; }
/* Nombre de catégories variable (on ne publie que celles qui ont du
   contenu réel) : flex plutôt que grille fixe — les catégories se
   répartissent la largeur quel qu'en soit le nombre, jamais de trou. */
.layouts__cats {
  display: flex; flex-wrap: wrap;
  gap: clamp(30px, 4vw, 60px);
  margin-top: clamp(46px, 6vh, 76px);
}
.layouts__cat { flex: 1 1 260px; min-width: 0; }
.layouts__cat-title {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rouge);
  padding-bottom: 12px; border-bottom: 1px solid var(--rouge-20);
}
.layouts__cat .layouts__grid { margin-top: 18px; max-width: none; }
/* EN ATTENTE CLIENT : emplacement dimensionné pour les layouts à venir */
.layout-item--slot {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  border-style: dashed; border-color: rgba(250, 250, 247, 0.14);
  background: rgba(250, 250, 247, 0.015);
}
.layout-item--slot span {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--t30);
}
@media (max-width: 860px) {.layouts__cats { grid-template-columns: 1fr; } }

/* ---- 4.6 bis · Option IA · visuels avant/après officiels --------
   Découpes à fond transparent (photo ronde + flèches bleu/rouge de la
   charte + rendu IA) : ni cadre, ni fond, ni recadrage — sinon les
   flèches et la découpe seraient rognées. */
.ia__ba {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}
.ia__ba-item { flex: none; margin: 0; min-width: 0; }
.ia__ba-item img { width: 100%; max-height: 40vh; height: auto; display: block; object-fit: contain; }
.ia__ba-cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rouge);
}

/* ---- 4.8a · Déroulement de la prestation · 4 étapes ------------- */
.deroul__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(50px, 7vh, 90px);
}
.etape {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 24px;
  border-top: 2px solid var(--rouge-30);
  transition: border-color 0.5s var(--ease-out);
}
.etape:hover { border-top-color: var(--rouge); }
.etape__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1;
  color: var(--rouge); letter-spacing: -0.02em;
}
.etape__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1;
}
.etape__text { color: var(--t72); font-size: 0.9rem; line-height: 1.65; }
@media (max-width: 900px) {.deroul__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 4vw, 34px); } }
@media (max-width: 540px) {.deroul__grid { grid-template-columns: 1fr; } }

/* ================================================================
   37 · PASSE 15 · PAGE DEVENIR FRANCHISÉ
   ================================================================ */

/* ---- 8.2 · Opportunité de marché -------------------------------- */
.marche .container { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 30px); row-gap: 8px; }
.marche .eyebrow { grid-column: 1 / -1; }
.marche .title { grid-column: 1 / -1; max-width: none; }
.marche__text {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vh, 50px);
  max-width: 60em; color: var(--t72); font-size: 1rem; line-height: 1.75;
}
.marche__text p + p { margin-top: 1.1em; }
.marche__grid {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(48px, 6vh, 82px);
}
.offre {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--ligne);
  background: rgba(250, 250, 247, 0.015);
  border-top: 2px solid var(--rouge-30);
  transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-main);
}
.offre:hover { border-top-color: var(--rouge); transform: translateY(-5px); }
.offre__media { overflow: hidden; border: 1px solid var(--ligne); background: #0A0A0A; aspect-ratio: 4 / 3; }
.offre__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offre__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 1;
}
.offre__text { color: var(--t72); font-size: 0.9rem; line-height: 1.65; }
.encart {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap;
  margin-top: clamp(30px, 4vh, 48px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border: 1px solid var(--accent-30);
  background: linear-gradient(100deg, rgba(59, 87, 217, 0.10), rgba(59, 87, 217, 0) 62%);
}
.encart__flag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blanc); background: var(--bleu); padding: 6px 12px;
}
.encart__text { flex: 1 1 300px; color: var(--t72); font-size: 0.95rem; line-height: 1.65; }
.marche .section-cta { grid-column: 1 / -1; }
@media (max-width: 980px) {.marche__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- 8.3 · Tableau comparatif ---------------------------------- */
.pourquoi__text { margin-top: clamp(26px, 3.6vh, 42px); max-width: 46em; color: var(--t72); font-size: 1rem; line-height: 1.75; }
.pourquoi__sub { margin-top: clamp(50px, 7vh, 84px); color: var(--rouge); }
.pourquoi__conclusion {
  margin-top: clamp(44px, 6vh, 72px); max-width: 52em;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border-left: 2px solid var(--rouge);
  background: rgba(208, 38, 24, 0.08);
  font-size: 1rem; line-height: 1.7; color: var(--blanc);
}
.vs { margin-top: clamp(40px, 5vh, 64px); border-top: 1px solid var(--ligne); }
.vs__head, .vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 34px); }
.vs__head {
  padding: 18px 0;
  border-bottom: 1px solid var(--ligne);
  position: sticky; top: 60px; z-index: 2;
  background: var(--noir);
}
.vs__title {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.vs__title--seul { color: var(--t55); }
.vs__title--tfb { color: var(--rouge); }
.vs__row { border-bottom: 1px solid var(--ligne); }
.vs__cell {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  font-size: 0.92rem; line-height: 1.55;
}
.vs__cell--seul { color: var(--t55); }
.vs__cell--tfb { color: var(--blanc); }
.vs__mark { flex: 0 0 auto; font-size: 0.85rem; line-height: 1.6; }
/* Palette stricte : la croix reste rouge, la validation passe en bleu
   client (pas de vert, hors charte) — glyphes en couleur, aucun aplat. */
.vs__mark--no { color: var(--rouge); }
.vs__mark--yes { color: var(--bleu-clair); }
/* Mobile : chaque ligne devient une carte, colonnes empilées et
   rappelées par leur libellé. */
@media (max-width: 760px) {
.vs__head { display: none; }
.vs__row {
    grid-template-columns: 1fr; gap: 0;
    padding: 14px 0;
  }
.vs__cell { padding: 7px 0; }
.vs__cell::before {
    content: "Seul"; flex: 0 0 auto;
    font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--t30);
    min-width: 3.6em; padding-top: 0.2em;
  }
.vs__cell--tfb::before { content: "TFB"; color: var(--rouge); }
}

/* ---- 8.4 · Pack Entrepreneur ----------------------------------- */
.packs__intro { margin-top: clamp(26px, 3.6vh, 42px); max-width: 52em; color: var(--t72); font-size: 1rem; line-height: 1.75; }
.packs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(48px, 6vh, 84px);
}
.pack {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--ligne);
  background: rgba(250, 250, 247, 0.015);
  border-top: 2px solid var(--rouge-30);
  transition: border-color 0.5s var(--ease-out);
}
.pack:hover { border-top-color: var(--rouge); }
.pack__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--rouge); }
.pack__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.05;
}
.pack__list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.pack__list li {
  position: relative; padding-left: 16px;
  color: var(--t72); font-size: 0.88rem; line-height: 1.55;
}
.pack__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--rouge);
}
@media (max-width: 980px) {.packs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {.packs__grid { grid-template-columns: 1fr; } }

/* ---- 8.5 · Timeline verticale, flèches descendantes ------------- */
.tl { list-style: none; margin-top: clamp(48px, 6vh, 84px); max-width: none; }
.tl__step { position: relative; display: flex; gap: clamp(18px, 2.4vw, 34px); padding-bottom: clamp(34px, 4.6vh, 58px); }
.tl__step::before {
  content: ""; position: absolute;
  left: calc(clamp(38px, 4vw, 54px) / 2); top: clamp(38px, 4vw, 54px); bottom: 0;
  width: 1px; background: var(--rouge-30);
}
.tl__step:last-child { padding-bottom: 0; }
.tl__step:last-child::before { display: none; }
/* Flèche descendante entre deux étapes */
.tl__step::after {
  content: "\25BE";
  position: absolute; left: calc(clamp(38px, 4vw, 54px) / 2); bottom: 6px;
  transform: translateX(-50%);
  font-size: 0.85rem; color: var(--rouge);
}
.tl__step:last-child::after { display: none; }
.tl__num {
  flex: 0 0 auto;
  width: clamp(38px, 4vw, 54px); height: clamp(38px, 4vw, 54px);
  display: grid; place-items: center;
  border: 1px solid var(--rouge);
  font-family: var(--font-display); font-weight: 900;
  font-size: 0.8rem; color: var(--rouge);
  background: var(--noir);
  position: relative; z-index: 1;
}
.tl__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 1;
}
.tl__text { margin-top: 10px; color: var(--t72); font-size: 0.94rem; line-height: 1.65; }
/* Desktop : les six étapes passent en rail horizontal (même repère que
   .steps__rail côté videobooth) — la ligne verticale + flèche de
   .tl__step devient une ligne horizontale unique posée sur le conteneur,
   derrière les pastilles numérotées. Mobile : timeline verticale inchangée. */
@media (min-width: 861px) {
.tl { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 24px); position: relative; }
.tl__step { flex-direction: column; gap: 14px; padding-bottom: 0; }
.tl__step::before, .tl__step::after { display: none; }
.tl::before {
  content: "";
  position: absolute;
  left: calc(clamp(38px, 4vw, 54px) / 2); right: calc(clamp(38px, 4vw, 54px) / 2);
  top: calc(clamp(38px, 4vw, 54px) / 2);
  height: 1px;
  background: var(--sep-line);
}
}

/* ---- 8.6 · Carte de France interactive -------------------------- */
.fmap__lead { margin-top: clamp(26px, 3.6vh, 42px); max-width: 46em; color: var(--t72); font-size: 1rem; line-height: 1.75; }
.fmap {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(44px, 6vh, 76px);
}
.fmap__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.fmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fmap__outline {
  stroke: rgba(250, 250, 247, 0.22);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  fill: rgba(8, 28, 84, 0.16);
}
.fmap__pts { position: absolute; inset: 0; }
.fmap__pt {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
  /* zone tactile confortable même si le point est petit */
  padding: 10px 12px; margin: -10px -12px;
  white-space: nowrap;
}
.fmap__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bleu);
  box-shadow: 0 0 0 4px rgba(12, 39, 164, 0.22);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.fmap__name {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t55);
  transition: color 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.fmap__pt:hover .fmap__dot { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(12, 39, 164, 0.28); }
.fmap__pt:hover .fmap__name { color: var(--blanc); }
}
.fmap__pt.is-active .fmap__dot {
  background: var(--rouge);
  box-shadow: 0 0 0 6px rgba(208, 38, 24, 0.26);
  transform: scale(1.3);
}
.fmap__pt.is-active .fmap__name { color: var(--blanc); }
.fmap__pt:focus-visible { outline: 1px solid var(--bleu-clair); outline-offset: 2px; }
/* Les villes de l'Est débordent : on rabat le libellé à gauche du point */
.fmap__pt[data-city="Strasbourg"], .fmap__pt[data-city="Nice"], .fmap__pt[data-city="Marseille"] { flex-direction: row-reverse; }

.fmap__panel {
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--rouge);
  background: rgba(250, 250, 247, 0.015);
}
.fmap__panel-flag {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rouge);
}
.fmap__panel-city {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 1;
}
.fmap__panel-region {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bleu-clair);
}
.fmap__panel-desc { margin-top: 18px; color: var(--t72); font-size: 0.94rem; line-height: 1.65; }
.fmap__panel-cta { margin-top: clamp(22px, 3vh, 32px); }
.fmap__note { margin-top: clamp(26px, 3.4vh, 40px); color: var(--t55); font-size: 0.88rem; }
@media (max-width: 900px) {
.fmap { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
.fmap__stage { max-width: 460px; margin-inline: auto; }
.fmap__name { font-size: 0.55rem; letter-spacing: 0.1em; }
}
@media (max-width: 480px) {
/* Sur très petit écran les libellés se chevauchent : seuls les points
     restent, la ville sélectionnée est annoncée par le panneau. */
  .fmap__name { display: none; }
.fmap__pt { padding: 14px; margin: -14px; }
}

/* ---- 8.7 · Profil du candidat ---------------------------------- */
.profil .container { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 30px); row-gap: 8px; }
.profil .eyebrow { grid-column: 1 / -1; }
.profil .title { grid-column: 1 / span 7; max-width: none; }
.profil__media {
  grid-column: 8 / -1; grid-row: 2 / span 4;
  margin: clamp(28px, 4vh, 50px) 0 0;
  overflow: hidden; border: 1px solid var(--ligne); background: #0A0A0A;
  aspect-ratio: 3 / 4;
}
.profil__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil__intro { grid-column: 1 / span 6; grid-row: 3; margin-top: clamp(28px, 4vh, 50px); color: var(--t72); font-size: 1rem; line-height: 1.75; }
.profil__list { grid-column: 1 / span 6; grid-row: 4; list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.profil__list li {
  position: relative; padding-left: 24px;
  color: var(--blanc); font-size: 0.98rem; line-height: 1.55;
}
.profil__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--rouge); font-size: 0.9rem;
}
.profil__concl { grid-column: 1 / span 6; grid-row: 5; margin-top: 28px; color: var(--t72); font-size: 0.95rem; line-height: 1.7; }
.profil .section-cta { grid-column: 1 / -1; grid-row: 6; }
@media (max-width: 900px) {
.profil .title, .profil__media, .profil__intro, .profil__list, .profil__concl { grid-column: 1 / -1; grid-row: auto; }
.profil__media { aspect-ratio: 3 / 2; }
}

/* ---- 8.8 · FAQ franchise sur toute la largeur -------------------- */
.faq__grid--large { grid-template-columns: 1fr; }
.faq__grid--large .faq__list { max-width: 900px; }

/* ---- Page 404 · même charte, aucune dépendance JS ---------------- */
.err404__logo { width: clamp(120px, 16vw, 168px); height: auto; }
.err404__text { color: var(--t72); font-size: 1.02rem; line-height: 1.7; }
.err404__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.err404__links {
  display: flex; gap: clamp(14px, 2.4vw, 26px); flex-wrap: wrap; justify-content: center;
  margin-top: 10px; padding-top: 22px;
  border-top: 1px solid var(--ligne);
}
.err404__links a {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t55);
  transition: color 0.35s var(--ease-out);
}
.err404__links a:hover { color: var(--bleu-clair); }

/* ---- Liens légaux du footer --------------------------------------- */
.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a { color: var(--t55); transition: color 0.35s var(--ease-out); }
.footer__legal a:hover { color: var(--bleu-clair); }

/* ---- Pages légales (mentions, confidentialité) --------------------- */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--blanc);
  margin-top: 2.6em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--bleu-clair);
  margin-top: 1.8em;
}
.legal p, .legal li { color: var(--t72); font-size: 0.98rem; line-height: 1.75; }
.legal p + p, .legal h3 + p, .legal ul + p, .legal p + ul, .legal h2 + p { margin-top: 1em; }
.legal ul { margin-top: 0.8em; padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 0.4em; }
.legal a { color: var(--bleu-clair); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--blanc); }
.legal__updated { color: var(--t55); font-size: 0.85rem; margin-top: 10px; }
.legal mark {
  display: inline;
  background: rgba(208, 38, 24, 0.16);
  color: var(--rouge);
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 7px;
  border: 1px solid var(--rouge-30);
  border-radius: 3px;
}