@charset "utf-8";

/* =========================================================================
   LyonOstéo — feuille de style unique
   Les contextes de couleur redéfinissent des JETONS (--txt, --line, --fond…)
   et non la couleur de chaque élément : une carte claire posée dans une
   section sombre remet donc la palette claire sans règle supplémentaire.
   ========================================================================= */

/* ------------------------------------------------------------------ fontes */

/* Playfair Display pour les titres : c'est la famille du logo — didone, axe
   vertical, contraste très élevé, empattements filiformes non bracketés. Le
   wordmark et les H1 parlent enfin la même langue.
   Source Sans 3 pour le texte et l'interface : humaniste, dessinée pour la
   lecture à l'écran, chiffres tabulaires — le site est plein de numéros de
   téléphone, d'horaires et de notes. */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ jetons */

:root {
  /* palette de marque, invariante */
  --bleu: #01548b;
  --bleu-fonce: #013f6a;
  --bleu-clair: #6cb8e6;
  --petrol: #1e2b30;
  --petrol-2: #27383e;
  --sable: #b98d5c;
  --sable-clair: #e6d4bd;
  --creme: #f7f4ef;
  --creme-2: #efe8dd;
  --blanc: #ffffff;

  /* contexte clair : le défaut */
  --fond: var(--creme);
  --fond-carte: var(--blanc);
  --fond-doux: var(--creme-2);
  --txt: #121c20;
  --txt-2: #445258;
  --txt-3: #5a6b72;
  --line: #ddd4c6;
  --line-forte: #c6bbaa;
  --accent: var(--bleu);
  --accent-txt: var(--bleu-fonce);
  --etoile: #b0780f;
  --ombre: 0 1px 2px rgb(74 58 40 / 7%), 0 8px 24px -12px rgb(74 58 40 / 20%);
  --ombre-forte: 0 2px 4px rgb(74 58 40 / 9%), 0 22px 46px -18px rgb(74 58 40 / 28%);

  /* rythme */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-rond: 999px;
  /* Le grand rayon : c'est la courbe du « O » du logo, reportée sur les
     cadres. Un seul angle par image, toujours le même côté dans une série. */
  --r-signature: 7rem;
  --r-signature-portrait: 3.5rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --large: 1240px;
  --etroit: 780px;

  /* typographie */
  --f-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-texte: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --t-d1: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
  --t-d2: clamp(2rem, 1.3rem + 2.9vw, 3.25rem);
  --t-d3: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
  --t-h: clamp(1.2rem, 1.06rem + 0.6vw, 1.45rem);
  --t-corps: clamp(1rem, 0.97rem + 0.14vw, 1.09rem);
  --t-petit: 0.875rem;
  --t-micro: 0.78rem;
}

/* Contexte sombre. Il redéfinit les jetons ET pose `color` : `color` s'hérite
   en valeur CALCULÉE, donc redéfinir `--txt` sur un ancêtre ne change rien à
   ce qui a déjà hérité de `body`. Sans cette ligne, un bloc marqué
   `ctx-sombre` affiche du texte petrol sur fond petrol — mesuré à 1,19:1 sur
   l'amplitude horaire de la page rendez-vous. */
.ctx-sombre {
  color: var(--txt);
  --fond: var(--petrol);
  --fond-carte: var(--petrol-2);
  --fond-doux: #223238;
  --txt: #f4f1ea;
  --txt-2: #c3d2d8;
  --txt-3: #9db0b7;
  --line: rgb(244 241 234 / 16%);
  --line-forte: rgb(244 241 234 / 30%);
  --accent: var(--bleu-clair);
  --accent-txt: #9ed3f2;
  --etoile: #f0c469;
  --ombre: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 30px -14px rgb(0 0 0 / 50%);
  --ombre-forte: 0 2px 6px rgb(0 0 0 / 30%), 0 26px 54px -20px rgb(0 0 0 / 60%);
}

/* une carte claire dans une section sombre remet la palette claire */
.ctx-clair {
  color: var(--txt);
  --fond: var(--creme);
  --fond-carte: var(--blanc);
  --fond-doux: var(--creme-2);
  --txt: #121c20;
  --txt-2: #445258;
  --txt-3: #5a6b72;
  --line: #ddd4c6;
  --line-forte: #c6bbaa;
  --accent: var(--bleu);
  --accent-txt: var(--bleu-fonce);
  --etoile: #b0780f;
}

/* Playfair sort des chiffres elzéviriens par défaut : le 5 descend sous la
   ligne de base et le 0 fait la hauteur d'x. Élégant en pleine page, mauvais
   pour une note ou un compteur, qui doivent se lire comme un score. On force
   les chiffres alignés partout où un nombre est un chiffre d'affichage. */
