:root {
    --primary-bg: #06030f;
    --primary-gradient: #06030f;
    --text-main: #f8f8f8;
    --text-muted: #a0a0a0;
    --accent-gold: #d4af37;
    --accent-gold-bright: #ffd700;
    --accent-pink: #ff2a6d;
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--primary-gradient);
    background-color: var(--primary-bg);
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Background Effects — starfield dense CSS-only, appliqué à TOUTES les pages via body::before */
.stars, .twinkling, #stars-bg { display: none !important; }

body::before {
    content: '';
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -2;
    background-color: transparent;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 8%,  #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 27% 18%, rgba(255,255,255,.85), transparent 55%),
        radial-gradient(1.5px 1.5px at 45% 6%,  #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 62% 22%, rgba(255,255,255,.7),  transparent 55%),
        radial-gradient(1.2px 1.2px at 78% 10%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 88% 24%, rgba(255,255,255,.8),  transparent 55%),
        radial-gradient(1.3px 1.3px at 7%  34%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 22% 46%, rgba(255,255,255,.75), transparent 55%),
        radial-gradient(1.5px 1.5px at 38% 38%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 55% 52%, rgba(255,255,255,.7),  transparent 55%),
        radial-gradient(1.2px 1.2px at 72% 42%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 85% 56%, rgba(255,255,255,.8),  transparent 55%),
        radial-gradient(1.4px 1.4px at 15% 64%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 32% 76%, rgba(255,255,255,.7),  transparent 55%),
        radial-gradient(1.2px 1.2px at 48% 68%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 65% 82%, rgba(255,255,255,.75), transparent 55%),
        radial-gradient(1.5px 1.5px at 80% 72%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 93% 88%, rgba(255,255,255,.85), transparent 55%),
        radial-gradient(1.2px 1.2px at 5%  92%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 28% 94%, rgba(255,255,255,.7),  transparent 55%),
        radial-gradient(1.4px 1.4px at 50% 88%, #ffffff, transparent 55%),
        radial-gradient(1px   1px   at 68% 96%, rgba(255,255,255,.8),  transparent 55%);
    background-size: 280px 280px, 240px 240px, 320px 320px, 260px 260px,
                     300px 300px, 220px 220px, 260px 260px, 300px 300px,
                     280px 280px, 240px 240px, 260px 260px, 300px 300px,
                     280px 280px, 320px 320px, 260px 260px, 240px 240px,
                     300px 300px, 280px 280px, 260px 260px, 320px 320px,
                     280px 280px, 260px 260px;
    background-repeat: repeat;
}

body::after {
    content: '';
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 14%, #fff7d1, transparent 50%),
        radial-gradient(2px   2px   at 58% 28%, #d4af37, transparent 50%),
        radial-gradient(1.5px 1.5px at 82% 48%, #ffffff, transparent 50%),
        radial-gradient(1.5px 1.5px at 36% 66%, #e8c56d, transparent 50%),
        radial-gradient(2px   2px   at 74% 82%, #ffffff, transparent 50%),
        radial-gradient(1.5px 1.5px at 12% 88%, #fff, transparent 50%);
    background-size: 600px 600px, 800px 800px, 700px 700px, 650px 650px, 750px 750px, 720px 720px;
    background-repeat: repeat;
    animation: hbl-twinkle 6s ease-in-out infinite;
}

@keyframes hbl-twinkle {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 100003;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo img {
    height: 60px;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    transition: color 0.3s ease, background 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.menu a:not(.btn-outline):hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.06);
}

.menu .btn-outline {
    border: 1px solid var(--accent-gold);
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--accent-gold) !important;
    margin-left: 0.4rem;
    background: transparent;
    box-shadow: 0 0 12px rgba(212,175,55,0.15);
    transition: all 0.3s ease;
}

.menu .btn-outline:hover {
    background: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 20px rgba(212,175,55,0.4);
    transform: translateY(-1px);
}

/* ── Dropdown nav ── */
.nav-dropdown {
    position: relative;
}
.nav-dropdown > .nav-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
}
.nav-dropdown > .nav-btn:hover,
.nav-dropdown.open > .nav-btn {
    color: var(--text-main);
    background: rgba(255,255,255,0.06);
}
.nav-dropdown > .nav-btn .caret {
    font-size: 0.55rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
    display: inline-block;
}
.nav-dropdown.open > .nav-btn .caret { transform: rotate(180deg); }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    padding-top: 10px; /* bridge invisible pour éviter le gap */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 10, 20, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0.5rem;
    min-width: 180px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.06);
    z-index: 100010;
    animation: dropIn 0.18s cubic-bezier(0.22, 0.68, 0, 1.4) forwards;
}
@keyframes dropIn {
    from { opacity:0; transform: translateX(-50%) translateY(-4px) scale(0.97); }
    to   { opacity:1; transform: translateX(-50%) translateY(0)    scale(1); }
}
.nav-dropdown.open .dropdown-menu { display: block; }

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(240,240,240,0.6);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.dropdown-menu a:hover {
    background: rgba(212,175,55,0.08);
    color: #d4af37;
}
.dropdown-menu a .dm-icon { font-size: 0.95rem; flex-shrink: 0; }
.dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.35rem 0.5rem;
}

/* Mobile: dropdowns become flat links */
@media (max-width: 860px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown > .nav-btn {
        width: 100%;
        font-size: 1rem;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .dropdown-menu {
        display: block;
        position: static;
        transform: none;
        background: rgba(255,255,255,0.02);
        border: none;
        border-radius: 0;
        box-shadow: none;
        animation: none;
        padding: 0 0 0 1.2rem;
    }
    .dropdown-menu a {
        font-size: 0.9rem;
        padding: 0.6rem 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
}

/* ── Hamburger button ── */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
    border: none;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
    z-index: 100002;
}
.hamburger:hover { background: rgba(255,255,255,0.1); }
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
    .menu a { font-size: 0.78rem; padding: 0.3rem 0.5rem; }
}

@media (max-width: 860px) {
    .hamburger { display: flex; }

    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(10, 10, 15, 0.97);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-left: 1px solid rgba(255,255,255,0.08);
        padding: 5rem 1.5rem 2rem;
        transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
        z-index: 100001;
    }

    .menu.open { right: 0; }

    .menu a {
        width: 100%;
        font-size: 1rem;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .menu .btn-outline {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        border-radius: 12px;
    }

    /* Overlay backdrop */
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 100000;
    }
    .nav-overlay.open { display: block; }
}

/* Hero Section */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.hero-content {
    max-width: 800px;
}

.glow-text {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
    animation: float 6s ease-in-out infinite;
}

.subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-weight: 300;
    line-height: 1.6;
}

/* Buttons */
.btn {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-primary {
    background: linear-gradient(45deg, var(--accent-gold), #ffd700);
    color: #000;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.glow-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.glow-btn:hover::before {
    opacity: 1;
    transform: scale(1);
    animation: flash 1s ease-out;
}

.glow-btn:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 0 60px rgba(255, 42, 109, 0.2);
    transform: translateY(-3px);
}

/* Cards Section */
.cards-section {
    padding: 5rem 5%;
    position: relative;
    z-index: 10;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    font-weight: 600;
    color: var(--accent-gold);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
    position: relative;
    overflow: hidden;
}

.profile-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.profile-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
}

.profile-card p {
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.7;
}

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,42,109,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.profile-card:hover .card-glow {
    width: 300px;
    height: 300px;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

@keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; filter: brightness(1.5); }
    100% { opacity: 0; }
}

/* Particle Layer Styling */
#particle-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(1px);
    animation: particle-float var(--dur) ease-in-out infinite;
    opacity: 0.3;
}

@keyframes particle-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(var(--tx), var(--ty)); }
}

@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 42, 109, 0.2); transform: scale(1); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); transform: scale(1.02); }
}

/* Calculator specific styles */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}
input[type=range].custom-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
input[type=range].custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
input[type=range].custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--accent-gold);
    margin-top: -8px;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
    cursor: pointer;
}
.hide { display: none !important; }

