/* app.css — design system UNM (surfaces internes : dashboard + console).
   Marque UNM + info-design. Tokens thème-aware (clair / sombre auto /
   [data-theme]). Voir portal/BRAND.md. */

:root {
  /* Marque UNM (constantes de marque) */
  --unm-ink:#0d1b2a; --unm-blue:#1c5de6; --unm-signal:#ff7a45;
  /* Rôles (thème CLAIR complet) */
  --bg:#eef2f7; --card:#ffffff; --ink:var(--unm-ink); --muted:#586a7b;
  --line:#e0e7ef; --brand:var(--unm-blue); --brand-ink:#ffffff;
  --accent:var(--unm-signal);
  --good:#157347; --good-bg:#e6f4ec; --warn:#9a5b00; --warn-bg:#fff4e0;
  --crit:#b42318; --crit-bg:#fdecea; --crit-ink:#ffffff;
  --chip:#eaf0f8; --chip-ink:#39485a;
  --radius:13px; --ring:0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
  --shadow:0 1px 2px rgba(13,27,42,.06), 0 8px 24px rgba(13,27,42,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b131c; --card:#141f2b; --ink:#e9f1f9; --muted:#9db0c1;
    --line:#243240; --brand-ink:#08131f; --chip:#1c2937; --chip-ink:#bacadb;
    --good:#6ee7a8; --good-bg:#12301f; --warn:#ffcf7a; --warn-bg:#33260f;
    --crit:#ff9b8f; --crit-bg:#3a1714; --crit-ink:#3a1714;
    --shadow:0 1px 2px rgba(0,0,0,.32), 0 10px 30px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"] {
  --bg:#0b131c; --card:#141f2b; --ink:#e9f1f9; --muted:#9db0c1;
  --line:#243240; --brand-ink:#08131f; --chip:#1c2937; --chip-ink:#bacadb;
  --good:#6ee7a8; --good-bg:#12301f; --warn:#ffcf7a; --warn-bg:#33260f;
  --crit:#ff9b8f; --crit-bg:#3a1714; --crit-ink:#3a1714;
  --shadow:0 1px 2px rgba(0,0,0,.32), 0 10px 30px rgba(0,0,0,.42);
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased;
}
.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; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px 64px; }

/* ── Bandeau de marque UNM ─────────────────────────────────────────── */
.brandbar { display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:16px 0 6px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo .unm-mark { display:block; border-radius:8px; }
.logo .word { font-size:1.34rem; font-weight:900; letter-spacing:.02em;
  color:var(--ink); }
.logo .word b { color:var(--unm-blue); font-weight:900; }
.tagline { color:var(--muted); font-size:.9rem; font-weight:600;
  border-left:3px solid var(--accent); padding-left:12px; }
.tagline b { color:var(--ink); font-weight:800; }
.bb-spacer { flex:1 1 auto; }

.topbar { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:16px; }
h1.title { font-size:1.28rem; font-weight:800; letter-spacing:-.015em; margin:0; }
.sub { color:var(--muted); font-size:.85rem; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:20px; }
.field-inline { display:flex; flex-direction:column; gap:4px; }
.field-inline label { font-size:.72rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; }
input, select {
  padding:11px 12px; font-size:16px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:9px; font-family:inherit; min-height:44px;
}
input:focus-visible, select:focus-visible { outline:none; border-color:var(--brand);
  box-shadow:var(--ring); }
button {
  min-height:44px; padding:11px 16px; font-size:.92rem; font-weight:700;
  color:var(--brand-ink); background:var(--brand); border:none; border-radius:9px;
  cursor:pointer;
}
button.ghost { background:transparent; color:var(--brand); border:1px solid var(--line); }
button:focus-visible { outline:none; box-shadow:var(--ring); }
@media (prefers-reduced-motion: no-preference) {
  button { transition: filter .15s; }
  button:hover { filter:brightness(1.06); }
}

/* Tuiles de résumé (sommaire avant détail) */
.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:22px; }
.tile { background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:15px 16px; }
.tile .k { color:var(--muted); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.06em; }
.tile .v { font-size:1.75rem; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; }
.tile .v + .k { margin-top:4px; }
.tile.alert { border-color:var(--crit); }
.tile.alert .v { color:var(--crit); }

