/* =============================================================
   L'INSTITUT K — Site immersif (V2)
   Direction : luxe discret, ivoire & or, éditorial, beaucoup d'air
   ============================================================= */

/* ---------- Polices de marque (auto-hébergées) ---------- */
@font-face{
  font-family:"Alta";
  src:url("../fonts/alta_regular-webfont.woff2") format("woff2"),
      url("../fonts/alta_regular-webfont.woff") format("woff");
  font-weight:400;font-display:swap;font-style:normal;
}
@font-face{
  font-family:"Bicyclette";
  src:url("../fonts/bicyclette-regular-webfont.woff2") format("woff2"),
      url("../fonts/bicyclette-regular-webfont.woff") format("woff");
  font-weight:400;font-display:swap;font-style:normal;
}
/* Police de marque : CINZEL (auto-hébergée) — équivalent gratuit de Pierson,
   capitales romaines gravées, esprit monogramme du logo. */
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight:400 600;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-latinext.woff2") format("woff2");
  font-weight:400 600;font-display:swap;font-style:normal;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --ivory:#FAFAF8;        /* base blanc quasi pur */
  --cream:#FFFFFF;        /* blanc pur (sections alternées) */
  --sand:#EFEDE9;
  --taupe:#6E6A65;        /* gris neutre (texte secondaire) */
  --espresso:#131313;     /* noir franc */
  --ink:#1A1A18;          /* texte courant */
  --plum:#0D0D0D;         /* fond profond des sections sombres — noir franc */
  --gold:#9E6B43;         /* accent CARAMEL (mise en relief) — ex-or */
  --gold-deep:#7C5232;    /* caramel profond (texte accent sur fond clair) */
  --line:rgba(19,19,19,.14);
  --line-light:rgba(255,255,255,.18);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope","Avenir Next","Helvetica Neue","Helvetica",Arial,sans-serif;
  --brand:"Cinzel",var(--serif);

  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1440px;
  --halo:clamp(300px,32vw,470px);   /* rayon du halo dore .final <-> footer.
     Plafonne a 470px pour que la moitie basse tienne dans la hauteur du
     pied de page (~418px en desktop) et s'eteigne avant le bas de page. */
  --ease:cubic-bezier(.19,1,.22,1);
  --nav-decal:clamp(.7rem,1.5vh,1.15rem);   /* recul de la barre par rapport au bord haut */
  --nav-marge:clamp(.9rem,3vw,2.5rem);      /* marge laterale de la barre */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.js body{/* le smooth scroll gère */}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.65;
  font-size:clamp(1rem,.55rem + .55vw,1.075rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:1.02}
p{margin:0 0 1em}
/* SEO : H1 porteurs du mot-clé sans changer le rendu */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(p).hero__title,:where(p).page-hero__title{margin:0;font-weight:400;line-height:1.02}
:where(h1).hero__eyebrow,:where(h1).page-hero__sub{font-size:inherit;font-weight:inherit;line-height:inherit}
.page-hero__sub a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
::selection{background:var(--gold);color:var(--espresso)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Skip link ---------- */
.skip-link{position:fixed;top:-100px;left:1rem;z-index:2000;background:var(--espresso);color:var(--ivory);
  padding:.7rem 1.2rem;border-radius:2px;transition:top .3s}
.skip-link:focus{top:1rem}

:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* =============================================================
   PRÉLOADER
   ============================================================= */
.loader{position:fixed;inset:0;z-index:1500;background:var(--plum);
  display:grid;place-items:center;color:var(--ivory)}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.loader__k{font-family:var(--brand);font-size:clamp(3.5rem,10vw,6rem);color:var(--gold);
  letter-spacing:.04em;opacity:0;transform:translateY(14px);animation:loFade .9s var(--ease) .1s forwards}
.loader__logo{width:clamp(160px,34vw,250px);height:auto;opacity:0;transform:translateY(14px);
  animation:loFade .9s var(--ease) .1s forwards}
.loader__word{font-family:var(--sans);letter-spacing:.55em;font-size:.72rem;padding-left:.55em;
  opacity:0;animation:loFade .9s var(--ease) .35s forwards}
.loader__bar{width:180px;height:1px;background:var(--line-light);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;
  animation:loBar 1.6s var(--ease) .4s forwards}
@keyframes loFade{to{opacity:1;transform:none}}
@keyframes loBar{to{transform:scaleX(1)}}
.loader.is-done{transform:translateY(-100%);transition:transform 1s var(--ease);pointer-events:none}

/* =============================================================
   CURSEUR PERSONNALISÉ
   ============================================================= */
.cursor{position:fixed;top:0;left:0;z-index:1600;pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity .4s}
.cursor__dot{position:fixed;width:6px;height:6px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%)}
.cursor__ring{position:fixed;width:38px;height:38px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor.is-hover .cursor__ring{width:64px;height:64px;background:rgba(255,255,255,.08)}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* =============================================================
   NAV
   ============================================================= */
.nav{position:fixed;top:var(--nav-decal);left:0;width:100%;z-index:1000;
  transition:transform .5s var(--ease),color .5s}
.nav__inner{max-width:min(var(--maxw),calc(100% - 2*var(--nav-marge)));margin:0 auto;
  padding:1.1rem clamp(1.25rem,2.4vw,2.25rem);border-radius:46px;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  transition:background .5s var(--ease),backdrop-filter .5s,box-shadow .5s}
.nav__brand{display:flex;align-items:center;gap:.6rem;color:var(--ivory);transition:color .5s}
.nav__brand-mark{font-family:var(--brand);font-size:1.7rem;color:var(--gold);line-height:1}
.nav__brand-txt{font-family:var(--brand);font-size:.86rem;letter-spacing:.36em;padding-left:.4em}
/* Logo image dans la barre (bascule blanc → noir au scroll) */
.nav__logo{height:clamp(30px,3.6vw,38px);width:auto;display:block}
.nav__logo--dark{display:none}
.nav.is-scrolled .nav__logo--light{display:none}
.nav.is-scrolled .nav__logo--dark{display:block}
.nav__links{display:flex;gap:2.2rem;color:var(--ivory);transition:color .5s}
.nav__links a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:.3rem 0;
  white-space:nowrap;flex-shrink:0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);
  border:1px solid var(--line-light);padding:.75rem 1.35rem;border-radius:40px;transition:.45s var(--ease)}
.nav__cta:hover{background:var(--gold);border-color:var(--gold);color:var(--espresso)}
.nav__burger{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0}
.nav__burger span{display:block;height:1.5px;width:26px;background:currentColor;transition:.4s var(--ease)}
.nav__burger span:last-child{width:18px}
.nav.is-scrolled .nav__burger{color:var(--ink)}
.nav__burger.is-open span{background:var(--ivory)}
.nav__burger.is-open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger.is-open span:last-child{width:26px;transform:translateY(-3.75px) rotate(-45deg)}

/* Bascule vers le menu burger a 1260px : avec 7 entrees (ajout de « Produits »),
   la barre horizontale mesure ~840px et ne rentre plus en dessous de cette largeur.
   A reajuster si une entree de menu est ajoutee, retiree ou renommee. */
@media (max-width:1260px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__inner{padding:.95rem 1.15rem}
}

/* état scrollé : nav claire opaque, texte sombre */
/* au défilement : le texte passe en sombre, mais aucun fond, aucun bandeau */
.nav.is-scrolled{color:var(--ink)}
.nav.is-scrolled .nav__brand,.nav.is-scrolled .nav__links{color:var(--ink)}
.nav.is-scrolled .nav__cta{color:var(--ink);border-color:var(--line)}
.nav.is-scrolled .nav__cta:hover{color:var(--espresso);border-color:var(--gold)}
.nav.is-hidden{transform:translateY(calc(-100% - var(--nav-decal)));
  transition:transform .5s var(--ease),color .5s}

/* =============================================================
   MENU MOBILE
   ============================================================= */
.menu{position:fixed;inset:0;z-index:1400;background:var(--plum);color:var(--ivory);
  clip-path:circle(0% at calc(100% - 3rem) 3rem);transition:clip-path .8s var(--ease);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);visibility:hidden}
.menu.is-open{clip-path:circle(150% at calc(100% - 3rem) 3rem);visibility:visible}
.menu__nav{display:flex;flex-direction:column;gap:.3rem}
.menu__nav a{font-family:var(--serif);font-size:clamp(2.2rem,9vw,4rem);color:var(--ivory);
  display:flex;align-items:baseline;gap:1rem;opacity:0;transform:translateY(30px);transition:.6s var(--ease)}
.menu.is-open .menu__nav a{opacity:1;transform:none}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.12s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.18s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.24s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.30s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.36s}
.menu.is-open .menu__nav a:nth-child(6){transition-delay:.42s}
.menu__idx{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;color:var(--gold)}
.menu__foot{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;margin-top:3rem;
  font-size:.8rem;letter-spacing:.12em;color:var(--taupe)}
.menu__foot a{color:var(--ivory)}
.menu__cta{border:1px solid var(--gold);color:var(--gold)!important;padding:.6rem 1.3rem;border-radius:40px}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:flex;align-items:flex-end;color:var(--ivory);
  /* réserve la hauteur de la barre de nav (padding 2×1.5rem + logo) + une respiration,
     sinon le contenu, aligné en bas, remonte sous le logo sur les écrans peu hauts */
  padding-top:calc(3rem + clamp(30px,3.6vw,38px) + 1.5rem)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--plum)}
/* fallback diaporama (si un jour on remet des slides) */
.hero__slide{position:absolute;inset:-4% ;background-size:cover;background-position:center;
  opacity:0;transition:opacity 2.2s var(--ease);will-change:transform,opacity}
.hero__slide.is-active{opacity:1;animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,25,.45) 0%,rgba(20,16,25,.15) 35%,rgba(20,16,25,.55) 100%)}
.hero__grain{position:absolute;inset:0;opacity:.5;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.hero__content{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;
  padding:0 var(--pad) clamp(3rem,9vh,7rem)}
.hero__eyebrow{font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;margin:0 0 1.5rem;color:rgba(247,242,234,.9)}
.hero__title{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,min(10vw,15vh),9rem);
  letter-spacing:-.01em;margin:0 0 1.6rem}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__sub{max-width:46ch;font-size:clamp(1rem,.7rem+.5vw,1.2rem);color:rgba(247,242,234,.86);margin-bottom:1.5rem}
/* Preuve sociale du hero (clients + note) */
.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.5rem;margin:0 0 2.4rem;
  font-size:.82rem;letter-spacing:.05em;color:rgba(247,242,234,.8)}
