/* =============================================================================
   style.css  ·  Innolive, offre vidéo de bien
   -----------------------------------------------------------------------------
   Aucune couleur, aucun rayon, aucune durée en dur : tout vient de tokens.css.

   Sommaire
     0  polices              9  bénéfices (chiffres fantômes)
     1  socle               10  packages
     2  typographie         11  options
     3  grilles, helpers    12  bande défilante
     4  utilitaires         13  cadrage du prix
     5  boutons             14  rendez-vous
     6  en-tête             15  process (frise)
     7  hero                16  preuves (mosaïque)
     8  bandes sombres      17  référence, avis, faq, contact, à propos
                            18  pied de page, sticky, lightbox
                            19  responsive
                            20  mouvement réduit
============================================================================= */

/* ------------------------------------------------------------- 0. POLICES ---
   Self-hosted, WOFF2 uniquement, zéro CDN. Les fichiers sont à déposer dans
   assets/fonts/ (voir README.txt du dossier). En leur absence, la pile
   système prend le relais sans casser la mise en page.                      */
/* Police d'affichage de la charte : Integral CF. Le fichier « 900 » est en
   réalité la coupe ExtraBold, mappée sur le poids 900 utilisé partout pour les
   titres. Oblique pour les mots en italique des titres (//mot//). */
@font-face {
  font-family: 'Integral CF';
  src: url('../fonts/integralcf-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Integral CF';
  src: url('../fonts/integralcf-900-italic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- 1. SOCLE --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* L’en-tête est fixe : sans cette marge, une ancre place la cible sous lui. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--ls-section);
  line-height: var(--lh-title);
  margin: 0;
  overflow-wrap: break-word;
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--bleu); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--bleu-hover); }

img, video, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sombre :focus-visible, .hero :focus-visible {
  outline-color: var(--white);
}

.skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

.section { padding-block: var(--section-y); position: relative; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------- 2. TYPOGRAPHIE ------ */
/* Casse normale, jamais de capitales sur les titres : c’est le geste du site
   Innolive. Les capitales sont réservées aux surlignes et à la bande
   défilante. L’italique 900 ouvre les sections. */

.t-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-tight);
}

.t-section {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-section);
  letter-spacing: var(--ls-section);
  /* 1.1 minimum : un italique à jambages se fait rogner à 1. */
  line-height: var(--lh-title);
}

.t-sub { font-size: var(--fs-sub); }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 46ch;
}
.t-lead--clair { color: rgba(255, 255, 255, 0.92); }

.t-note { font-size: var(--fs-small); color: var(--muted); }
.sombre .t-note, .hero .t-note { color: var(--bleu-light); }

/* Italique d’ouverture de section : le mot ou le membre de phrase accentué.
   Réserve en bas pour les jambages, et pas de rognage horizontal. */
.t-hero em, .t-section em, .statement em {
  font-style: italic;
  color: var(--orange-cta);
  padding-right: 0.06em;
}
.sombre .t-hero em, .sombre .t-section em,
.hero .t-hero em, .statement em { color: var(--orange); }

/* Aplat de couleur dans un titre : le geste maison. */
.t-hero mark, .t-section mark, .statement mark {
  background: var(--bleu);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 0 0.34em 0.1em;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.t-hero mark.orange, .t-section mark.orange, .statement mark.orange {
  background: var(--orange-cta);
}

/* Surligne de section. Quota de charte : une pour trois sections maximum.
   14 sections, donc 4 au plus : hero, packages, rendez-vous, preuves. */
.overline {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--muted);
}
.overline::before {
  content: "";
  width: 0.625rem; height: 0.625rem;
  border-radius: 3px;
  background: var(--orange);
  flex: 0 0 auto;
}
.overline--bleu::before { background: var(--bleu); }
.overline--sur-sombre { color: var(--bleu-light); }

/* Titre de bloc, plus petit que t-section : options, référence, avis. */
.t-bloc {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--muted);
  margin: 0 0 var(--sp-4);
}
.sombre .t-bloc { color: var(--bleu-light); }

/* En-tête de section : titre à gauche, chapeau décalé à droite. */
.tete {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.tete__intro { max-width: 48ch; }

/* ------------------------------------------- 3. GRILLES, HELPERS ---------- */
/* Les items de grille ont min-width: auto : un champ, un mot long ou une
   image y impose sa largeur intrinsèque et fait déborder la page. Bug
   constaté à 360px sur le bloc de cadrage, qui débordait de 21px. */
.tete > *,
.benefices__liste > *,
.packages__grille > *,
.cadrage__grille > *,
.cadrage__cols > *,
.rdv__grille > *,
.process__grille > *,
.preuves__bande > *,
.reference__grille > *,
.expertise__grille > *,
.pilier__liste > *,
.pourquoi__grille > *,
.pourquoi__liste > *,
.pourquoi__item > *,
.contact__grille > *,
.apropos__grille > *,
.options__carte > *,
.options__items > *,
.autres__liste > *,
.hero__faits > * { min-width: 0; }

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.m-0 { margin: 0; }

/* Icône : taille et couleur héritées, contour uniforme via le sprite. */
.icone {
  width: 1.5rem; height: 1.5rem;
  flex: 0 0 auto;
  color: var(--bleu);
}
.icone--sm { width: 1.125rem; height: 1.125rem; }
.sombre .icone { color: var(--bleu-light); }

/* Pastille d’icône : carré arrondi teinté, le contenant des icônes de section. */
.pastille {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--bleu);
  flex: 0 0 auto;
}
.sombre .pastille {
  background: var(--sur-sombre-1);
  box-shadow: var(--edge-sombre);
  color: var(--bleu-light);
}
/* Variante reduite, pour les puces de liste : la classe etait deja posee dans
   le HTML (benefices, options, raisons) mais n'avait aucune regle. */