/* Cartes de demande */
.list { display:grid; gap:12px; }
.item { background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  border-left:4px solid var(--line); }
.item.is-urgent { border-left-color:var(--crit); }
.item.is-confirmed { border-left-color:var(--good); }
.item.is-handled { opacity:.62; }
.item .actions { justify-content:flex-end; }
.item .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.item .name { font-weight:700; font-size:1.02rem; }
.item .meta { color:var(--muted); font-size:.86rem; margin-top:8px; }
.item .field { margin-top:6px; }
.item .field b { color:var(--muted); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.04em; display:block; }
.spacer { flex:1; }

/* Pills / chips */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:.72rem; font-weight:700;
  background:var(--chip); color:var(--chip-ink); }
.pill.brand { background:var(--brand); color:var(--brand-ink); }
.pill.good { background:var(--good-bg); color:var(--good); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }
.pill.crit { background:var(--crit-bg); color:var(--crit); }
.phone { font-variant-numeric:tabular-nums; }

/* Table qualité */
.tablewrap { overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { padding:11px 13px; text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:.73rem; text-transform:uppercase;
  letter-spacing:.05em; border-bottom:1px solid var(--line); }
td { border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
tr:last-child td { border-bottom:none; }
tr.alert td { background:var(--crit-bg); }
tr.warn td { background:var(--warn-bg); }
td.dim { color:var(--muted); }
/* Cellules à contenu LONG (phrase-question, contrôles de verdict) : le
   nowrap global convient aux colonnes courtes, pas à une phrase — sans
   ça la table part en scroll horizontal juste pour être lue. */
td.mkr, td.mkr .sub { white-space:normal; }
td.mkr { min-width:22ch; max-width:42ch; }
td.verdict { white-space:normal; display:flex; flex-wrap:wrap; gap:6px;
  align-items:center; }
.banner { padding:12px 15px; border-radius:11px; margin-bottom:16px; font-size:.9rem; }
.banner.good { background:var(--good-bg); color:var(--good); }
.banner.warn { background:var(--warn-bg); color:var(--warn); }
.banner.crit { background:var(--crit-bg); color:var(--crit); }
.empty { text-align:center; color:var(--muted); padding:40px 0; }
h2.section-h { font-size:1.02rem; font-weight:700; margin:26px 0 12px; }
[hidden] { display:none !important; }

/* ── Wizard de configuration (self-config) ─────────────────────────────── */
.wizard { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
@media (max-width:720px){ .wizard { grid-template-columns:1fr; } }
.steprail { display:flex; flex-direction:column; gap:2px; position:sticky; top:16px; }
@media (max-width:720px){ .steprail { flex-direction:row; overflow-x:auto; position:static; } }
.steprail .step { display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; color:var(--muted); font-weight:600; font-size:.9rem;
  white-space:nowrap; cursor:pointer; border:1px solid transparent; }
.steprail .step .n { display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; background:var(--chip); color:var(--chip-ink);
  font-size:.78rem; font-weight:800; flex:none; }
.steprail .step.active { background:var(--card); border-color:var(--line);
  color:var(--ink); box-shadow:var(--shadow); }
.steprail .step.active .n { background:var(--brand); color:var(--brand-ink); }
.steprail .step.done .n { background:var(--good); color:var(--brand-ink); }
.steprail .step:focus-visible { outline:none; box-shadow:var(--ring);
  border-color:var(--brand); }

.panel { background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 22px 18px; }
.panel h2 { font-size:1.12rem; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
.panel .lead { color:var(--muted); font-size:.9rem; margin:0 0 18px; }
.formgrid { display:grid; gap:16px; }
.frow { display:flex; flex-direction:column; gap:6px; }
.frow label { font-size:.78rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; }
.frow .help { font-size:.82rem; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }
.frow input, .frow select, .frow textarea { width:100%; }
textarea { padding:11px 12px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:9px; min-height:80px; resize:vertical; }
textarea:focus-visible { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.frow.err input, .frow.err select, .frow.err textarea { border-color:var(--crit); }
.frow .fielderr { color:var(--crit); font-size:.8rem; font-weight:600; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .two { grid-template-columns:1fr; } }

.hours-grid { display:grid; gap:8px; }
.dayrow { display:grid; grid-template-columns:120px auto 1fr; align-items:center; gap:12px; }
@media (max-width:520px){ .dayrow { grid-template-columns:1fr; gap:6px; padding:10px; border:1px solid var(--line); border-radius:10px; } }
.dayrow .dname { font-weight:700; }
.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; color:var(--muted); }
.switch input { width:auto; min-height:0; }
.hourspan { display:flex; align-items:center; gap:8px; }
.hourspan select { width:auto; min-width:92px; }
.hourspan.off { opacity:.4; pointer-events:none; }

.choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .choice { grid-template-columns:1fr; } }
.choice label { display:block; border:1px solid var(--line); border-radius:12px;
  padding:14px; cursor:pointer; background:var(--card); }
.choice label:has(input:checked) { border-color:var(--brand); box-shadow:var(--ring); }
.choice label:has(input:focus-visible) { border-color:var(--brand); box-shadow:var(--ring); }
.choice .t { font-weight:800; text-transform:none; letter-spacing:0; color:var(--ink); }
.choice .d { color:var(--muted); font-size:.85rem; margin-top:4px;
  text-transform:none; letter-spacing:0; }
.choice input { position:absolute; opacity:0; }

.faq-entry { border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:10px; margin-bottom:12px; }
.faq-entry .rm { align-self:flex-start; }
.voice-chips { display:flex; gap:8px; flex-wrap:wrap; }

.savebar { display:flex; align-items:center; gap:12px; justify-content:flex-end;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.savebar .spacer { flex:1; }
.msg { font-size:.9rem; font-weight:600; }
.msg.good { color:var(--good); }
.msg.crit { color:var(--crit); }
.review dl { display:grid; grid-template-columns:150px 1fr; gap:8px 16px; margin:0; }
.review dt { color:var(--muted); font-size:.82rem; font-weight:700; }
.review dd { margin:0; }
@media (max-width:520px){ .review dl { grid-template-columns:1fr; gap:2px 0; } .review dd { margin-bottom:10px; } }

/* ── Connexion ─────────────────────────────────────────────────────────── */
.authwrap { max-width:440px; margin:6vh auto 0; }
.authcard { background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 24px; }
.authcard h2 { font-size:1.2rem; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
.authcard .lead { color:var(--muted); font-size:.9rem; margin:0 0 18px; }
.authcard .frow { margin-bottom:14px; }
.authcard button { width:100%; }
.role-links { display:grid; gap:10px; margin-top:8px; }
.role-links a { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 15px; border:1px solid var(--line); border-radius:11px;
  color:var(--ink); text-decoration:none; font-weight:700; background:var(--card); }
.role-links a:hover { border-color:var(--brand); }
.role-links a .arrow { color:var(--brand); font-weight:800; }
.role-links a .d { color:var(--muted); font-weight:400; font-size:.82rem; }
a { color:var(--brand); }

/* ── Facturation / statut d'abonnement ─────────────────────────────────── */
.status-hero { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  padding:22px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); border-left:5px solid var(--line); }
.status-hero.is-active { border-left-color:var(--good); }
.status-hero.is-warn { border-left-color:var(--warn); }
.status-hero.is-crit { border-left-color:var(--crit); }
.status-hero .sh-main { flex:1 1 260px; }
.status-hero .sh-title { font-size:1.15rem; font-weight:800; margin:6px 0 6px; }
.status-hero .sh-desc { color:var(--muted); font-size:.92rem; margin:0; }
.status-hero .sh-cta { display:flex; align-items:center; }
.status-hero .sh-cta button { min-width:200px; }
.plan-line { color:var(--muted); font-size:.85rem; margin-top:14px; }
.billing-banner { display:flex; align-items:center; gap:10px; justify-content:space-between;
  flex-wrap:wrap; }
.billing-banner a { font-weight:800; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px; padding:6px 12px;
  border-radius:9px; }

/* ── Enregistrement d'appel dans la carte de lead ──────────────────────── */
.rec { margin-top:12px; }
.rec-slot { display:block; }
.rec-slot audio { display:block; width:100%; margin-top:8px; }
.rec-tr { margin-top:8px; }
.rec-tr > summary { cursor:pointer; color:var(--muted); font-weight:600;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.rec-tr > summary:focus-visible { outline:none; box-shadow:var(--ring); border-radius:6px; }
.rec-tr > div { margin-top:8px; font-size:.9rem; white-space:pre-wrap;
  max-height:280px; overflow:auto; }
.up-slot { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.up-slot img { max-width:120px; max-height:120px; border-radius:8px;
  border:1px solid var(--line); object-fit:cover; }
.up-slot a { display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  min-height:44px; border:1px solid var(--line); border-radius:9px;
  font-size:.85rem; text-decoration:none; font-weight:600; }

/* ── Onboarding (console super-admin) ──────────────────────────────────── */
.plan-pre { background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:14px; font-size:.8rem; line-height:1.5; overflow:auto; max-height:340px;
  white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.result-grid { display:grid; grid-template-columns:170px 1fr; gap:8px 16px; margin:0; }
.result-grid dt { color:var(--muted); font-size:.82rem; font-weight:700; }
.result-grid dd { margin:0; font-variant-numeric:tabular-nums; word-break:break-all; }
@media (max-width:520px){ .result-grid { grid-template-columns:1fr; gap:2px 0; }
  .result-grid dd { margin-bottom:10px; } }
.numlist { display:grid; gap:8px; margin-top:4px; }
.numlist label { display:flex; align-items:center; gap:12px; padding:10px 13px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; min-height:44px;
  /* neutralise l'héritage .frow label (uppercase/muted/tiny) */
  text-transform:none; letter-spacing:0; color:var(--ink); font-size:.95rem;
  font-weight:400; }
.numlist label:has(input:checked) { border-color:var(--brand); box-shadow:var(--ring); }
.numlist label:has(input:focus-visible) { border-color:var(--brand); box-shadow:var(--ring); }
.numlist input { width:auto; min-height:0; }
.numlist .num { font-weight:700; font-variant-numeric:tabular-nums; }
.numlist .loc { color:var(--muted); font-size:.85rem; margin-left:auto; }
.danger-note { display:flex; gap:10px; align-items:flex-start; padding:13px 15px;
  border-radius:11px; background:var(--warn-bg); color:var(--warn);
  font-size:.9rem; margin:16px 0; }
button.danger { background:var(--crit); color:var(--crit-ink); }
/* Un bouton désactivé doit se LIRE désactivé (garde-fou d'achat réel). */
button:disabled { opacity:.55; cursor:not-allowed; filter:none; }

/* ── Puces ADD-ON : un <button> qui doit RESSEMBLER à une pastille d'état.
   Trois pièges relevés à l'audit du 25/08 :
   • la règle `button` impose min-height:44px, qui étirait la pastille en
     capsule incohérente avec toutes les autres `.pill` de la console ;
   • `.ghost` est le vocabulaire des boutons d'ACTION de la page — un
     add-on éteint prenait donc l'allure d'un bouton à cliquer plutôt que
     d'un état inactif ; d'où `.addon-btn.off`, sans collision ;
   • six pastilles sur une cellule `white-space:nowrap` poussaient tout le
     tableau en défilement horizontal permanent. */
.addon-btn.pill { min-height:auto; font-size:.82rem; padding:3px 9px;
  border:0; cursor:pointer; }
.addon-btn.off { background:var(--chip); color:var(--chip-ink);
  opacity:.62; }
.addon-btn.off:hover { opacity:1; }
td.addons { white-space:normal; display:flex; flex-wrap:wrap; gap:6px;
  align-items:center; max-width:22rem; }

/* Édition des coordonnées à la console : un tenant géré par Jessy n'a
   aucun portail client où les saisir (26/08). */
.coord-form { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.coord-form label { display:flex; flex-direction:column; gap:3px;
  font-size:.82rem; color:var(--muted); }
.coord-form input { min-width:15rem; }
.coord-form .c-msg { flex:1 1 100%; }

/* Demande pointée par le lien du texto au propriétaire : il doit la
   repérer d'un coup d'œil, sinon le lien profond ne sert à rien. */
.item.cible { outline:2px solid var(--brand); outline-offset:3px;
  scroll-margin-block:5rem; }