/* L'ARTE NOIR · v2 · styles partagés (site événements + Digital Studio) */
:root{
  --ink:#000;
  --cream:#f5efe0;
  --paper-ink:#0b0b0b;
  --blue:#3d4dff;
  --red:#ff4444;
  --line-d:rgba(245,239,224,.22);
  --mute-d:rgba(245,239,224,.72);
  --line-l:rgba(11,11,11,.2);
  --mute-l:rgba(11,11,11,.68);
  --display:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(80px,11vw,150px);position:relative}
.cream{background:var(--cream);color:var(--paper-ink)}
.display{font-family:var(--display);font-stretch:68%;font-weight:900;letter-spacing:-.02em;line-height:.9}
/* Grotesque large et serrée, pour les mots géants (inspiration éditoriale) */
.grot{font-family:var(--display);font-stretch:100%;font-weight:900;letter-spacing:-.055em;line-height:.84;text-transform:uppercase}
[data-fit]{white-space:nowrap}
.fit-line{display:table;white-space:nowrap}
.center{text-align:center}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);margin-bottom:18px}
.cream .eyebrow{color:var(--mute-l)}
.big{font-size:clamp(52px,7.6vw,104px)}
.lead{font-size:clamp(18px,1.9vw,24px);line-height:1.35;margin-top:22px;max-width:580px}