.pastille--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); }
.pastille--sm .icone { width: 1.125rem; height: 1.125rem; }

/* ------------------------------------------------------- 4. UTILITAIRES --- */
/* Grain filmique : un seul élément fixe, non cliquable, hors de tout
   conteneur qui défile. Sur un conteneur scrollable, le recalcul GPU continu
   détruit la fluidité sur mobile. */
.grain-fixe {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: var(--r-pill); filter: blur(130px); }
.aurora span:nth-child(1) {
  right: -10rem; top: -12rem;
  width: 38rem; height: 38rem;
  background: rgba(31, 107, 255, 0.14);
  animation: drift-a 20s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  left: -8rem; bottom: -10rem;
  width: 28rem; height: 28rem;
  background: rgba(255, 77, 0, 0.10);
  animation: drift-b 26s ease-in-out infinite;
}
/* Sur fond sombre, les halos doivent monter en opacité pour rester lisibles. */
.aurora--dark span:nth-child(1) { background: rgba(31, 107, 255, 0.28); }
.aurora--dark span:nth-child(2) { background: rgba(255, 77, 0, 0.20); }

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, 40px) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 50px) scale(1.18); }
}

/* Révélation au scroll. .is-in est posée par le JS. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-reveal),
              transform var(--dur-reveal) var(--ease-reveal);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Cascade : le délai vient de --i, posé par le JS sur chaque enfant. */
.stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-hero) var(--ease-hero),
              transform var(--dur-hero) var(--ease-hero);
  transition-delay: calc(var(--i, 0) * 0.09s + 0.05s);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.no-js .stagger > * { opacity: 1; transform: none; }

/* Révélation par masque : le titre monte derrière une fenêtre. Effet
   éditorial, réservé aux titres de section. */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-mask) var(--ease-hero);
}
.mask.is-in > span { transform: none; }
.no-js .mask > span { transform: none; }

/* ---------------------------------------------------------- 5. BOUTONS ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-ui) var(--ease-reveal),
              background-color var(--dur-ui),
              border-color var(--dur-ui),
              box-shadow var(--dur-ui);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* L’icône avance légèrement au survol : retour tactile, pas décoration. */
.btn__icone {
  width: 1.125rem; height: 1.125rem;
  transition: transform var(--dur-ui) var(--ease-reveal);
}
.btn:hover .btn__icone { transform: translateX(3px); }

.btn-primary {
  background: var(--orange-cta);
  color: var(--white);
  box-shadow: var(--shadow-cta), var(--edge-sombre);
}
.btn-primary:hover { background: var(--orange-cta-hover); color: var(--white); }

.btn-bleu {
  background: var(--bleu);
  color: var(--white);
  box-shadow: var(--shadow-bleu), var(--edge-sombre);
}
.btn-bleu:hover { background: var(--bleu-hover); color: var(--white); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* Sur fond sombre ou photographique. */
.btn-ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border-color: var(--sur-sombre-filet-fort);
  backdrop-filter: blur(6px);
}
.btn-ghost-dark:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.btn-blanc { background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-blanc:hover { background: var(--white); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-small); min-height: var(--tap); }

/* ---------------------------------------------------------- 6. EN-TÊTE ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding: var(--sp-4) 0;
  transition: background-color var(--dur-ui), box-shadow var(--dur-ui),
              padding var(--dur-ui);
}
.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.site-header__brand img { height: 2rem; width: auto; }

/* État par défaut : posé sur le hero sombre, donc en blanc. */
.site-nav { display: flex; align-items: center; gap: var(--sp-2); }
.site-nav__lien {
  display: none;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-ui), color var(--dur-ui);
}
.site-nav__lien:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* État après le hero : fond clair, texte encre. */
.site-header.is-solide {
  background: rgba(254, 254, 254, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
  padding: var(--sp-3) 0;
}
.site-header.is-solide .site-header__brand { color: var(--ink); }
.site-header.is-solide .site-nav__lien { color: var(--muted); }
.site-header.is-solide .site-nav__lien:hover { background: var(--surface); color: var(--ink); }
.site-header.is-solide .btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.site-header.is-solide .btn-ghost-dark:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- 7. HERO ---- */
/* Famille de mise en page : bande pleine hauteur, média plein cadre, contenu
   aligné à gauche. Jamais de hero centré. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;   /* deux colonnes texte + formulaire : centrage vertical */
  min-height: 100dvh;   /* jamais 100vh : la barre d’adresse iOS fait sauter */
  padding: 7rem 0 var(--sp-6);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Voile de lisibilité : deux dégradés superposés couvrent tous les plans.
   Le texte est ancré là où le média est le plus sombre. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(27,27,27,0.72) 46%, rgba(27,27,27,0.34)),
    linear-gradient(to right, rgba(27,27,27,0.88), rgba(27,27,27,0.30) 58%, rgba(27,27,27,0.08));
}
.hero .aurora { z-index: -1; }

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero .t-hero { margin-bottom: var(--sp-5); max-width: 26ch; }
/* Empeche la coupure d'un mot sur son trait d'union (ex : « Saint-Étienne »). */
.nowrap { white-space: nowrap; }
.hero .t-lead { margin-bottom: var(--sp-6); max-width: 52ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

/* Trois faits, pas trois promesses. Séparés par des filets, pas des cartes. */
.hero__faits {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--sur-sombre-filet);
}
.hero__fait { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__fait dt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: var(--ls-section);
  line-height: 1;
}
.hero__fait dd {
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Hero à deux colonnes : texte à gauche, formulaire à droite ---------
   Mobile : une colonne, le texte puis le formulaire. Desktop : deux colonnes
   alignées, le formulaire posé en carte de verre sur le média sombre. */
.hero__inner { display: grid; gap: var(--sp-7); }
.hero__texte, .hero__form-col { min-width: 0; }

.hero-form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--sur-sombre-1);
  border: 1px solid var(--sur-sombre-filet);
  box-shadow: var(--shadow-pop), var(--edge-sombre);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-form__titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-title);
  color: var(--white);
}
.hero-form__sous {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}
.hero-form__duo { display: grid; gap: var(--sp-4); }

