/* =============================================================================
   SYNAPSE — CSS Global
   Fichier : public/assets/css/app.css
   =============================================================================
   Organisation :
     1.  Variables CSS (couleurs, espacements, typographie)
     2.  Thèmes entités (EDI=vert, RFL=rouge, SCI=bleu, LEX=rose)
     3.  Reset et base
     4.  Layout principal (grille sidebar | main)
     5.  Sidebar
     6.  Menu navigation
     7.  Topbar
     8.  Page (zone contenu)
     9.  Flash messages
     10. Composants réutilisables (boutons, formulaires, tableaux, cartes)
     11. Utilitaires
     12. Page de login (partagée avec login.php et set_password.php)
   ============================================================================= */


/* =============================================================================
   1. VARIABLES CSS
   Toutes les valeurs de design sont ici.
   Pour modifier un espacement ou une couleur, changez uniquement cette section.
   ============================================================================= */

:root {
    /* --- Couleurs de fond --- */
    --bg-page:       #f1f5f9;   /* Fond gris très clair de la page */
    --bg-content:    #ffffff;   /* Fond blanc des panneaux/cartes */
    --bg-content-2:  #f8fafc;   /* Fond légèrement teinté (tableaux alternés, etc.) */

    /* --- Texte --- */
    --text-primary:  #0f172a;   /* Texte principal (presque noir) */
    --text-secondary:#475569;   /* Texte secondaire / labels */
    --text-muted:    #94a3b8;   /* Texte atténué (placeholders, infos) */
    --text-inverse:  #ffffff;   /* Texte sur fond coloré */

    /* --- Bordures --- */
    --border:        rgba(15, 23, 42, 0.10);  /* Bordure standard */
    --border-strong: rgba(15, 23, 42, 0.20);  /* Bordure accentuée */

    /* --- Ombres --- */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

    /* --- Rayons de bordure --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* --- Espacements --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* --- Typographie --- */
    --font-size-xs:  11px;
    --font-size-sm:  13px;
    --font-size-md:  14px;
    --font-size-base:15px;
    --font-size-lg:  17px;
    --font-size-xl:  20px;
    --font-size-2xl: 24px;

    /* --- Layout --- */
    --sidebar-width:   260px;   /* Largeur de la sidebar */
    --topbar-height:   58px;    /* Hauteur de la topbar */

    /* --- Couleur d'accent par défaut (fallback — écrasée par les thèmes) --- */
    --accent:          #2563eb;
    --accent-hover:    #1d4ed8;
    --accent-soft:     rgba(37, 99, 235, 0.10);  /* Fond teinté pour hover menu */
    --accent-text:     #1e40af;

    /* --- Sidebar couleurs (dépendent du thème entité) --- */
    --sidebar-bg:      #1e293b;   /* Fond sidebar sombre par défaut (écrasé par thème) */
    --sidebar-text:    rgba(255, 255, 255, 0.85);
    --sidebar-muted:   rgba(255, 255, 255, 0.50);
    --sidebar-border:  rgba(255, 255, 255, 0.08);
    --sidebar-hover:   rgba(255, 255, 255, 0.08);
    --sidebar-active:  rgba(255, 255, 255, 0.15);
}


/* =============================================================================
   2. THÈMES ENTITÉS
   Chaque entité a sa propre couleur d'accent.
   Les variables --accent, --sidebar-bg, etc. sont surchargées ici.
   Appliqué via : <body data-theme="edi"> ou <html data-theme="edi">
   ============================================================================= */

/* --- EDI — Vert sauge clair --- */
[data-theme="edi"] {
    --accent:       #16a34a;
    --accent-hover: #15803d;
    --accent-soft:  rgba(22, 163, 74, 0.10);
    --accent-text:  #14532d;

    /* Sidebar : fond vert très doux, texte vert foncé */
    --sidebar-bg:      #dcfce7;
    --sidebar-text:    #14532d;
    --sidebar-muted:   rgba(20, 83, 45, 0.55);
    --sidebar-border:  rgba(20, 83, 45, 0.12);
    --sidebar-hover:   rgba(20, 83, 45, 0.08);
    --sidebar-active:  rgba(20, 83, 45, 0.13);
}

/* --- RFL — Rouge brique clair --- */
[data-theme="rfl"] {
    --accent:       #dc2626;
    --accent-hover: #b91c1c;
    --accent-soft:  rgba(220, 38, 38, 0.10);
    --accent-text:  #7f1d1d;

    /* Sidebar : fond rouge très doux, texte rouge foncé */
    --sidebar-bg:      #fee2e2;
    --sidebar-text:    #7f1d1d;
    --sidebar-muted:   rgba(127, 29, 29, 0.55);
    --sidebar-border:  rgba(127, 29, 29, 0.12);
    --sidebar-hover:   rgba(127, 29, 29, 0.08);
    --sidebar-active:  rgba(127, 29, 29, 0.13);
}

/* --- SCI — Bleu ciel clair --- */
[data-theme="sci"] {
    --accent:       #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft:  rgba(37, 99, 235, 0.10);
    --accent-text:  #1e3a8a;

    /* Sidebar : fond bleu très doux, texte bleu marine */
    --sidebar-bg:      #dbeafe;
    --sidebar-text:    #1e3a8a;
    --sidebar-muted:   rgba(30, 58, 138, 0.55);
    --sidebar-border:  rgba(30, 58, 138, 0.12);
    --sidebar-hover:   rgba(30, 58, 138, 0.08);
    --sidebar-active:  rgba(30, 58, 138, 0.13);
}

/* --- LEX — Rose fuchsia clair --- */
[data-theme="lex"] {
    --accent:       #db2777;
    --accent-hover: #be185d;
    --accent-soft:  rgba(219, 39, 119, 0.10);
    --accent-text:  #9d174d;

    /* Sidebar : fond rose très doux, texte rose foncé */
    --sidebar-bg:      #fce7f3;
    --sidebar-text:    #9d174d;
    --sidebar-muted:   rgba(157, 23, 77, 0.55);
    --sidebar-border:  rgba(157, 23, 77, 0.12);
    --sidebar-hover:   rgba(157, 23, 77, 0.08);
    --sidebar-active:  rgba(157, 23, 77, 0.13);
}


/* --- PERSO — Violet (espace outils personnels, super_admin uniquement) --- */
[data-theme="perso"] {
    --accent:       #7c3aed;
    --accent-hover: #6d28d9;
    --accent-soft:  rgba(124, 58, 237, 0.10);
    --accent-text:  #4c1d95;

    /* Sidebar : fond violet très doux, texte violet profond */
    --sidebar-bg:      #ede9fe;
    --sidebar-text:    #4c1d95;
    --sidebar-muted:   rgba(76, 29, 149, 0.55);
    --sidebar-border:  rgba(76, 29, 149, 0.12);
    --sidebar-hover:   rgba(76, 29, 149, 0.08);
    --sidebar-active:  rgba(76, 29, 149, 0.13);
}


/* =============================================================================
   3. RESET ET BASE
   ============================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

/* L'attribut `hidden` doit toujours l'emporter.
   Le navigateur le traduit par `display: none`, mais cette règle vient de sa
   feuille de style à lui : la moindre règle d'auteur du type
   `.ma-modale { display: flex }` l'écrase, et le JS qui fait `el.hidden = true`
   n'a alors plus aucun effet visible. C'est ce qui empêchait de fermer la fiche
   du module Mot de passe. */
[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-5) 0;
}

/* Suppression des marges par défaut des listes utilisées dans le menu */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* =============================================================================
   4. LAYOUT PRINCIPAL
   Grille CSS : sidebar fixe à gauche | zone main à droite
   ============================================================================= */

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

/* Mode large : contenu pleine largeur (modules explorer, besoin, etc.) */
.layout--wide .page {
    padding: 0;
}

/* Zone main : topbar + page */
.main {
    min-width: 0;  /* Évite le dépassement en CSS Grid */
    display: grid;
    grid-template-rows: var(--topbar-height) 1fr;
    background: var(--bg-page);
}


/* =============================================================================
   5. SIDEBAR
   ============================================================================= */

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    overflow-y: auto;         /* Scroll si le menu est long */
    position: sticky;
    top: 0;
    height: 100vh;            /* Toujours toute la hauteur */
    border-right: 1px solid var(--sidebar-border);
}

/* --- Logo --- */
.sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--sidebar-hover);
    border: 1px solid var(--sidebar-border);
}

.sidebar__logo-img {
    max-height: 50px;
    max-width: 100%;
    object-fit: contain;
}

/* Fallback texte quand pas d'image */
.sidebar__logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sidebar__logo-code {
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sidebar-text);
}

.sidebar__logo-name {
    font-size: var(--font-size-xs);
    color: var(--sidebar-muted);
    margin-top: 2px;
}

