/* UrbanPOS Onboarding — styles.css
   Design system UI UX MAX v1.0 : identité terracotta / pierre chaude, WCAG 2.1 AA. */

/* ===== Polices self-hostées (woff2 latin, aucun appel CDN externe) ===== */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/jakarta-600.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jakarta-700.woff2') format('woff2'); }

:root {
  /* Couleurs */
  --c-primary:#9A3412; --c-primary-hover:#7C2D12; --c-primary-soft:#FFF1E7;
  --c-accent:#A16207; --c-accent-soft:#FEF6E0;
  --c-bg:#FAF9F7; --c-surface:#FFFFFF; --c-surface-alt:#F5F3F0;
  --c-border:#E7E3DE; --c-border-strong:#D6D0C9;
  --c-text:#292524; --c-text-2:#57534E; --c-text-3:#78716C;
  --c-success:#15803D; --c-success-bg:#EFF8F1;
  --c-warning:#B45309; --c-warning-bg:#FEF8EC;
  --c-danger:#B91C1C;  --c-danger-bg:#FDF1F1;
  --c-info:#3730A3;    --c-info-bg:#F0F0FB;
  /* Typo */
  --font-head:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* Espacement */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* Radius & ombres */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:9999px;
  --shadow-1:0 1px 2px rgba(41,37,36,.05);
  --shadow-2:0 4px 12px rgba(41,37,36,.08);
  --shadow-3:0 12px 32px rgba(41,37,36,.14);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:150ms; --dur-base:220ms; --dur-slow:350ms;
  --focus-ring:0 0 0 3px rgba(154,52,18,.35);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
  * { animation: none !important; transition: none !important; }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body {
  font-family:var(--font-body); background:var(--c-bg); color:var(--c-text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-head); line-height:1.3; }
h2 { font-size:1.75rem; } h3 { font-size:1.125rem; margin-bottom:var(--sp-3); } h4 { font-size:1rem; margin:var(--sp-4) 0 var(--sp-2); }
p { margin-bottom:var(--sp-2); }
a { color:var(--c-primary); text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea {
  font:inherit; padding:10px 12px; border:1px solid var(--c-border-strong);
  border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text); width:100%;
}
:is(a,button,input,select,summary,[tabindex]):focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); }
.muted { color:var(--c-text-2); } .small { font-size:.875rem; }
.ok-txt { color:var(--c-success); font-weight:500; }
.late-txt { color:var(--c-danger); font-weight:500; }

