@import url("fonts.css");

/* =========================================================================
   PAVILLON GAÏA — Feuille de style
   Périnatalité · Parentalité · Santé de la femme — Crémieu (38)
   Lisibilité renforcée : corps 18 px, interlignage 1.7, cibles ≥ 48 px.
   ========================================================================= */

/* ------------------------------------------------------------------ Socle */
:root {
  /* Palette relevée directement dans le logo : les feuilles à l'aquarelle
     donnent la pêche et les verts, le soleil donne le jaune, et le lettrage
     donne le vert profond qui porte les titres. */
  --vert:        #2E7D3A;  /* vert des feuilles — boutons, liens · 4,8:1 */
  --vert-fonce:  #0F4A16;  /* vert du lettrage — titres, fonds sombres · 9,8:1 */
  --vert-clair:  #A1D17F;  /* vert tendre du logo */
  --vert-pomme:  #C1DA70;  /* vert anis du logo */
  --rose:        #FFC09F;  /* pêche — teinte dominante du logo */
  --rose-pale:   #FFD9C4;  /* pêche pâle */
  --peche-vif:   #FF9E6E;  /* pêche soutenue — accents */
  --jaune:       #FFCF51;  /* le soleil du logo */
  --creme:       #FDF7EC;  /* fond principal, réchauffé */

  /* Déclinaisons de travail */
  --creme-2:     #F7EEDD;
  --creme-3:     #EBDDC6;
  --blanc:       #FFFDF8;
  --rose-voile:  #FFEDE3;
  --vert-voile:  #EAF3DC;

  /* Texte — contrastes recalculés sur le nouveau fond crème */
  --encre:       #22301F;  /* corps · 13,0:1 */
  --encre-2:     #3F5140;  /* secondaire · 8,0:1 */
  --encre-3:     #5C6E59;  /* mentions · 5,1:1 */
  --rose-texte:  #B34A1F;  /* pêche assombrie pour le texte · 5,0:1 */
  --jaune-profond: #A97400; /* jaune assombri pour bordures et icônes · 3,8:1 */

  /* Typographies
     La charte prescrit Recoleta (titres) et Söhne (textes), deux polices
     commerciales. Substituts libres retenus, de dessin très proche :
     Fraunces pour la serif douce, Inter pour la grotesque. Caveat est
     la police manuscrite de la charte, disponible telle quelle. */
  --titre:  "Fraunces", "Recoleta", "Iowan Old Style", Georgia, serif;
  --corps:  "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --plume:  "Caveat", "Bradley Hand", cursive;

  /* Rythme */
  --pas:     1rem;
  --gouttiere: clamp(1.25rem, 4vw, 3.25rem);
  --large:   1280px;
  --moyen:   1080px;
  --etroit:  760px;

  /* Traitement photo prescrit par la charte */
  --photo-bord:   1px solid var(--rose);
  --photo-rayon:  24px;
  --photo-ombre:  0 10px 30px rgba(53, 65, 54, .05);

  --rayon:    24px;
  --rayon-s:  14px;
  --rayon-xl: 34px;

  --ombre-1: 0 2px 10px rgba(53, 65, 54, .05);
  --ombre-2: 0 10px 30px rgba(53, 65, 54, .08);
  --ombre-3: 0 26px 64px rgba(53, 65, 54, .12);

  --transi:  .35s cubic-bezier(.22, 1, .36, 1);
  --transi-l: .8s cubic-bezier(.22, 1, .36, 1);

  --hauteur-entete: 76px;
}

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

html {
  font-size: 16.5px;                /* assez lisible, assez compact pour tenir dans l'écran */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 640px) { html { font-size: 16px; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.05rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--vert-voile); color: var(--vert); }

:focus-visible {
  outline: 3px solid var(--rose-texte);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--vert);
  color: var(--blanc);
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--rayon-s) 0;
  font-weight: 700;
}
.saut-contenu:focus { left: 0; }

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

/* ------------------------------------------------------------ Typographie */
h1, h2, h3, h4, h5 {
  font-family: var(--titre);
  color: var(--vert);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.5vw, 2.95rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 2.7vw, 2.25rem); font-weight: 500; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-family: var(--corps); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.plume {
  font-family: var(--plume);
  font-weight: 400;
  color: var(--rose-texte);
  letter-spacing: .01em;
  /* la cursive a un œil plus petit : on compense */
  font-size: 1.16em;
  line-height: 1.35;
}

.sur-titre {
  display: block;
  font-family: var(--corps);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 1.4rem;
}
.sur-titre--clair { color: var(--vert-voile); }

.chapeau {
  font-size: clamp(1.01rem, 1.2vw, 1.13rem);
  line-height: 1.6;
  color: var(--encre-2);
}

.mesure    { max-width: 68ch; }
.mesure--c { max-width: 62ch; margin-inline: auto; }

strong, b { font-weight: 700; color: var(--vert); }
em { font-style: italic; }

/* Lien courant dans le corps de texte */
/* Un bouton placé dans du contenu riche reste un bouton : sans cette
   exclusion il héritait du corail souligné des liens de texte. */
.contenu-riche a:not([class]),
.contenu-riche a.lien-texte,
.lien-texte {
  color: var(--rose-texte);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color var(--transi);
}
.contenu-riche a:not([class]):hover, .lien-texte:hover { color: var(--vert); }

/* Longueur de ligne : au-delà d'une soixantaine de signes l'œil perd la ligne
   suivante. Sans effet dans les colonnes étroites, qui sont déjà en dessous. */
.contenu-riche > p,
.contenu-riche > ul,
.contenu-riche > ol,
.contenu-riche > div > p,
.contenu-riche > div > ul { max-width: 68ch; }

/* --------------------------------------------------------------- Gabarits */
.enveloppe { width: min(100% - 2 * var(--gouttiere), var(--large)); margin-inline: auto; }
.enveloppe--moyen  { width: min(100% - 2 * var(--gouttiere), var(--moyen)); margin-inline: auto; }
.enveloppe--etroit { width: min(100% - 2 * var(--gouttiere), var(--etroit)); margin-inline: auto; }

.section {
  padding-block: clamp(4.2rem, 8svh, 8rem);
  position: relative;
  /* « clip » et non « hidden » : les formes decoratives debordantes sont
     rognees sans creer de conteneur de defilement (qui casserait le sticky). */
  overflow-x: clip;
}
.section--serree { padding-block: clamp(3rem, 5.4svh, 5.2rem); }
.section--creme  { background: var(--creme-2); }
.section--blanche{ background: var(--blanc); }
.section--sombre { background: var(--vert); color: var(--creme); }

.section--sombre h1, .section--sombre h2,
.section--sombre h3, .section--sombre h4 { color: var(--blanc); }
.section--sombre .chapeau { color: var(--vert-voile); }
.section--sombre .sur-titre { color: var(--jaune); }
.section--sombre .plume { color: var(--jaune); }

.entete-section { margin-bottom: clamp(2.2rem, 4.6svh, 4rem); }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapeau { margin-inline: auto; max-width: 62ch; }

/* Séparateur décoratif : trois pastilles */
.filet-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 2rem auto;
}
.filet-deco span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.filet-deco span:nth-child(1) { background: var(--vert-clair); }
.filet-deco span:nth-child(2) { background: var(--rose); }
.filet-deco span:nth-child(3) { background: var(--jaune); }
.filet-deco::before, .filet-deco::after {
  content: "";
  height: 1px;
  width: clamp(40px, 9vw, 96px);
  background: linear-gradient(90deg, transparent, var(--creme-3));
}
.filet-deco::after { background: linear-gradient(270deg, transparent, var(--creme-3)); }
.section--sombre .filet-deco::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.28)); }
.section--sombre .filet-deco::after  { background: linear-gradient(270deg, transparent, rgba(255,255,255,.28)); }

/* --------------------------------------------------------------- Boutons  */
.btn {
  --btn-fond: var(--vert);
  --btn-texte: var(--blanc);
  --btn-bord: var(--vert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 56px;                 /* cible tactile confortable */
  min-width: 0;
  padding: .95rem 2rem;
  border: 2px solid var(--btn-bord);
  border-radius: 999px;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: var(--corps);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--transi), color var(--transi),
              border-color var(--transi), transform var(--transi), box-shadow var(--transi);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.btn:active { transform: translateY(0); }

.btn--terre   { --btn-fond: var(--rose-texte); --btn-bord: var(--rose-texte); }
.btn--terre:hover { --btn-fond: #8F3A16; --btn-bord: #8F3A16; }
.btn--vert:hover  { --btn-fond: #0A3510; --btn-bord: #0A3510; }

.btn--ligne {
  --btn-fond: transparent;
  --btn-texte: var(--vert);
  --btn-bord: var(--vert);
}
.btn--ligne:hover { --btn-fond: var(--vert); --btn-texte: var(--blanc); }

.btn--ligne-claire {
  --btn-fond: transparent;
  --btn-texte: var(--blanc);
  --btn-bord: rgba(255, 253, 249, .6);
}
.btn--ligne-claire:hover { --btn-fond: var(--blanc); --btn-texte: var(--vert); --btn-bord: var(--blanc); }

.btn--large { width: 100%; }
.btn .fleche { transition: transform var(--transi); }
.btn:hover .fleche { transform: translateX(4px); }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}
.entete-section--centre .groupe-btn { justify-content: center; }

/* --------------------------------------------------------------- En-tête  */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background: rgba(247, 243, 234, .92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transi), box-shadow var(--transi), background var(--transi);
}
.entete.est-collee { border-bottom-color: var(--creme-3); box-shadow: var(--ombre-1); }

.entete__interieur {
  width: min(100% - 2rem, 1420px);
  margin-inline: auto;
  height: var(--hauteur-entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: none;                       /* évite tout chevauchement avec la nav */
  text-decoration: none;
  white-space: nowrap;
}
/* Le symbole est plus proche du carré que du portrait : on lui donne sa
   proportion réelle et un peu plus de présence, sans écraser l'en-tête. */
.marque__symbole { width: 44px; height: 58px; object-fit: contain; }
@media (max-width: 620px) { .marque__symbole { width: 38px; height: 50px; } }
.marque__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vert);
  line-height: 1;
  letter-spacing: .02em;
}
.marque__accroche {
  display: block;
  font-family: var(--corps);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert);
  /* collé au nom : les deux lignes doivent former un seul bloc */
  margin-top: 0;
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__element { position: relative; }

/* Règle ciblée : ne touche ni les boutons ni les liens de sous-menu (spécificité) */
.nav a:not(.btn):not(.sous-menu__lien),
.nav__bouton {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem .62rem;
  border: 0;
  background: none;
  border-radius: 10px;
  color: var(--encre);
  font-family: var(--corps);
  font-size: .89rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transi), background var(--transi);
}
.nav a:not(.btn):not(.sous-menu__lien):hover,
.nav__bouton:hover,
.nav__bouton[aria-expanded="true"] { color: var(--rose-texte); background: var(--creme-2); }

.nav a[aria-current="page"]:not(.btn):not(.sous-menu__lien) {
  color: var(--rose-texte);
  background: var(--rose-voile);
}

.nav__chevron { width: 11px; height: 11px; transition: transform var(--transi); }
.nav__bouton[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Sous-menu : collé au bouton (bordure transparente = zone de survol continue) */
.sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 460px;
  padding: 1rem;
  border-top: 14px solid transparent;
  background: var(--blanc);
  background-clip: padding-box;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-3);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .22s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
}
/* Panneau à trois entrées ou moins : une seule colonne, plus compacte */
.sous-menu--court {
  min-width: 20rem;
  grid-template-columns: 1fr;
}

.nav__element.est-ouvert .sous-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.sous-menu__lien {
  display: block;                   /* jamais inline : le titre et la description s'empilent */
  padding: .7rem .85rem;
  border-radius: var(--rayon-s);
  text-decoration: none;
  transition: background var(--transi);
}
.sous-menu__lien:hover { background: var(--creme-2); }
.sous-menu__titre {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--vert);
  margin-bottom: .1rem;
}
.sous-menu__lien:hover .sous-menu__titre { color: var(--rose-texte); }
.sous-menu__detail {
  display: block;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--encre-3);
}

.entete__actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.entete .btn {
  min-height: 48px;
  padding: .6rem 1.35rem;
  font-size: .85rem;
  white-space: nowrap;              /* seul endroit où le nowrap est utile */
}
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .93rem;
  color: var(--vert);
  text-decoration: none;
  white-space: nowrap;
  padding: .5rem .3rem;
}
.entete__tel:hover { color: var(--rose-texte); }
.entete__tel svg { width: 17px; height: 17px; }

/* Burger — trois barres empilées */
.burger {
  display: none;
  flex-direction: column;           /* sans quoi les barres se rangent en ligne */
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  padding: 0 11px;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--vert);
  transition: transform var(--transi), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Entre 1280 et 1400 px, la barre tient encore mais de justesse :
   on retire le libellé du numéro et on ne garde que le pictogramme. */
@media (max-width: 1340px) and (min-width: 1201px) {
  .entete__tel span { display: none; }
  .entete__tel { padding: .5rem; }
}

/* Le seuil est placé là où la barre complète ne tient physiquement plus */
@media (max-width: 1200px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    inset: var(--hauteur-entete) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem var(--gouttiere) 4rem;
    background: var(--creme);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.22,1,.36,1), visibility .45s;
  }
  .nav.est-ouverte { transform: translateX(0); visibility: visible; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a:not(.btn):not(.sous-menu__lien),
  .nav__bouton {
    width: 100%;
    justify-content: space-between;
    padding: 1.05rem .4rem;
    font-size: 1.06rem;
    border-bottom: 1px solid var(--creme-3);
    border-radius: 0;
  }
  .sous-menu {
    position: static;
    transform: none;
    min-width: 0;
    grid-template-columns: 1fr;
    box-shadow: none;
    background: var(--creme-2);
    border-top: 0;
    border-radius: var(--rayon-s);
    padding: .4rem;
    margin: .5rem 0 1rem;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__element.est-ouvert .sous-menu { display: grid; transform: none; }
  .entete__tel span { display: none; }
  .entete .btn--rdv-entete { display: none; }
  .nav__pied { margin-top: 2rem; display: grid; gap: .8rem; }
}
@media (min-width: 1201px) { .nav__pied { display: none; } }

body.menu-ouvert { overflow: hidden; }

/* Un ancêtre en backdrop-filter devient bloc de confinement : le position:fixed
   du panneau de navigation se calerait alors sur l'en-tête au lieu du viewport,
   et le menu ne couvrirait qu'une bande de 92 px. On le neutralise à l'ouverture. */
body.menu-ouvert .entete {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--creme);
}

/* --------------------------------------------------------------- Bannière */
.banniere {
  position: relative;
  padding-top: calc(var(--hauteur-entete) + clamp(3.4rem, 6vw, 5.6rem));
  padding-bottom: clamp(3.4rem, 6vw, 5.6rem);
  overflow: hidden;
  background: var(--creme);
}
.banniere__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.banniere__interieur { position: relative; z-index: 1; }
.banniere--centre { text-align: center; }
.banniere--centre .chapeau { margin-inline: auto; max-width: 60ch; }
/* La bannière apporte déjà sa respiration : la section qui suit n'a pas
   besoin d'un second grand écart en haut. */
.banniere + .section { padding-top: clamp(3rem, 5.2vw, 5rem); }

/* Accueil : hero pleine hauteur */
.hero {
  position: relative;
  min-height: min(90svh, 720px);
  display: flex;
  align-items: center;
  padding-top: var(--hauteur-entete);
  overflow: hidden;
  background: var(--creme);
}
.hero__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__decor img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 60% at 22% 45%, rgba(247,243,234,.96) 0%, rgba(247,243,234,.72) 45%, rgba(247,243,234,0) 78%),
    linear-gradient(180deg, rgba(247,243,234,.5) 0%, rgba(247,243,234,0) 30%, rgba(247,243,234,.55) 100%);
}
.hero__interieur { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 6rem); }
/* Largeur en rem, pas en ch : l'unité ch se calcule sur la police du conteneur
   (petite) et étranglerait le h1 qui est cinq fois plus gros. */
.hero__contenu { max-width: 40rem; }
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .plume { display: block; margin-top: .12em; }
.hero .chapeau { max-width: 46ch; }

.hero__ancre {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert);
  text-decoration: none;
}
.hero__ancre svg { width: 15px; animation: flotte 2.4s ease-in-out infinite; }
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (max-width: 900px) { .hero__ancre { display: none; } }

/* ----------------------------------------------------------------- Grille */
.grille { display: grid; gap: clamp(1.4rem, 2.3vw, 2.1rem); }
/* Une seule carte : on la centre et on la borne, sinon elle s'étire sur toute la largeur */
.grille--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille > * { min-width: 0; }       /* sans quoi un libellé long fait déborder la ligne */