/* Champs clairs sur fond sombre, comme .contact__form. */
.hero-form .field label { color: var(--white); }
.hero-form .field__wrap { background: var(--white); border-color: transparent; }
.hero-form .field__wrap:focus-within { box-shadow: 0 0 0 3px var(--white); }
.field__wrap--area { align-items: stretch; padding: var(--sp-3) var(--sp-4); }
.hero-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  padding: 0;
  resize: vertical;
  min-height: 3.25rem;
}
.hero-form textarea:focus { outline: none; }

.hero-form__statut {
  margin: 0;
  min-height: 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
}
.hero-form__statut[data-etat="erreur"] { color: var(--bleu-light); }

/* Honeypot : hors écran, jamais focalisable, invisible à l'œil et à l'AT. */
.hero-form__pot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--sp-9);
  }
  .hero-form { padding: var(--sp-7); }
  .hero-form__duo { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- 8. BANDES SOMBRES ------ */
.sombre {
  background: var(--ink);
  color: var(--white);
  position: relative;
  isolation: isolate;
}
.sombre .t-section, .sombre h3, .sombre h4 { color: var(--white); }
.sombre p { color: rgba(255, 255, 255, 0.86); }
.sombre a { color: var(--bleu-light); }
.sombre a:hover { color: var(--white); }

/* --------------------------------------------- 9. BÉNÉFICES, INDEX --------
   Index à filets pleine largeur. Le chiffre occupe sa propre colonne : dans
   la version précédente il était posé en absolu et passait derrière le titre.
   Aucune carte ici, la section suit déjà deux blocs de cartes. */
.benefices__liste {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: benefice;
}
.benefice {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color var(--dur-ui);
}
.benefice:hover { background: var(--surface); }

.benefice__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  /* Filigrane mesuré à 2.06:1 sur le fond : présent, jamais concurrent. */
  color: color-mix(in srgb, var(--bleu) 50%, var(--background));
  font-variant-numeric: tabular-nums;
}
.benefice__titre-bloc {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.benefice__titre {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-section);
  margin: 0;
}
.benefice__texte { margin: 0; color: var(--muted); max-width: 60ch; }

/* ------------------------------------- 9 bis. EXPERTISE, DEUX PILIERS -----
   Deux colonnes egales, pas trois cartes : la section suit l'index des
   benefices (des filets, aucune carte) et precede les realisations. Une carte
   blanche sur fond --surface suffit a la detacher, sans ombre portee. */
.section--expertise { background: var(--surface); }

.expertise__grille { display: grid; gap: var(--sp-5); }

.pilier {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-6);
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-clair);
}
.pilier__tete { display: flex; align-items: center; gap: var(--sp-4); }
.pilier__etiquette {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--bleu);
}
.pilier__titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-title);
}
.pilier__texte { margin: 0; color: var(--muted); max-width: 44ch; }

/* Le chiffre du pilier : une promesse verifiable, pas un argument. */
/* Empile sur mobile : cote a cote, la legende tombait sur quatre lignes dans
   une colonne de 120px. Passe en ligne des la tablette (media 48rem). */
.pilier__chiffre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-md);
}
.pilier__chiffre strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-section);
  color: var(--bleu);
  white-space: nowrap;
}
.pilier__chiffre span { font-size: var(--fs-small); color: var(--muted); }

/* Les points ne portent pas d'icone : la page en compte deja beaucoup. Une
   puce carree de 8px, la meme que celle des surlignes. */
.pilier__liste {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pilier__point { position: relative; display: grid; gap: 0.125rem; padding-left: var(--sp-5); }
.pilier__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 2px;
  background: var(--bleu);
}
.pilier__point strong { font-weight: 600; }
.pilier__point span { font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------- 9 ter. POURQUOI NOUS, REASSURANCE --
   Les raisons a gauche en index a filets, l'avis client a droite en carte
   sombre. Cette carte remplace l'ancienne section « reference ». */
.pourquoi__grille { display: grid; gap: var(--sp-7); align-items: start; }

.pourquoi__liste {
  display: grid;
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pourquoi__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.pourquoi__item-titre {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
}
.pourquoi__item p { margin: 0; font-size: var(--fs-small); color: var(--muted); }

.pourquoi__avis {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-pop), var(--edge-sombre);
}
.pourquoi__avis .t-bloc { margin: 0; }
.pourquoi__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--bleu-light);
}
/* Les etoiles restent orange sur le fond sombre : 4.3:1, au-dessus des 3:1
   exiges pour un element graphique porteur de sens. */
.pourquoi__etoiles { display: inline-flex; gap: 2px; }
.pourquoi__etoiles .icone { color: var(--orange); }
/* .avis figcaption est en --muted plus bas dans le fichier : illisible sur
   --ink. On le repasse en bleu clair, avec une specificite superieure. */
.pourquoi__avis .avis figcaption { color: var(--bleu-light); }
/* Filet de separation avant le texte de reference : sans lui, la note se lit
   comme la suite de la signature de l'avis. */
.pourquoi__avis-note {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sur-sombre-filet);
}

/* ---------------------------------------------------- 10. PACKAGES --------
   Composant central de la page. Grille inégale, la formule médiane est plus
   large, surélevée et sombre. On évite volontairement les trois cartes
   égales côte à côte. */
.section--packages { background: var(--surface); }

.packages__grille { display: grid; gap: var(--sp-5); align-items: start; }

.pkg {
  --mx: 50%; --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--bleu-light);
  border-radius: var(--r-2xl);
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  box-shadow: var(--edge-clair);
  transition: box-shadow var(--dur-ui) var(--ease-reveal),
              border-color var(--dur-ui), transform var(--dur-ui) var(--ease-reveal);
}
.pkg:hover { border-color: var(--bleu); box-shadow: var(--shadow-lift), var(--edge-clair); }

