/* Radar Signaux Faibles — interface web. Palette sarcelle / orange brûlé, thèmes clair et sombre par variables. */
:root {
  --paper: #F2F5F3; --card: #FFFFFF; --ink: #12211D; --muted: #5A6A65; --line: #D3DCD8; --line-fort: #AEBDB7;
  --accent: #0E7068; --accent-soft: #DCEFEC; --sur-accent: #FFFFFF;
  --chaud: #C2410C; --chaud-soft: #FBE4D8; --tiede: #A86A12; --tiede-soft: #F7EBD3; --froid: #64748B; --froid-soft: #E6EAEF;
  --ok: #0E7068; --ok-soft: #DCEFEC; --erreur: #B42318; --erreur-soft: #FDE8E6; --info: #2F5E8C; --info-soft: #E3EDF7;
  --auto: #0E7068; --verif: #3E9C93; --cle: #A86A12; --humain: #9AA7A3;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --rayon: 14px;
  --menu-bg: #0B2A26; --menu-ink: #E4F1EE; --menu-muted: #86AFA8; --menu-survol: rgba(255,255,255,.07); --menu-trait: rgba(255,255,255,.10);
  --menu-actif: rgba(52,198,184,.20); --menu-accent: #3FD0C1; --orange: #E8672A;
  --ombre: 0 1px 2px rgba(16,40,35,.05), 0 8px 24px -12px rgba(16,40,35,.16);
  --ombre-forte: 0 2px 4px rgba(16,40,35,.06), 0 16px 36px -14px rgba(16,40,35,.26);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0D1513; --card: #131D1A; --ink: #E3ECE8; --muted: #93A49F; --line: #25332F; --line-fort: #3A4B46;
  --accent: #34C6B8; --accent-soft: #123430; --sur-accent: #0D1513;
  --chaud: #F2793A; --chaud-soft: #3A1E12; --tiede: #E7B04B; --tiede-soft: #33280F; --froid: #8C9AAE; --froid-soft: #1E2630;
  --ok: #34C6B8; --ok-soft: #123430; --erreur: #F97066; --erreur-soft: #3B1714; --info: #7CB4E8; --info-soft: #14263A;
  --auto: #34C6B8; --verif: #2A8C83; --cle: #E7B04B; --humain: #4E5E59; --menu-bg: #07110F; --menu-ink: #DCEBE7; --menu-muted: #7F9C96; --menu-survol: rgba(255,255,255,.05);
  --menu-trait: rgba(255,255,255,.08); --menu-actif: rgba(52,198,184,.16); --menu-accent: #34C6B8; --orange: #F2793A;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6); --ombre-forte: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.7);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0D1513; --card: #131D1A; --ink: #E3ECE8; --muted: #93A49F; --line: #25332F; --line-fort: #3A4B46;
  --accent: #34C6B8; --accent-soft: #123430; --sur-accent: #0D1513;
  --chaud: #F2793A; --chaud-soft: #3A1E12; --tiede: #E7B04B; --tiede-soft: #33280F; --froid: #8C9AAE; --froid-soft: #1E2630;
  --ok: #34C6B8; --ok-soft: #123430; --erreur: #F97066; --erreur-soft: #3B1714; --info: #7CB4E8; --info-soft: #14263A;
  --auto: #34C6B8; --verif: #2A8C83; --cle: #E7B04B; --humain: #4E5E59; --menu-bg: #07110F; --menu-ink: #DCEBE7; --menu-muted: #7F9C96; --menu-survol: rgba(255,255,255,.05);
  --menu-trait: rgba(255,255,255,.08); --menu-actif: rgba(52,198,184,.16); --menu-accent: #34C6B8; --orange: #F2793A;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6); --ombre-forte: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.7);
  color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--f-body); overflow-x: hidden }
