/* SINRJ — feuille de style unique. Couleurs reprises du classeur (bleu marine #1F3864). */
:root {
  --marine: #1f3864;
  --bleu: #2e75b6;
  --fond: #f4f6fa;
  --blanc: #ffffff;
  --trait: #cfd6e4;
  --texte: #1c2333;
  --gris: #595959;
  --vert-fond: #e2efda;
  --vert: #2f6b1f;
  --rouge-fond: #ffc7ce;
  --rouge: #9c0006;
  --jaune-fond: #fff2cc;
  --bande: #f5f8fc;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.45;
}

a { color: var(--bleu); }

:focus-visible { outline: 3px solid #f0a800; outline-offset: 2px; }

.lien-contenu {
  position: absolute; left: -999px; top: 0;
  background: var(--blanc); padding: .5rem 1rem; z-index: 10;
}
.lien-contenu:focus { left: .5rem; top: .5rem; }

/* ---------- En-tête et navigation ---------- */
.bandeau { background: var(--marine); color: var(--blanc); }
.bandeau-haut {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 1.2rem; flex-wrap: wrap;
}
.marque { font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; color: var(--blanc); text-decoration: none; }
.marque small { font-weight: 400; font-size: .8rem; opacity: .85; margin-left: .6rem; letter-spacing: 0; }
.compte { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.compte form { margin: 0; }

.nav { background: #17294a; }
.nav ul { list-style: none; margin: 0; padding: 0 1rem; display: flex; flex-wrap: wrap; }
.nav a {
  display: block; padding: .55rem .8rem; color: #dbe4f3; text-decoration: none; font-size: .92rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { background: #22386290; color: var(--blanc); }
.nav a[aria-current="page"] { color: var(--blanc); border-bottom-color: #f0a800; font-weight: 600; }
.nav .separateur { width: 1px; background: #3b4e75; margin: .45rem .4rem; }

main { max-width: 1320px; margin: 0 auto; padding: 1.2rem; }

h1 { font-size: 1.45rem; margin: 0 0 .2rem; color: var(--marine); }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; color: var(--marine); }
.sous-titre { margin: 0 0 1rem; color: var(--gris); }

/* ---------- Messages ---------- */
.message { border-radius: 6px; padding: .7rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.message ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.message-succes { background: var(--vert-fond); border-color: #a9d18e; color: #1e4d12; }
.message-erreur { background: var(--rouge-fond); border-color: #e6808a; color: var(--rouge); }
.message-info { background: var(--jaune-fond); border-color: #e6c35c; color: #5c4300; }
.telechargements { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Blocs ---------- */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.carte > h2:first-child { margin-top: 0; }

.grille-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.tuile {
  display: block; background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--marine);
  border-radius: 8px; padding: .9rem 1rem; text-decoration: none; color: var(--texte);
}
.tuile:hover { border-left-color: #f0a800; box-shadow: 0 2px 8px #1f386422; }
.tuile strong { display: block; color: var(--marine); font-size: 1.05rem; }
.tuile span { color: var(--gris); font-size: .9rem; }

/* ---------- Formulaires ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: .2rem; min-width: 9rem; }
.champ.large { min-width: 18rem; flex: 1; }
label, .etiquette { font-size: .85rem; font-weight: 600; color: var(--marine); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], input[type="file"], select, textarea {
  font: inherit; padding: .42rem .55rem; border: 1px solid #9aa7bd; border-radius: 5px; background: var(--blanc); color: var(--texte);
  max-width: 100%;
}
textarea { min-height: 5rem; width: 100%; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rouge); background: #fff5f6; }
.erreur-champ { color: var(--rouge); font-size: .85rem; }
.aide { color: var(--gris); font-size: .85rem; margin: .2rem 0 0; }

.bouton {
  font: inherit; font-weight: 600; cursor: pointer; padding: .48rem 1rem; border-radius: 5px;
  border: 1px solid var(--marine); background: var(--marine); color: var(--blanc); text-decoration: none; display: inline-block;
}
.bouton:hover { background: #2b4a80; }
.bouton.secondaire { background: var(--blanc); color: var(--marine); }
.bouton.secondaire:hover { background: #e9eef7; }
.bouton.danger { background: #a61b25; border-color: #a61b25; }
.bouton.danger:hover { background: #c22530; }
.bouton.lien { background: none; border: none; color: #dbe4f3; padding: .2rem .4rem; text-decoration: underline; font-weight: 400; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }

/* ---------- Compteurs de sélection ---------- */
.compteurs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; }
.compteur { background: var(--bande); border: 1px solid var(--trait); border-radius: 6px; padding: .45rem .8rem; min-width: 9rem; }
.compteur dt { font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; }
.compteur dd { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
dl.compteurs { margin: .9rem 0; }

/* ---------- Tableaux ---------- */
/* position: relative — les textes réservés aux lecteurs d'écran (.sr, en position absolue) restent rognés par la zone défilante. */
.defilement { position: relative; overflow-x: auto; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption { text-align: left; padding: .5rem .7rem; font-weight: 600; color: var(--marine); caption-side: top; }
th, td { padding: .38rem .6rem; border-bottom: 1px solid #e3e8f1; text-align: left; vertical-align: middle; }
thead th { background: var(--marine); color: var(--blanc); font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
thead th a { color: var(--blanc); }
tbody tr:nth-child(even) { background: var(--bande); }
tbody tr.cochee { background: var(--vert-fond); }
tbody tr.en-erreur { background: var(--rouge-fond); }
tfoot td, tfoot th { font-weight: 700; background: #dde8f7; border-top: 2px solid var(--marine); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.centre { text-align: center; }
.case { width: 2.4rem; text-align: center; }
.case input { width: 1.1rem; height: 1.1rem; }
td input[type="text"] { width: 100%; min-width: 7rem; padding: .25rem .4rem; }
td.alerte { background: var(--rouge-fond); color: var(--rouge); font-weight: 700; }
.vide { padding: 1.4rem; text-align: center; color: var(--gris); }

.etiquette-statut { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #e3e8f1; color: #2b3954; }
.statut-PAYEE { background: var(--vert-fond); color: var(--vert); }
.statut-REJETEE, .statut-ANNULEE { background: var(--rouge-fond); color: var(--rouge); }
.statut-SAISIE, .statut-TRAITEE, .statut-LIQUIDEE, .statut-RECUE { background: var(--jaune-fond); color: #5c4300; }

.pagination { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: .9rem 0 0; }
.pagination a, .pagination span { display: block; padding: .3rem .65rem; border: 1px solid var(--trait); border-radius: 4px; background: var(--blanc); text-decoration: none; }
.pagination [aria-current="page"] span { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.pagination .inactif span { color: #9aa7bd; }

/* ---------- Tableau de bord ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin: 1rem 0; }
.kpi { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--marine); border-radius: 8px; padding: .7rem .9rem; }
.kpi .libelle { font-size: .75rem; text-transform: uppercase; color: var(--gris); letter-spacing: .03em; }
.kpi .valeur { font-size: 1.25rem; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
.kpi .detail { font-size: .85rem; color: var(--gris); }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; }
.deux-colonnes > * { min-width: 0; }
.graphique svg { width: 100%; height: auto; display: block; }

/* ---------- Connexion ---------- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.boite-connexion { background: var(--blanc); border: 1px solid var(--trait); border-top: 6px solid var(--marine); border-radius: 10px; padding: 1.6rem 1.8rem; width: 100%; max-width: 24rem; }
.boite-connexion .champ { margin-bottom: .8rem; }
.boite-connexion input { width: 100%; }

/* ---------- Boîte de confirmation ---------- */
dialog { border: 1px solid var(--trait); border-radius: 10px; padding: 1.2rem 1.4rem; max-width: 34rem; width: calc(100% - 2rem); }
dialog::backdrop { background: #10182b99; }
dialog h2 { margin-top: 0; }
dialog p { white-space: pre-line; }

.masque { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gras { font-weight: 700; }
.discret { color: var(--gris); font-size: .88rem; }
.marge-haut { margin-top: 1rem; }
.pleine-largeur { width: 100%; }
fieldset { border: 1px solid var(--trait); border-radius: 6px; margin: 0 0 1rem; padding: .8rem 1rem; min-width: 0; }
legend { font-weight: 700; color: var(--marine); padding: 0 .4rem; }
.grille-param { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .8rem 1.2rem; }

@media (max-width: 720px) {
  html { font-size: 14px; }
  main { padding: .8rem; }
  .nav ul { padding: 0 .4rem; }
  .nav a { padding: .5rem .55rem; }
  .champ { min-width: 100%; }
  .bandeau-haut { padding: .5rem .8rem; }
}

@media print {
  .bandeau, .nav, .filtres, .actions, .bouton { display: none !important; }
  body { background: var(--blanc); }
}