/* ═══════════════════════════════════════════════════════════
   MICHEL BOURJAC — peau du projet sur le DS CARYON
   Direction D « Marée haute » · DA-Michel-Bourjac.md
   Le squelette (spacing, layout, motion, grammaire) vit dans
   /assets/css/ds/ et reste intact. Ce fichier contient :
   §1 overrides tokens (couleurs, polices, conteneur)
   §2 corrections d'accessibilité AAA (focus, liens)
   §3 échelle typographique Michel (serif en titres)
   §4 composants DS traduits en classes statiques
   §5 layout des pages (header, hero, sections, footer)
   §6 placeholders visibles
   §7 responsive
   ═══════════════════════════════════════════════════════════ */

/* ─── §1 · Overrides tokens — l'unique prise de contrôle de la DA ─── */
:root {
  /* — Fonds — */
  --raw-surface:      #F4F1EC;
  --raw-surface-deep: #E9E4DA;
  --raw-veil:         #D5D0C4;
  --raw-veil-soft:    #E2DCD2;
  /* — Accents — */
  --raw-accent:       #D98A2B;   /* ambre — NON TEXTUEL */
  --raw-accent-soft:  #E3A559;
  --raw-contrast:     #1E4652;   /* bleu profond */
  --raw-ink:          #1E2A32;

  /* Encres recalculées sur l'encre Michel (le DS les dérive de #242630) */
  --ink-soft:         #33454F;
  --ink-quiet:        #384952;
  --ink-faint:        rgba(30,42,50,0.44);  /* décoratif uniquement */
  --hairline:         rgba(30,42,50,0.15);
  --hairline-strong:  rgba(30,42,50,0.27);

  /* Alias supplémentaires spécifiques Michel */
  --accent-strong:    #1E4652;   /* texte accentué, liens */
  --accent-tint:      #F4DFBE;
  --accent-on-dark:   #EFC078;   /* ambre sur DarkPanel — OBJETS et boutons uniquement (6.08:1) */
  --accent-on-dark-text: #F4D6A4; /* ambre éclairci pour le TEXTE sur DarkPanel — 7.31:1, AAA */
  --band-bg:          #D98A2B;
  --band-ink:         #1E2A32;   /* texte ≥ 26px obligatoire sur --band-bg */
  --cta-bg:           #1E4652;
  --cta-fg:           #F7F4EF;

  /* — Polices (Literata + Source Sans 3, chargées via <link>) — */
  --ff-sans:  "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --ff-serif: "Literata", Georgia, serif;

  /* — Conteneur Michel : 1120px (vs 1280 par défaut DS) — */
  --w-shell: 1120px;
}

/* ─── §2 · Accessibilité AAA — corrections sur le reset DS ─── */
/* Focus : la DA impose l'encre, pas l'accent (l'ambre ne porte jamais de sens seul) */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Survol de lien : jamais d'ambre sur du texte → bleu profond */
a:hover { color: var(--accent-strong); }
/* Skip-link */
.skip-link {
  position: absolute; left: var(--m); top: -60px;
  padding: 12px 20px; background: var(--ink); color: var(--cta-fg);
  border-radius: var(--r-s); z-index: 100;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s); color: var(--cta-fg); }

/* ─── §3 · Échelle typographique Michel (DA §3 — titres en serif) ─── */
.m-h1 {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 66px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--ink);
  text-wrap: pretty; margin: 0;
}
.m-h1 .accent { color: var(--accent-strong); }
.m-h2 {
  font-family: var(--ff-serif); font-weight: 500;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: pretty; margin: 0 0 var(--m);
}
.m-h3 {
  font-family: var(--ff-serif); font-weight: 500;
  font-size: 20px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 var(--s);
}
.m-chapo {
  font-family: var(--ff-sans); font-size: 21px; line-height: 1.55;
  color: var(--ink-soft); max-width: 30ch; margin: 0;
}
.m-body { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }
.m-body p { margin: 0 0 var(--s); }
.m-secondary { font-size: 15px; line-height: 1.6; color: var(--ink-quiet); }

/* ─── §4 · Composants DS → classes statiques (mêmes règles que les .jsx) ─── */

