/* ==========================================================================
   Parquet IDF — Landing page Google Ads « Pose de parquet en Île-de-France »
   Conception MOBILE FIRST : le style de base cible le téléphone, les media
   queries n'ajoutent que les adaptations tablette / ordinateur
   (points de rupture : 420 / 560 / 620 / 760 / 900 px).

   Organisation du fichier
   -----------------------
   0.  Police auto-hébergée (hors bloc critique : ses URL sont relatives à
       CETTE feuille, elles ne peuvent pas être recopiées telles quelles
       dans la page).
   === CRITIQUE ===  tokens, base, boutons, en-tête, hero, barre d'appel.
       Ce bloc est recopié À L'IDENTIQUE dans le <style> inline de lp.html
       (≤ 8 Ko) : le premier écran se peint avant l'arrivée de la feuille.
       Toute modification ici doit être reportée dans lp.html, et
       inversement. Aucune url() vers un fichier dans ce bloc.
   === /CRITIQUE ===
   7.  Sections, têtes de section, étiquettes
   8.  Formulaire de devis
   9.  Galerie de réalisations + lightbox
   10. Prestations (grille à filets)
   11. Tarifs (table façon devis) + encadré « ce que couvre le prix »
   12. Étapes (fond espresso)
   13. Zone d'intervention
   14. Avis clients
   15. FAQ (<details> natifs)
   16. Encadrés et CTA final
   17. Pied de page
   18. Apparition au défilement + mouvement réduit
   19. Bandeau de consentement (injecté par lp.js)
   20. Impression

   Charte : palette BOIS (crème, sable, espresso, ambre profond), aucun
   bleu. Les contrastes des tokens ont été calculés (voir §1) : ne pas
   éclaircir. Photo = argument principal : le reste de la page reste calme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Police auto-hébergée
   ------------------------------------------------------------------------
   Manrope en fonte VARIABLE (axe 200-800) : un seul fichier couvre les
   graisses 480 (corps), 600, 700 et 800 utilisées. Auto-hébergée pour
   retirer Google Fonts du chemin critique ET ne plus transmettre l'IP des
   visiteurs à un tiers (RGPD). font-display: swap : le texte s'affiche
   immédiatement en police système, puis bascule ; les faces de repli à
   métriques ajustées déclarées ci-dessous (voir aussi §2) limitent le
   saut de mise en page à cette bascule.
   Le sous-ensemble latin est préchargé dans lp.html (<link rel="preload">).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2?v=1') 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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2?v=1') 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;
}

/* Polices de repli à métriques ajustées (technique fontaine / capsize) :
   pendant la période swap, la police système est mise à la chasse moyenne
   de Manrope pour que les lignes se coupent (presque) au même endroit →
   CLS limité. (font-size-adjust: from-font ne faisait rien ici : il ajuste
   chaque police sur sa PROPRE hauteur d'x, jamais sur celle de Manrope.)
   Roboto = Android ; Arial = iOS, macOS, Windows. Valeurs CALCULÉES avec @capsizecss/core (métriques Manrope : upm 2000, xWidthAvg 920, ascent 2132, descent −600), à
   recalculer avec `npx fontaine` ou @capsize/core sur manrope-latin.woff2
   (les overrides sont exprimés dans l'em AJUSTÉ : métrique Manrope ÷
   size-adjust). Le gras (H1 en 800) est synthétisé à partir du Regular
   local pendant la bascule. Ces faces sont référencées par --font (§1). */
