/* ============================================================
   BOOTH AI STUDIO — Thème « maison de luxe » partagé
   (landing + catalogue + pages publiques)
   Noir profond · ivoire · or champagne · Cormorant Garamond
   ============================================================ */

:root {
  --noir:#0b0a08; --noir2:#12100c; --ivoire:#f3eee3; --ivoire-2:#cfc8b8;
  --or:#c9a962; --or-clair:#e6cf9a; --or-sombre:#8a7136;
  --hair:rgba(201,169,98,.28); --hair-soft:rgba(243,238,227,.10);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html.lenis { height:auto; } .lenis.lenis-smooth { scroll-behavior:auto; }
body { background:var(--noir); color:var(--ivoire); font-family:var(--sans); font-weight:300;
  line-height:1.7; overflow-x:hidden; letter-spacing:.01em; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--or); color:var(--noir); }

/* ---------- Écrin : filet doré + lueur + grain + particules ---------- */
.frame-edge { position:fixed; inset:14px; border:1px solid var(--hair); pointer-events:none; z-index:90; }
@media (max-width:760px){ .frame-edge{ inset:8px; } }
.glow { position:fixed; inset:0; z-index:-3; background:
  radial-gradient(60vw 42vh at 78% -6%, rgba(201,169,98,.10), transparent 60%),
  radial-gradient(52vw 40vh at 12% 108%, rgba(201,169,98,.07), transparent 60%),
  var(--noir); }
.grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#particles { position:fixed; inset:0; z-index:-2; pointer-events:none; }

/* ---------- Étiquettes ---------- */
.eyebrow { font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.42em;
  text-transform:uppercase; color:var(--or); }
.rule { display:inline-block; width:54px; height:1px; background:var(--or); vertical-align:middle; margin:0 16px; opacity:.7; }

/* ---------- Navigation ---------- */
nav.lux-nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  padding:26px clamp(24px,5vw,64px); transition:background .5s, padding .4s; }
nav.lux-nav.scrolled { background:linear-gradient(180deg, rgba(11,10,8,.92), rgba(11,10,8,.75) 80%, transparent);
  backdrop-filter:blur(14px); padding-top:16px; padding-bottom:16px; }
.brand { font-family:var(--serif); font-size:1.35rem; letter-spacing:.14em; text-transform:uppercase; }
.brand b { color:var(--or); font-weight:500; }
.nav-links { margin-left:auto; display:flex; gap:clamp(10px,2.4vw,34px); align-items:center; }
.nav-links a { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivoire-2);
  transition:color .3s; position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--or); transition:width .35s; }
.nav-links a:hover { color:var(--ivoire); } .nav-links a:hover::after { width:100%; }
.nav-cta { border:1px solid var(--hair); padding:11px 26px; color:var(--or) !important; }
.nav-cta:hover { background:var(--or); color:var(--noir) !important; }
.nav-cta::after { display:none !important; }
@media (max-width:900px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ---------- Titres ---------- */
h1, h2 { font-family:var(--serif); font-weight:500; }
/* Accent italique doré. IMPORTANT : le dégradé clippé au texte doit être porté
   par l'élément qui contient directement le texte animé (.w), sinon Chrome
   rend le texte invisible quand les mots sont transformés (split-text). */
h1 em, h2 em { font-style:italic; font-weight:400; color:var(--or); }
h1 em .w, h2 em .w {
  background:linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair) 70%,var(--or));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--or);
}
/* Sans animation (no-motion / pas de split) : dégradé directement sur l'em */
.no-motion h1 em, .no-motion h2 em {
  background:linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair) 70%,var(--or));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.split .w-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
.split .w { display:inline-block; transform:translateY(115%); will-change:transform; }
.no-motion .split .w { transform:none; }
.sec-head { text-align:center; margin-bottom:80px; }
.sec-head h2 { font-size:clamp(2.2rem,4.8vw,3.8rem); line-height:1.1; margin-top:22px; }

/* ---------- Boutons ---------- */
.btn-lux { position:relative; font-family:var(--sans); font-size:.8rem; letter-spacing:.26em;
  text-transform:uppercase; padding:19px 46px; overflow:hidden; border:0; cursor:pointer;
  transition:color .45s, border-color .45s, transform .3s; display:inline-block; }
.btn-fill { background:var(--or); color:var(--noir); font-weight:500; }
.btn-line { border:1px solid var(--hair); color:var(--ivoire); background:transparent; }
.btn-lux::before { content:""; position:absolute; inset:0; background:var(--or-clair);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.7,0,.2,1); z-index:-1; }
.btn-line::before { background:var(--or); }
.btn-lux:hover::before { transform:scaleX(1); }
.btn-fill:hover { color:var(--noir); }
.btn-line:hover { color:var(--noir); border-color:var(--or); }

