/* ----------------------------------------------------------
   VARIABLES GLOBALES
---------------------------------------------------------- */
:root {
    --bg-main: #0e1431;
    --bg-section: #070a1a;
    --bg-card: #1a2444;
    --border-card: #1e293b;

    --accent-primary: #38bdf8;      /* bleu vif */
    --accent-secondary: #f97316;    /* orange vif */
    --accent-green: #22c55e;

    --text-main: #e5e7eb;
    --text-muted: #9ca3af;

    --radius-lg: 1.4rem;
    --radius-md: 1rem;

    --shadow-panel: 0 18px 50px rgba(15,23,42,0.85);
    --shadow-card: 0 14px 40px rgba(0,0,0,0.3);
}

/* ----------------------------------------------------------
   BASE + CORRECTION TEXTE NOIR SUR FOND NOIR
---------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at top, #475569 0, #334155 45%, #1e293b 100%) fixed;
    color: var(--text-main); /* force texte global clair */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

/* Texte générique Bootstrap */
body,
p,
li,
span,
td,
th {
    color: var(--text-main);
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    color: #f9fafb;
}

/* Liens */
a {
    color: var(--accent-primary);
    text-decoration: none !important;
}
a:hover {
    text-decoration: underline !important;
}

/* Texte "muted" Bootstrap sur fond sombre */
.text-muted {
    color: var(--text-muted) !important;
}

/* ----------------------------------------------------------
   OVERRIDES BOOTSTRAP LÉGERS (NAV, CARDS, BADGES…)
---------------------------------------------------------- */

/* NAVBAR */
.navbar {
    background: rgba(5, 8, 22, 0.92) !important;
    backdrop-filter: blur(10px);
}
.navbar-brand {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.navbar-nav .nav-link {
    color: var(--text-muted) !important;
    transition: color .2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff !important;
}

/* CARTES Bootstrap (card) utilisé dans ta page PHP */
.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
    color: var(--text-main);
    box-shadow: var(--shadow-card);
}
.soft-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
    color: var(--text-main);
    box-shadow: var(--shadow-card);
}

.container-new {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
    color: var(--text-main);
    box-shadow: var(--shadow-card);
}

.card .card-body {
    color: var(--text-main);
}
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-card);
    color: var(--text-main);
}

/* BREADCRUMB (fil d’Ariane) */
.breadcrumb {
    background-color: transparent;
    margin-bottom: .5rem;
}
.breadcrumb-item a {
    color: var(--accent-primary);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* BADGES (comme dans ton résumé source) */
.badge.text-bg-light {
    background-color: rgba(15,23,42,0.9) !important;
    color: var(--text-main) !important;
    border-color: rgba(148,163,184,.6) !important;
}
.badge.text-bg-secondary {
    background-color: rgba(148,163,184,0.15) !important;
    color: var(--text-main) !important;
}
.badge.text-bg-success {
    background-color: rgba(34,197,94,0.25) !important;
    color: #bbf7d0 !important;
}

/* Pour les anciens bg-light éventuels */
.bg-light,
.text-bg-light {
    background-color: #020617 !important;
    color: var(--text-main) !important;
}

/* BOUTONS */
.btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.4);
    color: var(--text-main);
    padding: .45rem 1rem;
    background: transparent;
}
.btn-ghost:hover {
    border-color: var(--accent-primary);
    color: #fff;
}

.btn-primary-soft {
    border-radius: 999px;
    padding: .7rem 1.6rem;
    border: none;
    font-weight: 600;
    color: #0b1020;
    background: linear-gradient(135deg, var(--accent-primary), #6366f1);
    box-shadow: 0 14px 40px rgba(56,189,248,.3);
}
.btn-primary-soft:hover {
    filter: brightness(1.08);
    box-shadow: 0 18px 50px rgba(56,189,248,.45);
}

/* Ajustement des btn Bootstrap classiques sur fond sombre */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.btn-primary:hover {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
}
.btn-outline-primary {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.btn-outline-primary:hover {
    background-color: var(--accent-primary);
    color: #0b1020;
}
.btn-outline-secondary {
    border-color: rgba(148,163,184,.6);
    color: var(--text-main);
}
.btn-outline-secondary:hover {
    background-color: rgba(148,163,184,.15);
    color: #fff;
}

/* ----------------------------------------------------------
   HERO / TITRES SECTIONS
---------------------------------------------------------- */
.hero {
    padding-top: 7rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(circle at top, rgba(56,189,248,.25), transparent 50%),
        radial-gradient(circle at bottom right, rgba(249,115,22,.25), transparent 55%);
}
.hero-title {
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
}
.hero-title span { color: var(--accent-primary); }
.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 620px;
}
.hero-tagline {
    font-size: .85rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

/* Panel héro (colonne droite page d’accueil) */
.hero-panel {
    background: linear-gradient(145deg, rgba(15,23,42,.95), rgba(15,23,42,.7));
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    border: 1px solid rgba(148,163,184,.3);
    box-shadow: var(--shadow-panel);
}
.hero-panel-title {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-muted);
    margin-bottom: .7rem;
}

/* Étapes héro */
.hero-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.hero-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(56,189,248,.14);
    border: 1px solid rgba(56,189,248,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.hero-step-title {
    font-size: .9rem;
    font-weight: 600;
}
.hero-step-text {
    font-size: .82rem;
    color: var(--text-muted);
}

/* ----------------------------------------------------------
   SECTIONS SOMBRES
---------------------------------------------------------- */
.section-dark {
    background: radial-gradient(circle at top, #1e293b 0, #0f172a 40%, #111827 100%);
    padding: 4rem 0;
}
.section-title {
    font-size: 1.45rem;
    font-weight: 600;
}
.section-subtitle {
    font-size: .95rem;
    color: var(--text-muted);
    max-width: 640px;
}
.pill {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
}

/* PANELS GÉNÉRIQUES RÉUTILISABLES */
.panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-panel);
}
.panel-accent {
    border-image: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) 1;
}

