/* ==========================================================================
   Sora Sens — feuille de style du site.
   Écrite à la main, sans étape de compilation. N'utilise QUE des variables :
   aucune valeur de couleur, d'espacement ou de rayon en dur.
   Les valeurs des composants proviennent du design system (_ds_bundle.js) et
   des maquettes ; le README fait foi en cas de doute.

   1. Utilitaires et mise en page
   2. Accessibilité
   3. En-tête, navigation, fil d'Ariane
   4. Pied de page
   5. Composants
   6. Sections de page
   7. Points de bascule
   8. Mouvement réduit, contraste forcé, impression
   ========================================================================== */

/* 1. UTILITAIRES ET MISE EN PAGE ------------------------------------------ */

.enveloppe{
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y)}
.section--lin{background:var(--surface-sunken)}
.section--filet{border-top:1px solid var(--border-gold)}

/* Mesure de lecture : un paragraphe ne traverse jamais toute la largeur. */
.prose{max-width:var(--prose-max)}
.prose--etroit{max-width:var(--measure-narrow)}

.pile{display:grid;gap:var(--space-7)}
.pile--serre{gap:var(--space-5)}
.pile--large{gap:var(--space-9)}

/* 2. ACCESSIBILITÉ -------------------------------------------------------- */

/* Contenu réservé aux technologies d'assistance. Le clip plutôt que
   display:none : display:none le retire aussi des lecteurs d'écran. */
.visuellement-cache{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.lien-evitement{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  z-index:100;
  transform:translateY(-200%);
  background:var(--surface-page);
  color:var(--text-title);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:var(--space-5) var(--space-6);
  min-height:44px;display:inline-flex;align-items:center;
  font:var(--type-label);
  letter-spacing:var(--track-label);
  text-decoration:none;
  transition:transform var(--dur-quick) var(--ease-soft);
}
.lien-evitement:focus{transform:translateY(0)}

/* La cible du lien d'évitement passerait sous l'en-tête collant sans ceci. */
#contenu{outline:none;scroll-margin-top:120px}

/* 3. EN-TÊTE, NAVIGATION, FIL D'ARIANE ------------------------------------ */

.entete{
  position:sticky;top:0;z-index:50;
  background:rgb(247 242 235 / .82);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-gold);
}
.entete__interieur{
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--space-3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
}
.entete__logo{border:0;padding:0;display:block;flex:none}
.entete__logo img{height:78px;width:auto}

.entete__nav{display:flex;align-items:center;gap:var(--space-9)}
.entete__liste{
  display:flex;align-items:center;gap:var(--space-8);
  list-style:none;margin:0;padding:0;
}
.entete__liste a{
  display:block;
  padding-block:12px;                 /* cible tactile : 12 + 12 + interligne ≥ 44 px */
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-body);
  text-decoration:none;border:0;
  transition:var(--transition-color);
}
.entete__liste a:hover{color:var(--cacao-fonce)}

/* L'état actif est porté par la couleur ET par le soulignement ET par
   aria-current : jamais par la couleur seule. */
.entete__liste a[aria-current="page"]{
  color:var(--text-accent);
  box-shadow:inset 0 -1px 0 0 var(--terre-cuite);
}

.entete__bascule{
  display:none;                       /* n'apparaît que sous 900 px */
  align-items:center;gap:var(--space-3);
  min-height:44px;padding:var(--space-3) var(--space-5);
  background:none;border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  color:var(--text-body);cursor:pointer;
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.entete__bascule-trait{
  width:16px;height:1px;background:currentColor;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
}

.fil{border-bottom:1px solid var(--border-hairline);background:var(--surface-page)}
.fil ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  list-style:none;margin:0;padding-block:var(--space-4);
  font:var(--weight-light) var(--size-caption)/1.6 var(--font-text);
  color:var(--text-subtle);
}
.fil li+li::before{content:"·";margin-right:var(--space-3);color:var(--text-subtle)}
.fil a,.fil [aria-current]{
  display:inline-block;padding-block:12px;      /* cible tactile : 19 + 24 = 43… */
  line-height:1.7;                              /* …portée à 44 par l'interligne */
  color:var(--text-subtle);border:0;text-decoration:none;
}
.fil a:hover{color:var(--text-accent)}
.fil [aria-current]{color:var(--text-body)}

/* 4. PIED DE PAGE --------------------------------------------------------- */

.pied{background:var(--surface-dark);color:var(--text-on-dark)}
.pied__interieur{
  max-width:var(--content-max);margin-inline:auto;
  padding:var(--space-12) var(--gutter) var(--space-10);
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:var(--space-11);
}
.pied__marque img{height:132px;width:auto}
.pied__titre{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  font-family:var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--dore-clair);
  margin:0 0 var(--space-6);
}
.pied__colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.pied a{color:var(--text-on-dark);border-bottom-color:var(--border-on-dark)}
.pied a:hover{color:var(--dore-clair);border-bottom-color:var(--dore-clair)}
/* Cible tactile : 21 px de texte + 2 × 12 px = 45 px. À 6 px de rembourrage,
   les liens du pied tombaient à 33 px, et ceux de <address> à 19 px — sous le
   minimum de 24 px du critère 2.5.8, et loin des 44 px visés. */
.pied__colonne a,.pied__contact a{
  display:inline-block;padding-block:12px;
  font:var(--weight-light) var(--size-body-s)/1.5 var(--font-text);
  text-decoration:none;border:0;
}
.pied__colonne ul{gap:0}
.pied__contact{font-style:normal}
.pied__horaires,.pied__rdv{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:rgb(247 242 235 / .82);
  margin:var(--space-5) 0 0;
}

.pied__bas{border-top:1px solid var(--border-on-dark)}
.pied__interieur--bas{
  grid-template-columns:1fr auto;align-items:start;
  padding-block:var(--space-8);gap:var(--space-9);
}
/* Texte à valeur légale : 14 px et 86 % d'opacité, soit 9,16:1.
   À 11 px et 58 % il tombait à 3,92:1. Ne pas réduire. */
.pied__mention{
  font:italic var(--weight-light) var(--size-body-s)/1.8 var(--font-text);
  color:rgb(247 242 235 / .86);
  max-width:var(--prose-max);margin:0;
}
.pied__legales{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);
  font:var(--weight-light) var(--size-caption)/1.6 var(--font-text);
}
.pied__legales a{
  display:inline-block;color:rgb(247 242 235 / .86);
  border:0;text-decoration:none;
  padding-block:13px;line-height:1.5;      /* 18 + 26 = 44 px */
}
.pied__legales a:hover{color:var(--dore-clair)}

/* 5. COMPOSANTS ----------------------------------------------------------- */

/* --- Boutons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  min-height:44px;                     /* cible tactile, quelle que soit la taille */
  font-family:var(--font-text);font-weight:var(--weight-semibold);
  letter-spacing:var(--track-label);
  border:1px solid transparent;border-radius:var(--radius-pill);
  text-decoration:none;cursor:pointer;text-align:center;
  transition:var(--transition-color),transform var(--dur-quick) var(--ease-soft);
}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* Un bouton est souvent un <a> : la règle générique a:hover (tokens.css) lui
   passerait la bordure basse en cacao, dessinant un liseré sous la pastille.
   On la neutralise ICI, au plus près des boutons, plutôt qu'en excluant .btn
   dans tokens.css — cette exclusion-là relèverait la spécificité du sélecteur
   de base et casserait toutes les règles de lien à une seule classe.
   Spécificité (0,1,1), à égalité avec a:hover : c'est site.css, chargé après
   tokens.css, qui l'emporte. */
.btn:hover{border-bottom-color:transparent}
/* Les deux variantes qui ont une bordure visible la conservent au survol. */
.btn--secondaire:hover{border-bottom-color:var(--border-soft)}
.btn--ghost:hover{border-bottom-color:var(--terre-cuite-fonce)}

.btn--sm{font-size:12px;padding:9px 18px}
.btn--md,.btn:not([class*="btn--sm"]):not([class*="btn--lg"]){font-size:13px;padding:13px 26px}
.btn--lg{font-size:14px;padding:17px 34px}
.btn--block{display:flex;width:100%}

/* Fond terre cuite moyen plutôt que la terre cuite de marque : un libellé de
   12–14 px n'est pas du « grand texte », il lui faut 4,5:1. */
.btn--primaire{background:var(--surface-accent);color:var(--text-on-terracotta)}
.btn--primaire:hover{background:var(--terre-cuite-fonce);color:var(--text-on-terracotta)}

.btn--secondaire{
  background:transparent;color:var(--text-title);
  border:var(--border-width-strong) solid var(--border-soft);
}
/* Au survol, le voile seul. Le README prévoyait aussi de foncer la bordure en
   cacao : c'est ce qui donnait l'impression d'un liseré noir qui apparaît.
   Retiré à la demande de la cliente — le voile suffit à signaler le survol. */
.btn--secondaire:hover{background:var(--hover-veil)}

/* Bouton fantôme : plus de bordure du tout. Elle dessinait un contour permanent
   autour de « Réserver ce rituel », visuellement lourd sur une liste de six
   soins. Le libellé en terre cuite suffit à le désigner comme une action. */
.btn--ghost{background:transparent;color:var(--text-accent);border-color:var(--terre-cuite-fonce)}
.btn--ghost:hover{background:var(--hover-veil);color:var(--terre-cuite-fonce)}

.btn--sur-sombre{background:var(--coquille);color:var(--cacao-fonce)}
.btn--sur-sombre:hover{background:var(--lin)}

/* --- Surtitres et titres de section --- */
.surtitre{
  font:var(--type-eyebrow);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--text-subtle);
  margin:0 0 var(--space-5);
}
.titre-section{margin:0;text-wrap:balance}
.chapo{
  font:var(--type-lead);color:var(--text-muted);
  max-width:var(--measure-narrow);margin:var(--space-6) 0 0;
  text-wrap:pretty;
}

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

/* --- Ligne de soin --- */
.soin{
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:var(--space-6) var(--space-9);
  padding:var(--space-7) 0;
  border-bottom:1px solid var(--border-hairline);
}
.soin__droite{display:flex;align-items:baseline;gap:var(--space-9)}

/* Variante compacte : le bouton passe SOUS les tarifs au lieu d'occuper une
   troisième colonne. Employée sur l'accueil, où la carte tient sur deux
   colonnes et où une colonne d'action de plus écraserait la description. */
.soin--compact .soin__droite{
  flex-direction:column;align-items:flex-end;gap:var(--space-4);
}
.soin__nom{
  font:var(--weight-semibold) var(--size-body-s)/1.3 var(--font-text);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-title);
  margin:0;
}
/* L'italique bas de casse est le geste typographique signature de la marque. */
.soin__desc{
  font:italic var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  letter-spacing:.02em;color:var(--text-muted);
  max-width:var(--measure-narrow);margin:var(--space-2) 0 0;
}
.soin__tarifs{
  display:grid;gap:var(--space-2);justify-items:end;
  font:var(--type-price);color:var(--text-body);white-space:nowrap;
}
.soin__tarif{display:flex;gap:var(--space-4)}
.soin__tarif dt{color:var(--text-muted)}
.soin__tarif dd{margin:0;color:var(--text-title)}

.soin__texte{min-width:0}
.liste-soins{margin-top:var(--space-10);border-top:1px solid var(--border-gold)}
.soin__action{justify-self:end}

