/* =========================================================
   TATOO APEX — Paris, avenue du Maine
   Feuille de style principale — mobile first
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#08070a;
  --ink-1:#0b0a0f;
  --ink-2:#111016;
  --smoke:#17161d;
  --bone:#EDE7DC;
  --bone-2:rgba(237,231,220,.66);
  --bone-3:rgba(237,231,220,.42);
  --gold:#C6A15B;
  --gold-2:#E7CE97;
  --gold-3:rgba(198,161,91,.30);
  --line:rgba(237,231,220,.10);
  --line-2:rgba(237,231,220,.06);

  --ff-d:'Cormorant Garamond',"Times New Roman",Georgia,serif;
  --ff-h:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-s:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5.4vw,72px);
  --maxw:1280px;
  --app-h:100vh;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.02,.28,1);

  --nav-h:62px;
  --sab:env(safe-area-inset-bottom,0px);
}
@supports (height:100svh){ :root{ --app-h:100svh; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff-s);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; border-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
svg{ display:block; }
::selection{ background:var(--gold); color:#0a0a0c; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; border-radius:2px; }

/* ---------- Typo helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.6; flex:none; }

.display{
  font-family:var(--ff-d);
  font-weight:300;
  font-size:clamp(34px,8.4vw,68px);
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--bone);
}
.display--xl{ font-size:clamp(38px,9.6vw,88px); }
.display--s{ font-size:clamp(30px,6.4vw,50px); }
.display .line{ display:block; overflow:hidden; }
.display .line > i{
  display:block; font-style:normal; text-wrap:balance;
  transform:translate3d(0,110%,0) rotate(2deg);
  transition:transform 1.15s var(--e-out);
}
.display.is-in .line > i{ transform:translate3d(0,0,0) rotate(0); }
.display.is-in .line:nth-child(2) > i{ transition-delay:.09s; }
.display.is-in .line:nth-child(3) > i{ transition-delay:.18s; }

.lead{ font-size:clamp(17px,4.2vw,22px); line-height:1.62; color:var(--bone); font-weight:300; }
.body{ font-size:clamp(15px,3.7vw,17px); line-height:1.78; color:var(--bone-2); }

/* ---------- Reveal ---------- */
.reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .9s var(--e-out), transform 1.05s var(--e-out);
  transition-delay:calc((var(--d,0)) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 } .reveal[data-d="3"]{ --d:3 }
.reveal[data-d="4"]{ --d:4 } .reveal[data-d="5"]{ --d:5 } .reveal[data-d="6"]{ --d:6 }

/* ---------- Boutons ---------- */
.btn{
  --bh:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--bh); padding:0 26px;
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  border-radius:999px; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--e-out), color .4s ease, border-color .4s ease;
  -webkit-user-select:none; user-select:none;
}
.btn > span{ position:relative; z-index:2; }
.btn--lg{ --bh:60px; padding:0 34px; }

.btn--gold{ color:#0b0a0c; background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 52%,var(--gold) 100%); background-size:220% 100%; box-shadow:0 10px 34px -14px rgba(198,161,91,.75); }
.btn--gold::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 72%);
  transform:translateX(-120%); transition:transform .95s var(--e-out);
}
.btn--ghost{ color:var(--bone); border:1px solid var(--line); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--bone); transform:translate3d(0,101%,0); transition:transform .6s var(--e-out);
}
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .btn--gold:hover::after{ transform:translateX(120%); }
  .btn--ghost:hover{ color:#0b0a0c; border-color:transparent; }
  .btn--ghost:hover::before{ transform:translate3d(0,0,0); }
}
.btn:active{ transform:translateY(0) scale(.985); }

/* ---------- Décors globaux ---------- */
.grain{
  position:fixed; inset:-120px; z-index:70; pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* Le grain anime et fusionne coute cher lorsqu'il recouvre un canvas qui se
   repeint : on le reserve aux machines a pointeur fin (ordinateurs). */
@media (hover:hover) and (pointer:fine){
  .grain{ opacity:.16; mix-blend-mode:overlay; animation:grain 1.2s steps(6) infinite; will-change:transform; }
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)} 16%{transform:translate3d(-24px,10px,0)}
  33%{transform:translate3d(14px,-18px,0)} 50%{transform:translate3d(-12px,20px,0)}
  66%{transform:translate3d(22px,8px,0)} 83%{transform:translate3d(-18px,-14px,0)}
  100%{transform:translate3d(0,0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:69; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%,transparent 40%,rgba(0,0,0,.42) 100%);
}
.scrollrail{
  position:fixed; top:0; right:0; width:2px; height:100%; z-index:71; pointer-events:none;
  background:rgba(237,231,220,.05);
}
.scrollrail > i{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 0 12px rgba(198,161,91,.6);
}
.cursor{ display:none; }

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .9s var(--e-out), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; padding:0 24px; }
.loader__mark{ width:52px; margin:0 auto 26px; }
.loader__mark svg{ width:100%; height:auto; }
.loader__mark path{
  stroke:var(--gold); stroke-width:1.4; fill:none; stroke-linecap:square;
  stroke-dasharray:44; stroke-dashoffset:44;
  animation:draw 1.5s var(--e-out) forwards;
}
.loader__mark .lm-b{ animation-delay:.14s; }
.loader__mark .lm-c{ stroke-dasharray:20; stroke-dashoffset:20; animation-delay:.42s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.loader__word{
  font-family:var(--ff-d); font-size:clamp(26px,7vw,40px); font-weight:300;
  letter-spacing:.24em; color:var(--bone); margin-bottom:30px;
  opacity:0; animation:fadeUp 1s var(--e-out) .35s forwards;
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.loader__bar{ width:min(240px,62vw); height:1px; margin:0 auto; background:rgba(237,231,220,.12); overflow:hidden; }
.loader__bar > i{ display:block; height:100%; width:0%; background:var(--gold); transition:width .32s linear; }
.loader__pct{
  margin-top:14px; font-size:11px; letter-spacing:.28em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.loader__pct .pc{ opacity:.55; margin-left:2px; }
.loader__hint{ margin-top:8px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-3); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transform:translate3d(0,-100%,0);
  transition:transform .7s var(--e-out), background-color .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav.is-shown{ transform:translate3d(0,0,0); }
.nav.is-solid{ background:rgba(8,7,10,.82); border-bottom-color:var(--line-2); }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav.is-solid{ background:rgba(8,7,10,.55); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
}
.nav__brand{ display:flex; align-items:center; gap:10px; flex:none; }
.logo{ display:block; width:auto; height:100%; max-width:none; object-fit:contain; }
.logo--nav{ height:34px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); transition:transform .6s var(--e-out), filter .6s ease; }
@media (hover:hover){ .nav__brand:hover .logo--nav{ transform:translateY(-1px) scale(1.04); filter:drop-shadow(0 4px 16px rgba(198,161,91,.45)); } }
.nav__word{ font-family:var(--ff-d); font-size:16px; letter-spacing:.2em; text-transform:uppercase; display:none; }
.logo-fb{ display:none; }
body.no-logo .logo{ display:none; }
body.no-logo .nav__word{ display:block; }
body.no-logo .logo-fb{ display:block; }

.nav__right{ display:flex; align-items:center; gap:8px; min-width:0; }
.nav__real{ --bh:38px; padding:0 16px; font-size:9.5px; letter-spacing:.16em; flex:none; }
.nav__book{ --bh:38px; padding:0 16px; font-size:9.5px; letter-spacing:.16em; flex:none; }

/* --- Sélecteur de langue --- */
.lang{ position:relative; flex:none; }
.lang__btn{
  display:flex; align-items:center; gap:5px; height:34px; padding:0 9px;
  border:1px solid var(--line); border-radius:999px; color:var(--bone-2);
  transition:color .35s ease, border-color .35s ease, background-color .35s ease;
}
.lang__btn svg{ fill:none; stroke:currentColor; stroke-width:1.3; }
.lang__flag{ width:19px; height:13px; flex:none; border-radius:2.4px; box-shadow:0 0 0 1px rgba(0,0,0,.45) inset; }
.lang__chev{ width:11px; height:11px; transition:transform .45s var(--e-out); }
.lang__code{ font-size:10px; font-weight:500; letter-spacing:.14em; }
.lang.is-open .lang__btn{ color:var(--gold-2); border-color:var(--gold-3); background:rgba(198,161,91,.07); }
.lang.is-open .lang__chev{ transform:rotate(180deg); }
@media (hover:hover){ .lang__btn:hover{ color:var(--bone); border-color:var(--bone-3); } }

.lang__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:5;
  width:212px; padding:6px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(13,12,17,.96);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(198,161,91,.06) inset;
  opacity:0; transform:translate3d(0,-8px,0) scale(.97);
  transform-origin:top right;
  transition:opacity .34s var(--e-out), transform .44s var(--e-out);
  max-height:min(66vh,420px); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.lang__menu[hidden]{ display:none; }
.lang.is-open .lang__menu{ opacity:1; transform:none; }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lang__menu{ background:rgba(13,12,17,.82); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); }
}
.lang__menu button{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:9px; text-align:left;
  color:var(--bone-2); transition:background-color .3s ease, color .3s ease;
  opacity:0; transform:translateX(-6px);
}
.lang.is-open .lang__menu button{ opacity:1; transform:none; transition:opacity .4s var(--e-out), transform .5s var(--e-out), background-color .3s ease, color .3s ease; }
.lang.is-open .lang__menu button:nth-child(1){ transition-delay:.04s } .lang.is-open .lang__menu button:nth-child(2){ transition-delay:.07s }
.lang.is-open .lang__menu button:nth-child(3){ transition-delay:.10s } .lang.is-open .lang__menu button:nth-child(4){ transition-delay:.13s }
.lang.is-open .lang__menu button:nth-child(5){ transition-delay:.16s } .lang.is-open .lang__menu button:nth-child(6){ transition-delay:.19s }
.lang.is-open .lang__menu button:nth-child(7){ transition-delay:.22s } .lang.is-open .lang__menu button:nth-child(8){ transition-delay:.25s }
.lang.is-open .lang__menu button:nth-child(9){ transition-delay:.28s } .lang.is-open .lang__menu button:nth-child(10){ transition-delay:.31s }
.lang__menu .lang__flag{ width:24px; height:16px; }
.lang__menu button span{ font-size:13px; letter-spacing:.02em; }
.lang__menu button.is-on{ color:var(--bone); background:rgba(198,161,91,.10); }
@media (hover:hover){ .lang__menu button:hover{ background:rgba(237,231,220,.05); color:var(--bone); } }

