/* =============================================
   SECTIONS UPDATE — WebRadio.AI
   Style inspiré Vokreo : sections arrondies,
   fond dark entre sections, glassmorphism cards,
   navbar/footer flottants.
   Couleurs : WebRadio.AI (cyan #3ED1E3, dark #0A1628)
   
   À charger APRÈS styles.css / carousel.css
   ============================================= */

/* ───────────────────────────────────────────
   1. VARIABLES
   ─────────────────────────────────────────── */
:root {
    --wr-section-radius: 28px;
    --wr-card-radius: 20px;
    --wr-card-radius-sm: 14px;
    --wr-gap: 12px;
    --wr-bg: #0C1A2E;                         /* fond entre sections */
    --wr-shadow-light: 0 4px 30px rgba(0, 0, 0, 0.08);
    --wr-shadow-dark: 0 8px 50px rgba(0, 0, 0, 0.35);
    --wr-glass: rgba(255, 255, 255, 0.06);
    --wr-glass-border: rgba(255, 255, 255, 0.1);
    --wr-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --wr-cyan: #3ED1E3;
    --wr-cyan-glow: rgba(62, 209, 227, 0.15);
    --wr-ink: #0A1628;
}


/* ───────────────────────────────────────────
   2. BODY — fond sombre entre les sections
   ─────────────────────────────────────────── */
body {
    background: var(--wr-bg) !important;
}


/* ───────────────────────────────────────────
   3. NAVBAR — sticky avec radius
   ─────────────────────────────────────────── */
#mainNavbar,
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 var(--wr-section-radius) var(--wr-section-radius) !important;
}


/* ───────────────────────────────────────────
   4. TOUTES LES SECTIONS — border-radius + marge
   ─────────────────────────────────────────── */
section,
.hero-ultimate,
.hero-section,
.platform-section,
.section-light,
.section-soft,
.section-dark,
.section-tint,
.radio-types-section {
    border-radius: var(--wr-section-radius) !important;
    margin-left: var(--wr-gap) !important;
    margin-right: var(--wr-gap) !important;
    margin-bottom: var(--wr-gap) !important;
    overflow: hidden;
    transition: box-shadow var(--wr-transition);
}

/* Première section — marge top */
section:first-of-type,
.hero-ultimate:first-of-type,
.hero-section:first-of-type {
    margin-top: var(--wr-gap) !important;
}

/* Ombres */
.section-light,
.section-soft,
.section-tint,
.platform-section[style*="background: #fff"],
.platform-section[style*="background:#fff"],
.platform-section[style*="background: linear-gradient(135deg, #f8f9fa"] {
    box-shadow: var(--wr-shadow-light);
}