.cumul__note,
.avis__note,
.bandeau-avis__chiffre,
.heros__preuves b,
.seance__num,
.liste-notes__score,
.cumul__score {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ================================================================= signature

   Tout ce bloc découle d'un seul geste : le grand « O » bleu du logo. Il
   devient l'anneau des sur-titres, la pastille des boutons, le filet des
   séparateurs, le grand cercle en filigrane des sections sombres, et la
   courbe reportée sur un angle de chaque image.

   Un seul motif, décliné — c'est ce qui fait une empreinte plutôt qu'une
   collection d'effets.
   ============================================================================ */

/* --- l'anneau des sur-titres --------------------------------------------- */

.sur-titre {
  display: flex;
  align-items: center;
  gap: 0.65em;
}
.sur-titre::before {
  content: '';
  flex: none;
  width: 0.66em;
  height: 0.66em;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* --- la pastille des boutons ---------------------------------------------
   Le bouton principal porte le « O » en bout de ligne, avec la flèche
   dedans : la marque avance. */

.btn--plein .ico,
.btn--plein .btn__ext {
  width: 1.6em;
  height: 1.6em;
  padding: 0.32em;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
  opacity: 1;
  font-size: 0.82em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.btn--plein:hover .ico,
.btn--plein:hover .btn__ext {
  background: rgb(255 255 255 / 32%);
  transform: translateX(2px);
}
/* Pas de pastille flèche quand le bouton porte déjà le logotype de la
   plateforme : la marque dit à elle seule où mène le clic. */
.btn--plein:not(:has(.ico, .btn__ext, .btn__plateforme))::after {
  content: '';
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size: 0.85em;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.btn--plein:not(:has(.ico, .btn__ext, .btn__plateforme)):hover::after {
  background-color: rgb(255 255 255 / 32%);
  transform: translateX(2px);
}

/* Le bouton fantôme reçoit le même geste, en creux. */
.btn--ligne .btn__ext,
.btn--clair .btn__ext {
  width: 1.6em;
  height: 1.6em;
  padding: 0.32em;
  border-radius: 50%;
  border: 1px solid var(--line-forte);
  opacity: 1;
  font-size: 0.82em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- le liseré de l'en-tête ----------------------------------------------
   Un segment bleu de trois pixels, calé sur le bord du contenu : la marque
   signe le haut de chaque page sans rien encombrer. */

.site-entete { position: relative; }
.site-entete::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: max(var(--gouttiere), (100% - var(--large)) / 2);
  width: 4.5rem;
  height: 3px;
  background: var(--bleu);
  border-radius: 3px;
}

/* --- l'anneau de marque du héros ----------------------------------------

   Le geste le plus visible du site : un grand anneau ouvert qui chevauche
   l'image d'ouverture, le « O » du logo à l'échelle de la page.

   Il est porté par la SECTION, pas par la figure. Posé sur la figure, il
   héritait de son contexte d'empilement et se dessinait par-dessus le titre —
   mesuré : le tracé croisait la boîte du H1 à toutes les largeurs. Au niveau
   de la section, avec `isolation`, tout le contenu passe devant lui. */

.heros,
.page-tete--locale {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

/* Les anneaux n'existent qu'au-dessus de 1280 px, et collés au bord droit.
   En dessous, la colonne de texte s'élargit et le tracé traversait des lignes
   — vérifié sur les rectangles de ligne renvoyés par `Range`, pas sur la
   boîte du bloc, qui est bien plus large que les glyphes et donnait un faux
   positif à toutes les largeurs. */
@media (width >= 1280px) {
  .heros::before,
  .page-tete--locale::before,
  .heros::after,
  .page-tete--locale::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
  }

  /* le grand anneau bleu, qui entre par la droite */
  .heros::before,
  .page-tete--locale::before {
    width: min(30rem, 34vw);
    aspect-ratio: 1;
    border: 3px solid color-mix(in srgb, var(--bleu) 32%, transparent);
    inset-block-start: -8rem;
    inset-inline-end: 2%;
  }

  /* le petit anneau sable, en contrepoint bas */
  .heros::after,
  .page-tete--locale::after {
    width: min(11rem, 16vw);
    aspect-ratio: 1;
    border: 3px solid color-mix(in srgb, var(--sable) 55%, transparent);
    inset-block-end: -3rem;
    inset-inline-end: 2%;
  }
}

/* --- le titre de section porte la marque -------------------------------- */

.tete-section { position: relative; }
.tete-section .sur-titre::before {
  width: 0.78em;
  height: 0.78em;
  border-width: 2.5px;
  color: var(--accent);
}

/* --- le filet à l'anneau -------------------------------------------------
   Séparateur des blocs répétés : un filet interrompu par le « O ». */

/* --- logotype de la plateforme de rendez-vous ----------------------------

   Le logotype Doctolib est une marque déposée de Doctolib. Il est repris pour
   identifier la plateforme sur les boutons qui y renvoient réellement, ce qui
   est l'usage attendu d'un partenaire. Il est posé par `bouton()` dès que
   l'URL pointe vers doctolib.fr : impossible de l'oublier sur un nouveau
   bouton, impossible de l'afficher par erreur ailleurs. */

.doctolib {
  width: auto;
  height: 1.05em;
  flex: none;
}

.btn__plateforme {
  display: inline-flex;
  align-items: center;
  padding-inline-start: 0.62em;
  margin-inline-start: 0.1em;
  border-inline-start: 1px solid currentColor;
  opacity: 0.92;
}
.btn--doctolib .doctolib { height: 1.15em; }
.btn--petit .doctolib { height: 0.95em; }

/* Sur un bouton en ligne ou clair, le logotype garde sa couleur de marque :
   c'est le seul endroit du site où une couleur étrangère à la charte est
   admise, et c'est volontaire — une marque tierce ne se recolore pas. */
.btn--ligne.btn--doctolib .btn__plateforme,
.btn--clair.btn--doctolib .btn__plateforme {
  border-inline-start-color: var(--line-forte);
  opacity: 1;
}

/* --- barre des réseaux sociaux ------------------------------------------- */

.pied__sociaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
}
.pied__sociaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(244 241 234 / 24%);
  border-radius: 50%;
  color: #c3d2d8;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.pied__sociaux a:hover {
  border-color: #9ed3f2;
  color: #f4f1ea;
  transform: translateY(-2px);
}
.pied__sociaux .ico { width: 1.15rem; height: 1.15rem; }

.pied__plateforme {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  font-size: var(--t-micro);
  color: #9db0b7;
}
.pied__plateforme .doctolib { height: 1.5em; opacity: 0.85; }

.filet-anneau {
  position: relative;
  border-top: 1px solid var(--line);
}
.filet-anneau::before {
  content: '';
  position: absolute;
  inset-block-start: -7px;
  /* Aligné sur le bord gauche du conteneur, pas sur celui de l'écran : même
     calcul que `.conteneur`, sinon l'anneau se retrouve collé au bord. */
  inset-inline-start: max(var(--gouttiere), (100% - var(--large)) / 2);
  width: 13px;
  height: 13px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond);
}

/* --- le grand anneau en filigrane ---------------------------------------- */

.section--sombre,
.rdv-bande,
.site-pied,
.cumul__phare,
.avis__phare {
  position: relative;
  isolation: isolate;
  /* `clip` et non `hidden` : il rogne l'anneau qui dépasse sans créer de
     conteneur de défilement, donc sans casser les enfants en position
     sticky — l'image du bloc Pilates en est un. */
  overflow: clip;
}

/* Lumière rasante + anneau géant hors-cadre : c'est l'ambiance des salles,
   un mur petrol et une lampe chaude dans un angle. Opacités tenues bas pour
   ne pas déplacer les contrastes mesurés. */
.section--sombre::before,
.rdv-bande::before,
.site-pied::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 8% -20%, rgb(108 184 230 / 10%), transparent 62%),
    radial-gradient(52rem 34rem at 102% 118%, rgb(185 141 92 / 9%), transparent 60%);
}
.section--sombre::after,
.site-pied::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(42rem, 60vw);
  aspect-ratio: 1;
  border: 1px solid rgb(244 241 234 / 8%);
  border-radius: 50%;
  inset-block-start: -14%;
  inset-inline-end: -12%;
}
.rdv-bande::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(34rem, 52vw);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  inset-block-end: -46%;
  inset-inline-start: -8%;
}

/* --- la courbe reportée sur les images -----------------------------------
   Un angle très arrondi, toujours en haut à gauche pour la première image
   d'une série, en haut à droite pour la suivante : les deux courbes se font
   face comme les deux « o » du logo. */

.heros__image img,
.locale-tete__image img,
.centre__photo img,
.seance__image img,
.motif__photo img,
.pilates__image img {
  border-radius: var(--r-signature) var(--r-l) var(--r-l) var(--r-l);
}
.centre__photo:nth-of-type(2) img,
.motif:nth-child(even) .motif__photo img {
  border-radius: var(--r-l) var(--r-signature) var(--r-l) var(--r-l);
}
.prat-tete__photo img,
.fiche__photo img {
  border-radius: var(--r-signature-portrait) var(--r-m) var(--r-m) var(--r-m);
}

/* Un liseré clair posé à l'intérieur du cadre : il détache la photo du fond
   crème sans ajouter de bordure visible. */
.heros__image img,
.locale-tete__image img,
.centre__photo img,
.seance__image img,
.motif__photo img,
.prat-tete__photo img,
.fiche__photo img,
.rdv-carte__photo img,
.m-carte__photo img,
.c-carte__photo img,
.p-carte__photo img {
  box-shadow: inset 0 0 0 1px rgb(18 28 32 / 7%);
}

/* --- cartes : un trait d'accent qui se révèle au survol ------------------- */

.m-carte,
.grille-locales a,
.rdv-carte,
.p-carte {
  position: relative;
  overflow: hidden;
}
.m-carte::before,
.grille-locales a::before,
.rdv-carte::before,
.p-carte::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.m-carte:hover::before,
.grille-locales a:hover::before,
.rdv-carte:hover::before,
.p-carte:hover::before {
  transform: scaleX(1);
}

/* --- l'anneau en filigrane sur les cartes de note ------------------------- */

.cumul__phare::after,
.avis__phare::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 20rem;
  aspect-ratio: 1;
  border: 1px solid rgb(244 241 234 / 10%);
  border-radius: 50%;
  inset-block-end: -42%;
  inset-inline-end: -28%;
}

/* --- les photos de cartes respirent au survol ---------------------------- */

.m-carte__photo,
.rdv-carte__photo,
.c-carte__photo,
.p-carte__photo {
  overflow: hidden;
}
.m-carte__photo img,
.rdv-carte__photo img,
.c-carte__photo img,
.p-carte__photo img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-carte:hover .m-carte__photo img,
.rdv-carte:hover .rdv-carte__photo img,
.c-carte:hover .c-carte__photo img,
.p-carte:hover .p-carte__photo img {
  transform: scale(1.035);
}

/* --- chaleur : les bords et les ombres tirent vers le sable -------------- */

.c-carte,
.m-carte,
.rdv-carte,
.p-carte,
.avis-carte,
.carte-info,
.centre__panneau,
.formulaire,
.fiche,
.serie,
.encart,
.contact-carte {
  border-color: var(--line);
}

/* --- le lien de survol des cartes de redistribution ---------------------- */

.grille-locales a { transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.grille-locales a:hover { transform: translateY(-2px); box-shadow: var(--ombre); }

/* --- le fond crème n'est plus tout à fait plat --------------------------- */

body {
  background-image:
    radial-gradient(60rem 40rem at 100% 0%, rgb(1 84 139 / 3.5%), transparent 55%),
    radial-gradient(50rem 34rem at 0% 12%, rgb(185 141 92 / 5%), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ socle */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--txt);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--txt);
}

/* Playfair sur le display seulement : sous 28 px environ, ses déliés
   s'effacent à l'écran. h3 et h4 passent donc au sans, plus robuste. */
