/* ============================================================
   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);
  /* Palette additionnelle — Accueil Automobile uniquement (core/
     operational-briefing.js, core/week-calendar.js), jamais utilisée
     par le système générique .kpi-card partagé avec les autres écrans/
     environnements. */
  --accent-blue: #2E6BFF;
  --accent-blue-dim: rgba(46,107,255,.16);
  --accent-coral: #FF6B5B;
  --accent-coral-dim: rgba(255,107,91,.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); }

/* ---------- SUIVI DES DEMANDES (liste générique, 7 colonnes) ---------- */
.demandes-table { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; margin-top: 16px; }
.demandes-table .pt-head, .demandes-table .pt-row { grid-template-columns: 0.9fr 1.3fr 1.1fr 1.1fr 1.3fr 1fr 1.1fr; }

/* ---------- CLIENTS (modules/clients-demandes, 8 puis 5 colonnes) ---------- */
.clients-table .pt-head, .clients-table .pt-row { grid-template-columns: 1.2fr 1.1fr 1.2fr 0.7fr 1.3fr 1.3fr 1.1fr 1fr; }
.clients-history-table .pt-head, .clients-history-table .pt-row { grid-template-columns: 1fr 1.3fr 1.1fr 2fr 1fr; }

/* ---------- 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; }

/* `min-width: 0` : #app-shell est un flex container et .main-area son
   flex item — un flex item a par défaut un min-width basé sur son
   contenu (jamais 0), ce qui l'empêchait de rétrécir sous la largeur
   minimale de son contenu le plus large (ex. la grille 7 colonnes du
   calendrier Automobile) et forçait toute la page en défilement
   horizontal sur petit écran au lieu de laisser ce contenu défiler
   localement (overflow-x déjà en place où nécessaire). Aucun effet
   quand le contenu tient déjà dans la largeur disponible. */
.main-area { margin-left: 220px; margin-top: 62px; padding: 26px 28px; width: 100%; min-width: 0; 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);
}
/* Variante compacte — colonnes étroites (ex. colonne latérale ~40 % de
   l'Accueil Automobile) où le padding par défaut serait disproportionné. */
.empty-card--compact { padding: 12px 14px; text-align: left; border-radius: 10px; font-size: 12px; box-shadow: none; }

/* ---------- 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; }

/* ---------- BRIEFING OPÉRATIONNEL (Accueil Automobile) ---------- */
.briefing-table .pt-head, .briefing-table .pt-row { grid-template-columns: 1fr 1.4fr 1.2fr 1.2fr 1.2fr 1.2fr; }
.briefing-table--recent .pt-row { grid-template-columns: 1.6fr 1fr; }
.briefing-table--actions .pt-row { grid-template-columns: 1.6fr 2fr; }
.briefing-count-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 20px; background: var(--surface-3); color: var(--text-secondary);
  font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
}

/* Carte KPI cliquable — reset des styles natifs de <button>, le reste
   hérite de .kpi-card déjà défini plus haut. */
.kpi-card--clickable {
  font-family: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease;
}
.kpi-card--clickable:hover { border-color: var(--accent-cyan); transform: translateY(-1px); }
.kpi-card--clickable:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* État actif (filtre en cours) — contour turquoise + fond légèrement
   accentué, jamais agressif. aria-pressed="true" côté HTML porte l'état
   pour les technologies d'assistance ; cette classe ne fait que le
   traduire visuellement. */
.kpi-card--active {
  border-color: var(--accent-cyan);
  background: linear-gradient(165deg, var(--accent-cyan-dim) 0%, var(--surface-1) 140%);
}
.kpi-card--active:hover { border-color: var(--accent-cyan); }

/* ============================================================
   ACCUEIL AUTOMOBILE — refonte visuelle (core/operational-briefing.js)
   Classes propres à cet écran (`.auto-*`), jamais partagées avec les
   27 autres écrans du Cockpit — aucun risque de régression ailleurs.
   ============================================================ */

