/* ─── POLICE DE MARQUE — Breadley Serif (titres) ─────────────────── */
@font-face { font-family:'BD Breadley'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/BreadleySerif-Regular.woff2') format('woff2'), url('fonts/BreadleySerif-Regular.woff') format('woff'); }
@font-face { font-family:'BD Breadley'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/BreadleySerif-Bold.woff2') format('woff2'), url('fonts/BreadleySerif-Bold.woff') format('woff'); }
@font-face { font-family:'BD Breadley'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/BreadleySerif-Black.woff2') format('woff2'), url('fonts/BreadleySerif-Black.woff') format('woff'); }

/* ─── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

:root {
  /* ── PALETTE PREMIUM : bleu-encre + or + neutres chauds ── */
  --clr-primary: #202833;        /* bleu-encre signature (était #202833) */
  --clr-primary-dark: #12171e;
  --clr-primary-light: #e6e2dc;
  --clr-accent: #97a78c;         /* VITAL sauge clair — fonds, badges, sur fond sombre */
  --clr-accent-soft: #b7c3ac;    /* sauge très clair (surbrillance) */
  --clr-accent-deep: #4e6653;    /* VITAL profond — texte vif LISIBLE sur fond clair (4,86:1 sur avoine, 6,27:1 sur blanc) */
  --clr-accent-mid: #5f7a64;     /* ancien accent-deep — réservé aux FONDS/surfaces, jamais au texte */
  --clr-ink: #202833;            /* nuit maison unique */
  --clr-ink-2: #2b333f;          /* surface sombre / élévation */
  --clr-ink-3: #171d26;          /* nuit la plus profonde (hero, dégradés) */
  --clr-dark: #202833;           /* alias historique → nuit maison */
  --clr-dark-2: #2b333f;
  --clr-text: #2b3444;           /* corps, légèrement plus profond/chaud */
  --clr-muted: #556174;          /* AA-safe (~5:1) sur blanc ET ivoire */
  --clr-border: #e7e2da;         /* bordure chaude assortie à l'ivoire */
  --clr-bg: #ffffff;
  --clr-bg-alt: #f6f4f0;         /* ivoire chaud (était gris froid #f8fafc) */
  /* ── Couleurs de données (dataviz) ── */
  --data-weight: #202833;
  --data-cal: #97a78c;
  --data-vfc: #3f7d6e;
  --data-sleep: #6a7583;
  --clr-success: #2f5d43;
  --clr-success-bg: #eef2ec;     /* fond vert pâle maison (remplace l'émeraude Tailwind #d1fae5) */
  --clr-success-bg-2: #dfe8dd;   /* un ton plus dense : bordures & dégradés (remplace #a7f3d0) */
  --clr-warn: #9a6a2f;
  --clr-danger: #a13d3d;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* Largeurs de conteneur (audit 24/09) */
  --w-narrow: 520px; --w-prose: 640px; --w-app: 900px; --w-wide: 1160px;
  /* Couleurs de surcharge REPOS/AVOINE, ramenées dans le :root principal */
  --metal: #c6c4c4; --caoutchou: #333333;
  --shadow-sm: 0 1px 3px rgba(32,40,51,.05), 0 1px 2px rgba(32,40,51,.04);
  --shadow-md: 0 4px 16px rgba(32,40,51,.07), 0 2px 6px rgba(32,40,51,.04);
  --shadow-lg: 0 12px 40px rgba(32,40,51,.10), 0 4px 12px rgba(32,40,51,.05);
  --shadow-xl: 0 24px 64px rgba(32,40,51,.14), 0 8px 20px rgba(32,40,51,.06);
  --shadow-primary: 0 8px 24px rgba(32,40,51,.30);
  --shadow-primary-lg: 0 16px 40px rgba(32,40,51,.40);
  /* Mouvement tokenisé (audit premium 24/09) : une seule courbe, sans rebond. */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-1: .15s; --dur-2: .25s; --dur-3: .4s;
  --transition: var(--dur-2) var(--ease-out);
  --transition-slow: var(--dur-3) var(--ease-out);
  --spring: .35s var(--ease-out);
  /* ── Échelle d'espacement (base-4) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:112px;
  /* ── Échelle typographique (ratio ~1.25) ── */
  /* Échelle typographique — 8 pas, ratio ~1.2. Auparavant déclarée et jamais
     utilisée : 48 tailles distinctes cohabitaient sur la page. */
  --fs-xs:.75rem;    /* 12px — plancher absolu, micro-labels */
  --fs-sm:.875rem;   /* 14px — libellés secondaires */
  --fs-base:1rem;    /* 16px — corps courant */
  --fs-md:1.125rem;  /* 18px — chapô, gros corps */
  --fs-lg:1.375rem;  /* 22px */
  --fs-xl:1.75rem;   /* 28px */
  --fs-2xl:2.25rem;  /* 36px */
  --fs-3xl:3rem;     /* 48px */
  --fw-display: 700;   /* Breadley : 400/700/900 — un 600 était déjà rendu en 700 */
  --ls-tight:-.02em;
  --ls-caps:.08em;
  --ls-wide:.18em;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.6;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Titres : Breadley serif à brancher via @font-face dès réception du fichier.
     'BD Breadley' en tête → bascule automatique quand la police sera hébergée. */
  --font-display: 'BD Breadley', Georgia, 'Times New Roman', serif;
}

html {
  scroll-behavior: smooth;
  font-size: var(--fs-base);
  scroll-padding-top:72px; /* les ancres du menu s'arrêtent sous le header fixe */
}

body {
  font-family: var(--font);
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ─── UTILITIES ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.section {
  padding-block:104px;
  min-height: 100svh;
  scroll-margin-top:0;
}

/* Le snap (desktop ET mobile) est entièrement piloté en JS dans main.js — le snap CSS
   mandatory est volontairement absent car il casse le scroll programmatique (scrollTo/Into)
   et ne claque pas sur les sections plus hautes que l'écran. */

/* Mobile : scroll vertical natif libre (pas de snap forcé). Le carrousel des prestations
   garde son propre touch-action local (cf. plus bas). */
.highlight { color: var(--clr-primary); }

.section__header {
  text-align: center;
  margin-bottom:72px;
}

.section__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  padding:var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  margin-bottom:var(--sp-4);
}

.section__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
}

.section__desc {
  margin-top:var(--sp-4);
  font-size: var(--fs-md);
  color: var(--clr-muted);              /* gris clair et lisible (plus clair, pas foncé) */
  max-width: 560px;
  margin-inline:auto;
  line-height: 1.7;
  text-wrap: balance;          /* équilibre les lignes → plus de mot orphelin sur la 2e ligne */
}

/* ─── SCROLL PROGRESS ───────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-ink-2), var(--clr-ink-2));
  width: 0%;
  z-index: 200;
  border-radius: 0 2px 2px 0;
  transition: width .08s linear;
  pointer-events: none;
}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap:var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
  padding:var(--sp-3) 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--spring), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}

/* Reflet balayant des boutons : retiré le 28/07 (`content:none` plus bas), et son
   code mort — une transition sur `left` — supprimé le 26/09. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--clr-accent-deep);   /* CTA vert profond VITAL */
  color: #fff;
  box-shadow: 0 8px 22px rgba(95,122,100,.34);
}
.btn--primary:hover {
  background: #4e6653;                   /* vert plus foncé au survol */
  box-shadow: 0 12px 30px rgba(95,122,100,.46);
}

.btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,.25);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
}

.services .btn--ghost,
.about .btn--ghost,
.contact .btn--ghost {
  color: var(--clr-dark);
  border-color: var(--clr-border);
}
.services .btn--ghost:hover,
.about .btn--ghost:hover,
.contact .btn--ghost:hover {
  background: var(--clr-bg-alt);
  border-color: var(--clr-border);
}

.btn--full { width: 100%; justify-content: center; }

/* ─── HEADER / NAV ──────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(230,226,220,.92);   /* AVOINE translucide (était blanc) */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,.6);
  transition: box-shadow var(--transition);
  /* Stabilise la barre fixe pendant le scroll mobile (évite le décalage dû au backdrop-filter) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.header.scrolled { box-shadow: 0 1px 0 rgba(32,40,51,.05), var(--shadow-sm); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  gap:var(--sp-1);
  transition: opacity var(--transition);
}
.nav__logo:hover { opacity: .8; }

.logo__crop {
  display: block;
  height: 42px;
  overflow: visible;   /* nouveau logo = déjà juste le monogramme BD, ne pas rogner */
}

.logo__img {
  display: block;
  height: 42px;
  width: auto;
}

/* Logo header : image GB recadrée nette (plus de crop overflow qui rognait le monogramme) */
.logo__mark {
  display: block;
  height: 48px;
  width: auto;
}

.logo__sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-muted);
  line-height: 1;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap:var(--sp-1);
}

.nav__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-muted);
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  position: relative;
}
.nav__link:hover { color: var(--clr-dark); background: var(--clr-bg-alt); }
.nav__link.active { color: var(--clr-primary); }
.nav__link.active:not(.nav__link--cta):not(.nav__link--rdv)::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 14px; right: 14px;
  height: 2px;
  background: var(--clr-primary);
  border-radius: 2px;
}

.nav__link--rdv {
  background: var(--clr-accent-deep);
  color: #fff !important;
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav__link--rdv:hover { background: var(--clr-ink-2); }

.nav__link--cta {
  /* Hiérarchie des appels à l'action (audit premium 24/09) : « Contact » était
     un second bouton PLEIN à côté de « Prendre RDV ». Deux pleins côte à côte se
     disputent l'œil et aucun ne ressort. Contact passe en contour, comme
     « Espace Membre » : un seul bouton plein dans l'en-tête, la prise de RDV.
     Mêmes couleurs de charte, seule la hiérarchie change. */
  border: 1.5px solid rgba(32,40,51,.45);
  color: var(--clr-primary) !important;
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav__link--cta:hover {
  background: rgba(32,40,51,.1);
  border-color: var(--clr-primary);
}

.nav__link--portal {
  border: 1.5px solid rgba(32,40,51,.45);
  color: var(--clr-primary) !important;
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.nav__link--portal:hover {
  background: rgba(32,40,51,.1);
  border-color: var(--clr-primary);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:var(--sp-1);
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--clr-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero {
  padding-top:70px;
  padding-bottom:0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--clr-ink-3);
  overflow: hidden;
  position: relative;
}

/* Dot grid */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Ambient glows */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 50%, rgba(32,40,51,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(151,167,140,.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero__blob--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(32,40,51,.22), transparent 70%);
  top: -150px; right: 5%;
  animation: blob 24s ease-in-out infinite;
}
.hero__blob--2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(151,167,140,.16), transparent 70%);
  bottom: -60px; left: 8%;
  animation: blob 30s ease-in-out infinite reverse;
}

@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.08); }
  66% { transform: translate(-15px,25px) scale(.94); }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap:80px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-block:80px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap:var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-success);
  background: var(--clr-success-bg);
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  margin-bottom:28px;
  border: 1px solid rgba(47,93,67,.20);
}
.hero__badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clr-success);
  animation: pulse 2.4s ease-in-out 3;   /* 3 pulsations à l'arrivée, puis immobile */
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

.hero__title {
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom:28px;
}

.hero__subtitle {
  font-size: var(--fs-md);
  color: var(--clr-primary-light);
  max-width: var(--w-narrow);
  margin-bottom:44px;
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  gap:var(--sp-4);
  flex-wrap: wrap;
  margin-bottom:0;
}

.hero__stats-bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(203,178,126,.30);      /* liseré OR = bandeau nettement marqué */
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:56px;
}

.hero__stats {
  display: flex;
  justify-content: space-around;
  padding-block:var(--sp-6);
}

.stat {
  flex: 1;
  text-align: center;
  padding-inline:var(--sp-5);
  border-right: 1px solid rgba(255,255,255,.08);
}
.stat:last-child { border-right: none; }

.stat strong {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin-bottom:var(--sp-2);
}
.stat span {
  font-size: var(--fs-sm);
  color: var(--clr-primary-light);   /* libellés avoine sur fond nuit */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* Bandeau de confiance du hero (mix texte + chiffres) — taille uniforme */
.hero__stats .stat strong { font-size: var(--fs-lg); white-space: nowrap; }

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__avatar {
  width: 460px; height: 460px;
  clip-path: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
  /* Surface nettement plus claire que le fond du hero → l'octogone se détache */
  background: linear-gradient(160deg, #33414d 0%, #212a35 55%, #1a212b 100%);
  overflow: hidden;
  /* Lueur verte VITAL autour de l'octogone → vivant + met le logo en valeur */
  filter: drop-shadow(0 0 44px rgba(151,167,140,.38)) drop-shadow(0 20px 52px rgba(0,0,0,.45));
}

.avatar__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.hero__card {
  position: absolute;
  background: rgba(32,40,51,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding:var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 32px rgba(32,40,51,.4), 0 0 0 1px rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  gap:var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  animation: float 8s ease-in-out infinite;
  white-space: nowrap;
}
.hero__card--1 { bottom: 32px; left: -24px; animation-delay: 0s; }
.hero__card--2 { top: 32px; right: -24px; animation-delay: 1.75s; }
.card__icon { font-size: var(--fs-md); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ─── HERO SCROLL DOWN ──────────────────────────────────────────── */
.hero__scroll-down {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:var(--sp-2);
  color: rgba(255,255,255,.35);
  transition: color var(--transition), transform var(--transition);
  animation: scroll-bounce 2s ease-in-out 3;
}
.hero__scroll-down:hover {
  color: rgba(255,255,255,.8);
  animation-play-state: paused;
  transform: translateX(-50%) translateY(-3px);
}
.hero__scroll-down svg {
  width: 28px; height: 28px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  padding:var(--sp-1);
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* ─── ABOUT ─────────────────────────────────────────────────────── */
.about { background: var(--clr-bg); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap:80px;
  align-items: center;
}

.about__photo-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-soft));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--clr-primary);
  box-shadow: var(--shadow-xl);
}

.about__photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.about__intro {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom:20px;
  line-height: var(--lh-body);
}

.about__content p {
  color: var(--clr-muted);
  margin-bottom:var(--sp-4);
  line-height: 1.75;
}

.about__skills {
  display: flex;
  flex-wrap: wrap;
  gap:var(--sp-3);
  margin:var(--sp-6) 0;
}

.skill-tag {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), transform var(--spring);
  cursor: default;
}
.skill-tag:hover {
  background: var(--clr-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* ─── SERVICES ──────────────────────────────────────────────────── */
.services {
  background: var(--clr-bg-alt);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* contenu aligné en haut (sinon vide au-dessus du titre) */
  padding-block:var(--sp-7);
}
.services .section__header { margin-bottom:var(--sp-6); }

.services::after {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,40,51,.05) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:var(--sp-5);   /* 24 px : les 4 cartes respirent (audit premium 24/09) */
}
@media (max-width: 900px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  /* Carrousel horizontal swipeable (peek + snap) — "Populaire" en premier */
  .services__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;              /* carrousel UNIQUEMENT horizontal — empêche la carte de glisser vers le bas */
    scroll-snap-type: x mandatory;
    gap:var(--sp-4);
    padding:20px var(--sp-1) 28px;          /* top : laisse passer le badge ; bas : évite de rogner la carte la plus haute */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;  /* le swipe reste dans le carrousel */
    touch-action: pan-x pan-y;       /* horizontal dans le carrousel ; vertical = scroll de la page */
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .service-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .services { justify-content: flex-start; }
  .services .section__header { margin-bottom:var(--sp-4); }
  .services .section__title { font-size: var(--fs-lg); line-height: var(--lh-tight); }
  .services .section__desc { font-size: var(--fs-sm); margin-top:var(--sp-2); line-height: 1.45; }
}

.services__cta {
  text-align: center;
  margin-top:var(--sp-7);
  position: relative;
  z-index: 1;
}

.service-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding:var(--sp-5);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--spring), box-shadow var(--transition-slow), border-color var(--transition);
  z-index: 1;
}
/* CTA décollé du texte : au moins 20px d'écart, puis calé en bas (boutons alignés entre cartes) */
.service-card__list { margin-bottom:var(--sp-5); }
.service-card .btn { margin-top:auto; }

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-ink-2));
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(32,40,51,.2);
}
.service-card:hover::before { opacity: 1; }