.hero__proof-item{display:flex;align-items:center;gap:.55rem;margin:0}
.hero__proof strong{font-weight:500;color:var(--ivory)}
.hero__proof-sep{width:1px;height:1.15rem;background:rgba(247,242,234,.3)}
/* Jaune Google (#FBBC04), pour que les etoiles soient immediatement
   identifiees comme la note Google et non comme un element de la charte. */
.hero__stars{color:#FBBC04;font-size:.92rem;line-height:1;letter-spacing:.14em}
@media (max-width:520px){.hero__proof-sep{display:none}.hero__proof{gap:.45rem 1.2rem}}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}
/* Écrans peu hauts (portables 13-14") : on resserre le hero pour garder
   le contenu sous la barre de nav sans rien tronquer */
@media (max-height:700px){
  .hero__content{padding-bottom:clamp(2rem,5vh,3.5rem)}
  .hero__eyebrow{margin-bottom:1rem}
  .hero__title{margin-bottom:1rem}
  .hero__sub{margin-bottom:1rem}
  .hero__proof{margin-bottom:1.5rem}
}
.hero__scroll{position:absolute;z-index:2;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(247,242,234,.75)}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--ivory);
  animation:scrollDot 2.4s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(-110%)}60%,100%{transform:translateY(280%)}}

/* =============================================================
   BOUTONS & LIENS
   ============================================================= */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 2rem;border-radius:44px;
  overflow:hidden;transition:.5s var(--ease);white-space:nowrap}
.btn--gold{background:var(--gold);color:var(--espresso)}
.btn--gold::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn--gold:hover::before{transform:translateX(120%)}
.btn--gold:hover{background:#d8bd85}
.btn--ghost{color:var(--ivory);border:1px solid rgba(247,242,234,.4)}
.btn--ghost:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}
.btn--dark{background:var(--espresso);color:var(--ivory)}
.btn--dark:hover{background:var(--ink)}
.btn--lg{padding:1.25rem 2.6rem;font-size:.82rem}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.link-arrow span{transition:transform .45s var(--ease)}
.link-arrow:hover span{transform:translateX(6px)}

/* =============================================================
   TYPO UTILITAIRES
   ============================================================= */
.label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.6rem}
.label__no{color:var(--gold-deep);font-variant-numeric:tabular-nums}
.label--light{color:rgba(247,242,234,.7)}
.label--light .label__no{color:var(--gold)}

.section-head{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,8rem) var(--pad) clamp(2rem,5vh,3.5rem)}
.section-head__title{font-family:var(--serif);font-size:clamp(2.4rem,6vw,5rem);font-weight:300}
.section-head--light .section-head__title{color:var(--ivory)}

/* =============================================================
   UNIVERS
   ============================================================= */
.univers{background:var(--cream);padding-top:clamp(5rem,12vh,10rem)}
.univers__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(4rem,9vh,7rem)}
.univers__lead{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5.2vw,4.4rem);
  line-height:1.08;letter-spacing:-.01em;max-width:20ch;margin:0 0 3rem}
.univers__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:end;
  border-top:1px solid var(--line);padding-top:2rem}
.univers__meta p{max-width:52ch;margin:0}
/* Variante 2 colonnes avec vidéo (Esthederm) */
.univers__inner--split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.univers__inner--split .univers__lead{margin-bottom:2.4rem}
.univers__inner--split .univers__meta{flex-direction:column;align-items:start;gap:1.3rem}
.univers__visual{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/5;
  background:var(--plum);box-shadow:0 24px 60px -26px rgba(27,23,18,.5)}
.univers__video{width:100%;height:100%;object-fit:cover;display:block}
.univers__visual img{position:absolute;inset:0;top:-10%;width:100%;height:124%;object-fit:cover;display:block;will-change:transform}
.univers__brand{position:absolute;left:1.2rem;bottom:1rem;z-index:2;
  font-family:var(--serif);font-style:italic;font-size:1.1rem;letter-spacing:.02em;
  color:var(--ivory);text-shadow:0 1px 8px rgba(0,0,0,.45)}
@media (max-width:860px){
  .univers__inner--split{grid-template-columns:1fr}
  .univers__visual{aspect-ratio:16/10}
}

/* Marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:1.4rem 0;background:var(--ivory)}
.marquee__track{display:inline-flex;align-items:center;gap:2.5rem;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.4rem);font-style:italic;color:var(--espresso);
  animation:marq 43s linear infinite;will-change:transform}
.marquee__track i{color:var(--gold);font-style:normal;font-size:.7em}
@keyframes marq{to{transform:translateX(-50%)}}

/* =============================================================
   FEATURE (présentation immersive)
   ============================================================= */
.feature{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;background:var(--ivory)}
.feature__media{position:relative;overflow:hidden;min-height:70vh}
.feature__media img{position:absolute;inset:0;top:-10%;width:100%;height:124%;object-fit:cover;will-change:transform}
.feature__panel{padding:clamp(3rem,8vw,7rem) var(--pad);display:flex;flex-direction:column;justify-content:center}
.feature__title{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:300;margin:0 0 1.8rem}
.feature__title em{font-style:italic;color:var(--gold-deep)}
.feature__panel>p{max-width:46ch;color:var(--ink)}
.feature__list{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--line)}
.feature__list li{padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--taupe)}
.feature__list li span{color:var(--espresso);font-family:var(--serif);font-size:1.3rem;font-style:italic;margin-right:.6rem}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature__media{min-height:56vh}}

/* =============================================================
   SOINS SIGNATURE
   ============================================================= */
.soins{background:var(--cream)}
.soins__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
.soin{background:var(--ivory);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.soin:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(27,23,18,.3)}
.soin__img{aspect-ratio:4/3;overflow:hidden}
/* Cartes cadeaux : les 3 visuels sont des photos PORTRAIT (lustre, sérum, clé),
   avec des sujets composés verticalement. Un cadre 4/3 paysage n'en garderait
   qu'une bande centrale — d'où un cadre portrait 4/5 pour cette section. */
#cartes-cadeaux .soin__img{aspect-ratio:4/5}
.soin__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.soin:hover .soin__img img{transform:scale(1.07)}
.soin__body{padding:2rem;display:flex;flex-direction:column;flex:1;position:relative}
.soin__no{font-size:.7rem;letter-spacing:.2em;color:var(--gold-deep);margin-bottom:.8rem}
.soin__body h3{font-family:var(--serif);font-size:1.9rem;font-weight:400;margin-bottom:.7rem}
.soin__body p{font-size:.92rem;color:var(--taupe);flex:1}
/* Descriptif en plusieurs paragraphes (cartes cadeaux) : c'est le bloc qui
   occupe la hauteur restante, plus les <p> individuellement. */
.soin__desc{flex:1}
.soin__desc p{margin:0 0 .8rem}
.soin__desc p:last-child{margin-bottom:0}
.soin__meta{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.soin__meta>span{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--espresso)}
@media (max-width:860px){.soins__grid{grid-template-columns:1fr;max-width:520px}}
/* Mention sous les cartes cadeaux, calee sur la largeur de la grille */
.cartes-nb{max-width:var(--maxw);margin:2.2rem auto 0;padding:0 var(--pad);
  font-size:.88rem;color:var(--taupe)}
.cartes-nb em{font-style:normal;color:var(--gold-deep)}

/* Formules */
.formules{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vh,7rem) var(--pad)}
.formules__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:1.5rem}
/* padding-top élargi : le badge « La plus choisie » est en position absolue en haut à droite et
   chevauchait le titre (« Head Spa Premium » est trop large pour cohabiter sur la même ligne).
   On lui réserve sa propre bande. Appliqué aux 3 cartes pour que titres et prix restent alignés. */
.formule{position:relative;padding:4rem 2rem 2.6rem;border:1px solid var(--line);border-radius:4px;background:var(--ivory);
  display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.formule--feat{background:var(--cream);color:var(--ink);border:1.5px solid var(--gold);
  box-shadow:0 22px 50px -28px rgba(169,134,63,.55);transform:translateY(-6px)}
/* Meme relief que les cartes cadeaux (.soin:hover) : le souleve seul ne suffit
   pas, c'est l'ombre portee qui cree l'effet. La carte mise en avant garde un
   souleve plus marque, avec une ombre proportionnee. */
.formule:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(27,23,18,.3)}
.formule--feat:hover{transform:translateY(-12px);box-shadow:0 34px 64px -28px rgba(27,23,18,.34)}
.formule__tag{position:absolute;top:1.4rem;right:1.4rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:.35rem .7rem;border-radius:30px}
.formule h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin-bottom:.3rem}
.formule__dur{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.4rem}
.formule--feat .formule__dur{color:var(--gold-deep)}
/* flex:1 — le descriptif absorbe la hauteur restante, ce qui aligne le prix
   en bas de toutes les cartes quelle que soit la longueur du texte. */
.formule__desc{font-size:.9rem;color:var(--taupe);min-height:4.5em;flex:1}
.formule--feat .formule__desc{color:var(--taupe)}
/* Descriptif detaille en etapes : meme puce en tiret que les autres listes du site */
.formule__etapes{list-style:none;margin:0;padding:0}
.formule__etapes li{position:relative;padding-left:1rem;margin-bottom:.45rem;line-height:1.5}
.formule__etapes li:last-child{margin-bottom:0}
.formule__etapes li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--gold)}
/* Le soin visage ajoute par rapport a la formule precedente : mis en avant en bas de liste.
   Le poids 700 de Manrope est charge exprès pour cette ligne (le site s'arretait a 500). */
.formule__plus{margin-top:.9rem}
/* deux lignes « + » a la suite (Premium) : seule la premiere se detache du deroule */
.formule__plus + .formule__plus{margin-top:.45rem}
.formule__plus strong{font-weight:700;color:var(--ink)}
.formule__plus::before{background:var(--gold-deep)}
.formule__price{font-family:var(--serif);font-size:3rem;font-weight:300;margin:1.2rem 0 0}
.formule__price span{font-size:1.3rem;color:var(--gold-deep);vertical-align:middle}
.formule--feat .formule__price span{color:var(--gold-deep)}
@media (max-width:860px){.formules__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* =============================================================
   PRESTATIONS
   ============================================================= */
.prestations{background:var(--ivory)}
.presta-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(4rem,9vh,7rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
.presta{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/3.6;color:var(--ivory);display:block}
.presta__img{position:absolute;inset:0}
.presta__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.presta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,18,.05) 30%,rgba(20,16,18,.72) 100%);transition:opacity .5s}
.presta:hover .presta__img img{transform:scale(1.08)}
.presta__cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.8rem}
.presta__no{font-size:.68rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.5rem}
.presta__cap h3{font-family:var(--serif);font-size:1.7rem;font-weight:400}
.presta__go{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,242,234,.85);margin-top:.7rem;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.presta:hover .presta__go{opacity:1;transform:none}
@media (max-width:900px){.presta-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.presta-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* =============================================================
   POURQUOI (fond sombre)
   ============================================================= */
/* Section claire : le « cadre » reprend le fond du site (--ivory) en légèrement plus foncé
   (--sand), pour que le tableau — cellules ivoire, filets noirs — ressorte par-dessus. */
.why{background:var(--sand);color:var(--ink);position:relative}
.why::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:radial-gradient(circle at 20% 10%,var(--gold),transparent 40%)}
/* ⚠️ La gouttière (gap:1px) et la bordure SONT les filets du tableau : elles laissent voir le
   background de .why__grid. Ce bloc ne doit donc porter AUCUN padding, sinon la marge intérieure
   se peint elle aussi en noir et forme un gros cadre plein autour des cellules.
   L'inset latéral et la marge basse passent par width/margin (non peints par le background). */
