:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --bord: #dde2ea;
  --texte: #0f172a;
  --texte-2: #5b6576;
  --accent: #0284c7;
  --accent-doux: #e0f2fe;
  --moi: #0369a1;
  --moi-fond: #e0f2fe;
  --inter: #334155;
  --inter-fond: #ffffff;
  --ok: #15803d;
  --ok-fond: #dcfce7;
  --attention: #b45309;
  --attention-fond: #fef3c7;
  --danger: #b91c1c;
  --danger-fond: #fee2e2;
  --ombre: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05);
  --rayon: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1120;
    --surface: #131b2e;
    --surface-2: #1b2539;
    --bord: #26324a;
    --texte: #e5e9f0;
    --texte-2: #94a3b8;
    --accent: #38bdf8;
    --accent-doux: #0c2a3d;
    --moi: #7dd3fc;
    --moi-fond: #0c2a3d;
    --inter: #e2e8f0;
    --inter-fond: #1b2539;
    --ok: #4ade80;
    --ok-fond: #0f2e1c;
    --attention: #fbbf24;
    --attention-fond: #33260a;
    --danger: #f87171;
    --danger-fond: #3a1414;
    --ombre: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
  padding: .55em 1em; border-radius: 10px; cursor: pointer; font-weight: 550;
  white-space: nowrap; min-height: 40px;
}
.btn:hover { border-color: var(--texte-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primaire { color: #04121c; } }
.btn.danger { color: var(--danger); }
.btn.petit { min-height: 30px; padding: .25em .6em; font-size: 13px; }
.btn.fantome { background: transparent; border-color: transparent; }
.btn.enregistrer { background: var(--danger); border-color: var(--danger); color: #fff; font-size: 17px; padding: .8em 1.6em; }

.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
.entete-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
h1 { font-size: 24px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); margin: 0 0 10px; font-weight: 650; }
.muet { color: var(--texte-2); }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }

/* ---------- connexion */
.connexion { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.connexion form { width: min(360px, 100%); padding: 28px; display: grid; gap: 14px; }
.connexion .logo { font-size: 40px; }

/* ---------- formulaires */
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: 14px; }
.champ small { color: var(--texte-2); font-size: 13px; }
input[type=text], input[type=password], textarea {
  width: 100%; padding: .6em .75em; border-radius: 10px; border: 1px solid var(--bord);
  background: var(--surface); outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
textarea { resize: vertical; min-height: 84px; }
.formulaire { display: grid; gap: 18px; padding: 22px; }
.choix-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.choix-mode label {
  border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px;
}
.choix-mode input { position: absolute; opacity: 0; }
.choix-mode label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.choix-mode b { font-size: 15px; }
.choix-mode span { font-size: 13px; color: var(--texte-2); }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; background: var(--attention-fond); padding: 10px 12px; border-radius: 10px; }
.consentement input { margin-top: 4px; }

/* ---------- liste */
.liste { display: grid; gap: 10px; }
.ligne-entretien {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; text-decoration: none; color: inherit;
}
.ligne-entretien:hover { border-color: var(--accent); }
.ligne-entretien .titre { font-weight: 650; }
.ligne-entretien .resume { grid-column: 1 / -1; color: var(--texte-2); font-size: 14px; }
.pastille { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); align-self: start; white-space: nowrap; }
.pastille.en_cours { background: var(--danger-fond); color: var(--danger); }
.pastille.cr_pret { background: var(--ok-fond); color: var(--ok); }
.pastille.cr_en_cours, .pastille.termine { background: var(--attention-fond); color: var(--attention); }
.vide { text-align: center; padding: 48px 16px; }

/* ---------- entretien en direct */
.direct { height: 100dvh; display: grid; grid-template-rows: auto auto 1fr; }
.barre {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--bord); flex-wrap: wrap;
}
.barre .titre { font-weight: 650; flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrono { font-variant-numeric: tabular-nums; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.point-rec { width: 10px; height: 10px; border-radius: 50%; background: var(--texte-2); }
.point-rec.actif { background: #ef4444; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.etats { display: flex; gap: 6px; flex-wrap: wrap; }
.etat { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); }
.etat.ok { background: var(--ok-fond); color: var(--ok); }
.etat.ko { background: var(--danger-fond); color: var(--danger); }
.etat.travail { background: var(--accent-doux); color: var(--accent); }
.vumetres { display: flex; gap: 4px; align-items: center; }
.vumetre { width: 40px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.vumetre i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .1s; }

.ratio { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--texte-2); background: var(--surface); border-bottom: 1px solid var(--bord); }
.ratio .jauge { flex: 1; max-width: 320px; height: 6px; border-radius: 3px; background: var(--texte-2); overflow: hidden; opacity: .9; }
.ratio .jauge i { display: block; height: 100%; background: var(--accent); }

.colonnes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); min-height: 0; }
.onglets-mobile { display: none; }
.colonne { min-height: 0; display: flex; flex-direction: column; }
.colonne + .colonne { border-left: 1px solid var(--bord); }
.defile { overflow-y: auto; flex: 1; padding: 16px; scroll-behavior: smooth; }

.demarrage { display: grid; place-items: center; text-align: center; gap: 14px; padding: 32px 16px; height: 100%; align-content: center; }
.demarrage p { max-width: 460px; margin: 0; }
.demarrage ol { text-align: left; max-width: 460px; margin: 0; padding-left: 20px; color: var(--texte-2); }

