/* ==========================================================================
   MOXIE TATTOO — Design system
   Palette échantillonnée sur l'identité visuelle originale.
   ========================================================================== */


/* ---------- 0. Polices auto-hébergées -----------------------------------
   Servies depuis le domaine du site : aucune requête vers Google, donc
   aucune fuite d'IP visiteur (point sensible en France) et deux poignées
   de main réseau en moins. unicode-range limite le téléchargement au
   sous-ensemble réellement utilisé.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/space-grotesk-300_700-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/space-grotesk-300_700-latin.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/space-mono-400-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/space-mono-400-latin.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/space-mono-700-latin.woff2') format('woff2');
  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:'UnifrakturCook';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/unifrakturcook-700-latin.woff2') format('woff2');
  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;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Couleurs de marque (échantillonnées sur les rendus source) */
  --noir:        #0B0A0C;
  --noir-2:      #171216;
  --aubergine:   #361523;
  --aubergine-2: #210D16;
  --aubergine-3: #4A1E31;
  --rose:        #F8A4BE;
  --rose-2:      #F27FA4;
  --rose-3:      #FBC9D8;
  --creme:       #F7E2D4;
  --creme-2:     #FDF3EC;

  /* Rôles par défaut (thème aubergine) */
  --bg:      var(--aubergine);
  --fg:      var(--creme);
  --fg-mute: color-mix(in srgb, var(--creme) 62%, transparent);
  --accent:  var(--rose);
  --line:    color-mix(in srgb, var(--creme) 22%, transparent);
  --ink:     var(--noir);

  /* Typo */
  --f-display: "UnifrakturCook", "Grenze Gotisch", serif;
  --f-mono:    "Space Mono", ui-monospace, monospace;
  --f-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  --fs-xs:   clamp(.66rem, .60rem + .18vw, .74rem);
  --fs-sm:   clamp(.78rem, .72rem + .22vw, .88rem);
  --fs-base: clamp(1rem, .95rem + .28vw, 1.12rem);
  --fs-lg:   clamp(1.18rem, 1.05rem + .55vw, 1.45rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --fs-2xl:  clamp(2.1rem, 1.4rem + 3.2vw, 4.2rem);
  --fs-3xl:  clamp(2.8rem, 1.5rem + 5.6vw, 6.6rem);
  --fs-4xl:  clamp(3.4rem, 1.2rem + 9vw, 9.5rem);

  /* Espace */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;   --sp-8: 8rem;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;
  --maxw-text: 62ch;

  /* Traits & rayons — repris des mockups (filet épais, angles très arrondis) */
  --bw: 2px;
  --bw-thick: 3px;
  --r-pill: 999px;
  --r-card: 34px;
  --r-sm: 14px;

  /* Mouvement */
  --e-out: cubic-bezier(.16,.84,.44,1);
  --e-in:  cubic-bezier(.7,0,.84,0);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --e-wipe:   cubic-bezier(.3,.92,.32,1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 620ms;

  --z-nav: 60; --z-cursor: 200; --z-curtain: 300; --z-loader: 400;
}

/* ---------- 2. Thèmes de section (l'alternance choc) --------------------- */
[data-theme="aubergine"]{
  --bg: var(--aubergine); --fg: var(--creme); --accent: var(--rose);
  --fg-mute: color-mix(in srgb, var(--creme) 60%, transparent);
  --line: color-mix(in srgb, var(--creme) 22%, transparent);
}
[data-theme="rose"]{
  --bg: var(--rose); --fg: var(--noir); --accent: var(--aubergine);
  --fg-mute: color-mix(in srgb, var(--noir) 66%, transparent);
  --line: color-mix(in srgb, var(--noir) 26%, transparent);
}
[data-theme="noir"]{
  --bg: var(--noir); --fg: var(--creme); --accent: var(--rose);
  --fg-mute: color-mix(in srgb, var(--creme) 55%, transparent);
  --line: color-mix(in srgb, var(--creme) 18%, transparent);
}
[data-theme="creme"]{
  --bg: var(--creme); --fg: var(--aubergine); --accent: var(--aubergine);
  --fg-mute: color-mix(in srgb, var(--aubergine) 66%, transparent);
  --line: color-mix(in srgb, var(--aubergine) 22%, transparent);
}

/* ---------- 3. Base ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--aubergine);
  color:var(--creme);
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip plutôt que hidden : hidden ferait de <body> un conteneur de
     défilement, avec les effets de bord habituels sur l'ancrage. */
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{ margin:0; line-height:1; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
::selection{ background:var(--rose); color:var(--noir); }

:focus-visible{
  outline:3px solid var(--rose-2);
  outline-offset:3px;
  border-radius:4px;
}
[data-theme="rose"] :focus-visible{ outline-color:var(--aubergine); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:500;
  background:var(--rose); color:var(--noir);
  padding:.9rem 1.4rem; font-family:var(--f-mono); font-size:var(--fs-sm);
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 4. Typographie utilitaire ------------------------------------ */
.display{
  font-family:var(--f-display);
  font-weight:700;
  line-height:.98;
  letter-spacing:.005em;
  text-wrap:balance;
}
.d-1{ font-size:var(--fs-4xl); }
.d-2{ font-size:var(--fs-3xl); }
.d-3{ font-size:var(--fs-2xl); }
.d-4{ font-size:var(--fs-xl); }

.mono{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:var(--fs-xs);
  line-height:1.4;
}
/* Bloc, pas flex : en flex chaque nœud inline (ex. <sup>) devient un item
   et se retrouve isolé sur sa propre ligne en petite largeur. */
.eyebrow{
  font-family:var(--f-mono); text-transform:uppercase;
  letter-spacing:.24em; font-size:var(--fs-xs); line-height:1.6;
  color:var(--accent); display:block; margin-bottom:var(--sp-3);
  text-wrap:balance;
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px;
  background:currentColor; vertical-align:middle; margin-right:.8rem;
  position:relative; top:-1px;
}
.lead{ font-size:var(--fs-lg); line-height:1.5; max-width:46ch; }
.muted{ color:var(--fg-mute); }
.accent{ color:var(--accent); }
.measure{ max-width:var(--maxw-text); }
.tabnum{ font-variant-numeric:tabular-nums; }

/* ---------- 5. Layout ---------------------------------------------------- */
.section{
  background:var(--bg); color:var(--fg);
  padding-block:clamp(4rem, 9vw, 9rem);
  position:relative;
  overflow:clip;
}
.section--tight{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.section--flush{ padding-block:0; }

.wrap{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:960px; }

.grid{ display:grid; gap:var(--sp-4); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
/* En-tête de section : le titre gothique a besoin de largeur */
.split--title{ display:grid; gap:clamp(1.5rem,4vw,4rem); align-items:flex-end;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.split--60{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.split--70{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  grid-template-columns:minmax(0,1.75fr) minmax(260px,.85fr); }
@media (max-width:900px){
  .g-3,.g-4,.split,.split--60,.split--70,.split--title{ grid-template-columns:1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .g-2,.g-4{ grid-template-columns:1fr; } }

.stack > * + *{ margin-top:var(--sp-3); }
.flow-lg > * + *{ margin-top:var(--sp-5); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }

/* ---------- 6. Boutons --------------------------------------------------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--bg);
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:52px; padding:.95rem 1.9rem;
  font-family:var(--f-mono); font-size:var(--fs-sm);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  text-decoration:none; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  border:var(--bw-thick) solid var(--btn-bg);
  border-radius:var(--r-pill);
  transition:background var(--t-fast) linear, color var(--t-fast) linear,
             border-color var(--t-fast) linear;
  touch-action:manipulation;
}
.btn:hover,.btn:focus-visible{ background:transparent; color:var(--btn-bg); }
.btn--ghost{ --btn-bg:transparent; background:transparent; color:var(--fg);
             border-color:var(--line); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn--lg{ min-height:64px; padding:1.15rem 2.5rem; font-size:var(--fs-base); letter-spacing:.1em; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn .arrow{ transition:transform var(--t-fast) var(--e-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* Lien souligné animé */
.ulink{
  text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--t-med) var(--e-out);
  padding-bottom:2px;
}
.ulink:hover,.ulink:focus-visible{ background-size:100% 2px; }

/* ---------- 7. Header / nav ---------------------------------------------- */
/* La barre est transparente et passe au-dessus de sections de quatre teintes.
   Elle doit donc changer de couleur selon celle qu'elle survole : sinon le lien
   de la page courante (rose) et le logotype (rose) disparaissent purement et
   simplement sur une section rose. Le JS pose data-on avec le thème du dessous. */
.nav{
  --nav-fg: var(--creme);
  --nav-accent: var(--rose);
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
  padding:clamp(.9rem,2vw,1.4rem) var(--gutter);
  color:var(--nav-fg);
  transition:background var(--t-med) var(--e-out),
             box-shadow var(--t-med) var(--e-out),
             color var(--t-med) var(--e-out),
             transform var(--t-med) var(--e-out);
}
.nav[data-on="rose"],.nav[data-on="creme"]{
  --nav-fg: var(--aubergine);
  --nav-accent: var(--aubergine);
}
/* Une fois figée, la barre a son propre fond sombre : elle reprend sa palette
   d'origine quelle que soit la section qui défile dessous. */
.nav.is-stuck{
  --nav-fg: var(--creme);
  --nav-accent: var(--rose);
  background:color-mix(in srgb, var(--aubergine) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 color-mix(in srgb, var(--rose) 28%, transparent);
}
.nav.is-hidden{ transform:translateY(-105%); }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.brand__mark{
  width:44px; height:25px; flex:none;
  background:url("../assets/brand/mascotte.webp") center/contain no-repeat;
  transition:transform var(--t-med) var(--e-spring);
}
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.12); }
.brand__word{
  width:clamp(112px,13vw,158px); height:calc(clamp(112px,13vw,158px) * .195);
  background:currentColor;
  -webkit-mask:url("../assets/brand/wordmark.webp") left center/contain no-repeat;
  mask:url("../assets/brand/wordmark.webp") left center/contain no-repeat;
  color:var(--nav-accent);
}

.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.nav__link{
  font-family:var(--f-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none;
  position:relative; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px;
  color:color-mix(in srgb, var(--nav-fg) 76%, transparent);
  transition:color var(--t-fast) linear;
}
.nav__link:hover,.nav__link:focus-visible{ color:var(--nav-fg); }
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--nav-accent); transition:right var(--t-med) var(--e-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{ right:0; }
.nav__link[aria-current="page"]{ color:var(--nav-accent); font-weight:700; }
.nav__link[aria-current="page"]::after{ right:0; }
.nav__cta{ margin-left:.6rem; }
/* Sur fond clair, le bouton rose se fondrait dans la section : il s'inverse. */
.nav[data-on="rose"] .nav__cta,.nav[data-on="creme"] .nav__cta{
  --btn-bg:var(--aubergine);
  background:var(--aubergine); color:var(--creme); border-color:var(--aubergine);
}
.nav[data-on="rose"] .nav__cta:hover,.nav[data-on="creme"] .nav__cta:hover,
.nav[data-on="rose"] .nav__cta:focus-visible,.nav[data-on="creme"] .nav__cta:focus-visible{
  background:transparent; color:var(--aubergine);
}
@media (max-width:1040px){ .nav__cta{ display:none; } }

/* Burger + panneau mobile */
.burger{
  display:none; width:52px; height:52px; padding:0; flex:none;
  background:transparent; border:var(--bw) solid color-mix(in srgb,var(--nav-fg) 32%,transparent);
  border-radius:var(--r-pill); cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:50%; width:20px; height:2px; background:var(--nav-fg);
  translate:-50% 0; transition:transform var(--t-med) var(--e-out), opacity 120ms linear;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger span:nth-child(3){ top:31px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:calc(var(--z-nav) - 1);
  background:var(--aubergine);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t-slow) var(--e-out);
  visibility:hidden;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a{
  font-family:var(--f-display); font-size:clamp(2.2rem,11vw,4rem);
  color:var(--creme); text-decoration:none; line-height:1.05;
  display:block; padding:.18em 0;
  border-bottom:1px solid color-mix(in srgb,var(--creme) 16%,transparent);
  opacity:0; transform:translateY(24px);
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out), color var(--t-fast);
}
.drawer.is-open a{ opacity:1; transform:none; }
.drawer.is-open a:nth-child(1){ transition-delay:120ms; }
.drawer.is-open a:nth-child(2){ transition-delay:180ms; }
.drawer.is-open a:nth-child(3){ transition-delay:240ms; }
.drawer.is-open a:nth-child(4){ transition-delay:300ms; }
.drawer.is-open a:nth-child(5){ transition-delay:360ms; }
.drawer a:hover{ color:var(--rose); }
.drawer__foot{ margin-top:auto; padding-top:2.5rem; color:var(--rose); }
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}

/* ---------- 8. Préchargeur ----------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--aubergine);
  display:grid; place-items:center;
  transition:opacity 500ms linear, visibility 0s linear 500ms;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ display:grid; place-items:center; gap:1.6rem; text-align:center; }
.loader__mascot{
  width:min(220px,44vw); aspect-ratio:972/552;
  background:url("../assets/brand/mascotte.webp") center/contain no-repeat;
  transform:scale(.3); opacity:0;
  animation:pop 700ms var(--e-spring) 120ms forwards;
}
.loader__word{
  width:min(300px,62vw); height:calc(min(300px,62vw) * .195);
  background:var(--rose);
  -webkit-mask:url("../assets/brand/wordmark.webp") center/contain no-repeat;
  mask:url("../assets/brand/wordmark.webp") center/contain no-repeat;
  clip-path:inset(0 100% 0 0);
  animation:wipe 620ms var(--e-out) 480ms forwards;
}
.loader__bar{
  width:min(300px,62vw); height:3px; background:color-mix(in srgb,var(--rose) 22%,transparent);
  overflow:hidden; border-radius:2px;
}
.loader__bar i{ display:block; height:100%; width:0; background:var(--rose);
                animation:fill 1200ms var(--e-out) 300ms forwards; }
@keyframes pop{ to{ transform:scale(1); opacity:1; } }
@keyframes wipe{ to{ clip-path:inset(0 0 0 0); } }
@keyframes fill{ to{ width:100%; } }

/* ---------- 9. Rideau de transition -------------------------------------- */
.curtain{
  position:fixed; inset:0; z-index:var(--z-curtain);
  display:grid; grid-template-columns:repeat(5,1fr);
  pointer-events:none;
}
.curtain i{
  display:block; background:var(--rose); transform:scaleY(0); transform-origin:bottom;
}
.curtain i:nth-child(even){ background:var(--aubergine); }
.curtain.is-in i{ animation:cIn 520ms var(--e-in) forwards; }
.curtain.is-out i{ transform:scaleY(1); transform-origin:top; animation:cOut 620ms var(--e-out) forwards; }
.curtain.is-in i:nth-child(1),.curtain.is-out i:nth-child(1){ animation-delay:0ms; }
.curtain.is-in i:nth-child(2),.curtain.is-out i:nth-child(2){ animation-delay:55ms; }
.curtain.is-in i:nth-child(3),.curtain.is-out i:nth-child(3){ animation-delay:110ms; }
.curtain.is-in i:nth-child(4),.curtain.is-out i:nth-child(4){ animation-delay:165ms; }
.curtain.is-in i:nth-child(5),.curtain.is-out i:nth-child(5){ animation-delay:220ms; }
@keyframes cIn{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes cOut{ from{ transform:scaleY(1); } to{ transform:scaleY(0); } }

/* ---------- 10. Curseur : point + étoile en retard ------------------------
   Le point est le curseur : il colle au pointeur. L'étoile le suit avec un
   léger retard. Au survol d'un élément cliquable, ce retard se resserre — elle
   vient se poser sur le point au lieu de partir en arrière — et elle ne
   grossit que modérément.
   La couleur suit la section survolée (data-on posé par le JS), comme la barre
   de nav : une étoile rose serait invisible sur une section rose.
   ------------------------------------------------------------------------ */
.cursor,.cursor__dot{ --cur: var(--rose); }
.cursor[data-on="rose"],.cursor__dot[data-on="rose"],
.cursor[data-on="creme"],.cursor__dot[data-on="creme"]{ --cur: var(--aubergine); }

.cursor{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:34px; height:34px; margin:-17px 0 0 -17px;
  pointer-events:none; opacity:0;
  transition:opacity 200ms linear;
  will-change:transform;
}
/* L'agrandissement porte sur le SVG intérieur, jamais sur l'enveloppe.
   Sur un même élément, les propriétés individuelles (translate/rotate/scale)
   s'appliquent AVANT la propriété transform : un scale:1.3 sur l'enveloppe
   multipliait donc par 1,3 la translation posée en JS, et l'étoile partait
   d'autant plus loin qu'on était éloigné du coin haut-gauche. */
.cursor svg{ width:100%; height:100%; overflow:visible;
  transition:scale 240ms var(--e-spring); }
.cursor__star{ stroke:var(--cur); transition:stroke 180ms linear; }
.cursor.is-on{ opacity:1; }
.cursor.is-hot svg{ scale:1.3; }

.cursor__dot{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--cur);
  pointer-events:none; opacity:0;
  transition:opacity 200ms linear, background 180ms linear;
  will-change:transform;
}
.cursor__dot.is-on{ opacity:1; }

html.has-cursor,html.has-cursor *{ cursor:none !important; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor__dot{ display:none; } }

/* ---------- 11. Hero ----------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--aubergine); color:var(--creme); overflow:clip;
  padding-block:clamp(7rem,14vh,10rem) clamp(4rem,10vh,7rem);
}
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(1100px,120vw); aspect-ratio:1; right:-18%; top:-28%;
  background:radial-gradient(circle, color-mix(in srgb,var(--rose) 26%,transparent) 0%, transparent 62%);
}
.hero__grid{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__copy h1{ margin-block:clamp(1rem,2vw,1.6rem) clamp(1.4rem,3vw,2.2rem);
  font-size:clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); }
.hero__copy .lead{ margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }

.hero__piece{ position:relative; justify-self:center; width:min(420px,80vw); }
.hero__piece video,.hero__piece img{
  position:relative; z-index:1;
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r-card);
  border:var(--bw-thick) solid color-mix(in srgb,var(--rose) 55%,transparent);
}
/* Cadre décalé, dans l'esprit des cartes de visite superposées */
.hero__piece::before{
  content:""; position:absolute; inset:24px -24px -24px 24px;
  border:var(--bw) solid color-mix(in srgb,var(--rose) 32%,transparent);
  border-radius:var(--r-card);
}
@media (max-width:600px){ .hero__piece::before{ inset:16px -16px -16px 16px; } }
.hero__piece .hero__stamp{
  position:absolute; right:-7%; bottom:-7%; z-index:2;
  --size:clamp(96px,11vw,144px);
}
.hero__scroll{
  position:absolute; z-index:1; left:var(--gutter); bottom:clamp(1.2rem,3vh,2.2rem);
  display:flex; align-items:center; gap:.6rem; color:var(--rose); margin:0;
}
.hero__scroll i{
  display:block; width:1px; height:30px; background:currentColor;
  transform-origin:top; animation:scrollpulse 1.9s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.25); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
@media (max-width:900px){
  .hero{ padding-block:clamp(6.5rem,18vh,9rem) clamp(4.5rem,9vh,6rem); }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__piece{ order:-1; width:min(320px,68vw); }
  .hero__piece .hero__stamp{ --size:84px; right:-4%; bottom:-6%; }
  .hero__scroll{ display:none; }
}

/* ---------- 12. Marquee -------------------------------------------------- */
.marquee{
  --speed:34s;
  background:var(--bg); color:var(--fg);
  border-block:var(--bw-thick) solid currentColor;
  overflow:hidden; padding-block:clamp(.5rem,1.4vw,.9rem);
  display:flex; user-select:none;
}
.marquee__track{
  display:flex; flex:none; gap:0; min-width:100%;
  animation:slide var(--speed) linear infinite;
  will-change:transform;
}
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  font-family:var(--f-display); font-size:clamp(1.5rem,4.2vw,3.2rem);
  line-height:1.1; white-space:nowrap; padding-inline:.4em;
  display:flex; align-items:center; gap:.4em;
}
.marquee__item svg{ width:.6em; height:.6em; flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 13. Cartes & cadres (motif « filet » des mockups) ------------ */
.frame{
  position:relative; background:var(--bg); color:var(--fg);
  border-radius:var(--r-card); padding:clamp(1.6rem,3vw,2.6rem);
  isolation:isolate;
}
.frame::before{
  content:""; position:absolute; inset:10px; z-index:-1;
  border:var(--bw-thick) solid currentColor; border-radius:calc(var(--r-card) - 10px);
  opacity:.85; pointer-events:none;
}
.card{
  background:var(--bg); color:var(--fg);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(1.5rem,2.6vw,2.2rem);
  display:flex; flex-direction:column; gap:var(--sp-2);
  transition:transform var(--t-med) var(--e-out), border-color var(--t-med) linear,
             background var(--t-med) linear, color var(--t-med) linear;
}
.card__n{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.2em;
  color:var(--accent);
}
.card h3{ font-family:var(--f-display); font-size:var(--fs-xl); }
.card--hover:hover,.card--hover:focus-within{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Inversion « flood » au survol, dans l'esprit brutaliste de la DA.
   La carte redéfinit les JETONS plutôt que de repeindre chaque descendant :
   .muted et .card__n lisent --fg-mute et --accent, qui restaient sinon calés
   sur le thème rose (donc du noir) une fois le fond passé en aubergine.
   En basculant les jetons, tout descendant présent ou futur suit tout seul. */
.card--flood:hover,.card--flood:focus-within{
  --fg:      var(--bg);
  --fg-mute: color-mix(in srgb, var(--bg) 82%, transparent);
  --accent:  var(--bg);
  background:var(--aubergine); color:var(--bg); border-color:var(--aubergine);
}
[data-theme="aubergine"] .card--flood:hover,[data-theme="noir"] .card--flood:hover,
[data-theme="aubergine"] .card--flood:focus-within,[data-theme="noir"] .card--flood:focus-within{
  background:var(--rose); color:var(--noir); border-color:var(--rose);
  --fg:var(--noir); --fg-mute:color-mix(in srgb, var(--noir) 72%, transparent); --accent:var(--noir);
}

/* ---------- 14. Badge circulaire (les stickers ronds) -------------------- */
.badge{
  --size:clamp(120px,15vw,186px);
  width:var(--size); height:var(--size); position:relative; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:var(--aubergine); color:var(--rose);
}
.badge--rose{ background:var(--rose); color:var(--noir); }
.badge__ring{ position:absolute; inset:0; animation:spin 22s linear infinite; }
.badge__ring text{
  font-family:var(--f-mono); font-size:7.4px; letter-spacing:.16em;
  text-transform:uppercase; fill:currentColor;
}
.badge__mark{
  width:52%; aspect-ratio:972/552;
  background:url("../assets/brand/mascotte.webp") center/contain no-repeat;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 15. Mascotte réactive ---------------------------------------- */
.mascot{
  --w:min(460px,72vw);
  width:var(--w); aspect-ratio:972/552; position:relative;
  transform-style:preserve-3d;
  transition:transform 420ms var(--e-out);
  will-change:transform;
}
.mascot__base{
  position:absolute; inset:0;
  background:url("../assets/brand/mascotte-base.webp") center/contain no-repeat;
}
.mascot__eyes{
  position:absolute; inset:0;
  -webkit-mask:url("../assets/brand/mascotte-eyemask.png") center/contain no-repeat;
  mask:url("../assets/brand/mascotte-eyemask.png") center/contain no-repeat;
}
.mascot__pupils{
  position:absolute; inset:0;
  background:url("../assets/brand/mascotte-pupilles.png") center/contain no-repeat;
  transition:transform 260ms var(--e-out);
  will-change:transform;
}
.mascot__blink{
  position:absolute; inset:0; background:var(--bg);
  -webkit-mask:url("../assets/brand/mascotte-eyemask.png") center/contain no-repeat;
  mask:url("../assets/brand/mascotte-eyemask.png") center/contain no-repeat;
  opacity:0;
}
.mascot.is-blinking .mascot__blink{ animation:blink 170ms steps(1) 2; }
@keyframes blink{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }

/* ---------- 16. Révélations au scroll ------------------------------------
   Pas de fade-up : la marque est une esthétique d'impression, donc le contenu
   se révèle comme une encre qu'on pose — un balayage à bord franc, sans que
   l'élément se déplace. À l'arrivée, aucune propriété ne subsiste (les états
   sont posés via :not(.is-in)), donc aucun effet de bord sur le sticky.
   Tout est conditionné à html[data-js="1"] : sans JS, rien n'est masqué.
   ------------------------------------------------------------------------ */
html[data-js="1"] [data-reveal]{
  transition:clip-path 620ms var(--e-wipe), opacity 200ms linear 60ms,
             transform 620ms var(--e-wipe);
}
html[data-js="1"] [data-reveal]:not(.is-in){
  clip-path:inset(0 0 100% 0);
  opacity:0;
}
/* Variante « rideau latéral » pour les blocs larges */
html[data-js="1"] [data-reveal="wipe-x"]:not(.is-in){ clip-path:inset(0 100% 0 0); }
/* Variante médias : identique mais plus lente, l'image se dévoile en entier */
html[data-js="1"] [data-reveal="clip"]{ transition:clip-path 900ms var(--e-wipe); }
html[data-js="1"] [data-reveal="clip"]:not(.is-in){ clip-path:inset(0 0 100% 0); opacity:1; }
/* Variante ponctuelle : la mascotte et les badges arrivent en s'ouvrant */
html[data-js="1"] [data-reveal="scale"]{ transition:opacity 420ms linear, transform 620ms var(--e-spring); }
html[data-js="1"] [data-reveal="scale"]:not(.is-in){ opacity:0; transform:scale(.9); clip-path:none; }

/* Grilles : les cartes se posent l'une après l'autre, comme des planches de flash */
html[data-js="1"] [data-stagger] > *{
  transition:clip-path 520ms var(--e-wipe), opacity 180ms linear 40ms;
}
html[data-js="1"] [data-stagger]:not(.is-in) > *{ clip-path:inset(0 0 100% 0); opacity:0; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:0ms; }
[data-stagger].is-in > *:nth-child(2){ transition-delay:70ms; }
[data-stagger].is-in > *:nth-child(3){ transition-delay:140ms; }
[data-stagger].is-in > *:nth-child(4){ transition-delay:210ms; }
[data-stagger].is-in > *:nth-child(5){ transition-delay:280ms; }
[data-stagger].is-in > *:nth-child(6){ transition-delay:350ms; }
[data-stagger].is-in > *:nth-child(7){ transition-delay:420ms; }
[data-stagger].is-in > *:nth-child(8){ transition-delay:490ms; }

/* Titres : chaque ligne remonte derrière son propre masque.
   Le padding compense les descendantes du blackletter, sinon elles sont rognées. */
.lines span{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.lines span > i{ display:block; font-style:normal; transition:transform 780ms var(--e-out); }
html[data-js="1"] .lines:not(.is-in) span > i{ transform:translateY(112%); }
.lines.is-in span:nth-child(1) > i{ transition-delay:0ms; }
.lines.is-in span:nth-child(2) > i{ transition-delay:90ms; }
.lines.is-in span:nth-child(3) > i{ transition-delay:180ms; }
.lines.is-in span:nth-child(4) > i{ transition-delay:270ms; }

/* ---------- 17. Médias --------------------------------------------------- */
.media{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  background:var(--aubergine-2);
}
.media img,.media video{ width:100%; height:100%; object-fit:cover; }
.media--tall{ aspect-ratio:3/4; }
.media--square{ aspect-ratio:1; }
.media--wide{ aspect-ratio:16/10; }
.media__cap{
  position:absolute; left:0; bottom:0; right:0;
  padding:1.2rem 1.4rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--noir) 85%,transparent), transparent);
  color:var(--creme);
}
.media--zoom img{ transition:transform 900ms var(--e-out); }
.media--zoom:hover img{ transform:scale(1.06); }

.parallax{ will-change:transform; }

/* ---------- 18. Liste / specs -------------------------------------------- */
.speclist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.speclist li{
  display:flex; gap:var(--sp-3); justify-content:space-between; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.speclist dt,.speclist .k{ font-family:var(--f-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.16em; color:var(--fg-mute); }
.speclist .v{ font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:700;
  text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- 19. Accordéon (FAQ) ------------------------------------------ */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between;
  background:none; border:0; color:inherit; cursor:pointer;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0; text-align:left;
  font-family:var(--f-display); font-size:var(--fs-lg); line-height:1.15;
  transition:color var(--t-fast) linear;
}
.acc__btn:hover{ color:var(--accent); }
.acc__ico{ flex:none; width:26px; height:26px; position:relative; }
.acc__ico::before,.acc__ico::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:currentColor;
  transition:transform var(--t-med) var(--e-out);
}
.acc__ico::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__ico::after{ transform:rotate(0deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 420ms var(--e-out); }
.acc__panel > div{ overflow:hidden; }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel p{ padding-bottom:1.4rem; max-width:70ch; color:var(--fg-mute); }

/* ---------- 20. Flash gallery -------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter{
  font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.14em; padding:.65rem 1.15rem; min-height:44px;
  background:transparent; color:var(--fg); cursor:pointer;
  border:var(--bw) solid var(--line); border-radius:var(--r-pill);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.filter:hover{ border-color:var(--fg); }
.filter[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.flashgrid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.8vw,1.5rem); }
@media (max-width:900px){ .flashgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .flashgrid{ grid-template-columns:repeat(2,1fr); } }

.flash{
  position:relative; aspect-ratio:1; border-radius:var(--r-sm);
  --flash-bg:var(--bg); --flash-fg:var(--fg);
  border:var(--bw) solid var(--line); background:var(--flash-bg); color:var(--flash-fg);
  display:grid; place-items:center; padding:14%;
  transition:opacity 380ms var(--e-out), transform 380ms var(--e-out),
             background var(--t-med) linear, color var(--t-med) linear,
             border-color var(--t-med) linear;
  cursor:pointer; overflow:hidden;
}
.flash svg{ width:100%; height:100%; overflow:visible; }
.flash:hover,.flash:focus-visible{ --flash-bg:var(--accent); --flash-fg:var(--bg); border-color:var(--accent); }
.flash__meta{
  position:absolute; inset:auto 0 0 0; padding:.8rem;
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; text-align:center;
  translate:0 100%; transition:translate var(--t-med) var(--e-out);
  background:inherit;
}
.flash:hover .flash__meta,.flash:focus-visible .flash__meta{ translate:0 0; }
.flash.is-hidden{ opacity:0; transform:scale(.9); pointer-events:none;
  position:absolute; inset:0 auto auto 0; visibility:hidden; }

/* ---------- 21. Formulaire ----------------------------------------------- */
.form{ display:grid; gap:var(--sp-4); }
.field{ display:grid; gap:.5rem; }
.field > label,.legend{
  font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.16em; color:var(--fg-mute);
}
.field .req{ color:var(--accent); }
.field > input,.field > textarea,.field > select{
  width:100%; min-height:52px; padding:.9rem 1.1rem;
  font-family:var(--f-body); font-size:var(--fs-base); color:var(--fg);
  background:color-mix(in srgb, var(--fg) 5%, transparent);
  border:var(--bw) solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.field > textarea{ min-height:140px; resize:vertical; line-height:1.55; }
.field > select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 15px) 24px;
  background-size:7px 7px,7px 7px; background-repeat:no-repeat;
}
.field > input:focus,.field > textarea:focus,.field > select:focus{
  border-color:var(--accent); background:color-mix(in srgb, var(--fg) 9%, transparent); outline:none;
}
.field > input:focus-visible,.field > textarea:focus-visible,.field > select:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.field .help{ font-size:var(--fs-sm); color:var(--fg-mute); }
.field .err{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--rose-2); display:none; align-items:center; gap:.4rem;
}
[data-theme="rose"] .field .err{ color:#7A0D2E; }
.field.is-err .err{ display:flex; }
.field.is-err > input,.field.is-err > textarea,.field.is-err > select{ border-color:var(--rose-2); }
[data-theme="rose"] .field.is-err > input,[data-theme="rose"] .field.is-err > textarea,
[data-theme="rose"] .field.is-err > select{ border-color:#7A0D2E; }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span{
  display:flex; align-items:center; min-height:46px; padding:.6rem 1.15rem;
  font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em;
  border:var(--bw) solid var(--line); border-radius:var(--r-pill);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.chip input:checked + span{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.chip input:focus-visible + span{ outline:3px solid var(--accent); outline-offset:3px; }
.chip:hover span{ border-color:var(--fg); }

/* Étapes */
.steps{ display:flex; gap:.4rem; margin-bottom:var(--sp-4); }
.steps li{ flex:1; list-style:none; }
.steps i{ display:block; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.steps i::after{ content:""; display:block; height:100%; width:0; background:var(--accent);
  transition:width 500ms var(--e-out); }
.steps li.is-done i::after,.steps li.is-active i::after{ width:100%; }
.steps b{ display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; margin-top:.55rem; color:var(--fg-mute); font-weight:400; }
.steps li.is-active b{ color:var(--accent); }
@media (max-width:640px){ .steps b{ display:none; } }

.panel[hidden]{ display:none; }
.formnav{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line); padding-top:var(--sp-3); }
.formnav [data-next],.formnav [data-send]{ margin-left:auto; }

/* ---------- 22. Sélecteur de zone corporelle ----------------------------- */
.bodypick{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:var(--sp-4); align-items:start; }
@media (max-width:820px){ .bodypick{ grid-template-columns:1fr; } }
.bodypick__stage{
  background:color-mix(in srgb,var(--fg) 5%,transparent);
  border:var(--bw) solid var(--line); border-radius:var(--r-card);
  padding:1rem; display:grid; place-items:center;
}
.bodypick__svg{ width:100%; max-width:320px; height:auto; }
.bodypick__svg .part,.bodypick__svg .zone{
  fill:color-mix(in srgb,var(--fg) 13%,transparent);
  stroke:color-mix(in srgb,var(--fg) 42%,transparent); stroke-width:1.4;
}
.bodypick__svg .zone{
  cursor:pointer; transition:fill 180ms linear, stroke 180ms linear;
}
.bodypick__svg .zone:hover{ fill:color-mix(in srgb,var(--accent) 52%,transparent); stroke:var(--accent); }
.bodypick__svg .zone[aria-pressed="true"]{ fill:var(--accent); stroke:var(--accent); stroke-width:1.8; }
.bodypick__svg .zone:focus-visible{ outline:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:5 3; }
.bodypick__svg .face{ fill:color-mix(in srgb,var(--fg) 30%,transparent); }
.bodypick__side{ display:grid; gap:var(--sp-2); }
.bodypick__sel{ display:flex; flex-wrap:wrap; gap:.45rem; min-height:46px; }
.tag{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em;
  padding:.45rem .8rem; border-radius:var(--r-pill);
  background:var(--accent); color:var(--bg);
}
.tag button{ background:none; border:0; color:inherit; cursor:pointer; padding:0 0 0 .1rem;
  font-size:1rem; line-height:1; min-width:20px; min-height:20px; }
.bodypick__toggle{ display:flex; gap:.4rem; }

/* ---------- 23. Récap / résultat ----------------------------------------- */
.recap{ display:grid; gap:.9rem; }
.recap__row{ display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  border-bottom:1px dashed var(--line); padding-bottom:.7rem; }
.recap__k{ font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.16em; color:var(--fg-mute); }
.recap__v{ text-align:right; font-weight:500; }

.success{ display:grid; place-items:center; gap:var(--sp-3); text-align:center;
  padding:clamp(2rem,6vw,4rem) 0; }
.success .mascot{ --w:min(300px,60vw); }

/* ---------- 24. Notes / citations ---------------------------------------- */
.quote{ font-family:var(--f-display); font-size:var(--fs-2xl); line-height:1.02;
  text-wrap:balance; }
/* Citation longue : lisibilité d'abord, le gothique reste pour les titres courts */
.quote--sm{
  font-family:var(--f-body); font-size:var(--fs-lg); font-weight:500;
  line-height:1.4; letter-spacing:-.005em;
}
.note{
  display:flex; gap:.8rem; align-items:flex-start;
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); line-height:1.6;
}
.note svg{ flex:none; width:18px; height:18px; margin-top:2px; color:var(--accent); }

.bolt{ display:inline-block; width:.7em; height:.7em; color:var(--accent); }

/* Ruban de statistiques */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat b{ display:block; font-family:var(--f-display); font-size:var(--fs-2xl);
  line-height:1; color:var(--accent); font-weight:700; }
.stat span{ display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.16em; color:var(--fg-mute); margin-top:.6rem; }

/* ---------- 25. Footer --------------------------------------------------- */
.footer{ background:var(--noir); color:var(--creme); padding-block:clamp(3rem,7vw,6rem) 2rem; }
.footer__word{
  width:100%; aspect-ratio:1058/206; background:var(--aubergine-3);
  -webkit-mask:url("../assets/brand/wordmark.webp") center/contain no-repeat;
  mask:url("../assets/brand/wordmark.webp") center/contain no-repeat;
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-4);
  padding-bottom:var(--sp-5); border-bottom:1px solid color-mix(in srgb,var(--creme) 14%,transparent); }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.2em; color:var(--rose); margin-bottom:1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer a{ text-decoration:none; color:color-mix(in srgb,var(--creme) 78%,transparent);
  transition:color var(--t-fast) linear; }
.footer a:hover{ color:var(--rose); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.6rem; color:color-mix(in srgb,var(--creme) 66%,transparent); }

/* ---------- 26. Divers --------------------------------------------------- */
.hr{ border:0; height:1px; background:var(--line); margin-block:var(--sp-5); }
.tilt-l{ transform:rotate(-2.2deg); }
.tilt-r{ transform:rotate(1.8deg); }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- 27. Mouvement réduit ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger] > *,.lines span > i{
    opacity:1 !important; transform:none !important; clip-path:none !important; }

  .lines span > i{ transform:none !important; }
  .marquee__track{ animation:none !important; }
  .cursor,.cursor__dot{ display:none !important; }
  html.has-cursor,html.has-cursor *{ cursor:auto !important; }
  .badge__ring{ animation:none !important; }
  .curtain{ display:none !important; }
  .loader{ display:none !important; }
}

/* ---------- 28. Impression ----------------------------------------------- */
@media print{
  .nav,.curtain,.loader,.cursor,.cursor__dot,.marquee,.drawer{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1rem; }
}

/* ---------- 29. État d'entrée de page (rideau déjà baissé) --------------- */
html[data-enter="1"] .curtain i{ transform:scaleY(1); transform-origin:top; }
html:not([data-first="1"]) .loader{ display:none; }

/* ---------- 30. En-tête de page (sous la nav fixe) ----------------------- */
.section--head{ padding-block:clamp(8rem,17vh,12rem) clamp(3rem,7vw,6rem); }
.pagehead{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:end; }
@media (max-width:900px){ .pagehead{ grid-template-columns:1fr; } }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; color:var(--fg-mute); margin-bottom:var(--sp-3); }
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }

/* ---------- 31. Grille tarifaire ---------------------------------------- */
.pricetable{ width:100%; border-collapse:collapse; text-align:left; }
.pricetable caption{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); text-align:left; padding-bottom:1rem;
}
.pricetable th,.pricetable td{
  padding:1.05rem .6rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.pricetable thead th{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute); font-weight:400;
  border-bottom:var(--bw) solid var(--fg);
}
.pricetable tbody th{ font-weight:500; font-size:var(--fs-base); }
.pricetable td:last-child,.pricetable th:last-child{ text-align:right; white-space:nowrap;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.pricetable tbody tr:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.pricetable .sub{ display:block; font-size:var(--fs-sm); color:var(--fg-mute); margin-top:.25rem; }
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- 32. Chronologie des soins ------------------------------------ */
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.timeline li{
  display:grid; grid-template-columns:118px 1fr; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.3rem,2.6vw,2rem) 0; border-top:1px solid var(--line); position:relative;
}
.timeline li:last-child{ border-bottom:1px solid var(--line); }
.timeline .when{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); padding-top:.3rem;
}
.timeline h3{ font-family:var(--f-display); font-size:var(--fs-lg); margin-bottom:.6rem; }
.timeline p{ color:var(--fg-mute); max-width:62ch; }
@media (max-width:620px){ .timeline li{ grid-template-columns:1fr; gap:.5rem; } }

/* ---------- 33. Règles de la maison -------------------------------------- */
.rules{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.rules li{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
}
.rules li:first-child{ border-top:1px solid var(--line); }
.rules svg{ width:22px; height:22px; flex:none; margin-top:3px; color:var(--accent); }
.rules b{ font-weight:600; }
.rules span{ display:block; color:var(--fg-mute); font-size:var(--fs-sm); margin-top:.2rem; }

/* ---------- 34. Bandeau de page (photos plein cadre) --------------------- */
.bandeau{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.bandeau img{ width:100%; height:clamp(220px,34vw,420px); object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05); transition:filter 600ms var(--e-out); }
.bandeau a:hover img,.bandeau figure:hover img{ filter:none; }
@media (max-width:700px){ .bandeau{ grid-template-columns:1fr; } }

/* ---------- 35. Bloc d'appel latéral ------------------------------------- */
.aside{
  border:var(--bw) solid var(--line); border-radius:var(--r-card);
  padding:clamp(1.4rem,2.6vw,2rem); display:grid; gap:1rem; align-content:start;
}
.aside h3{ font-family:var(--f-display); font-size:var(--fs-lg); }
/* Mesuré : sans cette colonne étirée, l'aside ne colle pas du tout. Un élément
   sticky qui est lui-même un item de grille aligné au centre est dimensionné
   sur son contenu et n'a donc aucune course. La colonne prend la hauteur de la
   rangée et c'est elle qui fournit le déplacement. */
.sticky-col{ height:100%; }
.sticky{ position:sticky; top:110px; }
@media (max-width:900px){ .sticky{ position:static; } .sticky-col{ height:auto; } }

/* ---------- 36. Tableaux tarifaires en cartes (petits écrans) ------------ */
@media (max-width:640px){
  .tablewrap{ overflow-x:visible; }
  .pricetable thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .pricetable caption{ display:block; width:100%; }
  .pricetable,.pricetable tbody,.pricetable tr,
  .pricetable tbody th,.pricetable td{ display:block; width:100%; }
  .pricetable tr{
    border-bottom:var(--bw) solid var(--line);
    padding:1.15rem 0; display:grid; gap:.35rem;
  }
  .pricetable tr:hover{ background:none; }
  .pricetable tbody th,.pricetable td{ border:0; padding:0; text-align:left; }
  .pricetable tbody th{ font-size:var(--fs-lg); font-weight:600; line-height:1.25; }
  .pricetable .sub{ margin-top:.15rem; }
  .pricetable td::before{
    content:attr(data-label) " — ";
    font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em;
    text-transform:uppercase; color:var(--fg-mute);
  }
  .pricetable td:last-child{
    text-align:left; white-space:normal; font-weight:700;
    font-size:var(--fs-base); color:var(--accent); margin-top:.2rem;
  }
  .pricetable td:last-child::before{ color:var(--fg-mute); font-weight:400; }
}

/* ---------- 37. Fieldsets sans habillage (le rythme vient de .stack) ----- */
fieldset.fs-plain{ border:0; padding:0; margin:0; min-inline-size:0; }
.stack > * + fieldset.fs-plain{ margin-top:var(--sp-3); }
.stack > fieldset.fs-plain + *{ margin-top:var(--sp-3); }

/* Étapes : sur petit écran, seul le libellé courant reste affiché */
@media (max-width:640px){
  .steps{ position:relative; padding-bottom:1.6rem; }
  .steps li.is-active b{
    display:block; position:absolute; left:0; top:calc(100% - 1.4rem);
    white-space:nowrap;
  }
}

/* ---------- 38. Cibles tactiles (44 px minimum) -------------------------- */
.brand{ padding-block:.6rem; }
.footer ul{ gap:0; }
.footer ul a{ display:inline-flex; align-items:center; min-height:44px; }
.footer__grid p a.ulink{ display:inline-flex; align-items:center; min-height:40px; }
.aside a.ulink{ display:inline-flex; align-items:center; min-height:40px; }
.breadcrumb a{ display:inline-flex; align-items:center; min-height:36px; }

/* ---------- 39. Interlude : citation sur fond animé ---------------------- */
.ambient{
  position:relative; overflow:clip; isolation:isolate;
  background:var(--aubergine); color:var(--creme);
  min-height:min(62svh, 560px);
  display:grid; place-items:center;
  padding-block:clamp(4rem,10vw,7rem);
}
.ambient__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 34%;
  opacity:.85;
}
.ambient::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 50%,
    color-mix(in srgb, var(--aubergine) 72%, transparent) 0%,
    color-mix(in srgb, var(--aubergine) 92%, transparent) 100%);
}
.ambient__inner{ position:relative; z-index:2; text-align:center; }
.ambient blockquote{ margin:0; text-wrap:balance; }

