/* =====================================================================
   NVL BEAUTY — direction « luxe minimal »

   Le blanc domine. Photos franches, angles droits, beaucoup d'air.
   Typographie fine et discrète : Cormorant Garamond léger pour les titres,
   Jost pour le texte et les petites capitales espacées. Le marron du
   dossier sert d'encre et d'accent, jamais de décor.
   ===================================================================== */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/serif-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/serif-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/serif-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/texte-normal.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  --encre: #2b211b;
  --noisette: #765747;
  --nude: #c6ac97;
  --lin: #ede3d9;
  --ivoire: #faf7f3;
  --blanc: #ffffff;
  --doux: #7b6b61;
  --trait: rgba(43, 33, 27, .12);
  --or: #e9b95f;
  --or-clair: #ffe9b8;
  --nuit: #1e1612;
  --neon: "Tilt Neon", "Quicksand", "Helvetica Neue", sans-serif;
  --lueur: 0 0 4px rgba(255, 214, 140, .9), 0 0 14px rgba(233, 172, 72, .75), 0 0 36px rgba(233, 162, 60, .45), 0 0 70px rgba(233, 162, 60, .25);

  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --largeur: 1280px;
  --g: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5.5rem, 12vw, 11rem);
  --entete: 84px;
  --ease: cubic-bezier(.25, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--entete); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanc); color: var(--encre); font: 300 1rem/1.8 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.2em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.12; margin: 0; letter-spacing: 0; }
em { font-style: italic; }
strong { font-weight: 500; }
::selection { background: var(--lin); }
:focus-visible { outline: 1px solid var(--encre); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--g); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typographie ---------- */
.surtitre { display: block; font: 400 .68rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--doux); margin-bottom: 1.6rem; }
.titre { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.titre em { color: var(--noisette); }
.titre-page { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.centre { text-align: center; }
.centre .chapo { margin-inline: auto; }
.chapo { font-size: 1.06rem; color: var(--doux); max-width: 34rem; }

/* ---------- Boutons & liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: 1rem 2.2rem;
  font: 400 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--encre); cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.btn-plein { background: var(--encre); color: var(--blanc); }
.btn-plein:hover { background: var(--noisette); border-color: var(--noisette); }
.btn-contour { background: transparent; color: var(--encre); }
.btn-contour:hover { background: var(--encre); color: var(--blanc); }
.btn-petit { min-height: 2.7rem; padding: .8rem 1.5rem; }
.btn svg { width: 1.1em; height: 1.1em; }

.lien { font: 400 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; padding-bottom: .5rem; border-bottom: 1px solid currentColor; transition: color .3s; }
.lien:hover { color: var(--noisette); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; transition: box-shadow .4s; }
/* Fond porté par un pseudo-élément : l'en-tête ne doit pas devenir le
   repère du menu mobile en position fixed. */
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .97); }
.entete.defile { box-shadow: 0 1px 0 var(--trait); }
.entete-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--entete); gap: 2rem; }
.nav { display: flex; gap: 2rem; justify-self: start; }
.nav a { font: 400 .68rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; padding: .5rem 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.marque { text-decoration: none; text-align: center; line-height: 1; }
.marque-nom { display: block; font: 400 1.15rem/1 var(--sans); letter-spacing: .48em; text-transform: uppercase; margin-right: -.48em; }
.marque-sous { display: block; margin-top: .45rem; font: italic 300 .95rem/1 var(--serif); letter-spacing: .06em; color: var(--doux); }
.entete-droite { justify-self: end; display: flex; align-items: center; gap: 1.8rem; }
.entete-tel { font: 400 .68rem/1 var(--sans); letter-spacing: .2em; text-decoration: none; }
.burger { display: none; }

@media (max-width: 1180px) { .nav { gap: 1.3rem; } .entete-tel { display: none; } }
@media (max-width: 1000px) {
  :root { --entete: 66px; }
  .entete-inner { grid-template-columns: 44px 1fr 44px; gap: .5rem; }
  .entete-droite { display: none; }
  .marque-nom { font-size: .95rem; letter-spacing: .4em; margin-right: -.4em; }
  .marque-sous { font-size: .82rem; margin-top: .3rem; }
  .burger { display: block; grid-column: 1; grid-row: 1; width: 44px; height: 44px; margin-left: -10px; background: none; border: 0; cursor: pointer; position: relative; }
  .burger span { position: absolute; left: 10px; width: 22px; height: 1px; background: var(--encre); transition: transform .4s var(--ease); }
  .burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .marque { grid-column: 2; grid-row: 1; }
  .nav {
    position: fixed; inset: var(--entete) 0 0 0; z-index: 49; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem;
    background: var(--blanc); padding: 2rem var(--g) 7rem;
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
  }
  .nav.ouvert { opacity: 1; visibility: visible; }
  .nav a { font: 300 2rem/1.1 var(--serif); letter-spacing: .02em; text-transform: none; }
  body.menu-ouvert { overflow: hidden; }
}

/* Barre de réservation mobile, sur chaque page */
.barre-rdv { display: none; }
@media (max-width: 1000px) {
  .barre-rdv {
    display: grid; grid-template-columns: 1fr auto; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .6rem var(--g) calc(.6rem + env(safe-area-inset-bottom)); background: var(--blanc); border-top: 1px solid var(--trait);
    transform: translateY(110%); transition: transform .5s var(--ease);
  }
  .barre-rdv.visible, .page-interieure .barre-rdv { transform: none; }
  .barre-rdv .btn { min-height: 3rem; }
  .barre-rdv .btn-tel { width: 3rem; padding: 0; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
}

/* ---------- Accueil : en-tête transparent sur la une ---------- */
.accueil .entete { position: fixed; left: 0; right: 0; color: var(--blanc); transition: color .5s var(--ease), box-shadow .4s; }
.accueil .entete::before { opacity: 0; transition: opacity .5s var(--ease); }
.accueil .entete .marque-sous { color: rgba(255, 255, 255, .8); transition: color .5s; }
.accueil .entete .burger span { background: currentColor; }
.accueil .entete .btn-plein { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--blanc); }
.accueil .entete.defile, .accueil.menu-ouvert .entete { color: var(--encre); }
.accueil .entete.defile::before, .accueil.menu-ouvert .entete::before { opacity: 1; }
.accueil .entete.defile .marque-sous, .accueil.menu-ouvert .entete .marque-sous { color: var(--doux); }
.accueil .entete.defile .btn-plein { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.accueil .entete.defile .btn-plein:hover { background: var(--noisette); border-color: var(--noisette); }
@media (max-width: 1000px) { .accueil .nav { color: var(--encre); } }

/* ---------- La une : l'enseigne néon qui s'allume sur le mur végétal ---------- */
.une { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--nuit); color: var(--blanc); display: grid; place-items: center; }
.une-fond { position: absolute; inset: -40px; }
.une-fond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) brightness(.5); transform: scale(1.08); animation: respire 18s ease-in-out infinite alternate; }
@keyframes respire { to { transform: scale(1.18) translate(-1%, 1%); } }
.une::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(30, 22, 18, .1), rgba(30, 22, 18, .75) 100%); pointer-events: none; }
.une-contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--entete) var(--g) 3rem; }
.enseigne { position: relative; display: flex; flex-direction: column; align-items: center; }
.enseigne .embleme { width: clamp(15rem, 31vw, 25rem); color: var(--blanc); }
.enseigne h1 { margin: clamp(-6.5rem, -9vw, -4rem) 0 0; font: 400 clamp(3.4rem, 9vw, 8rem)/1 var(--neon); letter-spacing: .01em; color: var(--or-clair); text-shadow: var(--lueur); white-space: nowrap; position: relative; }
.enseigne-sous { font: 400 clamp(.85rem, 1.4vw, 1.15rem)/1 var(--serif); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--lin); margin-top: 1rem; }
.une-slogan { font: italic 300 clamp(1.3rem, 2.2vw, 1.9rem)/1.3 var(--serif); margin: 2rem 0 2.4rem; color: var(--lin); }
.une-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.btn-blanc { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.btn-verre { background: rgba(255, 255, 255, .06); color: var(--blanc); border-color: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-or { background: transparent; color: var(--or-clair); border-color: var(--or); --remplir: var(--or); }
.btn-or:hover { color: var(--nuit); }
.une-defiler { position: absolute; left: 50%; bottom: clamp(1.4rem, 3vw, 2.4rem); z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .8rem; font: 400 .58rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--lin); text-decoration: none; padding-left: .3em; }
.une-defiler::after { content: ""; width: 1px; height: 2.6rem; background: linear-gradient(var(--or), transparent); animation: goutte 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes goutte { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Emblème : anneau doré et étoiles en SVG, dessin de la fleur et de la main
   (remplacé par le logo officiel, voir plus bas) */
.embleme { position: relative; display: block; aspect-ratio: 1; color: var(--blanc); }
.embleme svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.embleme .emb-anneau { stroke: var(--or); stroke-width: 4; }
.embleme .emb-etoile { fill: currentColor; }
/* allumage : le dessin apparaît de bas en haut, l'anneau se trace puis clignote */
.js .une .emb-anneau { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .une .emb-etoile { opacity: 0; transform-origin: center; transform-box: fill-box; }
.js .une .enseigne h1 { opacity: .08; text-shadow: none; }
.js .une .enseigne-sous, .js .une .une-slogan, .js .une .une-actions { opacity: 0; transform: translateY(14px); }
.pret .une .emb-anneau { animation: trace 1.3s var(--ease) .1s forwards, clignote 1.2s linear 1.4s both; }
.pret .une .emb-etoile { animation: scintille .8s var(--ease) 1.8s forwards; }
.pret .une .enseigne h1 { animation: allume 1.4s linear 1.5s forwards; }
.pret .une .enseigne-sous { transition: opacity 1s, transform 1.2s var(--ease); transition-delay: 2.3s; opacity: 1; transform: none; }
.pret .une .une-slogan { transition: opacity 1s, transform 1.2s var(--ease); transition-delay: 2.5s; opacity: 1; transform: none; }
.pret .une .une-actions { transition: opacity 1s, transform 1.2s var(--ease); transition-delay: 2.7s; opacity: 1; transform: none; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes scintille { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes clignote { 0%, 18%, 22%, 48%, 52%, 100% { opacity: 1; } 20%, 50% { opacity: .25; } }
@keyframes allume {
  0% { opacity: .08; text-shadow: none; } 10% { opacity: 1; text-shadow: var(--lueur); } 14% { opacity: .15; text-shadow: none; }
  30% { opacity: .15; } 34% { opacity: 1; text-shadow: var(--lueur); } 38% { opacity: .4; text-shadow: none; } 44%, 100% { opacity: 1; text-shadow: var(--lueur); }
}
@media (max-width: 700px) {
  .enseigne .embleme { width: 15rem; }
  .enseigne h1 { font-size: clamp(2.8rem, 14vw, 3.8rem); margin-top: -3.6rem; }
}

/* Étoile scintillante, signature de l'enseigne */
.etoile-or { display: inline-block; width: .9em; height: .9em; color: var(--or); vertical-align: -.1em; }
.surtitre::before { content: "✦"; color: var(--or); margin-right: .7em; letter-spacing: 0; }
.centre .surtitre::before, .une .surtitre::before { margin-right: .6em; }

.section { padding: var(--section) 0; }
.section-ivoire { background: var(--ivoire); }
.section-sombre { background: var(--encre); color: var(--lin); }
.section-sombre .surtitre { color: var(--nude); }
.section-sombre .titre em { color: var(--nude); }
.section-sombre p, .section-sombre .duo-texte p { color: rgba(237, 227, 217, .78); }
.section-sombre .titre-xl em { color: var(--nude); }
.section-sombre .infos-ligne { border-color: rgba(237, 227, 217, .16); }
.section-sombre .infos-ligne dt { color: var(--nude); }
.section-tete { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-tete.centre { max-width: 40rem; margin-inline: auto; }
.section-tete-ligne { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 2rem; flex-wrap: wrap; }
.titre-xl { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; }
.titre-xl em { color: var(--noisette); }

/* ---------- Présentation : texte + deux photos décalées ---------- */
.presentation { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.presentation-texte .grand { font: 300 clamp(1.45rem, 2.3vw, 1.9rem)/1.5 var(--serif); color: var(--encre); margin: 2rem 0 1.6rem; }
.presentation-texte .grand em { color: var(--noisette); }
.presentation-texte p { color: var(--doux); }
.presentation-photos { position: relative; aspect-ratio: 1 / 1.08; }
.presentation-photos .p1 { position: absolute; left: 0; top: 0; width: 66%; aspect-ratio: 4 / 5; overflow: hidden; }
.presentation-photos .p2 { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid var(--blanc); }
.presentation-photos img { width: 100%; height: 115%; object-fit: cover; margin-top: -7.5%; }
.chiffres { display: flex; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--trait); }
.chiffres div { display: flex; flex-direction: column; gap: .5rem; }
.chiffres strong { font: 300 2.6rem/1 var(--serif); color: var(--encre); }
.chiffres span { font: 400 .6rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); }
@media (max-width: 860px) { .presentation { grid-template-columns: 1fr; } .presentation-photos { order: -1; } }

/* ---------- La carte des soins : liste + image qui change ---------- */
.carte-soins { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: stretch; }
.carte-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.carte-liste li { border-bottom: 1px solid var(--trait); }
.carte-liste a { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 1rem; padding: clamp(1.3rem, 2.4vw, 1.9rem) 0; text-decoration: none; }
.carte-liste .num { font: 400 .62rem/1 var(--sans); letter-spacing: .2em; color: var(--doux); }
.carte-liste .nom { font: 300 clamp(1.8rem, 3vw, 2.7rem)/1.1 var(--serif); transition: color .4s, transform .6s var(--ease); display: inline-block; }
.carte-liste .detail { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: .92rem; color: var(--doux); transition: max-height .6s var(--ease), opacity .5s, margin .5s; }
.carte-liste .prix { font: 400 .62rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--noisette); white-space: nowrap; }
.carte-liste li.actif .nom { color: var(--noisette); transform: translateX(.6rem); font-style: italic; }
.carte-liste li.actif .detail { max-height: 5rem; opacity: 1; margin-top: .6rem; }
.carte-liste .mini { display: none; }
.carte-visuel { position: relative; min-height: 34rem; overflow: hidden; background: var(--lin); }
.carte-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.carte-visuel img.active { opacity: 1; transform: scale(1); }
.carte-visuel .etiquette-visuel { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2; background: var(--blanc); padding: .7rem 1rem; font: 400 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
@media (max-width: 860px) {
  .carte-soins { grid-template-columns: 1fr; }
  .carte-visuel { display: none; }
  .carte-liste a { grid-template-columns: 1fr auto; }
  .carte-liste .num { display: none; }
  .carte-liste .detail { max-height: none; opacity: 1; margin-top: .5rem; }
  .carte-liste .mini { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 4.6rem; aspect-ratio: 1; overflow: hidden; }
  .carte-liste li.actif .nom { color: inherit; transform: none; font-style: normal; }
  .carte-liste .mini img { width: 100%; height: 100%; object-fit: cover; }
  .carte-liste .prix { grid-column: 1; }
}

/* ---------- Bandeau image pleine largeur avec parallaxe ---------- */
.bandeau { position: relative; height: clamp(24rem, 70vh, 44rem); overflow: hidden; color: var(--blanc); display: grid; place-items: center; text-align: center; }
.bandeau img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.bandeau::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 11, .42); }
.bandeau-texte { position: relative; z-index: 1; max-width: 50rem; padding: 0 var(--g); }
.bandeau-texte .surtitre { color: rgba(255, 255, 255, .85); }
.bandeau blockquote { margin: 0; font: italic 300 clamp(1.8rem, 3.6vw, 3.1rem)/1.3 var(--serif); }
.bandeau cite { display: block; margin-top: 1.6rem; font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; font-style: normal; }

/* Offres */
.offres { border-block: 1px solid var(--trait); }
.offres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.offre { padding: clamp(2.8rem, 5vw, 4.2rem) clamp(0rem, 4vw, 3.5rem); text-align: center; }
.offre + .offre { border-left: 1px solid var(--trait); }
.offre .surtitre { margin-bottom: 1.1rem; color: var(--noisette); }
.offre h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.offre .prix-offre { font: 300 2.5rem/1 var(--serif); margin: 1rem 0 1.1rem; }
.offre .prix-offre small { display: block; margin-top: .6rem; font: 400 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); }
.offre p { color: var(--doux); font-size: .95rem; max-width: 24rem; margin: 0 auto; }
@media (max-width: 760px) { .offre + .offre { border-left: 0; border-top: 1px solid var(--trait); } }

/* Deux colonnes photo / texte */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.duo-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); margin: 0; }
.duo-photo img { width: 100%; height: 100%; object-fit: cover; }
.duo-inverse .duo-photo { order: 2; }
.duo-texte { max-width: 30rem; }
.duo-texte p { color: var(--doux); }
.citation { font: italic 300 clamp(1.5rem, 2.4vw, 1.95rem)/1.4 var(--serif); color: var(--encre) !important; margin: 1.8rem 0 2rem; }
.signature { font: italic 300 1.8rem/1 var(--serif); color: var(--noisette) !important; margin-top: 2.2rem; }
.signature small { display: block; margin-top: .8rem; font: 400 .62rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--doux); font-style: normal; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo-inverse .duo-photo { order: 0; } .duo-texte { max-width: none; } }

