/* =========================================================
   ROOM 112 — Landing page
   Charte : Noir #111111 · Blanc #FFFFFF · Rouge profond #9E1B1B
   ========================================================= */

:root{
  --noir:#111111;
  --noir-2:#0b0b0b;
  --noir-3:#1a1a1a;
  --ivoire:#F6F4F0;
  --ivoire-2:#EDEAE4;
  --blanc:#FFFFFF;
  --rouge:#9E1B1B;
  --rouge-vif:#C12626;
  --gris:#8a8a8a;

  /* une seule famille pour tout le site */
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);

  --pad:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--noir); color:var(--ivoire);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--rouge); color:#fff}

/* ---------- Typo utilitaires ---------- */
.h2{
  font-family:var(--serif); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(1.9rem, 4.2vw, 3.9rem); line-height:1.04; letter-spacing:-.035em;
  margin:.2em 0 0;
}
.h2 em{font-style:italic; font-weight:400; color:var(--rouge-vif)}
.lead{font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.75; color:color-mix(in srgb, currentColor 72%, transparent); max-width:60ch; margin:1.2em 0 0}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gris); margin:0;
}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; padding:6px 12px; border:1px solid currentColor; border-radius:99px}
.tag--red{color:var(--rouge); border-color:currentColor}

/* ---------- Layout ---------- */
.wrap{width:min(1440px, 100%); margin-inline:auto; padding-inline:var(--pad)}
.sec{position:relative; padding:clamp(90px,11vw,180px) 0; z-index:2}
.sec--flush{padding-bottom:clamp(60px,7vw,110px)}
.sec--light{background:var(--ivoire); color:var(--noir)}
.sec--dark{background:var(--noir); color:var(--ivoire)}
.sec--light + .sec--light{padding-top:0}