.why__grid{position:relative;width:min(var(--maxw),100% - var(--pad) * 2);
  margin:0 auto clamp(5rem,11vh,8rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--espresso);
  border:1px solid var(--espresso)}
.why__item{background:var(--ivory);padding:clamp(2rem,3.5vw,3.2rem)}
.why__ico{width:34px;height:34px;fill:none;stroke:var(--gold-deep);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.4rem}
.why__item h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;margin-bottom:.6rem}
.why__item p{font-size:.9rem;color:var(--taupe);margin:0}
@media (max-width:900px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why__grid{grid-template-columns:1fr}}

/* =============================================================
   GALERIE
   ============================================================= */
.galerie{background:var(--cream)}
.gal-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(4rem,9vh,7rem);
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:clamp(.7rem,1.4vw,1.2rem)}
.gal{margin:0;overflow:hidden;border-radius:3px;cursor:pointer;position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.gal::after{content:"⤢";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;
  background:rgba(20,16,18,.25);opacity:0;transition:opacity .5s}
.gal:hover img{transform:scale(1.06)}
.gal:hover::after{opacity:1}
.gal--tall{grid-row:span 2}
.gal--wide{grid-column:span 2}
@media (max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gal--wide{grid-column:span 2}}
@media (max-width:560px){.gal-grid{grid-auto-rows:150px}.gal--wide{grid-column:span 1}.gal--tall{grid-row:span 1}}

/* =============================================================
   CONFIANCE
   ============================================================= */
.trust{background:var(--ivory)}
.trust__inner{max-width:1040px;margin:0 auto;padding:clamp(5rem,12vh,9rem) var(--pad);text-align:center}
.trust__quote{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.35;margin:0 0 3.5rem;letter-spacing:-.01em}
.trust__stats{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(2rem,6vw,5rem);
  border-block:1px solid var(--line);padding:2.6rem 0;margin-bottom:2.6rem}
.trust__stats>div{display:flex;flex-direction:column;align-items:center}
/* Les trois chiffres cles passent sur la police de marque (Cinzel, celle du logo) :
   gravee, capitale romaine, nettement plus « luxe » que le Cormorant courant.
   Elle est plus large et plus haute a taille egale, d'ou la taille legerement reduite. */
.trust__num{font-family:var(--brand);font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:400;
  letter-spacing:.03em;color:var(--gold-deep);line-height:1}
/* Le nombre et son unite sur UNE SEULE ligne, alignes sur la meme ligne de base.
   La hauteur de la rangee est donnee par le nombre : les 3 colonnes ont donc la
   meme hauteur de valeur, et leurs libelles s'alignent — y compris « 2017 » qui
   n'a pas d'unite. */
.trust__value{display:flex;align-items:baseline;justify-content:center;gap:.3rem}
.trust__unit{font-family:var(--serif);font-style:italic;color:var(--taupe);font-size:1.1rem}
.trust__stats p{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin:.8rem 0 0}
/* Les 2 actions « avis » : lire la fiche Google, ou laisser un avis */
.trust__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem}

/* =============================================================
   À PROPOS
   ============================================================= */
.about{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--cream)}
.about__media{position:relative;overflow:hidden;min-height:78vh;order:2}
.about__media img{position:absolute;inset:0;top:-10%;width:100%;height:124%;object-fit:cover;will-change:transform}
.about__panel{padding:clamp(3rem,8vw,7rem) var(--pad);display:flex;flex-direction:column;justify-content:center;order:1}
.about__title{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:300;margin:0 0 1.8rem}
.about__title em{font-style:italic;color:var(--gold-deep)}
.about__panel p{max-width:48ch;color:var(--ink)}
.about__sign{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--espresso);margin-top:1.5rem}
.about__sign span{display:block;font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);margin-top:.5rem}
@media (max-width:860px){.about{grid-template-columns:1fr}.about__media{min-height:56vh;order:0}.about__panel{order:0}}

/* =============================================================
   PAGE PROGRAMME DE FORMATION (formation-*.html)
   ============================================================= */
.prog{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.prog--center{display:flex;justify-content:center}
.prog__title{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:300;margin:0 0 2.2rem}
.prog__lead{max-width:56ch;color:var(--taupe);margin:0 0 2.4rem}
/* Titre tenu sur une seule ligne quelle que soit la largeur d'ecran.
   Au-dessus de ~730 px la taille ne bouge pas (le titre y tient deja) ; en
   dessous, 5.5vw prend le relais du plancher de 2rem qui provoquait le retour
   a la ligne. Le coefficient est calibre sur Georgia (la police de repli,
   14 % plus large que Cormorant) pour eviter tout debordement pendant le
   chargement de la police. */
.prog__title--une-ligne{white-space:nowrap;font-size:min(clamp(2rem,4.4vw,3.4rem),5.5vw)}

.prog__legal{margin:2.6rem 0 0;font-size:.76rem;line-height:1.7;color:var(--taupe);max-width:80ch}

/* Fiche « l'essentiel » — même principe de tableau que .why__grid :
   la gouttière de 1px et la bordure laissent voir le fond noir du conteneur,
   donc AUCUN padding ici (il se peindrait en noir lui aussi). */
.prog-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
  background:var(--espresso);border:1px solid var(--espresso)}
.prog-facts>div{background:var(--ivory);padding:clamp(1.3rem,2.2vw,1.9rem)}
.prog-facts dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.55rem}
.prog-facts dd{margin:0;font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--ink)}
.prog-facts dd span{display:block;margin-top:.4rem;font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--taupe)}

.prog-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;margin-top:1.8rem}
/* la mention tient sur une seule ligne : on leve le calibrage a 52ch
   (elle se remettra sur deux lignes sur les petits ecrans, faute de place) */
.prog-note p{margin:0;font-size:.85rem;color:var(--taupe)}

.prog-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem)}
.prog-cols--3{grid-template-columns:repeat(3,1fr)}
.prog-block h3{font-family:var(--serif);font-size:1.65rem;font-weight:400;margin:0 0 1.1rem}
.prog-day__hour{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.prog-list{list-style:none;margin:0;padding:0;color:var(--taupe);font-size:.93rem}
.prog-list li{position:relative;padding-left:1.3rem;margin-bottom:.65rem}
.prog-list li::before{content:"—";position:absolute;left:0;color:var(--gold-deep)}
.prog-bring{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--taupe)}
.prog-bring strong{color:var(--ink);font-weight:500}

.prog-cta{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:100%}
/* .btn est en white-space:nowrap : ces libellés-là sont trop longs pour tenir sur
   une ligne en mobile (« Contacter mon centre de formation par téléphone » ≈ 515px),
   on les autorise donc à passer à la ligne plutôt que de déborder de l'écran. */
.prog-cta .btn{white-space:normal;text-align:center;max-width:100%}
.prog-cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;max-width:100%}
.prog-cta__val{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--espresso);
  border-bottom:1px solid var(--line)}
.prog-cta__val:hover{color:var(--gold-deep);border-color:var(--gold-deep)}

@media (max-width:900px){
  .prog-facts{grid-template-columns:repeat(2,1fr)}
  .prog-cols,.prog-cols--3{grid-template-columns:1fr;gap:2.6rem}
}
@media (max-width:560px){.prog-facts{grid-template-columns:1fr}}

/* =============================================================
   CONTACT
   ============================================================= */
.contact{background:var(--ivory);border-top:1px solid var(--line)}
.contact__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,8rem) var(--pad);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,6rem)}
.contact__title{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.6rem);font-weight:300;margin:0 0 1.4rem}
.contact__col>p{max-width:42ch;color:var(--taupe);margin-bottom:2rem}
/* Bloc « accès & stationnement » — plusieurs paragraphes + liste, d'où sa propre boîte
   (le sélecteur .contact__col>p ci-dessus vise aussi le .label de la colonne : on ne le touche pas). */
.contact__access{max-width:44ch;color:var(--taupe);margin-bottom:2rem}
.contact__access p{margin:0 0 .9rem}
.contact__access ul{list-style:none;margin:0 0 .9rem;padding:0}
.contact__access li{position:relative;padding-left:1.2rem;margin-bottom:.45rem}
.contact__access li::before{content:"—";position:absolute;left:0;color:var(--gold-deep)}
/* une phrase qui introduit une seconde liste : on la detache un peu de la liste precedente */
.contact__access ul + p{margin-top:1.4rem}
.contact__tip{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--taupe)}
/* Sous le tableau des horaires : celui-ci se termine deja par un filet,
   inutile d'en ajouter un second juste en dessous. */
.contact__hours + .contact__tip{border-top:none;padding-top:0;margin-top:1.6rem;
  max-width:none}  /* pleine largeur de la colonne : la phrase tient sur 2 lignes */
.contact__tip em{font-style:normal;color:var(--gold-deep)}
.contact__list{list-style:none;padding:0;margin:0 0 2.5rem}
.contact__list li{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.contact__list li span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.contact__list li a{font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--espresso)}
.contact__list li a:hover{color:var(--gold-deep)}
.contact__hours span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);display:block;margin-bottom:.8rem}
.contact__hours table{width:100%;border-collapse:collapse}
.contact__hours td{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.contact__hours td:last-child{text-align:right;color:var(--taupe)}
@media (max-width:800px){.contact__inner{grid-template-columns:1fr}}

/* =============================================================
   CTA FINAL
   ============================================================= */
.final{position:relative;overflow:hidden;color:var(--ivory);text-align:center}
.final__bg{position:absolute;inset:0;background:var(--plum);z-index:0}
/* Halo dore centre sur la LIGNE qui separe .final du pied de page :
   moitie haute ici, moitie basse dans .footer--halo. Le rayon est exprime
   dans la meme unite dans les deux blocs (tous deux pleine largeur), donc
   les deux moities coincident exactement. */
.final__bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle var(--halo) at 50% 100%,rgba(201,169,106,.35),transparent)}
.final__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:clamp(6rem,16vh,12rem) var(--pad)}
.final__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,9vw,7.5rem);
  line-height:1.02;margin:0 0 2.6rem}
