/* NACRIA – Skin Science Lab — feuille de style du site public
   Univers : nacre, nude, champagne, or, blanc cassé. Titres Cormorant Garamond, texte Jost (polices hébergées sur le site). */

@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --creme: #fbf7f1;
  --nacre: #f5ede3;
  --nude: #ecdfd0;
  --champagne: #e6d3b3;
  --rose: #ecd5cb;
  --or: #b08d57;
  --or-clair: #d4b886;
  --or-texte: #85653a;        /* or assez foncé pour être lisible sur fond clair */
  --cacao: #2f2722;
  --taupe: #3e342c;
  --taupe-doux: #6a5c4f;
  --ligne: #e4d6c4;
  --blanc: #fffdf9;
  --erreur: #9b3b2e;
  --succes: #4d6b4a;
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 4px;
  --ombre: 0 18px 50px -24px rgba(62, 52, 44, .35);
  --largeur: 1180px;
  --gouttiere: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--taupe);
  font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--taupe); }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
::selection { background: var(--champagne); color: var(--cacao); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.12; color: var(--cacao); margin: 0 0 .6em; letter-spacing: .005em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 400; }
h4 { font-size: 1.3rem; font-weight: 500; }
p { margin: 0 0 1.1em; }
em { font-style: italic; }

.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--cacao); color: var(--creme); padding: .6em 1em; z-index: 100; }
.lien-evitement:focus { left: 8px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.etroit { max-width: 780px; }
.section { padding: clamp(64px, 10vw, 128px) 0; position: relative; }
.section--nacre { background: var(--nacre); }
.section--nude { background: linear-gradient(180deg, var(--nacre), var(--nude)); }
.centre { text-align: center; }

.surtitre {
  display: inline-flex; align-items: center; gap: .9em; font-family: var(--sans); font-weight: 400;
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or-texte); margin-bottom: 1.4em;
}
.surtitre::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.centre .surtitre::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.chapeau { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--taupe-doux); max-width: 46em; }
.centre .chapeau { margin-left: auto; margin-right: auto; }
.texte-riche ul { list-style: none; padding: 0; margin: 0 0 1.2em; }
.texte-riche li { position: relative; padding-left: 1.6em; margin-bottom: .7em; }
.texte-riche li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--or-clair) 60%, var(--or)); }

/* ---------------------------------------------------------------- boutons */
.btn {
  --fond: var(--cacao); --texte: var(--creme);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: .9em 2em;
  font-family: var(--sans); font-weight: 400; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--texte); background: var(--fond); border: 1px solid var(--fond); border-radius: 999px; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .4s, border-color .4s, transform .4s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-101%);
  background: linear-gradient(110deg, var(--or) 0%, var(--or-clair) 50%, var(--or) 100%); transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
.btn:hover, .btn:focus-visible { color: var(--cacao); border-color: var(--or-clair); }
.btn:hover::after, .btn:focus-visible::after { transform: none; }
.btn svg { width: 18px; height: 18px; }
.btn--contour { --fond: transparent; --texte: var(--cacao); border-color: var(--or); }
.btn--clair { --fond: var(--creme); --texte: var(--cacao); }
.btn--petit { min-height: 42px; padding: .6em 1.4em; font-size: .74rem; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.centre .groupe-boutons { justify-content: center; }
.lien-fleche { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--or-texte); font-weight: 400; }
.lien-fleche svg { width: 18px; height: 18px; transition: transform .3s; }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- annonce + en-tête */
.annonce { margin: 0; background: var(--cacao); color: var(--champagne); text-align: center; font-size: .8rem; letter-spacing: .08em;
  padding: .55em var(--gouttiere); }