@font-face { font-family: 'Manrope Fallback Arial';     src: local('Arial'), local('ArialMT');                 size-adjust: 103.185%; ascent-override: 103.31%;  descent-override: 29.074%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto';    src: local('Roboto Regular'), local('Roboto-Regular'); size-adjust: 103.412%; ascent-override: 103.083%; descent-override: 29.01%;  line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Helvetica'; src: local('Helvetica');                               size-adjust: 103.185%; ascent-override: 103.31%;  descent-override: 29.074%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   Notes sur le bloc critique qui suit (commentaires tenus HORS du bloc
   pour rester sous 8 Ko une fois recopié dans lp.html)
   ------------------------------------------------------------------------
   §1 Tokens — contrastes WCAG calculés : ink/bg 15,2 · body/bg 10,0 ·
      muted/bg 5,7 · muted/sable 5,2 · blanc/accent 5,1 · accent/bg 4,7 ·
      accent-dark/sable 5,5 · crème/wood-dark 9,5 · line-field/bg 3,9
      (UI ≥ 3) · green/green-50 5,1 · red/red-50 5,6 · contour --wood des
      étoiles/surface 5,75 et /sable 4,9 (UI ≥ 3). Ne pas éclaircir.
      Règle : un lien texte sur fond sable utilise --accent-dark, jamais
      --accent (4,29). Les ombres sont teintées bois et rares : carte
      formulaire (--sh-card) et boutons ambre (--sh-btn) seulement.
   §2 Base — les faces de repli « Manrope Fallback … » (§0) limitent le
      saut de mise en page à la bascule police système → Manrope ;
      text-wrap: balance sur h1-h3 uniquement, pretty sur p/li/blockquote ;
      scroll-padding-bottom (+ zone sûre iPhone) pour que le focus clavier
      ne s'arrête pas sous la barre d'appel fixe.
   §3 Boutons — plats, pilule, ≥ 54 px ; --main = ambre plein texte blanc,
      --tel = brun foncé texte crème, --light = crème sur fond sombre,
      --ghost = bordure seule. Survol : assombrir, rien d'autre, et sans
      transition (le cahier n'autorise que opacity/transform).
   §4 En-tête — fond crème opaque (un flou coûterait une passe GPU à chaque
      image du défilement) ; le numéro reste visible à toutes largeurs,
      compacté sous 420 px. Le sous-titre de marque est masqué sous 480 px
      (il se coupait « …Île-de- / France » à côté du bouton téléphone) ; le
      nom accessible du lien logo ne dépend pas de lui (aria-label).
   §5 Hero — élément LCP : aucune animation ni transition. Mobile : photo
      pleine largeur 16:10, fondu crème de 56 px, puis le texte. ≥ 900 px :
      grille asymétrique ; la marge gauche est portée par .hero lui-même
      (un pourcentage de padding sur un ÉLÉMENT de grille se résout sur sa
      zone de grille, pas sur la page — d'où un alignement faux au premier
      essai ; 100 % du conteneur et non 100vw : la barre de défilement
      fausserait l'alignement avec .wrap). Photo à droite jusqu'au bord de
      la fenêtre, collée sous l'en-tête (align-self: stretch), seul le coin
      bas-gauche arrondi, hauteur ≥ min(82vh, 720 px) et jamais plus courte
      que la colonne de texte, recadrage par object-fit. .photo--ph : repli bois si l'image manque
      (classe posée par lp.js sur erreur de chargement).
   §6 Barre d'appel — fixe, mobile seulement ; le bouton Appeler n'a pas
      de chiffres (voir lp.html).
   -------------------------------------------------------------------------- */

/* --cc-h : hauteur du bandeau cookies quand il est ouvert (posée par lp.js,
   initBandeau → reserverBas()). Ajoutée à scroll-padding-bottom pour qu'un
   champ atteint au clavier ne se retrouve pas caché derrière le bandeau
   fixe (WCAG 2.4.11). Vaut 0 quand le bandeau est fermé ou absent. */
/* === CRITIQUE:DEBUT === (copié tel quel dans le <style> inline de lp.html) */
/* 1. Tokens */
:root {
  --bg: #faf6f0;
  --surface: #fffdf9;
  --surface-2: #f3ebe0;
  --line: #e6dccd;
  --line-field: #8a7a6a;
  --ink: #2b1d12;
  --body: #4a3b2e;
  --muted: #6f5f50;
  --wood: #8b5a2b;
  --wood-dark: #5a3a22;
  --accent: #a85a17;
  --accent-dark: #9a5116;
  --accent-50: #f8ecdd;
  --accent-100: #f1d9bd;
  --green: #2a7147;
  --green-50: #e6f2ea;
  --red: #b3261e;
  --red-50: #fbe9e7;
  --star: #e0a100;
  --font: "Manrope", "Manrope Fallback Arial", "Manrope Fallback Roboto", "Manrope Fallback Helvetica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1120px;
  --pad: 1.25rem;
  --sec: 4rem;
  --r: 14px;
  --r-lg: 22px;
  --r-sm: 12px;
  --r-pill: 999px;
  --hdr: 64px;
  --bar: 72px;
  --sh-card: 0 2px 6px rgba(43, 29, 18, .06), 0 14px 34px rgba(43, 29, 18, .10);
  --sh-btn: 0 6px 16px rgba(43, 29, 18, .16);
}
@media (min-width: 900px) { :root { --sec: 5.5rem; } }

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 12px);
  scroll-padding-bottom: calc(var(--bar) + var(--cc-h, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}
body {
  margin: 0;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 480;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3 { margin: 0 0 .5em; color: var(--ink); font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; line-height: 1.25; }
p, li, blockquote { text-wrap: pretty; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
strong { color: var(--ink); font-weight: 700; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a.sr:focus-visible {
  position: fixed !important; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; padding: .65rem 1.1rem;
  overflow: visible; clip: auto; background: var(--ink); color: var(--bg);
  border-radius: var(--r); font-weight: 700; text-decoration: none;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: var(--sec); }
.sec--sand { background: var(--surface-2); }
.sec--ink { background: var(--ink); color: rgba(250, 246, 240, .85); }

/* 3. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 54px; padding: .85rem 1.5rem;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--main { background: var(--accent); color: #fff; box-shadow: var(--sh-btn); }
.btn--main:hover { background: var(--accent-dark); color: #fff; }
.btn--tel { background: var(--wood-dark); color: var(--bg); }
.btn--tel:hover { background: var(--ink); color: var(--bg); }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btns { display: grid; gap: .7rem; }
@media (min-width: 560px) {
  .btn { width: auto; }
  .btns { display: flex; flex-wrap: wrap; gap: .8rem; }
}

/* 4. En-tête */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: .75rem; min-height: var(--hdr); }
.logo { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--ink); text-decoration: none; }
.logo__mark { width: 36px; height: 36px; flex: none; color: var(--accent); }
.logo__name { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.logo__sub { display: block; font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--muted); }
.hdr__tel {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--wood-dark); color: var(--bg);
  font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-decoration: none;
}
.hdr__tel:hover { background: var(--ink); }
.hdr__tel svg { width: 17px; height: 17px; }
/* CTA de l'en-tête : uniquement >= 900 px. En dessous, la barre fixe du bas
   porte deja « Devis gratuit » — deux CTA identiques a l'ecran se nuisent. */
.hdr__cta {
  display: none; margin-left: auto; align-items: center;
  min-height: 44px; padding: .5rem 1.1rem; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: .95rem; font-weight: 800; white-space: nowrap; text-decoration: none;
}
.hdr__cta:hover { background: var(--accent-dark); }
/* Les deux boutons de l'en-tete vont ensemble a droite : sans remise a zero,
   .hdr__tel garde son margin-left:auto et l'espace libre se partage entre
   les deux, ce qui laisse le CTA flotter au milieu. */
@media (min-width: 900px) { .hdr__cta { display: inline-flex; } .hdr__tel { margin-left: 0; } }
@media (max-width: 479px) { .hdr .logo__sub { display: none; } }
@media (max-width: 419px) {
  .hdr__in { gap: .5rem; }
  .logo { gap: .45rem; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__name { font-size: .95rem; }
  .hdr__tel { padding: .45rem .7rem; gap: .35rem; font-size: .82rem; }
  .hdr__tel svg { width: 14px; height: 14px; }
}

/* 5. Hero (LCP : aucune transition) */
.hero { position: relative; background: var(--bg); }
.hero__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, rgba(250, 246, 240, 0), var(--bg));
}
.hero__body { max-width: var(--wrap); margin-inline: auto; padding: 1.25rem var(--pad) 2.5rem; }
.kick { margin: 0 0 .85rem; font-size: 1rem; font-weight: 700; color: var(--accent-dark); }
.hero h1 { margin-bottom: .55em; }
.hero__promesse { max-width: 40ch; margin-bottom: .9em; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.hero__lead { max-width: 62ch; margin-bottom: 1.25rem; }
.usp { display: grid; gap: .7rem; margin: 0 0 1.35rem; padding: 0; list-style: none; }
.usp li { display: flex; gap: .65rem; align-items: flex-start; margin: 0; }
.usp svg { width: 22px; height: 22px; flex: none; margin-top: .1em; color: var(--accent); }
.usp strong { display: block; color: var(--ink); }
.usp__d { display: block; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.hero__atout {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.5rem; padding: .55rem .95rem;
  border: 1px solid var(--accent-100); border-radius: var(--r-pill);
  background: var(--accent-50); color: var(--ink); font-size: .9rem; font-weight: 600;
}
.hero__atout::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(52vw, 800px)); align-items: center;
    padding-left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  }
  .hero__media { grid-column: 2; grid-row: 1; align-self: stretch; min-height: min(82vh, 720px); aspect-ratio: auto; border-radius: 0 0 0 var(--r-lg); }
  .hero__media::after { display: none; }
  .hero__body { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 1.5rem 2.75rem 2rem 0; }
  .hero__body > * { max-width: 600px; }
  .usp { gap: .45rem; margin-bottom: .9rem; }
  /* Les textes par service (?service=) sont 2x plus longs que le texte par
     defaut : sans ce resserrage, le lead de « poncage » ou « renovation »
     repousse les boutons sous la ligne de flottaison en 1440x900. */
  .hero__lead { max-width: 58ch; margin-bottom: .9rem; font-size: .9375rem; line-height: 1.5; }
  .usp__d { line-height: 1.45; }
  /* Doublon mot pour mot de .hero__promesse, et 66 px qui poussaient les
     boutons sous la ligne de flottaison en 1440x900. Gardé sur mobile. */
  .hero__atout { display: none; }
}

/* 6. Barre d'appel fixe (mobile) */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  padding: .5rem var(--pad) calc(.5rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.callbar .btn { min-height: 54px; padding-inline: .8rem; font-size: .95rem; }
@media (min-width: 900px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: var(--cc-h, 0px); }
}
/* === CRITIQUE:FIN === */

/* Compléments du bloc critique, sous la ligne de flottaison : boutons
   secondaires et repli « photo absente » (classe posée par lp.js). */
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--line-field); color: var(--ink); }
.btn--ghost:hover { background: var(--surface); }
.photo--ph { background: linear-gradient(135deg, var(--wood), var(--wood-dark)); }
.photo--ph img { visibility: hidden; }

