/* KashPilot — feuille de style de l'espace privé (thème clair, Avenir Next) */

@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/plex-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/plex-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
    /* Thème clair forcé, quelle que soit la préférence du système */
    color-scheme: light only;

    --primaire: #087b7e;
    --primaire-fonce: #06666a;
    --primaire-teinte: rgba(19, 231, 235, .12);
    --anneau: rgba(19, 231, 235, .5);
    --halo: 0 0 12px rgba(19, 231, 235, .35);
    --sur-primaire: #14123a;
    /* Couleur primaire : dégradé de la marque (vert d'eau #ccfcc8 → cyan #13e7eb) ; --primaire = teinte foncée lisible pour textes et icônes */
    --degrade: linear-gradient(135deg, #ccfcc8, #13e7eb);
    --degrade-fonce: linear-gradient(135deg, #b3f5ae, #0fd0d4);
    --nav-fond: #191933;

    --fond: #f5f7f6;
    --carte: #ffffff;
    --carte-2: #f0f4f2;
    --remplissage: rgba(20, 40, 30, .07);
    --remplissage-2: rgba(20, 40, 30, .04);
    --menu-fond: rgba(255, 255, 255, .9);
    --ombre: none;
    --ombre-forte: 0 12px 40px rgba(16, 40, 28, .12);
    --flou: saturate(140%) blur(14px);

    --texte: #14211a;
    --texte-2: #4b5e54;
    --texte-3: #6b7d73;
    --trait: #e3e9e6;
    --trait-fort: #cdd7d2;

    --recette: #0a8f52;
    --depense: #d23a2a;
    --alerte: #b86e00;

    /* Avenir Next : police système Apple (non hébergée, licence commerciale) ; Plex Sans en secours */
    --police: "Avenir Next", "Avenir", "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --police-titre: var(--police);
    --police-mono: var(--police); /* chiffres aussi en Avenir Next, alignés par tabular-nums */

    --rayon: 6px;
    --rayon-moyen: 4px;
    --rayon-petit: 3px;
    --largeur-menu: 248px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
button, input, select, textarea, optgroup { font-family: inherit; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fond);
    color: var(--texte);
    font: 400 14px/1.47 var(--police);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 17px; letter-spacing: -0.02em; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }

:focus-visible { outline: 3px solid var(--anneau); outline-offset: 1px; }

.mono { font-family: var(--police-mono); font-size: 12.5px; letter-spacing: 0; }
.discret { color: var(--texte-2); }
.tres-discret { color: var(--texte-3); font-size: 13px; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recette { color: var(--recette); }
.depense { color: var(--depense); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fort { font-weight: 600; color: var(--texte); }

/* Cartes blanches, comme apple.com */
.bloc-auth, .panneau, .chiffre, .liste-assos {
    background: var(--carte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Marque */
.marque { display: inline-flex; align-items: center; gap: 9px; color: var(--texte); font-weight: 600; font-size: 17px; letter-spacing: -0.022em; }
.marque:hover { color: var(--texte); text-decoration: none; }
.marque svg { flex: none; }

/* Pages d'authentification */
.page-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 72px 16px 32px; }
.page-auth .marque { margin-bottom: 32px; font-size: 19px; }
.bloc-auth { width: 100%; max-width: 440px; padding: 40px 40px 34px; box-shadow: var(--ombre-forte); }
.bloc-auth.large { max-width: 600px; }
.bloc-auth h1 { margin-bottom: 8px; }
.bloc-auth > .discret { margin-bottom: 28px; font-size: 15px; }
.sous-auth { margin-top: 22px; font-size: 14px; color: var(--texte-2); text-align: center; }
.pied-auth { margin-top: auto; padding-top: 48px; font-size: 12px; color: var(--texte-3); }

/* Formulaires */
.champ { margin-bottom: 18px; }
.champ > label, .etiquette { display: block; margin: 0 0 6px; font-weight: 500; font-size: 13px; color: var(--texte); }
.champ .aide { margin: 6px 0 0; font-size: 12px; color: var(--texte-3); }
.facultatif { font-weight: 400; color: var(--texte-3); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    color: var(--texte);
    background: var(--carte);
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-moyen);
    transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: var(--texte-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 4px var(--anneau); }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
input.montant { text-align: right; font-variant-numeric: tabular-nums; }
.champ.a-erreur input, .champ.a-erreur select { border-color: var(--depense); }
.champ.a-erreur input:focus { box-shadow: 0 0 0 4px rgba(215, 0, 21, .15); }
.erreur { margin: 6px 0 0; font-size: 12.5px; color: var(--depense); }

.case { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texte); cursor: pointer; }
.case input { margin: 0; width: 16px; height: 16px; accent-color: var(--primaire); }

.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
fieldset { margin: 8px 0 18px; padding: 18px 18px 4px; border: 0; border-radius: var(--rayon-moyen); background: var(--fond); }
legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; font-weight: 600; font-size: 14px; }
legend + * { clear: both; }

.actions-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Boutons : capsules pleines, comme apple.com */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px;
    padding: 8px 18px;
    font: 400 14px/1.2 var(--police);
    letter-spacing: -0.01em;
    color: var(--texte);
    background: var(--remplissage);
    border: 0;
    border-radius: 980px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, filter .15s;
}
.bouton:hover { color: var(--texte); text-decoration: none; background: rgba(118, 118, 128, .18); }
.bouton:active { filter: brightness(.94); }
.bouton.principal { color: var(--sur-primaire); background: var(--degrade); }
.bouton.principal:hover { color: var(--sur-primaire); background: var(--degrade-fonce); }
.bouton.plein { width: 100%; min-height: 46px; font-size: 16px; }
.bouton.danger { color: var(--depense); }
.bouton.danger:hover { color: #fff; background: var(--depense); }
.bouton-lien { padding: 0; font: inherit; color: var(--primaire); background: none; border: 0; cursor: pointer; }
.bouton-lien:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Messages */
.message { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px 16px; font-size: 14px; border-radius: var(--rayon-moyen); background: var(--primaire-teinte); }
.message.alerte { background: rgba(255, 159, 10, .14); }
.message.erreur-globale { background: rgba(215, 0, 21, .08); color: var(--depense); }

/* Structure : barre latérale façon macOS */
.app { display: grid; grid-template-columns: var(--largeur-menu) minmax(0, 1fr); min-height: 100vh; }

.menu {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--menu-fond);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    border-right: 1px solid var(--trait);
    overflow-y: auto;
}
.menu-tete { padding: 22px 20px 16px; }
.asso-active { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 9px 10px; border-radius: var(--rayon-petit); background: var(--carte); box-shadow: var(--ombre); color: var(--texte); }
.asso-active:hover { color: var(--texte); text-decoration: none; }
.asso-active strong { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asso-active span { font-size: 12px; color: var(--primaire); }

.nav { padding: 4px 12px 16px; }
.nav-groupe { margin: 18px 10px 4px; font-size: 11px; font-weight: 600; color: var(--texte-3); }
.nav a, .nav .bientot { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 1px 0; border-radius: 8px; font-size: 13.5px; color: var(--texte); }
.nav a:hover { background: var(--remplissage-2); text-decoration: none; }
.nav a[aria-current=page] { background: var(--remplissage); font-weight: 600; }
.nav .bientot { color: var(--texte-3); cursor: default; }
.nav .bientot small { margin-left: auto; font-size: 10.5px; }

.menu-pied { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px 14px 18px; border-top: 1px solid var(--trait); font-size: 13px; }
.menu-pied .utilisateur { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-pied .role { font-size: 12px; color: var(--texte-3); margin-bottom: 6px; }

.barre-mobile { display: none; }

.contenu { min-width: 0; padding: 32px 40px 64px; }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.entete-page .discret { margin: 6px 0 0; font-size: 15px; }
.retour { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 6px; font-size: 14px; }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px; }
.chiffre { padding: 18px 20px 20px; }
.chiffre dt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texte-2); }
.chiffre dd { margin: 12px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Panneaux et tableaux */
.grille-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px; align-items: start; }
.panneau { overflow: hidden; }
.panneau-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; }
.panneau-tete a { font-size: 13px; }
.panneau-corps { padding: 0 22px 18px; }
.vide { padding: 4px 22px 22px; color: var(--texte-2); font-size: 14px; }
.vide p:last-child { margin: 0; }
.vide-centre { padding: 44px 24px; text-align: center; }
.vide-centre p, .vide-centre p:last-child { max-width: 460px; margin-left: auto; margin-right: auto; }
.vide-centre .groupe-boutons { justify-content: center; }
.vide-centre .bouton { margin-top: 8px; }