.service-card--featured {
  border-color: rgba(32,40,51,.3);
  background: linear-gradient(180deg, var(--clr-bg-alt) 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(32,40,51,.15), var(--shadow-md);
}
.service-card--featured::before { opacity: 1; }

.service-card__badge {
  position: absolute;
  top: -13px; left: 28px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-ink-2));
  padding:var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(32,40,51,.35);
}

.service-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin-bottom:var(--sp-4);
  transition: transform var(--spring);
}
.service-card:hover .service-card__icon {
  transform: scale(1.04);
}

.service-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom:var(--sp-2);
  letter-spacing: var(--ls-tight);
}

.service-card__desc {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-bottom:var(--sp-4);
  line-height: var(--lh-body);
}

.service-card__list li {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);
  position: relative;
  border-bottom: 1px solid var(--clr-border);
}
.service-card__list li:last-child { border-bottom: none; }
.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  border: 2px solid var(--clr-primary);
}
.service-card__list li::after {
  content: '✓';
  position: absolute;
  left: 2.5px; top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--clr-primary);
}

.service-card__price {
  display: flex;
  align-items: baseline;
  gap:var(--sp-2);
  margin-bottom:var(--sp-2);
}
.service-card__price--soon { flex-wrap: wrap; }
/* Tous les prix des cartes prestations UNIFORMES (même taille + même couleur foncée) :
   100€, 69€, « Sur mesure » identiques. Le VERT reste réservé au « 50€ net » (avance immédiate).
   2.5rem tient « Sur mesure » sur 1 ligne (2.75rem débordait). */
.service-card .price__amount { font-size: var(--fs-2xl); color: var(--clr-dark); }
.service-card__price--soon .price__amount { color: var(--clr-dark); font-weight: 700; }
/* Prix "crédit d'impôt" (présentiel/bilan) : 100€ tarif lisible (option B, non barré)
   + 50€ à votre charge en HÉROS vert dessous */
/* Carte à distance : puces = les 3 formules, avec leur essence en 2ᵉ ligne */
.service-card__list--offers li { padding-top:var(--sp-1); padding-bottom:var(--sp-1); }
.offer-mini { display: block; font-size: var(--fs-sm); color: var(--clr-muted); font-weight: 400; margin-top:1px; }
.service-card__anchor { font-size: var(--fs-md); color: var(--clr-muted); font-weight: 500; margin-bottom:1px; }
.service-card__anchor .anchor__amount { color: var(--clr-dark); font-weight: 700; }
.service-card__price--credit .price__amount { color: var(--clr-primary); }   /* bleu-encre = couleur des boutons/CTA */
.price__star { color: var(--clr-primary); font-weight: 700; font-size: var(--fs-base); vertical-align: super; line-height: 0; }
.service-card__price--soon .price__unit { color: var(--clr-muted); }
.price__from {
  flex-basis: 100%;
  font-size: var(--fs-md);          /* même taille que « 100€ / séance » (.service-card__anchor) → lignes du haut alignées */
  font-weight: 500;
  color: var(--clr-muted);
  margin-bottom:1px;
}

.service-card__net {
  display: inline-flex;
  align-items: center;
  gap:var(--sp-2);
  background: var(--clr-success-bg);
  border-radius: var(--radius-pill);
  padding:var(--sp-1) var(--sp-3);
  margin-bottom:var(--sp-3);
  width: fit-content;
}
.service-card__net .price__net-value { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-success); }
.service-card__net .price__net-info  { font-size: var(--fs-xs); color: var(--clr-success); }

.service-card--soon { opacity: .8; }
.service-card__badge--soon {
  background: var(--clr-muted);
  box-shadow: none;
}
.service-card__coming {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  line-height: var(--lh-body);
  margin-bottom:var(--sp-4);
}
.service-card__list--muted li { color: var(--clr-muted); }
.service-card__list--muted li::before { opacity: .3; }
.service-card__list--muted li::after { opacity: .3; }

.services__tax-note {
  display: flex;
  align-items: flex-start;
  gap:var(--sp-4);
  background: #fff;
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--radius);
  padding:var(--sp-4) 20px;
  margin-top:var(--sp-5);
  max-width: none;             /* pleine largeur de la grille des prestations */
}
.services__tax-note p { font-size: var(--fs-sm); color: var(--clr-text); line-height: 1.7; }

/* ─── PRICING ───────────────────────────────────────────────────── */
.pricing { background: var(--clr-bg-alt); }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--sp-5);
  margin-bottom:var(--sp-6);
}
@media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline:auto; } }

.pricing-card {
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding:36px 28px 28px;
  display: flex;
  flex-direction: column;
  gap:20px;
  position: relative;
  transition: transform var(--spring), box-shadow var(--transition);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.pricing-card--featured {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(32,40,51,.08), var(--shadow-md);
}
.pricing-card--featured:hover { box-shadow: 0 0 0 4px rgba(32,40,51,.12), var(--shadow-xl); }
.pricing-card--soon { opacity: .75; }

.pricing-card__badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--clr-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding:var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pricing-card__badge--soon {
  background: var(--clr-muted);
}

.pricing-card__icon {
  font-size: var(--fs-xl);
  line-height: 1;
}
.pricing-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-dark);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap:var(--sp-2);
}
.price__amount {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--clr-dark);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.pricing-card--featured .price__amount { color: var(--clr-primary); }
.price__unit {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-muted);
}

.pricing-card__net {
  display: inline-flex;
  align-items: center;
  gap:var(--sp-2);
  background: var(--clr-success-bg);
  border-radius: var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);
  margin-top: -8px;
  width: fit-content;
}
.price__net-label { font-size: var(--fs-xs); color: var(--clr-success); }
.price__net-value { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-success); }
.price__net-info  { font-size: var(--fs-xs); color: var(--clr-success); }

.pricing-card__coming {
  font-size: var(--fs-base);
  color: var(--clr-muted);
  line-height: var(--lh-body);
  margin-top: -8px;
}

.pricing-card__list {
  display: flex;
  flex-direction: column;
  gap:var(--sp-3);
  flex: 1;
}
.pricing-card__list li {
  font-size: var(--fs-base);
  color: var(--clr-text);
  padding-left:var(--sp-5);
  position: relative;
}
.pricing-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clr-primary);
  opacity: .25;
}
.pricing-card__list li::after {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clr-primary);
}
.pricing-card__list--muted li { color: var(--clr-muted); }
.pricing-card__list--muted li::before,
.pricing-card__list--muted li::after { opacity: .15; }

.pricing__tax-note {
  display: flex;
  align-items: flex-start;
  gap:var(--sp-4);
  background: #fff;
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--radius);
  padding:var(--sp-4) var(--sp-5);
  max-width: 700px;
  margin-inline:auto;
}
.pricing__tax-icon { font-size: var(--fs-md); flex-shrink: 0; }
.pricing__tax-note p { font-size: var(--fs-base); color: var(--clr-text); line-height: 1.7; }

/* ─── REVIEWS ───────────────────────────────────────────────────── */
.reviews { background: var(--clr-bg); }

/* Bandeau de confiance (chiffres réels tirés des avis) */
.reviews__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap:var(--sp-4);
  margin:0 0 40px;
}
.trust-stat {
  flex: 1 1 160px; max-width: 230px; text-align: center;
  background: var(--clr-bg-alt, #f6f4f0); border: 1px solid var(--clr-border);
  border-radius: var(--radius); padding:var(--sp-4) var(--sp-4);
}
.trust-stat__value {
  display: block; font-size: var(--fs-lg); font-weight: 700; color: var(--clr-primary);
  line-height: 1.1; letter-spacing: var(--ls-tight);
}
.trust-stat--stars .trust-stat__value { color: var(--clr-accent); font-size: var(--fs-md); letter-spacing: var(--ls-caps); }
.trust-stat__label { display: block; font-size: var(--fs-sm); color: var(--clr-muted); margin-top:var(--sp-2); line-height: 1.35; }

/* Encart résultats concrets (citations chiffrées de clients réels) */
.reviews__results { margin-top:var(--sp-7); }
.reviews__results-title {
  text-align: center; font-size: var(--fs-md); font-weight: 700; color: var(--clr-dark);
  margin:0 0 var(--sp-5);
}
/* Une seule ligne : autant de colonnes égales que de cartes */
.reviews__results-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap:var(--sp-4);
}
.result-card {
  background: var(--clr-bg); border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius); padding:var(--sp-4) var(--sp-4);
}
.result-card__quote { font-size: var(--fs-base); font-weight: 600; color: var(--clr-dark); line-height: 1.45; margin:0 0 var(--sp-3); }
.result-card__author { font-size: var(--fs-sm); color: var(--clr-muted); font-weight: 500; }
/* Sur petit écran, la ligne défile horizontalement plutôt que de se tasser */
@media (max-width: 768px) {
  .reviews__results-grid {
    grid-auto-columns: 78%; overflow-x: auto; padding-bottom:var(--sp-2);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .result-card { scroll-snap-align: start; }
}

.reviews__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap:var(--sp-4);
}

.reviews__track-container {
  overflow: hidden;
  width: 100%;
}

.reviews__track {
  display: flex;
  gap:var(--sp-5);
  transition: transform .75s var(--ease-out);
}

.reviews__track .review-card {
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
}

.carousel__btn {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--clr-primary);
  background: transparent;
  color: var(--clr-primary);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition), transform var(--spring);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel__btn:hover:not(:disabled) {
  background: var(--clr-primary);
  color: #fff;
  transform: scale(1.03);
}
.carousel__btn:disabled { opacity: .2; cursor: default; }

.carousel__dots {
  display: flex;
  flex-wrap: wrap;          /* beaucoup de points (jusqu'à 22) → passent à la ligne au lieu de déborder */
  justify-content: center;
  gap:var(--sp-2);
  margin-top:36px;
  max-width: 100%;
}

/* Le point reste visuellement de 8px, mais le bouton fait 24×24 grâce au padding:background-clip:content-box confine la couleur à la zone centrale.
   Zone tactile ×9 sans rien changer à l'apparence.
   Pourquoi pas 44px : avec jusqu'à 22 points sur une ligne, des zones de 44px
   se chevaucheraient et déclencheraient le mauvais point — pire que le mal soigné. */
.carousel__dot {
  width: 8px; height: 8px;
  padding:var(--sp-2);
  background-clip: content-box;
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  border: none;
  background-color: var(--clr-border);
  cursor: pointer;
  transition: background-color var(--transition), width var(--transition);
}
.carousel__dot.active {
  background-color: var(--clr-primary);
  width: 24px;
}

/* Plus de 14 pages : les points laissent place à un compteur « 3 / 137 ».
   Afficher 137 points prenait 5 rangées à l'écran sans servir à rien —
   on ne clique pas sur le 93e point. Navigation aux flèches / au doigt. */
.carousel__dots--compact .carousel__dot { display: none; }
.carousel__count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding:var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--clr-bg-alt);
}

.review-card {
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding:var(--sp-6) 28px 28px;
  transition: transform var(--spring), box-shadow var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.review-card::before {
  content: '\201C';
  position: absolute;
  top: 4px; right: 16px;
  font-size: 7rem;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--clr-primary);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.review-card--featured {
  border-color: rgba(32,40,51,.25);
  background: linear-gradient(160deg, #faf8f4 0%, #f6f4f0 100%);
}

.review-card--featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-ink-2), var(--clr-ink-2));
}

.review-card__badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  border-radius: var(--radius-pill);
  padding:var(--sp-1) var(--sp-3);
  margin-bottom:var(--sp-3);
}

.review-card__stars {
  color: var(--clr-accent);
  font-size: var(--fs-base);
  letter-spacing: 2px;
  margin-bottom:var(--sp-4);
}

.review-card__text {
  font-size: var(--fs-base);
  color: var(--clr-text);
  font-style: italic;
  margin-bottom:var(--sp-5);
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap:var(--sp-4);
  border-top: 1px solid var(--clr-border);
  padding-top:20px;
}

.author__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-ink-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(32,40,51,.3);
}

.author__info strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-dark);
}
.author__info span {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
}
.author__ig {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--clr-primary);
  text-decoration: none;
  margin-top:var(--sp-1);
  font-weight: 500;
}
.author__ig:hover { text-decoration: underline; }

/* ─── ARTICLES ──────────────────────────────────────────────────── */
.articles { background: var(--clr-bg-alt); }

