/* CRM ADM — système de design (30/10/2026).
   Mobile d'abord. Aucune étape de build. Polices auto-hébergées (Inter, Inter Tight) : rien ne part chez un tiers.
   Signature : le panneau « encre » aux gros chiffres en tête de chaque page. Le reste reste calme et rangé. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/inter-tight-latin-800-normal.woff2") format("woff2"); }

:root {
  /* Couleurs */
  --encre: #0E1630; --encre-2: #1C2850; --sur-encre: #F2F5FC; --sur-encre-muet: #A3AECB;
  --fond: #EDF0F6; --carte: #FFFFFF; --carte-2: #F5F7FB; --texte: #111A2E; --muet: #5A6479; --bord: #DFE4EE; --bord-fort: #C9D1E0;
  --accent: #2B54F0; --accent-fort: #1D3FCB; --accent-doux: #E7ECFE; --sur-accent: #FFFFFF;
  --appel: #0B8F50; --appel-fort: #087541; --wa: #25D366; --sur-wa: #04321A;
  --chaud: #E5402A; --tiede: #D98306; --froid: #3570E8;
  --rouge: #C9281C; --rouge-doux: #FDECEA; --orange: #A84A06; --orange-doux: #FFF2DE; --vert: #08703F; --vert-doux: #E2F5EA;
  /* Formes */
  --r-xs: 8px; --r-s: 10px; --r: 14px; --r-l: 18px; --r-xl: 24px; --pilule: 999px;
  --ombre: 0 1px 2px rgba(14, 22, 48, .05), 0 3px 12px rgba(14, 22, 48, .06);
  --ombre-haute: 0 12px 32px rgba(14, 22, 48, .18);
  /* Espacements */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px;
  /* Typographie */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titre: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --rail: 248px; --onglets: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #1A2550; --encre-2: #26346A; --sur-encre: #F2F5FC; --sur-encre-muet: #A9B4D4;
    --fond: #0B1022; --carte: #141B31; --carte-2: #1A2240; --texte: #E8ECF7; --muet: #9AA4BF; --bord: #27304D; --bord-fort: #36416A;
    --accent: #6F8DFF; --accent-fort: #8BA3FF; --accent-doux: #1E2A5C; --sur-accent: #0B1022;
    --appel: #2FC27A; --appel-fort: #49D58F; --wa: #2FD775; --sur-wa: #03260F;
    --chaud: #FF6A4F; --tiede: #F5B23D; --froid: #6E9BFF;
    --rouge: #FF7A6E; --rouge-doux: #3A1A20; --orange: #F3A64D; --orange-doux: #3A2814; --vert: #4CD38A; --vert-doux: #12301F;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --ombre-haute: 0 14px 36px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 16px/1.5 var(--police);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -.01em; }
h1 { font-size: 1.75rem; line-height: 1.15; font-weight: 800; margin: 0; }
h2 { font-size: 1.08rem; line-height: 1.3; font-weight: 700; margin: 0 0 var(--e3); display: flex; align-items: center; gap: var(--e2); }
h3 { font-size: .95rem; margin: 0 0 var(--e2); display: flex; align-items: center; gap: var(--e2); }
p { margin: 0 0 var(--e3); }
.muet { color: var(--muet); } .petit { font-size: .85rem; } .rouge { color: var(--rouge); } .orange { color: var(--orange); }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.saut { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--carte); padding: 8px 12px; border-radius: var(--r-s); }
.saut:focus { left: 8px; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-s { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico-l { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-xl { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-g { transform: scaleX(-1); }

/* ── Ossature : rail (ordinateur), barre + onglets (mobile) ── */
.cadre { min-height: 100vh; }
main { max-width: 1080px; margin: 0 auto; padding: var(--e4) var(--e4) calc(var(--onglets) + 40px + env(safe-area-inset-bottom)); }
body.public main { padding-bottom: var(--e8); }

.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff;
  font: 800 1rem/1 var(--titre); }
.logo-l { width: 46px; height: 46px; border-radius: 14px; font-size: 1.4rem; }
.marque { display: inline-flex; align-items: center; gap: 10px; font: 600 1.02rem/1 var(--titre); color: inherit; letter-spacing: .01em; }
.marque:hover { text-decoration: none; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent-doux); color: var(--accent-fort); font: 700 .95rem/1 var(--titre); }

.barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--e4); padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 70%, transparent); }

