/* ===========================================================
   ARNAUD FAÇADES — Landing Google Ads
   Direction « BLEU DE TRAVAIL » (Héritage 01 × Chantier 03)
   Bleu/cyan/gris-bleu · orange = action · Barlow titres
   =========================================================== */

:root{
  /* — Surfaces — */
  --bg:#FFFFFF;
  --bg2:#E8EEF4;        /* gris-bleu, sections alternées */
  --ink:#14273A;        /* charbon bleu */
  --ink-soft:#42607A;
  --muted:#70889C;
  --line:#D4E1EC;
  --line-2:#BFD2E1;

  /* — Identité — */
  --brand:#12476E;      /* bleu ARNAUD */
  --brand-deep:#0E3656;
  --brand-ink:#EAF2F9;
  --cyan:#0E9AA0;       /* cyan accent */
  --cyan-deep:#0B7C81;
  --cyan-soft:#DBEFEF;

  /* — Signal d'action (tweakable) — */
  --signal:#F26430;     /* orange : CTA uniquement */
  --signal-deep:color-mix(in srgb, var(--signal), #000 15%);
  --signal-soft:color-mix(in srgb, var(--signal), #fff 82%);
  --signal-ink:#FFFFFF;

  --star:#E8A33C;

  /* — Type — */
  --font-display:'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'Spline Sans Mono', ui-monospace, monospace;

  /* — Forme / rythme — */
  --radius:6px;
  --base:16.5px;
  --pad:22px;
  --block:46px;
  --hero-shade:0.64;    /* assombrissement bleu du héro */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:var(--base);
  line-height:1.5;
}

/* colonne mobile */
.page{
  position:relative;
  width:100%; max-width:440px; margin:0 auto;
  min-height:100vh; background:var(--bg); color:var(--ink);
  overflow:hidden;
}

/* blueprint discret derrière la colonne (desktop) */
/* (grille blueprint retirée — rendu page plein, non encadré) */

/* ---------- utilitaires ---------- */
.wrap{ padding-inline:var(--pad); }
.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan-deep); font-weight:500;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--cyan); display:inline-block; }
.sec-no{ font-family:var(--font-mono); font-weight:600; color:var(--cyan); letter-spacing:.05em; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1; margin:0; text-wrap:balance; }
h2{ font-size:2.15rem; letter-spacing:.005em; color:var(--brand); line-height:1.02; }
h3{ font-size:1.32rem; line-height:1.06; letter-spacing:.005em; color:var(--ink); }
p{ margin:0; text-wrap:pretty; }

/* séparateur "mesure" */
.joint{ height:0; border:0; border-top:1px solid var(--line); position:relative; margin:0; }
.joint::after{ content:""; position:absolute; left:var(--pad); top:-1px; width:42px; height:3px; background:var(--cyan); }

/* boutons */
.btn{
  font-family:var(--font-body); display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-size:1.04rem; font-weight:700; letter-spacing:.005em;
  padding:16px 20px; border-radius:var(--radius); width:100%; line-height:1.1;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:translateY(1px) scale(.997); }
