/* =========================================================
   SOKCOACH — Séverine Kauffmann, Hypnothérapeute
   Design system — voir charte graphique fournie par la cliente
   Palette : noir profond / doré principal / doré profond / doré lumière / nacré / blanc
   Typos : Cormorant Garamond (display/émotion) + Montserrat (info/action)
   ========================================================= */

/* Deux familles seulement (charte) : Cormorant Garamond + Montserrat.
   Seules les graisses réellement utilisées sont chargées. */
/* Polices auto-hébergées (licence SIL Open Font).
   Elles étaient auparavant chargées depuis fonts.googleapis.com, ce qui
   transmettait l'adresse IP de chaque visiteur à Google sur chaque page.
   Les fichiers sont désormais servis par le site lui-même : aucune requête
   sortante, et le rendu est strictement identique.
   unicode-range est conservé : le navigateur ne télécharge un sous-ensemble
   que s'il rencontre réellement les caractères concernés. */
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/montserrat-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/montserrat-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Couleurs charte */
  --noir: #000000;
  --dore: #D5A372;
  --dore-profond: #A66C23;
  --dore-lumiere: #E7C49E;
  --blanc: #FFFFFF;
  --nacre: #F4EEE7;

  /* Rôles sémantiques (thème clair, par défaut) — fond blanc nacré partout */
  --bg: var(--nacre);
  --bg-soft: #EEE5DA;
  --bg-elevated: #FFFFFF;
  --text: #17140F;
  --text-soft: #5B5449;
  --text-faint: #6E6656;
  --structure: var(--noir);
  --accent: var(--dore);
  --accent-strong: var(--dore-profond);
  --accent-soft: var(--dore-lumiere);
  --border: rgba(23, 20, 15, 0.10);
  --border-strong: rgba(23, 20, 15, 0.22);
  --overlay-scrim: rgba(0,0,0,0.5);
  --focus: #8A5A2B;
  --shadow-sm: 0 1px 2px rgba(23,20,15,0.06);
  --shadow-md: 0 8px 30px rgba(23,20,15,0.08);
  --shadow-gold: 0 10px 40px rgba(166,108,35,0.18);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --container-narrow: 760px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #0A0908;
  --bg-soft: #131110;
  --bg-elevated: #17140F;
  --text: #F4EEE7;
  --text-soft: #C9BFAF;
  --text-faint: #8A8172;
  --structure: #F4EEE7;
  --accent: var(--dore);
  --accent-strong: var(--dore-lumiere);
  --accent-soft: rgba(231,196,158,0.25);
  --border: rgba(244,238,231,0.12);
  --border-strong: rgba(244,238,231,0.24);
  --overlay-scrim: rgba(0,0,0,0.65);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-gold: 0 10px 40px rgba(213,163,114,0.15);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0A0908;
    --bg-soft: #131110;
    --bg-elevated: #17140F;
    --text: #F4EEE7;
    --text-soft: #C9BFAF;
    --text-faint: #8A8172;
    --structure: #F4EEE7;
    --accent: var(--dore);
    --accent-strong: var(--dore-lumiere);
    --accent-soft: rgba(231,196,158,0.25);
    --border: rgba(244,238,231,0.12);
    --border-strong: rgba(244,238,231,0.24);
    --overlay-scrim: rgba(0,0,0,0.65);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .form-note{ color: var(--dore-lumiere); }
  :root:not([data-theme="light"]) .hours tr[data-note] td{ color: var(--dore-lumiere); }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
img, svg, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
/* Les chaînes insécables (adresse e-mail, URL) débordaient sur les petits écrans. */
h1, h2, h3, h4, p, li, a, td, figcaption{ overflow-wrap: break-word; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
input, textarea, select{ font: inherit; color: inherit; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: fixed; top: -60px; left: 1rem; z-index: 200;
  background: var(--noir); color: var(--blanc); padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: 1rem; }

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

/* ---------- Type ---------- */
.display{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--structure);
}
h1.display{ font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2.display{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3.display{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; }

.eyebrow{
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-soft);
  max-width: 68ch;
  font-weight: 300;
}

.quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--structure);
  position: relative;
  max-width: 62ch;
  margin-inline: 0;
  text-wrap: balance;
}
/* Citation en bandeau : sur ligne unique dès que la place le permet (tablette
   et plus), quitte à réduire nettement la taille — au-dessous, retour au
   comportement normal (plusieurs lignes) car aucune taille lisible ne
   permettrait de tenir une phrase de cette longueur sur un téléphone. */
@media (min-width: 700px){
  .quote{
    max-width: none;
    white-space: nowrap;
    width: min(97vw, 1200px);
    font-size: calc(min(97vw, 1200px) / 48);
  }
}
.quote .quote-mark{
  color: var(--accent);
  font-style: normal;
  margin-right: 0.15em;
}

.section-intro{ max-width: 860px; margin-bottom: var(--space-4); }
.section-intro h2{ margin-top: 0.6rem; }
.section-intro p{ margin-top: 1rem; }
.section-intro.center-col{ max-width: 720px; }
@media (min-width: 560px){
  .section-intro.center-col h2{ white-space: nowrap; }
}

/* ---------- Layout ---------- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container--narrow{ max-width: var(--container-narrow); }

section{ padding-block: var(--space-6); position: relative; }
section.section--tight{ padding-block: var(--space-4); }
.bg-soft{ background: var(--bg-soft); }
.bg-noir{ background: var(--noir); color: var(--nacre); }
.bg-noir .text-soft{ color: rgba(244,238,231,0.7); }

.grid{ display: grid; gap: var(--space-4); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* ---------- Buttons / CTA ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: var(--noir);
  color: var(--nacre);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover{ background: var(--dore-profond); color: var(--noir); box-shadow: var(--shadow-gold); }
:root[data-theme="dark"] .btn--primary, .bg-noir .btn--primary{ background: var(--accent); color: var(--noir); }
:root[data-theme="dark"] .btn--primary:hover, .bg-noir .btn--primary:hover{ background: var(--accent-soft); }

.btn--ghost{
  border-color: var(--border-strong);
  color: var(--structure);
  background: transparent;
}
.btn--ghost:hover{ border-color: var(--accent-strong); color: var(--accent-strong); }

/* Contextes toujours sombres (hero, bandeaux noirs, bloc CTA) : le bouton
   fantôme doit rester lisible même en thème clair. */
.bg-noir .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost{ border-color: rgba(244,238,231,0.38); color: var(--nacre); }
.bg-noir .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }

.btn--gold{
  background: linear-gradient(135deg, var(--dore-lumiere), var(--dore-profond));
  color: var(--noir);
}
.btn--gold:hover{ box-shadow: var(--shadow-gold); }