@media (max-width: 1080px) { .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- Section 2 colonnes */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;             /* l'image suit la hauteur du texte */
}
.duo > * { min-width: 0; }
.duo__texte { align-self: center; padding-block: .25rem; }
.duo__media { position: relative; border-radius: var(--rayon-xl); overflow: hidden; box-shadow: var(--ombre-2); }
.duo__media img { width: 100%; height: 100%; min-height: min(300px, 38svh); object-fit: cover; }
.duo--inverse .duo__media,
.duo--inverse > .photo { order: -1; }   /* le gabarit intérieur utilise .photo */

@media (max-width: 880px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .duo--inverse .duo__media,
  .duo--inverse > .photo { order: 0; }
  .duo__media img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Vignette flottante posée sur l'image */
.duo__vignette {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  background: rgba(255, 253, 249, .95);
  backdrop-filter: blur(8px);
  border-radius: var(--rayon);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--ombre-2);
  max-width: 62%;
}
.duo__vignette-valeur {
  display: block;
  font-family: var(--titre);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--rose-texte);
  line-height: 1;
}
.duo__vignette-legende {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-top: .35rem;
}
@media (max-width: 520px) { .duo__vignette { position: static; max-width: none; margin-top: 1rem; box-shadow: none; } }

/* ----------------------------------------------------------------- Cartes */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
  height: 100%;
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); border-color: var(--vert-voile); }
.carte__icone {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--creme-2);
  margin-bottom: 1.3rem;
  flex: none;
}
.carte__icone svg { width: 27px; height: 27px; stroke: var(--vert); fill: none; stroke-width: 1.7; }
.carte h3 { margin-bottom: .5rem; }
.carte p { color: var(--encre-2); font-size: .97rem; }
.carte__lien {
  margin-top: auto;
  padding-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--rose-texte);
  text-decoration: none;
}
.carte__lien svg { width: 15px; transition: transform var(--transi); }
.carte:hover .carte__lien svg { transform: translateX(4px); }

/* Carte entièrement cliquable : l'ancre couvre la carte sans casser la sémantique */
.carte--lien { position: relative; }
.carte--lien .carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* --------------------------------------------------- Cartes praticien */
.praticien {
  display: block;                   /* obligatoire : sert de bloc conteneur au bandeau */
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
}
.praticien:hover { transform: translateY(-6px); box-shadow: var(--ombre-2); border-color: var(--vert-voile); }
.praticien__photo {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--creme-2);
}
.praticien__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transi-l);
}
.praticien:hover .praticien__photo img { transform: scale(1.05); }
.praticien__etiquette {
  position: absolute;
  left: .85rem;
  top: .85rem;
  z-index: 2;
  background: rgba(255, 253, 249, .94);
  color: var(--vert);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: 999px;
}
.praticien__corps { padding: .9rem 1.05rem 1.05rem; }
.praticien__nom {
  font-family: var(--titre);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--vert);
  line-height: 1.15;
  margin: 0 0 .2rem;
}
.praticien__metier {
  display: block;
  font-size: .87rem;
  font-weight: 700;
  color: var(--rose-texte);
  margin-bottom: .6rem;
}
.praticien__resume {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--encre-2);
  margin: 0;
  /* trois lignes suffisent en vignette : le reste est sur la fiche */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.praticien__pied {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .87rem;
  font-weight: 700;
  color: var(--vert);
}
.praticien__pied svg { width: 14px; transition: transform var(--transi); }
.praticien:hover .praticien__pied svg { transform: translateX(4px); }

/* ------------------------------------------------------------ Listes */
/* Jamais de flex sur un <li> : chaque enfant inline deviendrait une colonne. */
.liste-puces { list-style: none; margin: 1.4rem 0; padding: 0; }
.liste-puces li {
  display: block;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .8rem;
  line-height: 1.65;
}
.liste-puces li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vert-clair);
}
.liste-puces--corail li::before { background: var(--rose); }
.liste-puces--or li::before { background: var(--jaune); }

.liste-coches { list-style: none; margin: 1.6rem 0; padding: 0; }
.liste-coches li {
  display: block;
  position: relative;
  padding-left: 2.3rem;
  margin-bottom: .95rem;
  line-height: 1.6;
}
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 0; top: .28em;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--vert-voile);
}
.liste-coches li::after {
  content: "";
  position: absolute;
  left: 7px; top: .62em;
  width: 8px; height: 4.5px;
  border-left: 2.2px solid var(--vert);
  border-bottom: 2.2px solid var(--vert);
  transform: rotate(-45deg);
}
.section--sombre .liste-coches li::before { background: rgba(255,255,255,.2); }
.section--sombre .liste-coches li::after { border-color: var(--jaune); }

/* ------------------------------------------------------------- Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 820px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chiffre { text-align: center; padding: 1.2rem .6rem; }
.chiffre__valeur {
  display: block;
  font-family: var(--titre);
  font-size: clamp(2.7rem, 5.2vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--rose-texte);
}
.chiffre__legende {                  /* classe dédiée : jamais un <span> nu */
  display: block;
  font-family: var(--corps);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-top: .7rem;
  line-height: 1.5;
}
.section--sombre .chiffre__valeur { color: var(--jaune); }
.section--sombre .chiffre__legende { color: var(--vert-voile); }

/* ----------------------------------------------------------------- Tarifs */
.tarifs { border: 1px solid var(--creme-3); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); }
.tarifs__entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem clamp(1.2rem, 2.4vw, 2rem);
  background: var(--creme-2);
  border-bottom: 1px solid var(--creme-3);
}
.tarifs__entete h3 { margin: 0; font-size: 1.4rem; }
.tarifs__pastille {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--vert-voile);
  display: grid; place-items: center;
  flex: none;
}
.tarifs__pastille svg { width: 21px; stroke: var(--vert); fill: none; stroke-width: 1.8; }

.tarif-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem clamp(1.2rem, 2.4vw, 2rem);
  border-bottom: 1px dashed var(--creme-3);
}
.tarif-ligne:last-child { border-bottom: 0; }
.tarif-ligne__intitule { min-width: 0; }
.tarif-ligne__nom { display: block; font-weight: 700; color: var(--vert); }
.tarif-ligne__detail { display: block; font-size: .87rem; color: var(--encre-3); margin-top: .15rem; }
.tarif-ligne__prix {
  flex: none;
  font-family: var(--titre);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--rose-texte);
  line-height: 1;
}
.tarif-ligne__prix small { font-family: var(--corps); font-size: .72rem; font-weight: 700; color: var(--encre-3); }

.note-encadree {
  border-left: 4px solid var(--jaune);
  background: var(--jaune);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  padding: 1.15rem 1.4rem;
  margin: 1.8rem 0;
  font-size: .96rem;
}
.note-encadree strong { color: #7A5A0A; } /* or profond, contraste 5,1:1 */
.note-encadree--vert { border-left-color: var(--vert); background: var(--vert-voile); }
.note-encadree--vert strong { color: var(--vert); }
.note-encadree p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: .9rem; }
.faq__item {
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon-s);
  overflow: hidden;
  transition: border-color var(--transi), box-shadow var(--transi);
}
.faq__item.est-ouvert { border-color: var(--vert-voile); box-shadow: var(--ombre-1); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  min-height: 54px;
  padding: .95rem clamp(1.1rem, 2.2vw, 1.7rem);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--titre);
  font-size: clamp(1.12rem, 1.9vw, 1.32rem);
  font-weight: 600;
  color: var(--vert);
  line-height: 1.3;
  transition: color var(--transi);
}
.faq__question:hover { color: var(--rose-texte); }
.faq__signe {
  position: relative;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.8px solid var(--vert-clair);
}
.faq__signe::before, .faq__signe::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--vert);
  transform: translate(-50%, -50%);
  transition: transform var(--transi), opacity var(--transi);
}
.faq__signe::before { width: 12px; height: 2px; }
.faq__signe::after  { width: 2px; height: 12px; }
.faq__item.est-ouvert .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1);
}
.faq__item.est-ouvert .faq__reponse { grid-template-rows: 1fr; }
.faq__reponse > div { overflow: hidden; }
.faq__reponse p {
  padding: 0 clamp(1.1rem, 2.2vw, 1.7rem) 1.5rem;
  color: var(--encre-2);
  margin: 0;
}
.faq__reponse p + p { padding-top: 0; margin-top: -.6rem; }

