/* ---------------------------------------------------------------------------
   Bulle Nature — feuille de style du site.
   Parallak, septembre 2026. Refondue le 07/09/2026.

   La direction artistique complète est écrite dans docs/direction-artistique.md
   et fait foi. Ce fichier en est l'application ; en cas d'écart, c'est le
   document qui gagne.

   Le socle demandé par la cliente le 04/09/2026 est intact :
   - le logo se voit, y compris en filigrane ;
   - davantage de vert, jusqu'au sapin ;
   - les touches terracotta restent ;
   - le vert d'eau ne sert QU'AUX encadrés d'informations pratiques ;
   - le site ne ressemble à aucun autre site Parallak.

   RETOUR VERS LA MAQUETTE, le 07/09/2026 au soir, sur la parole de Nils :
   la refonte s'etait trop eloignee de la maquette que la cliente avait vue
   et aimee le 4 septembre. Ce qui lui appartient revient :
   - Cormorant Garamond porte les titres, comme dans la maquette, mais elle
     est desormais servie depuis le site, sans aucun appel a Google ;
   - les boutons retrouvent la pilule, et la terracotta pleine l'action
     principale ;
   - les cartes de soins retrouvent leur image, leur badge et leur icone ;
   - l'ombre douce et les angles arrondis reviennent sur les blocs ;
   - un mot du titre d'ouverture peut se mettre en italique.
   Ce que la refonte du 07/09 apporte et qui reste :
   - Karla remplace Plus Jakarta Sans sur le texte courant ;
   - le sapin est renforce et le filigrane du logo discipline ;
   - le choix des quatre intentions du Rituel Signature devient un
     selecteur vivant sur la page des soins.
--------------------------------------------------------------------------- */

@import url('../fonts/polices.css');

:root {
  --font-titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-texte: 'Karla', system-ui, -apple-system, sans-serif;

  /* Les verts, du plus profond au plus clair. Le sapin porte les fonds
     pleins, le feuillage les aplats secondaires, la sauge les détails. */
  --sapin: #1e3327;
  --sapin-clair: #2c4a37;
  --feuillage: #4f6153;
  --sauge: #7e9483;
  --sauge-pale: #b9c7bc;

  /* Le vert d'eau : les encadrés d'informations pratiques, et depuis l'appel
     du 24/09/2026 la touche des surtitres (Chloé : « le vert un peu plus vert
     d'eau »). Le foncé se lit sur le crème, le trait sur le sapin. */
  --vert-eau-fonce: #3f7a65;
  --vert-eau: #dceae4;
  --vert-eau-trait: #b4cfc3;

  /* Les neutres chauds. Ce sont eux qui réchauffent, pas le vert. */
  --creme: #faf7f2;
  --sable: #f1ebdd;
  --sable-fonce: #e2d7c2;
  --encre: #1f2622;
  --encre-douce: #5a635c;
  --blanc: #ffffff;

  /* Les touches terracotta, jamais en aplat plein sur une grande surface. */
  /* Assombri le 24/09/2026 : #b3684a ne donnait que 3,9:1 sur la creme,
     en texte comme sous le texte creme des boutons. */
  --terracotta: #a65b3e;
  --terracotta-clair: #d99878;
  /* Les trois praticiennes du planning (24/09/2026). Chloe garde le vert de
     « Bulle nature » de son propre planning, Alexandra le terracotta de sa
     medecine chinoise, Severine le vieux rose de la troisieme couleur. Blanc
     lisible sur chacune. */
  --p-chloe: #3f7a65;
  --p-alexandra: var(--terracotta);
  --p-severine: #946570;

  /* Les quatre intentions du Rituel Signature. Elles ne se mélangent jamais
     dans un même visuel : une intention à la fois. */
  --lacher-prise: #7e9483;
  --confiance: #b3684a;
  --energie: #c08a3e;
  --sommeil: #243b45;

  /* Les filets font tout le travail que faisaient les bordures de cartes. */
  --filet: 1px solid var(--sable-fonce);
  --filet-clair: 1px solid rgba(250, 247, 242, .18);

  /* Une seule ombre dans tout le site : celle des images. */
  --ombre-image: 0 24px 50px rgba(34, 38, 35, .12);
  --ombre-bloc: 0 12px 30px rgba(34, 38, 35, .08);
  --ombre-douce: 0 4px 14px rgba(34, 38, 35, .05);

  --rayon: 8px;
  --rayon-image: 20px;
  --rayon-bloc: 16px;
  --rayon-pilule: 9999px;

  /* L'echelle des corps : sept crans, et rien entre deux. */
  --t-1: 1.05rem;                              /* l'etiquette, en italique */
  --t-2: .9rem;                                /* le petit texte */
  --t-3: 1.05rem;                              /* le texte courant */
  --t-4: 1.45rem;                              /* le titre d'une carte, d'une etape */
  --t-5: clamp(1.55rem, 2.4vw, 2rem);          /* le titre d'un temps, d'un bloc */
  --t-6: clamp(2.1rem, 4vw, 2.9rem);           /* le titre d'une section, d'un chapeau */
  --t-7: clamp(2.6rem, 5vw, 3.8rem);           /* le seuil d'un chapitre */
  /* La terracotta appuyee, pour le survol des boutons pleins. */
  --terracotta-fonce: #8f4d33;

  --transition: .4s cubic-bezier(.22, .61, .36, 1);
  --bande: 1180px;

  /* --- SOCLE DE MESURE PARALLAK (mesure.js) --------------------------------
     Variables de thème du bandeau de consentement, conformes aux jetons du site.
     Un seul style de bouton (CNIL). Remonté au-dessus de la barre de pouce. */
  --pk-mesure-bg: var(--creme);
  --pk-mesure-color: var(--encre);
  --pk-mesure-border: var(--sable-fonce);
  --pk-mesure-font: var(--font-texte);
  --pk-mesure-size: .92rem;
  --pk-mesure-radius: var(--rayon-bloc);
  --pk-mesure-shadow: var(--ombre-bloc);
  --pk-mesure-pad: 1.25rem;
  --pk-mesure-accent: var(--terracotta);
  --pk-mesure-btn-bg: var(--sapin);
  --pk-mesure-btn-color: var(--creme);
  --pk-mesure-btn-border: var(--sapin);
  --pk-mesure-btn-hover-bg: var(--sapin-clair);
  --pk-mesure-btn-hover-color: var(--creme);
  --pk-mesure-btn-radius: var(--rayon-pilule);
  --pk-mesure-btn-pad: 10px 20px;
  --pk-mesure-btn-weight: 500;
  --pk-mesure-bottom: 1.5rem;
  --pk-mesure-bottom-mobile: calc(84px + env(safe-area-inset-bottom, 0px));

  /* ------------------------------------------------------------------------
     L'ECHELLE DES ESPACES, REFAITE LE 08/09/2026 (Nils : « il y a beaucoup de
     bugs de margin, padding »). Le defaut n'etait pas la taille : c'etait que
     chaque bloc portait sa propre valeur en dur (28, 34, 38, 56, 64, 76, 96,
     108 px), sans rapport entre elles et sans reglage pour le telephone. Sept
     points de rupture differents essayaient ensuite de les rattraper un par
     un, et se contredisaient.

     Il n'y a plus que SIX PAS, et chacun est fluide : il se retrecit tout seul
     avec la largeur de l'ecran. Aucun bloc ne redefinit un espace en pixels ;
     tous piochent ici. C'est ce qui fait qu'un ecart vu sur ordinateur se
     retrouve, a la meme proportion, sur un telephone.
     ------------------------------------------------------------------------ */
  --e-xs: clamp(6px, 1vw, 9px);
  --e-s:  clamp(11px, 1.7vw, 16px);
  --e-m:  clamp(17px, 2.6vw, 26px);
  --e-l:  clamp(24px, 3.8vw, 40px);
  --e-xl: clamp(28px, 4.4vw, 48px);
  --e-2xl: clamp(36px, 5.6vw, 64px);

  /* La gouttiere laterale, unique dans tout le site. Un telephone de 360 px ne
     peut pas donner 28 px de chaque cote sans etrangler le texte. */
  --pad: clamp(17px, 4.6vw, 28px);

  /* La respiration verticale d'une section, et la hauteur de l'en-tete dont le
     premier ecran se soustrait pour tenir exactement dans la fenetre. */
  --air: clamp(46px, 6.4vw, 74px);
  --haut-entete: 86px;

  /* La courbe de toutes les apparitions : elle part vite et se pose lentement,
     comme un objet qu'on repose sur une table. */
  --pose: cubic-bezier(.19, 1, .22, 1);
}

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

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

body {
  font-family: var(--font-texte);
  background: var(--creme);
  color: var(--encre);
  font-size: 1rem;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Un grain très fin sur toute la page. Il empêche les grands aplats crème et
   sapin de paraître plats, comme le ferait un papier légèrement texturé. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23b)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

/* Les titres s'écrivent en bas de casse, jamais en capitales. Cormorant
   Garamond a un oeil petit : elle demande un corps genereux et une graisse
   moyenne pour ne pas paraitre maigre. */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.005em;
  color: var(--sapin);
}

::selection { background: var(--sapin); color: var(--creme); }

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

.bande { width: 100%; max-width: var(--bande); margin: 0 auto; padding: 0 var(--pad); }
.bande-etroite { max-width: 820px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--sapin); color: var(--creme);
  padding: 12px 20px;
}
.saut-contenu:focus { left: 0; }

/* --- LE FILIGRANE ---------------------------------------------------------
   Le logo, très pâle, en fond des sections claires. Il se voit du coin de
   l'œil, il ne se lit pas, et n'apparaît jamais derrière un texte long. */
.filigrane { position: relative; isolation: isolate; }
.filigrane::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/logo-detoure.png') no-repeat right 48px center / auto 80%;
  opacity: .06;
}
@media (max-width: 900px) { .filigrane::before { display: none; } }

/* --- EN-TÊTE -------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 900;
  background: rgba(250, 247, 242, .96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--filet);
}
/* Le logo fourni par la cliente est ROND et un peu plus haut que large : à
   66 px de haut il ne mesurait que 58 px de large et le mot « INSTITUT »
   devenait illisible. L'en-tête tient donc 104 px, 86 px au téléphone. */
/* LE FILET DU BAS COMPTE DANS LA HAUTEUR. `--haut-entete` sert au premier
   ecran, qui se calcule en soustrayant cette hauteur de la fenetre. Tant que
   le filet s'ajoutait par-dessus, l'en-tete mesurait 87 px pour une variable
   qui en annoncait 86, et le premier ecran depassait d'autant. */
.entete-corps { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: calc(var(--haut-entete) - 1px); }
.marque { display: flex; align-items: center; flex: 0 0 auto; }
.marque img { height: 74px; width: auto; transition: height var(--transition); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-size: .88rem; font-weight: 400; color: var(--feuillage);
  position: relative; padding: 8px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: var(--terracotta); transition: right var(--transition);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--sapin); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.entete-actions { display: flex; align-items: center; gap: 12px; }

/* --- LES BOUTONS ----------------------------------------------------------
   La pilule revient : c'est la forme que la cliente a vue sur la maquette du
   4 septembre et qu'elle a aimee. L'action principale est terracotta pleine,
   la seconde reste un contour discret. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px; border-radius: var(--rayon-pilule);
  font-family: var(--font-texte);
  font-size: .89rem; font-weight: 500; letter-spacing: .005em;
  border: 1px solid transparent; text-align: center;
}
.bouton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bouton-plein { background: var(--terracotta); color: var(--creme); box-shadow: var(--ombre-douce); }
.bouton-plein:hover { background: var(--terracotta-fonce); }
.bouton-terre { background: transparent; color: var(--terracotta); border-color: var(--terracotta); }
.bouton-terre:hover { background: var(--terracotta); color: var(--creme); }
/* Dans l'en-tete, le bouton reste sapin comme sur la maquette : c'est un
   repere de marque, pas l'appel a l'action de la page. */
.entete .bouton-plein { background: var(--sapin); box-shadow: none; }
.entete .bouton-plein:hover { background: var(--sapin-clair); }
.bouton-trait { border-color: var(--sapin); color: var(--sapin); }
.bouton-trait:hover { background: var(--sapin); color: var(--creme); }
.bouton-clair { border-color: rgba(250, 247, 242, .45); color: var(--creme); background: rgba(250, 247, 242, .1); backdrop-filter: blur(6px); }
.bouton-clair:hover { background: var(--creme); color: var(--sapin); }
/* Sur la photographie du premier ecran, un contour seul se noie : le bouton
   secondaire y prend le verre depoli de la maquette. */
.hero .bouton-terre { color: var(--creme); border-color: rgba(250, 247, 242, .45); background: rgba(250, 247, 242, .1); backdrop-filter: blur(6px); }
.hero .bouton-terre:hover { background: var(--creme); color: var(--sapin); border-color: var(--creme); }
.bouton-petit { padding: 10px 17px; font-size: .81rem; }

/* --- SOCLE DE MESURE (compléments de style) -------------------------------- */
#pk-mesure-bandeau .pk-mesure-btn {
  letter-spacing: .005em;
  box-shadow: var(--ombre-douce);
}
.mesure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.5rem 0;
}

/* Les deux gestes de même poids : prendre rendez-vous, offrir une carte.
   La cliente tire un quart de son chiffre d'affaires de la carte cadeau,
   les deux boutons ont donc la même taille et le même rang. */
.paire-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Les deux actions gardent la largeur de leur texte. Etirees a parts egales,
   elles devenaient deux barres de cinq cents pixels des qu'elles tombaient
   dans une colonne large : c'etait la, l'effet « tout est trop gros ». Sur
   telephone elles prennent la pleine largeur, et la c'est voulu. */
.paire-actions .bouton { flex: 0 1 auto; }

.brulure { display: none; }
@media (max-width: 900px) {
  .nav, .entete-actions .bouton { display: none; }
  .brulure {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 46px; height: 46px; align-items: center;
  }
  .brulure span {
    display: block; width: 26px; height: 1.5px; background: var(--sapin);
    transition: transform .45s var(--pose), width .45s var(--pose), background .3s ease;
  }
  .brulure span:nth-child(2) { width: 17px; align-self: flex-end; margin-right: 10px; }
  .brulure[aria-expanded="true"] span { background: var(--creme); }
  .brulure[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .brulure[aria-expanded="true"] span:nth-child(2) { width: 26px; margin-right: 0; transform: translateY(-3.75px) rotate(-45deg); }
  :root { --haut-entete: 70px; }
  .marque img { height: 56px; }
  .entete.volet-ouvert { background: transparent; border-bottom-color: transparent; box-shadow: none; z-index: 995; }
  .entete.volet-ouvert .marque img { filter: brightness(0) invert(1); }
}

/* LE MENU DU TELEPHONE, REFAIT LE 08/09/2026.
   Il ne deroule plus une liste sous l'en-tete : il ouvre la maison. Le volet
   couvre l'ecran d'un vert profond, les cinq entrees arrivent l'une apres
   l'autre en grand, et le bouton devient une croix. Un seul mouvement, une
   seule fois : c'est le moment le plus expressif du telephone. */
.volet {
  position: fixed; inset: 0; z-index: 990;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--haut-entete) + var(--e-l)) var(--pad) var(--e-xl);
  background: var(--sapin); color: var(--creme);
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .62s var(--pose), visibility .62s;
  visibility: hidden; overflow-y: auto;
}
.volet.ouvert { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; }
.volet-fond {
  position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: url("../img/logo-detoure.png") no-repeat right -80px bottom -40px / 420px auto;
  filter: brightness(0) invert(1);
}
.volet-liens { position: relative; display: flex; flex-direction: column; }
.volet-liens a {
  display: block; padding: 13px 0; font-family: var(--font-titre); font-weight: 300;
  font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.1; color: var(--creme);
  border-bottom: 1px solid rgba(250, 247, 242, .14);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s var(--pose), color .3s ease;
}
.volet.ouvert .volet-liens a {
  opacity: 1; transform: none;
  transition-delay: calc(.16s + var(--rang, 0) * .07s);
}
.volet-liens a[aria-current="page"] { color: var(--terracotta-clair); }
.volet-pied { position: relative; margin-top: var(--e-xl); }
.volet-pied .paire-actions { gap: 12px; }
.volet-pied .bouton { flex: 1 1 auto; justify-content: center; }
.volet-pied .bouton-terre { color: var(--creme); border-color: rgba(250, 247, 242, .38); }
.volet-joindre {
  margin-top: var(--e-m); font-size: .92rem; line-height: 1.7;
  color: rgba(250, 247, 242, .72);
}
.volet-joindre a { color: var(--creme); text-decoration: underline; text-underline-offset: 4px; }
body.volet-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .volet { transition: none; }
  .volet-liens a { opacity: 1; transform: none; transition: none; }
}

/* --- LE PREMIER ÉCRAN -----------------------------------------------------
   L'image porte l'ambiance, le texte ne fait que guider. Le voile est un
   dégradé qui monte du bas : le haut de la photographie reste lisible. */