/* ---------- Bandeau d'accueil (compact) ---------- */
.auto-home-hero { display: grid; grid-template-columns: 1.6fr 1.1fr; gap: 14px; align-items: stretch; margin-bottom: 16px; }
.auto-home-hero-text { display: flex; flex-direction: column; justify-content: center; }
.auto-home-hero-title { font-size: 21px; font-weight: 800; color: var(--text-primary); margin: 0 0 3px; letter-spacing: -.01em; }
.auto-home-hero-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0; }
/* Média décoratif : illustration vectorielle (dégradé + icône SVG déjà
   existante, core/ui-icons.js::automobile), jamais une photo — voir le
   commentaire de heroHTML() (core/operational-briefing.js) pour la
   raison (aucune image libre de droit pleinement conforme trouvée dans
   le temps imparti : pas de logo constructeur/plaque lisible/texte/
   visage garanti). Remplaçable plus tard par une vraie photo sourcée
   et documentée, sans changer la structure HTML autour. La citation
   vit directement sur ce bandeau (un seul conteneur, pas deux) —
   demande explicite de compacité. */
.auto-home-hero-media {
  position: relative; overflow: hidden; border-radius: 12px; min-height: 64px;
  background: linear-gradient(135deg, #0C2340 0%, #071229 55%, #050A16 100%);
  border: 1px solid var(--border-subtle); padding: 8px 12px; display: flex; align-items: flex-end;
}
.auto-home-hero-media::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(41,211,240,.20), transparent 62%);
}
.auto-home-hero-media-ico {
  position: absolute; right: -10px; bottom: -14px; font-size: 84px; line-height: 0;
  color: rgba(41,211,240,.16);
}
.auto-home-hero-clock {
  position: absolute; top: 7px; right: 9px; display: flex; align-items: baseline; gap: 5px;
  background: rgba(6,10,20,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 3px 8px;
}
.auto-home-hero-date { font-size: 9px; color: var(--text-secondary); text-transform: capitalize; }
.auto-home-hero-time { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.auto-home-hero-quote {
  position: relative; margin: 0; font-size: 11.5px; font-style: italic; color: var(--text-secondary);
  line-height: 1.3; max-width: 88%;
}
@media (max-width: 1000px) {
  .auto-home-hero { grid-template-columns: 1fr; }
  /* Plus de hauteur + citation sur toute la largeur : sous ~420px la
     citation passe sur 2 lignes (texte cadré à l'écran plutôt que
     rétréci) — le panneau doit rester assez haut pour que l'horloge
     (ancrée en haut) et la citation (ancrée en bas) ne se chevauchent
     jamais. Bug réel trouvé et corrigé pendant les tests à 390px. */
  .auto-home-hero-media { min-height: 86px; }
  .auto-home-hero-quote { max-width: 100%; padding-right: 4px; }
}

/* ---------- KPI sombres, grandes icônes colorées ---------- */
.auto-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.auto-kpi-card {
  display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 140%);
  border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 14px; cursor: pointer;
  box-shadow: var(--shadow-soft); transition: transform var(--motion-fast,.15s) ease, border-color var(--motion-fast,.15s) ease;
}
.auto-kpi-card:hover { transform: translateY(-1px); }
.auto-kpi-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
/* Grandes icônes colorées (~2x la taille précédente) — seul porteur de
   couleur forte sur la carte, jamais un fond plein coloré (consigne
   explicite : cartes KPI sombres, la couleur vit dans l'icône). */
.auto-kpi-ico {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex: none;
}
.auto-kpi-value { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.auto-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.auto-kpi-card--blue .auto-kpi-ico { background: var(--accent-blue-dim); color: var(--accent-blue); box-shadow: 0 0 16px rgba(46,107,255,.22); }
.auto-kpi-card--blue:hover { border-color: var(--accent-blue); }
.auto-kpi-card--cyan .auto-kpi-ico { background: var(--accent-cyan-dim); color: var(--accent-cyan); box-shadow: 0 0 16px rgba(41,211,240,.22); }
.auto-kpi-card--cyan:hover { border-color: var(--accent-cyan); }
.auto-kpi-card--green .auto-kpi-ico { background: var(--accent-green-dim); color: var(--accent-green); box-shadow: 0 0 16px rgba(33,227,160,.22); }
.auto-kpi-card--green:hover { border-color: var(--accent-green); }
.auto-kpi-card--orange .auto-kpi-ico { background: var(--accent-orange-dim); color: var(--accent-orange); box-shadow: 0 0 16px rgba(245,165,36,.22); }
.auto-kpi-card--orange:hover { border-color: var(--accent-orange); }
@media (max-width: 700px) { .auto-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Grille principale 75/25 (compacte) ---------- */
/* CSS Grid partage la hauteur d'une même ligne (row) entre TOUTES les
   colonnes qui l'occupent — avec seulement `order` + `grid-column`,
   trois items empilés en colonne 2 (tâches/clients/documents) se
   seraient retrouvés forcés sur des lignes dont la hauteur dépend du
   calendrier en colonne 1 (bien plus haut), les poussant très bas au
   lieu de s'empiler à la suite les uns des autres. Solution : les 4
   blocs de la colonne latérale sont regroupés dans UN SEUL item de
   grille (`.auto-home-side-stack`), qui devient son propre conteneur
   flex empilé sur bureau (indépendant de la hauteur du calendrier) —
   et redevient `display: contents` sur mobile pour que ses enfants
   rejoignent le flux principal et prennent chacun leur propre `order`
   (séquence mobile inchangée : calendrier → tâches → clients à
   rappeler → documents à préparer → activité récente/dossiers
   incomplets → évolution possible). */
.auto-home-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.auto-home-calendar { order: 1; }
.auto-home-side-stack { display: contents; }
.auto-home-tasks { order: 2; }
.auto-home-tocall { order: 3; }
.auto-home-docs { order: 4; }
.auto-home-recent-incomplete { order: 5; }
.auto-home-evolution { order: 6; }
@media (min-width: 1001px) {
  .auto-home-grid { grid-template-columns: 3fr 1fr; grid-template-rows: auto auto; }
  .auto-home-calendar { grid-column: 1; grid-row: 1; }
  .auto-home-recent-incomplete { grid-column: 1; grid-row: 2; }
  .auto-home-side-stack {
    display: flex; flex-direction: column; gap: 14px;
    grid-column: 2; grid-row: 1 / span 2;
  }
}
/* min-width:0 sur tout item de grille contenant le calendrier — sans
   cela, un item de grille refuse par défaut de rétrécir sous la largeur
   minimale de son contenu (grille 7 colonnes du calendrier), ce qui
   forcerait toute la page en défilement horizontal au lieu de laisser
   le planning défiler seul (overflow-x:auto déjà en place). */
.auto-home-grid > *, .auto-home-side-stack > * { min-width: 0; }

.auto-panel-card {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 150%);
  border: 1px solid rgba(41,211,240,.30); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
}
.auto-panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.auto-panel-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.auto-panel-head-row .auto-panel-title { margin: 0; }
.auto-panel-title-ico { display: inline-flex; color: var(--accent-cyan); font-size: 16px; }
.auto-panel-title-ico--coral { color: var(--accent-coral); }
.auto-panel-title-ico--green { color: var(--accent-green); }
.auto-panel-title-ico--orange { color: var(--accent-orange); }

.auto-home-bottom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .auto-home-bottom-pair { grid-template-columns: 1fr; } }

/* ---------- Sélecteur de vue du calendrier (Semaine/Jour/Mois), à
   droite de l'en-tête (voir .auto-panel-head-row) ---------- */
.auto-cal-viewtabs { display: inline-flex; gap: 3px; background: var(--surface-1); border-radius: 9px; padding: 3px; flex: none; }
.auto-cal-viewtab {
  font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 7px;
  border: none; background: none; color: var(--text-tertiary); cursor: pointer;
}
.auto-cal-viewtab.is-active { background: var(--accent-blue); color: #fff; cursor: default; }
.auto-cal-viewtab:disabled { cursor: not-allowed; opacity: .5; }
.auto-cal-viewtab:not(:disabled):hover { color: var(--text-primary); }
.auto-cal-viewtab:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* ---------- Colonne latérale : cartes génériques (compactes) ---------- */
.auto-side-card {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 150%);
  border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.auto-side-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.auto-side-card-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 6px; }

.auto-side-list { display: flex; flex-direction: column; gap: 6px; }
.auto-side-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 7px 9px;
}
.auto-side-row-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--accent-cyan-dim); color: var(--accent-cyan);
}
.auto-side-row-avatar--cyan { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.auto-side-row-avatar--orange { background: var(--accent-orange-dim); color: var(--accent-orange); }
.auto-side-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.auto-side-row-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-side-row-sub { font-size: 10.5px; color: var(--text-tertiary); }
.auto-side-row-accent-ico { flex: none; font-size: 18px; }
.auto-side-row-accent-ico--green { color: var(--accent-green); }
.auto-side-row-btn {
  flex: none; font-family: inherit; font-size: 10px; font-weight: 700; color: var(--accent-cyan);
  background: var(--accent-cyan-dim); border: 1px solid rgba(41,211,240,.3); border-radius: 7px;
  padding: 5px 9px; cursor: pointer;
}
.auto-side-row-btn:hover { background: rgba(41,211,240,.24); }
.auto-side-row-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* ---------- Icônes colorées génériques (lignes activité/tâches) ---------- */
.auto-row-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-right: 7px; vertical-align: -2px; }
.auto-row-ico--blue { color: var(--accent-blue); }
.auto-row-ico--cyan { color: var(--accent-cyan); }
.auto-row-ico--green { color: var(--accent-green); }
.auto-row-ico--orange { color: var(--accent-orange); }
.auto-row-ico--coral { color: var(--accent-coral); }
.auto-row-ico--gray { color: var(--text-tertiary); }

