/*
Theme Name: Cabinet Lausanne Gare
Theme URI: https://chirolausannegare.ch/
Author: Valentin Moebs
Description: Thème sur mesure du Cabinet Chiropratique Lausanne Gare. Classique avec blocs, sans page builder, sans dépendance à un framework. Voir la spec technique v2.3.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chirolausannegare
Tags: accessibility-ready, custom-menu, translation-ready
*/

/* =========================================================================
   SOMMAIRE
     1. Police
     2. Tokens (§5.2)        ← le bloc à modifier si le rose change (§16.1)
     3. Réinitialisation
     4. Typographie (§5.3)
     5. Liens et focus
     6. Utilitaires
     7. Pastilles (boutons)
     8. Barre persistante (§6)
     9. Panneau de menu
    10. Encart du secrétariat (§12)
    11. Barre de rendez-vous mobile (§6)
    12. Accueil — ouverture (§8)
    13. Accueil — les praticiennes (§8)
    14. Accueil — l'essentiel avant de venir (§8)
    15. Accueil — bande remboursement (§8)
    16. Accueil — carte du corps (§8)
    17. Pied de page
   Les styles propres à une section (accueil, praticiennes, carte du corps…)
   s'ajoutent au fur et à mesure des gabarits, chacun sous son propre titre.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. POLICE
   Un seul fichier, une seule requête (§4). Inter variable, axe de graisse
   ramené de 100–900 à 400–600 : seules ces graisses sont utilisées, le reste
   des données d'interpolation était du poids mort. 34,6 Ko.
   ------------------------------------------------------------------------- */

@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-400-600.woff2") format("woff2-variations");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}


/* -------------------------------------------------------------------------
   2. TOKENS — §5.2

   C'est LE bloc à modifier si la couleur de marque change (§16.1). Aucune de
   ces valeurs n'est écrite en dur ailleurs dans la feuille.

   Contrastes mesurés sur blanc (#FFFFFF), seuil AA texte courant = 4,5:1 :

     --ink         #434343   9,89:1   ✓
     --rose        #B0766C   3,71:1   ✗  écart assumé (liens, boutons)
     --rose-deep   #8A5450   6,06:1   ✓
     --muted       #8A8A8A   3,45:1   ✗  non listé dans la maquette — à trancher
     --surface     #949494   3,03:1   —  jamais du texte : teinte seulement
     --accent      #EDFF00   1,11:1   ✗  écart assumé (dégradé du titre)
     --accent-deep #B2BF00   2,03:1   ✗  non listé dans la maquette — à trancher

   Blanc sur --rose : 3,71:1. Blanc sur --rose-deep : 6,06:1.
   --ink sur --accent : 8,91:1 (le jaune porte bien du texte foncé ; c'est
   l'inverse — jaune sur blanc — qui ne tient pas).

   Règle §16.3 : aucune couleur n'entre dans la palette sans une page qui en a
   besoin et sans son contraste mesuré noté ici.
   ------------------------------------------------------------------------- */

:root{
  /* les six tokens verrouillés */
  --paper:#FFFFFF;
  --surface:#949494;
  --ink:#434343;
  --rose:#B0766C;
  --rose-deep:#8A5450;
  /* ESSAI — bande bleue. Les coins prennent la teinte du centre (201°) à
     luminosité 26 % et saturation 41 % : 9,39:1 sous du blanc. Le dégradé va
     donc de bleu à bleu, sans passer par les bruns qui rendaient la version
     rose-vers-jaune maladive. */
  --rose-champ:#274A5E;
  /* ESSAI — centre bleu pastel, saturation doublée (43 % → 87 %), teinte et
     luminosité inchangées. ATTENTION : le blanc dessus ne donne que 1,51:1.
     Illisible. Cet essai sert à juger la couleur, pas à être publié. */
  --rose-champ-coeur:#A3DAF8;
  --accent:#EDFF00;
  --accent-deep:#B2BF00;   /* accent assombri de 25 % */

  /* Les deux bouts du dégradé des titres de page et du paragraphe
     d'introduction. Mêmes TEINTES que la palette — 201° pour le bleu, celle de
     --rose-champ, et 10° pour le rouge, celle de --rose — mais bien plus
     saturées : le dégradé précédent, de --rose-champ à --rose-deep, ne se
     voyait pas.

     Contrastes sur blanc, mesurés :
       --grad-bleu #0B88CB : 3,89:1
       --grad-rose #D45035 : 4,20:1

     Sous les 4,5:1 du texte courant, donc ÉCART ASSUMÉ, demandé par le client
     pour que le dégradé se voie. Au-dessus des 3:1 exigés pour le GRAND texte
     (WCAG 1.4.3) : le H1, à 34 px, est donc conforme AA ; le paragraphe
     d'introduction, à 18 px, ne l'est pas tout à fait. À reporter dans la page
     Accessibilité, qui liste déjà les écarts connus. */
  --grad-bleu:#0B88CB;
  --grad-rose:#D45035;

  /* teintes dérivées de --surface : habillage discret, jamais une frontière */
  --wash:rgba(148,148,148,.13);
  --wash-hover:rgba(148,148,148,.22);
  --muted:#8A8A8A;

  /* Le gris des pastilles est distinct de --wash : les pastilles doivent se
     détacher du blanc, alors que les panneaux et le pied de page ne doivent
     que l'effleurer. Un seul bouton à tourner si elles doivent être encore
     plus foncées.
     Fonds obtenus sur blanc : #EAEAEA et #D8D8D8.
     --ink dessus : 8,22:1 et 6,94:1 — très au-dessus du seuil AA. */
  --pill:rgba(148,148,148,.2);
  --pill-hover:rgba(148,148,148,.36);

  /* mesures */
  --bar-h:61px;            /* relevé en direct par le script d'en-tête */
  --mark-size:48px;        /* la marque rétrécit sur petit écran, voir §8 */
  --r-photo:clamp(24px,3.4vw,52px);
  --r-panel:clamp(22px,3vw,44px);
  --gutter:clamp(15px,3.75vw,42px);
  --gap-section:clamp(72px,11vw,150px);
}


/* -------------------------------------------------------------------------
   3. RÉINITIALISATION
   ------------------------------------------------------------------------- */

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  background-color:#FFFFFF;
}

body{
  margin:0;
  background-color:#FFFFFF;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

@media(min-width:820px){
  body{font-size:17px}
}

img{max-width:100%}


/* -------------------------------------------------------------------------
   4. TYPOGRAPHIE — §5.3
   Le H1 à 34 px dépasse l'échelle de la spec : geste repris de la référence,
   écart assumé (point 1 de la maquette).
   ------------------------------------------------------------------------- */

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
h1{font-size:27px;line-height:1.15}
h2{font-size:21px;line-height:1.25}
h3{font-size:17px;line-height:1.35}

@media(min-width:820px){
  h1{font-size:34px}
  h2{font-size:24px}
  h3{font-size:18px}
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

ul{margin:0;padding:0;list-style:none}


/* -------------------------------------------------------------------------
   5. LIENS ET FOCUS
   L'indicateur de focus trace la forme de l'élément (§5.6) plutôt que de
   dessiner un rectangle autour.
   ------------------------------------------------------------------------- */

a{
  color:var(--rose);
  text-decoration:none;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
a:hover{text-decoration:underline}

:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:2px;
  border-radius:6px;
}

/* sur fond sombre ou photographique, le liseré passe au blanc */
.on-dark :focus-visible,
.map-fig :focus-visible{outline-color:var(--paper)}


/* -------------------------------------------------------------------------
   6. UTILITAIRES
   ------------------------------------------------------------------------- */

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-inline:var(--gutter);
}

.center{text-align:center}

/* lien d'évitement : hors écran jusqu'à ce qu'il reçoive le focus clavier */
.skip{position:absolute;left:-9999px}
.skip:focus{
  position:fixed;
  z-index:90;
  left:16px;
  top:16px;
  background:var(--paper);
  border:1px solid var(--surface);
  border-radius:999px;
  padding:12px 20px;
}

/* visible pour les lecteurs d'écran seulement */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* -------------------------------------------------------------------------
   7. PASTILLES (boutons et liens d'action)
   Hauteur 33 px. WCAG 2.2 fixe la cible minimale AA à 24 × 24 px (2.5.8) ;
   les 44 px cités dans la maquette relèvent du niveau AAA (2.5.5) et ne sont
   pas la cible du projet (§3).
   ------------------------------------------------------------------------- */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:33px;
  padding:0 22px;
  border-radius:999px;
  font-size:11.25px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  border:0;
  cursor:pointer;
  font-family:inherit;
  color:var(--ink);
  letter-spacing:.005em;
  background:var(--pill);
  /* `filter` doit figurer ici : les pastilles rose et jaune ne changent pas de
     couleur de fond au survol, elles s'assombrissent par filtre. Sans cette
     ligne, elles seules basculaient d'un coup pendant que les autres
     fondaient. */
  transition:background 180ms ease-out,color 180ms ease-out,filter 180ms ease-out;
}
.pill:hover{background:var(--pill-hover);text-decoration:none}

.pill--book{background:var(--rose);color:var(--paper)}
.pill--book:hover{background:var(--rose);filter:brightness(.93);color:var(--paper)}

.pill--light{background:var(--paper);color:var(--ink)}
.pill--light:hover{background:#EDEDED}

.pill--lg{min-height:33px;padding:0 21px;font-size:12px}

/* Pastille du téléphone : le jaune de l'encart, pour qu'on la reconnaisse
   comme la même chose une fois l'encart masqué. --ink sur --accent donne
   8,91:1, donc bien au-dessus du seuil, contrairement au jaune sur blanc. */
.pill--tel{
  background:var(--accent);
  color:var(--ink);
  font-weight:600;
  gap:6px;
}
.pill--tel:hover{background:var(--accent);filter:brightness(.95);color:var(--ink);text-decoration:none}
.pill--tel svg{width:11px;height:11px;fill:currentColor;flex:none}


/* -------------------------------------------------------------------------
   8. BARRE PERSISTANTE — §6

   Elle ne disparaît jamais. Le repli se fait par étapes, posées en classe par
   assets/bar.js quand le contenu déborde :
     s1  la navigation passe à la ligne
     s2  le sélecteur de langue la rejoint
     s3  la deuxième pastille de navigation disparaît
     s4  la première aussi
     s5  la marque quitte le centrage absolu et rentre dans le flux
   Le bouton de rendez-vous et le sélecteur de langue ne sont JAMAIS sacrifiés :
   ce sont les deux choses pour lesquelles on vient. Les pastilles retirées de
   la barre réapparaissent dans le panneau, jamais perdues.
   ------------------------------------------------------------------------- */

.bar{
  position:sticky;
  top:0;
  z-index:50;
  padding-block:14px;
  background:transparent;
}

/* Le voile flouté est un pseudo-élément pour ne pas flouter le contenu
   de la barre elle-même.

   Le voile blanc est à 31 %, la moitié des 62 % d'origine : la barre laisse
   davantage voir ce qui défile dessous, et c'est le flou — inchangé — qui
   continue de détacher le texte du fond. */
.bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.31);
  -webkit-backdrop-filter:blur(7px) saturate(1.15);
  backdrop-filter:blur(7px) saturate(1.15);
  pointer-events:none;
}

.bar-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  column-gap:6px;
  row-gap:0;
}

.bar-menu{order:1}
.bar-nav{display:flex;gap:6px;order:2}
.bar-break{order:6;flex-basis:100%;height:0;display:none}
.langs{order:4;margin-left:auto}
.bar-book{order:5}

.bar.s1 .bar-break,
.bar.s2 .bar-break,
.bar.s3 .bar-break,
.bar.s4 .bar-break{display:block}

.bar.s1 .bar-nav,
.bar.s2 .bar-nav,
.bar.s3 .bar-nav,
.bar.s4 .bar-nav{order:7;margin-top:6px}

.bar.s2 .langs,
.bar.s3 .langs,
.bar.s4 .langs{order:8;margin-top:6px}

.bar.s2 .bar-book,
.bar.s3 .bar-book,
.bar.s4 .bar-book{margin-left:auto}

.bar.s3 .nav-2,.bar.s4 .nav-2{display:none}
.bar.s4 .nav-1{display:none}

/* Dernière étape : la marque ne peut plus tenir centrée sans chevaucher le
   sélecteur de langue. Elle rentre dans le flux plutôt que de disparaître —
   c'est le lien vers l'accueil. */
.bar.s5 .mark{position:static;transform:none;top:auto;order:3}

/* La marque est centrée sur la première ligne, indépendamment du flux. */
.mark{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:var(--mark-size,48px);
  height:var(--mark-size,48px);
  top:calc((33px - var(--mark-size,48px)) / 2);
  display:grid;
  place-items:center;
  padding:0;
  transition:opacity 180ms ease-out;
}
.mark:hover{opacity:.78;text-decoration:none}
.mark img{display:block;width:100%;height:100%}

/* Sur les petits écrans, la marque cède de la place plutôt que de chevaucher
   le sélecteur de langue. Le script réserve sa largeur, quelle qu'elle soit. */
@media(max-width:480px){
  :root{--mark-size:36px}
}

.langs{display:flex;gap:0;align-items:center}

.lang{
  min-height:33px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  font-size:11.25px;
  font-weight:500;
  color:var(--muted);
  border-radius:999px;
  transition:background 180ms ease-out,color 180ms ease-out;
}
.lang:hover{color:var(--ink);text-decoration:none}
.lang[aria-current]{color:var(--ink);background:var(--pill)}


/* -------------------------------------------------------------------------
   9. PANNEAU DE MENU

   Le panneau est DANS l'en-tête. Ouvrir le menu fait grandir la barre ; ce
   n'est pas une seconde barre qui s'ajoute dessous. Il hérite donc du voile
   flouté du `.bar::before` et reste collé en haut au défilement, avec le
   reste.

   L'ouverture anime `grid-template-rows` de 0fr à 1fr : c'est la seule façon
   d'animer vers une hauteur inconnue à l'avance sans figer une valeur en dur
   qui se périmerait dès qu'on ajoute une entrée au menu.

   `visibility` suit, sans durée mais avec un délai : replié, le panneau sort
   de l'ordre de tabulation, sinon on tabulerait dans des liens invisibles.

   Il s'appelle `.panneau` et pas `.menu` : wp_nav_menu() applique la classe
   `menu` à ses listes, y compris dans le pied de page, qui héritaient sinon
   des styles définis ici.

   Les deux premières entrées sont MASQUÉES tant qu'elles sont visibles dans la
   barre, et réapparaissent exactement quand les étapes s3 et s4 les en
   retirent. Rien n'est jamais affiché deux fois, rien n'est jamais perdu.
   ------------------------------------------------------------------------- */

.panneau{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 220ms ease-out;
}

.bar.menu-ouvert .panneau{grid-template-rows:1fr}

.panneau-inner{
  overflow:hidden;
  min-height:0;
  visibility:hidden;
  transition:visibility 0s 220ms;
}
.bar.menu-ouvert .panneau-inner{visibility:visible;transition:visibility 0s}

/* 6 px : l'écart qui sépare deux rangées de pastilles dans la barre.
   Le conteneur enveloppe la navigation ET la pastille du téléphone : celle-ci
   se pose donc naturellement à la suite, ou sur sa propre ligne quand les
   rubriques ont déjà pris la largeur. */
.panneau-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px;
  padding-top:6px;
}
.panneau-nav{display:flex;flex-wrap:wrap;gap:6px}

.panneau .m-1,
.panneau .m-2{display:none}

.bar.s3 .panneau .m-2{display:inline-flex}
.bar.s4 .panneau .m-1,
.bar.s4 .panneau .m-2{display:inline-flex}

/* La pastille du téléphone n'apparaît que sous 700 px.

   Au-dessus, l'encart jaune fixe (§12) porte déjà le numéro ET les heures du
   secrétariat : le répéter ici serait une seconde source à tenir à jour.
   Sous 700 px, cet encart est masqué — c'est la maquette qui le veut ainsi —
   et le panneau devient le seul chemin vers le téléphone. D'où le même jaune :
   c'est le même objet qui a changé de place. */
@media(min-width:701px){
  .panneau-tel{display:none}
}

@media(prefers-reduced-motion:reduce){
  .panneau{transition:none}
  .status{transition:none}
}


/* -------------------------------------------------------------------------
   10. ENCART DU SECRÉTARIAT — §12

   Le numéro ET les heures où quelqu'un décroche, ensemble. Un numéro seul
   invite à appeler dans le vide, ce que §12 reproche justement à la
   concurrence.

   Il se place sous la barre grâce à --bar-bottom, qui est le bas RÉEL de la
   barre relevé dans le navigateur, et non sa hauteur. La différence compte :
   `position:fixed` mesure depuis la fenêtre, alors que la barre d'admin de
   WordPress décale la page de 32 px. Partir de la hauteur seule glissait
   l'encart DERRIÈRE la barre — invisible en navigation publique, bien visible
   une fois connecté.

   Masqué sous 700 px, où la barre de rendez-vous fixe prend le bas de l'écran.
   Le numéro reste alors atteignable par le panneau de menu.
   ------------------------------------------------------------------------- */

.status{
  position:fixed;
  left:var(--gutter);
  top:calc(var(--bar-bottom, 61px) + 12px);
  z-index:45;
  transition:top 160ms ease-out;
  background:var(--accent);
  color:var(--ink);
  border-radius:20px;
  padding:11px 16px;
  max-width:272px;
}
.status>div{padding-right:20px}
.status small{display:block;font-size:11.25px;color:#4A4A4A;line-height:1.4}
.status b{display:block;font-weight:500;font-size:11.25px;line-height:1.4;margin-top:2px}
.status b a{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600}
.status b a:hover{text-decoration:underline}
.status b svg{width:11px;height:11px;fill:currentColor;flex:none}

/* Le bouton de fermeture.

   La croix est un TRACÉ, pas le caractère « ✕ ». Un glyphe est centré selon
   les métriques de sa police, pas selon sa forme : il tombait haut et à gauche
   dans le cercle, et aucun réglage de line-height n'y change quoi que ce soit
   de fiable d'une police à l'autre. Un tracé symétrique dans un viewBox carré
   est centré par construction.

   `padding:0` compte aussi : un <button> a une marge interne par défaut, qui
   décalait le contenu dans un cercle de 18 px. */
.status-close{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:var(--ink);
  color:var(--paper);
  position:absolute;
  top:6px;
  right:6px;
  width:18px;
  height:18px;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-family:inherit;
}
.status-close svg{display:block;width:9px;height:9px}

@media(max-width:700px){
  .status{display:none}
}


/* -------------------------------------------------------------------------
   11. BARRE DE RENDEZ-VOUS MOBILE — §6, B§7

   Sur petit écran, la prise de rendez-vous quitte l'en-tête pour le bas de
   l'écran, où le pouce l'atteint. Le bouton de l'en-tête se retire alors : un
   même appel à l'action deux fois à l'écran n'aide personne.

   `env(safe-area-inset-bottom)` tient compte de la barre de geste des iPhone,
   sans quoi le bouton se retrouve dessous.
   ------------------------------------------------------------------------- */

.booknow{display:none}

@media(max-width:700px){
  .booknow{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:48;
    padding:12px var(--gutter);
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));

    /* Même voile que la barre du haut : 31 % de blanc, même flou, même
       saturation. Les deux barres encadrent la page et doivent être faites de
       la même matière. Le filet supérieur est retiré : avec un voile aussi
       léger, une ligne franche se voyait plus que la barre elle-même. */
    background:rgba(255,255,255,.31);
    -webkit-backdrop-filter:blur(7px) saturate(1.15);
    backdrop-filter:blur(7px) saturate(1.15);
  }
  .booknow .pill{width:100%}

  /* la page se termine au-dessus de la barre, pas dessous */
  body{padding-bottom:84px}

  .bar-book{display:none}
}


