/* Maison So Aum · direction « La cabine », appliquée à la plateforme de marque.
   Couleurs et polices de la charte (sources-soaum/BRAND.md) :
   Lin #E4DFD7 et Marron chaud #442727 dominent, Blanc en neutre,
   Vert sauge #98A869 en petites touches (jamais en texte sur fond clair : 1,95:1).
   Marron doux #6B4848 est une nuance du Marron chaud pour le texte secondaire (6:1 sur Lin). */

@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-100-normal.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --lin: #E4DFD7;
  --marron: #442727;
  --blanc: #FFFFFF;
  --sauge: #98A869;
  --marron-doux: #6B4848;
  --lin-doux: rgba(228, 223, 215, .78);

  --titre: "Cormorant Garamond", Garamond, Georgia, serif;
  --texte: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1.5rem, 6vw, 5rem);
  --section: clamp(4.5rem, 12vw, 10rem);
  --filet: rgba(68, 39, 39, .2);
  --filet-clair: rgba(228, 223, 215, .25);
  --entete: 4.5rem;
  --barre: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 1rem); scroll-padding-bottom: calc(var(--barre) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--lin); color: var(--marron);
  font: 300 1.125rem/1.65 var(--texte);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--barre);
}
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 300; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
strong { font-weight: 500; }
blockquote { margin: 0; }
address { font-style: normal; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--marron); outline-offset: 3px; }
.sombre :focus-visible, .ouverture__texte :focus-visible, .sens :focus-visible, .retraites :focus-visible, .seance :focus-visible,
.avis :focus-visible, .pied :focus-visible, .entete__nav :focus-visible { outline-color: var(--lin); }

.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--marron); color: var(--lin); padding: .75rem 1rem; }
.evitement:focus { top: 1rem; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .95rem 1.75rem;
  font: 500 .75rem/1.2 var(--texte); letter-spacing: 0; text-transform: uppercase;
  text-decoration: none; border-radius: 0; border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
.bouton:active, .barre-rdv a:active, .entete__rdv:active { transform: scale(.98); }
.bouton--sauge { background: var(--sauge); color: var(--marron); }
.bouton--sauge:hover { background: var(--lin); }
.bouton--marron { background: var(--marron); color: var(--lin); }
.bouton--marron:hover { background: var(--sauge); color: var(--marron); }
.bouton--contour-clair { background: transparent; color: var(--lin); border-color: rgba(228, 223, 215, .7); }
.bouton--contour-clair:hover { background: var(--lin); color: var(--marron); border-color: var(--lin); }

/* Titres de section en capitales espacées, centrés */
.titre-capitales { font: 400 clamp(1.5rem, 2.6vw, 2.25rem)/1.3 var(--titre); text-transform: uppercase; letter-spacing: 0; text-align: center; color: var(--marron-doux); margin: 0 auto 3rem; max-width: none; }

.lien-souligne {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: none; border-bottom: 1px solid var(--sauge); font-size: 1rem;
  transition: border-color .2s ease;
}
.lien-souligne:hover { border-color: currentColor; }

.chapeau { font: 400 1.3125rem/1.55 var(--titre); max-width: 32rem; }

/* ---------- en-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 1.75rem;
  height: var(--entete); padding: 0 var(--marge);
  background: transparent; color: var(--lin);
  border-bottom: 1px solid transparent;
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
.entete--pleine { background: rgba(228, 223, 215, .97); color: var(--marron); border-color: var(--filet); }
.entete__logo .logo-fonce { display: none; }
.entete--pleine .logo-clair { display: none; }
.entete--pleine .logo-fonce { display: block; }
.entete__logo { margin-right: auto; display: flex; align-items: center; min-height: 2.75rem; }
.entete__logo img { width: 8.5rem; }
.entete__nav ul { display: flex; gap: 1.75rem; }
.entete__nav a { text-decoration: none; font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0; min-height: 2.75rem; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.entete__nav a:hover { border-color: var(--sauge); }
.entete__rdv {
  display: none; align-items: center; min-height: 2.75rem; padding: .6rem 1.2rem;
  background: transparent; color: inherit; text-decoration: none; border: 1px solid currentColor;
  font: 500 .75rem/1 var(--texte); text-transform: uppercase; letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
.entete__rdv:hover { background: var(--lin); color: var(--marron); border-color: var(--lin); }
.entete--pleine .entete__rdv { background: transparent; color: var(--marron); border-color: var(--marron); }
.entete--pleine .entete__rdv:hover { background: var(--marron); color: var(--lin); }
.entete__menu {
  min-height: 2.75rem; min-width: 2.75rem; padding: .5rem .25rem;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 500 .9375rem/1 var(--texte);
}
@media (max-width: 899px) {
  .entete__nav {
    position: fixed; inset: 0; z-index: -1; background: var(--marron); color: var(--lin);
    display: flex; align-items: center; padding: 6rem var(--marge) 8rem;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .entete__nav ul { flex-direction: column; gap: .25rem; }
  .entete__nav a { font: 300 2.5rem/1.15 var(--titre); padding: .25rem 0; }
  .menu-ouvert .entete__nav { opacity: 1; visibility: visible; }
  .menu-ouvert .entete { background: transparent; color: var(--lin); }
  .menu-ouvert .entete .logo-clair { display: block; }
  .menu-ouvert .entete .logo-fonce { display: none; }
  .menu-ouvert { overflow: hidden; }
}
@media (min-width: 900px) {
  .entete__menu { display: none; }
  .entete__rdv { display: inline-flex; }
  .entete__logo img { width: 9.5rem; }
}

/* ---------- haut de page : la photo en plein écran, le texte posé dessus ---------- */
.ouverture { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--marron); color: var(--lin); }
.ouverture__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ouverture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(68, 39, 39, .9) 0%, rgba(68, 39, 39, .45) 42%, rgba(68, 39, 39, 0) 70%),
    linear-gradient(180deg, rgba(68, 39, 39, .5) 0%, rgba(68, 39, 39, 0) 22%);
}
.ouverture__texte { position: relative; z-index: 1; padding: 0 var(--marge) calc(2.5rem + var(--barre)); width: 100%; }
.ouverture h1 { font-size: clamp(3.6rem, 15vw, 11rem); line-height: .86; letter-spacing: 0; margin-bottom: 1.5rem; }
.ouverture h1 .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.ouverture h1 .ligne > span { display: inline-block; }
.ouverture__sous { color: var(--lin-doux); max-width: 26rem; margin-bottom: 0; }
.ouverture__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.75rem; }
.ouverture__actions .lien-souligne { color: var(--lin); }
.ouverture__note { position: absolute; z-index: 1; right: var(--marge); top: calc(var(--entete) + 1.25rem); margin: 0; font-size: .8125rem; letter-spacing: 0; color: var(--lin-doux); }
@media (max-width: 899px) { .ouverture__note { display: none; } .ouverture__actions .bouton { display: none; } }
@media (min-width: 900px) {
  .ouverture { align-items: flex-end; }
  .ouverture::after {
    background:
      linear-gradient(90deg, rgba(68, 39, 39, .78) 0%, rgba(68, 39, 39, .35) 45%, rgba(68, 39, 39, 0) 70%),
      linear-gradient(0deg, rgba(68, 39, 39, .55) 0%, rgba(68, 39, 39, 0) 40%),
      linear-gradient(180deg, rgba(68, 39, 39, .45) 0%, rgba(68, 39, 39, 0) 20%);
  }
  .ouverture__photo img { object-position: 60% 35%; }
  .ouverture__texte { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; padding-bottom: clamp(3rem, 8vh, 5.5rem); }
  .ouverture h1 { grid-column: 1 / -1; max-width: 10ch; }
  .ouverture__actions { margin-top: 0; justify-content: flex-end; }
}

