/* ============================================================
   TECHLIA COCKPIT ENGINE — DESIGN SYSTEM
   Couleurs officielles Techlia : navy #0D1F3C + vert #00C896
   Système visuel premium « Command Center » (DESIGN P1) — voir
   docs/DESIGN-SYSTEM-TECHLIA.md pour la spécification complète.
   Les tokens historiques (--navy, --white, --line, --ink, --slate,
   --bg, --mint, --green…) gardent EXACTEMENT leur valeur d'origine :
   les 27 modules métier qui les utilisent restent visuellement
   inchangés dans cette phase (P1 = shell + Accueils uniquement,
   voir docs/DESIGN-SYSTEM-TECHLIA.md, § Périmètre).
   ============================================================ */
:root {
  --navy: #0D1F3C;
  --navy-light: #17335C;
  --green: #00C896;
  --green-dark: #049270;
  --white: #FFFFFF;
  --ink: #1A2333;
  --slate: #5B6B82;
  --line: #E4E9F1;
  --mint: #E6FBF4;
  --bg: #F5F7FA;
  --amber: #F5A524;
  --red: #E5484D;
  --violet: #7B5CFA;
  --violet-light: #EFE9FF;
  /* Teinte rapprochée du cyan « activité/navigation » du nouveau
     système (badge Automatisé) — seul usage dans tout le fichier
     (wf-badge-automatise), changement sans risque de régression. */
  --blue: #0E93A8;
  --blue-light: rgba(14,147,168,.14);

  /* ---- Système premium « Command Center » (shell + Accueils) ---- */
  --command-bg: #060A14;
  --surface-1: #0C1526;
  --surface-2: #101B31;
  --surface-3: #16223C;
  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text-primary: #EDF2FC;
  --text-secondary: #9FB0CC;
  --text-tertiary: #6B7B9B;
  --accent-cyan: #29D3F0;
  --accent-cyan-dim: rgba(41,211,240,.14);
  --accent-violet: #8C7CFF;
  --accent-violet-dim: rgba(140,124,255,.16);
  --accent-green: #21E3A0;
  --accent-green-dim: rgba(33,227,160,.14);
  --accent-orange: #F5A524;
  --accent-orange-dim: rgba(245,165,36,.16);
  --accent-red: #FF5A67;
  --accent-red-dim: rgba(255,90,103,.14);
  --accent-grayblue: #7C8CAA;
  --accent-grayblue-dim: rgba(124,140,170,.16);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.30);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,.45);
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* DESIGN P4 — correctif : héritait de var(--ink), un texte très
     sombre pensé pour un fond clair, devenu quasi invisible depuis que
     le fond de page est sombre (DESIGN P1). Tout texte sans couleur
     explicite (rare, mais réel dans certains modules) retombait sur
     cette valeur. */
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Ambiance « cockpit » du shell (ÉTAPE 5) : halos radiaux discrets +
     grille technique très subtile, en CSS pur (aucune image externe).
     Visible uniquement derrière .main-area (topbar/rail restent des
     surfaces opaques au-dessus) et derrière les deux Accueils. */
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(41,211,240,.09), transparent 60%),
    radial-gradient(900px 520px at 102% 0%, rgba(140,124,255,.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 64px),
    var(--command-bg);
  background-attachment: fixed;
}
h1, h2, h3, .display { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; }

/* ---------- ÉCRAN DE CONNEXION (animation reprise du hero du site) ---------- */
#connect-screen {
  position: fixed; inset: 0; background: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  z-index: 999; transition: opacity .5s ease;
}
#connect-screen.hidden { opacity: 0; pointer-events: none; }
.connect-wordmark { font-weight: 700; font-size: 30px; color: var(--white); margin-bottom: 36px; letter-spacing: -.01em; }
.connect-wordmark span { color: var(--green); }
.connect-flow { position: relative; width: 320px; height: 140px; }
.flow-node { position: absolute; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.flow-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 16px; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 0 0 0 rgba(0,200,150,.5); animation: pulseCore 1.6s ease-in-out infinite; }
@keyframes pulseCore { 0%,100% { box-shadow: 0 0 0 0 rgba(0,200,150,.45); } 50% { box-shadow: 0 0 0 16px rgba(0,200,150,0); } }
.flow-line { position: absolute; background: rgba(0,200,150,.5); height: 1.5px; transform-origin: left center; overflow: hidden; }
.flow-line::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--green), transparent); animation: travel 1.4s linear infinite; }
@keyframes travel { to { left: 140%; } }
.connect-label { margin-top: 30px; color: #B9C6DE; font-size: 13px; letter-spacing: .3px; }
#connect-checking[hidden] { display: none; }

/* Formulaire de connexion réel (affiché quand GET /auth/me renvoie 401) —
   même palette que l'animation ci-dessus (fond navy, accent vert). */
.login-form { display: flex; flex-direction: column; gap: 14px; width: 280px; }
.login-form[hidden] { display: none; }
.login-form-title { margin: 0 0 6px; color: var(--white); font-size: 15px; font-weight: 700; text-align: center; letter-spacing: -.01em; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field span { font-size: 12px; font-weight: 600; color: #B9C6DE; }
.login-field input {
  background: rgba(255,255,255,.06); color: var(--white); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit;
}
.login-field input:focus { outline: none; border-color: var(--green); }
.login-error { font-size: 12.5px; color: var(--accent-red); text-align: center; }
.login-error[hidden] { display: none; }
.login-submit {
  background: var(--green); color: var(--white); border: none; border-radius: 10px; padding: 11px 0;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background var(--motion-fast) var(--motion-ease);
}
.login-submit:hover:not(:disabled) { background: var(--green-dark); }
.login-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- SHELL DE L'APPLICATION ---------- */
#app-shell { display: none; min-height: 100vh; }
#app-shell.ready { display: flex; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 62px;
  background: linear-gradient(180deg, var(--surface-1) 0%, #0A1120 100%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  display: flex; align-items: center; padding: 0 24px; z-index: 50;
}
.topbar .wordmark {
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  background: none; border: none; color: var(--text-primary); padding: 4px 6px; margin: 0 -6px;
  cursor: pointer; border-radius: 8px; font: inherit; font-weight: 700;
  transition: background var(--motion-fast) var(--motion-ease);
}
.topbar .wordmark:hover { background: var(--border-subtle); }
.topbar .wordmark:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.topbar .wordmark span { color: var(--accent-cyan); }
.topbar .env-badge { margin-left: 14px; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11px; padding: 4px 10px; border-radius: 20px; }
.topbar .env-select { margin-left: auto; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; font-family: inherit; cursor: pointer; }
.topbar .env-select:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.topbar .env-select option { color: #0B1220; }
.topbar .btn-mode-presentation {
  margin-left: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-size: 12px; font-weight: 700; padding: 6px 12px 6px 6px;
  border-radius: 20px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.topbar .btn-mode-presentation:hover { background: var(--surface-3); }
.topbar .btn-mode-presentation:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.topbar .btn-mode-presentation .switch-track {
  width: 30px; height: 16px; border-radius: 20px; background: rgba(255,255,255,.16);
  position: relative; transition: background var(--motion-fast) var(--motion-ease); flex-shrink: 0;
}
.topbar .btn-mode-presentation .switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); transition: transform var(--motion-fast) var(--motion-ease);
}
.topbar .btn-mode-presentation[aria-pressed="true"] { background: var(--accent-orange-dim); border-color: var(--accent-orange); }
.topbar .btn-mode-presentation[aria-pressed="true"] .switch-track { background: var(--accent-orange); }
.topbar .btn-mode-presentation[aria-pressed="true"] .switch-thumb { transform: translateX(14px); }
.topbar .btn-refresh {
  margin-left: 14px; background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
  transition: background var(--motion-fast) var(--motion-ease);
}
.topbar .btn-refresh:hover:not(:disabled) { background: var(--surface-3); }
.topbar .btn-refresh:disabled { opacity: .5; cursor: not-allowed; }
.topbar .btn-refresh:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.topbar .refresh-status { margin-left: 10px; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .refresh-status.is-error { color: var(--accent-red); }
/* Identité connectée (nom + rôle) + déconnexion — uniquement visible en
   mode interne, masqué en Mode présentation et sur petit écran (place
   limitée), même discipline que l'ancien placeholder qu'il remplace. */
.topbar-auth {
  margin-left: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary);
  border: 1px solid var(--border-subtle); padding: 5px 8px 5px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.topbar-auth[hidden] { display: none; }
.topbar-auth svg { font-size: 12px; }
.topbar-auth-name { color: var(--text-primary); font-weight: 700; }
.topbar-auth-role { color: var(--text-tertiary); }
.btn-logout {
  background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-primary);
  border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-family: inherit;
  transition: background var(--motion-fast) var(--motion-ease);
}
.btn-logout:hover { background: var(--surface-3); }
.btn-logout:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
/* Mode présentation (ÉTAPE 8) : masquer plutôt qu'afficher désactivé —
   rien de technique ne doit rester visible devant un prospect. */
body.presentation-mode .topbar-auth,
body.presentation-mode .btn-refresh,
body.presentation-mode .refresh-status { display: none; }
@media (max-width: 1023px) { .topbar-auth { display: none; } }

/* ---------- MODE PRÉSENTATION (CORRECTIF PRIORITAIRE) ----------
   Le bandeau appartient à la zone principale, jamais à la sidebar :
   il démarre après le rail (left: 220px) et va jusqu'au bord droit
   (right: 0) — il ne peut donc plus jamais chevaucher ni sembler
   confiné au rail, quelle que soit la largeur d'écran. Une seule
   ligne, hauteur fixe, fond ambré très translucide, bordures haute/
   basse discrètes. Le rail n'a plus besoin d'être décalé (il n'occupe
   plus jamais le même espace horizontal que le bandeau) — seule la
   zone principale (.main-area) se décale sous le bandeau. */
.presentation-banner {
  display: none; position: fixed; top: 62px; left: 220px; right: 0; height: 30px; z-index: 45;
  background: var(--accent-orange-dim);
  border-top: 1px solid rgba(245,165,36,.35);
  border-bottom: 1px solid rgba(245,165,36,.35);
  color: #FFD9A0; font-size: 11.5px; font-weight: 600;
  align-items: center; justify-content: center; gap: 7px; letter-spacing: .1px; text-align: center; padding: 0 16px;
  box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.presentation-banner svg { font-size: 13px; flex-shrink: 0; }
.presentation-banner[hidden] { display: none; }
body.presentation-mode .presentation-banner { display: flex; }
body.presentation-mode .main-area { margin-top: 92px; } /* 62px topbar + 30px bandeau */

/* Verrouillage visuel centralisé (core/presentation-guard.js) —
   contraste conservé, jamais un simple gris illisible. */
.presentation-locked { opacity: .5; cursor: not-allowed !important; filter: grayscale(.35); }

/* ---------- PROSPECTION ---------- */
.prospection-form-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-soft); }
.pf-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-field { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.pf-field-narrow { flex: 0 0 150px; }
.pf-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pf-field input { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; }
.pf-field input:focus { outline: none; border-color: var(--accent-cyan); }
.btn-launch { background: var(--green); color: var(--white); border: none; border-radius: 10px; padding: 11px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-launch:hover:not(:disabled) { background: var(--green-dark); }
.btn-launch:disabled { opacity: .6; cursor: not-allowed; }
.pf-status { margin-top: 12px; font-size: 13px; }
.pf-status .pf-loading { color: var(--text-secondary); }
.pf-status .pf-success { color: var(--accent-green); font-weight: 600; }
.pf-status .pf-error { color: var(--accent-red); font-weight: 600; }

.prospects-table { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.pt-head, .pt-row { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr; padding: 12px 18px; align-items: center; }
.pt-head { background: var(--surface-1); font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .3px; }
.pt-row { border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }
.pt-nom { font-weight: 600; color: var(--text-primary); }
.pt-score { font-weight: 700; color: var(--text-primary); }
.pt-badge { display: inline-block; background: var(--accent-green-dim); color: var(--accent-green); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; width: fit-content; }

/* ---------- SOUS-NAVIGATION GÉNÉRIQUE ----------
   `display: none` reste la valeur par défaut — js/app.js bascule en
   "flex" via style.display quand des onglets existent (inchangé).
   Défilement horizontal accessible mais scrollbar masquée (ÉTAPE 5). */
.subnav { display: none; gap: 4px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); margin-bottom: 22px; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-item {
  padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
  transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.subnav-item:hover { color: var(--text-primary); background: rgba(255,255,255,.03); }
.subnav-item.active { color: var(--text-primary); background: var(--accent-cyan-dim); border-bottom-color: var(--accent-cyan); }
.subnav-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }

/* ---------- CRM : TOOLBAR + FICHE ---------- */
.crm-toolbar { margin-bottom: 14px; }
.crm-toolbar input { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-family: inherit; width: 280px; max-width: 100%; }
.crm-toolbar input:focus { outline: none; border-color: var(--accent-cyan); }

.btn-back { background: none; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 16px; font-family: inherit; }
.btn-back:hover { color: var(--text-primary); }

.fiche-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 26px; }
.fiche-title { font-size: 22px; color: var(--text-primary); margin: 0 0 20px; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.fiche-section { margin-bottom: 20px; }
.fiche-section-title { font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.fiche-field { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; }
.fiche-field span { color: var(--text-secondary); }
.fiche-field b { color: var(--text-primary); font-weight: 600; }
.fiche-notes { font-size: 13.5px; color: var(--text-primary); background: var(--surface-1); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; margin: 0; }
.soon-tag { background: var(--accent-orange-dim); color: var(--accent-orange); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: none; letter-spacing: 0; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-action-soon { background: var(--surface-1); color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: not-allowed; font-family: inherit; }
.btn-action-ready { background: var(--green); color: var(--white); border: none; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-action-ready:hover { background: var(--green-dark); }
.rdv-form { margin-top: 14px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; }

/* ---------- PIPELINE : KANBAN ---------- */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; min-width: 240px; flex: 0 0 240px; }
.kanban-col-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.kanban-col-count { background: var(--surface-3); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--text-secondary); }
.kanban-col-total { font-size: 11px; color: var(--text-tertiary); margin-bottom: 12px; }
.kanban-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow-soft); }
.kc-nom { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.kc-valeur { font-size: 15px; font-weight: 700; color: var(--accent-green); margin-bottom: 4px; }
.kc-meta { font-size: 11px; color: var(--text-tertiary); margin-bottom: 10px; }
.kc-move-select { width: 100%; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-family: inherit; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }

/* ---------- RELANCES & ACTIVITÉS ---------- */
.view-toggle { display: flex; gap: 4px; background: var(--surface-1); border-radius: 10px; padding: 3px; }
.vt-btn { border: none; background: none; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.vt-btn.active { background: var(--surface-3); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px; background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
.filter-pill.active { background: var(--accent-cyan); color: var(--command-bg); }
button.filter-pill { border: none; font-family: inherit; }
button.filter-pill:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.activites-table { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; margin-top: 16px; }
.at-head, .at-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr 1fr; padding: 12px 18px; align-items: center; }
.at-head { background: var(--surface-1); font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; }
.at-row { border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }

/* ---------- AGENDA ÉQUIPE ---------- */
.agenda-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.agenda-person i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--person-color); margin-right: 5px; }
.agenda-list { display: flex; flex-direction: column; gap: 8px; }
.agenda-item { display: flex; gap: 16px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-left: 4px solid; border-radius: 10px; padding: 12px 16px; align-items: center; }
.ag-date { font-size: 12px; font-weight: 700; color: var(--text-primary); width: 130px; flex-shrink: 0; }
.ag-titre { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.ag-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------- DIAGNOSTICS & OFFRES ---------- */
.do-section { margin-bottom: 26px; }
.do-section-title { font-size: 12px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.do-required-tag { background: var(--accent-green-dim); color: var(--accent-green); font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 20px; text-transform: none; letter-spacing: 0; }
.do-item { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 11px 16px; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); }
.do-item b { flex: 1; color: var(--text-primary); }
.do-date { font-size: 11.5px; color: var(--text-tertiary); }
.do-solution-board { background: var(--accent-green-dim); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px; }
.sb-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.sb-titre { font-weight: 700; color: var(--text-primary); font-size: 13.5px; margin-bottom: 8px; }
.sb-field { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }
.sb-field span { color: var(--text-tertiary); }
.ve-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }

.menu-rail {
  position: fixed; top: 62px; left: 0; bottom: 0; width: 220px;
  background: linear-gradient(180deg, var(--surface-1) 0%, #0A1120 100%);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
}
.rail-brand { padding: 20px 18px 14px; }
.rail-brand-mark { font-weight: 700; font-size: 15px; color: var(--text-primary); letter-spacing: -.01em; }
.rail-brand-mark span { color: var(--accent-cyan); }
.rail-brand-sub { display: block; margin-top: 2px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.rail-separator { height: 1px; background: var(--border-subtle); margin: 4px 18px 12px; flex-shrink: 0; }
.rail-nav { flex: 1; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; }
.rail-footer { padding: 14px 18px 18px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.rail-footer-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-tertiary); }
.rail-footer-item b { color: var(--text-secondary); font-weight: 600; }
.rail-footer-item > span:first-child:not(.rail-footer-dot) { font-size: 13px; display: inline-flex; color: var(--text-tertiary); }
.rail-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-grayblue); flex-shrink: 0; transition: background var(--motion-fast) var(--motion-ease); }
.rail-footer-dot.is-active { background: var(--accent-orange); }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px; margin-bottom: 3px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.menu-item .ico { font-size: 17px; display: inline-flex; color: var(--text-tertiary); transition: color var(--motion-fast) var(--motion-ease); }
.menu-item:hover { background: rgba(41,211,240,.07); color: var(--text-primary); }
.menu-item:hover .ico { color: var(--accent-cyan); }
.menu-item.active {
  background: linear-gradient(90deg, rgba(41,211,240,.16), rgba(41,211,240,.03));
  color: var(--text-primary);
  box-shadow: inset 3px 0 0 var(--accent-cyan);
}
.menu-item.active .ico { color: var(--accent-cyan); }
.menu-item.accueil-item { margin-bottom: 12px; }
.menu-item.accueil-item.active { border-color: var(--accent-cyan); }
button.menu-item { border: 1px solid transparent; background: none; font: inherit; text-align: left; width: 100%; }
button.menu-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.main-area { margin-left: 220px; margin-top: 62px; padding: 26px 28px; width: 100%; position: relative; }
.menu-heading { font-size: 21px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; letter-spacing: -.01em; }
.menu-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 18px; }

/* ---------- CARTES (DESIGN P4 — unifiées avec le Command Center) ----------
   Fond sombre premium partagé par les 27 modules via ces classes —
   voir docs/DESIGN-SYSTEM-TECHLIA.md, § DESIGN P4. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kpi-card {
  position: relative; background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 130%);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
.kpi-card::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.kpi-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(41,211,240,.16); }
.kpi-card .kpi-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-cyan-dim); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.kpi-card .kpi-value { font-size: 30px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.kpi-card .kpi-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.kpi-card .kpi-trend { font-size: 11.5px; font-weight: 700; margin-top: 10px; display: inline-block; padding: 3px 9px; border-radius: 20px; }
.kpi-card .kpi-trend.up { background: var(--accent-green-dim); color: var(--accent-green); }
.kpi-card .kpi-trend.down { background: var(--accent-red-dim); color: var(--accent-red); }

.empty-card {
  background: var(--surface-2); border: 1.5px dashed var(--border-subtle); border-radius: 16px;
  padding: 40px; text-align: center; color: var(--text-tertiary); font-size: 13px;
  box-shadow: var(--shadow-soft);
}

/* ---------- PARCOURS DE TRANSFORMATION (composant transversal, LOT 2) ---------- */
.parcours-transversal { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px; }
.pt-phases { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pt-phase-pill {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border-subtle); background: var(--surface-1);
  border-radius: 20px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; flex: 1 1 auto; min-width: 140px; justify-content: space-between;
}
.pt-phase-pill.pt-phase-open { border-color: var(--accent-cyan); color: var(--text-primary); background: var(--surface-3); }
.pt-phase-pill.pt-phase-terminee { border-color: var(--accent-green); }
.pt-phase-pill.pt-phase-terminee .pt-phase-count { background: var(--accent-green-dim); color: var(--accent-green); }
.pt-phase-pill.pt-phase-bloquee { border-color: var(--accent-red); }
.pt-phase-pill.pt-phase-active:not(.pt-phase-open) { border-color: var(--accent-orange); }
.pt-phase-count { background: var(--surface-3); color: var(--text-secondary); border-radius: 20px; padding: 1px 8px; font-size: 11px; }
.pt-phase-detail { display: flex; flex-direction: column; gap: 12px; }

.pt-step-card { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; background: var(--surface-1); }
.pt-step-card.pt-step-current { border-color: var(--accent-cyan); background: var(--surface-3); box-shadow: var(--shadow-soft); }
.pt-step-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.pt-step-label { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.pt-status-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; }
.pt-status-terminee { background: var(--accent-green-dim); color: var(--accent-green); }
.pt-status-encours { background: var(--accent-orange-dim); color: var(--accent-orange); }
.pt-status-avenir { background: var(--border-subtle); color: var(--text-tertiary); }
.pt-status-bloquee { background: var(--accent-red-dim); color: var(--accent-red); }
.pt-step-field { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--border-subtle); font-size: 12.5px; }
.pt-step-field span { color: var(--text-tertiary); flex-shrink: 0; }
.pt-step-field b { color: var(--text-primary); font-weight: 600; text-align: right; }
.pt-blocage { margin-top: 8px; font-size: 12px; color: var(--accent-red); background: var(--accent-red-dim); border-radius: 8px; padding: 8px 10px; }
.pt-step-action { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-action-none { font-size: 12px; color: var(--text-tertiary); }
.pt-action-badge { font-size: 10.5px; color: var(--text-tertiary); font-weight: 600; }
.pt-agent { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-tertiary); border-top: 1px dashed var(--border-subtle); padding-top: 8px; }
.pt-agent-status { font-size: 10px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: .3px; }
.pt-agent-none { font-style: italic; color: var(--text-tertiary); border-top: 1px dashed var(--border-subtle); padding-top: 8px; margin-top: 8px; }
.pt-target-highlight { outline: 2px solid var(--accent-orange); outline-offset: 2px; transition: outline-color .3s; }
.pt-workflow-zone:empty { display: none; }

.kc-parcours-btn {
  width: 100%; margin-top: 6px; background: none; border: 1px dashed var(--border-subtle); border-radius: 8px;
  padding: 6px; font-size: 10.5px; font-weight: 600; color: var(--accent-cyan); cursor: pointer; font-family: inherit;
}
.pt-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 500;
}
.pt-panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 16px; max-width: 720px; width: 100%; padding: 0; box-shadow: var(--shadow-elevated); }
.pt-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); border-radius: 16px 16px 0 0; }
.pt-panel-head h3 { margin: 0; font-size: 15px; color: var(--text-primary); }
.pt-panel-close { background: none; border: none; font-size: 16px; color: var(--text-tertiary); cursor: pointer; }
.pt-panel-body { padding: 18px 22px 22px; color: var(--text-secondary); }

/* ---------- ACCUEIL — TECHLIA (parcours transversal, E2E-6B2) ----------
   Traitement premium complet (DESIGN P1) : les deux Accueils sont,
   avec le shell, le seul contenu entièrement reskinné dans cette
   phase — voir docs/DESIGN-SYSTEM-TECHLIA.md, § Périmètre. */
.accueil-bandeau {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary); border-radius: 20px; padding: 32px 34px; margin-bottom: 26px;
  box-shadow: var(--shadow-elevated);
  animation: accueilRise var(--motion-slow) var(--motion-ease);
}
/* Motif de « cadre instrumenté » très discret — cadre intérieur fin
   + un unique coin lumineux, jamais un effet jeu vidéo. */
.accueil-bandeau::before {
  content: ""; position: absolute; inset: 1px; border-radius: 19px;
  border: 1px solid rgba(255,255,255,.05); pointer-events: none;
}
.accueil-bandeau::after {
  content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(41,211,240,.14), transparent 70%); pointer-events: none;
}
.accueil-bandeau h2 { font-size: 24px; margin: 0 0 8px; color: var(--text-primary); position: relative; }
.accueil-bandeau p { font-size: 13.5px; color: var(--text-secondary); margin: 0; max-width: 720px; line-height: 1.55; position: relative; }
.accueil-contexte {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; position: relative;
  background: var(--surface-3); border: 1px solid var(--border-subtle);
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.accueil-contexte.is-demo { background: var(--accent-orange-dim); border-color: rgba(245,165,36,.42); }

.accueil-section-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .3px; margin: 0 0 14px; }

/* Réutilisées par core/command-center-ui.js::renderTimelineDetail()
   (panneau de détail du parcours compact, DESIGN P3). */
.accueil-step-titre { font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.accueil-step-desc { font-size: 11.5px; color: var(--text-tertiary); margin: 0; }
.accueil-step-benefice { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin: 6px 0 8px; }

.accueil-legende { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px 20px; }
.accueil-legende-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.accueil-legende-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text-secondary); }
.accueil-legende-list li { display: flex; align-items: center; gap: 6px; }

@keyframes accueilRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- ACCUEIL SECTORIEL DEMO (LOT FINAL ACCUEIL SECTORIEL DEMO) ----------
   Accent subtil par secteur (ÉTAPE 8) : une seule variable changée
   par modificateur, jamais 4 thèmes différents. Appliqué par
   modules/accueil/module.js via une classe sur .accueil-bandeau,
   déduite de core/demo-home-registry.js (champ `accent`). */
.accueil-bandeau { --secteur-accent: var(--accent-cyan); --secteur-accent-dim: var(--accent-cyan-dim); }
.accueil-bandeau.accueil-secteur--automobile { --secteur-accent: var(--accent-cyan); --secteur-accent-dim: var(--accent-cyan-dim); }
.accueil-bandeau.accueil-secteur--sante { --secteur-accent: #2FD6C4; --secteur-accent-dim: rgba(47,214,196,.16); }
.accueil-bandeau.accueil-secteur--habitat { --secteur-accent: var(--accent-orange); --secteur-accent-dim: var(--accent-orange-dim); }
.accueil-bandeau.accueil-secteur--services { --secteur-accent: var(--accent-violet); --secteur-accent-dim: var(--accent-violet-dim); }
.accueil-bandeau[class*="accueil-secteur--"]::after { background: radial-gradient(circle, var(--secteur-accent-dim), transparent 70%); }

.accueil-secteur-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--secteur-accent-dim, var(--accent-cyan-dim));
  border: 1px solid var(--secteur-accent, var(--accent-cyan));
  color: var(--secteur-accent, var(--accent-cyan)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 5px 13px 5px 10px; border-radius: 20px; margin-bottom: 12px; position: relative;
}
.accueil-secteur-badge svg { font-size: 13px; }
p.accueil-mention {
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px;
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 10px 0 0;
}