/* ---------- 40. Barre de réservation mobile ------------------------------
   Décision propre au téléphone, pas un report du desktop : sur mobile un
   client de salon veut appeler ou réserver sans remonter la page. La barre
   n'apparaît qu'une fois le hero dépassé, et le corps réserve sa hauteur pour
   qu'elle ne masque jamais la fin du contenu.
   ------------------------------------------------------------------------ */
.bookbar{
  position:fixed; z-index:calc(var(--z-nav) - 2);
  inset:auto 0 0 0;
  display:none; gap:.6rem; align-items:center;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--aubergine) 94%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-top:var(--bw) solid color-mix(in srgb, var(--rose) 34%, transparent);
  transform:translateY(105%);
  transition:transform 420ms var(--e-out);
}
.bookbar.is-up{ transform:none; }
.bookbar .btn{ flex:1; min-height:50px; padding-inline:1rem; }
.bookbar__tel{
  flex:none; width:50px; height:50px; display:grid; place-items:center;
  border:var(--bw-thick) solid color-mix(in srgb, var(--rose) 55%, transparent);
  border-radius:var(--r-pill); color:var(--rose);
  transition:background var(--t-fast) linear, color var(--t-fast) linear;
}
.bookbar__tel:hover,.bookbar__tel:focus-visible{ background:var(--rose); color:var(--aubergine); }
.bookbar__tel svg{ width:21px; height:21px; }

@media (max-width:860px){
  .bookbar{ display:flex; }
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  /* la page rendez-vous a déjà son formulaire : pas de doublon */
  body[data-page="rendez-vous"] .bookbar{ display:none; }
  body[data-page="rendez-vous"]{ padding-bottom:0; }
}
@media (prefers-reduced-motion:reduce){
  .bookbar{ transition:none; }
}

/* Aperçu de flashs sur l'accueil : 3 colonnes, vignettes plus grandes que
   sur la page Flash (4 colonnes) — deux rangées pleines, pas de rang bancal. */
@media (min-width:901px){
  .flashgrid--preview{ grid-template-columns:repeat(3,1fr); }
}