:root {
  --orange: #e8590c;
  --orange-fonce: #b9470a;
  --texte: #1f2328;
  --discret: #5b6470;
  --fond: #ffffff;
  --fond-doux: #f6f7f9;
  --bord: #d8dce2;
  --info: #e8f1fb;
  --alerte: #fdecea;
  --avert: #fff4d6;
  --succes: #e7f6ec;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.55;
}
.largeur { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.entete { background: var(--orange); color: #fff; padding: .7rem 0; }
.marque { font-weight: 700; letter-spacing: .02em; }
.sous-marque { opacity: .9; margin-left: .4rem; }
main { padding: 1.5rem 1rem 2.5rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; }
a { color: var(--orange-fonce); }
p { margin: 0 0 1rem; }

button, .bouton {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: .35rem;
  padding: .6rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover { background: var(--orange-fonce); }
button.secondaire { background: #fff; color: var(--orange-fonce); border: 1px solid var(--orange); }
button.lien-bouton { background: none; color: var(--orange-fonce); padding: 0; text-decoration: underline; font-weight: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #1c64d1; outline-offset: 2px; }

input[type=text], input[type=email], input[type=password], input[type=file], select {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--bord);
  border-radius: .3rem;
  max-width: 100%;
}
#montant { width: 10rem; text-align: right; }
#code { width: 7rem; letter-spacing: .25em; font-size: 1.2rem; text-align: center; }
form.ligne, p.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
form.ligne p { margin: 0; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

.info, .erreur, .alerte, .avertissement, .succes, .resultat, .actuelle {
  padding: .8rem 1rem;
  border-radius: .35rem;
}
.actuelle { background: var(--fond-doux); font-weight: 600; }
.info { background: var(--info); }
.succes { background: var(--succes); }
.erreur, .alerte { background: var(--alerte); border-left: 4px solid #c62828; }
.avertissement { background: var(--avert); border-left: 4px solid #b7791f; }
.resultat { background: var(--fond-doux); border: 1px solid var(--bord); }

fieldset.situation { border: 1px solid var(--bord); border-radius: .35rem; padding: .6rem 1rem; margin: 0 0 1rem; }
fieldset.situation legend { font-weight: 600; padding: 0 .3rem; }
fieldset.situation label { margin-right: 1.2rem; }
.aide { background: var(--fond-doux); border-radius: .35rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.aide ul { margin: 0 0 .8rem; }
/* Captures de bulletin : jamais réduites (texte illisible), défilement horizontal si l'écran est trop étroit */
.aide figure { margin: .8rem 0 0; max-width: 100%; overflow-x: auto; }
.aide img { display: block; max-width: none; height: auto; border: 1px solid var(--bord); background: #fff; }
/* Bulletin complet au survol, au focus clavier et au toucher (js/bulletins.js) : fenêtre centrée qui tient dans l'écran */
.bulletin { color: var(--orange-fonce); text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
.bulletin:focus-visible { outline: 3px solid #1c64d1; outline-offset: 2px; }
.bulletin-fenetre {
  display: none;
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: .35rem;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .3);
  cursor: default;
}
.bulletin:hover > .bulletin-fenetre, .bulletin:focus > .bulletin-fenetre, .bulletin.ouvert > .bulletin-fenetre { display: block; }
.bulletin.ferme > .bulletin-fenetre { display: none; }
.bulletin .bulletin-fenetre img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  border: 0;
}
/* Aide selon la situation choisie (sans JavaScript) */
.formulaire:has(#s-retraite:checked) .aide-actif { display: none; }
.formulaire:has(#s-actif:checked) .aide-retraite { display: none; }

.pied { background: var(--fond-doux); border-top: 1px solid var(--bord); color: var(--discret); font-size: .85rem; padding: 1rem 0 1.5rem; }
.pied h2 { font-size: .95rem; margin-top: .3rem; }

/* Back-office */
body.admin .largeur { max-width: 80rem; }
body.admin.pleine-largeur .largeur { max-width: none; }
.menu { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-left: 1.5rem; }
.menu a { color: #fff; }
.entete .largeur { display: flex; align-items: center; flex-wrap: wrap; }
.entete form { margin-left: auto; }
.entete form button { background: rgba(255,255,255,.15); padding: .3rem .7rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--bord); padding: .35rem .5rem; text-align: left; vertical-align: top; }
th { background: var(--fond-doux); position: sticky; top: 0; }
td.nombre, th.nombre { text-align: right; white-space: nowrap; }
.etiquette { display: inline-block; font-size: .75rem; border-radius: .25rem; padding: 0 .35rem; background: var(--fond-doux); border: 1px solid var(--bord); white-space: nowrap; }
.etiquette.rouge { background: var(--alerte); border-color: #e3a5a5; }
.etiquette.jaune { background: var(--avert); border-color: #e4c77a; }
.etiquette.vert { background: var(--succes); border-color: #9fd3ae; }
.compteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.compteurs div { background: var(--fond-doux); border-radius: .35rem; padding: .5rem .8rem; }
.compteurs strong { display: block; font-size: 1.3rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
pre.mail { white-space: pre-wrap; background: var(--fond-doux); border: 1px solid var(--bord); padding: 1rem; border-radius: .35rem; font-size: .9rem; }
.cle-panneau { background: var(--info); padding: .8rem 1rem; border-radius: .35rem; margin-bottom: 1rem; }
.masque { display: none; }
.defile { overflow-x: auto; }
/* Grand tableau resserré (Suivi) : toutes les colonnes visibles dès 1 280 px de large, défilement horizontal en dessous */
table.serre { font-size: .8rem; line-height: 1.35; }
table.serre th, table.serre td { padding: .3rem .3rem; }
table.serre th { line-height: 1.2; }
table.serre th.nombre { white-space: normal; }
table.serre td.validation { min-width: 6.5rem; }
table.serre td.date { white-space: nowrap; }
table.serre td.email { overflow-wrap: anywhere; min-width: 9rem; }
table.serre .etiquette { font-size: .7rem; margin: 0 .15rem .15rem 0; }
table.serre .etiquette.bloc { display: table; }
table.serre .etiquette.long { white-space: normal; }
table.serre td.signalements { min-width: 7.5rem; }
table.serre td.validation button { font-size: .75rem; padding: .25rem .45rem; white-space: normal; line-height: 1.2; }
form.pile input[type=text], form.pile input[type=password] { width: 20rem; }
.cle-panneau label { margin-left: .6rem; }
.cle-panneau #cle-etat { margin: .6rem 0 0; }
.cle-panneau #cle-etat:empty { display: none; }