/* Titre de section à gauche, action à droite. */
.tete-section{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-9);flex-wrap:wrap;
}
.note-italique{
  font:italic var(--weight-light) var(--size-body-s)/1.8 var(--font-text);
  color:var(--text-muted);margin:var(--space-8) 0 0;max-width:var(--prose-max);
}

/* Grilles asymétriques de l'accueil. */
.rituel__grille,
.praticienne__grille,
.cadeaux__grille{display:grid;grid-template-columns:1fr;gap:var(--space-11);align-items:center}
.rituel__titre{font-size:var(--size-display-l);line-height:var(--lh-display-l);margin:var(--space-6) 0 0}

/* --- Étiquettes --- */
.etiquette{
  display:inline-block;
  padding:5px 12px;border-radius:var(--radius-pill);
  font:var(--weight-medium) 11px/1.4 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.etiquette--or{background:var(--warning-surface);color:var(--warning)}
.etiquette--contour{border:1px solid var(--border-soft);color:var(--text-body)}

/* --- Carte du rituel signature --- */
.carte-rituel{
  margin-top:var(--space-10);
  display:grid;grid-template-columns:1fr;
  background:var(--surface-card);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.carte-rituel__media img{width:100%;height:100%;min-height:280px;object-fit:cover}
.carte-rituel__texte{padding:var(--space-10) var(--space-8)}
.carte-rituel__titre{
  font-size:var(--size-display-m);line-height:1.15;letter-spacing:.03em;
  margin:var(--space-6) 0 0;
}

.tarifs-large{
  display:flex;gap:var(--space-9);
  margin:var(--space-8) 0 var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid var(--border-gold);
}
.tarifs-large dt{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-subtle);
}
.tarifs-large dd{
  font-family:var(--font-display);font-size:32px;line-height:1.2;
  color:var(--text-title);margin:6px 0 0;
}

.a-venir{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-5);
  margin-top:var(--space-10);
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:var(--text-muted);
}

/* --- Bandeau d'offre --- */
.bande-offre__interieur{
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:var(--space-5) var(--space-7);text-align:center;
  padding-block:var(--space-8);
}
/* 30 px : au-delà de 24 px, le seuil de contraste passe à 3:1, ce que le
   terre cuite de marque satisfait. Ne pas réduire cette taille. */
.bande-offre__titre{
  font-family:var(--font-display);font-weight:var(--weight-light);
  font-size:30px;line-height:1.2;margin:0;
}
.bande-offre__note{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  margin:0;color:rgb(251 244 238 / .90);
}

/* --- Questions fréquentes --- */
.faq{margin-top:var(--space-10);display:grid;gap:var(--space-8)}
.faq__item{
  padding-bottom:var(--space-8);
  border-bottom:1px solid var(--border-hairline);
  max-width:var(--prose-max);
}
.faq__item:last-child{border-bottom:0;padding-bottom:0}
.faq__question{
  font-size:var(--size-title);line-height:var(--lh-title);
  font-weight:var(--weight-medium);margin:0;
}
.faq__reponse{
  font:var(--weight-light) var(--size-body)/var(--lh-body) var(--font-text);
  color:var(--text-muted);margin:var(--space-4) 0 0;
}
.mention-legale--espacee{margin-top:var(--space-11)}

/* --- Bandeau d'appel final --- */
.bande-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-10);flex-wrap:wrap;
}

/* --- Blocs d'information --- */
.info{display:grid;gap:var(--space-4);align-content:start}
.info__titre{
  font:var(--weight-semibold) var(--size-caption)/1 var(--font-text);
  font-family:var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-title);margin:0;
}
.info p{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:var(--text-muted);margin:0;
}
.icone{opacity:.9}

/* --- Bandes et encarts --- */
.bande-accent{background:var(--surface-accent);color:var(--text-on-terracotta)}
.bande-accent h2,.bande-accent .titre-section{color:var(--text-on-terracotta)}
.bande-accent p{color:rgb(251 244 238 / .92)}

.encart{
  background:var(--surface-sunken);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  padding:var(--space-8);
}

/* --- Photographies --- */
picture{display:block}

/* <picture> s'interpose entre le conteneur et l'<img> : un height:100% sur
   l'image se résout alors contre un <picture> de hauteur automatique, et
   l'image déborde à sa taille intrinsèque au lieu d'être recadrée.
   Les conteneurs qui imposent une hauteur doivent donc aussi étirer le
   <picture>. */
.hero__media picture,
.media-texte picture,
.rond picture,
.carte-rituel__media picture{display:block;width:100%;height:100%}
.photo{border-radius:var(--radius-sm);overflow:hidden}
.photo img{width:100%;height:auto;object-fit:cover}
/* L'arche : un bloc par page au maximum. */
.arche{border-radius:var(--radius-arch);overflow:hidden}
.arche img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.rond{border-radius:var(--radius-circle);overflow:hidden;width:300px;height:300px;flex:none}
.rond img{width:100%;height:100%;object-fit:cover}

/* Voile de protection : rend le texte lisible sans assombrir la photographie. */
.media-texte{position:relative;overflow:hidden}
.media-texte img{width:100%;height:100%;object-fit:cover}
.media-texte::after{content:"";position:absolute;inset:0;background:var(--veil-bottom)}
.media-texte__contenu{position:absolute;inset-inline:0;bottom:0;padding:var(--space-9);z-index:1}

.motif{opacity:.28;pointer-events:none}

/* --- Barre d'action mobile --- */
.barre-action{
  display:none;
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  padding:var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  background:rgb(247 242 235 / .94);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-top:1px solid var(--border-gold);
}

/* 6. SECTIONS DE PAGE ----------------------------------------------------- */

/* Voiles de protection du texte sur photographie.
   Le --veil-bottom du design system s'annule à 78 % de la hauteur : il est
   calibré pour un hero de 78vh dont le texte est tout en bas. Sur un bandeau
   de 46vh, le texte se retrouve dans la zone transparente et devient
   illisible sur les pixels clairs de la photo.
   Opacités retenues, mesurées contre le pire cas (un pixel clair #E0D6C8
   derrière du texte coquille #F7F2EB) :
     0,66 → 4,78:1  · conforme AA, y compris pour le surtitre de 12 px
     0,55 → 3,76:1  · suffisant pour du grand texte seulement
   On ne descend donc pas sous 0,66 là où passe un surtitre. */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgb(59 46 38 / .78) 0%,
    rgb(59 46 38 / .66) 42%,
    rgb(59 46 38 / .22) 78%,
    rgb(59 46 38 / 0) 100%);
}
.hero__contenu{
  position:relative;z-index:1;
  max-width:var(--content-max);margin-inline:auto;width:100%;
  padding:var(--space-12) var(--gutter);
}
.hero__texte{max-width:620px}
/* Portée sur .hero__contenu, pas sur .hero : le bandeau des pages intérieures
   réutilise ce conteneur sans porter la classe .hero. Un sélecteur en .hero
   laisserait le titre à la couleur d'encre, invisible sur la photographie. */
.hero__contenu .surtitre{color:rgb(247 242 235 / .82)}
.hero__contenu h1{
  font-size:var(--size-display-xl);line-height:var(--lh-display-xl);
  color:var(--coquille);margin:0;
}
.banniere .hero__contenu h1{font-size:var(--size-display-l);line-height:var(--lh-display-l)}
.hero__chapo{
  font:var(--type-lead);color:rgb(247 242 235 / .90);
  max-width:var(--measure-narrow);margin:var(--space-7) 0 0;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-9)}

/* Bandeau de page intérieure. Plus court que le hero : le voile est comprimé
   pour que le texte reste dans la zone couverte. */
.banniere{position:relative;min-height:46vh;display:flex;align-items:flex-end;overflow:hidden}
.banniere .hero__media::after{
  background:linear-gradient(to top,
    rgb(59 46 38 / .80) 0%,
    rgb(59 46 38 / .70) 60%,
    rgb(59 46 38 / .40) 100%);
}
.banniere .hero__contenu{padding-block:var(--space-10)}

.grille-info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-9);
}

.actions{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-9)}

.texte-doux p{
  font:var(--weight-light) var(--size-body-s)/1.8 var(--font-text);
  color:var(--text-muted);margin:0;
}
.texte-doux{margin-top:var(--space-6)}

/* Titre de section en capitales larges — Cormorant supporte l'interlettrage
   ouvert sans se déliter. */
.titre-caps{
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:var(--space-6) 0 0;
}

/* --- La maison : portrait et refuge --- */
.portrait__grille,
.refuge__grille{
  display:grid;grid-template-columns:1fr;gap:var(--space-11);align-items:center;
}
.refuge__infos{margin-top:var(--space-9);gap:var(--space-6)}

/* --- Bande de valeurs --- */
.valeurs{
  display:grid;grid-template-columns:1fr;
  background:var(--surface-sunken);
  border-block:1px solid var(--border-gold);
}
.valeurs__liste{
  display:grid;grid-template-columns:repeat(5,1fr);
  max-width:var(--content-max);margin-inline:auto;width:100%;
  padding:var(--space-9) var(--gutter);
}
.valeurs__item{
  display:grid;justify-items:center;gap:var(--space-4);
  padding-inline:var(--space-5);
  border-left:1px solid var(--border-gold);
}
.valeurs__item:first-child{border-left:0}
.valeurs__mot{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-body);margin:0;text-align:center;
}
.valeurs__claim{
  background:var(--surface-accent);color:var(--text-on-terracotta);
  font-family:var(--font-display);font-weight:var(--weight-light);
  font-size:var(--size-title);line-height:1.3;letter-spacing:var(--track-display);
  text-transform:uppercase;text-align:center;
  margin:0;padding:var(--space-9) var(--gutter);
  display:grid;place-content:center;
}

/* --- Encart de mention légale --- */
.encart--mention{background:var(--info-surface);border-color:var(--border-soft)}
.encart--mention p{
  font:italic var(--weight-light) var(--size-body-s)/1.8 var(--font-text);
  color:var(--text-body);max-width:var(--prose-max);margin:var(--space-4) 0 0;
}

/* --- En-tête de page intérieure --- */
/* Double classe volontaire : à spécificité égale, la règle desktop de .section
   (déclarée plus bas dans la media query) l'emporterait sur le modificateur. */
.section.section--compact{padding-block:var(--space-11)}
.entete-page{border-bottom:1px solid var(--border-gold)}
.entete-page h1{margin:0}
.entete-page--lin{background:var(--surface-sunken)}

/* --- Contact --- */
.contact__grille{display:grid;grid-template-columns:1fr;gap:var(--space-11);align-items:start}
.contact__cote{gap:var(--space-7)}

.media-texte__titre{
  font-family:var(--font-display);font-weight:var(--weight-light);
  font-size:var(--size-display-s);line-height:1.2;
  color:var(--coquille);margin:var(--space-4) 0 0;
}
.media-texte__legende{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:rgb(247 242 235 / .88);margin:var(--space-4) 0 0;
}
.surtitre--clair{color:rgb(247 242 235 / .82);margin:0}

/* --- Panneau récapitulatif --- */
.recap{margin:var(--space-6) 0 0;display:grid;gap:var(--space-4)}
.recap__ligne{
  display:flex;justify-content:space-between;gap:var(--space-6);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-hairline);
  font:var(--weight-light) var(--size-body-s)/1.5 var(--font-text);
}
.recap__ligne:last-child{border-bottom:0;padding-bottom:0}
.recap dt{color:var(--text-muted)}
.recap dd{margin:0;color:var(--text-title);text-align:right}
/* Prix barré quand une remise s'applique. Le barré seul ne s'annonce pas :
   la ligne « Offre de lancement −20 % » juste en dessous porte l'information
   pour tout le monde, y compris au lecteur d'écran. */
