/* ════════════════════════════════════════════════════════════════════
   MCE — main.css
   Socle global du thème MCE (thème autonome, sans thème parent).
   Contenu : @font-face (self-hosted) · :root (tokens fusionnés charte+maquette)
             · reset · grain texture · scrollbar · prefers-reduced-motion
   Les styles de chaque SECTION (hero, services, etc.) seront ajoutés
   à la suite, section par section, au fur et à mesure de l'intégration.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   00 — FONTS (self-hostées, sous-ensemble latin)
   Les .woff2 vivent dans assets/fonts/. Ils sont servis depuis le thème :
   aucune requête vers Google, rien à configurer côté RGPD.
   font-display: swap → le texte s'affiche immédiatement en police système
   puis bascule, plutôt que de rester invisible.
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ════════════════════════════════════════════════════════════════════
   01 — TOKENS (:root)  —  source de vérité fusionnée
   Base = charte graphique section 10, complétée par les valeurs maquette.
   Décision d'harmonisation :
     • --ln2  : nom officiel de la charte pour le séparateur moyen.
                --line2 conservé en ALIAS pour ne pas casser le HTML existant.
     • --r2, --yh, --sh, --shd : tokens de la charte, absents de la maquette,
                ajoutés ici pour supprimer toutes les valeurs en dur.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* — Couleurs signature — */
  --y:    #FFE600;            /* Jaune signature : CTA, métriques, accents */
  --yd:   #D4BF00;            /* Jaune foncé : hover, textes accent, borders actifs */
  --yh:   rgba(255, 230, 0, .12); /* Jaune transparent : fonds sélection, hovers doux */

  /* — Encre & fonds — */
  --ink:  #0A0A08;           /* Texte principal, nav, footer, CTA principal */
  --bg:   #FFFFFF;           /* Fond principal, cartes, modal */
  --bg2:  #F5F5F2;           /* Off-white : sections alternées, cards secondaires */
  --bg3:  #EDEDE9;           /* Pale : badge hero, inputs, steppers */

  /* — Bordures & séparateurs — */
  --g:    #E8E8E4;           /* Bordure légère */
  --g2:   #D8D8D4;           /* Bordure standard (boutons ghost, inputs) */
  --line:  rgba(10, 10, 8, .06);  /* Séparateur fin */
  --ln2:   rgba(10, 10, 8, .12);  /* Séparateur moyen (nom charte) */
  --line2: var(--ln2);            /* ALIAS rétrocompat maquette — ne pas retirer */

  /* — Texte secondaire/tertiaire — */
  --mid:  #5A5A54;           /* Corps secondaire, descriptions services */
  --mute: #9A9A94;           /* Tertiaire : placeholders, labels */

  /* — Typographies — */
  --gr:   'Space Grotesk', system-ui, sans-serif;
  --mo:   'Space Mono', ui-monospace, monospace;

  /* — Border radius — */
  --r:    8px;               /* Boutons, inputs, cards de choix, process steps */
  --r2:   12px;              /* Hero panel, cards démo, zone résultat modal */

  /* — Ombres — */
  --sh:   0 4px 24px rgba(10, 10, 8, .07);    /* Shadow card */
  --shd:  0 12px 40px rgba(10, 10, 8, .12);   /* Shadow card hover */

  /* — Référence breakpoints (mobile-first, min-width) —
     xs 375px · sm 480px · md 768px · lg 960px · xl 1320px */
}

/* ════════════════════════════════════════════════════════════════════
   02 — RESET
   Léger : on ne remet à zéro que ce qui est réellement utile.
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Couleurs et typographie de base. La barre d'admin WordPress garde ses
   propres styles : on ne touche qu'aux propriétés dont on a besoin. */
body {
  font-family: var(--gr);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* Boutons : neutralisation pour nos composants MCE. Le sélecteur reste
   scopé sur nos classes pour ne pas casser les boutons de l'éditeur WP. */
/* Enveloppé dans :where() — spécificité nulle. Sans ça, le sélecteur
   d'attribut (0,2,1) l'emportait sur les classes des composants (0,1,0)
   et effaçait le fond de .btn-main, .bnext, .ch… qui apparaissaient alors
   en texte nu. Avec :where(), toute déclaration de composant gagne. */
:where(
  button[class^="btn-"],
  button[class*=" btn-"],
  button.nav-cta,
  button.mm-cta,
  button.sticky-mob-cta,
  button.bnext,
  button.bback,
  button.hamburger,
  button.mx,
  button.hx,
  button.help-a,
  button.ch
) {
  font-family: var(--gr);
  cursor: pointer;
  border: none;
  background: none;
}

/* ════════════════════════════════════════════════════════════════════
   03 — GRAIN TEXTURE
   Charte règle couleur n°5 + checklist : opacity 0.4 MAXIMUM.
   (La maquette était à .5 — corrigé ici à .4.)
   ════════════════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ════════════════════════════════════════════════════════════════════
   04 — SCROLLBAR (desktop uniquement)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg2); }
  ::-webkit-scrollbar-thumb { background: var(--g2); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--yd); }
}

/* ════════════════════════════════════════════════════════════════════
   05 — ACCESSIBILITÉ : prefers-reduced-motion
   Exigé par la charte (section 8 + checklist) mais ABSENT de la maquette.
   On neutralise les animations continues (breathe, blink) et on réduit
   les transitions/animations one-shot pour les utilisateurs concernés.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Les éléments décoratifs animés restent dans leur état "repos". */
  .hero-glow { animation: none !important; }
  .hb-dot { animation: none !important; opacity: 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  STYLES DE SECTIONS  ▼▼▼
   Les blocs ci-dessous seront ajoutés un par un au fil de l'intégration.
   Ordre prévu : Hero → Metrics → Services → Témoignages → Primes →
                 Processus → CTA finale → (Modal/Help/Sticky = JS).
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   [HERO]
   Bloc d'accueil : grille de fond masquée + glow animé + contenu + panel.
   Mobile-first. Le panel droit apparaît à partir de 960px.
   Toutes les valeurs sont tokenisées (aucune valeur en dur).
   ════════════════════════════════════════════════════════════════════ */
.mce-hero {
  position: relative;
  min-height: calc(100svh - 100px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ln2);
  overflow: hidden;
  z-index: 1;
}

/* Grille de fond, masquée en dégradé radial */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);
}

/* Halo jaune animé */
.hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 0, .22) 0%, transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .8; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1;  }
}
@media (min-width: 768px) {
  .hero-glow { width: 700px; height: 700px; top: 50%; }
}

/* Conteneur interne */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .hero-inner { padding: 4rem 2.5rem; gap: 3rem; }
}
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}

/* Badge note Google */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.5rem;
  padding: .4rem .85rem;
  background: var(--bg3);
  border: 1px solid var(--ln2);
  border-radius: 4px;
}
.hb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--y);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hb-text {
  font-family: var(--mo);
  font-size: .67rem;
  letter-spacing: .08em;
  color: var(--ink);
}

/* Titre principal */
.mce-hero h1 {
  font-family: var(--gr);
  font-size: clamp(2.8rem, 11vw, 7rem);
  font-weight: 700;
  line-height: .93;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 1.5rem;
  /* Empêche un mot long (« conformité ») d'être coupé au milieu
     sur les très grands écrans : on garde chaque mot entier. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.mce-hero h1 .y { color: var(--yd); }
.mce-hero h1 .slash {
  display: block;
  position: relative;
  color: var(--mute);
  font-weight: 300;
}
.mce-hero h1 .slash::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--g2), transparent);
}
@media (min-width: 480px) {
  .mce-hero h1 { font-size: clamp(3.2rem, 9vw, 7rem); }
}

/* Sous-titre */
.hero-sub {
  max-width: 480px;
  margin-bottom: 2rem;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
@media (min-width: 768px) { .hero-sub { font-size: 1.05rem; } }

/* Groupe de CTA */
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (min-width: 480px) {
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
}

.btn-main {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 1.75rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--y);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .15s, box-shadow .15s;
}
@media (min-width: 480px) { .btn-main { width: auto; } }
.btn-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 230, 0, .18);
  transform: translateX(-101%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: var(--shd);
}
.btn-main:hover::after { transform: translateX(0); }
.btn-main svg { flex-shrink: 0; }

.btn-ghost {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--g2);
  border-radius: var(--r);
  color: var(--mid);
  font-size: .85rem;
  font-weight: 500;
  transition: border-color .15s, color .15s;
}
@media (min-width: 480px) { .btn-ghost { width: auto; } }
.btn-ghost:hover { border-color: var(--yd); color: var(--yd); }