/* ---------- Hero sectoriel DEMO dense (DESIGN P3, ÉTAPE 10) ----------
   55% scène + promesse (gauche) / 45% quatre piliers en grille 2×2
   (droite) — les quatre piliers visibles au premier écran, jamais
   rejetés sous la ligne de flottaison. */
.cc-hero.cc-hero--demo { padding: 24px 26px; }
.cc-demo-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 1023px) { .cc-demo-hero-grid { grid-template-columns: 1fr; } }
.cc-demo-hero-left { text-align: center; }
.cc-demo-hero-left .cc-orbit-scene { margin-top: 4px; }
.cc-demo-hero-right { display: flex; align-items: center; }
.cc-demo-piliers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
@media (max-width: 480px) { .cc-demo-piliers-grid { grid-template-columns: 1fr; } }
.cc-demo-pilier-card {
  background: linear-gradient(165deg, var(--surface-3) 0%, var(--surface-2) 130%);
  border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-soft);
  transition: border-color var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
.cc-demo-pilier-card:hover { transform: translateY(-2px); border-color: var(--secteur-accent, var(--accent-cyan)); box-shadow: var(--shadow-elevated); }
.cc-demo-pilier-ico {
  width: 30px; height: 30px; border-radius: 9px; background: var(--secteur-accent-dim, var(--accent-cyan-dim));
  color: var(--secteur-accent, var(--accent-cyan)); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.accueil-pilier-titre { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 2px 0 0; }
.accueil-pilier-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin: 0; flex: 1; }

.cc-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cc-chip {
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 20px;
  padding: 6px 13px; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap;
}

.accueil-controle-humain { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px 18px; margin-top: 4px; }
.accueil-controle-humain p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }

/* ============================================================
   TECHLIA COMMAND CENTER — Bento grid + Orbit (DESIGN P2)
   Composants consommés par modules/accueil/module.js via
   core/command-center-ui.js. Voir docs/DESIGN-SYSTEM-TECHLIA.md.
   ============================================================ */