.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { padding: 10px 14px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--texte-3); border-bottom: 1px solid var(--trait); }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th:first-child, .tableau td:first-child { padding-left: 22px; }
.tableau th:last-child, .tableau td:last-child { padding-right: 22px; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover td { background: var(--carte-2); }
.tableau tfoot td { font-weight: 600; border-top: 1px solid var(--trait); border-bottom: 0; }
.tableau .tronque { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau td.actions, .tableau th.actions { width: 1%; text-align: right; white-space: nowrap; }
.tableau td.actions a, .tableau td.actions .bouton-lien { font-size: 13px; }
.panneau > .tableau thead th { padding-top: 16px; }

.pastille { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 500; border-radius: 980px; background: var(--remplissage-2); color: var(--texte-2); white-space: nowrap; }
.pastille-banque { background: var(--primaire-teinte); color: var(--primaire); }
.pastille-livret { background: rgba(0, 113, 227, .10); color: #0066cc; }
.pastille-caisse { background: rgba(255, 149, 0, .14); color: #b25000; }
details.replie { margin-top: 20px; }
details.replie > summary { cursor: pointer; list-style: none; }
details.replie > summary::-webkit-details-marker { display: none; }
details.replie > summary h2::before { content: "›"; display: inline-block; width: 14px; color: var(--texte-3); transition: transform .15s; }
details.replie[open] > summary h2::before { transform: rotate(90deg); }
details.replie:not([open]) > summary { padding-bottom: 18px; }

/* Liste d'associations (liste groupée façon iOS) */
.liste-assos { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--fond); box-shadow: none; }
.liste-assos li + li { border-top: 1px solid var(--trait); }
.liste-assos button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; font: inherit; font-size: 15px; text-align: left; color: var(--texte); background: none; border: 0; cursor: pointer; }
.liste-assos button:hover { background: var(--remplissage-2); }
.liste-assos button::after { content: "›"; margin-left: 4px; font-size: 18px; color: var(--texte-3); }
.liste-assos button > span:nth-child(2) { flex: 1; }
.liste-assos .role { margin-left: auto; font-size: 13px; color: var(--texte-3); }

/* Formulaires en carte */
.formulaire > .panneau-corps { padding: 26px 28px 8px; }
.pied-formulaire { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px 20px; border-top: 1px solid var(--trait); }
.aide-bloc { margin: -6px 0 14px; font-size: 12.5px; color: var(--texte-3); }
.zone-secondaire { margin-top: 20px; }
.zone-secondaire .panneau-corps { padding: 20px 28px; }
.ligne-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ligne-action p { margin: 3px 0 0; font-size: 13px; }

.mono-saisie { font-family: var(--police-mono); letter-spacing: .02em; }
.ligne-iban { grid-template-columns: 2fr 1fr; }
.avec-unite { position: relative; }
.avec-unite input { padding-right: 34px; }
.avec-unite span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--texte-3); pointer-events: none; }

/* Contrôle segmenté façon macOS */
.segment { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--remplissage); }
.segment label { margin: 0; cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 18px; font-size: 13px; font-weight: 500; color: var(--texte); border-radius: 7px; transition: background .15s, box-shadow .15s; }
.segment input:checked + span { background: var(--primaire-teinte); color: var(--primaire); box-shadow: inset 0 0 0 1px rgba(19, 231, 235, .45); }
.segment input:focus-visible + span { outline: 3px solid var(--anneau); }

[data-type-compte="caisse"] .seulement-banque { display: none; }
[data-type-compte="banque"] .seulement-caisse, [data-type-compte="livret"] .seulement-caisse { display: none; }

/* ── Icônes Phosphor duotone ── */
.icone { flex: none; display: inline-block; vertical-align: middle; }
.avec-icone { display: inline-flex; align-items: center; gap: 6px; }
h2 .icone { margin: -3px 8px 0 0; color: var(--primaire); }
.message .icone { color: var(--primaire); }
.message.erreur-globale .icone { color: var(--depense); }

.nav .icone { color: var(--primaire); }
.nav .bientot .icone { color: var(--texte-3); opacity: .7; }
.asso-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--primaire-teinte); color: var(--primaire); }
.asso-texte { flex: 1; min-width: 0; }
.asso-texte span { color: var(--texte-3); }
.asso-chevron { color: var(--texte-3); }
.avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--degrade); color: var(--sur-primaire); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.bouton-icone { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--texte-2); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background .15s, color .15s; }
.bouton-icone:hover { color: var(--texte); background: var(--remplissage); text-decoration: none; }
.tableau td.actions .bouton-icone { margin: -6px -8px -6px 0; }

.cellule-icone { display: flex; align-items: center; gap: 12px; }
.pastille-icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; }
.chiffre-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--remplissage-2); color: var(--texte-2); }
.chiffre-icone.recette { background: var(--primaire-teinte); color: var(--recette); }
.chiffre-icone.depense { background: rgba(215, 0, 21, .08); color: var(--depense); }
.chiffre:first-child .chiffre-icone { background: var(--primaire-teinte); color: var(--primaire); }
.vide-icone { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 20px; background: var(--primaire-teinte); color: var(--primaire); }

/* Formulaire pleine largeur : contenu principal + colonne latérale */
.colonnes-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.colonne-laterale { display: grid; gap: 20px; }
.colonnes-form .panneau-corps { padding: 6px 24px 10px; }
.colonnes-form .panneau-tete { padding: 20px 24px 12px; }
.colonnes-form .pied-formulaire { padding: 16px 24px 20px; }
.ligne-iban { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.solde-fige { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.zone-action { padding-top: 20px !important; padding-bottom: 20px !important; }
.zone-action h2 { margin-bottom: 4px; }
.zone-action p { font-size: 13px; }

@media (min-width: 1500px) {
    .colonnes-form .ligne-champs:not(.ligne-iban) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .colonnes-form .segment span { padding: 7px 22px; }
}

/* ── Opérations ── */
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 8px; }

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px; }
.filtres select { width: auto; flex: 0 1 auto; height: 38px; font-size: 14px; border-radius: 980px; background-color: var(--fond); border-color: transparent; }
.filtres select:hover { border-color: var(--trait-fort); }
.filtre-recherche { position: relative; flex: 1 1 260px; min-width: 200px; }
.filtre-recherche .icone { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texte-3); pointer-events: none; }
.filtre-recherche input { height: 38px; padding-left: 38px; font-size: 14px; border-radius: 980px; background: var(--fond); border-color: transparent; }
.filtres .effacer { margin-left: 4px; font-size: 13px; }

.defilement { overflow-x: auto; }
.tableau-operations tbody tr[data-href] { cursor: pointer; }
.tableau-operations td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau-operations td.libelle a { color: var(--texte); font-weight: 500; }
.tableau-operations td.libelle { max-width: 420px; }
.tableau-operations td.montant { font-weight: 600; }
.tableau td.etats, .tableau th.etats { width: 1%; white-space: nowrap; color: var(--texte-3); }
.tableau td.etats span + span { margin-left: 6px; }
.tableau td.etats .pointee { color: var(--recette); }
.pied-tableau { padding: 10px 22px 14px; border-top: 1px solid var(--trait); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pagination-liens { display: flex; align-items: center; gap: 6px; }
.pagination-page { font-size: 13px; color: var(--texte-2); }
.bouton-icone.inactif { opacity: .35; cursor: default; }
.bouton-icone.inactif:hover { background: none; }

.mono-titre { font-family: var(--police-mono); font-weight: 600; letter-spacing: -0.02em; }
.etiquette-etat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; border-radius: 980px; background: var(--remplissage-2); color: var(--texte-2); }

fieldset.sans-cadre { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; min-width: 0; }
fieldset.sans-cadre:disabled input, fieldset.sans-cadre:disabled select, fieldset.sans-cadre:disabled textarea { background: var(--fond); border-color: transparent; color: var(--texte); opacity: 1; -webkit-text-fill-color: var(--texte); }
fieldset.sans-cadre:disabled .segment { opacity: .6; }
.entete-segment { padding-top: 22px !important; padding-bottom: 4px !important; }
.segment-large span { padding: 8px 20px; font-size: 14px; }

.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.grille-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.champ-montant input { font-size: 18px; font-weight: 600; }

/* Visibilité selon le type d'opération */
[data-type-operation="virement"] .seulement-operation,
[data-type-operation="depense"] .seulement-virement,
[data-type-operation="recette"] .seulement-virement,
[data-type-operation="recette"] .seulement-depense,
[data-type-operation="depense"] .seulement-recette,
[data-type-operation="virement"] .seulement-depense,
[data-type-operation="virement"] .seulement-recette { display: none !important; }

.bloc-categorie { margin: 0 24px 12px; padding: 16px 18px 16px; border-radius: var(--rayon-moyen); background: var(--fond); }
.repartition-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.repartition-tete h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.bloc-categorie .message { margin-bottom: 12px; }
.bloc-categorie input, .bloc-categorie select { background-color: var(--carte); }
.erreur-tuiles { margin: -4px 0 10px; }