/* LE PREMIER ECRAN OCCUPE LA FENETRE ENTIERE, MOINS L'EN-TETE (Nils,
   08/09/2026 : « il a des proportions qui ne fit pas avec l'ecran », puis
   09/09/2026 : « le hero fit pas avec la size de tous les ecrans PC »). Le
   plafond de 800 px pose le 08/09 reglait le premier defaut et en creait un
   second, mesure le 09/09 : sur un ecran de 1920 x 1080 il laissait deja
   voir 193 px de la section suivante, et 553 px sur un 2560 x 1440. Le
   premier ecran cessait d'etre un premier ecran. Il n'a donc plus de
   plafond avant 1600 px, hauteur qu'aucun ecran d'ordinateur courant
   n'atteint une fois l'en-tete retiree ; le plancher passe a 560 px, la
   hauteur reellement occupee par le texte et la bande des reperes, mesuree
   a 548 px. `svh` est la hauteur reellement visible sur telephone, barres
   du navigateur comprises, la ou `vh` compte la fenetre ideale et fait
   deborder d'une centaine de pixels. */
/* LE PREMIER ECRAN OCCUPE LA FENETRE, ET RIEN NE SORT PAR LE BAS.
   Il tenait sa hauteur par `height`, une mesure fermee : des que le texte
   demandait davantage, la bande des trois reperes sortait par le bas sans
   que rien ne l'arrete. Elle depassait de 23 px sur la plupart des ecrans
   d'ordinateur et de 150 px sur un telephone de 360 px de large. `min-height`
   donne la meme hauteur quand le texte tient, et laisse le bloc grandir quand
   il ne tient pas : on ne coupe plus jamais un bouton. */
.hero {
  position: relative; color: var(--creme);
  min-height: calc(100svh - var(--haut-entete));
  display: grid; grid-template-rows: 1fr auto; align-content: stretch;
}
.hero-fond { position: absolute; inset: 0; overflow: hidden; }
/* LES QUATRE VUES DU PREMIER ECRAN. Elles sont empilees au meme endroit et
   se relaient par un fondu long : c'est le seul mouvement automatique de la
   page avec l'ecran d'ouverture, et il est lent exprès. Chaque vue se
   rapproche pendant qu'elle est montree, ce qui evite l'effet de diaporama
   fige entre deux fondus. */
.hero-fond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.5s ease-in-out;
}
.hero-fond img.vue { opacity: 1; }
.hero-puces {
  position: absolute; z-index: 3; right: var(--pad); bottom: calc(var(--e-2xl) + 46px);
  display: flex; gap: 9px;
}
.hero-puces button {
  width: 26px; height: 3px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(250, 247, 242, .34); transition: background .3s ease, width .3s ease;
}
.hero-puces button[aria-selected="true"] { background: rgba(250, 247, 242, .92); width: 38px; }
.hero-puces button:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
.hero-fond::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30, 51, 39, .28) 0%, rgba(28, 48, 37, .58) 40%, rgba(20, 35, 27, .82) 68%, rgba(16, 29, 22, .95) 100%);
}
/* Le mur du fond est tres clair a gauche, la ou le texte se pose : un second
   voile, lateral, tient la lisibilite sans assombrir toute la photographie. */
.hero-fond::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18, 32, 25, .5) 0%, rgba(18, 32, 25, .22) 42%, transparent 70%);
}
/* Le retrait latéral vient de .bande : ne redéfinir ICI que le haut et le
   bas, sinon le texte du premier écran se colle au bord sur téléphone. */
.hero-corps { position: relative; z-index: 2; align-self: center; padding-top: 28px; padding-bottom: 20px; }
/* La pastille de lieu revient de la maquette : un jeton arrondi en verre
   depoli, avec sa puce terracotta. */
/* L ADRESSE, EN UNE LIGNE ECRITE. Elle tenait dans une pastille grise a
   coin ronds, avec un point et des capitales espacees : la forme venait des
   interfaces techniques et non de cette maison (Nils, 08/09). Elle se lit
   maintenant comme une ligne de titrage, precedee d un filet. */
.hero-oeil {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font-family: var(--font-titre); font-style: italic; font-weight: 300;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); letter-spacing: .01em;
  color: rgba(250, 247, 242, .9);
}
.hero-oeil::before {
  content: ""; width: 42px; height: 1px; flex: 0 0 42px;
  background: var(--terracotta-clair);
}
/* Un mot du titre en italique, comme sur la maquette. */
.hero h1 em { font-style: italic; font-weight: 400; }
.hero h1 {
  font-size: clamp(2.2rem, 4.3vw, 4.4rem); max-width: 13ch; margin-bottom: 18px;
  font-weight: 300; color: var(--creme);
  line-height: 1.03;
}
.hero p { max-width: 46ch; font-size: 1rem; color: rgba(250, 247, 242, .92); margin-bottom: 26px; }
.hero .paire-actions { max-width: 520px; }

/* LES FENETRES BASSES. Un portable de 640 px de haut, ou un ordinateur dont
   la fenetre n'est pas plein ecran, n'a pas la place du titre en pleine
   taille ET de la bande des reperes. Le texte se resserre alors, plutot que
   de pousser le bas du premier ecran hors de la fenetre. */
@media (max-height: 720px) {
  .hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 12px; }
  .hero-oeil { margin-bottom: 12px; font-size: 1rem; }
  .hero p { margin-bottom: 18px; font-size: .95rem; }
  .hero-corps { padding-top: 18px; padding-bottom: 14px; }
}
@media (max-height: 620px) {
  .hero h1 { font-size: 1.75rem; margin-bottom: 10px; }
  .hero p { font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
  .hero-oeil { margin-bottom: 8px; font-size: .95rem; }
}

/* L'unique moment orchestré de la page : l'image se rapproche lentement une
   fois, le texte monte une fois. Rien d'autre ne s'anime tout seul. */
@keyframes bulle-respire { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes bulle-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* LE TITRE SE DÉCOUVRE, il ne monte pas. C'est le même geste que celui des
   photographies, et c'est ce qui fait la signature de la maison : un rideau
   qui descend, jamais un objet qui glisse. Le titre est le seul texte de la
   page à le recevoir ; ailleurs il volerait la vedette à l'image. */
@keyframes bulle-decouvre {
  from { clip-path: inset(0 0 104% 0); opacity: .4; }
  to   { clip-path: inset(0 0 -8% 0); opacity: 1; }
}
/* Seule la premiere vue porte le rapprochement d'arrivee ; les suivantes
   ont leur propre lent rapprochement, pose plus bas. */
.hero-fond img:first-child { animation: bulle-respire 2.2s cubic-bezier(.16, .8, .3, 1) both; }
.hero-fond img.vue { animation: hero-derive 9s linear both; }
.hero-fond img:first-child.vue { animation: bulle-respire 2.2s cubic-bezier(.16, .8, .3, 1) both, hero-derive 9s linear both; }
@keyframes hero-derive { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-corps > * { animation: bulle-monte .9s cubic-bezier(.22, .61, .36, 1) both; }
/* L'ECRAN D'OUVERTURE ET LE PREMIER ECRAN NE SE JOUAIENT PLUS ENSEMBLE.
   Le voile d'accueil couvre la page pendant deux secondes ; derriere lui,
   l'arrivee du premier ecran se jouait dans le vide et etait finie quand le
   voile se levait. On la met en pause tant que le voile est la : elle repart
   exactement au moment ou la visiteuse decouvre la page. */
html.ouverture-bloc .hero-fond img,
html.ouverture-bloc .hero-corps > *,
html.ouverture-bloc .hero-pied { animation-play-state: paused; }
.hero-pied { animation: bulle-monte .9s cubic-bezier(.22, .61, .36, 1) .42s both; }
.hero-corps > h1 {
  animation: bulle-decouvre 1.25s var(--pose) .16s both;
  padding-bottom: .08em;
}
.hero-corps > *:nth-child(2) { animation-delay: .1s; }
.hero-corps > *:nth-child(3) { animation-delay: .18s; }
.hero-corps > *:nth-child(4) { animation-delay: .26s; }
.hero-corps > *:nth-child(5) { animation-delay: .34s; }
/* L'arrivee du premier ecran n'etait pas coupee pour qui demande a son
   systeme de reduire les animations : le titre, les boutons et la bande des
   reperes montaient quand meme. Ils arrivent maintenant en place. */
@media (prefers-reduced-motion: reduce) {
  .hero-fond img, .hero-fond img.vue, .hero-fond img:first-child,
  .hero-corps > *, .hero-corps > h1, .hero-pied { animation: none; }
}

/* Les trois reperes ferment le premier ecran par une bande fine, posee tout
   en bas sur un fond assombri. Ils tenaient auparavant sur trois pavés de
   texte hauts de 130 px qui poussaient le bouton hors de la fenetre. */
.hero-pied {
  position: relative; z-index: 2;
  border-top: var(--filet-clair);
  background: linear-gradient(180deg, rgba(14, 26, 20, .30), rgba(14, 26, 20, .58));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* TROIS REPERES DE TROIS NATURES DIFFERENTES (Nils, 09/09/2026 : « c'est bien
   mais un peu tristounet »). Ils etaient trois paves identiques de texte gris
   sur fond sombre, alignes au cordeau : rien n'y avait plus de poids qu'autre
   chose, et l'ensemble s'eteignait. Chacun porte maintenant sa propre forme.
   Le premier est un CHIFFRE : la note en Cormorant, grande, avec ses cinq
   etoiles terracotta. Le deuxieme est un FAIT, ecrit en une ligne de titrage.
   Le troisieme est un GESTE : le telephone est un vrai lien qu'on appelle, et
   il se souligne quand la souris passe. La note ne se lit plus qu'ici sur le
   premier ecran ; la carte « 5,0 » qui flottait sur la photographie de la
   devanture est retiree, elle disait une troisieme fois la meme chose. */
.reperes { display: grid; grid-template-columns: auto 1fr auto; gap: 0; align-items: center; }
.repere { padding: 15px 30px 16px 0; min-width: 0; }
.repere + .repere { border-left: var(--filet-clair); padding-left: 30px; }

.repere-note { display: flex; align-items: baseline; gap: 12px; }
.repere-chiffre {
  font-family: var(--font-titre); font-weight: 400; font-size: 2.1rem;
  line-height: 1; color: var(--creme);
}
.repere-etoiles { color: var(--terracotta-clair); font-size: .82rem; letter-spacing: .16em; }
.repere-note-texte { font-size: .78rem; color: rgba(250, 247, 242, .7); margin-top: 5px; }

.repere-fait {
  font-family: var(--font-titre); font-style: italic; font-weight: 300;
  font-size: 1.16rem; line-height: 1.25; color: rgba(250, 247, 242, .92);
}

.repere-appel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-titre); font-size: 1.24rem; color: var(--creme);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.repere-appel svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--terracotta-clair); }
.repere-appel:hover, .repere-appel:focus-visible { border-bottom-color: var(--terracotta-clair); }
.repere-horaire { font-size: .78rem; color: rgba(250, 247, 242, .7); margin-top: 5px; }

/* Au telephone, les trois repères ne tiennent pas cote a cote : la note et
   l'appel restent, separes par un filet, et le fait des sept metiers passe a
   la ligne dessous. On ne cache rien, on replie. */
@media (max-width: 640px) {
  .reperes {
    grid-template-columns: auto 1fr;
    grid-template-areas: "note appel" "fait fait";
  }
  /* Le selecteur porte `.reperes` en tete parce que la regle generale
     `.repere + .repere` pese deux classes : sans cela elle gardait la main
     et le fait des sept metiers heritait d'un filet a gauche et d'un retrait
     de trente pixels dont il n'a que faire une fois passe a la ligne. */
  .reperes .repere-note-bloc { grid-area: note; padding: 10px 16px 11px 0; }
  .reperes .repere-appel-bloc { grid-area: appel; padding: 10px 0 11px 16px; border-left: var(--filet-clair); }
  .reperes .repere-fait-bloc {
    grid-area: fait; padding: 10px 0 11px;
    border-left: 0; border-top: var(--filet-clair);
  }
  .repere-chiffre { font-size: 1.7rem; }
  .repere-appel { font-size: 1.08rem; }
  .repere-fait { font-size: 1rem; }
}
@media (max-width: 640px) {
  .repere-note-texte, .repere-horaire { display: none; }
}

/* --- SECTIONS -------------------------------------------------------------
   Le changement de fond marque un passage, il ne rythme pas chaque section.
   Entre deux sections de même fond, c'est un filet qui sépare. */
.section { padding: var(--air) 0; }
.section-sapin { background: var(--sapin); color: rgba(250, 247, 242, .86); }
.section-sapin h2, .section-sapin h3, .section-sapin h4 { color: var(--creme); }
.section-sapin .section-desc { color: rgba(250, 247, 242, .78); }
/* Le fond sable a disparu des sections (Nils, 09/09/2026). Il ne reste que
   sur les cartes, les encadres et les etiquettes, ou il sert a poser un objet
   sur la page, pas a decouper la page en bandes. Deux sections claires qui se
   suivent ne rouvrent donc pas deux respirations : la seconde perd la sienne.
   Apres un aplat sapin, en revanche, la section claire garde la sienne, sinon
   son titre vient toucher le bord de l'aplat (Nils, 08/09 : « "Réserver" ce
   mot est trop proche de la section du dessus »). */
.section:not(.section-sapin) + .section:not(.section-sapin) { padding-top: 0; }

.section-tete { max-width: 660px; margin-bottom: var(--e-2xl); }
/* Le centrage ne sert qu'à un chapeau court. Au-delà de trois lignes, le
   texte revient à gauche : c'est plus reposant à lire. */
.section-tete-centre { margin-left: auto; margin-right: auto; text-align: center; }
/* L'etiquette : le seul surtitre du site. Un mot en italique, en casse de
   phrase, qui classe le contenu au lieu de faire du decor. Elle porte le
   vert d'eau (appel du 24/09/2026), le foncé sur fond clair, le trait sur
   fond sombre ; la terracotta reste aux boutons. */
.etiquette {
  display: block; margin-bottom: 14px;
  font-family: var(--font-titre); font-style: italic; font-weight: 400;
  font-size: var(--t-1); line-height: 1.2; color: var(--vert-eau-fonce);
}
.section-sapin .etiquette, .chapeau .etiquette, .seuil-sombre .etiquette,
.voie-maitresse .etiquette { color: var(--vert-eau-trait); }
.section-titre {
  font-size: var(--t-6); font-weight: 300; margin-bottom: 20px;
}
.section-desc { font-size: var(--t-3); color: var(--encre-douce); max-width: 62ch; }
.section-tete-centre .section-desc { margin-left: auto; margin-right: auto; }

/* Une seule carte dans tout le site : fond blanc, filet, coins du bloc,
   ombre douce. Les soins, les voies pour reserver, le plan et les etapes la
   partagent et ne gardent que ce qui tient a leur contenu. */
.carte-soin, .tarifs, .voie-rdv, .cadre-carte, .etape {
  background: var(--blanc); border: var(--filet);
  border-radius: var(--rayon-bloc); box-shadow: var(--ombre-douce);
}

/* --- LA CARTE DES SOINS ---------------------------------------------------
   Retour à la carte de la maquette validée le 04/09 : une vraie carte posée
   sur le fond, coins généreux, ombre douce, la photo quand elle existe et
   l'étiquette de famille posée dessus. Les soins se lisent en liste à puces
   terracotta, le lien de pied porte sa flèche et le prix se tient à droite. */
/* Nils, 10/09/2026 : « en mode PC, il y a deux colonnes qui sont vides sur la
   derniere ligne. C'est un peu moche ». Sept fiches sur trois colonnes laissent
   la derniere seule avec deux trous a sa droite, depuis le retrait de la fiche
   de reflexologie. La grille compte donc six colonnes fines : chaque fiche en
   occupe deux, ce qui redonne les trois colonnes habituelles, et la derniere
   ligne se repartit ce qui lui reste au lieu de laisser du vide. La regle
   travaille sur le rang de la fiche, pas sur leur nombre : elle survit a un
   ajout comme a un retrait. */
.grille-soins {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-l);
  align-items: stretch;
}
.grille-soins > * { grid-column: span 2; }
/* Une seule fiche sur la derniere ligne : elle prend toute la largeur. Etalee
   telle quelle, sa liste de tarifs poserait chaque prix a un metre de son
   libelle : son texte et ses tarifs se mettent donc cote a cote, comme dans
   les fiches etroites ils se suivent. */
.grille-soins > *:last-child:nth-child(3n + 1) { grid-column: span 6; }
.grille-soins > .carte-soin:last-child:nth-child(3n + 1) .carte-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--e-xl); align-items: start;
}
.grille-soins > .carte-soin:last-child:nth-child(3n + 1) .carte-prix {
  grid-column: 2; grid-row: 1 / 5; margin-top: 0;
}
.grille-soins > .carte-soin:last-child:nth-child(3n + 1) .carte-pied { grid-column: 1 / -1; }
/* L'etiquette se dessine sur la largeur de son mot, pas sur celle de sa
   colonne : une grille etire ses enfants, une pile ne le faisait pas. */
