/*
 * Fichier CSS unique du projet — Congrès UEMOA 2026.
 * Toute règle globale (police, tailles, couleurs Bénin, composants admin) doit être ajoutée ICI,
 * jamais dans un <style> propre à une page ou dupliquée dans un layout.
 * Inclus à la fois par layouts/app.blade.php (public) et layouts/admin.blade.php (privé).
 */

* { font-family: 'Arial Nova', Arial, Helvetica, sans-serif; }

/* Échelle de police responsive : compacte sur mobile, 24px de base à partir du desktop (≥1024px) */
:root {
    --fs-xs:   14px; --lh-xs:   20px;
    --fs-sm:   15px; --lh-sm:   22px;
    --fs-base: 16px; --lh-base: 24px;
    --fs-lg:   18px; --lh-lg:   26px;
    --fs-xl:   20px; --lh-xl:   28px;
    --fs-2xl:  24px; --lh-2xl:  32px;
    --fs-3xl:  28px; --lh-3xl:  36px;
    --fs-4xl:  32px; --lh-4xl:  40px;
    --fs-5xl:  40px; --lh-5xl:  48px;

    --benin-vert:   #008751;
    --benin-jaune:  #FCD116;
    --benin-rouge:  #E8112D;

    /* Charte officielle 8ème Congrès UEMOA */
    --uemoa-navy:       #02254F;
    --uemoa-navy-dark:  #011833;
    --uemoa-navy-light: #0a3566;
    --uemoa-gold:        #be8e42;
    --uemoa-gold-light:  #F8E092;
}

@media (min-width: 1024px) {
    :root {
        --fs-xs:   18px; --lh-xs:   26px;
        --fs-sm:   20px; --lh-sm:   28px;
        --fs-base: 24px; --lh-base: 34px;
        --fs-lg:   26px; --lh-lg:   36px;
        --fs-xl:   28px; --lh-xl:   38px;
        --fs-2xl:  32px; --lh-2xl:  42px;
        --fs-3xl:  38px; --lh-3xl:  46px;
        --fs-4xl:  44px; --lh-4xl:  52px;
        --fs-5xl:  56px; --lh-5xl:  64px;
    }
}

body { font-size: var(--fs-base); }

.benin-stripe {
    height: 4px;
    background: linear-gradient(to right, #008751 33.3%, #FCD116 33.3% 66.6%, #E8112D 66.6%);
}

[x-cloak] { display: none !important; }

/* ===== Espace admin : menu latéral ===== */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: rgba(186, 210, 255, 0.85);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    position: relative;
}
.nav-item:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}
.nav-item.active {
    background: linear-gradient(90deg, var(--uemoa-gold) 0%, var(--uemoa-gold-light) 100%);
    color: var(--uemoa-navy-dark);
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--benin-rouge);
}
.nav-item.active svg {
    color: var(--uemoa-navy-dark);
}
.nav-section {
    padding: 14px 12px 4px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, 0.55);
}
.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 8px 12px;
}

/* Tableaux admin : texte lisible sur mobile */
@media (max-width: 768px) {
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive table { min-width: 600px; }
}