/* ---------- Ligne 1 : scène centrale + indicateurs + attention ---------- */
.cc-bento-top { display: grid; grid-template-columns: 1.65fr .78fr .92fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.cc-hero { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; margin-bottom: 0; }
@media (max-width: 1439px) {
  .cc-bento-top { grid-template-columns: 1fr 1fr; }
  .cc-hero { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cc-bento-top { grid-template-columns: 1fr; }
  .cc-hero { grid-column: 1; }
}
.cc-bento-top > *, .cc-timeline-panel, .cc-bento-secondary > * { animation: ccRise var(--motion-slow) var(--motion-ease) both; }
.cc-bento-top > *:nth-child(2) { animation-delay: 40ms; }
.cc-bento-top > *:nth-child(3) { animation-delay: 80ms; }
@keyframes ccRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Scène centrale « Orbit » (DESIGN P3) ----------
   Noyau lumineux + anneaux elliptiques + connecteurs courbes + 4
   instruments compacts — jamais quatre rectangles reliés par une
   croix. Accent piloté par --secteur-accent (cyan par défaut côté
   Techlia, teinte du secteur en DEMO — voir .accueil-secteur--*). */
.cc-orbit-scene { text-align: center; }
h2.cc-orbit-title { font-size: 20px; font-weight: 700; letter-spacing: .05em; color: var(--text-primary); margin: 2px 0 5px; position: relative; }
/* DESIGN P4 — Accueil : sous-titre légèrement agrandi pour une
   présentation sur écran (ÉTAPE 6), contenu et données inchangés. */
p.cc-orbit-subtitle { font-size: 13.5px; color: var(--text-secondary); margin: 0 auto 14px; max-width: 400px; position: relative; }
/* Orbit agrandie d'environ 12% (ÉTAPE 6) : 232→260px, 440→490px. */
.cc-orbit { position: relative; height: 260px; margin: 0 auto; max-width: 490px; }
.cc-orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-orbit-ring { fill: none; stroke: var(--border-strong); stroke-width: .45; }
.cc-orbit-ring--inner { stroke: var(--secteur-accent, var(--accent-cyan)); opacity: .22; }
.cc-orbit-floor { fill: none; stroke: var(--secteur-accent, var(--accent-cyan)); stroke-width: 1.2; opacity: .18; }
.cc-orbit-line { fill: none; stroke: var(--secteur-accent, var(--accent-cyan)); stroke-width: .55; opacity: .38; }
.cc-orbit-dot { fill: var(--secteur-accent, var(--accent-cyan)); opacity: .7; }
.cc-orbit-particle { fill: var(--secteur-accent, var(--accent-cyan)); opacity: 0; animation: ccOrbitTwinkle 5s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes ccOrbitTwinkle { 0%, 100% { opacity: 0; } 45% { opacity: .55; } 55% { opacity: .55; } }
.cc-orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 45%, transparent), var(--surface-3) 72%);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; text-align: center;
  animation: ccOrbitBreathe 6.5s ease-in-out infinite;
}
.cc-orbit-core-mark { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--text-primary); }
.cc-orbit-core-mark span { color: var(--secteur-accent, var(--accent-cyan)); }
@keyframes ccOrbitBreathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 20%, transparent), 0 0 26px color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 18%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 34%, transparent), 0 0 46px color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 30%, transparent); }
}
.cc-orbit-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 8px 11px; min-width: 88px; cursor: pointer; font-family: inherit; color: var(--text-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.cc-orbit-node:hover, .cc-orbit-node:focus-visible {
  border-color: var(--secteur-accent, var(--accent-cyan));
  transform: translate(-50%, -50%) translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--secteur-accent, var(--accent-cyan)) 30%, transparent), 0 12px 26px rgba(0,0,0,.4);
}
.cc-orbit-node:focus-visible { outline: 2px solid var(--secteur-accent, var(--accent-cyan)); outline-offset: 2px; }
.cc-orbit-node-ico { font-size: 17px; color: var(--secteur-accent, var(--accent-cyan)); line-height: 1; }
.cc-orbit-node-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; }
.cc-orbit-node-count { font-size: 10px; font-weight: 700; color: var(--secteur-accent, var(--accent-cyan)); }

/* ---------- Surfaces (ÉTAPE 11) : panneau = « surface élevée » ---------- */
.cc-panel {
  position: relative; background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 130%);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex; flex-direction: column;
}
.cc-panel::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.cc-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cc-panel-ico { color: var(--secteur-accent, var(--accent-cyan)); font-size: 15px; line-height: 1; flex-shrink: 0; }
.cc-panel-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: .01em; }
.cc-panel-note { font-size: 10.5px; color: var(--text-tertiary); margin: 0 0 8px; line-height: 1.4; }
.cc-panel-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 2px 0 0; letter-spacing: -.01em; }
.cc-panel-sub { font-size: 11.5px; color: var(--text-secondary); margin: 0 0 8px; }
.cc-panel-cta {
  margin-top: auto; background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 8px 12px; font-size: 11.5px; font-weight: 700; color: var(--text-primary); cursor: pointer;
  text-align: center; font-family: inherit; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.cc-panel-cta:hover { border-color: var(--secteur-accent, var(--accent-cyan)); background: var(--surface-2); }
.cc-panel-cta:focus-visible { outline: 2px solid var(--secteur-accent, var(--accent-cyan)); outline-offset: 2px; }
.cc-panel-cta.is-disabled { cursor: not-allowed; color: var(--text-tertiary); }

/* A. Jauge circulaire */
.cc-gauge { position: relative; width: 96px; height: 96px; margin: 6px auto 2px; }
.cc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-gauge-track { fill: none; stroke: var(--border-subtle); stroke-width: 3; }
.cc-gauge-value {
  fill: none; stroke: var(--secteur-accent, var(--accent-cyan)); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--motion-ease);
}
.cc-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cc-gauge-pct { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.cc-gauge-frac { font-size: 9.5px; color: var(--text-tertiary); margin-top: 2px; }
.cc-gauge-caption { text-align: center; font-size: 11px; color: var(--text-secondary); margin: 2px 0 12px; }

/* B. Barres horizontales */
.cc-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cc-bar-row { display: grid; grid-template-columns: 84px 1fr 18px; align-items: center; gap: 8px; }
.cc-bar-label { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bar-track { height: 5px; border-radius: 4px; background: var(--border-subtle); overflow: hidden; }
.cc-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 700ms var(--motion-ease); }
.cc-bar-fill--automatise { background: var(--blue); }
.cc-bar-fill--ia { background: var(--accent-violet); }
.cc-bar-fill--humaine { background: var(--accent-orange); }
.cc-bar-fill--manuel { background: var(--accent-grayblue); }
.cc-bar-value { font-size: 11px; font-weight: 700; color: var(--text-primary); text-align: right; }

.cc-metric-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cc-metric-list li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); padding-top: 7px; }
.cc-metric-list li:first-child { border-top: none; padding-top: 0; }
.cc-metric-list li span:not(.cc-metric-ico) { flex: 1; }
.cc-metric-list li b { color: var(--text-primary); font-weight: 600; text-align: right; }
.cc-metric-ico { color: var(--secteur-accent, var(--accent-cyan)); font-size: 13px; flex-shrink: 0; line-height: 1; }
.cc-metric-list--compact { margin-top: 4px; }