.recap__barre{text-decoration:line-through;color:var(--text-subtle)}
.recap__note{
  font:italic var(--weight-light) var(--size-caption)/1.7 var(--font-text);
  color:var(--text-muted);margin:var(--space-6) 0 0;
}

/* --- Mention légale en bas de page intérieure --- */
.mention-legale{
  font:italic var(--weight-light) var(--size-body-s)/1.8 var(--font-text);
  color:var(--text-body);max-width:var(--prose-max);margin:0;
}

/* --- Avis --- */
.temoignages{display:grid;gap:var(--space-11)}
.temoignage{
  margin:0;padding-bottom:var(--space-11);
  border-bottom:1px solid var(--border-gold);
}
.temoignage:last-child{border-bottom:0;padding-bottom:0}
.temoignage__points{
  color:var(--dore-fonce);letter-spacing:.4em;font-size:14px;margin:0 0 var(--space-6);
}
.temoignage__citation{margin:0;max-width:var(--prose-max)}
.temoignage__citation p{
  font-family:var(--font-display);font-weight:var(--weight-light);
  font-size:var(--size-display-s);line-height:1.42;
  color:var(--text-title);margin:0;
}
.temoignage__signature{
  display:flex;align-items:center;gap:var(--space-4);
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);margin-top:var(--space-7);
}

.vide__interieur{display:grid;justify-items:center;gap:var(--space-7);text-align:center}
/* L'icône « respiration » est en portrait (viewBox 255×355). icone() pose une
   largeur ET une hauteur égales : sans cette correction, le dessin serait
   centré dans un carré et flanqué de vide de chaque côté. On laisse la hauteur
   commander, comme pour .cloture__motif. */
.vide__motif{opacity:.4;height:140px;width:auto}
.vide__phrase{
  font-size:var(--size-display-s);line-height:1.42;
  max-width:var(--prose-max);margin:0;
}
.vide .chapo{margin:0}

/* --- Champs de formulaire --- */
/* align-content:start — sans lui, un champ placé à côté d'un autre plus haut
   (parce que celui-ci porte une ligne d'aide) voit ses propres lignes s'étirer,
   et sa saisie devient plus haute que sa voisine. Les libellés et les saisies
   s'alignent maintenant, l'aide dépassant seule sous la colonne concernée. */
.champ{display:grid;gap:var(--space-3);align-content:start}
.champ label{
  font:var(--type-eyebrow);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text-subtle);
  display:flex;justify-content:space-between;gap:var(--space-5);align-items:baseline;
}
.champ__facultatif{
  font-style:italic;text-transform:none;letter-spacing:normal;
  font-weight:var(--weight-light);color:var(--text-subtle);
}
.champ__saisie{
  width:100%;min-height:44px;
  padding:13px 16px;
  font:var(--type-body);color:var(--text-body);
  background:var(--surface-sunken);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-inset);
  transition:var(--transition-color);
}
.champ__saisie:focus{border-color:var(--focus-ring)}
.champ--erreur .champ__saisie{border-color:var(--danger);border-width:2px}
.champ__aide{
  font:var(--weight-light) var(--size-caption)/1.6 var(--font-text);
  color:var(--text-muted);margin:0;
}
.champ__erreur{
  font:var(--weight-medium) var(--size-body-s)/1.6 var(--font-text);
  color:var(--danger);margin:0;
}
.champs-deux{display:grid;grid-template-columns:1fr;gap:var(--space-7)}
.contact__form{border-top:1px solid var(--border-gold);padding-top:var(--space-9)}
.contact__envoi{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-7);flex-wrap:wrap;
}
.contact__envoi .champ__aide{max-width:var(--measure-narrow)}
.encart--succes{
  background:var(--success-surface);
  border-color:var(--success);
  margin-top:var(--space-8);
}
.encart--succes:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.encart--succes p{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:var(--text-body);margin:var(--space-4) 0 0;
}
.resa__form{display:grid;gap:var(--space-9);margin-top:var(--space-9)}

/* Pot de miel : hors du flux, hors tabulation, hors arbre d'accessibilité.
   Pas display:none — beaucoup de robots le détectent. */
.pot-de-miel{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* Résumé d'erreurs en tête de formulaire — motif GOV.UK. */
.resume-erreurs{
  border:2px solid var(--danger);
  border-radius:var(--radius-md);
  padding:var(--space-7);
  margin-bottom:var(--space-9);
}
.resume-erreurs:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.resume-erreurs__titre{
  font-size:var(--size-title);line-height:var(--lh-title);
  font-weight:var(--weight-medium);color:var(--danger);margin:0 0 var(--space-4);
}
.resume-erreurs ul{margin:0;padding-left:1.2em;display:grid;gap:var(--space-2)}
.resume-erreurs a{color:var(--danger);font-weight:var(--weight-medium)}

/* Cases à cocher : la zone cliquable est le libellé entier. */
.case{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);
  align-items:start;
  padding:var(--space-5);border-radius:var(--radius-sm);
  background:var(--surface-sunken);
}
.case input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--surface-accent)}
.case label{
  font:var(--weight-light) var(--size-body-s)/1.6 var(--font-text);
  color:var(--text-body);cursor:pointer;
}
.case .champ__aide,.case .champ__erreur{grid-column:2}
.case--erreur{box-shadow:inset 0 0 0 2px var(--danger)}

/* --- Groupes de boutons radio --- */
/* Des radios natifs, jamais de faux widgets : les flèches, Début et Fin
   fonctionnent sans une ligne de JavaScript, et le lecteur d'écran annonce
   « 3 sur 7, sélectionné ». */
