/* MelBeauty : système de design (concept « le trait ») */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  /* couleurs */
  --papier: #EFE5D8;
  --lait: #E4D4C1;
  --encre: #3A2A1F;
  --noisette: #73563F;
  --trait: #A88A70;          /* décor uniquement, jamais pour du texte */
  --filet: rgba(58, 42, 31, .16);
  --ombre: 0 30px 60px -30px rgba(58, 42, 31, .38);

  /* typographie */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* espacements */
  --gouttiere: clamp(16px, 5vw, 72px);
  --rayon-carte: 22px 22px 22px 2px;
  --rayon-btn: 999px;

  /* mouvement */
  --t-micro: 160ms;
  --t-std: 380ms;
  --sortie: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papier); color: var(--encre); font: 400 17px/1.65 var(--sans); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grain de papier */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .27 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > * { position: relative; z-index: 1; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border: 1px solid var(--encre); border-radius: var(--rayon-btn);
  background: transparent; font: 500 16px/1.2 var(--sans); color: var(--encre); text-decoration: none; text-align: center;
  transition: background-color var(--t-micro), color var(--t-micro), transform var(--t-micro); }
.btn:hover { background: var(--encre); color: var(--papier); }
.btn:active { transform: scale(.98); }
.btn.plein { background: var(--encre); color: var(--papier); }
.btn.plein:hover { background: var(--noisette); border-color: var(--noisette); }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.lien { font-size: 16px; color: var(--encre); }

/* ---------- en-tête ---------- */
.entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px var(--gouttiere); z-index: 20; }
.marque { font: italic 300 28px/1 var(--serif); letter-spacing: .005em; color: var(--encre); text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn), .nav button.nav-lien { font-size: 16px; text-decoration: none; background: none; border: 0; padding: 10px 0; }
.nav a:not(.btn):hover, .nav button.nav-lien:hover, .nav [aria-current="page"] { text-decoration: underline; }
.nav .btn { min-height: 44px; padding: 10px 22px; }
.menu-btn { display: none; }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; min-height: 44px; padding: 10px 20px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); padding: 8px var(--gouttiere) 24px; border-bottom: 1px solid var(--filet); box-shadow: var(--ombre); }
  .nav.ouvert { display: flex; }
  .nav a:not(.btn), .nav button.nav-lien { padding: 14px 0; border-bottom: 1px solid var(--filet); text-align: left; font: 300 24px/1.2 var(--serif); }
  .nav .btn { margin-top: 18px; }
}

/* ---------- éventail de traits ---------- */
.eventail { color: var(--trait); pointer-events: none; }
svg[data-motif] path { fill: none; stroke: currentColor; stroke-linecap: round; }

/* ---------- accueil ---------- */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  padding: clamp(24px, 6vh, 72px) var(--gouttiere) clamp(48px, 9vh, 110px); position: relative; overflow: hidden; min-height: calc(100svh - 92px); }
.accueil .eventail { position: absolute; right: -6vw; top: -4vh; width: min(58vw, 860px); z-index: -1; }
.accueil .lieu { font-size: 16px; color: var(--noisette); margin-bottom: 22px; }
.accueil h1 { font-weight: 200; font-family: var(--serif); }
.accueil h1 .petit { display: block; font: italic 300 clamp(26px, 3vw, 40px)/1.1 var(--serif); color: var(--noisette); margin-bottom: 6px; }
.accueil h1 .grand { display: block; white-space: nowrap; font-size: clamp(64px, 11.5vw, 184px); line-height: .9; letter-spacing: -.035em; }
.accueil h1 .coeur { font-size: .22em; letter-spacing: 0; vertical-align: .9em; margin-left: .15em; }
.accueil .actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 36px; }

/* présentation : texte centré, en une colonne, sans décor */
.presentation { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(80px, 15vh, 170px) var(--gouttiere) clamp(80px, 14vh, 160px); border-top: 1px solid var(--filet); }
.presentation > .etiquette { display: inline-block; border-top: 0; padding-top: 0; }
.accroche { max-width: 32ch; font: 300 clamp(32px, 4.3vw, 64px)/1.12 var(--serif); letter-spacing: -.018em; }
.colonnes { max-width: 54ch; margin-top: clamp(32px, 6vh, 60px); font: 300 clamp(20px, 1.7vw, 24px)/1.6 var(--serif); color: var(--encre); }
.colonnes p + p { margin-top: 18px; }
.colonnes p { text-wrap: pretty; }
.presentation .signature { margin-top: clamp(28px, 5vh, 52px); font: italic 300 clamp(24px, 2.4vw, 34px)/1.3 var(--serif); color: var(--noisette); }
.presentation .signature::before { content: ""; display: block; width: 56px; height: 1px; background: var(--trait); margin: 0 auto clamp(24px, 4vh, 40px); }

/* texte en boucle (avance avec le défilement) */
.defile { overflow: clip; padding: clamp(28px, 5vh, 56px) 0; border-top: 1px solid var(--filet); }
.piste { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content; font: italic 200 clamp(44px, 7vw, 112px)/1.1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.piste svg { width: clamp(44px, 5vw, 80px); color: var(--trait); flex-shrink: 0; }

/* grand menu (liste en italique, façon carte de soins) */
.menu-maison { padding: clamp(40px, 8vh, 96px) var(--gouttiere) clamp(64px, 12vh, 140px); border-top: 1px solid var(--filet); }
.menu-maison h2 { font: 400 16px/1.4 var(--sans); color: var(--noisette); margin-bottom: 18px; }
.menu-maison ul { list-style: none; padding: 0; }
.menu-maison li { border-bottom: 1px solid var(--filet); }
.entree { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 32px; width: 100%; padding: 22px 0; text-align: left;
  text-decoration: none; background: none; border: 0; color: var(--encre); }
.entree .titre { font: italic 200 clamp(36px, 6vw, 88px)/1 var(--serif); letter-spacing: -.02em; transition: transform var(--t-std) var(--sortie), color var(--t-micro); }
.entree .detail { font-size: 16px; color: var(--noisette); max-width: 30ch; text-align: right; }
.entree:hover .titre, .entree:focus-visible .titre { transform: translateX(18px); color: var(--noisette); }
@media (max-width: 700px) {
  .entree { grid-template-columns: 1fr; padding: 18px 0; }
  .entree .detail { text-align: left; }
  .entree:hover .titre { transform: none; }
}

@media (max-width: 900px) {
  .accueil { align-items: start; padding-top: 30vh; min-height: 0; }
  .accueil .eventail { width: 128vw; right: -42vw; top: -1vh; }
}

/* ---------- pages intérieures ---------- */
.tete-page { padding: clamp(24px, 6vh, 72px) var(--gouttiere) clamp(32px, 6vh, 64px); position: relative; overflow: hidden; }
.tete-page .eventail { position: absolute; right: -4vw; top: -6vh; width: min(40vw, 520px); z-index: -1; }
.tete-page h1 { font: 200 clamp(48px, 8vw, 120px)/.98 var(--serif); letter-spacing: -.03em; max-width: 14ch; }
.tete-page .chapo { max-width: 46ch; margin-top: 22px; font-size: 18px; }
@media (max-width: 700px) { .tete-page .eventail { width: 70vw; right: -24vw; opacity: .6; } }

/* ---------- prestations : titre fixe, cartes qui montent ---------- */
.categorie { position: relative; padding: 0 var(--gouttiere); border-top: 1px solid var(--filet); overflow-x: clip; }
.cat-titre { position: sticky; top: 0; height: 100svh; display: grid; place-content: center; text-align: center; z-index: 0; }
.cat-titre h2 { font: 200 clamp(60px, 11vw, 176px)/.92 var(--serif); letter-spacing: -.03em; }
.cat-titre p { margin-top: 18px; color: var(--noisette); font-size: 17px; }
.cartes { list-style: none; padding: 0; margin-top: -100svh; padding-bottom: 36svh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.cartes > li { width: min(420px, 42%); margin-top: 30svh; }
.cartes > li:first-child { margin-top: 72svh; }
.cartes > li:nth-child(odd) { align-self: flex-start; margin-left: 4vw; }
.cartes > li:nth-child(even) { align-self: flex-end; margin-right: 4vw; }
@media (max-width: 760px) {
  .cartes > li, .cartes > li:nth-child(odd), .cartes > li:nth-child(even) { width: 100%; max-width: 400px; align-self: center; margin-left: 0; margin-right: 0; margin-top: 26svh; }
  .cartes > li:first-child { margin-top: 64svh; }
  .cat-titre { height: 70svh; top: 10svh; }
  .cartes { margin-top: -70svh; }
}

.carte { position: relative; text-align: center; background: var(--lait); border-radius: var(--rayon-carte); padding: 28px 28px 26px; box-shadow: var(--ombre);
  transition: background-color var(--t-std), color var(--t-std); }
.carte .motif { width: 64px; margin: 0 auto 14px; color: var(--trait); }
.carte .etiquette { border: 0; padding: 0; margin-bottom: 8px; }
.carte h3 { font: italic 300 30px/1.12 var(--serif); }
.carte dl { display: flex; justify-content: center; gap: 32px; margin: 16px 0 22px; }
.carte dt { font-size: 14px; color: var(--noisette); }
.carte dd { font: italic 300 26px/1.2 var(--serif); }
.carte .pied { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.carte .fiche { font-size: 15px; color: var(--noisette); }
.carte.choisie { background: var(--encre); color: var(--papier); }
.carte.choisie dt, .carte.choisie .fiche, .carte.choisie .etiquette { color: var(--lait); }
.carte.choisie .btn { border-color: var(--papier); background: var(--papier); color: var(--encre); }
.carte.choisie .motif { color: var(--noisette); }

/* barre de sélection */
.selection { position: fixed; left: 50%; bottom: 16px; z-index: 30; width: min(720px, calc(100% - 24px)); transform: translate(-50%, calc(100% + 40px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; border-radius: 26px;
  background: var(--encre); color: var(--papier); box-shadow: 0 20px 50px -20px rgba(58, 42, 31, .6); transition: transform var(--t-std) var(--sortie); }
.selection:not(.visible) { visibility: hidden; transition: transform var(--t-std) var(--sortie), visibility 0s var(--t-std); }
.selection.visible { transform: translate(-50%, 0); }
.selection p { font-size: 16px; line-height: 1.35; }
.selection strong { font-weight: 600; }
.selection .btn { border-color: var(--papier); background: var(--papier); color: var(--encre); flex-shrink: 0; }
.selection .btn:hover { background: var(--lait); }
@media (max-width: 480px) { .selection { padding: 10px 10px 10px 18px; } .selection p { font-size: 15px; } .selection .btn { padding: 10px 16px; } }

/* ---------- module de réservation ---------- */
.reservation { padding: clamp(56px, 10vh, 120px) var(--gouttiere) clamp(80px, 14vh, 160px); border-top: 1px solid var(--filet); scroll-margin-top: 0; }
.reservation[hidden] { display: none; }
.resa-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; max-width: 1240px; margin: 0 auto; }
.recap { position: sticky; top: 24px; background: var(--lait); border-radius: var(--rayon-carte); padding: 28px; }
.recap h2 { font: italic 300 32px/1.1 var(--serif); margin-bottom: 14px; }
.recap ul { list-style: none; padding: 0; }
.recap li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 16px; }
.recap li span:last-child { white-space: nowrap; color: var(--noisette); }
.recap .total { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font: 300 22px/1.3 var(--serif); }
.recap .moment { margin-top: 16px; font-size: 16px; }
.recap .modifier { margin-top: 18px; background: none; border: 0; padding: 8px 0; text-decoration: underline; font-size: 15px; }
.jauge { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 14px; background: var(--papier); }
.jauge i { display: block; height: 100%; background: var(--noisette); border-right: 2px solid var(--lait); }
.jauge i:nth-child(even) { background: var(--encre); }

.etapes { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.etapes li { font-size: 15px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--filet); color: var(--noisette); }
.etapes li[aria-current="step"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.etapes li.faite { color: var(--encre); }
.panneau h3 { font: italic 200 clamp(36px, 4.4vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; margin-bottom: 8px; }
.panneau .aide { color: var(--noisette); margin-bottom: 24px; font-size: 16px; }
.panneau.entre { animation: entree var(--t-std) var(--sortie); }
@keyframes entree { from { opacity: 0; transform: translateY(12px); } }

/* calendrier */
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-tete strong { font: 300 26px/1.2 var(--serif); text-transform: capitalize; }
.cal-tete button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filet); background: transparent; font-size: 20px; }
.cal-tete button:hover:not([disabled]) { border-color: var(--encre); }
.cal-tete button[disabled] { opacity: .3; cursor: not-allowed; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.cal .jsem { text-align: center; font-size: 14px; color: var(--noisette); padding-bottom: 4px; }
.cal button { aspect-ratio: 1; min-height: 40px; border-radius: 12px; border: 1px solid transparent; background: var(--lait); font-size: 16px; }
.cal button:hover:not([disabled]) { border-color: var(--encre); }
.cal button[disabled] { background: transparent; color: rgba(58, 42, 31, .55); cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(58, 42, 31, .3); }
.cal button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }

/* créneaux */
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.creneaux button { min-height: 48px; border-radius: 14px; border: 1px solid var(--filet); background: var(--lait); font-size: 16px; }
.creneaux button:hover { border-color: var(--encre); }
.creneaux button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.vide { padding: 20px; background: var(--lait); border-radius: 14px; }

/* formulaire */
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 15px; font-weight: 500; }
.champ input { font: 400 17px/1.3 var(--sans); color: var(--encre); padding: 14px 16px; min-height: 52px; border-radius: 14px; border: 1px solid rgba(58, 42, 31, .62); background: #F6F0E8; }
.champ input:focus { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.champ input[aria-invalid="true"] { border-color: #8E2F1F; }
.champ .erreur { font-size: 14px; color: #8E2F1F; min-height: 0; }
.accord { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; margin-top: 22px; }
.accord input { font-size: 16px; width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--encre); }
.rappel { margin-top: 18px; font-size: 15px; color: var(--noisette); }
.actions-etape { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.retour { background: none; border: 0; padding: 10px 0; text-decoration: underline; font-size: 16px; }
@media (max-width: 900px) {
  .resa-grille { grid-template-columns: 1fr; }
  .recap { position: static; }
}
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }

.confirmation .grand-check { width: 64px; color: var(--noisette); margin-bottom: 18px; }
.mention-apercu { margin-top: 22px; padding: 14px 18px; border: 1px dashed var(--noisette); border-radius: 14px; font-size: 15px; }

/* ---------- indications ---------- */
.sommaire { padding: 0 var(--gouttiere) clamp(32px, 6vh, 56px); }
.sommaire ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sommaire a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 20px; border: 1px solid var(--filet); border-radius: 999px; text-decoration: none; font-size: 16px; }
.sommaire a:hover { border-color: var(--encre); }
.fiche-soin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); padding: clamp(48px, 9vh, 110px) var(--gouttiere); border-top: 1px solid var(--filet); scroll-margin-top: 12px; }
.fiche-soin .gauche { position: sticky; top: 28px; align-self: start; }
.fiche-soin h2 { font: 200 clamp(44px, 5.6vw, 84px)/1 var(--serif); letter-spacing: -.025em; }
.fiche-soin .sous-titre { font: 300 22px/1.3 var(--serif); color: var(--noisette); margin-top: 12px; }
.fiche-soin .gauche .motif { width: 120px; color: var(--trait); margin-top: 28px; }
.fiche-soin .gauche .btn { margin-top: 28px; }
.fiche-soin h3 { font: 400 26px/1.2 var(--serif); margin: 36px 0 12px; }
.fiche-soin .droite > h3:first-child { margin-top: 0; }
.fiche-soin p { max-width: 62ch; }
.fiche-soin p + p { margin-top: 12px; }
.fiche-soin ul { padding-left: 1.1em; max-width: 62ch; }
.fiche-soin li { padding: 3px 0; }
.fiche-soin li::marker { color: var(--noisette); }
.conseil { margin-top: 36px; background: var(--lait); border-radius: var(--rayon-carte); padding: 24px 26px; max-width: 62ch; }
.conseil p { font: italic 300 20px/1.5 var(--serif); }
@media (max-width: 900px) {
  .fiche-soin { grid-template-columns: 1fr; }
  .fiche-soin .gauche { position: static; }
  .fiche-soin .gauche .motif { display: none; }
}

/* ---------- FAQ ---------- */
.faq { padding: 0 var(--gouttiere) clamp(80px, 14vh, 160px); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq details:first-child { border-top: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 300 clamp(24px, 3vw, 34px)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--t-std) var(--sortie); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .reponse { padding: 0 0 26px; max-width: 62ch; }
.faq .reponse p + p { margin-top: 12px; }

/* ---------- pages texte (mentions, confidentialité) ---------- */
.texte-legal { padding: 0 var(--gouttiere) clamp(80px, 14vh, 160px); max-width: 860px; }
.texte-legal h2 { font: 400 26px/1.2 var(--serif); margin: 34px 0 10px; }
.texte-legal p + p { margin-top: 10px; }
.a-completer { background: #E8D2B8; padding: 0 4px; border-radius: 4px; }

/* ---------- contact (fenêtre) ---------- */
.contact { border: 0; padding: 0; width: min(520px, calc(100% - 32px)); max-height: calc(100svh - 32px); border-radius: var(--rayon-carte); background: var(--papier); color: var(--encre); box-shadow: 0 40px 90px -30px rgba(58, 42, 31, .6); }
.contact::backdrop { background: rgba(58, 42, 31, .45); }
.contact[open] { animation: entree var(--t-std) var(--sortie); }
.contact .dedans { padding: 32px 30px 28px; position: relative; }
.contact h2 { font: italic 200 48px/1 var(--serif); letter-spacing: -.02em; margin-bottom: 18px; }
.contact ul { list-style: none; padding: 0; }
.contact li { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.contact li span { font-size: 14px; color: var(--noisette); }
.contact li a, .contact li strong { font: 300 24px/1.3 var(--serif); }
.contact li .bientot { font: 400 16px/1.4 var(--sans); color: var(--encre); }
.contact .fermer { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filet); background: transparent; font-size: 22px; line-height: 1; }
.contact .fermer:hover { border-color: var(--encre); }

/* ---------- pied de page ---------- */
.pied-page { padding: 40px var(--gouttiere) 36px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 15px; }
.pied-page .marque { font-size: 24px; }
.pied-page nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied-page a, .pied-page button { text-decoration: none; background: none; border: 0; padding: 8px 0; font-size: 15px; }
.pied-page a:hover, .pied-page button:hover { text-decoration: underline; }
.page-rdv .pied-page { padding-bottom: 110px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* lien d'évitement clavier */
.evitement { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--encre); color: var(--papier); padding: 12px 20px; border-radius: 999px; text-decoration: none; }
.evitement:focus { top: 12px; }
main:focus { outline: none; }

/* place réservée aux cartes (créées par le script) : évite que le pied de page saute */
#prestations { min-height: 100svh; }

/* ---------- écriture façon Goldust ---------- */
/* petite étiquette de section : italique, capitales, sous un filet */
.etiquette { display: block; font: italic 600 12px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--noisette); padding-top: 14px; border-top: 1px solid var(--filet); margin-bottom: 26px; }
.menu-maison h2.etiquette { font: italic 600 12px/1.5 var(--sans); margin-bottom: 18px; }
.presentation > .etiquette { grid-column: 1 / -1; position: relative; z-index: 1; }
/* lien secondaire : cercle + flèche */
.cercle { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; font-size: 16px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; }
.cercle .rond-fleche { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; transition: background-color var(--t-micro), color var(--t-micro); flex-shrink: 0; }
.cercle svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cercle:hover .rond-fleche { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.cercle:hover { text-decoration: underline; }
.carte .cercle { min-height: 44px; font-size: 15px; }
.carte .cercle .rond-fleche { width: 36px; height: 36px; }
.carte.choisie .cercle:hover .rond-fleche { background: var(--papier); color: var(--encre); }
.presentation .cercle { grid-column: 2 / 9; margin-top: 28px; position: relative; z-index: 1; }

/* sommaire des indications : liste en ligne, italique géant, séparée par des points */
.sommaire ul.en-ligne { display: block; font: italic 200 clamp(30px, 4.6vw, 64px)/1.25 var(--serif); letter-spacing: -.015em; }
.sommaire ul.en-ligne li { display: inline; }
.sommaire ul.en-ligne li:not(:last-child)::after { content: "·"; margin: 0 .25em 0 .3em; color: var(--noisette); }
.sommaire ul.en-ligne a { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; font: inherit; text-decoration: none; }
.sommaire ul.en-ligne a:hover { color: var(--noisette); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

/* FAQ : titre à gauche, questions à droite */
.faq-bloc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); padding: 0 var(--gouttiere) clamp(80px, 14vh, 160px); }
.faq-bloc .gauche h2 { font: 200 clamp(36px, 4.2vw, 60px)/1.08 var(--serif); letter-spacing: -.02em; }
.faq-bloc .faq { padding: 0; max-width: none; }
@media (max-width: 900px) { .faq-bloc { grid-template-columns: 1fr; } }

/* panneau qui s'agrandit jusqu'à toute la largeur */
.defile { background: var(--lait); border-top: 0; }

/* appel final « Prendre rendez-vous » */
.appel { text-align: center; padding: clamp(80px, 16vh, 180px) var(--gouttiere); border-top: 1px solid var(--filet); }
.appel .etiquette { display: inline-block; border-top: 0; padding-top: 0; }
.appel a.grand-lien { display: block; font: 200 clamp(52px, 9vw, 150px)/1 var(--serif); letter-spacing: -.03em; text-decoration: none; color: var(--encre); }
.appel a.grand-lien:hover { color: var(--noisette); }
.appel nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-top: 34px; }
.appel nav a, .appel nav button { font: 300 22px/1.4 var(--serif); text-decoration: none; background: none; border: 0; padding: 8px 0; }
.appel nav a:hover, .appel nav button:hover { text-decoration: underline; }

/* texte en boucle en bas de page */
.boucle { overflow: clip; border-top: 1px solid var(--filet); padding: 22px 0; }
.boucle .rail { display: flex; width: max-content; animation: boucle 38s linear infinite; will-change: transform; }
.boucle .rail span { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); font: italic 200 clamp(40px, 6vw, 92px)/1.1 var(--serif); color: var(--noisette); white-space: nowrap; }
.boucle .rail svg { width: clamp(36px, 4vw, 60px); color: var(--trait); }
.boucle:hover .rail { animation-play-state: paused; }
@keyframes boucle { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .boucle .rail { animation: none; } }

/* défilement fluide (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* crédit et pied de page centré sur mobile */
.pied-page .credit { flex-basis: 100%; font-size: 14px; color: var(--noisette); }
.pied-page .credit a { text-decoration: underline; padding: 8px 0; font-size: 14px; color: var(--encre); }
@media (max-width: 700px) {
  .pied-page { flex-direction: column; justify-content: center; text-align: center; }
  .pied-page nav { justify-content: center; }
  .pied-page .credit { flex-basis: auto; }
}

.cercle:focus-visible { outline-offset: 6px; border-radius: 999px; }

/* illustration de l'œil fermé (créée pour MelBeauty avec Higgsfield, 28/10/2026) à la place de l'éventail */
.accueil .illustration { position: absolute; right: -2vw; top: -4vh; width: min(62vw, 900px); z-index: -1; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }
.accueil .illustration img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .accueil { padding-top: calc(min(118vw, 680px) * .74); }
  /* centré sans transform (la parallaxe GSAP utilise déjà transform) ; plus large que l'écran, les bords vides sont rognés */
  .accueil .illustration { top: -2vw; left: 50%; right: auto; width: min(118vw, 680px); margin-left: calc(min(118vw, 680px) / -2); }
}
.accueil .illustration .relief { position: absolute; inset: 0; width: 100%; height: 100%; }
/* vidéo d'arrivée par-dessus l'image : visible quand elle joue, puis fondu vers l'image fixe */
.accueil .illustration .ouverture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.accueil .illustration .ouverture.joue { opacity: 1; }
.accueil .illustration .ouverture.finie { opacity: 0; }

/* logo */
.marque img { display: block; height: 34px; width: auto; }
.pied-page .marque img { height: 30px; }

/* champ piège anti-robots (invisible pour les personnes) */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.piege input { font-size: 16px; }
#err-envoi { margin-top: 14px; }
.tete-page .chapo + .chapo { margin-top: 10px; font-size: 16px; color: var(--noisette); }

/* boutons et liens : pas de zoom au double-tap (le pincement pour zoomer reste possible) */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }