/* ============================================================
   Cru « Massage » — feuille de style du site public
   Direction : le galet et le souffle. Ardoise en fond (la pénombre d'une
   cabine), lin pour le texte, vapeur pour les pages claires, eucalyptus pour
   l'accent, peau pour la lueur. Spectral en graisse légère pour les titres,
   Ysabeau pour le texte et l'interface. Aucun filet : les surfaces se
   séparent par le ton. Le galet (un arrondi irrégulier) est la forme de la
   maison ; la lueur (un dégradé radial doux) remplace le trait. Chaque
   section a son propre mécanisme. Mobile d'abord. Les noms de jetons
   (cuivre, creme, sable, nuit, encre…) sont ceux des autres crus.
   ============================================================ */

@font-face { font-family: "Spectral"; src: url("../fonts/spectral-200.f933f33cce1b.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-300.21a603ca2d28.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-400.d6db3dbfe56d.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-200-italic.97fa78e4a990.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-300-italic.625b630bd18f.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-400-italic.dac97c9667ed.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ysabeau"; src: url("../fonts/ysabeau-normal.2edd2fc3a66c.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Ysabeau"; src: url("../fonts/ysabeau-italic.a2b24ec9f823.woff2") format("woff2"); font-weight: 1 1000; font-style: italic; font-display: swap; }

:root {
    --creme: #3b403d;            /* ardoise : fond du site */
    --sable: #e6e2da;            /* vapeur : fond clair */
    --nuit: #161817;             /* basalte */
    --encre: #ece7df;            /* lin : texte */
    --cuivre: #a8c2ad;           /* eucalyptus : accent */
    --cuivre-fonce: #6d8a74;
    --cuivre-clair: #d4e2d6;
    --peau: #e7c9a5;             /* la lueur du souffle */
    --rayon: 48%;
    --blanc: #f6f3ee;
    --gris: color-mix(in srgb, var(--encre), transparent 42%);
    --gris-clair: color-mix(in srgb, var(--encre), transparent 65%);
    --ligne: color-mix(in srgb, var(--encre), transparent 84%);
    --ligne-forte: color-mix(in srgb, var(--encre), transparent 60%);
    --ligne-claire: var(--ligne);
    --serif: "Spectral", Georgia, serif;
    --sans: "Ysabeau", "Helvetica Neue", Arial, sans-serif;
    --marge: clamp(20px, 5vw, 96px);
    --largeur: 1400px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --entete: 76px;
    /* les galets : des arrondis irréguliers, trois variantes */
    --galet-1: 58% 42% 45% 55% / 52% 48% 52% 48%;
    --galet-2: 44% 56% 54% 46% / 56% 42% 58% 44%;
    --galet-3: 52% 48% 40% 60% / 45% 55% 45% 55%;
    --lueur: radial-gradient(closest-side, color-mix(in srgb, var(--peau), transparent 55%), transparent);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--cuivre); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 4px; border-radius: 12px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--cuivre); color: var(--nuit); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }

/* ---------- typographie ---------- */
.surtitre { font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--cuivre); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 12px; height: 9px; border-radius: var(--galet-1); background: var(--cuivre); flex: none; }
.titre-geant, .titre-page, .titre-section, .titre-bloc { font-family: var(--serif); font-weight: 200; line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; }
.titre-geant { font-size: clamp(46px, 8vw, 128px); line-height: 0.98; }
.titre-page { font-size: clamp(40px, 6.5vw, 100px); }
.titre-section { font-size: clamp(32px, 4.4vw, 66px); }
.titre-bloc { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.1; }
.titre-page em, .titre-section em, .titre-bloc em, .titre-geant em { font-style: italic; font-weight: 200; color: var(--cuivre); }
.texte-grand { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.45; }
.texte-doux { color: var(--gris); }
.petit { font-size: 14px; line-height: 1.5; }
.prose { display: grid; gap: 16px; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.prose h2 { font-family: var(--serif); font-weight: 300; font-size: 28px; margin-top: 18px; line-height: 1.1; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose .a-completer { background: color-mix(in srgb, var(--peau), transparent 55%); padding: 0 4px; }
.lien-souligne { text-decoration: none; border-bottom: 1px solid var(--cuivre); padding-bottom: 2px; transition: color 300ms; }
.lien-souligne:hover { color: var(--cuivre); }
.tabulaire { font-variant-numeric: tabular-nums; }
.etiquette { font-family: var(--sans); font-weight: 500; font-size: 13px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--encre), transparent 90%); white-space: nowrap; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
/* le galet : un arrondi irrégulier */
.galet { border-radius: var(--galet-1); overflow: hidden; background: var(--nuit); }
.galet-2 { border-radius: var(--galet-2); }
.galet-3 { border-radius: var(--galet-3); }
.galet img { width: 100%; height: 100%; object-fit: cover; }
/* la lueur : à la place du trait, un halo */
.lueur { position: relative; }
.lueur::before { content: ""; position: absolute; inset: -20%; background: var(--lueur); z-index: -1; pointer-events: none; }

/* ---------- boutons : des galets lisses ---------- */
.bouton {
    --fond: transparent; --texte: var(--encre); --bord: var(--ligne-forte);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 30px; border-radius: 40px 34px 38px 36px / 36px 40px 34px 38px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); text-decoration: none; cursor: pointer;
    font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap;
    transition: background 500ms, color 400ms, border-color 400ms, transform 700ms var(--sortie), box-shadow 700ms;
}
.bouton:hover { background: color-mix(in srgb, var(--encre), transparent 90%); border-color: var(--encre); transform: translateY(-2px); }
.bouton-plein { --fond: var(--cuivre); --texte: var(--nuit); --bord: var(--cuivre); }
.bouton-plein:hover { background: var(--cuivre-clair); border-color: var(--cuivre-clair); box-shadow: 0 20px 40px -24px var(--cuivre); }
.bouton-clair { --texte: var(--nuit); --bord: var(--nuit); }
.bouton-clair:hover { background: color-mix(in srgb, var(--nuit), transparent 90%); border-color: var(--nuit); }
.bouton-petit { padding: 11px 20px; font-size: 14px; }
.bouton[disabled] { opacity: 0.4; cursor: default; }

/* ---------- l'en-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--entete); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--marge); color: var(--encre); transition: background 500ms, transform 600ms var(--sortie); }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 10%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.entete.cachee { transform: translateY(-100%); }
.entete.sur-clair { color: var(--nuit); }
.marque { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 300; font-size: 26px; letter-spacing: 0.06em; font-variant-caps: small-caps; }
.marque-logo { height: 28px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.navigation { display: none; gap: 28px; font-size: 15px; font-weight: 500; }
.navigation a { text-decoration: none; padding: 6px 0; opacity: 0.75; transition: opacity 300ms; }
.navigation a:hover, .navigation a[aria-current="page"] { opacity: 1; }
.navigation a[aria-current="page"]::after { content: ""; display: block; width: 8px; height: 6px; margin: 4px auto 0; border-radius: var(--galet-1); background: var(--cuivre); }
.entete-actions { display: flex; align-items: center; gap: 14px; }
.entete-tel { display: none; text-decoration: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.entete .bouton-reserver { padding: 11px 20px; font-size: 14px; }
.burger { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; position: relative; margin-right: -10px; }
.burger span { position: absolute; width: 8px; height: 6px; border-radius: 50%; background: currentColor; transition: transform 500ms var(--sortie); }
.burger span:first-child { transform: translateX(-8px); }
.burger span:last-child { transform: translateX(8px); }
.burger[aria-expanded="true"] span:first-child { transform: translateX(-4px) scale(1.4); }
.burger[aria-expanded="true"] span:last-child { transform: translateX(4px) scale(1.4); }

/* menu plein écran : la pénombre, les pages en Spectral léger */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--nuit); color: var(--encre); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--entete) + 20px) var(--marge) 32px; }
.menu-mobile::before { content: ""; position: absolute; width: 60vmin; height: 60vmin; right: -20vmin; top: 20vh; background: var(--lueur); pointer-events: none; }
.menu-mobile nav { display: grid; align-content: center; gap: 10px; position: relative; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-weight: 200; font-size: clamp(38px, 9vw, 96px); line-height: 1.05; display: flex; align-items: baseline; gap: 16px; transition: color 300ms; }
.menu-mobile nav a:hover { color: var(--cuivre); }
.menu-mobile nav a small { font-family: var(--sans); font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.menu-mobile-reserver { margin-top: 14px; color: var(--cuivre); }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; position: relative; }
.menu-mobile-pied a { text-decoration: none; }

