/* ===== Contrôle Matériel — styles ===== */
/* Charte H2 Logistique : bleu / rouge / noir */
:root {
  --bleu: #1e62d0;
  --bleu-fonce: #0f2557;
  --rouge-h2: #e5231b;
  --fond: #f1f5f9;
  --carte: #ffffff;
  --texte: #0f172a;
  --texte-2: #64748b;
  --bord: #e2e8f0;
  --vert: #16a34a;
  --rouge: #dc2626;
  --orange: #d97706;
  --rayon: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
}

/* ---- En-tête + navigation ---- */
header {
  background: #fff;
  border-bottom: 1px solid var(--bord);
  padding: 10px 16px;
}
header .titre {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
header .logo {
  height: 34px;
  width: auto;
  display: block;
}
header .titre span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte-2);
  text-align: right;
}
nav {
  background: var(--bleu-fonce);
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
nav .liens {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
nav a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
nav a.actif { background: var(--bleu); color: #fff; }
nav a:hover { color: #fff; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

h2 { font-size: 1.2rem; margin-bottom: 14px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 18px;
}

/* ---- Formulaire ---- */
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.champ { margin-bottom: 16px; }

input[type="text"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 1.05rem;
  border: 1.5px solid var(--bord);
  border-radius: 10px;
  background: #fff;
  color: var(--texte);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
textarea { resize: vertical; }
.optionnel { color: var(--texte-2); font-weight: 400; font-size: 0.85rem; }

/* Boutons radio "poste" en gros boutons */
.choix-poste { display: flex; gap: 10px; }
.choix-poste input { position: absolute; opacity: 0; }
.choix-poste label {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border: 1.5px solid var(--bord);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  background: #fff;
  margin-bottom: 0;
}
.choix-poste input:checked + label {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}

/* Lignes matériel avec + / − */
.ligne-materiel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bord);
}
.ligne-materiel:last-child { border-bottom: none; }
.ligne-materiel .nom { font-weight: 600; }
.ligne-materiel .ref { color: var(--texte-2); font-size: 0.85rem; }

.compteur { display: flex; align-items: center; gap: 8px; }
.compteur button {
  width: 37px; height: 37px;
  font-size: 1.2rem;
  border: 1.5px solid var(--bord);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: var(--texte);
  line-height: 1;
}
.compteur button:active { background: var(--fond); }
.compteur input {
  width: 58px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 3px;
}
/* masque les flèches natives */
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button { -webkit-appearance: none; }
.compteur input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Saisie Oui / Non (Matériel 1) */
.oui-non { display: flex; gap: 8px; }
.oui-non button {
  min-width: 62px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid var(--bord);
  border-radius: 8px;
  background: #fff;
  color: var(--texte);
  cursor: pointer;
}
.oui-non .btn-oui.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.oui-non .btn-non.actif { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.btn-principal {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--bleu);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  /* toujours visible en bas d'écran pendant la saisie */
  position: sticky;
  bottom: 12px;
  box-shadow: 0 4px 14px rgba(15, 37, 87, 0.35);
}
.btn-principal:hover { background: var(--bleu-fonce); }
.btn-principal:disabled { background: var(--texte-2); cursor: wait; }

.btn-secondaire {
  padding: 10px 16px;
  font-weight: 600;
  border: 1.5px solid var(--bord);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: var(--texte);
}
.btn-danger { color: var(--rouge); border-color: #fecaca; }

/* ---- Encaissement : modes de paiement (grille de gros boutons) ---- */
.choix-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.choix-mode input { position: absolute; opacity: 0; pointer-events: none; }
.choix-mode label {
  text-align: center;
  padding: 14px 8px;
  border: 1.5px solid var(--bord);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  background: #fff;
  margin-bottom: 0;
}
.choix-mode input:checked + label {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}
/* « Non payé » ressort en rouge quand sélectionné */
#mode-nonpaye:checked + label {
  background: var(--rouge);
  border-color: var(--rouge);
}
.choix-mode input:focus-visible + label { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* Reste à encaisser (calculé) */
.reste-a-payer { font-size: 1.05rem; color: var(--texte-2); margin-top: 4px; }
.reste-a-payer strong { color: var(--bleu-fonce); font-size: 1.15rem; }
.reste-alerte { color: var(--rouge); font-weight: 700; }

/* Signature (zone réduite) */
.signature-canvas {
  width: 100%;
  height: 120px;
  border: 1.5px dashed var(--bord);
  border-radius: 10px;
  background: #fff;
  touch-action: none;
  display: block;
}
.signature-apercu { margin-top: 10px; }
.signature-apercu img {
  max-width: 220px;
  max-height: 90px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: #fff;
}
.signature-label { font-size: 0.85rem; color: var(--texte-2); font-weight: 600; }
.sans-signature { margin-top: 10px; font-size: 0.85rem; color: var(--texte-2); font-style: italic; }

/* Réserve & commentaires client */
.obligatoire { color: var(--rouge); font-weight: 600; font-size: 0.85rem; }
.reserve {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: pre-wrap;
}
.reserve-label { color: var(--rouge); font-weight: 600; }

/* Historique paiements */
.montants-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 4px 0 8px;
  font-size: 0.95rem;
}
.montants-ligne .reste-encaisse strong { color: var(--vert); }
.mode-ligne { margin-bottom: 6px; }
.badge.mode { background: #ede9fe; color: #5b21b6; }
.badge.mode-nonpaye { background: #fee2e2; color: #b91c1c; }
.total-periode {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.filtre-champ {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--texte-2);
  font-weight: 600;
  gap: 4px;
}
.filtre-champ input, .filtre-champ select { min-height: 44px; }

/* ---- Onglet QR Code (avis clients) ---- */
.qr-carte { text-align: center; }
.qr-intro { color: var(--texte-2); margin: 6px 0 16px; font-size: 0.98rem; }
.qr-affiche {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--bord);
  margin: 0 auto 16px;
  display: block;
  background: #fff;
}
.qr-carte .btn-principal { position: static; box-shadow: none; max-width: 420px; margin: 0 auto; }

/* ---- Messages ---- */
.message {
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 600;
  display: none;
}
.message.succes { display: block; background: #dcfce7; color: #14532d; }
.message.erreur { display: block; background: #fee2e2; color: #7f1d1d; }

/* ---- Historique ---- */
.filtres {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.filtres select { width: auto; min-width: 200px; }

.semaine-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.semaine-nav button {
  min-width: 46px;
  min-height: 46px;
  font-size: 1rem;
}
.semaine-nav button:disabled { opacity: 0.35; cursor: default; }
#semaine-libelle { font-weight: 600; font-size: 0.95rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.commentaire {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.controle-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.btn-petit { padding: 8px 12px; font-size: 0.85rem; }

.controle-carte { margin-bottom: 12px; }
.controle-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.controle-entete .quand { color: var(--texte-2); font-size: 0.9rem; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge.camion { background: #dbeafe; color: var(--bleu-fonce); }
.badge.poste { background: var(--fond); color: var(--texte-2); }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
th { color: var(--texte-2); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
td.nombre, th.nombre { text-align: right; }

.ecart-negatif { color: var(--rouge); font-weight: 700; }
.ecart-positif { color: var(--vert); font-weight: 700; }
.ecart-neutre { color: var(--texte-2); }
.alerte-manquant { color: var(--orange); font-weight: 700; }

.vide {
  text-align: center;
  color: var(--texte-2);
  padding: 40px 0;
}

/* ---- Admin : listes ---- */
.ligne-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bord);
}
.ligne-admin:last-child { border-bottom: none; }
.ligne-admin .sous-texte { color: var(--texte-2); font-size: 0.85rem; }
.ligne-admin .actions { display: flex; gap: 8px; }
.ligne-admin .actions button { min-height: 44px; }

.edition {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
.edition input { flex: 1 1 140px; }
.edition input.petit { flex: 0 0 100px; }
.edition .actions { display: flex; gap: 8px; }

.ajout-ligne { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ajout-ligne input { flex: 1 1 160px; }
.ajout-ligne input.petit { flex: 0 0 110px; }
.ajout-ligne button { min-height: 46px; }

/* ---- Modale d'édition ---- */
.modal-editer { border: none; border-radius: var(--rayon); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); }
.modal-editer::backdrop { background: rgba(0, 0, 0, 0.5); }
.modal-content { padding: 24px; }
.modal-content h3 { margin-bottom: 18px; font-size: 1.1rem; }
.modal-content label { margin-bottom: 14px; display: block; }
.modal-content input, .modal-content textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; font-family: inherit; font-size: 0.95rem; }
.modal-content textarea { resize: vertical; }
.label-quantite { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.label-quantite input { width: 100px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.modifie { font-size: 0.85rem; color: var(--texte-2); margin-top: 8px; font-style: italic; }

/* ---- Mobile first : ajustements petits écrans ---- */
@media (max-width: 560px) {
  main { padding: 14px 10px 40px; }
  .carte { padding: 14px; }
  .filtres select { width: 100%; min-width: 0; }
  .semaine-nav { width: 100%; justify-content: space-between; }
  header { padding: 8px 12px; }
  header .logo { height: 28px; }
  header .titre span { font-size: 0.8rem; }
  nav { padding: 8px 10px; }
  nav a { padding: 8px 11px; font-size: 0.9rem; }
  th, td { padding: 8px 6px; font-size: 0.9rem; }
  .ligne-admin .actions { width: 100%; }
  .ligne-admin .actions button { flex: 1; }
  .controle-actions { justify-content: stretch; }
  .controle-actions button { width: 100%; }
}

/* ---- Photos du contrôle (zones à photographier) ---- */
#grille-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.zone-photo {
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  padding: 10px;
  text-align: center;
}
.zone-photo .zone-nom { font-weight: 600; margin-bottom: 8px; }
.zone-photo .miniature-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* ---- Capture caméra (vue plein écran) ---- */
.capture-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.capture-overlay video,
.capture-overlay .apercu {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.capture-overlay canvas { display: none; }
.capture-overlay .capture-erreur {
  color: #fff;
  background: var(--rouge);
  padding: 12px 16px;
  border-radius: var(--rayon);
  margin: 16px;
  text-align: center;
}
.capture-actions {
  display: flex;
  gap: 10px;
  padding: 16px;
}

.photos-controle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.photo-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--texte-2);
  text-decoration: none;
}
.photo-zone img {
  width: 70px;
  height: 55px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--bord);
}
.precision-obligatoire { color: var(--orange); font-weight: 600; font-size: 0.85rem; }