/* Halo suivant le curseur. Les coordonnées viennent du JS via --mx et --my.
   Aucune ombre externe lumineuse : une lueur interne, sous le contenu. */
.pkg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--mx) var(--my),
              rgba(31, 107, 255, 0.10), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-ui);
  pointer-events: none;
}
.pkg:hover::before { opacity: 1; }
.pkg > * { position: relative; }

/* Étiquette de titre en pastille pleine posée sur le bord supérieur. */
.pkg__tag {
  position: absolute;
  top: 0; left: var(--sp-5);
  transform: translateY(-50%);
  background: var(--bleu);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: var(--edge-sombre);
}

/* La formule recommandée est sombre : elle sort du lot sans mentir sur sa
   popularité, et casse l’alignement des trois cartes. */
.pkg--reco {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-lift), var(--edge-sombre);
}
.pkg--reco .pkg__tag { background: var(--orange-cta); }
.pkg--reco::before {
  background: radial-gradient(22rem circle at var(--mx) var(--my),
              rgba(31, 107, 255, 0.30), transparent 62%);
}
.pkg--reco .pkg__promesse, .pkg--reco .pkg__resume li { color: rgba(255,255,255,0.88); }
.pkg--reco .pkg__resume { border-top-color: var(--sur-sombre-filet); }
.pkg--reco .pkg__resume li::before { background: var(--orange); }
.pkg--reco .pkg__prix span { color: var(--bleu-light); }

.pkg__reco {
  position: absolute;
  top: 0; right: var(--sp-5);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--background);
  border: 1px solid var(--orange-cta);
  color: var(--orange-cta);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.pkg__prix {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-price);
  line-height: 1;
  letter-spacing: var(--ls-hero);
  margin: var(--sp-3) 0 0;
  font-variant-numeric: tabular-nums;
}
.pkg__prix span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: var(--sp-2);
}

.pkg__promesse { font-weight: 500; margin: var(--sp-4) 0; }

/* Résumé toujours visible, carte fermée : le prospect compare sans cliquer. */
.pkg__resume {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.pkg__resume li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: var(--sp-2);
  align-items: start;
  font-size: var(--fs-small);
}
.pkg__resume li::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  margin-top: 0.6em;
  border-radius: 2px;
  background: var(--bleu);
}

/* Le déclencheur est un vrai bouton, navigable au clavier. */
.pkg__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-ui), border-color var(--dur-ui);
}
.pkg__toggle:hover { border-color: var(--bleu); background: var(--bleu-light); }
.pkg--reco .pkg__toggle {
  background: var(--sur-sombre-1);
  border-color: var(--sur-sombre-filet-fort);
  color: var(--white);
}
.pkg--reco .pkg__toggle:hover { background: var(--sur-sombre-2); border-color: var(--white); }

.pkg__signe { position: relative; width: 1.25rem; height: 1.25rem; }
.pkg__signe::before, .pkg__signe::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-reveal);
}
.pkg__signe::before { width: 0.8rem; height: 2px; transform: translate(-50%, -50%); }
.pkg__signe::after  { width: 2px; height: 0.8rem; transform: translate(-50%, -50%); }
.pkg__toggle[aria-expanded="true"] .pkg__signe::after { transform: translate(-50%, -50%) scaleY(0); }

/* Panneau : visible par défaut, fermé seulement quand le JS pose [hidden].
   Une panne de JS laisse le détail lisible au lieu de le rendre inaccessible. */
.pkg__panneau { padding-top: var(--sp-5); }
.pkg__panneau[hidden] { display: none; }

.pkg__livrables { display: grid; gap: var(--sp-4); }
.pkg__livrable {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--sp-2) var(--sp-3);
}
.pkg__livrable .icone { grid-row: span 2; margin-top: 0.15rem; }
.pkg__livrable dt { font-weight: 600; font-size: var(--fs-small); }
.pkg__livrable dd {
  grid-column: 2;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.pkg--reco .pkg__livrable dd { color: rgba(255, 255, 255, 0.78); }
.pkg--reco .icone { color: var(--bleu-light); }

/* ----------------------------------------------------- 11. OPTIONS --------
   Même fond que les packages, aucun espace au-dessus : la carte se lit comme
   le prolongement des trois formules, pas comme une section de plus. */
.section--options {
  background: var(--surface);
  padding-top: 0;
  padding-bottom: var(--section-y);
}

.options__carte {
  display: grid;
  gap: var(--sp-5);
  background: var(--background);
  border: 1px solid var(--bleu-light);
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--edge-clair);
}
.options__intro { display: grid; gap: var(--sp-2); }
.options__items { display: grid; gap: var(--sp-5); }

.option {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.option__titre {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: var(--ls-section);
  margin: 0;
}
.option__prix {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: var(--ls-hero);
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.option__benefice { font-size: var(--fs-small); color: var(--muted); margin: 0; }

/* -------------------------------------------- 13. CADRAGE DU PRIX --------
   Famille de mise en page : deux colonnes, formulaire clair et résultat
   sombre. */
.cadrage__grille { display: grid; gap: var(--sp-7); align-items: start; }
.cadrage__intro { max-width: 46ch; }

.cadrage__form {
  display: grid;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.field { display: grid; gap: var(--sp-2); }
.field label { font-weight: 600; font-size: var(--fs-small); }
.field__wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--background);
  padding: 0 var(--sp-4);
}
/* Anneau de focus redessiné, pas supprimé : --bleu-light ne fait que 1.3:1
   sur le fond, ce qui ne signale rien. Anneau de 3px en --bleu (4.52:1). */
.field__wrap:focus-within {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu);
}
@media (forced-colors: active) {
  .field input:focus { outline: 2px solid; outline-offset: 2px; }
}
.field input {
  flex: 1 1 auto;
  /* min-width: auto est la largeur intrinsèque du champ, environ 180px : sans
     ce 0, le champ force sa piste de grille et fait déborder la page. */
  min-width: 0;
  width: 100%;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  padding: 0;
}
.field input:focus { outline: none; }
.field__suffixe { color: var(--muted); font-weight: 600; white-space: nowrap; }
.field__erreur { color: var(--orange-cta); font-size: var(--fs-small); font-weight: 600; }