.groupe{border:0;padding:0;margin:0;min-width:0}
.groupe__legende{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);padding:0;margin-bottom:var(--space-5);
}
.radio-item__label,.jour__label,.creneau__label{
  display:block;cursor:pointer;
  transition:var(--transition-color);
}
/* L'anneau de focus doit suivre le libellé, puisque la saisie est masquée. */
.radio-item__saisie:focus-visible + .radio-item__label,
.jour__saisie:focus-visible + .jour__label,
.creneau__saisie:focus-visible + .creneau__label{
  outline:3px solid var(--focus-ring);outline-offset:2px;
}
.radio-item__saisie:disabled + .radio-item__label,
.jour__saisie:disabled + .jour__label,
.creneau__saisie:disabled + .creneau__label{
  opacity:.45;cursor:not-allowed;
}

/* Liste de soins sélectionnables */
.radio-liste--soins{border-top:1px solid var(--border-gold)}
.radio-liste--soins .radio-item{border-bottom:1px solid var(--border-hairline)}
.radio-liste--soins .radio-item__label{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-3) var(--space-8);
  padding:var(--space-6) var(--space-5);align-items:baseline;
}
.radio-soin__nom{
  font:var(--weight-semibold) var(--size-body-s)/1.3 var(--font-text);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-title);
}
.radio-soin__desc{
  grid-column:1;
  font:italic var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:var(--text-muted);
}
.radio-soin__tarifs{
  grid-row:1 / span 2;grid-column:2;
  font:var(--type-price);color:var(--text-body);white-space:nowrap;
}
/* Sélection : inversion franche, jamais une coche discrète. */
.radio-liste--soins .radio-item__saisie:checked + .radio-item__label{
  background:var(--surface-sunken);
  box-shadow:inset 3px 0 0 0 var(--surface-accent);
}

/* Durées et moyens de paiement, en cartes */
.radio-liste--durees,.radio-liste--paiement{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5);
}
.radio-liste--durees .radio-item__label,
.radio-liste--paiement .radio-item__label{
  min-height:44px;
  padding:var(--space-6);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:var(--surface-card);
}
.radio-liste--durees .radio-item__saisie:checked + .radio-item__label,
.radio-liste--paiement .radio-item__saisie:checked + .radio-item__label{
  background:var(--cacao);color:var(--text-on-dark);border-color:var(--cacao);
}
.radio-liste--durees .radio-item__saisie:checked + .radio-item__label *{color:inherit}
.radio-duree__t{
  display:block;
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-subtle);
}
.radio-duree__p{
  display:block;margin-top:var(--space-3);
  font-family:var(--font-display);font-size:28px;line-height:1.2;color:var(--text-title);
}
.radio-item__desc{
  font:var(--weight-light) var(--size-caption)/1.6 var(--font-text);
  color:var(--text-muted);margin:var(--space-3) 0 0;
}

/* --- Sélecteur de semaine et de jour --- */
.semaine{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);margin-bottom:var(--space-8);
}
.semaine__fleche{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;                 /* cible tactile : était 34 px */
  border-radius:var(--radius-circle);
  border:1px solid var(--border-soft);
  color:var(--text-body);text-decoration:none;font-size:20px;
}
.semaine__fleche:hover{background:var(--hover-veil)}
.semaine__fleche--inactive{opacity:.35}
.semaine__libelle{
  font:var(--weight-medium) var(--size-body-s)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-title);margin:0;
}

.jours{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-3)}
.jour__label{
  display:grid;gap:6px;justify-items:center;text-align:center;
  min-height:44px;padding:var(--space-5) var(--space-2);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  background:var(--surface-card);
}
.jour__abrev{
  font:var(--weight-medium) 10px/1 var(--font-text);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);
}
.jour__quantieme{font-family:var(--font-display);font-size:22px;line-height:1.1;color:var(--text-title)}
.jour__etat{font:var(--weight-light) 11px/1.3 var(--font-text);color:var(--text-muted)}
.jour__saisie:checked + .jour__label{background:var(--cacao);border-color:var(--cacao)}
.jour__saisie:checked + .jour__label *{color:var(--text-on-dark)}

/* --- Survol : le motif « carte interactive » du design system --------------
   Card.jsx combine quatre effets, et c'est l'ensemble qui fait la sensation de
   relief : bordure qui se densifie, ombre douce, remontée de 2 px, transition
   souple. Les reprendre séparément donnerait un survol plat.

   Le jour et le créneau sont bien des cartes interactives : ce sont les deux
   seuls éléments de l'étape 2 sur lesquels on clique.

   Deux exclusions. Un créneau désactivé (déjà pris) ne doit RIEN faire au
   survol — le relief promettrait une action impossible. Un élément déjà
   sélectionné garde son fond cacao : il remonte et prend l'ombre, mais sa
   bordure ne s'éclaircit pas, sinon la sélection paraîtrait se défaire.
   Le respect de prefers-reduced-motion est assuré globalement
   (tokens.css:238), qui neutralise les durées de transition. */
.jour__label,
.creneau__label{transition:var(--transition-soft)}

.jour__saisie:not(:disabled):not(:checked) + .jour__label:hover,
.creneau__saisie:not(:disabled):not(:checked) + .creneau__label:hover{
  border-color:var(--border-soft);
  box-shadow:var(--shadow-soft);
  transform:translateY(var(--hover-shift));
}

.jour__saisie:checked + .jour__label:hover,
.creneau__saisie:checked + .creneau__label:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(var(--hover-shift));
}