/* Catégories en tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tuile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: var(--rayon-moyen); background: var(--carte); box-shadow: 0 0 0 1px var(--trait); cursor: pointer; transition: box-shadow .12s, background .12s; }
.tuile:hover { box-shadow: 0 0 0 1px var(--trait-fort), var(--ombre); }
.tuile input { position: absolute; opacity: 0; pointer-events: none; }
.tuile-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--remplissage-2); color: var(--texte-2); transition: background .12s, color .12s; }
.tuile-nom { font-size: 13.5px; line-height: 1.25; }
.tuile:has(input:checked) { background: var(--primaire-teinte); box-shadow: 0 0 0 2px var(--primaire); }
.tuile:has(input:checked) .tuile-icone { background: var(--degrade); color: var(--sur-primaire); }
.tuile:has(input:checked) .tuile-nom { font-weight: 600; }
.tuile:has(input:focus-visible) { outline: 3px solid var(--anneau); outline-offset: 2px; }
[data-type-operation="depense"] .tuile[data-sens="recette"],
[data-type-operation="recette"] .tuile[data-sens="depense"] { display: none; }
fieldset:disabled .tuile { cursor: default; }

.bloc-categorie .lignes-reparties { display: none; }
.bloc-categorie.mode-reparti .tuiles { display: none; }
.bloc-categorie.mode-reparti .lignes-reparties { display: block; }
.ligne-repartition { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 150px 34px; gap: 10px; align-items: start; }
.ligne-repartition:not(:has(select[name$="[projet_id]"])) { grid-template-columns: minmax(0, 1fr) 150px 34px; }
.ligne-repartition .champ { margin-bottom: 10px; }
.ligne-repartition .retirer-ligne { margin-top: 5px; }
.actions-repartition { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
.actions-repartition .bouton-lien:last-child { color: var(--texte-2); }

/* Options repliées */
.plus-options { margin: 0 0 4px; border-top: 1px solid var(--trait); }
.plus-options > summary { display: flex; align-items: center; gap: 8px; padding: 14px 24px; font-weight: 500; font-size: 14px; color: var(--primaire); cursor: pointer; list-style: none; }
.plus-options > summary::-webkit-details-marker { display: none; }
.plus-options > summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--texte-3); transition: transform .15s; }
.plus-options[open] > summary::after { transform: rotate(90deg); }
.plus-options > summary .tres-discret { font-weight: 400; }
.plus-options > .panneau-corps { padding-top: 0; }
.plus-options-interne { margin: 0 0 16px; border: 0; border-radius: var(--rayon-moyen); background: var(--fond); }
.plus-options-interne > summary { padding: 12px 16px; }
.plus-options-interne > .ligne-champs { padding: 0 16px 2px; }
.option-repartir { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 14px; }

/* Bulle d'aide */
.aide-info { position: relative; display: inline-grid; place-items: center; vertical-align: middle; width: 20px; height: 20px; color: var(--texte-3); cursor: help; border-radius: 50%; }
.aide-info:hover, .aide-info:focus { color: var(--primaire); outline: none; }
.aide-info .bulle { position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 280px; padding: 10px 12px; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-align: left; white-space: normal; color: var(--texte); background: var(--carte); border: 1px solid var(--trait-fort); border-radius: 4px; box-shadow: var(--ombre-forte); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.aide-info:hover .bulle, .aide-info:focus .bulle { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.liste-fichiers { list-style: none; margin: 0 0 14px; padding: 0; }
.liste-fichiers li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.liste-fichiers li:first-child { padding-top: 0; }
.fichier-icone { color: var(--primaire); display: inline-flex; }
.fichier-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); font-size: 13.5px; }
.fichier-nom .tres-discret { display: block; font-size: 12px; }
.depot-fichiers { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; border: 1.5px dashed var(--trait-fort); border-radius: var(--rayon-moyen); color: var(--primaire); cursor: pointer; transition: border-color .15s, background .15s; }
.depot-fichiers:hover, .depot-fichiers:focus-within { border-color: var(--primaire); background: var(--primaire-teinte); }
.depot-fichiers.rempli { border-style: solid; border-color: var(--primaire); background: var(--primaire-teinte); }
.depot-fichiers strong { color: var(--texte); font-size: 14px; }
.depot-fichiers input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-choisis { font-size: 12.5px; color: var(--primaire); word-break: break-word; }
.depot-choisis:empty { display: none; }

.liste-infos { margin: 0; padding: 0 24px 16px; }
.liste-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: 13.5px; }
.liste-infos > div:last-child { border-bottom: 0; }
.liste-infos dt { color: var(--texte-2); }
.liste-infos dd { margin: 0; text-align: right; }

/* ── Prise en main ── */
.menu-ajout { padding: 4px 12px 6px; }
.menu-ajout .bouton { min-height: 40px; font-size: 14px; }

.grandes-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grande-tuile { display: flex; flex-direction: column; gap: 6px; padding: 28px 26px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); color: var(--texte); transition: transform .15s, box-shadow .15s; }
.grande-tuile:hover { color: var(--texte); text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.grande-tuile strong { margin-top: 10px; font-size: 19px; letter-spacing: -0.02em; }
.grande-tuile span:last-child { color: var(--texte-2); font-size: 14px; }
.grande-tuile-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--remplissage-2); color: var(--texte-2); }
.depense .grande-tuile-icone { background: rgba(215, 0, 21, .08); color: var(--depense); }
.recette .grande-tuile-icone { background: var(--primaire-teinte); color: var(--recette); }

.actions-rapides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.action-rapide { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); color: var(--texte); transition: transform .15s, box-shadow .15s; }
.action-rapide:hover { color: var(--texte); text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.action-rapide .grande-tuile-icone { width: 48px; height: 48px; border-radius: 14px; }
.action-rapide strong { display: block; font-size: 16px; }
.action-rapide small { color: var(--texte-2); font-size: 13px; }

.premiers-pas { margin-bottom: 20px; }
.etapes { list-style: none; margin: 0; padding: 0 22px 10px; }
.etapes li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--trait); }
.etapes li:first-child { border-top: 0; }
.etapes li > div { flex: 1; }
.etapes strong { font-size: 15px; }
.etapes p { margin: 2px 0 0; font-size: 13.5px; color: var(--texte-2); }
.etape-puce { display: inline-flex; color: var(--trait-fort); }
.etapes li.faite .etape-puce { color: var(--primaire); }
.etapes li.faite strong { color: var(--texte-2); text-decoration: line-through; text-decoration-color: var(--texte-3); }

.pastille-icone.depense { background: rgba(215, 0, 21, .08); color: var(--depense); }
.pastille-icone.recette { background: var(--primaire-teinte); color: var(--recette); }
.cellule-icone-petite { width: 1%; padding-right: 0 !important; }
.cellule-icone-petite .pastille-icone { width: 34px; height: 34px; }

.bouton-filtres.actif { background: var(--primaire-teinte); color: var(--primaire); }
.filtres-avances { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid var(--trait); }
.filtres-avances[hidden] { display: none; }
.filtres .bouton { min-height: 38px; }

/* ── Paramètres ── */
.onglets { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: -8px 0 24px; padding: 3px; border-radius: 12px; background: var(--remplissage); }
.onglets a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--texte); }
.onglets a:hover { text-decoration: none; background: var(--remplissage-2); }
.onglets a[aria-current=page] { background: var(--primaire-teinte); color: var(--primaire); box-shadow: inset 0 0 0 1px rgba(19, 231, 235, .45); }
.onglets .icone { color: var(--primaire); }
.intro-page { max-width: 760px; margin: -8px 0 20px; font-size: 15px; }

.colonne-principale { display: grid; gap: 20px; align-content: start; }
.grille-moitie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ligne-cp { grid-template-columns: 110px minmax(0, 1fr); }
.pied-collant { position: sticky; bottom: 16px; }

.liste-membres, .liste-categories { list-style: none; margin: 0; padding: 0 22px 8px; }
.liste-membres li, .liste-categories li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--trait); }
.liste-membres li:first-child, .liste-categories li:first-child { border-top: 0; }
.membre-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.membre-texte strong, .membre-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membre-role select { width: auto; height: 36px; font-size: 13.5px; border-radius: 980px; background-color: var(--fond); border-color: transparent; }
.liste-membres .avatar { width: 38px; height: 38px; font-size: 13px; }
.avatar-attente { background: var(--remplissage) !important; color: var(--texte-2) !important; }

.choix-roles { display: grid; gap: 8px; }
.choix-role { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rayon-moyen); box-shadow: 0 0 0 1px var(--trait); cursor: pointer; transition: box-shadow .12s, background .12s; }
.choix-role:hover { box-shadow: 0 0 0 1px var(--trait-fort); }
.choix-role input { position: absolute; opacity: 0; }
.choix-role strong { display: block; font-size: 14px; }
.choix-role small { display: block; font-size: 12.5px; color: var(--texte-2); line-height: 1.35; }
.choix-role:has(input:checked) { background: var(--primaire-teinte); box-shadow: 0 0 0 2px var(--primaire); }
.choix-role:has(input:checked) .tuile-icone { background: var(--degrade); color: var(--sur-primaire); }
.choix-role:has(input:focus-visible) { outline: 3px solid var(--anneau); }
.aide-sous-bouton { margin: 10px 0 4px; text-align: center; }