/* Barre de recherche articles */
.articles__search-wrap {
  position: relative;
  max-width: 480px;
  margin:0 auto 2rem;
}
.articles__search-input {
  width: 100%;
  padding:.75rem 1rem .75rem 2.8rem;
  border: 2px solid var(--clr-primary-light);
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--clr-dark);
  background: var(--clr-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.articles__search-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(32,40,51,.15);
}
.articles__search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--clr-primary);
  pointer-events: none;
}
.articles__search-results { margin-bottom:2rem; }
.articles__search-results .articles__carousel { overflow: hidden; }
.articles__search-count {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-bottom:1rem;
}
.articles__search-count strong { color: var(--clr-primary); }
.articles__search-empty {
  text-align: center;
  color: var(--clr-muted);
  padding:2rem 0;
  font-size: var(--fs-base);
}

/* Ligne de 5 onglets familles */
/* Les familles d'articles passent a la LIGNE au lieu de defiler lateralement.
   Demande de Brandon, 03/09. Une barre de defilement horizontale cache la
   moitie des categories : on ne sait pas qu'elles existent, donc on ne les
   ouvre jamais. Toutes visibles d'un coup, meme si ca prend deux lignes.
   `flex-wrap: wrap` + suppression de `overflow-x` — et `justify-content` passe
   de `safe center` a `center`, le garde-fou n'ayant plus d'objet sans
   defilement. */
.articles__families {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-7);
  padding:var(--sp-2) var(--sp-1) var(--sp-1);
}

.articles__fam-btn {
  display: inline-flex;
  align-items: center;
  gap:var(--sp-2);
  flex-shrink: 0;
  white-space: nowrap;
  padding:var(--sp-3) var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.articles__fam-btn:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary-dark);
  transform: translateY(-2px);
}
.articles__fam-btn.is-active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.articles__fam-emoji { font-size: var(--fs-md); line-height: 1; }

.articles__fam-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding:0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.articles__fam-btn.is-active .articles__fam-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Une seule famille visible à la fois */
.articles__family { display: none; }
.articles__family.is-active { display: block; }

/* Le titre de famille devient inutile (l'onglet actif le remplace) */
.articles__family-title { display: none; }

.articles__carousel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:var(--sp-4);
}

.articles__carousel .carousel__dots {
  flex-basis: 100%;
  margin-top:20px;
}

.articles__track-container {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.articles__track {
  display: flex;
  gap:var(--sp-5);
  transition: transform .45s var(--ease-out);
}

.articles__track .article-card {
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
}

@media (max-width: 768px) {
  .articles__track .article-card { width: 100%; }
  .articles__carousel .carousel__btn { display: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .articles__track .article-card { width: calc((100% - 24px) / 2); }
}

.article-card {
  background: var(--clr-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  transition: transform var(--spring), box-shadow var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.article-card__image { overflow: hidden; }

.article-card__img-placeholder {
  width: 100%; height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, #202833, var(--clr-ink-2));  /* défaut ; JS applique le dégradé par famille */
  transition: transform var(--transition-slow);
}

.article-card:hover .article-card__img-placeholder { transform: scale(1.03); }

.article-card__content {
  padding:var(--sp-5) var(--sp-5) 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card__tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  padding:var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  display: inline-block;
}

.article-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-dark);
  margin:var(--sp-4) 0 var(--sp-3);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

.article-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-bottom:20px;
  line-height: 1.65;
  flex: 1;
}

.article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  padding-top:var(--sp-4);
  border-top: 1px solid var(--clr-border);
}

.article-card__link {
  color: var(--clr-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap:var(--sp-1);
  transition: gap var(--transition);
}
.article-card__link:hover { gap:var(--sp-2); }

/* ─── RECETTES ───────────────────────────────────────────────────── */
/* Recettes : onglets catégories + carousel 3 par ligne (même format que le blog) */
/* Meme traitement que les familles d'articles (03/09) : les categories passent
   a la LIGNE au lieu de defiler lateralement. Un defilement horizontal cache la
   moitie des onglets — on ignore qu'ils existent, donc on ne les ouvre jamais. */
.recettes__families {
  display: flex; flex-wrap: wrap; justify-content: center; gap:var(--sp-2);
  margin:var(--sp-6) 0 var(--sp-7); padding:var(--sp-2) var(--sp-1) var(--sp-1);
}
.recettes__fam-btn {
  display: inline-flex; align-items: center; gap:var(--sp-1); flex-shrink: 0; white-space: nowrap;
  padding:var(--sp-2) var(--sp-3); border: 1px solid var(--clr-border); border-radius: var(--radius-pill);
  background: var(--clr-bg); color: var(--clr-text); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.recettes__fam-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary-dark); transform: translateY(-2px); }
.recettes__fam-btn.is-active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; box-shadow: var(--shadow); }
.recettes__fam-emoji { font-size: var(--fs-base); line-height: 1; }
.recettes__fam-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding:0 var(--sp-1);
  border-radius: var(--radius-pill); background: var(--clr-primary-light); color: var(--clr-primary-dark); font-size: var(--fs-xs); font-weight: 700;
}
.recettes__fam-btn.is-active .recettes__fam-count { background: rgba(255, 255, 255, .25); color: #fff; }

.recettes__family { display: none; }
.recettes__family.is-active { display: block; }
.recettes__family-title { display: none; }

.recettes__carousel { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap:var(--sp-4); }
.recettes__carousel .carousel__dots { flex-basis: 100%; margin-top:20px; }
.recettes__track-container { overflow: hidden; flex: 1; min-width: 0; }
.recettes__track { display: flex; gap:var(--sp-5); transition: transform .45s var(--ease-out); }
.recettes__track .recette-card { flex-shrink: 0; width: calc((100% - 48px) / 3); }

@media (max-width: 768px) {
  .recettes__track .recette-card { width: 100%; }
  .recettes__carousel .carousel__btn { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .recettes__track .recette-card { width: calc((100% - 24px) / 2); }
}

.recette-card {
  background: var(--clr-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--spring), box-shadow var(--transition-slow);
}

.recette-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.recette-card__image {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xl);
  line-height: 1;
  transition: transform var(--transition-slow);
}
.recette-card:hover .recette-card__image { transform: scale(1.03); }

.recette-card__image--proteine { background: linear-gradient(135deg, #202833, var(--clr-ink-2)); }
.recette-card__image--vegan { background: linear-gradient(135deg, #2f7d5f, #45a67f); }
.recette-card__image--rapide { background: linear-gradient(135deg, #97a78c, #b7c3ac); }
.recette-card__image--none { background: linear-gradient(135deg, #3f6f7d, #5a94a3); }
.recette-card__image--dessert { background: linear-gradient(135deg, #7a5560, #a8838d); }

.recette-card__content {
  padding:20px var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.recette-card__emoji { line-height: 1; }

.recette-card__badges { display: flex; flex-wrap: wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }

.recette-card__badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding:var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.recette-card__badge--proteine { color: var(--clr-primary); background: var(--clr-primary-light); }
/* Le fond dore etait un reste de l'ancienne palette : vert sauge sur lavis
   dore, 2,23 de contraste. Audit du 05/09. */
.recette-card__badge--rapide { color: var(--clr-accent-deep); background: rgba(151, 167, 140, .16); }
.recette-card__badge--vegan { color: var(--clr-success); background: rgba(47, 93, 67, .12); }
.recette-card__badge--saison { color: var(--clr-warn); background: rgba(154, 106, 47, .12); }
.recette-card__badge--dessert { color: #7a5560; background: rgba(122, 85, 96, .12); }

.recette-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-dark);
  margin:0 0 var(--sp-3);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

.recette-card__meta {
  display: flex;
  gap:var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-bottom:var(--sp-3);
  flex-wrap: wrap;
}

.recette-card__macros {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
  background: var(--clr-bg-alt);
  border-radius: var(--radius);
  padding:var(--sp-3) var(--sp-3);
  margin-bottom:var(--sp-4);
}

.recette-card__link {
  color: var(--clr-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap:var(--sp-1);
  transition: gap var(--transition);
  margin-top:auto;
}
.recette-card__link:hover { gap:var(--sp-2); }

/* ─── FAQ ────────────────────────────────────────────────────────── */
.faq { background: var(--clr-bg-alt); }

.faq__list {
  max-width: 780px;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  gap:var(--sp-3);
}

.faq__item {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq__item:hover { box-shadow: var(--shadow-md); }
.faq__item.is-open { border-color: var(--clr-primary-light); box-shadow: var(--shadow-md); }

.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-5);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-dark);
  text-align: left;
  transition: color var(--transition);
}
.faq__item.is-open .faq__question { color: var(--clr-primary); }

.faq__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transition), background var(--transition);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--clr-primary);
  color: #fff;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  padding:0 var(--sp-5);
}
.faq__item.is-open .faq__answer {
  max-height: 400px;
  padding:0 var(--sp-5) var(--sp-5);
}
.faq__answer p {
  color: var(--clr-muted);
  line-height: 1.75;
  font-size: var(--fs-base);
}

/* ─── CONTACT ───────────────────────────────────────────────────── */
.contact { background: var(--clr-bg); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap:72px;
  align-items: start;
}

.contact__item {
  display: flex;
  gap:var(--sp-4);
  align-items: flex-start;
  margin-bottom:var(--sp-6);
}

.contact__icon {
  width: 40px; height: 40px;
  background: transparent;               /* plus de carré autour de l'émoji */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
  transition: transform var(--spring);
}
.contact__item:hover .contact__icon {
  transform: scale(1.04);
}

.contact__item strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom:var(--sp-1);
}
.contact__item p {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  line-height: 1.5;
}

.contact__social { display: flex; gap:var(--sp-3); margin-top:var(--sp-2); }

.social-link {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text);
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--spring), box-shadow var(--transition);
}
.social-link:hover {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32,40,51,.3);
}

.contact__form { display: flex; flex-direction: column; gap:20px; }

.form__group { display: flex; flex-direction: column; gap:var(--sp-2); }

.form__info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  font-size: var(--fs-xs);
  font-style: normal;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.form__group label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-dark);
}

.form__group input,
.form__group select,
.form__group textarea {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--clr-dark);
  background: var(--clr-bg-alt);
  /* Bordure à 3:1 minimum (WCAG 1.4.11, audit 24/09) : #e7e2da disparaissait sur l'avoine. */
  border: 1.5px solid rgba(32,40,51,.55);
  border-radius: var(--radius);
  padding:var(--sp-3) var(--sp-4);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  resize: vertical;
}
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  border-color: var(--clr-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(32,40,51,.35);
}
.form__group input.invalid,
.form__group textarea.invalid { border-color: var(--clr-danger); box-shadow: 0 0 0 3px rgba(161,61,61,.2); }

.form__error { font-size: var(--fs-sm); color: var(--clr-danger); min-height: 1em; }

/* Échec d'envoi du formulaire : message dans la page, pas une boîte système
   (audit 24/09). C'était le dernier alert() natif du site, et il tombait sur le
   SEUL parcours de conversion. Mêmes couleurs que les autres états d'erreur. */
.form__erreur {
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-error);
  background: var(--clr-error-bg);
  padding:var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--clr-error-bg);
}
.form__erreur a { text-decoration: underline; }
/* Champ en erreur : l'état est porté par aria-invalid (lu par les lecteurs
   d'écran), plus seulement par une classe de couleur (audit 26/09). */
.form__group [aria-invalid="true"] { border-color: var(--clr-danger); box-shadow: 0 0 0 1px var(--clr-danger); }
/* La flèche du hero garde son dessin de 28 px, mais sa zone de clic fait 44 px. */
.hero__scroll-down { min-width: 44px; min-height: 44px; }

.form__success {
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-success);
  background: var(--clr-success-bg);
  padding:var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--clr-success-bg-2);
}

/* ─── QUICK SLOTS ───────────────────────────────────────────────── */
.quick-slots { margin-bottom:36px; }

.quick-slots__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--clr-muted);
  margin-bottom:var(--sp-4);
}

.quick-slots__list { display: flex; flex-wrap: wrap; gap:var(--sp-3); }

.quick-slot-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--clr-bg);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  padding:var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--spring), box-shadow var(--transition);
}
.quick-slot-btn:hover {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(32,40,51,.2);
}

.quick-slot-btn__day {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom:var(--sp-1);
}
.quick-slot-btn__time {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-primary);
}

/* ─── FLOATING RDV BUTTON ───────────────────────────────────────── */
.fab-rdv {
  position: fixed;
  bottom: 28px; right: 28px;
  display: flex;
  align-items: center;
  gap:var(--sp-2);
  background: var(--clr-accent-deep);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding:var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-base);
  box-shadow: 0 12px 30px rgba(95,122,100,.46), 0 0 0 4px rgba(95,122,100,.14);
  transition: transform var(--spring), box-shadow var(--transition);
  z-index: 999;
  overflow: hidden;
}
.fab-rdv:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 48px rgba(32,40,51,.5), 0 0 0 4px rgba(32,40,51,.15);
}

@media (max-width: 480px) {
  .fab-rdv__text { display: none; }
  .fab-rdv { padding:var(--sp-4); border-radius: 50%; }
}

/* ─── BOOKING / CALENDRIER ──────────────────────────────────────── */
.booking { background: var(--clr-bg-alt); }

/* Desktop : chaque section tient dans un écran sans scroll (padding/marges resserrés + cartes compactes) */
@media (min-width: 769px) {
  .section { padding-block:var(--sp-7); }
  .section__header { margin-bottom:36px; }
  /* Articles : carrousel compact pour voir les 3 cartes en entier */
  .articles__families { margin-bottom:var(--sp-5); }
  .article-card__img-placeholder { height: 120px; font-size: var(--fs-2xl); }
  .article-card__content { padding:var(--sp-4) var(--sp-5) 20px; }
  .article-card__title { margin:var(--sp-3) 0 var(--sp-2); }
  /* Booking : calendrier compacté (cases moins hautes) pour que la section tienne dans l'écran */
  .cal__day { aspect-ratio: auto; height: 44px; }
  .calendar__header { padding:var(--sp-4) var(--sp-5); }
  .quick-slots { margin-bottom:20px; }
}

.booking__reassurance {
  margin-top:var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-primary-dark);
  text-align: center;
}
@media (max-width: 640px) {
  .booking__reassurance { font-size: var(--fs-xs); margin-top:var(--sp-2); line-height: 1.5; }
}

.booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--sp-6);
  align-items: start;
}

.calendar {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:20px var(--sp-5);
  background: var(--clr-dark);
  color: #fff;
}