/* SectionHead — « — 01 · Label » : .section-head vit déjà dans ds/base/layout.css */
.section-head .label {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
}

/* Card */
.card {
  background: var(--surface-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  padding: var(--l);
}
.card .m-h3 { margin-bottom: var(--s); }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s); }

/* CTALink — solid : souligné encre + ↗ · quiet : passerelle petites capitales */
.cta-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-sans); font-weight: 500; font-size: 17px;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: opacity var(--dur-base) var(--ease-out);
  min-height: 44px; align-items: center;
}
.cta-link:hover { opacity: 0.7; color: var(--ink); }
.cta-link--quiet {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet); border-bottom: none; padding-bottom: 0;
}
.cta-link--quiet:hover { opacity: 0.7; color: var(--ink-quiet); }
.cta-link .arr { font-family: var(--ff-sans); }

/* Bouton principal (CTA plein — bleu profond, jamais ambre) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  /* Un libellé de bouton ne se coupe jamais : sur les largeurs
     intermédiaires, le CTA du header était comprimé par le flex
     du bandeau et passait sur deux lignes. */
  white-space: nowrap;
  background: var(--cta-bg); color: var(--cta-fg);
  font-family: var(--ff-sans); font-weight: 500; font-size: 16px;
  border-radius: var(--r-s);
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn:hover { opacity: 0.88; color: var(--cta-fg); }
.btn--on-dark { background: var(--accent-on-dark); color: var(--raw-ink); }
.btn--on-dark:hover { color: var(--raw-ink); }

/* Quote — filet gauche + serif italique */
.quote {
  margin: 0;
  font-family: var(--ff-serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4;
  letter-spacing: -0.005em; color: var(--ink); max-width: 42ch;
  border-left: 1px solid var(--hairline-strong); padding-left: var(--m);
}

/* StatusPill — pastille ambre 7px (objet, non textuel) */
.status-pill { display: inline-flex; align-items: center; gap: 10px; }
.status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: mb-pulse 2.6s var(--ease-out) infinite;
  flex: none;
}
/* ds-pulse recoloré ambre (le DS pulse en --signal-live vert) — même rythme, même amplitude */
@keyframes mb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,138,43,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(217,138,43,0); }
}
.status-pill .txt { font-size: 15px; color: var(--ink-quiet); }
@media (prefers-reduced-motion: reduce) { .status-pill .dot { animation: none; } }

/* StatGrid — cellules label/valeur sous filet */
.stat-grid {
  display: grid; gap: var(--m);
  padding-top: var(--m); border-top: 1px solid var(--hairline);
}
.stat-grid .cell { display: flex; flex-direction: column; gap: 6px; }
.stat-grid dt {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
}
.stat-grid dd { margin: 0; font-size: 16px; color: var(--ink); }

/* DarkPanel — l'unique panneau sombre + l'unique ombre du site */
.dark-panel {
  position: relative;
  background: var(--contrast); color: var(--surface);
  border-radius: var(--r-l);
  padding: var(--sec) var(--xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.dark-panel .glow {
  position: absolute; inset: -30% -10% auto auto;
  width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(239,192,120,0.16), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.dark-panel > .inner { position: relative; }
.dark-panel .m-h2, .dark-panel .quote { color: var(--surface); }
.dark-panel .t-label { color: var(--accent-on-dark-text); }
.dark-panel a:hover { color: var(--surface); opacity: 0.85; }
.dark-panel :where(a, button):focus-visible { outline-color: var(--surface); }

/* ─── §5 · Layout des pages ─── */

/* Header collant */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.site-header.scrolled {
  background: rgba(244,241,236,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--m); padding-top: var(--s); padding-bottom: var(--s);
}
/* Le CTA garde sa largeur naturelle : c'est la navigation qui cède. */
.site-header .bar > .btn { flex: 0 0 auto; }
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand .name { font-family: var(--ff-serif); font-weight: 500; font-size: 19px; color: var(--ink); }
.brand:hover .name { color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: var(--m); }
.site-nav a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 12px 0; white-space: nowrap;
}
/* Le bouton RDV du menu n'existe que pour le mobile (le header en a déjà un) */
.site-nav .btn { display: none; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* Bouton de menu — visible sous 900px uniquement */
.nav-toggle {
  display: none;
  min-height: 44px; min-width: 44px; padding: 0 var(--s);
  align-items: center; gap: 10px;
  font-family: var(--ff-sans); font-weight: 500; font-size: 15px; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-s);
}
.nav-toggle .bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle .bars span { display: block; height: 1px; background: var(--ink); }

/* Hero */
.hero { padding-top: var(--xxl); padding-bottom: var(--xl); position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--xxl); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--m); }
.hero-copy .m-chapo { margin-top: var(--xs); }
.hero-thought {
  font-family: var(--ff-serif); font-style: italic;
  font-size: 19px; line-height: 1.5; color: var(--ink-soft); max-width: 44ch;
}
.hero-actions { display: flex; align-items: center; gap: var(--m); flex-wrap: wrap; margin-top: var(--xs); }
.portrait-frame {
  border: 1px solid var(--hairline); border-radius: var(--r-m);
  overflow: hidden; aspect-ratio: 4 / 5; background: var(--veil-soft);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.figure-caption { margin-top: var(--s); }

/* Orbe d'ambiance — unique effet atmosphérique autorisé */
.orb {
  position: absolute; top: -10%; right: -6%;
  width: 46vmax; height: 46vmax; max-width: 720px; max-height: 720px;
  background: radial-gradient(closest-side, rgba(217,138,43,0.10), transparent 70%);
  filter: blur(30px); pointer-events: none; z-index: -1;
}

/* Bandeau citation */
.band {
  background: var(--band-bg); border-radius: var(--r-m);
  padding: var(--xl) var(--xl);
}
.band .quote {
  border-left-color: rgba(30,42,50,0.35);
  color: var(--band-ink);
  font-size: clamp(26px, 2.7vw, 36px); line-height: 1.24; max-width: 34ch;
}

/* Sections numérotées : filet haut (rythme DS — jamais un changement de fond) */
.section--ruled { border-top: 1px solid var(--hairline); padding-top: var(--l); }

/* — 01 · Double expertise */
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr 0.75fr; gap: var(--xl); }
.expertise-grid .col + .col { border-left: 1px solid var(--hairline); padding-left: var(--xl); }
.expertise-grid .aside { border-left: none; padding-left: 0; }

/* — 02 · Engagements */
.engagements { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--xl); }
.engagements .col + .col { border-left: 1px solid var(--hairline); padding-left: var(--xl); }

/* — 03 · Pratiques */
.pratiques-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--m); }
.pratiques-grid .card { display: flex; flex-direction: column; }
.pratiques-grid .card .cta-link { margin-top: auto; font-size: 15px; }

/* — 04 · Une séance */
.seance-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--xxl); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--m);
  align-items: baseline;
  padding: var(--m) 0; border-top: 1px solid var(--hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps .num {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; color: var(--ink-quiet); font-variant-numeric: tabular-nums;
}
.steps .desc { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 46ch; }
.steps .dur { font-size: 13px; color: var(--ink-quiet); white-space: nowrap; }

/* — 05 · Contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--xxl); }
.contact-dl { margin: 0; display: grid; gap: var(--s); }
.contact-dl > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s); align-items: baseline; padding-top: var(--s); border-top: 1px solid rgba(247,244,239,0.18); }
.contact-dl dt {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark-text);
}
.contact-dl dd { margin: 0; font-size: 16px; color: var(--surface); }
.contact-actions { display: flex; flex-direction: column; gap: var(--m); align-items: flex-start; margin-top: var(--l); }

/* Footer */
.site-footer { margin-top: var(--sec); border-top: 1px solid var(--hairline); }
.site-footer .inner {
  padding-top: var(--xl); padding-bottom: var(--xl);
  display: flex; flex-direction: column; gap: var(--m);
}
.footer-thought {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; color: var(--ink);
}
.footer-legal { display: flex; gap: var(--m); flex-wrap: wrap; font-size: 13px; color: var(--ink-quiet); }
.footer-legal a { color: var(--ink-quiet); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--ink); }

/* ─── §5b · Pages intérieures ─── */