/* ---------- Layout ---------- */
.layout { display:flex; min-height:100vh; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.content { flex:1; padding:var(--sp-6); max-width:1200px; width:100%; margin:0 auto; }

/* ---------- Sidebar ---------- */
.sidebar {
  width:260px; flex-shrink:0; background:var(--c-surface); border-right:1px solid var(--c-border);
  padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand, .brand-lg {
  font-family:var(--font-head); font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-6);
}
.brand em, .brand-lg em { font-style:normal; color:var(--c-primary); font-weight:600; }
.brand-lg { font-size:1.3rem; justify-content:center; }
.brand-dot { width:12px; height:12px; border-radius:var(--r-full); background:linear-gradient(135deg,#9A3412,#C2410C); flex-shrink:0; }
.nav-item {
  display:flex; align-items:center; gap:var(--sp-3); padding:10px 12px; border-radius:var(--r-md);
  color:var(--c-text-2); font-size:.9rem; font-weight:500; transition:background var(--dur-fast);
  width:100%; text-align:left;
}
.nav-item:hover { background:var(--c-surface-alt); }
.nav-item.active { background:var(--c-primary-soft); color:var(--c-primary); box-shadow:inset 3px 0 0 var(--c-primary); }
.nav-ic { width:22px; text-align:center; flex-shrink:0; }
.nav-switch { margin-top:auto; border-top:1px solid var(--c-border); border-radius:0; padding-top:var(--sp-4); }

/* ---------- Topbar ---------- */
.topbar {
  height:64px; display:flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-6);
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:100;
}
.topbar-title { font-family:var(--font-head); font-weight:600; font-size:1.125rem; flex:1; }
.topbar-right { display:flex; align-items:center; gap:var(--sp-3); }
.topbar-who { display:flex; flex-direction:column; line-height:1.25; }
.topbar-who small { color:var(--c-text-3); font-size:.75rem; }
.burger { display:none; font-size:1.3rem; padding:var(--sp-2); }
.bell { position:relative; font-size:1.1rem; padding:var(--sp-2); }
.bell-dot {
  position:absolute; top:0; right:0; background:var(--c-danger); color:#fff;
  font-size:.65rem; font-weight:600; min-width:16px; height:16px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- Avatars ---------- */
.avatar {
  width:36px; height:36px; border-radius:var(--r-full); background:var(--c-surface-alt);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.85rem; flex-shrink:0; color:var(--c-text);
}
.avatar-hire { background:var(--c-primary-soft); color:var(--c-primary); }
.avatar-lg { width:56px; height:56px; font-size:1.1rem; }

/* ---------- Cards & grids ---------- */
.card {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:var(--sp-6); margin-bottom:var(--sp-5);
}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.grid-2 .card { margin-bottom:var(--sp-5); }
.grid-kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.kpi { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5); margin:0; }
.kpi-ic { font-size:1.5rem; }
.kpi-val { font-family:var(--font-head); font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi-label { font-size:.8rem; color:var(--c-text-2); }
.kpi-warn .kpi-val { color:var(--c-danger); }
.empty-state { text-align:center; padding:var(--sp-12) var(--sp-6); }
.empty-state .btn { margin-top:var(--sp-4); }

/* ---------- Boutons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:10px 18px; border-radius:var(--r-md); font-weight:600; font-size:.9rem;
  transition:background var(--dur-fast), box-shadow var(--dur-fast); min-height:44px;
}
.btn-primary { background:var(--c-primary); color:#fff; }
.btn-primary:hover { background:var(--c-primary-hover); }
.btn-ghost { background:transparent; color:var(--c-primary); border:1px solid var(--c-border-strong); }
.btn-ghost:hover { background:var(--c-primary-soft); }
.btn-sm { min-height:36px; padding:6px 12px; font-size:.85rem; }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-danger:hover { background:#991B1B; }
.btn-danger-ghost { background:transparent; color:var(--c-danger); border:1px solid var(--c-border-strong); }
.btn-danger-ghost:hover { background:var(--c-danger-bg); border-color:var(--c-danger); }
.toolbar { margin-bottom:var(--sp-5); display:flex; justify-content:flex-end; }

/* Actions de gestion sur la carte collaborateur */
.hire-card-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }

/* Modale de confirmation */
.modal-confirm { max-width:480px; }
.confirm-body { color:var(--c-text-2); font-size:.95rem; line-height:1.55; }
.confirm-body p { margin:0 0 var(--sp-3); }
.confirm-warn { color:var(--c-danger); font-weight:600; }
.modal-actions { display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-5); flex-wrap:wrap; }

/* ---------- Progress ---------- */
.progress { height:8px; background:var(--c-surface-alt); border-radius:var(--r-full); overflow:hidden; margin:var(--sp-2) 0; }
.progress-lg { height:12px; }
.progress-fill {
  height:100%; width:0; border-radius:var(--r-full);
  background:linear-gradient(90deg,#9A3412,#C2410C);
  transition:width var(--dur-slow) var(--ease-out);
}
.ring-bg { fill:none; stroke:var(--c-surface-alt); stroke-width:9; }
.ring-fill {
  fill:none; stroke:url(#none), #9A3412; stroke:#9A3412; stroke-width:9; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center; transition:stroke-dasharray var(--dur-slow) var(--ease-out);
}
.ring-txt { font-family:var(--font-head); font-weight:700; font-size:1.4rem; fill:var(--c-text); }

/* ---------- Chips & badges ---------- */
.task-team-chip, .phase-chip, .meta-chip, .chip-service {
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:600;
  padding:2px 10px; border-radius:var(--r-full); white-space:nowrap;
}
.chip-rh, .chip-admin { background:var(--c-primary-soft); color:var(--c-primary); }
.chip-it { background:var(--c-info-bg); color:var(--c-info); }
.chip-support { background:var(--c-success-bg); color:var(--c-success); }
.chip-marketing, .chip-sales { background:var(--c-accent-soft); color:var(--c-accent); }
.chip-manager, .chip-install { background:var(--c-surface-alt); color:var(--c-text-2); }
.chip-direction { background:var(--c-danger-bg); color:var(--c-danger); }
.phase-chip { background:var(--c-surface-alt); color:var(--c-text-2); }
.meta-chip { background:var(--c-surface-alt); color:var(--c-text-2); font-weight:500; }
.chip-ok { background:var(--c-success-bg); color:var(--c-success); }
.chip-service { background:var(--c-surface-alt); color:var(--c-text-2); margin-top:var(--sp-2); }

/* ---------- Task rows & kanban ---------- */
.task-row {
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  padding:var(--sp-3); border-radius:var(--r-md); transition:background var(--dur-fast);
  border-bottom:1px solid var(--c-border);
}
.task-row:last-of-type { border-bottom:none; }
.task-row:hover { background:var(--c-surface-alt); }
.task-late { background:var(--c-danger-bg); }
.task-late:hover { background:#FBE3E3; }

/* ---------- FB-9 — « qui fait quoi » (2026-09-18) --------------------------
   La ligne passe à DEUX lignes : l'action en haut, « à faire par QUI · pour QUI ·
   quand » en dessous. Le responsable est le mot neuf de cet écran : il ne peut pas
   naître en gris, sinon on ajoute une information et on la range au même niveau que
   celle qui trompait déjà.

   ⚠️ CONTRASTE — piège mesuré, pas supposé. `--c-text-3` (#78716C) donne 4.80:1 sur
   `--c-surface` (conforme) mais 4.33:1 sur `--c-surface-alt` — or c'est exactement le
   fond de `.task-row:hover`. L'échec WCAG 1.4.3 n'existait donc QU'AU SURVOL, ce qui
   explique qu'il ait survécu. Toute cette ligne est en `--c-text-2` (6.89:1 sur le même
   fond, 6.25:1 sur le rouge de survol d'une ligne en retard). Ne pas y remettre
   `--c-text-3`, ni la classe `.muted` qui le porte.
   --------------------------------------------------------------------------- */
.task-row { min-height:44px; }
.task-row:focus-visible { border-radius:var(--r-md); }
.task-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.task-row-top { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.task-row-title { flex:1; min-width:0; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-card-top { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
/* La 2e ligne tient sa contrainte « 2 lignes maximum » par TRONCATURE, jamais en
   supprimant l'une des trois informations : l'intégralité reste lisible dans la fiche. */
.task-meta { display:block; max-width:100%; font-size:.8rem; color:var(--c-text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-meta-lbl { font-weight:400; color:var(--c-text-2); }
.task-owner { font-weight:600; color:var(--c-text); }
.task-hire  { font-weight:500; color:var(--c-text-2); }
.task-due   { font-weight:500; color:var(--c-text-2); font-variant-numeric:tabular-nums; }
/* Le retard porte un texte (1.4.1) ; le fond seul ne suffit pas en une colonne. */
.chip-late { background:var(--c-danger-bg); color:var(--c-danger); font-weight:600; }   /* 5.86:1 */
.chip-warn { background:var(--c-warning-bg); color:var(--c-warning); font-weight:600; } /* 4.75:1 */
/* Dette préexistante soldée au passage : les compteurs `.muted` d'une carte EN RETARD
   tombaient à 4.35:1 sur `--c-danger-bg`. Ils héritent désormais de `--c-text-2`. */
.task-late .muted { color:var(--c-text-2); }
/* ⚠️ PIÈGE PAYÉ À LA VÉRIFICATION MOBILE, à ne pas retirer « parce que ça a l'air inutile ».
   `white-space:nowrap` ne tronque RIEN tant qu'un ancêtre a le droit de grandir : une piste
   de grille `1fr` vaut `minmax(auto, 1fr)`, et ce `auto` prend le MIN-CONTENT — qui, sans
   césure possible, vaut la phrase entière. La 2e ligne ne se coupait donc pas : elle
   poussait la carte, puis la grille, puis la page (684 px de large mesurés dans un
   viewport de 375 px, alors que la version d'avant — qui laissait le texte revenir à la
   ligne — tenait). La troncature n'opère que si l'ancêtre a le droit de rétrécir. */
.grid-2 > .card, .kanban-col, .kanban-col-body { min-width:0; }
.kanban-card { max-width:100%; }
.kanban-card strong { min-width:0; max-width:100%; overflow-wrap:anywhere; }

.toolbar-owner { justify-content:flex-start; align-items:center; gap:var(--sp-3); }
.owner-filter-lbl { font-size:.85rem; font-weight:600; color:var(--c-text-2); }
#task-owner-filter { max-width:min(100%, 22rem); }

/* Sur téléphone, la puce d'équipe et la pastille de retard mangeaient la ligne : le titre
   ne gardait que ~130 px, soit une douzaine de caractères avant les points de suspension.
   On laisse donc le haut de ligne revenir à la ligne et le titre prendre toute la largeur,
   en clair. Mieux vaut une 3e ligne lisible qu'une 2e ligne illisible — et surtout, on ne
   retire aucune des trois informations, ce qui reste la règle. */
/* ---------- FB-9 phase 2 — « Mes tâches » et la désignation ----------------
   Le bloc est le PREMIER de l'écran : il est marqué par un liseré, pas par une couleur de
   fond — un fond teinté le ferait lire comme une alerte, alors que c'est l'état normal. */
.card-mine { border-left:3px solid var(--c-primary); }
.card-mine h3 { display:flex; align-items:center; gap:var(--sp-2); }
.mine-more { margin-top:var(--sp-2); }
.grid-kpi-3 { grid-template-columns:repeat(3,1fr); }

.task-assign { margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--c-border); }
.assign-lbl { display:block; font-size:.85rem; font-weight:600; color:var(--c-text-2); margin-bottom:var(--sp-2); }
#task-assignee { width:100%; max-width:22rem; }
.assign-help { margin-top:var(--sp-2); }

@media (max-width:1023px) { .grid-kpi-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px)  { .grid-kpi-3 { grid-template-columns:1fr 1fr; } }

@media (max-width:767px) {
  .task-row-top { flex-wrap:wrap; }
  .task-row-title { flex:1 0 100%; white-space:normal; overflow:visible; }
  /* Mesuré : à 375 px, la troncature de la 2e ligne mangeait l'ÉCHÉANCE — la dernière
     information de la phrase est la première sacrifiée. Or perdre la date, c'est perdre
     la seule information qui dit s'il y a urgence. On laisse donc la phrase revenir à la
     ligne sur téléphone : une ligne de plus, aucune information en moins. */
  .task-meta { white-space:normal; overflow:visible; }
}

.kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); align-items:start; }
.kanban-col { background:var(--c-surface-alt); border-radius:var(--r-lg); padding:var(--sp-3); }
.kanban-head {
  font-family:var(--font-head); font-weight:600; font-size:.9rem; padding:var(--sp-2) var(--sp-2) var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2);
}
.count { background:var(--c-surface); border-radius:var(--r-full); font-size:.75rem; padding:1px 8px; color:var(--c-text-2); }
.kanban-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); width:100%; text-align:left;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
  padding:var(--sp-3); margin-bottom:var(--sp-2); box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur-fast), transform var(--dur-fast);
}
.kanban-card:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.kanban-card strong { font-size:.9rem; }
.kanban-meta { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ---------- Collaborateurs ---------- */
.hire-card { display:flex; gap:var(--sp-4); align-items:flex-start; }
.hire-card-body { flex:1; min-width:0; }
.hire-card-badges { display:flex; gap:var(--sp-1); flex-wrap:wrap; max-width:120px; }
.badge-chip { font-size:1.2rem; }
.hire-progress { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; }
.hp-body { flex:1; min-width:0; }
.hp-top { display:flex; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; }
.hp-pct { font-family:var(--font-head); font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Hero collaborateur ---------- */
.hero { display:flex; align-items:center; gap:var(--sp-6); background:linear-gradient(120deg,#FFFFFF, #FFF1E7); }
.hero-left { flex:1; }
.hero h2 { margin-bottom:var(--sp-2); }
.hero-ring { flex-shrink:0; }

/* ---------- Journey ---------- */
.journey-head { padding:var(--sp-5) var(--sp-6); }
.journey-phase { margin-bottom:var(--sp-6); }
.journey-phase-title { font-size:1.05rem; margin-bottom:var(--sp-3); display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.phase-done { color:var(--c-success); }
.step {
  display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2);
}
.step-row { display:flex; gap:var(--sp-3); align-items:center; }
/* V8-3 : l'accordeon (.step-header / .step-panel / .chevron) est SUPPRIME.
   La ligne entiere est un LIEN vers #etape/<id>. Un <a> plutot qu'un <button> :
   clic-milieu, nouvel onglet, curseur et role donnes par le navigateur. */
.step-open {
  flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-3); min-height:64px;
  text-align:left; background:transparent; padding:var(--sp-2) 0; cursor:pointer;
  border-radius:var(--r-sm); color:inherit; text-decoration:none;
  transition:transform var(--dur-fast), background var(--dur-fast);
}
.step:hover { border-color:var(--c-border-strong); background:var(--c-surface-alt); }
/* Le deplacement lateral est le signal « ca mene ailleurs » (vs « ca se deplie »). */
.step:hover .step-open { transform:translateX(2px); }
.step-open:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.step-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.step-title { min-width:0; font-weight:600; overflow-wrap:anywhere; }
/* Apercu d'une ligne : compense la perte du depliage, et suggere qu'il y a une suite. */
.step-excerpt { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.step-badges { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.step-go { color:var(--c-text-3); font-size:1.2rem; line-height:1; transition:color var(--dur-fast); }
.step:hover .step-go { color:var(--c-accent); }
.journey-hint { margin-top:var(--sp-2); }
.next-actions { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; flex-shrink:0; }
.step-done { background:var(--c-success-bg); border-color:#CDE8D4; }
.step-done .step-title { text-decoration:line-through; color:var(--c-text-2); }
.step-done .step-body strong { text-decoration:line-through; color:var(--c-text-2); }
.check {
  width:28px; height:28px; border-radius:var(--r-full); border:2px solid var(--c-border-strong);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; transition:background var(--dur-base), border-color var(--dur-base);
  margin-top:2px; padding:0; min-width:28px;
}
.check.checked { background:var(--c-success); border-color:var(--c-success); }
.step-body { flex:1; min-width:0; }
.step-meta { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2); }
/* Numéro d'étape (chiffres tabulaires) */
.step-num {
  width:28px; height:28px; border-radius:var(--r-full); flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:.85rem; font-variant-numeric:tabular-nums;
  background:var(--c-surface-alt); color:var(--c-text-2); margin-top:2px;
}
/* États de séquence (icône + texte, jamais couleur seule) */
.step-next { border-color:var(--c-primary); box-shadow:0 0 0 1px var(--c-primary); background:var(--c-primary-soft); }
.step-next .step-num { background:var(--c-primary); color:#fff; }
.step-upcoming { opacity:.82; }
.step-state-done { color:var(--c-success); font-weight:600; }
.step-state-next { background:var(--c-primary); color:#fff; font-weight:600; }
.step-state-upcoming { color:var(--c-text-3); }
/* Bannière « à faire maintenant » */
.next-action { border:1px solid var(--c-primary); background:var(--c-primary-soft); }
.next-done { border-color:#CDE8D4; background:var(--c-success-bg); }
.next-head { margin-bottom:var(--sp-2); }
.next-badge { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:var(--r-full); background:var(--c-primary); color:#fff; }
.next-body { display:flex; gap:var(--sp-4); align-items:flex-start; }
.next-num { width:34px; height:34px; font-size:1rem; background:var(--c-primary); color:#fff; }
.next-body > div { flex:1; min-width:0; }
.next-cta { flex-shrink:0; align-self:center; }

/* ---------- Badges gamification ---------- */
.badges-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.badge-tile {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); text-align:center;
  padding:var(--sp-3) var(--sp-1); border-radius:var(--r-md); background:var(--c-accent-soft);
}
.badge-tile .badge-ic { font-size:1.6rem; }
.badge-tile.locked { background:var(--c-surface-alt); filter:grayscale(1); opacity:.45; }
.badge-tile.earned { border:1px solid #EAD9A8; }

/* ---------- Welcome ---------- */
.welcome-hero { background:linear-gradient(120deg,#FAF9F7,#FFF1E7); text-align:center; padding:var(--sp-10) var(--sp-6); }
.welcome-hero h2 { font-size:2rem; margin-bottom:var(--sp-3); }
.welcome-intro { font-size:1.05rem; max-width:640px; margin:0 auto; color:var(--c-text-2); }
.welcome-tagline { font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--c-primary); margin-bottom:var(--sp-3); }
.vision-txt { font-family:var(--font-head); font-size:1.15rem; font-weight:600; color:var(--c-primary); }
.figures-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.figure-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--sp-1); padding:var(--sp-5) var(--sp-3); }
.figure-val { font-family:var(--font-head); font-size:1.75rem; font-weight:700; color:var(--c-primary); font-variant-numeric:tabular-nums; line-height:1.1; }
.figure-label { font-size:.8rem; color:var(--c-text-2); }
.chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0; }
.chips .meta-chip { padding:6px 12px; border-radius:999px; font-size:.85rem; }
.identity-list { margin-top:var(--sp-2); }
@media (max-width:860px) { .figures-grid { grid-template-columns:repeat(2,1fr); } }
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.value-tile { background:var(--c-surface-alt); border-radius:var(--r-md); padding:var(--sp-4); }
.clean-list { list-style:none; }
.clean-list li { padding:var(--sp-2) 0; border-bottom:1px solid var(--c-border); }
.clean-list li:last-child { border-bottom:none; }
.obj-list li::before { content:"🎯 "; }
.cta-card { text-align:center; }

/* ---------- Docs ---------- */
.searchbar { margin-bottom:var(--sp-5); }
.searchbar input { max-width:480px; min-height:48px; }
.docs-cat { margin:var(--sp-5) 0 var(--sp-3); color:var(--c-text-2); font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; }
.doc-item { padding:0; margin-bottom:var(--sp-2); }
.doc-item summary { padding:var(--sp-4) var(--sp-5); cursor:pointer; list-style:none; }
.doc-item summary::-webkit-details-marker { display:none; }
.doc-item summary::before { content:"▸ "; color:var(--c-primary); }
.doc-item[open] summary::before { content:"▾ "; }
.doc-body { padding:0 var(--sp-5) var(--sp-4); color:var(--c-text-2); }

/* ---------- Formations ---------- */
.training { display:flex; align-items:center; gap:var(--sp-4); }
.training-done { background:var(--c-success-bg); border-color:#CDE8D4; }
.training-ic { font-size:1.5rem; }
.training-body { flex:1; min-width:0; }
.training-check { font-size:1.3rem; }
.quiz-q { border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--sp-4); margin-bottom:var(--sp-3); }
.quiz-q legend { padding:0 var(--sp-2); }

/* ---------- Équipe & outils ---------- */
.team-grid, .tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.tools-grid { grid-template-columns:repeat(3,1fr); }
.member { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-1); margin:0; }
.tool { margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.tool-ic { font-size:1.6rem; }
.tool-links { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); flex-wrap:wrap; }
.tool-head { display:flex; align-items:center; gap:var(--sp-2); }
.tool-head strong { font-size:1.05rem; }
.tool-owners { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); padding:var(--sp-2) 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.tool-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-3); margin-right:var(--sp-1); }
.owner-chip { font-size:.8rem; font-weight:600; padding:3px 10px; border-radius:var(--r-full); background:var(--c-primary-soft); color:var(--c-primary); }
.tool-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:auto; }
.tool-tuto { margin-top:var(--sp-1); }
.tool-recovery { margin-top:var(--sp-1); border-top:1px dashed var(--c-border); padding-top:var(--sp-2); }
.tool-recovery summary { cursor:pointer; font-weight:600; font-size:.85rem; color:var(--c-primary); }
.tool-recovery summary:hover { color:var(--c-primary-hover); }
/* Gestion responsables (Back Office) */
.modal-sep { border:none; border-top:1px solid var(--c-border); margin:var(--sp-5) 0 var(--sp-3); }
.owner-manage-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); }
.owner-row { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--c-border); flex-wrap:wrap; }
.owner-row:last-child { border-bottom:none; }
.owner-row-actions { display:flex; gap:var(--sp-2); flex-shrink:0; }

/* ---------- Organigramme (arbre) ---------- */
.org-card { padding:var(--sp-5) var(--sp-3); }
.org-scroll { overflow-x:auto; padding-bottom:var(--sp-3); }
.org-chart { display:inline-block; min-width:100%; text-align:center; }
.org-chart ul { position:relative; padding-top:24px; display:flex; justify-content:center; gap:var(--sp-2); list-style:none; margin:0; }
.org-chart li { position:relative; padding:24px var(--sp-2) 0; }
/* connecteurs */
.org-chart li::before, .org-chart li::after {
  content:""; position:absolute; top:0; right:50%; width:50%; height:24px;
  border-top:2px solid var(--c-border-strong);
}
.org-chart li::after { right:auto; left:50%; border-left:2px solid var(--c-border-strong); }
.org-chart li:only-child::before, .org-chart li:only-child::after { display:none; }
.org-chart li:only-child { padding-top:0; }
.org-chart li:first-child::before, .org-chart li:last-child::after { border:0; }
.org-chart li:last-child::before { border-right:2px solid var(--c-border-strong); }
.org-chart ul ul::before {
  content:""; position:absolute; top:0; left:50%; width:0; height:24px;
  border-left:2px solid var(--c-border-strong);
}
.org-chart > ul { padding-top:0; }
.org-chart > ul > li { padding-top:0; }
.org-chart > ul > li::before, .org-chart > ul > li::after { display:none; }

.org-node {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:var(--sp-3) var(--sp-4); min-width:140px; max-width:170px;
  position:relative; transition:box-shadow var(--dur-fast), transform var(--dur-fast);
}
.org-node:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.org-lead { border-color:var(--c-primary); box-shadow:0 0 0 1px var(--c-primary-soft), var(--shadow-1); }
.org-avatar {
  width:52px; height:52px; border-radius:var(--r-full); background-size:cover; background-position:center;
  background-color:var(--c-surface-alt); display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--c-primary); margin-bottom:2px; border:2px solid var(--c-surface);
  box-shadow:0 0 0 1px var(--c-border);
}
.org-lead .org-avatar { box-shadow:0 0 0 2px var(--c-primary); }
.org-name { font-family:var(--font-head); font-weight:600; font-size:.85rem; line-height:1.2; }
.org-fn { font-size:.72rem; color:var(--c-text-2); line-height:1.25; }
.org-dept { font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-3); margin-top:2px; }
.org-count {
  position:absolute; top:-8px; right:-8px; background:var(--c-primary); color:#fff;
  font-size:.68rem; font-weight:700; min-width:20px; height:20px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center; padding:0 5px; box-shadow:var(--shadow-1);
}

/* ---------- Updates & notifs ---------- */
.update-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); }
/* Le fond par defaut est un garde-fou : sans lui, un `type` non declare dans
   SEED.updateTypes rend une pastille sans fond ni couleur (defaut constate sur
   `content`, cf. docs/46). Les 4 classes .type-* ci-dessous surchargent.
   --c-text-2 sur --c-surface-alt = 6,89:1 (AA texte normal, requis ici : .72rem
   = 11,52px, le gras ne qualifie pas le grand texte sous 18,66px).            */
