:root {
  --encre: #14213d;
  --encre-douce: #4a5872;
  --trait: #e6eaf0;
  --bord: #e3e8ef;
  --bord-fort: #c9d3e1;
  --fond: #f4f6f9;
  --carte: #ffffff;
  --accent: #2b59c3;
  --accent-pale: #eaf0fb;
  --urgent: #a83214; --urgent-pale: #fde4dc;
  --proche: #7a4d00; --proche-pale: #fdf0d8;
  --loin: #24614f; --loin-pale: #ddf0ea;
  --texte: 'Instrument Sans', system-ui, sans-serif;
  --titre: 'Bricolage Grotesque', var(--texte);
  --chiffres: 'IBM Plex Mono', ui-monospace, monospace;
  --entete: 64px;
  --marge: 40px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 14px/1.45 var(--texte); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--accent); }
a:hover { color: #1d3f8f; }

/* En-tête clair, collé en haut. */
.entete {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 24px;
  height: var(--entete); padding: 0 var(--marge); background: var(--carte); border-bottom: 1px solid var(--bord);
}
.marque { margin: 0; font: 800 24px/1 var(--titre); letter-spacing: -0.02em; }
.onglets { display: flex; gap: 4px; }
.onglet { background: none; border: 0; color: var(--encre-douce); padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.onglet.actif { color: var(--accent); background: var(--accent-pale); font-weight: 600; }
/* Une seule ligne ; le texte complet s'affiche au survol. */
.etat { margin-left: auto; min-width: 0; color: var(--encre-douce); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat .erreur { color: var(--urgent); }
/* Page de connexion : un seul champ, centré. */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.connexion form { display: grid; gap: 16px; width: min(340px, 100%); padding: 32px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; }
/* Alerte de la mise à jour quotidienne, sous l'en-tête. */
.alerte { padding: 10px var(--marge); background: var(--proche-pale); color: var(--proche); border-bottom: 1px solid var(--bord); font-size: 13px; }
.alerte.echec { background: var(--urgent-pale); color: var(--urgent); }
.alerte ul { margin: 4px 0 0; padding-left: 18px; }

.bouton {
  height: 40px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bouton.secondaire { background: var(--carte); color: var(--encre); border: 1px solid var(--bord-fort); }
.bouton:disabled { opacity: 0.5; cursor: default; }

/* Titre de page et choix de la vue. */
.titre-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 28px var(--marge) 0; }
.titre-page h2 { margin: 0; font: 600 30px/1.1 var(--titre); letter-spacing: -0.02em; }
.compte { margin: 4px 0 0; color: var(--encre-douce); }
.vues { margin-left: auto; display: flex; padding: 4px; background: var(--trait); border-radius: 10px; }
.vues button { height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--encre-douce); cursor: pointer; }
.vues button[aria-pressed="true"] { background: var(--carte); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.12); }

/* Filtres en pastilles : les contrôles natifs restent, habillés. */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px var(--marge) 16px; }
.filtres fieldset, .types { border: 0; margin: 0; padding: 0; }
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--encre-douce); }
.champ select, .champ input, .champ textarea {
  font-size: 14px; font-weight: 400; color: var(--encre);
  border: 1px solid var(--bord-fort); border-radius: 8px; padding: 8px 10px; background: var(--carte);
}
.filtres .champ {
  flex-direction: row; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 14px;
  border: 1px solid var(--bord-fort); border-radius: 18px; background: var(--carte); font-size: 14px; font-weight: 400;
}
.filtres .champ select { max-width: 200px; border: 0; padding: 0 6px; background: transparent; font-weight: 600; cursor: pointer; }
.fenetre { display: flex; max-width: 100%; overflow-x: auto; padding: 3px; background: var(--trait); border-radius: 18px; }
.fenetre legend { float: left; align-self: center; padding: 0 8px 0 11px; white-space: nowrap; color: var(--encre-douce); } /* flottante : affichée dans la pastille */
.fenetre label span { white-space: nowrap; display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; border-radius: 15px; color: var(--encre-douce); cursor: pointer; }
.fenetre input { position: absolute; opacity: 0; }
.fenetre input:checked + span { background: var(--carte); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.12); }
.fenetre input:focus-visible + span { outline: 2px solid var(--accent); }
.case { display: flex; align-items: center; gap: 8px; color: var(--encre-douce); cursor: pointer; }
.filtres .case { margin-left: 8px; }
.types legend { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--encre-douce); }

/* Tableau dans une carte. */
.boite-tableau { margin: 0 var(--marge) 40px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; }
.liste { width: 100%; border-collapse: separate; border-spacing: 0; }
.liste th {
  position: sticky; top: var(--entete); z-index: 1; background: var(--carte);
  text-align: left; font-size: 12px; font-weight: 600; color: var(--encre-douce); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 12px 16px; border-bottom: 1px solid var(--trait);
}
.liste th:first-child { border-top-left-radius: 14px; }
.liste th:last-child { border-top-right-radius: 14px; }
.liste td { padding: 14px 16px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr { cursor: pointer; }
.liste tbody tr:hover td, .liste tbody tr.ouverte td { background: #f8fafc; }
.nombre { text-align: right; white-space: nowrap; }
.chiffre, .date { font-family: var(--chiffres); font-weight: 500; }
.col-echeance { width: 150px; }
.acheteur { font-weight: 600; }
.objet { color: var(--encre-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 460px; }
.raison { color: var(--urgent); font-size: 13px; margin-top: 2px; }
.delai { font-size: 12px; color: var(--encre-douce); }

.pastille-delai { display: inline-block; margin: 4px 0 2px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.pastille-delai.urgent { background: var(--urgent-pale); color: var(--urgent); }
.pastille-delai.proche { background: var(--proche-pale); color: var(--proche); }
.pastille-delai.loin { background: var(--loin-pale); color: var(--loin); }
.pastille-delai.depasse { background: var(--trait); color: var(--encre-douce); }

.pastilles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pastille { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--trait); color: var(--encre-douce); white-space: nowrap; }
.pastille.galadrim { background: var(--accent-pale); color: var(--accent); }
.pastille.client { background: var(--loin-pale); color: var(--loin); }
.pastille.ao { background: var(--urgent-pale); color: var(--urgent); }
.pastille.nouveau, .pastille.a-confirmer { background: #fff0d6; color: #8a4b00; }

/* Contact : LinkedIn puis annuaire, chacun avec son repère. */
.contact { display: flex; gap: 8px; align-items: flex-start; }
.contact + .contact { margin-top: 6px; }
.repere-in { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: #0a66c2; color: #fff; font-size: 11px; font-weight: 700; }
.icone-annuaire, .icone-web { flex: none; color: var(--loin); }
.annuaire { color: var(--encre-douce); font-size: 13px; }

.pertinence { display: flex; align-items: center; gap: 8px; min-width: 96px; font-family: var(--chiffres); font-weight: 500; }
.jauge { flex: 1; height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.jauge span { display: block; height: 100%; background: #8a96a8; }
.pertinence.haute .jauge span { background: var(--accent); }

.statut { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--trait); color: var(--encre-douce); white-space: nowrap; }
.statut[data-statut="À contacter"] { background: var(--accent-pale); color: var(--accent); }
.statut[data-statut="Contacté"], .statut[data-statut="RDV obtenu"] { background: var(--loin-pale); color: var(--loin); }
.statut[data-statut="AO publié"] { background: var(--urgent-pale); color: var(--urgent); }

/* Mes marchés : barre (je suis, vues), agenda, échéancier, portefeuille. */
.barre-mes .vues { margin-left: 0; }
.mes { margin: 0 var(--marge) 40px; display: flex; flex-direction: column; gap: 16px; }
.mes .boite-tableau { margin: 0; }
.lien-fiche { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--encre); text-align: left; cursor: pointer; }
.lien-fiche:hover { color: var(--accent); text-decoration: underline; }
.cellule-marche { min-width: 0; }
.cellule-marche .objet { max-width: none; }
.contact-nom { font-weight: 600; }
.canaux { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.canal { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--trait); color: var(--encre); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.canal.tel { background: var(--loin-pale); color: var(--loin); }
.canal.in { background: var(--accent-pale); color: #0a4fa0; }
.canal .repere-in { width: 16px; height: 16px; font-size: 10px; }

.groupe { display: flex; flex-direction: column; gap: 8px; }
.groupe h3 { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.nombre-groupe { color: var(--encre-douce); font-weight: 500; }
.puce { width: 10px; height: 10px; border-radius: 50%; background: var(--bord-fort); }
.retard .puce { background: var(--urgent); }
.jour .puce { background: var(--accent); }
.semaine .puce { background: var(--proche); }
.plus .puce { background: #8a96a8; }
.relance { display: grid; grid-template-columns: 110px minmax(0, 2fr) minmax(0, 1.5fr) auto; gap: 20px; align-items: center; padding: 14px 18px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; }
.relance .statut { margin-top: 4px; }
.relance .objet { -webkit-line-clamp: 1; }
.actions-relance { display: flex; justify-content: flex-end; }
.prochaine { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.prochaine label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--encre-douce); }
.prochaine input { height: 40px; border: 1px solid var(--bord-fort); border-radius: 8px; padding: 0 10px; font-size: 14px; color: var(--encre); }

.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--encre-douce); }
.legende > span { display: inline-flex; align-items: center; gap: 6px; }
.legende .point { position: static; margin: 0; }
.bande-legende { width: 22px; height: 10px; border-radius: 3px; background: #dbe5f8; }
.trait-legende { width: 2px; height: 14px; background: var(--encre); }
.frise { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; overflow-x: auto; }
.frise-contenu { min-width: 1000px; }
.frise-ligne { display: grid; grid-template-columns: 320px minmax(0, 1fr); border-bottom: 1px solid var(--trait); }
.frise-ligne:last-child { border-bottom: 0; }
.frise-ligne > .cellule-marche { padding: 10px 16px; }
.frise-ligne .objet { -webkit-line-clamp: 1; font-size: 13px; }
.frise-mois { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); font-size: 12px; font-weight: 600; color: var(--encre-douce); }
.frise-mois span { padding: 12px 0; text-align: center; border-left: 1px solid var(--trait); }
.frise-piste { position: relative; min-height: 56px; background-image: linear-gradient(to right, var(--trait) 1px, transparent 1px); background-size: calc(100% / 18) 100%; }
.frise-piste::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--aujourdhui); width: 2px; background: var(--encre); }
.bande { position: absolute; top: 18px; bottom: 18px; border-radius: 4px; background: #dbe5f8; }
.point { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--carte); box-shadow: 0 0 0 1px var(--bord-fort); background: #8a96a8; }
.point[data-statut="À contacter"] { background: var(--accent); }
.point[data-statut="Contacté"] { background: var(--loin); }
.point[data-statut="RDV obtenu"] { background: var(--proche); }
.etiquette { position: absolute; top: 50%; transform: translate(12px, -50%); font: 12px var(--chiffres); color: var(--encre-douce); white-space: nowrap; }
.etiquette.a-gauche { transform: translate(calc(-100% - 12px), -50%); }

.portefeuille tbody tr { cursor: default; }
.portefeuille select, .portefeuille input { height: 36px; border: 1px solid var(--bord-fort); border-radius: 8px; padding: 0 10px; background: var(--carte); font-size: 13px; color: var(--encre); }
.portefeuille input[data-champ="note"] { width: 100%; min-width: 200px; background: var(--fond); border-color: transparent; }
.portefeuille input.en-retard { border-color: var(--urgent); color: var(--urgent); }

/* Fiche : panneau latéral sur un voile ; un clic sur le voile referme la fiche. */
.fiche {
  position: fixed; top: var(--entete); right: 0; bottom: 0; z-index: 4; width: min(620px, 100vw);
  overflow-y: auto; background: var(--carte); padding: 28px 32px 48px;
  box-shadow: -12px 0 40px rgba(20, 33, 61, 0.18);
}
.voile { position: fixed; top: var(--entete); right: 0; bottom: 0; left: 0; z-index: 3; background: rgba(20, 33, 61, 0.35); cursor: pointer; }
.fiche[hidden] + .voile { display: none; }
.fermer { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); font-size: 24px; line-height: 1; cursor: pointer; color: var(--encre); }
.surtitre { margin-right: 56px; color: var(--encre-douce); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fiche h2 { font: 600 24px/1.2 var(--titre); letter-spacing: -0.01em; margin: 6px 56px 4px 0; }
.objet-fiche { margin: 0; color: var(--encre-douce); }
.fiche h3 { font: 600 16px/1.2 var(--texte); margin: 28px 0 12px; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.tuile { display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: var(--fond); color: var(--encre-douce); font-size: 12px; }
.tuile .libelle:first-child { font-weight: 600; }
.tuile .valeur { font: 500 18px/1.3 var(--chiffres); color: var(--encre); }
.tuile.urgent { background: var(--urgent-pale); color: var(--urgent); }
.tuile.proche { background: var(--proche-pale); color: var(--proche); }
.tuile.loin { background: var(--loin-pale); color: var(--loin); }
.tuile.note-ia { background: var(--accent-pale); color: var(--accent); }
.carte-contact { border: 1px solid var(--bord); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.carte-contact + .carte-contact { margin-top: 12px; }
.carte-contact ul { margin: 0; padding-left: 18px; }
.source { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--encre-douce); }
.standard { margin: 0; padding-top: 8px; border-top: 1px dashed var(--bord); }
.verifiables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.verifiables li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.verifiables li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.verifiables li.faux > span:first-child { text-decoration: line-through; color: var(--encre-douce); }
.verif { display: flex; gap: 4px; flex: none; }
.verif button { width: 32px; height: 32px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--carte); color: var(--encre-douce); font-size: 15px; cursor: pointer; }
.verif button[data-verdict="juste"][aria-pressed="true"] { background: var(--loin-pale); border-color: var(--loin); color: var(--loin); }
.verif button[data-verdict="faux"][aria-pressed="true"] { background: var(--urgent-pale); border-color: var(--urgent); color: var(--urgent); }
dl.infos { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
dl.infos dt { color: var(--encre-douce); }
dl.infos dd { margin: 0; }
.profils { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.profils li { display: flex; align-items: center; gap: 12px; }
.profils li div { flex: 1; }
.historique { width: 100%; border-collapse: collapse; font-size: 13px; }
.historique td { padding: 10px 4px; border-top: 1px solid var(--trait); vertical-align: top; }
.suite summary { list-style: none; display: inline-block; padding: 10px 0; color: var(--accent); font-weight: 600; cursor: pointer; }
.suite summary::-webkit-details-marker { display: none; }
.suite[open] summary .deplier, .suite:not([open]) summary .replier { display: none; }
.suite[open] { display: flex; flex-direction: column-reverse; }
.aide { color: var(--encre-douce); font-size: 13px; }
.suivi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.suivi .large { grid-column: 1 / -1; }
.message { min-height: 20px; color: var(--encre-douce); }
.message.erreur { color: var(--urgent); }

/* Statistiques : cartes de chiffres, courbes, tableaux. */
.stats-contenu { padding: 20px var(--marge) 40px; display: flex; flex-direction: column; gap: 20px; }
.cartes-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte-stat, .carte-stats { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 20px 24px; min-width: 0; }
.carte-stat h3, .carte-stats h3 { margin: 0 0 14px; font-size: 16px; }
.stat-ligne { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.stat-ligne > span:last-child { display: flex; flex-direction: column; }
.stat-chiffre { min-width: 92px; font: 500 30px/1 var(--chiffres); color: var(--encre); }
.stat-chiffre.confirme { color: var(--loin); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.courbes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.courbe { margin: 0; }
.courbe figcaption { font-size: 13px; font-weight: 600; color: var(--encre-douce); margin-bottom: 4px; }
.courbe svg { width: 100%; height: auto; display: block; }
.courbe .grille { stroke: var(--trait); stroke-width: 1; }
.courbe .axe { font: 11px var(--texte); fill: var(--encre-douce); }
.courbe .etiquette-serie { font: 12px var(--texte); fill: var(--encre); }
.pastille-serie { width: 12px; height: 4px; border-radius: 2px; }
.table-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-stats th, .table-stats td { padding: 8px 10px; border-top: 1px solid var(--trait); text-align: left; vertical-align: middle; white-space: nowrap; }
.table-stats thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--encre-douce); }
.table-stats tbody th { font-weight: 600; }
.table-stats .nombre { text-align: right; font-family: var(--chiffres); }
.barre { display: inline-block; width: 80px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; vertical-align: middle; }
.barre span { display: block; height: 100%; background: var(--accent); }
.boite-defilement { overflow-x: auto; }

/* Règles de tri : deux colonnes de cartes. */
.regles { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.4fr); gap: 24px; padding: 28px var(--marge); }
.regles-colonne { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.regles h2 { font: 600 22px var(--titre); letter-spacing: -0.01em; margin: 0; }
.regles .seuil input { width: 100px; }
.sources { margin: 0 var(--marge) 28px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 24px; }
.sources h2 { font: 600 22px var(--titre); letter-spacing: -0.01em; margin: 0 0 4px; }
.sources ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px 28px; }
.sources li { color: var(--encre-douce); font-size: 13px; }
.sources li a { font-weight: 600; font-size: 14px; }
.sources li p { margin: 6px 0 0; }
.sources .etat-source { color: var(--encre); }
.sources .etat-source::before { content: '● '; color: var(--bord-fort); }
.sources .etat-source.ok::before { color: var(--loin); }
.sources .etat-source.erreur, .sources .etat-source.erreur::before { color: var(--urgent); }
.prompt { font: 13px/1.5 var(--chiffres); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Sous 1100 px le tableau défile dans sa boîte (l'en-tête de colonnes n'est alors plus collé). */
@media (max-width: 1100px) {
  .boite-tableau { overflow-x: auto; }
  .liste { min-width: 1000px; }
  .liste th { position: static; }
}

@media (max-width: 900px) {
  :root { --marge: 16px; }
  .entete { flex-wrap: wrap; gap: 12px; height: auto; padding: 12px var(--marge); }
  .etat { order: 3; flex-basis: 100%; margin-left: 0; }
  .regles { grid-template-columns: 1fr; }
  .fiche { top: 0; z-index: 6; padding: 20px 16px 40px; }
  .tuiles { grid-template-columns: 1fr; }
  .cartes-stats, .deux-colonnes, .courbes { grid-template-columns: 1fr; }
  .relance { grid-template-columns: 1fr; gap: 10px; }
  .actions-relance { justify-content: flex-start; }
  dl.infos { grid-template-columns: 1fr; }
}