/* Viadely — le socle des écrans (jetons de couleur, composants), tiré des maquettes validées.
   Rien de propre à une page ici. Aucune police ni feuille externe : tout est local. */
:root {
  --fond: #f4f6f5; --papier: #ffffff; --encre: #16202a; --sourd: #5b6670; --trait: #d5dcd9;
  --base: #3d3f92; --base-pale: #e9e9f6; --route: #0e6e66; --route-pale: #e3f1ef;
  --externe: #a4520b; --externe-pale: #f8ecdf; --degrade: #b3261e; --degrade-pale: #fbe9e7; --ok: #1f7a3f; --ok-pale: #e5f3ea;
  --ombre: 0 8px 28px rgba(22, 32, 42, 0.16);
  --corps: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titre: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #11171d; --papier: #19222a; --encre: #e6ebee; --sourd: #9aa6ae; --trait: #2c3943;
    --base: #9ea2f2; --base-pale: #23254a; --route: #4fc2b6; --route-pale: #15302d;
    --externe: #eaa15c; --externe-pale: #3a2714; --degrade: #f08a80; --degrade-pale: #3b1c1a; --ok: #6fcf8f; --ok-pale: #16301f;
    --ombre: 0 8px 28px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #11171d; --papier: #19222a; --encre: #e6ebee; --sourd: #9aa6ae; --trait: #2c3943;
  --base: #9ea2f2; --base-pale: #23254a; --route: #4fc2b6; --route-pale: #15302d;
  --externe: #eaa15c; --externe-pale: #3a2714; --degrade: #f08a80; --degrade-pale: #3b1c1a; --ok: #6fcf8f; --ok-pale: #16301f;
  --ombre: 0 8px 28px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* ⚠ Sans ceci, une classe qui pose `display` l'emporte sur l'attribut hidden. */
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; }
body { background: var(--fond); color: var(--encre); font: 14px/1.5 var(--corps); padding-inline: 16px; padding-block: 0 72px;
       overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--titre); margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0; }
code { font-family: var(--code); font-size: 12px; }
a { color: var(--base); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--base); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── La barre de l'application : les écrans, et le jeton ── */
.barre-app { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between;
             margin-inline: -16px; padding: 8px 16px; background: var(--papier); border-bottom: 1px solid var(--trait); }
.barre-app nav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.barre-app nav a { color: var(--sourd); text-decoration: none; padding: 5px 9px; border-radius: 6px; font-weight: 500; }
.barre-app nav a:hover { color: var(--encre); }
.barre-app nav a[aria-current="page"] { color: var(--encre); background: var(--base-pale); box-shadow: inset 0 -2px 0 var(--base); }
.barre-app .jeton { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--sourd); }
.barre-app .jeton input { width: 11em; border: 1px solid var(--trait); border-radius: 6px; padding: 4px 8px; background: var(--fond); color: var(--encre); }
/* Qui est connecté, son mot de passe, se déconnecter (posé par session.js). */
.barre-app .compte { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; color: var(--sourd); margin-left: auto; }
.barre-app .compte-nom { color: var(--encre); font-weight: 600; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La session a pris fin sans geste de l'utilisateur (posé par session.js) : la page reste, le bandeau le dit. */
.session-finie { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
                 margin-inline: -16px; padding: 10px 16px; background: var(--degrade-pale); color: var(--degrade); border-bottom: 1.5px solid var(--degrade); font-weight: 600; }

.entete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding-block: 14px 10px; }
.entete .sous { color: var(--sourd); font-size: 13px; }
.outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Boutons, badges, champs ── */
.btn { border: 1px solid var(--trait); background: var(--papier); color: var(--encre); border-radius: 7px; padding: 6px 11px; cursor: pointer;
       font: 600 13px/1.2 var(--titre); white-space: nowrap; }