/* transcription */
.tour { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 88%; }
.tour.moi { margin-left: auto; align-items: flex-end; }
.tour .qui { font-size: 12px; color: var(--texte-2); margin: 0 4px 3px; display: flex; gap: 6px; align-items: center; }
.tour .qui button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.bulle { padding: 8px 12px; border-radius: 14px; background: var(--inter-fond); border: 1px solid var(--bord); color: var(--inter); }
.tour.moi .bulle { background: var(--moi-fond); border-color: transparent; color: var(--moi); }
.bulle .phrase { cursor: pointer; border-radius: 4px; }
.bulle .phrase:hover { background: var(--attention-fond); }
.provisoire { opacity: .55; font-style: italic; }

/* copilote */
.copilote .defile { display: grid; gap: 18px; align-content: start; }
.alerte { background: var(--attention-fond); color: var(--attention); border-radius: 10px; padding: 10px 12px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.alerte button { margin-left: auto; }
.carte-sug { padding: 10px 12px; border-left: 4px solid var(--accent); display: grid; gap: 2px; animation: arrivee .35s ease-out; }
.carte-sug.ancienne { opacity: .55; border-left-color: var(--bord); }
.carte-sug .type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.carte-sug .texte { font-weight: 600; font-size: 16px; }
.carte-sug .pourquoi { font-size: 13px; color: var(--texte-2); }
@keyframes arrivee { from { transform: translateY(-6px); opacity: 0; } }
.pile { display: grid; gap: 8px; }
.objectif { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.objectif input { margin-top: 3px; }
.objectif.fait span { text-decoration: line-through; color: var(--texte-2); }
.point { display: flex; gap: 8px; font-size: 14px; align-items: baseline; }
.cat { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.cat.engagement, .cat.decision { background: var(--ok-fond); color: var(--ok); }
.cat.risque, .cat.objection { background: var(--danger-fond); color: var(--danger); }
.cat.chiffre { background: var(--accent-doux); color: var(--accent); }
.verif { padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; }
.verif .aff { font-weight: 600; }
.verdict { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; justify-self: start; }
.verdict.confirme { background: var(--ok-fond); color: var(--ok); }
.verdict.nuance { background: var(--attention-fond); color: var(--attention); }
.verdict.faux { background: var(--danger-fond); color: var(--danger); }
.verdict.inverifiable, .verdict.en_attente, .verdict.erreur { background: var(--surface-2); color: var(--texte-2); }
.sources { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sources a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.reponse { padding: 10px 12px; font-size: 14px; display: grid; gap: 4px; }
.reponse .q { color: var(--texte-2); font-size: 13px; }
.question-copilote { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--bord); background: var(--surface); }
.question-copilote input { flex: 1; }
.chargement::after { content: "…"; animation: points 1.2s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes points { from { width: 0; } to { width: 1.2em; } }

/* ---------- compte rendu */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 16px; overflow-x: auto; }
.onglets button { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--texte-2); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets button.actif { color: var(--texte); border-bottom-color: var(--accent); }
.markdown { padding: 22px 26px; line-height: 1.6; }
.markdown h1 { font-size: 22px; margin: 0 0 8px; }
.markdown h2 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--texte); margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--bord); }
.markdown h3 { font-size: 15px; margin: 18px 0 6px; }
.markdown ul, .markdown ol { padding-left: 22px; margin: 6px 0; }
.markdown p { margin: 8px 0; }
.markdown blockquote { margin: 8px 0; padding: 6px 14px; border-left: 3px solid var(--bord); color: var(--texte-2); }
.markdown code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.table-defile { overflow-x: auto; margin: 10px 0; }
.markdown table { border-collapse: collapse; width: 100%; font-size: 14px; }
.markdown th, .markdown td { border: 1px solid var(--bord); padding: 6px 10px; text-align: left; vertical-align: top; }
.markdown th { background: var(--surface-2); }
.outils-cr { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
audio { width: 100%; margin-bottom: 14px; }
.attente-cr { padding: 40px 20px; text-align: center; display: grid; gap: 10px; place-items: center; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--bord); border-top-color: var(--accent); border-radius: 50%; animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--texte); color: var(--fond);
  padding: 10px 16px; border-radius: 10px; z-index: 10; max-width: calc(100% - 32px); box-shadow: var(--ombre);
}

@media (max-width: 760px) {
  .colonnes { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .onglets-mobile { display: flex; background: var(--surface); border-bottom: 1px solid var(--bord); }
  .onglets-mobile button { flex: 1; border: 0; background: none; padding: 10px; font-weight: 600; color: var(--texte-2); border-bottom: 2px solid transparent; }
  .onglets-mobile button.actif { color: var(--texte); border-bottom-color: var(--accent); }
  .onglets-mobile .badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; margin-left: 4px; }
  .colonne + .colonne { border-left: 0; }
  .colonnes[data-vue=transcription] .copilote, .colonnes[data-vue=copilote] .transcription { display: none; }
  .tour { max-width: 94%; }
  .markdown { padding: 16px; }
  .barre .masquable { display: none; }
  .ratio .libelle { display: none; }
  .ratio .jauge { min-width: 80px; }
}