/* MDH Suivi v0.9 : système visuel. Jetons de couleur (thème clair, et thème sombre depuis la v0.26 : automatique selon
   l'appareil, ou choisi dans le menu du compte), police Figtree hébergée localement, barre latérale sur ordinateur, onglets en bas sur téléphone.
   Les anciens noms de variables (--navy, --emer, --gold…) restent définis : des écrans y font encore référence. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/vendor/fonts/figtree-latin.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: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/vendor/fonts/figtree-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #F3F5F8; --surface: #FFFFFF; --sunk: #EAEEF3; --line: #DCE2EA; --line-strong: #C5CEDA;
  --fg: #0E1B2C; --muted: #5B6778; --faint: #8A95A5;
  --brand: #0B2545; --brand-2: #14335E; --brand-fg: #FFFFFF; --brand-accent: #4AD6A4;
  --accent: #00875F; --accent-hover: #006E4D; --accent-soft: #E3F4EE; --accent-fg: #FFFFFF;
  --crit: #C2362B; --crit-soft: #FBE9E7; --warn: #B45309; --warn-soft: #FDF1E3; --info: #2557A7; --info-soft: #E6EEFA; --violet: #6B3FA0; --violet-soft: #F1EAFA;
  --accent-line: #B5E0CF; --warn-line: #F0CFA0; --crit-line: #F1B8B2; --info-line: #C3D4EE; --pastille: #D4A72C; --crit-hover: #A52C22; --scrim: rgba(11,37,69,.42); --ink-brand: #0B2545; --brand-ui: #0B2545;
  --focus: #2557A7; --shadow: 0 1px 2px rgba(14,27,44,.06), 0 4px 14px -6px rgba(14,27,44,.12); --shadow-lg: 0 20px 50px -20px rgba(11,37,69,.45);
  --r: 10px; --r-lg: 14px; --side: 236px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* anciens noms */
  --navy: var(--brand); --navy2: var(--brand-2); --emer: var(--accent); --emdk: var(--accent-hover); --mint: var(--brand-accent); --gold: #A87F12; --red: var(--crit); --orange: var(--warn); --grey: var(--muted); --ink: var(--fg);
  color-scheme: light;
}
/* thème sombre : mêmes jetons, valeurs choisies pour garder les contrastes (texte, états, pastilles) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E141B; --surface: #161E28; --sunk: #1D2733; --line: #2A3644; --line-strong: #3B4959; --fg: #E6EBF1; --muted: #9DAAB9; --faint: #708091;
  --brand: #0A1626; --brand-2: #14294A; --brand-fg: #FFFFFF; --brand-accent: #4AD6A4;
  --accent: #178F67; --accent-hover: #1FA577; --accent-soft: #11342A; --accent-fg: #FFFFFF;
  --crit: #F07A6B; --crit-soft: #3A1D1B; --warn: #E3A458; --warn-soft: #36280F; --info: #86ADF2; --info-soft: #16294A; --violet: #B89AEA; --violet-soft: #2A2040;
  --accent-line: #22604A; --warn-line: #6A4A1C; --crit-line: #6D302A; --info-line: #2B4673; --pastille: #E2B93F; --crit-hover: #D9604F; --scrim: rgba(0,0,0,.6); --ink-brand: #E6EBF1; --brand-ui: #2D5596;
  --focus: #86ADF2; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.6); --shadow-lg: 0 20px 50px -20px rgba(0,0,0,.8); --gold: #E2B93F; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0E141B; --surface: #161E28; --sunk: #1D2733; --line: #2A3644; --line-strong: #3B4959; --fg: #E6EBF1; --muted: #9DAAB9; --faint: #708091;
  --brand: #0A1626; --brand-2: #14294A; --brand-fg: #FFFFFF; --brand-accent: #4AD6A4;
  --accent: #178F67; --accent-hover: #1FA577; --accent-soft: #11342A; --accent-fg: #FFFFFF;
  --crit: #F07A6B; --crit-soft: #3A1D1B; --warn: #E3A458; --warn-soft: #36280F; --info: #86ADF2; --info-soft: #16294A; --violet: #B89AEA; --violet-soft: #2A2040;
  --accent-line: #22604A; --warn-line: #6A4A1C; --crit-line: #6D302A; --info-line: #2B4673; --pastille: #E2B93F; --crit-hover: #D9604F; --scrim: rgba(0,0,0,.6); --ink-brand: #E6EBF1; --brand-ui: #2D5596;
  --focus: #86ADF2; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.6); --shadow-lg: 0 20px 50px -20px rgba(0,0,0,.8); --gold: #E2B93F; color-scheme: dark;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100% }
button, input, select, textarea { font-family: inherit }
svg.i { width: 18px; height: 18px; flex: none; vertical-align: -3px }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
a { color: var(--accent) }

/* ---------------- coque : barre latérale (ordinateur) / onglets du bas (téléphone) */
#top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--line) }
#top .brand { display: none; font-weight: 800; font-size: 17px; color: var(--ink-brand); white-space: nowrap } #top .brand b { color: var(--accent) }
#top .who { display: none }
.gsearch { position: relative; flex: 1; max-width: 560px }
.gsearch input { padding-left: 36px; background: var(--bg); border-color: var(--line) }
.gsearch > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none }
.gsearch kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--surface) }
.gres { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); max-height: 60vh; overflow: auto; z-index: 40 }
.gres a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); cursor: pointer }
.gres a:last-child { border-bottom: 0 } .gres a.on, .gres a:hover { background: var(--sunk) } .gres small { color: var(--muted) } .gres .empty { padding: 12px; color: var(--muted); font-size: 13px }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap }
.tb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg) } .tb-btn.primary:hover { background: var(--accent-hover) }
.tb-btn .av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-ui); color: var(--brand-fg); display: grid; place-items: center; font-size: 12px; font-weight: 800 }
#modeBtn, button.icon { display: none }
.pop { position: absolute; right: 12px; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 230px; padding: 6px; z-index: 45 }
.pop .ph { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px } .pop .ph b { display: block } .pop .ph small { color: var(--muted) }
.pop button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 7px; font-size: 14px; color: var(--fg); cursor: pointer; text-align: left } .pop button:hover { background: var(--sunk) }