.btn--sm{ padding: 0.7em 1.4em; font-size: 0.72rem; }
.btn-row{ display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Mobile : les libellés longs ne doivent jamais être tronqués.
   Les boutons passent pleine largeur et le texte peut revenir à la ligne. */
@media (max-width: 620px){
  .btn{
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding: 1em 1.4em;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    max-width: 100%;
  }
  .btn-row{ width: 100%; gap: 0.75rem; }
  .btn-row > .btn{ width: 100%; justify-content: center; }
  /* le CTA compact du header reste sur une ligne */
  .header-actions .btn--sm{ width: auto; white-space: nowrap; padding: 0.7em 1.1em; font-size: 0.66rem; }
}
/* En dessous de 520px, le trio logo + thème + CTA + burger ne tient plus dans
   la largeur (459px de contenu pour 414px d'écran sur iPhone Plus/Max).
   Le CTA sort de l'en-tête : il reste dans le menu et partout dans les pages. */
@media (max-width: 520px){
  .header-actions .btn--sm{ display: none; }
}

.link-arrow{
  display: inline-flex; align-items: center; gap: 0.5em;
  padding-block: 0.3rem;                 /* cible tactile ≥ 32px */
  /* en inline-flex, une adresse e-mail ne pouvait pas se couper et débordait */
  flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--accent-strong);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-arrow:hover{ border-color: currentColor; gap: 0.75em; }

/* ---------- Header ---------- */
/* Dégradé vertical plutôt qu'un aplat : le bandeau reste lisible au centre
   (là où vivent logo et navigation) mais se fond en douceur dans la page en
   haut et en bas, pour un effet plus léger que la barre pleine d'origine. */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg) 92%, transparent) 30%,
    color-mix(in srgb, var(--bg) 92%, transparent) 78%,
    color-mix(in srgb, var(--bg) 40%, transparent) 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.site-header[data-scrolled="true"]{ border-color: var(--border); }

.header-top{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  color: var(--text-soft);
}
/* Zone de tap confortable : les liens du bandeau ne faisaient que 20px de haut. */
.header-top a{ transition: color var(--dur-fast) var(--ease); display: inline-block; padding-block: 0.4rem; }
.header-top a:hover{ color: var(--accent-strong); }
/* Chaque méthode est un lien distinct vers sa propre page (hypnose.html,
   pnl.html…) : plus d'espace entre elles pour bien les séparer visuellement. */
.header-top__practice{ display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.header-top__practice a{ border-bottom: 1px solid transparent; padding-bottom: 1px; }
.header-top__practice a:hover{ border-color: var(--accent); color: var(--accent-strong); }
.header-top__practice span{ opacity: 0.4; }
.header-top__contact{ display: flex; gap: 1.4rem; align-items: center; }
.header-top__contact a, .header-top__contact span{ white-space: nowrap; }
.header-top__contact .tel{ font-weight: 600; color: var(--structure); }

/* ---------- Ouvert / fermé ---------- */
.ouverture{ display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.ouverture i{
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: var(--text-faint);
}
.ouverture[data-etat="ouvert"] i{ background: #5E9C58; box-shadow: 0 0 5px #5E9C5899; }
.ouverture[data-etat="ferme"] i{ background: #B4523B; }
.ouverture[data-etat="ouvert"]{ color: #4C7F47; }
:root[data-theme="dark"] .ouverture[data-etat="ouvert"]{ color: #8FCB88; }
.ouverture[data-etat="ferme"]{ color: var(--text-faint); }

.header-main{
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.2rem; padding-block: 0.9rem;
}
.brand{ display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; margin-right: 0.6rem; }
/* Symbole seul (S · astre · K), sans le nom ni la baseline — ratio ~3:1.
   Agrandi (52 → 66px) à la demande : le repère de marque doit se voir. */
.brand__logo{ height: 66px; width: auto; }
/* Les fichiers fournis sont nommés d'après le fond auquel ils sont destinés :
   "clair" = encre foncée (fond nacré) · "fonce" = encre blanche (fond noir). */
.brand__logo--on-dark{ display: none; }
:root[data-theme="dark"] .brand__logo--on-light{ display: none; }
:root[data-theme="dark"] .brand__logo--on-dark{ display: block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand__logo--on-light{ display: none; }
  :root:not([data-theme="light"]) .brand__logo--on-dark{ display: block; }
}

/* Le bandeau du haut suit le thème, mais avec un ton dédié plus marqué que le
   reste de la page — pour bien se détacher — au lieu de se fondre dans le
   fond général : nacré plus soutenu en thème clair, noir en thème sombre.
   Contrastes vérifiés (voir tableau ci-dessous) : texte et logo restent
   lisibles dans les deux cas. Le reste du site suit le thème normalement,
   et le logo (clair/foncé) continue de basculer avec lui comme avant. */
.site-header{ --bg: var(--bg-soft); } /* #EEE5DA — texte 14.7:1, texte atténué 6:1 */
:root[data-theme="dark"] .site-header{ --bg: var(--noir); } /* #000000 — texte 18.2:1 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-header{ --bg: var(--noir); }
}
@media (max-width: 700px){
  .brand__logo{ height: 50px; }
}
.brand__name{ display: none; }

.main-nav{ display: flex; align-items: center; gap: clamp(1.3rem, 2vw, 2.3rem); }
.main-nav a{
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--text-soft); position: relative; padding-block: 0.35rem;
  white-space: nowrap;            /* jamais de libellé coupé en deux lignes */
  transition: color var(--dur-fast) var(--ease);
}
.main-nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent-strong);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
}
.main-nav a[aria-current="page"]{ color: var(--structure); }
.main-nav a[aria-current="page"]::after{ transform: scaleX(1); }
/* Survol réservé aux pointeurs qui survolent vraiment : au doigt, le :hover
   « collant » repeignait le texte en noir sur le menu noir (texte invisible). */
@media (hover: hover) and (pointer: fine){
  .main-nav a:hover{ color: var(--structure); }
  .main-nav a:hover::after{ transform: scaleX(1); }
}
/* Doublon du bouton d'action : masqué sur desktop, conservé dans le menu mobile. */
.main-nav .nav-link--cta{ display: none; }
/* Page courante signalée sur le bouton lorsqu'il remplace le lien de nav */
.header-actions .btn[aria-current="page"]{ box-shadow: 0 0 0 3px var(--accent-soft); }

.header-actions{ display: flex; align-items: center; gap: 0.9rem; }
.header-actions .search-toggle{ margin-right: 0.15rem; }
.theme-toggle{
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.theme-toggle:hover{ border-color: var(--accent-strong); }
.theme-toggle svg{ width: 17px; height: 17px; }
/* Sur mobile, la loupe et le soleil/lune (traits fins) se perdent visuellement
   à côté du hamburger (barres pleines) malgré une couleur identique : on
   épaissit le trait en thème sombre pour compenser. */
@media (max-width: 700px){
  :root[data-theme="dark"] .search-toggle svg, :root[data-theme="dark"] .theme-toggle svg{ stroke-width: 2; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .search-toggle svg, :root:not([data-theme="light"]) .theme-toggle svg{ stroke-width: 2; }
  }
}
.theme-toggle .icon-moon{ display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

.nav-toggle{
  display: none; width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center; border: 1px solid var(--border-strong);
}
.nav-toggle svg{ width: 18px; height: 18px; }

@media (max-width: 1060px){
  .header-top__practice{ display: none; }
  .header-top__contact span{ display: none; }
  .main-nav .nav-link--cta{ display: block; } /* réintégré dans le menu mobile */
  /* Le header porte un backdrop-filter : il devient donc le bloc conteneur des
     enfants en position:fixed. On le neutralise à l'ouverture pour que le menu
     se cale bien sur le viewport (sinon il ne fait que la hauteur du header). */
  html[data-nav-open="true"] .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .main-nav{
    position: fixed; inset: 0; z-index: 105;
    width: 100%; height: 100%;
    background: var(--noir); color: var(--nacre);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2.2rem; padding: 5rem 1.5rem 3rem;
    overflow-y: auto;
    transform: translateY(-100%); opacity: 0;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
    pointer-events: none;
  }
  /* Sans z-index, ce plein écran restait un enfant "statique" du header et se
     faisait peindre SOUS .header-actions (venu après lui dans le HTML) : le
     bouton doré « Prendre rendez-vous » du bandeau flottait alors au-dessus du
     menu ouvert, comme un second CTA parasite. En plus du z-index, on masque
     ce bouton (et la recherche/le thème, désormais inutiles) tant que le menu
     plein écran est ouvert — son propre lien « Prendre rendez-vous » suffit. */
  html[data-nav-open="true"] .header-actions > *:not(.nav-toggle){
    visibility: hidden;
  }
  .main-nav a{ color: var(--nacre); font-size: 1.3rem; font-family: var(--font-display); }
  /* Menu plein écran : page courante signalée par la couleur seule, sans filet. */
  .main-nav a::after{ display: none; }
  .main-nav a[aria-current="page"]{ color: var(--accent); }
  /* Au toucher, le libellé reste toujours lisible sur le fond noir. */
  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a:active{ color: var(--accent); }
  html[data-nav-open="true"] .main-nav{ transform: translateY(0); opacity: 1; pointer-events: auto; }
  html[data-nav-open="true"]{ overflow: hidden; }
  .nav-toggle{ display: inline-flex; }
  .nav-toggle .icon-close{ display: none; }
  html[data-nav-open="true"] .nav-toggle .icon-open{ display: none; }
  html[data-nav-open="true"] .nav-toggle .icon-close{ display: block; }
  html[data-nav-open="true"] .nav-toggle{ position: fixed; right: 1.5rem; top: 1.1rem; z-index: 110; border-color: rgba(244,238,231,0.35); color: var(--nacre); }
}
@media (max-width: 520px){
  .header-top__contact a[href^="mailto"]{ display: none; }
}

/* ---------- Hero (bespoke animated cinematic scene) ---------- */
.hero{
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--noir);
}
.hero-scene{ position: absolute; inset: 0; overflow: hidden; }

/* --- Scène 3D animée : sphère d'orbites dorées, reprise du symbole du logo --- */
.hero-3d{
  position: absolute; inset: 0;
  perspective: 1200px;
  perspective-origin: 72% 45%;
  background:
    radial-gradient(ellipse 70% 60% at 72% 42%, rgba(120, 78, 34, 0.55), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 90% 80% at 20% 90%, rgba(60, 40, 20, 0.5), rgba(0,0,0,0) 65%),
    linear-gradient(160deg, #06050a 0%, #0b0806 45%, #14100c 100%);
}
.hero-3d__stage{
  position: absolute;
  top: 44%; left: 72%;
  width: min(46vw, 620px); height: min(46vw, 620px);
  margin: calc(min(46vw, 620px) / -2) 0 0 calc(min(46vw, 620px) / -2);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 14deg)) rotateY(var(--tilt-y, -12deg));
  transition: transform 600ms var(--ease);
}
.hero-3d__ring{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(213, 163, 114, 0.5);
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-3d__ring::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(231, 196, 158, 0.18);
  filter: blur(3px);
}
.hero-3d__ring--1{
  transform: rotateX(72deg) rotateZ(0deg);
  animation: hero-orbit-1 46s linear infinite;
}
.hero-3d__ring--2{
  inset: 11%;
  border-color: rgba(231, 196, 158, 0.42);
  transform: rotateX(64deg) rotateY(32deg);
  animation: hero-orbit-2 62s linear infinite reverse;
}
.hero-3d__ring--3{
  inset: 23%;
  border-color: rgba(166, 108, 35, 0.55);
  transform: rotateX(78deg) rotateY(-24deg);
  animation: hero-orbit-3 38s linear infinite;
}
.hero-3d__ring--4{
  inset: 34%;
  border-color: rgba(213, 163, 114, 0.35);
  transform: rotateY(76deg) rotateX(12deg);
  animation: hero-orbit-2 54s linear infinite;
}
@keyframes hero-orbit-1{
  from{ transform: rotateX(72deg) rotateZ(0deg); }
  to{ transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes hero-orbit-2{
  from{ transform: rotateX(64deg) rotateY(32deg) rotateZ(0deg); }
  to{ transform: rotateX(64deg) rotateY(32deg) rotateZ(360deg); }
}
@keyframes hero-orbit-3{
  from{ transform: rotateX(78deg) rotateY(-24deg) rotateZ(0deg); }
  to{ transform: rotateX(78deg) rotateY(-24deg) rotateZ(360deg); }
}

/* Astre central + halo */
.hero-3d__orb{
  position: absolute; top: 50%; left: 50%;
  width: 34%; height: 34%;
  margin: -17% 0 0 -17%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #F6E3CB 0%, #D5A372 38%, #A66C23 68%, #4a2f12 100%);
  box-shadow:
    0 0 60px 14px rgba(213, 163, 114, 0.42),
    0 0 160px 50px rgba(166, 108, 35, 0.28);
  animation: hero-orb-breathe 12s ease-in-out infinite;
}
@keyframes hero-orb-breathe{
  0%, 100%{ transform: scale(1); opacity: 0.92; }
  50%{ transform: scale(1.05); opacity: 1; }
}

/* Étoile à huit branches, reprise du logo */
.hero-3d__star{
  position: absolute; top: 50%; left: 50%;
  width: 58%; height: 58%;
  margin: -29% 0 0 -29%;
  background: conic-gradient(from 0deg,
    rgba(246, 227, 203, 0) 0deg, rgba(246, 227, 203, 0.85) 3deg, rgba(246, 227, 203, 0) 6deg,
    rgba(246, 227, 203, 0) 84deg, rgba(246, 227, 203, 0.85) 90deg, rgba(246, 227, 203, 0) 96deg,
    rgba(246, 227, 203, 0) 174deg, rgba(246, 227, 203, 0.85) 180deg, rgba(246, 227, 203, 0) 186deg,
    rgba(246, 227, 203, 0) 264deg, rgba(246, 227, 203, 0.85) 270deg, rgba(246, 227, 203, 0) 276deg,
    rgba(246, 227, 203, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.6) 40%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.6) 40%, transparent 72%);
  opacity: 0.75;
  animation: hero-star-turn 90s linear infinite;
}
@keyframes hero-star-turn{ to{ transform: rotate(360deg); } }

/* Sur mobile, la scène prend de l'ampleur et se place en haut à droite,
   au-dessus du texte, plutôt qu'à côté de lui. */
@media (max-width: 820px){
  .hero-3d{ perspective-origin: 62% 28%; }
  .hero-3d__stage{
    top: 26%; left: 66%;
    width: min(86vw, 460px); height: min(86vw, 460px);
    margin: calc(min(86vw, 460px) / -2) 0 0 calc(min(86vw, 460px) / -2);
  }
  .hero-scene__scrim{
    background:
      linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.30) 30%, rgba(0,0,0,0.80) 72%, rgba(0,0,0,0.88) 100%);
  }
}

/* Poussière d'étoiles en profondeur */
.hero-3d__dust{ position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-3d__dust i{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(244, 238, 231, 0.85);
  box-shadow: 0 0 6px 1px rgba(231, 196, 158, 0.55);
  animation: hero-dust-drift 18s ease-in-out infinite;
}
@keyframes hero-dust-drift{
  0%, 100%{ opacity: 0.15; transform: translateZ(0) scale(0.9); }
  50%{ opacity: 0.9; transform: translateZ(40px) scale(1.2); }
}

.hero-scene__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(95deg, rgba(0,0,0,0.78) 8%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%);
}
.hero-scene__rays{
  position: absolute; inset: -20%;
  background: conic-gradient(from 0deg at 78% 30%, rgba(231,196,158,0) 0deg, rgba(231,196,158,0.16) 8deg, rgba(231,196,158,0) 16deg, rgba(231,196,158,0) 40deg, rgba(231,196,158,0.10) 48deg, rgba(231,196,158,0) 56deg, rgba(231,196,158,0) 200deg, rgba(231,196,158,0.14) 208deg, rgba(231,196,158,0) 216deg);
  mix-blend-mode: screen;
  animation: hero-rotate 140s linear infinite;
  opacity: 0.85;
}
@keyframes hero-rotate{ to{ transform: rotate(360deg); } }
.hero-scene__stars{ position: absolute; inset: 0; }
.hero-scene__stars span{
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--dore-lumiere);
  box-shadow: 0 0 6px 1px rgba(231,196,158,0.7);
  animation: hero-twinkle 5.5s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes hero-twinkle{
  0%, 100%{ opacity: 0.15; transform: scale(0.8); }
  50%{ opacity: 0.9; transform: scale(1.15); }
}
.hero-content{
  position: relative; z-index: 2;
  color: var(--nacre);
  /* la marge basse dégage la zone du dégradé de transition */
  padding-block: var(--space-5) clamp(7rem, 14vh, 10rem);
  width: 100%;
}
/* Fondu du hero vers le fond de page (nacré en clair, noir en sombre) */
.hero-scene__fade{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(90px, 12vh, 150px);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%);
  pointer-events: none;
}
.hero-mark{ width: clamp(200px, 22vw, 290px); height: auto; margin-bottom: 1.4rem; opacity: 0.95; }
/* Sur mobile, le contenu du hero (logo + titre + texte) est déjà plus haut que
   l'écran sur pas mal de téléphones (ex. 414×896) : au premier affichage, le
   bouton « Découvrir mes accompagnements » atterrit pile sous la barre CTA
   sticky (fixe, en superposition) et devient illisible / non cliquable.
   Cette réduction d'espace suffit à le faire remonter au-dessus. */
@media (max-width: 700px){
  .hero-content{ padding-top: 2.5rem; }
  .hero-mark{ margin-bottom: 1rem; }
  .hero-actions{ margin-top: 1.6rem; }
}
/* Apparition douce au chargement : le logo entre en fondu avec une très
   légère montée, jamais un effet brusque. Désactivée si l'utilisateur
   préfère moins de mouvement. */
.hero-mark{ animation: hero-mark-in 1100ms var(--ease) both; }
@keyframes hero-mark-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 0.95; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-mark{ animation: none; opacity: 0.95; }
}
/* Bandeau d'accueil : l'activité (eyebrow) et la phrase d'accompagnement
   (lede) sont agrandies par rapport au reste du site, tout en restant
   nettement sous le titre — deux polices seulement (Cormorant pour le
   titre, Montserrat pour tout le reste), et un texte qui évite de casser
   au milieu d'une courte proposition. */