.lien-partage { margin-bottom: 20px; box-shadow: 0 0 0 2px var(--primaire), var(--ombre); }
.lien-partage .panneau-corps { padding: 18px 22px; }
.lien-partage h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.copie { display: flex; gap: 8px; }
.copie input { flex: 1; font-family: var(--police-mono); font-size: 13px; background: var(--fond); }

.liste-categories li > form { flex: none; }
.categorie-nom { flex: 1; min-width: 0; }
.edition-inline { flex: 1; min-width: 0; }
.edition-inline > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.edition-inline > summary::-webkit-details-marker { display: none; }
.edition-inline > summary .bouton-icone { margin-left: auto; width: 30px; height: 30px; opacity: .55; }
.edition-inline:hover > summary .bouton-icone, .edition-inline[open] > summary .bouton-icone { opacity: 1; }
.form-inline { display: flex; gap: 8px; margin-top: 8px; }
.form-inline input { height: 38px; }

.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.carte-projet { display: flex; flex-direction: column; padding: 20px 22px 16px; }
.carte-projet.termine { opacity: .75; }
.carte-projet-tete { display: flex; align-items: flex-start; gap: 12px; }
.carte-projet-tete > div { flex: 1; min-width: 0; }
.carte-projet-tete h2 { font-size: 17px; }
.carte-projet-tete p { margin: 2px 0 0; }
.carte-projet-description { margin: 12px 0 0; font-size: 13.5px; }
.carte-projet-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--rayon-moyen); background: var(--fond); }
.carte-projet-chiffres dt { font-size: 12px; color: var(--texte-2); }
.carte-projet-chiffres dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-projet-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13.5px; }
.replie-simple { margin-top: 28px; }
.replie-simple > summary { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-weight: 600; color: var(--texte-2); cursor: pointer; }

.tuiles .champ-projet { grid-column: 1 / -1; margin: 8px 0 0; }
.champ-projet label { display: flex; align-items: center; gap: 6px; }
.champ-projet .icone { color: var(--primaire); }
.champ-projet select { max-width: 420px; }

.invitation-tete { text-align: center; margin-bottom: 24px; }
.invitation-tete .vide-icone { margin-bottom: 16px; }
.invitation-tete h1 { margin-bottom: 10px; }
.invitation-tete p { margin-bottom: 8px; }

/* ── Relevés de banque ── */
.explication { margin-bottom: 20px; }
.etapes-horizontales { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 18px 0 4px; }
.etapes-horizontales li { display: flex; gap: 12px; }
.etapes-horizontales .numero { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primaire-teinte); color: var(--primaire); font-weight: 700; }
.etapes-horizontales strong { font-size: 15px; }
.etapes-horizontales p { margin: 2px 0 0; font-size: 13.5px; color: var(--texte-2); }
.alerte-texte { color: var(--alerte); }
.carte-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chiffre dd.chiffre-texte { font-size: 20px; }
.barre-confirmation { display: flex; justify-content: flex-end; gap: 10px; margin: 20px 0; }
.colonnes-import { margin-top: 20px; }
.tableau-brut { margin-bottom: 18px; font-size: 12.5px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.tableau-brut th, .tableau-brut td { padding: 6px 10px !important; white-space: nowrap; }
.depot-fichiers.grand { padding: 40px 20px; margin-top: 6px; }
.depot-fichiers.erreur-depot { border-color: var(--depense); }

.bandeau-action { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 18px 22px; box-shadow: 0 0 0 2px var(--primaire), var(--ombre); }
.bandeau-action > div { flex: 1; }
.bandeau-action p { margin: 2px 0 0; font-size: 13.5px; }
.grande-tuile-icone.recette { background: var(--primaire-teinte); color: var(--primaire); }

.liste-lignes { display: grid; gap: 12px; }
.ligne-releve { padding: 16px 20px; }
.ligne-releve-tete { display: flex; align-items: center; gap: 12px; }
.ligne-releve-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-releve-texte strong { font-family: var(--police-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; }
.ligne-releve-montant { font-size: 17px; }
.ligne-releve-suggestion { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: var(--rayon-moyen); background: var(--primaire-teinte); color: var(--primaire); }
.ligne-releve-suggestion span { flex: 1; color: var(--texte); font-size: 14px; }
.ligne-releve-creer { margin-top: 10px; }
.ligne-releve-creer > summary { font-size: 13.5px; color: var(--primaire); cursor: pointer; }
.form-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) repeat(auto-fit, minmax(0, 1fr)); gap: 0 12px; align-items: end; margin-top: 10px; }
.form-ligne .champ { margin-bottom: 0; }
.form-ligne .bouton { height: 44px; }
.ligne-releve-ignorer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; font-size: 13px; }
.ligne-releve-ignorer .bouton-lien { color: var(--texte-3); }