.rail { display: none; }

.onglets { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-around; align-items: stretch; gap: 2px; padding: 6px;
  background: var(--encre); border-radius: var(--r-xl); box-shadow: var(--ombre-haute); }
.onglet { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; padding: 4px 2px; border-radius: var(--r-l); color: var(--sur-encre-muet); font-size: .7rem; font-weight: 600;
  text-align: center; cursor: pointer; transition: background .18s ease, color .18s ease; list-style: none; }
.onglet span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.onglet:hover { text-decoration: none; color: var(--sur-encre); }
.onglet.actif { background: rgba(255, 255, 255, .12); color: #fff; }
.onglet.actif .ico { stroke: #fff; }
.plus { flex: 1 1 0; display: flex; position: static; }
.plus > summary { flex: 1; }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary::before, .plus > summary::after { content: none !important; }
.feuille { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); background: var(--carte); color: var(--texte);
  border-radius: var(--r-xl); box-shadow: var(--ombre-haute); padding: var(--e3); display: grid; gap: 2px;
  animation: monte .2s ease-out; border: 1px solid var(--bord); }
.feuille a, .feuille .lien-nav { display: flex; align-items: center; gap: var(--e3); padding: 12px; border-radius: var(--r); color: var(--texte); font-weight: 500; min-height: 48px; }
.feuille a:hover, .feuille .lien-nav:hover { background: var(--carte-2); text-decoration: none; }
.feuille a.actif { background: var(--accent-doux); color: var(--accent-fort); }
.feuille .moi { display: flex; align-items: center; gap: var(--e3); padding: 8px 12px 12px; border-bottom: 1px solid var(--bord); margin-bottom: 4px; }
.moi small { display: block; color: var(--muet); font-size: .8rem; }
.sortie { margin: 0; }
.lien-nav { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; color: inherit; min-height: 0; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .barre, .onglets { display: none; }
  .cadre { margin-left: var(--rail); }
  main { padding: var(--e6) var(--e8) var(--e8); }
  body.public .cadre { margin-left: 0; }
  .rail { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 20;
    background: var(--encre); color: var(--sur-encre); padding: var(--e5) var(--e3); }
  .rail .marque { padding: 4px 10px 22px; color: #fff; }
  .rail nav { display: grid; gap: 2px; }
  .rail nav a, .rail .lien-nav { display: flex; align-items: center; gap: var(--e3); padding: 11px 12px; border-radius: var(--r);
    color: var(--sur-encre-muet); font-weight: 500; font-size: .95rem; transition: background .18s ease, color .18s ease; }
  .rail nav a:hover, .rail .lien-nav:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
  .rail nav a.actif { background: rgba(255, 255, 255, .13); color: #fff; }
  .rail-pied { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--e3); }
  .rail .moi { display: flex; align-items: center; gap: var(--e3); padding: 6px 10px 10px; }
  .rail .moi small { color: var(--sur-encre-muet); }
  .rail .avatar { background: rgba(255, 255, 255, .14); color: #fff; }
}

/* ── Bandeaux ── */
.bandeau-apercu { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: 10px var(--e4); background: repeating-linear-gradient(-45deg, #FFD43B 0 14px, #FFC81A 14px 28px); color: #2A2100; font-size: .9rem; }
.bandeau-apercu span { flex: 1 1 220px; }
.bandeau-apercu form { margin: 0; }
.bandeau-apercu .btn { background: #2A2100; color: #FFE27A; border-color: #2A2100; }
.apercu form[method="post"]:not([action^="/apercu"]):not([action="/deconnexion"]) { opacity: .55; }
.apercu form[method="post"]:not([action^="/apercu"]):not([action="/deconnexion"]) :is(button, input, select, textarea) { pointer-events: none; }
.bandeau { background: var(--orange-doux); color: var(--orange); text-align: center; padding: 10px; font-weight: 500; }
.flash { display: flex; gap: var(--e2); align-items: flex-start; padding: 12px 14px; border-radius: var(--r); margin: 0 0 var(--e4); font-weight: 500; }
.flash.ok { background: var(--vert-doux); color: var(--vert); } .flash.err { background: var(--rouge-doux); color: var(--rouge); }
.lien-inv { display: block; word-break: break-all; user-select: all; margin-top: 8px; padding: 10px; border-radius: var(--r-s);
  background: var(--carte); color: var(--texte); font-size: .85rem; }

/* ── En-tête de page : panneau encre aux gros chiffres ── */
.tete { background: var(--encre); color: var(--sur-encre); border-radius: var(--r-xl); padding: var(--e5); margin: 0 0 var(--e4);
  display: grid; gap: var(--e4); box-shadow: var(--ombre); position: relative; overflow: hidden; }
.tete::after { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .04); pointer-events: none; }
.tete h1 { color: #fff; font-size: 1.9rem; }
.tete p { margin: 6px 0 0; color: var(--sur-encre-muet); font-size: .92rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: var(--e2); }
.kpi { background: rgba(255, 255, 255, .07); border-radius: var(--r); padding: 12px 12px 10px; min-width: 0; }
.kpi b { display: block; font: 800 2rem/1 var(--titre); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi span { display: block; margin-top: 6px; font-size: .76rem; line-height: 1.25; color: var(--sur-encre-muet); }
@media (min-width: 720px) { .kpi { padding: 14px 16px 12px; } .kpi b { font-size: 2.4rem; } .kpi span { font-size: .82rem; } }
.bloc .carte { box-shadow: none; }
.kpi.k-rouge { background: #E5402A; } .kpi.k-rouge span { color: #FFE2DC; }
.kpi.k-chaud { background: rgba(229, 64, 42, .22); } .kpi.k-chaud b { color: #FFB4A6; }
.kpi.k-orange { background: rgba(245, 178, 61, .2); } .kpi.k-orange b { color: #FFD48A; }
.kpi.k-vert { background: rgba(47, 194, 122, .22); } .kpi.k-vert b { color: #8BEBB8; }
.tete-actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.tete-actions .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.kpis-clairs .kpi { background: var(--carte-2); }
.kpis-clairs .kpi b { color: var(--texte); } .kpis-clairs .kpi span { color: var(--muet); }
@media (min-width: 720px) { .tete { grid-template-columns: minmax(200px, 1fr) 2fr; align-items: end; padding: var(--e6); } .tete-actions { grid-column: 1 / -1; } }

/* ── Encarts ── */
.encart { display: flex; align-items: center; gap: var(--e3); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r-l);
  padding: 14px 16px; margin: 0 0 var(--e4); color: var(--texte); box-shadow: var(--ombre); }
.encart span { flex: 1; }
.encart:hover { text-decoration: none; border-color: var(--accent); }
.encart-closer { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; padding: var(--e4); margin: 0 0 var(--e4);
  border-radius: var(--r-l); background: var(--orange-doux); color: var(--texte); border: 1px dashed color-mix(in srgb, var(--orange) 55%, transparent); }
.encart-closer .ico-l { color: var(--orange); }
.encart-closer p { margin: 2px 0 0; font-size: .88rem; color: var(--muet); }
.encart-closer .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .encart-closer { grid-template-columns: auto 1fr auto; } .encart-closer .btn { grid-column: auto; } }

/* ── Blocs ── */
.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r-l); padding: var(--e4); margin: 0 0 var(--e4); box-shadow: var(--ombre); }
.bloc > h2 .ico-s, summary h2 .ico-s { color: var(--muet); }
.bloc.urgent { border-color: color-mix(in srgb, var(--rouge) 45%, var(--bord)); background: linear-gradient(var(--rouge-doux), var(--carte) 70px); }
.bloc.urgent > h2, .bloc.urgent summary h2 { color: var(--rouge); } .bloc.urgent h2 .ico-s { color: var(--rouge); }
.bloc.chaud > h2 .ico-s { color: var(--chaud); }
.bloc-accent { border-color: color-mix(in srgb, var(--accent) 40%, var(--bord)); }
.nb { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--pilule);
  background: var(--carte-2); border: 1px solid var(--bord); color: var(--muet); font: 700 .78rem/1 var(--police); font-variant-numeric: tabular-nums; }
.vide { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 20px; margin: 0 0 var(--e4);
  background: var(--carte); border: 1px dashed var(--bord-fort); border-radius: var(--r-xl); color: var(--muet); }
.vide .ico-xl { color: var(--vert); background: var(--vert-doux); border-radius: 50%; padding: 8px; width: 56px; height: 56px; }
.vide b { color: var(--texte); font: 700 1.15rem/1.3 var(--titre); }
.vide p { margin: 0 0 8px; max-width: 42ch; }

details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--e2); }
details > summary::-webkit-details-marker { display: none; }
details > summary h2 { margin: 0; flex: 1; }
.bloc > details > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muet); border-bottom: 2px solid var(--muet);
  transform: rotate(45deg); margin: -4px 6px 0 auto; transition: transform .18s ease; flex: none; }
.bloc > details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.bloc > details[open] > summary { margin-bottom: var(--e3); }
.deplie { border-top: 1px solid var(--bord); margin-top: var(--e3); }
.deplie > summary { padding: 12px 0 4px; font-weight: 600; color: var(--accent); min-height: 44px; }
.deplie > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent-doux); color: var(--accent-fort); font-weight: 700; }
.deplie[open] > summary::before { content: "−"; }
.histo { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; color: var(--muet); }