h1, h2, h3 { font-family: var(--f-display); font-stretch: 85%; margin: 0; text-wrap: balance; letter-spacing: -0.01em; line-height: 1.15 }
h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800 }
h2 { font-size: 20px; font-weight: 700 }
h3 { font-size: 16px; font-weight: 700 }
p { margin: 0 }
a { color: var(--accent); text-underline-offset: 2px }
a:hover { text-decoration-thickness: 2px }
img { max-width: 100% }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.saut { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px }
.saut:focus { top: 8px }
.muted { color: var(--muted) }
.petit { font-size: 13.5px }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums }
.eyebrow { font: 600 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
.casse { overflow-wrap: anywhere; word-break: break-word }
.droite-txt { text-align: right }

/* ------------------------------------------------------------ cadre : menu latéral + contenu */
.cadre { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh }
.cadre.seul { grid-template-columns: minmax(0, 1fr) }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--card); border-right: 1px solid var(--line);
  padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 16px }
.marque { display: grid; gap: 4px; padding: 0 8px; text-decoration: none; color: var(--ink) }
.marque b { font: 800 21px/1.05 var(--f-display); font-stretch: 80% }
.menu nav { display: grid; gap: 14px }
.menu-groupe { display: grid; gap: 2px }
.menu-groupe > span { font: 600 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 8px }
.menu-groupe a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px }
.menu-groupe a:hover { background: var(--accent-soft) }
.menu-groupe a[aria-current="page"] { background: var(--ink); color: var(--paper) }
.compte { font: 600 12px/1 var(--f-data); padding: 3px 7px; border-radius: 999px; background: var(--chaud-soft); color: var(--chaud) }
.menu-groupe a[aria-current="page"] .compte { background: var(--paper); color: var(--ink) }
.menu-pied { margin-top: auto; display: grid; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--line); font-size: 14px }
.menu-pied .qui { overflow-wrap: anywhere }
.menu-pied .ligne { display: flex; gap: 6px; flex-wrap: wrap }
.barre-haut { display: none }
.contenu { padding: 26px 30px 64px; width: 100%; max-width: 1320px; min-width: 0; display: grid; gap: 22px; align-content: start }
.contenu > * { min-width: 0 }


/* ------------------------------------------------------------ en-têtes, blocs */
.entete-page { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px }
.entete-page > div:first-child { display: grid; gap: 6px; min-width: 0 }
.entete-page .actions { display: flex; flex-wrap: wrap; gap: 8px }
.intro { color: var(--muted); max-width: 75ch }
.bloc { background: var(--card); border: 1px solid var(--line); border-radius: var(--rayon); padding: 16px 18px; display: grid; gap: 12px; min-width: 0; align-content: start }
.bloc > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px }
.bloc-titre { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start }
.grille-principale { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start }
.pile { display: grid; gap: 18px; align-content: start; min-width: 0 }
@media (max-width: 1100px) { .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 900px) { .grille-2, .grille-3, .grille-principale { grid-template-columns: minmax(0, 1fr) } }
.separateur { border: 0; border-top: 1px solid var(--line); margin: 4px 0 }

/* ------------------------------------------------------------ chiffres clés */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 50%), 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line) }
.kpi { padding: 12px 14px 14px 0; display: grid; gap: 2px; text-decoration: none; color: inherit }
.kpi b { font: 700 30px/1.1 var(--f-display); font-stretch: 80% }
.kpi span { font-size: 13px; color: var(--muted) }
.kpi.chaud b { color: var(--chaud) } .kpi.tiede b { color: var(--tiede) }
a.kpi:hover span { color: var(--ink); text-decoration: underline }

/* ------------------------------------------------------------ boutons et formulaires */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 14.5px/1.2 var(--f-body); color: var(--ink);
  background: var(--card); border: 1px solid var(--line-fort); border-radius: 8px; padding: 8px 13px; cursor: pointer; text-decoration: none;
  min-height: 38px; text-align: center; max-width: 100% }
.btn:hover { border-color: var(--ink) }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: var(--sur-accent) }
.btn.primaire:hover { filter: brightness(1.08) }
.btn.danger { color: var(--erreur); border-color: var(--erreur) }
.btn.discret { border-color: transparent; background: transparent; color: var(--accent); padding-inline: 8px }
.btn.discret:hover { background: var(--accent-soft) }
.btn.petit { font-size: 13.5px; padding: 5px 10px; min-height: 32px }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
form.enligne { display: inline }

