/* Studio MA — studioma.club | © Studio MA. Développé par Maven Sàrl (https://www.maven.ch) */
:root{
 --e:cubic-bezier(.16,1,.3,1);
 /* ——— 4 couleurs de base ——— */
 --bg:#0e0c0c;       /* fond principal (noir chaud) */
 --surface:#16110f;  /* surfaces chaudes sombres */
 --paper:#efe9e1;    /* crème — texte clair & aplats clairs */
 --red:#e2382a;      /* accent unique */
 /* ——— dérivés ——— */
 --red-hi:#ff5a4d;             /* survol du rouge */
 --text:#c9c2ba;               /* corps sur fond sombre */
 --text-soft:#a9a29a;          /* corps atténué */
 --text-dim:#8a827b;           /* discret / notes */
 --line:rgba(239,233,225,.4);  /* filets clairs */
 --line-soft:rgba(239,233,225,.12);
}
*{margin:0;padding:0;box-sizing:border-box}

/* ——— Equilibrage des lignes ———
   balance : repartit les lignes a egalite. Ideal pour les titres, mais les
   navigateurs le limitent a ~6 lignes — au-dela il est ignore, d'ou pretty
   sur les paragraphes (qui evite surtout les mots orphelins en fin de bloc).
   Les deux degradent proprement sur les navigateurs qui ne les connaissent pas. */
.ir-t,.ir-card-t,.of-t,.offer-title,.wl-t,.ouv-t,.sent-t,
.st-t,.ms-t,.comm-handle,.foot-tag,.menu-link{text-wrap:balance}

.ir-b,.ir-card-p,.of-b,.offer-desc,.wl-b,.ouv-b,.sent-b,.st-b1,.st-b2,.st-b3,
.ms-b1,.ms-b2,.comm-b,.foot-p,.form-note,.of-note,.all-k{text-wrap:pretty}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red-hi)}
img{display:block;max-width:100%}
input{font-family:inherit}

@keyframes ma-pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes ma-cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(10px);opacity:1}}
@keyframes ma-grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}}

/* root */
.ma-root{position:relative;background:var(--bg);color:var(--paper);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:300;overflow-x:hidden}