#nav { position: fixed; z-index: 35; background: var(--brand); color: var(--brand-fg) }
#nav .nlogo { font-weight: 800; font-size: 18px; padding: 4px 12px 14px; letter-spacing: -.01em } #nav .nlogo b { color: var(--brand-accent) } #nav .nlogo small { font-size: 11px; font-weight: 500; opacity: .55; margin-left: 4px }
#nav .ngrp { display: grid; gap: 2px } #nav .ngrp > small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .5; padding: 10px 12px 4px; font-weight: 700 }
#nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: inherit; text-decoration: none; opacity: .8; cursor: pointer; font-size: 14.5px }
#nav a:hover { background: rgba(255,255,255,.07); opacity: 1 } #nav a.on { background: rgba(255,255,255,.13); opacity: 1; font-weight: 700 }
#nav a .ct { margin-left: auto; background: #E8505B; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px }
#tabbar { display: none }
main { padding: 22px 28px 60px; max-width: 1240px; margin: 0 auto }
@media (min-width: 1024px) {
  #nav { left: 0; top: 0; bottom: 0; width: var(--side); padding: 18px 12px; padding-top: calc(18px + env(safe-area-inset-top)); overflow-y: auto; display: flex; flex-direction: column; gap: 4px }
  #top, main, .modal { margin-left: var(--side) } #nav .nclose { display: none }
}
@media (max-width: 1023px) {
  #top .brand { display: block } .gsearch kbd { display: none }
  main { padding: 16px 14px calc(86px + env(safe-area-inset-bottom)) }
  #nav { inset: auto 0 0 0; max-height: 80vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .22s ease; box-shadow: var(--shadow-lg) }
  #nav.open { transform: none } #nav .nlogo { display: flex; justify-content: space-between; align-items: center } #nav .nclose { background: none; border: 0; color: inherit; font-size: 26px; cursor: pointer; line-height: 1 }
  #tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) }
  #tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; font-size: 11px; color: var(--muted); text-decoration: none; cursor: pointer; min-height: 48px; align-content: center }
  #tabbar a svg { width: 22px; height: 22px } #tabbar a.on { color: var(--accent); font-weight: 700 }
  .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 33 }
}
@media (max-width: 560px) { #top { gap: 8px; padding-inline: 10px } .tb-btn .lbl { display: none } }

/* ---------------- typographie */
h1 { font-size: 24px; line-height: 1.2; margin: 2px 0 16px; color: var(--fg); font-weight: 800; letter-spacing: -.015em; text-wrap: balance }
h1 small, h1 .note { font-weight: 500; letter-spacing: 0 }
h2 { font-size: 16px; margin: 22px 0 10px; color: var(--fg); font-weight: 800; text-wrap: balance }
.note { font-size: 13px; color: var(--muted) } .big { font-size: 22px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums }
.alert { color: var(--crit); font-size: 13px; margin-top: 4px } .warn { color: var(--crit) }
a.tel { color: var(--accent); font-weight: 700; text-decoration: none }

/* ---------------- composants */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; transition: border-color .15s }
.kpi:hover { border-color: var(--line-strong) } .kpi b { display: block; font-size: 22px; color: var(--fg); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2 } .kpi small { color: var(--muted); font-size: 12.5px }
.kpi.warn b { color: var(--crit) } .kpi.gold b { color: var(--warn) } .kpi.navy b { color: var(--info) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 12px 16px; margin-bottom: 8px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong) }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow) }
.card.n3::before { background: var(--crit) } .card.n2::before { background: var(--warn) } .card.n1::before { background: var(--pastille) } .card.n0::before { background: var(--accent) }
.card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px } .card .t b { font-size: 15.5px; color: var(--fg) } .card small { color: var(--muted) }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--sunk); color: var(--muted); margin: 2px 4px 0 0; white-space: nowrap; border: 0 }
.chip.e-lead { background: var(--violet-soft); color: var(--violet) } .chip.e-vt { background: var(--info-soft); color: var(--info) } .chip.e-devis { background: var(--info-soft); color: var(--brand-2) } .chip.e-pose { background: var(--accent-soft); color: var(--accent) } .chip.e-subventions { background: var(--warn-soft); color: var(--warn) } .chip.e-sav { background: var(--crit-soft); color: var(--crit) } .chip.e-clos { background: var(--sunk); color: var(--muted) }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none }
.tabs a { white-space: nowrap; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; cursor: pointer; color: var(--fg); text-decoration: none; font-weight: 500 }
.tabs a:hover { border-color: var(--line-strong) } .tabs a.on { background: var(--brand-ui); color: var(--brand-fg); border-color: var(--brand-ui); font-weight: 700 }
input, select, textarea { font-size: 15px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; width: 100%; background: var(--surface); color: var(--fg); transition: border-color .15s, box-shadow .15s }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(37,87,167,.15) }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent) }
textarea { min-height: 72px; resize: vertical }
.f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 10px } .f label { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 500 } .f .full { grid-column: 1/-1 }
@media (max-width: 560px) { .f { grid-template-columns: 1fr } }
.chk { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 15px; cursor: pointer } .chk input { width: 20px; height: 20px; flex: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; border-radius: 9px; padding: 10px 16px; font-size: 14.5px; font-weight: 700; cursor: pointer; margin: 4px 6px 4px 0; text-decoration: none; transition: background .15s, border-color .15s; line-height: 1.2 }
.btn:hover { background: var(--accent-hover) } .btn:disabled { opacity: .5; cursor: not-allowed }
.btn.sec { background: var(--surface); color: var(--fg); border-color: var(--line-strong) } .btn.sec:hover { background: var(--sunk) }
.btn.red { background: var(--crit) } .btn.red:hover { background: var(--crit-hover) } .btn.gold { background: var(--warn) } .btn.navy { background: var(--brand-ui) } .btn.navy:hover { background: var(--brand-2) }
.btn.sm { padding: 7px 11px; font-size: 13px; border-radius: 8px }
.modal { position: fixed; inset: 0; background: var(--scrim); display: none; z-index: 50; overflow: auto } .modal.on { display: block }
.box { background: var(--bg); max-width: 920px; margin: 24px auto; border-radius: var(--r-lg); padding: 20px; min-height: 200px; box-shadow: var(--shadow-lg) }
@media (max-width: 640px) { .box { margin: 0; border-radius: 0; min-height: 100vh; padding: 14px 14px 100px } }
.head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px } .head h1 { margin: 0 }
.x { background: var(--surface); border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 9px; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; flex: none }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 4px; margin: 10px 0 14px; overflow-x: auto }
.steps div { text-align: center; font-size: 12px; font-weight: 600; padding: 8px 4px 6px; border-top: 3px solid var(--line-strong); color: var(--muted); cursor: pointer; background: transparent }
.steps div.done { border-color: var(--accent); color: var(--accent) } .steps div.cur { border-color: var(--brand-ui); color: var(--fg); font-weight: 800 }
.sec { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px; background: var(--surface) } .sec h2 { margin: 0 0 12px; font-size: 15.5px }
.jr { font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--line) } .jr small { color: var(--muted) } .jr.commentaire { background: var(--warn-soft); padding-inline: 8px; border-radius: 6px }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; min-height: 110px } .day h3 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: capitalize }
.ev { font-size: 12.5px; border-radius: 6px; padding: 5px 7px; margin-bottom: 5px; cursor: pointer; border-left: 3px solid transparent }
.ev.vt { background: var(--info-soft); border-left-color: var(--info) } .ev.pose { background: var(--accent-soft); border-left-color: var(--accent) } .ev.sav { background: var(--warn-soft); border-left-color: var(--warn) }
@media (max-width: 760px) { .week { grid-template-columns: 1fr } .day { min-height: auto } }
.photos { display: flex; flex-wrap: wrap; gap: 8px } .photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line) }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--brand); color: var(--brand-fg); padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; display: none; z-index: 99; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px) }
.cl { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line) } .cl input { width: 22px; height: 22px; flex: none }