.etape-verification .panneau-corps { padding-top: 22px; padding-bottom: 20px; }
.etape-verification .grille-champs { margin-bottom: 4px; }
.resultat-verification { margin: 20px 22px 10px; padding: 16px 20px; border-radius: var(--rayon-moyen); background: var(--fond); }
.resultat-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 14.5px; }
.resultat-ligne strong { font-variant-numeric: tabular-nums; }
.resultat-verdict { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--trait); font-size: 17px; font-weight: 600; }
.resultat-verification.ok { background: var(--primaire-teinte); }
.resultat-verification.ok .resultat-verdict { color: var(--primaire); }
.resultat-verification.ko { background: rgba(255, 159, 10, .12); }
.resultat-verification.ko .resultat-verdict { color: var(--alerte); }
.liste-a-cocher { list-style: none; margin: 0; padding: 0 22px 8px; }
.liste-a-cocher li + li { border-top: 1px solid var(--trait); }
.liste-a-cocher label { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.liste-a-cocher input { width: 20px; height: 20px; flex: none; accent-color: var(--primaire); }
.ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-a-cocher label:has(input:not(:checked)) .ligne-texte strong { color: var(--texte-3); text-decoration: line-through; }
.aide-ecart { margin: 8px 22px 16px; padding: 14px 18px; border-radius: var(--rayon-moyen); background: var(--fond); font-size: 14px; }
.aide-ecart h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.aide-ecart ul { margin: 0; padding-left: 20px; }
.aide-ecart li { margin: 4px 0; color: var(--texte-2); }
.aide-ecart li strong { color: var(--texte); }

/* ── Adhérents ── */
.colonnes-egales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloc-cotisation[data-statut="exoneree"] .seulement-payant,
.bloc-cotisation:not([data-statut="payee"]) .seulement-paye { display: none; }
.tuiles-tarifs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-bottom: 10px; }
.tuiles-tarifs .tuile { min-height: 60px; }
.tuile-nom strong { display: block; font-weight: 600; }
.tuile-nom small { display: block; color: var(--texte-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.champ-montant-cotisation { max-width: 200px; }
.choix-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-choix { position: relative; cursor: pointer; }
.pastille-choix input { position: absolute; opacity: 0; }
.pastille-choix span { display: inline-block; padding: 8px 16px; font-size: 14px; border-radius: 980px; background: var(--remplissage-2); transition: background .12s, color .12s; }
.pastille-choix:hover span { background: var(--remplissage); }
.pastille-choix input:checked + span { background: var(--degrade); color: var(--sur-primaire); font-weight: 500; }
.pastille-choix input:focus-visible + span { outline: 3px solid var(--anneau); }
.barre-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.onglets-compacts { margin: 0; }
.onglets .compteur { min-width: 22px; padding: 0 7px; font-size: 12px; line-height: 20px; text-align: center; border-radius: 980px; background: var(--remplissage-2); color: var(--texte-2); }
.filtres-simples { display: flex; gap: 10px; flex: 1; justify-content: flex-end; max-width: 520px; }
.filtres-simples select { width: auto; height: 38px; font-size: 14px; border-radius: 980px; background-color: var(--carte); border-color: transparent; box-shadow: var(--ombre); }
.filtres-simples .filtre-recherche input { background: var(--carte); box-shadow: var(--ombre); }

.pastille .icone { margin: -2px 4px 0 -2px; }
.pastille-ok { background: var(--primaire-teinte); color: var(--primaire); }
.pastille-attente { background: rgba(255, 159, 10, .14); color: var(--alerte); }
.bouton.petit { min-height: 30px; padding: 5px 12px; font-size: 13px; }
.tableau-adherents tbody tr[data-href] { cursor: pointer; }
.tableau-adherents td { vertical-align: middle; }
.pied-emails { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.liste-tarifs { list-style: none; margin: 0 0 18px; padding: 0; }
.liste-tarifs li { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.liste-tarifs li strong { flex: 1; }
.liste-tarifs li.inactif { color: var(--texte-3); }
.form-tarif { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.form-tarif .champ { margin-bottom: 0; }
.form-tarif .bouton { height: 44px; }

.entete-personne { display: flex; align-items: center; gap: 18px; }
.avatar-grand { width: 64px !important; height: 64px !important; font-size: 22px !important; }
.liste-cotisations { list-style: none; margin: 0; padding: 0 22px 10px; }
.liste-cotisations > li { padding: 12px 0; border-top: 1px solid var(--trait); }
.liste-cotisations > li:first-child { border-top: 0; }
.cotisation-ligne { display: flex; align-items: center; gap: 12px; }
.form-paiement { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 10px; padding: 14px 16px; border-radius: var(--rayon-moyen); background: rgba(255, 159, 10, .10); }
.form-paiement .champ { margin: 0; }
.form-paiement .champ label { font-size: 12px; }
.form-paiement input, .form-paiement select { height: 40px; width: auto; }
.form-paiement-titre { display: flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: 14px; }
.form-paiement .bouton { height: 40px; }
#paiement:target .form-paiement { box-shadow: 0 0 0 2px var(--alerte); }

/* Adaptations */
@media (max-width: 1100px) {
    .colonnes-form, .colonnes-egales { grid-template-columns: 1fr; }
    .pied-collant { position: static; }
}

@media (max-width: 960px) {
    .chiffres { grid-template-columns: repeat(2, 1fr); }
    .grille-2 { grid-template-columns: 1fr; }
    .contenu { padding: 28px 28px 56px; }
}

@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .barre-mobile {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 20;
        padding: 10px 16px;
        background: var(--menu-fond);
        -webkit-backdrop-filter: var(--flou);
        backdrop-filter: var(--flou);
        border-bottom: 1px solid var(--trait);
    }
    .menu { position: fixed; z-index: 30; left: 0; top: 0; width: 280px; height: 100vh; background: var(--carte); transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
    .menu.ouvert { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3); }
    .contenu { padding: 24px 16px 48px; }
    h1 { font-size: 24px; }
    .entete-page { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
    .entete-page .bouton { align-self: stretch; }
    .ligne-champs, .ligne-iban { grid-template-columns: 1fr; }
    .bloc-auth { padding: 28px 22px 24px; }
    .page-auth { padding-top: 40px; }
    .tableau .masquable { display: none; }
    .chiffre dd { font-size: 21px; }
    .segment { display: flex; }
    .segment label { flex: 1; text-align: center; }
    .segment span { padding: 6px 8px; }
    .formulaire > .panneau-corps, .pied-formulaire, .zone-secondaire .panneau-corps, .colonnes-form .panneau-corps, .colonnes-form .panneau-tete { padding-left: 20px; padding-right: 20px; }
    .segment span .icone { display: none; }
    .groupe-boutons { width: 100%; }
    .groupe-boutons .bouton { flex: 1; }
    .filtres select { flex: 1 1 140px; }
    .grille-2-1 { grid-template-columns: 1fr; }
    .bloc-categorie { margin: 0 16px 12px; padding: 14px; }
    .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ligne-repartition, .ligne-repartition:not(:has(select[name$="[projet_id]"])) { grid-template-columns: minmax(0, 1fr) 110px 34px; }
    .ligne-repartition .champ:has(select[name$="[projet_id]"]) { grid-column: 1 / -1; order: 5; }
    .plus-options > summary { padding: 14px 20px; }
    .plus-options > summary .tres-discret { display: none; }
    .grandes-tuiles, .actions-rapides { grid-template-columns: 1fr; gap: 12px; }
    .grille-moitie { grid-template-columns: 1fr; }
    .barre-filtres { flex-direction: column; align-items: stretch; }
    .filtres-simples { max-width: none; }
    .form-tarif { grid-template-columns: 1fr; }
    .cotisation-ligne { flex-wrap: wrap; }
    .cotisation-ligne .membre-texte { flex-basis: 100%; }
    .entete-personne .avatar-grand { display: none !important; }
    .etapes-horizontales { grid-template-columns: 1fr; gap: 14px; }
    .form-ligne { grid-template-columns: 1fr; gap: 10px; }
    .bandeau-action { flex-direction: column; align-items: flex-start; }
    .ligne-releve-suggestion { flex-wrap: wrap; }
    .barre-confirmation { flex-direction: column-reverse; }
    .barre-confirmation .bouton { width: 100%; }
    .resultat-verification, .aide-ecart { margin-left: 16px; margin-right: 16px; }
    .liste-a-cocher { padding: 0 16px 8px; }
    .onglets { display: flex; }
    .onglets a { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; }
    .onglets a .icone { display: none; }
    .liste-membres li { flex-wrap: wrap; }
    .membre-texte { flex-basis: calc(100% - 100px); }
    .membre-role { margin-left: 50px; }
    .grille-projets { grid-template-columns: 1fr; }
    .copie { flex-direction: column; }
    .liste-membres, .liste-categories { padding: 0 18px 8px; }
    .grande-tuile { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 18px; gap: 4px 14px; }
    .grande-tuile strong { margin: 0; font-size: 17px; flex: 1; }
    .grande-tuile span:last-child { flex-basis: 100%; padding-left: 70px; margin-top: -8px; }
    .etapes li { flex-wrap: wrap; }
    .etapes li .bouton { margin-left: 40px; }
    .bouton { min-height: 44px; }
    .pied-formulaire { flex-wrap: wrap; }
    .pied-formulaire .bouton { flex: 1 1 auto; }
    .aide-info .bulle { max-width: 240px; }
    .liste-infos { padding: 0 20px 14px; }
    .ligne-action { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    .chiffres { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
    :root { --menu-fond: var(--fond); }
}
.lien-discret { color: var(--texte); }
.lien-discret:hover { color: var(--primaire); }
.ligne-grisee td { color: var(--texte-3) !important; }
.case-bloc { align-items: flex-start; margin-bottom: 10px; font-weight: 500; }
.case-bloc input { margin-top: 3px; }
.select-capsule { width: auto; height: 36px; font-size: 14px; border-radius: 980px; background-color: var(--remplissage); border-color: transparent; }

/* ── Dons ── */
[data-don][data-donateur="existant"] .seulement-nouveau,
[data-don][data-type="organisme"] .seulement-personne,
[data-don][data-type="personne"] .seulement-organisme,
[data-don][data-nature="numeraire"] .seulement-nature,
[data-don][data-nature="nature"] .seulement-numeraire { display: none !important; }
.recu-carte { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 18px; border-radius: var(--rayon-moyen); background: var(--primaire-teinte); }
.recu-carte > div { flex: 1; }
.recu-carte p { margin: 2px 0 0; font-size: 13.5px; }
@media (max-width: 760px) { .recu-carte { flex-wrap: wrap; } }

/* ── Remboursements de frais ── */
.lignes-frais { padding: 0 22px; }
.ligne-frais { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1.3fr) repeat(auto-fit, minmax(0, 1fr)) 34px; gap: 0 10px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.ligne-frais:not(:has(select[name$="[projet_id]"])) { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1.3fr) 34px; }
.ligne-frais .champ { margin: 0; }
.ligne-frais label { font-size: 12px; color: var(--texte-2); }
.ligne-frais[data-nature="kilometrique"] .sauf-km,
.ligne-frais:not([data-nature="kilometrique"]) .seulement-km { display: none; }
.km-saisie { display: flex; gap: 6px; }
.km-saisie input { width: 80px; flex: none; text-align: right; }
.km-saisie select { flex: 1; min-width: 0; padding-right: 26px; background-position: right 10px center; }
.ligne-frais [data-calcule] { font-weight: 600; color: var(--primaire); }
.retirer-frais { margin-top: 24px; }
.pile-boutons { display: grid; gap: 8px; }

.frise { list-style: none; display: flex; gap: 0; margin: 0 0 20px; padding: 0; }
.frise li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; text-align: center; font-size: 13px; }
.frise li::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--trait-fort); z-index: 0; }
.frise li:first-child::before { display: none; }
.frise li.faite::before { background: var(--degrade); }
.frise-puce { position: relative; z-index: 1; display: inline-flex; color: var(--trait-fort); background: var(--fond); border-radius: 50%; }
.frise li.faite .frise-puce { color: var(--primaire); }

@media (max-width: 1100px) {
    .ligne-frais, .ligne-frais:not(:has(select[name$="[projet_id]"])) { grid-template-columns: repeat(2, minmax(0, 1fr)) 34px; gap: 10px; }
    .ligne-frais .champ-description { grid-column: 1 / -1; }
    .retirer-frais { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) { .lignes-frais { padding: 0 16px; } }

/* ── Budget ── */
.liste-budget { list-style: none; margin: 0; padding: 0 22px 10px; }
.liste-budget li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--trait); }
.liste-budget li:first-child { border-top: 0; }
.liste-budget label { flex: 1; min-width: 0; font-size: 14px; }
.liste-budget label small { display: block; }
.liste-budget .avec-unite { width: 140px; flex: none; }
.liste-budget input { height: 38px; }
.liste-budget .pastille-icone { width: 30px; height: 30px; border-radius: 8px; }
.pleine-largeur { grid-column: 1 / -1; align-items: center; }
.resultat-previsionnel { margin-right: auto; font-size: 15px; }
.budget-ligne { flex: 1; min-width: 0; }
.budget-texte { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.jauge { position: relative; height: 8px; margin: 6px 0 2px; border-radius: 980px; background: var(--remplissage-2); overflow: visible; }
.jauge span { display: block; height: 100%; border-radius: 980px; background: var(--degrade); }
.jauge.depense span { background: #0a84ff; }
.jauge.depassee span { background: var(--depense); }
.jauge i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--texte-3); border-radius: 1px; }
@media (max-width: 760px) { .liste-budget .avec-unite { width: 110px; } .liste-budget { padding: 0 16px 10px; } }

/* ── Bilan ── */
.tableau-resultat tr.rubrique td { font-weight: 600; background: var(--carte-2); }
.tableau-resultat tr.detail td:first-child { padding-left: 38px; color: var(--texte-2); }
.tableau-resultat tr.detail td { font-size: 13.5px; padding-top: 7px; padding-bottom: 7px; }
.liste-controle { list-style: none; margin: 0; padding: 0 22px 12px; }
.liste-controle li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--trait); color: var(--alerte); }
.liste-controle li:first-child { border-top: 0; }
.liste-controle li span { flex: 1; color: var(--texte); }
.liste-controle li.ok { color: var(--primaire); }

