/* LocalDevis : mise en page inspirée du modèle Upodes (barre flottante, héros sombre géant,
   cartes inclinées, services numérotés, cartes de chiffres, FAQ numérotée), couleurs chantier. */
:root {
  --noir: #0E0E0E;
  --noir-2: #181816;
  --noir-3: #2A2925;
  --beton: #ECE9E3;
  --beton-2: #F4F2EE;
  --blanc: #FFFFFF;
  --jaune: #F5C400;
  --jaune-2: #FFD84A;
  --gris: #6B675F;
  --gris-clair: #A39E94;
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --max: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--beton-2); color: var(--noir); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.section { padding-block: clamp(80px, 10vw, 140px); }
.dark { background: var(--noir); color: var(--blanc); }

/* Étiquette « • Nos métiers » */
.label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); }

.h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.muted { color: var(--gris-clair); }
.dark .muted { color: #77736B; }

/* Boutons pilule avec rond fléché à gauche */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 6px 22px 6px 6px; border-radius: 100px; font-weight: 600; font-size: 16px; border: 0; cursor: pointer; transition: transform .2s ease, background .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .25s ease; }
.btn:hover .ico { transform: rotate(45deg); }
.btn svg { width: 16px; height: 16px; }
.btn-jaune { background: var(--jaune); color: var(--noir); }
.btn-jaune .ico { background: var(--blanc); color: var(--noir); }
.btn-jaune:hover { background: var(--jaune-2); }
.btn-blanc { background: var(--blanc); color: var(--noir); }
.btn-blanc .ico { background: var(--noir); color: var(--blanc); }
.btn-noir { background: var(--noir); color: var(--blanc); }
.btn-noir .ico { background: var(--jaune); color: var(--noir); }

/* ---------- Barre de navigation flottante ---------- */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.nav { pointer-events: auto; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 12px 12px 20px; border-radius: var(--r-lg); background: rgba(14, 14, 14, .62); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--blanc); transition: background .3s ease; }
.nav.scrolled { background: rgba(14, 14, 14, .92); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.logo svg { width: 34px; height: 34px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 30px; font-weight: 500; font-size: 15px; }
.nav-links a { opacity: .9; transition: color .2s; }
.nav-links a:hover { color: var(--jaune); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav .btn { font-size: 15px; }
.nav-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 100px; transition: color .2s; white-space: nowrap; }
.nav-tel svg { width: 17px; height: 17px; color: var(--jaune); }
.nav-tel:hover { color: var(--jaune); }
.nav .btn .ico { width: 32px; height: 32px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--blanc); color: var(--noir); cursor: pointer; place-items: center; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-panel { pointer-events: auto; max-width: var(--max); margin: 8px auto 0; background: var(--noir); color: var(--blanc); border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .08); padding: 18px 20px; display: grid; gap: 4px; }
.menu-panel a { padding: 12px 0; font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--noir-3); }
.menu-panel a:last-child { border-bottom: 0; }

