/* Paolia — identité Ouest Hygiène. Interface dense et confortable au clavier, pensée pour la tablette PC, utilisable au doigt.
   Le logo Ouest Hygiène est affiché tel quel (image fournie, format carré), jamais redessiné ni déformé. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

:root {
  /* Palette Ouest Hygiène (logo) */
  --oh-bleu: #003EE7; --oh-bleu-2: #0032BD; --oh-vert: #FFEED6; --oh-vert-2: #E8D7BD; --oh-nuit: #30496F;
  --ink: #1B2840; --ink-2: #2E4266; --slate: #55627C; --muted: #8591A8;
  --bg: #F3F5FA; --panel: #FFFFFF; --panel-2: #F7F9FD; --line: #E8D7BD; --line-2: #EBEFF6;
  --accent: var(--oh-bleu); --accent-2: var(--oh-bleu-2); --accent-soft: #E7EDFF; --on-accent: #FFFFFF;
  --red: #C6372C; --red-soft: #FDECEA; --amber: #9A6200; --amber-soft: #FFEED6;
  --green: #0B805A; --green-soft: #DDF6EE; --blue: #2750C8; --blue-soft: #E7EDFC; --violet: #6547C0; --violet-soft: #EEEAFB; --grey-soft: #F2E1C8;
  --side-bg: var(--oh-nuit); --side-ink: #F2E1C8; --side-muted: #D3D9E2;
  --shadow: 0 1px 2px rgba(48,73,111,.06), 0 6px 20px rgba(48,73,111,.06); --shadow-lg: 0 18px 50px rgba(48,73,111,.22);
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 12px; --side: 244px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E7ECF8; --ink-2: #E8D7BD; --slate: #A1ACC6; --muted: #7E8AA8;
    --bg: #141D2D; --panel: #1B2840; --panel-2: #223250; --line: #3A5075; --line-2: #2E4266;
    --accent: #8EA6CF; --accent-2: #A9BBDA; --accent-soft: #2A3D61; --on-accent: #141D2D;
    --red: #FF8C7F; --red-soft: #3B1D24; --amber: #F2BE5C; --amber-soft: #3A2D12; --green: #52DDB2; --green-soft: #0F3432;
    --blue: #B9C8E2; --blue-soft: #2A3D61; --violet: #BBA7FF; --violet-soft: #2A2256; --grey-soft: #2A3D61;
    --side-bg: #101827; --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 18px 50px rgba(0,0,0,.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #E7ECF8; --ink-2: #E8D7BD; --slate: #A1ACC6; --muted: #7E8AA8;
  --bg: #141D2D; --panel: #1B2840; --panel-2: #223250; --line: #3A5075; --line-2: #2E4266;
  --accent: #8EA6CF; --accent-2: #A9BBDA; --accent-soft: #2A3D61; --on-accent: #141D2D;
  --red: #FF8C7F; --red-soft: #3B1D24; --amber: #F2BE5C; --amber-soft: #3A2D12; --green: #52DDB2; --green-soft: #0F3432;
  --blue: #B9C8E2; --blue-soft: #2A3D61; --violet: #BBA7FF; --violet-soft: #2A2256; --grey-soft: #2A3D61;
  --side-bg: #101827; --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 18px 50px rgba(0,0,0,.5); color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01" }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