/* --------------------------------------------------------------------------
   7. Sections, têtes de section, étiquettes
   ------------------------------------------------------------------------
   Rythme : crème / sable en alternance, étapes en espresso. Les têtes sont
   alignées à gauche (lecture éditoriale, pas de gabarit centré). L'étiquette
   .tag est facultative : casse de phrase, précédée d'un trait ambre de
   20 px — jamais de pilule ni de capitales espacées.
   -------------------------------------------------------------------------- */
.head { max-width: 70ch; margin-bottom: 2.25rem; }
.head h2 { margin-bottom: .45em; }
.head p { max-width: 62ch; font-size: 1.125rem; }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--ink .head p { color: rgba(250, 246, 240, .78); }
.sec--ink strong { color: #fff; }
/* Focus blanc sur les fonds sombres : le contour ambre s'y confond (1,9:1) */
.sec--ink :focus-visible, .ftr :focus-visible, .lb :focus-visible { outline-color: #fff; }

.tag {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem; font-size: .9rem; font-weight: 700; color: var(--accent-dark);
}
.tag::before { content: ""; width: 20px; height: 2px; flex: none; background: var(--accent); }
.sec--ink .tag { color: var(--accent-100); }

/* Pastille « à confirmer » : purement informative pour l'auteur, aucun
   rendu visuel — l'attribut sert au README et au relecteur. */
[data-a-confirmer] { position: relative; }

/* --------------------------------------------------------------------------
   8. Formulaire de devis
   ------------------------------------------------------------------------
   Seule carte de la page à porter une ombre (et une ombre bois) : c'est
   l'objectif de conversion. Labels visibles au-dessus des champs, champs
   à 1rem minimum (pas de zoom automatique sur iOS), cibles ≥ 52 px.
   -------------------------------------------------------------------------- */
.fcard {
  max-width: 760px; margin-inline: auto; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.fcard__hd { margin-bottom: 1.35rem; }
.fcard__hd h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin-bottom: .35rem; }
.fcard__hd p { color: var(--muted); }
@media (min-width: 560px) { .fcard { padding: 2.25rem; } }

form[data-lp-form] { display: grid; gap: 1rem; }
.row { display: grid; gap: 1rem; }
/* Intertitre des champs facultatifs : separe ce qui declenche le rappel
   (telephone, ville, projet) de ce qui ne fait qu'affiner le devis. */
.f__groupe { margin: .5rem 0 -.25rem; font-size: .8125rem; font-weight: 700; color: var(--muted); }
@media (min-width: 560px) { .row--2 { grid-template-columns: 1fr 1fr; } }

.f { display: grid; gap: .35rem; }
.f > label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.f .rq { color: var(--red); }
.f input, .f select, .f textarea {
  width: 100%; min-height: 52px; padding: .8rem .95rem;
  border: 1.5px solid var(--line-field); border-radius: 10px;
  background: var(--surface); font: inherit; font-size: 1rem; color: var(--ink);
}
.f input::placeholder, .f textarea::placeholder { color: var(--muted); opacity: 1; }
.f textarea { min-height: 110px; resize: vertical; }
.f select {
  appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5f50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px;
}
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(168, 90, 23, .16);
}
/* Champ avec unité (m²) : le suffixe est posé dans le champ, à droite */
.f__in { position: relative; }
.f__in input { padding-right: 3.2rem; }
.f__unit {
  position: absolute; top: 0; right: 1rem; height: 52px;
  display: flex; align-items: center; color: var(--muted); font-size: .9rem; pointer-events: none;
}
/* Erreurs : bordure rouge + message relié par aria-describedby (lp.js) */
.f--err input, .f--err select, .f--err textarea { border-color: var(--red); }
.f__err { display: none; font-size: .875rem; font-weight: 600; color: var(--red); }
.f--err .f__err { display: block; }

/* Pot de miel : hors écran, hors tabulation, invisible pour tout humain */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.consent { margin: 0; font-size: .875rem; color: var(--muted); }
.status { display: none; padding: .85rem 1rem; border-radius: 10px; font-size: .9375rem; font-weight: 600; }
.status.on, .status--ok, .status--ko { display: block; }
.status--ok { background: var(--green-50); color: var(--green); border: 1px solid #bfdcc9; }
.status--ko { background: var(--red-50); color: var(--red); border: 1px solid #f0c4bf; }
.note { margin: .15rem 0 0; font-size: .875rem; color: var(--muted); text-align: center; }
form[data-lp-form] .btn { width: 100%; }

.fcard__ft {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted); text-align: center; line-height: 1.75;
}
.fcard__tel { font-size: 1.125rem; font-weight: 800; color: var(--ink); white-space: nowrap; text-decoration: none; }
.fcard__tel:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. Galerie de réalisations + lightbox
   ------------------------------------------------------------------------
   8 vignettes 4:3, 2 colonnes mobile / 4 colonnes ≥ 760 px. La paire
   AVANT / APRÈS (positions 5 et 6) est rendue comme UNE figure large :
   les deux vignettes mordent chacune sur la moitié de la gouttière, il ne
   reste qu'un filet de 1 px de fond entre elles ; les coins ne sont
   arrondis qu'à l'extérieur et les badges se posent sur le coin intérieur.
   -------------------------------------------------------------------------- */
.galerie {
  --ggap: .75rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--ggap);
  margin: 0; padding: 0; list-style: none;
}
.galerie > li { margin: 0; min-width: 0; }
@media (min-width: 760px) { .galerie { --ggap: 1rem; grid-template-columns: repeat(4, 1fr); } }

.shot { margin: 0; }
.shot__lien {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-sm); background: var(--surface-2);
}
.shot__lien img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) { .shot__lien:hover img { transform: scale(1.02); } }
.shot__lien:focus-visible { outline-offset: 2px; }
.shot__cap { margin-top: .5rem; font-size: .8rem; line-height: 1.4; color: var(--muted); }

