/* Gestion du cabinet de Goyave (SASU CMS).
   Identité « porcelaine et mangrove » : fond porcelaine froid, vert mangrove pour la marque,
   ambre pour ce qui est attendu, rouge pour ce qui est en retard, lilas hachuré réservé aux projections.
   Tablette d'abord (820 px), puis téléphone (390 px) et ordinateur (1400 px). Cibles tactiles ≥ 44 px. */

:root {
  color-scheme: light;
  --fond: #f2f5f2;
  --surface: #ffffff;
  --surface-2: #e8eee9;
  --surface-3: #dde6e0;
  --encre: #14201b;
  --texte-2: #4a5a53;
  --ligne: #d0dad3;
  --ligne-forte: #7f9187;
  --marque: #1f5b4a;
  --marque-fort: #15443a;
  --marque-doux: #dbeae3;
  --bouton: #1f5b4a;
  --bouton-texte: #ffffff;
  --bouton-survol: #174a3c;
  --ambre: #845400;
  --ambre-fond: #fbefd3;
  --ambre-trait: #c98a12;
  --rouge: #a8261f;
  --rouge-fond: #fbe5e1;
  --rouge-trait: #c8473e;
  --ok: #1d6b45;
  --ok-fond: #def0e5;
  --lilas: #5f4f9c;
  --lilas-fond: #ece8f8;
  --hist: #829087;
  --hist-fond: #e6ebe7;
  --focus: #1f5b4a;
  --sur-rouge: #ffffff;
  --voile: rgba(14, 24, 20, .48);
  --ombre-flottante: 0 6px 20px rgba(20, 40, 32, .22), 0 1px 3px rgba(20, 40, 32, .18);

  --police: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rayon: 14px;
  --largeur-laterale: 248px;
  --hauteur-onglets: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #0e1512;
    --surface: #161f1b;
    --surface-2: #1d2823;
    --surface-3: #25322c;
    --encre: #e5eee9;
    --texte-2: #a8b8b0;
    --ligne: #2c3a34;
    --ligne-forte: #5f7369;
    --marque: #7fd1b2;
    --marque-fort: #a6e2cb;
    --marque-doux: #1d3a30;
    --bouton: #7fd1b2;
    --bouton-texte: #08160f;
    --bouton-survol: #9adcc2;
    --ambre: #f1c164;
    --ambre-fond: #33290f;
    --ambre-trait: #d9a640;
    --rouge: #ff9a8f;
    --rouge-fond: #3a1b18;
    --rouge-trait: #e8695e;
    --ok: #86d6a8;
    --ok-fond: #183326;
    --lilas: #bfb1f5;
    --lilas-fond: #2a2445;
    --hist: #6f7f77;
    --hist-fond: #222c27;
    --focus: #9adcc2;
    --sur-rouge: #1a0605;
    --voile: rgba(0, 0, 0, .6);
    --ombre-flottante: 0 6px 22px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font: 17px/1.5 var(--police);
  color: var(--encre);
  background: var(--fond);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 650; }
p { margin: 0 0 12px; }
a { color: var(--marque); }
small { font-size: 14px; }
.discret { color: var(--texte-2); }
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus { outline: none; scroll-margin-top: 90px; scroll-margin-bottom: 110px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--bouton); color: var(--bouton-texte);
  padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.evitement:focus { top: 12px; }

/* ── Coque : barre latérale (ordinateur), en-tête + onglets en bas (tablette, téléphone) ── */
.coque { min-height: 100vh; }
.lateral { display: none; }
.zone { min-width: 0; }
.entete {
  position: sticky; top: 0; z-index: 40;
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.entete-ligne { display: flex; align-items: center; gap: 8px 12px; min-height: 44px; max-width: 1160px; margin: 0 auto; flex-wrap: wrap; }
.entete-ligne h1 { flex: 1 1 auto; min-width: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.entete-actions:empty { display: none; }
.sous-nav { max-width: 1160px; margin: 8px auto 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sous-nav::-webkit-scrollbar { display: none; }
.sous-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  text-decoration: none; color: var(--texte-2); font-weight: 600; font-size: 15.5px; border: 1px solid transparent;
}
.sous-nav a:hover { background: var(--surface-2); }
.sous-nav a[aria-current="page"] { background: var(--surface); color: var(--encre); border-color: var(--ligne-forte); }
.sous-nav .compteur { margin-left: 6px; }

main#contenu { padding: 16px 16px calc(var(--hauteur-onglets) + 96px + env(safe-area-inset-bottom)); max-width: 1192px; margin: 0 auto; }
main#contenu:focus { outline: none; }

.onglets-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(var(--nb-onglets, 5), 1fr);
  background: var(--surface); border-top: 1px solid var(--ligne);
  padding: 4px 4px env(safe-area-inset-bottom);
}
.onglets-bas a, .onglets-bas button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; border: 0; background: none; color: var(--texte-2); font: 600 12.5px/1.2 var(--police);
  text-decoration: none; border-radius: 12px; cursor: pointer; padding: 4px 2px; position: relative;
}
.onglets-bas a[aria-current="page"], .onglets-bas button.actif { color: var(--marque-fort); }
.onglets-bas a[aria-current="page"] .ico-fond, .onglets-bas button.actif .ico-fond { background: var(--marque-doux); }
.onglets-bas .compteur { position: absolute; top: 2px; left: calc(50% + 8px); }
.ico-fond { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.fab {
  position: fixed; right: 16px; bottom: calc(var(--hauteur-onglets) + 16px + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 18px;
  background: var(--bouton); color: var(--bouton-texte); font: 700 17px/1 var(--police); text-decoration: none;
  box-shadow: var(--ombre-flottante);
}
.fab:hover { background: var(--bouton-survol); }
.fab .ico { stroke-width: 2.4; }
.sans-onglets .onglets-bas { display: none; }
.sans-onglets .fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
.sans-onglets main#contenu { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.sans-fab .fab { display: none; }

@media (min-width: 1100px) {
  .coque { display: grid; grid-template-columns: var(--largeur-laterale) 1fr; }
  .lateral {
    align-self: start;
    display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 22px 14px 18px; background: var(--surface); border-right: 1px solid var(--ligne);
  }
  .onglets-bas, .fab { display: none !important; }
  .entete { padding: 16px 32px 12px; }
  main#contenu, .sans-onglets main#contenu { padding: 24px 32px 64px; }
}
.marque-bloc { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; }
.marque-bloc svg { width: 40px; height: 40px; flex: none; }
.marque-bloc b { display: block; font-family: var(--police-titre); font-size: 17px; }
.marque-bloc span { display: block; font-size: 13.5px; color: var(--texte-2); }
.lateral > .bouton { white-space: nowrap; font-size: 16px; padding: 0 14px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.lateral nav a, .lateral .pied button {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px;
  color: var(--texte-2); text-decoration: none; font-weight: 600; font-size: 16px; border: 0; background: none; cursor: pointer; width: 100%;
  font-family: inherit; text-align: left;
}
.lateral nav a:hover, .lateral .pied button:hover { background: var(--surface-2); color: var(--encre); }
.lateral nav a[aria-current="page"] { background: var(--marque-doux); color: var(--marque-fort); }
.lateral .pied { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ligne); }
.lateral .compteur { margin-left: auto; }

/* ── Boutons ── */
button { font-family: inherit; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 12px; border: 1.5px solid transparent; font: 650 16.5px/1.15 var(--police); cursor: pointer; text-decoration: none;
  background: var(--bouton); color: var(--bouton-texte); text-align: center;
}
.bouton:hover { background: var(--bouton-survol); }
.bouton[disabled] { opacity: .5; cursor: default; }
.bouton.large { width: 100%; }
.bouton.grand { min-height: 56px; font-size: 18px; }
.bouton.second { background: var(--surface); color: var(--marque-fort); border-color: var(--ligne-forte); }
.bouton.second:hover { background: var(--surface-2); }
.bouton.danger { background: var(--surface); color: var(--rouge); border-color: var(--rouge-trait); }
.bouton.danger:hover { background: var(--rouge-fond); }
.bouton.danger-plein { background: var(--rouge); color: var(--sur-rouge); }
.bouton.petit { min-height: 44px; padding: 0 14px; font-size: 15px; }
.bouton.texte { background: none; color: var(--marque); border-color: transparent; padding: 0 10px; }
.bouton.texte:hover { background: var(--surface-2); }
.bouton-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne-forte);
  background: var(--surface); color: var(--encre); cursor: pointer; text-decoration: none; flex: none;
}
.bouton-icone:hover { background: var(--surface-2); }
.bouton-icone[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rangee.fin { justify-content: flex-end; }
.pile > * + * { margin-top: 16px; }

/* ── Panneaux ── */
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; }
.panneau + .panneau { margin-top: 16px; }
.panneau > h2 { margin-bottom: 12px; }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panneau-tete h2 { margin: 0; }
.panneau-tete a.lien-tete { font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.section-titre { margin: 28px 0 10px; display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.section-titre:first-child { margin-top: 4px; }
.note { font-size: 14.5px; color: var(--texte-2); }

/* ── Pastilles d'état ── */
.pastille {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; line-height: 1;
  padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap;
}
.pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastille.ok { background: var(--ok-fond); color: var(--ok); }
.pastille.attendue { background: var(--ambre-fond); color: var(--ambre); }
.pastille.retard { background: var(--rouge-fond); color: var(--rouge); }
.pastille.projection { background: var(--lilas-fond); color: var(--lilas); }
.pastille.historique { background: var(--hist-fond); color: var(--texte-2); }
.pastille.en-cours { background: var(--marque-doux); color: var(--marque-fort); }
.compteur {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--rouge); color: var(--sur-rouge); font-size: 12.5px; font-weight: 700; line-height: 1;
}
.compteur.doux { background: var(--surface-3); color: var(--encre); }

/* ── Messages ── */
.message { border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--ligne); background: var(--surface); }
.message > :last-child { margin-bottom: 0; }
.message.info { background: var(--marque-doux); border-color: transparent; }
.message.attention { background: var(--ambre-fond); border-color: transparent; }
.message.erreur { background: var(--rouge-fond); border-color: transparent; }
.message.projection { background: var(--lilas-fond); border: 1.5px dashed var(--lilas); }
.vide { text-align: center; padding: 28px 16px; color: var(--texte-2); }
.vide h3 { color: var(--encre); margin-bottom: 6px; }
.vide .bouton { margin-top: 12px; }
.chargement { display: grid; gap: 14px; }
.chargement .bloc { height: 120px; border-radius: var(--rayon); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: luire 1.4s linear infinite; }
.chargement .bloc.haut { height: 220px; }
@keyframes luire { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.annonce {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 120;
  bottom: calc(var(--hauteur-onglets) + 88px + env(safe-area-inset-bottom));
  width: max-content; max-width: min(560px, calc(100vw - 32px)); background: var(--encre); color: var(--fond);
  padding: 14px 20px; border-radius: 14px; font-size: 16px; box-shadow: var(--ombre-flottante); text-align: center;
}
.annonce:empty { display: none; }
.annonce.erreur { background: var(--rouge); color: var(--sur-rouge); }
@media (min-width: 1100px) { .annonce { bottom: 28px; left: calc(50% + var(--largeur-laterale) / 2); } }

/* ── Formulaires ── */
label, .etiquette { display: block; font-size: 15px; font-weight: 650; color: var(--encre); margin: 16px 0 6px; }
label .aide, .etiquette .aide { font-weight: 500; color: var(--texte-2); }
input, select, textarea {
  width: 100%; font: 17px/1.3 var(--police); padding: 11px 14px; min-height: 50px; border-radius: 12px;
  border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--encre);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--marque); }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--marque); margin: 0; flex: none; padding: 0; }
textarea { min-height: 96px; resize: vertical; }
input.montant-saisi { font: 700 30px/1.1 var(--police-titre); text-align: right; min-height: 64px; letter-spacing: -.01em; }
.champ-aide { font-size: 14px; color: var(--texte-2); margin-top: 6px; }
.champ-aide.propose { color: var(--marque-fort); font-weight: 600; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.deux > *, .trois > * { min-width: 0; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 560px) { .deux.replie, .trois { grid-template-columns: 1fr; } }
.case { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; margin: 8px 0; cursor: pointer; }
.segmente { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border-radius: 14px; flex-wrap: wrap; }
.segmente button {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: none; color: var(--texte-2);
  font: 650 15.5px/1 var(--police); cursor: pointer;
}
.segmente button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.segmente.large { display: flex; }
.segmente.large button { flex: 1; }
details.replie { border-top: 1px solid var(--ligne); margin-top: 18px; }
details.replie > summary {
  list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--marque-fort);
}
details.replie > summary::-webkit-details-marker { display: none; }
details.replie > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin: 0 4px; }
details.replie[open] > summary::before { transform: rotate(45deg); }

/* ── Connexion ── */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.connexion .carte-code { width: 100%; max-width: 380px; text-align: center; }
.connexion .marque-bloc { justify-content: center; padding-bottom: 8px; }
.connexion .marque-bloc svg { width: 56px; height: 56px; }
.connexion h1 { font-size: 26px; margin: 10px 0 6px; }
.connexion input.code { text-align: center; font: 700 28px/1 var(--police-titre); letter-spacing: .5em; padding-left: .5em; margin: 18px 0 14px; }
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pave button {
  min-height: 64px; font: 600 26px/1 var(--police-titre); background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 16px; color: var(--encre); cursor: pointer;
}
.pave button:active { background: var(--marque-doux); }
.pave button.valider { background: var(--bouton); color: var(--bouton-texte); font-size: 18px; border-color: transparent; }
.erreur-code { color: var(--rouge); min-height: 26px; margin-top: 14px; font-weight: 600; }