/* Fonds */
.section-light { background: #fff !important; }
.section-soft { background: #F8FAFC !important; }
.section-tint { background: linear-gradient(180deg, rgba(62, 209, 227, 0.05) 0%, #F8FAFC 100%) !important; }

.section-dark,
.hero-ultimate,
section[style*="background:#000"],
section[style*="background: #000"],
.platform-section[style*="background:#000"],
.platform-section[style*="background: #000"] {
    box-shadow: var(--wr-shadow-dark);
}


/* ───────────────────────────────────────────
   5. HERO — glassmorphism pour les stat-cards
   ─────────────────────────────────────────── */
.hero-ultimate .stat-box,
.hero-ultimate .card-soft,
.hero-ultimate [style*="border-radius: 16px"][style*="background"] {
    background: var(--wr-glass) !important;
    border: 1px solid var(--wr-glass-border) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: var(--wr-card-radius) !important;
    transition: all var(--wr-transition);
}

.hero-ultimate .stat-box:hover,
.hero-ultimate .card-soft:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(62, 209, 227, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(62, 209, 227, 0.12);
}


/* ───────────────────────────────────────────
   6. CARDS — radius harmonisé + hover soigné
   ─────────────────────────────────────────── */
.feature-card,
.card-soft,
.cible-card,
.pilier-card,
.communal-feature-card,
.education-card,
.stat-box,
.demo-form-card,
.avant-apres-card,
.quote-box {
    border-radius: var(--wr-card-radius) !important;
    transition: all var(--wr-transition) !important;
}

.feature-card:hover,
.card-soft:hover,
.cible-card:hover,
.pilier-card:hover,
.communal-feature-card:hover {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1) !important;
}

/* Quote box */
.quote-box {
    border-radius: 0 var(--wr-card-radius-sm) var(--wr-card-radius-sm) 0 !important;
}

/* Cards dans sections dark — glassmorphism */
.section-dark .card-soft,
.section-dark .feature-card,
.section-dark .cible-card,
section[style*="background:#000"] .card-soft,
section[style*="background:#000"] .feature-card {
    background: var(--wr-glass) !important;
    border-color: var(--wr-glass-border) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.section-dark .card-soft:hover,
.section-dark .feature-card:hover,
section[style*="background:#000"] .card-soft:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(62, 209, 227, 0.35) !important;
    box-shadow: 0 14px 44px rgba(62, 209, 227, 0.12) !important;
}


/* ───────────────────────────────────────────
   7. ICON BADGES
   ─────────────────────────────────────────── */
.icon-badge {
    border-radius: var(--wr-card-radius-sm) !important;
    transition: all 0.3s ease;
}

.icon-badge:hover {
    transform: scale(1.08);
    background: rgba(62, 209, 227, 0.18) !important;
}

.feature-icon {
    border-radius: var(--wr-card-radius-sm) !important;
}

.communal-feature-icon {
    border-radius: 50% !important;
}


/* ───────────────────────────────────────────
   8. IMAGES & VISUELS
   ─────────────────────────────────────────── */
.single-image-container,
.animation-wrapper {
    border-radius: var(--wr-card-radius) !important;
    overflow: hidden;
}

.single-feature-image {
    border-radius: var(--wr-card-radius) !important;
}

img[style*="border-radius"] {
    border-radius: var(--wr-card-radius) !important;
}


/* ───────────────────────────────────────────
   9. RADIO CARDS (marquee)
   ─────────────────────────────────────────── */
.radio-card {
    border-radius: var(--wr-card-radius) !important;
}

.carousel-container {
    border-radius: var(--wr-card-radius) !important;
}

.carousel-slide,
.carousel-slide img {
    border-radius: var(--wr-card-radius) !important;
}


/* ───────────────────────────────────────────
   10. DROPDOWN
   ─────────────────────────────────────────── */
.dropdown-menu,
#mainNavbar .nav-dropdown-menu {
    border-radius: var(--wr-card-radius-sm) !important;
}


/* ───────────────────────────────────────────
   11. BOUTONS — transition smooth
   ─────────────────────────────────────────── */
.btn-accent,
.btn-ghost,
.btn-ghost-dark,
.btn-primary-custom,
.btn-hero-primary,
.btn-hero-secondary,
.btn-create-radio,
.btn-outline-custom {
    transition: all var(--wr-transition) !important;
}


/* ───────────────────────────────────────────
   12. FOOTER — radius top + marge
   ─────────────────────────────────────────── */
footer {
    border-radius: var(--wr-section-radius) var(--wr-section-radius) 0 0 !important;
    margin-left: var(--wr-gap) !important;
    margin-right: var(--wr-gap) !important;
    overflow: hidden !important;
}


/* ───────────────────────────────────────────
   13. SCROLLBAR CUSTOM (desktop)
   ─────────────────────────────────────────── */
@media (min-width: 769px) {
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--wr-bg);
    }

    ::-webkit-scrollbar-thumb {
        background: #1E3A5A;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #2A5080;
    }
}


/* ───────────────────────────────────────────
   14. RESPONSIVE
   ─────────────────────────────────────────── */
@media (max-width: 992px) {
    :root {
        --wr-section-radius: 22px;
        --wr-card-radius: 18px;
        --wr-card-radius-sm: 12px;
        --wr-gap: 10px;
    }
}

@media (max-width: 768px) {
    :root {
        --wr-section-radius: 18px;
        --wr-card-radius: 16px;
        --wr-card-radius-sm: 10px;
        --wr-gap: 8px;
    }

    footer {
        border-radius: var(--wr-section-radius) var(--wr-section-radius) 0 0 !important;
        margin-left: var(--wr-gap) !important;
        margin-right: var(--wr-gap) !important;
    }
}

@media (max-width: 576px) {
    :root {
        --wr-section-radius: 16px;
        --wr-card-radius: 14px;
        --wr-card-radius-sm: 8px;
        --wr-gap: 6px;
    }
}


/* ───────────────────────────────────────────
   15. FAQ ACCORDEONS — border-radius
   ─────────────────────────────────────────── */
.accordion-item,
.faq-item {
    border-radius: var(--wr-card-radius-sm) !important;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.accordion-button {
    border-radius: var(--wr-card-radius-sm) !important;
}


/* ───────────────────────────────────────────
   16. PILL BADGES
   ─────────────────────────────────────────── */
.pill {
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ───────────────────────────────────────────
   17. SMOOTH SCROLL
   ─────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}


/* ───────────────────────────────────────────
   18. ANIMATIONS SECTIONS AU SCROLL
   ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    section,
    .hero-ultimate,
    .platform-section,
    .section-light,
    .section-soft,
    .section-dark,
    .section-tint,
    .radio-types-section {
        transition: 
            box-shadow var(--wr-transition),
            transform var(--wr-transition) !important;
    }
}