/* ==========================================================================
   Design global — fluide, soft et moderne
   ========================================================================== */

:root {
    --bleu-prpf-dark: #1e5f8e;
    --bleu-prpf: #1e5f8e;
    --bleu-prpf-light: #1e5f8e;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Filet de sécurité : un carrousel, une transition ou un composant tiers
       qui dépasse ponctuellement de quelques pixels ne doit jamais faire
       apparaître un défilement horizontal de toute la page (bande blanche
       visible en glissant vers la droite sur mobile). */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Transitions globales sur les éléments interactifs */
a, button, .btn, .nav-link, .dropdown-toggle {
    transition: all .2s cubic-bezier(.2,.8,.2,1);
}

/* reCAPTCHA badge — toujours visible au-dessus du footer */
.grecaptcha-badge {
    z-index: 9999 !important;
    position: fixed !important;
    bottom: 0 !important;
}

/* Ombres douces réutilisables */
.shadow-soft {
    box-shadow: 0 4px 20px rgba(16, 35, 63, 0.08);
}

.shadow-soft-hover:hover {
    box-shadow: 0 8px 30px rgba(16, 35, 63, 0.12);
}

/* Effet de survol doux pour les cartes */
.card, .news-card, .publication-card, .carte {
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover, .news-card:hover, .publication-card:hover, .carte:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(16, 35, 63, 0.1);
}

/* Boutons */
.btn {
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Inputs */
.form-control, .champ__input, input[type="text"], input[type="email"], input[type="password"], textarea {
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control:focus, .champ__input:focus, input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(27, 108, 168, 0.1);
    border-color: #1e5f8e;
}

/* Navigation */
.navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.navbar.navbar--hidden {
    transform: translateY(-100%);
}

.navbar.navbar--visible {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.nav-link {
    position: relative;
    font-weight: 500;
}

.nav-link.dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #FFD100;
    transition: width .3s cubic-bezier(.2,.8,.2,1);
    border-radius: 0;
}

.nav-item.dropdown:hover .nav-link.dropdown-toggle::after,
.nav-item.dropdown.show .nav-link.dropdown-toggle::after {
    width: 100%;
}

/* Dropdown megamenu */
.dropdown-menu.megamenu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(16, 35, 63, 0.12);
    padding: 24px;
    margin-top: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
    animation: fadeInDown .25s ease;
    width: 900px;
    max-width: 95vw;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: visible;
}

.megamenu .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    align-items: flex-start;
}

.megamenu .row > div,
.megamenu .row > div.col-md-6,
.megamenu-col {
    flex: 1 1 0 !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
    min-width: 0;
}

.megamenu.megamenu--cols-1 .row > div,
.megamenu.megamenu--cols-1 .megamenu-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.megamenu.megamenu--cols-2 .row > div,
.megamenu.megamenu--cols-2 .megamenu-col {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
}

.megamenu.megamenu--cols-3 .row > div,
.megamenu.megamenu--cols-3 .megamenu-col {
    flex: 0 0 calc(33.333% - 22px) !important;
    max-width: calc(33.333% - 22px) !important;
}

.megamenu.megamenu--cols-4 .row > div,
.megamenu.megamenu--cols-4 .megamenu-col {
    flex: 0 0 calc(25% - 24px) !important;
    max-width: calc(25% - 24px) !important;
}

.megamenu.megamenu--cols-5 .row > div,
.megamenu.megamenu--cols-5 .megamenu-col {
    flex: 0 0 calc(20% - 26px) !important;
    max-width: calc(20% - 26px) !important;
}

.megamenu .row > div > strong,
.megamenu-col > strong {
    display: block;
    margin-bottom: 16px;
    font-weight: 600;
    color: #10233F;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 2px solid #E5E7EB;
}

.megamenu .row > div > ul,
.megamenu-col > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu .row > div > ul li,
.megamenu-col > ul li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.megamenu .row > div > ul li a,
.megamenu-col > ul li a {
    color: #4B5563;
    text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.25s ease;
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    position: relative;
}

.megamenu .row > div > ul li a:hover,
.megamenu-col > ul li a:hover {
    color: #1e5f8e;
    background: #F0F9FF;
    padding-left: 12px;
    transform: translateX(2px);
}

/* Les boutons pastille rouges du méga-menu (ex. « Tous
   les documents sur la dette publique ») ont un texte blanc fixé en style
   inline — la règle générique ci-dessus leur imposait quand même un fond
   presque blanc (#F0F9FF) au survol, texte blanc sur fond quasi blanc étant
   alors illisible. Ces boutons gardent leur propre survol (fond rouge
   assombri, texte toujours blanc) au lieu d'hériter du survol des simples
   liens de menu. */
.megamenu .row > div > ul li a.btn:hover {
    color: #ffffff;
    background: #b91a22;
    padding-left: 8px;
    transform: none;
}

.megamenu-col + .megamenu-col,
.megamenu .row > div + div {
    position: relative;
}