/* --- Menu wrapper --- */
.sidebar__menu {
    flex: 1;  /* Prend tout l'espace disponible entre logo et bas */
}


/* =============================================================================
   6. MENU NAVIGATION
   ============================================================================= */

.menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: var(--font-size-sm);
    font-weight: 450;
    text-decoration: none;
    margin-bottom: 3px;
    /* --- Effet 3D --- */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(0, 0, 0, 0.04) 100%
    ), var(--sidebar-hover);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom-color: rgba(0, 0, 0, 0.12);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.15s ease;
}

.menu-link:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(0, 0, 0, 0.02) 100%
    ), var(--sidebar-active);
    color: var(--sidebar-text);
    text-decoration: none;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
}

.menu-link:active {
    transform: translateY(0.5px);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.10),
        inset 0 2px 3px rgba(0, 0, 0, 0.10);
}

/* Lien actif (module en cours) */
.menu-link.is-active {
    background: linear-gradient(
        180deg,
        var(--accent) 0%,
        var(--accent-hover) 100%
    );
    color: #ffffff;
    font-weight: 600;
    border-color: var(--accent-hover);
    border-bottom-color: rgba(0, 0, 0, 0.20);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.menu-link.is-active:hover {
    color: #ffffff;
    background: linear-gradient(
        180deg,
        var(--accent-hover) 0%,
        var(--accent) 100%
    );
}

/* Icône du menu */
.menu-link__icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.80;
}

.menu-link.is-active .menu-link__icon {
    opacity: 1;
}

.menu-link__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Chevron pour les sous-menus --- */
.menu-link__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.25s ease;
}

/* Rotation du chevron quand le sous-menu est ouvert */
.menu-group.is-open > .menu-link .menu-link__chevron {
    transform: rotate(90deg);
    opacity: 0.8;
}

/* --- Sous-menu (dropdown) --- */
.menu-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
    margin: 0;
    padding-left: var(--space-3);
}

.menu-group.is-open > .menu-submenu {
    max-height: 200px;  /* Suffisant pour quelques sous-items */
    opacity: 1;
    margin-top: 2px;
    margin-bottom: 4px;
}

/* Sous-liens : plus petits, légèrement indentés */
.menu-submenu .menu-link {
    font-size: var(--font-size-xs);
    padding: 7px var(--space-3) 7px var(--space-4);
    margin-bottom: 1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.menu-submenu .menu-link:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(0, 0, 0, 0.02) 100%
    ), var(--sidebar-active);
}

/* Sous-lien actif : même style accent que les liens principaux */
.menu-submenu .menu-link.is-active {
    background: linear-gradient(
        180deg,
        var(--accent) 0%,
        var(--accent-hover) 100%
    );
    color: #ffffff;
    font-weight: 600;
    border-color: var(--accent-hover);
    border-bottom-color: rgba(0, 0, 0, 0.20);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.menu-submenu .menu-link.is-active:hover {
    color: #ffffff;
    background: linear-gradient(
        180deg,
        var(--accent-hover) 0%,
        var(--accent) 100%
    );
}

.menu-submenu .menu-link .menu-link__icon {
    width: 15px;
    height: 15px;
}


/* =============================================================================
   7. TOPBAR
   ============================================================================= */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--topbar-height);
    padding: 0 var(--space-6);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

/* Partie gauche : nom du module */
.topbar__left {
    flex: 0 0 auto;
}

.topbar__module {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* Partie centrale : date */
.topbar__center {
    flex: 1;
    text-align: center;
}

.topbar__date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Partie droite : entité + rôle + user + logout */
.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

/* Séparateur visuel entre les éléments */
.topbar__sep {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    user-select: none;
}

/* =============================================================================
   MONTANTS PRIVÉS — soldes masqués par défaut, œil pour dévoiler
   ============================================================================= */

/* Le flou laisse la place du montant intacte : rien ne bouge quand on dévoile,
   et on voit qu'il y a un chiffre sans pouvoir le lire. La sélection est
   coupée pour qu'un copier-coller ne rende pas le masquage inutile.
   Pas de `pointer-events: none` : les soldes du tableau de bord sont à
   l'intérieur de tuiles cliquables, qui doivent le rester. */
html.montants-masques .montant-prive {
    filter: blur(7px);
    user-select: none;
}

/* Le bouton œil */
.topbar__prive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color .15s, border-color .15s, background .15s;
}

.topbar__prive:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.topbar__prive-icon {
    width: 17px;
    height: 17px;
}

