:root {
            --rose-pastel: #FCE1E4;
            --rose-moyen: #F9C5D1;
            --rose-accent: #E8A7B5;
            --beige-clair: #FCF8F2;
            --beige-moyen: #F5E6D3;
            --texte-sombre: #4A3E3D;
            --texte-secondaire: #856E6C;
            --blanc: #FFFFFF;
            --transition-douce: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --statut-nouveau-bg: #E3F2FD;
            --statut-nouveau-txt: #1976D2;
            --statut-encours-bg: #FFF3E0;
            --statut-encours-txt: #F57C00;
            --statut-attente-bg: var(--rose-pastel);
            --statut-attente-txt: #C2185B;
            --statut-complete-bg: #E8F5E9;
            --statut-complete-txt: #388E3C;
            --statut-urgent-bg: #FFEBEE;
            --statut-urgent-txt: #D32F2F;
        }
        html.mode-sombre {
            --rose-pastel: #4A3E3D;
            --rose-moyen: #856E6C;
            --rose-accent: #E8A7B5;
            --beige-clair: #1A1615;
            --beige-moyen: #2A2422;
            --texte-sombre: #FCF8F2;
            --texte-secondaire: #FCE1E4;
            --blanc: #221C1B;
            --statut-nouveau-bg: #0D47A1;
            --statut-nouveau-txt: #BBDEFB;
            --statut-encours-bg: #E65100;
            --statut-encours-txt: #FFE0B2;
            --statut-attente-bg: #880E4F;
            --statut-attente-txt: #F8BBD0;
            --statut-complete-bg: #1B5E20;
            --statut-complete-txt: #C8E6C9;
            --statut-urgent-bg: #B71C1C;
            --statut-urgent-txt: #FFCDD2;
        }

        /* Réinitialisation de base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
            background-color: var(--beige-clair);
            color: var(--texte-sombre);
            line-height: 1.6;
        }

        /* Structure globale */
        main {
            min-height: 80vh;
        }

        /* En-tête de la page */
        #entete {
            background-color: var(--blanc);
            border-bottom: 2px solid var(--rose-pastel);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 1.25rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(74, 62, 61, 0.03);
        }

        .logo-boutique {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--texte-sombre);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-boutique span {
            color: var(--rose-accent);
        }

        /* Navigation */
        #entete nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        #entete nav a {
            text-decoration: none;
            color: var(--texte-secondaire);
            font-weight: 600;
            font-size: 1.05rem;
            transition: var(--transition-douce);
            position: relative;
            padding: 0.25rem 0;
        }

        #entete nav a:hover, #entete nav a.actif {
            color: var(--texte-sombre);
        }

        #entete nav a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: var(--rose-accent);
            transition: var(--transition-douce);
            border-radius: 2px;
        }

        #entete nav a:hover::after, #entete nav a.actif::after {
            width: 100%;
        }
        /* Classes globales pour les pastilles (Badges) */
        .badge {
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
            white-space: nowrap;
        }

        .badge-nouveau { background-color: var(--statut-nouveau-bg); color: var(--statut-nouveau-txt); }
        .badge-encours { background-color: var(--statut-encours-bg); color: var(--statut-encours-txt); }
        .badge-attente { background-color: var(--statut-attente-bg); color: var(--statut-attente-txt); }
        .badge-complete { background-color: var(--statut-complete-bg); color: var(--statut-complete-txt); }
        .badge-urgent { background-color: var(--statut-urgent-bg); color: var(--statut-urgent-txt); }


        /* --- Menu déroulant de l'Espace Membre --- */

        .menu-deroulant {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 1rem;
            padding: 10px 0; /* Ajoute une zone tampon en haut et en bas */
        }
        .bouton-deroulant {
            cursor: pointer;
            font-weight: 700 !important;
            color: var(--rose-accent) !important;
        }

        /* Le conteneur du sous-menu */
        .sous-menu {
            display: none !important;
            position: absolute;
            top: 100%; /* Reprend sa position normale collée au bas du parent */
            right: 0;
            background-color: var(--blanc);
            min-width: 220px;
            box-shadow: 0 8px 24px rgba(74, 62, 61, 0.1);
            border-radius: 8px;
            border: 1px solid var(--rose-pastel);
            padding: 0.5rem 0;
            z-index: 1000;
            flex-direction: column !important;
            gap: 0 !important;
            /* On retire le margin-top qui causait la zone morte */
        }

        /* Le pont invisible pour empêcher la fermeture au survol */
        .sous-menu::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 0;
            right: 0;
            height: 15px;
            background-color: transparent;
        }

        /* Affichage du sous-menu au survol */
        .menu-deroulant:hover .sous-menu {
            display: flex !important;
        }

        /* Style des liens à l'intérieur du sous-menu */
        .sous-menu li {
            width: 100%;
        }
        .sous-menu li:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        .sous-menu a, .action-navigation-deconnexion {
            display: block;
            padding: 0.75rem 1.5rem;
            color: var(--texte-sombre) !important;
            text-decoration: none;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-douce);
        }

        .sous-menu a:hover, .action-navigation-deconnexion:hover {
            background-color: var(--beige-clair);
            color: var(--rose-accent) !important;
        }

        /* On désactive la petite barre de soulignement pour le sous-menu */
        .sous-menu a::after {
            display: none !important;
        }

        .sous-menu a {
            padding: 0.85rem 1.5rem !important;
        }