/* ==========================================================================
   ABC EXP — Système de design « Ciel »
   Blanc · encre ardoise · ambre. Une seule couleur d'action.
   Utilisé par la page d'accueil et les trois pages d'atterrissage.
   ========================================================================== */

/* --- Polices auto-hebergees ---------------------------------------------
   Servies depuis notre domaine plutot que depuis fonts.gstatic.com : cela
   supprime deux connexions tierces (DNS + TLS + HTTP) sur le chemin critique,
   et surtout la feuille de style bloquante de Google, qui retardait la
   premiere peinture du temps d'un aller-retour complet.

   `Schibsted Grotesk` est une police variable : un seul fichier couvre les
   graisses 400 a 700, d'ou la plage `font-weight:400 700`.

   `font-display:swap` affiche immediatement le texte avec la police systeme de
   repli, puis substitue. `size-adjust` et les metriques de repli reduisent le
   deplacement visuel au moment de la substitution.

   Le sous-ensemble `latin` couvre le francais, oe et ligatures comprises
   (U+0152-0153). `latin-ext` n'est declare que pour les cas limites : sa
   plage `unicode-range` empeche tout telechargement inutile. */
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/fonts/schibsted-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/fonts/schibsted-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;
  font-display:swap;src:url(/fonts/instrument-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;
  font-display:swap;src:url(/fonts/instrument-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Jetons ------------------------------------------------------------- */
:root{
  --white:#FFFFFF;
  --paper:#F6F8FB;
  --paper-2:#EDF1F7;
  --ink:#0E1B2A;
  --ink-2:#1C2E44;
  --muted:#61748C;
  /* Assez sombre pour tenir 5:1 sur blanc : ce jeton sert aux mentions les plus
     petites (« — facultatif », mention RGPD, texte indicatif des champs), donc
     precisement celles ou un gris trop clair devient illisible. */
  --muted-2:#5C6E86;
  --line:#E1E8F0;
  --line-2:#CDD8E6;

  --amber:#F0A020;
  --amber-600:#D4870C;
  /* Variante texte de l'ambre : le ton de marque tombe a 2.9:1 sur blanc, en
     dessous du minimum. Reserve aux sur-titres, jamais aux fonds ni aux traits,
     qui gardent l'ambre franc. */
  --amber-700:#A66600;
  --amber-050:#FEF6E7;

  --ok:#0B7C57;
  --ok-050:#E8F6F0;
  --err:#C2352B;

  --r-card:18px;
  --r-field:12px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(14,27,42,.05);
  --sh-2:0 6px 24px rgba(14,27,42,.09);
  --sh-3:0 24px 70px rgba(14,27,42,.18);

  --max:1240px;
  --gut:26px;

  --font:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* `scroll-padding-top` decale la cible de chaque ancre de la hauteur de
   l'en-tete fixe. Sans cette regle, cliquer « Nos chantiers » place le titre
   de section DERRIERE la barre de navigation. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media(max-width:640px){html{scroll-padding-top:88px}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
li{list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
/* `abc-formulaire.js` masque les etapes via l'attribut `hidden`. Toute regle
   `display:` posee sur ces blocs le neutraliserait silencieusement : on rend
   donc `hidden` non negociable. */
[hidden]{display:none!important}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:880px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* --- Typographie -------------------------------------------------------- */
.h-display{font-size:clamp(2.5rem,6.2vw,5rem);letter-spacing:-.04em;line-height:1.03;font-weight:600}
.h-1{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.035em;line-height:1.08}
.h-2{font-size:clamp(1.75rem,3.4vw,2.7rem);letter-spacing:-.032em;line-height:1.1}
.h-3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.022em;line-height:1.25}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.accent{color:var(--amber)}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--muted);line-height:1.6}
.small{font-size:.875rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.kicker{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-700)}
.mono{font-variant-numeric:tabular-nums}

/* --- Boutons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:1rem;line-height:1;letter-spacing:-.01em;
  padding:17px 30px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--amber);border-color:var(--amber);color:#241703;box-shadow:0 4px 16px rgba(240,160,32,.32)}
.btn--primary:hover{background:var(--amber-600);border-color:var(--amber-600)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ink:hover{background:#1C2E44;border-color:#1C2E44}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--onDark{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.7)}
/* 44 px est le minimum retenu par les recommandations d'accessibilite pour
   une action au doigt. Sur grand ecran, le curseur permet plus de finesse. */
.btn--sm{padding:12px 20px;font-size:.92rem}
@media(max-width:900px){.btn--sm{padding:13px 20px;min-height:44px}}
.btn--block{width:100%}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--ink);
  border-bottom:1.5px solid var(--amber);padding-bottom:3px;transition:gap .2s var(--ease);
}
.link-arrow:hover{gap:13px}

/* --- En-tête ------------------------------------------------------------ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease),transform .34s var(--ease);
  border-bottom:1px solid transparent;
}
/* L'en-tete se retire vers le haut quand on descend (classe posee par ciel.js).
   Ce n'est pas un effet decoratif : un en-tete fixe recouvre en permanence
   92 px de contenu, et en bas de page il rendait les liens du pied de page
   intapables au doigt — verifie sur trois telephones. Les 4 px supplementaires
   evitent qu'un reste d'ombre depasse du bord. */
