/* Console AMP-Accueil : barre latérale + contenu dense. */
body { overflow-x: hidden; }
.demarrage { min-height: 100vh; display: grid; place-items: center; }
.coque { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.coque.repliee { grid-template-columns: 60px minmax(0, 1fr); }
.laterale {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-right: 1px solid var(--ligne); padding: 10px 8px; overflow-y: auto; scrollbar-width: thin; z-index: 20;
}
.marque { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; font-weight: 750; letter-spacing: -.01em; font-size: 15px; }
.marque img { width: 28px; height: 28px; border-radius: 8px; }
.marque small { display: block; font-weight: 550; color: var(--encre-3); font-size: 11px; letter-spacing: 0; }
.laterale .section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); font-weight: 700; padding: 12px 10px 4px; }
.laterale a.nav {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--encre-2); font-weight: 580;
  text-decoration: none; font-size: 13.5px; white-space: nowrap; position: relative;
}
.laterale a.nav:hover { background: var(--surface-3); color: var(--encre); }
.laterale a.nav.actif { background: var(--accent-doux); color: var(--accent); }
.laterale a.nav .compte { margin-left: auto; font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--critique); color: #fff; font-weight: 700; }
.laterale .bas { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 2px; }
.coque.repliee .laterale .lib, .coque.repliee .laterale .section, .coque.repliee .marque span { display: none; }
.coque.repliee .laterale a.nav { justify-content: center; padding: 9px 0; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.entete {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ligne);
}
.entete h1 { font-size: 17px; }
.entete .fil { color: var(--encre-3); font-size: 12px; }
.contenu { padding: 14px 18px 40px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.direct-point { width: 8px; height: 8px; border-radius: 50%; background: var(--bon); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bon) 50%, transparent); animation: pouls 2s infinite; }
.direct-point.coupe { background: var(--attention); animation: none; }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.selecteur-officine { max-width: 260px; height: 32px; font-weight: 600; }
.barre-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barre-outils .pousse { flex: 1; }

/* connexion */
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.connexion .visuel { background: radial-gradient(120% 90% at 10% 10%, #14b8a6 0%, #0f766e 40%, #0b3b3a 100%); color: #ecfeff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.connexion .visuel h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; max-width: 14ch; }
.connexion .visuel p { color: #ccfbf1; max-width: 44ch; font-size: 15px; }
.connexion .visuel .puces { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.connexion .visuel .puces div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px; font-size: 13px; }
.connexion .visuel .puces b { display: block; font-size: 14px; margin-bottom: 2px; color: #fff; }
.connexion .formulaire { display: grid; place-items: center; padding: 32px; background: var(--surface); }
.connexion form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .connexion { grid-template-columns: 1fr; } .connexion .visuel { display: none; } }

/* direct */
.file-liste { display: flex; flex-direction: column; gap: 4px; }
.file-ligne { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid transparent; }
.file-ligne:hover { border-color: var(--ligne-forte); }
.file-ligne .code-ticket { font-size: 15px; }
.barre-couleur { width: 4px; align-self: stretch; border-radius: 4px; }
.comptoir-carte { border-radius: var(--rayon); border: 1px solid var(--ligne); padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-height: 108px; }
.comptoir-carte.ouvert { border-color: color-mix(in srgb, var(--bon) 45%, var(--ligne)); }
.comptoir-carte .encours { font-family: var(--mono); font-weight: 800; font-size: 26px; letter-spacing: .02em; }
.brief { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--ligne)); }
.brief li { margin: 2px 0; }
.alerte-l { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 8px; font-size: 13px; }
.alerte-l.urgent { background: var(--critique-doux); color: var(--critique); }
.alerte-l.attention { background: var(--attention-doux); color: var(--attention); }
.alerte-l.info { background: var(--info-doux); color: var(--info); }

/* réglages */
.reglages { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; }
.reglages nav { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 1px; }
.reglages nav a { padding: 6px 10px; border-radius: 7px; color: var(--encre-2); font-weight: 580; font-size: 13px; text-decoration: none; }
.reglages nav a:hover { background: var(--surface-3); }
.reglages nav a.actif { background: var(--accent-doux); color: var(--accent); }
@media (max-width: 980px) { .reglages { grid-template-columns: 1fr; } .reglages nav { position: static; flex-direction: row; overflow-x: auto; } }
.motif-ligne { display: grid; grid-template-columns: 22px 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--ligne); border-radius: 9px; background: var(--surface); cursor: grab; }
.motif-ligne.glisse { opacity: .5; }
.motif-ligne.cible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.motif-ligne .rang { font-weight: 800; color: var(--encre-3); text-align: center; }
.puce-couleur { width: 12px; height: 12px; border-radius: 4px; }
.touche-pave { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; text-align: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), var(--ombre-2); gap: 2px; padding: 6px; }
.touche-pave svg { width: 22px; height: 22px; }

/* assistant */
.conversation { display: flex; flex-direction: column; gap: 10px; }
.bulle-q { align-self: flex-end; background: var(--accent); color: var(--accent-encre); padding: 9px 13px; border-radius: 14px 14px 4px 14px; max-width: 80%; }
.bulle-r { align-self: flex-start; background: var(--surface); border: 1px solid var(--ligne); padding: 11px 14px; border-radius: 14px 14px 14px 4px; max-width: 90%; white-space: pre-wrap; line-height: 1.55; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.suggestions button { border: 1px solid var(--ligne-forte); background: var(--surface); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: var(--encre-2); }
.suggestions button:hover { border-color: var(--accent); color: var(--accent); }

.facteur { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); font-size: 12px; margin: 2px 4px 2px 0; }
.facteur b { font-variant-numeric: tabular-nums; }
.cellule-besoin { display: grid; place-items: center; height: 26px; border-radius: 5px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grille-besoin { display: grid; gap: 2px; font-size: 11px; }

.carte > .titre { flex-wrap: wrap; }
@media (max-width: 900px) { .contenu .g2, .contenu .g3 { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) {
  .entete h1, .entete .petit.doux { display: none; }
  .coque, .coque.repliee { grid-template-columns: 1fr; }
  .laterale { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; flex-direction: row; padding: 4px; border-right: 0; border-top: 1px solid var(--ligne); overflow-x: auto; }
  .laterale .marque, .laterale .section, .laterale .bas { display: none; }
  .laterale a.nav { flex-direction: column; gap: 2px; font-size: 10px; padding: 6px 8px; }
  .laterale a.nav .lib { display: block !important; }
  .contenu { padding: 10px 10px 90px; }
  .entete { padding: 8px 10px; }
}
@media print { .laterale, .entete .barre-outils { display: none; } .coque { display: block; } }

.delta, .pastille { white-space: nowrap; }
.tableau td:first-child { white-space: nowrap; }
/* Stream Deck : aperçu fidèle du pavé (5 × 3 touches de 72 px, cadre noir mat) */
.streamdeck-cadre { background: linear-gradient(#1b1d22, #0d0e11); padding: 14px; border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.25); width: max-content; max-width: 100%; overflow-x: auto; }
.streamdeck { display: grid; grid-template-columns: repeat(5, 72px); gap: 10px; }
.streamdeck img { width: 72px; height: 72px; border-radius: 10px; box-shadow: 0 2px 0 #000, inset 0 0 0 1px rgba(255,255,255,.06); display: block; }
@media (max-width: 560px) { .streamdeck { grid-template-columns: repeat(5, 52px); gap: 7px; } .streamdeck img { width: 52px; height: 52px; border-radius: 8px; } }