/* =========================================================================
   1. Pages hors admin (login, home)
   Scopé sur :not(.ea) : EasyAdmin ajoute la classe "ea" sur <body>, et ce
   fichier se charge APRÈS son thème — sans ce garde-fou, la règle body
   ci-dessous écrasait la police de tout l'admin.
   ========================================================================= */
body:not(.ea) {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    /* même fond que l'admin, pour une continuité visuelle à la connexion */
    background: #f6f7fb;
    color: #1f2340;
}

.home-wrapper {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

body:not(.ea) header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #181c34;
    color: white;
}

body:not(.ea) header a { color: white; text-decoration: none; }
body:not(.ea) header a.logo { font-weight: bold; }
body:not(.ea) header nav span { margin-right: 1rem; }

/* Flash messages */
.flash-wrapper { max-width: 900px; margin: 1rem auto; }
.flash-success { background: #d4edda; color: #155724; padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-error   { background: #fee2e2; color: #991b1b; padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }

/* Login */
.login-container {
    max-width: 380px;
    margin: 80px auto;
    padding: 2.25rem;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 20, 45, .08);
}
.login-container h1 { font-size: 1.4rem; margin-bottom: 1.5rem; text-align: center; }
.login-container label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; }
.login-container input {
    width: 100%; padding: .65rem .8rem; margin-bottom: 1rem;
    border: 1px solid #d7dae5; border-radius: 8px; box-sizing: border-box; font-size: .95rem;
}
.login-container input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.login-case {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -.25rem 0 1.25rem;
    font-size: .9rem;
    font-weight: 400;
    color: #4a4f6a;
    cursor: pointer;
}
.login-case input { inline-size: auto; margin: 0; cursor: pointer; }

.login-container button {
    width: 100%; padding: .7rem; background: #4f46e5; color: white;
    border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 600;
}
.login-container button:hover { background: #4338ca; }


/* =========================================================================
   2. Thème admin — surcharge des variables EasyAdmin
   Piloter les tokens plutôt que les sélecteurs : c'est ce qui résiste aux
   mises à jour du bundle. --ea-primary irrigue boutons, liens, focus, badges.
   ========================================================================= */
:root {
    --ea-primary: #4f46e5;

    --body-bg: #f6f7fb;
    --content-bg: #f6f7fb;

    --sidebar-bg: #181c34;
    --sidebar-border-color: #181c34;
    --sidebar-logo-color: #ffffff;
    --sidebar-menu-color: #b3b9d4;
    --sidebar-menu-icon-color: #7f86a8;
    --sidebar-menu-header-color: #6e7599;
    --sidebar-menu-submenu-color: #9ba2c2;
    --sidebar-menu-active-item-bg: #4f46e5;
    --sidebar-menu-active-item-color: #ffffff;
    --sidebar-menu-hover-color: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, .07);
    --sidebar-item-icon-tile-hover-bg: rgba(255, 255, 255, .12);
}

/* Le thème sombre redéfinit ces mêmes tokens : on les repose pour que la
   sidebar garde la même identité dans les deux schémas. */
.ea-dark-scheme {
    --ea-primary: #6366f1;
    --sidebar-bg: #131629;
    --sidebar-border-color: #131629;
    --sidebar-menu-active-item-bg: #4f46e5;
    --sidebar-menu-active-item-color: #ffffff;
    --sidebar-menu-hover-color: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, .07);
}

/* Badges d'étape en vue liste, accordés aux couleurs du pipeline (StageEnum).
   Fond pâle + texte foncé : c'est ce qui rend le doré lisible, là où de l'or
   plein en fond échouerait au contraste. */
:root {
    --badge-secondary-bg: #f1f5f9;  /* Prospect */
    --badge-secondary-color: #475569;
    --badge-info-bg: #eff6ff;       /* Contacté */
    --badge-info-color: #1d4ed8;
    --badge-primary-bg: #f5f3ff;    /* En discussion */
    --badge-primary-color: #6d28d9;
    --badge-success-bg: #f0fdf4;    /* Proposition */
    --badge-success-color: #15803d;
    --badge-warning-bg: #fef9c3;    /* Gagné */
    --badge-warning-color: #a16207;
    --badge-dark-bg: #374151;       /* Perdu */
    --badge-dark-color: #f9fafb;
}

/* Filet d'accent en haut de page */
body.ea::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(90deg, #ef4444, #f97316);
    z-index: 2000;
}