.creneaux-bloc[aria-busy="true"]{opacity:.5}
.creneaux{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.creneau__label{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:80px;min-height:44px;padding:0 var(--space-5);
  font:var(--weight-medium) var(--size-body-s)/1 var(--font-text);
  letter-spacing:.06em;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  color:var(--text-body);
}
.creneau__saisie:checked + .creneau__label{
  background:var(--cacao);border-color:var(--cacao);color:var(--text-on-dark);
}
.creneau__saisie:disabled + .creneau__label{text-decoration:line-through}

/* --- Onglets --- */
.onglets{
  display:flex;gap:var(--space-8);
  border-bottom:1px solid var(--border-hairline);
  margin-top:var(--space-8);
}
.onglet{
  display:inline-block;padding:var(--space-5) 0;margin-bottom:-1px;
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);text-decoration:none;border:0;
  border-bottom:1px solid transparent;cursor:pointer;
}
.onglet--actif{color:var(--text-title);border-bottom-color:var(--terre-cuite)}
.onglets__panneau:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}

/* Tuiles de montant */
.radio-liste--tuiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-5);
}
.radio-liste--tuiles .radio-item__label{
  display:grid;gap:var(--space-4);justify-items:center;align-content:center;
  aspect-ratio:8/5;min-height:44px;
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:var(--surface-card);
}
.radio-liste--tuiles .radio-item__saisie:checked + .radio-item__label{
  background:var(--surface-accent);border-color:var(--surface-accent);
}
.tuile__marque{opacity:0;transition:opacity var(--dur-quick) var(--ease-soft)}
.radio-liste--tuiles .radio-item__saisie:checked + .radio-item__label .tuile__marque{opacity:1}
.tuile__montant{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--text-title)}
.radio-liste--tuiles .radio-item__saisie:checked + .radio-item__label .tuile__montant{
  color:var(--text-on-terracotta);
}

.cadeaux__hero{display:grid;grid-template-columns:1fr;gap:var(--space-11);align-items:center}

/* --- Indicateur d'étapes --- */
.etapes{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);
  list-style:none;margin:var(--space-9) 0 0;padding:0;
}
.etapes__item{display:flex;align-items:center;gap:var(--space-4)}
.etapes__item + .etapes__item::before{
  content:"";width:34px;height:1px;background:var(--border-gold);
  margin-right:var(--space-4);
}
.etapes__pastille{
  display:grid;place-content:center;
  width:24px;height:24px;border-radius:var(--radius-circle);
  font:var(--weight-semibold) 12px/1 var(--font-text);
}
.etapes__item--courante .etapes__pastille{background:var(--surface-accent);color:var(--text-on-terracotta)}
.etapes__item--franchie .etapes__pastille{background:var(--cacao);color:var(--text-on-dark)}
.etapes__item--a-venir .etapes__pastille{
  border:1px solid var(--border-soft);color:var(--text-subtle);
}
.etapes__libelle{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-text);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);
}
.etapes__item--courante .etapes__libelle{color:var(--text-title)}

/* --- Mise en page du parcours --- */
.resa__grille{display:grid;grid-template-columns:1fr;gap:var(--space-11);align-items:start}
.resa__titre{font-size:var(--size-display-s);line-height:1.2;margin:0}
.resa__titre:focus{outline:none}
.resa__actions{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:flex-end}
.resa__actions--deux{justify-content:space-between}
.resa__voir-creneaux{margin-top:calc(var(--space-7) * -1)}
.recap__ligne--total dt,.recap__ligne--total dd{
  font-weight:var(--weight-semibold);color:var(--text-title);
}
.recap dd em{font-style:italic;color:var(--text-subtle);font-weight:var(--weight-light)}

/* --- Pages légales --- */
.legal{max-width:var(--prose-max)}
.legal h2{
  font-size:var(--size-display-s);line-height:var(--lh-display-s);
  margin:var(--space-11) 0 var(--space-5);
}
.legal h2:first-of-type{margin-top:0}
.legal h3{
  font-size:var(--size-title);line-height:var(--lh-title);
  font-weight:var(--weight-medium);
  margin:var(--space-8) 0 var(--space-4);
}
.legal p,.legal li{
  font:var(--weight-light) var(--size-body)/var(--lh-body) var(--font-text);
  color:var(--text-body);
}
.legal ul{margin:0 0 1em;padding-left:1.2em;display:grid;gap:var(--space-3)}
.legal__maj{
  font:italic var(--weight-light) var(--size-caption)/1.7 var(--font-text);
  color:var(--text-subtle);margin-top:var(--space-11);
}
.legal__table{
  width:100%;border-collapse:collapse;margin:var(--space-6) 0 var(--space-7);
  font:var(--weight-light) var(--size-body-s)/1.6 var(--font-text);
}
.legal__table th,.legal__table td{
  text-align:left;padding:var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom:1px solid var(--border-hairline);
}
.legal__table th{
  font-weight:var(--weight-semibold);color:var(--text-title);
  font-size:var(--size-caption);letter-spacing:var(--track-label);text-transform:uppercase;
}

/* Champ à compléter par la cliente. Le surlignage doit se voir : c'est
   précisément ce qu'il ne faut pas oublier avant la mise en ligne. */
.a-completer{
  background:var(--warning-surface);color:var(--warning);
  padding:1px 6px;border-radius:var(--radius-xs);
  font-weight:var(--weight-medium);font-style:normal;
}
.encart--brouillon{
  background:var(--warning-surface);
  border:1px solid var(--dore-mat);
  margin-bottom:var(--space-11);
}
.encart--brouillon p{
  font:var(--weight-light) var(--size-body-s)/1.7 var(--font-text);
  color:var(--text-body);margin:var(--space-4) 0 0;
}
.encart--brouillon code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:var(--surface-page);padding:1px 5px;border-radius:var(--radius-xs);
}

/* --- Clôture de page --- */
.cloture__interieur{
  display:grid;justify-items:center;gap:var(--space-7);text-align:center;
}
.cloture__motif{height:34px;width:auto;opacity:.45}
.cloture__phrase{
  font-size:var(--size-display-s);line-height:1.42;
  max-width:var(--prose-max);margin:0;
}

