/* ═══════════════════════════════════════════════════════════════════════════
 *  STYLE DU SITE — Lucile Clément, psychologue
 *
 *  Palette et typographie reprises de l'esprit du site de référence :
 *  bleu-gris pâle, beige chaud, Cormorant Garamond en titres.
 *
 *  Pour changer les couleurs, modifiez les valeurs du bloc « RÉGLAGES ».
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── RÉGLAGES ──────────────────────────────────────────────────────────── */
:root {
  /* Bleu-gris : la couleur principale du site */
  --bleu-tres-clair: #E8EFF1;   /* fond général */
  --bleu-clair:      #B6D1D9;   /* sections mises en avant */
  --bleu:            #899DA3;   /* accent : liens, filets, détails */
  --bleu-fonce:      #5B696D;   /* texte secondaire */
  --bleu-nuit:       #2E3436;   /* texte principal */

  /* Beige chaud : la couleur de contraste */
  --beige-clair:     #F3E4DB;
  --beige:           #E5C7B5;
  --beige-fonce:     #C29A8A;

  /* Rôles (c'est ce qui est utilisé partout dans la feuille) */
  --fond:        var(--bleu-tres-clair);
  --fond-2:      var(--bleu-clair);
  --fond-chaud:  var(--beige-clair);
  --encre:       var(--bleu-nuit);
  --encre-doux:  var(--bleu-fonce);
  --accent:      var(--bleu);
  --trait:       #C7D7DC;
  --carte:       #F4F8F9;
  --blanc:       #FFFFFF;

  /* Polices */
  --titre: "Cormorant Garamond", Garamond, Georgia, serif;
  --texte: "Jost", "Avenir Next", Avenir, -apple-system, "Segoe UI", sans-serif;

  /* Rythme */
  --large:  1200px;
  --marge:  clamp(20px, 5vw, 60px);
  --espace: clamp(76px, 10vw, 140px);
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(16px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--bleu); color: var(--blanc); }

.wrap {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--fond);
  padding: 12px 20px; z-index: 999;
}
.skip:focus { left: 0; top: 0; }

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

/* ─── TYPOGRAPHIE COMMUNE ───────────────────────────────────────────────── */
.surtitre {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4em;
}

.titre-sec {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.sous-titre {
  font-family: var(--texte);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin: 0 0 2.2em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--trait);
}

.sec-head { margin-bottom: clamp(34px, 4.5vw, 56px); }

.intro {
  max-width: 60ch;
  font-size: 1.06em;
  color: var(--encre-doux);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.intro p { margin: 0 0 1em; }
.intro p:last-child { margin-bottom: 0; }

.note {
  max-width: 64ch;
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  font-size: 0.92em;
  color: var(--encre-doux);
}

strong { font-weight: 500; color: var(--encre); }
.sec { padding-block: var(--espace); }

/* ─── BOUTONS ───────────────────────────────────────────────────────────── */
.btn {
  --h: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h);
  padding: 0 34px;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--fond);
  font-family: var(--texte);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); }

.btn-clair { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-clair:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); }

.btn-mini { --h: 38px; padding: 0 17px; font-size: 0.645rem; letter-spacing: 0.1em; flex-shrink: 0; }
.btn-grand { --h: 60px; padding: 0 46px; font-size: 0.85rem; }
.btn-plein { width: 100%; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--trait);
  transition: color .25s ease, border-color .25s ease;
}
.lien-fleche::after { content: "→"; transition: transform .3s ease; }
.lien-fleche:hover { color: var(--encre); border-bottom-color: var(--encre); }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ─── BARRE DE NAVIGATION ───────────────────────────────────────────────── */
.barre {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.barre.collee { border-bottom-color: var(--trait); }

.barre-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  /* La barre peut s'étendre au-delà du conteneur : 8 entrées de menu
     ont besoin de plus de place que le corps du texte. */
  max-width: 1340px;
}