.infos-ligne { display: flex; gap: clamp(2rem, 5vw, 3.5rem); margin: 2.2rem 0 2.6rem; padding: 1.6rem 0; border-block: 1px solid var(--trait); }
.infos-ligne div { display: flex; flex-direction: column; gap: .6rem; }
.infos-ligne dt { font: 400 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--doux); }
.infos-ligne dd { margin: 0; font: 300 1.9rem/1 var(--serif); }

/* Marques */
.marques { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 2rem); }
.marque-bloc .visuel { aspect-ratio: 3 / 4; overflow: hidden; background: var(--lin); }
.marque-bloc .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.marque-bloc:hover .visuel img { transform: scale(1.05); }
.marque-bloc .visuel-nom { display: grid; place-items: center; font: 400 .85rem/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; color: var(--noisette); padding-left: .5em; }
.marque-bloc h3 { font: 400 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin: 1.5rem 0 .7rem; }
.marque-bloc p { color: var(--doux); font-size: .92rem; margin: 0; }
.boutique { margin: clamp(4rem, 8vw, 6.5rem) auto 0; text-align: center; max-width: 38rem; }
.boutique h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.2rem; }
.boutique p { color: var(--doux); margin-bottom: 2rem; }
@media (max-width: 960px) { .marques { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; } }

/* Galerie : deux rangées qui défilent en continu */
.defile-galerie { overflow: hidden; display: grid; gap: clamp(.5rem, 1vw, .9rem); }
.defile-rang { display: flex; gap: clamp(.5rem, 1vw, .9rem); width: max-content; animation: defile-g 70s linear infinite; }
.defile-rang.inverse { animation-direction: reverse; animation-duration: 80s; }
.defile-galerie:hover .defile-rang { animation-play-state: paused; }
@keyframes defile-g { to { transform: translateX(calc(-50% - clamp(.25rem, .5vw, .45rem))); } }
.defile-rang figure { margin: 0; width: clamp(12rem, 22vw, 19rem); aspect-ratio: 4 / 5; flex: none; overflow: hidden; }
.defile-rang button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--lin); cursor: zoom-in; }
.defile-rang img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.defile-rang button:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .defile-galerie { overflow-x: auto; } .defile-rang { animation: none; } }

.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--encre); }
.visionneuse::backdrop { background: rgba(255, 255, 255, .97); }
.visionneuse-inner { width: 100%; height: 100%; display: grid; place-items: center; padding: 4rem 1rem; }
.visionneuse figure { margin: 0; }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; object-fit: contain; }
.visionneuse figcaption { text-align: center; margin-top: 1.2rem; font: italic 300 1.1rem/1.3 var(--serif); color: var(--doux); }
.visionneuse button { position: absolute; background: none; border: 0; color: var(--encre); cursor: pointer; width: 3.2rem; height: 3.2rem; font: 300 1.6rem/1 var(--sans); }
.visionneuse .fermer { top: .6rem; right: .6rem; }
.visionneuse .prec { left: .4rem; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: .4rem; top: 50%; transform: translateY(-50%); }

/* Avis */
.avis-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.4rem; }
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; margin-top: 3rem; text-align: left; }
.avis-grille blockquote { margin: 0; }
.avis-grille blockquote p { font: italic 300 1.35rem/1.45 var(--serif); }
.avis-grille footer { font: 400 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); }

/* Contact : photo pleine hauteur + informations */
.contact { display: grid; grid-template-columns: 1fr 1fr; background: var(--ivoire); }
.contact-photo { position: relative; min-height: 38rem; overflow: hidden; }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-infos { padding: var(--section) clamp(1.5rem, 6vw, 6.5rem); }
.contact-infos address { font: 300 clamp(1.8rem, 2.8vw, 2.4rem)/1.3 var(--serif); font-style: normal; margin: 1.6rem 0 2.4rem; }
.contact-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; padding-top: 2.2rem; border-top: 1px solid var(--trait); }
.contact-blocs h3 { font: 400 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.2rem; }
.contact-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .95rem; }
.contact-liste a { text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color .3s; }
.contact-liste a:hover { border-color: var(--encre); }
.horaires { width: 100%; border-collapse: collapse; font-size: .92rem; }
.horaires th, .horaires td { text-align: left; padding: .38rem 0; font-weight: 300; }
.horaires td { text-align: right; color: var(--doux); font-variant-numeric: tabular-nums; }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--encre); font-weight: 500; }
.horaires .ferme { font-style: italic; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; }
.note { font-size: .8rem; color: var(--doux); margin-top: 1rem; }
.carte-acces { position: relative; height: clamp(12rem, 22vw, 20rem); background: var(--lin); overflow: hidden; }
.carte-acces .carte-invite { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.carte-acces .carte-invite p { margin: 0; font-size: .8rem; color: var(--doux); max-width: 24rem; }
.carte-acces iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } .contact-photo { min-height: 22rem; } .carte-acces { height: 18rem; } }
@media (max-width: 480px) { .contact-blocs { grid-template-columns: 1fr; } }

/* ---------- Pied de page (sombre) ---------- */
.pied { background: var(--encre); color: var(--lin); padding: clamp(4.5rem, 9vw, 7rem) 0 0; }
.pied-signature { text-align: center; padding-bottom: clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid rgba(237, 227, 217, .14); }
.pied-signature .mot { display: block; font: 300 clamp(2.2rem, 7vw, 5.6rem)/1 var(--sans); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; }
.pied-signature p { font: italic 300 1.35rem/1.4 var(--serif); color: var(--nude); margin: 1.4rem 0 2.4rem; }
.pied-haut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; padding: clamp(3rem, 6vw, 4rem) 0; }
.pied h4 { font: 400 .6rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--nude); margin-bottom: 1.4rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .92rem; color: rgba(237, 227, 217, .75); }
.pied a { text-decoration: none; transition: color .3s; }
.pied ul a:hover { color: var(--blanc); }
.pied .btn-blanc:hover { color: var(--blanc); border-color: var(--blanc); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 2rem; border-top: 1px solid rgba(237, 227, 217, .14); font: 400 .6rem/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(237, 227, 217, .55); }
.pied-bas nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.pied-bas a:hover { color: var(--blanc); }
@media (max-width: 760px) { .pied-haut { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.page-tete { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.page-tete h1 { margin-bottom: 1.4rem; }
.page-tete h1 em { color: var(--noisette); }
.page-tete .chapo { margin: 0 auto; }
.fil { font: 400 .6rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--doux); margin-bottom: 2.2rem; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--encre); }

.sous-nav { position: sticky; top: var(--entete); z-index: 40; background: rgba(255, 255, 255, .97); border-block: 1px solid var(--trait); }
.sous-nav ul { display: flex; justify-content: center; gap: clamp(1.4rem, 3vw, 3rem); list-style: none; margin: 0 auto; padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; max-width: var(--largeur); }
.sous-nav ul::-webkit-scrollbar { display: none; }
.sous-nav a { display: block; white-space: nowrap; text-decoration: none; padding: 1.15rem 0; font: 400 .64rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.sous-nav a.actif, .sous-nav a:hover { color: var(--encre); border-bottom-color: var(--encre); }
@media (max-width: 700px) { .sous-nav ul { justify-content: flex-start; } }

.chapitre { padding: clamp(4.5rem, 9vw, 7.5rem) 0; scroll-margin-top: calc(var(--entete) + 50px); }
.chapitre + .chapitre { border-top: 1px solid var(--trait); }
.chapitre-grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.chapitre-aside { position: sticky; top: calc(var(--entete) + 90px); }
.chapitre-aside h2 { font-size: clamp(2.2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.chapitre-aside h2 em { color: var(--noisette); }
.chapitre-aside p { color: var(--doux); max-width: 26rem; }
.chapitre-aside .photo { margin-top: 2.4rem; aspect-ratio: 4 / 5; overflow: hidden; max-width: 24rem; background: var(--lin); }
.chapitre-aside .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .chapitre-grille { grid-template-columns: 1fr; }
  .chapitre-aside { position: static; }
  .chapitre-aside .photo { aspect-ratio: 4 / 3; max-width: none; }
}

.sous-titre { font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--noisette); margin: 0 0 1.2rem; }
.sous-titre.espace { margin-top: 3.8rem; }
.tarifs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--encre); }
.tarif { padding: 1.4rem 0; border-bottom: 1px solid var(--trait); }
.tarif-ligne, .tarif-info { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.tarif-info { margin-top: .3rem; }
.tarif h4 { font: 400 1.4rem/1.25 var(--serif); }
.tarif .prix { font: 400 1.4rem/1.25 var(--serif); text-align: right; white-space: nowrap; }
.tarif .desc { color: var(--doux); font-size: .92rem; margin: 0; }
.tarif .duree { font: 400 .6rem/2.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--doux); text-align: right; white-space: nowrap; }
.tarif .badge { display: inline-block; vertical-align: .25em; margin-left: .6rem; padding: .35rem .6rem; border: 1px solid var(--noisette); font: 400 .52rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--noisette); }
.tarif .formats { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font: 400 1.4rem/1.25 var(--serif); white-space: nowrap; }
.tarif .formats small { font: 400 .58rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); margin-right: .6rem; }
@media (max-width: 480px) { .tarif h4, .tarif .prix, .tarif .formats span { font-size: 1.2rem; } .tarif-info { flex-direction: column; gap: .2rem; } .tarif .duree { text-align: left; } }

