/* Constats de matériel — CSS maison unique. Mobile d'abord : l'opérateur est
   debout, sur téléphone, gants possibles — cibles larges, contrastes forts. */
* { box-sizing: border-box; }
:root {
  --encre: #14212b; --papier: #f5f6f7; --carte: #ffffff;
  --accent: #0a5c36; --accent-clair: #e4f2ea;
  --alerte: #a4230f; --alerte-clair: #fbe9e5;
  --attention: #8a6d00; --attention-clair: #fdf6de;
  --bord: #c7ccd1;
}
body { margin: 0; font: 16px/1.45 system-ui, sans-serif; color: var(--encre);
       background: var(--papier); }
main { padding: 12px; max-width: 1080px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: .4em 0; }
h2 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
h3 { font-size: 1rem; margin: .3em 0; }
a { color: var(--accent); }

.entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--encre); color: #fff; padding: 10px 14px; }
.entete a { color: #fff; text-decoration: none; padding: 8px 6px; }
.entete nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marque { font-weight: 700; font-size: 1.1rem; }
.compteur { background: var(--attention); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-weight: 700; }
.compteur.zero { background: var(--accent); }

button, .bouton { font: inherit; min-height: 48px; padding: 10px 18px;
  border-radius: 10px; border: 2px solid var(--encre); background: var(--carte);
  color: var(--encre); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; }
button.principal, .bouton.principal { background: var(--accent); color: #fff;
  border-color: var(--accent); font-weight: 700; }
.bouton.actif { background: var(--encre); color: #fff; }
button.discret, .entete button.discret { min-height: auto; border: none;
  background: none; text-decoration: underline; padding: 4px; color: inherit;
  cursor: pointer; font: inherit; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { font: inherit; min-height: 46px; padding: 8px 10px;
  border: 2px solid var(--bord); border-radius: 8px; background: #fff;
  max-width: 100%; }
textarea { min-height: 90px; }
input.court { width: 90px; }
label { display: flex; flex-direction: column; gap: 4px; }

.carte { background: var(--carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 12px; margin: 10px 0; }
.rangee { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-ligne { display: inline; }
.formulaire-etroit { display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; }
.details, .discret { color: #47535c; font-size: .92rem; }
.vide { color: #47535c; font-style: italic; }
.liste-operations, .liste-simple { list-style: none; padding: 0; }
.liste-simple li { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.titre-carte { font-size: 1.1rem; font-weight: 700; display: block; }
.actions-page { display: flex; gap: 8px; flex-wrap: wrap; }

.bandeau { padding: 10px 14px; border-radius: 10px; border: 2px solid var(--bord);
  background: var(--carte); font-weight: 600; }
.bandeau-ok { border-color: var(--accent); background: var(--accent-clair); }
.bandeau-erreur { border-color: var(--alerte); background: var(--alerte-clair); }
.bandeau-attention { border-color: var(--attention); background: var(--attention-clair); }

.etiquette { display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: .85rem; font-weight: 700; background: #e4e7ea; }
.etiquette.ok { background: var(--accent-clair); color: var(--accent); }
.etiquette.alerte { background: var(--alerte-clair); color: var(--alerte); }

.tableau-defilant { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--carte); }
th, td { border: 1px solid var(--bord); padding: 8px 10px; text-align: left; }
th { background: #e9ecef; }

/* composant de sélection unifié (refonte v2 §1) */
.selecteur { position: relative; min-width: 220px; flex: 1 1 220px;
  max-width: 420px; }
.selecteur-recherche { width: 100%; }
.selecteur.choisi .selecteur-recherche { border-color: var(--accent); }
.selecteur-liste { list-style: none; margin: 2px 0 0; padding: 0;
  position: absolute; z-index: 30; left: 0; right: 0;
  background: var(--carte); border: 2px solid var(--bord); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  /* au plus 5 lignes visibles, défilement au-delà : 5 × 44px */
  max-height: 220px; overflow-y: auto; }
.selecteur-option { height: 44px; padding: 0 12px; display: flex;
  align-items: center; gap: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selecteur-option:hover, .selecteur-option.actif { background: var(--accent-clair); }
.selecteur-option input[type=checkbox] { min-height: auto; width: 22px;
  height: 22px; margin: 0; flex: none; }
.selecteur-vide { height: 44px; padding: 0 12px; display: flex;
  align-items: center; color: #47535c; font-style: italic; }
.selecteur-compte { display: block; margin-top: 4px; font-size: .92rem;
  font-weight: 700; color: var(--accent); }

/* écran de constat — une carte par ligne, réduite par défaut (refonte v2 §2) */
.materiel { font-size: 1.05rem; }
.ligne-constat { padding: 0; }
.ligne-constat > summary { list-style: none; cursor: pointer; display: flex;
  gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px;
  min-height: 48px; }
.ligne-constat > summary::-webkit-details-marker { display: none; }
.ligne-constat > summary .materiel { flex: 1 1 auto; font-weight: 700; }
.ligne-constat > summary .attendu { color: #47535c; white-space: nowrap; }
.ligne-constat[open] > summary { border-bottom: 1px solid var(--bord); }
.carte-ligne-corps { padding: 10px 12px 12px; }
.restant { margin: 2px 0 8px; }
.restant .depasse { color: var(--alerte); }
.rangee-etat { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  border: 2px solid var(--bord); border-left-width: 6px; border-radius: 10px;
  padding: 6px 8px; margin: 6px 0; }
.rangee-etat-libelle { flex: 1 1 90px; font-weight: 700; }
.rangee-etat input[type=number] { font-size: 1.3rem; width: 74px;
  text-align: center; }
button.pas { min-width: 52px; padding: 6px; font-size: 1.4rem; font-weight: 700; }
.rangee-preuves { flex-basis: 100%; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; }
.rangee-preuves .note { flex: 1 1 140px; min-height: 40px; font-weight: 400; }
.etat-bon { border-color: var(--accent); }
.etat-manquant, .etat-hors_service { border-color: var(--alerte); }
.etat-abime { border-color: var(--attention); }
.bouton-photo { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 60px; border: 2px dashed var(--bord);
  border-radius: 10px; cursor: pointer; font-size: 1.4rem; }
.photos-liste img { height: 56px; border-radius: 6px; margin-right: 4px; }
.chip { border-radius: 999px; padding: 3px 10px; font-size: .85rem; font-weight: 700; }
.chip.attente { background: var(--attention-clair); color: var(--attention); }
.chip.envoye { background: var(--accent-clair); color: var(--accent); }
.chip.ignore, .chip.refuse { background: var(--alerte-clair); color: var(--alerte); }
.tout-bon { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.kit > summary { cursor: pointer; padding: 8px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: 10px; margin: 10px 0 0; }
.existants summary, .complement summary { cursor: pointer; color: #47535c; }
.validation-zone { position: sticky; bottom: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.alerte-bord { border-left: 6px solid var(--alerte); }
.resume { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; }