/* En-tête de page (remplace le hero sur les pages autres que l'accueil) */
.page-head { padding-top: var(--xxl); padding-bottom: var(--l); }
.page-head .m-h1 { max-width: 18ch; }
.page-head .m-chapo { margin-top: var(--m); max-width: 52ch; }
.page-head .hero-thought { margin-top: var(--m); }

/* Accordéons — <details>/<summary> natifs, augmentés en JS pour aria-expanded */
.accordions { border-top: 1px solid var(--hairline); }
.acc {
  border-bottom: 1px solid var(--hairline);
}
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
  padding: var(--m) 0; min-height: 44px;
  cursor: pointer; list-style: none;
  font-family: var(--ff-serif); font-weight: 500; font-size: 20px;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
  transition: opacity var(--dur-base) var(--ease-out);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { opacity: 0.7; }
.acc > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
/* Chevron : signe typographique, pas d'icône — cohérent avec le DS */
.acc .sign {
  flex: none; width: 24px; text-align: center;
  font-family: var(--ff-sans); font-size: 20px; font-weight: 400; color: var(--ink-quiet);
}
.acc[open] .sign::before { content: "–"; }
.acc .sign::before { content: "+"; }
/* Retrait à gauche : le contenu déplié se distingue de la question qui le porte.
   Le filet reprend la grammaire du DS (colonnes, citations) — il rend le retrait
   lisible comme une intention, et suit visuellement le fil de la réponse. */
.acc .acc-body {
  padding: 0 0 var(--l) var(--m);
  margin-left: 2px;
  border-left: 1px solid var(--hairline);
  max-width: 62ch;
}
.acc .acc-body > * + * { margin-top: var(--s); }
.acc .acc-body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.acc .acc-body ul { margin: 0; padding-left: 1.2em; }
.acc .acc-body li { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
.acc .acc-body .m-h3 { margin-top: var(--m); }

/* En résumé — reformulation courte en tête des réponses longues (FALC).
   Une personne épuisée ou anxieuse doit pouvoir repartir après trois phrases. */
.acc-resume {
  background: var(--surface-deep);
  border-radius: var(--r-s);
  padding: var(--s) var(--m);
  margin-bottom: var(--m);
}
.acc-resume p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 52ch; }
.acc-resume p + p { margin-top: var(--xs); }
.acc-resume .t-label { display: block; margin-bottom: 6px; }

/* Précision secondaire dans une ligne de tarif */
.quiet { color: var(--ink-soft); font-size: 15px; }

/* Encart d'urgence — discret, jamais alarmant, toujours atteignable */
.urgence {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-s);
  padding: var(--m);
  max-width: 62ch;
}
.urgence p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.urgence p + p { margin-top: var(--xs); }
.urgence strong { color: var(--ink); font-weight: 500; }
.urgence a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-urgence { font-size: 13px; line-height: 1.6; color: var(--ink-quiet); max-width: 70ch; }
.footer-urgence a { color: var(--ink-quiet); text-decoration: underline; text-underline-offset: 3px; }
.footer-urgence a:hover { color: var(--ink); }

/* Liste de prix (FAQ tarifs) */
.tarifs { list-style: none; margin: 0; padding: 0; }
.tarifs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--m);
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
  font-size: 17px; color: var(--ink);
}
.tarifs li:first-child { border-top: 1px solid var(--hairline); }
.tarifs .prix { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }

/* Liste éditoriale à filets (En quelques mots, actualité, engagements) */
.ruled-list { list-style: none; margin: 0; padding: 0; }
.ruled-list li {
  padding: var(--s) 0; border-top: 1px solid var(--hairline);
  font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch;
}
.ruled-list li:last-child { border-bottom: 1px solid var(--hairline); }
.ruled-list strong { color: var(--ink); font-weight: 500; }

/* Formulaire de contact (Brevo) */
.form { display: grid; gap: var(--m); max-width: 560px; }
.form .row { display: grid; gap: var(--m); grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
}
.field .hint { font-size: 13px; color: var(--ink-quiet); }
.field input, .field textarea {
  font-family: var(--ff-sans); font-size: 17px; color: var(--ink);
  background: var(--veil-soft);
  border: 1px solid var(--hairline); border-radius: var(--r-s);
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--hairline-strong); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field-legend {
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
  padding: 0;
}
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 16px; color: var(--ink-soft); cursor: pointer;
}
.choice input { width: 20px; height: 20px; flex: none; accent-color: var(--accent-strong); }
/* Piège à robots — hors écran plutôt que display:none, que certains robots détectent.
   Non focalisable (tabindex="-1" côté HTML), donc invisible aussi au clavier. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
/* Bloc RGPD sous le formulaire — de l'information, pas une case à cocher.
   15px et non 13px : c'est un texte qu'on veut voir lu, pas une mention légale
   qu'on enfouit. */
.form-rgpd { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 54ch; }
.form-rgpd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-note { font-size: 13px; color: var(--ink-quiet); max-width: 52ch; }

/* Réassurance en trois points (contact) */
.assurances { display: flex; gap: var(--l); flex-wrap: wrap; padding-top: var(--m); border-top: 1px solid var(--hairline); }
.assurances .status-pill .txt { font-size: 15px; color: var(--ink-soft); }

/* Actualité — entrées datées */
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { padding: var(--l) 0; border-top: 1px solid var(--hairline); }
.entries li:last-child { border-bottom: 1px solid var(--hairline); }
.entries .meta { margin-bottom: var(--xs); }
.entries .m-h3 { margin-bottom: var(--xs); }
.entries p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; margin: 0; }

/* Deux colonnes de texte long */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xl); }
.two-col .col + .col { border-left: 1px solid var(--hairline); padding-left: var(--xl); }

/* ─── §6 · Placeholders — visibles, jamais du faux contenu ─── */
.ph {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-s);
  padding: var(--s) var(--m);
  color: var(--ink-soft); font-size: 15px; line-height: 1.55; /* 7.87:1 sur surface-deep */
  background: var(--surface-deep);
}
.ph::before {
  content: "À compléter · " attr(data-src);
  display: block;
  font-family: var(--ff-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet); margin-bottom: 6px;
}
/* Variante « rédigé, en attente de validation » — le texte est utilisable tel quel,
   il n'attend qu'un accord, à la différence d'un .ph qui attend une information. */
.ph--draft::before { content: "À valider · " attr(data-src); }
.ph--inline { display: inline-block; padding: 2px 10px; }
.ph--inline::before { display: inline; content: "⏳ "; margin: 0; letter-spacing: normal; text-transform: none; }
.portrait-frame.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--l); border-radius: var(--r-m); }
.portrait-frame.ph::before { content: none; }

/* ─── §7 · Responsive (DA §8 — une colonne sous 900px) ─── */

/* Nav : bascule en menu déroulant dès que les 5 entrées ne tiennent plus */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-header .bar { flex-wrap: wrap; }
  .site-header .bar > .btn { display: none; } /* repris dans le menu déroulant */
  .site-nav {
    display: none;
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--s);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 0; border-top: 1px solid var(--hairline); font-size: 17px; white-space: normal; }
  .site-nav a::after { display: none; }
  .site-nav .btn { display: inline-flex; margin-top: var(--s); align-self: flex-start; }
}

@media (max-width: 1024px) {
  .pratiques-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid, .seance-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--xl); }
  .expertise-grid, .engagements { grid-template-columns: 1fr; gap: var(--l); }
  .expertise-grid .col + .col, .engagements .col + .col {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--hairline); padding-top: var(--l);
  }
  .portrait-frame { max-width: 420px; }
  .dark-panel { padding: var(--xxl) var(--l); }
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--l); }
  .two-col .col + .col { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--l); }
}
@media (max-width: 640px) {
  .pratiques-grid { grid-template-columns: 1fr; }
  .band { padding: var(--l) var(--m); }
  .steps li { grid-template-columns: 48px 1fr; }
  .steps .dur { grid-column: 2; }
  .form .row { grid-template-columns: 1fr; }
  .acc > summary { font-size: 18px; }
  .acc .acc-body { padding-left: var(--s); }   /* retrait réduit — la mesure prime sur le décrochage */
  .tarifs li { flex-direction: column; gap: 2px; }
}