/* ==========================================================================
   One Million Events — front-office
   Direction : éditorial nocturne. Typo XXL, affiches d'abord, grain, rubriques
   numérotées, comptes à rebours, parallaxe au scroll.
   ========================================================================== */
.site { --ink:#F5F3FF; --soft:#A1A1AA; --paper:#EDE9FE; --hot:#D946EF; --vio:#8B5CF6; --night:#0B0914; --panel:#151226; --rule:rgba(255,255,255,.09); }
.site { background: var(--night); color: var(--ink); overflow-x: hidden; }
.site ::selection { background: var(--hot); color: #fff; }

/* Grain photo argentique (évite l'aplat « numérique ») */
.site::before { content:''; position:fixed; inset:-50%; z-index:100; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@media (prefers-reduced-motion: reduce) { .topbar-dot { animation:none; } }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- Typo ---------- */
.d-xl { font-weight:900; text-transform:uppercase; letter-spacing:-.045em; line-height:.86; font-size: clamp(3.1rem, 10.5vw, 9.5rem); }
.d-lg { font-weight:900; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size: clamp(2.4rem, 6.4vw, 5.6rem); }
.d-md { font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.d-thin { font-weight:300; letter-spacing:-.02em; }
.d-italic { font-style: italic; font-weight: 800; }
.hot { color: var(--hot); }
.eyebrow { display:flex; align-items:center; gap:.75rem; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--soft); }
.eyebrow b { color: var(--ink); font-weight:800; }
.eyebrow::after { content:''; height:1px; flex:1; background: var(--rule); }
.eyebrow.no-rule::after { display:none; }
.lede { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height:1.65; color: #C9C6D6; }

/* ---------- Boutons ---------- */
.f-btn { position:relative; display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding: 1rem 1.5rem; border-radius: 999px; background: var(--ink); color: var(--night); overflow:hidden; isolation:isolate; transition: color .35s, transform .2s; cursor:pointer; white-space:nowrap; }
.f-btn::before { content:''; position:absolute; inset:0; z-index:-1; background: var(--hot); transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1); border-radius: inherit; }
.f-btn:hover { color:#fff; } .f-btn:hover::before { transform:none; }
.f-btn:active { transform: scale(.97); }
.f-btn:disabled { opacity:.45; cursor:not-allowed; }
.f-btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(245,243,255,.35); }
.f-btn.hotbtn { background: var(--hot); color:#fff; } .f-btn.hotbtn::before { background: var(--ink); } .f-btn.hotbtn:hover { color: var(--night); }
.f-btn .arr { transition: transform .35s; } .f-btn:hover .arr { transform: translateX(4px); }
.u-link { background: linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition: background-size .35s; }
.u-link:hover { background-size: 100% 1.5px; }

/* ---------- Header ---------- */
.f-head { position:fixed; top:0; left:0; right:0; z-index:50; transition: transform .45s cubic-bezier(.7,0,.2,1), background .3s, backdrop-filter .3s; }
/* Bandeau dégradé sous le menu (lisibilité sur les visuels) — 0.7 en haut, transparent en bas */
.f-head { isolation:isolate; }
.f-head::before { content:''; position:absolute; left:0; right:0; top:0; bottom:-56px; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,9,20,.7) 0%, rgba(11,9,20,.55) 45%, rgba(11,9,20,0) 100%); transition: opacity .3s; }
.f-head.scrolled::before { opacity:0; }
.f-head.scrolled { background: rgba(11,9,20,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--rule); }
.f-head.hide { transform: translateY(-100%); }
.f-nav a { position:relative; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: #fff; text-shadow: 0 1px 12px rgba(11,9,20,.6); transition: color .2s; }
.f-nav a:hover, .f-nav a:focus-visible { color: var(--hot); }

/* ---------- Bandeau compte à rebours (haut du site) ---------- */
.topbar { display:flex; align-items:center; justify-content:center; gap:.9rem; height:36px; padding:0 1rem; background: var(--hot); color:#0B0914;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; overflow:hidden; }
.topbar b { font-weight:900; }
.topbar-dot { width:7px; height:7px; border-radius:999px; background:#0B0914; flex-shrink:0; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; transform: scale(.7); } }
.topbar-cd { font-weight:900; font-variant-numeric: tabular-nums; background:#0B0914; color:#fff; padding:.25rem .6rem; border-radius:6px; letter-spacing:.06em; }
.topbar-cd span { color: #F0ABFC; }
.topbar-go { align-items:center; gap:.3rem; font-weight:900; }
/* Compte à rebours sur les affiches de l'agenda */
.ev-cd { position:absolute; left:12px; top:12px; font-size:.68rem; font-weight:800; letter-spacing:.08em; font-variant-numeric: tabular-nums;
  background: rgba(11,9,20,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color:#fff; padding:.4rem .65rem; border-radius:8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ev-cd span:first-child { color: var(--hot); }

/* ---------- Hero ---------- */
.split .w { display:inline-block; overflow:hidden; vertical-align: top; padding-bottom:.06em; margin-bottom:-.06em; }
.split .w > span { display:inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.8,.1,1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.split.in .w > span { transform:none; }

/* ---------- À la une 16/10 : fond flouté + affiche 4:5 entière ---------- */
.feat { position:relative; display:block; aspect-ratio: 16/10; border-radius: 22px; overflow:hidden; background: var(--panel); isolation:isolate; }
.feat-bg { position:absolute; inset:0; z-index:-2; }
.feat-bg img { width:100%; height:100%; object-fit:cover; filter: blur(48px) saturate(1.4); transform: scale(1.25); opacity:.75; }
.feat::after { content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(11,9,20,.92) 0%, rgba(11,9,20,.6) 50%, rgba(11,9,20,.15) 100%); }
.feat-poster { position:absolute; right: 6%; top: 9%; height: 82%; aspect-ratio: 4/5; border-radius: 16px; overflow:hidden;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.feat-poster img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.2,.8,.1,1); }
.feat:hover .feat-poster img { transform: scale(1.05); }
.feat-info { position:absolute; inset:0; right:auto; width: 56%; padding: clamp(1.5rem, 4vw, 3.5rem); display:flex; flex-direction:column; justify-content:flex-end; }
/* Flyer paysage : carte horizontale compacte, hauteur dictée par le flyer (entier, sans recadrage) */
.feat.has-banner { aspect-ratio: auto; display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items:center; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1rem, 2vw, 1.5rem); }
.feat.has-banner::after { background: linear-gradient(90deg, rgba(11,9,20,.94) 0%, rgba(11,9,20,.75) 45%, rgba(11,9,20,.35) 100%); }
.feat.has-banner .feat-info { position:relative; inset:auto; width:auto; padding: clamp(.5rem, 2vw, 1.5rem); }
.feat.has-banner .feat-info .d-lg { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.feat.has-banner .feat-info .lede { margin-top:.5rem; font-size:.95rem; }
.feat.has-banner .feat-info > div { margin-top: 1.25rem; }
.feat.has-banner .cd div { min-width: 3.1rem; padding:.45rem .3rem; }
.feat.has-banner .cd b { font-size: 1.1rem; }
.feat-poster.is-banner { position:relative; inset:auto; right:auto; top:auto; translate:none; width:100%; height:auto; aspect-ratio:auto; border-radius: 14px; order: 2; }
.feat-poster.is-banner img { height:auto; object-fit: contain; display:block; }
@media (max-width: 1023px) {
  .feat.has-banner { grid-template-columns: 1fr; }
  .feat.has-banner .feat-poster { order:-1; }
}
@media (max-width: 767px) {
  .feat { aspect-ratio: auto; }
  .feat-poster { position:relative; right:auto; top:auto; height:auto; width: 62%; margin: 1.5rem auto 0; }
  .feat-info { position:relative; width:auto; }
  .feat::after { background: linear-gradient(0deg, rgba(11,9,20,.95) 35%, rgba(11,9,20,.3)); }
}
.cd { display:flex; gap:.4rem; }
.cd div { min-width: 3.6rem; padding:.55rem .4rem; text-align:center; border-radius:10px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cd b { display:block; font-weight:900; font-size:1.35rem; font-variant-numeric: tabular-nums; line-height:1; }
.cd small { font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color: var(--soft); }

/* ---------- Agenda ---------- */
.filters { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.fbtn { cursor:pointer; white-space:nowrap; }
.fbtn:active { transform: scale(.96); }
.ev { display:block; }
.ev-img { position:relative; aspect-ratio: 4/5; border-radius: 16px; overflow:hidden; background: var(--panel); }
.ev-img img { width:100%; height:100%; object-fit:cover; transition: transform .9s cubic-bezier(.2,.8,.1,1), filter .5s; }
.ev:hover .ev-img img { transform: scale(1.06); filter: saturate(1.25); }
.ev-img .go { position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:999px; background: var(--ink); color: var(--night); display:flex; align-items:center; justify-content:center; transform: scale(0) rotate(-45deg); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.ev:hover .ev-img .go { transform: scale(1) rotate(0); }
.ev-date { color: var(--hot); font-weight:700; font-size:.82rem; }
.pill { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .6rem; border-radius:999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--soft); }
.sold { position:absolute; top:12px; right:12px; background: var(--ink); color: var(--night); font-size:.6rem; font-weight:900; letter-spacing:.14em; padding:.35rem .6rem; border-radius:6px; }

/* ---------- Mur de noms (alternance gras / fin, défilement horizontal au scroll) ---------- */
.wall { overflow:hidden; padding: 2rem 0; }
.wall-row { white-space:nowrap; text-transform:uppercase; line-height:1.02; will-change: transform; font-size: clamp(2.4rem, 7vw, 6.2rem); letter-spacing:-.035em; }
.wall-row:nth-child(odd) { font-weight:900; }
.wall-row:nth-child(even) { font-weight:300; color: var(--soft); }
.wall-row .sep { display:inline-block; width:.42em; height:.42em; border-radius:999px; background: var(--hot); margin: 0 .35em .12em; vertical-align: middle; }
.wall-row:nth-child(even) .sep { background: transparent; box-shadow: inset 0 0 0 2px var(--vio); }

/* ---------- Tuiles ---------- */
.tile { position:relative; border-radius: 26px; overflow:hidden; padding: clamp(1.6rem, 3vw, 2.6rem); min-height: 30rem; display:flex; flex-direction:column; }
.tile.dark { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.tile.light { background: var(--paper); color: #0B0914; }
.tile.light .soft { color: #4b4560; }
.mock-ticket { position:absolute; left:50%; bottom:-3.5rem; width: 15rem; translate: -50% 0; border-radius: 18px; background:#fff; color:#0B0914; padding: 1rem; box-shadow: 0 40px 60px -30px rgba(11,9,20,.6); }
.mock-ticket .hd { height: 5.2rem; border-radius: 10px; background: radial-gradient(120% 120% at 10% 0%, #8B5CF6, transparent 60%), radial-gradient(120% 120% at 100% 100%, #D946EF, transparent 60%), #1a1430; color:#fff; padding:.7rem; font-weight:900; font-size:1.05rem; line-height:.9; text-transform:uppercase; display:flex; align-items:flex-end; }
.mock-ticket .perf { border-top: 2px dashed #ddd6fe; margin: .9rem -1rem; }
.qr-art { width: 7.5rem; height: 7.5rem; margin: 0 auto; display:grid; grid-template-columns: repeat(11, 1fr); gap:2px; }
.qr-art i { background:#0B0914; border-radius:1px; }
.qr-art i.o { background: transparent; }
.phone { position:absolute; right:-1.5rem; bottom:-6rem; width: 14rem; aspect-ratio: 9/18; border-radius: 2.2rem; background:#0B0914; padding: .6rem; box-shadow: 0 0 0 2px #2a2440, 0 50px 80px -30px rgba(0,0,0,.9); }
.phone-in { width:100%; height:100%; border-radius: 1.7rem; overflow:hidden; background: #120f22; padding: 1rem .8rem; display:flex; flex-direction:column; gap:.6rem; }
.phone-in .row { display:flex; gap:.5rem; align-items:center; background: rgba(255,255,255,.05); border-radius: 12px; padding:.45rem; }
.phone-in .th { width:2.4rem; height:2.4rem; border-radius:8px; background-size:cover; background-position:center; flex-shrink:0; }
.phone-in .ln { height:.42rem; border-radius:4px; background: rgba(255,255,255,.25); }

/* ---------- Chiffres ---------- */
.stat b { display:block; font-weight:900; font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing:-.04em; line-height:1; font-variant-numeric: tabular-nums; }
.stat > span { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--soft); }

/* ---------- Formulaires front ---------- */
.site .input { background: rgba(255,255,255,.04); border:0; box-shadow: inset 0 0 0 1px var(--rule); border-radius: 14px; padding: .95rem 1rem; transition: box-shadow .2s, background .2s; }
.site .input:focus { box-shadow: inset 0 0 0 1.5px var(--hot); background: rgba(255,255,255,.06); }
.site .label { letter-spacing:.16em; font-size:.62rem; font-weight:700; }
.site .card { border:0; box-shadow: inset 0 0 0 1px var(--rule); border-radius: 22px; }


/* ---------- Moyens de paiement (pied de page) ---------- */
.pay { display:inline-flex; align-items:center; justify-content:center; height:2rem; min-width:3rem; padding:0 .7rem; border-radius:8px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size:.78rem; font-weight:600; color:#E4E4E7; }
.pay b { font-weight:900; }
.mc { position:relative; display:inline-block; width:1.6rem; height:1rem; }
.mc i { position:absolute; top:0; width:1rem; height:1rem; border-radius:999px; }
.mc i:first-child { left:0; } .mc i:last-child { right:0; mix-blend-mode: screen; opacity:.95; }

/* ---------- Page événement ---------- */
.ev-hero { position:relative; height: min(88svh, 860px); overflow:hidden; }
.ev-hero .px-img { position:absolute; inset:-10% 0; }
.ev-hero .px-img img { width:100%; height:100%; object-fit:cover; }
.ev-flyer img { opacity:.7; object-position: center 30%; }
.ev-blur img { filter: blur(50px) saturate(1.4); transform: scale(1.25); opacity:.7; }
.ev-poster { position:absolute; z-index:3; right: max(2rem, calc((100vw - 1400px) / 2 + 2rem)); bottom: 12%; height: 64%; aspect-ratio: 4/5; border-radius: 18px; overflow:hidden;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(2deg); }
.ev-poster img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 1023px) { .ev-poster { display:none; } }
/* Mobile : le flyer apparaît en haut, centré au-dessus du titre */
.ev-poster-m { display:none; }
@media (max-width: 1023px) {
  .ev-hero { height:auto; min-height: 100svh; display:flex; flex-direction:column; justify-content:flex-end; }
  .ev-hero > .absolute.inset-x-0.bottom-0 { position:relative; }
  .ev-poster-m { display:block; position:relative; z-index:2; width: min(78vw, 360px); aspect-ratio: 4/5; margin: 7.5rem auto 1.5rem; border-radius: 16px; overflow:hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
  .ev-poster-m img { width:100%; height:100%; object-fit:cover; }
}
.ev-poster.is-video { aspect-ratio: 9/16; height: 74%; bottom: 8%; transform: rotate(1.5deg); background:#000; }
.teaser { position:relative; width:100%; height:100%; aspect-ratio: 9/16; border-radius: 18px; overflow:hidden; background:#000; }
.ev-poster .teaser { border-radius: 0; }
.teaser video { width:100%; height:100%; object-fit:cover; display:block; }
.teaser-sound { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:999px;
  background: rgba(11,9,20,.7); backdrop-filter: blur(8px); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .2s; }
.teaser-sound:hover, .teaser-sound.on { background: var(--hot); }
.teaser-tag { position:absolute; left:10px; top:10px; font-size:.58rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; background: var(--ink); color: var(--night); padding:.3rem .55rem; border-radius:6px; }
.ev-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, var(--night) 4%, rgba(11,9,20,.55) 45%, rgba(11,9,20,.25)); }
.meta-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.meta-strip > div { padding: 1.1rem 0; }
.meta-strip > div + div { padding-left: 1.2rem; border-left:1px solid var(--rule); }
.tbox { background: var(--panel); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); }
.trow { border-radius: 16px; padding: 1rem; box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .25s, background .25s; }
.trow.sel { box-shadow: inset 0 0 0 1.5px var(--hot); background: rgba(217,70,239,.06); }
.qbtn { width:2.4rem; height:2.4rem; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1.5px var(--rule); transition: all .2s; }
.qbtn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.qbtn.plus { background: var(--ink); color: var(--night); box-shadow:none; }
.qbtn.plus:hover { background: var(--hot); color:#fff; }

/* ---------- Galerie événement + visionneuse ---------- */
.gallery { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-item { position:relative; display:block; width:100%; aspect-ratio: 4/5; border-radius: 14px; overflow:hidden; background: var(--panel); cursor: zoom-in; isolation:isolate; }
.g-item img, .g-item video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s cubic-bezier(.2,.8,.1,1), filter .4s; }
.g-item:hover img, .g-item:hover video { transform: scale(1.05); filter: saturate(1.2); }
.g-play { position:absolute; left:50%; top:50%; translate:-50% -50%; width:3.2rem; height:3.2rem; border-radius:999px; background: rgba(255,255,255,.92); color: var(--night); display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .3s; }
.g-item:hover .g-play { transform: scale(1.1); background: var(--hot); color:#fff; }
.g-cap { position:absolute; left:0; right:0; bottom:0; padding: 1.6rem .75rem .6rem; font-size:.72rem; font-weight:600; text-align:left; background: linear-gradient(transparent, rgba(11,9,20,.85)); }
.lb { position:fixed; inset:0; z-index:95; background: rgba(6,4,12,.94); backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center; animation: lbIn .25s ease; }
@keyframes lbIn { from { opacity:0 } }
.lb-stage { max-width: min(92vw, 1200px); max-height: 82vh; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 76vh; border-radius: 12px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); animation: lbZoom .35s cubic-bezier(.2,.8,.1,1); }
@keyframes lbZoom { from { transform: scale(.96); opacity:0 } }
.lb-cap { font-size:.85rem; color:#E4E4E7; text-align:center; }
.lb-btn { position:absolute; width:3rem; height:3rem; border-radius:999px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .2s; }
.lb-btn:hover { background: var(--hot); }
.lb-close { top: 1rem; right: 1rem; } .lb-prev { left: 1rem; top:50%; translate: 0 -50%; } .lb-next { right: 1rem; top:50%; translate: 0 -50%; }
.lb-count { position:absolute; top: 1.6rem; left: 1.4rem; font-size:.7rem; font-weight:800; letter-spacing:.2em; color: var(--soft); }
@media (max-width: 640px) { .lb-prev, .lb-next { top:auto; bottom: 1.2rem; translate:none; } .lb-prev { left: calc(50% - 3.5rem); } .lb-next { right: calc(50% - 3.5rem); } }

/* ---------- Communauté ---------- */
.rsvp { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding: 1.25rem 0; border-bottom:1px solid var(--rule); }
.rsvp-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); transition: background .2s, box-shadow .2s, transform .15s; }
.rsvp-btn:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.rsvp-btn:active { transform: scale(.96); }
.rsvp-btn span { min-width:1.6rem; padding:.1rem .45rem; border-radius:999px; background: rgba(255,255,255,.1); font-variant-numeric: tabular-nums; text-align:center; }
.rsvp-btn.on { background: var(--hot); box-shadow:none; }
.rsvp-btn.on span { background: rgba(11,9,20,.25); }
.rsvp-btn.share span { display:none; }
.rsvp-btn.photo { background: linear-gradient(135deg, #8B5CF6, #D946EF); box-shadow: 0 10px 30px -10px rgba(217,70,239,.7); animation: photoPulse 2.6s ease-in-out infinite; }
@keyframes photoPulse { 50% { box-shadow: 0 10px 40px -6px rgba(217,70,239,.95); } }
/* Encart « photo de participation » sur la page événement */
.pp-card { display:grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items:center; padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 22px; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(217,70,239,.08)); box-shadow: inset 0 0 0 1px rgba(217,70,239,.3); }
.pp-card-visual { position:relative; display:block; width:100%; border-radius:14px; overflow:hidden; cursor:pointer; background:#1a1530;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.85); transform: rotate(-2deg); transition: transform .4s cubic-bezier(.2,.8,.1,1); }
.pp-card-visual:hover { transform: rotate(0) scale(1.03); }
.pp-card-visual img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.pp-card-ph { position:absolute; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; color:#fff; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background: linear-gradient(160deg, #8B5CF6, #D946EF); }
.pp-card-ph svg { opacity:.9; }
@media (max-width: 640px) { .pp-card { grid-template-columns: 1fr; } .pp-card-visual { max-width: 260px; margin: 0 auto; } .pp-card-txt { text-align:center; } .pp-card-txt ul { display:inline-block; text-align:left; } }

/* Éditeur « photo de participation » (style Twibbonize) */
.pp-stage { position:relative; margin:0 auto; border-radius:14px; overflow:hidden; touch-action:none; cursor:grab; background: repeating-conic-gradient(#2a2540 0 25%,#1a1530 0 50%) 0 0/18px 18px; }
.pp-stage:active { cursor:grabbing; }
.pp-stage canvas { display:block; width:100%; height:100%; }
.pp-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; pointer-events:none; }
.pp-tabs { display:flex; gap:.4rem; justify-content:center; }
.pp-tabs button { font-size:.7rem; font-weight:800; letter-spacing:.08em; padding:.5rem .9rem; border-radius:999px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); color:#fff; }
.pp-tabs button.on { background:#fff; color:#0B0914; box-shadow:none; }
.pp-range { display:flex; align-items:center; gap:.7rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--soft); }
.pp-range input { flex:1; accent-color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .rsvp-btn.photo { animation:none; } }

/* ---------- Apparitions au scroll ---------- */
[data-reveal] { opacity:0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.1,1), transform 1s cubic-bezier(.2,.8,.1,1); transition-delay: var(--d, 0ms); }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="clip"] { opacity:1; transform:none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

/* ---------- Bas de page mobile ---------- */
.tabbar { background: rgba(11,9,20,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--rule); }
.tabbar a, .tabbar button { font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--soft); }
.tabbar .on { color: var(--ink); }

/* Transitions de page SPA */
#app { transition: opacity .35s ease, transform .35s ease; }
#app.leaving { opacity:0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  .site::before, .topbar-dot { animation:none; }
  [data-reveal], .split .w > span { opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}

/* Cases à cocher lisibles sur fond sombre */
.site input[type="checkbox"] { -webkit-appearance:none; appearance:none; flex-shrink:0; width:1.25rem; height:1.25rem; margin-top:.1rem; border-radius:6px; cursor:pointer;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); display:inline-grid; place-content:center; transition: background .15s, box-shadow .15s; }
.site input[type="checkbox"]:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.site input[type="checkbox"]:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.site input[type="checkbox"]::after { content:''; width:.62rem; height:.34rem; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top:-.15rem; transition: transform .15s; }
.site input[type="checkbox"]:checked { background: var(--hot); box-shadow:none; }
.site input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }