/* ========================================
   MON BUDGET TRANQUILLE - CSS PRINCIPAL
   Version 2.0 - Swiper
   ======================================== */

/* ========================================
   1. VARIABLES - MODE CLAIR / SOMBRE
   ======================================== */

body {
    --bg-body: #fdfcf9;
    --bg-carte: white;
    --bg-input: #f5f5f5;
    --text-primary: #4a5568;
    --text-secondary: #666;
    --text-label: #4a5568;
    --border-input: #e0e0e0;
    --shadow-carte: 0 2px 10px rgba(0,0,0,0.1);
    --bg-parametre: #f5f5f5;
    --bg-ligne: #f9f9f9;
}

body.theme-sombre {
    --bg-body: #1a1a2e;
    --bg-carte: #16213e;
    --bg-input: #0f0f1a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-label: #b0b0b0;
    --border-input: #333;
    --shadow-carte: 0 2px 10px rgba(0,0,0,0.3);
    --bg-parametre: #16213e;
    --bg-ligne: #1e2a4a;
}

/* ========================================
   2. GÉNÉRAL
   ======================================== */

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: Arial, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

main {
    max-width: 400px;
    margin: 0 auto;
}

button:focus,
a:focus,
select:focus {
    outline: none;
}

/* ========================================
   3. TITRES
   ======================================== */

h1 {
    color: var(--text-primary);
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* ========================================
   4. SÉLECTEUR DE MOIS
   ======================================== */

.selecteur-mois {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 5px;
    flex-shrink: 0;
}

.mois-actuel {
    color: #4a5568;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    min-width: 150px;
    text-align: center;
}

.btn-mois-nav-gauche,
.btn-mois-nav-droite {
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    flex-shrink: 0;
}

.btn-mois-nav-gauche svg,
.btn-mois-nav-droite svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   5. PAGES SANS SÉLECTEUR - ALIGNEMENT
   ======================================== */

.page9-parametres .header-burger,
.page-export-import .header-burger,
.page-historique-mois .header-burger {
    margin-top: 18px;
    margin-bottom: 38px;
}

.page1-ajouter-depense .header-burger {
    margin-top: 18px;
    margin-bottom: 22px;
}

/* ========================================
   6. BOUTONS - STRUCTURE DE BASE
   ======================================== */

.btn-retour {
    background: transparent;
    color: #4a5568;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin: 20px auto 10px auto;
    text-align: center;
    transition: all 0.2s;
}

.btn-retour:active {
    color: #2d3748;
}

.btn-suivant {
    width: 50%;
    padding: 15px 5px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin: 15px auto;
    position: relative;
    box-shadow: 
        3px 3px 0 0 #c0c0c0,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

/* ========================================
   7. FORMULAIRES
   ======================================== */

.formulaire,
.section-parametres {
    background: var(--bg-carte);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: var(--shadow-carte);
}

label {
    display: block;
    color: var(--text-label);
    margin-top: 12px;
    margin-left: 55px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
}

input {
    width: 80%;
    padding: 14px;
    margin: 5px auto;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    display: block;
    box-sizing: border-box;
    font-size: 15px;
    background: var(--bg-input);
    color: var(--text-primary);
}

input:focus,
select:focus,
.select-categorie:focus {
    outline: 2px solid #ddd;
    outline-offset: -1px;
    border-color: #ddd;
}

.select-categorie {
    width: 70%;
    padding: 10px;
    margin: 5px auto;
    border: 1px solid var(--border-input);
    border-radius: 5px;
    display: block;
    background: var(--bg-input);
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: var(--text-primary);
    box-sizing: border-box;
}

/* ========================================
   8. PAGES ONBOARDING (1er démarrage)
   ======================================== */

/* Pages Onboarding - Largeur limitée */
.demarrage-1-revenus main,
.demarrage-2-prelevements main,
.demarrage-3-budget main {
    padding: 15px 20px;
    box-sizing: border-box;
}

/* === Onboarding Revenus === */
.demarrage-1-revenus h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #94cca3, #c6e7b2, #dff2e1);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(102, 187, 106, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.demarrage-1-revenus input:focus,
.demarrage-1-revenus select:focus {
    outline: 2px solid #81c784;
    outline-offset: -1px;
    border-color: #81c784;
}

.demarrage-1-revenus .btn-ajouter-revenus {
    width: 65%;
    padding: 10px;
    border-radius: 8px;
    margin: 20px auto;
    font-size: 16px;
    font-weight: bold;
    display: block;
    background: #c6e7b2;
    color: #4a5568;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.demarrage-1-revenus .btn-ajouter-revenus:active {
    background: #b8ddb8;
    border-color: #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-1-revenus .btn-suivant {
    background: #66bb6a;
    color: white;
    border: 2px solid #5da55d;
    margin: 71px auto 0 auto;
    box-shadow: 
        3px 3px 0 0 #4a8a4a,
        0 4px 8px rgba(0,0,0,0.15);
}

.demarrage-1-revenus .btn-suivant:active {
    background: #5da55d;
    border-color: #4a8a4a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-1-revenus .indicateur .actif {
    color: #6db56d;
}

/* === Onboarding Prélèvements === */
.demarrage-2-prelevements h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #7ec0f8, #a8d5f7, #cde9fc);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(107, 164, 235, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.demarrage-2-prelevements input:focus,
.demarrage-2-prelevements select:focus {
    outline: 2px solid #6ba4eb;
    outline-offset: -1px;
    border-color: #6ba4eb;
}

.demarrage-2-prelevements .btn-ajouter-prelevements {
    width: 65%;
    padding: 10px;
    border-radius: 8px;
    margin: 20px auto;
    font-size: 16px;
    font-weight: bold;
    display: block;
    background: #a8d5f7;
    color: #4a5568;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.demarrage-2-prelevements .btn-ajouter-prelevements:active {
    background: #90c4ed;
    border-color: #5b9dd6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-2-prelevements .btn-suivant {
    background: #7db3ef;
    color: white;
    border: 2px solid #5b9dd6;
    box-shadow: 
        3px 3px 0 0 #4278a8,
        0 4px 8px rgba(0,0,0,0.15);
}

.demarrage-2-prelevements .btn-suivant:active {
    background: #5b9dd6;
    border-color: #4a8ac2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-2-prelevements .indicateur .actif {
    color: #7db3ef;
}

/* === Onboarding Budget === */
.demarrage-3-budget h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #f4a5c0, #f9d5e5, #fce9f0);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(229, 145, 195, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.demarrage-3-budget input:focus,
.demarrage-3-budget select:focus {
    outline: 2px solid #e591c3;
    outline-offset: -1px;
    border-color: #e591c3;
}

.demarrage-3-budget .btn-ajouter-budget {
    width: 65%;
    padding: 10px;
    border-radius: 8px;
    margin: 20px auto;
    font-size: 16px;
    font-weight: bold;
    display: block;
    background: #f9d5e5;
    color: #6b2447;
    border: 2px solid #e591c3;
    box-shadow: 
        3px 3px 0 0 #d47aa8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.demarrage-3-budget .btn-ajouter-budget:active {
    background: #f7c1dd;
    border-color: #e591c3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-3-budget .btn-suivant {
    background: #eba3d1;
    color: white;
    border: 2px solid #d87bb5;
    box-shadow: 
        3px 3px 0 0 #b5608f,
        0 4px 8px rgba(0,0,0,0.15);
}

.demarrage-3-budget .btn-suivant:active {
    background: #d87bb5;
    border-color: #c06a9f;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.demarrage-3-budget .indicateur .actif {
    color: #eba3d1;
}

.espace-haut {
    height: 74px;
}

/* === Éléments communs Onboarding === */
.btn-ajouter-categorie-revenus,
.btn-ajouter-categorie-prelevements,
.btn-ajouter-categorie-budget {
    background: transparent;
    color: #4a5568;
    padding: 8px;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-ajouter-categorie-revenus:active,
.btn-ajouter-categorie-prelevements:active,
.btn-ajouter-categorie-budget:active {
    background: #f5f5f5;
    border-color: #b0b0b0;
}

.liste-lignes-ajoutees-onboarding {
    padding: 0px 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.ligne-ajoutee-onboarding {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 8px 0;
    border-radius: 6px;
    background: #f9f9f9;
    transition: background 0.2s;
    min-height: 42px;
}

.texte-ajoute {
    flex: 1;
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
}

.actions-icone {
    display: flex;
    gap: 8px;
}

.btn-modifier-icone,
.btn-supprimer-icone {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 5px;
    border-radius: 5px;
    transition: background 0.2s;
}

.btn-modifier-icone:active {
    background: rgba(107, 164, 235, 0.2);
}

.btn-supprimer-icone:active {
    background: rgba(244, 67, 54, 0.2);
}

.total-container-onboarding {
    position: relative;
    padding: 10px 0;
    margin-top: 10px;
}

.revenus-total-onboarding,
.prelevements-total-onboarding,
.budget-total-onboarding {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #90a4ae;
    font-weight: bold;
    font-size: 20px;
    color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.15);
    min-height: 46px;
}

.col-nom-total-onboarding {
    flex: 2;
    text-align: left;
    padding-left: 10px;
}

.col-montant-total-onboarding {
    flex: 3;
    text-align: right;
    padding-right: 10px;
}

.separateur-1 {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 12px 0;
}

.separateur-gras-onboarding {
    border: none;
    border-top: 3px solid #4a5568;
    margin: 15px 0;
}

.total-container-onboarding .separateur-gras-onboarding {
    margin: 0 0 15px 0;
}

.indicateur {
    text-align: center;
    margin-top: 15px;
}

.indicateur span {
    font-size: 18px;
    margin: 0 4px;
    color: #4a5568;
}

.indicateur .actif {
    font-weight: bold;
}

.indicateur p {
    font-size: 13px;
    color: #4a5568;
    margin-top: 5px;
}

/* ========================================
   9. PAGE 1 - NOUVELLE DÉPENSE
   ======================================== */

.page1-ajouter-depense h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #ffc266, #ffd8a8, #ffebcc);
    box-shadow: 
        0 4px 15px rgba(255, 179, 102, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.page1-ajouter-depense .formulaire {
    margin-bottom: 0;
}

.page1-ajouter-depense input:focus,
.page1-ajouter-depense select:focus {
    outline: 2px solid #ffb366;
    outline-offset: -1px;
    border-color: #ffb366;
}

.page1-ajouter-depense .btn-ajouter-depense {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 20px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #ffd8a8;
    color: #4a5568;
    border: 2px solid #ffb366;
    box-shadow: 
        3px 3px 0 0 #cc8a3d,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page1-ajouter-depense .btn-ajouter-depense:active {
    background: #ffc894;
    border-color: #ffb366;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.btn-ajouter-categorie-nouvelle-depense {
    background: transparent;
    color: #4a5568;
    padding: 8px;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-ajouter-categorie-nouvelle-depense:active {
    background: #f5f5f5;
    border-color: #b0b0b0;
}

/* ========================================
   AUTOCOMPLÉTION - NOUVELLE DÉPENSE
   ======================================== */

.input-avec-autocomplete {
    position: relative;
    width: 80%;
    margin: 5px auto;
}

.input-avec-autocomplete input {
    width: 100%;
    margin: 0;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ffb366;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.autocomplete-suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #4a5568;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autocomplete-suggestion-item:last-child {
    border-bottom: none;
}

.autocomplete-suggestion-item:active {
    background: #fff4e6;
}

.suggestion-nom {
    flex: 1;
}

.suggestion-count {
    font-size: 12px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Mode sombre */
body.theme-sombre .autocomplete-suggestions {
    background: var(--bg-input);
    border-color: #ffb366;
}

body.theme-sombre .autocomplete-suggestion-item {
    color: #e0e0e0;
    border-bottom-color: #444;
}

body.theme-sombre .autocomplete-suggestion-item:active {
    background: #4a3d2a;
}

body.theme-sombre .suggestion-count {
    background: #3a3a4a;
    color: #b0b0b0;
}

/* ========================================
   10. PAGE 2 - RÉSUMÉ
   ======================================== */

.page2-resume .selecteur-mois {
    background: white;
}

.page2-resume .selecteur-mois .mois-actuel {
    color: #4a5568;
    text-shadow: none;
}

.page2-resume .burger-ligne {
    background: #4a5568;
}

.page2-resume .btn-mois-nav-gauche,
.page2-resume .btn-mois-nav-droite {
    background: linear-gradient(135deg, #c6e7b2, #a8d5f7, #f9d5e5, #ffd8a8);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        3px 3px 0 0 #a0a0a0,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page2-resume .btn-mois-nav-gauche:active,
.page2-resume .btn-mois-nav-droite:active {
    opacity: 0.8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page2-resume h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #c6e7b2 0%, #a8d5f7 25%, #f9d5e5 50%, #ffd8a8 75%, #c6e7b2 100%);
    box-shadow: 
        0 4px 15px rgba(100, 150, 200, 0.35),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.tableau-resume {
    background: var(--bg-carte);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-carte);
    flex: none; /* Ne pas s'étirer */
    max-height: none; /* Pas de limite */
    overflow: visible;
}

.ligne-resume {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 8px;
    min-height: 42px;
}

.ligne-resume .label {
    font-size: 15px;
    color: #4a5568;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
    padding-right: 15px;
}

.ligne-resume .montant {
    font-size: 17px;
    color: #4a5568;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 10px;
}

.ligne-resume.revenus {
    background: linear-gradient(135deg, #94cca3, #c6e7b2, #dff2e1);
}

.ligne-resume.prelevements-automatiques {
    background: linear-gradient(135deg, #7ec0f8, #a8d5f7, #cde9fc);
}

.ligne-resume.budget-prevu {
    background: linear-gradient(135deg, #f4a5c0, #f9d5e5, #fce9f0);
}

.ligne-resume.depenses-totales-prevues {
    background: linear-gradient(135deg, #c4b5e0, #e5d5f9, #f0eaf8);
}

.ligne-resume.depenses-mois {
    background: linear-gradient(135deg, #ffc266, #ffd8a8, #ffebcc);
}

.budget-disponible-restant,
.ligne-resume.budget-disponible-restant {
    background: #fff;
    border: 3px solid;
    margin-top: 8px;
    min-height: 46px;
    padding: 10px;
}

.label-important {
    font-size: 17px;
    color: #4a5568;
    font-weight: bold;
}

.montant-important {
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

.separateur-gras-resume {
    border: none;
    border-top: 3px solid #4a5568;
    margin: 18px 0;
}

/* ========================================
   11. PAGE 3 - REVENUS
   ======================================== */

.page3-revenus .btn-mois-nav-gauche,
.page3-revenus .btn-mois-nav-droite {
    background: #c6e7b2;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page3-revenus .btn-mois-nav-gauche:active,
.page3-revenus .btn-mois-nav-droite:active {
    background: #b8ddb8;
    border-color: #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page3-revenus h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #94cca3, #c6e7b2, #dff2e1);
    box-shadow: 
        0 4px 15px rgba(102, 187, 106, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.page3-revenus .btn-ajouter-principal {
    width: 65%;
    padding: 15px 5px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin: 20px auto;
    background: #c6e7b2;
    color: #4a5568;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.page3-revenus .btn-ajouter-principal:active {
    background: #b8ddb8;
    border-color: #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* ========================================
   12. PAGE 4 - PRÉLÈVEMENTS AUTOMATIQUES
   ======================================== */

.page4-prelevements-automatiques .btn-mois-nav-gauche,
.page4-prelevements-automatiques .btn-mois-nav-droite {
    background: #a8d5f7;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page4-prelevements-automatiques .btn-mois-nav-gauche:active,
.page4-prelevements-automatiques .btn-mois-nav-droite:active {
    background: #90c4ed;
    border-color: #5b9dd6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page4-prelevements-automatiques h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #7ec0f8, #a8d5f7, #cde9fc);
    box-shadow: 
        0 4px 15px rgba(107, 164, 235, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.page4-prelevements-automatiques .btn-ajouter-principal {
    width: 65%;
    padding: 15px 5px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin: 20px auto;
    background: #a8d5f7;
    color: #4a5568;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.page4-prelevements-automatiques .btn-ajouter-principal:active {
    background: #90c4ed;
    border-color: #5b9dd6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* ========================================
   13. PAGE 5 - BUDGET PRÉVU
   ======================================== */

.page5-budget-prevu .btn-mois-nav-gauche,
.page5-budget-prevu .btn-mois-nav-droite {
    background: #f9d5e5;
    border: 2px solid #e591c3;
    box-shadow: 
        3px 3px 0 0 #d47aa8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page5-budget-prevu .btn-mois-nav-gauche:active,
.page5-budget-prevu .btn-mois-nav-droite:active {
    background: #f7c1dd;
    border-color: #e591c3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page5-budget-prevu h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #f4a5c0, #f9d5e5, #fce9f0);
    box-shadow: 
        0 4px 15px rgba(229, 145, 195, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.page5-budget-prevu .btn-ajouter-principal {
    width: 65%;
    padding: 15px 5px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin: 20px auto;
    background: #f9d5e5;
    color: #4a5568;
    border: 2px solid #e591c3;
    box-shadow: 
        3px 3px 0 0 #d47aa8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.page5-budget-prevu .btn-ajouter-principal:active {
    background: #f7c1dd;
    border-color: #e591c3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.col-categorie-budget {
    flex: 2;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
    font-size: 15px;
    color: #4a5568;
}

.col-montant-budget {
    flex: 1;
    text-align: right;
    padding-right: 15px;
    font-weight: bold;
    font-size: 17px;
    color: #4a5568;
}

/* ========================================
   14. PAGES ACTION - MARGES COHÉRENTES
   ======================================== */

.action-nouveau-revenu main,
.action-nouveau-prelevement main,
.page-ajouter-categorie-budget main,
.page-ajouter-categorie-revenus main,
.page-ajouter-categorie-prelevements main {
    padding: 15px 20px;
    box-sizing: border-box;
}

/* ========================================
   15. PAGE 6 - DÉPENSES DU MOIS
   ======================================== */

.page6-depenses-mois .btn-mois-nav-gauche,
.page6-depenses-mois .btn-mois-nav-droite {
    background: #ffd8a8;
    border: 2px solid #ffb366;
    box-shadow: 
        3px 3px 0 0 #cc8a3d,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page6-depenses-mois .btn-mois-nav-gauche:active,
.page6-depenses-mois .btn-mois-nav-droite:active {
    background: #ffc894;
    border-color: #ffb366;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page6-depenses-mois h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #ffb84d, #ffd8a8, #fff0d9);
    box-shadow: 
        0 4px 15px rgba(255, 167, 38, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.page6-depenses-mois .btn-ajouter-principal {
    width: 65%;
    padding: 15px 5px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin: 20px auto;
    background: #ffd8a8;
    color: #4a5568;
    border: 2px solid #ffb366;
    box-shadow: 
        3px 3px 0 0 #cc8a3d,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.page6-depenses-mois .btn-ajouter-principal:active {
    background: #ffc894;
    border-color: #ffb366;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.col-moyen-paiement {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

.col-moyen-paiement svg {
    width: 20px;
    height: 20px;
}

/* Dépenses du Mois - Espacement réduit */
.page6-depenses-mois .col-nom {
    padding-right: 8px;
}

.page6-depenses-mois .col-montant {
    padding: 0 5px;
}

/* ========================================
   16. PAGE 7 - DÉPENSES PAR CATÉGORIES
   ======================================== */

.page7-depenses-categories .btn-mois-nav-gauche,
.page7-depenses-categories .btn-mois-nav-droite {
    background: #ffc9b9;
    border: 2px solid #f1ac9c;
    box-shadow: 
        3px 3px 0 0 #c97a6a,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page7-depenses-categories .btn-mois-nav-gauche:active,
.page7-depenses-categories .btn-mois-nav-droite:active {
    background: #f5b6a7;
    border-color: #e7a797;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page7-depenses-categories h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #ffab91, #ffc9b9, #ffe0d6);
    box-shadow: 
        0 4px 15px rgba(255, 138, 101, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.ligne-categorie-depense {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 8px;
    min-height: 42px;
    position: relative;
}

.ligne-categorie-depense .label-categorie {
    font-size: 15px;
    color: #4a5568;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
    padding-right: 15px;
}

.ligne-categorie-depense .montant-categorie {
    font-size: 17px;
    color: #4a5568;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 10px;
}

.ligne-categorie-depense .compteur-achats {
    font-size: 12px;
    color: #7f8c8d;
    font-style: italic;
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 10px;
}

.ligne-categorie-container {
    position: relative;
    background: var(--bg-carte);
    border-radius: 8px;
    margin: 4px 0;
    padding-bottom: 8px;
}

.ligne-categorie-container .ligne-categorie-depense {
    margin: 0;
}

.ligne-categorie-container::after {
    content: '';
    width: 6px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 50%;
    border-radius: 3px;
    transform: translateY(-50%);
    background-color: var(--couleur-categorie, #ffd8a8);
}

.ligne-categorie-container .ligne-categorie-depense::after {
    display: none;
}

.barre-progression-container {
    width: calc(100% - 40px);
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    margin: 5px 20px 0 20px;
    overflow: hidden;
}

.barre-progression {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    background: linear-gradient(90deg, 
        #4CAF50 0%, 
        #81c784 30%, 
        #4dd0e1 50%,
        #64b5f6 70%, 
        #b39ddb 90%,
        #9575cd 100%
    );
}

.montants-categorie {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 15px;
    font-weight: bold;
}

.separateur-montant {
    color: #999;
    font-size: 14px;
}

.budget-prevu-texte {
    color: #4a5568;
    font-size: 16px;
}

.montant-depense {
    font-size: 16px;
    font-weight: bold;
}

/* ========================================
   PAGE 8 - DÉPENSES PAR MOYEN
   ======================================== */

.ligne-detail.moyens-total::after,
.total-container-moyens::after {
    display: none;
}

.page8-depenses-moyens .btn-mois-nav-gauche,
.page8-depenses-moyens .btn-mois-nav-droite {
    background: #80deea;
    border: 2px solid #4dd0e1;
    box-shadow: 
        3px 3px 0 0 #26c6da,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page8-depenses-moyens .btn-mois-nav-gauche:active,
.page8-depenses-moyens .btn-mois-nav-droite:active {
    background: #4dd0e1;
    border-color: #26c6da;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page8-depenses-moyens h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #4dd0e1, #80deea, #b2ebf2);
    box-shadow: 
        0 4px 15px rgba(77, 208, 225, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.tableau-depenses-moyens {
    background: var(--bg-carte);
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--shadow-carte);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.moyens-total .montant-total-moyens {
    flex: 3;
    text-align: right;
    padding-right: 10px;
}

.groupe-moyen {
    margin-bottom: 12px;
}

.entete-moyen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #4dd0e1, #80deea);
    border-radius: 8px;
    color: white;
}

.icone-moyen {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icone-moyen svg {
    width: 100%;
    height: 100%;
}

.nom-moyen {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
}

.total-moyen {
    font-weight: 700;
    font-size: 16px;
}

.liste-depenses-moyen {
    padding: 5px 0 0 0;
}

.ligne-depense-moyen {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.ligne-depense-moyen:last-child {
    border-bottom: none;
}

.ligne-depense-moyen .nom-depense {
    color: var(--text-primary);
}

.ligne-depense-moyen .montant-depense {
    font-weight: 600;
    color: var(--text-primary);
}

/* Date dans les lignes de dépenses */
.ligne-depense-moyen .date-depense-moyen {
    min-width: 25px;
    font-weight: 500;
    color: var(--texte-secondaire);
    text-align: center;
}

/* Mode étendu pour page Dépenses par Moyen */
.affichage-etendu .page8-depenses-moyens .tableau-depenses-moyens {
    max-height: none !important;
    overflow: visible;
}

.affichage-etendu .page8-depenses-moyens .lignes-scrollables {
    max-height: none;
    overflow: visible;
}

.affichage-etendu .page8-depenses-moyens {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* Message désactivé */
.message-desactive-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.emoji-desactive {
    font-size: 48px;
    margin-bottom: 15px;
}

.message-desactive-slide p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.message-desactive-slide .sous-texte {
    font-size: 14px;
    color: var(--text-secondary);
}

.contenu-moyens-actif {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.contenu-moyens-inactif {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mode sombre */
body.theme-sombre .page8-depenses-moyens h1 {
    background: linear-gradient(135deg, #1a4a4f, #2a5a5f, #3a6a6f);
}

body.theme-sombre .page8-depenses-moyens .selecteur-mois {
    background: linear-gradient(135deg, #1a4a4f, #2a5a5f, #3a6a6f);
}

body.theme-sombre .entete-moyen {
    background: linear-gradient(135deg, #1a4a4f, #2a5a5f);
}

body.theme-sombre .ligne-depense-moyen {
    border-bottom-color: #333;
}

/* ========================================
   17. PAGE 9 - PARAMÈTRES
   ======================================== */

.page9-parametres h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #dce0e3, #f5f5f5, #fafafa);
    box-shadow: 
        0 4px 15px rgba(176, 190, 197, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.section-parametres {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.titre-section {
    color: #4a5568;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.lien-parametre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: var(--bg-parametre);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.lien-parametre:active {
    background: #e8e8e8;
}

.texte-lien {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.fleche {
    font-size: 20px;
    color: #6ba4eb;
    font-weight: bold;
}

.parametre-avec-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: white;
    border-radius: 8px;
    gap: 15px;
}

.parametre-avec-select .texte-lien {
    font-size: 16px;
    color: #2c3e50;
    flex: 1;
    min-width: 80px;
}

.select-page-accueil,
.select-theme,
#select-affichage-listes {
    padding: 8px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: #4a5568;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 170px;
}

.select-page-accueil:focus,
.select-theme:focus,
#select-affichage-listes:focus {
    outline: 2px solid #3498db;
    outline-offset: -1px;
    border-color: #3498db;
}

.description-parametre {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 10px 0;
}

.version {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.version p {
    color: #999;
    font-size: 14px;
    margin: 0;
}

/* ========================================
   18. PAGE STATISTIQUES
   ======================================== */

.page-statistiques .btn-mois-nav-gauche,
.page-statistiques .btn-mois-nav-droite {
    background: #d1c4e9;
    border: 2px solid #b39ddb;
    box-shadow: 
        3px 3px 0 0 #9575cd,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page-statistiques .btn-mois-nav-gauche:active,
.page-statistiques .btn-mois-nav-droite:active {
    background: #c4b5de;
    border-color: #a68dcc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page-statistiques .selecteur-mois {
    margin-bottom: 20px;
}

.page-statistiques h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #b39ddb, #d1c4e9, #ede7f6);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(149, 117, 205, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.section-stats {
    background: var(--bg-carte);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-carte);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-card {
    background: var(--bg-parametre);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.stat-card.vert .stat-value { color: #4CAF50; }
.stat-card.bleu .stat-value { color: #64b5f6; }
.stat-card.rose .stat-value { color: #e591c3; }
.stat-card.orange .stat-value { color: #FF9800; }
.stat-card.violet .stat-value { color: #9575cd; }

.titre-section-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.titre-section-stats h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.titre-centre {
    text-align: center;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.pastille-titre {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.legende {
    margin-top: 15px;
}

.legende-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-input);
}

.legende-item:last-child {
    border-bottom: none;
}

.legende-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.legende-couleur {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.legende-nom {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legende-valeur {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0 10px;
    white-space: nowrap;
}

.legende-pourcent {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 45px;
    text-align: right;
}

.message-vide {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 20px;
}

/* ========================================
   PAGE COMPARATIF
   ======================================== */

/* Pleine hauteur comme les autres pages */
.swiper-slide.page-comparatif {
    overflow: hidden;
}

.swiper-slide.page-comparatif main {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.page-comparatif .header-comparatif {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 5px;
    flex-shrink: 0;
}

.page-comparatif .annee-actuelle {
    color: #4a5568;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    min-width: 80px;
    text-align: center;
}

.page-comparatif .btn-annee-nav-gauche,
.page-comparatif .btn-annee-nav-droite {
    background: #ddd0b8;
    border: 2px solid #c9b896;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        3px 3px 0 0 #a89a78,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.page-comparatif .btn-annee-nav-gauche:active,
.page-comparatif .btn-annee-nav-droite:active {
    background: #d0c4ac;
    border-color: #b8a886;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.page-comparatif .btn-annee-nav-gauche svg,
.page-comparatif .btn-annee-nav-droite svg {
    width: 16px;
    height: 16px;
}

.page-comparatif h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #c9b896, #ddd0b8, #efe8da);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(201, 184, 150, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    min-height: 48px;
    margin-bottom: 10px;
}

/* Indicateur de sous-slides */
.indicateur-sous-slides {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
    flex-shrink: 0;
}

.point-sous-slide {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.4;
    border: 2px solid transparent;
}

.point-sous-slide:nth-child(1) { background: #c6e7b2; } /* Revenus - vert clair */
.point-sous-slide:nth-child(2) { background: #a8d5f7; } /* Prélèvements - bleu clair */
.point-sous-slide:nth-child(3) { background: #f9d5e5; } /* Budget Prévu - rose clair */
.point-sous-slide:nth-child(4) { background: #d1c4e9; } /* Dépenses Prévues - violet clair */
.point-sous-slide:nth-child(5) { background: #ffd8a8; } /* Dépenses Mois - orange clair */
.point-sous-slide:nth-child(6) { background: #c6e7b2; } /* Restant - vert clair (positif = bien !) */

.point-sous-slide.actif {
    opacity: 1;
    transform: scale(1.3);
    border-color: #4a5568;
}

/* Conteneur des sous-slides */
.swiper-comparatif {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
    margin-bottom: 10px;
}

.swiper-wrapper-comparatif {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
}

.sous-slide-comparatif {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 5px;
    box-sizing: border-box;
}

.titre-sous-slide {
    text-align: center;
    color: #4a5568;
    font-size: 15px;
    margin: 0 0 8px 0;
    padding: 6px;
    background: var(--bg-carte);
    border-radius: 8px;
    box-shadow: var(--shadow-carte);
    flex-shrink: 0;
}

.graphique-container {
    flex: 1;
    background: var(--bg-carte);
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-carte);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 70px;
}

.graphique-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Mode sombre */
body.theme-sombre .page-comparatif h1 {
    background: linear-gradient(135deg, #4a4030, #5a5040, #6a6050);
}

body.theme-sombre .page-comparatif .header-comparatif {
    background: linear-gradient(135deg, #4a4030, #5a5040, #6a6050);
}

body.theme-sombre .page-comparatif .annee-actuelle {
    color: #e0e0e0;
}

body.theme-sombre .point-sous-slide {
    background: #555;
}

body.theme-sombre .point-sous-slide.actif {
    background: #c9b896;
}

body.theme-sombre .titre-sous-slide {
    color: #e0e0e0;
}

/* ========================================
   19. TABLEAUX DÉTAIL
   ======================================== */

.tableau-detail,
.tableau-depenses-categories {
    background: var(--bg-carte);
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--shadow-carte);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.lignes-scrollables {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ligne-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 8px;
    min-height: 42px;
    position: relative;
    overflow: hidden;
    background: var(--bg-carte);
    color: var(--text-primary);
}

.col-nom {
    flex: 2.5;
    text-align: left;
    padding-right: 16px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 15px;
    color: var(--text-primary);
}

.col-montant {
    flex: 1.5;
    text-align: right;
    padding: 0 10px;
    font-weight: bold;
    font-size: 17px;
    color: var(--text-primary);
    white-space: nowrap;
}

.col-categorie {
    flex: 2;
    text-align: right;
    padding-right: 10px;
    padding-left: 15px;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.col-date {
    flex: 0.8;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
    color: var(--text-primary);
    font-size: 14px;
}

/* ========================================
   20. TOTAL + SÉPARATEURS
   ======================================== */

.total-container,
.total-container-categories,
.total-container-moyens {
    position: relative;
    padding: 10px 0;
    margin-top: 10px;
    flex-shrink: 0;
    background: var(--bg-carte);
}

.total-container .separateur-gras,
.total-container-categories .separateur-gras,
.total-container-moyens .separateur-gras {
    margin: 0 0 25px 0;
}

.separateur-gras {
    border: none;
    border-top: 3px solid #4a5568;
    margin: 18px 0;
}

.revenus-total,
.prelevements-automatiques-total,
.budget-prevu-total,
.depenses-mois-total,
.categories-total,
.moyens-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #90a4ae;
    font-weight: bold;
    font-size: 20px;
    color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.15);
    min-height: 46px;
}

.col-nom-total,
.label-total {
    flex: 2;
    text-align: left;
    padding-left: 10px;
}

.col-montant-total,
.montant-total-categories {
    flex: 3;
    text-align: right;
    padding-right: 10px;
}

/* ========================================
   21. MENU ACTIONS (Modifier/Supprimer)
   ======================================== */

.ligne-selectionnee {
    outline: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-actions {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    border-radius: 8px;
}

.btn-action-modifier,
.btn-action-supprimer,
.btn-action-annuler {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
}

.btn-action-modifier {
    background: #6ba4eb;
    color: white;
}

.btn-action-supprimer {
    background: #e57373;
    color: white;
}

.btn-action-annuler {
    background: #e0e0e0;
    color: #4a5568;
}

/* ========================================
   22. PASTILLES COLORÉES
   ======================================== */

.ligne-detail::after {
    content: '';
    width: 6px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 50%;
    border-radius: 3px;
    transform: translateY(-50%);
    background-color: var(--couleur-categorie, #b3e5fc);
}

.ligne-categorie-depense::after {
    content: '';
    width: 6px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 50%;
    border-radius: 3px;
    transform: translateY(-50%);
    background-color: var(--couleur-categorie, #ffd8a8);
}

.total-container::after,
.ligne-detail.revenus-total::after,
.ligne-detail.prelevements-automatiques-total::after,
.ligne-detail.budget-prevu-total::after,
.ligne-detail.depenses-mois-total::after,
.total-container-categories::after,
.ligne-detail.categories-total::after {
    display: none;
}

/* ========================================
   23. PAGES ACTION (Formulaires)
   ======================================== */

/* Nouveau Revenu */
.action-nouveau-revenu h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #94cca3, #c6e7b2, #dff2e1);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(102, 187, 106, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.action-nouveau-revenu input:focus,
.action-nouveau-revenu select:focus {
    outline: 2px solid #81c784;
    outline-offset: -1px;
    border-color: #81c784;
}

.action-nouveau-revenu .btn-ajouter-revenus {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 30px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #c6e7b2;
    color: #4a5568;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.action-nouveau-revenu .btn-ajouter-revenus:active {
    background: #b8ddb8;
    border-color: #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* Catégorie Revenus */
.page-ajouter-categorie-revenus h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #94cca3, #c6e7b2, #dff2e1);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(102, 187, 106, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.page-ajouter-categorie-revenus input:focus {
    outline: 2px solid #81c784;
    outline-offset: -1px;
    border-color: #81c784;
}

.page-ajouter-categorie-revenus .btn-ajouter-categorie-revenus-action {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 30px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #c6e7b2;
    color: #4a5568;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page-ajouter-categorie-revenus .btn-ajouter-categorie-revenus-action:active {
    background: #b8ddb8;
    border-color: #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* Nouveau Prélèvement */
.action-nouveau-prelevement h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #7ec0f8, #a8d5f7, #cde9fc);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(107, 164, 235, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.action-nouveau-prelevement input:focus,
.action-nouveau-prelevement select:focus {
    outline: 2px solid #6ba4eb;
    outline-offset: -1px;
    border-color: #6ba4eb;
}

.action-nouveau-prelevement .btn-ajouter-prelevements {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 30px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #a8d5f7;
    color: #4a5568;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.action-nouveau-prelevement .btn-ajouter-prelevements:active {
    background: #90c4ed;
    border-color: #5b9dd6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* Catégorie Prélèvements */
.page-ajouter-categorie-prelevements h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #7ec0f8, #a8d5f7, #cde9fc);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(107, 164, 235, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.page-ajouter-categorie-prelevements input:focus {
    outline: 2px solid #6ba4eb;
    outline-offset: -1px;
    border-color: #6ba4eb;
}

.page-ajouter-categorie-prelevements .btn-ajouter-categorie-prelevements-action {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 30px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #a8d5f7;
    color: #4a5568;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page-ajouter-categorie-prelevements .btn-ajouter-categorie-prelevements-action:active {
    background: #90c4ed;
    border-color: #5b9dd6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* Catégorie Budget */
.page-ajouter-categorie-budget h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #f4a5c0, #f9d5e5, #fce9f0);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(229, 145, 195, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.page-ajouter-categorie-budget input:focus {
    outline: 2px solid #e591c3;
    outline-offset: -1px;
    border-color: #e591c3;
}

.page-ajouter-categorie-budget .btn-ajouter-categorie-budget-action {
    width: 65%;
    padding: 12px;
    border-radius: 8px;
    margin: 30px auto;
    font-size: 17px;
    font-weight: bold;
    display: block;
    background: #f9d5e5;
    color: #4a5568;
    border: 2px solid #e591c3;
    box-shadow: 
        3px 3px 0 0 #d47aa8,
        0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.page-ajouter-categorie-budget .btn-ajouter-categorie-budget-action:active {
    background: #f7c1dd;
    border-color: #e591c3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

/* ========================================
   24. PAGE HISTORIQUE DES MOIS
   ======================================== */

.page-historique-mois main {
    padding: 15px 20px;
}

.page-historique-mois h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #dce0e3, #f5f5f5, #fafafa);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(176, 190, 197, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.liste-mois-historique {
    background: var(--bg-carte);
    padding: 15px;
    border-radius: 10px;
    box-shadow: var(--shadow-carte);
}

.mois-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: var(--bg-ligne);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.mois-item:active {
    background: #e8e8e8;
}

.mois-item.mois-actuel {
    background: linear-gradient(135deg, #a8d5a8, #b3e5fc, #c5e1a5);
}

.mois-nom {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
}

.mois-badge {
    font-size: 11px;
    background: white;
    color: #4a5568;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.mois-fleche {
    font-size: 20px;
    color: #6ba4eb;
}

.message-aucun-mois {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}

/* ========================================
   25. PAGE EXPORT / IMPORT
   ======================================== */
.page-export-import main {
    padding: 15px 20px;
}

.page-export-import h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #dce0e3, #f5f5f5, #fafafa);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(176, 190, 197, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

.section-export-import {
    background: var(--bg-carte);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-carte);
}

.section-export-import .titre-section {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #4a5568;
}

.section-export-import .description-section {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.section-export-import .avertissement {
    color: #e67e22;
    font-size: 13px;
    margin-bottom: 15px;
    padding: 10px;
    background: #fef9e7;
    border-radius: 8px;
}

.btn-export,
.btn-import {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    box-sizing: border-box;
}

.btn-export {
    background: linear-gradient(135deg, #66BB6A, #4CAF50);
    color: white;
}

.btn-export:active {
    transform: scale(0.98);
}

.btn-import {
    background: linear-gradient(135deg, #64b5f6, #2196F3);
    color: white;
}

.btn-import:active {
    transform: scale(0.98);
}

/* ========================================
   26. CONNEXION / INSCRIPTION
   ======================================== */

.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #fdfcf9 0%, #f5f5f0 100%);
}

.container-connexion {
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.logo-connexion {
    width: 220px;
    height: 220px;
    margin-bottom: 5px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.sous-titre-connexion {
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

.formulaire-auth {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.formulaire-auth h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #4a5568;
    text-align: center;
}

.champ-formulaire {
    margin-bottom: 15px;
    text-align: left;
}

.champ-formulaire label {
    display: block;
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 5px;
    margin-left: 5px;
    font-weight: 600;
}

.champ-formulaire input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    background: #f9f9f9;
}

.champ-formulaire input:focus {
    outline: none;
    border-color: #6ba4eb;
    background: white;
}

#form-connexion .champ-formulaire input:focus {
    border-color: #6ba4eb;
}

#form-inscription .champ-formulaire input:focus {
    border-color: #81c784;
}

#form-mdp-oublie .champ-formulaire input:focus {
    border-color: #e591c3;
}

.btn-auth {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.2s ease;
}

.btn-connexion {
    background: #a8d5f7;
    color: #4a5568;
    border: 2px solid #6ba4eb;
    box-shadow: 
        3px 3px 0 0 #4a7cb8,
        0 4px 8px rgba(0,0,0,0.15);
}

.btn-connexion:active {
    background: #90c4ed;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.btn-inscription {
    background: #c6e7b2;
    color: #4a5568;
    border: 2px solid #81c784;
    box-shadow: 
        3px 3px 0 0 #5a9a5c,
        0 4px 8px rgba(0,0,0,0.15);
}

.btn-inscription:active {
    background: #b8ddb8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.btn-reset {
    background: #f9d5e5;
    color: #4a5568;
    border: 2px solid #e591c3;
    box-shadow: 
        3px 3px 0 0 #d47aa8,
        0 4px 8px rgba(0,0,0,0.15);
}

.btn-reset:active {
    background: #f7c1dd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transform: translate(3px, 3px);
}

.lien-switch {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.lien-switch a,
.lien-continuer-sans-compte a {
    text-decoration: none;
    font-weight: 600;
}

#form-connexion .lien-switch a {
    color: #5da55d;
}

#form-inscription .lien-switch a {
    color: #6ba4eb;
}

#form-mdp-oublie .lien-switch a {
    color: #6ba4eb;
}

.lien-mdp-oublie {
    margin-top: 10px;
    font-size: 13px;
}

.lien-mdp-oublie a {
    color: #666;
    text-decoration: underline;
    font-weight: bold;
}

.lien-continuer-sans-compte {
    margin-top: 20px;
    font-size: 14px;
}

.lien-continuer-sans-compte a {
    color: #999;
}

.texte-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.message-auth {
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}

.message-auth.erreur {
    background: #ffe5e5;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.message-auth.succes {
    background: #e5ffe5;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* ========================================
   27. PAGES INFORMATIONS (À propos, Aide, Mentions légales)
   ======================================== */

/* Alignement header-burger pour ces pages */
.page-a-propos .header-burger,
.page-aide .header-burger,
.page-mentions-legales .header-burger {
    margin-top: 18px;
    margin-bottom: 38px;
}

/* Main padding */
.page-a-propos main,
.page-aide main,
.page-mentions-legales main {
    padding: 15px 20px;
}

/* Titre h1 - même style que les autres pages paramètres */
.page-a-propos h1,
.page-aide h1,
.page-mentions-legales h1 {
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    background: linear-gradient(135deg, #dce0e3, #f5f5f5, #fafafa);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(176, 190, 197, 0.4),
        0 2px 6px rgba(0,0,0,0.1);
}

/* ========================================
   28. PAGE À PROPOS
   ======================================== */

.section-apropos {
    background: var(--bg-carte);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-carte);
}

.section-apropos.logo-section {
    text-align: center;
    padding: 30px 20px;
}

.logo-app {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nom-app {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0 0 5px 0;
    font-weight: bold;
}

.slogan {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

.texte-apropos {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.texte-apropos:last-child {
    margin-bottom: 0;
}

.lien-externe {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: var(--bg-parametre);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.lien-externe:first-of-type {
    margin-top: 0;
}

.lien-externe:last-child {
    margin-bottom: 0;
}

.lien-externe:active {
    background: #e8e8e8;
}

.icone-lien {
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

.lien-externe .texte-lien {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

.lien-externe .fleche {
    font-size: 20px;
    color: #6ba4eb;
    font-weight: bold;
}

.section-apropos.version-section {
    text-align: center;
    background: transparent;
    box-shadow: none;
    padding: 20px;
}

.version-texte {
    font-size: 14px;
    color: #999;
    margin: 0 0 5px 0;
}

.copyright {
    font-size: 13px;
    color: #bbb;
    margin: 5px 0;
}

/* ========================================
   29. PAGE AIDE
   ======================================== */

.section-aide {
    background: var(--bg-carte);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-carte);
}

.section-aide.intro-aide {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    box-shadow: none;
}

.texte-intro {
    font-size: 16px;
    color: #2e7d32;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

.section-aide .description-section {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.lien-aide-principal {
    display: flex;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid #90caf9;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.lien-aide-principal:active {
    background: linear-gradient(135deg, #bbdefb, #90caf9);
}

.icone-aide {
    font-size: 28px;
    margin-right: 15px;
    flex-shrink: 0;
}

.contenu-lien-aide {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.titre-lien-aide {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.description-lien-aide {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.lien-aide-principal .fleche {
    font-size: 20px;
    color: #6ba4eb;
    font-weight: bold;
}

/* FAQ */
.faq-item {
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-parametre);
}

.faq-item:first-of-type {
    margin-top: 0;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.faq-question span:first-child {
    flex: 1;
    padding-right: 10px;
}

.faq-fleche {
    font-size: 12px;
    color: #6ba4eb;
    transition: transform 0.3s;
}

.faq-item.ouvert .faq-fleche {
    transform: rotate(180deg);
}

.faq-reponse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item.ouvert .faq-reponse {
    max-height: 200px;
}

.faq-reponse p {
    padding: 0 15px 15px 15px;
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ========================================
   30. PAGE MENTIONS LÉGALES
   ======================================== */

.section-legale {
    background: var(--bg-carte);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-carte);
}

.sous-titre-legal {
    font-size: 15px;
    color: var(--text-primary);
    margin: 20px 0 10px 0;
    font-weight: 600;
}

.sous-titre-legal:first-of-type {
    margin-top: 0;
}

.texte-legal {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.texte-legal a {
    color: #6ba4eb;
    text-decoration: none;
}

.texte-legal a:active {
    text-decoration: underline;
}

.liste-legale {
    margin: 10px 0;
    padding-left: 20px;
}

.liste-legale li {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.liste-legale li strong {
    color: var(--text-primary);
}

.section-legale.derniere-maj {
    background: transparent;
    box-shadow: none;
    text-align: center;
    padding: 15px;
}

.texte-legal-small {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* ========================================
   31. SÉLECTEUR DE COULEURS
   ======================================== */

.selecteur-couleurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 15px 0;
    padding: 0 10px;
}

.couleur-option {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #e0e0e0;
    transition: all 0.2s;
}

.couleur-option:active {
    transform: scale(0.9);
}

.couleur-option.selectionnee {
    border-color: #4a5568;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #4a5568;
}

/* ========================================
   32. CATÉGORIES PERSONNALISÉES
   ======================================== */

.liste-categories-existantes {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e0e0e0;
}

.titre-liste-categories {
    color: #4a5568;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.container-categories-personnalisees {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ligne-categorie-personnalisee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin: 10px 0;
    background: #f9f9f9;
    border-radius: 8px;
    transition: all 0.2s;
}

.nom-categorie {
    flex: 1;
    color: #4a5568;
    font-size: 16px;
    font-weight: 500;
}

.pastille-couleur-categorie {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #e0e0e0;
}

.actions-categorie {
    display: flex;
    gap: 10px;
}

.btn-modifier-categorie,
.btn-supprimer-categorie {
    background: transparent;
    border: none;
    font-size: 20px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s;
}

.btn-modifier-categorie:active {
    background: rgba(107, 164, 235, 0.2);
}

.btn-supprimer-categorie:active {
    background: rgba(244, 67, 54, 0.2);
}

.message-aucune-categorie {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}

/* ========================================
   33. MENU BURGER - NAVIGATION
   ======================================== */

.btn-burger {
    background: transparent;
    border: none;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-burger:active {
    background: rgba(0, 0, 0, 0.1);
}

.burger-ligne {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
}

.menu-navigation {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: var(--bg-carte);
    z-index: 1000;
    box-shadow: 2px 0 15px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.menu-navigation.ouvert {
    left: 0;
}

.menu-navigation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid var(--border-input);
    background: var(--bg-body);
}

.menu-navigation-header span {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
}

.btn-fermer-menu {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s;
}

.btn-fermer-menu:active {
    background: #f0f0f0;
}

.menu-navigation-liens {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.lien-menu {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

.lien-menu:active {
    background: #f5f5f5;
}

.lien-menu.actif {
    background: #f0f0f0;
    border-left-color: #4a5568;
}

.pastille-menu {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    border: 2px solid #e0e0e0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.menu-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.header-burger {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* ========================================
   34. SPLASH SCREEN
   ======================================== */

.splash-body {
    background: linear-gradient(135deg, #fdfcf9 0%, #f0ede6 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.splash-container {
    text-align: center;
    animation: fadeIn 0.8s ease-in;
}

.logo-splash {
    width: 280px;
    max-width: 80%;
    height: auto;
    margin-bottom: 40px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-container {
    margin-top: 30px;
}

.spinner {
    width: 25px;
    height: 25px;
    margin: 0 auto 15px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #6ba4eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    color: #4a5568;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* ========================================
   35. MODE SOMBRE - DÉGRADÉS
   ======================================== */

body.theme-sombre h1 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body.theme-sombre .page1-ajouter-depense h1 {
    background: linear-gradient(135deg, #4a3d2a, #5a4d3a, #6a5d4a);
}

body.theme-sombre .page2-resume h1 {
    background: linear-gradient(135deg, #2d4a3e, #2a3f5f, #4a2d4a, #4a3d2a);
}

body.theme-sombre .page2-resume .selecteur-mois {
    background: linear-gradient(135deg, #2d4a3e, #2a3f5f, #4a2d4a, #4a3d2a);
}

body.theme-sombre .page2-resume .mois-actuel {
    color: #e0e0e0;
}

body.theme-sombre .page2-resume .burger-ligne {
    background: #e0e0e0;
}

body.theme-sombre .page3-revenus h1,
body.theme-sombre .action-nouveau-revenu h1,
body.theme-sombre .page-ajouter-categorie-revenus h1,
body.theme-sombre .demarrage-1-revenus h1 {
    background: linear-gradient(135deg, #2d4a3e, #3d5a4e, #4d6a5e);
}

body.theme-sombre .page3-revenus .selecteur-mois {
    background: linear-gradient(135deg, #2d4a3e, #3d5a4e, #4d6a5e);
}

body.theme-sombre .page4-prelevements-automatiques h1,
body.theme-sombre .action-nouveau-prelevement h1,
body.theme-sombre .page-ajouter-categorie-prelevements h1,
body.theme-sombre .demarrage-2-prelevements h1 {
    background: linear-gradient(135deg, #2a3f5f, #3a4f6f, #4a5f7f);
}

body.theme-sombre .page4-prelevements-automatiques .selecteur-mois {
    background: linear-gradient(135deg, #2a3f5f, #3a4f6f, #4a5f7f);
}

body.theme-sombre .page5-budget-prevu h1,
body.theme-sombre .page-ajouter-categorie-budget h1,
body.theme-sombre .demarrage-3-budget h1 {
    background: linear-gradient(135deg, #4a2d4a, #5a3d5a, #6a4d6a);
}

body.theme-sombre .page5-budget-prevu .selecteur-mois {
    background: linear-gradient(135deg, #4a2d4a, #5a3d5a, #6a4d6a);
}

body.theme-sombre .page6-depenses-mois h1 {
    background: linear-gradient(135deg, #4a3d2a, #5a4d3a, #6a5d4a);
}

body.theme-sombre .page6-depenses-mois .selecteur-mois {
    background: linear-gradient(135deg, #4a3d2a, #5a4d3a, #6a5d4a);
}

body.theme-sombre .page7-depenses-categories h1 {
    background: linear-gradient(135deg, #4a3025, #5a4035, #6a5045);
}

body.theme-sombre .page7-depenses-categories .selecteur-mois {
    background: linear-gradient(135deg, #4a3025, #5a4035, #6a5045);
}

body.theme-sombre .page9-parametres h1,
body.theme-sombre .page-historique-mois h1,
body.theme-sombre .page-export-import h1 {
    background: linear-gradient(135deg, #2a2a3e, #3a3a4e, #4a4a5e);
}

body.theme-sombre .page-statistiques h1 {
    background: linear-gradient(135deg, #4a3a5c, #5a4a6c, #6a5a7c);
}

/* Lignes résumé mode sombre */
body.theme-sombre .ligne-resume.revenus {
    background: linear-gradient(135deg, #2d4a3e, #3d5a4e, #4d6a5e);
}

body.theme-sombre .ligne-resume.prelevements-automatiques {
    background: linear-gradient(135deg, #2a3f5f, #3a4f6f, #4a5f7f);
}

body.theme-sombre .ligne-resume.budget-prevu {
    background: linear-gradient(135deg, #4a2d4a, #5a3d5a, #6a4d6a);
}

body.theme-sombre .ligne-resume.depenses-totales-prevues {
    background: linear-gradient(135deg, #3a2d4a, #4a3d5a, #5a4d6a);
}

body.theme-sombre .ligne-resume.depenses-mois {
    background: linear-gradient(135deg, #4a3d2a, #5a4d3a, #6a5d4a);
}

/* ========================================
   36. MODE SOMBRE - AUTRES ÉLÉMENTS
   ======================================== */

body.theme-sombre .budget-disponible-restant {
    background: var(--bg-carte);
}

body.theme-sombre .ligne-resume .label,
body.theme-sombre .ligne-resume .montant {
    color: #e0e0e0;
}

body.theme-sombre .col-categorie-budget,
body.theme-sombre .col-montant-budget {
    color: #e0e0e0;
}

body.theme-sombre .mois-actuel {
    color: #e0e0e0;
}

body.theme-sombre .burger-ligne {
    background: #e0e0e0;
}

body.theme-sombre .label-important {
    color: #e0e0e0;
}

body.theme-sombre .titre-section {
    color: #e0e0e0;
    border-bottom-color: #333;
}

body.theme-sombre .section-parametres {
    background: var(--bg-carte);
    border: 1px solid rgba(255,255,255,0.1);
}

body.theme-sombre .lien-parametre {
    background: var(--bg-ligne);
}

body.theme-sombre .lien-parametre:active {
    background: #2a3f5f;
}

body.theme-sombre .parametre-avec-select {
    background: var(--bg-ligne);
}

body.theme-sombre .parametre-avec-select .texte-lien {
    color: #e0e0e0;
}

body.theme-sombre .select-page-accueil,
body.theme-sombre .select-theme {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: #e0e0e0;
}

body.theme-sombre .container-categories-personnalisees {
    background: var(--bg-carte);
}

body.theme-sombre .ligne-categorie-personnalisee {
    background: var(--bg-ligne);
}

body.theme-sombre .nom-categorie {
    color: #e0e0e0;
}

body.theme-sombre .titre-liste-categories {
    color: #e0e0e0;
}

body.theme-sombre .ligne-ajoutee-onboarding {
    background: var(--bg-ligne);
}

body.theme-sombre .texte-ajoute {
    color: #e0e0e0;
}

body.theme-sombre .section-export-import .avertissement {
    background: #3d2a1a;
    color: #ffb366;
}

body.theme-sombre .menu-actions {
    background-color: rgba(22, 33, 62, 0.95);
}

body.theme-sombre .lien-menu.actif {
    background: #2a3f5f;
}

body.theme-sombre .lien-menu:active {
    background: #2a3f5f;
}

body.theme-sombre .ligne-categorie-depense .label-categorie {
    color: #e0e0e0;
}

body.theme-sombre .budget-prevu-texte {
    color: #e0e0e0;
}

body.theme-sombre .separateur-montant {
    color: #b0b0b0;
}

body.theme-sombre .description-parametre {
    color: #aaa;
}

/* Connexion mode sombre */
body.theme-sombre.page-connexion {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

body.theme-sombre .formulaire-auth {
    background: #16213e;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.theme-sombre .formulaire-auth h2 {
    color: #e0e0e0;
}

body.theme-sombre .champ-formulaire label {
    color: #b0b0b0;
}

body.theme-sombre .champ-formulaire input {
    background: #0f0f1a;
    border-color: #333;
    color: #e0e0e0;
}

body.theme-sombre .champ-formulaire input:focus {
    border-color: #6ba4eb;
    background: #1a1a2e;
}

body.theme-sombre .sous-titre-connexion,
body.theme-sombre .lien-switch,
body.theme-sombre .texte-info {
    color: #b0b0b0;
}

body.theme-sombre .message-auth.erreur {
    background: #4a2020;
    border-color: #6a3030;
    color: #ff8a8a;
}

body.theme-sombre .message-auth.succes {
    background: #204a20;
    border-color: #306a30;
    color: #8aff8a;
}

/* Pages Informations */

.theme-sombre .section-apropos,
.theme-sombre .section-aide,
.theme-sombre .section-legale {
    background: var(--bg-carte);
}

.theme-sombre .section-aide.intro-aide {
    background: linear-gradient(135deg, #1b3a1b, #2e5a2e);
}

.theme-sombre .texte-intro {
    color: #81c784;
}

.theme-sombre .lien-aide-principal {
    background: linear-gradient(135deg, #1a3a5c, #2a4a6c);
    border-color: #3d5a80;
}

.theme-sombre .lien-externe,
.theme-sombre .faq-item {
    background: var(--bg-parametre);
}

.theme-sombre .lien-externe:active {
    background: #2a2a3e;
}

.theme-sombre .texte-legal a {
    color: #90caf9;
}

.theme-sombre .section-apropos.version-section,
.theme-sombre .section-legale.derniere-maj {
    background: transparent;
}

/* ========================================
   37. SWIPER - LAYOUT PRINCIPAL
   ======================================== */

.swiper {
    width: 100%;
    height: 100vh;
    background: var(--bg-body);
}

.swiper-wrapper {
    background: var(--bg-body);
}

.swiper-slide {
    height: 100vh;
    overflow: hidden;
    background: var(--bg-body);
    border: none;
    outline: none;
}

.swiper-slide main {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 15px 20px;
    overflow: hidden;
}

/* Tableaux avec hauteur calculée */
.swiper-slide .tableau-detail,
.swiper-slide .tableau-depenses-categories,
.swiper-slide .tableau-depenses-moyens {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 385px);  /* Fallback anciens navigateurs */
    max-height: calc(100dvh - 385px); /* Dynamic viewport height - moderne */
    flex: 1;
    min-height: 0;
}

.swiper-slide .lignes-scrollables {
    flex: 1;
    overflow-y: auto;
    min-height: 50px;
}

.swiper-slide .total-container,
.swiper-slide .total-container-categories {
    flex-shrink: 0;
    background: var(--bg-carte);
}

/* Boutons en bas */
.swiper-slide .btn-ajouter-principal {
    flex-shrink: 0;
    margin-top: 20px;
}

/* Pages longues : permettre le scroll */
.swiper-slide.page-statistiques,
.swiper-slide.page9-parametres,
.swiper-slide.page1-ajouter-depense {
    
    overflow-y: auto !important;
}

.swiper-slide.page-statistiques main,
.swiper-slide.page9-parametres main,
.swiper-slide.page1-ajouter-depense main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* Espace en bas de la page Nouvelle Dépense pour le scroll */
.swiper-slide.page1-ajouter-depense main::after {
    content: '';
    display: block;
    height: 80px;
}

/* Espace en bas des pages longues */
.swiper-slide.page-statistiques main::after {
    content: '';
    display: block;
    height: 60px;
}

.swiper-slide.page9-parametres main::after {
    content: '';
    display: block;
    height: 55px; /* Plus petit car déjà plus d'espace */
}

/* Affichage étendu */
body.affichage-etendu .swiper-slide {
    overflow-y: auto;
}

body.affichage-etendu .swiper-slide main {
    height: auto;
    overflow: visible;
    padding-bottom: 100px;
}

body.affichage-etendu .tableau-detail,
body.affichage-etendu .tableau-depenses-categories,
body.affichage-etendu .tableau-depenses-moyens {
    max-height: none;
}

body.affichage-etendu .lignes-scrollables {
    overflow: visible;
}

/* Pages sans padding-bottom en mode étendu */
body.affichage-etendu .page1-ajouter-depense main,
body.affichage-etendu .page2-resume main,
body.affichage-etendu .page-statistiques main,
body.affichage-etendu .page-comparatif main,
body.affichage-etendu .page9-parametres main {
    height: 100%;
    overflow: hidden;
    padding-bottom: 0;
}

body.affichage-etendu .page-comparatif .graphique-container {
    margin-bottom: 70px;
}

/* ========================================
   38. RESPONSIVE
   ======================================== */

@media (min-width: 500px) {
    .swiper-slide main {
        max-width: 450px;
        padding: 20px;
    }
}

@media (min-width: 768px) {
    .swiper-slide main {
        max-width: 480px;
        padding: 25px;
    }
}

@media (min-width: 1024px) {
    .swiper-slide main {
        max-width: 500px;
    }
}

/* ========================================
   39. RÉSUMÉ - RESPONSIVE PETITS ÉCRANS (HAUTEUR)
   ======================================== */

/* Écrans de moins de 750px de hauteur */
@media screen and (max-height: 750px) {
    .swiper-slide.page2-resume .separateur-1 {
        margin: 2px 0;
    }
    
    .swiper-slide.page2-resume .separateur-gras-resume {
        margin: 6px 0;
    }
}

/* ========================================
   39. TOAST DE CONFIRMATION
   ======================================== */

.toast {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    background: white;
    color: #4a5568;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--toast-color, #a8d5a8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Couleurs par page */
.toast.toast-depense { --toast-color: #ffb366; }
.toast.toast-resume { --toast-color: #b39ddb; }
.toast.toast-revenus { --toast-color: #81c784; }
.toast.toast-prelevements { --toast-color: #6ba4eb; }
.toast.toast-budget { --toast-color: #e591c3; }

/* Thème sombre */
body.theme-sombre .toast {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* ========================================
   40. MESSAGE LISTE VIDE
   ======================================== */

.message-liste-vide {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

.message-liste-vide .emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}

.message-liste-vide .texte {
    line-height: 1.5;
}

/* ========================================
   41. MOYENS DE PAIEMENT
   ======================================== */

/* Section "Payé avec" dans Nouvelle Dépense */
.section-paye-avec {
    margin: 5px 0;
    padding-top: 0;
    text-align: left;
}

.section-paye-avec label {
    display: block;
    font-weight: bold;
    color: var(--text-label);
    margin-bottom: 10px;
    margin-left: 55px;
    font-size: 15px;
}

.moyens-paiement-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 30px;
}

.moyen-paiement-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 50px;
    max-width: 70px;
}

.moyen-paiement-btn:hover {
    border-color: #a0aec0;
}

.moyen-paiement-btn.selected {
    border-color: #68d391;
    background: #f0fff4;
}

.moyen-paiement-btn svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}

.moyen-paiement-btn span {
    font-size: 8px;
    color: #4a5568;
    text-align: center;
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle dans les paramètres */
.parametre-avec-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: white;
    border-radius: 8px;
}

.parametre-toggle-info {
    display: flex;
    flex-direction: column;
}

.parametre-toggle-info .texte-lien {
    color: #2d3748;
    font-size: 16px;
}

.parametre-toggle-info .description-toggle {
    text-align: left;
    color: #718096;
    font-size: 12px;
    margin-top: 2px;
}

/* Note: La classe .toggle existe peut-être déjà dans ton CSS
   Si c'est le cas, vérifie qu'elle a ces propriétés */
.toggle {
    width: 50px;
    height: 28px;
    background: #cbd5e0;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.toggle.active {
    background: #68d391;
}

.toggle::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle.active::after {
    transform: translateX(22px);
}

/* ========================================
   THÈME SOMBRE - Moyens de paiement
   ======================================== */

.theme-sombre .section-paye-avec {
    border-color: #2d2d44;
}

.theme-sombre .section-paye-avec label {
    color: #e2e8f0;
}

.theme-sombre .moyen-paiement-btn {
    background: #1a1a2e;
    border-color: #2d2d44;
}

.theme-sombre .moyen-paiement-btn:hover {
    border-color: #4a5568;
}

.theme-sombre .moyen-paiement-btn.selected {
    border-color: #68d391;
    background: #1a2e1a;
}

.theme-sombre .moyen-paiement-btn span {
    color: #e2e8f0;
}

.theme-sombre .parametre-avec-toggle {
    border-color: #2d2d44;
}

.theme-sombre .parametre-toggle-info .texte-lien {
    color: #e2e8f0;
}

.theme-sombre .parametre-toggle-info .description-toggle {
    color: #a0aec0;
}

.theme-sombre .toggle {
    background: #4a5568;
}

/* ========================================
   SELECT PERSONNALISÉ (ACCORDÉON)
   ======================================== */

.select-custom {
    position: relative;
    width: 80%;
    margin: 5px auto 10px auto;
}

.select-custom-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-radius 0.2s;
}

.select-custom.ouvert .select-custom-trigger {
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}

.select-custom-trigger:active {
    background: #e8e8e8;
}

.select-custom-value {
    flex: 1;
    text-align: left;
}

.select-custom-value.placeholder {
    color: var(--text-secondary);
    font-size: 15px;
}

.select-custom-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    margin-left: 10px;
}

.select-custom.ouvert .select-custom-arrow {
    transform: rotate(180deg);
}

.select-custom-options {
    display: none;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 250px;
    overflow-y: auto;
}

.select-custom.ouvert .select-custom-options {
    display: block;
}

.select-custom-option {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: var(--text-primary);
}

.select-custom-option:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.select-custom-option .pastille-categorie {
    width: 5px;
    height: 35px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: 10px;
}

/* Mode sombre */
body.theme-sombre .select-custom-trigger {
    background: var(--bg-input);
    border-color: var(--border-input);
}

body.theme-sombre .select-custom-trigger:active {
    background: #4a4a5e;
}

body.theme-sombre .select-custom-options {
    background: var(--bg-input);
    border-color: var(--border-input);
}

body.theme-sombre .select-custom-option {
    border-bottom-color: #444;
}

body.theme-sombre .select-custom-option:active,
body.theme-sombre .select-custom-option.selectionne {
    background: #4a4a5e;
}

/* ========================================
   SELECT CUSTOM - BORDURES FOCUS COLORÉES
   ======================================== */

/* REVENUS - Vert */
.demarrage-1-revenus .select-custom.ouvert .select-custom-trigger,
.action-nouveau-revenu .select-custom.ouvert .select-custom-trigger {
    outline: 2px solid #81c784;
    outline-offset: -1px;
    border-color: #81c784;
}

/* REVENUS - Vert clair */
.demarrage-1-revenus .select-custom-option.selectionne,
.action-nouveau-revenu .select-custom-option.selectionne {
    background-color: rgba(129, 199, 132, 0.2);
}

/* PRÉLÈVEMENTS - Bleu */
.demarrage-2-prelevements .select-custom.ouvert .select-custom-trigger,
.action-nouveau-prelevement .select-custom.ouvert .select-custom-trigger {
    outline: 2px solid #6ba4eb;
    outline-offset: -1px;
    border-color: #6ba4eb;
}

/* PRÉLÈVEMENTS - Bleu clair */
.demarrage-2-prelevements .select-custom-option.selectionne,
.action-nouveau-prelevement .select-custom-option.selectionne {
    background-color: rgba(107, 164, 235, 0.2);
}

/* BUDGET - Rose */
.demarrage-3-budget .select-custom.ouvert .select-custom-trigger {
    outline: 2px solid #e591c3;
    outline-offset: -1px;
    border-color: #e591c3;
}

/* BUDGET - Rose clair */
.demarrage-3-budget .select-custom-option.selectionne {
    background-color: rgba(229, 145, 195, 0.2);
}

/* DÉPENSES - Orange */
.page1-ajouter-depense .select-custom.ouvert .select-custom-trigger {
    outline: 2px solid #ffb366;
    outline-offset: -1px;
    border-color: #ffb366;
}

/* DÉPENSES - Orange clair */
.page1-ajouter-depense .select-custom-option.selectionne {
    background-color: rgba(255, 179, 102, 0.2);
}