/* ---------- Tâches du jour — visible, JAMAIS interactif ---------- */
.auto-task-list { display: flex; flex-direction: column; gap: 3px; }
.auto-task-row { display: flex; align-items: center; gap: 8px; padding: 5px 3px; opacity: .82; }
.auto-task-check {
  width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--text-tertiary);
  background: transparent; flex: none;
}
.auto-task-row .auto-row-ico { margin-right: 0; font-size: 14px; }
.auto-task-label { font-size: 12px; color: var(--text-secondary); line-height: 1.3; }
.auto-task-note { font-size: 10px; color: var(--text-tertiary); font-style: italic; margin: 6px 0 0; }

/* ---------- Mini-carte "Évolution possible" ---------- */
.auto-evolution-card { background: linear-gradient(150deg, var(--accent-cyan-dim) 0%, var(--surface-1) 130%); border-color: rgba(41,211,240,.34); }
.auto-evolution-text { font-size: 11.5px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.35; }
.auto-evolution-cta {
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--command-bg); background: var(--accent-cyan);
  border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; width: 100%;
}
.auto-evolution-cta:hover { filter: brightness(1.08); }
.auto-evolution-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- CALENDRIER HEBDOMADAIRE (core/week-calendar.js) ---------- */
.week-cal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.week-cal-period { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
/* A3 — bouton "Aujourd'hui" clairement identifiable, distinct des
   trois autres boutons de navigation (verts comme partout ailleurs
   dans le Cockpit) : fond turquoise plein, cohérent avec l'accent du
   panneau calendrier. */
.btn-action-ready--today { background: var(--accent-cyan); color: var(--command-bg); }
.btn-action-ready--today:hover { background: var(--accent-cyan); filter: brightness(1.08); }
.week-cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.week-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-tertiary); }
.week-cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.week-cal-dot--confirmed { background: var(--accent-blue); }
.week-cal-dot--ready { background: var(--accent-green); }
.week-cal-dot--toprepare { background: var(--accent-orange); }
.week-cal-dot--incomplete { background: var(--accent-coral); }
.week-cal-dot--cancelled { background: var(--text-tertiary); }
.week-cal-empty { font-size: 11px; color: var(--text-tertiary); font-style: italic; }