label { font-weight: 600; font-size: 14px }
.champ { display: grid; gap: 5px; min-width: 0; align-content: start }
.champ .aide { font-weight: 400; font-size: 13px; color: var(--muted) }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"], select, textarea {
  font: 15.5px/1.35 var(--f-body); color: var(--ink); background: var(--card); border: 1px solid var(--line-fort); border-radius: 8px;
  padding: 8px 10px; width: 100%; min-width: 0; min-height: 40px }
textarea { min-height: 120px; resize: vertical; line-height: 1.45 }
textarea.long { min-height: 260px }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent) }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8 }
.case { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; cursor: pointer }
.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent) }
.cases { display: flex; flex-wrap: wrap; gap: 8px 16px }
.formulaire { display: grid; gap: 14px }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 16px }
.champs.larges { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) }
fieldset { border: 1px solid var(--line); border-radius: var(--rayon); padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; min-width: 0 }
legend { font: 700 15px var(--f-display); font-stretch: 85%; padding: 0 6px }

.filtres { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rayon); padding: 12px 14px }
.filtres .champ { flex: 1 1 150px }
.filtres .champ.large { flex: 2 1 220px }
.filtres label { font-size: 12.5px; color: var(--muted); letter-spacing: .02em }
.filtres .boutons { flex: 0 0 auto }

.onglets { display: flex; flex-wrap: wrap; gap: 6px }
.onglets a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-fort);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; background: var(--card) }
.onglets a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.onglets a .num { font-size: 12px; opacity: .8 }

/* ------------------------------------------------------------ messages flash, états vides */
.flash { border-radius: var(--rayon); padding: 11px 14px; border: 1px solid; font-weight: 600; font-size: 15px }
.flash.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ink) }
.flash.erreur { background: var(--erreur-soft); border-color: var(--erreur); color: var(--ink) }
.flash.info { background: var(--info-soft); border-color: var(--info); color: var(--ink) }
.flashes { display: grid; gap: 8px }
.vide { padding: 26px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line-fort); border-radius: var(--rayon); display: grid; gap: 6px; justify-items: center }
.vide strong { color: var(--ink); font-size: 16px }
.vide p { max-width: 60ch }
.alerte-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.alerte-liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; font-size: 14.5px }
.alerte-liste li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--cle) }
.alerte-liste li.grave::before { background: var(--erreur) }
.alerte-liste li.ok::before { background: var(--ok) }

/* ------------------------------------------------------------ pastilles, badges, étiquettes */
.pastille { display: inline-block; font: 600 12.5px/1 var(--f-body); padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--froid-soft); color: var(--froid) }
.pastille.niv-chaud { background: var(--chaud-soft); color: var(--chaud) }
.pastille.niv-tiede { background: var(--tiede-soft); color: var(--tiede) }
.badges { display: flex; gap: 4px; flex-wrap: wrap }
.badge { font: 600 10.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; padding: 4px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted) }
.badge.on { border-color: var(--accent); color: var(--accent) }
.etiquette { display: inline-block; font: 600 12.5px/1.2 var(--f-body); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-fort); color: var(--muted); white-space: nowrap }
.etiquette.ok { border-color: var(--ok); color: var(--ok) }
.etiquette.attention { border-color: var(--tiede); color: var(--tiede) }
.etiquette.erreur { border-color: var(--erreur); color: var(--erreur) }
.etiquette.info { border-color: var(--info); color: var(--info) }
.puces { display: flex; flex-wrap: wrap; gap: 5px }
.puce { font-size: 12.5px; line-height: 1.3; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); overflow-wrap: anywhere }
.puce i { font-style: normal; font-family: var(--f-data); color: var(--accent); margin-right: 4px }
.acc { font-size: 12.5px; padding: 2px 7px; border-radius: 4px; white-space: normal; border: 1px solid var(--line); display: inline-block }
.acc[data-a="AUTO"] { border-color: var(--auto); color: var(--auto) }
.acc[data-a="AUTO_PARTIEL"] { border-color: var(--verif); color: var(--verif) }
.acc[data-a="MANUEL"] { color: var(--muted) }
.acc.cle { border-color: var(--cle); color: var(--cle) }