.grille-soins > .carte-soin:last-child:nth-child(3n + 1) .etiquette { justify-self: start; }
/* Deux fiches sur la derniere ligne : elles se partagent la largeur. */
.grille-soins > *:nth-last-child(2):nth-child(3n + 1),
.grille-soins > *:last-child:nth-child(3n + 2) { grid-column: span 3; }
@media (max-width: 900px) {
  /* Deux colonnes : la regle des trois ne veut plus rien dire. */
  .grille-soins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-soins > *,
  .grille-soins > *:last-child:nth-child(3n + 1),
  .grille-soins > *:nth-last-child(2):nth-child(3n + 1),
  .grille-soins > *:last-child:nth-child(3n + 2) { grid-column: span 1; }
  .grille-soins > *:last-child:nth-child(odd) { grid-column: span 2; }
  .grille-soins > .carte-soin:last-child:nth-child(3n + 1) .carte-corps { display: flex; }
}
.carte-soin {
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.carte-soin:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-bloc);
  border-color: var(--sauge);
}
/* Nils, 08/09/2026 : « on laisse pas assez d'espace pour voir les images du
   coup on comprend pas ». Le cadre etait de 220 px pour des photographies
   verticales : il n'en montrait qu'une tranche. Il suit maintenant un
   rapport de trois sur deux, et chaque image dit ou se trouve son sujet
   par son propre `object-position`. */
.carte-image { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-soin:hover .carte-image img { transform: scale(1.06); }
.carte-corps { display: flex; flex-direction: column; flex: 1; padding: var(--e-l) var(--e-m); }

/* L'etiquette de famille, posee sur la photo : la meme que partout, sur une
   pastille creme pour rester lisible sur l'image. */
.carte-image .etiquette {
  position: absolute; top: 14px; left: 14px; margin: 0;
  padding: 5px 14px; border-radius: var(--rayon-pilule);
  background: rgba(250, 247, 242, .94); color: var(--sapin);
  box-shadow: var(--ombre-douce);
}
.carte-soin h3 {
  font-size: var(--t-4); font-weight: 500; line-height: 1.25;
  color: var(--sapin); margin-bottom: 12px;
}
.carte-soin > .carte-corps > p {
  color: var(--encre-douce); font-size: var(--t-2); line-height: 1.65; margin-bottom: 20px;
}
.liste-prix {
  border-top: var(--filet);
  padding-top: 6px; margin-bottom: 20px;
}
/* Nils, 21/09/2026 : « que ce soit plus pro ». Une liste a puces ou le prix
   flotte au bout de sa phrase se lit comme une note ; une carte de soins se
   lit comme la carte d'une maison : l'intitule a gauche, le tarif aligne a
   droite sur toute la hauteur de la fiche, un filet entre deux lignes plutot
   qu'une pastille devant chacune, et un trait de conduite qui mene l'oeil du
   soin a son prix. */
.liste-prix li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1px 16px;
  padding: 13px 0;
  font-size: .95rem;
  border-bottom: 1px solid rgba(30, 51, 39, .09);
}
.liste-prix li:last-child { border-bottom: 0; padding-bottom: 2px; }
.liste-prix .intitule { grid-column: 1; grid-row: 1; color: var(--encre); line-height: 1.45; }
.liste-prix .duree {
  grid-column: 1; grid-row: 2;
  font-size: .81rem; letter-spacing: .02em; color: var(--encre-douce);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
/* Chiffres de meme hauteur et de meme chasse : sans cela Cormorant sort des
   elzeviriens, et deux prix l'un sous l'autre ne s'alignent pas. */
.liste-prix .prix {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-titre); font-size: 1.24rem; font-weight: 500;
  color: var(--sapin); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* La phrase d'un soin, sous son intitule et sa duree : ce qui se passe,
   dans l'ordre (docs/voix.md, regle 3). */
.liste-prix .dit {
  grid-column: 1 / -1; grid-row: 3; margin-top: 4px;
  font-size: .86rem; line-height: 1.55; color: var(--encre-douce);
}
.section-sapin .liste-prix .dit { color: rgba(250, 247, 242, .62); }
/* Une remise se montre (regle 7) : le prix barre passe sous le prix du jour,
   en petit, pour que la ligne tienne sur un telephone. */
.liste-prix .prix .avant {
  display: block; text-align: right;
  font-family: var(--font-texte); font-size: .74rem; font-weight: 400;
  color: var(--encre-douce); white-space: nowrap;
}
.section-sapin .liste-prix .prix .avant { color: rgba(250, 247, 242, .62); }
/* Une ligne sans tarif est une precision, pas un prix oublie. */
.liste-prix .mention .intitule {
  grid-column: 1 / -1;
  font-style: italic; font-size: .91rem; color: var(--encre-douce);
}
.section-sapin .liste-prix li { border-bottom-color: rgba(250, 247, 242, .14); }
.section-sapin .liste-prix .intitule { color: rgba(250, 247, 242, .9); }
.section-sapin .liste-prix .duree,
.section-sapin .liste-prix .mention .intitule { color: rgba(250, 247, 242, .62); }
/* Le pied de la carte : le lien a gauche, le prix a droite, sur la meme ligne
   de base. En boite flexible, un lien un peu long passait a la ligne et
   emportait le prix avec lui : dans une rangee de trois cartes, un pied se
   retrouvait quarante pixels plus bas que ses voisins. */
.carte-pied {
  margin-top: auto; padding-top: 14px; border-top: var(--filet);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 8px 18px;
}
/* Le lien d'une carte : un mot souligne, pas une fleche. */
.carte-lien {
  font-size: var(--t-2); font-weight: 500; color: var(--sapin);
  text-decoration: underline; text-decoration-color: var(--sauge); text-underline-offset: 4px;
}
.carte-lien:hover { color: var(--terracotta); text-decoration-color: currentColor; }
.carte-repere {
  font-family: var(--font-titre); font-size: 1.2rem; color: var(--sapin);
  white-space: nowrap; margin-left: auto;
}

.section-sapin .carte-soin { background: rgba(250, 247, 242, .06); border-color: rgba(250, 247, 242, .18); }
.section-sapin .carte-soin h3 { color: var(--creme); }
.section-sapin .carte-corps > p { color: rgba(250, 247, 242, .78); }
.section-sapin .liste-prix, .section-sapin .carte-pied { border-top-color: rgba(250, 247, 242, .18); }
.section-sapin .liste-prix .prix, .section-sapin .carte-repere { color: var(--creme); }
.section-sapin .carte-lien { color: var(--terracotta-clair); }

/* --- LA CARTE DES TARIFS (24/09/2026) ----------------------------------------
   Une famille, un panneau ; un soin, une rangee : son nom et ce qu'il est a
   gauche, ses tarifs a droite, un filet entre deux soins. La carte d'une
   maison se lit de haut en bas sans chercher ou est le prix. */
.tarifs { padding: 0 var(--e-xl); }
.tarif {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-s) var(--e-xl); align-items: start;
  padding: var(--e-l) 0; border-top: var(--filet);
}
.tarif:first-child { border-top: 0; }
.tarif h3 { font-size: var(--t-4); font-weight: 500; line-height: 1.25; color: var(--sapin); margin-bottom: 8px; }
.tarif-dit p { color: var(--encre-douce); font-size: var(--t-2); line-height: 1.65; }
.tarif-dit .carte-lien { display: inline-block; margin-top: 12px; }
.tarif .liste-prix { border-top: 0; padding-top: 0; margin: -13px 0 0; }
.tarif .liste-prix li { grid-template-columns: auto minmax(24px, 1fr) auto; column-gap: 10px; }
.tarif .liste-prix .duree { grid-column: 1 / -1; }
.tarif .liste-prix .prix { grid-column: 3; }
.liste-prix .points {
  grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .4em;
  border-bottom: 1.5px dotted var(--sable-fonce);
}
.tarifs-pied {
  display: flex; justify-content: flex-end;
  padding: var(--e-m) 0; border-top: var(--filet);
}
@media (max-width: 900px) {
  .tarif { grid-template-columns: 1fr; }
  .tarif .liste-prix { margin-top: 0; }
}
@media (max-width: 640px) {
  .tarifs { padding: 0 20px; }
  .tarifs-pied { justify-content: flex-start; }
  .carte-corps { padding: 24px 20px; }
  /* Au telephone, le lien passe sous le prix : plus rien ne se chevauche. */
  .carte-pied { grid-template-columns: 1fr; }
  .carte-repere { margin-left: 0; }
}

/* --- LES QUATRE INTENTIONS ------------------------------------------------
   Le Rituel Signature commence par un choix : lâcher prise, confiance,
   énergie ou sommeil. C'est le seul mécanisme que cet institut possède et
   qu'aucun autre n'a ; il devient le moment vivant de la page. */
/* LE RECIT QUI SE DEROULE AU DEFILEMENT.
   La scene de gauche tient en place pendant que les etapes passent a droite.
   Le principe est celui du reste du site : l'image se decouvre, elle ne
   glisse pas, et rien ne bouge tant que la lectrice n'a pas avance. */
.recit { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--e-2xl); }
.recit-scene {
  position: sticky; top: calc(var(--haut-entete) + var(--e-l));
  height: min(70svh, 600px); border-radius: var(--rayon-image); overflow: hidden;
  background: rgba(250, 247, 242, .06);
}
.recit-vues { position: absolute; inset: 0; }
/* Les vues de la scene. Elles etaient decouvertes du haut vers le bas en une
   seconde, ce qui prenait plus de temps que le defilement lui-meme : l'image
   arrivait apres son texte (Nils, 08/09 : « mal synchro visuellement »). La
   decoupe est raccourcie et doublee d'un fondu, si bien que la vue precedente
   ne laisse jamais de trou noir pendant l'echange. */
.recit-vues > * {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.recit-vues > *.vue { opacity: 1; }
/* Le plan interactif rejoint cet empilement, 17/09/2026 : ce n'est plus
   forcement une image, donc le selecteur n'est plus lie a une balise. */
.recit-vues .cadre-carte { height: 100%; }
.recit-jauge {
  position: absolute; left: 22px; right: 22px; bottom: 22px; height: 2px; z-index: 2;
  background: rgba(250, 247, 242, .22);
}
/* La jauge suit le defilement en continu, pas par sauts d'une etape a
   l'autre : c'est elle qui donne le sentiment que la scene est reliee au
   geste de la lectrice. Elle n'a donc pas de transition. */
.recit-jauge i { display: block; height: 100%; width: 0; background: var(--creme); }
.recit-minute {
  position: absolute; left: 22px; bottom: 34px; z-index: 2;
  font-family: var(--font-texte); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(250, 247, 242, .78);
}

.recit-etapes { list-style: none; margin: 0; padding: 0; }
.recit-etape {
  padding: var(--e-2xl) 0; border-top: 1px solid rgba(250, 247, 242, .16);
}
.recit-etape:first-child { border-top: 0; padding-top: 0; }
.recit-etape .etiquette { margin-bottom: 10px; }
.recit-etape h3 { font-size: var(--t-5); font-weight: 300; margin-bottom: 14px; }
.recit-etape p { font-size: var(--t-3); color: rgba(250, 247, 242, .8); max-width: 46ch; }
.recit-etape .recit-chute { margin-top: var(--e-m); color: rgba(250, 247, 242, .62); font-size: var(--t-2); }
.recit-etape .paire-actions { margin-top: var(--e-m); }
@media (prefers-reduced-motion: reduce) {
  .recit-vues > * { transition: none; }
}
/* La vue portee par chaque etape ne sert qu'au telephone et a la tablette :
   sur ordinateur, c'est la scene accrochee qui montre les images. */
.recit-vue-mob { display: none; }

/* AU TELEPHONE ET A LA TABLETTE, LE RECIT N'EST PLUS ACCROCHE.
   La scene se collait sous l'en-tete et passait par-dessus les etapes, qui
   defilaient derriere elle : le texte se retrouvait cache, et l'image ne
   suivait pas le doigt (Nils, 08/09 : « le scrollytelling sur mobile n'est
   pas synchro, ca cache le texte »). Sur un ecran haut et etroit, il n'y a
   pas la place de tenir une image en haut ET un texte lisible en dessous.
   Chaque etape porte donc sa propre image, au-dessus de son texte, en flux
   normal : rien ne recouvre rien, et il n'y a plus rien a synchroniser. */
@media (max-width: 900px) {
  .recit { grid-template-columns: 1fr; gap: 0; }
  .recit-scene { display: none; }
  .recit-etape { padding: var(--e-l) 0; }
  .recit-vue-mob {
    display: block; width: 100%; height: min(46svh, 340px); object-fit: cover;
    border-radius: var(--rayon-image); margin-bottom: var(--e-m);
  }
  .recit-vue-mob.cadre-carte { height: min(52svh, 420px); }
}

.intentions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--e-2xl); align-items: center; }
.intentions-choix { display: flex; flex-direction: column; }
.intention-bouton {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: var(--filet-clair); text-align: left;
  font-family: var(--font-titre); font-size: 1.7rem; font-weight: 300;
  color: rgba(250, 247, 242, .55); transition: color var(--transition);
}
.intention-bouton::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor; opacity: .35; transition: var(--transition);
}
.intention-bouton:hover { color: rgba(250, 247, 242, .85); }
.intention-bouton[aria-selected="true"] { color: var(--teinte, var(--creme)); }
.intention-bouton[aria-selected="true"]::before { opacity: 1; transform: scale(1.4); }
.intention-texte { min-height: 200px; }
.recit-etape .intentions {
  grid-template-columns: auto minmax(0, 1fr); gap: var(--e-l);
  margin-top: var(--e-m); padding-top: var(--e-m);
  border-top: 1px solid rgba(250, 247, 242, .16);
}
.recit-etape .intention-texte { min-height: 0; }
.recit-etape .intention-texte p { font-size: 1rem; }
@media (max-width: 640px) { .recit-etape .intentions { grid-template-columns: 1fr; gap: var(--e-m); } }
.intention-texte p { font-size: 1.15rem; color: rgba(250, 247, 242, .84); max-width: 46ch; }
.intention-texte .intention-mot {
  display: block; font-family: var(--font-titre); font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.1;
  color: var(--teinte, var(--creme)); margin-bottom: 20px;
  transition: color var(--transition);
}
@media (max-width: 900px) {
  .intentions { grid-template-columns: 1fr; gap: 36px; }
  .intention-texte { min-height: 0; }
}

/* Les trois faits pratiques et les deux encadres vert d'eau ont ete retires
   le 10/09/2026 : ils redisaient, sous trois formes, ce que les trois voies de
   « Prendre rendez-vous » disent une fois (Nils : « plus pertinente et moins
   redondante »). Le vert d'eau ne sert donc plus que de fond de scene.
   Leurs regles sont parties avec eux. */

/* --- BANDE PHOTO / TEXTE --------------------------------------------------
   L'asymétrie est la règle : l'image tient plus de place que le texte, et
   le texte ne dépasse jamais 62 caractères par ligne. */
.duo { display: grid; grid-template-columns: 6fr 5fr; gap: var(--e-2xl); align-items: center; }
.duo-image img {
  border-radius: var(--rayon-image); box-shadow: var(--ombre-image);
  width: 100%; object-fit: cover; aspect-ratio: 4 / 5;
}
/* Une photographie prise en largeur ne rentre pas dans un cadre vertical sans
   perdre ses deux bords : elle garde donc son propre rapport. */
.duo-texte p { color: var(--encre-douce); margin-bottom: 20px; max-width: 62ch; }
.duo-texte p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 36px; } }

/* Une photographie qui porte une legende est une figure, pas un bloc d'image :
   elle garde donc la meme mise en page, sans la marge par defaut du navigateur.
   La legende dit ce que la photographie montre, et rien de plus : le chapitre
   de l'epilation definitive n'a pas encore sa prise de vue en cours de seance,
   et aucune legende ne fera semblant du contraire. */
figure.duo-image { margin: 0; }
/* Une figure verticale posee a cote d'un texte court laissait le texte
   flotter au milieu d'un grand vide : les deux blocs partent de la meme
   ligne haute. Partir de la meme ligne ne suffisait pas : le texte de
   « Comment se passe une seance » mesure 254 pixels quand la photographie
   verticale en mesure 632, soit un vide de 378 pixels sous le texte (Nils,
   09/09/2026 : « le texte ne fit pas avec la hauteur de l'image associee »).
   Sur ordinateur, la photographie prend donc EXACTEMENT la hauteur du texte
   qu'elle accompagne, avec un plancher pour qu'elle ne devienne jamais une
   bandelette ; elle se recadre au lieu de s'ecraser. Sous 1024 pixels les
   deux blocs sont l'un au-dessus de l'autre et la question ne se pose plus. */
.duo:has(> figure.duo-image) { align-items: start; }
@media (min-width: 901px) {
  .duo:has(> figure.duo-image) { align-items: stretch; }
  figure.duo-image { display: flex; flex-direction: column; }
  figure.duo-image img {
    flex: 1 1 0; height: 0; aspect-ratio: auto;
    min-height: 360px; object-fit: cover; object-position: center 52%;
  }
  /* Le texte se centre dans la colonne : le reliquat de vide se partage
     au-dessus et en dessous au lieu de tomber entierement sous la derniere
     ligne. */
  .duo:has(> figure.duo-image) .duo-texte { align-self: center; }
}
/* Une figure verticale gardait au telephone le cadre 4/3 des autres blocs,
   qui lui coupait la tete. Elle garde donc son propre rapport. */
@media (max-width: 640px) {
  figure.duo-image img { aspect-ratio: 4 / 5; object-position: center 22%; }
}
/* Un visuel qui porte du texte sur ses bords (l'electrolyse, 07/10/2026) ne
   se recadre jamais : il garde son rapport entier, a toutes les largeurs. */
figure.duo-image.visuel-entier img {
  flex: none; height: auto; aspect-ratio: auto; min-height: 0; object-fit: contain;
}
.duo-image figcaption {
  margin-top: 14px; font-size: .9rem; line-height: 1.55;
  color: var(--encre-douce); font-style: italic;
}

/* La ligne de service qui ferme un bloc : une precision, pas une conclusion. */
.note-pied {
  margin-top: var(--e-l); padding-top: var(--e-s); border-top: var(--filet);
  font-size: .95rem; color: var(--encre-douce);
}
.note-pied a { color: var(--sapin); text-decoration: underline; text-underline-offset: 3px; }

/* Les trois temps d'un déroulé : des colonnes séparées par un filet, sans
   fond ni encadré. La structure encode la suite, elle ne la décore pas. */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.trio-item { padding: 0 var(--e-l); border-left: var(--filet); }
.trio-item:first-child { padding-left: 0; border-left: 0; }
.trio-item h3 { font-size: 1.4rem; margin-bottom: 12px; font-weight: 400; }
.trio-item p { font-size: 1rem; color: var(--encre-douce); }
.section-sapin .trio-item { border-left-color: rgba(250, 247, 242, .18); }
.section-sapin .trio-item p { color: rgba(250, 247, 242, .78); }
@media (max-width: 640px) {
  .trio-item { padding: 26px 0; border-left: 0; border-top: var(--filet); }
  .trio-item:first-child { padding-top: 0; border-top: 0; }
  .section-sapin .trio-item { border-top-color: rgba(250, 247, 242, .18); }
}

/* --- PRENDRE RENDEZ-VOUS --------------------------------------------------
   Plus aucune fenetre embarquee ici. Le module du prestataire s'affichait en
   gris, hors de la palette de la maison, et posait ses traceurs dans la page.
   Les trois voies sont desormais posees a plat, la reservation en ligne
   s'ouvre dans un nouvel onglet. */
.voies-rdv {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-m); align-items: stretch;
}
.voie-rdv {
  padding: var(--e-l);
  display: flex; flex-direction: column; text-align: left;
}
.voie-rdv.voie-maitresse { background: var(--sapin); border-color: var(--sapin); color: var(--creme); }
.voie-rdv h3 { font-family: var(--font-titre); font-size: var(--t-4); margin: 0 0 10px; line-height: 1.2; color: var(--sapin); }
.voie-rdv.voie-maitresse h3 { color: var(--creme); }
.voie-rdv p { font-size: var(--t-2); color: var(--encre-douce); margin: 0 0 22px; line-height: 1.65; }
.voie-rdv.voie-maitresse p { color: rgba(250, 247, 242, .8); }
.voie-rdv .bouton { margin-top: auto; align-self: flex-start; }
.voie-rdv.voie-maitresse .bouton-plein { background: var(--terracotta); border-color: var(--terracotta); }
/* Ce qui n'est ni une voie ni un horaire tient en une phrase sous les trois
   cartes, plutot qu'en trois encadres qui les redisaient (10/09/2026). */
.note-rdv {
  margin: var(--e-m) auto 0; max-width: 68ch; text-align: center;
  font-size: .95rem; line-height: 1.7; color: var(--encre-douce);
}
.note-rdv a { color: var(--sapin); text-decoration: underline; text-underline-offset: 4px; }

/* --- LE PLAN DU BOURG ET SON STATIONNEMENT --------------------------------
   Tout vient du site (fond de carte, polices, reperes) : rien n'attend un
   accord. Le cadre montre d'abord une affiche fixe du plan, puis le plan
   vivant se peint par-dessus et l'affiche s'efface par un fondu. La liste des
   stationnements, elle, est ecrite dans la page et se lit sans carte. */
.cadre-carte {
  position: relative; overflow: hidden; padding: 0;
  border-radius: var(--rayon-image); background: var(--sable);
  height: min(62vh, 540px);
}
.carte-affiche, .carte-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-affiche { object-fit: cover; }
.carte-plan { opacity: 0; transition: opacity .7s ease; }
.cadre-carte.pret .carte-plan { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .carte-plan { transition: none; } }

.maplibregl-map { font-family: var(--font-texte); }
.maplibregl-ctrl-group { border-radius: var(--rayon) !important; box-shadow: var(--ombre-douce) !important; }
.maplibregl-ctrl-attrib { font-size: .7rem; line-height: 1.4; }
.maplibregl-ctrl-attrib a { color: var(--encre-douce); }

.repere-carte {
  display: grid; place-items: center; cursor: pointer;
  border-radius: var(--rayon-pilule); color: var(--blanc);
  font-family: var(--font-texte); font-weight: 700;
  box-shadow: 0 4px 12px rgba(34, 38, 35, .28);
  border: 2px solid var(--blanc);
}
.repere-parking { width: 26px; height: 26px; background: var(--sapin); font-size: .82rem; }
.repere-institut { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.repere-point {
  width: 22px; height: 22px; background: var(--terracotta);
  box-shadow: 0 6px 18px rgba(179, 104, 74, .42), inset 0 0 0 4px var(--blanc);
  flex: none;
}
.repere-nom {
  background: var(--blanc); color: var(--sapin); border-radius: var(--rayon-pilule);
  padding: 4px 12px; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--ombre-douce);
}
.bulle-carte { display: block; padding: 4px 2px; }
.bulle-carte strong {
  display: block; font-family: var(--font-titre); font-size: 1.12rem;
  color: var(--sapin); line-height: 1.25; margin-bottom: 4px;
}
.bulle-carte span { display: block; font-size: .88rem; color: var(--encre-douce); line-height: 1.5; }
.bulle-carte .repere-distance { margin-top: 6px; color: var(--feuillage); }
.maplibregl-popup-content {
  border-radius: var(--rayon) !important; box-shadow: var(--ombre-bloc) !important;
  padding: 14px 16px !important;
}


  position: fixed; left: 18px; right: auto; bottom: 18px; z-index: 60;
  width: min(330px, calc(100vw - 36px));
  background: var(--blanc); border: var(--filet); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(34, 38, 35, .16);
  padding: 15px 16px 14px; display: grid; gap: 11px;
  transform: translateY(calc(100% + 24px)); transition: transform .38s cubic-bezier(.22, .8, .28, 1);
}

@media (max-width: 900px) {
  .voies-rdv { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Tant que la question de l'accord est posée, la barre du pouce s'efface :
     deux barres empilées en bas d'un téléphone, c'est une de trop. */
}

/* --- PIED DE PAGE --------------------------------------------------------- */
/* LE PIED DE PAGE, REFAIT LE 08/09/2026 (Nils : « le footer n'est pas tres
   bon »). Il ne commence plus par trois listes : il commence par la maison et
   par la seule chose qu'on attend d'un institut, prendre rendez-vous. Les
   trois colonnes de service viennent apres, separees par un filet. */
.pied { background: var(--sapin); color: rgba(250, 247, 242, .74); padding: var(--air) 0 var(--e-l); }
.pied a:hover { color: var(--terracotta-clair); }

.pied-haut {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--e-2xl); align-items: center;
  padding-bottom: var(--e-xl); margin-bottom: var(--e-xl);
  border-bottom: var(--filet-clair);
}
.pied-signature { display: flex; align-items: center; gap: var(--e-m); }
.pied-logo { height: 96px; width: auto; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: .92; }
.pied-phrase {
  font-family: var(--font-titre); font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35; font-weight: 300; color: var(--creme); max-width: 24ch;
}
.pied-appel p { font-size: .98rem; margin-bottom: var(--e-m); max-width: 42ch; }
.pied-appel a { color: var(--creme); text-decoration: underline; text-underline-offset: 4px; }

.pied-grille { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: var(--e-xl); }
.pied h4 {
  color: var(--creme); font-family: var(--font-texte); font-size: .74rem;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 16px; color: var(--sauge-pale);
}
.pied li { padding: 6px 0; font-size: .97rem; }
/* L icone se pose hors du texte : en flex, le gap s inserait entre le lien et
   la ponctuation qui le suit, et la virgule partait a la derive. */
.pied-joindre li { position: relative; padding-left: 23px; }
.pied li svg { width: 14px; height: 14px; fill: none; stroke: var(--sauge-pale); stroke-width: 1.5; }
.pied-joindre li svg { position: absolute; left: 0; top: 10px; }
.pied-note { margin-top: 12px; font-size: .86rem; color: rgba(250, 247, 242, .58); }
.pied-bas {
  margin-top: var(--e-xl); padding-top: var(--e-m); border-top: var(--filet-clair);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .86rem;
  color: rgba(250, 247, 242, .58);
}
@media (max-width: 900px) {
  .pied-haut { grid-template-columns: 1fr; gap: var(--e-l); align-items: start; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: var(--e-l); }
}
@media (max-width: 640px) {
  /* La pastille du pouce s efface des que le pied de page se montre : lui
     reserver la hauteur d une barre laissait un grand aplat vert vide sous la
     derniere ligne (Nils, 08/09 : « une petite marge verte en bas du pied de
     page un peu trop grande »). Il ne reste que la zone sure du telephone. */
  .pied { padding-bottom: calc(var(--e-l) + env(safe-area-inset-bottom)); }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-signature { gap: var(--e-s); }
  .pied-logo { height: 72px; }
  .pied-appel .paire-actions .bouton { flex: 1 1 100%; justify-content: center; }
}

/* --- LA BARRE DU POUCE, AU TÉLÉPHONE -------------------------------------- */
/* Elle etait une barre collee au bord, de la meme couleur que la page : on la
   prenait pour un morceau de contenu (Nils, 08/09 : « la barre en bas est bien
   mais pas super jolie »). C'est maintenant une pastille qui flotte au-dessus
   du contenu, en vert profond, avec le meme arrondi que les boutons. */
.barre-pouce {
  position: fixed; z-index: 950;
  left: var(--pad); right: var(--pad);
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none; gap: 8px; padding: 7px;
  background: rgba(30, 51, 39, .94); backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 247, 242, .12); border-radius: var(--rayon-pilule);
  box-shadow: 0 14px 34px rgba(20, 30, 24, .3);
  transform: translateY(calc(100% + 22px)); transition: transform .5s var(--pose);
}
.barre-pouce.montree { transform: translateY(0); }
.barre-pouce .bouton {
  flex: 1; justify-content: center; padding: 13px 6px; font-size: .84rem;
  border-radius: var(--rayon-pilule);
}
.barre-pouce .bouton-trait { border-color: rgba(250, 247, 242, .38); color: var(--creme); }
.barre-pouce .bouton-trait:hover { background: rgba(250, 247, 242, .12); }
.barre-pouce .bouton-plein { background: var(--terracotta); border-color: var(--terracotta); }
@media (max-width: 640px) {
  .barre-pouce { display: flex; }
}

/* ===========================================================================
   LES APPARITIONS, REFAITES LE 08/09/2026
   Nils : « ça manque d'animation, il faut trouver quelque chose de pertinent
   et de plus waouh par l'apparition ».

   Le geste de la maison est LA BUEE QUI S'EFFACE. Une photographie n'arrive
   pas en glissant : elle se decouvre, du haut vers le bas, pendant qu'elle
   repose doucement son echelle, comme un miroir qui se degage apres un soin.
   Le texte, lui, ne fait qu'affleurer : il ne bouge presque pas, parce que
   c'est l'image qui doit tenir le regard.

   Trois choses seulement s'animent, et jamais deux fois :
     .apparait          un bloc de texte affleure ;
     .apparait-image    une photographie se decouvre ;
     .etiquette      le filet terracotta se tire sous le mot d'entree.
   Le survol et le clic gardent leurs propres reponses, qui elles se repetent.
   =========================================================================== */

/* Le bloc de texte : huit pixels et un souffle d'opacite. Pas de flou : il
   rendait le texte illisible une demi-seconde sur les petits ecrans. */
.apparait {
  opacity: 0; transform: translateY(9px);
  transition: opacity .7s ease var(--retard, 0s),
              transform .8s var(--pose) var(--retard, 0s);
}
.apparait.vu { opacity: 1; transform: none; }

/* LA PHOTOGRAPHIE SE DECOUVRE. Le rectangle de decoupe part d'une hauteur
   nulle et descend ; en meme temps l'image relache son grossissement. Les
   deux durees sont volontairement inegales : la decoupe finit avant le
   mouvement, ce qui laisse l'image « se poser » une demi-seconde de plus.
   `round` garde les coins arrondis de la photographie pendant la decoupe. */
.apparait-image img {
  clip-path: inset(0 0 100% 0 round var(--rayon-decoupe, 0px));
  transition: clip-path 1.05s var(--pose) var(--retard, 0s);
  will-change: clip-path;
}
.apparait-image.vu img { clip-path: inset(0 0 0 0 round var(--rayon-decoupe, 0px)); }

/* Les grandes photographies de page relachent EN PLUS leur grossissement : la
   decoupe finit avant le mouvement, ce qui les laisse « se poser » une demi-
   seconde de plus. Les vignettes des cartes et de la mosaique en sont
   exclues : leur agrandissement est deja la reponse au survol, et les deux
   gestes se contrarieraient sur la meme propriete. */
.duo-image.apparait-image img {
  --rayon-decoupe: var(--rayon-image);
  transform: scale(1.05);
  transition: clip-path 1.05s var(--pose) var(--retard, 0s),
              transform 1.6s var(--pose) var(--retard, 0s);
}
.duo-image.apparait-image.vu img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; transition: none; }
  .apparait-image img, img.apparait-image { clip-path: none; transform: none; transition: none; }
  .hero-corps > h1 { clip-path: none; animation: none; }
  .hero-fond img, .hero-corps > * { animation: none; }
  .hero-puces { display: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* --- PAGES INTÉRIEURES ---------------------------------------------------- */
.chapeau { background: var(--sapin); color: rgba(250, 247, 242, .84); padding: var(--e-2xl) 0; position: relative; }
.chapeau h1 {
  font-size: var(--t-6); font-weight: 300; margin-bottom: 22px;
  max-width: 22ch; color: var(--creme);
}
/* Un ancrage sous l'entete collante, pour que le titre ne passe pas dessous. */
.chapeau, .seuil, .section[id], .hero[id] { scroll-margin-top: calc(var(--haut-entete) + 14px); }
.chapeau p { max-width: 60ch; color: rgba(250, 247, 242, .82); font-size: var(--t-3); }
.fil { font-size: .92rem; color: rgba(250, 247, 242, .55); margin-bottom: 26px; }
.fil a:hover { color: var(--terracotta-clair); }

.prose h2 { font-size: var(--t-5); font-weight: 400; margin: 56px 0 18px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.4rem; font-weight: 400; margin: 36px 0 12px; }
.prose p { margin-bottom: 18px; color: var(--encre-douce); max-width: 66ch; }
.prose ul { margin: 0 0 24px; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--encre-douce); max-width: 64ch; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .82em; width: 10px; height: 1px; background: var(--terracotta); }
.prose strong { color: var(--encre); font-weight: 500; }

/* LES QUESTIONS S'OUVRENT AU CLIC. Le mouvement repond a un geste de la
   visiteuse, il n'arrive jamais tout seul : la fleche pivote, la reponse se
   deplie. La zone cliquable prend toute la largeur de la ligne. */
.faq-item { border-bottom: var(--filet); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 18px; justify-content: space-between;
  padding: 19px 2px; font-family: var(--font-titre); font-size: 1.22rem;
  line-height: 1.35; color: var(--encre); transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--terracotta); }
.faq-item summary::after {
  content: ""; flex: 0 0 11px; height: 11px; margin-top: 6px;
  border-right: 1.5px solid var(--terracotta); border-bottom: 1.5px solid var(--terracotta);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform .28s cubic-bezier(.22, .8, .28, 1);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-reponse { overflow: hidden; }
.faq-item[open] .faq-reponse { animation: faq-deplie .3s cubic-bezier(.22, .8, .28, 1); }
.faq-item .faq-reponse p {
  color: var(--encre-douce); font-size: .99rem; max-width: 66ch;
  padding: 0 2px 22px;
}
@keyframes faq-deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .faq-item[open] .faq-reponse { transition: none; animation: none; }
}