/* ---------- Héros (compact : photo de Gironde, texte à gauche, formulaire à droite) ---------- */
.hero { position: relative; overflow: hidden; background: var(--noir); color: var(--blanc); padding-top: 116px; padding-bottom: 48px; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 14, .94) 0%, rgba(14, 14, 14, .74) 42%, rgba(14, 14, 14, .4) 72%, rgba(14, 14, 14, .35) 100%), linear-gradient(0deg, rgba(14, 14, 14, .6) 0%, transparent 30%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.hero-left { display: grid; gap: 24px; align-content: center; min-width: 0; }
.hero-kicker { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 14px; color: rgba(255, 255, 255, .85); }
.hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); flex: none; margin-top: 6px; }
.hero-h1 { display: inline-flex; align-items: flex-start; gap: 10px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.hero-h1 i { width: 9px; height: 9px; border-radius: 50%; background: var(--jaune); flex: none; margin-top: .45em; }
.h1-big { font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 600; line-height: .92; letter-spacing: -0.055em; }
.h1-big em { font-style: normal; color: var(--jaune); }
.h1-seo { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; color: var(--blanc); line-height: 1.3; }
.hero-lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: rgba(255, 255, 255, .78); max-width: 46ch; line-height: 1.5; }
.hero-lead b { color: var(--blanc); font-weight: 600; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-points li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 600; font-size: 14px; }
.hero-points svg { width: 18px; height: 18px; flex: none; }
.hero-tel { display: inline-flex; align-items: center; gap: 14px; width: fit-content; padding: 8px 20px 8px 8px; border-radius: 100px; background: rgba(14, 14, 14, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s; }
.hero-tel:hover { border-color: var(--jaune); }
.hero-tel-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--jaune); color: var(--noir); display: grid; place-items: center; flex: none; }
.hero-tel-ico svg { width: 20px; height: 20px; }
.hero-tel small { display: block; font-size: 12px; color: rgba(255, 255, 255, .65); font-weight: 500; }
.hero-tel b { font-size: 20px; letter-spacing: -0.01em; }
.hero-tel-h { font-size: 12.5px; color: rgba(255, 255, 255, .6); padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .18); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Carte formulaire */
.form-card { background: var(--blanc); color: var(--noir); border-radius: var(--r-xl); padding: 24px; display: grid; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); scroll-margin-top: 110px; }
.form-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; }
.choix legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.choix label { position: relative; display: grid; gap: 2px; padding: 11px 14px; border-radius: var(--r-md); border: 1.5px solid #E2DED6; cursor: pointer; font-weight: 600; font-size: 15px; transition: border-color .2s, background .2s; }
.choix label small { font-weight: 400; font-size: 12px; color: var(--gris); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:has(input:checked) { border-color: var(--noir); background: #FFF6D1; }
.choix label:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 2px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.champ { display: grid; gap: 5px; min-width: 0; }
.champ.full { grid-column: 1 / -1; }
.champ label { font-size: 13px; font-weight: 600; }
.champ input, .champ select { width: 100%; font: 500 15px var(--font); color: var(--noir); background: var(--beton-2); border: 1.5px solid transparent; border-radius: 12px; padding: 11px 13px; }
.champ input:focus, .champ select:focus { border-color: var(--noir); outline: none; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 11.5px; line-height: 1.45; color: var(--gris); }
.consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--noir); }
.consent a { text-decoration: underline; }
.form-card .btn { width: 100%; justify-content: flex-start; }
.form-card .micro { text-align: center; font-size: 12px; font-weight: 600; color: var(--gris); letter-spacing: .02em; margin-top: -4px; }
.form-msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; background: #FFF6D1; border: 1.5px solid var(--jaune); }

/* Mention sur les photos d'illustration */
figure { margin: 0; }
.ia { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .92); background: rgba(14, 14, 14, .55); padding: 4px 10px; border-radius: 100px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- Bande des secteurs (cartes inclinées qui défilent) ---------- */
.secteurs { padding-block: 64px 96px; overflow: hidden; }
.secteurs .label { display: flex; justify-content: center; }
.marquee { margin-top: 40px; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 34px; padding: 44px 17px; animation: defile 48s linear infinite; flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-100%); } }
.ville { flex: none; width: 230px; height: 270px; background: var(--blanc); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; box-shadow: 0 12px 40px rgba(14, 14, 14, .06); }
.ville:nth-child(4n+1) { transform: rotate(-11deg) translateY(20px); }
.ville:nth-child(4n+2) { transform: rotate(-3deg); }
.ville:nth-child(4n+3) { transform: rotate(6deg) translateY(8px); }
.ville:nth-child(4n+4) { transform: rotate(13deg) translateY(28px); }
.ville b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.ville span { display: block; color: var(--gris); font-size: 14px; margin-top: 4px; }
.ville .dep { font-size: 64px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.ville .dep i { font-style: normal; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--jaune); margin-left: 4px; }
.manifeste { max-width: 860px; margin: 44px auto 0; text-align: center; font-size: clamp(1.4rem, 2.6vw, 2.15rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.manifeste span { color: #ACA79D; }
.center-cta { display: flex; justify-content: center; margin-top: 34px; }

/* ---------- Métiers (cartes inclinées du modèle + liste cliquable) ---------- */
.metiers { position: relative; overflow: hidden; }
.metiers::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(245, 196, 0, .10), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(245, 196, 0, .06), transparent 70%); pointer-events: none; }
.head-row { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; margin-bottom: 60px; position: relative; }
.head-row .h2 { max-width: 15ch; }
.svc-list { display: grid; gap: 30px; position: relative; }
.svc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; padding: 18px; border-radius: var(--r-xl); background: var(--noir-2); border: 1px solid var(--noir-3); transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.svc:nth-child(1) { transform: rotate(-1.4deg); }
.svc:nth-child(2) { transform: rotate(1.2deg); }
.svc:hover { transform: rotate(0); border-color: rgba(245, 196, 0, .4); }
.svc-body { padding: 16px 12px 12px 14px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--noir-3); }
.svc-top h3 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.svc-go { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--noir-3); color: var(--blanc); transition: background .25s, color .25s, transform .25s; }
.svc-go svg { width: 28px; height: 28px; }
.svc:hover .svc-go { background: var(--jaune); color: var(--noir); transform: rotate(-45deg); }
.svc-body > p { color: #B9B4AA; max-width: 54ch; }
.metier-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.metier-list a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-weight: 500; font-size: 15px; color: #E6E1D7; border-bottom: 1px solid var(--noir-3); transition: color .2s; }
.metier-list a:hover { color: var(--jaune); }
.metier-list svg { width: 18px; height: 18px; flex: none; }
.svc-body .btn { align-self: flex-start; margin-top: auto; }
.svc-img { border-radius: var(--r-lg); overflow: hidden; min-height: 340px; position: relative; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .8s ease; }
.svc:hover .svc-img img { transform: scale(1.04); }
.metier-tag { position: absolute; left: 16px; top: 16px; z-index: 2; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--noir); background: var(--jaune); padding: 6px 12px; border-radius: 100px; }