/* ICONES RONDES */
.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}
.icon-circle.blue { background: rgba(56,189,248,.12); color: var(--accent-primary); }
.icon-circle.orange { background: rgba(249,115,22,.12); color: var(--accent-secondary); }
.icon-circle.green { background: rgba(34,197,94,.12); color: var(--accent-green); }

/* TAGS */
.tag {
    font-size: .7rem;
    padding: .25rem .6rem;
    color: var(--text-muted);
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.4);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.tag i { font-size: .9rem; }

/* ----------------------------------------------------------
   GRILLE TARIFS
---------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.pricing-price {
    font-size: 1.8rem;
    font-weight: 700;
}
.pricing-price span {
    font-size: .85rem;
    color: var(--text-muted);
}

/* ----------------------------------------------------------
   PRESTATAIRES COLORÉS
---------------------------------------------------------- */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 1rem;
}
.provider-card {
    border-radius: var(--radius-md);
    padding: 1rem;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.provider-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 60%);
    mix-blend-mode: soft-light;
}
.provider-1 { background: linear-gradient(135deg,#f97316,#ea580c); }
.provider-2 { background: linear-gradient(135deg,#22c55e,#16a34a); }
.provider-3 { background: linear-gradient(135deg,#38bdf8,#0ea5e9); }
.provider-4 { background: linear-gradient(135deg,#8b5cf6,#6366f1); }
.provider-rank {
    position: absolute;
    top: .6rem;
    left: .7rem;
    font-size: .7rem;
    background: rgba(15,23,42,.85);
    padding: .1rem .45rem;
    border-radius:999px;
}

/* ----------------------------------------------------------
   FAQ
---------------------------------------------------------- */
.faq-item {
    border-bottom: 1px solid rgba(55,65,81,.6);
    padding: .9rem 0;
}
.faq-question {
    font-weight: 600;
    font-size: .95rem;
}
.faq-answer {
    color: var(--text-muted);
    font-size: .85rem;
    margin-top: .25rem;
}

/* ----------------------------------------------------------
   ANIMATION SCROLL “REVEAL”
---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all .6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
footer {
    background: #020617;
    border-top: 1px solid #111827;
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: .85rem;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width:991px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .hero { padding-top: 6rem; }
}
@media (max-width:575px) {
    .section-title { font-size: 1.25rem; }
}

 /* Badge numéro */
    .rank-badge {
        position: absolute;
        top: -10px;
        left: -10px;
        background: #f97316;
        color: #fff;
        font-weight: 700;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
        z-index: 15;
        font-size: .95rem;
    }

    /* Couronne */
    .best-crown {
        position: absolute;
        top: -12px;
        right: -12px;
        font-size: 1.8rem;
        color: #facc15;
        text-shadow: 0 0 8px rgba(0,0,0,.2);
        z-index: 15;
    }

    /* Carte générale */
    .host-card {
        position: relative;
        border-radius: 1.2rem;
        border: 1px solid #fed7aa;
        background: var(--card-bg);
        padding: 2rem;
        height: 100%;
        transition: .25s ease;
    }

    .host-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(15,23,42,.12);
    }

    /* Carte mise en avant (o2switch) */
    .host-card.featured {
        border: 2px solid #f59e0b;
        background: #fff1c9;
        box-shadow: 0 25px 55px rgba(250, 204, 21, 0.45);
        transform: scale(1.02);
    }

    .host-card.featured:hover {
        transform: scale(1.025);
        box-shadow: 0 28px 65px rgba(250, 204, 21, 0.55);
    }

    /* Bouton premium */
    .btn-featured {
        background: #f59e0b;
        color: #000;
        font-weight: 600;
    }

    .btn-featured:hover {
        background: #d97706;
        color: #fff;
    }