.update-type { font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:var(--r-full);
  background:var(--c-surface-alt); color:var(--c-text-2); }
.type-feature { background:var(--c-success-bg); color:var(--c-success); }
.type-improvement { background:var(--c-info-bg); color:var(--c-info); }
.type-fix { background:var(--c-warning-bg); color:var(--c-warning); }
/* Documentation : seul token de fond assez sombre pour trancher sur le blanc de
   la carte sans emprunter une couleur porteuse de sens (le terracotta est
   reserve aux etats actifs, l'ocre --c-accent se confondrait avec .type-fix).
   #57534E sur #E7E3DE = 5,97:1.                                              */
.type-content { background:var(--c-border); color:var(--c-text-2); }
.notif-new { border-left:3px solid var(--c-primary); }

/* ---------- Configuration (éditeur) ---------- */
.cfg-intro { padding:var(--sp-4) var(--sp-6); }
.cfg-tabs { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.cfg-tab {
  padding:8px 14px; border-radius:var(--r-full); font-size:.85rem; font-weight:600;
  background:var(--c-surface); border:1px solid var(--c-border); color:var(--c-text-2);
  display:inline-flex; align-items:center; gap:var(--sp-2); transition:all var(--dur-fast);
}
.cfg-tab:hover { border-color:var(--c-primary); }
.cfg-tab.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.cfg-tab.active .count { background:rgba(255,255,255,.25); color:#fff; }
.cfg-toolbar { align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.cfg-toolbar { justify-content:space-between; }
.cfg-toolbar-actions { display:flex; gap:var(--sp-2); }
/* FB-3 : barre de recherche de la Configuration */
.cfg-search { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.cfg-search input[type="search"] { flex:1 1 260px; max-width:480px; min-height:44px; }
.cfg-search #cfg-search-status { flex-shrink:0; font-variant-numeric:tabular-nums; }
.cfg-search .btn[hidden] { display:none; }
.cfg-row { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); margin-bottom:var(--sp-2); }
.cfg-row-body { flex:1; min-width:0; }
.cfg-row-actions { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
/* FB-4 : `--c-text-3` (#78716C) sur `--c-surface-alt` (#F5F3F0) mesurait 4,33:1 — sous le
   seuil WCAG AA (4,5:1) pour du texte < 18,66px, gras compris. Défaut préexistant, révélé
   par le contrôle de contraste de FB-4 et corrigé ici : `--c-text-2` = 6,89:1. */
.cfg-badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:var(--r-full); background:var(--c-surface-alt); color:var(--c-text-2); white-space:nowrap; }
.cfg-badge-custom { background:var(--c-primary-soft); color:var(--c-primary); }
/* FB-4 : le badge d'origine porte un nom de marque (« Modèle UrbanPOS ») — la casse
   d'origine est conservée, contrairement aux badges d'état d'un seul mot. */
.cfg-badge-origin { text-transform:none; letter-spacing:.01em; }
.cfg-legend { margin-top:var(--sp-2); display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; }
.cfg-legend-item { display:inline-flex; align-items:center; gap:6px; }
.cfg-legend-note { flex:1 1 100%; }
.cfg-del:hover { color:var(--c-danger); border-color:var(--c-danger); }
.cfg-badge-pub { background:var(--c-success-bg); color:var(--c-success); }
/* Ordre & regroupement (Configuration) */
.cfg-phase-group { margin-bottom:var(--sp-5); }
.cfg-phase-title { font-size:.95rem; font-weight:700; color:var(--c-text-2); margin:0 0 var(--sp-2) var(--sp-1); padding-bottom:var(--sp-1); border-bottom:1px solid var(--c-border); display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.cfg-num { width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:var(--r-full); background:var(--c-surface-alt); color:var(--c-text-2); font-weight:700; font-size:.8rem; font-variant-numeric:tabular-nums; }
/* FB-2 : le numero est saisissable (rang dans la phase). Desactive, il retrouve
   exactement l'apparence de l'ancien badge en lecture seule. */
input.cfg-num { display:block; width:34px; padding:0 2px; text-align:center; border:1px solid var(--c-border); background:var(--c-surface-alt); -moz-appearance:textfield; }
input.cfg-num::-webkit-outer-spin-button, input.cfg-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input.cfg-num:hover:not(:disabled), input.cfg-num:focus { border-color:var(--c-primary); background:var(--c-primary-soft); color:var(--c-primary); }
input.cfg-num:disabled { border-color:transparent; opacity:.75; cursor:default; }
.cfg-reorder { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.btn-reorder { width:30px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid var(--c-border-strong); border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text-2); font-size:.7rem; line-height:1; }
.btn-reorder:hover:not(:disabled) { border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-soft); }
.btn-reorder:disabled { opacity:.35; cursor:not-allowed; }
/* FB-2b : la fleche qui PROPOSE un changement d'echeance (bord de bloc) se distingue
   de celle qui deplace tout de suite — pointille = « une question va etre posee ».
   Aucun jeton de couleur nouveau : meme palette, seul le trait change. */
.btn-reorder-due { border-style:dashed; }
.btn-reorder-due:hover { border-style:solid; }
.stack-form textarea { font:inherit; padding:10px 12px; border:1px solid var(--c-border-strong); border-radius:var(--r-sm); width:100%; resize:vertical; }

/* ---------- Base de connaissances ---------- */
.kb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.kb-card { text-align:left; display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; transition:box-shadow var(--dur-fast),transform var(--dur-fast); cursor:pointer; }
.kb-card:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.kb-card-top { display:flex; justify-content:space-between; align-items:center; width:100%; gap:var(--sp-2); }
.kb-soft { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:var(--r-full); background:var(--c-accent-soft); color:var(--c-accent); }
.kb-meta { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:auto; }
.proc-row { align-items:flex-start; }
.stat-line { display:flex; justify-content:space-between; gap:var(--sp-3); padding:6px 0; border-bottom:1px solid var(--c-border); }
.stat-line:last-child { border-bottom:none; }
.form-2col { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.form-2col > label { flex:1; min-width:140px; }
.assoc-list { display:flex; flex-direction:column; gap:var(--sp-1); max-height:50vh; overflow-y:auto; margin:var(--sp-3) 0; }
.modal-proc h4, .modal-proc-form h2 { margin-top:var(--sp-5); }
.proc-steps { margin:var(--sp-2) 0 var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.proc-steps li strong { display:block; }
.proc-video, .proc-link { display:block; padding:8px 12px; margin-bottom:var(--sp-2); border-radius:var(--r-sm); background:var(--c-surface-alt); color:var(--c-primary); font-weight:600; font-size:.9rem; }
.proc-video:hover, .proc-link:hover { background:var(--c-primary-soft); }
.proc-err { padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2); border-left:3px solid var(--c-warning); background:var(--c-warning-bg); border-radius:var(--r-sm); }
/* Encadré d'avertissement en tête de fiche. Porté par le champ `description` (interpolé en
   HTML brut par App.procBody, comme SEED.updates) : aucune colonne ni composant en plus.
   `display:block` sur un <strong> reste du HTML valide dans un <p> ET dans le <button> de la
   carte KB. La couleur est réaffirmée car le parent porte `.muted` — un avertissement ne doit
   jamais être grisé. Le texte reste lisible sans la couleur seule (icône + gras + filet). */
.proc-warn { display:block; margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4); border-left:4px solid var(--c-warning); background:var(--c-warning-bg); border-radius:var(--r-sm); color:var(--c-text); font-weight:600; font-size:.92rem; line-height:1.5; text-align:left; }
.kb-card .proc-warn { margin-bottom:var(--sp-2); padding:var(--sp-2) var(--sp-3); font-size:.82rem; }
.proc-usedin { margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid var(--c-border); }
.task-docs { margin:var(--sp-4) 0; padding:var(--sp-3) var(--sp-4); background:var(--c-accent-soft); border-radius:var(--r-md); }
.task-docs h4 { margin-bottom:var(--sp-2); }
.proc-assoc-item { display:block; width:100%; text-align:left; padding:8px 12px; margin-bottom:var(--sp-1); border-radius:var(--r-sm); background:var(--c-surface); border:1px solid var(--c-border); font-size:.9rem; font-weight:500; transition:border-color var(--dur-fast); }
.proc-assoc-item:hover { border-color:var(--c-accent); }

/* ---------- Sélecteur de profil ---------- */
.picker-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.picker-card {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:var(--sp-10); max-width:640px; width:100%;
}
.picker-card h1 { font-size:1.75rem; margin-bottom:var(--sp-2); }
.picker-h { font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-3); margin:var(--sp-6) 0 var(--sp-3); }
.picker-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.picker-item {
  display:flex; align-items:center; gap:var(--sp-3); text-align:left; padding:var(--sp-3);
  border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-surface);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast); width:100%;
}
.picker-item:hover { border-color:var(--c-primary); box-shadow:var(--shadow-2); }
.picker-item strong { display:block; font-size:.9rem; }
.picker-item small { color:var(--c-text-3); font-size:.75rem; }

/* ---------- Connexion ---------- */
.login-card { max-width:420px; }
.login-card .stack-form { margin-top:var(--sp-5); }
.login-card label small { font-weight:400; margin-top:2px; }
.login-switch { margin-top:var(--sp-4); text-align:center; }
.member .avatar-lg { background-color:var(--c-surface-alt); overflow:hidden; }

/* ---------- Modales ---------- */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(41,37,36,.5); z-index:800;
  display:flex; align-items:center; justify-content:center; padding:var(--sp-4);
}
.modal {
  background:var(--c-surface); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:var(--sp-8);
  position:relative; animation:modalIn var(--dur-base) var(--ease-out);
}
@keyframes modalIn { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-close {
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:44px; height:44px;
  border-radius:var(--r-full); font-size:1.1rem; color:var(--c-text-2);
}
.modal-close:hover { background:var(--c-surface-alt); }
.modal-status { display:flex; gap:var(--sp-2); margin:var(--sp-4) 0; flex-wrap:wrap; }
.ck-line { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; cursor:pointer; }
.ck-line input { width:auto; min-height:20px; min-width:20px; accent-color:var(--c-primary); }
.inline-form { display:flex; gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-4); }
.inline-form input { flex:1; }
.stack-form { display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-4); }
.stack-form label { display:flex; flex-direction:column; gap:var(--sp-1); font-weight:500; font-size:.9rem; }
.comment { background:var(--c-surface-alt); border-radius:var(--r-md); padding:var(--sp-3); margin-bottom:var(--sp-2); }

