/* ======================================== MENU PRINCIPAL ======================================== */ 
    .menu { width: 400px; max-width: 90%; margin: 5px auto; font-family: Arial, sans-serif; text-align: left; margin-top: 0px;} 
    
    /* ======================================== ÉLÉMENTS CLIQUABLES ======================================== */ 
    .menu-item, .menu-link { display: block; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; text-decoration: none; box-sizing: border-box; } 
    
    /* ======================================== MENU PRINCIPAL ======================================== */ 
    .menu > .level > .menu-item { background: #4a3b5c; color: #ffffff; font-weight: bold; padding: 12px; border-radius: 4px; } 
    .menu > .level > .menu-item:hover { background: #3d304d; } 
    
    /* ======================================== NIVEAU 1 ======================================== */ 
    .menu > .level > .submenu > .level { margin-top: 12px; } 
    .menu > .level > .submenu > .level > .menu-item { background: #735477; color: #ffffff; font-weight: bold; border-radius: 3px; } 
    .menu > .level > .submenu > .level > .menu-item:hover { background: #624568; } 
    
    /* ======================================== NIVEAU 2 ======================================== */ 
    .submenu .submenu .level { margin-top: 8px; } 
    .submenu .submenu .level > .menu-item { background: #cbbf9d; color: #3d3425; font-weight: bold; border-radius: 3px; } 
    .submenu .submenu .level > .menu-item:hover { background: #bdb08c; } 
    
    /* ======================================== NIVEAU 3 ======================================== */ 
    .submenu .submenu .submenu { margin-top: 3px; } 
    .submenu .submenu .submenu .menu-link { background: #f5f1e6; color: #40392d; border-bottom: 1px solid #ded5c2; } 
    
    /* Alternance des lignes */ 
    .submenu .submenu .submenu .menu-link:nth-child(even) { background: #e9e1cf; } 
    .submenu .submenu .submenu .menu-link:hover { background: #d8cba9; color: #2f291f; } 
    
    /* ======================================== SOUS-MENUS ======================================== */ 
    .submenu { display: none; margin-left: 20px; } .submenu.open { display: block; } 
    
    /* ======================================== FLÈCHES ======================================== */ 
    .arrow { display: inline-block; width: 20px; transition: transform 0.2s; } 
    .open > .menu-item .arrow { transform: rotate(90deg); } 
    
    /* ======================================== PSAUME + NUMÉRO ======================================== */ 
    .psaume-link { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f5f1e6; color: #40392d; } 
    .psaume-link input { width: 55px; padding: 5px; box-sizing: border-box; } .psaume-link button { padding: 5px 10px; cursor: pointer; } 
    
    /* Bouton désactivé */ .psaume-link button:disabled { opacity: 0.45; cursor: not-allowed; }