/* =========================================================
   HERO — séquence au défilement
   ========================================================= */
.hero{ position:relative; z-index:1; }
.hero__track{ height:calc(var(--stage-h, 100vh) * 7); position:relative; }
.hero__stage{
  position:sticky; top:0;
  /* Hauteur VIVANTE : le plateau colle exactement à la zone visible.
     C'est ce qui garantit un cadrage juste (aucun agrandissement) et
     des habillages de bas d'écran toujours dans le champ. La stabilité
     du défilement est assurée ailleurs : piste et course de référence
     sont figées, elles. */
  height:var(--app-h);
  overflow:hidden;
  background:#000;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.hero__fade{
  position:absolute; inset:0; pointer-events:none;
  background:var(--ink); opacity:0;
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,7,10,.72) 0%,rgba(8,7,10,0) 26%,rgba(8,7,10,0) 52%,rgba(8,7,10,.86) 100%);
}
.hero__ui{
  font-family:var(--ff-h);
  position:absolute; inset:0;
  display:grid; justify-items:center; align-items:end;
  padding:calc(var(--nav-h) + 20px) max(16px,calc(var(--pad) * .7)) calc(78px + var(--sab));
  text-align:center;
  pointer-events:none;
}
.beat{
  grid-area:1/1; align-self:end;
  width:100%; max-width:760px;
  opacity:0;
  transform:translate3d(0,26px,0) scale(.965);
  filter:blur(6px);
}
/* Pendant la transition seulement : c'est la mise a l'echelle et le flou
   recalcules a chaque image qui font grésiller le texte. Au repos on rend
   la main au moteur de texte natif. */
.beat.is-moving{ will-change:opacity,transform,filter; }
.beat.is-rest{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  will-change:auto;
}
.beat *{ pointer-events:auto; }
.beat--center{ align-self:center; }
.hero__title{
  font-family:var(--ff-h); font-weight:400;
  font-size:clamp(40px,min(17vw,17vh),150px); line-height:1; letter-spacing:.14em;
  text-transform:uppercase; margin:12px 0 0; white-space:nowrap;
  text-indent:.14em;
  text-shadow:0 12px 60px rgba(0,0,0,.6);
}
.hero__title span{ display:inline-block; }
.hero__sub{ margin-top:14px; font-size:clamp(10px,2.6vw,13px); font-weight:400; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); text-indent:.42em; }
.hero__ui .eyebrow{ justify-content:center; }
.hero__ui .eyebrow::after{ content:""; width:26px; height:1px; background:var(--gold); opacity:.6; flex:none; }
.beat__lead{
  font-family:var(--ff-h); font-weight:400;
  font-size:clamp(21px,min(6.2vw,7.4vh),46px); line-height:1.3; font-weight:300; letter-spacing:.005em;
  text-shadow:0 10px 44px rgba(0,0,0,.7);
  text-wrap:balance;
}
/* Sous 620 px on laisse le texte trouver sa propre coupe : les retours
   forces produisent des lignes bancales sur les petits ecrans. */
@media (max-width:619px){ .beat__lead br{ display:none; } }
.beat__sub{ margin-top:16px; font-size:clamp(11px,2.9vw,14px); font-weight:400; line-height:1.6; letter-spacing:.06em; color:var(--bone-2); max-width:34ch; margin-left:auto; margin-right:auto; }
.beat__cta{ margin-top:30px; }

.hero__hint{
  position:absolute; left:50%; bottom:calc(20px + var(--sab)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-3);
  transition:opacity .6s ease;
}
.hero__hint i{ display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--gold),transparent); position:relative; overflow:hidden; }
.hero__hint i::after{ content:""; position:absolute; left:0; top:-38px; width:1px; height:38px; background:var(--gold-2); animation:runline 2.1s var(--e-io) infinite; }
@keyframes runline{ 0%{transform:translateY(0)} 100%{transform:translateY(76px)} }
.hero__hint.is-off{ opacity:0; }

.hero__meter{
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:rgba(237,231,220,.09);
}
.hero__meter > i{ display:block; height:100%; width:0%; background:var(--gold); box-shadow:0 0 10px rgba(198,161,91,.7); }

/* =========================================================
   Sections communes
   ========================================================= */
.sec{ position:relative; z-index:2; background:var(--ink); padding:clamp(84px,16vw,168px) 0; overflow:hidden; }
.sec > .wrap,
.sec > .sigs,
.sec > .artistwrap,
.sec > .gal,
.sec > .marquee,
.sec > .rule{ position:relative; z-index:1; }
.sec + .sec{ padding-top:clamp(72px,13vw,150px); }
.rule{
  width:100%; max-width:var(--maxw); margin:clamp(64px,12vw,130px) auto 0;
  height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);
  transform:scaleX(.12); transform-origin:center;
  transition:transform 1.6s var(--e-out);
}
.rule.is-in{ transform:scaleX(1); }

/* --- Manifeste --- */
.manifeste{ padding-top:clamp(70px,13vw,130px); }
.manifeste__grid{ margin-top:clamp(30px,6vw,54px); display:grid; gap:22px; }
/* --- Artistes --- */
.seg{
  position:relative; display:inline-flex; align-items:center; gap:2px;
  margin-top:clamp(28px,5vw,40px);
  padding:4px; border:1px solid var(--line); border-radius:999px;
  background:rgba(237,231,220,.02);
  max-width:100%; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.seg::-webkit-scrollbar{ display:none; }
.seg__pill{
  position:absolute; top:4px; left:0; height:calc(100% - 8px);
  border-radius:999px;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 60%,var(--gold) 100%);
  box-shadow:0 6px 22px -10px rgba(198,161,91,.9);
  transform:translate3d(0,0,0); width:0;
  transition:transform .62s var(--e-out), width .62s var(--e-out);
  pointer-events:none;
}
.seg__btn{
  position:relative; z-index:2; flex:none;
  padding:11px 20px; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-2); white-space:nowrap;
  transition:color .4s ease;
}
.seg__btn.is-on{ color:#0b0a0c; }
@media (hover:hover){ .seg__btn:not(.is-on):hover{ color:var(--bone); } }

.artistwrap{ position:relative; margin-top:clamp(34px,6vw,56px); }
.artist{
  display:grid; gap:clamp(26px,6vw,44px);
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  animation:artIn .95s var(--e-out) both;
}
.artist[hidden]{ display:none; }
@keyframes artIn{ from{ opacity:0; transform:translate3d(0,26px,0) } to{ opacity:1; transform:none } }
.artist__media{ position:relative; }
.artist__text h3{ margin-bottom:8px; }
.artist__role{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.spec{ margin:26px 0 30px; border-top:1px solid var(--line-2); }
.spec li{ display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.spec b{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); flex:none; }
.spec span{ font-size:14px; color:var(--bone); text-align:right; }

/* --- Galerie --- */
.gal{ margin-top:clamp(30px,6vw,48px); }
.gal__track{
  display:flex; gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px var(--pad) 10px;
  scroll-padding-left:var(--pad);
}
.gal__track::-webkit-scrollbar{ display:none; }
.gal__item{
  flex:0 0 auto; width:min(72vw,340px);
  scroll-snap-align:start;
  position:relative; text-align:left;
  border:1px solid var(--line-2); border-radius:3px; overflow:hidden;
  background:rgba(11,10,15,.7);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out), border-color .5s ease;
}
.gal__item.is-hidden{ display:none; }
.gal__item.is-fading{ opacity:0; transform:translateY(14px) scale(.985); }
.gal__img{
  display:block; position:relative; aspect-ratio:900/1125; overflow:hidden;
  background-size:cover; background-position:center;
}
.gal__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.28) contrast(1.05);
  transform:scale(1.01);
  transition:transform 1.1s var(--e-out), filter .8s ease;
}
.gal__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,0) 48%,rgba(8,7,10,.88) 100%);
}
.gal__cap{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:block; }
.gal__cap b{ display:block; font-family:var(--ff-d); font-weight:400; font-size:21px; letter-spacing:.02em; }
.gal__cap i{ display:block; font-style:normal; margin-top:3px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); }
@media (hover:hover){
  .gal__item:hover{ border-color:var(--gold-3); }
  .gal__item:hover .gal__img img{ transform:scale(1.06); filter:grayscale(0) contrast(1.06); }
}
.gal__nav{
  display:flex; align-items:center; gap:16px;
  max-width:var(--maxw); margin:20px auto 0; padding:0 var(--pad);
}
.gal__arrow{
  width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:999px;
  display:grid; place-items:center; color:var(--bone-2);
  transition:color .4s ease, border-color .4s ease, transform .4s var(--e-out), opacity .3s ease;
}
.gal__arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.gal__arrow[disabled]{ opacity:.28; }
@media (hover:hover){ .gal__arrow:not([disabled]):hover{ color:var(--gold); border-color:var(--gold-3); transform:scale(1.06); } }
.gal__bar{ flex:1; height:1px; background:rgba(237,231,220,.10); position:relative; }
.gal__bar > i{ position:absolute; left:0; top:-1px; height:3px; width:20%; background:var(--gold); border-radius:2px; will-change:transform; }

/* --- Rituel --- */
.steps{ position:relative; margin-top:clamp(34px,6vw,56px); padding-left:34px; }
.steps__rail{ position:absolute; left:9px; top:8px; bottom:8px; width:1px; background:var(--line); }
.steps__rail > i{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 0 12px rgba(198,161,91,.55); }
.step{ position:relative; padding:0 0 clamp(30px,6vw,46px); }
.step:last-child{ padding-bottom:0; }
.step__n{
  position:absolute; left:-34px; top:2px; width:19px; height:19px;
  display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:var(--ink);
  font-size:8px; letter-spacing:.06em; color:var(--gold);
  transition:border-color .5s ease, box-shadow .5s ease;
}
.step.is-in .step__n{ border-color:var(--gold-3); box-shadow:0 0 0 4px rgba(198,161,91,.08); }
.step h3{ font-family:var(--ff-d); font-weight:400; font-size:clamp(21px,5.4vw,28px); margin-bottom:8px; }
.step p{ font-size:15px; line-height:1.75; color:var(--bone-2); max-width:62ch; }

/* --- Studio --- */
.marquee{ margin-top:clamp(52px,9vw,90px); overflow:hidden; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:20px 0; }
.marquee__row{ display:flex; gap:44px; width:max-content; animation:marq 44s linear infinite; will-change:transform; }
.marquee__row span{ font-family:var(--ff-d); font-size:clamp(20px,5vw,30px); font-weight:300; color:rgba(237,231,220,.20); white-space:nowrap; letter-spacing:.06em; }
.marquee__row span em{ font-style:normal; color:var(--gold); }
@keyframes marq{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* --- Avis --- */
.quotes{ position:relative; margin-top:clamp(34px,6vw,56px); }
.quotes__stage{ position:relative; display:grid; }
.quote{
  grid-area:1/1; opacity:0; visibility:hidden;
  transform:translate3d(0,18px,0);
  transition:opacity .8s var(--e-out), transform .9s var(--e-out), visibility .8s;
}
.quote.is-on{ opacity:1; visibility:visible; transform:none; }
.quote blockquote{
  font-family:var(--ff-d); font-weight:300; font-style:italic;
  font-size:clamp(21px,5.6vw,34px); line-height:1.42; color:var(--bone);
  max-width:22ch; max-width:min(100%,760px);
}
.quote figcaption{ margin-top:24px; display:flex; flex-direction:column; gap:4px; }
.quote figcaption b{ font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.quote figcaption span{ font-size:11px; letter-spacing:.14em; color:var(--bone-3); }
.quotes__dots{ display:flex; gap:10px; margin-top:34px; }
.quotes__dots button{ width:26px; height:2px; background:rgba(237,231,220,.16); border-radius:2px; transition:background .4s ease, width .5s var(--e-out); }
.quotes__dots button.is-on{ background:var(--gold); width:44px; }

/* --- FAQ --- */
.acc{ margin-top:clamp(30px,6vw,50px); border-top:1px solid var(--line-2); }
.acc__item{ border-bottom:1px solid var(--line-2); }
.acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:22px 0; text-align:left;
  font-family:var(--ff-d); font-weight:400; font-size:clamp(18px,4.8vw,24px); line-height:1.3;
  transition:color .4s ease;
}
.acc__head i{ position:relative; width:14px; height:14px; flex:none; }
.acc__head i::before,.acc__head i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--gold);
  transition:transform .55s var(--e-out), opacity .4s ease;
}
.acc__head i::before{ width:14px; height:1px; transform:translate(-50%,-50%); }
.acc__head i::after{ width:1px; height:14px; transform:translate(-50%,-50%); }
.acc__item.is-open .acc__head i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acc__item.is-open .acc__head{ color:var(--gold-2); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s var(--e-out); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ font-size:15px; line-height:1.8; color:var(--bone-2); padding-bottom:24px; max-width:74ch; }
.acc__panel b{ color:var(--bone); font-weight:500; }
@media (hover:hover){ .acc__head:hover{ color:var(--gold-2); } }

/* --- Réserver --- */
.reserver{ overflow:hidden; padding-bottom:clamp(96px,16vw,180px); }
.reserver .wrap{ position:relative; }
.reserver .lead{ margin-top:clamp(24px,5vw,36px); max-width:60ch; }
.reserver__cta{ margin-top:clamp(30px,6vw,44px); display:flex; flex-wrap:wrap; gap:12px; }
.infos{
  margin-top:clamp(56px,10vw,96px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
.info{ background:rgba(8,7,10,.55); padding:22px 18px; display:flex; flex-direction:column; gap:9px; }
.info b{ font-size:9px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.info a,.info span{ font-size:14px; line-height:1.55; color:var(--bone); }
.info a{ transition:color .35s ease; }
@media (hover:hover){ .info a:hover{ color:var(--gold-2); } }

/* --- Footer --- */
.foot{ position:relative; z-index:2; background:var(--ink-1); border-top:1px solid var(--line-2); padding:clamp(50px,9vw,76px) 0 calc(30px + var(--sab) + 76px); }
.foot__top{ display:flex; flex-direction:column; gap:26px; }
.foot__brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-d); font-size:18px; letter-spacing:.2em; text-transform:uppercase; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:14px 22px; }
.foot__nav a{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-3); transition:color .35s ease; }
@media (hover:hover){ .foot__nav a:hover{ color:var(--gold); } }
.foot__seo{ margin-top:34px; font-size:12px; line-height:1.85; color:rgba(237,231,220,.30); max-width:80ch; }
.foot__bottom{ margin-top:32px; padding-top:22px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,231,220,.26); }

