/* ==========================================================================
   APEX ELEC SOLUTIONS — Feuille de style principale
   Réalisation : LUMA CREATION
   Palette : graphite #0D0D0F + or #F2C94C (marque) + papier crème
   Typographie : Archivo (display, axe de largeur) + IBM Plex Sans (labeur)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices de repli à métriques ajustées
   Évite le décalage de mise en page pendant le chargement des webfonts.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plex Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%;
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Segoe UI Semibold"), local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Graphite de la marque, relevé sur apexelecsolutions.fr (#0D0D0F). */
  --ink:        #0D0D0F;
  --ink-2:      #141419;
  --ink-3:      #1F1F24;
  --ink-4:      #2A2A31;

  /* Or de la marque (#F2C94C sur graphite). L'or vif ne vit que sur surfaces
     sombres ; sur surfaces claires il descend en laiton profond pour tenir le
     contraste — exactement comme le site d'origine. */
  --gold:       #F2C94C;   /* or vif : fonds sombres, remplissages, pastilles       */
  --gold-2:     #F6D470;   /* or clair : icônes et accents sur fond sombre          */
  --gold-3:     #FBE4A6;   /* or pâle : survols sur fond sombre                     */
  --gold-soft:  #E7C97A;   /* or adouci du site d'origine                           */
  --gold-deep:  #7C5E10;   /* laiton profond : texte / icône / bordure sur fond clair (≥5:1) */
  --gold-ink:   #14110A;   /* texte posé SUR une surface dorée (12:1)               */
  --gold-tint:  rgba(242, 201, 76, 0.14);

  --cream:      #FAF7F0;
  --cream-2:    #F1ECDF;
  --white:      #FFFFFF;

  --text:       #17181C;
  --text-2:     #4B515B;
  --muted:      #667080;   /* 5.0:1 sur blanc, 4.5:1 sur crème — tenable en 13,5 px */
  --line:       #E8E1D3;
  --line-dark:  rgba(255, 255, 255, 0.10);

  --success:    #1E7A54;
  --danger:     #B3402F;

  /* Familles */
  --font-display: "Archivo", "Archivo Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Plex Fallback", "Segoe UI", system-ui, sans-serif;

  /* Échelle prose — 3 crans seulement, écart ≥ 1.23 entre deux rôles voisins */
  --t-lead:  1.3125rem;   /* 21px   — chapô, accroche de section          */
  --t-body:  1.0625rem;   /* 17px   — labeur, listes, corps de carte      */
  --t-meta:  0.84375rem;  /* 13.5px — légendes, mentions, micro-copie     */

  /* Échelle display — fluide */
  --t-d1: clamp(2.35rem, 1.42rem + 3.7vw, 4.05rem);
  --t-d2: clamp(1.8rem,  1.26rem + 2.1vw, 2.7rem);
  --t-d3: 1.375rem;   /* 22px — titre de carte : 1.29× le labeur */

  /* Interlignage */
  --lh-display: 1.04;
  --lh-heading: 1.16;
  --lh-body:    1.62;
  --lh-body-on-dark: 1.72;

  /* Rayons */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 1px 2px rgba(11, 14, 20, .05), 0 2px 8px rgba(11, 14, 20, .04);
  --sh-md: 0 2px 4px rgba(11, 14, 20, .04), 0 12px 28px rgba(11, 14, 20, .07);
  --sh-lg: 0 4px 10px rgba(11, 14, 20, .05), 0 24px 60px rgba(11, 14, 20, .12);
  --sh-gold: 0 12px 34px rgba(242, 201, 76, .30);

  /* Rythme */
  --container: 1180px;
  --gutter: 22px;
  --section-y: clamp(64px, 8vw, 118px);

  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: proportional-nums;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  line-height: var(--lh-heading);
  letter-spacing: -0.024em;
  text-wrap: balance;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 {
  font-size: var(--t-d1);
  font-weight: 750;
  font-stretch: 106%;
  line-height: var(--lh-display);
  letter-spacing: -0.032em;
}
h2 { font-size: var(--t-d2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-d3); font-weight: 650; letter-spacing: -0.014em; line-height: 1.28; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--gold-ink); }

/* Sur fond clair, le laiton profond fait un anneau lisible (5:1). */
:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur fond sombre, l'or vif prend le relais (12:1). */
.hero :focus-visible, .why :focus-visible, .page-head :focus-visible,
.footer :focus-visible, .mobile-menu :focus-visible, .cta-band :focus-visible {
  outline-color: var(--gold);
}

/* Compensation du texte clair sur fond sombre :
   plus d'interlignage et un souffle d'approche pour contrer le halo. */
