/* =====================================================================
   MASSE-MON-STRESS — démo de référence MASSOTHÉRAPIE · LuxAura Studio
   ---------------------------------------------------------------------
   Palette « lin et eucalyptus ». Volontairement l'opposé de la démo
   Déneigement Roger (nuit, Archivo Black, blizzard) : ici c'est le jour,
   le lin, la respiration. Deux niches, deux ambiances, même finition.

   Divergence assumée avec Roger : racine typographique NORMALE (16 px)
   au lieu de la racine gonflée à ~11 px. Les planchers de lisibilité de
   CLAUDE.md sont écrits en rem « normaux » — avec une racine normale ils
   se vérifient littéralement, sans conversion mentale.
   ===================================================================== */

/* ---------- POLICES (auto-hébergées, zéro Google Fonts externe) ------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- TOKENS --------------------------------------------------- */
:root {
  /* Socle jour */
  --lin:        #F4F0E8;  /* [USAGE : fond principal du site] */
  --lin-2:      #EAE3D7;  /* [USAGE : bandes de section alternées] */
  --craie:      #FDFCFA;  /* [USAGE : cartes, surfaces surélevées] */
  --encre:      #23302B;  /* [USAGE : tout le texte courant — vert-noir, pas noir pur] */
  --eucalyptus: #4A6B5D;  /* [USAGE : titres, filets, couleur de marque] */
  --sauge:      #55695E;  /* [USAGE : texte secondaire, filigranes, états inactifs]
                             Assombri à la QA du 13 août : le #8FA79A d'origine
                             donnait 2,0:1 sur le lin — sous le 4,5:1 de WCAG AA,
                             et il porte de vraies phrases (descriptions des soins,
                             signatures d'avis). Ici : 5,2:1 sur lin, 4,6:1 sur lin-2. */
  --argile:     #96502E;  /* [USAGE : UNIQUEMENT les actions — boutons, prix, focus]
                             Assombri à la QA du 13 août : le #C0714A d'origine
                             tombait à 3,2:1 en TEXTE (prix « 90 $ », personas,
                             spécialités) et 3,7:1 en fond de bouton — sous AA
                             des deux côtés, et l'argile porte les PRIX.
                             Ici : 5,3:1 sur lin, 4,7:1 sur lin-2. */
  --argile-f:   #7E4126;  /* [USAGE : survol des boutons pleins] */
  --bord:       rgba(35, 48, 43, 0.12);  /* [USAGE : filets, séparateurs] */
  --bord-fort:  rgba(35, 48, 43, 0.30);  /* [USAGE : bordures de boutons fantômes] */

  /* Typo */
  --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --police-corps: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle — mobile. Les valeurs desktop sont plus bas, en media query. */
  --fs-corps: 1.05rem;   /* 16,8 px · plancher mobile corps = 1rem      ✓ */
  --fs-lead:  1.2rem;    /* [USAGE : chapeaux d'intro] */
  --fs-ui:    0.95rem;   /* 15,2 px · plancher mobile UI = 0,8rem       ✓ */
  --fs-note:  0.9rem;    /* 14,4 px · `.note` porte de vraies phrases
                            (descriptions des soins, note du téléphone) :
                            c'est du TEXTE SECONDAIRE, plancher 0,9rem —
                            pas un badge à 0,75rem.                     ✓ */

  /* Rythme */
  --pad-x:      clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --section-y:  clamp(4rem, 2rem + 9vw, 9rem);
  --col-gap:    clamp(2rem, 1rem + 4vw, 5rem);
  --radius:     2px;     /* presque droit : le lin ne fait pas de coins ronds */
  --max:        1280px;

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Desktop : le plancher absolu de CLAUDE.md est 1,1rem pour TOUT,
   y compris les boutons, labels, badges et le pied de page. */
@media (min-width: 769px) {
  :root {
    --fs-corps: 1.2rem;
    --fs-lead:  1.55rem;
    --fs-ui:    1.1rem;
    --fs-note:  1.1rem;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--police-corps);
  font-size: var(--fs-corps);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* Un <picture> est `inline` par défaut : il garde alors l'espace sous la
   ligne de base et pousse un décalage de mise en page (CLS). */
picture { display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--eucalyptus);
}
h1 { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.1vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.contenu { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section-lin2 { background: var(--lin-2); }

/* Le petit sur-titre en capitales espacées : signature du site. */
.kicker {
  font-size: var(--fs-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sauge);
  margin: 0 0 1.2rem;
  font-weight: 600;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--encre); }
.note { font-size: var(--fs-note); color: var(--sauge); }

/* Accessibilité : un focus visible partout, en argile. */
:focus-visible { outline: 3px solid var(--argile); outline-offset: 3px; }
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--eucalyptus); color: var(--lin); padding: 0.9rem 1.4rem;
  font-size: var(--fs-ui);
}
.saut-contenu:focus { left: 0; }

/* ---------- BOUTONS -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--police-corps);
  font-size: var(--fs-ui); font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--sortie), color 0.35s var(--sortie),
              border-color 0.35s var(--sortie), transform 0.35s var(--sortie);
}
.btn-plein { background: var(--argile); color: var(--lin); }
.btn-plein:hover { background: var(--argile-f); transform: translateY(-2px); }
.btn-fantome { background: transparent; color: var(--eucalyptus); border-color: var(--bord-fort); }
.btn-fantome:hover { border-color: var(--eucalyptus); background: rgba(74, 107, 93, 0.06); }
.btn-clair { background: transparent; color: var(--lin); border-color: rgba(244, 240, 232, 0.5); }
.btn-clair:hover { background: rgba(244, 240, 232, 0.14); border-color: var(--lin); }

/* ---------- NAVIGATION (patron Roger : fixe + voile au défilement) ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.nav.nav-fond {
  background: color-mix(in srgb, var(--lin) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--bord);
}
.nav-inner {
  max-width: var(--max); margin-inline: auto; padding: 1.1rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo {
  font-family: var(--police-titre); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  color: var(--eucalyptus); text-decoration: none; letter-spacing: -0.02em; line-height: 1;
}
/* Sur le héros sombre, la nav passe en clair tant qu'elle n'est pas voilée. */
.nav:not(.nav-fond) .logo,
.nav:not(.nav-fond) .nav-liens a { color: var(--lin); }
.nav:not(.nav-fond) .nav-burger span { background: var(--lin); }

.nav-liens { display: flex; align-items: center; gap: clamp(1.2rem, 0.5rem + 1.8vw, 2.4rem); }
.nav-liens a {
  font-size: var(--fs-ui); text-decoration: none; color: var(--encre);
  letter-spacing: 0.04em; position: relative; padding-block: 0.3rem;
}
/* `.nav-liens a` (0,2,0) l'emportait sur `.btn-plein` (0,1,0) : dès que la nav
   se voile — donc en permanence sur les pages internes — le bouton Réserver
   repassait en texte encre sur fond argile (2,3:1). Il garde son texte clair. */
.nav-liens a.btn-plein { color: var(--lin); }
.nav-liens a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width 0.4s var(--sortie);
}
.nav-liens a:hover::after, .nav-liens a[aria-current='page']::after { width: 100%; }