/* Note sous les CTA */
.hero-note {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
  font-family: var(--mo);
  font-size: .63rem;
  letter-spacing: .06em;
  color: var(--mute);
}
.hero-note::before { content: '→'; color: var(--yd); font-weight: 700; }

/* ── Panel droit « Comment ça marche » ── */
.hero-panel {
  overflow: hidden;
  background: var(--bg);
  border: 1.5px solid var(--ln2);
  border-radius: var(--r2);
  box-shadow: var(--sh);
}
.hp-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--ln2);
}
.hp-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--y);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
}
.hp-title { font-size: .85rem; font-weight: 600; color: var(--ink); }
.hp-sub { margin-top: .1rem; font-size: .7rem; color: var(--mid); }

.steps-ul { list-style: none; margin: 0; padding: 0; }
.step-li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.step-li:last-child { border-bottom: none; }
.step-li:hover { background: var(--bg2); }
.step-n {
  flex-shrink: 0;
  min-width: 24px;
  margin-top: .15rem;
  font-family: var(--mo);
  font-size: .65rem;
  font-weight: 700;
  color: var(--yd);
}
.step-c strong {
  display: block;
  margin-bottom: .15rem;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink);
}
.step-c span {
  font-size: .72rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mid);
}

/* Panel masqué en mobile, révélé à partir de 960px — géré en CSS pur
   (remplace l'ancien display:none + JS de la maquette : plus de "saut"
   visuel au chargement, et un cran de perf en moins côté JS). */
.hero-panel { display: none; }
@media (min-width: 960px) {
  .hero-panel { display: block; }
}
/* ════════════════════════════════════════════════════════════════════
   [METRICS]
   Bande jaune horizontale, 5 chiffres clés.
   Mobile : grille 2 colonnes (le 5e chiffre passe sur toute la largeur).
   Desktop (≥768px) : 5 colonnes égales.
   Texte toujours en --ink sur le jaune = contraste conforme charte.
   ════════════════════════════════════════════════════════════════════ */
.mce-metrics {
  position: relative;
  z-index: 1;
  background: var(--y);
}
.metrics-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .metrics-inner {
    grid-template-columns: repeat(5, 1fr);
    padding: 1.25rem 2.5rem;
  }
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .85rem .5rem;
  border-right: 1px solid rgba(10, 10, 8, .1);
}
/* Mobile (2 col) : pas de bordure droite sur la 2e colonne */
.metric:nth-child(2n) { border-right: none; }

/* Mobile : le 5e chiffre occupe toute la largeur, séparé par un trait */
.metric:nth-child(5) {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(10, 10, 8, .1);
  border-right: none;
}

@media (min-width: 768px) {
  /* Desktop : séparateurs verticaux entre toutes les colonnes */
  .metric {
    border-right: 1px solid rgba(10, 10, 8, .12);
    border-top: none;
  }
  .metric:last-child { border-right: none; }
  .metric:nth-child(5) { grid-column: auto; border-top: none; }
}

.metric-val {
  font-family: var(--mo);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
@media (min-width: 768px) { .metric-val { font-size: 1.6rem; } }

.metric-lbl {
  margin-top: .25rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(10, 10, 8, .6);
}
/* ════════════════════════════════════════════════════════════════════
   STRUCTURE COMMUNE DES SECTIONS
   Réutilisée par Services, Témoignages, Primes, Processus.
   .mce-section = <section> · .sec = conteneur centré · titres & tags.
   ════════════════════════════════════════════════════════════════════ */
.mce-section {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--ln2);
}
.mce-section--alt { background: var(--bg2); }

.sec {
  max-width: 1320px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
}
@media (min-width: 768px) { .sec { padding: 5rem 2.5rem; } }
@media (min-width: 1024px) { .sec { padding: 7rem 2.5rem; } }

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.25rem;
  font-family: var(--mo);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yd);
}
.sec-tag::before { content: '//'; opacity: .45; }

.sec-h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .97;
  color: var(--ink);
}
.sec-h2 .y { color: var(--yd); }

.sec-p {
  max-width: 480px;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--mid);
}
@media (min-width: 768px) { .sec-p { font-size: .95rem; } }

/* ════════════════════════════════════════════════════════════════════
   [SERVICES]
   2 colonnes ≥960px : bloc titre à gauche, liste numérotée à droite.
   ════════════════════════════════════════════════════════════════════ */
.srv-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 960px) {
  .srv-layout {
    grid-template-columns: 380px 1fr;
    gap: 6rem;
    align-items: start;
  }
}

.srv-list { list-style: none; margin: 0; padding: 0; }

.srv-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ln2);
  transition: padding-left .15s;
}
.srv-item:first-child { border-top: 1px solid var(--ln2); }
.srv-item:hover { padding-left: .4rem; }

.srv-num {
  flex-shrink: 0;
  margin-top: .25rem;
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  color: var(--yd);
}
.srv-body { flex: 1; }
.srv-name {
  margin-bottom: .25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.srv-desc {
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
}
.srv-price {
  flex-shrink: 0;
  margin-top: .2rem;
  font-family: var(--mo);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--yd);
}
/* ════════════════════════════════════════════════════════════════════
   [TEMOIGNAGES]
   Fond off-white (.mce-section--alt). 3 cartes en grille (1 col mobile,
   3 col ≥768px) avec fines séparations. Réutilise la structure commune.
   ════════════════════════════════════════════════════════════════════ */
.temos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--ln2);
  border: 1px solid var(--ln2);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .temos-grid { grid-template-columns: repeat(3, 1fr); }
}

.temo {
  padding: 1.75rem;
  background: var(--bg2);
  transition: background .15s;
}
@media (min-width: 768px) { .temo { padding: 2rem; } }
.temo:hover { background: var(--bg); }

.temo-stars { display: flex; gap: 2px; margin-bottom: .9rem; }
.temo-stars span { color: var(--y); font-size: .85rem; }

.temo-quote {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--mo);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--yd);
  opacity: .6;
}

.temo-text {
  margin-bottom: 1.25rem;
  font-size: .83rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
}

.temo-author { display: flex; align-items: center; gap: .65rem; }
.temo-av {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--ink);
  color: var(--y);
  font-family: var(--mo);
  font-size: .7rem;
  font-weight: 700;
}
.temo-name { font-size: .8rem; font-weight: 600; color: var(--ink); }
.temo-loc { font-size: .68rem; font-weight: 300; color: var(--mute); }

.temos-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
  font-family: var(--mo);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.temos-footer::before,
.temos-footer::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--ln2);
}
/* ════════════════════════════════════════════════════════════════════
   [PRIMES]
   2 cartes (1 col mobile, 2 col ≥768px). La carte .featured est sombre
   (fond --ink) pour mettre en avant l'offre Bruxelles. Réutilise la
   structure commune (.sec, .sec-tag, .sec-h2, .sec-p).
   ════════════════════════════════════════════════════════════════════ */
.prime-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .prime-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.prime-card {
  padding: 1.75rem;
  background: var(--bg2);
  border: 1.5px solid var(--ln2);
  border-radius: 10px;
  transition: border-color .2s;
}
.prime-card:hover { border-color: var(--yd); }
.prime-card.featured {
  background: var(--ink);
  border-color: var(--ink);
}

.pc-label {
  margin-bottom: .85rem;
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.prime-card.featured .pc-label { color: rgba(255, 230, 0, .5); }

.pc-val {
  margin-bottom: .4rem;
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--yd);
}
.prime-card.featured .pc-val { color: var(--y); }

.pc-desc {
  margin-bottom: 1.1rem;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--mid);
}
.prime-card.featured .pc-desc { color: rgba(255, 255, 255, .55); }

.pc-items { list-style: none; margin: 0; padding: 0; }
.pc-items li {
  display: flex;
  gap: .5rem;
  padding: .28rem 0;
  font-size: .76rem;
  font-weight: 400;
  color: var(--mid);
}
.prime-card.featured .pc-items li { color: rgba(255, 255, 255, .6); }
.pc-items li::before {
  content: '→';
  flex-shrink: 0;
  font-family: var(--mo);
  font-size: .72rem;
  font-weight: 700;
  color: var(--yd);
}
.prime-card.featured .pc-items li::before { color: var(--y); }
/* ════════════════════════════════════════════════════════════════════
   [PROCESSUS]
   Fond off-white (.mce-section--alt). 4 étapes en grille :
   2 col mobile, 4 col ≥768px. Gestion fine des bordures internes pour
   éviter les doublons selon le nombre de colonnes.
   ════════════════════════════════════════════════════════════════════ */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--ln2);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); }
}

.proc-step {
  padding: 1.5rem 1.25rem;
  background: var(--bg);
  border-right: 1px solid var(--ln2);
  border-bottom: 1px solid var(--ln2);
  transition: background .15s;
}
/* Mobile (2 col) : pas de bordure droite en fin de ligne, ni de bordure
   basse sur la dernière ligne (étapes 3 et 4). */
.proc-step:nth-child(2n) { border-right: none; }
.proc-step:nth-child(3),
.proc-step:nth-child(4) { border-bottom: none; }

@media (min-width: 768px) {
  .proc-step { padding: 2rem; border-bottom: none; }
  .proc-step:nth-child(2n) { border-right: 1px solid var(--ln2); }
  .proc-step:last-child { border-right: none; }
}
.proc-step:hover { background: var(--bg2); }

.proc-n {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--yd);
}
.proc-title {
  margin-bottom: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.proc-desc {
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--mid);
}
/* ════════════════════════════════════════════════════════════════════
   [CTA-FINALE]
   Grand bloc jaune plein avec grille de fond subtile. Titre massif,
   sous-titre, 2 boutons (sombre + ghost). Texte toujours en --ink.
   ════════════════════════════════════════════════════════════════════ */
.cta-fin {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 5rem 1.25rem;
  text-align: center;
  background: var(--y);
}
@media (min-width: 768px) { .cta-fin { padding: 7rem 2.5rem; } }
.cta-fin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 8, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 8, .05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.cf-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}
.cf-mono {
  margin-bottom: 1.5rem;
  font-family: var(--mo);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(10, 10, 8, .4);
}
.cf-h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.4rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .92;
  color: var(--ink);
}
.cf-h2 .dim {
  display: block;
  position: relative;
  font-weight: 300;
  color: rgba(10, 10, 8, .3);
}
.cf-h2 .dim::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .08em;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  border-radius: 1px;
  background: rgba(10, 10, 8, .2);
}
.cf-sub {
  max-width: 480px;
  margin: 0 auto 2.5rem;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(10, 10, 8, .6);
}
@media (min-width: 768px) { .cf-sub { font-size: 1rem; } }

.cf-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
@media (min-width: 480px) {
  .cf-btns { flex-direction: row; justify-content: center; }
}

.btn-cf-main {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 2rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--y);
  font-size: .9rem;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s, background .15s;
}
@media (min-width: 480px) { .btn-cf-main { width: auto; } }
.btn-cf-main:hover {
  background: var(--ink-hover);
  transform: translateY(-2px);
  box-shadow: var(--shd);
}

.btn-cf-ghost {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border: 2px solid rgba(10, 10, 8, .2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .15s;
}
@media (min-width: 480px) { .btn-cf-ghost { width: auto; } }
.btn-cf-ghost:hover { border-color: var(--ink); }
/* ════════════════════════════════════════════════════════════════════
   [MODAL] — MODAL DEVIS + HELP OVERLAY
   Fenêtre interactive multi-étapes. Mobile-first : feuille qui remonte
   du bas (bottom sheet) sur mobile, modale centrée sur desktop.
   Le comportement (étapes, validation) est géré par mce-modal.js.
   ════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.ovl {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 10, 8, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
}
@media (min-width: 768px) {
  .ovl { align-items: center; padding: 1.5rem; }
}
.ovl.on { display: flex; animation: fIn .2s ease; }
@keyframes fIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Boîte modale ── */
.modal {
  width: 100%;
  max-height: 92svh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 60px rgba(10, 10, 8, .2);
  animation: slideUp .32s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) {
  .modal {
    max-width: 540px;
    max-height: 90svh;
    border-radius: 16px;
    box-shadow: 0 40px 100px rgba(10, 10, 8, .2);
    animation: mUp .32s cubic-bezier(.4, 0, .2, 1);
  }
}
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.modal-handle {
  width: 36px;
  height: 4px;
  margin: .85rem auto .25rem;
  border-radius: 2px;
  background: var(--g2);
}
@media (min-width: 768px) { .modal-handle { display: none; } }

/* ── Barre de progression ── */
.m-prog { height: 2px; background: var(--g); overflow: hidden; }
.m-bar { height: 100%; background: var(--yd); transition: width .48s cubic-bezier(.4, 0, .2, 1); }

.m-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem 0;
}
@media (min-width: 768px) { .m-top { padding: 1.25rem 1.75rem 0; } }
.m-lbl {
  font-family: var(--mo);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yd);
}
.mx {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg2);
  color: var(--mid);
  transition: background .15s, color .15s, transform .15s;
}
.mx:hover { background: var(--ink); color: var(--y); transform: rotate(90deg); }

.mbody { padding: 1.5rem 1.5rem 1.75rem; }
@media (min-width: 768px) { .mbody { padding: 1.75rem 1.75rem 2rem; } }
@media (max-width: 767px) { .mbody { padding-bottom: 2.5rem; } }

/* ── Étapes ── */
.stp { display: none; }
.stp.on { display: block; animation: mUp .28s cubic-bezier(.4, 0, .2, 1); }
.sq {
  margin-bottom: .45rem;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}
.sq .y { color: var(--yd); }
.shint {
  margin-bottom: 1.5rem;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
}

/* ── Choix (boutons radio) ── */
.chs { display: grid; gap: .5rem; }
.ch2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 360px) { .ch2 { grid-template-columns: 1fr; } }
.ch {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 56px;
  padding: .95rem 1rem;
  text-align: left;
  background: var(--bg2);
  border: 1.5px solid var(--ln2);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.ch:hover { border-color: var(--yd); background: rgba(255, 230, 0, .05); }
.ch:active { transform: scale(.98); }
.ch.on {
  border-color: var(--yd);
  background: rgba(212, 191, 0, .08);
  box-shadow: 0 0 0 3px rgba(212, 191, 0, .15);
}
.ch-i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--ln2);
  transition: background .15s, border-color .15s;
}
.ch.on .ch-i { background: var(--yd); border-color: var(--yd); }
.ch-i svg { stroke: var(--mid); transition: stroke .15s; }
.ch.on .ch-i svg { stroke: var(--ink); }
.ch-t strong { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); }
.ch-t small { display: block; margin-top: .1rem; font-size: .7rem; font-weight: 300; color: var(--mid); }
.ch-dot {
  margin-left: auto;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--g2);
  transition: background .15s, border-color .15s;
}
.ch.on .ch-dot { background: var(--yd); border-color: var(--yd); }
.ch-dot svg { opacity: 0; stroke: var(--ink); transition: opacity .15s; }
.ch.on .ch-dot svg { opacity: 1; }

/* ── Lien d'aide ── */
.help-a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  margin-bottom: 1.25rem;
  padding-bottom: .1rem;
  font-family: var(--mo);
  font-size: .68rem;
  font-weight: 400;
  color: var(--yd);
  border-bottom: 1px dashed rgba(212, 191, 0, .35);
  transition: border-color .15s;
}
.help-a:hover { border-bottom-color: var(--yd); }

/* ── Note photo ── */
.ph-note {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: .65rem .85rem;
  background: rgba(212, 191, 0, .08);
  border: 1px solid rgba(212, 191, 0, .25);
  border-radius: 6px;
  font-size: .73rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--yd);
}
.ph-note svg { flex-shrink: 0; margin-top: 1px; stroke: var(--yd); }

/* ── Grille photos ── */
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ph-slot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .75rem;
  text-align: center;
  background: var(--bg2);
  border: 1.5px dashed var(--ln2);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ph-slot:hover { border-color: var(--yd); background: rgba(212, 191, 0, .05); }
.ph-slot.ok { border-style: solid; border-color: var(--yd); }
.ph-slot.ok .pi,
.ph-slot.ok .pn,
.ph-slot.ok .pt { display: none; }
.pi svg { stroke: var(--mute); }
.pn { font-size: .76rem; font-weight: 600; color: var(--ink); }
.pt { font-size: .65rem; font-weight: 300; line-height: 1.3; color: var(--mute); }
.preq {
  position: absolute;
  top: 6px;
  right: 7px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--mo);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--g);
  color: var(--mute);
}
.ph-slot.ok .preq { background: var(--yd); color: var(--ink); }
.ph-grid input[type=file] { display: none; }

/* ── Certificat de conformité : grande case sous la grille ── */
.ph-wide {
  width: 100%;
  margin-top: .5rem;
  aspect-ratio: auto;
  min-height: 92px;
  flex-direction: row;
  justify-content: flex-start;
  gap: .7rem;
  text-align: left;
  padding: .85rem 1rem;
}
.ph-wide input[type=file] { display: none; }
.ph-wide .pi { flex-shrink: 0; }
.ph-wide.ok .pi,
.ph-wide.ok .pn,
.ph-wide.ok .pt { display: none; }

/* Nom du fichier, quand l'aperçu est impossible (PDF). */
.ph-file {
  max-width: calc(100% - 2.6rem);
  overflow: hidden;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Bouton « retirer ce fichier » ── */
.ph-del {
  position: absolute;
  top: .35rem;
  right: .35rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #fff;
  background: rgba(10, 10, 8, .72);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ph-del:hover,
.ph-del:focus-visible { background: var(--ink); }

/* ── Zone de commentaire ── */
.ph-comm { margin-top: .85rem; }
.ph-comm textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  font-size: .8rem;
  color: var(--ink);
  background: var(--bg2);
  border: 1.5px solid var(--ln2);
  border-radius: var(--r);
  resize: vertical;
}
.ph-comm textarea:focus {
  border-color: var(--yd);
  outline: 0;
}
.ph-comm-hint {
  margin: .3rem 0 0;
  font-size: .65rem;
  font-weight: 300;
  color: var(--mute);
}

/* ── Champs formulaire ── */
.flds { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
@media (max-width: 380px) { .flds { grid-template-columns: 1fr; } }
.fld { display: flex; flex-direction: column; gap: .28rem; }
.fld.full { grid-column: 1 / -1; }
.fld label {
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
}
.fld input {
  min-height: 48px;
  padding: .8rem .9rem;
  background: var(--bg2);
  border: 1.5px solid var(--ln2);
  border-radius: 6px;
  font-family: var(--gr);
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink);
  -webkit-appearance: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fld input:focus {
  outline: none;
  border-color: var(--yd);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(212, 191, 0, .12);
}
.fld input::placeholder { color: var(--mute); }

/* ── Case RGPD ── */
.rgpd-box {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-bottom: .5rem;
  padding: .75rem .9rem;
  background: var(--bg2);
  border: 1px solid var(--ln2);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mid);
}
.rgpd-box input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  accent-color: var(--yd);
}
.rgpd-box a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* ── Navigation entre étapes ── */
.m-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ln2);
}
.bback {
  min-height: 48px;
  padding: .8rem 1.25rem;
  border: 1.5px solid var(--g2);
  border-radius: var(--r);
  font-family: var(--gr);
  font-size: .82rem;
  font-weight: 500;
  color: var(--mid);
  transition: border-color .15s, color .15s;
}
.bback:hover { border-color: var(--ink); color: var(--ink); }
.bnext {
  min-height: 48px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.5rem;
  background: var(--ink);
  color: var(--y);
  border-radius: var(--r);
  font-family: var(--gr);
  font-size: .84rem;
  font-weight: 700;
  transition: background .15s, color .15s, transform .15s;
}
.bnext:hover:not(:disabled) { background: var(--yd); color: var(--ink); transform: translateY(-1px); }
.bnext:disabled { opacity: .2; cursor: not-allowed; }

/* ── Écran résultat ── */
.res { display: none; padding: .5rem 0; text-align: center; }
.res.on { display: block; animation: mUp .45s ease; }
.res-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--yd);
  color: var(--ink);
  font-size: 1.5rem;
  animation: pop .55s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pop { 0% { transform: scale(0) rotate(-180deg); } 80% { transform: scale(1.08); } 100% { transform: scale(1) rotate(0); } }
.res h2 { margin-bottom: .5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.res p { margin-bottom: 1.5rem; font-size: .82rem; font-weight: 300; line-height: 1.6; color: var(--mid); }
.res-box { margin-bottom: 1rem; padding: 1.5rem; background: var(--ink); border-radius: 10px; }
.rl {
  margin-bottom: .45rem;
  font-family: var(--mo);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 230, 0, .5);
}
.rp { margin-bottom: .35rem; font-size: clamp(1.75rem, 6vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--y); }
.rs { font-size: .72rem; font-weight: 300; color: rgba(255, 255, 255, .4); }
.res-disc {
  margin-bottom: .75rem;
  padding: .8rem 1rem;
  background: var(--bg2);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: left;
  color: var(--mid);
}
.btn-rdv {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.75rem;
  background: var(--yd);
  color: var(--ink);
  border-radius: var(--r);
  font-family: var(--gr);
  font-size: .85rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.btn-rdv:hover { background: var(--ink); color: var(--y); }

/* ════════════════════════════════════════════════════════════════════
   HELP OVERLAY (mono/tri : comment le savoir ?)
   ════════════════════════════════════════════════════════════════════ */
.hovl {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 10, 8, .6);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
@media (min-width: 768px) { .hovl { align-items: center; padding: 1.5rem; } }
.hovl.on { display: flex; animation: fIn .2s ease; }
.hmod {
  position: relative;
  width: 100%;
  max-height: 85svh;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 60px rgba(10, 10, 8, .15);
  animation: slideUp .32s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) {
  .hmod {
    max-width: 600px;
    max-height: 88svh;
    padding: 2.25rem;
    border-radius: 16px;
    box-shadow: 0 40px 100px rgba(10, 10, 8, .2);
    animation: mUp .3s cubic-bezier(.4, 0, .2, 1);
  }
}
.hmod h2 { margin-bottom: .4rem; font-size: clamp(1.4rem, 5vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.hmod h2 .y { color: var(--yd); }
.hsub { margin-bottom: 1.5rem; font-size: .8rem; font-weight: 300; line-height: 1.6; color: var(--mid); }
.hx {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg2);
  color: var(--mid);
  transition: background .15s, color .15s, transform .15s;
}
.hx:hover { background: var(--ink); color: var(--y); transform: rotate(90deg); }
.meth { display: flex; gap: .75rem; margin-bottom: .65rem; padding: .95rem 1rem; border-radius: var(--r); }
.m1 { background: rgba(212, 191, 0, .08); border: 1px solid rgba(212, 191, 0, .2); }
.m2 { background: var(--bg2); border: 1px solid var(--ln2); }
.mn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--mo);
  font-size: .7rem;
  font-weight: 700;
}
.m1 .mn { background: var(--yd); color: var(--ink); }
.m2 .mn { background: var(--ink); color: var(--y); }
.mt { display: block; margin-bottom: .2rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.mb { font-size: .77rem; font-weight: 300; line-height: 1.65; color: var(--mid); }
.dg { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.4rem 0; }
.dc { padding: .95rem; background: var(--bg2); border: 1px solid var(--ln2); border-radius: var(--r); }
.dt { margin-bottom: .6rem; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.mono-c .dt { color: var(--yd); }
.dc ul { list-style: none; margin: 0; padding: 0; font-size: .74rem; font-weight: 300; color: var(--mid); }
.dc li { display: flex; gap: .45rem; padding: .27rem 0; }
.dc li::before { content: '→'; flex-shrink: 0; font-family: var(--mo); font-size: .7rem; font-weight: 700; color: var(--yd); }
.htip {
  display: flex;
  gap: .5rem;
  padding: .8rem .95rem;
  background: rgba(212, 191, 0, .08);
  border-left: 2px solid var(--yd);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--mid);
}
.htip strong { color: var(--yd); font-weight: 600; }
.hclose {
  width: 100%;
  min-height: 50px;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem;
  background: var(--ink);
  color: var(--y);
  border-radius: var(--r);
  font-family: var(--gr);
  font-size: .85rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.hclose:hover { background: var(--yd); color: var(--ink); }
/* ════════════════════════════════════════════════════════════════════
   [TARIFS]
   3 cartes détaillées : Bornes / Tableaux / Dépannage 24-7.
   ════════════════════════════════════════════════════════════════════ */
.tarifs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .tarifs-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.tarif-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1.5px solid var(--ln2);
  border-radius: var(--r2);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tarif-card:hover {
  border-color: var(--yd);
  transform: translateY(-2px);
  box-shadow: var(--sh);
}
.tarif-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--ln2);
}
.tarif-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--y);
  color: var(--ink);
}
.tarif-title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.tarif-sub {
  margin-top: .1rem;
  font-family: var(--mo);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
}
.tarif-body { flex: 1; padding: 1.25rem 1.5rem; }
.tarif-section + .tarif-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--ln2);
}
.tarif-section-lbl {
  margin-bottom: .65rem;
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yd);
}
.tarif-list { list-style: none; margin: 0; padding: 0; }
.tarif-li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .45rem 0;
}
.tarif-li + .tarif-li { border-top: 1px solid var(--line); }
.tarif-li-name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.tarif-li-name small {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 300;
  color: var(--mid);
}
.tarif-li-price {
  flex-shrink: 0;
  font-family: var(--mo);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}
