/* ==========================================================================
   MODULE PROSPECTION - MEDEF54
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
    --prospection-orange: #fd7e14;
    --prospection-purple: #6f42c1;
}

/* --------------------------------------------------------------------------
   KPI Cards
   -------------------------------------------------------------------------- */
.kpi-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card-clickable {
    cursor: pointer;
}

.kpi-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* État sélectionné des KPI utilisés comme filtres (cliquables sur la fiche cible) */
.kpi-card--selected {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 1px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.18);
}

.kpi-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-title {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Pipeline Widget
   -------------------------------------------------------------------------- */
.pipeline-container {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-height: 180px;
    padding-top: 1rem;
}

.pipeline-container-lg {
    min-height: 260px;
    gap: 0.75rem;
    padding-top: 1.25rem;
}

.pipeline-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pipeline-stage:hover {
    background-color: var(--bs-light);
}

.pipeline-count {
    margin-bottom: 0.5rem;
}

.pipeline-label {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.pipeline-bar {
    width: 100%;
    height: 80px;
    background-color: var(--bs-gray-200);
    border-radius: 0.25rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.pipeline-bar-lg {
    height: 140px;
}

.pipeline-label-lg {
    font-size: 0.875rem;
    font-weight: 500;
}

.pipeline-bar-fill {
    width: 100%;
    border-radius: 0.25rem;
    transition: height 0.3s ease-out;
}

.pipeline-arrow {
    display: flex;
    align-items: center;
    color: var(--bs-gray-400);
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .pipeline-container {
        flex-wrap: wrap;
    }
    .pipeline-stage {
        flex: 0 0 calc(33.333% - 0.5rem);
    }
    .pipeline-arrow {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Timeline d'interactions
   -------------------------------------------------------------------------- */
.timeline {
    position: relative;
    padding-left: 2.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bs-primary), var(--bs-gray-300));
}

.timeline::after {
    content: '';
    position: absolute;
    left: calc(0.875rem - 2px);
    top: -3px;
    width: 6px;
    height: 14px;
    background-color: var(--bs-primary);
    border-radius: 3px 3px 0 0;
    z-index: 1;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -2.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content {
    background: var(--bs-gray-100);
    padding: 1rem;
    border-radius: 0.5rem;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.75rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent var(--bs-gray-100) transparent transparent;
}

.timeline-content:hover {
    background: var(--bs-gray-200);
}

.timeline-marker.bg-appel,
.tdi-marker.bg-appel            { background-color: #0d6efd; } /* bleu Bootstrap        */
.timeline-marker.bg-email,
.tdi-marker.bg-email            { background-color: #0dcaf0; } /* teal clair             */
.timeline-marker.bg-rdv,
.tdi-marker.bg-rdv              { background-color: #198754; } /* vert                   */
.timeline-marker.bg-evenement,
.tdi-marker.bg-evenement        { background-color: #6f42c1; } /* violet                 */
.timeline-marker.bg-courrier,
.tdi-marker.bg-courrier         { background-color: #6c757d; } /* gris                   */
.timeline-marker.bg-linkedin,
.tdi-marker.bg-linkedin         { background-color: #0077b5; } /* bleu LinkedIn          */
.timeline-marker.bg-changement-statut,
.tdi-marker.bg-changement-statut{ background-color: #fd7e14; } /* orange                 */
.timeline-marker.bg-campagne,
.tdi-marker.bg-campagne         { background-color: #d63384; } /* rose Brevo             */
.timeline-marker.bg-echange-email,
.tdi-marker.bg-echange-email    { background-color: #0078d4; } /* bleu Exchange          */

/* --------------------------------------------------------------------------
   Modales inline du module Prospection (sans FluentDialog).
   Sans styling explicite, le FluentCard interne devient invisible
   sur l'overlay sombre en dark mode (P0 résolu avril 2026).
   -------------------------------------------------------------------------- */
.prospection-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);   /* contraste plus marqué que 0.35 */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prospection-modal-card {
    background: var(--neutral-layer-floating, var(--neutral-layer-1, #ffffff)) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--neutral-stroke-rest, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 20px !important;
}

[data-bs-theme="dark"] .prospection-modal-card {
    background: #2b2b2b !important;
    border-color: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   ProspectDetail — Row 1 (Entreprise + Notes à gauche / Contacts à droite)
   Mobile-first : tout empilé verticalement.
   Desktop ≥ 1600px : 2 colonnes — gauche = Entreprise + Notes empilés,
   droite = Contacts qui s'étire sur toute la hauteur (Entreprise + Notes).
   En laptop (768-1599) on garde l'empilement pour que les boutons
   "Enregistrer" / "Ajouter un contact" aient la largeur complète.
   -------------------------------------------------------------------------- */
.prospect-detail-row1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.prospect-detail-left-col,
.prospect-detail-right-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Card "Suivi commercial" : 2 colonnes (Référent + Suiveurs) côte à côte au-dessus
   de 600px, empilées sur écran étroit. L'historique des changements reste hors grille. */
.suivi-commercial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .suivi-commercial-grid {
        grid-template-columns: 1fr;
    }
}

/* Mentions @user dans les notes de suivi (rendu Markdown) */
.note-mention {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    background: color-mix(in srgb, #5b21b6 14%, transparent);
    color: #5b21b6;
    font-weight: 600;
    font-size: 0.82em;
}

/* Markdown rendu compact dans les notes */
.note-markdown p { margin: 0 0 4px 0; }
.note-markdown p:last-child { margin-bottom: 0; }
.note-markdown ul, .note-markdown ol { margin: 4px 0; padding-left: 22px; }
.note-markdown blockquote {
    margin: 4px 0;
    padding: 2px 10px;
    border-left: 2px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
    font-style: italic;
}
.note-markdown code {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--neutral-layer-3);
    font-size: 0.88em;
}

/* Ligne de tâche cliquable (lance l'exécution) */
.tache-row {
    transition: filter 0.12s ease, transform 0.12s ease;
}

.tache-row:hover {
    filter: brightness(1.15);
}

.tache-row:active {
    transform: translateY(1px);
}

@media (min-width: 1600px) {
    .prospect-detail-row1 {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   Grilles auto-fit responsives — remplace Bootstrap row/col-md-6 col-lg-4
   par un layout natif CSS qui s'adapte à toutes les largeurs sans breakpoint
   manuel. Utilisé par CiblesList, ActionsBoard, ProspectionDashboard.
   -------------------------------------------------------------------------- */
.cibles-grid {
    display: grid;
    /* auto-fill (vs auto-fit) garde les pistes vides → cards bornées
       à ~480px max pour préserver le rendu desktop (3-4 par ligne en wide) */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-content: flex-start;
}

@media (min-width: 1600px) {
    .cibles-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

/* Haute résolution : 4 cards larges plutôt que 5-6 étroites — les libellés de
   KPI explicites ont besoin de place. Largeur bornée pour qu'en 4K les cards
   ne deviennent pas démesurées. */
@media (min-width: 1900px) {
    .cibles-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 2400px;
    }
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

/* --------------------------------------------------------------------------
   CibleEdit — alignement à droite
   La bande de KPI globale est bornée à 1400px (pages Facturation) : sur la
   fiche cible elle doit atteindre le bord droit comme les cards en dessous.
   Et le .page-header global ajoute 20px de padding horizontal que les cards
   n'ont pas, d'où un bouton « Retour à la liste » en retrait.
   -------------------------------------------------------------------------- */
.kpi-strip--full {
    max-width: none;
}

.cible-page > .page-header {
    padding-left: 0;
    padding-right: 0;
}

/* En-tête de colonne cliquable pilotant le tri serveur. */
.cible-tri-entete {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

/* Intitulé de la liste et champ de recherche groupés à gauche. */
.cible-liste-entete {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Filtres de la liste des cibles : tuiles de KPI cliquables + interrupteur.
   Les tuiles sont bornées pour ne pas s'étaler sur toute la largeur. */
.cibles-filtres {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.cibles-kpi-strip {
    margin-bottom: 0;
    flex: 1;
    min-width: 300px;
    max-width: 640px;
}

/* --------------------------------------------------------------------------
   CiblesList — teinte de fond par type de cible
   En filtre « Toutes » les deux natures de cible se mélangent : la teinte et
   le liseré permettent de les distinguer sans lire le badge.
   -------------------------------------------------------------------------- */
.cible-card {
    height: 100%;
    cursor: pointer;
    position: relative;
    border-left: 4px solid transparent;
}

.cible-card--prospection {
    background: #eff6ff !important;
    border-left-color: #1e40af;
}

.cible-card--animation {
    background: #f6f2ff !important;
    border-left-color: #6d28d9;
}

[data-bs-theme="dark"] .cible-card--prospection {
    background: #1b2740 !important;
    border-left-color: #60a5fa;
}

[data-bs-theme="dark"] .cible-card--animation {
    background: #29203f !important;
    border-left-color: #a78bfa;
}

/* Badge du type de cible : pastel en clair, teinte translucide en sombre, où le pastel
   donnait une pastille quasi blanche (signalement 447). */
.badge-type-cible--prospection { background: #dbeafe; color: #1e40af; }
.badge-type-cible--animation   { background: #ede9fe; color: #6d28d9; }

[data-bs-theme="dark"] .badge-type-cible--prospection { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-bs-theme="dark"] .badge-type-cible--animation   { background: rgba(139,92,246,0.18); color: #c4b5fd; }

/* Badge de statut de prospection : StatutBadge pose les deux jeux de couleurs de
   CouleursProspection, le thème choisit lequel alimente le badge. */
.badge-statut.statut-prospection {
    --badge-fond: var(--statut-fond-clair);
    --badge-texte: var(--statut-texte-clair);
    --badge-bordure: transparent;
}

[data-bs-theme="dark"] .badge-statut.statut-prospection {
    --badge-fond: var(--statut-fond-sombre);
    --badge-texte: var(--statut-texte-sombre);
}

/* Titre + description doivent réserver la place de la colonne de badges
   ancrée en absolu (jusqu'à 3 badges empilés), sinon la description passe
   dessous. min-height = hauteur de cette colonne. */
.cible-card-entete {
    padding-right: 116px;
    min-height: 66px;
}

/* Le nom de la cible reprend la typographie de l'ancien intitulé « Cible »,
   devenu inutile. */
.cible-card-titre {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.25;
    color: var(--neutral-foreground-rest);
}

.cible-card-description {
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
    line-height: 1.4;
    margin-top: 3px;
}

/* Bandeau de KPI : les libellés explicites tiennent sur deux lignes, la
   hauteur réservée garde l'alignement d'une card à l'autre. */
.cible-kpis {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 8px;
}

.cible-kpi {
    flex: 1;
    text-align: center;
    padding: 2px 4px;
}

.cible-kpi + .cible-kpi {
    border-left: 1px solid var(--neutral-stroke-rest);
}

.cible-kpi-valeur {
    font-size: 1.15rem;
    font-weight: 700;
}

.cible-kpi-libelle {
    font-size: 0.72rem;
    line-height: 1.2;
    min-height: 2.4em;
    color: var(--neutral-foreground-hint);
    hyphens: auto;
}

/* --------------------------------------------------------------------------
   CibleEdit — Mode triage : layout 2 colonnes
   Réduit la hauteur totale en plaçant Fiche PM à gauche et le champ éditable
   (statut/action/effectif) à droite. Empilement vertical sur mobile.
   -------------------------------------------------------------------------- */
.triage-2cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

@media (min-width: 1100px) {
    .triage-2cols {
        grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Liste d'entreprises — masquage des colonnes secondaires en laptop
   Quatre colonnes disparaissent quand la grille est trop étroite pour ses
   douze colonnes : Secteur, Localisation, Référent et Prochaine action. Les
   autres se resserrent à leur largeur utile : à 1366px, menu ouvert, la grille
   dispose de 940px, colonne de sélection (88px) comprise.

   Le seuil porte sur la largeur de la grille, pas sur celle de la fenêtre : le
   gabarit complet demande 1460px avec la colonne de sélection, que la fenêtre
   n'offre, menu ouvert, qu'à partir de 1870px environ. Calé sur le palier de
   1600px, il laissait la colonne Statut sortir de la grille et s'y faire rogner
   jusque-là — et en dessous aussi, tant que les largeurs n'étaient pas resserrées.

   Elles gardent leur piste, ramenée à 0 : FluentDataGrid pose un `grid-column`
   explicite sur chaque cellule (1→N), donc retirer une piste du milieu ne
   décale pas les cellules — elles restent sur leur index et retombent sur des
   pistes implicites, d'où colonnes fantômes et alignement cassé.

   Le gabarit lui-même reste porté par GridTemplateColumns dans
   ListeEntreprisesProspection : il n'est pas redéclaré ici, seules les
   largeurs variables le sont. C'est ce qui permet aux colonnes conditionnelles
   (« Cible » hors fiche cible, « Probabilité » hors animation) et à la colonne
   de sélection — ajoutée en tête par ListePage — de ne rien avoir à répercuter.
   -------------------------------------------------------------------------- */
table.prospects-grid {
    --col-cible: minmax(105px, 0.6fr);
    --col-secteur: minmax(120px, 1fr);
    --col-localisation: minmax(110px, 0.7fr);
    --col-probabilite: 130px;
    --col-contact: minmax(130px, 0.9fr);
    --col-icone: 76px;
    --col-referent: minmax(120px, 0.7fr);
    --col-prochaine: minmax(110px, 0.7fr);
}

.list-page-grid-container:has(> table.prospects-grid) {
    container: grille-prospects / inline-size;
}

@container grille-prospects (max-width: 1459.98px) {
    .prospects-grid .col-hide-laptop {
        display: none !important;
    }

    table.prospects-grid {
        --col-cible: minmax(100px, 0.6fr);
        --col-secteur: 0px;
        --col-localisation: 0px;
        --col-probabilite: 105px;
        --col-contact: minmax(104px, 0.9fr);
        --col-icone: 72px;
        --col-referent: 0px;
        --col-prochaine: 0px;
    }
}

/* Repère d'une fiche que personne ne suit : elle sort du portefeuille, du forecast
   et du reporting par référent tant qu'elle n'est pas affectée. */
.badge-sans-referent {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* Options du dialog de prochaine étape : des cartes cliquables plutôt que des radios nues,
   parce que chacune déplie ses propres champs une fois choisie. */
.etape-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    background: var(--neutral-layer-1);
}

.etape-option:hover {
    border-color: var(--accent-fill-rest);
}

.etape-option--active {
    border: 2px solid var(--accent-fill-rest);
    background: var(--neutral-layer-2);
}

/* Clôture proposée mais fermée aux non-référents : visible pour expliquer, pas cliquable. */
.etape-option--indisponible {
    cursor: not-allowed;
    opacity: 0.6;
}

.etape-option--indisponible:hover {
    border-color: var(--neutral-stroke-rest);
}

.etape-option__titre {
    font-size: 0.9rem;
    font-weight: 600;
}

.etape-option__sous {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.etape-option__aide {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--neutral-foreground-hint);
    margin-top: 8px;
}

/* Fiche engagée sans action à venir. Même gabarit que « Sans référent », teinte plus soutenue :
   une fiche hors radar est un signal plus fort qu'un simple manque d'affectation. */
.badge-hors-radar {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

/* Cellule « Statut » des listes : le repère d'un groupe déjà adhérent, puis le statut saisi.
   Sur une ligne, sans retour : la hauteur de rangée des grilles est fixe. */
.cellule-statut {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    max-width: 100%;
    white-space: nowrap;
}

.cellule-statut .badge-groupe-adherent {
    flex: none;
}

/* Cellule « Référent » des listes : le curseur signale qu'un clic droit y fait quelque chose.
   Sans cet indice, le raccourci resterait invisible — seule l'infobulle le mentionne. */
.cellule-referent {
    cursor: context-menu;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Nombre de suiveurs en plus du référent, discret : l'information vit surtout dans l'infobulle. */
.compteur-suiveurs {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* Suiveur listé dans le dialog de suivi commercial. */
.suiveur-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    background: var(--neutral-layer-3);
    border: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Timeline duale centrée (ProspectDetail)
   -------------------------------------------------------------------------- */
.timeline-dual {
    position: relative;
}

.timeline-dual::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bs-primary), var(--bs-gray-300));
    z-index: 0;
}

.timeline-dual::after {
    content: '';
    position: absolute;
    left: calc(50% - 3px);
    top: -3px;
    width: 6px;
    height: 14px;
    background-color: var(--bs-primary);
    border-radius: 3px 3px 0 0;
    z-index: 2;
}

/* Chaque ligne = 3 colonnes : gauche | marqueur 44px | droite */
.tdi {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    margin-bottom: 10px;
    position: relative;
}

.tdi-left  { padding-right: 10px; display: flex; justify-content: flex-end; align-items: flex-start; }
.tdi-right { padding-left: 10px;  display: flex; justify-content: flex-start; align-items: flex-start; }

.tdi-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6px;
    z-index: 1;
}

.tdi-marker {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.tdi-content {
    background: var(--bs-gray-100);
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 100%;
    transition: background 0.15s;
}

.tdi-content:hover { background: var(--bs-gray-200); }

/* Flèche pointant vers le marqueur */
.tdi-content-left {
    position: relative;
}
.tdi-content-left::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 10px;
    border-width: 7px 0 7px 7px;
    border-style: solid;
    border-color: transparent transparent transparent var(--bs-gray-100);
}
.tdi-content-left:hover::after {
    border-left-color: var(--bs-gray-200);
}

.tdi-content-right {
    position: relative;
}
.tdi-content-right::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 10px;
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent var(--bs-gray-100) transparent transparent;
}
.tdi-content-right:hover::before {
    border-right-color: var(--bs-gray-200);
}

@media (max-width: 768px) {
    /* Mobile : tout à gauche, marqueur à droite de chaque item */
    .timeline-dual::before { left: calc(2rem + 2px); }
    .tdi { grid-template-columns: 2rem 1fr; }
    .tdi-left,
    .tdi-right { grid-column: 2; padding-left: 10px; padding-right: 0; justify-content: flex-start; }
    .tdi-center { grid-column: 1; grid-row: 1; }
    .tdi-content-left::after,
    .tdi-content-right::before { display: none; }
}

/* --------------------------------------------------------------------------
   Historique des échanges — Menu contextuel + chips de filtres rapides
   -------------------------------------------------------------------------- */
.historique-ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.historique-ctx-menu {
    position: fixed;
    z-index: 1001;
    min-width: 240px;
    max-width: 380px;
    background: var(--neutral-layer-floating, var(--neutral-layer-1, #ffffff));
    border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.historique-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.historique-ctx-item .historique-icone {
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

.historique-ctx-item span {
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

.historique-ctx-item strong {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.historique-ctx-item:hover {
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

[data-bs-theme="dark"] .historique-ctx-menu {
    background: #2b2b2b;
    border-color: rgba(255, 255, 255, 0.12);
}

.historique-filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 6%, transparent);
    border-radius: 6px;
}

.historique-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--accent-fill-rest);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    max-width: 320px;
}

.historique-chip .historique-icone {
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.historique-chip > :not(.historique-icone):not(button) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historique-chip button {
    background: transparent;
    border: none;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 6px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historique-chip button:hover {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
}

.historique-chip-clear {
    background: transparent;
    border: none;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: underline;
    padding: 2px 6px;
}

.historique-chip-clear:hover {
    color: var(--accent-fill-rest);
}

[data-bs-theme="dark"] .historique-chip {
    background: var(--neutral-layer-2);
}

/* --------------------------------------------------------------------------
   Statut Badges
   -------------------------------------------------------------------------- */
.badge.bg-orange {
    background-color: var(--prospection-orange) !important;
    color: white;
}

.badge.bg-purple {
    background-color: var(--prospection-purple) !important;
    color: white;
}

/* --------------------------------------------------------------------------
   Prospect Filters
   -------------------------------------------------------------------------- */
.prospect-filters {
    background-color: var(--bs-gray-100);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.prospect-filters .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary);
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Actions Board
   -------------------------------------------------------------------------- */
.action-card {
    border-left: 4px solid var(--bs-primary);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.action-card:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-card.action-retard {
    border-left-color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.05);
}

.action-card.action-today {
    border-left-color: var(--bs-warning);
}

.action-card .action-date {
    font-size: 0.75rem;
    font-weight: 600;
}

.action-card .action-date.text-danger {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   Cible Preview
   -------------------------------------------------------------------------- */
.cible-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.cible-preview-stat {
    background: var(--bs-gray-100);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.cible-preview-stat .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.cible-preview-stat .label {
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

/* --------------------------------------------------------------------------
   Contact Principal Card
   -------------------------------------------------------------------------- */
.contact-card .contact-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Tableaux de prospects
   -------------------------------------------------------------------------- */
.table-prospects tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

.table-prospects tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.table-prospects .prospect-name {
    font-weight: 600;
}

.table-prospects .prospect-siren {
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.table-prospects tr.row-retard {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
}

.table-prospects tr.row-retard:hover {
    background-color: rgba(var(--bs-warning-rgb), 0.2);
}

/* --------------------------------------------------------------------------
   Partenaires
   -------------------------------------------------------------------------- */
.partenariat-card {
    border-left: 4px solid var(--bs-info);
}

.partenariat-card.type-enseignement { border-left-color: var(--bs-success); }
.partenariat-card.type-institutionnel { border-left-color: var(--bs-primary); }
.partenariat-card.type-sponsor { border-left-color: var(--prospection-orange); }
.partenariat-card.type-prestataire { border-left-color: var(--bs-secondary); }
.partenariat-card.inactif { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Cibles List
   -------------------------------------------------------------------------- */
.cible-progress {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bs-gray-200);
}

.cible-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

/* --------------------------------------------------------------------------
   Responsive — convention 3 paliers MEDEF54
   - Mobile  < 768px
   - Laptop  768-1599px  ← compaction KPI/Pipeline pour tenir en hauteur
   - Desktop ≥ 1600px    (rendu d'origine, ne PAS dégrader)
   -------------------------------------------------------------------------- */

/* Laptop : compaction des KPI cards Dashboard (évite scroll vertical à 768px haut) */
@media (max-width: 1599.98px) {
    .kpi-value {
        font-size: 1.75rem;        /* desktop = 2.5rem */
        line-height: 1.1;
    }
    .kpi-icon {
        font-size: 1.5rem;         /* desktop = 2rem */
    }
    .kpi-title {
        font-size: 0.75rem;        /* desktop = 0.875rem */
    }
    .kpi-card .card-body {
        padding: 12px;             /* Bootstrap default = 16px */
    }
    .pipeline-container-lg {
        min-height: 200px;         /* desktop = 260px */
    }
    .pipeline-bar-lg {
        height: 100px;             /* desktop = 140px */
    }
}

@media (max-width: 992px) {
    .timeline {
        padding-left: 2rem;
    }
    .timeline::before {
        left: 0.625rem;
    }
    .timeline::after {
        left: calc(0.625rem - 2px);
    }
    .timeline-marker {
        left: -2rem;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.625rem;
    }
}

@media (max-width: 576px) {
    .pipeline-container {
        flex-direction: column;
        align-items: stretch;
    }
    .pipeline-stage {
        flex-direction: row;
        justify-content: space-between;
    }
    .pipeline-bar {
        width: 100px;
        height: 1.5rem;
        flex-direction: row;
        align-items: stretch;
    }
    .pipeline-bar-fill {
        height: 100%;
    }
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .timeline-content {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}
[data-bs-theme="dark"] .timeline-content::before {
    border-right-color: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .timeline-content:hover {
    background: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .tdi-content {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}
[data-bs-theme="dark"] .tdi-content:hover {
    background: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .tdi-content-left::after {
    border-left-color: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .tdi-content-left:hover::after {
    border-left-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .tdi-content-right::before {
    border-right-color: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .tdi-content-right:hover::before {
    border-right-color: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .timeline-dual::before {
    background: linear-gradient(to bottom, var(--bs-primary), var(--neutral-stroke-rest));
}
[data-bs-theme="dark"] .timeline::before {
    background: linear-gradient(to bottom, var(--bs-primary), var(--neutral-stroke-rest));
}

[data-bs-theme="dark"] .prospect-filters {
    background-color: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .cible-preview-stat {
    background: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .pipeline-bar {
    background-color: var(--neutral-layer-2);
}
[data-bs-theme="dark"] .cible-progress {
    background-color: var(--neutral-layer-2);
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
    .pipeline-container,
    .kpi-card-clickable,
    .action-card {
        break-inside: avoid;
    }
    .btn, .nav-tabs, .pagination {
        display: none !important;
    }
    .timeline-content {
        background: white;
        border: 1px solid var(--bs-gray-300);
    }
}

/* --------------------------------------------------------------------------
   ProspectDetail — Entête sticky + chips de statut
   Slice #73 — sticky header avec mini-stats pipeline et chips cliquables
   pour matérialiser la phase du cycle.
   -------------------------------------------------------------------------- */
.prospect-detail-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--neutral-layer-1, #ffffff);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    padding: 8px 20px 10px 20px;
    margin: 0 -20px 8px -20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    width: calc(100% + 40px);
    box-sizing: border-box;
}

.prospect-detail-header__row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.prospect-detail-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.prospect-detail-header__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.prospect-detail-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.prospect-detail-header__title fluent-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.prospect-detail-header__ministats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.prospect-detail-header__ministats > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.prospect-detail-header__ministats .ministat-label {
    color: var(--neutral-foreground-hint);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.prospect-detail-header__ministats .ministat-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.prospect-detail-header__ministats .ministat-sep {
    color: var(--neutral-stroke-divider-rest, #d1d5db);
}

/* Activité commerciale + (Contacts + Tâches) côte à côte (slice post-#77) */
/* Fiche prospect — trois colonnes sur grand écran : Contacts (25 %), Tâches (25 %) et
   Activité commerciale (50 %), cette dernière portant la timeline, de loin le contenu le plus
   dense. Le placement est explicite plutôt que dicté par l'ordre du DOM : celui-ci garde
   l'activité en premier, qui est le contenu principal de la fiche, donc l'ordre de tabulation
   et de lecture d'écran reste cohérent. */
.prospect-activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
    align-items: start;
    width: 100%;
}

.prospect-activity-grid > .prospect-detail-contacts { grid-column: 1; grid-row: 1; }
.prospect-activity-grid > .prospect-carte-taches    { grid-column: 2; grid-row: 1; }
.prospect-activity-grid > .prospect-carte-activite  { grid-column: 3; grid-row: 1; }

/* En-tête de l'activité : le titre garde sa ligne, les filtres passent dessous quand la
   colonne se resserre. Un FluentStack ne se replie pas et écrasait le titre à la place. */
.prospect-activite-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.prospect-activite-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.prospect-activite-filtres select {
    min-width: 140px;
}

/* Palier intermédiaire : trois colonnes deviendraient illisibles. Contacts et Tâches se
   partagent la première rangée, l'activité prend toute la largeur en dessous. */
@media (max-width: 1599.98px) {
    .prospect-activity-grid {
        grid-template-columns: 1fr 1fr;
    }

    .prospect-activity-grid > .prospect-detail-contacts { grid-column: 1; grid-row: 1; }
    .prospect-activity-grid > .prospect-carte-taches    { grid-column: 2; grid-row: 1; }
    .prospect-activity-grid > .prospect-carte-activite  { grid-column: 1 / -1; grid-row: 2; }
}

/* Sous 1200 px, tout s'empile dans l'ordre du DOM : activité, contacts, tâches. */
@media (max-width: 1199.98px) {
    .prospect-activity-grid {
        grid-template-columns: 1fr;
    }

    .prospect-activity-grid > .prospect-detail-contacts,
    .prospect-activity-grid > .prospect-carte-taches,
    .prospect-activity-grid > .prospect-carte-activite {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Rangée des actions contextuelles (sous le stepper, dépendantes du statut) */
.prospect-detail-header__motif {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2);
    font-size: var(--taille-s);
    color: var(--texte-secondaire);
}

.prospect-detail-header__contextual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--neutral-stroke-divider-rest, #e5e7eb);
    flex-wrap: wrap;
}

/* Workflow stepper réutilisé sur ProspectDetail (slice #73 refactor) */
.prospect-workflow {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Les libellés d'étape sont des phrases (jusqu'à 52 caractères) : on annule le `nowrap` global
   d'app.css au profit d'un bloc de largeur fixe sur 3 lignes. Surcharge locale uniquement —
   les règles `.workflow-*` d'app.css sont partagées avec adhésion, campagne, réunion, événement
   et problématique, et ne doivent pas bouger. Le padding latéral vaut la demi-largeur d'un
   libellé : il absorbe le débordement des étapes d'extrémité, centrées sur leur cercle. */
.prospect-workflow__stepper {
    --step-label-w: 152px;
    flex: 1 1 760px;
    min-width: 0;
    padding: 12px calc(var(--step-label-w) / 2) 68px calc(var(--step-label-w) / 2);
}

.prospect-workflow__stepper .workflow-step-label {
    white-space: normal;
    width: var(--step-label-w);
    text-align: center;
    line-height: 1.2;
    overflow-wrap: break-word;
    min-height: 3.6em;
}

/* 2e ligne : l'état réel quand l'étape regroupe plusieurs statuts (RDV planifié, accord obtenu,
   étape du dossier d'adhésion). */
.prospect-workflow__step-detail {
    display: block;
    margin-top: 2px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.workflow-step-label.rejected .prospect-workflow__step-detail {
    color: #ef4444;
}

@media (max-width: 1599.98px) {
    .prospect-workflow__stepper {
        --step-label-w: 132px;
    }
}

@media (max-width: 1199.98px) {
    .prospect-workflow__stepper {
        --step-label-w: 112px;
        flex-basis: 100%;
    }
}

/* Les cercles d'étape sont des boutons → reset visuel + curseur */
.prospect-workflow__stepper .workflow-step-circle {
    appearance: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    line-height: 1;
}

.prospect-workflow__stepper .workflow-step-circle:hover:not(:disabled) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}

.prospect-workflow__stepper .workflow-step-circle:disabled {
    cursor: default;
    opacity: 0.85;
}

/* L'étape « adhésion » n'est jamais cliquable : elle reflète le dossier administratif et non
   une transition, donc pas d'atténuation qui la ferait passer pour indisponible. */
.prospect-workflow__step--adhesion .workflow-step-circle:disabled {
    opacity: 1;
}

.prospect-workflow__branches {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    padding-top: 8px;
}

.prospect-workflow__branch-btn {
    appearance: none;
    border: 1px solid var(--neutral-stroke-rest, #d1d5db);
    background: transparent;
    color: var(--neutral-foreground-hint);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.prospect-workflow__branch-btn:hover:not(:disabled) {
    background: var(--neutral-layer-3, #f3f4f6);
    border-color: var(--neutral-stroke-strong-rest, #9ca3af);
}

.prospect-workflow__branch-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.prospect-workflow__branch-btn--active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #212529;
    font-weight: 600;
}

.prospect-workflow__branch-btn--danger:hover:not(:disabled) {
    background: rgba(209, 52, 56, 0.08);
    border-color: #d13438;
    color: #d13438;
}

.prospect-workflow__branch-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.prospect-workflow__branch-badge--danger {
    background: #d13438;
    color: white;
}

/* Rangée des chips de statut (legacy — conservée si réutilisée ailleurs) */
.statut-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.statut-chips::-webkit-scrollbar { height: 4px; }
.statut-chips::-webkit-scrollbar-thumb { background: var(--neutral-stroke-divider-rest, #d1d5db); border-radius: 2px; }

.statut-chips__separator {
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    background: var(--neutral-stroke-divider-rest, #d1d5db);
    margin: 0 4px;
}

.statut-chip {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid var(--neutral-stroke-rest, #d1d5db);
    background: transparent;
    color: var(--neutral-foreground-rest);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.statut-chip:hover:not(:disabled) {
    background: var(--neutral-layer-3, #f3f4f6);
    border-color: var(--neutral-stroke-strong-rest, #9ca3af);
}

.statut-chip:active:not(:disabled) {
    transform: translateY(1px);
}

.statut-chip:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}

.statut-chip--active {
    cursor: default;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.12);
}

.statut-chip--active:hover {
    /* couleur définie en inline-style via ChipStyle pour suivre StatutBadge */
}

.statut-chip__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
}

.statut-chip--disabled,
.statut-chip:disabled {
    cursor: not-allowed;
    color: var(--neutral-foreground-hint, #9ca3af);
    background: transparent;
    border-color: var(--neutral-stroke-subtle-rest, #e5e7eb);
}

.statut-chip--secondary {
    font-size: 0.78rem;
    padding: 3px 10px;
    color: var(--neutral-foreground-hint);
}

.statut-chip--danger:hover:not(:disabled) {
    background: rgba(209, 52, 56, 0.08);
    border-color: #d13438;
    color: #d13438;
}

@media (max-width: 768px) {
    .prospect-detail-header {
        padding: 6px 12px 8px 12px;
        margin: 0 -12px 6px -12px;
    }

    .prospect-detail-header__ministats {
        flex-basis: 100%;
        order: 3;
        gap: 10px;
    }
}

/* --------------------------------------------------------------------------
   ProspectSidebar — Rail droit collapsible (slice #74)
   -------------------------------------------------------------------------- */
.prospect-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.prospect-sidebar__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.prospect-sidebar__toggle {
    appearance: none;
    border: 1px solid var(--neutral-stroke-rest, #d1d5db);
    background: var(--neutral-layer-1, #fff);
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.12s ease;
}

.prospect-sidebar__toggle:hover {
    background: var(--neutral-layer-3, #f3f4f6);
}

.prospect-sidebar__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.prospect-sidebar__title:hover {
    color: var(--neutral-foreground-rest);
}

.prospect-sidebar--replie {
    width: auto;
    flex: 0 0 auto;
}

.prospect-sidebar--replie .prospect-sidebar__header {
    border-bottom: none;
}

.prospect-sidebar__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sur écran 4K / très large : répartir les cards sur 2 colonnes pour éviter
   l'effet "cards qui occupent toute la largeur et paraissent vides". */
@media (min-width: 2000px) {
    .prospect-sidebar__content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        align-items: start;
    }
}

/* SectionRail — <details> accordéon natif */
.rail-section {
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fff);
    overflow: hidden;
}

.rail-section__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--neutral-layer-2, #fafafa);
    border-bottom: 1px solid transparent;
    transition: background 0.12s ease;
}

.rail-section__summary::-webkit-details-marker { display: none; }
.rail-section__summary::marker { display: none; }

.rail-section[open] > .rail-section__summary {
    border-bottom-color: var(--neutral-stroke-divider-rest, #e5e7eb);
}

.rail-section__summary:hover {
    background: var(--neutral-layer-3, #f3f4f6);
}

.rail-section__icon {
    color: var(--accent-fill-rest, #0078d4);
    flex: 0 0 auto;
}

.rail-section__title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--neutral-foreground-rest);
    flex: 1 1 auto;
    min-width: 0;
}

.rail-section__badge {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    flex: 0 0 auto;
}

.rail-section__chevron {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.rail-section__chevron--open {
    transform: rotate(180deg);
}

.rail-section__body {
    padding: 12px;
}

/* La section accueille déjà sa propre FluentCard interne — neutraliser le double cadre */
.rail-section__body > fluent-card,
.rail-section__body > fluent-card[areaRestricted="false"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   TimelineUnifiee — flux unifié (slice #75)
   -------------------------------------------------------------------------- */
.timeline-unifiee {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-unifiee--loading,
.timeline-unifiee--vide {
    padding: 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.timeline-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-day__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    margin-bottom: 4px;
}

/* Rangée chat-like : pousse l'item à gauche, au centre, ou à droite */
.timeline-row {
    display: flex;
    width: 100%;
}

.timeline-row--left {
    justify-content: flex-start;
}

.timeline-row--right {
    justify-content: flex-end;
}

.timeline-row--center {
    justify-content: center;
}

.timeline-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--neutral-layer-2, #fafafa);
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    max-width: 75%;
    min-width: 280px;
    font: inherit;
    color: inherit;
}

.timeline-item:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-color: var(--neutral-stroke-strong-rest, #9ca3af);
}

.timeline-item--center {
    max-width: 90%;
    min-width: 0;
    border-radius: 9999px;
    padding: 6px 16px;
}

/* Cartouches latéraux : même fond plein que le centre + tinte de couleur liée au type,
   et accent coloré sur le côté tourné vers le contact (gauche pour entrant, droite pour sortant). */
.timeline-item--left.timeline-item--interaction-in {
    background: color-mix(in srgb, #0891b2 14%, var(--neutral-layer-2, #fafafa));
    border-color: color-mix(in srgb, #0891b2 35%, transparent);
    border-left: 3px solid #0891b2;
}

.timeline-item--left.timeline-item--signal {
    background: color-mix(in srgb, #f59e0b 16%, var(--neutral-layer-2, #fafafa));
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
    border-left: 3px solid #f59e0b;
}

.timeline-item--right.timeline-item--interaction-out {
    background: color-mix(in srgb, #475569 16%, var(--neutral-layer-2, #fafafa));
    border-color: color-mix(in srgb, #475569 35%, transparent);
    border-right: 3px solid #475569;
}

.timeline-item--right.timeline-item--campagne {
    background: color-mix(in srgb, #9ca3af 18%, var(--neutral-layer-2, #fafafa));
    border-color: color-mix(in srgb, #9ca3af 35%, transparent);
    border-right: 3px solid #9ca3af;
}

@media (max-width: 768px) {
    .timeline-item {
        max-width: 92%;
        min-width: 0;
    }
}

.timeline-item:hover {
    background: var(--neutral-layer-2, #fafafa);
    border-color: var(--neutral-stroke-divider-rest, #e5e7eb);
}

.timeline-item__time {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    align-self: center;
}

.timeline-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-top: 6px;
}

.timeline-item__icon {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    align-self: center;
    white-space: nowrap;
    padding: 1px 6px;
    background: var(--neutral-layer-3, #f3f4f6);
    border-radius: 9999px;
}

.timeline-item__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: 0 0 auto;
    align-self: center;
}

.timeline-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.timeline-item__title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--neutral-foreground-rest);
}

.timeline-item__corps {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-item__meta {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.timeline-item__badge-ia {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(91, 33, 182, 0.12);
    color: #5b21b6;
    font-weight: 600;
}

.timeline-item--note { border-left-color: #5b21b6; }
.timeline-item--interaction-out { border-left-color: #475569; }
.timeline-item--interaction-in { border-left-color: #0891b2; }
.timeline-item--tache-faite { border-left-color: #10b981; }
.timeline-item--tache-planifiee { border-left-color: #0891b2; }
.timeline-item--statut { border-left-color: #0078d4; }
.timeline-item--signal { border-left-color: #f59e0b; }
.timeline-item--campagne { border-left-color: #9ca3af; }

/* --------------------------------------------------------------------------
   ComposerProspect — Note + Interaction (slice #76)
   -------------------------------------------------------------------------- */
.composer-prospect-sticky {
    position: sticky;
    top: 86px;
    z-index: 3;
    background: var(--neutral-layer-1, #fff);
    margin-bottom: 14px;
}

.composer-prospect {
    border: 1px solid var(--neutral-stroke-rest, #d1d5db);
    border-radius: 6px;
    background: var(--neutral-layer-2, #fafafa);
    padding: 8px;
}

.composer-prospect__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.composer-prospect__row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.composer-prospect__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.composer-prospect__hint {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
}

/* --------------------------------------------------------------------------
   Ma journée — cockpit d'accueil du module
   Colonne d'action (file « À traiter ») à gauche, colonne de contexte
   (pipeline, cibles) à droite. Les colonnes s'empilent sous 1200px.
   -------------------------------------------------------------------------- */
/* Entête des pages de hub : le titre garde sa largeur, les actions se collent à droite.
   Conteneur flex explicite — l'alignement d'un FluentStack imbriqué n'est pas garanti. */
.prospection-hub-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

.prospection-hub-actions > * {
    flex: none;
}

.prospection-hub-switch {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Titre et date sur une seule ligne, calés à gauche du header. */
.majournee-entete-titre {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
    min-width: 0;
}

/* Six tuiles, six colonnes : la grille en comptait cinq et reléguait donc le forecast
   sur une deuxième ligne à lui tout seul. */
.majournee-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.majournee-kpis .kpi-card-compact {
    height: auto;
    padding: 0;
}

.majournee-kpis .kpi-card-compact .card-body {
    padding: 10px 14px;
    text-align: left;
    width: 100%;
}

.majournee-kpis .kpi-card-compact .kpi-value {
    font-size: 1.5rem;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.majournee-kpis .kpi-card-compact .kpi-title {
    font-size: 0.72rem;
}

.majournee-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
}

.majournee-contexte {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.majournee-carte-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.majournee-pipeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.majournee-etage {
    display: grid;
    /* 120px : « Proposition envoyée » est le libellé de statut le plus long du pipeline */
    grid-template-columns: 120px 1fr 32px;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
}

.majournee-etage:hover {
    background: var(--neutral-layer-2);
}

.majournee-etage-label {
    color: var(--neutral-foreground-hint);
}

.majournee-etage-nombre {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.majournee-jauge {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: var(--neutral-layer-2);
    overflow: hidden;
}

.majournee-jauge-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

.majournee-pipeline-secondaire {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.majournee-cibles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.majournee-cible {
    cursor: pointer;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    padding: 8px 10px;
}

.majournee-cible:hover {
    border-color: var(--accent-fill-rest);
}

.majournee-cible-titre {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.majournee-cible-chiffres {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   File « À traiter » — tâches dues et propositions de RDV à suivre
   Une ligne = un item ; le chip « pourquoi » justifie sa présence dans la file.
   -------------------------------------------------------------------------- */
.file-traiter-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.file-traiter-vide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    color: var(--neutral-foreground-hint);
}

.file-traiter-groupe {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
    margin: 14px 0 6px;
}

.file-traiter-groupe:first-of-type {
    margin-top: 2px;
}

.file-traiter-groupe.retard {
    color: var(--error);
}

/* Fiches hors radar : l'alerte est réelle mais sans échéance, elle ne doit pas crier aussi
   fort qu'un retard. Les jetons d'emphase Bootstrap suivent déjà data-bs-theme. */
.file-traiter-groupe.radar {
    color: var(--bs-warning-text-emphasis);
}

.file-traiter-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 6px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
}

.file-traiter-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--neutral-layer-3);
}

.file-traiter-icone.retard {
    color: var(--error);
}

.file-traiter-icone.radar {
    color: var(--bs-warning-text-emphasis);
}

.file-traiter-infos {
    min-width: 0;
    cursor: pointer;
}

.file-traiter-l1 {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.file-traiter-contact {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.file-traiter-l2 {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    margin-top: 1px;
}

.file-traiter-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.file-traiter-tronquee {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 1200px) {
    .majournee-cols {
        grid-template-columns: 1fr;
    }
    .majournee-kpis {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .majournee-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .file-traiter-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    .file-traiter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* Attente des echanges, chargees apres l'affichage de la fiche (signalement 421). */
.timeline-chargement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 8px;
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}

/* Année de conversion, proposée quand la liste est filtrée sur les converties (signalement 486). */
.filtre-annee-conversion {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    font-size: var(--taille-s);
    white-space: nowrap;
}

.filtre-annee-conversion .form-select {
    width: auto;
}

/* Ce qui sépare le total des cartes de celui de la liste des prospects (signalement 487). */
.cibles-explication-totaux {
    margin-top: var(--espace-2);
    font-size: var(--taille-xs);
    color: var(--texte-secondaire);
}