/* ============================================================================
   CENTRE DE FORMATION DU PSYCHOTRAUMA — ALISON BAUDOUIN
   Feuille de marque (candidate de travail, 2026-11-09).
   Le vocabulaire de composants est REPRIS d'un site existant du parc : sa
   provenance exacte est tracée dans le DEPLOY.md de cette opération, jamais
   dans un fichier livré.
   Marque : Chanel sobre — Parchemin dominant, Encre en inverse, Après en
   accent rare (<=10%), Cormorant Garamond en titres, Inter en corps.
   Règle 1 de SITE_STANDARDS : tout passe par les tokens, zéro hex en dur.
   Contrastes CALCULÉS le 2026-11-09, pas estimés : les estimations du brand
   book étaient fausses sur trois paires (Silence/Parchemin annoncé 3,9:1,
   mesuré 1,55:1 — inutilisable en texte, réservé aux filets).
   ========================================================================== */

:root {
  /* ---- Palette du brand book (WCAG mesurés) ---- */
  --cream: #f5f2ec;        /* Parchemin — fond dominant (checklist : « Fond principal ») */
  --paper: #ffffff;        /* surface — cartes et encadrés */
  --sable: #ece7dd;        /* Parchemin assombri d'un cran : bandes claires et séparations.
                              Dérivé, pas inventé — la palette n'a aucun 5e ton. */
  --ink: #1a1a1a;          /* Encre — 15,58:1 sur Parchemin · 17,40:1 sur blanc */
  --muted: #5f5b54;        /* Silence assombri : 6,04:1 sur Parchemin · 6,75:1 sur blanc.
                              Son Silence exact (#8C8C8C) tombe à 3,01:1 — sous le seuil. */
  --silence: #c9c4bc;      /* Silence de la checklist — FILETS UNIQUEMENT, 1,55:1, jamais du texte */
  --brand: #4a5c4e;        /* Après — 6,41:1 sur Parchemin · blanc dessus 7,16:1 */
  --brand-deep: #35433a;   /* variante profonde (survol) — blanc dessus 10,42:1 */
  --brand-clair: #8ca394;  /* Après éclairci pour fond Encre — 6,45:1 sur Encre.
                              L'Après exact sur Encre est à 2,43:1 : interdit par sa propre
                              règle de contraste, il fallait un token nommé. */
  --muted-on-dark: #a8a39a; /* secondaire sur fond Encre — 6,94:1 */
  --line: rgba(26, 26, 26, 0.14);
  --line-forte: rgba(26, 26, 26, 0.26);
  --shadow-soft: 0 10px 30px rgba(26, 26, 26, 0.07), 0 2px 6px rgba(26, 26, 26, 0.04);

  /* ---- Typographie ----
     Conflit interne au brand book, tranché par sa CHECKLIST (document « avant
     publication ») : « Titres : Cormorant Garamond · Corps : Inter ». Le document
     typo recommandait une mono-famille Cormorant ; sur des paragraphes longs d'un
     site, Cormorant en corps perd en lisibilité. Divergence tracée dans DEPLOY.md. */
  --font-display: "Cormorant Garamond", "Cormorant", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --corps: 1.125rem;            /* 18 px — la taille que son brand book fixe pour le corps */
  --corps-interligne: 1.65;     /* son brand book : 1,6 à 1,7 */
  --mesure: 38rem;              /* ~66 signes à 18 px — son brand book : 60 à 75 */
  --mesure-large: 76rem;

  /* ---- Rythme ---- */
  --pas: clamp(3.5rem, 7vw, 7rem);
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 14px;
  --radius-img: 18px;
}

*, *::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(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--corps);
  line-height: var(--corps-interligne);
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

/* ---------- Titres : Cormorant bas de casse, graisses 500/600 seules ------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  /* casse normale : son brand book réserve les capitales aux sigles */
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}
h1 {
  font-weight: 600;
  font-size: clamp(2.125rem, 5.2vw, 3.375rem); /* max 54 px = 3,0 × le corps */
  line-height: 1.1;
}
h2 { font-size: clamp(1.75rem, 3.6vw, 2.25rem); line-height: 1.16; } /* 2 × corps */
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.22; }
p { margin: 0 0 1.1em; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }

/* Surtitre et étiquettes : Manrope 500, lettres espacées, jamais >4 mots */
.eyebrow, .card-kicker {
  display: block;
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-kicker { margin-bottom: 0.7em; }

/* ---------- LE composant bouton (règle 2 : un seul, partout) -------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: var(--paper); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--brand-deep); color: var(--paper); }
.btn-ghost {
  min-height: 44px;
  border-color: var(--line-forte);
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Liens de texte ------------------------------------------------ */
a { color: var(--brand); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
  min-height: 44px;
}
.text-link:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8em 1.2em;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { left: 0; }

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

/* ---------- En-tête ------------------------------------------------------- */
.site-frame { display: flow-root; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gouttiere);
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
}

/* Monogramme typographique : bas de casse Cormorant 500 + filet horizontal de
   la largeur EXACTE du monogramme. Aucun pictogramme, aucun dégradé. */
.brand { display: inline-block; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: table;          /* le filet se cale sur la largeur réelle du mot */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.brand-mark::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.3em;
  background: var(--ink);
}
.brand small {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

.navigation { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;       /* cible tactile : 43 px mesurés avant correction */
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.6em 0;
}
.navigation a:hover { color: var(--brand-deep); }
.navigation a[aria-current="page"] { color: var(--brand); }
.navigation .nav-appointment {
  min-height: 44px;
  padding: 0 1.3em;
  border-radius: 999px;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.9375rem;
}
.navigation .nav-appointment:hover { background: var(--brand-deep); color: var(--paper); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.9em;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- Coquille de contenu ------------------------------------------- */
.site-main { display: block; }
.content-shell { display: block; }
.cream-island { display: block; }
.row { position: relative; }

.hero {
  display: grid;
  gap: var(--gouttiere);
  align-items: center;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 1.02fr 0.98fr;
}
/* Pages de cadre : pas de visuel, donc pas de seconde colonne vide. */
.hero:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.hero-copy { min-width: 0; }
/* D15 : ne vise QUE le paragraphe d'accroche. Écrite `.hero-copy p`, la règle
   battait en spécificité `.eyebrow` et `.hero-caption` et les rendait toutes
   deux à 19 px : le surtitre prenait 3 lignes à 390 px et concurrençait le h1. */
.hero-copy > p:not(.eyebrow):not(.hero-caption) { font-size: 1.1875rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.hero-caption {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Photos traitées : coins arrondis, fondues dans le papier, jamais une photo
   brute posée sur un aplat (règle 4 + univers visuel du brand book). */
.visuel {
  position: relative;
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--sable);
}
.visuel img {
  width: 100%;
  border-radius: var(--radius-img);
  /* Le duotone (désaturation + encre chaude) est BAKÉ dans le .webp, pas
     simulé en CSS : un filtre sur une image déjà très claire la effaçait. */
}
.visuel::after {               /* bord fondu vers le fond papier */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-img);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 26px 2px color-mix(in srgb, var(--cream) 55%, transparent);
  pointer-events: none;
}
.visuel figcaption {
  padding: 0.7em 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.visuel--vide {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 2rem;
  border: 1px dashed var(--line-forte);
  background: var(--cream);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- Bloc alterné texte / image ------------------------------------
   ALTERNANCE : on inverse l'ordre des enfants DANS LE HTML et on échange les
   valeurs de grid-template-columns. Jamais direction:rtl, jamais `order`. */
.split {
  display: grid;
  gap: var(--gouttiere);
  align-items: center;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 1.05fr 0.95fr;   /* texte à gauche, image à droite */
}
.split--reverse { grid-template-columns: 0.95fr 1.05fr; } /* image à gauche */
.split-text { min-width: 0; }
.split-text p { color: var(--muted); }
.split-text .text-link { margin-top: 0.6rem; }

/* ---------- Cartes blanches à ombre douce --------------------------------- */
.services {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.services-head { max-width: var(--mesure); margin-bottom: clamp(2rem, 4vw, 3rem); }
.services-head p { color: var(--muted); }
.service-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.4rem, 2vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.service-card h3 { margin-bottom: 0.5em; }
/* D17 : ces paragraphes portent du VRAI texte de vente (13 à 25 mots), pas
   des étiquettes : ils tiennent le plancher de corps mobile (17 px). */
.service-card p { font-size: 1.0625rem; color: var(--muted); max-width: none; }
.service-card .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- Repères courts (valeurs) ------------------------------------- */
.values {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem) var(--gouttiere);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.values article { padding-top: 1.1rem; border-top: 1px solid var(--line-forte); }
.values h3 { font-size: 1.1875rem; margin-bottom: 0.35em; }
.values p { font-size: 1rem; color: var(--muted); max-width: none; margin: 0; }

/* ---------- Bloc parcours ------------------------------------------------- */
.biography {
  display: grid;
  gap: var(--gouttiere);
  align-items: start;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 0.95fr 1.05fr;
}
.bio-notes { display: grid; gap: 0.9rem; }
.bio-notes article {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.bio-notes h3 { font-size: 1.0625rem; margin-bottom: 0.3em; }
.bio-notes p { font-size: 1rem; color: var(--muted); max-width: none; margin: 0; }

/* ---------- Prose longue ------------------------------------------------- */
.prose {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.prose-inner { max-width: var(--mesure); }
.prose-inner p { color: var(--muted); }
.prose-inner h2 { margin-top: 1.6em; }
.prose-inner h2:first-child { margin-top: 0; }
.prose-inner ul { margin: 0 0 1.2em; padding-left: 1.1em; max-width: var(--mesure); color: var(--muted); }
.prose-inner li { margin-bottom: 0.45em; }

.citation {
  max-width: var(--mesure);
  margin: 0 0 1.4em;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--line-forte);   /* accent réservé au cliquable */
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.citation p {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.citation cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- La SEULE bande sable de la page ------------------------------- */
.contact-band { background: var(--sable); }
.contact-band > div {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: var(--pas) clamp(1.25rem, 4vw, 3rem);
}
.contact-band h2 { max-width: 30ch; }
.contact-band p { color: var(--muted); }
.contact-band .btn-primary { margin-top: 1.4rem; }

/* ---------- Agenda natif -------------------------------------------------- */
.booking-embed {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.booking-embed iframe {
  width: 100%;
  height: 790px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.booking-fallback { margin-top: 1rem; font-size: 0.9375rem; }
/* Sous 560 px l'iframe est masquée : l'unique action du site ne peut pas se
   réduire à un lien de texte, elle reprend LE composant bouton (règle 2). */
.booking-fallback--mobile { display: none; }

/* ---------- Pied de page : papier + filet, jamais un mur sombre ---------- */
.footer { border-top: 1px solid var(--line-forte); background: var(--cream); }
.footer-grid {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: 1.2fr 1fr 1fr;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 2rem;
}
.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1em;
}
/* :not(.brand) est OBLIGATOIRE : la marque du pied est elle aussi un <a> de
   .footer-grid. Passée en flex, elle mettait son <small> sur la MÊME ligne que
   le monogramme, en travers du filet. Défaut introduit puis mesuré en capture. */
.footer-grid a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 44px;       /* D16 : 37 px mesurés avant correction */
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.footer-grid a.brand { display: block; text-decoration: none; }
.footer-grid a:hover { color: var(--brand-deep); text-decoration: underline; }
.footer-grid p { font-size: 0.9375rem; color: var(--muted); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--gouttiere);
  justify-content: space-between;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ========================================================================== 
   BREAKPOINTS CONSTRUITS (règle 7) : 1440 ci-dessus · ~860 · 390
   ========================================================================== */
/* .values sort des 4 colonnes PLUS TÔT que le reste : à 1024 px, 4 colonnes
   de ~205 px cassaient les titres sur deux lignes. */
@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 cartes en 2 colonnes = 3e orpheline : elle passe en bandeau */
  .service-grid > :nth-child(3):last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --corps: 1.0625rem; --mesure: 34rem; } /* 17 px sur téléphone */
  .menu-toggle { display: inline-flex; }
  .navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.4rem;
    /* D21 : peint en --cream, le panneau se confondait avec la page et se
       superposait au hero sans frontière lisible. Seul panneau flottant du
       site, il prend la surface et l'ombre. */
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-soft);
  }
  .navigation.is-open { display: flex; }
  .navigation a { padding: 0.85em 0; border-bottom: 1px solid var(--line); }
  .navigation .nav-appointment {
    margin-top: 1rem;
    border-bottom: none;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  .nav-inner { position: relative; }
  .hero,
  .split,
  .split--reverse,
  .biography { grid-template-columns: minmax(0, 1fr); }
  /* En une colonne, le visuel passe TOUJOURS après le texte, quel que soit
     l'ordre du HTML : on ne laisse pas une image ouvrir un bloc sur mobile. */
  .split--reverse > .visuel,
  .split--reverse > .visuel--vide { grid-row: 2; }
  .split--reverse > .split-text { grid-row: 1; }
  .hero { padding-bottom: calc(var(--pas) * 0.7); }
  .booking-embed iframe { height: 850px; }
}

@media (max-width: 560px) {
  .values,
  .service-grid,
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .service-grid > :nth-child(3):last-child { grid-column: auto; }
  .contact-band h2 { max-width: none; }
  /* L'iframe d'agenda est inutilisable sous 560 px : on sert le lien direct. */
  .booking-embed iframe { display: none; }
  .booking-embed-frame { display: none; }
  .booking-fallback { display: none; }
  .booking-fallback--mobile { display: block; margin-top: 1.4rem; }
}

/* ---------- Plaque typographique --------------------------------------------
   Emplacement assumé là où un portrait irait : aucune photo de la praticienne n'existe
   et aucun visage ne sera fabriqué (VISUELS-CLIENT-V1 : un visage créé sans
   référence réelle n'est pas son portrait). On y pose le monogramme prescrit
   par son brand book — bas de casse Cormorant 500, filet de la largeur exacte
   du monogramme, aucun pictogramme — plutôt qu'un cadre vide ou une photo de
   banque d'images. Compte comme bande sable ? NON : elle n'est pas pleine
   largeur, elle reste un bloc d'image. */
.plaque {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  margin: 0;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-img);
  background: var(--sable);
  text-align: center;
}
.plaque-mark {
  display: table;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.plaque-mark::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.3em;
  background: var(--ink);
}
/* .plaque ne porte plus de paragraphe (D6). Règle conservée au cas où un
   texte y reviendrait un jour, au plancher de corps. */
.plaque p {
  max-width: 26rem;
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}
@media (max-width: 860px) { .plaque { aspect-ratio: auto; min-height: 260px; } }

/* D19 : les deux pages de cadre n'avaient AUCUN bouton de réservation visible
   à 860 et 390 px. Bouton sobre, sans introduire une seconde bande sable. */
.cta-sobre { margin: 2.2rem 0 0; max-width: none; }

/* D5 : champs d'identité de l'éditeur encore vides. Ils sont montrés comme des
   EMPLACEMENTS, jamais remplis par une valeur plausible, et ces deux pages ne
   sont pas publiables tant qu'ils le restent (voir DEPLOY.md). */
.champs-vides { list-style: none; margin: 0 0 1.4em; padding: 0; max-width: var(--mesure); }
.champs-vides li {
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--muted);
}
.champs-vides span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Les titres sont en bas de casse (âme de marque), MAIS un sigle reste un
   sigle : un acronyme ne doit jamais perdre ses capitales. */
h1 .sigle, h2 .sigle, h3 .sigle { text-transform: uppercase; }


/* ============================================================================
   COUCHE DE MARQUE — ce que la palette Encre/Parchemin impose en plus
   ========================================================================== */

/* La bande d'appel est le SEUL aplat Encre de la page : c'est l'inversion
   Parchemin/Encre de son brand book, et elle vaut pour « une seule bande par
   page ». Texte Parchemin sur Encre = 15,58:1. */
.contact-band { background: var(--ink); }
.contact-band h2 { color: var(--cream); }
.contact-band p { color: var(--muted-on-dark); }
.contact-band .eyebrow { color: var(--brand-clair); }
.contact-band .btn-primary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.contact-band .btn-primary:hover,
.contact-band .btn-primary:focus-visible {
  background: var(--brand-clair);
  border-color: var(--brand-clair);
  color: var(--ink);
}

/* Filets : c'est le seul emploi de Silence, et il n'y a jamais de texte dessus. */
.split + .split, .services + .values { border-top: 1px solid var(--silence); }

/* Accent : un mot, jamais un bloc (règle d'or de son brand book, <=10%). */
.mot-accent { color: var(--brand); }
.contact-band .mot-accent, .footer .mot-accent { color: var(--brand-clair); }

/* Cormorant a un oeil plus petit qu'un serif courant : sans ce cran, le H1
   mesuré à 390 px tombait sous le rapport 2,5x du corps que fixe son brand book. */
h1 { font-size: clamp(2.375rem, 5.6vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.875rem, 3.8vw, 2.375rem); }

/* Pied de page sur Encre : son brand book fait de l'Encre la couleur d'identité. */
.footer { background: var(--ink); border-top: 0; }
.footer, .footer p { color: var(--muted-on-dark); }
.footer h3 { color: var(--cream); }
.footer a { color: var(--cream); }
.footer a:hover, .footer a:focus-visible { color: var(--brand-clair); }
.footer .brand-mark { color: var(--cream); }
.footer .brand small { color: var(--muted-on-dark); }
.footer-bottom { border-top: 1px solid rgba(245, 242, 236, 0.18); color: var(--muted-on-dark); }

/* ---------- Hero court : pages sans visuel (réservation, cadre) ----------- */
.hero--court { grid-template-columns: 1fr; padding-bottom: calc(var(--pas) * 0.5); }
.hero--court .hero-copy { max-width: var(--mesure); }

/* ---------- Carte du cabinet --------------------------------------------
   Exigée par SITE_STANDARDS dès qu'une adresse vérifiée est publiée : rond,
   repère sur l'adresse, lien d'itinéraire, attribution OpenStreetMap visible.
   Le rendu est CENTRÉ sur la latitude/longitude vérifiées : le repère est donc
   posé au centre géométrique exact, il n'est pas placé à l'œil.
   Contrôlée par static-factory/scripts/qa-location-map.py. */
.location-map {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: var(--pas) clamp(1.25rem, 4vw, 3rem);
}
.location-map-inner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.location-map-round {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--silence);
  box-shadow: var(--shadow-soft);
}
.location-map-round img { width: 100%; height: 100%; object-fit: cover; display: block; }
.location-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.35);
}
.location-map-text h2 { margin-bottom: 0.45em; }
.location-map-text .btn-primary { margin-top: 0.6rem; }
.location-credit {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.location-credit a { color: var(--muted); }
@media (max-width: 860px) {
  .location-map-inner { grid-template-columns: 1fr; justify-items: start; }
  .location-map-round { max-width: 15rem; }
}

/* Deux cartes : jamais une orpheline sur une grille à trois colonnes. */
.service-grid--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .service-grid--deux { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------
   CORRECTIF mesuré le 2026-11-09 : pied de page sur Encre, liens invisibles.
   `.footer a` (0,1,1) était battu par `.footer-grid a:not(.brand)` (0,2,1) du
   gabarit, qui pose `color: var(--ink)`. Les 14 liens du pied sortaient donc en
   Encre sur Encre — contraste 1:1, invisibles sur les 7 pages, aux deux
   largeurs. Aucun gate mécanique ne l'a vu : qa_site, qa_template et
   lisibilite_scan sont tous ressortis verts. Seule la capture l'a montré.
   Les sélecteurs ci-dessous repassent AU-DESSUS, avec la même spécificité + 1.
   ------------------------------------------------------------------------ */
.footer .footer-grid a:not(.brand) { color: var(--cream); }          /* 15,58:1 */
.footer .footer-grid a:not(.brand):hover,
.footer .footer-grid a:not(.brand):focus-visible { color: var(--brand-clair); }  /* 6,45:1 */
.footer .footer-grid p { color: var(--muted-on-dark); }              /* 6,94:1 */
.footer .footer-grid h3 { color: var(--cream); }
.footer .footer-bottom span { color: var(--muted-on-dark); }