.hero, .why, .page-head, .footer, .mobile-menu, .cta-band {
  --lh-body: var(--lh-body-on-dark);
  line-height: var(--lh-body-on-dark);
  letter-spacing: .006em;
}
.hero h1, .hero h2, .hero h3,
.why h1, .why h2, .why h3,
.page-head h1, .page-head h2,
.footer h4, .cta-band h2 { letter-spacing: -0.026em; }
.hero h1, .page-head h1 { letter-spacing: -0.03em; }

/* --------------------------------------------------------------------------
   3. Utilitaires de structure
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--cream { background: var(--cream-2); }

.skip-link {
  position: absolute;
  left: 16px; top: -80px;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }

/* En-tête de section --------------------------------------------------- */
.sec-head { max-width: 40ch; margin-bottom: clamp(34px, 4vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; max-width: 46ch; }
.sec-head h2 { margin-bottom: .42em; }

.lead {
  font-size: var(--t-lead);
  color: var(--text-2);
  line-height: 1.55;
  letter-spacing: -0.011em;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.006em;
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* L'or est une couleur claire : le texte du bouton principal est donc sombre (12:1). */
.btn--primary {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--sh-gold);
}
.btn--primary:hover { background: #EBBE36; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); box-shadow: var(--sh-md); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(11,14,20,.03); }

.btn--ghost-light {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }

.btn--sm { padding: 11px 20px; }
.btn--full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; }
.btn-row--center { justify-content: center; }
.btn-row--section { margin-top: 38px; }
.btn-row--after-text { margin-top: 26px; }
.btn-row--page-head { margin-top: 28px; }

/* Lien fléché ---------------------------------------------------------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--gold-deep);
  transition: gap .2s ease, color .2s ease;
}
.arrow-link .icon { width: 17px; height: 17px; }
.arrow-link:hover { gap: 13px; color: #B96C28; }
/* Cible tactile de 44 px sans décaler la mise en page. */
.arrow-link { padding-block: 8px; margin-block: -8px; }

/* --------------------------------------------------------------------------
   5. En-tête / navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 14, 20, .92);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo fourni par le client, variante fond sombre (en-tête et pied de page sont
   tous deux sur --ink). Le nom de l'entreprise est porté par l'aria-label du lien,
   d'où alt="" : sans quoi les lecteurs d'écran annoncent le nom deux fois. */
.brand { display: flex; align-items: center; flex: none; padding-block: 4px; }

.brand__logo {
  display: block;
  width: auto;
  height: var(--brand-logo-h, 30px);
  /* Le SVG est déclaré en 2038 × 592 : la hauteur pilote, la largeur suit. */
}

/* En-tête de 74 px : 40 px de logo laissent 17 px de respiration de part et
   d'autre. Au-delà, le logo touche le filet du bas. */
.header .brand__logo { --brand-logo-h: 40px; }
.footer .brand__logo { --brand-logo-h: 52px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.nav__link {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: -.008em;
  color: rgba(255,255,255,.82);
  transition: color .18s ease, background-color .18s ease;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.10); }

.header__actions { display: flex; align-items: center; gap: 10px; margin-left: 10px; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 600;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  padding: 9px 4px;
  white-space: nowrap;
}
.header__phone .icon { color: var(--gold-2); width: 19px; height: 19px; }
.header__phone:hover { color: var(--gold-3); }

/* Burger --------------------------------------------------------------- */
.burger {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #fff;
  place-items: center;
}
.burger .icon { width: 24px; height: 24px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* Menu mobile ---------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--ink);
  padding: 26px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -.026em;
  color: #fff;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu__link .icon { color: var(--gold-2); }

.mobile-menu__actions { display: grid; gap: 12px; margin-top: 30px; }

.mobile-menu__meta {
  margin-top: 30px;
  color: rgba(255,255,255,.55);
  font-size: var(--t-meta);
  line-height: 1.9;
}
.mobile-menu__meta strong { color: #fff; font-weight: 600; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px);
}

/* Une seule lueur d'or, discrète, derrière la fiche de droite —
   pas de champ de grille décoratif. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -6%;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(242,201,76,.22) 0%, rgba(242,201,76,0) 62%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(38px, 5vw, 74px);
  align-items: center;
}

/* Sur-titre éditorial : un filet d'or, pas une pastille à pastille verte. */
.hero__kicker {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold-soft);
}
/* Le filet s'aligne sur la première ligne, même quand le libellé passe à la ligne. */
.hero__kicker::before {
  content: "";
  width: 42px; height: 2px;
  margin-top: .6em;
  background: linear-gradient(90deg, var(--gold), rgba(242,201,76,0));
  flex: none;
}

