/* ============================================================================
   Design system Eficio CIO360 — « productivity » (v35, retenu le 2026-07-20)
   TROIS COULEURS : noir · orange · blanc. Les gris sont des teintes de noir.
     noir   = textes, états validés / figés / complétés
     orange = accent UNIQUE (actions primaires, alertes, criticité élevée)
     blanc  = fond unique, pleine page (les cartes sont délimitées par --ef-line)
   Les tokens --ef-green / --ef-blue / --ef-amber / --ef-red sont CONSERVÉS mais
   REPLIÉS sur le noir et l'orange : la couleur disparaît partout d'un coup, sans
   réécrire les centaines de règles qui les consomment. Ne PAS leur redonner une
   teinte propre — ce sont des alias de compatibilité, pas des couleurs.
   Source unique : ce fichier. Le skill setup-cio-workflow en copie un miroir.
   ============================================================================ */
:root {
  --ef-orange: #F15A22;
  --ef-orange-deep: #D8480F;
  /* Texte blanc sur --ef-orange = 3,37:1 (echoue AA). Sur --ef-orange-encre =
     5,82:1 (AA OK) -- c'est la teinte des CTA orange a texte blanc. */
  --ef-orange-encre: #B23F0E;
  --ef-amber: #F15A22;
  --ef-ink: #141413;
  --ef-ink-soft: #3F3E3B;
  --ef-muted: #6F6D67; /* 5,17:1 sur blanc, 4,74:1 sur --ef-bg-2 -- AA */
  --ef-line: #EBEAE8;
  --ef-line-strong: #DEDDDA;
  --ef-line-stronger: #C9C7C3;
  --ef-card: #FFFFFF;
  --ef-bg: #FFFFFF;
  --ef-bg-2: #F5F5F4;
  --ef-green: #141413;
  --ef-blue: #141413;
  --ef-red: #D8480F;

  --ef-orange-wash: #FEEFE7;
  --ef-green-wash: #F5F5F4;
  --ef-blue-wash: #F5F5F4;

  --shadow-sm: 0 1px 2px rgba(20, 20, 19, .04);
  --shadow-md: 0 1px 2px rgba(20, 20, 19, .04), 0 8px 24px rgba(20, 20, 19, .05);
  --shadow-lg: 0 2px 4px rgba(20, 20, 19, .05), 0 18px 40px rgba(20, 20, 19, .08);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --font: -apple-system, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --space: 8px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ef-bg);
  color: var(--ef-ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

.ic { display: inline-flex; align-items: center; }
.ic svg { display: block; }

button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), transform .12s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ef-blue); outline-offset: 2px; }

.btn-primary {
  /* Doctrine orange : CTA de marque, texte blanc -> --ef-orange-encre pour
     rester AA (--ef-orange seul echoue le contraste en texte blanc). */
  background: var(--ef-orange-encre);
  color: #fff;
  width: 100%;
  justify-content: center;
  padding: 13px 16px;
  font-size: 15px;
}
.btn-primary:hover { filter: brightness(.94); }

.btn-ghost {
  background: transparent;
  border-color: var(--ef-line-strong);
  color: var(--ef-ink-soft);
}
.btn-ghost:hover { background: var(--ef-bg-2); color: var(--ef-ink); }

/* ============================ LOGIN ============================ */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 82% -8%, var(--ef-orange-wash), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, var(--ef-bg-2), transparent 55%),
    var(--ef-bg);
}
.login-card {
  width: 100%;
  max-width: 392px;
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px 30px;
}
/* Logo Eficio : hauteur fixe + width auto -> proportions preservees (779x289) */
.brand-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
}
.brand-logo--login {
  height: 42px;
  margin: 0 0 2px;
}
.login-kicker {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ef-muted);
}
.login-title {
  margin: 4px 0 6px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.login-sub { margin: 0 0 26px; color: var(--ef-ink-soft); font-size: 15px; }

.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ef-ink-soft);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ef-line-strong);
  border-radius: var(--r-sm);
  background: var(--ef-bg);
  color: var(--ef-ink);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s;
}
.field input:focus {
  outline: none;
  border-color: var(--ef-orange);
  background: #fff;
  box-shadow: 0 0 0 3px var(--ef-orange-wash);
}
.login-error {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ef-red);
  font-weight: 600;
}
.login-foot { margin: 22px 0 0; font-size: 12px; color: var(--ef-muted); text-align: center; }

/* ====================== COQUILLE (rail + pages) ======================
   Portee de la maquette v35 « productivity ». Le rail est le feuillet de
   garde : fond --ef-bg-2, aucune bordure, l'onglet actif est une carte
   blanche posee dessus. La zone de travail est pleine largeur (full-bleed) :
   plus de conteneur centre a 1180px. */
.app { display: flex; min-height: 100vh; }

/* Le rail defile AVEC la page, comme dans la maquette : pas de sticky, pas de
   hauteur imposee, pas de zone de defilement propre. Un rail fige donnerait une
   coquille d'application -- le contenu glissant dans un cadre immobile -- alors
   que le dashboard doit se lire comme un site ordinaire, d'une seule coulee. */
.side {
  width: 212px;
  flex-shrink: 0;
  background: var(--ef-bg-2);
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 2px 10px 14px; }
.side-suite {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ef-muted);
}
.side-client { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; padding: 0 10px 3px; }
.side-clientsub {
  font-size: 11.5px;
  color: var(--ef-muted);
  padding: 0 10px 18px;
  font-variant-numeric: tabular-nums;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--ef-ink-soft);
  cursor: pointer;
  font-size: 13.5px;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.nav:hover { background: var(--ef-line); color: var(--ef-ink); }
.nav:focus-visible { outline: 2px solid var(--ef-ink); outline-offset: 2px; }
.nav.is-on { background: var(--ef-card); color: var(--ef-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav .ic { color: var(--ef-muted); transition: color .14s var(--ease-out); }
.nav.is-on .ic { color: var(--ef-orange); }
.nav-sub { padding-left: 28px; font-size: 13px; }

.navgrp {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 10px 5px;
  color: var(--ef-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ef-line); }
.btn-side { width: 100%; justify-content: center; padding: 9px 12px; font-size: 13px; }

/* ============================ PAGES ============================ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 28px 30px 38px; }
.page { display: none; }
/* SURTOUT PAS de fill-mode "both"/"forwards" ici : meme avec un `to` explicite
   (transform: none), Chrome retient apres coup une valeur de transform
   INTERPOLEE (une matrice identite, jamais le mot-cle "none") tant que
   l'animation reste "tenue" sur l'element -- or toute valeur de transform
   autre que le mot-cle "none" ouvre un nouveau containing block pour les
   descendants en position:fixed. Ca casse SILENCIEUSEMENT toute modale
   (.modal, inset:0) nichee dans une page (constate sur #bq-modal, #18 : plein
   ecran blanc, la modale se dimensionne/positionne sur la section au lieu du
   viewport). Sans fill-mode, l'animation se retire proprement a la fin et
   .page.is-on retombe sur son style de repos (transform: none, litteral) --
   meme rendu visuel, containing block intact. */
.page.is-on { display: block; animation: page-in .28s var(--ease-out); }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hd { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
.sub { font-size: 13.5px; color: var(--ef-muted); margin: 5px 0 24px; }

/* Page dont le contenu n'est pas encore porte depuis la maquette. */
.soon {
  border: 1px dashed var(--ef-line-strong);
  border-radius: var(--r-lg);
  padding: 56px 30px;
  text-align: center;
  background: var(--ef-bg-2);
}
.soon-ic { color: var(--ef-line-stronger); }
.soon-title { margin: 12px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.soon-sub { margin: 6px auto 0; font-size: 13.5px; color: var(--ef-muted); max-width: 46ch; }

.kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-orange);
}

/* ====================== HERO (carte + bandeau KPI) ======================
   Porte de la maquette v35. La carte du heros ne leve pas au survol : c'est
   un bandeau d'identite, pas un element cliquable. */
.hero { display: grid; gap: 24px; }

.card {
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.herocard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 30px 34px;
}
.herocard:hover { transform: none; box-shadow: var(--shadow-sm); }
.herotext { min-width: 0; }
.kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-orange);
}
.herottl { margin: 7px 0 0; font-size: 33px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.herosub { margin: 7px 0 0; font-size: 15.5px; color: var(--ef-ink-soft); max-width: 60ch; }
.herochips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ef-ink-soft);
  background: var(--ef-bg-2);
  border-radius: 999px;
  padding: 6px 12px;
}
.chip .ic { color: var(--ef-muted); }