/* Une seule des deux icônes est visible : barrée quand c'est masqué, ouverte
   quand c'est dévoilé — l'icône montre l'état, pas l'action, comme chez N26. */
.topbar__prive-icon--on  { display: none; }
html:not(.montants-masques) .topbar__prive-icon--off { display: none; }
html:not(.montants-masques) .topbar__prive-icon--on  { display: inline-block; }

/* Dévoilé : le bouton se teinte, pour qu'on n'oublie pas que les soldes
   sont à l'écran. C'est l'état inhabituel, c'est lui qui doit se voir. */
html:not(.montants-masques) .topbar__prive {
    color: var(--accent);
    border-color: var(--accent);
}

/* Libellé réservé aux lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Nom de l'entité (si une seule entité, pas de sélecteur) */
.topbar__entity-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent);
}

/* Formulaire switch entité (doit être inline) */
.topbar__switch-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Sélecteurs (entité + rôle) */
.topbar__select {
    font-size: var(--font-size-sm);
    font-family: inherit;
    padding: 4px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-content);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.topbar__select:focus,
.topbar__select:hover {
    border-color: var(--accent);
}

.topbar__select--entity {
    font-weight: 600;
    color: var(--accent);
    max-width: 180px;
}

.topbar__select--role {
    max-width: 130px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Bloc utilisateur */
.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.topbar__user-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.topbar__user-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
}

/* Bouton logout */
.topbar__logout-form {
    display: inline-flex;
}

.topbar__logout-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-content);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.topbar__logout-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.topbar__logout-icon {
    width: 15px;
    height: 15px;
}


/* =============================================================================
   8. PAGE (zone contenu des modules)
   ============================================================================= */

.page {
    padding: var(--space-6);
    overflow-y: auto;
}

/* Mode large : sans padding (module gère lui-même son espacement) */
.page--wide {
    padding: 0;
}


/* =============================================================================
   9. FLASH MESSAGES
   Messages temporaires affichés après une action POST (succès, erreur, etc.)
   ============================================================================= */

.flash-messages {
    margin-bottom: var(--space-4);
}

.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    border-left: 4px solid transparent;
}

.flash--success {
    background: #f0fdf4;
    border-left-color: #16a34a;
    color: #166534;
}

.flash--error {
    background: #fef2f2;
    border-left-color: #dc2626;
    color: #991b1b;
}

.flash--info {
    background: #eff6ff;
    border-left-color: #2563eb;
    color: #1e40af;
}

.flash--warning {
    background: #fffbeb;
    border-left-color: #d97706;
    color: #92400e;
}


/* =============================================================================
   10. COMPOSANTS RÉUTILISABLES
   ============================================================================= */

/* --- Boutons --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-4);
    font-size: var(--font-size-sm);
    font-family: inherit;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* Bouton principal (couleur accent entité) */
.btn--primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    text-decoration: none;
}

/* Bouton secondaire (contour) */
.btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn--secondary:hover {
    background: var(--bg-content-2);
    border-color: var(--text-secondary);
    text-decoration: none;
}

/* Bouton danger (suppression) */
.btn--danger {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}
.btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    text-decoration: none;
}

/* Bouton petite taille */
.btn--sm {
    padding: 5px var(--space-3);
    font-size: var(--font-size-xs);
}

/* Bouton très petite taille */
.btn--xs {
    padding: 3px var(--space-2);
    font-size: var(--font-size-xs);
}
.btn--xs svg {
    width: 12px;
    height: 12px;
}