/* La paire avant/après : l'élément « avant » doit commencer en colonne 1
   pour que l'« après » tombe juste à sa droite, sur toutes les grilles. */
.galerie > li:has(.shot--avant) { grid-column-start: 1; }
.shot--avant .shot__lien { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-right: calc(-.5 * var(--ggap) + .5px); }
.shot--apres .shot__lien { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: calc(-.5 * var(--ggap) + .5px); }
.shot__badge {
  position: absolute; top: .6rem; padding: .3rem .7rem; border-radius: 8px;
  background: rgba(43, 29, 18, .78); color: var(--bg); font-size: .8rem; font-weight: 700; line-height: 1.2;
}
.shot--avant .shot__badge { right: .6rem; }
.shot--apres .shot__badge { left: .6rem; }

/* Lightbox : <dialog> natif ouvert par showModal() (lp.js), fond espresso
   translucide, photo 1200 px, légende, flèches, bouton fermer.
   closedby="any" ferme au clic hors contenu ; lp.js reproduit ce
   comportement là où l'attribut n'est pas encore connu (Safari). */
.lb {
  padding: 0; border: 0; background: transparent; color: var(--bg);
  max-width: min(96vw, 1200px); max-height: 96vh; overflow: visible;
}
.lb::backdrop { background: rgba(43, 29, 18, .86); }
.lb__img {
  display: block; width: auto; height: auto; max-width: min(96vw, 1200px); max-height: 80vh;
  margin-inline: auto; border-radius: var(--r-sm); background: var(--wood-dark);
}
.lb__cap { max-width: 70ch; margin: .8rem auto 0; padding-inline: 3.5rem; font-size: .9rem; text-align: center; color: rgba(250, 246, 240, .85); }
.lb__btn, .lb__close {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(250, 246, 240, .94); color: var(--ink); cursor: pointer;
}
.lb__btn:hover, .lb__close:hover { background: #fff; }
.lb__btn svg, .lb__close svg { width: 22px; height: 22px; }
/* Le bloc conteneur des flèches est le <dialog> entier (photo + légende) :
   50 % du dialog tombe sous le centre de la photo, « - 40px » ≈ la
   demi-légende (jusqu'à 3 lignes + marge .8rem sur mobile) et
   translateY(-50%) centre le bouton de 48 px lui-même. Ne pas « nettoyer »
   cette constante : en 40vh les flèches tombaient sous la photo à 375 px. */
.lb__btn { top: calc(50% - 40px); transform: translateY(-50%); }
.lb__btn[data-lb-prec] { left: .6rem; }
.lb__btn[data-lb-suiv] { right: .6rem; }
.lb form { margin: 0; }
.lb__close { top: .6rem; right: .6rem; }

/* --------------------------------------------------------------------------
   10. Prestations — grille à filets
   ------------------------------------------------------------------------
   Pas huit cartes ombrées identiques : une grille dont les filets sont
   le fond (gap 1 px sur --line) et dont chaque cellule est une surface.
   Sous 620 px, cellules compactes : icône + titre + prix (texte et puces
   masqués, sinon la section s'étire sur deux écrans).
   -------------------------------------------------------------------------- */
.grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
/* minmax(0, 1fr) : sans le 0, la colonne s'élargit au min-content d'un
   placeholder [PRIX_…] insécable et déborde de l'écran à 360 px. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.offer { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem 1.35rem; background: var(--surface); overflow-wrap: anywhere; }
.offer__ic { display: block; width: 24px; height: 24px; margin-bottom: 1rem; color: var(--wood); }
.offer__ic svg { width: 24px; height: 24px; }
.offer h3 { margin-bottom: .5rem; }
.offer p { font-size: .875rem; }
.offer ul { margin: .8rem 0 1.25rem; padding: 0; list-style: none; font-size: .875rem; }
.offer ul li { display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .35rem; }
.offer ul svg { width: 15px; height: 15px; flex: none; margin-top: .3em; color: var(--green); }
.offer__price {
  /* margin-top auto : le prix se cale en bas, aligné sur toute la rangée */
  margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line);
  font-size: .9rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* Carte du service ciblé par l'URL (?service=…) : fond ambre clair + liseré */