/* ---------- messages ---------- */
.messages { position: fixed; top: calc(var(--entete) + 8px); left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); }
.message { padding: 14px 20px; font-size: 14px; background: var(--cuivre); color: var(--nuit); border-radius: 999px; text-align: center; }
.message-error { background: #d9a49c; }

/* ---------- sections communes ---------- */
.section { padding: clamp(80px, 11vw, 160px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.clair, .fond-sable { background: var(--sable); color: var(--nuit); --gris: color-mix(in srgb, var(--nuit), transparent 42%); --gris-clair: color-mix(in srgb, var(--nuit), transparent 65%); --ligne: color-mix(in srgb, var(--nuit), transparent 86%); --ligne-forte: color-mix(in srgb, var(--nuit), transparent 62%); }
.clair .surtitre, .fond-sable .surtitre { color: var(--cuivre-fonce); }
.clair .titre-section em, .fond-sable .titre-section em { color: var(--cuivre-fonce); }
.clair .galet, .fond-sable .galet { background: var(--blanc); }
.fond-nuit { background: var(--nuit); }
.fond-blanc { background: var(--blanc); color: var(--nuit); }
[data-fond-texte="clair"] { color: var(--encre); }
[data-fond-texte="sombre"] { color: var(--nuit); --gris: color-mix(in srgb, var(--nuit), transparent 42%); --ligne: color-mix(in srgb, var(--nuit), transparent 86%); }
.entete-section { display: grid; gap: 8px; margin-bottom: clamp(36px, 5vw, 72px); }
.entete-section-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tete-page { padding: calc(var(--entete) + clamp(48px, 8vw, 120px)) var(--marge) clamp(40px, 6vw, 80px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .texte-grand { max-width: 50ch; }

/* apparitions : une seule sorte, lente, comme une respiration */
[data-apparition] { opacity: 0; transform: translateY(14px); transition: opacity 1600ms var(--sortie), transform 1600ms var(--sortie); transition-delay: calc(var(--i, 0) * 140ms); }
[data-apparition].visible, body.mode-edition [data-apparition] { opacity: 1; transform: none; }
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.04em 0.14em; margin: -0.08em -0.04em -0.14em; }
[data-mots] .mot > span { display: inline-block; opacity: 0; filter: blur(6px); transition: opacity 1400ms var(--sortie), filter 1400ms var(--sortie); transition-delay: calc(var(--m) * 90ms); }
[data-mots].mots-visibles .mot > span { opacity: 1; filter: none; }

/* ============================================================
   ACCUEIL
   ============================================================ */

/* ---------- 1. le souffle : un cercle qui respire, le nom au centre ---------- */
.souffle { min-height: min(100svh, 1000px); padding: calc(var(--entete) + 16px) var(--marge) 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; position: relative; overflow: hidden; }
.souffle-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 14px; color: var(--gris); }
.souffle-centre { display: grid; place-items: center; position: relative; }
.souffle-cercle { position: relative; width: min(74vw, 46vh, 520px); aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.souffle-cercle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--peau), transparent 35%) 0%, color-mix(in srgb, var(--peau), transparent 75%) 45%, transparent 72%); animation: respirer 10s ease-in-out infinite; }
.souffle-cercle::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--encre), transparent 70%); animation: respirer 10s ease-in-out infinite; }
@keyframes respirer { 0% { transform: scale(0.82); } 40% { transform: scale(1.06); } 55% { transform: scale(1.06); } 100% { transform: scale(0.82); } }
.souffle-nom { position: relative; display: grid; gap: 10px; justify-items: center; }
.souffle-nom .titre-geant { font-weight: 200; letter-spacing: 0.02em; }
.souffle-consigne { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(16px, 1.6vw, 22px); color: var(--gris); min-height: 1.4em; transition: opacity 800ms; }
.souffle-bas { display: grid; gap: 14px; font-size: 15px; }
.souffle-bas p strong { font-weight: 600; }
.souffle-places { color: var(--cuivre); }