/* La signature centrée, en capitales espacées */
.ouverture { align-items: center; }
.ouverture::after { background: rgba(68, 39, 39, .42); }
.ouverture__texte { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: var(--entete); }
.ouverture h1.ouverture__signature { font: 400 clamp(1.45rem, 3vw, 2.6rem)/1.45 var(--titre); text-transform: uppercase; letter-spacing: 0; max-width: none; margin-bottom: 1.5rem; }
.ouverture__sous { margin-left: auto; margin-right: auto; }
.ouverture__actions { justify-content: center; }
@media (min-width: 900px) {
  .ouverture { align-items: center; }
  .ouverture::after { background: rgba(68, 39, 39, .42); }
  .ouverture__texte { display: flex; padding-bottom: 0; }
  .ouverture__actions { margin-top: 1.75rem; justify-content: center; }
}
.ouverture__signature .ligne { padding-bottom: .1em; }

/* ---------- respirations plein écran ---------- */
.pause { position: relative; height: 92svh; min-height: 32rem; overflow: hidden; display: flex; align-items: flex-end; color: var(--lin); background: var(--marron); }
.pause__photo { position: absolute; inset: 0; }
.pause__photo img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.pause::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(68, 39, 39, .72) 0%, rgba(68, 39, 39, 0) 55%); pointer-events: none; }
.pause__phrase { position: relative; z-index: 1; margin: 0; padding: 0 var(--marge) clamp(3rem, 9vh, 6rem); font: 300 clamp(2.2rem, 5.6vw, 5rem)/1.04 var(--titre); letter-spacing: 0; max-width: 18ch; }
.pause--droite { justify-content: flex-end; }
.pause--droite .pause__phrase { text-align: right; }

/* ---------- manifeste : texte courant, sans grande phrase isolée ---------- */
.manifeste { padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.manifeste__texte p { font: 400 1.4375rem/1.6 var(--titre); max-width: 34rem; margin: 0 0 1.5rem; }
.manifeste__texte p:first-child { font: 400 italic clamp(1.6rem, 2.4vw, 2.1rem)/1.3 var(--titre); }
.manifeste__photo { width: 78%; justify-self: end; }
.manifeste__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 900px) {
  .manifeste { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .manifeste__texte { grid-column: 2 / 8; }
  .manifeste__photo { grid-column: 9 / 13; width: auto; margin-right: calc(var(--marge) * -1); }
  .manifeste__photo img { aspect-ratio: 2 / 3; }
}

/* ---------- les univers de la Maison ---------- */
.univers { padding: var(--section) var(--marge); }
.univers h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; margin-bottom: 2.5rem; }
.univers__liste { display: grid; gap: 3rem; }
.univers__carte { display: block; text-decoration: none; color: inherit; }
.univers__photo { display: block; overflow: hidden; margin-bottom: 1.25rem; }
.univers__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--douce); }
.univers__carte:hover .univers__photo img { transform: scale(1.04); }
.univers__nom { display: block; font: 300 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--titre); margin-bottom: .5rem; }
.univers__texte { display: block; color: var(--marron-doux); max-width: 26rem; margin-bottom: 1rem; }
.univers__lien { display: inline-flex; align-items: center; font-weight: 500; font-size: .9375rem; border-bottom: 1px solid var(--sauge); line-height: 1.2; min-height: 0; padding: .25rem 0; }
.univers__carte:hover .univers__lien { border-color: var(--marron); }
@media (min-width: 900px) {
  .univers__liste { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
  .univers__liste li:nth-child(2) { margin-top: 4rem; }
}

/* ---------- cartes de soins (listes à filets) ---------- */
.soins { padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.soins--visage { background: var(--blanc); }
.soins h2 { font-size: clamp(2.6rem, 7vw, 6.25rem); line-height: .92; letter-spacing: 0; margin-bottom: 1.5rem; max-width: 8ch; }
.soins__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; margin-top: 2.5rem; }
.soins__video { position: relative; margin-top: 2.5rem; max-width: 24rem; }
.soins__video video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--marron); }
.soins__video figcaption { font-size: .9375rem; color: var(--marron-doux); margin-top: .75rem; }
.carte { border-top: 1px solid var(--filet); margin-bottom: 2.5rem; }
.carte li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: baseline;
  padding: 1.4rem 0; border-bottom: 1px solid var(--filet);
}
.carte h3 { font: 400 clamp(1.5rem, 2.4vw, 1.875rem)/1.15 var(--titre); }
.carte__prix { font-size: .9375rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte p { grid-column: 1 / -1; font-size: 1rem; line-height: 1.6; margin: .5rem 0 0; color: var(--marron-doux); max-width: 34rem; }
.citation { margin: 0 0 2.5rem; padding-left: 1.25rem; border-left: 2px solid var(--sauge); }
.citation p { font: 300 italic 1.5rem/1.4 var(--titre); margin-bottom: .5rem; }
.citation footer { font-size: .875rem; color: var(--marron-doux); }
@media (min-width: 900px) {
  .soins { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
  .soins__tete { grid-column: 1 / 6; position: sticky; top: calc(var(--entete) + 2rem); }
  .soins__carte { grid-column: 7 / 13; }
  .soins__photo img { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--entete) - 22rem); min-height: 22rem; }
  .soins--corps .soins__tete { grid-column: 8 / 13; order: 2; }
  .soins--corps .soins__carte { grid-column: 1 / 7; order: 1; }
}

