/* ==========================================================================
   Charte graphique — Système de validation dynamique et de certification
   Inspirée du drapeau de la République Démocratique du Congo :
   bleu ciel (champ), bande diagonale rouge liserée d'or, étoile d'or.
   Ce fichier est chargé APRÈS Bootstrap (voir templates/base.html) : les
   règles ci-dessous priment donc sur les styles Bootstrap par défaut sans
   nécessiter de !important, à quelques exceptions près (précisées en
   commentaire) où la spécificité de Bootstrap l'exige.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette et variables
   -------------------------------------------------------------------------- */
:root {
    --rdc-bleu: #0a5dc2;
    --rdc-bleu-fonce: #063a7a;
    --rdc-bleu-nuit: #071c36;
    --rdc-rouge: #ce1021;
    --rdc-rouge-fonce: #9c0c19;
    --rdc-or: #f7d618;
    --rdc-or-fonce: #b89400;
    --rdc-vert: #1e8a5f;
    --rdc-vert-fonce: #146042;
    --rdc-anthracite: #1b2430;
    --rdc-gris-texte: #5a6472;
    --rdc-gris-bordure: #e2e6ed;
    --rdc-gris-fond: #f4f6fb;

    --ombre-douce: 0 2px 12px rgba(7, 28, 54, 0.07);
    --ombre-moyenne: 0 10px 28px rgba(7, 28, 54, 0.12);
    --rayon: 0.7rem;
    --rayon-lg: 1rem;
}

/* --------------------------------------------------------------------------
   2. Typographie et fond général
   -------------------------------------------------------------------------- */
html, body {
    height: 100%;
}
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--rdc-gris-fond) !important;
    color: var(--rdc-anthracite);
    -webkit-font-smoothing: antialiased;
    /* Mise en page en colonne flexible : le contenu (.content-shell) s'étire
       pour occuper l'espace disponible, ce qui garde le pied de page collé
       en bas de l'écran même quand une page a peu de contenu. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--rdc-bleu-nuit);
    letter-spacing: -0.01em;
}

a {
    color: var(--rdc-bleu);
}
a:hover {
    color: var(--rdc-bleu-fonce);
}

::selection {
    background: var(--rdc-or);
    color: var(--rdc-bleu-nuit);
}

/* Barre de défilement (navigateurs Webkit/Blink) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rdc-gris-fond); }
::-webkit-scrollbar-thumb { background: #c3ccd9; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--rdc-bleu); }

/* Contour d'accessibilité au clavier, cohérent avec la charte */
:focus-visible {
    outline: 3px solid var(--rdc-or);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Barre de navigation
   -------------------------------------------------------------------------- */

/* Regroupe la barre bleue, le liseré tricolore et la barre claire de menu
   dans un seul bloc "collant" : les trois éléments restent visibles
   ensemble en haut de l'écran pendant le défilement vertical, sans avoir
   besoin de compenser la hauteur ailleurs (le bloc reste dans le flux tant
   que la page n'a pas défilé jusqu'à lui). */
.app-header-fixe {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-rdc {
    background: linear-gradient(100deg, var(--rdc-bleu-nuit) 0%, var(--rdc-bleu-fonce) 55%, var(--rdc-bleu) 100%) !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c8, var(--rdc-or) 60%, var(--rdc-or-fonce) 100%);
    color: var(--rdc-bleu-nuit);
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px rgba(247, 214, 24, 0.18);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

/* Logo configurable (Configuration > Général) en remplacement de l'étoile
   par défaut : mêmes cercles que .brand-mark/.auth-visual-star. Positionné
   en absolu (plutôt qu'en simple width/height:100%) car ces conteneurs sont
   des flexbox : un <img> y garde par défaut sa taille intrinsèque comme
   taille minimale (bug classique « min-width:auto » des éléments remplacés
   en flexbox), ce qui le laissait déborder du cercle malgré le
   width/height:100% posé directement dessus. Sorti du flux flex par
   position:absolute, il se dimensionne uniquement par rapport au cercle
   (voir logo_systeme, exposé par
   apps.administration.context_processors.logo_systeme). */
.brand-mark img,
.auth-visual-star img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.navbar-brand {
    padding: 0;
    min-width: 0;
    overflow: hidden;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.brand-title {
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Sélecteur de langue, dans la barre bleue (voir base.html). */
.selecteur-langue {
    width: auto;
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.selecteur-langue option {
    color: var(--rdc-anthracite);
}
.selecteur-langue:focus {
    border-color: var(--rdc-or);
    box-shadow: 0 0 0 0.2rem rgba(247, 214, 24, 0.25);
}

/* Avatar utilisateur (barre bleue) et son menu déroulant. */
.avatar-bouton {
    padding: 0;
    border: none;
    background: transparent;
}
.avatar-bouton::after {
    display: none; /* pas de chevron Bootstrap : l'avatar suffit comme déclencheur */
}
.avatar-img,
.avatar-initiales {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rdc-bleu-nuit);
    background: radial-gradient(circle at 35% 30%, #fff6c8, var(--rdc-or) 60%, var(--rdc-or-fonce) 100%);
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.avatar-menu {
    border: 1px solid var(--rdc-gris-bordure);
    border-radius: 0.65rem;
    box-shadow: var(--ombre-moyenne);
    min-width: 14rem;
    padding: 0.4rem;
    margin-top: 0.6rem;
}
.avatar-menu .dropdown-header {
    color: var(--rdc-bleu-nuit);
    font-weight: 700;
}
.avatar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
}
.avatar-menu .dropdown-item:hover {
    background-color: #eef4fc;
    color: var(--rdc-bleu-fonce);
}

/* Bouton d'aide « ? » (barre de navigation), voir templates/base.html. */
.aide-bouton {
    padding: 0.3rem 0.55rem;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    border-radius: 50%;
}
.aide-bouton:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Cloche de notification (barre de navigation), voir templates/base.html. */
.cloche-bouton {
    padding: 0.3rem 0.5rem;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
}
.cloche-bouton::after {
    display: none; /* pas de chevron Bootstrap sur la cloche */
}
.cloche-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.62rem;
    padding: 0.22em 0.42em;
}
.cloche-menu {
    border: 1px solid var(--rdc-gris-bordure);
    border-radius: 0.65rem;
    box-shadow: var(--ombre-moyenne);
    width: 22rem;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.4rem;
    margin-top: 0.6rem;
}
.cloche-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    white-space: normal;
}
.cloche-item:hover {
    background-color: #eef4fc;
}
.cloche-item-non-lue {
    background-color: #f5f9ff;
    border-left: 3px solid var(--rdc-bleu);
}
.cloche-item-titre {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--rdc-bleu-nuit);
}
.cloche-item-message {
    font-size: 0.8rem;
    color: #495057;
}
.cloche-item-date {
    font-size: 0.72rem;
    color: #8a93a0;
}

/* Aperçu de l'avatar sur la page "Paramètres du compte". */
.avatar-apercu {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.avatar-initiales-apercu {
    background: radial-gradient(circle at 35% 30%, #fff6c8, var(--rdc-or) 60%, var(--rdc-or-fonce) 100%);
    color: var(--rdc-bleu-nuit);
    font-size: 1.6rem;
    font-weight: 800;
}

.btn-logout {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    font-weight: 500;
}
.btn-logout:hover {
    background: var(--rdc-rouge) !important;
    border-color: var(--rdc-rouge) !important;
}

.navbar-rdc .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}
.navbar-rdc .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bande décorative tricolore sous la barre de navigation, clin d'œil discret
   au drapeau (bleu / rouge / or) sans reproduire l'emblème officiel. */
.flag-stripe {
    height: 5px;
    background: linear-gradient(90deg,
        var(--rdc-bleu) 0%, var(--rdc-bleu) 60%,
        var(--rdc-or) 60%, var(--rdc-or) 68%,
        var(--rdc-rouge) 68%, var(--rdc-rouge) 100%);
}
.flag-stripe-thin { height: 3px; opacity: 0.85; }

/* Barre claire dédiée au menu applicatif, sous la barre bleue et la bande
   tricolore : sépare clairement l'identité de l'application (bleu) de la
   navigation courante (claire), plus lisible sur un grand nombre de liens. */
.navbar-menu {
    background-color: #fff;
    border-bottom: 1px solid var(--rdc-gris-bordure);
    box-shadow: var(--ombre-douce);
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-menu .navbar-nav {
    gap: 0.15rem;
    flex-wrap: wrap;
}
.navbar-menu .nav-link {
    color: var(--rdc-gris-texte) !important;
    font-weight: 600;
    font-size: 0.87rem;
    padding: 0.75rem 0.9rem !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.navbar-menu .nav-link:hover,
.navbar-menu .nav-link:focus {
    color: var(--rdc-bleu) !important;
    background-color: #f4f8fd;
}
.navbar-menu .nav-link.active {
    color: var(--rdc-bleu) !important;
    border-bottom-color: var(--rdc-bleu);
    background-color: #eef4fc;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .navbar-menu .navbar-collapse {
        padding: 0.6rem 0 0.9rem;
    }
    .navbar-menu .nav-link {
        border-bottom: none;
        border-left: 3px solid transparent;
        border-radius: 0 0.5rem 0.5rem 0;
    }
    .navbar-menu .nav-link.active {
        border-left-color: var(--rdc-bleu);
    }
}

/* Sous-menus déroulants : chaque module principal (Dossiers, Certification,
   Paiements, Administration) regroupe ses écrans secondaires dans un menu
   déroulant Bootstrap plutôt que de les afficher tous au même niveau. */
.navbar-menu .dropdown-toggle::after {
    margin-left: 0.35rem;
    vertical-align: 0.15em;
}
.navbar-menu .dropdown-menu {
    border: 1px solid var(--rdc-gris-bordure);
    border-radius: 0.65rem;
    box-shadow: var(--ombre-moyenne);
    padding: 0.4rem;
    margin-top: 0.4rem;
}
.navbar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--rdc-anthracite);
}
.navbar-menu .dropdown-item i {
    color: var(--rdc-bleu);
    width: 1.1rem;
    text-align: center;
}
.navbar-menu .dropdown-item:hover,
.navbar-menu .dropdown-item:focus {
    background-color: #eef4fc;
    color: var(--rdc-bleu-fonce);
}
.navbar-menu .dropdown-item.active {
    background-color: var(--rdc-bleu);
    color: #fff;
}
.navbar-menu .dropdown-item.active i {
    color: #fff;
}
.navbar-menu .dropdown-divider {
    border-color: var(--rdc-gris-bordure);
    margin: 0.35rem 0.25rem;
}

@media (min-width: 992px) {
    /* Petite flèche visuelle reliant le menu déroulant à son déclencheur */
    .navbar-menu .dropdown-menu {
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-menu .dropdown-menu {
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--rdc-gris-bordure);
        border-radius: 0;
        margin: 0.15rem 0 0.4rem 1.6rem;
        padding: 0.2rem 0 0.2rem 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   4. Mise en page générale
   -------------------------------------------------------------------------- */
.content-shell {
    padding-top: 1.75rem;
    /* S'étire pour occuper l'espace restant sous les barres de navigation,
       ce qui repousse .app-footer en bas de l'écran (voir body en flexbox
       plus haut) même sur les pages avec peu de contenu. */
    flex: 1 0 auto;
    width: 100%;
}

.lien-retour {
    margin-bottom: 1.1rem;
}
.lien-retour .btn-link {
    font-weight: 600;
    color: var(--rdc-bleu);
}
.lien-retour .btn-link:hover {
    color: var(--rdc-bleu-fonce);
}

.app-footer {
    margin-top: 4rem;
    background: #fff;
    border-top: 1px solid var(--rdc-gris-bordure);
    flex-shrink: 0;
}
.app-footer .container {
    color: var(--rdc-gris-texte);
}

/* --------------------------------------------------------------------------
   5. Cartes
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--rdc-gris-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-douce);
}
.card.shadow-sm {
    box-shadow: var(--ombre-douce) !important;
}
.card-header {
    background-color: #fbfcfe;
    border-bottom: 1px solid var(--rdc-gris-bordure);
    font-weight: 700;
    color: var(--rdc-bleu-nuit);
    border-top-left-radius: var(--rayon) !important;
    border-top-right-radius: var(--rayon) !important;
}

.card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombre-moyenne);
}

/* Cartes statistiques du tableau de bord (Module 4) */
.stat-card {
    border: 1px solid var(--rdc-gris-bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-douce);
    background: #fff;
    padding: 1.25rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-top: 4px solid var(--accent, var(--rdc-bleu));
    height: 100%;
}
.stat-card--bleu   { --accent: var(--rdc-bleu); }
.stat-card--or      { --accent: var(--rdc-or-fonce); }
.stat-card--rouge   { --accent: var(--rdc-rouge); }
.stat-card--vert    { --accent: var(--rdc-vert); }

.stat-card-icone {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent, var(--rdc-bleu)) 14%, white);
    color: var(--accent, var(--rdc-bleu));
}
.stat-card-valeur {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--rdc-bleu-nuit);
    line-height: 1.1;
}
.stat-card-libelle {
    color: var(--rdc-gris-texte);
    font-size: 0.85rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 0.55rem;
    font-weight: 600;
    font-size: 0.92rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.btn-primary {
    background-color: var(--rdc-bleu) !important;
    border-color: var(--rdc-bleu) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--rdc-bleu-fonce) !important;
    border-color: var(--rdc-bleu-fonce) !important;
}

.btn-outline-primary {
    color: var(--rdc-bleu) !important;
    border-color: var(--rdc-bleu) !important;
}
.btn-outline-primary:hover {
    background-color: var(--rdc-bleu) !important;
    border-color: var(--rdc-bleu) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--rdc-rouge) !important;
    border-color: var(--rdc-rouge) !important;
}
.btn-danger:hover {
    background-color: var(--rdc-rouge-fonce) !important;
    border-color: var(--rdc-rouge-fonce) !important;
}
.btn-outline-danger {
    color: var(--rdc-rouge) !important;
    border-color: var(--rdc-rouge) !important;
}
.btn-outline-danger:hover {
    background-color: var(--rdc-rouge) !important;
    border-color: var(--rdc-rouge) !important;
}