.ringwrap { position: relative; flex: none; width: 180px; height: 180px; }
.ringwrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ringtrk { fill: none; stroke: var(--ef-bg-2); stroke-width: 14; }
.ringarc { fill: none; stroke: var(--ef-orange); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
.ringmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ringval { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.ringval small { font-size: 19px; font-weight: 600; color: var(--ef-muted); margin-left: 1px; }
.ringlabel { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ef-muted); }

.kband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kcol {
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.kcol:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ktop { display: flex; align-items: center; gap: 9px; }
.ktop .ic { color: var(--ef-orange); flex: none; }
.kl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ef-muted); line-height: 1.35; }
.kv {
  margin: 22px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ef-orange);
}
.kv small { font-size: 16px; color: var(--ef-muted); font-weight: 700; margin-left: 3px; letter-spacing: -0.01em; }
.ksub { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ef-ink); line-height: 1.4; }
.knote { margin: 6px 0 0; font-size: 11.5px; color: var(--ef-muted); line-height: 1.4; }

/* ============================ TITRES DE SECTION ============================ */
.sec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.sec small { font-weight: 400; font-size: 11.5px; color: var(--ef-muted); }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--ef-line); align-self: center; }

/* ====================== ETAPES (5 stages) ====================== */
.stepgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
.stage {
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stagehd { display: flex; align-items: center; gap: 9px; }
.snode {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--ef-bg-2); color: var(--ef-muted);
}
.stage.is-done .snode { background: var(--ef-orange); color: #fff; }
.stage.is-run .snode { background: var(--ef-ink); color: #fff; }
.sttl { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }
.spct { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.spct.mut { color: var(--ef-muted); font-weight: 500; font-size: 12px; }
.sbar { height: 5px; border-radius: 999px; background: var(--ef-bg-2); margin-top: 12px; overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 999px; background: var(--ef-line-strong); transition: width .8s var(--ease-out); }
.sbar i.done { background: var(--ef-orange); }
.sbar i.run { background: var(--ef-ink); }
.stime { margin-top: 10px; font-size: 11.5px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.srows { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ef-line); }
.srow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3.5px 0; }
.srow .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.srow .nm { flex: 1; color: var(--ef-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .t { color: var(--ef-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.dot.done { background: var(--ef-orange); }
.dot.run { background: var(--ef-ink); }
.dot.wait { background: var(--ef-line-strong); }

/* ====================== BUDGET & PRIORISATION ====================== */
.attgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.attcard {
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  background: var(--ef-card);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.attcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.atthd { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px; }
.atthd .ic { color: var(--ef-orange); margin-top: 1px; }
.attttl { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.attsub { font-size: 11px; color: var(--ef-muted); margin-top: 2px; }

/* barres verticales (investissement par type / priorite) */
.vgrp { display: flex; align-items: stretch; gap: 12px; height: 150px; }
.vbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vbar .vtrk { position: relative; width: 100%; max-width: 44px; flex: 1; display: flex; align-items: flex-end; }
.vbar .vbv {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-ink);
}
.vbar .vbf { width: 100%; border-radius: 4px 4px 0 0; background: var(--ef-orange); transition: height .8s var(--ease-out); }
.vbar .vbf.b1 { background: color-mix(in srgb, var(--ef-orange) 62%, #FFF); }
.vbar .vbf.b2 { background: color-mix(in srgb, var(--ef-orange) 34%, #FFF); }
.vbar .vbl { font-size: 10.5px; color: var(--ef-muted); margin-top: 7px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* bulles (budget actuel vs total) */
.cgrp { display: flex; align-items: center; justify-content: space-around; gap: 12px; height: 150px; }
.cbub { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.cbubc {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--ef-orange); color: #fff;
}
.cbubc.b1 { background: color-mix(in srgb, var(--ef-orange) 62%, #FFF); }
.cbubc.empty { background: transparent; border: 1.5px dashed var(--ef-line-stronger); color: var(--ef-muted); }
.cbubl { font-size: 10.5px; color: var(--ef-muted); text-align: center; white-space: nowrap; }

/* ====================== GO TO JAIL / QUICK WINS ====================== */
.torhd {
  display: grid; grid-template-columns: minmax(180px, 300px) 1fr 1fr;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--ef-line); margin-bottom: 4px;
}
.torhd .thg { text-align: right; padding-right: 12px; color: var(--ef-orange); }
.torhd .thq { padding-left: 12px; color: var(--ef-ink); }
.torrow {
  display: grid; grid-template-columns: minmax(180px, 300px) 1fr 1fr;
  align-items: center; padding: 5px 0; border-radius: 6px; cursor: default;
  transition: background .12s var(--ease-out);
}
.torrow:hover { background: var(--ef-bg-2); }
.trl { font-size: 12px; color: var(--ef-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trg { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-right: 12px; }
.trq { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.tdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tdot.g { background: var(--ef-orange); }
.tdot.q { background: var(--ef-ink); }
.tnum2 { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-muted); }
.tzero { font-size: 11px; color: var(--ef-line-stronger); }
.torbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--ef-bg-2); color: var(--ef-ink-soft);
}

/* ====================== MATURITE & CRITICITE ====================== */
.matwrap { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.matcard {
  background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); padding: 18px 20px;
}
.thead {
  display: grid; grid-template-columns: 26px 1fr 214px 96px 18px; column-gap: 12px; align-items: end;
  padding: 0 2px 9px; border-bottom: 1px solid var(--ef-line);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ef-muted);
}
.thead .thc { text-align: center; }
.thead .thr2 { text-align: right; }
.thead .ic { vertical-align: -0.16em; }

.trow {
  display: grid; grid-template-columns: 26px 1fr 214px 96px 18px; column-gap: 12px; align-items: center;
  padding: 10px 2px; border-bottom: 1px solid var(--ef-line); border-radius: 6px;
  transition: background .12s var(--ease-out);
}
.trow:hover { background: var(--ef-bg-2); }
.trow:last-child { border-bottom: 0; }
.trow .chev { color: var(--ef-muted); opacity: 0; transition: opacity .12s var(--ease-out), transform .12s var(--ease-out); }
.trow:hover .chev { opacity: 1; transform: translateX(2px); }
.tnum { font-size: 12px; color: var(--ef-muted); font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; }
.tnm { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; min-width: 0; }
.tnm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag { color: var(--ef-orange); flex-shrink: 0; }
.mcell { display: flex; align-items: center; gap: 12px; }
.mnc { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--ef-muted); text-align: center; }
.slider { position: relative; flex: 1; min-width: 0; height: 16px; }
.strack { position: absolute; top: 5px; left: 8px; right: 8px; height: 6px; }
.rest { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--ef-bg-2); }
.tk { position: absolute; top: 0; width: 1px; height: 6px; background: var(--ef-line-strong); }
.thumb {
  position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ef-card); border: 4px solid var(--ef-ink); transform: translateX(-50%);
  box-shadow: 0 0 0 1px var(--ef-line-strong);
}
.thval {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-ink);
  letter-spacing: -0.01em; white-space: nowrap;
}
.cnum { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -0.02em; }
.cnum small { font-weight: 500; color: var(--ef-muted); font-size: 11px; }

details.cmmi { margin: 16px 0 0; border: 1px solid var(--ef-line); border-radius: var(--r-md); padding: 2px 16px; background: var(--ef-card); }
details.cmmi summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 12px 0; }
details.cmmi summary::-webkit-details-marker { display: none; }
details.cmmi summary .cv { margin-left: auto; color: var(--ef-muted); transition: transform .18s var(--ease-out); }
details.cmmi[open] summary .cv { transform: rotate(180deg); }
.cmmi .lr { display: grid; grid-template-columns: 22px 168px 1fr; align-items: start; gap: 12px; padding: 6px 0; font-size: 12px; }
.cmmi .lr:first-child { border-top: 1px solid var(--ef-line); padding-top: 12px; }
.cmmi .bd {
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cmmi .nn { font-weight: 600; }
.cmmi .dd { color: var(--ef-ink-soft); line-height: 1.5; }
.cmmi .pad { padding-bottom: 12px; }

.matright {
  position: sticky; top: 12px; border: 1px solid var(--ef-line); border-radius: var(--r-md);
  background: var(--ef-card); box-shadow: var(--shadow-sm); padding: 20px; min-height: 200px;
}
.matempty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 168px; color: var(--ef-muted); font-size: 12.5px; line-height: 1.5; text-align: center; padding: 12px 8px;
}
.matempty .ic { color: var(--ef-line-stronger); }
.matrecottl {
  font-size: 10px; font-weight: 700; color: var(--ef-orange); text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ef-line);
}
.matrecolist { display: flex; flex-direction: column; gap: 16px; }
.matrecoitem { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.matrecotext { font-size: 12.5px; line-height: 1.55; color: var(--ef-ink-soft); }
.rbadge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; background: var(--ef-orange-wash); color: var(--ef-orange-deep);
}
/* ====================== STAKEHOLDERS / VERBATIMS ====================== */
.people-layout { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.people { display: flex; flex-direction: column; gap: 10px; }
.person {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  width: 100%;
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out);
}
.person:hover { box-shadow: var(--shadow-md); }
.person:focus-visible { outline: 2px solid var(--ef-blue); outline-offset: 2px; }
.person.is-active { border-color: var(--ef-orange); box-shadow: 0 0 0 1px var(--ef-orange), var(--shadow-md); }
.person.is-all { justify-content: center; font-weight: 700; color: var(--ef-ink-soft); padding: 11px 14px; }
.person.is-all.is-active { color: var(--ef-orange); }
.person-photo {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--ef-line-strong);
  background: var(--ef-bg-2);
}
.person-id { min-width: 0; }
.person-nom { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.person-role { font-size: 12.5px; color: var(--ef-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-tags { margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.persona-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ef-amber); background: #FCF1DE; border-radius: 999px; padding: 2px 7px; }
.person-itw { font-size: 10.5px; font-weight: 600; color: var(--ef-muted); font-variant-numeric: tabular-nums; }

.verbatims-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tagfilters { display: flex; gap: 7px; flex-wrap: wrap; }
.pill {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ef-line-strong);
  background: var(--ef-card);
  color: var(--ef-ink-soft);
  transition: all .15s var(--ease-out);
}
.pill:hover { border-color: var(--ef-muted); }
.pill.is-active { background: var(--ef-ink); color: #fff; border-color: var(--ef-ink); }
.pill:focus-visible { outline: 2px solid var(--ef-blue); outline-offset: 2px; }
.verbatims-count { font-size: 13px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }

.verbatims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vb {
  position: relative;
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
}
.vb-quote { position: absolute; top: 12px; right: 14px; color: var(--ef-line-strong); }
.vb-theme { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ef-muted); margin-bottom: 8px; }
.vb-text { font-size: 15px; line-height: 1.5; color: var(--ef-ink); font-weight: 500; }
.vb-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
.tag-risque { color: var(--ef-red); background: #F8E7E2; }
.tag-lacune { color: var(--ef-orange-deep); background: var(--ef-orange-wash); }
.tag-opportunite { color: var(--ef-green); background: var(--ef-green-wash); }
.tag-contexte { color: var(--ef-ink-soft); background: var(--ef-bg-2); }
.vb-src { font-size: 11.5px; font-weight: 600; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.vb-who { font-size: 11.5px; color: var(--ef-muted); }
.vb-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--ef-muted); font-size: 14px; }


/* ============================== COCKPIT ==============================
   Entree editoriale a deux colonnes : observation a gauche, recommandation a
   droite, reliees par une fleche. Tout le reste (sources, caracteristiques,
   actions) est masque au repos et se revele par le bouton Details. */
.ckwrap { display: flex; flex-direction: column; margin-top: 22px; }

.thrail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  position: sticky; top: 0; z-index: 2; background: var(--ef-bg);
  padding: 8px 0; border-top: 1px solid var(--ef-line); border-bottom: 1px solid var(--ef-line);
}
.thr {
  position: relative; flex: none; min-width: 44px; height: 32px;
  border: none; background: transparent; font-family: inherit;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ef-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px;
  transition: color .12s var(--ease-out);
}
.thr:hover { color: var(--ef-ink-soft); }
.thr.is-on { color: var(--ef-orange); font-weight: 700; }
.thr:focus-visible { outline: 2px solid var(--ef-ink); outline-offset: 2px; border-radius: 6px; }
/* le chevron ne prend sa place que sur l'onglet actif */
.thr .thcur { width: 0; opacity: 0; transform: rotate(-90deg); overflow: hidden; }
.thr.is-on .thcur { width: 12px; opacity: 1; transform: rotate(0deg); transition: all .26s var(--ease-out); }
.thr .fdot { position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ef-orange); }
.thr[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: var(--ef-ink); color: #fff; font-size: 10.5px; font-weight: 500;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 30;
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
}
.thr[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.ckpanel { flex: 1; min-width: 0; padding: 22px 0 10px; }
.ckhead2 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cktitle { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.cktitle .tno2 { color: var(--ef-muted); font-weight: 500; font-variant-numeric: tabular-nums; width: 30px; flex: none; }
.ckpills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 24px 40px; font-size: 12px; color: var(--ef-ink-soft); }
.cmeta { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ef-line-strong); border-radius: 12px; background: var(--ef-card); padding: 5px 11px; }
.cmlab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.cmval { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmval small { font-weight: 500; color: var(--ef-muted); }

/* --- boutons du cockpit --- */
.ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 9px;
  border: 1px solid var(--ef-line-strong); border-radius: 12px;
  background: var(--ef-card); color: var(--ef-ink-soft); font-family: inherit; font-size: 12.5px;
  cursor: pointer; transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.ib:hover { background: var(--ef-bg-2); color: var(--ef-ink); }
.obtn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
  border: 1px solid var(--ef-line-strong); border-radius: 12px;
  background: var(--ef-card); color: var(--ef-ink); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .14s var(--ease-out), border-color .14s var(--ease-out);
}
.obtn:hover { background: var(--ef-bg-2); }
/* Doctrine orange : action primaire du cockpit (Valider, Cristalliser) --
   texte blanc sur --ef-orange-encre pour rester AA (voir token :root). */
.obtn.primary { background: var(--ef-orange-encre); border-color: var(--ef-orange-encre); color: #fff; }
.obtn.primary:hover { filter: brightness(.94); }
/* Suppression : action destructive, tenue a l'ecart de la doctrine orange
   « action primaire » -- teinte discrete au repos, franchement orange une
   fois armee par le premier clic (etat "Confirmer ?", voir handleDeleteClick). */
.obtn.danger { color: var(--ef-orange-deep); }
.obtn.danger:hover { background: var(--ef-orange-wash); border-color: var(--ef-orange); }
.obtn.danger.confirming,
.obtn.danger.confirming:hover {
  background: var(--ef-orange-encre); border-color: var(--ef-orange-encre); color: #fff;
}
.obtn.danger.confirming:hover { filter: brightness(.94); }

/* --- carte observation --- */
.ocard {
  position: relative; padding: 26px 30px 22px; margin-bottom: 16px;
  background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: var(--r-md);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.ocard:hover { border-color: var(--ef-line-strong); }
.ocard.editing { border-color: var(--ef-ink); box-shadow: 0 0 0 1px var(--ef-ink); }
/* bloc valide par le CIO : texte fige, edition directe bloquee */
.ocard.appr { background: var(--ef-bg-2); }
.ocard.appr .obs-text, .ocard.appr .reco-text { color: var(--ef-ink-soft); cursor: default; }

.olink { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: center; margin-bottom: 14px; }
.olcell { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ollab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); white-space: nowrap; }
.olid { font-size: 12px; font-weight: 700; color: var(--ef-ink); font-variant-numeric: tabular-nums; }
/* provenance : IA = genere et intact, CIO = ecrit ou valide par le CIO */
.obadge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; }
.obadge.ia { background: var(--ef-bg-2); border: 1px solid var(--ef-line-strong); color: var(--ef-ink-soft); }
.obadge.cio { background: var(--ef-orange-wash); border: 1px solid var(--ef-orange); color: var(--ef-orange-deep); }

.ocols { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.ocol-l { padding-right: 26px; min-width: 0; }
.ocol-r { padding-left: 26px; min-width: 0; }
.colarrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ef-muted); display: flex; pointer-events: none; }
.obs-text, .reco-text {
  font-size: 15px; line-height: 1.62; color: var(--ef-ink);
  margin: -2px -8px; padding: 2px 8px; border-radius: 8px; cursor: text;
  transition: background .14s var(--ease-out);
}
.obs-text { font-weight: 500; letter-spacing: -0.005em; }
.ocard:not(.editing):not(.appr) .obs-text:hover,
.ocard:not(.editing):not(.appr) .reco-text:hover { background: var(--ef-bg-2); }
.otext-vide { color: var(--ef-muted); font-style: italic; }

/* zone meta : masquee au repos, revelee par Details */
.ometa { display: none; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ef-line); }
.ocard.open .ometa { display: block; animation: page-in .22s var(--ease-out) both; }
/* Supprimer vit desormais ici (details), pas dans la barre de repos -- une
   action destructive ne doit pas cotoyer les actions frequentes de la carte. */
.ometa-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ef-line); }
.pline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.valmeta { font-size: 10.5px; line-height: 1.5; color: var(--ef-muted); }
.pv { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.pvlab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.pvval { font-weight: 600; color: var(--ef-ink-soft); }

/* sources : verbatims cliquables, discrets dans la ligne des parametres */
.srcline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 11.5px; color: var(--ef-muted); }
.srclbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.srctag {
  border: 0; background: transparent; padding: 0; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--ef-ink-soft); font-variant-numeric: tabular-nums;
  cursor: pointer; border-bottom: 1px dotted var(--ef-line-stronger);
  transition: color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.srctag:hover { color: var(--ef-ink); border-bottom-color: var(--ef-muted); }
.srctag.none { color: var(--ef-muted); font-weight: 500; font-style: italic; border-bottom-style: dashed; cursor: default; }

.orest { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.ib.details { margin-right: auto; }
.ib.details .ic { transform: rotate(-90deg); transition: transform .18s var(--ease-out); }
.ocard.open .ib.details .ic { transform: rotate(0deg); }

/* --- mode edition --- */
.ocard.editing textarea.ed {
  width: 100%; min-height: 90px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.62;
  border: 1px solid var(--ef-line-strong); border-radius: 12px;
  background: var(--ef-bg); color: var(--ef-ink); padding: 10px 12px; box-sizing: border-box;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.ocard.editing textarea.ed:focus { outline: none; background: var(--ef-card); border-color: var(--ef-orange); box-shadow: 0 0 0 3px var(--ef-orange-wash); }
/* carrousel de reutilisation d'une recommandation existante (recopick) */
.recopick { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; flex-wrap: wrap; }
.ib.rmini { height: 24px; min-width: 24px; padding: 0 4px; border-radius: 8px; }
.rpos { font-size: 10.5px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
/* reco vierge : elle n'existe pas encore en base, elle le dit */
.rbadge.neuve { background: var(--ef-bg-2); color: var(--ef-ink-soft); border: 1px dashed var(--ef-line-stronger); text-transform: lowercase; }
.ib.rmini[disabled] { opacity: .4; cursor: default; }
.rwarn { font-size: 10.5px; line-height: 1.4; color: var(--ef-orange-deep); margin-left: auto; text-align: right; }

/* trace de la version IA, avec retour possible */
.hist { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 11.5px; }
.hl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.hv { color: var(--ef-muted); line-height: 1.5; flex: 1; min-width: 0; }
.hr { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ef-ink-soft); cursor: pointer; white-space: nowrap; }
.hr:hover { color: var(--ef-orange); }

.edchars { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ef-line); }
.seggrp { display: flex; flex-direction: column; gap: 6px; }
.seglab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.segbtns { display: inline-flex; gap: 4px; }
.segb {
  height: 28px; padding: 0 11px; border: 1px solid var(--ef-line-strong); border-radius: 12px;
  background: var(--ef-card); color: var(--ef-ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.segb:hover { background: var(--ef-bg-2); }
.segb.is-on { background: var(--ef-ink); border-color: var(--ef-ink); color: #fff; }

.oactions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.kbd { margin-right: auto; font-size: 10.5px; color: var(--ef-muted); }

.addobs {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  height: 44px; border: 1px dashed var(--ef-line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--ef-muted); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .14s var(--ease-out), color .14s var(--ease-out), background .14s var(--ease-out);
}
.addobs:hover { border-color: var(--ef-orange); color: var(--ef-orange); background: var(--ef-orange-wash); }

.ckempty { padding: 40px 24px; text-align: center; color: var(--ef-muted); font-size: 13.5px; }

/* toast d'enregistrement, par carte */
.toast {
  position: absolute; top: 14px; right: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ef-orange-deep);
  opacity: 0; transition: opacity .2s var(--ease-out); pointer-events: none;
}
.toast.show { opacity: 1; }

/* --- modale des sources --- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 20, 19, .38);
}
.dialog {
  width: 100%; max-width: 640px; max-height: 80vh; overflow-y: auto;
  background: var(--ef-card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 26px 28px;
}
/* deux colonnes ont besoin d'air : les verbatims, eux, restent en colonne
   etroite parce qu'ils se lisent comme du texte suivi */
.dialog.large { max-width: 860px; }
.dlghd { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dlgttl { flex: 1; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
/* historique : deux colonnes calquees sur la carte en saisie --
   l'observation a gauche, la recommandation a droite */
.hcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.hcol { min-width: 0; }
.hcol + .hcol { border-left: 1px solid var(--ef-line); padding-left: 28px; }
.hcolhd { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; }
.hcollab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.hcolid { font-size: 12px; font-weight: 700; color: var(--ef-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .hcols { grid-template-columns: 1fr; gap: 22px; }
  .hcol + .hcol { border-left: 0; padding-left: 0; border-top: 1px solid var(--ef-line); padding-top: 18px; }
}

/* historique : une PILE DE VERSIONS, la courante en haut. Aucun filet entre
   les versions -- c'est l'espace et l'estompe qui separent, comme dans un
   journal qu'on parcourt du regard. */
.hpile { display: flex; flex-direction: column; gap: 18px; padding-top: 14px; }
/* signature a gauche, texte au centre, horodatage a droite */
.hver { display: grid; grid-template-columns: auto 1fr auto; gap: 0 12px; align-items: start; }
/* les versions passees s'effacent d'un cran : la lecture tombe sur la bonne */
.hver .htexte { font-size: 13.5px; line-height: 1.55; color: var(--ef-ink-soft); }
.hver.est-courante .htexte { font-size: 14.5px; color: var(--ef-ink); font-weight: 500; }
/* le filet noir dit « c'est celle-ci » : pas besoin d'etiquette en plus */
.hver.est-courante { border-left: 2px solid var(--ef-ink); padding-left: 12px; margin-left: -14px; }
.hdroite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hquand { font-size: 11px; color: var(--ef-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hqui {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px;
  line-height: 1.5; margin-top: 1px;
}
.hqui.cio { background: var(--ef-ink); color: #fff; }
.hqui.ia { background: var(--ef-bg-2); border: 1px solid var(--ef-line-strong); color: var(--ef-ink-soft); }
.hqui.origine { background: transparent; border: 1px dashed var(--ef-line-stronger); color: var(--ef-muted); }
.hreact {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--ef-line-strong); border-radius: 9px; background: var(--ef-card);
  color: var(--ef-ink-soft); cursor: pointer;
  transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.hreact:hover { background: var(--ef-ink); color: #fff; border-color: var(--ef-ink); }
.hreact[disabled] { opacity: .5; cursor: default; }
.hvide { color: var(--ef-muted); font-style: italic; }
.hfleche { color: var(--ef-line-stronger); }

/* le reste du journal, replie : parametres, statut, rattachements */
.hplus { margin-top: 24px; border-top: 1px solid var(--ef-line); padding-top: 12px; }
.hplussum {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 600; color: var(--ef-ink-soft); padding: 2px 0;
}
.hplussum::-webkit-details-marker { display: none; }
.hplussum .ic, .hplussum svg { transition: transform .18s var(--ease-out); transform: rotate(-90deg); }
.hplus[open] .hplussum svg { transform: rotate(0deg); }
.hpluscount { font-size: 10.5px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.hevts { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 2px; }
.hevt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.hevtchamp { font-weight: 700; color: var(--ef-ink); }
.hevtval { color: var(--ef-ink-soft); }
.hevtquand { margin-left: auto; font-size: 11px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }

.srcitem { padding: 14px 0; border-top: 1px solid var(--ef-line); }
.srcwho { font-size: 11.5px; font-weight: 700; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.srcq { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ef-ink); font-family: var(--font-voice, Georgia, "Times New Roman", serif); }

@media (max-width: 900px) {
  .olink, .ocols { grid-template-columns: 1fr; }
  .ocol-l { padding-right: 0; padding-bottom: 18px; }
  .ocol-r { padding-left: 0; padding-top: 18px; border-top: 1px solid var(--ef-line); }
  .colarrow { display: none; }
  .ocard { padding: 20px 18px 18px; }
}


/* ===================== DoD & CRISTALLISATION (ADR 0010) =====================
   Stepper « Progression » : les conditions calculees plus haut (jamais
   cochables) se lisent en 4 bulles reliees par un fil, gate le bouton
   Cristalliser tant qu'un repere manque ou qu'une observation n'est pas
   approuvee. Repris du gabarit v35, tokens adaptes au systeme trois couleurs. */
.dodcard {
  border: 1px solid var(--ef-line); border-radius: var(--r-md); background: var(--ef-card);
  box-shadow: var(--shadow-sm); padding: 18px 18px 16px; margin-bottom: 20px;
}
.dodcard.crystal { background: var(--ef-bg-2); border-color: var(--ef-line-strong); }
.dodbar { height: 5px; border-radius: 999px; background: var(--ef-bg-2); overflow: hidden; margin-bottom: 14px; }
.dodbar i { display: block; height: 100%; border-radius: 999px; background: var(--ef-orange); transition: width .45s var(--ease-out); }
/* stepper de la definition de termine : bulles reliees par un fil */
.dodsteps { display: flex; align-items: flex-start; margin: 14px 2px 6px; }
.dodstep { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 82px; text-align: center; }
.dodbub {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ef-line-stronger); background: var(--ef-card);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.dodstep.ok .dodbub { background: var(--ef-orange); border-color: var(--ef-orange); color: #fff; }
.dodsl { font-size: 11px; font-weight: 600; color: var(--ef-ink-soft); white-space: nowrap; }
.dodstep.ok .dodsl { color: var(--ef-ink); }
.dodsc { font-size: 10.5px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.dodlink {
  flex: 1; height: 2px; min-width: 18px; margin-top: 13px; border-radius: 1px; background: var(--ef-line);
  transition: background .16s var(--ease-out);
}
.dodlink.ok { background: var(--ef-orange); }
.dodfoot { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.dodhint { font-size: 11px; color: var(--ef-muted); line-height: 1.45; flex: 1; min-width: 160px; }
.dodinfo {
  position: relative; width: 22px; height: 22px; margin-right: auto; border-radius: 50%; border: 1px solid var(--ef-line-strong);
  color: var(--ef-muted); display: inline-flex; align-items: center; justify-content: center; cursor: default; flex: none;
}
.dodinfo:hover { color: var(--ef-ink); border-color: var(--ef-line-stronger); }
.dodinfo[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 0;
  background: var(--ef-ink); color: #fff; font-size: 10.5px; font-weight: 500; line-height: 1.5;
  padding: 6px 10px; border-radius: 6px; width: max-content; max-width: 280px; opacity: 0; pointer-events: none;
  transform: translateY(2px); transition: opacity .12s var(--ease-out), transform .12s var(--ease-out); z-index: 30;
}
.dodinfo[data-tip]:hover::after { opacity: 1; transform: translateY(0); }
.dodcrystal {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ef-orange-deep);
  background: var(--ef-card); border: 1px solid var(--ef-orange); border-radius: 999px; padding: 6px 13px;
}
/* case « aucune reco requise » : un choix du CIO, pas une donnee calculee */
.noreco { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ef-ink-soft); cursor: pointer; }
.noreco input { accent-color: var(--ef-orange); }
.obtn:disabled { opacity: .45; cursor: not-allowed; }
.obtn:disabled:hover { background: var(--ef-card); }
/* thematique cristallisee dans le rail : point plein, onglet en retrait */
.thr .cdot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ef-orange); }
.thr.cry { color: var(--ef-line-stronger); }
.thr.cry:hover { color: var(--ef-muted); }

/* ===================== CONTRE-ANALYSE (ADR 0014) =====================
   Rendu inline sous chaque carte concernee (plus de bloc pleine largeur en
   bas de thematique) : .canode est le conteneur rattache a la carte, .caitem
   reste le format d'une objection, reutilise tel quel. */
.canode { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ef-line); display: flex; flex-direction: column; gap: 10px; }
.canodehd { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ef-muted); }
.canodecount { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-muted); }
.caitem { background: var(--ef-bg-2); border: 1px solid var(--ef-line); border-radius: var(--r-sm); padding: 12px 14px; }
.cacible { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-orange-deep); letter-spacing: 0.04em; }
.caportee { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); margin-left: 8px; }
.catxt { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ef-ink); }

/* compteur de version par livrable (ADR 0011) */
.lver { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-muted); }
.lver.on { color: var(--ef-orange); }

/* ============================ FOOTER ============================ */
.footer {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--ef-line);
  text-align: center;
  font-size: 12.5px;
  color: var(--ef-muted);
  letter-spacing: 0.01em;
}

/* ============================ RESPONSIVE ============================ */
/* Points de rupture ALIGNES sur la maquette v35 validee :
   kband et stepgrid cassent a 1280 (et non 1024/1180), le bandeau budget tient
   ses 3 colonnes jusqu'a 900. Un portable 13" ouvert a 1280 doit voir la meme
   composition que la maquette, pas une version deja repliee. */
@media (max-width: 1280px) {
  .kband { grid-template-columns: repeat(2, 1fr); }
  .stepgrid { grid-template-columns: repeat(3, 1fr); }
  .thead, .trow { grid-template-columns: 26px 1fr 150px 76px 18px; }
}
@media (max-width: 1024px) {
  .people-layout { grid-template-columns: 1fr; }
  .people { display: grid; grid-template-columns: repeat(2, 1fr); }
  .person.is-all { grid-column: 1 / -1; }
}
/* Le panneau lateral de recommandations passe sous le tableau : il est pilote
   au survol, donc inutile de le garder colle sur un ecran etroit. */
@media (max-width: 900px) {
  .matwrap { grid-template-columns: 1fr; }
  .matright { position: static; }
  .stepgrid { grid-template-columns: repeat(2, 1fr); }
  .attgrid { grid-template-columns: 1fr; }
  .herocard { flex-direction: column; align-items: flex-start; gap: 24px; }
  /* Console d'agent : les deux actions passent sous le titre plutot que de
     serrer le libelle jusqu'a la cesure. */
  .agzhd { align-items: flex-start; }
  .agzact { margin-left: 0; width: 100%; }
}
/* Sous 900px le rail passe en bandeau horizontal defilable au-dessus des
   pages : la coquille reste utilisable sans hamburger ni panneau flottant. */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .side {
    width: auto;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ef-line);
  }
  /* Dans un rail defilable, tout doit refuser de retrecir : sans
     flex-shrink:0 le bloc de marque tombe a 0 de large et le logo
     disparait. Et pas de margin-left:auto sur le pied, qui le
     pousserait hors du viewport au lieu de le garder dans le flux. */
  .side-brand, .side-client, .side-foot { flex-shrink: 0; }
  .side-brand { padding: 0 12px 0 0; }
  .side-brand .brand-logo { height: 20px; width: auto; }
  .side-suite, .side-clientsub, .navgrp { display: none; }
  .side-client { padding: 0 14px 0 0; white-space: nowrap; }
  .nav { white-space: nowrap; flex-shrink: 0; }
  .nav-sub { padding-left: 10px; }
  .side-foot { margin-top: 0; padding: 0 0 0 12px; border-top: none; }
  .btn-side { white-space: nowrap; }
  .main { padding: 22px 20px 32px; }
}
@media (max-width: 680px) {
  .main { padding: 20px 16px 40px; }
  .hd { font-size: 22px; }
  .herocard { padding: 26px 22px; }
  .herottl { font-size: 27px; }
  .kband { grid-template-columns: 1fr; gap: 12px; }
  .stepgrid { grid-template-columns: 1fr; }
  .verbatims { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  /* Le curseur de maturite et sa valeur ne tiennent plus : on bascule sur
     deux lignes, la maturite occupant toute la largeur sous le libelle. */
  .thead { display: none; }
  .trow { grid-template-columns: 26px 1fr 76px; row-gap: 6px; }
  .mcell { grid-column: 1 / -1; }
  .trow .chev { display: none; }
  .torhd, .torrow { grid-template-columns: 1fr 1fr 1fr; }
  /* Les bulles d'aide du rail sont en `position:absolute` et `nowrap` : elles
     depassent le bord droit et ajoutent ~15px de defilement horizontal a toute
     la page. Sur un ecran tactile elles ne se declenchent de toute facon pas. */
  .thr[data-tip]::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================ SQUIRCLE ============================
   Boutons en superellipse (« squircle » facon iOS) sur Chromium recent.
   corner-shape s'appuie sur le border-radius deja pose (--r-sm/md).
   Navigateurs sans corner-shape : le @supports est ignore -> arrondi
   classique conserve. Aucune regression possible. */
@supports (corner-shape: superellipse(2)) {
  button,
  .btn, .btn-primary, .btn-ghost, .btn-save,
  .chip { corner-shape: superellipse(2); }
}

/* ============================ CONSOLE AGENT (ADR 0015) ============================
   Meme grammaire visuelle que la contre-analyse juste au-dessus : encadre pose
   sur le fond secondaire, cartes blanches a l'interieur. Aucune couleur nouvelle
   -- direction « trois couleurs » (noir / orange / blanc), styles.css reste la
   source unique du design system. */
.agz { margin-top: 24px; border: 1px solid var(--ef-line); border-radius: var(--r-md); background: var(--ef-bg-2); padding: 18px 20px; }
.agz[hidden] { display: none; }
.agzhd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.agzttl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ef-ink-soft); }
.agzact { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Le fil defile : un run long ne pousse pas le reste du cockpit hors de l'ecran. */
.agfil { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.agfil:empty { display: none; }

.agturn { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: var(--r-sm); padding: 10px 13px; }
/* Le role se lit au liseré, pas a la couleur de fond : trois couleurs tiennent. */
.ag-analyste { border-left: 3px solid var(--ef-orange); }
.ag-devil { border-left: 3px solid var(--ef-ink); }
.ag-system { border-left: 3px solid var(--ef-line-stronger); background: var(--ef-bg-2); }
.ag-system .agtxt { color: var(--ef-muted); font-size: 12px; }
.agtxt { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ef-ink); white-space: pre-wrap; }
.agthink { margin: 0 0 6px; font-size: 12px; color: var(--ef-muted); }
.agthink summary { cursor: pointer; font-weight: 600; }
.agthink p { margin: 6px 0 0; line-height: 1.5; }

.agprop { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.agprop[hidden] { display: none; }
.agprophd { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ef-ink-soft); }
.agpcard { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.agptype { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ef-muted); }
.agpcible { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-orange-deep); letter-spacing: 0.04em; }
.agptxt { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ef-ink); }
.agpsrc { margin: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ef-muted); }