/* ----------------------------------------------------------- Témoignages */
.temoignage {
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.temoignage__etoiles { display: flex; gap: .2rem; margin-bottom: 1.1rem; }
.temoignage__etoiles svg { width: 19px; height: 19px; fill: var(--jaune); }
.temoignage__texte {
  font-family: var(--titre);
  font-size: clamp(1.12rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--vert);
  font-style: italic;
  flex: 1;
}
.temoignage__auteur { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--creme-3); }
.temoignage__nom { display: block; font-weight: 700; color: var(--vert); }
.temoignage__origine { display: block; font-size: .83rem; color: var(--encre-3); margin-top: .15rem; }

/* -------------------------------------------------------------- Bandeau */
/* Bandeau d'appel — fond clair.
   Sur le vert profond d'avant, le bouton principal (vert lui aussi depuis la
   charte V4) se confondait avec le fond : il devenait invisible. */
.bandeau-appel { background: var(--creme-2); color: var(--encre); text-align: center; }
.bandeau-appel h2, .bandeau-appel .titre-charte { color: var(--vert-fonce); }
.bandeau-appel .sur-titre { color: var(--vert); }
.bandeau-appel .chapeau { color: var(--encre-2); margin-inline: auto; max-width: 56ch; }
.bandeau-appel .plume, .bandeau-appel .plume-charte { color: var(--rose-texte); }
.bandeau-appel .groupe-btn { justify-content: center; }
/* le bouton secondaire était bordé de blanc : illisible sur clair */
.bandeau-appel .btn--ligne-claire {
  --btn-fond: transparent;
  --btn-texte: var(--vert);
  --btn-bord: var(--vert);
}
.bandeau-appel .btn--ligne-claire:hover {
  --btn-fond: var(--vert); --btn-texte: var(--blanc); --btn-bord: var(--vert);
}

/* ------------------------------------------------------------ Formulaire */
.formulaire { display: grid; gap: 1.3rem; }
.champ { display: grid; gap: .5rem; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 620px) { .champ--duo { grid-template-columns: minmax(0, 1fr); } }

.champ label, .legende-groupe {
  font-weight: 700;
  font-size: .93rem;
  color: var(--vert);
}
.champ .obligatoire { color: var(--rose-texte); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 56px;
  padding: .95rem 1.1rem;
  border: 1.8px solid var(--creme-3);
  border-radius: var(--rayon-s);
  background: var(--blanc);
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--encre);
  transition: border-color var(--transi), box-shadow var(--transi);
}
.champ textarea { min-height: 165px; resize: vertical; line-height: 1.65; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--vert-clair);
  box-shadow: 0 0 0 4px var(--vert-voile);
}
.champ input::placeholder, .champ textarea::placeholder { color: #8A9686; }
.champ__aide { font-size: .83rem; color: var(--encre-3); }

.case { display: flex; align-items: flex-start; gap: .8rem; }  /* deux blocs uniques : flex justifié */
.case input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: .25rem; accent-color: var(--vert); }
.case label { font-weight: 400; font-size: .9rem; line-height: 1.6; color: var(--encre-2); }

.form-succes, .form-erreur {
  display: none;
  padding: 1.15rem 1.4rem;
  border-radius: var(--rayon-s);
  font-weight: 600;
}
.form-succes { background: var(--vert-voile); color: var(--vert); border-left: 4px solid var(--vert); }
.form-erreur { background: var(--rose-voile); color: #8C2E22; border-left: 4px solid var(--rose); }
.form-succes.est-visible, .form-erreur.est-visible { display: block; }

/* ------------------------------------------------------------ Coordonnées */
.coord { display: grid; gap: 1.6rem; }
.coord__bloc {
  display: block;
  position: relative;
  padding-left: 3.6rem;
}
.coord__bloc svg {
  position: absolute;
  left: 0; top: .1rem;
  width: 26px; height: 26px;
  stroke: var(--vert);
  fill: none;
  stroke-width: 1.7;
}
.coord__intitule {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: .3rem;
}
.coord__valeur { display: block; font-size: 1.06rem; font-weight: 600; color: var(--vert); text-decoration: none; line-height: 1.55; }
a.coord__valeur:hover { color: var(--rose-texte); }

.carte-plan {
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--creme-3);
  box-shadow: var(--ombre-1);
  background: var(--creme-2);
}
.carte-plan iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ------------------------------------------------------------- Fil d'Ariane */
.fil {
  padding-top: calc(var(--hauteur-entete) + 1.6rem);
  padding-bottom: .3rem;
  font-size: .84rem;
  color: var(--encre-3);
}
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.fil li { display: inline; }
.fil li + li::before { content: "›"; margin-right: .45rem; color: var(--creme-3); }
.fil a { color: var(--encre-3); text-decoration: none; }
.fil a:hover { color: var(--rose-texte); text-decoration: underline; }
.fil [aria-current="page"] { color: var(--vert); font-weight: 600; }
.fil + .banniere { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ------------------------------------------------------------------ Blog */
.article-carte {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  transition: transform var(--transi), box-shadow var(--transi);
}
.article-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.article-carte__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--creme-2); }
.article-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transi-l); }
.article-carte:hover .article-carte__media img { transform: scale(1.04); }
.article-carte__corps { padding: 1.1rem 1.2rem 1.3rem; }
.article-carte__meta {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: .6rem;
}
.article-carte h3 { font-size: 1.18rem; margin-bottom: .4rem; }
.article-carte p {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--encre-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.corps-article { font-size: 1.09rem; line-height: 1.8; }
.corps-article h2 { margin-top: 2.6rem; }
.corps-article h3 { margin-top: 2rem; }
.corps-article > p:first-of-type { font-size: 1.2rem; color: var(--encre-2); }
.corps-article figure { margin: 2.4rem 0; }
.corps-article figure img { border-radius: var(--rayon); width: 100%; }
.corps-article figcaption { font-size: .84rem; color: var(--encre-3); margin-top: .7rem; text-align: center; }

/* ------------------------------------------------------------- Galerie */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .galerie { grid-template-columns: minmax(0, 1fr); } }
.galerie figure { margin: 0; border-radius: var(--rayon); overflow: hidden; background: var(--creme-2); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transi-l); }
.galerie figure:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------- Ruban */
.ruban {
  background: var(--vert);
  color: var(--creme);
  padding: .85rem 0;
  overflow: hidden;
}
.ruban__piste { display: flex; gap: 3rem; white-space: nowrap; width: max-content; }
.ruban__element {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ruban__element::after { content: "❦"; color: var(--jaune); letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ruban__piste { animation: defile 34s linear infinite; }
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- Pied de page */
.pied { background: var(--vert); color: var(--vert-voile); padding-block: clamp(3.5rem, 6vw, 5.5rem) 0; }
.pied a { color: var(--vert-voile); text-decoration: none; }
.pied a:hover { color: var(--jaune); text-decoration: underline; }

.pied__haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 1000px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .pied__haut { grid-template-columns: minmax(0, 1fr); } }

.pied__marque { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.3rem; text-decoration: none; }
.pied__marque img { width: 52px; height: 52px; object-fit: contain; }
.pied__marque span { font-family: var(--titre); font-size: 1.45rem; color: var(--blanc); font-weight: 600; }
.pied__resume { font-size: .93rem; line-height: 1.7; max-width: 34ch; }

.pied__titre {
  font-family: var(--corps);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 1.2rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { display: block; margin-bottom: .6rem; font-size: .93rem; }

.pied__coord { list-style: none; margin: 0; padding: 0; }
.pied__coord li { display: block; position: relative; padding-left: 1.9rem; margin-bottom: .95rem; font-size: .93rem; line-height: 1.6; }
.pied__coord svg { position: absolute; left: 0; top: .22em; width: 17px; height: 17px; stroke: var(--jaune); fill: none; stroke-width: 1.8; }

.pied__reseaux { display: flex; gap: .7rem; margin-top: 1.4rem; }
.pied__reseau {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  transition: background var(--transi), border-color var(--transi), transform var(--transi);
}
.pied__reseau svg { width: 19px; height: 19px; fill: var(--vert-voile); }
.pied__reseau:hover { background: var(--jaune); border-color: var(--jaune); transform: translateY(-2px); }
.pied__reseau:hover svg { fill: var(--vert); }

.pied__bas {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-block: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .84rem;
}
.pied__legales { display: flex; flex-wrap: wrap; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.pied__legales li { display: inline; }
.pied__signature a { font-weight: 700; color: var(--jaune); }

/* ------------------------------------------------------- Barre mobile RDV */
.barre-mobile {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 850;
  padding: .7rem var(--gouttiere) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(247, 243, 234, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--creme-3);
  gap: .7rem;
}
.barre-mobile .btn { flex: 1; min-height: 52px; padding: .7rem 1rem; font-size: .88rem; }
@media (max-width: 700px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 84px; }
}

/* ------------------------------------------------------------- Animations */
[data-reveal] { opacity: 1; }        /* état par défaut : visible, même sans JS */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
              transform .75s cubic-bezier(.22, 1, .36, 1);
}
.js-anim [data-reveal].est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------- Bandeau cookies */
.cookies {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(140%);
  z-index: 950;
  width: min(100% - 2rem, 660px);
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-3);
  padding: 1.5rem;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.cookies.est-visible { transform: translateX(-50%) translateY(0); }
.cookies p { font-size: .92rem; color: var(--encre-2); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.cookies .btn { min-height: 48px; padding: .6rem 1.3rem; font-size: .88rem; }
@media (max-width: 700px) { .cookies { bottom: 88px; } }

/* ---------------------------------------------------------------- Impression */
@media print {
  .entete, .barre-mobile, .cookies, .hero__ancre, .ruban, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* =========================================================================
   COMPOSANTS — structure et gestes repris du code source de référence
   (Maven Clinic), transposés dans la charte du Pavillon Gaïa.
   ========================================================================= */

/* --------------------------------------------------- Boutons de la charte */
/* Principal : vert plein + flèche. Secondaire : contour rose + flèche. */
.btn {
  --btn-fond: var(--vert);
  --btn-texte: var(--blanc);
  --btn-bord: var(--vert);
  gap: .9rem;
}
.btn .fleche { width: 17px; height: 17px; flex: none; }
.btn--ligne { --btn-fond: transparent; --btn-texte: var(--vert-fonce); --btn-bord: var(--rose); }
.btn--ligne:hover { --btn-fond: var(--rose); --btn-texte: var(--blanc); --btn-bord: var(--rose); }
.btn--terre { --btn-fond: var(--vert); --btn-bord: var(--vert); }
.btn--terre:hover { --btn-fond: var(--vert-fonce); --btn-bord: var(--vert-fonce); }

/* Lien texte fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--rose-texte);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rose-pale);
  transition: color var(--transi), border-color var(--transi), gap var(--transi);
}
.lien-fleche:hover { color: var(--vert); border-color: var(--vert); gap: .9rem; }
.lien-fleche svg { width: 16px; flex: none; }

/* ---------------------------------------------------- Traitement photo */
/* Cadre arrondi + filet rose, tel que prescrit dans le dossier de charte. */
.photo {
  border: var(--photo-bord);
  border-radius: var(--photo-rayon);
  box-shadow: var(--photo-ombre);
  overflow: hidden;
  background: var(--creme-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------- Bannière */
.accroche {
  position: relative;
  min-height: min(90svh, 720px);
  display: flex;
  align-items: center;
  padding-top: var(--hauteur-entete);
  overflow: hidden;
}
.accroche__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: calc(var(--hauteur-entete) + .75rem) .75rem .75rem;
}
.accroche__fond-inner { width: 100%; height: 100%; border-radius: var(--rayon); overflow: hidden; position: relative; }
.accroche__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Voile : le texte doit rester lisible quelle que soit la photo posée ensuite */
.accroche__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(53,65,54,.62) 0%, rgba(53,65,54,.34) 42%, rgba(53,65,54,.06) 72%),
    linear-gradient(0deg, rgba(53,65,54,.30) 0%, rgba(53,65,54,0) 45%);
}
/* pas de width ici : la classe .enveloppe pose la largeur et le centrage */
.accroche__interieur { position: relative; z-index: 2; padding-block: clamp(1.6rem, 3vw, 2.6rem); }
.accroche__corps { max-width: 38rem; color: var(--blanc); }
.accroche__corps h1 { color: var(--blanc); }
.accroche__corps .chapeau { color: rgba(255, 252, 247, .88); }

/* Pastille animée : un point de couleur et un libellé qui alternent */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 1.1rem .5rem .7rem;
  border-radius: 999px;
  background: rgba(255, 252, 247, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 252, 247, .3);
  margin-bottom: 1.1rem;
}
.pastille__point {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--jaune);
  flex: none;
  transition: background .45s ease;
}
.pastille__texte {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--blanc);
  white-space: nowrap;
}
@media (max-width: 560px) { .pastille__texte { white-space: normal; } }

/* ------------------------------------------- Cartes qui s'élargissent */
/* Rangée de cartes : celle qu'on survole s'ouvre, les autres se resserrent. */
.eventail { display: flex; gap: 1rem; }
.eventail__carte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 4 / 5;
  max-height: min(46svh, 380px);
  border-radius: var(--rayon);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--blanc);
  transition: flex-grow var(--transi);
}
.eventail__carte img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transi-l);
}
.eventail__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(53,65,54,.86) 8%, rgba(53,65,54,.34) 52%, rgba(53,65,54,.12) 100%);
}
.eventail__corps {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}
.eventail__point { width: 12px; height: 12px; border-radius: 50%; background: var(--jaune); }
.eventail__titre {
  font-family: var(--titre);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 500;
  color: var(--blanc);
  line-height: 1.2;
  margin: 0;
}
.eventail__mention {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: rgba(255, 252, 247, .74);
  margin-top: .4rem;
}
/* Le texte et le bouton n'apparaissent que sur la carte ouverte */
.eventail__depli {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transi-l);
}
.eventail__depli > * { overflow: hidden; }
.eventail__texte {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 252, 247, .86);
  margin: .9rem 0 1.1rem;
  max-width: 40ch;
}
@media (hover: hover) and (pointer: fine) {
  .eventail__carte:hover { flex-grow: 2.6; }
  .eventail__carte:hover img { transform: scale(1.06); }
  .eventail__carte:hover .eventail__depli,
  .eventail__carte:focus-within .eventail__depli { grid-template-rows: 1fr; }
}
@media (max-width: 900px) {
  .eventail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: max(var(--gouttiere), (100vw - var(--large)) / 2);
    margin-inline: calc(var(--gouttiere) * -1);
  }
  .eventail::-webkit-scrollbar { display: none; }
  .eventail__carte { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; }
  .eventail__depli { grid-template-rows: 1fr; }
}

/* ------------------------------------------------------ Cercles chiffrés */
.jauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1000px) { .jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .jauges { grid-template-columns: minmax(0, 1fr); } }

.jauge { text-align: center; }
.jauge__cercle { position: relative; width: min(124px, 42vw); margin: 0 auto 1rem; aspect-ratio: 1; }
.jauge__cercle svg { width: 100%; height: 100%; }
.jauge__piste { fill: none; stroke: var(--creme-3); stroke-width: 8; }
.jauge__trace {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}
.jauge__valeur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 500;
  color: var(--vert-fonce);
}
.jauge__texte { font-size: .88rem; line-height: 1.5; color: var(--encre-2); max-width: 26ch; margin-inline: auto; }
.jauge__texte strong { color: var(--vert); }

/* ------------------------------------------------- Liste + visuel lié */
.duo-liste { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .duo-liste { grid-template-columns: minmax(0, 1fr); } }

.choix { list-style: none; margin: 2rem 0; padding: 0; }
.choix__item { position: relative; }
.choix__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .2rem;
  text-decoration: none;
  color: var(--encre-2);
  border-top: 1px solid var(--creme-3);
  transition: color var(--transi);
}
.choix__item:last-child .choix__lien { border-bottom: 1px solid var(--creme-3); }
.choix__intitule { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.choix__point {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rose);
  flex: none;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--transi), transform var(--transi);
}
.choix__nom { font-family: var(--titre); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.25; }
.choix__fleche { width: 18px; flex: none; opacity: 0; transform: translateX(-8px); transition: opacity var(--transi), transform var(--transi); }
/* Trait qui se remplit sous l'élément actif */
.choix__trait { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--rose); transition: width var(--transi-l); }
.choix__item.est-actif .choix__lien,
.choix__lien:hover { color: var(--vert); }
.choix__item.est-actif .choix__point,
.choix__lien:hover .choix__point { opacity: 1; transform: scale(1); }
.choix__item.est-actif .choix__fleche,
.choix__lien:hover .choix__fleche { opacity: 1; transform: translateX(0); }
.choix__item.est-actif .choix__trait { width: 100%; }

.duo-liste__visuel { position: relative; aspect-ratio: 4 / 5; }
.duo-liste__visuel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transi-l);
}
.duo-liste__visuel img.est-actif { opacity: 1; }

/* ------------------------------------------------------------- Bandeau */
.bandeau-defile { overflow: hidden; padding-block: 1.4rem; }
.bandeau-defile__piste { display: flex; width: max-content; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.bandeau-defile__element {
  display: inline-flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--titre);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: var(--vert);
  white-space: nowrap;
}
.bandeau-defile__element::after { content: "♡"; color: var(--rose); font-size: .8em; }
@media (prefers-reduced-motion: no-preference) {
  .bandeau-defile__piste { animation: glisse 38s linear infinite; }
}
@keyframes glisse { to { transform: translateX(-50%); } }

/* ----------------------------------------- Paroles de l'équipe */
/* Le portrait EST l'onglet : plus de désynchronisation possible entre la
   photographie affichée et la citation lue. */
.paroles { text-align: center; position: relative; }

.paroles__vue { display: none; }
.paroles__vue.est-actif { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .paroles__vue.est-actif { animation: paroleParait .55s cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes paroleParait { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.paroles__guillemet {
  display: block;
  font-family: var(--titre);
  font-size: 4rem;
  line-height: .6;
  color: var(--jaune);
  opacity: .55;
  margin-bottom: .5rem;
}
.paroles__citation {
  font-family: var(--titre);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--blanc);
  margin: 0 auto;
  max-width: 44ch;
  /* la hauteur est réservée : le bloc ne saute pas d'une citation à l'autre */
  min-height: 4.65em;
}
.paroles__auteur {
  font-weight: 600;
  color: var(--jaune);
  margin: 1.6rem 0 0;
  letter-spacing: .02em;
}
.paroles__role {
  display: block;
  font-size: .88rem;
  font-weight: 400;
  color: var(--vert-clair);
  margin-top: .2rem;
}

.paroles__choix {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  margin-top: clamp(2.4rem, 5svh, 3.6rem);
}
.paroles__visage {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  width: clamp(70px, 8vw, 92px);
  opacity: .55;
  transition: opacity var(--transi), transform var(--transi);
}
.paroles__visage img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 2px solid transparent;
  transition: border-color var(--transi);
}
.paroles__visage:hover { opacity: .85; transform: translateY(-3px); }
.paroles__visage.est-actif { opacity: 1; }
.paroles__visage.est-actif img { border-color: var(--rose); }
.paroles__visage:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; border-radius: 12px; }

.paroles__nom {
  display: block;
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--vert-clair);
}
.paroles__visage.est-actif .paroles__nom { color: var(--jaune); }

.paroles__piste {
  display: block;
  height: 2px;
  margin-top: .55rem;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  overflow: hidden;
}
.paroles__jauge { display: block; height: 100%; width: 0; background: var(--jaune); }

/* ------------------------------------------------- Mosaïque du lieu */
.mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1.3fr 1fr;
  gap: clamp(.6rem, 1.1vw, .9rem);
  /* hauteur bornée : la mosaïque doit tenir dans l'écran, pas le remplir */
  height: clamp(300px, 46svh, 430px);
}
.mosaique__case { border-radius: var(--rayon); overflow: hidden; position: relative; background: var(--creme-2); }
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; }
.mosaique__case--large { grid-column: span 5; grid-row: span 2; }
.mosaique__case--haute { grid-column: span 3; grid-row: span 2; }
.mosaique__case--tiers { grid-column: span 4; }
.mosaique__case--tiers:nth-child(4),
.mosaique__case--tiers:nth-child(5) { grid-column: span 2; }
.mosaique__legende {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  background: rgba(255, 252, 247, .93);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--vert);
}
@media (max-width: 800px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; height: auto; }
  .mosaique__case--large, .mosaique__case--haute, .mosaique__case--tiers {
    grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3;
  }
  .mosaique__case--tiers, .mosaique__case--tiers:nth-child(4),
  .mosaique__case--tiers:nth-child(5) { grid-column: span 1; aspect-ratio: 1; }
}

/* ------------------------------------------------------ Titres charte */
.titre-charte { font-family: var(--titre); font-weight: 500; line-height: 1.24; color: var(--vert-fonce); }
.titre-charte strong { font-weight: 500; color: var(--vert); }
/* La cursive a de longues hampes et jambages : sans marge propre elle
   heurte la ligne du dessus et celle du dessous. */
.plume-charte {
  --surligne: var(--rose-voile);
  font-family: var(--plume);
  font-weight: 500;
  color: var(--rose-texte);
  font-size: 1.5em;
  line-height: 1.06;
  display: inline-block;
  margin: .16em .24em .06em;
  position: relative;
  /* le trait reste derrière le mot et ne s'échappe pas de la section */
  isolation: isolate;
}
/* Surlignement au feutre derrière le mot manuscrit du hero : posé sur une
   photographie claire, le corail seul devenait illisible.
   Réservé au hero : ailleurs le mot manuscrit peut passer à la ligne, et la
   bande couvrirait alors les deux lignes d'un seul bloc. */
.accroche .plume-charte::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Un rectangle, mais posé à la main : les arêtes ondulent légèrement et
     les coins ne sont pas d'équerre, comme un aplat de pinceau.
     Le masque porte la forme, la couleur reste pilotée par --surligne ;
     si le masque n'est pas géré, le rectangle plein reste et le mot
     demeure lisible. */
  inset: .02em -.34em .04em -.34em;
  background: var(--surligne);
  border-radius: 4px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M3.6 11Q25 3.4 57 5.6Q99 8.4 137 3.2Q167 -0.6 196.4 5.4Q193.2 20.5 195.6 34Q196.9 47 193.4 57.4Q157 60.2 119 55.8Q83 51.6 45 57.6Q21 61 3 55.2Q6.8 40.8 5.2 26Q4.4 17.6 3.6 11Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M3.6 11Q25 3.4 57 5.6Q99 8.4 137 3.2Q167 -0.6 196.4 5.4Q193.2 20.5 195.6 34Q196.9 47 193.4 57.4Q157 60.2 119 55.8Q83 51.6 45 57.6Q21 61 3 55.2Q6.8 40.8 5.2 26Q4.4 17.6 3.6 11Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* jamais tout à fait d'aplomb */
  transform: rotate(-.7deg);
}
.accroche .plume-charte { --surligne: var(--creme); }

/* « bien-être » ne doit jamais se détacher de « votre » : le mot accentué
   perd son sens s'il tombe seul sur sa ligne. */
.insecable { white-space: nowrap; }
/* en dessous, la cursive est réduite pour que le groupe tienne quand même */
@media (max-width: 620px) { .accroche .plume-charte { font-size: 1.25em; } }
@media (max-width: 420px) { .accroche .plume-charte { font-size: 1.1em; } }
.section--sombre .titre-charte, .section--sombre .titre-charte strong { color: var(--blanc); }
.section--sombre .plume-charte { color: var(--jaune); }