.tableau-tarifs { width: 100%; border-collapse: collapse; }
.tableau-tarifs caption { text-align: left; font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--noisette); padding-bottom: 1.2rem; }
.tableau-tarifs th, .tableau-tarifs td { padding: 1.05rem 0; border-bottom: 1px solid var(--trait); text-align: left; font-weight: 300; }
.tableau-tarifs thead th { font: 400 .58rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--doux); border-bottom-color: var(--encre); }
.tableau-tarifs tbody th { font: 400 1.25rem/1.3 var(--serif); }
.tableau-tarifs td { text-align: right; white-space: nowrap; }
.tableau-tarifs td.duree { font: 400 .6rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); padding-right: 1.5rem; }
.tableau-tarifs td.prix { font: 400 1.25rem/1 var(--serif); width: 4.5rem; }
.tableau-tarifs thead th:not(:first-child) { text-align: right; }
.tableau-tarifs + .tableau-tarifs { margin-top: 3.8rem; }

.encadre { background: var(--ivoire); padding: clamp(1.8rem, 3vw, 2.6rem); margin-top: 2.8rem; }
.encadre h4 { font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.2rem; }
.encadre ol, .encadre ul { margin: 0; padding-left: 1.2rem; color: var(--doux); font-size: .95rem; }
.encadre li { margin-bottom: .45rem; }
.encadre p { color: var(--doux); }
.encadre p:last-child { margin: 0; }

.appel { padding: var(--section) 0; text-align: center; background: var(--ivoire); }
.appel h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 1.2rem; }
.appel h2 em { color: var(--noisette); }
.appel p { color: var(--doux); max-width: 30rem; margin: 0 auto 2.4rem; }

/* Formation */
.blocs-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.bloc h3 { font: 400 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.2rem; padding-top: 1.6rem; border-top: 1px solid var(--encre); }
.bloc p, .bloc li { color: var(--doux); font-size: .95rem; }
.bloc ul { padding-left: 1.1rem; margin: 0; }
@media (max-width: 860px) { .blocs-grille { grid-template-columns: 1fr; } }
.programme { list-style: none; padding: 0; margin: 0; counter-reset: etape; border-top: 1px solid var(--encre); }
.programme li { counter-increment: etape; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1.8rem 0; border-bottom: 1px solid var(--trait); }
.programme li::before { content: "0" counter(etape); font: 300 1.6rem/1.2 var(--serif); color: var(--nude); }
.programme h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.programme p { margin: 0; color: var(--doux); }

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-top: 3rem; text-align: left; }
.champ { display: flex; flex-direction: column; gap: .5rem; }
.champ-large { grid-column: 1 / -1; }
.champ label { font: 400 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--doux); }
.champ input, .champ select, .champ textarea {
  font: 300 1rem/1.4 var(--sans); color: var(--encre); padding: .7rem 0; width: 100%;
  border: 0; border-bottom: 1px solid rgba(43, 33, 27, .3); border-radius: 0; background: transparent; transition: border-color .3s;
}
.champ select { -webkit-appearance: none; appearance: none; background: linear-gradient(45deg, transparent 50%, var(--doux) 50%) calc(100% - 10px) 55% / 5px 5px no-repeat, linear-gradient(135deg, var(--doux) 50%, transparent 50%) calc(100% - 5px) 55% / 5px 5px no-repeat; }
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--encre); }
.consentement { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--doux); }
.consentement input { margin-top: .35rem; accent-color: var(--encre); flex: none; }
.pot-de-miel { position: absolute; left: -5000px; }
@media (max-width: 600px) { .formulaire { grid-template-columns: 1fr; } }

/* Mentions légales */
.texte-legal { padding: 0 0 var(--section); max-width: 46rem; margin: 0 auto; }
.texte-legal h2 { font-size: 1.9rem; margin: 3rem 0 1rem; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { color: var(--doux); }
.a-completer { background: #fff3d6; color: #6b4a00; padding: 0 .3em; font-style: normal; }

/* ---------- Utilitaires (le CSP interdit les attributs style="") ---------- */
.mt-s { margin-top: 1.4rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: 3rem; }
.m-0 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.centre .actions { justify-content: center; }
.etroit { max-width: 46rem; }
.haute { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }

/* Apparitions : fondu avec montée légère ; les images se dévoilent de bas en haut */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.apparait.visible { opacity: 1; transform: none; }
.revele { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--ease); }
.revele.visible { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } .revele { clip-path: none; } }

/* =====================================================================
   FINITIONS — ce qui fait « site dessiné » plutôt que gabarit
   ===================================================================== */

/* Grain photo très discret sur toute la page */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* Arrivée douce de chaque page */
main { animation: arrivee 1s var(--ease) both; }
@keyframes arrivee { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.accueil main { animation: none; }

/* Rideau de transition entre les pages */
.rideau { position: fixed; inset: 0; z-index: 300; background: var(--encre); transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s; }
.rideau.couvre { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }

/* Barre de progression de lecture */
.progression { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 70; background: var(--noisette); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* Ouverture animée (accueil) — se retire seule en CSS même sans JavaScript */
.chargeur { position: fixed; inset: 0; z-index: 400; background: var(--encre); color: var(--lin); display: grid; place-content: center; justify-items: center; gap: 1.6rem; animation: chargeur-sortie 1s cubic-bezier(.7, 0, .2, 1) 2.1s forwards; }
.chargeur-mot { display: flex; overflow: hidden; font: 300 clamp(1.6rem, 4vw, 2.6rem)/1.2 var(--sans); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; }
.chargeur-mot span { display: inline-block; transform: translateY(110%); animation: lettre-monte .9s var(--ease) forwards; }
.chargeur-mot span:nth-child(2) { animation-delay: .06s; } .chargeur-mot span:nth-child(3) { animation-delay: .12s; }
.chargeur-mot span:nth-child(4) { animation-delay: .18s; } .chargeur-mot span:nth-child(5) { animation-delay: .24s; }
.chargeur-mot span:nth-child(6) { animation-delay: .30s; } .chargeur-mot span:nth-child(7) { animation-delay: .36s; }
.chargeur-mot span:nth-child(8) { animation-delay: .42s; } .chargeur-mot span:nth-child(9) { animation-delay: .48s; }
.chargeur-mot span:nth-child(10) { animation-delay: .54s; }
.chargeur-sous { font: italic 300 1.1rem/1 var(--serif); color: var(--nude); opacity: 0; animation: apparaitre .8s var(--ease) .9s forwards; }
.chargeur-ligne { width: 9rem; height: 1px; background: rgba(237, 227, 217, .2); overflow: hidden; }
.chargeur-ligne span { display: block; height: 100%; background: var(--nude); transform: scaleX(0); transform-origin: left; animation: ligne 1.6s var(--ease) .3s forwards; }
.chargeur.saute { display: none; }
@keyframes lettre-monte { to { transform: none; } }
@keyframes apparaitre { to { opacity: 1; } }
@keyframes ligne { to { transform: scaleX(1); } }
@keyframes chargeur-sortie { to { transform: translateY(-100%); visibility: hidden; } }

/* Titres découpés lettre à lettre (JS) */
.decoupe .lettre { display: inline-block; overflow: hidden; vertical-align: top; }
.decoupe .lettre > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.pret .decoupe .lettre > span { transform: none; }

/* Texte qui s'allume mot à mot au défilement (JS) */
.allume .mot { opacity: .16; transition: opacity .35s linear; }
.allume .mot.on { opacity: 1; }

/* Grand ruban typographique lié au défilement */
.ruban { overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0; border-block: 1px solid var(--trait); background: var(--blanc); }
.ruban-piste { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); width: max-content; white-space: nowrap; will-change: transform; }
.ruban-piste span { font: 300 clamp(3.4rem, 9vw, 8.5rem)/1 var(--serif); color: var(--encre); }
.ruban-piste span.creux { color: transparent; -webkit-text-stroke: 1px var(--noisette); font-style: italic; }
.ruban-piste i { font-style: normal; font-size: clamp(1rem, 2vw, 1.6rem); color: var(--nude); }

/* Prestations en défilement horizontal épinglé (ordinateur) */
.horizontal { position: relative; background: var(--ivoire); }
.horizontal-colle { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.horizontal-tete { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vh, 3.5rem); }
.horizontal-compteur { font: 400 .64rem/1 var(--sans); letter-spacing: .26em; color: var(--doux); display: flex; align-items: center; gap: 1rem; }
.horizontal-compteur .jauge { width: 8rem; height: 1px; background: var(--trait); position: relative; overflow: hidden; }
.horizontal-compteur .jauge span { position: absolute; inset: 0; background: var(--encre); transform-origin: left; transform: scaleX(0); }
.horizontal-piste { display: flex; gap: clamp(1.2rem, 2.5vw, 2.5rem); padding-inline: max(var(--g), calc((100vw - var(--largeur)) / 2 + var(--g))); will-change: transform; }
.fiche { flex: none; width: clamp(18rem, 27vw, 25rem); text-decoration: none; display: flex; flex-direction: column; }
.fiche-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); }
.fiche-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.fiche:hover .fiche-image img { transform: scale(1); }
.fiche-num { position: absolute; left: 1rem; top: .6rem; font: italic 300 clamp(3rem, 5vw, 4.6rem)/1 var(--serif); color: var(--blanc); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.fiche h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 1.3rem 0 .4rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fiche h3 small { font: 400 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--noisette); white-space: nowrap; }
.fiche p { color: var(--doux); font-size: .92rem; margin: 0; max-width: 22rem; }
.fiche-fin { justify-content: center; align-items: flex-start; padding: 2.5rem; background: var(--encre); color: var(--lin); aspect-ratio: 4 / 5; align-self: flex-start; }
.fiche-fin strong { font: 300 clamp(2rem, 3vw, 2.8rem)/1.1 var(--serif); margin-bottom: 1.6rem; }
.fiche-fin strong em { color: var(--nude); }
.fiche-fin span { font: 400 .64rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .5rem; }
.fiche-fin:hover { background: var(--noisette); }
@media (max-width: 860px), (hover: none) {
  .horizontal { height: auto !important; padding: var(--section) 0; }
  .horizontal-colle { position: static; height: auto; overflow: visible; }
  .horizontal-compteur { display: none; }
  .horizontal-piste { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; transform: none !important; }
  .horizontal-piste::-webkit-scrollbar { display: none; }
  .fiche { width: 78vw; scroll-snap-align: center; }
}

/* Boutons : remplissage qui monte + attraction magnétique (JS) */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--remplir, var(--noisette)); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn-plein:hover { background: var(--encre); border-color: var(--noisette); color: var(--blanc); }
.btn-contour { --remplir: var(--encre); }
.btn-contour:hover { background: transparent; color: var(--blanc); }
.btn-blanc { --remplir: var(--noisette); }
.btn-blanc:hover { background: var(--blanc); color: var(--blanc); border-color: var(--noisette); }
.btn-verre { --remplir: var(--blanc); }
.btn-verre:hover { background: rgba(255, 255, 255, .06); color: var(--encre); border-color: var(--blanc); }
.accueil .entete.defile .btn-plein:hover { background: var(--encre); }