/* ---------- Toast & célébration ---------- */
#toast-zone { position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:1000; display:flex; flex-direction:column; gap:var(--sp-2); }
.toast {
  background:#292524; color:#fff; padding:var(--sp-3) var(--sp-5); border-radius:var(--r-md);
  box-shadow:var(--shadow-3); opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-base), transform var(--dur-base); font-size:.9rem; max-width:340px;
}
.toast.show { opacity:1; transform:translateY(0); }
.celebrate {
  position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:rgba(41,37,36,.35); animation:modalIn var(--dur-base) var(--ease-out);
}
.celebrate-card {
  background:var(--c-surface); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  padding:var(--sp-10); text-align:center; max-width:400px;
  border-top:4px solid var(--c-accent);
}
.celebrate-ic { font-size:3rem; display:block; margin-bottom:var(--sp-3); animation:pulseIc 1s var(--ease-out) 2; }
@keyframes pulseIc { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .sidebar {
    position:fixed; left:-280px; top:0; z-index:600; transition:left var(--dur-base) var(--ease-out);
    box-shadow:var(--shadow-3); height:100vh;
  }
  .sidebar.open { left:0; }
  .burger { display:block; }
  .grid-kpi { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .tools-grid { grid-template-columns:repeat(2,1fr); }
  .kanban { grid-template-columns:1fr; }
}
@media (max-width: 767px) {
  .content { padding:var(--sp-4); }
  .grid-2 { grid-template-columns:1fr; }
  .hero { flex-direction:column; text-align:center; }
  .values-grid, .picker-grid { grid-template-columns:1fr; }
  .team-grid, .tools-grid { grid-template-columns:repeat(2,1fr); }
  .badges-grid { grid-template-columns:repeat(4,1fr); }
  .topbar-who { display:none; }
  .modal { padding:var(--sp-6); max-height:92vh; }
  .picker-card { padding:var(--sp-6); }
  h2 { font-size:1.4rem; }
}
@media (max-width: 420px) {
  .grid-kpi { grid-template-columns:1fr 1fr; gap:var(--sp-2); }
  .kpi { padding:var(--sp-3); gap:var(--sp-2); }
  .team-grid { grid-template-columns:1fr 1fr; }
  .tools-grid { grid-template-columns:1fr; }
}

/* ===== V4-1 : Rôles & accès + badges base documentaire ===== */
.intro-card h3 { margin-bottom:var(--sp-2); }
.table-scroll { overflow-x:auto; }
.roles-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.roles-table th, .roles-table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.roles-table th { color:var(--c-text-3); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; }
.roles-table tr:last-child td { border-bottom:none; }
.role-select { width:auto; min-width:150px; padding:6px 10px; }
.role-select:disabled { opacity:.6; cursor:not-allowed; }
.badge-base { display:inline-block; padding:2px 8px; border-radius:var(--r-full); font-size:.72rem; font-weight:600; white-space:nowrap; vertical-align:middle; }
.badge-admin { background:var(--c-info-bg); color:var(--c-info); }
.badge-metier { background:var(--c-success-bg); color:var(--c-success); }
.badge-none { background:var(--c-surface-alt); color:var(--c-text-3); }

/* ===== V6-2 : Matrice « Droits & permissions » =====
   Table dense mais lisible : 1re colonne collante (on garde le libellé du droit en vue pendant
   le défilement horizontal), en-tête de rôles collant, groupes par catégorie. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.perm-actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.perm-actions-spacer { flex:1 1 auto; }

.perm-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; }
.perm-table th, .perm-table td { border-bottom:1px solid var(--c-border); }

/* En-tête : rôles */
.perm-role-head {
  position:sticky; top:0; z-index:2;
  background:var(--c-surface-alt); color:var(--c-text-3);
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:8px 4px; text-align:center; min-width:78px; width:78px; max-width:78px;
  /* V7 : les libellés de rôles sont saisis par l'admin (« Support niveau 2 ») → nowrap tronquait.
     On passe en 2 lignes plutôt qu'abréger : une abréviation + tooltip serait inaccessible au tactile. */
  white-space:normal; line-height:1.25; vertical-align:bottom; hyphens:auto; overflow-wrap:anywhere;
}
.perm-name-head {
  position:sticky; top:0; left:0; z-index:3;
  background:var(--c-surface-alt); color:var(--c-text-3);
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:10px 12px; text-align:left; min-width:260px;
}

/* Lignes de catégorie */
.perm-cat-row .perm-cat {
  position:sticky; left:0;
  background:var(--c-primary-soft); color:var(--c-primary);
  font-family:var(--font-head); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  padding:8px 12px; text-align:left;
}

/* Colonne « permission » (collante) */
.perm-name {
  position:sticky; left:0; z-index:1;
  background:var(--c-surface);
  padding:10px 12px; text-align:left; font-weight:400;
  min-width:260px; max-width:380px;
  border-right:1px solid var(--c-border);
}
.perm-label { display:block; font-weight:600; color:var(--c-text); font-size:.9rem; }
.perm-desc  { display:block; margin-top:2px; line-height:1.35; }
.perm-key   { display:block; margin-top:3px; font-size:.7rem; opacity:.65; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.perm-lock  { font-size:.78rem; cursor:help; }

/* Cellules à cocher — cible tactile 44px (WCAG 2.5.5) via le padding de la cellule */
.perm-cell { text-align:center; padding:0; }
.perm-cell .perm-box {
  width:18px; height:18px; margin:0; cursor:pointer;
  accent-color:var(--c-primary);
  padding:13px; /* porte la zone cliquable à ≥44px avec la cellule */
}
.perm-cell .perm-box:disabled { cursor:not-allowed; opacity:.45; }
.perm-cell .perm-box:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
/* Modification non enregistrée : repérable sans dépendre uniquement de la couleur (bordure + fond) */
.perm-cell.perm-changed { background:var(--c-warning-bg); box-shadow:inset 0 0 0 2px var(--c-warning); }
.perm-table tbody tr:hover .perm-name,
.perm-table tbody tr:hover td { background:var(--c-surface-alt); }
.perm-table tbody tr:hover .perm-cell.perm-changed { background:var(--c-warning-bg); }

@media (max-width:768px) {
  .perm-name, .perm-name-head { min-width:190px; max-width:220px; }
  .perm-key { display:none; }
}

/* ===== V5 : Gestion des utilisateurs + Journal d'audit ===== */
.users-stats { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.users-stats .btn-sm { margin-left:auto; }
.pill { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--r-full); font-size:.78rem; font-weight:600; white-space:nowrap; }
.pill-ok { background:var(--c-success-bg); color:var(--c-success); }
.pill-off { background:var(--c-danger-bg); color:var(--c-danger); }
.user-status { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.users-table tr.row-off td { opacity:.62; }
.users-table tr.row-off td:first-child { opacity:1; }
.nowrap { white-space:nowrap; }

.audit-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.audit-filters .fld { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--c-text-3); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.audit-filters .fld input, .audit-filters .fld select { min-width:150px; padding:6px 10px; font-size:.9rem; text-transform:none; letter-spacing:0; font-weight:400; color:var(--c-text); }
.audit-table td { vertical-align:top; }
.audit-action { display:inline-block; padding:2px 10px; border-radius:var(--r-full); background:var(--c-primary-soft); color:var(--c-primary); font-size:.8rem; font-weight:600; white-space:nowrap; }
.audit-detail { color:var(--c-text-2); font-size:.88rem; }
.audit-kv { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.audit-kv .kv { background:var(--c-surface-alt); border:1px solid var(--c-border); border-radius:var(--r-sm); padding:1px 8px; font-size:.78rem; color:var(--c-text-2); }
.audit-kv .kv em { color:var(--c-text-3); font-style:normal; font-weight:600; margin-right:3px; }
.audit-pager { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-4); }

/* ===== V4-2 : Sous-tâches validables ===== */
.subtasks-zone { margin:var(--sp-4) 0; padding:var(--sp-3); background:var(--c-surface-alt); border-radius:var(--r-sm); }
.subtasks-zone h4 { margin:0 0 var(--sp-2); }
.subtask-count { font-size:.8rem; padding:1px 8px; border-radius:var(--r-full); background:var(--c-surface); border:1px solid var(--c-border); margin-left:6px; }
.subtask { padding:8px 0; border-bottom:1px solid var(--c-border); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.subtask:last-of-type { border-bottom:none; }
.subtask-main { flex:1; min-width:180px; margin:0; }
.subtask-done .subtask-title { text-decoration:line-through; color:var(--c-text-3); }
.subtask-actions { display:flex; gap:4px; }
.subtask-docs { flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; padding-left:26px; }
.subtask-doc { background:var(--c-primary-soft); color:var(--c-primary); border:none; border-radius:var(--r-full); padding:3px 10px; font-size:.78rem; cursor:pointer; }
.subtask-doc:hover { background:var(--c-primary); color:#fff; }
.subtask-lock { margin-top:6px; }
.subtask-reorder { display:flex; flex-direction:column; gap:2px; }
.reorder-btn { width:28px; height:22px; padding:0; border:1px solid var(--c-border); background:var(--c-surface); border-radius:4px; cursor:pointer; font-size:.7rem; line-height:1; color:var(--c-text-2); }
.reorder-btn:hover:not(:disabled) { background:var(--c-primary-soft); color:var(--c-primary); }
.reorder-btn:disabled { opacity:.35; cursor:default; }
.reorder-btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:1px; }

/* ===== Vidéos Loom : façade cliquable + lazy-iframe + placeholder ===== */
.loom-list { display:flex; flex-direction:column; gap:8px; margin:6px 0; }
.loom-facade { display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:44px; padding:10px 14px; border:1px solid var(--c-border-strong); border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text); font:inherit; cursor:pointer; }
.loom-facade:hover { background:var(--c-primary-soft); border-color:var(--c-primary); }
.loom-facade:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.loom-play { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--r-full); background:var(--c-primary); color:#fff; font-size:.8rem; flex-shrink:0; }
.loom-play-muted { background:var(--c-surface-alt); color:var(--c-text-3); }
.loom-facade-title { flex:1; font-weight:500; }
.loom-facade-tag { font-size:.68rem; font-weight:600; text-transform:uppercase; color:var(--c-text-3); border:1px solid var(--c-border); border-radius:var(--r-full); padding:1px 8px; }
.loom-placeholder { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px dashed var(--c-border-strong); border-radius:var(--r-sm); background:var(--c-surface-alt); color:var(--c-text-2); }
.loom-embed { position:relative; width:100%; padding-top:56.25%; border-radius:var(--r-sm); overflow:hidden; background:#000; margin:6px 0; }
.loom-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== V4-3 : versions, recherche globale, lecture ===== */
.proc-read-actions { margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--c-border); }
.ver-list { display:flex; flex-direction:column; gap:6px; margin:var(--sp-3) 0; }
.ver-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:var(--c-surface-alt); border-radius:var(--r-sm); }
.global-hits { background:var(--c-accent-soft); border:1px solid var(--c-border); }
.global-hits h4 { margin:0 0 var(--sp-2); }
.ghit-group { margin-bottom:var(--sp-2); }
.ghit-label { display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--c-text-3); margin-bottom:4px; }
.ghit { padding:4px 0; font-size:.9rem; }
.ghit-doc { background:var(--c-primary-soft); color:var(--c-primary); border:none; border-radius:var(--r-full); padding:2px 10px; font-size:.78rem; cursor:pointer; }
.ghit-doc:hover { background:var(--c-primary); color:#fff; }
.diff-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.diff-table th, .diff-table td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--c-border); vertical-align:top; }
.diff-table th { color:var(--c-text-3); font-size:.75rem; text-transform:uppercase; }
.diff-old { color:var(--c-danger); text-decoration:line-through; }
.diff-new { color:var(--c-success); font-weight:500; }

/* ===== Documentation collaborateur : filtres service/catégorie (quick win métier) ===== */
.doc-filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--sp-3); }
.doc-filter-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--c-text-3); margin-right:4px; }
.doc-chip { min-height:44px; padding:8px 16px; border:1px solid var(--c-border-strong); border-radius:var(--r-full); background:var(--c-surface); color:var(--c-text-2); font:inherit; font-size:.85rem; font-weight:500; cursor:pointer; transition:background var(--dur-fast), border-color var(--dur-fast); }
.doc-chip:hover { background:var(--c-surface-alt); }
.doc-chip.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.doc-chip:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