/* ── Badges : étapes (couleur par étape), chaleur, drapeaux, puces ── */
.etape { --c: #5B6478; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 3px 10px 3px 8px;
  border-radius: var(--pilule); white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.etape::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.e-nouveau { --c: #56607A; } .e-contacte { --c: #0B72B0; } .e-en_conversation { --c: #0B7F75; } .e-rappel_demande { --c: #B25A00; }
.e-rdv_pris { --c: #6A33D6; } .e-rdv_tenu { --c: #3D3BC4; } .e-proposition { --c: #B0249F; } .e-signe { --c: #0A7A44; }
.e-client_actif { --c: #066A3A; } .e-perdu, .e-resilie { --c: #7A8194; } .e-stop { --c: #C9281C; }
@media (prefers-color-scheme: dark) {
  .e-nouveau { --c: #A9B2C8; } .e-contacte { --c: #5EB8F2; } .e-en_conversation { --c: #4FD1C2; } .e-rappel_demande { --c: #F5B23D; }
  .e-rdv_pris { --c: #B597FF; } .e-rdv_tenu { --c: #9A9CFF; } .e-proposition { --c: #F27FE1; } .e-signe, .e-client_actif { --c: #4CD38A; }
  .e-perdu, .e-resilie { --c: #8C94AA; } .e-stop { --c: #FF7A6E; }
}
.chaleur { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: var(--pilule); }
.chaleur .ico-s { width: 14px; height: 14px; }
.chaleur.ch-chaud { background: var(--chaud); color: #fff; } .chaleur.ch-chaud .ico-s { fill: rgba(255, 255, 255, .35); }
.chaleur.ch-tiede { background: color-mix(in srgb, var(--tiede) 18%, transparent); color: var(--tiede); }
.chaleur.ch-froid { background: color-mix(in srgb, var(--froid) 14%, transparent); color: var(--froid); }
.drap { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-xs); }
.drap.stop { background: var(--rouge); color: #fff; } .drap.hz { background: var(--orange-doux); color: var(--orange); }
.drap.sc { background: var(--carte-2); color: var(--muet); border: 1px solid var(--bord); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: var(--pilule);
  background: var(--carte-2); color: var(--muet); border: 1px solid var(--bord); white-space: nowrap; }
.chip-libre { background: var(--orange-doux); color: var(--orange); border-color: transparent; }
.chip-ok { background: var(--vert-doux); color: var(--vert); border-color: transparent; }
.r-admin { background: var(--encre); color: #fff; border-color: transparent; } .r-closer { background: var(--accent-doux); color: var(--accent-fort); border-color: transparent; }

/* ── Cartes de fiche ── */
.cartes { display: grid; gap: 10px; }
@media (min-width: 760px) { main > .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte { position: relative; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre);
  overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.carte::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; }
.carte.ch-chaud::before { background: var(--chaud); } .carte.ch-tiede::before { background: var(--tiede); } .carte.ch-froid::before { background: var(--froid); }
.carte:hover { border-color: var(--bord-fort); }
.carte:active { transform: scale(.995); }
.carte-lien { display: grid; gap: 6px; padding: 14px 16px 14px 18px; color: var(--texte); }
.carte-lien:hover { text-decoration: none; }
.carte.a-case .carte-lien { padding-right: 52px; }
.c-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e2); }
.c-nom { font: 700 1.07rem/1.25 var(--titre); letter-spacing: -.005em; }
.c-meta { color: var(--muet); font-size: .9rem; }
.c-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-extra { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 0 16px 12px 18px; margin-top: -4px; }
.pa { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 500; color: var(--muet); }
.pa.rouge { color: var(--rouge); font-weight: 600; } .pa.orange { color: var(--orange); }
.pa.grand { display: flex; gap: var(--e3); font-size: 1rem; padding: 14px 16px; border-radius: var(--r-l); background: var(--carte);
  border: 1px solid var(--bord); margin: 0 0 var(--e4); color: var(--texte); box-shadow: var(--ombre); }
.pa.grand .ico { color: var(--accent); }
.pa.grand.rouge { background: var(--rouge-doux); border-color: transparent; color: var(--rouge); } .pa.grand.rouge .ico { color: var(--rouge); }
.pa.grand.orange { background: var(--orange-doux); border-color: transparent; color: var(--orange); } .pa.grand.orange .ico { color: var(--orange); }
.sel { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; }
.sel:hover { background: var(--carte-2); }
.sel input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.carte:has(.sel input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux), var(--ombre); }
.rapide { display: flex; gap: 6px; padding: 10px 16px 12px 18px; margin: 0; border-top: 1px dashed var(--bord); background: var(--carte-2); }
.rapide select { flex: 1; min-height: 40px; padding: 6px 10px; margin: 0; font-size: .9rem; }

/* ── Pipeline : recherche, filtres, sélection, colonnes ── */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-start; margin: 0 0 var(--e3); }
.recherche { position: relative; flex: 1 1 100%; }
.recherche .ico-s { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muet); }
.recherche input { padding-left: 42px; margin: 0; border-radius: var(--r); background: var(--carte); min-height: 50px; }
.plus-filtres { flex: 1 1 auto; }
.plus-filtres > summary { display: inline-flex; }
.plus-filtres[open] > summary { margin-bottom: var(--e2); }
.filtres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e2); align-items: center; }
.filtres-grille :is(input, select) { margin: 0; }
@media (min-width: 760px) { .recherche { flex: 1 1 320px; } }
.segment { display: inline-flex; padding: 4px; gap: 2px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r); margin: 0 0 var(--e4); }
.segment a { padding: 8px 16px; border-radius: 10px; color: var(--muet); font-weight: 600; font-size: .9rem; }
.segment a:hover { text-decoration: none; color: var(--texte); }
.segment a.actif { background: var(--encre); color: #fff; }
.lot { position: sticky; top: 62px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e3);
  padding: 10px 12px; border-radius: var(--r-l); background: var(--carte); border: 1px solid var(--accent); box-shadow: var(--ombre-haute); }
.lot.repos { position: static; border-color: var(--bord); box-shadow: none; background: var(--carte-2); }
.lot-n { flex: 1 1 120px; font-weight: 600; font-size: .92rem; }
.lot select { flex: 1 1 160px; width: auto; margin: 0; min-height: 44px; }
.lot .tout { margin: 0 4px 0 0; }
@media (min-width: 960px) { .lot { top: 12px; } }
.kanban { display: flex; gap: var(--e3); overflow-x: auto; padding: 2px 2px var(--e4); scroll-snap-type: x mandatory; }
.kanban .col { flex: 0 0 82%; max-width: 300px; scroll-snap-align: start; background: color-mix(in srgb, var(--carte-2) 70%, var(--fond));
  border: 1px solid var(--bord); border-radius: var(--r-xl); padding: var(--e3); }
.kanban .col .cartes, .kanban .col > .carte { margin-bottom: 8px; }
.kanban .col > .carte + .carte { margin-top: 0; }
.kanban h3 { justify-content: space-between; padding: 2px 4px 6px; }
.col-vide { color: var(--muet); font-size: .85rem; text-align: center; padding: 18px 0; margin: 0; border: 1px dashed var(--bord-fort); border-radius: var(--r); }
@media (min-width: 760px) { .kanban .col { flex-basis: 270px; } }

/* ── Fiche ── */
.retour { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 var(--e3); font-weight: 600; font-size: .9rem; color: var(--muet); }
.fiche-tete { background: var(--encre); color: var(--sur-encre); border-radius: var(--r-xl); padding: var(--e5); margin: 0 0 var(--e4); box-shadow: var(--ombre); }
.fiche-tete h1 { color: #fff; font-size: 2rem; margin: 10px 0 4px; overflow-wrap: anywhere; }
.ft-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-tete .etape { --c: #DDE4FF; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; }
.fiche-tete .etape::before { background: var(--point, #8BA3FF); }
.ft-sous { color: var(--sur-encre-muet); margin: 0 0 8px; }
.ft-contact { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0; }
.ft-contact .tel { color: #fff; font: 700 1.3rem/1.2 var(--titre); letter-spacing: .01em; display: inline-flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.ft-contact .mail { color: var(--sur-encre-muet); font-size: .9rem; overflow-wrap: anywhere; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--e2); margin-top: var(--e4); }
.action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 6px;
  border-radius: var(--r-l); font-weight: 700; font-size: .9rem; text-align: center; transition: transform .12s ease, filter .12s ease; }
.action:hover { text-decoration: none; filter: brightness(1.06); }
.action:active { transform: scale(.97); }
.action .ico { width: 26px; height: 26px; stroke-width: 2.1; }
.a-appel { background: var(--appel); color: #fff; }
.a-wa { background: var(--wa); color: var(--sur-wa); }
.a-cloture { background: #fff; color: var(--encre); }
@media (prefers-color-scheme: dark) { .a-appel { color: #04220F; } .a-cloture { background: var(--sur-encre); } }
@media (min-width: 720px) { .actions { grid-template-columns: repeat(3, minmax(0, 200px)); } .action { flex-direction: row; min-height: 56px; } }
.attrib-etat { margin: 0 0 var(--e3); }
.attrib-etat.seul { display: flex; gap: 8px; align-items: center; padding: 0 4px; color: var(--muet); }
.attrib { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end; }
.attrib label { flex: 1 1 200px; margin: 0; }
.attrib input { flex: 1 1 160px; margin: 0; }
.grille { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
.grille dt { color: var(--muet); font-size: .8rem; margin-top: 10px; }
.grille dt:first-child { margin-top: 0; }
.grille dd { margin: 0; }
@media (min-width: 640px) { .grille { grid-template-columns: 220px 1fr; row-gap: 10px; } .grille dt { margin-top: 0; padding-top: 1px; } }
.resume { white-space: pre-wrap; }
.rep { margin: 0; padding-left: 18px; }
.bloc-appel { border: 2px solid color-mix(in srgb, var(--appel) 45%, var(--bord)); scroll-margin-top: 80px; }
.bloc-appel > h2 .ico-s { color: var(--appel); }
.pas { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: #fff;
  font: 700 .8rem/1 var(--titre); margin-right: 8px; }
.rdv, .contrat { padding: 12px 0; border-bottom: 1px solid var(--bord); }
.rdv:last-of-type, .contrat:last-of-type { border-bottom: 0; }
.rdv-l { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cr { margin-top: 10px; padding: 12px; border-radius: var(--r); background: var(--rouge-doux); }
.cr > summary { font-weight: 700; }

/* ── Frise ── */
.frise { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--bord); }
.frise li { position: relative; padding: 8px 0 12px 12px; font-size: .92rem; white-space: pre-wrap; word-break: break-word; }
.frise li::before { content: ""; position: absolute; left: -21px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--carte); border: 2px solid var(--bord-fort); }
.frise .ts { display: block; color: var(--muet); font-size: .76rem; font-variant-numeric: tabular-nums; }
.frise .qui { font-weight: 600; margin-right: 6px; }
.frise .msg .txt { display: block; margin-top: 4px; padding: 8px 12px; border-radius: 4px var(--r) var(--r) var(--r); background: var(--carte-2); }
.frise .msg.entrant::before { border-color: var(--vert); background: var(--vert); }
.frise .msg.entrant .txt { background: var(--vert-doux); }
.frise .prive .txt { color: var(--orange); }
.frise .t-appel::before { border-color: var(--appel); } .frise .t-rdv::before { border-color: #6A33D6; }
.frise .t-statut::before { border-color: var(--accent); background: var(--accent); } .frise .t-arbitrage::before { border-color: var(--orange); }

/* ── Tâches ── */
.tache { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.tache:last-child { border-bottom: 0; }
.tache small { color: var(--muet); }
.tache a { font-weight: 600; }
.tache.haute { border-left: 3px solid var(--rouge); padding-left: 12px; }

/* ── Formulaires ── */
form label { display: block; margin: 10px 0; font-size: .88rem; font-weight: 500; color: var(--muet); }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--bord-fort); border-radius: var(--r);
  background: var(--carte); color: var(--texte); margin-top: 6px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux); }
select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muet) 50%), linear-gradient(135deg, var(--muet) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=radio], input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0 8px 0 0; accent-color: var(--accent); flex: none; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px;
  border-radius: var(--r); border: 1px solid var(--bord-fort); background: var(--carte); color: var(--texte); font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease; }
button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; }
button:active, .btn:active { transform: scale(.98); }
.btn-accent, button.principal { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.btn-accent:hover, button.principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
button.principal { width: 100%; min-height: 54px; font-size: 1.02rem; border-radius: var(--r-l); margin-top: 6px; }
.btn-petit { min-height: 40px; padding: 7px 14px; font-size: .88rem; }
.danger, button.danger { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 50%, transparent); }
.danger:hover { background: var(--rouge-doux); border-color: var(--rouge); }
button:disabled { opacity: .55; cursor: default; }
fieldset { border: 0; margin: 0 0 var(--e3); padding: 0; min-width: 0; }
legend { display: flex; align-items: center; font: 700 .95rem/1.3 var(--titre); color: var(--texte); padding: 0; margin-bottom: 8px; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
form label.choix { display: inline-flex; align-items: center; margin: 0; padding: 10px 14px; min-height: 48px; border: 1.5px solid var(--bord-fort);
  border-radius: var(--pilule); background: var(--carte); color: var(--texte); font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease; }
form label.choix:has(input:checked) { background: var(--encre); border-color: var(--encre); color: #fff; }
form label.choix input { accent-color: #fff; }
form label.case, .case { display: inline-flex; align-items: center; gap: 2px; margin: 8px 0; color: var(--texte); font-weight: 500; }
.date { display: block; }
.raccourcis { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.raccourcis button { min-height: 36px; padding: 6px 12px; font-size: .82rem; border-radius: var(--pilule); background: var(--carte-2); }
.enligne { display: inline-flex; gap: 6px; align-items: center; margin: 8px 6px 0 0; flex-wrap: wrap; }
.enligne input, .enligne select { width: auto; min-width: 140px; margin: 0; min-height: 40px; padding: 7px 12px; }
.grille-form { display: grid; gap: 0 var(--e4); }
@media (min-width: 720px) { .grille-form { grid-template-columns: 1fr 1fr; } .grille-form > :is(button, input[type=hidden]) { grid-column: 1 / -1; } }
.barre-outils { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: space-between; margin-bottom: var(--e3); }
.barre-outils .filtres { margin: 0; flex: 1 1 260px; }
.barre-outils .filtres select { flex: 1; margin: 0; }

/* ── Tableau de bord ── */
.entonnoir { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ent-l { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.ent-nom { font-weight: 600; }
.ent-v b { font: 800 1.25rem/1 var(--titre); font-variant-numeric: tabular-nums; }
.ent-v small { color: var(--muet); margin-left: 6px; font-weight: 600; }
.barre-svg { grid-column: 1 / -1; width: 100%; height: 12px; border-radius: var(--pilule); display: block; }
.fond-barre { fill: var(--carte-2); } .val-barre { fill: var(--accent); }
.ent-neg .val-barre { fill: var(--bord-fort); }
.defile { overflow-x: auto; margin: 0 calc(-1 * var(--e4)); padding: 0 var(--e4); }
.tab { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tab th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muet); padding: 8px 10px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tab td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tab tr:last-child td { border-bottom: 0; }
.tab .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Comptes, aperçu ── */
.compte { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.compte:last-child { border-bottom: 0; }
.compte-l small { display: block; color: var(--muet); overflow-wrap: anywhere; }
.compte > .chip { grid-column: 2; justify-self: start; }
.compte-act { grid-column: 1 / -1; }
@media (min-width: 720px) { .compte { grid-template-columns: auto 1fr auto auto; } .compte > .chip { grid-column: auto; } }
.liste-closers { display: grid; gap: 8px; }
.choix-closer { margin: 0; }
.choix-closer button { width: 100%; justify-content: flex-start; gap: 12px; min-height: 64px; text-align: left; border-radius: var(--r-l); }
.choix-closer button > span:nth-child(2) { flex: 1; }
.choix-closer small { display: block; color: var(--muet); font-weight: 500; }

/* ── Connexion ── */
body.public { background: radial-gradient(120% 60% at 50% 0%, var(--encre) 0 46%, var(--fond) 46.2%); min-height: 100vh; }
.connexion { max-width: 420px; margin: 8vh auto 0; background: var(--carte); border-radius: var(--r-xl); padding: var(--e6);
  box-shadow: var(--ombre-haute); border: 1px solid var(--bord); }
.connexion-tete { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e5); }
.connexion-tete b { display: block; font: 800 1.15rem/1.1 var(--titre); }
.connexion-tete small { color: var(--muet); }
.connexion h1 { font-size: 1.6rem; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .rail, .onglets, .barre, .lot, .rapide { display: none !important; } .cadre { margin: 0; } }

/* ── Recette du 30/10 : confort sur téléphone ── */
/* Champs à 16 px au moins sur mobile : sous 16 px, Safari iPhone zoome à chaque saisie. */
@media (max-width: 959px) { input, select, textarea { font-size: 16px !important; } }
/* Cibles tactiles d'au moins 44 px (retour, numéro, cases, filtres). */
.retour { min-height: 44px; }
a.tel { min-height: 44px; display: inline-flex; align-items: center; }
.sel { width: 44px; height: 44px; }
form label.case, .case { min-height: 44px; }
/* Pagination du pipeline */
.pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e3) 0; color: var(--muet); font-size: .9rem; }
.pages span { margin-right: auto; }
/* ── Contre-recette du 30/10 (recette 2) ── */
/* Cibles tactiles ≥ 44 px : « Déplacer ou annuler », « Corriger les infos », « Découverte », liens « fiche » du journal,
   noms des fiches dans les tâches (journée admin). */
.cr > summary, .bloc > details > summary, .com-contrat > summary { min-height: 44px; }
a.lien-fiche { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
.tache > a { display: inline-flex; align-items: center; min-height: 44px; }
/* Commissions regroupées par signature */
.com-contrat { border-bottom: 1px solid var(--bord); padding: 6px 0; }
.com-contrat:last-child { border-bottom: 0; }
.com-contrat > summary { flex-wrap: wrap; padding: 8px 0; }
.com-tete { display: grid; gap: 2px; flex: 1 1 200px; }
.com-total { font-weight: 700; font-size: 1.05rem; }
.com-puces { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.com-contrat[open] > summary { margin-bottom: var(--e2); }