/* Liens soulignés qui se tracent */
.lien { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease), color .3s; }
.lien:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Curseur personnalisé (souris uniquement) */
.curseur { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--noisette); mix-blend-mode: normal; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s, opacity .3s; display: grid; place-items: center; opacity: 0; }
.curseur.visible { opacity: 1; }
.curseur.lien-survol { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(118, 87, 71, .15); border: 1px solid var(--noisette); }
.curseur.etiquette { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--encre); }
.curseur-texte { font: 400 .56rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--blanc); opacity: 0; transition: opacity .3s; }
.curseur.etiquette .curseur-texte { opacity: 1; }
@media (hover: none), (pointer: coarse) { .curseur { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .chargeur { display: none; }
  body::after { animation: none; }
  .decoupe .lettre > span { transform: none; opacity: 1; }
  .js .une .emb-anneau { stroke-dashoffset: 0; }
  .js .une .emb-etoile, .js .une .enseigne-sous, .js .une .une-slogan, .js .une .une-actions { opacity: 1; transform: none; }
  .js .une .enseigne h1 { opacity: 1; text-shadow: var(--lueur); }
  .une-fond img { animation: none; }
  .allume .mot { opacity: 1; }
  .curseur { display: none; }
}

/* =====================================================================
   IDENTITÉ NVL BEAUTY — reprise de l'enseigne : logotype néon, anneau
   doré, fleur au trait, étoiles, lueur chaude sur le mur végétal
   ===================================================================== */
.marque-nom { font: 400 1.6rem/1 var(--neon); letter-spacing: .01em; text-transform: none; margin-right: 0; }
.marque-sous { font: 400 .56rem/1 var(--serif); font-style: normal; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; margin-top: .4rem; }
.accueil .entete:not(.defile) .marque-nom { color: var(--or-clair); text-shadow: 0 0 3px rgba(255, 214, 140, .8), 0 0 12px rgba(233, 172, 72, .6); }
.accueil.menu-ouvert .entete .marque-nom { color: var(--encre); text-shadow: none; }
@media (max-width: 1000px) { .marque-nom { font-size: 1.35rem; letter-spacing: .01em; margin-right: 0; } .marque-sous { font-size: .5rem; } }

.progression { background: var(--or); }
.curseur { background: var(--or); }
.curseur.lien-survol { background: rgba(233, 185, 95, .14); border-color: var(--or); }
.ruban-piste i { color: var(--or); }
.ruban-piste span.creux { -webkit-text-stroke-color: var(--or); }

/* Numéros des fiches en néon */
.fiche-num { font: 400 clamp(2.6rem, 4vw, 3.8rem)/1 var(--neon); font-style: normal; color: var(--or-clair); text-shadow: var(--lueur); left: 1.1rem; top: .9rem; }

/* Anneau doré derrière les photos de présentation */
.presentation-photos .anneau-or { position: absolute; width: 78%; aspect-ratio: 1; right: -6%; top: 6%; border: 1.5px solid var(--or); border-radius: 50%; border-bottom-color: transparent; transform: rotate(-20deg); opacity: .9; pointer-events: none; }
.presentation-photos .p1, .presentation-photos .p2 { z-index: 1; }
.presentation-photos .etoile-deco { position: absolute; left: 60%; top: -1.5rem; width: 2rem; height: 2rem; color: var(--or); z-index: 2; }

/* Formation : emblème en filigrane */
.section-sombre { position: relative; overflow: hidden; }
.section-sombre .filigrane { position: absolute; width: 38rem; right: -10rem; top: -6rem; color: rgba(237, 227, 217, .08); pointer-events: none; }
.section-sombre .filigrane .emb-anneau { stroke: rgba(233, 185, 95, .22); }
.section-sombre .duo { position: relative; z-index: 1; }
.section-sombre .btn-blanc { --remplir: var(--or); }
.section-sombre .btn-blanc:hover { color: var(--nuit); border-color: var(--or); }

/* Séparateur étoilé */
.etoiles-sep { display: flex; justify-content: center; align-items: center; gap: 1rem; color: var(--or); margin: 0 auto 2.4rem; }
.etoiles-sep::before, .etoiles-sep::after { content: ""; width: 3.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.etoiles-sep::after { transform: scaleX(-1); }

/* Pied de page : l'enseigne sur le mur végétal */
.pied { padding-top: 0; }
.pied-enseigne { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) var(--g); text-align: center; background: var(--nuit); }
.pied-enseigne .fond { position: absolute; inset: -40px; }
.pied-enseigne .fond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) brightness(.42); }
.pied-enseigne > *:not(.fond) { position: relative; }
.pied-enseigne .embleme { width: clamp(10rem, 17vw, 14rem); margin: 0 auto; color: var(--blanc); }
.pied-enseigne .mot-neon { display: block; margin-top: -3.2rem; font: 400 clamp(2.8rem, 6vw, 5rem)/1 var(--neon); color: var(--or-clair); text-shadow: var(--lueur); }
.pied-enseigne .sous { display: block; margin-top: .8rem; font: 400 .8rem/1 var(--serif); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--lin); }
.pied-enseigne p { font: italic 300 1.35rem/1.4 var(--serif); color: var(--lin); margin: 1.8rem 0 2.2rem; }
.pied .wrap { padding-top: clamp(3rem, 6vw, 4rem); }
.pied-haut { padding-top: 0; }
.section { overflow-x: clip; }

/* =====================================================================
   VERSION SOBRE, SANS EFFET NÉON (demande client, 2 octobre 2026)
   En attendant le fichier officiel du logo : dessin de l'enseigne en
   traits fins, anneau doré mat, logotype en capitales espacées.
   ===================================================================== */
.marque-nom { font: 400 1.05rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; }
.marque-sous { font: italic 300 .9rem/1 var(--serif); letter-spacing: .04em; text-transform: none; padding-left: 0; margin-top: .45rem; }
.accueil .entete:not(.defile) .marque-nom { color: var(--blanc); text-shadow: none; }
@media (max-width: 1000px) { .marque-nom { font-size: .9rem; letter-spacing: .36em; margin-right: -.36em; } .marque-sous { font-size: .8rem; } }

.enseigne h1 { font: 300 clamp(2.4rem, 6vw, 5rem)/1 var(--sans); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--blanc); text-shadow: none; margin-top: 2rem; }
.enseigne-sous { font: italic 300 clamp(1.1rem, 1.8vw, 1.5rem)/1 var(--serif); letter-spacing: .04em; padding-left: 0; text-transform: none; color: var(--lin); }
.une .embleme .emb-anneau,
.pied-enseigne .embleme .emb-anneau { filter: none; }
.embleme .emb-anneau { stroke-width: 2.5; }
.une-fond img { filter: saturate(.9) brightness(.42); }
.btn-or { color: var(--blanc); border-color: rgba(255, 255, 255, .7); --remplir: var(--blanc); }
.btn-or:hover { color: var(--encre); }

/* Allumage remplacé par une apparition douce */
.js .une .enseigne h1 { opacity: 0; transform: translateY(14px); }
.pret .une .enseigne h1 { animation: none; opacity: 1; transform: none; text-shadow: none; transition: opacity 1.2s var(--ease) 1.2s, transform 1.4s var(--ease) 1.2s; }
.pret .une .emb-anneau { animation: trace 1.6s var(--ease) .1s forwards; }

.pied-enseigne .mot-neon { margin-top: 1.6rem; font: 300 clamp(1.8rem, 4vw, 3.2rem)/1 var(--sans); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--blanc); text-shadow: none; }
.pied-enseigne .sous { font: italic 300 1.1rem/1 var(--serif); letter-spacing: .04em; padding-left: 0; text-transform: none; }

.fiche-num { font: italic 300 clamp(2.6rem, 4vw, 3.6rem)/1 var(--serif); color: var(--blanc); text-shadow: 0 1px 18px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .js .une .enseigne h1 { opacity: 1; transform: none; } }
.enseigne .embleme { width: clamp(12rem, 24vw, 19rem); }
.enseigne h1 { margin-top: 1.6rem; }
@media (max-height: 960px) { .une-defiler { display: none; } }

/* =====================================================================
   LOGO OFFICIEL (fichier Canva fourni le 3 octobre 2026, détouré)
   Trois découpes PNG transparentes, colorées par masque CSS :
   logo-complet (emblème + nom), logo-nom (en-tête), logo-embleme.
   ===================================================================== */
.logo-masque { display: block; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.logo-complet { aspect-ratio: 900 / 1020; -webkit-mask-image: url("../img/logo-complet.png"); mask-image: url("../img/logo-complet.png"); }
.logo-nom { aspect-ratio: 700 / 208; -webkit-mask-image: url("../img/logo-nom.png"); mask-image: url("../img/logo-nom.png"); }
.logo-embleme { aspect-ratio: 700 / 657; -webkit-mask-image: url("../img/logo-embleme.png"); mask-image: url("../img/logo-embleme.png"); }

/* En-tête : le nom du logo */
.marque { display: block; color: var(--encre); }
.marque .logo-nom { width: 9.6rem; }
.accueil .entete:not(.defile) .marque { color: var(--blanc); }
.accueil.menu-ouvert .entete .marque { color: var(--encre); }
@media (max-width: 1000px) { .marque .logo-nom { width: 7.8rem; margin-inline: auto; } }

/* La une : le logo complet */
.enseigne h1 { margin: 0; padding: 0; font-size: 0; line-height: 0; letter-spacing: 0; }
.une .logo-complet { width: clamp(14rem, 25vw, 21rem); margin: 0 auto; color: var(--lin); }
.une-slogan { margin-top: 1.8rem; }
@media (max-width: 700px) { .une .logo-complet { width: min(16rem, 70vw); } }

/* Pied de page */
.pied-enseigne .logo-complet { width: clamp(11rem, 17vw, 14rem); margin: 0 auto; color: var(--lin); }

/* Formation : emblème en filigrane */
.section-sombre .filigrane { width: 34rem; right: -8rem; top: -4rem; color: rgba(237, 227, 217, .06); }
.section-sombre .filigrane .logo-embleme { width: 100%; }
/* Apparition de la une avec le logo officiel : plus rapide */
.pret .une .enseigne h1 { transition: opacity 1.2s var(--ease) .15s, transform 1.4s var(--ease) .15s; }
.pret .une .une-slogan { transition-delay: .8s; }
.pret .une .une-actions { transition-delay: 1s; }

/* =====================================================================
   PALETTE DU LOGO — version apaisante (demande client, 3 octobre 2026)
   Fond beige #F1ECE4, encre gris-taupe #54514A, halos blancs diffus
   comme sur l'arrière-plan du logo. Plus de fonds sombres ni de doré.
   ===================================================================== */
:root {
  --encre: #4a4741;        /* texte : l'encre du logo, un ton plus soutenu pour la lisibilité */
  --logo: #54514a;         /* encre exacte du logo */
  --noisette: #8b8378;     /* taupe clair : accents, italiques */
  --doux: #77726a;
  --nude: #cfc6ba;
  --lin: #e9e3da;
  --ivoire: #f6f3ee;
  --beige: #f1ece4;        /* fond du logo */
  --blanc: #fdfcfa;
  --trait: rgba(84, 81, 74, .14);
  --or: #8b8378;
  --nuit: #f1ece4;
  --halos: radial-gradient(ellipse 38% 46% at 12% 22%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
           radial-gradient(ellipse 34% 44% at 88% 72%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
}
body { background: var(--beige); color: var(--encre); }
body::after { display: none; }                      /* pas de grain */
::selection { background: var(--nude); }

/* En-tête : toujours clair, encre du logo */
.entete::before { background: rgba(241, 236, 228, .94); }
.accueil .entete, .accueil .entete.defile { color: var(--encre); }
.accueil .entete:not(.defile) .marque, .accueil .entete .marque, .marque { color: var(--logo); }
.accueil .entete .btn-plein, .accueil .entete.defile .btn-plein { background: var(--logo); border-color: var(--logo); color: var(--blanc); }
@media (max-width: 1000px) { .nav { background: var(--beige); } }

/* La une : beige et halos blancs, logo dans sa couleur d'origine */
.une { background-color: var(--beige); background-image: var(--halos); color: var(--encre); }
.une-fond { display: none; }
.une::after { display: none; }
.une .logo-complet { color: var(--logo); }
.une-slogan { color: var(--doux); }
.btn-or, .btn-verre { background: transparent; color: var(--logo); border-color: var(--logo); --remplir: var(--logo); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-or:hover, .btn-verre:hover { color: var(--blanc); background: transparent; border-color: var(--logo); }
.btn-or { background: var(--logo); color: var(--blanc); --remplir: var(--noisette); }
.btn-or:hover { border-color: var(--noisette); }
.une-defiler { color: var(--doux); }
.une-defiler::after { background: linear-gradient(var(--noisette), transparent); }

/* Boutons */
.btn-plein { background: var(--logo); border-color: var(--logo); }
.btn-plein:hover { background: var(--logo); }
.btn-contour { color: var(--logo); border-color: var(--logo); --remplir: var(--logo); }
.btn-blanc { background: var(--logo); color: var(--blanc); border-color: var(--logo); --remplir: var(--noisette); }
.btn-blanc:hover { background: var(--logo); color: var(--blanc); border-color: var(--noisette); }

/* Sections : beige, ivoire, lin — jamais sombre */
.section-ivoire, .horizontal { background: var(--ivoire); }
.section-sombre { background-color: var(--lin); background-image: var(--halos); color: var(--encre); }
.section-sombre .surtitre { color: var(--noisette); }
.section-sombre .titre-xl em, .section-sombre .titre em { color: var(--noisette); }
.section-sombre p, .section-sombre .duo-texte p { color: var(--doux); }
.section-sombre .infos-ligne { border-color: var(--trait); }
.section-sombre .infos-ligne dt { color: var(--doux); }
.section-sombre .filigrane { color: rgba(84, 81, 74, .05); }
.section-sombre .btn-blanc:hover { color: var(--blanc); border-color: var(--noisette); }
.ruban { background: var(--beige); }
.ruban-piste span { color: var(--logo); }
.ruban-piste span.creux { -webkit-text-stroke: 1px var(--noisette); }
.offres { background: var(--beige); }
.contact { background: var(--ivoire); }
.carte-acces { background: var(--lin); }
.fiche-fin { background: var(--logo); color: var(--blanc); }
.fiche-fin strong em { color: var(--lin); }
.fiche-fin:hover { background: var(--noisette); }

/* Pied de page : clair, logo au centre sur halos */
.pied { background: var(--lin); color: var(--encre); }
.pied-enseigne { background-color: var(--beige); background-image: var(--halos); }
.pied-enseigne .fond { display: none; }
.pied-enseigne .logo-complet { color: var(--logo); }
.pied-enseigne p { color: var(--doux); }
.pied h4 { color: var(--noisette); }
.pied ul { color: var(--doux); }
.pied ul a:hover, .pied-bas a:hover { color: var(--encre); }
.pied-bas { color: var(--doux); border-top-color: var(--trait); }

/* Détails */
.progression { background: var(--noisette); }
.curseur { background: var(--noisette); }
.curseur.lien-survol { background: rgba(139, 131, 120, .14); border-color: var(--noisette); }
.curseur.etiquette { background: var(--logo); }
.barre-rdv { background: var(--beige); }
.rideau { background: var(--beige); }
.visionneuse::backdrop { background: rgba(241, 236, 228, .97); }

/* Ruban plus discret (retour client du 5 octobre) */
.ruban { padding: clamp(1.1rem, 2.6vw, 2rem) 0; }
.ruban-piste { gap: clamp(1rem, 2vw, 1.8rem); }
.ruban-piste span { font-size: clamp(1.7rem, 3.6vw, 3.1rem); }
.ruban-piste i { font-size: clamp(.7rem, 1vw, .95rem); }

/* Photos produits sous la sélection boutique */
.boutique-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.4vw, 1.2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.boutique-photos figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--lin); }
.boutique-photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .boutique-photos { grid-template-columns: 1fr 1fr; } }

/* Spray tan : emplacement neutre en attendant la photo de Marine */
.fiche-vide { display: grid; place-items: center; background-color: var(--lin); background-image: var(--halos); }
.fiche-vide .logo-embleme { width: 34%; color: var(--logo); opacity: .35; }
/* Prix de l'offre centré (il héritait de la largeur limitée des paragraphes) */
.offre .prix-offre { max-width: none; margin: 1rem auto 1.1rem; }

/* Mobile : boutons de la une de même largeur, bien centrés ; menu couleur logo */
.burger { color: var(--logo); }
@media (max-width: 760px) {
  .une-actions { flex-direction: column; align-items: stretch; width: min(100%, 21rem); margin-inline: auto; }
  .une-actions .btn { width: 100%; justify-content: center; text-align: center; transform: none !important; }
}

/* =====================================================================
   PALETTE MARRON — charte envoyée par Marine (9 octobre 2026)
   Crème #F4EFE7 (fond) · Beige #DED2C3 (sections) · Taupe #A99888 (lignes,
   éléments discrets) · Marron #5B4638 (boutons, titres, éléments
   importants) · Marron foncé #3E332C (textes). Remplace les touches de vert.
   ===================================================================== */
:root {
  --creme: #f4efe7;
  --beige-charte: #ded2c3;
  --taupe: #a99888;
  --marron: #5b4638;
  --marron-f: #3e332c;
  --encre: #3e332c;
  --logo: #5b4638;
  --noisette: #5b4638;
  --doux: #6f6157;
  --nude: #ded2c3;
  --lin: #ebe3d8;
  --ivoire: #f8f4ee;
  --beige: #f4efe7;
  --blanc: #fdfbf8;
  --trait: rgba(169, 152, 136, .45);
  --or: #a99888;
  --nuit: #f4efe7;
}
body { background: var(--creme); color: var(--encre); }
.entete::before { background: rgba(244, 239, 231, .95); }
@media (max-width: 1000px) { .nav { background: var(--creme); } }
h1, h2, .titre, .titre-xl { color: var(--marron); }
.titre-xl em, .titre em, .presentation-texte .grand em, .page-tete h1 em, .chapitre-aside h2 em { color: var(--marron); }
.surtitre, .surtitre::before { color: var(--taupe); }
.offres, .section-ivoire { background: var(--ivoire); }
.section-sombre { background-color: var(--beige-charte); }
.section-sombre .titre em, .section-sombre .titre-xl em { color: var(--marron); }
.pied-enseigne { background-color: var(--beige-charte); }
.btn-plein, .btn-or, .btn-blanc, .fiche-fin, .curseur.etiquette,
.accueil .entete .btn-plein, .accueil .entete.defile .btn-plein, .barre-rdv .btn-plein { background: var(--marron); border-color: var(--marron); color: var(--creme); --remplir: var(--marron-f); }
.btn-plein:hover, .btn-blanc:hover, .btn-or:hover { background: var(--marron-f); border-color: var(--marron-f); color: var(--creme); }
.btn-contour, .btn-verre { color: var(--marron); border-color: var(--marron); --remplir: var(--marron); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--marron); }
.une .logo-complet, .marque, .logo-masque { color: var(--marron); }