/* ADR 0012 — recommandation PARTAGEE entre plusieurs observations.
   Une ligne d'encre, sans pastille : l'information est importante mais elle ne
   doit pas concurrencer le texte de la recommandation elle-meme. */
.sharednote { display: inline-flex; align-items: baseline; gap: 5px; margin: 10px 0 0; font-size: 11px; font-weight: 600; color: var(--ef-orange-deep); }
.sharednote .ic { font-size: 12px; color: var(--ef-orange); align-self: center; }
.snmut { font-weight: 500; opacity: .82; }

/* « S'applique a N observations » : la liste des soeurs, dans le bloc de details.
   Un identifiant d'une AUTRE thematique porte sa provenance en clair -- sans ca,
   « 04.01 » vu depuis la thematique 09 ne veut rien dire. */
.applies { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 11px; color: var(--ef-muted); font-weight: 500; margin-top: 10px; font-variant-numeric: tabular-nums; }
.applbl { font-weight: 600; }
.aid { color: var(--ef-ink-soft); font-weight: 600; }
.aid.xth { color: var(--ef-orange-deep); }
.xthb { font-weight: 600; letter-spacing: .01em; margin-left: 3px; opacity: .85; }

/* En-tete du cockpit : titre a gauche, accuse + Enregistrer a droite. */
.hd.hrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd.hrow .hd { margin: 0; }
.hd.hrow #saveAll { margin-left: auto; background: var(--ef-ink); color: #fff; border-color: var(--ef-ink); font-weight: 700; }
.hd.hrow #saveAll:hover:not(:disabled) { background: #000; }
.hd.hrow #saveAll:disabled { background: var(--ef-card); color: var(--ef-muted); border-color: var(--ef-line-strong); }
/* L'accuse n'occupe sa place que le temps de se montrer : il ne doit pas
   deplacer le bouton en apparaissant. */