.nav-burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-burger span {
  display: block; height: 2px; width: 24px; background: var(--encre);
  transition: transform 0.35s var(--sortie), opacity 0.2s;
}
.nav-ouverte .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ouverte .nav-burger span:nth-child(2) { opacity: 0; }
.nav-ouverte .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-liens {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--lin); border-bottom: 1px solid var(--bord);
    /* max-height plutôt que display:none — l'a11y survit à la transition */
    max-height: 0; overflow: hidden; transition: max-height 0.45s var(--sortie);
  }
  .nav-ouverte .nav-liens { max-height: 70vh; }
  .nav-liens a { width: 100%; padding: 1.1rem var(--pad-x); color: var(--encre) !important; }
  .nav-liens .btn { margin: 0.6rem var(--pad-x) 1.4rem; }
  .nav:not(.nav-fond) .nav-liens a { color: var(--encre); }
}

/* ---------- HÉROS ---------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip; isolation: isolate;
}
.hero-fond { position: absolute; inset: 0; z-index: -2; overflow: clip; }
/* 50% 32% : le héros est une photo d'équipe, les visages vivent dans le haut
   du cadre. Un cadrage plus bas leur coupait le front en plein écran. */
.hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 32%; }
/* Voile sculpté : sombre en bas pour porter le texte, clair en haut pour l'air. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(21, 30, 26, 0.82) 0%, rgba(21, 30, 26, 0.35) 42%, rgba(21, 30, 26, 0.12) 70%),
    linear-gradient(105deg, rgba(35, 48, 43, 0.34) 0%, rgba(35, 48, 43, 0) 55%);
}
/* width:100% est nécessaire : en enfant de flex, la boîte se rétrécirait
   sur son contenu et les marges auto la centreraient, ce qui décalerait
   le héros par rapport à la colonne du reste du site. */