/* ── Bilan pour l'AG ── */
.tableau-bilan .ligne-rubrique td { padding-top: 14px; font-size: 12px; font-weight: 600; color: var(--texte-2); border-bottom: 0; }
.tableau-bilan tbody tr:not(.ligne-rubrique) td:first-child { padding-left: 34px; }
.liste-controles { list-style: none; margin: 0; padding: 0 22px 14px; }
.liste-controles li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; }
.liste-controles li.fait .icone { color: var(--primaire); }
.liste-controles li.a-faire .icone { color: var(--alerte); }
.zone-cloture { margin-top: 20px; }
.menu-pied a.utilisateur { color: var(--texte); }
.menu-pied a.utilisateur:hover { color: var(--primaire); text-decoration: none; }

/* ══ Finitions ══════════════════════════ */
body { background: var(--fond); letter-spacing: 0; }
::selection { background: rgba(19, 231, 235, .2); color: var(--texte); }
a { color: var(--primaire); }
a:hover { color: var(--primaire-fonce); }

/* Titres */
h1, h2, h3, .chiffre dd, .grande-tuile strong, .action-rapide strong, .solde-fige, .resultat-verdict { font-family: var(--police-titre); }
h1 { font-size: 30px; font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.chiffre dd { font-weight: 600; letter-spacing: .01em; }

/* Petites étiquettes en capitales */
.nav-groupe, .chiffre dt, .tableau th, .etiquette, .champ > label, .liste-infos dt, .carte-projet-chiffres dt,
.etapes-horizontales .numero, .pastille, .compteur, .tres-discret.mono, .retour {
    font-family: var(--police-mono);
}
.nav-groupe, .chiffre dt, .tableau th, .carte-projet-chiffres dt { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 400; }
.champ > label, .etiquette { font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--texte-2); }
.chiffre dt { color: var(--texte-3); }
.retour { font-size: 12.5px; letter-spacing: .04em; }
.pastille { font-size: 11.5px; letter-spacing: .02em; border-radius: 3px; }

/* Chiffres et montants : chiffres de largeur fixe */
.num, .montant, .mono, .chiffre dd, .budget-texte .num, .resultat-ligne strong { font-family: var(--police-mono); font-variant-numeric: tabular-nums; }
.chiffre dd { font-family: var(--police-titre); font-size: 28px; }

/* Marque : logo image (noir sur fond clair, blanc dans la barre latérale) */
.marque { display: inline-flex; align-items: center; line-height: 0; }
.marque img { display: block; width: auto; height: 24px; }
.marque .logo-blanc, .menu .marque .logo-noir { display: none; }
.menu .marque .logo-blanc { display: block; }
.barre-mobile .marque img { height: 20px; }
.page-auth .marque img { height: 34px; }

/* Surfaces : cartes sombres à filet fin */
.bloc-auth, .panneau, .chiffre, .liste-assos, .grande-tuile, .action-rapide { border: 1px solid var(--trait); box-shadow: none; }
.panneau-tete { border-bottom: 1px solid var(--trait); padding-bottom: 12px; margin-bottom: 4px; }
.panneau-tete + .tableau thead th, .panneau > .tableau thead th { padding-top: 12px; }
.bloc-auth { box-shadow: var(--ombre-forte); }
.chiffre { position: relative; overflow: hidden; }
.chiffre::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--trait-fort); }
.chiffre:has(dd.recette)::before { background: var(--recette); box-shadow: var(--halo); }
.chiffre:has(dd.depense)::before { background: var(--depense); }

/* Barre latérale */
/* Fond sombre : les variables sont redéfinies pour tout ce qui est dans le menu */
.menu {
    --carte: #24244a;
    --texte: #ececf7;
    --texte-2: #b6b6d2;
    --texte-3: #8c8cb0;
    --trait: rgba(255, 255, 255, .08);
    --trait-fort: rgba(255, 255, 255, .16);
    --remplissage: rgba(255, 255, 255, .10);
    --remplissage-2: rgba(255, 255, 255, .06);
    --primaire: #13e7eb;
    --primaire-fonce: #0fd0d4;
    --primaire-teinte: rgba(19, 231, 235, .14);
    --anneau: rgba(19, 231, 235, .35);
    --halo: 0 0 12px rgba(19, 231, 235, .35);
    --sur-primaire: #14123a;
    color-scheme: dark;
    background: var(--nav-fond);
    color: var(--texte);
    border-right: 0;
}
.asso-active { background: var(--carte); border: 1px solid var(--trait); box-shadow: none; }
.asso-active:hover { border-color: var(--trait-fort); }
.asso-icone, .chiffre-icone, .pastille-icone, .tuile-icone, .vide-icone, .grande-tuile-icone { border-radius: 4px; }
.nav a, .nav .bientot { border-radius: 3px; color: var(--texte-2); }
.nav a:hover { background: var(--remplissage-2); color: var(--texte); }
.nav a[aria-current=page] { background: var(--primaire-teinte); color: var(--primaire); font-weight: 500; box-shadow: inset 2px 0 0 var(--primaire); }
.nav .icone { color: var(--texte-3); }
.nav a[aria-current=page] .icone, .nav a:hover .icone { color: var(--primaire); }
.avatar { border-radius: 4px; font-family: var(--police-titre); }
.menu-pied { border-top-color: var(--trait); }

/* Boutons : capitales, angles nets, halo au survol */
.bouton { font-family: var(--police-titre); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.bouton:hover { background: var(--remplissage-2); color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte-3); }
.bouton.principal { background: var(--degrade); color: var(--sur-primaire); box-shadow: none; }
.bouton.principal:hover { background: var(--degrade-fonce); color: var(--sur-primaire); box-shadow: var(--halo); }
.bouton.danger { color: var(--depense); box-shadow: inset 0 0 0 1px rgba(210, 58, 42, .45); }
.bouton.danger:hover { background: var(--depense); color: #fff; }
.bouton.petit { font-size: 11.5px; }
.bouton:disabled { opacity: .4; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--trait-fort); background: transparent; color: var(--texte-3); }
.bouton-icone { border-radius: 3px; }
.bouton-icone:hover { color: var(--primaire); }

/* Champs */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
    background-color: var(--carte); border-color: var(--trait-fort); border-radius: 3px; color: var(--texte);
}
input:focus, select:focus, textarea:focus { border-color: var(--primaire); box-shadow: 0 0 0 3px var(--anneau); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23087b7e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
fieldset:not(.sans-cadre), .bloc-categorie, .plus-options-interne, .resultat-verification, .aide-ecart, .carte-projet-chiffres { background: var(--fond); border: 1px solid var(--trait); }
.filtres select, .filtre-recherche input, .filtres-simples select, .filtres-simples .filtre-recherche input, .membre-role select, .select-capsule { border-radius: 3px; background-color: var(--carte); border-color: var(--trait-fort); box-shadow: none; }

/* Contrôles de choix */
.segment, .onglets { border-radius: 4px; background: var(--fond); border: 1px solid var(--trait); }
.segment span, .onglets a { border-radius: 3px; }
.onglets .icone { color: inherit; }
.tuile, .choix-role { border-radius: 4px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.tuile:hover, .choix-role:hover { box-shadow: inset 0 0 0 1px var(--texte-3); }
.tuile:has(input:checked), .choix-role:has(input:checked) { background: var(--primaire-teinte); box-shadow: inset 0 0 0 1px var(--primaire), var(--halo); }
.pastille-choix span { border-radius: 3px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pastille-choix input:checked + span { box-shadow: var(--halo); }

/* Tableaux */
.tableau th { color: var(--texte-3); }
.tableau tbody tr:hover td { background: rgba(19, 231, 235, .035); }
.tableau tfoot td { border-top-color: var(--trait-fort); font-family: var(--police-titre); letter-spacing: .02em; }

/* Messages et états */
.message { border-radius: 3px; border: 1px solid rgba(19, 231, 235, .3); background: var(--primaire-teinte); }
.message.alerte { border-color: rgba(230, 150, 30, .4); background: rgba(255, 181, 71, .12); }
.message.erreur-globale { border-color: rgba(210, 58, 42, .35); background: rgba(210, 58, 42, .06); }
.vide-icone { box-shadow: inset 0 0 0 1px rgba(19, 231, 235, .3); }
.pastille-ok { background: var(--primaire-teinte); color: var(--primaire); }
.pastille-attente { background: rgba(255, 181, 71, .18); color: var(--alerte); }
.pastille-icone.depense, .chiffre-icone.depense, .depense .grande-tuile-icone { background: rgba(210, 58, 42, .08); }
.jauge { border-radius: 0; }
.jauge span { border-radius: 0; box-shadow: var(--halo); }
.jauge.depense span { background: #2f7fd6; box-shadow: none; }
.lien-partage, .bandeau-action { box-shadow: inset 0 0 0 1px var(--primaire), var(--halo); }
.depot-fichiers { border-radius: 4px; border-color: var(--trait-fort); }

/* Pages de connexion : comme la page d'accueil du site */
.page-auth { background: radial-gradient(60vmax 40vmax at 50% -10%, rgba(19, 231, 235, .07), transparent 70%), var(--fond); }
.bloc-auth { background: var(--carte); }
.bloc-auth h1 { font-size: 26px; }
.pied-auth { font-family: var(--police-mono); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }

/* Barre de défilement discrète */
* { scrollbar-color: var(--trait-fort) transparent; scrollbar-width: thin; }
.menu-ajout .bouton { font-size: 12px; letter-spacing: .05em; padding: 8px 10px; }
.asso-texte strong { color: var(--texte); }
.tuiles { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.tuile-nom { overflow-wrap: anywhere; }

/* ── Auto-complétion (entreprises, associations, adresses) ── */
.autocompletion { position: relative; }
.autocompletion.en-cours::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--trait-fort); border-top-color: var(--primaire); border-radius: 50%; animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.autocompletion-liste { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--carte); border: 1px solid var(--trait-fort); border-radius: 4px; box-shadow: var(--ombre-forte); }
.autocompletion-liste [role=option] { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 3px; cursor: pointer; }
.autocompletion-liste [role=option] strong { font-weight: 500; font-size: 14px; color: var(--texte); }
.autocompletion-liste [role=option] span { font-family: var(--police-mono); font-size: 11.5px; color: var(--texte-3); }
.autocompletion-liste [role=option]:hover, .autocompletion-liste [role=option].actif { background: var(--primaire-teinte); box-shadow: inset 2px 0 0 var(--primaire); }
.autocompletion-liste [role=option].actif strong { color: var(--primaire); }
.autocompletion-message { padding: 10px; font-size: 13px; color: var(--texte-2); }
.autocompletion-source { padding: 6px 10px 4px; font-family: var(--police-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); border-top: 1px solid var(--trait); margin-top: 4px; }
.rempli-auto { border-color: var(--primaire) !important; box-shadow: var(--halo) !important; transition: box-shadow .4s; }
.panneau:has(.autocompletion), .colonnes-form > .panneau { overflow: visible; }

/* ── Espace super-admin ── */
.badge-super-admin { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 3px 8px; font-family: var(--police-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #ffb547; background: rgba(255, 181, 71, .12); border: 1px solid rgba(255, 181, 71, .35); border-radius: 3px; }
.espace-super-admin .menu .marque { display: block; }
.tableau-sa td { vertical-align: middle; }
.tableau-sa tbody tr[data-href] { cursor: pointer; }
.tableau-sa td.date { width: 1%; white-space: nowrap; }
.tableau-sa .tronque { max-width: 360px; }
.chiffre dd small { font-size: 12px; font-weight: 400; letter-spacing: 0; font-family: var(--police); }
.espace-haut { margin-top: 20px; }
.plein-largeur { width: 100%; }
.zone-danger { box-shadow: inset 0 0 0 1px rgba(210, 58, 42, .3); }
.zone-danger h2 .icone { color: var(--depense); }
.form-ajout-membre { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; padding-top: 14px !important; border-top: 1px solid var(--trait); }
.form-ajout-membre .champ { margin-bottom: 0; }
.form-ajout-membre .bouton { min-height: 44px; }
.form-ajout-membre + .panneau-corps { margin: 8px 0 0; }
.plus-options-sa { margin-top: 14px; }
.plus-options-sa > summary { cursor: pointer; font-size: 13px; color: var(--primaire); margin-bottom: 12px; }
.liste-infos dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-infos dd { white-space: nowrap; }

/* Rappel flottant : super-admin connecté à la place de quelqu'un ou en visite dans une association */
.bandeau-super-admin { position: fixed; z-index: 50; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; font-size: 13.5px; color: #f3f1ff; background: var(--nav-fond); border: 1px solid rgba(255, 181, 71, .5); border-radius: 4px; box-shadow: var(--ombre-forte); }
.bandeau-super-admin > .icone { flex: none; color: #ffb547; }
.bandeau-super-admin span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeau-super-admin .bouton { flex: none; color: #f3f1ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bandeau-super-admin .bouton:hover { color: var(--sur-primaire); background: #ffb547; box-shadow: none; }

@media (max-width: 760px) {
    .form-ajout-membre { grid-template-columns: 1fr; gap: 10px; }
    .bandeau-super-admin { left: 16px; right: 16px; transform: none; bottom: 12px; }
    .bandeau-super-admin span { white-space: normal; }
}
.bandeau-maintenance { margin-bottom: 20px; }
.bandeau-maintenance.actif { box-shadow: inset 0 0 0 1px rgba(230, 150, 30, .55); background: rgba(255, 181, 71, .06); }
.bloc-auth > .vide-icone { margin-bottom: 18px; }
.ips-autorisees { margin-top: 6px; padding-top: 16px !important; border-top: 1px solid var(--trait); }
.ips-autorisees h3 { margin-bottom: 4px; }
.ips-autorisees .liste-membres { padding: 0; margin-bottom: 8px; }
.ips-autorisees .form-ajout-membre { border-top: 0; padding-top: 4px !important; margin-bottom: 8px; }
.confirmer-email span { flex: 1; }
.confirmer-email form { flex: none; }
.form-envoi { margin-top: 14px; }
.form-envoi .form-inline input { flex: 1; }
.ligne-rappel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 13.5px; }
.espace-bas { margin-bottom: 20px; }

/* ── Bouton flottant « Un souci ? Une idée ? » ── */
.bouton-retour { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 13px; font: 600 12px/1 var(--police-titre); letter-spacing: .06em; text-transform: uppercase; color: #f3f1ff; background: var(--nav-fond); border: 1px solid rgba(19, 231, 235, .35); border-radius: 3px; box-shadow: var(--ombre-forte); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.bouton-retour .icone { color: #13e7eb; }
.bouton-retour:hover { box-shadow: var(--halo), var(--ombre-forte); transform: translateY(-1px); }
body:has(.bandeau-super-admin) .bouton-retour { bottom: 76px; }
.fenetre-retour { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--rayon); background: var(--carte); color: var(--texte); box-shadow: var(--ombre-forte); }
.fenetre-retour::backdrop { background: rgba(25, 25, 51, .45); }
.fenetre-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 6px; }
.fenetre-corps { padding: 10px 24px 4px; }
.fenetre-corps textarea { resize: vertical; min-height: 110px; }
.fenetre-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--trait); }
.choix-retour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champ-fichier { width: 100%; font-size: 13.5px; color: var(--texte-2); }
.nav-compteur { margin-left: auto; min-width: 20px; padding: 0 6px; font: 600 11px/18px var(--police-mono); text-align: center; color: var(--sur-primaire); background: #ffb547; border-radius: 3px; }
@media (max-width: 760px) {
    .bouton-retour { right: 14px; bottom: 14px; padding: 12px; }
    .bouton-retour span { display: none; }
    .choix-retour { grid-template-columns: 1fr; }
}
.message-retour { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--texte); }
.capture-retour img { display: block; max-width: 100%; max-height: 520px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.retour-extrait { min-width: 0; }
.champ-fichier::file-selector-button { margin-right: 12px; padding: 8px 14px; font: 600 11.5px/1.2 var(--police-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); background: transparent; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--trait-fort); cursor: pointer; }
.champ-fichier::file-selector-button:hover { box-shadow: inset 0 0 0 1px var(--texte-3); background: var(--remplissage-2); }

/* ── Formulaire public de remboursement ── */
.page-publique { padding-top: 48px; }
.formulaire-public { width: 100%; max-width: 920px; display: grid; gap: 20px; }
.intro-publique h1 { margin: 4px 0 8px; }
.intro-publique .discret { max-width: 680px; font-size: 15px; }
.sur-titre { margin: 0; font: 600 11.5px/1.2 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primaire); }
.formulaire-public .panneau-corps { padding-top: 4px; }
.barre-envoi { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.barre-envoi .bouton { min-height: 46px; padding: 10px 26px; }
.lien-formulaire .copie { margin: 10px 0 12px; }
@media (max-width: 760px) {
    .page-publique { padding: 28px 12px; }
    .barre-envoi { flex-direction: column-reverse; align-items: stretch; }
}
body:has(.bouton-retour) .contenu { padding-bottom: 104px; }
@media (max-width: 760px) { .km-saisie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .km-saisie input, .km-saisie select { width: 100%; } }
.case-cgu { align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.case-cgu input { margin-top: 2px; flex: none; }
.liens-legaux { margin-top: 8px; letter-spacing: .04em; }
.liens-legaux a { color: var(--texte-3); }

/* ── Abonnement ── */
.etat-abonnement { margin-bottom: 20px; box-shadow: inset 0 0 0 1px var(--primaire), var(--halo); }
.etat-abonnement.etat-lecture_seule, .etat-abonnement.etat-impaye { box-shadow: inset 0 0 0 1px rgba(210, 58, 42, .45); }
.etat-abonnement.etat-virement, .etat-abonnement.etat-resilie { box-shadow: inset 0 0 0 1px rgba(230, 150, 30, .55); }
.etat-abonnement-corps { display: flex; align-items: center; gap: 18px; padding: 20px 24px !important; flex-wrap: wrap; }
.etat-icone { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 4px; background: var(--primaire-teinte); color: var(--primaire); }
.etat-lecture_seule .etat-icone, .etat-impaye .etat-icone { background: rgba(210, 58, 42, .08); color: var(--depense); }
.etat-texte { flex: 1; min-width: 240px; }
.etat-texte h2 { margin-bottom: 4px; }
.etat-texte p { margin: 0; color: var(--texte-2); }
.etat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.usage { grid-template-columns: 1fr 1fr 2fr; }
.chiffre .jauge { margin-top: 12px; }
.choix-formules { margin: 8px 0 28px; }
.choix-formules > .barre-filtres h2 { font-size: 20px; }
.grille-formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 12px; }
.carte-formule { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; background: var(--carte); border: 1px solid var(--trait-fort); border-radius: var(--rayon); }
.carte-formule.vedette { border-color: var(--primaire); box-shadow: inset 0 0 0 1px var(--primaire); }
.carte-formule.actuelle { background: var(--primaire-teinte); }
.carte-formule h3 { font-size: 19px; }
.carte-formule .tres-discret { margin: 0; }
.badge-formule { position: absolute; top: -11px; left: 18px; padding: 3px 10px; font: 600 11px/1.4 var(--police); letter-spacing: .04em; color: var(--sur-primaire); background: var(--degrade); border-radius: 3px; }
.badge-actuelle { background: var(--nav-fond); color: #fff; }
.prix-formule { margin: 4px 0 0; font: 700 30px/1.1 var(--police-titre); letter-spacing: -0.02em; }
.prix-formule small { font-size: 14px; font-weight: 500; color: var(--texte-3); letter-spacing: 0; }
[data-rythme="mensuel"] [data-prix-annuel], [data-rythme="annuel"] [data-prix-mensuel], [data-rythme="mensuel"] [data-seulement-annuel] { display: none; }
.prix-detail { min-height: 1.2em; }
.liste-formule { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 7px; align-content: start; font-size: 14px; flex: 1; }
.liste-formule li { display: flex; gap: 8px; align-items: flex-start; }
.liste-formule .icone { flex: none; margin-top: 3px; color: var(--primaire); }
.bientot-etiquette { margin-left: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; border-radius: 3px; background: var(--remplissage); color: var(--texte-3); }
.paiement-carte { min-height: 320px; padding-top: 24px !important; }
.paiement-carte .attente { margin-top: 12px; }
.liste-explications { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--texte-2); font-size: 14px; }
.coordonnees dd { font-size: 15px; }
.bandeau-abonnement span { flex: 1; }
.nav a.verrouille span { opacity: .75; }
.nav a .cadenas { margin-left: auto; color: var(--texte-3); opacity: .8; }
.etoiles-avis { display: flex; gap: 4px; justify-content: center; margin-bottom: 16px; font-size: 34px; color: var(--trait-fort); }
.etoiles-avis .pleine { color: #0fb5c4; }
.etoiles-tableau { white-space: nowrap; color: #0fb5c4; letter-spacing: 2px; }
.etoiles-tableau span { color: var(--trait-fort); }
.etoiles-tableau.basse { color: var(--depense); }
.grille-formules-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.grille-formules-admin .inactive { opacity: .6; }
.ligne-trois { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.form-inline-sa { display: inline-flex; align-items: center; gap: 8px; }
.bandeau-action-sa { margin-bottom: 20px; box-shadow: inset 0 0 0 1px rgba(230, 150, 30, .55); }
@media (max-width: 760px) {
    .usage { grid-template-columns: 1fr 1fr; }
    .usage .chiffre-large { grid-column: 1 / -1; }
    .grille-formules-admin { grid-template-columns: 1fr; }
    .ligne-trois { grid-template-columns: 1fr !important; }
}
.form-relances .avec-unite span { font-size: 12.5px; white-space: nowrap; }
.verrou-fonction { margin-top: 20px; }
.verrou-fonction .panneau-corps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 22px !important; color: var(--texte-2); font-size: 14px; }
.verrou-fonction .panneau-corps span { flex: 1; min-width: 220px; }
.verrou-fonction .icone { color: var(--texte-3); }
.form-instructions { margin: 14px 0 10px; }

/* ── Lecture automatique des tickets ── */
.lecture-ticket { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; border-radius: 4px; background: var(--primaire-teinte); color: var(--texte); }
.lecture-ticket .icone { flex: none; color: var(--primaire); margin-top: 1px; }
.lecture-ticket.echec { background: transparent; border: 1px solid var(--trait-fort); color: var(--texte-2); }
.lecture-ticket.echec .icone { color: var(--depense); }
.lecture-ticket .rouage { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--trait-fort); border-top-color: var(--primaire); border-radius: 50%; animation: tourne .7s linear infinite; }
.tuile.rempli-auto { box-shadow: var(--halo) !important; }

/* ── Boîte à justificatifs ── */
.boite-depot { padding: 16px; margin-bottom: 24px; }
.boite-depot .depot-fichiers.grand { margin-top: 0; }
.boite-titre { font-size: 15px; margin: 0 0 12px; color: var(--texte-2); }
.boite-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.piece { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; overflow: visible; }
.piece-apercu { display: flex; align-items: center; justify-content: center; width: 96px; height: 128px; border: 1px solid var(--trait); border-radius: 4px; background: var(--remplissage-2); color: var(--texte-3); overflow: hidden; }
.piece-apercu img { width: 100%; height: 100%; object-fit: cover; }
.piece-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.piece-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.piece-titre { overflow-wrap: anywhere; }
.piece-objet { font-size: 13px; }
.piece-lecture { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); }
.piece-lecture:empty { display: none; }
.piece-lecture .rouage { flex: none; width: 14px; height: 14px; border: 2px solid var(--trait-fort); border-top-color: var(--primaire); border-radius: 50%; animation: tourne .7s linear infinite; }
.piece-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; padding: 8px 10px; font-size: 13px; background: var(--primaire-teinte); border-radius: 4px; }
.piece-suggestion > .icone { color: var(--primaire); }
.piece-suggestion span { flex: 1 1 180px; }
.piece-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 8px; }
.piece-completer { flex-basis: auto; }
.piece-completer[open] { flex-basis: 100%; order: 3; }
.piece-completer summary { list-style: none; cursor: pointer; font-size: 13px; }
.piece-completer summary::-webkit-details-marker { display: none; }
.form-piece { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 8px; }
.form-piece .champ-large { grid-column: 1 / -1; }
.form-piece .bouton { justify-self: start; }
.piece-supprimer { margin-left: auto; }
@media (max-width: 560px) {
    .piece { grid-template-columns: 72px minmax(0, 1fr); }
    .piece-apercu { width: 72px; height: 96px; }
}

/* Choix dans la boîte depuis le formulaire d'opération */
.choix-boite { margin-top: 14px; }
.choix-boite summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.choix-boite ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.choix-boite label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; font-size: 13px; border: 1px solid var(--trait); border-radius: 4px; cursor: pointer; }
.choix-boite label:has(input:checked) { border-color: var(--primaire); background: var(--primaire-teinte); }
.choix-boite li.correspond label { border-color: var(--primaire); box-shadow: var(--halo); }
.choix-boite .correspond-etiquette { display: none; font-size: 11px; color: var(--primaire); }
.choix-boite li.correspond .correspond-etiquette { display: inline; }
.piece-jointe { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--primaire); border-radius: 4px; background: var(--primaire-teinte); font-size: 13px; }
.ligne-releve-piece { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; font-size: 13px; border: 1px dashed var(--primaire); border-radius: 4px; color: var(--texte-2); }
.ligne-releve-piece > .icone { flex: none; color: var(--primaire); }
.lecture-ticket[hidden] { display: none; }
.piece-lecture, .piece-lecture span, .piece-objet { overflow-wrap: anywhere; min-width: 0; }