/* ---------------- planning, créneaux, tableaux (v0.2) */
.grid-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 12px }
table.plan { border-collapse: collapse; min-width: 900px; width: 100%; font-size: 12.5px }
table.plan th, table.plan td { border: 1px solid var(--line); vertical-align: top; padding: 5px }
table.plan thead th { background: var(--sunk); color: var(--fg); font-size: 12px; position: sticky; top: 0; font-weight: 700 }
table.plan tbody th { background: var(--surface); text-align: left; min-width: 120px; color: var(--fg) }
table.plan th.today { background: var(--accent-soft) } table.plan td.conflit { background: var(--crit-soft) } table.plan a { color: var(--accent); cursor: pointer }
.ev.manque { background: var(--warn-soft); border-left: 3px solid var(--warn) } .ev.ok { border-left: 3px solid var(--accent) } .ev small.warn { color: var(--crit) }
.slot { font-size: 12px; border-radius: 6px; padding: 5px 7px; margin-bottom: 4px; cursor: default }
.slot.libre { background: var(--accent-soft); color: var(--accent); cursor: pointer; font-weight: 600 } .slot.libre:hover { background: var(--accent-line) } .slot.pris { background: var(--info-soft); cursor: pointer } .slot.off { background: var(--sunk); color: var(--faint) }
table.arts { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; font-variant-numeric: tabular-nums }
table.arts th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line) }
table.arts td { padding: 6px 4px; border-bottom: 1px solid var(--line) } table.arts td.q { width: 64px } table.arts input, table.arts select { padding: 6px 8px; font-size: 13px }
table.arts tr.recu td { background: var(--accent-soft) } table.arts tr.commande td { background: var(--warn-soft) } table.arts tr.urgent td:nth-child(2) { color: var(--crit) } table.arts td:first-child input[type=checkbox] { width: 20px; height: 20px }