/* ===== Archivage collaborateur : segmented control + carte archivée ===== */
.toolbar-split { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.segmented { display:inline-flex; border:1px solid var(--c-border-strong); border-radius:var(--r-full); overflow:hidden; }
.seg-btn { min-height:44px; padding:8px 16px; border:none; background:var(--c-surface); color:var(--c-text-2); font:inherit; font-size:.85rem; font-weight:500; cursor:pointer; }
.seg-btn + .seg-btn { border-left:1px solid var(--c-border); }
.seg-btn.active { background:var(--c-primary); color:#fff; }
.seg-btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:-2px; }
.seg-count { display:inline-block; min-width:20px; padding:0 6px; border-radius:var(--r-full); background:rgba(0,0,0,.08); font-size:.72rem; }
.seg-btn.active .seg-count { background:rgba(255,255,255,.25); }
.hire-archived { opacity:.72; }
.hire-archived .avatar-hire { filter:grayscale(.6); }

/* ===== Kanban drag & drop + panneau latéral desktop ===== */
.kanban-hint { margin-bottom:var(--sp-3); }
.kanban-card { cursor:grab; }
.kanban-card.dragging { opacity:.5; cursor:grabbing; }
.kanban-col-body { min-height:60px; display:flex; flex-direction:column; gap:10px; border-radius:var(--r-sm); transition:background var(--dur-fast); }
.kanban-col.drop-target { outline:2px dashed var(--c-primary); outline-offset:2px; }
.kanban-col.drop-target .kanban-col-body { background:var(--c-primary-soft); }
/* Panneau latéral (desktop) : la fiche tâche se docke à droite au lieu d'être centrée */
@media (min-width:1024px) {
  .task-sheet-backdrop { justify-content:flex-end; align-items:stretch; padding:0; }
  .task-sheet { max-width:480px; width:480px; height:100vh; max-height:100vh; border-radius:0; overflow-y:auto; animation:sheetIn var(--dur-base) ease; box-shadow:-8px 0 30px rgba(0,0,0,.14); }
  @keyframes sheetIn { from { transform:translateX(30px); opacity:.6; } to { transform:translateX(0); opacity:1; } }
}


/* ============================================================
   V7 — Rôles dynamiques + portée par service (matrice enrichie)
   Specs ui-ux-max. Aucune lib, aucun CDN : vanilla CSS sur les tokens existants.
   ============================================================ */

/* --- En-têtes de colonnes : rôle système vs rôle personnalisé --- */
.perm-role-head--system { background:var(--c-border); }
.perm-role-name { display:block; }
.perm-role-sys { font-size:.7rem; opacity:.75; cursor:help; }
.perm-role-menu {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-top:2px; border-radius:var(--r-sm);
  color:var(--c-text-3); background:transparent; border:0; cursor:pointer; line-height:1;
}
.perm-role-menu:hover { background:var(--c-border-strong); color:var(--c-text); }
.perm-role-menu:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.perm-role-add { min-width:52px; width:52px; }
.btn-addrole {
  width:36px; height:36px; border-radius:var(--r-sm); color:var(--c-primary);
  border:1px dashed var(--c-border-strong); background:transparent; font-size:1.1rem;
  line-height:1; cursor:pointer;
}
.btn-addrole:hover { background:var(--c-primary-soft); border-color:var(--c-primary); }
.btn-addrole:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.perm-col-pad { min-width:52px; }

/* --- Cellule à 3 états : refusé / accordé tous services / accordé restreint ---
   WCAG 1.4.1 : l'information n'est JAMAIS portée par la couleur seule →
   glyphe (✕/✓) + sous-libellé texte (« Tous » / « 3 svc ») + liseré pour l'état restreint. */
.perm-cell-scoped { padding:0; }
.perm-tri {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:100%; min-height:44px; padding:4px 2px;      /* cible tactile ≥44px — WCAG 2.5.5 */
  border:0; border-radius:var(--r-sm); background:transparent; cursor:pointer;
}
.perm-tri:hover { background:var(--c-surface-alt); }
.perm-tri:focus-visible { outline:none; box-shadow:inset var(--focus-ring); }
.perm-tri-ico { font-size:1rem; line-height:1; color:var(--c-text-3); }
.perm-tri-sub { font-size:.66rem; font-weight:600; color:var(--c-text-3); }
.perm-tri.is-on, .perm-tri.is-partial { background:var(--c-success-bg); }
.perm-tri.is-on .perm-tri-ico, .perm-tri.is-partial .perm-tri-ico { color:var(--c-success); }
.perm-tri.is-partial {
  border-left:3px solid var(--c-accent);   /* 3e signal, non chromatique par sa forme */
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.perm-tri.is-partial .perm-tri-sub { color:var(--c-accent); }
.perm-scopable { display:block; margin-top:3px; font-size:.7rem; font-weight:600; color:var(--c-accent); }

/* --- Modale de portée --- */
.scope-choice { border:0; display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-4) 0; padding:0; }
.scope-opt {
  display:flex; gap:var(--sp-3); align-items:flex-start; padding:10px 12px; min-height:44px;
  border:1px solid var(--c-border); border-radius:var(--r-sm); cursor:pointer;
}
.scope-opt:has(:checked) { border-color:var(--c-primary); background:var(--c-primary-soft); }
.scope-opt input { width:auto; margin-top:3px; accent-color:var(--c-primary); flex:none; }
.scope-opt em { display:block; font-style:normal; }
.scope-services { border:1px solid var(--c-border); border-radius:var(--r-sm); padding:var(--sp-3); max-height:260px; overflow:auto; }
.scope-services[hidden] { display:none; }
.scope-services-head { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-2); }
.scope-services-head .btn-sm { margin-left:auto; }
.scope-svc { display:flex; align-items:center; gap:var(--sp-2); min-height:44px; cursor:pointer; }
.scope-svc input { width:auto; accent-color:var(--c-primary); flex:none; }
.scope-warn {
  color:var(--c-danger); background:var(--c-danger-bg); border-radius:var(--r-sm);
  padding:8px 12px; font-size:.85rem; font-weight:600; margin-top:var(--sp-3);
}
.scope-warn[hidden] { display:none; }

/* --- Modale de gestion des rôles --- */
.sep { border:0; border-top:1px solid var(--c-border); margin:var(--sp-5) 0; }
.del-accounts { margin:var(--sp-2) 0; }
.del-accounts summary { cursor:pointer; font-size:.85rem; color:var(--c-text-3); min-height:32px; }
.del-list { margin:var(--sp-2) 0 0 var(--sp-4); font-size:.9rem; }

/* --- V7-3 : rétention du journal --- */
.retention-row { display:flex; align-items:flex-end; gap:var(--sp-3); flex-wrap:wrap; }
.retention-row .fld { max-width:220px; }
.retention-spacer { flex:1 1 auto; }

@media (max-width:768px) {
  /* La matrice reste scrollable horizontalement ; le corps de page ne scrolle jamais. */
  .retention-row { align-items:stretch; }
  .retention-spacer { display:none; }
}


/* --- V7-5 : ecran Services --- */
.svc-usage { white-space:nowrap; font-size:.9rem; }
.svc-actions { text-align:right; white-space:nowrap; }
.svc-warn {
  color:var(--c-danger); background:var(--c-danger-bg); border-radius:var(--r-sm);
  padding:10px 12px; font-size:.85rem; margin:var(--sp-2) 0;
}
@media (max-width:768px) {
  .svc-usage { white-space:normal; }
}


/* ============================================================================
   V8 — Documentation liée aux tâches
   ============================================================================ */

/* --- V8-1 : selecteur « Documentation associee » (page Configuration) --- */
.doclink { border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4) var(--sp-4); margin:var(--sp-2) 0; }
.doclink legend { font-weight:600; font-size:.95rem; padding:0 var(--sp-2); }
.doclink-later { border:1px dashed var(--c-border-strong); border-radius:var(--r-md); padding:var(--sp-3); margin:var(--sp-2) 0; }

.doclink-linked { list-style:none; margin:var(--sp-2) 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.doclink-none { padding:var(--sp-2) 0; }
.doclink-item {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);
}
.doclink-title { flex:1 1 auto; min-width:0; font-size:.9rem; }
/* Cible tactile : 44px, jamais le seul glyphe. */
.doclink-remove {
  flex:0 0 auto; min-width:44px; min-height:44px; border-radius:var(--r-sm);
  background:transparent; color:var(--c-text-2); font-size:1rem; line-height:1;
}
.doclink-remove:hover { background:var(--c-surface); color:var(--c-danger); }
.doclink-draft { font-size:.7rem; background:var(--c-surface); border:1px solid var(--c-border-strong); border-radius:var(--r-full); padding:2px 8px; }

.doclink-search { position:relative; }
.doclink-results {
  list-style:none; margin:var(--sp-1) 0 0; padding:var(--sp-1); position:absolute; z-index:20;
  left:0; right:0; max-height:320px; overflow-y:auto;
  background:var(--c-surface); border:1px solid var(--c-border-strong);
  border-radius:var(--r-md); box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.doclink-result {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; cursor:pointer;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  border-left:3px solid transparent;   /* l'option active n'est PAS signalee par la seule couleur (SC 1.4.1) */
  min-height:44px;
}
.doclink-result:hover { background:var(--c-surface-alt); }
.doclink-result.is-active { background:var(--c-accent-soft); border-left-color:var(--c-accent); }
.doclink-add-hint { margin-left:auto; font-size:.8rem; color:var(--c-text-3); white-space:nowrap; }
.doclink-empty { padding:var(--sp-3); line-height:1.5; }

/* --- V8-2 : fiche procedure PLEIN ECRAN --- */
/* La page respire largement ; le TEXTE, lui, reste borne a une longueur de ligne lisible. */
.content-proc { max-width:1400px; }
.proc-page { display:flex; flex-direction:column; gap:var(--sp-4); }
.proc-page-bar {
  position:sticky; top:64px; z-index:30; margin:calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0;
  padding:var(--sp-3) var(--sp-6); background:var(--c-bg);
  border-bottom:1px solid var(--c-border);
}
.proc-back { min-height:44px; font-weight:600; }
.proc-page-body {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-8) var(--sp-10);
}
/* Colonne de lecture : nettement plus large que l'ancienne modale, sans etirer le texte. */
.proc-page-body > :is(h1,h2,p,ul,ol,.step-meta,.proc-err,.proc-usedin,.kb-soft,.proc-link) { max-width:90ch; }
.proc-page-body h1 { font-size:2rem; margin:var(--sp-2) 0 var(--sp-3); }
.proc-page-body h2 { font-size:1.25rem; margin:var(--sp-8) 0 var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid var(--c-border); }
.proc-page-body .proc-lead { font-size:1.05rem; line-height:1.6; }
.proc-page-body .proc-steps { gap:var(--sp-4); font-size:1rem; line-height:1.6; }
.proc-page-body .proc-steps li strong { font-size:1.02rem; }
.proc-page-body .proc-steps li p { font-size:.95rem; line-height:1.6; }
.proc-page-body .loom-list { max-width:900px; }
.proc-read-actions { margin-top:var(--sp-8); padding-top:var(--sp-4); border-top:1px solid var(--c-border); }

/* Captures : taille utile, jamais en timbre-poste. */
.proc-shots { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sp-4); margin:var(--sp-3) 0; max-width:1100px; }
.proc-shot { margin:0; }
.proc-shot img { width:100%; height:auto; border:1px solid var(--c-border); border-radius:var(--r-md); display:block; }
.proc-shot figcaption { margin-top:var(--sp-2); }

/* ── Capture posee SOUS l'etape qu'elle illustre (migration 0048) ──────────────
   `steps[].detail` est injecte DANS un <p> : l'image y est inline, sans <figure> ni
   <figcaption> (le parseur fermerait le <p> et l'etape eclaterait en silence).
   Selecteur et non classe : rien a ecrire dans le contenu, et une image posee depuis
   le Back Office est bornee elle aussi.
   /!\ `max-width` SANS `width` : c'est `.proc-shot img` moins son `width:100%`. Les
   captures vont de 305x57 a 1280x493 ; un `width` agrandirait la plus petite jusqu'a
   la colonne et la rendrait floue, l'absence de bornage ferait deborder la plus grande.
   `max-height` est un garde-fou pour une future capture en orientation portrait. */
.proc-steps li p img { display:block; max-width:100%; height:auto; max-height:460px; margin:var(--sp-2) 0 0; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-surface-alt); }

@media (max-width:1024px) {
  .proc-page-body { padding:var(--sp-6); }
}
@media (max-width:768px) {
  .proc-page-bar { top:64px; margin:calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0; padding:var(--sp-2) var(--sp-4); }
  .proc-page-body { padding:var(--sp-4); border-radius:var(--r-md); }
  .proc-page-body h1 { font-size:1.5rem; }
  .proc-shots { grid-template-columns:1fr; }
  .proc-steps li p img { max-height:300px; }
  .doclink-results { max-height:260px; }
}