.btn:hover { border-color: var(--base); }
.btn.primaire { background: var(--base); border-color: var(--base); color: var(--papier); }
.btn.danger { color: var(--degrade); border-color: var(--degrade); }
.btn.petit { padding: 3px 8px; font-size: 12px; }
.btn[disabled] { cursor: not-allowed; color: var(--sourd); background: var(--fond); border-color: var(--trait); }
.lien { background: none; border: 0; padding: 0; color: var(--base); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--trait); color: var(--sourd); white-space: nowrap; }
.badge.verifier { color: var(--externe); border-color: var(--externe); background: var(--externe-pale); }
.badge.manque, .badge.alerte { color: var(--degrade); border-color: var(--degrade); background: var(--degrade-pale); }
.badge.leger { color: var(--degrade); border-color: var(--degrade); }
.badge.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-pale); }
.badge.info { color: var(--base); border-color: var(--base); background: var(--base-pale); }
.badge.source { font-family: var(--code); font-size: 10.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.boutons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pile { display: grid; gap: 6px; }
.champ { display: grid; gap: 3px; min-width: 0; }
.champ > span { font-size: 11.5px; color: var(--sourd); }
.champ input, .champ select, .champ textarea, input.saisie, select.saisie {
  border: 1px solid var(--trait); border-radius: 6px; padding: 5px 8px; background: var(--papier); color: var(--encre); min-width: 0; width: 100%; }
.champ.douteux input { border-color: var(--externe); background: var(--externe-pale); }
.champ.douteux > span { color: var(--externe); font-weight: 600; }
.champ.manque input { border-color: var(--degrade); }
.champ.manque > span { color: var(--degrade); }
.champ.en-erreur input, .champ.en-erreur select { border-color: var(--degrade); background: var(--degrade-pale); }
.champ .erreur-champ { font-size: 12px; color: var(--degrade); }
.champ input[readonly] { background: var(--fond); color: var(--sourd); }
.case { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.case input { width: 16px; height: 16px; accent-color: var(--base); margin: 0; }
.indice { font-size: 12px; color: var(--sourd); }
.vide { color: var(--sourd); font-style: italic; padding: 10px; }
.erreur { color: var(--degrade); font-size: 13px; }

/* ── Surfaces ── */
.panneau { background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.panneau > header { padding: 10px 12px; border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 6px 10px;
                    align-items: center; justify-content: space-between; }
.panneau > .corps { padding: 12px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

/* ── Le message (bas de l'écran). Il laisse passer les clics : seul son bouton en prend. ── */
.message { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
           z-index: 40; width: min(560px, calc(100vw - 32px)); pointer-events: none;
           background: var(--encre); color: var(--fond); border-radius: 10px; padding: 10px 14px; box-shadow: var(--ombre);
           display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.message.erreur { background: var(--degrade-pale); color: var(--degrade); border: 1.5px solid var(--degrade); }
.message button { pointer-events: auto; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 6px;
                  padding: 3px 9px; cursor: pointer; font: 600 12px/1.2 var(--titre); white-space: nowrap; }
.message .actions { display: flex; gap: 6px; }

/* ── Fenêtre dans la page (jamais window.confirm) ── */
.voile { position: fixed; inset: 0; background: rgba(10, 14, 20, .45); z-index: 70; display: grid; place-items: center; padding: 16px; }
.fenetre { background: var(--papier); color: var(--encre); border-radius: 12px; box-shadow: var(--ombre); width: min(520px, 100%); max-height: 90vh;
           overflow: auto; padding: 16px; display: grid; gap: 12px; }
.fenetre ul { margin: 0; padding-left: 18px; }
.fenetre .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ── L'assistant et sa carte de proposition (contrôle humain) ── */
.assistant { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--papier); border: 1px solid var(--trait);
             border-radius: 10px; min-height: 420px; max-height: calc(100vh - 140px); }
.assistant > header { padding: 10px 12px; border-bottom: 1px solid var(--trait); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.assistant .fil { overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.assistant .saisie-zone { border-top: 1px solid var(--trait); padding: 10px; display: grid; gap: 8px; }
.assistant form { display: flex; gap: 6px; }
.assistant form input { flex: 1; border: 1px solid var(--trait); border-radius: 8px; padding: 7px 10px; background: var(--fond); color: var(--encre); min-width: 0; }
.assistant .cout { font-size: 11.5px; color: var(--sourd); }
.bulle { border-radius: 12px; padding: 8px 11px; max-width: 92%; font-size: 13px; white-space: pre-line; }
.bulle.chef { justify-self: end; background: var(--base); color: var(--papier); border-bottom-right-radius: 3px; }
.bulle.agent { background: var(--fond); border: 1px solid var(--trait); border-bottom-left-radius: 3px; }
.bulle.agent ul { margin: 4px 0 0; padding-left: 18px; }
.bulle.pense { color: var(--sourd); font-style: italic; }
.bulle.alerte { color: var(--degrade); border-color: var(--degrade); background: var(--degrade-pale); }
.carte-plan { border: 1.5px solid var(--externe); background: var(--externe-pale); border-radius: 10px; padding: 10px; display: grid; gap: 8px; font-size: 13px; }
.carte-plan.appliquee { border-color: var(--ok); background: var(--ok-pale); }
.carte-plan.annulee { border-color: var(--trait); background: var(--fond); opacity: .85; }
.carte-plan .titre { font: 600 14px/1.2 var(--titre); }
.carte-plan ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.carte-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; }
.carte-plan li input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--base); }
.carte-plan li .avant-apres { display: block; font-family: var(--code); font-size: 11.5px; color: var(--sourd); }
.carte-plan li .alerte-act { display: block; color: var(--degrade); font-size: 12px; }
.carte-plan li.engage .etiquette { color: var(--degrade); font-weight: 600; }
.carte-plan .pied { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.attente-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--externe); color: var(--papier); white-space: nowrap; }

/* ── Mise en page : écran + assistant ── */
.ecran { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ecran.avec-assistant { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .ecran.avec-assistant { grid-template-columns: minmax(0, 1fr); } .assistant { max-height: none; } }