.hdr.is-hidden{transform:translateY(calc(-100% - 4px))}
.hdr__in{display:flex;align-items:center;gap:34px;height:92px;transition:height .3s var(--ease)}
.hdr__brand{display:flex;align-items:center;gap:13px;font-weight:700;font-size:1.24rem;letter-spacing:-.035em;color:#fff;transition:color .3s var(--ease)}
/* Le logo porte deja le nom « ABC EXP » : le repeter en texte a cote faisait
   doublon et volait la place du logo, qui paraissait minuscule. Le fichier
   `logo-marque.webp` est le logo recadre sur son dessin (l'ancien carre de
   192 px n'etait rempli qu'a moitie en hauteur : affiche sur 56 px, le dessin
   ne mesurait que 31 px de haut). Le fichier vient desormais de l'original
   1024 px, serre sur son dessin : 360 x 195 pour un affichage a 120 x 65,
   donc net jusqu'a 3x, la ou la reduction precedente empatait deja le texte. */
.hdr__brand img{width:120px;height:65px;flex:none;transition:width .3s var(--ease),height .3s var(--ease)}
/* Le dessin est sombre a 69 % : au-dessus du heros, l'en-tete est translucide
   et l'ellipse bleu nuit s'y noyait. Une pastille claire, posee UNIQUEMENT
   dans cet etat, le detache sans rien changer sur fond blanc. */
.hdr:not(.is-solid):not(.hdr--light) .hdr__brand img{
  background:rgba(255,255,255,.95);border-radius:15px;padding:6px 11px;
  box-shadow:0 2px 10px rgba(9,18,30,.18);
}
.hdr__nav{display:flex;gap:30px;margin-left:auto;font-size:.94rem;font-weight:500}
.hdr__nav a{color:rgba(255,255,255,.86);transition:color .2s var(--ease);position:relative;padding-block:4px}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--amber);transition:right .25s var(--ease)}
.hdr__nav a:hover::after{right:0}
.hdr__nav a:hover{color:#fff}
.hdr__tel{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;color:#fff;transition:color .3s var(--ease);padding-block:5px}
.hdr__tel svg{flex:none}
/* état après défilement */
.hdr.is-solid{background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--line);box-shadow:0 1px 3px rgba(14,27,42,.05)}
.hdr.is-solid .hdr__in{height:76px}
.hdr.is-solid .hdr__brand img{width:104px;height:56px}
.hdr.is-solid .hdr__brand,.hdr.is-solid .hdr__tel{color:var(--ink)}
.hdr.is-solid .hdr__nav a{color:var(--ink-2)}
.hdr.is-solid .hdr__nav a:hover{color:var(--ink)}
/* variante page intérieure : toujours claire */
.hdr--light{background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--line)}
.hdr--light .hdr__brand,.hdr--light .hdr__tel{color:var(--ink)}
.hdr--light .hdr__nav a{color:var(--ink-2)}
/* --- Bouton et panneau de navigation mobile ----------------------------- */
.hdr__burger{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:13px;color:#fff;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.hdr.is-solid .hdr__burger,.hdr--light .hdr__burger{
  background:rgba(14,27,42,.05);border-color:var(--line);color:var(--ink)
}
/* Sous 1060 px, la navigation horizontale ne tient plus : elle etait masquee
   SANS remplacement, et le visiteur mobile n'avait plus aucun acces aux
   sections. Elle passe desormais derriere un bouton d'ouverture. */
@media(max-width:1060px){
  .hdr__nav{display:none}
  .hdr__burger{display:inline-flex}
  /* La navigation masquee portait le `margin-left:auto` qui repoussait le
     groupe de droite. Sans elle, il revient au numero de telephone. */
  .hdr__tel{margin-left:auto}
}

.hdr__burger:hover{background:rgba(255,255,255,.18)}
.hdr.is-solid .hdr__burger:hover,.hdr--light .hdr__burger:hover{background:rgba(14,27,42,.09)}
/* Les trois barres sont dessinees en CSS : une icone de plus a telecharger
   pour six pixels de trait n'a pas de sens. Elles pivotent en croix a
   l'ouverture, ce qui indique au visiteur que le meme bouton referme. */
.hdr__burger i{position:relative;width:19px;height:13px;display:block}
.hdr__burger i::before,.hdr__burger i::after,.hdr__burger i span{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .28s var(--ease),opacity .18s var(--ease)
}
.hdr__burger i::before{top:0}
.hdr__burger i span{top:5.5px}
.hdr__burger i::after{bottom:0}
.hdr__burger[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] i span{opacity:0}
.hdr__burger[aria-expanded="true"] i::after{transform:translateY(-5.5px) rotate(-45deg)}

/* Le panneau descend sous l'en-tete plutot que de couvrir tout l'ecran : le
   numero de telephone et le bouton d'estimation restent visibles pendant la
   navigation, donc joignables sans refermer le menu. */
.menu-mob{
  position:fixed;left:0;right:0;top:0;z-index:10001;
  padding:calc(var(--h-hdr,74px) + 12px) 22px 24px;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(9,18,30,.16);
  transform:translateY(-102%);visibility:hidden;
  transition:transform .34s var(--ease),visibility .34s;
}
.menu-mob.is-open{transform:none;visibility:visible}
.menu-mob a{
  display:flex;align-items:center;min-height:52px;
  font-size:1.06rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)
}
.menu-mob a:last-of-type{border-bottom:0}
.menu-mob a:active{color:var(--amber-d)}
.menu-mob__tel{
  display:flex!important;align-items:center;justify-content:center;gap:9px;
  min-height:52px;margin-top:14px;border:0!important;
  border-radius:14px;background:var(--ink);color:#fff!important;font-weight:700
}
/* Voile sous le panneau : un clic hors du menu le referme, comportement que
   tout visiteur attend d'un menu deroulant. */
.menu-voile{
  position:fixed;inset:0;z-index:10000;background:rgba(9,18,30,.42);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s
}
.menu-voile.is-open{opacity:1;visibility:visible}
@media(min-width:1061px){.menu-mob,.menu-voile{display:none}}
/* Le bouton d'entete ne doit jamais etre comprime par le flex : `overflow:hidden`
   (herite de .btn, qui masque le reflet du survol) coupe alors le libelle sans
   ellipse, et le visiteur lit « Estimer mon insta ». On fige donc la largeur et
   on prevoit un libelle court sur petit ecran, comme le numero passe deja en
   pictogramme seul. */
.hdr__cta{flex:none}
.lbl-court{display:none}
@media(max-width:640px){
  .hdr__in{height:74px;gap:12px}
  /* Le numero passe en pictogramme seul : sans surface minimale, la cible ne
     ferait plus que 31 px de haut, sous le seuil du doigt. */
  .hdr__tel span{display:none}
  .hdr__tel{min-width:44px;min-height:44px;justify-content:center;padding-block:0}
  /* Le logo garde ses proportions reelles (16:9) : la boite carree de 46 px
     heritee de l'ancien fichier ecrasait le dessin a 46 x 26 px. */
  .hdr__brand img,.hdr.is-solid .hdr__brand img{width:96px;height:52px}
  .hdr:not(.is-solid):not(.hdr--light) .hdr__brand img{padding:5px 8px;border-radius:12px}
  .lbl-long{display:none}
  .lbl-court{display:inline}
}