.marque { text-decoration: none; display: grid; gap: 2px; flex-shrink: 0; }
.marque-nom {
  font-family: var(--titre);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.marque-titre {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

.nav { display: flex; gap: clamp(9px, 1.1vw, 16px); }
.nav a {
  position: relative;
  font-size: 0.655rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-doux);
  text-decoration: none;
  padding-block: 5px;
  white-space: nowrap;
  transition: color .22s ease;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav a:hover, .nav a.actif { color: var(--encre); }
.nav a:hover::after, .nav a.actif::after { transform: scaleX(1); }

/* Menu mobile */
.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--trait);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 18px; height: 1px;
  background: var(--encre);
  transition: transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--marge) 28px;
  border-top: 1px solid var(--trait);
  background: var(--fond);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile a:not(.btn) {
  padding: 13px 0;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.menu-mobile .btn { margin-top: 18px; }

/* 8 entrées de menu + le bouton « Rendez-vous » : la barre est chargée.
   En dessous de 1240px le bouton s'efface (le bouton flottant en bas à
   gauche prend le relais), puis on bascule en menu burger à 1150px. */
@media (max-width: 1240px) {
  .btn-mini { display: none; }
}
@media (max-width: 1150px) {
  .nav { display: none; }
  .burger { display: flex; }
}
@media (min-width: 1151px) {
  .menu-mobile { display: none !important; }
}

/* ─── ACCUEIL — le grand nom ────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--fond-2);
  padding-top: clamp(140px, 19vh, 205px);
  padding-bottom: clamp(96px, 13vh, 150px);
  text-align: center;
}
.hero-in { max-width: 900px; }

.hero-surtitre {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}

/* Le nom, en très grand : c'est la signature du site */
.hero-nom {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(3.4rem, 12vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--bleu-nuit);
}
.hero-nom span { display: block; }

.hero-sous {
  margin: clamp(24px, 3vw, 34px) auto 0;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.75vw, 1.22rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
}

/* Deuxième ligne du bandeau : où Lucile reçoit. Volontairement
   plus petite et plus claire, pour rester sous la qualification. */
.hero-lieux {
  margin: 12px auto 0;
  max-width: 40ch;
  font-size: clamp(0.72rem, 1.05vw, 0.82rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Un cran plus foncé que le bleu d'accent, sans aller jusqu'au bleu foncé
     du sous-titre. Augmentez le pourcentage pour assombrir davantage. */
  color: color-mix(in srgb, var(--bleu-fonce) 40%, var(--bleu));
}

.hero-accroche {
  margin: 26px auto 0;
  padding-top: 24px;
  max-width: 44ch;
  border-top: 1px solid rgba(46, 52, 54, 0.16);
  font-family: var(--titre);
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--bleu-nuit);
}

.hero-texte {
  max-width: 54ch;
  margin: 26px auto 0;
  color: var(--bleu-fonce);
}
.hero-texte p { margin: 0; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 46px);
}

.hero-mention {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--bleu-fonce);
}

.defile {
  position: absolute;
  left: 50%; bottom: 32px;
  translate: -50% 0;
  width: 1px; height: 50px;
  background: rgba(46, 52, 54, 0.18);
  overflow: hidden;
}
.defile span {
  display: block; width: 100%; height: 40%;
  background: var(--bleu-nuit);
  animation: glisse 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes glisse {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

/* ─── LES DEUX THÉRAPIES ────────────────────────────────────────────────── */
.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.phase {
  background: var(--carte);
  border: 1px solid var(--trait);
  padding: clamp(32px, 3.8vw, 52px);
  display: flex;
  flex-direction: column;
  transition: background .35s ease, border-color .35s ease;
}
.phase:hover { background: var(--blanc); border-color: var(--accent); }

.phase-num {
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}

.phase-nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.9vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 6px;
}

.phase-complet {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--trait);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-doux);
  line-height: 1.6;
}