/* ---------- Pourquoi LocalDevis ---------- */
.head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.head-split > div { display: grid; gap: 18px; }
.head-split .h2 { max-width: 16ch; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.why-grid > * { min-width: 0; }
.why-img { border-radius: var(--r-xl); overflow: hidden; min-height: 520px; position: relative; }
.why-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-img .badge { position: absolute; left: 16px; bottom: 16px; background: rgba(14, 14, 14, .72); color: var(--blanc); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.why-right { display: grid; gap: 20px; align-content: start; }
.why-text { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.why-text span { color: #ACA79D; }
.why-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 14px; border-top: 1px solid #DEDAD2; border-bottom: 1px solid #DEDAD2; }
.why-row p { font-weight: 600; line-height: 1.3; }
.badges { display: flex; }
.badges span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 3px solid var(--beton-2); margin-left: -10px; background: var(--beton); }
.badges span:first-child { margin-left: 0; background: var(--jaune); }
.badges span:last-child { background: var(--noir); color: var(--blanc); }
.stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card { background: var(--blanc); border-radius: var(--r-xl); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 300px; }
.stat-card .big { font-size: 64px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.stat-card .cap { color: var(--gris); font-size: 15px; margin-top: 8px; }
.verif { border: 1px solid #E6E2DA; border-radius: var(--r-md); padding: 14px; display: grid; gap: 8px; font-weight: 600; font-size: 14px; }
.verif li { display: flex; align-items: center; gap: 10px; }
.verif svg { width: 18px; height: 18px; flex: none; }
.fact-card { position: relative; border-radius: var(--r-xl); overflow: hidden; color: var(--blanc); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; isolation: isolate; }
.fact-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fact-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 14, .35) 0%, rgba(14, 14, 14, .15) 40%, rgba(14, 14, 14, .85) 100%); }
.fact-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .3s; }
.dots i.on { background: var(--blanc); }
.fact-big { font-size: 60px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.fact-cap { font-size: 14px; margin-top: 6px; color: rgba(255, 255, 255, .85); }
.fact-txt { transition: opacity .35s ease; }
.transparence { margin-top: 20px; display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-radius: var(--r-lg); border: 1px solid #DEDAD2; font-size: 14px; color: var(--gris); }
.transparence strong { color: var(--noir); flex: none; padding: 5px 12px; border-radius: 100px; background: var(--jaune); font-size: 12px; }

/* ---------- Étapes : cartes qui s'empilent au défilement (comme les services du modèle) ---------- */
.etapes { position: relative; overflow: clip; }
.etapes::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 40% at 0% 30%, rgba(245, 196, 0, .08), transparent 70%); pointer-events: none; }
.etapes .container { position: relative; }
.etapes-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lien-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; }
.lien-tel svg { width: 18px; height: 18px; color: var(--jaune); }
.lien-tel:hover { color: var(--jaune); }
.stack { display: grid; gap: 40px; padding-bottom: 40px; }
.stack-card { --p: 0; --e: 0; position: sticky; top: calc(118px + var(--i) * 26px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px; min-height: 420px; border-radius: var(--r-xl); background: #1A1917; border: 1px solid var(--noir-3); box-shadow: 0 -20px 60px rgba(0, 0, 0, .45); transform-origin: 50% 0; transform: translateY(calc(var(--e) * 40px)) rotate(calc(var(--e) * 3deg - var(--p) * 2.5deg)) scale(calc(1 - var(--p) * .08)); filter: brightness(calc(1 - var(--p) * .5)); will-change: transform; }
.stack-card:nth-child(2) { background: #1E1D1A; }
.stack-card:nth-child(3) { background: #22211D; }
.stack-body { padding: 18px 12px 12px 16px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.stack-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--noir-3); }
.stack-num { font-weight: 700; font-size: 15px; color: var(--noir); background: var(--jaune); padding: 6px 14px; border-radius: 100px; }
.stack-time { font-size: 13px; font-weight: 600; color: var(--jaune); letter-spacing: .04em; text-transform: uppercase; }
.stack-body h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.stack-body > p { color: #B9B4AA; font-size: 16.5px; max-width: 48ch; }
.stack-points { display: grid; gap: 10px; margin-top: auto; }
.stack-points li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #E6E1D7; }
.stack-points svg { width: 18px; height: 18px; flex: none; }
.stack-img { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 300px; }
.stack-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- En Gironde (contenu local) ---------- */
.local-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.local-card { background: var(--blanc); border-radius: var(--r-xl); padding: 26px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.local-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #E6E2DA; }
.local-head .num { font-weight: 600; font-size: 14px; }
.local-head h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.local-items { display: grid; gap: 18px; }
.local-items h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.local-items p { color: var(--gris); font-size: 15px; max-width: 62ch; }

/* ---------- FAQ ---------- */
.faq { position: relative; overflow: hidden; }
.faq::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, .035) 65%, transparent 75%); pointer-events: none; }
.faq-head { text-align: center; display: grid; gap: 16px; justify-items: center; margin-bottom: 40px; position: relative; }
.faq-list { position: relative; }
.faq-item { border-bottom: 1px solid var(--noir-3); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 40px; gap: 16px; align-items: center; padding: 28px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .n { font-weight: 600; font-size: 14px; color: #CFCAC0; }
.faq-item .q { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: #9A958B; transition: color .2s; }
.faq-item[open] .q, .faq-item summary:hover .q { color: var(--blanc); }
.faq-item .plus { justify-self: end; width: 30px; height: 30px; position: relative; }
.faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--blanc); transform: translate(-50%, -50%); transition: transform .3s; }
.faq-item .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq-item .a { padding-bottom: 28px; padding-right: 56px; }
.faq-item .a p { color: #B9B4AA; max-width: 70ch; }
.faq-list { max-width: 980px; margin: 0 auto; }

/* ---------- Guides ---------- */
.guide-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--blanc); border-radius: var(--r-xl); padding: 16px; }
.guide-feat > * { min-width: 0; }
.gf-body { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 16px 8px 0 8px; }
.cat { display: inline-block; padding: 8px 16px; border-radius: 100px; background: var(--beton-2); font-weight: 600; font-size: 13px; width: fit-content; }
.gf-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; margin-top: 18px; max-width: 22ch; }
.gf-body p { color: var(--gris); margin-top: 14px; max-width: 46ch; }
.g-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #E6E2DA; border-radius: var(--r-md); padding: 10px 10px 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.g-foot .date { color: var(--gris); font-weight: 600; }
.g-foot .lire { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: 0; }
.g-foot .lire i { width: 30px; height: 30px; border-radius: 50%; background: var(--noir); color: var(--blanc); display: grid; place-items: center; }
.g-foot .lire svg { width: 14px; height: 14px; }
.gf-img { border-radius: var(--r-lg); overflow: hidden; min-height: 340px; position: relative; }
.gf-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.guide-card { background: var(--blanc); border-radius: var(--r-xl); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; transition: transform .25s; }
.guide-card:hover { transform: translateY(-4px); }
.guide-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-top: 18px; }