/* Bouton fantôme (transparent, contour fin au hover) */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn--ghost:hover {
    background: var(--bg-content-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}

/* Modificateur danger sur btn--ghost (texte rouge au hover) */
.btn--ghost.btn--danger {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.btn--ghost.btn--danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Bouton pleine largeur */
.btn--full {
    width: 100%;
    justify-content: center;
}

/* Icône dans un bouton */
.btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* --- Formulaires --- */

/* Astérisque champ obligatoire */
.form-required {
    color: #dc2626;
    margin-left: 2px;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px var(--space-3);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Input taille réduite (inline forms, filtres, recherche) */
.form-input--sm,
.form-select--sm {
    padding: 5px var(--space-3);
    font-size: var(--font-size-xs);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* --- Tableaux --- */

.table-wrapper {
    overflow-x: auto;              /* Scroll horizontal sur petits écrans */
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--bg-content-2);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.table tr:last-child td {
    border-bottom: none;  /* Pas de bordure sur la dernière ligne */
}

.table tbody tr:hover td {
    background: var(--bg-content-2);
}

/* --- Panneaux structurés (panel) ---
   Composant avec header (titre + actions) et body.
   Différent de .card (simple wrapper) : le panel gère son propre layout.
*/

.panel {
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* En-tête du panel : titre à gauche + actions à droite */
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    background: var(--bg-content);
}

/* En-tête empilé : titre sur une ligne, outils dessous. Doit vivre ici et non
   dans une feuille de module — il sert à plusieurs modules, et un modificateur
   du design system chargé pour un seul d'entre eux ne s'applique nulle part
   ailleurs, sans erreur ni avertissement. */
.panel__header--col {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.panel__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Compteur discret à côté du titre (ex: "5 lieux") */
.panel__count {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-muted);
}

/* Corps du panel */
.panel__body {
    padding: var(--space-5);
}

/* Corps sans padding (pour les tableaux/listes qui ont leur propre espacement) */
.panel__body--flush {
    padding: 0;
}


/* --- Tableaux data-table (composant dans un panel ou card) --- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.data-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--bg-content-2);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover td {
    background: var(--bg-content-2);
}

.data-table tbody tr.row--clickable {
    cursor: pointer;
}

.data-table tbody tr.row--clickable:hover td {
    background: var(--bg-content-2);
}


/* --- Cartes (panels) --- */

.card {
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.card__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* --- Badges / Tags --- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
}

.badge--green  { background: #dcfce7; color: #166534; }
.badge--red    { background: #fee2e2; color: #991b1b; }
.badge--blue   { background: #dbeafe; color: #1e40af; }
.badge--orange { background: #ffedd5; color: #9a3412; }
.badge--gray   { background: #f1f5f9; color: #475569; }
.badge--purple { background: #ede9fe; color: #5b21b6; }
.badge--accent { background: var(--accent-soft); color: var(--accent-text); }

/* Badges entités — couleur fixe indépendante du thème actif */
.badge--edi { background: #dcfce7; color: #14532d; }   /* Vert  */
.badge--rfl { background: #fee2e2; color: #7f1d1d; }   /* Rouge */
.badge--sci { background: #dbeafe; color: #1e3a8a; }   /* Bleu  */
.badge--lex { background: #fce7f3; color: #9d174d; }   /* Rose  */

/* Badge monospace (code analytique, référence technique) */
.badge--mono {
    background: var(--bg-content-2);
    color: var(--text-secondary);
    font-family: ui-monospace, "Cascadia Code", monospace;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
}

/* Badge avertissement (données manquantes, action requise) */
.badge--warn { background: #fef3c7; color: #92400e; }

/* --- Layout 2 colonnes (ex: affaires, catalogue) --- */
/* Colonne gauche 30% | Colonne droite 70% */

.two-col {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: var(--space-5);
    align-items: start;
}

.two-col__left {
    /* Colonne gauche — liste/navigation */
}

.two-col__right {
    /* Colonne droite — détail/formulaire */
}

/* --- Titre de section de page --- */

.page-header {
    margin-bottom: var(--space-6);
}

.page-header__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.page-header__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}


/* =============================================================================
   ONGLETS — composant partagé (.tabs / .tab / .tab--active)
   ============================================================================= */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 0 0 var(--space-5);
    overflow-x: auto;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
    color: var(--accent);
    text-decoration: none;
}

.tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}


/* =============================================================================
   11. COMPOSANT PILLS COCHABLES — partagé entre affaires et config_docs
   ============================================================================= */

/* Conteneur */
.affaire-doc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Pill individuelle */
.affaire-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-content);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.affaire-doc-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.affaire-doc-pill--checked {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.affaire-doc-pill--checked:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* Icône check — visible uniquement quand coché */
.affaire-doc-pill__check {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.affaire-doc-pill--checked .affaire-doc-pill__check {
    opacity: 1;
}

/* Masquer le vrai checkbox */
.affaire-doc-pill__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Bouton × sur les pills custom */
.affaire-doc-pill__remove {
    background: none;
    border: none;
    padding: 0 0 0 var(--space-1);
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: var(--font-size-base);
    line-height: 1;
}

.affaire-doc-pill__remove:hover {
    opacity: 1;
}

/* =============================================================================
   PARTICIPANTS — combobox + tags
   ============================================================================= */

/* Conteneur des tags sélectionnés */
.affaire-participant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    min-height: 0;
}

/* Tag individuel */
.affaire-participant-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.affaire-participant-tag__remove {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
    padding: 0 0 0 var(--space-1);
    font-size: var(--font-size-base);
    line-height: 1;
}

.affaire-participant-tag__remove:hover {
    opacity: 1;
}

/* Wrapper combobox (input + dropdown) */
.affaire-participant-combobox {
    position: relative;
    max-width: 360px;
}

/* Dropdown de suggestions */
.affaire-participant-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.affaire-participant-option {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.affaire-participant-option:hover {
    background: var(--bg-hover);
}


/* =============================================================================
   11. UTILITAIRES
   Classes courtes réutilisables dans le HTML des modules
   ============================================================================= */

/* Texte */
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-sm       { font-size: var(--font-size-sm); }
.text-xs       { font-size: var(--font-size-xs); }
.text-lg       { font-size: var(--font-size-lg); }
.font-bold     { font-weight: 700; }
.font-medium   { font-weight: 500; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-accent   { color: var(--accent); }

/* Espacement */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* Flexbox raccourcis */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }

/* Visibilité */
.hidden { display: none; }


/* =============================================================================
   12. PAGE DE LOGIN
   Styles partagés par login.php et set_password.php
   ============================================================================= */

.login-body {
    background: #0f172a;   /* Fond sombre pour contraster avec la carte */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: var(--space-4);
}

/* Brand / Logo en haut de la carte login */
.login-brand {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-brand__name {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.login-brand__sub {
    display: block;
    font-size: var(--font-size-sm);
    color: #64748b;
    margin-top: 4px;
}

/* Carte de connexion */
.login-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
}

.login-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-5) 0;
}

.login-card__desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-5) 0;
    line-height: 1.6;
}

/* Message d'erreur login */
.login-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

/* Formulaire login */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Les form-group ont déjà leur margin-bottom */
}

/* Pied de page login */
.login-footer {
    text-align: center;
    font-size: var(--font-size-xs);
    color: #475569;
    margin-top: var(--space-5);
}


/* =============================================================================
   12. RESPONSIVE / MOBILE
   Bascule en dessous de 860px : sidebar devient un drawer, topbar compacte.
   Aucune règle ici n'est appliquée au-dessus de 860px (sauf display:none initial
   du burger et du backdrop, qui sont retirés du flux).
   ============================================================================= */

/* Bouton burger : caché en desktop, affiché en mobile via media query */
.topbar__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-right: var(--space-2);
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.topbar__burger:hover { background: var(--accent-soft); }
.topbar__burger svg { width: 20px; height: 20px; }

/* Backdrop drawer : caché par défaut, affiché quand .layout.is-drawer-open */
.drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 90;
}

@media (max-width: 860px) {
    /* --- Layout : une seule colonne, sidebar sort du flux --- */
    .layout { grid-template-columns: 1fr; }

    /* --- Sidebar : drawer hors-écran, glisse à l'ouverture --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
    }
    .layout.is-drawer-open .sidebar { transform: translateX(0); }
    .layout.is-drawer-open .drawer-backdrop { display: block; }

    /* --- Topbar : burger visible, date masquée, logout en icône seule --- */
    .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
    .topbar__burger { display: inline-flex; }
    .topbar__center { display: none; }
    .topbar__sep { display: none; }
    .topbar__user-name { display: none; }
    .topbar__logout-label { display: none; }
    .topbar__logout-btn { padding: 6px 8px; }
    .topbar__module { font-size: var(--font-size-md); }
    .topbar__select--entity { max-width: 110px; font-size: var(--font-size-xs); }
    .topbar__select--role { display: none; }

    /* --- Page : padding réduit, tables scrollables horizontalement --- */
    .page { padding: var(--space-3); }
    table { display: block; overflow-x: auto; max-width: 100%; }

    /* --- Formulaires : labels au-dessus des champs --- */
    .form-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .topbar__module {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .page { padding: var(--space-2); }
}

/* =============================================================================
   COMPTEUR DE CONSOMMATION IA — topbar
   Rendu sur toutes les pages : le style doit donc vivre ici, et non dans le CSS
   du module ai_conso, qui n'est chargé que sur sa propre page.
   ========================================================================== */

.aic-topbar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-content-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.aic-topbar:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.aic-topbar--alerte {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.aic-topbar strong { font-weight: 600; }

@media (max-width: 900px) { .aic-topbar { display: none; } }