/* ============================================================================
   WELCOME PACK (V9) — page lue AVANT le Jour J
   Aucune nouvelle couleur : réutilise les tokens existants. Toutes les grilles
   retombent en une colonne < 768px (la page est lue au téléphone, la veille).
   ========================================================================== */
.wp-hero { display:flex; align-items:center; gap:var(--sp-6); background:linear-gradient(120deg,#FAF9F7,#FFF1E7); padding:var(--sp-8) var(--sp-6); }
.wp-hero-txt { flex:1; min-width:0; }
.wp-kicker { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--c-primary); background:var(--c-primary-soft); border:1px solid var(--c-border); border-radius:var(--r-full);
  padding:var(--sp-1) var(--sp-3); margin-bottom:var(--sp-3); }
.wp-hero h2 { font-size:1.9rem; line-height:1.2; margin-bottom:var(--sp-3); }
.wp-intro { color:var(--c-text-2); max-width:62ch; }
.wp-countdown { flex:0 0 auto; text-align:center; background:var(--c-surface); border:1px solid var(--c-border-strong);
  border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6); box-shadow:var(--shadow-1); }
.wp-cd-val { display:block; font-family:var(--font-head); font-size:1.75rem; font-weight:700; color:var(--c-primary); }
.wp-cd-sub { display:block; font-size:.85rem; color:var(--c-text-3); margin-top:var(--sp-1); }

.wp-memo { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.wp-memo-tile { display:flex; flex-direction:column; gap:var(--sp-1); text-align:center; align-items:center; padding:var(--sp-5) var(--sp-4); }
.wp-memo-ic { font-size:1.6rem; }
.wp-memo-k { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-3); }
.wp-memo-v { font-family:var(--font-head); font-size:1.1rem; color:var(--c-text); }

.wp-address { font-family:var(--font-head); font-size:1.25rem; font-weight:700; margin:var(--sp-2) 0 var(--sp-3); }
.wp-list { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-5); }
.wp-line { display:flex; gap:var(--sp-3); align-items:flex-start; }
.wp-line-ic { font-size:1.15rem; line-height:1.4; flex:0 0 auto; }

.wp-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin:var(--sp-4) 0; }
.wp-col { background:var(--c-surface-alt); border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--sp-4); }
.wp-col strong { display:block; margin-bottom:var(--sp-2); }
.wp-callout { background:var(--c-accent-soft); border-left:3px solid var(--c-accent); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0; }

.wp-timeline { list-style:none; margin:var(--sp-4) 0; padding:0 0 0 var(--sp-5); border-left:2px solid var(--c-border-strong); }
.wp-tl-item { position:relative; padding:0 0 var(--sp-5) var(--sp-4); }
.wp-tl-item:last-child { padding-bottom:0; }
.wp-tl-dot { position:absolute; left:calc(-1 * var(--sp-5) - 6px); top:6px; width:10px; height:10px; border-radius:var(--r-full);
  background:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-soft); }

.wp-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
.wp-check { display:flex; gap:var(--sp-3); align-items:flex-start; background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out); }
.wp-check:hover { border-color:var(--c-border-strong); }
.wp-check input { margin-top:3px; width:18px; height:18px; accent-color:var(--c-primary); flex:0 0 auto; }
.wp-check:focus-within { box-shadow:var(--focus-ring); }
.wp-check-body { display:flex; flex-direction:column; gap:2px; }
.wp-check input:checked ~ .wp-check-body strong { text-decoration:line-through; color:var(--c-text-3); }

