/* THOR WhatsApp — charte THOR : bleu #0B3D91, ambre #F0A808. Clair et sombre. */
:root {
  --bleu: #0B3D91; --bleu-2: #1450b8; --ambre: #F0A808; --ambre-doux: #fff4d6;
  --fond: #f3f5f9; --surface: #ffffff; --surface-2: #f8fafc; --texte: #141b2d; --doux: #5f6b80;
  --bord: #e2e7ef; --ombre: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  --bulle-client: #ffffff; --bulle-agent: #e8f0ff; --bulle-tech: #fff4d6; --bulle-sys: transparent;
  --ok: #12805c; --ok-doux: #e3f6ee; --rouge: #c0392b; --rouge-doux: #fdecea;
  --rayon: 12px; --barre: 240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0d1220; --surface: #151c2e; --surface-2: #1b2338; --texte: #e7ebf3; --doux: #98a3b8;
    --bord: #273149; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --bulle-client: #1b2338; --bulle-agent: #1a2c55; --bulle-tech: #3a2f10;
    --ambre-doux: #3a2f10; --ok-doux: #0f2e24; --rouge-doux: #3a1714; --bleu-2: #5b8def;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0d1220; --surface: #151c2e; --surface-2: #1b2338; --texte: #e7ebf3; --doux: #98a3b8;
  --bord: #273149; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --bulle-client: #1b2338; --bulle-agent: #1a2c55; --bulle-tech: #3a2f10;
  --ambre-doux: #3a2f10; --ok-doux: #0f2e24; --rouge-doux: #3a1714; --bleu-2: #5b8def;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 Archivo, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
       background: var(--fond); color: var(--texte); }
a { color: var(--bleu-2); }
h1 { font: 700 24px/1.2 Fraunces, Georgia, serif; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }
.sous-titre { color: var(--doux); margin: 0 0 20px; }

/* ── Structure ─────────────────────────────────────────────────────────── */
.appli { display: grid; grid-template-columns: var(--barre) minmax(0, 1fr); min-height: 100vh; }
.appli > * { min-width: 0; }  /* une colonne 1fr ne rétrécit pas sous son contenu sans cela */
.barre { background: var(--bleu); color: #fff; display: flex; flex-direction: column;
         position: sticky; top: 0; height: 100vh; border-right: 4px solid var(--ambre); }
.marque { padding: 20px 20px 16px; font-weight: 800; font-size: 19px; letter-spacing: .04em; }
.marque span { color: var(--ambre); }
.marque small { display: block; font-weight: 500; font-size: 12px; opacity: .75; letter-spacing: 0;
                margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; flex: 1; }
