/* ============================================================
   Polices auto-hébergées (variable fonts, ex-Google Fonts) :
   zéro requête tierce, font-display swap.
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-600-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;
}
/* latin-ext */
/* Petrona, l'accent de ce client, en italique uniquement : c'est la seconde
   police qui fait basculer une page de « gabarit » à « dessinée ». Chaque
   client du parc a la sienne pour qu'ils ne se ressemblent pas (Bricolage
   chez VB et Debord, Newsreader chez Rocky, Fraunces chez WM). */
/* latin-ext */
@font-face {
  font-family: 'Petrona';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Petrona-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Petrona';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Petrona-500-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-400-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;
}

/* ============================================================
   Feuille de style des landings David Demestre.
   Structure héritée du système maison de l'agence (bento, hero plein
   cadre, kickers à filet, Bricolage Grotesque + Inter) ; palette
   tirée du logo : bleu marine + or, blanc minéral d'enduit frais.
   Séparateurs en diagonale (la passe de rouleau), pas de vagues.
   Aucun hex en dur hors de :root.
   ============================================================ */

/* ============================================================
   DAVID DEMESTRE couverture · landings Google Ads (Quimper, 29)
   Habillage : papier chaud, terre cuite, charbon chaud — la famille
   « artisan » de l'agence.

   Principe : soustraire. Pas de carte quand un filet suffit, pas de
   filet quand du blanc suffit. Une seule couleur d'accent, réservée
   à l'action. La hiérarchie est portée par la taille du texte et
   l'espace, pas par des boîtes empilées.
   Typographie système (SF Pro sur Apple, Inter ailleurs), approche
   spécifique à chaque taille, réponse au pointer-down.
   ============================================================ */