/* ---------- Variante planning (véritable grille horaire, ≥900px) ---------- */
.week-cal-timegrid { display: none; }
.week-cal-timegrid-scroll { overflow-x: auto; }
.week-cal-timegrid-headrow, .week-cal-timegrid-body {
  display: grid; grid-template-columns: 46px repeat(7, minmax(84px, 1fr)); gap: 5px;
  min-width: calc(46px + 7 * 84px + 6 * 5px);
}
.week-cal-timegrid-headrow { margin-bottom: 5px; }
.week-cal-hourgutter-spacer { }
.week-cal-daycol-head {
  text-align: center; padding: 5px 3px 6px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid transparent;
}
.week-cal-daycol-name { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-primary); }
.week-cal-daycol-date { display: block; font-size: 9.5px; color: var(--text-tertiary); margin-top: 1px; }
.week-cal-daycol-head.is-today { background: var(--accent-cyan-dim); border-color: rgba(41,211,240,.5); }
.week-cal-daycol-head.is-weekend:not(.is-today) { opacity: .68; }
.week-cal-daycol-head .week-cal-today-tag { display: inline-block; margin-top: 3px; }

.week-cal-hourgutter { position: relative; }
.week-cal-hour-label { position: absolute; left: 0; right: 4px; transform: translateY(-50%); font-size: 9.5px; color: var(--text-tertiary); text-align: right; }
.week-cal-daycol {
  position: relative; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 8px;
  /* Ligne discrète toutes les heures — 46px doit rester synchronisé
     avec ROW_HEIGHT (core/week-calendar.js). */
  background-image: repeating-linear-gradient(to bottom, var(--border-subtle) 0, var(--border-subtle) 1px, transparent 1px, transparent 46px);
}
.week-cal-daycol.is-today { background-color: rgba(41,211,240,.06); border-color: rgba(41,211,240,.4); }
.week-cal-daycol.is-weekend:not(.is-today) { opacity: .8; }