.gsToast { font-size: 11.5px; font-weight: 600; color: var(--ef-ink); display: inline-flex; align-items: center; gap: 5px; opacity: 0; transition: opacity .2s var(--ease-out); }
.gsToast.is-on { opacity: 1; }

/* Valeur d'un KPI non encore chiffree (mandat neuf) -- « -- » plutot qu'un
   0 ou un "undefined" fabrique (F2, bug visible corrige). */
.kv-vide { color: var(--ef-line-stronger); }

/* ====================== MANDATS (#/mandats) ====================== */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mcard {
  background: var(--ef-card);
  border: 1px solid var(--ef-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mcardttl { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.mcardsub { margin-top: 5px; font-size: 12.5px; color: var(--ef-muted); }
.mcardbadge {
  display: inline-block; margin-top: 14px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ef-orange-deep);
  background: var(--ef-orange-wash); border-radius: 999px; padding: 3px 9px;
}
.mcardbadge.is-done { color: var(--ef-ink-soft); background: var(--ef-bg-2); }
.mcard-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-style: dashed; border-color: var(--ef-line-stronger); color: var(--ef-muted);
  font-size: 13px; font-weight: 600; min-height: 92px;
}
.mcard-new:hover { color: var(--ef-ink); border-color: var(--ef-ink-soft); }
.mempty { padding: 40px 24px; text-align: center; color: var(--ef-muted); font-size: 13.5px; }

/* ====================== PREPA-MANDAT (#/prepa) ====================== */
.prepastepper { margin-bottom: 24px; }
.prepasteps { display: flex; gap: 10px; flex-wrap: wrap; }
.prepanode {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--ef-line); border-radius: 999px; background: var(--ef-card);
  padding: 7px 16px 7px 7px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ef-ink-soft);
  cursor: pointer; transition: border-color .14s var(--ease-out), background .14s var(--ease-out);
}
.prepanode:hover { border-color: var(--ef-line-stronger); }
.prepanode.is-on { border-color: var(--ef-ink); background: var(--ef-bg-2); color: var(--ef-ink); }
.prepanum {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--ef-bg-2); color: var(--ef-muted);
}
.prepanode.is-fait .prepanum { background: var(--ef-orange); color: #fff; }
/* Etape sautee : distincte de "faite" -- meme famille (orange), motif hachure
   pour dire "on est passe par-dessus", pas "termine". */
.prepanode.is-skip .prepanum {
  background: repeating-linear-gradient(45deg, var(--ef-line-stronger), var(--ef-line-stronger) 3px, var(--ef-bg-2) 3px, var(--ef-bg-2) 6px);
  color: var(--ef-ink-soft);
}
.prepacard {
  background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); padding: 26px; max-width: 640px;
}
.prepah3 { margin: 24px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.prepainfo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 14px 0 0; }
.prepainfo dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ef-muted); margin: 0; }
.prepainfo dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ef-ink); }
.prepapersons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.prepaperson {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--ef-line); border-radius: var(--r-sm); font-size: 13px;
}
.prepapersnom { font-weight: 700; }
.prepapersrole { color: var(--ef-muted); font-size: 12px; }
.prepapersform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.prepapersform input, .prepapersform select {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); color: var(--ef-ink);
}
.prepapersform input:focus, .prepapersform select:focus {
  outline: none; border-color: var(--ef-orange); box-shadow: 0 0 0 3px var(--ef-orange-wash);
}
.prepaactions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Erreur de validation inline (champ obligatoire manquant, ex. persona) --
   sous le champ fautif, jamais une alerte globale coupee du contexte. */
