/* AGOS Déménagements — maquette 2026. Mobile first. Couleurs injectées par le générateur (:root inline).
   Base : contrat tools/composants.css + feuille héritée de gangloff, re-skinnée à la charte du live (inventory/charter.md) :
   noir chaud #171717, or #b69669, Outfit. Hero sombre (l'ADN du live), sans photo (aucune photo authentique). */

:root {
  --primary: #1a1815;        /* noir chaud du live (#171717), titres et fonds profonds */
  --primary-dark: #0e0d0b;
  --accent: #b69669;         /* or du live : boutons, filets, mots en accent sur fond sombre */
  --accent-deep: #86693a;    /* le même or assombri pour porter du texte sur fond clair (5,2:1) */
  --accent-light: #f4ecdd;
  --cream: #f6f0e6;
  --cream-2: #ece2d0;
  --warm: #b69669;
  --warm-ink: #86693a;
  --warm-light: #d9c39b;
  --ink: #1a1815;
  --text: #37322b;
  --muted: #6b6355;
  --bg: #ffffff;
  --bg-alt: #f7f3ec;
  --border: #e6dece;
  --success: #2f7a3f;
  --danger: #b3261e;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --shadow-s: 0 2px 10px rgba(26, 24, 21, 0.07);
  --shadow-m: 0 12px 32px rgba(26, 24, 21, 0.16);
  --container: 1180px;
  --font-head: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
}
@media (min-width: 900px) {
  body { padding-bottom: 0; padding-right: 0; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; color: var(--ink); }
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); letter-spacing: -0.025em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: 3.75rem 0; }
.section-alt { background: var(--bg-alt); }
.section-lead { max-width: 60ch; color: var(--muted); font-size: 1.05rem; margin-bottom: 1.6rem; }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 0.6em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.75rem 1.25rem; border-radius: 10px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.005em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--primary); box-shadow: var(--shadow-s); }
.btn-primary:hover { background: #c7a97d; box-shadow: var(--shadow-m); }
.btn-accent { background: var(--primary); color: #fff; box-shadow: 0 3px 10px rgba(26, 24, 21, 0.22); }
.btn-accent:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-ghost { background: var(--accent-light); color: var(--primary); }
.btn-block { width: 100%; }
.btn-lg { padding: 0.85rem 1.4rem; font-size: 1rem; }
.cta-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.6em; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(14, 13, 11, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(182, 150, 105, 0.3); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
/* Le logo est le vrai fichier du prospect (cartouche crème, lettrage gothique) : mot-marque et baseline
   textuels sont masqués, le fichier fait tout. */
.logo { display: flex; align-items: center; gap: 0.35em; text-decoration: none; white-space: nowrap; min-height: 44px; }
.logo strong, .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.logo-img { width: auto; height: 48px; object-fit: contain; }
/* Pas de fichier logo exploitable (le sceau du live fait 188 px sur fond noir) : mot-marque en texte. */
.logo:not(:has(.logo-img)) { flex-direction: column; align-items: flex-start; gap: 0.28rem; }
/* Le sceau du live (188 px, fond transparent) à côté du mot-marque. */
.logo:has(.logo-img) { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .7rem; row-gap: .3rem; align-items: center; align-content: center; }
.logo:has(.logo-img) .logo-img { grid-row: 1 / span 2; height: 50px; width: 50px; }
.logo:has(.logo-img) strong { position: static; width: auto; height: auto; clip: auto; overflow: visible; align-self: end; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: .16em; line-height: 1; color: var(--accent); }
.logo:has(.logo-img) span { position: static; width: auto; height: auto; clip: auto; overflow: visible; align-self: start; font-size: .56rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,.85); }
@media (max-width: 480px) { .logo:has(.logo-img) .logo-img { height: 42px; width: 42px; } .logo:has(.logo-img) strong { font-size: 1.15rem; } }
.logo:not(:has(.logo-img)) strong { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.16em; line-height: 1; color: var(--accent); }
.logo:not(:has(.logo-img)) span { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,0.85); }
@media (max-width: 480px) { .logo-img { height: 38px; } }
.footer-logo { display: block; width: 96px; height: 96px; margin: 0 0 1.1rem; }
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; gap: 1.15rem; flex-wrap: nowrap; }
.nav-desktop a { font-weight: 600; font-size: 0.92rem; text-decoration: none; color: rgba(255,255,255,0.88); padding: 0.4em 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-tel { display: none; font-weight: 700; color: #fff; text-decoration: none; font-size: 0.92rem; align-items: center; gap: 0.4em; white-space: nowrap; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-s); border: 1px solid rgba(255,255,255,0.28); background: transparent; cursor: pointer; color: #fff; }
.nav-mobile { display: none; position: fixed; inset: 64px 0 0 0; background: var(--primary-dark); z-index: 49; padding: 1.5rem 22px; overflow-y: auto; }
.nav-mobile.is-open { display: block; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-mobile a:not(.btn) { display: block; padding: 0.9rem 0.2rem; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.16); }
.nav-mobile .btn { margin-top: 1rem; }
@media (max-width: 1099px) {
  /* Sous 1100 px aussi, le CTA d'en-tête se mesure dans sa barre de 64 px : ~42 px, marge visible (leçon tella). */
  .site-header .btn-primary { padding: 0.5rem 0.95rem; font-size: 0.9rem; white-space: nowrap; min-height: 44px; }
}
@media (max-width: 480px) {
  .site-header .container { gap: 0.6rem; }
}
@media (min-width: 1100px) {
  .nav-desktop { display: block; }
  .menu-toggle { display: none; }
  .nav-mobile { display: none !important; }
  /* Le CTA d'en-tête a son propre gabarit : ~60 % de la barre de 64 px, marge visible des deux côtés
     (leçon tella/enterway 2026-09-18). Mesuré au gate, pas estimé. */
  .site-header .btn-primary { min-height: 38px; padding: 0.5rem 1.05rem; font-size: 0.9rem; }
}
@media (min-width: 1280px) { .header-tel { display: inline-flex; } }

/* ---------- Trust strip (pages intérieures, sous le hero de page) ---------- */
.trust-strip { background: var(--primary); color: #e6dccb; font-size: 0.82rem; padding: 0 0 1.4rem; }
.trust-strip > .container { text-align: center; border-top: 1px solid rgba(255,255,255,0.14); padding: 1.1rem 22px 0; }
.trust-strip strong { display: block; color: #fff; font-weight: 700; letter-spacing: 0.01em; }
.trust-strip span { opacity: 0.92; }
@media (max-width: 720px) { .ts-zones { display: none; } }

/* ---------- Hero (accueil) : clair, crème, un seul traitement de relief ----------
   Fond crème du cartouche, une seule lueur orange en haut à droite (pas de trame, pas de bloc décoratif),
   la photo d'équipe dans un cadre arrondi à ombre douce, un mot du H1 en orange, un filet d'accent.
   Le discours à gauche, la photo à droite, et rien d'autre entre les deux ; le devis en dessous,
   pleine largeur (maquette.md § Home 3, Lucie 2026-09-18). */
.hero {
  color: var(--ink); padding: 3.25rem 0 3.5rem; position: relative; overflow: hidden;
  background:
    radial-gradient(760px 460px at 88% -10%, rgba(205, 109, 51, 0.22), transparent 62%),
    var(--cream);
}
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: 1.06; color: var(--ink); margin-bottom: 0.5em; }
.hero h1 .accent { color: var(--accent); white-space: nowrap; }
.hero .container { position: relative; }
.hero-grid { display: grid; gap: 2.25rem; }
.hero-stage { order: 3; }
.hero-quote { order: 2; }
.hero-copy::before { content: ""; display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 1.1rem; }
.hero-sub { font-size: 1.12rem; color: var(--text); max-width: 52ch; margin-bottom: 1.6rem; line-height: 1.6; }
.hero-chip { display: inline-flex; align-items: center; gap: 0.5em; background: #fff; border: 1px solid var(--cream-2); color: var(--primary); padding: 0.5em 0.9em; border-radius: 999px; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.2rem; box-shadow: var(--shadow-s); }
.hero-chip svg { color: var(--accent-deep); }
.hero-call { margin: 1.2rem 0 0; color: var(--text); font-size: 0.98rem; }
.hero-call a { color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--accent); }
.hero-call-note { color: var(--muted); font-size: 0.9rem; }
.hero-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.4rem; }
.hero-actions .btn { width: 100%; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; } .hero-actions .btn { width: auto; } }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; column-gap: 3rem; row-gap: 2.5rem; }
  .hero-stage { order: 0; align-self: center; }
  .hero-quote { order: 0; grid-column: 1 / -1; width: 100%; max-width: 880px; margin: 0 auto; }
  .hero { padding: 3.75rem 0 4rem; }
  .hero-call-cta { display: none; }
  .hero-call { text-align: center; }
}
/* Média du hero : cadre arrondi, ombre douce, la photo d'équipe est presque carrée (1600 × 1436) — cadre 10/9,
   pas de recadrage qui couperait des visages. */