/* ---------------- connexion */
.login { position: fixed; inset: 0; background: var(--brand); display: none; z-index: 60; overflow: auto; padding: 20px } .login.on { display: block }
.lbox { background: var(--surface); border-radius: 18px; max-width: 480px; margin: 8vh auto 40px; padding: 28px; box-shadow: var(--shadow-lg) }
.lbox .brand { font-weight: 800; color: var(--ink-brand) } .lbox h2 { margin: 10px 0 14px; font-size: 20px }
.lbox .f { grid-template-columns: 1fr }
.choix { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px } .btn.big { padding: 18px 14px; font-size: 16px; text-align: left; margin: 0; display: block } .btn.big small { display: block; font-weight: 400; font-size: 12.5px; opacity: .9; margin-top: 6px }
@media (max-width: 700px) { .choix { grid-template-columns: 1fr } }
.btn.big, .btn.big small { color: #fff !important }
body.mode-terrain button.icon { display: none }
.leaflet-container { font: inherit }
@media print { #top, #nav, #tabbar, .row button, .tabs { display: none !important } main { padding: 0; margin: 0 !important } }

/* ---------------- écran « Aujourd'hui » (v0.9) */
.hello { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.hello h1 { margin: 0 } .hello p { margin: 4px 0 0; color: var(--muted) }
.t-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.panel > h3 { margin: 0; padding: 12px 16px; font-size: 14.5px; font-weight: 800; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px }
.panel > h3 small { font-weight: 500; color: var(--muted); font-size: 12.5px }
.panel .empty { padding: 18px 16px; color: var(--muted); font-size: 14px }
.task { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); cursor: pointer }
.task:last-child { border-bottom: 0 } .task:hover { background: var(--bg) }
.task > i { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--line-strong) } .task.s3 > i { background: var(--crit) } .task.s2 > i { background: var(--warn) } .task.s1 > i { background: var(--info) }
.task b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .task span.d { color: var(--muted); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.task .go { font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 7px; background: var(--sunk); color: var(--fg); white-space: nowrap; text-decoration: none }
.agenda { padding: 8px 16px 12px; display: grid; gap: 8px }
.agenda .ag { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer }
.agenda time { font: 600 12.5px var(--mono); color: var(--muted) }
.agenda .ag div { border-radius: 8px; padding: 7px 10px; border-left: 3px solid; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.agenda .vt { background: var(--info-soft); border-color: var(--info) } .agenda .pose { background: var(--accent-soft); border-color: var(--accent) } .agenda .sav { background: var(--warn-soft); border-color: var(--warn) }
.daytabs { display: flex; gap: 4px } .daytabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; color: var(--fg) } .daytabs button.on { background: var(--brand-ui); color: var(--brand-fg); border-color: var(--brand-ui) }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 12px 16px }
.wk div { border: 1px solid var(--line); border-radius: 8px; padding: 7px; display: grid; gap: 4px; font-size: 12px; cursor: pointer } .wk div.td { border-color: var(--brand-ui) }
.wk b { font-size: 12px; text-transform: capitalize } .wk span { border-radius: 5px; padding: 2px 5px; font-weight: 600 } .wk .vt { background: var(--info-soft); color: var(--info) } .wk .pose { background: var(--accent-soft); color: var(--accent) }
@media (max-width: 560px) { .wk { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line) }
.money div { background: var(--surface); padding: 12px 16px; display: grid; gap: 2px; cursor: pointer } .money b { font-size: 18px; font-variant-numeric: tabular-nums } .money small { color: var(--muted); font-size: 12.5px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* ---------------- dossiers (v0.9) : fiche pleine page, onglets, aides, liste, pipeline, trésorerie */
.modal.page { background: var(--bg) } .modal.page .box { background: var(--bg); max-width: 1120px; margin: 0 auto; border-radius: 0; box-shadow: none; padding: 16px 28px 60px; min-height: 100vh }
@media (min-width: 1024px) { .modal.page { left: var(--side); margin-left: 0 } }
@media (max-width: 640px) { .modal.page .box { padding: 12px 14px 100px } }
.dpage { display: grid; gap: 14px }
.dtop { display: flex; justify-content: space-between; align-items: center; gap: 10px } .dtop .btn { margin: 0 }
.saveind { font-size: 13px; color: var(--muted) } .saveind.ok { color: var(--accent); font-weight: 600 } .saveind.ok::before { content: "✓ " }
.dhead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 10px }
.dhead .r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .dhead h1 { margin: 0; font-size: 24px } .did { font: 500 12px var(--mono); color: var(--muted) }
.dhead .meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px } .dhead .meta a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none } .dhead .meta b { color: var(--fg) }
.stepper { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 4px; overflow-x: auto }
.stepper .st { font: 600 12.5px var(--font); padding: 8px 4px 6px; border: 0; border-top: 3px solid var(--line-strong); background: none; color: var(--muted); cursor: pointer; text-align: center }
.stepper .st:hover { color: var(--fg) } .stepper .st.done { border-color: var(--accent); color: var(--accent) } .stepper .st.cur { border-color: var(--brand-ui); color: var(--fg); font-weight: 800 }
.pe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border-radius: var(--r-lg); padding: 12px 16px; border: 1px solid; background: var(--accent-soft); border-color: var(--accent-line) }
.pe.pe-warn { background: var(--warn-soft); border-color: var(--warn-line) } .pe.pe-crit { background: var(--crit-soft); border-color: var(--crit-line) }
.pe b { font-size: 15px } .pe ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--fg) } .pe .btn { margin: 0 }
@media (max-width: 640px) { .pe { grid-template-columns: 1fr } }
.dtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none }
.dtabs button { border: 0; background: none; padding: 10px 13px; font: 600 14px var(--font); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap }
.dtabs button:hover { color: var(--fg) } .dtabs button.on { color: var(--fg); border-color: var(--accent); font-weight: 800 }
.dcontenu .sec:last-child { margin-bottom: 0 }
.dfoot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px } .dfoot .chk { font-size: 13.5px; color: var(--muted) }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.fgrid .fd { background: var(--surface); padding: 11px 14px; display: grid; gap: 3px; min-width: 0 } .fgrid .fd small { color: var(--muted); font-size: 12px } .fgrid .fd b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr } } @media (max-width: 480px) { .fgrid { grid-template-columns: 1fr } }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--surface); flex-wrap: wrap }
.seg button { border: 0; background: none; padding: 8px 14px; font: 600 13.5px var(--font); color: var(--fg); cursor: pointer; border-right: 1px solid var(--line) } .seg button:last-child { border-right: 0 }
.seg button.on { background: var(--brand); color: var(--brand-fg) }
.sec h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap } .chk.sw { font-size: 13.5px; font-weight: 500; padding: 0 }
.calc { display: flex; flex-wrap: wrap; gap: 6px 16px; background: var(--sunk); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; margin: 4px 0 8px; font-variant-numeric: tabular-nums }
.encform { display: grid; grid-template-columns: 150px 190px 130px minmax(0, 1fr) auto; gap: 8px; align-items: end; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px } .encform label { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 4px } .encform .btn { margin: 0 }
@media (max-width: 760px) { .encform { grid-template-columns: 1fr 1fr } .encform .btn { grid-column: 1 / -1 } }
.tw { overflow-x: auto }
.filtres { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap } .filtres input { flex: 1; min-width: 200px } .filtres select { width: auto; min-width: 150px }
.dtable table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: 13.5px; font-variant-numeric: tabular-nums }
.dtable th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--sunk); white-space: nowrap }
.dtable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top } .dtable tbody tr { cursor: pointer } .dtable tbody tr:hover td { background: var(--bg) } .dtable tbody tr:last-child td { border-bottom: 0 }
.dtable tr.n3 td:first-child { box-shadow: inset 4px 0 var(--crit) } .dtable tr.n2 td:first-child { box-shadow: inset 4px 0 var(--warn) } .dtable td small { color: var(--muted) } .dtable td small.warn { color: var(--crit) }
.dcards { display: none }
@media (max-width: 760px) { .dtable { display: none } .dcards { display: block } }
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start }
.pcol { background: var(--sunk); border-radius: var(--r-lg); padding: 8px; display: grid; gap: 6px; min-height: 140px; transition: background .15s } .pcol.over { background: var(--accent-soft); outline: 2px dashed var(--accent) }
.pcol .ph { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 6px } .pcol .ph b { font-size: 13.5px } .pcol .ph small { color: var(--muted); font-size: 12px }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px 9px 12px; display: grid; gap: 2px; cursor: grab; position: relative; overflow: hidden; font-size: 13.5px }
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong) } .pcard.n3::before { background: var(--crit) } .pcard.n2::before { background: var(--warn) } .pcard.n0::before { background: var(--accent) }
.pcard small { color: var(--muted); font-size: 12px } .pcard small.warn { color: var(--crit) } .pcard:hover { box-shadow: var(--shadow) }
.acteur { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) minmax(0, .9fr); gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer }
.acteur:hover { background: var(--bg) } .acteur b { display: block } .acteur small { color: var(--muted); font-size: 12.5px; display: block }
.bar3 { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden } .bar3 i { display: block; height: 100%; background: var(--accent) }
@media (max-width: 560px) { .acteur { grid-template-columns: 1fr auto } .acteur .bar3 { display: none } }