.sechead{max-width:1100px}
.sechead--row{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,80px); align-items:end; max-width:none}
.sechead--row .lead{padding-bottom:.4em}
.sechead__num{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--rouge-vif); padding-bottom:14px; position:relative;
}
.sechead__num::after{content:""; position:absolute; left:calc(100% + 14px); bottom:22px; width:clamp(40px,6vw,120px); height:1px; background:currentColor; opacity:.5}

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--noir);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{opacity:0; visibility:hidden}
.loader__frame{position:relative; width:170px; height:170px; display:grid; place-items:center}
.loader__frame .br{position:absolute; width:34px; height:34px; border:2px solid var(--ivoire); opacity:0; animation:brIn .7s var(--ease) forwards}
.br--tl{top:0;left:0;border-right:0;border-bottom:0;transform:translate(14px,14px)}
.br--tr{top:0;right:0;border-left:0;border-bottom:0;transform:translate(-14px,14px);animation-delay:.08s}
.br--bl{bottom:0;left:0;border-right:0;border-top:0;transform:translate(14px,-14px);animation-delay:.16s}
.br--br{bottom:0;right:0;border-left:0;border-top:0;transform:translate(-14px,-14px);animation-delay:.24s}
@keyframes brIn{to{opacity:1; transform:translate(0,0)}}
.loader__count{font-family:var(--serif); font-weight:300; font-size:48px; letter-spacing:.04em; line-height:1; font-variant-numeric:tabular-nums}
.loader__meta{display:flex; gap:22px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--gris); text-transform:uppercase}
.loader__bar{width:min(320px,60vw); height:1px; background:#2a2a2a; overflow:hidden}
.loader__bar i{display:block; height:100%; width:0; background:var(--rouge-vif)}

/* =========================================================
   TEXTURES / CURSEUR / SCROLLBAR
   ========================================================= */
.grain{
  position:fixed; inset:-120%; z-index:900; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.vignette{position:fixed; inset:0; z-index:899; pointer-events:none; box-shadow:inset 0 0 22vw rgba(0,0,0,.45)}

.cursor{
  position:fixed; top:0; left:0; z-index:950; width:34px; height:34px; border:1px solid var(--ivoire);
  border-radius:99px; pointer-events:none; mix-blend-mode:difference; display:grid; place-items:center;
  transform:translate(-50%,-50%); transition:width .35s var(--ease), height .35s var(--ease), background .35s;
  opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-big{width:96px; height:96px; background:var(--ivoire)}
.cursor__label{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--noir); opacity:0; transition:opacity .25s; white-space:nowrap;
}
.cursor.is-big .cursor__label{opacity:1}
@media (hover:none){.cursor{display:none}}

.scrollbar{position:fixed; top:0; left:0; right:0; height:2px; z-index:860; background:transparent}
.scrollbar i{display:block; height:100%; width:0; background:var(--rouge-vif)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:880;
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
  padding:22px var(--pad); mix-blend-mode:normal;
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{padding:13px var(--pad); background:rgba(17,17,17,.78); backdrop-filter:blur(14px); border-color:rgba(255,255,255,.08)}
.nav.is-light{color:var(--noir)}
.nav.is-light.is-stuck{background:rgba(246,244,240,.82); border-color:rgba(17,17,17,.1)}
.nav.is-light .btn{background:var(--noir); border-color:var(--noir); color:var(--ivoire)}
.nav.is-light .btn::before{background:var(--rouge)}
.nav.is-light .btn:hover{border-color:var(--rouge); color:var(--blanc)}
.nav__logo{display:flex; align-items:center; gap:14px; margin-right:auto}
.mark{width:clamp(44px,3.6vw,56px); height:auto; transition:transform .6s var(--ease), width .5s var(--ease)}
.nav.is-stuck .nav__logo .mark{width:clamp(38px,2.8vw,44px)}
.mark__br,.mark__d{fill:currentColor}
.mark__red{fill:var(--rouge-vif)}
.nav__logo:hover .mark{transform:rotate(-90deg)}
.nav__word{font-family:var(--mono); font-size:13px; letter-spacing:.3em; font-weight:500}
.nav__links{display:flex; gap:clamp(14px,2vw,34px)}
.nav__links a{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding-bottom:4px; transition:color .35s}
.nav__links a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--rouge-vif); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.nav__links a:hover{color:var(--rouge-vif)}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}

/* boutons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border:1px solid currentColor; border-radius:99px; overflow:hidden;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--ivoire); color:var(--noir); border-color:var(--ivoire);
  transition:color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
  isolation:isolate;
}
.btn span{position:relative; z-index:2}
.btn::before{content:""; position:absolute; inset:0; background:var(--rouge); transform:translateY(101%); transition:transform .5s var(--ease); z-index:1}
.btn:hover{color:var(--blanc); border-color:var(--rouge)}
.btn:hover::before{transform:translateY(0)}
.btn--ghost{background:transparent; color:inherit; border-color:currentColor}
.btn--ghost:hover{color:var(--blanc)}
.btn--red{background:var(--rouge); border-color:var(--rouge); color:var(--blanc)}
.btn--red::before{background:var(--noir)}
.btn--red:hover{border-color:var(--noir)}
.btn--sm{padding:12px 22px; font-size:10px}

.burger{display:none; width:34px; height:24px; flex-direction:column; justify-content:center; gap:6px}
.burger i{display:block; height:1px; background:currentColor; transition:transform .4s var(--ease), opacity .3s}
.burger.is-open i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.is-open i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* menu plein écran mobile */
.menu{
  position:fixed; inset:0; z-index:870; background:var(--noir); color:var(--ivoire);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); pointer-events:none;
}
.menu.is-open{clip-path:inset(0 0 0 0); pointer-events:auto}
.menu__inner{display:flex; flex-direction:column; gap:6px}
.menu__inner a{
  font-family:var(--serif); font-weight:300; font-size:clamp(2rem,8vw,3.4rem); letter-spacing:-.035em; line-height:1.15; display:flex; align-items:baseline; gap:18px;
  opacity:0; transform:translateY(40px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__inner a{opacity:1; transform:none}
.menu.is-open .menu__inner a:nth-child(1){transition-delay:.15s}
.menu.is-open .menu__inner a:nth-child(2){transition-delay:.21s}
.menu.is-open .menu__inner a:nth-child(3){transition-delay:.27s}
.menu.is-open .menu__inner a:nth-child(4){transition-delay:.33s}
.menu.is-open .menu__inner a:nth-child(5){transition-delay:.39s}
.menu.is-open .menu__inner a:nth-child(6){transition-delay:.45s}
.menu__inner a em{font-family:var(--mono); font-size:11px; font-style:normal; color:var(--rouge-vif); letter-spacing:.2em}
.menu__inner a:hover{color:var(--rouge-vif)}
.menu__foot{position:absolute; bottom:40px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--gris)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--noir)}
.hero__bg{position:absolute; inset:0; overflow:hidden}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s var(--ease)}
.hero__video.is-on{opacity:.82}
.hero.has-video .hero__mark,
.hero.has-video .hero__grid,
.hero.has-video .sweep{opacity:0; transition:opacity 1.2s var(--ease)}
.hero__grid{
  position:absolute; inset:-1px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:clamp(70px,8vw,130px) clamp(70px,8vw,130px);
  mask-image:radial-gradient(ellipse 80% 70% at 60% 45%, #000 20%, transparent 78%);
}
.hero__mark{
  position:absolute; right:-6%; top:50%; translate:0 -50%;
  width:min(62vw, 760px); opacity:.07; will-change:transform;
}
.hero__mark svg polygon{fill:var(--ivoire)}
.hero__mark svg .ghost-red{fill:var(--rouge-vif); opacity:.85}
.mark--ghost{width:100%; height:auto; animation:markFloat 14s ease-in-out infinite}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(-1.2deg)}}
.sweep{
  position:absolute; top:-40%; left:-30%; width:60%; height:180%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.055) 42%, rgba(193,38,38,.12) 50%, rgba(255,255,255,.055) 58%, transparent);
  transform:rotate(9deg); animation:sweep 9s var(--ease-io) infinite; filter:blur(6px);
}
@keyframes sweep{0%{left:-40%; opacity:0}12%{opacity:1}70%{left:110%; opacity:.5}100%{left:130%; opacity:0}}