/* 7. POINTS DE BASCULE ---------------------------------------------------- */

@media (min-width:900px){
  .enveloppe,.entete__interieur,.pied__interieur{padding-inline:var(--gutter-wide)}
  .section{padding-block:var(--section-y-lg)}
  .hero__contenu{padding-inline:var(--gutter-wide)}
  .valeurs__liste{padding-inline:var(--gutter-wide)}

  /* Grilles asymétriques : le texte sur 5 colonnes, la photo sur 6, une
     colonne vide entre. C'est le rythme du design system. */
  .portrait__grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-12)}
  .refuge__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-12)}
  .valeurs{grid-template-columns:76fr 24fr}
  .valeurs__claim{text-align:left;padding-inline:var(--space-9)}
  .contact__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .carte-rituel{grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center}
  .carte-rituel__texte{padding:var(--space-10)}
  .faq{grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-11)}
  .faq__item:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}

  .resa__grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .resa__recap{position:sticky;top:132px;display:grid;gap:var(--space-7)}
  .champs-deux{grid-template-columns:1fr 1fr}
  .rituel__grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-12)}
  .praticienne__grille{grid-template-columns:auto minmax(0,1fr);gap:var(--space-12)}
  .cadeaux__grille,.cadeaux__hero{grid-template-columns:1fr 1fr;gap:var(--space-12)}

  /* Carte des soins de l'accueil : deux colonnes, gouttière de 96 px.
     Chaque ligne garde son bouton dans sa propre colonne. */
  .liste-soins--deux{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:var(--space-12);
  }
  /* Colonne collante : 132 px dégage l'en-tête collant. */
  .contact__cote{position:sticky;top:132px}
}

@media (max-width:899px){
  .entete__logo img{height:56px}
  .entete__bascule{display:inline-flex}

  /* Menu replié. Sans JavaScript, la classe n'est jamais posée et la
     navigation reste simplement dépliée sous le logo — elle n'est jamais
     inaccessible. */
  .js .entete__nav{
    display:none;
    position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:var(--space-6);
    padding:var(--space-8) var(--gutter) var(--space-10);
    background:var(--surface-page);
    border-bottom:1px solid var(--border-gold);
  }
  .js .entete__nav[data-ouvert]{display:flex}
  .entete__liste{flex-direction:column;align-items:stretch;gap:0}
  .entete__liste a{padding-block:14px;border-bottom:1px solid var(--border-hairline)}
  .entete__liste a[aria-current="page"]{box-shadow:none}
  .entete__liste a[aria-current="page"]::before{content:"— ";color:var(--terre-cuite)}

  /* Le bloc de texte occupe une part bien plus grande du hero en mobile : il
     remonte au-delà de la zone couverte par le voile calibré pour le desktop.
     Mesuré à 375 px de large, le surtitre se retrouve à 62 % de la hauteur,
     où le voile desktop ne vaut plus que 0,42 — soit 2,8:1 sur un pixel clair.
     On relève donc le plancher : 0,72 donne 5,45:1 dans le pire cas. */
  .hero .hero__media::after{
    background:linear-gradient(to top,
      rgb(59 46 38 / .82) 0%,
      rgb(59 46 38 / .72) 70%,
      rgb(59 46 38 / .45) 100%);
  }
  .hero{min-height:70vh}
  .hero__contenu h1{font-size:var(--size-display-l)}

  .soin{grid-template-columns:1fr;gap:var(--space-5)}
  .soin__tarifs{justify-items:start}

  .pied__interieur{grid-template-columns:1fr;gap:var(--space-9)}
  .pied__interieur--bas{grid-template-columns:1fr}
  .pied__marque img{height:96px}

  .rond{width:220px;height:220px}

  /* Cinq colonnes de valeurs deviennent illisibles sous 900 px : on passe à
     deux, puis le claim en pleine largeur. */
  /* Sept colonnes de jours ne tiennent pas sous 900 px : on passe à quatre,
     ce qui garde une cible tactile confortable. */
  .jours{grid-template-columns:repeat(4,1fr)}
  .radio-liste--soins .radio-item__label{grid-template-columns:1fr}
  .radio-soin__tarifs{grid-row:auto;grid-column:1}
  .etapes{gap:var(--space-4)}
  .etapes__item + .etapes__item::before{width:16px;margin-right:var(--space-3)}
  .etapes__libelle{font-size:10px}

  .valeurs__liste{grid-template-columns:repeat(2,1fr);gap:var(--space-8) 0}
  .valeurs__item:nth-child(odd){border-left:0}
  .valeurs__item:last-child{grid-column:1 / -1;border-left:0}

  .js .barre-action{display:block}
  .js .barre-action[hidden]{display:none}
}

@media (max-width:479px){
  .hero__contenu h1{font-size:var(--size-display-m)}
  .btn--lg{padding:15px 24px}
}

/* 8. MOUVEMENT, CONTRASTE FORCÉ, IMPRESSION ------------------------------- */

/* Révélation au défilement. Le contenu est VISIBLE par défaut : la classe
   n'est posée que par JavaScript, sur les éléments qu'il va effectivement
   animer. Une révélation qui conditionne l'affichage laisse une page blanche
   dès que le script ne s'exécute pas. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transition:opacity var(--dur-reveal) var(--ease-soft),
             transform var(--dur-reveal) var(--ease-soft);
}
.js [data-reveal].est-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

@media (forced-colors:active){
  .btn{border:1px solid ButtonBorder;forced-color-adjust:none}
  .entete{border-bottom:1px solid CanvasText}
  .media-texte::after,.hero__media::after{display:none}
}

@media print{
  .entete,.pied,.barre-action,.lien-evitement,.fil{display:none}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}