/* Portail Harvey.
   Deux idées seulement : les listes sont des onglets de classeur (comme les
   onglets Excel d'où elles viennent), et la recherche surligne au Stabilo.
   Tout le reste reste sobre.

   Chaque entreprise peut habiller le portail : --marque (couleur d'accent),
   le thème sombre, le style des titres et son logo dans le menu. Elles sont
   posées par applyBrand() dans app.js ; sans réglage, on garde le cobalt. */

@font-face { font-family: "Geist"; font-weight: 400 600; font-display: swap;
  src: url("/web/fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400 500; font-display: swap;
  src: url("/web/fonts/geist-mono.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400 600; font-display: swap;
  src: url("/web/fonts/newsreader.woff2") format("woff2"); }

:root {
  --papier: #F1F3F2;
  --papier-2: #E7EBE9;
  --carte: #FFFFFF;
  --encre: #172126;
  --gris: #5D6A6F;
  --trait: #DCE2E0;
  --trait-fort: #C3CCC9;
  --cobalt: #2A43C4;
  --cobalt-fort: #1F339A;
  --cobalt-doux: #E9EDFB;
  --surligneur: #F7E26B;
  --rouge: #B3261E;
  --rouge-doux: #FBEAE8;
  --vert: #1D7A50;
  --vert-doux: #E3F3EB;
  --ombre: 0 1px 2px rgba(23, 33, 38, .06), 0 8px 24px rgba(23, 33, 38, .06);

  --sans: "Geist", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --titre: "Newsreader", Georgia, serif;

  --r: 10px;
  color-scheme: light;

  /* Accent : la couleur de l'entreprise, sinon le cobalt. */
  --accent: var(--marque, var(--cobalt));
  --accent-texte: var(--marque-texte, #FFFFFF);
  --accent-fort: color-mix(in srgb, var(--accent) 80%, var(--encre));
  --accent-doux: color-mix(in srgb, var(--accent) 12%, var(--carte));
  /* Information (statuts « en cours », « invité »…) : reste bleu partout. */
  --info: var(--cobalt);
  --info-doux: var(--cobalt-doux);
  /* Menu latéral : toujours sombre, pour qu'un logo blanc s'y lise. */
  --menu-fond: var(--marque-menu, #121719);
  --menu-texte: #EEF2F0;
  --menu-gris: #8E9A9D;
  --menu-trait: rgba(255, 255, 255, .08);
  --menu-survol: rgba(255, 255, 255, .06);
  --police-titre: var(--titre);
}

/* Thème sombre : gris neutres (pas de teinte), pour qu'une marque noir et
   blanc reste noire et blanche. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0D0D0E; --papier-2: #171718; --carte: #141415; --encre: #EDEDEB;
    --gris: #9C9C98; --trait: #262628; --trait-fort: #3A3A3D; --cobalt: #9DACFF;
    --cobalt-fort: #C3CCFF; --cobalt-doux: #1E2547; --surligneur: rgba(247, 226, 107, .4);
    --rouge: #FF8A80; --rouge-doux: #3A1D1B; --vert: #6FD3A2; --vert-doux: #16302A;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --accent-texte: var(--marque-texte, #0D0D0E);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0D0D0E; --papier-2: #171718; --carte: #141415; --encre: #EDEDEB;
  --gris: #9C9C98; --trait: #262628; --trait-fort: #3A3A3D; --cobalt: #9DACFF;
  --cobalt-fort: #C3CCFF; --cobalt-doux: #1E2547; --surligneur: rgba(247, 226, 107, .4);
  --rouge: #FF8A80; --rouge-doux: #3A1D1B; --vert: #6FD3A2; --vert-doux: #16302A;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --accent-texte: var(--marque-texte, #0D0D0E);
  color-scheme: dark;
}

/* Titres « modernes » : capitales grasses et serrées, façon affiche. */
:root.titres-modernes { --police-titre: var(--sans); }
:root.titres-modernes .titre, :root.titres-modernes .entreprise-nom {
  text-transform: uppercase; font-weight: 600; letter-spacing: -.02em;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier); color: var(--encre);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.mono, .chiffres, .onglet-compte { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Barre du haut -------------------------------------------------- */
.barre {
  display: flex; align-items: center; gap: 20px; padding: 0 24px; height: 56px;
  background: var(--carte); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 10;
}
.marque { display: flex; align-items: baseline; gap: 8px; color: var(--encre); }
.marque:hover { text-decoration: none; }
.marque-nom { font: 600 17px/1 var(--sans); letter-spacing: -.01em; }
.marque-sous { font: 500 11px/1 var(--mono); color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.fil { display: flex; align-items: center; gap: 8px; color: var(--gris); min-width: 0; flex: 1; }
.fil a { color: var(--gris); }
.fil span:last-child { color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte { display: flex; align-items: center; gap: 12px; }
.compte-nom { color: var(--gris); white-space: nowrap; }

/* --- Mise en page -------------------------------------------------- */
.page { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; }
.entete { margin-bottom: 20px; }
.titre { font: 500 30px/1.15 var(--police-titre); letter-spacing: -.01em; margin: 0 0 6px; }
.aide { color: var(--gris); margin: 0; max-width: 64ch; }
.entete .chiffres { color: var(--gris); font-size: 12.5px; margin: 0; }

.sections {
  display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 24px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.section-lien { padding: 10px 14px; color: var(--gris); font-weight: 500; white-space: nowrap; }
.section-lien:hover { color: var(--encre); text-decoration: none; }
.section-lien[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--encre); }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); padding: 20px; }
.carte + .carte { margin-top: 16px; }
.carte h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 4px; }
.carte > .aide { margin-bottom: 16px; }

.vide {
  border: 1px dashed var(--trait-fort); border-radius: var(--r); padding: 40px 24px;
  text-align: center; color: var(--gris);
}
.vide p { margin: 0 0 12px; }
.vide p:last-child { margin: 0; }

/* --- Formulaires et boutons ----------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.champ-label { font-weight: 500; font-size: 13px; }
.champ-aide { color: var(--gris); font-size: 12.5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  font: inherit; color: var(--encre); background: var(--carte);
  border: 1px solid var(--trait-fort); border-radius: 8px; padding: 8px 10px; min-height: 36px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[readonly] { background: var(--papier); font-family: var(--mono); font-size: 12.5px; }
.ligne-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ligne-form .champ { flex: 1; min-width: 200px; margin: 0; }

.btn {
  font: 500 13.5px/1 var(--sans); border-radius: 8px; padding: 0 14px; min-height: 36px;
  border: 1px solid var(--trait-fort); background: var(--carte); color: var(--encre); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--papier); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.btn-principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.btn-discret { border-color: transparent; background: transparent; color: var(--gris); }
.btn-discret:hover { background: var(--papier-2); color: var(--encre); }
.btn-danger { color: var(--rouge); }
.btn-danger:hover { background: var(--rouge-doux); }
.btn-petit { min-height: 30px; padding: 0 10px; font-size: 12.5px; }

.erreur { color: var(--rouge); background: var(--rouge-doux); border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; }
.succes { background: var(--vert-doux); border-radius: 8px; padding: 14px 16px; margin-top: 16px; }
.succes p { margin: 0 0 10px; }
.succes .ligne-form input { flex: 1; min-width: 220px; }

/* --- Connexion ------------------------------------------------------ */
.accueil { min-height: 100vh; display: grid; place-content: center; gap: 24px; padding: 24px; }
.marque-grande { font: 600 26px/1 var(--sans); letter-spacing: -.02em; text-align: center; }
.marque-grande span { display: block; margin-top: 8px; font: 500 11px/1 var(--mono); color: var(--gris); text-transform: uppercase; letter-spacing: .12em; }
.connexion { width: min(380px, calc(100vw - 48px)); box-shadow: var(--ombre); padding: 28px; }
.connexion h1 { font: 500 24px/1.2 var(--titre); margin: 0 0 4px; }
.connexion .aide { margin-bottom: 20px; }
.connexion .btn-principal { width: 100%; justify-content: center; min-height: 40px; margin-top: 4px; }

/* --- Liste des entreprises ------------------------------------------ */
.entreprises { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte); }
.entreprises li + li { border-top: 1px solid var(--trait); }
.entreprise { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 20px; color: var(--encre); }
.entreprise:hover { background: var(--papier); text-decoration: none; }
.entreprise-nom { font: 500 19px/1.2 var(--police-titre); }
.entreprise .chiffres { color: var(--gris); font-size: 12.5px; white-space: nowrap; }

/* --- Onglets de classeur (la signature) ---------------------------- */
/* Les onglets chevauchent d'1 px le bord du classeur : l'onglet actif, de la
   couleur de la carte, efface ce bord et fait corps avec le tableau. */
.onglets {
  display: flex; gap: 4px; padding: 0 10px; margin-bottom: -1px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: relative; z-index: 1;
}
.onglet {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px 10px;
  border: 1px solid var(--trait); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--papier-2); color: var(--gris); font-weight: 500; white-space: nowrap;
}
.onglet:hover { color: var(--encre); text-decoration: none; }
.onglet[aria-selected="true"] {
  background: var(--carte); color: var(--encre);
  box-shadow: inset 0 3px 0 var(--marque, var(--surligneur));
}
.onglet-compte { font-size: 11.5px; color: var(--gris); }
.classeur { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }

.outils { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--trait); align-items: center; }
.outils .recherche { flex: 1 1 260px; max-width: 360px; }
.filtre { display: flex; flex-direction: column; gap: 2px; flex: 0 1 180px; min-width: 140px; }
.filtre span { font-size: 11px; color: var(--gris); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtre select { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.filtre select.actif { border-color: var(--accent); background: var(--accent-doux); }
.outils .btn-discret { align-self: flex-end; }

/* --- Tableau -------------------------------------------------------- */
.tableau-zone { overflow: auto; max-height: calc(100vh - 300px); min-height: 240px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th {
  position: sticky; top: 0; background: var(--carte); z-index: 1; text-align: left;
  border-bottom: 1px solid var(--trait-fort); padding: 0; font-weight: 500;
}
.tri {
  all: unset; box-sizing: border-box; display: flex; gap: 4px; align-items: center; width: 100%;
  padding: 10px 12px; cursor: pointer; white-space: nowrap; color: var(--gris); font-size: 12px;
}
.tri:hover, th[aria-sort] .tri { color: var(--encre); }
.tri:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
td {
  padding: 9px 12px; border-bottom: 1px solid var(--trait); vertical-align: top;
  max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--papier); }
tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
td.email { font-family: var(--mono); font-size: 12px; }
td.vide-cellule::after { content: "—"; color: var(--trait-fort); }
mark {
  color: inherit; padding: 0 1px; border-radius: 2px;
  background: linear-gradient(transparent 12%, var(--surligneur) 12%, var(--surligneur) 88%, transparent 88%);
}

.pagination { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--trait); color: var(--gris); flex-wrap: wrap; }
.pagination .total { flex: 1; font-size: 12.5px; }
.pagination select { width: auto; min-height: 30px; padding: 2px 8px; }
.chargement { opacity: .55; transition: opacity .15s; }

/* --- Fiche prospect (tiroir) ---------------------------------------- */
.fond { position: fixed; inset: 0; background: rgba(15, 20, 22, .28); z-index: 20; }
.fiche {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 21;
  background: var(--carte); border-left: 1px solid var(--trait); box-shadow: var(--ombre);
  display: flex; flex-direction: column; animation: glisse .18s ease-out;
}
@keyframes glisse { from { transform: translateX(24px); opacity: 0; } }
.fiche-tete { padding: 20px 20px 16px; border-bottom: 1px solid var(--trait); display: flex; gap: 12px; align-items: flex-start; }
.fiche-tete div { flex: 1; min-width: 0; }
.fiche-tete h2 { font: 500 22px/1.2 var(--police-titre); margin: 0 0 4px; overflow-wrap: anywhere; }
.fiche-tete p { margin: 0; color: var(--gris); }
.fiche-corps { overflow-y: auto; padding: 0 20px 28px; }
.fiche-bloc { padding: 16px 0; border-bottom: 1px solid var(--trait); }
.fiche-bloc:last-child { border-bottom: 0; }
.fiche-bloc h3 { font: 600 13px/1.3 var(--sans); margin: 0 0 10px; }
.fiche-bloc .champ { margin-bottom: 10px; }
.fiche-bloc p { margin: 0 0 6px; }
.fiche-email { font: 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.fiche dl { margin: 0; }
.historique-fiche { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historique-fiche li { display: grid; gap: 2px; padding: 6px 0; }
.historique-fiche time { color: var(--gris); font: 11.5px/1.4 var(--mono); }
.fiche dt { font: 500 11px/1.3 var(--mono); color: var(--gris); text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; }
.fiche dd { margin: 4px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* --- Membres, activité ---------------------------------------------- */
.table-simple { width: 100%; }
.table-simple th { position: static; padding: 8px 12px; color: var(--gris); font-size: 12px; }
.table-simple td { white-space: normal; max-width: none; cursor: default; }
.table-simple tbody tr { cursor: default; }
.table-simple tbody tr:hover td { background: transparent; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.statut { display: inline-block; white-space: nowrap; font: 500 11.5px/1 var(--mono); padding: 4px 8px; border-radius: 999px; background: var(--papier-2); color: var(--gris); }
.statut-actif { background: var(--vert-doux); color: var(--vert); }
.statut-invité { background: var(--info-doux); color: var(--info); }
.journal { list-style: none; margin: 0; padding: 0; }
.journal li { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.journal li:last-child { border-bottom: 0; }
.journal time { color: var(--gris); font: 12px/1.5 var(--mono); }
.journal .qui { color: var(--gris); }

/* --- Recherches ----------------------------------------------------- */
textarea {
  font: inherit; color: var(--encre); background: var(--carte); width: 100%; resize: vertical;
  border: 1px solid var(--trait-fort); border-radius: 8px; padding: 8px 10px; line-height: 1.5;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type="number"] { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--trait-fort); border-radius: 8px; padding: 8px 10px; min-height: 36px; width: 100%; }
.segment { display: inline-flex; padding: 3px; gap: 3px; background: var(--papier-2); border-radius: 10px; margin: 4px 0 18px; }
.segment-btn {
  font: 500 13.5px/1 var(--sans); border: 0; border-radius: 8px; padding: 9px 16px;
  background: transparent; color: var(--gris); cursor: pointer;
}
.segment-btn[aria-checked="true"] { background: var(--carte); color: var(--encre); box-shadow: 0 1px 2px rgba(23, 33, 38, .12); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.case { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; cursor: pointer; }
.case input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.budget { margin: 0 0 6px; color: var(--gris); font-size: 13px; }
.jauge { height: 4px; background: var(--papier-2); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.jauge span { display: block; height: 100%; width: 0; background: var(--accent); }
.plan { margin-top: 18px; border: 1px solid var(--accent); border-radius: var(--r); padding: 16px 18px; background: var(--accent-doux); }
.plan h3 { font: 600 15px/1.3 var(--sans); margin: 0 0 6px; }
.plan p { margin: 0 0 8px; }
.plan-cout { font-weight: 500; }
.plan details { margin: 6px 0 14px; }
.plan summary { cursor: pointer; color: var(--accent); }
.requetes { margin: 8px 0 0; padding-left: 18px; font: 12px/1.6 var(--mono); color: var(--gris); overflow-wrap: anywhere; }
.ligne-boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.historique { list-style: none; margin: 0; padding: 0; }
.historique li { padding: 14px 0; border-bottom: 1px solid var(--trait); }
.historique li:first-child { padding-top: 4px; }
.historique li:last-child { border-bottom: 0; }
.historique li p { margin: 4px 0 8px; }
.historique-tete { display: flex; gap: 10px; align-items: baseline; }
.historique-resume { font-weight: 500; }
.historique-meta { color: var(--gris); font-size: 12.5px; }
.statut-en_cours, .statut-en_attente, .statut-annulation { background: var(--info-doux); color: var(--info); }
.statut-terminee { background: var(--vert-doux); color: var(--vert); }
.statut-echouee { background: var(--rouge-doux); color: var(--rouge); }
a.btn:hover { text-decoration: none; }

/* --- Sélection, suivi, emails, export ------------------------------- */
.case-col { width: 36px; padding: 0 0 0 14px !important; cursor: default; }
th.case-col { padding: 10px 0 10px 14px !important; }
.case-col input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
td.case-col { padding-top: 10px !important; }
.export { display: flex; align-items: center; gap: 6px; margin-left: auto; align-self: flex-end; color: var(--gris); font-size: 12.5px; }
.selection {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px;
  background: var(--accent-doux); border-bottom: 1px solid var(--trait);
}
.selection strong { font-weight: 600; }
.selection-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.selection select { width: auto; min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
.tache { padding: 14px 16px; border-bottom: 1px solid var(--trait); background: var(--papier); }
.tache h3 { font: 600 14px/1.3 var(--sans); margin: 0 0 8px; }
.tache ul { margin: 0 0 12px; padding-left: 18px; }
.tache li { margin-bottom: 3px; }
.tache p { margin: 0 0 8px; }
.tache .case { margin-bottom: 12px; }
.pastille { display: inline-block; white-space: nowrap; font: 500 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--papier-2); color: var(--gris); }
.pastille-suivi-a-contacter, .pastille-email-a-verifier { background: var(--info-doux); color: var(--info); }
.pastille-suivi-contacte { background: #EEE8FB; color: #5B3FB0; }
.pastille-suivi-repondu, .pastille-suivi-rdv, .pastille-email-ok { background: var(--vert-doux); color: var(--vert); }
.pastille-suivi-rdv { font-weight: 600; }
.pastille-suivi-pas-interesse, .pastille-email-invalide { background: var(--rouge-doux); color: var(--rouge); }
.pastille-email-risque, .pastille-email-incertain { background: #FBF1DD; color: #8A5A00; }
:root[data-theme="dark"] .pastille-suivi-contacte { background: #2A2147; color: #C3B2FF; }
:root[data-theme="dark"] .pastille-email-risque, :root[data-theme="dark"] .pastille-email-incertain { background: #3A2E14; color: #F2C66B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pastille-suivi-contacte { background: #2A2147; color: #C3B2FF; }
  :root:not([data-theme="light"]) .pastille-email-risque, :root:not([data-theme="light"]) .pastille-email-incertain { background: #3A2E14; color: #F2C66B; }
}

/* --- Onglet Suivi : une colonne par statut --------------------------- */
.suivi-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.suivi-outils input[type="search"] { flex: 1 1 260px; max-width: 360px; }
.suivi-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gris); margin: 0 0 14px; font-size: 13px; }
.pastille-relance-retard { background: var(--rouge-doux); color: var(--rouge); }
.pastille-relance-jour { background: #FBF1DD; color: #8A5A00; }
.tableau-suivi {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px;
  overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.colonne-suivi {
  background: var(--papier-2); border-radius: var(--r); border-top: 3px solid var(--trait-fort);
  display: flex; flex-direction: column; max-height: calc(100vh - 290px); min-height: 160px;
}
.colonne-suivi header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px 6px; }
.colonne-suivi h3 { font: 600 13px/1.2 var(--sans); margin: 0; }
.colonne-compte { font: 500 12px/1 var(--mono); color: var(--gris); }
.colonne-cartes { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px; overflow-y: auto; flex: 1; }
.colonne-vide { color: var(--gris); font-size: 12.5px; text-align: center; margin: 18px 0; }
.colonne-suivi.depot { outline: 2px dashed var(--accent); outline-offset: -2px; }
.colonne-a-contacter { border-top-color: var(--info); }
.colonne-contacte { border-top-color: #7A5BD6; }
.colonne-repondu, .colonne-rdv { border-top-color: var(--vert); }
.colonne-pas-interesse { border-top-color: var(--rouge); }
.carte-suivi {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px;
  cursor: grab; box-shadow: 0 1px 2px rgba(23, 33, 38, .05);
}
.carte-suivi:hover { border-color: var(--trait-fort); }
.carte-suivi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.carte-suivi.glisse { opacity: .5; }
.carte-suivi h4 { font: 600 13.5px/1.3 var(--sans); margin: 0 0 2px; overflow-wrap: anywhere; }
.carte-sous { margin: 0; color: var(--gris); font-size: 12.5px; line-height: 1.4; }
.carte-etape { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; }
.relance { font: 500 11.5px/1 var(--mono); color: var(--gris); }
.relance-retard { color: var(--rouge); }
.relance-jour { color: #8A5A00; }
.carte-suivi footer { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.carte-liste { font: 11px/1.2 var(--mono); color: var(--gris); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-doux); color: var(--accent);
  font: 600 10.5px/24px var(--sans); text-align: center; flex: none;
}
.deux-colonnes-etape { grid-template-columns: 1.6fr 1fr; }
input[type="date"] { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--trait-fort); border-radius: 8px; padding: 7px 10px; min-height: 36px; width: 100%; }
.fiche-liste { margin-top: 10px !important; }

/* --- Cadre : menu latéral + contenu --------------------------------- */
.cadre { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--menu-fond); color: var(--menu-texte); padding: 22px 14px 18px;
}
.menu a { color: inherit; }
.menu a:hover { text-decoration: none; }
.menu-marque { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px 10px 20px; }
.menu-marque-ligne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-logo { height: 38px; width: auto; max-width: 64px; object-fit: contain; flex: none; }
.menu-nom-img { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.menu-nom { font: 600 16px/1.2 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.menu-harvey { display: flex; align-items: baseline; gap: 8px; }
.menu-harvey .marque-sous { color: var(--menu-gris); }
.menu-retour { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--menu-gris) !important; padding: 0 10px 14px; }
.menu-retour:hover { color: var(--menu-texte) !important; }
.menu-titre { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--menu-gris); padding: 14px 10px 8px; border-top: 1px solid var(--menu-trait); }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px;
  color: var(--menu-gris); font-weight: 500;
}
.menu nav a:hover { color: var(--menu-texte); background: var(--menu-survol); }
.menu nav a[aria-current="page"] { color: var(--menu-texte); background: var(--menu-survol); box-shadow: inset 2px 0 0 var(--menu-texte); }
.icone { width: 18px; height: 18px; flex: none; }
.icone svg { width: 100%; height: 100%; display: block; }
.menu-pied { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--menu-trait); display: grid; gap: 4px; }
.menu-qui { font-weight: 500; overflow-wrap: anywhere; }
.menu-role { color: var(--menu-gris); font-size: 12.5px; }
.menu-pied .btn { margin-top: 8px; justify-content: flex-start; padding: 0; min-height: 28px; color: var(--menu-gris); }
.menu-pied .btn:hover { background: transparent; color: var(--menu-texte); }
.propulse { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--menu-gris); opacity: .7; margin-top: 10px; }
.contenu { min-width: 0; }
.cadre .page { padding: 34px 40px 72px; margin: 0; max-width: 1400px; }
.surtitre { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 0 0 10px; }
.entete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* --- Accueil d'une entreprise ---------------------------------------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); padding: 16px 18px 18px; color: var(--encre); display: block; }
a.tuile:hover { text-decoration: none; border-color: var(--trait-fort); }
.tuile-label { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.tuile-valeur { font: 600 32px/1.1 var(--sans); letter-spacing: -.02em; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.tuile-detail { color: var(--gris); font-size: 12.5px; }
.tuile-detail .alerte { color: var(--rouge); font-weight: 500; }
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.accueil-grille .carte + .carte { margin-top: 0; }
.colonne-droite, .colonne-gauche { display: grid; gap: 16px; }
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.carte-tete h2 { margin: 0; }
.carte-tete a { font-size: 12.5px; }
.relances { list-style: none; margin: 0; padding: 0; }
.relances li { border-top: 1px solid var(--trait); }
.relances li:first-child { border-top: 0; }
.relances button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid;
  grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 4px; align-items: baseline;
}
.relances button:hover { background: var(--papier); }
.relances button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.relances strong { font-weight: 600; display: block; }
.relances .carte-sous { margin-top: 1px; }
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.barres li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 36px; gap: 12px; align-items: center; font-size: 13px; }
.barre-piste { height: 8px; background: var(--papier-2); border-radius: 4px; overflow: hidden; }
.barre-remplie { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.barres .valeur { font: 500 12.5px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.budget-ligne { display: grid; gap: 6px; margin-bottom: 14px; }
.budget-ligne:last-child { margin-bottom: 0; }
.budget-ligne div:first-child { display: flex; justify-content: space-between; font-size: 13px; }
.budget-ligne .valeur { font: 500 12.5px/1 var(--mono); color: var(--gris); }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--trait); font-size: 13px; }
.liste-simple li:first-child { border-top: 0; }
.liste-simple .valeur { font: 500 12.5px/1.4 var(--mono); color: var(--gris); white-space: nowrap; }

/* --- Apparence (Réglages) -------------------------------------------- */
.apercu-menu { background: var(--menu-fond); color: var(--menu-texte); border-radius: var(--r); padding: 18px; display: flex; align-items: center; gap: 14px; min-height: 76px; margin-bottom: 16px; }
.choix-image { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: end; margin-bottom: 16px; }
.choix-image .champ { margin: 0; }
.vignette { height: 44px; width: auto; max-width: 140px; object-fit: contain; background: var(--menu-fond); border-radius: 6px; padding: 6px; }
input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--carte); cursor: pointer; }
.ligne-couleur { display: flex; gap: 8px; align-items: center; }
.ligne-couleur input[type="text"] { width: 120px; font-family: var(--mono); }

/* --- Notifications -------------------------------------------------- */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 30; }
.toast { background: var(--encre); color: var(--carte); padding: 10px 16px; border-radius: 8px; box-shadow: var(--ombre); animation: monte .18s ease-out; }
.toast-erreur { background: var(--rouge); color: #fff; }
@keyframes monte { from { transform: translateY(8px); opacity: 0; } }

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

/* --- Petits écrans -------------------------------------------------- */
@media (max-width: 720px) {
  .barre { padding: 0 16px; gap: 12px; }
  .fil, .compte-nom { display: none; }
  .compte { margin-left: auto; }
  .page { padding: 20px 16px 48px; }
  .titre { font-size: 25px; }
  .entreprise { flex-direction: column; gap: 4px; }
  .outils .recherche { max-width: none; }
  .filtre { flex: 1 1 140px; }
  .tableau-zone { max-height: none; }
  .journal li { grid-template-columns: 1fr; gap: 2px; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .historique-tete { flex-direction: column; gap: 6px; }
}

/* --- Menu sur petits écrans : il passe en haut, les liens défilent --- */
@media (max-width: 900px) {
  .cadre { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; padding: 14px 16px 10px; }
  .menu-marque { flex-direction: row; align-items: center; padding: 0 0 12px; }
  .menu-retour { padding: 0 0 10px; }
  .menu-titre { display: none; }
  .menu nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .menu nav a { white-space: nowrap; padding: 8px 10px; }
  .menu nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--menu-texte); }
  .menu-pied { margin-top: 10px; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .menu-pied .btn { margin: 0 0 0 auto; }
  .propulse { display: none; }
  .cadre .page { padding: 22px 16px 56px; }
  .accueil-grille { grid-template-columns: 1fr; }
  .relances button { grid-template-columns: 78px minmax(0, 1fr); }
}

/* --- Compléments : liste des entreprises, réglages -------------------- */
.entreprise-identite { display: flex; align-items: center; gap: 14px; min-width: 0; }
.entreprise-logo {
  width: 40px; height: 40px; border-radius: 9px; background: var(--menu-fond); color: var(--menu-texte);
  display: grid; place-items: center; flex: none; font: 600 15px/1 var(--sans); overflow: hidden;
}
.entreprise-logo img { width: 30px; height: 30px; object-fit: contain; }
.sous-titre { font: 600 13.5px/1.3 var(--sans); margin: 0 0 4px; }
.separateur { border: 0; border-top: 1px solid var(--trait); margin: 22px 0 18px; }
.carte > .btn-principal { margin-top: 4px; }

/* --- Corrections d'affichage de l'accueil ----------------------------- */
.barre-piste, .barre-remplie { display: block; }
.tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.relances button { grid-template-columns: 132px minmax(0, 1fr); }
.relances .relance { white-space: nowrap; }
.entreprise { align-items: center; }
.barre-piste { background: var(--trait); }
@media (max-width: 900px) { .relances button { grid-template-columns: 1fr; gap: 3px; } }

/* --- Accent noir : liens soulignés dans le contenu --------------------- */
:root.accent-noir .page a:not(.btn):not(.tuile):not(.onglet):not(.entreprise) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:root.accent-noir .page a:not(.btn):not(.tuile):not(.onglet):not(.entreprise):hover { text-decoration-thickness: 2px; }

/* --- Actualités : la veille ---------------------------------------------
   Une actualité est une carte de presse : ce qu'il se passe, ce que
   l'entreprise peut en faire, puis la note de fiabilité et ses sources.
   Vert / ambre / rouge ne servent qu'à la fiabilité. */
:root { --ambre: #8A5A00; --ambre-doux: #FBF1DD; }
:root[data-theme="dark"] { --ambre: #F2C66B; --ambre-doux: #3A2E14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ambre: #F2C66B; --ambre-doux: #3A2E14; }
}

.veille-intro { margin: -8px 0 16px; }
.veille-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 18px;
}
.veille-etat { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.veille-etat p { margin: 0; }
.veille-etat-titre { font-weight: 500; }
.veille-voyant { width: 8px; height: 8px; border-radius: 50%; background: var(--trait-fort); margin-top: 7px; flex: none; }
.veille-voyant.actif { background: var(--info); animation: veille-pouls 1.4s ease-in-out infinite; }
@keyframes veille-pouls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .veille-voyant.actif { animation: none; } }
.texte-erreur { color: var(--rouge); }

.veille-panneau { overflow: visible; }
.veille-corps { padding: 18px 20px 22px; }
.veille-corps > h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 4px; }
.veille-corps > .aide { margin-bottom: 16px; }
.periode-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.periode-nav strong { font: 500 18px/1.3 var(--police-titre); text-align: center; }
:root.titres-modernes .periode-nav strong { text-transform: uppercase; font: 600 14px/1.3 var(--sans); letter-spacing: .02em; }
.veille-resume { color: var(--gris); font-size: 12.5px; margin: 0 0 14px; }

.essentiel {
  border-left: 3px solid var(--accent); background: var(--papier); border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px; margin-bottom: 16px;
}
.essentiel h2 { font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin: 0 0 8px; }
.essentiel ul { margin: 0; padding-left: 18px; }
.essentiel li { margin: 4px 0; max-width: 90ch; }

.actus { display: grid; gap: 12px; }
.actu {
  border: 1px solid var(--trait); border-radius: var(--r); padding: 16px 18px; background: var(--carte);
  display: grid; gap: 8px;
}
.actu h3 { font: 600 16px/1.35 var(--sans); margin: 0; }
.actu p { margin: 0; }
.actu-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.actu-pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.pastille-reelle { background: var(--encre); color: var(--carte); }
.pastille-potentielle { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pastille-nouveau { background: var(--info-doux); color: var(--info); }
.actu-meta { color: var(--gris); font-size: 13px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.actu-quand { font-weight: 500; color: var(--encre); }
.actu-resume { max-width: 90ch; }
.actu-angle { background: var(--accent-doux); border-radius: 8px; padding: 8px 12px; font-size: 13px; max-width: 90ch; }

.fiab { font: 500 11.5px/1 var(--mono); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.fiab-elevee { color: var(--vert); background: var(--vert-doux); }
.fiab-moyenne { color: var(--ambre); background: var(--ambre-doux); }
.fiab-faible { color: var(--rouge); background: var(--rouge-doux); }
.actu-fiab summary { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--gris); font-size: 12.5px; list-style: none; }
.actu-fiab summary::-webkit-details-marker { display: none; }
.actu-fiab summary::after { content: "+"; font-family: var(--mono); }
.actu-fiab[open] summary::after { content: "−"; }
.actu-fiab ul { margin: 8px 0 0; padding-left: 18px; color: var(--gris); font-size: 12.5px; }
.fiab-jauge { width: 90px; height: 6px; border-radius: 999px; background: var(--papier-2); overflow: hidden; flex: none; padding: 0; }
.fiab-jauge span { display: block; height: 100%; background: currentColor; }

.actu-sources h4 { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin: 4px 0 6px; }
.actu-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.actu-sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.actu-sources a { font-weight: 500; white-space: nowrap; }
.actu-source-titre { color: var(--encre); flex: 1 1 260px; min-width: 0; }
.actu-source-meta { color: var(--gris); font: 400 11.5px/1.4 var(--mono); }

.actu-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--trait); padding-top: 10px; margin-top: 2px; }
.actu-vote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.actu-avis { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 13px; font-weight: 500; }
.actu-avis-fiable { color: var(--vert); }
.actu-avis-pas_fiable { color: var(--rouge); }

.veille-bloc + .veille-bloc { margin-top: 28px; }
.veille-bloc h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 4px; }
.veille-bloc > .aide { margin-bottom: 12px; }
.tableau-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r); }
.veille-table td { vertical-align: top; }
.veille-table select { min-height: 30px; padding: 3px 8px; font-size: 12.5px; width: auto; max-width: 200px; }
.veille-table th, .veille-table td.mono { white-space: nowrap; }
.veille-bloc > .aide.veille-types { font-size: 12.5px; margin-top: -8px; }
.veille-table .carte-sous { display: block; }
.requete-texte { font: 400 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.credit { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.credit-jauge { width: 64px; height: 6px; border-radius: 999px; background: var(--papier-2); overflow: hidden; }
.credit-jauge span { display: block; height: 100%; background: var(--accent); }
.cases-ligne { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.cases-ligne .case { margin: 0; }
.veille-corps textarea, .carte textarea { font: inherit; width: 100%; }

.actus-mini { list-style: none; margin: 0; padding: 0; }
.actus-mini li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--trait); }
.actus-mini li:first-child { border-top: 0; }
.actus-mini a { font-weight: 500; }
.actus-mini .carte-sous { display: block; }
.fiab-point { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.fiab-point.fiab-elevee { background: var(--vert); }
.fiab-point.fiab-moyenne { background: var(--ambre); }
.fiab-point.fiab-faible { background: var(--rouge); }

@media (max-width: 700px) {
  .veille-corps { padding: 14px 12px 18px; }
  .actu { padding: 14px; }
  .periode-nav strong { font-size: 15px; }
  .veille-barre .btn { width: 100%; justify-content: center; }
}

/* Réglages de la veille : pays rangés par région */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 8px; }
.region { border: 1px solid var(--trait); border-radius: var(--r); padding: 8px 12px 10px; margin: 0; min-width: 0; }
.region legend { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); padding: 0 4px; }
.region .case { margin: 5px 0; }

/* Menu « Actions » d'une personne (Membres, Administrateurs) */
.menu-actions { width: auto; min-width: 120px; min-height: 30px; padding: 3px 8px; font-size: 12.5px; }