/* HUD caméra */
.hud{position:absolute; inset:clamp(74px,9vh,104px) var(--pad) clamp(28px,5vh,52px); pointer-events:none; font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:rgba(246,244,240,.45); text-transform:uppercase}
.hud__tl{position:absolute; top:0; left:0; display:flex; gap:20px; align-items:center}
.hud__tr{position:absolute; top:0; right:0}
.hud__bl{position:absolute; bottom:0; left:0}
.hud__br{position:absolute; bottom:0; right:0}
.rec{display:inline-flex; align-items:center; gap:8px; color:var(--rouge-vif)}
.rec i{width:7px; height:7px; border-radius:50%; background:var(--rouge-vif); animation:blink 1.4s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.hud__tc{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1}
.vb{position:absolute; width:clamp(22px,2.6vw,40px); height:clamp(22px,2.6vw,40px); border:1px solid rgba(246,244,240,.3)}
.vb--tl{top:-20px;left:-16px;border-right:0;border-bottom:0}
.vb--tr{top:-20px;right:-16px;border-left:0;border-bottom:0}
.vb--bl{bottom:-16px;left:-16px;border-right:0;border-top:0}
.vb--br{bottom:-16px;right:-16px;border-left:0;border-top:0}

.hero__inner{position:relative; z-index:3; width:min(1440px,100%); margin-inline:auto; padding:clamp(120px,14vh,170px) var(--pad) clamp(90px,12vh,130px)}
.hero__title{
  font-family:var(--serif); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(2rem, 4.8vw, 5rem); line-height:1.06; letter-spacing:-.04em;
  margin:.34em 0 0; max-width:none;
}
.hero__title em{font-style:italic; font-weight:400; color:var(--rouge-vif); position:relative}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em}
.hero__title .line > span{display:block; transform:translateY(110%); opacity:0}
.is-ready .hero__title .line > span{animation:lineUp 1.05s var(--ease) forwards}
.is-ready .hero__title .line:nth-child(1) > span{animation-delay:.12s}
.is-ready .hero__title .line:nth-child(2) > span{animation-delay:.22s}
.is-ready .hero__title .line:nth-child(3) > span{animation-delay:.32s}
@keyframes lineUp{to{transform:translateY(0); opacity:1}}
.hero__sub{max-width:54ch; color:rgba(246,244,240,.62); font-size:clamp(.98rem,1.1vw,1.1rem); margin-top:1.8em}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.6em}