/* ---------- section signature : la séance ---------- */
.seance { background: var(--marron); color: var(--lin); padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.seance__video { position: relative; max-width: 22rem; }
.seance__video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--marron); }
.pause-video {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 1;
  min-height: 2.75rem; padding: .5rem .9rem;
  background: rgba(68, 39, 39, .82); color: var(--lin); border: 1px solid var(--filet-clair); border-radius: 0;
  font: 500 .8125rem/1 var(--texte); cursor: pointer;
}
.pause-video:hover { background: var(--marron); }
.soins__video .pause-video { bottom: auto; top: .75rem; }
.seance h2 { font-size: clamp(2.25rem, 5.5vw, 4.75rem); line-height: .98; letter-spacing: 0; margin-bottom: 1.75rem; max-width: 13ch; }
.seance .chapeau { color: var(--lin-doux); margin-bottom: 2rem; }
@media (min-width: 900px) {
  .seance { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .seance__video { grid-column: 2 / 6; max-width: none; }
  .seance__video video { max-height: calc(100vh - 8rem); }
  .seance__texte { grid-column: 7 / 12; }
}

/* ---------- ateliers ---------- */
.gestes { padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.gestes h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; letter-spacing: 0; margin-bottom: 1.25rem; max-width: 14ch; }
.gestes .chapeau { margin-bottom: 2rem; }
.gestes__photo { position: relative; }
.gestes__photo::before { content: ""; position: absolute; inset: 2rem -1rem -1rem 2rem; background: var(--sauge); }
.gestes__photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
@media (min-width: 900px) {
  .gestes { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .gestes__photo { grid-column: 1 / 7; margin-left: calc(var(--marge) * -1); }
  .gestes__photo::before { inset: 3rem -2rem -2rem 3rem; }
  .gestes__texte { grid-column: 8 / 13; }
}

/* ---------- avis : un retour à la fois, flèches rondes ---------- */
.avis { background: var(--marron); color: var(--lin); padding: var(--section) var(--marge); text-align: center; }
.avis .titre-capitales { color: var(--lin-doux); }
.avis__defile { position: relative; max-width: 54rem; margin: 0 auto; }
.avis__liste { display: grid; gap: 3rem; }
.avis__liste p { font: 300 clamp(1.4rem, 2.4vw, 2.1rem)/1.4 var(--titre); margin: 0 0 1.25rem; }
.avis__liste footer { font-size: .8125rem; letter-spacing: 0; text-transform: uppercase; color: var(--lin-doux); }
.avis__fleche {
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(228, 223, 215, .5); background: transparent; color: var(--lin);
  cursor: pointer; position: relative; transition: background-color .2s ease;
}
.avis__fleche::before { content: ""; position: absolute; top: 50%; left: 50%; width: .6rem; height: .6rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.avis__fleche--avant::before { transform: translate(-30%, -50%) rotate(-135deg); }
.avis__fleche--apres::before { transform: translate(-70%, -50%) rotate(45deg); }
.avis__fleche:hover { background: rgba(228, 223, 215, .14); }
.avis__note { margin: 2.5rem 0 0; font-size: .9375rem; }
.avis__note a { color: var(--sauge); }
/* Avec JavaScript : un seul avis visible, les flèches pour passer au suivant. */
.js-avis .avis__liste > li { display: none; }
.js-avis .avis__liste > li.actif { display: block; animation: avis-entree .7s var(--douce, ease); }
.js-avis .avis__defile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.js-avis .avis__liste { grid-column: 2; grid-row: 1; min-height: 12rem; align-content: center; }
.js-avis .avis__fleche--avant { grid-column: 1; grid-row: 1; }
.js-avis .avis__fleche--apres { grid-column: 3; grid-row: 1; }
@keyframes avis-entree { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .js-avis .avis__defile { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .js-avis .avis__liste { grid-column: 1 / -1; min-height: 16rem; }
  .js-avis .avis__fleche--avant { grid-row: 2; justify-self: end; }
  .js-avis .avis__fleche--apres { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* ---------- équipe ---------- */
.equipe { padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.equipe h1, .equipe h2 { font-size: clamp(2.25rem, 5.5vw, 4.75rem); line-height: .98; letter-spacing: 0; margin-bottom: 1.5rem; }
.equipe__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.equipe__photo figcaption { font: 300 italic 1.25rem var(--titre); margin-top: .6rem; }
.equipe__liste { margin-top: 2.5rem; border-top: 1px solid var(--filet); }
.equipe__liste > div { padding: 1.5rem 0; border-bottom: 1px solid var(--filet); }
.equipe__liste dt { font: 400 1.875rem/1.1 var(--titre); margin-bottom: .5rem; }
.equipe__liste dt span { font: 300 .9375rem var(--texte); color: var(--marron-doux); }
.equipe__liste dd { font-size: 1rem; line-height: 1.65; color: var(--marron-doux); max-width: 34rem; }
@media (min-width: 900px) {
  .equipe { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
  .equipe__photo { grid-column: 1 / 7; margin-left: calc(var(--marge) * -1); position: sticky; top: var(--entete); }
  .equipe__photo img { height: calc(100vh - var(--entete)); aspect-ratio: auto; }
  .equipe__texte { grid-column: 8 / 13; padding-top: 4rem; }
}

/* ---------- yoga et retraites ---------- */
.retraites { background: var(--marron); color: var(--lin); }
.retraites__ouverture { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.retraites__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.retraites__ouverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(68, 39, 39, .92) 0%, rgba(68, 39, 39, .3) 45%, rgba(68, 39, 39, 0) 70%); pointer-events: none; }
.retraites__titre { position: relative; z-index: 1; padding: 0 var(--marge) clamp(3rem, 9vh, 6rem); }
.retraites__titre h1, .retraites__titre h2 { font-size: clamp(3rem, 10vw, 8.5rem); line-height: .9; letter-spacing: 0; margin-bottom: 1rem; }
.retraites__titre p { font: 300 italic clamp(1.4rem, 2.6vw, 2.25rem)/1.25 var(--titre); color: var(--lin-doux); margin: 0; max-width: 24ch; }
.retraites__texte { display: grid; gap: 3rem; padding: var(--section) var(--marge) 4rem; }
.retraites__texte h2, .retraites__texte h3 { font: 400 clamp(1.75rem, 3vw, 2.4rem)/1.1 var(--titre); margin-bottom: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--filet-clair); }
.retraites__texte p { color: var(--lin-doux); max-width: 30rem; }
.retraites__texte a:not(.bouton) { color: var(--lin); text-decoration-color: var(--sauge); }
.retraites__texte .lien-souligne { color: var(--lin); }
@media (min-width: 900px) { .retraites__texte { grid-template-columns: 1fr 1fr; column-gap: 5rem; } }
.retraites__galerie { padding: 0 var(--marge) var(--section); }

/* ---------- mosaïque : les photos entières, jamais recadrées ----------
   Les photos en hauteur ont toutes le même format (2:3) : une grille régulière
   les montre en entier. Une photo en largeur occupe toute une ligne. */
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
.mosaique img { width: 100%; height: auto; }
.mosaique .large { grid-column: 1 / -1; }
@media (min-width: 900px) { .mosaique { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* ---------- offrir : fond clair, le sauge en simple touche ---------- */
.offrir { background: var(--blanc); color: var(--marron); padding: clamp(3.5rem, 8vw, 6rem) var(--marge); display: grid; gap: 1.25rem; justify-items: start; border-top: 1px solid var(--filet); }
.offrir__icone { width: 4.5rem; }
.offrir h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: 0; white-space: nowrap; }
.offrir h2::after { content: ""; display: block; width: 3rem; height: 1px; background: var(--sauge); margin-top: 1rem; }
.offrir p { max-width: 28rem; margin: 0; color: var(--marron-doux); }
@media (min-width: 900px) {
  .offrir { grid-template-columns: auto 1fr 1.2fr auto; align-items: center; column-gap: 3rem; }
}

/* ---------- venir ---------- */
.venir { padding: var(--section) var(--marge); display: grid; gap: 3rem; }
.venir h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; margin-bottom: 1.5rem; }
.venir address { font: 300 1.75rem/1.3 var(--titre); margin-bottom: .5rem; }
.venir__liens a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration-color: var(--sauge); }
.venir__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.horaires { border-collapse: collapse; width: 100%; max-width: 26rem; margin: 1.5rem 0 1.75rem; font-variant-numeric: tabular-nums; }
.horaires caption { text-align: left; font: 500 .875rem/1 var(--texte); padding-bottom: .9rem; }
.horaires th, .horaires td { padding: .6rem 0; border-bottom: 1px solid var(--filet); font-size: 1rem; font-weight: 300; }
.horaires th { text-align: left; }
.horaires td { text-align: right; }
.venir__contact { margin-bottom: 2rem; }
.venir__contact a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.0625rem; text-decoration-color: var(--sauge); }
@media (min-width: 900px) {
  .venir { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
  .venir__photo { grid-column: 1 / 7; margin-left: calc(var(--marge) * -1); }
  .venir__texte { grid-column: 8 / 13; }
}

/* ---------- questions ---------- */
.questions { background: var(--blanc); padding: var(--section) var(--marge); }
.questions h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; margin-bottom: 2rem; }
.questions__liste { border-top: 1px solid var(--filet); max-width: 50rem; }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary {
  cursor: pointer; list-style: none; min-height: 3.5rem; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font: 400 1.375rem/1.3 var(--titre);
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.5rem; width: .6rem; height: .6rem;
  border-right: 1px solid var(--marron); border-bottom: 1px solid var(--marron); transform: rotate(45deg);
  transition: transform .2s ease;
}
.questions details[open] summary::after { transform: rotate(225deg); top: 1.8rem; }
.questions details p { padding: 0 0 1.25rem; margin: 0; max-width: 40rem; color: var(--marron-doux); font-size: 1rem; }
@media (min-width: 900px) {
  .questions { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .questions h2 { grid-column: 1 / 5; }
  .questions__liste { grid-column: 5 / 12; }
}

/* ---------- mobile : moins de hauteur, plus d'air ----------
   Les photos passent en formats plus bas, les blocs se resserrent et le texte
   garde des marges larges. */
@media (max-width: 899px) {
  .pause { height: 72svh; min-height: 26rem; }
  .pause__phrase { font-size: clamp(2.1rem, 9vw, 2.75rem); padding-bottom: 2.75rem; }
  .manifeste, .soins, .gestes, .equipe, .venir, .seance { gap: 2.25rem; }
  .manifeste__photo { width: 62%; }
  .manifeste__photo img { aspect-ratio: 4 / 5; }
  .manifeste__texte p { font-size: 1.25rem; line-height: 1.55; }
  .manifeste__texte p:first-child { font-size: 1.5rem; }
  .univers__liste { gap: 2.5rem; }
  .univers__photo img { aspect-ratio: 4 / 3; }
  .ouverture h1.ouverture__signature { font-size: clamp(1.25rem, 5.4vw, 1.6rem); letter-spacing: 0; }
  .ouverture__actions .bouton { display: inline-flex; }
  .ouverture__sous { font-size: .9375rem; }
  .soins h2 { margin-bottom: 1rem; }
  .soins__photo img { aspect-ratio: 4 / 3; margin-top: 1.75rem; }
  .soins__video { margin-top: 1.75rem; max-width: none; }
  .soins__video video { aspect-ratio: 4 / 3; }
  .carte { margin-bottom: 2rem; }
  .carte li { padding: 1.15rem 0; }
  .carte h3 { font-size: 1.4rem; }
  .carte p { font-size: .9375rem; line-height: 1.55; margin-top: .35rem; }
  .citation p { font-size: 1.3rem; }
  .seance__video { max-width: none; }
  .seance__video video { aspect-ratio: 4 / 5; max-height: 68svh; }
  .gestes__photo { margin-right: 1rem; }
  .gestes__photo::before { inset: 1.25rem -1rem -1rem 1.25rem; }
  .gestes__photo img { aspect-ratio: 4 / 3; }
  .equipe__photo img { aspect-ratio: 1 / 1; }
  .equipe__liste > div { padding: 1.25rem 0; }
  .equipe__liste dt { font-size: 1.6rem; }
  .equipe__liste dd { font-size: .9375rem; line-height: 1.6; }
  .retraites__ouverture { min-height: 78svh; }
  .retraites__texte { gap: 2.25rem; padding-bottom: 3rem; }
  .offrir { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .offrir__icone { width: 3.5rem; }
  .venir__photo img { aspect-ratio: 4 / 3; }
  .venir address { font-size: 1.5rem; }
  .horaires { margin-top: 1rem; }
  .questions h2 { margin-bottom: 1.5rem; }
  .questions summary { font-size: 1.25rem; padding-top: .9rem; padding-bottom: .9rem; }
  .questions summary::after { top: 1.3rem; }
  .questions details[open] summary::after { top: 1.6rem; }
}

/* ---------- mobile : vidéos ----------
   Rien de ce bloc ne s'applique au-delà de 900 px. */
@media (max-width: 899px) {
  /* Pastille pause / lecture : le libellé reste lu par les lecteurs d'écran. */
  .pause-video {
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; font-size: 0; color: var(--lin);
    background: rgba(68, 39, 39, .3); border: 1px solid rgba(228, 223, 215, .55);
  }
  .pause-video::before, .pause-video::after { content: ""; position: absolute; top: 50%; width: 2px; height: .8rem; margin-top: -.4rem; background: currentColor; }
  .pause-video::before { left: calc(50% - 4px); }
  .pause-video::after { left: calc(50% + 2px); }
  .pause-video[aria-pressed="true"]::before { left: calc(50% - 3px); width: 0; height: 0; margin-top: -.45rem; background: none; border-style: solid; border-width: .45rem 0 .45rem .7rem; border-color: transparent transparent transparent currentColor; }
  .pause-video[aria-pressed="true"]::after { display: none; }

  /* Soins du corps : la vidéo du rebozo d'un bord à l'autre de l'écran. */
  .soins__video { margin: 2rem calc(var(--marge) * -1) 0; max-width: none; }
  .soins__video video { aspect-ratio: 4 / 5; }
  .soins__video figcaption { padding: 0 var(--marge); }
  .soins__video .pause-video { top: .75rem; right: var(--marge); }

}

/* ---------- pied de page : quatre colonnes ---------- */
.pied { background: var(--marron); color: var(--lin); padding: clamp(3.5rem, 7vw, 5.5rem) var(--marge) 2.5rem; font-size: .9375rem; }
.pied p { margin: 0 0 .75rem; line-height: 1.8; }
.pied a { text-decoration-color: var(--sauge); }
.pied__haut { display: grid; gap: 1.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--filet-clair); }
.pied__logo { width: 11rem; }
.pied .pied__phrase { font: 300 italic 1.5rem/1.3 var(--titre); max-width: 24rem; margin: 0; }
.pied__colonnes { display: grid; gap: 2.5rem; padding: 2.75rem 0; }
.pied__colonne h2 { font: 400 italic 1.625rem/1.2 var(--titre); color: var(--lin); margin-bottom: 1.1rem; }
.pied__colonne p, .pied__horaires { color: var(--lin-doux); }
.pied__colonne a { color: var(--lin); }
.pied__colonne a:not(.bouton) { display: inline-block; padding: .35rem 0; }
.pied__colonne .bouton { margin-top: .5rem; }
.pied__horaires { border-collapse: collapse; width: 100%; max-width: 18rem; font-variant-numeric: tabular-nums; }
.pied__horaires th, .pied__horaires td { padding: .3rem 0; font-weight: 300; font-size: .9375rem; }
.pied__horaires th { text-align: left; }
.pied__horaires td { text-align: right; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 0 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); }
.pied__liens a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .75rem; letter-spacing: 0; text-transform: uppercase; color: var(--lin-doux); }
@media (min-width: 640px) { .pied__colonnes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .pied__haut { grid-template-columns: 1fr 1fr; align-items: end; }
  .pied .pied__phrase { justify-self: end; text-align: right; }
  .pied__colonnes { grid-template-columns: repeat(4, 1fr); column-gap: 3rem; }
}

/* ---------- barre de réservation mobile ---------- */
.barre-rdv {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto;
  background: var(--lin); border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-rdv a { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.4rem; text-decoration: none; font: 500 .9375rem/1 var(--texte); }
.barre-rdv__principal { background: var(--sauge); color: var(--marron); }
.barre-rdv__appel { color: var(--marron); }
@media (max-width: 899px) { :root { --barre: 3.5rem; } }
@media (min-width: 900px) { .barre-rdv { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- page équipe ---------- */
.equipe-intro { padding: calc(var(--entete) + clamp(3rem, 8vw, 6rem)) var(--marge) var(--section); display: grid; gap: 3.5rem; align-items: center; }
.equipe-intro h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: 0; margin-bottom: 2rem; }
.equipe-intro__texte p { font: 400 1.4375rem/1.6 var(--titre); max-width: 32rem; margin: 0 0 1.25rem; }
.equipe-intro__photos { position: relative; padding-bottom: 18%; }
.equipe-intro__photo--grande { width: 72%; }
.equipe-intro__photo--petite { position: absolute; right: 0; bottom: 0; width: 46%; border: .5rem solid var(--lin); }
.praticiennes { padding: 0 var(--marge) var(--section); }
.praticiennes__liste { display: grid; gap: 2.5rem; }
.praticiennes__liste li { border-top: 1px solid var(--filet); padding-top: 1.75rem; }
.praticiennes h3 { font: 400 clamp(1.875rem, 2.6vw, 2.25rem)/1.1 var(--titre); margin-bottom: .5rem; }
.praticiennes__prononce { font: 300 .9375rem var(--texte); color: var(--marron-doux); }
.praticiennes__role { font-size: .75rem; letter-spacing: 0; text-transform: uppercase; color: var(--marron-doux); margin-bottom: 1.25rem; }
.praticiennes__liste p { max-width: 30rem; }
.praticiennes__devise { font: 400 italic 1.3125rem/1.45 var(--titre); margin-top: 1.25rem; }
.praticiennes__devise span { display: block; font: 500 .6875rem/1.4 var(--texte); font-style: normal; letter-spacing: 0; text-transform: uppercase; color: var(--marron-doux); margin-bottom: .35rem; }
.parcours { background: var(--blanc); padding: var(--section) var(--marge); }
.parcours__colonnes { display: grid; gap: 3rem; max-width: 64rem; margin: 0 auto; }
.parcours h3 { font: 400 italic 1.75rem/1.2 var(--titre); margin-bottom: 1.25rem; }
.parcours__liste > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--filet); }
.parcours__liste dt { font: 400 1.25rem/1.4 var(--titre); color: var(--marron-doux); font-variant-numeric: lining-nums; }
.parcours__liste dd { margin: 0; font-size: .9375rem; line-height: 1.6; padding-top: .15rem; }
@media (min-width: 900px) {
  .equipe-intro { grid-template-columns: 5fr 6fr; column-gap: 5rem; }
  .praticiennes__liste { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
  .parcours__colonnes { grid-template-columns: 1fr 1fr; column-gap: 5rem; }
}

/* ---------- pages intérieures ---------- */
.page-tete { padding: calc(var(--entete) + clamp(3rem, 8vw, 6rem)) var(--marge) clamp(1rem, 3vw, 2rem); display: grid; gap: 1.5rem; justify-items: start; }
.page-tete h1 { font-size: clamp(2.6rem, 7vw, 6.25rem); line-height: .95; letter-spacing: 0; max-width: 14ch; }
.page-tete .chapeau { color: var(--marron-doux); margin: 0; }
.quotidien { padding-top: var(--section); }
.sous-page .equipe:first-child { padding-top: calc(var(--entete) + clamp(3rem, 8vw, 6rem)); }
.sous-page .soins--visage { background: transparent; }
.page-tete + section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.quotidien { padding: 0 var(--marge) var(--section); display: grid; gap: 2.5rem; justify-items: start; }
.quotidien { justify-items: center; }
.quotidien .titre-capitales { margin-bottom: 0; }
.quotidien .mosaique { width: 100%; }

/* ---------- contact ---------- */
.contact { padding: clamp(2rem, 5vw, 3rem) var(--marge) var(--section); display: grid; gap: 3.5rem; }
.formulaire { display: grid; gap: 1.25rem; max-width: 40rem; }
.champ { display: grid; gap: .45rem; margin: 0; }
.champ label { font-size: .9375rem; font-weight: 500; }
.champ label span { font-weight: 300; color: var(--marron-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 3rem; padding: .75rem .9rem; border: 1px solid rgba(68, 39, 39, .45); border-radius: 0;
  background: var(--blanc); color: var(--marron); font: 300 1rem/1.5 var(--texte);
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--marron); outline-offset: 1px; border-color: var(--marron); }
.formulaire__piege { position: absolute; left: -9999px; }
.formulaire__note { font-size: .875rem; color: var(--marron-doux); margin: 0; max-width: 34rem; }
.formulaire__note a { color: var(--marron); text-decoration-color: var(--sauge); }
.formulaire .bouton { justify-self: start; border: 0; cursor: pointer; }
.contact__coordonnees address { font: 300 1.75rem/1.3 var(--titre); margin-bottom: 1rem; }
.contact__coordonnees ul { margin-bottom: 2rem; }
.contact__coordonnees a:not(.bouton) { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration-color: var(--sauge); }
@media (min-width: 900px) {
  .formulaire { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .champ--large, .formulaire__note, .formulaire .bouton { grid-column: 1 / -1; }
  .contact { grid-template-columns: 7fr 4fr; column-gap: 5rem; align-items: start; }
  .contact__coordonnees { padding-top: 2rem; }
}

/* ---------- mentions légales ---------- */
.legal { padding: calc(var(--entete) + 4rem) var(--marge) var(--section); max-width: 48rem; }
.legal h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; margin-bottom: 2.5rem; }
.legal h2 { font: 400 1.75rem/1.2 var(--titre); margin: 2.5rem 0 .75rem; }
.legal p { font-size: 1rem; color: var(--marron-doux); }
.legal a { color: var(--marron); text-decoration-color: var(--sauge); }

/* ---------- animations ----------
   Uniquement avec la classe .anim (posée par intro.js, jamais si l'on a
   demandé moins d'animations). Sans JavaScript, tout est visible d'emblée. */
:root { --douce: cubic-bezier(.2, .7, .1, 1); --rideau: cubic-bezier(.76, 0, .24, 1); }

/* L'ouverture : le logo se dessine, un filet sauge s'étire, puis le rideau se lève. */
.intro { display: none; }
.intro-active .intro {
  display: flex; position: fixed; inset: 0; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem;
  background: var(--marron);
  animation: intro-rideau .9s var(--rideau) 1.45s forwards;
}
.intro__logo { width: min(62vw, 22rem); clip-path: inset(0 100% 0 0); animation: intro-logo 1s var(--douce) .15s forwards; }
.intro__ligne { display: block; width: 7rem; height: 1px; background: var(--sauge); transform: scaleX(0); animation: intro-ligne .8s var(--douce) .65s forwards; }
.intro-active.intro-passee .intro { animation: intro-rideau .6s var(--rideau) forwards; }
@keyframes intro-logo { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-ligne { to { transform: scaleX(1); } }
@keyframes intro-rideau { to { transform: translateY(-100%); visibility: hidden; } }

/* Le haut de page se révèle après l'ouverture : la photo se pose, les lignes du titre montent. */
.anim .ouverture__photo img { transform: scale(1.12); transition: transform 2.6s var(--douce); }
.anim .ouverture h1 .ligne > span { transform: translateY(105%); transition: transform 1.2s var(--douce); }
.anim .ouverture h1 .ligne:nth-child(2) > span { transition-delay: .12s; }
.anim .ouverture__sous, .anim .ouverture__actions, .anim .ouverture__note, .anim .entete { opacity: 0; transition: opacity 1s ease .55s, background-color .45s ease, color .45s ease, border-color .45s ease; }
.anim.ouvert .ouverture__photo img { transform: scale(1); }
.anim.ouvert .ouverture h1 .ligne > span { transform: none; }
.anim.ouvert .ouverture__sous, .anim.ouvert .ouverture__actions, .anim.ouvert .ouverture__note, .anim.ouvert .entete { opacity: 1; }

/* Au fil de la page : le texte monte doucement, les photos se découvrent de bas en haut. */
.anim [data-apparition] { opacity: 0; transform: translateY(1.75rem); transition: opacity 1.1s var(--douce), transform 1.1s var(--douce); }
.anim [data-apparition].vu { opacity: 1; transform: none; }
.anim [data-apparition="photo"] { opacity: 1; transform: none; clip-path: inset(14% 0 0 0); transition: clip-path 1.4s var(--douce); }
.anim [data-apparition="photo"] img, .anim [data-apparition="photo"] video { transform: scale(1.08); transition: transform 1.8s var(--douce); }
.anim [data-apparition="photo"].vu { clip-path: inset(0 0 0 0); }
.anim [data-apparition="photo"].vu img, .anim [data-apparition="photo"].vu video { transform: none; }
.anim [data-apparition="suite"] { opacity: 1; transform: none; }
.anim [data-apparition="suite"] > li { opacity: 0; transform: translateY(1.25rem); transition: opacity .9s var(--douce), transform .9s var(--douce); }
.anim [data-apparition="suite"].vu > li { opacity: 1; transform: none; }
.anim [data-apparition="suite"].vu > li:nth-child(2) { transition-delay: .08s; }
.anim [data-apparition="suite"].vu > li:nth-child(3) { transition-delay: .16s; }
.anim [data-apparition="suite"].vu > li:nth-child(4) { transition-delay: .24s; }
.anim [data-apparition="suite"].vu > li:nth-child(5) { transition-delay: .32s; }



/* Soins en images : photos entières, jamais recadrées */
.soins-images { padding: 0 var(--marge) var(--section); margin-top: calc(var(--section) * -.5); }
.soins__images { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
.soins__images img { width: 100%; height: auto; }
.soins__images figcaption { margin-top: .75rem; font-size: .75rem; letter-spacing: 0; text-transform: uppercase; color: var(--marron-doux); }
@media (min-width: 900px) {
  .soins__images { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* =========================================================
   Onglets, bandeaux et animations, dans l’esprit de l’ancien site
   ========================================================= */

/* Onglets : capitales à empattements, filet qui se dessine, page en cours soulignée */
.entete__nav a { position: relative; border-bottom: 0; }
.entete__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
  background: var(--sauge); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--douce);
}
.entete__nav a:hover::after, .entete__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete__nav a[aria-current="page"] { font-style: italic; }
.entete__insta { display: none; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: inherit; transition: opacity .2s ease; }
.entete__insta:hover { opacity: .65; }
.entete__menu-pied { display: none; }
@media (min-width: 900px) {
  .entete__nav a { font: 500 .875rem/1 var(--titre); letter-spacing: 0; }
  .entete__nav ul { gap: 2rem; }
  .entete__insta { display: inline-flex; margin-right: -.5rem; }
  .entete--pleine .entete__rdv { background: var(--marron); color: var(--lin); }
  .entete--pleine .entete__rdv:hover { background: var(--sauge); color: var(--marron); border-color: var(--sauge); }
}

/* Menu mobile : un rideau brun qui descend, les onglets arrivent un à un */
@media (max-width: 899px) {
  .entete__nav {
    flex-direction: column; align-items: flex-start; justify-content: center;
    clip-path: inset(0 0 100% 0); opacity: 1;
    transition: clip-path .7s var(--rideau), visibility 0s linear .7s;
  }
  .menu-ouvert .entete__nav { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--rideau), visibility 0s; }
  .entete__nav ul a { font: 300 clamp(1.625rem, 7.4vw, 2.125rem)/1.2 var(--titre); letter-spacing: 0; padding: .2rem 0; }
  .entete__nav ul a::after { bottom: .5rem; }
  .entete__menu-pied a::after { display: none; }
  .entete__nav li, .entete__menu-pied { opacity: 0; transform: translateY(1.25rem); transition: opacity .5s ease, transform .6s var(--douce); }
  .menu-ouvert .entete__nav li, .menu-ouvert .entete__menu-pied { opacity: 1; transform: none; }
  .menu-ouvert .entete__nav li:nth-child(1) { transition-delay: .25s; }
  .menu-ouvert .entete__nav li:nth-child(2) { transition-delay: .31s; }
  .menu-ouvert .entete__nav li:nth-child(3) { transition-delay: .37s; }
  .menu-ouvert .entete__nav li:nth-child(4) { transition-delay: .43s; }
  .menu-ouvert .entete__nav li:nth-child(5) { transition-delay: .49s; }
  .menu-ouvert .entete__menu-pied { transition-delay: .6s; }
  .entete__menu-pied { display: block; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); width: 100%; font-size: .9375rem; color: var(--lin-doux); }
  .entete__menu-pied p { margin: 0 0 .25rem; }
  .entete__menu-pied a { font: 400 .9375rem/1.4 var(--texte); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: 1.5rem; color: var(--lin); text-decoration-color: var(--sauge); }
}

/* Rejoindre l’équipe */
.rejoindre { display: grid; justify-items: center; gap: 1.75rem; padding: var(--section) 0; text-align: center; background: var(--blanc); }
.rejoindre .titre-capitales { margin-bottom: 0; }
.rejoindre p { max-width: 34rem; padding: 0 var(--marge); margin: 0; font: 400 1.3125rem/1.55 var(--titre); }
.bouton--contour { background: transparent; color: var(--marron); border-color: var(--marron); }
.bouton--contour:hover { background: var(--marron); color: var(--lin); }

/* Photos en arche, comme la page « Mon histoire » */
.arche img { border-radius: 999px 999px 0 0; }
.contact__photo { width: min(100%, 17rem); margin: 0 0 2.25rem; }
.contact__photo img { width: 100%; height: auto; }

/* Galeries : légère respiration au survol, apparition en cascade */
.mosaique figure, .soins__images figure { overflow: hidden; }
.soins__images figure { overflow: visible; }
.mosaique img, .soins__images img { transition: transform 1.4s var(--douce); }
@media (hover: hover) {
  .mosaique li:hover img { transform: scale(1.035); }
  .soins__images li:hover img { transform: translateY(-.4rem); }
}
.anim .mosaique > li[data-apparition]:nth-child(3n+2), .anim .soins__images > li:nth-child(4n+2) { transition-delay: .1s; }
.anim .mosaique > li[data-apparition]:nth-child(3n), .anim .soins__images > li:nth-child(4n+3) { transition-delay: .2s; }
.anim .soins__images > li:nth-child(4n) { transition-delay: .3s; }

/* Titres en capitales : simple fondu */
.anim [data-apparition="titre"] { transform: none; transition: opacity 1.4s ease; }


/* ---------- mobile : cadrages des photos ----------
   Formats plus hauts que 4:3 pour ne plus couper têtes et gestes,
   point de cadrage réglé photo par photo. */
@media (max-width: 899px) {
  .univers__photo img { aspect-ratio: 4 / 5; }
  .univers__liste > li:nth-child(1) .univers__photo img { object-position: 50% 45%; }
  .univers__liste > li:nth-child(2) .univers__photo img { object-position: 50% 40%; }
  .univers__liste > li:nth-child(3) .univers__photo img { object-position: 50% 35%; }
  .manifeste__photo { width: 70%; justify-self: center; }
  .manifeste__photo img { aspect-ratio: 2 / 3; }
  .pause::after { background: linear-gradient(0deg, rgba(68, 39, 39, .82) 0%, rgba(68, 39, 39, .35) 45%, rgba(68, 39, 39, 0) 75%); }
  .soins__photo img { aspect-ratio: 4 / 5; object-position: 55% 45%; }
  .gestes__photo img { aspect-ratio: 4 / 5; object-position: 50% 72%; }
  .venir__photo img { aspect-ratio: 4 / 5; object-position: 50% 55%; }
  .contact__photo { width: 62%; margin-inline: auto; }
  .equipe-intro__photos { margin-top: -1rem; }
  .soins-images { margin-top: calc(var(--section) * -.35); }
  .soins__images figcaption { font-size: .6875rem; letter-spacing: 0; margin-top: .5rem; }
}
.quotidien { padding-top: clamp(3.5rem, 8vw, 6rem); }

/* Page « Mon histoire » : sobre, centrée, comme sur l’ancien site */
.histoire { padding: calc(var(--entete) + clamp(3rem, 8vw, 6rem)) var(--marge) var(--section); display: grid; justify-items: center; gap: clamp(2.5rem, 5vw, 4rem); }
.histoire__tete { text-align: center; }
.histoire__tete .titre-capitales { margin-bottom: 1.25rem; font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.histoire__exergue { margin: 0; font: 400 italic clamp(1.2rem, 2vw, 1.5rem)/1.5 var(--titre); color: var(--marron-doux); }
.histoire__photo { width: min(72%, 22rem); }
.histoire__photo img { width: 100%; height: auto; }
.histoire__texte { max-width: 38rem; }
.histoire__texte p { font: 400 1.25rem/1.65 var(--titre); margin: 0 0 1.25rem; }
.histoire__texte .histoire__accueil { font-style: italic; font-size: 1.5rem; }
.histoire__texte .bouton { margin-top: 1rem; }
.praticiennes .lien-souligne { margin-top: .75rem; }

/* Six onglets : entre 900 et 1200 px, on resserre pour rester sur une ligne */
.entete__nav a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .entete { gap: 1.25rem; }
  .entete__logo img { width: 7.5rem; }
  .entete__nav ul { gap: 1.1rem; }
  .entete__nav a { font-size: .75rem; letter-spacing: 0; }
  .entete__insta { display: none; }
  .entete__rdv { padding: .6rem .9rem; }
}
.entete__logo { flex-shrink: 0; }
@media (min-width: 900px) and (max-width: 1049px) {
  .entete { gap: .9rem; }
  .entete__logo img { width: 6.75rem; }
  .entete__nav ul { gap: .85rem; }
  .entete__nav a { font-size: .6875rem; letter-spacing: 0; }
  .entete__rdv { padding: .6rem .75rem; letter-spacing: 0; }
}
.introuvable__liens { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; }
.introuvable__liens a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration-color: var(--sauge); }

/* ---------- galeries qui défilent latéralement ----------
   Photos entières (jamais recadrées) à hauteur égale, qu’on fait glisser
   au doigt ou avec les flèches ; un clic les agrandit. */
.galerie { margin-inline: calc(var(--marge) * -1); width: calc(100% + 2 * var(--marge)); }
.galerie__piste {
  list-style: none; margin: 0; padding: 0 var(--marge) .75rem;
  display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--marge);
  scrollbar-width: thin; scrollbar-color: var(--filet) transparent;
}
.galerie--sombre .galerie__piste { scrollbar-color: var(--filet-clair) transparent; }
.galerie__piste > li { flex: 0 0 auto; scroll-snap-align: start; }
.galerie__piste img { display: block; height: clamp(20rem, 62vh, 34rem); width: auto; }
.galerie__fleches { display: flex; justify-content: flex-end; gap: .75rem; padding: 1.25rem var(--marge) 0; }
.galerie__fleche {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.galerie__fleche[hidden] { display: none; }
.galerie__fleche:hover { background: var(--marron); color: var(--lin); border-color: var(--marron); }
.galerie--sombre .galerie__fleche:hover { background: var(--lin); color: var(--marron); border-color: var(--lin); }
.galerie__fleche:disabled { opacity: .3; cursor: default; background: transparent; color: inherit; border-color: currentColor; }
.quotidien .galerie { justify-self: stretch; }
@media (max-width: 899px) {
  .galerie__piste { gap: .5rem; }
  .galerie__piste img { height: min(64svh, 26rem); }
}

.galerie__fleches { align-items: center; }

/* Fiches des praticiennes : portrait en arche au-dessus du nom */
.praticiennes__liste li { display: flex; flex-direction: column; align-items: flex-start; }
.praticiennes__photo { width: min(100%, 15rem); margin: 0 0 1.5rem; }
.praticiennes__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 899px) { .praticiennes__photo { width: 62%; } }
.praticiennes__photo--vide { aspect-ratio: 4 / 5; background: var(--blanc); border: 1px solid var(--filet); display: flex; align-items: center; justify-content: center; }
.praticiennes__photo--vide.arche { border-radius: 999px 999px 0 0; }
.praticiennes__photo--vide span { font: 300 4rem/1 var(--titre); color: var(--marron-doux); opacity: .5; }

/* =========================================================
   V2 : retours de la Maison
   ========================================================= */

/* Paragraphes en DM Sans 100 ; les citations et devises gardent la Cormorant */
/* DM Sans 100 réservée aux longs paragraphes ; les textes courts gardent leur style */
.manifeste__texte p, .histoire__texte p, .equipe-intro__texte p, .praticiennes__liste p,
.retraites__texte p, .legal p {
  font-family: var(--texte); font-weight: 100; font-style: normal;
}
.praticiennes__liste .praticiennes__role { font-weight: 400; }
.praticiennes__liste .praticiennes__devise { font-family: var(--titre); font-style: italic; font-weight: 400; }
.manifeste__texte p, .histoire__texte p, .equipe-intro__texte p { font-size: 1.125rem; line-height: 1.75; }
.manifeste__texte p:first-child, .histoire__texte .histoire__accueil { font: 300 italic clamp(1.5rem, 2.2vw, 1.9rem)/1.35 var(--titre); }
.praticiennes__devise, .citation p, .avis__liste p, .pause__phrase, .retraites__titre p,
.histoire__exergue, .pied .pied__phrase { font-family: var(--titre); }
.praticiennes__devise, .citation p, .retraites__titre p, .histoire__exergue, .pied .pied__phrase { font-style: italic; }
.pause__phrase { font-weight: 300; }

/* Photos en rectangle classique */
.arche img { border-radius: 0; }

/* Plus de texte posé sur les photos au fil de la page */
.pause { height: auto; min-height: 0; display: block; background: var(--lin); color: var(--marron); padding: 0 0 clamp(3rem, 7vw, 5rem); }
.pause::after { display: none; }
.pause__photo { position: relative; display: block; height: 78vh; min-height: 24rem; overflow: hidden; }
.pause__photo img { height: 118%; }
.pause__phrase { padding: clamp(2rem, 4vw, 3rem) var(--marge) 0; margin: 0 auto; max-width: 32ch; text-align: center; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.2; color: var(--marron); }
.retraites__titre { padding: calc(var(--entete) + clamp(3rem, 7vw, 5rem)) var(--marge) clamp(2rem, 4vw, 3rem); }
.retraites__titre h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; }
.retraites__ouverture { min-height: 0; height: 70vh; }
.retraites__ouverture::after { display: none; }
.gestes__photo::before { display: none; }
.equipe-intro__photos { display: grid; grid-template-columns: 3fr 2fr; gap: .75rem; align-items: end; padding-bottom: 0; }
.equipe-intro__photo--grande, .equipe-intro__photo--petite { position: static; width: 100%; border: 0; }

/* Soins du visage : la photo d’en-tête entière, plus de recadrage */
.soins__photo img { aspect-ratio: 1067 / 1600; height: auto; max-height: none; min-height: 0; object-fit: initial; }
.soins__photo { max-width: 24rem; }
@media (min-width: 900px) { .soins__tete { position: static; } }

/* Sous-titre de la page Soins */
.page-tete__sous { margin: -.5rem 0 0; font: 300 1.25rem/1.4 var(--texte); color: var(--marron); }

/* Pied de page allégé */
.pied__mentions { margin: 2.5rem 0 0; font-size: .8125rem; }
.pied__mentions a { color: var(--lin-doux); }

/* Mon histoire : la photo occupe toute la hauteur du bloc, le texte à côté */
.histoire { justify-items: stretch; padding-left: 0; padding-right: 0; }
.histoire__tete { padding: 0 var(--marge); }
.histoire__photo { width: 100%; margin: 0; }
.histoire__photo img { width: 100%; height: auto; display: block; }
.histoire__texte { padding: 0 var(--marge); max-width: 40rem; justify-self: center; }
@media (min-width: 900px) {
  .histoire { grid-template-columns: 5fr 6fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .histoire__tete { grid-column: 1 / -1; }
  .histoire__photo { position: sticky; top: var(--entete); }
  .histoire__photo img { height: calc(100vh - var(--entete)); object-fit: cover; object-position: 60% 35%; }
  .histoire__texte { padding: 2rem var(--marge) 0 0; justify-self: start; }
}
@media (max-width: 899px) {
  .pause__photo { height: 62svh; min-height: 20rem; }
  .retraites__ouverture { height: 56svh; }
}

/* DM Sans 100 : couleur pleine pour rester lisible */
.chapeau, .manifeste__texte p, .histoire__texte p, .equipe-intro__texte p, .univers__texte,
.carte p, .parcours__liste dd, .praticiennes__liste p, .venir p, .venir li, .questions p, .offrir p,
.gestes p, .rejoindre p, .contact__coordonnees p, .formulaire__note, .legal p { color: var(--marron); }
.praticiennes__liste .praticiennes__role { color: var(--marron-doux); }
.retraites p, .retraites dd { color: var(--lin); }
.pied p, .pied td, .pied th { color: var(--lin); }
.ouverture__sous { font-weight: 300; }
.seance p { color: var(--lin); }
.galerie__piste:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ouverture__photo img { object-position: 50% 40%; }
@media (max-width: 699px) { .ouverture__photo img { object-position: 45% 60%; } }

/* Accueil : la phrase posée sur la photo du bol, à la demande de la Maison */
.pause--fond { position: relative; display: flex; align-items: center; justify-content: center; height: 88vh; min-height: 30rem; padding: 0; background: var(--marron); color: var(--lin); overflow: hidden; }
.pause--fond .pause__photo { position: absolute; inset: 0; height: auto; min-height: 0; }
.pause--fond .pause__photo img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 55%; }
.pause--fond::after { display: block; content: ""; position: absolute; inset: 0; background: rgba(68, 39, 39, .5); pointer-events: none; }
.pause--fond .pause__phrase { position: relative; z-index: 1; color: var(--lin); padding: 0 var(--marge); max-width: 26ch; }
@media (max-width: 899px) {
  .pause--fond { height: 82svh; }
  .pause--fond .pause__photo img { object-position: 40% 72%; }
}

/* Photo figée : elle reste fixe à l’écran pendant que la page défile.
   Le cadre la découpe (clip-path), ce qui marche aussi sur iPhone. */
.pause--fond .pause__photo { clip-path: inset(0); }
.pause--fond .pause__photo img { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: 50% 55%; transform: none; }
@media (max-width: 899px) {
  .pause--fond .pause__photo img { height: 100lvh; object-position: 40% 72%; }
}
.pied__rdv { margin: .75rem 0 0; font-size: .8125rem; color: var(--lin-doux); }
.venir__photo img { aspect-ratio: 853 / 1280; height: auto; object-fit: initial; }
.page-tete__texte { margin: 0; max-width: 34rem; font: 300 1.0625rem/1.7 var(--texte); color: var(--marron); }

/* Textes de présentation de l’équipe justifiés (césure pour éviter les trous) */
.praticiennes__liste p:not(.praticiennes__role):not(.praticiennes__devise),
.equipe-intro__texte p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: wrap; }
@media (max-width: 899px) { .galerie__piste img[width="1600"] { width: calc(100vw - 2 * var(--marge)); height: auto; } }

/* Équipe : une seule photo de groupe en introduction, quatre fiches */
.equipe-intro__photos { grid-template-columns: 1fr; }
.equipe-intro__photo--grande { width: 100%; max-width: 30rem; justify-self: center; }
@media (min-width: 1100px) { .praticiennes__liste { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; } }
@media (min-width: 900px) and (max-width: 1099px) { .praticiennes__liste { grid-template-columns: repeat(2, 1fr); } }

/* Mon histoire : photo d’Ombline figée en ouverture, titre posé dessus */
.histoire-fond { height: 92vh; min-height: 32rem; justify-content: flex-start; }
.histoire-fond .pause__photo img { object-position: 65% 40%; }
.histoire-fond::after { background: linear-gradient(90deg, rgba(68, 39, 39, .72) 0%, rgba(68, 39, 39, .35) 50%, rgba(68, 39, 39, .1) 100%); }
.histoire-fond__texte { position: relative; z-index: 1; padding: var(--entete) var(--marge) 0; max-width: 34rem; text-align: left; }
.histoire-fond .titre-capitales { color: var(--lin); text-align: left; margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.25rem); }
.histoire-fond .histoire__exergue { color: var(--lin); font-size: clamp(1.25rem, 2vw, 1.6rem); }
.histoire { padding-top: var(--section); grid-template-columns: 1fr !important; justify-items: center; }
.histoire .histoire__texte { padding: 0 var(--marge); max-width: 40rem; justify-self: center; }
@media (max-width: 899px) {
  .histoire-fond { height: 85svh; align-items: flex-end; }
  .histoire-fond .pause__photo img { height: 100lvh; object-position: 70% 40%; }
  .histoire-fond::after { background: linear-gradient(0deg, rgba(68, 39, 39, .8) 0%, rgba(68, 39, 39, .2) 55%, rgba(68, 39, 39, 0) 100%); }
  .histoire-fond__texte { padding-bottom: 3rem; }
}
.manifeste__photo img { aspect-ratio: 1066 / 1600; height: auto; object-fit: initial; }
@media (min-width: 900px) { .manifeste__photo { justify-self: stretch; } }