/* --- Dock mobile --- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  display:flex; align-items:center; gap:10px;
  padding:10px var(--pad) calc(10px + var(--sab));
  background:linear-gradient(180deg,rgba(8,7,10,.90) 0%,#08070a 42%);
  border-top:1px solid var(--line-2);
  transform:translate3d(0,140%,0);
  transition:transform .7s var(--e-out);
}
.dock.is-shown{ transform:translate3d(0,0,0); }
.dock__call{
  width:48px; height:48px; flex:none; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--bone);
}
.dock__call svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.dock__book{
  flex:1; height:48px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 60%,var(--gold) 100%);
  color:#0b0a0c; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 10px 30px -14px rgba(198,161,91,.9);
}
.dock__book:active{ transform:scale(.985); }

/* --- Chrome masque pendant une superposition --- */
body.is-lb .nav,
body.is-lb .dock,
body.is-lb .scrollrail{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
body.is-menu .dock{ opacity:0; pointer-events:none; transition:opacity .3s ease; }

/* --- Lightbox --- */
.lb{
  position:fixed; inset:0; z-index:150;
  background:#050407;
  display:grid; place-items:center;
  padding:calc(56px + var(--sab)) 16px;
  opacity:0; transition:opacity .45s ease;
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__fig{
  max-width:min(94vw,560px); width:100%;
  transform:scale(.94) translateY(16px); opacity:0;
  transition:transform .7s var(--e-out), opacity .5s ease;
}
.lb.is-open .lb__fig{ transform:none; opacity:1; }
.lb__fig img{ width:100%; height:auto; max-height:72vh; object-fit:contain; border-radius:3px; }
.lb__fig figcaption{ margin-top:16px; text-align:center; display:flex; flex-direction:column; gap:5px; }
.lb__fig figcaption b{ font-family:var(--ff-d); font-weight:400; font-size:21px; }
.lb__fig figcaption span{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); }
.lb__close{
  position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; z-index:3;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--bone);
}
.lb__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.lb__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--bone);
  background:rgba(8,7,10,.5);
}
.lb__arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.lb__arrow--prev{ left:10px; }
.lb__arrow--next{ right:10px; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width:600px){
  .infos{ grid-template-columns:repeat(4,1fr); }
  .lb__fig{ max-width:min(70vw,520px); }
}

@media (min-width:900px){
  :root{ --nav-h:76px; }
  .nav__right{ gap:22px; }
  .nav__real{ --bh:42px; padding:0 22px; font-size:10px; letter-spacing:.18em; }
  .nav__book{ --bh:42px; padding:0 24px; font-size:10px; letter-spacing:.2em; }
  .lang__btn{ height:38px; padding:0 12px; gap:7px; }
  .lang__code{ font-size:11px; }
  .logo--nav{ height:40px; }
  .nav__word{ font-size:18px; }
  .dock{ display:none; }
  .foot{ padding-bottom:clamp(30px,5vw,50px); }

  .hero__track{ height:calc(var(--stage-h, 100vh) * 7.6); }
  .hero__ui{ padding-bottom:96px; }

  .manifeste__grid{ grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,64px); }

  .artist{ grid-template-columns:0.92fr 1fr; align-items:center; gap:clamp(40px,6vw,80px); }
  .artist--flip .artist__media{ order:2; }

  .gal__item{ width:min(30vw,360px); }
  .steps{ padding-left:64px; }
  .steps__rail{ left:19px; }
  .step__n{ left:-64px; width:39px; height:39px; font-size:10px; }
  .step.is-in .step__n{ box-shadow:0 0 0 6px rgba(198,161,91,.07); }

  .foot__top{ flex-direction:row; align-items:center; justify-content:space-between; }
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:180; pointer-events:none;
    width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1px solid var(--gold-3); border-radius:999px;
    transform:translate3d(-100px,-100px,0) scale(1);
    transition:transform .16s linear, width .35s var(--e-out), height .35s var(--e-out), border-color .35s ease, opacity .3s;
    will-change:transform;
  }
  .cursor > i{ position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:999px; background:var(--gold); }
  body.cursor-hot .cursor{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--gold); }
}

@media (min-width:1200px){
  .hero__track{ height:calc(var(--stage-h, 100vh) * 8.2); }
  .quote blockquote{ font-size:clamp(28px,2.6vw,40px); }
}

/* Écrans larges / paysage : la séquence portrait est présentée en panneau */
@media (min-aspect-ratio:4/5) and (min-width:900px){
  .hero__scrim{ background:linear-gradient(180deg,rgba(8,7,10,.60) 0%,rgba(8,7,10,0) 30%,rgba(8,7,10,0) 46%,rgba(8,7,10,.88) 100%); }
}

/* ---------- Accessibilité 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;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .display .line > i{ transform:none !important; }
  .grain{ display:none; }
}

/* ---------- Impression ---------- */
@media print{
  .loader,.grain,.vignette,.scrollrail,.nav,.menu,.dock,.lb,.hero{ display:none !important; }
  body{ background:#fff; color:#111; }
}

/* ---------- Ancres : décalage sous la barre fixe ---------- */
section[id],main[id]{ scroll-margin-top:calc(var(--nav-h) + 8px); }

/* =========================================================
   AMBIANCES DE SECTION
   Une photographie du lieu, très floue et très sombre, une
   dérive lumineuse et un ornement de flash : le noir cesse
   d'être plat sans jamais gêner la lecture.
   ========================================================= */
.amb{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.amb__img{
  position:absolute; inset:-10% -6%;
  background-size:cover; background-position:center;
  opacity:.30;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
  -webkit-mask-image:radial-gradient(125% 82% at 50% 40%, #000 8%, rgba(0,0,0,.6) 48%, transparent 86%);
  mask-image:radial-gradient(125% 82% at 50% 40%, #000 8%, rgba(0,0,0,.6) 48%, transparent 86%);
}
.amb__glow{ position:absolute; border-radius:50%; }
.amb__glow--a{
  width:86vw; height:86vw; max-width:760px; max-height:760px; left:-22%; top:2%;
  background:radial-gradient(circle,rgba(198,161,91,.17) 0%,rgba(198,161,91,.055) 40%,transparent 70%);
  animation:driftA 38s ease-in-out infinite alternate;
}
.amb__glow--b{
  width:78vw; height:78vw; max-width:680px; max-height:680px; right:-20%; bottom:0;
  background:radial-gradient(circle,rgba(126,31,31,.16) 0%,rgba(126,31,31,.05) 42%,transparent 72%);
  animation:driftB 52s ease-in-out infinite alternate;
}
@keyframes driftA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(9%,-7%,0) scale(1.22) } }
@keyframes driftB{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-8%,6%,0) scale(.92) } }

/* Rien ne s'anime hors champ : chaque section allume ses couches en entrant. */
.amb__glow{ animation-play-state:paused; }
.sec.is-live .amb__glow{ animation-play-state:running; }

.orn{
  position:absolute; width:230px; height:230px;
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:opacity 2.4s var(--e-out);
}
.orn--tall{ width:150px; height:250px; }
.orn--wide{ width:280px; height:140px; }
.orn--tl{ top:3%; left:-7%; }
.orn--tr{ top:5%; right:-8%; }
.orn--bl{ bottom:6%; left:-8%; }
.sec.is-live .orn{ opacity:.09; animation:ornFloat 30s ease-in-out infinite alternate; }

/* Pièce encrée à la place de la rosace : même ancrage, présence équivalente.
   Spécificité montée d'un cran, sinon la règle générique ci-dessus la reprend. */
.orn.orn--fig{ width:240px; height:auto; }
.sec.is-live .orn.orn--fig{ opacity:.16; animation-duration:38s; }
@keyframes ornFloat{ from{ transform:translate3d(0,0,0) rotate(-3deg) } to{ transform:translate3d(0,-16px,0) rotate(3deg) } }