.scrollcue{position:absolute; bottom:clamp(26px,5vh,48px); left:50%; translate:-50% 0; z-index:4; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:9px; letter-spacing:.32em; color:rgba(246,244,240,.5)}
.scrollcue i{width:1px; height:52px; background:linear-gradient(var(--rouge-vif), transparent); animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{background:var(--rouge); color:var(--blanc); padding:16px 0; overflow:hidden; position:relative; z-index:3}
.marquee__track{display:flex; align-items:center; gap:28px; width:max-content; animation:slide 38s linear infinite; font-family:var(--serif); font-weight:300; font-size:clamp(1rem,1.7vw,1.5rem); letter-spacing:-.01em; font-style:italic}
.marquee__track b{width:6px; height:6px; background:currentColor; border-radius:50%; flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* =========================================================
   PILIERS (studio)
   ========================================================= */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(50px,7vw,96px)}
.pillar{padding:clamp(26px,2.6vw,40px); border:1px solid rgba(17,17,17,.14); background:rgba(255,255,255,.4); position:relative; overflow:hidden; transition:transform .6s var(--ease), border-color .5s}
.pillar::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--rouge); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.pillar:hover{transform:translateY(-8px); border-color:rgba(17,17,17,.28)}
.pillar:hover::after{transform:scaleX(1)}
.pillar__icon{height:60px; color:var(--rouge); display:flex; align-items:center}
.pillar__icon svg{width:52px; height:52px}
.pillar__serif{font-family:var(--serif); font-size:52px; line-height:1; font-weight:600}
.pillar__badge{font-family:var(--mono); font-size:20px; letter-spacing:.14em; border:2px solid currentColor; padding:8px 12px}
.pillar h3{font-family:var(--serif); font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:500; letter-spacing:-.02em; margin:22px 0 10px}
.pillar p{margin:0; color:rgba(17,17,17,.66); font-size:.96rem}


/* =========================================================
   OFFRE (accordéon)
   ========================================================= */
.offers{margin-top:clamp(44px,6vw,80px); border-top:1px solid rgba(17,17,17,.16)}
.offer{border-bottom:1px solid rgba(17,17,17,.16); position:relative}
.offer::before{content:""; position:absolute; inset:0; background:var(--noir); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease); z-index:0}
.offer:hover::before{transform:scaleY(1); transform-origin:top}
.offer.is-open::before{transform:scaleY(1); transform-origin:top}
.offer > *{position:relative; z-index:1}
.offer__head{display:flex; align-items:center; gap:clamp(14px,2.4vw,40px); width:100%; padding:clamp(24px,3vw,42px) 0; text-align:left; transition:color .5s var(--ease), padding .5s var(--ease)}
.offer:hover .offer__head,.offer.is-open .offer__head{color:var(--ivoire); padding-inline:clamp(10px,1.6vw,28px)}
.offer__head em{font-family:var(--mono); font-size:11px; font-style:normal; letter-spacing:.2em; color:var(--rouge-vif); flex:none}
.offer__head h3{font-family:var(--serif); font-weight:300; font-size:clamp(1.35rem,3vw,2.6rem); line-height:1.08; letter-spacing:-.03em; margin:0; flex:1}
.offer__tag{font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; opacity:.6; white-space:nowrap}
.offer__plus{position:relative; width:20px; height:20px; flex:none}
.offer__plus::before,.offer__plus::after{content:""; position:absolute; inset:50% 0 auto; height:1px; background:currentColor; transition:transform .5s var(--ease)}
.offer__plus::after{transform:rotate(90deg)}
.offer.is-open .offer__plus::after{transform:rotate(0)}
.offer__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.offer.is-open .offer__body{grid-template-rows:1fr}
.offer__inner{overflow:hidden; color:rgba(246,244,240,.7)}
.offer.is-open .offer__inner{padding:0 clamp(10px,1.6vw,28px) clamp(28px,3vw,46px) calc(clamp(14px,2.4vw,40px) + 34px)}
.offer__inner ul{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 22px; list-style:none}
.offer__inner li{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(246,244,240,.25); border-radius:99px; padding:8px 14px}
.offer__for{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--rouge-vif)}