.week-cal-timeblock {
  position: absolute; font-family: inherit; text-align: left; cursor: pointer; overflow: hidden;
  border: none; border-left: 3px solid var(--border-subtle); border-radius: 6px;
  background: var(--surface-1); padding: 3px 6px; box-shadow: 0 1px 5px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 1px; z-index: 1;
}
.week-cal-timeblock:hover, .week-cal-timeblock:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; z-index: 2; }
.week-cal-timeblock-head { display: flex; align-items: center; gap: 3px; }
.week-cal-timeblock-ico { font-size: 9px; flex: none; color: var(--text-tertiary); }
.week-cal-timeblock-time { font-weight: 700; color: var(--text-primary); font-size: 10.5px; line-height: 1; }
.week-cal-timeblock-client { color: var(--text-primary); font-size: 10px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-cal-timeblock-detail { color: var(--text-tertiary); font-size: 9px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-cal-timeblock--confirmed { border-left-color: var(--accent-blue); }
.week-cal-timeblock--ready { border-left-color: var(--accent-green); }
.week-cal-timeblock--toprepare { border-left-color: var(--accent-orange); }
.week-cal-timeblock--incomplete { border-left-color: var(--accent-coral); }
.week-cal-timeblock--cancelled { border-left-color: var(--text-tertiary); opacity: .6; }

/* ---------- Variante liste (mobile, <900px) — inchangée dans son
   principe : un rendez-vous = une carte, empilée par jour. ---------- */
.week-cal-list { display: flex; flex-direction: column; gap: 10px; }
.week-cal-day { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; min-height: 60px; }
/* A3 — journée actuelle mise en évidence. */
.week-cal-day--today { background: var(--accent-cyan-dim); border-color: rgba(41,211,240,.42); }
.week-cal-day-head { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.week-cal-day--today .week-cal-day-head { color: var(--text-primary); }
.week-cal-today-tag {
  background: var(--accent-cyan); color: var(--command-bg); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px;
}
.week-cal-appt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font-family: inherit;
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-subtle);
  border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; cursor: pointer; font-size: 11.5px; color: var(--text-secondary);
  transition: border-color var(--motion-fast, .15s) ease;
}
.week-cal-appt:last-child { margin-bottom: 0; }
.week-cal-appt:hover { border-color: var(--accent-cyan); }
.week-cal-appt:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.week-cal-appt-ico { font-size: 10px; color: var(--text-tertiary); margin-right: 4px; }
/* Couleur = information (état du dossier), jamais une simple
   décoration — un seul accent par carte, en plus du badge de statut
   textuel déjà affiché (jamais remplacé). */
.week-cal-appt--confirmed { border-left-color: var(--accent-blue); }
.week-cal-appt--ready { border-left-color: var(--accent-green); }
.week-cal-appt--toprepare { border-left-color: var(--accent-orange); }
.week-cal-appt--incomplete { border-left-color: var(--accent-coral); }
.week-cal-appt--cancelled { border-left-color: var(--text-tertiary); opacity: .55; }
.week-cal-appt-time { font-weight: 700; color: var(--text-primary); }
.week-cal-appt-client { color: var(--text-primary); }
.week-cal-appt-detail { color: var(--text-tertiary); font-size: 10.5px; }
@media (max-width: 400px) {
  .week-cal-appt { padding: 10px; min-height: 44px; justify-content: center; }
  .week-cal-header { gap: 8px; }
  .week-cal-header .btn-action-ready { flex: 1 1 auto; text-align: center; }
}

/* Bascule planning ↔ liste — placée en dernier volontairement : les
   deux sélecteurs (.week-cal-timegrid, .week-cal-list) ont la même
   spécificité que leurs règles de base ci-dessus, donc seule la
   position dans le fichier détermine laquelle gagne en cascade CSS.
   Doit toujours rester après les deux blocs de règles de base. */
@media (min-width: 900px) {
  .week-cal-timegrid { display: block; }
  .week-cal-list { display: none; }
}

/* ---------- BADGES DE MATURITÉ (core/maturity-badges.js) ---------- */
.maturity-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; }
.maturity-badge--operationnel { background: var(--accent-green-dim); color: var(--accent-green); }
.maturity-badge--demo { background: rgba(140,124,255,.16); color: var(--accent-violet); }
.maturity-badge--a-activer { background: var(--accent-orange-dim); color: var(--accent-orange); }