.final__title em{font-style:italic;color:var(--gold)}
/* Accueil : le titre final descend d'une ligne (sa propre hauteur de ligne :
   taille de police x 1.02), l'ecart reste donc d'une ligne a toutes les tailles. */
.page-home .final__title{margin-top:calc(clamp(2.8rem,9vw,7.5rem) * 1.02)}

/* =============================================================
   FOOTER
   ============================================================= */
/* Meme noir que le bloc .final juste au-dessus (--plum) : la couture disparait
   et le halo dore se lit comme un seul cercle continu a cheval sur les 2 blocs.
   Applique a TOUS les pieds de page pour rester homogene sur les 15 pages. */
.footer{background:var(--plum);color:rgba(247,242,234,.72);padding:clamp(3rem,7vh,5rem) var(--pad) 2rem}
/* Uniquement sur les pages qui se terminent par le bloc .final (5 sur 15) :
   les 10 fiches formation finissent sur une section claire, un halo y serait
   incomprehensible. La classe est posee dans le HTML, pas devinee en CSS. */
.footer--halo{position:relative;overflow:hidden}
.footer--halo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle var(--halo) at 50% 0%,rgba(201,169,106,.35),transparent)}
.footer--halo>*{position:relative;z-index:1}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2.5rem;
  padding-bottom:3rem;border-bottom:1px solid var(--line-light)}
.footer__logo{width:120px;display:block;margin:0 auto 1.2rem}
.footer__brand p{max-width:34ch;font-size:.88rem;margin:0}
.footer__nav{display:flex;flex-direction:column;gap:.7rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.footer__nav a:hover{color:var(--gold)}
.footer__contact{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;font-size:.9rem}
.footer__contact a:hover{color:var(--gold)}
.footer__qualiopi{width:120px;background:#fff;padding:.5rem;border-radius:3px;
  display:block;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* Le macaron Qualiopi ouvre le certificat : on le rend visiblement cliquable */
.footer__qualiopi-link{display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:.45rem;margin-top:1rem}
.footer__qualiopi-link span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,242,234,.6);transition:color .3s}
.footer__qualiopi-link:hover .footer__qualiopi{transform:translateY(-3px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}
.footer__qualiopi-link:hover span{color:var(--gold)}
.footer__bottom{max-width:var(--maxw);margin:0 auto;padding-top:1.6rem;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:1rem;font-size:.72rem;letter-spacing:.08em;color:var(--taupe)}
.footer__legal a:hover{color:var(--gold)}
@media (max-width:800px){.footer__top{grid-template-columns:1fr;gap:2rem}}
/* Le bloc haut du pied de page (marque, menu, coordonnees, logo Qualiopi et
   certificat) a ete retire des 15 pages : il ne reste que la ligne de bas de
   page, on resserre donc la hauteur du bandeau partout. */
.footer{padding-top:clamp(2rem,4vh,3rem)}

/* =============================================================
   FAB (bouton flottant)
   ============================================================= */
.fab{position:fixed;right:1.5rem;bottom:1.5rem;z-index:900;background:var(--gold);color:var(--espresso);
  padding:1rem 1.6rem;border-radius:50px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 18px 40px -14px rgba(201,169,106,.7);
  opacity:0;transform:translateY(30px) scale(.9);transition:.6s var(--ease),background .4s}
.fab.is-visible{opacity:1;transform:none}
.fab:hover{background:#d8bd85}
@media (max-width:560px){.fab{right:1rem;bottom:1rem;padding:.85rem 1.3rem}}

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lightbox{position:fixed;inset:0;z-index:1700;background:rgba(16,12,20,.94);backdrop-filter:blur(8px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:86vh;object-fit:contain;border-radius:3px;
  transform:scale(.94);transition:transform .5s var(--ease)}
.lightbox.is-open img{transform:scale(1)}
.lightbox__close,.lightbox__nav{position:absolute;background:none;border:none;color:var(--ivory);
  cursor:pointer;font-size:2.4rem;line-height:1;padding:1rem;transition:color .3s}
.lightbox__close{top:1rem;right:1.5rem;font-size:2.8rem}
.lightbox__close:hover,.lightbox__nav:hover{color:var(--gold)}
.lightbox__nav--prev{left:1rem;top:50%;transform:translateY(-50%);font-size:3.5rem}
.lightbox__nav--next{right:1rem;top:50%;transform:translateY(-50%);font-size:3.5rem}

/* =============================================================
   RÉVÉLATIONS (gated .js)
   ============================================================= */
.js .reveal-fade{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal-fade.is-in{opacity:1;transform:none}
.js .reveal-line{display:block;overflow:hidden}
.js .reveal-line>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.js .reveal-line.is-in>span{transform:none}
.js .reveal-word{display:inline-block;overflow:hidden;vertical-align:top}
.js .reveal-word::after{content:"";}
.js .univers__lead .reveal-word{opacity:0;transform:translateY(60%);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .univers__lead.is-in .reveal-word{opacity:1;transform:none}
.js .univers__lead.is-in .reveal-word:nth-child(2){transition-delay:.05s}
.js .univers__lead.is-in .reveal-word:nth-child(3){transition-delay:.1s}
.js .univers__lead.is-in .reveal-word:nth-child(4){transition-delay:.15s}
.js .univers__lead.is-in .reveal-word:nth-child(5){transition-delay:.2s}
.js .univers__lead.is-in .reveal-word:nth-child(6){transition-delay:.25s}

/* Décalage en cascade dans les grilles */
.js .soins__grid .is-in:nth-child(2){transition-delay:.12s}
.js .soins__grid .is-in:nth-child(3){transition-delay:.24s}
.js .presta-grid .is-in:nth-child(2){transition-delay:.06s}
.js .presta-grid .is-in:nth-child(3){transition-delay:.12s}
.js .presta-grid .is-in:nth-child(4){transition-delay:.18s}
.js .presta-grid .is-in:nth-child(5){transition-delay:.24s}
.js .presta-grid .is-in:nth-child(6){transition-delay:.3s}
.js .presta-grid .is-in:nth-child(7){transition-delay:.36s}
.js .presta-grid .is-in:nth-child(8){transition-delay:.42s}
.js .presta-grid .is-in:nth-child(9){transition-delay:.48s}

/* =============================================================
   PAGES INTÉRIEURES
   ============================================================= */
/* Même garde-fou que .hero : le contenu est calé en bas et grandit vers le haut, donc on réserve
   la hauteur de la barre de nav (padding 2×1.5rem + logo) + une respiration, sinon le fil d'Ariane
   « Accueil — … » vient toucher le logo sur les écrans peu hauts. */
.page-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--ivory);
  padding-top:calc(3rem + clamp(30px,3.6vw,38px) + 2.5rem)}
.page-hero__bg{position:absolute;inset:0;z-index:0}
.page-hero__bg img{position:absolute;top:-10%;left:0;width:100%;height:124%;object-fit:cover;will-change:transform}
/* Banniere video (page Produits) : meme cadre que l'image, sans le debord de
   124 % qui n'a de sens qu'avec le parallaxe. */
.page-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Le film Esthederm est tres clair : le voile d'origine (.2 au centre, .72 en bas)
   ne suffit plus a detacher le texte ivoire du hero. On l'assombrit sur cette
   seule banniere, la ou le fil d'ariane, le titre et le sous-titre se posent. */
/* Banniere d'equipe : photo de groupe en 3:2 dans un cadre deux fois plus large.
   En 'cover' le navigateur rognait 20 % en haut et 20 % en bas, soit les tetes et
   le bas du fauteuil. On passe donc en 'contain' : la photo entiere, a toute
   largeur d'ecran. Le fond reprend les teintes relevees sur les bords de la toile
   du studio (#efe0d0 en haut, #cdb59c en bas) pour que les marges laterales se
   confondent avec le decor. */
.page-hero--equipe .page-hero__bg{
  background:linear-gradient(180deg,#efe0d0 0%,#e8d5c1 35%,#e0cbb5 70%,#cdb59c 100%)}
.page-hero--equipe .page-hero__bg img{
  position:absolute;inset:0;top:0;width:100%;height:100%;object-fit:contain}
.page-hero--video .page-hero__bg::after{
  background:linear-gradient(180deg,rgba(20,16,25,.55) 0%,rgba(20,16,25,.44) 38%,rgba(20,16,25,.86) 100%)}
.page-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,25,.5) 0%,rgba(20,16,25,.2) 45%,rgba(20,16,25,.72) 100%)}
.page-hero__grain{position:absolute;inset:0;opacity:.4;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.page-hero__inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;
  padding:0 var(--pad) clamp(3rem,8vh,6rem)}
.page-hero__crumb{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,242,234,.75);
  margin:0 0 1.4rem;display:flex;gap:.6rem;align-items:center}
.page-hero__crumb a:hover{color:var(--gold)}
.page-hero__crumb span{color:var(--gold)}
.page-hero__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,min(8vw,13vh),6.5rem);line-height:1}
.page-hero__title em{font-style:italic;color:var(--gold)}
.page-hero__sub{max-width:40ch;margin:1.4rem 0 0;color:rgba(247,242,234,.85);font-size:clamp(1rem,.7rem+.4vw,1.15rem)}

.section{padding:clamp(4rem,10vh,8rem) 0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--plum);color:var(--ivory)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:820px}

/* Bloc intro éditorial */
.intro-block{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,8rem) var(--pad);
  display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.intro-block__lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.15;letter-spacing:-.01em;margin:0}
.intro-block__lead em{font-style:italic;color:var(--gold-deep)}
.intro-block__body p{max-width:56ch}
/* Bouton « Découvrir nos produits » sous le texte d'introduction (page Produits) */
.intro-block__cta{margin-top:2.2rem}
@media (max-width:860px){.intro-block{grid-template-columns:1fr;gap:1.5rem}}

/* Équipe */
.team{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.team__title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;margin:0 0 .4rem}
.team__kicker{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 2.2rem}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.8rem)}
.team-grid--3{grid-template-columns:repeat(3,1fr);max-width:900px}
.member{text-align:left}
.member__img{aspect-ratio:3/4;overflow:hidden;border-radius:4px;margin-bottom:1rem;background:var(--sand)}
.member__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;filter:grayscale(.15)}
.member:hover .member__img img{transform:scale(1.05);filter:grayscale(0)}
.member h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0}
.member .role{font-size:.82rem;color:var(--taupe);margin:.3rem 0 0;line-height:1.4}
@media (max-width:1040px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.team-grid,.team-grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.team-grid,.team-grid--3{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}

/* Liste de tarifs / prestations détaillées */
.tarifs{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4rem)}
.tarif-cat{border-top:1px solid var(--line);padding-top:1.6rem}
.tarif-cat h3{font-family:var(--serif);font-size:1.8rem;font-weight:400;margin:0 0 1.2rem;display:flex;align-items:baseline;gap:.8rem}
.tarif-cat h3 span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold-deep)}
.tarif-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;align-items:baseline}
.tarif-row .t-name{color:var(--ink)}
.tarif-row .t-name em{display:block;font-style:normal;font-size:.8rem;color:var(--taupe);margin-top:.15rem}
.tarif-row .t-price{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--espresso);white-space:nowrap}
@media (max-width:820px){.tarifs{grid-template-columns:1fr}}

/* Cartes formation */
.form-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
.form-card{position:relative;overflow:hidden;border-radius:4px;background:var(--ivory);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.form-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(27,23,18,.3)}
.form-card__img{aspect-ratio:16/10;overflow:hidden}
.form-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.form-card:hover .form-card__img img{transform:scale(1.06)}
.form-card__body{padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}
.form-card__tag{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.6rem}
.form-card__body h3{font-family:var(--serif);font-size:1.4rem;font-weight:400;line-height:1.15;margin-bottom:.5rem}
.form-card__body p{font-size:.86rem;color:var(--taupe);flex:1;margin-bottom:1.1rem}
.form-card__no{font-weight:600;color:inherit}
.form-card__meta{list-style:none;margin:0 0 1.1rem;padding:0;flex:1;
  font-size:.85rem;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:.62rem}
.form-card__meta li{display:flex;align-items:center;gap:.62rem}
.ico-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.25rem;height:1.25rem;flex:none;color:var(--gold-deep);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sep{opacity:.4;margin:0 .3rem}
.form-card__meta .form-card__deposit{color:var(--gold-deep)}
.form-card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--line)}
.form-card__price{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--espresso)}

/* ---------- Liste de raisons (section Esthederm) ---------- */
/* saut d'une ligne avant la liste : .8rem d'origine + 1 interligne (1.65rem) */
.feature__amorce{margin:1.4rem 0 2.45rem;color:var(--espresso)}
.feature__raisons{list-style:none;margin:0;padding:0;font-size:.94rem;color:var(--taupe);
  columns:2;column-gap:clamp(1.5rem,3vw,2.5rem)}
.feature__raisons li{position:relative;padding-left:1.05rem;margin-bottom:.6rem;break-inside:avoid}
.feature__raisons li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--gold)}
@media (max-width:1100px){.feature__raisons{columns:1}}

/* ---------- Cartes soin & cartes cadeaux ---------- */
/* Numeros des cartes cadeaux sur la police de marque (Cinzel, celle du logo et
   des chiffres cles), en plus gros que le titre (1,35rem). */
#cartes-cadeaux .soin__body h3 .soin__no{margin-right:.55rem;vertical-align:baseline;
  font-family:var(--brand);font-size:1.4rem;font-weight:400;letter-spacing:.05em}
/* Titres des cartes cadeaux : casse normale, plus petits que le corps serif
   habituel (1,9rem -> 1,35rem). */
#cartes-cadeaux .soin__body h3{font-size:1.35rem;
  /* une ligne blanche entre le titre et le descriptif :
     marge d'origine (.7rem) + une hauteur de ligne du texte (1.5rem = 24px) */
  margin-bottom:2.2rem}
.soin__zones{list-style:none;margin:.35rem 0 0;padding:0;font-size:.92rem;color:var(--taupe)}
/* la liste des zones colle a la phrase qui l'introduit (« ... selon votre besoin : »),
   sans ligne blanche entre les deux */
.soin__body p:has(+ .soin__zones){margin-bottom:0}
.soin__zones li{position:relative;padding-left:1rem;margin-bottom:.3rem}
.soin__zones li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--gold)}

/* ---------- Page L'équipe ---------- */
.page-equipe .feature{grid-template-columns:.85fr 1.15fr;
  padding-top:clamp(3.5rem,8vh,6.5rem)}
.page-equipe .feature__media{min-height:78vh}
.equipe__role{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.4vw,1.25rem);
  color:var(--gold-deep);max-width:34ch;margin:-1.2rem 0 1.8rem;line-height:1.4}
.section-head--center{text-align:center}
.recit{max-width:62rem;margin:0 auto;padding:0 var(--pad) clamp(4rem,10vh,7rem)}
.recit__lead{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.85rem);font-weight:300;line-height:1.45;
  max-width:44ch;margin:0 auto;text-align:center;color:var(--espresso)}
.recit__rule{width:64px;height:1px;background:var(--gold);margin:clamp(2rem,4vh,3rem) auto}
.recit__cols{columns:2;column-gap:clamp(2rem,4vw,4rem)}
.recit__cols p{margin:0 0 1.2rem;break-inside:avoid}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);
  max-width:52rem;margin:clamp(2.5rem,5vh,4rem) auto 0;padding-top:clamp(2rem,4vh,3rem);
  border-top:1px solid var(--line);text-align:center}
/* Meme traitement que les chiffres cles de l'accueil : police de marque (Cinzel),
   plus large et plus haute a taille egale, d'ou la taille legerement reduite. */
.chiffres dt{font-family:var(--brand);font-size:clamp(1.75rem,3.5vw,2.6rem);font-weight:400;
  letter-spacing:.03em;color:var(--gold-deep);line-height:1}
.chiffres dd{margin:.55rem 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
@media (max-width:860px){.recit__cols{columns:1}}
@media (max-width:640px){.chiffres{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Page Formations ---------- */
/* resserre l'espace entre la fin de l'intro et le catalogue */
.page-formations .intro-block{padding-bottom:0}
/* la phrase du bandeau tient sur une seule ligne : on leve le calibrage a 40ch
   (elle se remettra naturellement sur deux lignes sur les petits telephones) */
.page-formations .page-hero__sub{max-width:none}
/* idem page Produits : la phrase tient sur une seule ligne */
.page-produits .page-hero__sub{max-width:none}
/* Colonne de gauche de l'intro : la phrase d'accroche, puis le logo Qualiopi
   centre juste en dessous d'elle. Le texte courant reste dans la colonne de droite. */
.intro-block__aside{display:flex;flex-direction:column;gap:0}
/* meme bord gauche que l'accroche, separe d'exactement une ligne :
   on reprend la taille de police de .intro-block__lead x son line-height (1.15) */
.qualiopi-mark{margin:calc(clamp(1.8rem,3.6vw,3rem) * 1.15) 0 0;text-align:left}
.qualiopi-mark img{display:inline-block;width:clamp(150px,16vw,190px);height:auto}
.page-formations .section--cream{padding-bottom:clamp(1rem,2vh,1.5rem)}
.page-formations .section--cream + .section{padding-top:clamp(1rem,2vh,1.5rem)}
@media (max-width:960px){.form-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.form-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* Bandeau infos (financement / qualiopi) */
.info-band{background:var(--espresso);color:var(--ivory)}
.info-band__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vh,5rem) var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.info-band__item h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0 0 .6rem;color:var(--gold)}
.info-band__item p{font-size:.9rem;color:rgba(247,242,234,.72);margin:0}
.info-band--stats .info-band__item{text-align:center}
/* Chiffres de resultats des fiches formation (100 % / 100 % / 0 %) sur la police
   de marque, comme les chiffres cles de l'accueil et de la page L'equipe. */
.info-band--stats .info-band__item h3{font-family:var(--brand);font-size:1.85rem;
  font-weight:400;letter-spacing:.03em}
/* Formations : bandeau marron, texte blanc, items centres */
.page-formations .info-band{background:var(--gold-deep)}
.page-formations .info-band__item{text-align:center}
.page-formations .info-band__item h3{color:#fff;font-weight:600}
.page-formations .info-band__item p{color:rgba(255,255,255,.9)}
@media (max-width:820px){.info-band__inner{grid-template-columns:1fr;gap:1.8rem}}

/* =============================================================
   ACCESSIBILITÉ — mouvement réduit
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal-fade,.js .reveal-line>span,.js .univers__lead .reveal-word{opacity:1!important;transform:none!important}
  .hero__slide{opacity:1}
  .marquee__track{animation:none}
  .cursor{display:none}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
}

/* Fallback sans JS : tout visible */
.no-js .loader{display:none}

/* =============================================================
   FEATURE — variante "photo entière"
   Cadre calé sur le ratio de la photo : aucun recadrage, pas de
   bandes. Le parallaxe est retiré sur ce bloc (le débord de 124 %
   qu'il exige recadrerait à nouveau l'image).
   ============================================================= */
@media (min-width:861px){
  .feature__media--full{aspect-ratio:1122/1402;min-height:0}
  .feature__media--full img{top:0;height:100%}
}

/* =============================================================
   TEXTE COURANT JUSTIFIE (tout le site)
   Ne sont justifies que les blocs de prose assez larges pour le
   supporter (46 a 80 signes). Restent ferres a gauche : les accroches en
   serif d'affichage (.intro-block__lead, .recit__lead, .hero__sub,
   .page-hero__sub), les intertitres .label, la ligne de role, les horaires,
   et le bandeau d'infos (.info-band__item), centre dans deux contextes —
   ecarterait les mots.
   hyphens:auto s'appuie sur le lang="fr" des pages : sans coupure, la
   justification creuse des lezardes, surtout dans .recit__cols (2 colonnes
   d'environ 45 signes) et dans les cartes .soin__body.
   ============================================================= */
.intro-block__body p,
.feature__panel>p:not(.label):not(.equipe__role):not(.feature__amorce),
.recit__cols p,
.about__panel p,
.univers__meta p,
.prog__lead,
.prog__legal,
.prog-note p,
.prog-bring,
.contact__access p,
.contact__tip,
.cartes-nb,
.soin__body p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* Sur telephone, l'indicateur "Defiler" se superposait au bouton
   "Prendre rendez-vous" (mesure : chevauchement de 28 px en hauteur).
   Il est de toute facon inutile au doigt : on le retire sous 860 px. */
@media (max-width:860px){.hero__scroll{display:none}}
/* Telephone : le texte du hero couvre presque toute la video portrait (plans clairs,
   peau, blouses blanches) ; voile plus soutenu au centre pour garder le titre lisible. */
@media (max-width:860px){.hero__veil{background:linear-gradient(180deg,rgba(20,16,25,.5) 0%,rgba(20,16,25,.4) 35%,rgba(20,16,25,.62) 100%)}}

/* Fiche Kobido : le visage est a droite de la photo. Sur telephone le cadre
   n'en montre que 37 % de la largeur ; centre, il coupait le nez et la pierre
   de jade. A 62 % le visage, la pierre et la main tiennent dans le cadre. */
@media (max-width:860px){.page-hero--kobido .page-hero__bg img{object-position:62% center}}

/* Fiche OR'iginel : photo carree dans un bandeau large, l'ordinateur n'en voit
   que 38 % de la hauteur. Centre, le cadre coupait le visage aux levres ; a 60 %
   le visage, la pierre chaude et les mains tiennent, les bougies restent au fond.
   Sur telephone le cadrage centre est deja bon. */
@media (min-width:861px){.page-hero--or-iginel .page-hero__bg img{object-position:50% 60%}}

/* Fiche OR'ysea : les mains de la praticienne sont en haut de la photo.
   Centre, le cadre les coupait (ordinateur comme telephone). On remonte la
   fenetre : 30 % sur ordinateur, et sur telephone on decale aussi vers le
   visage (58 %) en calant la photo en haut. */
@media (min-width:861px){.page-hero--or-ysea .page-hero__bg img{object-position:50% 30%}}
@media (max-width:860px){.page-hero--or-ysea .page-hero__bg img{object-position:58% 0%}}

/* Fiche OR'ame : photo verticale (2:3) dans un bandeau large, l'ordinateur n'en
   voit que 25 % de la hauteur. A 80 % la bande montre le geste : mains de la
   praticienne, dos et chevelure de la cliente. Plus haut, elle coupait le visage
   de la praticienne aux yeux. Sur telephone le cadrage centre montre toute la scene. */
@media (min-width:861px){.page-hero--or-ame .page-hero__bg img{object-position:50% 80%}}

/* Fiche Browlift : portrait serre (4:5), l'ordinateur n'en voit que 30 % de la
   hauteur ; a 30 % la bande garde les deux sourcils entiers et les yeux. Le nez
   ne tient pas dans la bande sans couper les sourcils. Telephone : centre. */
@media (min-width:861px){.page-hero--browlift .page-hero__bg img{object-position:50% 30%}}

/* Fiche Head Spa : l'arceau a eau dore est l'element fort de la photo, en
   haut. Centre, sa courbe sortait du cadre ; remonte (30 % ordinateur, 40 %
   telephone) on garde l'arceau entier, la main et la chevelure. */
@media (min-width:861px){.page-hero--head-spa .page-hero__bg img{object-position:50% 30%}}
@media (max-width:860px){.page-hero--head-spa .page-hero__bg img{object-position:50% 40%}}

/* Fiche Madérothérapie : la serviette porte le monogramme K brodé, en haut de
   la photo. Remontée à 35 % (ordinateur) / 40 % (téléphone, décalée à 42 %),
   la bande garde le K, le rouleau en bois et la main. */
@media (min-width:861px){.page-hero--maderotherapie .page-hero__bg img{object-position:50% 35%}}
@media (max-width:860px){.page-hero--maderotherapie .page-hero__bg img{object-position:42% 40%}}

/* Vignette Soins corps & visage : photo tres verticale dans une carte 3/3,6,
   on n'en voit que 67 % de la hauteur. Centree, le turban et les mains gantees
   sortaient par le haut ; a 30 % tout le visage, le turban et les mains tiennent. */
.presta--soins .presta__img img{object-position:50% 30%}

/* Vignettes 11 (mains & pieds) et 13 (beaute du regard) : photos verticales dans
   des cartes 3/3,6. 100 % (bas de la photo) garde les pieds entiers, orteils compris, et les mains ; 20 % garde la
   tete, les sourcils et la brosse (le tube passe sous la legende). */
.presta--mains .presta__img img{object-position:50% 100%}
.presta--regard .presta__img img{object-position:50% 20%}
/* Fiche Korean Lash Lift : photo carree, l'ordinateur en voit 38 % de la hauteur ;
   a 30 % sourcil, cils sous la pince, nez et levre. Telephone : 38 % en largeur
   pour ne pas couper la pince qui entre par la gauche. */
@media (min-width:861px){.page-hero--korean .page-hero__bg img{object-position:50% 30%}}
@media (max-width:860px){.page-hero--korean .page-hero__bg img{object-position:38% 50%}}

/* Vignette 14 (beaute du corps) : a 30 % l'appareil et les mains restent en
   haut de la carte, la legende se pose sur le drap. */
.presta--corps .presta__img img{object-position:50% 30%}

/* Fiche Rehaussement de cils : portrait serre, l'ordinateur n'en voit que 30 %
   de la hauteur ; a 35 % la bande garde la pince, la brosse, les cils et le patch.
   Telephone : cadrage centre (tout le visage). */
@media (min-width:861px){.page-hero--rehaussement .page-hero__bg img{object-position:50% 35%}}

/* Vignettes 43 (epilations) et 44 (massages) : photos verticales ; 70 % garde la
   jambe, la spatule et les gants ; 40 % garde les deux clientes allongees. */
.presta--epilations .presta__img img{object-position:50% 70%}
.presta--massages .presta__img img{object-position:50% 40%}

/* Vignette 42 (maquillage permanent) : a 60 % l'aiguille et le sourcil restent au-
   dessus du degrade de la legende. */
.presta--maquillage-permanent .presta__img img{object-position:50% 60%}

/* =============================================================
   TELEPHONE — texte plus petit sur tout le site (demande du 15/09/2026)
   Toutes les tailles du site sont en rem : ramener la base de 16 px a 14,4 px
   reduit l'ecriture d'environ 10 % partout (titres, textes, boutons), avec les
   marges qui suivent dans la meme proportion.
   ============================================================= */
@media (max-width:860px){
  html{font-size:90%}
}

/* TELEPHONE — trois colonnes par ligne (demande du 15/09/2026) :
   cartes cadeaux (accueil), massages duo, formules Head Spa et Foot Spa, et les
   9 univers (prestations). Colonnes d'environ 110 px : cartes resserrees, textes
   reduits et alignes a gauche (le justifie creuse des trous sur 15 signes par ligne). */
@media (max-width:860px){
  /* --- cartes .soin : cartes cadeaux + massages duo --- */
  .soins__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:.5rem}
  .soin__img{aspect-ratio:1/1}
  #cartes-cadeaux .soin__img{aspect-ratio:3/4}
  .soin__body{padding:.7rem .55rem .8rem}
  .soin__no{font-size:.56rem;letter-spacing:.06em;line-height:1.35;margin-bottom:.4rem}
  .soin__no .sep{margin:0 .15rem}
  .soin__body h3,#cartes-cadeaux .soin__body h3{font-size:.84rem;line-height:1.2;margin-bottom:.6rem;
    -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  #cartes-cadeaux .soin__body h3 .soin__no{display:block;font-size:.95rem;margin:0 0 .25rem;letter-spacing:.05em}
  .soin__body p,.soin__desc p{font-size:.68rem;line-height:1.45;text-align:left;margin-bottom:.5rem}
  .soin__meta{flex-direction:column;align-items:flex-start;gap:.35rem;margin-top:.6rem;padding-top:.55rem}
  .soin__meta>span{font-size:.95rem}
  .soin .link-arrow{font-size:.58rem;letter-spacing:.08em;gap:.25rem}
  .soin:hover{transform:none}

  /* --- formules Head Spa / Foot Spa --- */
  .formules__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:.5rem}
  .formule{padding:.8rem .55rem .9rem}
  .formule--feat,.formule--feat:hover,.formule:hover{transform:none}
  .formule__tag{position:static;align-self:flex-start;font-size:.48rem;letter-spacing:.08em;padding:.2rem .4rem;margin-bottom:.5rem;white-space:nowrap}
  .formule h3{font-size:.86rem;line-height:1.2;margin-bottom:.25rem;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .formule__dur{font-size:.56rem;letter-spacing:.1em;margin-bottom:.6rem}
  .formule__desc{min-height:0}
  .formule__etapes li{font-size:.64rem;line-height:1.4;padding-left:.55rem;margin-bottom:.35rem;
    -webkit-hyphens:auto;hyphens:auto}
  .formule__etapes li::before{width:3px;top:.68em}
  .formule__plus{margin-top:.55rem}
  .formule__price{font-size:1.6rem;margin-top:.7rem}
  .formule__price span{font-size:.8rem}

  /* --- univers (9 vignettes) --- */
  .presta-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:.45rem}
  .presta__cap{padding:.5rem .45rem}
  .presta__no{font-size:.5rem;letter-spacing:.1em;margin-bottom:.15rem}
  .presta__cap h3{font-size:.78rem;line-height:1.15;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .presta__go{display:none}
}

/* TELEPHONE — page Formations : les 10 fiches par 3 sur chaque ligne
   (colonnes d'environ 110 px, meme principe que les cartes de Prestations). */
@media (max-width:860px){
  .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:.5rem}
  .form-card:hover{transform:none}
  .form-card__img{aspect-ratio:4/3}
  .form-card__body{padding:.65rem .5rem .75rem}
  .form-card__tag{font-size:.5rem;letter-spacing:.08em;margin-bottom:.35rem}
  .form-card__body h3{font-size:.8rem;line-height:1.2;margin-bottom:.5rem;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .form-card__meta{font-size:.6rem;line-height:1.3;gap:.4rem;margin-bottom:.6rem}
  .form-card__meta li{gap:.3rem;align-items:flex-start}
  .form-card__meta .ico{width:.8rem;height:.8rem;margin-top:.05rem}
  .form-card__foot{flex-direction:column;align-items:flex-start;gap:.3rem;padding-top:.5rem}
  .form-card .link-arrow{font-size:.56rem;letter-spacing:.08em;gap:.25rem}
  .form-card__price{font-size:.95rem}
}

/* TELEPHONE — banniere d'accueil : la mention « Institut de beaute • Centre de
   formation certifie Qualiopi — Nancy » remonte tout en haut, juste sous la barre
   du logo, et passe en plus petit. Le reste du texte reste cale en bas. */
@media (max-width:860px){
  .hero{align-items:stretch}
  .hero__content{display:flex;flex-direction:column;justify-content:flex-end}
  /* sur une seule ligne : taille proportionnelle a la largeur de l'ecran (≈ 8 px sur un
     iPhone de 390 px), plafonnee a .56rem ; espacement des lettres resserre */
  .hero__eyebrow{margin:0 0 auto;padding-bottom:1.5rem;font-size:min(2vw,.56rem);letter-spacing:.12em;line-height:1.7;white-space:nowrap}
}

/* TELEPHONE — banniere d'accueil a la hauteur exacte de l'ecran visible
   (100svh = ecran moins les barres du navigateur), pour voir d'un coup la mention,
   le titre, la phrase, les avis et les deux boutons. On retire le plancher de 620 px
   (qui debordait sur les petits telephones) et les 2 boutons passent cote a cote. */
@media (max-width:860px){
  .hero{height:100svh;min-height:480px;padding-top:calc(3rem + 30px + .6rem)}
  .hero__content{padding-bottom:clamp(1rem,3.5svh,2rem)}
  .hero__title{margin-bottom:clamp(.6rem,2svh,1.2rem)}
  .hero__sub{margin-bottom:clamp(.6rem,2svh,1.2rem)}
  .hero__proof{margin-bottom:clamp(.9rem,3svh,1.8rem)}
  .hero__actions{flex-wrap:nowrap;gap:.5rem}
  .hero__actions .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding:.9rem .5rem;font-size:.6rem;letter-spacing:.1em;line-height:1.25;white-space:normal}
}
/* TELEPHONE — accueil : « Revelez votre beaute naturelle » remonte. Il se place au milieu
   de l'espace libre entre la mention Qualiopi (en haut) et la phrase d'accroche (en bas) :
   le vide se partage a parts egales au-dessus et au-dessous du titre. */
@media (max-width:860px){
  .hero__title{margin-bottom:clamp(.6rem,2svh,1.2rem);padding-bottom:0}
  /* phrase, avis Google et boutons s'enchainent sous le titre ; tout le vide passe en bas de la banniere */
  .hero__sub{margin-bottom:clamp(.6rem,2svh,1.2rem);padding-bottom:0}
  .hero__actions{margin-bottom:0}
  /* remonte encore : ecart fixe sous la mention Qualiopi (~7 % de la hauteur d'ecran,
     ~60 px sur un iPhone) au lieu du partage a parts egales ; le vide restant passe sous le titre */
  .hero__eyebrow{margin-bottom:0;padding-bottom:clamp(1.5rem,7svh,4rem)}
  /* banniere plus petite : elle s'arrete sous les boutons au lieu de remplir tout l'ecran
     (la video portrait se recadre au centre de ce cadre plus court) */
  .hero{height:auto;min-height:0}
  .hero__content{padding-bottom:1.6rem}
}
/* Telephones peu hauts (ecran visible < 640 px) : titre et phrase un cran plus petits */
@media (max-width:860px) and (max-height:640px){
  .hero__title{font-size:2.5rem}
  .hero__sub{font-size:.88rem;line-height:1.5}
  .hero__proof{font-size:.72rem}
}

/* TELEPHONE — accueil : plus d'espace vide entre la banniere et « 01 L'univers »
   (etait clamp(5rem,12vh,10rem), soit ~72 px) ; on garde juste une respiration. */
@media (max-width:860px){
  .univers{padding-top:1.25rem}
  /* titre « L'excellence au service de la beaute » sous « 01 L'univers » avec un petit espace (marge 1,6rem -> 1rem) */
  #univers .label{margin-bottom:1rem}
  /* ecart titre -> descriptif resserre : marge 2,4rem -> .9rem, et 2rem -> .9rem sous le filet */
  #univers .univers__lead{margin-bottom:.9rem}
  #univers .univers__meta{padding-top:.9rem;gap:.9rem}
  /* photo de la cabine -> bandeau defilant : clamp(4rem,9vh,7rem) (~58-76 px) -> 1.25rem, comme au-dessus */
  #univers .univers__inner{padding-bottom:1.25rem}
  /* photo de la cabine sous « Notre histoire » : sur toute la largeur de l'ecran (plus de marges ni d'arrondi) */
  #univers .univers__visual{margin-inline:calc(-1 * var(--pad));border-radius:0;box-shadow:none}
  /* photo 1 recadree sur la piece a main LPG et la rangee de produits Esthederm (bande a ~70 %
     de la hauteur de la photo portrait) ; parallaxe coupee pour garder ce cadrage fixe */
  #univers .univers__visual{aspect-ratio:4/3}
  #univers .univers__visual img{top:0;height:100%;object-position:50% 66%;transform:none!important}
  /* photo de l'arche -> « — L'institut » : clamp(3rem,8vw,7rem) (~43 px) -> 1.25rem */
  #presentation .feature__panel{padding-top:1.25rem}
  /* titre « Le soin comme art de vivre » sous « — L'institut » avec un petit espace, comme « 01 L'univers » (1,6rem -> 1rem) */
  #presentation .label{margin-bottom:1rem}
  /* titre -> texte « Chaque membre de l'equipe... » : 1,8rem -> .7rem */
  #presentation .feature__title{margin-bottom:.7rem}
  /* texte -> liste (13 ans d'expertise...) : 1em + 2rem -> .8rem */
  #presentation .feature__panel>p:not(.label){margin-bottom:0}
  #presentation .feature__list{margin-top:.8rem}
  /* fin de la liste -> « 02 Les cartes cadeaux » : ~43 px + ~60-80 px -> 1.25rem + 1.25rem */
  #presentation .feature__panel{padding-bottom:1.25rem}
  #cartes-cadeaux .section-head{padding-top:1.25rem}
  /* titre « Un cadeau d'exception » sous « 02 Les cartes cadeaux » avec un petit espace, comme 01 et L'institut (1,6rem -> 1rem) */
  #cartes-cadeaux .label{margin-bottom:1rem}
  /* NB des cartes cadeaux -> « 03 La confiance » : ~100 px -> 1.25rem de chaque cote du changement de fond */
  #cartes-cadeaux{padding-bottom:1.25rem}
  #trust .trust__inner{padding-top:1.25rem}
  /* « Lire nos avis Google » + « Laisser un avis » centres dans leur bande : meme espace
     au-dessus (sous le filet des chiffres, 1,6rem) qu'en dessous (etait ~100 px) */
  #trust .trust__inner{padding-bottom:1.6rem}
  /* signature « Caroline Andre » -> « 05 Nous trouver » : ~43 px + ~84 px -> 2rem de chaque cote du filet (un peu d'air demande) */
  /* photo noir et blanc du salon : descendue pour voir le lustre en entier (le haut n'est
     plus rogne) et recentree un peu a droite, sur le lustre. Parallaxe coupee sur telephone
     pour cette photo : son decalage de ±8 % rognait a nouveau le haut du lustre. */
  #institut .about__media img{top:0;height:100%;object-position:62% 0;transform:none!important}
  #institut .about__panel{padding-bottom:2rem}
  /* texte « ...prendre soin de vous, vraiment. » -> signature : 1em + 1,5rem -> 1em + .2rem */
  #institut .about__sign{margin-bottom:0;margin-top:.2rem}
  #contact .contact__inner{padding-top:2rem}
  /* moins de blanc sous « Petite astuce » avant le bloc sombre « Prenez du temps pour vous » : ~100 px -> 2rem */
  #contact .contact__inner{padding-bottom:2rem}
  #contact .contact__tip{margin-bottom:0}
}

/* TELEPHONE — accueil, « 03 La confiance » : les 3 chiffres cles (100 % de satisfaction,
   13 ans d'expertise, 2017) sur une seule ligne, en 3 colonnes egales. */
@media (max-width:860px){
  .trust__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:1.4rem 0;margin-bottom:1.6rem}
  .trust__num{font-size:1.65rem;letter-spacing:0}
  .trust__unit{font-size:.8rem}
  .trust__value{gap:.15rem}
  .trust__stats p{font-size:.52rem;letter-spacing:.08em;line-height:1.35;margin-top:.45rem;text-align:center}
}