/* Points d'attention — lignes compactes */
.cc-attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-attention-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 6px; border-radius: 10px;
  border-left: 2px solid var(--accent-grayblue); transition: background var(--motion-fast) var(--motion-ease);
}
.cc-attention-item:hover { background: rgba(255,255,255,.03); }
.cc-attention-item--bloque { border-left-color: var(--accent-red); }
.cc-attention-item--configure { border-left-color: var(--accent-grayblue); }
.cc-attention-item--runtime { border-left-color: var(--accent-violet); }
.cc-attention-ico { color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.cc-attention-item--bloque .cc-attention-ico { color: var(--accent-red); }
.cc-attention-item--runtime .cc-attention-ico { color: var(--accent-violet); }
.cc-attention-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-attention-title { font-size: 11.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.cc-attention-sub { font-size: 10px; color: var(--text-tertiary); line-height: 1.3; }
.cc-attention-link {
  background: none; border: none; color: var(--text-tertiary); font-size: 13px; padding: 2px; cursor: pointer;
  flex-shrink: 0; margin-top: 1px; transition: color var(--motion-fast) var(--motion-ease);
}
.cc-attention-link:hover { color: var(--secteur-accent, var(--accent-cyan)); }
.cc-attention-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px; }

.cc-mini-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }

.cc-empty-state { text-align: center; padding: 14px 8px; color: var(--text-tertiary); margin: auto 0; }
.cc-empty-state p { margin: 0 0 6px; font-size: 12px; }

/* ---------- Parcours compact en 7 étapes (DESIGN P3) ----------
   Rail fin instrumenté : ligne lumineuse continue + 7 nœuds ronds
   numérotés, label sous le cercle, halo sur l'étape active. */
.cc-timeline-panel {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 130%);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  padding: 16px 20px 14px; margin-bottom: 14px; box-shadow: var(--shadow-soft);
  position: relative; overflow: hidden;
}
.cc-timeline-panel::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.cc-rail { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 6px 2px 2px; overflow-x: auto; }
.cc-rail-track {
  position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-violet) 35%, var(--accent-orange) 65%, var(--accent-grayblue));
  opacity: .28;
}
.cc-rail-step {
  --step-accent: var(--accent-grayblue);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0;
  background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text-tertiary);
  padding: 2px 2px 4px; min-width: 64px;
}
.cc-rail-step--operationnel { --step-accent: var(--accent-green); }
.cc-rail-step--partiel { --step-accent: var(--accent-orange); }
.cc-rail-step--ia { --step-accent: var(--accent-violet); }
.cc-rail-step--attente { --step-accent: var(--accent-grayblue); }
.cc-rail-step--bloque { --step-accent: var(--accent-red); }
.cc-rail-step--demo { --step-accent: var(--accent-orange); }
.cc-rail-step-num {
  position: relative; width: 20px; height: 20px; border-radius: 50%; z-index: 1;
  background: var(--step-accent); color: var(--command-bg);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--surface-1);
  transition: box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.cc-rail-step-label { font-size: 10.5px; font-weight: 600; text-align: center; line-height: 1.2; transition: color var(--motion-fast) var(--motion-ease); }
.cc-rail-step:hover .cc-rail-step-label { color: var(--text-secondary); }
.cc-rail-step:hover .cc-rail-step-num { transform: scale(1.08); }
.cc-rail-step.is-active .cc-rail-step-label { color: var(--text-primary); }
.cc-rail-step.is-active .cc-rail-step-num { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px color-mix(in srgb, var(--step-accent) 45%, transparent), 0 0 14px var(--step-accent); }
.cc-rail-step:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 8px; }

.cc-timeline-detail { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.cc-fade-in { animation: ccRise var(--motion-base) var(--motion-ease); }
.cc-timeline-detail-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cc-timeline-detail-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.cc-timeline-detail-titles { flex: 1; min-width: 160px; }
.cc-timeline-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* ---------- Ligne 3 : panneaux secondaires ---------- */
.cc-bento-secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1439px) { .cc-bento-secondary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .cc-bento-secondary { grid-template-columns: 1fr; } }

