:root { --darkened-bg: #f8fafc; --hairline-color: #e2e8f0; --body-bg: #f1f5f9; --link-fg: #1d4ed8; --fond: #f1f5f9; --texte: #1e293b; --discret: #64748b; --trait: #cbd5e1; --carte: #fff; --accent: #1d4ed8; --rouge: #c62828; --vert: #2e7d32; }
  @media (prefers-color-scheme: dark) {
    :root { --darkened-bg: #212226; --hairline-color: #3a3b40; --body-bg: #17181a; --link-fg: #64b5f6; --fond: #17181a; --texte: #e9e9ec; --discret: #a0a0a8; --trait: #3a3b40; --carte: #212226; --accent: #64b5f6; --rouge: #ef5350; --vert: #66bb6a; }
  }
  body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: var(--fond); color: var(--texte); }
  header { background: linear-gradient(135deg, #1e3a5f, #2b4f7e); color: #fff; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
  header form { margin-left: auto; }
  main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
  h1 { margin-top: .5rem; } h2 { margin-top: 2rem; border-bottom: 1px solid var(--trait); padding-bottom: .25rem; }
  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
  th { background: var(--carte); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  a { color: var(--accent); }
  .carte { box-shadow: 0 1px 3px rgba(15,23,42,.08); background: var(--carte); border: 1px solid var(--trait); border-radius: 6px; padding: .75rem 1rem; }
  .signalee { color: var(--rouge); font-weight: 700; }
  .alerte { border-left: 4px solid var(--rouge); background: rgba(198, 40, 40, .12); padding: .5rem .75rem; margin: .5rem 0; font-weight: 600; }
  .message { padding: .5rem .75rem; margin: .5rem 0; border-radius: 4px; background: var(--carte); border-left: 4px solid var(--vert); }
  .message.error { border-left-color: var(--rouge); }
  /* messages : collés en haut de l'écran pour rester visibles où que l'on soit dans la page */
  .messages { position: sticky; top: 0; z-index: 20; }
  .message { font-weight: 600; box-shadow: 0 2px 6px rgba(15,23,42,.18); }
  .message .icone { font-weight: 700; margin-right: .25rem; }
  .message.success { border-left-width: 6px; }
  .message.warning { border-left: 6px solid #ef6c00; background: rgba(239, 108, 0, .18); }
  .message.error { border-left-width: 6px; background: var(--rouge); color: #fff; font-size: 1.05em; }
  .message.error a { color: #fff; }
  .raison-bouton { margin: .4rem 0 0; padding: .4rem .6rem; border-left: 4px solid #ef6c00; background: rgba(239, 108, 0, .14); font-weight: 600; }
  .controle-jours { margin: .5rem 0; padding: .4rem .6rem; border-left: 4px solid var(--rouge); background: rgba(198, 40, 40, .14); font-weight: 600; }
  tr.doublon td { background: rgba(239, 108, 0, .16); }
  .badge-doublon { background: #ef6c00; color: #fff; font-weight: 700; font-size: .8em; padding: .05rem .4rem; border-radius: 3px; }
  .alerte-doublon { border-left-color: #ef6c00; background: rgba(239, 108, 0, .14); }
  button.refuser { background: var(--rouge); color: #fff; border: 0; border-radius: 4px; }
  .decision { display: flex; flex-wrap: wrap; gap: 2rem; align-items: end; }
  tr.barree td, tr.barree th, h1.barree { text-decoration: line-through; opacity: .62; }
  .statut-incomplete { color: #b26a00; font-weight: 600; } .statut-supprimee { color: var(--discret); font-weight: 600; }
  .statut-acceptee { color: #1565c0; font-weight: 600; } .statut-payee { color: var(--vert); font-weight: 600; }
  .statut-refusee { color: var(--rouge); font-weight: 600; }
  .ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; }
  .iban { font-family: ui-monospace, monospace; font-size: 1.1em; user-select: all; }
  iframe.pdf { width: 100%; height: min(78vh, 40rem); border: 1px solid var(--trait); background: #fff; }
  img.apercu { max-width: 100%; border: 1px solid var(--trait); }
  .fiche > .carte { position: sticky; top: .75rem; align-self: start; }
  .fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 1rem; margin-top: 1rem; }
  @media (max-width: 800px) { .fiche { grid-template-columns: 1fr; } }
  label { display: block; font-weight: 600; margin-top: .6rem; }
  input[type=number], input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=search], textarea { width: 100%; padding: .45rem; box-sizing: border-box; font: inherit; background: var(--fond); color: var(--texte); border: 1px solid var(--trait); border-radius: 4px; }
  button { padding: .6rem 1.2rem; font: inherit; cursor: pointer; margin-top: .75rem; }
  button.grand { font-size: 1.1rem; padding: .8rem 1.6rem; font-weight: 700; }
  button.payer.grand { font-size: 1.1rem; padding: .8rem 1.6rem; font-weight: 700; }
  .virement-fait { border-left: 5px solid var(--vert); }
  button.payer { background: var(--vert); color: #fff; border: 0; border-radius: 4px; }
  .note { margin-bottom: .6rem; white-space: pre-wrap; } .note small { color: var(--discret); }
  .discret { color: var(--discret); }
  header .discret { color: #cbd5e1; }
  .recherche { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; } .recherche input { max-width: 28rem; }
  .recherche button { margin: 0; }
  .indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
  .indicateurs .carte strong { display: block; font-size: 1.8rem; }
  .negatif { color: var(--rouge); } .positif { color: var(--vert); }
  th[data-tri] { cursor: pointer; user-select: none; } th[data-sens=asc]::after { content: " ▲"; } th[data-sens=desc]::after { content: " ▼"; }
  .ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; }
  select { width: 100%; padding: .45rem; font: inherit; background: var(--fond); color: var(--texte); border: 1px solid var(--trait); border-radius: 4px; }

/* --- formulaires (formulaire public, saisies) --- */
.etroit { max-width: 48rem; }
div.field, p.field { margin: 1rem 0 0; }
.help { color: var(--discret); font-size: .9em; display: block; }
.errorlist { color: var(--rouge); margin: .25rem 0; padding: 0; list-style: none; font-weight: 600; }
.intro { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--accent); padding: .5rem 1rem; border-radius: 6px; }
.ligne { border: 1px solid var(--trait); background: var(--carte); border-radius: 6px; padding: 0 .75rem .75rem; margin-top: .75rem; }
button.retirer { margin-top: .5rem; padding: .3rem .8rem; }
button[data-ajouter] { margin-top: .75rem; }
input[type=file] { max-width: 100%; }
input[type=checkbox] { width: auto; margin-right: .4rem; }
label.check, .field label:has(> input[type=checkbox]) { font-weight: 400; }
h3 { margin-bottom: .25rem; }
/* --- listes : filtres, pagination, étiquettes --- */
.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; align-items: end; margin: 1rem 0; }
.filtres label { margin-top: 0; font-size: .85rem; }
.filtres button { margin: 0; }
th a.tri { color: inherit; text-decoration: none; white-space: nowrap; }
th a.tri.actif::after { content: " ▲"; } th a.tri.actif.desc::after { content: " ▼"; }
.pagination { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.pagination a, .pagination span.courant { padding: .25rem .7rem; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); text-decoration: none; }
.pagination span.courant { background: var(--accent); color: #fff; border-color: var(--accent); }
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .5rem 0; list-style: none; }
.etiquettes li { background: var(--carte); border: 1px solid var(--trait); border-radius: 999px; padding: .15rem .8rem; }
.etiquettes small { color: var(--discret); }
.badge { background: var(--trait); border-radius: 999px; padding: .05rem .55rem; font-size: .8em; font-weight: 600; }
.badge.ok { background: rgba(46, 125, 50, .2); color: var(--vert); } .badge.attente { background: rgba(239, 108, 0, .2); }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
small.statut { font-size: .5em; vertical-align: middle; }
header .lien-entete { margin-left: auto; color: #fff; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.5); padding: .3rem .9rem; border-radius: 999px; }

a.bouton { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); color: var(--accent); text-decoration: none; font-weight: 600; }
a.bouton:hover { border-color: var(--accent); }
button.annuler-paiement { background: transparent; color: var(--rouge); border: 1px solid var(--rouge); border-radius: 4px; }
.correction { margin-top: 1rem; }

details.revoir { margin-top: .5rem; }
details.revoir summary { cursor: pointer; padding: .4rem .8rem; border: 1px dashed var(--trait); border-radius: 6px; color: var(--accent); font-weight: 600; }
details.revoir[open] summary { margin-bottom: .5rem; }
ul.regles { list-style: disc; padding-left: 1.4rem; margin: .25rem 0 1rem; color: var(--discret); }
.alerte-edition { border-left-color: #ef6c00; background: rgba(239, 108, 0, .14); }
label.confirmation { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.pagination a.courant { background: var(--accent); color: #fff; border-color: var(--accent); }

ul.diff { list-style: none; margin: 0; padding: 0; }
ul.diff li { margin: .1rem 0; }
ul.diff .avant { color: var(--discret); text-decoration: line-through; }
ul.diff .apres { font-weight: 600; }

fieldset.radios { border: 0; padding: 0; margin: 1rem 0 0; }
fieldset.radios legend { font-weight: 600; padding: 0; }
fieldset.radios label.check { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; font-weight: 400; }

/* --- formulaire public : étapes, erreurs, récapitulatif --- */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.intro ul { margin: .25rem 0 .5rem; padding-left: 1.3rem; }
nav.etapes { position: sticky; top: 0; z-index: 10; background: var(--fond); padding: .5rem 0; margin: 1rem 0 .25rem; border-bottom: 1px solid var(--trait); }
nav.etapes ol { display: flex; gap: .3rem; scrollbar-width: thin; list-style: none; padding: 0; margin: 0; overflow-x: auto; counter-reset: etape; }
nav.etapes li { counter-increment: etape; flex: 0 0 auto; }
nav.etapes a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); text-decoration: none; font-weight: 600; white-space: nowrap; }
nav.etapes a::before { content: counter(etape); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85rem; }
h2[id^="etape-"] { scroll-margin-top: 4.5rem; }
.resume-erreurs { border-left: 4px solid var(--rouge); background: rgba(198, 40, 40, .12); padding: .6rem 1rem; margin: 1rem 0; border-radius: 4px; scroll-margin-top: 4.5rem; }
.resume-erreurs ul { margin: .4rem 0 0; padding-left: 1.2rem; font-weight: 400; }
.resume-erreurs a { color: inherit; }
div.field input:user-invalid, div.field select:user-invalid, div.field textarea:user-invalid { border-color: var(--rouge); }
main.etroit button, main.etroit input, main.etroit select { min-height: 2.75rem; }
main.etroit input[type=checkbox] { min-height: 0; width: 1.2rem; height: 1.2rem; }
button.envoyer { width: 100%; font-size: 1.1rem; font-weight: 700; background: var(--accent); color: #fff; border: 0; border-radius: 6px; margin-top: 1.5rem; }
dialog#recap { max-width: 32rem; width: calc(100% - 2rem); border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); color: var(--texte); padding: 1rem 1.25rem; }
dialog#recap::backdrop { background: rgba(15, 23, 42, .55); }
dialog#recap h2 { margin-top: 0; }
#recap-liste { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
#recap-liste dt { color: var(--discret); } #recap-liste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.recap-actions { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; }
ol.suite { padding-left: 1.3rem; } ol.suite li { margin: .6rem 0; }
@media (max-width: 600px) { #recap-liste { grid-template-columns: 1fr; } #recap-liste dd { margin-bottom: .4rem; } }

/* --- espace de gestion : liste, fiche, barre de décision --- */
nav.onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
nav.onglets a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); text-decoration: none; font-weight: 600; }
nav.onglets a[aria-current=page] { background: var(--accent); border-color: var(--accent); color: #fff; }
nav.onglets a[aria-current=page] .badge { background: rgba(255,255,255,.25); color: #fff; }
.defilement { overflow-x: auto; }
table.cliquable tbody tr { cursor: pointer; }
table.cliquable tbody tr:hover td { background: rgba(127,127,127,.1); }
th.case, td.case { width: 2rem; text-align: center; }
td.case input { width: 1.2rem; height: 1.2rem; }
.attente { font-size: .8em; color: var(--discret); margin-left: .35rem; }
.attente.retard { color: var(--rouge); font-weight: 700; }
.barre-lot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .6rem 1rem; background: var(--carte); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,.15); margin-top: .75rem; }
.barre-lot[hidden] { display: none; }
.barre-lot button { margin: 0; }
section.alertes { border: 1px solid var(--rouge); border-radius: 8px; padding: .25rem .9rem .6rem; margin: .75rem 0; background: rgba(198,40,40,.05); }
.titre-alertes { border: 0; margin: .4rem 0 .2rem; font-size: 1.05rem; color: var(--rouge); }
.resume-demande { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: .75rem 0; padding: .75rem 1rem; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; }
.resume-demande > div { display: flex; flex-direction: column; gap: .15rem; }
.resume-demande strong { font-size: 1.15rem; }
form.en-ligne { display: flex; gap: .5rem; align-items: center; margin: 0; } form.en-ligne button { margin: 0; padding: .25rem .8rem; }
.barre-decision { position: sticky; bottom: 0; z-index: 5; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: .7rem 1rem; margin-top: .75rem; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
.barre-decision.suppression { position: static; box-shadow: none; }
.decision-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.decision-actions button { margin: 0; }
details.decision-motif { margin-top: .5rem; }
details.decision-motif summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: .25rem 0; }
.recherches { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; }
.puce { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--trait); border-radius: 999px; padding: .1rem .3rem .1rem .8rem; background: var(--carte); }
.puce form { margin: 0; } .puce .croix { margin: 0; padding: 0 .5rem; border: 0; background: transparent; color: var(--discret); font-size: 1.1rem; }
form.enregistrer-recherche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
form.enregistrer-recherche input[type=text] { max-width: 16rem; } form.enregistrer-recherche button, form.enregistrer-recherche label { margin: 0; }
@media (max-width: 700px) {
  table.cliquable thead { display: none; }
  table.cliquable tbody tr { display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); }
  table.cliquable td { border: 0; padding: .1rem 0; grid-column: 2; }
  table.cliquable td[data-label]::before { content: attr(data-label) " : "; color: var(--discret); font-size: .85em; }
  table.cliquable td.case { grid-row: 1 / span 8; grid-column: 1; }
  table.cliquable td.num { text-align: left; }
}

/* --- suivi de demande (page publique) --- */
ol.progression { display: flex; list-style: none; padding: 0; margin: 1.25rem 0; counter-reset: etape; gap: .25rem; }
ol.progression li { flex: 1; text-align: center; counter-increment: etape; position: relative; font-size: .85rem; color: var(--discret); }
ol.progression li::before { content: counter(etape); display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0 auto .3rem; border-radius: 50%; background: var(--trait); color: var(--texte); font-weight: 700; position: relative; z-index: 1; }
ol.progression li::after { content: ""; position: absolute; top: 1rem; left: 50%; width: 100%; height: 3px; background: var(--trait); }
ol.progression li:last-child::after { display: none; }
ol.progression li.atteint { color: var(--texte); font-weight: 600; }
ol.progression li.atteint::before { background: var(--vert); color: #fff; }
ol.progression li.atteint::after { background: var(--vert); }
ol.progression li.courant::before { box-shadow: 0 0 0 4px rgba(46, 125, 50, .25); }
.statut-refusee-bloc { border-left-color: var(--rouge); } .statut-incomplete-bloc { border-left-color: #ef6c00; }
.statut-payee-bloc, .statut-acceptee-bloc { border-left-color: var(--vert); }

/* --- graphiques du bilan (couleurs validées : bleu / orange, claires et sombres) --- */
.viz { --s1: #2a78d6; --s2: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz { --s1: #3987e5; --s2: #d95926; } }
:root[data-theme="dark"] .viz { --s1: #3987e5; --s2: #d95926; }
.viz-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: .5rem 1rem 1rem; margin: 1rem 0; break-inside: avoid; }
.viz-carte h3 { margin: .5rem 0; font-size: 1rem; }
svg.graphique { width: 100%; height: auto; display: block; font-family: inherit; }
svg.graphique .grille { stroke: var(--trait); stroke-width: 1; opacity: .7; }
svg.graphique .base { stroke: var(--discret); stroke-width: 1; }
svg.graphique text { fill: var(--discret); font-size: 11px; }
svg.graphique text.valeur { fill: var(--texte); font-weight: 700; font-size: 12px; }
svg.graphique text.etiquette { fill: var(--texte); font-size: 12px; }
svg.graphique .serie-1 { fill: var(--s1); } svg.graphique .serie-2 { fill: var(--s2); }
svg.graphique .ligne { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.graphique .aire { fill: var(--s1); opacity: .1; }
svg.graphique .point { fill: var(--s1); stroke: var(--carte); stroke-width: 2; }
svg.graphique .zone { fill: transparent; }
svg.graphique .zone:hover { fill: var(--s1); opacity: .25; }
svg.graphique path:hover { opacity: .8; }
.legende { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0 0 .25rem; font-size: .9rem; }
.legende .cle { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.legende .serie-1 { background: var(--s1); } .legende .serie-2 { background: var(--s2); }
.actions-lot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions-lot label { margin: 0; font-weight: 400; } .actions-lot input { width: auto; } .actions-lot button { margin: 0; }
.hors-impression { margin-bottom: 1rem; }
@media print {
  header, nav.menu-caisse, .hors-impression, .bandeau-simulation, .bandeau-test, details.revoir > summary { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .viz, .viz-carte { --carte: #fff; }
  details.revoir { display: block; } details.revoir > * { display: block; }
  .rapport h1 { margin-top: 0; }
}
.carte.verification { margin: 1rem 0; border-left: 4px solid var(--vert); }
.carte.verification.jamais, .carte.verification.ancien { border-left-color: #ef6c00; }
.carte.verification.echec { border-left-color: var(--rouge); background: rgba(198, 40, 40, .1); }

/* --- écrans tactiles : cibles d'au moins 44 px (boutons, menus, cases) --- */
@media (max-width: 700px), (pointer: coarse) {
  button, a.bouton, select, input:not([type=checkbox]):not([type=radio]):not([type=file]), details > summary { min-height: 2.75rem; }
  .menu-caisse a, .menu-caisse summary, nav.onglets a, .pagination a, .pagination span.courant { display: inline-flex; align-items: center; min-height: 2.75rem; }
  input[type=checkbox], input[type=radio], main.etroit input[type=checkbox] { width: 1.5rem; height: 1.5rem; }
  td.case input, th.case input { width: 1.5rem; height: 1.5rem; }
  .puce .croix { min-width: 2.75rem; }
  header form button, header .lien-entete { min-height: 2.75rem; display: inline-flex; align-items: center; }
}