.offer.is-active { background: var(--accent-50); box-shadow: inset 0 3px 0 var(--accent); }
@media (max-width: 619px) {
  .offer { padding: 1.1rem .9rem 1rem; }
  .offer__ic { margin-bottom: .7rem; }
  .offer h3 { font-size: 1rem; margin-bottom: .6rem; }
  .offer p, .offer ul { display: none; }
  .offer__price { padding-top: .7rem; font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   11. Tarifs — table façon devis d'artisan
   ------------------------------------------------------------------------
   Filets horizontaux fins, chiffres tabulaires, ligne « Pose parquet
   flottant » surlignée en ambre clair avec un petit repère.
   -------------------------------------------------------------------------- */
.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs th, .tarifs td { padding: .95rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tarifs th:first-child, .tarifs td:first-child { padding-left: 0; }
.tarifs th:last-child, .tarifs td:last-child { padding-right: 0; }
.tarifs thead th { padding-top: 0; font-size: .875rem; font-weight: 700; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.tarifs__nom { display: block; font-weight: 700; color: var(--ink); }
.tarifs__det { display: block; margin-top: .15rem; font-size: .875rem; color: var(--muted); }
/* nowrap à toutes largeurs : « 21 €/m² » est court depuis que les prix
   réels ont remplacé les placeholders longs (l'anywhere coupait « €/m/2 »). */
.tarifs__prix { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Le TTC est la valeur qui engage vis-a-vis d'un particulier (art. L112-1) ;
   le HT est rappele en dessous, en petit, pour comparer aux devis pros. */
.tarifs__ht, .offer__ht { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.offer__ht { text-align: inherit; }
.tarifs__vedette td { background: var(--accent-50); }
.tarifs__vedette td:first-child { padding-left: .6rem; border-left: 3px solid var(--accent); }
.tarifs__tag {
  display: inline-block; margin-left: .5rem; padding: .12rem .5rem; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: .12em;
}
.tarifs__mention { max-width: 70ch; margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }

.couvre { margin-top: 2.5rem; padding: 1.5rem; background: var(--surface-2); border-radius: var(--r-lg); }
.couvre h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.couvre__cols { display: grid; gap: 1.5rem; }
.couvre__st { margin-bottom: .5rem; font-size: .9rem; font-weight: 700; color: var(--ink); }
.couvre__ok, .couvre__plus { margin: 0; padding: 0; list-style: none; }
.couvre__ok li, .couvre__plus li { position: relative; margin-bottom: .5rem; padding-left: 1.7rem; font-size: .9375rem; }
/* Coche verte (inclus) et « + » ambre (compté à part), dessinés en CSS */
.couvre__ok li::before {
  content: ""; position: absolute; left: .35rem; top: .35em;
  width: 6px; height: 11px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.couvre__plus li::before, .couvre__plus li::after {
  content: ""; position: absolute; left: .2rem; top: .7em; width: 13px; height: 2px; background: var(--accent);
}
.couvre__plus li::after { transform: rotate(90deg); }
.couvre__note { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .9rem; }
@media (min-width: 760px) {
  .couvre { padding: 2rem 2.25rem; }
  .couvre__cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   12. Étapes — fond espresso, gros numéros ambre clair
   ------------------------------------------------------------------------
   Les quatre étapes SONT une séquence : la structure le dit (numéros
   énormes, en colonne sur mobile, en rangée sur ordinateur).
   -------------------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.step { counter-increment: s; margin: 0; padding-top: 1.1rem; border-top: 1px solid rgba(250, 246, 240, .18); }
.step::before {
  content: counter(s, decimal-leading-zero); display: block; margin-bottom: .6rem;
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--accent-100); font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .4rem; color: #fff; }
.step p { margin: 0; font-size: .9375rem; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }

/* --------------------------------------------------------------------------
   13. Zone d'intervention
   ------------------------------------------------------------------------
   Huit départements, communes en texte courant séparées par des virgules :
   compact, lisible, et lp.js n'y touche pas.
   -------------------------------------------------------------------------- */
.depts { display: grid; gap: 1.75rem 2rem; }
.dept h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dept__code {
  padding: .15rem .45rem; border: 1px solid var(--accent-100); border-radius: 6px;
  background: var(--accent-50); color: var(--accent-dark); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cities { margin: 0; padding: 0; list-style: none; font-size: .9rem; line-height: 1.7; }
.cities li { display: inline; margin: 0; }
.cities li::after { content: ", "; }
.cities li:last-child::after { content: ""; }
.zones .callout { margin-top: 2.25rem; }
@media (min-width: 560px) { .depts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .depts { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   14. Avis clients — citations sobres, aucune ombre portée
   -------------------------------------------------------------------------- */
.gbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  width: fit-content; margin-bottom: 2rem; padding: .9rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.gbox__note { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gbox__src { font-size: .9rem; font-weight: 600; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
/* Contour bois sur chaque étoile : l'ambre --star seul fait 2,2:1 sur les
   cartes (WCAG 1.4.11 exige ≥ 3:1 pour un pictogramme) ; l'étoile vide
   garde le contour et perd son remplissage, donc reste discernable. */
.stars svg { width: 16px; height: 16px; stroke: var(--wood); stroke-width: 1.5; stroke-linejoin: round; }
.stars .off { fill: transparent; }

.revs { display: grid; gap: 1rem; }
@media (min-width: 620px) { .revs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .revs { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.rev {
  display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.rev[hidden] { display: none; }
.rev__top { display: flex; align-items: center; gap: .75rem; }
/* Avatar 44 px : la photo recouvre les initiales ; si lp.js retire l'image
   (fichier absent), les initiales de data-initiales réapparaissent. */
.rev__av {
  position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-100); color: var(--wood-dark); font-size: .9rem; font-weight: 800;
}
.rev__av::before { content: attr(data-initiales); }
.rev__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev__id { min-width: 0; }
.rev__nm { display: block; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rev__dt { display: block; font-size: .875rem; color: var(--muted); }
.rev .stars svg { width: 15px; height: 15px; }
.rev blockquote { margin: 0; font-size: 1rem; line-height: 1.55; }
.avis__plus { margin-top: 1.5rem; }
/* lp.js pose hidden sur le bouton après le clic : sans cette règle, le
   display:inline-flex de .btn l'emporte sur le [hidden] de l'agent
   utilisateur et le bouton resterait visible (même logique que .rev[hidden]). */
.avis__plus[hidden] { display: none; }
.avis__mention { max-width: 70ch; margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. FAQ — <details name="faq"> natifs : un seul ouvert à la fois, aucun JS
   ------------------------------------------------------------------------
   Filets, icône ± en ambre dessinée en CSS (le marqueur natif est masqué
   ET remplacé), réponse en retrait avec un filet ambre clair.
   -------------------------------------------------------------------------- */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 1.1rem 0; list-style: none; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q h3 { margin: 0; font-weight: 700; }
.faq__q:hover h3 { color: var(--accent-dark); }
.faq__ic { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-50); }
.faq__ic::before, .faq__ic::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px;
  background: var(--accent); transform: translate(-50%, -50%);
}
.faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
.faq__i[open] .faq__ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__i[open] .faq__q h3 { color: var(--accent-dark); }
.faq__a { padding: 0 0 1.35rem; }
.faq__a p { max-width: 68ch; margin-left: .3rem; padding-left: 1rem; border-left: 2px solid var(--accent-100); }

/* --------------------------------------------------------------------------
   16. Encadrés et CTA final
   -------------------------------------------------------------------------- */
.callout {
  display: flex; gap: .85rem; margin-top: 1.75rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--accent-100); border-radius: var(--r); background: var(--accent-50);
}
.callout svg { width: 22px; height: 22px; flex: none; margin-top: .15em; color: var(--accent-dark); }
.callout p { margin: 0; font-size: .9375rem; }

.cta {
  padding: 2.5rem 1.5rem; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cta p { max-width: 58ch; margin-inline: auto; }
/* Pas de justify-content sous 560 px : .btns y est une grille et le
   centrage empêchait la piste de s'étirer (boutons rétrécis à 266 px). */
.cta .btns { margin-top: 1.5rem; }
/* La carte est plus étroite que le hero : en police système agrandie le
   numéro du bouton Appeler se coupait (« 01 99 00 07 / 07 »). Taille en vw
   (insensible au réglage de police) + numéro insécable = une seule ligne.
   Portée volontairement limitée à CE bouton : hero et barre inchangés. */
.cta .btn--tel { font-size: min(1rem, 4vw); padding-inline: .9rem; }
.cta .btn--tel [data-tel-texte] { white-space: nowrap; }
@media (min-width: 560px) { .cta .btns { justify-content: center; } }
@media (min-width: 760px) { .cta { padding: 3.5rem 2.5rem; } }

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */
.ftr { background: var(--ink); color: rgba(250, 246, 240, .72); font-size: .9rem; }
.ftr__in { display: grid; gap: 2rem; padding-block: 3rem 2.5rem; }
.ftr .logo { margin-bottom: 1rem; }
.ftr .logo__name { color: var(--bg); }
.ftr .logo__sub { color: rgba(250, 246, 240, .62); }
.ftr h3 { margin-bottom: .75rem; font-size: 1rem; color: var(--bg); }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .55rem; }
.ftr li svg { width: 16px; height: 16px; flex: none; margin-top: .25em; color: var(--accent-100); }
.ftr a { color: rgba(250, 246, 240, .86); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__tel { font-size: 1.125rem; font-weight: 800; color: var(--bg); white-space: nowrap; }
.ftr__bot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  padding-block: 1.1rem; border-top: 1px solid rgba(250, 246, 240, .14);
  font-size: .875rem; color: rgba(250, 246, 240, .62);
}
/* align-items: center : sinon le bouton de 44 px étire les liens voisins
   (stretch) avec leur texte calé en haut. */
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
/* « Gérer mes cookies » est un <button> (action) stylé comme les liens
   voisins, mais avec une cible ≥ 44 px (contrat). */
.ftr__bot button[data-cc-open] {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none; font: inherit;
  color: rgba(250, 246, 240, .86); cursor: pointer; text-underline-offset: 3px;
}
.ftr__bot button[data-cc-open]:hover { color: #fff; text-decoration: underline; }
[data-cc-open][hidden] { display: none; }
@media (min-width: 760px) { .ftr__in { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }

/* --------------------------------------------------------------------------
   18. Apparition au défilement (activée par lp.js) + mouvement réduit
   ------------------------------------------------------------------------
   Sobre : opacité 0 → 1 et 10 px vers le haut, une seule fois, uniquement
   sur les éléments .rv (jamais le hero ni le formulaire). Sans JS, rien
   n'est masqué : la classe rv-on n'existe pas.
   -------------------------------------------------------------------------- */
.rv-on .rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.rv-on .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv-on .rv { opacity: 1; transform: none; }
  .shot__lien:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   19. Bandeau de consentement (RGPD / Consent Mode v2) — injecté par lp.js
   ------------------------------------------------------------------------
   Volontairement NON bloquant : pas de voile, pas de modale. Google Ads
   dégrade l'expérience de page en présence d'un interstitiel, et l'appel
   téléphonique ne nécessite aucun consentement. Refuser et accepter ont
   strictement la même géométrie (exigence CNIL).
   -------------------------------------------------------------------------- */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 0 .7rem calc(.7rem + env(safe-area-inset-bottom));
  animation: cc-in .3s ease both;
}
body.has-callbar .cc { bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); padding-bottom: .5rem; }
@media (min-width: 900px) { body.has-callbar .cc { bottom: 0; padding-bottom: .7rem; } }
.cc[hidden] { display: none; }
@keyframes cc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cc__box {
  max-width: 680px; margin-inline: auto; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 -2px 10px rgba(43, 29, 18, .08), 0 16px 42px rgba(43, 29, 18, .22);
}
.cc__t { margin: 0 0 .3rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cc__p { margin: 0 0 .95rem; font-size: .875rem; line-height: 1.55; color: var(--body); }
.cc__p a { font-weight: 700; }
.cc__acts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cc__btn {
  min-height: 48px; padding: .7rem .9rem;
  border: 1.5px solid var(--wood-dark); border-radius: var(--r-pill);
  background: var(--surface); color: var(--wood-dark);
  font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.cc__btn:hover { background: var(--accent-50); }
.cc__more {
  display: block; width: 100%; min-height: 44px; margin-top: .7rem; padding: .6rem .4rem; border: 0; background: none;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cc__more:hover { color: var(--accent-dark); }
/* Ouverture instantanée (0fr → 1fr sans transition : le cahier n'autorise
   que opacity/transform) ; seul le contenu du volet fond en opacité. */
.cc__panel { display: grid; grid-template-rows: 0fr; }
.cc__panel > div { overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.cc.is-open .cc__panel { grid-template-rows: 1fr; }
.cc.is-open .cc__panel > div { opacity: 1; }
.cc__opt { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--line); }
.cc__opt:first-child { margin-top: .9rem; }
.cc__opt input { width: 22px; height: 22px; margin: .15rem 0 0; flex: none; accent-color: var(--accent); }
.cc__opt input:disabled { opacity: .55; }
.cc__opt b { display: block; font-size: .9rem; color: var(--ink); }
.cc__opt span { display: block; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.cc__save {
  width: 100%; min-height: 46px; margin-top: .85rem; border: 0; border-radius: var(--r-pill);
  background: var(--wood-dark); color: var(--bg); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.cc__save:hover { background: var(--ink); }
@media (min-width: 620px) {
  .cc__box { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; align-items: center; }
  .cc__t, .cc__p { grid-column: 1; }
  .cc__p { margin-bottom: 0; }
  .cc__acts { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; min-width: 200px; }
  .cc__more { grid-column: 1 / -1; text-align: left; }
  .cc__panel { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   20. Impression
   ------------------------------------------------------------------------
   Un prospect imprime la page (ou l'exporte en PDF) pour comparer les
   tarifs : on retire les éléments fixes, on déplie la FAQ et on repasse
   les fonds sombres en noir sur blanc (les navigateurs n'impriment pas les
   fonds par défaut, le texte clair disparaîtrait).
   -------------------------------------------------------------------------- */
@media print {
  .callbar, .cc, .lb, .hdr__tel, .avis__plus, .sr { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .hdr { position: static; }
  .hero { display: block; }
  .hero__media { max-height: 60mm; }
  .fcard { box-shadow: none; }
  .rev[hidden] { display: flex; }
  .faq__i::details-content { display: block !important; content-visibility: visible !important; }
  .sec--ink, .cta, .ftr { background: #fff !important; color: #000 !important; }
  .sec--ink *, .cta *, .ftr * { color: #000 !important; }
  .rv-on .rv { opacity: 1 !important; transform: none !important; }
}