/* ── Tableau de bord ── */
.tdb { display: grid; gap: 16px; grid-template-columns: 1fr; grid-template-areas: "heros" "afaire" "etat" "evolution" "entrees" "sorties" "budgets"; }
.tdb > * { min-width: 0; margin: 0 !important; }
.tdb .heros { grid-area: heros; } .tdb .afaire { grid-area: afaire; } .tdb .etat { grid-area: etat; }
.tdb .evolution { grid-area: evolution; } .tdb .entrees { grid-area: entrees; } .tdb .sorties { grid-area: sorties; }
.tdb .budgets { grid-area: budgets; }
@media (min-width: 760px) {
  .tdb { grid-template-columns: 1fr 1fr; grid-template-areas: "heros heros" "afaire afaire" "etat entrees" "evolution evolution" "sorties sorties" "budgets budgets"; }
}
@media (min-width: 1100px) {
  .tdb { grid-template-columns: 7fr 5fr; grid-template-areas: "heros afaire" "evolution etat" "sorties entrees" "budgets budgets"; }
}
/* Budgets alloués (enveloppes) */
.enveloppe-barre .piste i.depasse { background: var(--rouge); }
.budgets-dash { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
table.simple tr.non-suivi td { color: var(--texte-2); }
table.simple td.neg { color: var(--rouge); font-weight: 650; }
.chiffres-mois b.negatif, .budgets-dash .negatif { color: var(--rouge); }
.choix-mois { display: flex; align-items: center; gap: 6px; }
.choix-mois select { min-height: 44px; width: auto; max-width: 52vw; padding: 6px 30px 6px 12px; font-weight: 650; }

.heros { background: var(--surface); border: 1px solid var(--ligne); border-radius: 20px; padding: 20px 20px 18px; }
.heros.projection { border: 2px dashed var(--lilas); }
.heros-tete { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.heros-tete h2 { font-size: 17px; color: var(--texte-2); font-weight: 650; }
.heros .chiffre {
  font: 750 clamp(40px, 9vw, 60px)/1.05 var(--police-titre); letter-spacing: -.025em; margin: 10px 0 2px; color: var(--encre);
}
.heros .chiffre.negatif { color: var(--rouge); }
.heros .chiffre .euro { font-size: .55em; font-weight: 650; margin-left: .12em; color: var(--texte-2); }
.formule { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 4px; margin: 12px 0 4px; }
.formule .terme { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.formule .terme b { font: 700 17px/1.2 var(--police-titre); white-space: nowrap; }
@media (min-width: 1100px) { .formule .terme { padding: 7px 10px; } }
.formule .terme span { font-size: 13.5px; color: var(--texte-2); }
.formule .terme.entrees-p { background: var(--lilas-fond); border: 1.5px dashed var(--lilas); }
.formule .terme.entrees-p span { color: var(--lilas); font-weight: 650; }
.formule .op { align-self: center; font: 700 20px/1 var(--police-titre); color: var(--texte-2); padding: 0 2px; }
.cascade { margin-top: 14px; }
.cascade svg { display: block; width: 100%; height: auto; overflow: visible; }
.cascade text { font-family: var(--police); font-size: 12.5px; fill: var(--texte-2); }
.heros .explication { font-size: 14.5px; color: var(--texte-2); margin: 12px 0 0; }

.afaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.action { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); align-items: start; }
.action .rang { grid-row: span 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--police-titre); background: var(--surface); color: var(--texte-2); border: 1px solid var(--ligne-forte); }
.action.urgent { background: var(--rouge-fond); }
.action.urgent .rang { background: var(--rouge); color: var(--sur-rouge); border-color: transparent; }
.action.bientot { background: var(--ambre-fond); }
.action h3 { font-size: 16.5px; }
.action p { margin: 2px 0 10px; font-size: 14.5px; color: var(--texte-2); }
.action .bouton { justify-self: start; }
.afaire .rien { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--ok-fond); color: var(--ok); font-weight: 600; }

.etat ul { list-style: none; margin: 0; padding: 0; }
.etat li + li { border-top: 1px solid var(--ligne); }
.ligne-etat {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 4px; min-height: 56px;
  color: var(--encre); text-decoration: none;
}
a.ligne-etat:hover { background: var(--surface-2); border-radius: 10px; }
.ligne-etat .sym { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; grid-row: span 2; }
.ligne-etat .sym .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.sym.ok { background: var(--ok-fond); color: var(--ok); }
.sym.retard { background: var(--rouge-fond); color: var(--rouge); }
.sym.attendue { background: var(--ambre-fond); color: var(--ambre); }
.sym.neutre { background: var(--surface-2); color: var(--texte-2); }
.ligne-etat b { font-weight: 650; }
.ligne-etat small { grid-column: 2; color: var(--texte-2); font-size: 13.5px; line-height: 1.35; }
.ligne-etat .val { grid-row: 1 / span 2; grid-column: 3; font-weight: 700; font-size: 15px; text-align: right; white-space: nowrap; }

.barres-h { display: grid; gap: 14px; }
.barre-h .tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.barre-h .tete span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-h .tete small { color: var(--texte-2); }
.piste { height: 10px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.piste i { display: block; height: 100%; border-radius: 999px; background: var(--marque); }
.total-ligne { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ligne); margin-top: 14px; padding-top: 12px; font-weight: 700; }

.groupes { width: 100%; border-collapse: collapse; }
.groupes th, .groupes td { padding: 10px 6px; text-align: right; font-size: 15.5px; vertical-align: top; }
.groupes th:first-child, .groupes td:first-child { text-align: left; padding-left: 0; }
.groupes td:last-child, .groupes th:last-child { padding-right: 0; }
.groupes thead th { font-size: 13.5px; color: var(--texte-2); font-weight: 650; border-bottom: 1px solid var(--ligne); }
.groupes tbody tr + tr td { border-top: 1px solid var(--ligne); }
.groupes tfoot td { border-top: 2px solid var(--ligne-forte); font-weight: 750; }
.groupes .nom b { display: block; font-weight: 650; }
.groupes .nom small { color: var(--texte-2); font-size: 13px; }
.piste-double { position: relative; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; margin-top: 8px; }
.piste-double .reel { background: var(--marque); height: 100%; }
.piste-double .reste { height: 100%; background: repeating-linear-gradient(135deg, var(--ambre-trait) 0 3px, transparent 3px 7px); }
.piste-double .prevu-marque { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--encre); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--texte-2); margin-top: 12px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.legende i.reel { background: var(--marque); }
.legende i.reste { background: repeating-linear-gradient(135deg, var(--ambre-trait) 0 3px, transparent 3px 7px); border: 1px solid var(--ambre-trait); }
.legende i.prevu { width: 3px; height: 14px; background: var(--encre); border-radius: 1px; }
.legende i.hist { background: var(--hist); }
.legende i.suivi { background: var(--marque); }
.legende i.prev { background: var(--marque-doux); border: 1.5px solid var(--marque); }
.legende i.proj { background: repeating-linear-gradient(135deg, var(--lilas) 0 2px, transparent 2px 5px); border: 1.5px dashed var(--lilas); }
@media (max-width: 520px) {
  .groupes .col-prevu { display: none; }
  .groupes th, .groupes td { font-size: 14.5px; }
}

.graphe svg { display: block; width: 100%; height: auto; }
.graphe text { font-family: var(--police); fill: var(--texte-2); font-size: 12px; }
.graphe text.val { font-weight: 700; fill: var(--encre); font-size: 12.5px; }
.graphe text.val.neg { fill: var(--rouge); }
.graphe text.mois-actif { fill: var(--encre); font-weight: 700; }
.graphe a { cursor: pointer; }
.graphe a:focus { outline: none; }
.graphe a:focus-visible rect.zone-clic { stroke: var(--focus); stroke-width: 3; }
.graphe a:hover rect.zone-clic { fill: var(--surface-2); }
details.chiffres > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--marque); font-weight: 600; font-size: 15px; }
table.simple { width: 100%; border-collapse: collapse; font-size: 15px; }
table.simple th, table.simple td { padding: 8px 6px; border-bottom: 1px solid var(--ligne); text-align: left; }
table.simple .n { text-align: right; white-space: nowrap; }

/* ── Listes ── */
.liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.liste > li + li { border-top: 1px solid var(--ligne); }
.element {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 64px; width: 100%;
  color: var(--encre); text-decoration: none; background: none; border: 0; text-align: left; font: inherit; cursor: pointer;
}
a.element:hover, button.element:hover { background: var(--surface-2); }
.element .corps { flex: 1; min-width: 0; }
.element .corps b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.element .corps .sous { display: block; font-size: 14px; color: var(--texte-2); margin-top: 2px; }
.element .corps .pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.element .droite { text-align: right; flex: none; }
.element .droite .montant { font-weight: 700; display: block; }
.element .chevron { color: var(--texte-2); flex: none; width: 18px; height: 18px; }

.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.filtres label { margin: 0 0 4px; font-size: 13.5px; color: var(--texte-2); }
.filtres input, .filtres select { min-height: 46px; font-size: 16px; padding: 8px 12px; }
.resume-liste { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 2px 12px; flex-wrap: wrap; }
.resume-liste b { font: 700 22px/1 var(--police-titre); }