a { color: var(--accent); text-underline-offset: 2px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
h1 { font-size: 1.42rem; margin: 0 0 .2rem; letter-spacing: -.02em; font-weight: 750 }
h2 { font-size: 1.02rem; margin: 0 0 .65rem; letter-spacing: -.01em; font-weight: 700 }
h3 { font-size: .9rem; margin: .2rem 0 .5rem; color: var(--ink-2); font-weight: 650 }
.num, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
.muted { color: var(--slate) } .small { font-size: .82rem } .tiny { font-size: .74rem }
.hidden { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* ---------- Structure ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh }
.side { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto }
.brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .9rem }
.brand img { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: contain; display: block }
.brand b { display: block; color: #fff; font-size: 1.08rem; letter-spacing: -.01em }
.brand .brand-mot { display: block; width: auto; height: 20px; border-radius: 0 }
.brand small { display: block; font-size: .72rem; color: var(--side-muted); line-height: 1.3 }
.nav { display: flex; flex-direction: column; padding: .3rem .55rem; gap: 1px }
.nav .titre { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); padding: .8rem .7rem .3rem; font-weight: 700 }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: 9px; color: var(--side-ink); text-decoration: none; font-size: .88rem; font-weight: 500 }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff }
.nav a[aria-current="page"] { background: var(--oh-bleu); color: #fff; font-weight: 650 }
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .9 }
.nav .badge { margin-left: auto; background: var(--oh-vert); color: var(--oh-nuit); border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 0 .45rem }
.side .pied { margin-top: auto; padding: .85rem 1rem; font-size: .74rem; color: var(--side-muted); border-top: 1px solid rgba(255,255,255,.08) }
.side .pied b { color: #fff; font-weight: 600 }
.main { min-width: 0; display: flex; flex-direction: column }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; padding: .55rem 1.4rem; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.top .fraicheur { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--slate); flex-wrap: wrap }
.top .fraicheur b { color: var(--ink) }
.top .espace { flex: 1 }
.menu-btn { display: none }
.page { padding: 1.3rem 1.4rem 3.5rem; max-width: 1500px; width: 100% }
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap }
.entete .outils { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center }
.fil { font-size: .8rem; color: var(--slate); margin-bottom: .15rem } .fil a { color: var(--slate) }

/* Bandeau de démonstration : données fictives, rôle choisi sans mot de passe */
.bandeau-demo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .35rem 1.4rem; font-size: .78rem; color: #fff;
  background: repeating-linear-gradient(135deg, #30496F 0 14px, #3D5882 14px 28px) }
.bandeau-demo b { color: var(--oh-vert) }
.bandeau-demo select { width: auto; min-height: 28px; padding: .15rem .5rem; font-size: .78rem; background: #fff; color: #30496F; border-radius: 7px; border: 0 }

/* ---------- Composants ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow) }
.card + .card { margin-top: .9rem }
.card > h2:first-child { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap }
.card h2 .aide { font-weight: 400; font-size: .78rem; color: var(--slate) }
.grid { display: grid; gap: .9rem }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } .g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; margin-bottom: .9rem }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .9rem; position: relative }
.kpi .l { font-size: .76rem; color: var(--slate); display: flex; gap: .35rem; align-items: center; flex-wrap: wrap }
.kpi .v { font-size: 1.4rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.25 }
.kpi .s { font-size: .77rem; color: var(--slate) }
.kpi.accent { background: var(--oh-bleu); border-color: var(--oh-bleu); color: #fff } .kpi.accent .l, .kpi.accent .s { color: #F2E1C8 }
.up { color: var(--green) } .down { color: var(--red) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 9px;
  padding: .45rem .9rem; font-weight: 650; font-size: .86rem; white-space: nowrap; text-decoration: none; min-height: 36px; line-height: 1.2 }
.btn:hover { background: var(--accent-2); border-color: var(--accent-2) }
.btn.sec { background: var(--panel); color: var(--ink); border-color: var(--line) }
.btn.sec:hover { border-color: var(--accent); color: var(--accent) }
.btn.vert { background: var(--oh-vert); border-color: var(--oh-vert); color: var(--oh-nuit) } .btn.vert:hover { background: var(--oh-vert-2); border-color: var(--oh-vert-2) }
.btn.ghost { background: none; border-color: transparent; color: var(--accent); padding: .3rem .5rem }
.btn.danger { background: var(--panel); color: var(--red); border-color: var(--line) }
.btn.small { padding: .2rem .6rem; font-size: .78rem; min-height: 28px; border-radius: 7px }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; line-height: 1.5 }
.pill.decrochage, .pill.r { background: var(--red-soft); color: var(--red) }
.pill.potentiel, .pill.a { background: var(--amber-soft); color: var(--amber) }
.pill.sain, .pill.g { background: var(--green-soft); color: var(--green) }
.pill.prospect, .pill.b { background: var(--blue-soft); color: var(--blue) }
.pill.n { background: var(--grey-soft); color: var(--slate) }
.pill.ia { background: var(--accent-soft); color: var(--accent) }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none }
.dot.decrochage { background: #E0473C } .dot.potentiel { background: #F0A92B } .dot.sain { background: #10B981 } .dot.prospect { background: #4F74E8 }

/* Statut de l'information (prompt V3 §3) : vérifié, écart observé, estimation, suggestion, à compléter, démonstration, à connecter */
.statut { display: inline-flex; align-items: center; gap: .32rem; font-size: .7rem; font-weight: 650; border-radius: 6px; padding: .06rem .45rem; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.55; vertical-align: 1px }
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none }
.statut.verifie { background: var(--green-soft); color: var(--green) }
.statut.observe { background: var(--blue-soft); color: var(--blue) }
.statut.estime { background: var(--amber-soft); color: var(--amber) }
.statut.suggere { background: var(--violet-soft); color: var(--violet) }
.statut.completer { color: var(--slate); border: 1px dashed var(--muted) } .statut.completer::before { background: none; border: 1.5px solid currentColor; width: 7px; height: 7px }
.statut.demo { background: var(--oh-nuit); color: #fff } .statut.demo::before { background: var(--oh-vert) }
.statut.connecter { background: var(--grey-soft); color: var(--slate) } .statut.connecter::before { border-radius: 2px }
.statut.manuel { background: var(--accent-soft); color: var(--accent) }
.statut.alerte { background: var(--red-soft); color: var(--red) }
.legende-statuts { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; font-size: .74rem; color: var(--slate) }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=tel], input[type=month], select, textarea {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .42rem .65rem; min-height: 36px; width: 100% }
textarea { min-height: 110px; resize: vertical; line-height: 1.5 }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
label.f { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--slate); font-weight: 600 }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem }
.check { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; cursor: pointer }
.check input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--accent); flex: none }
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem }
.filtres > * { width: auto; min-width: 150px }
.filtres input[type=search] { min-width: 240px; flex: 1 }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: .2rem 0 1rem; overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.outils select, .row select { width: auto; max-width: 280px }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem; color: var(--slate); font-weight: 650; font-size: .86rem; white-space: nowrap }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent) }
.segments { display: inline-flex; background: var(--grey-soft); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap }
.segments button { border: 0; background: none; padding: .28rem .7rem; border-radius: 7px; font-size: .8rem; font-weight: 600; color: var(--slate) }
.segments button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow) }