.wp-faces { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
.wp-face { display:flex; gap:var(--sp-3); align-items:flex-start; }
.wp-face-ic { font-size:1.3rem; flex:0 0 auto; }

.wp-reassure { background:var(--c-success-bg); border-color:#CBE7D3; }
.wp-faq { display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-3); }
.wp-faq-item { border-left:3px solid var(--c-border-strong); padding-left:var(--sp-4); }
.wp-outro p { max-width:60ch; margin:0 auto var(--sp-4); }

.wp-banner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:linear-gradient(120deg,#FFF1E7,#FAF9F7); border-color:var(--c-primary-soft); }
.step-link { display:inline-block; margin-top:var(--sp-3); }

@media (max-width:1023px) { .wp-memo { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px) {
  .wp-hero { flex-direction:column; align-items:flex-start; }
  .wp-hero h2 { font-size:1.5rem; }
  .wp-countdown { width:100%; }
  .wp-memo, .wp-cols, .wp-check-grid, .wp-faces { grid-template-columns:1fr; }
  .wp-banner { flex-direction:column; align-items:flex-start; }
}


/* --- V8-3 : etape de parcours PLEIN ECRAN (reutilise .proc-page*) --- */
.proc-page-bar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.step-pos { margin-left:auto; }
/* La colonne de lecture s'applique aussi aux blocs propres a l'etape. */
.step-page .proc-page-body > :is(.step-cta, .task-docs, .step-page-nav, .step-later, .step-link) { max-width:90ch; }
.step-later { font-style:italic; margin-top:var(--sp-3); }

/* Le CTA est le SEUL btn-primary de la page : une page, une action. */
.step-cta {
  margin:var(--sp-6) 0; padding:var(--sp-5);
  background:var(--c-accent-soft); border:1px solid var(--c-accent);
  display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start;
}
.step-cta .btn { min-height:44px; }
.step-cta-done { background:var(--c-success-bg); border-color:var(--c-success); }
.step-cta-next { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin:0; }

/* Documentation associee : cartes pleines, pas une note de bas de page. */
.task-docs-lg { padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.task-docs-lg .proc-assoc-item {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  min-height:64px; padding:var(--sp-3) var(--sp-4); margin:0; font-weight:400;
}
.task-docs-lg .proc-assoc-item:hover { background:var(--c-accent-soft); border-color:var(--c-border-strong); }
.proc-assoc-title { flex:1 1 auto; min-width:0; font-size:1rem; font-weight:600; }
.proc-assoc-meta { flex:0 0 auto; }

.step-page-nav { display:flex; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-8); padding-top:var(--sp-4); border-top:1px solid var(--c-border); }
.step-page-nav .btn { min-height:44px; }

@media (max-width:768px) {
  .step-badges { flex-wrap:wrap; }
  .step-go { display:none; }        /* sur tactile, le tap EST le signal */
  .step-cta { padding:var(--sp-4); align-items:stretch; }
  .step-cta .btn { width:100%; }
  .step-page-nav { flex-direction:column; }
  .step-page-nav .btn { width:100%; }
  .step-pos { margin-left:0; }
}
@media (max-width:420px) {
  .step-open { flex-wrap:wrap; }
  .step-main { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .step:hover .step-open { transform:none; }
}

/* ---- Welcome Pack : accès depuis le parcours + édition Back Office (V9-2) ---- */
.wp-back { margin-bottom:var(--sp-4); }
.wp-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); background:var(--c-info-bg); border-color:#D5D5F0; }
.wp-ed-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.wp-ed-actions { display:flex; gap:var(--sp-2); flex:0 0 auto; }
.wp-ed-form h4 { font-family:var(--font-head); font-size:1.05rem; margin-bottom:var(--sp-3); }
.wp-ed-form label { display:block; margin-bottom:var(--sp-3); font-size:.9rem; font-weight:500; }
.wp-ed-form input, .wp-ed-form textarea { width:100%; margin-top:var(--sp-1); padding:var(--sp-2) var(--sp-3);
  font-family:var(--font-body); font-size:.92rem; color:var(--c-text); background:var(--c-surface);
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm); }
.wp-ed-form input:focus, .wp-ed-form textarea:focus { outline:none; border-color:var(--c-primary); box-shadow:var(--focus-ring); }
.wp-ed-form textarea { resize:vertical; line-height:1.5; }
.wp-ed-row { display:grid; grid-template-columns:80px 1fr 1fr 1fr; gap:var(--sp-3); align-items:start;
  padding:var(--sp-3) 0; border-top:1px solid var(--c-border); }
.wp-ed-row:first-of-type { border-top:none; }
.wp-ed-row label { margin-bottom:0; }
.wp-ed-wide { grid-column:span 2; }
.wp-ed-save { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.wp-ed-save p { margin:0; }
@media (max-width:900px) {
  .wp-ed-row { grid-template-columns:1fr; }
  .wp-ed-wide { grid-column:auto; }
  .wp-ed-head, .wp-ed-save, .wp-preview-bar { flex-direction:column; align-items:flex-start; }
}

/* ==================================================================
   V11 — « Vraies formations » (spec docs/20-v11-formations-spec-ux.md §7.4)
   AUCUN nouveau token : la palette terracotta couvre tous les états requis.
   Les 7 blocs prévus par la spec (.fmt-grid, .fmt-card, .fmt-card-cta,
   .mod-list, .mod-row, .mod-row.is-current, .mod-quiz) + leurs éléments
   internes. Aucun composant nouveau : .card/.btn/.progress/.meta-chip/
   .kb-soft/.step-go/.step-page-nav/.step-later sont réutilisés tels quels.
   ================================================================== */

/* ---- Catalogue ---- */
.fmt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.fmt-card { display:flex; flex-direction:column; gap:var(--sp-3); position:relative; }
.fmt-card-link { display:block; color:inherit; text-decoration:none; }
.fmt-card-link[aria-disabled="true"] { cursor:default; }
.fmt-title { margin:var(--sp-1) 0 var(--sp-2); font-size:1.125rem; overflow-wrap:anywhere; }
.fmt-card-link:hover .fmt-title { color:var(--c-primary); }
/* 2 lignes max, sans jamais pousser la carte en largeur */
.fmt-desc { margin:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.fmt-prog { margin:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.fmt-prog p { margin:0; }
/* CTA collé en pied de carte : les cartes d'une même rangée alignent leur bouton */
.fmt-card-cta { margin-top:auto; padding-top:var(--sp-2); }
.fmt-card-cta .btn { width:100%; min-height:44px; justify-content:center; }
.fmt-card-cta p { margin:0; }
/* ---- Logo d'éditeur porté par la formation ---- */
/* Rangée d'en-tête : le logo et le chip d'état PARTAGENT la ligne, ils ne s'empilent
   pas. Empilés, un bloc vert saturé et un chip terracotta se touchent ; aux deux
   extrémités d'une même rangée, ils se lisent comme deux registres distincts
   (identité de l'éditeur / état de la progression).
   Sans logo, la rangée ne contient que le chip : `space-between` le laisse à gauche et
   la rangée se replie sur sa hauteur — la carte est AU PIXEL celle d'avant ce lot.
   L'appelant n'émet même pas ce <div> quand il serait vide, sinon chaque carte
   sans logo paierait un `gap` de 12px pour rien. */
.fmt-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.fmt-card-head .fmt-chip { align-self:center; flex:0 0 auto; }
/* Hauteur FIXE, largeur DÉRIVÉE : un seul réglage couvre tous les ratios, présents et
   futurs, sans jamais recadrer ni étirer le logo d'un éditeur. Jamais `width:100%` :
   un 300×200 en pleine largeur peindrait une bannière de 200px de haut à la première
   frame avant de se réduire — le pire décalage de mise en page possible.
   `flex:0 1 auto; min-width:0` : un futur logo très large se réduit dans sa boîte
   plutôt que d'écraser le chip d'état.
   Ni fond, ni padding, ni bordure : le PNG de HubRise porte DÉJÀ sa marge interne, en
   ajouter dessinerait un double cadre. Ni `filter`, ni `opacity`, ni `grayscale` :
   altérer le logo d'un éditeur est généralement interdit par sa charte, et un
   wordmark blanc sur vert désaturé devient illisible. La dissonance avec le
   terracotta se règle par l'AIRE (40px de haut = une vignette de marque), pas par la
   couleur. La bordure reste disponible en opt-in pour un futur logo clair sur fond
   transparent — jamais par défaut, elle ferait un liseré gris sur un bloc opaque. */
.fmt-logo {
  display:block; flex:0 1 auto; min-width:0;
  height:var(--sp-10); width:auto; max-width:180px;
  object-fit:contain; object-position:left center;
  border-radius:var(--r-sm); border:0; background:none; padding:0;
}
.fmt-logo.is-framed { border:1px solid var(--c-border); }
/* Page programme : `.proc-page-body` est en flux normal, la marge basse vit donc sur
   l'image ELLE-MÊME — une image absente ne laisse aucun espace derrière elle.
   48px : un cran au-dessus de la carte, un cran en dessous du h1. Le logo introduit,
   il ne domine pas. */
.proc-page-body > .fmt-logo { height:var(--sp-12); max-width:220px; margin:0 0 var(--sp-3); }

/* État : JAMAIS la couleur seule — le chip porte icône + texte (§8.2) */
.fmt-chip { align-self:flex-start; }
.fmt-chip-done { background:var(--c-success-bg); color:var(--c-success); border-color:var(--c-success); }
.fmt-chip-current { background:var(--c-primary-soft); color:var(--c-primary); border-color:var(--c-primary); }
.fmt-chip-empty { background:var(--c-surface-alt); color:var(--c-text-3); }
.fmt-done { border-color:var(--c-success); }
.fmt-empty { background:var(--c-surface-alt); }
.fmt-inline { margin-top:var(--sp-3); }
.fmt-cta { margin:var(--sp-4) 0; }
.fmt-cta .btn { min-height:44px; }
.fmt-done-banner { margin:var(--sp-3) 0; }

/* ---- Programme : liste de modules ---- */
/* La numérotation vient du RENDU (.mod-num), jamais du marqueur ni du texte —
   elle se renumérote seule si l'ordre change et ne peut pas se dupliquer (leçon V10.1). */
.mod-list { list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.mod-row { border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-surface); border-left:3px solid transparent; transition:border-color var(--dur-fast); }
.mod-row:hover { border-color:var(--c-accent); }
.mod-link { display:flex; align-items:center; gap:var(--sp-3); min-height:56px; padding:var(--sp-3) var(--sp-4); width:100%; text-align:left; color:inherit; text-decoration:none; background:none; border:0; font:inherit; cursor:pointer; }
.mod-num { flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-full); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; background:var(--c-surface-alt); color:var(--c-text-2); }
.mod-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mod-title { font-weight:600; overflow-wrap:anywhere; }
.mod-excerpt { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-badges { flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-2); }
/* Module terminé */
.mod-done { background:var(--c-success-bg); border-color:var(--c-success); }
.mod-done .mod-num { background:var(--c-success); color:#fff; }
.mod-state-done { background:var(--c-success-bg); color:var(--c-success); border-color:var(--c-success); }
/* Module courant : fond + liseré + texte = TROIS signaux, jamais la couleur seule */
.mod-row.is-current { background:var(--c-primary-soft); border-left-color:var(--c-primary); }
.mod-row.is-current .mod-num { background:var(--c-primary); color:#fff; }
.mod-state-current { background:var(--c-surface); color:var(--c-primary); border-color:var(--c-primary); }
/* Évaluation : détachée de la numérotation des modules (ce n'est pas un module) */
.mod-quiz { margin-top:var(--sp-4); border:1px dashed var(--c-accent); border-radius:var(--r-md); background:var(--c-accent-soft); }
.mod-quiz-link { min-height:56px; }
.mod-quiz .mod-num { background:var(--c-surface); }

/* ---- Back Office : modules ordonnables + garde-fou d'édition ---- */
.doclink-num { flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-full); background:var(--c-primary-soft); color:var(--c-primary); font-size:.75rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.doclink-move { flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--c-border); background:var(--c-surface-alt); color:var(--c-text-2); font-size:.7rem; line-height:1; cursor:pointer; }
.doclink-move:hover:not([disabled]) { background:var(--c-surface); border-color:var(--c-accent); color:var(--c-primary); }
.doclink-move[disabled] { opacity:.35; cursor:default; }
.doclink-warn { border:1px solid var(--c-accent); background:var(--c-accent-soft); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0; line-height:1.45; }

/* ---- Responsive (§8.1) ---- */
/* Seul l'en-tête de page redescend. Le logo de la CARTE reste à 40px : c'est le
   plancher de lisibilité d'un wordmark enfermé dans un PNG à marge interne, et la
   rangée tient largement (logo borné à 180px + chip d'état) dès 320px de carte. */
@media (max-width:768px) {
  .proc-page-body > .fmt-logo { height:var(--sp-10); max-width:180px; }
}
@media (max-width:640px) {
  .fmt-grid { grid-template-columns:1fr; }
  /* Ligne de module sur 2 lignes ; le chevron disparaît, la ligne reste cliquable */
  .mod-link { flex-wrap:wrap; padding:var(--sp-3); gap:var(--sp-2); }
  .mod-main { flex:1 1 100%; order:2; }
  .mod-num { order:1; }
  .mod-badges { order:3; flex:1 1 100%; flex-wrap:wrap; }
  .mod-badges .step-go { display:none; }
  .mod-excerpt { white-space:normal; }
}

/* ============================================================
   FB-1 — Fiche collaborateur : dossier, contrat, voiture
   ============================================================ */

/* Date d'entrée non confirmée. Jamais la couleur SEULE : le mot « provisoire » porte
   l'information, la teinte ne fait que la renforcer (WCAG 1.4.1). */
.badge-provisoire {
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:2px 8px; border-radius:var(--r-full);
  background:var(--c-warning-bg); color:var(--c-warning);
  border:1px solid rgba(180, 83, 9, .3);   /* var(--c-warning) à 30 % — pas de color-mix : aucune autre règle du fichier n'en dépend */
  vertical-align:middle; white-space:nowrap;
}

/* Blocs du formulaire (Dossier / Contrat / Avantages) — le <fieldset>+<legend> donne
   aussi le groupement aux lecteurs d'écran, pas seulement la séparation visuelle. */
.form-block {
  border:1px solid var(--c-border); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4);
}
.form-block > legend {
  font-weight:700; font-size:.9rem; padding:0 var(--sp-2); color:var(--c-text-2);
}
.form-block > label:first-of-type { margin-top:0; }

/* Choix du type de contrat : cible tactile ≥44px (WCAG 2.5.5) et libellé cliquable entier. */
.radio-grid { display:grid; gap:var(--sp-1); }
.radio-grid .ck-line {
  align-items:flex-start; min-height:44px; padding:var(--sp-2);
  border:1px solid transparent; border-radius:var(--r-sm);
}
.radio-grid .ck-line:hover { background:var(--c-surface-alt); }
.radio-grid .ck-line:focus-within { border-color:var(--c-primary); background:var(--c-surface-alt); }
.radio-grid .ck-line input { margin-top:3px; }

/* Métadonnées de dossier sur la carte collaborateur. */
.hire-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.hire-chip {
  display:inline-flex; align-items:center; gap:4px; font-size:.75rem;
  padding:2px 8px; border-radius:var(--r-full);
  background:var(--c-surface-alt); color:var(--c-text-2); white-space:nowrap;
}
/* Contrat manquant (dossier antérieur à FB-1) : signalé par le TEXTE « à renseigner »,
   la couleur n'est qu'un renfort. */
.hire-chip-missing { background:var(--c-warning-bg); color:var(--c-warning); font-weight:600; }

/* ============================================================
   FB-5 — Retours in-app (bouton flottant, modale, tri)
   ============================================================ */

/* Le coin bas-droite appartient désormais au bouton flottant : les toasts remontent
   au-dessus de lui plutôt que de se superposer. 56px = hauteur du bouton + gouttière. */
#toast-zone { bottom:calc(var(--sp-6) + 56px); }

/* Bouton flottant — présent sur TOUS les écrans des deux espaces.
   z-index 500 : au-dessus du contenu et de la topbar (100), SOUS la sidebar mobile ouverte
   (600) et sous le voile de modale (800) — il ne peut donc jamais être cliqué par-dessus
   une boîte de dialogue ni par-dessus le menu. Il est le dernier élément du DOM, donc le
   dernier de l'ordre de tabulation : il ne piège aucun focus et n'en vole aucun. */
.fb-fab {
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:500;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px; padding:10px 18px; border-radius:var(--r-full);
  background:var(--c-primary); color:#fff; font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow-3); transition:background var(--dur-fast), transform var(--dur-fast);
}
.fb-fab:hover { background:var(--c-primary-hover); transform:translateY(-1px); }
.fb-fab-ic { font-size:1.05rem; }

/* ≤ 600 px : le bouton se réduit à sa pastille. Motif : à 360 px, un bouton de 210 px
   barrerait le bas de l'écran et pourrait masquer la dernière action d'une liste.
   L'intitulé reste accessible par `title` et par le nom accessible du bouton. */
@media (max-width:600px) {
  .fb-fab { padding:0; width:52px; height:52px; justify-content:center; right:var(--sp-4); bottom:var(--sp-4); }
  .fb-fab-tx { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #toast-zone { right:var(--sp-4); bottom:calc(var(--sp-4) + 60px); left:var(--sp-4); }
}

/* Pastille « n nouveaux » sur l'entrée de menu. */
.nav-badge {
  margin-left:auto; min-width:22px; padding:1px 7px; border-radius:var(--r-full);
  background:var(--c-primary); color:#fff; font-size:.75rem; font-weight:700; text-align:center;
}

/* Modale courte (2 champs) : plus étroite que la modale générique de 560px. */
.modal-sm { max-width:460px; }
.fb-types { margin-top:var(--sp-2); }

/* ---- Cartes de retour ---- */
.fb-card { border-left:3px solid var(--c-border-strong); }
.fb-card.fb-st-valide { border-left-color:var(--c-success); }
.fb-card.fb-st-rejete { border-left-color:var(--c-text-3); }
.fb-card.fb-st-traite { border-left-color:var(--c-info); }
.fb-card.fb-st-nouveau { border-left-color:var(--c-primary); }
.fb-card-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.fb-meta { flex:1 1 100%; }
.fb-chip {
  display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:600;
  padding:2px 8px; border-radius:var(--r-full); background:var(--c-surface-alt); color:var(--c-text-2);
}
/* Le statut est porté par le MOT, la couleur n'est qu'un renfort (WCAG 1.4.1). */
.fb-badge { font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:var(--r-full); }
.fb-badge-nouveau { background:var(--c-primary-soft); color:var(--c-primary); }
.fb-badge-valide  { background:var(--c-success-bg);   color:var(--c-success); }
.fb-badge-rejete  { background:var(--c-surface-alt);  color:var(--c-text-2); }
.fb-badge-traite  { background:var(--c-info-bg);      color:var(--c-info); }
.fb-msg { white-space:pre-wrap; margin:0 0 var(--sp-2); }

/* ---- FB-11 · ce que le Back Office adresse à l'AUTEUR ----
   UN SEUL composant pour une réponse ordinaire (terracotta) comme pour le motif d'un
   rejet (neutre). Deux boîtes différentes pour le même métier apprendraient deux endroits
   où regarder. `.fb-motif` est REMPLACÉE, pas doublée — doctrine V8, on ne crée pas une
   variante d'affichage de plus. Le gris de la variante « rejet » est exactement celui de
   l'ancienne `.fb-motif` : rien ne change pour l'œil de qui a déjà vu un rejet. */
.fb-reply {
  margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:var(--c-primary-soft); border-radius:var(--r-md);
  border-left:3px solid var(--c-primary);
}
.fb-reply + .fb-reply { margin-top:var(--sp-2); }
.fb-reply-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-1); }
/* Pas de capitales : elles ralentissent la lecture et certains lecteurs d'écran les
   épellent. Le poids et la couleur suffisent à distinguer l'étiquette du texte. */
.fb-reply-tag { font-size:.75rem; font-weight:700; color:var(--c-primary); }
.fb-reply-msg { white-space:pre-wrap; margin:0; color:var(--c-text); }
.fb-reply-by  { margin:var(--sp-2) 0 0; }
/* Un refus ne porte pas la couleur de marque. La distinction vit dans la variante. */
.fb-reply-rejet { background:var(--c-surface-alt); border-left-color:var(--c-border-strong); }
.fb-reply-rejet .fb-reply-tag { color:var(--c-text-2); }

.fb-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }

/* ---- FB-11 · côté Back Office : répondre (public) vs annoter (interne) ----
   La zone publique porte l'aplat EXACT du bloc que l'auteur verra : le champ ressemble à
   son résultat. C'est ce qui empêche de se tromper de case, bien avant les étiquettes. */
.fb-answer {
  display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-2);
  margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--c-primary-soft); border-left:3px solid var(--c-primary);
}
.fb-answer textarea { background:var(--c-surface); }
.fb-answer button   { align-self:flex-start; }
.fb-lbl { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:.85rem; font-weight:600; }
.fb-lbl-pub { color:var(--c-primary); }
.fb-flag { font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:var(--r-full); }
.fb-flag-pub { background:var(--c-primary); color:#fff; }
.fb-flag-int { background:var(--c-surface); color:var(--c-text-2); border:1px solid var(--c-border-strong); }

/* Bordure tiretée = brouillon interne, par opposition au bloc plein de l'envoi.
   ⚠️ `.fb-note` est désormais un <details>, plus un <form> : l'ancienne règle
   flex-direction ne s'applique plus, elle est remplacée. */
.fb-note { margin-top:var(--sp-3); border:1px dashed var(--c-border-strong);
  border-radius:var(--r-md); background:var(--c-surface-alt); }
.fb-note > summary {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); cursor:pointer;
  padding:var(--sp-2) var(--sp-3); font-size:.85rem; font-weight:600; color:var(--c-text-2);
  list-style:none; min-height:44px;
}
.fb-note > summary::-webkit-details-marker { display:none; }
.fb-note-body { display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-2);
  padding:0 var(--sp-3) var(--sp-3); }
