/* Vos styles de polices existants */
			.w3-ubuntu { font-family: 'ubuntu'; }
			.w3-abel { font-family: 'abel'; }
			.w3-dosis { font-family: 'dosis'; }
			.w3-mavenpro { font-family: 'Maven Pro'; }
			.w3-nunito { font-family: 'Nunito'; }
			.w3-quicksand { font-family: 'Quicksand'; }
			.w3-questrial { font-family: 'Questrial'; }

            /* ================================================================= */
            /* INJECTION DU CSS PAPER PRO A4 STYLE (PRIORITÉ MAXIMALE)           */
            /* ================================================================= */
            /* REMARQUE : TOUS LES SÉLECTEURS SONT PRÉFIXÉS PAR 'body' POUR LA SPÉCIFICITÉ */
            
            :root {
                --primary: #2c3e50;      
                --secondary: #34495e;    
                --accent: #3498db;       
                --danger: #e74c3c;       
                --success: #27ae60;      
                --warning: #f39c12;      
                --light-bg: #f4f7f6;     
                --border: #e0e0e0;       
                /* Le fond de la barre laterale. L action principale s aligne
                   desormais dessus : le bleu clair `--accent` restait un ton
                   etranger a la seule couleur presente sur tous les ecrans. */
                --bl-fond: #1b2a38;
            }

            /* --- BASE & TYPOGRAPHIE --- */
            html { height: 100%; }
            body {
                background-color: var(--light-bg);
                font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
                color: #333;
                margin: 0;
                font-size: 14px;
                /* Sticky footer : le body remplit au moins toute la hauteur de l'écran
                   et empile ses enfants en colonne, ce qui permet de pousser le footer en bas */
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            /* Pousse le footer tout en bas quand le contenu est plus court que l'écran ;
               sur une page longue il reste simplement à la suite du contenu.
               Le sélecteur cible les deux classes (.invoice-layout.page-footer-wrapper)
               pour gagner en spécificité face à « body .invoice-layout { margin: 20px auto } »
               qui sinon écraserait margin-top: auto. */
            body .invoice-layout.page-footer-wrapper {
                margin-top: auto;
                margin-bottom: 0;
            }

            /* --- CONTENEURS DE PAGE & FEUILLE (SPECIFICITÉ AUGMENTÉE) --- */
            body .invoice-layout { 
                width: 100%; max-width: 1200px; margin: 20px auto; padding: 0 15px;
            }
            body .invoice-layout-small { 
                width: 100%; max-width: 800px; margin: 20px auto; padding: 0 15px;
            }
            body .invoice-layout-large { 
                width: 100%; max-width: 1600px; margin: 20px auto; padding: 0 15px;
            }
            body .paper-sheet {
                background: white; padding: 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.08);
                min-height: 500px; position: relative; display: flex; flex-direction: column;
            }
            /* Largeurs ecrites en dur dans les vues, heritees d'avant le design
               system : 410 vues portent un style="width:30%" a "width:100%" sur
               leur feuille ou leur barre d'actions, pose sans regle. La carte se
               retrouvait a moitie de page pendant que son tableau, lui, gardait la
               largeur du conteneur : le contenu debordait a droite, hors du blanc.
               `.invoice-layout` borne deja la page a 1200 px et la centre ; la
               feuille n'a donc aucune raison d'etre plus etroite. Un style inline
               ne cede qu'a `!important`, d'ou cette regle plutot que 410 retouches. */
            body .paper-sheet[style], body .action-bar[style] {
                width: auto !important; max-width: 100% !important;
            }
            body .sheet-header {
                border-bottom: 2px solid var(--primary); padding-bottom: 15px; margin-bottom: 30px;
                display: flex; justify-content: space-between; align-items: center;
            }
            body .sheet-title { font-size: 24px; color: var(--primary); font-weight: 800; margin: 0; }
            body .sheet-subtitle { font-size: 14px; color: var(--secondary); margin-top: 5px; }

            /* Texte d'aide sous un champ de formulaire. Défini une seule fois
               ici plutôt qu'en style inline dupliqué dans chaque formulaire. */
            body .form-hint { font-size: 12px; color: #777; margin-top: 4px; display: block; }


            /* --- BARRE D'ACTIONS & RECHERCHE (SPECIFICITÉ AUGMENTÉE) --- */
            /* Les boutons se groupent a gauche, la recherche va a droite.
               `space-between` etait ecrit ici, et il convenait aux barres bien
               formees, ou `.toolbar-left` occupe la place et repousse la
               recherche. Mais 610 vues posent leurs boutons directement dans la
               barre, sans groupe : `space-between` les eparpillait alors sur
               toute la largeur, un bouton par coin. D'ou l'impression de
               desalignement general. */
            body .action-bar {
                background: white; padding: 15px 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                margin-bottom: 25px; display: flex; flex-wrap: wrap; justify-content: flex-start;
                align-items: center; gap: 15px; border-left: 5px solid var(--primary);
            }
            body .action-bar > .toolbar-right,
            body .action-bar > .search-wrapper { margin-left: auto; }
            body .toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; flex: 1; }
            body .btn-group { display: flex; gap: 10px; }
            body .search-wrapper { position: relative; flex-grow: 1; max-width: 350px; }
            body .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #aaa; }
            body .search-input {
                width: 100%; padding: 10px 10px 10px 35px; border: 1px solid #ddd;
                border-radius: 6px; outline: none; font-size: 14px; transition: border-color 0.2s;
            }
            body .search-input:focus { border-color: var(--primary); }


            /* --- BOUTONS UNIFORMES (SPECIFICITÉ AUGMENTÉE) --- */
            body .btn-action {
                border: none; padding: 10px 18px; border-radius: 6px; font-size: 14px;
                font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex;
                align-items: center; gap: 8px; transition: all 0.2s ease;
            }
            body .btn-action:disabled { opacity: 0.6; cursor: not-allowed; }

            body .btn-light { background-color: #f8f9fa; color: #555; border: 1px solid #ddd; }
            body .btn-light:hover { background-color: #e2e6ea; color: #333; }
            body .btn-primary { background-color: var(--primary); color: white; box-shadow: 0 2px 5px rgba(44, 62, 80, 0.25); }
            body .btn-primary:hover { background-color: var(--bl-fond); transform: translateY(-1px); }
            body .btn-warning { background-color: var(--warning); color: white; box-shadow: 0 2px 5px rgba(243, 156, 18, 0.3); }
            body .btn-warning:hover { background-color: #e67e22; transform: translateY(-1px); }
            body .btn-danger { background-color: var(--danger); color: white; box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); }
            body .btn-danger:hover { background-color: #c0392b; transform: translateY(-1px); }
            body .btn-success { background-color: var(--success); color: white; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); }
            body .btn-success:hover { background-color: #229954; transform: translateY(-1px); }

            /* Boutons secondaires/alternatifs */
            body .btn-secondary { background-color: var(--secondary); color: white; }
            body .btn-secondary:hover { background-color: #2c3e50; }
            body .btn-secondary-alt { background-color: var(--secondary); color: white; }
            body .btn-secondary-alt:hover { background-color: #2c3e50; }
            body .btn-primary-alt { background-color: #1abc9c; color: white; } 
            body .btn-primary-alt:hover { background-color: #16a085; }
            body .btn-warning-alt { background-color: var(--warning); color: white; }
            body .btn-warning-alt:hover { background-color: #e67e22; }

            /* Boutons icônes (dans les tableaux) */
            body .btn-icon {
                width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
                border-radius: 4px; text-decoration: none; transition: all 0.2s;
            }
            body .btn-view { color: var(--accent); background: #ebf5fb; }
            body .btn-view:hover { background: var(--accent); color: white; }
            body .btn-delete { color: var(--danger); background: #fdedec; }
            body .btn-delete:hover { background: var(--danger); color: white; }


            /* --- BADGES & INDICATEURS (SPECIFICITÉ AUGMENTÉE) --- */
            body .statut-badge {
                background-color: var(--primary); color: white; padding: 8px 15px; border-radius: 20px;
                font-weight: bold; font-size: 0.9em; display: inline-flex; align-items: center; gap: 5px;
            }
            body .statut-nouveau { background-color: var(--accent); }
            body .statut-valide { background-color: var(--success); }
            body .statut-suspendu { color: white; background-color: var(--danger); }
            body .statut-actif { color: var(--success); }
            /* .statut-actif verdit un texte pose sur du blanc. Combinee a .statut-badge,
               qui peint deja un fond, elle rendait le libelle illisible (vert sur vert des
               que le fond etait bascule en --success). La pastille garde donc son texte
               blanc, et c'est le fond qui porte le vert. */
            body .statut-badge.statut-actif { background-color: var(--success); color: #fff; }
            body .status-dot-small { font-size: 8px; margin-right: 5px; }

            /* Niveau (dans les tableaux) */
            body .badge-level { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-block; color: white; }
            body .level-super-admin { background-color: var(--danger); }
            body .level-admin { background-color: var(--primary); }
            body .level-enseignant { background-color: var(--success); }
            body .level-censeur { background-color: var(--warning); }
            body .level-secretaire { background-color: var(--accent); }


            /* --- ALERTS & MESSAGES (SPECIFICITÉ AUGMENTÉE) --- */
            body .alert-box {
                padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; font-weight: 600;
                border-left: 5px solid; display: flex; align-items: center; gap: 10px;
            }
            body .alert-info { background-color: #e8f7fd; color: #0c5460; border-color: var(--accent); }
            body .alert-warning { background-color: #fef8e8; color: #8a6d3b; border-color: var(--warning); }
            body .chapeau-box { background: #eef2f5; padding: 15px; border-left: 4px solid var(--accent); margin-bottom: 25px; color: #555; }


            /* --- FORMULAIRES & INFORMATIONS (FICHES/MODALES) (SPECIFICITÉ AUGMENTÉE) --- */
            body .custom-form { width: 100%; }
            body .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
            body .form-group { margin-bottom: 15px; }
            body .form-label { display: block; font-weight: 600; color: var(--secondary); margin-bottom: 5px; font-size: 14px; }
            body .form-control {
                width: 100%; padding: 10px 15px; border: 1px solid var(--border); border-radius: 4px;
                font-size: 1em; box-sizing: border-box; background-color: #fcfcfc; transition: border-color 0.3s, box-shadow 0.3s;
            }
            body .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.12); }
            body .form-control-static { padding: 12px 15px; background-color: var(--light-bg); border: 1px solid var(--border); border-radius: 6px; font-weight: 600; color: var(--secondary); }
            body .form-error { color: var(--danger); font-size: 13px; font-weight: 600; }
            body .error-text { color: var(--danger); font-size: 0.85em; margin-top: 5px; display: block; }
            body .form-actions { display: flex; gap: 15px; margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--border); }
            body .form-actions-modal { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; text-align: right; }

            /* Grille d'info (Fiches) */
            body .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }
            body .info-box { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
            body .info-box .box-header { background: var(--primary); color: white; padding: 15px; font-weight: 700; font-size: 15px; }
            body .info-box.summary .box-header { background: var(--secondary); }
            body .info-box .box-body { padding: 20px; background-color: white; }
            body .info-grid-simple { padding: 20px; background-color: white; }
            body .info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #f0f0f0; }
            body .info-row:last-child { border-bottom: none; }
            body .info-label { font-weight: 600; color: var(--secondary); flex: 0 0 160px; font-size: 14px; }
            body .info-value { flex: 1; color: #333; font-weight: 500; text-align: right; }
            body .position-badge { background-color: var(--warning); color: white; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 13px; display: inline-block; }


            /* --- TABLEAUX DE DONNÉES (SPECIFICITÉ AUGMENTÉE) --- */
            body .table-container { 
                border: 1px solid #eee; border-radius: 8px; overflow-x: auto; margin-bottom: 30px; 
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }
            body .data-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
            body .data-table thead { cursor: pointer; }
            body .data-table th {
                background-color: var(--primary); color: white; padding: 15px; text-align: left;
                font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
                white-space: nowrap;
            }
            body .data-table th:hover { background-color: var(--secondary); }
            body .data-table td { padding: 12px 15px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
            body .data-table tr.item:hover { background-color: #f9f9f9; }
            body .data-table .text-center { text-align: center; }
            body .data-table .text-muted { color: #95a5a6; }

            /* Liens dans tableau */
            body .data-link { color: var(--accent); text-decoration: none; font-weight: 600; }
            body .data-link:hover { text-decoration: underline; }
            body .teacher-name { font-weight: 700; color: #2c3e50; font-size: 15px; }
            body .teacher-meta { font-size: 12px; color: #95a5a6; margin-top: 2px; }
            body .badge-year { 
                background: #ebf5fb; color: var(--accent); padding: 4px 10px; border-radius: 12px; 
                font-size: 12px; font-weight: 600; display: inline-block;
            }

            /* --- MODALES (SPECIFICITÉ AUGMENTÉE) --- */
            body .modal-overlay {
                position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
                overflow: auto; background-color: rgba(0,0,0,0.4); display: none;
            }
            body .modal-content {
                background-color: #fefefe; margin: 5% auto; padding: 0; border: 1px solid #888;
                width: 90%; max-width: 600px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
                animation-name: animatetop; animation-duration: 0.4s
            }
            .modal-padding { padding: 16px; }
            .paper-link { color: var(--accent); text-decoration: none; cursor: pointer; }
            .paper-link:hover { text-decoration: underline; }
            body .modal-small { max-width: 450px; }
            body .modal-extra-small { max-width: 350px; }
            body .modal-header {
                padding: 15px 20px; background-color: var(--primary); color: white; border-radius: 8px 8px 0 0;
                display: flex; justify-content: space-between; align-items: center;
            }
            body .modal-title { margin: 0; font-size: 18px; font-weight: 700; }
            body .modal-close { color: white; font-size: 28px; font-weight: bold; cursor: pointer; transition: 0.3s; }
            body .modal-close:hover, body .modal-close:focus { color: #ccc; }
            body .modal-body { padding: 20px; }

            /* --- FILET POUR LES MODALES RESTEES A L'ANCIEN GABARIT ---
               Le produit compte 885 modales, dont 463 n'ont ni .modal-header ni
               .modal-body : leur contenu se colle donc aux bords de .modal-content,
               qui est a padding 0. D'ou des libelles plaques contre le bord gauche
               et un titre flottant en haut, sans marge.
               On rattrape ici, sans toucher au balisage : les reecrire une par une
               n'est pas realiste, et leurs structures sont trop disparates pour un
               script fiable (298 seulement portent un titre en <hN> nu).
               Les modales deja au gabarit ne voient rien : leurs enfants directs
               sont exactement .modal-header, .modal-body et .modal-footer, tous
               exclus ci-dessous. Ce filet depanne l'affichage ; il ne dispense pas
               de remettre une vue au gabarit quand on y passe. */
            body .modal-content > *:not(.modal-header):not(.modal-body):not(.modal-footer):not(.modal-padding) {
                padding-left: 20px; padding-right: 20px;
            }
            body .modal-content > *:first-child:not(.modal-header):not(.modal-body) { padding-top: 20px; }
            body .modal-content > *:last-child:not(.modal-footer):not(.modal-body) { padding-bottom: 20px; }

            /* Le titre nu de ces modales, faute d'en-tete. Cible uniquement les
               titres hors .modal-body, pour ne pas toucher les sous-titres des
               modales correctes. */
            body .modal-content > h3, body .modal-content > h4,
            body .modal-content > *:not(.modal-header):not(.modal-body):not(.modal-footer) h3,
            body .modal-content > *:not(.modal-header):not(.modal-body):not(.modal-footer) h4 {
                margin: 0 0 15px; padding-bottom: 10px;
                font-size: 18px; font-weight: 700; color: var(--primary);
                border-bottom: 1px solid var(--border);
            }
            body .modal-footer {
                padding: 15px 20px; background-color: #f1f1f1; border-top: 1px solid var(--border);
                border-radius: 0 0 8px 8px; text-align: right;
            }

            /* --- FOOTER DE PAGE (SPECIFICITÉ AUGMENTÉE) --- */
            body .page-footer {
                text-align: center; margin-top: 50px; border-top: 1px solid #eee;
                padding-top: 15px; font-size: 12px; color: #aaa;
            }

            /* --- STRUCTURE MULTI-COLONNE (SPECIFICITÉ AUGMENTÉE) --- */
            body .multi-col-grid { display: flex; gap: 30px; align-items: stretch; }
            body .grid-col { flex: 1 1 50%; display: flex; flex-direction: column; gap: 30px; }
            body .mt-30 { margin-top: 30px; }
            
            /* Styles spécifiques au formulaire 2/3 - 1/3 */
            @media (min-width: 600px) {
                body .form-grid-m-2 {
                    display: flex;
                    gap: 20px;
                }
                body .form-group-twothird {
                    flex: 2;
                }
                body .form-group-third {
                    flex: 1;
                }
            }
            @media (max-width: 599px) {
                body .form-grid-m-2 {
                    display: block;
                }
            }


            /* ============================== */
            /* RESPONSIVE & MOBILE */
            /* ============================== */
            @media (max-width: 992px) {
                /* Multi-colonne s'empile */
                body .multi-col-grid { flex-direction: column; gap: 25px; }
                body .grid-col { flex: 1 1 100%; gap: 25px; }

                /* Fiches à une colonne */
                body .info-grid { grid-template-columns: 1fr; gap: 20px; }
                body .info-row { flex-direction: column; }
                body .info-label { flex: none; margin-bottom: 5px; }
                body .info-value { text-align: left; }
            }

            @media (max-width: 768px) {
                /* Barre d'actions s'empile */
                body .action-bar { flex-direction: column; align-items: stretch; }
                body .toolbar-left { flex-direction: column; align-items: stretch; }
                body .btn-group { justify-content: space-between; flex-wrap: wrap; }
                body .btn-action { width: 100%; justify-content: center; }
                body .search-wrapper { max-width: none; }
                body .sheet-header { flex-direction: column; align-items: flex-start; }
                
                /* Conteneur et feuille */
                body .paper-sheet { padding: 20px; }
                body .sheet-title { font-size: 20px; }

                /* Modales */
                body .modal-content { margin: 15% auto; }
                body .form-grid { grid-template-columns: 1fr; }
                
                /* Forcer le défilement horizontal pour les tableaux */
                body .table-container { overflow-x: auto; }
            }

            /* ============================== */
            /* IMPRESSION (OPTIMISÉ A4) */
            /* ============================== */
            @media print {
                @page { size: A4; margin: 10mm; }
                body { background: white; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
                
                /* Cacher les éléments interactifs */
                body .no-print, body .action-bar, body .modal-overlay, body .form-actions, body .form-actions-modal, body .page-footer { display: none !important; }
                
                /* Réinitialiser les conteneurs */
                body .invoice-layout, body .invoice-layout-small { width: 100%; max-width: none; margin: 0; padding: 0; }
                body .paper-sheet { box-shadow: none; padding: 0; border: none; min-height: initial; }
                
                /* Tableaux */
                body .table-container { overflow-x: visible !important; border: none !important; box-shadow: none !important; }
                body .data-table { width: 100%; min-width: initial; }
                body .data-table th { 
                    background-color: var(--primary) !important; color: white !important; 
                    border: 1px solid #ccc !important;
                }
                body .data-table td { border: 1px solid #ccc !important; }
                body .data-table tr:hover { background-color: initial !important; }

                /* Fiches */
                body .info-grid { display: block; }
                body .info-box { border: none; box-shadow: none; margin-bottom: 0; }
                body .box-header { display: none; }
                body .box-body { padding: 5px 0; background-color: white; }
                body .info-row { border-bottom: 1px dotted #ccc; padding: 5px 0; }
                body .info-value { text-align: right; }
                body .info-label { flex: 1; }
                
                /* Formulaires dans fiches (pour imprimer les valeurs) */
                body .form-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; border-bottom: 1px dotted #ccc; padding-bottom: 5px;}
                body .form-label { flex: 1; font-weight: normal; color: #555; }
                body .form-control, body .form-control-static { border: none !important; padding: 0 !important; text-align: right; background: none !important; font-weight: normal !important;}
            }

            /* Animation Modale */
            @keyframes animatetop {
                from {top: -300px; opacity: 0}
                to {top: 5%; opacity: 1}
            }

            /* === NAVBAR PAPER PRO (INDEPENDANT W3.CSS) === */
            .paper-nav {
                background: #ffffff;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding: 0 30px;
                min-height: 56px;
                width: 100%;
            }

            .paper-nav-brand {
                margin-right: 25px;
                font-weight: 700;
                color: var(--primary);
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-size: 16px;
                letter-spacing: 0.3px;
                padding: 14px 0;
            }

            .paper-nav-item {
                color: #555;
                text-decoration: none;
                padding: 18px 16px;
                font-size: 13.5px;
                font-weight: 500;
                transition: all 0.2s ease;
                background: transparent;
                border: none;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .paper-nav-item:hover {
                color: var(--accent);
                background: rgba(52, 152, 219, 0.06);
            }

            .paper-nav-item-out {
                color: #e67e22;
            }
            .paper-nav-item-out:hover {
                color: #c0392b;
                background: rgba(231, 76, 60, 0.06);
            }

            .paper-nav-item-change {
                color: var(--accent);
                font-weight: 600;
            }

            .paper-nav-item-grise {
                color: #aaa;
                cursor: not-allowed;
            }

            /* Dropdown */
            .paper-dropdown {
                position: relative;
                display: inline-flex;
                align-items: center;
            }

            .paper-dropdown-toggle {
                color: #555;
                text-decoration: none;
                padding: 18px 16px;
                font-size: 13.5px;
                font-weight: 500;
                transition: all 0.2s ease;
                background: transparent;
                border: none;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .paper-dropdown-toggle:hover {
                color: var(--accent);
                background: rgba(52, 152, 219, 0.06);
            }

            .paper-dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                border-radius: 0;
                border: 1px solid var(--border);
                box-shadow: 0 10px 25px rgba(0,0,0,0.12);
                padding: 6px 0;
                min-width: 220px;
                background: #fff;
                overflow: hidden;
                z-index: 1000;
            }

            .paper-dropdown:hover > .paper-dropdown-menu,
            .paper-dropdown.open > .paper-dropdown-menu {
                display: block;
            }

            .paper-dropdown-menu-item {
                display: block;
                padding: 10px 20px;
                font-size: 13px;
                color: #555;
                text-decoration: none;
                text-align: left;
                transition: all 0.15s ease;
                border: none;
                background: transparent;
                cursor: pointer;
            }

            .paper-dropdown-menu-item:hover {
                background: #f4f7f6;
                color: var(--primary);
            }

            /* Hamburger */
            .paper-nav-toggle {
                margin-left: auto;
                font-size: 18px;
                color: var(--secondary);
                padding: 14px 10px;
                background: transparent;
                border: none;
                cursor: pointer;
                display: none;
            }

            /* Mobile menu overlay */
            #navDemo {
                display: none;
                background: #ffffff;
                border-top: 1px solid var(--border);
            }
            #navDemo.show {
                display: block;
            }
            #navDemo a {
                display: block;
                padding: 14px 20px;
                border-bottom: 1px solid #eee;
                font-size: 15px;
                color: #555;
                text-decoration: none;
            }
            #navDemo a:hover {
                background-color: #f4f7f6;
                color: var(--accent);
            }

            /* Responsive */
            @media (max-width: 992px) {
                .paper-nav {
                    padding: 0 15px;
                }
                .paper-nav-item,
                .paper-dropdown-toggle {
                    padding: 14px 12px;
                    font-size: 13px;
                }
            }

            @media (max-width: 768px) {
                .paper-nav-item,
                .paper-dropdown {
                    display: none;
                }
                .paper-nav-toggle {
                    display: inline-flex;
                }
                .paper-nav-brand {
                    display: inline-flex !important;
                }
            }

            /* Bouton validation formulaire */
            body .paper-sheet .btn-submit {
                display: block;
                width: 100%;
                padding: 14px;
                background: #34495e;
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 15px;
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                margin-top: 10px;
                transition: transform 0.15s, box-shadow 0.15s;
            }
            body .paper-sheet .btn-submit:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            }

            /* Fin Injection CSS */
		
            /* ================= Menu lateral retractable ================= */
            :root { --bl-large: 258px; --bl-rail: 62px; }
            .barre-laterale{position:fixed;top:0;left:0;bottom:0;width:var(--bl-large);background:#1b2a38;color:#cfd8e3;
                display:flex;flex-direction:column;z-index:1000;transition:width .18s ease;overflow:hidden;
                box-shadow:2px 0 8px rgba(0,0,0,.18);}
            body.bl-repliee .barre-laterale{width:var(--bl-rail);}
            .bl-entete{display:flex;align-items:center;gap:8px;padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.08);}
            .bl-titre{font-weight:600;white-space:nowrap;overflow:hidden;flex:1;font-size:.95rem;}
            body.bl-repliee .bl-titre{display:none;}
            .bl-bascule{background:none;border:0;color:inherit;cursor:pointer;padding:6px 8px;border-radius:4px;font-size:1rem;}
            .bl-bascule:hover{background:rgba(255,255,255,.12);}
            body.bl-repliee .bl-bascule i{transform:rotate(180deg);}
            .bl-corps{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0;}
            .bl-section-titre{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;color:#cfd8e3;
                padding:10px 14px;cursor:pointer;text-align:left;font-size:.92rem;font-family:inherit;}
            .bl-section-titre:hover{background:rgba(255,255,255,.08);color:#fff;}
            .bl-icone{width:20px;text-align:center;flex:none;}
            .bl-libelle{flex:1;white-space:nowrap;overflow:hidden;}
            body.bl-repliee .bl-libelle,body.bl-repliee .bl-chevron{display:none;}
            .bl-chevron{font-size:.68rem;transition:transform .15s ease;opacity:.7;}
            .bl-section.est-ouverte>.bl-section-titre .bl-chevron{transform:rotate(180deg);}
            .bl-section-liens{display:none;padding-bottom:4px;}
            .bl-section.est-ouverte>.bl-section-liens{display:block;}
            body.bl-repliee .bl-section-liens{display:none !important;}
            .bl-lien{display:block;padding:7px 14px 7px 44px;color:#9fb0c2;text-decoration:none;font-size:.86rem;}
            .bl-lien:hover{background:rgba(255,255,255,.08);color:#fff;}
            .bl-lien.est-actif{color:#fff;background:rgba(52,152,219,.28);border-left:3px solid #3498db;padding-left:41px;}
            .bl-pied{border-top:1px solid rgba(255,255,255,.08);padding:4px 0;}
            .bl-lien-pied{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#cfd8e3;text-decoration:none;font-size:.9rem;}
            .bl-lien-pied:hover{background:rgba(255,255,255,.08);color:#fff;}
            .bl-voile{display:none;}
            /* Le decalage porte sur le body : la barre etant en position fixed,
               tout le contenu suit, quelle que soit l'imbrication des gabarits.
               Un conteneur intermediaire ne survivait pas aux div des bannieres. */
            body.a-barre-laterale{padding-left:var(--bl-large);transition:padding-left .18s ease;}
            body.a-barre-laterale.bl-repliee{padding-left:var(--bl-rail);}
            .bl-hamburger{display:none;position:fixed;top:10px;left:10px;z-index:1001;background:#1b2a38;color:#fff;
                border:0;border-radius:4px;padding:9px 12px;cursor:pointer;font-size:1rem;}
            @media (max-width: 900px){
                .barre-laterale{transform:translateX(-100%);transition:transform .18s ease;width:var(--bl-large);}
                body.bl-ouverte .barre-laterale{transform:translateX(0);}
                body.bl-repliee .barre-laterale{width:var(--bl-large);}
                body.a-barre-laterale{padding-left:0 !important;}
                body.a-barre-laterale .bl-hamburger{display:block;}
                body.bl-ouverte .bl-voile{display:block;position:fixed;top:0;right:0;bottom:0;left:0;
                    background:rgba(0,0,0,.45);z-index:999;}
            }
            @media print{
                .barre-laterale,.bl-voile,.bl-hamburger{display:none !important;}
                body.a-barre-laterale{padding-left:0 !important;}
            }