.annonce a { color: var(--blanc); }
.entete { position: sticky; top: 0; z-index: 50; transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.entete.est-defile, .entete--plein { background: rgba(251, 247, 241, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--ligne); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.marque { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cacao); }
.marque__embleme { width: 46px; height: 46px; color: var(--or); flex: none; }
.marque__mots { display: flex; flex-direction: column; line-height: 1; }
.marque__nom { font-family: var(--serif); font-size: 1.75rem; letter-spacing: .34em; font-weight: 400; margin-right: -.34em; }
.marque__sous { font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--or-texte); margin-top: 6px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav__liste { display: flex; gap: clamp(14px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__lien { position: relative; text-decoration: none; color: var(--taupe); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 400; padding: .5em 0; white-space: nowrap; }
.nav__lien::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--or); transition: left .35s, right .35s; }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { left: 0; right: 0; }
.nav__lien[aria-current="page"] { color: var(--cacao); }
.bouton-menu { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; color: var(--cacao); cursor: pointer; }
.bouton-menu svg { width: 28px; height: 28px; }

@media (max-width: 1020px) {
  .bouton-menu { display: inline-flex; }
  .js .nav { position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: center; gap: 36px;
    background: radial-gradient(120% 80% at 70% 10%, var(--blanc), var(--nacre) 55%, var(--nude));
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  .js .nav.est-ouvert { opacity: 1; visibility: visible; }
  .js .nav__liste { flex-direction: column; align-items: center; gap: 22px; }
  .js .nav__lien { font-family: var(--serif); font-size: 2rem; letter-spacing: .04em; text-transform: none; font-weight: 300; }
  .nav__fermer { position: absolute; top: 22px; right: var(--gouttiere); }
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .entete__barre { flex-wrap: wrap; padding: 12px 0; }
}
@media (min-width: 1021px) { .nav__fermer { display: none; } }

/* ---------------------------------------------------------------- héros (accueil) */
.heros { position: relative; overflow: hidden; margin-top: -84px; padding-top: 84px; min-height: min(92vh, 900px); display: flex; align-items: center;
  background: radial-gradient(120% 90% at 85% 20%, #fffaf4 0%, var(--nacre) 45%, var(--nude) 100%); }
.heros::before {   /* reflets irisés de la nacre (dégradés doux, sans flou : léger à afficher) */
  content: ""; position: absolute; inset: -25%; pointer-events: none; opacity: .7; will-change: transform;
  background:
    radial-gradient(38% 30% at 30% 30%, rgba(246, 217, 207, .9), transparent 70%),
    radial-gradient(34% 28% at 72% 36%, rgba(227, 226, 245, .85), transparent 70%),
    radial-gradient(36% 30% at 56% 74%, rgba(215, 235, 232, .7), transparent 70%),
    radial-gradient(30% 26% at 22% 76%, rgba(247, 236, 210, .9), transparent 70%);
  animation: derive 40s ease-in-out infinite alternate;
}
@keyframes derive { to { transform: translate(6%, -4%) rotate(12deg); } }
.heros::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/nacre.webp") center / cover; opacity: .12; }
@keyframes irisation { to { transform: rotate(360deg); } }
.heros__grille { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 80px); align-items: center;
  padding-top: clamp(40px, 8vw, 90px); padding-bottom: clamp(56px, 8vw, 110px); }
.heros h1 { margin-bottom: .35em; }
.heros h1 em { font-style: italic; color: var(--or-texte); }
.heros__concept { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--taupe-doux); max-width: 32em; margin-bottom: 2.2em; }
.heros__signature { margin-top: 2.6em; display: flex; align-items: center; gap: 16px; color: var(--taupe-doux); font-size: .85rem; letter-spacing: .08em; }
.heros__signature span { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--or-texte); letter-spacing: 0; }
.heros__visuel { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; }
.heros__halo { position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, #fbf3ea 35%, rgba(236, 223, 208, .4) 70%, transparent 72%); }
.heros__nautile { position: absolute; inset: 0; color: var(--or); width: 100%; height: 100%; filter: drop-shadow(0 10px 22px rgba(176, 141, 87, .18)); }
.heros__anneau { position: absolute; inset: 2%; border: 1px solid rgba(176, 141, 87, .35); border-radius: 50%; }
.heros__anneau--2 { inset: -4%; border-style: dashed; border-color: rgba(176, 141, 87, .2); animation: irisation 120s linear infinite; }
.cellule { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(236, 213, 203, .5) 55%, rgba(212, 184, 134, .25));
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .25); animation: flotter 9s ease-in-out infinite; }
.cellule::after { content: ""; position: absolute; width: 28%; height: 28%; left: 38%; top: 36%; border-radius: 50%; background: rgba(176, 141, 87, .28); }
.cellule--1 { width: 64px; height: 64px; left: 2%; top: 14%; }
.cellule--2 { width: 34px; height: 34px; right: 6%; top: 8%; animation-delay: -3s; }
.cellule--3 { width: 46px; height: 46px; right: 0; bottom: 18%; animation-delay: -6s; }
.cellule--4 { width: 22px; height: 22px; left: 14%; bottom: 8%; animation-delay: -1.5s; }
@keyframes flotter { 50% { transform: translateY(-14px) scale(1.04); } }

.nautile path { fill: none; stroke: currentColor; }
.trace .nautile path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 3.2s cubic-bezier(.6, 0, .2, 1) forwards; }
.trace .nautile .n-cloison { animation-duration: 1.4s; }
.trace .nautile path:nth-child(3) { animation-delay: 1.4s; } .trace .nautile path:nth-child(4) { animation-delay: 1.5s; }
.trace .nautile path:nth-child(5) { animation-delay: 1.6s; } .trace .nautile path:nth-child(6) { animation-delay: 1.7s; }
.trace .nautile path:nth-child(7) { animation-delay: 1.8s; } .trace .nautile path:nth-child(8) { animation-delay: 1.9s; }
.trace .nautile path:nth-child(9) { animation-delay: 2s; } .trace .nautile path:nth-child(10) { animation-delay: 2.1s; }
.trace .nautile path:nth-child(11) { animation-delay: 2.2s; } .trace .nautile path:nth-child(12) { animation-delay: 2.3s; }
.trace .nautile path:nth-child(13) { animation-delay: 2.4s; } .trace .nautile path:nth-child(14) { animation-delay: 2.5s; }
.trace .nautile path:nth-child(n+15) { animation-delay: 2.6s; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- bandeau des 3 piliers */
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--blanc); border: 1px solid var(--ligne);
  margin-top: -64px; position: relative; z-index: 2; box-shadow: var(--ombre); }
.pilier { padding: clamp(28px, 3.5vw, 44px); text-align: center; }
.pilier + .pilier { border-left: 1px solid var(--ligne); }
.pilier__icone { width: 54px; height: 54px; margin: 0 auto 18px; color: var(--or); }
.pilier h3 { font-size: 1.55rem; margin-bottom: .3em; }
.pilier p { color: var(--taupe-doux); font-size: .97rem; margin: 0; }

/* ---------------------------------------------------------------- présentation */
.duo { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.duo--inverse { grid-template-columns: 1.1fr .9fr; }
.duo--inverse > :first-child { order: 2; }
.portrait { position: relative; aspect-ratio: 4 / 5; }
.portrait__cadre { position: absolute; inset: 0; border-radius: 240px 240px var(--rayon) var(--rayon); overflow: hidden; background: var(--nude); }
.portrait__cadre img { width: 100%; height: 100%; object-fit: cover; }
.portrait__filet { position: absolute; inset: -16px 16px 16px -16px; border: 1px solid var(--or-clair); border-radius: 240px 240px var(--rayon) var(--rayon); }
.portrait__pastille { position: absolute; right: -18px; bottom: 34px; background: var(--blanc); padding: 18px 22px; box-shadow: var(--ombre);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--taupe-doux); max-width: 220px; }
.portrait__pastille strong { display: block; font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--cacao); font-weight: 400; }
.parcours { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 0; padding: 0; list-style: none; }
.parcours li { border: 1px solid var(--ligne); background: var(--blanc); border-radius: 999px; padding: .35em 1em; font-size: .82rem; color: var(--taupe-doux); }

/* ---------------------------------------------------------------- citation */
.citation { position: relative; text-align: center; padding: clamp(80px, 12vw, 150px) 0; overflow: hidden;
  background: linear-gradient(135deg, var(--cacao), #46392f 60%, #57463a); color: var(--champagne); }
.citation::before { content: ""; position: absolute; inset: 0; background: url("../img/nacre.webp") center / cover; opacity: .07; }
.citation__nautile { position: absolute; width: 520px; height: 520px; right: -120px; top: 50%; transform: translateY(-50%); color: var(--or); opacity: .16; }
.citation blockquote { position: relative; margin: 0 auto; max-width: 900px; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.25; color: var(--blanc); }
.citation blockquote::before { content: "“"; display: block; font-size: 4em; line-height: .5; color: var(--or-clair); margin-bottom: .2em; font-style: normal; }
.citation cite { display: block; margin-top: 1.6em; font-family: var(--sans); font-style: normal; font-size: .78rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--or-clair); }

/* ---------------------------------------------------------------- cartes « expertise / expérience » */
.cartes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.carte-texte { background: var(--blanc); border: 1px solid var(--ligne); padding: clamp(30px, 4vw, 56px); position: relative; overflow: hidden; }
.carte-texte__icone { width: 52px; height: 52px; color: var(--or); margin-bottom: 22px; }
.carte-texte__fond { position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; color: var(--champagne); opacity: .5; }
.carte-texte > * { position: relative; }

/* ---------------------------------------------------------------- aperçu des soins (accueil) */
.soins-apercu { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }
.vedette { position: relative; padding: clamp(32px, 4.5vw, 60px); color: var(--creme); overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(130% 100% at 100% 0%, #5c4a3c, var(--cacao)); }
.vedette::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(212, 184, 134, .35); pointer-events: none; }
.vedette h3 { color: var(--blanc); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.vedette .surtitre { color: var(--or-clair); }
.vedette p { color: rgba(251, 247, 241, .82); }
.vedette__prix { display: flex; align-items: baseline; gap: 18px; margin: auto 0 26px; padding-top: 18px; font-family: var(--serif); }
.vedette__prix strong { font-size: 3.4rem; font-weight: 300; color: var(--or-clair); line-height: 1; }
.vedette__prix span { font-size: 1.2rem; color: var(--champagne); }
.vedette__nautile { position: absolute; right: -50px; top: -40px; width: 260px; height: 260px; color: var(--or); opacity: .22; }
.liste-soins { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.liste-soins li { border-bottom: 1px solid var(--ligne); }
.liste-soins a { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 22px 6px; text-decoration: none; color: inherit; transition: background .3s, padding .3s; }
.liste-soins a:hover { background: var(--blanc); padding-left: 16px; }
.liste-soins__nom { font-family: var(--serif); font-size: 1.55rem; color: var(--cacao); line-height: 1.2; }
.liste-soins__prix { font-family: var(--serif); font-size: 1.5rem; color: var(--or-texte); }
.liste-soins__meta { grid-column: 1 / -1; font-size: .86rem; color: var(--taupe-doux); }

/* ---------------------------------------------------------------- avis */
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.avis { background: var(--blanc); border: 1px solid var(--ligne); padding: 34px 32px 28px; margin: 0; display: flex; flex-direction: column; }
.avis__etoiles { display: flex; gap: 4px; color: var(--or); margin-bottom: 16px; }
.avis__etoiles svg { width: 16px; height: 16px; }
.avis blockquote { margin: 0 0 20px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; font-style: italic; color: var(--cacao); }
.avis figcaption { margin-top: auto; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-doux); }
.avis figcaption span { display: block; letter-spacing: .02em; text-transform: none; font-size: .85rem; margin-top: 2px; }

/* ---------------------------------------------------------------- appel final */
.appel { text-align: center; background: radial-gradient(90% 120% at 50% 0%, var(--blanc), var(--nacre) 60%, var(--nude)); overflow: hidden; }
.appel__nautile { width: 90px; height: 90px; color: var(--or); margin: 0 auto 26px; }

/* ---------------------------------------------------------------- en-tête des pages intérieures */
.bandeau { position: relative; overflow: hidden; margin-top: -84px; padding: calc(84px + clamp(56px, 9vw, 110px)) 0 clamp(56px, 8vw, 96px);
  background: radial-gradient(110% 120% at 90% 0%, #fffaf4, var(--nacre) 50%, var(--nude)); text-align: center; }
.bandeau::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 30%, rgba(246, 217, 207, .8), transparent 70%),
    radial-gradient(40% 60% at 80% 60%, rgba(227, 226, 245, .7), transparent 70%); }
.bandeau__nautile { position: absolute; width: 420px; height: 420px; left: -110px; bottom: -170px; color: var(--or); opacity: .18; }
.bandeau .conteneur { position: relative; }
.bandeau h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 18em; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- approche : étapes */
.etapes { counter-reset: etape; display: grid; gap: clamp(56px, 8vw, 100px); }
.etape { display: grid; grid-template-columns: 180px 1fr; gap: clamp(20px, 5vw, 70px); align-items: start; }
.etape__num { font-family: var(--serif); font-weight: 300; font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: .8; color: transparent;
  -webkit-text-stroke: 1px var(--or); position: sticky; top: 120px; }
.etape__num small { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or-texte);
  -webkit-text-stroke: 0; margin-top: 18px; }

/* Lampe de Wood interactive */
.wood { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px;
  background: var(--cacao); color: var(--champagne); padding: clamp(24px, 4vw, 48px); }
.wood h3 { color: var(--blanc); }
.wood__zone { --x: 50%; --y: 50%; --r: 28%; position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: crosshair; touch-action: none;
  box-shadow: 0 0 0 1px rgba(212, 184, 134, .4), 0 0 0 12px rgba(212, 184, 134, .06); }
.wood__peau, .wood__uv { position: absolute; inset: 0; }
.wood__peau { background:
  radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 40%),
  radial-gradient(circle, rgba(150, 105, 80, .25) 1.2px, transparent 1.8px) 0 0 / 14px 14px,
  radial-gradient(circle, rgba(150, 105, 80, .18) 1px, transparent 1.6px) 7px 7px / 14px 14px,
  linear-gradient(135deg, #f0d6c3, #e4bfa6 60%, #d8ad92); }
.wood__uv { background:
  radial-gradient(circle at 26% 34%, #ff6a3d 0 2.5%, transparent 3.2%),
  radial-gradient(circle at 31% 40%, #ff7e4a 0 1.6%, transparent 2.3%),
  radial-gradient(circle at 63% 62%, #ff6a3d 0 2%, transparent 2.7%),
  radial-gradient(circle at 58% 28%, #fff1d6 0 5%, transparent 9%),
  radial-gradient(ellipse at 50% 46%, rgba(255, 214, 120, .55) 0 10%, transparent 18%),
  radial-gradient(circle at 72% 44%, #3a1d14 0 3%, transparent 4.5%),
  radial-gradient(circle at 40% 72%, #3a1d14 0 2.2%, transparent 3.4%),
  radial-gradient(ellipse at 24% 66%, rgba(93, 40, 160, .9) 0 9%, transparent 16%),
  radial-gradient(ellipse at 76% 74%, rgba(93, 40, 160, .8) 0 7%, transparent 13%),
  radial-gradient(circle, rgba(140, 120, 255, .35) 1.2px, transparent 1.8px) 0 0 / 14px 14px,
  radial-gradient(circle at 50% 50%, #4c3a9a, #2b1f63 70%, #1c1440);
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--r) - 6%), transparent var(--r));
  mask-image: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--r) - 6%), transparent var(--r)); }
.wood__zone.est-allume .wood__uv { -webkit-mask-image: none; mask-image: none; }
.wood__aide { font-size: .85rem; color: rgba(230, 211, 179, .75); margin: 14px 0 0; text-align: center; }
.legende-wood { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.legende-wood li { display: flex; gap: 14px; align-items: center; font-size: .95rem; }
.legende-wood i { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.uv-sain { background: #4c3a9a; color: #4c3a9a; } .uv-desh { background: #7a3fd0; color: #7a3fd0; }
.uv-acnes { background: #ff6a3d; color: #ff6a3d; } .uv-kera { background: #fff1d6; color: #fff1d6; }
.uv-sebum { background: #ffd678; color: #ffd678; } .uv-pig { background: #3a1d14; color: #a0705a; box-shadow: 0 0 0 1px #a0705a; }

/* Fiche sur mesure (exemple visuel) */
.fiche { background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); padding: clamp(26px, 3.5vw, 44px); position: relative;
  max-width: 520px; justify-self: center; width: 100%; transform: rotate(-1.2deg); }
.fiche::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ligne); pointer-events: none; }
.fiche__tete { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ligne); padding-bottom: 14px; margin-bottom: 18px; }
.fiche__tete strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; letter-spacing: .2em; }
.fiche__tete span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-texte); }
.fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: .92rem; }
.fiche dt { color: var(--taupe-doux); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding-top: .3em; }
.fiche dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--cacao); border-bottom: 1px dotted var(--ligne); }
.actifs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.actifs span { font-size: .75rem; letter-spacing: .08em; padding: .3em .9em; border-radius: 999px; background: var(--nacre); border: 1px solid var(--champagne); }
.fiche__mention { position: absolute; top: -14px; right: 22px; background: var(--or); color: var(--blanc); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; padding: .35em .9em; }