.hero h1 { color: #fff; margin-bottom: 22px; max-width: 17ch; }

/* Le seul accent coloré du titre : un trait d'or sous la phrase clé,
   pas un mot recoloré. */
.u-underline {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 92%;
  /* 3 px est calibré pour un titre. Sur du texte courant, le trait s'affine
     via --u-trait, sinon il écrase la ligne. */
  background-size: 100% var(--u-trait, 3px);
  padding-bottom: 2px;
}

.hero__sub {
  font-size: var(--t-lead);
  color: rgba(255,255,255,.78);
  max-width: 48ch;
  margin-bottom: 32px;
  line-height: 1.6;
  letter-spacing: -.008em;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line-dark);
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-meta);
  color: rgba(255,255,255,.76);
}
.hero__proof .icon { width: 18px; height: 18px; color: var(--gold-2); }

/* Fiche de contact : l'objet d'un artisan, pas une maquette de logiciel.
   Elle porte le chemin « appel immédiat », que la colonne de gauche laisse
   à la demande de devis. */
.hero__card {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  padding: 30px 30px 26px;
  overflow: hidden;
}
/* Liseré d'or sur la tranche haute. */
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 40%, rgba(242,201,76,0) 100%);
}

.hero__card-label {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 12px;
}

.hero__card-phone {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.hero__card-phone .icon {
  width: 30px; height: 30px;
  color: var(--gold);
  flex: none;
}
.hero__card-phone:hover { color: var(--gold-3); }
.hero__card-phone:hover .icon { color: var(--gold-2); }

.hero__card-sub {
  margin-top: 14px;
  font-size: var(--t-meta);
  color: rgba(255,255,255,.66);
  line-height: 1.55;
  max-width: 34ch;
}

.hero__card-divider {
  height: 1px;
  background: var(--line-dark);
  margin: 22px 0;
}

.hero__card-meta { display: grid; gap: 14px; margin: 0; }
.hero__card-meta > div {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 14px;
  align-items: baseline;
}
.hero__card-meta dt {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero__card-meta dd {
  margin: 0;
  font-size: var(--t-meta);
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Bandeau de réassurance
   -------------------------------------------------------------------------- */
.trustbar { background: var(--white); border-bottom: 1px solid var(--line); }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.trustbar__item {
  background: var(--white);
  padding: 26px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.trustbar__item .icon { color: var(--gold-deep); margin-top: 2px; }
.trustbar__t {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--t-body);
  letter-spacing: -.018em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.trustbar__s { font-size: var(--t-meta); color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   8. Cartes services
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* L'élévation se déclare une fois : bordure au repos, ombre au survol. */
.card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-md); }

.card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--gold-tint);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.card__icon .icon { width: 26px; height: 26px; }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: var(--t-body); margin-bottom: 18px; }

.card__list { margin-bottom: 22px; display: grid; gap: 9px; }
.card__list li {
  display: flex;
  gap: 10px;
  font-size: var(--t-body);
  color: var(--text-2);
  line-height: 1.5;
}
.card__list .icon { width: 17px; height: 17px; color: var(--gold-deep); margin-top: 5px; }

.card__foot { margin-top: auto; padding-top: 4px; }

/* Le bénéfice porte l'argument de vente : il ne descend pas sous la taille
   du labeur. Il se distingue par son fond et son intitulé, pas par sa petitesse. */
.card .card__benefit {
  margin-bottom: 18px;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  background: var(--cream-2);
  font-size: var(--t-body);
  color: var(--text-2);
  line-height: 1.6;
}
.card__benefit strong { color: var(--ink); font-weight: 600; }

/* Même bloc, hors carte : sur les pages détaillées, la mesure doit rester lisible. */
.card__benefit--wide { max-width: 56ch; }

/* --------------------------------------------------------------------------
   9. Présentation (split)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media { position: relative; }

.media-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(155deg, #26262C 0%, #161619 100%);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 4.2;
}
.media-frame svg { width: 100%; height: 100%; }

.stat-badge {
  position: absolute;
  left: -18px; bottom: 28px;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--sh-lg);
  display: grid;
  gap: 3px;
  min-width: 172px;
}
.stat-badge__v {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 750;
  font-stretch: 104%;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-deep);
  line-height: 1;
}
.stat-badge__l { font-size: var(--t-meta); color: var(--muted); line-height: 1.45; }

.sign {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 15px;
}
.sign__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ink-3), var(--ink));
  color: var(--gold-2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
  flex: none;
  border: 2px solid var(--gold);
}
.sign__n { font-family: var(--font-display); font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-size: var(--t-body); }
.sign__r { font-size: var(--t-meta); color: var(--muted); }

/* Liste à puces cuivre -------------------------------------------------- */
.check-list { display: grid; gap: 16px; margin: 26px 0; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; }
.check-list .icon {
  width: 22px; height: 22px;
  flex: none;
  color: var(--gold-deep);
  margin-top: 3px;
}
.check-list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--ink);
  font-size: var(--t-body);
  margin-bottom: 3px;
}
.check-list span { font-size: var(--t-body); color: var(--text-2); line-height: 1.6; max-width: 66ch; }

/* --------------------------------------------------------------------------
   10. Pourquoi nous choisir
   -------------------------------------------------------------------------- */
.why { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.why::before {
  content: "";
  position: absolute;
  left: -10%; bottom: -30%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(242,201,76,.22) 0%, rgba(242,201,76,0) 68%);
  pointer-events: none;
}
.why .container { position: relative; z-index: 2; }
.why h2, .why h3 { color: #fff; }
.why .lead { color: rgba(255,255,255,.72); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.why__item {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.why__item:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.why__item .icon { color: var(--gold-2); margin-bottom: 18px; width: 28px; height: 28px; }
.why__item h3 { font-size: var(--t-d3); margin-bottom: 10px; }
.why__item p { font-size: var(--t-body); color: rgba(255,255,255,.66); line-height: 1.68; }

/* --------------------------------------------------------------------------
   11. Galerie
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

/* Chaque tuile est prête à recevoir une photo réelle :
   remplacer le bloc .tile__art par <img src="..." alt="..."> */
.tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(155deg, #25252B 0%, #141418 100%);
  aspect-ratio: 4 / 3;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tile__art { position: absolute; inset: 0; display: grid; place-items: center; }
.tile__art svg { width: 46%; height: auto; color: rgba(227,154,84,.62); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 16px;
  background: linear-gradient(to top, rgba(8,11,16,.9) 20%, transparent);
  color: #fff;
}
.tile__cap b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 650;
  letter-spacing: -.018em;
}
.tile__cap span { font-size: var(--t-meta); color: rgba(255,255,255,.62); }

.gallery-note {
  margin-top: 22px;
  font-size: var(--t-meta);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ---------------------------------------------------------------------------
   Carrousel « wiggling » — types d'intervention
   Reproduction en vanilla du composant React wiggling-cards : les cartes voisines
   pivotent, floutent et s'estompent selon leur distance au centre.
   Sans JS (pas de .is-ready), la piste redevient un simple défilement horizontal
   avec accroche — le contenu reste entièrement atteignable.
   --------------------------------------------------------------------------- */
.wig { --wig-card: 300px; --wig-gap: 26px; }

/* Les cartes latérales s'effacent au lieu d'être tranchées net par overflow:hidden.
   Le fondu ne dépasse jamais la gouttière — l'espace entre le bord et la carte
   centrale, soit (largeur − carte) / 2 — sinon il mordrait sur la carte lue, ce
   qui arrive dès 375 px de large. Les 2 px retirés absorbent les arrondis. */
.wig__viewport {
  overflow: hidden;
  padding-block: 26px;
  --wig-fade: min(7vw, calc((100% - var(--wig-card)) / 2 - 2px), 120px);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--wig-fade),
    #000 calc(100% - var(--wig-fade)),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--wig-fade),
    #000 calc(100% - var(--wig-fade)),
    transparent 100%);
}

.wig__track {
  display: flex;
  gap: var(--wig-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.wig__track::-webkit-scrollbar { display: none; }

.wig__item {
  flex: 0 0 var(--wig-card);
  scroll-snap-align: center;
  scroll-margin-inline: 20px;
}
.wig__item .tile { aspect-ratio: 4 / 5; }

/* Mode piloté par JS : le défilement natif cède la place au transform de la piste. */
.wig.is-ready .wig__track {
  overflow: visible;
  scroll-snap-type: none;
  padding-inline: calc(50% - var(--wig-card) / 2);
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}
.wig.is-ready.is-dragging .wig__track { cursor: grabbing; }
.wig.is-ready .wig__item {
  transform: rotate(var(--r, 0deg));
  filter: blur(var(--b, 0px));
  opacity: var(--o, 1);
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              filter    .45s cubic-bezier(.22,.61,.36,1),
              opacity   .45s cubic-bezier(.22,.61,.36,1);
}
/* Pendant le glissé, la carte suit le doigt : aucune transition, sinon ça traîne. */
.wig.is-ready.is-dragging .wig__item { transition: none; }
.wig.is-ready.is-dragging .wig__track { transition: none; }

.wig__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}

.wig__btn {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wig__btn:hover:not(:disabled) { background: var(--cream-2); transform: translateY(-2px); }
.wig__btn:disabled { opacity: .35; cursor: default; }
.wig__btn .icon { width: 20px; height: 20px; }
.wig__btn[data-wig-prev] .icon { transform: rotate(180deg); }

.wig__dots { display: flex; align-items: center; gap: 9px; }
/* Toutes les pastilles occupent la même largeur ; l'active s'allonge par un
   scaleX sur le ::before. Animer `width` ferait recalculer la mise en page à
   chaque image — le transform reste sur le compositeur. */
/* La pastille visible ne fait que 8 px, mais le bouton occupe 30 × 46 px :
   sous 48 px de haut, la cible devient difficile à viser au pouce. */
.wig__dot {
  position: relative;
  width: 30px; height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wig__dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--r-pill);
  background: var(--line);
  transition: transform .25s ease, background .25s ease;
}
.wig__dot[aria-current="true"]::before {
  transform: scaleX(3.25);
  background: var(--gold-deep);
}

/* Annonce du changement de carte aux lecteurs d'écran, invisible à l'œil. */
.wig__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .wig { --wig-card: min(78vw, 290px); --wig-gap: 18px; }
}

/* Mouvement réduit : plus de rotation ni de flou, seule l'opacité distingue le centre. */
@media (prefers-reduced-motion: reduce) {
  .wig.is-ready .wig__item {
    transform: none !important;
    filter: none !important;
    transition: opacity .2s linear;
  }
}

/* ---------------------------------------------------------------------------
   Vignette cliquable + modale de chantier
   --------------------------------------------------------------------------- */
.tile--open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tile--open:hover .tile__more { background: var(--gold); color: var(--gold-ink); }
.tile--open:hover img { transform: scale(1.04); }
.tile--open img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }

.tile__more {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(13,13,15,.68);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background .25s ease, color .25s ease;
}
.tile__more svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colonne flex : quand la fenêtre est basse, c'est la photo qui cède, pas le
   texte, et la modale tient d'un seul tenant. Sans ça, sous ~800 px de haut,
   les quatre modales se mettaient à défiler et le dernier repère passait sous
   la ligne de flottaison. Le recadrage est absorbé par object-fit: cover. */
.shot {
  width: min(680px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  color: var(--text);
  overflow: hidden auto;
  box-shadow: var(--sh-lg);
}

/* Le display N'EST PAS posé sur .shot mais sur .shot[open]. Le navigateur cache
   une <dialog> fermée via `dialog:not([open]) { display: none }` ; or une règle
   d'auteur l'emporte sur celle du navigateur quelle que soit la spécificité.
   Un `display: flex` sur .shot affichait donc les quatre modales fermées en
   plein flux, sous la galerie. */
.shot[open] {
  display: flex;
  flex-direction: column;
}
.shot::backdrop { background: rgba(8,9,12,.72); backdrop-filter: blur(5px); }

/* Ouverture et fermeture en zoom : la modale jaillit de la vignette cliquée puis
   y retourne. Une <dialog> modale est centrée dans la fenêtre par le navigateur :
   la translater de (centre de la vignette − centre de la fenêtre) pose donc son
   centre exactement sur la vignette, sans jamais avoir à mesurer la modale
   elle-même — mesure qui, juste après showModal(), renvoie encore la position en
   flux du dialogue. script.js ne fournit que --shot-dx / --shot-dy ; sans JS ou
   sans ces valeurs, le zoom part du centre de l'écran, ce qui reste correct. */
.shot.is-opening { animation: shot-zoom .3s cubic-bezier(.22,.61,.36,1) both; }
.shot.is-opening::backdrop { animation: shot-veil .3s ease both; }

.shot.is-closing { animation: shot-zoom .2s cubic-bezier(.55,.06,.68,.19) reverse both; }
.shot.is-closing::backdrop { animation: shot-veil .2s ease reverse both; }

@keyframes shot-zoom {
  from {
    opacity: 0;
    transform: translate(var(--shot-dx, 0px), var(--shot-dy, 0px)) scale(.34);
  }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes shot-veil {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Confort de lecture : le zoom disparaît, la modale reste pleinement utilisable.
   script.js lit la même préférence et ferme alors sans délai d'attente. */
@media (prefers-reduced-motion: reduce) {
  .shot.is-opening, .shot.is-closing,
  .shot.is-opening::backdrop, .shot.is-closing::backdrop { animation: none; }
}

.shot__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(13,13,15,.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s ease;
}
.shot__close:hover { background: var(--ink); }
.shot__close .icon { width: 18px; height: 18px; }

/* flex: 0 1 auto + min-height:0 — la photo se comprime quand la place manque,
   sans jamais s'étirer au-delà de 46vh. En dessous de 130 px elle n'apprend
   plus rien au visiteur : c'est le plancher. */
.shot__img {
  display: block;
  width: 100%;
  flex: 0 1 auto;
  min-height: 130px;
  max-height: 46vh;
  object-fit: cover;
  background: var(--ink-3);
}

.shot__body { flex: 0 0 auto; padding: 26px 28px 30px; }
.shot__eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.shot__body h4 {
  font-family: var(--font-display);
  font-size: var(--t-d2);
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 10px;
}
.shot__body > p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.shot__facts {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 10px;
}
.shot__facts li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}
/* Puce dorée : sur fond clair, l'or descend en laiton pour rester lisible. */
.shot__facts li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
}

@media (max-width: 560px) {
  .shot__body { padding: 22px 20px 26px; }
  /* Sur un téléphone, le texte occupe bien plus de lignes : on rend à la modale
     la hauteur qu'on peut et on descend le plancher de la photo. Un reliquat de
     défilement subsiste sur les écrans les plus courts — le réduire davantage
     supposerait de rogner le texte du chantier, ce qui n'est pas à nous. */
  .shot { max-height: 92vh; }
  .shot__img { min-height: 110px; max-height: 38vh; }
}

/* ---------------------------------------------------------------------------
   Réalisations : avant / après
   Les photos sont des portraits iPhone (3:4). Le ratio 3/4 est imposé aux deux
   vignettes d'une paire pour que la comparaison reste lisible : deux hauteurs
   différentes cassent la lecture avant/après.
   --------------------------------------------------------------------------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.ba { margin: 0; }

.ba__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ba__shot {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 3 / 4;
}
.ba__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ba__tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
/* « Avant » : gris neutre, il ne doit pas concurrencer le résultat. */
.ba__tag--before { background: rgba(13,13,15,.82); color: #fff; }
/* « Après » : or vif + encre sombre (12:1), c'est le point d'arrivée du regard. */
.ba__tag--after  { background: var(--gold); color: var(--gold-ink); }

.ba__cap { margin-top: 14px; }
.ba__cap b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-d3);
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--text);
}
.ba__cap span {
  display: block;
  margin-top: 4px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}

/* Sous-titre de section, plus discret que le titre principal. */
.sec-head--sub { margin-top: 62px; }
.sec-head--sub h3 {
  font-family: var(--font-display);
  font-size: var(--t-d2);
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
}

/* Les photos réelles sont en portrait : ratio 3:4 au lieu du 4:3 des vignettes. */
.gallery--photos .tile { aspect-ratio: 3 / 4; }

@media (max-width: 560px) {
  .ba__pair { gap: 6px; }
  .ba__tag { font-size: .68rem; padding: 4px 8px; }
}
.gallery-note .icon { width: 17px; height: 17px; color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   12. Engagements
   Tant qu'aucun avis client réel n'existe, cette section tient le rôle de
   réassurance sans rien affirmer d'invérifiable. Elle sera remplacée par
   les avis Google dès leur collecte (voir le repère dans index.html).
   -------------------------------------------------------------------------- */
.pledge {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.pledge__intro h2 { margin-bottom: .4em; }

/* Prise de parole signée de Mathieu Bonnavent, entre guillemets français.
   Le trait d'or est affiné : 3 px, calibré pour un titre, alourdirait la ligne. */
.pledge__quote { --u-trait: 2px; }

/* Second paragraphe d'intro : un cran sous le chapô, il enchaîne sur les engagements. */
.pledge__lead-2 {
  margin-top: 14px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}
.pledge__cite {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-meta);
  color: var(--muted);
  font-style: normal;
}
.pledge__cite b { display: block; color: var(--ink); font-weight: 600; font-size: var(--t-body); margin-bottom: 2px; }

.pledge__list {
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pledge__list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 26px;
}
.pledge__list li + li { border-top: 1px solid var(--line); }

.pledge__num {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
}
.pledge__num .icon { width: 20px; height: 20px; }

.pledge__list b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-d3);
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.3;
}
/* Cible le seul texte descriptif — pas la pastille .pledge__num, qui est
   aussi un <span> et dont ce sélecteur écrasait le centrage et la couleur. */
