:root{
  --paper:#FBFCFD; --sheet:#FFFFFF; --ink:#141A22; --ink-2:#4C5868; --ink-3:#78889B;
  --rule:#C2CDD9; --rule-soft:#DFE6ED; --fill:#EDF2F7; --accent:#1B4F8A;
  --signal:#A32A1C; --signal-bg:#FBEFED; --todo-bg:#FDF3DC; --todo-line:#C08A1E;
  --ok:#1E7A3D; --ok-bg:#E8F5EC;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1218; --sheet:#161C24; --ink:#E7EDF4; --ink-2:#A8B6C6; --ink-3:#7C8CA0;
    --rule:#3A4655; --rule-soft:#2A3441; --fill:#1E2733; --accent:#7FB0E8;
    --signal:#E8897C; --signal-bg:#2B1B18; --todo-bg:#2A2415; --todo-line:#C8A34A;
    --ok:#7CD79C; --ok-bg:#123420;
  }
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; padding-bottom:48px;
}
h1,h2{margin:0;}
p{margin:8px 0;}
input, button{font-family:inherit; font-size:16px;} /* 16px : évite le zoom auto iOS Safari au focus */

/* ---------- barre d'état ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:10px 16px; background:var(--sheet); border-bottom:1px solid var(--rule-soft);
}
.topbar-titre{display:flex; align-items:baseline; gap:8px;}
.topbar-titre .co{font-weight:700; color:var(--accent); font-size:13px; text-transform:uppercase; letter-spacing:.08em;}
.topbar-titre .titre{font-weight:600;}
.topbar-etat{display:flex; align-items:center; gap:10px;}
.badge{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap;}
.badge-off{background:var(--signal-bg); color:var(--signal);}
.badge-on{background:var(--ok-bg); color:var(--ok);}
.badge-attente{background:var(--todo-bg); color:var(--todo-line);}
.badge-verrou{background:var(--signal-bg); color:var(--signal);}

/* ---------- écrans / cartes ---------- */
.ecran{max-width:820px; margin:0 auto; padding:16px;}
.carte{background:var(--sheet); border:1px solid var(--rule-soft); border-radius:8px; padding:24px; max-width:420px; margin:40px auto;}
.carte-login h1{font-size:20px; margin-bottom:4px;}
.carte-confirmation{text-align:center;}

.sheet{background:var(--sheet); border:1px solid var(--rule-soft); border-radius:8px; padding:20px; margin-bottom:16px;}
.head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:12px;}
.head h1{font-size:22px; line-height:1.15;}
.head .co{display:block; color:var(--accent); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px;}
.legal{font-size:12px; line-height:1.7; color:var(--ink-2); text-align:right;}
.tva{display:inline-block; margin-top:6px; padding:2px 7px; border:1px solid var(--rule); font-size:10.5px;}

/* ---------- onglets ---------- */
.tabs{display:flex; gap:4px; max-width:820px; margin:16px auto 0; padding:0 16px;}
.tab{flex:1; padding:12px; border:1px solid var(--rule-soft); background:var(--fill); color:var(--ink-2); font-weight:600; border-radius:6px 6px 0 0; cursor:pointer;}
.tab.active{background:var(--sheet); color:var(--ink); border-bottom-color:var(--sheet);}
.tab-panel{padding:16px 0;}

/* ---------- sections du bon ---------- */
section{margin-top:20px;}
h2.sec{
  display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--rule);
  padding-bottom:6px; margin-bottom:12px;
}
h2.sec .n{font-family:ui-monospace,monospace; color:var(--accent); font-size:11px;}
h2.sec.alert{border-bottom-color:var(--signal);}
h2.sec.alert .n{color:var(--signal);}

.grid{display:grid; gap:12px;}
.g2{grid-template-columns:1fr 1fr;}
.g21{grid-template-columns:2fr 1fr;}
@media (max-width:560px){ .g2, .g21{grid-template-columns:1fr;} }

.champ{display:flex; flex-direction:column; gap:4px; margin:8px 0;}
.champ .lab{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);}
.champ input{padding:10px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--paper); color:var(--ink); min-height:44px;}
.champ input:focus{outline:2px solid var(--accent); outline-offset:1px;}

/* ---------- tarifs ---------- */
.tarifs{border-top:1px solid var(--rule-soft);}
.tarif{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 4px; border-bottom:1px solid var(--rule-soft); cursor:pointer;}
.tarif input{width:22px; height:22px; flex:none;}
.tarif .nom{font-weight:500;}
.tarif .dots{flex:1; min-width:12px;}
.tarif .prix{font-family:ui-monospace,monospace; font-weight:600; font-size:15px; white-space:nowrap;}
.tarif .det{flex-basis:100%; padding-left:32px; font-size:12px; color:var(--ink-2);}
.tarif:has(input:checked){background:var(--fill); border-radius:6px;}

.total{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px; background:var(--fill); border-left:3px solid var(--accent); border-radius:4px;}
.total input{flex:1; max-width:140px; padding:8px; border:1px solid var(--rule); border-radius:4px; font-family:ui-monospace,monospace; font-weight:600;}
.total .eur{font-weight:600;}

/* ---------- cases à cocher ---------- */
.check{display:flex; align-items:flex-start; gap:10px; margin:10px 0; cursor:pointer;}
.check input{width:24px; height:24px; flex:none; margin-top:2px;}
.check-obligatoire{padding:12px; border-radius:6px; background:var(--fill);}
.radio-ligne{display:flex; flex-direction:column; gap:4px; margin:10px 0;}

.waiver{padding:14px; background:var(--signal-bg); border:1px solid var(--signal); border-left-width:3px; border-radius:4px; margin:12px 0;}

/* ---------- validation manuelle (champ obligatoire manquant) ---------- */
.champ.invalide input, .champ.invalide select{border-color:var(--signal); background:var(--signal-bg);}
.champ.invalide .lab{color:var(--signal);}
.check.invalide, .tarifs.invalide, .radio-ligne.invalide, .sign-zone.invalide{
  outline:2px solid var(--signal); outline-offset:2px; border-radius:6px; background:var(--signal-bg);
}
.stop{padding:12px 14px; background:var(--fill); border-left:3px solid var(--ink); border-radius:4px;}
.avertissement{padding:10px 12px; background:var(--todo-bg); border-left:3px solid var(--todo-line); font-size:13px; border-radius:4px; margin-top:8px;}

ul.points{margin:8px 0; padding-left:20px;}
ul.points li{margin:6px 0;}
.note{font-size:13px; color:var(--ink-2);}
.erreur{
  color:var(--signal); font-weight:600; font-size:14px; padding:10px; background:var(--signal-bg); border-radius:6px;
  white-space:normal; overflow-wrap:anywhere; /* liste de champs manquants longue : jamais coupée, toujours repliée */
}

/* ---------- bandeaux pleine largeur (brouillon, sync en attente, install iOS) ---------- */
.bandeau{max-width:820px; margin:16px auto 0; padding:14px 16px; border-radius:8px; font-size:14px; overflow-wrap:anywhere;}
.bandeau p{margin:0 0 8px;}
.bandeau p:last-child{margin-bottom:0;}
.bandeau .actions-signature{margin-top:10px;}
.bandeau-info{background:var(--fill); border:1px solid var(--rule); border-left:4px solid var(--accent);}
.bandeau-alerte{background:var(--signal-bg); border:1px solid var(--signal); border-left:4px solid var(--signal); font-weight:600;}

/* ---------- tableau relevés ---------- */
.tblwrap{overflow-x:auto;}
table{border-collapse:collapse; width:100%; min-width:420px; margin-top:8px;}
th,td{border:1px solid var(--rule); padding:6px; text-align:left; font-size:13px;}
th{background:var(--fill); font-weight:600; text-transform:uppercase; font-size:10.5px; color:var(--ink-2);}
td input{width:100%; border:none; background:transparent; padding:6px; min-height:36px; color:var(--ink);}

/* ---------- signature ---------- */
.sign-zone{margin:20px 0;}
.sign-zone .who{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin-bottom:6px;}
.pad-signature{
  width:100%; height:180px; touch-action:none; display:block;
  border:2px dashed var(--rule); border-radius:6px; background:var(--paper);
}
.actions-signature{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}

/* ---------- boutons ---------- */
.btn{
  padding:12px 18px; border:1px solid var(--rule); border-radius:6px; background:var(--sheet);
  color:var(--ink); font-weight:600; cursor:pointer; min-height:44px;
}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-large{width:100%; font-size:16px; padding:14px; margin-top:16px;}
.btn-lien{background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:8px 0; text-decoration:underline;}
.btn:active{filter:brightness(0.95);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- mode signature verrouillé ---------- */
.verrou-overlay{
  position:fixed; inset:0; background:rgba(20,26,34,.55); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
/* Piège classique : `display:flex` ci-dessus a la même spécificité que le
   `[hidden]{display:none}` de la feuille de style du navigateur et gagne par
   ordre de cascade — sans cette ligne, l'overlay masqué reste rendu et
   intercepte quand même les clics/taps derrière lui (repéré en test réel,
   Playwright/Chromium : bouton "Se connecter" injoignable). */
.verrou-overlay[hidden]{display:none;}
.verrou-overlay .carte{margin:0; width:100%;}

/* ---------- historique ---------- */
.liste-bons{display:flex; flex-direction:column; gap:8px;}
.ligne-bon{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--rule-soft); border-radius:6px;
}
.ligne-bon .infos{display:flex; flex-direction:column;}
.ligne-bon .numero{font-family:ui-monospace,monospace; font-weight:600;}
.ligne-bon .actions{display:flex; gap:8px; flex-wrap:wrap;}
.ligne-bon .champ-facture{padding:6px 8px; min-height:36px; font-size:14px; width:9.5em; border:1px solid var(--rule-soft); border-radius:6px;}
.ligne-bon .actions button{padding:6px 10px; min-height:36px; font-size:13px;}

@media print{
  .topbar, .tabs, .btn, .btn-lien{display:none !important;}
}