/* TELEPHONE — accueil, fin de page : « Offrez-vous une pause » remonte (haut du bloc
   ~135 px -> 2rem) et le pied de page est resserre (vide sous le bouton ~135 px -> 3rem,
   marges du pied de page ~34 px / ~29 px -> 1.2rem). */
@media (max-width:860px){
  #final .final__inner{padding-top:2rem;padding-bottom:3rem}
  .footer--halo{padding-top:1.2rem;padding-bottom:1.2rem}
  .footer--halo .footer__bottom{padding-top:.8rem;gap:.5rem}
}

/* TELEPHONE — Prestations : moins d'espace entre la banniere et « 01 Nouveaute | Les massages duo »
   (~84 px -> 1.6rem), meme petit ecart etiquette -> titre que sur l'accueil */
@media (max-width:860px){
  #nouveautes .section-head{padding-top:1.6rem}
  /* « 02 Nos formules bien-etre Head Spa » remonte d'une ligne de texte (1,65rem = 1 interligne) */
  #nouveautes .soins__grid + .formules{padding-top:calc(clamp(4rem,9vh,7rem) - 1.65rem)}
  /* « 03 Nos formules bien-etre Foot Spa » : meme ecart sous les formules Head Spa que 02 sous les cartes */
  #nouveautes .soins__grid + .formules{padding-bottom:0}
  #nouveautes .formules + .formules{padding-top:calc(clamp(4rem,9vh,7rem) - 1.65rem)}
  /* « 04 Nos univers » : meme ecart total (52 px) sous les formules Foot Spa, reparti de part et d'autre
     du changement de fond (1,6rem dessous, le reste au-dessus de l'etiquette) */
  #nouveautes .formules + .formules{padding-bottom:1.6rem}
  .prestations .section-head{padding-top:calc(clamp(4rem,9vh,7rem) - 1.65rem - 1.6rem)}
}

/* TELEPHONE — Prestations, « Tous nos tarifs » : sur deux rangees. Le texte prend toute la largeur
   (la grille 2 colonnes est posee en style inline, d'ou le !important), puis les boutons
   « Voir la plaquette » et « Nous appeler » en dessous, cote a cote. */
@media (max-width:860px){
  .info-band__inner[style]{grid-template-columns:1fr!important;gap:1.2rem;padding-block:2rem}
  .info-band__actions[style]{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem;justify-content:stretch}
  .info-band__actions .btn{justify-content:center;padding:.9rem .5rem;font-size:.62rem;letter-spacing:.1em}
}

/* Massages duo : la duree (30 min, 1h00, 1h30) toujours seule sur sa ligne, sous
   « 0X. Massage Duo », pour les 3 cartes et a toutes les largeurs d'ecran. */
#nouveautes .soin__no .sep{display:none}
#nouveautes .soin__no .soin__dur{display:block}