h1, h2 {
  font-family: var(--f-titre);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3, h4 {
  font-family: var(--f-texte);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h1 { font-size: var(--t-d1); }
h2 { font-size: var(--t-d2); }
h3 { font-size: var(--t-h); }

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

a { color: var(--accent-txt); }
a:hover { color: var(--accent); }

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

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

address { font-style: normal; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saut {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  background: var(--bleu);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-s);
  font-weight: 600;
}
.saut:focus { top: 1rem; color: #fff; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--large));
  margin-inline: auto;
}
.conteneur--etroit > * { max-width: var(--etroit); }

/* --------------------------------------------------------------- boutons */

.btn {
  --btn-fond: var(--bleu);
  --btn-txt: #fff;
  --btn-bord: var(--bleu);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.86em 1.5em;
  border: 1.5px solid var(--btn-bord);
  border-radius: var(--r-rond);
  background: var(--btn-fond);
  color: var(--btn-txt);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover {
  transform: translateY(-1px);
  color: var(--btn-txt);
}
.btn--plein:hover { --btn-fond: var(--bleu-fonce); --btn-bord: var(--bleu-fonce); }

.btn--ligne {
  --btn-fond: transparent;
  --btn-txt: var(--accent-txt);
  --btn-bord: var(--line-forte);
}
.btn--ligne:hover { --btn-bord: var(--accent); --btn-fond: color-mix(in srgb, var(--accent) 8%, transparent); }

.btn--clair {
  --btn-fond: transparent;
  --btn-txt: var(--txt);
  --btn-bord: var(--line-forte);
}
.btn--clair:hover { --btn-bord: var(--txt); }

.btn--petit { padding: 0.66em 1.15em; font-size: 0.875rem; }
.btn__ext { font-size: 0.8em; opacity: 0.75; }

.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico--fleche { width: 1em; height: 1em; }

/* --------------------------------------------------------------- en-tête */

.site-entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: 1px solid var(--line);
}

.bande {
  background: var(--petrol);
  color: #c3d2d8;
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
}
.bande p {
  width: min(100% - 2 * var(--gouttiere), var(--large));
  margin: 0 auto;
  padding: 0.5rem 0;
  text-align: center;
}

/* Sept entrées de menu, un badge et un bouton : la barre tient sur une ligne
   à 1240 px au prix de 8 px près. Les écarts sont donc serrés et le menu ne
   se replie pas — mesuré, pas estimé. */
.entete__barre {
  width: min(100% - 2 * var(--gouttiere), var(--large));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.35rem);
  padding: 0.75rem 0;
}

.marque { flex: none; line-height: 0; }
.marque img { width: clamp(140px, 16vw, 186px); height: auto; }
.marque__clair { display: none; }

.entete__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.45rem, 1vw, 1.05rem);
  margin-inline-start: auto;
  white-space: nowrap;
}
.entete__nav a {
  color: var(--txt-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.entete__nav a:hover { color: var(--txt); border-bottom-color: var(--line-forte); }
.entete__nav a[aria-current='page'] { color: var(--txt); border-bottom-color: var(--bleu); }

.entete__actions { flex: none; }

.burger {
  display: none;
  margin-inline-start: auto;
  padding: 0.6rem;
  background: none;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-s);
  cursor: pointer;
}
.burger__traits { display: grid; gap: 4px; width: 20px; }
.burger__traits i { display: block; height: 2px; background: var(--txt); border-radius: 2px; }

.menu-mobile { display: none; }

@media (width < 1080px) {
  .entete__nav, .entete__actions { display: none; }
  .burger { display: block; }
  .menu-mobile {
    display: block;
    border-top: 1px solid var(--line);
    padding: 1rem var(--gouttiere) 1.5rem;
    background: var(--creme);
  }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile nav { display: grid; gap: 0.15rem; margin-bottom: 1rem; }
  .menu-mobile nav a {
    padding: 0.7rem 0.25rem;
    text-decoration: none;
    color: var(--txt);
    font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .menu-mobile nav a[aria-current='page'] { color: var(--bleu); }
  .menu-mobile > .btn { width: 100%; justify-content: center; }
  .menu-mobile__tels { display: grid; gap: 0.15rem; margin-top: 1.25rem; }
  .menu-mobile__tels a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    text-decoration: none;
    color: var(--txt-2);
    font-size: 0.9rem;
    border-top: 1px solid var(--line);
  }
  .menu-mobile__tels b { color: var(--txt); font-variant-numeric: tabular-nums; }
}

/* ------------------------------------------------------------ fil d'Ariane */

.fil { padding: 1rem 0 0; font-size: var(--t-petit); }
.fil ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fil li + li::before { content: '/'; margin-inline-end: 0.4rem; color: var(--txt-3); }
.fil a { color: var(--txt-2); text-decoration: none; }
.fil a:hover { color: var(--accent-txt); text-decoration: underline; }
.fil span { color: var(--txt-3); }

/* ------------------------------------------------------------- sections */

.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--haut-serre { padding-top: clamp(2rem, 4vw, 3.5rem); }
.section--creme { background: var(--creme-2); }
.section--sombre {
  background: var(--petrol);
  --fond: var(--petrol);
  --fond-carte: var(--petrol-2);
  --fond-doux: #223238;
  --txt: #f4f1ea;
  --txt-2: #c3d2d8;
  --txt-3: #9db0b7;
  --line: rgb(244 241 234 / 16%);
  --line-forte: rgb(244 241 234 / 32%);
  --accent: var(--bleu-clair);
  --accent-txt: #9ed3f2;
  --etoile: #f0c469;
  color: var(--txt);
}

.tete-section { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tete-section h2 { margin-bottom: 0.35em; }
.sur-titre {
  margin: 0 0 0.75rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-txt);
}
.sur-titre--clair { color: var(--accent-txt); }
.chapo { font-size: 1.08rem; color: var(--txt-2); max-width: 42rem; }
.section__lien { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.note {
  font-size: var(--t-petit);
  color: var(--txt-3);
  margin-top: 1rem;
}
/* Une URL longue dans un <code> ne se coupe nulle part et pousse la page. */
code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.note--encadre {
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--line-forte);
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--txt-2);
}

/* --------------------------------------------------------------- héros */

.heros {
  background: var(--creme);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.heros__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (width >= 1000px) {
  .heros__grille { grid-template-columns: 1fr 0.85fr; }
}
.heros h1 { margin-bottom: 0.4em; }
.heros h1 em { font-style: italic; color: var(--bleu); }
.heros__chapo {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--txt-2);
  max-width: 34rem;
}
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.heros__preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.heros__preuves b {
  display: block;
  font-family: var(--f-titre);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--txt);
}
.heros__preuves span { font-size: var(--t-petit); color: var(--txt-3); }

.heros__image { margin: 0; position: relative; }
.heros__image img {
  width: 100%;
  border-radius: var(--r-l);
  box-shadow: var(--ombre-forte);
}
.heros__image figcaption {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  background: rgb(18 28 32 / 78%);
  color: #f4f1ea;
  font-size: var(--t-micro);
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-rond);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------- accès rapide */

.acces-rapide {
  background: var(--petrol);
  color: #f4f1ea;
  padding: 0.5rem 0;
}
.acces-rapide ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.acces-rapide li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-inline-start: 1px solid rgb(244 241 234 / 14%);
}
.acces-rapide li:first-child { border-inline-start: 0; }
.acces-rapide a { text-decoration: none; color: inherit; }
.acces-rapide__nom { display: block; font-weight: 600; font-size: 0.95rem; }
.acces-rapide__meta { display: block; font-size: var(--t-micro); color: #9db0b7; }
.acces-rapide__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-micro);
  color: #9ed3f2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.acces-rapide__tel:hover { color: #cfe9f8; }
@media (width < 700px) {
  .acces-rapide li { border-inline-start: 0; border-top: 1px solid rgb(244 241 234 / 14%); }
  .acces-rapide li:first-child { border-top: 0; }
}

/* ==================================================================== héros

   Un gabarit = un héros. Squelette commun, sept variantes qui puisent chacune
   dans ce que la page a de plus concret : les quatre salles, les quatorze
   visages, la note, la citation, l'amplitude horaire, les numéros.
   ======================================================================== */

.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2rem, 4vw, 3.25rem);
}
.hero__grille { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center; }
.hero__grille > * { min-width: 0; }
.hero__texte { max-width: 40rem; }
.hero h1 { margin-bottom: 0.35em; }
.hero__chapo {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  color: var(--txt-2);
  max-width: 36rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

/* L'anneau de marque, commun aux héros clairs. Comme celui de l'accueil, il
   n'apparaît qu'au-dessus de 1280 px : en dessous, la colonne de texte
   s'élargit et le trace traverserait des lignes. */
@media (width >= 1280px) {
  .hero--mosaique::before,
  .hero--portraits::before,
  .hero--citation::before,
  .hero--tels::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: min(26rem, 30vw);
    aspect-ratio: 1;
    border: 3px solid color-mix(in srgb, var(--bleu) 26%, transparent);
    border-radius: 50%;
    inset-block-start: -9rem;
    inset-inline-end: 3%;
    pointer-events: none;
  }
}

