:root { --fond: #f5f6f8; --carte: #fff; --texte: #1d2330; --discret: #667085; --bord: #e2e5ea; --accent: #2a4bd7; --succes: #127a3a; --erreur: #b42318; --avert: #a15c07; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
a { color: var(--accent); }
.contenu { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.etroite { max-width: 420px; margin: 40px auto; }
.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
h1 { font-size: 24px; margin: 0 0 12px; } h2 { font-size: 17px; margin: 18px 0 8px; } h2:first-child { margin-top: 0; }
label { display: block; margin-bottom: 12px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url] { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; }
input.court { width: 110px; display: inline-block; text-align: right; }
.bouton { display: inline-block; background: var(--couleur, var(--accent)); color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.bouton.secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bord); }
.bouton.danger { background: var(--erreur); }
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); }
.tableau th, .tableau td { padding: 8px 10px; border-bottom: 1px solid var(--bord); text-align: left; }
.nombre { text-align: right !important; white-space: nowrap; }
.discret { color: var(--discret); }
.centre { text-align: center; }
.alerte { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.alerte-succes { color: var(--succes); background: #ecfdf3; }
.alerte-erreur { color: var(--erreur); background: #fef3f2; }
.alerte-avertissement { color: var(--avert); background: #fffaeb; }
.statut { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #eef; font-weight: 600; vertical-align: middle; }
.statut-signe { background: #fff4d6; } .statut-paye { background: #dcfae6; } .statut-annule { background: #fee4e2; }
.copie { display: flex; gap: 8px; } .copie input { margin: 0; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; } .details dd { margin: 0; word-break: break-all; }


/* Indicateurs et compteurs */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.indicateur { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 16px 18px; }
.indicateur .valeur { display: block; font-size: 26px; font-weight: 700; }
.indicateur .libelle { color: var(--discret); font-size: 13px; }
.compteur { font-size: 13px; font-weight: 600; background: #eef0f4; border-radius: 99px; padding: 1px 9px; vertical-align: middle; color: var(--discret); }

/* Étapes du prospect */
.etape { font-size: 12px; padding: 2px 9px; border-radius: 99px; font-weight: 600; vertical-align: middle; white-space: nowrap; background: #eef0f4; color: #344054; }
.etape-contacte { background: #e0f2fe; color: #075985; }
.etape-interesse { background: #fef3c7; color: #92400e; }
.etape-devis { background: #ede9fe; color: #5b21b6; }
.etape-signe { background: #dcfae6; color: #067647; }
.etape-perdu { background: #fee4e2; color: #b42318; }
.jauge.etape-nouveau { background: #98a2b3; } .jauge.etape-contacte { background: #0284c7; } .jauge.etape-interesse { background: #d97706; }
.jauge.etape-devis { background: #7c3aed; } .jauge.etape-signe { background: #16a34a; } .jauge.etape-perdu { background: #dc2626; }

/* Listes et filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtres label { margin: 0; flex: 1 1 180px; }
select, textarea, input[type=search], input[type=date], input[type=time] { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; background: #fff; }
tr.en-retard td:first-child { box-shadow: inset 3px 0 0 var(--erreur); }
.texte-retard { color: var(--erreur); }
.defilement { overflow-x: auto; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
.onglets a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--bord); text-decoration: none; color: var(--texte); background: #fff; }
.onglets a.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Fiche client */
.choix { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.choix legend { font-weight: 500; margin-bottom: 6px; }
.pastille { display: inline-flex; gap: 6px; align-items: center; margin: 0; padding: 6px 12px; border: 1px solid var(--bord); border-radius: 99px; font-weight: 400; cursor: pointer; }
.pastille:has(input:checked) { border-color: var(--accent); background: #eef2ff; }
.raccourcis-relance { font-size: 14px; color: var(--discret); display: flex; gap: 12px; flex-wrap: wrap; }
.lien { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.chronologie { list-style: none; padding: 0; margin: 0; }
.chronologie li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0 10px 12px; border-left: 3px solid var(--bord); }
.chronologie li.joint { border-left-color: #16a34a; }
.chronologie .quand { color: var(--discret); font-size: 14px; }
.chronologie .note { margin: 4px 0 0; white-space: normal; }
.alerte-avertissement { color: var(--avert); background: #fffaeb; }

/* Entonnoir */
.entonnoir { width: 100%; border-collapse: collapse; }
.entonnoir th { text-align: left; width: 140px; padding: 6px 8px 6px 0; font-weight: 500; }
.entonnoir td { padding: 6px 0; }
.jauge-cellule { width: 100%; }
.jauge { display: block; height: 18px; border-radius: 4px; min-width: 2px; }
.entonnoir .nombre { width: 50px; padding-left: 10px; }

@media (max-width: 640px) {
    .chronologie li { grid-template-columns: 1fr; gap: 2px; }
    .jauge-cellule { width: 60%; }
}
.synchro { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: -4px 0 16px; }

/* ===== Liste de travail ===== */
.recherche { display: flex; gap: 10px; margin-bottom: 12px; }
.recherche input[type=search] { flex: 1; margin: 0; padding: 11px 14px; font-size: 16px; border-radius: 10px; }
.recherche select { width: auto; margin: 0; }
.onglets-vues { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; border-bottom: 1px solid var(--bord); }
.onglets-vues a { white-space: nowrap; padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--discret); font-weight: 600; border-bottom: 3px solid transparent; }
.onglets-vues a.actif { color: var(--texte); border-bottom-color: var(--accent); }
.onglets-vues a.urgent .compteur { background: var(--erreur); color: #fff; }
.aide-vue { margin: 8px 0 14px; font-size: 14px; }
.liste-clients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne-client { display: grid; grid-template-columns: minmax(180px, 1.3fr) 110px minmax(160px, 1fr) minmax(200px, 1.6fr) auto; gap: 14px; align-items: center; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; }
.ligne-client.en-retard { border-left: 4px solid var(--erreur); }
.ligne-client > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-nom { font-weight: 700; font-size: 16px; text-decoration: none; }
.lc-nom:hover { text-decoration: underline; }
.lc-note { font-size: 14px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lc-abonnement { font-size: 13px; color: var(--discret); }
.lc-abonnement.a-renouveler { color: var(--avert); font-weight: 600; }
.lc-boutons { flex-direction: row !important; gap: 6px !important; justify-content: flex-end; }
.lc-boutons .bouton { padding: 7px 12px; white-space: nowrap; }
.texte-aujourdhui { color: var(--accent); font-weight: 600; }
.texte-retard { color: var(--erreur); font-weight: 600; }
.sur-mobile { display: none; }
.vide { text-align: center; padding: 32px; color: var(--discret); font-size: 17px; }
a.indicateur { text-decoration: none; color: inherit; transition: border-color .15s; }
a.indicateur:hover { border-color: var(--accent); }
.indicateur.urgent { border-color: var(--erreur); }
.indicateur.urgent .valeur { color: var(--erreur); }
.indicateur.attention .valeur { color: var(--avert); }
.chiffres { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.devis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* ===== Fenêtre « Noter l'appel » ===== */
.dialogue { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialogue::backdrop { background: rgba(17,24,39,.45); }
.dialogue form { padding: 20px 22px; }
.dialogue-entete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.dialogue-entete h2 { margin: 0; }
.dialogue-entete p { margin: 2px 0 0; }
.fermer { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--discret); }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dialogue .choix { margin-bottom: 14px; }
.plus summary { cursor: pointer; color: var(--discret); margin-bottom: 8px; }

/* ===== Fiche client ===== */
.fil { margin: 0 0 10px; }
.fiche-entete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.fiche-entete h1 { margin-bottom: 6px; }
.fe-coordonnees { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; }
.fe-coordonnees a { text-decoration: none; }
.fe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.etapes-client form { display: flex; gap: 0; margin: 0 0 20px; overflow-x: auto; }
.etape-choix { flex: 1; min-width: 96px; border: 1px solid var(--bord); background: #fff; padding: 9px 8px; font: inherit; font-size: 14px; cursor: pointer; color: var(--discret); }
.etape-choix:first-child { border-radius: 8px 0 0 8px; } .etape-choix:last-child { border-radius: 0 8px 8px 0; }
.etape-choix + .etape-choix { border-left: 0; }
.etape-choix.actif { color: #fff; font-weight: 700; }
.etape-choix.actif.etape-nouveau { background: #667085; } .etape-choix.actif.etape-contacte { background: #0284c7; }
.etape-choix.actif.etape-interesse { background: #d97706; } .etape-choix.actif.etape-devis { background: #7c3aed; }
.etape-choix.actif.etape-signe { background: #16a34a; } .etape-choix.actif.etape-perdu { background: #dc2626; }
.fiche-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.prochaine-action .grand { font-size: 18px; margin: 4px 0; }
.prochaine-action.en-retard { border-left: 4px solid var(--erreur); }
.historique { list-style: none; margin: 0; padding: 0; }
.historique li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.historique li:last-child { border-bottom: 0; }
.h-icone { font-size: 20px; text-align: center; }
.h-titre { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.h-texte { margin: 4px 0; white-space: normal; }
.h-appel .h-texte { background: #f8fafc; border-left: 3px solid #16a34a; padding: 6px 10px; border-radius: 0 6px 6px 0; }
.abonnements { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.abo { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bord); border-left: 4px solid #16a34a; }
.abo-termine { border-left-color: #98a2b3; opacity: .75; }
.abo-a_venir { border-left-color: #0284c7; }
.abo.a-renouveler { border-left-color: var(--avert); background: #fffaeb; }
.badge-renouveler { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--avert); }
.replie summary { cursor: pointer; list-style: none; }
.replie summary::-webkit-details-marker { display: none; }
.replie summary h2 { display: inline; }
.replie summary::after { content: ' ▾'; color: var(--discret); }
.replie[open] summary { margin-bottom: 12px; }

@media (max-width: 900px) {
    .ligne-client { grid-template-columns: 1fr auto; grid-template-areas: "qui etape" "action action" "dernier dernier" "boutons boutons"; gap: 8px; }
    .lc-qui { grid-area: qui; } .lc-etape { grid-area: etape; align-items: flex-end; } .lc-action { grid-area: action; }
    .lc-dernier { grid-area: dernier; } .lc-boutons { grid-area: boutons; justify-content: stretch !important; }
    .lc-boutons .bouton { flex: 1; text-align: center; }
    .sur-mobile { display: inline; } .sur-ordi { display: none; }
    .fiche-colonnes { grid-template-columns: 1fr; }
    .fe-actions { width: 100%; } .fe-actions .bouton { flex: 1; text-align: center; }
}

.synchro { margin-top: 24px; }
@media (max-width: 640px) {
    .contenu { padding: 16px 12px; }
    .recherche { flex-direction: column; }
    .recherche select { width: 100%; }
    .entete h1 { font-size: 22px; }
}
.dialogue-large { width: min(720px, calc(100vw - 24px)); }
.dialogue textarea, .dialogue input[type=text], .dialogue select { font: inherit; }
.champs { display: grid; gap: 6px; margin: 0; }
.champs dt code { background: #eef2ff; padding: 2px 6px; border-radius: 4px; }
.champs dd { margin: 0 0 6px; color: var(--discret); font-size: 14px; }
.h-email summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.h-email p { background: #f8fafc; border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 6px 0; }
.h-email-echec strong { color: var(--erreur); }
.refus-emails { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; padding: 6px 10px; }
.groupe-champs { border: 0; padding: 0; margin: 0 0 14px; }
.groupe-champs legend { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); padding: 0 0 6px; border-bottom: 1px solid var(--bord); width: 100%; margin-bottom: 10px; }

/* Nouvelle proposition */
.onglets-marques { display: flex; gap: 6px; } .onglets-marques a { padding: 6px 12px; border: 1px solid var(--bord); border-radius: 6px; text-decoration: none; background: #fff; }
.onglets-marques a.actif { background: #111827; color: #fff; border-color: #111827; }
.proposition { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.proposition-recap { position: sticky; top: 16px; }
@media (max-width: 900px) { .proposition { grid-template-columns: 1fr; } .proposition-recap { position: static; } }
.etape-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -20px -20px 16px; padding: 14px 20px; border-bottom: 1px solid var(--bord); background: #f9fafb; border-radius: 10px 10px 0 0; }
.etape-titre h2 { margin: 0; } .etape-titre .discret { margin-left: auto; font-size: 13px; }
.numero { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #111827; color: #fff; font-weight: 700; font-size: 14px; }
.bascule { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.bascule button { border: 0; background: #fff; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--discret); }
.bascule button.actif { background: #111827; color: #fff; }
.resultats-recherche { list-style: none; padding: 0; margin: -6px 0 16px; border: 1px solid var(--bord); border-radius: 6px; }
.resultats-recherche:empty { display: none; }
.resultats-recherche li { border-bottom: 1px solid var(--bord); } .resultats-recherche li:last-child { border-bottom: 0; }
.resultats-recherche a, .resultats-recherche li.discret { display: block; padding: 8px 12px; text-decoration: none; color: var(--texte); }
.resultats-recherche a:hover { background: #f5f7ff; }
.client-choisi { background: #ecfdf3; border: 1px solid #abefc6; border-radius: 6px; padding: 8px 12px; }
.client-choisi a { margin-left: 8px; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 10px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--bord); border-radius: 10px; padding: 14px; cursor: pointer; font-weight: 400; margin: 0; }
.pack input { position: absolute; opacity: 0; }
.pack:has(input:checked) { border: 2px solid #16a34a; background: #f0fdf4; padding: 13px; }
.pack:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack-nom { font-weight: 700; font-size: 17px; }
.pack-prix { font-size: 24px; font-weight: 800; } .pack-prix small { font-size: 13px; font-weight: 400; color: var(--discret); }
.pack-points { list-style: none; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid var(--bord); font-size: 14px; }
.pack-points li::before { content: "✓ "; color: #16a34a; font-weight: 700; }
.pack-ref { margin-top: auto; padding-top: 8px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--discret); }
.options .option { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 400; }
.options .option[hidden] { display: none; }
.options .option { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.option-actions { display: flex; align-items: center; gap: 10px; }
.ajout-option { margin: 10px 0 4px; max-width: 100%; }
.option-quantite { display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; color: var(--discret); white-space: nowrap; }
.option-quantite input { width: 4.5em; }
.bascule.rythmes button small { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.pack-frais { font-size: 13px; color: var(--discret); }
.lignes-libres summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 10px 0; }
.lignes-libres input[type=text] { margin: 0; }
.recap h2 { background: #111827; color: #fff; margin: -20px -20px 16px; padding: 14px 20px; border-radius: 10px 10px 0 0; }
.recap dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; }
.recap dt { color: var(--discret); } .recap dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.recap .total { font-size: 20px; font-weight: 800; color: var(--texte); border-top: 1px solid var(--bord); padding-top: 10px; }
.recap-note { background: #f0fdf4; border: 1px solid #abefc6; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.bouton-large { display: block; width: 100%; padding: 12px; font-size: 16px; background: #16a34a; }
.case { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.case input { margin-top: 4px; }
.statut-a_valider { background: #fef0c7; color: #93370d; } .statut-a_revoir { background: #fee4e2; color: #b42318; }
.etiquette { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #93370d; background: #fef0c7; border-radius: 4px; padding: 1px 6px; }
.validation { border: 2px solid #fdb022; }
.validation input[type=text] { margin: 0; }
.ligne-libre td { background: #fffcf5; }
.note-privee p { margin: 6px 0 0; }
.liste-simple { list-style: none; padding: 0; margin: 0; } .liste-simple li { padding: 8px 0; border-bottom: 1px solid var(--bord); } .liste-simple li:last-child { border-bottom: 0; }
.recap dt { white-space: nowrap; }
.barre-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 0; z-index: 2; }
.barre-attribution .case, .barre-attribution select { margin: 0; width: auto; }
.barre-attribution input.court { width: 70px; display: inline-block; margin: 0 4px; }
.lc-selection { width: 18px; height: 18px; margin: 4px 0 0; }
.ligne-client:has(.lc-selection) { grid-template-columns: 22px minmax(180px, 1.3fr) 110px minmax(160px, 1fr) minmax(200px, 1.6fr) auto; }
@media (max-width: 900px) {
    .ligne-client:has(.lc-selection) { grid-template-columns: 22px 1fr auto; grid-template-areas: "sel qui etape" "action action action" "dernier dernier dernier" "boutons boutons boutons"; }
    .lc-selection { grid-area: sel; }
}
.barre-attribution .case { align-items: center; white-space: nowrap; } .barre-attribution .case input { margin-top: 0; }
.reprise { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.reprise-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reprise-ligne .actions { margin: 0; }
.lignes-editables .tableau { margin-bottom: 10px; }
.lignes-editables input[type=text] { margin: 0; }
.retirer { border: 1px solid var(--bord); background: #fff; color: var(--erreur); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.retirer:hover { background: #fef3f2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lignes-editables th:first-child, .lignes-editables td:first-child { width: 55%; }
.option-retiree td:first-child { color: var(--discret); text-decoration: line-through; }
.avec-suggestions { position: relative; }
.suggestions { position: absolute; z-index: 20; left: 0; min-width: min(420px, 90vw); top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--bord); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; font-weight: 400; }
.suggestions li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--bord); font-size: 14px; }
.suggestions li:last-child { border-bottom: 0; }
.suggestions li.actif, .suggestions li:hover { background: #f5f7ff; }
.suggestion-alerte { display: inline-block; margin-left: 6px; font-size: 12px; color: #b42318; }
.aide-saisie { margin: 0 0 8px; font-size: 13px; }
.alerte-info { color: #175cd3; background: #eff8ff; }
.type-fiche { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; }
.type-prospect { background: #eff8ff; color: #175cd3; }
.type-client { background: #dcfae6; color: #067647; }
.type-ancien { background: #f2f4f7; color: #475467; }
.statut-client { border-left: 4px solid #17b26a; }
.statut-client.ancien { border-left-color: #98a2b3; }
.production-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.production-entete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.production-entete h3 { margin: 0 0 2px; }
.production-avancement { font-weight: 700; font-size: 18px; white-space: nowrap; }
.dossier-production progress { width: 100%; height: 8px; margin: 8px 0; accent-color: #16a34a; }
.etapes-production { list-style: none; padding: 0; margin: 0; }
.etapes-production li { padding: 2px 0; }
.etapes-production form { display: flex; align-items: center; gap: 10px; }
.etape-case { background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer; text-align: left; color: var(--texte); }
.etapes-production li.faite .etape-case { color: var(--discret); text-decoration: line-through; }
.objectifs progress { width: 100%; height: 10px; accent-color: #2a4bd7; margin-bottom: 8px; }
.objectifs p { margin: 6px 0 2px; }
.histogramme { display: flex; gap: 10px; align-items: flex-end; height: 170px; padding-top: 8px; }
.histogramme .barre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.histogramme .barre i { display: block; width: 100%; max-width: 56px; background: #2a4bd7; border-radius: 4px 4px 0 0; min-height: 2px; }
.histogramme .valeur { font-size: 12px; font-weight: 600; }
.histogramme .mois { font-size: 12px; color: var(--discret); }
.grille-droits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sous-cases { margin-left: 24px; display: flex; flex-direction: column; gap: 2px; }
.cartes-marques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.carte-marque { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texte); border-top: 4px solid var(--couleur, #2a4bd7); }
.carte-marque:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.carte-marque .pastille { width: 14px; height: 14px; border-radius: 50%; }
.reglages-marque textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }
.logo-marque { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.logo-marque img { max-width: 220px; background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 6px; }
.reglages-marque input[type=color] { width: 64px; height: 36px; padding: 2px; }

/* ===== Navigation latérale ===== */
.lateral { position: fixed; inset: 0 auto 0 0; width: 240px; background: #111827; color: #fff; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px; overflow-y: auto; z-index: 30; }
.lateral a { color: #fff; text-decoration: none; }
.lateral .logo { font-weight: 700; font-size: 17px; padding: 0 6px; }
.avec-menu .contenu { margin-left: 240px; max-width: none; padding: 28px 32px; }
.avec-menu .contenu > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.recherche-globale input { margin: 0; background: #1f2937; border-color: #374151; color: #fff; }
.recherche-globale input::placeholder { color: #9ca3af; }
.creer summary { list-style: none; text-align: center; cursor: pointer; }
.creer summary::-webkit-details-marker { display: none; }
.creer-liste { display: flex; flex-direction: column; margin-top: 6px; background: #1f2937; border-radius: 8px; padding: 4px; }
.creer-liste a { padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.creer-liste a:hover { background: rgba(255,255,255,.1); }
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; }
.menu a:hover { background: rgba(255,255,255,.08); }
.menu a.actif { background: rgba(255,255,255,.16); font-weight: 600; box-shadow: inset 3px 0 0 #60a5fa; }
.menu-titre { margin: 14px 10px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
.pastille-menu { background: var(--erreur); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 700; padding: 0 8px; }
.compte { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 6px 0; border-top: 1px solid #374151; font-size: 14px; }
.compte .utilisateur { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-mobile, .voile, .menu-case { display: none; }
@media (max-width: 900px) {
    .avec-menu .contenu { margin-left: 0; padding: 16px 12px; }
    .barre-mobile { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 10px 12px; background: #111827; }
    .barre-mobile .logo { color: #fff; font-weight: 700; text-decoration: none; flex: 1; }
    .barre-mobile-relances { color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
    .barre-mobile-relances.a-faire { background: var(--erreur); border-radius: 99px; padding: 3px 10px; }
    .burger { width: 40px; height: 40px; margin: 0; display: grid; place-content: center; cursor: pointer; }
    .burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2px; background: #fff; content: ''; position: relative; }
    .burger span::before { top: -7px; position: absolute; } .burger span::after { top: 7px; position: absolute; }
    .lateral { transform: translateX(-100%); transition: transform .2s; width: min(280px, 85vw); }
    .menu-case:checked ~ .lateral { transform: none; }
    .menu-case:checked ~ .voile { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
}

/* ===== Fiche client et proposition : confort ===== */
.entete-historique { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.entete-historique h2 { margin: 0; }
.filtres-historique { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres-historique button { border: 1px solid var(--bord); background: #fff; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--discret); }
.filtres-historique button.actif { background: var(--texte); border-color: var(--texte); color: #fff; }
.historique li[hidden] { display: none; }
.numero.fait { background: #16a34a; font-size: 0; }
.numero.fait::before { content: '✓'; font-size: 15px; }
.manques { list-style: none; margin: 0 0 12px; padding: 8px 10px; background: #fffaeb; border: 1px solid #fedf89; border-radius: 6px; font-size: 13px; color: var(--avert); }
.manques li.titre { font-weight: 700; } .manques li:not(.titre)::before { content: '• '; }
.barre-total { display: none; }
@media (max-width: 900px) {
    .fe-actions { position: fixed; inset: auto 0 0 0; z-index: 15; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 10px 12px; background: #fff; border-top: 1px solid var(--bord); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
    .fe-actions .bouton { flex: 0 0 auto; white-space: nowrap; }
    .fiche-colonnes { padding-bottom: 70px; }
    .proposition { padding-bottom: 70px; }
    .barre-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; inset: auto 0 0 0; z-index: 15; padding: 10px 12px; background: #fff; border-top: 1px solid var(--bord); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
    .barre-total span { display: flex; flex-direction: column; font-size: 12px; color: var(--discret); }
    .barre-total strong { font-size: 18px; color: var(--texte); }
    .barre-total .bouton { background: #16a34a; }
}

/* ===== Liste de travail : barre fixe, lignes plus lisibles ===== */
.collant { position: sticky; top: 0; z-index: 10; background: var(--fond); padding-top: 4px; margin-top: -4px; }
.aide-vue strong { color: var(--texte); }
.vide { text-align: center; padding: 32px 20px; }
.ligne-client:hover { border-color: #c7cdd6; box-shadow: 0 1px 4px rgba(16,24,40,.08); }
.ligne-client.en-retard { background: #fffafa; }
.recherche .bouton { white-space: nowrap; }
@media (max-width: 900px) { .collant { top: 58px; } }

.indicateur.urgent { border-color: var(--erreur); } .indicateur.urgent .valeur { color: var(--erreur); }
.indicateur.attention { border-color: #fdb022; } .indicateur.attention .valeur { color: var(--avert); }
a.indicateur { text-decoration: none; color: inherit; transition: box-shadow .15s; } a.indicateur:hover { box-shadow: 0 2px 8px rgba(16,24,40,.12); }
.objectifs progress { width: 100%; height: 10px; }

/* ===== Équipe ===== */
.membre > summary { cursor: pointer; list-style: none; }
.membre > summary::-webkit-details-marker { display: none; }
.membre > summary::after { content: '▾ Régler'; color: var(--accent); font-size: 13px; font-weight: 600; align-self: center; white-space: nowrap; }
.membre[open] > summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bord); }
.membre[open] > summary::after { content: '▴ Fermer'; }
.membre[hidden] { display: none; }
.membre > summary:hover h3 { text-decoration: underline; }
.badges-membre { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.statut-neutre { background: #f2f4f7; color: #344054; }

/* ===== Marques et catalogue ===== */
.carte-marque progress { width: 100%; height: 8px; margin-top: 6px; }
.preparation { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; display: grid; gap: 2px; }
.preparation li::before { display: inline-block; width: 1.3em; }
.preparation li.ok::before { content: '✓'; color: var(--succes); font-weight: 700; }
.preparation li.requis { color: var(--erreur); } .preparation li.requis::before { content: '✕'; }
.preparation li.facultatif { color: var(--discret); } .preparation li.facultatif::before { content: '○'; }
.sommaire { position: sticky; top: 0; z-index: 9; display: flex; gap: 6px; overflow-x: auto; background: var(--fond); padding: 6px 0 10px; margin-bottom: 8px; }
.sommaire a { white-space: nowrap; padding: 5px 12px; border: 1px solid var(--bord); border-radius: 99px; background: #fff; text-decoration: none; color: var(--texte); font-size: 14px; }
.sommaire .ok { color: var(--succes); } .sommaire .requis { color: var(--erreur); } .sommaire .facultatif { color: var(--discret); }
.reglages-marque section[id] { scroll-margin-top: 60px; }
.barre-enregistrer { position: sticky; bottom: 0; z-index: 9; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 -2px 10px rgba(16,24,40,.08); }
@media (max-width: 900px) { .sommaire { top: 58px; } .barre-enregistrer { bottom: 0; } }

/* ===== Production et commissions ===== */
.age { color: var(--discret); } .age-long { color: var(--erreur); font-weight: 600; }
.etapes-production li.prochaine .etape-case { font-weight: 700; color: var(--texte); }
.etapes-production li.prochaine { background: #f0f9ff; border-radius: 6px; padding-left: 6px; }
.etape-case { min-height: 36px; }
.dossier-production[hidden] { display: none; }
.filtres-commissions { align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filtres-commissions input[type=month], .filtres-commissions select { width: auto; margin: 0; }
.tableau tfoot th { border-top: 2px solid var(--texte); background: #f9fafb; }

/* ===== Import, journal, modèles ===== */
.depot { display: flex; align-items: center; justify-content: center; min-height: 90px; margin-bottom: 14px; border: 2px dashed var(--bord); border-radius: 10px; background: #f9fafb; cursor: pointer; text-align: center; padding: 12px; position: relative; font-weight: 500; }
.depot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.depot.survol { border-color: var(--accent); background: #eef2ff; }
.depot.rempli { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
tr.ligne-alerte td { background: #fffaeb; }

/* Menu : groupes déroulants, plus compact */
.lateral { gap: 10px; padding: 16px 12px; }
.menu { gap: 1px; }
.menu a { padding: 7px 10px; }
.menu-titre { display: none; }
.groupe { margin-top: 6px; }
.groupe > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; user-select: none; }
.groupe > summary::-webkit-details-marker { display: none; }
.groupe > summary::after { content: '▸'; transition: transform .15s; }
.groupe[open] > summary::after { transform: rotate(90deg); }
.groupe > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.groupe > a { margin-left: 8px; }
.creer-liste a { padding: 7px 10px; }
.menu-section { margin: 12px 10px 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
.historique li.h-non-lu { background: #f0f9ff; border-radius: 6px; padding-left: 6px; }
.h-email-recu .h-texte { background: #f8fafc; border-left: 3px solid #0284c7; padding: 6px 10px; border-radius: 0 6px 6px 0; }
.ligne-client.courrier.non-lu { border-left: 4px solid var(--accent); background: #f8faff; }