/* ---------- 2. le corps : une silhouette, une zone, les massages qui vont avec ---------- */
.corps { padding: clamp(80px, 11vw, 160px) var(--marge); }
.corps-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.corps-tete { display: grid; gap: 10px; }
.corps-tete .titre-section { max-width: 16ch; }
.corps-scene { display: grid; gap: 30px; }
.silhouette { width: min(60vw, 260px); margin: 0 auto; }
.silhouette svg { width: 100%; height: auto; overflow: visible; }
.silhouette .peau { fill: color-mix(in srgb, var(--encre), transparent 88%); }
.zone { cursor: pointer; }
.zone path, .zone ellipse, .zone rect { fill: color-mix(in srgb, var(--cuivre), transparent 75%); stroke: var(--cuivre); stroke-width: 0.6; transition: fill 400ms; }
.zone:hover path, .zone:hover ellipse, .zone:hover rect, .zone[aria-pressed="true"] path, .zone[aria-pressed="true"] ellipse, .zone[aria-pressed="true"] rect { fill: var(--cuivre); }
.zone text { font-family: var(--sans); font-size: 6px; fill: var(--encre); pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
.zone[aria-pressed="true"] text { fill: var(--nuit); }
.corps-lecture { display: grid; gap: 14px; align-content: start; }
.corps-zone-nom { font-family: var(--serif); font-weight: 200; font-size: clamp(30px, 4vw, 56px); line-height: 1; }
.corps-zone-nom em { font-style: italic; color: var(--cuivre); }
.corps-listes > * { display: none; }
.corps-listes > .actif { display: grid; gap: 0; animation: monter 700ms var(--sortie); }
@keyframes monter { from { opacity: 0; transform: translateY(8px); } }
.corps-massage { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ligne); text-decoration: none; color: inherit; transition: color 300ms; }
.corps-massage:hover { color: var(--cuivre); }
.corps-massage:last-child { border-bottom: 1px solid var(--ligne); }
.corps-massage-nom { font-family: var(--serif); font-weight: 300; font-size: 22px; }
.corps-massage-prix { font-variant-numeric: tabular-nums; font-weight: 500; }
.corps-massage-meta { grid-column: 1 / -1; font-size: 13px; color: var(--gris); }
.corps-vide { color: var(--gris); font-style: italic; font-family: var(--serif); }

/* ---------- 3. la cabine : trois réglages, la pièce change ---------- */
.cabine { padding: clamp(80px, 11vw, 160px) var(--marge); background: var(--nuit); }
.cabine-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.cabine-tete { display: grid; gap: 10px; }
.cabine-scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--galet-2); background: var(--nuit); }
.cabine-scene img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(0.35 + var(--lumiere, 0.5) * 0.9)); transition: filter 600ms; }
.cabine-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--peau), transparent 10%), transparent 70%); mix-blend-mode: soft-light; opacity: calc(var(--chaleur, 0.5) * 1.6); transition: opacity 600ms; pointer-events: none; }
.cabine-onde { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 40px; pointer-events: none; }
.cabine-onde svg { width: 100%; height: 100%; overflow: visible; }
.cabine-onde path { fill: none; stroke: var(--encre); stroke-width: 1; opacity: 0.7; transform-origin: 50% 50%; transform: scaleY(calc(0.15 + var(--son, 0.5) * 1.2)); transition: transform 600ms; }
.cabine-reglages { display: grid; gap: 22px; align-content: center; }
.reglage { display: grid; gap: 8px; }
.reglage-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reglage-nom { font-family: var(--serif); font-weight: 300; font-size: 22px; }
.reglage-valeur { font-size: 14px; color: var(--cuivre); font-variant-numeric: tabular-nums; }
.reglage input[type="range"] { width: 100%; accent-color: var(--cuivre); height: 26px; }
.reglage-texte { font-size: 14px; color: var(--gris); }
.cabine-note { font-size: 14px; color: var(--gris); max-width: 60ch; }

/* ---------- 4. les galets : les praticiennes, chacune sa forme ---------- */
.galets { padding: clamp(80px, 11vw, 160px) var(--marge); }
.galets-interieur { max-width: var(--largeur); margin: 0 auto; }
.galets-tete { display: grid; gap: 10px; margin-bottom: 44px; }
.galets-liste { display: grid; gap: 34px 24px; }
.galet-carte { text-decoration: none; color: inherit; display: grid; gap: 12px; justify-items: center; text-align: center; }
.galet-carte figure { width: min(62vw, 240px); aspect-ratio: 4 / 5; transform: rotate(calc(var(--r, 0) * 1deg)); transition: transform 1200ms var(--sortie), border-radius 1200ms var(--sortie); }
.galet-carte:nth-child(3n+1) figure { --r: -3; }
.galet-carte:nth-child(3n+2) figure { --r: 2; border-radius: var(--galet-2); }
.galet-carte:nth-child(3n) figure { --r: -1; border-radius: var(--galet-3); }
.galet-carte:hover figure { transform: rotate(0deg) translateY(-6px); border-radius: var(--galet-3); }
.galet-carte img { filter: saturate(0.7); transition: filter 800ms; }
.galet-carte:hover img { filter: saturate(1); }
.galet-nom { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1; margin-top: 8px; }
.galet-titre { font-size: 14px; color: var(--gris); }
.galet-mains { font-size: 13px; color: var(--cuivre); }
.galet-prochain { font-size: 14px; }
.galet-prochain strong { font-weight: 600; }