/* Bandeau de valeurs, repris du pied du dossier de charte */
.valeurs {
  background: var(--vert-clair);
  color: var(--vert-fonce);
  padding-block: 1.1rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.valeurs span { margin-inline: .7rem; }
.valeurs span::after { content: " •"; color: var(--blanc); }
.valeurs span:last-child::after { content: " ♡"; color: var(--rose); }

/* ------------------------------------------------- Éléments graphiques */
/* Formes organiques, feuillages et pointillés posés en fond de section,
   comme le prescrit le dossier de charte. */
.decor { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.decor svg { width: 100%; height: auto; display: block; }
.section > .enveloppe, .section > .enveloppe--moyen, .section > .enveloppe--etroit { position: relative; z-index: 1; }

.decor--tl { top: -4%;  left: -6%; }
.decor--tr { top: -6%;  right: -5%; }
.decor--bl { bottom: -6%; left: -4%; }
.decor--br { bottom: -5%; right: -6%; }
.decor--l  { top: 18%;  left: -7%; }
.decor--r  { top: 22%;  right: -6%; }

.decor--xs { width: clamp(64px, 7vw, 104px); }
.decor--s  { width: clamp(96px, 11vw, 168px); }
.decor--m  { width: clamp(150px, 18vw, 280px); }
.decor--l  { width: clamp(220px, 26vw, 420px); }
.decor--xl { width: clamp(300px, 34vw, 560px); }

@media (max-width: 760px) { .decor--l, .decor--xl { display: none; } }

/* Sections colorées pleines */
.section--rose  { background: var(--rose-voile); }
.section--vert  { background: var(--vert-voile); }
.section--sauge { background: var(--vert-clair); }
.section--sauge .titre-charte, .section--sauge h2, .section--sauge h3 { color: var(--vert-fonce); }
.section--sauge .chapeau, .section--sauge p { color: #3B4738; }
.section--sauge .sur-titre { color: var(--vert-fonce); }
.section--sombre { background: var(--vert-fonce); color: var(--creme); }
.section--sombre .chapeau, .section--sombre p { color: rgba(250, 244, 234, .84); }
.section--sombre .sur-titre { color: var(--jaune); }

/* Pastille d'icône au trait */
.pastille-ico {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--creme-2);
  color: var(--vert);
  flex: none;
}
.pastille-ico svg { width: 28px; height: 28px; }
.pastille-ico--rose  { background: var(--rose-voile); color: var(--rose-texte); }
.pastille-ico--sauge { background: var(--vert-voile); color: var(--vert); }
.pastille-ico--jaune { background: #FFF3D6; color: #8A6600; }


/* =========================================================================
   Cartes de prestation — une photographie, un intitulé posé dessus
   Reprises pour « Trouver le bon interlocuteur » : on choisit d'abord avec
   l'œil, le nom du praticien vient ensuite.
   ========================================================================= */
.prestations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 1080px) { .prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .prestations { grid-template-columns: minmax(0, 1fr); } }

.prestation {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  max-height: min(26svh, 230px);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: var(--blanc);
  box-shadow: var(--photo-ombre);
  transition: transform var(--transi), box-shadow var(--transi);
}
.prestation img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transi-l);
}
.prestation__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(44,55,41,.88) 0%, rgba(44,55,41,.42) 42%, rgba(44,55,41,.04) 78%);
}
.prestation__corps {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(.85rem, 1.4vw, 1.25rem);
}
.prestation__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.4vw, 1.38rem);
  line-height: 1.15;
  color: var(--blanc);
  margin: 0;
}
.prestation__mention {
  display: block;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(255, 252, 247, .84);
  margin-top: .28rem;
}
@media (hover: hover) and (pointer: fine) {
  .prestation:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
  .prestation:hover img { transform: scale(1.06); }
}
.prestation:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }


/* =========================================================================
   L'équipe — une rangée qui défile
   Onze praticiens ne tiennent pas dans un écran en grille : on les met sur
   une seule rangée que l'on fait défiler. Traitement dessiné d'après le
   dossier de charte : cadre corail, accent organique posé derrière la
   photographie, nom en capitales, lien corail.
   ========================================================================= */
.equipe { position: relative; }

.equipe__piste {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* la rangée saigne jusqu'aux bords ; le padding rétablit l'alignement
     sur l'enveloppe, si bien que la première carte reste dans la colonne. */
  padding: .4rem max(var(--gouttiere), calc((100% - var(--large)) / 2)) 1.2rem;
  /* sans cela, l'aimantation colle la première carte au bord du conteneur
     et annule le padding qui l'alignait sur l'enveloppe. */
  scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--large)) / 2));
}
.equipe__piste::-webkit-scrollbar { display: none; }
.equipe__piste:focus-visible { outline: 3px solid var(--jaune); outline-offset: -3px; }

.visage {
  flex: 0 0 clamp(210px, 21vw, 262px);
  scroll-snap-align: start;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Accent graphique de la charte, glissé derrière le cadre */
.visage__accent {
  position: absolute;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.visage__accent svg { width: 100%; height: auto; display: block; }
.visage__accent--bd { right: -13%; bottom: 26%; width: 44%; }
.visage__accent--hd { right: -9%;  top: -7%;   width: 26%; }

.visage__cadre {
  display: block;
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--rose);
  border-radius: var(--photo-rayon);
  overflow: hidden;
  background: var(--creme-2);
}
.visage__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transi-l);
}
.visage:hover .visage__cadre img { transform: scale(1.05); }

.visage__corps { display: block; position: relative; z-index: 1; padding-top: .9rem; }
.visage__nom {
  font-family: var(--corps);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.2;
  margin: 0 0 .35rem;
}
.visage__role {
  display: block;
  font-size: .97rem;
  color: var(--encre-2);
  line-height: 1.35;
  margin-bottom: .5rem;
}
.visage__texte {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--encre-3);
  margin: 0 0 .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.visage__lien {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--rose-texte);
}
.visage__lien svg { width: 17px; transition: transform var(--transi); }
.visage:hover .visage__lien svg { transform: translateX(5px); }

/* Pilotage du défilement */
.equipe__pilotage { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; }
.equipe__pilotage .btn { margin-left: auto; }
.defile-bouton {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--vert-clair);
  background: transparent;
  color: var(--vert);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transi), color var(--transi), border-color var(--transi), opacity var(--transi);
}
.defile-bouton svg { width: 20px; height: 20px; }
.defile-bouton:hover:not(:disabled) { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.defile-bouton:disabled { opacity: .32; cursor: default; }

@media (prefers-reduced-motion: reduce) { .equipe__piste { scroll-behavior: auto; } }

@media (max-width: 620px) {
  .equipe__pilotage { flex-wrap: wrap; }
  .equipe__pilotage .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* =========================================================================
   Prise de rendez-vous — sélection du praticien puis agenda
   On choisit d'abord une personne, ses disponibilités s'affichent ensuite :
   c'est la logique que les patientes connaissent déjà des plateformes de
   santé, et elle évite d'avoir à comprendre l'organisation du Pavillon.
   ========================================================================= */
.rdv-choix {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding: .3rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
}
.rdv-choix::-webkit-scrollbar { display: none; }

.rdv-visage {
  flex: 0 0 clamp(96px, 11vw, 128px);
  scroll-snap-align: start;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  opacity: .58;
  transition: opacity var(--transi), transform var(--transi);
}
.rdv-visage img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 2px solid transparent;
  transition: border-color var(--transi);
}
.rdv-visage:hover { opacity: .85; transform: translateY(-3px); }
.rdv-visage.est-actif { opacity: 1; }
.rdv-visage.est-actif img { border-color: var(--rose); }
.rdv-visage:focus-visible { outline: 3px solid var(--vert); outline-offset: 4px; border-radius: 14px; }

.rdv-visage__nom {
  display: block;
  margin-top: .6rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vert);
}
.rdv-visage__metier {
  display: block;
  margin-top: .15rem;
  font-size: .74rem;
  line-height: 1.3;
  color: var(--encre-3);
}

.rdv-panneaux { margin-top: .4rem; }
.rdv-panneau { display: none; }
.rdv-panneau.est-actif {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--ombre-1);
}
.rdv-panneau__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--creme-3);
}
.rdv-panneau__entete h3 { margin: 0 0 .2rem; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.rdv-panneau__metier { margin: 0; color: var(--rose-texte); font-weight: 600; font-size: .92rem; }
.rdv-panneau__intro { max-width: 62ch; }

/* Cadre de l'agenda : réservé avant chargement pour éviter le sursaut. */
.rdv-agenda {
  min-height: 560px;
  margin-top: 1.4rem;
  border-radius: var(--rayon-s);
  overflow: hidden;
}
@media (max-width: 620px) { .rdv-agenda { min-height: 640px; } }

/* =========================================================================
   Composants des pages intérieures
   Reprennent le vocabulaire de l'accueil : formes organiques, cadres corail,
   fonds colorés — pour que le texte ne soit jamais simplement posé.
   ========================================================================= */

/* Bloc de propos : un passage isolé sur fond coloré, marqué d'une icône. */
.propos { text-align: center; }
.propos .pastille-ico { margin: 0 auto 1.2rem; }
.propos h2 { margin-bottom: 1.2rem; }
.propos__texte { max-width: 64ch; margin-inline: auto; text-align: left; }
@media (max-width: 620px) { .propos__texte { text-align: left; } }

/* Chemin numéroté : les étapes d'une séance, reliées par un filet. */
.parcours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  position: relative;
}
/* le filet qui relie les étapes, derrière les pastilles */
.parcours::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 27px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--vert-clair) 0 8px, transparent 8px 16px);
}
.parcours__etape { display: block; position: relative; text-align: center; }
.parcours__numero {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--vert);
  color: var(--creme);
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--creme);
}
.parcours__titre { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0 0 .5rem; }
.parcours__texte { font-size: .92rem; line-height: 1.6; color: var(--encre-2); margin: 0; }

