/* Fluides ARS — interface mobile d'abord. */
:root { --bleu: #2999d6; --bleu-f: #1b6fa0; --fond: #f4f7fa; --texte: #1d2733; --gris: #6b7785; --ok: #1f8a4c; --orange: #d98200; --rouge: #c62f2f; --rayon: 10px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texte); background: var(--fond); }
a { color: var(--bleu-f); }
main { max-width: 860px; margin: 0 auto; padding: 12px 16px 96px; }
h1 { font-size: 1.35rem; margin: .4em 0 .6em; }
h2 { font-size: 1.08rem; margin: 1em 0 .5em; }
small, .discret { color: var(--gris); font-size: .86rem; }

.barre { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bleu); color: #fff; }
.barre .marque { color: #fff; font-weight: 700; text-decoration: none; flex: 1; }
.barre button#burger { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: 0 4px; min-height: 0; }
.btn-nouveau { color: var(--bleu-f); background: #fff; border-radius: 20px; padding: 6px 12px; text-decoration: none; font-weight: 600; font-size: .9rem; }
#menu { display: none; background: #fff; border-bottom: 1px solid #dde4ea; }
body.menu-ouvert #menu { display: block; }
#menu ul { list-style: none; margin: 0; padding: 4px 0; }
#menu li a, #menu .lien { display: block; padding: 12px 18px; text-decoration: none; color: var(--texte); text-align: left; width: 100%; }
@media (min-width: 900px) {
  #burger { display: none; }
  #menu { display: block; }
  #menu ul { display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
  #menu li a, #menu .lien { padding: 10px 12px; font-size: .92rem; }
}

.carte { background: #fff; border-radius: var(--rayon); padding: 14px; margin: 12px 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.carte.etroit { max-width: 420px; margin: 24px auto; }
details.carte > summary { cursor: pointer; font-weight: 600; }
details.carte[open] > summary { margin-bottom: 10px; }

label { display: block; margin: 10px 0; font-size: .92rem; color: #344150; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit; font-size: 16px; border: 1px solid #c5d0da; border-radius: 8px; background: #fff; }
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
label.case { display: flex; align-items: center; gap: 10px; }
label.case input { width: 22px; height: 22px; margin: 0; flex: none; }
.ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.ligne > label, .ligne > * { flex: 1 1 140px; }

button, .bouton { display: inline-block; min-height: 44px; padding: 10px 16px; font: inherit; font-weight: 600; border: 1px solid #c5d0da; border-radius: 8px; background: #fff;
  color: var(--texte); text-decoration: none; cursor: pointer; margin: 4px 0; }
button.principal, .bouton.principal { background: var(--bleu); border-color: var(--bleu); color: #fff; }
button.gros { width: 100%; padding: 16px; font-size: 1.05rem; }
button.danger { color: var(--rouge); border-color: var(--rouge); }
button.lien { border: 0; background: none; color: var(--bleu-f); padding: 6px 0; min-height: 0; font-weight: 500; }
button:disabled { opacity: .5; cursor: not-allowed; }
.gros-bouton { display: block; text-align: center; background: var(--bleu); color: #fff; padding: 18px; border-radius: var(--rayon); font-size: 1.1rem; font-weight: 700; text-decoration: none; margin: 10px 0; }
.gros-bouton.secondaire { background: #fff; color: var(--bleu-f); border: 2px solid var(--bleu); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; }
.flash.ok { background: #e3f5ea; color: #155c33; }
.flash.erreur { background: #fde8e8; color: #8c1f1f; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .8rem; font-weight: 600; background: #e5e9ee; color: #44505c; vertical-align: middle; }
.badge.ok { background: #e3f5ea; color: var(--ok); } .badge.orange { background: #fff1d9; color: #965a00; } .badge.rouge { background: #fde8e8; color: var(--rouge); }
ul.alertes { list-style: none; padding: 0; margin: 0; }
ul.alertes li { padding: 8px 10px; border-left: 4px solid var(--orange); background: #fff8ec; margin: 6px 0; border-radius: 4px; }
ul.alertes li.rouge { border-color: var(--rouge); background: #fdf0f0; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e6ebf0; vertical-align: top; font-size: .93rem; }
td.num, th.num { text-align: right; white-space: nowrap; }
table.liste td:last-child { text-align: right; }
.defile { overflow-x: auto; }
table.bilan th, table.bilan td { font-size: .8rem; white-space: nowrap; }
dl.grille { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 6px 12px; margin: 0; }
dl.grille dt { color: var(--gris); font-size: .9rem; } dl.grille dd { margin: 0; }
.recherche { display: flex; gap: 8px; } .recherche button { margin: 4px 0 0; }
.vignettes { display: flex; flex-wrap: wrap; gap: 8px; } .vignettes img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }

canvas.signature { width: 100%; height: 170px; border: 2px dashed #9fb2c3; border-radius: 8px; background: #fff; touch-action: none; display: block; margin-top: 6px; }

/* Parcours d'intervention */
ol.etapes { display: flex; list-style: none; padding: 0; margin: 0 0 10px; gap: 4px; overflow-x: auto; }
ol.etapes li { flex: 1; }
ol.etapes button { width: 100%; font-size: .78rem; padding: 6px 4px; min-height: 36px; margin: 0; border-radius: 6px; background: #e8eef3; border: 0; white-space: nowrap; }
ol.etapes li.actif button { background: var(--bleu); color: #fff; } ol.etapes li.fait button { background: #cfe6f5; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.tuile { text-align: left; min-height: 64px; margin: 0; font-weight: 600; }
.tuile small { font-weight: 400; }
.choix-gros { display: grid; gap: 6px; }
label.case.gros { background: #fff; border: 1px solid #c5d0da; border-radius: 8px; padding: 12px; margin: 0; }
label.case.gros.actif { border-color: var(--bleu); background: #eaf5fc; }
.ligne.radio > * { flex: 1; }
button.choix { width: 100%; }
button.choix.actif.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
button.choix.actif.ko { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.ligne-fluide { display: grid; grid-template-columns: 1.3fr .8fr 1.6fr auto; gap: 6px; align-items: center; margin: 6px 0; }
.ligne-fluide input, .ligne-fluide select { margin: 0; padding: 9px 6px; }
@media (max-width: 480px) { .ligne-fluide { grid-template-columns: 1fr 1fr auto; } .ligne-fluide select[data-k=bouteille_id] { grid-column: 1 / 3; } }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dde4ea; z-index: 5; }
.barre-bas button { flex: 1; margin: 0; max-width: 420px; }
.choisi { border-left: 4px solid var(--bleu); }
.menu-liste li { margin: 10px 0; }