/* =========================================================
   Les Footix — thème global "vif & festif"
   Surcharge des variables Bootstrap 5.3 (clair + sombre).
   ========================================================= */

:root,
[data-bs-theme="light"] {
    /* Palette festive : bleu vif + or + vert pelouse */
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-warning: #f5b82e;
    --bs-warning-rgb: 245, 184, 46;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;

    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;

    --bs-body-bg: #f4f7fd;
    --bs-body-color: #1b2435;
    --bs-secondary-bg: #eaf0fb;
    --bs-tertiary-bg: #eef3fc;
    --bs-border-color: #dde5f1;

    --bs-border-radius: 0.7rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;

    /* Couleurs de marque réutilisables */
    --footix-gold: #f5b82e;
    --footix-green: #16a34a;
    --footix-navy: #0b1b3b;
    --footix-navy-2: #16356f;
}

[data-bs-theme="dark"] {
    --bs-primary: #5b8bf5;
    --bs-primary-rgb: 91, 139, 245;
    --bs-success: #2bbf6a;
    --bs-success-rgb: 43, 191, 106;
    --bs-warning: #ffc94d;
    --bs-warning-rgb: 255, 201, 77;

    --bs-link-color: #93b4ff;
    --bs-link-color-rgb: 147, 180, 255;
    --bs-link-hover-color: #bcd2ff;

    --bs-body-bg: #0a1733;
    --bs-body-color: #e6ecf8;
    --bs-secondary-bg: #13244a;
    --bs-tertiary-bg: #16284f;
    --bs-border-color: #243a6b;
    --bs-emphasis-color: #ffffff;
}

/* ---------- Typographie ---------- */
body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
        sans-serif;
    background-image: radial-gradient(
            1200px 500px at 100% -10%,
            rgba(var(--bs-primary-rgb), 0.06),
            transparent 60%
        ),
        radial-gradient(
            1000px 460px at -10% 0%,
            rgba(var(--footix-green-rgb, 22, 163, 74), 0.05),
            transparent 55%
        );
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.form-signin-heading {
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ---------- Navbar : dégradé marine de marque ---------- */
.navbar {
    background: linear-gradient(
        90deg,
        var(--footix-navy),
        var(--footix-navy-2)
    ) !important;
    box-shadow: 0 2px 16px rgba(8, 18, 40, 0.22);
    --bs-navbar-color: rgba(255, 255, 255, 0.78);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand {
    font-weight: 800;
}
.navbar .nav-link {
    font-weight: 600;
    position: relative;
}
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--footix-gold);
}
.navbar .dropdown-menu {
    border-radius: 0.7rem;
    box-shadow: 0 10px 30px rgba(8, 18, 40, 0.25);
}
/* Sélecteur de thème intégré au bandeau sombre */
.navbar .form-select {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.navbar .form-select option {
    color: #1b2435;
}

/* ---------- Boutons ---------- */
.btn {
    --bs-btn-font-weight: 600;
    border-radius: 50rem;
    transition: transform 0.08s ease, box-shadow 0.15s ease,
        background-color 0.15s ease;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1b44bf;
    --bs-btn-active-border-color: #1b44bf;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
.btn-success {
    --bs-btn-bg: #16a34a;
    --bs-btn-border-color: #16a34a;
    --bs-btn-hover-bg: #138a3f;
    --bs-btn-hover-border-color: #138a3f;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28);
}
.btn-outline-primary {
    --bs-btn-color: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #1d4ed8;
}

/* ---------- Cartes ---------- */
.card {
    --bs-card-border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 6px 22px rgba(15, 30, 60, 0.07);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 30, 60, 0.12);
}
[data-bs-theme="dark"] .card {
    --bs-card-bg: #122446;
}
.card-header {
    font-weight: 600;
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
/* Liseré doré en haut des cartes "pour bien démarrer" de l'accueil */
.quickstart-cards .card {
    border-top: 3px solid var(--footix-gold);
}

/* ---------- Badges ---------- */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---------- Accordéon (FAQ) ---------- */
.accordion {
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: var(--bs-border-radius-lg);
}
.accordion-button {
    font-weight: 600;
}
.accordion-button:not(.collapsed) {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.intro-faq .accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) !important;
    overflow: hidden;
}

/* ---------- Liens, alertes, tables ---------- */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.alert {
    border-radius: var(--bs-border-radius-lg);
    border: 0;
}
.table {
    --bs-table-border-color: var(--bs-border-color);
}

/* ---------- Drapeaux de langue (accent doré actif) ---------- */
.lang-switcher .lang-flag.active {
    box-shadow: 0 0 0 2px var(--footix-gold);
}

/* ---------- Barres de progression (matchs) ---------- */
.progress {
    border-radius: 50rem;
    overflow: hidden;
}

/* ---------- Avatar dans la navbar ---------- */
.navbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--footix-gold);
    background: var(--bs-secondary-bg);
}