.cal__nav {
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--spring);
}
.cal__nav:hover { background: rgba(255,255,255,.22); transform: scale(1.04); }

.cal__month {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .02em;
}

.calendar__days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--clr-bg-alt);
  padding:var(--sp-3) var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--clr-border);
}
.calendar__days-header span {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap:var(--sp-1);
  padding:var(--sp-4);
}

.cal__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--clr-text);
  transition: background var(--transition), color var(--transition), transform var(--spring);
  font-family: var(--font);
}
.cal__day:hover:not(:disabled) {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  transform: scale(1.04);
}
.cal__day--today {
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
  font-weight: 700;
}
.cal__day--selected {
  background: var(--clr-primary) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(32,40,51,.4);
}
.cal__day--past, .cal__day--sunday {
  opacity: .25;
  cursor: not-allowed;
  pointer-events: none;
}
.cal__day--empty { cursor: default; pointer-events: none; }

.slots {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding:var(--sp-5);
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  scroll-margin-top:84px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.slots__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:var(--sp-3);
  color: var(--clr-muted);
  text-align: center;
}
.slots__empty span { font-size: var(--fs-2xl); }
.slots__empty p { font-size: var(--fs-base); max-width: 200px; line-height: 1.5; }

.slots__date {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom:var(--sp-4);
  text-transform: capitalize;
}

.slots__section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--clr-muted);
  margin:var(--sp-4) 0 var(--sp-2);
}

.slot-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-text);
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
  margin-bottom:var(--sp-2);
  font-family: var(--font);
  width: 100%;
}
.slot-btn:hover:not(:disabled) {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  transform: translateX(3px);
}
.slot-btn--selected {
  border-color: var(--clr-primary) !important;
  background: var(--clr-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(32,40,51,.35);
}
.slot-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: var(--clr-bg-alt);
}
.slot-btn__status { font-size: var(--fs-xs); color: var(--clr-muted); }
.slot-btn:disabled .slot-btn__status { color: var(--clr-danger); }

/* Créneau simplement écoulé dans la journée : ce n'est pas une erreur ni un
   refus, juste une heure dépassée → gris neutre plutôt que rouge d'alerte. */
.slot-btn--past { opacity: .5; }
.slot-btn--past .slot-btn__status { color: var(--clr-muted); }

.slots__empty-day {
  grid-column: 1 / -1;
  margin:var(--sp-1) 0 0;
  padding:var(--sp-4) var(--sp-4);
  background: var(--clr-bg-alt);
  border-radius: var(--radius);
  color: var(--clr-muted);
  font-size: var(--fs-base);
  text-align: center;
}

.booking__alternative {
  text-align: center;
  margin-top:var(--sp-5);
  font-size: var(--fs-base);
  color: var(--clr-muted);
}
.booking__alternative a {
  color: var(--clr-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.booking__alternative a:hover { color: var(--clr-primary-dark); }

.booking__form-wrap {
  margin-top:40px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding:36px;
  box-shadow: var(--shadow-md);
}

.booking__summary {
  background: var(--clr-primary-light);
  border-radius: var(--radius);
  padding:var(--sp-4) 20px;
  margin-bottom:28px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-primary-dark);
  border-left: 4px solid var(--clr-primary);
}

.booking__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}

.booking__form { display: flex; flex-direction: column; gap:20px; }

.booking__form-actions {
  display: flex;
  gap:var(--sp-4);
  justify-content: flex-end;
}

.booking__success { text-align: center; padding:var(--sp-5) 0; }

.success__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-success-bg), var(--clr-success-bg-2));
  color: var(--clr-success);
  font-size: var(--fs-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 auto 20px;
  box-shadow: 0 4px 16px rgba(32,40,51,.14);   /* émeraude Tailwind hors charte → encre */
}
.booking__success h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom:var(--sp-3);
}
.booking__success p { color: var(--clr-muted); margin-bottom:var(--sp-5); }

.booking__q-cta {
  background: var(--clr-primary-light);
  border: 1px solid rgba(32,40,51,.2);
  border-radius: var(--radius-lg);
  padding:20px var(--sp-5);
  margin:0 0 20px;
  text-align: left;
}
.booking__q-text {
  font-size: var(--fs-base);
  color: var(--clr-dark);
  margin-bottom:var(--sp-4) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.footer {
  background: var(--clr-dark);
  padding-block:40px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:var(--sp-4);
}
.footer__inner > :nth-child(1) { order: 1; }   /* logo → haut, centré */
.footer__inner > :nth-child(3) { order: 2; }   /* liens → centre */
.footer__inner > :nth-child(2) { order: 3; }   /* © → bas, centré */

.footer .logo__mark { height: 48px; }
.footer .logo__sub { color: var(--clr-muted); }
.footer p { font-size: var(--fs-sm); color: var(--clr-muted); }

.footer__links { display: flex; gap:28px; }
.footer__links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-muted);
  transition: color var(--transition);
}
.footer__links a:hover { color: #fff; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__subtitle { max-width: 100%; margin-inline:auto; }
  .hero__actions { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__visual { display: none; }
  .about__grid { grid-template-columns: 1fr; }
  .about__image { display: none; }
  .contact__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .reviews__track .review-card { width: 100%; }
  .carousel__btn { display: none; }
  .booking__grid { grid-template-columns: 1fr; }
  .booking__form-row { grid-template-columns: 1fr; }
  .booking__form-actions { flex-direction: column-reverse; }

  /* BOOKING — créneaux rapides (compacts) en accès express, puis calendrier */
  .booking .container { display: flex; flex-direction: column; }
  .booking .section__header { order: 0; }
  .quick-slots { order: 1; margin:0 0 var(--sp-5); }
  .booking__grid { order: 2; }
  .booking__alternative { order: 3; }
  .booking__form-wrap { order: 4; }
  /* Pas de cadre vide sous le calendrier : le panneau créneaux n'apparaît qu'après le choix d'une date */
  #slots-panel:not(.slots--active) { display: none; }
  .quick-slots__label { font-size: var(--fs-xs); margin-bottom:var(--sp-2); }
  .quick-slots__list { flex-wrap: nowrap; overflow-x: auto; gap:var(--sp-2); padding-bottom:var(--sp-1); }
  .quick-slot-btn { flex-shrink: 0; padding:var(--sp-2) var(--sp-4); }
  .quick-slot-btn__time { font-size: var(--fs-base); }

  /* CONTACT — formulaire d'abord, infos en dessous */
  .contact__form { order: -1; }

  /* Bandeau de confiance du hero en 2×2 */
  .hero__stats { flex-wrap: wrap; padding-block:20px; }
  .hero__stats .stat { flex: 1 1 42%; padding:var(--sp-3) var(--sp-2); border-right: none; }
  .hero__stats .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
  .hero__stats .stat strong { font-size: var(--fs-md); }
  .hero__stats .stat span { font-size: var(--fs-xs); letter-spacing: .03em; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .reviews__track .review-card { width: calc((100% - 24px) / 2); }
}

@media (max-width: 640px) {
  .nav__menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--clr-border);
    padding:var(--sp-4);
    gap:var(--sp-1);
  }
  .nav__menu.open { display: flex; }
  .nav__toggle { display: flex; }
  .section { padding-top:var(--sp-4); padding-bottom:56px; }
  .hero { padding-top:88px; padding-bottom:36px; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__inner > * { order: 0; flex-basis: auto; }
  .footer__links { justify-content: center; flex-wrap: wrap; }

  /* Hero plus compact → les boutons CTA tiennent à l'écran */
  .hero__title { font-size: var(--fs-2xl); line-height: 1.12; }
  .hero__subtitle { font-size: var(--fs-base); margin-bottom:var(--sp-5); line-height: var(--lh-body); }
  .hero__badge { margin-bottom:var(--sp-4); }

  /* En-têtes compacts sur mobile → l'action (créneaux, formulaire) remonte */
  .section__header { margin-bottom:28px; }
  .section__desc { font-size: var(--fs-base); margin-top:var(--sp-3); line-height: 1.55; }
  .booking__intro { margin-bottom:20px; }

  /* Booking compact → calendrier + message « Contactez-moi » tiennent dans l'écran (pas de scroll interne sur mobile) */
  .booking .section__header { margin-bottom:var(--sp-3); }
  .booking .section__title { font-size: var(--fs-lg); line-height: 1.1; }
  .booking .section__desc { font-size: var(--fs-sm); margin-top:var(--sp-1); line-height: 1.35; }
  .booking__reassurance { margin-top:var(--sp-2) !important; }
  .quick-slots { margin-bottom:var(--sp-3) !important; }
  .calendar__header { padding:var(--sp-2) var(--sp-4); }
  .calendar__days-header { padding:var(--sp-2) var(--sp-1) var(--sp-1); }
  .calendar__grid { gap:var(--sp-1); padding:var(--sp-2); }
  /* 44px = minimum tactile recommandé (Apple/Google). Choisir une date est
     l'étape qui mène à une réservation : elle ne doit pas se rater du doigt.
     6 lignes × 44px tiennent toujours dans l'écran. */
  .cal__day { aspect-ratio: auto; height: 44px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
  .booking__alternative { margin-top:var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; }

  /* Formulaire de contact resserré → tout le formulaire (jusqu'au bouton Envoyer) tient à l'écran */
  .contact .section__header { margin-bottom:var(--sp-3); }
  .contact .section__title { font-size: var(--fs-xl); line-height: var(--lh-tight); }
  .contact .section__desc { font-size: var(--fs-sm); margin-top:var(--sp-2); line-height: 1.4; }
  .contact__form { gap:var(--sp-2); }
  .form__group { gap:var(--sp-1); }
  .form__group label { font-size: var(--fs-sm); }
  .form__group input,
  .form__group select,
  .form__group textarea { padding:var(--sp-2) var(--sp-3); }
  .form__group textarea { min-height: 64px; height: 64px; }
  .form__error { min-height: 0; }
  .contact__form .btn { padding:var(--sp-3); }
}

/* ─── REVEAL ANIMATIONS ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

.services__grid .service-card:nth-child(2) { transition-delay: .1s; }
.services__grid .service-card:nth-child(3) { transition-delay: .2s; }
.articles__grid .article-card:nth-child(2) { transition-delay: .1s; }
.articles__grid .article-card:nth-child(3) { transition-delay: .2s; }

/* ─── ARTICLE SOURCES ───────────────────────────────────────────── */
.article-sources {
  margin-top:var(--sp-7);
  padding-top:var(--sp-6);
  border-top: 1px solid var(--clr-border);
}
.article-sources h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom:var(--sp-4);
}
.article-sources ol {
  padding-left:var(--sp-4);
  margin:0;
}
.article-sources ol li {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.7;
  margin-bottom:var(--sp-2);
}
.article-sources ol li em { font-style: italic; }
.sources-note,
.source-note,
.article-sources__note,
.article-note {
  margin-top:var(--sp-4);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--clr-muted);
  line-height: var(--lh-body);
}
.source-year {
  display: inline-block;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  padding:1px var(--sp-2);
  border-radius: var(--radius-pill);
  margin-right:var(--sp-2);
  vertical-align: middle;
}

/* ─── PRESTATIONS : carte compactée sur mobile (placé en fin de fichier pour
   gagner sur les règles de base — toute la prestation + "Prendre RDV" visibles) ─── */
@media (max-width: 600px) {
  .service-card { padding:var(--sp-4) var(--sp-4) var(--sp-4); }
  .service-card__icon { width: 42px; height: 42px; font-size: var(--fs-lg); margin-bottom:var(--sp-2); border-radius: var(--radius); }
  .service-card__title { font-size: var(--fs-base); margin-bottom:var(--sp-1); }
  .service-card__price { margin-bottom:var(--sp-2); }
  .service-card .price__amount { font-size: var(--fs-xl); }
  .service-card__net { margin-bottom:var(--sp-2); padding:var(--sp-1) var(--sp-2); }
  .service-card__list { margin-bottom:var(--sp-3); }
  .service-card__list li { padding:var(--sp-1) 0 var(--sp-1) var(--sp-5); font-size: var(--fs-sm); }
  .service-card .btn--full { padding:var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE PREMIUM — audit 8 spécialistes (bleu-encre + or + états)
   ═══════════════════════════════════════════════════════════════════ */

/* Police d'affichage serif sur les grands titres (Inter garde le corps) */
.hero__title, .section__title, .service-card__title,
.pricing-card__title, .article-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
}

/* Chiffres tabulaires — alignement des données/prix */
.price__amount, .stat strong, .hero__stats .stat strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Accent OR sur les étoiles d'avis + barre de progression scroll */
.review-card__stars { color: var(--clr-accent-soft); }
.scroll-progress { background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-soft)); }

/* Sélection de texte de marque */
::selection { background: rgba(32,40,51,.16); color: var(--clr-ink); }