/* ---------- AUTOMATISATIONS EN ACTION (core/automations-showcase.js) ---------- */
.auto-showcase-header { margin-bottom: 22px; }
.auto-showcase-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }

/* B2 — parcours automatisé global : piste horizontale responsive,
   bascule en progression verticale sous 900px (une seule règle média,
   sans JS supplémentaire). */
.auto-parcours { margin-bottom: 26px; }
.auto-parcours-track { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; }
.auto-parcours-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 14px 12px; flex: 1 1 130px; min-width: 110px;
}
.auto-parcours-ico {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent-cyan-dim); color: var(--accent-cyan);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.auto-parcours-label { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.auto-parcours-arrow { color: var(--text-tertiary); font-size: 16px; flex: none; display: flex; }
@media (max-width: 900px) {
  .auto-parcours-track { flex-direction: column; align-items: stretch; }
  .auto-parcours-step { flex-direction: row; text-align: left; justify-content: flex-start; flex: none; width: 100%; }
  .auto-parcours-arrow { align-self: center; transform: rotate(90deg); }
}

.auto-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.auto-active-section { margin-bottom: 30px; }
.auto-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.auto-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; font-family: inherit;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-1) 140%);
  border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px;
  width: 100%; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
}
/* B3 — automatisations opérationnelles : accent vert, cohérent avec
   .maturity-badge--operationnel. */
.auto-card--active { border-color: rgba(33,227,160,.28); }
.auto-card--clickable { cursor: pointer; transition: border-color var(--motion-fast,.15s) ease, transform var(--motion-fast,.15s) ease; }
.auto-card--clickable:hover { border-color: var(--accent-green); transform: translateY(-2px); }
.auto-card--clickable:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
/* B5 — évolutions possibles : style visuellement distinct (fond plus
   discret, contour violet en pointillés, jamais un curseur cliquable). */
.auto-card--upcoming { background: var(--surface-1); border: 1px dashed rgba(140,124,255,.32); cursor: default; }
.auto-card-ico {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.auto-card--active .auto-card-ico { background: var(--accent-green-dim); color: var(--accent-green); }
.auto-card--upcoming .auto-card-ico { background: rgba(140,124,255,.14); color: var(--accent-violet); }
.auto-card-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.25; }
.auto-card-text { font-size: 12.5px; color: var(--text-secondary); margin: 0; line-height: 1.4; }
.auto-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.auto-card-indicator { font-size: 11px; color: var(--text-tertiary); }
.auto-upcoming-section { margin-bottom: 10px; }
.auto-upcoming-note { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; margin: 14px 0 0; }

/* ---------- PERFORMANCE (modules/performance-demandes) ---------- */
.perf-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.perf-chart { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; }
.perf-bar-row { display: grid; grid-template-columns: 1.1fr 2fr auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.perf-bar-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-bar-track { background: var(--surface-1); border-radius: 6px; height: 8px; overflow: hidden; }
.perf-bar-fill { background: var(--accent-cyan); height: 100%; border-radius: 6px; }
.perf-bar-count { color: var(--text-primary); font-weight: 700; text-align: right; min-width: 20px; }

/* 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; }
}