/* ══════════════════════════════════════════════════════════════════════
   CRM COMMERCIAL - Surface dediee
   ----------------------------------------------------------------------
   Le CRM assume une identite differente du reste de l'admin : canvas
   sombre, panneaux givres (glassmorphism), halos colores. Le bleu
   institutionnel EduCycle reste la couleur d'accent, porte par la
   sidebar qui borde la page.
   Tout est scope sous .ec-crm : aucune autre page n'est affectee.
   ══════════════════════════════════════════════════════════════════════ */

.ec-crm {
    /* Direction A : bleu nuit institutionnel, version claire. Le canvas est un
       bleu nuit (pas un noir) pour appartenir a la meme famille que la sidebar
       et refermer la couture. */
    --crm-canvas:      #182338;
    --crm-canvas-2:    #1f2c45;
    --crm-ink:         #eef2fa;
    --crm-ink-soft:    #c2cde0;
    --crm-muted:       #93a2bd;
    --crm-line:        rgba(255, 255, 255, .11);
    --crm-line-strong: rgba(255, 255, 255, .20);
    --crm-accent:      #5b9bf5;
    --crm-accent-soft: rgba(91, 155, 245, .18);
    /* Couleurs semantiques (distinctes de l'accent bleu). */
    --crm-good:        #3ec98a;
    --crm-warn:        #f0a63c;
    --crm-bad:         #f2708a;

    position: relative;
    isolation: isolate;
    /* Deborde le padding de .ec-content (2rem) sur les cotes et en haut.
       PAS en bas : une marge negative basse remonterait le pied de page dans
       la zone sombre, ou son texte gris fonce devient illisible. */
    margin: -2rem -2rem 0;
    padding: 32px 32px 72px;
    min-height: 100vh;
    background: var(--crm-canvas);
    color: var(--crm-ink);
}

/* Halo ambiant UNIQUE et bleu : une seule teinte, pas de patchwork multicolore. */
.ec-crm::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 560px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 70% at 12% 0%, rgba(59, 122, 232, .30), transparent 72%);
}

/* Reconciliation de la couture : sur les pages CRM uniquement, la sidebar
   descend vers le bleu nuit du canvas pour que les deux surfaces se repondent. */
body.ec-crm-page .ec-sidebar {
    background: linear-gradient(180deg, #1c4f9c 0%, #163f80 55%, #12315f 100%);
}

.ec-crm a { color: var(--crm-accent); }
.ec-crm .text-muted,
.ec-crm .ec-crm-muted { color: var(--crm-muted) !important; }

/* ── Titres ──────────────────────────────────────────────────────── */
.ec-crm-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: #fff;
}
.ec-crm-sub { margin: 6px 0 0; font-size: .87rem; color: var(--crm-muted); }
.ec-crm-eyebrow {
    margin: 0;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--crm-muted);
}
.ec-crm-panel-title {
    margin: 0 0 16px;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

/* ── Verre ───────────────────────────────────────────────────────── */
.ec-glass {
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--crm-line);
    border-radius: var(--ec-radius-xl);
    box-shadow: 0 18px 46px rgba(3, 8, 20, .45);
}
.ec-glass-soft {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid var(--crm-line);
    border-radius: var(--ec-radius-lg);
}
.ec-glass-pad { padding: 22px 24px; }

/* Repli si backdrop-filter indisponible (appareils modestes). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ec-glass, .ec-glass-soft { background: var(--crm-canvas-2); }
}

/* ── Statistiques ────────────────────────────────────────────────── */
.ec-crm-kpi {
    padding: 18px 20px;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s ease;
}
.ec-crm-kpi:hover { transform: translateY(-2px); border-color: var(--crm-line-strong); }
.ec-crm-kpi-label { font-size: .72rem; font-weight: 600; color: var(--crm-muted); letter-spacing: .02em; }
.ec-crm-kpi-value {
    margin-top: 6px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
}
/* KPI semantiques : la couleur dit la nature avant meme la lecture. */
.ec-crm-kpi-value.is-good { color: var(--crm-good); }
.ec-crm-kpi-value.is-warn { color: var(--crm-warn); }
.ec-crm-kpi-value.is-bad  { color: var(--crm-bad); }