/* Lien d'évitement clavier (accessibilité) — visible uniquement au focus clavier */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--clr-primary); color: #fff; font-weight: 600;
  padding:var(--sp-3) var(--sp-4); border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Focus clavier premium (aucun n'existait) — n'affecte pas le clic souris */
:focus-visible { outline: 3px solid var(--clr-primary); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
.hero :focus-visible, .app-header--admin :focus-visible,
.nav__link--cta:focus-visible, .nav__link--rdv:focus-visible {
  outline-color: #fff; outline-offset: 3px;
}

/* Respect du réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   VAGUE 3 — IMAGERIE PREMIUM (traitement, ratios, overlays)
   ═══════════════════════════════════════════════════════════════════ */

/* Hero : octogone en encre + liseré or, prêt pour une vraie photo en duotone.
   → Pour passer à une photo : mettre la classe `hero__avatar--photo` et une <img class="avatar__img" src="ta-photo.jpg"> */
.hero__avatar {
  /* Surface nettement plus claire que le fond du hero → l'octogone se détache ;
     lueur verte VITAL pour le rendre vivant et mettre le logo BD en valeur. */
  background: linear-gradient(160deg, #33414d 0%, #212a35 55%, #1a212b 100%);
  filter: drop-shadow(0 0 46px rgba(151,167,140,.40)) drop-shadow(0 20px 52px rgba(0,0,0,.45));
}
.hero__avatar--photo { position: relative; }
.hero__avatar--photo .avatar__img { filter: grayscale(.18) contrast(1.05) brightness(.98); object-position: center 30%; }
.hero__avatar--photo::after {           /* duotone de marque sur la photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(32,40,51,.34) 0%, rgba(32,40,51,.5) 100%);
  mix-blend-mode: multiply;
}

/* Placeholder À propos : surface abstraite ivoire/encre (plus de texte "photo à venir") */
.about__photo-placeholder {
  background:
    radial-gradient(120% 80% at 30% 18%, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(150deg, #eceae4 0%, #e0ddd6 55%, #d3d0c8 100%);
  color: transparent; font-size: 0;
  position: relative; overflow: hidden;
}
.about__photo-placeholder::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -60px 60px -30px rgba(32,40,51,.14);
}

/* Avatars d'avis : dégradé encre + ring premium (liseré blanc + halo discret) */
.author__avatar {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-ink-2));
  box-shadow: 0 2px 8px rgba(32,40,51,.28), inset 0 0 0 2px rgba(255,255,255,.16);
  letter-spacing: .02em;
}
.author__avatar--photo { box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(32,40,51,.3); }
.author__avatar--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Cartes articles : léger vignettage sur l'image pour sortir de l'aplat "maquette" */
.article-card__image { position: relative; }
.article-card__image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, transparent 58%, rgba(32,40,51,.12));
}

/* Galerie avant/après (section à venir) : ratios verrouillés = comparabilité premium */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.ba-pair figure { position: relative; aspect-ratio: 3/4; margin:0; }
.ba-pair img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ba-pair figcaption {
  position: absolute; bottom: 0; inset-inline: 0;
  background: linear-gradient(transparent, rgba(32,40,51,.72));
  color: #fff; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding:var(--sp-5) var(--sp-3) var(--sp-2);
}

/* ─── Contraste du HERO (fond marine) ─── */
/* Les mots accentués étaient en encre (#202833) → quasi invisibles sur le fond sombre.
   On les passe en OR clair : contraste fort + accent de marque premium. */
.hero .highlight { color: var(--clr-accent-soft); }
/* Sous-titre légèrement éclairci pour un meilleur confort de lecture sur le sombre */
.hero__subtitle { color: var(--clr-primary-light); }

/* ═══════════════════════════════════════════════════════════════════
   VAGUE EFFETS — micro-interactions premium (raffiné, pas tape-à-l'œil)
   Le bloc @media (prefers-reduced-motion: reduce) plus haut neutralise tout ça.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — Sheen doré animé sur le mot mis en avant du hero */
@media (prefers-reduced-motion: no-preference) {
  .hero .highlight {
    background: linear-gradient(100deg,
      var(--clr-accent) 20%, var(--clr-primary-light) 45%, var(--clr-accent-soft) 55%, var(--clr-accent) 80%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: sheen 3s var(--ease-out) .6s 1;   /* un seul reflet à l'arrivée */
  }
}
@keyframes sheen { to { background-position: 220% center; } }

/* 2 — Soulignement OR qui se trace sous les titres de section à l'apparition */
.section__title { position: relative; }
/* réserve l'espace du trait (bottom -10px + 3px) pour qu'il ne chevauche pas le sous-titre,
   surtout sur mobile où le titre passe sur 2 lignes et l'écart se resserre */
.section__title.fx-underline { margin-bottom:var(--sp-4); }
.section__title.fx-underline::after {
  content: ""; position: absolute; left: 0; bottom: -10px;
  height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-soft));
  transition: width .9s var(--ease-out) .15s;
}
.section__title.fx-underline.fx-in::after { width: 64px; }
.section__title.fx-underline.fx-center::after { left: 50%; transform: translateX(-50%); }

/* 3 — Halo doré + élévation renforcée au survol des cartes */
@media (hover: hover) {
  .service-card, .pricing-card, .article-card, .review-card {
    transition: transform var(--spring), box-shadow var(--transition-slow), border-color var(--transition);
  }
  .service-card:hover, .pricing-card:hover, .article-card:hover, .review-card:hover {
    box-shadow: 0 18px 44px -14px rgba(32,40,51,.28), 0 0 0 1px rgba(151,167,140,.38);
    border-color: rgba(151,167,140,.45);
  }
}

/* 4 — Balayage lumineux doré sur les boutons primaires au survol */
.btn--primary { position: relative; overflow: hidden; }
/* Second reflet de .btn--primary : neutralisé par `content:none` (28/07), code mort retiré le 26/09. */

/* ═══════════════════════════════════════════════════════════════════
   MODALE COMPARATIF DES 3 FORMULES ONLINE
   ═══════════════════════════════════════════════════════════════════ */
.offer-compare-link {
  display: inline-block;
  color: var(--clr-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-bottom:var(--sp-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offer-compare-link:hover { color: var(--clr-accent); }
.service-card--clickable { cursor: pointer; }
body.modal-open { overflow: hidden; }

.offer-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding:20px;
  background: rgba(32,40,51,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.offer-modal-overlay[hidden] { display: none; }

.offer-modal {
  background: var(--clr-bg, #f6f4f0);
  border-radius: var(--radius-lg);
  max-width: 1040px; width: 100%;
  margin:auto; padding:var(--sp-6) var(--sp-6);
  position: relative;
  box-shadow: 0 30px 80px rgba(32,40,51,.42);
  animation: offerRise .3s var(--ease-out);   /* glissement seul (pas d'opacité) → jamais invisible */
}
@keyframes offerRise { from { transform: translateY(16px); } }
.offer-modal__close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: var(--fs-xl); line-height: 1;
  cursor: pointer; color: var(--clr-muted); padding:var(--sp-1) var(--sp-2);
}
.offer-modal__close:hover { color: var(--clr-ink); }

.offer-modal__head { text-align: center; max-width: 660px; margin:0 auto var(--sp-5); }
.offer-modal__eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--clr-accent); background: #fdf6e9;
  border: 1px solid rgba(151,167,140,.3);
  padding:var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); margin-bottom:var(--sp-3);
}
.offer-modal__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xl); color: var(--clr-ink); margin-bottom:var(--sp-3);
}
.offer-modal__sub { font-size: var(--fs-base); color: var(--clr-muted); line-height: 1.55; }

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:var(--sp-4); align-items: stretch; }
.offer-col {
  background: #fff; border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding:var(--sp-5) 20px 20px;
  display: flex; flex-direction: column;
}
.offer-col--featured {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px rgba(32,40,51,.14), 0 18px 40px -18px rgba(32,40,51,.4);
  position: relative;
}
.offer-col__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-ink-2));
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding:var(--sp-1) var(--sp-4); border-radius: var(--radius-pill); white-space: nowrap;
}
.offer-col__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--clr-ink); }
.offer-col__tag { font-size: var(--fs-xs); font-weight: 600; color: var(--clr-muted); margin-bottom:var(--sp-3); }
.offer-col__price { display: flex; align-items: baseline; gap:var(--sp-1); }
.offer-col__from { font-size: var(--fs-sm); color: var(--clr-muted); font-weight: 600; }
.offer-col__price strong { font-size: var(--fs-xl); font-weight: 700; color: var(--clr-primary); font-variant-numeric: tabular-nums; }
.offer-col__unit { font-size: var(--fs-sm); color: var(--clr-muted); }
.offer-col__std { font-size: var(--fs-xs); color: var(--clr-muted); margin-top:var(--sp-1); }
.offer-col__for { font-size: var(--fs-sm); color: var(--clr-ink); margin:var(--sp-3) 0; line-height: 1.45; }
.offer-col__plus { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-accent); margin-bottom:var(--sp-2); }
.offer-col__list { list-style: none; padding:0; margin:0 0 var(--sp-4); display: flex; flex-direction: column; gap:var(--sp-2); }
.offer-col__list li { position: relative; padding-left:var(--sp-5); font-size: var(--fs-sm); color: var(--clr-ink); line-height: 1.4; }
.offer-col__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--clr-primary); font-weight: 700; }
.offer-col .btn { margin-top:auto; }
/* Boutons ghost visibles dans la modale (le style ghost de base = texte blanc, pour fond sombre) */
.offer-modal .btn--ghost { color: var(--clr-dark); border-color: var(--clr-border); }
.offer-modal .btn--ghost:hover { background: var(--clr-bg-alt); border-color: var(--clr-primary); color: var(--clr-primary); }
/* Le bouton « Me prévenir » n'apparaît qu'au survol de l'offre (vraie souris) ;
   sur écran tactile (pointer coarse / pas de hover), il reste TOUJOURS visible. */
@media (hover: hover) and (pointer: fine) {
  .offer-col .btn {
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  .offer-col:hover .btn,
  .offer-col:focus-within .btn { opacity: 1; transform: none; pointer-events: auto; }
}
.offer-modal__foot { text-align: center; font-size: var(--fs-xs); color: var(--clr-muted); margin-top:var(--sp-5); line-height: 1.55; }

@media (max-width: 820px) {
  .offer-grid { grid-template-columns: 1fr; }
  /* Ordre identique à l'ordinateur : Essentiel → Transformation → Élite
     (la progression tarifaire doit se lire pareil sur tous les formats). */
  .offer-modal { padding:var(--sp-5) var(--sp-4); }
  .offer-modal__title { font-size: var(--fs-lg); }
}

/* Zone de réservation zcal : choix de la prestation, puis agenda correspondant.
   Visible seulement si au moins un lien est renseigné dans ZCAL_URLS. */
.booking-embed { min-width: 320px; }

.booking__presta-title {
  margin:0 0 var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-text);
  text-align: center;
}
.presta-choice--zcal {
  max-width: 620px;
  margin:0 auto var(--sp-3);
}
/* Hauteurs calées sur le contenu RÉEL de la page zcal, mesuré le 21/07 :
   778 px en desktop, 925 px en mobile (état calendrier, le plus haut).
   Une iframe sur un autre domaine ne peut pas s'auto-dimensionner : trop courte
   le visiteur doit scroller DANS l'encart pour atteindre les créneaux, trop
   haute il reste du blanc. On vise donc au plus juste, avec ~15 px de marge.
   ⚠️ À revoir si la mise en page zcal change (intro retirée, autre disposition). */
/* Le widget zcal fixe lui-même sa hauteur : aucune valeur en dur ici, sinon
   on réintroduit le problème qu'il résout. min-height sert seulement à éviter
   un saut de mise en page pendant le chargement. */
.booking-embed__frame {
  position: relative;          /* repère pour l'ancre du calendrier */
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.booking-embed__frame .zcal-inline-widget { width: 100%; }
.booking-embed__frame iframe { width: 100%; border: 0; display: block; }

/* Utilisé uniquement par le repli en iframe (script zcal injoignable) :
   là, la hauteur doit bien être imposée. */
.booking-embed__frame--repli { min-height: 790px; }
@media (max-width: 640px) {
  .booking-embed__frame--repli { min-height: 940px; }
  .booking-embed__frame--repli iframe { height: 940px !important; }

  /* 🔁 RETIRÉ le 21/07 à la demande de Brandon — à reprendre plus tard.
     Un rognage de -168 px masquait ici le bandeau zcal (logo 115 px + nom),
     soit 186 px avant d'atteindre le titre de la prestation, alors que le logo
     figure déjà dans l'en-tête du site. Mesures conservées si on y revient :
     logo 34→149, nom 160→186, titre 186, calendrier 377 (écran 375 px).
     La piste propre reste de désactiver « Afficher l'intro » côté zcal — mais
     cela retirerait aussi le logo des liens partagés en direct, où il rassure.
     ⚠️ Mobile uniquement : en desktop, la mise en page à deux colonnes place le
     calendrier en haut à droite, un rognage couperait le nom du mois. */
}

/* ── Choix de la prestation dans le formulaire de réservation ────────────────
   Tous les rendez-vous sont des appels découverte de 15 min, mais le sujet
   diffère (présentiel, distance, hybride, bilan articulaire). Le connaître
   avant l'appel change la préparation.
   Boutons plutôt que menu déroulant : les 4 options sont visibles d'un coup
   d'œil, et une cible tactile large (≥44px) au moment de la conversion.      */
.presta-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--sp-3);
  margin-top:var(--sp-2);
}
.presta-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.presta-choice label {
  display: flex;
  align-items: center;
  gap:var(--sp-2);
  min-height: 48px;
  padding:var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius);
  background: var(--clr-bg);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.presta-choice label:hover { border-color: var(--clr-primary); }
.presta-choice__ico { font-size: var(--fs-md); line-height: 1; flex: none; }
.presta-choice input:checked + label {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-weight: 600;
}
/* Le focus clavier doit rester visible : l'input réel étant masqué,
   on porte l'anneau de focus sur l'étiquette. */
.presta-choice input:focus-visible + label {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}
.presta-choice.invalid label { border-color: var(--clr-danger); }

@media (max-width: 640px) {
  .presta-choice { grid-template-columns: 1fr; }
}

/* Échec réel d'envoi du formulaire de réservation.
   Distinct de .form__error (validation d'un champ) : ici la saisie est bonne,
   c'est la transmission qui a échoué — le visiteur doit comprendre que son
   rendez-vous n'est PAS pris et savoir quoi faire. */
