/* ==========================================================================
   Albert et Fils — Maquette « Force tranquille » · style FLAT & AÉRÉ (2026)
   Inspiré de la direction Ultra-Vente : fonds clairs, bleu France dominant,
   rouge tricolore parcimonieux, vert confiance. Aucun dégradé sombre.
   Typo Manrope. HTML/CSS pur — pensé pour génération dynamique (métier × ville).
   ========================================================================== */

:root {
  /* — Couleurs marque — */
  --primary:      #152970;   /* bleu nuit (footer, ancrage) */
  --primary-2:    #1D3696;   /* bleu France — couleur principale */
  --primary-soft: #2A4BC4;   /* bleu clair pour accents */
  --secondary:    #2A3046;   /* texte fort */
  --accent:       #E2241A;   /* rouge France — accent parcimonieux */
  --accent-2:     #C01510;
  --accent-dark:  #9A0F0B;
  --green:        #1B8A4B;   /* vert confiance (coches, téléphone) */
  --green-deep:   #14703B;
  --green-tint:   rgba(27,138,75,.12);
  --gold:         #F5A623;   /* étoiles avis */

  /* — Neutres clairs & calmes — */
  --ink:        #0E1326;     /* presque noir bleuté */
  --ink-soft:   #5E6378;
  --white:      #FFFFFF;
  --bg-soft:    #F6F8FC;     /* gris-bleu très clair */
  --bg-panel:   #EEF3FB;
  --bg-warm:    #EEF3FB;     /* bleu très clair, calme (hero) */
  --border:     #E5E8F0;
  --border-2:   #D9DEEC;

  /* — Ombres légères (flat) — */
  --shadow-sm: 0 2px 10px rgba(14,19,38,.05);
  --shadow:    0 14px 36px -16px rgba(14,19,38,.16);
  --shadow-lg: 0 24px 54px -22px rgba(14,19,38,.22);

  /* — Forme — */
  --radius:    16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --maxw:      1200px;

  /* — Typo : Manrope partout — */
  --font-title: "Manrope", system-ui, -apple-system, sans-serif;
  --font-sub:   "Manrope", system-ui, sans-serif;
  --font-body:  "Manrope", system-ui, sans-serif;

  /* — Variables Elementor (spans inline générés WP) — */
  --e-global-color-accent: #E2241A;
  --e-global-color-primary: #1D3696;
  --e-global-color-secondary: #2A3046;
  --e-global-color-text: #0E1326;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: #12225e; }
body { margin: 0; font-family: var(--font-body); color: var(--ink-2, #2A3046); color: var(--ink-soft); background: var(--white); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--primary-2); margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 5.4vw, 4.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.0; color: var(--ink); }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; color: var(--primary); }
h3 { font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; color: var(--primary); }
p { margin: 0 0 1em; }

/* Tweak « Titres en Fraunces » : bascule la fonte de tous les titres */
body.titles-fraunces { --font-title: "Fraunces", Georgia, "Times New Roman", serif; }
body.titles-fraunces h1, body.titles-fraunces h2, body.titles-fraunces h3, body.titles-fraunces h4,
body.titles-fraunces .policy-head h2 { font-family: var(--font-title); letter-spacing: -.01em; }
.accent { color: var(--accent); }
strong { color: var(--secondary); }

/* ---- Conteneur & sections ---- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
section { padding: clamp(64px, 7vw, 112px) 0; position: relative; }
section.soft  { background: var(--bg-soft); }
section.panel { background: var(--bg-panel); }
.section-head { max-width: 820px; margin: 0 auto 54px; text-align: center; }
.section-head h2 { position: relative; padding-bottom: .45em; }
.section-head h2::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-2) 0 33%, #C7D0E8 33% 66%, var(--accent) 66% 100%); }
.section-head p { color: var(--ink-soft); font-size: 1.12rem; margin: 0; line-height: 1.6; }
.center { text-align: center; }
.eyebrow-2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; color: var(--accent); margin-bottom: 16px; }

/* ---- Boutons (flat, Manrope) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; background: var(--primary-2); color: #fff; white-space: nowrap;
  font-family: var(--font-sub); font-weight: 700; padding: 15px 30px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(29,54,150,.5); letter-spacing: 0; }
/* Icône téléphone des boutons (même style ligne que le header, plus d'emoji) */
.btn .tel-ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); color: #fff; text-decoration: none; background: var(--primary); box-shadow: 0 14px 28px -12px rgba(21,41,112,.55); }
.btn--accent { background: var(--accent); box-shadow: 0 8px 20px -10px rgba(226,36,26,.5); }
.btn--accent:hover { background: var(--accent-2); box-shadow: 0 14px 28px -12px rgba(192,21,16,.55); }
.btn--ghost { background: #fff; color: var(--primary-2); border-color: var(--primary-2); box-shadow: none; }
.btn--ghost:hover { background: var(--primary-2); color: #fff; box-shadow: var(--shadow-sm); }
.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--ghost-light:hover { background: #fff; color: var(--primary); border-color: #fff; }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--sm { padding: 12px 22px; font-size: .92rem; }

/* ---- Révélation au scroll ---- */
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
}

/* ---- Bandeau info (haut) ---- */
.topbar { background: var(--primary); color: #c9d2f0; font-size: .82rem; letter-spacing: .02em; }
.topbar .wrap { padding: 9px 24px; display: flex; align-items: center; justify-content: center; gap: 14px 36px; text-align: center; flex-wrap: wrap; }
.topbar-left { display: inline-flex; align-items: center; gap: 10px; }
.tb-reviews { display: inline-flex; align-items: center; gap: 12px; }
.tb-sep { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; flex: 0 0 auto; }
.topbar-phone { color: #fff; white-space: nowrap; display: none; }
.topbar-phone strong { color: #fff; font-weight: 800; }
.topbar-phone:hover { text-decoration: none; color: #fff; }
.topbar .flag { display: inline-flex; width: 22px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.25); flex: 0 0 auto; }
.topbar .flag i { flex: 1; }
.flag .fb { background: #1D3696; } .flag .fw { background: #fff; } .flag .fr { background: #E2241A; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.site-header .logo img { max-height: 50px; width: auto; }
.site-nav { display: flex; flex: 1; justify-content: center; align-items: center; gap: 0; margin: 0; font-family: var(--font-sub); font-weight: 600; }
.site-nav a { color: var(--secondary); position: relative; padding: 8px 26px; white-space: nowrap; text-transform: uppercase; letter-spacing: .13em; font-size: .77rem; transition: color .2s ease; }
.site-nav a:hover { text-decoration: none; color: var(--primary-2); }
.site-nav .nav-sep { width: 1px; height: 13px; background: var(--border); flex: 0 0 auto; }
.header-call { text-align: right; line-height: 1.2; white-space: nowrap; }
.header-phone { font-family: var(--font-sub); font-weight: 800; color: var(--primary-2); white-space: nowrap; font-size: 1.42rem; display: inline-flex; align-items: center; gap: 8px; }
.header-phone svg { width: 22px; height: 22px; }
.header-call small { display: block; color: var(--ink-soft); font-size: .72rem; }
.header-cta { padding: 12px 22px; font-size: .9rem; white-space: nowrap; }

/* ---- Barre d'urgence fixe (bas) ---- */
.urgency-bar { position: fixed; bottom: 16px; left: 0; right: 0; z-index: 100; background: transparent; pointer-events: none; }
.urgency-inner { pointer-events: auto; width: min(880px, calc(100% - 28px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px 12px 20px; font-family: var(--font-sub); background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 50px -16px rgba(14,19,38,.42); }
.urgency-lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.urgency-ico { position: relative; width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.urgency-ico svg { width: 23px; height: 23px; }
.urgency-ico::after { content: ""; position: absolute; inset: 0; border-radius: 13px; box-shadow: 0 0 0 0 rgba(226,36,26,.5); animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(226,36,26,.5);} 70% { box-shadow: 0 0 0 12px rgba(226,36,26,0);} 100% { box-shadow: 0 0 0 0 rgba(226,36,26,0);} }
.urgency-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.urgency-txt strong { color: var(--primary); font-size: 1.05rem; font-weight: 800; }
.urgency-txt span { color: var(--ink-soft); font-size: .86rem; }
.urgency-actions { display: flex; align-items: center; gap: 12px; }
.urgency-num { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 800; padding: 11px 22px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(226,36,26,.6); text-decoration: none; transition: filter .2s ease; }
.urgency-num:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.urgency-num svg { width: 16px; height: 16px; flex: 0 0 auto; }
.urgency-wa { display: inline-flex; align-items: center; gap: 9px; background: #25D366; color: #fff; font-size: 1rem; font-weight: 800; padding: 11px 22px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(37,211,102,.55); text-decoration: none; transition: filter .2s ease; }
.urgency-wa:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.urgency-wa svg { width: 20px; height: 20px; flex: 0 0 auto; }
.urgency-bar .pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: 0 0 auto; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6);} 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0);} 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);} }
@media (max-width: 620px) { .urgency-bar strong { display: none; } }
/* (Le bouton WhatsApp flottant a été intégré à la barre d'urgence) */

/* ==========================================================================
   HERO — clair, plat, rassurant
   ========================================================================== */
.hero { background: linear-gradient(180deg, #F4F8FE 0%, #F7FAFE 50%, #FFFFFF 100%); color: var(--ink-soft); position: relative; overflow: hidden; border-bottom: 1px solid var(--border); padding-block: 0 clamp(40px, 4vw, 64px); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 88% 0%, rgba(29,54,150,.07), transparent 60%); pointer-events: none; }
.hero .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-block: clamp(44px, 5vw, 76px) clamp(32px, 3.5vw, 48px); }
/* Colonne texte = item de grille : min-width:0 l'empêche de gonfler à la largeur du
   mot le plus long (nom de ville) et donc de rétrécir l'image à droite. Le mot déborde
   alors EN INTERNE → le script « fit-to-width » (base.html) réduit la police du titre. */
.hero .hero-text { min-width: 0; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); color: var(--primary-2); font-family: var(--font-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(27,138,75,.5); animation: pulse 1.8s infinite; }
.hero h1 { color: var(--ink); margin: 0 0 .3em; }
.hero h1 span { color: var(--primary-2); }
/* Titres héros : flex item → min-width:0 pour qu'ils restent dans le cadre (sinon un
   nom de ville insécable étire la colonne hors écran). Le mot déborde alors EN INTERNE,
   ce que le script « fit-to-width » (base.html) détecte pour réduire la police. */
.hero h1, .article-hero .ah-title { min-width: 0; max-width: 100%; }
.hero .lead { color: var(--ink-soft); font-size: 1.2rem; line-height: 1.65; max-width: 50ch; margin: 4px 0 30px; }
.hero .lead strong { color: var(--ink); font-weight: 800; }

/* pastilles de confiance (hero) — capsules aérées, flat, uppercase */
.hero-pills { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 28px; }
.hero-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
  font-family: var(--font-sub); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--secondary); background: var(--bg-panel); border: 1px solid transparent; box-shadow: none; white-space: nowrap; }
.hero-pill svg { width: 15px; height: 15px; color: var(--primary-2); }
.hero-pill .stars { color: var(--gold); font-size: .9rem; letter-spacing: .5px; }
.hero-pill--soft  { background: var(--bg-panel); border-color: transparent; color: var(--primary-2); }
.hero-pill--green { background: #E4F2E9; border-color: transparent; color: #1C6B41; box-shadow: none; }
.hero-pill--green svg { color: var(--green); }
.hero-pill--gold  { background: #FBF3DC; border-color: transparent; color: #8A6A12; }
.hero-pill--gold svg { color: var(--gold); }
.hero-pill--brand { background: #E6EDFB; border-color: transparent; color: var(--primary-2); box-shadow: none; }
.hero-pill--brand svg { color: var(--primary-2); }

/* infos de confiance (dispo + avis) — pills blanches discrètes */
.hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 28px 0 30px; }
.info-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); font-size: .96rem; color: var(--ink-soft); max-width: 100%; }
.info-pill .info-txt { white-space: nowrap; }
a.info-pill { text-decoration: none; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a.info-pill:hover { border-color: var(--primary-2); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
.info-pill strong { color: var(--secondary); font-weight: 800; }
.info-pill .stars { color: var(--gold); font-size: 1rem; letter-spacing: 1px; }
.info-pill .dot-green { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(27,138,75,.5); animation: pulse-green 1.8s infinite; flex: 0 0 auto; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(27,138,75,.55); } 70% { box-shadow: 0 0 0 10px rgba(27,138,75,0); } 100% { box-shadow: 0 0 0 0 rgba(27,138,75,0); } }

/* réassurances (checklist hero) */
.hero-benefits { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.hero-benefits li { display: flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 1.02rem; font-family: var(--font-sub); font-weight: 600; }
.hero-benefits .bchk { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.hero-benefits .bchk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .social-proof { display: flex; gap: 14px; align-items: center; margin-top: 32px; }
.hero .avatars { display: flex; }
.hero .avatars img { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; margin-left: -15px; box-shadow: var(--shadow-sm); }
.hero .avatars img:first-child { margin-left: 0; }
.sp-text { line-height: 1.3; }
.sp-text .stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 1px; }
.sp-text small { color: var(--ink-soft); }
.hero-img { position: relative; }
.hero-img img { border-radius: var(--radius-lg); box-shadow: 0 18px 44px -26px rgba(14,19,38,.4); width: 100%; aspect-ratio: 4/4.7; object-fit: cover; }
.hero-imgtag { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; font-family: var(--font-sub);
  padding: 11px 20px 11px 11px; border-radius: 16px; box-shadow: 0 16px 32px -12px rgba(226,36,26,.65); white-space: nowrap; }
.hero-imgtag .hit-icon { position: relative; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: 0 0 auto; }
.hero-imgtag .hit-icon::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 0 rgba(255,255,255,.55); animation: pulse 2s infinite; }
.hero-imgtag .hit-icon svg { width: 21px; height: 21px; color: #fff; }
.hero-imgtag .hit-text { display: flex; flex-direction: column; line-height: 1.12; }
.hero-imgtag .hit-text b { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.hero-imgtag .hit-text small { font-weight: 600; font-size: .76rem; opacity: .94; margin-top: 2px; }
.hero-img .hero-badge { position: absolute; left: -18px; bottom: 28px; background: #fff; color: var(--primary); font-family: var(--font-sub); padding: 14px 20px; border-radius: 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.hero-img .hero-badge .hb-num { font-family: var(--font-sub); font-weight: 800; font-size: 1.9rem; color: var(--primary-2); line-height: 1; letter-spacing: -.02em; }
.hero-img .hero-badge .hb-label { font-size: .82rem; font-weight: 600; line-height: 1.25; color: var(--secondary); }

/* bande KPI sous la photo hero — flat, bordure légère */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 20px; }
.hero-stat { padding: 24px 12px; text-align: center; border-right: 1px solid var(--border); }
.hero-stat:last-child { border-right: 0; }
.hero-stat b { display: block; font-family: var(--font-sub); font-weight: 800; font-size: 1.7rem; color: var(--primary-2); line-height: 1; letter-spacing: -.03em; }
.hero-stat span { display: block; margin-top: 8px; font-size: .7rem; color: var(--ink-soft); font-family: var(--font-sub); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }

/* entrée hero en cascade */
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: heroIn .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero-text > *:nth-child(1) { animation-delay: .04s; }
  .hero-text > *:nth-child(2) { animation-delay: .12s; }
  .hero-text > *:nth-child(3) { animation-delay: .20s; }
  .hero-text > *:nth-child(4) { animation-delay: .28s; }
  .hero-text > *:nth-child(5) { animation-delay: .36s; }
  .hero-img, .hero-aside { animation: heroIn .85s cubic-bezier(.2,.8,.2,1) .18s both; }
}

/* ---- Bandeau réassurance ---- */
.intro-section { background: var(--white); }
.intro-section .wrap { position: relative; }
.badges-wrap { position: relative; z-index: 2; padding-bottom: clamp(8px, 1.5vw, 20px); }
.badges { list-style: none; padding: 22px 22px; margin: -52px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; position: relative; z-index: 5; }
.badges--hero { margin: 0; box-shadow: none; }
.badges li { display: flex; align-items: center; gap: 13px; text-align: left; padding: 6px 22px; }
.badges li:not(:last-child) { border-right: 1px solid var(--border); }
.badge-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; }
.badge-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.badge-label { font-family: var(--font-sub); font-weight: 700; font-size: .92rem; color: var(--primary); line-height: 1.25; }

/* ---- Piliers : cartes statiques ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; }
.pillar { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pillar-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; margin-bottom: 20px; }
.pillar-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { color: var(--primary); font-size: 1.3rem; margin: 0 0 12px; }
.pillar p { color: var(--ink-soft); margin: 0 0 22px; line-height: 1.6; }
.pillar-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sub); font-weight: 800; color: var(--accent); }
.pillar-link span { transition: transform .25s; font-size: 1.15em; }
.pillar:hover .pillar-link span { transform: translateX(4px); }
.pillar-link:hover { color: var(--accent-2); text-decoration: none; }

/* ---- Cartes génériques ---- */
.cards { display: grid; gap: 24px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card.mini h3 { color: var(--primary); font-size: 1.15rem; letter-spacing: 0; }
.card.mini { border-top: 3px solid var(--primary-2); }

/* ==========================================================================
   NOS SERVICES
   ========================================================================== */
#nosservices { background: var(--white); }
.service-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: svc; }
.service-block { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; display: flex; flex-direction: column; counter-increment: svc; }
.service-block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--primary-2), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 4; display: none; }
.service-block:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.service-block:hover .sb-body::before { transform: scaleX(1); }
.service-block .sb-media { position: relative; overflow: hidden; }
.service-block .sb-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14,19,38,.32)); opacity: .5; transition: opacity .35s; }
.service-block:hover .sb-media::after { opacity: .8; }
.service-block .sb-media::before { content: none; }
.service-block .sb-media img { width: 100%; height: 210px; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); display: block; }
.service-block:hover .sb-media img { transform: scale(1.07); }
.service-block .sb-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; position: relative; }
.service-block .sb-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary-2), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.service-block h3 { font-size: 1.3rem; color: var(--primary); margin: 0 0 .45em; transition: color .25s; }
/* Titre & image cliquables (pages multi-métier : renvoient vers la page du métier) */
.service-block .sb-media a { display: block; height: 100%; }
.sb-title-link { color: inherit; text-decoration: none; }
.sb-title-link:hover { color: var(--primary-2); text-decoration: none; }
.service-block:hover h3 .sb-title-link { color: var(--primary-2); }
.service-block:hover h3 { color: var(--primary-2); }
.service-block .sb-body > p { color: var(--ink-soft); margin: 0 0 18px; }
.checklist { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 1px; }
.checklist li { position: relative; padding: 3px 0 3px 32px; color: var(--secondary); font-size: .98rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-tint); }
.checklist li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 5px; height: 9px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.service-block .sb-actions { margin-top: auto; display: flex; gap: 10px; align-items: stretch; }
.service-block .sb-actions .btn { flex: 1; width: auto; justify-content: center; }
.sb-call { flex: 0 0 auto; width: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(226,36,26,.5); transition: background .2s ease, transform .15s ease; }
.sb-call:hover { background: var(--accent-2); transform: translateY(-2px); color: #fff; text-decoration: none; }
.sb-call svg { width: 21px; height: 21px; }

/* ==========================================================================
   BANDEAU AVIS
   ========================================================================== */
.reviews-band { background: var(--bg-soft); }
.rating-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.rs-score { background: var(--primary-2); color: #fff; border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; }
.rs-num { font-family: var(--font-sub); font-weight: 800; font-size: 3rem; line-height: .9; color: #fff; display: block; letter-spacing: -.04em; }
.rs-num small { font-size: 1.2rem; color: rgba(255,255,255,.65); font-weight: 700; }
.rs-score .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; display: block; margin: 7px 0 5px; }
.rs-count { color: rgba(255,255,255,.85); font-size: .88rem; }
.rs-count strong { color: #fff; }
.rs-bars { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 5px; }
.rs-bars li { display: flex; align-items: center; gap: 12px; font-size: .76rem; color: rgba(255,255,255,.85); }
.rs-bars li > span:first-child { width: 26px; flex: 0 0 auto; }
.rs-bars li > span:last-child { width: 38px; text-align: right; flex: 0 0 auto; }
.rs-track { flex: 1; height: 6px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.rs-track i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.reviews-proof { margin-inline: auto; }
.rs-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: center; }
.reviews-widget { margin-top: 24px; }
.reviews-widget:empty { margin-top: 0; }
.platform { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
.platform:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); text-decoration: none; }
.plat-logo { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.7rem; color: #fff; }
.plat-google { background: conic-gradient(from -45deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4); }
.plat-trust { background: #00B67A; }
.plat-body { display: grid; gap: 2px; flex: 1; }
.plat-body strong { font-family: var(--font-sub); color: var(--primary); font-size: 1.15rem; }
.plat-body .stars { color: var(--gold); font-size: 1rem; letter-spacing: 1px; }
.plat-body small { color: var(--ink-soft); }
.plat-arrow { font-size: 1.8rem; color: var(--primary-2); font-weight: 700; flex: 0 0 auto; transition: transform .25s; }
.platform:hover .plat-arrow { transform: translateX(4px); }

/* ==========================================================================
   EXPERTISES
   ========================================================================== */
.exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 56px; }
.exp-item { background: #fff; border: 1px solid var(--border); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.exp-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-2); }
.exp-item h3 { color: var(--primary); font-size: 1.3rem; }
.exp-item .rich { color: var(--ink-soft); margin-bottom: 22px; }
.exp-item .btn { margin-top: auto; align-self: flex-start; }
.exp-item .exp-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sub); font-weight: 800; color: var(--accent); }
.exp-item .exp-link span { transition: transform .25s ease; font-size: 1.15em; }
.exp-item:hover .exp-link span { transform: translateX(4px); }
.exp-item .exp-link:hover { color: var(--accent-2); text-decoration: none; }
.cta-inline { text-align: center; margin-top: 44px; padding: 48px; background: var(--primary-2); color: #fff; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.cta-inline h3 { color: #fff; font-size: 1.6rem; position: relative; }
.cta-inline p { color: rgba(255,255,255,.88); position: relative; }
.cta-inline .btn { background: #fff; color: var(--primary-2); }
.cta-inline .btn:hover { background: var(--accent); color: #fff; }

/* ==========================================================================
   POURQUOI NOUS CHOISIR
   ========================================================================== */
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; }
.reason { display: flex; gap: 16px; align-items: flex-start; }
.reason .r-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; }
.reason .r-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.reason h3 { color: var(--primary); font-size: 1.15rem; margin: 6px 0 .35em; }
.reason p { color: var(--ink-soft); margin: 0; font-size: 1.0625rem; }

/* ==========================================================================
   POLITIQUE — bande (flat, claire)
   ========================================================================== */
.politique-section { background: var(--bg-soft); padding-block: 0; }
.policy-band { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.policy-head { background: var(--primary-2); padding: 44px; display: flex; align-items: center; }
.policy-head h2 { color: #fff; font-family: var(--font-sub); font-weight: 800; font-size: 1.5rem; margin: 0; }
.policy-head h2::after { display: none; }
.policy { background: #fff; padding: 40px 30px; text-align: center; border-left: 1px solid var(--border); }
.policy h3 { color: var(--primary); font-family: var(--font-sub); font-weight: 700; font-size: 1.15rem; }
.policy p { color: var(--ink-soft); margin: 0; font-size: 1.0625rem; }

/* ==========================================================================
   URGENCE — 3 étapes (cartes claires)
   ========================================================================== */
#urgence { background: var(--bg-soft); }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; }
.steps .step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 36px; position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.steps .step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.steps .step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: var(--bg-panel); color: var(--primary-2); font-family: var(--font-sub); font-weight: 800; font-size: 1.5rem; margin-bottom: 18px; }
.steps .step h3 { color: var(--primary); font-family: var(--font-sub); font-weight: 700; font-size: 1.3rem; margin-bottom: .4em; }
.steps .step p { color: var(--ink-soft); margin: 0; font-size: 1.0625rem; }

/* ==========================================================================
   INTERVENTIONS — liste multi-colonnes
   ========================================================================== */
.interventions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.interventions li { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; color: var(--secondary); font-family: var(--font-sub); font-weight: 600; font-size: .94rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.interventions li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-2); flex: 0 0 auto; transition: background .2s ease, transform .2s ease; }
.interventions li:hover { transform: translateY(-3px); border-color: var(--primary-2); color: var(--primary-2); box-shadow: var(--shadow); }
.interventions li:hover::before { background: var(--accent); transform: scale(1.3); }
/* Interventions cliquables → LP : le lien hérite des couleurs et remplit toute la pastille */
.interventions li a { color: inherit; text-decoration: none; margin: -7px -14px; padding: 7px 14px; border-radius: 999px; }
.interventions li a:hover { color: inherit; text-decoration: none; }
/* Repli « Voir plus » (actif uniquement sur mobile via media query) */
.interv-cb { display: none; }
.interv-more { display: none; }

/* ==========================================================================
   NOTRE EXPERTISE — 5 atouts
   ========================================================================== */
.process-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.process-item { flex: 0 0 calc((100% - 40px) / 3); position: relative; text-align: center; padding: 38px 20px 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.process-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-2), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.process-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.process-item:hover::before { transform: scaleX(1); }
.process-item .proc-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; transition: background .3s ease, color .3s ease, transform .3s ease; }
.process-item:hover .proc-icon { background: var(--primary-2); color: #fff; transform: scale(1.06); }
.process-item .proc-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }
.process-item h3 { color: var(--primary); font-size: 1.15rem; margin: 0 0 8px; }

/* ==========================================================================
   ARTICLES — sommaire + contenu riche
   ========================================================================== */
#ensavoirplus { background: var(--bg-soft); }
.ensavoirplus-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.toc-wrap { position: sticky; top: 96px; }
.toc-wrap .toc { margin-bottom: 0; }
.toc { background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--primary-2); border-radius: var(--radius-sm); padding: 26px 32px; margin-bottom: 40px; box-shadow: var(--shadow-sm); }
.toc strong { font-family: var(--font-sub); color: var(--primary); display: block; margin-bottom: 10px; }
.toc ol { margin: 0; columns: 1; padding-left: 1.2em; }
.toc li { margin-bottom: 9px; }
.toc a { color: var(--primary-2); }
.articles article { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; margin-bottom: 22px; box-shadow: var(--shadow-sm); scroll-margin-top: 100px; }
.articles h3 { color: var(--primary); font-size: 1.6rem; }
.rich :is(h4) { font-family: var(--font-sub); color: var(--accent); font-size: 1.08rem; margin: 1.3em 0 .4em; font-weight: 700; }
.rich :is(ul, ol) { padding-left: 1.2em; }
.rich li { margin-bottom: .4em; }
.rich table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.rich th, .rich td { border: 1px solid var(--border); padding: 11px 13px; text-align: left; }
.rich th { background: var(--bg-soft); font-family: var(--font-sub); color: var(--primary); }

/* ==========================================================================
   "C'EST AUSSI" — fond clair
   ========================================================================== */
.cest-aussi { background: var(--bg-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cest-aussi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 36px; }
.ca-point { display: flex; align-items: flex-start; gap: 16px; }
.ca-point .ca-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--border); color: var(--primary-2); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.ca-point .ca-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ca-point h3 { color: var(--primary); margin: 0 0 8px; }
.ca-point p { color: var(--ink-soft); margin: 0; font-size: 1.0625rem; }

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.reviews { columns: 3; column-gap: 20px; }
.review { break-inside: avoid; margin: 0 0 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review .stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 1.5px; margin-bottom: 12px; }
.review blockquote { margin: 0 0 20px; color: var(--secondary); font-size: .96rem; line-height: 1.6; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.review-author .review-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.review-author .ra-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.review-author .author { font-family: var(--font-sub); font-weight: 700; color: var(--primary); font-size: .98rem; }
.review-author .author-role { color: var(--ink-soft); font-size: .82rem; }

/* ==========================================================================
   ZONES D'INTERVENTION
   ========================================================================== */
.zones-list { columns: 4; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.zones-list li { padding: 8px 0; break-inside: avoid; }
/* 1 ligne par ville : si le nom dépasse la colonne, on coupe avec « … » */
.zones-list a, .zones-list .zone-flat { color: var(--secondary); display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zones-list a::before, .zones-list .zone-flat::before { content: "›"; color: var(--accent); font-weight: 700; margin-right: 8px; }
.zones-list a:hover { color: var(--primary-2); text-decoration: none; }

/* ==========================================================================
   MARQUES / ASSURANCES
   ========================================================================== */
.brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.brands-grid img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.brands-grid .section-head, .brands-grid h2 { text-align: left; margin-left: 0; }
.brands-grid h2::after { left: 0; transform: none; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.brand-chip { display: inline-flex; align-items: center; padding: 12px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-sub); font-weight: 700; color: var(--secondary); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq .wrap { max-width: 880px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; padding: 4px 28px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; }
.faq details[open] { box-shadow: var(--shadow); border-color: var(--border-2); }
.faq summary { font-family: var(--font-sub); font-weight: 700; font-size: 1.06rem; color: var(--primary); cursor: pointer; padding: 20px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.6em; line-height: 1; transition: transform .2s; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq .rich { color: var(--ink-soft); padding-bottom: 14px; }
.dep-links { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); text-align: center; }
.dep-links strong { font-family: var(--font-sub); color: var(--primary); display: block; margin-bottom: 12px; }
.dep-links .chips { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .92rem; justify-content: center; }

/* ---- Bandeau CTA final ---- */
.cta-band { background: var(--primary-2); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 120%, rgba(255,255,255,.1), transparent 60%); }
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band h2::after { left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.5); }
.cta-band p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 60ch; margin-inline: auto; }
.cta-band .btn { background: #fff; color: var(--primary-2); }
.cta-band .btn:hover { background: var(--accent); color: #fff; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--primary); color: #aeb8da; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; padding-block: 64px 48px; align-items: start; }
.site-footer h4 { font-family: var(--font-sub); color: #fff; margin: 0 0 16px; font-size: 1.05rem; }
.site-footer .logo-foot img { max-height: 46px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.site-footer a { color: #aeb8da; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.footer-about p { color: #99a3c8; line-height: 1.65; margin: 0 0 22px; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.footer-menu a { line-height: 1.3; display: inline-block; }
.footer-col .ft-h4-2 { margin-top: 26px; }

/* Boutons de partage (ronds, couleurs réseau) */
.footer-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.footer-share .fs-label { font-family: var(--font-sub); font-weight: 700; color: #cdd5ef; font-size: .82rem; margin-right: 2px; }
.footer-share .share { color: #fff; }
.share { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .15s ease, filter .2s ease; }
.share:hover { transform: translateY(-3px); color: #fff; text-decoration: none; filter: brightness(1.1); }
.share svg { width: 19px; height: 19px; fill: #fff; }
.share--x  { background: #0f1419; }
.share--fb { background: #1877F2; }
.share--in { background: #0A66C2; }
.share--wa { background: #25D366; }

/* Carte Google Maps */
/* Cartes Google : rangée centrée sous les 3 colonnes (1 ou 2 côte à côte) */
.footer-maps { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 40px 0 26px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-maps .footer-map { width: 440px; max-width: 100%; margin-bottom: 0; flex: 0 1 440px; }
.footer-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 22px; border: 1px solid rgba(255,255,255,.1); }
.footer-mapframe { width: 100%; height: 240px; border: 0; display: block; filter: grayscale(.15); }
.map-card { position: absolute; top: 14px; left: 14px; right: 14px; max-width: 280px; display: grid; gap: 2px; background: #fff; border-radius: 12px; padding: 12px 38px 12px 14px; box-shadow: 0 10px 26px -10px rgba(14,19,38,.5); }
.map-card:hover { text-decoration: none; }
.map-card .mc-name { font-family: var(--font-sub); font-weight: 800; color: var(--primary); font-size: .98rem; }
.map-card .mc-addr { color: var(--ink-soft); font-size: .8rem; }
.map-card .mc-rate { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }
.map-card .mc-rate b { color: #C77F00; font-family: var(--font-sub); font-weight: 800; }
.map-card .mc-rate .stars { color: var(--gold); font-size: .82rem; letter-spacing: .5px; }
.map-card .mc-go { position: absolute; top: 12px; right: 12px; color: var(--primary-2); font-weight: 700; }

/* Réseaux sociaux (carrés) */
.footer-socials { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #cdd5ef; transition: background .2s ease, color .2s ease, transform .15s ease; }
.footer-socials a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); text-decoration: none; }
.footer-socials svg { width: 18px; height: 18px; }

/* Coordonnées légales */
.footer-address { font-style: normal; color: #7e88ad; font-size: .84rem; line-height: 1.7; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-address strong { display: block; color: #cdd5ef; font-family: var(--font-sub); font-weight: 700; font-size: .95rem; margin-bottom: 2px; }

/* Bandeau bas */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.16); padding-bottom: 100px; }  /* prolonge la bande bleue derrière la barre fixe → continuité couleur en bas de page */
.footer-bottom .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-block: 20px; font-size: .82rem; color: #7e88ad; }
.footer-bottom strong { color: #aeb8da; font-weight: 700; }

/* ==========================================================================
   NOTRE ENTREPRISE — présentation + galerie bento
   ========================================================================== */
.about-section .about-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center; }
.about-text h2 { margin-top: 10px; }
.about-text p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Mobile : les 2 boutons « Notre entreprise » côte à côte (pas l'un sous l'autre) —
   padding & police réduits pour qu'ils tiennent sur une seule ligne. */
@media (max-width: 640px) {
  .about-cta { flex-wrap: nowrap; gap: 8px; }
  .about-cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; padding: 11px 10px; font-size: .9rem; gap: 6px; }
  .about-cta .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
}
.about-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 162px; gap: 12px; }
.about-gallery .gal { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.about-gallery .gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.about-gallery .gal:hover img { transform: scale(1.07); }
.about-gallery .gal-1 { grid-column: span 2; grid-row: span 2; }
.about-gallery .gal-1 figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(21,41,112,.85); backdrop-filter: blur(4px); color: #fff; font-family: var(--font-sub); font-weight: 700; font-size: .82rem; padding: 8px 15px; border-radius: 999px; }

/* L'entreprise c'est aussi — photo + 3 points */
.cest-aussi-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; }
.ca-photo { align-self: stretch; }
.ca-photo img { width: 100%; height: 100%; min-height: 360px; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ca-content .cest-aussi-grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 26px; }
.ca-content .section-head { text-align: left; margin: 0 0 24px; max-width: none; }
.ca-content .section-head h2 { padding-bottom: 0; }
.ca-content .section-head h2::after { display: none; }

/* Expertise — process : paragraphes */
.process-item p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; }

/* Bandeau preuve sociale + CTA (fin de section) — épuré, sans cadre */
.proof-cta { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 30px; }
.pc-proof { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; cursor: pointer; border-radius: 14px; padding: 6px 10px; margin: -6px -10px; transition: background .18s ease, transform .18s ease; }
a.pc-proof:hover { background: rgba(20,39,95,.05); transform: translateY(-1px); text-decoration: none; }
a.pc-proof:hover .pc-text span:last-child { color: var(--primary-2); }
.pc-avatars { display: flex; }
.pc-avatars img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -14px; box-shadow: var(--shadow-sm); }
.pc-avatars img:first-child { margin-left: 0; }
.pc-text { display: flex; flex-direction: column; line-height: 1.3; }
.pc-text .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 1.5px; }
.pc-text span:last-child { color: var(--ink-soft); font-size: 1rem; }
.pc-text strong { color: var(--secondary); font-weight: 800; }
@media (max-width: 600px) { .proof-cta { flex-direction: column; align-items: center; text-align: center; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .hero .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .hero-pills, .hero .hero-benefits { justify-content: center; }
  .hero .hero-benefits li { justify-content: center; }
  .hero .hero-cta-row, .hero .social-proof { justify-content: center; }
  .cards-4, .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .process-item { flex-basis: calc((100% - 20px) / 2); }
  .service-detail { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .badges { grid-template-columns: repeat(3, 1fr); margin-top: 28px; gap: 8px 0; }
  .policy-band, .steps { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .ensavoirplus-grid { grid-template-columns: 1fr; gap: 24px; }
  .toc-wrap { position: static; }
  .toc-wrap .toc { margin-bottom: 8px; }
  .toc ol { columns: 2; }
  .interventions { columns: 2; }
  .zones-list { columns: 2; }
  .brands-grid { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .reviews { columns: 2; }
}
@media (max-width: 640px) {
  html { font-size: 15px; }            /* base rem réduite → toute la typo s'adapte */
  .site-nav { display: none; }
  .header-call { display: none; }
  .cards-4, .reasons-grid, .process-grid, .service-detail, .footer-grid, .badges, .cest-aussi-grid { grid-template-columns: 1fr; }
  .badges li:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--border); }
  .interventions { columns: 1; }
  .zones-list { columns: 2; column-gap: 16px; }   /* villes courtes → 2 colonnes sur mobile */
  .reviews { columns: 1; }
  .hero-img .hero-badge { left: 50%; transform: translateX(-50%); }
  section { padding: 56px 0; }
}

/* ════ CTA téléphone → rouge (appel = urgence). Le CTA « devis » reste bleu. ════ */
/* Boutons liés à un appel : variante rouge pleine, quelle que soit la base (.btn, --ghost, --ghost-light) */
.btn[href^="tel:"] {
  background: var(--accent); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(226,36,26,.5);
}
.btn[href^="tel:"]:hover {
  background: var(--accent-2); color: #fff; border-color: transparent;
  box-shadow: 0 14px 28px -12px rgba(192,21,16,.55);
}
.btn[href^="tel:"] svg { color: currentColor; }
/* Numéro de téléphone dans le header */
.header-phone { color: var(--accent); }
.header-phone:hover { color: var(--accent-2); }
/* Bouton imbriqué dans un lien d'appel (ex. dos des cartes « flip ») */
a[href^="tel:"] > .btn { background: var(--accent); color: #fff; border-color: transparent; }
a[href^="tel:"]:hover > .btn { background: var(--accent-2); color: #fff; }

/* ──── Responsive : sections entreprise + footer ──── */
@media (max-width: 980px) {
  .about-section .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .cest-aussi-layout { grid-template-columns: 1fr; gap: 32px; }
  .ca-photo img { max-height: 380px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .about-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .about-gallery .gal-1 { grid-column: span 2; grid-row: span 2; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom .wrap { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   OÙ NOUS TROUVER — agences (cartes compactes)
   ========================================================================== */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.loc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.loc-media { display: grid; grid-template-columns: 1fr 1fr; height: 152px; background: var(--bg-panel); }
.loc-photo { width: 100%; height: 100%; display: block; }
.loc-mapframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.12); }
.loc-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.loc-head { display: flex; align-items: center; gap: 11px; }
.loc-pin { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; flex: 0 0 auto; }
.loc-pin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.loc-card h3 { margin: 0; font-size: 1.15rem; color: var(--primary); }
.loc-addr { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.loc-rating { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-soft); }
.loc-rating .stars { color: var(--gold); letter-spacing: .5px; font-size: .9rem; }
.loc-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }
.loc-call { font-family: var(--font-sub); font-weight: 800; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; font-size: .96rem; white-space: nowrap; }
.loc-call:hover { color: var(--accent-2); text-decoration: none; }
.loc-call svg { width: 15px; height: 15px; }
.loc-visit { font-family: var(--font-sub); font-weight: 700; color: var(--primary-2); font-size: .84rem; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.loc-visit:hover { color: var(--primary); text-decoration: none; }
@media (max-width: 900px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOBILE — adaptation complète (≤ 640px). Bloc final = priorité sur le reste.
   ========================================================================== */
@media (max-width: 640px) {
  body { padding-bottom: 0; }
  .footer-bottom { padding-bottom: 120px; }  /* + de marge : « Dov Webmaster » dégagé de la barre fixe pleine largeur */
  .wrap { padding: 0 18px; }
  section { padding: 46px 0; }

  /* ---- Bandeau supérieur : accroche centrée sur toute la largeur ---- */
  .topbar { font-size: .78rem; }
  .topbar .wrap { justify-content: center; gap: 8px; padding: 8px 18px; }
  .topbar-left { text-align: center; }
  .tb-reviews { display: none; }   /* on masque les avis dans le bandeau (mobile) */

  /* ---- Header : non-fixe sur mobile, logo réduit ---- */
  .site-header { position: static; }
  .site-header .wrap { gap: 12px; }
  .site-nav, .header-call, .header-phone { display: none; }
  .site-header .btn { margin-left: auto; padding: 8px 16px; font-size: .82rem; font-weight: 800; line-height: 1.1; min-height: 0; }
  .site-header .logo img { max-height: 32px; }

  /* ---- Héros : titre + image visibles sans scroller (réordonnés + compactés) ---- */
  .hero { padding-block: 6px 30px; }
  .hero .hero-grid { display: flex; flex-direction: column; gap: 14px; text-align: left; padding-block: 12px 16px; }   /* mobile : moins d'espace au-dessus du titre */
  .hero-text, .hero-aside { display: contents; }
  .hero-pills { display: none; }
  .hero h1 { order: 2; font-size: clamp(2.35rem, 9.6vw, 2.75rem); line-height: 1.06; margin: 0 0 14px; text-align: center; }
  .hero-aside .hero-img { order: 4; }
  /* Page partenaire : le bloc photo+map passe APRÈS le titre (comme l'image des autres pages)
     et reste contenu dans la largeur de page. */
  .hero-aside .hero-photomap { order: 4; width: 100%; max-width: 100%; box-sizing: border-box; }
  .hero-photomap .hero-img--map img { height: 300px; }
  .hero-photomap .hero-map iframe { height: 170px; }
  .hero-map-card { padding: 13px 14px; gap: 11px; }
  .hero-map-card .hmc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-map-card .hmc-go { display: none; }
  /* mobile : on « aplatit » hero-info pour ordonner chaque pill séparément */
  .hero-info { display: contents; }
  .hero-info a.info-pill { order: 3; }      /* SEUL le pill AVIS remonte entre le titre (2) et la photo (4) */
  .hero-info span.info-pill { order: 5; }   /* le pill « Disponibles 24h/24 » reste en bas (après la photo) */
  .hero-benefits { order: 6; margin: 4px 0 0; gap: 8px; }
  .hero-cta-row { display: none; }
  .hero .hero-pills, .hero .hero-benefits, .hero .hero-benefits li,
  .hero .hero-cta-row, .hero .hero-info, .hero .social-proof { justify-content: flex-start; }
  .hero-benefits li { font-size: .95rem; }
  .hero-info { gap: 9px; width: 100%; }
  .info-pill { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 16px; font-size: .9rem; }
  .info-pill > .stars, .info-pill > .dot-green { flex: 0 0 auto; }
  .hero-info .info-txt, .info-pill .info-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
  .hero-cta-row .btn { width: 100%; justify-content: center; min-height: 52px; }
  .hero-img img { aspect-ratio: 4/3; }
  .hero-imgtag { top: auto; bottom: 12px; left: 12px; gap: 9px; padding: 8px 13px 8px 8px; border-radius: 13px; }
  .hero-imgtag .hit-icon { width: 32px; height: 32px; }
  .hero-imgtag .hit-text b { font-size: .86rem; }
  .hero-imgtag .hit-text small { font-size: .68rem; }
  .rs-platforms { grid-template-columns: 1fr; gap: 12px; }
  .rating-summary { grid-template-columns: 1fr; gap: 18px; }
  .rs-score { padding: 30px 26px; }
  .rs-num { font-size: 3.4rem; }
  .platform { padding: 18px 20px; }

  /* ---- Bandeau de badges → grille 2 colonnes de cartes compactes (mobile) ---- */
  .badges-wrap { padding-bottom: 0; }
  .badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 18px 0 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
  .badges li { gap: 10px; padding: 13px 14px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 14px -10px rgba(14,19,38,.4); }
  .badges li:nth-child(5) { grid-column: 1 / -1; justify-content: center; }
  .badges li:not(:last-child) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .badge-icon { width: 34px; height: 34px; border-radius: 10px; }
  .badge-icon svg { width: 18px; height: 18px; }
  .badge-label { font-size: .84rem; }

  /* ---- Grilles de contenu → 1 colonne ---- */
  .cards-4, .reasons-grid, .service-detail, .footer-grid,
  .cest-aussi-grid, .pillars, .policy-band, .steps, .loc-grid,
  .brands-grid, .ensavoirplus-grid { grid-template-columns: 1fr; }
  /* Agréé par les assurances : image affichée APRÈS les paragraphes (mobile) */
  .brands-grid > img { order: 2; margin-top: 24px; }
  .brands-grid > div { order: 1; }
  .process-item { flex-basis: 100%; }

  /* ---- Notre politique en 3 points : moins aéré + titre centré (mobile) ---- */
  .policy-head { padding: 24px 22px; justify-content: center; text-align: center; }
  .policy-head h2 { font-size: 1.3rem; }
  .policy { padding: 22px 22px; }
  .policy h3 { margin: 0 0 6px; }
  .interventions, .reviews, .toc ol { columns: 1; }
  .zones-list { columns: 2; column-gap: 16px; }   /* villes courtes → 2 colonnes sur mobile */

  /* ---- Nos interventions : nuage de pastilles compactes, chacune sur 1 ligne (mobile) ---- */
  .interventions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: none; overflow: visible; margin-top: 4px; }
  .interventions li { white-space: nowrap; padding: 8px 14px; font-size: .82rem; gap: 7px; line-height: 1; max-width: 100%; min-width: 0; }
  /* Étiquette trop longue pour l'écran → on coupe avec « … » au lieu de déborder */
  .interventions li a { min-width: 0; max-width: 100%; overflow: hidden; }
  .interventions li .iv-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .interventions li::before { width: 6px; height: 6px; margin-top: 0; }
  .interventions li:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); color: var(--secondary); }
  .interv-more { display: none; }

  /* titres de section un peu plus contenus */
  .section-head h2, section h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); }
  .section-head p { font-size: 1rem; }

  /* ---- Services / expertise ---- */
  .process-item { padding: 30px 22px; }
  .service-block .sb-body { padding: 22px 22px 24px; }

  /* ---- Padding intérieur UNIFORME dans tous les encarts (mobile) ---- */
  .pillar,
  .card,
  .exp-item,
  .policy,
  .review,
  .process-item,
  .service-block .sb-body,
  .loc-body { padding: 22px; }
  .faq details { padding-left: 22px; padding-right: 22px; }

  /* ---- Agences : photo au-dessus de la carte (plus lisible) ---- */
  .loc-media { grid-template-columns: 1fr; height: auto; }
  .loc-photo { height: 158px; }
  .loc-mapframe { height: 158px; }

  /* ---- Entreprise + galerie ---- */
  .about-section .about-grid, .cest-aussi-layout { grid-template-columns: 1fr; gap: 26px; }
  .about-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 128px; gap: 10px; }
  .about-gallery .gal-1 { grid-column: span 2; grid-row: span 2; }
  .about-gallery .gal-6 { display: none; }   /* on masque la 6e photo sur mobile (évite l'orpheline) */
  .ca-photo img { max-height: 320px; }

  /* ---- Preuve sociale + CTA : centré, bouton ajusté au contenu (mobile) ---- */
  .proof-cta { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 26px; }
  .proof-cta .btn { width: auto; min-height: 50px; }
  /* On garde l'apparence desktop (avatars + étoiles/texte empilés) sur une ligne ;
     ça ne passe à la ligne que si la largeur est insuffisante (flex-wrap). */
  .pc-proof { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
  .pc-avatars img { width: 34px; height: 34px; margin-left: -12px; border-width: 2px; }
  .pc-text { text-align: left; }
  .pc-text .stars { font-size: .95rem; letter-spacing: 1px; }
  .pc-text span:last-child { font-size: .92rem; }
  .pc-text span:last-child { font-size: .92rem; }

  /* ---- Footer ---- */
  .footer-grid { gap: 34px; padding-block: 48px 36px; }
  .footer-about { grid-column: auto; }
  .footer-mapframe { height: 200px; }
  .footer-bottom .wrap { flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 16px; }

  /* ---- Barre d'urgence (mobile) : fondu dégradé + 2 boutons pilules flottants ---- */
  .urgency-bar { bottom: 0; }
  .urgency-inner { width: 100%; padding: 26px 14px 14px; gap: 10px; border-radius: 0; border: 0;
    justify-content: center; box-shadow: none;
    background: linear-gradient(to top, #fff 58%, rgba(255,255,255,.92) 78%, rgba(255,255,255,0)); }
  .urgency-lead { display: none; }
  .urgency-actions { width: 100%; gap: 10px; flex: 1; }
  .urgency-num, .urgency-wa { flex: 1; border-radius: 999px; padding: 15px 12px; font-size: 1.02rem; justify-content: center; }
  .urgency-num { box-shadow: 0 10px 22px -8px rgba(226,36,26,.55); }
  .urgency-wa { box-shadow: 0 10px 22px -8px rgba(37,211,102,.5); }
  .urgency-wa .uwa-label { display: inline; }
  .urgency-num svg, .urgency-wa svg { width: 19px; height: 19px; }

  /* ---- Confort de lecture des articles « En savoir plus » ---- */
  .toc-wrap { position: static; }
  /* H4 (sous-titres rouges) : agrandi sur mobile (le root réduit le rendait trop petit) */
  .rich h4, .titre-4 { font-size: 1.25rem; }

  /* Méta du hero LP : l'avatar ne doit pas être écrasé. On passe sur 2 lignes —
     auteur + date (« MàJ ») + temps de lecture sur UNE ligne avec points séparateurs
     quand la place le permet (sinon retour à la ligne propre grâce à flex-wrap).
     Préfixe .article-hero pour primer sur la règle de base (définie plus bas dans le fichier). */
  .article-hero .ah-meta { flex-wrap: wrap; white-space: nowrap; row-gap: 6px; gap: 7px; }
  .article-hero .ah-author img { flex: 0 0 auto; width: 26px; height: 26px; }
  .article-hero .ah-author strong { font-size: .8rem; }
  .article-hero .ah-metaitem { font-size: .78rem; gap: 5px; }
  .article-hero .ah-metaitem svg { width: 14px; height: 14px; }
  .article-hero .ah-meta .mj-long { display: none; }
  .article-hero .ah-meta .mj-short { display: inline; }

  /* ---- Zones tactiles plus généreuses pour les liens d'action ---- */
  .loc-call, .loc-visit { padding: 8px 0; }
  .loc-actions { padding-top: 8px; }
  .pillar-link { padding: 6px 0; }
}

/* Très petits écrans */
@media (max-width: 380px) {
  html { font-size: 14.5px; }
  .wrap { padding: 0 14px; }
  .hero h1 { font-size: 2.2rem; }
  .about-gallery { grid-auto-rows: 112px; }
  .site-header .btn { padding: 11px 14px; font-size: .86rem; }
  .topbar-phone strong { font-size: 1rem; }
}

/* ---- Fix encarts agences : images/cartes toujours dans le cadre ---- */
.loc-media { overflow: hidden; }
.loc-photo { object-fit: cover; }
.loc-mapframe { max-width: 100%; }
/* Galerie boutique (page partenaire) — en début de page */
.shop-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 12px; }
.shop-gallery figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.shop-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.shop-gallery figure:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .shop-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .shop-gallery figure:nth-child(n+5) { display: none; } }

/* Carré « et bien d'autres… » en fin de liste marques/assurances */
.brand-chip--more { background: transparent; border: 1px dashed var(--border-2); color: var(--ink-soft); font-style: italic; }

/* Lien « En savoir plus » dans les encarts services (pages multi-métier) */
.sb-more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sub); font-weight: 700; font-size: .85rem; color: var(--primary-2); margin: 4px 0 10px; }
.sb-more:hover { color: var(--accent); text-decoration: none; gap: 7px; }

/* ═══════════ LANDING PAGE — hero éditorial + article + CTA inline (maquette LP) ═══════════ */
.article-hero { background: linear-gradient(180deg, #F4F8FE 0%, #F8FBFE 55%, #FFFFFF 100%); border-bottom: 1px solid var(--border); padding-block: clamp(26px, 3.5vw, 44px); position: relative; overflow: hidden; }
.article-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 60% at 92% 0%, rgba(29,54,150,.07), transparent 60%); pointer-events: none; }
.article-hero .wrap { position: relative; }
.ah-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
/* Idem hero : la colonne texte ne doit pas gonfler (et rétrécir l'image) à cause d'un mot long. */
.ah-grid > .ah-text { min-width: 0; }
.ah-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-sub); font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px; }
.ah-breadcrumb a { color: var(--ink-soft); }
.ah-breadcrumb a:hover { color: var(--primary-2); text-decoration: none; }
.ah-breadcrumb span { color: #c3ccdd; }
.ah-breadcrumb .ah-current { color: var(--primary-2); font-weight: 700; }
.ah-cat { display: inline-flex; align-items: center; gap: 8px; margin: 0; line-height: 1.2; background: var(--accent); color: #fff; font-family: var(--font-sub); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; padding: 7px 15px; border-radius: 999px; }
/* Titre du hero LP : style hérité de .titre-1, MAIS taille dédiée (--h1-lp-size, éditable)
   car les titres de LP sont plus longs → plus petit pour éviter les retours à la ligne moches. */
.article-hero .ah-title { color: var(--primary); margin: 16px 0 0;
  /* min décollé (~29px) pour le mobile : l'ancien plancher (h1-lp-size×.72 ≈ 44px) rendait
     le titre LP trop gros sur petit écran. Scale fluide jusqu'au max desktop (--h1-lp-size). */
  font-size: clamp(1.8rem, 7vw, var(--h1-lp-size)); }
.ah-excerpt { color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; max-width: 52ch; margin: 18px 0 0; }
.ah-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 11px; margin: 24px 0 0; font-family: var(--font-sub); white-space: nowrap; }
/* Bloc « pc-proof » (avatars + étoiles + recommandé par X+ clients) sous la ligne auteur/date du hero LP (desktop + mobile) */
/* Fin trait de séparation avec la ligne auteur/date au-dessus */
.ah-trust { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.ah-author { display: inline-flex; align-items: center; gap: 9px; }
.ah-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.ah-author strong { color: var(--primary); font-size: .9rem; font-weight: 800; }
.ah-metaitem { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
.ah-metaitem svg { width: 15px; height: 15px; color: var(--primary-2); }
.ah-dot { width: 4px; height: 4px; border-radius: 50%; background: #c3ccdd; flex: 0 0 auto; }
.mj-short { display: none; }   /* diminutif « MàJ » : visible en mobile uniquement */
.ah-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-panel); }
/* Visuel hero LP : au MINIMUM carré (les images sources 16:9 sont recadrées en cover) ;
   les images déjà carrées/portrait s'affichent sans perte. */
.ah-figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; height: auto; display: block; }
.article-hero .hero-imgtag { position: absolute; top: auto; bottom: 16px; left: 16px; }
@media (max-width: 880px) {
  .ah-grid { grid-template-columns: 1fr; gap: 26px; }
  .ah-figure { max-width: 560px; }
  .article-hero .hero-imgtag { left: 12px; bottom: 12px; }
}
.article-section .articles article h3 { margin-bottom: .5em; }
.article-section .toc { border-left: 0; position: relative; overflow: hidden; }
.article-section .toc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--primary-2) 0%, var(--accent) 100%); }
/* (padding carte article : 40px en desktop via .articles article ; 30px en mobile — cf. @media) */
.article-section .articles .lead-p { font-size: 1.18rem; color: var(--secondary); line-height: 1.6; }
/* Bloc CTA éditorial inséré entre les chapitres — PHOTO en fond (image hero, atténuée) */
.article-section .cta-inline { display: flex; align-items: center; min-height: 152px; text-align: left; padding: 30px 38px; margin: 40px 0; background: linear-gradient(115deg, #14275f 0%, #1D3696 58%, #244aa6 100%); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.article-section .cta-inline::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 44%; background-image: var(--cta-bg, none); background-size: cover; background-position: center; opacity: .5; -webkit-mask-image: linear-gradient(to right, transparent, #000 72%); mask-image: linear-gradient(to right, transparent, #000 72%); pointer-events: none; }
.article-section .cta-inline__content { position: relative; z-index: 1; max-width: 75%; }
.article-section .cta-inline .cta-trust { position: absolute; right: 28px; bottom: 26px; z-index: 1; display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid rgba(255,255,255,.6); padding: 7px 14px; border-radius: 999px; margin: 0; box-shadow: 0 8px 22px -8px rgba(8,18,52,.4); transition: transform .18s ease, box-shadow .2s ease; cursor: pointer; }
.article-section .cta-inline a.cta-trust:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(8,18,52,.5); text-decoration: none; }
.article-section .cta-inline .cta-trust .cta-trust-g { display: inline-flex; width: 18px; height: 18px; }
.article-section .cta-inline .cta-trust .cta-trust-g svg { width: 18px; height: 18px; }
.article-section .cta-inline .cta-trust .stars { color: var(--gold); font-size: .9rem; letter-spacing: 1px; }
.article-section .cta-inline .cta-trust .cta-trust-txt { color: var(--secondary); font-family: var(--font-sub); font-weight: 600; font-size: .82rem; }
.article-section .cta-inline .cta-trust .cta-trust-txt strong { color: var(--primary); font-weight: 800; }
.article-section .cta-inline h3 { color: #fff; font-size: 1.5rem; line-height: 1.25; margin: 0 0 24px; }
.article-section .cta-inline p { color: rgba(255,255,255,.86); margin: 0 0 20px; }
.article-section .cta-inline .btn { background: #fff; color: var(--primary-2); }
.article-section .cta-inline .btn:hover { background: var(--accent); color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.btn--sm { padding: 11px 18px; font-size: .92rem; }
.article-section .cta-inline .btn--sm { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(226,36,26,.5); }
.article-section .cta-inline .btn--sm:hover { filter: brightness(1.07); background: var(--accent); color: #fff; }
.article-section .cta-inline .btn--sm.btn--soft { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); box-shadow: none; }
.article-section .cta-inline .btn--sm.btn--soft:hover { background: rgba(255,255,255,.24); filter: none; }
.article-section .cta-inline .btn--sm svg { flex: 0 0 auto; }
@media (max-width: 640px) {
  .article-section .articles article { padding: 30px; }
  .article-section .cta-inline { flex-direction: column; align-items: flex-start; min-height: 0; padding: 24px 22px; }
  .article-section .cta-inline::after { width: 100%; opacity: .9; z-index: 0; -webkit-mask-image: none; mask-image: none; }
  .article-section .cta-inline::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(18,33,82,.9) 0%, rgba(24,48,128,.84) 55%, rgba(28,58,150,.74) 100%); }
  .article-section .cta-inline .cta-trust { z-index: 2; }
  .article-section .cta-inline__content { max-width: 100%; order: 1; width: 100%; z-index: 2; }
  /* titre : zone à trois quarts (75 %) + équilibrage des lignes (évite le « ? » orphelin) */
  .article-section .cta-inline h3 { max-width: 90%; margin-bottom: 16px; font-size: 1.28rem; line-height: 1.25; text-wrap: pretty; }
  .article-section .cta-inline .cta-actions { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .article-section .cta-inline .cta-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; padding: 9px 10px; font-size: .9rem; gap: 6px; }
  .article-section .cta-inline .cta-actions .btn svg { width: 15px; height: 15px; }
  .article-section .cta-inline .cta-trust { position: static; order: 2; margin: 16px 0 0; padding: 5px 12px; gap: 7px; transform: none; }
  .article-section .cta-inline .cta-trust .cta-trust-txt { font-size: .76rem; }
  .article-section .cta-inline .cta-trust .stars { font-size: .82rem; }
  .article-section .articles .lead-p { font-size: 1.05rem; }
}

/* ═══════════ Fil d'Ariane (composant réutilisable, site entier) ═══════════ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-sub); font-size: .82rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--primary-2); text-decoration: none; }
.crumbs-sep { color: #c3ccdd; }
.crumbs-cur { color: var(--primary-2); font-weight: 700; }
.crumbs-bar { background: #fff; border-bottom: 1px solid var(--border); }
.crumbs-bar .wrap { padding-top: 13px; padding-bottom: 13px; }

/* Grand CTA bas de LP : deux boutons (devis plein + téléphone contour) */
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.cta-band .btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--primary-2); border-color: #fff; }

/* Auteur LP cliquable → page du partenaire */
a.ah-author { text-decoration: none; transition: color .15s ease; }
a.ah-author:hover strong { color: var(--primary-2); }
a.ah-author:hover img { box-shadow: 0 0 0 2px var(--primary-2); }

/* ═══════════ Système typographique — UNE SEULE SOURCE, pilotée par les tokens ═══════════
   « Titre 1/2/3/4 » = style d'écriture ; H1/H2/H3/H4 = balises. Par défaut h1→titre-1, etc.
   Ces règles lisent les VARIABLES générées depuis design_tokens.json (admin → page Styles →
   Typographie). Modifier « Titre 1..4 » dans l'admin change TOUS les titres du site. Les
   classes .titre-N permettent aussi d'appliquer un style à n'importe quelle balise.
   (Ce bloc, en fin de fichier, prime sur les tailles codées en dur du CSS de base.) */
.titre-1, .titre-2, .titre-3, .titre-4 { margin: 0 0 .45em; text-wrap: balance; }
h1, .titre-1 { font-family: var(--h1-family); font-size: clamp(calc(var(--h1-size) * .62), 5.4vw, var(--h1-size)); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
h2, .titre-2 { font-family: var(--h2-family); font-size: clamp(calc(var(--h2-size) * .68), 3.6vw, var(--h2-size)); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
h3, .titre-3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
h4, .titre-4 { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); }
/* Couleurs des classes .titre-N en usage autonome (sur les balises hN, la couleur vient du CSS de base) */
.titre-1 { color: var(--ink); }
.titre-2, .titre-3 { color: var(--primary); }
.titre-4 { color: var(--accent); }

/* ═══════════ Carrousel « Guides » (landing pages liées) — pages métier / métier×ville ═══════════ */
.lp-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 6px 0 18px; }
@media (max-width: 900px) { .lp-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease, box-shadow .2s ease; }
.lp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }
.lp-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-panel); }
.lp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.lp-card-cat { align-self: flex-start; background: var(--accent); color: #fff; font-family: var(--font-sub); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; padding: 4px 10px; border-radius: 999px; }
.lp-card-title { font-family: var(--font-title); font-weight: 800; color: var(--primary); font-size: 1.12rem; line-height: 1.25; }
.lp-card-more { margin-top: auto; color: var(--primary-2); font-family: var(--font-sub); font-weight: 700; font-size: .85rem; }
.lp-card:hover .lp-card-more { color: var(--accent); }
@media (max-width: 560px) { .lp-scroll { grid-template-columns: 1fr; } }

/* ═══════════ Tableaux de contenu : jamais de débordement du cadre, scroll horizontal interne ═══════════ */
/* min-width:0 sur la colonne d'articles → la grille ne s'étire pas pour absorber un tableau large
   (sinon le scroll ne se déclenche pas et le cadre déborde). */
.ensavoirplus-grid .articles { min-width: 0; }
.rich { overflow-wrap: break-word; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.2em 0; }
.table-scroll table { margin: 0; }

/* Carrousel guides : limite à 12, « Charger plus » révèle la suite */
.lp-card--hidden { display: none; }
.lp-more-wrap { text-align: center; margin-top: 22px; }
/* « Charger plus » : bouton texte ultra-discret qui se fond (plus léger que « Voir tous les guides ») */
.lp-more { background: none; border: 0; padding: 6px 10px; cursor: pointer; font-family: var(--font-sub); font-weight: 600; font-size: .9rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; transition: color .18s ease; }
.lp-more:hover { color: var(--primary-2); }
.lp-more .lp-more-ico { font-size: .85em; transition: transform .18s ease; }
.lp-more:hover .lp-more-ico { transform: translateY(2px); }

/* Encart « tarifs indicatifs » en bas des articles (LP & métier×ville) — ton info, non alarmant */
.price-note { display: flex; gap: 14px; align-items: flex-start; margin: 30px 0 6px; padding: 16px 20px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--primary-2); border-radius: var(--radius-sm); }
.price-note-ic { flex: 0 0 auto; color: var(--primary-2); display: inline-flex; margin-top: 1px; }
.price-note-ic svg { width: 22px; height: 22px; }
.price-note p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.price-note strong { color: var(--primary); }

/* ═══════════ Pages classiques (mentions légales, notre histoire, politique…) ═══════════ */
/* En-tête sobre */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding-block: clamp(30px, 4vw, 52px); }
.page-hero .wrap { max-width: 820px; }
.ph-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-sub); font-size: .82rem; color: var(--ink-soft); margin-bottom: 14px; }
.ph-breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.ph-breadcrumb a:hover { color: var(--primary-2); text-decoration: none; }
.ph-breadcrumb span { color: #c3ccdd; }
.ph-breadcrumb .ph-current { color: var(--primary-2); font-weight: 700; }
.page-hero h1 { color: var(--primary); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.015em; margin: 0; }
.ph-updated { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--ink-soft); font-family: var(--font-sub); font-size: .86rem; font-weight: 600; }
.ph-updated svg { width: 15px; height: 15px; color: var(--primary-2); }
/* Corps de page : texte centré pleine colonne */
.page-body { background: #fff; }
.page-body .wrap { max-width: 800px; }
.legal-doc { color: var(--secondary); font-size: 1.06rem; line-height: 1.75; }
.legal-doc .intro { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.7; padding-bottom: 6px; }
.legal-doc section { padding: 14px 0 6px; scroll-margin-top: 100px; }
.legal-doc h2 { color: var(--primary); font-size: 1.5rem; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.legal-doc section:first-of-type h2 { border-top: 0; padding-top: 0; }
.legal-doc h3 { color: var(--primary); font-size: 1.16rem; margin: 22px 0 8px; }
.legal-doc p { margin: 0 0 1em; }
.legal-doc ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.legal-doc li { margin-bottom: .5em; }
.legal-doc a { color: var(--primary-2); font-weight: 600; }
.legal-doc strong { color: var(--primary); }
/* Encadré coordonnées */
.legal-card { background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--primary-2); border-radius: var(--radius, 12px); padding: 22px 26px; margin: 18px 0 24px; }
.legal-card p { margin: 0 0 .35em; }
.legal-card p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .legal-doc { font-size: 1rem; }
  .legal-doc .intro { font-size: 1.06rem; }
  .legal-card { padding: 18px 20px; }
}

/* ═══════════ Visuel (450px) + map collés en UN SEUL bloc (pages partenaire) ═══════════ */
.hero-photomap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 44px -26px rgba(14,19,38,.4); background: #fff; }
.hero-img--map { position: relative; }
.hero-img--map img { width: 100%; height: 400px; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; display: block; }
.hero-photomap .hero-map { background: #fff; }
.hero-photomap .hero-map iframe { width: 100%; height: 210px; border: 0; display: block; filter: grayscale(.1); border-top: 1px solid var(--border); }
/* Fiche map design : pastille + nom + adresse + note/avis + flèche */
.hero-map-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; text-decoration: none; background: #fff; border-top: 1px solid var(--border); }
.hero-map-card:hover { background: var(--bg-soft); text-decoration: none; }
.hero-map-card .hmc-pin { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px -3px rgba(14,19,38,.25); display: grid; place-items: center; flex: 0 0 auto; }
.hero-map-card .hmc-pin svg { width: 22px; height: 22px; }
.hero-map-card .hmc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hero-map-card .hmc-name { font-family: var(--font-title); font-weight: 800; color: var(--primary); font-size: 1.04rem; line-height: 1.2; }
.hero-map-card .hmc-addr { color: var(--secondary); font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-map-card .hmc-rate { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); margin-top: 1px; }
.hero-map-card .hmc-rate .stars { color: var(--gold); letter-spacing: .5px; }
.hero-map-card .hmc-rate b { color: var(--primary); font-family: var(--font-sub); font-weight: 800; }
.hero-map-card .hmc-go { color: var(--primary-2); flex: 0 0 auto; }
.hero-map-card .hmc-go svg { width: 20px; height: 20px; }
.hero-map-card:hover .hmc-go { color: var(--accent); }
@media (max-width: 880px) { .hero-img--map img { height: 360px; } .hero-photomap .hero-map iframe { height: 180px; } }

/* Fil d'Ariane visible masqué en mobile (la hiérarchie reste dans le JSON-LD BreadcrumbList) */
@media (max-width: 640px) {
  .crumbs-bar, .ph-breadcrumb { display: none; }
}

/* ═══════════ Page CONTACT ═══════════ */
.page-hero .ph-lead { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; }
.contact-section .wrap { max-width: var(--maxw); }
.contact-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 40px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.ci-message { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); color: #fff; border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow); }
.ci-message .ci-badge { display: inline-block; background: rgba(255,255,255,.16); color: #fff; font-family: var(--font-sub); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }
.ci-message strong { display: block; color: #fff; font-family: var(--font-title); font-size: 1.5rem; line-height: 1.15; }
.ci-message p { margin: 6px 0 0; color: rgba(255,255,255,.9); font-size: 1rem; }
.ci-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ci-list li { display: flex; align-items: center; gap: 14px; padding: 13px 8px; border-bottom: 1px solid var(--border); }
.ci-list li:last-child { border-bottom: 0; }
.ci-ico { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary-2); }
.ci-ico svg { width: 20px; height: 20px; }
.ci-ico--wa { background: #25D366; border-color: #25D366; color: #fff; }
.ci-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ci-txt .ci-label { font-family: var(--font-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--ink-soft); }
.ci-txt a, .ci-txt span:not(.ci-label) { color: var(--secondary); font-weight: 600; font-size: 1rem; text-decoration: none; word-break: break-word; }
.ci-txt a:hover { color: var(--primary-2); }
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 28px 30px; box-shadow: var(--shadow-sm); min-width: 0; }
.cf-head { margin-bottom: 16px; }
.cf-head h2 { color: var(--primary); font-size: 1.6rem; margin: 0 0 4px; }
.cf-head p { color: var(--ink-soft); margin: 0; }
.jotform-embed { min-width: 0; }
.jotform-embed iframe, .jotform-embed form { max-width: 100% !important; width: 100% !important; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Bouton « Contactez-nous » de la navbar : sans ombre (desktop + mobile) */
.header-cta, .header-cta:hover { box-shadow: none; }

/* ═══════════ LP — version mobile ═══════════ */
@media (max-width: 640px) {
  /* Ordre : badge rouge → gros titre → image cover → description → méta */
  .article-hero .ah-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }   /* tout aligné à gauche sur mobile : items pleine largeur, contenu calé à gauche (le desktop garde align-items:center pour la grille 2 colonnes) */
  .article-hero .ah-text { display: contents; }
  .article-hero .ah-cat { order: 1; align-self: flex-start; max-width: 100%; text-align: left; white-space: normal; }
  .article-hero .ah-title { order: 2; margin: 0; }
  .article-hero .ah-figure { order: 3; max-width: 100%; margin: 0; }
  .article-hero .ah-figure img { aspect-ratio: auto; height: auto; }   /* mobile : format naturel, pas de carré forcé */
  /* Mobile : bloc avis juste AU-DESSUS du paragraphe (après l'image), SANS trait, aligné à gauche */
  .article-hero .ah-trust { order: 4; margin: 4px 0 10px; padding-top: 0; border-top: 0; }
  .article-hero .ah-trust .pc-proof { justify-content: flex-start; }
  .article-hero .ah-excerpt { order: 5; margin: 0; max-width: none; }
  .article-hero .ah-meta { order: 6; margin: 6px 0 0; }
}

/* ═══════════ Page CONTACT — haut « contact-split » ═══════════ */
.contact-split { background: linear-gradient(165deg, #EEF3FC 0%, #F6F9FE 55%, #FFFFFF 100%); border-bottom: 1px solid var(--border); padding-block: clamp(34px, 4vw, 56px); }
.contact-split .cs-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; grid-template-rows: auto 1fr; gap: clamp(20px, 2.5vw, 32px) clamp(28px, 4vw, 52px); align-items: start; }
.cs-intro { grid-column: 1; grid-row: 1; }
.cs-details { grid-column: 1; grid-row: 2; }
.cs-formcard { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.ch-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-family: var(--font-sub); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; padding: 7px 15px; border-radius: 999px; }
.cs-intro h1 { color: var(--primary); font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.015em; margin: 18px 0 0; }
.cs-lead { color: var(--ink-soft); font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.62; margin: 16px 0 0; max-width: 46ch; }
.cs-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.cs-stat { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease; }
.cs-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cs-stat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.cs-stat-ico svg { width: 22px; height: 22px; }
.cs-ico-gold { background: #FBF3DC; color: #C77F00; }
.cs-ico-red { background: #FDEAE8; color: var(--accent); }
.cs-ico-green { background: #E4F6EC; color: var(--green); }
.cs-ico-blue { background: var(--bg-panel); color: var(--primary-2); }
.cs-stat-txt { display: flex; flex-direction: column; line-height: 1.15; }
.cs-stat-txt b { font-family: var(--font-sub); font-weight: 800; color: var(--primary); font-size: 1.32rem; }
.cs-stat-txt small { color: var(--ink-soft); font-size: .82rem; }
.cs-callbox { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 14px 22px 14px 14px; background: var(--primary); border-radius: var(--radius-lg); box-shadow: 0 16px 30px -14px rgba(20,39,95,.6); transition: transform .18s ease, box-shadow .2s ease; text-decoration: none; }
.cs-callbox:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(20,39,95,.7); text-decoration: none; }
.cs-callico { width: 48px; height: 48px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cs-callico svg { width: 23px; height: 23px; }
.cs-calltxt { display: flex; flex-direction: column; line-height: 1.2; }
.cs-calltxt small { color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 600; }
.cs-calltxt strong { color: #fff; font-family: var(--font-sub); font-weight: 800; font-size: 1.4rem; }
.cs-social { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.cs-avatars { display: flex; }
.cs-avatars img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -12px; box-shadow: var(--shadow-sm); }
.cs-avatars img:first-child { margin-left: 0; }
.cs-socialtxt { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; color: var(--ink-soft); }
.cs-socialtxt .stars { color: var(--gold); font-size: .98rem; letter-spacing: .5px; }
.cs-socialtxt b { color: var(--primary); }
.cs-coords { display: flex; flex-direction: column; gap: 4px; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--border); }
.cs-coord { display: flex; align-items: center; gap: 13px; padding: 8px 0; text-decoration: none; }
a.cs-coord:hover { text-decoration: none; }
.cs-coord-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-panel); color: var(--primary-2); display: grid; place-items: center; flex: 0 0 auto; }
.cs-coord-ico svg { width: 19px; height: 19px; }
.cs-coord-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cs-coord-label { font-family: var(--font-sub); font-weight: 800; color: var(--primary); font-size: .9rem; }
.cs-coord-txt span:last-child { color: var(--ink-soft); font-size: .92rem; }
a.cs-coord:hover .cs-coord-ico { background: var(--accent); color: #fff; }
a.cs-coord:hover .cs-coord-txt span:last-child { color: var(--accent); }
.cs-formcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -28px rgba(14,19,38,.4); padding: clamp(24px, 3vw, 36px); min-width: 0; }
.cs-formcard h2 { color: var(--primary); font-size: 1.5rem; margin: 0 0 6px; }
.cs-formcard .cf-sub { color: var(--ink-soft); margin: 0 0 22px; }
.cs-formcard .jotform-embed { min-width: 0; }
.cs-formcard .jotform-embed iframe, .cs-formcard .jotform-embed form { max-width: 100% !important; width: 100% !important; }
@media (max-width: 860px) {
  .contact-split .cs-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .cs-intro { grid-column: 1; grid-row: auto; order: 1; }
  .cs-formcard { grid-column: 1; grid-row: auto; order: 2; }
  .cs-details { grid-column: 1; grid-row: auto; order: 3; margin-top: 4px; }
}
@media (max-width: 460px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cs-stat { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 14px; }
}

/* ═══════════ Page « Nos guides » — barre de filtres ═══════════ */
.guides-page .guides-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; }
.guides-filters .g-input { font-family: var(--font-sub); font-size: .95rem; padding: 11px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--secondary); box-shadow: var(--shadow-sm); }
.guides-filters #g-search { flex: 1 1 280px; min-width: 200px; }
.guides-filters select.g-input { cursor: pointer; min-width: 180px; }
.guides-filters .g-input:focus { outline: none; border-color: var(--primary-2); }
.guides-filters .g-count { margin-left: auto; color: var(--ink-soft); font-family: var(--font-sub); font-weight: 700; font-size: .9rem; }
.guides-page .g-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 1.05rem; }
.guides-page .g-empty a { color: var(--primary-2); font-weight: 700; }
@media (max-width: 640px) { .guides-filters .g-count { margin-left: 0; width: 100%; } }

/* « Nos guides » : grille 3 colonnes + 2 pastilles (métier / ville-département) */
.guides-page #g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .guides-page #g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .guides-page #g-grid { grid-template-columns: 1fr; } }
.lp-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-card-cat--loc { background: rgba(20,39,95,.07); color: var(--primary-2); }

/* Bouton « Voir tous les guides » (sections guides, toutes pages) — discret, aéré, classe */
.guides-all-wrap { text-align: center; margin-top: 36px; }
.guides-all { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sub); font-weight: 700; font-size: .92rem; letter-spacing: .03em; color: var(--primary-2); text-decoration: none; padding: 13px 28px; border: 1px solid var(--border); border-radius: 999px; background: #fff; transition: gap .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.guides-all:hover { border-color: var(--primary-2); color: var(--primary); box-shadow: var(--shadow-sm); gap: 13px; text-decoration: none; }
.guides-all .ga-arrow { transition: transform .2s ease; }
.guides-all:hover .ga-arrow { transform: translateX(4px); }

/* Crédit footer cliquable (DOV Webmaster) */
.footer-credit { color: #cdd5ef; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; margin-left: 5px; }
.footer-credit:hover { text-decoration: underline; }

/* Séparateurs verticaux du crédit footer (Création du site | SEO | GEO | Google) */
.footer-credit-line .cr-sep { display: inline-block; width: 1px; height: .85em; background: currentColor; opacity: .4; margin: 0 6px; vertical-align: -.05em; }