/* ------------------------------------------------------------ barres */
.barre { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; min-width: 40px }
.barre span { display: block; height: 100%; background: var(--accent) }
.barres { display: grid; gap: 8px; font-size: 14px; margin: 0; padding: 0; list-style: none }
.barres li { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 10px; align-items: center }
.barres li > span:first-child { display: grid; gap: 3px; min-width: 0 }
.barres b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.barres .num { text-align: right }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 14px }
.note { display: grid; gap: 4px; font-size: 13px; color: var(--muted) }
.note b { color: var(--ink); font-family: var(--f-data); font-weight: 500 }
.note .barre { height: 8px }

/* ------------------------------------------------------------ liste des leads */
.liste { display: grid; gap: 8px }
.lead-ligne { background: var(--card); border: 1px solid var(--line); border-radius: var(--rayon); display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; color: inherit; text-decoration: none }
a.lead-ligne:hover { border-color: var(--line-fort); box-shadow: 0 1px 0 var(--line) }
.score { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--f-data);
  border: 3px solid var(--froid); color: var(--ink); flex: none }
.score.niv-chaud { border-color: var(--chaud); background: var(--chaud-soft) }
.score.niv-tiede { border-color: var(--tiede); background: var(--tiede-soft) }
.score.grand { width: 64px; height: 64px; font-size: 20px; border-width: 4px }
.ident { min-width: 0; display: grid; gap: 4px }
.ident strong { font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere }
.ident .lieu { font-size: 13.5px; color: var(--muted) }
.lead-droite { display: grid; gap: 6px; justify-items: end }
.presence { width: 104px; display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); text-align: right }
@media (max-width: 600px) {
  .lead-ligne { grid-template-columns: 48px minmax(0, 1fr) }
  .lead-droite { grid-column: 2; justify-items: start }
  .presence { text-align: left }
}

/* ------------------------------------------------------------ tableaux */
.defile { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch }
.tableau { border-collapse: collapse; width: 100%; font-size: 14.5px }
.tableau th, .tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
.tableau th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap }
.tableau td.n, .tableau th.n { text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums }
.tableau tr:last-child td { border-bottom: 0 }
.tableau a.tri { color: inherit; text-decoration: none }
.tableau a.tri[aria-sort] { color: var(--ink) }
@media (max-width: 700px) {
  .tableau.cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  .tableau.cartes, .tableau.cartes tbody, .tableau.cartes tr, .tableau.cartes td { display: block; width: 100% }
  .tableau.cartes tr { border: 1px solid var(--line); border-radius: var(--rayon); padding: 8px 12px; margin-bottom: 8px; background: var(--card) }
  .tableau.cartes td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; text-align: left }
  .tableau.cartes td.n { text-align: left }
  .tableau.cartes td::before { content: attr(data-l); font: 600 11.5px/1.6 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
  .tableau.cartes td[data-l=""]::before { content: none }
  .tableau.cartes td[data-l=""] { grid-template-columns: minmax(0, 1fr) }
}

/* ------------------------------------------------------------ fiche lead */
.fiche-entete { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center }
.fiche-entete .ident strong { font: 800 clamp(24px, 4vw, 34px)/1.1 var(--f-display); font-stretch: 85% }
.def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 15px }
.def dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px }
.def dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
@media (max-width: 560px) { .def { grid-template-columns: minmax(0, 1fr) } .def dt { margin-top: 6px } }
.carte-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0 }
.carte-item > header { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between }
.carte-item h3 { font-size: 15.5px }
.liste-items { display: grid; gap: 10px }
.coord { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14.5px }
.origine { font-size: 12.5px; color: var(--muted) }
details { min-width: 0 }
details > summary { cursor: pointer; font-weight: 600; color: var(--accent) }
pre.preuve { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.45 var(--f-data); background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; max-height: 320px; overflow: auto }
.texte-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; background: var(--paper); border-radius: 6px; padding: 10px 12px; border: 1px solid var(--line) }
.chronologie { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.chronologie li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 14.5px }
@media (max-width: 560px) { .chronologie li { grid-template-columns: minmax(0, 1fr); gap: 2px } }
.variables { display: flex; flex-wrap: wrap; gap: 6px }
.variables code, code { font: 12.5px var(--f-data); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere }
.variables button { all: unset; cursor: pointer; font: 12.5px var(--f-data); background: var(--accent-soft); padding: 3px 7px; border-radius: 4px }
.variables button:focus-visible { outline: 2px solid var(--accent) }
.cmd { display: block; font: 13px/1.5 var(--f-data); background: var(--paper); border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; white-space: pre-wrap }

/* ------------------------------------------------------------ pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between }
.pagination-info { color: var(--muted); font-size: 14px }
.pagination-liens { display: flex; flex-wrap: wrap; gap: 4px }
.pagination-liens a, .pagination-liens span { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; background: var(--card) }
.pagination-liens span[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.pagination-liens .ellipse { border: 0; background: none; color: var(--muted) }

/* ------------------------------------------------------------ connexion, installation, erreurs */
.page-seule { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px }
.boite-seule { width: 100%; max-width: 460px; display: grid; gap: 18px }
.boite-seule.large { max-width: 760px }
.etapes { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 13.5px }
.etapes li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted) }
.etapes li[aria-current="step"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.verif { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px }
.verif li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px }
.verif li::before { content: "✓"; color: var(--ok); font-weight: 700 }
.verif li.ko::before { content: "✕"; color: var(--erreur) }
.verif li.av::before { content: "!"; color: var(--tiede) }

.theme-choix { font: 600 13px var(--f-body) }
@media (prefers-reduced-motion: no-preference) { .barre span { transition: width .4s ease } }
@media print { .menu, .barre-haut, .filtres, .boutons, .pagination { display: none !important } .cadre { display: block } }
select.etroit { width: auto; max-width: 100% }
.titre-pile { display: grid; gap: 6px }
/* Blocs étroits (colonne de droite) : listes de définitions empilées */
.bloc { container-type: inline-size }
@container (max-width: 440px) {
  .def { grid-template-columns: minmax(0, 1fr); gap: 2px 0 }
  .def dt { margin-top: 8px }
  .def dt:first-child { margin-top: 0 }
  .lead-ligne { grid-template-columns: 48px minmax(0, 1fr) }
  .lead-droite { grid-column: 2; justify-items: start }
  .presence { text-align: left }
}
.carte-item h2 { font-size: 16.5px }
.groupe { display: grid; gap: 6px; margin-bottom: 8px }
.menu-groupe { align-content: start }
@media (max-width: 700px) {
  .bloc:has(> .defile > .tableau.cartes:only-child):not(:has(> h2)):not(:has(> header)) { padding: 0; border: 0; background: none }
}
/* Fiche lead sur téléphone : suivi, identité et décideurs avant le reste */
@media (max-width: 900px) {
  .grille-principale > .pile { display: contents }
  #score { order: -7 } #intention { order: -6 } #crm { order: -5 } #suivi { order: -4 } #decideurs { order: -3 } #assistant { order: -2 } #identite { order: -1 }
}

.chronologie li > .etiquette, .chronologie li > .num { align-self: start; justify-self: start }
.filtres .champ { min-width: 0 }

/* ============================================================ Habillage 2 (22-10) : menu sombre, tiroir et onglets sur téléphone,
   cartes à ombre douce, scores en anneau. Les règles ci-dessous complètent ou remplacent celles du haut. */
body.connecte { background:
  radial-gradient(900px 340px at 92% -140px, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
  var(--paper) }
.icone { flex: none; width: 20px; height: 20px }
.cadre { grid-template-columns: 264px minmax(0, 1fr) }
.contenu { padding: 30px 34px 72px; gap: 24px }

/* Menu latéral */
.menu { background: var(--menu-bg); color: var(--menu-ink); border-right: 0; padding: 18px 12px 16px; gap: 18px;
  scrollbar-width: thin; scrollbar-color: var(--menu-trait) transparent }
.menu-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px }
.menu .marque, .barre-haut .marque, .marque-seule { display: flex; align-items: center; gap: 10px; padding: 0; color: inherit; text-decoration: none }
.menu .marque > span, .marque-seule > span { display: grid; gap: 3px }
.menu .marque b { font: 800 23px/1 var(--f-display); font-stretch: 80%; color: #fff; letter-spacing: -.01em }
.menu .eyebrow { color: var(--menu-accent); font-size: 10.5px }
.logo { flex: none; border-radius: 9px; box-shadow: 0 4px 14px -4px rgba(14,112,104,.6) }
.menu nav { gap: 16px }
.menu-groupe > span { color: var(--menu-muted); font-size: 11px; padding: 4px 10px }
.menu-groupe a { color: var(--menu-ink); font-size: 14.5px; font-weight: 600; padding: 8px 10px; border-radius: 10px; justify-content: flex-start; gap: 11px;
  transition: background .15s ease, color .15s ease }
.menu-groupe a .libelle { flex: 1; min-width: 0 }
.menu-groupe a .icone { opacity: .78 }
.menu-groupe a:hover { background: var(--menu-survol) }
.menu-groupe a[aria-current="page"] { background: var(--menu-actif); color: #fff; box-shadow: inset 3px 0 0 var(--menu-accent) }
.menu-groupe a[aria-current="page"] .icone { opacity: 1; color: var(--menu-accent) }
.compte { background: var(--orange); color: #fff; font-size: 11.5px; padding: 3px 7px }
.menu-groupe a[aria-current="page"] .compte { background: #fff; color: var(--menu-bg) }
.menu-pied { border-top: 1px solid var(--menu-trait); color: var(--menu-ink); padding: 14px 6px 0; gap: 10px }
.menu-pied .qui { display: flex; gap: 10px; align-items: center; line-height: 1.25 }
.menu-pied .qui .petit { color: var(--menu-muted) }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 15px var(--f-display);
  background: linear-gradient(135deg, var(--menu-accent), #0E7068); color: #fff }
.btn.fantome { background: transparent; color: var(--menu-ink); border-color: var(--menu-trait) }
.btn.fantome:hover { border-color: var(--menu-accent); background: var(--menu-survol) }
.btn.fantome .icone { width: 16px; height: 16px }
.bouton-icone { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: transparent; color: inherit; cursor: pointer; text-decoration: none }
.bouton-icone:hover { background: var(--menu-survol) }
.fermer-menu, .voile, .onglets-bas { display: none }
.pastille-compte { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange);
  color: #fff; font: 700 10.5px/18px var(--f-body); text-align: center; box-shadow: 0 0 0 2px var(--menu-bg) }

/* Téléphone et tablette : barre du haut, tiroir de menu, onglets en bas */
@media (max-width: 900px) {
  .cadre { grid-template-columns: minmax(0, 1fr) }
  .barre-haut { display: flex; position: sticky; top: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 16px; background: var(--menu-bg); color: var(--menu-ink) }
  .barre-haut .marque b { font: 800 21px/1 var(--f-display); font-stretch: 80%; color: #fff }
  .barre-haut-actions { display: flex; gap: 2px; align-items: center }
  .menu { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 330px); height: 100dvh; display: flex;
    transform: translateX(-104%); transition: transform .24s ease; box-shadow: none;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) }
  .menu.ouvert { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.45) }
  .fermer-menu { display: inline-grid }
  .voile { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4,14,12,.5); backdrop-filter: blur(2px) }
  .voile[hidden] { display: none }
  html.menu-ouvert, html.menu-ouvert body { overflow: hidden }
  .contenu { padding: 18px 16px calc(92px + env(safe-area-inset-bottom, 0px)); gap: 18px }
  .onglets-bas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) }
  .onglets-bas a, .onglets-bas button { display: grid; justify-items: center; gap: 3px; padding: 5px 2px; border: 0; background: none; cursor: pointer;
    color: var(--muted); text-decoration: none; font: 600 11px/1.1 var(--f-body); border-radius: 12px }
  .onglets-bas .icone { width: 23px; height: 23px }
  .onglets-bas a[aria-current="page"] { color: var(--accent) }
  .onglets-bas a[aria-current="page"] .icone { background: var(--accent-soft); border-radius: 10px; padding: 2px; width: 34px; box-sizing: content-box; margin: -2px 0 }
}
@media (min-width: 901px) { .voile { display: none !important } }
@media (prefers-reduced-motion: reduce) { .menu { transition: none } }

/* Titres de page */
.entete-page h1 { letter-spacing: -.02em }
.entete-page .eyebrow { display: inline-flex; gap: 8px; align-items: center }

/* Blocs et cartes */
.bloc { border-radius: var(--rayon); box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--line) 80%, transparent); padding: 18px 20px }
.bloc > h2, .bloc > header h2 { font-size: 19px }
.carte-item { border-radius: 12px; background: color-mix(in srgb, var(--paper) 45%, var(--card)) }
.filtres { border-radius: var(--rayon); box-shadow: var(--ombre) }
.vide { border-radius: var(--rayon); background: color-mix(in srgb, var(--paper) 50%, transparent) }
@media (max-width: 600px) { .bloc { padding: 16px 15px } }

/* Chiffres clés en cartes */
.kpis { border: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 44%), 1fr)) }
.kpi { position: relative; overflow: hidden; background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--rayon); padding: 14px 16px 15px 18px; box-shadow: var(--ombre); transition: transform .15s ease, box-shadow .15s ease }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent) }
.kpi.chaud::before { background: var(--chaud) } .kpi.tiede::before { background: var(--tiede) }
.kpi b { font-size: 32px }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte) }

/* Boutons, champs, étiquettes */
.btn { border-radius: 10px }
.btn.primaire { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent) }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"], select, textarea { border-radius: 10px }
.etiquette { border-radius: 999px; padding: 3px 9px }
.flash { border-radius: 12px; border-width: 1px 1px 1px 4px }
.onglets a[aria-current="page"], .pagination-liens span[aria-current], .etapes li[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent) }

/* Scores en anneau (la valeur est lue par app.js) */
.score.anneau { border: 0; --c: var(--froid);
  background: radial-gradient(closest-side, var(--card) 74%, transparent 76% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--line) 0) }
.score.anneau.niv-chaud { --c: var(--chaud) } .score.anneau.niv-tiede { --c: var(--tiede) }
.score.anneau.grand { background: radial-gradient(closest-side, var(--card) 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--line) 0) }

/* Liste des leads */
.lead-ligne { border-radius: var(--rayon); box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--line) 80%, transparent);
  transition: transform .15s ease, box-shadow .15s ease }
a.lead-ligne:hover { transform: translateY(-1px); box-shadow: var(--ombre-forte); border-color: var(--line) }

/* Tableaux */
.tableau th { background: color-mix(in srgb, var(--paper) 70%, transparent) }
.tableau tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 35%, transparent) }

/* Pages sans connexion (connexion, premier compte, installation) */
body.public { background:
  radial-gradient(circle at 50% -10%, rgba(63,208,193,.22), transparent 55%),
  repeating-radial-gradient(circle at 50% -10%, transparent 0 58px, rgba(255,255,255,.035) 58px 59px),
  var(--menu-bg) }
body.public .page-seule { padding: 32px 16px }
body.public .boite-seule { background: var(--card); color: var(--ink); border-radius: 20px; padding: 28px 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6) }
.marque-seule b { font: 800 20px/1.05 var(--f-display); font-stretch: 85% }
.marque-seule .eyebrow { font-size: 10.5px }
body.public .boite-seule > .bloc, body.public .boite-seule > section { border: 0; box-shadow: none; padding: 0; background: none }
body.public .marque-seule { justify-content: flex-start }

/* Relecture des messages avant envoi */
.relecture { gap: 14px }
.message-carte { gap: 10px }
.bloc > header.message-tete, .message-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; justify-content: stretch }
.badges-message { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
.message-carte textarea { min-height: 0; font-size: 15px; line-height: 1.5 }
.liste-preuves { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px }
@media (max-width: 600px) { .bloc > header.message-tete, .message-tete { grid-template-columns: auto minmax(0, 1fr) } .badges-message { grid-column: 1 / -1; justify-content: flex-start } }
/* Score global (fiche lead) */
.score-global-tete { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.score-global-tete p { margin: 2px 0 }
.score-detail td { vertical-align: middle }
.score-detail tr.total td { border-top: 2px solid var(--line-fort); background: color-mix(in srgb, var(--accent-soft) 40%, transparent) }
.message-tete .ident { text-align: left; justify-items: start }
.score-detail td.n { white-space: nowrap }