.hero-stage { position: relative; margin: 1.6rem 14px 1rem 6px; }
@media (min-width: 960px) { .hero-stage { margin: 0; } }
.hero-stage-inner {
  position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 10 / 9;
  background: var(--cream-2);
  border: 1px solid rgba(26, 24, 21, 0.12);
  box-shadow: 0 30px 60px -28px rgba(26, 24, 21, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.hero-stage-inner img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.hero-stage.has-panel .hero-stage-inner { aspect-ratio: auto; display: block; background: rgba(255,255,255,.04); border: 0; border-left: 1px solid rgba(182,150,105,.38); }

/* Panneau « route » (section zones : le hero porte une photo) */
.hero-route-panel { --hr-step: 3.2rem; --hr-gap: 1.4rem; --hr-pitch: calc(var(--hr-step) + var(--hr-gap)); position: relative; padding: 1.6rem 1.5rem 1.9rem; overflow: hidden; color: #fff; }
.hr-year { position: absolute; right: 1.1rem; bottom: 0.4rem; font-size: clamp(3.2rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #fff; opacity: 0.09; pointer-events: none; user-select: none; font-family: var(--font-head); }
.hr-tag { position: relative; display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-light); margin-bottom: 1.4rem; }
.hr-line { position: relative; display: grid; gap: var(--hr-gap); }
.hr-stop { position: relative; min-height: var(--hr-step); padding-left: 2.2rem; }
.hr-stop::before { content: ""; position: absolute; left: 9px; top: 1.6rem; height: calc(var(--hr-pitch) - 1.6rem); width: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)); }
.hr-stop.is-end::before { display: none; }
.hr-dot { position: absolute; left: 0; top: 0.32rem; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-dark); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09); }
.hr-stop.is-end .hr-dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(182, 150, 105, 0.3); }
.hr-stop strong { display: block; color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; font-family: var(--font-head); }
.hr-stop span { display: block; color: #ded3bf; font-size: 0.83rem; margin-top: 0.1em; }
@media (min-width: 960px) {
  .hero-route-panel { --hr-step: 4.1rem; --hr-gap: 2.1rem; padding: 2.1rem 1.9rem 2.3rem; }
  .hr-tag { margin-bottom: 1.9rem; }
}

/* ---------- QuoteWidget ---------- */
.quote-widget { background: #fff; color: var(--text); border-radius: var(--radius-l); padding: 1.25rem; box-shadow: var(--shadow-m); margin-top: 0.4rem; border: 1px solid var(--cream-2); }
.qw-title { display: flex; align-items: center; gap: 0.5em; font-weight: 800; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.9rem; font-family: var(--font-head); }
.qw-title svg { color: var(--accent-deep); }
.qw-fields { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qw-fields { grid-template-columns: 1fr 1fr 1fr; } }
.qw-field { display: flex; flex-direction: column; gap: 0.3em; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.qw-field input { width: 100%; padding: 0.8rem 0.85rem; border: 1.5px solid var(--border); border-radius: var(--radius-s); font: inherit; font-size: 1rem; font-weight: 500; min-height: 46px; background: #fff; }
.qw-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.qw-check { display: flex; align-items: center; gap: 0.5em; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: 0.6rem 0 0.9rem; cursor: pointer; min-height: 32px; }
.qw-check input { width: 18px; height: 18px; accent-color: var(--accent-deep); }
.quote-widget .btn { margin-top: 0.2rem; padding: 0.85rem 1.2rem; font-size: 0.95rem; white-space: nowrap; }
.quote-widget .btn-accent { background: var(--accent-deep); }
.quote-widget .btn-accent:hover { background: #6e5228; }
@media (min-width: 640px) { .quote-widget .btn-block { width: auto; min-width: 16rem; } }
.quote-widget .cta-note { margin-bottom: 0; }

/* ---------- Proof strip ---------- */
.proof-strip { background: #fff; border-bottom: 1px solid var(--border); }
.proof-strip .container { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-cell { padding: 1.7rem 1rem 1.5rem; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof-cell:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) { .proof-cell { border-bottom: 0; } .proof-cell:nth-child(2n) { border-right: 1px solid var(--border); } .proof-cell:last-child { border-right: 0; } }
.proof-cell strong { display: block; font-size: clamp(2.3rem, 5.2vw, 3.1rem); font-weight: 800; color: var(--primary); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-head); }
.proof-cell span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-top: 0.5em; letter-spacing: 0.01em; line-height: 1.35; }
a.proof-cell-link { position: relative; text-decoration: none; color: inherit; padding: 1.7rem 1.6rem 1.5rem 1rem; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background-color 0.2s ease; }
a.proof-cell-link::after { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0.95rem; height: 1px; background: var(--accent-deep); opacity: 0.3; }
a.proof-cell-link:hover { background: var(--bg-alt); }
a.proof-cell-link:hover::after { opacity: 0.7; }
a.proof-cell-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.proof-cell-arrow { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--accent-deep); opacity: 0.55; }
a.proof-cell-link:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) { a.proof-cell-link { border-bottom: 0; border-right: 1px solid var(--border); } a.proof-cell-link:last-child { border-right: 0; } }

/* ---------- Credentials ---------- */
/* La rupture de rythme de l'accueil : une bande brun profond, la couleur de l'enseigne. Une seule fois par page. */
.section-dark {
  background:
    radial-gradient(820px 430px at 82% -10%, rgba(205, 109, 51, 0.28), transparent 62%),
    linear-gradient(170deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ebe3d3;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: var(--warm-light); }
.section-dark .cred-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.section-dark .cred-card p { color: #d8ccb6; }
.section-dark .cred-icon { color: var(--warm-light); background: rgba(205, 109, 51, 0.2); }
.section-dark .cred-mark.is-verified { color: #9fdcae; }
.section-dark .cred-mark.is-commitment { color: #cdc2ad; }

.cred-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .cred-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cred-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cred-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 1.5rem; box-shadow: var(--shadow-s); }
.cred-icon { color: var(--accent-deep); background: var(--accent-light); border-radius: 12px; padding: 10px; width: 46px; height: 46px; margin-bottom: 0.9rem; }
.cred-card h3 { margin-bottom: 0.35em; }
.cred-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.cred-mark { display: flex; align-items: center; gap: 0.4em; margin: 0.9rem 0 0; font-size: 0.82rem; font-weight: 700; }
.cred-mark svg { flex: none; }
.cred-mark.is-verified { color: var(--success); }
.cred-mark.is-commitment { color: var(--muted); font-weight: 600; }

/* ---------- Services ---------- */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 1.6rem; box-shadow: var(--shadow-s); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; gap: 0.8rem; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.service-card.has-img { padding-top: 0; overflow: hidden; }
.service-card.has-img .card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1.1rem; }
.icon-badge { width: 52px; height: 52px; border-radius: var(--radius-m); background: var(--accent-light); display: flex; align-items: center; justify-content: center; }
.icon-badge svg { color: var(--accent-deep); }
.service-card a.card-link { font-weight: 700; color: var(--accent-deep); text-decoration: none; margin-top: auto; }
.service-card a.card-link:hover { text-decoration: underline; }

.service-hero { display: grid; gap: 1.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; border-radius: var(--radius-l); padding: 2rem; margin: 0 0 2.5rem; box-shadow: var(--shadow-m); position: relative; overflow: hidden; }
@media (min-width: 900px) { .service-hero { grid-template-columns: 1.15fr 0.85fr; align-items: center; padding: 2.5rem; } }
.service-hero h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.5rem 0 0.4em; }
.service-hero-tag { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm-light); }
.service-hero-lead { color: #ebe3d3; font-size: 1.05rem; max-width: 52ch; }
.service-hero-points { display: grid; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.service-hero-points li { display: flex; gap: 0.6em; align-items: flex-start; font-size: 0.95rem; color: #f4ede2; }
.service-hero-points svg { flex: none; margin-top: 4px; color: var(--warm-light); }
.service-hero .btn-primary { background: #fff; color: var(--primary); white-space: nowrap; }
.service-hero .btn-primary:hover { background: var(--accent-light); }
.service-hero-visual { display: none; justify-content: center; align-items: center; color: rgba(255,255,255,0.22); }
.service-hero-img { border-radius: var(--radius-m); object-fit: cover; aspect-ratio: 4 / 3; width: 100%; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7); }
@media (min-width: 900px) { .service-hero-visual { display: flex; } }
.other-services-title { font-size: 1.05rem; color: var(--muted); font-weight: 700; margin: 0 0 1rem; }

/* ---------- Étapes ---------- */
.steps { display: grid; gap: 2rem 2.5rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.step { position: relative; padding: 1.6rem 0 0; background: none; border: 0; border-top: 3px solid var(--accent); border-radius: 0; }
.step-num { font-size: clamp(2.8rem, 6vw, 3.6rem); font-weight: 800; color: var(--accent-deep); letter-spacing: -0.05em; line-height: 0.9; margin-bottom: 0.45rem; font-variant-numeric: tabular-nums; font-family: var(--font-head); }
.step h3 { margin-bottom: 0.25em; font-size: 1.1rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 32ch; }
.step-link { display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.7rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.step-link:hover { text-decoration: underline; }

/* ---------- Avis ---------- */
.reviews-google { font-size: 0.95rem; color: var(--muted); margin: -0.5rem 0 1.2rem; }
.reviews-google strong { color: var(--ink); font-size: 1.1rem; }
.reviews-google a { color: var(--accent-deep); font-weight: 700; }
.reviews-track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.review-card { position: relative; scroll-snap-align: start; flex: 0 0 min(340px, 84vw); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 1.5rem; box-shadow: var(--shadow-s); }
.review-mark { position: absolute; top: 1rem; right: 1.1rem; color: var(--cream-2); }
.review-top { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.8em; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-family: var(--font-head); }
.review-name { font-weight: 700; font-size: 0.95rem; }
.review-source { font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.review-source a { color: var(--accent-deep); }
.review-source .review-date::before { content: "·"; margin-right: 0.45em; color: var(--border); }
.stars { display: flex; gap: 2px; margin-bottom: 0.6em; }
.star-on { color: #c99400; fill: #c99400; }
.review-text { font-size: 0.95rem; color: var(--text); margin: 0; }
/* Cartes égales : texte intégral dans le DOM, replié à 6 lignes, « Lire la suite » le déplie (W10). */
.review-card.is-clamped .review-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review-card.is-expanded .review-text { display: block; -webkit-line-clamp: none; }
.review-more { margin-top: 0.7rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.review-more:hover { color: var(--primary); }
.review-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Zones ---------- */
.route-caption { font-size: 1.05rem; font-weight: 600; color: var(--ink); max-width: 60ch; margin: 1.2rem 0 0.6rem; }
.zone-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.zone-grid { display: grid; gap: 1.8rem; }
@media (min-width: 900px) { .zone-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 2.5rem; } }
.zone-grid .hero-route-panel { border-radius: var(--radius-l); background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow: 0 24px 50px -22px rgba(26, 24, 21, 0.45); }
.zone-copy .route-caption { margin-top: 0; }
.zone-chip { background: #fff; color: var(--primary); border: 1.5px solid var(--border); font-weight: 700; font-size: 1rem; padding: 0.6em 1.2em; border-radius: 999px; text-decoration: none; }
a.zone-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.zone-chip-alt { background: var(--primary); color: #fff; border-color: var(--primary); }
.local-group { margin-top: 1.4rem; }
.local-group h3 { font-size: 1rem; color: var(--muted); font-weight: 700; letter-spacing: 0.02em; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.1rem 0; font-weight: 700; font-size: 1rem; color: var(--ink); font-family: inherit; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.faq-q svg { flex: none; transition: transform 0.2s ease; color: var(--accent-deep); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.is-open .faq-a { max-height: 400px; }
.faq-a p { padding: 0 0 1.1rem; color: var(--muted); }

/* ---------- CTA final ---------- */
.cta-final { background: var(--primary); color: #fff; }
.cta-final h2 { color: #fff; }
.cta-final > .container > p { color: #ebe3d3; }
.cta-channels { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 720px) { .cta-channels { grid-template-columns: repeat(2, 1fr); } }
.cta-channel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-m); padding: 1.3rem; display: flex; gap: 1rem; align-items: flex-start; }
.cta-channel svg { color: var(--warm-light); flex: none; }
.cta-channel a { font-weight: 700; text-decoration: none; color: #fff; font-size: 1.05rem; }
.cta-channel p { margin: 0.3em 0 0; font-size: 0.88rem; color: #ded3bf; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #d8cfbf; font-size: 0.9rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: 2.75rem 0 1.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 0.9em; }
.footer-grid a { color: #d8cfbf; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-grid li { margin-bottom: 0.55em; }
.footer-grid .footer-subhead { margin-top: 1.6em; }
.footer-socials { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.footer-socials a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0.4em 0.9em; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; font-weight: 600; font-size: 0.85rem; }
.footer-socials a:hover { border-color: var(--accent); }
.footer-socials svg { color: var(--warm-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.1rem 0; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between; }
@media (max-width: 640px) {
  .site-footer ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .site-footer ul a { min-height: 44px; }
}

/* ---------- Rail / barre mobile ---------- */
.rail { display: none; }
@media (min-width: 900px) {
  .rail { display: flex; flex-direction: column; gap: 0.6rem; position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40; }
  .rail-btn { display: flex; align-items: center; gap: 0.6em; height: 56px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-m); border: 1px solid var(--border); overflow: hidden; width: 56px; padding: 0 17px; transition: width 0.25s ease; text-decoration: none; color: var(--ink); white-space: nowrap; }
  .rail-btn svg { flex: none; }
  .rail-btn span { opacity: 0; transition: opacity 0.15s ease; font-weight: 700; font-size: 0.9rem; }
  .rail-btn:hover, .rail-btn:focus-visible { width: auto; }
  .rail-btn:hover span, .rail-btn:focus-visible span { opacity: 1; }
  .rail-btn.rail-tel svg { color: inherit; }
  .rail-btn.rail-devis { background: var(--accent); color: var(--primary); border-color: var(--accent); }
}
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1.4fr; padding-bottom: env(safe-area-inset-bottom, 0); }
@media (min-width: 900px) { .mobile-bar { display: none; } }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.6rem 0; text-decoration: none; color: var(--ink); font-size: 0.74rem; font-weight: 700; min-height: 58px; }
.mobile-bar .bar-devis { background: var(--accent); color: var(--primary); }

/* ---------- Formulaires ---------- */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4em; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.85rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-size: 1rem; font-family: inherit; background: #fff; min-height: 46px; color: var(--text); }
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea { border-color: var(--danger); }
.form-error { display: none; color: var(--danger); font-size: 0.8rem; margin-top: 0.3em; }
.form-field.is-invalid .form-error { display: block; }
.form-status { padding: 1rem; border-radius: var(--radius-s); font-weight: 700; display: none; margin-bottom: 1rem; }
.form-status.is-visible { display: block; }
.form-status.is-ok { background: #e7f5ec; color: var(--success); }
.form-status.is-error { background: #fbeaea; color: var(--danger); }
.form-row-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
.qf-check-field { display: flex; align-items: flex-end; }
.qf-check-field .qw-check { display: flex; align-items: center; gap: 0.6em; min-height: 44px; margin: 0; color: var(--ink); }
.qf-check-field .qw-check input { width: 20px; height: 20px; flex: none; margin: 0; }
.qf fieldset { border: 0; padding: 0; margin: 0; }
.qf-legend { font-weight: 800; font-size: 1.15rem; color: var(--ink); margin-bottom: 1rem; padding: 0; font-family: var(--font-head); }
.qf-step { display: none; }
.qf-step.is-active { display: block; }
.qf-progress { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; }
.qf-progress li { flex: 1; display: flex; align-items: center; gap: 0.5em; font-size: 0.8rem; font-weight: 700; color: var(--muted); padding-bottom: 0.6rem; border-bottom: 3px solid var(--border); }
.qf-progress li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--ink); font-size: 0.75rem; }
.qf-progress li.is-active { color: var(--accent-deep); border-color: var(--accent); }
.qf-progress li.is-active span { background: var(--accent-deep); color: #fff; }
.qf-progress li.is-done { color: var(--success); border-color: var(--success); }
.qf-progress li.is-done span { background: var(--success); color: #fff; }
.qf-progress li[hidden] { display: none; }
.qf-nav { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.qf-nav .btn-block { flex: 1 1 100%; }
@media (min-width: 560px) { .qf-nav .btn-block { flex: 1 1 auto; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: 1.2fr 0.8fr; } }
.contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-block { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 1.4rem; }
.contact-block h3 { margin-bottom: 0.6em; }
.contact-block ul li { display: flex; gap: 0.6em; margin-bottom: 0.6em; align-items: flex-start; font-size: 0.94rem; }
.contact-block svg { color: var(--accent-deep); flex: none; margin-top: 2px; }
.map-frame { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); }
.map-frame iframe { width: 100%; height: 220px; border: 0; display: block; }
.reviews-compact { display: flex; flex-direction: column; gap: 0.6rem; }
.reviews-compact .rc-line { font-size: 0.92rem; color: var(--text); border-left: 3px solid var(--accent); padding-left: 0.7em; margin: 0; }

/* ---------- Pages intérieures : hero brun, la couleur de l'enseigne ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 2.6rem 0 2.9rem; border-bottom: 0;
  background:
    radial-gradient(760px 420px at 88% -20%, rgba(205, 109, 51, 0.38), transparent 62%),
    linear-gradient(140deg, var(--primary) 0%, var(--primary-dark) 78%);
}
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--warm-light); margin-bottom: 0.3em; }
.page-hero p { max-width: 68ch; color: #dbd0bb; font-size: 0.97rem; }
.page-hero p.page-hero-lead { color: #f6f0e6; font-size: 1.12rem; line-height: 1.6; max-width: 60ch; }
.page-hero .btn-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.page-hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }
.page-hero .btn-primary { background: #fff; color: var(--primary); }
.page-hero .btn-primary:hover { background: var(--accent-light); }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8em; }
.breadcrumb a { color: var(--accent-deep); text-decoration: none; }
.page-hero .breadcrumb { color: #cdc2ad; }
.page-hero .breadcrumb a { color: #eee4d3; }
.legal-block { max-width: 78ch; margin-inline: 0; }
.legal-block dl { display: grid; grid-template-columns: 1fr; gap: 0.3rem 1rem; }
.legal-block dt { font-weight: 700; color: var(--ink); margin-top: 0.8em; }
.legal-block dd { margin: 0; color: var(--text); }
@media (min-width: 760px) {
  .legal-block dl { grid-template-columns: 15rem 1fr; align-items: baseline; gap: 0.55rem 1.5rem; }
  .legal-block dt { margin-top: 0; }
}

/* ---------- Sections texte + photo, listes, liens ---------- */
.split { display: grid; gap: 1.6rem; align-items: center; }
.split-media { margin: 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-m); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-copy p { max-width: 66ch; }
.prose { max-width: 76ch; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
  .split-rev .split-copy { order: 2; }
  .split-rev .split-media { order: 1; }
}
.check-list { display: grid; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.check-list li { display: flex; gap: 0.55em; align-items: flex-start; line-height: 1.55; }
.check-list svg { flex: none; margin-top: 4px; color: var(--accent-deep); }
.link-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.link-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5em 1.1em; background: var(--accent-light); color: var(--primary); font-weight: 700; font-size: 0.92rem; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.link-list a:hover { background: var(--primary); color: #fff; }

/* ---------- Compris dans la prestation ---------- */
.included-grid { display: grid; gap: 1.05rem; grid-template-columns: 1fr; margin: 1.6rem 0 0; padding: 0; list-style: none; }
@media (min-width: 680px) { .included-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .included-grid { grid-template-columns: repeat(4, 1fr); } }
.included-item { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.2rem 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); border-top: 3px solid var(--accent); }
.included-item svg { flex: none; color: var(--accent-deep); margin-top: 0.15rem; }
.included-item strong { display: block; font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.included-item span { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

/* ---------- Galerie, bande de photos ---------- */
.gallery-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.gallery-item { margin: 0; border-radius: var(--radius-m); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-s); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-item figcaption { padding: 0.65rem 0.85rem; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.photo-strip { display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .photo-strip { grid-template-columns: repeat(4, 1fr); } }
.strip-item { display: block; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s); }
.strip-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.3s ease; }
.strip-item:hover img { transform: scale(1.04); }
.strip-more { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; }
.strip-social { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.strip-social:hover { text-decoration: underline; }

/* ---------- Page éditoriale ---------- */
.article-toc { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 1.4rem 1.6rem; }
.article-toc h2 { font-size: 1.05rem; margin-bottom: 0.7em; }
.article-toc ol { columns: 1; margin: 0; padding-left: 1.2rem; list-style: decimal; }
@media (min-width: 760px) { .article-toc ol { columns: 2; column-gap: 2.5rem; } }
.article-toc a { color: var(--accent-deep); font-weight: 600; }
.article-body p { max-width: 72ch; }

/* ---------- Reveal / a11y ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .js-reveal .reveal.is-visible { opacity: 1; transform: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--primary); color: #fff; padding: 0.8em 1.2em; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ---------- Cibles tactiles (< 900 px) ---------- */
@media (max-width: 900px) {
  .site-footer ul a, .link-list a, .card-link, .step-link, .review-more, .strip-more a, .footer-credit a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer ul li { margin: 0; }
  .qw-check { display: flex; align-items: center; gap: 0.65em; min-height: 44px; }
  .qw-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
  .reviews-google a, .cta-channel a, .breadcrumb a, .review-source a, .hero-call a, .article-toc a, .contact-block ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .cta-channel > div { display: flex; flex-direction: column; }
}

/* ---------- Resserrage mobile du fold ---------- */
@media (max-width: 720px) {
  .hero { padding-top: 2.1rem; padding-bottom: 2.4rem; }
  .hero-copy::before { margin-bottom: 0.85rem; }
  .hero-chip { margin-bottom: 0.9rem; font-size: 0.8rem; }
  .hero-sub { font-size: 1.04rem; margin-bottom: 1.1rem; }
  .trust-strip { font-size: 0.78rem; padding-bottom: 1.1rem; }
  .trust-strip > .container { padding-top: 0.9rem; }
}

/* ---------- Pastille de modifications (preview) : on décale les éléments qu'elle recouvrirait ---------- */
body:has(.changes-note) .page-hero .breadcrumb { padding-left: 11.5rem; }
@media (max-width: 640px) {
  body:has(.changes-note) .page-hero .breadcrumb { padding-left: 3.4rem; }
  body:has(.changes-note) .hero-copy::before { margin-left: 3.2rem; }
}

/* ------------------------------------------------ typographie identitaire (Lucie, 2026-09-21 :
   « ils avaient un super font bien alsacien, je pense qu'on devrait le garder »)
   Le lettrage gothique du cartouche, des camions et des affiches Instagram sort du logo et prend les
   titres : UnifrakturCook (Fraktur, Google Fonts) est la webfont la plus proche de leur lettrage (mêmes
   G, M, F, même graisse). Seulement H1 et H2 — courts, grands — plus le titre du service héros ; les
   sous-titres, les chiffres, les boutons et les libellés restent en Sora, le texte en Figtree : une Fraktur
   ne se lit pas en petit ni en chiffres. Pas d'interlettrage négatif sur une gothique. */
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.4rem, 5.8vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.65rem); line-height: 1.15; text-wrap: balance; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.5rem); line-height: 1.02; letter-spacing: 0; }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
.service-hero h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: 0.005em; }
.cta-final h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
/* Les titres de service courant (mentions légales, sommaire, contact-block) restent en Sora : trop
   nombreux et trop petits pour une gothique. */
.legal-block h2, .article-toc h2, .contact-block h3, .other-services-title, .local-group h3 { font-family: var(--font-head); }
.legal-block h2 { font-size: 1.3rem; letter-spacing: -0.01em; }
.contact-grid > div > h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }

/* ------------------------------------------------ Bloc Instagram (Lucie, 2026-09-21 : « tu peux faire un bloc pour
   montrer leur insta ? ») — maquette.md § Home 7 quater ; contrat dans tools/composants.css § Bloc Instagram.
   Fond crème alterné, tuiles carrées à coins du site, triangle sur les reels, glyphe Instagram au survol. */
.insta-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.insta-head h2 { margin-bottom: 0.35em; }
.insta-lead { margin: 0; color: var(--muted); max-width: 52ch; }
.insta-follow { flex: none; display: inline-flex; align-items: center; gap: 0.5em; }
.insta-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 760px) { .insta-grid { grid-template-columns: repeat(6, 1fr); gap: 0.9rem; } }
.insta-item a { position: relative; display: block; border-radius: var(--radius-m); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-s); }
.insta-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.3s ease, opacity 0.3s ease; }
.insta-item a:hover img, .insta-item a:focus-visible img { transform: scale(1.05); opacity: 0.8; }
.insta-reel { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(26, 24, 21, 0.6); color: #fff; display: grid; place-items: center; }
.insta-hover { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity 0.3s ease; }
.insta-item a:hover .insta-hover, .insta-item a:focus-visible .insta-hover { opacity: 1; }
@media (max-width: 899px) { .insta-follow { width: 100%; justify-content: center; } }

/* === HERO CINÉMA — début (contrat tools/composants.css § Hero cinéma, 2026-09-25) === */
/* ---------------------------------------------------------------- Hero cinéma (B)
   Le gabarit du hero de l'accueil depuis le 2026-09-22 (décision Lucie : « B, sur tous ceux
   d'hier », choisi sur trois rendus comparés — actuel / A édito clair / B cinéma). La photo
   à eux en plein cadre derrière le texte, UN seul voile sombre aux couleurs de la charte,
   la marque en enseigne au-dessus du H1 (la chip du générateur, la ligne « ville · métier
   depuis année » en ::after), le H1 plus grand et plus serré (trois lignes au plus à 1440),
   le sous-titre atténué et court, le devis en une barre (trois champs + bouton dans une
   pilule). Sur mobile la photo devient un bandeau au-dessus du texte et le devis reste en
   carte. Ni halo, ni carte, ni bloc décalé : le voile est le traitement de relief.

   À poser dans le style.css du site : d'abord les paramètres (le bloc .hero ci-dessous,
   valeurs de la charte), puis les règles communes telles quelles, puis les réglages du
   site (police et casse du H1, bande de preuve claire si elle était sombre…).
   Pièges connus, mesurés le 22/09 sur six sites (lecons.md § « Le hero cinéma ») :
   - la figure absolue doit se caler sur la section : `.hero-grid { position: static }`,
     sinon un enfant absolu d'une grille reste dans sa cellule ;
   - sous la colonne de texte le voile doit rester ≥ 94 %, sinon un ciel blanc de la photo
     fait passer le texte atténué sous 4,5:1 ;
   - le champ de la barre fait 68 px mais l'input dedans doit faire 44 px (cible tactile) ;
   - un titre long ne tient pas dans 12,5ch : borner par la colonne (20ch ou none) ;
   - vérifier le contraste sur les pixels du texte (capture avec / sans texte), pas sur la
     boîte entière. */
.hero {
  --hero-veil: #100f0d;   /* la couleur du voile, sombre */
  --hero-on: #fff;                                      /* titre, marque, liens */
  --hero-on-soft: #e3dccf;                              /* sous-titre, ligne d'enseigne, promesse */
  --hero-accent: var(--accent);               /* le mot en accent du H1, lisible sur le voile */
  --hero-title-font: var(--font-head, inherit);         /* enseigne et H1 */
  --hero-line: "Plounévez-Quintin · Côtes-d'Armor (22)";           /* la ligne sous la marque (texte, entre guillemets) */
  --hero-img-pos: 72% 40%;                              /* le sujet de la photo à droite, le texte à gauche */
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--hero-veil); color: var(--hero-on-soft); padding: 0 0 2.6rem;
}
.hero::before, .hero::after, .hero-copy::before, .hero-stage::before, .hero-stage-inner::after, .hero-chip::before { display: none; content: none; }
.hero .container, .hero-grid { position: static; }
.hero-copy, .hero-quote { position: relative; z-index: 1; }
/* la photo : bandeau en haut sur mobile, plein cadre derrière le texte à partir de 900 px */
.hero-stage { order: -1; position: relative; z-index: 0; margin: 0 calc(-1 * var(--gutter, 22px)) 0; padding: 0; grid-column: auto; grid-row: auto; align-self: auto; }
.hero-stage-inner { position: relative; z-index: 0; display: block; aspect-ratio: 16 / 10; border-radius: 0; border: 0; box-shadow: none; background: none; overflow: hidden; }
.hero-stage-inner img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-img-pos); position: static; z-index: auto; }
.hero-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, var(--hero-veil) 100%); }
/* l'enseigne : la marque (chip du générateur) en grand, le fait daté dessous */
.hero-chip { display: block; margin: 0 0 1.15rem; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-family: var(--hero-title-font); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: .05em; text-transform: uppercase; line-height: 1; color: var(--hero-on); }
.hero-chip svg { display: none; }
.hero-chip::after { content: var(--hero-line); display: block; margin-top: .6rem; font-family: var(--hero-title-font); font-weight: 500; font-size: .76rem; letter-spacing: .17em; text-transform: uppercase; line-height: 1.45; color: var(--hero-on-soft); }
/* le titre : plus grand, plus serré, trois lignes au plus ; le sous-titre plus léger et plus court */
.hero h1 { font-family: var(--hero-title-font); font-size: clamp(2.3rem, 3.9vw, 3.55rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.04; max-width: 20ch; margin: 0 0 1.15rem; color: var(--hero-on); text-transform: none; }
.hero h1 .accent { color: var(--hero-accent); background: none; padding: 0; border-radius: 0; white-space: normal; }
.hero-sub { font-size: 1.08rem; line-height: 1.65; max-width: 42ch; margin: 0; color: var(--hero-on-soft); }
.hero-call { margin-top: 1rem; font-size: .92rem; text-align: left; color: var(--hero-on-soft); }
.hero-call a { color: var(--hero-on); }
.hero-call-note { color: var(--hero-on-soft); }
@media (max-width: 899px) { .hero-call a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (min-width: 900px) {
  .hero { padding: 5.2rem 0 3.2rem; }
  .hero-stage { position: absolute; inset: 0; margin: 0; }
  .hero-stage-inner { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-stage::after { background: linear-gradient(90deg, color-mix(in srgb, var(--hero-veil) 97%, transparent) 0%, color-mix(in srgb, var(--hero-veil) 94%, transparent) 40%, color-mix(in srgb, var(--hero-veil) 55%, transparent) 62%, color-mix(in srgb, var(--hero-veil) 16%, transparent) 82%, color-mix(in srgb, var(--hero-veil) 5%, transparent) 100%); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 3rem; column-gap: 0; align-items: start; }
  .hero-copy { grid-column: 1; grid-row: 1; order: 0; }
  .hero-quote { grid-column: 1 / -1; grid-row: 2; order: 0; margin: 0; width: 100%; max-width: 100%; }
  .hero-call-cta { display: none; }
  /* le devis en une barre : trois champs et le bouton dans une pilule, la case et la promesse dessous */
  .quote-widget { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr auto; grid-template-rows: 68px auto auto; gap: 0; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .quote-widget::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 68px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .55); z-index: 0; }
  .qw-title { display: none; }
  .qw-fields { display: contents; }
  .qw-field { position: relative; z-index: 1; height: 68px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 0 1.35rem 8px; margin: 0; min-width: 0; font-size: inherit; grid-column: auto; grid-row: 1; }
  .qw-field + .qw-field { border-left: 1px solid rgba(0, 0, 0, .1); }
  .qw-field > span { position: absolute; left: 1.35rem; top: 11px; margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #667); }
  .qw-field input { width: 100%; height: 44px; min-height: 44px; padding: 16px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .98rem; line-height: 1.2; color: var(--ink, #111); }
  .qw-field input:focus { border: 0; box-shadow: none; outline: none; background: none; }
  .qw-field:focus-within::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 9px; height: 2px; border-radius: 1px; background: var(--hero-veil); }
  .quote-widget .btn { position: relative; z-index: 1; grid-column: 4; grid-row: 1; align-self: center; justify-self: end; width: auto; min-width: 0; height: 56px; min-height: 56px; margin: 0 6px 0 .6rem; padding: 0 1.6rem; border-radius: 999px; white-space: nowrap; font-size: .98rem; }
  .qw-check { grid-column: 1 / -1; grid-row: 2; margin: .8rem 0 0 1.35rem; min-height: 0; font-size: .86rem; color: var(--hero-on-soft); }
  .qw-check input { accent-color: var(--hero-on); }
  .quote-widget .cta-note { grid-column: 1 / -1; grid-row: 3; margin: .25rem 0 0 1.35rem; font-size: .86rem; color: var(--hero-on-soft); }
  .hero-call { margin-top: 1rem; text-align: left; }
}

/* réglages propres au site : l'enseigne en or, un filet d'or au-dessus, le H1 Outfit */
.hero-chip { color: var(--accent); letter-spacing: .08em; }
.hero h1 { font-weight: 700; }
.hero-call a { color: var(--accent); border-bottom-color: var(--accent); }
/* === HERO CINÉMA — fin === */

/* === RAIL : toujours visible, couleur change au passage du hero === */
@media (min-width: 900px) {
  .rail-btn { transition: width .25s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease; }
  .js-rail-aware .rail:not(.is-past-hero) .rail-btn {
    background: rgba(20, 18, 16, .82);
    color: #fff;
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
}

/* Grilles selon le nombre réel d'éléments (AGOS : 2 services, 3 canaux de contact). */
@media (min-width: 1000px) { .card-grid.cols-3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cta-channels:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); } }

.mobile-bar:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr 1.4fr; }

/* === Maillage villes : six cartes (une par service), les onze villes en liste à deux colonnes === */
#villes .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
#villes .eyebrow, #villes h2 { grid-column: 1 / -1; margin-bottom: 0; }
#villes h2 { margin-bottom: .9rem; }
@media (min-width: 700px) { #villes .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { #villes .container { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#villes .local-group { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-m); padding: 1.35rem 1.4rem 1.1rem; }
#villes .local-group h3 { font-size: 1.12rem; margin: 0 0 .7rem; color: var(--ink); }
#villes .local-group .zone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
#villes .local-group .zone-list li { border-top: 1px solid var(--border); }
#villes .local-group .zone-list li:nth-child(-n+2) { border-top: 0; }
#villes .local-group .zone-chip { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 40px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: .9rem; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#villes .local-group .zone-chip::after { content: "›"; color: var(--accent-deep); font-weight: 700; flex: none; }
#villes .local-group .zone-chip:hover { color: var(--accent-deep); }
@media (max-width: 899px) { #villes .local-group .zone-chip { min-height: 44px; } }
/* Mobile : les six cartes défilent à l'horizontale (une carte et le bord de la suivante), le titre reste en place. */
@media (max-width: 699px) {
  #villes .container { grid-template-columns: repeat(6, 84%); column-gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 22px; padding-bottom: .6rem; overscroll-behavior-x: contain; }
  #villes .eyebrow, #villes h2 { position: sticky; left: 0; width: calc(100vw - 44px); }
  #villes .local-group { scroll-snap-align: start; }
  #villes .local-group .zone-list { grid-template-columns: minmax(0, 1fr); }
  #villes .local-group .zone-list li:nth-child(2) { border-top: 1px solid var(--border); }
}

/* ---------- Articles (conseils) : lecture longue, chiffres, tableaux ---------- */
.article-meta { font-size: 0.86rem; color: #cdc2ad; margin: 0.9rem 0 0; }
.article-body { max-width: 78ch; margin-inline: auto; }
.article-body > h2 { margin-top: 0; }
.article-body h3 { margin-top: 1.6em; }
.article-body p, .article-body li { max-width: none; }
.article-body a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--primary); }
.article-body code { font-size: 0.92em; background: var(--accent-light); padding: 0.1em 0.35em; border-radius: 4px; }
.article-bullets, .article-steps { margin: 0 0 1.2em; padding-left: 1.3rem; }
.article-bullets { list-style: disc; }
.article-steps { list-style: decimal; }
.article-bullets li, .article-steps li { margin-bottom: 0.55em; padding-left: 0.2em; }
.article-bullets li::marker { color: var(--accent-deep); }
.article-summary { background: var(--accent-light); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; }
.article-summary h2 { font-size: 1.05rem; margin-bottom: 0.4em; }
.article-summary p { margin: 0; }
.key-figures { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin: 0 0 1.8rem; }
@media (min-width: 640px) { .key-figures { grid-template-columns: 1fr 1fr; } }
.key-figure { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-m); padding: 1rem 1.15rem; box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 0.25rem; }
.key-figure strong { font-family: var(--font-head); font-size: 1.7rem; line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; }
.key-figure span { font-weight: 600; color: var(--text); line-height: 1.4; }
.key-figure small { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-m); background: #fff; }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 320px; }
.article-table th, .article-table td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.article-table th { background: var(--bg-alt); color: var(--ink); font-weight: 700; font-size: 0.85rem; }
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table td:not(:first-child), .article-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.article-toc { margin-top: 1.8rem; }
.article-sources li { font-size: 0.95rem; }
.article-card { display: flex; flex-direction: column; gap: 0.35rem; }
.article-card h2, .article-card h3 { font-size: 1.25rem; margin: 0; }
.article-card h2 a, .article-card h3 a { text-decoration: none; color: var(--ink); }
.article-card h2 a:hover, .article-card h3 a:hover { text-decoration: underline; }
.article-card p { color: var(--muted); margin: 0; }
.article-card .article-card-meta { font-size: 0.85rem; }

/* Lien de fin de réponse FAQ (MVZ-1721) */
.faq-a .faq-link { margin-top: 0.4em; }
.faq-a .faq-link a { font-weight: 600; text-decoration: none; }
.faq-a .faq-link a:hover { text-decoration: underline; }

/* Grille comparative des formules (MVZ-1721) */
.compare-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.95rem; }
.compare th, .compare td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.compare thead th { background: var(--primary); color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; }
.compare thead th:first-child { background: var(--primary); }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); width: 36%; }
.compare tbody tr:nth-child(even) { background: var(--bg-alt); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td.yes svg { color: var(--success); vertical-align: middle; }
.compare td.no { color: var(--muted); }
.compare td.txt { color: var(--text); font-size: 0.88rem; }
.compare-note { margin-top: 0.9rem; color: var(--muted); font-size: 0.9rem; }