/* Carte des soins : grille de cartes plus petites (retour de Marine, 9 octobre) */
.soins-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.9rem, 1.6vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.soin-carte { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--blanc); border: 1px solid var(--trait); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.soin-carte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(62, 51, 44, .08); }
.soin-carte-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--lin); }
.soin-carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.soin-carte:hover .soin-carte-image img { transform: scale(1.05); }
.soin-carte-texte { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; }
.soin-num { font: italic 300 .95rem/1 var(--serif); color: var(--taupe); margin-bottom: .45rem; }
.soin-carte h3 { font-size: 1.45rem; color: var(--marron); margin-bottom: .45rem; }
.soin-carte p { font-size: .86rem; line-height: 1.55; color: var(--doux); margin: 0 0 1rem; flex: 1; }
.decouvrir { font: 400 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--marron); display: inline-flex; gap: .5rem; align-items: center; }
.decouvrir span { transition: transform .4s var(--ease); }
.soin-carte:hover .decouvrir span { transform: translateX(4px); }
@media (max-width: 1100px) { .soins-grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .soins-grille { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .soin-carte-texte { padding: .8rem .8rem 1rem; }
  .soin-carte h3 { font-size: 1.2rem; }
  .soin-carte p { font-size: .8rem; }
  .decouvrir { font-size: .6rem; letter-spacing: .16em; }
}

/* Offre du moment : bloc mis en avant */
.offre-moment { background-color: var(--beige-charte); background-image: var(--halos); padding-block: clamp(4rem, 8vw, 6.5rem); }
.offre-moment-grille { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; max-width: 1080px; }
.offre-moment-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.offre-moment-photo img { width: 100%; height: 100%; object-fit: cover; }
.offre-moment-texte p { color: var(--marron-f); max-width: 30rem; }
.offre-moment-prix { font: 300 clamp(3.4rem, 6vw, 4.8rem)/1 var(--serif); color: var(--marron) !important; margin: 1.2rem 0 1.4rem; }
.offre-moment-prix small { font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); margin-left: .6rem; vertical-align: middle; }
.offre-moment-validite { font-size: .85rem; font-style: italic; color: var(--doux) !important; margin: .8rem 0 1.8rem; }
@media (max-width: 760px) { .offre-moment-grille { grid-template-columns: 1fr; } .offre-moment-photo { aspect-ratio: 4 / 3; } }

/* Logos des marques partenaires (masques PNG colorés en marron) */
.logo-marque { display: block; background: var(--marron); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.logo-simone-mahler { --m: url("../img/marques/simone-mahler.png"); aspect-ratio: 281 / 267; height: 62%; }
.logo-soyun { --m: url("../img/marques/soyun.png"); aspect-ratio: 478 / 102; width: 72%; }
.logo-botan { --m: url("../img/marques/botan.png"); aspect-ratio: 364 / 438; height: 66%; }
.logo-paalm { --m: url("../img/marques/paalm.png"); width: 60%; }
.visuel-logo { display: grid; place-items: center; aspect-ratio: 4 / 3 !important; background: var(--blanc); border: 1px solid var(--trait); }
.boutique-liens { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* Page boutique */
.boutique-marque-tete { display: grid; grid-template-columns: 9rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 2rem; border-bottom: 1px solid var(--trait); }
.boutique-marque-tete .logo-marque { width: 100%; height: auto; aspect-ratio: 1 / 1; -webkit-mask-size: contain; mask-size: contain; }
.boutique-marque-tete p { color: var(--doux); max-width: 38rem; margin-top: .6rem; }
.produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.produit-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); margin-bottom: 1rem; }
.produit-photo img { width: 100%; height: 100%; object-fit: cover; }
.produit h3 { font-size: 1.5rem; color: var(--marron); margin-bottom: .4rem; }
.produit p { font-size: .9rem; color: var(--doux); }
#paalm .produits { grid-template-columns: repeat(4, 1fr); }
.duo-marques { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
.duo-marques > div { background: var(--blanc); border: 1px solid var(--trait); padding: 2rem; text-align: center; }
.duo-marques .logo-marque { margin: 0 auto 1.2rem; height: 5rem; width: auto; }
.duo-marques .logo-soyun { height: 2.2rem; }
.duo-marques p { color: var(--doux); font-size: .92rem; }
@media (max-width: 900px) { .produits, #paalm .produits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .boutique-marque-tete { grid-template-columns: 5.5rem 1fr; } .duo-marques { grid-template-columns: 1fr; } }
/* Logos : même boîte pour tous, le masque s'ajuste (contain) */
.visuel-logo { position: relative; background: var(--blanc) !important; }
.visuel-logo .logo-marque { position: absolute; inset: 22% 18%; width: auto; height: auto; aspect-ratio: auto; }
.visuel-logo .logo-soyun { inset: 38% 14%; }
.visuel-logo .logo-paalm { inset: 36% 18%; }
.duo-marques .logo-marque { aspect-ratio: auto; width: 60%; height: 5rem; }
.duo-marques .logo-soyun { height: 2.4rem; }
.boutique-marque-tete .logo-marque { aspect-ratio: 1 / 1; }

/* Carte des soins — maquette de Marine (9 octobre) */
.soins-tete { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.soins-tete .titre-xl { margin: .6rem 0 .9rem; }
.soins-tete p { color: var(--doux); font-size: 1.02rem; }
.cartes-soins { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 1.3vw, 1.2rem); }
.carte-soin { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--ivoire); border: 1px solid var(--trait); padding: 3px; transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.carte-soin:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(62, 51, 44, .09); }
.carte-soin-image { display: block; aspect-ratio: 1 / .95; overflow: hidden; background: var(--lin); }
.carte-soin-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.carte-soin:hover .carte-soin-image img { transform: scale(1.05); }
.carte-soin-num { position: relative; align-self: flex-start; margin-top: -2.9rem; padding: .35rem 1.1rem 0 1.25rem; background: var(--ivoire); font: italic 300 2.6rem/1 var(--serif); color: var(--taupe); }
.carte-soin-corps { display: flex; flex-direction: column; flex: 1; padding: .5rem 1.25rem 1.2rem; }
.carte-soin h3 { font-size: clamp(1.5rem, 2vw, 1.85rem); color: var(--marron-f); margin-bottom: .9rem; }
.carte-soin h3::after { content: ""; display: block; width: 1.6rem; height: 1px; background: var(--taupe); margin-top: .9rem; }
.carte-soin ul { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; }
.carte-soin li { font-size: .92rem; line-height: 1.75; color: var(--doux); }
.carte-soin-pied { display: flex; align-items: center; justify-content: space-between; font: 400 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--marron-f); }
.rond-fleche { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--marron-f); border-radius: 50%; font-size: .95rem; letter-spacing: 0; transition: background .4s, color .4s; }
.carte-soin:hover .rond-fleche { background: var(--marron); border-color: var(--marron); color: var(--creme); }

.bandeau-produits { position: relative; display: grid; grid-template-columns: 1fr auto 1fr 26%; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: clamp(1.2rem, 2vw, 1.6rem); padding: 1.8rem 0 1.8rem clamp(1.5rem, 9vw, 11rem); background-color: var(--beige-charte); background-image: var(--halos); overflow: hidden; }
.bandeau-produits::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(1.5rem, 9vw, 11rem); background: url("../img/logo-embleme.png") center / 70% no-repeat; opacity: .08; filter: brightness(0); }
.bandeau-produits-titre h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--marron-f); line-height: 1.12; margin-top: .4rem; }
.bandeau-produits-titre h3 em { color: var(--marron); }
.bandeau-produits-texte { padding-left: clamp(1.2rem, 3vw, 2.5rem); border-left: 1px solid var(--taupe); }
.bandeau-produits-texte p { color: var(--doux); margin-bottom: 1rem; max-width: 20rem; }
.bandeau-produits-photo { align-self: stretch; margin: -1.8rem 0; position: relative; }
.bandeau-produits-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
@media (min-width: 1101px) { .bandeau-produits { grid-template-columns: auto 1px 1fr 30%; } }
.bandeau-produits-texte { border-left: 0; }
.bandeau-produits > .bandeau-produits-texte { grid-column: 3; }
.bandeau-produits::after { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--taupe); opacity: .7; }