.phase-accroche {
  font-family: var(--titre);
  font-size: 1.32rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.85em;
}

.phase-resume { color: var(--encre-doux); font-size: 0.97em; }
.phase-resume p { margin: 0 0 0.9em; }
.phase-resume p:last-child { margin-bottom: 0; }
/* Si la carte n'a pas d'accroche, le résumé récupère un peu d'air */
.phase-complet + .phase-resume { margin-top: 4px; }
.phase .lien-fleche { margin-top: auto; padding-top: 26px; align-self: flex-start; border-bottom: none; }

/* ─── SANTÉ FÉMININE ────────────────────────────────────────────────────── */
.sec-feminine { background: var(--fond-chaud); }

.feminine-grille {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .feminine-grille { grid-template-columns: 1fr; } }

.sec-feminine .surtitre { color: var(--beige-fonce); }
.sec-feminine .titre-sec { color: #4A3730; margin-bottom: 1em; }
.sec-feminine .intro { color: #6B4F42; margin-bottom: 30px; }
.sec-feminine .lien-fleche { color: var(--beige-fonce); border-bottom-color: var(--beige); }
.sec-feminine .lien-fleche:hover { color: #4A3730; border-bottom-color: #4A3730; }

.feminine-atout {
  margin: 0 0 8px;
  padding-left: 22px;
  border-left: 2px solid var(--beige-fonce);
  font-size: 0.92em;
  color: #7B5E50;
  max-width: 58ch;
}

.themes {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--beige);
}
.themes li {
  padding: 16px 0;
  border-bottom: 1px solid var(--beige);
  font-family: var(--titre);
  font-size: 1.24rem;
  line-height: 1.35;
  color: #4A3730;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.themes li::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--beige-fonce);
  flex-shrink: 0;
  position: relative;
  top: -0.35em;
}

/* ─── POURQUOI CONSULTER ────────────────────────────────────────────────── */
.motifs {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 clamp(26px, 4vw, 60px);
  border-top: 1px solid var(--trait);
}
.motifs li {
  padding: 17px 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--titre);
  font-size: 1.28rem;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.motifs li::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
  top: -0.35em;
}

/* ─── PRÉSENTATION : bandeau trois colonnes sous l'accueil ──────────────── */
.presentation {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.92fr) 1fr;
  align-items: stretch;
  /* Pleine largeur, sans marge : les panneaux touchent les bords. */
}

.pres-panneau {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 6vw, 96px) clamp(26px, 4vw, 68px);
}
.pres-gauche { background: var(--carte); }
.pres-droite { background: var(--fond-chaud); }