/* =========================================================
   PROCESS + STATS
   ========================================================= */
.steps{position:relative; list-style:none; padding:0; margin:clamp(50px,7vw,96px) 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,26px)}
.steps__line{position:absolute; top:11px; left:0; right:0; height:1px; background:rgba(17,17,17,.16)}
.steps__line b{display:block; height:100%; width:0; background:var(--rouge); transition:width 1.4s var(--ease)}
.step{position:relative; padding-top:42px}
.step::before{content:""; position:absolute; top:5px; left:0; width:13px; height:13px; border:1px solid var(--noir); background:var(--ivoire); border-radius:50%; transition:background .4s, border-color .4s, transform .4s var(--ease)}
.step:hover::before{background:var(--rouge); border-color:var(--rouge); transform:scale(1.35)}
.step__n{font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--rouge)}
.step h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem,1.9vw,1.5rem); letter-spacing:-.02em; margin:8px 0 6px}
.step p{margin:0; font-size:.92rem; color:rgba(17,17,17,.62)}

/* =========================================================
   CONTACT
   ========================================================= */
.sec--contact{border-top:1px solid rgba(246,244,240,.1)}
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,100px)}
.contact__info{list-style:none; padding:0; margin:clamp(34px,4vw,56px) 0 0; display:grid; gap:18px}
.contact__info li{display:flex; flex-direction:column; gap:4px; padding-bottom:16px; border-bottom:1px solid rgba(246,244,240,.12)}
.contact__info em{font-family:var(--mono); font-size:9px; font-style:normal; letter-spacing:.3em; text-transform:uppercase; color:var(--gris)}
.contact__info a,.contact__info span{font-family:var(--serif); font-weight:400; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:-.01em}
.contact__socials{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-family:var(--serif); font-weight:400; font-size:clamp(1rem,1.5vw,1.3rem)}
.contact__info a{transition:color .3s}
.contact__info a:hover{color:var(--rouge-vif)}

.form{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-content:start; padding-top:clamp(14px,2vw,36px)}
.field{display:flex; flex-direction:column; gap:9px}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--mono); font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--gris)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ivoire); background:transparent;
  border:0; border-bottom:1px solid rgba(246,244,240,.2); padding:12px 0; resize:none;
  transition:border-color .4s;
}
.field select option{background:var(--noir); color:var(--ivoire)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--rouge-vif)}
.field ::placeholder{color:rgba(246,244,240,.28)}
.form .btn{grid-column:1 / -1; justify-self:start; margin-top:10px}
.form__note{grid-column:1 / -1; margin:0; font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--gris)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--noir); color:var(--ivoire); padding:clamp(50px,6vw,80px) 0 34px; border-top:1px solid rgba(246,244,240,.1); position:relative; z-index:2}
.footer__top{display:flex; align-items:center; gap:clamp(20px,3vw,44px); flex-wrap:wrap; padding-bottom:clamp(36px,4vw,60px)}
.footer__mark{width:clamp(60px,7vw,96px); height:auto}
.footer__claim{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.3rem,3vw,2.4rem); letter-spacing:-.03em; margin:0}
.footer__bar{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(246,244,240,.1); font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris)}
.footer__pal{display:inline-flex; align-items:center; gap:8px}
.footer__pal i{width:11px; height:11px; background:var(--c); border:1px solid rgba(246,244,240,.25); display:inline-block}
.footer__bar a:hover{color:var(--rouge-vif)}


