/*
Theme Name: Saintity Occitanie
Theme URI: https://saintityoccitanie.fr
Author: Saintity Occitanie
Author URI: https://saintityoccitanie.fr
Description: Thème WordPress sur-mesure ultra-léger pour Saintity Occitanie
Version: 2.0.0
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saintity
Update URI: false
Tags: business, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. TOKENS & RESET
   ========================================================================= */
:root {
  --bg: #F4EDDF;         /* Crème */
  --surface: #FFFBF3;    /* Surface claire */
  --surface-2: #FAFAF7;  /* Surface secondaire / badges clairs */
  --ink: #2A1C12;        /* Espresso / texte */
  --muted: #6b5b48;      /* Texte secondaire */
  --gold: #C49F3C;       /* Doré (accent) */
  --goldsoft: #DBC58A;   /* Doré clair */
  --dark: #2A1C12;       /* Fond sombre */
  --darksurface: #352318;
  --onDark: #F4EDDF;     /* Texte sur fond sombre */
  --line: #E6DAC4;       /* Filets / bordures */

  --maxw: 1320px;
  --pad: clamp(18px, 5vw, 40px);
  --radius: 14px;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  text-rendering: optimizeLegibility;
}

::selection { background: #95792D; color: #FAF4E9; }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.nobr { white-space: nowrap; }
.em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); }

/* Accessibilité : lien d'évitement */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dark); color: var(--onDark);
  padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Utilitaires de mise en page */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold);
}
.eyebrow--onDark { color: var(--goldsoft); }
.stars { color: var(--goldsoft); letter-spacing: 2px; }

/* =========================================================================
   2. BOUTONS / CTA
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2;
  padding: 13px 22px; border-radius: 12px; border: 1.5px solid transparent;
  white-space: nowrap; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--goldsoft); color: #1a150e; }
.btn--gold:hover { background: #755F24; color: #FFF8EB; } /* survol assombri : 5,8:1, AA sur du texte 15px gras */
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: #3a2718; }
.btn--outline { background: transparent; border-color: var(--goldsoft); color: var(--onDark); }
.btn--outline:hover { background: color-mix(in srgb, var(--goldsoft) 16%, transparent); }
.btn--outline-ink { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: var(--bg); }
.btn--sm { padding: 11px 18px; font-size: 14px; border-radius: 10px; }
/* Icône inline (ex : téléphone du CTA final) : alignée, avec un léger « ring » au survol. */
.btn__ico { flex: none; display: block; }
.btn:hover .btn__ico { animation: btn-ring .6s ease; transform-origin: 50% 60%; }
@keyframes btn-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-13deg); }
  30% { transform: rotate(11deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__ico, .header-phone:hover .btn__ico { animation: none; }
}

/* =========================================================================
   3. HEADER
   ========================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: transparent; border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(42, 28, 18, .08);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body.admin-bar .site-header {
  top: 36px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 48px;
  }
}
/* Le voile flouté vit sur un pseudo-élément, pas sur le header : un
   backdrop-filter porté par .site-header en ferait un « backdrop root », et le
   mega-menu, son descendant, ne flouterait plus que l'intérieur du header —
   c'est-à-dire rien.
   Style standard appliqué globalement sur toutes les pages : fond flouté, bordure
   fine et ombre légère (identique au header défilé de l'accueil). */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  opacity: 1; transition: opacity .3s ease;
}
/* Accueil : sur le hero vidéo en tête de page, le header flotte transparent sans bordure ni ombre.
   Dès le défilement (.is-scrolled), il reprend le style standard complet. */
.home .site-header:not(.is-scrolled) {
  border-bottom-color: transparent;
  box-shadow: none;
}
.home .site-header:not(.is-scrolled)::before {
  opacity: 0;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled {
  border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(42, 28, 18, .08);
}
/* Effet premium : le header glisse hors de l'écran en descendant. */
.site-header.is-hidden { transform: translateY(-100%); }

/* Header fixe : décalage des pages internes (la home a un hero plein écran) + ancrage
   sous le header lors de la navigation par ancres, avec défilement fluide. */
html { scroll-behavior: smooth; scroll-padding-top: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body:not(.home) { padding-top: 74px; }
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(12px, 3.4vw, 15px) var(--pad);
}
.brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 5vw, 22px); letter-spacing: -.02em;
  white-space: nowrap; flex: none; line-height: 1;
}
.brand span { color: var(--gold); }
/* Accueil : le logo du hero porte déjà le nom, le header le tait tant qu'on est
   en tête de page ; il le reprend dès que le header prend son fond (défilement).
   Le nom du menu mobile vit hors du header : il n'est pas concerné. */
.home .site-header:not(.is-scrolled) .brand {
  opacity: 0; pointer-events: none;
}
.home .site-header .brand { transition: opacity .3s ease; }

/* Navigation principale — modèle « pilule » : le survol pose un fond arrondi
   sous l'entrée au lieu de virer le texte à l'or, illisible quand le header
   flotte transparent sur la vidéo du hero. Le voile teinté + flou tient sur les
   deux fonds : crème une fois défilé, image en tête de page. */
.main-nav { display: flex; gap: 2px; font-size: 14.5px; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0; }
.main-nav__item { position: relative; display: flex; align-items: center; cursor: pointer; }
.main-nav__link, .header-cta { white-space: nowrap; }
.main-nav__link {
  display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px;
  color: inherit; position: relative; z-index: 1; cursor: pointer;
  transition: background-color .22s ease, color .22s ease;
}
.main-nav__item--has-panel .main-nav__link { padding-right: 6px; }
/* Le chevron partage la pilule du libellé : les deux forment une seule surface. */
.main-nav__chevron {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px 9px 4px; margin: 0; border: 0; background: transparent;
  border-radius: 999px; cursor: pointer; color: inherit; position: relative; z-index: 1;
  transition: background-color .22s ease;
}
.main-nav__caret {
  width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
  pointer-events: none;
}
/* Une seule pilule sous le couple libellé + chevron, posée en fond de l'entrée :
   survoler l'un ou l'autre l'allume, sans double arrondi au milieu. */
.main-nav__item::before,
.header-phone::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  /* Liseré : la couleur du verre, à peine plus dense — une séparation fine, pas un cadre. */
  border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 6px 18px rgba(42, 28, 18, .10);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  opacity: 0; transform: scale(.94);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
}
.main-nav__item:hover::before,
.main-nav__item:has(:focus-visible)::before,
.main-nav__item.is-open::before,
.header-phone:hover::before,
.header-phone:focus-visible::before { opacity: 1; transform: scale(1); }
.main-nav__item.is-open .main-nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }
/* En tête de page le header est transparent sur la vidéo : la pilule prend le
   verre du mega-menu, au mot près — même aplat, même flou, même liseré. */
.home .site-header:not(.is-scrolled) .main-nav__item::before,
.home .site-header:not(.is-scrolled) .header-phone::before {
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  border-color: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 8px 22px rgba(42, 28, 18, .16);
}
.main-nav__link:focus-visible,
.main-nav__chevron:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Panneau de services (mega-menu). Il reste dans le flux du DOM — jamais
   [hidden] — pour que les liens de silo restent lisibles par les robots. */
.nav-panel {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5;
  min-width: 320px; padding: 18px 22px 22px;
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  /* Aplat translucide signature (identique aux pilules du header) :
     le flou porte la profondeur sans jamais alourdir le verre. */
  backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(42, 28, 18, .18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
  user-select: none;
  -webkit-user-select: none;
}
.main-nav__item.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* Pont invisible entre l'entrée et le panneau : strictement contenu dans la largeur
   de l'item actif pour ne jamais empiéter sur les entrées adjacentes. */
.main-nav__item.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; z-index: 4; }

/* En-tête du sous-menu (« Découvrir l'offre… ») :
   Pilule premium structurée qui sert de point d'entrée principal vers le silo.
   Au repos : fond subtilement teinté, bordure fine, texte et flèche espresso très nets.
   Au survol / focus : passe en fond espresso profond (--ink) avec texte crème clair (--onDark)
   et flèche dorée lumineuse qui glisse vers la droite — contraste parfait (AAA > 13:1). */
.nav-panel__lead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 16px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3;
  color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 2px 6px rgba(42, 28, 18, .04);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav-panel__lead,
.nav-panel__lead *,
.nav-panel__lead-label,
.nav-panel__lead-arrow {
  cursor: pointer;
}
.nav-panel__lead-label { display: inline-block; }
.nav-panel__lead-arrow,
.nav-panel__lead span[aria-hidden="true"] {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--ink);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), color .22s ease;
}
.nav-panel__lead:hover,
.nav-panel__lead:focus-visible {
  background: var(--dark, #2A1C12); color: var(--onDark, #F4EDDF); border-color: var(--dark, #2A1C12);
  box-shadow: 0 6px 20px rgba(42, 28, 18, .18);
}
.nav-panel__lead:hover .nav-panel__lead-arrow,
.nav-panel__lead:hover span[aria-hidden="true"],
.nav-panel__lead:focus-visible .nav-panel__lead-arrow,
.nav-panel__lead:focus-visible span[aria-hidden="true"] {
  color: var(--goldsoft); transform: translateX(4px);
}
.nav-panel__lead:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-panel__lead:active { box-shadow: 0 2px 8px rgba(42, 28, 18, .12); }

.nav-panel__cols { display: flex; gap: 38px; }
.nav-panel__title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent); margin: 0 0 8px; white-space: nowrap;
  cursor: default;
}
.nav-panel__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-panel__col li { margin: 0; padding: 0; }
.nav-panel__col a {
  display: block; font-size: 14.5px; font-weight: 500; white-space: nowrap;
  padding: 7px 10px; margin: 0 -10px; border-radius: 8px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.nav-panel__col a,
.nav-panel__col a * {
  cursor: pointer;
}
.nav-panel__col a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-panel__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .main-nav__item::before, .nav-panel, .main-nav__caret, .nav-panel__lead, .nav-panel__lead-arrow { transition-duration: .01ms; transform: none !important; }
}

/* Libellé réservé aux lecteurs d'écran. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.header-actions { display: flex; align-items: center; gap: 14px; }
/* Même pilule que les entrées de menu (::before mutualisé plus haut) : le
   téléphone était le seul lien du header à rester nu au survol. */
.header-phone {
  position: relative; font-weight: 700; font-size: 14.5px;
  display: inline-grid; place-items: center; padding: 9px 14px; border-radius: 999px;
}
.header-phone > * { position: relative; z-index: 1; }
/* Numéro et « Appeler » partagent la même cellule : la pilule garde la largeur
   du plus large des deux, donc rien ne bouge dans la barre au survol. */
.header-phone__num,
.header-phone__call {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: opacity .18s ease;
}
.header-phone__call { opacity: 0; }
.header-phone:hover .header-phone__num,
.header-phone:focus-visible .header-phone__num { opacity: 0; }
.header-phone:hover .header-phone__call,
.header-phone:focus-visible .header-phone__call { opacity: 1; }
.header-phone:hover .btn__ico { animation: btn-ring .6s ease; transform-origin: 50% 60%; }
.header-phone:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* CTA header : pilule pleine espresso (même variante que le CTA primaire du hero).
   Le contour transparent se noyait dans la barre, surtout sur fond flouté. */
.header-cta {
  display: inline-flex; align-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 14px; line-height: 1;
  background: var(--ink); color: var(--bg);
  padding: 12px 22px; border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 8px 20px rgba(42, 28, 18, .18);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Assombrissement relatif : tient aussi en silo pro, où --ink et --bg s'inversent. */
.header-cta:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  transform: translateY(-1px); box-shadow: 0 10px 26px rgba(42, 28, 18, .24);
}

/* Hamburger */
.hamburger {
  display: none; width: 46px; height: 46px; border: 0; background: transparent;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  cursor: pointer; padding: 0;
}
/* Lignes fines symétriques — sobres, dans la DA (espresso → or au survol). */
.hamburger span {
  display: block; width: 26px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: background .25s ease;
}
.hamburger:hover span { background: var(--gold); }

/* =========================================================================
   4. MENU MOBILE (drawer)
   ========================================================================= */
.mobile-menu { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu__scrim {
  position: absolute; inset: 0; background: rgba(18, 14, 9, .55);
  opacity: 0; transition: opacity .4s ease; backdrop-filter: blur(2px);
}
.mobile-menu.is-open .mobile-menu__scrim { opacity: 1; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(87vw, 360px); background: var(--dark); color: var(--onDark);
  transform: translateX(100%); transition: transform .5s cubic-bezier(.16, .84, .3, 1);
  display: flex; flex-direction: column;
  padding: 20px clamp(22px, 7vw, 32px) calc(24px + env(safe-area-inset-bottom));
  box-shadow: -30px 0 70px rgba(0, 0, 0, .45); overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.mobile-menu__close { width: 40px; height: 40px; background: rgba(255,255,255,.08); border-radius: 10px; border: 0; color: var(--onDark); font-size: 18px; }
.mobile-menu__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--goldsoft); margin-bottom: 10px; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -.02em;
}
.mobile-menu__nav a span { color: var(--goldsoft); }
.mobile-menu__nav a > span:first-child { color: inherit; }

/* Silos à services : accordéon fluide avec transition animée */
.mobile-menu__group {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.mobile-menu__group > summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 16px 0; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -.02em;
  list-style: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.mobile-menu__group > summary::-webkit-details-marker,
.mobile-menu__group > summary::marker { display: none; }

/* Chevron doré qui pivote avec fluidité */
.mobile-menu__caret {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid var(--goldsoft); border-bottom: 2px solid var(--goldsoft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s cubic-bezier(.16, .84, .3, 1);
  margin-right: 4px; flex: none;
}
.mobile-menu__group.is-open > summary .mobile-menu__caret {
  transform: rotate(-135deg) translateY(-2px);
}

/* Corps déroulant animé */
.mobile-menu__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s cubic-bezier(.16, .84, .3, 1), opacity .28s ease;
}
.mobile-menu__group.is-open .mobile-menu__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.mobile-menu__body-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

/* Liens internes du sous-menu mobile */
.mobile-menu__lead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; margin: 4px 0 10px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.01em; color: var(--onDark);
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu__lead:active {
  background: rgba(255, 255, 255, .12);
  transform: scale(.99);
}
.mobile-menu__lead span { color: inherit; }
.mobile-menu__lead .mobile-menu__arrow { color: var(--goldsoft); }

.mobile-menu__grouptitle {
  margin: 12px 0 4px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--onDark) 50%, transparent);
}
.mobile-menu__sublink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 10px 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -.01em; color: rgba(244, 237, 223, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: color .2s ease, padding-left .2s ease;
}
.mobile-menu__sublink span { color: inherit; }
.mobile-menu__sublink .mobile-menu__arrow { color: var(--goldsoft); font-size: 15px; }
.mobile-menu__sublink:active {
  color: var(--goldsoft);
  padding-left: 14px;
}
.mobile-menu__cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu__socials { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.mobile-menu__foot { margin-top: auto; padding-top: 26px; text-align: center; font-size: 12px; color: color-mix(in srgb, var(--onDark) 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__caret, .mobile-menu__body { transition-duration: .01ms !important; transform: none !important; }
}

/* =========================================================================
   5. HERO
   ========================================================================= */
/* Hero cinématique clair — piste de 270vh + étage épinglé + parallaxe.
   La progression du scroll (0 → 1) est écrite dans --hp par app.js et pilote
   l'agrandissement/dérive des couches et l'estompage doux du contenu. */
/* --hero-fade : l'estompage de fin de piste (1 → 0 sur le dernier quart), partagé
   par le contenu et le halo pour qu'ils s'effacent d'un seul geste. */
.hero {
  --hp: 0; --hero-shift: -2vh;
  --hero-fade: calc(1 - max(0, (var(--hp) - .72)) * 3.6);
  position: relative; background: var(--bg); color: var(--ink); height: 160vh;
}
.hero__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Couche de rayures diagonales (texture signature), agrandie + dérive verticale.
   Période large et écart de tons resserré : les diagonales fines moirent sur
   écran dense et concurrencent le texte. */
.hero__bg {
  position: absolute; inset: -14%; pointer-events: none;
  background: repeating-linear-gradient(135deg, #F8F3E6 0 34px, #EFE8D9 34px 68px);
  transform: scale(calc(1.12 + var(--hp) * .12)) translateY(calc(var(--hp) * -8%));
  transform-origin: 50% 40%; will-change: transform;
}
/* Photo de fond optionnelle (Personnaliser → Page d'accueil) : l'URL arrive en
   style inline sur la div, ici le cadrage + un voile clair pour que le texte
   ink reste lisible par-dessus. */
.hero__bg--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero__bg--photo::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
}
/* Vidéo d'ambiance (paysage) posée par-dessus les rayures : `cover` la recadre
   au centre, donc le portrait mobile garde le sujet. Le voile crème est porté
   par le conteneur — un ::after sur <video> (élément remplacé) ne rendrait pas.
   Le fond du conteneur est le poster : il tient le cadre avant lecture. */
.hero__video {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(calc(1 + var(--hp) * .08)); transform-origin: 50% 40%; will-change: transform;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Voile concentré sur la colonne de texte au lieu d'un aplat sur toute l'image :
   le titre garde son contraste, mais les bords, les angles et le premier plan
   laissent enfin voir la vidéo. La bande haute reste teintée pour le header. */
.hero__video::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(62% 52% at 50% 46%,
      color-mix(in srgb, var(--bg) 72%, transparent) 0%,
      color-mix(in srgb, var(--bg) 58%, transparent) 42%,
      color-mix(in srgb, var(--bg) 22%, transparent) 74%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 40%, transparent) 0%,
      transparent 22% 84%,
      color-mix(in srgb, var(--bg) 18%, transparent) 100%);
}
/* Halo lumineux central, léger contre-mouvement pour la profondeur. Resserré et
   adouci : à pleine opacité il délavait tout le bas du cadre. */
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 38% at 50% 44%, color-mix(in srgb, #FFFBF3 62%, transparent) 0%, color-mix(in srgb, #FFFBF3 26%, transparent) 45%, transparent 74%);
  transform: translateY(calc(var(--hp) * 10%)) scale(calc(1 + var(--hp) * .06));
  opacity: var(--hero-fade); will-change: transform, opacity;
}
/* Ombrage discret haut/bas pour ancrer le header et la transition. */
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(42,28,18,.05), transparent 18% 82%, rgba(42,28,18,.06));
}
.hero__inner {
  position: relative; z-index: 5; text-align: center; max-width: 900px; padding: 0 24px;
  transform: translateY(calc(var(--hero-shift) + var(--hp) * -30px));
  opacity: var(--hero-fade); will-change: transform, opacity;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 26px;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: ""; display: block; width: clamp(22px, 6vw, 60px); height: 1px; background: currentColor;
  opacity: .55; transform: scaleX(0); transform-origin: center;
  animation: ruleGrow .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
/* Logo (PNG transparent) en tête du hero, à la place de la sur-titre texte. */
.hero__logo {
  display: block; margin: 0 auto 16px; width: clamp(128px, 13vw, 190px); height: auto;
}
.hero h1 { font-size: clamp(36px, 6vw, 92px); line-height: 1; letter-spacing: -.035em; margin: 0 0 20px; color: var(--ink); text-wrap: balance; }
.hero h1 .em { color: var(--gold); }
/* Un cran plus sombre que --muted : le sous-titre passe sur la texture rayée. */
.hero__sub { font-size: clamp(16px, 2.3vw, 19px); line-height: 1.55; color: #5C4C39; margin: 0 auto; max-width: 540px; }
.hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
/* Le doré reste un accent, pas une surface : sur crème il n'accepte
   proprement ni texte blanc (3,3:1) ni texte sombre (aspect moutarde).
   Le CTA primaire garde l'encre, l'accent passe par la flèche (8,9:1). */
.btn--ink .btn__arrow { color: var(--goldsoft); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.btn--ink:hover .btn__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn--ink:hover .btn__arrow { transform: none; } }
.hero__scroll {
  position: absolute; bottom: clamp(18px, 3.5vh, 40px); left: 0; right: 0; z-index: 5;
  text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; animation: floaty 2.6s ease-in-out infinite;
  /* Le repère tombe en bas du cadre, là où le voile crème n'est plus qu'à 18 % :
     un gris atténué à 70 % d'opacité y disparaissait dans l'image. Couleur de
     texte pleine + halo dans la teinte du fond, qui tient sur n'importe quelle
     frame — et s'inverse tout seul en silo pro, où --ink et --bg s'échangent. */
  color: var(--ink); font-weight: 600;
  text-shadow:
    0 1px 3px color-mix(in srgb, var(--bg) 92%, transparent),
    0 0 12px color-mix(in srgb, var(--bg) 78%, transparent);
}
@keyframes ruleGrow { to { transform: scaleX(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mouvement réduit : on effondre la piste en un hero statique plein écran. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; height: auto; min-height: 92vh; }
  .hero__bg { transform: scale(1.06); inset: 0; }
  /* On coupe la vidéo : le poster (fond du conteneur) reste, image fixe. */
  .hero__video { transform: none; }
  .hero__video video { display: none; }
  .hero__glow { transform: none; opacity: 1; }
  .hero__inner { transform: translateY(var(--hero-shift)); opacity: 1; }
  .hero__eyebrow::before, .hero__eyebrow::after { animation: none; transform: scaleX(1); }
  .hero__scroll { animation: none; }
}
@media (max-width: 759px) {
  .hero { height: 140vh; --hero-shift: 0vh; }
  .hero__inner { transform: translateY(calc(var(--hero-shift) + var(--hp) * -22px)); }
  .hero__logo { width: 128px; margin-bottom: 14px; }
  /* Portrait : la vidéo paysage est agrandie ~1,7x et le texte couvre presque
     toute la largeur — voile un cran plus dense pour garder le contraste. */
  .hero__video::after {
    background: radial-gradient(94% 56% at 50% 48%,
      color-mix(in srgb, var(--bg) 78%, transparent) 0%,
      color-mix(in srgb, var(--bg) 64%, transparent) 46%,
      color-mix(in srgb, var(--bg) 32%, transparent) 82%,
      color-mix(in srgb, var(--bg) 20%, transparent) 100%);
  }
  .hero__ctas .btn { width: 100%; } /* deux CTA empilés, pas de veuve à moitié large */
}

/* Bandeau réassurance sous le hero */
.ribbon { background: var(--dark); color: var(--onDark); }
.ribbon__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 17px var(--pad);
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap; font-size: clamp(12px, 2.4vw, 14px);
}
.ribbon strong { color: var(--goldsoft); font-weight: 700; }
.ribbon .sep { opacity: .4; }
.ribbon span { opacity: .85; }

/* =========================================================================
   6. SECTIONS GÉNÉRIQUES
   ========================================================================= */
.section { padding: clamp(48px, 7vw, 80px) 0; }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); color: var(--onDark); }
.section__head { max-width: 720px; margin-bottom: clamp(30px, 5vw, 46px); }
.section__head h2 { font-size: clamp(28px, 5vw, 44px); margin-top: 14px; line-height: 1.05; }
.section__lead { color: var(--muted); font-size: clamp(15px, 2vw, 18px); margin: 16px 0 0; max-width: 560px; }
.section--dark .section__lead { color: color-mix(in srgb, var(--onDark) 78%, transparent); }