.pres-panneau h2 {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
}
.pres-droite h2 { color: #4A3730; }

.pres-panneau p {
  margin: 0 0 1.1em;
  max-width: 42ch;
  font-size: 0.98em;
  line-height: 1.75;
  color: var(--encre-doux);
  text-wrap: pretty;
}
.pres-droite p { color: #6B4F42; }
.pres-panneau p:last-of-type { margin-bottom: 0; }

.pres-lien {
  margin-top: clamp(26px, 3vw, 38px);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent);
  transition: color .25s ease, border-color .25s ease;
}
.pres-lien:hover { color: var(--accent); border-bottom-color: var(--encre); }
.pres-droite .pres-lien { color: #4A3730; border-bottom-color: var(--beige-fonce); }
.pres-droite .pres-lien:hover { color: var(--beige-fonce); border-bottom-color: #4A3730; }

/* La photo, au centre, du haut en bas du bandeau */
.pres-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--fond-2);
  min-height: clamp(380px, 52vw, 640px);
}
.pres-photo img {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  object-fit: cover;
  object-position: center 22%;
  /* Portrait en noir et blanc. Retirez cette ligne pour le laisser en couleur. */
  filter: grayscale(100%) contrast(1.03);
}
.pres-photo-repli {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  color: var(--bleu-fonce);
}
.pres-photo-repli span { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pres-photo-repli small { font-size: 0.7rem; line-height: 1.6; opacity: .75; }
.pres-photo-vide img { display: none; }
.pres-photo-vide .pres-photo-repli { display: flex; }

/* Sur écran moyen puis petit, les trois colonnes s'empilent */
@media (max-width: 980px) {
  .presentation { grid-template-columns: 1fr 1fr; }
  .pres-photo { grid-row: 1; grid-column: 2; min-height: 100%; }
  .pres-gauche { grid-row: 1; grid-column: 1; }
  .pres-droite { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .presentation { grid-template-columns: 1fr; }
  .pres-photo { grid-row: 1; grid-column: 1; min-height: 340px; }
  .pres-gauche { grid-row: 2; grid-column: 1; }
  .pres-droite { grid-row: 3; grid-column: 1; }
}

/* ─── LES LIEUX ─────────────────────────────────────────────────────────── */
.lieux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.lieu {
  background: var(--carte);
  border: 1px solid var(--trait);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .35s ease;
}
.lieu:hover { border-color: var(--accent); }

.lieu-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond-2); }
.lieu-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.lieu:hover .lieu-photo img { transform: scale(1.035); }

/* ── CARROUSEL DE PHOTOS ─────────────────────────────────────────────── */
.carrousel { position: relative; }

.carrousel-piste { position: relative; width: 100%; height: 100%; }

.carrousel-vue {
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.carrousel-vue[data-actif] { opacity: 1; pointer-events: auto; }
.carrousel-vue img { width: 100%; height: 100%; object-fit: cover; }

/* Sans JavaScript, la première photo reste visible */
.carrousel:not([data-pret]) .carrousel-vue:first-child { opacity: 1; }

.carrousel-fleche {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--bleu-nuit);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background .3s ease;
}
.carrousel-prec { left: 12px; }
.carrousel-suiv { right: 12px; }
.carrousel-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carrousel-fleche:hover { background: #fff; }

/* Les flèches apparaissent au survol — et toujours au clavier */
.lieu:hover .carrousel-fleche,
.carrousel-fleche:focus-visible { opacity: 1; }
@media (hover: none) { .carrousel-fleche { opacity: 1; } }

.carrousel-pastilles {
  position: absolute;
  left: 50%; bottom: 12px;
  translate: -50% 0;
  display: flex;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(46, 52, 54, 0.32);
  backdrop-filter: blur(6px);
}
.carrousel-pastilles button {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.carrousel-pastilles button[aria-selected="true"] { background: #fff; width: 18px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .carrousel-vue { transition: none; }
}

.lieu-corps { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; flex: 1; }
.lieu-corps h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  margin: 0 0 8px;
  line-height: 1.15;
}
.lieu-adresse { margin: 0 0 4px; font-size: 0.95em; }
.lieu-jours {
  margin: 0 0 18px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lieu-texte { margin: 0; color: var(--encre-doux); font-size: 0.95em; }
.lieu .lien-fleche { margin-top: auto; padding-top: 24px; align-self: flex-start; border-bottom: none; }

.pratique {
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
}
.pratique > div { background: var(--fond); padding: 26px clamp(20px, 2.2vw, 30px); }
.pratique dt {
  font-size: 0.665rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pratique dd { margin: 0; font-family: var(--titre); font-size: 1.14rem; line-height: 1.4; }

/* ─── AVIS ──────────────────────────────────────────────────────────────── */
.sec-avis { background: var(--fond-2); }

.avis-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
}
.avis-tete .sec-head { margin-bottom: 0; }

.note-globale {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 26px;
  background: var(--blanc);
  margin-bottom: 4px;
}
.note-chiffre { font-family: var(--titre); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.note-detail { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--encre-doux); }
.etoiles { color: var(--accent); font-size: 0.95rem; letter-spacing: 0.15em; line-height: 1; white-space: nowrap; }

.temoignages {
  list-style: none; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.temoignage {
  background: var(--blanc);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}
.temoignage blockquote { margin: 0 0 22px; }
.temoignage blockquote .etoiles { display: block; margin-bottom: 16px; }
.temoignage blockquote p {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.45;
}
.temoignage blockquote p::before { content: "\201C"; }
.temoignage blockquote p::after  { content: "\201D"; }

.temoignage-pied {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.temoignage-auteur { font-size: 0.86rem; font-weight: 400; }
.temoignage-date {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
  white-space: nowrap;
}
.avis-lien { margin: clamp(30px, 3.6vw, 44px) 0 0; }

/* Conteneur du widget d'avis en temps réel (Elfsight) */
.widget-avis { min-height: 320px; }

/* ─── RESSOURCES ────────────────────────────────────────────────────────── */
.articles {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.article { display: flex; }
.article a {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(26px, 3vw, 38px);
  background: var(--carte);
  border: 1px solid var(--trait);
  text-decoration: none;
  transition: background .3s ease, border-color .3s ease;
}
.article a:hover { background: var(--blanc); border-color: var(--accent); }

.puce {
  align-self: flex-start;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--trait);
  padding: 5px 12px;
  margin-bottom: 20px;
}
.article h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.3;
  margin: 0 0 1.2em;
}
.article-source {
  margin: auto 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fleche { transition: transform .3s ease; }
.article a:hover .fleche { transform: translateX(5px); }

/* ─── PRENDRE RENDEZ-VOUS ───────────────────────────────────────────────── */
.sec-rdv { background: var(--bleu-nuit); color: var(--fond); text-align: center; }
.sec-rdv .surtitre { color: var(--bleu-clair); }
.sec-rdv .titre-sec { max-width: none; }
.rdv-in { max-width: 640px; }
.rdv-texte { margin: clamp(20px, 2.6vw, 30px) 0 clamp(30px, 3.6vw, 42px); color: rgba(232,239,241,.72); }
.rdv-texte p { margin: 0; }
.sec-rdv .btn { background: var(--fond); border-color: var(--fond); color: var(--bleu-nuit); }
.sec-rdv .btn:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); color: var(--bleu-nuit); }

.rdv-coord {
  margin-top: clamp(26px, 3.2vw, 36px);
  font-size: 0.88rem;
  color: rgba(232,239,241,.62);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
}
.rdv-coord a { text-decoration: none; border-bottom: 1px solid rgba(232,239,241,.22); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.rdv-coord a:hover { color: var(--fond); border-bottom-color: var(--bleu-clair); }
.sep { opacity: .4; }

.urgence {
  margin: clamp(36px, 4.5vw, 54px) auto 0;
  max-width: 52ch;
  padding-top: 26px;
  border-top: 1px solid rgba(232,239,241,.14);
  font-size: 0.84em;
  color: rgba(232,239,241,.52);
  line-height: 1.62;
}
.urgence strong { color: rgba(232,239,241,.9); }

/* ─── CONTACT ───────────────────────────────────────────────────────────── */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr minmax(330px, 460px);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.contact-intro .intro { margin: 22px 0 36px; }

.contact-liste {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--trait);
}
.contact-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--trait);
}
.contact-lib {
  font-size: 0.665rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.contact-liste a {
  font-family: var(--titre);
  font-size: 1.16rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.contact-liste a:hover { border-bottom-color: var(--accent); }

.formulaire {
  background: var(--carte);
  border: 1px solid var(--trait);
  padding: clamp(28px, 3.4vw, 44px);
  display: grid;
  gap: 20px;
}
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; }

.champ { display: grid; gap: 8px; }
.champ label {
  font-size: 0.665rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.champ input, .champ textarea {
  width: 100%;
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 300;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--trait);
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.champ input:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.form-note { margin: -4px 0 0; font-size: 0.78em; color: var(--encre-doux); line-height: 1.55; }
.form-ok {
  margin: 0;
  padding: 16px 18px;
  background: var(--fond-2);
  font-size: 0.92em;
  color: var(--bleu-nuit);
}
.form-ok[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  LES PAGES DE DÉTAIL (TCC, ICV, santé féminine, à propos)
 * ═══════════════════════════════════════════════════════════════════════════ */

.page-hero {
  background: var(--fond-2);
  padding-top: clamp(132px, 17vh, 180px);
  padding-bottom: clamp(56px, 8vh, 90px);
}
.page-hero-in { max-width: 860px; }
.page-hero .surtitre { color: var(--bleu-fonce); }

.page-titre {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  margin: 0;
  color: var(--bleu-nuit);
  /* Si le titre doit passer à la ligne, les lignes sont réparties
     équitablement au lieu d'une longue puis une courte. */
  text-wrap: balance;
}

.page-chapeau {
  margin: clamp(22px, 3vw, 32px) 0 0;
  max-width: 52ch;
  font-family: var(--titre);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bleu-fonce);
  text-wrap: pretty;
}

.detail-grille {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .detail-grille { grid-template-columns: 1fr; } }

.detail-bloc { margin-bottom: clamp(38px, 5vw, 60px); }
.detail-bloc:last-child { margin-bottom: 0; }
.detail-bloc h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.15;
  margin: 0 0 0.7em;
}
.detail-bloc p { margin: 0 0 1.1em; color: var(--encre-doux); font-size: 1.04em; max-width: 62ch; }
.detail-bloc p:last-child { margin-bottom: 0; }

/* Vidéo intégrée dans une page de détail */
.video { margin: clamp(38px, 5vw, 56px) 0 0; }
.video-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bleu-nuit);
  border: 1px solid var(--trait);
  overflow: hidden;
}
.video-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video figcaption {
  margin-top: 12px;
  font-size: 0.84em;
  line-height: 1.55;
  color: var(--encre-doux);
}

/* Mention de la source, en bas d'une page de détail */
.source {
  margin: clamp(38px, 5vw, 56px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
  max-width: 62ch;
  font-size: 0.86em;
  line-height: 1.6;
  color: var(--encre-doux);
}
.source a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease;
}
.source a:hover { color: var(--encre); border-bottom-color: var(--encre); }

/* ─── PORTRAIT (cadre photo réutilisable) ──────────────────────────────── */
.portrait {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--fond-2);
  aspect-ratio: 1 / 1;
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Noir et blanc. Retirez cette ligne pour garder la couleur. */
  filter: grayscale(100%) contrast(1.03);
}

/* Texte de secours : affiché UNIQUEMENT si le fichier image est introuvable */
.portrait-repli {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  border: 1px dashed var(--trait);
  color: var(--encre-doux);
}
.portrait-repli span { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.portrait-repli small { font-size: 0.7rem; line-height: 1.6; opacity: .75; }
.portrait-vide img { display: none; }
.portrait-vide .portrait-repli { display: flex; }

/* Portrait dans la colonne de droite d'une page de détail */
.detail-portrait {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 20px;
}
.detail-portrait .portrait { aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
  .detail-portrait { position: static; max-width: 300px; }
}

.detail-points {
  position: sticky;
  top: 108px;
  background: var(--carte);
  border: 1px solid var(--trait);
  padding: clamp(26px, 3vw, 38px);
}
.detail-points ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.detail-points li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95em;
  line-height: 1.55;
}
.detail-points li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 13px; height: 1px;
  background: var(--accent);
}
@media (max-width: 900px) { .detail-points { position: static; } }