/* -------------------------------------------------------------------------
   12. ACCUEIL — OUVERTURE (§8)

   §8 : la photographie des lieux, puis une ligne qui dit quoi et où. Pas un
   slogan. Le titre et les deux pastilles tiennent sur une même ligne tant que
   la place le permet, et passent à la ligne ensemble sinon.
   ------------------------------------------------------------------------- */

.opening{padding-top:calc(var(--gap-section) * 1.5)}

.opening-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* Écart assumé (point 3 de la maquette) : le dégradé part de --accent-deep,
   qui ne tient pas le contraste sur blanc. Le geste est celui de la référence,
   et il a été validé en connaissance de cause. Le repli sans background-clip
   passe en --rose, lisible partout. */
.opening-line .title{
  font-size:11.25px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  background:linear-gradient(90deg,var(--accent-deep) 0%,var(--rose) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-inline:6px;
}
@supports not (background-clip:text){
  .opening-line .title{color:var(--rose)}
}

/* Le blanc sous la ligne d'identification est celui de la maquette : une
   section et demie. La page respire large ici, et resserrer cet écart faisait
   paraître le bloc du haut tassé contre l'image. */
.opening-id{
  padding-top:12px;
  margin-bottom:calc(var(--gap-section) * 1.5);
}
.opening-id p{font-size:11.25px;letter-spacing:.02em;color:var(--muted);margin:0}

/* Le cadre photographique : coins arrondis, recadrage par le centre. */
.slab{
  border-radius:var(--r-photo);
  overflow:hidden;
  background:var(--wash);
  display:block;
  margin:0;
}
.slab img{display:block;width:100%;height:100%;object-fit:cover}

/* La hauteur tient quand la page rétrécit ; c'est le recadrage qui se resserre
   par les côtés, plutôt que l'image qui s'aplatit. */
.hero{
  position:relative;
  height:clamp(300px,calc((min(100vw,1240px) - 2*var(--gutter))/2.357),560px);
  border-radius:calc(var(--r-photo)*2);
}

/* L'image épouse exactement la boîte. Pas de débord d'un pixel : avec
   `overflow:hidden`, le pixel supplémentaire est coupé par le bord DROIT de la
   boîte et non par la courbe, ce qui laissait un éclat plat là où l'arrondi
   aurait dû se fermer. Les navigateurs actuels lissent correctement un
   découpage arrondi ; l'astuce coûtait plus qu'elle ne rapportait. */
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}


/* La phrase d'ouverture, §8 point 2. Le dégradé est clipé sur la boîte du
   texte : les accents et les jambages ont besoin de place à l'intérieur, d'où
   le remplissage compensé par des marges négatives égales. */
section{padding-top:var(--gap-section)}

.statement{
  font-size:clamp(28px,6.4vw,66px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:600;
  max-width:19ch;
  margin:0 auto;
  background:linear-gradient(96deg,var(--rose) 0%,var(--ink) 62%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-block:.08em .18em;
  margin-block:-.08em -.18em;
}
@supports not (background-clip:text){
  .statement{color:var(--ink)}
}


/* -------------------------------------------------------------------------
   13. ACCUEIL — LES PRATICIENNES (§8 point 2)

   Bloc sombre. Le portrait est net dans un cadre 4:5 ; tout autour, une copie
   floue et mise en miroir de la même photo déborde de 150 px et s'éteint avec
   la distance, à demi couverte par le noir du bloc. Le halo émane donc du
   portrait au lieu d'être une seconde image posée derrière.

   Empilement, du fond vers l'avant :
     #1A1A1A → halo (z 0) → voile à 50 % (z 1) → cadre et textes (z 2)

   Le passage à trois colonnes dépend de la largeur du BLOC, pas de celle de la
   fenêtre : c'est une requête de conteneur. Le bloc se comporte donc pareil
   où qu'on le pose — accueil, page d'équipe, ou ailleurs plus tard.
   ------------------------------------------------------------------------- */

.people{
  margin-top:var(--gap-section);
  display:flex;
  flex-direction:column;
  gap:clamp(28px,4vw,52px);
  container-type:inline-size;
}

.person{
  --block:#1A1A1A;
  --r-block:14.25cqi;
  --pad-x:clamp(12px,3vw,44px);
  --cw:min(300px, 100cqi - 2 * var(--pad-x));   /* largeur du cadre */
  --ch:calc(var(--cw) * 1.25);                  /* hauteur, rapport 4:5 */
  --reach:150px;                                /* portée du halo */
  --side-min:216px;                             /* la pastille de rendez-vous */

  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,3vw,44px);
  align-items:center;
  width:100%;
  background:var(--block);
  border-radius:var(--r-block);
  padding:24px var(--pad-x);
}

/* Le voile : c'est lui qui transforme une photo floue en halo. */
.person::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(26,26,26,.5);
}

/* CORRECTIF SAFARI, règle ajoutée à part pour ne rien changer à la définition
   du bloc au-dessus.

   Sur iOS, un `overflow:hidden` combiné à un `border-radius` ne découpe pas les
   descendants qui portent un `filter` — or les quatre calques du halo en
   portent un. Les coins du haut de la photo débordaient donc de l'arrondi du
   bloc sombre, ce qui se voyait sur téléphone et pas ailleurs.

   Le masque opaque force Safari à composer l'élément dans son propre calque,
   où l'arrondi s'applique enfin. Il est opaque de bout en bout : il ne masque
   rien, il ne fait que rétablir le découpage.

   Porté sur `.people .person` et NON sur `.person` : la fiche praticienne pose
   le même balisage dans `.fiche-media`, où le halo doit justement déborder. */
.people .person{
  -webkit-mask-image:-webkit-radial-gradient(#FFF, #000);
}

/* Trois colonnes tant que les deux côtés peuvent tenir la pastille de
   rendez-vous sans la couper : 2 × 216 + 300 + gouttières + marges ≈ 845 px. */
@container (min-width:845px){
  .person{
    grid-template-columns:minmax(var(--side-min),1fr) 300px minmax(var(--side-min),1fr);
    padding-block:12px;
  }
  .person-name{order:1}
  .person .portrait{order:2}
  .person-detail{order:3}
}

.person-name,.person-detail{position:relative;z-index:2}

/* .portrait ne doit PAS créer de contexte d'empilement, sinon le halo ne peut
   plus passer sous le voile. */
.person .portrait{
  position:relative;
  width:var(--cw);
  height:var(--ch);
  margin-inline:auto;
}

.person .cutout{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  border-radius:var(--r-panel);
}

/* LA formule de cadrage. Jumelle de `.clg-cadrage-vue img` dans
   assets/cadrage.css : si l'une change, l'autre doit changer, sinon l'aperçu
   de l'administration ment.

   --z agrandissement, --fx/--fy position de 0 à 1. Le débordement du recadrage
   « cover » est absorbé par object-position, celui de l'agrandissement par le
   décalage de l'élément ; les deux suivent les mêmes valeurs.

   max-width à `none` : la réinitialisation du thème impose `max-width:100%`
   aux images, ce qui empêchait l'élément de grandir pendant que le décalage
   l'écartait — et laissait paraître le fond dès qu'on agrandissait. */
.person .cutout .photo{
  position:absolute;
  width:calc(100% * var(--z,1));
  height:calc(100% * var(--z,1));
  max-width:none;
  max-height:none;
  left:calc(-1 * (var(--z,1) - 1) * 100% * var(--fx,.5));
  top:calc(-1 * (var(--z,1) - 1) * 100% * var(--fy,.5));
  object-fit:cover;
  object-position:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%);
}

/* Les tuiles du halo.

   Chaque tuile est la photo ENTIÈRE à l'échelle du cadre — --iw et --ih, en
   multiples de --cw, viennent de PHP parce qu'ils dépendent du rapport de
   l'image, que CSS ne peut pas connaître.

   La tuile centrale est placée de façon à ce que sa fenêtre de recadrage tombe
   exactement sur le cadre : autour, ce sont les vrais pixels écartés par le
   recadrage qui débordent. Les huit voisines, retournées par l'arête partagée,
   ne servent que là où la photo s'arrête. */
.person .bleed .tuile{
  position:absolute;
  width:calc(var(--cw) * var(--iw,1));
  height:calc(var(--cw) * var(--ih,1.25));
  left:calc(
    var(--reach)
    - var(--cw) * (var(--iw,1) - 1) * var(--fx,.5)
    + var(--dx,0) * var(--cw) * var(--iw,1)
  );
  top:calc(
    var(--reach)
    - var(--cw) * (var(--ih,1.25) - 1.25) * var(--fy,.5)
    + var(--dy,0) * var(--cw) * var(--ih,1.25)
  );
  background-image:var(--flou);
  background-size:100% 100%;
  transform:scale(var(--sx,1),var(--sy,1));
}
.person .bleed .t-l,.person .bleed .t-tl,.person .bleed .t-bl{--dx:-1;--sx:-1}
.person .bleed .t-r,.person .bleed .t-tr,.person .bleed .t-br{--dx:1;--sx:-1}
.person .bleed .t-t,.person .bleed .t-tl,.person .bleed .t-tr{--dy:-1;--sy:-1}
.person .bleed .t-b,.person .bleed .t-bl,.person .bleed .t-br{--dy:1;--sy:-1}