.hero-content .eyebrow{ color: var(--dore-lumiere); font-size: 0.92rem; letter-spacing: 0.18em; }
.hero-content h1{ color: var(--blanc); max-width: 24ch; margin-top: 0.9rem; text-wrap: balance; }
.hero-content .lede{
  color: rgba(244,238,231,0.9); margin-top: 1.3rem; max-width: 58ch;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 350; text-wrap: pretty;
}
.hero-accent{ color: var(--accent); font-weight: 500; }
.hero-content .quote{ max-width: 62ch; }
.hero-actions{ margin-top: 2.2rem; }
.hero-scroll-cue{
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(244,238,231,0.65); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 2;
}
.hero-scroll-cue span{ width: 1px; height: 26px; background: currentColor; opacity: 0.65; }

@media (prefers-reduced-motion: reduce){
  .hero-3d__ring, .hero-3d__orb, .hero-3d__star, .hero-3d__dust i{ animation: none; }
  .hero-3d__dust i{ opacity: 0.6; }
  .hero-3d__stage{ transition: none; }
  .hero-scene__rays{ animation: none; }
  .hero-scene__stars span{ animation: none; opacity: 0.5; }
  .hero-scroll-cue span{ animation: none; }
}

/* Parallax (transform-based, layered depths) */
.parallax{ position: relative; overflow: hidden; }
[data-parallax]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform: none !important; }
}

/* ---------- Stat banner ---------- */
.stat-banner{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  padding: var(--space-4) 0;
}
.stat{ text-align: center; padding-inline: 1rem; }
.stat__value{
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--accent-strong); line-height: 1;
}
.stat__label{ margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-soft); letter-spacing: 0.02em; }
@media (max-width: 720px){
  .stat-banner{ grid-template-columns: 1fr; gap: var(--space-3); }
  .stat{ border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
  .stat:last-child{ border-bottom: none; }
}

/* ---------- Cards ---------- */
.card{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
/* .card sert aussi de lien cliquable (accompagnements liés, organismes) :
   <a> est inline par défaut, il lui faut le comportement de bloc du <div>. */
a.card{ display: block; }
a.card:hover h3{ color: var(--accent-strong); }

.service-card{
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); aspect-ratio: 4/5;
  isolation: isolate;
}
.service-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.service-card:hover img{ transform: scale(1.06); }
.service-card::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.86) 100%);
}
.service-card__body{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem;
  color: var(--nacre); z-index: 2;
}
.service-card__tag{ font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dore-lumiere); }
.service-card__title{ font-family: var(--font-display); font-size: 1.5rem; margin-top: 0.5rem; }
.service-card__desc{
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), margin var(--dur-med) var(--ease);
  font-size: 0.86rem; color: rgba(244,238,231,0.85);
}
.service-card:hover .service-card__desc, .service-card:focus-within .service-card__desc{
  max-height: 6em; opacity: 1; margin-top: 0.6rem;
}
.service-card__more{ display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.9rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; color: var(--dore-lumiere); }