/* cursor + grain + progress */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:9996;pointer-events:none;opacity:.05;mix-blend-mode:overlay;animation:ma-grain 7s steps(4) infinite}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:rgba(255,255,255,.05)}
.progress-bar{height:100%;width:0%;background:var(--red)}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(30px)}
[data-reveal]{transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.12s}.d4{transition-delay:.16s}.d5{transition-delay:.18s}.d6{transition-delay:.2s}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;transition:background .5s ease,padding .5s ease,border-color .5s ease;border-bottom:1px solid transparent}
.nav-inner{width:100%;max-width:1420px;margin:0 auto;padding:0 clamp(20px,5vw,60px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:33px;width:auto;transition:height .5s ease}
.nav-desktop{display:flex;align-items:center;gap:clamp(12px,2vw,30px);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav-link{opacity:.8}
.js [data-navlink]{display:none!important}
.nav-pill{border:1px solid rgba(239,233,225,.4);color:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:100px;transition:border-color .3s}
.nav-pill:hover{border-color:var(--red)}
.nav-underline{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(239,233,225,.35);padding-bottom:3px;transition:border-color .3s}
.nav-underline:hover{border-color:var(--red)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;padding:0}
.burger span{display:block;width:23px;height:1.5px;background:var(--paper)}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:140;background:rgba(14,12,12,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(24px,7vw,48px);opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .4s ease,transform .4s ease}
.menu-close{position:absolute;top:22px;right:clamp(20px,5vw,60px);width:44px;height:44px;background:none;border:none;color:var(--paper);font-size:26px}
.menu-link{font-family:'presti-display',serif;font-weight:300;font-size:clamp(30px,9vw,42px);color:var(--paper);padding:14px 0;border-bottom:1px solid rgba(239,233,225,.12)}
.menu-link.accent{color:var(--paper)}
.menu-lang{align-self:flex-start;margin-top:30px;border:1px solid rgba(239,233,225,.4);color:var(--paper);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:11px 20px;border-radius:100px}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-bg.on{opacity:1}
.hero-bg img{position:absolute;inset:-7% -3%;width:106%;height:114%;object-fit:cover;object-position:center}
.hero-bg img.p1{object-position:60% center}
.hero-bg img.p2{object-position:center 82%}
.hero-bg img.p3{object-position:center 74%}
.hero-tint{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity 1.4s ease}
.hero-tint.on{opacity:1}
/* Teintes du hero — halo greige chaud, identique sur les slides 1 et 2.
   Teinte 35deg / saturation 9% : hors de la zone rosee (0-20deg satures),
   assez clair pour rester un vrai halo lumineux par-dessus .hero-legib. */
.tint1{background:radial-gradient(78% 66% at 72% 36%,rgba(214,206,196,.40),transparent 62%)}
.tint2{background:radial-gradient(78% 66% at 72% 36%,rgba(214,206,196,.40),transparent 62%),linear-gradient(180deg,rgba(14,12,12,.3),transparent 40%)}
.tint3{background:radial-gradient(70% 60% at 58% 42%,rgba(214,206,196,.30),transparent 62%)}
.hero-legib{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,rgba(14,12,12,.5) 0%,rgba(14,12,12,.05) 30%,rgba(14,12,12,.3) 58%,rgba(14,12,12,.94) 100%)}
.hero-top{position:absolute;top:clamp(60px,8vh,78px);left:0;right:0;z-index:6}
.hero-top-inner{max-width:1420px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
.disc{font-size:13px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);opacity:.9}
.hero-content{position:relative;z-index:6;width:100%;max-width:1420px;margin:0 auto;padding:0 clamp(20px,5vw,60px) clamp(40px,6vh,72px)}
/* Trois mots-cles toujours presents sur la largeur : semi-transparents, le mot
   de la slide active s'allume (fondu + nettete + couleur de scene). */
.hero-words{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(12px,2.5vw,40px)}
/* Activation par voile-relais (background-clip:text, la type ne bouge jamais).
   Toute l'opacite vit DANS le gradient — rampe douce .22 → .45 → .8 → couleur
   pleine — le mot n'a aucune animation d'opacite propre, donc pas de flash.
   Transitions seules : le voile entre (100%→50%), tient, puis poursuit sa course
   en sortant (.off, 50%→0%) pendant que le mot suivant s'allume — le temoin se
   transmet. app.js retire .off sans transition une fois le creme revenu
   (0% et 100% du gradient rendent le meme creme). */
.hw{font-family:'presti-display',Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1;font-size:clamp(22px,8.8vw,136px);color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg,rgba(239,233,225,.22) 23%,rgba(247,243,238,.45) 28.5%,rgba(255,255,255,.8) 33.5%,var(--hw-c,#fff) 37%,var(--hw-c,#fff) 63%,rgba(255,255,255,.8) 66.5%,rgba(247,243,238,.45) 71.5%,rgba(239,233,225,.22) 77%);background-size:400% 100%;background-position:100% 0;background-repeat:no-repeat;cursor:pointer;transform-origin:50% 50%;transition:background-position 1.25s var(--e),transform 1.25s var(--e)}
/* le scale est purement visuel (transform ne participe pas au layout) :
   les voisins ne bougent jamais — chaque mot grandit depuis son centre. */
.hw.on{background-position:50% 0;transform:scale(1.15)}
.hw.off{background-position:0% 0}
.hw-dot{font-family:'presti-display',Georgia,serif;font-weight:400;line-height:1;font-size:clamp(14px,4.6vw,72px);color:var(--paper);opacity:.28;align-self:center}
.hero-sub{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(14px,1.4vw,18px);font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);opacity:.9}
.hero-sub .hs-b{font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:clamp(26px,4vh,42px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.cta-primary{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:var(--surface);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:15px 25px;border-radius:2px;transition:transform .3s,background .3s}
.cta-primary:hover{transform:translateY(-3px);background:var(--red-hi);color:var(--surface)}
.cta-arrow{font-size:15px}
.btn-ghost{display:inline-flex;align-items:center;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:15px 22px;border:1px solid rgba(239,233,225,.4);border-radius:2px;transition:border-color .3s,color .3s,transform .3s}
.btn-ghost:hover{border-color:var(--paper);color:var(--paper);transform:translateY(-3px)}
.bars{display:flex;gap:9px;align-items:center;margin-left:auto}
.bar{width:44px;height:3px;background:rgba(239,233,225,.22);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:var(--paper)}
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,4vh,52px);z-index:6}
.scrollcue span{display:block;font-size:24px;color:var(--paper);animation:ma-cue 2s ease-in-out infinite}

/* ——— MA · 間 — le sens du nom ———
   Fond : deux halos flous qui derivent tres lentement (transform seul, GPU).
   Entree : la classe .in est posee par app.js quand la section entre a l'ecran,
   elle declenche la choregraphie (glyphe → filet → textes en cascade). */
.masense{position:relative;overflow:hidden;background:var(--bg);padding:clamp(100px,16vh,200px) clamp(20px,5vw,60px)}
.ms-bg{position:absolute;inset:0;pointer-events:none}
.ms-blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.ms-blob.b1{width:min(76vw,1020px);height:min(76vw,1020px);left:-20%;top:-28%;background:radial-gradient(circle,rgba(226,56,42,.18),transparent 65%);animation:ma-drift-a 19s ease-in-out infinite alternate}
.ms-blob.b2{width:min(64vw,880px);height:min(64vw,880px);right:-18%;bottom:-30%;background:radial-gradient(circle,rgba(214,206,196,.14),transparent 65%);animation:ma-drift-b 24s ease-in-out infinite alternate}
.ms-blob.b3{width:min(52vw,700px);height:min(52vw,700px);left:30%;top:18%;background:radial-gradient(circle,rgba(226,56,42,.09),transparent 65%);animation:ma-drift-c 28s ease-in-out infinite alternate}
@keyframes ma-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(34vw,26vh,0) scale(1.25)}}
@keyframes ma-drift-b{from{transform:translate3d(0,0,0) scale(1.2)}to{transform:translate3d(-30vw,-24vh,0) scale(.9)}}
@keyframes ma-drift-c{from{transform:translate3d(-12vw,10vh,0) scale(.95)}to{transform:translate3d(14vw,-12vh,0) scale(1.2)}}
@keyframes ma-glyph-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ms-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(40px,6.5vw,100px)}
.ms-glyphcol{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.ms-glyphbox{display:block;animation:ma-glyph-float 11s ease-in-out infinite}
/* gothic (sans) fin — l'equivalent japonais de Hanken Grotesk */
.ms-glyph{display:block;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;font-weight:200;font-size:clamp(140px,20vw,270px);line-height:1;color:var(--paper);opacity:.94}
.ms-phon{margin-top:clamp(16px,2.5vh,26px);font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--text-soft)}
.ms-sep{align-self:stretch;width:1px;background:linear-gradient(180deg,transparent,rgba(239,233,225,.22) 30%,rgba(239,233,225,.22) 70%,transparent);transform-origin:center top}
.ms-text{max-width:34rem}
.ms-k{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ms-t{font-family:'presti-display',serif;font-weight:300;line-height:1.05;letter-spacing:-.005em;font-size:clamp(32px,4.6vw,62px)}
.ms-b1{margin-top:26px;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.8;color:var(--text)}
.ms-b2{margin-top:18px;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.8;color:var(--text-dim)}
.ms-w{font-weight:600;color:var(--paper)}
/* etats initiaux (JS actif uniquement — sans JS tout reste visible) */
.js .masense .ms-glyph{opacity:0;transform:scale(1.1) translateY(16px);filter:blur(18px);transition:opacity 1.7s var(--e) .1s,transform 1.7s var(--e) .1s,filter 1.7s var(--e) .1s}
.js .masense .ms-phon{opacity:0;transform:translateY(12px);transition:opacity .9s var(--e) 1s,transform .9s var(--e) 1s}
.js .masense .ms-sep{transform:scaleY(0);transition:transform 1.5s var(--e) .5s}
.js .masense .ms-k{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e) .45s,transform .9s var(--e) .45s}
.js .masense .ms-t{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity 1.1s var(--e) .6s,transform 1.1s var(--e) .6s,filter 1.1s var(--e) .6s}
.js .masense .ms-b1{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e) .85s,transform 1s var(--e) .85s}
.js .masense .ms-b2{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e) 1.05s,transform 1s var(--e) 1.05s}
.masense.in .ms-glyph{opacity:.94;transform:none;filter:blur(0)}
.masense.in .ms-sep{transform:scaleY(1)}
.masense.in .ms-phon,.masense.in .ms-k,.masense.in .ms-t,.masense.in .ms-b1,.masense.in .ms-b2{opacity:1;transform:none;filter:none}
@media(max-width:860px){
  .ms-inner{flex-direction:column;text-align:center}
  .ms-sep{display:none}
  .ms-b1,.ms-b2{margin-left:auto;margin-right:auto}
}