/* --- Héros -------------------------------------------------------------- */
.hero{position:relative;min-height:min(94svh,940px);display:flex;flex-direction:column;isolation:isolate;background:var(--ink)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(7,15,26,.80) 0%,rgba(7,15,26,.55) 38%,rgba(7,15,26,.12) 66%,rgba(7,15,26,.30) 100%),
    linear-gradient(to top,rgba(7,15,26,.72) 0%,rgba(7,15,26,0) 42%);
}
.hero__body{flex:1;display:flex;align-items:flex-end;padding-top:150px;padding-bottom:38px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:end;width:100%}
/* Sur-titre du heros d'accueil. L'image y est nettement plus claire que sur les
   landings : mesure au pixel, l'ambre n'y tenait que 2.3:1 sur telephone, sous
   le minimum de 4.5 pour un si petit corps. Le libelle passe donc en blanc
   (5.1:1 au pire), le trait garde l'ambre — un ornement n'a pas de seuil. */
.hero__eyebrow{color:#fff;margin-bottom:22px}
.hero__eyebrow::before{content:"";width:26px;height:1.5px;background:var(--amber);display:block}
.hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero__lede{color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1.35vw,1.22rem);max-width:38ch;margin-top:24px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* carte flottante */
.hero__card{
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-radius:var(--r-card);box-shadow:var(--sh-3);padding:28px;max-width:460px;justify-self:end;width:100%;
}
.hero__card h2{font-size:1.24rem;letter-spacing:-.025em}
.hero__card p{font-size:.9rem;color:var(--muted);margin-top:8px}

/* bandeau bas du héros */
.hero__facts{border-top:1px solid rgba(255,255,255,.20);padding-block:20px}
.hero__facts ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hero__facts li{display:flex;align-items:baseline;gap:12px;padding-inline:26px;border-left:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);font-size:.9rem}
.hero__facts li:first-child{border-left:0;padding-left:0}
.hero__facts b{color:#fff;font-size:1.35rem;font-weight:600;letter-spacing:-.03em;line-height:1}
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hero__card{justify-self:start;max-width:520px}
  .hero__body{padding-top:120px}
  /* Le texte passe sur une colonne et s'etend donc vers la droite du cliche,
     ou le voile lateral s'efface presque. Mesure au pixel, le sur-titre y
     tombait a 3.8:1. On repasse a un voile vertical, qui suit le texte. */
  .hero__scrim{background:linear-gradient(to top,rgba(7,15,26,.90) 0%,rgba(7,15,26,.68) 52%,rgba(7,15,26,.52) 100%)}
}
@media(max-width:700px){
  .hero{min-height:auto}
  .hero__body{padding-top:104px;padding-bottom:28px}
  .hero__facts ul{grid-template-columns:1fr;gap:12px}
  .hero__facts li{border-left:0;padding-inline:0;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
  .hero__facts li:first-child{border-top:0;padding-top:0}
  /* Le mot mis en valeur en ambre se retrouve haut dans le cadre sur telephone,
     la ou le voile s'allegeait a .42 : mesure au pixel, il n'y tenait que
     2.6:1 pour un minimum de 3. On densifie la partie haute sans toucher au bas,
     ou la photographie doit rester visible. */
  .hero__scrim{background:linear-gradient(to top,rgba(7,15,26,.90) 0%,rgba(7,15,26,.66) 52%,rgba(7,15,26,.60) 100%)}
}

/* --- Rythme des sections ------------------------------------------------ */
.sec{padding-block:clamp(64px,8vw,118px)}
.sec--tight{padding-block:clamp(48px,5vw,72px)}
.sec--paper{background:var(--paper);border-block:1px solid var(--line)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink .lede,.sec--ink p{color:rgba(255,255,255,.72)}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec-head{max-width:46ch;margin-bottom:clamp(36px,4vw,58px)}
.sec-head h2{margin-top:14px}
.sec-head .lede{margin-top:18px}
.sec-head--wide{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec-head--wide>div{max-width:46ch}

/* --- Bandeau de preuve -------------------------------------------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.proof__it{background:var(--white);padding:28px 26px}
.proof__n{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.proof__l{font-size:.85rem;color:var(--muted);margin-top:8px}
@media(max-width:820px){.proof{grid-template-columns:1fr 1fr}}

/* --- Cartes solutions --------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{box-shadow:var(--sh-3);transform:translateY(-4px);border-color:var(--line-2)}
.card__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.card__body p{color:var(--muted);font-size:.96rem;margin-top:10px}
.card__list{margin-top:18px;display:grid;gap:8px;font-size:.9rem}
.card__list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.card__list svg{flex:none;margin-top:5px}
.card__foot{margin-top:auto;padding-top:20px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* --- Méthode ------------------------------------------------------------ */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--white)}
.method__it{padding:30px 28px;border-left:1px solid var(--line);position:relative}
.method__it:first-child{border-left:0}
.method__n{font-family:var(--serif);font-style:italic;font-size:2.1rem;line-height:1;color:var(--amber-700);margin-bottom:16px}
.method__it p{color:var(--muted);font-size:.93rem;margin-top:9px}
@media(max-width:900px){.method{grid-template-columns:1fr 1fr}.method__it:nth-child(3){border-left:0}.method__it:nth-child(1),.method__it:nth-child(2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.method{grid-template-columns:1fr}.method__it{border-left:0;border-bottom:1px solid var(--line)}.method__it:last-child{border-bottom:0}}

/* --- Galerie géolocalisée ----------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:16px}
.shot{position:relative;border-radius:14px;overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.shot--wide{grid-column:span 2;aspect-ratio:2/1}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.06)}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(8,16,28,.88),rgba(8,16,28,0));
  font-size:.92rem;font-weight:600;letter-spacing:-.015em;
}
.shot figcaption span{display:block;font-weight:400;font-size:.79rem;color:rgba(255,255,255,.75);margin-top:2px}
@media(max-width:900px){.gal{grid-template-columns:1fr 1fr}.shot--wide{grid-column:span 2}}

/* Chaque vignette s'agrandit au clic. Le declencheur est un vrai bouton qui
   couvre toute la photo : il est atteignable au doigt sur toute sa surface, il
   est focusable au clavier et il porte le libelle de la photo. Sans lui, une
   galerie « cliquable » par ecouteur sur la figure reste inaccessible au
   clavier et invisible pour un lecteur d'ecran. */
.shot__zoom{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  background:none;border:0;padding:0;cursor:zoom-in;color:#fff;
  display:flex;align-items:flex-start;justify-content:flex-end;
}
.shot__zoom i{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin:12px;border-radius:11px;
  background:rgba(9,18,30,.52);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.26);
  opacity:0;transform:scale(.9);
  transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .2s var(--ease);
}
.shot:hover .shot__zoom i,.shot__zoom:focus-visible i{opacity:1;transform:none}
.shot__zoom:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
/* Au doigt il n'y a pas de survol : la loupe reste visible en permanence,
   sinon rien n'indique que la photo s'agrandit. */
@media(hover:none){.shot__zoom i{opacity:1;transform:none}}

/* --- Visionneuse ---------------------------------------------------------
   Construite par ciel.js a la premiere ouverture : ni balisage ni image en
   plus a telecharger pour les visiteurs qui n'ouvrent aucune photo. */
.zoomer{
  position:fixed;inset:0;z-index:2147483002;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,12,22,.94);
  padding:clamp(12px,3vw,40px);
  opacity:0;transition:opacity .26s var(--ease);
}
.zoomer.is-on{display:flex}
.zoomer.is-vu{opacity:1}
.zoomer__fig{margin:0;max-width:min(1440px,100%);max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.zoomer__img{
  max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;
  border-radius:12px;background:#0b1220;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:scale(.97);transition:transform .3s var(--ease);
}
.zoomer.is-vu .zoomer__img{transform:none}
.zoomer__cap{color:#fff;font-size:.98rem;font-weight:600;text-align:center;letter-spacing:-.015em}
.zoomer__cap span{display:block;font-weight:400;font-size:.84rem;color:rgba(255,255,255,.7);margin-top:3px}
/* Les trois commandes font 48 px : au doigt, une croix de 24 px se rate une
   fois sur trois, et le visiteur se croit enferme. */
.zoomer__x,.zoomer__nav{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.5rem;line-height:1;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.zoomer__x:hover,.zoomer__nav:hover{background:rgba(255,255,255,.24)}
.zoomer__x:active,.zoomer__nav:active{transform:scale(.94)}
.zoomer__x{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
.zoomer__nav--prev{left:max(10px,env(safe-area-inset-left));top:50%;margin-top:-24px}
.zoomer__nav--next{right:max(10px,env(safe-area-inset-right));top:50%;margin-top:-24px}
.zoomer__x:focus-visible,.zoomer__nav:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media(max-width:640px){
  .zoomer__img{max-height:calc(100svh - 210px)}
  /* Les fleches passent en bas : au pouce, les bords lateraux d'un telephone
     tenu d'une main sont la zone la plus difficile a atteindre. */
  .zoomer__nav{top:auto;bottom:max(18px,env(safe-area-inset-bottom));margin-top:0}
  .zoomer__nav--prev{left:22%}
  .zoomer__nav--next{right:22%}
}
/* Le defilement de la page est gele pendant l'ouverture : sans cela, le fond
   glisse derriere la photo au moindre mouvement du doigt. */
body.zoom-ouvert{overflow:hidden}
/* Meme raison pour le menu : le fond ne doit pas glisser sous le panneau. */
body.menu-ouvert{overflow:hidden}

/* --- Marques ------------------------------------------------------------ */
.brands{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px);align-items:center;justify-content:center}
.brands img{height:28px;width:auto;filter:grayscale(1);opacity:.5;transition:opacity .25s var(--ease),filter .25s var(--ease)}
.brands img:hover{opacity:.95;filter:grayscale(0)}

/* --- Simulateur --------------------------------------------------------- */
.sim{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-2);overflow:hidden}
.sim__hd{padding:26px 28px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sim__hd h3{font-size:1.2rem}
.sim__hd p{font-size:.88rem;color:var(--muted);margin-top:7px}
.badge{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:var(--r-pill)}
.badge--ok{color:var(--ok);background:var(--ok-050)}
.badge--amber{color:var(--amber-600);background:var(--amber-050)}
.sim__bd{padding:18px 28px 28px}
.bar{display:flex;gap:5px;margin:18px 0 22px}
.bar i{height:4px;flex:1;border-radius:var(--r-pill);background:var(--paper-2);transition:background-color .35s var(--ease)}
.bar i.on{background:var(--amber)}
.fld{margin-bottom:20px}
.fld:last-child{margin-bottom:0}
.fld>label,.lbl{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.inp{
  width:100%;font-size:1.02rem;font-weight:500;padding:15px 17px;
  border:1.5px solid var(--line);border-radius:var(--r-field);background:var(--paper);
  outline:none;transition:border-color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.inp:focus{border-color:var(--amber);background:var(--white);box-shadow:0 0 0 4px rgba(240,160,32,.16)}
.inp::placeholder{color:var(--muted-2)}
/* Refus du simulateur : le liseré seul ne suffit pas — sans phrase, le visiteur
   ne comprend pas pourquoi rien ne s'affiche et il quitte la page. */
.inp--faute{border-color:var(--err);background:#FDF3F2}
.inp--faute:focus{border-color:var(--err);box-shadow:0 0 0 4px rgba(194,53,43,.14)}
.fld__err{
  margin-top:8px;color:var(--err);font-size:.84rem;font-weight:500;line-height:1.45;
  background:#FDF3F2;border:1px solid #F3C9C5;border-radius:10px;padding:10px 12px;
}
.fld__err[hidden]{display:none}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.opt{
  border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-field);
  padding:14px 8px;text-align:center;font-size:.88rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:.18s var(--ease);
}
.opt small{display:block;font-weight:500;font-size:.72rem;margin-top:3px;opacity:.85}
.opt:hover{border-color:var(--line-2);color:var(--ink)}
.opt.on{border-color:var(--amber);background:var(--amber-050);color:var(--amber-600)}
.hint{display:flex;gap:9px;align-items:flex-start;font-size:.79rem;color:var(--muted);margin-top:12px;line-height:1.5}
.hint svg{flex:none;margin-top:3px}
/* résultat */
.sim__res{background:var(--paper);border-top:1px solid var(--line);padding:24px 28px;display:none}
.sim__res.show{display:block;animation:fadeUp .5s var(--ease) both}
.sim__res h4{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.res-g{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.res-c{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.res-c .v{font-size:1.45rem;font-weight:600;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.res-c .v.amber{color:var(--amber-600)}
.res-c .k{font-size:.75rem;color:var(--muted);margin-top:4px}
.res-c--wide{grid-column:span 2;background:var(--ink);border-color:var(--ink);color:#fff}
.res-c--wide .k{color:rgba(255,255,255,.62)}
.res-c--wide .v{color:#fff}

/* --- Vérité / FAQ ------------------------------------------------------- */
.faq{display:grid;gap:10px}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--white);overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.qa[open]{border-color:var(--line-2);box-shadow:var(--sh-1)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 26px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:24px;font-weight:600;font-size:1.05rem;letter-spacing:-.02em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:22px;height:22px;margin-top:3px;
  background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4870C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition:transform .28s var(--ease);
}
.qa[open] summary::after{transform:rotate(135deg)}
.qa__a{padding:0 26px 24px;color:var(--muted);font-size:.98rem;max-width:70ch}
.qa__a p+p{margin-top:12px}
.qa__a strong{color:var(--ink);font-weight:600}

/* --- Zone d'intervention ------------------------------------------------ */
.zones{display:flex;flex-wrap:wrap;gap:10px}
.zone{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);
  border-radius:var(--r-pill);padding:10px 18px;font-size:.9rem;font-weight:500;color:var(--ink-2);
}
.zone svg{flex:none;color:var(--amber-600)}

/* --- Appel final -------------------------------------------------------- */
.final{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.final::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.30;
  background:radial-gradient(80% 130% at 18% 0%,rgba(240,160,32,.55) 0%,transparent 62%);
}
.final h2{color:#fff;max-width:18ch}
.final p{color:rgba(255,255,255,.74);max-width:52ch;margin-top:20px;font-size:1.08rem}
.final__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* --- Pied de page ------------------------------------------------------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);font-size:.92rem;padding-block:62px 34px;border-top:1px solid rgba(255,255,255,.10)}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.ftr h4{color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.04em;margin-bottom:16px}
.ftr ul{display:grid;gap:6px}
/* Les liens de pied de page sont des cibles tactiles, pas des mots dans une
   phrase : l'exception « lien en ligne » de la WCAG 2.5.8 ne s'y applique pas.
   Le remplissage vertical les amene a 26 px de haut au lieu de 18. */
.ftr ul a{display:inline-block;padding-block:4px}
.ftr a:hover{color:#fff}
.ftr__brand{display:flex;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:1.24rem;letter-spacing:-.035em;margin-bottom:18px}
.ftr__brand img{width:56px;height:56px}
.ftr__legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem}
.ftr__legal a{display:inline-block;padding-block:4px}
/* « Gerer mes cookies » est une commande, pas une page : c'est donc un bouton,
   mais il doit se lire comme les liens qui l'entourent. */
.ftr__cookies{
  display:inline-block;padding:4px 0;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35);transition:color .2s var(--ease)
}
.ftr__cookies:hover{color:var(--amber)}
/* Au doigt, ces mentions doivent rester atteignables : sans hauteur minimale,
   la ligne de texte ne fait que 16 px de haut. */
@media(max-width:640px){
  .ftr__legal a,.ftr__cookies{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:880px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr__grid{grid-template-columns:1fr;gap:30px}}

/* --- Barre d'action mobile ---------------------------------------------- */
/* `--abc-bas` est publiee par /js/abc-consent.js : elle vaut la hauteur reelle
   de la banniere de consentement, et 0px des qu'elle est fermee. Tout ce qui
   est fixe en bas d'ecran s'en sert, sinon la barre d'action et le bouton
   d'appel passent SOUS la banniere et deviennent inatteignables. La valeur de
   repli `0px` garantit un rendu correct si le script ne se charge pas. */
.mobar{
  position:fixed;left:0;right:0;bottom:var(--abc-bas,0px);z-index:78;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  box-shadow:0 -6px 26px rgba(14,27,42,.12);
}
.mobar .btn{flex:1;padding:15px 12px;font-size:.95rem}
@media(max-width:760px){.mobar{display:flex}}
/* Reserve de fin de document : la barre d'action, le bouton d'appel et le
   bouton du chatbot se superposent au bas de l'ecran. Sans cette reserve,
   les derniers liens du pied de page se retrouvent sous eux au defilement
   maximal — et la, plus aucun geste ne permet de les atteindre. */
@media(max-width:760px){body{padding-bottom:calc(152px + env(safe-area-inset-bottom) + var(--abc-bas,0px))}}
/* Le formulaire est l'action principale tant qu'il est a l'ecran : sur mobile,
   ou l'espace est compte, on retire les concurrents. Sur grand ecran il n'y a
   pas de conflit, le chatbot reste donc accessible.
   `abc-form-a-l-ecran` est posee par abc-formulaire.js. */
.abc-form-a-l-ecran .mobar,
.abc-form-a-l-ecran .appel-flottant{display:none!important}
@media(max-width:760px){
  .abc-form-a-l-ecran #abcexp-chat-btn,
  .abc-form-a-l-ecran #abcexp-chat-window{display:none!important}
}

/* ── Chatbot ───────────────────────────────────────────────────────────────
   chatbot.js pose sa position en style inline (`bottom:168px;right:20px`),
   calee sur un widget WhatsApp qui n'existe pas sur ces pages : le bouton
   flottait donc au milieu du bord droit. `!important` est ici le seul moyen de
   reprendre la main sur un style inline, sans modifier chatbot.js qui reste un
   fichier de production partage.

   Sur grand ecran : coin inferieur droit, franchement.
   Sur mobile : remonte au-dessus du bouton d'appel plein largeur, et decale
   par `--abc-bas` pour ne jamais passer sous la banniere de consentement. */
#abcexp-chat-btn{
  right:24px!important;
  bottom:calc(24px + env(safe-area-inset-bottom) + var(--abc-bas,0px))!important;
  width:60px!important;height:60px!important;
  background:linear-gradient(150deg,#1C2E44,#0E1B2A)!important;
  border:1.5px solid rgba(240,160,32,.55)!important;
  box-shadow:0 12px 34px rgba(14,27,42,.34)!important;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)!important;
}
#abcexp-chat-btn:hover{box-shadow:0 16px 40px rgba(14,27,42,.42)!important}
#abcexp-chat-window{
  right:24px!important;
  bottom:calc(98px + env(safe-area-inset-bottom) + var(--abc-bas,0px))!important;
  max-height:min(520px,calc(100vh - 150px - var(--abc-bas,0px)))!important;
  border-radius:20px!important;
  box-shadow:0 30px 80px rgba(14,27,42,.30)!important;
}
@media(max-width:760px){
  #abcexp-chat-btn{
    right:16px!important;width:54px!important;height:54px!important;
    bottom:calc(84px + env(safe-area-inset-bottom) + var(--abc-bas,0px))!important;
  }
  #abcexp-chat-window{
    right:12px!important;left:12px!important;width:auto!important;
    bottom:calc(148px + env(safe-area-inset-bottom) + var(--abc-bas,0px))!important;
    max-height:min(520px,calc(100vh - 210px - var(--abc-bas,0px)))!important;
  }
}
/* Pastille d'appel : signale le chatbot une fois, sans pop-up intrusif. */
#abcexp-chat-btn::after{
  content:"";position:absolute;top:-2px;right:-2px;width:13px;height:13px;
  border-radius:50%;background:var(--amber);border:2.5px solid #0E1B2A;
  animation:pulseAmbre 2.6s var(--ease) infinite;
}
@keyframes pulseAmbre{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.28);opacity:.75}
}

/* --- Apparitions au défilement ------------------------------------------ */
/* Le masquage initial est conditionne a la classe `js`, posee par un script
   inline dans le <head>. Sans elle — JavaScript coupe, script en erreur,
   robot sans moteur de rendu — le contenu reste visible au lieu de rester
   bloque a `opacity:0`. La regle `.rv.in` a la meme specificite que
   `.js .rv` : elle l'emporte parce qu'elle est declaree apres. */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Couche d'animation
   --------------------------------------------------------------------------
   Trois regles de conduite :
   1. n'animer que `transform` et `opacity`, les deux seules proprietes que le
      navigateur peut traiter sans recalculer la mise en page ;
   2. tout ce qui suit le defilement passe par une variable CSS ecrite depuis un
      `requestAnimationFrame` unique — jamais un `style.top` dans un `scroll` ;
   3. tout est neutralise par `prefers-reduced-motion`, y compris les boucles.
   ========================================================================== */

/* --- Jauge de progression de lecture ------------------------------------- */
.progress{
  position:fixed;top:0;left:0;height:2.5px;z-index:90;
  width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),#FFD07A);
  will-change:transform;pointer-events:none;
}

