/* =========================================================
   VESPERI — style.css (PROPRE & COMPLET)
   - Mode par défaut : NUIT (fond noir)
   - Mode "Clair" : accessibilité (fond noir + textes plus lisibles)
   - Titres OR plein en "Clair" (pas de milieu sombre)
   ========================================================= */

/* ============ VARIABLES ============ */
:root {
  --color-black: #0B0B0B;
  --color-black-2: #111111;
  --color-gray: #1A1A1A;

  --color-white: #FFFFFF;

  --color-gold: #D4AF37;
  --color-gold-soft: #F4E4A6;

  --text-main: rgba(255,255,255,0.92);
  --text-soft: rgba(255,255,255,0.78);
  --text-muted: rgba(255,255,255,0.62);

  --border-gold: rgba(212,175,55,0.18);
  --border-gold-2: rgba(212,175,55,0.28);

  --shadow-soft: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-gold: 0 0 35px rgba(212,175,55,0.10);

  --radius-xl: 20px;
  --radius-pill: 9999px;
}

/* ============ RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--color-black);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Pour éviter les “effets fantômes” sur du texte copié/collé */
p, li, span, small {
  -webkit-text-fill-color: currentColor;
}

/* ============ TYPO ============ */
.font-display { font-family: 'Playfair Display', serif; }

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 16px;
}

.neon-glow {
  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.25),
    0 0 40px rgba(212, 175, 55, 0.18),
    0 0 60px rgba(212, 175, 55, 0.10);
}

/* Texte “soft” (si tu veux l’utiliser dans le HTML) */
.text-soft { color: var(--text-soft); }
.text-muted { color: var(--text-muted); }

/* ============ NAVBAR ============ */
.nav-blur {
  background: rgba(11, 11, 11, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,175,55,0.10);
}

/* ============ HERO BACKGROUND (sans gros assombrissement au milieu) ============ */
.hero-bg {
  background:
    radial-gradient(ellipse at top, rgba(212,175,55,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(212,175,55,0.04) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.15) 100%),
    var(--color-black);
}

/* ============ GOLD TEXT ============ */
/* Mode nuit : gradient luxe */
.gradient-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============ BUTTONS ============ */
.btn-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, #B8962E 100%);
  color: var(--color-black);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(212,175,55,0.30);
  filter: saturate(1.05);
}

.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.btn-outline:hover {
  background: var(--color-gold);
  color: var(--color-black);
  transform: translateY(-1px);
}

/* Focus visible (clavier) */
.btn-gold:focus,
.btn-outline:focus,
.a11y-btn:focus,
a:focus {
  outline: 2px solid rgba(212,175,55,0.55);
  outline-offset: 3px;
}

/* ============ CARDS ============ */
.card {
  background: linear-gradient(145deg, #1A1A1A 0%, #0F0F0F 100%);
  border: 1px solid rgba(212,175,55,0.10);
  border-radius: var(--radius-xl);
  padding: 32px;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}
.card:hover {
  border-color: rgba(212,175,55,0.30);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.40);
}

.icon-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.05) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(212,175,55,0.20);
}

/* ============ DIVIDER ============ */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.30) 50%, transparent 100%);
  margin: 80px 0;
}

/* ============ ANIMATIONS ============ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.float-animation { animation: float 6s ease-in-out infinite; }

@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

/* ============ LOGO BADGE (cercle premium) ============ */
.vesperi-badge {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.65);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-soft), var(--shadow-gold);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vesperi-badge-img {
  width: 175px;
  height: 175px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* ============ TOGGLE CLAIR / NUIT (icône) ============ */
.a11y-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(212,175,55,0.22);
  background: rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.a11y-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.55);
}
.a11y-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212,175,55,0.20));
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  .vesperi-badge { width: 100px; height: 100px; }
  .vesperi-badge-img { width: 150px; height: 150px; }
}

/* =========================================================
   MODE "CLAIR" (ACCESSIBILITÉ) — FOND RESTE NOIR
   - Ici, "Clair" = texte plus lisible + OR plein sur titres
   - AUCUNE zone blanche
   ========================================================= */
body.a11y-contrast {
  background: var(--color-black) !important;
  color: rgba(255,255,255,0.96) !important;
}