.tarif-li-price .opt {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 400;
  color: var(--yd);
}
.tarif-foot {
  padding: .9rem 1.5rem;
  background: var(--bg2);
  border-top: 1px solid var(--ln2);
  font-size: .68rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mid);
}
.tarif-foot strong { color: var(--ink); font-weight: 600; }

/* ── Ajustements lisibilité des cartes Tarifs ── */

/* Empêche la coupure brutale des mots dans les noms de packs */
.tarif-li-name {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Plus de respiration entre le nom et le prix */
.tarif-li {
  gap: 1rem;
  align-items: flex-start;
}

/* Sur tablette (768-1023px), les 3 cartes en une colonne sont trop denses :
   on passe en 2 colonnes intermédiaires plus aérées.
   Sur grand écran (≥1024px), on garde les 3 colonnes côte à côte. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tarifs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   NOTE — Les surcharges de l'en-tête et du pied de page Kadence qui se
   trouvaient ici ont été retirées : le thème est désormais autonome et
   fournit son propre header.php / footer.php. Les styles correspondants
   vivent aux sections 20 à 23 en fin de fichier.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   STICKY CTA MOBILE
   Barre fixe en bas d'écran, visible uniquement sur mobile (<768px).
   Apparaît dès qu'on scrolle un peu (géré par mce-modal.js).
   ════════════════════════════════════════════════════════════════════ */
.sticky-mob {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 250;
  display: flex;
  gap: .6rem;
  padding: .75rem 1.25rem;
  background: var(--ink);
  box-shadow: 0 -4px 20px rgba(10, 10, 8, .15);
  transform: translateY(0);
  transition: transform .3s ease;
}
@media (min-width: 768px) { .sticky-mob { display: none; } }

.sticky-mob.hidden { transform: translateY(100%); }

.sticky-mob .sticky-mob-cta {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--y) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--gr) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sticky-mob .sticky-mob-cta:hover,
.sticky-mob .sticky-mob-cta:active,
.sticky-mob .sticky-mob-cta:focus {
  background: var(--yd) !important;
  color: var(--ink) !important;
}

.sticky-mob .sticky-mob-phone {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .75) !important;
  border: none !important;
  border-radius: 6px !important;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sticky-mob .sticky-mob-phone:hover,
.sticky-mob .sticky-mob-phone:active {
  background: rgba(255, 255, 255, .2) !important;
  color: var(--bg) !important;
}

@media (max-width: 767px) {
  body { padding-bottom: 70px; }
}

/* ════════════════════════════════════════════════════════════════════
   CORRECTIFS VISUELS
   ════════════════════════════════════════════════════════════════════ */

/* CORRECTIF 1 — Supprime l'espace blanc parasite au-dessus du contenu
   (marges par défaut appliquées par certains plugins d'éditeur). */
.content-area,
.site-main,
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.entry-content > .wp-block-html:first-child,
.entry-content > *:first-child {
  margin-top: 0 !important;
}

/* CORRECTIF 2 — Force la couleur des liens "nus" sur le gris foncé
   de la charte (au lieu du bleu par défaut de WordPress).
   Le :not([class]) protège les boutons stylés (qui ont déjà leur classe). */
.entry-content a:not([class]) {
  color: var(--mid);
  transition: color .15s;
}
.entry-content a:not([class]):hover {
  color: var(--ink);
}

/* CORRECTIF 3 — Hero : « Pas en 2 sem. » passe du gris pâle délavé
   au gris foncé lisible, tout en gardant le trait barré. */
.mce-hero h1 .slash {
  color: var(--mid);
}
/* ════════════════════════════════════════════════════════════════════
   20 — TOPBAR
   Bandeau jaune pleine largeur : preuve + zone + agrément + téléphone.
   Le jaune est ici une SURFACE (texte en --ink), jamais du texte.
   ════════════════════════════════════════════════════════════════════ */
.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1.25rem;
  background: var(--y);
  color: var(--ink);
  font-family: var(--mo);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tb-hl  { font-weight: 700; }
.tb-it  { opacity: .72; }
.tb-sep { opacity: .38; }
.tb-tel {
  font-weight: 700;
  border-bottom: 1px solid rgba(10, 10, 8, .35);
  transition: border-color .15s;
}
.tb-tel:hover { border-bottom-color: var(--ink); }

/* Sous 600px on ne garde que l'accroche et le téléphone : le reste
   est de l'ornement qui ferait passer la barre sur trois lignes. */
@media (max-width: 600px) {
  .tb-it, .tb-sep { display: none; }
  .topbar { gap: .75rem; font-size: .65rem; }
}

/* ════════════════════════════════════════════════════════════════════
   21 — NAVIGATION
   Sticky, fond blanc translucide, séparée par une simple hairline —
   pas d'ombre portée : la charte groupe par filets, pas par élévation.
   ════════════════════════════════════════════════════════════════════ */
.mce-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--g);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1320px;
  height: 64px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 960px) {
  .nav-inner { padding: 0 2.5rem; }
}

/* — Logo — */
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mo);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  background: var(--y);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
}
.logo-name { color: var(--ink); }
.logo-name span {
  display: none;
  color: var(--mute);
  font-weight: 400;
  font-size: .8rem;
}
@media (min-width: 1100px) {
  .logo-name span { display: inline; }
}

/* — Liens — */
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
}
.nav-links a {
  position: relative;
  color: var(--mid);
  font-size: .82rem;
  letter-spacing: .01em;
  transition: color .15s;
}
.nav-links a:hover,
.nav-links .current-menu-item > a { color: var(--ink); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--y);
  transition: width .15s;
}
.nav-links a:hover::after { width: 100%; }

/* — Actions à droite — */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.nav-phone {
  display: none;
  align-items: center;
  gap: .4rem;
  color: var(--ink);
  font-family: var(--mo);
  font-size: .82rem;
  font-weight: 700;
}
.nav-phone svg { stroke: var(--yd); }
@media (min-width: 768px) {
  .nav-phone { display: flex; }
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.25rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--gr);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background .15s, transform .15s;
}
.nav-btn:hover {
  background: var(--y);
  color: var(--ink);
  transform: translateY(-1px);
}

/* — Hamburger — */
.ham {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--g2);
  border-radius: var(--r);
  background: none;
  cursor: pointer;
}
.ham span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .18s, opacity .18s;
}
.ham.open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.ham.open span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 960px) {
  .ham { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   22 — MENU MOBILE
   Panneau plein écran sous la nav. Masqué via l'attribut [hidden] :
   retiré par le JS à l'ouverture, ce qui le sort aussi de l'ordre de
   tabulation quand il est fermé.
   ════════════════════════════════════════════════════════════════════ */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Le panneau couvre toute la fenêtre et laisse la barre de navigation
     (z-index 200) au-dessus : le bouton de fermeture reste cliquable et
     aucun filet de page ne dépasse, quelle que soit la hauteur exacte de
     la topbar — qui change avec la largeur d'écran. */
  padding: 7rem 1.5rem 2rem;
  background: var(--bg);
  overflow-y: auto;
}
.mmenu[hidden] { display: none; }
.mmenu .nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}
.mmenu .nav-links li { width: 100%; }
.mmenu .nav-links a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 500;
}
.mmenu .nav-links a::after { display: none; }
.mmenu-tel {
  font-family: var(--mo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.mmenu-cta { width: 100%; justify-content: center; }
@media (min-width: 960px) {
  .mmenu { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   23 — PIED DE PAGE
   Fond encre, texte clair : le seul bloc sombre de la page avec la
   carte Renolution. Ferme la page sans rivaliser avec la CTA jaune.
   ════════════════════════════════════════════════════════════════════ */
.mce-footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--bg);
}
.foot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  text-align: center;
}
.foot-logo {
  font-family: var(--mo);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--y);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a {
  color: rgba(255, 255, 255, .62);
  font-size: .85rem;
  transition: color .15s;
}
.foot-links a:hover { color: var(--y); }
.foot-copy {
  font-family: var(--mo);
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .35);
}

/* ════════════════════════════════════════════════════════════════════
   24 — ACCESSIBILITÉ : lien d'évitement + anneau de focus
   Le lien d'évitement est le premier élément tabulable de la page ;
   il n'apparaît qu'au clavier.
   ════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .85rem;
  font-weight: 700;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
}

/* Anneau de focus visible et cohérent partout — jamais d'outline: none
   sans remplacement (règle d'accessibilité de la charte). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   25 — PAGES SECONDAIRES (article, page, 404, recherche)
   Le thème est d'abord une landing page : ces styles restent minimaux,
   juste assez pour que les mentions légales et le blog soient lisibles.
   ════════════════════════════════════════════════════════════════════ */
.sec--etroit { max-width: 760px; }

.contenu-riche { line-height: 1.7; color: var(--mid); }
.contenu-riche h2,
.contenu-riche h3 {
  margin: 2.5rem 0 .75rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.02em;
}
.contenu-riche h2 { font-size: 1.5rem; }
.contenu-riche h3 { font-size: 1.15rem; }
.contenu-riche p,
.contenu-riche ul,
.contenu-riche ol { margin-bottom: 1.1rem; }
.contenu-riche ul,
.contenu-riche ol { padding-left: 1.25rem; }
.contenu-riche li { margin-bottom: .4rem; }
.contenu-riche a {
  color: var(--ink);
  border-bottom: 1px solid var(--y);
  box-shadow: inset 0 -6px 0 var(--yh);
}
.contenu-riche a:hover { box-shadow: inset 0 -1.4em 0 var(--yh); }
.contenu-riche strong { color: var(--ink); font-weight: 600; }
.contenu-riche blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--y);
  color: var(--ink);
}
.article-image { margin: 1.75rem 0; }
.article-image img { border-radius: var(--r2); }

.liste-articles { margin-top: 2.5rem; }
.article-item {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.article-date {
  font-family: var(--mo);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.article-titre {
  margin: .4rem 0 .5rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.article-titre a:hover { color: var(--yd); }
.article-extrait { color: var(--mid); font-size: .95rem; }

.pagination { margin-top: 2.5rem; font-family: var(--mo); font-size: .8rem; }
.pagination .page-numbers {
  display: inline-block;
  padding: .4rem .7rem;
  border: 1px solid var(--g);
  border-radius: var(--r);
  margin-right: .35rem;
}
.pagination .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.erreur-404 .sec { padding-top: 5rem; padding-bottom: 6rem; }

/* ════════════════════════════════════════════════════════════════════
   26 — PASSE « PROFESSIONNALISATION » (2026-09-03)
   Trois corrections issues de la revue design, volontairement isolées
   en fin de fichier pour rester lisibles et réversibles.

   26.1 — CONTRASTE DU JAUNE EN PETIT TEXTE
   #D4BF00 sur blanc plafonne à ~1,8:1 : illisible en corps de texte et
   hors des seuils WCAG. On garde --yd pour les GRANDS accents (titres,
   chiffres primes) où il fonctionne visuellement, et on bascule tout le
   petit texte jaune sur --y-txt, qui passe AA (~4,6:1) tout en restant
   perçu comme jaune profond.
   Pour revenir à l'état d'origine : supprimer ce bloc 26.1.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --y-txt: #7A6D00;      /* Jaune texte : petits labels, liens, prix optionnels */
  --ink-hover: #1A1A18;  /* Encre éclaircie : survol des boutons pleins */
}

.sec-tag,
.hero-note::before,
.help-a,
.srv-price,
.tarif-li-price .opt,
.tarif-section-lbl,
.article-titre a:hover { color: var(--y-txt); }

.sec-tag::before { opacity: .55; }

/* 26.2 — CTA PRINCIPAL : ISOLEMENT
   Sur les captures du site Kadence, le CTA du hero apparaissait en jaune
   sur blanc — quasi illisible. Ce n'était pas un choix de la maquette :
   les styles de bouton globaux de Kadence écrasaient le fond encre.
   Le thème étant désormais autonome, le composant retrouve son état
   d'origine (fond encre, libellé jaune, ~14:1 de contraste). On verrouille
   quand même les deux propriétés au cas où un plugin s'en mêlerait.
   ══════════════════════════════════════════════════════════════════════ */
.btn-main,
.btn-main:link,
.btn-main:visited {
  background: var(--ink);
  color: var(--y);
}

/* 26.3 — DENSITÉ DE LA GRILLE DE FOND DU HERO
   La grille héritée de la version sombre reste visible sur blanc et
   parasite la lecture du <h1>. On la ramène à un repère discret. */
.hero-grid { opacity: .45; }

/* 26.4 — ANCRAGE SOUS LA NAV STICKY
   Sans ça, un clic sur « Tarifs » place le titre de section derrière la
   barre de navigation fixe. */
.mce-section[id],
.mce-metrics[id] { scroll-margin-top: 80px; }

/* 26.5 — MESSAGE D'ERREUR DU FORMULAIRE
   Injecté par mce-modal.js quand l'envoi échoue : le visiteur garde ses
   réponses et comprend ce qui s'est passé. */
.mce-form-erreur {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-left: 3px solid #C0392B;
  background: rgba(192, 57, 43, .06);
  color: #8E2A20;
  font-size: .85rem;
  line-height: 1.5;
}

/* 26.6 — LOGO PERSONNALISÉ WORDPRESS
   Quand un logo est défini dans Personnaliser → Identité du site, WordPress
   sort l'image à sa taille naturelle. On la contraint à la hauteur de la
   barre, sinon un fichier de 1500 px recouvre le hero. */
.custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.custom-logo-link img,
.custom-logo {
  width: auto;
  max-width: 200px;
  height: 36px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .custom-logo-link img,
  .custom-logo { height: 30px; max-width: 140px; }
}

/* 26.7 — LE TÉLÉPHONE NE SE COUPE JAMAIS
   « 02 XXX XX XX » repassait à la ligne dans la nav dès que le menu
   s'allongeait, cassant l'alignement de toute la barre. */
.nav-phone,
.nav-phone span,
.tb-tel,
.mmenu-tel { white-space: nowrap; }

.nav-inner { gap: 1rem; }
@media (min-width: 1200px) {
  .nav-inner { gap: 1.5rem; }
}

/* 26.8 — ÉCHELLE DU TITRE DU HERO
   L'original montait à clamp(2.8rem, 11vw, 7rem). Sur un hero en deux
   colonnes, le <h1> n'occupe que la moitié gauche : à 11vw il déborde sur
   quatre lignes très hautes et repousse le CTA sous la ligne de flottaison
   — le visiteur voit un titre géant, jamais le bouton.
   On indexe la taille sur la colonne plutôt que sur la fenêtre : le titre
   reste imposant, mais le hero (badge → titre → promesse → CTA → réassurance)
   tient dans un écran de portable comme de bureau. */
.mce-hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.5rem);
  margin-bottom: 1.25rem;
}

/* 26.9 — MARGES PAR DÉFAUT DES TITRES ET PARAGRAPHES
   Le reset d'origine ne traitait que box-sizing : chaque <h2> gardait la
   marge du navigateur (0.83em, soit 53 px à 64 px de corps) qui s'ajoutait
   à celle de l'eyebrow. Résultat : 73 px de vide entre « // TARIFS » et
   « Prix transparents », au lieu des 20 px voulus — et le même trou dans
   toutes les sections.
   Le :where() maintient une spécificité nulle : chaque composant, y compris
   .contenu-riche, garde la main sur ses propres marges. */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════════════
   27 — INVERSION : PLUS AUCUNE SURFACE COLORÉE
   ────────────────────────────────────────────────────────────────────
   Règle demandée (2026-09-03) : toute surface qui n'est pas blanche
   devient noire. Sur noir, on écrit en jaune ; sur jaune, en noir —
   et comme il ne reste plus un seul aplat jaune, la seconde moitié de
   la règle ne s'applique plus qu'aux rares éléments conservés.

   Conséquences :
     • les aplats jaunes (topbar, bande de métriques, CTA finale, pastilles)
       passent en encre, texte jaune ;
     • les surfaces off-white (--bg2 #F5F5F2, --bg3 #EDEDE9 : sections
       alternées, cartes, en-têtes de cartes, champs de la modal) passent
       elles aussi en encre ;
     • les mots accentués des titres restent jaunes sur blanc — seul
       usage du jaune sur fond clair (choix explicite du client, malgré
       le contraste de ~1,8:1 ; voir README §7).

   Répartition du texte sur fond noir :
     --on-dark        jaune — titres, chiffres, prix, libellés forts
     --on-dark-body   blanc cassé — corps de texte, descriptions
   Pour passer TOUT le texte sur noir en jaune, il suffit de mettre
   --on-dark-body à var(--y). Une seule ligne.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --on-dark:       var(--y);                  /* Couche « display » sur noir */
  --on-dark-body:  rgba(255, 255, 255, .68);  /* Corps de texte sur noir */
  --on-dark-mute:  rgba(255, 255, 255, .42);  /* Tertiaire sur noir */
  --on-dark-dim:   rgba(255, 230, 0, .5);     /* Jaune atténué (eyebrows) */
  --line-dark:     rgba(255, 255, 255, .12);  /* Filet sur noir */
  --line-dark-2:   rgba(255, 255, 255, .2);   /* Filet appuyé sur noir */
  --surf-dark:     var(--ink);                /* Surface noire */
  --surf-dark-2:   #141412;                   /* Carte posée sur du noir */
}