.hero-texte { width: 100%; padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.hero h1 { max-width: 20ch; }
.hero h1 { color: var(--lin); }
.hero .kicker { color: rgba(244, 240, 232, 0.8); }
.hero-sous {
  color: rgba(244, 240, 232, 0.92);
  font-size: var(--fs-lead); line-height: 1.5;
  max-width: 34rem; margin: 1.6rem 0 2.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Le titre monte ligne par ligne derrière un masque. Tout en CSS : aucune
   bibliothèque, et ça tourne même dans un onglet d'arrière-plan. */
.ligne-masque { overflow: hidden; display: block; }
.ligne-masque > span { display: block; }
.js .hero-fond img { animation: poser 2.4s var(--sortie) both; }
.js .ligne-masque > span { animation: monte 1.1s var(--sortie) both; }
.js .ligne-masque:nth-child(1) > span { animation-delay: 0.15s; }
.js .ligne-masque:nth-child(2) > span { animation-delay: 0.24s; }
.js .ligne-masque:nth-child(3) > span { animation-delay: 0.33s; }
.js .hero-sous    { animation: leve 0.9s var(--sortie) 0.55s both; }
.js .hero-actions { animation: leve 0.9s var(--sortie) 0.72s both; }

@keyframes poser { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes monte { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes leve  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- HÉROS SUR TÉLÉPHONE : SÉPARÉ, PAS SUPERPOSÉ ---------------
   Le portrait généré répartit les trois massothérapeutes sur toute la
   hauteur du cadre : en plein écran, le titre couvrait le visage de la
   deuxième et le sous-titre celui de la troisième. Aucun cadrage ne le
   règle (l'image tombe pile à la hauteur du bloc). On sépare donc les
   deux : la photo en haut, le texte dessous sur le lin.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero { min-height: 0; display: block; }
  /* Sort du fond absolu et redevient une bande dans le flux. La bande se
     mesure en RATIO, jamais en svh : une hauteur d'écran fait varier le
     recadrage, et sur un 640 de haut la troisième massothérapeute perdait
     le menton. Un ratio fixe donne le même cadrage sur tous les téléphones. */
  .hero-fond { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 5 / 6; }
  .hero-fond img { object-position: 50% 24%; }
  /* Le voile ne porte plus le texte : il ne sert qu'à garder la nav claire
     lisible sur le haut de la photo. Il se limite donc à la bande image. */
  .hero::after {
    inset: 0 0 auto 0; height: calc(100vw * 6 / 5); z-index: 1;
    background: linear-gradient(to bottom,
      rgba(21, 30, 26, 0.52) 0%, rgba(21, 30, 26, 0.14) 34%, rgba(21, 30, 26, 0) 60%);
  }
  /* Texte sombre sur lin : les couleurs « sur photo » ne tiennent plus. */
  .hero-texte { padding-block: 2.4rem 3rem; }
  .hero h1 { color: var(--eucalyptus); }
  .hero-sous { color: var(--encre); }
  .hero .btn-clair { color: var(--eucalyptus); border-color: var(--bord-fort); }
  .hero .btn-clair:hover { background: rgba(74, 107, 93, 0.06); border-color: var(--eucalyptus); }
}

/* ---------- EN-TÊTE DES PAGES INTERNES -------------------------------
   Pas de héros ici : il faut dégager la hauteur de la nav fixe, sinon le
   H1 passe dessous. La nav y reste voilée en permanence (voir site.js).
   -------------------------------------------------------------------- */
.entete { padding-top: calc(var(--section-y) + 4.5rem); }
.entete h1 { max-width: 16ch; }
.entete .lead { max-width: 44rem; margin-top: 1.6rem; }

/* ---------- MEDIA + HOVER-ZOOM --------------------------------------
   L'effet demandé par Yannick. Roger n'en a pas : ses zooms sont au
   chargement et au défilement. On reprend SA valeur (1.12) pour rester
   dans la même famille de sensation.
   `@media (hover: hover)` évite l'état qui reste collé au doigt sur
   tactile, où :hover se déclenche au tap et ne se relâche jamais.
   -------------------------------------------------------------------- */
.media { position: relative; overflow: clip; background: var(--lin-2); }
.media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.75s var(--sortie);
}
@media (hover: hover) {
  .media:hover img, a:hover .media img { transform: scale(1.12); }
}
.media-4-5 { aspect-ratio: 4 / 5; }
.media-3-2 { aspect-ratio: 3 / 2; }
.media-16-9 { aspect-ratio: 16 / 9; }

/* ---------- INTRO DEUX TEMPS ----------------------------------------- */
.duo {
  display: grid; gap: var(--col-gap);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) { .duo { grid-template-columns: 0.85fr 1.15fr; } }
.duo h2 { margin-bottom: 0.4rem; }

/* ---------- GRILLE D'APERÇU DES SOINS (accueil) ----------------------- */
.grille-soins {
  display: grid; gap: clamp(1.5rem, 0.8rem + 2vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 3.5rem;
}
.carte-soin { text-decoration: none; display: block; color: inherit; }
.carte-soin h3 { margin: 1.1rem 0 0.35rem; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); }
.carte-soin .note { color: var(--sauge); }
.carte-soin .num {
  font-family: var(--police-titre); font-size: var(--fs-note);
  color: var(--argile); letter-spacing: 0.1em;
}

/* ---------- ZIGZAG DES 6 SOINS (page services) ------------------------ */
.soin {
  position: relative;
  display: grid; gap: var(--col-gap); align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  border-top: 1px solid var(--bord);
}
.soin:first-of-type { border-top: 0; }
@media (min-width: 900px) {
  .soin { grid-template-columns: 1fr 1fr; }
  /* Le zigzag : une ligne sur deux, l'image passe à droite. */
  .soin:nth-child(even) .soin-media { order: 2; }
}
.soin-corps { position: relative; z-index: 1; }
/* Le numéro d'index, à GAUCHE du titre (13 août). Il était auparavant un
   chiffre géant en filigrane DERRIÈRE le texte : il brouillait à la fois le
   sur-titre et le nom du soin. Il vit maintenant dans le <h2>, dimensionné
   en `em` pour suivre le titre, et remonté à hauteur de capitale. */
.soin-num {
  font-family: var(--police-titre);
  font-size: 0.45em;
  vertical-align: 0.62em;
  color: var(--argile);
  letter-spacing: 0.04em;
  margin-right: 0.45em;
  user-select: none;
}
.soin-persona {
  font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--argile); margin: 0 0 0.8rem;
}
.soin h2 { margin-bottom: 0.9rem; }
.soin-desc { max-width: 34rem; }

/* Lignes de conduite tarifaires — le plus beau détail de la référence,
   repris puis animé : le filet se trace au défilement. */
.tarifs { list-style: none; margin: 2rem 0 2.2rem; padding: 0; max-width: 30rem; }
.tarif {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-block: 0.7rem;
  font-size: var(--fs-ui);
}
.tarif-duree { font-family: var(--police-titre); color: var(--eucalyptus); white-space: nowrap; }
.tarif-filet {
  flex: 1 1 auto; height: 1px; background: var(--bord-fort);
  transform-origin: left center;
}
/* Le filet n'est rétracté que si JS est là pour le dérouler. Sans JS,
   il est simplement tracé — jamais d'élément invisible sans issue. */
.js .tarif-filet { transform: scaleX(0); }
.tarif-prix { font-family: var(--police-titre); color: var(--argile); white-space: nowrap; }

/* ---------- RAIL D'INDEX COLLANT (page services) ---------------------- */
/* ⚠️ L'ordre compte : `.rail { display:none }` doit être déclaré AVANT la
   media query, sinon (spécificité égale) c'est lui qui gagne, le rail
   disparaît, et les six soins tombent dans la colonne de 7rem. */
.services-corps { display: grid; grid-template-columns: 1fr; gap: 0; }
.rail { display: none; position: sticky; top: 45vh; align-self: start; }
@media (min-width: 1080px) {
  .services-corps { grid-template-columns: 7rem 1fr; gap: 3rem; }
  .rail { display: block; }
}
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin-bottom: 0.85rem; }
.rail a {
  font-family: var(--police-titre); font-size: var(--fs-note);
  color: var(--sauge); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  transition: color 0.4s var(--sortie);
}
.rail a::before {
  content: ''; width: 1.1rem; height: 1px; background: currentColor;
  transition: width 0.4s var(--sortie);
}
.rail a.actif { color: var(--argile); }
.rail a.actif::before { width: 2.2rem; }

/* ---------- BANDEAU DÉFILANT DE BIENFAITS ---------------------------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--bord);
  padding-block: 1.5rem; background: var(--lin);
}
.marquee-piste {
  display: flex; gap: 3.5rem; width: max-content;
  animation: glisse 42s linear infinite;
}
.marquee span {
  font-family: var(--police-titre); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem);
  color: var(--eucalyptus); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.marquee span::after { content: '·'; color: var(--argile); }
@keyframes glisse { to { transform: translateX(-50%); } }
.marquee:hover .marquee-piste { animation-play-state: paused; }

/* ---------- TÉMOIGNAGES ---------------------------------------------- */
.grille-avis {
  display: grid; gap: clamp(1.5rem, 0.8rem + 2vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-top: 3rem;
}
.avis {
  background: var(--craie); border: 1px solid var(--bord);
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
}
.avis blockquote {
  margin: 0 0 1.2rem; font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.4; color: var(--eucalyptus);
}
.avis figcaption { font-size: var(--fs-note); color: var(--sauge); }

/* ---------- ÉQUIPE (page à propos) ------------------------------------ */
.grille-equipe {
  display: grid; gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: 3.5rem;
}
/* RETIRÉ le 13 août : un voile eucalyptus (0,55 en bas → 0,12 en haut) couvrait
   les trois portraits et ne se levait qu'au SURVOL. Sur un téléphone, où le
   survol n'existe pas, la version ternie était la seule que le visiteur voyait
   — et sur desktop, la vraie photo n'apparaissait qu'à la souris. Même famille
   que le piège du 12 août : ce qui est dégradé par défaut ne doit pas dépendre
   d'un seul geste pour redevenir normal. Les portraits sont déjà générés dans
   la palette du site, ils n'ont pas besoin d'être teintés. */
.membre h3 { margin: 1.1rem 0 0.3rem; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.membre .specialites { font-size: var(--fs-note); color: var(--argile); letter-spacing: 0.06em; }
.membre p { margin-top: 0.7rem; }

/* ---------- SECTION RÉSERVER ----------------------------------------- */
.reserver { background: var(--eucalyptus); color: var(--lin); }
.reserver h2 { color: var(--lin); }
.reserver .kicker { color: rgba(244, 240, 232, 0.7); }
.reserver-grille {
  display: grid; gap: var(--col-gap); grid-template-columns: 1fr;
  align-items: start; margin-top: 2.5rem;
}
@media (min-width: 900px) { .reserver-grille { grid-template-columns: 1fr 1fr; } }

.champ { margin-bottom: 2rem; }
.champ > legend, .champ > .champ-titre {
  font-size: var(--fs-note); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7); margin-bottom: 0.9rem; padding: 0;
}
.champ fieldset { border: 0; margin: 0; padding: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pastille { position: relative; }
.pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille span {
  display: inline-block; cursor: pointer;
  font-size: var(--fs-ui);
  padding: 0.7em 1.2em;
  border: 1px solid rgba(244, 240, 232, 0.35);
  border-radius: var(--radius);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.pastille input:checked + span { background: var(--argile); border-color: var(--argile); color: var(--lin); }
.pastille input:focus-visible + span { outline: 3px solid var(--lin); outline-offset: 3px; }

.recap {
  background: rgba(244, 240, 232, 0.09);
  border: 1px solid rgba(244, 240, 232, 0.22);
  padding: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
}
.recap-prix {
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  line-height: 1; color: var(--lin); margin: 0.4rem 0 0.2rem;
}
.recap-detail { font-size: var(--fs-ui); color: rgba(244, 240, 232, 0.85); min-height: 1.6em; }
.recap .btn { margin-top: 1.8rem; }
.recap .note { color: rgba(244, 240, 232, 0.62); margin-top: 1.2rem; }

/* ---------- FAQ ------------------------------------------------------- */
.faq { max-width: 46rem; margin-top: 2.5rem; }
.faq details { border-bottom: 1px solid var(--bord); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  color: var(--eucalyptus);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--argile); transition: transform 0.3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; max-width: 40rem; }

/* ---------- CONTACT + PIED ------------------------------------------- */
.contact-grille {
  display: grid; gap: var(--col-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: 2.5rem;
}
.contact-grille h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin-bottom: 0.6rem; }
.contact-grille a { text-decoration: none; border-bottom: 1px solid var(--bord-fort); }
.contact-grille a:hover { border-bottom-color: var(--argile); color: var(--argile); }

.pied { background: var(--encre); color: rgba(244, 240, 232, 0.78); padding-block: 3.5rem 2.5rem; }
.pied a { color: inherit; }
.pied-haut {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  justify-content: space-between; align-items: baseline;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 240, 232, 0.16);
}
.pied .logo { color: var(--lin); }
.pied-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--fs-ui); }
.pied-bas { padding-top: 2rem; font-size: var(--fs-note); line-height: 1.7; }
.pied-bas p { margin-bottom: 0.6rem; }
/* La note de provenance des couleurs — obligation /demo du 15 juillet. */
.pied-couleurs { color: rgba(244, 240, 232, 0.55); }