.priority-badge{
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  color: var(--dore-lumiere); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4em 0.8em; border-radius: 999px; border: 1px solid rgba(231,196,158,0.4);
}

/* ---------- Accordion (FAQ) ---------- */
.accordion{ border-top: 1px solid var(--border); }
.accordion-item{ border-bottom: 1px solid var(--border); }
.accordion-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.3rem 0.2rem; text-align: left;
  font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--structure);
}
.accordion-trigger .plus{
  flex-shrink: 0; width: 22px; height: 22px; position: relative;
}
.accordion-trigger .plus::before, .accordion-trigger .plus::after{
  content: ""; position: absolute; background: var(--accent-strong);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.accordion-trigger .plus::before{ width: 14px; height: 1.5px; }
.accordion-trigger .plus::after{ width: 1.5px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.accordion-item[data-open="true"] .plus::after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.accordion-panel{
  max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease);
}
.accordion-panel__inner{ padding-bottom: 1.4rem; color: var(--text-soft); max-width: 68ch; }

/* ---------- Reviews ---------- */
.review-card{
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 0.9rem; height: 100%;
}
.review-card__stars{ color: var(--accent-strong); letter-spacing: 0.14em; font-size: 0.9rem; }
.review-card__text{ font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--structure); flex: 1; }
.review-card__meta{ font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.02em; }
.reviews-empty{
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--space-4); text-align: center; color: var(--text-soft);
}

/* ---------- Modalities (cabinet/domicile/visio) ---------- */
.modalities{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 820px){ .modalities{ grid-template-columns: 1fr; } }
.modality{
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.modality:hover{ border-color: var(--accent-strong); transform: translateY(-2px); }
.modality__icon{ width: 34px; height: 34px; color: var(--accent-strong); margin-bottom: 1rem; }
.modality h2, .modality h3{ margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; font-family: var(--font-sans); }
.modality p{ color: var(--text-soft); font-size: 0.92rem; }
.modality .tag{
  display: inline-block; margin-top: 0.9rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dore-profond);
}