/* ---------- Mobile : Orbit simplifiée ---------- */
@media (max-width: 780px) {
  .cc-orbit { height: auto; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .cc-orbit-svg { display: none; }
  .cc-orbit-core { position: static !important; transform: none !important; margin: 0 auto 4px; animation: none; }
  .cc-orbit-node { position: static !important; transform: none !important; width: 100%; max-width: 280px; flex-direction: row; justify-content: center; gap: 8px; }
  .cc-orbit-node:hover, .cc-orbit-node:focus-visible { transform: none !important; }
}

/* ---------- BADGES ET ÉTATS PARTAGÉS (core/workflow-presentation.js) ---------- */
/* Utilisés par Accueil, Automatisations et Processus & gains — un
   seul jeu de classes, jamais redéfini par module. */
.wf-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.wf-badge-automatise { background: var(--blue-light); color: var(--blue); }
.wf-badge-ia { background: var(--accent-violet-dim); color: var(--accent-violet); }
.wf-badge-humaine { background: var(--accent-orange-dim); color: var(--accent-orange); }
.wf-badge-manuel { background: var(--accent-grayblue-dim); color: var(--accent-grayblue); }
.wf-etat { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; width: fit-content; white-space: nowrap; }
.wf-etat-operationnel { background: var(--accent-green-dim); color: var(--accent-green); }
.wf-etat-partiel { background: var(--accent-orange-dim); color: var(--accent-orange); }
.wf-etat-configure { background: var(--accent-grayblue-dim); color: var(--accent-grayblue); }
.wf-etat-bloque { background: var(--accent-red-dim); color: var(--accent-red); }
.wf-etat-runtime { background: var(--accent-violet-dim); color: var(--accent-violet); }
.wf-etat-demo { background: var(--accent-orange-dim); color: var(--accent-orange); }

/* ---------- CARTES WORKFLOW (modules/automatisations, E2E-6B3B) ---------- */
.wf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.wf-filter-count { font-size: 12px; color: var(--text-tertiary); margin-bottom: 16px; }
.wf-cards-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .wf-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wf-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.wf-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-soft); }
.wf-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wf-card-titre { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.wf-card-etape { font-size: 11.5px; color: var(--text-tertiary); margin: 0; }
.wf-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-card-field { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.wf-card-field span { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .2px; }
.wf-card-field b { color: var(--text-primary); font-weight: 600; }
.wf-card-gain { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }

.wf-detail-toggle {
  margin-top: 4px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 9px 12px; font-size: 12px; font-weight: 700; color: var(--text-primary); cursor: pointer;
  font-family: inherit; width: 100%; display: flex; justify-content: space-between; align-items: center;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.wf-detail-toggle:hover { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }
.wf-detail-toggle:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.wf-detail-toggle .wf-detail-chevron { transition: transform .15s ease; }
.wf-detail-toggle[aria-expanded="true"] .wf-detail-chevron { transform: rotate(180deg); }
.wf-detail-panel { margin-top: 6px; }
.wf-detail-panel[hidden] { display: none; }
.wf-flow { display: flex; flex-direction: column; gap: 4px; }
.wf-flow-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-1); border-radius: 10px; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.wf-flow-step .wf-flow-ico { font-size: 15px; flex-shrink: 0; }
.wf-flow-arrow { text-align: center; color: var(--text-tertiary); font-size: 12px; line-height: 1; }
.wf-flow-empty { font-size: 12px; color: var(--text-tertiary); font-style: italic; padding: 6px 0; }

@media (max-width: 780px) {
  .accueil-bandeau { padding: 20px; border-radius: 14px; }
  .accueil-bandeau h2 { font-size: 18px; }
  .accueil-steps { grid-template-columns: 1fr; }
  .topbar .btn-refresh-label { display: none; }
  .topbar .refresh-status { display: none; }
}

@media (max-width: 780px) {
  .pt-phases { flex-direction: column; }
  .pt-phase-pill { width: 100%; }
  .pt-step-field { flex-direction: column; }
  .pt-step-field b { text-align: left; }
  .pt-panel-overlay { padding: 0; align-items: stretch; }
  .pt-panel { max-width: none; border-radius: 0; min-height: 100%; }
  .pt-panel-head { border-radius: 0; }
}

@media (max-width: 780px) {
  /* La navigation reste accessible : bascule en bandeau horizontal
     défilable sous la topbar, plutôt que de disparaître entièrement.
     Identité (rail-brand) et bloc inférieur (rail-footer) masqués —
     inutiles sur un bandeau compact, aucune perte fonctionnelle. */
  .menu-rail {
    position: fixed; top: 62px; left: 0; right: 0; bottom: auto; width: 100%; height: auto;
    border-right: none; border-bottom: 1px solid var(--border-subtle);
  }
  .rail-brand, .rail-separator, .rail-footer { display: none; }
  .rail-nav {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    padding: 8px 12px; flex: none; width: 100%;
  }
  .menu-item { margin-bottom: 0; margin-right: 6px; flex-shrink: 0; white-space: nowrap; }
  .main-area { margin-left: 0; margin-top: 118px; padding: 20px; }
  .fiche-grid { grid-template-columns: 1fr; }
  .ve-two-col { grid-template-columns: 1fr; }
  /* Mode présentation : pas de rail vertical à contourner sur mobile —
     le bandeau reprend toute la largeur, positionné juste sous le
     bandeau horizontal de navigation (jamais superposé, jamais masqué),
     texte compact sur une seule ligne (détail masqué, jamais un retour
     à la ligne). */
  .presentation-banner { left: 0; top: 118px; height: 26px; font-size: 10.5px; padding: 0 10px; }
  .presentation-banner-detail { display: none; }
  body.presentation-mode .main-area { margin-top: 144px; } /* 118px + 26px de bandeau */
  .topbar .btn-mode-presentation-label { display: none; }
}

/* ---------- MOUVEMENTS — accessibilité (ÉTAPE 9/13, DESIGN P1-P3) ----------
   Toutes les transitions/animations introduites par le système
   premium (150-350ms, jamais permanentes) sont retirées ici — y
   compris la respiration du noyau Orbit, le scintillement des
   particules et la progression animée de la jauge. La navigation
   reste immédiatement fonctionnelle : aucune de ces propriétés ne
   conditionne un affichage, uniquement le mouvement. Composition
   Orbit toujours statique et complète (rien n'est masqué). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kpi-card:hover, .cc-demo-pilier-card:hover, .cc-panel:hover { transform: none; }
  .cc-orbit-node:hover, .cc-orbit-node:focus-visible { transform: translate(-50%, -50%) !important; }
  .cc-rail-step:hover .cc-rail-step-num { transform: none; }
  .cc-orbit-particle { opacity: 0 !important; }
}