/* shared bg (infrared+offres) */
.shared{position:relative;background:var(--surface)}
.shared-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shared-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.shared-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,12,.6) 0%,rgba(20,15,13,.3) 24%,rgba(20,15,13,.56) 46%,rgba(22,17,15,.9) 66%,var(--surface) 86%)}
.shared-glow{position:absolute;top:0;left:0;right:0;height:62%;background:radial-gradient(58% 44% at 28% 24%,rgba(226,56,42,.22),transparent 62%)}
.ir-blur{position:absolute;inset:0;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);-webkit-mask:linear-gradient(180deg,#000 0%,#000 20%,transparent 52%);mask:linear-gradient(180deg,#000 0%,#000 20%,transparent 52%)}
.ir-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 28%,transparent 58%)}
.sb-blur-b{position:absolute;inset:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask:linear-gradient(0deg,#000 0%,#000 50%,transparent 75%);mask:linear-gradient(0deg,#000 0%,#000 50%,transparent 75%)}
.sb-veil-b{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.42) 50%,transparent 75%)}

/* infrared */
.infrared{position:relative;z-index:1;min-height:88vh;display:flex;align-items:center;padding:clamp(96px,13vh,160px) clamp(20px,5vw,60px) clamp(30px,5vh,70px)}
.wrap{width:100%;max-width:1300px;margin:0 auto}
.ir-head{max-width:820px}
.ir-k{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ir-t{font-family:'presti-display',serif;font-weight:300;line-height:1.03;letter-spacing:-.005em;font-size:clamp(34px,5.4vw,80px)}
.ir-b{margin-top:26px;max-width:52ch;font-size:clamp(16.5px,1.15vw,19px);line-height:1.75;color:var(--text)}
/* 6 cartes : 3x2 en grand ecran, 2x3 en tablette, 1 colonne en mobile */
.ir-cards{margin-top:clamp(46px,7vh,84px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) clamp(24px,2.5vw,36px)}
@media(max-width:900px){.ir-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ir-cards{grid-template-columns:1fr}}
/* Cartes allegees : plus de conteneur, le mot-cle porte seul.
   Un filet rouge remplace la bordure — l'oeil suit la sequence. */
.ir-card{background:none;border:none;border-top:1px solid var(--red);border-radius:0;padding:18px 0 0;backdrop-filter:none;-webkit-backdrop-filter:none}
.num{font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;line-height:1;-webkit-text-stroke:0;color:var(--red)}
.ir-card-t{margin-top:12px;font-family:'presti-display',serif;font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1.05;letter-spacing:-.01em;color:var(--paper)}
.ir-card-p{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--text-soft)}

/* offres */
.offres{position:relative;z-index:1;background:transparent;color:var(--paper);padding:clamp(96px,23vh,300px) clamp(20px,5vw,60px) clamp(88px,13vh,160px)}
.of-halo{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:min(920px,92%);height:560px;pointer-events:none;z-index:0;background:radial-gradient(58% 55% at 50% 38%,rgba(239,233,225,.12),rgba(226,56,42,.07) 42%,transparent 72%);filter:blur(34px)}
.offres > .wrap{position:relative;z-index:1}
.of-head{text-align:center;max-width:720px;margin:0 auto 20px}
.of-tagrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.of-line{width:24px;height:1px;background:var(--red)}
.of-k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--text)}
.of-t{font-family:'presti-display',serif;font-weight:300;line-height:1.03;font-size:clamp(30px,4.6vw,64px)}
.of-b{margin-top:20px;font-size:clamp(16px,1.1vw,18px);line-height:1.7;color:var(--text)}
.of-dl{display:inline-flex;align-items:center;margin-top:24px;border:1px solid rgba(226,56,42,.5);border-radius:100px;padding:8px 17px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.offers-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:48px;align-items:stretch}
.offer{flex:1 1 300px;min-width:270px;display:flex;flex-direction:column;background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(239,233,225,.14);border-radius:6px;padding:32px 28px;transition:transform .4s var(--e),border-color .4s,opacity 1.1s var(--e)}
.offer:hover{transform:translateY(-8px);border-color:rgba(226,56,42,.55)}
.offer-feat{flex:1 1 300px;min-width:270px;display:flex;flex-direction:column;position:relative;background:linear-gradient(180deg,rgba(48,17,13,.92),rgba(26,15,12,.9));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(226,56,42,.5);border-radius:6px;padding:32px 28px;transition:transform .4s var(--e),box-shadow .4s,opacity 1.1s var(--e)}
.offer-feat:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(226,56,42,.28)}
.offer-feat .offer-disc{color:var(--text)}
.offer-feat .save{color:var(--red)}
.offer-badge{position:absolute;top:-11px;left:28px;background:var(--red);color:var(--bg);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.offer-disc{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
.offer-title{font-family:'presti-display',serif;font-weight:400;font-size:25px;margin-top:12px;line-height:1.1}
.offer-desc{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--text-soft);flex:1}
.offer-desc.feat{color:var(--text-soft)}
.price-row{display:flex;align-items:baseline;gap:11px;margin-top:24px}
.price-row.feat{gap:9px}
.price{font-family:'presti-display',serif;font-size:44px;font-weight:600}
.price-old{font-size:23px;color:var(--text-dim);text-decoration:line-through}
.price-from{font-size:15px;color:var(--paper)}
.save{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:8px}
.tax{font-size:11px;color:var(--text-dim);margin-top:4px}
.tax.feat{color:var(--text-dim)}
.offer-btn{margin-top:24px;text-align:center;border:1px solid rgba(239,233,225,.35);border-radius:2px;padding:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.offer-btn:hover{background:var(--paper);color:var(--surface);border-color:var(--paper)}
.btn-red-offer{margin-top:24px;text-align:center;background:var(--red);color:var(--bg);border-radius:2px;padding:14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
.btn-red-offer:hover{background:var(--red-hi);color:var(--bg)}
.of-note{margin-top:28px;text-align:center;font-size:14.5px;color:var(--text-dim)}
.wl{max-width:660px;margin:clamp(44px,7vh,72px) auto 0;text-align:center;position:relative;z-index:1}
.wl .of-tagrow{margin-bottom:18px;justify-content:center}
.wl-t{font-family:'presti-display',serif;font-weight:300;line-height:1.05;font-size:clamp(28px,4vw,52px);margin-top:6px}
.wl-b{margin:18px auto 0;max-width:52ch;font-size:clamp(16px,1.1vw,18px);line-height:1.7;color:var(--text)}
.wl-card{margin-top:28px}
.wl-fields{display:flex;gap:12px}
.wl-fields .field{flex:1}
.wl-btn{width:100%;margin-top:12px;justify-content:center;background:var(--red);color:var(--surface);transition:transform .3s,background .3s,color .3s}
.wl-btn:hover{transform:translateY(-3px);background:var(--red-hi);color:var(--surface)}
.wl .form-note{margin-top:8px;text-align:center}
.wl-note{margin-top:2rem!important;text-align:center}
@media(max-width:560px){.wl-fields{flex-direction:column}}

/* ——— Widget newsletter bsport ———
   Classes reelles du widget (bs-*). On surcharge d'abord les variables CSS
   que bsport expose, puis on ajuste la mise en page. */
/* le div porte A LA FOIS l'id #bs-setup-derived-variable et la classe
   .bs-setup-variable : on le cible sur lui-meme, pas sur un descendant. */
[id^="bsport-widget-"] #bs-setup-derived-variable{
  --color-background-paper:transparent!important;
  --color-background:transparent!important;
  --color-secondary-background-paper:transparent!important;
  --border-color:rgba(239,233,225,.22)!important;
  --color-grey-dark:var(--paper)!important;
  --color-grey-main:var(--paper)!important;
  --color-primary-main:var(--red)!important;
  --color-primary-dark:var(--red-hi)!important;
  --color-primary-contrastText:#16110f!important;
  --border-radius-1:2px!important;
  --fontFamily:'Hanken Grotesk'!important;
}
/* Aucun cadre ni fond autour du formulaire : le widget flotte sur le degrade
   de la section. .cleanslate et les jssNN sont au-dessus de
   #bs-setup-derived-variable, ils se ciblent donc depuis le conteneur. */
[id^="bsport-widget-"] .cleanslate,
[id^="bsport-widget-"] [class^="jss"],
[id^="bsport-widget-"] #bs-setup-derived-variable,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__container,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
[id^="bsport-widget-"] #bs-setup-derived-variable *{font-family:'Hanken Grotesk',system-ui,sans-serif!important}

/* le form : sans cadre, et il espace lui-meme ses blocs (le bouton n'a donc
   pas de margin propre) */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:12px!important}

/* les 3 champs sur une ligne : la rangee prenom/nom et l'email cote a cote */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form-fields{display:flex!important;flex-flow:row nowrap!important;gap:12px!important;align-items:flex-start!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form__name-fields{display:contents!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__wrapper{flex:1 1 0!important;min-width:0!important;width:auto!important}

/* libelles masques — les placeholders suffisent */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__label,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form__field-label,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__container > label{display:none!important}

/* champ : filet fin creme, focus rouge — comme .field */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input__container,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input__container--small,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form__field-input-container{background:transparent!important;background-color:transparent!important;background-image:none!important;border:1px solid rgba(239,233,225,.22)!important;border-radius:2px!important;padding:0!important;box-shadow:none!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input__container:focus-within{border-color:var(--red)!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input__text{margin:0!important;width:100%!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-input-base,
[id^="bsport-widget-"] #bs-setup-derived-variable input[type=text],
[id^="bsport-widget-"] #bs-setup-derived-variable input[type=email]{width:100%!important;box-sizing:border-box!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;outline:none!important;padding:13px 14px!important;color:var(--paper)!important;font-size:15px!important;line-height:1.3!important;text-align:left!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input::placeholder{color:#8a827b!important;opacity:1!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-textfield__input:-webkit-autofill{-webkit-text-fill-color:var(--paper)!important;-webkit-box-shadow:0 0 0 1000px #16110f inset!important}

/* bouton rouge pleine largeur — comme .btn-form */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form__submit{display:block!important;width:100%!important;margin:0!important;background:var(--red)!important;color:#16110f!important;border:none!important;border-radius:2px!important;padding:15px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;cursor:pointer!important;transition:background .3s!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form__submit:hover{background:var(--red-hi)!important}
/* icones et badge internes du bouton */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-button-root__left-icon,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-button-root__right-icon,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-button-root__badge{display:none!important}

/* signature « Powered by » + logo.
   Les classes jssNN sont generees a chaque build bsport (le numero change) :
   on cible donc aussi le lien vers pro.bsport.io, qui lui est stable. */
/* le bloc « Powered by » est un frere du formulaire, hors de
   #bs-setup-derived-variable : il se cible depuis le conteneur. */
[id^="bsport-widget-"] .jss17,
[id^="bsport-widget-"] .jss31,
[id^="bsport-widget-"] a[href*="pro.bsport.io"],
[id^="bsport-widget-"] img[alt="bsport"],
[id^="bsport-widget-"] .MuiTypography-root,
[id^="bsport-widget-"] div:has(> div > a[href*="pro.bsport.io"]){display:none!important}

/* ——— Ecran de confirmation ———
   bsport n'affiche qu'une icone (showSuccessTitle/Text a false). On la
   recentre, on la passe en creme, et on ajoute les textes sentT/sentB via
   ::after — les chaines viennent de lang.php par --ma-sent-t / --ma-sent-b
   (injectees dans le :root par template.php). Aucun JS. */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__success__root{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:0!important;padding:26px 6px 6px!important;background:transparent!important;border:none!important}

/* pastille : cercle fin rouge, coche creme — reprend l'ancien .sent-check */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-big-icon__root{order:1;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:52px!important;height:52px!important;margin:0 auto!important;padding:0!important;border:1px solid var(--red)!important;border-radius:50%!important;background:transparent!important;color:var(--paper)!important}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-fabrique-big-icon__root svg{width:24px!important;height:24px!important;stroke:var(--paper)!important;color:var(--paper)!important;fill:none!important}

/* titre (Presti Display, blanc) puis texte (plus petit, gris clair) */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__success__root::before{content:var(--ma-sent-t);display:block;order:2;margin:18px auto 0;color:#fff!important;font-family:'presti-display',serif;font-weight:400;font-size:26px;line-height:1.15;letter-spacing:0}
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__success__root::after{content:var(--ma-sent-b);display:block;order:3;max-width:34ch;margin:12px auto 0;color:#e6e0d8!important;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.6}

/* si bsport affiche ses propres textes (showSuccessTitle/Text a true) */
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-typography-body-md,
[id^="bsport-widget-"] #bs-setup-derived-variable .bs-typography-body-sm{color:#fff!important;text-align:center!important}

@media(max-width:560px){
  [id^="bsport-widget-"] #bs-setup-derived-variable .bs-newsletter-form__root__form-fields{flex-flow:column nowrap!important}
}

.all-cta{text-align:center;margin-top:clamp(34px,5vh,56px)}
.all-k{font-size:12px;color:var(--text-dim);margin-bottom:18px}
.all-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(239,233,225,.4);border-radius:2px;padding:16px 32px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.all-btn:hover{background:var(--paper);color:var(--surface);border-color:var(--paper)}

/* ouverture / newsletter */
.ouverture{position:relative;overflow:hidden}
.ouv-bg{position:absolute;inset:0;overflow:hidden;will-change:transform}
.ouv-bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.ouv-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,12,.88),rgba(14,12,12,.8))}
.ouv-inner{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:clamp(80px,12vh,150px) clamp(20px,5vw,60px);display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,80px)}
.ouv-col{flex:1 1 380px;min-width:290px}
.ouv-col.form-col{flex:1 1 360px;display:flex;align-items:center}
.ouv-logo{height:34px;width:auto;margin-bottom:30px}
.ouv-k{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.ouv-t{font-family:'presti-display',serif;font-weight:300;line-height:1.03;font-size:clamp(32px,5vw,72px)}
.ouv-b{margin-top:24px;max-width:46ch;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.75;color:var(--text)}
.formcard{width:100%;background:rgba(20,16,15,.55);backdrop-filter:blur(10px);border:1px solid rgba(239,233,225,.16);border-radius:6px;padding:clamp(26px,3vw,38px)}
.sent{text-align:center;padding:18px 6px}
.sent-check{width:50px;height:50px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--red);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:20px}
.sent-t{font-family:'presti-display',serif;font-weight:400;font-size:26px;line-height:1.1}
.sent-b{margin-top:12px;font-size:16px;line-height:1.65;color:var(--text);max-width:32ch;margin-left:auto;margin-right:auto}
.form{display:flex;flex-direction:column;gap:15px}
.label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft);margin-bottom:7px}
.field{width:100%;background:transparent;border:1px solid rgba(239,233,225,.22);border-radius:2px;padding:13px 14px;color:var(--paper);font-size:15px;outline:none;transition:border-color .3s}
.field:focus{border-color:var(--red)}
.btn-form{margin-top:4px;background:var(--red);color:var(--surface);border:none;border-radius:2px;padding:15px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .3s}
.btn-form:hover{background:var(--red-hi)}
.form-note{font-size:13px;line-height:1.5;color:var(--text-dim)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-err{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--red);background:rgba(226,56,42,.1);border:1px solid rgba(226,56,42,.4);border-radius:2px;padding:9px 12px}
.field.err{border-color:var(--red)}

/* studio / concept */
.studio{position:relative;background:var(--surface);color:var(--paper);overflow:hidden;min-height:92vh;display:flex;align-items:center}
.gal{position:absolute;top:0;right:0;bottom:0;width:56%;overflow:hidden}
.gal-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.gal-slide.on{opacity:1}
.gal-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.galmask{position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,rgba(22,17,15,.72) 22%,rgba(22,17,15,.16) 52%,transparent 74%)}
.gal-vign{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,17,15,.4),transparent 22%,transparent 78%,rgba(22,17,15,.5))}
.gal-arrows{position:absolute;z-index:3;bottom:clamp(20px,4vh,40px);right:clamp(20px,4vw,40px);display:flex;gap:12px}
.gal-arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(239,233,225,.5);background:rgba(14,12,12,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--paper);font-family:inherit;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s}
.gal-arrow:hover{background:var(--paper);color:var(--surface);border-color:var(--paper)}
.studiotext{position:relative;z-index:2;width:100%;max-width:1300px;margin:0 auto;padding:clamp(80px,12vh,150px) clamp(20px,5vw,60px)}
.st-inner{max-width:33rem}
.st-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.st-line{width:26px;height:1px;background:var(--red)}
.st-k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.st-t{font-family:'presti-display',serif;font-weight:300;line-height:1.04;letter-spacing:-.005em;font-size:clamp(30px,4.4vw,60px)}
.st-b1{margin-top:26px;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.8;color:var(--text)}
.st-b2{margin-top:18px;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.8;color:var(--text)}
.st-b3{margin-top:18px;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.8;color:var(--text-dim)}