/* Reveal au scroll — apparition douce (translation + léger fondu), easing premium.
   Les enfants de grille apparaissent en cascade pour un rythme haut de gamme. */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.services-grid > [data-reveal]:nth-child(2) { transition-delay: .09s; }
.services-grid > [data-reveal]:nth-child(3) { transition-delay: .18s; }
.services-grid > [data-reveal]:nth-child(4) { transition-delay: .27s; }
.services-grid > [data-reveal]:nth-child(5) { transition-delay: .09s; }
.services-grid > [data-reveal]:nth-child(6) { transition-delay: .18s; }
.services-grid > [data-reveal]:nth-child(7) { transition-delay: .27s; }
.services-grid > [data-reveal]:nth-child(8) { transition-delay: .36s; }
.cta-final [data-reveal]:nth-child(2) { transition-delay: .08s; }
.cta-final [data-reveal]:nth-child(3) { transition-delay: .16s; }
.cta-final [data-reveal]:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   7. AVIS (marquee)
   ========================================================================= */
/* Section resserrée : le marquee est court, on évite le vide au-dessus/sous les cartes. */
#avis { padding-block: clamp(44px, 6vw, 72px); }
.reviews__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.reviews__note { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.reviews__note .stars { font-size: 16px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 92s linear infinite; }
.marquee__dup { display: contents; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Avis : le défilement passe du CSS au JS (app.js) une fois la classe posée —
   le visiteur peut alors dérouler les avis lui-même (molette, doigt, glisser). */
.marquee--drag.is-scrollable {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.marquee--drag.is-scrollable .marquee__track {
  animation: none;
  will-change: transform;
}
.marquee--drag.is-grabbing { cursor: grabbing; }
.marquee--drag:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__dup, .partner--dup { display: none; }
}
.review-card {
  flex: 0 0 auto; width: min(420px, 85vw);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.review-card .stars {
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 1;
}
.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2, #FAFAF7) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.85;
  line-height: 1;
  transition: opacity .2s cubic-bezier(.22, .61, .36, 1),
              transform .2s cubic-bezier(.22, .61, .36, 1),
              background-color .2s ease,
              border-color .2s ease,
              box-shadow .2s ease,
              color .2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.review-card__source:hover,
.review-card__source:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  color: var(--ink);
  background: #FFFFFF;
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
  box-shadow: 0 2px 8px rgba(34, 22, 14, 0.08);
  outline: none;
}
.review-card__source--static {
  cursor: default;
}
.review-card__source--static:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-2, #FAFAF7) 80%, transparent);
  border-color: color-mix(in srgb, var(--line) 45%, transparent);
  color: var(--muted);
  opacity: 0.85;
}
.review-card__source-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
}
.review-card__source-name {
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.review-card blockquote { margin: 0; }
.review-card p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink); }
/* margin-top auto : signature et date collées au bas de la carte, quelle que soit la longueur de l'avis. */
.review-card figcaption { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review-card cite { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }
/* Date de la prestation : obligation d'information (art. D. 111-17 code de la consommation). */
.review-card__date { font-size: 12px; color: var(--muted); opacity: .75; white-space: nowrap; }

/* =========================================================================
   8. SPLIT PLEIN ÉCRAN (Particulier / Professionnel)
   Deux moitiés bord à bord, l'une claire l'autre sombre, type géant, badge « ou ».
   ========================================================================= */
.split-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.split-hero__half {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  padding: clamp(32px, 6vw, 92px);
  cursor: pointer; text-decoration: none; color: inherit;
}
/* Calque de fond photo (l'« asset ») — zoome doucement au survol de la moitié.
   Le voile teinté par-dessus garde le contraste du texte et l'identité clair/sombre ;
   il s'allège au survol pour laisser respirer la photo. */
.split-hero__half::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  transform: scale(1); transform-origin: center;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.split-hero__half--light::before {
  background-position: center 62%; /* la famille reste dans le cadre malgré le recadrage vertical */
  background-image:
    linear-gradient(to top, rgba(244, 237, 223, .96) 0%, rgba(244, 237, 223, .84) 36%, rgba(244, 237, 223, .3) 100%),
    url("assets/img/profil-particulier.jpg");
  background-image:
    linear-gradient(to top, rgba(244, 237, 223, .96) 0%, rgba(244, 237, 223, .84) 36%, rgba(244, 237, 223, .3) 100%),
    image-set(url("assets/img/profil-particulier.webp") type("image/webp"), url("assets/img/profil-particulier.jpg") type("image/jpeg"));
}
.split-hero__half--dark::before {
  background-position: center 42%; /* la poignée de main remonte au-dessus du bloc texte */
  background-image:
    linear-gradient(to top, rgba(36, 24, 17, .95) 0%, rgba(36, 24, 17, .84) 34%, rgba(36, 24, 17, .48) 100%),
    url("assets/img/profil-pro.jpg");
  background-image:
    linear-gradient(to top, rgba(36, 24, 17, .95) 0%, rgba(36, 24, 17, .84) 34%, rgba(36, 24, 17, .48) 100%),
    image-set(url("assets/img/profil-pro.webp") type("image/webp"), url("assets/img/profil-pro.jpg") type("image/jpeg"));
}
/* Voile d'assombrissement premium — se révèle en fondu au survol. */
.split-hero__half::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .32) 100%);
  opacity: 0; transition: opacity .7s cubic-bezier(.22, .61, .36, 1);
}
.split-hero__half--light { color: var(--ink); }
.split-hero__half--dark { color: var(--onDark); }
.split-hero__half:hover::before { transform: scale(1.07); }
/* Au survol d'une moitié, c'est la moitié OPPOSÉE qui s'assombrit et recule. */
.split-hero:hover .split-hero__half:not(:hover)::after { opacity: 1; }
.split-hero__inner {
  position: relative; z-index: 1; max-width: 40ch;
}
/* Le bloc titre/desc se LÈVE, le « Demander un devis » reste : les deux textes
   se séparent verticalement au survol (comportement de la maquette). */
.split-hero__label { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.split-hero__half:hover .split-hero__label { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .split-hero__half::before,
  .split-hero__half:hover .split-hero__label,
  .split-hero__half:hover .split-hero__arrow { transition: none; transform: none; }
}
.split-hero__half .eyebrow { margin-bottom: 10px; }
.split-hero__half--light .eyebrow { color: var(--gold); }
.split-hero__half--dark .eyebrow { color: var(--goldsoft); }
.split-hero__half h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(46px, 7vw, 96px); line-height: .95; margin: 0 0 18px;
}
.split-hero__half p { margin: 0 0 26px; max-width: 32ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.5; }
.split-hero__half--light p { color: var(--muted); }
.split-hero__half--dark p { color: color-mix(in srgb, var(--onDark) 80%, transparent); }
.split-hero__link {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.split-hero__half--light .split-hero__link { color: var(--ink); }
.split-hero__half--dark .split-hero__link { color: var(--onDark); }
/* La flèche s'éloigne, grossit et se colore en or au survol (comme la maquette). */
.split-hero__arrow {
  display: inline-block; font-size: 1.35em; line-height: 1;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), color .4s ease;
}
.split-hero__half:hover .split-hero__arrow { transform: translateX(12px) scale(1.32); }
.split-hero__half--light:hover .split-hero__arrow { color: var(--gold); }
.split-hero__half--dark:hover .split-hero__arrow { color: var(--goldsoft); }
/* Pilule d'intitulé centrée en haut */
.split-hero__pill {
  position: absolute; top: clamp(20px, 4vw, 34px); left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
}
/* Badge « ou » circulaire à la césure */
.split-hero__ou {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg); color: var(--gold);
  font-family: var(--font-serif); font-style: italic; font-size: 22px;
  box-shadow: 0 12px 34px rgba(42, 28, 18, .28);
}

/* =========================================================================
   9. SERVICES (8 cartes)
   ========================================================================= */
.services-head {
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px;
  margin-bottom: clamp(28px, 4vw, 46px);
}
.services-head h2 { font-size: clamp(30px, 5vw, 52px); line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; margin: 0; }
.services-head .eyebrow { color: var(--gold); flex: none; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(42,28,18,.16); border-color: var(--goldsoft); }
/* Zone « image » en haut de carte + pilule de catégorie */
.service-card__media {
  position: relative; height: 170px; overflow: hidden;
  background: var(--line);
}
.service-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-card__img { transform: scale(1.08); }
/* Voile doux pour détacher la pilule et unifier la lumière */
.service-card__media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,28,18,.30) 0%, rgba(42,28,18,.04) 50%, rgba(42,28,18,.22) 100%);
  pointer-events: none; z-index: 1;
}
/* Halo doré révélé au survol, façon overlay du split. */
.service-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 130% at 50% 0%, rgba(216,188,114,.30), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none; z-index: 1;
}
.service-card:hover .service-card__media::after { opacity: 1; }
.service-card__pill {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gold);
  background: var(--bg);
  padding: 7px 13px; border-radius: 999px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.service-card__body { padding: clamp(22px, 3vw, 30px); display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 10px; }
.service-card h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 0; }
.service-card p { color: var(--muted); font-size: 15px; margin: 0; }
.service-card__link {
  color: var(--gold); font-weight: 700; font-family: var(--font-display);
  display: inline-flex; gap: 6px; align-items: center; align-self: flex-start;
  border-bottom: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); padding-bottom: 2px;
  transition: gap .25s ease, border-color .25s ease;
}
/* Lien étiré : toute la surface de la carte devient cliquable (HTML inchangé). */
.service-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.service-card__link span { transition: transform .25s cubic-bezier(.22,1,.36,1); }
/* L'interactivité répond au survol de toute la carte, comme les moitiés du split. */
.service-card:hover .service-card__link { gap: 12px; border-bottom-color: var(--gold); }
.service-card:hover .service-card__link span { transform: translateX(6px); }
.service-card--dark:hover .service-card__link { border-bottom-color: var(--goldsoft); }
/* Dernière carte : variante sombre (Professionnels) */
.service-card--dark { background: repeating-linear-gradient(135deg, #241811 0 26px, #1c120b 26px 52px); border-color: transparent; color: var(--onDark); }
.service-card--dark .service-card__media::before { background: linear-gradient(180deg, rgba(20,12,7,.45) 0%, rgba(20,12,7,.1) 50%, rgba(20,12,7,.38) 100%); }
/* Pill sur la carte sombre : pastille dorée pleine + texte espresso (cf. maquette),
   au lieu du doré translucide qui virait à l'ocre sur les rayures sombres. */
.service-card--dark .service-card__pill { background: var(--goldsoft); color: var(--ink); }
.service-card--dark h3 { color: var(--onDark); }
.service-card--dark p { color: color-mix(in srgb, var(--onDark) 78%, transparent); }

/* =========================================================================
   10. FOCUS EXTÉRIEUR
   ========================================================================= */
.focus-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.focus__visual {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 360px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.05)),
    repeating-linear-gradient(135deg, #d9cbb0 0 26px, #cbb89a 26px 52px);
  border: 1px solid var(--line);
}
.focus__badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--goldsoft); color: #1a150e; font-family: var(--font-display);
  font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.focus__tag { position: absolute; bottom: 18px; left: 18px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); padding: 6px 12px; border-radius: 999px; }
.focus__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.focus__cta { margin-top: 26px; }
/* Portrait du fondateur (page « Qui sommes-nous ») : même cadre que le focus,
   mais hauteur pilotée par la photo (pas de recadrage). */
.about-portrait { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.about-portrait img { display: block; width: 100%; height: auto; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; background: var(--surface); }
.chip--gold { background: color-mix(in srgb, var(--goldsoft) 20%, var(--surface)); border-color: var(--goldsoft); }
/* Filtres de la galerie avant/après : Univers principaux + Sous-groupes de prestations */
.ba-filters { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(20px, 3vw, 30px); }
.ba-filters__universes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ba-filters__subgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--goldsoft) 6%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--goldsoft) 35%, transparent);
  border-radius: 12px;
  animation: baSubgroupFadeIn .25s ease-out;
}
.ba-filters__subgroup[hidden] { display: none; }
.ba-filters__subgroup-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 4px;
}
.ba-filters .chip { cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; user-select: none; }
.ba-filters .chip:hover { border-color: var(--goldsoft); transform: translateY(-1px); }
.ba-filters .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--goldsoft) 22%, var(--surface)); border-color: var(--goldsoft); font-weight: 700; }
.ba-filters .chip--sub { font-size: 13px; padding: 6px 13px; }
.ba-filters .chip--sub[aria-pressed="true"] { background: var(--goldsoft); color: var(--dark); border-color: var(--goldsoft); }

@keyframes baSubgroupFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.post-card[hidden] { display: none; }

/* =========================================================================
   11. PARTENAIRES (logos marquee)
   ========================================================================= */
.partners {
  background: var(--dark);
  color: var(--onDark);
  padding: clamp(56px, 8vw, 84px) 0;
  position: relative;
  overflow: hidden;
}
.partners__label {
  text-align: center;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goldsoft);
  font-weight: 700;
  margin-bottom: 36px;
}
.partners .marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 20px 0;
  margin: -20px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.partners .marquee__track {
  animation-duration: 34s;
  align-items: center;
  display: flex;
  gap: clamp(32px, 4vw, 44px);
  width: max-content;
  padding: 8px 0;
}
.partners .marquee:hover .marquee__track,
.partners .marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
.partners .marquee--drag.is-scrollable .marquee__track {
  animation: none;
  will-change: transform;
}
.partners .marquee--drag.is-scrollable {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.partners .marquee--drag.is-grabbing {
  cursor: grabbing;
}
.partner {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--onDark) 70%, transparent);
  padding: 12px 26px;
  white-space: nowrap;
}
/* Alternance typographique (romain gras / serif italique), comme la maquette. */
.partner--alt {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* =========================================================================
   12. ZONES D'INTERVENTION (Carte Full Width & Recherche épurée)
   ========================================================================= */
.section--zones {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 64px) 0;
}
.section--zones .section__head { margin-bottom: 0; max-width: none; }
.section--zones .section__head h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 8px; }
.section--zones .section__lead { font-size: 15px; margin-top: 10px; max-width: none; }

/* Carte à droite, texte + recherche + communes à gauche : moitié moins de hauteur. */
.zones-wrapper {
  display: grid;
  grid-template-columns: minmax(300px, 38%) 1fr;
  gap: 28px;
  align-items: stretch;
}

.zones-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Barre de Recherche --- */
.zones-search-bar {
  width: 100%;
}

.zones-search {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.zones-search__icon {
  position: absolute;
  left: 18px;
  color: var(--gold);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.zones-search__input {
  width: 100%;
  padding: 15px 44px 15px 50px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  box-shadow: 0 6px 24px rgba(42, 28, 18, 0.05);
  transition: border-color .2s, box-shadow .2s;
}

/* La croix native de <input type="search"> ferait doublon avec la nôtre. */
.zones-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.zones-search__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(181, 136, 47, 0.15);
}

.zones-search__clear {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.zones-search__clear:hover { color: var(--ink); }

/* --- Barre de Statut de Recherche --- */
.zones-status {
  width: 100%;
  padding: 10px 16px;
  background: rgba(181, 136, 47, 0.12);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* --- Barre des Pilules --- */
.zones-pills-bar {
  width: 100%;
}

.zones-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(42, 28, 18, 0.03);
}

.zone-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background .2s, transform .2s;
}

.zone-pill__cp {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-family: var(--font-mono);
}

.zone-pill:hover {
  border-color: var(--goldsoft);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(42, 28, 18, 0.08);
}

.zone-pill.is-active {
  background: var(--dark);
  color: #FFFBF3;
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(42, 28, 18, 0.15);
}

.zone-pill.is-active .zone-pill__dot {
  background: var(--gold);
  transform: scale(1.3);
}

.zone-pill.is-active .zone-pill__cp {
  color: var(--goldsoft);
}

.zone-pill.is-hidden {
  display: none !important;
}

/* Résultat de recherche hors région : proposé, mais visuellement en retrait. */
.zone-pill.is-out {
  opacity: .55;
}

/* --- Carte Leaflet Full Width Container --- */
.zones-map-wrap {
  position: relative;
  /* Leaflet monte ses contrôles à z-index 1000 : sans contexte d'empilement,
     la légende et « Recentrer » passeraient par-dessus le header fixe (80). */
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 42vh, 420px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(42, 28, 18, 0.08);
  background: #EADEC9;
}

.zones-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.leaflet-tile-container img {
  filter: sepia(0.22) contrast(1.04) brightness(0.98) saturate(0.92);
}

/* --- Override Style des Boutons Zoom Leaflet (+ / -) --- */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: background .2s, color .2s !important;
}

.leaflet-control-zoom a:hover {
  background: var(--dark) !important;
  color: #FFFBF3 !important;
}

/* --- Attribution du fond de carte : obligatoire (licence IGN), réduite au
   minimum visible pour ne pas charger la carte. --- */
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  padding: 1px 7px; border-radius: 8px 0 0 0;
  font-size: 9.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.leaflet-control-attribution a { color: inherit; text-decoration: underline; }

.zones-map__recenter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 15px;
  border-radius: 30px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 6px 20px rgba(42, 28, 18, 0.12);
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

/* Le display:flex l'emporterait sur [hidden] : on le neutralise. */
.zones-map__recenter[hidden] { display: none; }

/* Légende : même pastille de verre que le bouton « Recentrer », en bas à gauche
   pour laisser l'attribution IGN tranquille à droite. */