/* =========================================================
   POPUP « NOUVEAU BRIEF »
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:var(--pad);
  background:rgba(8,8,8,.86); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.modal.is-open{opacity:1; visibility:visible}
.modal__panel{
  position:relative; width:min(720px,100%); max-height:88vh; overflow:hidden auto;
  background:var(--noir-3); border:1px solid rgba(246,244,240,.14);
  padding:clamp(28px,4vw,54px) clamp(28px,4vw,54px) clamp(46px,5vw,60px);
  transform:translateY(26px) scale(.97); opacity:0;
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.modal.is-open .modal__panel{transform:none; opacity:1}
.modal__panel .vb{border-color:rgba(246,244,240,.3); width:clamp(16px,1.6vw,24px); height:clamp(16px,1.6vw,24px)}
.modal__panel .vb--tl{top:14px; left:14px}
.modal__panel .vb--tr{top:14px; right:14px}
.modal__panel .vb--bl{bottom:14px; left:14px}
.modal__panel .vb--br{bottom:14px; right:14px}
.modal__title{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.08; letter-spacing:-.035em; margin:.3em 0 clamp(22px,3vw,34px);
}
.modal__close{
  position:absolute; top:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); z-index:3;
  width:40px; height:40px; border:1px solid rgba(246,244,240,.28); border-radius:50%;
  transition:border-color .35s, background .35s, transform .5s var(--ease);
}
.modal__close::before,.modal__close::after{content:""; position:absolute; inset:50% 11px auto; height:1px; background:var(--ivoire)}
.modal__close::before{transform:rotate(45deg)}
.modal__close::after{transform:rotate(-45deg)}
.modal__close:hover{border-color:var(--rouge-vif); background:var(--rouge); transform:rotate(90deg)}
.modal .form{padding-top:0}
.modal .field{opacity:0; transform:translateY(16px)}
.modal.is-open .field{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
.modal.is-open .field:nth-child(1){transition-delay:.14s}
.modal.is-open .field:nth-child(2){transition-delay:.19s}
.modal.is-open .field:nth-child(3){transition-delay:.24s}
.modal.is-open .field:nth-child(4){transition-delay:.29s}
.modal.is-open .field:nth-child(5){transition-delay:.34s}

.contact__cta{display:flex; flex-direction:column; align-items:flex-start; gap:18px; justify-content:center}

/* =========================================================
   ANIMATIONS AU SCROLL
   ========================================================= */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.split .word{display:inline-block; overflow:hidden; vertical-align:top; padding:.08em .02em .2em; margin:-.08em -.02em -.2em}
.split .word > i{display:inline-block; font-style:inherit; transform:translateY(125%); transition:transform .9s var(--ease)}
.split.is-in .word > i{transform:translateY(0)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .sechead--row{grid-template-columns:1fr; align-items:start}
  .pillars{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr); gap:30px}
  .steps__line{display:none}
  .step{padding-top:34px}
  .stats{grid-template-columns:1fr 1fr}
  .work{grid-template-columns:1fr; gap:26px}
  .work--rev .work__media{order:0}
  .contact{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav__links{display:none}
  .nav .btn--sm{display:none}
  .burger{display:flex}
  .pillars{grid-template-columns:1fr}
  .hero__mark{right:-24%; width:92vw; opacity:.05}
  .hud__br,.hud__bl{display:none}
  .form{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer__bar{flex-direction:column; align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal,.hero__title .line > span,.split .word > i{opacity:1 !important; transform:none !important}
  .grain{display:none}
}