/* Ordinateur : longs paragraphes un peu plus lisibles (graisse 200, corps et interligne plus généreux) */
@media (min-width: 900px) {
  .manifeste__texte p, .histoire__texte p, .equipe-intro__texte p, .praticiennes__liste p,
  .retraites__texte p, .legal p { font-weight: 200; }
  .manifeste__texte p, .histoire__texte p, .equipe-intro__texte p, .retraites__texte p { font-size: 1.25rem; line-height: 1.8; }
  .praticiennes__liste p:not(.praticiennes__role):not(.praticiennes__devise) { font-size: 1.0625rem; line-height: 1.75; }
  .praticiennes__liste .praticiennes__role { font-weight: 400; }
  .manifeste__texte p:first-child, .histoire__texte .histoire__accueil { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.35; }
}

/* Yoga : la photo de la retraite s'affiche en entier, la terrasse où l'on pratique reste visible */
.retraites__ouverture { height: auto; min-height: 0; display: block; }
.retraites__photo img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 2000 / 1514; object-fit: initial; }
@media (max-width: 699px) { .retraites__photo img { aspect-ratio: 1000 / 1250; } }
@media (min-width: 700px) {
  .retraites__photo img { width: auto; max-width: 100%; max-height: 90vh; margin: 0 auto; }
}
/* Carte « Notre équipe » : photo des quatre praticiennes, visages tous visibles */
.univers__liste > li:nth-child(2) .univers__photo img { object-position: 50% 40%; }

/* Photos remplacées depuis l'espace admin : jamais déformées, même si un format est imposé */
img[src^="/photos/"] { object-fit: cover; }