/* --- mosaique : le pilier des centres ------------------------------------ */

@media (width >= 1000px) {
  .hero--mosaique .hero__grille { grid-template-columns: 1fr 1.05fr; }
}
.mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.mosaique a {
  display: block;
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: #f4f1ea;
  box-shadow: var(--ombre);
}
.mosaique li:nth-child(1) a { border-start-start-radius: var(--r-signature); }
.mosaique li:nth-child(4) a { border-end-end-radius: var(--r-signature); }
.mosaique img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mosaique a:hover img { transform: scale(1.04); }

/* Cartouche plein plutôt que voile dégradé : sur un dégradé, la couleur sous
   le texte dépend de la photo et le contraste devient indécidable — le
   contrôleur ne lit que `background-color`. Ici le fond est une couleur unie,
   donc mesurable et constante quelle que soit l'image. */
.mosaique__legende {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 1rem 0.8rem;
  background: var(--petrol);
  color: #f4f1ea;
}
.mosaique__nom {
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.15;
}
.mosaique__secteur {
  font-size: var(--t-micro);
  color: #c3d2d8;
}

/* --- pastilles : le hub de l'equipe -------------------------------------- */

.hero--portraits .conteneur--etroit { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pastilles { display: flex; flex-wrap: wrap; }
.pastilles li { margin-inline-start: -1.15rem; }
.pastilles li:first-child { margin-inline-start: 0; }
.pastilles__photo {
  width: clamp(60px, 8.5vw, 104px);
  height: clamp(60px, 8.5vw, 104px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  border: 4px solid var(--fond);
  box-shadow: var(--ombre);
  transition: transform 0.24s ease;
}
.pastilles li:hover .pastilles__photo { transform: translateY(-6px); }
.pastilles__legende { margin: 1.1rem 0 0; font-size: var(--t-petit); color: var(--txt-3); }

/* --- image plein cadre : la page osteopathie ----------------------------- */

.hero--image { padding: 0; }
.hero__fond { position: absolute; inset: 0; z-index: -1; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero--image .conteneur { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Le texte est pose sur un panneau petrol OPAQUE. Un simple voile translucide
   sur la photo aurait rendu le contraste invérifiable : le controleur ne lit
   que background-color, et une image derriere du texte n'est pas mesurable. */
.hero__panneau {
  background: var(--petrol);
  color: var(--txt);
  border-radius: var(--r-l);
  border-start-start-radius: var(--r-signature);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 46rem;
  box-shadow: var(--ombre-forte);
}
.hero__panneau .ancres { margin-top: 1.6rem; }
.hero__panneau .ancres a {
  background: rgb(244 241 234 / 8%);
  border-color: rgb(244 241 234 / 24%);
}

/* --- note : la page avis ------------------------------------------------- */

.hero--note { background: var(--petrol); }
@media (width >= 900px) {
  .hero--note .hero__grille { grid-template-columns: 1.15fr 0.85fr; }
}
.hero__score {
  background: rgb(244 241 234 / 6%);
  border: 1px solid rgb(244 241 234 / 16%);
  border-radius: var(--r-l);
  border-start-end-radius: var(--r-signature);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  --etoile: #f0c469;
}
.hero__score .etoiles { font-size: 1.35rem; }
.hero__chiffre {
  font-family: var(--f-titre);
  font-size: clamp(3.25rem, 2rem + 4vw, 5rem);
  line-height: 1;
  margin: 0.1em 0 0.05em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__chiffre span { font-size: 0.32em; color: var(--txt-3); }
.hero__compte { color: var(--txt-2); margin-bottom: 1.1em; }
.hero__detail {
  display: grid;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hero__detail li {
  display: grid;
  grid-template-columns: 1fr auto 3rem;
  gap: 0.6rem;
  align-items: baseline;
  font-size: var(--t-petit);
  color: var(--txt-2);
}
.hero__detail b { font-variant-numeric: lining-nums tabular-nums; color: var(--txt); }
.hero__detail i { font-style: normal; color: var(--txt-3); text-align: right; }

/* --- citation : la page conseils ----------------------------------------- */

@media (width >= 900px) {
  .hero--citation .hero__grille { grid-template-columns: 1fr 0.9fr; }
}
.hero__citation {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fond-doux);
  border-radius: var(--r-l);
  border-start-end-radius: var(--r-signature);
  border-inline-start: 3px solid var(--bleu);
}
.hero__citation p {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
  line-height: 1.3;
  color: var(--txt);
  margin-bottom: 0.55em;
}
.hero__citation footer { font-size: var(--t-petit); color: var(--txt-3); }

/* --- horaires : la page rendez-vous -------------------------------------- */

.hero--horaires { background: var(--petrol); }
@media (width >= 900px) {
  .hero--horaires .hero__grille { grid-template-columns: 1fr 0.95fr; }
}
.hero__amplitude {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.75rem 0 0.2rem;
  font-family: var(--f-titre);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__amplitude b { font-weight: 500; }
.hero__amplitude span { color: var(--accent); }
.hero__amplitude-note { font-size: var(--t-petit); color: var(--txt-3); }
.hero__agendas { display: grid; gap: 0.55rem; }
.hero__agendas a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'nom fleche' 'lieu fleche' 'h fleche';
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.95rem 1.2rem;
  background: rgb(244 241 234 / 6%);
  border: 1px solid rgb(244 241 234 / 16%);
  border-radius: var(--r-m);
  text-decoration: none;
  color: var(--txt);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.hero__agendas a:hover {
  background: rgb(244 241 234 / 12%);
  border-color: var(--accent);
  color: var(--txt);
}
.hero__agenda-nom { grid-area: nom; font-weight: 700; }
.hero__agenda-lieu { grid-area: lieu; font-size: var(--t-micro); color: var(--txt-3); }
.hero__agenda-h {
  grid-area: h;
  font-size: var(--t-micro);
  color: var(--txt-2);
  font-variant-numeric: tabular-nums;
}
.hero__agendas .ico { grid-area: fleche; color: var(--accent); }

/* --- telephones : la page contact ---------------------------------------- */

@media (width >= 900px) {
  .hero--tels .hero__grille { grid-template-columns: 1fr 0.95fr; }
}
.hero__tels {
  display: grid;
  gap: 0.15rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  border-start-end-radius: var(--r-signature);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  box-shadow: var(--ombre);
}
.hero__tels li {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.hero__tels li:last-child { border-bottom: 0; }
.hero__tel-lieu { font-size: var(--t-micro); color: var(--txt-3); }
.hero__tel-num {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-titre);
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  color: var(--txt);
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__tel-num:hover { color: var(--accent-txt); }
.hero__tel-num .ico { color: var(--accent); width: 0.72em; height: 0.72em; }

/* --- sobre : la page juridique ------------------------------------------- */

.hero--sobre { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.hero--sobre h1 { font-size: var(--t-d2); }

/* ---------------------------------------------------------- page-tête */

.page-tete { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-tete__chapo { font-size: 1.1rem; color: var(--txt-2); }
.page-tete__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.ancres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.ancres a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-rond);
  background: var(--fond-carte);
  color: var(--txt);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.ancres a:hover { border-color: var(--accent); color: var(--accent-txt); }
.ancres span { font-size: var(--t-micro); color: var(--txt-3); }

/* ------------------------------------------------------- cartes centres */

.grille-centres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.c-carte {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.c-carte__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.c-carte__texte { padding: clamp(1.25rem, 2.5vw, 1.85rem); display: flex; flex-direction: column; }
.c-carte h3 { margin-bottom: 0.35em; }
.c-carte h3 a { color: inherit; text-decoration: none; }
.c-carte h3 a:hover { color: var(--accent-txt); }
.c-carte__accroche { color: var(--txt-2); }
.c-carte__infos {
  display: grid;
  gap: 0.6rem;
  margin: 1.15rem 0;
  padding: 1.15rem 0;
  border-block: 1px solid var(--line);
  font-size: 0.92rem;
}
.c-carte__infos > div { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.c-carte__infos dt { color: var(--txt-3); padding-top: 0.15rem; }
.c-carte__infos dd { margin: 0; color: var(--txt-2); }
.c-carte__infos a { color: var(--txt-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.c-carte__infos a:hover { color: var(--accent-txt); }
.c-carte__equipe { font-size: var(--t-petit); color: var(--txt-3); margin-bottom: 1.25rem; }
.c-carte__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }

/* --------------------------------------------------------- cartes motifs */

.grille-motifs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (width >= 620px) { .grille-motifs { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 980px) { .grille-motifs { grid-template-columns: repeat(3, 1fr); } }
.m-carte {
  display: block;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: var(--txt);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.m-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); color: var(--txt); }
.m-carte__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.m-carte__texte { padding: 1.15rem 1.25rem 1.35rem; }
.m-carte h3 { font-size: 1.2rem; margin-bottom: 0.3em; }
.m-carte p { font-size: 0.92rem; color: var(--txt-2); margin-bottom: 0.85em; }
.m-carte__voir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--accent-txt);
}

/* --------------------------------------------------------------- séance */

.seance {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (width >= 900px) {
  .seance { grid-template-columns: 1fr 0.62fr; }
}
.seance__liste { display: grid; gap: 1.75rem; counter-reset: s; }
.seance__liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'num titre' 'num texte';
  gap: 0.2rem 1.1rem;
}
.seance__num {
  grid-area: num;
  font-family: var(--f-titre);
  font-size: 1.35rem;
  color: var(--accent);
  padding-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.seance__liste h3 { grid-area: titre; font-size: 1.18rem; margin-bottom: 0.15em; }
.seance__liste p { grid-area: texte; color: var(--txt-2); margin: 0; }
.seance__image { margin: 0; }
.seance__image img { width: 100%; border-radius: var(--r-l); box-shadow: var(--ombre); }

/* ---------------------------------------------------- cartes praticiens */

.grille-praticiens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
@media (width >= 1000px) {
  .grille-praticiens--4 { grid-template-columns: repeat(4, 1fr); }
}
.p-carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.p-carte__lien { text-decoration: none; color: var(--txt); display: block; }
.p-carte__lien:hover h3 { color: var(--accent-txt); }
.p-carte__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.p-carte__texte { padding: 1rem 1.1rem 0.75rem; }
.p-carte h3 { font-size: 1.14rem; margin-bottom: 0.15em; }
.p-carte__titre { font-size: var(--t-petit); color: var(--txt-2); margin-bottom: 0.35em; }
.p-carte__lieux { font-size: var(--t-micro); color: var(--txt-3); margin-bottom: 0.6em; }
.p-carte__diplome { font-size: var(--t-petit); color: var(--txt-2); }
.p-carte__pied { margin-top: auto; padding: 0 1.1rem 1.1rem; }
.p-carte__pied .btn { width: 100%; justify-content: center; }

.jetons { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.jetons li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-txt);
}
.jetons--ligne { margin: 0; }

/* --------------------------------------------------------------- avis */

.avis__grille {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
@media (width >= 900px) {
  .avis__grille { grid-template-columns: 0.75fr 1.1fr 1fr; }
}
.avis__phare {
  background: var(--petrol);
  color: #f4f1ea;
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.etoiles {
  /* valeur de repli : la barre est vide si l'attribut style manque */
  --rempli: 0%;
  position: relative;
  display: inline-block;
  color: color-mix(in srgb, var(--etoile) 26%, transparent);
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  white-space: nowrap;
}
.etoiles i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rempli);
  overflow: hidden;
  color: var(--etoile);
  font-style: normal;
}
.avis__phare { --etoile: #f0c469; }
.avis__phare .etoiles { font-size: 1.3rem; margin-bottom: 0.6rem; }
.avis__note { font-family: var(--f-titre); font-size: 3rem; line-height: 1; margin: 0 0 0.15em; }
.avis__note b { font-weight: 500; }
.avis__compte { color: #c3d2d8; font-size: 0.95rem; margin-bottom: 0.4em; }
.avis__lieu { font-size: var(--t-petit); color: #9db0b7; margin: 0; }

.avis__citation {
  margin: 0;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avis__citation p {
  font-family: var(--f-titre);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.32;
  color: var(--txt);
}
.avis__citation footer { font-size: var(--t-petit); color: var(--txt-3); }

.avis__autres {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.avis__autres li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.avis__autres li:last-child { border-bottom: 0; }
.avis__nom { font-weight: 600; }
.avis__score { color: var(--txt-2); display: inline-flex; align-items: baseline; gap: 0.4rem; }
.avis__score .etoiles { font-size: 0.82rem; }

/* ---------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 0.5rem; }
.faq details {
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  color: var(--txt);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
  flex: none;
  width: 14px; height: 14px;
  position: relative;
}
.faq summary i::before,
.faq summary i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--accent-txt); }
.faq__rep { padding: 0 1.25rem 1.25rem; color: var(--txt-2); max-width: 44rem; }

/* ---------------------------------------------------------- bande RDV */

.rdv-bande {
  background: var(--bleu);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.rdv-bande .conteneur {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (width >= 940px) {
  .rdv-bande .conteneur { grid-template-columns: 0.9fr 1.1fr; }
}
.rdv-bande h2 { color: #fff; margin-bottom: 0.3em; }
.rdv-bande__texte p { color: rgb(255 255 255 / 82%); margin: 0; max-width: 30rem; }
.rdv-bande__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
/* La bande porte toujours quatre entrées : en auto-fit elles tombaient en
   3 + 1, avec un trou sur la moitié de la seconde ligne. 2 × 2 remplit. */
@media (width >= 520px) { .rdv-bande__liste { grid-template-columns: repeat(2, 1fr); } }
.rdv-bande__liste a {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: var(--r-m);
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: background-color 0.16s ease;
}
.rdv-bande__liste a:hover { background: rgb(255 255 255 / 20%); color: #fff; }
.rdv-bande__nom { font-weight: 700; }
.rdv-bande__lieu { font-size: var(--t-micro); color: rgb(255 255 255 / 78%); }
.rdv-bande__liste .ico { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1rem; opacity: 0.7; }

/* -------------------------------------------------------- page centres */

.centre { padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.centre:first-of-type { border-top: 0; }
.centre:first-of-type::before { display: none; }

.centre__tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.centre__ident { flex: 1 1 22rem; }
.centre__tete h2 { margin-bottom: 0.2em; }
.centre__accroche { color: var(--txt-2); max-width: 34rem; margin: 0; }

/* Bande de deux photos au format natif des sources (3:2). L'essai précédent
   étirait une seule photo sur la hauteur du panneau : elle finissait recadrée
   en portrait 0,72 depuis un original en 1,50, et ne montrait plus que du mur.
   Mesuré, pas supposé. */
.centre__galerie { display: grid; gap: clamp(0.75rem, 1.5vw, 1.15rem); }
@media (width >= 780px) { .centre__galerie { grid-template-columns: 1fr 1fr; } }
/* Un centre qui n'a qu'une vue distincte l'affiche en pleine largeur plutôt
   que de doubler le même cliché à deux cadrages. */
@media (width >= 780px) { .centre__galerie--solo { grid-template-columns: 1fr; } }
.centre__galerie--solo .centre__photo img { aspect-ratio: 21 / 9; }
.centre__photo { margin: 0; }
.centre__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-l);
}

/* Trois colonnes séparées par des filets plutôt qu'une carte unique : des
   hauteurs inégales se lisent alors comme des colonnes de journal, pas comme
   une carte cassée. */
.centre__bandeau {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
@media (width >= 900px) {
  .centre__bandeau { grid-template-columns: 1fr 1.15fr 1fr; }
  .centre__col + .centre__col {
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
    border-inline-start: 1px solid var(--line);
  }
}
.centre__col { min-width: 0; display: flex; flex-direction: column; }
.centre__col h3 {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: 1em;
}
.centre__pitch { font-size: 0.93rem; color: var(--txt-2); }

/* La colonne d'action se distingue du reste : c'est elle qui porte la
   redistribution vers la page du centre. */
.centre__col--actions {
  padding: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--fond-doux);
  border-radius: var(--r-m);
}
@media (width >= 900px) {
  /* La carte se dimensionne à son contenu au lieu de s'étirer sur la hauteur
     de la colonne la plus haute : sans cela, un centre à cinq praticiens
     creusait 120 px de vide sous le bouton. */
  .centre__col--actions { border-inline-start: 0; align-self: start; }
}

.infos { display: grid; gap: 1rem; }
.infos > div { display: grid; gap: 0.2rem; }
.infos dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.infos dd { margin: 0; color: var(--txt); }
.infos dd a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line-forte); }
.infos dd a:hover { color: var(--accent-txt); border-bottom-color: var(--accent); }
.infos__note { font-size: var(--t-petit); color: var(--txt-3); }

/* Liste compacte plutôt que des cartes : le pilier annonce l'équipe, la page
   du centre la présente. Trois cartes dans une grille de cinq colonnes
   laissaient deux trous béants. */
.equipe-mini { display: grid; gap: 0.15rem; }
.equipe-mini a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.35rem;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--txt);
}
.equipe-mini a:hover { background: var(--fond-doux); color: var(--txt); }
.equipe-mini a:hover .equipe-mini__nom { color: var(--accent-txt); }
.equipe-mini__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}
.equipe-mini__ident { display: grid; min-width: 0; }
.equipe-mini__nom { font-weight: 600; font-size: 0.95rem; }
.equipe-mini__tag {
  font-size: var(--t-micro);
  color: var(--txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equipe-mini .ico { color: var(--txt-3); }
.equipe-mini a:hover .ico { color: var(--accent); }

.centre__actions { display: grid; gap: 0.6rem; margin-top: 1.35rem; }
.centre__actions .btn { width: 100%; justify-content: center; }

/* Le bouton de redistribution : c'est lui qui envoie vers la page du centre,
   pas un lien discret posé sur le H2. */
.btn--large {
  padding: 1em 1.5em;
  font-size: 1.02rem;
  gap: 0.65em;
}

/* ------------------------------------------------- accès et plan (pages locales)

   Ces deux composants vivaient dans le bloc « page centres ». Le pilier ne
   les utilise plus, mais les pages locales et la page contact, si : ils sont
   donc remontés ici, dans leur propre section. */

.acces { display: grid; gap: 0.65rem; margin-bottom: 1.5rem; }
.acces li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; font-size: 0.93rem; }
.acces b { color: var(--txt); }
.acces span { color: var(--txt-2); }

.carte {
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--fond-doux);
  /* --ratio-carte est toujours posé en ligne par carte() : le ratio du cadre
     et celui du calcul de la boîte englobante ne peuvent pas diverger. */
  aspect-ratio: var(--ratio-carte);
}
.carte iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------- page équipe */

.filtres {
  position: sticky;
  top: 5.4rem;
  z-index: 40;
  background: var(--creme);
  border-block: 1px solid var(--line);
  padding: 0.9rem 0;
}
.filtres .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filtres__label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.filtres__boutons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.puce {
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-rond);
  background: var(--blanc);
  color: var(--txt-2);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.puce:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.puce.est-actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.filtres__compte { margin: 0 0 0 auto; font-size: var(--t-petit); color: var(--txt-3); }

.fiches { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.fiche {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--ombre);
  scroll-margin-top: 9rem;
}
@media (width >= 760px) {
  .fiche { grid-template-columns: 280px 1fr; }
}
.fiche__photo { margin: 0; }
.fiche__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-m);
}
.fiche h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.2em; }
.fiche__role { font-weight: 600; color: var(--accent-txt); margin-bottom: 0.5em; }
.fiche__diplome { color: var(--txt-2); margin-bottom: 1.1em; }
.fiche__parcours { display: grid; gap: 0.55rem; margin-bottom: 1.4rem; }
.fiche__parcours li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  font-size: 0.94rem;
  color: var(--txt-2);
}
.fiche__parcours li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--accent);
}
.fiche__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem 0;
  margin-bottom: 1.25rem;
  border-block: 1px solid var(--line);
  font-size: var(--t-petit);
}
.fiche__lieux { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--txt-2); }
.fiche__lieux--vide { color: var(--txt-3); font-style: italic; }
.fiche__note { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--txt-2); }
.fiches__vide { text-align: center; padding: 3rem 0; color: var(--txt-3); }
.fiches__item[hidden] { display: none; }

/* --------------------------------------------------- page ostéopathie */

.motifs { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.motif {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  scroll-margin-top: 7rem;
}
@media (width >= 900px) {
  .motif { grid-template-columns: 0.85fr 1fr; }
  .motif:nth-child(even) .motif__photo { order: 2; }
}
.motif__photo { margin: 0; }
.motif__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--ombre); }
.motif h2 { font-size: var(--t-d3); }
.motif__resume { color: var(--txt-2); font-size: 1.05rem; }
.motif__stitre {
  font-family: var(--f-texte);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin: 1.5rem 0 0.7rem;
}

.liste-cochee { display: grid; gap: 0.5rem; }
.liste-cochee li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--txt-2);
}
.liste-cochee li::before {
  width: 1.05em; height: 1.05em;
  margin-top: 0.28em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
  content: '¹3';
  display: grid;
  place-items: center;
  font-size: 0.66em;
  line-height: 1;
  color: var(--accent-txt);
}
.liste-cochee--alerte li::before {
  content: '1';
  background: color-mix(in srgb, #d9673a 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9673a 48%, transparent);
  color: #f0b49a;
  font-weight: 700;
}

.cartes-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.carte-info {
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.carte-info h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  margin-bottom: 0.6em;
}
.carte-info h3 .ico { color: var(--accent); }
.carte-info p { font-size: 0.94rem; color: var(--txt-2); }
.carte-info__lien { margin-top: 1rem; }

/* --------------------------------------------------- page conseils */

.citation-bande {
  background: var(--fond-doux);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-block: 1px solid var(--line);
}
.citation-bande blockquote { margin: 0; }
.citation-bande p {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.3;
  color: var(--txt);
  margin-bottom: 0.6em;
}
.citation-bande footer { font-size: var(--t-petit); color: var(--txt-3); }

.programme {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (width >= 900px) {
  .programme { grid-template-columns: 1.4fr 1fr; }
}
.programme__jours { display: grid; gap: 0.75rem; }
.programme__jours li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.programme__num {
  font-family: var(--f-texte);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-txt);
}
.programme__jours p { margin: 0; font-size: 0.94rem; color: var(--txt-2); }
.programme__aside {
  background: var(--fond-doux);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}
.programme__aside h3 { font-size: 1.15rem; }
.programme__aside p { font-size: 0.94rem; color: var(--txt-2); }
.programme__aside .btn { margin-top: 1rem; }

.series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.serie {
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  scroll-margin-top: 7rem;
}
.serie--large { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.serie__tete h2 { font-size: var(--t-d3); margin-bottom: 0.35em; }
.serie__tete p { color: var(--txt-2); }
.serie__exos { display: grid; gap: 1.1rem; margin-top: 1.5rem; counter-reset: e; }
.serie__exos li {
  padding-inline-start: 1.15rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.serie__exos h3 { font-size: 1.08rem; margin-bottom: 0.25em; }
.serie__exos p { font-size: 0.93rem; color: var(--txt-2); margin: 0; }
.serie__long { color: var(--txt-2); max-width: 46rem; margin: 0; }

.pilates {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
@media (width >= 900px) {
  .pilates { grid-template-columns: 1fr 0.5fr; }
}
.pilates__bloc { margin-bottom: 1.75rem; }
.pilates__bloc h3 { font-size: 1.2rem; margin-bottom: 0.45em; }
.pilates__bloc p { color: var(--txt-2); }
.pilates__contre h3 { font-size: 1.2rem; margin-bottom: 0.6em; }
.pilates__image { margin: 0; position: sticky; top: 7rem; }
.pilates__image img { width: 100%; border-radius: var(--r-l); }

/* ------------------------------------------------- page rendez-vous */

.grille-rdv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.rdv-carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.rdv-carte__photo { margin: 0; }
.rdv-carte__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rdv-carte__texte { padding: 1.1rem 1.25rem 0.75rem; flex: 1; }
.rdv-carte h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.rdv-carte address { font-size: 0.9rem; color: var(--txt-2); margin-bottom: 0.6rem; }
.rdv-carte__h, .rdv-carte__e {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-petit);
  color: var(--txt-3);
  margin-bottom: 0.35em;
}
.rdv-carte__actions { padding: 0 1.25rem 1.25rem; display: grid; gap: 0.6rem; justify-items: start; }
.rdv-carte__actions .btn { width: 100%; justify-content: center; }
.rdv-carte__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-petit);
  color: var(--txt-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.rdv-carte__tel:hover { color: var(--accent-txt); }

.liste-rdv { display: grid; gap: 0.5rem; }
/* `> li` et non `li` : la carte contient une liste de jetons, et un sélecteur
   descendant transformerait chaque jeton en carte à son tour. */
.liste-rdv > li {
  display: grid;
  gap: 0.5rem 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
@media (width >= 860px) {
  .liste-rdv > li { grid-template-columns: 1fr 9rem minmax(0, 1fr) auto; }
}
.liste-rdv__ident { display: grid; }
.liste-rdv__nom { font-weight: 600; }
.liste-rdv__titre { font-size: var(--t-micro); color: var(--txt-3); }
.liste-rdv__lieux { font-size: var(--t-petit); color: var(--txt-2); }

/* ------------------------------------------------------ page contact */

.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.contact-carte {
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.contact-carte h3 { font-size: 1.2rem; margin-bottom: 0.5em; }
.contact-carte__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--accent-txt);
  text-decoration: none;
  margin-bottom: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.contact-carte address { font-size: 0.92rem; color: var(--txt-2); margin-bottom: 0.6rem; }
.contact-carte__h {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-petit);
  color: var(--txt-3);
}
.contact-carte__cta { margin: 1rem 0 0; }

.formulaire-zone {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
@media (width >= 900px) {
  .formulaire-zone { grid-template-columns: 1fr 1.05fr; }
}
.formulaire {
  display: grid;
  gap: 1rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  box-shadow: var(--ombre);
}
.champ { display: grid; gap: 0.35rem; }
.champ-duo { display: grid; gap: 1rem; }
@media (width >= 560px) { .champ-duo { grid-template-columns: 1fr 1fr; } }
.champ label { font-size: var(--t-petit); font-weight: 600; color: var(--txt-2); }
.champ__opt { font-weight: 400; color: var(--txt-3); }
.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-s);
  background: var(--fond);
  color: var(--txt);
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.champ input[aria-invalid='true'],
.champ textarea[aria-invalid='true'] { border-color: #b3402a; }
.champ-case { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--t-petit); color: var(--txt-2); }
.champ-case input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--bleu); }
.formulaire .btn { justify-content: center; }
.formulaire__retour {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--bleu) 10%, transparent);
  color: var(--accent-txt);
  font-size: var(--t-petit);
  font-weight: 600;
}
.formulaire__retour[hidden] { display: none; }

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.carte-bloc { margin: 0; }
.carte-bloc figcaption { display: grid; gap: 0.15rem; margin-top: 0.75rem; font-size: var(--t-petit); }
.carte-bloc figcaption span { color: var(--txt-2); }
.carte-bloc figcaption a { color: var(--accent-txt); }