.btn-warning {
    background-color: var(--rdc-or) !important;
    border-color: var(--rdc-or) !important;
    color: var(--rdc-bleu-nuit) !important;
}

.btn-success {
    background-color: var(--rdc-vert) !important;
    border-color: var(--rdc-vert) !important;
}
.btn-success:hover {
    background-color: var(--rdc-vert-fonce) !important;
    border-color: var(--rdc-vert-fonce) !important;
}

.btn-link {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Badges, alertes, liens de statut
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.42em 0.7em;
    border-radius: 0.4rem;
}

.badge.bg-primary { background-color: var(--rdc-bleu) !important; }
.badge.bg-danger  { background-color: var(--rdc-rouge) !important; }
.badge.bg-success { background-color: var(--rdc-vert) !important; }
.badge.bg-warning { background-color: var(--rdc-or) !important; color: var(--rdc-bleu-nuit) !important; }
.badge.bg-secondary { background-color: #8792a2 !important; }

.badge-statut-en-cours     { background-color: var(--rdc-bleu); }
.badge-statut-satisfaisant { background-color: var(--rdc-vert); }
.badge-statut-rejete       { background-color: var(--rdc-rouge); }

.alert {
    border: none;
    border-left: 4px solid transparent;
    border-radius: 0.6rem;
}
.alert-primary { background-color: #eaf2fc; border-left-color: var(--rdc-bleu); color: var(--rdc-bleu-fonce); }
.alert-success { background-color: #e9f6f0; border-left-color: var(--rdc-vert); color: var(--rdc-vert-fonce); }
.alert-danger  { background-color: #fbeaec; border-left-color: var(--rdc-rouge); color: var(--rdc-rouge-fonce); }
.alert-warning { background-color: #fdf7dc; border-left-color: var(--rdc-or-fonce); color: #7a6300; }
.alert-info    { background-color: #e7f3fb; border-left-color: #0dcaf0; color: #055160; }
.alert-secondary { background-color: #f1f2f5; border-left-color: #8792a2; color: #495057; }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 0.55rem;
    border-color: var(--rdc-gris-bordure);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--rdc-bleu);
    box-shadow: 0 0 0 0.2rem rgba(10, 93, 194, 0.18);
}
.form-check-input:checked {
    background-color: var(--rdc-bleu);
    border-color: var(--rdc-bleu);
}
.form-check-input:focus {
    border-color: var(--rdc-bleu);
    box-shadow: 0 0 0 0.2rem rgba(10, 93, 194, 0.18);
}
.form-label {
    font-weight: 600;
    color: var(--rdc-bleu-nuit);
    font-size: 0.9rem;
}
.form-text {
    color: var(--rdc-gris-texte);
}

/* --------------------------------------------------------------------------
   9. Tableaux et listes (List.js)
   -------------------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: #eef4fc;
}
.table thead th {
    color: var(--rdc-bleu-nuit);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom-width: 2px;
    border-color: var(--rdc-gris-bordure);
    white-space: nowrap;
}
.table td {
    vertical-align: middle;
    border-color: var(--rdc-gris-bordure);
}
.table-responsive {
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-douce);
    background: #fff;
}
.table-responsive .table {
    margin-bottom: 0;
}

/* Pagination générée par List.js */
.pagination {
    justify-content: center;
    margin-top: 1rem;
    gap: 0.25rem;
}
.pagination li {
    list-style: none;
}
.pagination li a,
.pagination li.active a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    color: var(--rdc-bleu);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.pagination li.active a {
    background-color: var(--rdc-bleu);
    color: #fff;
}

/* --------------------------------------------------------------------------
   10. Fil du temps (historique des dossiers)
   -------------------------------------------------------------------------- */
.timeline {
    border-left: 3px solid var(--rdc-gris-bordure);
    padding-left: 1.4rem;
}
.timeline-item {
    position: relative;
    margin-bottom: 1.4rem;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.76rem;
    top: 0.3rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--rdc-bleu);
    box-shadow: 0 0 0 3px rgba(10, 93, 194, 0.16);
}

/* --------------------------------------------------------------------------
   11. Onglets d'administration (Module 4)
   -------------------------------------------------------------------------- */
.nav-pills .nav-link {
    color: var(--rdc-bleu-nuit);
    font-weight: 600;
    border-radius: 2rem;
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
}
.nav-pills .nav-link.active {
    background-color: var(--rdc-bleu);
}

/* --------------------------------------------------------------------------
   12. Page de connexion (hero deux volets)
   -------------------------------------------------------------------------- */
.auth-shell {
    min-height: 32rem;
    display: flex;
    align-items: stretch;
    border-radius: var(--rayon-lg);
    overflow: hidden;
    box-shadow: var(--ombre-moyenne);
    margin: 1.5rem 0 2.5rem;
}
.auth-visual {
    flex: 1 1 46%;
    background:
        linear-gradient(155deg, var(--rdc-bleu-nuit) 0%, var(--rdc-bleu-fonce) 45%, var(--rdc-bleu) 100%);
    color: #fff;
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-visual::before {
    /* Bande diagonale évoquant le drapeau, en clin d'œil discret */
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(115deg,
        transparent 0%, transparent 46%,
        var(--rdc-rouge) 46%, var(--rdc-rouge) 56%,
        var(--rdc-or) 56%, var(--rdc-or) 60%,
        transparent 60%, transparent 100%);
    opacity: 0.22;
    pointer-events: none;
}
.auth-visual-star {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c8, var(--rdc-or) 60%, var(--rdc-or-fonce) 100%);
    color: var(--rdc-bleu-nuit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 0 0 6px rgba(247, 214, 24, 0.14);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.auth-visual h2 {
    color: #fff;
    font-size: 1.85rem;
    font-weight: 800;
    max-width: 22rem;
    position: relative;
    z-index: 1;
}
.auth-visual p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 24rem;
    position: relative;
    z-index: 1;
}
.auth-visual-liste {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    position: relative;
    z-index: 1;
}
.auth-visual-liste li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    margin-bottom: 0.65rem;
}
.auth-visual-liste i {
    color: var(--rdc-or);
}

.auth-form-wrap {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
}
.auth-card {
    width: 100%;
    max-width: 24rem;
}
.auth-card .card {
    border: none;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .auth-shell { flex-direction: column; min-height: 0; margin: 1rem 0 2rem; }
    .auth-visual { padding: 2.5rem 1.75rem; }
    .auth-visual-liste { display: none; }
}

/* --------------------------------------------------------------------------
   13. Portail public de vérification de document
   -------------------------------------------------------------------------- */
.verif-shell {
    max-width: 34rem;
    margin: 0 auto;
}
.verif-entete {
    text-align: center;
    margin-bottom: 1.5rem;
}
.verif-entete .brand-mark {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.4rem;
    margin: 0 auto 0.75rem;
}
.verif-carte {
    border-top: 6px solid var(--statut-couleur, var(--rdc-bleu));
    border-radius: var(--rayon-lg);
}
.verif-icone {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2.1rem;
    background: color-mix(in srgb, var(--statut-couleur, var(--rdc-bleu)) 14%, white);
    color: var(--statut-couleur, var(--rdc-bleu));
}
.verif-valide  { --statut-couleur: var(--rdc-vert); }
.verif-revoque { --statut-couleur: var(--rdc-rouge); }
.verif-expire  { --statut-couleur: var(--rdc-or-fonce); }
.verif-attente { --statut-couleur: var(--rdc-bleu); }

/* --------------------------------------------------------------------------
   14. Responsive : ajustements fins
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .content-shell { padding-top: 1.1rem; }
    .stat-card { padding: 1rem; }
    .stat-card-valeur { font-size: 1.5rem; }
    h1.h4 { font-size: 1.2rem; }
}