.zones-legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 1000;
  list-style: none; margin: 0; padding: 9px 13px;
  display: grid; gap: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(42, 28, 18, 0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.zones-legend li { display: flex; align-items: center; gap: 8px; }
.zones-legend__key {
  flex: none; width: 16px; height: 11px; border-radius: 3px;
}
/* Les couleurs reprennent au pixel les styles GeoJSON posés dans app.js. */
.zones-legend__key--zone { background: rgba(196, 159, 60, .12); border: 2px solid rgba(196, 159, 60, .9); }
.zones-legend__key--region { background: rgba(122, 106, 88, .05); border: 1px solid rgba(122, 106, 88, .35); }

.zones-map__recenter svg {
  color: var(--gold);
  transition: transform .3s ease, color .2s ease;
}

.zones-map__recenter:hover {
  background: var(--dark);
  color: #FFFBF3;
  border-color: var(--dark);
  box-shadow: 0 8px 24px rgba(42, 28, 18, 0.25);
  transform: translateY(-1px);
}

.zones-map__recenter:hover svg {
  color: var(--goldsoft);
  transform: rotate(90deg) scale(1.1);
}

/* --- Styled Leaflet Custom Markers & Popups --- */
.saintity-map-marker {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.saintity-map-marker__pin {
  width: 16px;
  height: 16px;
  background: var(--dark);
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.saintity-map-marker.is-active .saintity-map-marker__pin,
.saintity-map-marker:hover .saintity-map-marker__pin {
  background: var(--gold);
  border-color: #FFFBF3;
  transform: scale(1.35);
  box-shadow: 0 0 16px rgba(181, 136, 47, 0.8);
}

.saintity-map-marker.is-hq .saintity-map-marker__pin {
  background: #E2C068;
  border-color: var(--darksurface);
}

.saintity-map-marker__pulse {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(181, 136, 47, 0.35);
  animation: markerPulse 2s infinite;
  pointer-events: none;
}

@keyframes markerPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- Override Popup Leaflet Styles : Custom Saintity Gold Button --- */
.leaflet-popup-content-wrapper {
  background: var(--darksurface) !important;
  color: var(--onDark) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(216, 188, 114, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  padding: 4px !important;
}

.leaflet-popup-tip {
  background: var(--darksurface) !important;
}

.saintity-popup {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
  box-sizing: border-box;
}

.saintity-popup__title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #FFFBF3 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.saintity-popup__sub {
  font-size: 12px !important;
  color: var(--goldsoft) !important;
  font-weight: 600 !important;
}

.saintity-popup__btn {
  margin-top: 4px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  background: var(--gold) !important;
  color: var(--dark) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(181, 136, 47, 0.3) !important;
  transition: all .2s ease !important;
}

.saintity-popup__btn:hover,
.saintity-popup__btn:focus,
.saintity-popup__btn:active,
.saintity-popup__btn:visited {
  background: var(--goldsoft) !important;
  color: var(--dark) !important;
  text-decoration: none !important;
}

/* =========================================================================
   13. FAQ
   ========================================================================= */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-size: 16px; font-weight: 700; font-family: var(--font-body);
}
.faq__icon { color: var(--gold); font-size: 20px; flex: none; transition: transform .3s; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq__a p { margin: 0 0 18px; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* FAQ rédigée dans l'éditeur (pages de services) : bloc natif « Détails ».
   Même habillage que .faq ci-dessus, mais l'accordéon est un <details> HTML :
   accessible et navigable au clavier d'origine, trouvable au Ctrl+F, et zéro
   ligne de JavaScript. Non préfixé par .entry-content à dessein — la règle
   sert aussi au rendu de l'éditeur (cf. assets/css/editor.css). */
.wp-block-details { border-top: 1px solid var(--line); }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-details > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-size: 16px; font-weight: 700; font-family: var(--font-body);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: '+'; color: var(--gold); font-size: 20px; line-height: 1; flex: none; transition: transform .3s;
}
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wp-block-details p { margin: 0 0 18px; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* Encart de mise en avant posé depuis l'éditeur (motif « Encart »).
   Sert aussi bien au crédit d'impôt qu'à une garantie ou un délai. */
.entry-callout {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); margin: clamp(24px, 4vw, 36px) 0;
}
.entry-callout p { margin: 0; font-size: 16px; color: var(--muted); }
.entry-callout strong { color: var(--ink); }

/* Comparateur avant/après posé dans le contenu ([saintity_avant_apres]). */
.entry-content .ba { margin: clamp(24px, 4vw, 36px) 0; border-radius: var(--radius); }

/* Ouverture animée là où le navigateur sait interpoler une hauteur « auto »
   (Chrome 129+, Safari 18.4+). Ailleurs : ouverture instantanée, sans casse. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .wp-block-details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .4s ease, content-visibility .4s allow-discrete;
  }
  .wp-block-details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-details::details-content { transition: none; }
  .wp-block-details > summary::after { transition: none; }
}

/* =========================================================================
   13b. PAGE DEVIS (/devis/)
   ========================================================================= */
.devis { position: relative; overflow: hidden; min-height: calc(100vh - 74px); display: flex; align-items: center; background: var(--bg); }
.devis__bg { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #F4EDDF 0 24px, #E7DDC8 24px 48px); }
.devis__glow { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 40%, #FFFBF3, transparent 72%); }
.devis__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(40px, 8vh, 90px); }
.devis h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1; letter-spacing: -.035em; margin: 22px 0 0; }
.devis__lead { color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; max-width: 540px; margin: 22px auto 0; }
.devis__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.devis__content { margin: 30px auto 0; max-width: 560px; color: var(--muted); }
.devis__note { margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* =========================================================================
   14. CTA FINAL
   ========================================================================= */
.cta-final { background: var(--dark); color: var(--onDark); text-align: center; }
.cta-final h2 { font-size: clamp(30px, 6vw, 52px); line-height: 1.05; margin: 14px 0 16px; }
.cta-final p { color: color-mix(in srgb, var(--onDark) 80%, transparent); max-width: 480px; margin: 0 auto 30px; }
.cta-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.site-footer { background: #1f150d; color: color-mix(in srgb, var(--onDark) 82%, transparent); padding: clamp(50px, 8vw, 80px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.footer-brand .brand { color: var(--onDark); font-size: 22px; margin-bottom: 14px; }
.footer-brand p { margin: 0 0 18px; font-size: 14.5px; max-width: 32ch; }
.footer-brand a, .footer-brand > span { display: block; margin-bottom: 6px; font-size: 14.5px; }
.footer-brand a:hover { color: var(--goldsoft); }
.footer-col h4 { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--goldsoft); margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14.5px; opacity: .85; }
.footer-col a:hover { opacity: 1; color: var(--goldsoft); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: color-mix(in srgb, var(--onDark) 60%, transparent);
}
.footer-legal { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--onDark) 50%, transparent); margin-top: 18px; }

/* Appel à l'action flottant (mobile). Pas de barre : un cartouche crème posé
   sur le contenu faisait bloc et alourdissait l'écran. Deux objets seulement,
   dans le vocabulaire des étiquettes du site — pastille espresso pour l'appel,
   pilule dorée en capitales mono pour le devis. */
.mobile-cta {
  display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  align-items: center; gap: 12px;
  /* Masquée par défaut (notamment sur le hero) ; révélée par JS après le 1er écran. */
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}
.mobile-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.mobile-cta .btn { flex: 1; height: 54px; padding: 0 22px; border-radius: 999px; }
.mobile-cta .btn svg { flex: none; }
/* Appel : pastille ronde, icône seule — le libellé reste porté par aria-label. */
.mobile-cta .btn--outline-ink {
  /* gap: 0 — le libellé réduit à zéro reste un élément flex : l'espacement
     hérité de .btn décalait l'icône vers la gauche. */
  flex: none; width: 54px; padding: 0; gap: 0; font-size: 0;
  color: var(--goldsoft);
  background: rgba(26, 18, 11, .74);
  border-color: rgba(255, 251, 243, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(42, 28, 18, .3);
}
.mobile-cta .btn--outline-ink svg { width: 19px; height: 19px; }
/* Typographie de titrage, comme tous les boutons du site : le mono reste réservé
   aux étiquettes (Avant/Après, eyebrows). */
.mobile-cta .btn--gold { box-shadow: 0 12px 32px rgba(42, 28, 18, .26); }
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: opacity .3s ease; } }
/* Desktop : mêmes deux objets, posés en pilule bas-droite. Le JS ne les révèle
   que lorsque le header (appel + devis) s'est masqué en descendant et qu'aucun
   CTA du contenu n'est à l'écran. */
@media (min-width: 760px) {
  .mobile-cta { display: flex; left: auto; right: 28px; bottom: 28px; gap: 10px; }
  .mobile-cta .btn { flex: none; height: 50px; }
  .mobile-cta .btn--outline-ink { width: 50px; }
  .mobile-cta .btn--gold { padding: 0 24px; }
}

/* Sur /devis/, on EST déjà dans le configurateur : tous les CTA « demander un
   devis » (header, drawer mobile, barre flottante) sont redondants. */
.sd-devis-page .header-cta,
.sd-devis-page .mobile-menu__cta .btn--gold,
.sd-devis-page .mobile-cta { display: none; }

/* -------------------------------------------------------------------------
   Rideau de transition cinématique vers le configurateur (/devis/).
   Un panneau espresso rayé se lève depuis le bas et recouvre l'écran ;
   la marque et le libellé du profil apparaissent, un filet doré balaie.
   ------------------------------------------------------------------------- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);   /* replié en bas, invisible */
  will-change: clip-path;
}
.page-curtain__panel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 50% 118%, rgba(181,136,47,.22), transparent 62%),
    repeating-linear-gradient(135deg, #241811 0 26px, #1c120b 26px 52px);
}
.page-curtain__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
}
.page-curtain__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(28px, 6vw, 46px);
  color: var(--onDark);
}
.page-curtain__brand span {
  color: var(--goldsoft);
  font-weight: 500;
  font-style: italic;
}
.page-curtain__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--onDark) 60%, transparent);
}
.page-curtain__bar {
  display: block;
  width: min(220px, 52vw);
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(244,244,233,.14);
}
.page-curtain__bar i {
  display: block;
  height: 100%;
  width: 42%;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--goldsoft), transparent);
}
.page-curtain.is-active {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition: clip-path .6s cubic-bezier(.76, 0, .24, 1);
}
.page-curtain.is-active .page-curtain__content {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .26s, transform .55s cubic-bezier(.22, .61, .36, 1) .26s;
}
.page-curtain.is-active .page-curtain__bar i {
  animation: curtainBar 1s ease .34s infinite;
}
@keyframes curtainBar {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-curtain { will-change: auto; }
  .page-curtain.is-active { clip-path: inset(0 0 0 0); transition: opacity .2s ease; }
  .page-curtain.is-active .page-curtain__content { transition: opacity .2s ease; }
  .page-curtain.is-active .page-curtain__bar i { animation: none; }
}

/* =========================================================================
   15bis. CONTENUS ÉDITABLES (logos partenaires, réseaux sociaux, blog)
   ========================================================================= */

/* Logo partenaire (CPT Partenaires → image mise en avant + lien web cliquable).
   Posé sur un cartouche nacre / crème de prestige de grande taille (74px) avec
   calibrage optique pour une lisibilité parfaite et sans aucun rognage au survol. */
.partner--logo {
  flex: 0 0 auto;
  height: 74px;
  padding: 10px 28px;
  border-radius: 16px;
  background: #FAF7F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  border: 1.5px solid rgba(216, 188, 114, 0.25);
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.partner--logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
  border-color: rgba(216, 188, 114, 0.45);
  background: #FFFFFF;
  z-index: 5;
}
.partner--logo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.partner--logo img {
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Calibrage Optique Haute Lisibilité */
.partner--wide { min-width: 180px; padding: 10px 30px; }
.partner--wide img { max-height: 40px; max-width: 165px; }

.partner--medium { min-width: 170px; padding: 10px 26px; }
.partner--medium img { max-height: 48px; max-width: 165px; }

/* Cartouches carrés 1:1 */
.partner--square,
.partner--round {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
  height: 74px;
  padding: 8px;
  border-radius: 16px;
}
.partner--square img,
.partner--round img {
  max-height: 56px;
  max-width: 56px;
}

@media (max-width: 768px) {
  .partners {
    padding: clamp(40px, 6vw, 60px) 0;
  }
  .partners .marquee {
    padding: 14px 0;
    margin: -14px 0;
  }
  .partners .marquee__track {
    gap: 24px;
    padding: 6px 0;
  }
  .partner--logo {
    height: 58px;
    border-radius: 12px;
  }
  .partner--wide { min-width: 140px; padding: 8px 18px; }
  .partner--wide img { max-height: 30px; max-width: 130px; }

  .partner--medium { min-width: 130px; padding: 8px 16px; }
  .partner--medium img { max-height: 36px; max-width: 130px; }

  .partner--square,
  .partner--round {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    height: 58px;
    padding: 6px;
    border-radius: 12px;
  }
  .partner--square img,
  .partner--round img {
    max-height: 44px;
    max-width: 44px;
  }
}

/* Réseaux sociaux (footer) */
.footer-socials { display: flex; gap: 14px; margin: 34px 0 6px; }
.footer-socials a,
.mobile-menu__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--onDark) 25%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--onDark) 82%, transparent);
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-socials a:hover,
.mobile-menu__socials a:hover { color: var(--goldsoft); border-color: var(--goldsoft); transform: translateY(-2px); }

/* Blog « Conseils & actualités » */
/* Pages services (silos SEO) & réalisations. Pas de sur-padding en haut : le corps
   compense déjà le header fixe (body:not(.home) { padding-top: 74px }). */
.service-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.service-hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}
.service-hero__content h1 { font-size: clamp(30px, 4.8vw, 46px); margin-top: 12px; line-height: 1.08; }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.8vw, 28px); }

/* Réassurance & micro-preuves hero */
.service-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(12px, 2vw, 24px);
  margin-top: clamp(20px, 2.5vw, 28px);
  padding: 0;
  list-style: none;
}
.service-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
}
.service-hero__trust svg {
  color: var(--gold);
  flex-shrink: 0;
}

/* Cadre visuel Hero */
.service-hero__visual {
  position: relative;
}
.service-hero__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(42, 28, 18, .10);
}
.service-hero__frame picture,
.service-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.service-hero__frame:hover img {
  transform: scale(1.04);
}
.service-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.service-hero__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(42, 28, 18, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--goldsoft);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(219, 197, 138, .35);
}
.service-hero__badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(42, 28, 18, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(219, 197, 138, .4);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.service-hero__badge svg {
  color: var(--goldsoft);
  flex-shrink: 0;
}

/* Bloc Savoir-Faire / Méthode & Technicité */
.methode-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 36px);
  margin-top: clamp(20px, 3vw, 36px);
  box-shadow: 0 12px 32px rgba(42, 28, 18, .06);
}
.methode-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--line);
}
.methode-card__visual picture,
.methode-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.methode-card__pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(42, 28, 18, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--goldsoft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(219, 197, 138, .3);
}
.methode-card__body h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 6px 0 12px;
  line-height: 1.2;
}
.methode-card__body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.methode-card__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.methode-card__points li {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.methode-card__points li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 11px;
}

body.saintity-pro .service-hero__frame,
body.saintity-pro .methode-card {
  border-color: rgba(219, 197, 138, .18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
body.saintity-pro .methode-card__points li {
  color: var(--onDark);
}

@media (max-width: 991px) {
  .service-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .methode-card { grid-template-columns: 1fr; gap: 20px; }
}

.section--tight { padding-top: clamp(20px, 3vw, 34px); }
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(28px, 4vw, 44px);
}
.post-card {
  position: relative; /* ancre le lien étiré .service-card__link::after, sinon il s'étale sur tout le viewport */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(42, 28, 18, .10); }
.post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg, #EDE3CF 0 26px, #E4D8BF 26px 52px); /* placeholder rayé si pas d'image */
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__date { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-card__body h2 { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.2; margin: 0; }
.post-card__body p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.single-entry { max-width: 760px; margin: 0 auto; }
.single-entry__media { border-radius: var(--radius); overflow: hidden; margin: 0 0 clamp(24px, 4vw, 40px); }
.single-entry__media img { width: 100%; height: auto; display: block; }
.entry-content { font-size: 17px; line-height: 1.7; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
/* « a { color: inherit; text-decoration: none } » rendait les liens des pages
   légales indiscernables du texte : e-mails et téléphones passaient inaperçus. */
.entry-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--ink); }
.entry-content h3 {
  margin-top: 2em; padding-top: 1.1em; border-top: 1px solid var(--line);
  font-size: clamp(17px, 2vw, 19px);
}
/* Enfant direct : le titre de la signature, premier de son <aside>, garde son filet. */
.entry-content > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.single-entry__foot { margin-top: clamp(32px, 5vw, 48px); padding-top: 28px; border-top: 1px solid var(--line); }

/* Signature du site, en bas des mentions légales : titre intégré au rythme
   de la page, carte artisanale soignée, coordonnées adoucies en pastilles
   tactiles et bouton Malt placé à droite. */
.site-credit__card {
  margin-top: 1.2em;
  padding: clamp(18px, 2.8vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  flex-wrap: wrap;
  box-shadow: 0 4px 18px rgba(42, 28, 18, .04);
}
.site-credit__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.site-credit__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16.5px, 2.2vw, 18.5px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.site-credit__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.site-credit__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease, color .25s ease;
}
.entry-content .site-credit__contact {
  color: var(--ink);
  text-decoration: none;
}
.site-credit__ico {
  flex: none;
  display: block;
  color: var(--gold);
  transition: transform .25s ease, color .25s ease;
}
.site-credit__contact:hover {
  background: var(--surface-2);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(42, 28, 18, .07);
}
.site-credit__contact:hover .site-credit__ico {
  transform: scale(1.1);
  color: var(--gold);
}
.site-credit__contact:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.site-credit__malt {
  margin: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease;
}
.entry-content .site-credit__malt {
  color: var(--ink);
  text-decoration: none;
}
.site-credit__malt img {
  width: 74px;
  height: auto;
  display: block;
}
.site-credit__arrow {
  display: inline-block;
  color: var(--gold);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-credit__malt:hover {
  background: var(--surface-2);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(42, 28, 18, .10);
}
.site-credit__malt:hover .site-credit__arrow {
  transform: translateX(4px);
}
.site-credit__malt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .site-credit__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .site-credit__malt {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-credit__contact,
  .site-credit__malt,
  .site-credit__arrow,
  .site-credit__ico {
    transition: none;
    transform: none !important;
  }
}
.pagination { margin-top: clamp(32px, 5vw, 48px); }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--onDark); border-color: var(--ink); }

