/* Généré par scripts/chantier_telvika.py depuis dashboard/cc/cc.css : ne pas modifier à la main (relancer le script).
   Command Center du chantier aux couleurs et aux polices de Telvika, charte v0.2 (docs/telvika/charte-graphique-v0.2/). */
@font-face { font-family: "Inter Tight"; src: url("polices/inter-tight-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("polices/instrument-serif-italique-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Command Center IMPALMA. Direction visuelle de la maquette du 23/09, polices du système : la politique de contenu du
   tableau de bord n'autorise aucune ressource externe. */
:root {
  --fond: #F3F1EC;
  --carte: #FFFFFF;
  --encre: #0C0E14;
  --encre-2: #3A3F4A;
  --muet: #545964;
  --trait: #E4E0D8;
  --trait-2: #EDEAE3;
  --nuit: #07080C;
  --nuit-2: #141722;
  --violet: #4766F5;
  --violet-fonce: #3550D6;
  --violet-pale: #E6EAFE;
  --orange: #F2994A;
  --orange-pale: #FFF4E8;
  --vert: #10A06F;
  --vert-pale: #E3F6EE;
  --rouge: #C62F35;
  --rouge-pale: #FDECEC;
  --ombre: 0 10px 30px rgba(7, 8, 12, 0.06);
  --titre: "Inter Tight", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --texte: "Inter Tight", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.45 var(--texte); }
a { color: var(--violet-fonce); }
a:hover { color: #1E2F7C; }
h1, h2, h3 { font-family: var(--titre); margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
[hidden] { display: none !important; }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--carte); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.evitement:focus { left: 8px; }
.muet { color: var(--muet); }
.petit { font-size: 12.5px; color: var(--muet); margin: 6px 0 0; }
pre { white-space: pre-wrap; font: 13.5px/1.5 var(--texte); background: #F8F7F4; padding: 12px; border-radius: 12px; margin: 8px 0 0; max-height: 420px; overflow: auto; }

/* ---------------------------------------------------------------- charpente */
.application { display: flex; min-height: 100vh; }
.cote { position: sticky; top: 0; height: 100vh; width: 248px; flex-shrink: 0; background: var(--nuit); color: #D0D6F4; display: flex; flex-direction: column; padding: 28px 16px 24px; gap: 28px; }
.marque { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.marque b { display: block; font: 700 19px/1.1 var(--titre); color: #FFFFFF; letter-spacing: .02em; }
.marque small { display: block; font-size: 13px; color: #AEB8E6; }
.logo { width: 42px; height: 42px; border-radius: 12px; background: var(--violet); display: grid; place-items: center; flex-shrink: 0; }
.logo svg { width: 24px; height: 24px; fill: none; stroke: #FFFFFF; stroke-width: 2; }
.nav { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; color: #D0D6F4; text-decoration: none; font-weight: 600; font-size: 16px; }
.nav a:hover { background: var(--nuit-2); color: #FFFFFF; }
.nav a.actif { background: #FFFFFF; color: var(--nuit); }
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nav .reglages { margin-top: auto; }
.badge { margin-left: auto; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--orange); color: var(--nuit); font-size: 13px; display: grid; place-items: center; }
.etat-machine { background: var(--nuit-2); border-radius: 16px; padding: 14px 16px; font-size: 13px; color: #BFC8F1; display: flex; flex-direction: column; gap: 3px; }
.etat-machine b { color: #FFFFFF; }
.etat-ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.principal { flex-grow: 1; min-width: 0; padding: 32px 36px 48px; display: flex; flex-direction: column; gap: 22px; outline: none; }

/* ---------------------------------------------------------------- éléments communs */
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.surtitre { font-size: 14px; color: var(--muet); margin-bottom: 4px; }
.page-tete h1 { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.tete-droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etat { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--carte); border: 1px solid #E8E3DB; font-weight: 600; font-size: 14px; }
.etat.discret { font-weight: 400; color: var(--muet); }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 20px 22px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.carte h2 { font-size: 19px; font-weight: 600; }
.carte.sombre { background: var(--nuit); color: #FFFFFF; border-color: var(--nuit); }
.carte.sombre .petit { color: #AEB8E6; }
.carte.discrete { box-shadow: none; background: #F9FAFE; }
.carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.carte-tete a { font-weight: 700; font-size: 14px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; background: #979CA6; }
.pastille.ton-vert { background: var(--vert); } .pastille.ton-orange { background: #E08A2C; } .pastille.ton-rouge { background: var(--rouge); }
.pastille.ton-violet { background: var(--violet); } .pastille.ton-vert-pale { background: #7FD1B2; } .pastille.ton-neutre { background: #979CA6; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 700; white-space: nowrap; background: #F1EFEA; color: var(--encre-2); }
.pill.ton-vert { background: var(--vert-pale); color: #0B7A53; } .pill.ton-vert-pale { background: #EEF8F3; color: #2F7D60; }
.pill.ton-orange { background: #FDEEDF; color: #8A4A0B; } .pill.ton-rouge { background: var(--rouge-pale); color: #A12B2B; }
.pill.ton-violet { background: var(--violet-pale); color: #2940A8; }
.barre { height: 8px; border-radius: 4px; background: #F1EFEA; overflow: hidden; }
.barre > i { display: block; height: 100%; border-radius: 4px; }
.vide { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; background: var(--carte); border: 1px dashed #D5CEBE; text-align: center; color: var(--muet); font-size: 13.5px; }
.vide strong { color: var(--encre); font-size: 15px; }
.bandeau { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--orange-pale); border: 1px solid #F6D7B5; }
.bandeau.ton-rouge { background: var(--rouge-pale); border-color: #F3C3C3; }
.bandeau svg { width: 22px; height: 22px; fill: none; stroke: #B4610E; stroke-width: 2; flex-shrink: 0; }
.bandeau.ton-rouge svg { stroke: var(--rouge); }
.bandeau > div { flex-grow: 1; }
.bandeau a { font-weight: 700; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.legende { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende i { width: 10px; height: 10px; border-radius: 5px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #DED8CC; background: var(--carte); color: var(--nuit); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.bouton:hover { border-color: var(--violet); color: var(--nuit); }
.bouton.principal { background: var(--nuit); border-color: var(--nuit); color: #FFFFFF; }
.bouton.principal:hover { background: #34363C; }
.bouton.accent { background: var(--orange); border-color: var(--orange); color: var(--nuit); }
.bouton.contour { background: transparent; border-color: #696E7B; color: #FFFFFF; }
.bouton.discret { border-color: transparent; background: #F5F4F0; color: var(--encre-2); }
.bouton.large { width: 100%; }
.bouton:disabled, .bouton[disabled] { opacity: .5; cursor: default; }
.lien { background: none; border: 0; padding: 0; color: var(--violet-fonce); text-decoration: underline; cursor: pointer; font: inherit; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.formulaire { display: flex; flex-direction: column; gap: 10px; }
.formulaire label, .champ { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--encre-2); }
.formulaire input:not([type="checkbox"]), .formulaire select, .formulaire textarea, .champ input, .champ textarea { min-height: 44px; padding: 9px 12px; border: 1px solid #767B86; border-radius: 12px; background: #FFFFFF; font-size: 15px; width: 100%; }
.formulaire textarea, .champ textarea { resize: vertical; }
.formulaire.compact { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.formulaire.compact label { flex: 1 1 180px; }
.case { flex-direction: row !important; align-items: center; gap: 8px !important; }
.case input { width: 20px; height: 20px; accent-color: var(--violet); }
details > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muet); border-bottom: 2px solid var(--muet); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; flex-shrink: 0; }
details[open] > summary::before { transform: rotate(45deg); }
.tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--muet); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--trait-2); vertical-align: top; }
.sous-titre { font-size: 13px; font-weight: 700; color: var(--muet); margin: 8px 4px 0; text-transform: none; }

/* ---------------------------------------------------------------- tableau de bord */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi-tete { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--muet); }
.kpi-valeur { font: 700 40px/1 var(--titre); letter-spacing: -.01em; }
.kpi-detail { font-size: 13px; color: var(--muet); }
.kpi-note { font-size: 12.5px; font-weight: 600; color: var(--violet-fonce); }
.grille-tdb { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.grille-tdb.tdb-entreprises { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); }
.deux-barres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 820px) { .deux-barres { grid-template-columns: minmax(0, 1fr); } }
.grille-tdb3 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.graphe-cadre { position: relative; }
.graphe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: 230px; border-bottom: 1px solid #E8E3DB; }
.courbe-demos { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; pointer-events: none; }
.courbe-demos svg { width: 100%; height: 100%; overflow: visible; }
.courbe-demos polyline { fill: none; stroke: var(--nuit); stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.point-demo { position: absolute; width: 11px; height: 11px; margin: 0 0 -5px -5px; border-radius: 6px; background: var(--nuit); border: 2px solid #FFFFFF; }
.point-demo b { position: absolute; bottom: 2px; left: 12px; font-size: 12px; color: var(--nuit); background: #FFFFFF; padding: 0 4px; border-radius: 6px; box-shadow: 0 0 0 1px var(--trait); }
.legende i.trait-demos { width: 18px; height: 0; border-top: 2.5px dashed var(--nuit); border-radius: 0; }
.prevision { font-size: 13.5px; line-height: 1.5; padding: 10px 14px; border-radius: 12px; background: #F8F7F4; }
.prevision.ton-rouge { background: var(--rouge-pale); color: #7A1F1F; }
.prevision .muet { display: block; }
.colonne-graphe { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; position: relative; padding-bottom: 26px; }
.colonne-graphe .total { font-size: 13px; font-weight: 700; }
.pile { width: min(46px, 100%); display: flex; flex-direction: column-reverse; border-radius: 10px; overflow: hidden; background: #E4E0D8; min-height: 3px; }
.pile i { display: block; min-height: 2px; }
.colonne-graphe .jour { position: absolute; bottom: 0; font-size: 12px; color: var(--muet); white-space: nowrap; }
.entonnoir { display: flex; flex-direction: column; gap: 10px; }
.etape { display: grid; grid-template-columns: 118px minmax(0, 1fr) 64px; align-items: center; gap: 4px 14px; }
.etape-nom { font-size: 13px; color: var(--encre-2); }
.etape-barre { height: 28px; border-radius: 8px; background: #F5F4F0; overflow: hidden; display: flex; }
.etape-barre i { display: block; height: 100%; border-radius: 8px; }
.etape b { text-align: right; font: 700 18px var(--titre); }
.etape-taux { grid-column: 2 / 4; font-size: 12px; color: var(--muet); margin-top: -4px; }
.liste-campagnes { display: flex; flex-direction: column; }
.ligne-campagne { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr) 64px 64px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait-2); color: inherit; text-decoration: none; }
.ligne-campagne:hover b { color: var(--violet-fonce); }
.ligne-campagne .nom { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ligne-campagne .nom span { display: flex; flex-direction: column; min-width: 0; }
.ligne-campagne .nom b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ligne-campagne small { font-size: 12px; color: var(--muet); }
.ligne-campagne .budget { display: flex; flex-direction: column; gap: 5px; }
.ligne-campagne .nb { text-align: right; display: flex; flex-direction: column; }
.ligne-campagne .nb b { font-size: 15px; }
.echeances { display: flex; flex-direction: column; gap: 12px; }
.echeance { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); }
.echeance > span:last-child { padding-top: 4px; display: flex; flex-direction: column; }
.evenement .attend { display: block; color: var(--encre-2); }
.evenement .attend b { font-size: inherit; }
.tuile-date.avec-mois { width: 64px; }
.tuile-date.avec-mois b { font-size: 15px; }
.tuile-date { width: 52px; flex-shrink: 0; padding: 6px 0; border-radius: 12px; background: var(--violet-pale); text-align: center; display: flex; flex-direction: column; }
.tuile-date span { font-size: 11px; font-weight: 700; color: var(--violet-fonce); text-transform: uppercase; }
.tuile-date b { font: 700 18px/1.2 var(--titre); color: var(--nuit); }
.tuile-date.forte { background: var(--violet); }
.tuile-date.forte span { color: #D0D6F4; } .tuile-date.forte b { color: #FFFFFF; }
.pour-toi { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: #E4E8FB; }
.compte { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; background: var(--nuit-2); color: #FFFFFF; display: grid; place-items: center; font: 700 17px var(--titre); flex-shrink: 0; }
.compte.orange { background: var(--orange); color: var(--nuit); }
.compte.rouge { background: var(--rouge); color: #FFFFFF; }
.compte.blanc { background: #FFFFFF; color: var(--nuit); }
.carte.sombre .bouton.large { margin-top: auto; }

/* ---------------------------------------------------------------- campagnes */
.filtres { display: flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--carte); border: 1px solid #E8E3DB; flex-wrap: wrap; }
.filtres button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--encre-2); font-weight: 600; font-size: 14px; cursor: pointer; }
.filtres button.actif { background: var(--nuit); color: #FFFFFF; }
.menu { position: relative; }
.menu > summary::before { display: none; }
.menu-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 290px; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; box-shadow: 0 16px 40px rgba(7, 8, 12, .14); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.menu-liste button { text-align: left; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-weight: 600; cursor: pointer; }
.menu-liste button:hover:not(:disabled) { background: #F5F4F0; }
.menu-liste button:disabled { color: var(--muet); cursor: default; }
.menu-liste button small { display: block; font-weight: 400; font-size: 12px; }
.menu-liste p { margin: 6px 12px 4px; font-size: 12.5px; }
.budget-total { color: var(--muet); font-size: 14px; }
.budget-total b { font: 700 22px var(--titre); color: var(--encre); }
.barre-postes { display: flex; height: 22px; border-radius: 11px; overflow: hidden; background: #F1EFEA; gap: 2px; }
.barre-postes i { display: block; min-width: 3px; }
.postes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.poste { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--trait-2); }
.poste > i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.poste > span { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.poste small { font-size: 12px; color: var(--muet); }
.poste > b { white-space: nowrap; font-size: 14px; }
.enveloppes { display: flex; gap: 6px 24px; flex-wrap: wrap; font-size: 13px; color: var(--muet); }
.enveloppes b { color: var(--encre); }
.grille-campagnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.campagne-tete { display: flex; align-items: center; gap: 12px; }
.icone-campagne { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font: 700 17px var(--titre); }
.campagne-nom { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.campagne-nom h2 a { color: inherit; text-decoration: none; }
.campagne-nom h2 a:hover { color: var(--violet-fonce); }
.campagne-nom span { font-size: 13px; color: var(--muet); }
.campagne-budget { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.campagne-budget > div:first-child { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chiffres > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #F8F7F4; min-width: 0; }
.chiffres span { font-size: 12px; color: var(--muet); }
.chiffres b { font: 700 20px var(--titre); }
.chiffres small { font-size: 11px; color: var(--muet); min-height: 14px; }
.lecture { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); margin: 0; }
.lecture .pastille { margin-top: 5px; }
.lien-detail { font-size: 13.5px; font-weight: 700; align-self: flex-start; }
.pistes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.piste { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait-2); font-size: 14px; }
.piste > span:nth-child(2) { flex-grow: 1; }
.piste .code { width: 34px; height: 26px; border-radius: 8px; background: #FBEAF1; color: #8C2455; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.detail-meta { display: flex; gap: 14px; align-items: flex-start; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.tuile { gap: 4px; padding: 16px 18px; }
.tuile span { font-size: 12.5px; color: var(--muet); }
.tuile b { font: 700 24px var(--titre); }
.tuile small { font-size: 12px; color: var(--muet); }
.annonce { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--trait-2); flex-wrap: wrap; }
.annonce img, .vignette { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--trait); }
.annonce > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.annonce .meta { font-size: 12.5px; color: var(--muet); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.courbe-jour { margin-top: 12px; }
.courbe { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 110px; align-items: end; }
.courbe > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.courbe i { display: block; width: 100%; background: var(--violet); border-radius: 3px 3px 0 0; min-height: 1px; }
.courbe small { font-size: 10px; color: var(--encre-2); min-height: 13px; }
.courbe span { font-size: 10px; color: var(--muet); }
.bilan pre { max-height: 360px; }

/* ---------------------------------------------------------------- à venir */
.grille-avenir { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pile-cartes { display: flex; flex-direction: column; gap: 18px; }
.calendrier { gap: 0; padding-top: 6px; }
.semaine h2 { font: 700 12px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: #858B97; padding: 16px 0 8px; }
.jour-ligne { display: flex; gap: 18px; padding: 12px 0; border-top: 1px solid var(--trait-2); }
.jour-ligne .tuile-date { width: 58px; min-height: 58px; justify-content: center; border-radius: 16px; }
.evenements { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; min-width: 0; }
.aujourdhui { font-size: 12px; font-weight: 700; color: var(--violet-fonce); }
.evenement { display: flex; gap: 10px; align-items: flex-start; }
.evenement .pastille { margin-top: 6px; }
.evenement > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evenement b { font-size: 14.5px; }
.evenement span { font-size: 13px; color: var(--muet); }
.rythme { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; }
.rythme span { color: #D0D6F4; }
.rythme b { text-align: right; }

/* ---------------------------------------------------------------- à faire : les tuiles, montrées dans la ligne ouverte de la todo */
.tache { gap: 8px; padding: 16px; border-radius: 16px; }
.tache h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.tache .meta { font-size: 12.5px; color: var(--muet); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tache .muet { font-size: 13px; }
.tache.alerte.ton-rouge { border-color: #F3C3C3; background: #FFFBFB; }
.tache.alerte p { margin: 0; font-size: 13.5px; }
.tache-tete { display: flex; justify-content: space-between; gap: 8px; }
.texte-court { margin: 0; font-size: 13px; line-height: 1.5; color: var(--encre-2); white-space: pre-wrap; }
.consigne { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--orange-pale); font-size: 13px; line-height: 1.45; color: #6B3D08; }
.verif { flex-direction: row; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; box-shadow: none; }
.verif input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--violet); flex-shrink: 0; }
.verif span { display: flex; flex-direction: column; gap: 3px; }
.verif small { font-size: 12.5px; color: var(--muet); line-height: 1.45; }
.notes { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muet); align-items: center; }
.notes label { display: inline-flex; gap: 4px; align-items: center; }
.notes select { min-height: 36px; border-radius: 8px; border: 1px solid #767B86; }
.closes > summary { color: var(--muet); padding: 0 4px; }

.tache.compacte { gap: 6px; padding: 14px 16px; }
.tache.compacte h3 { font-size: 14.5px; }
.actions.serrees { gap: 6px; }
.actions.serrees .bouton { min-height: 40px; padding: 0 12px; font-size: 13px; }
.actions.serrees .lien { font-size: 12.5px; color: var(--muet); }

/* ---------------------------------------------------------------- réglages */
.canaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.rythme span { flex-shrink: 0; }
.grille-reglages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grille-reglages .large { grid-column: 1 / -1; }
.ligne-reglage { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--trait-2); }
.ligne-reglage > span:first-child { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.ligne-reglage small { font-size: 12px; color: var(--muet); }
.ligne-reglage .bouton { min-height: 36px; padding: 0 10px; font-size: 13px; }
.barre-texte span { text-decoration: line-through; color: var(--muet); }
.bloc-budget { display: flex; flex-direction: column; gap: 6px; font-size: 13px; padding-bottom: 8px; }
.agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; }
.agent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait-2); background: #F9FAFE; text-align: left; cursor: pointer; min-height: 52px; }
.agent:hover, .agent.ouvert { border-color: var(--violet); background: var(--violet-pale); }
.agent > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.agent b { font-size: 14px; }
.agent small, .agent .muet { font-size: 12px; }
.agent .muet { white-space: nowrap; }
.formulaire label .muet, .champ .muet { display: inline; }
.formulaire label > span:first-child { display: block; }
.fiche-agent { border-top: 1px solid var(--trait); padding-top: 16px; }
.fiche-agent h3 { font-size: 17px; }
.rangee { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rangee label { flex: 1 1 160px; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.liste-runs { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.liste-runs div { display: flex; gap: 8px; align-items: center; }
.ligne-historique { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--trait-2); font-size: 13.5px; }
.ligne-historique small { color: var(--muet); font-size: 12px; }

/* ---------------------------------------------------------------- connexion, notifications, erreurs */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.connexion .carte { width: min(420px, 100%); }
.connexion .marque b { color: var(--nuit); }
.connexion .marque small { color: var(--muet); }
.notification { position: fixed; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 14px; background: var(--nuit); color: #FFFFFF; box-shadow: 0 16px 40px rgba(7, 8, 12, .25); z-index: 40; font-size: 14px; }
.notification.attention { background: #8A4A0B; }
.notification.erreur { background: #A12B2B; }
.notification .lien { color: #FFFFFF; font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; font-size: inherit; }
.erreur-vue { border-color: #F3C3C3; }

/* ---------------------------------------------------------------- tailles d'écran */
/* ---------------------------------------------------------------- pilotage par offre (fusion, étape 4, ajustements de l'expert du 24/09) */
.gris { color: #898E9A !important; }
.note-seuil, td small, th small { display: block; font-size: 11.5px; color: var(--muet); font-weight: 400; margin-top: 2px; }
.bloc-tests { display: flex; flex-direction: column; gap: 12px; }
.bloc-tests > .carte-tete h2 { font-size: 21px; }
.grille-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.test { gap: 8px; }
.test.principal-test { border: 2px solid var(--violet); }
.test-tete { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.test-tete h3 { font-size: 16px; flex: 1 1 110px; min-width: 0; }
.test-tete .code, .hypothese-campagne b:first-child { font-weight: 700; }
.test-tete .code { min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--violet-pale); color: #2940A8; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.hypothese { margin: 0; font-size: 14px; line-height: 1.45; color: var(--encre-2); }
.test-volume { display: flex; flex-direction: column; gap: 4px; }
.test-volume small { font-size: 12px; color: var(--muet); }
.test-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.test-dates div { background: #F8F7F4; border-radius: 10px; padding: 8px 10px; }
.test-dates dt { font-size: 11.5px; color: var(--muet); }
.test-dates dd { margin: 0; font-weight: 600; font-size: 13.5px; }
.actions.serrees { gap: 6px; }
.chiffres.argent { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.regle { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); background: #F8F7F4; border-radius: 12px; padding: 10px 12px; }
.voyant { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--trait-2); }
.voyant .pastille { width: 14px; height: 14px; border-radius: 7px; margin-top: 3px; }
.voyant > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.voyant span { color: var(--encre-2); }
.multiple { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: end; }
.multiple-nom { font-size: 13px; font-weight: 600; color: var(--encre-2); padding-bottom: 4px; }
.multiple-barres, .multiple-axe { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.multiple-barres { height: 64px; align-items: end; border-bottom: 1px solid #E8E3DB; }
.multiple-barres > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.pile-sem { position: relative; display: block; width: 100%; flex-grow: 1; }
.pile-sem i { position: absolute; left: 0; right: 0; bottom: 0; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: #4766F5; }
.pile-sem i.brut { background: #D2D8F4; }
.multiple-barres small { font-size: 11px; font-weight: 700; color: #B4610E; min-height: 13px; }
.multiple-axe span { font-size: 11px; color: var(--muet); text-align: center; }
.choix-offre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muet); }
.choix-offre select { min-height: 40px; border: 1px solid #767B86; border-radius: 10px; padding: 0 10px; background: #FFFFFF; }
.entonnoir-canaux th[scope="row"] { color: var(--encre-2); font-size: 13px; white-space: normal; }
a.pour-toi { text-decoration: none; padding: 4px 0; }
a.pour-toi:hover span:last-child { text-decoration: underline; }
a.pour-toi .compte { font-size: 13px; min-width: 52px; }
.campagne-offre { display: flex; gap: 6px; flex-wrap: wrap; }
.hypothese-campagne { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); background: #F8F7F4; border-radius: 12px; padding: 10px 12px; }
.hypothese-campagne small { font-size: 12px; color: var(--muet); }
.hypothese-campagne.ton-orange { background: var(--orange-pale); color: #8A4A0B; }
.barre.fine { height: 5px; }
.cibles table input { min-height: 38px; padding: 6px 8px; width: 110px; }
table.revue .ligne-semaine th, table.revue .ligne-semaine td { background: #F5F4F0; color: var(--nuit); font-size: 13px; }
@media (max-width: 1320px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-tdb3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grille-tdb3 > :first-child { grid-column: 1 / -1; }
  .grille-reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .postes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .grille-tdb, .grille-tdb.tdb-entreprises, .grille-campagnes, .grille-avenir { grid-template-columns: minmax(0, 1fr); }
  .cote { width: 212px; }
}
@media (max-width: 820px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .application { display: block; }
  .cote { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; width: auto; z-index: 30; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 0; }
  .cote .marque, .etat-machine { display: none; }
  .nav { flex-direction: row; gap: 2px; }
  .nav a { flex: 1; flex-direction: column; gap: 3px; min-height: 58px; padding: 6px 2px; font-size: 11px; justify-content: center; position: relative; border-radius: 12px; }
  .nav a.actif, .nav a.parent-actif { background: var(--nuit-2); color: #FFFFFF; }
  .nav .reglages { margin-top: 0; }
  .nav a[data-vue="journal"] { display: none; }  /* secondaire : sur téléphone, on y va depuis Réglages */
  .nav a[data-vue="entreprises"] { display: none; }   /* sur téléphone : depuis Leads (bouton Entreprises) */
  .nav a[data-vue="contacts"] { display: none; }      /* sur téléphone : depuis Leads (bouton Contacts) */
  .badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 20px; height: 18px; font-size: 11px; padding: 0 5px; }
  .principal { padding: 20px 16px 28px; gap: 16px; }
  .page-tete h1 { font-size: 28px; }
  .grille-tdb3, .grille-reglages, .postes, .pistes, .canaux { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 16px; gap: 6px; }
  .kpi-valeur { font-size: 28px; }
  .kpi-detail { display: none; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres.argent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-tests { grid-template-columns: minmax(0, 1fr); }
  .multiple { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .multiple-barres, .multiple-axe { gap: 3px; }
  .ligne-campagne { grid-template-columns: minmax(0, 1fr) 54px 54px; }
  .ligne-campagne .budget { grid-column: 1 / -1; grid-row: 2; }
  .etape { grid-template-columns: 96px minmax(0, 1fr) 56px; gap: 4px 10px; }
  .graphe { height: 190px; }
  .menu-liste { right: auto; left: 0; }
  .notification { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------- refonte du 25/09 : couleurs, accueil, graphiques
   Tons (CC.regles) : gris pas lisible, vert conforme, orange à surveiller, rouge agir, bleu en cours. Une couleur ne
   porte jamais seule le sens : chaque ton a son icône et son libellé (etiquette-ton). */
:root { --ton-gris: #979CA6; --ton-gris-pale: #F3F1EC; --ton-vert: #10A06F; --ton-vert-pale: #E3F6EE; --ton-orange: #E08A2C; --ton-orange-pale: #FDEEDF; --ton-rouge: #D64545; --ton-rouge-pale: #FDECEC; --ton-bleu: #2A78D6; --ton-bleu-pale: #E6F0FC; }
.etiquette-ton { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px 0 4px; border-radius: 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--ton-gris-pale); color: #51555F; }
.etiquette-ton i { font-style: normal; width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; color: #FFFFFF; background: var(--ton-gris); }
.etiquette-ton.ton-vert { background: var(--ton-vert-pale); color: #0B7A53; } .etiquette-ton.ton-vert i { background: var(--ton-vert); }
.etiquette-ton.ton-orange { background: var(--ton-orange-pale); color: #8A4A0B; } .etiquette-ton.ton-orange i { background: var(--ton-orange); }
.etiquette-ton.ton-rouge { background: var(--ton-rouge-pale); color: #A12B2B; } .etiquette-ton.ton-rouge i { background: var(--ton-rouge); }
.etiquette-ton.ton-bleu { background: var(--ton-bleu-pale); color: #1C5CAB; } .etiquette-ton.ton-bleu i { background: var(--ton-bleu); }

.accueil { display: flex; flex-direction: column; gap: 14px; }
.ligne-etat { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: var(--carte); border-left: 6px solid var(--ton-gris); box-shadow: var(--ombre); }
.ligne-etat i { font-style: normal; flex-shrink: 0; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; color: #FFFFFF; font-weight: 700; background: var(--ton-gris); }
.ligne-etat p { margin: 0; font: 600 16.5px/1.4 var(--titre); color: var(--encre); }
.ligne-etat.ton-vert { border-left-color: var(--ton-vert); } .ligne-etat.ton-vert i { background: var(--ton-vert); }
.ligne-etat.ton-orange { border-left-color: var(--ton-orange); } .ligne-etat.ton-orange i { background: var(--ton-orange); }
.ligne-etat.ton-rouge { border-left-color: var(--ton-rouge); } .ligne-etat.ton-rouge i { background: var(--ton-rouge); }
.tuiles-accueil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tuile-accueil { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre); border-top: 4px solid var(--ton-gris); color: var(--encre); text-decoration: none; min-width: 0; }
.tuile-accueil.ton-vert { border-top-color: var(--ton-vert); } .tuile-accueil.ton-orange { border-top-color: var(--ton-orange); } .tuile-accueil.ton-rouge { border-top-color: var(--ton-rouge); } .tuile-accueil.ton-bleu { border-top-color: var(--ton-bleu); }
a.tuile-accueil:hover { box-shadow: 0 12px 34px rgba(7, 8, 12, 0.12); }
.tuile-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tuile-titre { font-size: 13px; font-weight: 700; color: var(--muet); }
.tuile-valeur { display: flex; align-items: center; gap: 8px; }
.tuile-valeur b { font: 700 26px/1.1 var(--titre); }
.tuile-sous { font-size: 12px; color: var(--muet); min-height: 16px; }
.tuile-accueil .donc { margin: auto 0 0; font-size: 13px; line-height: 1.35; color: var(--encre-2); }
.sparkline { width: 100%; height: 30px; display: block; }
.fleche { width: 14px; height: 14px; }
.jauges { display: flex; flex-direction: column; gap: 6px; }
.jauge-ligne { display: grid; grid-template-columns: 62px 1fr 64px; gap: 6px; align-items: center; font-size: 12px; }
.jauge-ligne small { color: var(--muet); text-align: right; font-variant-numeric: tabular-nums; }
.jauge { width: 100%; height: 10px; display: block; }

.test { border-left: 5px solid var(--ton-gris); }
.test.ton-vert { border-left-color: var(--ton-vert); } .test.ton-orange { border-left-color: var(--ton-orange); } .test.ton-rouge { border-left-color: var(--ton-rouge); } .test.ton-bleu { border-left-color: var(--ton-bleu); }
.volume { height: 8px; border-radius: 4px; background: #F1EFEA; overflow: hidden; }
.volume i { display: block; height: 100%; border-radius: 4px; }
.test-chiffres { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muet); }
.ne-pas-toucher { margin: 0; font-size: 13px; font-weight: 700; color: var(--encre-2); }

.graphique { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }
.graphique text { font: 13px var(--texte); fill: var(--muet); }
.graphique text.valeur { fill: var(--encre); font-weight: 600; }
.etape { display: grid; grid-template-columns: 112px 1fr 72px; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.etape-nom { color: var(--muet); }
.etape-barre { height: 16px; }
.etape-barre i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.etape-valeur { font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.15; }
.etape-valeur small { font-weight: 400; color: var(--muet); font-size: 11px; }
.legende-graphique { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 12.5px; color: var(--encre-2); }
.legende-graphique span { display: inline-flex; align-items: center; gap: 6px; }
.legende-graphique i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.barre-empilee { display: flex; gap: 2px; height: 18px; margin-top: 8px; }
.barre-empilee i { min-width: 3px; border-radius: 4px; }
.entonnoirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.entonnoir { margin: 0; padding: 10px 12px; border-radius: 12px; background: #F8F7F4; }
.entonnoir figcaption { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.entonnoir figcaption i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.entonnoir svg { width: 100%; height: auto; display: block; }
.phrase-grise { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ton-gris-pale); color: #51555F; font-size: 13.5px; }
.alerte-ligne { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.alerte-ligne.ton-rouge { background: var(--ton-rouge-pale); color: #A12B2B; }
.onglets { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: #F3F1EC; }
.onglet { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font: 600 13px var(--texte); color: var(--muet); cursor: pointer; }
.onglet.actif { background: var(--carte); color: var(--encre); box-shadow: 0 1px 3px rgba(7, 8, 12, 0.12); }
.vue-tableau { margin-top: 6px; font-size: 13px; }
.vue-tableau summary { cursor: pointer; color: var(--muet); font-weight: 600; }
.cellule.ton-vert { background: var(--ton-vert-pale); } .cellule.ton-orange { background: var(--ton-orange-pale); } .cellule.ton-rouge { background: var(--ton-rouge-pale); } .cellule.ton-gris { background: var(--ton-gris-pale); color: #666B78; }
.tableau.fige th[scope="row"], .tableau.fige thead th:first-child { position: sticky; left: 0; background: var(--carte); z-index: 1; }
.chaleur-defile { overflow-x: auto; }
.chaleur-defile svg { min-width: 560px; }
.echelle-chaleur { display: flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--muet); margin-top: 6px; }
.echelle-chaleur i { width: 18px; height: 10px; display: inline-block; }
.echelle-chaleur span { margin: 0 6px; }
.infobulle { position: fixed; z-index: 60; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: var(--nuit); color: #FFFFFF; font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 20px rgba(7, 8, 12, 0.25); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1180px) { .tuiles-accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tuiles-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile-valeur b { font-size: 22px; } .ligne-etat p { font-size: 15px; } }
@media (max-width: 480px) { .tuiles-accueil { grid-template-columns: minmax(0, 1fr); } }
.outils-tableau { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.revue th[scope="row"] small, .revue td small { display: block; }

.campagne { border-top: 5px solid var(--ton-gris); }
.campagne.bande-vert { border-top-color: var(--ton-vert); } .campagne.bande-orange { border-top-color: var(--ton-orange); } .campagne.bande-rouge { border-top-color: var(--ton-rouge); }
.bandeau-statut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.campagne .donc { margin: 0; font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.test-campagne { display: flex; flex-direction: column; gap: 4px; }
.test-campagne-tete { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muet); }
.test-campagne-tete b { color: var(--encre); }
.alerte-ligne.ton-orange { background: var(--ton-orange-pale); color: #8A4A0B; }

.grille-avenir2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.chrono-jour { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--trait-2); }
.chrono-jour:first-of-type { border-top: 0; }
.chrono-evenements { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; min-width: 0; }
.chrono-ev { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.chrono-ev .pastille { flex-shrink: 0; width: 10px; height: 10px; border-radius: 5px; }
.decisions-avenir { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.decision-avenir { gap: 6px; padding: 14px 16px; border-left: 5px solid var(--ton-gris); box-shadow: none; background: #F9FAFE; }
.decision-avenir.ton-orange { border-left-color: var(--ton-orange); }
.decision-avenir h3 { margin: 0; font-size: 15px; }
.decision-avenir p { margin: 0; font-size: 13.5px; color: var(--encre-2); }
.decision-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.chaine-attente { font-size: 13px; }
@media (max-width: 980px) { .grille-avenir2 { grid-template-columns: minmax(0, 1fr); } }
.tuile-accueil .etiquette-ton { white-space: normal; max-width: 100%; line-height: 1.2; padding-top: 3px; padding-bottom: 3px; }
.etape-nom small, .chrono-ev small, .cellule small { display: block; font-size: 11px; color: var(--muet); font-weight: 400; }
.cellule:focus { outline: 2px solid var(--violet); outline-offset: -2px; }
.decision-avenir .declenche { font-size: 13px; }

/* ---------------------------------------------------------------- onglet Campagnes (refonte du 25/09)
   Deux zones : « En jeu », cartes de hauteur fixe (cinq éléments, chacun sa place, le pli en dessous), trois par ligne ;
   « Terminées », repliée, une ligne par campagne. Quatre états, toujours les mêmes mots et les mêmes couleurs. */
.etiquette-ton.ton-fonce { background: #E8E4DB; color: #282E42; } .etiquette-ton.ton-fonce i { background: #474A53; }
.budget-campagnes { gap: 8px; }
.ligne-budget { margin: 0; font-size: 14.5px; color: var(--encre-2); }
.ligne-budget b { color: var(--encre); }
.par-offre > summary { font-size: 13px; color: var(--muet); min-height: 28px; }
.par-offre .enveloppes { margin-top: 4px; }
.plis-budget { display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: flex-start; }
.plis-budget .vue-tableau { margin-top: 0; }
.plis-budget > details[open] { flex-basis: 100%; }
.titre-zone { font: 600 17px var(--titre); margin: 0; display: flex; align-items: baseline; gap: 8px; }
.zone-campagnes { display: flex; flex-direction: column; gap: 12px; }
.grille-jeu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.campagne-jeu { padding: 0 0 14px; gap: 0; overflow: hidden; }
.campagne-jeu > * { margin-left: 18px; margin-right: 18px; }
.campagne-jeu .zone-bandeau { margin: 0; height: 74px; display: flex; flex-direction: column; }
.bandeau-etat { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; font-size: 13.5px; background: var(--ton-gris-pale); color: #51555F; border-top: 5px solid var(--ton-gris); min-height: 44px; }
.bandeau-etat b { font: 700 14px var(--titre); flex-shrink: 0; }
.bandeau-etat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bandeau-etat.ton-vert { background: var(--ton-vert-pale); color: #0B7A53; border-top-color: var(--ton-vert); }
.bandeau-etat.ton-bleu { background: var(--ton-bleu-pale); color: #1C5CAB; border-top-color: var(--ton-bleu); }
.bandeau-etat.ton-gris { background: var(--ton-gris-pale); color: #51555F; border-top-color: var(--ton-gris); }
.bandeau-etat.ton-fonce { background: #E8E4DB; color: #282E42; border-top-color: #474A53; }
.ligne-etape { height: 30px; padding: 4px 18px 0; font-size: 12.5px; color: var(--muet); }
.case-etape { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: pointer; }
.case-etape input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--ton-bleu); }
.case-etape span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-etape.faite span { text-decoration: line-through; text-decoration-color: rgba(84, 89, 100, .5); }
.case-etape.repere { cursor: default; }
.campagne-jeu .titre-campagne { font-size: 15px; line-height: 1.3; height: 24px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titre-campagne a { color: inherit; text-decoration: none; }
.titre-campagne a:hover { color: var(--violet-fonce); }
.jauge-depense { height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muet); }
.jauge-depense small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jauge-depense b { color: var(--encre); }
.jauge-depense .barre.hachuree { background: repeating-linear-gradient(45deg, #F1EFEA 0 6px, #F8F7F4 6px 12px); }
.chiffre-principal { height: 62px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; align-content: center; }
.chiffre-principal b { font: 700 20px var(--titre); }
.chiffre-principal small { flex-basis: 100%; font-size: 12px; color: var(--muet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-test { height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 4px; margin-top: 2px; margin-bottom: 6px; }
.puce-test .code { font-weight: 700; font-size: 13px; padding: 1px 8px; border-radius: 8px; background: var(--ton-bleu-pale); color: #1C5CAB; }
.puce-test small { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--muet); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.puce-test.sans-test { display: flex; align-items: center; font-size: 12.5px; color: #8A4A0B; }
.campagne-jeu details > summary { font-size: 13px; color: var(--muet); }
.campagne-jeu details[open] { padding-top: 4px; }
.campagne-jeu details .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.zone-terminees > summary { min-height: 36px; }
.zone-terminees > summary h2 { font-size: 17px; }
.zone-terminees td small { display: block; font-size: 11px; }
@media (max-width: 1180px) { .grille-jeu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grille-jeu { grid-template-columns: minmax(0, 1fr); } }
.rythme b { overflow-wrap: anywhere; }

/* Détail d'une campagne (David, 28/09) : trois groupes de tuiles, résumé de l'essai du soir, annonces en une vue compacte */
.depense-retenue { margin: 0 0 12px; font-size: 14px; color: var(--muet); }
.depense-retenue b { color: var(--nuit); }
.groupes-tuiles { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; gap: 14px; }
.groupe-tuiles h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--nuit); }
.groupe-tuiles h3 small { font-weight: 400; color: var(--muet); font-size: 12px; }
.mini-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-tuile { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: #F8F7F4; min-width: 0; }
.mini-tuile span { font-size: 12px; color: var(--muet); }
.mini-tuile b { font: 700 18px var(--titre); display: flex; align-items: center; gap: 6px; }
.mini-tuile small { font-size: 11.5px; color: var(--muet); }
.mini-tuile.ton-gris b { color: #898E9A; }
.mini-tuile.ton-vert { background: var(--ton-vert-pale); } .mini-tuile.ton-orange { background: var(--ton-orange-pale); } .mini-tuile.ton-rouge { background: var(--ton-rouge-pale); }
table.essai th small { display: block; font-weight: 400; }
table.essai td, table.essai th[scope="row"] { font-size: 13px; }
table.annonces-compact td, table.annonces-compact th[scope="row"] { font-size: 13px; padding: 6px 10px; vertical-align: top; }
table.annonces-compact th[scope="row"] .pill { margin-top: 4px; font-size: 11px; }
.avec-barre { min-width: 110px; }
.barre-fine { display: block; height: 5px; border-radius: 3px; background: #F0EEE8; margin: 4px 0 3px; overflow: hidden; }
.barre-fine i { display: block; height: 100%; border-radius: 3px; }
@media (max-width: 1080px) { .groupes-tuiles { grid-template-columns: minmax(0, 1fr); } }


/* ---------------------------------------------------------------- leads et tableau de bord commercial (lot 2, 02/10) */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
tr.total td { font-weight: 700; border-top: 1px solid var(--trait); border-bottom: 0; }
.muet-clair { color: #B6B9C1; }
.tuiles-tdb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tuile-tdb { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; min-width: 0; }
a.tuile-tdb:hover { border-color: var(--violet); color: var(--encre); }
.tuile-tdb span { font-size: 13px; color: var(--muet); }
.tuile-tdb b { font: 700 28px var(--titre); letter-spacing: -.01em; }
.tuile-tdb small { font-size: 12.5px; color: var(--muet); }
.legende-graphe { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--encre-2); }
.legende-graphe span { display: inline-flex; align-items: center; gap: 6px; }
.carre-signe, .carre-prev { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--violet); }
.carre-prev { background: repeating-linear-gradient(45deg, var(--violet) 0 2px, #98A8F0 2px 6px); }
.sous-graphe { font-size: 13px; font-weight: 700; color: var(--muet); margin: 6px 0 0; }
.graphe-ca { position: relative; min-height: 262px; }
.graphe-ca svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.graphe-ca .grille-ca line { stroke: #EFECE6; stroke-width: 1; }
.graphe-ca text { font: 12px var(--texte); fill: var(--muet); }
.graphe-ca .grille-ca text, .graphe-ca .unite-ca { font-size: 11.5px; }
.graphe-ca .axe-ca text.fort { fill: var(--nuit); font-weight: 700; }
.graphe-ca .jour-ca { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 3; }
.graphe-ca .annee-ca { stroke: #D5CEBE; stroke-width: 1; }
.graphe-ca text.annee-ca { stroke: none; fill: var(--muet); font-weight: 700; }
.graphe-ca .barre-ca { cursor: pointer; outline: none; }
.graphe-ca .barre-ca:hover .cible, .graphe-ca .barre-ca:focus .cible { fill: #F5F4F0; }
.graphe-ca .bulle { position: absolute; transform: translate(-50%, -100%); background: var(--nuit); color: #FFFFFF; font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; pointer-events: none; white-space: normal; width: max-content; max-width: min(260px, 90vw); z-index: 5; box-shadow: var(--ombre); }
.segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: #F5F4F0; }
.segments button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--encre-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.segments button[aria-pressed="true"] { background: var(--carte); color: var(--nuit); box-shadow: 0 1px 4px rgba(7, 8, 12, .12); }
.segments button.danger[aria-pressed="true"] { color: var(--rouge); }
.barres-ent { display: flex; flex-direction: column; gap: 9px; }
.barre-ent { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 13.5px; }
.barre-ent .rail { height: 10px; border-radius: 5px; background: #F1EFEA; overflow: hidden; }
.barre-ent .rempli { height: 100%; border-radius: 5px; background: var(--violet); }
.barre-ent b { text-align: right; font-variant-numeric: tabular-nums; }
.ajout-lead:not([open]) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ajout-lead > summary.bouton { display: inline-flex; width: auto; align-self: flex-start; }
.ajout-lead > summary.bouton::before { display: none; }
.ajout-lead[open] > summary { display: none; }
.ajout-lead .tete-ajout { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ajout-lead .tete-ajout h2 { margin: 0; }
.bouton-fermer { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--trait); background: #FFFFFF; color: var(--nuit); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.bouton-fermer:hover, .bouton-fermer:focus-visible { background: var(--trait-2); }
.champ select { min-height: 44px; padding: 9px 12px; border: 1px solid #767B86; border-radius: 12px; background: #FFFFFF; font-size: 15px; width: 100%; }
.page-tete .tete-droite .champ { min-width: 160px; }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.colonne-lead { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: #EEEBE5; border-radius: 16px; padding: 10px; }
.colonne-lead header { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 4px; }
.colonne-lead header b { font-size: 14px; color: var(--nuit); }
.colonne-lead header span { font-size: 12px; color: var(--muet); }
.deal { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 13px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.deal:hover { border-color: var(--violet); color: var(--encre); }
.deal .haut { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.deal .haut b { font-size: 14.5px; overflow-wrap: anywhere; }
.deal .montant { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deal .action { font-size: 13px; color: var(--encre-2); }
.deal .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muet); }
.deal .pill { min-height: 22px; padding: 0 8px; font-size: 11.5px; }
/* glisser une carte d'une étape à l'autre (07/10) : la carte ne se sélectionne pas et n'ouvre pas le menu du lien à l'appui long */
.pipeline .deal { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.deal.deal-source { opacity: .35; }
.deal-fantome { position: fixed; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none; box-shadow: 0 14px 32px rgba(7, 8, 12, .22); border-color: var(--violet); opacity: .96; }
body.glisse-lead, body.glisse-lead * { cursor: grabbing !important; }
body.glisse-lead .pipeline { scroll-snap-type: none; align-items: stretch; }
.colonne-lead.cible { outline: 2px dashed var(--violet); outline-offset: -2px; background: #D6DCF7; }
.glisse-fermer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; box-shadow: 0 -6px 20px rgba(7, 8, 12, .12); }
/* au téléphone, la barre de navigation du bas s'efface le temps du geste (elle dépassait au-dessus de la barre des étapes) */
@media (max-width: 820px) { body.glisse-lead .cote { visibility: hidden; } }
.glisse-fermer > div { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 2px dashed #DED8CC; border-radius: 12px; font: 600 14px var(--texte); color: var(--encre-2); background: #FFFFFF; }
.glisse-fermer > .zone-gagne { border-color: #9ED9C2; color: #0B7A53; }
.glisse-fermer > .zone-perdu { border-color: #F0B6B6; color: #9B2C2C; }
.glisse-fermer > div.cible { border-style: solid; background: var(--violet-pale); }
.glisse-fermer > .zone-gagne.cible { background: var(--vert-pale); }
.glisse-fermer > .zone-perdu.cible { background: #FCE8E8; }
.rouge { color: var(--rouge); }
.bant-puces { display: inline-flex; gap: 3px; }
.bant-puces i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font: 700 11px var(--texte); font-style: normal; }
.bant-puces i.ok { background: var(--vert-pale); color: #0B7A53; }
.bant-puces i.partiel { background: #FDEEDF; color: #8A4A0B; }
.bant-puces i.manque { background: #FDEEDF; color: #8A4A0B; outline: 1px dashed #E7B27C; outline-offset: -1px; }
.bant-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trait-2); }
.bant-ligne:last-of-type { border-bottom: 0; }
.bant-ligne .lettre { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font: 700 14px var(--titre); }
.bant-ligne.ok .lettre { background: var(--vert-pale); color: #0B7A53; }
.bant-ligne.partiel .lettre, .bant-ligne.manque .lettre { background: #FDEEDF; color: #8A4A0B; }
.bant-ligne > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bant-ligne small { font-size: 12.5px; color: var(--muet); }
.bant-ligne.partiel small:first-of-type, .bant-ligne.manque small:first-of-type { color: #8A4A0B; }
.bant-ligne summary.lien { font-size: 13px; font-weight: 600; color: var(--violet-fonce); min-height: 28px; }
.deux-col { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.col-large, .col-etroite { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.grille-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.cr { border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cr dl { margin: 0; display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.cr dt { font-weight: 700; color: var(--encre-2); }
.cr dd { margin: 0; }
.suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; background: var(--violet-pale); font-size: 13.5px; }
.suggestion > span { flex: 1 1 220px; }
/* carte unique « Prochaine action » proposée après un compte rendu (27/10) : action et date modifiables, un seul Appliquer */
.proposition-action { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
.proposition-action .proposition-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.proposition-action .champ { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muet); }
.proposition-action .champ input, .proposition-action .champ textarea { min-height: 36px; padding: 6px 10px; border: 1px solid #767B86; border-radius: 8px; font-size: 14px; background: #FFFFFF; color: inherit; width: 100%; box-sizing: border-box; }
.proposition-action .champ textarea { resize: vertical; font-family: inherit; line-height: 1.35; }
.proposition-action .proposition-date { align-items: flex-start; white-space: normal; }
.proposition-action .proposition-date input { width: auto; min-width: 150px; }
.proposition-action .proposition-citation { margin: 0; font-style: italic; }
.proposition-action .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proposition-action .actions .bouton { flex: 0 0 auto; }
.proposition-action .actions .bouton.principal { min-width: 120px; padding: 0 16px; flex-grow: 0; gap: 6px; }   /* « principal » est aussi la classe de la zone centrale (marges) : remise à plat pour le bouton */
.drive { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chrono { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.chrono li { display: flex; gap: 8px; align-items: baseline; }
.chrono .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
.notes-lead { width: 100%; min-height: 110px; padding: 9px 12px; border: 1px solid #767B86; border-radius: 12px; resize: vertical; }
.bloc-leads { gap: 8px; }
.ligne-lead { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--trait-2); color: var(--encre); text-decoration: none; min-height: 44px; }
.ligne-lead:last-child { border-bottom: 0; }
.ligne-lead span { font-size: 13.5px; color: var(--encre-2); }
.ligne-lead small { white-space: nowrap; font-size: 12.5px; color: var(--muet); }
.ligne-lead small.rouge { color: var(--rouge); font-weight: 700; }
.reunion { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--trait-2); }
.reunion:last-child { border-bottom: 0; }
.reunion > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reunion .formulaire.compact { flex: 1 1 320px; }
@media (max-width: 1080px) { .deux-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .tuiles-tdb { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tuile-tdb { padding: 12px 16px; }
  .tuile-tdb b { font-size: 22px; }
  .pipeline { grid-template-columns: repeat(5, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
  .colonne-lead { scroll-snap-align: start; }
  .barre-ent { grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) 30px; font-size: 13px; }
  .cr dl { grid-template-columns: minmax(0, 1fr); }
  .nav a { font-size: 10.5px; }
}

/* ---------------------------------------------------------------- réseau LinkedIn (0084) */
.personnes { display: flex; flex-direction: column; }
.personne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--trait-2); }
.personne:last-child { border-bottom: 0; }
.personne > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.personne small { font-size: 12.5px; color: var(--muet); overflow-wrap: anywhere; }
.personne .sources { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.personne .sources .pill { min-height: 22px; padding: 0 8px; font-size: 11.5px; }
.personne .actions { display: flex; gap: 6px; }
.personne.discrete { opacity: .75; }
details.carte[data-cle^="reseau-"] > summary h2 { display: inline; }
.retires ul { margin: 6px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; }
/* Veille des offres d'emploi (lot 1, veille.js) */
.paire { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; padding: 4px 0; }
.paire span { color: var(--muet); flex-shrink: 0; }
.paire b { text-align: right; overflow-wrap: anywhere; }
a.onglet { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.contact-veille { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--trait-2); font-size: 14px; }
.contact-veille small { color: var(--muet); font-size: 12.5px; overflow-wrap: anywhere; }
/* tuile Suivi d'une offre de la veille (0101) : ce qui est parti, en cases à cocher */
.cases-suivi { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.case-suivi { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px; }
.case-suivi input { width: 18px; height: 18px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--ton-bleu); }
.case-suivi input:disabled { cursor: not-allowed; }
.case-suivi input:disabled + span { color: var(--muet); }
.reponse-positive { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--ton-vert-pale); font-size: 14px; }
.filtres-entreprises { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.texte-criteres h3 { font: 700 15px var(--titre); margin: 16px 0 6px; }
.texte-criteres ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.texte-criteres p { margin: 6px 0; font-size: 14px; }
.jeton-montre { margin: 10px 0; padding: 12px; border-radius: 12px; background: var(--orange-pale); font-size: 13.5px; }
.jeton-montre pre { overflow-wrap: anywhere; white-space: pre-wrap; }
.a-savoir li, .contact-veille, .texte-criteres li, .fiche-entreprise p, .fiche-entreprise .paire b, .veille-stats p { overflow-wrap: anywhere; }
.vue-entreprise h1, .vue-entreprise .surtitre, .vue-entreprise .page-tete .muet, .vue-entreprise .carte-tete h2, .vue-entreprise .carte-tete .petit { overflow-wrap: anywhere; }
.vue-entreprise .page-tete > div:first-child, .vue-entreprise .carte-tete > * { min-width: 0; }


/* Bases Entreprises et Contacts (lot 3, 03/10, crm.js) */
.segments a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 9px; color: var(--encre-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.segments a[aria-current="page"] { background: var(--carte); color: var(--nuit); box-shadow: 0 1px 4px rgba(7, 8, 12, .12); }
nav.segments { margin-bottom: 14px; }
td.coupe { overflow-wrap: anywhere; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; }
.choix-lead { margin-bottom: 4px; }
.choix-fiche { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--encre-2); min-width: 0; }
.choix-fiche label { display: flex; flex-direction: column; gap: 4px; }
.choix-fiche input { min-height: 44px; padding: 9px 12px; border: 1px solid #767B86; border-radius: 12px; background: #FFFFFF; font-size: 15px; width: 100%; }
.choix-fiche.choisi { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: #FFFFFF; }
.choix-fiche.choisi > span { flex-basis: 100%; }
.choix-fiche.choisi b { color: var(--encre); font-size: 15px; }
.choix-fiche.creation { padding: 10px 12px; border: 1px dashed var(--trait); border-radius: 12px; }
.resultats-choix { display: flex; flex-direction: column; }
.resultats-choix .resultat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--trait-2); background: transparent; text-align: left; cursor: pointer; font-size: 14px; color: var(--encre); }
.resultats-choix .resultat:hover, .resultats-choix .resultat:focus-visible { background: var(--trait-2); }
.resultats-choix .resultat small { color: var(--muet); font-size: 12.5px; overflow-wrap: anywhere; }
.resultats-choix .resultat.creer { color: var(--nuit); font-weight: 600; }
.fiche-crm .contact-veille a { color: var(--encre); }
.fiche-crm .bouton.danger { color: var(--rouge); margin-top: 8px; }
.champ input.conflit, .champ textarea.conflit, textarea.notes-lead.conflit { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.fiche-crm .bouton.danger:hover { border-color: var(--rouge); }
.filtres-entreprises > label:first-child { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .col-sec { display: none; }
  .filtres-entreprises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fiches compactes (David, 03/10 au soir : « Je veux tout voir d'un coup quand j'arrive dessus ») : lead, entreprise, contact */
.fiche-lead .carte, .fiche-crm .carte { padding: 14px 16px; gap: 8px; border-radius: 16px; }
.fiche-lead .carte h2, .fiche-crm .carte h2 { font-size: 16px; }
.fiche-lead .deux-col, .fiche-lead .col-large, .fiche-lead .col-etroite, .fiche-crm .deux-col, .fiche-crm .col-large, .fiche-crm .col-etroite { gap: 12px; }
.fiche-lead .page-tete h1, .fiche-crm .page-tete h1 { font-size: 28px; }
/* en-tête d'un lead : la provenance (l'intitulé d'une offre de la veille, par exemple) passe à la ligne au téléphone au lieu de
   pousser la page de côté (relevé du 06/10) */
.fiche-lead .page-tete > div:first-child { min-width: 0; }
.fiche-lead .page-tete h1 { overflow-wrap: anywhere; }
.fiche-lead .page-tete .pill { white-space: normal; overflow-wrap: anywhere; padding-block: 3px; }
.fait-cite .pill { white-space: normal; overflow-wrap: anywhere; padding-block: 3px; }   /* réserve d’un fait (« à vérifier à la source... ») : passe à la ligne au téléphone */
.fiche-lead, .fiche-crm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fiche-crm .champ input, .fiche-crm .champ select, .fiche-lead .champ input, .fiche-lead .champ select { min-height: 38px; padding: 6px 10px; font-size: 14px; border-radius: 10px; }
.fiche-crm .champ, .fiche-lead .champ { font-size: 12.5px; gap: 3px; }
.fiche-crm .grille-champs { gap: 8px 10px; }
.affaire-ligne { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; align-items: start; }
.affaire-ligne .champ small { font-size: 11.5px; color: var(--muet); }
.affaire-ligne .motif { grid-column: 1 / -1; }
.actions-lead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* une ligne d'action passe à la ligne selon sa propre largeur, pas celle de l'écran (seconde relecture du 07/10 : dans une
   colonne étroite de la fiche ou de la todo, le texte tombait à quelques pixels entre 641 et 1 320 px) */
.action-lead { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--trait-2); }
.action-lead:last-child { border-bottom: 0; }
.action-lead input[type="checkbox"] { width: 18px; height: 18px; margin: 0 2px; accent-color: var(--violet); cursor: pointer; flex: 0 0 auto; }
.action-lead > .texte { flex: 1 1 200px; min-width: 0; }
.action-lead > .echeance, .action-lead > .action-cote { margin-left: auto; }
.action-lead .texte { border: 1px solid transparent; background: transparent; font: inherit; font-size: 14.5px; padding: 6px 6px; min-height: 36px; width: 100%; border-radius: 8px; color: var(--encre); }
.action-lead input.texte:hover { border-color: #767B86; }
.action-lead input.texte:focus { border-color: #767B86; background: #FFFFFF; }
.action-lead .echeance, .ajout-action .echeance { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muet); white-space: nowrap; }
.action-lead .echeance input, .ajout-action .echeance input { min-height: 34px; padding: 4px 6px; border: 1px solid #767B86; border-radius: 8px; font-size: 13px; background: #FFFFFF; }
.action-lead.retard .echeance input { color: var(--rouge); border-color: #F0B6B6; }
.action-lead.faite .texte { color: var(--muet); text-decoration: line-through; }
/* échéance et case « Réunion » (0105) côte à côte, au bout de la ligne */
.action-lead .action-cote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.case-reunion { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muet); white-space: nowrap; cursor: pointer; }
.case-reunion input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--violet); cursor: pointer; }
/* détails d'une action d'un lead (0112) : bouton, panneau sous la ligne, barre de mise en forme, éditeur */
.detail-bouton { font-size: 12.5px; color: var(--muet); white-space: nowrap; text-decoration: none; padding: 6px 8px; min-height: 32px; border-radius: 8px; }
.detail-bouton:hover { text-decoration: underline; }
.detail-bouton.plein { color: var(--violet-fonce); font-weight: 600; }
.action-lead.ouverte { background: var(--violet-pale); border-radius: 8px; padding: 2px 6px; }
.detail-action { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px 30px; }
.barre-format { display: flex; flex-wrap: wrap; gap: 4px; }
.barre-format button { min-width: 40px; min-height: 36px; padding: 2px 8px; border: 1px solid #DED8CC; border-radius: 8px; background: #FFFFFF; font: inherit; font-size: 13px; color: var(--encre); cursor: pointer; }
.barre-format button:hover { border-color: var(--violet); }
.editeur { min-height: 120px; max-height: 60vh; overflow-y: auto; padding: 8px 10px; border: 1px solid #767B86; border-radius: 8px; background: #FFFFFF; font-size: 14.5px; line-height: 1.5; color: var(--encre); overflow-wrap: anywhere; }
.editeur:focus { border-color: var(--violet); outline: none; }
.editeur:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.editeur[contenteditable="false"] { min-height: 0; background: transparent; }
.editeur:empty::before, .editeur.editeur-vide::before { content: attr(data-vide); color: var(--muet); }
.editeur p, .editeur div { margin: 0; }
.editeur ul, .editeur ol { margin: 4px 0; padding-left: 22px; }
.editeur a { color: var(--violet-fonce); text-decoration: underline; }
.editeur.conflit { border-color: var(--orange, #E08A2E); }
.detail-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.detail-pied .lien.rouge { color: var(--rouge); font-size: 13px; }
.ajout-action { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ajout-action > input { flex: 1 1 220px; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px dashed #767B86; border-radius: 8px; font-size: 14px; background: #FFFFFF; }
/* prochaine action demandée après la dernière coche (06/10) : texte et échéance dans la carte */
.suite-action { margin: 4px 0 6px; font-size: 14px; }
.ajout-action.suite { padding: 10px; background: var(--ton-bleu-pale); border-radius: 10px; }
.ajout-action.suite > input { border-style: solid; border-color: var(--ton-bleu); }
.fiche-lead .cr { padding: 10px 12px; gap: 6px; }
.fiche-lead .cr-tete { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; }
.fiche-lead .cr-tete span { color: var(--muet); }
.fiche-lead .cr.attente { border-style: dashed; }
.texte-cr { white-space: pre-wrap; max-height: 320px; overflow: auto; font-size: 13px; }
.ajout-cr { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fiches-lead { gap: 4px; }
.sous-titre { font: 700 11px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: #858B97; margin: 2px 0 0; }
.ligne-fiche { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 4px 0; }
.ligne-fiche > div { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.ligne-fiche small { font-size: 12.5px; color: var(--muet); overflow-wrap: anywhere; }
.ligne-fiche details.modif > summary { font-size: 12.5px; }
.ligne-fiche details.modif[open] { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.bant-compact { display: flex; flex-direction: column; }
.bant-l { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; padding: 4px 0; border-bottom: 1px solid var(--trait-2); }
.bant-l:last-child { border-bottom: 0; }
.bant-l .lettre { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font: 700 12px var(--titre); }
button.lettre { border: 0; padding: 0; cursor: pointer; }
button.lettre:focus-visible { outline: 2px solid var(--violet-fonce); outline-offset: 1px; }
.bant-l.ok .lettre { background: var(--vert-pale); color: #0B7A53; }
.bant-l.partiel .lettre, .bant-l.manque .lettre { background: #FDEEDF; color: #8A4A0B; }
.bant-v { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.bant-v input { flex: 1; min-width: 0; min-height: 30px; padding: 3px 8px; border: 1px solid #767B86; border-radius: 8px; font-size: 14px; font-weight: 400; background: #FFFFFF; }
.bant-r { border: 1px solid transparent; background: transparent; font-size: 12.5px; color: var(--muet); padding: 2px 6px; min-height: 26px; width: 100%; border-radius: 6px; }
.bant-r:hover, .bant-r:focus { border-color: #DED8CC; background: #FFFFFF; color: var(--encre); }
.bant-v input.conflit, .bant-r.conflit, .action-lead .texte.conflit { border-color: var(--orange, #E08A2E); }
.fiche-lead details.carte > summary { cursor: pointer; list-style: none; }
.tri .bouton.petit { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.tri .bouton.choisi { background: var(--violet-pale); border-color: var(--violet); color: var(--nuit); }
.filtres-imports { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.filtres-imports label { min-width: 180px; }
td.tel a { white-space: nowrap; }
@media (max-width: 640px) {
  .action-lead > .echeance, .action-lead > .action-cote { flex-basis: 100%; margin-left: 0; padding: 0 0 4px 30px; }
  .detail-action { padding-left: 0; }
  .ajout-action > input, .ajout-action > button { flex: 1 1 100%; }
  .affaire-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .affaire-ligne > :first-child { grid-column: 1 / -1; }
}
/* Tableau de bord (David, 03/10) : indicateurs des leads et lignes qui ouvrent la liste des opportunités */
.indicateurs-leads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.indicateur-lead { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; text-decoration: none; color: var(--encre); background: #FFFFFF; }
.indicateur-lead b { font: 700 24px var(--titre); color: var(--nuit); }
.indicateur-lead span { font-size: 12.5px; color: var(--muet); }
.indicateur-lead:hover, .indicateur-lead:focus-visible { border-color: var(--violet); }
a.barre-ent { text-decoration: none; color: inherit; border-radius: 8px; }
a.barre-ent:hover, a.barre-ent:focus-visible { background: var(--trait-2); }
tr.ligne-lien { cursor: pointer; }
tr.ligne-lien:hover td { background: var(--trait-2); }
tr.ligne-lien td a { color: inherit; text-decoration: none; }
tr.ligne-lien td a:hover { text-decoration: underline; }
@media (max-width: 640px) { .indicateurs-leads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ajouter une entreprise ou un contact : en haut de la liste (David, 03/10) ; fermé, seulement le bouton */
.ajout-fiche:not([open]) { background: none; border: 0; box-shadow: none; padding: 0; }
.ajout-fiche > summary.bouton { display: inline-flex; width: auto; align-self: flex-start; list-style: none; }
.ajout-fiche > summary.bouton::-webkit-details-marker { display: none; }
.ajout-fiche > summary.bouton::before { display: none; }   /* pas de chevron devant le bouton (David, 03/10) */
.deal .haut .qui { min-width: 0; overflow-wrap: anywhere; }
.deal .haut .qui small { font-weight: 400; color: var(--muet); }

/* Fiches Contact et Entreprise (0094, maquette 0.2) : les coordonnées une par ligne sur une carte de 640 px, où une adresse ou un
   profil de 55 caractères tient en une ligne ; au téléphone, le libellé passe au-dessus de la valeur */
.fiche-v2 .grille-fiche { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fiche-v2 .col-droite { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coord { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; margin: 0; }
.coord dt { font-size: 13px; color: var(--muet); padding-block: 7px; }
.coord dt label { color: inherit; font: inherit; }
.coord dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.coord .valeur { flex: 1; min-width: 0; width: auto; min-height: 34px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--encre); text-overflow: ellipsis; box-shadow: none; }
.coord .valeur:hover { border-color: #DED8CC; background: var(--carte); }
.coord .valeur:focus { border-color: var(--violet); background: var(--carte); box-shadow: 0 0 0 3px var(--violet-pale); outline: none; }
.coord .valeur.conflit { border-color: var(--orange); }
.coord dd small { color: var(--muet); font-size: 12px; }
.coord .valeur-lien { flex: 1; min-width: 0; padding: 5px 8px; font-size: 14.5px; }
.coord .dd-entreprise details { flex-basis: 100%; }
.coord .dd-entreprise details:not([open]) { flex-basis: auto; }
.coord .separe { border-top: 1px solid var(--trait-2); margin-top: 6px; align-self: stretch; }
.coord dt.separe { margin-right: -14px; padding-right: 14px; }   /* le trait passe sous l'espace entre les deux colonnes */
.copier { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muet); cursor: pointer; }
.copier:hover { background: var(--violet-pale); color: var(--violet-fonce); }
.copier:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.copier svg { width: 16px; height: 16px; }
.copier .fait { display: none; }
.copier.copie { color: #0B7A53; background: var(--vert-pale); }
.copier.copie .copie-icone { display: none; }
.copier.copie .fait { display: block; }
.coord-carte .origines { margin-top: 4px; }
.sirene { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--trait-2); }
.sirene p { margin: 0; }
.sirene .proposition { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--trait-2); }
.sirene .proposition:first-of-type { border-top: 0; }
.sirene .proposition span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
/* une carte tranchée dans la séance : en place, éteinte, l'état posé par-dessus sans changer sa hauteur (13/10) */
.sirene.tranchee { position: relative; }
.sirene.tranchee > :not(.etat-choix) { opacity: .35; }
.sirene .etat-choix { position: absolute; inset: 8px 0 0 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; overflow: hidden; z-index: 1;
  background: rgba(255, 255, 255, 0.9); border-radius: 8px; }
.sirene .proposition small { color: var(--muet); font-size: 12.5px; }
.pied-fiche { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muet); padding: 2px 4px; }
.pied-fiche .actions-fiche { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.pied-fiche .lien.rouge { color: var(--rouge); font-weight: 600; }
.obligatoire { color: var(--rouge); }
@media (max-width: 900px) { .fiche-v2 .grille-fiche { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .coord { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .coord dt { padding-block: 6px 0; font-size: 12px; }
  .coord dd { border-bottom: 1px solid var(--trait-2); padding-bottom: 4px; }
  .coord dd:last-of-type { border-bottom: 0; }
  .coord .valeur, .coord .valeur-lien { padding-inline: 0; }
  .coord .valeur:focus { padding-inline: 6px; }
  .copier { width: 40px; height: 40px; }
  .coord .separe { border-top: 0; margin-top: 0; }
  .coord dt.separe { margin-right: 0; padding-right: 0; }
}

/* Todo (0104, maquette 0.1 validée le 06/10) : une liste à la Notion, une ligne par tâche (tâche, type, sujet, échéance,
   statut), la ligne ouverte sur la tuile d'avant ; au téléphone, la ligne se replie sur deux ou trois lignes */
.todo-compte { margin: -8px 0 0; color: var(--encre-2); font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.todo-ajout { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 8px 10px; }
.todo-ajout input[name="texte"] { flex: 1 1 260px; min-width: 0; border: 0; padding: 6px 4px; font-size: 15px; background: transparent; }
.todo-ajout label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muet); }
.todo-ajout input[type="date"] { border: 1px solid #767B86; border-radius: 8px; padding: 4px 6px; font-size: 13px; background: var(--carte); }
.todo-ajout .bouton { flex: 0 0 auto; width: auto; min-height: 36px; }
.todo-vues { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #E1DCD1; }
.todo-vues > a { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--muet); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.todo-vues > a.actif { color: var(--nuit); border-bottom-color: var(--nuit); }
.todo-filtres { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muet); padding-bottom: 4px; }
.todo-filtres select { padding: 4px 6px; border-radius: 8px; border: 1px solid #767B86; background: var(--carte); font-size: 13px; }
.todo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.todo-liste { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; min-width: 0; }
.todo-ligne { display: grid; grid-template-columns: 30px minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 156px 112px 30px; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--trait-2); font-size: 14px; }
.todo-liste > .todo-ligne:first-child { border-top: 0; }
.todo-entete { font-size: 12.5px; color: var(--muet); font-weight: 600; border-bottom: 1px solid var(--trait); }
.todo-ligne.ouverte { background: #F5F7FD; }
/* comptée dans le chiffre du menu (le même orangé que la pastille, plus transparent ; David, 12/10) */
.todo-ligne.urgente { background: rgba(242, 153, 74, 0.16); }
.todo-ligne.urgente.ouverte { background: rgba(242, 153, 74, 0.24); }
.todo-ligne.faite .todo-titre { text-decoration: line-through; color: var(--muet); }
.todo-tache { display: flex; flex-direction: column; min-width: 0; }
.todo-titre { all: unset; cursor: pointer; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.todo-titre:hover { color: var(--violet-fonce); }
.todo-titre:focus-visible, .chevron:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
.todo-tache small { color: var(--muet); font-size: 12.5px; overflow-wrap: anywhere; }
.todo-sujet { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.todo-sujet a { color: var(--encre-2); text-decoration: none; border-bottom: 1px dotted #B5B9C0; }
.coche { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 50%; border: 2px solid #B5B9C0; background: var(--carte); cursor: pointer; display: inline-block; vertical-align: middle; }
.coche:hover { border-color: var(--violet); background: var(--violet-pale); }
input.coche:checked { background: var(--vert); border-color: var(--vert); }
.coche:disabled { cursor: default; opacity: .5; }
.chevron { all: unset; cursor: pointer; display: inline-block; width: 20px; text-align: center; color: var(--muet); font-size: 13px; }
.todo-date input { border: 1px solid transparent; border-radius: 8px; padding: 3px 6px; font-size: 13px; background: transparent; width: 140px; max-width: 100%; }
.todo-date input:hover, .todo-date input:focus { border-color: #767B86; background: var(--carte); }
.todo-date.retard input { color: #A12B2B; font-weight: 700; }
.todo-date.proche input { color: #8A4A0B; font-weight: 700; }
.todo-date-fixe { font-size: 13px; }
.todo-ou { display: block; font-size: 11px; color: var(--muet); padding-left: 7px; }
.todo-statut { padding: 3px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: 13px; max-width: 100%; }
.todo-statut:hover { border-color: #DED8CC; background: var(--carte); }
.todo-statut.en-cours { color: #2940A8; font-weight: 600; }
.todo-statut.a-arbitrer { color: #8A4A0B; font-weight: 600; }
.todo-panneau { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; padding: 4px 12px 14px 52px; background: #F5F7FD; }
.todo-tuile { min-width: 0; }
.todo-tuile .carte { box-shadow: none; }
.todo-reglages { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.todo-reglages .champ { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muet); }
.todo-reglages .champ select, .todo-reglages .todo-date input { padding: 6px 8px; border-radius: 9px; border: 1px solid #767B86; background: var(--carte); font-size: 14px; color: var(--encre); width: 100%; }
.todo-reglages .petit { margin: 0; }
.todo-groupe h2 { font-size: 16px; display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; }
.todo-groupe h2 .compte { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #FFFFFF; }
.todo-groupe.retard h2 { color: #A12B2B; }
.todo-vide { padding: 8px 4px; }
.todo-aussi { display: flex; flex-direction: column; gap: 10px; }
.todo-aussi h2 { font-size: 16px; }
.todo-partage { position: relative; }
.todo-partage > summary { list-style: none; }
.todo-partage > summary::-webkit-details-marker { display: none; }
.todo-partage > .carte { position: absolute; right: 0; z-index: 5; width: min(320px, calc(100vw - 32px)); margin-top: 6px; gap: 8px; }
.todo-qui { flex-direction: row; align-items: center; gap: 6px; }
.suite-todo { border-color: #D6CEBF; }
.todo-ligne.todo-suite { display: block; padding: 8px 12px; background: #F5F7FD; }
.todo-suppr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muet); cursor: pointer; padding: 0; }
.todo-suppr:hover:not(:disabled) { color: #A12B2B; border-color: #EBC9C9; background: #FCF3F3; }
.todo-ligne.retiree .todo-suppr:hover:not(:disabled) { color: var(--violet-fonce); border-color: #DED8CC; background: var(--carte); }
.todo-suppr:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.todo-suppr:disabled { opacity: .35; cursor: default; }
.todo-ligne.retiree .todo-titre { color: var(--muet); }
.todo-retrait { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; border-top: 1px solid var(--trait-2); padding-top: 8px; }
.todo-ligne.todo-suite .suite-todo { margin: 0; }
@media (max-width: 760px) {
  .todo-ligne { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 10px; }
  .todo-ligne.todo-entete { display: none; }
  .todo-date input { width: 128px; }
  .todo-coche { flex: 0 0 26px; }
  .coche { width: 24px; height: 24px; }
  .todo-tache { flex: 1 1 calc(100% - 40px); }
  .todo-type { margin-left: 32px; }
  .todo-type, .todo-sujet, .todo-ech, .todo-st { flex: 0 1 auto; }
  .todo-sup { margin-left: auto; }
  .todo-suppr { width: 40px; height: 40px; }   /* au doigt : une cible plus grande (relecture du 12/10) */
  .todo-ou { display: none; }
  .todo-panneau { grid-template-columns: minmax(0, 1fr); padding: 4px 10px 12px; }
  .todo-filtres { margin-left: 0; }
  .todo-partage > .carte { right: auto; left: 0; }
}

/* Référentiel des offres et des personas, relations LinkedIn (lot 1 LinkedIn, 0113 à 0115) */
.ref-gamme { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ref-gamme > h2 { margin: 8px 0 0; }
details.ref-offre > summary, details.ref-persona > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; }
details.ref-offre > summary::-webkit-details-marker, details.ref-persona > summary::-webkit-details-marker { display: none; }
details.ref-offre[open] > summary, details.ref-persona[open] > summary { margin-bottom: 4px; }
.personne small.raison { display: block; margin-top: 2px; color: var(--muet); }
.brouillon-relation { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.brouillon-relation p { margin: 0; padding: 12px 14px; background: var(--violet-pale); border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.chiffres-relations { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.chiffre-relation b { display: block; font-family: var(--titre); font-size: 22px; color: var(--nuit); }
.chiffre-relation small { color: var(--muet); }
.chiffre-relation a { color: inherit; text-decoration: none; }
.relation-contact .tache { box-shadow: none; border-style: dashed; }

/* contenu LinkedIn (0120) : le texte d'un post garde ses paragraphes ; la carte à la taille d'un fil de téléphone */
.texte-post { white-space: pre-wrap; }
.contenu-texte { margin: .75rem 0; }
.contenu-carte { margin: .75rem 0; }
.contenu-carte img { display: block; width: 270px; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--trait); }
.contenu-angle h3 { margin: .4rem 0; }
/* « Publié en direct » ou « Programmé » (12/10) : deux boutons radio côte à côte, rien de coché d'avance */
.choix-radio { border: 0; padding: 0; margin: 0; min-width: 0; }
.choix-radio legend { padding: 0; margin-bottom: 4px; font-size: 13.5px; color: var(--encre-2); }
.choix-radio > div { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.formulaire .choix-radio label { flex-direction: row; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; color: var(--encre); cursor: pointer; }
.formulaire .choix-radio input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; border: 0; flex: 0 0 auto; accent-color: var(--violet); }
/* téléphone étroit (320 à 360 px) : huit entrées dans la barre du bas depuis Contenu (relecture du 12/10 : Réglages, où est l'arrêt
   d'urgence, sortait de l'écran) ; les libellés se coupent plutôt que de pousser la barre */
@media (max-width: 360px) {
  .nav a { min-width: 0; font-size: 10px; padding: 6px 1px; }
  .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}