.fb-note-body button { align-self:flex-start; }
.fb-note-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.fb-note-list li { background:var(--c-surface); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); }
.fb-note-txt { white-space:pre-wrap; margin:0 0 var(--sp-1); font-size:.9rem; }
/* Un champ désactivé doit SE VOIR désactivé : ici il signifie « on ne sait pas encore ce
   qui est écrit », et c'est une information, pas une panne. */
.fb-note-body textarea[disabled] { opacity:.6; cursor:not-allowed; }

/* FB-11 phase 2 — « vous avez une réponse ». Une ligne, jamais une modale : une réponse
   est une nouvelle, pas une urgence, et elle ne doit pas interrompre ce qu'on faisait. */
.fb-inbox {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--c-primary-soft); border-left:3px solid var(--c-primary);
  color:var(--c-text); padding:var(--sp-3) var(--sp-4); text-decoration:none;
}
/* ⚠️ SEULE valeur hors tokens de tout le lot : il n'existe pas de « primary-soft-hover »
   dans :root, et un `filter:brightness()` sur un aplat crème vire au gris sale. À promouvoir
   en token le jour où un 2e survol sur fond crème apparaît. */
.fb-inbox:hover { background:#FFE8DA; }
.fb-reply-new { font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:var(--r-full);
  background:var(--c-primary); color:#fff; }

@media (max-width:600px) { .fb-reply { padding:var(--sp-2) var(--sp-3); } }

/* ---- Compteurs et filtres du tri ---- */
.fb-counts { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0; }
.fb-count { font-size:.8rem; font-weight:600; padding:4px 10px; border-radius:var(--r-full); }
.filters-row { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-3); }
.filters-row label { display:flex; flex-direction:column; gap:var(--sp-1); font-size:.85rem; font-weight:500; min-width:160px; }

/* ── FB-7 — Changer l'identifiant de connexion ─────────────────────────────
   Aucune couleur nouvelle : tout vient des tokens. Le geste n'est PAS destructif,
   donc jamais de rouge — le rouge reste réservé à Supprimer / Désactiver.        */
.modal-authswitch { max-width:560px; }
.switch-diff { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin:var(--sp-4) 0; padding:var(--sp-3); background:var(--c-surface-alt);
  border:1px solid var(--c-border); border-radius:var(--r-md); }
.switch-diff > div { margin:0; }
.switch-diff dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-text-2); margin:0 0 2px; }
.switch-diff dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem; overflow-wrap:anywhere; }
/* L'ancienne adresse en --c-text-2 (7,63:1) et non --c-text-3 (4,87:1, limite) :
   c'est une donnée que l'admin recopie à la main. Pas de texte barré — illisible
   à cette taille, et muet pour un lecteur d'écran. Les mots font le travail.     */
.switch-old { color:var(--c-text-2); }
.switch-new { color:var(--c-text); font-weight:600; }
.switch-arrow { color:var(--c-text-3); font-size:1.25rem; }
.callout { padding:var(--sp-3); border-radius:var(--r-md); border:1px solid transparent; }
.callout p { margin:0 0 var(--sp-2); }
.callout ul { margin:0; padding-left:1.15rem; }
.callout li + li { margin-top:4px; }
/* #B45309 sur #FEF8EC = 4,75:1 — AA texte normal. */
.callout-warning { background:var(--c-warning-bg); border-color:var(--c-warning); color:var(--c-warning); }
.switch-copy { margin:var(--sp-4) 0; }
.switch-msg { width:100%; max-height:180px; font-size:.875rem; white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:var(--sp-2);
  border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface-alt);
  color:var(--c-text); resize:vertical; }
.switch-copy-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.ck-gate { min-height:44px; align-items:center; }
/* `.is-locked` n'est JAMAIS posé sur un texte porteur d'information : seulement sur
   le bouton, dont le libellé reste doublé par le message role="alert".            */
.is-locked { opacity:.55; cursor:not-allowed; }
.form-error { color:var(--c-warning); font-size:.875rem; font-weight:500; margin:var(--sp-2) 0 0; }
.notice-authswitch { border-left:4px solid var(--c-warning); background:var(--c-warning-bg); }
.notice-authswitch p { margin:0; }
@media (max-width:767px) {
  .switch-diff { flex-direction:column; align-items:stretch; }
  .switch-arrow::before { content:"↓"; }
  .switch-arrow { font-size:0; text-align:center; }
  .switch-arrow::before { font-size:1.25rem; }
}
@media (max-width:420px) {
  .modal-authswitch { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
  .modal-authswitch .modal-actions { flex-direction:column; align-items:stretch; }
  .switch-copy-actions .btn { width:100%; }
}

/* ===== FB-8 §23/§24 — Dossier d'entrée administratif (vue admin) ===== */
/* Aucun token neuf : la palette terracotta et l'échelle d'espacement du design system
   suffisent. Les couleurs de statut réutilisent les rôles sémantiques déjà définis
   (--c-success / --c-warning / --c-danger), jamais une valeur littérale.            */
.adminfile-head { display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; }
.adminfile-head > div { flex:1 1 260px; min-width:0; }
.adminfile-head h2 { font-size:1.5rem; }
.adminfile-regen { align-self:center; }
/* Les deux indicateurs sont VOLONTAIREMENT côte à côte, de même taille, avec chacun
   son titre et son dénominateur : l'égalité visuelle dit qu'aucun ne résume l'autre. */
.adminfile-kpis { align-items:stretch; }
.adminfile-kpi { display:flex; flex-direction:column; }
.adminfile-pct { font-family:var(--font-head); font-size:2rem; font-weight:700; margin:var(--sp-2) 0 0; color:var(--c-primary); }
.adminfile-sep { margin:calc(-1 * var(--sp-2)) 0 0; }
.adminfile-section h3 { margin-bottom:var(--sp-3); }
.adminfile-list { display:flex; flex-direction:column; gap:var(--sp-2); }
.adminfile-row {
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  padding:10px 12px; background:var(--c-surface-alt); border:1px solid transparent;
  border-radius:var(--r-sm); transition:border-color var(--dur-fast) var(--ease-out);
}
.adminfile-row:hover { border-color:var(--c-border-strong); }
.adminfile-ic { font-size:1.1rem; width:1.5rem; text-align:center; flex:0 0 auto; color:var(--c-text-2); }
.adminfile-row.st-VALIDATED .adminfile-ic { color:var(--c-success); }
.adminfile-row.st-REJECTED  .adminfile-ic { color:var(--c-danger); }
.adminfile-row.st-TO_REVIEW .adminfile-ic,
.adminfile-row.st-SUBMITTED .adminfile-ic { color:var(--c-warning); }
.adminfile-row.st-NOT_APPLICABLE { opacity:.6; }
.adminfile-row-main { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.adminfile-row-title { font-weight:600; }
.adminfile-row-side { display:flex; align-items:center; gap:var(--sp-2); flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.adminfile-late { color:var(--c-danger); font-weight:600; }
.adminfile-detail h3 { margin:var(--sp-5) 0 var(--sp-2); font-size:1rem; padding-bottom:var(--sp-1); border-bottom:1px solid var(--c-border); }
.adminfile-detail h3:first-child { margin-top:var(--sp-2); }
.adminfile-hist { list-style:none; display:flex; flex-direction:column; gap:var(--sp-1); }
.adminfile-masked { letter-spacing:.15em; color:var(--c-text-3); }
.adminfile-clear { font-weight:700; }
.adminfile-note { background:var(--c-surface-alt); }
@media (max-width:767px) {
  .adminfile-row { flex-wrap:wrap; }
  .adminfile-row-side { width:100%; justify-content:flex-start; padding-left:calc(1.5rem + var(--sp-3)); }
  .adminfile-regen { width:100%; }
}

/* FB-9 phase 3 — rattachement compte -> employé Odoo (page Utilisateurs)
   ⚠️ `min-width` et non seulement `max-width` : dans une table à 8 colonnes, le select
   se faisait comprimer et affichait « Loïc De Don… ». Un nom tronqué dans un sélecteur
   d'identité est exactement ce qu'il ne faut pas — on choisit une PERSONNE. */
.emp-select { min-width:12rem; max-width:16rem; width:100%; font-size:.85rem; }
.emp-sugg { display:block; margin-top:2px; }

/* ⚠️ `hidden` NE MASQUE RIEN face à une classe qui pose `display`. L'attribut ne vaut que
   par la feuille de style du navigateur (`[hidden]{display:none}`) ; `.btn{display:inline-flex}`
   est plus spécifique et gagne. Le dépôt portait déjà TROIS rustines locales du même bug
   (`.cfg-search .btn[hidden]`, `.scope-services[hidden]`, `.scope-warn[hidden]`) — et j'en ai
   écrit une quatrième sans le voir. La règle vit désormais ICI, une fois, pour tout le monde :
   un bouton marqué `hidden` est masqué, quelle que soit sa classe. Les rustines locales
   deviennent redondantes ; elles sont inoffensives et restent en place. */
[hidden] { display:none !important; }

/* FB-9 — recherche d'employé Odoo au-dessus du tableau des utilisateurs */
.emp-search { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.emp-search input[type="search"] { flex:1 1 22rem; min-width:0; }

/* ==================================================================
   FB-12 — Ruban « Vos 5 premiers jours » (J0 → J+4)
   ------------------------------------------------------------------
   Aucun token nouveau : tout vient de `:root`. Six classes, pas une de plus.
   ⭐ HAUTEUR DE CARTE FIXE (`min-height`) : une hauteur proportionnelle à la
   charge du jour recréerait exactement le trou visuel qu'on cherche à éviter
   sur une journée légère — J0 porte 7 étapes, J+4 en porte 1.
   ⛔ Pas de `overflow-x:auto` sur mobile : un carrousel cache du contenu, offre
   une cible tactile fuyante et perd l'ordre de lecture. On empile.
   ⚠️ Le week-end et le jour vide sont signalés PAR UN MOT (« Week-end »,
   « Aucune étape planifiée »), jamais par la seule teinte : la couleur seule
   n'est pas une information accessible.
   ================================================================== */
.week-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3); }
.week-head h3 { margin:0; }
.week-range { margin:0; }
.week-note { margin:var(--sp-2) 0 var(--sp-4); }

.week-strip { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); }
.week-day { min-width:0; }
.week-day-in {
  display:flex; flex-direction:column; gap:var(--sp-2); height:100%; min-height:168px;
  padding:var(--sp-3); border:1px solid var(--c-border); border-radius:var(--r-lg);
  background:var(--c-surface); color:inherit; text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
a.week-day-in:hover { border-color:var(--c-border-strong); box-shadow:var(--shadow-1); }
a.week-day-in:focus-visible { outline:none; box-shadow:var(--focus-ring); }

.week-day-top { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); }
.week-day-date { font-family:var(--font-head); font-weight:700; text-transform:capitalize; }
.week-day-off { color:var(--c-text-3); font-size:.85rem; font-weight:600; }
.week-day-flag { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-primary); }
.week-day-flag--we { color:var(--c-warning); }
.week-day-sub { color:var(--c-text-2); font-size:.9rem; }
.week-day-load { font-size:.92rem; font-weight:600; color:var(--c-text); }
.week-day-load--empty { font-weight:500; color:var(--c-text-2); }
.week-day .meta-chip { align-self:flex-start; }
.week-day-go { margin-top:auto; align-self:flex-end; color:var(--c-text-3); font-size:1.2rem; line-height:1; }

.week-day--today .week-day-in { border-color:var(--c-primary); background:var(--c-primary-soft); }
.week-day--weekend .week-day-in { background:var(--c-surface-alt); }
.week-day--today.week-day--weekend .week-day-in { background:var(--c-primary-soft); }
.week-day--empty .week-day-in { border-style:dashed; }

.week-day-warn, .week-foot-warn {
  background:var(--c-warning-bg); color:var(--c-warning); font-weight:600; font-size:.8rem;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm);
}
.week-foot-warn { display:block; margin:var(--sp-4) 0 0; font-size:.85rem; }
/* Même repère partout où une échéance s'affiche (carte « À faire maintenant »,
   page d'étape) : le ruban ne peut pas être le seul écran à dire la vérité. */
.chip-weekend { background:var(--c-warning-bg); color:var(--c-warning); font-weight:600; }

@media (max-width:1023px) { .week-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px)  { .week-strip { grid-template-columns:1fr; } .week-day-in { min-height:0; } }