@media (max-width: 879px) { .posts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .posts-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   15ter. IDENTITÉ PRO (silo /professionnels/)
   Même bascule que la moitié droite du split d'accueil et que le configurateur
   en mode pro (.sd.is-pro) : on ne repeint rien, on retourne les jetons.
   ========================================================================= */
body.saintity-pro,
body.sd-pro-active {
  --bg: #1c120b;                                              /* fond de page sombre (identique .sd.is-pro) */
  --surface: #241811;
  --surface-2: #2E1F16;
  --ink: var(--onDark);                                       /* le texte courant passe en crème */
  --muted: color-mix(in srgb, var(--onDark) 62%, transparent);
  --gold: var(--goldsoft);                                    /* l'or lisible sur sombre est l'or clair */
  --line: rgba(216, 188, 114, .22);
  --dark: #150d07;                                            /* les blocs « sombres » restent sous le fond de page */
  --darksurface: #241811;
}

body.saintity-pro .site-header,
body.sd-pro-active .site-header {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* Le canevas (rubber-band, marges hors corps) suit la page, sinon le crème réapparaît. */
html:has(body.saintity-pro),
html:has(body.sd-pro-active) { background: #1c120b; }

/* En-tête de page : la rayure espresso, signature du profil pro. Elle remonte sous
   le header fixe — le décalage de 74px du corps est repris en padding, mise en page
   inchangée. */
body.saintity-pro .service-hero {
  margin-top: -74px;
  padding-top: calc(clamp(56px, 9vw, 96px) + 74px);
  background:
    radial-gradient(1100px 560px at 84% -16%, rgba(216, 188, 114, .16), transparent 60%),
    repeating-linear-gradient(135deg, #241811 0 26px, #1c120b 26px 52px);
  border-bottom: 1px solid var(--line);
}


/* Cartes de sous-services : même rayure que la carte « Professionnels » de l'accueil. */
body.saintity-pro .service-card {
  background: repeating-linear-gradient(135deg, #2b1d14 0 26px, #241811 26px 52px);
}
/* L'or clair sur fond doré : on garde un texte espresso au survol du CTA. */
body.saintity-pro .btn--gold:hover { background: #E8D5A4; color: #1a150e; }

/* En-tête de sous-menu (« Découvrir l'offre… ») en mode sombre : contraste parfait au survol */
body.saintity-pro .nav-panel__lead:hover,
body.saintity-pro .nav-panel__lead:focus-visible,
body.sd-pro-active .nav-panel__lead:hover,
body.sd-pro-active .nav-panel__lead:focus-visible {
  background: var(--onDark, #F4EDDF);
  color: #2A1C12;
  border-color: var(--onDark, #F4EDDF);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
body.saintity-pro .nav-panel__lead:hover .nav-panel__lead-arrow,
body.saintity-pro .nav-panel__lead:hover span[aria-hidden="true"],
body.saintity-pro .nav-panel__lead:focus-visible .nav-panel__lead-arrow,
body.saintity-pro .nav-panel__lead:focus-visible span[aria-hidden="true"],
body.sd-pro-active .nav-panel__lead:hover .nav-panel__lead-arrow,
body.sd-pro-active .nav-panel__lead:hover span[aria-hidden="true"],
body.sd-pro-active .nav-panel__lead:focus-visible .nav-panel__lead-arrow,
body.sd-pro-active .nav-panel__lead:focus-visible span[aria-hidden="true"] {
  color: #2A1C12;
  transform: translateX(4px);
}

/* Badges source des avis en mode pro : harmonisation avec l'ambiance sombre espresso & or */
body.saintity-pro .review-card__source,
body.sd-pro-active .review-card__source {
  background: color-mix(in srgb, var(--surface-2, #2E1F16) 90%, transparent);
  border-color: color-mix(in srgb, var(--line) 75%, transparent);
  color: var(--muted);
}
body.saintity-pro .review-card__source:hover,
body.saintity-pro .review-card__source:focus-visible,
body.sd-pro-active .review-card__source:hover,
body.sd-pro-active .review-card__source:focus-visible {
  background: #352318;
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
body.saintity-pro .review-card__source--static:hover,
body.sd-pro-active .review-card__source--static:hover {
  background: color-mix(in srgb, var(--surface-2, #2E1F16) 90%, transparent);
  border-color: color-mix(in srgb, var(--line) 75%, transparent);
  color: var(--muted);
  box-shadow: none;
  transform: none;
  opacity: 0.85;
}

/* =========================================================================
   15quater. COMPARATEUR AVANT / APRÈS (.ba)
   Photo « après » en fond, photo « avant » découpée au clip-path selon --pos.
   Le curseur est un <input type="range"> natif : clavier, tactile et lecteurs
   d'écran fonctionnent sans code. app.js n'ajoute que le glisser sur toute
   l'image et la répercussion de la valeur dans --pos.
   ========================================================================= */
/* Recul du séparateur pendant le guide d'usage : une seule valeur animée dont
   dépendent le filet, le bouton ET la découpe, sinon les trois dérivent de
   quelques pixels en cours d'animation. Enregistrée pour être interpolée. */
@property --peek {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.ba {
  --pos: 100%;   /* départ sur la photo « avant » (cf. saintity_before_after) */
  --knob: 46px;
  position: relative;
  aspect-ratio: 4 / 5;
  isolation: isolate;          /* le curseur reste sous les badges de la section */
  overflow: hidden;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #EDE3CF 0 26px, #E4D8BF 26px 52px);
  touch-action: pan-y;         /* glisser horizontal = curseur, vertical = scroll */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  transition: --peek .6s cubic-bezier(.22, .61, .36, 1);
}
/* Ratio imposé : les photos client (portrait au téléphone, paysage à l'appareil)
   doivent produire une grille régulière — d'où le recadrage centré. */
.ba__img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Le glisser-déposer natif de l'image parasitait le glissement du curseur. */
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba__img--before { clip-path: inset(0 max(0px, calc(100% - var(--pos) + var(--peek, 0px))) 0 0); }

/* Filet doré à la césure. */
.ba__line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--pos) - var(--peek, 0px));
  width: 2px; margin-left: -1px; z-index: 2; pointer-events: none;
  background: var(--goldsoft);
  box-shadow: 0 0 0 1px rgba(42, 28, 18, .18), 0 0 22px rgba(42, 28, 18, .35);
}

/* Étiquettes Avant / Après — s'effacent quand la césure les recouvre. */
.ba__tag {
  position: absolute; bottom: 14px; z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(26, 18, 11, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 999px;
  transition: opacity .25s ease;
}
.ba__tag--before { left: 14px; opacity: clamp(0%, (var(--pos) - 12%) * 12, 100%); }
.ba__tag--after  { right: 14px; opacity: clamp(0%, (88% - var(--pos)) * 12, 100%); }

/* Curseur natif : bande centrée de la hauteur du bouton, débordant de la moitié
   du bouton de chaque côté pour que sa course couvre exactement 0 → 100 %. */
.ba__range {
  position: absolute; top: 50%; z-index: 3;
  left: calc(var(--knob) / -2);
  width: calc(100% + var(--knob));
  height: var(--knob);
  margin: calc(var(--knob) / -2) 0 0;
  padding: 0;
  background: transparent; border: 0;
  -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
  /* Au doigt, le glisser est piloté par le conteneur (cf. app.js) : le curseur
     natif ne doit jamais retenir un défilement vertical qui le traverse. */
  touch-action: pan-y;
}
/* Écrans tactiles : le curseur natif ne prend plus aucun événement de pointeur.
   Sinon un appui dans sa bande replacerait la césure (comportement natif du
   range), alors qu'au doigt seule la prise sur la césure doit la déplacer.
   Le focus clavier et les flèches restent intacts. */
@media (hover: none) {
  .ba__range { pointer-events: none; }
}
.ba.is-no-transition,
.ba.is-no-transition *,
.ba.is-no-transition .ba__range::-webkit-slider-thumb,
.ba.is-no-transition .ba__range::-moz-range-thumb {
  transition: none !important;
  animation: none !important;
}
.ba:hover,
.post-card:hover .ba { --thumb-scale: 1.08; }
.ba__range:active { --thumb-scale: 1.12; }
.ba__range::-webkit-slider-runnable-track { height: var(--knob); background: transparent; }
.ba__range::-moz-range-track { height: var(--knob); background: transparent; border: 0; }
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--knob); height: var(--knob); border-radius: 999px;
  background: var(--goldsoft) center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1C12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  border: 2px solid #FFFBF3;
  box-shadow: 0 8px 22px rgba(42, 28, 18, .38);
  cursor: ew-resize;
  transform: translateX(calc(var(--peek, 0px) * -1)) scale(var(--thumb-scale, 1));
}
.ba__range::-moz-range-thumb {
  width: var(--knob); height: var(--knob); border-radius: 999px; box-sizing: border-box;
  background: var(--goldsoft) center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1C12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  border: 2px solid #FFFBF3;
  box-shadow: 0 8px 22px rgba(42, 28, 18, .38);
  cursor: ew-resize;
  transform: translateX(calc(var(--peek, 0px) * -1)) scale(var(--thumb-scale, 1));
}
.ba__range:focus-visible { outline: 0; }
.ba__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gold), 0 8px 22px rgba(42, 28, 18, .38); }
.ba__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--gold), 0 8px 22px rgba(42, 28, 18, .38); }
@media (prefers-reduced-motion: reduce) {
  .ba__tag, .ba__range::-webkit-slider-thumb { transition: none; }
}

/* Guides d'usage du comparateur (mobile plein écran uniquement : les classes
   d'activation vivent dans le bloc 15quinquies, app.js les pose au bon moment).
   Même vocabulaire que les étiquettes Avant/Après : pastille mono sur voile
   espresso, chevrons dorés. */
.ba-hint {
  display: none; align-items: center; gap: 8px;
  margin: 0; width: fit-content;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(26, 18, 11, .62);
  border: 1px solid rgba(255, 251, 243, .2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px;
  pointer-events: none;
}
.ba-hint svg { flex: none; color: var(--goldsoft); }
/* Au-dessus de la césure, hors de la course du curseur et du doigt.
   L'animation d'entrée ne joue que sur l'opacité : la transform sert au centrage. */
.ba-hint--swipe {
  position: absolute; z-index: 4;
  top: calc(50% - 68px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
@keyframes ba-hint-in { from { opacity: 0; } to { opacity: 1; } }
/* Le curseur démarre collé au bord droit : la course doit être assez ample pour
   ramener le bouton entier (46px) dans le cadre. */
@keyframes ba-hint-pull {
  0%, 60%, 100% { --peek: 0px; }
  22% { --peek: 34px; }
}
@keyframes ba-nudge-x {
  0%, 55%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  35% { transform: translateX(2px); }
}
@keyframes ba-nudge-y {
  0%, 60%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
}
/* Invite au glissement : posée par app.js (galerie mobile & desktop ET focus de l'accueil,
   où elle s'affiche d'emblée). Le séparateur entier (filet doré + bouton) se
   décolle du bord et revient, en découvrant d'autant la photo « après ». Une
   seule animation, sur --peek : le filet et la découpe en dépendent déjà, le
   bouton s'y raccroche ici. */
.is-hint-swipe .ba-hint--swipe { display: inline-flex; animation: ba-hint-in .45s ease both; }
.is-hint-swipe .ba { animation: ba-hint-pull 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }
.is-hint-swipe .ba__range::-webkit-slider-thumb { transform: translateX(calc(var(--peek, 0px) * -1)) scale(var(--thumb-scale, 1)); }
.is-hint-swipe .ba__range::-moz-range-thumb { transform: translateX(calc(var(--peek, 0px) * -1)) scale(var(--thumb-scale, 1)); }
.is-hint-swipe .ba-hint--swipe svg { animation: ba-nudge-x 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }

/* Mode bump seul (quand l'utilisateur a déjà assimilé le geste : aucun tooltip textuel) */
.is-hint-swipe.is-bump-only .ba-hint--swipe,
.is-bump-only .ba-hint--swipe { display: none !important; }

/* Transition d'effacement fluide lorsque l'utilisateur interagit avec une autre réalisation */
.is-hint-fadeout .ba { animation: none; --peek: 0px; }
.is-hint-fadeout .ba__range::-webkit-slider-thumb { transform: translateX(0) scale(var(--thumb-scale, 1)); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.is-hint-fadeout .ba__range::-moz-range-thumb { transform: translateX(0) scale(var(--thumb-scale, 1)); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.is-hint-fadeout .ba-hint--swipe {
  display: inline-flex;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.is-hint-fadeout .ba-hint--swipe svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .ba, .ba-hint, .ba-hint svg,
  .ba__range::-webkit-slider-thumb, .ba__range::-moz-range-thumb { animation: none !important; }
}

/* Dans une carte de la grille Réalisations. */
.post-card .ba { border-radius: 0; }

/* Grille Réalisations sur grand écran : le comparateur est le contenu, pas une
   vignette de blog. Deux colonnes au lieu de trois — le glisser demande de la
   largeur — et toutes les réalisations au même format : la comparaison en grand
   se fait en plein écran (bouton dédié), pas au prix d'une carte en vedette. */
@media (min-width: 880px) {
  .posts-grid--ba { grid-template-columns: repeat(2, 1fr); }
  .posts-grid--ba .ba { aspect-ratio: 4 / 3; }
}

/* L'invite au glissement est calée à mi-hauteur du panneau plein écran (mobile).
   Hors mobile, la carte est plus haute que la photo : on l'accroche au haut de
   l'aperçu — seul repère fiable sans connaître la hauteur du média — plutôt
   qu'au centre de la carte, où elle déborderait sur le texte. */
@media (min-width: 760px) {
  .posts-grid--ba .ba-hint--swipe { top: 18px; }
  /* Pas de soulèvement au survol : la carte est une cible de glisser, elle ne
     doit pas se dérober sous le curseur. On n'appuie que l'ombre et le filet. */
  .posts-grid--ba .post-card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
    box-shadow: 0 18px 40px rgba(42, 28, 18, .12);
  }
}

/* Dans le focus extérieur de l'accueil : le comparateur remplace le fond rayé.
   Format carré : il tient à côté de la colonne de texte, sans l'écraser. */
.focus__visual--ba { background: none; border: 0; min-height: 0; }
.focus__visual--ba .ba { aspect-ratio: 1 / 1; border-radius: 20px; border: 1px solid var(--line); }

/* =========================================================================
   15quinquies. RÉALISATIONS PLEIN ÉCRAN (mobile)
   Sur téléphone, la galerie devient une pile de panneaux plein écran :
   glisser à l'horizontale = comparer (le curseur natif de .ba, inchangé),
   défiler à la verticale = réalisation suivante (scroll-snap natif, aucun JS).
   Le `touch-action: pan-y` de .ba assure déjà l'arbitrage entre les deux.
   Header et barre CTA restent visibles en permanence.
   ========================================================================= */
@media (max-width: 759px) {
  /* Le conteneur de défilement est <html> : le snap ne se déclare que là. */
  /* Un panneau par écran, mais uniquement tant qu'on est DANS la galerie :
     la classe est posée par app.js (même test que le header minimal). Déclaré
     en permanence, `mandatory` interdisait de quitter la galerie vers les avis
     puis le footer. Ailleurs sur la page, défilement libre. */
  html.is-ba-snap { scroll-snap-type: y mandatory; }

  /* Le header ne réserve plus de bandeau : il flotte au-dessus des photos
     (cf. .is-over-media plus bas). Le titre de page reprend à son compte le
     dégagement sous le header. */
  .page-template-page-realisations { padding-top: 0; }
  /* Le titre de page reste, réduit : l'expérience démarre dès le premier écran. */
  .page-template-page-realisations .service-hero { padding: 92px 0 0; }
  .page-template-page-realisations .service-hero h1 { font-size: 26px; margin-top: 8px; }

  /* Pleine largeur : on ressort des marges du .container. */
  .posts-grid--ba { grid-template-columns: 1fr; margin: 14px calc(var(--pad) * -1) 0; gap: 0; }
  .posts-grid--ba .post-card {
    /* Le panneau prend tout l'écran, le header flottant se pose dessus.
       `dvh` et non `svh` : la hauteur suit la barre d'adresse du navigateur,
       sinon un liseré de fond apparaît en bas dès qu'elle se rétracte. */
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-margin-top: 0;
    scroll-snap-stop: always;   /* une réalisation à la fois, jamais deux d'un coup */
    border: 0; border-radius: 0; background: none;
  }
  /* Ni translation ni fondu : le panneau suivant doit être peint pendant qu'on
     regarde le précédent. Une apparition à l'entrée dans le champ laissait
     voir le fond de page le temps du fondu. */
  .posts-grid--ba .post-card[data-reveal] { opacity: 1; transform: none; transition: none; }
  .posts-grid--ba .post-card:hover { transform: none; box-shadow: none; }
  /* Le comparateur occupe tout le panneau ; le texte se pose par-dessus. */
  .posts-grid--ba .ba,
  .posts-grid--ba .post-card__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  /* Badges Avant/Après en haut du panneau (le bas est pris par le texte), sous
     la zone occupée par le header flottant. */
  .posts-grid--ba .ba__tag { top: 88px; bottom: auto; }
  .posts-grid--ba .post-card__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 60px var(--pad) 104px;   /* 104px : au-dessus de la barre CTA */
    color: #fff; pointer-events: none;
    background: linear-gradient(to top, rgba(26, 18, 11, .88), rgba(26, 18, 11, .55) 45%, transparent);
  }
  .posts-grid--ba .post-card__body p { color: rgba(255, 255, 255, .82); }
  /* Centré sur l'écran, comme l'invite au glissement. */
  .posts-grid--ba .post-card__body .ba-hint { color: #fff; margin: 0 auto 16px; }

  /* Guides d'usage, posés par app.js sur la première carte seulement.
     1. « Glissez le curseur » quelques secondes après l'arrivée sur le panneau ;
     2. « Balayez pour continuer » une fois les deux tiers de l'après dévoilés.
     Chacun disparaît dès que le geste correspondant est amorcé. */
  .is-hint-next .ba-hint--next { display: inline-flex; animation: ba-hint-in .45s ease both; }
  .is-hint-next .ba-hint--next svg { animation: ba-nudge-y 1.8s cubic-bezier(.22, .61, .36, 1) infinite; }
  /* L'invite prend exactement la place laissée libre par la barre CTA (mêmes
     marges, même hauteur de pilule) : le regard reste là où le geste se fait. */
  .is-hint-next .ba-hint--next {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    height: 54px; margin: 0; justify-content: center;
  }

  /* Header minimaliste tant qu'un panneau plein écran est à l'écran : il flotte
     sur la photo, sans bandeau crème ni bordure, comme sur le hero de l'accueil
     (app.js pose .is-over-media). Un voile en dégradé, et non un aplat, garde le
     titre et le menu lisibles quelle que soit la photo — le texte passe en clair
     puisqu'il n'a plus de fond crème sous lui. Au-delà de la galerie (avis,
     footer), la classe tombe : le header retrouve son comportement d'accueil. */
  .site-header.is-over-media {
    transform: none;
    background: linear-gradient(to bottom, rgba(26, 18, 11, .5), transparent);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    /* Aucun filet : sur la photo, la bordure du header trahissait un bandeau. */
    border-bottom: 0; box-shadow: none;
  }
  .site-header.is-over-media::before { opacity: 0; }
  /* Le nom écrit en toutes lettres surchargeait la photo : il cède la place au
     logo, posé dans une pastille crème — même geste que les étiquettes rondes
     du comparateur. Le libellé reste lisible par les lecteurs d'écran
     (aria-label sur le lien). */
  .site-header.is-over-media .brand {
    width: 46px; height: 46px; flex: none; font-size: 0; border-radius: 999px;
    background: #FFFBF3 center / 34px 34px no-repeat url("assets/img/logo-transparent.png");
    background: #FFFBF3 center / 34px 34px no-repeat image-set(url("assets/img/logo-transparent.webp") type("image/webp"), url("assets/img/logo-transparent.png") type("image/png"));
    box-shadow: 0 6px 18px rgba(42, 28, 18, .28);
  }
  .site-header.is-over-media .hamburger span { background: #FFFBF3; }
  /* La barre CTA, elle, reste posée en permanence sur la galerie… */
  .page-template-page-realisations .mobile-cta { transform: none; opacity: 1; pointer-events: auto; }
  /* …sauf pendant l'invite au balayage : elle occupe le bas de l'écran, là même
     où le geste est attendu. On la fond le temps de l'invite (app.js pose
     .is-hinting-next sur <html>), elle revient au premier défilement. */
  html.is-hinting-next .page-template-page-realisations .mobile-cta { opacity: 0; pointer-events: none; }
}

/* =========================================================================
   15sexies. PAGES DE SERVICES (preuve avant/après + étapes)
   Deux blocs ajoutés au gabarit page-service.php pour transformer une page
   descriptive en page de conversion : la preuve visuelle juste sous l'en-tête,
   le déroulé d'intervention juste après le texte.
   ========================================================================= */

/* Grille de preuve : volontairement PAS .posts-grid--ba, qui bascule en
   panneaux plein écran sur mobile (galerie /realisations/). Ici on veut trois
   cartes qui restent des cartes, et qui laissent le visiteur poursuivre sa
   lecture vers le texte et le CTA. */
.posts-grid--proof { grid-template-columns: repeat(3, 1fr); }
.posts-grid--proof .post-card__body h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; }

.service-proof__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 34px;
}

/* Étapes : une liste ordonnée native, numérotée à la main pour garder la
   pastille dorée. Aucun compteur CSS, le chiffre est dans le balisage. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.steps__item {
  position: relative;
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0;
  padding: 26px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps__num {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 999px;
  background: var(--gold); color: var(--dark);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
}
.steps__title { font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; }
.steps__text { color: var(--muted); font-size: 15px; margin: 0; }

/* Le filet qui relie les étapes : purement décoratif, retiré dès que la
   grille se replie sur moins de quatre colonnes. */
.steps__item::after {
  content: ""; position: absolute; top: 43px; right: -22px; width: 22px;
  border-top: 1px dashed var(--line);
}
.steps__item:last-child::after { display: none; }

@media (max-width: 1023px) {
  .posts-grid--proof { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps__item:nth-child(2n)::after { display: none; }
}
@media (max-width: 639px) {
  .posts-grid--proof { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps__item::after { display: none; }
  .service-proof__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================================
   16. RESPONSIVE
   ========================================================================= */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .zones-wrapper { grid-template-columns: 1fr; gap: 18px; }
  .zones-map-wrap { min-height: 340px; }
}
@media (max-width: 1199px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .services-grid { grid-template-columns: 1fr; }
}
/* Entre 760 et 1023px, les six entrées + téléphone + bouton ne tenaient pas :
   « À propos » passait sur deux lignes et le bouton débordait du cadre. */
@media (max-width: 1279px) {
  .header-phone { display: none; }
}
@media (max-width: 1099px) {
  .main-nav, .header-phone { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 759px) {
  .header-cta { display: none; }
  .mobile-cta { display: flex; }
  .split-hero { grid-template-columns: 1fr; min-height: 0; }
  .split-hero__half { min-height: 50vh; min-height: 50svh; align-items: center; }
  .split-hero__ou { top: 50%; }
  .split-hero__half--light::before {
    background-image:
      linear-gradient(to bottom, rgba(244, 237, 223, .94) 0%, rgba(244, 237, 223, .8) 55%, rgba(244, 237, 223, .42) 100%),
      url("assets/img/profil-particulier.jpg");
    background-image:
      linear-gradient(to bottom, rgba(244, 237, 223, .94) 0%, rgba(244, 237, 223, .8) 55%, rgba(244, 237, 223, .42) 100%),
      image-set(url("assets/img/profil-particulier.webp") type("image/webp"), url("assets/img/profil-particulier.jpg") type("image/jpeg"));
  }
  .split-hero__half--dark::before {
    background-image:
      linear-gradient(to bottom, rgba(36, 24, 17, .92) 0%, rgba(36, 24, 17, .78) 55%, rgba(36, 24, 17, .4) 100%),
      url("assets/img/profil-pro.jpg");
    background-image:
      linear-gradient(to bottom, rgba(36, 24, 17, .92) 0%, rgba(36, 24, 17, .78) 55%, rgba(36, 24, 17, .4) 100%),
      image-set(url("assets/img/profil-pro.webp") type("image/webp"), url("assets/img/profil-pro.jpg") type("image/jpeg"));
  }
  .site-footer { padding-bottom: 100px; }
}
@media (max-width: 639px) {
  .focus-grid { grid-template-columns: 1fr; }
  .zones-controls { flex-direction: column; align-items: stretch; }
  .zones-search { flex: 1 1 100%; min-width: 0; }
  .zones-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .zones-filter { flex-shrink: 0; }
  .zones-map-wrap { min-height: 300px; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col:last-child ul { columns: 2; column-gap: 20px; }
  .footer-socials { justify-content: center; margin-top: 30px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .reviews__head { flex-direction: column; align-items: flex-start; }
}

/* Mobile : le bandeau et la réassurance du hero passent en colonne plutôt que
   de se casser en 2 + 1 avec un séparateur orphelin. */
@media (max-width: 560px) {
  .ribbon__inner { flex-direction: column; gap: 6px; padding: 12px var(--pad); }
  .ribbon .sep { display: none; }
  .service-hero__trust { flex-direction: column; align-items: flex-start; gap: 8px; }
}