/* ── 27.1 · TOPBAR ── */
.topbar { background: var(--surf-dark); color: var(--on-dark); }
.tb-it  { color: var(--on-dark-dim); opacity: 1; }
.tb-sep { color: rgba(255, 255, 255, .25); opacity: 1; }
.tb-tel { color: var(--on-dark); border-bottom-color: rgba(255, 230, 0, .4); }
.tb-tel:hover { border-bottom-color: var(--y); }

/* ── 27.2 · NAVIGATION ──
   La barre reste blanche : c'est le pôle clair de la page. Seuls le
   carré du logo et le bouton de devis sont des surfaces, donc noirs. */
.logo-sq { background: var(--surf-dark); color: var(--on-dark); }
.nav-btn { background: var(--surf-dark); color: var(--on-dark); }
.nav-btn:hover { background: var(--ink-hover); color: var(--on-dark); transform: translateY(-1px); }

/* ── 27.3 · HERO ── */
.hero-badge { background: var(--surf-dark); border-color: transparent; }
.hb-text    { color: var(--on-dark); }

.hp-header { background: var(--surf-dark); border-color: transparent; }
.hp-title  { color: var(--on-dark); }
.hp-sub    { color: var(--on-dark-body); }
/* La pastille était un aplat jaune : elle devient un contour jaune. */
.hp-ico {
  background: transparent;
  border: 1.5px solid var(--y);
  color: var(--on-dark);
}
.step-li:hover { background: rgba(10, 10, 8, .03); }

/* ── 27.4 · BANDE DE MÉTRIQUES ── */
.mce-metrics { background: var(--surf-dark); }
.metric      { border-color: var(--line-dark) !important; }
.metric-val  { color: var(--on-dark); }
.metric-lbl  { color: var(--on-dark-mute); }

/* ── 27.5 · SECTIONS ALTERNÉES (Processus, Témoignages) ──
   Elles portaient l'off-white : elles deviennent les deux respirations
   noires de la page. */
.mce-section--alt { background: var(--surf-dark); border-color: var(--line-dark); }
.mce-section--alt .sec-tag { color: var(--on-dark-dim); }
.mce-section--alt .sec-h2  { color: var(--bg); }
.mce-section--alt .sec-h2 .y { color: var(--y); }
.mce-section--alt .sec-p   { color: var(--on-dark-body); }

/* Processus */
.process-grid { border-color: var(--line-dark); overflow: visible; }
.proc-step {
  position: relative;
  z-index: 0;
  background: transparent;
  border-color: var(--line-dark) !important;
}
.proc-n     { color: var(--on-dark); }
.proc-title { color: var(--bg); }
.proc-desc  { color: var(--on-dark-body); }

/* Témoignages */
.temos-grid   { background: var(--line-dark); border-color: var(--line-dark); overflow: visible; }
.temo         { position: relative; z-index: 0; background: var(--surf-dark-2); }
.temo-text    { color: var(--on-dark-body); }
.temo-name    { color: var(--on-dark); }
.temo-loc     { color: var(--on-dark-mute); }
.temo-quote   { color: var(--y); }
.temos-footer { color: var(--on-dark-mute); }
/* L'avatar était noir sur off-white : sur noir, il devient un contour. */
.temo-av { background: transparent; border: 1px solid var(--y); color: var(--on-dark); }

/* ── 27.6 · CARTES PRIMES ──
   La section reste blanche, les deux cartes deviennent noires. La carte
   « featured » se distingue désormais par son contour jaune, plus par
   son fond — les deux étant noirs. */
.prime-card { background: var(--surf-dark); border-color: var(--line-dark); }
.prime-card.featured { border-color: var(--y); }
.pc-label   { color: var(--on-dark-dim); }
.pc-val     { color: var(--on-dark); }
.pc-desc    { color: var(--on-dark-body); }
.pc-items li { color: var(--on-dark-body); }
.pc-items li::before { color: var(--y); }
.prime-card:hover { border-color: var(--y); }

/* ── 27.7 · CARTES TARIFS ──
   Carte blanche, en-tête et pied noirs : la structure se lit d'un coup
   d'œil. La pastille d'icône passe en contour jaune. */
.tarif-head { background: var(--surf-dark); border-color: transparent; }
.tarif-ico  { background: transparent; border: 1.5px solid var(--y); color: var(--on-dark); }
.tarif-title { color: var(--on-dark); }
.tarif-sub   { color: var(--on-dark-body); }
.tarif-foot  { background: var(--surf-dark); border-color: transparent; color: var(--on-dark-body); }
.tarif-foot strong { color: var(--on-dark); }

/* ── 27.8 · CTA FINALE ──
   Le grand aplat jaune devient le grand aplat noir. Le bouton principal
   ne peut plus être noir sur noir : il prend le seul pôle restant, le
   blanc — ce qui en fait l'élément le plus contrasté de la page. */
.cta-fin      { background: var(--surf-dark); }
.cf-mono      { color: var(--on-dark-dim); }
.cf-h2        { color: var(--on-dark); }
.cf-h2 .dim   { color: var(--on-dark-mute); }
.cf-sub       { color: var(--on-dark-body); }
.btn-cf-main  { background: var(--bg); color: var(--ink); }
.btn-cf-main:hover { background: var(--y); color: var(--ink); }
.btn-cf-ghost { color: var(--on-dark); border-color: rgba(255, 230, 0, .35); }
.btn-cf-ghost:hover { border-color: var(--y); }

/* ── 27.9 · STICKY CTA MOBILE ── */
.sticky-mob .sticky-mob-cta {
  background: var(--surf-dark) !important;
  color: var(--on-dark) !important;
  border: 1px solid var(--line-dark-2) !important;
}
.sticky-mob .sticky-mob-cta:hover,
.sticky-mob .sticky-mob-cta:active,
.sticky-mob .sticky-mob-cta:focus {
  background: var(--ink-hover) !important;
  color: var(--on-dark) !important;
}

/* ── 27.10 · MODAL DE DEVIS ──
   La fenêtre reste blanche ; tout ce qui était off-white à l'intérieur
   (cartes de choix, champs, encarts) devient noir à texte jaune. */
.mx, .hx { background: var(--surf-dark); color: var(--on-dark); }
.mx:hover, .hx:hover { background: var(--ink-hover); color: var(--on-dark); }

.ch { background: var(--surf-dark); border-color: var(--line-dark); }
.ch:hover { background: var(--ink-hover); border-color: var(--y); }
.ch.on {
  background: var(--ink-hover);
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, .18);
}
.ch-t strong { color: var(--on-dark); }
.ch-t small  { color: var(--on-dark-body); }
.ch-i        { background: transparent; border-color: var(--line-dark-2); }
.ch-i svg    { stroke: var(--on-dark-body); }
.ch.on .ch-i { background: transparent; border-color: var(--y); }
.ch.on .ch-i svg { stroke: var(--y); }
.ch-dot      { border-color: var(--line-dark-2); }
.ch.on .ch-dot { background: var(--y); border-color: var(--y); }
.ch-dot svg  { stroke: var(--ink); }

.fld input {
  background: var(--surf-dark);
  border-color: var(--line-dark);
  color: var(--on-dark);
}
.fld input:focus {
  background: var(--ink-hover);
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, .18);
}
.fld input::placeholder { color: var(--on-dark-mute); }

.ph-slot { background: var(--surf-dark); border-color: var(--line-dark); }
.ph-slot:hover { background: var(--ink-hover); border-color: var(--y); }
.ph-slot .pn { color: var(--on-dark); }
.ph-slot .pt { color: var(--on-dark-body); }
.ph-slot .pi svg { stroke: var(--on-dark-body); }
.preq { background: var(--line-dark); color: var(--on-dark-body); }
.ph-slot.ok .preq { background: var(--y); color: var(--ink); }

.rgpd-box { background: var(--surf-dark); color: var(--on-dark-body); }
.rgpd-box a { color: var(--on-dark); }
.res-disc { background: var(--surf-dark); color: var(--on-dark-body); }

.bnext { background: var(--surf-dark); color: var(--on-dark); }
.bnext:hover:not(:disabled) { background: var(--ink-hover); color: var(--on-dark); }