/* ---------- Hours table ---------- */
.hours{ width: 100%; border-collapse: collapse; }
.hours td{ padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.hours td:first-child{ color: var(--text); font-weight: 500; width: 45%; }
.hours td:last-child{ color: var(--text-soft); text-align: right; }
.hours tr[data-note] td{ color: #835520; }
:root[data-theme="dark"] .hours tr[data-note] td{ color: var(--dore-lumiere); }

/* ---------- Forms ---------- */
.field{ margin-bottom: 1.3rem; }
.field label{ display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.5rem; color: var(--text); }
.field .hint{ font-size: 0.74rem; color: var(--text-faint); margin-top: 0.4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select{
  width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(166,108,35,0.14); outline: none;
}
.field textarea{ min-height: 130px; resize: vertical; }
.radio-group{ display: flex; gap: 0.8rem; flex-wrap: wrap; }
.radio-chip{
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.6em 1.2em; font-size: 0.82rem;
  cursor: pointer; position: relative; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.radio-chip input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-chip:has(input:checked){ border-color: var(--accent-strong); background: var(--accent-soft); color: var(--dore-profond); font-weight: 600; }
.radio-chip:has(input:disabled){ opacity: 0.4; cursor: not-allowed; }
.form-note{
  border-radius: var(--radius-md); padding: 1rem 1.2rem; font-size: 0.85rem; margin-top: 1rem;
  background: var(--accent-soft); color: #835520; border: 1px solid rgba(166,108,35,0.2);
}
:root[data-theme="dark"] .form-note{ color: var(--dore-lumiere); }

/* Variante plus visible pour une invite qu'on veut vraiment remarquée
   (ex. « posez juste une question » sur l'agenda), sans en faire un pavé. */
.form-note--highlight{
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.3rem 1.5rem; font-size: 0.98rem; line-height: 1.5;
  border: 1px solid var(--accent-strong); border-left-width: 4px;
  box-shadow: var(--shadow-sm);
}
.form-note--highlight svg{ width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.15em; color: var(--accent-strong); }
.form-status{ margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius-md); font-size: 0.9rem; display: none; }
.form-status[data-state="success"]{ display: block; background: rgba(105,148,99,0.14); color: #3E6B39; border: 1px solid rgba(105,148,99,0.3); }
.form-status[data-state="error"]{ display: block; background: rgba(190,84,63,0.1); color: #A6402B; border: 1px solid rgba(190,84,63,0.28); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--noir); color: var(--nacre); padding-block: var(--space-5) var(--space-3); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img{ width: 90px; height: auto; margin-bottom: 1rem; }
.footer-brand p{ color: rgba(244,238,231,0.6); font-size: 0.86rem; max-width: 30ch; }
.footer-col h3{ font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dore-lumiere); margin-bottom: 1.1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.25rem; }
/* cible tactile confortable : ces liens ne faisaient que 18px de haut */
.footer-col a{ color: rgba(244,238,231,0.75); font-size: 0.9rem; display: inline-block; padding-block: 0.45rem; transition: color var(--dur-fast) var(--ease); }
.footer-col li{ line-height: 1.4; }
.footer-col a:hover{ color: var(--accent); }
.footer-social{ display: flex; gap: 0.9rem; margin-top: 1.4rem; }
.footer-social a{
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(244,238,231,0.25);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.footer-social a:hover{ border-color: var(--accent); color: var(--accent); }
.footer-social svg{ width: 16px; height: 16px; }
.footer-bottom{
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(244,238,231,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.76rem; color: rgba(244,238,231,0.55);
}
.footer-bottom a:hover{ color: var(--accent); }
.footer-legal{ display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- Page hero (interior pages, no big video scene) ---------- */
.page-hero{
  padding-top: var(--space-5); padding-bottom: var(--space-4);
  background: var(--bg-soft);
  position: relative; overflow: hidden;
}
.page-hero__ornament{
  position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  opacity: 0.5; pointer-events: none;
}
.breadcrumb{ font-size: 0.76rem; color: var(--text-faint); margin-bottom: 1rem; }
.breadcrumb a:hover{ color: var(--accent-strong); }

/* ---------- Utility ---------- */
.mt-1{ margin-top: var(--space-1); } .mt-2{ margin-top: var(--space-2); } .mt-3{ margin-top: var(--space-3); }
.mt-4{ margin-top: var(--space-4); } .mt-5{ margin-top: var(--space-5); }
.text-center{ text-align: center; }
.center-col{ max-width: 640px; margin-inline: auto; text-align: center; }
.divider{ height: 1px; background: var(--border); border: none; margin-block: var(--space-4); }
.tag-row{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tag{
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4em 0.9em; color: var(--text-soft);
}
.ornament-divider{ display: flex; align-items: center; gap: 0.9rem; color: var(--accent-strong); margin-block: var(--space-3); }
.ornament-divider::before, .ornament-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border-strong); }

.halo{ position: relative; }
.halo::before{
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(circle, rgba(213,163,114,0.25), transparent 65%);
  filter: blur(20px); opacity: 0.7;
}

.figure-frame{ border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.figure-frame img{ width: 100%; height: 100%; object-fit: cover; }

.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; gap: var(--space-3); } }
.two-col.reverse .two-col__media{ order: 2; }

.value-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 980px){ .value-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }
.value-item{ text-align: center; padding: 1.4rem 1rem; }
/* Icône logée dans un médaillon doré, nettement au-dessus du texte plutôt que
   posée en ligne avec le titre — la perpendicularité tient à cet empilement. */
.value-item__icon{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); color: var(--dore-profond);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
}
.value-item svg{ width: 26px; height: 26px; }
.value-item h3{ font-size: 1.05rem; margin-bottom: 0.4rem; }
.value-item p{ font-size: 0.86rem; color: var(--text-soft); }

.social-strip{ display: flex; gap: 1rem; align-items: center; }

.badge-list{ display: flex; flex-direction: column; gap: 1rem; }
.badge-item{ display: flex; gap: 1rem; align-items: flex-start; }
.badge-item__icon{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--dore-profond);
  display: flex; align-items: center; justify-content: center;
}
.badge-item h3{ font-size: 0.98rem; margin-bottom: 0.2rem; }
.badge-item p{ font-size: 0.84rem; color: var(--text-soft); }
/* .badge-item sert aussi de lien cliquable (organismes partenaires) : même
   apparence qu'en simple carte, avec un retour visuel discret au survol. */
a.badge-item{ border-radius: var(--radius-sm); padding: 0.4rem; margin: -0.4rem; transition: background var(--dur-fast) var(--ease); }
a.badge-item:hover{ background: var(--bg-soft); }
a.badge-item:hover h4{ color: var(--accent-strong); }

.cta-band{
  background: var(--noir); color: var(--nacre); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4); text-align: center; position: relative; overflow: hidden;
}
.cta-band h2{ color: var(--blanc); }
.cta-band p{ color: rgba(244,238,231,0.75); margin-top: 0.8rem; }
.cta-band .btn-row{ justify-content: center; margin-top: 1.8rem; }

.error-page{ min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }

/* Print */
@media print{
  .site-header, .site-footer, .hero-scroll-cue, .nav-toggle, .theme-toggle{ display: none; }
}

/* =========================================================
   Agenda de prise de rendez-vous (/rendez-vous.html)
   Parcours en 4 étapes + récapitulatif collant.
   ========================================================= */

.agenda{
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 980px){
  .agenda{ grid-template-columns: 1fr; }
}

/* ---------- Étapes ---------- */
.agenda-step{
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
.agenda-step:first-child{ border-top: 0; padding-top: 0; margin-top: 0; }
.agenda-step[data-locked="true"]{ opacity: 0.42; pointer-events: none; }
.agenda-step__head{ display: flex; align-items: baseline; gap: 0.9rem; }
.agenda-step__num{
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent-strong);
  flex: none;
}
.agenda-step__title{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.agenda-step__hint{ font-size: 0.8rem; color: var(--text-faint); margin-top: 0.35rem; }
.agenda-step__body{ margin-top: 1.2rem; }

/* ---------- Chips de choix (motif, modalité) ---------- */
.choice-row{ display: flex; flex-wrap: wrap; gap: 0.7rem; }
.choice{
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.65em 1.25em;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.choice input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice:hover{ border-color: var(--accent-strong); }
.choice:has(input:checked){
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--dore-profond);
  font-weight: 600;
}
.choice:has(input:focus-visible){ outline: 2px solid var(--focus); outline-offset: 3px; }
.choice:has(input:disabled){ opacity: 0.35; cursor: not-allowed; }
.choice__note{ display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-faint); }

/* ---------- Calendrier ---------- */
.calendar{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 1.2rem;
}
.calendar__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.calendar__month{
  font-family: var(--font-display); font-size: 1.25rem; text-transform: capitalize;
}
.calendar__nav{ display: flex; gap: 0.4rem; }
.calendar__nav button{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.calendar__nav button:hover:not(:disabled){ border-color: var(--accent-strong); color: var(--accent-strong); }
.calendar__nav button:disabled{ opacity: 0.3; cursor: not-allowed; }
.calendar__nav svg{ width: 16px; height: 16px; }

.calendar__weekdays, .calendar__grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.calendar__weekdays{
  margin-bottom: 6px;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); text-align: center;
}
.calendar__day{
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.85rem;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.calendar__day--empty{ visibility: hidden; }
.calendar__day[data-state="open"]{ border-color: var(--border-strong); color: var(--text); }
.calendar__day[data-state="open"]:hover{ border-color: var(--accent-strong); background: var(--accent-soft); color: var(--dore-profond); }
.calendar__day[data-state="closed"]{ color: var(--text-faint); opacity: 0.45; cursor: not-allowed; }
.calendar__day[aria-pressed="true"]{
  background: var(--noir); color: var(--nacre); border-color: var(--noir); font-weight: 600;
}
:root[data-theme="dark"] .calendar__day[aria-pressed="true"]{ background: var(--accent); color: var(--noir); border-color: var(--accent); }
.calendar__day:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.calendar__day--today::after{
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-strong); margin-top: 3px;
}
.calendar__day[aria-pressed="true"].calendar__day--today::after{ background: currentColor; }

.calendar__legend{
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--text-faint);
}
.calendar__legend span{ display: inline-flex; align-items: center; gap: 0.4rem; }
.calendar__legend i{ width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calendar__legend .is-open{ border: 1px solid var(--border-strong); }
.calendar__legend .is-sel{ background: var(--noir); }
:root[data-theme="dark"] .calendar__legend .is-sel{ background: var(--accent); }

/* ---------- Créneaux ---------- */
.slots{ margin-top: 1.4rem; }
.slots__title{
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); margin-bottom: 0.8rem;
}
.slots__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 0.5rem; }
.slot{
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.4em;
  font-size: 0.88rem;
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.slot:hover{ border-color: var(--accent-strong); background: var(--accent-soft); color: var(--dore-profond); }
.slot[aria-pressed="true"]{ background: var(--noir); color: var(--nacre); border-color: var(--noir); font-weight: 600; }
:root[data-theme="dark"] .slot[aria-pressed="true"]{ background: var(--accent); color: var(--noir); border-color: var(--accent); }
.slot:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.slots__empty{ font-size: 0.86rem; color: var(--text-faint); font-style: italic; }

/* ---------- Récapitulatif ---------- */
.recap{ position: sticky; top: 110px; }
@media (max-width: 980px){ .recap{ position: static; } }
.recap__title{ font-family: var(--font-display); font-size: 1.35rem; }
.recap__list{ margin-top: 1.2rem; }
.recap__row{
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.recap__row dt{ color: var(--text-faint); flex: none; }
.recap__row dd{ margin: 0; text-align: right; font-weight: 500; }
.recap__row dd[data-empty="true"]{ color: var(--text-faint); font-weight: 400; font-style: italic; }
/* Colonne flex plutôt que des marges entre voisins : l'ordre des boutons et
   le texte intercalé peuvent changer sans casser les espacements. */
.recap__actions{ margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.recap__actions .btn{ width: 100%; justify-content: center; }
.recap__actions .hint{ margin-top: 0; }

/* ---------- Confirmation ---------- */
.agenda-done{ text-align: center; padding: var(--space-4) var(--space-2); }
.agenda-done__mark{
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 1.2rem;
  background: var(--accent-soft); color: var(--dore-profond);
  display: flex; align-items: center; justify-content: center;
}
.agenda-done__mark svg{ width: 26px; height: 26px; }
.agenda-done h2{ font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.agenda-done p{ color: var(--text-soft); margin-top: 0.8rem; font-size: 0.94rem; }
.agenda-done .btn-row{ justify-content: center; margin-top: 1.8rem; }

/* Le display des conteneurs (grid, flex) écrasait [hidden] : on le rétablit. */
[hidden]{ display: none !important; }

/* Le thème sombre s'active de deux façons : par attribut (bouton de bascule)
   ou par préférence système, auquel cas aucun attribut n'est posé. Les états
   "sélectionné" de l'agenda doivent couvrir les deux, sans quoi ils restent
   en noir pur sur un fond presque noir. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .calendar__day[aria-pressed="true"],
  :root:not([data-theme="light"]) .slot[aria-pressed="true"]{
    background: var(--accent);
    color: var(--noir);
    border-color: var(--accent);
  }
  :root:not([data-theme="light"]) .calendar__legend .is-sel{ background: var(--accent); }
}

/* Sur petit écran, sept colonnes carrées tombaient à 38 px de côté : sous le
   seuil de confort tactile. On récupère de la largeur sur les marges et on
   garantit 44 px de hauteur de cible. */
@media (max-width: 480px){
  .calendar{ padding: 0.9rem 0.7rem; }
  .calendar__grid, .calendar__weekdays{ gap: 3px; }
  .calendar__day{ aspect-ratio: auto; min-height: 44px; }
}

/* Le créneau retenu, mis en avant sur l'écran de confirmation. */
.agenda-done__creneau{
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent-strong);
  margin-top: 0.9rem;
}

/* =========================================================
   Carte ronde du secteur d'intervention (accueil)
   Portage de la maquette Figma. Aucune couleur codée en dur :
   tout passe par les tokens de la charte, donc les deux thèmes suivent.
   ========================================================= */

.carte{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Onglets de modalité ---------- */
.carte__tabs{
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.carte__tab{
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85em 1.5em;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.carte__tab:first-child{ border-left: 0; }
.carte__tab:hover{ color: var(--accent-strong); }
.carte__tab[aria-selected="true"]{
  background: var(--noir);
  color: var(--dore);
}
:root[data-theme="dark"] .carte__tab[aria-selected="true"]{ background: var(--accent); color: var(--noir); }
.carte__tab:focus-visible{ outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- Cadre circulaire ---------- */
.carte__ring{
  position: relative;
  /* Leaflet donne à ses propres calques un z-index interne jusqu'à 1000
     (popups) — sans z-index ici, position:relative seul ne referme pas de
     contexte d'empilement, et ces calques passaient au-dessus du bandeau
     (z-index 100) dès que la carte défilait sous son bord. Poser un z-index
     sur ce conteneur referme le contexte : tout Leaflet reste emboîté à
     l'intérieur, quel que soit son z-index interne. */
  z-index: 0;
  width: min(460px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--dore-lumiere), var(--dore-profond));
  box-shadow: var(--shadow-gold);
}
.carte__map{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
}

/* Leaflet peint son propre fond : sans cela, un rectangle clair traverse
   le disque en thème sombre. */
.carte__map.leaflet-container{ background: var(--bg-soft); font-family: var(--font-sans); }

/* ---------- Marqueurs ---------- */
.carte__dot{
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--blanc);
  box-shadow: 0 0 8px rgba(213,163,114,0.6);
}
.carte__label{
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  color: var(--accent-strong);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- Badge du mode courant ---------- */
.carte__badge{
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.4em 1.1em;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Attribution (obligatoire, licence ODbL) ---------- */
.carte__attrib{
  font-size: 0.64rem;
  color: var(--text-faint);
  text-align: center;
}
.carte__attrib a{ text-decoration: underline; }
.carte__attrib a:hover{ color: var(--accent-strong); }

@media (max-width: 620px){
  .carte__tabs{ width: 100%; }
  .carte__tab{ flex: 1; padding: 0.85em 0.6em; font-size: 0.6rem; letter-spacing: 0.08em; }
}

/* Teinte du fond de plan.
   Les tuiles OpenStreetMap sont vertes et bleues : hors charte. Un filtre les
   ramène au nacré doré en thème clair, et à un gris chaud en thème sombre.
   Les marqueurs sont hors du calque de tuiles : ils gardent leurs couleurs. */
.carte__map .leaflet-tile-pane{
  filter: grayscale(0.72) sepia(0.42) saturate(1.1) brightness(1.03) contrast(0.95);
}
:root[data-theme="dark"] .carte__map .leaflet-tile-pane{
  filter: invert(0.93) hue-rotate(180deg) grayscale(0.78) sepia(0.35) brightness(0.95) contrast(0.92);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .carte__map .leaflet-tile-pane{
    filter: invert(0.93) hue-rotate(180deg) grayscale(0.78) sepia(0.35) brightness(0.95) contrast(0.92);
  }
}

/* L'étiquette partait vers la droite depuis son point et débordait du disque.
   On la centre sur le point. */
.carte__label{ transform: translateX(-50%); }

/* ---------- Recherche sur le site ---------- */
.search-toggle{
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease);
}
.search-toggle:hover{ border-color: var(--accent-strong); }
.search-toggle svg{ width: 17px; height: 17px; }

.search-panel{
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1.2rem 2rem;
}
.search-panel__box{
  width: min(560px, 100%);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.4rem;
  max-height: 70vh;
  display: flex; flex-direction: column;
}
.search-panel__head{ display: flex; align-items: center; gap: 0.8rem; }
.search-panel__head input{
  flex: 1; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.85em 1em; background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
}
.search-panel__head input:focus{ border-color: var(--accent-strong); outline: none; box-shadow: 0 0 0 3px rgba(166,108,35,0.14); }
.search-panel__head button{
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
}
.search-panel__head button:hover{ border-color: var(--accent-strong); }
.search-panel__head svg{ width: 16px; height: 16px; }
.search-results{ margin-top: 1rem; overflow-y: auto; }
.search-results li{ border-bottom: 1px solid var(--border); }
.search-results li:last-child{ border-bottom: 0; }
.search-results a{
  display: block; padding: 0.8em 0.3em; font-size: 0.95rem;
  transition: color var(--dur-fast) var(--ease);
}
.search-results a:hover{ color: var(--accent-strong); }
.search-results__empty{ padding: 0.8em 0.3em; color: var(--text-faint); font-size: 0.9rem; font-style: italic; }

/* ---------- Réseaux sociaux (pied de page) ---------- */
/* Discret, inséré dans le bandeau du bas : juste l'icône et le nom du réseau. */
.footer-social-compact{ display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center; }
.footer-social-compact a{
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: rgba(244,238,231,0.75); font-size: 0.82rem;
  transition: color var(--dur-fast) var(--ease);
}
.footer-social-compact a:hover{ color: var(--accent); }
.footer-social-compact svg{ width: 15px; height: 15px; flex: none; }

/* ---------- Bandeau réseaux sociaux (page d'accueil uniquement) ---------- */
.social-band{ text-align: center; }
.social-band .eyebrow{ justify-content: center; }
.social-band__links{ display: flex; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.social-band__links a{
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.9em 1.6em; border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.social-band__links a:hover{ border-color: var(--accent-strong); color: var(--accent-strong); background: var(--accent-soft); }
.social-band__links svg{ width: 18px; height: 18px; }

/* =========================================================
   Pop-up d'avis clients (toutes les pages, sauf pages légales)
   Interface volontairement claire — fond nacré/satiné — même en thème
   sombre : un avis se lit mieux sur un fond clair, quel que soit le thème
   choisi par ailleurs pour le reste du site.
   ========================================================= */
.avis-popup{
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 150;
  width: min(360px, calc(100vw - 2.4rem));
  transform: translateY(140%);
  opacity: 0;
  transition: transform 520ms var(--ease), opacity 420ms var(--ease);
  pointer-events: none;
}
.avis-popup[data-open="true"]{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.avis-card{
  position: relative;
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md), 0 18px 48px rgba(23,20,15,0.18);
  padding: 1.3rem 1.3rem 1.1rem;
}

.avis-card__close{
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); transition: background var(--dur-fast), color var(--dur-fast);
}
.avis-card__close:hover{ background: rgba(166,108,35,0.1); color: var(--text); }
.avis-card__close svg{ width: 13px; height: 13px; }

.avis-card__head{ display: flex; align-items: center; gap: 0.7rem; }
/* Le logo perdait toute lisibilité posé directement sur le blanc nacré :
   un médaillon sombre lui redonne un fond propre à lui. */
.avis-card__brand{
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--noir);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.avis-card__brand img{ width: 22px; height: auto; }
.avis-card__source{ font-size: 0.7rem; color: var(--text-faint); }
.avis-card__source strong{ color: var(--text); font-weight: 600; }

.avis-card__stars{ display: flex; gap: 2px; margin-top: 0.75rem; }
.avis-card__stars svg{ width: 14px; height: 14px; color: var(--dore-profond); }

.avis-card__texte{
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
  max-height: 9.5em;
  overflow-y: auto;
}

.avis-card__foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.avis-card__meta{ font-size: 0.78rem; color: var(--text-soft); }
.avis-card__meta strong{ color: var(--text); }
.avis-card__nav{ display: flex; align-items: center; gap: 0.5rem; }
.avis-card__nav button{
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(166,108,35,0.3); color: var(--dore-profond);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.avis-card__nav button:hover{ background: rgba(213,163,114,0.16); border-color: var(--dore-profond); }
.avis-card__nav svg{ width: 13px; height: 13px; }
.avis-card__dots{ display: flex; gap: 4px; }
.avis-card__dots span{
  width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.avis-card__dots span[data-active="true"]{ background: var(--dore-profond); transform: scale(1.3); }

.avis-card__cta{
  display: block; text-align: center; margin-top: 0.9rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dore-profond);
}
.avis-card__cta:hover{ text-decoration: underline; }

.avis-indicateur{
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  z-index: 149;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--dore-profond);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.avis-indicateur:hover{ transform: scale(1.06); box-shadow: var(--shadow-gold); }
.avis-indicateur svg{ width: 20px; height: 20px; }
.avis-indicateur[hidden]{ display: none; }

@media (max-width: 480px){
  .avis-popup{ right: 0.7rem; bottom: 0.7rem; left: 0.7rem; width: auto; }
  .avis-indicateur{ right: 0.7rem; bottom: 0.7rem; }
}

/* ---------------- Lire la suite (texte long dépliable) ---------------- */
.read-more__panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height 420ms var(--ease);
}
.read-more__panel[data-open="true"]{ max-height: var(--read-more-height, 4000px); }
.read-more__panel .lede,
.read-more__panel p{ color: var(--text-soft); }
.read-more__panel h3{ margin-top: 1.6rem; font-size: 1.15rem; }
.read-more__panel ul{ margin: 0.6rem 0; padding-left: 1.2rem; color: var(--text-soft); }
.read-more__panel li{ margin: 0.25rem 0; }
.read-more__trigger{
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--dore-profond);
}
.read-more__trigger:hover{ text-decoration: underline; }
.read-more__trigger .chevron{ transition: transform var(--dur-fast); }
.read-more__trigger[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.read-more__trigger[aria-expanded="true"] .read-more__label-closed{ display: none; }
.read-more__trigger[aria-expanded="false"] .read-more__label-open{ display: none; }

/* ---------------- CTA sticky (mobile) ---------------- */
.cta-sticky{
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding: 0.6rem 0.7rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  gap: 0.6rem;
}
.cta-sticky a{ flex: 1; justify-content: center; text-align: center; padding-block: 0.7rem; font-size: 0.82rem; }
@media (max-width: 700px){
  .cta-sticky{ display: flex; }
  body[data-cta-sticky="true"]{ padding-bottom: 68px; }
  body[data-cta-sticky="true"] .avis-indicateur{ bottom: calc(68px + 0.7rem); }
}
@media (max-width: 480px){
  body[data-cta-sticky="true"] .avis-indicateur{ bottom: calc(68px + 0.7rem); right: 0.7rem; }
}

/* ---------------- Bandeau consentement cookies ---------------- */
.cookie-banniere{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 160;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding: 1rem 1.4rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cookie-banniere[data-open="true"]{ display: flex; }
.cookie-banniere__texte{ font-size: 0.86rem; color: var(--text-soft); max-width: 62ch; margin: 0; }
.cookie-banniere__texte a{ color: var(--accent-strong); }
.cookie-banniere__actions{ display: flex; gap: 0.6rem; flex: none; }
@media (max-width: 640px){
  .cookie-banniere{ flex-direction: column; align-items: stretch; }
  .cookie-banniere__actions{ justify-content: flex-end; }
}