.booking__send-error {
  margin:var(--sp-4) 0 0;
  padding:var(--sp-4) var(--sp-4);
  background: #f7ecec;
  border: 1px solid #e7b9b9;
  border-radius: var(--radius);
  color: var(--clr-danger);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.booking__send-error a { color: var(--clr-danger); font-weight: 600; }

/* ── L'attribut hidden doit TOUJOURS masquer ────────────────────────────────
   Le navigateur applique `display:none` aux éléments [hidden] via sa feuille
   par défaut — mais la moindre règle `display` du site l'emporte, car elle est
   plus spécifique. Trois éléments étaient dans ce cas :
     .booking__form (flex)  → le formulaire restait affiché SOUS le message
                              « Appel confirmé », invitant à réserver deux fois
     .slots (flex)          → panneau de créneaux
     .booking__grid (grid)  → calendrier
   Conséquence : tout `element.hidden = true` en JavaScript était sans effet
   visuel sur ces trois-là. Cette règle rétablit le comportement attendu
   partout, y compris pour la bascule vers l'agenda zcal.                      */
[hidden] { display: none !important; }

/* ── Section réservation quand zcal est actif : tout tenir dans un écran ─────
   L'agenda zcal fait 778 px à lui seul. Pour éviter au visiteur de scroller
   entre le titre et les créneaux, on compresse tout ce qui l'entoure et on
   place les 4 prestations sur UNE ligne à partir de 900 px de large.
   Ces règles ne s'appliquent QUE si zcal est branché (classe posée en JS) :
   le calendrier maison, plus compact, garde ses espacements d'origine.        */
@media (min-width: 900px) {
  /* Les sections font min-height:100vh. Or l'en-tête fixe occupe ~71 px :
     une section de 100vh ne peut donc JAMAIS tenir sous lui. On retranche sa
     hauteur pour que la section de réservation s'arrête pile au bas de l'écran. */
  .booking--zcal { min-height: calc(100vh - 72px); }
  .booking--zcal { padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
  .booking--zcal .section__header { margin-bottom:var(--sp-4); }
  /* Eyebrow décoratif « PRISE DE RENDEZ-VOUS » : le titre juste en dessous dit
     déjà « Réserver un appel ». ~35 px récupérés sans perte d'information. */
  .booking--zcal .section__label { display: none; }
  .booking--zcal .section__title { font-size: var(--fs-xl); margin-bottom:var(--sp-1); }
  /* Masqué : « Choisissez votre créneau de 15 minutes pour un premier échange
     gratuit » répète ce que l'agenda zcal affiche déjà (durée) et ce que dit la
     ligne de réassurance juste en dessous (gratuit). Deux lignes récupérées
     sans rien perdre pour le visiteur. */
  .booking--zcal .section__desc { display: none; }
  .booking--zcal .booking__reassurance { margin-top:var(--sp-2) !important; font-size: var(--fs-base); }
  .booking--zcal .booking__presta-title { margin:var(--sp-4) 0 var(--sp-3); font-size: var(--fs-base); }

  /* 4 prestations sur une ligne : ~60 px gagnés sur la hauteur */
  .booking--zcal .presta-choice--zcal {
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
    gap:var(--sp-3);
    margin-bottom:var(--sp-4);
  }
  .booking--zcal .presta-choice--zcal label {
    min-height: 46px;
    padding:var(--sp-3) var(--sp-3);
    font-size: var(--fs-base);
    gap:var(--sp-2);
  }
  .booking--zcal .booking__alternative { margin-top:var(--sp-4); font-size: var(--fs-sm); line-height: 1.4; }
}

/* Écrans peu hauts (portables 13-14") : l'agenda seul dépasse la hauteur utile.
   On le laisse défiler avec la page plutôt que de rapetisser le calendrier au
   point de le rendre pénible à cliquer. */
@media (min-width: 900px) and (max-height: 900px) {
  .booking--zcal { padding-top:20px; padding-bottom:20px; }
  .booking--zcal .section__title { font-size: var(--fs-xl); }
}


/* Repère invisible situé à la profondeur du calendrier DANS l'encart zcal.
   Le calendrier vit dans une iframe d'un autre domaine : impossible de le
   viser directement. On pose donc une ancre à la même hauteur (mesurée à
   397 px sur les 4 prestations ; on s'arrête à 380 pour tolérer une ligne de
   description supplémentaire sur les écrans étroits).
   `scroll-margin-top` compense l'en-tête fixe du site. */
.booking-embed__ancre {
  position: absolute;
  top: 380px;                  /* valeur de repli : le JS la recalcule selon la largeur */
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top:86px;
}

/* ─── PASSE DE VITALITÉ — présence du vert VITAL (#97a78c) ────────────
   Le rebranding était trop sobre ("manque de vie") : on fait respirer
   l'accent vert sur les chiffres, labels, icônes, soulignés et le hero. */
/* Sur fond SOMBRE (hero) : sauge clair qui pop */
.hero__stats-bar .stat strong { color: var(--clr-accent); }
/* Sur fond CLAIR : vert profond, vif ET lisible (prix, chiffres, labels) */
.service-card .price__amount, .service-card__price--credit .price__amount,
.service-card__price--soon .price__amount, .pricing-card--featured .price__amount,
.price__amount { color: var(--clr-accent-deep); }
.trust-stat__value, .key-number__value, .stat-value,
.bilan-stat__value--accent { color: var(--clr-accent-deep); }
.section__label { color: var(--clr-accent-deep); background: rgba(95,122,100,.12); }
/* Souligné vivant sous les titres de section (centrés) */
.section__header { }
.section__header .section__title::after {
  content: ""; display: block; width: 52px; height: 3px; margin:var(--sp-4) auto 0;
  background: var(--clr-accent-deep); border-radius: 3px;
}
/* Icônes de service en vert (remplace le dégradé violet résiduel #c7d2fe) */
.service-card__icon {
  background: linear-gradient(135deg, rgba(151,167,140,.20), rgba(151,167,140,.42));
  color: var(--clr-accent);
}
.service-card:hover .service-card__icon { background: linear-gradient(135deg, var(--clr-accent), #7f947f); color:#fff; }
/* Liens de navigation & contenu : accent vert au survol (sans toucher les boutons) */
.nav__link:hover, .article-content a:hover, .recette-card__link:hover { color: var(--clr-accent-deep); }
.footer__links a:hover { color: var(--clr-accent); }
/* Bouton principal : lueur verte discrète au survol pour l'énergie */
.btn--primary:hover { box-shadow: 0 10px 28px rgba(151,167,140,.38); }
/* Lueur verte dans le hero pour casser l'aplat sombre.
   ⚠️ NE PAS toucher aux .hero__blob (position:absolute) — sinon ils prennent
   de la place dans le flux et créent un énorme vide. On ne remonte QUE le contenu. */
.hero__inner, .hero__stats-bar, .hero__scroll-down { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   FOND REPOS #202833 — règle de marque (28/07)
   Corps de texte = avoine #e6e2dc · Gros titres = gris métal #c6c4c4
   ═══════════════════════════════════════════════════════════════════════ */
.hero__title              { color: #c6c4c4; }                 /* gros titre → gris métal */
.hero .stat strong        { color: #c6c4c4; }                 /* chiffres (emphase) → métal */
.hero__subtitle           { color: var(--clr-primary-light); } /* corps → avoine */
.hero .stat span          { color: var(--clr-primary-light); } /* libellés stats → avoine */
.footer p,
.footer .logo__sub,
.footer__links a          { color: var(--clr-primary-light); } /* footer : corps → avoine */

/* ═══════════════════════════════════════════════════════════════════════
   BOUTONS — retrait de l'effet brillant (balayage) + lumineux (halo vert) (28/07)
   ═══════════════════════════════════════════════════════════════════════ */
.btn::after,
.btn--primary::after,
.fab-rdv::after           { content: none; }                  /* plus de balayage brillant */
.btn--primary            { box-shadow: none; }               /* plus de lueur au repos */
.btn--primary:hover      { box-shadow: 0 2px 8px rgba(32,40,51,.14); } /* ombre neutre discrète (annule la lueur verte) */
.fab-rdv                 { box-shadow: 0 6px 18px rgba(32,40,51,.22); } /* flottant sobre, sans anneau vert */
.fab-rdv:hover           { box-shadow: 0 10px 24px rgba(32,40,51,.28); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════════════
   ALTERNANCE REPOS ↔ AVOINE — système de couleurs (spec Brandon 28/07)
   • Fond REPOS  #202833 : gros titres MÉTAL #c6c4c4 · corps AVOINE #e6e2dc
   • Fond AVOINE #e6e2dc : gros titres REPOS #202833 · corps CAOUTCHOU #333
   • Éléments / accents : VERT VITAL #97a78c
   Sections REPOS : services, booking, articles, faq (+ hero, footer)
   Sections AVOINE : about, reviews, contact, recettes
   ══════════════════════════════════════════════════════════════════════════ */
/* --metal / --caoutchou : déclarés dans le :root principal (audit 24/09). */
body { background: var(--clr-primary-light); }

/* ---- Fonds de section ---- */
.services, .booking, .articles, .faq { background: var(--clr-primary); }
.about, .reviews, .contact, .recettes { background: var(--clr-primary-light); }

/* ---- REPOS : typographie ---- */
:is(.services,.booking,.articles,.faq) { color: var(--clr-primary-light); }
:is(.services,.booking,.articles,.faq) :is(h1,h2,h3,h4,.section__title,.service-card__title,.article-card__title,.faq__question) { color: var(--metal); }
:is(.services,.booking,.articles,.faq) :is(p,li,span,small,label,figcaption,.section__desc,.article-card__excerpt,.article-card__meta,.faq__answer,.service-card__list) { color: var(--clr-primary-light); }

/* ---- AVOINE : typographie ---- */
:is(.about,.reviews,.contact,.recettes) :is(h1,h2,h3,h4,.section__title,.review-card__author,.recette-card__title,.about__name) { color: var(--clr-primary); }
:is(.about,.reviews,.contact,.recettes) :is(p,li,span,small,label,figcaption,.section__desc,.review-card__text,.recette-card__meta,.about__text) { color: var(--caoutchou); }

/* ---- Cartes sur fond REPOS → surface foncée élevée ---- */
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) {
  background: var(--caoutchou);
  border-color: rgba(230,226,220,.14);
}
.faq__item.is-open { border-color: var(--clr-accent); }
.faq__item.is-open .faq__question { color: var(--clr-primary-light); }
.article-card__content, .article-card__excerpt { background: transparent; }

/* ---- Cartes sur fond AVOINE → avoine + bord métal (charte pure, pas de blanc) ---- */
:is(.reviews,.recettes) :is(.review-card,.recette-card,.review-card--featured) {
  background: var(--clr-primary-light);
  border: 1px solid var(--metal);
}
:is(.reviews,.recettes) .recette-card__content { background: var(--clr-primary-light); }

/* ---- Éléments / accents = VERT VITAL ----
   ⚠️ Sur FOND CLAIR, le vert sauge (#97a78c) tombe a 2,3-2,6 de contraste :
   sous le seuil d'accessibilite (4,5), et meme sous celui du gros texte (3,0).
   On garde le vert de la charte, mais dans sa version profonde
   (`--clr-accent-deep`) partout ou il sert de couleur de TEXTE sur clair.
   Sur fond sombre, le sauge reste (5,8-6,6) : on n'y touche pas.
   Audit du 05/09. */
.section__label { color: var(--clr-accent-deep); background: rgba(151,167,140,.16); }
.section__title.fx-underline::after { background: var(--clr-accent); }
.service-card__icon { color: var(--clr-accent); }
.service-card__list li::before { color: var(--clr-accent); }
.service-card__price { color: var(--clr-accent-deep); }   /* les PRIX : 2,55 -> conforme */
.faq__icon { color: var(--clr-accent); }
.article-card__tag { color: #fff; background: var(--clr-accent); }
.review-card__stars { color: var(--clr-accent); }
.trust-stat__num, .trust-stat strong { color: var(--clr-accent); }
.result-card strong, .result-card__value { color: var(--clr-accent); }

/* ---- Liens (hors boutons) ---- */
:is(.services,.articles,.faq) a:not(.btn):not([class*="nav__"]):not(.article-card__link) { color: var(--clr-accent-deep); }
:is(.about,.reviews,.contact,.recettes) a:not(.btn):not([class*="nav__"]) { color: var(--clr-accent-deep); }

/* ---- Boutons : lisibilité sur fond REPOS ---- */
:is(.services,.articles,.faq,.booking) .btn--primary { color: #fff; }
:is(.services,.articles,.faq,.booking) .btn--ghost { color: var(--clr-primary-light); border-color: rgba(255,255,255,.32); }
:is(.services,.articles,.faq,.booking) .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }

/* ---- Header AVOINE : écriture REPOS ---- */
.nav__link { color: var(--clr-primary); }
.nav__link:hover { color: var(--clr-primary); background: rgba(32,40,51,.06); }
.logo__sub { color: var(--clr-primary); }

/* ---- Correctif spécificité : accents vital toujours prioritaires ---- */
:is(.services,.booking,.articles,.faq,.about,.reviews,.contact,.recettes) .section__label {
  color: var(--clr-accent); background: rgba(151,167,140,.16);
}
:is(.services,.booking,.articles,.faq) .faq__icon,
:is(.services,.booking,.articles,.faq) .service-card__icon,
:is(.services,.booking,.articles,.faq) .service-card__price { color: var(--clr-accent-deep); }

/* ---- Correctifs contraste (aperçu 28/07) ---- */
/* Liens de la section Réservation (fond REPOS) : vert vital lisible (étaient REPOS = invisibles) */
:is(.booking) a:not(.btn):not([class*="nav__"]) { color: var(--clr-accent); }
/* Poignées Instagram sur avoine : REPOS lisible (le vert vital était trop clair) */
:is(.reviews,.recettes) a.author__ig:not(.btn) { color: var(--clr-primary); }

/* Lien "Lire l'article" sur carte REPOS foncée : vert vital (était REPOS = invisible) */
:is(.articles) .article-card__link { color: var(--clr-accent); }
/* Cartes de choix de prestation (Réservation) : avoine + texte REPOS, plus de blanc */
.booking .presta-choice label { background: var(--clr-primary-light); border-color: var(--metal); }
.booking .presta-choice label,
.booking .presta-choice :is(label, span, strong, p, small, div) { color: var(--clr-primary); }

/* ══ Derniers fonds blancs → charte (28/07) ══ */
/* Note fiscale (services, REPOS) : encadré discret avoine translucide au lieu de blanc */
.services__tax-note { background: rgba(230,226,220,.07); border: 1px solid rgba(230,226,220,.16); }

/* Cartes "résultats concrets" (reviews, avoine) : avoine + bord métal */
.reviews .result-card { background: var(--clr-primary-light); border: 1px solid var(--metal); }

/* Champ de recherche articles (REPOS) : avoine, texte REPOS */
.articles__search-input { background: var(--clr-primary-light); color: var(--clr-primary); border: 1px solid var(--metal); }
.articles__search-input::placeholder { color: rgba(32,40,51,.55); }

/* Onglets de filtre — ARTICLES (fond REPOS) */
.articles__fam-btn { background: transparent; color: var(--clr-primary-light); border: 1px solid rgba(230,226,220,.30); }
.articles__fam-btn.is-active { background: var(--clr-primary-light); color: var(--clr-primary); border-color: var(--clr-primary-light); }
/* Onglets de filtre — RECETTES (fond avoine) */
.recettes__fam-btn { background: transparent; color: var(--clr-primary); border: 1px solid var(--metal); }
.recettes__fam-btn.is-active { background: var(--clr-primary); color: var(--clr-primary-light); border-color: var(--clr-primary); }

/* Lien "Lire la recette" sur carte avoine : REPOS lisible (vital trop clair) */
:is(.recettes) a.recette-card__link:not(.btn) { color: var(--clr-primary); }

/* ══════════════ MAJ 28/07 — retour capture Prestations ══════════════ */
/* Cartes des sections REPOS : fond AVOINE (était caoutchou #333), texte sombre */
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) {
  background: var(--clr-primary-light);
  border-color: var(--metal);
}
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) :is(h1,h2,h3,h4,.service-card__title,.article-card__title,.faq__question) { color: var(--clr-primary); }
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) :is(p,li,span,small,strong,.service-card__list,.article-card__excerpt,.article-card__meta,.faq__answer) { color: var(--caoutchou); }
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) .service-card__price { color: var(--clr-primary); }
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) a:not(.btn) { color: var(--clr-primary); }
.faq__item.is-open .faq__question { color: var(--clr-primary); }

/* Boutons principaux : fond REPOS + texte MÉTAL ; survol VITAL + texte REPOS */
.btn--primary {
  background: var(--clr-primary);
  color: var(--metal);
  border: 1.5px solid var(--metal);
}
.btn--primary:hover {
  background: var(--clr-accent);
  color: var(--clr-primary);
  border-color: var(--clr-accent);
}
.nav__link--rdv { background: var(--clr-primary); color: var(--metal) !important; border: 1.5px solid var(--metal); }
.nav__link--rdv:hover { background: var(--clr-accent); color: var(--clr-primary) !important; border-color: var(--clr-accent); }
.fab-rdv { background: var(--clr-primary); color: var(--metal); }
.fab-rdv:hover { background: var(--clr-accent); color: var(--clr-primary); }
:is(.services,.articles,.faq,.booking) .btn--primary { color: var(--metal); }
/* Boutons ghost sur cartes avoine : contour REPOS lisible */
:is(.services,.articles,.faq) .btn--ghost { color: var(--clr-primary); border-color: var(--clr-primary); }
:is(.services,.articles,.faq) .btn--ghost:hover { background: rgba(32,40,51,.08); border-color: var(--clr-primary); }

/* ══ Accents sur fond AVOINE → REPOS (le VITAL reste réservé aux fonds REPOS) ══ */
/* Sections avoine + cartes avoine (dans sections REPOS) */
:is(.about,.reviews,.contact,.recettes) .section__label,
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) .section__label {
  color: var(--clr-primary); background: rgba(32,40,51,.08);
}
:is(.about,.reviews,.contact,.recettes) .section__title.fx-underline::after { background: var(--clr-primary); }
:is(.about,.reviews,.contact,.recettes) .review-card__stars { color: var(--clr-primary); }
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) :is(.service-card__icon,.faq__icon) { color: var(--clr-primary); }
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) .service-card__list li::before { color: var(--clr-primary); }

