/* Console « Entrée à la carte » — pensée pour un comptoir : on y travaille
   debout, vite, et souvent avec quelqu'un qui attend de l'autre côté.
   Cibles larges, contraste franc, aucune ressource chargée de l'extérieur. */

:root{
  --ground:#edf3f8; --surface:#fff; --surface-2:#dfe9f2;
  --ink:#0b2233; --ink-2:#3b5568; --ink-3:#67819a;
  --rule:#cfdde8;
  --accent:#127abd; --accent-soft:#e3f0f9;   /* bouch-teal */
  --marine:#054162;                          /* bouch-marine */
  --ok:#3e7a55; --ok-soft:#dcebe1;
  --alerte:#a8402f; --alerte-soft:#f4dfdb;
  --attention:#8a6320; --attention-soft:#f2e6ce;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0a1721; --surface:#10212e; --surface-2:#172c3c;
    --ink:#e5edf3; --ink-2:#a6bccc; --ink-3:#7a92a5;
    --rule:#26394a;
    --accent:#5fb2e8; --accent-soft:#10293a;   /* bouch-teal eclairci */
    --marine:#054162;
    --ok:#77bc8e; --ok-soft:#1b2e23;
    --alerte:#e08472; --alerte-soft:#38211c;
    --attention:#d8ac5e; --attention-soft:#312715;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:60rem;margin:0 auto;padding:1.6rem 1rem 4rem}
a{color:var(--accent)}
h1{font-size:1.5rem;margin:0 0 .3rem;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:2rem 0 .6rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--rule)}
p.chapeau{color:var(--ink-2);margin:0 0 1.4rem}

/* ---------- barre du haut ---------- */
.barre{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.7rem 1rem;background:var(--surface);border-bottom:2px solid var(--ink)}
.marque{font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.barre nav{display:flex;gap:1rem;flex:1;flex-wrap:wrap}
.barre nav a{text-decoration:none;color:var(--ink-2);padding:.2rem 0}
.barre nav a:hover{color:var(--accent)}
.moi{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--ink-2)}
.jeton{background:var(--accent-soft);color:var(--accent);border-radius:2px;
  padding:.1em .5em;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}

/* ---------- champs et boutons ---------- */
.recherche{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
input[type=text],input[type=search]{flex:1;min-width:14rem;font-size:1.15rem;
  padding:.7rem .8rem;border:1px solid var(--rule);border-radius:3px;
  background:var(--surface);color:var(--ink);font-family:ui-monospace,monospace}
select,input[type=text].court{font-size:1rem;padding:.55rem .6rem;
  border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink)}
button{font-size:1rem;font-weight:600;padding:.7rem 1.2rem;border:0;border-radius:3px;
  background:var(--accent);color:#fff;cursor:pointer}
button.discret{background:var(--surface-2);color:var(--ink-2)}
button.danger{background:var(--alerte-soft);color:var(--alerte)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}

/* ---------- blocs ---------- */
.carte{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:1.1rem 1.2rem;margin:0 0 1rem}
.bandeau{padding:1rem 1.2rem;border-left:3px solid var(--accent);
  background:var(--surface);margin:0 0 1.4rem}
.bandeau.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.bandeau.alerte{border-left-color:var(--alerte);background:var(--alerte-soft)}
.bandeau.attention{border-left-color:var(--attention);background:var(--attention-soft)}
.bandeau p{margin:.2rem 0}

.etat{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.etat.libre{color:var(--ok)}
.etat.utilise{color:var(--alerte)}
.etat.rouvert{color:var(--attention)}

dl.fiche{display:grid;grid-template-columns:11rem 1fr;gap:.35rem 1rem;margin:.8rem 0 0}
dl.fiche dt{color:var(--ink-3);font-size:.85rem}
dl.fiche dd{margin:0;font-variant-numeric:tabular-nums}
code,.mono{font-family:ui-monospace,monospace}

/* ---------- tableaux ---------- */
.defile{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);
  border-radius:3px;margin:0 0 1.2rem}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--rule);
  white-space:nowrap}
th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface-2);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}
.pastille{font-size:.7rem;padding:.12em .5em;border-radius:2px;letter-spacing:.04em}
.pastille.ok{background:var(--ok-soft);color:var(--ok)}
.pastille.non{background:var(--alerte-soft);color:var(--alerte)}
.pastille.attente{background:var(--surface-2);color:var(--ink-3)}
/* Un ROLE n'est pas un succes : il se marque dans le bleu de l'identite,
   pas dans le vert des etats favorables. */
.pastille.role{background:var(--accent-soft);color:var(--accent);font-weight:600}
.pastille.role-second{background:var(--surface-2);color:var(--ink-2)}

/* ---------- chiffres du jour ---------- */
.chiffres{display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;margin:0 0 1.4rem}
.chiffres b{display:block;font-size:1.7rem;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chiffres span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- recherche d'annuaire ---------- */
#resultats{list-style:none;margin:.6rem 0 0;padding:0}
#resultats li{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.6rem .2rem;border-top:1px solid var(--rule)}
#resultats .qui{flex:1;min-width:12rem}
#resultats .upn{color:var(--ink-3);font-size:.82rem}

footer{max-width:60rem;margin:0 auto;padding:1.2rem 1rem 3rem;
  color:var(--ink-3);font-size:.78rem;border-top:1px solid var(--rule)}

@media (max-width:34rem){
  dl.fiche{grid-template-columns:1fr}
  dl.fiche dt{margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- recherche d'annuaire au fil de la frappe ---------- */
.etat-recherche{color:var(--ink-3);font-size:.85rem;margin:.5rem 0 0;min-height:1.2em}
tr.retire{opacity:.45}
form.ajout{display:flex;gap:.5rem;flex-wrap:wrap}
#resultats li:first-child{border-top:0}
#resultats strong{display:block}

.bouton-lien{display:inline-block;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:600;padding:.7rem 1.2rem;border-radius:3px}


/* =====================================================================
   Page de connexion — écran partagé, à la manière d'OASIS-Collections.
   Volet de présentation à gauche, volet d'authentification à droite.
   ===================================================================== */
body.page-connexion{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;
  margin:0;background:var(--surface)}

/* ---------- volet gauche ---------- */
.volet-presentation{
  background:var(--marine);
  color:#fff;display:flex;align-items:center;padding:3rem}
.presentation{max-width:28rem;margin-left:auto;margin-right:2rem}
.presentation .logo{width:76px;height:76px;border-radius:16px;display:grid;
  place-items:center;background:rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;margin-bottom:1.6rem}
.presentation .logo svg{width:46px;height:46px}
.presentation h1{font-size:2.1rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 .7rem;color:#fff}
.presentation .sous-titre{font-size:1rem;line-height:1.6;margin:0 0 1.8rem;
  color:rgba(255,255,255,.82)}
.presentation .atouts{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.presentation .atouts li{position:relative;padding-left:1.2rem;font-size:.94rem;
  color:rgba(255,255,255,.90)}
.presentation .atouts li::before{content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}

/* ---------- volet droit ---------- */
.volet-connexion{display:flex;align-items:center;padding:3rem;background:var(--surface)}
.boite-connexion{width:100%;max-width:24rem;margin-right:auto;margin-left:2rem}
.boite-connexion h2{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 .4rem;padding:0;border:0}
.boite-connexion .invite{color:var(--ink-2);margin:0 0 1.6rem}
.bouton-microsoft{display:block;width:100%;box-sizing:border-box;text-align:center;
  background:var(--accent);color:#fff;text-decoration:none;font-size:1rem;font-weight:600;
  padding:.95rem 1.2rem;border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.18)}
.bouton-microsoft:hover{background:#0e639b}
.bouton-microsoft:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.boite-connexion hr{border:0;border-top:1px solid var(--rule);margin:2rem 0 1.2rem}
.boite-connexion .mention{font-size:.84rem;color:var(--ink-3);margin:0 0 .5rem}
.boite-connexion .bandeau{margin:0 0 1.2rem}

@media (max-width:52rem){
  body.page-connexion{grid-template-columns:1fr}
  .volet-presentation{padding:2.4rem 1.5rem}
  .presentation{margin:0 auto}
  .presentation .atouts{display:none}
  .volet-connexion{padding:2.4rem 1.5rem}
  .boite-connexion{margin:0 auto}
}

/* ---------- transactions et captures d'impression ---------- */
a.filtre{display:inline-block;padding:.45rem .9rem;border:1px solid var(--rule);
  border-radius:3px;text-decoration:none;color:var(--ink-2);background:var(--surface);
  font-size:.9rem}
a.filtre.actif{background:var(--accent);color:#fff;border-color:var(--accent);
  font-weight:600}
.raison{display:block;color:var(--ink-3);font-size:.78rem;white-space:normal;
  max-width:22rem;margin-top:.15rem}

/* =====================================================================
   Rendu papier d'un coupon. On imite le rouleau thermique 80 mm : fond
   blanc quoi qu'il arrive — un ticket n'est jamais sombre — et police à
   chasse fixe, comme la tête d'impression.
   ===================================================================== */
.rouleaux{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;
  align-items:flex-start;margin:1.4rem 0}
.coupon-papier{margin:0;width:20rem;max-width:100%}
.papier{background:#fff;color:#111;padding:1.2rem .9rem 0;border-radius:2px;
  box-shadow:0 1px 3px rgba(11,34,51,.18),0 6px 18px rgba(11,34,51,.10);
  font-family:ui-monospace,"Courier New",monospace;font-size:.8rem;line-height:1.45}
.papier .l{white-space:pre-wrap;word-break:break-word}
.papier .l.centre{text-align:center}
.papier .l.gauche{text-align:left}
.papier .l.droite{text-align:right}
.papier .l.g{font-weight:700}
.papier .l.grand{font-size:1.05rem;letter-spacing:.02em}
.papier .l.large{font-size:1.25rem;font-weight:700;letter-spacing:.06em}
.papier .l.vide{height:.55rem}
.papier .l.alerte{color:#a8402f}
.papier .barres{display:flex;justify-content:center;margin:.5rem 0 .2rem}
.papier .codebarres{max-width:100%;height:auto}
/* La dentelure du massicot : le repère visuel qui dit « ici finit le ticket ». */
.papier .dentelure{height:14px;margin-top:.8rem;
  background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 12px);
  border-top:1px dashed #bbb}
.coupon-papier figcaption{color:var(--ink-3);font-size:.78rem;margin-top:.6rem;
  text-align:center}
.coupon-papier details{margin-top:.35rem;text-align:left}
.coupon-papier summary{cursor:pointer;color:var(--accent)}
.coupon-papier pre{background:var(--surface);border:1px solid var(--rule);
  padding:.7rem .8rem;margin:.5rem 0 0;font-size:.74rem;line-height:1.45;
  white-space:pre-wrap;max-height:18rem;overflow:auto;color:var(--ink)}

/* ---------- sélecteur de site ---------- */
.sites{display:flex;gap:.35rem;flex-wrap:wrap}
.sites .site{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.85rem;font-weight:600;color:var(--ink-2);background:var(--surface-2);
  border:1px solid transparent;border-radius:4px;padding:.32rem .7rem}
.sites .site:hover{color:var(--accent)}
.sites .site.actif{background:var(--accent);color:#fff}
.sites .site.attente{font-weight:500;color:var(--ink-3);background:transparent;
  border-color:var(--rule)}
.sites .site.attente.actif{background:var(--surface-2);color:var(--ink-2);
  border-color:var(--ink-3)}
.puce-prep{font-size:.66rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  opacity:.8}
.bandeau.preparation{border-left-color:var(--ink-3);background:var(--surface)}
.manques{margin:.5rem 0 0;padding-left:1.1rem}
.manques li{margin:.2rem 0;color:var(--ink-2);font-size:.92rem}

.deux-boutons{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.reimpr{display:flex;gap:.5rem;align-items:center;justify-content:center;
  margin:.5rem 0 .2rem}
.reimpr button{font-size:.8rem;padding:.35rem .7rem}
.bouton-mini{font-size:.8rem;padding:.35rem .7rem;border-radius:3px;text-decoration:none;
  background:var(--surface-2);color:var(--ink-2);font-weight:600}
.bouton-mini:hover{color:var(--accent)}

/* =====================================================================
   Coupon à imprimer depuis Windows. À l'écran : les consignes et le
   ticket. À l'impression : le ticket seul, sur fond blanc.
   ===================================================================== */
body.page-papier{background:var(--ground);margin:0;padding:2rem 1rem}
.page-papier .commandes{max-width:34rem;margin:0 auto 1.6rem}
.page-papier .commandes h1{font-size:1.4rem;margin:0 0 .4rem}
.page-papier .commandes p{color:var(--ink-2);margin:.4rem 0}
.page-papier .retour{margin-left:1rem}

.ticket{width:72mm;margin:0 auto;background:#fff;color:#000;padding:6mm 4mm 8mm;
  font-family:ui-monospace,"Courier New",monospace;font-size:9pt;line-height:1.45;
  box-shadow:0 1px 3px rgba(11,34,51,.18),0 6px 18px rgba(11,34,51,.10)}
.ticket .l{white-space:pre-wrap;word-break:break-word}
.ticket .l.centre{text-align:center}
.ticket .l.gauche{text-align:left}
.ticket .l.droite{text-align:right}
.ticket .l.g{font-weight:700}
.ticket .l.grand{font-size:12pt}
.ticket .l.large{font-size:15pt;font-weight:700;letter-spacing:.06em}
.ticket .l.vide{height:3mm}
.ticket .barres{display:flex;justify-content:center;margin:3mm 0 1mm}
.ticket .codebarres{max-width:100%;height:auto}

@media print{
  /* Papier étroit : le ticket sort à sa taille réelle, sans marge perdue. */
  @page{size:80mm auto;margin:3mm}
  body.page-papier{background:#fff;padding:0}
  .page-papier .commandes{display:none !important}
  .ticket{width:auto;margin:0;padding:0;box-shadow:none}
  /* Le code-barres doit rester NOIR : certaines impressions « économiques »
     éclaircissent les gris, et un code pâle ne se lit plus. */
  .ticket .codebarres rect{fill:#000 !important}
  .ticket .codebarres rect:first-child{fill:#fff !important}
}