/* Sidebar : l'item actif devient une pastille pleine */
.ea-sidebar-item { margin-block-end: 2px; }
.ea-sidebar-item.is-active {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}
.ea-sidebar-item.is-active > .ea-sidebar-item-link,
.ea-sidebar-item.is-active > .ea-sidebar-item-link .ea-sidebar-item-icon {
    color: #fff;
}
.ea-sidebar-item-link { padding-block: 9px; }
.ea-sidebar-item:has(> .ea-sidebar-item-link:hover):not(.is-active) { border-radius: 10px; }

/* Titre de page */
.content-header-title .title { font-weight: 700; letter-spacing: -.01em; }

/* Champs de formulaire un peu plus ronds, cohérents avec les cartes */
.ea .form-control,
.ea .form-select { border-radius: 8px; }


/* =========================================================================
   3. Vue pipeline (kanban)
   ========================================================================= */
/* Nombre exact de colonnes, transmis par le template depuis StageEnum.
   auto-fit ne convenait pas : il crée autant de pistes que la largeur permet,
   et les pistes excédentaires restaient vides au lieu que les colonnes
   s'étirent. minmax(0, 1fr) plutôt que 1fr : sans le 0, une carte au contenu
   long empêche la colonne de rétrécir. */
.board {
    display: grid;
    grid-template-columns: repeat(var(--colonnes, 5), minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}
@media (max-width: 900px) {
    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .board { grid-template-columns: 1fr; }
}

.col {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
}

.col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f1f5;
}
.col-head .title { font-weight: 600; font-size: 15px; color: #1f2340; }
.col-head .count { color: #9ca3b8; font-weight: 600; font-size: 14px; }

.col-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Pas de hauteur maximale : les colonnes s'étirent et c'est la page qui
       défile. Un ascenseur par colonne obligeait à viser une zone étroite
       pour atteindre les dernières cartes. */
}

/* Bouton d'archivage, qui fait aussi office de zone de dépôt */
.btn-perdus { display: inline-flex; align-items: center; gap: 7px; }
.btn-perdus-compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    padding: 0 6px;
    border-radius: 20px;
    background: #f2f3f7;
    color: #6b7189;
    font-size: 12px;
    font-weight: 700;
}
/* Survolé pendant un glisser : le bouton se signale comme cible */
.btn-perdus.est-survolee {
    background: #374151;
    border-color: #374151;
    color: #fff;
}
.btn-perdus.est-survolee .btn-perdus-compte { background: rgba(255, 255, 255, .2); color: #fff; }

.kcard {
    --kcard-accent: #d1d5db;
    position: relative; /* ancre le compteur de relances */
    background: #fff;
    border: 1px solid #e8eaf0;
    border-left: 3px solid var(--kcard-accent);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.kcard .name { font-weight: 600; font-size: 15px; color: #1f2340; margin-bottom: 3px; }
/* Réserve la place du compteur de relances : un nom long passe à la ligne
   au lieu de courir dessous. */
.kcard:has(.krelance) .name { padding-right: 42px; }
.kcard .sub { color: #6b7189; font-size: 13px; line-height: 1.5; }
.kcard .sub--ville::before { content: "📍 "; }

.kbadge {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 20px;
    background: #f2f3f7;
    color: #6b7189;
}

/* Relances en attente : posé en absolu pour rester au même endroit sur les
   deux gabarits de carte (prospect et client), dont le contenu diffère. */
.krelance {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
}
.krelance i { font-size: 10px; }
.krelance--retard { background: #fee2e2; color: #b91c1c; }

.kfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.kdate { color: #9ca3b8; font-size: 12px; }

.kstars { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.kstar { color: #dfe1e9; }
.kstar.is-on { color: #f59e0b; }

.kempty { color: #b0b4bd; font-size: 13px; text-align: center; padding: 20px 8px; }
/* Le message ne s'affiche que si la colonne est vide : évite au JS d'avoir à
   le créer et le supprimer à chaque déplacement. */
.col-body:has(.kcard-link) .kempty { display: none; }

/* --- Glisser-déposer --- */
.kcard-link { cursor: grab; }
.kcard-link.est-en-deplacement { opacity: .4; cursor: grabbing; }
.kcard-link.est-en-deplacement .kcard { border-style: dashed; }

.col-body { min-height: 90px; border-radius: 10px; transition: background .15s ease, box-shadow .15s ease; }
.col-body.est-survolee {
    background: var(--stage-bg, #eef2ff);
    box-shadow: inset 0 0 0 2px var(--stage-color, #4f46e5);
}
.col-body.est-survolee .kempty { color: var(--stage-color, #4f46e5); }

/* Message d'échec d'un déplacement */
.pipeline-alerte {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 3000;
    max-inline-size: 380px;
    padding: 12px 16px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(16, 20, 45, .14);
    transition: opacity .3s ease, transform .3s ease;
}
.pipeline-alerte.est-sortante { opacity: 0; transform: translateY(8px); }

.kcard-link { text-decoration: none; color: inherit; display: block; }
.kcard-link:hover .kcard {
    border-color: #c7c9f5;
    border-left-color: var(--kcard-accent);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .14);
    transform: translateY(-1px);
}

/* Couleurs d'étape : --stage-color / --stage-bg sont posées par le template
   depuis StageEnum, donc une seule règle sert les cinq colonnes. */
.col-head {
    background: var(--stage-bg, transparent);
    border-block-start: 3px solid var(--stage-color, transparent);
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
}
.col-head .title { color: var(--stage-color, #1f2340); }
.col-head .count {
    background: var(--stage-color, #9ca3b8);
    color: #fff;
    min-inline-size: 22px;
    padding: 1px 7px;
    border-radius: 20px;
    text-align: center;
    font-size: 12px;
}
.kcard { border-left-color: var(--stage-color, #d1d5db); }

/* Colonne Perdu : présente mais en retrait */
.col--perdu { background: #fafbfc; }
.col--perdu .kcard { opacity: .6; }
.col--perdu .kcard-link:hover .kcard { opacity: 1; }

/* Colonne Gagné : carte allégée, la fiche complète vit dans l'onglet Clients */
.kcard--client { display: flex; flex-direction: column; gap: 8px; }
.kcard--client .name { margin-bottom: 0; }
.kcard--client .kfoot { margin-top: 0; justify-content: flex-start; gap: 8px; }
.kclient-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--stage-bg, #fefce8);
    color: var(--stage-color, #d4a017);
    border: 1px solid var(--stage-color, #d4a017);
}
.kprojets { font-size: 12px; color: #6b7189; }


/* =========================================================================
   5. Projets rattachés, sur la fiche d'un client
   ========================================================================= */
.projets-entete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f3f8;
}
.panneau-titre {
    font-size: 15px;
    font-weight: 600;
    color: #1f2340;
    margin-inline-end: auto;
}
.projets-compte { font-size: 12px; color: #9ca3b8; }
.projets-ajouter {
    font-size: 13px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid #d5d7f7;
    border-radius: 20px;
}
.projets-ajouter:hover { background: #eef2ff; color: #4338ca; }

.projets-vide { color: #9ca3b8; font-size: 14px; margin: 0; }
.projets-note { color: #9ca3b8; font-size: 12px; margin: 10px 0 0; line-height: 1.45; }
.projets-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* En colonne étroite, chaque projet s'empile au lieu de s'aligner */
.projet-ligne {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e8eaf0;
    border-left: 3px solid #c7c9f5;
    border-radius: 10px;
    background: #fff;
}
.projet-nom { font-weight: 600; color: #1f2340; text-decoration: none; }
.projet-nom:hover { color: #4f46e5; text-decoration: underline; }
.projet-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.projet-statut { font-size: 12px; padding: 2px 9px; border-radius: 20px; }
.projet-statut--a_faire  { background: #f2f3f7; color: #6b7189; }
.projet-statut--en_cours { background: #eff6ff; color: #1d4ed8; }
.projet-statut--termine  { background: #f0fdf4; color: #15803d; }
.projet-montant { font-size: 13px; font-weight: 600; color: #1f2340; }
.projet-date { font-size: 12px; color: #9ca3b8; }


/* =========================================================================
   6. Tableau de bord
   ========================================================================= */
.tb-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.tb-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.tb-carte:hover { box-shadow: 0 6px 18px rgba(16, 20, 45, .08); transform: translateY(-1px); }

/* Liseré de couleur en tête de carte, sans décaler le contenu */
.tb-carte::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--accent, #4f46e5);
}
.tb-carte--facture      { --accent: #16a34a; }
.tb-carte--previsionnel { --accent: #4f46e5; }
.tb-carte--total        { --accent: #d4a017; }
.tb-carte--conversion   { --accent: #0ea5e9; }
.tb-carte--reste        { --accent: #f97316; }
.tb-carte--recurrent    { --accent: #8b5cf6; }
.tb-unite { font-size: 14px; font-weight: 600; color: #9ca3b8; margin-inline-start: 2px; }

/* Contacts d'une structure */
.ct-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-ligne {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid #e8eaf0;
    border-left: 3px solid #c7c9f5;
    border-radius: 10px;
    background: #fff;
}
.ct-entete { display: flex; align-items: baseline; gap: 8px; }
.ct-nom { font-weight: 600; font-size: 14px; color: #1f2340; text-decoration: none; }
.ct-nom:hover { color: #4f46e5; text-decoration: underline; }
.ct-principal {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 7px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4f46e5;
}
.ct-fonction { font-size: 12px; color: #6b7189; margin-bottom: 3px; }
.ct-lien { font-size: 13px; color: #4f46e5; text-decoration: none; word-break: break-all; }
.ct-lien:hover { text-decoration: underline; }
.ct-note { margin: 6px 0 0; font-size: 12px; color: #6b7189; line-height: 1.5; }

/* Chronomètre et temps passé */
.tp-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #f7f8ff;
    border: 1px solid #e0e2f5;
    border-radius: 10px;
}
.tp-total.est-actif {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.tp-valeur {
    font-size: 20px;
    font-weight: 700;
    color: #1f2340;
    font-variant-numeric: tabular-nums;
}
.tp-total.est-actif .tp-valeur { color: #15803d; }
.tp-total form { margin: 0; }
.tp-bouton {
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    padding: 5px 14px;
    cursor: pointer;
    border: 1px solid transparent;
}
.tp-marche { background: #4f46e5; color: #fff; }
.tp-marche:hover { background: #4338ca; }
.tp-arret { background: #fff; color: #b91c1c; border-color: #fecaca; }
.tp-arret:hover { background: #fee2e2; }

.projet-ligne.est-en-cours { border-left-color: #16a34a; background: #f7fdf9; }

/* Encaissements d'un projet */
.pay-resume { margin-bottom: 14px; }
.pay-barre {
    block-size: 8px;
    background: #f2f3f7;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pay-barre-remplissage {
    display: block;
    block-size: 100%;
    min-inline-size: 2px;
    background: #4f46e5;
    border-radius: 20px;
    transition: width .3s ease;
}
.pay-barre-remplissage.est-solde { background: #16a34a; }
.pay-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; color: #6b7189; }
.pay-chiffres strong { color: #1f2340; font-size: 14px; }
.pay-solde { color: #15803d; font-weight: 600; }
.pay-reste { color: #b45309; font-weight: 600; }
.pay-total { margin-inline-start: auto; color: #9ca3b8; }
.pay-engagement { margin-top: 4px; padding-top: 6px; border-top: 1px solid #f2f3f8; }

.tb-alerte { color: #b91c1c; font-weight: 600; }

.tb-libelle {
    font-size: 11px;
    font-weight: 700;
    color: #8b90a8;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tb-valeur {
    font-size: 28px;
    font-weight: 700;
    color: #1f2340;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tb-carte--facture .tb-valeur { color: #15803d; }
.tb-precision { font-size: 12px; color: #9ca3b8; }

/* --- Panneaux --- */
.tb-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.tb-panneau {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
    overflow: hidden;
}
.tb-panneau--large { margin-bottom: 16px; }

.tb-panneau-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f1f5;
}
.tb-panneau-entete h2 { margin: 0; font-size: 15px; font-weight: 600; color: #1f2340; }
.tb-sous-titre { margin: 3px 0 0; font-size: 12px; color: #9ca3b8; }
.tb-panneau-entete a { font-size: 12px; font-weight: 600; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.tb-panneau-entete a:hover { text-decoration: underline; }

/* --- Barres de répartition par étape --- */
.tb-barres { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.tb-barre { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; }
.tb-barre-nom { font-size: 13px; font-weight: 600; color: var(--stage-color, #1f2340); }
.tb-barre-piste {
    block-size: 8px;
    background: var(--stage-bg, #f2f3f7);
    border-radius: 20px;
    overflow: hidden;
}
.tb-barre-remplissage {
    display: block;
    block-size: 100%;
    min-inline-size: 2px;
    background: var(--stage-color, #4f46e5);
    border-radius: 20px;
    transition: width .3s ease;
}
.tb-barre-valeur {
    font-size: 14px;
    font-weight: 700;
    color: #1f2340;
    text-align: end;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
    .tb-barre { grid-template-columns: 90px 1fr 32px; gap: 8px; }
}

/* --- Listes --- */
.tb-liste { list-style: none; margin: 0; padding: 6px 0; }
.tb-liste li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 16px;
}
.tb-liste li + li { border-top: 1px solid #f6f7fa; }
.tb-liste li:hover { background: #fafbfd; }
.tb-nom { font-weight: 600; font-size: 14px; color: #1f2340; text-decoration: none; }
.tb-nom:hover { color: #4f46e5; text-decoration: underline; }
.tb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #9ca3b8; }
.tb-montant { font-weight: 600; color: #1f2340; font-variant-numeric: tabular-nums; }
.tb-actif, .tb-inactif { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; }
.tb-actif { background: #f0fdf4; color: #15803d; }
.tb-inactif { background: #f2f3f7; color: #6b7189; }
.tb-vide { color: #9ca3b8; font-size: 14px; margin: 0; padding: 20px 16px; text-align: center; }

/* Deux panneaux côte à côte : relances et graphique */
.tb-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.tb-liste li.est-en-retard { border-inline-start: 3px solid #dc2626; padding-inline-start: 13px; }

/* Classement des meilleurs clients */
.tb-liste--rangs li { flex-direction: row; align-items: center; gap: 12px; }
.tb-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}
.tb-liste--rangs .tb-nom { flex: 1; }
.tb-liste--rangs .tb-montant { margin-inline-start: auto; }

/* Graphique du CA mensuel, dessiné en CSS — aucune bibliothèque externe */
.tb-graphique {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 20px 16px 12px;
    block-size: 220px;
}
.tb-colonne-graphe {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    block-size: 100%;
    gap: 6px;
    min-inline-size: 0;
}
.tb-colonne-barre {
    inline-size: 100%;
    min-block-size: 2px;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    border-radius: 6px 6px 0 0;
    transition: opacity .15s ease;
}
.tb-colonne-graphe:hover .tb-colonne-barre { opacity: .75; }
.tb-colonne-libelle {
    font-size: 10px;
    color: #9ca3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
}

/* Pastille de type d'activité */
.act-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--type-color, #6b7189);
}
.act-pastille::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--type-color, #6b7189);
}


/* --- Page d'import --- */
.import-bloc {
    max-width: 760px;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
}
.import-bloc h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #1f2340; }
.import-bloc h3 { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: #1f2340; }
.import-aide { font-size: 13px; color: #6b7189; line-height: 1.6; margin: 0 0 14px; }
.import-aide code {
    background: #f2f3f7; padding: 1px 6px; border-radius: 4px;
    font-size: 12px; color: #4a4f6a;
}
.import-form { margin: 20px 0; }
.import-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #1f2340; }
.import-form input[type="file"],
.import-form select {
    width: 100%; max-width: 420px; padding: .55rem .7rem; margin-bottom: 1rem;
    border: 1px solid #d7dae5; border-radius: 8px; box-sizing: border-box; font-size: .95rem;
}
.import-case { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-weight: 400 !important; }
.import-case input { width: auto; margin: 0; }
.import-avert {
    font-size: 13px; color: #92400e; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; margin: 0;
}
.import-rapport { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f1f5; }
.import-rapport ul { margin: 0; padding-left: 20px; font-size: 14px; color: #4a4f6a; line-height: 1.8; }
.import-erreurs li { color: #b91c1c; font-size: 13px; }


/* =========================================================================
   7. Harmonisation des pages EasyAdmin sur le style du tableau de bord
   Mêmes cartes blanches arrondies, mêmes en-têtes en petites capitales,
   mêmes survols. Ne touche que l'apparence : aucune règle de mise en page
   d'EasyAdmin n'est renversée.
   ========================================================================= */

/* --- Listes --- */
.ea .table.datagrid {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 20, 45, .04);
    border-collapse: separate;
    border-spacing: 0;
    /* Surtout pas d'overflow: hidden ici — il rognerait le menu d'actions
       qui se déploie hors de la table. Les angles sont arrondis cellule
       par cellule à la place. */
}
.ea .table.datagrid thead th:first-child { border-start-start-radius: 13px; }
.ea .table.datagrid thead th:last-child { border-start-end-radius: 13px; }
.ea .table.datagrid tbody tr:last-child td:first-child { border-end-start-radius: 13px; }
.ea .table.datagrid tbody tr:last-child td:last-child { border-end-end-radius: 13px; }

.ea .table.datagrid thead th {
    background: #fbfcfd;
    border-block-end: 1px solid #eceef4;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4a4f6a;
    padding-block: 12px;
}
.ea .table.datagrid thead th a { color: inherit; text-decoration: none; }
.ea .table.datagrid thead th a:hover { color: #4f46e5; }

.ea .table.datagrid tbody td {
    border-block-end: 1px solid #f4f5f9;
    color: #4a4f6a;
    vertical-align: middle;
}
.ea .table.datagrid tbody tr:last-child td { border-block-end: 0; }
.ea .table.datagrid tbody tr { transition: background .12s ease; }
.ea .table.datagrid tbody tr:hover { background: #fafbfd; }

/* Première colonne mise en avant, comme les noms du tableau de bord */
.ea .table.datagrid tbody td:first-of-type { font-weight: 600; color: #1f2340; }

/* --- Barre de recherche et filtres --- */
.ea .content-search input,
.ea .datagrid-filters .btn { border-radius: 10px; }

/* --- Pagination --- */
.ea .content-panel-footer { border-block-start: 1px solid #eceef4; }

/* --- Formulaires : chaque bloc devient une carte --- */
/* Cartes blanches : portées par le FIELDSET, jamais par .form-column.
   .form-column est la cellule de grille Bootstrap ; son padding EST le gutter
   qui sépare les colonnes. Y poser un fond le recouvre et les cartes se
   touchent. Y poser une marge fait dépasser 100 % et la colonne passe à la
   ligne. La colonne reste donc transparente, le fieldset porte le visuel. */
.ea .form-fieldset {
    background: #fff;
    border-radius: 14px;
    /* bordure en inset comme EasyAdmin, pour ne pas doubler le trait */
    box-shadow: inset 0 0 0 1px #e8eaf0, 0 1px 2px rgba(16, 20, 45, .04);
    margin-block-end: 16px;
}
.ea .form-column { background: none; border: 0; }

/* Le contenu des panneaux ne doit pas déborder de sa colonne */
.ea-detail .form-column { min-inline-size: 0; }
.ea-detail .field-value { min-inline-size: 0; overflow-wrap: anywhere; }

/* Un peu d'air entre le titre de page et le contenu */
.ea .content-header { padding-block-end: var(--ea-sp-6); }

/* EasyAdmin ne donne du padding à .form-fieldset-body que lorsqu'il est dans
   une .form-column — condition remplie sur les fiches, pas sur les
   formulaires, où le fieldset est seul. D'où des champs collés au bord. */
.ea-new .form-fieldset-body,
.ea-edit .form-fieldset-body {
    padding: 24px 24px 4px;
}

/* Fixer la colonne ne suffit pas : certains champs gardent leur largeur
   naturelle à l'intérieur (les sélecteurs de date surtout). On les fait
   remplir leur colonne pour que toutes les saisies s'alignent. */
.ea-new .form-widget .form-control,
.ea-edit .form-widget .form-control,
.ea-new .form-widget .form-select,
.ea-edit .form-widget .form-select,
.ea-new .form-widget .datetime-widget,
.ea-edit .form-widget .datetime-widget,
.ea-new .form-widget .ea-autocomplete,
.ea-edit .form-widget .ea-autocomplete {
    inline-size: 100%;
    max-inline-size: 100%;
}

/* En-tête d'un bloc de formulaire. Le padding vient d'une règle EasyAdmin
   conditionnée à .form-column, absent des pages de formulaire : sans ça, le
   titre « Qualification commerciale » se colle au bord de sa carte. */
.ea .form-fieldset-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4a4f6a;
}
.ea-new .form-fieldset-header,
.ea-edit .form-fieldset-header {
    padding: 20px 24px 0;
    border-block-end: 0;
}
/* Le bloc titré se détache du précédent */
.ea-new .form-fieldset:not(:first-of-type),
.ea-edit .form-fieldset:not(:first-of-type) { margin-block-start: 16px; }

/* Titre posé au-dessus d'une colonne, hors de la carte : pas de fond. */
.ea .form-column-title .form-column-title-content {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8b90a8;
}

/* --- Fiches --- */
/* EasyAdmin espace ses lignes par une marge. On la remplace par du padding
   vertical, sans quoi la bordure vient se coller au texte.
   Le padding horizontal reste celui d'EasyAdmin : .form-fieldset-body
   contient une .row Bootstrap à marges négatives, l'annuler ferait déborder
   le contenu hors de la carte. */
.ea-detail .form-column .form-fieldset-body,
.ea-detail .form-column .form-fieldset-body.without-header {
    padding-block: 8px;
}

.ea-detail .field-group {
    align-items: baseline;
    margin-block-end: 0;
    padding-block: 13px;
    border-block-end: 1px solid #f2f3f8;
}
.ea-detail .field-group:last-child { border-block-end: 0; }

.ea-detail .field-group .field-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    /* assombri en plus du gras : à 11 pixels, une graisse seule sur du gris
       clair ne se lit pas comme du gras */
    color: #4a4f6a;
    line-height: 1.5;
    inline-size: 120px;
    margin-inline-end: 20px;
}
.ea-detail .field-group .field-value {
    color: #1f2340;
    line-height: 1.5;
}

/* Panneaux maison (projets, coffre-fort, activités) : libellé masqué côté
   EasyAdmin, titre porté par le panneau lui-même, contenu en pleine largeur. */
.ea-detail .field-group.field-panneau { display: block; padding-block: 18px; }

/* --- Boutons : même rayon que les cartes --- */
.ea .btn { border-radius: 10px; }
.ea .btn-primary { box-shadow: 0 1px 2px rgba(79, 70, 229, .25); }

/* --- Titre de page --- */
.ea .content-header-title .title { font-size: 22px; }


/* =========================================================================
   8. Activités (fiche prospect)
   ========================================================================= */
/* Toutes les activités partagent la même carte. La couleur code l'ÉTAT — à
   faire, en retard, fait — parce que c'est lui qui dit quoi faire ensuite. Le
   type garde sa pastille et son libellé, en information secondaire. */
.act-groupe { margin-block-end: 16px; }
.act-groupe:last-child { margin-block-end: 0; }
.act-groupe-titre {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-block-end: 8px;
}
.act-groupe--a-faire .act-groupe-titre { color: #a16207; }
.act-groupe--faites .act-groupe-titre { color: #15803d; }

.act-carte {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid #fde68a;
    border-inline-start: 3px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    transition: background .15s ease, border-color .15s ease;
}
.act-carte + .act-carte { margin-block-start: 8px; }

.act-carte.est-en-retard {
    border-color: #fecaca;
    border-inline-start-color: #dc2626;
    background: #fef2f2;
}
.act-carte.est-faite {
    border-color: #e3ece5;
    border-inline-start-color: #16a34a;
    background: #f6faf7;
}

.act-carte-corps { flex: 1; min-inline-size: 0; }
.act-carte-entete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.act-type { font-size: 14px; color: #1f2340; }
.act-carte.est-faite .act-type { color: #55607d; }
.act-carte.est-en-retard .act-date { color: #b91c1c; font-weight: 600; }

.act-puce {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    align-self: center;
    flex-shrink: 0;
}
.act-date { font-size: 12px; color: #9ca3b8; white-space: nowrap; }
.act-texte { margin: 5px 0 0; font-size: 13px; color: #6b7189; line-height: 1.5; }
/* Les deux actions d'une carte, empilees pour ne pas elargir la colonne. */
.act-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

.act-lien { font-size: 12px; font-weight: 600; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.act-lien:hover { text-decoration: underline; }

/* Volontairement discret : une suppression ne doit pas se proposer plus
   fort que la modification, qui est le geste courant. Le rouge n'arrive
   qu'au survol, une fois l'intention marquee. */
.act-supprimer {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3b8;
    cursor: pointer;
    white-space: nowrap;
}
.act-supprimer:hover { color: #b91c1c; text-decoration: underline; }
.act-supprimer:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 3px; }
.act-supprimer:disabled { cursor: progress; opacity: .5; }

.act-carte.est-en-suppression { opacity: .45; }

/* Case « Réalisée ». L'input natif reste dans le flux pour le clavier et les
   lecteurs d'écran ; seul son rendu est remplacé. */
.act-case { position: relative; display: block; flex-shrink: 0; margin: 1px 0 0; cursor: pointer; }
.act-case-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.act-case-input:disabled { cursor: progress; }
.act-case-visuel {
    display: grid;
    place-items: center;
    inline-size: 18px;
    block-size: 18px;
    border: 1.5px solid #d4b483;
    border-radius: 5px;
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.act-case-visuel::after {
    content: "";
    inline-size: 9px;
    block-size: 5px;
    border-inline-start: 2px solid #fff;
    border-block-end: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity .15s ease;
}
.act-case-input:checked + .act-case-visuel {
    background: #16a34a;
    border-color: #16a34a;
}
.act-case-input:checked + .act-case-visuel::after { opacity: 1; }
.act-case-input:focus-visible + .act-case-visuel {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}
.act-carte.est-en-retard .act-case-visuel { border-color: #e8a0a0; }

/* Libellé réservé aux lecteurs d'écran : la case seule ne dit rien. */
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien vers le reste d'une colonne tronquée du pipeline */
.col-reste {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid #f0f1f5;
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    text-align: center;
    text-decoration: none;
}
.col-reste:hover { background: #f7f8ff; }


/* =========================================================================
   9. Coffre-fort
   ========================================================================= */
.coffre-url {
    font-size: 12px;
    color: #6b7189;
    text-decoration: none;
    word-break: break-all;
}
.coffre-url:hover { color: #4f46e5; text-decoration: underline; }

.mdp-champ { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mdp-valeur {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: #f2f3f7;
    color: #1f2340;
    padding: 3px 8px;
    border-radius: 6px;
    word-break: break-all;
	width: 300px;
}
.coffre-identifiant {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #6b7189;
    word-break: break-all;
}

/* Boutons icône : œil de révélation et copie */
.mdp-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    padding: 0;
    color: #6b7189;
    background: none;
    border: 1px solid #e0e2ec;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mdp-icone:hover { color: #4f46e5; background: #eef2ff; border-color: #d5d7f7; }
.mdp-icone:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.mdp-icone .icone { inline-size: 16px; block-size: 16px; }

/* L'œil barré ne s'affiche qu'une fois le mot de passe révélé */
.icone-oeil-barre { display: none; }
.mdp-champ.est-revele .icone-oeil { display: none; }
.mdp-champ.est-revele .icone-oeil-barre { display: inline-block; }
.mdp-champ.est-revele .mdp-voir { color: #4f46e5; border-color: #d5d7f7; }

.mdp-icone.est-copie { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.mdp-icone.a-echoue { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
/* Champ mot de passe avec œil de révélation */
.mdp-revelable { position: relative; display: block; }
.mdp-revelable input { padding-inline-end: 42px; }
.mdp-oeil {
    position: absolute;
    inset-inline-end: 6px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    padding: 0;
    color: #6b7189;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.mdp-oeil:hover { color: #4f46e5; background: #eef2ff; }
.mdp-oeil:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.mdp-oeil .icone { inline-size: 16px; block-size: 16px; }
.mdp-revelable .icone-oeil-barre { display: none; }
.mdp-revelable.est-revele .icone-oeil { display: none; }
.mdp-revelable.est-revele .icone-oeil-barre { display: inline-block; }
.mdp-revelable.est-revele .mdp-oeil { color: #4f46e5; }

.mdp-illisible {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 20px;
    background: #fee2e2;
    color: #991b1b;
}


/* =========================================================================
   4. Champs obligatoires : astérisque à la place de la pastille EasyAdmin.
   Les propriétés de la règle d'origine (point de 4px positionné en absolu)
   sont toutes remises à plat, sinon l'astérisque hérite de sa géométrie.
   ========================================================================= */
.form-group label.required:after,
.form-group .col-form-label.required:after {
    content: "*";
    background: none;
    border-radius: 0;
    color: #dc2626;
    filter: none;
    position: static;
    inset: auto;
    block-size: auto;
    inline-size: auto;
    font-size: 1em;
    line-height: 1;
    margin-inline-start: 3px;
}

/* ---------------------------------------------------------------------------
   10. Indicateur d'activités en cours (vue liste)
   ------------------------------------------------------------------------ */

.relance-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
    white-space: nowrap;
}
.relance-tag i { font-size: 10px; }
.relance-tag--retard { background: #fee2e2; color: #b91c1c; }
/* Aucune relance : pas un vide, une information — mais qui ne doit pas
   attirer l'oeil autant que les deux autres états. */
.relance-tag--vide { background: transparent; color: #c3c7d4; font-weight: 400; padding-left: 0; }


/* ---------------------------------------------------------------------------
   11. Documents (fiche client et fiche projet)
   ------------------------------------------------------------------------ */

.doc-liste { list-style: none; margin: 0; padding: 0; }
.doc-ligne {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
}
.doc-ligne + .doc-ligne { border-top: 1px solid #f0f1f5; }

/* Pastille d'extension : identifie le fichier d'un coup d'oeil, la ou une
   icone generique ne dirait rien. */
.doc-type {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 8px;
    background: #eef0f7;
    color: #55607d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    overflow: hidden;
}

.doc-corps { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-nom {
    font-size: 14px;
    font-weight: 600;
    color: #1f2340;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.doc-nom:hover { color: #4f46e5; text-decoration: underline; }
.doc-date { font-size: 12px; color: #9ca3b8; }

.doc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.doc-lien { font-size: 12px; font-weight: 600; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.doc-lien:hover { text-decoration: underline; }