/* ============================================================================
   ESPACE CLIENT — démo vitrine du portail de pilotage (page Traçabilité).
   THÈME CLAIR : fidèle au vrai portail (fond clair, cartes blanches, accent
   indigo #4f46e5, chips pastel). Mockups = classes .ec-*.
   ============================================================================ */

/* ---------- Fenêtre = reproduction du portail ---------- */
.ec-window {
  --p-accent: #4f46e5; --p-accent2: #14b8a6;
  --p-ok: #0a8f5b; --p-warn: #b4790a; --p-danger: #e11d48;
  --p-text: #0e1b2a; --p-muted: #8a94a6;
  --p-border: #e6eaf2; --p-surface: #ffffff;
  border-radius: 16px; overflow: hidden;
  background: #f6f7fb; border: 1px solid #e3e8f0;
  box-shadow: 0 40px 100px -36px rgba(14, 27, 42, .35); color: var(--p-text);
}
.ec-window--demo { max-width: 1040px; margin: 30px auto 0; transform-origin: center; will-change: transform; backface-visibility: hidden; }
.ec-window-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #eef1f7; border-bottom: 1px solid var(--p-border); }
.ec-dots { display: inline-flex; gap: 6px; }
.ec-dots i { width: 10px; height: 10px; border-radius: 50%; }
.ec-dots i:nth-child(1){ background: #ff5f57; } .ec-dots i:nth-child(2){ background: #febc2e; } .ec-dots i:nth-child(3){ background: #28c840; }
.ec-url { flex: 1; text-align: center; font-size: 11.5px; color: var(--p-muted); background: #fff; border: 1px solid var(--p-border); border-radius: 7px; padding: 5px 10px; max-width: 300px; margin: 0 auto; }

/* ---------- Dashboard : sidebar + main ---------- */
.ec-dash { display: grid; grid-template-columns: 198px 1fr; min-height: 430px; }
.ec-side { border-right: 1px solid var(--p-border); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; background: #fff; }
.ec-side-grp { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #9aa4b8; padding: 12px 11px 5px; }
.ec-side-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: #5b6b7d; background: none; border: 0; width: 100%;
  text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; font-family: inherit;
}
.ec-side-item .material-symbols-rounded { font-size: 18px; color: #93a1b2; }
.ec-side-item:hover { background: #f1f4fa; color: var(--p-text); }
.ec-side-item.is-active { background: #eef0ff; color: var(--p-accent); }
.ec-side-item.is-active .material-symbols-rounded { color: var(--p-accent); }
.ec-side-badge { margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--p-danger); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }

/* Main + panneaux (interactif) */
.ec-main { position: relative; height: 482px; overflow-y: auto; background: #f6f7fb; scrollbar-width: thin; scrollbar-color: rgba(14, 27, 42, .18) transparent; }
.ec-main::-webkit-scrollbar { width: 8px; }
.ec-main::-webkit-scrollbar-thumb { background: rgba(14, 27, 42, .16); border-radius: 4px; }
.ec-main::-webkit-scrollbar-thumb:hover { background: rgba(14, 27, 42, .28); }
.ec-main::-webkit-scrollbar-track { background: transparent; }
.ec-panel { display: none; padding: 18px; flex-direction: column; gap: 14px; animation: ec-fade .28s ease; }
.ec-panel.is-active { display: flex; }
@keyframes ec-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ec-phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ec-phead strong { font-size: 14px; font-weight: 700; color: var(--p-text); }
.ec-phead span.sub { font-size: 11px; color: var(--p-muted); }
.ec-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #e7f7ef; color: #0a8f5b; border: 1px solid #b7e4cf; }
.ec-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: ec-blink 2s infinite; }
@keyframes ec-blink { 0%,100%{ opacity: 1; } 50%{ opacity: .3; } }

/* KPIs (cartes blanches, comme le vrai portail) */
.ec-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ec-kpi { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 13px; padding: 12px; position: relative; box-shadow: 0 1px 2px rgba(14, 27, 42, .04); }
.ec-kpi .material-symbols-rounded { font-size: 18px; color: var(--p-accent); }
.ec-kpi.is-warn .material-symbols-rounded { color: #d97706; }
.ec-kpi.is-ok .material-symbols-rounded { color: #0a8f5b; }
.ec-kpi-lbl { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); font-weight: 700; margin: 6px 0 4px; }
.ec-kpi-val { display: block; font-size: 16px; font-weight: 800; color: var(--p-text); }
.ec-kpi-sub { font-size: 9.5px; color: var(--p-muted); }

.ec-sec-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); font-weight: 800; }
.ec-rows { display: flex; flex-direction: column; gap: 8px; }
.ec-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; background: var(--p-surface); border: 1px solid var(--p-border); box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-date { width: 40px; min-width: 40px; text-align: center; border-radius: 8px; padding: 5px 0; background: #eef0ff; border: 1px solid #dfe3ff; }
.ec-date b { display: block; font-size: 14px; font-weight: 800; color: var(--p-accent); line-height: 1; }
.ec-date span { font-size: 8.5px; text-transform: uppercase; color: var(--p-muted); font-weight: 700; }
.ec-row-tx { flex: 1; min-width: 0; }
.ec-row-tx strong { display: block; font-size: 12px; font-weight: 700; color: var(--p-text); }
.ec-row-tx span { font-size: 10.5px; color: var(--p-muted); }
.ec-chip { padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.ec-chip.ok { background: #e7f7ef; color: #0a8f5b; border: 1px solid #b7e4cf; }
.ec-chip.plan { background: #eef0ff; color: #4f46e5; border: 1px solid #dfe3ff; }
.ec-chip.due { background: #fdf0db; color: #b4790a; border: 1px solid #f5dfae; }
.ec-chip.late { background: #fdecec; color: #dc2626; border: 1px solid #f6c6c6; }
.ec-geo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; background: #e7f7ef; color: #0a8f5b; border: 1px solid #b7e4cf; white-space: nowrap; }
.ec-geo .material-symbols-rounded { font-size: 12px; }

/* Factures */
.ec-finance-hero { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-radius: 13px; background: linear-gradient(135deg, #eef0ff, #e6f7f4); border: 1px solid #dfe3ff; }
.ec-finance-hero span { font-size: 11px; color: #4f46e5; } .ec-finance-hero b { display: block; font-size: 22px; font-weight: 900; color: var(--p-text); }
.ec-finance-hero .ec-chip { font-size: 10px; }
.ec-inv { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; background: var(--p-surface); border: 1px solid var(--p-border); box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-inv .material-symbols-rounded.f { color: var(--p-accent); font-size: 19px; }
.ec-inv-tx { flex: 1; min-width: 0; }
.ec-inv-tx strong { display: block; font-size: 12px; color: var(--p-text); }
.ec-inv-tx span { font-size: 10px; color: var(--p-muted); }
.ec-inv-amt { font-size: 12.5px; font-weight: 800; color: var(--p-text); }

/* ---------- Sections fonctionnalités (chrome clair de la page) ---------- */
.ec-feature .container { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.ec-feature--rev .ec-feature-visual { order: -1; }
.ec-flist { display: flex; flex-direction: column; gap: 11px; }
.ec-flist li { display: flex; gap: 11px; align-items: flex-start; color: #475569; font-size: .98rem; line-height: 1.5; }
.ec-flist .material-symbols-rounded { color: #0E7490; font-size: 21px; flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ec-window--demo { margin-top: 16px; }
  .ec-kpis { grid-template-columns: repeat(2, 1fr); }
  .ec-feature .container { grid-template-columns: 1fr; gap: 30px; }
  .ec-feature--rev .ec-feature-visual { order: 0; }
}
@media (max-width: 640px) {
  .ec-dash { grid-template-columns: 1fr; }
  .ec-side { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; border-right: 0; border-bottom: 1px solid var(--p-border); }
  .ec-side-grp { display: none; }
  .ec-side-item { white-space: nowrap; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ec-live::before { animation: none; } }

/* ════════ DÉMO ENRICHIE — chrome d'app + panneaux détaillés ════════ */
.ec-dash { min-height: 500px; }

/* Sidebar : carte utilisateur, sélecteur de site, footer */
.ec-usercard { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; background: #f8f9fc; border: 1px solid var(--p-border); margin-bottom: 6px; }
.ec-avatar { width: 30px; height: 30px; min-width: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #14b8a6); }
.ec-avatar.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.ec-uc-tx { flex: 1; min-width: 0; }
.ec-uc-tx strong { display: block; font-size: 11.5px; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-uc-tx span { font-size: 9.5px; color: var(--p-muted); }
.ec-usercard > .material-symbols-rounded { font-size: 16px; color: var(--p-muted); }
.ec-switch { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; background: #eef0ff; border: 1px solid #dfe3ff; font-size: 11px; font-weight: 600; color: #4f46e5; margin-bottom: 8px; }
.ec-switch .material-symbols-rounded { font-size: 15px; }
.ec-switch .sm { margin-left: auto; font-size: 16px; opacity: .7; }
.ec-side-foot { margin-top: auto; display: flex; gap: 4px; padding: 10px 2px 0; border-top: 1px solid var(--p-border); }
.ec-side-foot .material-symbols-rounded { font-size: 17px; color: var(--p-muted); padding: 6px; border-radius: 8px; }

/* Barre d'app (top-bar) */
.ec-mainwrap { display: flex; flex-direction: column; min-width: 0; }
.ec-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--p-border); background: #fff; }
.ec-tb-title { font-size: 13px; font-weight: 700; color: var(--p-text); }
.ec-tb-actions { display: flex; align-items: center; gap: 10px; }
.ec-tb-search { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--p-muted); background: #f1f4fa; border: 1px solid var(--p-border); border-radius: 8px; padding: 6px 11px; }
.ec-tb-search .material-symbols-rounded { font-size: 15px; }
.ec-tb-ic { position: relative; color: #5b6b7d; display: grid; place-items: center; }
.ec-tb-ic .material-symbols-rounded { font-size: 19px; }
.ec-tb-ic .ec-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--p-danger); border: 1.5px solid #fff; }

/* Cockpit tableau de bord (2 colonnes) */
.ec-cockpit { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.ec-ck-main, .ec-ck-aside { display: flex; flex-direction: column; gap: 11px; }
.ec-alert { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: #fdf3e0; border: 1px solid #f5dfae; }
.ec-alert > .material-symbols-rounded { color: #d97706; font-size: 19px; }
.ec-alert div { flex: 1; } .ec-alert strong { display: block; font-size: 12px; color: var(--p-text); } .ec-alert span { font-size: 10.5px; color: #8a6a2f; }
.ec-asidecard { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 12px; box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-ac-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); font-weight: 800; }
.ec-ac-amt { font-size: 19px; font-weight: 900; color: var(--p-text); margin: 6px 0; } .ec-ac-amt span { font-size: 10px; color: var(--p-muted); font-weight: 600; margin-left: 5px; }
.ec-ac-row { font-size: 10.5px; color: #4a5a6d; } .ec-ac-row b { color: var(--p-text); }
.ec-ac-doc { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #4a5a6d; margin-top: 9px; } .ec-ac-doc .material-symbols-rounded { font-size: 16px; color: var(--p-accent); } .ec-ac-doc .ec-chip { margin-left: auto; }

/* Calendrier (planning) */
.ec-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ec-cal-day { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 9px; padding: 8px 6px; min-height: 104px; }
.ec-cal-day .d { font-size: 9px; text-transform: uppercase; color: var(--p-muted); font-weight: 700; }
.ec-cal-day .n { font-size: 13px; font-weight: 800; color: var(--p-text); margin-bottom: 7px; }
.ec-cal-day.today { border-color: #b3baff; background: #eef0ff; }
.ec-ev { font-size: 8.5px; font-weight: 700; padding: 4px 5px; border-radius: 6px; margin-bottom: 4px; line-height: 1.15; }
.ec-ev.b { background: #eef0ff; color: #4f46e5; } .ec-ev.g { background: #e7f7ef; color: #0a8f5b; }

/* Graphique (analytics) */
.ec-chart { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 13px; padding: 14px 14px 8px; box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-chart svg { width: 100%; height: 132px; display: block; }
.ec-chart-x { display: flex; justify-content: space-between; margin-top: 6px; }
.ec-chart-x span { font-size: 9px; color: var(--p-muted); font-weight: 600; }

/* Analytics enrichi : graphique détaillé + contrôle qualité + avis */
.ec-chart--rich svg { height: 150px; }
.ec-chart-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ec-chart-val { font-size: 20px; font-weight: 900; color: var(--p-text); }
.ec-chart-val small { font-size: 11px; color: var(--p-muted); font-weight: 700; }
.ec-chart-trend { font-size: 10px; font-weight: 700; color: #0a8f5b; margin-left: 7px; }
.ec-chart-leg { font-size: 10px; color: var(--p-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ec-chart-leg i { width: 14px; height: 3px; border-radius: 2px; background: #6366f1; }
.ec-an2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-anbox { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-anbox-h { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--p-muted); }
.ec-anbox-h .material-symbols-rounded { font-size: 15px; color: var(--p-accent); }
.ec-qcz { display: grid; grid-template-columns: 58px 1fr 26px; align-items: center; gap: 8px; font-size: 10.5px; color: #4a5a6d; }
.ec-qcbar { height: 6px; border-radius: 3px; background: #edf0f6; overflow: hidden; }
.ec-qcbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #10b981); }
.ec-qcz b { font-size: 11px; font-weight: 800; color: #0a8f5b; text-align: right; }
.ec-qcverdict { margin-top: 2px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: #0a8f5b; background: #e7f7ef; border: 1px solid #b7e4cf; border-radius: 8px; padding: 7px 9px; }
.ec-qcverdict .material-symbols-rounded { font-size: 14px; }
.ec-revc { background: #fbfcfe; border: 1px solid var(--p-border); border-radius: 10px; padding: 9px 10px; }
.ec-revc-st { color: #f5a623; font-size: 10px; letter-spacing: 1px; }
.ec-revc p { margin: 4px 0 0; font-size: 10.5px; line-height: 1.4; color: #2a3a4d; }
.ec-revc-who { font-size: 9px; color: var(--p-muted); display: block; margin-top: 5px; }
@media (max-width: 640px) { .ec-an2 { grid-template-columns: 1fr; } }

/* ════════ Boutons & actions interactives (démo) ════════ */
.ec-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 8px 13px; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background .15s, border-color .15s, filter .15s; white-space: nowrap; }
.ec-btn .material-symbols-rounded { font-size: 16px; }
.ec-btn-primary-sm { background: linear-gradient(135deg, #6366f1, #14b8a6); color: #fff; box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .5); }
.ec-btn-primary-sm:hover { filter: brightness(1.06); }
.ec-btn-ghost-sm { background: #fff; border-color: var(--p-border); color: #4a5a6d; }
.ec-btn-ghost-sm:hover { background: #f1f4fa; }
.ec-iconbtn { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid var(--p-border); color: #5b6b7d; cursor: pointer; transition: background .15s, color .15s; }
.ec-iconbtn:hover { background: #eef0ff; color: var(--p-accent); }
.ec-iconbtn .material-symbols-rounded { font-size: 17px; }
.ec-rowbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--p-border); color: #4f46e5; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ec-rowbtn:hover { background: #eef0ff; border-color: #dfe3ff; }
.ec-rowbtn .material-symbols-rounded { font-size: 14px; }

/* ════════ Planning enrichi ════════ */
.ec-seg { display: inline-flex; background: #eef1f7; border: 1px solid var(--p-border); border-radius: 9px; padding: 2px; }
.ec-seg button { border: 0; background: none; color: #5b6b7d; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.ec-seg button.is-on { background: #fff; color: var(--p-accent); box-shadow: 0 1px 3px rgba(14, 27, 42, .12); }
.ec-planstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ec-planstat { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 11px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-planstat b { font-size: 16px; font-weight: 800; color: var(--p-text); }
.ec-planstat b small { font-size: 10px; color: var(--p-muted); font-weight: 700; }
.ec-planstat span { font-size: 9.5px; color: var(--p-muted); display: block; margin-top: 2px; }
.ec-ev.v { background: #f1e9fe; color: #7c3aed; }
.ec-cal-day .ec-ev .t { opacity: .75; font-weight: 800; margin-right: 3px; }
.ec-callegend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ec-callegend span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--p-muted); font-weight: 600; }
.ec-callegend i { width: 9px; height: 9px; border-radius: 3px; }
.ec-callegend i.b { background: #6366f1; } .ec-callegend i.g { background: #10b981; } .ec-callegend i.v { background: #8b5cf6; }
.ec-row-act { display: flex; gap: 6px; margin-left: 4px; }
.ec-row .ec-stars { color: #f5a623; font-size: 10px; letter-spacing: 1px; }

/* ════════ Factures enrichies (interactif) ════════ */
.ec-finance-hero { flex-wrap: wrap; gap: 12px; }
.ec-fh-sub { display: block; font-size: 10px; color: #4f46e5; opacity: .8; margin-top: 3px; }
.ec-fh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-inv-act { display: flex; gap: 6px; margin-left: 6px; }
.ec-paybar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 13px; border-radius: 11px; background: #fbfcfe; border: 1px solid var(--p-border); }
.ec-paybar .lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); margin-right: 2px; }
.ec-paychip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #4a5a6d; background: #fff; border: 1px solid var(--p-border); border-radius: 7px; padding: 5px 9px; }
.ec-paychip .material-symbols-rounded { font-size: 14px; color: var(--p-accent); }
.ec-paychip.on { color: #0a8f5b; border-color: #b7e4cf; background: #e7f7ef; }
.ec-paychip.on .material-symbols-rounded { color: #0a8f5b; }

/* ════════ FIDÉLITÉ PORTAIL v2 — scope, groupes, vue d'ensemble, rings ════════ */
/* Sélecteur de portée (sbnav-scope du vrai portail) */
.ec-scope { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 11px; background: #fff; border: 1px solid var(--p-border); cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(14, 27, 42, .04); }
.ec-scope > .material-symbols-rounded { font-size: 17px; color: var(--p-accent); }
.ec-scope-id { flex: 1; min-width: 0; }
.ec-scope-id strong { display: block; font-size: 11.5px; color: var(--p-text); }
.ec-scope-id small { font-size: 9.5px; color: var(--p-muted); }
.ec-scope .caret { font-size: 15px; color: var(--p-muted); }
/* Déconnexion (bas de sidebar, comme le réel) */
.ec-logout { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; border: 1px solid #f6c6c6; background: #fff; color: #dc2626; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; }
.ec-logout .material-symbols-rounded { font-size: 15px; }

/* Vue d'ensemble — hero dégradé + blobs (ov-hero du vrai portail) */
.ec-ov-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 16px 18px; background: linear-gradient(120deg, #eef0ff 0%, #f0fbf7 100%); border: 1px solid #e2e6f8; }
.ec-ov-hero::before, .ec-ov-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(34px); pointer-events: none; }
.ec-ov-hero::before { width: 160px; height: 160px; right: -30px; top: -60px; background: rgba(99, 102, 241, .16); }
.ec-ov-hero::after { width: 140px; height: 140px; left: 30%; bottom: -70px; background: rgba(20, 184, 166, .14); }
.ec-ov-date { font-size: 9.5px; color: var(--p-muted); font-weight: 600; text-transform: capitalize; }
.ec-ov-title { position: relative; font-size: 16px; font-weight: 800; color: var(--p-text); margin-top: 2px; }
.ec-ov-sum { position: relative; font-size: 10.5px; color: #4a5a6d; margin-top: 4px; max-width: 52ch; line-height: 1.45; }
.ec-ov-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: #fdf3e0; border: 1px solid #f5dfae; color: #b4790a; font-size: 10px; font-weight: 700; }
.ec-ov-chip .material-symbols-rounded { font-size: 13px; }

/* KPIs à mini-visuels (ov-kpi) */
.ec-ov-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ec-ov-kpi { position: relative; background: #fff; border: 1px solid var(--p-border); border-radius: 13px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(14, 27, 42, .04); }
.ec-ov-lbl { display: flex; align-items: center; justify-content: space-between; font-size: 9px; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); font-weight: 700; }
.ec-ov-lbl .material-symbols-rounded { font-size: 15px; color: var(--p-accent); }
.ec-ov-lbl .material-symbols-rounded.blue { color: #2563eb; }
.ec-ov-lbl .material-symbols-rounded.amber { color: #d97706; }
.ec-ov-val { font-size: 16px; font-weight: 800; color: var(--p-text); margin-top: 5px; }
.ec-ov-val small { font-size: 10px; color: var(--p-muted); font-weight: 700; }
.ec-ov-trend { font-size: 9px; font-weight: 800; margin-left: 5px; }
.ec-ov-trend.up { color: #0a8f5b; }
.ec-ov-stars { display: block; color: #f5a623; font-size: 10px; letter-spacing: 1.5px; margin-top: 4px; }
.ec-ov-spark { display: block; width: 100%; height: 24px; margin-top: 6px; }
.ec-ring { --ring-c: var(--p-accent); --ring-p: 75%; position: absolute; right: 11px; bottom: 11px; width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--ring-c) 0 var(--ring-p), #edf0f6 var(--ring-p)); display: grid; place-items: center; }
.ec-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.ec-ring b { position: relative; font-size: 8.5px; font-weight: 800; color: var(--p-text); }
.ec-ring.g { --ring-c: #10b981; } .ec-ring.bl { --ring-c: #2563eb; } .ec-ring.or { --ring-c: #d97706; } .ec-ring.vi { --ring-c: #8b5cf6; }

/* Rangée de rings compacts (page Qualité, fidèle aux KPIs du réel) */
.ec-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ec-ringcard { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--p-border); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(14, 27, 42, .03); }
.ec-ringcard .ec-ring { position: static; width: 38px; height: 38px; flex: none; }
.ec-ringcard-tx small { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--p-muted); font-weight: 700; }
.ec-ringcard-tx b { font-size: 13px; font-weight: 800; color: var(--p-text); }
.ec-ringcard-tx b .u { font-size: 9px; color: var(--p-muted); }
/* Infos & accès */
.ec-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 1000px) { .ec-cockpit { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ec-usercard, .ec-switch, .ec-side-foot { display: none; }
  .ec-tb-search { display: none; }
  .ec-cal { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 96px; overflow-x: auto; }
}