.field-err { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ef-red); flex-basis: 100%; }

/* ====================== QUESTIONNAIRE (s4, #17) ====================== */
.qcard { max-width: 760px; }
.qbrief-warn {
  margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--ef-orange-wash); color: var(--ef-orange-deep); font-size: 12.5px; font-weight: 600;
}
.qscope { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.qscopebtn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ef-ink-soft);
  border: 1px solid var(--ef-line); border-radius: 999px; background: var(--ef-card);
  padding: 6px 14px; cursor: pointer; transition: border-color .14s var(--ease-out), background .14s var(--ease-out);
}
.qscopebtn:hover { border-color: var(--ef-line-stronger); }
.qscopebtn.is-on { border-color: var(--ef-ink); background: var(--ef-bg-2); color: var(--ef-ink); }
.qtoolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.qvollabel { font-size: 12.5px; font-weight: 600; color: var(--ef-muted); display: inline-flex; align-items: center; gap: 6px; }
.qvollabel select {
  font-family: inherit; font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); color: var(--ef-ink);
}
.qlist { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.qgroup { border-top: 1px solid var(--ef-line); padding-top: 12px; }
.qgroup:first-child { border-top: none; padding-top: 0; }
.qgrouptitle { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ef-ink); }
.qgrouptitle.qstar { color: var(--ef-orange-deep); }
.qitem {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13px; cursor: pointer;
}
.qitem input.qcheck { margin-top: 3px; accent-color: var(--ef-orange); flex: none; }
.qitem.qoff .qtxt { color: var(--ef-muted); text-decoration: line-through; }
.qkw { color: var(--ef-muted); font-weight: 400; }