.btn-primary{
  background:var(--signal); color:var(--signal-ink);
  box-shadow:0 1px 0 var(--signal-deep), 0 14px 26px -12px rgba(242,100,48,.65);
  text-transform:uppercase; letter-spacing:.02em; font-weight:800;
}
.btn-primary:hover{ background:var(--signal-deep); }
.btn-ghost{ background:transparent; color:var(--brand); border:1.5px solid var(--brand); font-weight:700; }
.btn-ghost:hover{ background:var(--brand); color:#fff; }
.btn .ic{ width:18px; height:18px; flex:none; }

/* pastille placeholder — discrète mais visible, s'adapte au fond */
.ph{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.03em;
  border:1px dashed currentColor; border-radius:3px; padding:1px 6px;
  display:inline-block; vertical-align:middle; text-transform:uppercase;
  font-weight:500; background:transparent; opacity:.6;
}

/* ============== HEADER ============== */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:11px var(--pad);
  background:color-mix(in srgb, var(--bg), transparent 6%);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{
  width:36px; height:36px; flex:none; border-radius:5px;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand .nm{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; line-height:.95; color:var(--brand); letter-spacing:.01em; }
.brand .nm small{ display:block; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-top:4px; font-weight:400; }
.top .tel{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.82rem; font-weight:500; color:var(--cyan-deep); text-decoration:none; white-space:nowrap; }
.top .tel svg{ width:15px; height:15px; }

/* ============== HÉRO ============== */
.hero{ position:relative; }
.hero .photo{
  position:relative; min-height:clamp(286px,44vh,412px); display:flex; align-items:flex-end;
  background-color:#0e2b44; overflow:hidden;
  /* fond « blueprint » propre quand aucune photo n'est fournie */
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(125% 85% at 50% 0%, #14466b 0%, #0b2840 70%);
  background-size:36px 36px, 36px 36px, cover;
}
.hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.hero .grad{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,32,52,.20) 0%, rgba(10,32,52,0) 30%,
    rgba(10,32,52,calc(var(--hero-shade) * .62)) 56%,
    rgba(8,26,43,var(--hero-shade)) 100%);
}
.hero .htext{ position:relative; z-index:2; padding:22px var(--pad) 26px; color:#EAF3FA; width:100%; display:flex; flex-direction:column; }
/* renfort de lisibilité localisé derrière toute la zone texte (tient sur photo claire) */
.hero .htext::before{
  content:""; position:absolute; left:0; right:0; bottom:0; top:-30px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,26,43,0) 0%, rgba(8,26,43,.34) 42%, rgba(8,26,43,.6) 100%);
}
/* surtitre : capsule discrète + cyan plus contrasté → lisible même sur fond clair */
.hero .eyebrow{
  color:#A6F0F5; align-self:flex-start; width:max-content; max-width:100%;
  background:rgba(8,26,43,.5); backdrop-filter:blur(3px);
  padding:6px 11px 6px 10px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(166,240,245,.22);
  text-shadow:0 1px 6px rgba(4,16,28,.6);
}
.hero .eyebrow::before{ background:#3FE0E8; }
.hero h1{
  font-family:var(--font-display); font-weight:800; font-size:2.5rem; line-height:1;
  color:#FFFFFF; margin:.5rem 0 .55rem; letter-spacing:.005em;
  text-shadow:0 2px 22px rgba(4,16,28,.5);
}
.hero .sub{ font-size:1.02rem; color:#CFE0EC; max-width:33ch; line-height:1.36; }

/* bloc CTA sous photo */
.cta-block{ padding:18px var(--pad) 22px; background:var(--bg); }
.cta-block .ctas{ display:flex; flex-direction:column; gap:10px; }
.reassure{ display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:14px; font-size:.8rem; color:var(--ink-soft); }
.reassure span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.reassure svg{ width:14px; height:14px; color:var(--cyan); flex:none; }

/* bandeau preuve */
.trustbar{
  display:flex; align-items:center; gap:12px; padding:13px var(--pad);
  background:var(--brand); color:var(--brand-ink); font-size:.82rem;
}
.trustbar .stars{ color:var(--star); letter-spacing:1px; font-size:.95rem; }
.trustbar b{ color:#fff; font-weight:700; }
.trustbar .since{ margin-left:auto; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:#9FBBD2; text-transform:uppercase; text-align:right; line-height:1.35; }

/* ============== SECTIONS ============== */
section.blk{ padding:var(--block) 0; }
.blk > .wrap > .head{ margin-bottom:20px; }
.head .eyebrow{ margin-bottom:11px; }

/* concerné */
.concern{ background:var(--bg2); }
.symptoms{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.symptoms li{ display:flex; gap:13px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); font-size:1.02rem; line-height:1.34; }
.symptoms li:first-child{ border-top:1px solid var(--line); }
.symptoms li .sx{ flex:1; }
.symptoms li b{ font-weight:700; color:var(--brand); }
.symptoms .tk{ flex:none; width:25px; height:25px; margin-top:1px; border-radius:5px; background:var(--cyan); display:grid; place-items:center; color:#fff; }
.symptoms .tk svg{ width:14px; height:14px; }
.note{ margin-top:18px; font-size:.96rem; color:var(--ink-soft); }
.note b{ color:var(--ink); font-weight:600; }

/* prestations */
.gains{ display:flex; flex-direction:column; }
.gain{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }
.gain:first-child{ border-top:1px solid var(--line); }
.gain .gno{ font-family:var(--font-mono); font-size:.95rem; color:var(--cyan); font-weight:600; padding-top:4px; }
.gain h3{ margin-bottom:6px; }
.gain p{ font-size:.95rem; color:var(--ink-soft); line-height:1.4; }
.gain .spec{ display:inline-block; margin-top:8px; }
.tag-spec{ background:var(--cyan-soft); color:var(--cyan-deep); padding:3px 9px; border-radius:4px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.02em; font-weight:600; }

/* ============== PREUVES ============== */
.proof{ background:var(--brand-deep); color:#DCE8F2; }
.proof .eyebrow{ color:#69D6DC; } .proof .eyebrow::before{ background:#69D6DC; }
.proof .sec-no{ color:#69D6DC; }
.proof h2{ color:#FFFFFF; }

.ba{ position:relative; width:100%; aspect-ratio:4/3; margin-top:8px; border-radius:var(--radius); overflow:hidden; user-select:none; box-shadow:0 18px 34px -18px rgba(0,0,0,.7); --pos:50%; background:#0e2b44; }
.ba .layer{ position:absolute; inset:0; }
.ba .layer img{ width:100%; height:100%; object-fit:cover; display:block; }
/* la couche « après » est rognée à gauche : ses pixels masqués ne captent plus le clic,
   donc la moitié gauche reste cliquable sur le slot « avant », la droite sur « après ». */
.ba .after{ clip-path:inset(0 0 0 var(--pos)); }
.ba .lab{ position:absolute; top:10px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:600; padding:4px 9px; border-radius:3px; z-index:3; pointer-events:none; }
.ba .lab.l{ left:10px; background:rgba(8,26,43,.7); }
.ba .lab.r{ right:10px; background:var(--cyan); }
.ba .handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); z-index:4; cursor:ew-resize; box-shadow:0 0 0 1px rgba(8,26,43,.25); }
.ba .handle .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; color:var(--brand); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.ba .handle:focus-visible{ outline:none; }
.ba .handle:focus-visible .grip{ box-shadow:0 0 0 3px var(--cyan), 0 4px 14px rgba(0,0,0,.45); }
.ba .handle .grip svg{ width:20px; height:20px; }
.ba-hint{ margin-top:9px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; color:#9FBBD2; text-align:center; }

/* (slots image remplacés par de vrais <img>) */

/* note Google */
.greview{ display:flex; align-items:center; gap:15px; margin-top:24px; padding:15px 16px; border:1px solid #2c557a; border-radius:var(--radius); background:rgba(255,255,255,.04); }
.grev-num{ font-family:var(--font-display); font-weight:800; font-size:2.5rem; line-height:.9; color:#fff; }
.grev-body{ display:flex; flex-direction:column; gap:4px; }
.greview .stars{ color:var(--star); font-size:1.05rem; letter-spacing:1px; }
.grev-meta{ font-size:.86rem; color:#C2D4E2; }
.grev-meta b{ color:#fff; font-weight:700; }

.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; }
.gallery img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); display:block; }
.gallery .g-wide{ grid-column:1 / -1; aspect-ratio:16/9; }

.communes{ margin-top:24px; }
.communes .cap{ font-size:.92rem; color:#B9CDDF; margin-bottom:11px; }
.communes .cap b{ color:#fff; }
.commune-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.commune-tags span{ font-family:var(--font-mono); font-size:.7rem; color:#D6E4F1; border:1px solid #2c557a; border-radius:3px; padding:4px 8px; background:rgba(255,255,255,.03); }
.commune-tags .more{ color:#69D6DC; border-color:#2f6f88; cursor:pointer; background:none; font-family:var(--font-mono); }
.hidden-c{ display:none; }
.partner{ display:flex; align-items:center; gap:12px; margin-top:24px; padding:14px; border:1px solid #265079; border-radius:var(--radius); background:rgba(255,255,255,.03); }
.partner .plogo{ width:54px; height:38px; flex:none; border-radius:3px; background:#fff; overflow:hidden; object-fit:contain; padding:4px; }
.partner small{ font-family:var(--font-mono); font-size:.72rem; color:#B9CDDF; line-height:1.4; }
.partner small b{ color:#fff; }

/* ============== DÉROULÉ ============== */
.steps{ position:relative; margin-top:6px; }
.step{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding-bottom:26px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step .dot{ width:48px; height:48px; flex:none; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.35rem; z-index:2; position:relative; box-shadow:0 6px 16px -8px var(--brand); }
.step::before{ content:""; position:absolute; left:24px; top:48px; bottom:-2px; width:2px; background:repeating-linear-gradient(180deg,var(--line-2) 0 5px, transparent 5px 11px); }
.step:last-child::before{ display:none; }
.step h3{ font-size:1.14rem; margin:10px 0 4px; }
.step p{ font-size:.94rem; color:var(--ink-soft); line-height:1.4; }

/* ============== FAQ ============== */
.faq{ background:var(--bg2); }
.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; cursor:pointer; padding:17px 38px 17px 0; position:relative; font-family:var(--font-display); font-weight:700; font-size:1.18rem; line-height:1.12; color:var(--ink); letter-spacing:.005em; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:"+"; position:absolute; right:0; top:14px; font-family:var(--font-body); font-weight:400; font-size:1.6rem; color:var(--cyan); transition:transform .2s ease; line-height:1; }
.acc details[open] summary::after{ transform:rotate(45deg); color:var(--brand); }
.acc .ans{ padding:0 2px 18px; font-size:.96rem; color:var(--ink-soft); line-height:1.5; }
.acc .ans b{ color:var(--ink); font-weight:600; }

/* ============== CTA FINAL / FORM ============== */
.final{ background:var(--brand-deep); color:#DCE8F2; }
.final .eyebrow{ color:#69D6DC; } .final .eyebrow::before{ background:#69D6DC; }
.final .sec-no{ color:#69D6DC; }
.final h2{ color:#FFFFFF; font-size:2.2rem; }
.final .lead{ color:#B9CDDF; margin-top:11px; font-size:1rem; max-width:34ch; }
.form{ margin-top:22px; background:var(--bg); color:var(--ink); border-radius:10px; padding:20px; box-shadow:0 22px 44px -22px rgba(0,0,0,.55); }
.field{ margin-bottom:13px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field label .req{ color:var(--signal); }
.field input, .field select, .field textarea{ width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--bg2); border:1.5px solid var(--line-2); border-radius:var(--radius); padding:13px; outline:none; transition:border-color .15s, box-shadow .15s; }
.field textarea{ resize:vertical; min-height:74px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); }
.field.err input, .field.err select{ border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.field .msg{ font-size:.76rem; color:#c0392b; margin-top:5px; display:none; }
.field.err .msg{ display:block; }
.consent{ display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--ink-soft); margin:4px 0 16px; line-height:1.35; }
.consent input{ width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--brand); }
.form .btn-primary{ font-size:1.06rem; padding:17px; }
.form .micro{ text-align:center; font-size:.76rem; color:var(--muted); margin-top:11px; }
.form-ok{ text-align:center; padding:24px 8px; display:none; }
.form-ok .ok-ic{ width:58px; height:58px; margin:0 auto 14px; border-radius:50%; background:var(--cyan-soft); color:var(--cyan-deep); display:grid; place-items:center; }
.form-ok .ok-ic svg{ width:30px; height:30px; }
.form-ok h3{ font-size:1.4rem; margin-bottom:7px; color:var(--ink); }
.form-ok p{ color:var(--ink-soft); font-size:.95rem; }
.final.sent .form{ display:none; }
.final.sent .form-ok{ display:block; }

/* réassurances colonne gauche — desktop uniquement (cachées en mobile) */
.final-reassure{ display:none; list-style:none; margin:18px 0 0; padding:0; flex-direction:column; gap:13px; }
.final-reassure li{ display:flex; align-items:center; gap:11px; font-size:1rem; color:#CFE0EC; }
.final-reassure li svg{ width:19px; height:19px; flex:none; color:#69D6DC; }

/* ============== FOOTER ============== */
.foot{ background:#0B2236; color:#9FB6CB; padding:30px var(--pad) 112px; }
.foot .fbrand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.foot .fbrand .mark{ width:32px; height:32px; border-radius:5px; background:#1c4a70; color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; }
.foot .fbrand b{ color:#EAF2F9; font-family:var(--font-display); font-size:1.12rem; font-weight:700; letter-spacing:.01em; }
.foot .row{ display:flex; gap:9px; align-items:flex-start; font-size:.86rem; padding:7px 0; line-height:1.4; }
.foot .row svg{ width:15px; height:15px; flex:none; margin-top:2px; color:#5C7A95; }
.foot a{ color:#A9D9DC; }
.foot .legal{ margin-top:18px; padding-top:16px; border-top:1px solid #16334b; font-size:.72rem; color:#5C7A95; line-height:1.6; }
.foot .legal a{ color:#7F9DB7; text-decoration:underline; }

/* ============== STICKY CTA ============== */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; max-width:440px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.15fr; gap:9px; padding:11px var(--pad);
  background:color-mix(in srgb, var(--bg), transparent 3%);
  border-top:1px solid var(--line); box-shadow:0 -10px 26px -16px rgba(8,26,43,.4);
  backdrop-filter:blur(9px);
  transform:translateY(140%); transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.sticky.show{ transform:translateY(0); }
.sticky .btn{ padding:14px 10px; font-size:.96rem; }
.sticky .btn-ghost{ border-color:var(--brand); color:var(--brand); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* =====================================================================
   DESKTOP (≥1024px) — re-flow de la MÊME page en document large.
   Mobile-first conservé : tout ci-dessous est purement additif.
   ===================================================================== */
@media (min-width:1024px){
  body{ padding:0; }
  .page{
    max-width:none; min-height:auto;
    border-radius:0; overflow:clip;
  }

  /* ---- header ---- */
  .top{ padding:18px max(40px, calc((100% - 1220px) / 2)); }
  .brand .mark{ width:44px; height:44px; font-size:1.55rem; }
  .brand .nm{ font-size:1.5rem; }
  .brand .nm small{ font-size:.64rem; }
  .top .tel{ font-size:1.02rem; }

  /* ---- HÉRO desktop : photo full-bleed immersive + carte CTA flottante ---- */
  .hero{
    position:relative; display:block;
  }
  .hero .photo{
    width:100%; min-height:660px; height:66vh; max-height:760px;
  }
  .hero .htext{
    position:absolute; left:0; bottom:0; z-index:4;
    padding:0 0 64px max(60px, calc((100% - 1220px) / 2)); width:760px; max-width:64%;
  }
  .hero .htext::before{
    top:-180px; left:-60px; right:-120px; bottom:0;
    background:linear-gradient(3deg, rgba(6,20,34,.70) 0%, rgba(6,20,34,.34) 42%, rgba(6,20,34,.08) 72%, rgba(6,20,34,0) 100%);
  }
  .hero .eyebrow{ font-size:.8rem; padding:7px 13px; }
  .hero h1{ font-size:3.5rem; margin:.7rem 0 .85rem; max-width:600px; line-height:1.04; text-wrap:normal; }
  .hero .sub{ font-size:1.2rem; max-width:36ch; }
  /* carte CTA flottante, en bas à droite, posée sur la photo (au-dessus du bandeau preuve) */
  .cta-block{
    position:absolute; right:max(60px, calc((100% - 1220px) / 2)); bottom:101px; z-index:6;
    width:372px; padding:26px 26px 24px;
    background:linear-gradient(165deg, rgba(255,255,255,.97) 0%, rgba(224,232,241,.97) 100%);
    border:1px solid rgba(255,255,255,.7); border-radius:16px;
    box-shadow:0 36px 70px -28px rgba(4,16,28,.72);
    backdrop-filter:blur(4px);
  }
  .cta-block::before{
    content:'Devis gratuit · sans engagement';
    display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--cyan-deep); font-weight:600; margin-bottom:13px;
  }
  .cta-block .ctas{ gap:11px; }
  .cta-block .btn{ font-size:1.05rem; padding:17px 20px; }
  .reassure{ margin-top:18px; font-size:.86rem; gap:8px 16px; }
  .trustbar{ justify-content:center; gap:22px; padding:17px max(40px, calc((100% - 1220px) / 2)); font-size:.96rem; }
  .trustbar .since{ margin-left:44px; }

  /* ---- échelle + heads ÉDITORIAUX (alignés à gauche, titres larges & respirants) ---- */
  section.blk{ padding:92px 0; }
  section.blk > .wrap{ max-width:1220px; margin-inline:auto; padding-inline:60px; }
  h2{ font-size:3.2rem; line-height:1; }
  .head{ display:flex; flex-direction:column; }
  .head .eyebrow{ justify-content:flex-start; }
  .blk > .wrap > .head{ text-align:left; margin-bottom:44px; max-width:none; }
  .head h2{ max-width:32ch; margin-inline:0; }

  /* concerné : composition éditoriale — accroche à gauche, liste à droite */
  .concern > .wrap{ max-width:1180px; display:grid; grid-template-columns:0.82fr 1.18fr; gap:8px 64px; align-items:start; }
  .concern > .wrap > .head{ grid-column:1; grid-row:1; margin-bottom:0; align-self:start; position:sticky; top:96px; }
  .concern .symptoms{ grid-column:2; grid-row:1; display:flex; flex-direction:column; }
  .concern .symptoms li{ font-size:1.06rem; padding:17px 0; }
  .concern .note{ grid-column:2; grid-row:2; text-align:left; font-size:1.06rem; max-width:62ch; margin-top:14px; }

  /* prestations : composition inversée — cartes à gauche, accroche à droite */
  .metiers > .wrap{ max-width:1180px; display:grid; grid-template-columns:1.16fr 0.84fr; gap:8px 64px; align-items:start; }
  .metiers > .wrap > .head{ grid-column:2; grid-row:1; margin-bottom:0; text-align:left; align-self:start; position:sticky; top:96px; }
  .metiers .gains{ grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; margin-bottom:0; }
  .gain{ padding:22px 0; }
  .gain h3{ font-size:1.4rem; }
  .gain p{ font-size:1rem; }
  .metiers .note{ grid-column:1; text-align:left; }
  .note{ text-align:left; }

  /* ---- NOS CHANTIERS : bloc preuve principal, grand slider + showcase aligné ---- */
  .proof > .wrap{ max-width:1200px; }
  .proof .ba{ max-width:1080px; margin:8px auto 0; aspect-ratio:16/9; }
  .proof .ba .handle .grip{ width:50px; height:50px; }
  .proof .ba .lab{ font-size:.68rem; top:16px; padding:5px 11px; }
  .proof .ba-hint{ text-align:center; font-size:.7rem; margin-top:14px; }
  .gallery{ max-width:1080px; margin:30px auto 0; grid-template-columns:repeat(3,1fr); gap:18px; }
  .gallery .g-wide{ grid-column:auto; aspect-ratio:1/1; }
  .gallery img{ transition:transform .22s ease, box-shadow .22s ease; box-shadow:0 12px 26px -16px rgba(0,0,0,.6); }
  .gallery img:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -18px rgba(0,0,0,.72); }
  .communes{ max-width:1080px; margin:36px auto 0; text-align:left; }
  .communes .commune-tags{ justify-content:flex-start; }
  .proof .proofbar{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1080px; margin:26px auto 0; align-items:stretch; }
  .proof .greview,
  .proof .partner{ max-width:none; margin:0; height:100%; }

  /* déroulé : stepper horizontal 4 colonnes */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px; }
  .step{ grid-template-columns:1fr; justify-items:center; text-align:center; padding-bottom:0; }
  .step .dot{ margin-bottom:12px; width:52px; height:52px; font-size:1.45rem; }
  .step::before{
    left:50%; top:26px; right:auto; bottom:auto;
    width:calc(100% + 20px); height:2px;
    background:repeating-linear-gradient(90deg,var(--line-2) 0 5px, transparent 5px 11px);
  }
  .step h3{ margin-top:2px; font-size:1.18rem; }
  .step p{ max-width:24ch; }

  /* FAQ */
  .faq > .wrap{ max-width:900px; }

  /* ---- CTA final : accroche + réassurances à gauche, carte formulaire à droite ---- */
  .final > .wrap{
    max-width:1100px;
    display:grid; grid-template-columns:1fr 1fr; gap:8px 56px; align-items:start;
  }
  .final .eyebrow{ justify-content:flex-start; grid-column:1; grid-row:1; }
  .final h2{ grid-column:1; grid-row:2; text-align:left; max-width:none; font-size:3.2rem; line-height:1; margin-top:8px; }
  .final .lead{ grid-column:1; grid-row:3; font-size:1.14rem; max-width:38ch; }
  .final-reassure{ display:flex; grid-column:1; grid-row:4; align-self:start; }
  .form, .form-ok{ grid-column:2; grid-row:1 / span 5; align-self:center; }
  .form{ margin-top:0; padding:30px; }

  /* sticky : inutile sur desktop (CTA déjà visibles dans le héro) */
  .sticky{ display:none; }
  .foot{ padding:46px max(40px, calc((100% - 1220px) / 2)) 54px; }
  .foot .row{ font-size:.94rem; }
}

/* tablette — sections pleine largeur, contenu en container centré */
@media (min-width:768px) and (max-width:1023px){
  .page{ max-width:none; }
  .top, .trustbar, .foot{ padding-inline:max(28px, calc((100% - 760px) / 2)); }
  section.blk > .wrap{ max-width:760px; margin-inline:auto; }
  .hero h1{ font-size:3rem; }
  .hero .htext{ padding-left:max(28px, calc((100% - 760px) / 2)); }
  .gains{ display:grid; grid-template-columns:1fr 1fr; column-gap:36px; }
  .gain:nth-child(2){ border-top:1px solid var(--line); }
}


/* ============== RÉASSURANCE ANCIENNETÉ (héro) ============== */
.hero-since{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:12px; padding:7px 12px; border-radius:5px;
  background:rgba(8,26,43,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 1px rgba(166,240,245,.22);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:#EAF3FA; text-shadow:0 1px 6px rgba(4,16,28,.6);
}
.hero-since svg{ width:14px; height:14px; color:#3FE0E8; flex:none; }

/* ============== CTA CONTACT — HEADER (desktop) ============== */
.top-actions{ display:flex; align-items:center; gap:14px; }
.tel-num{ display:none; }
.head-devis{ display:none; }
@media (min-width:1024px){
  .top .tel{ font-size:.96rem; }
  .tel-num{ display:inline; font-weight:600; }
  .head-devis{ display:inline-flex; width:auto; padding:11px 18px; font-size:.95rem; border-radius:var(--radius); }
}

/* ============== MOBILE — rythme / respiration ============== */
@media (max-width:1023px){
  .metiers, .flow{ border-top:1px solid var(--line); }
  .metiers > .wrap > .head, .flow > .wrap > .head{ padding-top:4px; }
}

/* ============== ANIMATIONS SCROLL (sobres) ============== */
@media (prefers-reduced-motion: no-preference){
  .js-reveal [data-reveal]{
    opacity:0; transform:translateY(18px);
    transition:opacity .55s ease, transform .55s ease;
    will-change:opacity, transform;
  }
  .js-reveal [data-reveal].in{ opacity:1; transform:none; }
  .js-reveal .gallery img[data-reveal]{ transform:translateY(22px) scale(.985); }
  .js-reveal .gallery img[data-reveal].in{ transform:none; }
}


/* ============== PASSE FINITION — quinconce étendu + frise ============== */
/* 03 Nos chantiers : bloc preuve centré (mobile + desktop) */
.proof > .wrap > .head{ text-align:center; }
.proof .head .eyebrow{ justify-content:center; }
.proof .head h2{ margin-inline:auto; }

/* présence header desktop (sticky déjà actif) — légère élévation */
@media (min-width:1024px){
  .top{ box-shadow:0 6px 20px -16px rgba(8,26,43,.5); }

  /* 05 FAQ : composition inversée — accordéon à gauche, accroche à droite */
  .faq > .wrap{ max-width:1080px; display:grid; grid-template-columns:1.28fr 0.72fr; gap:6px 64px; align-items:start; }
  .faq > .wrap > .head{ grid-column:2; grid-row:1; position:sticky; top:96px; margin-bottom:0; }
  .faq .acc{ grid-column:1; grid-row:1; }

  /* 04 frise — support de la ligne de progression */
  .flow .steps{ position:relative; }
}

/* 04 frise — ligne de progression animée (desktop) */
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .flow .steps::after{
    content:""; position:absolute; left:0; top:26px; height:2px; width:0;
    background:var(--cyan); z-index:1; transition:width 1.15s ease .15s;
  }
  .js-reveal .flow .steps.steps-go::after{ width:100%; }
}


/* ============== CORRECTION CIBLÉE — sticky desktop / cartes métiers / rythme mobile ============== */

/* 1. Sticky contact desktop : barre flottante centrée, sobre (la mobile reste inchangée) */
@media (min-width:1024px){
  .sticky{
    display:grid; max-width:640px; bottom:20px;
    grid-template-columns:1fr 1fr; gap:12px; padding:12px 16px;
    border:1px solid var(--line); border-radius:14px;
    box-shadow:0 18px 44px -20px rgba(8,26,43,.55);
  }
  .sticky .btn{ padding:13px 14px; font-size:1rem; }
}

/* 4. Nos métiers : cartes services illustrées (image + texte) */
.metiers .gains{ display:flex; flex-direction:column; gap:16px; }
.gain{ display:block; padding:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--bg); }
.gain-img{
  position:relative; aspect-ratio:16/10; background-color:#0e2b44; overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(125% 85% at 50% 0%, #14466b 0%, #0b2840 70%);
  background-size:30px 30px, 30px 30px, cover;
  display:grid; place-items:center;
}
.gain-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gain-img::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,26,43,0) 45%, rgba(8,26,43,.42) 100%); }
.gain-img .svc-ph{
  position:relative; z-index:1; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(220,232,242,.82); border:1px dashed rgba(220,232,242,.5);
  border-radius:3px; padding:4px 9px; text-align:center;
}
.gain-body{ padding:15px 18px 18px; }
.gain-body .gno{ font-family:var(--font-mono); font-size:.78rem; color:var(--cyan); font-weight:600; padding:0; }
.gain h3{ margin:5px 0 6px; font-size:1.22rem; }
.gain p{ font-size:.95rem; color:var(--ink-soft); line-height:1.4; }
.gain .spec{ display:inline-block; margin-top:10px; }
.metiers .note{ margin-top:18px; }

@media (min-width:1024px){
  .metiers > .wrap{ display:block; max-width:1180px; }
  .metiers > .wrap > .head{ position:static; margin-bottom:36px; }
  .metiers .gains{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:0; }
  .gain h3{ font-size:1.3rem; }
  .gain-body{ padding:18px 20px 20px; }
}

/* 2. Rythme mobile : varier l'alignement des titres (alternance visible) */
@media (max-width:1023px){
  .flow > .wrap > .head{ text-align:center; }
  .flow .head .eyebrow{ justify-content:center; }
  .final > .wrap > .eyebrow{ justify-content:center; }
  .final h2, .final .lead{ text-align:center; }
  .final .lead{ margin-inline:auto; }
}


/* ============== MODALS SERVICES ============== */
.gain[data-service]{ cursor:pointer; transition:box-shadow .2s ease, transform .2s ease; }
.gain[data-service]:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(8,26,43,.5); }
.gain[data-service]:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.gain-body::after{
  content:"Voir le détail →"; display:inline-block; margin-top:12px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--cyan-deep); font-weight:600;
}
.gain[data-service]:hover .gain-body::after{ color:var(--cyan); }

.svc-modal[hidden]{ display:none; }
.svc-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.svc-modal__overlay{ position:absolute; inset:0; background:rgba(6,18,30,.62); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.svc-modal__dialog{
  position:relative; z-index:1; width:100%; max-width:520px; max-height:88vh; overflow:auto;
  background:var(--brand-deep); color:#DCE8F2; border-radius:16px; border:1px solid #2c557a;
  box-shadow:0 40px 90px -30px rgba(4,16,28,.85);
}
.svc-modal__close{
  position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(8,26,43,.55); border:1px solid rgba(255,255,255,.2); color:#EAF3FA;
  display:grid; place-items:center; cursor:pointer;
}
.svc-modal__close svg{ width:18px; height:18px; }
.svc-modal__close:hover{ background:rgba(8,26,43,.8); }
.svc-modal__media{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:16px 16px 0 0; background:#0e2b44; }
.svc-modal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-modal__media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,26,43,0) 55%, rgba(11,34,54,.9) 100%); }
.svc-modal__body{ padding:20px 22px 24px; }
.svc-modal__body .eyebrow{ color:#69D6DC; } .svc-modal__body .eyebrow::before{ background:#69D6DC; }
.svc-modal__body h3{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.65rem; line-height:1.05; margin:9px 0 10px; }
.svc-modal__text{ color:#C2D4E2; font-size:1rem; line-height:1.5; }
.svc-modal__bullets{ list-style:none; margin:16px 0 20px; padding:0; display:flex; flex-direction:column; gap:11px; }
.svc-modal__bullets li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:#DCE8F2; line-height:1.35; }
.svc-modal__bullets li::before{ content:"✓"; flex:none; width:21px; height:21px; border-radius:5px; background:var(--cyan); color:#fff; display:grid; place-items:center; font-size:.72rem; font-weight:700; margin-top:1px; }
.svc-modal__cta{ display:flex; flex-direction:column; gap:10px; }
.svc-modal__cta .btn{ width:100%; }
.svc-modal .btn-ghost{ color:#EAF3FA; border-color:rgba(255,255,255,.42); }
.svc-modal .btn-ghost:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* animations modal (sobres) */
@media (prefers-reduced-motion: no-preference){
  .svc-modal__overlay{ opacity:0; transition:opacity .24s ease; }
  .svc-modal__dialog{ opacity:0; transform:translateY(14px) scale(.985); transition:opacity .26s ease, transform .26s ease; }
  .svc-modal.is-open .svc-modal__overlay{ opacity:1; }
  .svc-modal.is-open .svc-modal__dialog{ opacity:1; transform:none; }
}

/* mobile : bottom sheet */
@media (max-width:768px){
  .svc-modal{ align-items:flex-end; padding:0; }
  .svc-modal__dialog{ max-width:none; width:100%; max-height:86vh; border-radius:18px 18px 0 0; }
  .svc-modal__media{ aspect-ratio:16/8; border-radius:18px 18px 0 0; }
  .svc-modal__body{ padding:18px 18px calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width:768px) and (prefers-reduced-motion: no-preference){
  .svc-modal__dialog{ transform:translateY(100%); }
  .svc-modal.is-open .svc-modal__dialog{ transform:none; }
}


/* ============== LOT FACTUEL — badges, logos, form, masque héro ============== */
/* honeypot Netlify (offscreen, cf. skill §8.B) */
.hp-field{ position:absolute !important; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }

/* badges héro (sobres, texte) */
.hero-badges{ display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; margin-top:12px; }
.hbadge{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:5px;
  background:rgba(8,26,43,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 1px rgba(166,240,245,.22);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; color:#EAF3FA; text-shadow:0 1px 6px rgba(4,16,28,.6); }
.hbadge svg{ width:13px; height:13px; color:#3FE0E8; flex:none; }

/* logos de réassurance (section Devis) */
.trust-logos{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.trust-logos img{ height:56px; width:auto; background:#fff; border-radius:8px; padding:7px; box-shadow:0 6px 16px -8px rgba(0,0,0,.45); }
@media (min-width:1024px){ .trust-logos{ grid-column:1; grid-row:5; } }

/* masque héro desktop : overlay plein-cadre, sans démarcation */
@media (min-width:1024px){
  .hero .htext::before{ display:none; }
  .hero .grad{
    background:
      linear-gradient(180deg, rgba(8,26,43,0) 30%, rgba(8,26,43,.5) 100%),
      linear-gradient(90deg, rgba(8,26,43,.62) 0%, rgba(8,26,43,.22) 33%, rgba(8,26,43,0) 60%);
  }
}


/* ============== UI FINALE — succès form + logos réassurance ============== */
/* 1. message de succès lisible sur fond bleu profond */
.form-ok h3{ color:#FFFFFF; }
.form-ok p{ color:#C2D4E2; }

/* 2. logos héro (dans la carte CTA, fond clair) — sobres, transparents */
.hero-logos{ display:flex; gap:14px; align-items:center; margin-top:13px; }
.hero-logos img{ height:34px; width:auto; display:block; }

/* 3. logos section Devis : +50%, sans encadré blanc, transparence conservée */
.trust-logos{ gap:18px; }
.trust-logos img{ height:84px; width:auto; background:none; border-radius:0; padding:0; box-shadow:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); }


/* ============== LOGOS RÉASSURANCE — desktop héros / mobile sous formulaire ============== */
/* desktop : logos agrandis + centrés dans la carte CTA, plus de vide à droite */
.hero-logos{ display:flex; gap:18px; align-items:center; justify-content:center; margin-top:16px; }
.hero-logos img{ height:72px; width:auto; display:block; }
@media (max-width:1023px){ .hero-logos{ display:none; } }

/* mobile : logos sous le formulaire, centrés, agrandis, transparents */
.trust-logos{ display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.trust-logos img{ height:120px; width:auto; background:none; border-radius:0; padding:0; box-shadow:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
@media (min-width:1024px){ .trust-logos{ display:none; } }