/* Hero : fond noir propre (pas de voile blanc) */
body.a11y-contrast .hero-bg {
  background:
    radial-gradient(ellipse at top, rgba(212,175,55,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(212,175,55,0.03) 0%, transparent 60%),
    var(--color-black) !important;
}

/* Navbar reste noire */
body.a11y-contrast .nav-blur {
  background: rgba(11,11,11,0.92) !important;
  border-bottom: 1px solid rgba(212,175,55,0.16);
}

/* IMPORTANT : Titres OR PLEIN (plus de “milieu sombre”) */
body.a11y-contrast .gradient-gold {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* On réduit les glow qui gênent la lecture */
body.a11y-contrast .neon-glow {
  text-shadow: 0 0 12px rgba(212,175,55,0.18) !important;
}

/* Textes : plus clairs et lisibles */
body.a11y-contrast p,
body.a11y-contrast li,
body.a11y-contrast small,
body.a11y-contrast span {
  color: rgba(255,255,255,0.90) !important;
}

/* Cards : un peu plus “propres” mais toujours noires */
body.a11y-contrast .card {
  background: linear-gradient(145deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%) !important;
  border-color: rgba(212,175,55,0.20) !important;
}

/* Bouton thème doit rester visible */
body.a11y-contrast .a11y-btn {
  background: rgba(0,0,0,0.55);
  border-color: rgba(212,175,55,0.30);
}

/* Badge logo reste premium */
body.a11y-contrast .vesperi-badge {
  background: rgba(0,0,0,0.70);
  border-color: rgba(212,175,55,0.24);
}

/* =========================================================
   OVERRIDES TAILWIND (si tu utilises text-gray-xxx)
   - Le but : éviter les textes trop sombres sur fond noir
   ========================================================= */
body.a11y-contrast .text-white { color: rgba(255,255,255,0.96) !important; }

body.a11y-contrast .text-gray-100 { color: rgba(255,255,255,0.92) !important; }
body.a11y-contrast .text-gray-200 { color: rgba(255,255,255,0.88) !important; }
body.a11y-contrast .text-gray-300 { color: rgba(255,255,255,0.84) !important; }
body.a11y-contrast .text-gray-400 { color: rgba(255,255,255,0.78) !important; }
body.a11y-contrast .text-gray-500 { color: rgba(255,255,255,0.72) !important; }
body.a11y-contrast .text-gray-600 { color: rgba(255,255,255,0.66) !important; }

/* =========================================================
   SÉCURITÉ : pages légales / gros blocs de texte
   - Empêche des classes d'effets (clip/transparent) de rendre le texte illisible
   ========================================================= */
.legal-content,
.legal-content * {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* (Optionnel) Si tu as des blocs type .legal-card */
.legal-card {
  background: linear-gradient(145deg, #1A1A1A 0%, #0F0F0F 100%);
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: var(--radius-xl);
  padding: 24px;
}
/* =========================================================
   FORCE MOBILE — icônes Clair/Nuit visibles (img + svg)
   (met ça TOUT EN BAS du fichier)
   ========================================================= */
@media (max-width: 768px) {

  /* Le bouton (même taille) */
  .a11y-btn {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(212,175,55,0.55) !important;
    box-shadow: 0 0 18px rgba(212,175,55,0.28) !important;
  }

  /* Si c'est une image */
  .a11y-btn img {
    filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 18px rgba(212,175,55,0.55)) !important;
    opacity: 1 !important;
  }

  /* Si c'est un SVG */
  .a11y-btn svg {
    filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 18px rgba(212,175,55,0.55)) !important;
    opacity: 1 !important;
  }

  /* Si le SVG utilise stroke/fill */
  .a11y-btn svg * {
    fill: rgba(244,228,166,1) !important;
    stroke: rgba(244,228,166,1) !important;
  }
}
/* =========================================================
   MOBILE — suppression flèche / indicateur scroll
   ========================================================= */
@media (max-width: 768px) {
  .animate-bounce,
  .scroll-arrow,
  .scroll-indicator,
  .scroll-down,
  .hero-arrow,
  [href="#pourquoi"] svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}