/* ---------------- graphiques (v0.17) : grille discrète, barres fines, info-bulle au survol */
.chartbox { display: grid; gap: 8px } .chart { display: block; min-width: 720px; width: 100%; height: auto; font-family: var(--font) }
.chart .g { stroke: var(--line); stroke-width: 1 } .chart .g.z { stroke: var(--line-strong) } .chart .t { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums }
.chart .hv:hover path { opacity: .82 } .chart .hv:hover rect { fill: var(--sunk); fill-opacity: .6 }
.leg { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg) } .leg span { display: inline-flex; align-items: center; gap: 6px } .leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block }
/* v0.18 : appli terrain (Ma journée, consommables, bandeaux, photos GPS) */
.day-h { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; font-weight: 800 }
.it { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px }
.it-vt { border-left-color: var(--info) } .it-pose { border-left-color: var(--accent) } .it-sav { border-left-color: var(--warn) } .it-sav.g4 { border-left-color: var(--crit) }
.it-h { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 800 }
.it-h time { margin-left: auto; font-size: 16px; color: var(--fg); letter-spacing: 0; font-variant-numeric: tabular-nums }
.it-nom { display: block; font-size: 17px; margin-top: 2px; color: var(--fg) } .it-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px }
.it-act { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 10px }
.ab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center }
.ab svg.i { width: 21px; height: 21px } .ab:active { background: var(--line) } .ab.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg) }
.bandeau { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); margin: 0 0 14px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--fg); font-size: 14px }
.bandeau > span { flex: 1 1 200px; min-width: 0 } .bandeau svg.i { color: var(--warn) } .bandeau.crit { background: var(--crit-soft); border-color: var(--crit-line) } .bandeau.crit svg.i { color: var(--crit) }
.bandeau.ok { background: var(--accent-soft); border-color: var(--accent-line) } .bandeau.ok svg.i { color: var(--accent) } .bandeau.info { background: var(--info-soft); border-color: var(--info-line) } .bandeau.info svg.i { color: var(--info) }
.urgent { background: var(--crit); color: #fff; border-radius: var(--r); padding: 16px; font-weight: 800; font-size: 16px; line-height: 1.4; margin: 0 0 14px } .urgent a { color: #fff; text-decoration: underline; font-size: 18px } .urgent svg.i { color: #fff }
.cl-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden }
.qte button { width: 42px; height: 42px; border: 0; background: var(--sunk); font-size: 20px; cursor: pointer; color: var(--fg) } .qte input { width: 54px; height: 42px; border: 0; border-radius: 0; padding: 0; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums }
.ab-x { width: 42px; height: 42px; border: 0; background: none; color: var(--muted); font-size: 24px; cursor: pointer }
.cl-add { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 8px; margin-top: 12px } .cl-add input { font-size: 16px } .cl-add .btn { margin: 0 }
.btn.big-send { display: block; width: 100%; margin-top: 14px; padding: 14px; font-size: 16px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.photos a { position: relative; display: block } .photos .gps { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 4px }
.cpos { padding: 10px 16px; border-top: 1px solid var(--line) } .clist { margin: 6px 0; padding-left: 18px; font-size: 13.5px } .clist li { margin: 2px 0 }
body.role-terrain #jtxt, body.role-terrain .cl-add input { font-size: 16px }
/* v0.19 : carte et tournées, stock, matériel utilisé, pièces remplacées */
.carte-f { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 12px } .cf { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer } .cf i { width: 12px; height: 12px; border-radius: 50% } .cf input { margin: 0 }
.carte-g { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start }
.cmap { height: 620px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--sunk); overflow: hidden }
@media (max-width: 900px) { .carte-g { grid-template-columns: 1fr } .cmap { height: 52vh } }
.tour-p .tf { padding: 4px 16px 10px } .tour-l { list-style: none; margin: 0; padding: 0 16px 8px }
.tour-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line) } .tour-l small { display: block; color: var(--muted); font-size: 12.5px }
.tour-l input { padding: 6px; text-align: center } .tb { display: inline-flex } .tb button { width: 30px; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer } .tb button:first-child { border-radius: 6px 0 0 6px } .tb button:last-child { border-radius: 0 6px 6px 0 }
.tnum { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface) } .tnum.s { width: 24px; height: 24px; font-size: 12px; box-shadow: none } .tnum.dep { background: var(--accent) }
.pp { display: grid; gap: 2px; font-family: var(--font); font-size: 13px; min-width: 210px } .pp b { font-size: 15px } .pp small { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px }
.choix2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .choix2 button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; min-height: 92px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: center }
.choix2 button.on { border-color: var(--accent); background: var(--accent-soft) } .choix2 svg.i { width: 26px; height: 26px }
.daytabs { flex-wrap: wrap }
table.ltable { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums }
table.ltable th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--sunk); white-space: nowrap }
table.ltable td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top } table.ltable tbody tr:last-child td { border-bottom: 0 } table.ltable td small { color: var(--muted) } table.ltable td .warn, table.ltable td.warn { color: var(--crit) }
table.ltable input, table.ltable select { padding: 6px 8px; font-size: 13.5px } .panel > .tw { overflow-x: auto }
.transc { white-space: pre-wrap; font-family: var(--font); font-size: 14px; background: var(--sunk); padding: 12px; border-radius: var(--r); max-height: 60vh; overflow: auto }
/* v0.20 : visios SAV */
.it-visio { border-left-color: var(--violet) } .agenda .visio { background: var(--violet-soft); border-color: var(--violet) } .ev.visio { background: var(--violet-soft); border-left-color: var(--violet) }
.visio-b { display: grid; gap: 4px; background: var(--violet-soft); border-radius: var(--r); padding: 12px; margin-top: 4px } .visio-b > b { display: flex; gap: 6px; align-items: center } .visio-b .f { margin-top: 6px }
.visio-c { display: flex; gap: 6px; align-items: center; color: var(--violet); margin: 8px 0 0 }
/* v0.25 : documents du dossier */
.docs-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
.dl > small, .dl > label { grid-column: 2 } .dl.ok svg.i { color: var(--accent) } .dl.ok small { color: var(--accent) } .dl.ko svg.i, .dl.ko small { color: var(--crit) } .dl.nc { opacity: .65 }
.apercu-mail { background: #fff; color: #0E1B2C; border-radius: var(--r); padding: 16px; border: 1px solid var(--line) }

/* v0.26 : choix du thème dans le menu du compte */
.pop .theme { display: flex; gap: 4px; padding: 6px 10px 10px } .pop .theme button { flex: 1; padding: 6px 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--fg); font-size: 12.5px; cursor: pointer }
.pop .theme button.on { background: var(--brand-ui); color: var(--brand-fg); border-color: var(--brand-ui) }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) } }
@media (max-width: 560px) { #pop-compte, #pop-nouveau { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 58px); min-width: 0 } }
.bandeau-hl { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); z-index: 40; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--fg); box-shadow: var(--shadow-lg); font-size: 14px } .bandeau-hl > span { flex: 1 } .bandeau-hl svg.i { color: var(--warn) } @media (min-width: 900px) { .bandeau-hl { left: auto; width: 420px; bottom: 16px } }
/* v0.29 : choix de l'espace et parcours client */
.choix-espace { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: 16px; overflow: auto }
.ce-box { width: min(920px, 100%) } .ce-box h1 { margin: 0 } .ce-box > p { color: var(--muted); margin: 4px 0 18px; font-size: 16px }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.ce-grid button { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; box-shadow: var(--shadow) }
.ce-grid button:hover, .ce-grid button.on { border-color: var(--accent); background: var(--accent-soft) } .ce-grid svg.i { width: 26px; height: 26px; color: var(--accent) } .ce-grid b { font-size: 17px } .ce-grid small { color: var(--muted) }
.parcours { display: block } .pc-tete { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px } .pc-tete small { font-size: 12.5px }
.pc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.pc > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line) } .pc > li:first-child { border-top: 0 }
.pc > li > div > small { display: block; color: var(--muted); margin-top: 2px } .pc > li.cour { } .pc > li:not(.cour):not(.fait) { opacity: .6 }
.pc-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--sunk); color: var(--muted) }
.pc li.cour .pc-n { background: var(--brand-ui); color: #fff } .pc li.fait .pc-n { background: var(--accent); color: #fff } .pc li.fait .pc-n svg.i { width: 15px; height: 15px }
.pc-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px } .pc-f input { width: auto; flex: 1 1 140px; max-width: 260px; padding: 7px 10px } .pc-f .btn { margin: 0 }
.chipb { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 13.5px; cursor: pointer }
.chipb.on, .chipb:has(input:checked) { background: var(--brand-ui); color: #fff; border-color: var(--brand-ui) } .chipb input { margin: 0 }
.pastille { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--pc, var(--info)); color: #fff; font-weight: 700; font-size: 12px } .pastille.cee { background: var(--sunk); color: var(--fg) }
/* v0.32 : À compléter */
.cp-f { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px } .cp-f:empty { display: none } .cp-f input, .cp-f select { flex: 1 1 150px; width: auto; min-width: 0 } .cp-f .btn { flex: 0 0 auto }
.ltable-w { overflow-x: auto; max-width: 100% }