@media (max-width: 900px) {
  .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours::before { display: none; }
}
@media (max-width: 520px) { .parcours { grid-template-columns: minmax(0, 1fr); } }

/* Grille de visages : même carte que la rangée défilante de l'accueil,
   mais posée en grille quand il n'y a que deux ou trois personnes. */
.visages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 262px));
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.visages .visage { flex: none; }

/* Fiche praticien : portrait encadré, métier en corail, respiration */
.fiche__portrait { max-width: 420px; }
.fiche__portrait img { width: 100%; height: auto; display: block; }
.fiche__metier {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rose-texte);
  margin: 0 0 1.4rem;
}
@media (max-width: 880px) { .fiche__portrait { max-width: none; } }

/* --------------------------------------------- Sélecteur de praticien
   Même grammaire que les portraits-onglets de l'accueil : le cercle actif
   est cerclé de corail, son nom passe en corail. */
.rdv-visage img { border-width: 2px; }
.rdv-visage.est-actif img {
  border-color: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-voile);
}
.rdv-visage.est-actif .rdv-visage__nom { color: var(--rose-texte); }
.rdv-visage.est-actif .rdv-visage__metier { color: var(--vert); }
.rdv-visage:focus-visible { outline-color: var(--rose); }

/* Flèches de défilement : cerclées de corail, remplies de vert au survol */
.defile-bouton { border-color: var(--rose); color: var(--vert); }
.defile-bouton:hover:not(:disabled) { background: var(--vert); border-color: var(--vert); color: var(--blanc); }

/* Portrait manquant : un cartouche qui dit ce qu'il est, plutôt qu'un
   visage d'emprunt sous le nom d'une praticienne. */
.portrait-attente {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--creme-2);
  overflow: hidden;
}
.fiche__portrait .portrait-attente { aspect-ratio: 4 / 5; }
.portrait-attente__decor {
  position: absolute;
  right: -18%; bottom: -14%;
  width: 62%;
  line-height: 0;
}
.portrait-attente__decor svg { width: 100%; height: auto; display: block; }
.portrait-attente__initiale {
  position: relative;
  font-family: var(--titre);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 500;
  color: var(--vert);
  line-height: 1;
}
.portrait-attente__mention {
  position: absolute;
  bottom: .9rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-3);
}

/* =========================================================================
   Confort tactile
   Le site s'adresse en partie à des personnes âgées : sur écran tactile,
   une cible de 18 px de haut est très difficile à viser. On élargit la zone
   cliquable sans toucher à la taille du texte ni à la mise en page.
   ========================================================================= */
@media (hover: none), (max-width: 760px) {
  /* hauteur minimale plutôt que du padding : la cible atteint 44 px quelle
     que soit la taille du texte, sans décaler la mise en page. */
  .pied a,
  .fil a,
  .plan-site a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .entete__tel { min-height: 44px; display: inline-flex; align-items: center; }
  /* les liens dans le corps du texte gagnent de la marge sans casser le flux */
  .contenu-riche a:not([class]),
  .lien-texte { padding-block: .7rem; }
}

/* Consigne du répondeur, sous le mode de prise de rendez-vous par téléphone */
.rdv-panneau__repondeur {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  background: var(--creme-2);
  border-left: 3px solid var(--rose);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--encre-2);
  max-width: 62ch;
}

/* =========================================================================
   Rappels du logo
   Le symbole du Pavillon revient en filigrane au fil de la page : très pâle
   en fond de section claire, et en petit séparateur entre deux blocs.
   Purement décoratif — jamais porteur d'information.
   ========================================================================= */
.filigrane {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/symbole-gaia.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .06;
}
.filigrane--tr { top: -3%;  right: -4%; width: clamp(160px, 22vw, 340px); aspect-ratio: 44 / 58; }
.filigrane--bl { bottom: -5%; left: -5%; width: clamp(150px, 20vw, 300px); aspect-ratio: 44 / 58; }
.filigrane--c  { top: 50%; left: 50%; transform: translate(-50%, -50%);
                 width: clamp(280px, 40vw, 620px); aspect-ratio: 44 / 58; opacity: .04; }
/* sur fond coloré le filigrane doit rester lisible sans salir la teinte */
.section--vert .filigrane, .section--rose .filigrane { opacity: .1; }
.section--sombre .filigrane { opacity: .07; }
@media (max-width: 700px) { .filigrane--c { display: none; } }

/* Séparateur : le symbole entre deux sections, comme un point de suspension */
.jalon {
  display: block;
  width: 34px;
  height: 45px;
  margin: 0 auto;
  background: url("../img/symbole-gaia.webp") center / contain no-repeat;
  opacity: .55;
}
.jalon--filet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 0 auto;
  max-width: 380px;
}
.jalon--filet::before, .jalon--filet::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--creme-3));
}
.jalon--filet::after { background: linear-gradient(270deg, transparent, var(--creme-3)); }

/* ------------------------------------------------- atelier mis en avant */
/* Le seul atelier avec un horaire, un tarif et des places comptées :
   il mérite un traitement à part de la grille des cartes. */
.atelier-phare {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--creme-3);
  border-radius: 18px;
  background: var(--blanc);
}
.atelier-phare__tete { margin-bottom: 1.5rem; }
.atelier-phare__tete h2 { margin: 0 0 .6rem; }
.atelier-phare__bandeau {
  display: inline-block; margin: 0;
  padding: .4rem 1rem; border-radius: 999px;
  background: var(--vert-voile); color: var(--vert-fonce);
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.atelier-phare__corps { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .atelier-phare__corps { grid-template-columns: 1.35fr 1fr; } }
.atelier-phare__texte p { margin: 0 0 1rem; }
.atelier-phare__adapte {
  padding: .9rem 1.1rem; border-left: 3px solid var(--rose);
  border-radius: 0 10px 10px 0; background: var(--rose-voile);
  color: var(--encre-2); font-style: italic;
}
.atelier-phare__cote { padding: 1.25rem; border-radius: 14px; background: var(--creme); }
.atelier-phare__cote h3 { margin: 0 0 .8rem; font-size: 1.05rem; }
.atelier-phare__objectifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.atelier-phare__objectifs li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; color: var(--encre-2); }
.atelier-phare__objectifs li::before {
  content: ""; width: 9px; height: 9px; margin-top: .5em;
  border-radius: 50%; background: var(--jaune);
}
.atelier-phare__pratique {
  display: grid; gap: 1px; margin: 1.75rem 0 0; padding: 0;
  background: var(--creme-3); border: 1px solid var(--creme-3); border-radius: 12px; overflow: hidden;
}
@media (min-width: 700px) { .atelier-phare__pratique { grid-template-columns: repeat(5, 1fr); } }
.atelier-phare__pratique > div { padding: .9rem 1rem; background: var(--creme); }
.atelier-phare__pratique dt {
  margin: 0 0 .25rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3);
}
.atelier-phare__pratique dd { margin: 0; font-weight: 600; color: var(--vert-fonce); line-height: 1.35; }
.atelier-phare__lien { margin: 1.25rem 0 0; font-size: .95rem; color: var(--encre-2); }

/* ------------------------------------- encadré d'activité sur une fiche */
/* Signale qu'une praticienne anime aussi un atelier collectif, distinct de
   ses consultations individuelles. */
.encadre-atelier {
  margin: 1.75rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--vert-clair);
  border-left: 4px solid var(--vert);
  border-radius: 0 14px 14px 0;
  background: var(--vert-voile);
}
.encadre-atelier__sur-titre {
  margin: 0 0 .35rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vert);
}
.encadre-atelier h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--vert-fonce); }
.encadre-atelier p { margin: 0 0 1rem; color: var(--encre-2); }
.encadre-atelier .btn { margin: 0; }

/* Agenda Cal.com de l'atelier (affiché seulement si atelierPhare.cal est renseigné) */
.cal-embed{
  margin:2.5rem auto 0;
  max-width:56rem;
  min-height:38rem;
  border-radius:var(--rayon, 1.25rem);
  overflow:hidden;
  background:var(--blanc);
  box-shadow:0 1.25rem 3rem -1.5rem rgba(15,74,22,.28);
}
.cal-embed iframe{width:100%;border:0;display:block}