.nav a { color: #dfe7f7; text-decoration: none; padding: 9px 12px; border-radius: 8px;
         display: flex; align-items: center; gap: 10px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.actif { background: rgba(255,255,255,.14); color: #fff; }
.nav .ico { width: 18px; height: 18px; flex: none; }
.nav .compteur { margin-left: auto; background: var(--ambre); color: #2a1e00; font-size: 12px;
                 font-weight: 700; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; }
.pied-barre { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.pied-barre .qui { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ambre); color: #2a1e00;
          display: grid; place-items: center; font-weight: 800; flex: none; }
.pied-barre .role { opacity: .7; font-size: 12px; }
.pied-barre form { margin: 0; }
.pied-barre button { background: none; border: 0; color: #dfe7f7; padding: 0; cursor: pointer; font: inherit; }
.pied-barre .outils { display: flex; gap: 14px; margin-top: 10px; }
.contenu { padding: 26px 32px 40px; min-width: 0; }
.bandeau { border-radius: var(--rayon); padding: 11px 16px; margin-bottom: 18px; display: flex; gap: 10px;
           align-items: flex-start; border: 1px solid; }
.bandeau.alerte { background: var(--ambre-doux); border-color: var(--ambre); }
.bandeau.ok { background: var(--ok-doux); border-color: var(--ok); }
.bandeau.erreur { background: var(--rouge-doux); border-color: var(--rouge); }
.bandeau a { font-weight: 600; }

/* ── Composants ────────────────────────────────────────────────────────── */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
         box-shadow: var(--ombre); }
.carte.pad { padding: 20px; }
.grille { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.kpi { padding: 16px 18px; }
.kpi .val { font: 700 28px/1.1 Fraunces, Georgia, serif; margin-top: 4px; }
.kpi .lib { color: var(--doux); font-size: 13px; }
.kpi .note { color: var(--doux); font-size: 12px; margin-top: 4px; }
.deux { grid-template-columns: 2fr 1fr; }
.jauge { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 10px;
         border: 1px solid var(--bord); }
.jauge i { display: block; height: 100%; background: var(--bleu-2); border-radius: 99px; }
.jauge.haute i { background: var(--ambre); } .jauge.pleine i { background: var(--rouge); }
.pastille { font-size: 12px; padding: 2px 9px; border-radius: 99px; white-space: nowrap; font-weight: 600;
            display: inline-flex; align-items: center; gap: 5px; }
.pastille.agent { background: var(--bulle-agent); color: var(--bleu-2); }
.pastille.humain { background: var(--ambre); color: #2a1e00; }
.pastille.haute { background: var(--rouge); color: #fff; }
.pastille.neutre { background: var(--surface-2); color: var(--doux); border: 1px solid var(--bord); }
.pastille.verrou { background: var(--surface-2); color: var(--doux); border: 1px dashed var(--bord); }
.btn, button { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 9px;
               padding: 8px 15px; cursor: pointer; background: var(--bleu); color: #fff;
               text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover, button:hover { filter: brightness(1.08); }
.btn.second, button.second { background: var(--surface); color: var(--bleu-2); border-color: var(--bord); }
.btn.danger, button.danger { background: var(--surface); color: var(--rouge); border-color: var(--bord); }
.btn.petit, button.petit { padding: 5px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: wait; }
label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=url], input[type=time], input[type=search], select, textarea {
  font: inherit; color: var(--texte); background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: 9px; padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-2); outline-offset: -1px; }
textarea { resize: vertical; }
.champ { margin-bottom: 14px; }
.aide { color: var(--doux); font-size: 13px; }
.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 12px; color: var(--doux); font-weight: 600; text-transform: uppercase;
              letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.tableau td { padding: 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.vide { padding: 36px 20px; text-align: center; color: var(--doux); }

/* Graphique en barres (sans bibliothèque) */
.histo { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 8px; }
.histo .col { flex: 1; display: flex; flex-direction: column-reverse; min-width: 3px; height: 100%; }
.histo .col i { display: block; width: 100%; }
.histo .col i.r { background: #9fb6e0; } .histo .col i.a { background: var(--bleu-2); }
.histo .col i.e { background: var(--ambre); }
.histo .col:hover { opacity: .75; }
.legende { display: flex; gap: 14px; font-size: 12px; color: var(--doux); margin-top: 8px; }
.legende b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.barres-h .l { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 10px; font-size: 14px; }
.barres-h .l .jauge { grid-column: 1 / -1; margin-top: 0; }
.verrouille { position: relative; }
.verrouille > .voile { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 82%, transparent);
                       backdrop-filter: blur(3px); border-radius: var(--rayon); display: grid; place-items: center;
                       text-align: center; padding: 20px; z-index: 2; }

/* ── Conversations (deux volets) ───────────────────────────────────────── */
.messagerie { display: grid; grid-template-columns: 340px 1fr; height: 100vh; overflow: hidden; }
.volet-liste { border-right: 1px solid var(--bord); display: flex; flex-direction: column; min-height: 0;
               background: var(--surface); }
.volet-liste .outils { padding: 12px; border-bottom: 1px solid var(--bord); display: grid; gap: 8px; }
.filtres { display: flex; gap: 4px; flex-wrap: wrap; }
.filtres a { font-size: 12px; padding: 3px 9px; border-radius: 99px; text-decoration: none; color: var(--doux);
             border: 1px solid var(--bord); }
.filtres a.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.liste { overflow-y: auto; flex: 1; }
.liste a { display: grid; grid-template-columns: 38px 1fr auto; gap: 2px 10px; padding: 11px 12px;
           border-bottom: 1px solid var(--bord); color: inherit; text-decoration: none; align-items: center; }
.liste a:hover { background: var(--surface-2); }
.liste a.courante { background: var(--bulle-agent); }
.liste .av { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2);
             border: 1px solid var(--bord); display: grid; place-items: center; font-weight: 700; color: var(--doux); }
.liste a.equipe .av { background: var(--ambre); color: #2a1e00; border-color: var(--ambre); }
.liste a.urgente .av { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.liste .nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .heure { font-size: 12px; color: var(--doux); }
.liste .dernier { color: var(--doux); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nonlus { background: var(--bleu-2); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700;
          padding: 0 7px; justify-self: end; }
.volet-fil { display: flex; flex-direction: column; min-height: 0; background: var(--fond); }
.entete-fil { background: var(--surface); border-bottom: 1px solid var(--bord); padding: 12px 18px;
              display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entete-fil .titre { font-weight: 700; font-size: 16px; margin-right: auto; }
.entete-fil .titre small { display: block; font-weight: 400; color: var(--doux); font-size: 13px; }
.entete-fil form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.entete-fil select { width: auto; padding: 5px 8px; font-size: 13px; }
.transmis { margin: 12px 18px 0; background: var(--ambre-doux); border: 1px solid var(--ambre); border-radius: 10px;
            padding: 10px 14px; font-size: 14px; }
.fil { padding: 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.msg { max-width: 72%; padding: 8px 12px 6px; border-radius: 12px; border: 1px solid var(--bord);
       white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.msg small { display: block; color: var(--doux); font-size: 11px; margin-top: 3px; text-align: right; }
.msg.client { background: var(--bulle-client); align-self: flex-start; border-top-left-radius: 4px; }
.msg.agent, .msg.auto { background: var(--bulle-agent); align-self: flex-end; border-top-right-radius: 4px; }
.msg.technicien { background: var(--bulle-tech); align-self: flex-end; border-top-right-radius: 4px; }
.msg.systeme { background: var(--bulle-sys); border: 0; box-shadow: none; align-self: center; font-size: 12px;
               color: var(--doux); padding: 2px 8px; }
.saisie { background: var(--surface); border-top: 1px solid var(--bord); padding: 12px 18px; }
.saisie form { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.saisie textarea { min-height: 44px; max-height: 180px; }
.rapides { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rapides button { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord);
                  font-weight: 500; font-size: 12px; padding: 3px 9px; border-radius: 99px; }
.accueil-fil { flex: 1; display: grid; place-items: center; color: var(--doux); text-align: center; padding: 30px; }

/* ── Réglages ──────────────────────────────────────────────────────────── */
.onglets { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.onglets nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.onglets nav a { padding: 8px 12px; border-radius: 8px; color: var(--texte); text-decoration: none; font-size: 14px;
                 display: flex; justify-content: space-between; align-items: center; }
.onglets nav a:hover { background: var(--surface); }
.onglets nav a.actif { background: var(--surface); box-shadow: var(--ombre); font-weight: 600; color: var(--bleu-2); }
.etapes { counter-reset: e; display: grid; gap: 12px; }
.etape { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; }
.etape::before { counter-increment: e; content: counter(e); width: 30px; height: 30px; border-radius: 50%;
                 display: grid; place-items: center; font-weight: 700; background: var(--surface-2);
                 border: 1px solid var(--bord); }
.etape.faite::before { content: "✓"; background: var(--ok); color: #fff; border-color: var(--ok); }
.paliers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.palier { padding: 18px; }
.palier.courant { outline: 2px solid var(--bleu-2); }
.palier .prix { font: 700 22px/1.2 Fraunces, Georgia, serif; margin: 6px 0; }
.palier ul { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.palier li.non { color: var(--doux); text-decoration: line-through; }
.horaires td { padding: 6px 8px; }
.horaires input[type=time] { width: 120px; }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* ── Pages d'accueil (connexion, installation) ─────────────────────────── */
.accueil { min-height: 100vh; display: grid; place-items: center; padding: 20px;
           background: linear-gradient(160deg, var(--bleu) 0%, #07275e 60%, #051b42 100%); }
.accueil .carte { width: 100%; max-width: 420px; padding: 30px; }
.accueil .carte.large { max-width: 560px; }
.accueil .marque-accueil { font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--bleu-2); margin-bottom: 18px; }
.accueil .marque-accueil span { color: var(--ambre); }

/* ── Petits écrans ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .appli { grid-template-columns: minmax(0, 1fr); }
  .barre { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
           border-right: 0; border-bottom: 4px solid var(--ambre); }
  .marque { padding: 12px 16px; } .marque small { display: none; }
  .nav { flex-direction: row; overflow-x: auto; padding: 6px 8px; flex-basis: 100%; order: 3; }
  .nav a { white-space: nowrap; padding: 7px 10px; }
  .pied-barre { border: 0; margin-left: auto; padding: 8px 16px; }
  .pied-barre .qui > div, .pied-barre .outils { display: none; }
  .contenu { padding: 18px 16px 30px; }
  .deux, .onglets { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglets nav { flex-direction: row; overflow-x: auto; position: static; }
  .onglets nav a { white-space: nowrap; }
  .messagerie { grid-template-columns: minmax(0, 1fr); height: auto; }
  .messagerie.avec-conv .volet-liste { display: none; }
  .messagerie:not(.avec-conv) .volet-fil { display: none; }
  .volet-fil { min-height: 70vh; }
  .msg { max-width: 90%; }
  .retour-mobile { display: inline-flex !important; }
  .carte:has(> table), .carte:has(> form > table) { overflow-x: auto; }   /* tableaux larges : défilement */
  .horaires input[type=time] { width: 96px; padding: 7px; }
  .tableau td, .tableau th { padding: 8px 6px; }
}
.retour-mobile { display: none !important; }