/* ---------- Appel final ---------- */
.cta-final { position: relative; overflow: hidden; text-align: center; isolation: isolate; background: var(--beton); }
.cta-final .blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; }
.cta-final .b1 { width: 50vw; height: 50vw; left: -10%; top: -40%; background: rgba(245, 196, 0, .55); }
.cta-final .b2 { width: 40vw; height: 40vw; right: -8%; bottom: -45%; background: rgba(245, 196, 0, .4); }
.cta-final .b3 { width: 30vw; height: 30vw; left: 40%; top: 20%; background: rgba(255, 255, 255, .7); }
.cta-inner { display: grid; justify-items: center; gap: 22px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.cta-inner h2 { font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; max-width: 14ch; }
.cta-inner p { max-width: 56ch; color: #3D3A35; font-size: 17px; }

/* ---------- Pied de page ---------- */
.footer { background: var(--noir); color: var(--blanc); position: relative; overflow: hidden; padding-top: 90px; }
.footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 50%, rgba(255, 255, 255, .03) 62%, transparent 74%); pointer-events: none; }
.f-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.f-col { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.f-col h4 { font-size: 15px; font-weight: 600; }
.f-col ul { display: grid; gap: 10px; }
.f-col a, .f-col li { color: #9A958B; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; transition: color .2s; }
.f-col a:hover { color: var(--jaune); }
.f-bar { margin-top: 80px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 14px 14px 20px; border-radius: var(--r-lg); border: 1px solid var(--noir-3); position: relative; flex-wrap: wrap; }
.f-bar p { font-size: 13px; color: #B9B4AA; }
.f-bar p a { color: var(--jaune); }
.to-top { width: 46px; height: 46px; border-radius: 50%; background: var(--blanc); color: var(--noir); display: grid; place-items: center; flex: none; }
.to-top svg { width: 18px; height: 18px; }
.credits { position: relative; font-size: 11.5px; color: #6E6A62; padding-bottom: 26px; line-height: 1.6; }

/* Barre d'appel mobile */
.wa-float { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 45; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform .2s ease, box-shadow .2s ease; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 16px 38px rgba(0, 0, 0, .35); }
.wa-float svg { width: 34px; height: 34px; }
.mobile-cta { display: none; }
.mobile-cta { transition: transform .3s ease, opacity .3s ease; }
.mobile-cta.cache { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) { .nav-links { gap: 22px; } .nav .nav-tel { display: none; } }
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; }
}
@media (max-width: 960px) {
  .nav-links, .nav .btn { display: none; }
  .menu-btn { display: grid; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(14, 14, 14, .9) 0%, rgba(14, 14, 14, .8) 50%, rgba(14, 14, 14, .95) 100%); }
  .form-card { max-width: 560px; }
  .local-grid { grid-template-columns: 1fr; }
  .head-row { grid-template-columns: 1fr; gap: 18px; }
  .svc { grid-template-columns: 1fr; }
  .svc:nth-child(1), .svc:nth-child(2) { transform: none; }
  .svc-img { min-height: 240px; order: -1; }
  .stack-card { grid-template-columns: 1fr; min-height: 0; top: calc(92px + var(--i) * 16px); }
  .stack-img { min-height: 190px; order: -1; }
  .why-grid { grid-template-columns: 1fr; }
  .why-img { min-height: 340px; }
  .guide-feat { grid-template-columns: 1fr; }
  .gf-img { min-height: 240px; order: -1; }
  .guide-row { grid-template-columns: 1fr; }
  .f-cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .section { padding-block: 72px; }
  .hero { padding-top: 100px; padding-bottom: 32px; }
  .hero-left { gap: 18px; }
  .hero-points li { font-size: 13px; padding: 7px 12px 7px 8px; }
  .form-card { padding: 18px; }
  .local-card { padding: 20px; }
  .stat-cards { grid-template-columns: 1fr; }
  .stat-card, .fact-card { min-height: 240px; }
  .faq-item summary { grid-template-columns: 1fr 30px; padding: 22px 0; }
  .faq-item .a { padding-right: 0; }
  .transparence { flex-direction: column; align-items: flex-start; }

  .f-col { grid-template-columns: 1fr; gap: 10px; }
  .wa-float { display: none; }
  .hero-tel-h { display: none; }
  .svc-body { padding: 10px 6px 6px; }
  .svc-go { width: 48px; height: 48px; }
  .metier-list { grid-template-columns: 1fr; }
  .stack-body { padding: 8px 4px 6px; gap: 14px; }
  .stack-img { min-height: 160px; }
  .stack-points { gap: 6px; font-size: 14.5px; }
  .mobile-cta { display: flex; gap: 8px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(180deg, transparent, rgba(14, 14, 14, .9) 35%); }
  .mobile-cta .btn { flex: 1; justify-content: flex-start; }
  .mc-rond { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); color: var(--noir); flex: none; }
  .mc-rond svg { width: 22px; height: 22px; }
  .mc-wa { background: #25D366; color: #fff; }
  .mc-wa svg { width: 26px; height: 26px; }
  .footer { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card { transform: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Pages simples (mentions, confidentialité, partenaires, merci) ---------- */
.page-simple { background: var(--beton-2); }
.simple-head { background: var(--noir); color: var(--blanc); padding-block: 16px; }
.simple-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.simple-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.simple-main { padding-block: 64px 90px; max-width: 900px; display: grid; gap: 18px; }
.simple-h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.simple-intro { font-size: 19px; color: #3D3A35; max-width: 60ch; }
.prose { background: var(--blanc); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 40px); display: grid; gap: 14px; margin-top: 10px; min-width: 0; }
.prose h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 14px; scroll-margin-top: 20px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #3D3A35; max-width: 70ch; }
.prose ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; }
.prose a:not(.btn) { text-decoration: underline; }
.tab-wrap { overflow-x: auto; }
.tab-partenaires { border-collapse: collapse; width: 100%; font-size: 15px; }
.tab-partenaires th { text-align: left; font-size: 13px; color: var(--gris); padding: 10px 12px; border-bottom: 2px solid var(--noir); }
.tab-partenaires td { padding: 12px; border-bottom: 1px solid #E6E2DA; }
.tab-partenaires .attente { color: var(--gris); font-style: italic; }
.merci-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.merci-steps div { background: var(--beton-2); border-radius: var(--r-md); padding: 16px; }
.merci-steps p { font-size: 14.5px; margin-top: 4px; }
.simple-foot { background: var(--noir); color: #9A958B; padding-block: 26px; font-size: 13px; }
.simple-foot a { color: var(--blanc); }
@media (max-width: 760px) { .merci-steps { grid-template-columns: 1fr; } .simple-actions .nav-tel { display: none; } }

/* ======================================================================
   Pages métier, ville et blog
   ====================================================================== */
/* Fil d'Ariane */
.fil ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.fil li:not(:last-child)::after { content: "›"; margin-left: 6px; opacity: .6; }
.fil a:hover { color: var(--jaune); }
.fil li[aria-current] { color: var(--blanc); }
.art-hero .fil ol { color: var(--gris); }
.art-hero .fil li[aria-current] { color: var(--noir); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Héros des pages métier et ville */
.hero-page .hero-left { gap: 20px; }
.page-h1 { font-size: clamp(2.3rem, 4.6vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }

/* Corps de page + colonne latérale */
.page-corps { padding-block: clamp(56px, 7vw, 96px); }
.corps-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.prose-page { background: var(--blanc); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 48px); min-width: 0; font-size: 17px; line-height: 1.7; color: #2B2925; }
.prose-page > * + * { margin-top: 18px; }
.prose-page h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--noir); margin-top: 44px; scroll-margin-top: 110px; }
.prose-page h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--noir); margin-top: 30px; scroll-margin-top: 110px; }
.prose-page h2:first-child, .prose-page .toc + h2 { margin-top: 0; }
.prose-page ul, .prose-page ol { padding-left: 22px; display: grid; gap: 8px; }
.prose-page ul { list-style: disc; } .prose-page ol { list-style: decimal; }
.prose-page li::marker { color: #B38F00; font-weight: 700; }
.prose-page a:not(.btn):not(.lien-tel) { color: var(--noir); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose-page a:not(.btn):not(.lien-tel):hover { background: #FFF6D1; }
.prose-page strong { color: var(--noir); }
.fig { border-radius: var(--r-lg); overflow: hidden; margin-block: 28px !important; }
.fig img { width: 100%; height: auto; }
.retenir { background: #FFF6D1; border-left: 4px solid var(--jaune); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; }
.retenir b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.retenir p { margin: 0; }
.tab-wrap { overflow-x: auto; border: 1px solid #E6E2DA; border-radius: var(--r-md); }
.tab { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.tab th { text-align: left; background: var(--noir); color: var(--blanc); font-weight: 600; padding: 12px 14px; white-space: nowrap; }
.tab td { padding: 12px 14px; border-top: 1px solid #E6E2DA; vertical-align: top; }
.tab tr:nth-child(even) td { background: #FAF9F6; }
.cta-box { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--noir); color: var(--blanc); border-radius: var(--r-lg); padding: 24px 26px; margin-block: 32px !important; position: relative; overflow: hidden; }
.cta-box::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 196, 0, .25), transparent 70%); }
.cta-box p { color: #C9C4BA; font-size: 15px; margin: 0; }
.cta-box .cta-box-t { color: var(--blanc); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 8px 0 6px; }
.cta-box-b { display: grid; gap: 12px; justify-items: start; position: relative; }
.cta-box .lien-tel { color: var(--blanc); font-size: 15px; }
.sources { border-top: 1px solid #E6E2DA; padding-top: 22px; margin-top: 44px !important; }
.sources h2 { font-size: 1.1rem !important; margin-top: 0 !important; }
.sources ul { font-size: 14.5px; }

/* Colonne latérale */
.side { position: sticky; top: 110px; display: grid; gap: 16px; }
.side-cta { background: var(--noir); color: var(--blanc); border-radius: var(--r-xl); padding: 24px; display: grid; gap: 14px; }
.side-t { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.side-cta ul { display: grid; gap: 8px; font-size: 14.5px; color: #DAD5CB; }
.side-cta li { display: flex; align-items: center; gap: 9px; }
.side-cta li svg { width: 18px; height: 18px; flex: none; }
.side-cta .btn { justify-self: start; }
.side-cta .lien-tel { font-size: 16px; }
.toc { background: var(--blanc); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 10px; }
.toc b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.toc ol { display: grid; gap: 6px; counter-reset: s; list-style: none; padding: 0; }
.toc li { counter-increment: s; display: flex; gap: 10px; font-size: 14.5px; line-height: 1.35; font-weight: 500; }
.toc li::before { content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--beton); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.toc a:hover { color: #9A7B00; }
.prose-page > .toc { background: var(--beton-2); margin-bottom: 30px; }

/* Cartes des villes */
.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.v-card { background: var(--noir-2); border: 1px solid var(--noir-3); border-radius: var(--r-lg); overflow: hidden; display: grid; transition: transform .3s, border-color .3s; }
.v-card:hover { transform: translateY(-4px); border-color: rgba(245, 196, 0, .45); }
.v-img { aspect-ratio: 4 / 3; overflow: hidden; max-width: 100%; }
.v-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.v-card:hover .v-img img { transform: scale(1.05); }
.v-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 14px 16px; color: var(--blanc); }
.v-t { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.v-cp { grid-row: 2; font-size: 13px; color: var(--gris-clair); }
.v-body i, .a-meta i { grid-row: 1 / 3; grid-column: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--jaune); color: var(--noir); display: grid; place-items: center; }
.v-body svg, .a-meta svg { width: 14px; height: 14px; }

/* Cartes d'articles */
.a-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.a-une { margin-bottom: 16px; }
.a-card { background: var(--blanc); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; min-width: 0; }
.a-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(14, 14, 14, .08); }
.a-img { aspect-ratio: 16 / 10; overflow: hidden; display: block; max-width: 100%; }
.a-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.a-card:hover .a-img img { transform: scale(1.04); }
.a-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.a-t { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.a-d { color: var(--gris); font-size: 14.5px; }
.a-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid #E6E2DA; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--gris); }
.a-meta i { width: 30px; height: 30px; background: var(--noir); color: var(--blanc); }
.a-card-grand { display: grid; grid-template-columns: 1.15fr 1fr; }
.a-card-grand .a-img { aspect-ratio: auto; min-height: 340px; }
.a-card-grand .a-body { padding: 32px; justify-content: center; }
.a-card-grand .a-t { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; }
.a-card-grand .a-d { font-size: 16px; }
.a-card .cat { padding: 6px 12px; font-size: 12px; }
.dark .a-card { background: var(--noir-2); color: var(--blanc); }

/* Héros des articles et du blog */
.art-hero { background: var(--beton); padding-top: 128px; padding-bottom: 8px; }
.art-hero-in { display: grid; gap: 18px; justify-items: start; max-width: 980px; }
.art-h1 { font-size: clamp(2.2rem, 4.8vw, 4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.art-intro { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #3D3A35; max-width: 62ch; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 500; color: var(--gris); }
.art-meta span + span::before { content: "·"; margin-right: 18px; }
.art-img { margin: 36px 0 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21 / 9; max-width: 100%; }
.art-img img { width: 100%; height: 100%; object-fit: cover; }
.art-hero .cat { background: var(--blanc); }
.art-corps { background: var(--beton); }
.art-corps .prose-page { font-size: 18px; }
.blog-hero { padding-bottom: 20px; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.filtres button { border: 1.5px solid var(--noir); background: transparent; border-radius: 100px; padding: 9px 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
.filtres button.on { background: var(--noir); color: var(--blanc); }
.liens-404 { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 10px 60px; }

/* Section finale avec formulaire */
.cta-form { background: var(--beton); position: relative; overflow: hidden; }
.cta-form::before { content: ""; position: absolute; width: 50vw; height: 50vw; left: -15%; top: -40%; border-radius: 50%; background: rgba(245, 196, 0, .35); filter: blur(90px); }
.cta-form-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.cta-form-txt { display: grid; gap: 20px; justify-items: start; }
.cta-form-txt p { font-size: 18px; color: #3D3A35; max-width: 48ch; }
.hero-points-clair li { background: var(--blanc); border-color: #E2DED6; color: var(--noir); backdrop-filter: none; }
.lien-tel-fonce { color: var(--noir); }
.lien-tel-fonce svg { color: var(--noir); }

@media (max-width: 1100px) {
  .corps-grid { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .a-grid { grid-template-columns: 1fr 1fr; }
  .cta-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .side { grid-template-columns: 1fr; }
  .a-grid { grid-template-columns: 1fr; }
  .a-card-grand { grid-template-columns: 1fr; }
  .a-card-grand .a-img { min-height: 220px; }
  .a-card-grand .a-body { padding: 20px; }
  .cta-box { grid-template-columns: 1fr; }
  .art-img { aspect-ratio: 4 / 3; }
  .prose-page { font-size: 16.5px; }
  .art-corps .prose-page { font-size: 17px; }
  .art-hero { padding-top: 104px; }
  .art-hero .fil li[aria-current] { max-width: 24ch; }
}

/* Barre de navigation plus foncée sur les pages à fond clair */
body:has(.art-hero) .nav { background: rgba(14, 14, 14, .92); }

/* ======================================================================
   Pages service et ville : sections de page de vente
   ====================================================================== */
.ld-trust { background: var(--noir); color: var(--blanc); border-top: 1px solid var(--noir-3); }
.ld-trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 22px; }
.ld-trust-in div { display: flex; gap: 12px; align-items: flex-start; }
.ld-trust-in svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ld-trust-in b { display: block; font-size: 16px; }
.ld-trust-in span { font-size: 13.5px; color: #B9B4AA; line-height: 1.4; }

.ld-band { padding-block: clamp(64px, 8vw, 110px); }
.ld-clair { background: var(--beton-2); }
.ld-blanc { background: var(--blanc); }
.ld-sombre { background: var(--noir); color: var(--blanc); position: relative; overflow: hidden; }
.ld-sombre::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 100% 0%, rgba(245, 196, 0, .09), transparent 70%); pointer-events: none; }
.ld-sombre .container { position: relative; }
.ld-head { display: grid; gap: 16px; justify-items: start; max-width: 860px; margin-bottom: 40px; }
.ld-head .h2, .ld-cols-t .h2, .ld-split-txt .h2, .ld-prix-txt .h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); scroll-margin-top: 110px; }

/* Typographie des textes dans les sections */
.ld-prose { font-size: 17px; line-height: 1.7; color: #3D3A35; min-width: 0; }
.ld-prose > * + * { margin-top: 16px; }
.ld-prose h3 { font-size: 1.2rem; font-weight: 600; color: var(--noir); margin-top: 26px; }
.ld-prose ul, .ld-prose ol { padding-left: 22px; display: grid; gap: 8px; }
.ld-prose ul { list-style: disc; } .ld-prose ol { list-style: decimal; }
.ld-prose li::marker { color: #B38F00; font-weight: 700; }
.ld-prose a:not(.btn) { color: var(--noir); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ld-prose strong { color: var(--noir); }
.ld-prose .retenir { margin-top: 22px; }
.ld-intro { font-size: 18px; max-width: 70ch; }
.ld-intro-grande { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.55; color: var(--noir); max-width: 62ch; margin: 0 auto; text-align: center; font-weight: 500; letter-spacing: -0.01em; }
.ld-intro-grande a { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; }
.ld-chapo { padding-block: clamp(56px, 6vw, 80px); }
.ld-sombre .ld-prose, .ld-prose-sombre { color: #C9C4BA; }
.ld-sombre .ld-prose strong, .ld-sombre .ld-prose a:not(.btn) { color: var(--blanc); }
.ld-apres { margin-top: 32px; max-width: 80ch; }
.ld-apres:has(.fig) { max-width: none; }
.ld-apres .fig { aspect-ratio: 21 / 8; max-width: 100%; }
.ld-apres .fig img { height: 100%; object-fit: cover; }

/* Cartes de prestations */
.ld-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ld-services:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.ld-service { background: var(--blanc); border: 1px solid #E6E2DA; border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ld-blanc .ld-service { background: var(--beton-2); border-color: transparent; }
.ld-service:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(14, 14, 14, .08); border-color: var(--jaune); }
.ld-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--jaune); color: var(--noir); display: grid; place-items: center; flex: none; }
.ld-ico svg { width: 28px; height: 28px; }
.ld-service h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.ld-service .ld-prose { font-size: 15.5px; line-height: 1.6; }
.ld-lien { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ld-lien svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--jaune); transition: transform .25s; }
.ld-service:hover .ld-lien svg { transform: rotate(45deg); }

/* Cartes issues des listes */
.ld-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ld-card { background: var(--blanc); border-radius: var(--r-lg); padding: 22px; border-top: 4px solid var(--jaune); display: grid; gap: 8px; align-content: start; }
.ld-blanc .ld-card { background: var(--beton-2); }
.ld-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.ld-card h3 a { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ld-card p { font-size: 15px; line-height: 1.6; color: #3D3A35; }
.ld-card p a { text-decoration: underline; text-decoration-color: var(--jaune); }

/* Prix */
.ld-prix { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.ld-prix-txt { display: grid; gap: 18px; justify-items: start; }
.ld-prix-tab { background: var(--blanc); color: var(--noir); border-radius: var(--r-xl); padding: 10px; min-width: 0; }
.ld-prix-tab .tab-wrap { border: 0; }
.ld-prix-tab .tab th { background: var(--jaune); color: var(--noir); }
.ld-prix-tab .tab td:last-child { font-weight: 600; white-space: nowrap; }
.ld-prix-note { font-size: 13px; color: var(--gris); padding: 10px 12px 6px; }

/* Étapes */
.ld-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ld-etape { background: #1A1917; border: 1px solid var(--noir-3); border-radius: var(--r-xl); padding: 24px; display: grid; gap: 14px; align-content: start; }
.ld-etape .stack-num { justify-self: start; }
.ld-etape p { color: #C9C4BA; font-size: 15.5px; line-height: 1.6; }
.ld-etape strong { color: var(--blanc); display: block; font-size: 19px; letter-spacing: -0.015em; margin-bottom: 4px; }
.ld-etape a { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--jaune); }

/* Texte + photo, titre + texte */
.ld-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.ld-split.ld-inverse .ld-split-img { order: -1; }
.ld-split-txt { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.ld-split-img { position: sticky; top: 110px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.ld-split-img img { width: 100%; height: 100%; object-fit: cover; }
.ld-cols { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.ld-cols-t { display: grid; gap: 16px; justify-items: start; position: sticky; top: 110px; }

/* Bande d'appel jaune */
.ld-cta { background: var(--jaune); }
.ld-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 34px; }
.ld-cta-t { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; max-width: 30ch; }
.ld-cta-in p:not(.ld-cta-t) { color: #3D3A35; margin-top: 6px; }
.ld-cta-b { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.ld-sources { background: var(--beton-2); padding-block: 0 48px; font-size: 13.5px; color: var(--gris); }
.ld-sources .container { border-top: 1px solid #DEDAD2; padding-top: 22px; display: grid; gap: 8px; }
.ld-sources ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ld-sources a { text-decoration: underline; }

@media (max-width: 1000px) {
  .ld-trust-in { grid-template-columns: 1fr 1fr; }
  .ld-services, .ld-services:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
  .ld-prix, .ld-split, .ld-cols { grid-template-columns: 1fr; gap: 32px; }
  .ld-split.ld-inverse .ld-split-img { order: 0; }
  .ld-split-img { position: static; aspect-ratio: 4 / 3; }
  .ld-cols-t { position: static; }
}
@media (max-width: 560px) {
  .ld-trust-in { grid-template-columns: 1fr; gap: 12px; }
  .ld-services, .ld-cards { grid-template-columns: 1fr; }
  .ld-apres .fig { aspect-ratio: 4 / 3; }
  .ld-prose { font-size: 16px; }
  .ld-intro-grande { text-align: left; }
}

/* Cartes de prestation cliquables, icônes métier */
.ld-service { position: relative; }
.ld-service-img { display: block; margin: -26px -26px 4px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; max-width: none; }
.ld-service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ld-service-lien:hover .ld-service-img img { transform: scale(1.05); }
.ld-service-img + .ld-ico { margin-top: -44px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--blanc); }
.ld-blanc .ld-service-img + .ld-ico { box-shadow: 0 0 0 5px var(--beton-2); }
.ld-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ld-service .ld-prose a { position: relative; z-index: 2; }
.ld-service-lien h3 a:hover { color: #8A6E00; }
.ld-service-lien .ld-lien { color: var(--noir); }

/* Puces des prestations sous le bandeau de confiance */
.pr-puces { background: var(--blanc); border-bottom: 1px solid #E6E2DA; }
.pr-puces-in { display: flex; align-items: center; gap: 18px; padding-block: 18px; flex-wrap: wrap; }
.pr-puces-in > b { font-size: 14px; white-space: nowrap; }
.pr-puces-in > div { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-puces a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 100px; background: var(--beton-2); font-weight: 600; font-size: 14px; transition: background .2s; }
.pr-puces a:hover { background: var(--jaune); }
.pr-puces svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--jaune); }
.pr-puces a:hover svg { background: var(--blanc); }

/* Cartes « Nos autres prestations » */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pr-card { background: var(--blanc); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; min-width: 0; }
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(14, 14, 14, .08); }
.pr-img { position: relative; aspect-ratio: 16 / 10; display: block; max-width: 100%; }
.pr-img img { width: 100%; height: 100%; object-fit: cover; }
.pr-ico { position: absolute; left: 16px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: var(--jaune); display: grid; place-items: center; box-shadow: 0 0 0 5px var(--blanc); }
.pr-ico svg { width: 26px; height: 26px; }
.pr-body { padding: 34px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pr-t { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.pr-d { color: var(--gris); font-size: 14.5px; line-height: 1.5; }
.pr-lien { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; border-top: 1px solid #E6E2DA; }
.pr-lien i { width: 30px; height: 30px; border-radius: 50%; background: var(--noir); color: var(--blanc); display: grid; place-items: center; }
.pr-lien svg { width: 14px; height: 14px; }

/* Accueil : icônes des listes de métiers */
.metier-list svg { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: var(--jaune); color: var(--noir); flex: none; }

/* Pas de débordement des cartes sur téléphone */
.ld-service, .ld-card, .ld-etape { min-width: 0; }
.ld-prose, .ld-card p, .ld-service h3 { overflow-wrap: break-word; }
@media (max-width: 560px) { .ld-services, .ld-cards, .ld-services:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* Accueil : titre principal pour le référencement + slogan */
.hero .h1-big.h1-seo-titre { font-size: clamp(2.4rem, 4.4vw, 4.3rem); line-height: 1; letter-spacing: -0.05em; text-wrap: balance; max-width: 17ch; }
.hero-slogan { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -0.015em; color: rgba(255, 255, 255, .88); }
.hero-slogan b { color: var(--jaune); }

/* Grand « LocalDevis » en bas du pied de page */
.f-mot { display: block; width: 100%; margin-top: 10px; padding-bottom: 8px; position: relative; }
.f-mot svg { display: block; width: 100%; height: auto; }
.f-mot text { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: -0.04em; }

/* Fin de pied de page : grand logo plus mesuré + ligne légale */
.f-fin { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--noir-3); display: grid; justify-items: center; gap: 26px; padding-bottom: 34px; position: relative; }
.f-fin .f-mot { width: min(820px, 88%); margin: 0; padding: 0; }
.f-fin .f-mot text { filter: none; }
.f-legal { width: 100%; display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 13px; color: #8A857C; }
.f-legal > span:last-child { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.f-legal a { color: #B9B4AA; transition: color .2s; }
.f-legal a:hover { color: var(--jaune); }
@media (max-width: 640px) { .f-fin { margin-top: 48px; padding-top: 34px; } .f-fin .f-mot { width: 100%; } .f-legal { justify-content: center; text-align: center; } .f-legal > span:last-child { justify-content: center; } }

/* Sous-parties de longueurs différentes : cartes de même taille, une photo chacune, texte limité */
.ld-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.ld-info { min-width: 0; }
@media (min-width: 1001px) { .ld-info h3 { min-height: 2.4em; } }
.ld-clamp { position: relative; max-height: 10.2em; overflow: hidden; transition: max-height .35s ease; }
.ld-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--blanc)); pointer-events: none; }
.ld-blanc .ld-clamp::after { background: linear-gradient(180deg, rgba(244, 242, 238, 0), var(--beton-2)); }
.ld-clamp.court::after { display: none; }
.ld-info.ouvert .ld-clamp { max-height: 200em; }
.ld-info.ouvert .ld-clamp::after { display: none; }
.ld-info .ld-prose { font-size: 15.5px; line-height: 1.6; }
.ld-info .ld-prose ul { gap: 4px; }
.ld-info-pied { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid #E6E2DA; }
.ld-suite { border: 0; background: none; padding: 0; font: 600 15px var(--font); color: var(--noir); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ld-suite::after { content: "+"; width: 24px; height: 24px; border-radius: 50%; background: var(--noir); color: var(--blanc); display: grid; place-items: center; font-size: 16px; line-height: 1; }
.ld-info.ouvert .ld-suite::after { content: "−"; }
.ld-info .ld-lien { margin: 0; padding: 0; }
.ld-info-pied:not(:has(> :not([hidden]))) { display: none; }

/* Tablette : cartes d'information en format horizontal, une par ligne */
@media (min-width: 641px) and (max-width: 1000px) {
  .ld-infos { grid-template-columns: 1fr; }
  .ld-info { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 26px; row-gap: 12px; align-content: start; }
  .ld-info > .ld-service-img { grid-column: 1; grid-row: 1 / -1; margin: -26px 0 -26px -26px; aspect-ratio: auto; height: calc(100% + 52px); border-radius: var(--r-xl) 0 0 var(--r-xl); }
  .ld-info > .ld-ico, .ld-info > h3, .ld-info > .ld-clamp, .ld-info > .ld-info-pied { grid-column: 2; }
  .ld-info > .ld-service-img + .ld-ico { margin-top: 0; box-shadow: none; }
}

/* Titres devenus des paragraphes (audit SEO) + mention de mise en relation */
.form-card .form-titre { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.f-col .f-titre { font-size: 15px; font-weight: 600; }
.hero-mer { font-size: 13px; color: rgba(255, 255, 255, .62); max-width: 52ch; }

/* Bandeau cookies (affiché seulement quand Google Ads est configuré) */
.ld-cookies { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; background: var(--noir); color: var(--blanc); border: 1px solid var(--noir-3); border-radius: 18px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); font-size: 14px; line-height: 1.5; }
.ld-cookies b { color: var(--jaune); margin-right: 6px; }
.ld-cookies a { color: var(--blanc); text-decoration: underline; }
.ld-cookies-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ld-cookies-b button { font: 600 15px var(--font); padding: 11px; border-radius: 100px; border: 1.5px solid var(--blanc); background: transparent; color: var(--blanc); cursor: pointer; }
.ld-cookies-b button[data-ok="1"] { background: var(--blanc); color: var(--noir); }