/* ══ Bouton flottant "Prendre RDV" → VERT (retour Brandon) ══ */
.fab-rdv { background: var(--clr-accent); color: var(--clr-primary); border: none; }
.fab-rdv:hover { background: var(--clr-primary); color: var(--metal); }

/* ══ Calendrier de réservation : panneaux blancs → îlots AVOINE (section REPOS) ══ */
.booking .calendar, .booking .slots { background: var(--clr-primary-light); border: 1px solid var(--metal); }
.booking .calendar__days-header { background: transparent; border-bottom: 1px solid var(--metal); }
.booking .calendar__days-header span { color: var(--clr-primary); }
.booking .cal__day { color: var(--clr-primary); }
.booking .cal__day:hover:not(:disabled) { background: var(--clr-primary); color: var(--clr-primary-light); }
.booking .slots__empty, .booking .slots__empty p { color: var(--caoutchou); }
.booking .slots__date { color: var(--clr-primary); }

/* ══════════ Onglets de filtre — état actif contraste avec la section (28/07) ══════════
   Articles (section REPOS)  : inactif transparent+avoine · ACTIF avoine + texte REPOS
   Recettes (section AVOINE) : inactif transparent+REPOS  · ACTIF REPOS  + texte avoine
   !important : bat le JS + les règles d'origine qui repositionnaient le fond.        */
/* --- ARTICLES --- */
.articles__fam-btn { background: transparent !important; }
.articles__fam-btn,
.articles__fam-btn span:not([class*="count"]) { color: var(--clr-primary-light) !important; }
.articles__fam-btn.is-active { background: var(--clr-primary-light) !important; }
.articles__fam-btn.is-active,
.articles__fam-btn.is-active span:not([class*="count"]) { color: var(--clr-primary) !important; }
.articles__fam-count { background: rgba(230,226,220,.20) !important; color: var(--clr-primary-light) !important; }
.articles__fam-btn.is-active .articles__fam-count { background: rgba(32,40,51,.14) !important; color: var(--clr-primary) !important; }
/* --- RECETTES --- */
.recettes__fam-btn { background: transparent !important; }
.recettes__fam-btn,
.recettes__fam-btn span:not([class*="count"]) { color: var(--clr-primary) !important; }
.recettes__fam-btn.is-active { background: var(--clr-primary) !important; }
.recettes__fam-btn.is-active,
.recettes__fam-btn.is-active span:not([class*="count"]) { color: var(--clr-primary-light) !important; }
.recettes__fam-count { background: rgba(32,40,51,.10) !important; color: var(--clr-primary) !important; }
.recettes__fam-btn.is-active .recettes__fam-count { background: rgba(230,226,220,.22) !important; color: var(--clr-primary-light) !important; }

/* ══ TOUS les CTA primaires en VERT + écriture REPOS (Prendre RDV, Réserver, Me contacter, Confirmer…) ══
   Fond vert vital + écriture REPOS ; survol → inversion REPOS + métal. Les boutons ghost restent en contour. */
.btn--primary, .nav__link--rdv {
  background: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
  border: 1.5px solid transparent !important;
}
.btn--primary:hover, .nav__link--rdv:hover {
  background: var(--clr-primary) !important;
  color: var(--metal) !important;
  border-color: var(--metal) !important;
}

/* ══ CTA verts : RESTER VERTS au survol (pas d'inversion sombre) — "laisser en vert" ══ */
.btn--primary:hover, .nav__link--rdv:hover, .fab-rdv:hover {
  background: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
  border-color: transparent !important;
  filter: brightness(.94);
}

/* ══ Prix des cartes en VERT vital (retour Brandon) ══ */
.service-card__price, .service-card__price * { color: var(--clr-accent-deep) !important; }

/* ══ Cartes services : fond AVOINE uniforme (populaire / bientôt / cliquable identiques) ══ */
.services .service-card,
.services .service-card--soon,
.services .service-card--featured,
.services .service-card--clickable { background: var(--clr-primary-light) !important; }

/* ══ Accents demandés en VERT : @ liens IG · étoiles avis · barre infos clé du hero ══ */
.author__ig,
:is(.reviews,.recettes) a.author__ig:not(.btn) { color: var(--clr-accent) !important; }
.review-card__stars { color: var(--clr-accent) !important; }
.hero .stat strong { color: var(--clr-accent) !important; }

/* ══ Bandeau "Ils m'ont fait confiance" : valeurs en VERT (★★★★★, 18, jusqu'à 5 ans, 24-73 ans) ══ */
.trust-stat__value { color: var(--clr-accent) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RETOUR GRAPHISTE — 31/07/2026
   Palette charte uniquement : REPOS #202833 · CAOUTCHOU #333 · VITAL #97a78c
                               MÉTAL #c6c4c4 · AVOINE #e6e2dc
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TITRES : hiérarchie renforcée, taille homogène sur toute la page ── */
.section__title { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.hero__title    { font-size: clamp(3.1rem, 7.6vw, 5.1rem); }
/* Soulignement des titres = VERT VITAL partout (à propos, témoignages, contact…) */
.section__title.fx-underline::after,
:is(.about,.reviews,.contact,.recettes) .section__title.fx-underline::after { background: var(--clr-accent); }

/* ── MENU BURGER : plus aucun visuel « bouton », même forme pour tout le menu ── */
@media (max-width: 640px) {
  .nav__menu { background: rgba(230,226,220,.97); }
  .nav__menu .nav__link,
  .nav__menu .nav__link--rdv,
  .nav__menu .nav__link--cta,
  .nav__menu .nav__link--portal {
    background: transparent !important;
    color: var(--clr-primary) !important;
    border: none !important;
    box-shadow: none !important;
    padding:var(--sp-3) var(--sp-4);
    font-weight: 500;
    font-size: var(--fs-base);
    border-radius: var(--radius-sm);
  }
  .nav__menu .nav__link:hover { background: rgba(32,40,51,.06) !important; }
}

/* ── ACCUEIL : « coach dédié » en vert vital uni (fini le dégradé vert/jaune) ── */
.hero .highlight {
  background: none !important;
  -webkit-text-fill-color: var(--clr-accent) !important;
  color: var(--clr-accent) !important;
  animation: none !important;
}

/* ══ PRESTATIONS & TARIFS — cartes ══ */
/* Titres de carte dominants, icône discrète */
.service-card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--clr-primary); }
.service-card__icon  { font-size: var(--fs-lg); width: 42px; height: 42px; opacity: .85; }
/* Checks ✅ en bleu repos */
.services .service-card__list li::before { color: var(--clr-primary) !important; }
/* Prix en bleu repos (arbitrage Brandon) */
.service-card__price, .service-card__price * { color: var(--clr-primary) !important; }
/* « 100€ / séance » : toute la phrase en noir caoutchou */
.service-card__anchor, .service-card__anchor * { color: var(--caoutchou) !important; }
/* Badge « 20 premières places » : cadre bleu repos + écriture avoine */
.founder-badge {
  display: inline-flex; align-items: center; gap:var(--sp-2);
  background: var(--clr-primary); border: 1px solid var(--clr-primary);
  color: var(--clr-primary-light);
  border-radius: var(--radius-pill); padding:var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; margin:var(--sp-1) 0 var(--sp-3); line-height: var(--lh-snug);
}
/* Boutons de carte tous identiques : fond vert vital + écriture bleu repos */
.services .service-card .btn,
.services .service-card .btn--ghost {
  background: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
  border: 1.5px solid transparent !important;
  font-size: var(--fs-base); font-weight: 700;
}
.services .service-card .btn:hover { background: var(--clr-accent) !important; filter: brightness(.94); }

/* ══ MODALE « Comparer les 3 formules » ══ */
.offer-modal { background: var(--clr-primary-light) !important; }
.offer-modal__eyebrow {
  display: inline-block; background: var(--clr-primary); color: var(--clr-primary-light);
  padding:var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); font-weight: 700;
}
.offer-modal__title { font-size: clamp(2rem, 4.2vw, 2.8rem); color: var(--clr-primary); }
.offer-modal__sub, .offer-modal__foot,
.offer-col__for, .offer-col__list li, .offer-mini,
.offer-col__tag, .offer-col__std, .offer-col__plus { color: var(--caoutchou); }
.offer-col__name  { font-size: var(--fs-xl); font-weight: 700; color: var(--clr-primary); }
.offer-col__price, .offer-col__price * { color: var(--clr-primary); }
.offer-col__list li::before, .offer-col__list li::marker { color: var(--clr-accent); }
.offer-modal .btn, .offer-modal .btn--primary, .offer-modal .btn--ghost {
  background: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
  border: 1.5px solid transparent !important;
  font-size: var(--fs-base); font-weight: 700;
}

/* ══ TÉMOIGNAGES ══ */
/* Les 4 encarts de confiance : fond vert vital, texte bleu repos */
.reviews .trust-stat { background: var(--clr-accent) !important; border-color: var(--clr-accent) !important; }
.reviews .trust-stat__value,
.reviews .trust-stat__label { color: var(--clr-primary) !important; }
/* Cartes d'avis : fond bleu repos, texte avoine */
.reviews .review-card,
.reviews .review-card--featured {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
}
.reviews .review-card__text,
.reviews .review-card p { color: var(--clr-primary-light) !important; }
/* Nom, âge, formule, badge : gris métal */
.reviews .author__info strong,
.reviews .author__info span,
.reviews .review-card__badge { color: var(--metal) !important; background: transparent !important; }
/* Étoiles + Instagram : vert vital */
.reviews .review-card__stars,
.reviews a.author__ig:not(.btn) { color: var(--clr-accent) !important; }
/* Cercles d'initiales supprimés */
.reviews .author__avatar { display: none !important; }
/* Numérotation « 1 / 18 » : fond bleu repos, écriture gris métal */
.reviews .carousel__count { background: var(--clr-primary); color: var(--metal); }
/* « Des résultats concrets » : titre Breadley normal + cadres vert vital */
.reviews__results-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700; color: var(--clr-primary);
}
.reviews .result-card { background: var(--clr-accent) !important; border-color: var(--clr-accent) !important; }
.reviews .result-card em, .reviews .result-card q, .reviews .result-card blockquote { color: var(--clr-primary) !important; }
.reviews .result-card, .reviews .result-card * { color: var(--caoutchou); }
.reviews .result-card strong { color: var(--clr-primary) !important; }

/* ══ PRISE DE RENDEZ-VOUS ══ */
.booking__reassurance { color: var(--clr-accent) !important; font-weight: 600; }
/* Boutons : fond gris métal, écriture bleu repos, texte centré */
.booking .btn, .booking .btn--primary, .booking .btn--ghost,
.booking .presta-choice label {
  background: var(--metal) !important;
  color: var(--clr-primary) !important;
  border: 1.5px solid transparent !important;
  justify-content: center; text-align: center;
}
.booking .btn:hover { filter: brightness(.95); }

/* ══ BLOG ══ */
/* Carte d'article survolée / sélectionnée : fond gris métal */
.articles .article-card.is-active { background: var(--metal) !important; }
/* Numérotation « 1 / 31 » : fond gris métal, écriture bleu repos */
.articles .carousel__count { background: var(--metal); color: var(--clr-primary); }

/* ══ NUTRITION / RECETTES ══ */
.recettes .recette-card { border: 1.5px solid var(--clr-primary) !important; }
/* Encarts kcal / protéines : fond bleu repos, écriture gris métal */
.recettes .recette-card__macros,
.recettes .recette-card__macros * { background: var(--clr-primary) !important; color: var(--metal) !important; }
/* Numérotation « 1 / 146 » : fond bleu repos, écriture gris métal */
.recettes .carousel__count { background: var(--clr-primary); color: var(--metal); }
/* « Voir plus ↓ » dans les avis : vert vital lisible sur la carte bleu repos */
.reviews .review-more-btn { color: var(--clr-accent) !important; background: transparent !important; }