/* ---------- 5. le calme : la courbe des heures calmes d'aujourd'hui ---------- */
.calme { padding: clamp(80px, 11vw, 160px) var(--marge); }
.calme-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; }
.calme-tete { display: grid; gap: 10px; }
.calme-tete .titre-section { max-width: 18ch; }
.calme-graphe { position: relative; }
.calme-graphe svg { width: 100%; height: auto; overflow: visible; display: block; }
.calme-graphe .aire { fill: color-mix(in srgb, var(--cuivre-fonce), transparent 60%); }
.calme-graphe .courbe { fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.2; }
.calme-graphe .heure-texte { font-family: var(--sans); font-size: 4px; fill: var(--gris); text-anchor: middle; }
.calme-graphe .point { fill: var(--nuit); stroke: var(--cuivre-fonce); stroke-width: 0.8; }
.calme-graphe .point.calme-max { fill: var(--cuivre-fonce); }
.calme-graphe .repere { stroke: var(--ligne-forte); stroke-width: 0.4; stroke-dasharray: 1 1.5; }
.calme-legende { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--gris); }
.calme-legende strong { color: inherit; font-weight: 600; }
.calme-ferme { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; color: var(--gris); }

/* ---------- 6. le cairn : les mots des clientes, empilés comme des galets ---------- */
.cairn { padding: clamp(80px, 11vw, 160px) var(--marge); background: var(--nuit); }
.cairn-interieur { max-width: 1100px; margin: 0 auto; display: grid; gap: 34px; }
.cairn-tete { display: grid; gap: 10px; }
.cairn-scene { display: grid; gap: 30px; }
.cairn-pile { display: grid; justify-items: center; gap: 6px; align-content: end; }
.cairn-galet { border: 0; cursor: pointer; background: color-mix(in srgb, var(--encre), transparent 80%); height: 34px; transition: background 400ms, transform 700ms var(--sortie); }
.cairn-galet:nth-child(1) { width: 120px; border-radius: var(--galet-1); }
.cairn-galet:nth-child(2) { width: 150px; border-radius: var(--galet-2); }
.cairn-galet:nth-child(3) { width: 180px; border-radius: var(--galet-3); }
.cairn-galet:nth-child(4) { width: 210px; border-radius: var(--galet-1); }
.cairn-galet:hover { transform: translateX(6px); }
.cairn-galet[aria-pressed="true"] { background: var(--cuivre); }
.cairn-mots > * { display: none; }
.cairn-mots > .actif { display: grid; gap: 14px; animation: monter 800ms var(--sortie); }
.cairn-mots blockquote { font-family: var(--serif); font-weight: 200; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.25; max-width: 26ch; }
.cairn-mots cite { font-style: normal; font-size: 14px; color: var(--gris); }

/* ---------- 7. les huiles : trois flacons, la pièce prend leur couleur ---------- */
.huiles { padding: clamp(80px, 11vw, 160px) var(--marge); background: color-mix(in srgb, var(--creme), var(--teinte, var(--creme)) 22%); transition: background 1200ms; }
.huiles-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.huiles-tete { display: grid; gap: 10px; }
.huiles-liste { display: grid; gap: 14px; }
.huile { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--ligne); cursor: default; }
.huile:last-child { border-bottom: 1px solid var(--ligne); }
.huile-flacon { width: 44px; height: 64px; grid-row: span 3; border-radius: 12px 12px 18px 18px; background: linear-gradient(to top, var(--couleur) 0 70%, color-mix(in srgb, var(--couleur), transparent 60%) 70% 100%); position: relative; transition: transform 700ms var(--sortie); }
.huile-flacon::before { content: ""; position: absolute; top: -10px; left: 50%; width: 14px; height: 12px; margin-left: -7px; border-radius: 4px 4px 0 0; background: var(--nuit); }
.huile:hover .huile-flacon { transform: translateY(-4px) rotate(-4deg); }
.huile-nom { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.1; }
.huile-notes { font-size: 14px; color: var(--cuivre); }
.huile-texte { font-size: 15px; color: var(--gris); max-width: 56ch; }

/* ---------- 8. le gong : la section finale, des ondes au survol ---------- */
.gong { padding: clamp(100px, 14vw, 220px) var(--marge); text-align: center; position: relative; overflow: hidden; }
.gong-interieur { max-width: 900px; margin: 0 auto; display: grid; justify-items: center; gap: 24px; position: relative; }
.gong-cercle { width: min(60vw, 260px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--peau), color-mix(in srgb, var(--peau), var(--nuit) 45%)); position: relative; display: grid; place-items: center; text-decoration: none; color: var(--nuit); font-family: var(--serif); font-weight: 300; font-size: 22px; box-shadow: 0 40px 80px -40px var(--peau); }
.gong-cercle::before, .gong-cercle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--peau); opacity: 0; }
.gong-cercle:hover::before, .gong-cercle.sonne::before { animation: onde 2.4s ease-out infinite; }
.gong-cercle:hover::after, .gong-cercle.sonne::after { animation: onde 2.4s ease-out 0.8s infinite; }
@keyframes onde { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
.gong-titre { font-family: var(--serif); font-weight: 200; font-size: clamp(40px, 7vw, 110px); line-height: 1; }
.gong-titre em { font-style: italic; color: var(--cuivre); }
.gong .texte-grand { max-width: 40ch; }
.gong-note { font-size: 13px; color: var(--gris); }

/* ============================================================
   PAGES
   ============================================================ */

/* ---------- la carte : les massages avec leur anneau de durée ---------- */
.familles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 36px; }
.familles::-webkit-scrollbar { display: none; }
.familles a { flex: none; text-decoration: none; font-weight: 500; font-size: 14px; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--encre), transparent 90%); transition: background 300ms, color 300ms; }
.familles a:hover, .familles a.actif { background: var(--cuivre); color: var(--nuit); }
.famille { display: grid; gap: 22px; scroll-margin-top: calc(var(--entete) + 30px); padding-bottom: clamp(48px, 7vw, 100px); }
.famille-tete { display: grid; gap: 6px; }
.massages { display: grid; gap: 14px; }
.massage { display: grid; grid-template-columns: 84px 1fr; gap: 6px 20px; align-items: center; padding: 20px 0; border-top: 1px solid var(--ligne); text-decoration: none; color: inherit; transition: color 300ms; }
.massage:last-child { border-bottom: 1px solid var(--ligne); }
.massage:hover .massage-nom { color: var(--cuivre); }
.anneau { width: 84px; height: 84px; grid-row: span 3; position: relative; display: grid; place-items: center; }
.anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 3; }
.anneau .fond { stroke: color-mix(in srgb, var(--encre), transparent 85%); }
.anneau .arc { stroke: var(--cuivre); stroke-linecap: round; stroke-dasharray: calc(var(--p) * 245) 245; transition: stroke-dasharray 1600ms var(--sortie); }
.anneau span { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; }
.massage-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.massage-nom { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; transition: color 300ms; }
.massage-prix { font-weight: 500; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.massage-prix small { font-size: 12px; color: var(--gris); margin-right: 4px; }
.massage-texte { font-size: 15px; color: var(--gris); max-width: 60ch; }
.massage-qui { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.massage-qui img { width: 28px; height: 34px; object-fit: cover; border-radius: var(--galet-1); }
.appel { text-align: center; display: grid; justify-items: center; gap: 22px; }
.appel .titre-section { max-width: 18ch; }

/* ---------- les mains : la galerie des galets ---------- */
.galerie { display: grid; gap: 44px; }
.fiche { display: grid; gap: 22px; text-decoration: none; color: inherit; }
.fiche figure { aspect-ratio: 4 / 5; width: min(70vw, 300px); }
.fiche-texte { display: grid; gap: 12px; align-content: start; }
.fiche-nom { font-family: var(--serif); font-weight: 200; font-size: clamp(36px, 5vw, 66px); line-height: 1; }
.fiche-nom em { font-style: italic; color: var(--cuivre); }
.fiche-titre { font-size: 15px; }
.fiche-bio { font-size: 16px; color: var(--gris); max-width: 52ch; }
.semaine-galets { display: flex; gap: 8px; align-items: flex-end; }
.semaine-galets span { display: grid; gap: 6px; justify-items: center; font-size: 11px; color: var(--gris); }
.semaine-galets i { display: block; width: 16px; height: 12px; border-radius: var(--galet-1); background: color-mix(in srgb, var(--encre), transparent 82%); }
.semaine-galets .present i { background: var(--cuivre); }
.semaine-galets .aujourd-hui { color: var(--cuivre); }
.fiche-bas { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font-size: 14px; padding-top: 12px; border-top: 1px solid var(--ligne); }

/* ---------- une praticienne ---------- */
.praticienne-tete { display: grid; gap: 28px; align-items: start; }
.praticienne-tete figure { aspect-ratio: 4 / 5; width: min(74vw, 340px); }
.praticienne-infos { display: grid; gap: 18px; }
.semaine-grande { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine-grande div { display: grid; gap: 6px; padding: 14px 6px; background: color-mix(in srgb, var(--encre), transparent 90%); border-radius: 22px; text-align: center; font-size: 12px; min-height: 110px; align-content: start; }
.semaine-grande div.absent { background: transparent; box-shadow: inset 0 0 0 1px var(--ligne); color: var(--gris-clair); }
.semaine-grande div.aujourd-hui { box-shadow: inset 0 0 0 1px var(--cuivre); }
.semaine-grande b { font-family: var(--serif); font-size: 20px; font-weight: 300; }
.semaine-grande span { font-variant-numeric: tabular-nums; line-height: 1.3; }
.semaine-grande small { color: var(--gris); }
.tarifs-praticienne { display: grid; gap: 30px; }
.tarifs-categorie { display: grid; align-content: start; }
.tarifs-categorie h3 { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; padding-bottom: 12px; border-bottom: 1px solid var(--ligne-forte); margin-bottom: 4px; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.tarifs-categorie li span:last-child { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.autres-galets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.autres-galets .galet-carte figure { width: min(40vw, 160px); }

/* ---------- les cabines (page) ---------- */
.cabines-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cabines-collage figure { aspect-ratio: 1; }
.cabines-collage figure:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: var(--galet-2); }
.video-salon { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--galet-2); overflow: hidden; }
.video-salon video, .video-salon iframe { width: 100%; height: 100%; display: block; }
.horaires { display: grid; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; font-variant-numeric: tabular-nums; }
.horaires li.aujourd-hui { color: var(--cuivre); font-weight: 500; }
.infos { display: grid; gap: 40px; }
.infos-bloc { display: grid; gap: 14px; align-content: start; }
.infos-bloc .titre-bloc { font-size: clamp(22px, 3vw, 36px); }
.carnet { max-width: 760px; margin: 0 auto; background: color-mix(in srgb, var(--encre), transparent 92%); border-radius: 36px; padding: clamp(28px, 5vw, 60px); }
.contact .formulaire-titre { font-family: var(--serif); font-weight: 200; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.formulaire { display: grid; gap: 18px; }
.formulaire-intro { color: var(--gris); max-width: 52ch; }
.champ, .formulaire-champ { display: grid; gap: 6px; }
.champ label, .formulaire-champ label { font-size: 13px; color: var(--gris); }
.champ input, .champ textarea, .champ select, .formulaire-champ input, .formulaire-champ textarea, .formulaire-champ select {
    font: inherit; font-size: 16px; color: var(--encre); background: color-mix(in srgb, var(--encre), transparent 92%); border: 1px solid transparent; border-radius: 20px; padding: 13px 16px; width: 100%; transition: border-color 300ms, background 300ms;
}
.clair .champ input, .clair .champ textarea, .clair .formulaire-champ input, .clair .formulaire-champ textarea, .clair .formulaire-champ select { color: var(--nuit); background: var(--blanc); }
.champ textarea, .formulaire-champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus { outline: none; border-color: var(--cuivre); }
.champ-case, .formulaire-case { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gris); }
.champ-case input, .formulaire-case input { accent-color: var(--cuivre-fonce); width: 16px; height: 16px; margin-top: 3px; flex: none; }
.formulaire-erreur { font-size: 13px; color: #d9a49c; }
.formulaire-merci { font-family: var(--serif); font-weight: 300; font-size: 24px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 13px; color: var(--gris); }

/* ---------- gestion d'un rendez-vous : la séance ---------- */
.seance { max-width: 680px; margin: 0 auto; background: color-mix(in srgb, var(--encre), transparent 92%); border-radius: 36px; padding: clamp(24px, 4vw, 44px); display: grid; gap: 20px; }
.seance + .seance { margin-top: 16px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--encre), transparent 88%); justify-self: start; }
.pastille::before { content: ""; width: 10px; height: 8px; border-radius: var(--galet-1); background: var(--gris); }
.pastille-ok::before { background: var(--cuivre); }
.pastille-attente::before { background: var(--peau); }
.pastille-non::before { background: #d9a49c; }
.recap-date { font-family: var(--serif); font-weight: 200; font-size: clamp(28px, 4.5vw, 46px); line-height: 1.05; }
.recap-date em { font-style: italic; color: var(--cuivre); }
.recap-lignes { display: grid; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.recap-lignes li span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.recap-lignes .recap-total { border-bottom: 0; }
.recap-lignes .recap-total span:last-child { font-family: var(--serif); font-size: 24px; font-weight: 300; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux { display: grid; gap: 10px; }
.jour-creneaux h3 { font-family: var(--serif); font-weight: 300; font-size: 20px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 10px 16px; border: 1px solid var(--ligne-forte); border-radius: 999px; background: transparent; font-weight: 500; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 300ms, color 300ms, border-color 300ms; color: inherit; }
.heure:hover { border-color: var(--cuivre); }
.heure.choisie { background: var(--cuivre); color: var(--nuit); border-color: var(--cuivre); }

/* ---------- pied de page : le galet ---------- */
.pied { padding: clamp(80px, 11vw, 160px) var(--marge) 32px; }
.pied-galet { max-width: 880px; margin: 0 auto; background: var(--nuit); border-radius: var(--galet-2); padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px); display: grid; gap: 20px; justify-items: center; text-align: center; position: relative; overflow: hidden; }
.pied-galet::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; left: 50%; top: -40%; transform: translateX(-50%); background: var(--lueur); pointer-events: none; }
.pied-galet > * { position: relative; }
.pied-nom { font-family: var(--serif); font-weight: 200; font-size: clamp(44px, 8vw, 110px); line-height: 1; letter-spacing: 0.04em; font-variant-caps: small-caps; }
.pied-baseline { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--gris); max-width: 40ch; }
.pied-lignes { display: grid; gap: 6px; font-size: 14px; }
.pied-lignes a { text-decoration: none; }
.pied-horaires { display: grid; gap: 3px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; width: 100%; max-width: 320px; margin: 4px auto 0; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; }
.pied-horaires li.aujourd-hui { color: var(--cuivre); }
.pied-bas { max-width: var(--largeur); margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; color: var(--gris); }
.pied-bas nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--encre); }