/* ---------------------------------------------------------------------------
   LES TROIS IDÉES DE CADEAU, le 08/09/2026.
   Elles occupaient une section entière de grandes cartes ; elles tiennent
   maintenant sur une seule ligne, à côté de la phrase qui les introduit.
--------------------------------------------------------------------------- */
.trio-cadeau {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-l);
}
.trio-tete { max-width: 58ch; margin-bottom: var(--e-l); }
.trio-tete p { color: var(--encre-douce); font-size: .93rem; margin-top: 10px; }
.cadeau-idee {
  display: block; text-decoration: none; color: inherit;
  border-left: var(--filet); padding-left: 26px;
  transition: border-color .25s ease;
}
.cadeau-idee:hover { border-left-color: var(--terracotta); }
.cadeau-prix {
  display: block; font-size: .78rem; letter-spacing: .04em;
  color: var(--terracotta); margin-bottom: 7px;
}
.cadeau-idee strong {
  display: block; font-family: var(--font-titre); font-size: 1.28rem;
  font-weight: 400; line-height: 1.2; margin-bottom: 9px;
}
.cadeau-idee > span:last-child {
  display: block; color: var(--encre-douce); font-size: .89rem; line-height: 1.5;
}
@media (max-width: 900px) {
  .trio-cadeau { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  .trio-cadeau { grid-template-columns: 1fr; }
  .cadeau-idee { border-left: 0; border-top: var(--filet); padding: 18px 0 0; }
}

/* ---------------------------------------------------------------------------
   LES SEUILS DE CHAPITRE, REFAITS LE 08/09/2026.
   Ils etaient des bandes vert sapin posees juste avant une section blanche :
   « on dirait que la section est toute petite, c'est pas joli » (Nils). Le
   vert reste pour les sections entieres, jamais pour une entree de chapitre.
   Un seuil est maintenant une ouverture claire : un filet terracotta en haut,
   le mot d'entree, un grand titre, la phrase en regard, et le logo en
   filigrane a droite. Il ne coupe plus la page, il l'articule. Le titre de la
   page des mentions legales, lui, ne change pas.
--------------------------------------------------------------------------- */
/* Le seuil n'a plus d'aplat sable. Nils, le 09/09/2026 : « les sections sont
   sur deux couleurs, ca casse la lecture ». L'aplat disait « autre chose »
   alors que le seuil dit « chapitre suivant » : ce que porte maintenant un
   filet terracotta tire d'un bord a l'autre de l'ecran, avec beaucoup d'air
   au-dessus. Un filet pleine largeur ne veut jamais dire autre chose que
   « nouveau chapitre » : c'est le seul endroit du site qui en porte un. */
/* Chloe, 09/09/2026 : « mettre plus de contraste dans les soins, l'electrolyse
   et offrir, venir pour mieux separer les blocs ». Le filet terracotta disait
   bien « nouveau chapitre », mais il le disait seul, sur un fond identique de
   part et d'autre : rien ne se voyait tant qu'on ne lisait pas. Le seuil porte
   maintenant sa propre bande de sable, d'un bord a l'autre de l'ecran. Le
   chapitre s'ouvre donc sur un aplat, se lit sur le creme, et le passage de
   l'un a l'autre se voit d'un coup d'oeil, sans rien changer aux textes. */
.seuil {
  position: relative; background: var(--sable);
  padding: calc(var(--air) * 1.45) 0 calc(var(--air) * .9);
  border-bottom: var(--filet);
}
/* La section qui suit un seuil lui appartient : elle ne rouvre pas une
   respiration entiere au-dessus de son premier bloc. */
.seuil + .section { padding-top: var(--e-xl); }
/* Le premier seuil de la page suit le premier ecran : il n'a pas besoin de
   l'air d'un changement de chapitre, il EST le debut du corps. */
.hero + .seuil, .reperes + .seuil { padding-top: calc(var(--air) * .95); }
.seuil-bande {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--e-m) var(--e-xl); align-items: end;
}
/* Un titre de chapitre pesait exactement le meme poids qu'un titre de
   section (clamp 2.1 -> 3.2 rem des deux cotes) : rien ne disait le rang.
   Il passe nettement au-dessus. */
.seuil-titre {
  font-family: var(--font-titre); font-weight: 300; line-height: 1.02;
  font-size: var(--t-7); color: var(--sapin); max-width: 13ch;
}
.seuil p { font-size: 1rem; line-height: 1.7; color: var(--encre-douce); max-width: 58ch; margin-bottom: 4px; }
.seuil p strong { color: var(--encre); font-weight: 500; }
@media (max-width: 900px) {
  .seuil-bande { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}

/* ---------------------------------------------------------------------------
   LA MOSAÏQUE, le 08/09/2026.
   Les photographies de l'institut sont arrivées le 8 septembre. Elles ne sont
   pas des illustrations : elles disent le lieu mieux que trois paragraphes.
   La bande va d'un bord à l'autre de l'écran, sans arrondi ni ombre, pour que
   l'image soit la seule chose qu'on voie. Le seul mouvement répond au survol.
--------------------------------------------------------------------------- */
.mosaique-bande { width: 100vw; margin-left: calc(50% - 50vw); background: var(--sapin); }
.mosaique {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 215px); gap: 3px;
}
.mosaique figure { margin: 0; overflow: hidden; background: var(--sapin-clair); }
.mosaique figure:first-child { grid-column: span 2; grid-row: span 2; }
.mosaique img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.mosaique figure:hover img { transform: scale(1.045); }
@media (max-width: 640px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 43vw; }
  .mosaique figure:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) { .mosaique img { transition: none; } }

/* Les tarifs d'une carte de soin : repliables au téléphone (voir site.js). */
.carte-prix summary { list-style: none; cursor: pointer; display: none; }
.carte-prix summary::-webkit-details-marker { display: none; }
/* Le repli d'une praticienne (.prix-replie) vaut a toute largeur : son
   resume doit donc s'afficher aussi sur ordinateur, sinon ses tarifs sont
   inatteignables (constate le 25/09/2026 sur la carte d'Alexandra). */
.carte-prix.prix-replie summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: var(--filet); border-bottom: var(--filet);
  font-size: .88rem; color: var(--terracotta);
}
.carte-prix.prix-replie summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.carte-prix.prix-replie[open] summary::after { transform: rotate(-135deg); }
.carte-prix.prix-replie[open] summary { border-bottom: 0; }
@media (max-width: 640px) {
  .carte-prix summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-top: var(--filet); border-bottom: var(--filet);
    font-size: .88rem; color: var(--terracotta);
  }
  .carte-prix summary::after {
    content: ""; width: 9px; height: 9px; flex: 0 0 9px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s ease;
  }
  .carte-prix[open] summary::after { transform: rotate(-135deg); }
  .carte-prix[open] summary { border-bottom: 0; }
}

/* ===========================================================================
   LE TÉLÉPHONE, REFAIT ENTIÈREMENT LE 08/09/2026
   Nils : « pour le responsive mobile c'est à revoir totalement, inspire-toi
   de ce qu'on a fait pour parallak.fr ».

   Ce qui est repris de parallak.fr, et pourquoi :
   1. Un seul palier de téléphone. Le site en avait sept, qui se corrigeaient
      les uns les autres et laissaient des écarts de marge selon la largeur
      exacte de l'appareil. C'était ça, les défauts de marge.
   2. Le premier écran s'ancre EN BAS. Centré, il laissait un tiers d'écran
      vide sous le texte, et les boutons tombaient hors de portée du pouce.
      Le vide remonte donc en haut, où la photographie l'occupe déjà.
   3. Chaque action prend toute la largeur, l'une sous l'autre, à sa taille
      normale. Côte à côte elles donnaient deux largeurs inégales et un texte
      réduit à douze points et demi.
   4. Le texte porte sa propre ombre : aucun réglage de voile ne garantit la
      lisibilité sur une photographie, une ombre douce si.
   5. Toutes les mesures descendent de l'échelle fluide du haut de cette
      feuille. Aucune valeur en pixels n'est réintroduite ici.
   =========================================================================== */
/* --- LE PREMIER ÉCRAN DÈS QUE LE MENU SE REPLIE (≤ 1024 px) ----------------
   Le texte s'ancre EN BAS. Centré, il laissait sous lui près de deux cents
   pixels de vide sur une tablette tenue à la verticale, et le vide se voyait
   d'autant plus que la photographie continuait derrière. Le vide remonte donc
   en haut, où l'image l'occupe déjà, et les deux actions arrivent dans la zone
   naturelle du pouce. C'est la disposition retenue sur parallak.fr. */
@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: calc(100svh - var(--haut-entete));
    grid-template-rows: 1fr auto;
  }
  .hero-corps {
    align-self: end;
    padding-top: clamp(64px, 18vh, 150px);
    padding-bottom: var(--e-m);
  }
  /* Le voile part du bas, là où le texte se pose, et s'efface vers le haut
     pour laisser voir la photographie. Il était le plus dense au milieu de
     l'écran, c'est-à-dire dans le vide. */
  .hero-fond::after {
    background: linear-gradient(180deg,
      rgba(30, 51, 39, .18) 0%, rgba(28, 48, 37, .34) 34%,
      rgba(20, 35, 27, .72) 64%, rgba(14, 26, 20, .93) 100%);
  }
  .hero-fond::before { background: linear-gradient(90deg, rgba(18, 32, 25, .34) 0%, transparent 62%); }
  /* Aucun réglage de voile ne garantit la lisibilité sur une photographie ;
     une ombre portée par le texte lui-même, si. */
  .hero h1, .hero p, .hero-oeil, .repere strong {
    text-shadow: 0 1px 2px rgba(14, 26, 20, .5), 0 4px 20px rgba(14, 26, 20, .8);
  }

  /* LE BANDEAU D'ACCORD DEVIENT UNE BANDE BASSE. Le carton de trois cent
     trente pixels posé dans le coin recouvrait exactement l'endroit où le
     bouton principal vient de descendre. Il s'aplatit donc contre le bas de
     l'écran : le titre saute, la phrase tient sur deux lignes au lieu de cinq,
     et il ne mange plus qu'un huitième de la hauteur au lieu du quart. */
    left: 0; right: 0; bottom: 0; width: auto; border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px;
  }
}

@media (max-width: 640px) {
  /* Sous huit cents pixels, les deux réponses ne tiennent plus à côté de la
     phrase : elles passent dessous, à parts égales, et la bande reste basse. */

  /* Le titre est calibré pour que « au cœur du village » tienne sur sa ligne :
     au-dessus, il réservait la hauteur d'une ligne de plus et creusait un
     trou sous lui. */
  .hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); max-width: 100%; margin-bottom: var(--e-s); }
  .hero p { font-size: .95rem; line-height: 1.55; max-width: 42ch; margin-bottom: var(--e-m); }
  .hero-oeil { margin-bottom: var(--e-s); font-size: 1rem; gap: 10px; }
  .hero-oeil::before { width: 28px; flex-basis: 28px; }
  /* Chaque action prend toute la largeur, l'une sous l'autre. */
  /* Chaque action prend toute la largeur, l'une sous l'autre, partout dans la
     page et pas seulement sur le premier ecran. */
  .paire-actions { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: none; }
  .paire-actions .bouton { width: 100%; padding: 14px 20px; font-size: .92rem; }
  /* La barre du pouce est fixée en bas : le pied du premier écran lui laisse
     sa place au lieu de passer dessous. */
  .hero-pied { padding-bottom: 62px; }

  /* --- Les trois repères, en ligne fine ---------------------------------- */
  .repere { padding: 8px 0; }
  .repere strong { font-size: 1.02rem; }

  /* --- L'en-tête ---------------------------------------------------------- */
  .marque img { height: 44px; }

  /* --- Les titres de section ---------------------------------------------
     Sur un écran de trois cent soixante pixels, un titre de trois rem prend
     quatre lignes et pousse tout le reste vers le bas. */
  .section-tete { margin-bottom: var(--e-l); }
  .section-titre { font-size: clamp(1.7rem, 7.4vw, 2.3rem); margin-bottom: var(--e-s); }
  .section-desc { font-size: 1rem; }
  .etiquette { font-size: .98rem; margin-bottom: var(--e-s); }
  .chapeau h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .prose h2 { font-size: 1.6rem; margin: var(--e-l) 0 var(--e-s); }
  .prose h3 { font-size: 1.25rem; margin: var(--e-m) 0 8px; }

  /* --- Les cartes de soin -------------------------------------------------
     Une carte blanche posée sur du crème, avec son ombre et son gros arrondi,
     donne un empilement de boîtes sur un écran étroit. Sur téléphone la carte
     s'allège : moins d'arrondi, plus d'ombre, un simple filet la sépare. */
  .carte-soin { border-radius: var(--rayon-bloc); box-shadow: none; }
  .carte-soin:hover { transform: none; box-shadow: none; border-color: var(--sable-fonce); }
  /* La vignette garde son rapport de trois sur deux : une hauteur fixe la
     ramenait a une tranche ou le sujet ne se voyait plus. */
  .carte-corps { padding: var(--e-m); }
  .carte-soin h3 { font-size: 1.32rem; }

  /* --- Les blocs encadrés -------------------------------------------------
     Même geste : le contenu compte, pas son cadre. */
  .voie-rdv { box-shadow: none; }

  /* --- Les deux colonnes deviennent une seule ---------------------------- */
  .duo { gap: var(--e-l); }
  .duo-image img { aspect-ratio: 4 / 3; }

  /* --- Le pied de page ---------------------------------------------------- */
  .pied-logo { height: 74px; margin-bottom: var(--e-m); }
  .pied-bas { font-size: .84rem; gap: 8px; }


  /* --- Le grain du papier ------------------------------------------------
     Il coûte une couche de fusion en plein écran à chaque défilement. Sur un
     téléphone, cela se voit : le défilement saccade. Il ne sert que sur les
     grandes surfaces d'aplat, donc sur ordinateur. */
  body::after { display: none; }
}

/* --- Le plus petit palier : les téléphones sous 400 px ---------------------- */
@media (max-width: 640px) {
  .carte-soin h3 { font-size: 1.22rem; }
  .barre-pouce .bouton { font-size: .8rem; padding: 13px 6px; }
}

/* --- LES TELEPHONES COURTS -------------------------------------------------
   Nils, le 09/09/2026 : « le hero ne fite pas avec tous les écrans, du coup il
   n'est pas full screen ». Sur un iPhone SE (375 x 667) ou un petit Android
   (360 x 640), le premier ecran depassait d'une centaine de pixels : la bande
   des reperes tombait sous la ligne de flottaison et le premier ecran ne
   fermait plus. Les reglages de hauteur ecrits plus haut ne s'appliquaient
   pas ici, parce que le palier telephone, ecrit APRES eux, reprenait la main
   sur la taille du titre et les marges. Ce palier-ci croise les deux mesures,
   largeur ET hauteur, et passe donc en dernier.
   Le fait des sept metiers cede sa place : c'est le seul des trois reperes
   qui se retrouve mot pour mot plus bas dans la page. La note et le numero
   de telephone, eux, restent. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(1.65rem, 7vw, 2.05rem); margin-bottom: 10px; }
  .hero p { font-size: .89rem; line-height: 1.5; margin-bottom: 14px; }
  .hero-oeil { margin-bottom: 8px; font-size: .92rem; }
  .hero-corps { padding-top: 14px; padding-bottom: 12px; }
  .paire-actions { gap: 8px; }
  .paire-actions .bouton { padding: 12px 18px; font-size: .88rem; }

  .reperes { grid-template-columns: auto 1fr; grid-template-areas: "note appel"; }
  .repere-fait-bloc { display: none; }
  .reperes .repere-note-bloc { padding: 8px 14px 9px 0; }
  .reperes .repere-appel-bloc { padding: 8px 0 9px 14px; }
  .repere-chiffre { font-size: 1.5rem; }
  .repere-appel { font-size: 1rem; }
}


/* ---------------------------------------------------------------------------
   LA DEUXIEME PASSE DU 09/09/2026 (Nils : « les sections Offrir devraient
   etre en vert pour prolonger l'alternance », « des layouts pas pertinents et
   tres brouillons », « on n'aide pas l'utilisateur a partir d'Epilation
   definitive »). Quatre familles de regles : un seuil qui peut basculer en
   vert avec son chapitre, un sommaire de chapitre, un tableau face a face, et
   des cadres pratiques jumeaux.
--------------------------------------------------------------------------- */

/* Un espacement de sous-bloc INTERIEUR a une section. Il valait des
   `style="margin-top:40px"` semes au fil du HTML, tous differents. */
.sous-bloc { margin-top: var(--e-2xl); }

/* Lu par les lecteurs d'ecran, invisible a l'oeil : un tableau doit garder son
   resume et l'intitule de sa premiere colonne, que le dessin n'affiche pas. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- LE SEUIL SOMBRE ----------------------------------------------------- */
/* Nils, 10/09/2026 : « il y a une barre blanche moche entre Offrir et Premier
   temps ». Le seuil clair pose un filet de sable sous sa bande, pour detacher
   l'aplat du creme qui suit ; sur le seuil sombre, ce meme filet devenait une
   ligne pale en travers du vert, entre le titre du chapitre et sa premiere
   etape. Le seuil vert et le chapitre vert ne font qu'un aplat : il n'y a rien
   a separer, donc le filet tombe. */
.seuil-sombre {
  background: var(--sapin); color: rgba(250, 247, 242, .86);
  padding-bottom: calc(var(--air) * .55);
  border-bottom: 0;
}
.seuil-sombre .seuil-titre { color: var(--creme); }
.seuil-sombre p { color: rgba(250, 247, 242, .78); }
.seuil-sombre p strong { color: var(--creme); }
/* Le seuil et son chapitre forment UN aplat : la section qui suit ne rouvre
   pas une respiration entiere, elle continue le vert commence au-dessus. */