/* Le halo s'éteint avec la distance au cadre. Les neuf morceaux du masque
   épousent la forme du cadre : quatre côtés, quatre coins, et le centre opaque.
   Le flou, lui, croît par paliers — CSS ne sait pas interpoler un rayon de
   flou, alors on empile quatre copies floues différemment et on ne montre
   chacune que dans sa bande de distance. */
.person .bleed{
  position:absolute;z-index:0;pointer-events:none;
  inset:calc(-1 * var(--reach));
  --r:var(--reach);
  -webkit-mask:
    linear-gradient(#000,#000) var(--r) var(--r) / var(--cw) var(--ch) no-repeat,
    linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) var(--r) 0 / var(--cw) var(--r) no-repeat,
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) var(--r) 100% / var(--cw) var(--r) no-repeat,
    linear-gradient(to left,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 var(--r) / var(--r) var(--ch) no-repeat,
    linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% var(--r) / var(--r) var(--ch) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 100%,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 0,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 100% / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% 100% / var(--r) var(--r) no-repeat;
  mask:
    linear-gradient(#000,#000) var(--r) var(--r) / var(--cw) var(--ch) no-repeat,
    linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) var(--r) 0 / var(--cw) var(--r) no-repeat,
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) var(--r) 100% / var(--cw) var(--r) no-repeat,
    linear-gradient(to left,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 var(--r) / var(--r) var(--ch) no-repeat,
    linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% var(--r) / var(--r) var(--ch) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 100%,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 0,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 0 100% / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%) 100% 100% / var(--r) var(--r) no-repeat;
}

.person .bleed .lvl{position:absolute;inset:0;--r:var(--reach)}

