/* ==========================================================================
   VOGARIA RP : FEUILLE DE STYLE GLOBALE
   --------------------------------------------------------------------------
   Source de vérité unique pour tout ce qui est commun à plusieurs pages :
   tokens de couleur, navbar, boutons de navigation, bouton "Se connecter",
   panneau profil (dropdown), menu mobile, modale de connexion, footer,
   écran de chargement, mise en page des pages internes, tableau de bord,
   états (chargement / vide / toast), boutons secondaires, tuiles de stats,
   pages légales, liste de notifications, cartes d'entreprise.

   RÈGLE D'OR
   ----------
   Ce fichier se comporte comme les "def" d'un script Python : on définit un
   composant UNE SEULE FOIS ici, et chaque page l'appelle simplement en
   utilisant les mêmes classes HTML. On ne redéfinit JAMAIS ces classes dans
   le <style> d'une page : sinon les pages redivergent, ce qui était le
   problème d'origine.

   Référence visuelle : index.html (page d'accueil).

   AJOUTER LE FICHIER DANS UNE PAGE :
       <link rel="stylesheet" href="assets/css/vogaria.css">
   ...placé AVANT le <style> de la page.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE DESIGN
   ========================================================================== */
:root {
    /* Sans ça, le navigateur ignore le thème du site pour ses propres
       contrôles (menu déroulant d'un <select>, case à cocher, barre de
       défilement) : il les rend en clair par défaut, même sur fond sombre.
       [data-theme="light"] la repasse en clair plus bas. */
    color-scheme: dark;

    --primary-color: #6366f1;
    --accent-color: #8b5cf6;
    --background-primary: #0f0f23;
    --background-secondary: #1a1a2e;
    --background-card: rgba(255, 255, 255, 0.05);
    --background-card-hover: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --border-color: rgba(255, 255, 255, 0.1);

    --success: #22c55e;
    --danger: #ef4444;
    --warn: #f59e0b;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    /* Hauteur de la navbar : à utiliser partout où du contenu doit passer
       sous la barre de navigation (ex. margin-top: var(--nav-height)).
       Changer cette valeur suffit à décaler tout le site. */
    --nav-height: 64px;
    /* Hauteur réservée au footer fixe. */
    --footer-height: 60px;
}

[data-theme="light"] {
    color-scheme: light;
    --primary-color: #4f46e5;
    --accent-color: #7c3aed;
    --background-primary: #f5f3ff;
    --background-secondary: #ede9fe;
    --background-card: rgba(79, 70, 229, 0.08);
    --background-card-hover: rgba(79, 70, 229, 0.13);
    --text-primary: #2d1b69;
    --text-secondary: #5b4a9e;
    --border-color: rgba(79, 70, 229, 0.15);
    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--background-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background 0.5s ease, color 0.5s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--footer-height);
}

/* Pages sans footer fixe : <body class="no-footer"> */
body.no-footer {
    padding-bottom: 0;
}


/* ==========================================================================
   3. NAVBAR
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--background-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.navbar.scrolled {
    background: var(--background-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: none;
}

.nav-container {
    max-width: none;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: var(--nav-height);
    gap: 1.5rem;
}

.nav-center {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
}

.nav-menu {
    display: contents;
}

/* ── Logo ── */
.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-image {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    object-fit: cover;
    border: none;
    transition: all 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.05);
}

/* « Vogaria » en blanc, « RP » en dégradé : le nom reste lisible partout et
   le dégradé ne sert plus qu'à accentuer la fin. */
.logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}

.logo-rp {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Liens de navigation (avec soulignement animé) ── */
.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
}

/* Seul le trait sous le bouton marque l'état : le fond teinté doublait le
   repère et alourdissait la barre. */
.nav-link:hover,
.nav-link.active {
    color: var(--primary-color);
    background: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
    border-radius: 1px;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

/* ── Bouton "Se connecter" ── */
.nav-login-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 0.55rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

/* ── Bouton burger ── */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 4px;
}

.menu-toggle span {
    width: 25px;
    height: 2.5px;
    background: var(--text-primary);
    transition: all 0.3s ease;
    transform-origin: center;
    border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* ==========================================================================
   4. MENU MOBILE
   ========================================================================== */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 15, 35, 0.95);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--border-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    pointer-events: none;
}

.mobile-menu.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu ul {
    list-style: none;
    padding: 1rem 1.5rem;
}

.mobile-menu li {
    margin-bottom: 0.25rem;
}

.mobile-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.mobile-menu a:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

.mobile-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--gradient-primary);
    color: white !important;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 0.5rem;
}


/* ==========================================================================
   5. ZONE UTILISATEUR CONNECTÉ (navbar)
   ========================================================================== */
.nav-user-area {
    display: none;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border-radius: 12px;
    transition: all 0.25s ease;
    position: relative;
    user-select: none;
}

.nav-user-area:hover {
    background: rgba(99, 102, 241, 0.1);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.user-display-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.user-chevron {
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}

.nav-user-area.open .user-chevron {
    transform: rotate(180deg);
}

.notif-badge {
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--background-primary);
}


/* ==========================================================================
   6. PANNEAU PROFIL (dropdown) : composant unique, identique sur toutes les pages
   ========================================================================== */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    min-width: 260px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2001;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.35rem;
}

.dropdown-header .user-avatar {
    width: 44px;
    height: 44px;
}

.dropdown-header-info {
    display: flex;
    flex-direction: column;
}

.dropdown-header-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.dropdown-header-role {
    font-size: 0.78rem;
    color: var(--primary-color);
    font-weight: 500;
}

.dropdown-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 0.6rem 0.75rem 0.25rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
}

.dropdown-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

.dropdown-item .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.dropdown-item:hover .material-symbols-outlined {
    color: var(--primary-color);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0.5rem;
}

.dropdown-item.logout-item:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.dropdown-item.logout-item:hover .material-symbols-outlined {
    color: #f87171;
}

/* ── Version mobile du panneau ── */
.mobile-user-area {
    display: none;
    padding: 0.5rem 1rem;
}

.mobile-user-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.25rem;
}

.mobile-user-header .user-avatar {
    width: 40px;
    height: 40px;
}

.mobile-user-header .user-display-name {
    font-weight: 600;
    color: var(--text-primary);
}

/* Le bouton de déconnexion ferme la liste : on l'écarte un peu du reste. */
.mobile-user-area .logout-item {
    margin-top: 0.5rem;
}

/* Les liens du menu mobile sont en display:block (pas flex) : l'icône est
   alignée en ligne plutôt qu'avec un gap. */
.mobile-menu-icon {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}


/* ==========================================================================
   7. MODALE DE CONNEXION
   ========================================================================== */
/* La modale est toujours en display:flex et se cache via visibility/opacity :
   c'est ce qui permet d'animer AUSSI la fermeture (un display:none coupe net
   toute transition). Le JS ne fait que basculer la classe .active. */
.login-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.login-overlay.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.login-modal {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    text-align: center;
    max-width: 480px;
    width: 90%;
    transform: scale(0.9) translateY(12px);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.26s ease;
    will-change: transform, opacity;
}

.login-overlay.active .login-modal {
    transform: none;
    opacity: 1;
}

.login-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
    padding: 0.25rem;
}

.login-modal-close:hover {
    color: var(--text-primary);
}

.login-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.login-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.login-choices {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.login-choice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    background: var(--background-tertiary, rgba(255, 255, 255, 0.03));
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-choice:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.login-choice .material-symbols-outlined {
    font-size: 2rem;
    color: var(--primary-color);
}

.login-choice.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-choice.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
    background: var(--background-tertiary, rgba(255, 255, 255, 0.03));
}

.login-choice small {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 400;
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 25, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    padding: 0.9rem 2rem;
    z-index: 999;
}