/* ---------- réglages d'accessibilité et d'édition ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .souffle-cercle::before, .souffle-cercle::after { animation: none; transform: scale(0.95); }
}
body.mode-edition .corps-listes > *, body.mode-edition .cairn-mots > * { display: grid; }
body.mode-edition .galet-carte figure { transform: none; }

/* ============================================================
   ÉCRANS PLUS LARGES
   ============================================================ */
@media (min-width: 700px) {
    .souffle-bas { grid-template-columns: 1fr 1fr auto; align-items: center; }
    .corps-scene { grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
    .cabine-interieur { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
    .cabine-tete { grid-column: 1 / -1; }
    .cabine-note { grid-column: 1 / -1; }
    .galets-liste { grid-template-columns: repeat(2, 1fr); }
    .cairn-scene { grid-template-columns: 240px 1fr; gap: 60px; align-items: center; }
    .huiles-liste { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .huile { grid-template-columns: 56px 1fr; border-top: 1px solid var(--ligne); }
    .huile:last-child { border-bottom: 0; }
    .galerie { grid-template-columns: repeat(2, 1fr); }
    .fiche { grid-template-columns: 220px 1fr; gap: 30px; }
    .fiche figure { width: 100%; }
    .praticienne-tete { grid-template-columns: 340px 1fr; gap: 56px; }
    .tarifs-praticienne { grid-template-columns: 1fr 1fr; }
    .infos { grid-template-columns: repeat(3, 1fr); }
    .pied-lignes { grid-template-columns: repeat(2, auto); gap: 10px 32px; }
}

@media (min-width: 1000px) {
    :root { --entete: 84px; }
    .navigation { display: flex; }
    .entete-tel { display: inline; }
    .burger { display: none; }
    .menu-mobile { display: none; }
    .souffle-bas { grid-template-columns: 1fr 1fr 1fr auto; }
    .galets-liste { grid-template-columns: repeat(4, 1fr); align-items: start; }
    .galet-carte:nth-child(2) { margin-top: 50px; }
    .galet-carte:nth-child(4) { margin-top: 30px; }
    .famille { grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
    .famille-tete { position: sticky; top: calc(var(--entete) + 90px); }
    .massages { gap: 0; }
    .massage { grid-template-columns: 96px 1fr; }
    .anneau { width: 96px; height: 96px; }
    .tete-page-interieur { grid-template-columns: 1fr 1fr; align-items: end; }
    .pied-lignes { grid-template-columns: repeat(3, auto); }
}