.cadrage__resultat {
  display: grid;
  gap: var(--sp-5);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--edge-sombre);
}
.cadrage__resultat[data-empty="true"] .cadrage__lignes { display: none; }
.cadrage__label { font-size: var(--fs-small); color: var(--bleu-light); margin: 0 0 var(--sp-2); }
.cadrage__honoraires {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-price);
  line-height: 1;
  letter-spacing: var(--ls-hero);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}
.cadrage__lignes { display: grid; gap: var(--sp-4); }
.cadrage__ligne { display: grid; gap: var(--sp-2); }
.cadrage__ligne-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}
.cadrage__part { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Jauge : on anime scaleX, jamais width. */
.cadrage__jauge { height: 3px; background: var(--sur-sombre-filet); border-radius: 2px; overflow: hidden; }
.cadrage__jauge span {
  display: block; height: 100%;
  background: var(--bleu-light);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-reveal) var(--ease-reveal);
}
.cadrage__conclusion, .cadrage__vide {
  font-size: var(--fs-small);
  color: var(--bleu-light);
  margin: 0;
}

/* ------------------------------------------------ 14. RENDEZ-VOUS --------
   Famille de mise en page : bande sombre pleine largeur, chiffre dominant à
   gauche, calendrier à droite. */
.rdv__grille { display: grid; gap: var(--sp-7); align-items: start; }
.rdv__intro { max-width: 44ch; }
.rdv__chiffre {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--white);
  margin-top: var(--sp-6);
}
.rdv__chiffre-legende {
  font-size: var(--fs-small);
  color: var(--bleu-light);
  max-width: 26ch;
  margin-top: var(--sp-3);
}
.rdv__faits { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-6); }
.rdv__fait { display: flex; gap: var(--sp-3); align-items: flex-start; }
.rdv__fait p { margin: 0; font-size: var(--fs-small); }
.rdv__outil { font-size: var(--fs-small); color: var(--bleu-light); }

.rdv__embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--background);
  box-shadow: var(--shadow-pop);
  /* Un peu d'air entre l'agenda embarque et la liste des etapes en dessous :
     le bas de l'iframe touchait le premier numero. */
  margin-bottom: var(--sp-6);
}
.rdv__embed iframe { width: 100%; height: 38rem; border: 0; display: block; }

/* Apercu de la vraie page de reservation : on montre l'outil au lieu de
   l'annoncer. Legere inclinaison et ombre portee pour qu'il se lise comme une
   capture posee sur la bande, pas comme un bloc de la page. */
.rdv__apercu {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--background);
  box-shadow: var(--shadow-pop), var(--edge-sombre);
  border: 1px solid var(--sur-sombre-filet);
}
.rdv__apercu-img { width: 100%; height: auto; display: block; }

/* Ce que le prospect fait en ouvrant le lien. Numeros en pastille, pas de
   puces : trois gestes, pas une liste a rallonge. */
.rdv__etapes {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  counter-reset: none;
}
/* Ecart entre la derniere etape et le bouton « Ouvrir le calendrier » :
   le mt-5 generique du bouton etait trop serre sous la liste. */
.rdv__etapes + .mt-5 { margin-top: var(--sp-6); }
.rdv__etapes li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.86);
}
.rdv__etape-num {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-sm);
  background: var(--sur-sombre-2);
  box-shadow: var(--edge-sombre);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  color: var(--bleu-light);
}

/* --------------------------------------------------- 15. PROCESS ---------
   Frise. Sur mobile, rail vertical à gauche. À partir de 1024px, quatre
   colonnes et rail horizontal qui se dessine. Le rail est hors de la liste en
   cascade : dans .stagger, `transform: none` écrasait son échelle. */
.process__frise { position: relative; }

.process__rail {
  position: absolute;
  left: 1.5rem; top: 1.5rem; bottom: 1.5rem;
  width: 2px;
  background: var(--bleu-light);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ease-hero);
}
.process__frise.is-in .process__rail { transform: scaleY(1); }
.no-js .process__rail { transform: none; }

.process__grille { position: relative; display: grid; gap: var(--sp-6); }

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.etape__marqueur {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--background);
  border: 2px solid var(--bleu);
  color: var(--bleu);
  position: relative;
  z-index: 1;
  transition: transform var(--dur-ui) var(--ease-reveal),
              background-color var(--dur-ui), color var(--dur-ui);
}
.etape:hover .etape__marqueur {
  transform: translateY(-2px);
  background: var(--bleu);
  color: var(--white);
}
/* L'icône suit la couleur du marqueur : bleue sur fond clair au repos, blanche
   sur fond bleu au survol. Sans ça, .icone force du bleu et l'icône disparaît
   sur le fond bleu du hover. */
.etape__marqueur .icone { color: inherit; }
.etape__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  color: var(--bleu);
  letter-spacing: 0.04em;
}
.etape__titre {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: var(--ls-section);
  margin: var(--sp-1) 0 var(--sp-3);
}
.etape__temps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--bleu-light);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.etape__texte { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 52ch; }

/* --------------------------------------------------- 16. PREUVES ---------
   Famille de mise en page : mosaïque de tuiles inégales sur bande sombre. */
/* Trois bandes, chacune avec ses propres colonnes. Dans une rangee unique, une
   video 16:9 et une 9:16 ne peuvent pas avoir la meme hauteur sans rogner
   lourdement l'une des deux : la mosaique melangee laissait 200px de vide.
   Separees, les tuiles d'une bande ont toutes la meme hauteur. */
.preuves__bande { display: grid; gap: var(--sp-4); }
.preuves__bande + .preuves__bande { margin-top: var(--sp-5); }

/* Mobile : videos pleine largeur, photos deux par rangee. */
.preuves__videos { grid-template-columns: 1fr; }
.preuves__photos { grid-template-columns: repeat(2, 1fr); }

.preuve {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sur-sombre-1);
  box-shadow: var(--edge-sombre);
}
/* Chaque tuile porte le format exact de son media : aucun rognage. Les
   videos sont en 16:9 et 9:16 comme a la source, les photos en 4:3. */
.preuve--video.preuve--paysage  { aspect-ratio: 16 / 9; }
.preuve--video.preuve--portrait { aspect-ratio: 9 / 16; }
.preuve--paysage  { aspect-ratio: 16 / 10; }
.preuve--portrait { aspect-ratio: 3 / 4; }
.preuve.is-placeholder { aspect-ratio: 4 / 5; }
/* Les photos gardent un gabarit unique, quelle que soit leur orientation :
   sinon les rangees de la mosaique se decalent. */
.preuves__photos .preuve--photo { aspect-ratio: 4 / 3; }
.preuve__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-hero); }
.preuve:hover .preuve__img { transform: scale(1.04); }

.preuve__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(27,27,27,0.92), rgba(27,27,27,0));
  color: var(--white);
}
.preuve__legende strong { display: block; font-size: var(--fs-body); }
.preuve__legende span { font-size: var(--fs-small); color: rgba(255,255,255,0.72); }

.preuve__play, .preuve__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--white);
}
/* La photo n'a pas de pastille de lecture : le curseur et un leger
   assombrissement au survol suffisent a dire qu'elle s'ouvre. */
.preuve__zoom { cursor: zoom-in; }
.preuve__zoom:hover { background: rgba(27, 27, 27, 0.18); }
.preuve__play .icone {
  width: 3.5rem; height: 3.5rem;
  color: var(--white);
  transition: transform var(--dur-ui) var(--ease-reveal);
}
.preuve__play:hover .icone { transform: scale(1.12); }

/* Emplacement non pourvu : marqué, délibérément non cliquable. */
.is-placeholder {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(31,107,255,0.10) 0 14px, rgba(255,255,255,0.03) 14px 28px);
  border: 2px dashed var(--bleu);
}
.is-placeholder p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.is-placeholder .t-note {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.placeholder-box { border-radius: var(--r-lg); }
.placeholder-box--tall { min-height: 18rem; }
/* Sur fond clair, le placeholder reste en encre. */
.section--reference .is-placeholder,
.section--rdv:not(.sombre) .is-placeholder { color: var(--ink); }

/* ---------------------- 17. RÉFÉRENCE, AVIS, FAQ, CONTACT, À PROPOS ------ */
.reference__grille { display: grid; gap: var(--sp-7); align-items: start; }
.reference__bloc { border-left: 3px solid var(--bleu); padding-left: var(--sp-5); }
.avis blockquote { margin: 0; font-size: var(--fs-sub); font-weight: 500; line-height: 1.4; }
.avis figcaption { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }

.faq__liste { border-top: 1px solid var(--line); max-width: 64rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-4) 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-ui);
}
.faq__q:hover { color: var(--bleu); }
.faq__q .pkg__signe { color: var(--bleu); }
.faq__r { padding: 0 0 var(--sp-5); max-width: 66ch; color: var(--muted); }
.faq__r[hidden] { display: none; }

.contact__carte {
  background: var(--bleu);
  color: var(--white);
  border-radius: var(--r-3xl);
  padding: var(--sp-8) var(--sp-5);
  box-shadow: var(--shadow-bleu), var(--edge-sombre);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact__grille { display: grid; gap: var(--sp-7); align-items: start; }
.contact__carte .t-section { color: var(--white); }
/* Aucune transparence sur du texte posé sur --bleu : le blanc pur y fait
   4.56:1, et 92 % d'opacité fait tomber à 4.10:1. */
.contact__texte { color: var(--white); max-width: 38ch; }
.contact__direct { font-size: var(--fs-small); color: var(--white); }
.contact__direct a { color: var(--white); }
/* Reservation directe : la colonne remplace le formulaire. Fond blanc translucide
   pour detacher le bouton du bleu de la carte, arete interieure pour l'epaisseur. */
.contact__reserver {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
}
.contact__reserver-texte { color: var(--white); margin: 0; }

.contact__form { display: grid; gap: var(--sp-4); }
.contact__form .field label { color: var(--white); }
.contact__form .field__wrap { background: var(--white); border-color: transparent; }
.contact__form .field__wrap:focus-within { box-shadow: 0 0 0 3px var(--white); }
.contact__form .field__erreur { color: var(--white); }
.contact__statut { font-size: var(--fs-small); color: var(--white); margin: 0; }

/* Bloc email « prêt à copier » : même panneau glass que .contact__reserver, à la
   place du formulaire retiré. La réservation Cal.eu reste le chemin principal. */
.contact__mail {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
}
.contact__mail-intro { color: var(--white); margin: 0; }
.contact__mail-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.contact__mail-adresse {
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-sub);
  text-decoration: none;
  word-break: break-all;
}
.contact__mail-adresse:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__mail-copie {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.contact__mail-copie:hover { background: var(--bleu-light); }
.contact__mail-copie:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Bouton compact « Réserver un rendez-vous » : reprend .btn .btn-blanc, en plus
   petit (c'est un rappel, l'agenda embarqué reste le point d'entrée principal). */
.contact__rdv { margin-bottom: 0; }
.contact__rdv-btn { min-height: 0; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-small); }

.apropos__grille { display: grid; gap: var(--sp-6); align-items: center; }
.apropos__texte { max-width: 46ch; }
.apropos__photo {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 10;
}
.apropos__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Volontairement léger : pas de carte, pas de prix, pas de comparaison. */
.section--autres { padding-block: var(--sp-7); border-top: 1px solid var(--line); }
.autres__liste { display: grid; gap: var(--sp-4); }
.autres__item a { font-weight: 600; }
.autres__item p { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------- 18. PIED DE PAGE, STICKY, LIGHTBOX ------ */
.site-footer {
  /* Réserve en bas : la barre collante mobile fait environ 78px et ne doit
     jamais recouvrir le bas du pied de page. La réserve est annulée à 48rem,
     là où la barre disparaît. */
  padding: var(--sp-9) 0 7rem;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.statement {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: var(--ls-hero);
  max-width: 22ch;
  margin: 0 0 var(--sp-6);
}
.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--sur-sombre-filet);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.7);
}
.site-footer__bas p { margin: 0; }

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter);
  background: rgba(254, 254, 254, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  /* État de repos : hors écran ET hors de l’ordre de tabulation. On ne
     bascule aucun attribut en JS : une apparition critique ne doit pas
     dépendre d’un requestAnimationFrame, qui ne s’exécute pas dans un onglet
     qui ne compose pas. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform var(--dur-reveal) var(--ease-hero),
              visibility 0s linear var(--dur-reveal);
}
.sticky-cta.is-in {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-reveal) var(--ease-hero), visibility 0s;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(27, 27, 27, 0.94);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.lightbox[hidden] { display: none; }
.lightbox__inner { width: min(64rem, 100%); }
.lightbox__close {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3) auto;
  min-height: var(--tap);
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 1px solid var(--sur-sombre-filet-fort);
  border-radius: var(--r-pill);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--white); background: rgba(255,255,255,0.12); }
.lightbox__stage {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-pop);
}
/* Tient toujours dans la fenêtre. Une vidéo 9/16 prenait 100% de la largeur et
   débordait en hauteur : on borne par la hauteur (en laissant la place au bouton
   Fermer), l'aspect est préservé, le portrait se centre sur le fond sombre (les
   bandes latérales se confondent avec le fond de la lightbox). */
.lightbox__stage video,
.lightbox__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(80vh, calc(100dvh - 7rem));
  margin-inline: auto;
}

.noscript-block { background: var(--surface); }
.noscript-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }

/* ------------------------------------------------- 19. RESPONSIVE --------- */
@media (min-width: 48rem) {
  .section { padding-block: var(--section-y-lg); }

  .tete { grid-template-columns: 1.15fr 0.85fr; align-items: end; }

  .hero { padding: 9rem 0 var(--sp-8); }
  .hero__faits { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .hero__fait + .hero__fait { padding-left: var(--sp-6); border-left: 1px solid var(--sur-sombre-filet); }

  /* Le chiffre, le titre et le texte sur une seule ligne : l'oeil balaie
     quatre lignes au lieu de lire quatre blocs. */
  .benefice { grid-template-columns: 4.5rem minmax(14rem, 20rem) 1fr; }

  .options__carte { grid-template-columns: 14rem 1fr; gap: var(--sp-6); padding: var(--sp-7) var(--sp-6); }
  .options__items { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  /* Filets verticaux entre les options, jamais de bordure sur la première. */
  .option + .option { padding-left: var(--sp-6); border-left: 1px solid var(--line); }

  .cadrage__grille { grid-template-columns: 1fr 1fr; }
  .cadrage__cols { display: grid; gap: var(--sp-5); }

  .rdv__grille { grid-template-columns: 0.95fr 1.05fr; }


  /* Une video horizontale et une verticale par rangee.
     Le rapport 3.16 n'est pas arbitraire : pour qu'un 16:9 et un 9:16 aient la
     MEME hauteur cote a cote, la largeur du paysage doit valoir (16/9)^2 fois
     celle de la verticale. A 1225px de conteneur, ca donne 913 x 514 et
     289 x 514, soit deux tuiles exactement alignees, sans rognage ni trou.
     Les colonnes sont assignees par classe : deux paysages de suite
     s'empilent dans la colonne 1 au lieu de casser la rangee. */
  .preuves__videos { grid-template-columns: 3.16fr 1fr; }
  .preuves__videos .preuve--paysage  { grid-column: 1; }
  .preuves__videos .preuve--portrait { grid-column: 2; }
  .preuves__photos { grid-template-columns: repeat(4, 1fr); }

  .reference__grille { grid-template-columns: 1fr 1fr; }
  .expertise__grille { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .pilier { padding: var(--sp-7); }
  .pilier__chiffre { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .pourquoi__grille { grid-template-columns: 1.05fr 0.9fr; gap: var(--sp-8); }
  .pourquoi__avis { padding: var(--sp-7); }
  .contact__carte { padding: var(--sp-9) var(--sp-8); }
  .contact__grille { grid-template-columns: 1fr 1fr; }
  .apropos__grille { grid-template-columns: 1.1fr 0.9fr; }
  .autres__liste { grid-template-columns: repeat(4, 1fr); }

  /* La barre collante est un dispositif mobile. Sur desktop, le CTA est
     répété dans le flux, et le pied de page reprend sa marge normale. */
  .sticky-cta { display: none; }
  .site-footer { padding-bottom: var(--sp-7); }
}

@media (min-width: 64rem) {
  .site-nav__lien { display: inline-flex; }

  /* Frise horizontale : quatre colonnes, marqueur au-dessus du texte, rail
     qui traverse la rangée de marqueurs. */
  .process__grille { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  .etape { grid-template-columns: 1fr; gap: 0; }
  .etape__marqueur { margin-bottom: var(--sp-5); }
  .process__rail {
    left: 1.5rem; right: 1.5rem; top: 1.5rem; bottom: auto;
    width: auto; height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .process__frise.is-in .process__rail { transform: scaleX(1); }

  /* Grille inégale : la formule médiane est plus large et surélevée. */
  .packages__grille { grid-template-columns: 1fr 1.16fr 1fr; gap: var(--sp-5); }
  .pkg--reco { transform: translateY(-1.25rem); padding-bottom: var(--sp-6); }
  .pkg--reco:hover { transform: translateY(-1.6rem); }

  .cadrage__cols { grid-template-columns: 1fr 1fr; align-items: start; }
  .cadrage__grille { gap: var(--sp-8); }

  .benefice { grid-template-columns: 5rem minmax(16rem, 22rem) 1fr; gap: var(--sp-3) var(--sp-7); }
  .hero .t-hero { max-width: 22ch; }
}

/* ------------------------------------------- 20. MOUVEMENT RÉDUIT --------- */
/* Obligatoire. Tout se fige, rien ne disparaît. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .mask > span { transform: none !important; }
  .process__rail { transform: none !important; }
  .sticky-cta { transform: none; }
  .pkg--reco { transform: none !important; }
}

/* ------------------------------------------- 21. AJUSTEMENTS ------------- */
/* Retouches ciblées demandées après mise en ligne. En fin de fichier, avec une
   spécificité suffisante pour l'emporter sur les règles génériques. */

/* Vidéos verticales : sous 1024px la bande vidéo passe en une seule colonne
   (voir .preuves__videos plus haut) ; une tuile 9/16 en pleine largeur devient
   démesurée. On la borne et on la centre. Au-dessus de 1024px, elle vit déjà
   dans la colonne étroite (3.16fr / 1fr) et ce plafond n'a aucun effet. */
.preuves__videos .preuve--portrait {
  width: 100%;
  max-width: 20rem;
  justify-self: center;
}

/* La mise en paire paysage (large) + portrait (etroit) commençait a 1024px ;
   entre 640 et 1024px la verticale restait seule et pleine largeur, donc
   demesuree. On descend le palier a 640px : la rangee est appariee des la
   tablette, hauteurs egales (rapport de largeurs 3.16 = (16/9)²). Sous 640px,
   colonne unique et verticale bornee par la regle ci-dessus. */
@media (min-width: 40rem) {
  .preuves__videos { grid-template-columns: 3.16fr 1fr; }
  .preuves__videos .preuve--paysage  { grid-column: 1; }
  .preuves__videos .preuve--portrait { grid-column: 2; }
}

/* Écart resserré entre les bénéfices et le cadrage (« le prix face à une
   commission »). Double classe pour passer devant .section et sa variante
   desktop --section-y-lg. */
.section.section--benefices { padding-bottom: var(--sp-7); }
.section.section--cadrage   { padding-top: var(--sp-6); }

/* Agenda Cal.eu embarqué à la place du formulaire de contact (parité avec le
   site principal : une iframe, aucun script tiers). Cadre blanc arrondi pour
   détacher la page de réservation du fond sombre de la carte. */
.contact__agenda-cadre {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  height: 560px;
}
.contact__agenda-cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact__agenda .contact__statut { margin-top: var(--sp-4); }
.contact__agenda .contact__statut a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 64rem) {
  .contact__agenda-cadre { height: 640px; }
}

/* ------------------------------------------- 22. BANDEAU CLIENTS ---------
   Propre à cette page (création de site web). Logos clients réels sous le
   hero. Traitement neutre en niveaux de gris pour ne pas concurrencer la
   charte, retour en couleur au survol. Aucune couleur en dur : opacité et
   filtre seulement. */
.section--clients {
  padding-block: var(--sp-7);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.clients__intro {
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  text-align: center;
  margin: 0 0 var(--sp-5);
}
.clients__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-7);
}
.clients__item { display: inline-flex; align-items: center; }
.clients__item img {
  height: 2rem;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--dur-ui), filter var(--dur-ui);
}
.clients__item img:hover { opacity: 1; filter: none; }

@media (min-width: 48rem) {
  .clients__liste { gap: var(--sp-6) var(--sp-9); }
  .clients__item img { height: 2.4rem; }
}

/* ------------------------------------------- 23. RÉALISATIONS ------------
   Trois vrais sites livres, chacun dans un cadre facon navigateur (barre a
   trois points + domaine, puis la capture). La carte entiere est un lien vers
   le site en ligne. */
.realisations__grille { display: grid; gap: var(--sp-6); }

.realisation {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.realisation--lien { cursor: pointer; }

/* Cadre navigateur */
.realisation__cadre {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-ui), box-shadow var(--dur-ui);
}
.realisation--lien:hover .realisation__cadre {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.realisation--lien:focus-visible { outline: none; }
.realisation--lien:focus-visible .realisation__cadre {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

/* Fausse barre d'adresse : trois pastilles + le domaine. */
.realisation__barre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.realisation__barre i {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  flex: 0 0 auto;
}
.realisation__url {
  margin-left: var(--sp-3);
  padding: 0.15rem var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La vue : capture en 16/10, cadrée haut. */
.realisation__vue {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  overflow: hidden;
}
.realisation__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.realisation__vide {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font-size: var(--fs-small); color: var(--muted);
}

/* Legende sous le cadre. */
.realisation__legende {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-1) 0;
}
.realisation__titre {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-section);
}
.realisation__note { font-size: var(--fs-small); color: var(--muted); }

/* Libelle d'action, revele/soulige au survol de la carte. */
.realisation__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0 var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--bleu);
}
.realisation__ouvrir .icone { color: var(--bleu); transition: transform var(--dur-ui); }
.realisation--lien:hover .realisation__ouvrir .icone { transform: translateX(3px); }

.realisations__lien a { font-weight: 600; }

@media (min-width: 48rem) {
  .realisations__grille { grid-template-columns: repeat(3, 1fr); }
}