/* Overlay d'aide « monophasé ou triphasé ? » */
.m2 { background: var(--surf-dark); border-color: var(--line-dark); }
.m2 .mt { color: var(--on-dark); }
.m2 .mb { color: var(--on-dark-body); }
.m2 .mn { background: transparent; border: 1px solid var(--y); color: var(--on-dark); }
.dc { background: var(--surf-dark); border-color: var(--line-dark); }
.dc .dt { color: var(--on-dark); }
.dc ul { color: var(--on-dark-body); }
.dc li::before { color: var(--y); }
.htip { background: var(--surf-dark); color: var(--on-dark-body); border-left-color: var(--y); }
.htip strong { color: var(--on-dark); }
.hclose { background: var(--surf-dark); color: var(--on-dark); }
.hclose:hover { background: var(--ink-hover); color: var(--on-dark); }

/* ════════════════════════════════════════════════════════════════════
   28 — CARTES : APLAT QUI DÉBORDE AU SURVOL
   ────────────────────────────────────────────────────────────────────
   PÉRIMÈTRE : uniquement les cartes posées sur fond BLANC — Tarifs et
   Primes. Sur les sections déjà noires (Processus, Témoignages), l'aplat
   masquait le contenu au lieu de le révéler : le geste y est abandonné,
   remplacé par un simple liseré (§28.1).

   Au repos, la carte est blanche (Tarifs) ou noire (Primes). Au survol,
   un aplat noir monte du bas, remplit la carte et déborde volontairement
   du cadre — quelques pixels sur les côtés, davantage en bas. Le contenu
   bascule en jaune par-dessus.

   Mécanique :
     • .mce-card       → conteneur : position relative, overflow visible
     • .mce-card::after → l'aplat, scaleY(0) au repos, origine en bas
     • .mce-card > *   → le contenu remonte au-dessus de l'aplat
   Le survol élève aussi le z-index : sur les grilles jointives
   (Processus, Témoignages), la carte survolée passe au-dessus de ses
   voisines au lieu d'être rognée par elles.

   Le débordement est neutralisé pour prefers-reduced-motion : l'aplat
   apparaît alors d'un coup, sans balayage.
   ════════════════════════════════════════════════════════════════════ */
.tarif-card,
.prime-card {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.tarif-card > *,
.prime-card > * {
  position: relative;
  z-index: 1;
}

.tarif-card::after,
.prime-card::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 0;
  bottom: -12px;
  z-index: 0;
  background: var(--surf-dark);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--fill-dur) cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.tarif-card:hover,
.prime-card:hover { z-index: 3; }

.tarif-card:hover::after,
.prime-card:hover::after { transform: scaleY(1); }

/* ── Synchronisation ──
   Le texte ne doit basculer en jaune QU'UNE FOIS l'aplat arrivé : sinon
   on lit du jaune sur blanc pendant tout le balayage. On retarde donc la
   couleur de --fill-lag, soit 80 % de la montée — à cet instant la courbe
   d'accélération a déjà couvert la quasi-totalité de la carte.
   Au retour, le même délai laisse l'aplat redescendre avant que le texte
   ne repasse en encre. */
.tarif-card, .prime-card {
  --fill-dur: .3s;
  --fill-lag: .24s;
}
.tarif-card *, .prime-card * {
  transition: color .1s linear var(--fill-lag),
              background-color .1s linear var(--fill-lag),
              border-color .1s linear var(--fill-lag);
}

/* ── Bascule du contenu au survol ── */

/* Tarifs : la carte blanche devient entièrement noire. */
.tarif-card:hover .tarif-head,
.tarif-card:hover .tarif-foot { background: transparent; }
.tarif-card:hover .tarif-li + .tarif-li,
.tarif-card:hover .tarif-section + .tarif-section { border-color: var(--line-dark); }
.tarif-card:hover .tarif-li-name,
.tarif-card:hover .tarif-li-price,
.tarif-card:hover .tarif-section-lbl,
.tarif-card:hover .tarif-li-price .opt { color: var(--on-dark); }
.tarif-card:hover .tarif-li-name small { color: var(--on-dark-body); }
/* On neutralise le décalage vertical hérité : l'aplat porte déjà
   l'effet, et un translateY ferait glisser la carte hors de son propre
   débordement. */
.tarif-card:hover { transform: none; box-shadow: none; border-color: var(--y); }

/* Primes : déjà noire, le débordement suffit. */
.prime-card:hover { border-color: var(--y); }

@media (prefers-reduced-motion: reduce) {
  .tarif-card::after,
  .prime-card::after {
    left: 0;
    right: 0;
    bottom: 0;
    transition: none;
  }
}

/* ── 28.1 · SECTIONS NOIRES : LISERÉ, PAS D'APLAT ──
   Processus et Témoignages sont déjà sur fond encre. Un aplat qui monte
   par-dessus n'y ajoute rien et, le temps du balayage, efface le texte.
   Le survol s'y limite donc à un liseré jaune et à un fond d'un cran
   plus clair : la réaction est lisible, rien ne disparaît jamais. */
.mce-section--alt .proc-step,
.mce-section--alt .temo {
  transition: background-color .18s ease, box-shadow .18s ease;
}
.mce-section--alt .proc-step:hover,
.mce-section--alt .temo:hover {
  position: relative;
  z-index: 2;
  background: var(--ink-hover);
  box-shadow: 0 0 0 1px var(--y);
}

/* ── 28.2 · SÉPARATION DES BLOCS NOIRS CONSÉCUTIFS ──
   Témoignages, CTA finale et pied de page se suivent : sans filet, la
   page se termine par un aplat noir de 1 500 px où l'on ne distingue
   plus les blocs. Un cheveu clair suffit à les recoudre. */
.cta-fin,
.mce-footer { border-top: 1px solid var(--line-dark); }

/* ── 29.1 · PRIX DE LA LISTE SERVICES EN ENCRE
   « Dès 800 € », « Devis IA », « Urgence 24h » : ces mentions sont des
   informations de prix, pas des accents. En jaune elles tiraient l'œil
   plus fort que le nom de la prestation qu'elles qualifient. */
.srv-price { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   29 — SECTION AVANT / APRÈS
   ────────────────────────────────────────────────────────────────────
   Insérée entre Processus et Témoignages, sur fond blanc : elle coupe
   la suite de blocs noirs et laisse les photos respirer.

   Deux images superposées au pixel près. Celle du dessus (l'avant) est
   rognée par un clip-path piloté par --pos ; on ne redimensionne rien,
   donc aucune déformation quel que soit le curseur.

   Le contrôle est un <input type="range"> rendu transparent et étiré
   sur l'image : on récupère gratuitement la souris, le tactile, le
   clavier (flèches, Origine/Fin) et l'annonce aux lecteurs d'écran.
   Le losange visible n'est qu'un décor — d'où son aria-hidden.
   ════════════════════════════════════════════════════════════════════ */
.ba-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 960px) {
  .ba-layout {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
}

/* ── Colonne texte ── */
.ba-points {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ba-points li {
  padding: .85rem 0 .85rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 300;
  color: var(--mid);
}
.ba-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-family: var(--mo);
  font-size: .75rem;
  font-weight: 700;
  color: var(--y-txt);
}
.ba-points strong { color: var(--ink); font-weight: 600; }

/* ── Comparateur ── */
.ba {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 460px;
}
.ba-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--r2);
  background: var(--ink);
  box-shadow: var(--sh);
  /* Le curseur natif serait un pointeur : on annonce le glissement. */
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* La photo « avant » ne se voit que jusqu'au curseur. */
.ba-layer--avant {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Le trait de séparation, dessiné par-dessus les deux images. */
.ba-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--y);
  pointer-events: none;
}

/* ── Poignée ── */
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--y);
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(10, 10, 8, .35);
  pointer-events: none;
}

/* ── Étiquettes ── */
.ba-tag {
  position: absolute;
  top: .85rem;
  z-index: 2;
  padding: .3rem .6rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--y);
  font-family: var(--mo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-tag--avant { left: .85rem; }
.ba-tag--apres { right: .85rem; }

/* ── Le contrôle réel, invisible mais bien là ── */
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
/* La zone de saisie doit couvrir toute la hauteur, sinon le glissement
   ne fonctionne qu'à mi-image. */
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
  cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 46px;
  height: 999px;
  border: none;
  cursor: ew-resize;
}
/* Au clavier, l'anneau de focus doit se voir : il est reporté sur le
   cadre, puisque l'input lui-même est transparent. */
.ba-range:focus-visible { outline: none; }
.ba-frame:has(.ba-range:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.ba-caption {
  margin-top: .9rem;
  font-family: var(--mo);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}