.megamenu-col + .megamenu-col::before,
.megamenu .row > div + div::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #E5E7EB 20%, #E5E7EB 80%, transparent);
}

@media (max-width: 992px) {
    .dropdown-menu.megamenu {
        width: 600px;
        max-width: 95vw;
    }

    .megamenu.megamenu--cols-3 .row > div,
    .megamenu.megamenu--cols-3 .megamenu-col,
    .megamenu.megamenu--cols-4 .row > div,
    .megamenu.megamenu--cols-4 .megamenu-col,
    .megamenu.megamenu--cols-5 .row > div,
    .megamenu.megamenu--cols-5 .megamenu-col {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }

    .megamenu-col + .megamenu-col::before,
    .megamenu .row > div + div::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .dropdown-menu.megamenu {
        width: 100%;
        max-width: 100%;
    }

    .megamenu .row > div,
    .megamenu .row > div.col-md-6,
    .megamenu-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 992px) {
    .dropdown-menu.megamenu {
        width: 600px;
        max-width: 95vw;
    }

    .megamenu .row > div,
    .megamenu .row > div.col-md-6,
    .megamenu-col {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }

    .megamenu-col + .megamenu-col::before,
    .megamenu .row > div + div::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .dropdown-menu.megamenu {
        width: 100%;
        max-width: 100%;
    }

    .megamenu .row > div,
    .megamenu .row > div.col-md-6,
    .megamenu-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.site-footer {
    background: linear-gradient(180deg, #EEF1F5 0%, #E4E8ED 100%);
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.pied-lettre {
    position: relative;
    z-index: 1;
}

/* Cartes et conteneurs */
.carte, .news-card, .publication-card, .card {
    border-radius: 16px;
    border: 1px solid rgba(16, 35, 63, 0.06);
    background: #ffffff;
}

/* Scrollbar douce */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Images */
img {
    transition: opacity .3s ease;
}

/* Focus visible pour l'accessibilité */
:focus-visible {
    outline: 2px solid #1e5f8e;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sélection de texte */
::selection {
    background: rgba(210, 31, 40, 0.12);
    color: #10233F;
}

/* Effet coulissant pour la navbar au scroll */
@media (min-width: 992px) {
    .navbar-collapse {
        transition: max-height .3s ease;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .navbar-collapse {
        background: linear-gradient(180deg, #1e5f8e 0%, #1e5f8e 100%);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 20px 60px rgba(16, 35, 63, 0.12);
    }
}

@media (max-width: 576px) {
    .btn {
        border-radius: 8px;
    }
}

/* Section lettre d'information - Accueil */
.home-newsletter {
    padding: 20px 0 40px;
}

.home-newsletter .newsletter-card {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(27, 108, 168, 0.08);
    box-shadow: 0 12px 32px rgba(16, 35, 63, 0.06);
    padding: 40px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-newsletter .newsletter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(27, 108, 168, 0.10);
}

.home-newsletter .newsletter-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1e5f8e, #1e5f8e);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: none;
}

.home-newsletter .newsletter-content h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #10233F;
    margin: 0 0 6px;
}

.home-newsletter .newsletter-content p {
    color: #6B7280;
    font-size: 0.95rem;
    margin: 0;
    max-width: 420px;
}

.home-newsletter .newsletter-form {
    display: flex;
    gap: 10px;
    flex: none;
}

.home-newsletter .newsletter-form input[type="email"] {
    background: #F5F7FA;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.95rem;
    min-width: 280px;
}

.home-newsletter .newsletter-form button {
    background: #1e5f8e;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 14px 22px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity .2s ease;
}

.home-newsletter .newsletter-form button:hover {
    opacity: 0.92;
}

@media (max-width: 991px) {
    .home-newsletter .newsletter-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .home-newsletter .newsletter-form {
        width: 100%;
    }

    .home-newsletter .newsletter-form input[type="email"] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .home-newsletter .newsletter-form {
        flex-direction: column;
    }

    .home-newsletter .newsletter-form button {
        width: 100%;
        justify-content: center;
    }
}


/* ── Boutons des pages de l'espace abonné ─────────────────────────────────
   btn--principal / btn--secondaire n'existaient que dans la feuille de
   l'administration : sur le site public (connexion abonné, lien de
   connexion, mot de passe, préférences), ces boutons s'affichaient comme
   du simple texte. */
.btn.btn--principal,
.btn.btn--secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn.btn--principal {
    background: linear-gradient(135deg, #1e5f8e, #164c7a);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(30, 95, 142, .25);
}
.btn.btn--principal:hover,
.btn.btn--principal:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(30, 95, 142, .32);
}
.btn.btn--secondaire {
    background: #fff;
    color: #10233f;
    border: 1px solid #d5dde8;
}
.btn.btn--secondaire:hover,
.btn.btn--secondaire:focus-visible {
    color: #10233f;
    background: #f4f7fb;
    border-color: #b9c6d6;
}