.seuil-sombre + .section-sapin { padding-top: var(--e-l); }
.section-sapin .prose p, .section-sapin p { color: rgba(250, 247, 242, .82); }
.section-sapin a:not(.bouton):not(.cadeau-idee) { color: var(--terracotta-clair); }
.section-sapin .cadeau-idee { border-left-color: rgba(250, 247, 242, .22); }
.section-sapin .cadeau-idee:hover { border-left-color: var(--terracotta-clair); }
.section-sapin .cadeau-idee strong { color: var(--creme); }
.section-sapin .cadeau-prix { color: var(--terracotta-clair); }
.section-sapin .cadeau-idee > span:last-child { color: rgba(250, 247, 242, .74); }
.section-sapin .trio-tete p { color: rgba(250, 247, 242, .78); }

/* --- LE SOMMAIRE DE CHAPITRE --------------------------------------------- */
/* Quatre entrees nommees en tete d'un long chapitre. Elles disent ce qu'il
   contient et ou l'on va, ce qui manquait a l'epilation definitive. */
.sommaire-chapitre {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--sapin); border-bottom: var(--filet);
}
.sommaire-chapitre a {
  display: block; padding: var(--e-s) var(--e-m) var(--e-m) 0;
  text-decoration: none; color: inherit;
  border-left: var(--filet); padding-left: var(--e-m);
  transition: background-color .25s ease;
}
.sommaire-chapitre a:first-child { border-left: 0; padding-left: 0; }
.sommaire-chapitre a:hover, .sommaire-chapitre a:focus-visible { background: var(--sable); }
.sommaire-chapitre strong {
  display: block; font-family: var(--font-titre); font-weight: 400;
  font-size: 1.22rem; line-height: 1.22; color: var(--sapin); margin-bottom: 7px;
}
.sommaire-chapitre span { display: block; font-size: .89rem; line-height: 1.5; color: var(--encre-douce); }
@media (max-width: 900px) {
  .sommaire-chapitre { grid-template-columns: 1fr 1fr; }
  .sommaire-chapitre a { padding: var(--e-s) var(--e-m) var(--e-s) var(--e-m); border-top: var(--filet); }
  .sommaire-chapitre a:first-child, .sommaire-chapitre a:nth-child(2) { border-top: 0; }
  .sommaire-chapitre a:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .sommaire-chapitre { grid-template-columns: 1fr; }
  .sommaire-chapitre a { border-left: 0; padding: 14px 0; border-top: var(--filet); }
  .sommaire-chapitre a:first-child { border-top: 0; padding-top: var(--e-s); }
}

/* --- LE TABLEAU FACE A FACE ---------------------------------------------- */
/* Trois paragraphes et une liste disaient ce que ce tableau dit en un coup
   d'oeil : ce que l'electrolyse traite, et ce que la lumiere pulsee laisse. */
/* Nils, 10/09/2026 : « le tableau qui est juste au-dessus de Comment se passe
   une seance n'est pas tres bien forme ». Sa premiere colonne n'avait pas
   d'intitule visible et les trois colonnes tombaient a des largeurs inegales,
   au gre du texte le plus long. Elle porte maintenant son titre, et les
   largeurs sont fixees : la colonne des cas a le tiers, les deux reponses se
   partagent le reste a parts egales. */
.face-a-face table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.face-a-face th, .face-a-face td {
  text-align: left; vertical-align: top; padding: var(--e-s) var(--e-m);
  border-bottom: var(--filet); font-size: 1rem; line-height: 1.6;
}
.face-a-face thead th {
  font-family: var(--font-titre); font-weight: 400; font-size: 1.3rem;
  color: var(--sapin); border-bottom: 2px solid var(--sapin); padding-bottom: 12px;
}
.face-a-face col.col-cas { width: 32%; }
.face-a-face col.col-reponse { width: 34%; }
.face-a-face tbody th {
  font-weight: 500; color: var(--encre);
  padding-left: 0; font-size: .97rem;
}
/* L'intitule de la premiere colonne n'annonce pas une reponse : il annonce
   ce qu'on regarde. Il se distingue donc des deux autres. */
.face-a-face thead th:first-child {
  font-family: var(--font-texte); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--encre-douce); padding-left: 0;
}
.face-a-face td { color: var(--encre-douce); }
.face-a-face .colonne-forte { background: var(--vert-eau); color: var(--encre); }
.face-a-face tbody tr:last-child th, .face-a-face tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  /* Un tableau de trois colonnes ne tient pas sur un telephone : chaque ligne
     devient un bloc, son intitule en titre et les deux reponses en dessous,
     chacune annoncee par le nom de sa colonne. */
  .face-a-face thead { display: none; }
  .face-a-face table, .face-a-face tbody, .face-a-face tr, .face-a-face th, .face-a-face td { display: block; width: auto; }
  .face-a-face tr { padding: var(--e-s) 0; border-bottom: var(--filet); }
  .face-a-face tbody th { width: auto; padding: 0 0 10px; font-size: 1.08rem; border-bottom: 0; }
  .face-a-face colgroup { display: none; }
  .face-a-face td { padding: 8px 0 8px 14px; border-bottom: 0; border-left: 2px solid var(--sable-fonce); }
  .face-a-face td::before {
    content: attr(data-colonne); display: block; font-size: .78rem;
    letter-spacing: .04em; color: var(--terracotta); margin-bottom: 3px;
  }
  .face-a-face .colonne-forte { background: transparent; border-left-color: var(--terracotta); }
}

/* Sur le vert, le bouton au trait sapin devenait invisible : sombre sur
   sombre. Il reprend le trait creme du premier ecran, qui vit le meme fond. */
.section-sapin .bouton-trait { border-color: rgba(250, 247, 242, .45); color: var(--creme); }
.section-sapin .bouton-trait:hover { background: var(--creme); color: var(--sapin); border-color: var(--creme); }
/* Nils, 24/09/2026 : le bloc « Les avis » (note et photo) se centre sur la
   hauteur de la photographie, comme les autres duos. */
.section-sapin .duo { align-items: center; }
/* Nils, 09/09/2026 : « j'aimerais que "Les questions qu'on nous pose" soit
   centree ». Le titre est centre, et la liste des questions se centre avec lui :
   un titre au milieu au-dessus d'une liste calee a gauche aurait fait un
   decalage de deux cents pixels a l'oeil. La longueur de ligne ne change pas. */
#electrolyse-questions .faq-item, #electrolyse-questions .section-tete {
  max-width: 820px; margin-inline: auto;
}

/* =========================================================================
   LE DEFILEMENT QUI RACONTE, ETENDU AUX TROIS CHAPITRES DU BAS  (09/09/2026)

   Nils : « on doit renforcer le scrollytelling sur les sections principales :
   Épilation définitive, Offrir, Nous trouver, ça va fluidifier toute la
   lecture. Il faut que tu bosses aussi le scrollytelling mobile pour que ça
   marche dessus aussi. »

   Deux pieces, et une seule regle de fond : ce qui bouge repond au doigt ou a
   la molette, jamais a une minuterie.

   1. LE RECIT (`.recit`) existait pour le Rituel Signature seul. Il sert
      maintenant aussi a « Offrir », qui raconte trois gestes dans le temps, et
      a « Nous trouver », qui raconte un trajet dans l'espace. Sur ordinateur,
      la scene de gauche tient en place pendant que les etapes passent.
   2. Le fil accroche sous l'en-tete a ete retire le 24/09/2026 : il repetait en chiffres ce que la page montre.
   ========================================================================= */

/* --- le recit pose sur fond clair ---------------------------------------
   « Nous trouver » est le premier recit a vivre sur le creme : toutes les
   couleurs du recit etaient ecrites pour le vert sapin, et le texte y serait
   ressorti blanc sur creme. */
.recit-clair .recit-scene { background: rgba(30, 51, 39, .06); }
.recit-clair .recit-etape { border-top-color: var(--sable-fonce); }
.recit-clair .recit-etape p { color: var(--encre-douce); }
.recit-clair .recit-jauge { background: rgba(250, 247, 242, .3); }
.recit-clair .recit-jauge i { background: var(--creme); }

/* L'entree du sommaire correspondant au sous-chapitre lu s'allume. Elle n'est
   visible qu'au retour vers le haut du chapitre, mais c'est la que la question
   « ou en suis-je » se pose vraiment. */
.sommaire-chapitre a.actif { background: var(--vert-eau); }
.sommaire-chapitre a.actif strong { color: var(--sapin); }

/* =========================================================================
   L'AMPLEUR DU DEFILEMENT SUR ORDINATEUR  (09/09/2026)

   Nils : « sur PC, ça manque encore un petit peu de clarté, et en particulier
   le scrolling n'est pas parfaitement timé, synchronisé, ou alors les blocs
   qui sont reliés à l'image sont tellement fins qu'on ne comprend pas trop. »

   La seconde hypothese etait la bonne, et elle se mesure. La scene accrochee
   fait six cents pixels de haut ; les etapes qui la pilotaient faisaient 252,
   279, 290, 317, 354, 417 et 419 pixels. Une image ne tenait donc que le tiers
   d'un ecran avant d'etre remplacee : trois images defilaient dans un seul
   mouvement de molette, et le lien entre le texte lu et l'image montree
   n'avait pas le temps de se former. Le calage n'etait pas faux — il est
   geometrique et verifie a zero desaccord — il etait simplement trop rapide
   pour etre compris.

   Chaque etape recoit donc une hauteur minimale de deux tiers d'ecran, et son
   texte se centre dedans, en face du milieu de la scene. Une image tient
   maintenant un mouvement de molette entier, et le texte qui lui repond est a
   sa hauteur. Le telephone n'est pas touche : Nils le trouve « super clair »,
   et les etapes y portent chacune leur image en flux normal.
   ========================================================================= */
@media (min-width: 901px) {
  .recit-vivant .recit-etape {
    min-height: 52svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--e-l) 0;
  }
  /* Les filets de separation etaient poses au ras du texte. Ecartes de trois
     cents pixels de lui par la hauteur minimale, ils ne separaient plus rien
     et flottaient au milieu du vide : c'est l'etape allumee qui dit desormais
     ou l'on est. */
  .recit-vivant .recit-etape { border-top: 0; }
}

/* ===========================================================================
   LE TAPIS DE BULLES  (09/09/2026, quatrieme etat)
   Nils : « il faut qu'il y ait un tapis de bulles continu mais de la meme
   taille (le tapis) que la longueur du site », « je prefererais en mode PC que
   les bulles restent sur la gauche et la droite de l'ecran », « les bulles
   chargent avant le contenu, je veux l'inverse », puis « les bulles ne bougent
   pas, elles sont coupees et entre les sections ».
   Ce que ce montage tient, point par point :
   1. LE TAPIS FAIT LA LONGUEUR DU SITE. Il est pose sur toute la hauteur de la
      page et defile avec elle. Chaque bulle a sa hauteur propre, et leur nombre
      suit la hauteur du bloc : ni trou ni entassement.
   2. IL EST D'UN SEUL TENANT. Il n'y a plus de tapis par section. Les tapis par
      section se coupaient a chaque bord de chapitre, et la coupure se voyait.
      Celui-ci passe AU-DESSUS du fond des blocs (plan 1) et non derriere : il
      traverse donc les chapitres vert sapin sans s'interrompre. Comme il se
      tient dans les marges et qu'aucun texte n'y entre, rien n'est masque.
      Le melange par difference le rend lisible sur les deux fonds a la fois :
      sur le creme comme sur le sapin, la bulle se pose en plus sombre, du meme
      ecart, sans qu'on ait a lui donner une couleur par chapitre.
   3. AUCUNE BULLE N'EST COUPEE. Son diametre ne depasse jamais la largeur de sa
      colonne : sur une fenetre etroite les bulles rapetissent, elles ne sont
      pas rognees. Leurs hauteurs s'arretent avant le bas du tapis pour la meme
      raison.
   4. ELLES BOUGENT, ET CA SE VOIT. Une bulle parcourt un cinquieme de hauteur
      d'ecran et une trentaine de pixels de cote, en quinze a vingt-six
      secondes, dans un sens puis dans l'autre. Le premier essai derivait dix
      fois plus lentement : le mouvement etait juste, mais invisible.
   5. IL ARRIVE APRES LE CONTENU. Il part invisible et se decouvre en deux
      secondes et demie, une fois l'ecran d'ouverture parti.
   Les regles d'origine tiennent : un contour d'un pixel, tout en CSS sans une
   ligne de JavaScript, rien du tout sous 1360 pixels et des que le systeme
   demande moins de mouvement.
   PIEGE PAYE UNE FOIS : un nom de @keyframes est global a toute la feuille de
   style. Le premier jet appelait cette animation « bulle-monte », nom deja pris
   par l'ouverture du hero (lignes 454, 469 et 478) ; la definition la plus
   tardive gagne, et le titre, le texte et la bande des reperes du hero jouaient
   la derive des bulles, donc s'effacaient au bout d'une seconde. L'animation
   s'appelle desormais « bulle-derive ».
   ========================================================================= */
.bulles { display: none; }
/* Le tapis n'apparait qu'a partir de 1360 pixels de large. En dessous, la
   marge qui borde le texte descend sous quatre-vingt-dix pixels : il n'y a plus
   de place pour une bulle sans qu'elle passe derriere une phrase, et Nils a
   demande exactement le contraire. Mieux vaut pas de tapis qu'un tapis dans le
   texte. */
@media (min-width: 1360px) {
  /* Le corps de la page devient le repere du tapis, pour que sa hauteur soit
     celle du site entier et non celle de l'ecran. */
  body { position: relative; }
  .bulles {
    display: block; position: absolute; inset: 0;
    z-index: 1; pointer-events: none;
    opacity: 0; animation: bulles-arrivee 1s ease .5s forwards;
  }
  /* Les grandes photographies bord a bord (le hero, la mosaique) passent
     au-dessus du tapis : un anneau blanc pose sur une photo se lit comme une
     tache sur l'objectif, pas comme une bulle. Le vert sapin, lui, garde les
     bulles (Nils, 09/09 : « on ne voit pas sur fond vert »). */
  .hero, .mosaique-bande { position: relative; z-index: 2; }
  /* Les deux colonnes occupent EXACTEMENT la marge qui reste de part et
     d'autre du texte : aucune bulle ne passe derriere une phrase. */
  .bulles-colonne {
    position: absolute; top: 0; bottom: 0; overflow: hidden;
    width: calc((100% - var(--bande)) / 2);
    --reserve: 17px;
  }
  .bulles-gauche { left: 0; }
  .bulles-droite { right: 0; }
  .bulles i {
    position: absolute; top: var(--y); left: 0;
    /* Le diametre ne depasse jamais la colonne, et la place occupee se compte
       sur ce qui RESTE une fois le diametre pose : une bulle rapetisse ou se
       decale, elle n'est jamais coupee par un bord. */
    /* La colonne garde dix-sept pixels de reserve de chaque cote, la course
       maximale de la derive laterale : la bulle derive sans jamais sortir. */
    width: min(var(--t), 100% - var(--reserve) * 2); aspect-ratio: 1;
    border-radius: 50%;
    margin-left: calc(var(--reserve) + var(--x)
                * (100% - var(--reserve) * 2
                   - min(var(--t), 100% - var(--reserve) * 2)));
    /* Nils, 09/09/2026 : « on voit trop les bulles », puis « on ne voit pas
       sur fond vert, passer sur les tons plus clairs ». Le melange par
       difference faisait exactement le contraire de ce qu'il fallait : il
       ASSOMBRIT, donc il disparaissait sur le vert sapin deja sombre et se
       voyait trop sur le creme. Le trait est maintenant blanc et simplement
       translucide, sans melange : clair sur le vert, ou il se detache
       nettement, et a peine plus clair que le creme, ou il reste un filigrane.
       Sans melange, le navigateur n'a plus non plus a isoler une couche de
       composition pour chacune des cent trente bulles. */
    /* Deux anneaux d'un pixel, l'un dans l'autre : le blanc se detache sur le
       vert sapin et se perd dans le creme, le vert tres pale fait l'inverse.
       Chaque fond n'en revele donc qu'un seul, et le tapis existe partout sans
       jamais peser au meme endroit. */
    border: 1px solid rgba(255, 255, 255, .26);
    /* Nils, 24/09 : « on ne voit pas les bulles sur fond blanc », deux fois.
       Un anneau d'un pixel a .09 reste sous le seuil de l'oeil sur le creme :
       l'anneau sombre passe a .2 et la bulle prend un voile vert d'eau et un
       reflet, comme une vraie bulle. Sur le sapin, le voile et l'anneau
       sombre se fondent dans le fond, le trait blanc reste seul. Puis, le
       meme jour : « elles se voient beaucoup trop, plus sobres mais
       visibles », puis « sobre, second plan » : plus de reflet, un voile a
       peine teinte, l'anneau a .11, juste au-dessus du seuil de l'oeil. */
    box-shadow: 0 0 0 1px rgba(30, 51, 39, .11);
    background: rgba(126, 148, 131, .025);
    animation: bulle-derive var(--d) ease-in-out var(--r) infinite alternate;
    /* Pas de will-change ici : le tapis compte plus de cent cercles, et
       promettre a chacun sa couche graphique couterait plus que l'animation
       elle-meme. Le navigateur promeut ceux qu'il voit. */
  }
  .bulles-droite i {
    left: auto; right: 0; margin-left: 0;
    margin-right: calc(var(--reserve) + var(--x)
                 * (100% - var(--reserve) * 2
                    - min(var(--t), 100% - var(--reserve) * 2)));
  }
  /* Tant que l'ecran d'ouverture est la, rien ne bouge et rien n'apparait. */
  html.ouverture-bloc .bulles,
  html.ouverture-bloc .bulles i { animation-play-state: paused; }
}
/* Une bulle ne traverse pas la page : elle respire sur place, d'un cinquieme
   de hauteur d'ecran et d'une trentaine de pixels de cote, dans un sens puis
   dans l'autre. Le grand mouvement, lui, vient du defilement. */