/* ====================== RESUME DU KICKOFF (s3, #19) ====================== */
.kocard { max-width: 760px; }
.kotextarea {
  display: block; width: 100%; min-height: 160px; margin-top: 16px; resize: vertical;
  font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--ef-ink);
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); padding: 10px 12px;
}
.komdbox { margin-top: 20px; }

/* ====================== VISUALISEUR MARKDOWN (F6, #20) ====================
   Rendu de MARKDOWN.mdToHtml (public/markdown.js) -- kickoff (s3), brief (s2),
   apercu questionnaire (s4). Trois couleurs seulement, aucune nouvelle
   teinte : voir cio-dashboard-design-system. */
.mdview {
  font-size: 13px; line-height: 1.6; color: var(--ef-ink);
  background: var(--ef-bg-2); border: 1px solid var(--ef-line); border-radius: var(--r-sm);
  padding: 14px 16px; margin: 0 0 8px;
}
.mdview > :first-child { margin-top: 0; }
.mdview > :last-child { margin-bottom: 0; }
.mdview h1 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.mdview h2 {
  font-size: 15px; font-weight: 700; margin: 18px 0 8px;
  border-top: 1px solid var(--ef-line); padding-top: 14px;
}
.mdview h3 { font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.mdview h4, .mdview h5, .mdview h6 { font-size: 13px; font-weight: 700; margin: 12px 0 6px; }
.mdview p { margin: 0 0 10px; }
.mdview ul, .mdview ol { margin: 0 0 10px; padding-left: 20px; }
.mdview li { margin: 3px 0; }
.mdview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  background: var(--ef-bg); border: 1px solid var(--ef-line); border-radius: 4px; padding: 1px 5px;
}
.mdview pre {
  background: var(--ef-bg); border: 1px solid var(--ef-line); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 0 0 10px; overflow-x: auto;
}
.mdview pre code { border: none; background: none; padding: 0; }
.mdview blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--ef-line-stronger); color: var(--ef-ink-soft);
}
.mdview blockquote p { margin: 0; }
.mdview table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 10px; }
.mdview th, .mdview td { border: 1px solid var(--ef-line); padding: 6px 10px; text-align: left; }
.mdview th { background: var(--ef-bg); font-weight: 700; }
.mdview a { color: var(--ef-orange-deep); text-decoration: none; }
.mdview a:hover { text-decoration: underline; }
.mdview hr { border: none; border-top: 1px solid var(--ef-line); margin: 16px 0; }
.korelance { margin-top: 20px; border-top: 1px solid var(--ef-line); padding-top: 16px; }
.korelance-btn { margin: 0 8px 8px 0; }
.korelance-raison { font-size: 12px; color: var(--ef-muted); margin-right: 12px; }