/* ---------------------------------------------------------- texte long */

.texte-long h2 { font-size: var(--t-d3); margin-top: 2.5rem; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p, .texte-long li { color: var(--txt-2); }
.texte-long ul { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.texte-long ul li { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; }
.texte-long ul li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.65em;
  border-radius: 50%;
  background: var(--accent);
}
.texte-long b { color: var(--txt); }

/* ------------------------------------------------------------- pied */

.site-pied {
  background: var(--petrol);
  color: #f4f1ea;
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  --line: rgb(244 241 234 / 16%);
}
.site-pied > * { width: min(100% - 2 * var(--gouttiere), var(--large)); margin-inline: auto; }
.pied__haut {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (width >= 900px) {
  .pied__haut { grid-template-columns: 0.72fr 2fr; }
}
/* ` > img` : sans le combinateur enfant, cette règle attrapait aussi le
   logotype Doctolib place plus bas dans le meme bloc et l ecrasait a 180 px
   de large — mesure a 7,98 de ratio pour une source a 4,07. */
.pied__marque > img { width: 180px; margin-bottom: 1.25rem; }
.pied__marque p { color: #c3d2d8; font-size: 0.94rem; max-width: 24rem; }
.pied__sociaux { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.pied__sociaux a { color: #9ed3f2; font-size: var(--t-petit); text-decoration: none; border-bottom: 1px solid rgb(158 211 242 / 40%); }
.pied__sociaux a:hover { color: #cfe9f8; }

.pied__centres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (width >= 560px) { .pied__centres { grid-template-columns: repeat(2, 1fr); } }
/* Quatre centres sur une ligne : en auto-fit ils passaient à 3 + 1 et
   creusaient une demi-ligne, plus tout le flanc droit de la colonne marque. */
@media (width >= 1000px) { .pied__centres { grid-template-columns: repeat(4, 1fr); } }
.pied__centre h3 { font-size: 1.05rem; color: #f4f1ea; margin-bottom: 0.1em; }
.pied__centre h3 a { color: inherit; text-decoration: none; }
.pied__centre h3 a:hover { color: #9ed3f2; }
.pied__secteur { font-size: var(--t-micro); color: #9db0b7; margin-bottom: 0.6em; }
.pied__centre address { font-size: var(--t-petit); color: #c3d2d8; margin-bottom: 0.5rem; }
.pied__tel {
  display: flex;
  font-size: var(--t-petit);
  color: #9ed3f2;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pied__tel:hover { color: #cfe9f8; }

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.pied__liens a { font-size: var(--t-petit); color: #c3d2d8; text-decoration: none; }
.pied__liens a:hover { color: #f4f1ea; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: #9db0b7;
  margin: 0;
}

/* ------------------------------------------------------------- badges avis */

/* Rendu HTML seul, jamais en JSON-LD : le balisage Review/AggregateRating
   auto-décerné est interdit par Google, quelle que soit l'origine des avis. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-rond);
  background: var(--fond-carte);
  color: var(--txt);
  text-decoration: none;
  font-size: var(--t-petit);
  line-height: 1.2;
  white-space: nowrap;
}
.badge:hover { border-color: var(--accent); color: var(--txt); }
.badge .etoiles { font-size: 0.82rem; }
.badge b { font-weight: 700; font-variant-numeric: tabular-nums; }
.badge span { color: var(--txt-3); }

.badge--entete { flex: none; }
.badge--mobile { width: 100%; justify-content: center; margin-bottom: 0.75rem; }
.badge--pied {
  margin-top: 0.5rem;
  background: transparent;
  border-color: rgb(244 241 234 / 26%);
  color: #f4f1ea;
}
.badge--pied:hover { border-color: #9ed3f2; color: #f4f1ea; }
.badge--pied span { color: #9db0b7; }
.badge--encart { width: 100%; justify-content: center; padding: 0.7rem 1rem; }
/* Le `nowrap` du badge est voulu en ligne, mais dans une colonne de grille il
   impose sa largeur min-content à toute la colonne : en 390 px, la fiche
   praticien débordait de 13 px à cause de lui. */
.badge--encart { white-space: normal; flex-wrap: wrap; }
.badge--gros { padding: 0.6rem 1.1rem; font-size: 1rem; }
.badge--gros .etoiles { font-size: 1rem; }
.badge--centre { margin-top: 1.5rem; }
.page-tete__badge { margin-top: 1.75rem; }

@media (width < 1240px) { .badge--entete { display: none; } }

/* bandeau de note sur une page locale */
.bandeau-avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.35rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.bandeau-avis__note { flex: none; }
.bandeau-avis__note .etoiles { font-size: 1.05rem; }
.bandeau-avis__chiffre {
  font-family: var(--f-titre);
  font-size: 2rem;
  line-height: 1;
  margin: 0.2rem 0 0.1rem;
}
.bandeau-avis__chiffre b { font-weight: 500; }
.bandeau-avis__chiffre span { font-size: 1rem; color: var(--txt-3); }
.bandeau-avis__compte { margin: 0; font-size: var(--t-petit); color: var(--txt-2); }
.bandeau-avis__texte { flex: 1 1 16rem; }
.bandeau-avis__fiche { font-size: var(--t-petit); color: var(--txt-2); margin-bottom: 0.4em; }
.bandeau-avis__bis { font-size: var(--t-micro); color: var(--txt-3); margin-bottom: 0.5em; }
.bandeau-avis__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--accent-txt);
  text-decoration: none;
}

/* cartes d'avis */
.mur-avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.mur-avis--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
/* Trois avis, trois colonnes : en auto-fit dans le conteneur étroit ils
   tombaient en 2 + 1, avec une demi-ligne vide. */
.mur-avis--trois { grid-template-columns: 1fr; }
@media (width >= 640px) { .mur-avis--trois { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 980px) { .mur-avis--trois { grid-template-columns: repeat(3, 1fr); } }
.avis-carte {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--ombre);
}
.avis-carte[hidden] { display: none; }
.avis-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.avis-carte__quand { font-size: var(--t-micro); color: var(--txt-3); }
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0; color: var(--txt); font-size: 0.96rem; }
.avis-carte__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-petit);
}
.avis-carte__auteur { font-weight: 600; }
.avis-carte__meta { color: var(--txt-3); }
.avis-carte__meta a { color: var(--txt-2); }

.extrait {
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  background: var(--fond-doux);
  border-radius: var(--r-m);
}
.extrait p {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.35;
  margin: 0.4em 0 0.5em;
}
.extrait footer { font-size: var(--t-petit); color: var(--txt-3); }

/* page avis : cumul */
.cumul { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
@media (width >= 860px) { .cumul { grid-template-columns: 0.62fr 1fr; } }
.cumul__phare {
  background: var(--petrol);
  color: #f4f1ea;
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  --etoile: #f0c469;
}
.cumul__phare .etoiles { font-size: 1.35rem; }
.cumul__note { font-family: var(--f-titre); font-size: 3.25rem; line-height: 1; margin: 0.15em 0 0.1em; }
.cumul__note b { font-weight: 500; }
.cumul__note span { font-size: 1.25rem; color: #c3d2d8; }
.cumul__compte { color: #c3d2d8; margin-bottom: 0.3em; }
.cumul__source { font-size: var(--t-petit); color: #9db0b7; margin: 0; }
.cumul__centres {
  display: grid;
  align-content: start;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1rem, 2vw, 1.5rem);
}
.cumul__centres > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 8rem;
}
.cumul__centres > li:last-child { border-bottom: 0; }
.cumul__ident { display: grid; }
.cumul__nom { font-weight: 600; color: var(--txt); text-decoration: none; }
.cumul__nom:hover { color: var(--accent-txt); }
.cumul__secteur { font-size: var(--t-micro); color: var(--txt-3); }
.cumul__score { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.92rem; }
.cumul__score .etoiles { font-size: 0.82rem; }
.cumul__score span { color: var(--txt-3); }

.liste-notes { display: grid; gap: 0.5rem; }
.liste-notes > li {
  display: grid;
  gap: 0.35rem 1.25rem;
  align-items: center;
  padding: 0.95rem 1.25rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
@media (width >= 800px) { .liste-notes > li { grid-template-columns: 1fr 1.3fr auto; } }
.liste-notes__nom { font-weight: 600; color: var(--txt); text-decoration: none; }
.liste-notes__nom:hover { color: var(--accent-txt); }
.liste-notes__fiche { font-size: var(--t-petit); color: var(--txt-3); }
.liste-notes__score { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.92rem; }
.liste-notes__score .etoiles { font-size: 0.82rem; }
.liste-notes__score span { color: var(--txt-3); }

.filtres--plat { position: static; background: transparent; border: 0; padding: 0 0 1.5rem; }
.filtres--plat .conteneur { width: 100%; }

/* --------------------------------------------------------- pages locales */

/* `padding-bottom: 0` collait la carte d'avis contre la bande sombre qui
   suit. La tête de page reprend donc une respiration en bas. */
.page-tete--locale { padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.locale-tete { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center; }
@media (width >= 1000px) { .locale-tete { grid-template-columns: 1fr 0.78fr; } }
.locale-tete__image { margin: 0; }
.locale-tete__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--ombre-forte); }

.zone { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (width >= 640px) { .zone { grid-template-columns: repeat(2, 1fr); } }
/* Trois colonnes de texte puis le plan en pleine largeur : en deux colonnes,
   la colonne de gauche s'arrêtait 200 px avant la carte d'en face. */
@media (width >= 1000px) { .zone { grid-template-columns: repeat(3, 1fr); } }
.zone__col { min-width: 0; }
.zone h3 { font-size: 1.15rem; margin-bottom: 0.7em; }
.zone__plan { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.zone__plan .note { margin-top: 0.75rem; }
.zone__limitrophes { display: grid; gap: 0.7rem; }
.zone__limitrophes li { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; font-size: 0.93rem; }
.zone__limitrophes b { color: var(--txt); }
.zone__limitrophes span { color: var(--txt-2); }

.jetons--gros li { font-size: 0.85rem; padding: 0.35rem 0.85rem; }

.grille-locales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}
.grille-locales a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 1.25rem 1.35rem;
  background: var(--fond-carte);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-decoration: none;
  color: var(--txt);
}
.grille-locales a:hover { border-color: var(--accent); color: var(--txt); }
.grille-locales__nom { font-weight: 700; }
.grille-locales__meta { font-size: var(--t-micro); color: var(--txt-3); }
.grille-locales__quartiers {
  font-size: var(--t-micro);
  color: var(--txt-3);
  margin-top: 0.15rem;
}
.grille-locales__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.grille-locales__note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-micro);
  color: var(--txt-2);
  font-weight: 600;
}
.grille-locales__note .etoiles { font-size: 0.75rem; }
.grille-locales__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-petit);
  font-weight: 700;
  color: var(--accent-txt);
}
.grille-locales a:hover .grille-locales__cta { color: var(--accent); }
.grille-locales--pilier { margin-top: clamp(1.5rem, 3vw, 2.25rem); }


.encart-suivi {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--fond-doux);
  border-radius: var(--r-m);
}
.encart-suivi h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; margin-bottom: 0.4em; }
.encart-suivi h3 .ico { color: var(--accent); }
.encart-suivi p { font-size: 0.94rem; color: var(--txt-2); margin: 0; }

/* ------------------------------------------------------ fiches praticien */

.prat-tete { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center; }
@media (width >= 860px) { .prat-tete { grid-template-columns: 340px 1fr; } }
.prat-tete__photo { margin: 0; }
.prat-tete__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-l);
  box-shadow: var(--ombre-forte);
}
.prat-tete__role { font-weight: 600; color: var(--accent-txt); margin-bottom: 0.5em; }
.prat-tete .jetons { margin: 1.25rem 0; }
.prat-tete__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  padding: 0.95rem 0;
  margin-bottom: 1.5rem;
  border-block: 1px solid var(--line);
  font-size: var(--t-petit);
}
.prat-tete__lieux { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--txt-2); }
.prat-tete__note { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--txt-2); }
.prat-tete__note .etoiles { font-size: 0.9rem; }

