/* ══════════════════════════════════════════════════════════════════
   UNIVERSAL ÉVÉNEMENTS — Direction artistique « Luxe 2027 »
   Feuille appliquée à tout le site par-dessus les styles existants.
   Noir velours · champagne · or métallique — finitions haute couture.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --lx-gold: #c9a96e;
  --lx-champagne: #e8d5b0;
  --lx-gold-deep: #9a7a4a;
  --lx-ink: #0a0908;
  /* Les variables du site sont approfondies : noir plus riche, champagne plus chaud */
  --bg: #0a0908;
  --gold-light: #ecdcb9;
}

/* ════════════════ I. AMBIANCE — noir velours ════════════════ */

/* Grain photographique très subtil (texture papier de luxe) */
html::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .028;
  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 type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vignettage doux : la lumière se concentre au centre, comme en salle */
html::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 2147482999;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 60%, rgba(0, 0, 0, .28) 100%),
    radial-gradient(90% 420px at 50% -60px, rgba(201, 169, 110, .07), transparent 70%);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }

/* ════════════════ II. TYPOGRAPHIE — lettres d'or ════════════════ */

h1, h2, h3, .pack-name, .footer-logo {
  font-feature-settings: "liga" 1, "dlig" 1;
  letter-spacing: .015em;
}

/* Les italiques des grands titres passent en OR MÉTALLIQUE (dégradé dans la lettre) */
:where(.hero-title em, .section-title em, h1 em, h2 em) {
  background-image: linear-gradient(115deg, #f4e7c3 0%, var(--lx-gold) 38%, #8f7142 58%, var(--lx-champagne) 82%, #caa868 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Eyebrows : lueur discrète, tracking couture */
:where(.eyebrow, .hero-eyebrow, .section-eyebrow) {
  letter-spacing: .34em !important;
  text-shadow: 0 0 18px rgba(201, 169, 110, .45);
}

/* ════════════════ III. NAVIGATION — effet verre ════════════════ */

:where(.nav) {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  background: rgba(10, 9, 8, .58) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(201, 169, 110, .18), 0 14px 40px rgba(0, 0, 0, .35);
}

/* ════════════════ IV. COMPOSANTS — écrins & éclats ════════════════ */

/* Sélection de texte & focus — signés or */
::selection { background: rgba(201, 169, 110, .85); color: #0a0908; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(201, 169, 110, .8);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Barre de défilement couture */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0c0b0a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a332a, #27221c);
  border-radius: 8px;
  border: 2px solid #0c0b0a;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--lx-gold-deep), #6e5733); }

/* Liens : soulignement précis */
:where(main, article, section) a:not([class]) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Boutons « or » : dégradé champagne + éclat qui se déplace au survol */
:where(.pack-cta-solid, .btn-gold, .footer-news-btn, .hero-cta, .cta-gold) {
  background-image: linear-gradient(135deg, var(--lx-champagne) 0%, var(--lx-gold) 48%, #b08f58 100%) !important;
  background-size: 160% 160%;
  background-position: 20% 30%;
  box-shadow: 0 6px 24px rgba(201, 169, 110, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-position .5s ease, box-shadow .35s ease, transform .35s ease, filter .35s ease;
}
:where(.pack-cta-solid, .btn-gold, .footer-news-btn, .hero-cta, .cta-gold):hover {
  background-position: 80% 70%;
  box-shadow: 0 10px 34px rgba(201, 169, 110, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: translateY(-1px);
}
:where(.pack-cta-outline, .btn-ghost, .btn-outline):hover {
  box-shadow: 0 4px 22px rgba(201, 169, 110, .18);
}

/* Cartes (packs, articles, partenaires, avis) : écrin — double filet or + levée feutrée */
:where(.pack, .article-card, .partner-card, .avis-card, .option-card) {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .08), 0 10px 34px rgba(0, 0, 0, .35);
}
:where(.pack, .article-card, .partner-card, .option-card):hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 110, .22),
    0 28px 70px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(201, 169, 110, .34),
    0 0 44px rgba(201, 169, 110, .10);
}

/* Le pack vedette (Prestige) respire : halo permanent discret */
:where(.pack-prestige) {
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .18), 0 18px 54px rgba(0, 0, 0, .5), 0 0 36px rgba(201, 169, 110, .08);
}

/* Bande défilante (marquee) : or satiné au lieu d'or plat */
:where(.marquee) {
  background: linear-gradient(100deg, #b08f58 0%, var(--lx-champagne) 30%, var(--lx-gold) 55%, #8f7142 100%) !important;
}

/* Images : révélation lente, cadre discret */
:where(.article-img img, .gallery-item img, .pack img) {
  transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s ease;
}
:where(.article-card:hover .article-img img, .gallery-item:hover img) {
  transform: scale(1.045);
}
:where(.gallery-item, .article-img) { position: relative; }

/* Badges : touche satinée */
:where(.badge) { backdrop-filter: blur(4px); }

/* ════════════════ V. FOOTER — salon feutré ════════════════ */

:where(.footer) {
  border-top: 1px solid rgba(201, 169, 110, .18);
  background-image: radial-gradient(60% 140px at 50% 0, rgba(201, 169, 110, .06), transparent 70%);
}

/* ════════════════ VI. ACCESSIBILITÉ ════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.pack, .article-card, .partner-card, .option-card),
  :where(.pack-cta-solid, .btn-gold, .footer-news-btn) { transition: none; }
}
@media (max-width: 768px) {
  html::before { opacity: .02; }   /* grain encore plus discret sur mobile */
}

/* ════════════════ Mobile : un lien ou mot trop long ne pousse jamais la page ════════════════ */
p a, li a, td a, dd a, address a { overflow-wrap: anywhere; }