@media (max-width: 1100px) {
  .cartes-soins { grid-template-columns: repeat(3, 1fr); }
  .bandeau-produits { grid-template-columns: 1fr; padding: 2rem; text-align: center; }
  .bandeau-produits::before, .bandeau-produits::after, .bandeau-produits-photo { display: none; }
  .bandeau-produits > .bandeau-produits-texte { grid-column: auto; padding-left: 0; }
  .bandeau-produits-texte p { margin-inline: auto; }
}
@media (max-width: 700px) {
  .cartes-soins { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .carte-soin-num { font-size: 2rem; margin-top: -2.3rem; padding: .3rem .8rem 0 .9rem; }
  .carte-soin-corps { padding: .4rem .9rem 1rem; }
  .carte-soin h3 { font-size: 1.3rem; margin-bottom: .6rem; }
  .carte-soin h3::after { margin-top: .6rem; }
  .carte-soin li { font-size: .8rem; line-height: 1.6; }
  .carte-soin-pied { font-size: .58rem; letter-spacing: .18em; }
  .rond-fleche { width: 2.3rem; height: 2.3rem; }
  .cartes-soins .carte-soin:last-child { grid-column: 1 / -1; }
  .cartes-soins .carte-soin:last-child .carte-soin-image { aspect-ratio: 2 / 1; }
}
.nav a { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1400px) { .nav { gap: clamp(1rem, 1.6vw, 1.8rem); } .nav a { letter-spacing: .18em; } }
.bandeau-produits .btn { white-space: nowrap; }
.bandeau-produits-texte p { max-width: 17rem; }
/* « Boutique en ligne » à droite sur ordinateur (le logo reste centré) */
.entete-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.entete-droite { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); justify-self: end; }
.entete-boutique { font: 400 .68rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--encre); padding: .5rem 0; border-bottom: 1px solid transparent; white-space: nowrap; transition: border-color .3s; }
.entete-boutique:hover { border-color: currentColor; }
.nav .nav-mobile { display: none; }
@media (max-width: 1180px) { .entete-boutique { display: none; } }
@media (max-width: 1180px) { .nav .nav-mobile { display: block; } }
@media (min-width: 1101px) { .bandeau-produits { grid-template-columns: minmax(16rem, auto) 1px 1fr 30%; } }

/* =====================================================================
   ANIMATIONS & WIDGETS (9 octobre 2026)
   ===================================================================== */

/* Ouverture : emblème qui se dévoile, nom lettre à lettre, trait qui se remplit */
.chargeur { background-color: var(--creme); background-image: var(--halos); color: var(--marron); gap: 1.1rem; animation: chargeur-sortie 1.1s cubic-bezier(.7, 0, .2, 1) 2.4s forwards; }
.chargeur-embleme { width: clamp(5.5rem, 12vw, 7.5rem); color: var(--marron); clip-path: circle(0% at 50% 50%); animation: embleme-ouvre 1.4s cubic-bezier(.6, 0, .2, 1) .15s forwards; }
.chargeur-mot { font: 300 clamp(1.8rem, 4.5vw, 2.8rem)/1.2 var(--serif); letter-spacing: .32em; color: var(--marron-f); text-transform: none; }
.chargeur-sous { color: var(--doux); font-size: 1rem; }
.chargeur-ligne { width: 9rem; height: 1px; background: var(--trait); position: relative; overflow: hidden; }
.chargeur-ligne::after { content: ""; position: absolute; inset: 0; background: var(--marron); transform: scaleX(0); transform-origin: left; animation: ligne-remplit 2s var(--ease) .2s forwards; }
@keyframes embleme-ouvre { to { clip-path: circle(75% at 50% 50%); } }
@keyframes ligne-remplit { to { transform: scaleX(1); } }

/* Rideau : couleur marron + emblème ; se lève à l'arrivée sur chaque page */
.rideau { background: var(--marron); display: grid; place-items: center; }
.rideau::after { content: ""; width: 5rem; aspect-ratio: 700 / 657; background: var(--creme); opacity: .9; -webkit-mask: url("../img/logo-embleme.png") center / contain no-repeat; mask: url("../img/logo-embleme.png") center / contain no-repeat; }
.rideau:not(.arrive):not(.couvre) { visibility: visible; animation: rideau-leve .9s cubic-bezier(.7, 0, .2, 1) .15s both; }
@keyframes rideau-leve { from { transform: none; } to { transform: translateY(-100%); } }

/* Étincelles autour du logo de la une */
.enseigne { position: relative; }
.etincelle { position: absolute; color: var(--taupe); font-size: 1rem; opacity: 0; pointer-events: none; animation: etincelle 3.6s ease-in-out infinite; }
.etincelle.e1 { top: 12%; left: 4%; animation-delay: 1.2s; }
.etincelle.e2 { top: 30%; right: 2%; font-size: .75rem; animation-delay: 2.3s; }
.etincelle.e3 { bottom: 26%; left: 10%; font-size: .6rem; animation-delay: 3.1s; }
@keyframes etincelle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: .9; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.une .logo-complet { animation: flotte 7s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px); } }

/* Statut d'ouverture en direct */
.une-statut { margin: -.8rem 0 1.6rem; }
.statut-ouverture { display: inline-flex; align-items: center; gap: .55rem; font: 400 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--marron); }
.statut-ouverture:empty { display: none; }
.statut-ouverture::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--taupe); }
.statut-ouverture.ouvert::before { background: #7f9a6e; box-shadow: 0 0 0 0 rgba(127, 154, 110, .6); animation: pouls 2.2s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 .55rem rgba(127, 154, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 154, 110, 0); } }
.contact .note .statut-ouverture { margin-bottom: .5rem; }

/* Badge flottant « Réserver » */
.badge-rdv { position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 90; width: 6.6rem; height: 6.6rem; border-radius: 50%; background: var(--marron); color: var(--creme); display: grid; place-items: center; box-shadow: 0 14px 34px rgba(62, 51, 44, .25); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), background .3s; }
.badge-rdv.visible { opacity: 1; transform: none; pointer-events: auto; }
.badge-rdv:hover { background: var(--marron-f); }
.badge-rdv svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne 16s linear infinite; }
.badge-rdv text { font: 500 9.4px var(--sans); letter-spacing: 2.6px; fill: currentColor; }
.badge-rdv-centre { width: 2.1rem; color: var(--creme); }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .badge-rdv { display: none; } }

/* FAQ */
.faq-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-tete p { color: var(--doux); margin-top: 1.2rem; max-width: 24rem; }
.faq-tete a, .faq-reponse a { color: var(--marron); }
.faq-item { border-bottom: 1px solid var(--trait); }
.faq-item:first-child { border-top: 1px solid var(--trait); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font: 400 clamp(1.2rem, 1.8vw, 1.45rem)/1.3 var(--serif); color: var(--marron-f); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 2.4rem; height: 2.4rem; border: 1px solid var(--taupe); border-radius: 50%; transition: background .3s, transform .5s var(--ease); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1px; background: var(--marron); transform: translate(-50%, -50%); }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.faq-item[open] .faq-plus { background: var(--marron); border-color: var(--marron); }
.faq-item[open] .faq-plus::before, .faq-item[open] .faq-plus::after { background: var(--creme); }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq-reponse { padding: 0 3.5rem 1.5rem 0; color: var(--doux); animation: faq-ouvre .5s var(--ease); }
@keyframes faq-ouvre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; } .faq-reponse { padding-right: 0; } }

/* Survol des photos : léger zoom partout */
.duo-photo, .produit-photo, .offre-moment-photo { overflow: hidden; }
.duo-photo img, .produit-photo img, .offre-moment-photo img { transition: transform 1.4s var(--ease); }
.duo-photo:hover img, .produit:hover .produit-photo img, .offre-moment-photo:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .etincelle, .une .logo-complet, .badge-rdv svg, .statut-ouverture.ouvert::before { animation: none; }
  .rideau:not(.arrive):not(.couvre) { animation: none; visibility: hidden; }
  .chargeur-embleme { clip-path: none; animation: none; }
}
a[href^="tel:"] { white-space: nowrap; }

/* =====================================================================
   MOTION DESIGN (9 octobre 2026) — courbes communes :
   --sortie : décélération longue, pour tout ce qui arrive à l'écran.
   ===================================================================== */
:root { --sortie: cubic-bezier(.16, 1, .3, 1); --glisse: cubic-bezier(.77, 0, .175, 1); }

/* Titres : mots qui montent d'un masque */
.titre-anime .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.titre-anime .mot > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s var(--sortie); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.titre-anime.joue .mot > span { transform: none; }

/* Photos : volet qui se lève, image qui se pose */
.photo-devoile { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--glisse); }
.photo-devoile img { transform: scale(1.18); transition: transform 1.8s var(--sortie); }
.photo-devoile.joue { clip-path: inset(0 0 0 0); }
.photo-devoile.joue img { transform: scale(1); }
.carte-soin:hover .photo-devoile.joue img, .produit:hover .photo-devoile.joue img { transform: scale(1.05); transition-duration: 1.2s; }
.cartes-soins .carte-soin:nth-child(2) .photo-devoile { transition-delay: .08s; }
.cartes-soins .carte-soin:nth-child(3) .photo-devoile { transition-delay: .16s; }
.cartes-soins .carte-soin:nth-child(4) .photo-devoile { transition-delay: .24s; }
.cartes-soins .carte-soin:nth-child(5) .photo-devoile { transition-delay: .32s; }

/* Traits qui se dessinent */
.trait-dessine.carte-soin h3::after, .carte-soin h3.trait-dessine::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--sortie) .5s; }
.carte-soin h3.trait-dessine.joue::after { transform: none; }
.faq-item.trait-dessine { border-bottom-color: transparent; background: linear-gradient(var(--trait), var(--trait)) left bottom / 0 1px no-repeat; transition: background-size 1.2s var(--sortie); }
.faq-item.trait-dessine.joue { background-size: 100% 1px; }

/* Cartes inclinables (ordinateur) */
.inclinable { transform-style: preserve-3d; }
.inclinable.visible { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--sortie), box-shadow .6s var(--ease), opacity 1.2s var(--ease); }
.inclinable.visible:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .25s ease-out, box-shadow .6s var(--ease); }
.inclinable::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 45%); opacity: 0; transition: opacity .5s; }
.inclinable:hover::after { opacity: 1; }
.produit, .marque-bloc { position: relative; }

/* La une suit la souris */
.une { background-position: calc(var(--px, 0) * -30px) calc(var(--py, 0) * -30px), calc(var(--px, 0) * 40px) calc(var(--py, 0) * 40px); }
.une .enseigne { transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0); }

/* Ouverture : le volet beige suit le volet principal en sortant */
.chargeur-mot span { animation-timing-function: var(--sortie); }

/* Une : entrée orchestrée après l'ouverture */
.pret .une-slogan, .pret .une-statut { transition: opacity 1.2s var(--sortie), transform 1.4s var(--sortie); }
.une-statut { opacity: 0; transform: translateY(12px); transition-delay: 1.3s; }
.pret .une-statut { opacity: 1; transform: none; }

/* Rideau entre les pages : liseré beige en tête du volet marron */
.rideau { background: linear-gradient(var(--beige-charte) 0 1.4vh, var(--marron) 1.4vh calc(100% - 1.4vh), var(--beige-charte) calc(100% - 1.4vh)); }
.rideau { transition: transform .75s var(--glisse) .08s, visibility 0s .83s; }
.rideau.couvre { transition: transform .75s var(--glisse) .08s, visibility 0s; }
.rideau:not(.arrive):not(.couvre) { animation: rideau-leve 1s var(--glisse) .1s both; }

@media (prefers-reduced-motion: reduce) {
  .titre-anime .mot > span { transform: none; transition: none; }
  .photo-devoile { clip-path: none; } .photo-devoile img { transform: none; }
}

/* Moins de volets (10 octobre) : les photos apparaissent en fondu doux,
   sans rideau qui se lève. Seuls l'ouverture et le passage d'une page à
   l'autre gardent un volet. */
.photo-devoile, .photo-devoile.joue { clip-path: none; }
.photo-devoile { opacity: 0; transition: opacity 1.4s var(--sortie); }
.photo-devoile.joue { opacity: 1; }
.photo-devoile img { transform: scale(1.06); transition: transform 2s var(--sortie); }
.photo-devoile.joue img { transform: scale(1); }
.revele, .revele.visible { clip-path: none; }
.revele { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--sortie), transform 1.6s var(--sortie); }
.revele.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .photo-devoile, .revele { opacity: 1; transform: none; } }

/* Carte des soins sur mobile : défilement latéral au doigt */
@media (max-width: 700px) {
  .cartes-soins { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); margin-inline: calc(-1 * var(--g)); padding: 0 var(--g) .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cartes-soins::-webkit-scrollbar { display: none; }
  .cartes-soins .carte-soin { scroll-snap-align: start; }
  .cartes-soins .carte-soin:last-child { grid-column: auto; }
  .cartes-soins .carte-soin:last-child .carte-soin-image { aspect-ratio: 1 / .95; }
  .carte-soin h3 { font-size: 1.45rem; }
  .carte-soin li { font-size: .88rem; }
  .carte-soin-pied { font-size: .62rem; }
  .cartes-indicateur { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
  .cartes-indicateur span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--taupe); opacity: .35; transition: opacity .3s, width .3s; }
  .cartes-indicateur span.actif { opacity: 1; width: 1.2rem; border-radius: 1rem; background: var(--marron); }
}
@media (min-width: 701px) { .cartes-indicateur { display: none; } }
/* Mobile : le bouton Réserver de l'en-tête chevauchait le logo ; la barre
   « Prendre rendez-vous » en bas d'écran fait déjà le travail. */
/* Mobile : bouton Réserver de l'en-tête compact */
@media (max-width: 1000px) {
  .entete-droite .btn { display: inline-flex; min-height: 0; padding: .55rem .75rem; font-size: .56rem; letter-spacing: .16em; }
  .entete-inner { grid-template-columns: 44px 1fr auto; }
  .entete .marque .logo-nom { max-width: 9.5rem; }
}

/* Formation : composition de deux photos (grande + petite décalée) */
.compo-formation { position: relative; padding: 0 0 18% 0; max-width: 34rem; justify-self: center; width: 100%; }
.compo-formation figure { margin: 0; overflow: hidden; background: var(--lin); }
.compo-formation img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.compo-grande { width: 78%; margin-left: auto !important; }
.compo-petite { position: absolute !important; left: 0; bottom: 0; width: 46%; border: 8px solid var(--creme); box-shadow: 0 18px 40px rgba(62, 51, 44, .12); }
@media (max-width: 860px) { .compo-formation { max-width: 26rem; margin-top: 1rem; } }
/* Infos de la formation : grille 2 × 2, valeurs sur une ligne */
.infos-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(2rem, 5vw, 3.5rem); row-gap: 1.4rem; }
.infos-ligne dd { font-size: 1.6rem; line-height: 1.15; white-space: nowrap; }
@media (max-width: 420px) { .infos-ligne dd { font-size: 1.35rem; white-space: normal; } }

/* =====================================================================
   FONDS MATIÈRE (10 octobre 2026) — ombre de feuillage, crème soyeuse,
   marbre beige. Un léger voile crème garde la palette de la charte
   (crème, beige, taupe, marron) et la lisibilité des textes.
   ===================================================================== */
:root {
  --fond-feuillage: url("../img/fonds/ombre-feuillage.jpg");
  --fond-creme: url("../img/fonds/creme-soyeuse.jpg");
  --fond-marbre: url("../img/fonds/marbre.jpg");
}

/* La une et les têtes de page : lumière et ombre de feuillage */
.une {
  background-color: var(--creme);
  background-image: linear-gradient(rgba(244, 239, 231, .25), rgba(244, 239, 231, .25)), var(--fond-feuillage);
  background-size: cover; background-position: center;
}
.page-tete {
  background-color: var(--creme);
  background-image: linear-gradient(rgba(244, 239, 231, .45), rgba(244, 239, 231, .7)), var(--fond-feuillage);
  background-size: cover; background-position: center 30%;
}

/* L'offre du moment : crème soyeuse */
.offre-moment {
  background-color: var(--beige-charte);
  background-image: linear-gradient(90deg, rgba(244, 239, 231, .15), rgba(244, 239, 231, .55)), var(--fond-creme);
  background-size: cover; background-position: center;
}

/* La formation (accueil) et le bandeau produits : marbre beige */
.section-sombre {
  background-color: var(--beige-charte);
  background-image: linear-gradient(rgba(244, 239, 231, .55), rgba(244, 239, 231, .4)), var(--fond-marbre);
  background-size: cover; background-position: center;
}
.section-sombre .filigrane { opacity: .5; }
.bandeau-produits {
  background-color: var(--beige-charte);
  background-image: linear-gradient(90deg, rgba(244, 239, 231, .6), rgba(244, 239, 231, .35)), var(--fond-marbre);
  background-size: cover; background-position: center 40%;
}

/* Les + de NVL Beauty et avis : feuillage très doux */
#les-plus, #avis {
  background-color: var(--ivoire);
  background-image: linear-gradient(rgba(248, 244, 238, .78), rgba(248, 244, 238, .78)), var(--fond-feuillage);
  background-size: cover; background-position: center;
}

/* Pied de page (enseigne) : crème soyeuse */
.pied-enseigne {
  background-color: var(--beige-charte);
  background-image: linear-gradient(rgba(244, 239, 231, .45), rgba(244, 239, 231, .45)), var(--fond-creme);
  background-size: cover; background-position: center;
}
.pied-enseigne .fond { display: none; }

/* Mobile : versions légères des fonds */
@media (max-width: 700px) {
  :root {
    --fond-feuillage: url("../img/fonds/ombre-feuillage-800.jpg");
    --fond-creme: url("../img/fonds/creme-soyeuse-800.jpg");
    --fond-marbre: url("../img/fonds/marbre-800.jpg");
  }
}

/* =====================================================================
   HARMONIE (10 octobre 2026) — un seul rythme, des photos à taille
   humaine, une même largeur de lecture, des fonds matière posés en
   cartes dans le flux plutôt qu'en grandes bandes, un fil conducteur
   (trait + étoile) qui relie les sections.
   ===================================================================== */
:root { --largeur: 1180px; --section: clamp(4rem, 8vw, 7rem); }
body { background: var(--creme); }

/* Fil conducteur entre les sections : un trait fin et l'étoile du logo */
main > .section, main > .offre-moment { position: relative; }
main > .section + .section::before,
main > .section + .offre-moment::before,
main > .offre-moment + .section::before {
  content: "✦"; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  font-size: .7rem; color: var(--taupe); background: var(--creme); padding: 0 .9rem; line-height: 1; z-index: 2;
}
main > .section + .section::after,
main > .section + .offre-moment::after,
main > .offre-moment + .section::after {
  content: ""; position: absolute; left: 50%; top: 0; width: min(18rem, 50%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--trait), transparent); z-index: 1;
}

/* Fonds : tout le site sur la même base crème, sans changement brusque */
.section-ivoire, #les-plus, .faq, .contact, .soins, #galerie, #marine, #institut { background: transparent !important; background-image: none !important; }

/* Têtes de section : même style partout */
.section-tete { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.titre-xl { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }

/* Photos à taille humaine */
.duo { gap: clamp(2.5rem, 6vw, 5.5rem); }
.duo-photo { max-width: 26rem; justify-self: center; width: 100%; }
.presentation { gap: clamp(2.5rem, 6vw, 5.5rem); }
.presentation-photos { max-width: 30rem; justify-self: center; width: 100%; }
.compo-formation { max-width: 28rem; }

/* Offre du moment : une carte en crème soyeuse dans le flux */
.offre-moment { background: transparent !important; padding-block: var(--section); }
.offre-moment-grille { max-width: 980px; padding: clamp(1.6rem, 4vw, 3rem); grid-template-columns: minmax(0, 17rem) 1fr; gap: clamp(1.8rem, 4vw, 3.5rem);
  background-color: var(--beige-charte); background-image: linear-gradient(90deg, rgba(244, 239, 231, .2), rgba(244, 239, 231, .6)), var(--fond-creme); background-size: cover; background-position: center; }
.offre-moment-photo { aspect-ratio: 4 / 5; }
.offre-moment-prix { font-size: clamp(2.8rem, 5vw, 3.8rem); margin: .9rem 0 1rem; }

/* Formation (accueil) : une carte en marbre dans le flux */
.section-sombre { background: transparent !important; overflow: visible; }
.section-sombre > .wrap.duo { padding: clamp(1.8rem, 4.5vw, 3.5rem); max-width: 1080px;
  background-color: var(--beige-charte); background-image: linear-gradient(rgba(244, 239, 231, .58), rgba(244, 239, 231, .45)), var(--fond-marbre); background-size: cover; background-position: center; }
.section-sombre .filigrane { display: none; }
.section-sombre .duo-photo { max-width: 22rem; }

/* La une : feuillage qui se fond dans la page en bas */
.une { background-image: linear-gradient(rgba(244, 239, 231, 0) 70%, var(--creme)), linear-gradient(rgba(244, 239, 231, .25), rgba(244, 239, 231, .25)), var(--fond-feuillage); }

/* Galerie : une seule rangée, vignettes plus petites */
.defile-rang figure { width: clamp(9rem, 15vw, 13rem); }

/* Avis dans la FAQ */
.faq-avis { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--trait); }
.faq-avis p { margin-top: .7rem; color: var(--doux); }
.faq-avis-liens { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* Contact : carte contenue, photo et plan côte à côte */
.contact { display: block; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 24rem) 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.contact-visuels { display: grid; gap: 1rem; }
.contact-photo { min-height: 0; aspect-ratio: 4 / 4.4; }
.contact .carte-acces { height: 11rem; }
.contact-infos { padding: 0; }

/* Bandeau produits : même largeur que le reste */
.bandeau-produits { max-width: 100%; }

/* Pied de page : pas de nouvelle texture, crème uni */
.pied-enseigne { background: var(--beige-charte) !important; background-image: linear-gradient(var(--creme), rgba(222, 210, 195, .6)) !important; }

@media (max-width: 860px) {
  .contact-grille { grid-template-columns: 1fr; }
  .contact-visuels { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .contact-photo { aspect-ratio: auto; height: 100%; }
  .contact .carte-acces { height: auto; min-height: 11rem; }
  .offre-moment-grille { grid-template-columns: 1fr; }
  .offre-moment-photo { max-width: 16rem; aspect-ratio: 1; }
  .duo-photo, .section-sombre .duo-photo { max-width: 20rem; }
  .presentation-photos { max-width: 22rem; }
  .compo-formation { max-width: 21rem; }
}
@media (max-width: 600px) {
  :root { --section: 3.5rem; }
  .titre-xl { font-size: 2.15rem; }
  .duo-photo, .section-sombre .duo-photo { max-width: 16rem; aspect-ratio: 1; }
  .presentation-photos { max-width: 17rem; }
  .offre-moment-photo { max-width: none; aspect-ratio: 16 / 10; }
  .defile-rang figure { width: 8.5rem; }
  .contact-visuels { grid-template-columns: 1fr; }
  .contact-photo { display: none; }
}

/* Offre du moment : texte seul, centré, bien lisible sur la crème */
.offre-moment-grille { grid-template-columns: 1fr !important; max-width: 760px; text-align: center; justify-items: center;
  background-image: linear-gradient(rgba(244, 239, 231, .78), rgba(244, 239, 231, .78)), var(--fond-creme) !important; border: 1px solid var(--trait); }
.offre-moment-texte { display: flex; flex-direction: column; align-items: center; }
.offre-moment-texte p { color: var(--marron-f); margin-inline: auto; }
.offre-moment-texte .surtitre { color: var(--marron); }
.offre-moment-validite { color: var(--marron) !important; }
.offre-moment-prix small { color: var(--marron); }

/* Plan d'accès : dessin dans la charte, la vraie carte se charge au clic */
.contact .carte-acces { position: relative; height: 15rem; overflow: hidden; border: 1px solid var(--trait);
  background-color: var(--beige-charte); background-image: linear-gradient(rgba(244, 239, 231, .55), rgba(244, 239, 231, .55)), var(--fond-marbre); background-size: cover; }
.plan-deco { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--taupe); }
.plan-deco .rue { stroke-width: 5; opacity: .45; }
.plan-deco .rue-large { stroke-width: 9; opacity: .55; }
.plan-deco .rue.fine { stroke-width: 2; opacity: .35; }
.plan-deco .ilots { opacity: .14; }
.contact .carte-invite { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(244, 239, 231, .92), rgba(244, 239, 231, 0) 75%); }
.repere { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--marron); box-shadow: 0 8px 18px rgba(62, 51, 44, .25); margin-bottom: .3rem; }
.repere .logo-embleme { width: 1.7rem; color: var(--creme); transform: rotate(45deg); }
.repere::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid var(--marron); opacity: 0; animation: repere-onde 2.6s ease-out infinite; }
@keyframes repere-onde { 0% { opacity: .5; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.5); } }
.repere-adresse { margin: 0; font: 300 1.05rem/1.4 var(--serif); color: var(--marron-f) !important; }
.repere-adresse strong { font-weight: 400; font-size: 1.2rem; }
.repere-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.repere-note { margin: .2rem 0 0; font-size: .68rem !important; color: var(--doux) !important; }
.contact .carte-acces iframe { filter: grayscale(.6) sepia(.35) contrast(.95) brightness(1.03); }
@media (prefers-reduced-motion: reduce) { .repere::after { animation: none; } }
@media (max-width: 860px) { .contact .carte-acces { height: 15rem; } }
.contact .carte-acces { height: 17rem; }
.contact .carte-invite { gap: .45rem; padding: 1.2rem 1rem 2.2rem; }
.repere-note { position: absolute; left: 0; right: 0; bottom: .6rem; padding: 0 1rem; }
.repere-actions .btn { min-height: 2.5rem; padding: .7rem 1.4rem; }