.encadre { border: 1px solid var(--or-clair); padding: clamp(26px, 4vw, 44px); position: relative; background: var(--blanc); }
.encadre__titre { position: absolute; top: -.85em; left: 28px; background: var(--creme); padding: 0 12px; font-size: .78rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--or-texte); }
.section--nacre .encadre__titre { background: var(--nacre); }

/* ---------------------------------------------------------------- soins */
.carte-vedette { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--cacao); color: var(--creme); position: relative; overflow: hidden; }
.carte-vedette__texte { padding: clamp(32px, 5vw, 64px); position: relative; z-index: 1; }
.carte-vedette__texte h2 { color: var(--blanc); font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.carte-vedette__texte p { color: rgba(251, 247, 241, .82); }
.carte-vedette__cote { padding: clamp(32px, 5vw, 64px); background: rgba(255, 255, 255, .04); border-left: 1px solid rgba(212, 184, 134, .25); display: flex; flex-direction: column; }
.carte-vedette .surtitre { color: var(--or-clair); }
.carte-vedette ol { color: rgba(251, 247, 241, .9); }
.carte-vedette ol li::before { color: var(--or-clair); border-color: rgba(212, 184, 134, .5); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 1.4em; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta svg { width: 17px; height: 17px; color: var(--or); }
.prix-grand { font-family: var(--serif); font-weight: 300; font-size: 3.6rem; line-height: 1; color: var(--or-clair); }
.etapes-soin { list-style: none; counter-reset: s; padding: 0; margin: 0 0 1.6em; display: grid; gap: 12px; }
.etapes-soin li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: .97rem; line-height: 1.55; }
.etapes-soin li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--or-clair); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.05rem; color: var(--or-texte); }
.grille-soins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 28px; }
.soin { background: var(--blanc); border: 1px solid var(--ligne); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; position: relative;
  transition: box-shadow .4s, transform .4s; }
