/* Contraste élevé (éclairage de stand), gros boutons, utilisable d'une main. */
:root {
  --fond: #000;
  --texte: #fff;
  --doux: #c8c8c8;
  --carte: #161616;
  --bord: #5a5a5a;
  --primaire: #ffd400;
  --sur-primaire: #000;
  --ok: #2bd96b;
  --err: #ff4d4d;
  --att: #ffa31a;
  --rayon: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body {
  font: 18px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}
main { padding: 0 16px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 28px; margin: 24px 0 12px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); margin: 20px 0 8px; }
[hidden] { display: none !important; }

#barre {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: #000; border-bottom: 2px solid var(--bord);
}
.pastille { font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 15px; }
.pastille.en { background: var(--ok); color: #000; }
.pastille.hors { background: var(--err); color: #000; }
.compteur { background: transparent; color: var(--texte); border: 2px solid var(--bord); border-radius: 999px; padding: 4px 10px; font-size: 15px; font-weight: 700; }
.compteur.attente { border-color: var(--att); color: var(--att); }
.qui { margin-left: auto; font-size: 14px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

.bandeau { background: var(--primaire); color: #000; padding: 10px 16px; font-weight: 600; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.bandeau.rouge { background: var(--err); }
.bandeau button { background: #000; color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 16px; font-weight: 700; }

button, .bouton, .bouton-fichier { font: inherit; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; }
.gros { width: 100%; min-height: 60px; font-size: 21px; font-weight: 800; border-radius: var(--rayon); border: 2px solid var(--bord); background: var(--carte); color: var(--texte); }
.moyen { min-height: 52px; padding: 12px 14px; font-size: 17px; font-weight: 700; border-radius: var(--rayon); border: 2px solid var(--bord); background: var(--carte); color: var(--texte); }
.primaire { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
.lien { background: none; border: 0; color: var(--doux); text-decoration: underline; padding: 16px 0; font-size: 15px; }
button:active, .bouton:active { transform: scale(.98); }
button:disabled { opacity: .5; }

.ligne-boutons { display: flex; gap: 10px; margin: 12px 0; }
.ligne-boutons > * { flex: 1; }
.pile { display: grid; gap: 10px; }

.champ { display: block; margin: 12px 0; font-weight: 700; }
.champ input, .champ textarea, .filtre {
  display: block; width: 100%; margin-top: 6px; font-size: 20px; padding: 14px; border-radius: 12px;
  border: 2px solid var(--bord); background: #0b0b0b; color: var(--texte);
}
.champ input:focus, .champ textarea:focus, .filtre:focus { outline: 3px solid var(--primaire); border-color: var(--primaire); }
.champ input:user-invalid { border-color: var(--err); }
.pin { display: block; width: 100%; font-size: 34px; letter-spacing: .4em; text-align: center; padding: 14px; margin: 10px 0; border-radius: 12px; border: 2px solid var(--bord); background: #0b0b0b; color: #fff; }

.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button {
  min-height: 48px; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--bord);
  background: var(--carte); color: var(--texte); font-size: 17px; font-weight: 600;
}
.choix button[aria-pressed="true"] { background: var(--primaire); color: #000; border-color: var(--primaire); font-weight: 800; }
.choix.entite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.choix.entite button { min-height: 72px; padding: 8px 4px; border-radius: var(--rayon); font-size: 16px; font-weight: 800; hyphens: manual; }
.choix.note button { min-width: 72px; min-height: 64px; font-size: 26px; font-weight: 900; border-radius: var(--rayon); }

details.plus { margin: 8px 0; border: 2px solid var(--bord); border-radius: var(--rayon); padding: 6px 12px; }
details.plus summary { font-weight: 700; min-height: 40px; line-height: 40px; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; padding: 12px; border: 2px solid var(--bord); border-radius: var(--rayon); font-size: 15px; }
.consent input { width: 30px; height: 30px; flex: none; accent-color: var(--primaire); }

.actions { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 0; background: linear-gradient(transparent, #000 30%); }
.erreur { color: var(--err); font-weight: 700; min-height: 1em; }
.alerte { background: var(--att); color: #000; padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.aide { color: var(--doux); font-size: 15px; }
.apercu { max-width: 100%; max-height: 160px; border-radius: 12px; border: 2px solid var(--bord); }

.liste { list-style: none; padding: 0; margin: 8px 0; }
.liste li { border: 2px solid var(--bord); border-radius: var(--rayon); padding: 12px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.liste .nom { font-weight: 800; }
.liste .sous { color: var(--doux); font-size: 15px; grid-column: 1 / -1; }
.statut { font-size: 13px; font-weight: 800; padding: 3px 8px; border-radius: 999px; align-self: start; }
.statut.local, .statut.envoi { background: var(--att); color: #000; }
.statut.envoye { background: var(--ok); color: #000; }
.statut.erreur, .statut.a_verifier { background: var(--err); color: #000; }
.liste button { grid-column: 1 / -1; }

.infos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; }
.infos dt { color: var(--doux); }
.infos dd { margin: 0; font-weight: 700; word-break: break-all; }

#onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: #000; border-top: 2px solid var(--bord); padding-bottom: env(safe-area-inset-bottom);
}
#onglets a { color: var(--texte); text-decoration: none; text-align: center; font-weight: 800; font-size: 18px; padding: 20px 0; }
#onglets a[aria-current="page"] { color: #000; background: var(--primaire); }

.scanner { position: fixed; inset: 0; z-index: 20; background: #000; display: flex; flex-direction: column; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.scanner video { flex: 1; width: 100%; object-fit: cover; border-radius: var(--rayon); border: 3px solid var(--primaire); min-height: 0; }
#scan-msg { text-align: center; font-weight: 800; margin: 0; }

dialog { background: var(--carte); color: var(--texte); border: 2px solid var(--primaire); border-radius: var(--rayon); max-width: 92vw; padding: 18px; }
dialog::backdrop { background: rgba(0,0,0,.75); }
dialog .actions { position: static; background: none; grid-template-columns: 1fr; }

.stand-tableau { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 16px; }
.stand-tableau th, .stand-tableau td { border-bottom: 1px solid var(--bord); padding: 8px 6px; text-align: left; }
.stand-tableau td.n, .stand-tableau th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.tuile { border: 2px solid var(--bord); border-radius: var(--rayon); padding: 10px; text-align: center; }
.tuile b { display: block; font-size: 28px; }

/* ===================== Thèmes par société =====================
   Le thème suit l'entité choisie dans le formulaire (html[data-theme]).
   HomeSolutions : charte du site homesolutions.ma (bleu nuit #000C49, cyan #00ABEC, Montserrat).
   ProSound      : charte du site prosound.ma (noir studio #0e0e0f, orange signal #ff8600, Archivo).
   Les deux      : bandeau partagé, accent blanc. Contraste ≥ 7:1 sur les accents. */
@font-face { font-family: "Montserrat HS"; src: url("fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo PS"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root { --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --hs-nuit: #000C49; --hs-profond: #070B26; --hs-cyan: #00ABEC; --hs-bleu: #293794; --ps-noir: #0e0e0f; --ps-surface: #1a1a1c; --ps-filet: #2a2a2d; --ps-orange: #ff8600; }
body { font-family: var(--police); transition: background-color .25s ease; }

html[data-theme="hs"] {
  --fond: var(--hs-profond); --carte: #0d1650; --bord: #3a4a9e; --doux: #c3c9ea;
  --primaire: var(--hs-cyan); --sur-primaire: var(--hs-nuit); --police: "Montserrat HS", Montserrat, system-ui, sans-serif;
}
html[data-theme="ps"] {
  --fond: var(--ps-noir); --carte: var(--ps-surface); --bord: #4a4a4f; --doux: #c9c7c2;
  --primaire: var(--ps-orange); --sur-primaire: var(--ps-noir); --police: "Archivo PS", Archivo, system-ui, sans-serif;
}
html[data-theme="both"] { --primaire: #ffffff; --sur-primaire: #000; }
html[data-theme="hs"] body, html[data-theme="hs"] #barre, html[data-theme="hs"] #onglets { background: var(--hs-profond); }
html[data-theme="ps"] body, html[data-theme="ps"] #barre, html[data-theme="ps"] #onglets { background: var(--ps-noir); }
html[data-theme="hs"] .actions { background: linear-gradient(transparent, var(--hs-profond) 30%); }
html[data-theme="ps"] .actions { background: linear-gradient(transparent, var(--ps-noir) 30%); }
html[data-theme="ps"] h2 { font-stretch: 112%; letter-spacing: .1em; }

/* bandeau de marque sous la barre d'état */
.marque { display: flex; align-items: center; justify-content: center; gap: 18px; height: 56px; padding: 0 16px; background: #000; border-bottom: 3px solid var(--bord); }
.marque img { height: 32px; width: auto; display: block; }
.marque .logo-ps { height: 30px; }
.marque .sep { width: 2px; height: 30px; background: #555; }
html[data-theme="hs"] .marque { background: var(--hs-nuit); border-bottom-color: var(--hs-cyan); }
html[data-theme="ps"] .marque { background: var(--ps-noir); border-bottom-color: var(--ps-orange); }
html[data-theme="both"] .marque { background: linear-gradient(90deg, var(--hs-nuit) 0 50%, var(--ps-noir) 50% 100%); border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--hs-cyan) 0 50%, var(--ps-orange) 50% 100%) 1; }
html[data-theme="hs"] .marque .logo-ps, html[data-theme="hs"] .marque .sep { display: none; }
html[data-theme="ps"] .marque .logo-hs, html[data-theme="ps"] .marque .sep { display: none; }
html[data-theme="hs"] .marque .logo-hs { height: 34px; }
html[data-theme="ps"] .marque .logo-ps { height: 38px; }

/* boutons d'entité : toujours aux couleurs de leur société */
.choix.entite button[data-cle="hs"] { background: var(--hs-nuit); border-color: var(--hs-bleu); color: #fff; font-family: "Montserrat HS", sans-serif; }
.choix.entite button[data-cle="ps"] { background: var(--ps-noir); border-color: #4a4a4f; color: #fff; font-family: "Archivo PS", sans-serif; font-stretch: 110%; }
.choix.entite button[data-cle="both"] { background: linear-gradient(135deg, var(--hs-nuit) 0 50%, var(--ps-noir) 50% 100%); border-color: #666; color: #fff; }
.choix.entite button[data-cle="hs"][aria-pressed="true"] { background: var(--hs-cyan); border-color: var(--hs-cyan); color: var(--hs-nuit); }
.choix.entite button[data-cle="ps"][aria-pressed="true"] { background: var(--ps-orange); border-color: var(--ps-orange); color: var(--ps-noir); }
.choix.entite button[data-cle="both"][aria-pressed="true"] { background: linear-gradient(135deg, var(--hs-cyan) 0 50%, var(--ps-orange) 50% 100%); border-color: #fff; color: #000; }
html[data-theme="both"] #btn-ok { background: linear-gradient(90deg, var(--hs-cyan), var(--ps-orange)); border-color: transparent; color: #000; }

/* liste : repère de couleur par société */
.liste li[data-entite="hs"] { border-left: 8px solid var(--hs-cyan); }
.liste li[data-entite="ps"] { border-left: 8px solid var(--ps-orange); }
.liste li[data-entite="both"] { border-left: 8px solid; border-image: linear-gradient(var(--hs-cyan) 0 50%, var(--ps-orange) 50% 100%) 1; }