/* États : chargement, vide, erreur */
.vide { padding: 1.4rem; text-align: center; color: var(--slate); font-size: .9rem }
.etat { text-align: center; padding: 2rem 1rem; color: var(--slate) }
.etat .ico { width: 44px; height: 44px; margin: 0 auto .6rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.etat.erreur .ico { background: var(--red-soft); color: var(--red) }
.etat h3 { color: var(--ink); margin: 0 0 .3rem; font-size: 1rem } .etat p { margin: 0 auto .8rem; max-width: 520px; font-size: .88rem }
.squelette { display: grid; gap: .8rem }
.sq { border-radius: 10px; min-height: 18px; background: linear-gradient(90deg, var(--line-2) 25%, var(--panel-2) 50%, var(--line-2) 75%); background-size: 200% 100%; animation: sq 1.3s ease-in-out infinite }
.sq.l { min-height: 90px } .sq.xl { min-height: 220px } .sq.t { width: 40%; min-height: 26px }
@keyframes sq { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .sq { animation: none } * { scroll-behavior: auto !important } }

/* Tableaux */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
table.t { width: 100%; border-collapse: collapse; font-size: .85rem }
.t th { position: sticky; top: 0; background: var(--panel-2); text-align: left; font-size: .73rem; font-weight: 700; color: var(--slate); padding: .5rem .6rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none }
.t th[data-tri] { cursor: pointer } .t th[data-tri]:hover { color: var(--accent) }
.t td { padding: .47rem .6rem; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.t tr:last-child td { border-bottom: 0 }
.t tbody tr.lien { cursor: pointer } .t tbody tr.lien:hover { background: var(--panel-2) }
.t .nom { font-weight: 650 } .t .sub { font-size: .76rem; color: var(--slate) }

/* Recommandations : chaque ligne porte son « parce que », son niveau de confiance et s'écarte en un geste */
.reco { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--line-2) }
.reco:first-of-type { border-top: 0 }
.reco .barre { border-radius: 2px; background: var(--amber) }
.reco.perte_ligne .barre, .reco.decrochage .barre, .reco.arret_article .barre, .reco.erosion_ligne .barre { background: var(--red) }
.reco.erosion_marge .barre { background: #D2622A } .reco.reachat .barre { background: var(--blue) }
.reco .titre { font-weight: 650; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center }
.reco .pq { color: var(--slate); font-size: .84rem; margin-top: .15rem }
.reco .montant { text-align: right; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap }
.reco .montant small { display: block; font-weight: 500; color: var(--slate); font-size: .76rem }
.reco .fourchette { display: block; font-weight: 500; color: var(--amber); font-size: .74rem }
.reco .gestes { display: flex; gap: .3rem; margin-top: .45rem; flex-wrap: wrap; align-items: center }
.reco .gestes select { width: auto; min-height: 28px; padding: .1rem .45rem; font-size: .78rem }
.reco .precos { margin: .45rem 0 0; padding: .5rem .7rem; background: var(--panel-2); border-radius: 9px; font-size: .82rem }
.reco .deco { margin: .45rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem .8rem; font-size: .8rem; padding: .5rem .7rem; border-radius: 9px; background: var(--panel-2) }
.reco .deco span { color: var(--slate) }
.groupe-confiance { margin: .9rem 0 .2rem; display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--slate); font-weight: 650; text-transform: uppercase; letter-spacing: .05em }
.groupe-confiance::after { content: ""; flex: 1; height: 1px; background: var(--line-2) }

/* Actions du tableau de bord */
.action { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem .3rem; border-top: 1px solid var(--line-2); cursor: pointer; border-radius: 8px }
.action:first-child { border-top: 0 }
.action:hover { background: var(--panel-2) }
.action .verbe { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--accent) }
.action .motif { font-size: .84rem; color: var(--slate) }
.composantes { display: flex; gap: 2px; margin-top: .3rem } .composantes i { height: 5px; border-radius: 3px; background: var(--line); display: block; width: 18px }
.composantes i.on { background: var(--accent) }