/* --- Titre du heros : apparition mot a mot ------------------------------- */
/* Chaque mot est enveloppe dans un masque qui le laisse monter depuis le bas.
   L'effet degrade proprement : sans JavaScript, le titre reste simplement
   visible, sans decoupage. */
.mots{display:inline}
.mot{display:inline-block;overflow:hidden;vertical-align:top}
.mot>i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .82s cubic-bezier(.19,1,.22,1),opacity .6s ease-out;
  transition-delay:calc(var(--i,0) * 62ms);
}
.pret .mot>i{transform:none;opacity:1}

/* --- Heros : profondeur au defilement ------------------------------------ */
/* `--par` est ecrit par ciel.js. Le leger agrandissement evite qu'un bord vide
   apparaisse quand l'image se deplace. */
.hero__media img,.lp-hero__media img{
  transform:translate3d(0,var(--par,0px),0) scale(1.08);
  will-change:transform;
}
.hero__eyebrow::before{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.19,1,.22,1) .15s;
}
.pret .hero__eyebrow::before{transform:scaleX(1)}

/* --- Variantes d'apparition ---------------------------------------------- */
.js .rv--left{opacity:0;transform:translateX(-26px)}
.js .rv--right{opacity:0;transform:translateX(26px)}
.js .rv--scale{opacity:0;transform:scale(.955)}
/* Le rideau porte sur le CONTENU de la vignette, pas sur la vignette elle-meme.
   Un `clip-path` qui masque tout ramene l'aire d'intersection de l'element a
   zero : l'IntersectionObserver ne le voit jamais entrer dans le cadre, la
   classe `.in` n'arrive pas, et la galerie de chantiers reste invisible en
   permanence. L'opacite, elle, n'affecte pas la mesure d'intersection : la
   figure peut donc rester transparente sans se rendre indetectable. */