.sprite,
.flags{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

/* =========================================================
   SECTION SALON — plan large du lieu
   ========================================================= */
.salon{ position:relative; z-index:2; background:var(--ink); display:none; }
.salon.is-ready{ display:block; }
.salon__stage{
  position:relative; overflow:hidden;
  min-height:min(148vh,940px);
  display:grid; align-items:end;
}
.salon__img{
  position:absolute; inset:-12% 0;
  background-size:cover; background-position:center 42%;
  transform:translate3d(0,var(--py,0px),0) scale(1.05);
  filter:contrast(1.06) saturate(.94);
}
.salon__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(8,7,10,.30) 22%,rgba(8,7,10,.10) 44%,rgba(8,7,10,.80) 78%,var(--ink) 100%),
    radial-gradient(120% 70% at 50% 40%,transparent 35%,rgba(0,0,0,.5) 100%);
}
.salon__light{
  position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:
    radial-gradient(34% 22% at 20% 50%,rgba(255,196,124,.20),transparent 72%),
    radial-gradient(26% 16% at 80% 34%,rgba(255,186,116,.14),transparent 72%),
    radial-gradient(20% 12% at 56% 78%,rgba(255,206,140,.10),transparent 74%);
  animation:lamp 8s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.salon.is-live .salon__light{ animation-play-state:running; }
@keyframes lamp{ from{ opacity:.72 } to{ opacity:1 } }
.salon__txt{
  position:relative; z-index:2;
  padding-bottom:clamp(56px,11vw,120px);
}
.salon__txt .lead{ margin-top:20px; max-width:46ch; }
.salon__txt .display{ text-shadow:0 14px 60px rgba(0,0,0,.75); }

/* =========================================================
   RÉSERVATION — calendrier intégré au site
   ========================================================= */
body.is-bk .nav, body.is-bk .dock, body.is-bk .scrollrail{ opacity:0; pointer-events:none; transition:opacity .3s ease; }

.bk{
  position:fixed; inset:0; z-index:160;
  display:grid; place-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(14px + var(--sab));
}
.bk[hidden]{ display:none; }
.bk__veil{
  position:absolute; inset:0; background:rgba(4,3,6,.90);
  opacity:0; transition:opacity .55s ease;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bk__veil{ background:rgba(4,3,6,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
}
.bk.is-open .bk__veil{ opacity:1; }

.bk__panel{
  position:relative; width:min(940px,100%);
  max-height:calc(var(--app-h) - 30px);
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:linear-gradient(168deg,#14121b 0%,#0c0b11 52%,#08070a 100%);
  border:1px solid rgba(237,231,220,.16); border-radius:clamp(20px,5vw,28px);
  box-shadow:0 70px 160px -60px #000, 0 0 0 1px rgba(198,161,91,.07) inset, 0 0 90px -40px rgba(198,161,91,.35);
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  opacity:0;
  transition:clip-path .95s var(--e-out), opacity .4s ease;
}
.bk.is-open .bk__panel{ -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0); opacity:1; }

.bk__wm{
  position:absolute; right:-64px; top:-52px; width:300px; opacity:.05;
  pointer-events:none; filter:grayscale(1) contrast(1.2);
  transform:rotate(-8deg);
}
.bk__wm .logo{ width:100%; height:auto; }
.bk__close{
  position:absolute; top:14px; right:14px; z-index:4;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--bone-2);
  background:rgba(8,7,10,.6);
  transition:color .35s ease, border-color .35s ease, transform .45s var(--e-out);
}
.bk__close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; }
@media (hover:hover){ .bk__close:hover{ color:var(--gold-2); border-color:var(--gold-3); transform:rotate(90deg); } }

.bk__step{ display:none; padding:clamp(26px,6vw,44px); }
.bk__step.is-on{ display:block; }
.bk.is-open .bk__step.is-on > *{ animation:bkIn .8s var(--e-out) both; }
.bk.is-open .bk__step.is-on > *:nth-child(2){ animation-delay:.07s }
.bk.is-open .bk__step.is-on > *:nth-child(3){ animation-delay:.13s }
.bk.is-open .bk__step.is-on > *:nth-child(4){ animation-delay:.19s }
.bk.is-open .bk__step.is-on > *:nth-child(5){ animation-delay:.25s }
@keyframes bkIn{ from{ opacity:0; transform:translate3d(0,18px,0) } to{ opacity:1; transform:none } }

.bk__t{
  font-family:var(--ff-d); font-weight:300;
  font-size:clamp(28px,6.6vw,44px); line-height:1.1; margin-bottom:12px;
}
.bk__sub{ font-size:14px; line-height:1.7; color:var(--bone-2); max-width:56ch; }

.bk__artists{ margin-top:clamp(22px,5vw,32px); display:grid; gap:12px; }
.bkart{
  position:relative; overflow:hidden; isolation:isolate; text-align:left;
  aspect-ratio:16/11; background:#0a090e;
  border-radius:clamp(16px,4.5vw,22px);
  border:1px solid rgba(237,231,220,.15);
  box-shadow:0 26px 60px -40px #000, 0 0 0 1px rgba(198,161,91,.06) inset;
  transition:transform .7s var(--e-out), border-color .6s ease, box-shadow .6s ease;
}
.bkart__ph{
  position:absolute; inset:0; display:block; overflow:hidden;
  background-size:cover; background-position:center;
}
.bkart__ph img{
  width:100%; height:100%; object-fit:cover; object-position:center 26%;
  filter:grayscale(.28) contrast(1.05);
  transition:filter .7s ease, transform 1.1s var(--e-out);
}
.bkart::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,10,.42) 0%,rgba(8,7,10,.05) 26%,rgba(8,7,10,.66) 66%,rgba(8,7,10,.95) 100%);
}
.bkart__txt{ position:absolute; z-index:3; left:18px; right:56px; bottom:16px; display:block; }
.bkart__txt b{
  display:block; font-family:var(--ff-h); font-weight:600; line-height:1.05;
  font-size:clamp(21px,5.6vw,26px); letter-spacing:.015em; text-transform:uppercase;
  text-shadow:0 8px 26px rgba(0,0,0,.75);
}
.bkart__txt i{
  display:block; margin-top:6px; font-style:normal;
  font-size:8.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--gold-2);
}
.bkart__txt em{ display:block; margin-top:6px; font-style:normal; font-size:11px; color:var(--bone-3); }
.bkart__go{
  position:absolute; z-index:4; right:16px; bottom:16px;
  width:38px; height:38px; flex:none; border-radius:999px;
  border:1px solid rgba(237,231,220,.5); background:rgba(8,7,10,.28);
  display:grid; place-items:center; color:var(--bone);
  transition:transform .5s var(--e-out), color .4s ease, border-color .4s ease, background-color .4s ease;
}
.bkart__go svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
@media (hover:hover){
  .bkart:hover{ transform:translateY(-3px); border-color:rgba(198,161,91,.42); box-shadow:0 34px 74px -40px #000, 0 0 70px -34px rgba(198,161,91,.45); }
  .bkart:hover .bkart__ph img{ filter:grayscale(0) contrast(1.07); transform:scale(1.05); }
  .bkart:hover .bkart__go{ color:#0b0a0c; background:var(--gold-2); border-color:transparent; transform:translateX(3px); }
}
.bkart:active{ transform:scale(.995); }

.bk__foot{ margin-top:24px; font-size:12px; letter-spacing:.06em; color:var(--bone-3); }
.bk__foot a{ color:var(--gold); border-bottom:1px solid var(--gold-3); padding-bottom:1px; }

.bk__head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; padding-right:44px; }
.bk__back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-3);
  transition:color .35s ease;
}
.bk__back svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .45s var(--e-out); }
@media (hover:hover){ .bk__back:hover{ color:var(--gold-2); } .bk__back:hover svg{ transform:translateX(-3px); } }
.bk__who{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.bk__ava{ width:34px; height:34px; border-radius:999px; background-size:cover; background-position:center 30%; border:1px solid var(--gold-3); flex:none; }
.bk__who b{ font-family:var(--ff-d); font-weight:400; font-size:19px; }
.bk__who i{ font-style:normal; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

.bk__mount{
  position:relative; min-height:min(64vh,600px);
  border:1px solid var(--line-2); border-radius:5px; overflow:hidden;
  background:#0a090e;
}
.bk__mount iframe{ border:0 !important; }
.bk__state{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:26px 0 4px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3);
}
.bk__state[hidden]{ display:none; }
.bk__spin{
  width:15px; height:15px; border-radius:999px; flex:none;
  border:1px solid rgba(198,161,91,.25); border-top-color:var(--gold);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.bk__fail{ padding:26px 0 4px; text-align:center; }
.bk__fail[hidden]{ display:none; }
.bk__fail p{ font-size:14px; color:var(--bone-2); margin-bottom:16px; }

/* =========================================================
   LOGO — variantes hors barre de navigation
   ========================================================= */
.loader__mark{ width:104px; margin:0 auto 24px; }
.logo--load{ width:100%; height:auto; animation:logoIn 1.6s var(--e-out) both; }
@keyframes logoIn{ from{ opacity:0; transform:scale(.82) rotate(-6deg); filter:blur(6px) } to{ opacity:1; transform:none; filter:none } }
.foot__brand{ gap:12px; }
.logo--foot{ height:40px; opacity:.9; }

@media (min-width:900px){
  .bk__artists{ grid-template-columns:1fr 1fr; gap:16px; }
  .bkart{ grid-template-columns:auto 1fr; padding:16px; gap:16px; }
  .bkart__go{ position:absolute; right:16px; bottom:16px; }
  .bkart__ph{ width:78px; height:98px; }
  .bk__mount{ min-height:600px; }
  .orn{ width:300px; height:300px; }
  .orn--tall{ width:190px; height:320px; }
  .orn--wide{ width:360px; height:180px; }
  .orn.orn--fig{ width:330px; }
  .salon__stage{ min-height:min(118vh,880px); }
}

@media (prefers-reduced-motion:reduce){
  .amb__glow, .salon__light, .orn{ animation:none !important; }
  .bk__panel{ -webkit-clip-path:none !important;clip-path:none !important; }
}

/* ---------- Barre de navigation sur petits écrans ----------
   Quatre éléments doivent tenir dans 320 px sans jamais déborder :
   on resserre par paliers plutôt que de masquer un bouton. */
@media (max-width:439px){
  .nav__right{ gap:7px; }
  .nav__real{ padding:0 12px; font-size:9px; letter-spacing:.1em; }
  .nav__book{ padding:0 14px; font-size:9px; letter-spacing:.12em; }
  .lang__btn{ padding:0 8px; gap:4px; }
  .lang__flag{ width:18px; height:12px; }
  .logo--nav{ height:30px; }
}
@media (max-width:359px){
  .nav__right{ gap:5px; }
  .nav__real{ --bh:34px; padding:0 9px; font-size:8.5px; letter-spacing:.05em; }
  .nav__book{ --bh:34px; padding:0 11px; font-size:8.5px; letter-spacing:.08em; }
  .lang__btn{ height:30px; padding:0 6px; }
  .lang__flag{ width:16px; height:11px; }
  .lang__code{ font-size:9.5px; }
  .logo--nav{ height:26px; }
  .lang__menu{ width:196px; }
}

/* =========================================================
   CHIFFRES DU STUDIO — sans cadre, à l'éditorial
   ========================================================= */
.stats{
  margin-top:clamp(46px,9vw,80px);
  padding-top:clamp(28px,6vw,42px);
  border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,6vw,38px) 0;
}
.stat{ position:relative; text-align:center; padding:0 8px; }
.stat::before{
  content:""; position:absolute; left:0; top:4%; bottom:4%; width:1px; opacity:0;
  background:linear-gradient(180deg,transparent,var(--line) 45%,transparent);
}
.stat:nth-child(even)::before{ opacity:1; }
.stat b{
  display:block; font-family:var(--ff-d); font-weight:300;
  font-size:clamp(42px,11.5vw,66px); line-height:.98; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(175deg,#F2E1BA 0%,var(--gold-2) 34%,var(--gold) 66%,#8F7038 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
  display:block; margin-top:11px;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3);
}

/* =========================================================
   NOS SIGNATURES — cartes plein cadre
   ========================================================= */
.sigs{
  margin:clamp(34px,7vw,60px) auto 0;
  max-width:var(--maxw); padding:0 var(--pad);
  display:grid; gap:clamp(16px,4vw,24px);
}
.sig{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line-2); border-radius:4px;
  min-height:clamp(420px,88vw,540px);
  display:flex; align-items:flex-end;
  transition:border-color .8s ease, box-shadow .8s ease;
}
.sig__media{ position:absolute; inset:0; overflow:hidden; }
.sig__img{
  position:absolute; inset:-9% 0;
  background-size:cover; background-position:center;
}
.sig__img img{
  width:100%; height:100%; object-fit:cover;
  transform:translate3d(0,var(--py,0px),0) scale(1.03);
  filter:grayscale(.30) contrast(1.06) brightness(.92);
  transition:filter 1.1s ease, transform 1.3s var(--e-out);
}
.sig__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,.30) 0%,rgba(8,7,10,.06) 30%,rgba(8,7,10,.78) 68%,rgba(8,7,10,.97) 100%);
}
.sig__num{
  position:absolute; top:16px; left:20px; z-index:2;
  font-family:var(--ff-d); font-weight:300; line-height:1;
  font-size:clamp(44px,12vw,70px);
  color:transparent; -webkit-text-stroke:1px rgba(237,231,220,.26);
  letter-spacing:.02em;
}
.sig__body{ position:relative; z-index:2; width:100%; padding:clamp(22px,5.5vw,32px); }
.sig__body h3{
  font-family:var(--ff-d); font-weight:300;
  font-size:clamp(25px,6.6vw,34px); line-height:1.08; letter-spacing:-.005em;
  text-shadow:0 8px 30px rgba(0,0,0,.6);
}
.sig__rule{
  display:block; width:46px; height:1px; margin:15px 0;
  background:linear-gradient(90deg,var(--gold-2),rgba(198,161,91,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--e-out) .3s;
}
.sig.is-in .sig__rule{ transform:scaleX(1); }
.sig__body p{ font-size:14.5px; line-height:1.72; color:var(--bone-2); max-width:46ch; }
.sig .tags{ margin-top:18px; }
@media (hover:hover){
  .sig:hover{ border-color:var(--gold-3); box-shadow:0 40px 90px -60px rgba(198,161,91,.55); }
  .sig:hover .sig__img img{ filter:grayscale(0) contrast(1.08) brightness(1); transform:translate3d(0,var(--py,0px),0) scale(1.08); }
}

/* =========================================================
   NOS ARTISTES — carte pleine image, contour lumineux
   ========================================================= */
.acard{
  position:relative; margin:0; overflow:hidden; isolation:isolate;
  aspect-ratio:4/5; background:#0a090e;
  border-radius:clamp(22px,6vw,30px);
  border:1px solid rgba(237,231,220,.16);
  box-shadow:0 46px 100px -54px #000,
             0 0 0 1px rgba(198,161,91,.07) inset,
             0 0 70px -34px rgba(198,161,91,.40);
  transition:transform .85s var(--e-out), border-color .7s ease, box-shadow .7s ease;
}
.acard__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.acard__img img{
  width:100%; height:114%; object-fit:cover; object-position:center 28%;
  transform:translate3d(0,var(--py,0px),0);
  filter:grayscale(.14) contrast(1.05);
  transition:filter 1s ease, transform 1.25s var(--e-out);
}
.acard__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,10,.52) 0%,rgba(8,7,10,.06) 22%,rgba(8,7,10,0) 42%,rgba(8,7,10,.72) 78%,rgba(8,7,10,.96) 100%);
}
.acard__go{
  position:absolute; top:clamp(13px,3.6vw,20px); right:clamp(13px,3.6vw,20px); z-index:4;
  display:inline-flex; align-items:center; min-height:42px; padding:0 clamp(16px,4vw,22px);
  border-radius:999px; border:1px solid rgba(237,231,220,.55);
  background:rgba(8,7,10,.24); color:var(--bone);
  font-family:var(--ff-h); font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  transition:color .4s ease, border-color .4s ease, background-color .4s ease, transform .5s var(--e-out);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .acard__go{ -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
}
.acard__go:active{ transform:scale(.96); }
.acard__cap{
  position:absolute; z-index:3;
  left:clamp(18px,5vw,28px); right:clamp(18px,5vw,28px); bottom:clamp(18px,5vw,26px);
}
.acard__cap em{
  display:block; font-family:var(--ff-d); font-style:italic; font-weight:400;
  font-size:clamp(17px,4.6vw,22px); letter-spacing:.16em; color:var(--gold-2);
}
.acard__cap b{
  display:block; margin-top:2px;
  font-family:var(--ff-h); font-weight:600; line-height:1.02;
  font-size:clamp(27px,7.6vw,40px); letter-spacing:.012em; text-transform:uppercase;
  text-shadow:0 10px 34px rgba(0,0,0,.7);
}
.acard__cap i{
  display:block; margin-top:10px; font-style:normal;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2);
}
@media (hover:hover){
  .acard:hover{ transform:translateY(-5px); border-color:rgba(198,161,91,.42); box-shadow:0 56px 120px -56px #000, 0 0 90px -34px rgba(198,161,91,.55); }
  .acard:hover .acard__img img{ filter:grayscale(0) contrast(1.07); transform:translate3d(0,var(--py,0px),0) scale(1.05); }
  .acard__go:hover{ color:#0b0a0c; background:var(--gold-2); border-color:transparent; }
}

/* =========================================================
   LE LIEU — six garanties, révélation en rideau
   ========================================================= */
.grid4{ margin-top:clamp(34px,6vw,56px); display:grid; gap:12px; }
.gitem{
  position:relative; overflow:hidden;
  padding:clamp(22px,5vw,28px);
  border:1px solid var(--line-2); border-radius:4px;
  background:linear-gradient(158deg,rgba(237,231,220,.05),rgba(237,231,220,.012));
}
.gitem::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 80% at 0% 0%,rgba(198,161,91,.11),transparent 62%);
  opacity:0; transition:opacity 1.2s ease .2s;
}
.gitem.is-in::before{ opacity:1; }
.gitem::after{
  content:""; position:absolute; top:0; left:0; width:34px; height:1px;
  background:linear-gradient(90deg,var(--gold-2),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--e-out) .35s;
}
.gitem.is-in::after{ transform:scaleX(1); }
.gitem__ic{
  width:27px; height:27px; color:var(--gold);
  fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}