/* ── Etapes du pipeline (Direction A) ────────────────────────────────
   Reduit de 9 teintes arbitraires a 5 familles qui VEULENT dire quelque
   chose. La progression reste dans le bleu (2 intensites : engagement
   puis en-produit) ; les exceptions sortent du bleu parce qu'elles
   demandent une lecture immediate :
     gris   = froid / neutre (prospect, expire)
     bleu   = en cours (contacte, demo, essai)
     ambre  = action attendue (relance, negociation)
     vert   = gagne (client)
     rouge  = perdu
   Le libelle porte l'etape precise ; la couleur porte la categorie. */
.ec-stage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    background: var(--stage-bg);
    color: var(--stage-ink);
    border: 1px solid var(--stage-bd);
}
.ec-stage::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--stage);
    box-shadow: 0 0 10px var(--stage-bd);
}

/* Valeurs explicites (pas de color-mix) : support navigateur plus large. */
/* Gris : froid / neutre */
.ec-stage--prospect       { --stage: #8595ad; --stage-ink: #c8d1e0; --stage-bg: rgba(133,149,173,.16); --stage-bd: rgba(133,149,173,.34); }
.ec-stage--expire         { --stage: #6b7688; --stage-ink: #a4afc0; --stage-bg: rgba(107,118,136,.16); --stage-bd: rgba(107,118,136,.34); }
/* Bleu clair : engagement initial */
.ec-stage--contacte       { --stage: #6faaf6; --stage-ink: #cfe0fb; --stage-bg: rgba(111,170,246,.16); --stage-bd: rgba(111,170,246,.36); }
.ec-stage--demo-planifiee { --stage: #6faaf6; --stage-ink: #cfe0fb; --stage-bg: rgba(111,170,246,.16); --stage-bd: rgba(111,170,246,.36); }
/* Bleu fort : en produit / avance */
.ec-stage--demo-realisee  { --stage: #3f82ea; --stage-ink: #bcd6fb; --stage-bg: rgba(63,130,234,.18);  --stage-bd: rgba(63,130,234,.40); }
.ec-stage--essai          { --stage: #3f82ea; --stage-ink: #bcd6fb; --stage-bg: rgba(63,130,234,.18);  --stage-bd: rgba(63,130,234,.40); }
/* Ambre : action attendue */
.ec-stage--relance        { --stage: #f0a63c; --stage-ink: #f7d9a6; --stage-bg: rgba(240,166,60,.16);  --stage-bd: rgba(240,166,60,.40); }
.ec-stage--negociation    { --stage: #f0a63c; --stage-ink: #f7d9a6; --stage-bg: rgba(240,166,60,.16);  --stage-bd: rgba(240,166,60,.40); }
/* Vert : gagne */
.ec-stage--client         { --stage: #3ec98a; --stage-ink: #b6ecd2; --stage-bg: rgba(62,201,138,.16);  --stage-bd: rgba(62,201,138,.36); }
/* Rouge : perdu */
.ec-stage--perdu          { --stage: #f2708a; --stage-ink: #fbcdd6; --stage-bg: rgba(242,112,138,.15); --stage-bd: rgba(242,112,138,.36); }

button.ec-stage, a.ec-stage {
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22,1,.36,1), filter .2s ease, box-shadow .25s ease;
}
button.ec-stage:hover, a.ec-stage:hover { transform: translateY(-1px); filter: brightness(1.18); }
button.ec-stage:focus-visible, a.ec-stage:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--stage-bd);
}
.ec-stage.is-current { box-shadow: inset 0 0 0 1px var(--stage); cursor: default; }

/* ── Pilules d'action ────────────────────────────────────────────── */
.ec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    color: var(--crm-ink-soft);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--crm-line);
    transition: transform .35s cubic-bezier(.22,1,.36,1), background .2s ease,
                border-color .2s ease, color .2s ease;
}
.ec-pill:hover {
    transform: translateY(-1px);
    color: #fff;
    background: var(--crm-accent-soft);
    border-color: rgba(77, 143, 245, .55);
}
.ec-pill:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--crm-accent-soft); }
.ec-pill-danger:hover  { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.5); color: #fecaca; }
.ec-pill-wa:hover      { background: rgba(52,211,153,.16);  border-color: rgba(52,211,153,.5);  color: #a7f3d0; }
.ec-pill-icon { padding: 7px 10px; }

.ec-btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    font-size: .83rem;
    font-weight: 650;
    color: #fff;
    cursor: pointer;
    background: var(--crm-accent);
    box-shadow: 0 8px 20px rgba(59, 122, 232, .34);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .2s ease;
}
.ec-btn-solid:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(77,143,245,.42); }
.ec-btn-solid:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--crm-accent-soft); }

/* ── Onglets ─────────────────────────────────────────────────────── */
.ec-crm-tabs { display: flex; gap: 8px; border: 0; margin-bottom: 16px; }
.ec-crm-tabs .nav-link {
    border: 1px solid var(--crm-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 650;
    color: var(--crm-ink-soft);
    background: rgba(255, 255, 255, .04);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ec-crm-tabs .nav-link:hover { color: #fff; border-color: var(--crm-line-strong); }
.ec-crm-tabs .nav-link.active {
    color: #fff;
    background: var(--crm-accent-soft);
    border-color: rgba(77, 143, 245, .60);
}
.ec-crm-tabs .badge {
    background: rgba(255, 255, 255, .12);
    color: var(--crm-ink);
    font-weight: 700;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.ec-crm-table { width: 100%; border-collapse: collapse; font-size: .84rem; color: var(--crm-ink); }
.ec-crm-table thead th {
    text-align: left;
    padding: 0 14px 12px 0;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--crm-muted);
    border-bottom: 1px solid var(--crm-line);
}
.ec-crm-table tbody td {
    padding: 14px 14px 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    vertical-align: middle;
}
.ec-crm-table tbody tr { transition: background .2s ease; }
.ec-crm-table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.ec-crm-table tbody tr:last-child td { border-bottom: 0; }
.ec-crm-strong { font-weight: 700; color: #fff; }
.ec-crm-meta { font-size: .75rem; color: var(--crm-muted); }
.ec-crm-meta a { color: var(--crm-ink-soft); text-decoration: none; }
.ec-crm-meta a:hover { color: var(--crm-accent); }

/* ── Score ───────────────────────────────────────────────────────── */
.ec-score { font-weight: 800; letter-spacing: -.02em; }
.ec-score--tres-chaud { color: var(--crm-good); }
.ec-score--chaud      { color: var(--crm-accent); }
.ec-score--tiede      { color: var(--crm-warn); }
.ec-score--froid      { color: var(--crm-muted); }

/* ── Formulaires sur fond sombre ─────────────────────────────────── */
.ec-crm .form-control,
.ec-crm .form-select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--crm-line);
    color: var(--crm-ink);
    border-radius: var(--ec-radius);
}
.ec-crm .form-control::placeholder { color: #7c8ca6; }
.ec-crm .form-control:focus,
.ec-crm .form-select:focus {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(77, 143, 245, .60);
    box-shadow: 0 0 0 4px var(--crm-accent-soft);
    color: #fff;
}
.ec-crm .form-select option { background: var(--crm-canvas-2); color: var(--crm-ink); }
.ec-crm .form-label { color: var(--crm-ink-soft); }
.ec-crm .form-check-input { background-color: rgba(255,255,255,.14); border-color: var(--crm-line-strong); }
.ec-crm .form-check-input:checked { background-color: var(--crm-accent); border-color: var(--crm-accent); }
.ec-crm .form-check-label { color: var(--crm-ink); }

/* ── Timeline de la sequence de relance ──────────────────────────── */
.ec-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.ec-tl::before {
    content: '';
    position: absolute;
    left: 8px; top: 14px; bottom: 14px;
    width: 2px;
    background: var(--crm-line);
}
.ec-tl-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0 11px 32px;
}
.ec-tl-dot {
    position: absolute;
    left: 2px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--crm-canvas-2);
    border: 2px solid var(--crm-line-strong);
}
.ec-tl-item.is-done .ec-tl-dot { background: #34d399; border-color: #34d399; box-shadow: 0 0 12px rgba(52,211,153,.5); }
.ec-tl-item.is-due  .ec-tl-dot { border-color: var(--crm-accent); box-shadow: 0 0 0 5px var(--crm-accent-soft); }
.ec-tl-label { font-size: .87rem; font-weight: 600; color: var(--crm-ink); }
.ec-tl-item.is-done .ec-tl-label { color: var(--crm-muted); font-weight: 500; }
.ec-tl-flag {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #bfdbfe;
    background: var(--crm-accent-soft);
}
.ec-tl-sent { font-size: .75rem; font-weight: 600; color: #34d399; white-space: nowrap; }

/* ── Fiche : en-tete signature ───────────────────────────────────── */
.ec-fiche-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600; color: var(--crm-muted);
    text-decoration: none; margin-bottom: 16px;
    transition: color .2s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.ec-fiche-back:hover { color: var(--crm-accent); transform: translateX(-2px); }
.ec-fiche-hero { padding: 28px 30px 20px; }
.ec-fiche-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ec-fiche-ident { display: flex; align-items: flex-start; gap: 18px; min-width: 0; flex: 1 1 320px; }
.ec-fiche-mono {
    flex-shrink: 0;
    width: 62px; height: 62px;
    border-radius: 18px;
    display: grid; place-items: center;
    font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
    color: #fff;
    background: var(--crm-accent);
    box-shadow: 0 10px 24px rgba(59, 122, 232, .36);
}
.ec-fiche-contact { margin: 0 0 12px; font-size: .87rem; color: var(--crm-muted); }
.ec-fiche-contact a { color: var(--crm-ink-soft); text-decoration: none; }
.ec-fiche-contact a:hover { color: var(--crm-accent); }
.ec-sep { margin: 0 7px; color: #55647d; }
.ec-fiche-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-fiche-score { text-align: right; flex: 0 0 auto; }
.ec-fiche-score-value { font-size: clamp(2.3rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.ec-fiche-score-level { margin-top: 2px; font-size: .78rem; font-weight: 700; color: var(--crm-ink); }
.ec-fiche-score-action { margin-top: 2px; font-size: .75rem; color: var(--crm-muted); max-width: 210px; }
.ec-fiche-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--crm-line);
}
.ec-fiche-steps { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.ec-fiche-select { display: flex; gap: 8px; align-items: center; }
.ec-fiche-select .form-select { flex: 1; }
.ec-fiche-help { font-size: .83rem; color: var(--crm-muted); line-height: 1.55; }
.ec-fiche-done { margin: 0; font-size: .83rem; font-weight: 600; color: #34d399; }

.ec-meta { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: .84rem; }
.ec-meta dt { color: var(--crm-muted); font-weight: 500; }
.ec-meta dd { margin: 0; text-align: right; font-weight: 650; color: var(--crm-ink); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* .ec-content passe a `64px 1rem 1.5rem` : on preserve le haut (hamburger)
       et on ne deborde pas en bas (pied de page). */
    .ec-crm { margin: 0 -1rem 0; padding: 20px 14px 48px; }
    .ec-fiche-hero { padding: 20px 18px 16px; }
    .ec-fiche-score { text-align: left; }
    .ec-fiche-score-action { max-width: none; }
    .ec-pill, .ec-btn-solid, .ec-stage { min-height: 40px; }
    .ec-crm-tabs { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-crm *, .ec-crm *::before { transition: none !important; animation: none !important; }
}