:root {
  /* Habillage des landings de l'agence : fond ivoire,
     cartes blanches, sections sombres, un accent froid pour l'action et un
     accent chaud pour les preuves. Palette pensée pour un COUVREUR : papier chaud (la pierre),
     terre cuite (la tuile), charbon chaud (l'ardoise brûlée, le zinc patiné).
     Neutres chauds cohérents, aucun mélange chaud/froid. Ici elle tombe juste
     une seconde fois : les photos sont des ardoises grises sous ciel breton,
     et l'accent chaud est ce qui les réchauffe. */
  --bg:        #f6f2ec;
  --bg-2:      #efe9e0;
  --tile:      #efe9e0;
  --surface:   #FFFFFF;

  --line:      rgba(70, 50, 30, .13);
  --line-soft: rgba(70, 50, 30, .07);

  --ink:       #262019;
  --ink-2:     rgba(52, 42, 33, .82);
  --ink-3:     #6f6355;
  --ink-4:     #b0a494;

  /* Un seul accent, chaud, réservé à l'action ET aux filets de kicker :
     pas de seconde couleur : c'est ce qui tient. */
  --blue:      #b4552d;          /* terre cuite : l'action */
  --blue-dark: #8a3d1e;
  --tuile:     #b4552d;          /* mêmes filets, kickers, chiffres */
  --tuile-soft:rgba(180, 85, 45, .18);
  --blue-soft: rgba(180, 85, 45, .10);
  --green:     #2F6045;

  --dark:      #251f19;          /* charbon chaud des sections sombres */
  --on-dark:   #F1EFEA;
  --on-dark-2: rgba(241, 239, 234, .72);
  --line-dark: rgba(241, 239, 234, .16);

  --r-xs: 8px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --pill: 980px;

  --sh:      0 2px 10px rgba(48, 34, 20, .07), 0 8px 24px rgba(48, 34, 20, .06);
  --sh-card: 0 8px 24px rgba(48, 34, 20, .10), 0 24px 60px rgba(48, 34, 20, .12);

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Une seule police système, c'est le signal « on a renoncé à la typo ».
     Bricolage Grotesque porte les titres, Inter le texte courant : c'est le
     couple maison de l'agence. L'emphase d'un titre ne se fait pas
     par un changement de police mais par la couleur (l'or), comme chez VB. */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Petrona", Georgia, "Times New Roman", serif;

  /* La terre cuite pleine ne contraste pas assez sur une photo sombre : sa
     version claire sert uniquement au texte posé sur fond sombre. C'est le
     accent clair de la famille. */
  --gold-bright: #e59a6b;

  --wrap: 1180px;
  --pad:  clamp(62px, 6.6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* la pilule flotte : les ancres doivent s'arrêter dessous. */
section[id], header[id], aside[id], div[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.58;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto est indispensable : sans lui, les attributs width/height du HTML
   sont appliqués comme hauteur CSS et écrasent tous les aspect-ratio. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

/* L'approche se resserre à mesure que le corps grandit. */
h1, h2, h3, .h2 {
  margin: 0; color: var(--ink);
  font-family: var(--display); font-weight: 800;
}
h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.035em; }
.h2, h2 { font-size: clamp(29px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.032em; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.018em; font-weight: 700; }
/* L'emphase d'un titre est une COULEUR, pas une seconde police : c'est le
   geste retenu ici, et c'est ce qui évite le titre moitié gris. */
h1 em, .h2 em, h2 em {
  font-style: normal; font-weight: 800; letter-spacing: inherit;
  color: var(--tuile);
}
h3 em { font-style: normal; color: inherit; }
/* L'ACCENT. Uniquement sur le second membre d'un titre, jamais dans le corps.
   Petrona porte une oeil plus petit que Bricolage à taille égale : on la
   remonte d'un cran (1.04em) et on relâche l'approche, sinon l'italique
   paraît rétréci à côté du romain. */
h1 em, .h2 em, .cta-band h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.04em;
  letter-spacing: -.008em;
}
.cta-band h2 em, .section-dark .h2 em { color: var(--gold-bright); }
.page-hero h1 em { color: var(--gold-bright); }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.index { display: none; }

/* ---------------------------------------------------------- boutons */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit; font-size: 15.5px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.014em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), transform .12s var(--ease), opacity .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
/* Le retour part du pointer-down, il n'attend pas le relâchement. */
.btn:active { transform: scale(.972); }
.btn:focus-visible { outline: 3px solid rgba(180, 85, 45, .42); outline-offset: 3px; }

.btn-accent:hover { --btn-bg: var(--blue-dark); }
.btn-ink { --btn-bg: var(--ink); }
.btn-ink:hover { --btn-bg: #000000; }
/* Ombre à cinq étages + reflet interne : c'est elle qui décolle la pilule de
   la page. Sans elle un bouton plein reste un rectangle arrondi. */
.btn-accent, .btn-ink, .btn-cream {
  box-shadow:
    0 1px 2px rgba(15, 22, 31, .12), 0 4px 4px rgba(15, 22, 31, .08),
    0 9px 6px rgba(15, 22, 31, .045), 0 17px 7px rgba(15, 22, 31, .012),
    inset 0 1.5px 4px rgba(255, 255, 255, .22);
}
.btn-cream { --btn-bg: #FFFFFF; --btn-fg: var(--ink); }
.btn-cream { box-shadow:
    0 1px 2px rgba(15, 22, 31, .16), 0 4px 4px rgba(15, 22, 31, .10),
    0 9px 6px rgba(15, 22, 31, .06), 0 17px 7px rgba(15, 22, 31, .02); }
.topbar .btn-ink, .topbar .btn-accent, .btn-ghost { box-shadow: none; }
.topbar .btn-accent { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
/* Sur fond clair, un bouton blanc a besoin d'un contour, sinon il disparaît. */
.btn-outline {
  --btn-bg: var(--surface); --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(48, 34, 20, .05);
}
.btn-outline:hover { --btn-bg: #FBFAF8; }
.btn-cream:hover { --btn-bg: #EDEDF0; }
.btn-glass {
  --btn-bg: rgba(26, 20, 15, .44); --btn-fg: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.btn-glass:hover { --btn-bg: rgba(26, 20, 15, .58); }

/* action secondaire : lien bleu avec chevron, pas un second bouton */
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--blue);
  padding: 14px 4px;
}
.btn-ghost::after { content: "\203A"; font-size: 21px; line-height: 0; margin-left: 1px; }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost:active { transform: none; opacity: .5; }

.btn-sm { padding: 8px 17px; font-size: 14px; }
.btn-lg { padding: 14px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------- header */
/* Barre pleine largeur posée sur le hero sombre.
   Son fond est la couleur EXACTE du hero à 82 % : sur le hero elle se
   confond avec lui (donc invisible, l'effet recherché), et sur l'ivoire des
   sections suivantes elle reste une barre sombre lisible (blanc sur #3D464F,
   8,4:1). VB obtient le même résultat avec un écouteur de défilement qui
   ajoute une classe ; ici, aucun script : un écouteur ne se déclenche pas à
   l'arrivée sur une ancre, et la barre devenait alors blanche sur fond clair,
   donc illisible sur toute la page. */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding: 0; border: 0;
  background: rgba(30, 25, 20, .84);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 80px; color: #FFFFFF;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark { width: 30px; height: 30px; color: currentColor; flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.22; }
.brand-txt b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.022em; }
.brand-txt .bd {
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.topnav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 10px; }
.topnav a {
  font-size: 14.5px; color: rgba(255, 255, 255, .74); text-decoration: none;
  letter-spacing: -0.01em; transition: color .18s var(--ease);
}
.topnav a:hover { color: #FFFFFF; }
.topbar-cta { display: flex; align-items: center; gap: 16px; }
.topbar-note { font-size: 13px; color: rgba(255, 255, 255, .6); }
.topbar .btn-ink { --btn-bg: transparent; --btn-fg: #FFFFFF; padding: 7px 2px; font-weight: 500; }
.topbar .btn-ink:hover { --btn-bg: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------- hero */
/* Page de service VB : fond sombre PLAT, aucune photo en fond. Le visuel
   arrive en bas de la colonne de gauche, en carte légendée. */
/* ---------------------------------------------------------- hero photo
   Hero pleine image : la photo occupe TOUT le cadre, bord à bord,
   et le texte se pose dans le vide de l'image — jamais sur le sujet, jamais
   sous un voile global qui assombrirait la photo entière. Le dégradé ne monte
   que depuis le bas et la gauche, là où le texte est écrit. */
.page-hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 82vh, 780px);
  display: flex; align-items: flex-end;
  padding: clamp(120px, 12vw, 160px) 0 clamp(42px, 4.6vw, 64px);
  background: var(--dark); color: #FFFFFF; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Les héros sont recadrés au build avec le vide à gauche et le sujet à
     droite : il n'y a plus rien à décaler ici. */
  object-position: 50% 50%;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(26, 20, 15, .88) 0%, rgba(26, 20, 15, .58) 26%,
                    rgba(26, 20, 15, .14) 54%, rgba(26, 20, 15, 0) 76%),
    linear-gradient(to right, rgba(26, 20, 15, .70) 0%, rgba(26, 20, 15, .34) 38%,
                    rgba(26, 20, 15, .06) 62%, rgba(26, 20, 15, 0) 74%);
}
.hero-in { position: relative; }
@media (min-width: 900px) {
  /* Le texte tient dans la moitié gauche : il ne couvre jamais l'artisan.
     Sous 900 px la photo se recadre d'elle-même et le texte reprend
     toute la largeur — sinon le bouton d'appel passe à la ligne. */
  .hero-in > * { max-width: min(640px, 58%); }
  .hero-in > h1 { max-width: min(700px, 62%); }
}
.page-hero h1 { color: #FFFFFF; text-wrap: balance; }
.hero-in .lead {
  color: rgba(255, 255, 255, .86); max-width: 32em; margin: 20px 0 0;
  font-size: clamp(16.5px, 1.3vw, 18.5px);
}

/* Pastille de localisation, en verre, posée au-dessus du titre (VB). */
.hero-pin {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  padding: 8px 15px 8px 13px; border-radius: var(--pill);
  background: rgba(26, 20, 15, .48); border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  font-size: 13px; color: rgba(255, 255, 255, .9); letter-spacing: -0.002em;
}
.hero-pin svg { width: 15px; height: 15px; flex: none; color: var(--gold-bright); }
@media (max-width: 700px) {
  .hero-pin { font-size: 12.5px; padding: 7px 13px 7px 11px; }
  .pin-suite { display: none; }
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.lp-micro { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 18px 0 0; max-width: 44em; }

/* ------------------------------------------------- section devis (sous le hero)
   Le formulaire a sa propre section, il ne se superpose plus à la photo :
   les quatre arguments à gauche, la carte de devis à droite. */
.devis-sec { background: var(--bg); padding: clamp(46px, 5vw, 72px) 0 var(--pad); }
.lp-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(30px, 3.6vw, 60px); align-items: start;
}
.crumb {
  display: flex; align-items: center; gap: 9px; margin: 0 0 20px;
  font-size: 13px; color: var(--ink-3); letter-spacing: -0.002em;
}
.crumb span { color: var(--ink-4); }

.lp-copy > .h2 { max-width: 15em; }
.lp-copy .lead { color: var(--ink-2); max-width: 34em; margin: 18px 0 0; }

/* Filets plutôt que cartes : c'est la liste d'arguments de VB. */
.lp-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.lp-points li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 0; border-top: 1px solid var(--line);
  font-size: 16.5px; line-height: 1.5; color: var(--ink-2);
}
.lp-points li:last-child { border-bottom: 1px solid var(--line); }
.lp-points svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--tuile); }
.lp-points b { color: var(--ink); font-weight: 700; }

/* vestiges d'habillages précédents, plus produits par le gabarit */
.kicker, .figures, .hero-media, .hero-proof, .chip, .hero-veil, .hero-stats,
.lp-proof { display: none; }

/* ---------------------------------------------------------- formulaire */
.lp-form { position: sticky; top: 92px; }
.form-card { background: var(--surface); border-radius: var(--r-lg); padding: 32px 30px 28px; box-shadow: var(--sh-card); }
.form-head h2 { font-size: 26px; letter-spacing: -0.026em; }
.form-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.024em; }
.form-head p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.form-card form, .final-form form { margin-top: 24px; display: grid; gap: 15px; }

.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.field .req { color: var(--ink-3); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 16.5px; font-weight: 400; line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 13px 14px;
  width: 100%;
  appearance: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 64px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(180, 85, 45, .14);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.7px solid var(--ink-2); border-bottom: 1.7px solid var(--ink-2);
  transform: rotate(45deg); pointer-events: none;
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.4px; color: var(--ink-2);
           min-height: 44px; padding-top: 6px; cursor: pointer; }
/* 22 px au lieu de 17, et toute l'étiquette est cliquable : sur un téléphone,
   une case de 17 px se rate une fois sur trois. */
.consent input { margin-top: 2px; accent-color: var(--blue); width: 22px; height: 22px; flex: none; }

/* Sur téléphone, le FORMULAIRE passe avant le texte.
   Mesuré avant correction : le premier champ tombait à 1497 px, soit 1,8 écran
   de scroll. C'est une erreur déjà rencontrée ailleurs (formulaire à
   3 413 px, ramené à ~820). Le visiteur d'une annonce n'a pas cliqué pour lire
   un paragraphe : il a une fuite. On lui donne le champ tout de suite, et
   l'argumentaire ensuite, pour ceux qui veulent se rassurer avant d'écrire. */
@media (max-width: 860px) {
  .lp-grid { display: flex; flex-direction: column; }
  .lp-form { order: -1; position: static; }
  .lp-copy { order: 1; }
  /* Le fil d'Ariane, lui, reste en tête : il dit où on est arrivé. */
  .lp-copy .crumb { order: -2; }
}

/* Cibles tactiles : 44 px minimum sur téléphone, y compris dans la barre du
   haut. Le bouton « Devis gratuit » y faisait 33 px, le logo 30. */
@media (max-width: 860px) {
  .topbar .btn-sm { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .topbar .brand { min-height: 44px; }
}
.form-note { font-size: 12.6px; color: var(--ink-3); text-align: center; margin: 4px 0 0; }
.form-success, .form-error { display: none; border-radius: var(--r-xs); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
.form-success { background: rgba(29, 138, 78, .10); color: #14603A; }
.form-error { background: rgba(214, 60, 45, .10); color: #A6291C; }
form.is-sent .field, form.is-sent .consent, form.is-sent button, form.is-sent .form-note { display: none; }

/* ------------------------------------------------ bandeau de preuves */
/* Quatre chiffres sur une ligne, séparés par des filets verticaux. Les
   arguments du service, eux, sont remontés dans le hero. */
.trust { background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.proofband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(26px, 3vw, 38px) 0;
}
.proofband > div { padding-left: 26px; border-left: 1px solid var(--line); }
.proofband > div:first-child { padding-left: 0; border-left: 0; }
.proofband b {
  display: block; font-size: 25px; font-weight: 600;
  letter-spacing: -0.028em; color: var(--ink);
}
.proofband span {
  display: block; margin-top: 4px; font-size: 13.4px; line-height: 1.4;
  color: var(--ink-3); letter-spacing: -0.004em;
}

/* ---------------------------------------------------------- ouverture */
.ouverture .lead { margin-bottom: 26px; }
.specimen {
  margin: 0 0 30px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.7;
}
.ouverture .hero-points { grid-template-columns: 1fr 1fr; gap: 0 32px; }
.ouverture .split-visual img { border-radius: var(--r-lg); }

/* légende posée sur l'image, comme une étiquette de chantier */
.split-visual { position: relative; }
.split-visual figcaption {
  position: absolute; left: 16px; bottom: 16px; margin: 0;
  padding: 8px 14px; border-radius: var(--pill);
  background: rgba(10, 12, 14, .72); color: rgba(255, 255, 255, .92);
  font-size: 12.5px; letter-spacing: -0.006em;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-width: calc(100% - 32px);
}

/* ---------------------------------------------------------- kickers */
/* Petit label à filet au-dessus de chaque titre : la signature VB, en accent
   bleu plutôt qu'en doré. */
.kick {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tuile);
}
.kick::before { content: ""; width: 22px; height: 2px; background: var(--tuile); }
.section-dark .kick { color: #E09A6B; }
.section-dark .kick::before { background: #E09A6B; }

/* ---------------------------------------------------------- prestations */
/* Grille photo. Aucune carte ne sort de la page : elles mènent au formulaire. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.svc {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); min-height: clamp(230px, 22vw, 290px);
  display: flex; align-items: flex-end;
  text-decoration: none; color: #FFFFFF;
  transition: transform .3s var(--ease);
}
.svc img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 10, .9) 0%, rgba(6, 8, 10, .66) 38%,
              rgba(6, 8, 10, .22) 66%, rgba(6, 8, 10, 0) 88%);
}
.svc:hover img { transform: scale(1.04); }
.svc:active { transform: scale(.994); }
.svc-in { padding: 22px 24px 24px; display: block; }
.svc-n { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.svc-t { display: block; margin: 8px 0 6px; font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.022em; }
.svc-p { display: block; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.svc-go {
  position: absolute; top: 18px; right: 18px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 255, 255, .16); color: #FFFFFF;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color .25s var(--ease);
}
.svc:hover .svc-go { background: rgba(255, 255, 255, .3); }
.bento-foot { margin: 26px 0 0; font-size: 15px; color: var(--ink-3); }
.bento-foot a { color: var(--blue); text-decoration: none; }
.bento-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* badge posé sur l'image d'ouverture, comme VB */
.visual-badge {
  position: absolute; right: 16px; top: 16px; z-index: 1;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 13px; line-height: 1.35;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.visual-badge b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.visual-badge span { color: var(--ink-3); font-size: 11.5px; }

/* note Google en grand dans la section avis */
.note-google {
  display: flex; align-items: center; gap: 22px;
  padding: 26px 30px; margin-bottom: clamp(30px, 3.5vw, 46px);
  background: var(--surface); border-radius: var(--r-lg);
  /* Se cale sur son contenu : un panneau blanc vide aux trois quarts
     se lit comme un bloc inachevé. */
  width: fit-content; max-width: 100%;
}
.note-val { font-size: clamp(44px, 5vw, 62px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.note-txt { display: block; }
.note-txt .stars { display: block; color: #F0A02A; letter-spacing: .1em; font-size: 15px; }
.note-txt b { display: block; margin-top: 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.016em; }
.note-txt span:last-child { display: block; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .svc { min-height: 210px; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .svc { min-height: 240px; } }

/* ---------------------------------------------------------- sections */
.section { padding: var(--pad) 0; }
.section-warm { background: var(--bg-2); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-dark h2, .section-dark .h2, .section-dark h3 { color: var(--on-dark); }

.lead { font-size: 21px; line-height: 1.42; letter-spacing: -0.016em; color: var(--ink-2); margin: 22px 0 0; max-width: 31em; }
.section-dark .lead { color: var(--on-dark-2); }
/* Titre à gauche, accroche à droite : la ligne est pleine, la page respire
   au lieu de paraître vide. */
.sec-head {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(22px, 3vw, 52px); align-items: end;
  margin-bottom: clamp(34px, 3.8vw, 54px);
}
.sec-head .kick { grid-column: 1 / -1; margin-bottom: 2px; }
.sec-head .lead { margin: 0; max-width: 30em; }
.sec-head > .h2 { max-width: 14em; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 68px); align-items: start; }
.split-tight { gap: clamp(36px, 4vw, 56px); }

/* enjeux : quatre passages séparés par un filet */
.risk-list {
  margin: 40px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 4vw, 64px);
}
.risk {
  display: grid; grid-template-columns: 30px 1fr; gap: 18px;
  padding: 24px 0; border-top: 1px solid var(--line-dark);
}
.risk:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
.risk .n { font-size: 14px; font-weight: 500; color: rgba(245, 245, 247, .4); padding-top: 3px; }
.risk h3 { font-size: 19px; margin-bottom: 7px; }
.risk p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-dark-2); }
.risk-cta { margin-top: 40px; }

/* étapes : quatre colonnes ancrées par un chiffre en tuile sur trait court.
   Le filet gris pleine largeur et le chiffre gris clair ne tenaient rien. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 42px); }
.step { padding: 22px 0 0 22px; position: relative; }
.step:first-child { padding-left: 0; }
/* un filet vertical entre les colonnes, un filet horizontal au-dessus :
   la grille se lit comme une grille, pas comme quatre paragraphes posés */
.step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 4px;
  width: 1px; background: var(--line-soft);
}
.step:first-child::before { display: none; }
.step::after {
  content: ""; position: absolute; left: 22px; right: 0; top: 0; height: 2px;
  background: var(--tuile);
}
.step:first-child::after { left: 0; }
.step .n {
  display: block; margin-bottom: 2px;
  /* 01…04 en serif italique : le chiffre devient un repère dessiné, pas une
     puce. C'est ce que build_steps() formate déjà en %02d. */
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 34px; line-height: 1; color: var(--tuile); letter-spacing: -.01em;
}
.step h3 { font-size: 19.5px; margin: 6px 0 8px; color: var(--ink); }
.step p { margin: 0; font-size: 15.5px; line-height: 1.52; color: var(--ink-2); }

/* « Compris dans chaque chantier » : une seule surface blanche, pas six
   lignes flottantes sur l'ivoire. C'est la deuxième surface de la page. */
.incl {
  margin-top: clamp(40px, 4.4vw, 58px);
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.6vw, 38px) clamp(12px, 1.4vw, 20px);
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 2px rgba(29, 36, 48, .04),
              0 18px 40px rgba(29, 36, 48, .07);
}
.incl-title {
  margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--tuile);
  letter-spacing: .1em; text-transform: uppercase;
}
.incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.incl-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 15.6px; line-height: 1.45; color: var(--ink);
}
.incl-list li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 10px; height: 6px; border-left: 1.8px solid var(--tuile);
  border-bottom: 1.8px solid var(--tuile); transform: rotate(-45deg);
}
.incl-list li:nth-child(-n+3) { border-top: 0; }
.incl-list li:nth-last-child(-n+3) { border-bottom: 0; }

/* La sécurité vaut pour tous les chantiers : une ligne, pas un septième
   point qui casserait la grille de six. */
.incl-note {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 15px; line-height: 1.45; color: var(--ink-2); letter-spacing: -0.006em;
}
.incl-note svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--tuile); }
.incl-note b { color: var(--ink); font-weight: 600; }

/* avant / après : deux cartes photo, légende posée sur l'image */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.shot { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(6, 8, 10, .88) 0%, rgba(6, 8, 10, .55) 45%, rgba(6, 8, 10, 0) 100%);
  pointer-events: none;
}
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 22px 24px 24px;
  font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .92);
}
.shot-tag {
  flex: none; display: inline-block; padding: 4px 12px;
  border-radius: var(--pill); background: rgba(255, 255, 255, .18);
  color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  vertical-align: 2px;
}
.shot-ok { background: rgba(52, 199, 129, .28); }
.ba-note { font-size: 13.2px; color: var(--ink-3); margin: 26px 0 0; }