/* ---------- LÉGAL (patron :target de Roger) --------------------------- */
.legal { display: none; background: var(--lin-2); }
.legal:target { display: block; }
.legal h2 { margin-bottom: 1.5rem; }
.legal h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin: 2rem 0 0.7rem; }
.legal .contenu { max-width: 48rem; }

/* ---------- RÉVÉLATIONS ----------------------------------------------
   Cachées seulement si JS est là pour les révéler : sans JS, `.js` n'est
   jamais posée sur <html> et tout le contenu reste visible.
   Un IntersectionObserver pose `.vu`, le CSS fait la transition. `--i`
   est le rang de l'élément dans sa fratrie : c'est lui qui cascade.
   -------------------------------------------------------------------- */
.js .reveler {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--sortie), transform 0.9s var(--sortie);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .reveler.vu { opacity: 1; transform: none; }

/* Les filets tarifaires se tracent quand leur bloc est révélé. */
.js .tarif-filet { transition: transform 1s var(--sortie); }
.js .reveler.vu .tarif-filet { transform: scaleX(1); }
.js .reveler.vu .tarif:nth-child(1) .tarif-filet { transition-delay: 0.25s; }
.js .reveler.vu .tarif:nth-child(2) .tarif-filet { transition-delay: 0.39s; }

/* ---------- MOUVEMENT RÉDUIT (filet de sécurité global) --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-piste { animation: none; }
  .js .reveler { opacity: 1 !important; transform: none !important; }
  .tarif-filet { transform: scaleX(1) !important; }
  @media (hover: hover) {
    .media:hover img, a:hover .media img { transform: none; }
  }
}