.soin:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.soin__tete { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: .2em; }
.soin h3 { margin: 0; }
.soin__prix { font-family: var(--serif); font-size: 2rem; color: var(--or-texte); white-space: nowrap; }
.soin__accroche { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--taupe-doux); margin-bottom: 1em; }
.soin__pourqui { background: var(--nacre); padding: 14px 18px; font-size: .95rem; margin-bottom: 1.2em; border-left: 2px solid var(--or-clair); }
.soin__pourqui strong { display: block; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--or-texte); font-weight: 500; }
.soin details { margin-bottom: 1.4em; border-top: 1px solid var(--ligne); }
.soin summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.soin summary::-webkit-details-marker { display: none; }
.soin summary svg { width: 18px; height: 18px; color: var(--or); transition: transform .3s; }
.soin details[open] summary svg { transform: rotate(45deg); }
.soin__pied { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note-soin { font-size: .88rem; color: var(--taupe-doux); font-style: italic; }

/* ---------------------------------------------------------------- produits */
.marque-partenaire { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.marque-partenaire__logo { aspect-ratio: 1; background: var(--blanc); border: 1px solid var(--ligne); display: grid; place-items: center; padding: 56px; position: relative; }
.marque-partenaire__logo::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--nacre); }
.molecule { width: 100%; max-width: 380px; color: var(--or); justify-self: center; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.galerie figure { margin: 0; overflow: hidden; background: var(--nude); }
.galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { padding: 10px 2px 0; font-size: .85rem; color: var(--taupe-doux); background: var(--creme); }
.bientot { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; border: 1px dashed var(--or-clair); padding: clamp(28px, 4vw, 48px); background: var(--blanc); }
.bientot svg { width: 110px; height: 110px; color: var(--or); }
.comparaisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.comparaison { margin: 0; }
.comparaison__cadre { --pos: 50%; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nude); }
.comparaison__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparaison__apres { clip-path: inset(0 0 0 var(--pos)); }
.comparaison__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--blanc); transform: translateX(-1px); pointer-events: none; }
.comparaison__ligne::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08d57' stroke-width='1.5'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.comparaison__etiquette { position: absolute; top: 14px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; background: rgba(255, 253, 249, .88);
  padding: .3em .8em; pointer-events: none; }
.comparaison__etiquette--avant { left: 14px; } .comparaison__etiquette--apres { right: 14px; }
.comparaison input[type="range"] { width: 100%; margin: 14px 0 6px; accent-color: var(--or); }
.comparaison figcaption { font-size: .9rem; color: var(--taupe-doux); }
html:not(.js) .comparaison__apres { position: static; clip-path: none; }

/* ---------------------------------------------------------------- formulaires */
.grille-contact { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.formulaire { background: var(--blanc); border: 1px solid var(--ligne); padding: clamp(26px, 4vw, 50px); }
.formulaire h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label, .champ legend { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); font-weight: 400; }
.champ .facultatif { text-transform: none; letter-spacing: 0; color: var(--taupe-doux); font-size: .82rem; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="date"], .champ select, .champ textarea {
  font: inherit; font-size: 1rem; color: var(--cacao); background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: .8em 1em; width: 100%; transition: border-color .3s, background .3s, box-shadow .3s; }
.champ textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or); background: var(--blanc); box-shadow: 0 0 0 3px rgba(176, 141, 87, .15); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.erreur-champ { color: var(--erreur); font-size: .88rem; }
.aide { font-size: .85rem; color: var(--taupe-doux); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; line-height: 1.55; cursor: pointer; }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--or); flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alerte { padding: 14px 18px; border-left: 3px solid var(--erreur); background: #f8ebe7; color: var(--erreur); margin-bottom: 22px; }
.alerte--info { border-color: var(--or); background: var(--nacre); color: var(--taupe); }
fieldset.champ { border: 0; padding: 0; margin: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choix label { text-transform: none; letter-spacing: 0; font-size: .95rem; position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-block; padding: .5em 1.1em; border: 1px solid var(--ligne); border-radius: 999px; background: var(--creme); transition: all .25s; }
.choix input:checked + span { background: var(--cacao); border-color: var(--cacao); color: var(--creme); }
.choix input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.choix label:hover span { border-color: var(--or); }

.infos { display: grid; gap: 22px; }
.info-carte { background: var(--nacre); padding: 28px; position: relative; }
.info-carte--sombre { background: var(--cacao); color: var(--champagne); }
.info-carte--sombre h3 { color: var(--blanc); }
.info-carte h3 { font-size: 1.6rem; }
.info-carte p:last-child { margin-bottom: 0; }
.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.coordonnees li { display: flex; gap: 14px; align-items: flex-start; }
.coordonnees svg { width: 20px; height: 20px; color: var(--or); flex: none; margin-top: 4px; }
.horaires { width: 100%; border-collapse: collapse; font-size: .92rem; }
.horaires th { text-align: left; font-weight: 400; padding: 6px 0; }
.horaires td { text-align: right; color: var(--taupe-doux); padding: 6px 0; }
.horaires tr + tr { border-top: 1px solid var(--ligne); }

/* ---------------------------------------------------------------- questionnaire */
.questionnaire-section { border-top: 1px solid var(--ligne); padding-top: 34px; margin-top: 34px; }
.questionnaire-section h2 { font-size: 1.9rem; display: flex; align-items: center; gap: 14px; }
.questionnaire-section h2 span { font-family: var(--sans); font-size: .75rem; letter-spacing: .2em; color: var(--or-texte); border: 1px solid var(--or-clair);
  border-radius: 50%; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: none; }
.questionnaire-section .champ { margin-bottom: 22px; }
.questionnaire-section .champ > label, .questionnaire-section legend { text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--cacao); }

/* ---------------------------------------------------------------- réservation */
.etapes-resa { display: flex; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0 0 48px; counter-reset: r; flex-wrap: wrap; }
.etapes-resa li { counter-increment: r; display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-doux); padding: 6px 14px; }
.etapes-resa li::before { content: counter(r); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ligne); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1rem; letter-spacing: 0; }
.etapes-resa li.fait::before { background: var(--or-clair); border-color: var(--or-clair); color: var(--cacao); }
.etapes-resa li.actuel { color: var(--cacao); }
.etapes-resa li.actuel::before { background: var(--cacao); border-color: var(--cacao); color: var(--creme); }
.choix-soins { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.choix-soin { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--blanc); border: 1px solid var(--ligne); text-decoration: none; color: inherit;
  transition: border-color .3s, box-shadow .3s; }
.choix-soin:hover, .choix-soin.est-choisi { border-color: var(--or); box-shadow: var(--ombre); }
.choix-soin.est-choisi { background: var(--nacre); }
.choix-soin strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--cacao); line-height: 1.2; }
.choix-soin span { font-size: .86rem; color: var(--taupe-doux); }
.mois-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.mois { background: var(--blanc); border: 1px solid var(--ligne); padding: 22px; }
.mois h3 { font-size: 1.4rem; text-align: center; }
.mois table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mois th { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-doux); font-weight: 400; padding-bottom: 8px; }
.mois td { text-align: center; padding: 3px; }
.mois td a, .mois td span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: .92rem; text-decoration: none; }
.mois td span { color: #b9ab9c; }
.mois td a { color: var(--cacao); background: var(--nacre); border: 1px solid var(--champagne); font-weight: 400; }
.mois td a:hover { background: var(--champagne); }
.mois td a[aria-current="date"] { background: var(--cacao); color: var(--creme); border-color: var(--cacao); }
.heures { display: flex; flex-wrap: wrap; gap: 10px; }
.heures a { padding: .55em 1.2em; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); text-decoration: none; color: var(--cacao); font-size: .95rem; }
.heures a:hover { border-color: var(--or); }
.heures a[aria-current="true"] { background: var(--cacao); color: var(--creme); border-color: var(--cacao); }
.recap { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 22px; background: var(--nacre); border-left: 2px solid var(--or); margin-bottom: 28px; }
.recap div { font-size: .9rem; } .recap strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.bloc-resa + .bloc-resa { margin-top: 56px; }
.bloc-resa h2 { font-size: 1.9rem; }

/* ---------------------------------------------------------------- merci / erreur / légal */
.page-simple { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.page-simple__nautile { width: 120px; height: 120px; color: var(--or); margin: 0 auto 30px; }
.legal h2 { font-size: 1.7rem; margin-top: 1.6em; }
.legal-infos { background: var(--nacre); padding: 22px 26px; margin-top: 2em; }

/* ---------------------------------------------------------------- pied de page */
.pied { background: var(--cacao); color: rgba(230, 211, 179, .85); padding: clamp(56px, 8vw, 90px) 0 30px; position: relative; overflow: hidden; font-size: .95rem; }
.pied__nautile { position: absolute; width: 440px; height: 440px; right: -100px; top: -80px; color: var(--or); opacity: .09; }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; position: relative; }
.pied .marque { color: var(--blanc); }
.pied .marque__sous { color: var(--or-clair); }
.pied h2 { font-family: var(--sans); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or-clair); font-weight: 400; margin-bottom: 1.4em; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: rgba(251, 247, 241, .86); text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied__slogan { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--champagne); margin: 22px 0; max-width: 22em; line-height: 1.4; }
.reseaux { display: flex; gap: 12px; }
.reseaux a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(212, 184, 134, .4); display: grid; place-items: center; transition: background .3s; }
.reseaux a:hover { background: var(--or); color: var(--cacao); }
.reseaux svg { width: 20px; height: 20px; }
.pied__bas { position: relative; border-top: 1px solid rgba(212, 184, 134, .2); margin-top: 50px; padding-top: 24px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: .8rem; color: rgba(230, 211, 179, .6); }
.pied__bas a { color: inherit; }
.pied__bas ul { display: flex; gap: 22px; }

/* ---------------------------------------------------------------- apparition au défilement */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1s cubic-bezier(.2, .6, .2, 1); }
.js .revele.est-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- adaptatif */
@media (max-width: 960px) {
  .heros__grille, .duo, .duo--inverse, .soins-apercu, .wood, .carte-vedette, .marque-partenaire, .grille-contact { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .heros__visuel { max-width: 320px; }
  .heros { min-height: 0; }
  .piliers { grid-template-columns: 1fr; margin-top: -40px; }
  .pilier + .pilier { border-left: 0; border-top: 1px solid var(--ligne); }
  .cartes-2, .grille-soins { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; margin: 0 auto; width: 100%; }
  .carte-vedette__cote { border-left: 0; border-top: 1px solid rgba(212, 184, 134, .25); }
  .marque-partenaire__logo { max-width: 260px; }
  .etape { grid-template-columns: 1fr; gap: 10px; }
  .etape__num { position: static; font-size: 4.2rem; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__grille > :first-child { grid-column: 1 / -1; }
  .fiche { transform: none; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .entete__barre { min-height: 72px; }
  .heros, .bandeau { margin-top: -72px; }
  .heros { padding-top: 72px; }
  .bandeau { padding-top: calc(72px + 48px); }
  .marque__embleme { width: 38px; height: 38px; }
  .marque__nom { font-size: 1.45rem; }
  .champs { grid-template-columns: 1fr; }
  .portrait__pastille { right: 8px; }
  .pied__grille { grid-template-columns: 1fr; }
  .bientot { grid-template-columns: 1fr; text-align: center; }
  .bientot svg { margin: 0 auto; }
  .btn { padding: .9em 1.5em; letter-spacing: .16em; }
  .vedette__prix strong, .prix-grand { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .trace .nautile path { stroke-dashoffset: 0; }
  .js .revele { opacity: 1; transform: none; }
}

@media print {
  .entete, .pied, .annonce, .heros__visuel { display: none; }
  body { background: #fff; }
}

/* Épaisseur des traits du nautile selon la taille d'affichage */
.marque__embleme .nautile path { stroke-width: 5.5; }
.marque__embleme circle { stroke-width: 7; }
.nautile--epais path { stroke-width: 3; }
.carte-texte h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.avis-grille + .centre { margin-top: 32px; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 400; }
.vedette .h3 { color: var(--blanc); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.soin .h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }

/* Retouches après revue visuelle */
.bandeau .chapeau { margin-left: auto; margin-right: auto; }
.champ label.case { text-transform: none; letter-spacing: 0; font-size: .93rem; color: var(--taupe); font-weight: 300; }
.etape__num { font-variant-numeric: lining-nums; }
.etape__num small { margin-top: 26px; }
.etape .duo { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.legende-wood span { flex: 1; }
.vedette .lien-fleche, .carte-vedette .lien-fleche { color: var(--or-clair); }
.vedette .lien-fleche:hover, .carte-vedette .lien-fleche:hover { color: var(--blanc); }
.cartes-2--haut { align-items: start; }
@media (max-width: 960px) { .etape .duo { grid-template-columns: 1fr; } }
.entete.menu-ouvert { backdrop-filter: none; -webkit-backdrop-filter: none; }