.person .bleed .lvl:not(.l0){
  -webkit-mask:
    linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) var(--r) var(--r) / var(--cw) var(--ch) no-repeat,
    linear-gradient(to top,rgba(0,0,0,0) var(--from),#000 var(--to)) var(--r) 0 / var(--cw) var(--r) no-repeat,
    linear-gradient(to bottom,rgba(0,0,0,0) var(--from),#000 var(--to)) var(--r) 100% / var(--cw) var(--r) no-repeat,
    linear-gradient(to left,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 var(--r) / var(--r) var(--ch) no-repeat,
    linear-gradient(to right,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% var(--r) / var(--r) var(--ch) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 100%,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 0,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 100% / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% 100% / var(--r) var(--r) no-repeat;
  mask:
    linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) var(--r) var(--r) / var(--cw) var(--ch) no-repeat,
    linear-gradient(to top,rgba(0,0,0,0) var(--from),#000 var(--to)) var(--r) 0 / var(--cw) var(--r) no-repeat,
    linear-gradient(to bottom,rgba(0,0,0,0) var(--from),#000 var(--to)) var(--r) 100% / var(--cw) var(--r) no-repeat,
    linear-gradient(to left,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 var(--r) / var(--r) var(--ch) no-repeat,
    linear-gradient(to right,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% var(--r) / var(--r) var(--ch) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 100%,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 0,rgba(0,0,0,0) var(--from),#000 var(--to)) 0 100% / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,rgba(0,0,0,0) var(--from),#000 var(--to)) 100% 100% / var(--r) var(--r) no-repeat;
}

/* Quatre paliers au lieu des six de la maquette : même amplitude, un tiers de
   surfaces composées en moins. Les bandes couvrent les 150 px de portée. */
.person .bleed .l0{filter:blur(5px) saturate(1.1)}
.person .bleed .l1{filter:blur(13px) saturate(1.1);--from:0px;--to:50px}
.person .bleed .l2{filter:blur(21px) saturate(1.1);--from:50px;--to:100px}
.person .bleed .l3{filter:blur(30px) saturate(1.1);--from:100px;--to:150px}

/* Sur petit écran, deux paliers au lieu de quatre. Le halo est bien moins
   lisible en colonne, et l'appareil qui l'affiche est celui qui peut le moins
   se le payer. Le palier restant couvre alors toute la portée. */
@container (max-width:844px){
  .person .bleed .l2,
  .person .bleed .l3{display:none}
  .person .bleed .l1{filter:blur(22px) saturate(1.1);--from:0px;--to:150px}
}

.person :focus-visible{outline-color:var(--paper)}

/* Textes sur fond sombre. Contrastes mesurés sur #1A1A1A :
   #F2F2F2 15,55:1 · #DADADA 12,45:1 · dégradé du nom 10,44:1 à 11,17:1.
   Les pastilles claires : #1A1A1A sur #D9D9D9, 12,33:1. */
.person-name h3{font-size:22.5px;letter-spacing:.02em;line-height:1.4}
.person-name h3 .grad{
  background:linear-gradient(102deg,#E9BFB6 0%,#F2F2F2 55%,#CFCFCF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not (background-clip:text){
  .person-name h3 .grad{color:#F2F2F2}
}

.person-name .role{margin-top:8px;font-size:11.25px;color:#F2F2F2}
.person-name .langs-note{margin-top:8px;font-size:11.25px;color:#DADADA}

.facts{margin:0 auto;max-width:40ch;display:flex;flex-direction:column;gap:8px}
.facts li{font-size:11.25px;color:#DADADA;line-height:1.55}

.person .pill{background:#D9D9D9;color:#1A1A1A}
.person .pill:hover{background:#E8E8E8}
.person .pill--book{background:var(--rose);color:var(--paper)}
.person .pill--book:hover{background:var(--rose);filter:brightness(.93)}

.person-detail .acts{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

/* Le halo est un ornement coûteux : on le retire quand le réglage système
   demande de ménager les animations et effets. Le bloc reste entier. */
@media(prefers-reduced-motion:reduce){
  .person .bleed{display:none}
}


/* -------------------------------------------------------------------------
   14. ACCUEIL — L'ESSENTIEL AVANT DE VENIR (§8 point 3)

   Trois colonnes : comment prendre rendez-vous, quand le cabinet est ouvert,
   où il se trouve. §8 : ce que quelqu'un vérifie avant de se déplacer, et rien
   d'autre.

   Le titre sort du panneau et prend la forme d'une pastille, comme celles de la
   barre : le panneau ne contient plus que les trois colonnes.

   Le dégradé du panneau est en CSS, pas en image (§4).
   ------------------------------------------------------------------------- */

/* Le titre reprend la forme des autres titres de section, comme celui de la
   carte du corps : un h2 centré, sans habillage. */
.practical-titre{margin-bottom:clamp(20px,3vw,36px)}

/* Le panneau va du gris des pastilles à celui de leur survol : #EAEAEA à
   #D8D8D8. Prendre ces deux teintes plutôt que d'en inventer une troisième
   évite un gris de plus à tenir à jour, et cale le panneau sur le vocabulaire
   déjà posé. */
.practical{
  border-radius:var(--r-panel);
  background:linear-gradient(168deg,var(--pill) 0%,var(--pill-hover) 100%);
  padding:clamp(28px,3.6vw,48px) clamp(20px,4vw,56px);
}

.cols{
  display:grid;
  gap:clamp(28px,3vw,36px);
}

/* Les trois colonnes partagent leurs RANGÉES : l'étiquette, la valeur et la
   précision se tiennent donc à la même hauteur d'une colonne à l'autre, même
   quand l'une d'elles passe à la ligne et s'allonge. C'est ce que fait
   `subgrid` : la colonne n'a pas sa propre grille, elle emprunte celle du
   parent.

   Sans prise en charge de subgrid, chaque colonne reprend son flux normal :
   les contenus cessent de s'aligner, mais rien n'est cassé. */
@media(min-width:760px){
  .cols{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto auto;
    row-gap:14px;
  }

  @supports (grid-template-rows:subgrid){
    .col{
      display:grid;
      grid-row:span 3;
      grid-template-rows:subgrid;
      align-content:start;
    }

    /* L'espacement vient de la gouttière des rangées, plus des marges : sinon
       une marge s'ajouterait à la hauteur d'une rangée et fausserait le
       centrage. */
    .col h3{margin-bottom:0}
  }
}

/* L'étiquette de chaque colonne prend la forme d'une pastille blanche : mêmes
   mesures que `.pill`, mais dans la couleur du fond de page, pour qu'elle se
   détache du panneau gris au lieu de s'y fondre.

   `justify-self` est nécessaire parce que la colonne est une grille : un
   élément de grille est « blocifié » et prendrait toute la largeur, alors que
   la pastille doit épouser son texte.

   --ink sur blanc : 9,89:1. */
.col h3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  min-height:33px;
  padding:0 22px;
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  margin-bottom:14px;
  font-size:11.25px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
}
.col p{font-size:11.25px;line-height:1.65;color:var(--muted)}
.col p a{color:var(--ink)}

/* La valeur de chaque colonne : c'est elle qu'on vient chercher, pas son
   étiquette.

   `align-self:center` la centre dans sa rangée partagée : quand l'adresse passe
   à deux ou trois lignes, les valeurs plus courtes des autres colonnes restent
   au milieu de la hauteur, avec autant d'air au-dessus qu'en dessous. */
.col .big{
  font-size:22.5px;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--ink);
  font-weight:500;
  align-self:center;
}


/* -------------------------------------------------------------------------
   15. ACCUEIL — BANDE REMBOURSEMENT (§8 point 4)

   Le fait le plus mal connu du métier mérite une bande entière (B§2).

   La texture d'origine était une image couleur de 411 Ko, ce que §4 refuse.
   Elle est remplacée par un MASQUE de 86 Ko appliqué à un aplat de couleur CSS.
   Trois économies, sans rien perdre à l'œil :
     - la couleur reste un token, donc la bande suivra si le rose change (§16.1) ;
     - le grain vit dans le canal ALPHA, les trois canaux de couleur sont
       uniformes et ne coûtent presque rien ;
     - l'alpha est réduit à QUATRE niveaux : le grain est de la bombe de
       peinture, pas un dégradé, et quatre niveaux sont indiscernables de 256
       tandis que deux durcissent visiblement le bord.

   Le fichier garde sa résolution d'origine (1400 × 868) et n'est donc JAMAIS
   agrandi, seulement réduit pour tenir dans la bande. C'est l'agrandissement
   qui faisait apparaître les pixels dans une première version.

   Pourquoi une seule image plutôt qu'une frange répétée horizontalement, qui
   aurait tenu en 33 Ko : le grain n'est pas uniforme sur la largeur. Son
   opacité moyenne passe de 85 à gauche à 244 au centre puis 79 à droite —
   c'est un nuage, dense au milieu et dissous aux quatre coins. Une répétition
   ramène donc les coins clairs au milieu de chaque motif, et laisse une raie
   pâle à chaque raccord. Cette texture n'est pas raccordable, et aucun réglage
   n'y change rien.

   CSS ne sait pas produire de la bombe de peinture. Un dégradé donnerait un
   bord net là où la maquette a un bord qui se défait. Le fichier est donc
   réduit à ce que CSS ne peut pas faire, et rien de plus.
   ------------------------------------------------------------------------- */

.field{
  position:relative;
  isolation:isolate;
  color:var(--paper);
  padding:clamp(64px,10vw,150px) clamp(26px,6vw,90px);
}

/* Ni rayon ni recadrage : c'est le grain qui dessine le bord, et il se fond
   dans la page de lui-même.

   Propriétés détaillées plutôt que la forme courte `mask` : l'ordre de ses
   composants n'est pas interprété de la même façon partout, et une valeur
   rejetée fait tomber la déclaration entière — donc un rectangle plein. */
.field-fond{
  position:absolute;
  inset:0;
  z-index:0;

  /* Une ellipse qui creuse le centre : la teinte d'origine reste aux quatre
     coins, et s'assombrit en se désaturant vers le milieu, là où le texte se
     pose. `farthest-corner` cale la fin du dégradé exactement sur les coins,
     donc ceux-ci gardent la couleur d'origine quelles que soient les
     proportions de la bande. */
  background:radial-gradient(
    farthest-corner ellipse at 50% 50%,
    var(--rose-champ-coeur) 0%,
    var(--rose-champ) 100%
  );

  -webkit-mask-image:url("assets/champ.webp");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-image:url("assets/champ.webp");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:100% 100%;
}

.field-contenu{position:relative;z-index:1}

.field h2{
  font-size:clamp(24px,4.4vw,44px);
  letter-spacing:-.025em;
  line-height:1.15;
  max-width:16ch;
  margin-inline:auto;
}
.field p{margin:22px auto 0;max-width:46ch;font-size:16px;color:var(--paper)}
.field .acts{margin-top:30px;display:flex;justify-content:center}


/* -------------------------------------------------------------------------
   16. ACCUEIL — CARTE DU CORPS (§8 point 5)

   Cinq calques superposés : le cadre, puis corps, bras, jambes et tête. Le
   cadre est le seul dans le flux, donc c'est lui qui donne sa hauteur au bloc.

   Les calques sont des IMAGES et non du SVG recopié dans la page. Le recolorage
   passe par `filter` sur le conteneur, qui s'applique à une image comme à du
   SVG intégré : rien n'est perdu, et 258 Ko de tracés quittent le document
   pour devenir des fichiers mis en cache.

   Le changement de couleur est une ANIMATION et non une transition : au repos,
   aucun filtre n'existe sur le calque, donc aucune surface n'est composée
   inutilement.
   ------------------------------------------------------------------------- */

.map-panel{padding-inline:0;container-type:inline-size}

.bodymap{position:relative;margin:clamp(20px,3vw,36px) auto 0}
.bodymap svg,
.bodymap img{display:block;width:100%;height:auto}

.bm-layer{position:absolute;inset:0;pointer-events:none;filter:none}
.bm-layer.is-hot{animation:bm-yellow 200ms ease-out forwards}
.bm-layer.is-cooling{animation:bm-grey 200ms ease-out}

@keyframes bm-yellow{
  from{filter:brightness(1) sepia(0) saturate(1) hue-rotate(0deg)}
  to{filter:brightness(1.15) sepia(1) saturate(10) hue-rotate(8deg)}
}
@keyframes bm-grey{
  from{filter:brightness(1.15) sepia(1) saturate(10) hue-rotate(8deg)}
  to{filter:brightness(1) sepia(0) saturate(1) hue-rotate(0deg)}
}

.bm-hotspots{position:absolute;inset:0}
.bm-hotspots polygon{
  fill:#FFFFFF;
  fill-opacity:0;
  pointer-events:all;
  cursor:pointer;
  transition:fill-opacity 200ms ease-out;
}
/* Au clavier, la zone doit se voir : le liseré par défaut suivrait le
   rectangle englobant, pas la forme. */
.bm-hotspots a:focus-visible{outline:none}
.bm-hotspots a:focus-visible polygon{fill:var(--accent);fill-opacity:.2}

/* Sous 680 px, les listes vivent sous le dessin, dans leur propre cadre.
   Au-dessus, elles se logent dans le vide à gauche et à droite du corps.

   L'épaisseur du trait suit celle du dessin : le cadre SVG a un `stroke-width`
   de 20 dans un viewBox large de 3020, soit 0,662 % de la largeur affichée.
   En `cqw` — pourcentage de la largeur du conteneur — les deux traits
   s'amincissent donc ensemble. Le 3px qui précède sert de repli là où les
   unités de conteneur manquent. */
.bm-texts{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  column-gap:24px;
  row-gap:26px;
  border:3px solid #C8C8C8;
  border-width:0.662cqw;
  border-radius:var(--r-panel);
  padding:clamp(22px,3.4vw,40px) clamp(18px,3vw,36px);
}

/* Les enveloppes ne portent que l'alignement : ce sont les quatre groupes qui
   sont les éléments de la grille. */
.bm-text{display:contents}
.bm-text--right{text-align:right}
.bm-text--left .bm-group:nth-child(1),
.bm-text--right .bm-group:nth-child(1){grid-row:1}
.bm-text--left .bm-group:nth-child(2),
.bm-text--right .bm-group:nth-child(2){grid-row:2}
.bm-text--right .bm-group{grid-column:2}

/* Le groupe est une cellule de grille : sa boîte fait toute la largeur de la
   colonne, bien au-delà des pastilles qu'on y voit. Il ne doit donc RIEN
   recevoir du pointeur — ce sont les éléments visibles qui l'accueillent, et
   la zone de détection épouse alors exactement ce qui est dessiné. Ça libère
   aussi le dessin qui passe dessous. */
.bm-group{pointer-events:none}
.bm-group h3,
.bm-group li a{pointer-events:auto}

/* Le titre ne fait que la largeur de son texte, pour la même raison. */
.bm-group h3{
  display:inline-block;
  font-size:11.25px;
  letter-spacing:.02em;
  margin-bottom:8px;
  color:var(--ink);
}

/* Les motifs sont des pastilles, comme partout ailleurs, mais de moitié : le
   remplissage latéral passe de 22 à 11 px, et la hauteur de 33 à 17 px. Elles
   sont seize, alignées en colonne dans un espace étroit.

   L'écart de 7 px entre elles n'est pas décoratif : WCAG 2.2 (2.5.8) accepte
   une cible plus petite que 24 px si l'espacement empêche deux cercles de
   24 px centrés sur deux cibles voisines de se recouvrir. 17 + 7 = 24, donc la
   condition est tout juste remplie. Réduire cet écart ferait échouer le
   critère. */
.bm-group ul{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.bm-text--right .bm-group ul{align-items:flex-end}

.bm-group li{line-height:1}

.bm-group li a{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:0 11px;
  border-radius:999px;
  background:var(--pill);
  color:var(--ink);
  font-size:11.25px;
  font-weight:500;
  line-height:1;
  letter-spacing:.005em;
  transition:background 180ms ease-out,color 180ms ease-out;
}

/* Deux portées distinctes pour un même effet.

   Survoler une zone du DESSIN allume toute la région : ses pastilles passent au
   jaune ensemble, parce que c'est bien le groupe entier que la zone désigne.

   Survoler UNE pastille n'allume qu'elle : elle désigne un motif, pas une
   région. Le dessin, lui, s'allume dans les deux cas — c'est la réciproque
   attendue.

   Le texte reste --ink sur le jaune : 8,91:1. */
.bm-group.is-hot li a,
.bm-group li a:hover,
.bm-group li a:focus-visible{
  background:var(--accent);
  color:var(--ink);
  text-decoration:none;
}

.bm-group.is-hot h3{color:var(--accent-deep)}

/* Le passage à la disposition en surimpression dépend de la largeur DU
   CONTENEUR, pas de celle de la fenêtre. C'était une `@media` tant que la
   carte ne vivait que sur l'accueil, où elle occupe toute la page. Elle figure
   désormais aussi sur la page des motifs, dans une colonne de 620 px : sur un
   grand écran, une `@media` y aurait plaqué les quatre listes par-dessus un
   dessin trop étroit pour elles. Une `@container` règle la question une fois
   pour toutes — `.map-panel` porte déjà `container-type:inline-size`, et la
   feuille utilise déjà des unités `cqw` juste au-dessus.

   En dessous, les listes restent sous le dessin, dans leur propre cadre : la
   disposition prévue pour les petites largeurs sert maintenant aussi à la
   colonne étroite de la page des motifs. */
@container (min-width:680px){
  .bm-texts{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border:0;
    padding:0;
    margin:0;
    grid-template-columns:2.6% 27.5% 1fr 27.5% 2.6%;
    align-content:center;
    column-gap:0;
    row-gap:clamp(18px,3vw,38px);
  }
  .bm-text--left .bm-group{grid-column:2}
  .bm-text--right .bm-group{grid-column:4}
}

/* Le recolorage est un ornement : on l'éteint quand le réglage système demande
   de ménager les animations. Les listes et les liens restent entiers. */
@media(prefers-reduced-motion:reduce){
  .bm-layer.is-hot,
  .bm-layer.is-cooling{animation:none}
}


/* -------------------------------------------------------------------------
   17. PIED DE PAGE
   Quatre colonnes sur grand écran, deux sur petit. Les coordonnées viennent
   de l'enregistrement « Cabinet » (§9), jamais du gabarit.
   ------------------------------------------------------------------------- */

footer{
  margin-top:var(--gap-section);
  padding-block:clamp(40px,5vw,64px);
  background:var(--wash);
}

.f-grid{
  display:grid;
  gap:26px 22px;
  text-align:left;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){ .f-grid{grid-template-columns:repeat(4,1fr)} }

/* Le texte du pied reprend exactement celui des panneaux : 11,25 px à 1,65.
   La taille était déjà la bonne ; c'est l'interlignage de 1,9 qui donnait au
   pied un air plus grand que le corps des pages. */
.f-grid h3{font-size:11.25px;letter-spacing:.02em;margin-bottom:8px}
.f-grid li,.f-grid p{font-size:11.25px;line-height:1.65;color:var(--muted)}
.f-grid a{color:var(--muted)}
.f-grid a:hover{color:var(--ink)}

/* Les listes de menu du pied : aucune décoration, aucun fond, aucune marge.
   À plat, comme le reste de la colonne. */
.f-list{margin:0;padding:0;list-style:none;background:none}
.f-list li{margin:0}

.f-note{
  margin-top:32px;
  font-size:11.25px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  justify-content:space-between;
}
.f-note a{color:var(--muted)}
.f-note a:hover{color:var(--ink)}

/* les mentions légales : une liste, mais rendue en ligne */
.f-legal{display:flex;flex-wrap:wrap;gap:6px 18px}


/* -------------------------------------------------------------------------
   18. FIL D'ARIANE — §6
   Les maillons sont en --ink, pas en --rose ni en --muted. Ce sont de petits
   caractères, et le projet a déjà trop de texte secondaire sous le seuil :
   --rose donne 3,71:1 et --muted 3,45:1, tous deux en dessous des 4,5:1
   recommandés. --ink sur blanc donne 9,89:1. Le lien se distingue donc du
   texte par son soulignement au survol, pas par sa couleur — ce qui est aussi
   ce que §3 demande : ne jamais porter une information par la seule couleur.
   ------------------------------------------------------------------------- */

.fil{
  margin:0 0 clamp(18px,2.4vw,30px);
  font-size:13px;
  line-height:1.5;
}

.fil ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  margin:0;
  padding:0;
  list-style:none;
}

.fil li{display:flex;align-items:center;gap:4px 10px}

/* Le séparateur est décoratif et généré par la feuille de style : il ne doit
   pas être lu par un lecteur d'écran, d'où `content` sur un pseudo-élément
   plutôt qu'un caractère dans le balisage. */
.fil li+li::before{
  content:"›";
  color:var(--surface);
  font-size:15px;
  line-height:1;
}

.fil a{color:var(--ink);text-decoration:none}
.fil a:hover{text-decoration:underline}

/* La page courante : même couleur, poids légèrement plus appuyé. Pas de gris
   plus clair — ce serait remplacer une information par un contraste moindre. */
.fil [aria-current="page"]{font-weight:600}


/* -------------------------------------------------------------------------
   19. PAGES DE PROSE — blocs du cœur de WordPress
   C'est ce que les chiropraticiennes voient dans l'éditeur, donc c'est ce qui
   doit être stylé : titres, paragraphes, listes, tableaux, citations, images.
   Rien d'autre n'est déclaré ; un bloc non prévu retombera sur les styles de
   base du thème plutôt que sur rien.

   ATTENTION À LA RÉINITIALISATION : le §3 de cette feuille supprime les puces
   et le retrait de TOUTES les listes (`ul{list-style:none;padding:0}`). Les
   listes du contenu doivent donc les reprendre explicitement, sans quoi une
   liste rédigée dans l'éditeur s'affiche en paragraphes collés.
   ------------------------------------------------------------------------- */

/* Le contenu commence SOUS l'encart jaune du secrétariat, qui est en
   `position:fixed` en haut à gauche. La barre, elle, est COLLÉE et non fixe :
   elle occupe déjà sa place dans le flux, et le contenu démarre donc
   naturellement sous elle. Ce qu'il reste à dégager, c'est l'encart.

   L'écart part de --bar-bottom, le bas réel de la barre relevé par le script,
   parce que l'encart se positionne par rapport à lui : les deux suivent donc
   ensemble la barre d'administration de WordPress et le repli de la barre sur
   petit écran.

   L'écart est CONSERVÉ sous 700 px, là où l'encart disparaît : le blanc tient
   de lui-même, et le faire varier ferait sauter la page à la réduction de la
   fenêtre. Décision du client. */
.page-prose{
  padding-top:calc(var(--bar-bottom, 61px) + clamp(84px,9vw,150px));
  padding-bottom:var(--gap-section);
}

/* SUR TÉLÉPHONE, CE BLANC EST DE MOITIÉ. L'encart jaune y est masqué (§ ci-
   dessus, seuil de 700 px), donc il n'y a plus rien à dégager ; et la barre s'y
   replie sur deux rangs, ce qui fait d'autant grandir --bar-bottom. Les deux
   effets se cumulaient en un vide de plus de deux cents pixels avant le fil
   d'Ariane. */
@media(max-width:700px){
  .page-prose{
    padding-top:calc((var(--bar-bottom, 61px) + clamp(84px,9vw,150px)) / 2);
  }
}

/* Le H1 est centré, comme les titres de section et comme l'ouverture de
   l'accueil. */
.page-head{margin:0 0 clamp(24px,3.4vw,44px);text-align:center}

/* Le panneau est CENTRÉ et sa largeur est limitée ici, à la demande du client :
   c'est le panneau qui se restreint, pas le texte à l'intérieur. Le texte remplit
   donc tout le gris, sans marge vide à gauche et à droite.

   Le nombre vient de la mesure de lecture : 620 px moins 2 × 44 px de
   remplissage laissent environ 530 px de texte, soit quelque 85 caractères par
   ligne à 11,25 px. Un seul nombre à tourner pour élargir ou resserrer. */
.prose{
  max-width:620px;
  margin-inline:auto;
}

/* Rythme vertical. L'espace appartient à l'élément qui SUIT, jamais à celui
   qui précède, ce qui évite les marges qui s'additionnent.

   L'écart avant un titre est GRAND et celui qui le sépare de son panneau est
   PETIT : c'est ce qui rattache visuellement un titre à sa propre section
   plutôt qu'à celle du dessus. Sans cette différence, chaque titre semble
   appartenir au panneau qui le précède. */
.prose > * + *{margin-top:1.1em}
.prose > * + h2{margin-top:clamp(52px,6.5vw,88px)}
.prose > h2 + .bloc{margin-top:clamp(14px,1.6vw,20px)}

/* Les titres de section restent sur le FOND DE PAGE, au-dessus de leur
   panneau, à la taille ordinaire des h2 du thème et CENTRÉS — comme le titre
   qui coiffe le bloc « L'essentiel avant de venir » sur l'accueil.
   --ink sur blanc : 9,89:1.

   PAS DE `margin` ICI. La remise à zéro globale du §4 s'en charge déjà, et la
   reposer dans une règle `.prose h2` écrasait les écarts ci-dessus : même poids
   de sélecteur, mais plus bas dans la feuille, donc c'est elle qui gagnait et
   les titres se collaient au panneau précédent. Erreur déjà payée. */
.prose h2{text-align:center}

/* Le corps de chaque section vit dans son propre panneau gris, fabriqué au
   rendu par `clg_sections_html()` — le contenu reste une suite de blocs à plat
   dans l'éditeur. Même dégradé, mêmes rayons et même remplissage que le bloc
   de l'accueil.

   --ink sur #EAEAEA : 8,22:1. Sur #D8D8D8, en bas du dégradé : 6,94:1. */
.bloc{
  border-radius:var(--r-panel);
  background:linear-gradient(168deg,var(--pill) 0%,var(--pill-hover) 100%);
  padding:clamp(22px,3vw,38px) clamp(20px,4vw,44px);
}

/* L'introduction respire : l'écart qui la sépare du premier titre de section
   est nettement plus grand que celui qui sépare deux sections. C'est ce qui la
   détache du corps de la page et la fait lire comme une ouverture. */
.prose > .reponse-directe + h2{margin-top:clamp(84px,11vw,160px)}

.bloc > * + *{margin-top:1.1em}
.bloc > * + h3{margin-top:clamp(20px,2.4vw,30px)}
.bloc > *:last-child{margin-bottom:0}

/* Le texte remplit le panneau : la largeur est tenue par `.prose`, au-dessus.
   Seul le tableau peut déborder. */
.bloc > .wp-block-table{max-width:none}

/* Le texte du panneau reprend la taille et l'interlignage du bloc d'accueil.

   LA COULEUR, ELLE, N'EST PAS REPRISE : l'accueil est en --muted, qui tombe à
   2,42:1 sur ce gris. La taille demandée est respectée, le contraste reste
   celui de --ink. À cette taille, un gris à 2,42:1 serait illégible pour le
   public du cabinet et contredirait la page Accessibilité. */
.bloc p,
.bloc li{font-size:11.25px;line-height:1.65}

.bloc h3{
  font-size:11.25px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.4;
}

/* --- Le dégradé du titre et de l'introduction --------------------------------
   Le H1 et le paragraphe d'introduction partagent le même dégradé : ils
   forment l'ouverture de la page et se lisent ensemble.

   Teintes et contrastes : voir les tokens --grad-bleu et --grad-rose au §2.

   `@supports` est indispensable : sans `background-clip:text`, `transparent`
   rendrait le titre et le paragraphe INVISIBLES au lieu de dégradés. Le repli
   est --ink, 9,89:1. */
.page-head h1,
.prose .reponse-directe{
  color:var(--ink);
}

.prose .reponse-directe{
  font-size:1.06em;
  line-height:1.5;
  text-align:center;
}

@supports (background-clip:text) or (-webkit-background-clip:text){
  .page-head h1,
  .prose .reponse-directe{
    background:linear-gradient(100deg,var(--grad-bleu) 0%,var(--grad-rose) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* Une pastille dans le paragraphe garde sa propre couleur : le découpage du
     dégradé rendrait son texte transparent sur fond gris. */
  .prose .reponse-directe a{
    -webkit-background-clip:border-box;
    background-clip:border-box;
    color:var(--ink);
  }
}

@media(min-width:820px){
  .prose .reponse-directe{font-size:1.1em}
}

/* --- Listes ---------------------------------------------------------------- */

.prose .wp-block-list{
  margin:0;
  padding-left:1.35em;
  list-style:disc;
}

.prose .wp-block-list li{margin:0 0 .45em}
.prose .wp-block-list li:last-child{margin-bottom:0}
.prose .wp-block-list ul{list-style:circle;padding-left:1.2em;margin-top:.45em}
.prose ol{margin:0;padding-left:1.5em;list-style:decimal}

/* --- Tableaux --------------------------------------------------------------
   Le tableau comparatif de « Chiropratique ou ostéopathie ? » ne tient pas sur
   un téléphone. Il défile horizontalement DANS SON CADRE, et jamais la page
   entière : `overflow-x` sur la figure, pas sur le corps du document. */
.prose .wp-block-table{
  margin:0;
  max-width:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.prose .wp-block-table table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:.94em;
}

.prose .wp-block-table th,
.prose .wp-block-table td{
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  font-size:11.25px;
  line-height:1.55;
  border-bottom:1px solid var(--surface);
}

.prose .wp-block-table th{font-weight:600}
.prose .wp-block-table thead th{border-bottom-width:2px}
.prose .wp-block-table tbody td:first-child{font-weight:600}

/* --- Citations -------------------------------------------------------------- */

.prose .wp-block-quote{
  margin:0;
  padding-left:clamp(16px,2vw,24px);
  border-left:2px solid var(--surface);
  font-style:normal;
}

.prose .wp-block-quote cite{
  display:block;
  margin-top:.6em;
  font-size:.9em;
  font-style:normal;
}

/* --- Images ----------------------------------------------------------------
   `img{max-width:100%}` est déjà posé au §3. Ici on ne fait que le cadre et la
   légende. Les images CADRÉES par débordement portent `max-width:none` et ne
   passent pas par ce sélecteur — piège déjà payé, voir le journal. */
.prose .wp-block-image{margin:0;max-width:none}
.prose .wp-block-image img{border-radius:var(--r-photo);display:block}

.prose .wp-block-image figcaption{
  margin-top:.7em;
  font-size:.9em;
}

/* --- Séparateur -------------------------------------------------------------- */

.prose .wp-block-separator{
  margin-block:clamp(32px,4vw,52px);
  border:0;
  border-top:1px solid var(--wash-hover);
}

/* --- La note de sources (§8, « Daté » du journal) ---------------------------
   Sources et date de vérification, en fin de page. Volontairement en --ink et
   NON en --muted : c'est du petit texte, et --muted tombe à 3,45:1. Le rôle
   secondaire est marqué par la taille et par le filet, pas par un gris qui
   rendrait illisible précisément ce qui permet de vérifier la page. */
.prose .note-sources{
  margin-top:clamp(40px,5vw,64px);
  padding-top:1.1em;
  border-top:1px solid var(--surface);
  font-size:.86em;
  line-height:1.55;
}

/* --- Ce que les chiropraticiennes écriront ---------------------------------- */

.prose strong{font-weight:600}


/* -------------------------------------------------------------------------
   21. BANDEAU TEMPORAIRE
   Une annonce ponctuelle, posée page par page depuis l'éditeur.

   IL COMMENCE SOUS LE DÉGAGEMENT DE L'ENCART JAUNE, il ne s'y loge pas.
   L'encart du secrétariat est en `position:fixed` à --bar-bottom + 12 px et
   haut d'environ 70 px ; la marge haute est plus large que cela, avec de quoi
   encaisser un encart qui s'allongerait d'une ligne. Sous 700 px l'encart
   n'existe pas et la marge disparaît.

   PLEINE LARGEUR ET EN JAUNE DE SÉCURITÉ, comme l'encart : c'est la même voix,
   celle du cabinet qui annonce quelque chose. Les deux ne se touchent jamais,
   puisque le bandeau commence en dessous.

   Le FOND va d'un bord à l'autre, le TEXTE reste dans la largeur de lecture et
   centré : une ligne courte perdue au bord gauche d'un écran large ne se lit
   pas. --ink sur --accent : 8,91:1.

   LA LARGEUR DE LECTURE EST ÉCRITE EN CLAIR. Une première version disait
   `var(--wrap)` — variable qui n'existe pas dans ce thème, `.wrap` portant
   1240 px en dur. La déclaration était donc rejetée en silence et le texte
   n'était borné par rien.
   ------------------------------------------------------------------------- */

.bandeau{
  margin:0 0 clamp(14px,1.8vw,22px);
  max-width:100%;
  background:var(--accent);
  color:var(--ink);
  padding:clamp(14px,1.8vw,20px) var(--gutter);
  text-align:center;
}

@media(min-width:701px){
  .bandeau{margin-top:clamp(122px,11.5vw,170px)}
}

.bandeau p{
  margin:0 auto;
  max-width:1240px;

  /* 11,25 px × 1,5. Le bandeau est une annonce : il doit se lire avant le
     reste de la page, pas à la taille du texte secondaire. */
  font-size:16.875px;
  line-height:1.5;
}

/* Le bandeau a déjà dégagé l'encart, et il se pose JUSTE au-dessus du fil
   d'Ariane : la page ne rajoute donc pas son propre blanc en dessous. */
.bandeau ~ article.page-prose{padding-top:0}


/* -------------------------------------------------------------------------
   20. FICHE PRATICIENNE
   La page d'une chiropraticienne reprend la mise en page des pages de prose —
   titre centré, panneaux gris par section — et s'ouvre sur son portrait.

   AUCUNE RÈGLE DE `.person` N'EST MODIFIÉE. La rangée sombre de l'accueil et de
   la page Équipe reste exactement ce qu'elle est. Le portrait est réutilisé en
   posant le MÊME balisage — `.person > .portrait` — dans un conteneur qui
   NEUTRALISE le bloc sombre et le laisse déborder. Toute la géométrie du
   recadrage et les neuf masques du halo continuent donc de s'appliquer sans
   être recopiés : une seule définition, deux rendus.
   ------------------------------------------------------------------------- */

.fiche-media{
  container-type:inline-size;
  display:flex;
  justify-content:center;

  /* Le halo déborde de --reach dans les quatre directions. Sans cet espace il
     passerait sur le fil d'Ariane au-dessus et sur le titre en dessous. */
  padding-block:clamp(44px,7vw,96px);
}

/* Le bloc sombre est déshabillé : plus de fond, plus de rayon, plus de
   remplissage, plus de grille — et surtout plus de `overflow:hidden`, qui est
   ce qui coupait le halo au bord du bloc. C'est lui qui laisse désormais le
   halo se fondre dans le blanc de la page. */
.fiche-media .person{
  /* LE PORTRAIT ET SON HALO DOIVENT TENIR DANS LE CONTENEUR. Le halo déborde
     de --reach de chaque côté : la largeur réelle du bloc est donc
     --cw + 2 × --reach. Avec un portrait de 320 px et une portée de 100, cela
     fait 520 px, ce qui dépassait la largeur disponible sur téléphone et
     faisait DÉFILER LA PAGE HORIZONTALEMENT.

     Les deux valeurs sont donc plafonnées par la largeur du conteneur plutôt
     que fixées : 70 % pour le portrait, 12 % pour la portée. La somme reste
     sous 100 % à toutes les largeurs, et sur grand écran on retrouve bien les
     320 px de portrait et les 100 px de portée demandés.

     Rogner le débordement aurait été l'autre solution, mais elle coupe le halo
     net sur les côtés — exactement l'arête qu'on vient de supprimer. */
  --cw:min(320px, 70cqi);
  --ch:calc(var(--cw) * 1.25);
  --reach:min(100px, 12cqi);

  display:block;
  width:auto;
  background:none;
  border-radius:0;
  padding:0;
  overflow:visible;
}

/* Les quatre paliers de flou, retaillés pour les 100 px de portée — les bandes
   d'origine s'arrêtent à 150 et laisseraient le dernier palier invisible.

   LE PREMIER PALIER EST ADOUCI : le halo bute contre une photo nette, et un
   flou de 5 px à ce contact dessine une arête visible. À 2 px, la première
   bande part presque de la netteté du portrait et la transition se ferme. Les
   paliers suivants sont rapprochés d'autant, pour que la montée en flou reste
   régulière sur une portée plus courte.

   Ces règles ne valent QUE dans `.fiche-media` : la rangée sombre garde les
   siennes. */
.fiche-media .person .bleed .l0{filter:blur(2px) saturate(1.1)}
.fiche-media .person .bleed .l1{filter:blur(8px) saturate(1.1);--from:0px;--to:34px}
.fiche-media .person .bleed .l2{filter:blur(16px) saturate(1.1);--from:34px;--to:67px}
.fiche-media .person .bleed .l3{filter:blur(26px) saturate(1.1);--from:67px;--to:100px}

/* LE BORD DE LA PHOTO EST FONDU. C'est lui, et non le halo, qui dessinait
   l'arête nette visible sous le portrait : `.cutout` est la photo DÉTOURÉE au
   rectangle du cadre, donc parfaitement franche, posée sur un halo flou. Aucun
   réglage de flou ne pouvait fermer cette transition — il fallait adoucir le
   découpage lui-même.

   Deux dégradés croisés, l'un vertical et l'autre horizontal, composés en
   intersection : les quatre bords s'éteignent, les coins aussi. `source-in` est
   la formulation WebKit de `intersect`.

   Le rayon d'angle du cadre devient sans objet, le fondu le remplace.

   Ce fondu ne vaut QUE sur la fiche : dans la rangée sombre, la photo doit
   garder son cadre net. */
.fiche-media .person .cutout{
  --fondu:28px;
  border-radius:0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
  mask-composite:intersect;
}

/* Le voile sombre n'a plus rien à voiler : sur blanc, il salirait le halo. */
.fiche-media .person::before{content:none}

/* LE HALO EST RECOUPÉ À SA PROPRE BOÎTE. Sans cela, la page défile vers la
   droite.

   Le halo est fait de tuiles : des copies miroir de la photo, posées à --dx de
   -1, 0 et +1, donc décalées d'une largeur d'image entière de chaque côté. Le
   masque de `.bleed` les efface au-delà de --reach — mais un masque cache des
   pixels, il ne retire rien de la mise en page : les tuiles continuent de
   compter dans la zone défilable.

   Dans la rangée sombre, `.person{overflow:hidden}` les découpait et personne
   ne le voyait. Ici, `overflow:visible` a été posé pour laisser le halo se
   fondre dans le blanc — et a libéré les tuiles avec lui. Sur la fiche de
   Jeanne Waldner, dont la photo a un rapport de 1,45, la tuile de droite
   s'arrêtait à 1174 px pour une fenêtre de 956 : 218 px de débordement.

   Le découpage est posé sur `.bleed` et non sur `.person` : la boîte de
   `.bleed` vaut déjà le portrait plus --reach de chaque côté, c'est-à-dire
   exactement ce que le masque laisse voir. Rien ne disparaît à l'œil, et le
   halo déborde toujours sur la page. */
.fiche-media .person .bleed{overflow:hidden}

/* --- Page « Prendre rendez-vous » : les pastilles nominatives en tête --------
   Elles sont AU-DESSUS du fil d'Ariane et REMPLACENT le blanc du haut : c'est
   là leur raison d'être, occuper une place qui ne servait à rien.

   REMPLISSAGE SYMÉTRIQUE QUAND L'ENCART JAUNE EST ABSENT. Sous 700 px il est
   masqué : le blanc au-dessus des pastilles vaut alors celui qui les sépare du
   fil d'Ariane, et elles se posent au milieu. La barre étant `sticky`, elle
   prend déjà sa place dans le flux — lui réserver --bar-bottom en plus
   ajouterait une seconde hauteur de barre en blanc.

   AU-DESSUS DE 700 PX, l'encart jaune est là, fixé à --bar-bottom + 12 px et
   haut d'environ 70 px. Les pastilles passaient dessous et le chevauchaient.
   Le remplissage les descend sous lui, avec de la marge : 12 + 70 + respiration.

   Jaune de sécurité, comme sur la fiche de chaque praticienne : c'est le même
   geste, au même endroit du parcours. --ink dessus : 8,91:1. */
article.page-prose--rdv{
  padding-top:clamp(42px,4.5vw,75px);
}

@media(min-width:701px){
  article.page-prose--rdv{
    padding-top:clamp(104px,10vw,150px);
  }
}

.rdv-haut{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  margin:0 0 clamp(42px,4.5vw,75px);
}

/* Sous le portrait, le rôle et les langues, en petit, avant le titre. */
.fiche-meta{
  margin:0 0 clamp(18px,2.4vw,28px);
  text-align:center;
  font-size:11.25px;
  line-height:1.65;
}

.fiche-meta span+span::before{
  content:"·";
  margin:0 .5em;
  color:var(--surface);
}

/* Le rendez-vous avec elle, juste sous son titre et ses langues. Pastille
   pleine taille en jaune de sécurité : c'est la seule de la page, et c'est
   l'action qu'on vient y chercher. --ink dessus : 8,91:1. */
.fiche-acts{
  margin:0 0 clamp(26px,3.4vw,44px);
  text-align:center;
}

.pill--accent{background:var(--accent);color:var(--ink)}
.pill--accent:hover{background:var(--accent);filter:brightness(.94);color:var(--ink)}

/* La citation — la phrase à la première personne — est le premier paragraphe
   du contenu, avant tout titre de section. Elle reprend le grand texte en
   dégradé de l'accueil (`.statement`) : même dégradé --rose vers --ink, même
   graisse, même approche, même repli sans `background-clip`.

   À LA MOITIÉ DE SA TAILLE, sur demande du client : l'accueil va de 28 à 66 px,
   cette citation de 14 à 33 px. Les trois bornes du `clamp` sont divisées par
   deux, y compris la part en `vw`, pour que la réduction tienne à toutes les
   largeurs et pas seulement aux extrêmes.

   PAS DE LARGEUR PROPRE : elle occupe toute la colonne, comme les panneaux
   gris. Une mesure en `ch` la rendait plus étroite qu'eux, et le décalage se
   voyait d'autant plus que la citation est centrée et eux non.

   Les marges négatives compensent le remplissage : sans elles, le découpage du
   dégradé rogne les jambages des lettres. */
.fiche .prose > p:first-of-type{
  font-size:clamp(14px,3.2vw,33px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0 auto;
  text-align:center;
  background:linear-gradient(96deg,var(--rose) 0%,var(--ink) 62%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-block:.08em .18em;
  margin-block:-.08em -.18em;
}

@supports not (background-clip:text){
  .fiche .prose > p:first-of-type{color:var(--ink)}
}

/* Le premier titre de section vient après la citation : il lui faut l'écart
   d'une introduction, pas celui d'une section ordinaire. */
.fiche .prose > p:first-of-type + h2,
.fiche .prose > p:first-of-type + h3{margin-top:clamp(64px,8vw,120px)}

/* Un `h3` resté à la racine ouvre une section au même titre qu'un `h2` — c'est
   le cas du « Parcours » des fiches. Il doit donc en avoir l'allure : centré,
   à la taille des titres de section, et non celle d'un sous-titre de panneau. */
.prose > h3{
  text-align:center;
  font-size:inherit;
}

.prose > * + h3{margin-top:clamp(52px,6.5vw,88px)}
.prose > h3 + .bloc{margin-top:clamp(14px,1.6vw,20px)}

/* --- Les liens vers les autres pages -----------------------------------------
   Ils prennent la forme des pastilles de motifs de la carte du corps : 17 px de
   haut, 11 px de remplissage latéral. En BLANC sur le panneau gris.

   `inline-block` ET NON `inline-flex`, pour l'alignement. La ligne de base
   d'une boîte `inline-flex` est celle de son premier élément flexible, recentrée
   par `align-items` : la pastille flottait au-dessus du texte qui l'entoure et
   aucun `vertical-align` ne le corrige proprement. Une boîte `inline-block`
   pose sa ligne de base sur celle de son propre texte ; comme la pastille et le
   corps sont à la même taille, les deux lignes de base coïncident exactement.

   La hauteur de 17 px vient du `line-height`, pas d'un `min-height` : c'est ce
   qui garde le texte centré dans la pastille sans casser l'alignement.

   ILS NE SONT PAS SOULIGNÉS, contrairement au reste des liens du site : la
   forme de la pastille suffit à les désigner, et un soulignement à l'intérieur
   d'un cercle blanc est illisible. Ils restent distinguables sans la couleur,
   ce que §3 exige.

   --ink sur blanc : 9,89:1. */
.prose p a,
.prose li a{
  display:inline-block;
  padding:0 11px;
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font-size:11.25px;
  font-weight:500;
  line-height:17px;
  letter-spacing:.005em;
  text-decoration:none;
  transition:background 180ms ease-out;
}

.prose p a:hover,
.prose li a:hover{
  background:var(--accent);
  text-decoration:none;
}

/* Hors panneau — la réponse directe et la note de sources sont sur le fond de
   page : une pastille blanche y serait invisible, elle reprend donc le gris
   des pastilles ordinaires. */
.prose > p a,
.prose .note-sources a{background:var(--pill)}

/* Les listes de liens — l'index des motifs, les renvois de bas de page —
   deviennent des colonnes de pastilles. L'écart de 7 px n'est pas décoratif :
   WCAG 2.2 (2.5.8) accepte une cible de moins de 24 px si l'espacement empêche
   deux cercles de 24 px centrés sur deux cibles voisines de se recouvrir.
   17 + 7 = 24. Même raisonnement que pour la carte du corps. */
.prose .wp-block-list li{margin-bottom:7px}
.prose .wp-block-list li:last-child{margin-bottom:0}