/* ── Saisie d'une dépense ── */
.saisie { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 1000px; }
@media (min-width: 900px) { .saisie { grid-template-columns: 330px 1fr; align-items: start; } .saisie .zone-photo { position: sticky; top: 100px; } }
.zone-photo { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; }
.depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 124px; border: 2px dashed var(--ligne-forte); border-radius: 14px; cursor: pointer; padding: 16px;
  color: var(--marque-fort); font-weight: 700; margin: 0; background: var(--surface-2); position: relative;
}
.depot:hover { border-color: var(--marque); }
.depot:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.depot small { color: var(--texte-2); font-weight: 500; }
.depot .ico { width: 30px; height: 30px; }
.fichier-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.autre-fichier { display: flex; justify-content: center; margin-top: 8px; }
.autre-fichier label { margin: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--marque); font-weight: 600; cursor: pointer; border-radius: 10px; position: relative; }
.autre-fichier label:focus-within { outline: 3px solid var(--focus); }
.vignettes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.vignettes:empty { display: none; }
.vignette { position: relative; width: 92px; height: 116px; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.vignette > a, .vignette > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; color: var(--texte-2); text-align: center; text-decoration: none; padding: 4px; word-break: break-word; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.formulaire { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 2px 18px 18px; }
.barre-enregistrer {
  position: sticky; bottom: calc(var(--hauteur-onglets) + 8px + env(safe-area-inset-bottom)); z-index: 30; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px 14px; box-shadow: var(--ombre-flottante);
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.barre-enregistrer .total { flex: 0 1 auto; min-width: 100px; }
.barre-enregistrer .total b { display: block; font: 750 24px/1.1 var(--police-titre); }
.barre-enregistrer .total span { font-size: 13.5px; color: var(--texte-2); }
.barre-enregistrer .bouton { flex: 1 1 170px; }
.resume-details { font-weight: 500; }
@media (max-width: 560px) { .resume-details { display: none; } .barre-enregistrer { padding: 10px; gap: 10px; } .barre-enregistrer .total b { font-size: 20px; } .barre-enregistrer .bouton.grand { font-size: 16.5px; min-height: 52px; } }
.sans-onglets .barre-enregistrer { bottom: calc(8px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { .barre-enregistrer { bottom: 16px; } }
.choix-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-boutons button {
  min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--ligne-forte); background: var(--surface);
  color: var(--encre); font: 600 15.5px/1 var(--police); cursor: pointer;
}
.choix-boutons button[aria-pressed="true"] { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); }

/* ── Pièces manquantes ── */
.groupe-pieces.retard .liste { border: 2px solid var(--rouge-trait); }
.groupe-pieces.attendues .liste { background: var(--surface); }
.piece-ligne { display: flex; align-items: center; gap: 8px 12px; padding: 10px 14px; flex-wrap: wrap; }
.piece-ligne .coche { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -6px 0 -10px; cursor: pointer; flex: none; }
.piece-ligne .corps { flex: 1 1 200px; min-width: 0; }
.piece-ligne .corps b { font-weight: 650; }
.piece-ligne .corps .sous { display: block; font-size: 14px; color: var(--texte-2); }
.piece-ligne .montant { font-weight: 700; }
.piece-ligne .bouton { flex: none; }
.piece-ligne.justifiee { opacity: .85; }
@media (max-width: 560px) { .piece-ligne .bouton { flex: 1 1 100%; } .piece-ligne .montant { margin-left: auto; } }
.barre-selection {
  position: sticky; bottom: calc(var(--hauteur-onglets) + 8px + env(safe-area-inset-bottom)); z-index: 30; margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--encre); color: var(--fond); border-radius: 16px; padding: 10px 12px 10px 18px; box-shadow: var(--ombre-flottante);
}
.barre-selection .bouton { background: var(--fond); color: var(--encre); }
.barre-selection .bouton.texte { background: none; color: var(--fond); }
@media (min-width: 1100px) { .barre-selection { bottom: 16px; } }

/* ── Année ── */
.outils-annee { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.mois-puces { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; }
.mois-puces a {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; min-height: 52px;
  border-radius: 12px; text-decoration: none; color: var(--encre); background: var(--surface); border: 1px solid var(--ligne); font-weight: 650; font-size: 15px;
}
.mois-puces a small { font-size: 11.5px; color: var(--texte-2); font-weight: 600; }
.mois-puces a.proj { border: 1.5px dashed var(--lilas); }
.mois-puces a[aria-current="true"] { background: var(--bouton); color: var(--bouton-texte); border: 1.5px solid var(--bouton); }
.mois-puces a[aria-current="true"] small { color: inherit; }
.chiffres-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.chiffres-mois div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.chiffres-mois div span { display: block; font-size: 13.5px; color: var(--texte-2); }
.chiffres-mois div b { font: 700 18px/1.2 var(--police-titre); white-space: nowrap; }
.chiffres-mois div.dispo { background: var(--marque-doux); border-color: transparent; }
.chiffres-mois div.proj { background: var(--lilas-fond); border: 1.5px dashed var(--lilas); }
details.section-annee { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); margin-top: 14px; overflow: hidden; }
details.section-annee > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px;
}
details.section-annee > summary::-webkit-details-marker { display: none; }
details.section-annee > summary h2 { flex: 1; font-size: 18px; }
details.section-annee > summary .tot { font-weight: 700; white-space: nowrap; }
details.section-annee > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2); transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; flex: none; }
details.section-annee[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.lignes-poste { width: 100%; border-collapse: collapse; }
.lignes-poste th, .lignes-poste td { padding: 0; text-align: right; font-size: 15.5px; }
.lignes-poste thead th { font-size: 13.5px; color: var(--texte-2); font-weight: 650; padding: 8px 12px; border-top: 1px solid var(--ligne); background: var(--surface-2); }
.lignes-poste thead th:first-child { text-align: left; padding-left: 16px; }
.lignes-poste tbody tr { border-top: 1px solid var(--ligne); }
.lignes-poste tbody td { padding: 10px 12px; white-space: nowrap; }
.lignes-poste tbody td:first-child { text-align: left; padding: 0; white-space: normal; }
.lignes-poste tbody td:last-child, .lignes-poste thead th:last-child { padding-right: 16px; }
.lignes-poste button.nom-poste {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px 8px 16px; min-height: 52px; cursor: pointer;
  font: inherit; color: var(--encre);
}
.lignes-poste button.nom-poste:hover { background: var(--surface-2); }
.lignes-poste .nom-poste b, .lignes-poste .nom-fixe b { font-weight: 650; display: block; }
.lignes-poste .nom-poste small, .lignes-poste .nom-fixe small { color: var(--texte-2); font-size: 13px; }
.lignes-poste .nom-fixe { padding: 8px 12px 8px 16px; min-height: 52px; }
.lignes-poste .ecart-plus { color: var(--rouge); font-weight: 650; }
.lignes-poste .ecart-moins { color: var(--ok); font-weight: 650; }
.lignes-poste .reel-ok { font-weight: 700; }
.pied-section { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px 8px 12px; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
@media (max-width: 520px) {
  .lignes-poste { table-layout: fixed; }
  .lignes-poste .col-ecart { display: none; }
  .lignes-poste td, .lignes-poste th { font-size: 14px; }
  .lignes-poste tbody td { padding: 10px 6px; white-space: normal; }
  .lignes-poste thead th { padding: 8px 6px; }
  .lignes-poste th:nth-child(2), .lignes-poste th:nth-child(3) { width: 31%; }
  .lignes-poste button.nom-poste, .lignes-poste .nom-fixe { padding-left: 12px; padding-right: 4px; overflow-wrap: anywhere; }
}

.grille { overflow: auto; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface); max-height: calc(100vh - 210px); }
.grille table { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 100%; }
.grille th, .grille td { padding: 0; border-bottom: 1px solid var(--ligne); white-space: nowrap; text-align: right; }
.grille thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); padding: 10px; font-size: 13px; color: var(--texte-2); }
.grille thead th:first-child { left: 0; z-index: 4; text-align: left; }
.grille tbody th { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 6px 12px; font-weight: 600; max-width: 230px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--ligne); }
.grille tbody th small { display: block; font-weight: 500; color: var(--texte-2); font-size: 12px; }
.grille td button { width: 100%; min-height: 44px; padding: 0 10px; border: 0; background: none; font: inherit; color: var(--encre); text-align: right; cursor: pointer; }
.grille td button:hover { background: var(--marque-doux); }
.grille td.reel button { font-weight: 700; color: var(--ok); }
.grille td.lecture { padding: 0 10px; }
.grille tr.sect th, .grille tr.sect td { background: var(--surface-2); font-family: var(--police-titre); font-size: 15px; color: var(--encre); padding: 8px 12px; }
.grille tr.tot th, .grille tr.tot td { font-weight: 750; background: var(--surface-2); padding: 8px 10px; }
.grille tr.tot th { padding-left: 12px; }
.grille tr.dispo th, .grille tr.dispo td { background: var(--marque-doux); }
.grille td.neg { color: var(--rouge); }
.grille td.proj { background-image: repeating-linear-gradient(135deg, var(--lilas-fond) 0 4px, transparent 4px 8px); }
.seul-large { display: none !important; }
@media (min-width: 1000px) { .seul-large { display: inline-flex !important; } }

/* ── Clôture ── */
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 14px 0; }
.etape + .etape { border-top: 1px solid var(--ligne); }
.etape .num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--police-titre); grid-row: span 3; }
.etape .num .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.etape.ok .num { background: var(--ok-fond); color: var(--ok); }
.etape.ko .num { background: var(--ambre-fond); color: var(--ambre); }
.etape h3 { font-size: 16.5px; }
.etape p { margin: 0; font-size: 14.5px; color: var(--texte-2); }
.etape .bouton { justify-self: start; margin-top: 8px; }