/* Ma journée : suggestions de visite, le commercial décide */
.journee { display: grid; gap: .55rem }
.visite { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
.visite .rang { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 750; font-size: .9rem }
.visite.acceptee { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green-soft) 45%, var(--panel)) }
.visite.acceptee .rang { background: var(--green) }
.visite.ajoutee .rang { background: var(--violet) }
.visite.ecartee { opacity: .6 } .visite.ecartee .rang { background: var(--muted) } .visite.ecartee .nom { text-decoration: line-through }
.visite .nom { font-weight: 700 } .visite .quand { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--slate) }
.visite .raisons { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem }
.raison { font-size: .74rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 7px; padding: .08rem .45rem; color: var(--ink-2) }
.raison b { font-weight: 650 } .raison.a_completer { border-style: dashed; color: var(--slate) }
.visite .gestes { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end }
.poids { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .76rem; color: var(--slate) }
.poids b { color: var(--ink) }

/* Gamme : 44 lignes en un écran */
.gamme { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .8rem }
.univers h3 { margin: 0 0 .35rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate) }
.lg { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: center; padding: .32rem .5rem; border-radius: 7px; margin-bottom: 3px; font-size: .82rem; border: 1px solid transparent }
.lg.achetee { background: var(--green-soft) } .lg.perdue { background: var(--red-soft); color: var(--red); font-weight: 650 }
.lg.erosion { background: var(--amber-soft) } .lg.trou { border: 1px dashed var(--amber); color: var(--amber); font-weight: 650 }
.lg.absente { background: var(--grey-soft); color: var(--muted) } .lg.sans_objet { background: none; color: var(--muted); text-decoration: line-through; border: 1px solid var(--line-2) }
.lg .m { font-variant-numeric: tabular-nums; font-size: .78rem; white-space: nowrap }
.legende { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--slate); margin-bottom: .6rem }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: .3rem }

/* Trames */
.etape { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin: 0 0 1.2rem }
.etape h2 { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap }
.etape h2 .meth { font-size: .72rem; font-weight: 650; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .05rem .5rem }
.kv { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: .28rem .9rem; font-size: .88rem; margin: .3rem 0 .6rem }
.kv dt { color: var(--slate); font-weight: 600 } .kv dd { margin: 0 }
.note { background: var(--accent-soft); border-radius: 9px; padding: .55rem .8rem; font-size: .85rem; margin: .4rem 0 }
.note.alerte { background: var(--amber-soft) } .note.danger { background: var(--red-soft) } .note.ok { background: var(--green-soft) }
.cab { display: grid; grid-template-columns: 130px 1fr; gap: .2rem .8rem; background: var(--panel-2); border-radius: 9px; padding: .7rem .9rem; margin: .5rem 0; font-size: .86rem }
.cab .p { grid-column: 1 / -1; font-weight: 700; margin-bottom: .2rem } .cab dt { color: var(--slate); font-weight: 600 } .cab dd { margin: 0 }
.options { display: grid; gap: .4rem; margin: .4rem 0 } .options div { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 9px }
.options div:last-child { border-color: var(--accent); background: var(--accent-soft); font-weight: 600 }
.questions { margin: .4rem 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-2) }

/* Carte */
.carte-v3 { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: .9rem; height: calc(100vh - 262px); min-height: 520px }
.carte-panneau { display: flex; flex-direction: column; gap: .7rem; min-height: 0; overflow-y: auto; padding-right: 2px }
.carte-panneau .card { padding: .8rem .9rem; flex: none }
.carte-panneau .card + .card { margin-top: 0 }
.carte-liste { flex: 1 0 260px; min-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
.carte-liste .it { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: .83rem }
.carte-liste .it:hover { background: var(--panel-2) } .carte-liste .it.sel { background: var(--accent-soft) }
.carte-liste .it .n { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .carte-liste .it .s { font-size: .74rem; color: var(--slate) }
.carte-zone { position: relative; min-height: 0 }
#carte { position: absolute; inset: 0; border-radius: var(--r); border: 1px solid var(--line); z-index: 1; background: var(--panel-2) }
.carte-outils { position: absolute; z-index: 600; top: 10px; right: 10px; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end }
.carte-outils .card { padding: .55rem .7rem; box-shadow: var(--shadow-lg); font-size: .8rem }
.carte-fiche { position: absolute; z-index: 610; left: 10px; bottom: 10px; width: min(380px, calc(100% - 20px)); box-shadow: var(--shadow-lg) }
.carte-fiche .fermer { position: absolute; right: .5rem; top: .35rem; background: none; border: 0; font-size: 1.3rem; color: var(--slate) }
.carte-vide { position: absolute; z-index: 590; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 90%); text-align: center; box-shadow: var(--shadow-lg) }
.couches label { display: flex; gap: .45rem; align-items: center; padding: .12rem 0; cursor: pointer }
.couches input { accent-color: var(--accent) }
.chips-filtre { display: flex; flex-wrap: wrap; gap: .3rem }
.chip-f { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: .15rem .6rem; font-size: .76rem; font-weight: 600; color: var(--ink-2) }
.chip-f[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.marqueur { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35) }
.marqueur.decrochage { background: #E0473C } .marqueur.potentiel { background: #F0A92B } .marqueur.sain { background: #10B981 } .marqueur.prospect { background: #4F74E8 }
.marqueur.approx { border-style: dashed; border-color: #30496F }
.marqueur.selection { outline: 3px solid #003EE7; outline-offset: 2px }
.marqueur-jour { background: #003EE7; color: #fff; border: 2px solid #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font: 750 12px var(--sans); box-shadow: 0 2px 6px rgba(0,0,0,.35) }
.marqueur-jour.acceptee { background: #0B805A } .marqueur-jour.ajoutee { background: #6547C0 }
.marqueur-agence { width: 20px; height: 20px; border-radius: 6px; background: #30496F; border: 3px solid #FFEED6; box-shadow: 0 1px 4px rgba(0,0,0,.4) }
.marker-cluster { background: rgba(0,62,231,.18); border-radius: 50% }
.marker-cluster div { width: 30px; height: 30px; margin: 5px; border-radius: 50%; background: #003EE7; color: #fff; display: grid; place-items: center; font: 700 12px var(--sans) }
.marker-cluster-large div { background: #30496F }
.fond-absent { position: absolute; z-index: 500; left: 50%; top: 10px; transform: translateX(-50%); background: var(--amber-soft); color: var(--amber); font-size: .78rem; font-weight: 650; border-radius: 999px; padding: .2rem .75rem; pointer-events: none }
.leaflet-container { font-family: var(--sans) }
.leaflet-tooltip { font: 12px/1.35 var(--sans) }

/* Audit */
.audit-univers td.u { background: var(--panel-2); font-weight: 750; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate) }
.audit input[type=text], .audit select { min-height: 30px; padding: .25rem .4rem; font-size: .82rem }
.audit td { padding: .3rem .4rem }
.audit table { min-width: 1200px }
.audit td.mat { white-space: nowrap } .audit td.auj { min-width: 150px; max-width: 190px }
.audit tr.nc td { opacity: .5 } .audit tr.nc td:nth-child(-n+3) { opacity: 1 }
.barre-bas { position: sticky; bottom: 0; z-index: 10; margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem 1rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 22px rgba(48,73,111,.1) }
.progression { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; min-width: 140px } .progression i { display: block; height: 100%; background: var(--oh-vert); border-radius: 999px }

/* Pilotage par niveaux */
.unites { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem }
.unite { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem; box-shadow: var(--shadow) }
.unite:hover { border-color: var(--accent) } .unite .t { font-weight: 700 } .unite .g { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; font-size: .8rem; margin-top: .4rem }
.unite .g span { color: var(--slate) }

/* Projet : intégrations et feuille de route */
.connecteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .8rem }
.connecteur h3 { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; color: var(--ink); font-size: .95rem; margin: 0 0 .35rem }
.connecteur ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem }
.frise { display: grid; gap: 0; position: relative }
.jalon { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line-2) }
.jalon:first-child { border-top: 0 }
.jalon .p { font-weight: 750; color: var(--accent) } .jalon .p small { display: block; font-weight: 500; color: var(--slate) }
.jalon ul { margin: .3rem 0; padding-left: 1.1rem; font-size: .85rem }
.liste-statut { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem }
.liste-statut li { display: grid; grid-template-columns: 18px 1fr; gap: .45rem; align-items: start }
.liste-statut li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: .38rem; background: var(--green) }
.liste-statut.demo li::before { background: var(--oh-nuit); box-shadow: 0 0 0 2px var(--oh-vert) inset }
.liste-statut.connecter li::before { background: none; border: 2px dashed var(--muted) }

/* Graphiques */
svg.graph { width: 100%; height: auto; display: block }
.graph .axe { stroke: var(--line); stroke-width: 1 } .graph text { fill: var(--slate); font-size: 10px; font-family: var(--sans) }
.barre-h { height: 7px; background: var(--line-2); border-radius: 4px; overflow: hidden } .barre-h i { display: block; height: 100%; background: var(--accent) }

/* Connexion */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--oh-nuit) }
.login .marque { color: #fff; padding: 3rem 3.2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; position: sticky; top: 0; align-self: start; min-height: 100vh }
.login .marque img { width: 120px; height: 120px; border-radius: 14px; display: block; object-fit: contain }
.login .marque h1 { font-size: 2.1rem; color: #fff; margin: .4rem 0 0 } .login .marque p { color: #F2E1C8; max-width: 460px; margin: 0; font-size: 1rem }
.login .marque .points { display: grid; gap: .45rem; color: #DCE4FA; font-size: .9rem; margin-top: .6rem }
.login .marque .points span::before { content: "→ "; color: var(--oh-vert); font-weight: 700 }
.login .panneau { background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 3rem) }
.login .panneau .card { width: min(560px, 100%) }
.demo-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; margin-top: .6rem }
.demo-role { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: .65rem .8rem; display: grid; gap: .1rem }
.demo-role:hover, .demo-role:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.demo-role b { font-size: .88rem } .demo-role .r { font-size: .7rem; font-weight: 750; color: var(--accent); text-transform: uppercase; letter-spacing: .05em }
.demo-role .d { font-size: .76rem; color: var(--slate) }

/* Divers */
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1000; background: var(--oh-nuit); color: #fff; padding: .65rem 1rem; border-radius: 11px;
  font-size: .88rem; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; max-width: 440px; box-shadow: var(--shadow-lg) }
.toast.on { opacity: 1; transform: none }
.modal-fond { position: fixed; inset: 0; background: rgba(16,24,39,.5); z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto }
.modal { background: var(--panel); border-radius: 16px; width: min(880px, 100%); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-lg) }
.modal .fermer { float: right; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--slate) }
.hors-ligne { display: none; background: var(--amber-soft); color: var(--amber); font-weight: 700; font-size: .78rem; border-radius: 999px; padding: .15rem .6rem }
body.offline .hors-ligne { display: inline-flex }
.depot { border: 2px dashed var(--line); border-radius: var(--r); padding: 1.6rem; text-align: center; background: var(--panel); transition: .15s }
.depot.survol { border-color: var(--accent); background: var(--accent-soft) }
.mois-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem }
.mois-grille div { border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; font-size: .76rem; background: var(--panel) }
.mois-grille b { display: block; font-size: .8rem }
.stack > * + * { margin-top: .7rem }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap } .row.sb { justify-content: space-between }
.chip { display: inline-block; background: var(--grey-soft); border-radius: 7px; padding: .05rem .45rem; font-size: .76rem; margin: 0 .2rem .2rem 0 }
code, .mono { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: .82rem }
.dictee-on { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft) !important }
.ligne-sep { padding: .45rem 0; border-top: 1px solid var(--line-2) } .ligne-sep:first-child { border-top: 0 }
details > summary { cursor: pointer }

/* ---------- V4 : collaboration, import contrôlé, pilotage ---------- */
.statut.brouillon { background: var(--grey-soft); color: var(--ink-2); border: 1px solid var(--line) } .statut.brouillon::before { border-radius: 1px }
.statut.hypothese { background: var(--amber-soft); color: var(--amber); border: 1px dashed currentColor } .statut.hypothese::before { background: none; border: 1.5px solid currentColor; width: 7px; height: 7px }
.badge-top { display: inline-flex; min-width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 999px; background: var(--red); color: #fff; font-size: .66rem; font-weight: 800; padding: 0 .3rem; margin-left: .15rem }
.alerte-txt { color: var(--red) !important; font-weight: 700 }
.cartouche { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .76rem; color: var(--slate); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; padding: .5rem .75rem; margin-bottom: .9rem }
.cartouche b { color: var(--ink-2); font-weight: 650; margin-right: .2rem }
.fil-client { display: grid; gap: 0 }
.evt { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line-2) } .evt:first-child { border-top: 0 }
.evt-date { font-size: .76rem; color: var(--slate); font-variant-numeric: tabular-nums; padding-top: .1rem }
.plan-appels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem }
.appel-carte { border: 1px solid var(--line); border-radius: 11px; padding: .7rem .8rem; background: var(--panel) } .appel-carte ul { margin: .35rem 0; padding-left: 1.1rem }
.appel-carte.ferme { opacity: .6 }
.contexte { background: var(--panel-2); border-radius: 8px; padding: .4rem .55rem; display: grid; gap: .15rem } .contexte b { color: var(--ink-2) }
.appels-adv { display: grid; gap: .6rem }
.appel-adv { border: 1px solid var(--line); border-radius: 11px; padding: .65rem .8rem; background: var(--panel); display: grid; gap: .2rem }
.apercu { border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem; margin-top: .7rem; background: var(--panel) }
.apercu details { margin-top: .35rem }
.panneau-synchro { display: grid; gap: .4rem }