/* budget */
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 40px 0 0; }
.price-card { padding: 22px 0 26px; border-top: 2px solid var(--ink); }
.pc-lab { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.024em; color: var(--ink); }
.pc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 11px 0 13px; }
.pc-pill {
  display: inline-block; padding: 3px 10px;
  border-radius: var(--pill); background: var(--tuile-soft); color: var(--tuile);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.pc-val {
  display: inline-block; padding: 5px 13px;
  border-radius: var(--pill); background: var(--bg-2);
  font-size: 14px; font-weight: 600; letter-spacing: -0.008em; color: var(--ink-2);
}
.price-card p { margin: 0; font-size: 15.3px; line-height: 1.5; color: var(--ink-2); }
.price-note { font-size: 13.6px; color: var(--ink-3); margin: 26px 0 0; max-width: 38em; }

/* le seul panneau de la page : celui qui porte l'action sur le prix */
.price-side {
  background: var(--surface); border-radius: var(--r-lg); padding: 34px 32px;
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 2px rgba(29, 36, 48, .04),
              0 18px 40px rgba(29, 36, 48, .07);
}
.price-side h3 { font-size: 21px; margin-bottom: 20px; }
.tick { list-style: none; margin: 0 0 28px; padding: 0; }
.tick li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; color: var(--ink-2); }
.tick li:last-child { border-bottom: 0; }
.price-side-note { font-size: 12.8px; color: var(--ink-3); text-align: center; margin: 14px 0 0; }