.js .rv--mask{opacity:0;transform:none}
.js .rv--mask>img{clip-path:inset(0 0 100% 0)}
.rv--mask{transition:opacity .8s var(--ease)}
.rv--mask>img{transition:clip-path .9s cubic-bezier(.19,1,.22,1)}
.rv--left.in,.rv--right.in,.rv--scale.in{opacity:1;transform:none}
.rv--mask.in{opacity:1}
.rv--mask.in>img{clip-path:inset(0 0 0 0)}
/* Cascade automatique : ciel.js pose `--i` sur les enfants d'un conteneur
   marque `data-cascade`, ce qui evite de semer des classes de delai a la main. */
[data-cascade]>.rv{transition-delay:calc(var(--i,0) * 85ms)}
/* Le rideau de `.rv--mask` vit sur l'image enfant : sans ce rappel, il partirait
   sans attendre son tour et se desynchroniserait de la montee en opacite. */
[data-cascade]>.rv--mask>img{transition-delay:calc(var(--i,0) * 85ms)}

/* --- Titres de section : soulignement qui se trace ---------------------- */
.sec-head .kicker{position:relative;display:inline-block;padding-bottom:7px}
.sec-head .kicker::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s cubic-bezier(.19,1,.22,1) .1s;
}
.rv.in .kicker::after{transform:scaleX(1)}