.prat-corps { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
/* `min-width: 0` : sans lui, un enfant de grille ne descend jamais sous la
   largeur min-content de son contenu le plus large, et fait déborder la page
   entière au lieu de se comprimer. */
.prat-corps > * { min-width: 0; }
@media (width >= 900px) { .prat-corps { grid-template-columns: 1fr 20rem; } }
.fiche__parcours--long li { font-size: 1rem; }
.prat-corps__cote { display: grid; gap: 1rem; position: sticky; top: 7.5rem; }
.encart {
  padding: 1.25rem 1.4rem;
  background: var(--fond-doux);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.encart h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.08rem; margin-bottom: 0.5em; }
.encart h3 .ico { color: var(--accent); }
.encart p { font-size: 0.92rem; color: var(--txt-2); }
.encart .btn { margin-top: 0.85rem; width: 100%; justify-content: center; }
.encart__lieux { display: grid; gap: 0.9rem; }
.encart__lieux li { display: grid; gap: 0.15rem; font-size: var(--t-petit); }
.encart__lieux > li > a { font-weight: 600; color: var(--txt); text-decoration: none; }
.encart__lieux > li > a:hover { color: var(--accent-txt); }
.encart__lieux address { color: var(--txt-2); }
.encart__tel { color: var(--accent-txt); text-decoration: none; font-variant-numeric: tabular-nums; }

.fiche__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --------------------------------------------------- pied : bloc local */

.pied__local { padding: 1.5rem 0 0.5rem; border-top: 1px solid var(--line); }
.pied__local h3 { font-size: 0.95rem; color: #f4f1ea; margin-bottom: 0.75em; }
.pied__local ul { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.pied__local a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgb(244 241 234 / 22%);
  border-radius: var(--r-rond);
  font-size: var(--t-petit);
  color: #c3d2d8;
  text-decoration: none;
}
.pied__local a:hover { border-color: #9ed3f2; color: #f4f1ea; }

/* --------------------------------------------------- cibles tactiles */

/* WCAG 2.2 — 2.5.8 : une cible autonome fait au moins 24 px de haut.
   Les liens de téléphone, de réseaux et de pied de page passaient sous
   la barre (17 à 20 px) une fois mesurés au rendu réel. */
/* Sur un élément inline, `padding-block` agrandit la zone cliquable sans
   déplacer la ligne : c'est ce qui remonte les liens de titre et de
   téléphone au-dessus de 24 px sans casser le rythme vertical. */
.prat-tete__lieux a,
.c-carte h3 a,
.pied__centre h3 a,
.c-carte__infos dd a,
.infos dd a,
.fiche__lieux a,
.carte-bloc figcaption a,
.avis__autres a {
  padding-block: 4px;
}

.champ-case input { width: 24px; height: 24px; margin-top: 0; }

.acces-rapide__tel,
.pied__tel,
.pied__sociaux a,
.pied__liens a,
.contact-carte__tel,
.rdv-carte__tel,
.centre__tel,
.fil a,
.fil span,
.carte-bloc figcaption a,
.bandeau-avis__lien,
.cumul__nom,
.liste-notes__nom,
.avis-carte__meta a,
.encart__lieux > li > a,
.encart__tel,
.zone__limitrophes a,
.m-carte__voir {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* -------------------------------------------------------- préférences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-entete, .rdv-bande, .filtres, .carte, .saut { display: none; }
  body { background: #fff; color: #000; }
}