.dual-slider-wrapper {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.slider-track-highlight {
  position: absolute;
  height: 4px;
  background: var(--accent-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  border-radius: 2px;
  top: 0;
  z-index: 1;
}
input[type=range].gemini-slider {
  position: absolute;
  top: -8px;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
input[type=range].gemini-slider::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  cursor: pointer;
}
input[type=range].gemini-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}

/* ══════════════════════════════════════════════════════════════
   OPTIMISATIONS MOBILE — Humbolo TIME
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Nav : logo compact ────────────────────────────────────── */
  nav {
    padding: 0.6rem 4%;
    gap: 0.5rem;
  }

  .logo a, .logo span, nav > a:first-child {
    font-size: 1.15rem !important;
    white-space: nowrap;
    line-height: 1 !important;
  }

  /* ── Barre de recherche : icône seule sur mobile ─────────── */
  #search-trigger {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.82rem !important;
    gap: 0 !important;
    flex-shrink: 0;
  }

  /* Cacher le texte "Rechercher" et le badge Ctrl K */
  #search-trigger .btn-search-label,
  #search-trigger .kbd {
    display: none !important;
  }

  /* Garder juste l'emoji loupe, touche tactile ≥ 44px */
  #search-trigger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;
  }

  /* Supprimer le badge Ctrl K dans la modale de recherche */
  .sf-hint { display: none !important; }

  /* ── Touch targets : hamburger ────────────────────────────── */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Hero text scaling ────────────────────────────────────── */
  .glow-text {
    font-size: clamp(2.4rem, 10vw, 4.5rem);
    animation: none; /* désactive le float sur mobile = perf */
  }

  .subtitle {
    font-size: clamp(0.9rem, 4vw, 1.3rem);
    margin-bottom: 1.8rem;
  }

  /* ── Cards section ────────────────────────────────────────── */
  .cards-section { padding: 3rem 4%; }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .profile-card {
    padding: 1.6rem 1.2rem;
  }

  .profile-card:hover {
    /* Désactiver l'effet de hover sur mobile (finger tap) */
    transform: none;
    box-shadow: none;
  }

  /* ── Section titre ────────────────────────────────────────── */
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    margin-bottom: 2rem;
  }

  /* ── Calculateur : régions — grille 2 colonnes sur mobile ── */
  /* Classe appliquée par index.html pour les boutons de régions */
  .region-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Boutons génériques : touch target minimum */
  button, .btn, [role="button"] {
    min-height: 40px;
  }
}

/* ── Très petits écrans (< 390px) ──────────────────────────── */
@media (max-width: 390px) {
  nav { padding: 0.5rem 3%; }

  .logo a, .logo span {
    font-size: 1rem !important;
  }

  #search-trigger {
    padding: 0.4rem 0.6rem !important;
  }
}

/* ── Cookie banner : z-index et positionnement ───────────────── */
#cookie-banner {
  z-index: 9999 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
  max-height: 35vh;
  overflow-y: auto;
}

@media (max-width: 860px) {
  #cookie-banner {
    font-size: 0.82rem !important;
    padding: 0.9rem 1rem !important;
    border-radius: 12px 12px 0 0 !important;
  }

  #cookie-banner button {
    min-height: 44px;
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* ── Article pages : lecture mobile ──────────────────────────── */
@media (max-width: 860px) {
  article, .article-body, .prose {
    font-size: 1rem;
    line-height: 1.75;
    padding: 0 1rem;
  }

  /* Stat boxes / blockquotes dans les articles */
  .stat-box, blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px;
  }

  /* Floating share bar → version compacte */
  .share-bar, #floating-share {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.4rem !important;
    padding: 0.6rem !important;
  }

  .share-bar button, #floating-share button {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.7rem !important;
  }
}

/* ── Masquer les animations lourdes sur mobile ─────────────────── */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .twinkling {
    animation-duration: 600s; /* ralentir pour économiser batterie */
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}