@media (max-width: 1150px) { .g-main, .g3, .g4 { grid-template-columns: 1fr 1fr } .carte-v3 { grid-template-columns: 300px minmax(0, 1fr) } }
@media (max-width: 900px) {
  .carte-v3 { grid-template-columns: 1fr; height: auto } .carte-zone { height: 62vh; min-height: 380px; order: -1 } .carte-liste { max-height: 360px }
  .login { grid-template-columns: 1fr } .login .marque { padding: 2rem 1.2rem 1.4rem; position: static; min-height: 0 } .login .marque .points { display: none } .login .marque img { width: 84px; height: 84px }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr } .side { position: fixed; z-index: 50; width: var(--side); transform: translateX(-100%); transition: transform .2s }
  body.menu .side { transform: none; box-shadow: var(--shadow-lg) } .menu-btn { display: inline-flex } .g2, .g-main, .g3, .g4 { grid-template-columns: 1fr }
  .page { padding: 1rem 1rem 3rem } .top { padding: .5rem 1rem; gap: .5rem } .bandeau-demo { padding: .35rem 1rem; gap: .5rem } .bandeau-demo .texte, .top .fraicheur .detail, .top .fraicheur svg { display: none }
  .bandeau-demo select { max-width: 62vw } .kv { grid-template-columns: 1fr } .cab { grid-template-columns: 1fr }
  .fond-absent { top: auto; bottom: 24px; max-width: 86%; text-align: center; white-space: normal }
  .filtres > * { min-width: 0; flex: 1 1 140px } .visite { grid-template-columns: 30px minmax(0, 1fr) } .visite .gestes { grid-column: 1 / -1; justify-content: flex-start }
  .jalon { grid-template-columns: 1fr; gap: .3rem } .reco { grid-template-columns: 4px minmax(0, 1fr) } .reco .montant { grid-column: 2; text-align: left }
  .evt { grid-template-columns: 1fr; gap: .1rem } .plan-appels { grid-template-columns: 1fr }
}
@media print { .side, .top, .btn, .tabs, .barre-bas, .bandeau-demo { display: none !important } .shell { display: block } .card { box-shadow: none; break-inside: avoid } }