/* ====================== BRIEF CLIENT (s2, #16) ======================
   Reutilise .kotextarea/.qtoolbar/.qbrief-warn/.komdbox/.mdview (deja en
   place pour F5/#19 et F6/#20) et calque .brdocform sur .prepapersform
   (F2) -- trois couleurs seulement, aucune nouvelle teinte. */
.brcard { max-width: 760px; }
.brdocs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.brdoc {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--ef-line); border-radius: var(--r-sm); background: var(--ef-bg-2);
}
.brdoc-nom { font-weight: 600; color: var(--ef-ink); flex: 1 1 auto; }
.brdoc-taille { font-size: 12px; color: var(--ef-muted); flex: none; }
.brdocform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.brdocform input, .brdocform textarea {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); color: var(--ef-ink);
}
.brdocform input:focus, .brdocform textarea:focus {
  outline: none; border-color: var(--ef-orange); box-shadow: 0 0 0 3px var(--ef-orange-wash);
}
.brdocform textarea { flex-basis: 100%; min-height: 90px; resize: vertical; }

/* ====================== BANQUE DE QUESTIONS (F7, #18) ======================
   Referentiel GLOBAL (banque_questions) -- page Parametres. Trois couleurs
   seulement, aucune nouvelle teinte : calque sur .qbrief-warn/.prepapersform/
   .kotextarea deja en place pour F4/#17 et F5/#19. */