.gitem h3{ font-family:var(--ff-d); font-weight:400; font-size:clamp(19px,5vw,23px); margin:16px 0 8px; }
.gitem p{ font-size:14px; line-height:1.72; color:var(--bone-2); }

/* Révélation en rideau : l'élément se découvre du bas vers le haut,
   au lieu de glisser. Plus calme, plus net, plus haut de gamme. */
.curtain{
  opacity:0;
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  transform:translate3d(0,12px,0);
  transition:clip-path .95s var(--e-out), opacity .6s ease, transform .95s var(--e-out);
  transition-delay:calc(var(--d,0) * 70ms);
}
.curtain.is-in{ opacity:1; -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0); transform:none; }
.curtain[data-d="1"]{ --d:1 } .curtain[data-d="2"]{ --d:2 } .curtain[data-d="3"]{ --d:3 }
.curtain[data-d="4"]{ --d:4 } .curtain[data-d="5"]{ --d:5 } .curtain[data-d="6"]{ --d:6 }

@media (min-width:600px){
  .stats{ grid-template-columns:repeat(4,1fr); }
  .stat::before{ opacity:1; }
  .stat:first-child::before{ opacity:0; }
  .grid4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .sigs{ grid-template-columns:repeat(3,1fr); }
  .sig{ min-height:clamp(480px,44vw,620px); }
  .sig__body p{ opacity:0; transform:translate3d(0,14px,0); transition:opacity .7s var(--e-out), transform .8s var(--e-out); }
  .sig .tags{ opacity:0; transform:translate3d(0,14px,0); transition:opacity .7s var(--e-out) .06s, transform .8s var(--e-out) .06s; }
  .sig:hover .sig__body p, .sig:hover .sig .tags,
  .sig:focus-within .sig__body p{ opacity:1; transform:none; }
  .sig:hover .tags{ opacity:1; transform:none; }
  .grid4{ grid-template-columns:repeat(3,1fr); }
}
@media (hover:none){
  .sig__body p, .sig .tags{ opacity:1 !important; transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .curtain{ opacity:1 !important; -webkit-clip-path:none !important;clip-path:none !important; transform:none !important; }
  .sig__body p, .sig .tags{ opacity:1 !important; transform:none !important; }
}

/* ---------- Étiquettes de style ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-3);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  background:rgba(8,7,10,.35);
}

/* Sur mobile le sélecteur de langue n'est plus le dernier élément de la barre :
   ancré à droite de son bouton, le menu sortait de l'écran par la gauche.
   On l'accroche donc au bord droit de la fenêtre. */
@media (max-width:699px){
  .lang__menu{
    position:fixed;
    top:calc(var(--nav-h) + 6px);
    left:auto; right:12px;
    width:min(320px, calc(100vw - 24px));
    max-height:min(62vh,420px);
    transform-origin:top right;
  }
}

/* =========================================================
   ESTIMATION — simulateur de prix et de durée
   ========================================================= */
.est{
  margin-top:clamp(30px,6vw,48px);
  display:grid; gap:clamp(16px,4vw,26px);
}

/* ---- Carte de résultat ---- */
.est__out{
  position:sticky; top:calc(var(--nav-h) + 10px); z-index:3;
  padding:clamp(20px,5vw,28px);
  border:1px solid rgba(198,161,91,.22); border-radius:5px;
  background:linear-gradient(166deg,rgba(26,22,32,.96),rgba(10,9,13,.97));
  box-shadow:0 30px 70px -44px #000, 0 0 0 1px rgba(198,161,91,.05) inset;
  overflow:hidden;
}
.est__out::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 82% -10%,rgba(198,161,91,.16),transparent 62%);
}
.est__out > *{ position:relative; }
.est__eye{
  font-size:9.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.est__price{
  font-family:var(--ff-d); font-weight:300; line-height:1;
  font-size:clamp(38px,10vw,54px); letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(172deg,#F4E5C1 0%,var(--gold-2) 36%,var(--gold) 70%,#8F7038 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.est__rows{
  margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.est__rows > div{ background:rgba(8,7,10,.4); padding:13px 4px 14px; text-align:center; }
.est__rows b{
  display:block; font-size:8.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-3);
}
.est__rows span{
  display:block; margin-top:7px; font-family:var(--ff-d); font-weight:400;
  font-size:clamp(19px,5vw,23px); color:var(--bone); font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
.est__gauge{ margin-top:18px; height:2px; background:rgba(237,231,220,.09); border-radius:2px; overflow:hidden; }
.est__gauge > i{
  display:block; height:100%; width:12%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 0 10px rgba(198,161,91,.55);
  transition:width .6s var(--e-out);
}
.est__sum{
  margin-top:12px; min-height:1.4em;
  font-size:11px; letter-spacing:.1em; color:var(--bone-3);
}
.est__cta{ margin-top:20px; width:100%; }
.est__note{ margin-top:14px; font-size:11px; line-height:1.6; color:rgba(237,231,220,.34); }

/* ---- Réglages ---- */
.est__form{ display:grid; gap:clamp(20px,5vw,26px); }
.est__grp{ }
.est__lab{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:12px;
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-2);
}
.est__lab b{
  font-family:var(--ff-d); font-weight:400; font-size:19px; letter-spacing:.02em;
  color:var(--gold-2); text-transform:none; font-variant-numeric:lining-nums tabular-nums;
}
.est__hint{ margin-top:10px; font-size:11.5px; color:rgba(237,231,220,.34); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  position:relative; overflow:hidden;
  padding:11px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(237,231,220,.02);
  font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--bone-2);
  transition:color .4s ease, border-color .45s ease, background-color .45s ease, transform .45s var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.chip::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 58%,var(--gold) 100%);
  opacity:0; transition:opacity .4s ease;
}
.chip.is-on{ color:#0b0a0c; border-color:transparent; background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 58%,var(--gold) 100%); box-shadow:0 8px 24px -12px rgba(198,161,91,.8); }
.chip:active{ transform:scale(.97); }
@media (hover:hover){ .chip:not(.is-on):hover{ color:var(--bone); border-color:var(--gold-3); background-color:rgba(198,161,91,.06); } }

/* ---- Curseur de taille ---- */
.est__range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:34px; background:transparent; cursor:pointer;
  --fill:26%;
}
.est__range::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) var(--fill),rgba(237,231,220,.12) var(--fill),rgba(237,231,220,.12) 100%);
}
.est__range::-moz-range-track{ height:3px; border-radius:3px; background:rgba(237,231,220,.12); }
.est__range::-moz-range-progress{ height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.est__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-9.5px; border-radius:999px;
  background:radial-gradient(circle at 34% 30%,#F6EAD0,var(--gold-2) 46%,var(--gold) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 0 7px rgba(198,161,91,.13);
  transition:box-shadow .3s ease, transform .3s var(--e-out);
}
.est__range::-moz-range-thumb{
  width:22px; height:22px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:radial-gradient(circle at 34% 30%,#F6EAD0,var(--gold-2) 46%,var(--gold) 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 0 7px rgba(198,161,91,.13);
}
.est__range:active::-webkit-slider-thumb{ transform:scale(1.12); box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 0 11px rgba(198,161,91,.18); }
.est__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 0 11px rgba(198,161,91,.28); }
.est__rule{
  display:flex; justify-content:space-between; margin-top:-2px;
  font-size:9px; letter-spacing:.16em; color:rgba(237,231,220,.28);
}

@media (min-width:900px){
  .est{ grid-template-columns:1fr .82fr; gap:clamp(28px,4vw,52px); align-items:start; }
  .est__form{ order:1; }
  .est__out{ order:2; }
  .est__cta{ --bh:54px; }
}
@media (prefers-reduced-motion:reduce){
  .est__gauge > i{ transition:none; }
}

.estim .lead{ margin-top:clamp(20px,4.5vw,30px); max-width:62ch; }

/* =========================================================
   AMBIANCES VIVANTES — signature, réalisations, estimation
   Trois couches qui racontent l'atelier : l'encre qui diffuse,
   le faisceau de la lampe qui balaie, la poussière dans la lumière.
   Tout en transform et opacity, et en pause hors champ.
   ========================================================= */
.amb__ink{ position:absolute; border-radius:50%; pointer-events:none; }
.amb__ink--a{
  width:118vw; height:118vw; max-width:880px; max-height:880px; left:-32%; top:-16%;
  background:radial-gradient(circle at 44% 42%,rgba(198,161,91,.14) 0%,rgba(198,161,91,.05) 34%,transparent 66%);
  animation:inkA 26s ease-in-out infinite alternate;
}
.amb__ink--b{
  width:102vw; height:102vw; max-width:760px; max-height:760px; right:-28%; bottom:-18%;
  background:radial-gradient(circle at 56% 54%,rgba(126,31,31,.15) 0%,rgba(126,31,31,.045) 38%,transparent 70%);
  animation:inkB 34s ease-in-out infinite alternate;
}
@keyframes inkA{
  from{ transform:scale(.86) translate3d(0,0,0); opacity:.5 }
  to{ transform:scale(1.2) translate3d(7%,5%,0); opacity:1 }
}
@keyframes inkB{
  from{ transform:scale(1.16) translate3d(0,0,0); opacity:.95 }
  to{ transform:scale(.86) translate3d(-8%,-6%,0); opacity:.45 }
}

.amb__beam{
  position:absolute; top:-42%; left:0; width:44%; height:184%; pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,232,186,.018) 20%,rgba(255,232,186,.075) 48%,rgba(255,232,186,.018) 76%,transparent 100%);
  transform:rotate(11deg) translate3d(-170%,0,0);
  animation:beam 24s ease-in-out infinite;
}
@keyframes beam{
  0%,5%{ transform:rotate(11deg) translate3d(-170%,0,0) }
  95%,100%{ transform:rotate(11deg) translate3d(370%,0,0) }
}