/* ---------- ÉVÉNEMENTS : galerie horizontale pilotée par le scroll ---------- */
.events-pin { position:relative; overflow:hidden; }
.events-track { display:flex; gap:26px; padding:0 clamp(24px,6vw,80px); width:max-content; align-items:stretch; }
.event-card { position:relative; width:min(420px,78vw); aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--hair-soft); flex-shrink:0; }
.event-card .bg { position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
img.bg { width:100%; height:100%; object-fit:cover; display:block; }
.event-card:hover .bg { transform:scale(1.06); }
.event-card .veil { position:absolute; inset:0; background:linear-gradient(185deg, transparent 30%, rgba(11,10,8,.88) 82%); }
.event-card .ec-body { position:absolute; left:0; right:0; bottom:0; padding:30px; }
.event-card .ec-num { font-family:var(--serif); font-style:italic; color:var(--or); font-size:1.05rem; }
.event-card h3 { font-family:var(--serif); font-weight:500; font-size:2rem; margin:6px 0 6px; }
.event-card p { color:var(--ivoire-2); font-size:.86rem; max-width:300px; }
/* fonds décoratifs "fiesta" en dégradés — aucun fichier image requis */
.bg-mariage { background:
  radial-gradient(60% 45% at 70% 20%, rgba(230,207,154,.35), transparent 70%),
  radial-gradient(70% 60% at 20% 80%, rgba(201,169,98,.22), transparent 65%),
  linear-gradient(160deg,#1c1712,#0d0b08); }
.bg-gala { background:
  radial-gradient(55% 40% at 30% 15%, rgba(201,169,98,.4), transparent 65%),
  repeating-linear-gradient(115deg, rgba(201,169,98,.08) 0 2px, transparent 2px 26px),
  linear-gradient(200deg,#16120c,#0b0a08); }
.bg-anniv { background:
  radial-gradient(45% 35% at 75% 30%, rgba(236,72,153,.24), transparent 70%),
  radial-gradient(50% 45% at 25% 70%, rgba(201,169,98,.26), transparent 65%),
  linear-gradient(150deg,#171017,#0b0a08); }
.bg-corpo { background:
  radial-gradient(55% 45% at 60% 25%, rgba(34,211,238,.15), transparent 70%),
  radial-gradient(60% 50% at 20% 85%, rgba(201,169,98,.2), transparent 65%),
  linear-gradient(170deg,#0f1216,#0b0a08); }
.bg-nye { background:
  radial-gradient(50% 40% at 50% 20%, rgba(230,207,154,.4), transparent 65%),
  radial-gradient(40% 35% at 80% 75%, rgba(124,58,237,.22), transparent 70%),
  linear-gradient(180deg,#14100a,#0b0a08); }
.spark { position:absolute; color:var(--or-clair); font-size:.7rem; opacity:.85; animation:tw 2.6s ease-in-out infinite; }
@keyframes tw { 0%,100%{opacity:.15; transform:scale(.7)} 50%{opacity:.95; transform:scale(1.15)} }

/* ---------- CATALOGUE ---------- */
.filters-bar { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:56px; }
.fpill { font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; padding:12px 24px;
  border:1px solid var(--hair-soft); color:var(--ivoire-2); background:transparent; cursor:pointer;
  transition:all .35s; }
.fpill:hover { border-color:var(--hair); color:var(--ivoire); }
.fpill.active { background:var(--or); border-color:var(--or); color:var(--noir); font-weight:500; }
/* Mobile : filtres compacts + on annule les décalages négatifs (inline) qui se chevauchent */
@media (max-width: 640px) {
  .filters-bar { justify-content:flex-start; gap:8px; margin-bottom:22px; margin-top:6px !important; }
  .fpill { padding:9px 14px; letter-spacing:.12em; font-size:.62rem; }
}
.cat-grid { display:grid; gap:2px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  background:var(--hair-soft); border:1px solid var(--hair-soft); }
.cat-card { background:var(--noir); position:relative; overflow:hidden; display:block; }
.cat-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block;
  filter:saturate(.92); transition:transform 1.2s cubic-bezier(.2,.8,.2,1), filter .5s; }
.cat-card.landscape img { aspect-ratio:3/2; }
.cat-card.strip img { aspect-ratio:1/2.4; object-fit:contain; background:#0e0d0a; }
.cat-card:hover img { transform:scale(1.05); filter:saturate(1.08); }
.cat-card .cc { position:absolute; left:0; right:0; bottom:0; padding:44px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(11,10,8,.92));
  font-family:var(--serif); font-size:1.05rem; }
.cat-card .cc small { display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--or); margin-top:4px; }
.cat-card .use { position:absolute; top:14px; right:14px; opacity:0; transform:translateY(-6px);
  transition:all .35s; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  background:var(--or); color:var(--noir); padding:9px 14px; font-weight:500; }
.cat-card:hover .use { opacity:1; transform:none; }
.cat-card .prem { position:absolute; top:14px; left:14px; font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; padding:7px 12px; background:rgba(11,10,8,.8);
  border:1px solid var(--hair); color:var(--or-clair); backdrop-filter:blur(6px); }
.cat-card .prem.free { color:#9fe8c0; border-color:rgba(126,240,178,.4); }
/* squelettes de chargement AJAX */
.skel { aspect-ratio:2/3; background:linear-gradient(100deg,#12100c 40%,#1a160f 50%,#12100c 60%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.cat-empty { grid-column:1/-1; text-align:center; padding:90px 20px; color:var(--ivoire-2);
  font-family:var(--serif); font-style:italic; font-size:1.4rem; background:var(--noir); }

/* ---------- Footer ---------- */
footer.lux-footer { border-top:1px solid var(--hair-soft); padding:44px 24px 54px; text-align:center;
  color:var(--ivoire-2); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; }
footer.lux-footer a { color:var(--or); margin:0 14px; }
footer.lux-footer a:hover { color:var(--or-clair); }

/* ---------- Reveals ---------- */
.gs-reveal { opacity:0; transform:translateY(46px); }
.no-motion .gs-reveal { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }