/* ============================================================
   Bas de Laine : feuille de style commune
   Style « sobre et dense » (SPEC §5), d'après docs/maquettes/.
   ============================================================ */

/* Police Source Sans 3, servie par l'appli (aucun appel externe) */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bandeau: #0B3A6E;
    --actif: #1B4F8C;
    --bandeau-texte: #D5E3F4;
    --fond: #F5F7FA;
    --carte: #FFFFFF;
    --bordure: #DDE4EC;
    --bordure-legere: #EDF1F5;
    --bordure-champ: #C5D0DC;
    --entete: #EAEFF5;
    --entete-texte: #4A5A6B;
    --texte: #16222F;
    --texte-doux: #4A5A6B;
    --selection: #DCE8F6;
    --positif-fond: #E3F4EB;
    --positif-texte: #14663F;
    --negatif-fond: #FBE9E5;
    --negatif-texte: #8A2A1B;
    --avertissement-fond: #FDF3DC;
    --avertissement-texte: #7A5310;
    --rayon: 12px;
    --cible: 44px;          /* taille minimale des cibles tactiles */
    --largeur: 1216px;
}

* { box-sizing: border-box; }
/* Un élément masqué l'est toujours, même s'il a un display propre */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--bandeau); }
a:hover { color: #072A52; }
h1 { margin: 0 0 20px; font-size: 26px; font-weight: 700; }
h2 { margin: 0; font-size: 17px; font-weight: 700; }
h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 700; }
p { margin: 0 0 12px; }

/* ---------- Bandeau du haut ---------- */
.bandeau {
    background: var(--bandeau);
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    padding: 10px 32px;
}
.bandeau .marque {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
.nav-principale {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}
.nav-lien, .nav-menu > summary {
    min-height: var(--cible);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--bandeau-texte);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-lien:hover, .nav-menu > summary:hover { color: #FFFFFF; }
.nav-lien[aria-current="page"] { background: var(--actif); color: #FFFFFF; font-weight: 600; }

/* Menus déroulants (éléments <details>, utilisables sans JavaScript) */
.nav-menu { position: relative; }
.nav-menu[open] > summary {
    background: #FFFFFF;
    color: var(--bandeau);
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}
.nav-menu .chevron { transition: transform 0.15s; }
.nav-menu[open] .chevron { transform: rotate(180deg); }
.menu-liste {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 240px;
    background: #FFFFFF;
    border: 1px solid var(--bordure);
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 8px 24px rgba(11, 58, 110, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
}
.menu-liste.a-droite { left: auto; right: 0; border-radius: 8px 0 8px 8px; }
.menu-liste a, .menu-liste .bientot, .menu-liste .menu-info {
    min-height: var(--cible);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--texte);
    text-decoration: none;
}
.menu-liste a:hover { background: var(--entete); }
.menu-liste .bientot { color: #8A97A6; cursor: default; white-space: nowrap; }
.menu-liste .menu-info { color: var(--texte-doux); font-size: 13px; min-height: 0; padding: 6px 12px; }
.menu-separateur { border-top: 1px solid var(--bordure); margin: 6px 0; }
.etiquette-bientot {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8A97A6;
}

.bouton-mouvement {
    height: var(--cible);
    padding: 0 18px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--bandeau);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.bouton-mouvement[aria-current="page"] {
    background: var(--actif);
    color: #FFFFFF;
    border: 2px solid #BFD3EA;
}
.pastille > summary {
    width: var(--cible);
    height: var(--cible);
    padding: 0;
    justify-content: center;
    border: 2px solid #BFD3EA;
    border-radius: 22px;
    background: var(--actif);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
}
.pastille[open] > summary { border-radius: 22px; background: #FFFFFF; color: var(--bandeau); }

/* ---------- Contenu ---------- */
.contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 24px 32px 40px;
}
.contenu-etroit { max-width: 460px; margin: 24px auto; }

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.carte > h2:first-child { margin-bottom: 12px; }
.carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -16px -18px 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bordure);
}
.texte-doux { color: var(--texte-doux); font-size: 14px; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; margin: 0 -18px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
    background: var(--entete);
    color: var(--entete-texte);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 8px 18px;
    white-space: nowrap;
}
td { padding: 0 18px; height: 46px; border-bottom: 1px solid var(--bordure-legere); }
tr:last-child td { border-bottom: none; }
.a-droite { text-align: right; }

/* ---------- Montants ---------- */
.montant, .chiffres { font-variant-numeric: tabular-nums; white-space: nowrap; }
.montant.negatif { color: var(--negatif-texte); font-weight: 600; }

/* ---------- Étiquettes ---------- */
.etiquette {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    /* Fin liseré : l'étiquette ressort sur toutes les couleurs de ligne (blanc, lignes alternées…) */
    box-shadow: inset 0 0 0 1px rgba(11, 58, 110, 0.22);
}
.etiquette.positive { background: var(--positif-fond); color: var(--positif-texte); box-shadow: inset 0 0 0 1px rgba(20, 102, 63, 0.35); }
.etiquette.negative { background: var(--negatif-fond); color: var(--negatif-texte); box-shadow: inset 0 0 0 1px rgba(138, 42, 27, 0.35); }
.etiquette.neutre { background: #FFFFFF; color: var(--texte-doux); font-weight: 600; }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 16px; }
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texte-doux);
    margin-bottom: 4px;
}
label.en-ligne { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--texte); font-size: 15px; margin-right: 16px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], select, textarea {
    width: 100%;
    min-height: var(--cible);
    border: 1px solid var(--bordure-champ);
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    color: var(--texte);
    background: #FFFFFF;
}
textarea { padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 3px solid #7FA7D9;
    outline-offset: 1px;
}

button, .bouton {
    min-height: var(--cible);
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--bandeau);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
button:hover, .bouton:hover { background: var(--actif); color: #FFFFFF; }
.bouton-secondaire {
    background: #FFFFFF;
    color: var(--bandeau);
    border: 1px solid var(--bandeau);
    font-weight: 600;
}
.bouton-secondaire:hover { background: var(--entete); color: var(--bandeau); }
.bouton-danger { background: var(--negatif-texte); }
.bouton-danger:hover { background: #6E1F13; }
.bouton-large { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Messages ---------- */
.messages { margin-bottom: 20px; }
.message {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid transparent;
}
.message.success { background: var(--positif-fond); color: var(--positif-texte); border-color: #B7DEC8; }
.message.danger { background: var(--negatif-fond); color: var(--negatif-texte); border-color: #EDC3BA; }
.message.warning { background: var(--avertissement-fond); color: var(--avertissement-texte); border-color: #EBD6A6; }
.message.info { background: var(--entete); color: var(--texte); border-color: var(--bordure); }

/* ---------- Accessibilité ---------- */
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Accueil (maquette accueil.html) ---------- */
.accueil-haut { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.accueil-principal { flex: 2 1 560px; min-width: 0; }
.accueil-cote { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.accueil-haut .carte, .accueil-bas .carte { margin-bottom: 20px; }
.accueil-bas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 20px;
    align-items: start;
}
.titre-carte { font-size: 17px; font-weight: 700; color: var(--texte); margin-bottom: 8px; }

.liste-soldes, .liste-liens { list-style: none; margin: -12px -18px -16px; padding: 0; }
.liste-soldes li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 8px 0 18px;
    border-bottom: 1px solid var(--bordure-legere);
}
.liste-soldes form { margin: 0; }
.liste-soldes-nom { flex: 1; font-weight: 600; }
.liste-soldes-montants { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; padding: 6px 0; }
.equivalent { font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-liens { margin: 4px 0 0; }
.liste-liens li { min-height: var(--cible); display: flex; align-items: center; border-bottom: 1px solid var(--bordure-legere); }
.liste-liens li:last-child { border-bottom: none; }
.liste-liens .bientot { color: #8A97A6; }

.bouton-icone {
    width: var(--cible);
    min-height: var(--cible);
    padding: 0;
    background: none;
    color: var(--texte-doux);
}
.bouton-icone:hover { background: var(--entete); color: var(--negatif-texte); }
.bouton-lien { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.bouton-lien:hover { color: var(--bandeau); }
.carte-entete .bouton { min-height: 40px; padding: 0 12px; font-size: 14px; }

.ajout-compte { position: relative; }
.ajout-compte > summary { list-style: none; }
.ajout-compte > summary::-webkit-details-marker { display: none; }
.ajout-compte-liste {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 58, 110, 0.18);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ajout-compte-liste p { margin: 0 0 4px; }

.controles-accueil .tableau-defilant { margin-top: -12px; }
.pied-carte {
    margin: 0 -18px -16px;
    padding: 12px 18px;
    border-top: 1px solid var(--bordure);
    font-size: 14px;
}

/* ---------- Listes de gestion (enveloppes, catégories) ---------- */
.titre-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.titre-actions h1 { margin: 0; }
.filtres {
    display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end;
    margin: -16px -18px 14px; padding: 10px 18px; background: #EEF3F9;
    border-bottom: 1px solid var(--bordure);
}
/* Filtres compacts (24.10.2026) : champs, polices et marges réduits */
.filtres label { font-size: 12px; margin-bottom: 2px; }
.filtres label.en-ligne { font-size: 13px; margin-right: 10px; }
.filtres input[type="text"], .filtres input[type="search"], .filtres input[type="date"],
.filtres input[type="month"], .filtres select {
    min-height: 32px; padding: 0 8px; font-size: 13px; border-radius: 6px;
}
.filtres button, .filtres .bouton, .filtres .bouton-secondaire {
    min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px;
}
.filtres a { font-size: 13px; }
.filtres > div { flex: 1 1 120px; }
.filtres .filtre-large { flex: 2 1 180px; }
.filtres .filtre-cases { flex: 2 1 260px; display: flex; flex-direction: column; gap: 4px; }
.filtres .filtre-boutons { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.tableau-enveloppes tr.inactive td, .tableau-comptes tr.inactive td { color: #8A97A6; }
.tableau-comptes .ordre { white-space: nowrap; }
.tableau-comptes .ordre form, .tableau-comptes .actions-ligne form { display: inline; }
.tableau-comptes .ordre .bouton-icone:disabled { opacity: 0.3; cursor: default; }
.tableau-comptes .prefere { display: inline-block; min-width: 44px; text-align: center; color: var(--bandeau); font-size: 18px; }
.tableau-comptes .actions-ligne { white-space: nowrap; }
.tableau-comptes .ordre .bouton-icone:hover:not(:disabled) { color: var(--bandeau); }
.bouton-lien-texte { background: none; border: none; padding: 0 0 0 12px; min-height: var(--cible); color: var(--bandeau);
    font: inherit; text-decoration: underline; cursor: pointer; }
.bouton-lien-texte:hover { background: none; color: #072A52; }
.tableau-enveloppes .ligne-section td {
    background: var(--entete); color: var(--entete-texte); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; height: 32px;
}
.tableau-enveloppes .ligne-groupe td { font-weight: 700; background: #F8FAFC; }
.tableau-enveloppes .ligne-groupe.niveau-0 td { border-top: 2px solid var(--bordure); }
.tableau-enveloppes .ligne-groupe a { color: var(--texte); text-decoration: none; }
.tableau-enveloppes .ligne-groupe a:hover { text-decoration: underline; }
.tableau-enveloppes tfoot td { background: var(--entete); height: 44px; }
.resume-enveloppe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.solde-grand { font-size: 22px; font-weight: 700; }
.groupe-choix { border: none; padding: 0; margin: 0 0 16px; }
.groupe-choix legend { font-size: 13px; font-weight: 600; color: var(--texte-doux); margin-bottom: 4px; }
.groupe-choix .en-ligne { min-height: 32px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Mouvements (SPEC §3.2) ---------- */
body.js .sans-js { display: none; }
.mouvements { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.mouvements .carte { margin-bottom: 0; }
.mouvements-choix { flex: 3 1 560px; min-width: 0; }
.mouvements-operation { flex: 2 1 340px; min-width: 0; }
.mouvements-choix .filtres { margin-top: -12px; }
.mouvements-choix .pied-carte { border-radius: 0 0 var(--rayon) var(--rayon); }
.tableau-choix { min-width: 520px; }
.tableau-choix th, .tableau-choix td { padding-left: 8px; padding-right: 8px; }
.tableau-choix th:first-child, .tableau-choix td:first-child { padding-left: 18px; }
.tableau-choix th:last-child, .tableau-choix td:last-child { padding-right: 18px; white-space: nowrap; }
.tableau-choix td:nth-child(4) { white-space: nowrap; font-size: 14px; }
.tableau-choix .colonne-categorie { font-size: 14px; }
.tableau-choix tbody tr[data-id] { cursor: pointer; }
.tableau-choix tbody tr.replie { display: none; }
.tableau-choix .groupe-categorie th { background: #F8FAFC; padding: 0; text-align: left; text-transform: none;
    letter-spacing: 0; font-size: 15px; color: var(--texte); border-top: 2px solid var(--bordure); }
.groupe-bascule { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 18px;
    background: none; border: none; border-radius: 0; font: inherit; font-weight: 700; color: var(--texte);
    text-align: left; cursor: pointer; }
.groupe-bascule:hover { background: var(--entete); }
.groupe-bascule .chevron { transition: transform 0.15s; }
.groupe-bascule[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.groupe-nombre { font-weight: 400; }
.outils-liste { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; }
.bouton-lien { background: none; border: none; padding: 0; min-height: 0; color: var(--lien, #1B4F8C);
    font: inherit; text-decoration: underline; cursor: pointer; }
.bouton-lien:hover { color: var(--bandeau); }
.tableau-choix tbody tr:hover td { background: #F3F7FB; }
.tableau-choix tbody a { color: var(--texte); text-decoration: none; }
.tableau-choix tbody tr.choisie td { background: var(--selection); color: var(--bandeau); font-weight: 700; }
.tableau-choix tbody tr.choisie a { color: var(--bandeau); }
.tableau-choix tbody tr.choisie a::after { content: " ✓"; }
.etiquette-champ { font-size: 13px; font-weight: 600; color: var(--texte-doux); margin-bottom: 4px; }
.choisie-nom { font-size: 18px; font-weight: 700; }
.choix-segmente { border: none; padding: 0; margin: 0 0 16px; min-width: 0; }
.choix-segmente legend { font-size: 13px; font-weight: 600; color: var(--texte-doux); margin-bottom: 6px; padding: 0; }
.choix-segmente-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-segmente-boutons label { flex: 1 1 64px; margin: 0; position: relative; }
.choix-segmente-boutons input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-segmente-boutons span {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    border: 1px solid var(--bordure-champ); border-radius: 8px; background: #FFFFFF;
    color: var(--texte); font-size: 15px; font-weight: 600; cursor: pointer;
}
.choix-segmente-boutons input:checked + span {
    border: 2px solid var(--bandeau); background: var(--bandeau); color: #FFFFFF; font-weight: 700;
}
.choix-segmente-boutons input:focus-visible + span { outline: 3px solid #7FA7D9; outline-offset: 1px; }
.destinations-titre { margin-top: 12px; }
.destinations-rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bouton-pastille {
    border-radius: 22px; background: #FFFFFF; color: var(--texte);
    border: 1px solid var(--bordure-champ); font-weight: 600; padding: 0 16px;
}
.bouton-pastille:hover { background: var(--entete); color: var(--texte); }
.bouton-pastille[aria-pressed="true"] { border: 2px solid var(--bandeau); background: var(--bandeau); color: #FFFFFF; font-weight: 700; }
.bouton-pastille[aria-pressed="true"]::before { content: "✓"; }
.lien-discret { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; }
input.montant-saisie { min-height: 52px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#info-taux { margin-top: 4px; }
.apercu { background: var(--entete); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.apercu-ligne { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.apercu-ligne.fort { font-weight: 700; }
.bouton-effectuer { min-height: 52px; font-size: 17px; }
.bouton-effacer { margin-top: 10px; }
.resultat-bloc { margin: 16px 0 0; }
.annuler-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.annuler-bloc[hidden] { display: none; }
.resultat { border: 1px solid var(--bordure); border-radius: 8px; padding: 10px 14px; background: #F8FAFC; color: var(--texte-doux); }
.resultat.succes { background: var(--positif-fond); border-color: #B7DEC8; color: var(--positif-texte); }
.resultat.erreur { background: var(--negatif-fond); border-color: #EDC3BA; color: var(--negatif-texte); }

/* ---------- Journal des transactions ---------- */
.tableau-journal { min-width: 860px; }
.tableau-journal th, .tableau-journal td { padding-left: 10px; padding-right: 10px; }
.tableau-journal th:first-child, .tableau-journal td:first-child { padding-left: 18px; }
.tableau-journal th:last-child, .tableau-journal td:last-child { padding-right: 18px; }
.tableau-journal td { height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.tableau-journal .bouton-ligne { min-height: 36px; padding: 0 10px; font-size: 14px; }
.ligne-annulee td { color: var(--texte-doux); }
/* Lignes alternées des rapports ; les écritures liées qui se suivent ont la même couleur (journal, mouvements) */
.tableau-rapport tbody tr:nth-child(even) td, .tableau-journal tbody tr:nth-child(even) td { background: #E8EEF6; }
.tableau-rapport tbody tr.ligne-total td, .tableau-rapport tbody tr.ligne-sous-total td { background: var(--entete); }
.tableau-rapport tbody tr.ligne-groupe th { background: #F8FAFC; }
.tableau-journal tbody tr.bande-0 td, .tableau-rapport tbody tr.bande-0 td { background: #FFFFFF; }
.tableau-journal tbody tr.bande-1 td, .tableau-rapport tbody tr.bande-1 td { background: #E8EEF6; }
/* Opération permanente en pause ou terminée */
.ligne-inactive td { color: var(--texte-doux); }
.tableau-journal .etiquette { white-space: nowrap; }
.ligne-annulee .montant { text-decoration: line-through; }

/* Fiche d'une écriture (confirmation d'annulation) */
.fiche-ecriture { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.fiche-ecriture dt { color: var(--texte-doux); font-weight: 600; font-size: 14px; }
.fiche-ecriture dd { margin: 0; }

/* ---------- Ventilation du salaire ---------- */
.champs-cote-a-cote { display: flex; flex-wrap: wrap; gap: 0 16px; }
.champs-cote-a-cote > div { flex: 1 1 220px; margin-bottom: 16px; }

/* ---------- Téléphone ---------- */
.seulement-telephone { display: none; }

@media (max-width: 720px) {
    .bandeau { padding: 10px 16px; gap: 8px 12px; }
    .bandeau .marque { margin-right: auto; }
    .nav-principale { order: 3; flex-basis: 100%; }
    .bouton-mouvement { padding: 0 14px; }
    .masque-telephone { display: none; }
    .seulement-telephone { display: inline; }
    .contenu { padding: 16px 16px 32px; }
    .menu-liste { position: static; box-shadow: none; border-radius: 8px; }
    .tableau-defilant { margin: 0 -18px; }
    th, td { padding-left: 12px; padding-right: 12px; }
    h1 { font-size: 22px; }
    /* Mouvements : N°, enveloppe et solde suffisent (filtres juste au-dessus) */
    .tableau-choix { min-width: 0; }
    .tableau-choix th:nth-child(2), .tableau-choix td:nth-child(2),
    .tableau-choix th:nth-child(4), .tableau-choix td:nth-child(4) { display: none; }
}

/* ---------- À propos ---------- */
.a-propos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; }
.a-propos > .carte { margin-bottom: 0; }
.liste-nouveautes { margin: 0 0 8px; padding-left: 20px; }
.liste-nouveautes li { margin-bottom: 4px; }
.dialogue { max-width: 480px; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; }
.dialogue::backdrop { background: rgba(11, 58, 110, 0.35); }
.dialogue h2 { margin-bottom: 12px; }

/* ---------- Bandeau de statut (en bas de toutes les pages) ---------- */
body { padding-bottom: 48px; }
@media (max-width: 720px) { body { padding-bottom: 96px; } }     /* le contenu n'est jamais caché sous la barre */
.barre-statut {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--bandeau); color: #FFFFFF;
    box-shadow: 0 -2px 8px rgba(11, 58, 110, 0.18);
}
.barre-statut-corps {
    display: flex; align-items: center; gap: 12px;
    max-width: var(--largeur); margin: 0 auto; padding-right: 24px;
}
.barre-statut-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.export-liens { display: contents; }
/* Boutons d'action : blancs et pleins, pour ne pas les confondre avec le message (champ sombre à gauche) */
.bouton-statut {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
    border: 1px solid #FFFFFF; border-radius: 8px; background: #FFFFFF; color: var(--bandeau);
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.bouton-statut:hover { background: var(--bandeau-texte); color: var(--bandeau); text-decoration: none; }
/* Message d'état : champ sombre en creux, texte normal */
.barre-statut-ligne {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    min-height: 36px; margin: 6px 0 6px 24px; padding: 0 12px;
    background: #072A52; border: none; border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); color: inherit;
    font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer;
}
.barre-statut-ligne:hover { background: #0A3260; color: #FFFFFF; }
.statut-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statut-heure { color: var(--bandeau-texte); font-variant-numeric: tabular-nums; flex: none; }
.puce { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bandeau-texte); }
.puce.success { background: #3CC47C; }
.puce.info { background: #7FB3F0; }
.puce.warning { background: #F2B53C; }
.puce.danger { background: #F06A55; }
.puce.repos { background: transparent; border: 1px solid var(--bandeau-texte); }
.barre-statut-historique {
    max-width: var(--largeur); margin: 0 auto; padding: 12px 24px 4px;
    max-height: 50vh; overflow-y: auto; border-bottom: 1px solid var(--actif);
}
.barre-statut-titre { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; color: var(--bandeau-texte); }
.barre-statut-historique ol { list-style: none; margin: 0; padding: 0; }
.barre-statut-historique li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 720px) {
    .barre-statut-historique { padding-left: 16px; padding-right: 16px; }
    .barre-statut-ligne { margin-left: 16px; margin-right: 16px; }
    .barre-statut-corps { padding-right: 16px; flex-wrap: wrap; }
    .barre-statut-ligne { flex-basis: calc(100% - 32px); }
    .barre-statut-actions { flex-wrap: wrap; padding-bottom: 8px; }
}

/* Rapports : lignes de groupe (titre en ligne) et de total */
.tableau-rapport .ligne-groupe th { background: #F8FAFC; color: var(--texte); font-size: 15px; font-weight: 700;
    text-transform: none; letter-spacing: 0; border-top: 2px solid var(--bordure); }
.tableau-rapport .ligne-total td { font-weight: 700; }
.tableau-rapport .ligne-sous-total td { font-weight: 600; color: var(--texte-doux); }
.tableau-rapport tfoot td { background: var(--entete); height: 44px; }

/* Assistant de bouclage : liste des étapes (étape 9d) */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.etapes li { display: flex; align-items: center; gap: 8px; color: var(--texte-doux); font-size: 14px; }
.etapes .numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bordure-champ);
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.etapes .faite .numero { background: var(--positif-fond); color: var(--positif-texte); border-color: var(--positif-fond); }
.etapes .en-cours { color: var(--texte); font-weight: 600; }
.etapes .en-cours .numero { background: var(--actif); color: #FFFFFF; border-color: var(--actif); }
.tableau-budget .champ-montant { max-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.tableau-budget select { max-width: 110px; }
.tableau-budget td { height: auto; padding-top: 6px; padding-bottom: 6px; }
.tableau-budget .avant { font-size: 12px; color: #8A5A00; margin-top: 2px; }
.tableau-budget input.champ-modifie, .tableau-budget select.champ-modifie,
.champ-modifie-exemple { background: #FFF4D6; border-color: #D9A43A; }
.champ-modifie-exemple { padding: 0 4px; border-radius: 4px; }
.ligne-erreur td { background: var(--negatif-fond); }
.erreur-ligne { color: var(--negatif-texte); font-size: 13px; font-weight: 600; }

/* Annulation : refaire la même opération ailleurs */
fieldset.refaire { border: 1px solid var(--bordure); border-radius: 8px; margin: 16px 0; padding: 8px 14px 12px; }
fieldset.refaire legend { padding: 0 6px; font-weight: 600; }

/* Infobulles (static/js/infobulles.js) : data-info="texte" sur n'importe quel élément */
.infobulle {
    position: absolute; z-index: 100; max-width: 280px; padding: 8px 12px;
    background: var(--texte); color: #FFFFFF; border-radius: 8px;
    font-size: 13px; line-height: 1.4; pointer-events: none;
    box-shadow: 0 4px 14px rgba(11, 58, 110, 0.25);
}
.infobulle[hidden] { display: none; }

/* Formulaires en popup (static/js/popup.js) */
.dialogue-popup { max-width: 680px; width: calc(100% - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; }
.dialogue-popup .popup-contenu { padding: 20px 24px 24px; }
.dialogue-popup .carte { border: none; box-shadow: none; padding: 0; margin: 0 0 16px; max-width: none !important; }
.dialogue-popup h1 { font-size: 22px; margin: 0 40px 12px 0; }
.popup-fermer { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; padding: 0;
    background: none; border: none; font-size: 26px; line-height: 1; color: var(--texte-doux); cursor: pointer; }
.popup-fermer:hover { color: var(--texte); background: var(--entete); }

/* Formulaire d'enveloppe : sections */
.formulaire-sections .section-formulaire { border: 1px solid var(--bordure-legere); border-radius: 10px;
    padding: 6px 16px 10px; margin: 0 0 16px; min-width: 0; }
.formulaire-sections .section-formulaire > legend { padding: 0 8px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--entete-texte); }
.formulaire-sections .aide-champ { margin: -6px 0 12px; font-size: 13px; }
.formulaire-sections .section-repliable summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--entete-texte); }
.formulaire-sections .section-repliable[open] summary { margin-bottom: 8px; }
.usage-argent { display: flex; flex-wrap: wrap; gap: 4px 0; }
.usage-argent legend { width: 100%; }

/* Boutons d'action en bout de ligne (crayon, pause, croix) */
.actions-ligne { white-space: nowrap; }
.actions-ligne .formulaire-en-ligne { display: inline; }
.actions-ligne .bouton-icone { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; vertical-align: middle; }
.actions-ligne .bouton-icone:hover { color: var(--bandeau); }
.actions-ligne .formulaire-en-ligne:last-child .bouton-icone:hover { color: var(--negatif-texte); }

/* Tableaux à lignes alternées (catégories, comptes…) */
.tableau-lignes tbody tr:nth-child(even) td { background: #E8EEF6; }

/* Glisser-lâcher des comptes */
.tableau-comptes .poignee { display: inline-flex; align-items: center; justify-content: center; width: var(--cible);
    height: 36px; color: var(--texte-doux); cursor: grab; touch-action: none; border-radius: 8px; }
.tableau-comptes .poignee:hover { background: var(--entete); color: var(--bandeau); }
.tableau-comptes tr.en-deplacement td { background: var(--selection, #DCE8F6) !important; box-shadow: 0 2px 8px rgba(11, 58, 110, 0.25); }
.tableau-comptes tr.en-deplacement .poignee { cursor: grabbing; }

/* Rapport « Contenu des enveloppes » (inspiré de l'ancien rapport Access) */
.tableau-contenu .ligne-compte th { background: #FFFFFF; color: var(--texte); font-size: 15px; font-weight: 400;
    text-transform: none; letter-spacing: 0; padding-top: 18px; border-top: 2px solid var(--bandeau); border-bottom: none; }
.tableau-contenu .ligne-compte .compte-nom { font-size: 18px; font-weight: 700; font-style: italic; }
.tableau-contenu .ligne-colonnes th { background: var(--entete); }
.tableau-contenu .ligne-categorie th { background: #FFFFFF; color: var(--texte); font-size: 15px; font-weight: 700;
    text-transform: none; letter-spacing: 0; padding-top: 14px; }
.tableau-contenu .ligne-negative td, .tableau-contenu .ligne-negative td a { font-weight: 700; }
.tableau-contenu .ligne-negative .montant { font-weight: 700; }

.emplacement-bouton { display: inline-block; width: var(--cible); height: 1px; vertical-align: middle; }

/* Recherche rapide (Ctrl+K) */
.bouton-recherche { width: var(--cible); height: var(--cible); padding: 0; margin-right: -16px; background: none;
    color: var(--bandeau-texte); border: 1px solid transparent; border-radius: 8px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; }
.bouton-recherche:hover { background: var(--actif); color: #FFFFFF; }
.dialogue-recherche { width: min(560px, calc(100% - 32px)); padding: 0; margin-top: 12vh; overflow: hidden; }
.recherche-champ { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--bordure);
    border-radius: 0; padding: 16px 20px; font-size: 18px; outline: none; }
.recherche-liste { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.recherche-liste li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
    padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.recherche-liste li.choisi { background: var(--selection, #DCE8F6); }
.recherche-liste li:hover { background: #EEF3F9; }
.recherche-liste li.choisi:hover { background: var(--selection, #DCE8F6); }
.recherche-nom { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-detail { color: var(--texte-doux); font-size: 13px; flex: none; }
.recherche-vide { color: var(--texte-doux); cursor: default !important; }
.recherche-aide { margin: 0; padding: 8px 20px; border-top: 1px solid var(--bordure); background: var(--entete);
    color: var(--texte-doux); font-size: 12px; }

/* Rappels de contrôle sur l'accueil */
.liste-rappels { margin: 6px 0 0; padding-left: 20px; }
.liste-rappels li { margin: 2px 0; }

/* ---------- Liens (décidé le 21.10.2026) : jamais soulignés au repos ----------
   Bleu foncé, en gras dans les phrases et les listes ; le soulignement n'apparaît qu'au
   survol et au clavier (Tab). Les boutons, menus et en-têtes gardent leur style propre. */
a { text-decoration: none; }
main p a, main li a { font-weight: 600; }
main a:not(.bouton):not(.bouton-icone):not(.bouton-statut):not(.rapport-ligne):hover,
main a:not(.bouton):not(.bouton-icone):not(.bouton-statut):not(.rapport-ligne):focus-visible {
    text-decoration: underline; text-underline-offset: 3px; }

/* Bloc Rapports de l'accueil : lignes cliquables */
.liste-rapports { list-style: none; margin: 0 -8px -8px; padding: 0; }
.liste-rapports li { border-top: 1px solid var(--bordure-legere); }
.liste-rapports li:first-child { border-top: none; }
.rapport-ligne { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-radius: 8px;
    color: var(--bandeau); font-weight: 600; text-decoration: none !important; }
.rapport-ligne svg:first-child { flex: none; color: var(--actif); }
.rapport-ligne span { flex: 1; min-width: 0; }
.rapport-ligne .rapport-fleche { flex: none; color: #8A97A6; }
.rapport-ligne:hover, .rapport-ligne:focus-visible { background: #EAF1FA; color: var(--bandeau); }
.rapport-tous { color: var(--texte-doux); }

/* Remarques de l'accueil : état de l'enregistrement automatique */
.etat-remarques { font-size: 13px; min-height: 1em; }

/* Champ « filtrer la liste » au-dessus d'une liste déroulante (static/js/filtre-liste.js) */
/* Champ combiné : saisie + liste (static/js/filtre-liste.js) ; le <select> d'origine reste caché */
.combo { position: relative; }
.combo-select-cache { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combo-champ { padding-right: 30px !important; cursor: text;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
.combo-liste { position: fixed; z-index: 1000; margin: 0; padding: 4px; list-style: none; overflow-y: auto;
    background: #FFFFFF; border: 1px solid var(--bordure-champ); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 58, 110, 0.18); font-size: 13.5px; }
.combo-liste[hidden] { display: none; }
.combo-groupe { padding: 8px 8px 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--entete-texte); }
.combo-option { padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.combo-option.combo-actif { background: var(--selection, #DCE8F6); }
.combo-option.combo-choisi { font-weight: 700; }
.combo-vide { color: var(--texte-doux); }
.combo-rien { padding: 8px 10px; color: var(--texte-doux); }

/* Avertissement de contrôle : ne doit pas passer sous le tableau (remonté de 12 px) */
.rappel-controle { margin-bottom: 22px; }

/* Mouvements : raccourcis clavier (lettre soulignée de chaque action) */
.raccourcis-aide { font-size: 13px; margin: 6px 0 0; }
.choix-segmente-boutons u { text-decoration: underline; text-underline-offset: 2px; }

/* Cellule dont le texte reste sur une seule ligne (type des contrôles…) */
.sans-retour { white-space: nowrap; }

/* En-têtes des rapports : plus grands que ceux des autres tableaux */
.tableau-rapport thead th { font-size: 14px; }

/* Page « Tous les rapports » : cartes en deux colonnes, lignes avec description */
.grille-rapports { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.grille-rapports .carte { margin: 0; }
.rapport-ligne .rapport-texte { display: flex; flex-direction: column; padding: 6px 0; }
.rapport-ligne .rapport-texte small { font-size: 13px; line-height: 1.3; }

/* Navigateur de pages des longues listes */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0 0; }
.pagination-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagination-pages a, .pagination-pages span:not(.texte-doux) { min-width: 36px; min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.pagination-pages a { border: 1px solid var(--bordure-legere); background: #fff; }
.pagination-courante { background: var(--bandeau); color: #fff; font-weight: 700; }
.pagination-inactif { color: #8A97A6; }

/* Liste des enveloppes : modification groupée (24.10.2026) */
.barre-lot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 18px; border-top: 1px solid var(--bordure, #DDE4EC); background: #F5F7FA; }
.barre-lot > span { display: inline-flex; align-items: center; gap: 6px; }
.barre-lot select { width: auto; min-width: 150px; }
.barre-lot-vide { opacity: .6; }
.case-lot { width: 36px; text-align: center; padding-left: 8px; padding-right: 0; }