/* Module D — CRM et pilotage : Ma journée, pipeline, alertes, statistiques, intégrations, fiche lead. Jetons de couleur de app.css (clair et sombre). */

/* ------------------------------------------------------------ Ma journée */
.j-sommaire { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch }
.j-sommaire a { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-fort);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap }
.j-sommaire a b { font: 700 16px/1 var(--f-data) }
.j-sommaire a.chaud { border-color: var(--chaud); color: var(--chaud) }
.j-sommaire a:hover { border-color: var(--ink) }
.j-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start }
@media (max-width: 1000px) { .j-grille { grid-template-columns: minmax(0, 1fr) } }
.j-grille .bloc { scroll-margin-top: 70px }
.j-carte { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; background: var(--card) }
.j-carte > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: space-between }
.j-carte > header strong { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto }
.j-carte > header strong a { color: var(--ink); text-decoration: none }
.j-carte > header strong a:hover { text-decoration: underline }
.j-meta { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere }
.j-extrait { font-size: 14px; overflow-wrap: anywhere }
.j-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.j-actions form.enligne { display: inline-flex }
.j-priorites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.j-priorites .j-carte > header strong { flex: 1 1 140px }
.j-rang { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 2px solid var(--accent) }
.j-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.j-alertes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--info); background: var(--paper); border-radius: 6px; font-size: 14.5px }
.j-alertes li > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere }
.j-alertes li.niv-important { border-left-color: var(--tiede) }
.j-alertes li.niv-urgent { border-left-color: var(--erreur) }
@media (pointer: coarse) {
  .j-actions .btn, .pl-deplacer select, .pl-deplacer .btn, .al-actions .btn { min-height: 44px }
}

/* ------------------------------------------------------------ Pipeline (colonnes défilantes dans leur conteneur, jamais la page) */
.pl-aide { margin-top: -10px }
/* position: relative — les libellés masqués (.sr, en position absolue) restent dans le conteneur défilant au lieu d'élargir la page */
.pipeline { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 12px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; max-width: 100%; align-items: flex-start }
.pipeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.pl-colonne { flex: 0 0 264px; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rayon);
  display: grid; gap: 8px; padding: 10px; scroll-snap-align: start; align-content: start; border-top: 3px solid var(--froid) }
.pl-qualifie, .pl-contacte { border-top-color: var(--info) }
.pl-interesse, .pl-rdv { border-top-color: var(--tiede) }
.pl-devis { border-top-color: var(--chaud) }
.pl-client { border-top-color: var(--ok) }
.pl-perdu { border-top-color: var(--line-fort) }
.pl-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline }
.pl-tete h2 { font-size: 16px }
.pl-compte { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line) }
.pl-valeur { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); min-height: 1em }
.pl-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 60px; border-radius: 8px; transition: background-color .15s ease }
.pl-cartes.pl-survol { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 2px }
.pl-carte { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; min-width: 0 }
html.js .pl-carte[draggable="true"] { cursor: grab }
.pl-carte.pl-glisse { opacity: .45 }
.pl-carte.pl-envoi { opacity: .7 }
.pl-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center }
.pl-score.score { width: 32px; height: 32px; font-size: 12.5px; border-width: 2px }
.pl-nom { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; line-height: 1.25; font-size: 14.5px }
.pl-nom:hover { text-decoration: underline }
.pl-qui { font: 600 11px/1 var(--f-data); padding: 4px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent) }
.pl-meta { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere }
.pl-deplacer { display: flex; gap: 6px; align-items: center; min-width: 0 }
.pl-deplacer select { min-height: 34px; padding: 4px 8px; font-size: 14px; flex: 1 1 auto; min-width: 0 }
html.js .pl-deplacer .btn { display: none }
.pl-vide { text-align: center; padding: 6px 0 }
.pl-pages { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13.5px }
.pl-pages a { padding: 4px 12px; border: 1px solid var(--line-fort); border-radius: 6px; text-decoration: none; color: var(--ink); background: var(--card) }
@media (max-width: 700px) {
  .pl-colonne { flex-basis: min(84vw, 320px) }
  .pl-aide { margin-top: 0 }
}
@media (prefers-reduced-motion: reduce) { .pl-cartes { transition: none } }

/* ------------------------------------------------------------ Alertes */
.al-fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.al-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 4px solid var(--info); border-radius: 8px; background: var(--card) }
.al-item.niv-important { border-left-color: var(--tiede) }
.al-item.niv-urgent { border-left-color: var(--erreur) }
.al-item.lue { opacity: .72; border-left-color: var(--line-fort) }
.al-corps { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere }
.al-titre { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline }
.al-titre a { color: var(--ink) }
@media (max-width: 560px) { .al-item { grid-template-columns: minmax(0, 1fr) } }

/* ------------------------------------------------------------ Statistiques */
.st-entonnoir li { grid-template-columns: minmax(0, 1fr) 64px }
.st-entonnoir b { white-space: normal }
.st-table td strong { overflow-wrap: anywhere }

/* ------------------------------------------------------------ Intégrations */
.in-grille { align-items: start }
.in-erreurs { display: grid; gap: 8px }
.in-journal li { grid-template-columns: 120px minmax(0, 1fr) }
@media (max-width: 1100px) { .in-grille { grid-template-columns: minmax(0, 1fr) } }

/* ------------------------------------------------------------ Fiche lead et tableau de bord */
.crm-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: end }
.crm-ligne label { grid-column: 1 / -1 }
.crm-ligne select { min-width: 0 }
.crm-liens h3 { font-size: 14px; margin-bottom: 4px }
.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px }
.crm-raccourcis { margin-bottom: 4px }
.pl-message { font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; background: var(--ok-soft); border: 1px solid var(--ok) }
.pl-message.erreur { background: var(--erreur-soft); border-color: var(--erreur) }
.pl-message:empty { display: none }
.j-plus > summary { padding: 6px 0; min-height: 36px; display: flex; align-items: center }
.j-plus > .liste-items, .j-plus > .j-priorites { margin-top: 8px }
.pl-filtres > summary { font-weight: 600; color: var(--accent); padding: 8px 0; min-height: 40px; display: flex; align-items: center }
.pl-filtres[open] > summary { margin-bottom: 8px }