.pledge__list div > span { display: block; max-width: 68ch; font-size: var(--t-body); color: var(--text-2); line-height: 1.6; }

.pledge__note {
  margin-top: 26px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-meta);
  color: var(--muted);
  line-height: 1.6;
  max-width: 74ch;
}
.pledge__note .icon { width: 17px; height: 17px; color: var(--gold-deep); flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   13. Zone d'intervention
   -------------------------------------------------------------------------- */
.zone__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 4vw, 60px); align-items: center; }

.cities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text);
}
.city .icon { width: 15px; height: 15px; color: var(--gold-deep); }
.city--more { background: var(--gold-tint); border-color: transparent; color: var(--gold-deep); font-weight: 600; }

.map-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-2);
  min-height: 330px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 330px; border: 0; display: block; filter: grayscale(.28) contrast(1.03); }

.map-frame--compact { min-height: 260px; margin-bottom: 16px; }
.map-frame--compact iframe { min-height: 260px; }

/* --------------------------------------------------------------------------
   14. Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, #1A222E 0%, var(--ink) 55%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 62px);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -8%; top: -60%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(242,201,76,.34) 0%, rgba(242,201,76,0) 65%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; max-width: 16ch; }
.cta-band p { color: rgba(255,255,255,.74); max-width: 44ch; font-size: var(--t-body); }
.cta-band__micro {
  margin-top: 16px;
  font-size: var(--t-meta);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 8px;
}
.cta-band__micro .icon { width: 16px; height: 16px; color: var(--gold-2); flex: none; }
.cta-band__actions { display: grid; gap: 12px; min-width: 250px; }

/* --------------------------------------------------------------------------
   15. Page contact
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  right: -5%; top: -70%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(242,201,76,.26) 0%, rgba(242,201,76,0) 66%);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { color: #fff; max-width: 18ch; }
.page-head p { color: rgba(255,255,255,.74); max-width: 58ch; font-size: var(--t-lead); line-height: 1.6; letter-spacing: -.008em; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); color: rgba(255,255,255,.55); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--gold-2); }
.breadcrumb .icon { width: 14px; height: 14px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.info-card + .info-card { margin-top: 18px; }
.info-card h3 { font-size: var(--t-d3); margin-bottom: 18px; }

.info-list { display: grid; gap: 4px; }
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.info-row__ico {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--gold-tint);
  color: var(--gold-deep);
  display: grid; place-items: center;
}
.info-row__ico .icon { width: 19px; height: 19px; }
.info-row__l {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.info-row__v { font-weight: 600; color: var(--ink); font-size: var(--t-body); line-height: 1.45; }
.info-row__v a { font-variant-numeric: tabular-nums; }
.info-row__v a:hover { color: var(--gold-deep); }
.info-row__v small { display: block; font-weight: 400; font-size: var(--t-meta); color: var(--muted); margin-top: 4px; line-height: 1.5; }
.info-row__v--plain { font-weight: 400; font-size: var(--t-body); line-height: 1.55; }

.hours { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-body);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row span { color: var(--text-2); }
.hours__row b { font-weight: 600; color: var(--ink); }
.hours__row--off b { color: var(--muted); font-weight: 400; }

.info-note { margin-top: 16px; font-size: var(--t-meta); color: var(--muted); line-height: 1.65; }

/* Formulaire ------------------------------------------------------------ */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 38px);
  position: relative;
}
.form-card h2 { font-size: var(--t-d3); margin-bottom: 8px; }
.form-card__intro { color: var(--text-2); font-size: var(--t-body); margin-bottom: 26px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label { font-size: var(--t-meta); font-weight: 600; color: var(--ink); letter-spacing: .002em; }
.field label .req { color: var(--gold-deep); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 40px; }
/* Le texte indicatif doit rester lisible : 5.1:1 sur le fond crème du champ. */
.field ::placeholder { color: #626B79; opacity: 1; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--gold-tint);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); background: #FDF6F5; }

.field__err { font-size: var(--t-meta); color: var(--danger); display: none; }
.field.has-error .field__err { display: block; }
.field__err--consent { margin-top: 6px; }

.form-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--t-meta);
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 4px;
}
.form-consent input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--gold-deep); flex: none; }
.form-consent a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.form-foot { margin-top: 22px; display: grid; gap: 14px; }
.form-micro { font-size: var(--t-meta); color: var(--muted); display: flex; align-items: center; gap: 9px; justify-content: center; text-align: center; }
.form-micro .icon { width: 16px; height: 16px; color: var(--success); flex: none; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Confirmation ---------------------------------------------------------- */
.form-success {
  display: none;
  text-align: center;
  padding: 22px 8px 10px;
}
.form-success.is-visible { display: block; animation: pop .45s cubic-bezier(.2,.8,.3,1.1); }
.form-success__ico {
  width: 66px; height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(30,122,84,.10);
  color: var(--success);
  display: grid; place-items: center;
}
.form-success__ico .icon { width: 32px; height: 32px; stroke-width: 2; }
.form-success h3 { margin-bottom: 10px; }
.form-success p { color: var(--text-2); font-size: var(--t-body); max-width: 40ch; margin-inline: auto; margin-bottom: 22px; }

@keyframes pop {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 74ch; margin-inline: auto; display: grid; gap: 12px; }

.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.faq__item.is-open { border-color: #D9CFBF; box-shadow: var(--sh-sm); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-d3);
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.35;
  color: var(--ink);
}
.faq__q:hover { color: var(--gold-deep); }
.faq__q .icon { flex: none; color: var(--gold-deep); transition: transform .28s ease; }
.faq__item.is-open .faq__q .icon { transform: rotate(180deg); }

/* Ouverture par piste de grille : interpolable, sans mesure JavaScript
   et sans recalcul au redimensionnement.
   Le div intermédiaire ne porte QUE overflow:hidden — sans rembourrage, il
   peut donc se replier entièrement à 0. Le rembourrage vit sur le <p> interne,
   qui est alors clippé quand la réponse est fermée. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.16, 1, .3, 1);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { min-height: 0; overflow: hidden; }

.faq__a-body {
  margin: 0;
  padding: 2px 22px 22px;
  color: var(--text-2);
  font-size: var(--t-body);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.68); padding-block: clamp(50px, 6vw, 76px) 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
}
.footer h4 {
  font-family: var(--font-display);
  color: #fff;
  font-size: var(--t-meta);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .11em;
  margin-bottom: 18px;
}
.footer__about { font-size: var(--t-meta); line-height: 1.8; margin-top: 18px; max-width: 34ch; }
.footer__links { display: grid; gap: 11px; }
.footer__links a { font-size: var(--t-meta); transition: color .18s ease; }
.footer__links a:hover { color: var(--gold-2); }

.footer__contact { display: grid; gap: 14px; }
.footer__contact a, .footer__contact div { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-meta); line-height: 1.55; }
.footer__contact a[href^="tel"] { font-variant-numeric: tabular-nums; }
.footer__contact .icon { width: 18px; height: 18px; color: var(--gold-2); flex: none; margin-top: 2px; }
.footer__contact a:hover { color: #fff; }

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-meta);
  color: rgba(255,255,255,.5);
}
.footer__bottom a:hover { color: var(--gold-2); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__credit { color: rgba(255,255,255,.42); }
.footer__credit span { color: rgba(255,255,255,.62); }
.footer__bottom--bare { border-top: 0; }

/* --------------------------------------------------------------------------
   18. Barre d'action mobile
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,14,20,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dark);
}
.action-bar .btn { flex: 1; padding: 13px 12px; font-size: var(--t-body); }

/* --------------------------------------------------------------------------
   19. Pages simples (mentions légales / 404)
   -------------------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.55rem; margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-d3); margin-top: 26px; }
.prose p, .prose li { color: var(--text-2); font-size: var(--t-body); line-height: 1.72; }
.prose ul { display: grid; gap: 9px; margin: 0 0 1.1em; padding-left: 22px; list-style: disc; }
.prose a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose__updated { margin-top: 40px; font-size: var(--t-meta); color: var(--muted); }

.error-page {
  min-height: 66vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 80px;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--gold-deep);
  opacity: .22;
  margin-bottom: -10px;
}
.error-page .lead { max-width: 48ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   20. Le moment
   Une seule séquence animée sur tout le site : l'ouverture du hero.
   Aucune animation au défilement — une entrée identique répétée à chaque
   section est un tic, pas une intention.

   L'état par défaut est l'état visible : sans JavaScript, sans animation,
   ou en mouvement réduit, la page s'affiche telle quelle.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Le même geste, à la même position structurelle : ouverture de l'accueil
     et ouverture des pages intérieures partagent une seule courbe. */
  .hero__kicker,
  .hero h1,
  .hero__sub,
  .hero .btn-row,
  .hero__proof,
  .page-head .breadcrumb,
  .page-head h1,
  .page-head > .container > p,
  .page-head .btn-row {
    animation: rise .85s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .hero__kicker, .page-head .breadcrumb       { animation-delay: .04s; }
  .hero h1, .page-head h1                     { animation-delay: .11s; }
  .hero__sub, .page-head > .container > p     { animation-delay: .19s; }
  .hero .btn-row, .page-head .btn-row         { animation-delay: .27s; }
  .hero__proof                                { animation-delay: .35s; }

  /* La fiche arrive de plus loin : la netteté se fait en même temps que la montée. */
  .hero__card {
    animation: settle 1.15s cubic-bezier(.16, 1, .3, 1) .14s backwards;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.985);
    filter: blur(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__card { max-width: 520px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; }
  .zone__grid { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .nav, .header__actions { display: none; }
  .burger { display: grid; }
  .pledge { grid-template-columns: 1fr; gap: 30px; }
  .trustbar__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .media-frame { aspect-ratio: 16 / 11; }
  .stat-badge { left: 16px; bottom: -18px; }
}

@media (max-width: 720px) {
  :root { --t-lead: 1.2rem; }
  body { padding-bottom: 74px; }
  .action-bar { display: flex; }
  .header { --header-h: 66px; }
  /* En-tête raccourci : le logo suit, sinon il vient lécher le filet du bas. */
  .header .brand__logo { --brand-logo-h: 34px; }
  .trustbar__grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: stretch; }
  .cta-band__actions { min-width: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .btn-row .btn { flex: 1 1 100%; }
  .hero__proof { gap: 10px 18px; }
  .hero h1, .page-head h1 { max-width: none; }
}

@media (max-width: 420px) {
  /* Sur les très petits écrans, le logo cède la place au bouton d'appel. */
  .header .brand__logo { --brand-logo-h: 29px; }
  .card { padding: 26px 22px; }
}

/* --------------------------------------------------------------------------
   22. Impression
   -------------------------------------------------------------------------- */
@media print {
  .header, .action-bar, .mobile-menu, .cta-band, .map-frame { display: none !important; }
  body { background: #fff; color: #000; }
}