/* Outil interne : lecture rapide, une demande par carte, filtres collants en haut */
:root {
  --fond: #f4f6f5; --carte: #ffffff; --encre: #1d2622; --doux: #5d6964; --filet: #dbe1de;
  --vert: #3f6b14; --vert-pale: #e7f1dc; --rouge: #a33b22; --rouge-pale: #f8e6e0; --lien: #2f5a8a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #121715; --carte: #1b2320; --encre: #e3eae6; --doux: #9aa8a2; --filet: #2c3733;
    --vert: #9ccf6a; --vert-pale: #233320; --rouge: #f0a089; --rouge-pale: #3a231d; --lien: #8db8e8; }
}
* { box-sizing: border-box; }
/* Les règles display (.plus, .barre-poubelle…) ne doivent pas annuler l attribut hidden */
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding-inline: 16px; }
.entete, .filtres, main { max-width: 900px; margin-inline: auto; }
.entete { padding-block: 24px 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
h1 { font-size: 22px; margin: 0; }
.totaux { margin: 0; color: var(--doux); font-variant-numeric: tabular-nums; }
.filtres { position: sticky; top: 0; z-index: 1; background: var(--fond); padding-block: 12px; display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--filet); }
.filtres label { display: grid; gap: 4px; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.filtres .recherche { flex: 1 1 220px; }
select, input { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; padding: 7px 9px; min-height: 38px; }
main { padding-block: 16px 48px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demande { background: var(--carte); border: 1px solid var(--filet); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; min-width: 0; }
.demande p { margin: 0; overflow-wrap: anywhere; }
.ligne-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--doux); }
.date { margin-left: auto; font-variant-numeric: tabular-nums; }
.pastille { padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.pastille.prospect { background: var(--vert-pale); color: var(--vert); }
.pastille.spam { background: var(--rouge-pale); color: var(--rouge); }
.site { font-weight: 600; color: var(--encre); }
.nom { font-size: 17px; font-weight: 600; }
.coordonnees { display: flex; flex-wrap: wrap; gap: 4px 18px; }
a { color: var(--lien); }
.page { font-size: 13px; color: var(--doux); }
.champs { margin: 4px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 14px; }
.champs dt { color: var(--doux); }
.champs dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.raisons { font-size: 13px; color: var(--rouge); }
.pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--doux); }
.actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.reclasser, .jeter { font: inherit; font-size: 13px; color: var(--encre); background: transparent; border: 1px solid var(--filet); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.reclasser:hover, .jeter:hover, .plus:hover { border-color: var(--doux); }
.plus { display: block; margin: 16px auto 0; font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; padding: 9px 16px; cursor: pointer; }
.vide, .erreur { text-align: center; color: var(--doux); padding: 24px 0; }
.erreur { color: var(--rouge); }
:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
@media (max-width: 520px) { .champs { grid-template-columns: 1fr; } .champs dd { margin-bottom: 6px; } }
.deconnexion { font-size: 13px; }
/* Page de connexion */
.page-connexion { display: grid; min-height: 100vh; place-items: center; }
.connexion { width: 100%; max-width: 360px; background: var(--carte); border: 1px solid var(--filet); border-radius: 10px; padding: 28px 24px; display: grid; gap: 18px; }
.connexion h1 { font-size: 20px; }
.formulaire-connexion { display: grid; gap: 10px; }
.formulaire-connexion label { font-size: 14px; color: var(--doux); }
.formulaire-connexion .case { display: flex; align-items: center; gap: 8px; color: var(--encre); cursor: pointer; }
.formulaire-connexion .case input { width: 18px; height: 18px; min-height: 0; }
.formulaire-connexion button { font: inherit; font-weight: 600; color: var(--fond); background: var(--vert); border: 0; border-radius: 6px; padding: 10px; cursor: pointer; margin-top: 6px; }
.erreur-connexion { margin: 0; color: var(--rouge); font-size: 14px; }
/* Onglets */
.onglets { max-width: 900px; margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 6px; }
.onglet { font: inherit; font-size: 14px; color: var(--doux); background: transparent; border: 1px solid var(--filet); border-radius: 18px; padding: 6px 14px; cursor: pointer; }
.onglet[aria-pressed="true"] { color: var(--fond); background: var(--encre); border-color: var(--encre); }
.onglet-poubelle { margin-left: auto; }
.compte { font-variant-numeric: tabular-nums; opacity: .8; }
.barre-poubelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border: 1px dashed var(--filet); border-radius: 8px; color: var(--doux); font-size: 14px; }
.barre-poubelle p { margin: 0; }
.vider { font: inherit; font-size: 14px; font-weight: 600; color: var(--rouge); background: var(--rouge-pale); border: 1px solid var(--rouge); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.vider:disabled { opacity: .5; cursor: default; }
.jeter { color: var(--rouge); }