/* TELEPHONE — Produits : moins d'espace entre la banniere video et « Des cosmetiques haut
   de gamme... » (~169 px -> 1.6rem). */
@media (max-width:860px){
  #selection{padding-top:0}
  #selection .intro-block{padding-top:1.6rem;padding-bottom:1.6rem}
  /* et moins d'espace entre le bouton « Decouvrir nos produits » et la photo Esthederm */
  #selection{padding-bottom:0}
  /* bouton centre dans la largeur de l'ecran */
  #selection .intro-block__cta{display:flex;justify-content:center}
  /* titre « Institut Esthederm » sur une seule ligne (le retour a la ligne du HTML est neutralise) */
  #esthederm .feature__title br{display:none}
  #esthederm .feature__title{white-space:nowrap;font-size:min(2.2rem,8.2vw)}
  /* « Retrouvez notre boutique... » -> « Nous avons choisi Institut Esthederm pour : » -> liste :
     ecarts resserres (35 px -> ~14 px, puis 35 px -> ~12 px) */
  #esthederm .feature__panel>p:not(.label):not(.feature__amorce){margin-bottom:0}
  #esthederm .feature__amorce{margin:.95rem 0 .8rem}
  /* liste a puces -> « — Le bon produit » : ecart resserre de part et d'autre du bloc */
  #esthederm .feature__panel{padding-bottom:1.6rem}
  #conseil{padding-top:1.6rem}
}

/* TELEPHONE — toutes les pages interieures (Formations, Prestations, L'institut et les 10 fiches) :
   le fil d'ariane monte tout en haut de la
   banniere, sous la barre du logo ; le titre et le sous-titre restent cales en bas. */
@media (max-width:860px){
  .page-formations .page-hero,
  .page-prestations .page-hero,
  .page-equipe .page-hero,
  .page-produits .page-hero,
  .page-fiche .page-hero{align-items:stretch;padding-top:calc(3rem + 30px + .6rem)}
  .page-formations .page-hero__inner,
  .page-prestations .page-hero__inner,
  .page-equipe .page-hero__inner,
  .page-produits .page-hero__inner,
  .page-fiche .page-hero__inner{display:flex;flex-direction:column;justify-content:flex-end}
  .page-formations .page-hero__crumb,
  .page-prestations .page-hero__crumb,
  .page-equipe .page-hero__crumb,
  .page-produits .page-hero__crumb,
  .page-fiche .page-hero__crumb{margin:0 0 auto;padding-bottom:1.4rem}
  /* moins d'espace entre la banniere et « Des formations sur mesure... » (~169 px -> 1,6rem) */
  .page-formations .page-hero + .section{padding-top:0}
  .page-formations .page-hero + .section .intro-block{padding-top:1.6rem}
  /* descriptif de l'intro -> « — Le catalogue » : ecart resserre (~170 px -> 1,6rem + 1,6rem) */
  .page-formations .page-hero + .section{padding-bottom:1.6rem}
  #catalogue{padding-top:1.6rem}
  #catalogue .section-head{padding-top:0}
}

/* TELEPHONE — Formations : les 3 atouts (Qualiopi, financement, petit comite) sur une seule
   ligne, en 3 colonnes ; le bandeau brun devient beaucoup moins haut. */
@media (max-width:860px){
  .page-formations .info-band__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding-block:1.6rem}
  .page-formations .info-band__item h3{font-size:.8rem;line-height:1.2;margin-bottom:.35rem;
    -webkit-hyphens:auto;hyphens:auto}
  .page-formations .info-band__item p{font-size:.62rem;line-height:1.35}
}

/* TELEPHONE — Formations, bas de page : « Certificat Qualiopi » et « Nous contacter »
   cote a cote sur une seule ligne, de meme largeur. */
@media (max-width:860px){
  .final__actions[style]{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem}
  .final__actions .btn{justify-content:center;text-align:center;padding:.95rem .5rem;
    font-size:.62rem;letter-spacing:.09em;white-space:normal;line-height:1.25}
}

/* TELEPHONE — L'institut : moins d'espace entre la photo de Caroline et « — Notre histoire »
   (~84 px -> 1,6rem + 1,6rem de part et d'autre du changement de fond). */
@media (max-width:860px){
  .page-equipe .feature__panel{padding-bottom:1.6rem}
  #histoire .section-head{padding-top:1rem}
}

/* TELEPHONE — L'institut : « 7 passionnés », « 3 cultures » et « 50+ formations suivies »
   sur une seule ligne (la regle a 640 px les empilait). */
@media (max-width:860px){
  .chiffres{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
    margin-top:1.8rem;padding-top:1.4rem}
  .chiffres dt{font-size:1.5rem}
  .chiffres dd{font-size:.52rem;letter-spacing:.06em;line-height:1.35;margin-top:.4rem}
}

/* TELEPHONE — L'institut : la section « Qui sommes-nous ? » passe sur une colonne,
   le titre au-dessus de la photo de Caroline (sur telephone la grille 2 colonnes
   ecrasait le texte a cote de la photo). */
@media (max-width:860px){
  .page-equipe .feature{grid-template-columns:1fr;padding-top:1.6rem}
  .page-equipe .feature__panel{order:0;padding-top:0;padding-bottom:1.2rem}
  .page-equipe .feature__media{order:1;min-height:0;aspect-ratio:4/5}
  .page-equipe .feature__media img{position:absolute;inset:0;top:0;height:100%;object-fit:cover}
  .page-equipe .equipe__role{margin-top:-.6rem;margin-bottom:1.1rem}
}

/* TELEPHONE — les 10 fiches formation : moins d'espace entre la banniere et « 01 L'essentiel ». */
@media (max-width:860px){
  .page-fiche .page-hero + .section{padding-top:0}
  .page-fiche .page-hero + .section .prog{padding-top:1.6rem}
}

/* TELEPHONE — fiches formation : le tableau « en un coup d'oeil » sur 2 lignes de 3 colonnes
   (duree, horaires, tarif / financement, public, prerequis) au lieu d'une colonne. */
@media (max-width:860px){
  .prog-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prog-facts>div{padding:.7rem .55rem .8rem}
  .prog-facts dt{font-size:.5rem;letter-spacing:.1em;margin-bottom:.3rem}
  .prog-facts dd{font-size:.9rem;line-height:1.2;-webkit-hyphens:auto;hyphens:auto}
  .prog-facts dd span{font-size:.56rem;line-height:1.35;margin-top:.25rem}
}

/* TELEPHONE — fiches formation : « 02 Objectifs pedagogiques » remonte juste sous le bouton
   « Telecharger le programme » (l'espace entre les deux sections est supprime). */
@media (max-width:860px){
  .page-fiche .page-hero + .section{padding-bottom:1.2rem}
  .page-fiche .page-hero + .section + .section{padding-top:0}
}

/* TELEPHONE — fiches formation : le bouton « Telecharger le programme » centre sous la mention. */
@media (max-width:860px){
  .page-fiche .prog-note{justify-content:center;gap:.9rem}
  .page-fiche .prog-note .btn{align-self:center}
}

/* TELEPHONE — fiches formation : moins d'espace au-dessus des titres 03, 04 et 05
   (~84 px -> 1,6rem). Les deux premieres sections gardent leurs reglages ci-dessus. */
@media (max-width:860px){
  .page-fiche .section{padding-top:1.6rem;padding-bottom:1.6rem}
  .page-fiche .info-band__inner{padding-block:1.6rem}
}

/* TELEPHONE — fiches formation : le bandeau noir des resultats (100 % satisfaction,
   100 % reussite, 0 % abandon) sur une seule ligne, en 3 colonnes. */
@media (max-width:860px){
  .page-fiche .info-band--stats .info-band__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .page-fiche .info-band--stats .info-band__item h3{font-size:1.4rem;margin-bottom:.35rem}
  .page-fiche .info-band--stats .info-band__item p{font-size:.55rem;line-height:1.35}
}

/* TELEPHONE — fiches formation, bloc « Je m'inscris » : boutons plus petits pour que l'adresse
   e-mail et le numero tiennent sur la meme ligne que leur bouton. */
@media (max-width:860px){
  .page-fiche .prog-cta{gap:.7rem}
  .page-fiche .prog-cta .btn{font-size:.5rem;letter-spacing:.06em;padding:.7rem .75rem;line-height:1.3}
  .page-fiche .prog-cta__row{flex-wrap:nowrap;align-items:center;gap:.5rem}
  .page-fiche .prog-cta__row .btn{flex:0 1 auto;min-width:0}
  .page-fiche .prog-cta__val{font-size:.72rem;white-space:nowrap}
}

/* TELEPHONE — toutes les bannieres interieures reprennent le gabarit de l'accueil :
   hauteur calee sur leur contenu (et non 64 % de l'ecran), fil d'ariane en haut,
   titre et sous-titre en bas. */
@media (max-width:860px){
  .page-hero{height:auto;min-height:clamp(430px,60svh,540px)}
  .page-formations .page-hero__crumb,
  .page-prestations .page-hero__crumb,
  .page-equipe .page-hero__crumb,
  .page-produits .page-hero__crumb,
  .page-fiche .page-hero__crumb{margin:0 0 auto;padding-bottom:0}
  .page-hero__inner{padding-bottom:1.6rem}
}

/* TELEPHONE — banniere de L'institut & l'equipe : image portrait dediee.
   La photo de groupe est un 3:2 ; en 'contain' elle laissait deux bandes de
   degrade nettes au-dessus et au-dessous. On sert ici un fichier deja cadre au
   format de la banniere (le fond de studio y est prolonge en haut, fondu au
   flou en bas), donc plus de bandes, et une photo agrandie par IA. */
@media (max-width:860px){
  .page-hero--equipe .page-hero__bg{background:none}
  .page-hero--equipe .page-hero__bg img{
    position:absolute;inset:0;top:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 35%}
}

/* TELEPHONE — banniere Prestations : la photo est un panoramique 2:1, et le
   cadre portrait n'en montre qu'un tiers. Centre, il coupait le visage juste
   apres l'oeil. On decale la photo vers la gauche pour cadrer le visage entier,
   des levres au sourcil, avec la main qui pose le masque. */
@media (max-width:860px){
  .page-prestations .page-hero__bg img{object-position:65% 50%}
}

/* Rituels d'exception : le tarif est affiche par personne. Le suffixe passe en
   sans-serif, plus petit et en gris, pour ne pas concurrencer le chiffre. */
.soin__meta>span small{font-family:var(--sans);font-style:normal;font-size:.58em;
  letter-spacing:.04em;color:var(--taupe);white-space:nowrap}