/* ===== Boutons ===== */
.btn-outline{display:inline-block;font-family:var(--display);font-stretch:72%;font-weight:900;font-size:21px;line-height:1;text-transform:lowercase;text-decoration:none;color:var(--cream);border:3px solid var(--cream);border-radius:40px;padding:8px 18px 7px;transition:background .25s,color .25s}
.btn-outline:hover{background:var(--cream);color:var(--ink)}
.btn-book{display:inline-block;font-family:var(--display);font-stretch:72%;font-weight:900;font-size:19px;line-height:1;text-transform:lowercase;text-decoration:none;white-space:nowrap;background:var(--blue);color:#fff;border:1.5px solid var(--paper-ink);border-radius:40px;padding:8px 15px 7px;transition:background .25s,color .25s}
.btn-book:hover{background:var(--paper-ink);color:var(--cream)}
.btn-cream{display:inline-block;background:var(--cream);color:var(--ink);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:15px 26px;transition:background .25s,color .25s}
.btn-cream:hover{background:var(--blue);color:#fff}

/* ===== Sticker rond qui tourne ===== */
.sticker{position:relative;display:grid;place-items:center;width:clamp(112px,12vw,156px);aspect-ratio:1;border-radius:50%;text-decoration:none;flex-shrink:0;transition:transform .4s var(--ease),background .25s,color .25s}
.sticker svg{position:absolute;inset:7%;width:86%;height:86%;overflow:visible;animation:spin 18s linear infinite}
.sticker text{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:17px;letter-spacing:.02em;fill:currentColor}
.sticker .core{font-size:clamp(26px,2.6vw,36px);line-height:1}
.sticker:hover{transform:rotate(-12deg) scale(1.05)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Header ===== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px var(--gutter);transition:background .4s,padding .4s}
.site-header.is-solid{background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:11px}
.brand{display:inline-flex;align-items:center;border:1.5px solid var(--cream);border-radius:8px;padding:5px 9px;flex-shrink:0}
.brand img{height:24px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none}
.nav-links a{font-size:12.5px;font-weight:400;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav-links a:hover{text-decoration:underline;text-underline-offset:6px}
.lang{display:flex}
.lang button{background:none;border:0;color:var(--mute-d);font-size:11px;font-weight:500;letter-spacing:.12em;padding:6px 5px;cursor:pointer}
.lang button:hover{color:var(--cream)}
.lang button[aria-pressed="true"]{color:var(--cream);text-decoration:underline;text-underline-offset:5px}
.studio-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:15px;line-height:1;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:2px solid var(--cream);border-radius:40px;padding:8px 14px 7px;transition:background .25s,color .25s}
.studio-pill:hover,.studio-pill[aria-current="page"]{background:var(--cream);color:var(--ink)}
.studio-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
@media (max-width:1000px){.nav-links{display:none}}
@media (max-width:380px){.brand img{height:20px}.studio-pill{font-size:13px;padding:7px 10px 6px}}

/* ===== Grain partagé ===== */
.hero::before,.tile::after,.card .visual::after,.community::before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--noise);background-size:180px;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.hero::before{opacity:.3}

/* ===== Hero événements ===== */
.hero{position:relative;height:100svh;min-height:560px;max-height:1100px;display:grid;place-items:center;overflow:hidden;background:#000}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.35) saturate(1.15)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 62%,#000 100%),radial-gradient(ellipse at center,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 80%)}
.hero-center{position:relative;z-index:2;width:100%;display:grid;justify-items:center;gap:22px;text-align:center;padding-inline:var(--gutter)}
.hero-pill{background:var(--cream);border-radius:16px;padding:clamp(12px,1.6vw,18px) clamp(18px,2.4vw,28px);box-shadow:0 20px 80px rgba(0,0,0,.5)}
.hero-pill img{height:clamp(52px,8.5vw,104px);width:auto}
.hero-kicker{font-size:clamp(12px,1.1vw,14px);font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.hero-foot{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,3vw,30px);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
.scroll-cue{width:38px;height:38px;border:1.5px solid var(--cream);border-radius:50%;display:grid;place-items:center;color:var(--cream);text-decoration:none;font-size:16px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ===== Concept + tuiles ===== */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;margin-bottom:clamp(44px,6vw,72px)}
.intro h2{font-size:clamp(58px,8.6vw,118px)}
.lead-xl{font-size:clamp(20px,2.05vw,27px);line-height:1.28}
.ask{font-weight:600;font-size:clamp(17px,1.6vw,21px);margin:22px 0 26px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px)}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:#0a0a0a}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 58%)}
.tile h3{position:absolute;z-index:2;left:clamp(14px,1.7vw,24px);right:14px;bottom:clamp(14px,1.7vw,24px);font-size:clamp(28px,3vw,42px);text-transform:uppercase;line-height:.92}
.tile .art{transition:transform 1.4s var(--ease)}
.tile:hover .art{transform:scale(1.06)}
@media (max-width:900px){.intro{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* ===== Visuels lumière (à remplacer par de vraies photos : <img class="art" src="..."> ) ===== */
.art{position:absolute;inset:0;background:#0a0a0a}
img.art{width:100%;height:100%;object-fit:cover}
.art i{position:absolute;inset:0}
.art-caves{background:
  radial-gradient(ellipse 34% 26% at 50% 72%,rgba(255,196,120,.95),rgba(255,140,40,.35) 45%,transparent 75%),
  repeating-radial-gradient(ellipse 150% 115% at 50% 100%,transparent 0 26px,rgba(255,170,80,.22) 27px 29px,transparent 30px 44px),
  radial-gradient(ellipse 90% 80% at 50% 100%,#4a2608,#1a0c03 60%,#060302)}
.art-dj{background:
  radial-gradient(circle at 50% 6%,rgba(170,180,255,.95),rgba(61,77,255,.45) 16%,transparent 52%),
  linear-gradient(#060925,#0b1150 70%,#1a2280)}
.art-dj .beams{background:repeating-conic-gradient(from 150deg at 50% 6%,transparent 0 4deg,rgba(140,155,255,.6) 4.6deg 5.2deg,transparent 5.8deg 10deg);-webkit-mask-image:conic-gradient(from 150deg at 50% 6%,#000 0 60deg,transparent 60deg);mask-image:conic-gradient(from 150deg at 50% 6%,#000 0 60deg,transparent 60deg)}
.art-dj .crowd{top:auto;height:36%;background:
  radial-gradient(circle 12px at 50% 38%,#000 96%,transparent) 0 0/46px 80px repeat-x,
  radial-gradient(ellipse 22px 34px at 50% 100%,#000 96%,transparent) 0 0/46px 80px repeat-x,
  radial-gradient(circle 14px at 50% 52%,#020206 96%,transparent) 23px 26px/58px 96px repeat-x,
  radial-gradient(ellipse 26px 40px at 50% 100%,#020206 96%,transparent) 23px 26px/58px 96px repeat-x,
  linear-gradient(transparent 70%,#000 70%)}
.art-laser{background:
  radial-gradient(circle at 0 0,rgba(255,90,90,.9),transparent 22%),
  radial-gradient(circle at 100% 0,rgba(120,135,255,.9),transparent 22%),
  radial-gradient(ellipse 60% 30% at 50% 100%,rgba(255,68,68,.35),transparent 70%),
  #060208}
.art-laser .l1{background:repeating-conic-gradient(from 90deg at 0 0,transparent 0 2.2deg,rgba(255,80,80,.9) 2.4deg 2.6deg,transparent 2.8deg 5deg);-webkit-mask-image:conic-gradient(from 95deg at 0 0,#000 0 80deg,transparent 80deg);mask-image:conic-gradient(from 95deg at 0 0,#000 0 80deg,transparent 80deg)}
.art-laser .l2{background:repeating-conic-gradient(from 180deg at 100% 0,transparent 0 2.2deg,rgba(130,145,255,.9) 2.4deg 2.6deg,transparent 2.8deg 5deg);-webkit-mask-image:conic-gradient(from 185deg at 100% 0,#000 0 80deg,transparent 80deg);mask-image:conic-gradient(from 185deg at 100% 0,#000 0 80deg,transparent 80deg)}
.art-ring{background:
  radial-gradient(circle closest-side at 50% 44%,transparent 60%,#ff4a4a 63%,#ffe3e3 64.5%,#ff4a4a 66%,transparent 69%),
  radial-gradient(circle closest-side at 50% 44%,transparent 40%,rgba(255,68,68,.3) 64%,transparent 92%),
  radial-gradient(ellipse 45% 10% at 50% 90%,rgba(255,68,68,.45),transparent 70%),
  linear-gradient(#050505 0 78%,#140404 78%,#0a0202)}
.art-ring i{background:radial-gradient(circle 9px at 50% 66%,#000 95%,transparent),radial-gradient(ellipse 15px 44px at 50% 88%,#000 95%,transparent)}
.art-bokeh{background:
  radial-gradient(circle 38px at 18% 30%,rgba(255,190,120,.55),transparent 70%),
  radial-gradient(circle 22px at 32% 62%,rgba(255,120,160,.5),transparent 70%),
  radial-gradient(circle 54px at 72% 26%,rgba(255,210,140,.45),transparent 70%),
  radial-gradient(circle 30px at 86% 58%,rgba(255,150,90,.5),transparent 70%),
  radial-gradient(circle 18px at 56% 44%,rgba(255,230,190,.6),transparent 70%),
  radial-gradient(circle 26px at 44% 20%,rgba(120,140,255,.35),transparent 70%),
  radial-gradient(circle 44px at 60% 78%,rgba(255,170,110,.35),transparent 70%),
  linear-gradient(160deg,#1c0d14,#2b1210 55%,#0c0606)}
.art-photo{background:url(hero-poster.jpg) center 32%/cover;filter:brightness(1.6) contrast(1.1) saturate(1.2)}
.art-openair{background:
  radial-gradient(circle 2.5px,#ffe9b0 90%,transparent) 0 18%/34px 14px repeat-x,
  radial-gradient(circle 70px at 68% 74%,rgba(255,214,150,.95),rgba(255,140,80,.4) 50%,transparent 75%),
  linear-gradient(#0d1540 0,#3a2f7a 38%,#d9785a 72%,#1a0b08 72.2%,#070303)}

/* ===== Les Nuits (fond crème) ===== */
.nights-head{position:relative}
.nights-title{font-size:clamp(52px,8vw,112px);margin-bottom:clamp(40px,6vw,72px)}
.sticker-nights{position:absolute;z-index:3;right:clamp(0px,3vw,48px);top:clamp(-84px,-6vw,-40px);background:var(--blue);color:#fff}
.sticker-nights:hover{background:var(--paper-ink)}
@media (max-width:700px){.sticker-nights{width:98px;top:-122px;right:-4px}.sticker-nights text{font-size:19px}.sticker-nights .core{font-size:22px}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
.card{border:1.5px solid var(--paper-ink);background:var(--cream);display:flex;flex-direction:column}
.card .visual{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.card .visual .art{filter:grayscale(1) contrast(1.15) brightness(1.25)}
.badge{position:relative;z-index:2;font-family:var(--display);font-stretch:66%;font-weight:900;font-size:clamp(26px,2.7vw,36px);line-height:1;text-transform:uppercase;color:var(--blue);border:1.5px solid var(--blue);border-radius:8px;padding:6px 12px 4px;background:rgba(245,239,224,.82)}
.meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 16px;padding:16px 18px 18px;border-top:1.5px solid var(--paper-ink)}
.meta dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px}
.meta dt{font-family:var(--display);font-stretch:72%;font-weight:900;font-size:18px;line-height:1}
.meta dd{font-size:15px;font-weight:400;line-height:1.2;grid-row:2}
.nights-note{text-align:center;margin-top:36px;font-size:17px;font-weight:400;color:var(--mute-l)}
@media (max-width:980px){.cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,380px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}.card{scroll-snap-align:start}}

/* ===== Bandeau défilant ===== */
.strip{background:linear-gradient(90deg,#a99a80,#ece3d1 28%,#ece3d1 72%,#a99a80);color:#17130d;overflow:hidden}
.strip.dark{background:var(--ink);color:var(--cream);border-block:1px solid var(--line-d)}
.marquee{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee span{font-family:var(--display);font-stretch:85%;font-weight:800;font-size:clamp(13px,1.2vw,16px);letter-spacing:.16em;text-transform:uppercase;padding:20px 0;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== Collaborations ===== */
.collab{padding-bottom:0}
.collab-head{max-width:880px;margin-bottom:clamp(40px,5vw,64px)}
.collab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.collab-item{border-top:1.5px solid var(--cream);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.collab-n{width:30px;height:30px;border-radius:50%;background:var(--cream);color:var(--ink);font:900 14px/30px var(--display);font-stretch:100%;text-align:center}
.collab-item h3{font-size:clamp(36px,3.8vw,56px);text-transform:uppercase}
.collab-item p{font-size:17px;font-weight:400;line-height:1.45;color:var(--mute-d)}
.collab-item .collab-tags{margin-top:auto;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
@media (max-width:860px){.collab-grid{grid-template-columns:1fr}}

/* ===== Privatiser ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.offer-block+.offer-block{margin-top:44px}
.offer-block h3{font-size:clamp(28px,2.8vw,38px);text-transform:uppercase;margin-bottom:12px}
.rule-list{list-style:none;border-top:1.5px solid currentColor;counter-reset:rl}
.rule-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-d);font-size:17px;font-weight:400}
.rule-list li::before{counter-increment:rl;content:counter(rl);flex:0 0 22px;height:22px;border-radius:50%;background:var(--cream);color:var(--ink);font:900 12px/22px var(--display);font-stretch:100%;text-align:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ===== Communauté (diaporama plein écran) ===== */
.community{position:relative;min-height:min(92svh,860px);display:grid;place-items:center;text-align:center;overflow:hidden;color:var(--cream);background:#000;isolation:isolate}
.community::before{z-index:2}
.community::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(0,0,0,.2),rgba(0,0,0,.62))}
.community .slide{opacity:0;transition:opacity 1.2s ease}
.community .slide.is-active{opacity:1;animation:settle 9s ease-out forwards}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.community-inner{position:relative;z-index:3;padding-block:96px;padding-inline:var(--gutter);max-width:1000px;display:grid;justify-items:center;gap:20px}
.community h2{font-size:clamp(42px,6.4vw,84px);font-stretch:90%;letter-spacing:.03em;line-height:1}
.community p{font-size:clamp(16px,1.5vw,19px);font-weight:400;max-width:560px}
.slider-ctrl{position:absolute;z-index:3;right:var(--gutter);bottom:24px;display:flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:72%;font-weight:900;font-size:26px}
.slider-ctrl button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--cream);background:none;color:var(--cream);cursor:pointer;display:grid;place-items:center;font-size:18px;line-height:1}
.slider-ctrl button:hover{background:var(--cream);color:var(--ink)}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:var(--cream);padding-top:56px;border-top:1px solid var(--line-d);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;align-items:start}
.brand-lg{border-width:2px;border-radius:12px;padding:10px 16px;justify-self:start}
.brand-lg img{height:clamp(44px,6vw,72px)}
.foot-links{list-style:none;display:grid;gap:6px;font-size:15px;font-weight:400}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-links.right{text-align:right}
.legal{margin-top:40px;color:var(--mute-d);font-size:13px;line-height:1.65;max-width:720px}
.legal summary{cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);list-style:none}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:" +"}
.legal[open] summary::after{content:" −"}
.legal[open] summary{margin-bottom:12px}
.copy{margin-top:28px;padding-bottom:28px;font-size:12px;color:var(--mute-d)}
.foot-giant{font-size:clamp(72px,16.5vw,250px);color:var(--cream);text-align:center;line-height:.8;margin-bottom:-.1em;user-select:none}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-links.right{text-align:left}}

/* ===== Apparitions au scroll ===== */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.tiles .reveal:nth-child(3n+2),.cards .reveal:nth-child(2),.collab-grid .reveal:nth-child(2){transition-delay:.08s}
.tiles .reveal:nth-child(3n),.cards .reveal:nth-child(3),.collab-grid .reveal:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}