/* ── Paie ── */
.salaries-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.salarie-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; display: grid; gap: 10px; align-content: start; }
.salarie-carte .tete { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.salarie-carte dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 15px; }
.salarie-carte dt { color: var(--texte-2); }
.salarie-carte dd { margin: 0; text-align: right; font-weight: 650; white-space: nowrap; }
label.bouton { margin: 0; position: relative; }
label.bouton:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── Banque ── */
.operation { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; }
.operation + .operation { margin-top: 12px; }
.operation .tete { display: flex; gap: 12px; align-items: baseline; }
.operation .tete .lib { flex: 1; min-width: 0; font-weight: 650; word-break: break-word; }
.operation .tete .m { font: 700 18px/1.2 var(--police-titre); white-space: nowrap; }
.operation .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.debit { color: var(--rouge); } .credit { color: var(--ok); }
.proposition { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.proposition .q { flex: 1 1 240px; font-size: 15px; }
.etapes-guide { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; counter-reset: g; }
.etapes-guide li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.etapes-guide li::before { counter-increment: g; content: counter(g); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--marque-doux); color: var(--marque-fort); font: 700 15px/1 var(--police-titre); }
.tableau-defile { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); margin: 10px 0; }
.tableau-defile table { border-collapse: collapse; font-size: 14px; width: 100%; }
.tableau-defile td, .tableau-defile th { border-bottom: 1px solid var(--ligne); padding: 7px 10px; white-space: nowrap; text-align: left; }
.tableau-defile tr.entete-csv td { font-weight: 700; background: var(--marque-doux); }
.tableau-defile tr.avant td { color: var(--texte-2); }
.tableau-defile .n { text-align: right; }

/* ── Réglages ── */
.ligne-reglage { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ligne); }
.ligne-reglage:first-child { border-top: 0; padding-top: 0; }
.ligne-reglage > * { min-width: 0; }
@media (min-width: 760px) {
  .ligne-reglage.postes { grid-template-columns: 1.3fr 1.3fr 136px 104px 128px; align-items: center; }
  .ligne-reglage.postes .nom { grid-column: 1 / -1; }
  .ligne-reglage.cats { grid-template-columns: 2fr 1.5fr 130px; align-items: center; }
  .ligne-reglage.pracs { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .ligne-reglage.comptes { grid-template-columns: 2fr 1fr; align-items: center; }
  .ligne-reglage label.cache-large { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .entete-colonnes:not(.postes) { display: grid !important; }
}
@media (min-width: 1100px) {
  .ligne-reglage.postes { grid-template-columns: 1.4fr 1.3fr 1.3fr 136px 104px 128px; }
  .ligne-reglage.postes .nom { grid-column: auto; }
  .entete-colonnes.postes { display: grid !important; }
  .ligne-reglage.postes label.cache-large { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}
.entete-colonnes { display: none; gap: 8px; font-size: 13px; color: var(--texte-2); font-weight: 650; padding-bottom: 6px; }
.entete-colonnes.postes { grid-template-columns: 1.4fr 1.3fr 1.3fr 136px 104px 128px; }
.entete-colonnes.cats { grid-template-columns: 2fr 1.5fr 130px; }
.ligne-reglage .nom b { display: block; }
.ligne-reglage .nom small { color: var(--texte-2); }
.ligne-reglage label { margin: 0; font-size: 13px; color: var(--texte-2); font-weight: 600; }
.ligne-reglage input:not([type=checkbox]), .ligne-reglage select { min-height: 46px; font-size: 16px; padding: 8px 12px; }
.ligne-reglage .case { margin: 0; font-size: 15px; }

/* ── Fenêtres (dialogues) ── */
dialog.fenetre {
  border: 0; padding: 0; border-radius: 20px; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante);
}
dialog.fenetre::backdrop { background: var(--voile); }
dialog.fenetre form { padding: 20px; position: relative; }
dialog.fenetre h2 { margin-bottom: 8px; padding-right: 48px; }
dialog.fenetre .texte { color: var(--texte-2); }
dialog.fenetre .actions-fenetre { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap-reverse; }
dialog.fenetre .actions-fenetre .bouton { flex: 1 1 160px; }
dialog.fenetre .fermer { position: absolute; top: 14px; right: 14px; }
dialog.feuille { margin: auto auto 0; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; max-height: 85vh; }
dialog.feuille form { padding: 0 0 env(safe-area-inset-bottom); }
.feuille nav { display: grid; gap: 4px; padding: 8px 12px 16px; }
.feuille nav a, .feuille nav button {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px; border-radius: 12px; color: var(--encre);
  text-decoration: none; font: 600 17px/1 var(--police); background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
}
.feuille nav a:hover, .feuille nav button:hover { background: var(--surface-2); }
.feuille nav a[aria-current="page"] { background: var(--marque-doux); color: var(--marque-fort); }
.feuille .compteur { margin-left: auto; }
.feuille .poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--ligne-forte); margin: 10px auto 4px; }

/* ── Marques des graphiques (SVG) ── */
.c-entree { fill: var(--marque); }
.c-projetee { fill: url(#hachure-lilas); stroke: var(--lilas); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-sortie { fill: var(--texte-2); }
.c-reste { fill: url(#hachure-ambre); stroke: var(--ambre-trait); stroke-width: 1.2; }
.c-prevu { fill: var(--hist); }
.c-res { fill: var(--marque-fort); }
.c-neg { fill: var(--rouge); }
.c-lien { stroke: var(--ligne-forte); stroke-width: 1; stroke-dasharray: 2 2; }
.c-zero, .g-zero { stroke: var(--ligne-forte); stroke-width: 1; }
.motif-lilas { fill: var(--lilas); }
.motif-ambre { fill: var(--ambre-trait); }
.b-hist { fill: var(--hist); }
.b-clos { fill: var(--marque); }
.b-prev { fill: var(--marque-doux); stroke: var(--marque); stroke-width: 1.5; }
.b-proj { fill: url(#hachure-proj); stroke: var(--lilas); stroke-width: 1.5; stroke-dasharray: 4 3; }
.zone-clic { fill: transparent; }
.zone-clic.actif { fill: var(--surface-2); }

/* ── Dépôt automatique et documents ── */
.onglets-bas a.onglet-depot .ico-fond { background: var(--bouton); color: var(--bouton-texte); }
.onglets-bas a.onglet-depot[aria-current="page"] .ico-fond { background: var(--bouton-survol); }
@media (max-width: 430px) { .onglets-bas a, .onglets-bas button { font-size: 11.5px; } .ico-fond { width: 46px; } }

.depot-cible {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px;
  border: 2px dashed var(--ligne-forte); border-radius: var(--rayon); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.depot-cible.grand { padding: 34px 18px 26px; }
.depot-cible.survol { border-color: var(--marque); background: var(--marque-doux); }
.depot-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--marque-doux); color: var(--marque-fort); flex: none; }
.depot-ico .ico { width: 32px; height: 32px; }
.depot-titre { font: 700 21px/1.2 var(--police-titre); margin: 4px 0 0; }
.depot-aide { color: var(--texte-2); font-size: 15px; max-width: 46ch; margin: 0 0 6px; }
.depot-boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.depot-boutons .bouton { flex: 1 1 220px; max-width: 320px; position: relative; margin: 0; }
.depot-promesse { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; }
.depot-promesse .ico { margin-top: 1px; color: var(--marque); }
.deposer { display: grid; gap: 18px; max-width: 980px; }
.deposer .section-titre { margin-top: 0; }

.depot-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 72px; flex-wrap: wrap; }
.depot-ligne .corps { flex: 1 1 220px; min-width: 0; }
.depot-ligne .corps b { display: block; font-weight: 650; overflow-wrap: break-word; }
.depot-ligne .corps .sous { display: block; font-size: 14px; color: var(--texte-2); }
.depot-ligne .raison { display: block; font-size: 14.5px; margin-top: 4px; }
.depot-droite { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.depot-droite .montant { font-weight: 700; }
.depot-lien { display: block; border-radius: 10px; }
.depot-etat { display: grid; place-items: center; width: 44px; height: 56px; border-radius: 10px; background: var(--surface-2); color: var(--texte-2); flex: none; }
.depot-etat.retard { background: var(--rouge-fond); color: var(--rouge); }
.liste .vide { padding: 18px; }
.rouet { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--marque-doux); border-top-color: var(--marque); animation: tourne 0.9s linear infinite; display: inline-block; }
@keyframes tourne { to { transform: rotate(360deg); } }

.doc-vignette { display: grid; place-items: center; width: 64px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--ligne); color: var(--texte-2); flex: none; }
.doc-vignette.petite { width: 44px; height: 58px; border-radius: 8px; }
.doc-vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #fff; }
.doc-vignette.vide { align-content: center; gap: 2px; }
.doc-vignette.vide small { font-size: 11px; font-weight: 700; }
.doc-vignette .ico { width: 20px; height: 20px; }

.bandeau-depot {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px;
  border: 2px dashed var(--ligne-forte); border-radius: var(--rayon); background: var(--surface);
}
.bandeau-depot.survol { border-color: var(--marque); background: var(--marque-doux); }
.bandeau-depot .depot-ico { width: 48px; height: 48px; border-radius: 14px; }
.bandeau-depot .depot-ico .ico { width: 26px; height: 26px; }
.bd-texte { flex: 1 1 220px; min-width: 0; }
.bd-texte b { display: block; font: 700 17px/1.25 var(--police-titre); }
.bd-texte small { color: var(--texte-2); }
.bd-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-boutons .bouton { position: relative; margin: 0; }
@media (max-width: 560px) { .bd-boutons { width: 100%; } .bd-boutons .bouton { flex: 1 1 140px; } }

.cartes-verif { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.carte-verif { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--ambre-trait); border-radius: var(--rayon); padding: 14px; }
.cv-vignette { flex: none; border-radius: 10px; }
.cv-vignette .doc-vignette { width: 96px; height: 128px; }
.cv-corps { flex: 1; min-width: 0; }
.cv-corps h3 { font-size: 16.5px; overflow-wrap: break-word; margin-bottom: 4px; }
.cv-corps h3 a { color: var(--encre); text-decoration: none; }
.cv-corps h3 a:hover { text-decoration: underline; }
.cv-corps .sous { font-size: 13.5px; color: var(--texte-2); margin-bottom: 8px; overflow-wrap: anywhere; }
.cv-corps .raison { font-size: 15px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cv-corps .rangee { margin-top: 4px; }
.cv-corps .note { margin: 8px 0 0; }
@media (max-width: 480px) { .carte-verif { flex-direction: column; } .cv-vignette .doc-vignette { width: 100%; height: 150px; } .cv-corps .bouton { flex: 1 1 100%; } }

.explorateur { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.arbre-fixe { display: none; }
@media (min-width: 1100px) {
  .explorateur { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .arbre-replie { display: none; }
  .arbre-fixe { display: block; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 8px; }
}
.arbre-docs { display: grid; gap: 2px; }
.arbre-docs a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px;
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 15.5px; flex: 1; }
.arbre-docs a:hover { background: var(--surface-2); }
.arbre-docs a small { color: var(--texte-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.arbre-docs a[aria-current="true"] { background: var(--marque-doux); color: var(--marque-fort); }
.arbre-docs details > summary { list-style: none; display: flex; align-items: center; cursor: pointer; border-radius: 10px; }
.arbre-docs details > summary::-webkit-details-marker { display: none; }
.arbre-docs details > summary::before { content: ""; width: 8px; height: 8px; margin: 0 4px 0 10px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2);
  transform: rotate(-45deg); transition: transform .15s; flex: none; }
.arbre-docs details[open] > summary::before { transform: rotate(45deg); }
.arbre-docs details details { margin-left: 14px; }
.arbre-docs a.type { margin-left: 34px; font-weight: 500; font-size: 15px; }
.arbre-replie { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 0 12px; }
.arbre-replie > summary { min-height: 48px; display: flex; align-items: center; font-weight: 650; }
.arbre-replie .arbre-docs { padding-bottom: 10px; }

.recherche-docs { display: flex; align-items: center; gap: 8px; position: relative; margin-bottom: 10px; }
.recherche-docs .loupe { position: absolute; left: 14px; color: var(--texte-2); pointer-events: none; display: flex; }
.recherche-docs input { padding-left: 46px; min-height: 54px; font-size: 17px; flex: 1; }
.recherche-docs .bouton { min-height: 54px; }
@media (max-width: 480px) { .recherche-docs .bouton { padding: 0 14px; } }
.puces-etat { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.puces-etat::-webkit-scrollbar { display: none; }
.puces-etat a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  text-decoration: none; color: var(--encre); background: var(--surface); border: 1px solid var(--ligne); font-weight: 600; font-size: 15px; }
.puces-etat a:hover { background: var(--surface-2); }
.puces-etat a[aria-current="true"] { background: var(--bouton); color: var(--bouton-texte); border-color: var(--bouton); }
.filtres-docs { margin-bottom: 10px; }
.filtres-docs > summary { font-weight: 650; }
.filtres-docs .filtres { margin-top: 10px; }
.chemin { color: var(--marque-fort); }

.liste.docs .doc-ligne { display: flex; align-items: center; padding-left: 10px; }
.doc-ligne .coche { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; flex: none; }
.doc-ligne .element { padding-left: 4px; min-width: 0; }
.doc-ligne .element .corps b { overflow-wrap: break-word; white-space: normal; font-size: 15.5px; }
.extrait { display: block; font-size: 14px; color: var(--texte-2); margin-top: 4px; overflow-wrap: anywhere; }
mark { background: var(--ambre-fond); color: var(--encre); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--ambre-trait); }

.fiche-doc { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .fiche-doc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .colonne-apercu { position: sticky; top: 100px; }
}
.apercu { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.apercu.pdf iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #fff; }
.apercu.image { overflow: auto; max-height: min(78vh, 900px); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.apercu.image canvas { display: block; max-width: none; margin: 0 auto; background: #fff; }
.outils-apercu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 899px) { .apercu.pdf iframe { height: 62vh; } .apercu.image { max-height: 62vh; } }
.titre-doc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.colonne-infos > .panneau + .panneau, .colonne-infos > .panneau + details, .colonne-infos > details + details { margin-top: 16px; }
.colonne-infos > .message { margin-bottom: 14px; }
.rattachement { display: flex; gap: 10px; align-items: flex-start; }
.rattachement .ico { margin-top: 2px; color: var(--marque-fort); }
dl.fiche { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; margin: 0; }
dl.fiche dt { color: var(--texte-2); font-size: 14.5px; }
dl.fiche dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.fiche dd .note { font-weight: 400; }
.nom-classe { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { dl.fiche { grid-template-columns: 1fr; gap: 2px; } dl.fiche dd { margin-bottom: 8px; } }
.actions-doc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); }
table.simple.lu td:last-child { text-align: right; }
.classer { border: 2px solid var(--ambre-trait); margin-bottom: 16px; }
.choix-classer { margin: 6px 0 4px; }
.segmente button[aria-selected="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.onglet-classer { padding-top: 6px; }
fieldset.propositions { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
fieldset.propositions legend { font-weight: 650; font-size: 15px; margin-bottom: 6px; padding: 0; }
.proposition { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; min-height: 56px; border: 1.5px solid var(--ligne-forte);
  border-radius: 12px; cursor: pointer; font-weight: 500; }
.proposition:has(input:checked) { border-color: var(--marque); background: var(--marque-doux); }
.proposition .corps { flex: 1; min-width: 0; }
.proposition .corps b { display: block; }
.proposition .corps .sous { display: block; font-size: 13.5px; color: var(--texte-2); }
.proposition .montant { font-weight: 700; }
.texte-lu pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; max-height: 420px; overflow: auto;
  background: var(--surface-2); border-radius: 10px; padding: 12px; margin: 8px 0 12px; }
.journal-doc ol { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.journal-doc li .note { display: block; }

/* ── Lignes du tableau normalisées (22/10/2026) : groupes, identification, libellé d'origine ── */
.pastille.a-identifier { background: var(--ambre-fond); color: var(--ambre); }
.pastille.probable { background: var(--surface-2); color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.pastille.probable::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.lignes-poste .nom-poste .pastille, .grille tbody th .pastille, .titre-ligne .pastille { margin-left: 8px; font-size: 12px; padding: 2px 8px; vertical-align: 1px; }
.lignes-poste .nom-poste b { display: inline; }
.lignes-poste .nom-poste small { display: block; margin-top: 2px; }
.origine { color: var(--texte-2); font-style: italic; }
.grille tbody th .pastille { display: inline-flex; }
details.groupe-annee > summary { flex-wrap: wrap; }
.tot-groupe { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-weight: 700; white-space: nowrap; }
.tot-groupe small { font-weight: 500; font-size: 13px; color: var(--texte-2); }
.totaux-charges { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; margin-top: 14px; padding: 12px 16px;
  background: var(--surface-2); border-radius: var(--rayon); font-size: 15px; color: var(--texte-2); }
.totaux-charges b { color: var(--encre); margin-left: 6px; }
.totaux-charges .fort { color: var(--encre); font-weight: 650; }
.grille tr.sous th, .grille tr.sous td { font-weight: 650; color: var(--texte-2); padding: 6px 10px; background: var(--surface); }
.grille tr.sous th { padding-left: 12px; font-size: 13px; }
.rappel-discret { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ambre); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.rappel-discret:hover { text-decoration: underline; }
.rappel-discret .ico { width: 18px; height: 18px; }
.panneau.etat .rappel-discret { margin-top: 6px; padding: 0 4px; }
.fiche-ligne { margin: 4px 0 10px; }
.fiche-ligne p { margin: 6px 0; }
.note-ligne { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--ambre-trait); background: var(--ambre-fond); color: var(--encre);
  border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.45; }
.filtres-postes { margin: 12px 0 2px; }
.postes-liste { list-style: none; margin: 0; padding: 0 16px 8px; }
.poste-reglage { display: flex; gap: 10px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.poste-reglage:first-child { border-top: 0; }
.poste-reglage .corps { flex: 1 1 320px; min-width: 0; }
.poste-reglage .titre-ligne b { font-weight: 650; font-size: 16px; }
.poste-reglage small { display: block; color: var(--texte-2); font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.poste-reglage.inactif .titre-ligne b { color: var(--texte-2); }
.poste-reglage .actions-ligne { display: flex; gap: 8px; flex: none; margin-left: auto; }
@media (max-width: 560px) { .poste-reglage .actions-ligne { width: 100%; justify-content: flex-end; } }

/* ── Téléphone (05/11/2026, Gladys : « la version mobile est moins agréable que l'ordinateur ») ──
   Rien ne doit couvrir le contenu, l'en-tête ne vole pas la hauteur de l'écran, les chiffres se lisent en colonne. */
@media (max-width: 600px) {
  /* En-tête : défile avec la page (les onglets du bas restent), le mois s'affiche en entier. */
  .entete { position: static; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .entete-ligne h1 { font-size: 20px; }
  .choix-mois { width: 100%; }
  .choix-mois select { flex: 1 1 auto; max-width: none; font-size: 16px; }
  /* Bouton « Nouvelle dépense » : un rond « + » qui ne cache plus les textes ni les boutons. */
  .fab { width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; right: 14px; }
  .fab .ico { width: 26px; height: 26px; }
  .fab-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Accueil : le bandeau de dépôt tient sur deux lignes (l'onglet « Déposer » fait le reste). */
  .bandeau-depot { padding: 12px; gap: 10px; }
  .bandeau-depot .depot-ico { width: 40px; height: 40px; border-radius: 12px; }
  .bd-texte small { display: none; }
  .bd-boutons { flex-wrap: nowrap; }
  .bd-boutons .bouton { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
  /* Cadres plus serrés, chiffres plus compacts. */
  main#contenu { padding-left: 12px; padding-right: 12px; }
  .panneau { padding: 14px; }
  .heros { padding: 16px 14px 14px; }
  .chiffres-mois { grid-template-columns: 1fr 1fr; gap: 6px; }
  .chiffres-mois div { padding: 8px 10px; }
  .chiffres-mois div b { font-size: 17px; }
  /* Formule du disponible : une ligne par terme, le signe devant (plus de « − » orphelin en bout de ligne). */
  .formule { display: grid; grid-template-columns: 22px 1fr; gap: 4px 6px; align-items: center; }
  .formule > .terme:first-child { grid-column: 2; }
  .formule .terme { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; }
  .formule .op { text-align: center; padding: 0; }
}