.amb__motes{ position:absolute; inset:0; pointer-events:none; }
.amb__motes i{
  position:absolute; left:var(--x,50%); top:var(--y,80%);
  width:3px; height:3px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,rgba(244,228,190,.95),rgba(244,228,190,0) 68%);
  animation:mote var(--dur,22s) linear var(--del,0s) infinite;
}
@keyframes mote{
  0%{ opacity:0; transform:translate3d(0,0,0) scale(var(--s,1)) }
  12%{ opacity:.7 }
  62%{ opacity:.4 }
  100%{ opacity:0; transform:translate3d(var(--dx,0px),-170px,0) scale(var(--s,1)) }
}

/* Rien ne tourne hors champ. */
.amb__ink, .amb__beam, .amb__motes i{ animation-play-state:paused; }
.sec.is-live .amb__ink,
.sec.is-live .amb__beam,
.sec.is-live .amb__motes i{ animation-play-state:running; }

/* L'ornement se trace comme un tracé de tatouage, puis se repose. */
.orn--draw{ stroke-dasharray:230; stroke-dashoffset:230; }
.sec.is-live .orn.orn--draw{
  animation:ornFloat 30s ease-in-out infinite alternate, ornDraw 5.5s var(--e-out) .5s forwards;
}
@keyframes ornDraw{ to{ stroke-dashoffset:0 } }
.sec.is-live .orn.orn--spin{ animation:ornSpin 96s linear infinite; }
@keyframes ornSpin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  .amb__ink, .amb__beam, .amb__motes, .orn--draw, .orn--spin{ animation:none !important; }
  .amb__motes{ display:none; }
  .orn--draw{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* =========================================================
   AMBIANCE RENFORCEE — section Estimer
   Les panneaux du simulateur couvrent l'ecran : le fond doit
   bouger plus large et plus franc pour rester perceptible.
   ========================================================= */
.amb--riche .amb__img{
  opacity:.34;
  animation:ambRespire 32s ease-in-out infinite alternate;
}
@keyframes ambRespire{
  from{ transform:scale(1.04) translate3d(0,0,0) }
  to{ transform:scale(1.22) translate3d(-3%,-2.4%,0) }
}
.amb__beam--2{
  left:auto; right:0; width:36%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,222,172,.025) 20%,rgba(255,222,172,.10) 50%,rgba(255,222,172,.025) 80%,transparent 100%);
  transform:rotate(-14deg) translate3d(200%,0,0);
  animation:beam2 27s ease-in-out infinite;
}
@keyframes beam2{
  0%,4%{ transform:rotate(-14deg) translate3d(200%,0,0) }
  96%,100%{ transform:rotate(-14deg) translate3d(-280%,0,0) }
}