@keyframes bulle-derive {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--l), var(--v), 0); }
}
@keyframes bulles-arrivee {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Mouvement reduit : les bulles restent, immobiles et deja la. */
@media (prefers-reduced-motion: reduce) {
  .bulles, .bulles i { animation: none !important; opacity: 1; }
}

/* LE SYMBOLE D'UNE PRATICIENNE INDEPENDANTE. Ce n'est pas une photographie
   mais une marque : elle se montre entiere, posee sur son propre fond, et non
   recadree comme le sont les photographies des cartes. */
/* ---------------------------------------------------------------------------
   LA VITRINE DES SOINS, SUR L'ACCUEIL — 21/09/2026
   Chloé demande plus de lisibilité : les soins et l'électrolyse partent sur
   leur propre page, et l'accueil les annonce ici. Le bloc est écrit comme la
   carte d'une maison, pas comme une grille de tuiles — sinon on n'aurait rien
   allégé, on aurait juste retiré les prix. Un nom, ce que c'est, un tarif
   d'appel, tenus par un point de conduite.
--------------------------------------------------------------------------- */

.vc-suite { margin-top: 26px; }
.vc-suite a {
  font-family: var(--font-titre); font-style: italic; font-size: 1.15rem;
  color: var(--feuillage); text-underline-offset: 6px;
  text-decoration-color: var(--sauge-pale);
}
.vc-suite a:hover { color: var(--terracotta); text-decoration-color: currentColor; }

/* La porte de l'électrolyse, sous son seuil sapin. */
.vc-porte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding-top: 26px;
}
.vc-porte-dit { color: var(--sauge-pale); font-size: var(--t-3); }

/* ---------------------------------------------------------------------------
   LA SUITE, AU BAS D'UNE PAGE FILLE — 21/09/2026
   Une page fille finissait sur son dernier paragraphe : plus d'action, plus
   de chemin, et le pied de page ne se lit pas comme une suite. Le bloc rend
   le creneau d'abord, puis les deux ou trois portes qui ont du sens ici.
--------------------------------------------------------------------------- */
.suite-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 18px; margin-top: var(--e-l);
}
.suite-passages {
  list-style: none; margin: var(--e-xl) auto 0; padding: 0;
  max-width: 44rem; border-top: 1px solid rgba(185, 199, 188, .22);
}
.suite-passages li {   /* deux colonnes : les liens s'alignent entre eux,
                          au lieu de flotter chacun au bout de sa phrase */
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  align-items: baseline; gap: 4px 22px;
  padding: 18px 0; border-bottom: 1px solid rgba(185, 199, 188, .22);
  color: var(--sauge-pale); font-size: .97rem;
}
.suite-passages a {
  justify-self: start;   /* le trait suit le mot, pas la colonne */
  font-family: var(--font-titre); font-style: italic; font-size: 1.2rem;
  color: var(--creme); text-decoration: none;
  border-bottom: 1px solid rgba(250, 247, 242, .3);
  padding-bottom: 2px;
}
.suite-passages a:hover, .suite-passages a:focus-visible {
  color: var(--terracotta-clair); border-bottom-color: currentColor;
}
@media (max-width: 640px) {
  .suite-actions .bouton { width: 100%; justify-content: center; }
  .suite-passages li { display: block; }
  .suite-passages { max-width: none; }
  .suite-passages a { display: inline-block; margin-top: 4px; }
}

/* --- LE PASSAGE D'UNE PAGE A L'AUTRE — 21/09/2026 -------------------------
   Le site est en quatre pages a la demande de Chloe : ouvrir une page fille ne
   doit pas donner le clignotement blanc d'un rechargement. Le document sortant
   se fond vers le haut, l'entrant monte de dix pixels, et l'en-tete porte son
   propre nom de transition pour rester immobile pendant le fondu — sinon elle
   glisserait avec le reste et la barre semblerait sauter. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-sort .18s ease-in both; }
::view-transition-new(root) { animation: page-entre .34s ease-out both; }
@keyframes page-sort { to { opacity: 0; transform: translateY(-6px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(10px); } }
.entete { view-transition-name: entete; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------------------
   LA CARTE RANGEE PAR BESOIN (branche version-possible, 24/09/2026)
   Cinq tuiles photo « Je viens pour… », puis une barre accrochee sous
   l'en-tete qui suit le chapitre lu. La barre est faite d'ancres : sans
   script, elle mene quand meme au bon endroit.
   --------------------------------------------------------------------------- */
.besoins-section { padding-bottom: var(--e-l); }
.besoins-tete { margin-bottom: var(--e-l); }
.besoins {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.besoin { grid-column: span 2; }
.besoin:nth-child(-n + 2) { grid-column: span 3; }
.besoin {
  position: relative; display: block; overflow: hidden;
  min-height: 260px; border-radius: var(--rayon-bloc);
  color: var(--creme); text-decoration: none; background: var(--sapin);
  box-shadow: var(--ombre-douce);
}
.besoin:nth-child(-n + 2) { min-height: 340px; }
.besoin img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.1s var(--pose, ease);
}
.besoin::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 51, 39, 0) 30%, rgba(30, 51, 39, .88) 100%);
}
.besoin-dire {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: 4px; padding: 22px 24px;
}
.besoin-nom {
  font-family: var(--font-titre); font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.1;
}
.besoin-dit { color: var(--sauge-pale); font-size: .95rem; }
.besoin-prix {
  justify-self: start; margin-top: 6px; padding: 3px 12px;
  border: var(--filet-clair); border-radius: var(--rayon-pilule);
  font-size: .85rem; font-variant-numeric: lining-nums;
}
.besoin:hover img, .besoin:focus-visible img { transform: scale(1.04); }
.besoin:hover .besoin-nom, .besoin:focus-visible .besoin-nom { color: var(--terracotta-clair); }
.vitrine .besoins-tete { display: none; }

.categorie { scroll-margin-top: calc(var(--haut-entete) + 12px); }
#passes { scroll-margin-top: calc(var(--haut-entete) + 12px); }
.categorie + .categorie { padding-top: 0; }

@media (max-width: 900px) {
  .besoins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .besoin, .besoin:nth-child(-n + 2) { grid-column: span 1; min-height: 220px; }
  .besoin:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .besoins { gap: 10px; }
  .besoin, .besoin:nth-child(-n + 2) { min-height: 190px; }
  .besoin-dire { padding: 16px; }
  .besoin-dit { font-size: .85rem; }
}
/* Photos en hauteur dans des tuiles en largeur : le cadrage garde le geste,
   les mains sur la cliente, au-dessus du texte de la tuile (Nils, 01/10/2026). */
.besoin img[src*="massage-dos"] { object-position: center 95%; }
.besoin img[src*="soin-visage"] { object-position: center 100%; }

h1, h2, h3 { text-wrap: balance; }

/* --- ETAPES POSEES A PLAT (24/09/2026) -----------------------------------
   Remplacent les recits defilants de l'accueil (carte cadeau, acces) : tout
   est lisible d'un coup, rien ne s'eteint hors de l'ecran. Trois colonnes a
   partir de 900 px, une pile en dessous. .etapes-liste garde la pile partout
   (colonne de texte a cote du plan). */
.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-m);
}
.etape {
  position: relative; padding: var(--e-m) var(--e-m) var(--e-m) calc(var(--e-m) + 48px);
}
.etape-rang {
  position: absolute; left: var(--e-m); top: var(--e-m);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-titre); font-size: 1.3rem; line-height: 1;
  background: var(--vert-eau); color: var(--sapin);
}
.etape h3 { font-family: var(--font-titre); font-size: var(--t-4); line-height: 1.2; margin: 2px 0 8px; color: var(--sapin); }
.etape p { margin: 0; font-size: var(--t-3); line-height: 1.6; color: var(--encre-douce); }
.section-sapin .etape { background: rgba(250, 247, 242, .06); border-color: rgba(250, 247, 242, .16); }
.section-sapin .etape h3 { color: var(--creme); }
.section-sapin .etape p { color: rgba(250, 247, 242, .86); }
.section-sapin .etape-rang { background: var(--terracotta); color: var(--creme); }
@media (max-width: 900px) {
  .etapes { grid-template-columns: 1fr; gap: 14px; }
}

/* Contact : deux voies cote a cote, centrees, puis une ligne pour ecrire. */
.voies-rdv.voies-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }

/* --- QUI EST LA, ET QUAND (Chloe puis Nils, 24/09/2026) ---------------------
   Un agenda : les jours en colonnes, le matin et l'apres-midi en lignes, les
   prenoms ecrits dans les cases. Plein : chaque semaine ; clair, avec le
   rythme en toutes lettres : pas toutes les semaines. Au telephone, les
   jours s'empilent, chacun avec son matin et son apres-midi. */
.planning { max-width: 1120px; margin: 0 auto var(--air); }
.planning-titre { font-size: var(--t-5); font-weight: 400; color: var(--sapin); text-align: center; margin-bottom: var(--e-m); }
.agenda {
  display: grid; grid-template-columns: 96px repeat(6, 1fr); grid-template-rows: auto auto auto; grid-auto-flow: column;
  background: var(--blanc); border: var(--filet); border-radius: var(--rayon-bloc); overflow: hidden;
}
.agenda-marges, .agenda-jour { display: contents; }
.agenda-marges span, .agenda-jour > * { border-top: var(--filet); border-left: var(--filet); padding: 12px 10px; }
.agenda-marges span { border-left: 0; display: flex; align-items: center; font-family: var(--font-titre); font-style: italic; font-size: 1.05rem; color: var(--terracotta); }
.agenda-marges span:first-child, .agenda-jour h4 { border-top: 0; }
.agenda-jour h4 { margin: 0; text-align: center; font-family: var(--font-titre); font-weight: 500; font-size: var(--t-4); color: var(--sapin); background: var(--creme); }
.agenda-moment { display: none; }
.agenda-case ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qui {
  padding: 7px 10px; border-radius: var(--rayon); text-align: center;
  font-size: var(--t-2); font-weight: 600; line-height: 1.25; color: var(--blanc); background: var(--teinte);
}
.qui small { display: block; font-size: .74rem; font-weight: 400; }
.qui.rare { color: var(--teinte); background: color-mix(in srgb, var(--teinte) 12%, var(--blanc)); }
.p-chloe { --teinte: var(--p-chloe); }
.p-alexandra { --teinte: var(--p-alexandra); }
.p-severine { --teinte: var(--p-severine); }
.planning-reserver { margin-top: var(--e-s); text-align: center; font-size: var(--t-2); color: var(--encre-douce); }
.planning-reserver a { color: var(--sapin); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .agenda { display: block; }
  .agenda-marges { display: none; }
  .agenda-jour { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--filet); }
  .agenda-jour:first-of-type { border-top: 0; }
  .agenda-jour > * { border: 0; }
  .agenda-jour h4 { grid-column: 1 / -1; text-align: left; padding: 8px 14px; }
  .agenda-case + .agenda-case { border-left: var(--filet); }
  .agenda-moment { display: block; margin-bottom: 6px; font-family: var(--font-titre); font-style: italic; font-size: 1rem; color: var(--terracotta); }
}
@media (max-width: 900px) { .voies-rdv.voies-deux { grid-template-columns: 1fr; } }

/* ===== Finitions (audit du 24/09/2026) =====
   Chaque regle ci-dessous repond a un constat mesure en vraie fenetre, de 360
   a 1920 px, en paysage 844x390 et en mouvement reduit. */

/* Aucune ancre ne se pose sous l'en-tete collant. */
[id] { scroll-margin-top: calc(var(--haut-entete) + 14px); }

/* Menu en paysage (844x390) : les entrees en grand corps debordaient et rien
   ne defilait. La taille suit la hauteur, le volet part du haut. */
@media (max-height: 540px) {
  .volet { justify-content: flex-start; padding-top: calc(var(--haut-entete) + 8px); padding-bottom: var(--e-m); }
  .volet-liens a { font-size: clamp(1.25rem, 6.5vh, 1.9rem); padding: 7px 0; }
  .volet-pied { margin-top: var(--e-m); }
}
/* Le logo en filigrane du volet et des sections sortait coupe du cadre
   (« BULLE NATUR ») : au telephone, il se retire. */
@media (max-width: 900px) {
  .volet-fond { display: none; }
}

/* Textes trop petits et cibles trop etroites pour un pouce. */
.pied h4 { font-size: .8rem; }
.repere-appel { min-height: 44px; }
.carte-lien { display: inline-flex; align-items: center; min-height: 44px; }

/* Les puces du diaporama : un trait de 3 px dans une cible de 32 px. */
.hero-puces { gap: 4px; }
.hero-puces button { width: 34px; }
.hero-puces button[aria-selected="true"] { width: 46px; }
.hero-puces button {
  height: 32px; background: linear-gradient(rgba(250, 247, 242, .34), rgba(250, 247, 242, .34)) center / 100% 3px no-repeat;
}
.hero-puces button[aria-selected="true"] {
  background: linear-gradient(rgba(250, 247, 242, .92), rgba(250, 247, 242, .92)) center / 100% 3px no-repeat;
}

/* Tuiles « Je viens pour » : sous 560 px, une par ligne, pour que le titre
   tienne sur une ligne et ne se pose plus sur un visage. */
@media (max-width: 640px) {
  .besoins { grid-template-columns: 1fr; }
  .besoin, .besoin:first-child, .besoin:nth-child(-n + 2) { grid-column: auto; min-height: 168px; }
  .besoin::after { background: linear-gradient(180deg, rgba(30, 51, 39, .05) 20%, rgba(30, 51, 39, .9) 100%); }
}

/* Pied de page au telephone : un lien par ligne. */
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pied-liens a { color: rgba(250, 247, 242, .78); text-decoration: underline; text-decoration-color: rgba(250, 247, 242, .3); text-underline-offset: 3px; }
.pied-liens a:hover { color: var(--creme); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .pied-bas { flex-direction: column; gap: 6px; line-height: 1.6; }
  .pied-liens { flex-direction: column; gap: 0; }
  .pied-liens > a, .pied-liens > span { padding: 10px 0; }
}
/* Mentions legales : une ligne de lecture, pas une ligne d'ecran. */
.prose li { max-width: 66ch; }

/* ===== Les praticiennes (24/09/2026) =====
   Le chapitre revient en ligne apres l'appel ; ses regles etaient parties avec
   le planning dans la passe « harmonie ». Une carte par praticienne, le role en
   etiquette, les jours en gras, sans pastille. */
.equipe-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-l);
  align-items: start;
}
.praticienne {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.praticienne-visuel { aspect-ratio: 4 / 3; background: var(--sable); overflow: hidden; }
.praticienne-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.praticienne-visuel-marque { background: var(--sapin); display: grid; place-items: center; }
.praticienne-visuel-marque img { width: 62%; height: auto; object-fit: contain; border-radius: 50%; }
.praticienne-visuel-initiale { display: grid; place-items: center; background: var(--vert-eau); }
.praticienne-initiale {
  display: grid; place-items: center;
  width: 112px; height: 112px; border-radius: 50%;
  border: 1px solid var(--p-severine); color: var(--p-severine);
  font-family: var(--font-titre); font-size: 3.6rem; line-height: 1;
  background: var(--creme);
}
.praticienne-corps { display: flex; flex-direction: column; gap: 10px; padding: var(--e-m); flex: 1; }
.praticienne-corps h3 { font-family: var(--font-titre); font-weight: 500; font-size: var(--t-5); line-height: 1.1; color: var(--sapin); margin: 0; order: -1; }
.praticienne-role { font-family: var(--font-titre); font-style: italic; font-size: var(--t-1); color: var(--vert-eau-fonce); }
.praticienne-corps p { margin: 0; color: var(--encre-douce); line-height: 1.6; }
.praticienne-corps .carte-prix { margin: 0; }
.praticienne-jours { font-weight: 600; color: var(--encre) !important; font-size: var(--t-2); }
.praticienne-bouton { margin-top: 6px; align-self: flex-start; white-space: nowrap; }
.praticienne-tel { font-size: var(--t-2); color: var(--encre-douce); padding: 4px 0 0; }
@media (max-width: 900px) {
  .equipe-grille { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .praticienne-visuel { aspect-ratio: 16 / 10; }
}

/* ===== Les marques partenaires (24/09/2026) =====
   Chloe a l'appel : ses deux objectifs sont la vente de produits et les
   cartes cadeaux. Les trois marques quittent le trio de texte pour trois
   cartes avec leur image, sur fond sable, pour se voir en defilant. */
.section-marques { background: var(--sable); }
.marques-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-l);
}
.marque-carte {
  background: var(--blanc);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.marque-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.marque-carte h3 { font-family: var(--font-titre); font-weight: 500; font-size: var(--t-5); color: var(--sapin); margin: var(--e-m) var(--e-m) 6px; }
.marque-carte p { margin: 0 var(--e-m) var(--e-m); color: var(--encre-douce); line-height: 1.6; }

/* La vitrine de l'accueil nomme ce que les quatre entrees ne montrent pas. */
.vc-aussi { margin-top: var(--e-l); color: var(--encre-douce); }
.vc-aussi a { color: var(--sapin); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .marques-grille { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .marque-carte img { aspect-ratio: 16 / 10; }
}

/* ===========================================================================
   L'ACCUEIL REPRIS LE 25/09/2026 (Nils, au lendemain de l'appel de Chloe)
   Ordre et fonds : premier ecran, cocon (clair), soins (sapin), electrolyse
   (clair), offrir (sapin), equipe (clair), marques (sapin), venir (clair),
   pied (sapin). Deux fonds de meme valeur ne se suivent jamais : Chloe lit
   deux verts qui se touchent comme un seul bloc (appel du 24/09).
   =========================================================================== */

/* LES TITRES DE SECTION, PLUS GROS. Nils lit l'etiquette comme le titre
   (« les titres du type "Le Cocon Bulle Nature", "Les avis" ») : elle
   grossit en tete de section, et le titre qui la suit monte d'un cran pour
   garder le rang. Dans une etape ou une carte, elle garde sa taille. */
:root {
  --t-6: clamp(2.35rem, 4.4vw, 3.4rem);
  --t-7: clamp(2.7rem, 5.2vw, 4.1rem);
}
.section-tete .etiquette, .seuil .etiquette, .cocon-texte .etiquette {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem); margin-bottom: 12px;
}
@media (max-width: 640px) {
  .section-titre { font-size: clamp(2rem, 8.6vw, 2.6rem); }
}

/* LE PREMIER ECRAN, CENTRE. Le titre tient en deux lignes, la seconde est
   le lieu entier. Centre, le texte se posait sur le bouddha de la premiere
   vue : un voile rond, au centre, l'eteint sous le texte et laisse l'aurore
   vivre sur les bords, la ou elle est la plus belle. */
.hero-corps { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-oeil::after {
  content: ""; width: 42px; height: 1px; flex: 0 0 42px;
  background: var(--terracotta-clair);
}
.hero h1 { max-width: 17em; margin-inline: auto; font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
.hero h1 em { display: block; }
.hero p { margin-inline: auto; }
.hero .paire-actions { justify-content: center; max-width: none; }
.hero-fond::before {
  background: radial-gradient(ellipse 62% 58% at 50% 54%, rgba(16, 29, 22, .66) 0%, rgba(16, 29, 22, .42) 52%, rgba(16, 29, 22, 0) 100%);
}

/* LE COCON : un texte et trois bulles. Chaque photographie est ronde et
   cerclee d'un filet vert d'eau detache d'elle, comme le reflet d'une bulle. */
.cocon-bande {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--e-2xl); align-items: center;
}
.cocon-texte p { color: var(--encre-douce); max-width: 44ch; margin-bottom: 12px; }
.cocon-texte .cocon-lien { margin-top: 24px; }
.cocon-bulles { position: relative; aspect-ratio: 1 / .9; }
.cocon-bulle {
  position: absolute; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 10px var(--creme), 0 0 0 11px var(--vert-eau-trait), var(--ombre-image);
}
.cocon-bulle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cocon-bulle-1 { width: 60%; left: 0; top: 14%; }
.cocon-bulle-1 img { object-position: center 30%; }
.cocon-bulle-2 { width: 44%; right: 2%; top: 0; }
.cocon-bulle-3 { width: 30%; right: 12%; bottom: 0; }
@media (max-width: 900px) {
  .cocon-bande { grid-template-columns: 1fr; gap: var(--e-xl); }
  .cocon-bulles { order: -1; width: 100%; max-width: 480px; margin-inline: auto; }
}

/* LES SOINS PASSENT EN SAPIN, entre deux sections claires. */
.vitrine.section-sapin .besoin { box-shadow: none; }
.vitrine.section-sapin .vc-aussi { color: rgba(250, 247, 242, .74); }
.vitrine.section-sapin .vc-aussi a,
.vitrine.section-sapin .vc-suite a { color: var(--creme); text-decoration-color: var(--vert-eau-trait); }
.vitrine.section-sapin .vc-suite a:hover { color: var(--terracotta-clair); }

/* La cinquieme tuile : les produits, sans photographie, sur le vert d'eau. */
.besoin-produits {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--vert-eau); color: var(--sapin);
}
.besoin-produits::after { display: none; }
.besoin-logos { display: flex; align-items: center; gap: 22px; padding: 26px 24px 0; }
.besoin-logos img {
  position: static; width: auto; height: 38px; object-fit: contain; transition: none;
}
.besoin-logos img:first-child { height: 46px; }
.besoin-produits .besoin-dire { position: static; }
.besoin-produits .besoin-dit { color: var(--feuillage); }
.besoin-produits:hover .besoin-nom, .besoin-produits:focus-visible .besoin-nom { color: var(--terracotta); }
.besoin-produits:hover img, .besoin-produits:focus-visible img { transform: none; }

/* L'ELECTROLYSE ET L'EQUIPE : un seuil sur le fond de son chapitre. */
.seuil-creme { background: var(--creme); border-bottom: 0; }
.seuil-creme .vc-porte-dit { color: var(--encre-douce); }

/* LES CARTES DES PRATICIENNES, A LA MEME HAUTEUR. La plus longue donnait sa
   hauteur a la rangee, les deux autres restaient courtes au-dessus du vide :
   elles s'etirent, et leurs jours et leur bouton descendent au meme niveau. */
.equipe-grille { align-items: stretch; }
.praticienne-corps .praticienne-jours { margin-top: auto; }

/* LES MARQUES, SUR LE SAPIN : la photographie du produit, le vrai logo en
   creme a la place du nom, une ligne. */
.section-marques.section-sapin { background: var(--sapin); }
.section-marques .marque-carte { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.marque-image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon-image); }
.marque-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.marque-carte .marque-nom { display: flex; align-items: center; height: 70px; margin: 28px 0 12px; }
.marque-nom img { width: auto; height: 100%; max-width: 210px; aspect-ratio: auto; object-fit: contain; object-position: left center; }
.marque-nom-1944 img { height: 58px; }
.marque-nom-bs img { height: 82px; }
.section-marques .marque-carte p { margin: 0; color: rgba(250, 247, 242, .8); }

/* VENIR ET RESERVER, UNE SEULE SECTION : le plan, et a cote le rendez-vous,
   l'adresse, le stationnement. */
.venir-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-xl); align-items: stretch;
}
.venir-carte { height: auto; min-height: 520px; }
.venir-infos { display: flex; flex-direction: column; }
.venir-bloc { padding: 26px 4px; border-top: var(--filet); }
.venir-bloc h3 {
  font-family: var(--font-titre); font-weight: 500; font-size: var(--t-5);
  line-height: 1.15; color: var(--sapin); margin: 0 0 8px;
}
.venir-bloc p { color: var(--encre-douce); line-height: 1.65; margin: 0 0 16px; }
.venir-bloc p:last-child { margin-bottom: 0; }
.venir-rdv {
  padding: var(--e-l); border: 0; border-radius: var(--rayon-bloc);
  background: var(--sapin); color: var(--creme); margin-bottom: 8px;
}
.venir-rdv h3 { color: var(--creme); }
.venir-rdv p { color: rgba(250, 247, 242, .8); }
.venir-rdv .bouton-plein { background: var(--terracotta); border-color: var(--terracotta); }
.venir-ecrire { font-size: var(--t-2); margin-top: 18px !important; }
.venir-ecrire a { color: var(--creme); text-decoration: underline; text-decoration-color: var(--vert-eau-trait); text-underline-offset: 4px; }
@media (max-width: 900px) {
  .venir-grille { grid-template-columns: 1fr; }
  .venir-carte { order: 2; min-height: 0; height: min(58svh, 440px); }
}

/* La règle des liens sur sapin (terracotta clair) ne vaut pas pour les tuiles de soins :
   leur nom reste crème sur photo, sapin sur la tuile vert d'eau des produits. */
.vitrine.section-sapin a.besoin { color: var(--creme); }
.vitrine.section-sapin a.besoin-produits { color: var(--sapin); }
.vitrine.section-sapin a.besoin-produits .besoin-nom { color: var(--sapin); }

/* Poids optique des trois logos : Marlay, large, redescend ; 1944, carré, remonte. */
.marque-nom img { height: 54px; }
.marque-nom-1944 img { height: 68px; }
.marque-nom-bs img { height: 82px; }

/* LE TELEPHONE, REPRIS LE 25/09/2026 : c'est l'écran de Chloé et de ses clientes. */
.hero-ville { white-space: nowrap; }
.pied-appel a.bouton { text-decoration: none; }
@media (max-width: 900px) {
  /* Le rendez-vous d'abord, puis l'adresse et son plan, puis le stationnement. */
  .venir-infos { display: contents; }
  .venir-rdv { order: 1; margin-bottom: 0; }
  .venir-adresse { order: 2; }
  .venir-carte { order: 3; }
  .venir-garer { order: 4; }
  .venir-grille { gap: 0; }
  .venir-carte { margin: 4px 0 18px; }
  .venir .section-tete-centre { text-align: left; margin-left: 0; }
  .venir .section-tete-centre .section-desc { margin-left: 0; }
  .praticienne-visuel-initiale { aspect-ratio: auto; height: 150px; }
}
@media (max-width: 700px) {
  /* Le nom de la ville ne se coupe plus : il prend sa propre ligne. */
  .hero h1 em { font-size: min(8.2vw, 2.3rem); margin-top: .1em; }
  /* Les marques en rangées serrées : la photo à gauche, le logo et la ligne à droite. */
  .section-marques .marques-grille { gap: 28px; }
  .section-marques .marque-carte {
    display: grid; grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto auto; column-gap: 18px; align-items: center;
  }
  .section-marques .marque-image { grid-row: 1 / 3; aspect-ratio: 1; }
  .section-marques .marque-carte .marque-nom { height: auto; margin: 0 0 8px; align-self: end; }
  .marque-nom img { height: 38px; max-width: 100%; }
  .marque-nom-1944 img { height: 48px; }
  .marque-nom-bs img { height: 58px; }
  .section-marques .marque-carte p { align-self: start; font-size: var(--t-2); line-height: 1.55; }
}
@media (max-width: 700px) { .marque-nom-bs img { height: 70px; } }
/* Sur les petits Android, les deux filets du repère feraient passer l'adresse sur deux lignes. */
@media (max-width: 380px) { .hero-oeil::before, .hero-oeil::after { display: none; } }

/* QUI VOUS RECOIT, LE 25/09/2026 : un seul portrait, celui de Chloé, cadré sur son
   visage et tenu à côté des trois cartes, qui n'ont plus d'image. */
.equipe-mise {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-xl); align-items: start;
}
.equipe-portrait { position: sticky; top: 110px; margin: 0; }
.equipe-portrait img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--rayon-image); display: block;
}
.equipe-portrait figcaption {
  margin-top: 12px; font-family: var(--font-titre); font-style: italic;
  font-size: var(--t-1); color: var(--vert-eau-fonce);
}
.equipe-mise .equipe-grille { grid-template-columns: 1fr; gap: 20px; max-width: none; margin: 0; }
.equipe-mise .praticienne-corps { padding: var(--e-l); }
@media (max-width: 900px) {
  .equipe-mise { grid-template-columns: 1fr; gap: var(--e-l); max-width: 560px; margin-inline: auto; }
  .equipe-portrait { position: static; }
  .equipe-portrait img { aspect-ratio: 5 / 6; object-position: 50% 32%; }
  .equipe-mise .praticienne-corps { padding: var(--e-m); }
}

/* LE HEROS AU TELEPHONE, REPRIS LE 25/09/2026. Les puces du diaporama
   etaient ancrees en bas a droite, a une hauteur pensee pour l'ordinateur :
   au telephone elles barraient le numero de l'institut. Elles montent en
   haut de la photographie, dans la zone que l'image occupe seule. Le trait
   d'union de « bien-être » ne coupe plus le mot en fin de ligne. */
.insecable { white-space: nowrap; }
@media (max-width: 900px) {
  .hero-puces { top: 10px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
}

/* Le portrait d'une praticienne dans sa carte : un medaillon au-dessus du nom,
   pour ne pas rivaliser avec le grand portrait de Chloe (Severine, 01/10/2026). */
.praticienne-avatar { order: -2; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }

/* Le grand portrait suit la lecture (Nils, 01/10/2026) : les vues se superposent
   dans le cadre et la carte lue fond la sienne par-dessus celle de Chloe. Au
   telephone la figure n'est pas accrochee : elle reste sur Chloe, et le medaillon
   de chaque carte reprend le portrait que le grand cadre montre a l'ordinateur. */
.portrait-vues { position: relative; }
.equipe-portrait .portrait-vue.vue-severine, .equipe-portrait .portrait-vue.vue-marine, .equipe-portrait .portrait-vue.vue-alexandra { position: absolute; inset: 0; height: 100%; object-position: 50% 18%; opacity: 0; transition: opacity .6s ease; }
.equipe-portrait figcaption span { display: none; }
.equipe-portrait figcaption .legende-chloe { display: inline; }
@media (min-width: 901px) {
  .equipe-portrait[data-vue="severine"] .vue-severine { opacity: 1; }
  .equipe-portrait[data-vue="severine"] .legende-chloe { display: none; }
  .equipe-portrait[data-vue="severine"] .legende-severine { display: inline; }
  .equipe-portrait[data-vue="marine"] .vue-marine { opacity: 1; }
  .equipe-portrait[data-vue="marine"] .legende-chloe { display: none; }
  .equipe-portrait[data-vue="marine"] .legende-marine { display: inline; }
  .equipe-portrait[data-vue="alexandra"] .vue-alexandra { opacity: 1; }
  .equipe-portrait[data-vue="alexandra"] .legende-chloe { display: none; }
  .equipe-portrait[data-vue="alexandra"] .legende-alexandra { display: inline; }
  .praticienne-avatar { display: none; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .equipe-portrait .portrait-vue.vue-severine, .equipe-portrait .portrait-vue.vue-marine, .equipe-portrait .portrait-vue.vue-alexandra { transition: none; }
}

/* Les textes de Chloe (01/10/2026) laissaient un mot seul en fin de paragraphe
   (« mois », « a la cire. », « votre choix. ») : une ligne presque vide, donc un
   trou dans la carte. `pretty` reequilibre les dernieres lignes, `balance` coupe
   les horaires en deux lignes de longueur voisine (Nils, 01/10). */
.praticienne p, .recit-etape p { text-wrap: pretty; }
.praticienne-jours, .praticienne-role { text-wrap: balance; }

/* A l'ordinateur, chaque carte tient la ligne de lecture plus longtemps : le
   grand portrait change moins vite et le passage de Chloe a Severine se lit
   (Nils, 01/10). Au telephone le portrait n'est pas accroche, l'ecart reste serre. */
@media (min-width: 901px) {
  .equipe-mise .equipe-grille { gap: clamp(56px, 12vh, 120px); }
}
.insecable { white-space: nowrap; }

/* Le seuil de l'equipe n'a qu'une phrase en regard d'un titre de quatre lignes :
   la colonne de droite restait vide au-dessus d'elle (Nils, 01/10/2026). Le
   titre prend la largeur sur deux lignes, la phrase passe dessous. */
#equipe .seuil-bande { grid-template-columns: 1fr; gap: 18px; align-items: start; }
#equipe .seuil-titre { max-width: 22ch; }

/* Le recit de la carte cadeau se resserre (Nils, 01/10/2026) : ses trois temps
   portent maintenant les textes plus longs de Chloe, et a 52svh chacun il
   laissait de grands aplats vides entre eux. 40svh garde une image par
   mouvement de molette. */
@media (min-width: 901px) {
  .recit-serre.recit-vivant .recit-etape { min-height: 40svh; }
}
/* Le bouton Offrir en haut a droite (Chloe, 01/10/2026) : seulement quand la
   barre a la place de porter cinq liens et deux boutons sans se serrer. */
.entete-actions .entete-cadeau { display: none; }
@media (min-width: 1180px) { .entete-actions .entete-cadeau { display: inline-flex; } }
.cadeau-validite { max-width: 62ch; margin: clamp(24px, 4vh, 40px) auto 0; text-align: center; font-size: var(--t-1, 1.05rem); text-wrap: pretty; }
.recit-etape p + p { margin-top: .7em; }