.bq-warn {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px;
  border-radius: var(--r-sm); background: var(--ef-orange-wash); color: var(--ef-orange-deep);
  font-size: 12.5px; font-weight: 600;
}
.bq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 16px; }
.bq-bar select, .bq-bar input[type="search"] {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); color: var(--ef-ink);
}
.bq-bar select:focus, .bq-bar input[type="search"]:focus {
  outline: none; border-color: var(--ef-orange); box-shadow: 0 0 0 3px var(--ef-orange-wash);
}
.bq-bar input[type="search"] { min-width: 200px; flex: 1 1 200px; }
.bq-count { font-size: 12px; color: var(--ef-muted); white-space: nowrap; }
/* le bouton primaire de la barre reprend .btn-primary (couleur), mais pas sa
   taille pleine largeur (pensee pour le login) -- content-sized, pousse a
   droite de la barre. */
.bq-bar .btn-primary { width: auto; padding: 9px 14px; font-size: 12.5px; margin-left: auto; }

/* Liste en TABLEAU, groupee par thematique (accordeon). Colonnes partagees
   entete + lignes via --bq-cols : Question sur 3/4, Criticite/Type/Persona se
   partagent le dernier quart (9:1:1:1), menu kebab dans un rail fin. */
#bq-list { --bq-cols: minmax(0, 9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 32px; }

.bq-grp { border-bottom: 1px solid var(--ef-line); }
.bq-grphd { display: flex; align-items: center; gap: 14px; width: 100%; background: transparent; border: none; padding: 14px 4px; text-align: left; border-radius: var(--r-sm); }
.bq-grphd:hover { background: var(--ef-bg-2); }
.bq-grphd:focus-visible { outline: 2px solid var(--ef-ink); outline-offset: 2px; }
.bq-grpnum { width: 22px; flex-shrink: 0; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ef-muted); }
.bq-grpnom { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ef-ink); }
.bq-grpcount { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.bq-chev { flex-shrink: 0; color: var(--ef-muted); transition: transform .2s var(--ease-out); }
.bq-grp.open .bq-chev { transform: rotate(90deg); }
.bq-rows { display: none; padding-bottom: 10px; }
.bq-grp.open .bq-rows { display: block; }

/* En-tete de colonnes : sous le titre de la thematique, dans la zone depliable. */
.bq-thead { display: grid; grid-template-columns: var(--bq-cols); gap: 16px; padding: 2px 4px 8px; border-bottom: 1px solid var(--ef-line-strong); }
.bq-th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ef-muted); }

.bq-row { display: grid; grid-template-columns: var(--bq-cols); gap: 16px; align-items: start; padding: 11px 4px; border-top: 1px solid var(--ef-line); }
.bq-row:hover { background: var(--ef-bg-2); }
.bq-c-q { min-width: 0; overflow-wrap: break-word; }
.bq-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ef-ink); }
.bq-qnum { margin-right: 8px; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ef-muted); }
/* Valeurs des colonnes de droite : noir, graisse normale (aucun bold). */
.bq-cell { min-width: 0; overflow-wrap: break-word; font-size: 12.5px; font-weight: 400; color: var(--ef-ink); padding-top: 1px; }
.bq-c-edit { display: flex; justify-content: flex-end; align-items: flex-start; }
.bq-edit { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; border: none; border-radius: 8px; color: var(--ef-muted); transition: background .12s var(--ease-out), color .12s var(--ease-out); }
.bq-edit:hover { background: var(--ef-bg-2); color: var(--ef-ink); }
.bq-edit:focus-visible { outline: 2px solid var(--ef-ink); outline-offset: 2px; }
.bq-edit svg { display: block; }
@media (max-width: 720px) {
  .bq-thead { display: none; }
  .bq-row { grid-template-columns: 1fr; gap: 4px; }
  .bq-cell { display: inline-block; margin-right: 14px; padding-top: 0; }
  .bq-cell::before { content: attr(data-lbl) " "; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ef-muted); }
  .bq-c-edit { justify-content: flex-start; margin-top: 4px; }
}

/* ---- modale creation/edition ---- */
.bq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 6px; }
.bq-field { display: flex; flex-direction: column; gap: 6px; }
.bq-field-full { grid-column: 1 / -1; }
.bq-flabel { font-size: 11px; font-weight: 700; color: var(--ef-ink-soft); }
.bq-flabel small { font-weight: 500; color: var(--ef-muted); text-transform: none; }
.bq-field select, .bq-field input[type="text"] {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--ef-line-strong); border-radius: var(--r-sm); background: var(--ef-bg); color: var(--ef-ink);
}
.bq-field select:focus, .bq-field input[type="text"]:focus, .bq-field textarea:focus {
  outline: none; border-color: var(--ef-orange); box-shadow: 0 0 0 3px var(--ef-orange-wash);
}
.bq-field select:disabled { background: var(--ef-bg-2); color: var(--ef-muted); cursor: not-allowed; }
.bq-fthemewrap { display: flex; align-items: center; gap: 8px; }
.bq-fthemewrap select { flex: 1; min-width: 0; }
.bq-qchip {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--ef-ink-soft);
  background: var(--ef-bg-2); border: 1px solid var(--ef-line-strong); border-radius: 999px; padding: 3px 9px;
}
@media (max-width: 560px) { .bq-form-grid { grid-template-columns: 1fr; } }

/* doublons potentiels detectes a l'enregistrement (POST, sans force) */
.bq-doublons {
  margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--ef-orange-wash); border: 1px solid var(--ef-orange);
}
.bq-doublons-hd { font-size: 12px; font-weight: 700; color: var(--ef-orange-deep); margin-bottom: 8px; }
.bq-doublon-item {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  border-top: 1px solid rgba(216, 72, 15, .18); font-size: 12.5px;
}
.bq-doublon-item:first-child { border-top: none; }
.bq-doublon-score { flex: none; font-weight: 700; color: var(--ef-orange-deep); font-variant-numeric: tabular-nums; }
.bq-doublon-qnum { flex: none; color: var(--ef-muted); }
.bq-doublon-texte { flex: 1; min-width: 0; color: var(--ef-ink-soft); }
.bq-doublons-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.korelance-inconnus { font-size: 12.5px; color: var(--ef-muted); margin-top: 6px; }