/* =====================================================================
   EN-TÊTE SUR DEUX LIGNES (idée de Marine, 13 octobre) :
   ligne 1 = téléphone · logo · Réserver ; ligne 2 = menu complet.
   ===================================================================== */
:root { --entete: 118px; }
.entete-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 70px 48px; height: auto; gap: 0 2rem; align-items: center; }
.entete-tel { grid-column: 1; grid-row: 1; justify-self: start; display: inline-block; }
.marque { grid-column: 2; grid-row: 1; }
.entete-droite { grid-column: 3; grid-row: 1; justify-self: end; }
.nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; gap: clamp(1.4rem, 3vw, 2.8rem); height: 100%; align-items: center; border-top: 1px solid var(--trait); }
.nav a { white-space: nowrap; }
.nav .nav-mobile { display: block; }
@media (max-width: 1180px) { .entete-tel { display: inline-block; } }
@media (max-width: 1000px) {
  :root { --entete: 66px; }
  .entete-inner { grid-template-columns: 44px 1fr auto; grid-template-rows: var(--entete); gap: .5rem; }
  .entete-tel { display: none; }
  .burger { grid-column: 1; grid-row: 1; }
  .marque { grid-column: 2; grid-row: 1; }
  .entete-droite { display: flex; grid-column: 3; grid-row: 1; }
  .nav { grid-column: auto; grid-row: auto; border-top: 0; height: auto; justify-content: center; gap: 1.4rem; }
}

/* =========================================================================
   PAGE PRESS-ON : gammes, emplacements photos, formes, kit, étapes, demande
   ========================================================================= */
.po-tete-liens { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.po-gammes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; }
.po-gamme { display: flex; flex-direction: column; gap: .9rem; padding: 2rem 1.6rem 1.8rem; background: rgba(253, 251, 248, .78); border: 1px solid var(--trait); text-align: center; transition: border-color .4s, transform .5s var(--ease); }
.po-gamme:hover { border-color: var(--taupe); transform: translateY(-3px); }
.po-gamme-nom { font: 400 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }
.po-gamme-prix { font: 300 2.6rem/1 var(--serif); color: var(--marron-f); margin: 0; }
.po-gamme-prix small { font-size: .9rem; font-style: italic; margin-right: .2em; }
.po-gamme p { font-size: .92rem; color: var(--doux); margin: 0; }
.po-gamme .po-gamme-delai { font-size: .8rem; font-style: italic; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--trait); }
.po-gamme .lien { align-self: center; margin-top: .4rem; color: var(--marron); }
.po-gamme-perso { background: var(--marron); border-color: var(--marron); }
.po-gamme-perso .po-gamme-nom, .po-gamme-perso p, .po-gamme-perso .po-gamme-prix, .po-gamme-perso .lien { color: var(--creme); }
.po-gamme-perso .po-gamme-delai { border-top-color: rgba(244, 239, 231, .25); }
.po-note { max-width: 40rem; margin: 2rem auto 0; font-size: .85rem; color: var(--doux); }

.po-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); max-width: 60rem; margin: 3rem auto 0; }
.po-photo { margin: 0; }
.po-photo img, .po-photo-vide { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.po-photo-vide { display: grid; place-items: center; font-size: 1.1rem; color: var(--taupe); background: radial-gradient(ellipse at 50% 40%, var(--creme), var(--beige-charte)); border: 1px solid var(--trait); }
.po-photo figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; font: 400 .62rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.po-photo figcaption strong { font: 400 1.05rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--marron-f); }

.po-formes { display: flex; justify-content: center; gap: clamp(1.6rem, 6vw, 4.5rem); margin: 3rem 0 3.5rem; }
.po-formes figure { margin: 0; text-align: center; }
.po-formes svg { width: 2.6rem; height: auto; fill: rgba(222, 210, 195, .45); stroke: var(--marron); stroke-width: 1.1; stroke-linecap: round; }
.po-formes figcaption { margin-top: .8rem; font: 400 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); }

.po-kit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.po-kit-liste { list-style: none; margin: 0; padding: 0; columns: 1; }
.po-kit-liste li { position: relative; padding: .85rem 0 .85rem 1.8rem; border-bottom: 1px solid var(--trait); font: 400 1.15rem/1.3 var(--serif); color: var(--marron-f); }
.po-kit-liste li::before { content: "✦"; position: absolute; left: 0; top: 1.05rem; font-size: .6rem; color: var(--taupe); }

.po-etapes { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); counter-reset: none; }
.po-etapes li { border-top: 1px solid var(--marron); padding-top: 1.4rem; }
.po-etapes span { font: 300 2rem/1 var(--serif); color: var(--taupe); }
.po-etapes h3 { font: 400 .66rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; margin: 1rem 0 .8rem; color: var(--marron-f); }
.po-etapes p { font-size: .92rem; color: var(--doux); margin: 0; }
.po-livraison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3rem; }
.po-livraison > div { padding: 1.6rem 1.8rem; background: rgba(253, 251, 248, .78); border: 1px solid var(--trait); }
.po-livraison h3 { font: 400 1.4rem/1.2 var(--serif); color: var(--marron-f); margin: 0 0 .6rem; }
.po-livraison p { font-size: .92rem; color: var(--doux); margin: 0; }

.po-choix { border: 0; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap; gap: .6rem 2rem; align-items: center; }
.po-choix legend { float: left; margin-right: 1rem; font: 400 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--doux); }
.po-choix label { display: inline-flex; gap: .5rem; align-items: center; font: 400 .95rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--encre); cursor: pointer; }
.po-choix input { accent-color: var(--marron); }
.po-fichiers input[type="file"] { padding: .7rem 0; font-size: .85rem; border-bottom: 1px solid var(--trait); }
.po-fichiers input[type="file"]::file-selector-button { margin-right: 1rem; padding: .55rem 1rem; font: 400 .6rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--creme); background: var(--marron); border: 0; cursor: pointer; }
.po-fichiers small { font-size: .78rem; color: var(--doux); }
.po-validation { margin: 0; padding: 1rem 1.2rem; font-size: .85rem; color: var(--marron-f); background: rgba(222, 210, 195, .35); border-left: 2px solid var(--taupe); }

@media (max-width: 1000px) {
  .po-gammes { grid-template-columns: 1fr 1fr; }
  .po-etapes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .po-photos { grid-template-columns: 1fr 1fr; }
  .po-kit, .po-livraison { grid-template-columns: 1fr; }
  .po-formes { gap: 1.4rem; }
}
@media (max-width: 520px) {
  .po-gammes, .po-etapes { grid-template-columns: 1fr; }
  .po-photo figcaption { flex-direction: column; gap: .3rem; }
}

/* Accueil : formulaire de contact sous les infos pratiques */
.contact-message { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--trait); }
.contact-message-tete .titre { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.contact-message-tete p { color: var(--doux); font-size: .95rem; margin-top: 1rem; }
.contact-message .formulaire { margin-top: 0; gap: 1.4rem 1.8rem; }
@media (max-width: 860px) { .contact-message { grid-template-columns: 1fr; } }
.po-gamme .po-gamme-prix { font: 300 2.6rem/1 var(--serif); color: var(--marron-f); }
.po-gamme-perso .po-gamme-prix { color: var(--creme); }
.po-choix { display: flex; }
.po-choix legend { float: none; width: 100%; padding: 0; margin: 0 0 .9rem; }
.po-choix label { white-space: nowrap; }

/* Press-on sur mobile : version condensée. Gammes, photos, infos tailles et
   étapes défilent au doigt (avec points), le reste se resserre. */
@media (max-width: 760px) {
  .page-presson .section { padding: 3.2rem 0; }
  .page-presson .page-tete { padding: 2.6rem 0 2.4rem; }
  .page-presson .page-tete .chapo { font-size: .95rem; }
  .po-tete-liens { flex-wrap: nowrap; gap: .6rem; margin-top: 1.6rem; }
  .po-tete-liens .btn { flex: 1; padding-inline: .6rem; font-size: .58rem; letter-spacing: .14em; }
  .page-presson .chapo.mt-s { font-size: .92rem; }
  .page-presson .titre { font-size: clamp(1.7rem, 7vw, 2.1rem); }

  .po-rail { display: grid; grid-template-columns: none; grid-auto-flow: column; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); margin-inline: calc(-1 * var(--g)); padding: 0 var(--g) .4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .po-rail::-webkit-scrollbar { display: none; }
  .po-rail > * { scroll-snap-align: start; }
  .po-rail-points { display: flex; justify-content: center; gap: .45rem; margin-top: .9rem; }
  .po-rail-points span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--taupe); opacity: .35; transition: opacity .3s, width .3s; }
  .po-rail-points span.actif { opacity: 1; width: 1.2rem; border-radius: 1rem; background: var(--marron); }

  .po-gammes { grid-auto-columns: 62%; margin-top: 1.8rem; }
  .po-gamme { padding: 1.4rem 1.1rem 1.2rem; gap: .6rem; }
  .po-gamme .po-gamme-prix { font-size: 2.1rem; }
  .po-gamme p { font-size: .84rem; }
  .po-gamme .po-gamme-delai { font-size: .74rem; padding-top: .6rem; }
  .po-note { font-size: .78rem; margin-top: 1.2rem; }

  .po-photos { grid-auto-columns: 44%; margin-top: 1.8rem; }
  .po-photo figcaption { flex-direction: column; gap: .2rem; padding-top: .5rem; font-size: .54rem; }
  .po-photo figcaption strong { font-size: .95rem; }

  .po-formes { gap: 1.2rem; margin: 1.6rem 0 1.8rem; }
  .po-formes svg { width: 1.9rem; }
  .po-formes figcaption { font-size: .54rem; letter-spacing: .16em; margin-top: .5rem; }
  .po-blocs { grid-auto-columns: 78%; }
  .po-blocs .bloc { padding-right: .4rem; }
  .po-blocs .bloc h3 { padding-top: 1rem; margin-bottom: .7rem; }
  .po-blocs .bloc p { font-size: .86rem; }

  .po-kit { gap: 1.4rem; }
  .po-kit-liste { display: flex; flex-wrap: wrap; gap: .45rem; }
  .po-kit-liste li { padding: .45rem .8rem; border: 1px solid var(--trait); border-radius: 2rem; font: 400 .8rem/1.2 var(--sans); color: var(--marron-f); background: rgba(253, 251, 248, .7); }
  .po-kit-liste li::before { display: none; }

  .po-etapes { grid-auto-columns: 64%; margin-top: 1.8rem; }
  .po-etapes li { padding-top: 1rem; }
  .po-etapes span { font-size: 1.6rem; }
  .po-etapes h3 { margin: .7rem 0 .5rem; }
  .po-etapes p { font-size: .85rem; }
  .po-livraison { grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.6rem; }
  .po-livraison > div { padding: .9rem .8rem; }
  .po-livraison h3 { font-size: 1.2rem; margin-bottom: .3rem; }
  .po-livraison p { font-size: .76rem; line-height: 1.5; }

  .page-presson .formulaire { grid-template-columns: 1fr 1fr; gap: 1.1rem .9rem; margin-top: 1.8rem; }
  .page-presson .champ select { font-size: .9rem; }
  .po-fichiers input[type="file"] { padding: .45rem 0; font-size: .78rem; }
  .po-fichiers input[type="file"]::file-selector-button { padding: .45rem .7rem; }
  .page-presson .champ textarea { min-height: 5rem; }
  .po-validation { font-size: .8rem; padding: .8rem 1rem; }
  .page-presson .consentement { font-size: .78rem; }
  .page-presson .faq-item summary { padding: 1rem 0; font-size: 1.1rem; }
  .page-presson .faq-tete .titre-xl { font-size: 2rem; }
}
@media (min-width: 761px) { .po-rail-points { display: none; } }

/* Boutique : produits Simone Mahler et Soyun ajoutés depuis l'espace admin */
.soins-produits { margin-top: clamp(2.5rem, 5vw, 4rem); }
.soins-produits[hidden] { display: none; }
.soins-produits .sous-titre { text-align: center; margin-bottom: 1.6rem; }