/* --- Boutons : reflet au survol ------------------------------------------ */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.62) 50%,transparent 68%);
  transform:translateX(-120%);
}
.btn--primary:hover::before{transform:translateX(120%);transition:transform .72s var(--ease)}
.btn--primary{transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .18s var(--ease),box-shadow .28s var(--ease)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(240,160,32,.42)}
.btn--ink:hover,.btn--ghost:hover,.btn--onDark:hover{transform:translateY(-2px)}

/* --- Cartes : lumiere qui suit le curseur -------------------------------- */
/* `--mx` / `--my` sont ecrites par ciel.js uniquement sur les pointeurs fins :
   sur un ecran tactile, la notion de survol n'existe pas. */
@media (hover:hover) and (pointer:fine){
  .card{position:relative}
  .card::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
    transition:opacity .35s var(--ease);
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(240,160,32,.13),transparent 68%);
  }
  .card:hover::before{opacity:1}
  .card__body{position:relative;z-index:1}
}

/* --- Etapes : trait qui se trace ---------------------------------------- */
.method__n{transition:color .5s var(--ease),transform .6s cubic-bezier(.19,1,.22,1)}
.method__it{position:relative;overflow:hidden}
.method__it::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--amber);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.method.in .method__it::after{transform:scaleY(1)}
.method.in .method__it:nth-child(2)::after{transition-delay:.1s}
.method.in .method__it:nth-child(3)::after{transition-delay:.2s}
.method.in .method__it:nth-child(4)::after{transition-delay:.3s}
@media(max-width:900px){.method__it::after{display:none}}

/* --- Chantiers : leger relief au survol --------------------------------- */
.shot{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shot:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,27,42,.20);z-index:2}
.shot figcaption{transform:translateY(6px);opacity:.92;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.shot:hover figcaption{transform:none;opacity:1}

/* --- Communes : petite reponse au survol -------------------------------- */
.zone{transition:transform .28s var(--ease),border-color .28s var(--ease),background-color .28s var(--ease)}
.zone:hover{transform:translateY(-2px);border-color:var(--amber);background:#fff}

/* --- Questions : ouverture fluide --------------------------------------- */
/* `grid-template-rows` est aujourd'hui la seule facon d'animer une hauteur
   inconnue sans la mesurer en JavaScript. */
.qa__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.qa[open] .qa__wrap{grid-template-rows:1fr}
.qa__wrap>.qa__a{overflow:hidden}
.qa summary{transition:background-color .25s var(--ease)}
.qa summary:hover{background:var(--paper)}

/* --- Formulaire des landings : mise en avant ---------------------------- */
.lp-form{transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.lp-form:focus-within{box-shadow:0 26px 70px rgba(14,27,42,.26),0 0 0 3px rgba(240,160,32,.30)}

/* --- Bandeau de marques : arrivee en cascade ---------------------------- */
/* Pas de defilement infini : il obligerait a dupliquer le balisage et fait
   perdre le reperage visuel. Une arrivee decalee suffit a donner du rythme. */
.js .brands img{opacity:0;transform:translateY(10px)}
.brands img{transition:opacity .5s var(--ease),transform .5s var(--ease),filter .25s var(--ease)}
.brands.in img{opacity:.5;transform:none}
.brands.in img:hover{opacity:.95}
.brands.in img:nth-child(1){transition-delay:0s}
.brands.in img:nth-child(2){transition-delay:.06s}
.brands.in img:nth-child(3){transition-delay:.12s}
.brands.in img:nth-child(4){transition-delay:.18s}
.brands.in img:nth-child(5){transition-delay:.24s}
.brands.in img:nth-child(6){transition-delay:.3s}
.brands.in img:nth-child(7){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.js .rv,
  .js .rv--left,.js .rv--right,.js .rv--scale,.js .rv--mask{opacity:1;transform:none;clip-path:none}
  /* Le rideau des vignettes est pose sur l'image, pas sur la figure. */
  .js .rv--mask>img{clip-path:none}
  /* Le titre du heros et les traits doivent rester visibles sans transition. */
  .mot>i{transform:none!important;opacity:1!important}
  .hero__eyebrow::before,.sec-head .kicker::after,.method__it::after{transform:none!important}
  /* Aucune boucle : ni pastille pulsee, ni bandeau defilant. */
  #abcexp-chat-btn::after{animation:none!important}
  .js .brands img{opacity:.5!important;transform:none!important}
  /* La parallaxe est neutralisee, l'image reste calee. */
  .hero__media img,.lp-hero__media img{transform:scale(1.04)!important}
  .progress{display:none}
}

/* ==========================================================================
   Pages d'atterrissage — formulaire piloté par /js/abc-formulaire.js
   Les noms de classes et les attributs data-* sont imposés par ce script :
   ne pas les renommer sans le modifier.
   ========================================================================== */
.lp-form{background:var(--white);border-radius:20px;box-shadow:var(--sh-3);padding:28px;border:1px solid var(--line)}
.lp-form legend{font-size:1.2rem;font-weight:600;letter-spacing:-.025em;padding:0;margin-bottom:6px;color:var(--ink)}
.lp-form fieldset{border:0;margin:0;padding:0}
.lp-form__sub{font-size:.88rem;color:var(--muted);margin-bottom:20px}
.abc-champ{margin-bottom:15px}
.abc-champ label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.abc-champ input[type=text],.abc-champ input[type=tel],.abc-champ input[type=email]{
  width:100%;font-size:1.02rem;padding:15px 17px;border:1.5px solid var(--line);border-radius:var(--r-field);
  background:var(--paper);outline:none;transition:border-color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.abc-champ input:focus{border-color:var(--amber);background:var(--white);box-shadow:0 0 0 4px rgba(240,160,32,.16)}
.abc-champ input.abc-champ-invalide{border-color:var(--err);background:#FDF3F2;box-shadow:0 0 0 4px rgba(194,53,43,.12)}
.abc-facultatif{font-weight:400;color:var(--muted-2)}
.abc-erreur{display:none;color:var(--err);font-size:.82rem;margin-top:7px;font-weight:500}
.abc-echec{display:none;color:var(--err);font-size:.88rem;margin:4px 0 12px;font-weight:500;background:#FDF3F2;border:1px solid #F3C9C5;border-radius:10px;padding:12px 14px}
.abc-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.abc-consent{margin:16px 0 6px}
.abc-consent-ligne{display:flex!important;align-items:flex-start;gap:11px;font-size:.85rem;font-weight:400!important;color:var(--muted);cursor:pointer;line-height:1.5;padding-block:4px}
.abc-consent-ligne input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--amber-600)}
/* Banniere de consentement. Ses styles sont injectes par /js/abc-consent.js,
   fichier partage avec la production : on ne le touche pas. Le vert d'origine
   ne donne que 3.4:1 avec du texte blanc ; un ton plus profond passe a 4.8:1.
   Le selecteur ajoute l'element pour depasser la specificite du style injecte,
   qui est pose apres cette feuille. */
.abc-cc button.abc-yes{background:#15834E}
.abc-cc button.abc-yes:hover{background:#116B40}
.abc-form-court-envoi{
  width:100%;margin-top:8px;background:var(--amber);color:#241703;border:0;border-radius:var(--r-pill);
  padding:18px 24px;font-size:1.03rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 6px 20px rgba(240,160,32,.34);transition:background-color .2s var(--ease),transform .12s var(--ease);
}
.abc-form-court-envoi:hover{background:var(--amber-600)}
.abc-form-court-envoi:active{transform:translateY(1px)}
.abc-form-court-envoi[aria-busy=true]{opacity:.72;cursor:progress}
.abc-form-court-preuve{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.abc-form-court-preuve li{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;color:var(--muted)}
.abc-form-court-preuve li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:3px;
  background:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230B7C57'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.abc-mention-rgpd{font-size:.73rem;color:var(--muted-2);margin-top:16px;line-height:1.55}
.abc-mention-rgpd a{text-decoration:underline}
.abc-devis-succes{
  background:var(--ok-050);border:1px solid #B9E3D2;border-radius:20px;padding:34px 28px;text-align:center;
  animation:fadeUp .5s var(--ease) both;
}
.abc-devis-succes h3{font-size:1.35rem;color:var(--ok)}
.abc-devis-succes p{margin-top:12px;color:var(--ink-2);font-size:.98rem}
.abc-devis-succes-tel a{font-weight:600;color:var(--ok);text-decoration:underline}
/* bouton d'appel flottant (mobile) */
.appel-flottant{
  position:fixed;left:14px;right:14px;z-index:79;display:none;
  bottom:calc(14px + env(safe-area-inset-bottom) + var(--abc-bas,0px));
  align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;
  border-radius:var(--r-pill);padding:16px 20px;font-weight:600;font-size:1rem;box-shadow:var(--sh-3);
}
@media(max-width:760px){.appel-flottant{display:flex}}
.appel-flottant.masque{display:none!important}
/* Le heros porte deja son propre lien d'appel : quand il est a l'ecran, la barre
   fixe le recouvrait tout en proposant le meme numero. Classe posee par
   ciel.js. */
.ciel-appel-a-l-ecran .appel-flottant{display:none!important}

/* héros des pages d'atterrissage */
.lp-hero{position:relative;background:var(--ink);isolation:isolate;padding-top:118px;padding-bottom:clamp(46px,6vw,80px)}
/* Sur telephone, la banniere de consentement occupe pres de 170 px en bas
   d'ecran et masquait le numero de telephone du heros. On repousse donc le
   contenu de sa hauteur reelle, publiee dans `--abc-bas`. */
@media(max-width:760px){.lp-hero{padding-bottom:calc(40px + var(--abc-bas,0px))}}
.lp-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.lp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.lp-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,15,26,.88) 0%,rgba(7,15,26,.70) 44%,rgba(7,15,26,.36) 100%);}
/* Heros des pages payees. Dans la source, le formulaire suit immediatement le
   titre : a une colonne — donc sur telephone — c'est le seul ordre qui le laisse
   au-dessus de la ligne de flottaison. Sur grand ecran, les zones nommees
   rendent au chapeau et aux arguments leur place sous le titre, le formulaire
   occupant la colonne de droite sur toute la hauteur. */
.lp-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  column-gap:clamp(32px,4vw,60px);row-gap:18px;align-items:start;
  grid-template-areas:"surtitre formulaire" "titre formulaire" "suite formulaire";
}
.lp-hero__grid>.eyebrow{grid-area:surtitre;margin-bottom:0}
.lp-hero__grid>.h-1{grid-area:titre}
.lp-hero__grid>.lp-form{grid-area:formulaire}
.lp-hero__suite{grid-area:suite}
.lp-hero h1{color:#fff;max-width:16ch}
/* Sur-titre du heros. `.eyebrow` seule n'impose pas de couleur : elle heritait
   donc de l'encre du corps, soit un bleu nuit pose sur un voile bleu nuit —
   texte pratiquement invisible. Le blanc est retenu plutot que l'ambre : il
   tient le seuil de 4.5:1 sur un voile beaucoup plus leger, ce qui laisse la
   photographie respirer sur telephone au lieu de la noyer dans le noir. Le
   trait garde l'ambre, un ornement n'ayant pas de seuil a tenir. */
.lp-hero .eyebrow{color:#fff;margin-bottom:20px}
.lp-hero .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--amber);display:block}
.lp-hero__lede{color:rgba(255,255,255,.85);margin-top:20px;max-width:44ch;font-size:1.08rem}
.lp-usp{display:grid;gap:12px;margin-top:28px}
.lp-usp li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:.98rem}
.lp-usp svg{flex:none;margin-top:4px}
/* Appel du heros. Le soulignement passe en pseudo-element pour que l'on puisse
   epaissir la zone tapable (44 px, seuil du doigt) sans eloigner le trait du
   texte ; le retrait de marge compense le remplissage ajoute au-dessus. */
.lp-cta-tel{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:#fff;font-weight:600;font-size:1.02rem;position:relative;padding:10px 0 9px}
.lp-cta-tel::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:var(--amber)}
/* Preuves chiffrees du heros : les seules que l'entreprise puisse attester, et
   donc la seule reassurance disponible tant qu'aucun avis client n'est publie. */
.lp-preuves{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.20)}
.lp-preuves li{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-preuves b{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1}
.lp-preuves span{font-size:.8rem;color:rgba(255,255,255,.72);max-width:19ch;line-height:1.35}
@media(max-width:940px){
  .lp-hero__grid{grid-template-columns:1fr;grid-template-areas:none}
  /* A une colonne, les zones nommees ne servent plus : l'ordre du document est
     precisement celui que l'on veut — sur-titre, titre, formulaire, suite. */
  .lp-hero__grid>.eyebrow,.lp-hero__grid>.h-1,
  .lp-hero__grid>.lp-form,.lp-hero__suite{grid-area:auto}
  .lp-hero__grid>.eyebrow{margin-bottom:0}
  .lp-preuves{gap:10px 20px;margin-top:22px}
  /* Meme raison que sur l'accueil : a une colonne, le texte traverse la partie
     la plus claire du cliche. Le voile devient vertical, assez dense pour tenir
     4.5:1 avec du texte blanc mais suffisamment leger pour que le chantier
     photographie reste lisible — c'est lui qui rassure. */
  .lp-hero__scrim{background:linear-gradient(to bottom,rgba(7,15,26,.68) 0%,rgba(7,15,26,.54) 46%,rgba(7,15,26,.66) 100%)}
}
@media(max-width:640px){.lp-hero{padding-top:96px}}

/* --- Impression --------------------------------------------------------- */
@media print{
  .hdr,.mobar,.appel-flottant,.hero__media,.hero__scrim{display:none!important}
  body{color:#000;background:#fff}
}