/* bande média */
.cta-band {
  position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.cta-band > img { width: 100%; height: clamp(420px, 48vw, 600px); object-fit: cover; }
.cta-band-in {
  position: absolute; inset: auto 0 0 0; padding: 72px 0 52px; color: #FFF;
  /* Certaines photos sont très claires (ciel d'orage) : le voile doit monter
     plus haut et plus fort, sinon le titre blanc passe dessus sans contraste. */
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .86) 40%,
              rgba(0, 0, 0, .72) 64%, rgba(0, 0, 0, .34) 84%, rgba(0, 0, 0, 0) 100%);
}
/* le texte de la bande reste aligné sur la grille de la page */
.cta-band-in .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; padding: 0; }
.cta-band h2 { color: #FFF; max-width: 16em; }
.cta-band p { margin: 16px 0 30px; font-size: 18px; color: rgba(255, 255, 255, .9); max-width: 38em; letter-spacing: -0.012em; }
.cta-band-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* avis */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 48px); }
.review { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.stars { color: #F0A02A; letter-spacing: .08em; font-size: 14px; }
.review blockquote { margin: 16px 0 18px; font-size: 17px; line-height: 1.5; letter-spacing: -0.014em; }
/* Le prénom en encre pleine, le chantier dessous dans l'accent : c'est le
   chantier nommé qui prouve que l'avis est réel, il mérite sa ligne. */
.review figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13.6px; }
.review figcaption b { font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.review figcaption span { color: var(--tuile); font-size: 13px; }

/* zone : des pastilles, et une photo du pays à côté. En liste séparée par
   des points, ça faisait un mur de texte gris sur toute la largeur. */
.zones { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; }
.zone {
  padding: 7px 15px; border-radius: var(--pill);
  font-size: 14.2px; letter-spacing: -0.008em; color: var(--ink-2);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.zone-main {
  color: #FFFFFF; font-weight: 600; background: var(--blue);
  box-shadow: 0 1px 2px rgba(15, 22, 31, .14), 0 5px 14px rgba(43, 76, 111, .22);
}
.zones-note { font-size: 13.8px; color: var(--ink-3); margin: 26px 0 0; max-width: 34em; }

/* cadre photo légendé : marge blanche autour de l'image, comme un tirage.
   C'est l'usage maison, et ça vaut mieux qu'une photo posée nue. */
.frame {
  margin: 0; align-self: stretch;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); padding: 14px 14px 12px;
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 2px rgba(29, 36, 48, .04),
              0 20px 46px rgba(29, 36, 48, .09);
}
.frame img {
  width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover;
  border-radius: 12px; display: block;
  flex: 1 1 auto; min-height: 0;   /* la photo prend la hauteur restante */
}
.frame figcaption {
  margin: 12px 4px 2px; font-size: 13.2px; line-height: 1.45; color: var(--ink-3);
}

/* FAQ */
.faq-intro {
  align-self: stretch; display: flex; flex-direction: column;
  justify-content: space-between; gap: 40px;
}
.faq-tel { align-self: flex-start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 18.5px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { opacity: .5; }
.faq .pm { position: absolute; right: 2px; top: 27px; width: 15px; height: 15px; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; background: var(--ink-3); transition: transform .25s var(--ease); }
.faq .pm::before { left: 0; top: 6.6px; width: 15px; height: 1.6px; }
.faq .pm::after { left: 6.7px; top: 0; width: 1.6px; height: 15px; }
.faq details[open] .pm::after { transform: scaleY(0); }
.faq .ans { padding: 0 44px 24px 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }


/* après la demande */
.after { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin-top: 34px; }
.after-item { padding-top: 22px; border-top: 1px solid var(--line); }
.after-item b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 9px; }
.after-item p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.after-note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 15.5px; color: var(--ink-3); max-width: 52em; }

/* CTA final */
.final { background: var(--bg-2); }
.final-in { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(40px, 5vw, 68px); align-items: start; }
.final-contacts { margin-top: 40px; }
.fc {
  display: flex; gap: 16px; align-items: center; text-decoration: none;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.fc:last-child { border-bottom: 1px solid var(--line); }
.fc .ic { width: 20px; height: 20px; color: var(--ink-4); flex: none; }
.fc .ic svg { width: 100%; height: 100%; }
.fc .l { display: block; font-size: 12.4px; color: var(--ink-3); }
.fc .v { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.024em; }
.fc .v.small { font-size: 16px; font-weight: 500; letter-spacing: -0.014em; }
a.fc:active { opacity: .55; }
.final-jump { display: none; }
.final-form { background: var(--surface); border-radius: var(--r-lg); padding: 32px 30px 28px; box-shadow: var(--sh-card); }

/* footer */
.footer { background: var(--bg); padding: 42px 0 44px; font-size: 13.4px; color: var(--ink-3); border-top: 1px solid var(--line-soft); }
.footer b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; letter-spacing: -0.016em; }
.footer p { margin: 10px 0 0; max-width: 72em; line-height: 1.55; }
.footer a { color: var(--blue); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.6px; }

/* barre mobile */
.callbar { display: none; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .topnav { display: none; }
}

@media (max-width: 1040px) {
  .sec-head { grid-template-columns: 1fr; gap: 14px; }
  .sec-head > .h2 { max-width: none; }
  .risk-list { grid-template-columns: 1fr; }
  .risk:nth-last-child(-n+2) { border-bottom: 0; }
  .risk:last-child { border-bottom: 1px solid var(--line-dark); }
  .ouverture .hero-points { grid-template-columns: 1fr; }
  .lp-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-form { position: static; }
  .hero-points { grid-template-columns: 1fr 1fr; }
  .split, .final-in { grid-template-columns: 1fr; }
  .frame img { aspect-ratio: 16 / 10; }
  .faq-intro { display: block; }
  .faq-tel { margin-top: 26px; }
  .incl-list { grid-template-columns: repeat(2, 1fr); }
  .incl-list li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .incl-list li:nth-last-child(-n+2) { border-bottom: 0; }
  .steps, .after { grid-template-columns: 1fr 1fr; }
  .proofband { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .proofband > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 860px) {
  /* Sur téléphone, l'échelle de bureau donne des sections géantes et vides.
     On resserre : titres plus petits, moins d'air, lecture dense et scannable,
     comme sur les landings VB. */
  body { font-size: 16px; padding-bottom: 74px; }
  :root { --pad: 46px; }
  h1 { font-size: 33px; line-height: 1.08; letter-spacing: -0.03em; }
  .h2, h2 { font-size: 25px; line-height: 1.16; letter-spacing: -0.024em; }
  h3 { font-size: 18px; }
  .lead, .lp-copy .lead { font-size: 16.5px; line-height: 1.5; }
  .sec-head { margin-bottom: 24px; }
  .kick { font-size: 11px; margin-bottom: 12px; }

  .risk { padding: 18px 0; }
  .risk h3 { font-size: 17px; }
  .risk p { font-size: 15px; }
  .step { padding: 16px 0 0 16px; }
  .step::after { left: 16px; }
  .step:first-child::after { left: 0; }
  .step .n { font-size: 23px; }
  .zone { font-size: 13.6px; padding: 6px 13px; }
  .frame { padding: 10px 10px 8px; }
  .step h3 { font-size: 17.5px; margin: 10px 0 6px; }
  .step p, .incl-list li, .tick li, .zone { font-size: 15px; }
  .incl-list li { padding: 12px 0; font-size: 15px; }
  .incl { margin-top: 28px; padding: 22px 20px 8px; }
  .faq summary { font-size: 17px; padding: 17px 38px 17px 0; }
  .faq .ans { font-size: 15.5px; padding-bottom: 18px; }
  .price-side { padding: 22px 20px; }
  .pc-val { font-size: 25px; }
  .shot figcaption { font-size: 14px; padding: 16px 18px; }
  .ba-note, .zones-note, .price-note { font-size: 12.5px; }
  /* « Ce qui se passe ensuite » répète les étapes : inutile sur téléphone. */
  .final .after { display: none; }
  .final-contacts { margin-top: 24px; }
  /* Le second formulaire fait doublon avec celui du hero et la barre fixe :
     sur téléphone on le remplace par un renvoi, ça enlève 700 px de page. */
  .final-form { display: none; }
  .final-jump { display: flex; margin-top: 26px; }
  .incl-list { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .incl-list li { font-size: 14.5px; }
  .price-cards { gap: 0; }
  .price-card { padding: 18px 0 20px; }
  .tick li { padding: 10px 0; }
  .page-hero { padding: 84px 0 34px; }
  /* Relevé sur VB : la photo reste affichée sur téléphone, mais en bande
     courte — 16/7 sur 358 px de large, soit 157 px de haut, avec 18 px de
     marge. Masquée, le hero paraissait nu ; en pleine hauteur, elle
     repousserait le formulaire de 300 px. */
  .lp-proof { margin-top: 18px; }
  .lp-proof figcaption { font-size: 11px; padding: 6px 11px; right: 10px; bottom: 10px; }
  .lp-proof .cap-suite { display: none; }
  /* micro-ligne resserrée : elle prenait deux lignes juste avant la photo */
  .lp-micro { font-size: 12.4px; }
  .crumb { font-size: 12.4px; margin-bottom: 14px; }
  .lp-points { margin-top: 20px; gap: 10px; }
  .lp-points li { font-size: 15.5px; }
  .hero-cta { margin-top: 22px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lp-micro { font-size: 12.6px; margin-top: 14px; }
  .proofband { padding: 24px 0; }
  .proofband b { font-size: 21px; }
  .proofband span { font-size: 12.4px; }
  .topbar-note { display: none; }
  .brand-txt .bd { display: none; }
  /* Sur mobile, la photo du hero repousse le formulaire de 500 px :
     on la masque pour raccourcir le chemin vers la demande de devis. */
  .hero-proof { display: none; }
  .reviews { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: 1fr; gap: 0; }
  .hero-sub { font-size: 19px; }
  .lead { font-size: 19px; }

  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid var(--line-soft);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 10px; border-radius: var(--pill);
    font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1;
    letter-spacing: -0.014em; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s var(--ease);
  }
  .callbar a:active { transform: scale(.972); }
  .callbar svg { width: 18px; height: 18px; }
  /* Objectif appels : c'est le bouton d'appel qui porte la couleur d'action. */
  .callbar .call { background: var(--blue); color: #FFF; }
  .callbar .quote { background: var(--ink); color: #FFF; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .topbar .btn-ink { display: none; }
  .steps, .after, .hero-points { grid-template-columns: 1fr; }
  /* en colonne, le filet vertical n'a plus de sens : il redevient horizontal */
  .step { padding: 18px 0 0; }
  .step::before { display: none; }
  .step::after { left: 0; }
  .incl-list { grid-template-columns: 1fr; }
  .incl-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .incl-list li:last-child { border-bottom: 0; }
  .form-card, .final-form, .price-side { padding: 26px 22px 24px; }
  .cta-band > img { height: 500px; }
  .cta-band-in { padding: 56px 0 36px; }
  .figures { gap: 12px; }
  .figures b { font-size: 21px; }
  .figures span { font-size: 11.6px; }
  .figures b { font-size: 23px; }
  .proofband { gap: 20px 0; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #14202B; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .callbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-glass { --btn-bg: rgba(0, 0, 0, .66); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #48484C; --ink-3: #56565A; --line: rgba(0, 0, 0, .28); --line-soft: rgba(0, 0, 0, .18); }
}


/* ------------------------------------------------ territoire et cadrage */
/* Le bâti par secteur : des filets, pas des cartes. Une liste de cartes
   ferait « gabarit » là où on veut de la connaissance de terrain. */
.secteurs { margin-top: 26px; display: grid; gap: 0; }
.secteur {
  padding: 15px 0; border-top: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.secteur:last-child { border-bottom: 1px solid var(--line); }
.secteur b { color: var(--ink); font-weight: 700; }
.cadrage {
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--sh);
  align-self: start;
}
.cadrage h3 { margin-bottom: 14px; }
.cadrage p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cadrage p:last-child { margin-bottom: 0; }
/* Ce qu'il ne fait pas se détache : c'est la phrase qui construit la confiance. */
.cadrage-non {
  border-left: 3px solid var(--tuile); padding-left: 15px;
  background: var(--tuile-soft); border-radius: 0 var(--r-xs) var(--r-xs) 0;
  padding-top: 12px; padding-bottom: 12px; padding-right: 14px;
}