.footer-inner {
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy {
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
    opacity: 1;
}


/* ==========================================================================
   9. ÉCRAN DE CHARGEMENT
   ========================================================================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content {
    text-align: center;
    color: var(--text-primary);
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text {
    font-size: 1.1rem;
    font-weight: 500;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   10. BOUTONS PARTAGÉS
   ========================================================================== */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: var(--background-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Variante compacte pour les boutons à l'intérieur des panneaux/cartes. */
.btn-sm {
    padding: 0.55rem 1.15rem;
    font-size: 0.88rem;
    border-radius: 10px;
}

/* Bouton "hero" plus large (page d'accueil). */
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Retour tactile au clic, commun à tous les boutons du site. */
.nav-login-btn,
.btn-primary,
.btn-secondary,
.mobile-login-btn,
.login-choice,
.icon-btn,
.char-switch-btn,
.btn-ghost,
.doc-modal-cancel {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease, background 0.25s ease,
        border-color 0.25s ease, color 0.25s ease;
}

.nav-login-btn:active,
.btn-primary:active,
.btn-secondary:active,
.mobile-login-btn:active,
.login-choice:active,
.icon-btn:active,
.char-switch-btn:active,
.btn-ghost:active,
.doc-modal-cancel:active {
    transform: scale(0.95);
}

/* Filet de sécurité : un <select> sans classe dédiée (donc sans règle plus
   spécifique qui prendrait le dessus) doit quand même suivre le thème du
   site plutôt que tomber sur le rendu par défaut du navigateur — clair,
   même en thème sombre, tant que color-scheme (voir plus haut) n'est pas
   accompagné d'un fond/texte explicites. */
select {
    font-family: inherit;
    background: var(--background-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
}
select option {
    background: var(--background-secondary);
    color: var(--text-primary);
}

/* Champs de formulaire : focus doux. */
input:focus,
select:focus,
textarea:focus {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}


/* ==========================================================================
   11. BOUTON PARAMÈTRES DE LA NAVBAR (injecté par auth.js)
   ========================================================================== */
.vogaria-settings-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-secondary);
    text-decoration: none;
    margin-right: 0.6rem;
    transition: all 0.2s ease;
}

.vogaria-settings-nav-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.vogaria-settings-nav-btn .material-symbols-outlined {
    font-size: 1.3rem;
}

@media (max-width: 900px) {
    .vogaria-settings-nav-btn {
        display: none;
    }
}


/* ==========================================================================
   12. MISE EN PAGE DES PAGES INTERNES
   --------------------------------------------------------------------------
   Deux conteneurs seulement, à choisir selon le type de page :
     .page-content : pages « éditoriales » centrées (effectif, réseaux, légal…)
     .page-wrap    : pages « applicatives » (listes d'entreprises…)
   La largeur se règle avec une classe modificatrice, jamais en redéfinissant
   le conteneur dans le <style> de la page.
   ========================================================================== */
.page-content {
    padding: calc(var(--nav-height) + 76px) 5% 80px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.page-content.width-narrow {
    max-width: 900px;
}

.page-content.width-wide {
    max-width: 1600px;
    padding-left: 3%;
    padding-right: 3%;
}

/* Pleine largeur, contenu en flex (page tutoriels : sommaire + article). */
.page-content.layout-flush {
    max-width: none;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    display: flex;
    flex: 1;
}

/* Deux colonnes : sommaire collant à gauche + article à droite (CGU, confidentialité). */
.page-content.layout-toc {
    max-width: 1600px;
    padding-left: 3vw;
    padding-right: 3vw;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* width:100% est indispensable : <body> est un conteneur flex en colonne, et
   des marges automatiques sur un enfant flex annulent l'étirement : sans cette
   largeur, le conteneur se réduit à celle de son contenu. */
.page-wrap {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 30px) 2rem 4rem;
}

/* ── En-têtes de page ── */
/* .page-header : en-tête centré (titre + sous-titre). */
.page-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

/* .page-head : en-tête aligné à gauche des pages applicatives. */
.page-head {
    margin-bottom: 2rem;
}

.page-title {
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header .page-title {
    justify-content: center;
    margin-bottom: 1rem;
}

.page-title .material-symbols-outlined {
    font-size: 1em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.page-sub {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-top: 0.35rem;
}

/* Titre de section de la page d'accueil (grand, centré). */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.section-title .material-symbols-outlined {
    font-size: 2rem;
    color: var(--primary-color);
}


/* ==========================================================================
   13. TABLEAU DE BORD (profil, gestion d'entreprise)
   --------------------------------------------------------------------------
   Coquille commune : colonne d'onglets à gauche, panneaux à droite.
   ========================================================================== */
.dashboard {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 3vw 5rem;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.side-nav {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 0.6rem;
}

.side-tab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
}

.side-tab .material-symbols-outlined {
    font-size: 1.3rem;
}

.side-tab:hover:not(.active) {
    background: var(--background-card-hover);
    color: var(--text-primary);
}

.side-tab.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.content-panel {
    min-width: 0;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: tabIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tabIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.panel-card {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.panel-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.panel-card + .panel-card {
    margin-top: 1.25rem;
}

/* Titre d'un panneau : à ne pas confondre avec .section-title (page d'accueil). */
.panel-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

.panel-title .material-symbols-outlined {
    color: var(--primary-color);
    font-size: 1.35rem;
}

/* Variante « titre à gauche, bouton à droite ». */
.panel-title--split {
    justify-content: space-between;
}

.panel-title-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}


/* ==========================================================================
   14. ÉTATS : chargement, vide, notification éphémère
   ========================================================================== */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rem 1rem;
    color: var(--text-secondary);
}

/* Même roue que .loading-spinner de l'écran de chargement. */
.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3.5rem 1.5rem;
    background: var(--background-card);
    border: 1px dashed var(--border-color);
    border-radius: 18px;
    color: var(--text-secondary);
}

.empty-state .material-symbols-outlined {
    font-size: 3.2rem;
    color: var(--primary-color);
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

.empty-state h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 0.92rem;
    max-width: 440px;
    margin: 0 auto 0.9rem;
}

/* Version sobre, sans cadre, pour les listes en cours de chargement/vides. */
.state-box {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
}

.state-box .material-symbols-outlined {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 0.75rem;
    display: block;
}

/* ── Porte d'authentification ────────────────────────────────────────────
   Écran « connexion requise ». C'est souvent le tout premier écran qu'un
   visiteur non connecté rencontre : il mérite mieux qu'un cadenas gris.

   Le markup est produit par VogariaAuth.renderAuthGate() (auth.js) : aucune
   page ne le recopie, pour que l'écran reste identique partout.

   Toutes les animations sont neutralisées par html.vogaria-no-motion et par
   prefers-reduced-motion ; le contenu reste lisible et visible sans elles. */
.auth-gate {
    max-width: 560px;
    margin: 3rem auto;
    padding: 3rem 2.5rem 2.5rem;
    position: relative;
    text-align: center;
    border-radius: 24px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 60%),
        var(--background-secondary);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    animation: authGateIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Liseré lumineux en haut de la carte. */
.auth-gate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

@keyframes authGateIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Écusson : halo qui respire derrière le cadenas. */
.auth-gate-badge {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: var(--gradient-primary);
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.4);
}

.auth-gate-badge::after {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
    animation: authGateHalo 3.2s ease-in-out infinite;
    z-index: -1;
}

@keyframes authGateHalo {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

.auth-gate-badge .material-symbols-outlined {
    font-size: 2.6rem;
    color: #fff;
    opacity: 1;
}

.auth-gate-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.auth-gate-text {
    color: var(--text-secondary);
    opacity: 0.85;
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 40ch;
    margin: 0 auto;
}

/* Ce que la connexion débloque : rassure avant de demander l'effort. */
.auth-gate-perks {
    list-style: none;
    margin: 1.75rem 0;
    padding: 1rem 1.15rem;
    display: grid;
    gap: 0.7rem;
    text-align: left;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
}

.auth-gate-perks li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.auth-gate-perks .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--success);
    opacity: 1;
    flex: none;
}

.auth-gate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.95rem 1.75rem;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    background: var(--gradient-primary);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.auth-gate-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(99, 102, 241, 0.5);
}

/* Reflet qui balaie le bouton au survol. */
.auth-gate-cta::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
}

.auth-gate-cta:hover::after {
    animation: authGateShine 0.75s ease;
}

@keyframes authGateShine {
    to { left: 130%; }
}

.auth-gate-cta svg {
    width: 22px;
    height: 22px;
    flex: none;
    fill: currentColor;
}

.auth-gate-note {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.auth-gate-note .material-symbols-outlined {
    font-size: 1rem;
    opacity: 1;
}

@media (max-width: 560px) {
    .auth-gate {
        margin: 1.5rem auto;
        padding: 2.25rem 1.35rem 1.85rem;
        border-radius: 20px;
    }

    .auth-gate-badge {
        width: 72px;
        height: 72px;
        border-radius: 22px;
    }

    .auth-gate-title { font-size: 1.28rem; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────
   Une seule pile, en haut à droite, sous la navbar. Le markup est produit
   par VogariaToast (auth.js) : aucune page ne le recopie.

   Structure d'un toast :
       .toast-notif[.is-info|.is-success|.is-warning|.is-error]
         .toast-notif-icon > .material-symbols-outlined
         .toast-notif-body > .toast-notif-title + .toast-notif-text
         .toast-notif-close
         .toast-notif-progress
   La couleur d'accent vient de --toast-accent, posée par la classe de type :
   icône, barre de progression et liseré gauche la partagent. */
.toast-stack {
    position: fixed;
    top: calc(var(--nav-height) + 12px);
    right: 1.25rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(360px, calc(100vw - 2.5rem));
    /* La pile ne doit jamais intercepter les clics ; seuls les toasts le font. */
    pointer-events: none;
}

.toast-notif {
    --toast-accent: var(--primary-color);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* +3px à gauche : compense le liseré d'accent, désormais en ombre interne. */
    padding: 0.9rem 0.9rem 1rem calc(0.9rem + 3px);
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    /* Le liseré d'accent était un `border-left: 3px`. Les enfants en position
       absolue se placent alors dans la boîte de padding, donc la barre de
       progression démarrait 3px trop à droite et son extrémité carrée butait
       contre l'arrondi : d'où l'encoche en bas à gauche. En ombre interne, le
       liseré épouse le border-radius et la barre part du vrai bord. */
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        inset 3px 0 0 var(--toast-accent);
    overflow: hidden;
    pointer-events: auto;
    animation: toastIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast-notif.is-leaving {
    pointer-events: none;
    animation: toastOut 0.42s cubic-bezier(0.6, -0.25, 0.75, 0.5) forwards;
    /* La hauteur se referme APRÈS la sortie, pour que la pile remonte une fois
       le toast hors champ. Elle est pilotée depuis auth.js, qui mesure la
       hauteur réelle : une valeur en dur clipperait les messages longs. */
    transition:
        max-height 0.22s ease 0.2s,
        margin-bottom 0.22s ease 0.2s,
        padding-top 0.22s ease 0.2s,
        padding-bottom 0.22s ease 0.2s;
}

.toast-notif.is-info {
    --toast-accent: var(--primary-color);
}

.toast-notif.is-success {
    --toast-accent: var(--success);
}

.toast-notif.is-warning {
    --toast-accent: var(--warn);
}

.toast-notif.is-error {
    --toast-accent: var(--danger);
}

.toast-notif-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    /* Pastille teintée dans la couleur du type, sans opacité sur l'icône.
       Repli pour les navigateurs sans color-mix(). */
    background: var(--background-card);
    background: color-mix(in srgb, var(--toast-accent) 18%, transparent);
    color: var(--toast-accent);
}

.toast-notif-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.toast-notif-body {
    flex: 1;
    min-width: 0;
}

.toast-notif-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.toast-notif-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 0.15rem;
    /* Un toast reste court : au-delà, on tronque plutôt que d'occuper l'écran. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Toast sans titre (simple message) : le texte prend le rôle du titre. */
.toast-notif.is-plain .toast-notif-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0;
}

.toast-notif-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.toast-notif-close:hover {
    background: var(--background-card-hover);
    color: var(--text-primary);
}

/* La durée vient de --toast-duration, posée sur le toast par le JS. C'est la
   fin de CETTE animation qui déclenche la fermeture : le survol met la barre
   en pause, et donc le décompte avec elle. */
.toast-notif-progress {
    position: absolute;
    /* left/right plutôt que width:100% : la barre couvre alors toute la
       largeur utile, sans le pixel manquant à droite dû à la bordure. */
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left center;
    animation: toastProgress var(--toast-duration, 5s) linear forwards;
}

/* Le décompte se met en pause tant que la souris est sur le toast. */
.toast-notif:hover .toast-notif-progress {
    animation-play-state: paused;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Sortie : petit recul à gauche, comme une prise d'élan, puis le toast part
   franchement par la droite, hors de l'écran. L'ancienne version se contentait
   de 24 px et d'un fondu : on ne voyait pas qu'il partait. */
@keyframes toastOut {
    25% {
        opacity: 1;
        transform: translateX(-10px);
    }

    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes toastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


/* ==========================================================================
   15. BOUTONS SECONDAIRES ET STATISTIQUES
   ========================================================================== */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background: var(--background-card-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-ghost.btn-lg {
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
    border-radius: 12px;
    gap: 0.5rem;
}

/* Bouton plein compact (« Se connecter » d'une carte, action principale d'un panneau). */
.login-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

/* Variante destructive (déconnexion, suppression) : l'accent de survol doit
   rester rouge, pas retomber sur l'indigo du site. */
.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

.btn-ghost.btn-danger {
    border-color: rgba(239, 68, 68, 0.35);
}

.btn-ghost.btn-danger:hover {
    border-color: var(--danger);
    color: #fca5a5;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-tile {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.3rem;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-tile:hover {
    background: var(--background-card-hover);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 900;
    margin-top: 0.35rem;
}

.stat-value .material-symbols-outlined {
    font-size: 1.4rem;
    vertical-align: -2px;
}


/* ==========================================================================
   16. PAGES LÉGALES (mentions, CGU, confidentialité)
   ========================================================================== */
.legal-toc {
    position: sticky;
    top: calc(var(--nav-height) + 46px);
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
}

.legal-toc-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    padding: 0 0.6rem;
}

.legal-toc a {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.legal-toc a:hover,
.legal-toc a.active {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-color);
}

.legal-main {
    max-width: 900px;
    min-width: 0;
}

.legal-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.legal-nav a,
.other-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.legal-nav a:hover,
.other-page-link:hover {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.other-page-link {
    margin-top: 1.25rem;
}

.legal-section {
    margin-bottom: 4rem;
    scroll-margin-top: calc(var(--nav-height) + 56px);
}

.legal-section-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

.legal-article {
    margin-bottom: 2.5rem;
    background: rgba(99, 102, 241, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 14px;
    padding: 1.75rem 2rem;
}

.legal-article h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.legal-article p,
.legal-article li {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 0.75rem;
}

.legal-article p:last-child {
    margin-bottom: 0;
}

.legal-article ul {
    padding-left: 1.5rem;
    list-style: disc;
}

.legal-article ul li {
    margin-bottom: 0.4rem;
}


/* ==========================================================================
   17. LISTE DE NOTIFICATIONS
   ========================================================================== */
.notif-card {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.notif-list {
    max-height: 400px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    transition: background 0.2s;
    cursor: pointer;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.notif-item + .notif-item {
    border-top: 1px solid var(--border-color);
}

.notif-item.unread,
.notif-unread {
    background: rgba(99, 102, 241, 0.06);
}

.notif-item.unread .notif-dot {
    display: block;
}

.notif-dot {
    display: none;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-icon .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.notif-body {
    flex: 1;
}

.notif-body strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.notif-body p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.notif-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem;
    font-size: 0.95rem;
}

.notif-empty .material-symbols-outlined {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}


/* ==========================================================================
   18. CARTES D'ENTREPRISE (annuaire + « mes entreprises »)
   ========================================================================== */
.view-toggle {
    display: flex;
    gap: 0.35rem;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.3rem;
    flex-shrink: 0;
}

.view-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle button.active {
    background: var(--gradient-primary);
    color: #fff;
}

.view-toggle button:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.1);
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 1.25rem;
}

.ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.ent-card {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.ent-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.ent-banner {
    height: 118px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.ent-banner-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ent-card:hover .ent-banner-photo {
    transform: scale(1.06);
}

.ent-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 25, 0.05) 0%, rgba(10, 10, 25, 0.25) 55%, var(--background-secondary) 100%),
        linear-gradient(180deg, rgba(10, 10, 25, 0.18) 0%, rgba(10, 10, 25, 0) 35%);
    pointer-events: none;
}

.ent-logo {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--background-secondary);
    border: 3px solid var(--background-primary);
    position: absolute;
    left: 1.15rem;
    top: 82px;
    z-index: 2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ent-card:hover .ent-logo {
    transform: translateY(-2px) scale(1.03);
}

.ent-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
}

.ent-body {
    padding: 2.5rem 1.15rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ent-name {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.25;
}

.ent-handle {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 0.15rem;
}

.ent-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 0.25rem 0.7rem;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.ent-cat .material-symbols-outlined {
    font-size: 0.95rem;
}

.ent-desc {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ent-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
}

.ent-role-badge.patron {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warn);
}

.ent-role-badge.employe {
    background: rgba(99, 102, 241, 0.14);
    color: var(--primary-color);
}

.ent-open {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 1rem;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ── Affichage en liste ── */
.ent-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ent-grid.view-list .ent-card {
    flex-direction: row;
    align-items: center;
}

.ent-grid.view-list .ent-card:hover {
    transform: translateX(4px);
}

.ent-grid.view-list .ent-card:hover .ent-logo {
    transform: none;
}

.ent-grid.view-list .ent-banner {
    display: none;
}

.ent-grid.view-list .ent-logo {
    position: static;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin: 1rem 0 1rem 1.15rem;
    flex-shrink: 0;
}

.ent-grid.view-list .ent-body {
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.ent-grid.view-list .ent-name {
    font-size: 1.08rem;
}

.ent-grid.view-list .ent-desc,
.ent-grid.view-list .ent-open {
    display: none;
}

.ent-grid.view-list .ent-cat,
.ent-grid.view-list .ent-role-badge {
    margin-top: 0.4rem;
}


/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
    /* Sommaire des pages légales : passe au-dessus de l'article. */
    .page-content.layout-toc {
        grid-template-columns: 1fr;
        padding-left: 5%;
        padding-right: 5%;
    }

    .legal-toc {
        position: static;
        margin-bottom: 2rem;
    }

    .legal-main {
        max-width: none;
    }

    /* Tableau de bord : les onglets passent en barre horizontale. */
    .dashboard {
        grid-template-columns: 1fr;
    }

    .side-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }

    .side-tab {
        flex-shrink: 0;
    }
}

/* Passage au menu burger.
   .nav-container est une grille `1fr auto 1fr` : la colonne centrale ne
   rétrécit jamais, elle vaut la largeur cumulée des liens (~500 px dès qu'on
   est connecté, le lien Entreprises s'ajoutant). En dessous de ~1024 px elle
   passait donc SOUS la zone utilisateur, d'où des liens et l'avatar
   superposés. Le seuil était à 900 px : il laissait une zone morte de
   900 à 1024 px. 1080 px garde une marge même si un lien s'ajoute. */
@media (max-width: 1080px) {
    .nav-container {
        display: flex;
        justify-content: space-between;
    }

    .nav-center,
    .nav-right {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }
}

@media (max-width: 900px) {
    .legal-nav {
        flex-direction: column;
        align-items: center;
    }

    .legal-article {
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .login-choices {
        flex-direction: column;
        gap: 1rem;
    }

    .page-content {
        padding-top: calc(var(--nav-height) + 56px);
        padding-bottom: 60px;
    }

    /* Les toasts occupent toute la largeur utile sur mobile. */
    .toast-stack {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        top: calc(var(--nav-height) + 8px);
    }

    .dashboard {
        padding: 1.5rem 5vw 4rem;
    }

    /* Perf mobile : plusieurs flous superposés (navbar + modale + dropdown)
       coûtent cher au compositing sur GPU mobile : on plafonne l'intensité. */
    .login-overlay,
    .mobile-menu,
    .lightbox,
    .card3d-overlay,
    .doc-modal-overlay,
    .ent-modal-overlay,
    .navbar.scrolled {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}


/* ==========================================================================
   20. SECTION COMMUNAUTAIRE : menu latéral partagé
   Le markup est produit par assets/js/commu-layout.js : aucune page ne le
   recopie, ce qui garantit une navigation identique partout.
   ========================================================================== */
/* Pleine largeur : la section occupe l'écran quelle que soit sa taille. Les
   marges et le menu grandissent avec lui plutôt que de laisser deux bandes
   vides de chaque côté sur les grands moniteurs. */
.commu-layout {
    display: grid;
    grid-template-columns: clamp(200px, 14vw, 280px) minmax(0, 1fr);
    gap: clamp(1rem, 1.8vw, 2.5rem);
    max-width: none;
    margin: 0;
    padding: calc(var(--nav-height) + 2rem) clamp(1rem, 2.5vw, 3rem) 4rem;
    align-items: start;
}

/* Un scroll indépendant du sien : la liste (surtout côté staff, avec la
   section Haute hiérarchie) dépasse la hauteur de l'écran sur beaucoup de
   pages. Sans max-height + overflow-y, le bas de la liste restait
   inatteignable tant qu'on n'avait pas fait défiler tout le contenu
   principal jusqu'à dépasser le bloc collant. */
.commu-side {
    position: sticky;
    top: calc(var(--nav-height) + 1.5rem);
    max-height: calc(100vh - var(--nav-height) - 3rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.cs-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem 0.6rem;
}

.cs-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.7rem;
    border-radius: 11px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease;
}

.cs-link:hover { background: var(--background-card-hover); color: var(--text-primary); }

.cs-link.active {
    background: rgba(99, 102, 241, 0.14);
    color: var(--primary-color);
}

.cs-link.disabled { opacity: 0.45; cursor: default; }
.cs-link.disabled:hover { background: none; color: var(--text-secondary); }

.cs-link .material-symbols-outlined { font-size: 1.2rem; }

.cs-soon {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.15rem 0.35rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
}

.cs-sep {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0.3rem;
}

/* Bannière de section : dégradé animé, réutilisée par plusieurs pages. */
.commu-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 2.2rem 1.9rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(99, 102, 241, 0.28);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
        radial-gradient(120% 140% at 100% 100%, rgba(56, 189, 248, 0.28), transparent 60%),
        linear-gradient(135deg, #1b1b34, #12122a);
}

.commu-banner::after {
    content: '';
    position: absolute;
    inset: -40% -10%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.05), transparent 40%);
    animation: commuGlow 14s linear infinite;
    pointer-events: none;
}

@keyframes commuGlow { to { transform: rotate(360deg); } }

/* Bandeau illustré, repris des bots (cv2_components.BANNER_*). Il occupe
   toute la largeur de la fenêtre, hors de la grille et sans cadre : le script
   le sort du contenu pour le poser juste sous la navbar. Le bas se fond dans
   le fond de page, donc aucune arête ne le referme. */
.commu-hero {
    position: relative;
    margin-top: var(--nav-height);
    min-height: clamp(180px, 19vw, 360px);
    background-color: var(--background-primary);
    background-repeat: no-repeat;
    background-position: center 32%;
    background-size: cover;
}

.commu-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--background-primary) 0%,
        color-mix(in srgb, var(--background-primary) 85%, transparent) 24%,
        color-mix(in srgb, var(--background-primary) 40%, transparent) 58%,
        transparent 100%);
}

/* Le bandeau tient déjà lieu d'espace sous la navbar : la grille remonte
   contre lui, sans quoi le dégradé s'arrêterait loin du contenu. */
body.avec-hero .commu-layout { padding-top: 1.5rem; }

/* Sous ~800 px, un bloc de 180 px de haut est plus étroit que l'image (64:15) :
   `cover` rognait les côtés et coupait le titre dessiné dessus. Le bloc prend
   alors le format de l'image, qui s'affiche entière. */
@media (max-width: 800px) {
    .commu-hero {
        min-height: 0;
        aspect-ratio: 64 / 15;
        background-position: center;
    }
}

/* L'illustration porte déjà le titre de la page : le réécrire par-dessus
   donnait deux fois « Richlist », l'un sur l'autre. Le h1 reste dans le
   document pour la structure et les lecteurs d'écran, sans être dessiné. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.commu-sous {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    padding-left: 0.15rem;
}

.commu-banner-inner { position: relative; z-index: 1; }

.commu-banner h1 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.commu-banner p {
    color: var(--text-secondary);
    margin-top: 0.55rem;
    max-width: 58ch;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .commu-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .commu-side {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 0.4rem;
        /* Le menu reste glissable au doigt, mais sans barre visible : elle
           coupait le bandeau en deux sur les écrans étroits. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .commu-side::-webkit-scrollbar { display: none; }

    .cs-title, .cs-sep { display: none; }
    .cs-link { white-space: nowrap; }
    .cs-soon { display: none; }
    .commu-banner { padding: 1.6rem 1.25rem; }
    .commu-banner h1 { font-size: 1.5rem; }
}