/* community / instagram */
.community{position:relative;overflow:hidden;background:var(--surface)}
.comm-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.comm-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.comm-grad1{position:absolute;inset:0;background:linear-gradient(180deg,var(--surface) 0%,rgba(22,17,15,.5) 32%,rgba(22,17,15,.55) 62%,var(--surface) 100%)}
.comm-grad2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,17,15,.9),rgba(22,17,15,.25) 68%,transparent)}
.comm-link{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px;max-width:1300px;margin:0 auto;padding:clamp(96px,17vh,220px) clamp(20px,5vw,60px);color:var(--paper)}
.comm-k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--text);margin-bottom:18px}
.comm-row{display:flex;align-items:center;gap:16px}
.comm-icon{width:clamp(32px,4vw,48px);height:auto;flex-shrink:0}
.comm-handle{font-family:'presti-display',serif;font-weight:600;font-size:clamp(34px,6vw,72px);line-height:1}
.comm-b{margin-top:18px;font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;color:var(--text);max-width:46ch}
.ig-cta{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;border:1px solid rgba(239,233,225,.45);border-radius:100px;padding:16px 26px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.ig-cta:hover{background:var(--paper);color:var(--surface);border-color:var(--paper)}

/* footer */
.footer{background:var(--surface);padding:clamp(96px,14vh,180px) clamp(20px,5vw,60px) clamp(56px,8vh,90px)}
.foot-inner{max-width:1300px;margin:0 auto}
.foot-tag{font-family:'presti-display',serif;font-weight:300;font-size:clamp(30px,4.4vw,60px);line-height:1.12;letter-spacing:-.005em;color:#b7a99d}
.foot-tag .accent{color:#fff}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px;margin-top:clamp(60px,9vh,104px);padding-top:38px;border-top:1px solid rgba(239,233,225,.12)}
.foot-col{flex:1 1 220px;min-width:200px}
.foot-h{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px}
.foot-p{font-size:16px;line-height:1.9;color:var(--text)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(239,233,225,.08);font-size:11.5px;color:var(--text-dim)}
.maven-sig{display:inline-flex;align-items:center;gap:11px;color:var(--text-dim);transition:color .3s}
.maven-sig:hover{color:var(--paper)}
.maven-txt{font-size:10px;line-height:1.25;letter-spacing:.05em;text-align:right;text-transform:none}
.maven-svg{height:23px;width:auto;fill:currentColor;flex-shrink:0}

/* responsive */
@media (hover:none),(max-width:820px){.grain{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}[data-reveal]{opacity:1!important;transform:none!important}}
@media (max-width:860px){
  .studio{display:block}
  .gal{position:relative;width:100%;height:52vh;top:auto;right:auto;bottom:auto}
  .galmask{background:linear-gradient(180deg,rgba(22,17,15,.1),transparent 24%,transparent 58%,var(--surface))}
  .studiotext{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(48px,9vh,96px)}
}
@media (max-width:600px){
  /* un mot par ligne, en plus grand — sans les points médians ;
     tous calés à gauche, le scale part donc de gauche-centre */
  .hero-words{flex-direction:column;align-items:flex-start;gap:8px}
  .hw{font-size:clamp(48px,19vw,86px);transform-origin:0 50%}
  .hw-dot{display:none}
  .hero-cta{width:100%}
  .hero-cta>a{flex:1 1 100%;justify-content:center}
  .bars{margin-left:0;justify-content:center;width:100%}
  .hero-content{padding-bottom:96px}
}
@media (max-width:760px){
  .nav-desktop{display:none}
  .burger{display:flex}
}
@media (max-width:950px),(max-height:640px){.scrollcue{display:none}}