/* Frise du parcours, sur la page À propos */
.sec-detail .deux-col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 86px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(50px, 6vw, 80px);
  border-top: 1px solid var(--trait);
}
@media (max-width: 880px) { .sec-detail .deux-col { grid-template-columns: 1fr; } }

.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.frise li {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--trait);
}
.frise li:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 560px) { .frise li { grid-template-columns: 1fr; gap: 8px; } }

.frise-annee {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 7px;
  line-height: 1.6;
}
.frise-corps h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.24rem;
  line-height: 1.25;
  margin: 0 0 4px;
}
.frise-lieu { margin: 0; font-size: 0.85em; color: var(--accent); }
.frise-detail { margin: 10px 0 0; font-size: 0.92em; color: var(--encre-doux); line-height: 1.6; }

/* ─── PIED DE PAGE ──────────────────────────────────────────────────────── */
.pied {
  background: var(--bleu-nuit);
  color: rgba(232,239,241,.72);
  padding-block: clamp(54px, 7vw, 80px) 32px;
}
.pied-in {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr;
  gap: clamp(28px, 4vw, 54px);
  padding-bottom: 36px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(232,239,241,.14);
}
@media (max-width: 780px) { .pied-in { grid-template-columns: 1fr; gap: 28px; } }

.pied-nom {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 5px;
  color: var(--fond);
}
.pied-phrase { margin: 0; font-size: 0.85em; }

.pied-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; align-content: start; }
.pied-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .22s ease;
}
.pied-nav a:hover { color: var(--fond); }

.pied-coord { display: grid; gap: 8px; align-content: start; }
.pied-coord a { font-size: 0.88rem; text-decoration: none; transition: color .22s ease; }
.pied-coord a:hover { color: var(--bleu-clair); }

.pied-legal { margin: 0 0 8px; font-size: 0.73rem; line-height: 1.65; opacity: .6; max-width: 80ch; }

/* ─── BOUTON EN BAS DE SECTION ──────────────────────────────────────────── */
.sec-bouton {
  margin: clamp(38px, 4.5vw, 56px) 0 0;
  display: flex;
  justify-content: center;
}
/* Dans la colonne de droite de la santé féminine, il reste aligné à gauche */
.feminine-colonne .sec-bouton { justify-content: flex-start; margin-top: clamp(28px, 3.2vw, 38px); }
.sec-feminine .sec-bouton .btn { background: #4A3730; border-color: #4A3730; }
.sec-feminine .sec-bouton .btn:hover { background: var(--beige-fonce); border-color: var(--beige-fonce); color: #4A3730; }
.sec-avis .sec-bouton .btn { background: transparent; color: var(--bleu-nuit); border-color: var(--bleu-nuit); }
.sec-avis .sec-bouton .btn:hover { background: var(--bleu-nuit); color: var(--fond); }

/* ─── BOUTON FLOTTANT (bas à gauche, toujours visible) ──────────────────── */
.flottant {
  position: fixed;
  left: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 95;

  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 24px;
  border-radius: 999px;

  background: var(--bleu-nuit);
  color: var(--fond);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 6px 24px rgba(46, 52, 54, 0.22);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  animation: flottant-entree .6s cubic-bezier(.22,1,.36,1) .9s backwards;
}

.flottant:hover {
  background: var(--bleu);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(46, 52, 54, 0.3);
}

.flottant svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

@keyframes flottant-entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Sur petit écran : plus compact, pour ne pas manger l'écran */
@media (max-width: 560px) {
  .flottant {
    padding: 13px 18px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    gap: 9px;
  }
  .flottant svg { width: 15px; height: 15px; }
}

/* Très petit écran : l'icône seule, le libellé reste lu par les lecteurs d'écran */
@media (max-width: 380px) {
  .flottant { padding: 14px; border-radius: 50%; }
  .flottant span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ─── APPARITION AU DÉFILEMENT ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .defile span { animation: none; }
  .flottant { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─── IMPRESSION ────────────────────────────────────────────────────────── */
@media print {
  .barre, .defile, .formulaire, .hero-actions, .burger, .flottant { display: none; }
  .reveal { opacity: 1; transform: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec { padding-block: 22px; break-inside: avoid; }
  .hero, .page-hero, .sec-rdv, .sec-avis, .sec-feminine, .pied { background: #fff; color: #000; }
}