/* Goutte d'encre dans l'eau : trois ondes qui s'ouvrent en boucle. */
.amb__ripple{ position:absolute; left:50%; top:42%; width:0; height:0; pointer-events:none; }
.amb__ripple i{
  position:absolute; left:0; top:0;
  width:min(66vw,460px); height:min(66vw,460px);
  border-radius:50%; border:1px solid rgba(198,161,91,.42);
  transform:translate(-50%,-50%) scale(.12); opacity:0;
  animation:ripple 10s ease-out infinite;
}
.amb__ripple i:nth-child(2){ animation-delay:-3.4s; border-color:rgba(198,161,91,.30); }
.amb__ripple i:nth-child(3){ animation-delay:-6.8s; border-color:rgba(232,206,151,.24); }
@keyframes ripple{
  0%{ transform:translate(-50%,-50%) scale(.10); opacity:0 }
  9%{ opacity:.6 }
  60%{ opacity:.22 }
  100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0 }
}

.amb--riche .amb__motes i{ width:4px; height:4px; }
.orn--pale{ opacity:0; }
.sec.is-live .orn.orn--pale{ opacity:.055; animation:ornSpin 110s linear infinite; }

/* Le halo de la carte de resultat respire, et une lumiere la traverse. */
.estim.is-live .est__out::before{ animation:outGlow 8s ease-in-out infinite alternate; }
@keyframes outGlow{ from{ opacity:.5 } to{ opacity:1 } }

.amb__beam--2, .amb__ripple i, .amb--riche .amb__img{ animation-play-state:paused; }
.sec.is-live .amb__beam--2,
.sec.is-live .amb__ripple i,
.sec.is-live.amb--riche .amb__img,
.sec.is-live .amb--riche .amb__img{ animation-play-state:running; }

@media (prefers-reduced-motion:reduce){
  .amb--riche .amb__img, .amb__beam--2, .amb__ripple, .est__out::before, .est__out::after{ animation:none !important; }
  .amb__ripple{ display:none; }
}

/* =========================================================
   BRAISES — nuée de particules chaudes sur tout le fond
   Elles montent en dérivant, avec une trajectoire en S et une
   luminosité propre à chacune. C'est la seule animation large
   de la section Estimer : plus de faisceau qui balaie.
   ========================================================= */
.amb--riche .amb__motes i{
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,241,208,1) 0%,rgba(251,208,124,.96) 24%,rgba(224,158,66,.42) 50%,rgba(200,140,55,0) 76%);
  box-shadow:0 0 15px 2px rgba(255,196,110,.32);
  animation-name:braise;
  animation-timing-function:cubic-bezier(.36,.05,.55,.98);
}
@keyframes braise{
  0%{ transform:translate3d(0,0,0) scale(var(--s,1)); opacity:0 }
  8%{ opacity:var(--o,.75) }
  38%{ transform:translate3d(var(--dx,0px),calc(var(--rise,420px) * -.34),0) scale(var(--s,1)) }
  72%{ transform:translate3d(var(--dx2,0px),calc(var(--rise,420px) * -.72),0) scale(var(--s,1)); opacity:calc(var(--o,.75) * .7) }
  100%{ transform:translate3d(0,calc(var(--rise,420px) * -1),0) scale(var(--s,1)); opacity:0 }
}