/* ── LOGO PRINCIPAL (monogramme BD + « Personal Trainer » en italique) ──
   Remplace l'ancien submark + texte HTML en capitales. Header & footer. */
.logo__mark--full { height: 54px; width: auto; display: block; }
.footer .logo__mark--full { height: 66px; }
@media (max-width: 640px) { .logo__mark--full { height: 46px; } }

/* ── MOBILE : titres homogènes comme sur PC (d'anciennes règles rapetissaient
   Prestations / Réservation / Contact → incohérent avec le retour graphiste) ── */
@media (max-width: 1024px) {
  .services .section__title,
  .booking .section__title,
  .booking--zcal .section__title,
  .contact .section__title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.18;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RETOUR GRAPHISTE — LOT 2 (31/07)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── QUI SUIS-JE : spécialités contextualisées + bouton centré ── */
.about__skills-intro { font-size: var(--fs-base); font-weight: 600; color: var(--clr-primary); margin:var(--sp-5) 0 var(--sp-3); }
.about__skills { display: grid; grid-template-columns: repeat(2, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-5); }
@media (max-width: 640px) { .about__skills { grid-template-columns: 1fr; } }
.skill-tag {
  display: flex; flex-direction: column; gap:var(--sp-1);
  background: transparent; border-left: 3px solid var(--clr-accent);
  border-radius: 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-4); cursor: default;
}
.skill-tag:hover { background: transparent; transform: none; }
.skill-tag__name { font-size: var(--fs-base); font-weight: 700; color: var(--clr-primary); }
.skill-tag__desc { font-size: var(--fs-sm); color: var(--caoutchou); line-height: 1.45; }
.about__cta { display: flex; justify-content: center; margin-top:var(--sp-2); }

/* ── PRESTATIONS : checks identiques à la modale, alignés sur le 1er mot ── */
.service-card__list li { padding-left:var(--sp-5); }
.service-card__list li::before {
  content: "✓"; position: absolute; left: 0; top: 5px;
  transform: none; width: auto; height: auto;
  background: none; border: none; border-radius: 0;
  color: var(--clr-primary); font-weight: 700; font-size: var(--fs-base);
}
.service-card__list li::after { content: none; }
/* Titres de cartes encore agrandis (demande graphiste) */
.service-card__title { font-size: var(--fs-xl); line-height: 1.2; }
/* « 20 premières places » : écriture gris métal */
.founder-badge { color: var(--metal); }

/* ── MODALE : noms de formules agrandis ── */
.offer-col__name { font-size: var(--fs-xl); }

/* ── TÉMOIGNAGES : lignes des cartes d'avis en vert vital ── */
.reviews .review-card,
.reviews .review-card--featured { border-color: var(--clr-accent) !important; }
.reviews .review-card__author,
.reviews .review-card hr,
.reviews .review-card__text { border-color: var(--clr-accent) !important; }

/* ── FAQ : le « + » en vert vital ── */
:is(.faq) .faq__item .faq__icon,
.faq__icon { color: var(--clr-accent) !important; }

/* ── NUTRITION / RECETTES ── */
.recettes .recette-card { border: 1.5px solid var(--clr-accent) !important; }
/* Encarts kcal / protéines : fond vert vital, écriture bleu repos */
.recettes .recette-card__macros,
.recettes .recette-card__macros * { background: var(--clr-accent) !important; color: var(--clr-primary) !important; }
/* Badges : Rapide = gris métal · Vegan = vert vital · Saisons = contour seul */
.recette-card__badge--rapide { background: var(--metal) !important; color: var(--clr-primary) !important; }
.recette-card__badge--vegan  { background: var(--clr-accent) !important; color: var(--clr-primary) !important; }
.recette-card__badge--saison { background: transparent !important; color: var(--clr-primary) !important; border: 1px solid var(--metal); }

/* ── PRISE DE RENDEZ-VOUS : format tablette ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .booking .section__title,
  .booking--zcal .section__title { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.18; }
  .booking .presta-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap:var(--sp-3); }
  .booking .presta-choice label { width: 100%; }
  .booking .booking-embed__frame { max-width: 100%; }
}

/* ── BANDEAU COOKIES ── */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--clr-primary); color: var(--clr-primary-light);
  border-top: 2px solid var(--clr-accent);
  box-shadow: 0 -6px 24px rgba(32,40,51,.25);
  transform: translateY(100%); transition: transform var(--spring);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: 1180px; margin-inline:auto; padding:var(--sp-4) 20px;
  display: flex; align-items: center; gap:20px; flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 420px; font-size: var(--fs-sm); line-height: 1.55; margin:0; color: var(--clr-primary-light); }
.cookie-banner__text strong { color: #fff; }
.cookie-banner__text a { color: var(--clr-accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap:var(--sp-3); flex-shrink: 0; }
.cookie-banner__actions .btn--outline {
  background: transparent !important; color: var(--clr-primary-light) !important;
  border: 1.5px solid rgba(230,226,220,.5) !important;
}
.cookie-banner__actions .btn--outline:hover { background: rgba(230,226,220,.1) !important; }
@media (max-width: 640px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4); }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT PREMIUM 01/08 — priorités 2, 3 et 5
   Correctifs établis sur le rendu RÉEL (getComputedStyle + ratios WCAG
   calculés dans le navigateur), pas sur la lecture du CSS : plusieurs
   règles citées par l'audit étaient déjà écrasées par le retour graphiste
   du 31/07. Ne sont traités ici que les échecs réellement mesurés.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Flèches de carrousel INVISIBLES dans Articles (11 boutons) ──
   .articles est en fond REPOS depuis le rebranding, mais .carousel__btn est
   resté en texte + bordure REPOS : #202833 sur #202833 = ratio 1,0.
   Rien n'était cliquable à l'œil dans tout le carrousel d'articles. */
.articles .carousel__btn {
  color: var(--metal);
  border-color: var(--metal);
}
.articles .carousel__btn:hover:not(:disabled) {
  background: var(--metal);
  color: var(--clr-primary);
}
.articles .carousel__btn:disabled { opacity: .38; }

/* ── 2. Badge « Populaire » : blanc sur avoine = 1,29:1 ──
   La carte est passée en fond AVOINE au retour graphiste, le badge est resté
   en écriture blanche → illisible sur la carte la plus importante de l'offre. */
.service-card__badge {
  background: var(--clr-primary);
  color: var(--clr-primary-light);
  border: 1px solid var(--clr-primary);
}

/* ── 3. « + » de la FAQ : vert VITAL sur carte avoine = 1,98:1 ──
   L'intention « + en vert vital » (retour graphiste 31/07) est conservée :
   on passe au vert PROFOND, qui reste vert mais atteint 4,86:1. */
:is(.faq) .faq__item .faq__icon,
.faq__icon { color: var(--clr-accent-deep) !important; }
/* Sur fond REPOS, le vert clair reste le bon choix (5,82:1). */
:is(.services,.booking,.articles,.faq) > .container .faq__icon { color: var(--clr-accent); }

/* ── 4. .section__label : 4,41:1, juste sous le seuil AA ──
   Doit battre le « correctif spécificité » de la passe 28/07 (:is(…) .section__label),
   d'où le même niveau de spécificité et une position plus tardive. */
:is(.services,.booking,.articles,.faq) .section__label { color: var(--clr-accent-soft); }
:is(.about,.reviews,.contact,.recettes) .section__label { color: var(--clr-primary); }

/* ── 5. Placeholder « 📸 Photo à venir » : avoine sur avoine, texte fantôme ──
   Tant que la vraie photo n'est pas posée (priorité 1), le repère doit être
   lisible plutôt qu'invisible. */
.about__photo-placeholder {
  color: rgba(32,40,51,.72);
  font-size: var(--fs-base);
  display: flex; align-items: center; justify-content: center;
}

/* ── 6. Focus clavier sur les 4 sections sombres ──
   :focus-visible global = outline #202833, invisible sur fond #202833 pour
   tous les contrôles posés à même la section (onglets, flèches, créneaux). */
:is(.services,.booking,.articles,.faq) :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
  outline-color: var(--metal);
  outline-offset: 3px;
}
/* …mais les cartes de ces sections sont en AVOINE : on y rétablit l'encre. */
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) :focus-visible {
  outline-color: var(--clr-primary);
}

/* ── 7. Survol du CTA principal non transitionné (filter hors transition) ──
   brightness(.94) s'appliquait d'un coup : saut visuel sur le geste le plus
   fréquent du site. */
.btn, .nav__link--rdv, .fab-rdv, .articles .article-card {
  transition: transform var(--spring), box-shadow var(--transition),
              background var(--transition), color var(--transition),
              border-color var(--transition), filter var(--transition);
}

/* ── 8. Survols collants au doigt (le site est aussi consulté au doigt) ──
   Les :hover sont RÉSERVÉS à la vraie souris. On ne tente pas de les annuler :
   remettre `transparent` sur une carte avoine la ferait virer au sombre au tap. */
@media (hover: hover) and (pointer: fine) {
  .articles .article-card:hover { background: var(--metal) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RETOUR GRAPHISTE — LOT 3
   ══════════════════════════════════════════════════════════════════════════ */

/* ── QUI SUIS-JE : photo alignée sur le texte (tablette + ordinateur) ── */
.about__grid { align-items: start; }
.about__image { align-self: stretch; display: flex; }
.about__image img,
.about__photo-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); }
/* Séparation « Mon parcours » / « Mon accompagnement » */
.about__skills-title {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 700; color: var(--clr-primary);
  margin: 30px 0 14px; padding-top: 26px;
  border-top: 2px solid var(--clr-accent);
}

/* ── PRESTATIONS : checks en VERT VITAL + titres encore agrandis ── */
.services .service-card__list li::before,
:is(.services,.articles,.faq) :is(.service-card,.article-card,.faq__item) .service-card__list li::before {
  color: var(--clr-accent) !important;
}
.service-card__title { font-size: 1.95rem; line-height: 1.18; }

/* ── BLOG : filets internes en vert vital, contour de carte en gris métal ── */
.articles .article-card { border: 1.5px solid var(--metal) !important; }
.articles .article-card__meta { border-top-color: var(--clr-accent) !important; }
.articles .article-card__content hr,
.articles .article-card hr { border: 0; border-top: 1px solid var(--clr-accent); }

/* ── RECETTES : photos mieux cadrées (le film de couleur a été retiré du HTML) ── */
.recette-card__image {
  height: 170px;
  background-size: cover !important;
  background-position: center 45% !important;
  background-repeat: no-repeat !important;
}

/* ── PRISE DE RENDEZ-VOUS : format tablette harmonisé ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .booking .section__title,
  .booking--zcal .section__title {
    font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
    line-height: 1.18; margin-bottom: 10px;
  }
  .booking .section__header { text-align: center; }
  .booking .booking__reassurance { margin-top: 8px; }
  .booking .presta-choice--zcal { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .booking .booking-embed__frame { margin-inline: auto; }
}

/* ── BANDEAU COOKIES : format téléphone ── */
@media (max-width: 640px) {
  .cookie-banner { max-height: none; }
  .cookie-banner__inner { padding: 12px 14px 14px; gap: 10px; }
  /* Seul le TEXTE défile : les deux boutons restent toujours atteignables. */
  .cookie-banner__text { font-size: .78rem; line-height: 1.45; max-height: 26vh; overflow-y: auto; }
  .cookie-banner__actions { flex-direction: column-reverse; gap: 8px; }
  .cookie-banner__actions .btn { width: 100%; justify-content: center; padding: 11px; font-size: .9rem; }
}

/* ── TABLETTE : la photo reste À CÔTÉ du texte (elle était masquée sous 900px) ── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* minmax(0,…) : sans lui, une colonne `fr` ne descend jamais sous la largeur
     de son contenu et fait déborder la page horizontalement. */
  .about__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) !important;
    gap: 30px !important; align-items: start;
  }
  .about__image { display: flex !important; min-width: 0; }
  .about__content { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUI SUIS-JE — photo à taille fixe, texte lisible d'un seul écran
   ══════════════════════════════════════════════════════════════════════════
   Bug corrigé : `height:100%` (étirement sur la hauteur du texte) combiné à
   `aspect-ratio:4/5` faisait réclamer à la photo hauteur×0,8 de LARGEUR
   minimale — 1751px de texte ⇒ 1401px exigés. Une colonne `fr` ne descend
   jamais sous la largeur min-content de son contenu : la photo mangeait 775px
   et le texte tombait à 260px, soit ~2 mots par ligne.
   Correctif : la photo est dimensionnée par sa LARGEUR, jamais par la hauteur
   de la colonne voisine. */
@media (min-width: 1025px) {
  .about__grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
  .about__image { align-self: start; min-width: 0; }
  .about__image img,
  .about__photo,
  .about__photo-placeholder {
    width: 100%;
    height: auto;            /* ← plus d'étirement : la boucle est rompue ici */
    aspect-ratio: 4 / 5;
    max-height: 60vh;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }
}

/* Tablette : même verrou (la colonne y était déjà bornée par minmax(0,…),
   mais la photo s'étirait toujours en hauteur sur toute la colonne). */
@media (min-width: 641px) and (max-width: 1024px) {
  .about__image { align-self: start !important; }
  .about__image img,
  .about__photo,
  .about__photo-placeholder {
    height: auto !important;
    aspect-ratio: 4 / 5;
    max-height: 52vh;
  }
}

/* Téléphone : `.about__image { display:flex }` posé sans media query au lot 3
   annulait le `display:none` d'origine (max-width:900px) — le placeholder vide
   « 📸 Photo à venir » occupait ~470px en haut de section.
   On masque le PLACEHOLDER seul : dès que la vraie photo est posée, elle
   s'affiche automatiquement sur téléphone, sans retoucher ce bloc. */
@media (max-width: 640px) {
  .about__image { display: none; }
  .about__image:has(img) { display: flex; }
  .about__image img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 5; max-height: 55vh;
    object-fit: cover; border-radius: var(--radius-xl);
  }
}

/* Avis : texte déplié (« Voir plus »). La règle générique :is(.reviews…) span le peignait en caoutchouc (#333) 
   sur la carte nuit (contraste ~1,3:1, illisible). Il hérite désormais du clair de son paragraphe. */
.reviews .review-card .review-extra { color: inherit !important; }