/* ==========================================================================
   Vision App — système de design « Collectivité » (v2)
   --------------------------------------------------------------------------
   UNE seule feuille pour toute l'application. Chaque écran se construit avec
   les composants ci-dessous ; aucun style écrit en ligne, aucune couleur en
   dur hors de ce fichier. Une page qui a besoin d'un détail propre ajoute une
   petite feuille à part (css/terrain.css, css/grille.css…) qui ne réutilise
   que les jetons définis ici.

   Sommaire
     1. Jetons (clair / sombre)            8. Tableaux et listes
     2. Base                                9. Fenêtres (dialogue, panneau)
     3. Coque : barre latérale, haut       10. Notifications, états vides
     4. Navigation mobile                  11. Carte Leaflet, jauge
     5. Page, en-tête, onglets             12. Parcours terrain (gros boutons)
     6. Boutons, champs                    13. Visibilité par rôle
     7. Cartes, indicateurs, pastilles     14. Utilitaires
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
    --bg:            #f3f6f9;
    --surface:       #ffffff;
    --surface-2:     #f6f9fc;
    --surface-3:     #edf2f7;
    --line:          #e2e8ef;
    --line-strong:   #cdd7e1;
    --text:          #182635;
    --text-2:        #4d6073;
    --muted:         #8394a6;

    --accent:        #2c6fa0;          /* bleu Pollustock */
    --accent-hover:  #245d87;
    --accent-ink:    #ffffff;
    --accent-soft:   #e5eff7;
    --sky:           #33aadd;          /* bleu ciel Pollustock */
    --focus:         #33aadd;

    --side-bg:       #2c6fa0;
    --side-text:     #d6e8f5;
    --side-head:     #9cc4e2;
    --side-hover:    rgba(255, 255, 255, 0.10);
    --side-active:   #ffffff;
    --side-active-text: #1f5580;

    /* Les sept états d'un avaloir — les mêmes partout. */
    --s-plein:       #d23c4b;
    --s-remplit:     #d98a1c;
    --s-videman:     #33aadd;
    --s-vide:        #2f9e6b;
    --s-muet:        #8a5cc2;
    --s-attente:     #6b8aa5;
    --s-poser:       #a3afbb;

    --ok:            #2f9e6b;
    --warn:          #c77a0e;
    --danger:        #d23c4b;
    --info:          #2c6fa0;

    --map-filter:    none;
    --shadow:        0 1px 2px rgba(24, 50, 80, 0.05), 0 6px 18px rgba(24, 50, 80, 0.06);
    --shadow-lg:     0 12px 40px rgba(24, 50, 80, 0.18);
    --scrim:         rgba(16, 32, 48, 0.42);

    --font:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --head:  "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --r-lg:  14px;
    --r:     10px;
    --r-sm:  7px;
    --pill:  999px;

    --side-w: 236px;
    --top-h:  60px;
    --tabbar-h: 64px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg:            #0f1a24;
    --surface:       #152331;
    --surface-2:     #1a2b3b;
    --surface-3:     #203447;
    --line:          #243748;
    --line-strong:   #33495e;
    --text:          #e6eef5;
    --text-2:        #a6b9ca;
    --muted:         #6f8497;

    --accent:        #5bb4e5;
    --accent-hover:  #7cc4ec;
    --accent-ink:    #06131d;
    --accent-soft:   #173247;
    --sky:           #62c2ee;
    --focus:         #62c2ee;

    --side-bg:       #173a57;
    --side-text:     #b9d4ea;
    --side-head:     #6f9cc0;
    --side-hover:    rgba(255, 255, 255, 0.07);
    --side-active:   #e6f1f9;
    --side-active-text: #173a57;

    --s-plein:       #f0606d;
    --s-remplit:     #eba443;
    --s-videman:     #62c2ee;
    --s-vide:        #4cc58c;
    --s-muet:        #b28ae6;
    --s-attente:     #86a3bd;
    --s-poser:       #687d90;

    --ok:            #4cc58c;
    --warn:          #eba443;
    --danger:        #f0606d;
    --info:          #5bb4e5;

    --map-filter:    invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.6);
    --shadow:        0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.5);
    --scrim:         rgba(2, 8, 14, 0.6);
    color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; color: var(--text); }
h1 { font-family: var(--head); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }
h2 { font-family: var(--head); font-weight: 700; font-size: 19px; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 14px; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--sky) 30%, transparent); }

/* 3. Coque ----------------------------------------------------------------- */
.app {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    min-height: 100vh;
}
.side {
    position: sticky; top: 0;
    height: 100vh;
    background: var(--side-bg);
    color: var(--side-text);
    display: flex; flex-direction: column;
    padding: 16px 12px 12px;
    gap: 18px;
    overflow-y: auto;
    z-index: 30;
}
.side-brand {
    display: flex; align-items: center; justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
}
.side-brand img { height: 34px; width: auto; display: block; }
.side-app {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 6px; margin-top: -8px;
    font-family: var(--head); font-weight: 700; color: #ffffff; font-size: 17px;
}
:root[data-theme="dark"] .side-app { color: var(--side-active); }
.side-app small { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--side-head); }
.side-nav { display: flex; flex-direction: column; gap: 16px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-head {
    font-size: 12px; font-weight: 600; color: var(--side-head);
    padding: 0 10px 4px;
}
.side-link {
    all: unset; box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px;
    font-size: 14.5px; color: var(--side-text);
    cursor: pointer; text-decoration: none;
    transition: background .12s, color .12s;
}
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.side-link:hover { background: var(--side-hover); color: #ffffff; }
.side-link:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.side-link.is-active { background: var(--side-active); color: var(--side-active-text); font-weight: 600; }
.side-link .count {
    margin-left: auto; min-width: 20px; padding: 0 6px;
    border-radius: var(--pill); background: var(--s-plein); color: #fff;
    font-size: 11.5px; font-weight: 700; text-align: center; line-height: 20px;
}
.side-foot {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.side-user { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 13px;
}
.side .avatar { background: rgba(255,255,255,.16); color: #fff; }
.side-user-id { display: flex; flex-direction: column; min-width: 0; }
.side-user-id b { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .side-user-id b { color: var(--side-active); }
.side-user-id span { font-size: 12px; color: var(--side-head); }
.side-actions { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 2px; }
.side-actions button {
    all: unset; cursor: pointer; font-size: 12.5px; color: var(--side-text);
    padding: 4px 8px; border-radius: 7px;
}
.side-actions button:hover { background: var(--side-hover); color: #fff; }
.side-actions button:focus-visible { outline: 2px solid #fff; }
.side-google { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--side-head); padding: 0 8px; }
.side-google .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-poser); }
.side-google.is-on .dot { background: #5fd49a; }
.side-google.is-off .dot { background: #ff8a95; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 20;
    height: var(--top-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar-brand { display: none; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; font-size: 17px; }
.topbar-brand .mark {
    width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
    display: grid; place-items: center; color: var(--accent-ink);
}
.topbar-brand .mark svg { width: 16px; height: 16px; }
.topbar-spacer { flex: 1; }

/* Périmètre : Client › Ville › Dossier, commun à tous les écrans */
.scope { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.scope-label { font-size: 13px; color: var(--muted); margin-right: 2px; white-space: nowrap; }
.scope-sep { color: var(--muted); }
.scope select {
    appearance: none; -webkit-appearance: none;
    height: 36px; max-width: 200px; min-width: 0;
    padding: 0 30px 0 12px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%238394a6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 11px center;
    color: var(--text); font: inherit; font-size: 14px;
    text-overflow: ellipsis; cursor: pointer;
}
.scope select:hover { border-color: var(--line-strong); }
.scope select.is-set { border-color: var(--accent); background-color: var(--accent-soft); color: var(--accent); font-weight: 600; }
.scope-reset { margin-left: 2px; }

.icon-btn {
    all: unset; box-sizing: border-box; cursor: pointer;
    width: 38px; height: 38px; border-radius: var(--r);
    display: grid; place-items: center; color: var(--text-2);
    flex: none;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); }
.icon-btn svg { width: 20px; height: 20px; }

/* Bandeau d'alerte global */
.banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px; font-size: 14px;
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger); border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.banner .icon-btn { margin-left: auto; color: inherit; width: 30px; height: 30px; }

/* 4. Navigation mobile ----------------------------------------------------- */
.tabbar { display: none; }
.sheet-scrim { display: none; }

@media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .side { display: none; }
    .topbar { padding: 0 14px; gap: 8px; height: 56px; }
    .topbar-brand { display: flex; }
    .scope-bar-mobile { display: flex; }
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: grid; grid-template-columns: repeat(4, 1fr);
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .tabbar button, .tabbar a {
        all: unset; box-sizing: border-box; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 4px 0; font-size: 11.5px; color: var(--muted); text-decoration: none;
    }
    .tabbar svg { width: 22px; height: 22px; }
    .tabbar .is-active { color: var(--accent); font-weight: 700; }
    .tabbar :focus-visible { outline: 2px solid var(--focus); border-radius: 8px; }
    .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* Feuille « Plus » */
    .sheet-scrim {
        position: fixed; inset: 0; z-index: 50; background: var(--scrim);
        opacity: 0; pointer-events: none; transition: opacity .2s;
        display: block;
    }
    .sheet-scrim.is-open { opacity: 1; pointer-events: auto; }
    .sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
        background: var(--surface); border-radius: 20px 20px 0 0;
        padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        box-shadow: var(--shadow-lg);
        transform: translateY(105%); transition: transform .24s ease;
        max-height: 82vh; overflow-y: auto;
    }
    .sheet.is-open { transform: none; }
}
@media (min-width: 901px) { .sheet { display: none; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 0 auto 12px; }
.sheet-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.sheet-head { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 8px 4px; }
.sheet-link {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px; border-radius: 10px; font-size: 16px; color: var(--text);
    text-decoration: none;
}
.sheet-link svg { width: 20px; height: 20px; color: var(--accent); }
.sheet-link:hover, .sheet-link.is-active { background: var(--accent-soft); }

.scope-bar-mobile {
    display: none;
    gap: 6px; padding: 10px 14px 0; overflow-x: auto;
}
.scope-bar-mobile select { flex: 1 0 auto; max-width: none; }

/* 5. Page ------------------------------------------------------------------ */
.view { display: none; }
.view.is-active { display: block; animation: vue-entree .18s ease; }
@keyframes vue-entree { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page { padding: 26px 28px 40px; max-width: 1360px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-narrow { max-width: 860px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-sub { color: var(--text-2); font-size: 14.5px; max-width: 72ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
    .page { padding: 18px 14px 28px; gap: 16px; }
    h1 { font-size: 23px; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; }
}

/* Onglets segmentés (sous-vues d'un écran) */
.tabs {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface-3); border-radius: 11px;
    max-width: 100%; overflow-x: auto;
}
.tabs button {
    all: unset; box-sizing: border-box; cursor: pointer;
    padding: 7px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--text-2); white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.tabs button:focus-visible { outline: 2px solid var(--focus); }
.subview { display: none; }
.subview.is-active { display: flex; flex-direction: column; gap: 16px; }

/* Barre d'outils au-dessus d'une liste */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .grow { flex: 1 1 200px; }
.toolbar .count { color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* 6. Boutons et champs ----------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 16px;
    border-radius: var(--r); border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--danger) 88%, #000); color: #fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn-xl { height: 58px; padding: 0 24px; font-size: 18px; border-radius: 14px; }
.btn-xl svg { width: 22px; height: 22px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }
.btn .spinner { width: 15px; height: 15px; border-width: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.label .req { color: var(--danger); }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.fields { display: grid; gap: 14px; }
.fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .fields-2, .fields-3 { grid-template-columns: 1fr; } }

.input, .select, .textarea {
    width: 100%; min-width: 0;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 15px;
    transition: border-color .12s, box-shadow .12s;
}
.textarea { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.select {
    appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%238394a6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input.mono { font-family: var(--mono); font-size: 14px; }
.input-sm, .select.input-sm { height: 32px; font-size: 14px; border-radius: 8px; }
.input[readonly] { background: var(--surface-2); }
.search {
    padding-left: 36px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238394a6' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.4; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.check small { display: block; color: var(--muted); font-size: 12.5px; }

/* Interrupteur : <label class="switch"><input type="checkbox"><span></span> Texte</label> */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch > span:first-of-type {
    position: relative; width: 40px; height: 23px; flex: none;
    border-radius: var(--pill); background: var(--line-strong); transition: background .15s;
}
.switch > span:first-of-type::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(17px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + span { opacity: .45; }
.switch.is-warn input:checked + span { background: var(--warn); }

.form-error, .notice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--r); font-size: 14px; line-height: 1.45;
    background: var(--surface-3); color: var(--text-2);
}
.form-error, .notice-danger { background: color-mix(in srgb, var(--danger) 11%, var(--surface)); color: var(--danger); }
.notice-warn { background: color-mix(in srgb, var(--warn) 13%, var(--surface)); color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
.notice-ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: color-mix(in srgb, var(--ok) 80%, var(--text)); }
.notice-info { background: var(--accent-soft); color: var(--accent); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice b { font-weight: 700; }

/* 7. Cartes, indicateurs, pastilles ---------------------------------------- */
.card {
    background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--shadow); min-width: 0;
    display: flex; flex-direction: column;
}
.card-flat { box-shadow: none; border: 1px solid var(--line); }
.card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 16px 20px 8px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-family: var(--head); font-size: 17px; font-weight: 700; }
.card-head .meta { color: var(--muted); font-size: 13.5px; }
.card-body { padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-body.flush { padding: 0; gap: 0; }
.card-foot {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding: 12px 20px; border-top: 1px solid var(--line);
}
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.grid-2-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid-2, .grid-2-eq, .grid-3 { grid-template-columns: 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.kpi {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.kpi-value {
    font-family: var(--head); font-size: 32px; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.kpi-value small { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--muted); }
.kpi-sub { font-size: 13px; color: var(--muted); }
.kpi.is-danger .kpi-value { color: var(--s-plein); }
.kpi.is-warn .kpi-value { color: var(--s-remplit); }
.kpi.is-muet .kpi-value { color: var(--s-muet); }
.kpi.is-ok .kpi-value { color: var(--accent); }
button.kpi { all: unset; box-sizing: border-box; cursor: pointer; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
button.kpi:hover { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
button.kpi:focus-visible { outline: 2px solid var(--focus); }

/* Pastille d'état : <span class="chip" data-etat="plein">Plein</span> */
.chip {
    --c: var(--muted);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: var(--pill);
    font-size: 12.5px; font-weight: 700; line-height: 1.55; white-space: nowrap;
    color: color-mix(in srgb, var(--c) 88%, var(--text));
    background: color-mix(in srgb, var(--c) 14%, transparent);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.chip.no-dot::before { display: none; }
.chip[data-etat="plein"]    { --c: var(--s-plein); }
.chip[data-etat="remplit"], .chip[data-etat="intermediaire"] { --c: var(--s-remplit); }
.chip[data-etat="videman"], .chip[data-etat="accel"] { --c: var(--s-videman); }
.chip[data-etat="vide"]     { --c: var(--s-vide); }
.chip[data-etat="muet"]     { --c: var(--s-muet); }
.chip[data-etat="attente"]  { --c: var(--s-attente); }
.chip[data-etat="poser"], .chip[data-etat="jamais"] { --c: var(--s-poser); }
.chip-ok     { --c: var(--ok); }
.chip-warn   { --c: var(--warn); }
.chip-danger { --c: var(--danger); }
.chip-info   { --c: var(--accent); }
.chip-neutral { --c: var(--muted); }
.tag {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px;
    background: var(--surface-3); color: var(--text-2);
    font-family: var(--mono); font-size: 12px; white-space: nowrap;
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }

/* Répartition des états */
.stack-bar { display: flex; height: 12px; border-radius: var(--pill); overflow: hidden; gap: 2px; background: var(--surface-3); }
.stack-bar i { display: block; height: 100%; min-width: 3px; }
.legend { display: flex; flex-direction: column; }
.legend-row {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.legend-row:last-child { border-bottom: 0; }
.legend-row .dot { width: 10px; height: 10px; }
.legend-row small { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.legend-row b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Liste de fiches descriptives (clé / valeur) */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dl dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.dl .wide { grid-column: 1 / -1; }
.section { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.section:first-child { border-top: 0; padding-top: 0; }
.section-title { font-family: var(--head); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 8. Tableaux et listes ---------------------------------------------------- */
.table-wrap { overflow-x: auto; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
    text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted);
    padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
    background: var(--surface);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover td { background: var(--surface-2); }
.table tbody tr.is-selected td { background: var(--accent-soft); }
.table .num, .table .mono { font-variant-numeric: tabular-nums; }
.table .right { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table .ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* Liste de lignes cliquables (alertes, capteurs…) */
.rows { display: flex; flex-direction: column; }
.row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
    padding: 12px 20px; border-top: 1px solid var(--line);
    text-align: left; font: inherit; color: inherit; background: none; border-left: 0; border-right: 0; border-bottom: 0;
    width: 100%;
}
.row:first-child { border-top: 0; }
button.row, .row.is-clickable { cursor: pointer; }
button.row:hover, .row.is-clickable:hover { background: var(--surface-2); }
button.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.row-title .mono { font-weight: 600; }
.row-meta { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Pagination / plus */
.more { display: flex; justify-content: center; padding: 12px; }

/* 9. Fenêtres --------------------------------------------------------------- */
/* Les écrans ouvrent une fenêtre par son id : style.display = "flex" / "none".
   .modal-overlay = voile, .modal = boîte. Variante panneau latéral : ajouter
   la classe .is-drawer sur .modal-overlay. */
.modal-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: var(--scrim);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    animation: voile .15s ease;
}
@keyframes voile { from { opacity: 0; } to { opacity: 1; } }
.modal {
    width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
    background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
    animation: boite .18s ease;
}
@keyframes boite { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-wide { max-width: 760px; }
.modal-large { max-width: 1100px; }
.modal-header {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 22px 12px;
}
.modal-header h3 { font-family: var(--head); font-size: 20px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.modal-header .modal-sub { display: block; font-family: var(--font); font-weight: 400; font-size: 14px; color: var(--text-2); margin-top: 4px; }
.modal-close {
    all: unset; box-sizing: border-box; cursor: pointer; flex: none;
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    color: var(--muted); font-size: 22px; line-height: 1;
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-close:focus-visible { outline: 2px solid var(--focus); }
.modal-body { padding: 6px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.modal-footer {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.modal-footer .spacer { flex: 1; }

/* Panneau latéral (fiches) */
.modal-overlay.is-drawer { justify-content: flex-end; padding: 0; }
.modal-overlay.is-drawer .modal {
    max-width: 560px; height: 100vh; max-height: 100vh; border-radius: 18px 0 0 18px;
    animation: tiroir .22s ease;
}
@keyframes tiroir { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (max-width: 640px) {
    .modal-overlay, .modal-overlay.is-drawer { padding: 0; align-items: flex-end; justify-content: stretch; }
    .modal, .modal-overlay.is-drawer .modal {
        max-width: none; width: 100%; height: auto; max-height: 92vh;
        border-radius: 20px 20px 0 0; animation: feuille .22s ease;
    }
    .modal-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    .modal-footer .btn { flex: 1 1 auto; }
    .modal-footer .spacer { display: none; }
}
@keyframes feuille { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }

/* Dialogue de confirmation (ui.js : confirmer / avertir) */
.dialog-text { font-size: 15px; color: var(--text-2); white-space: pre-line; line-height: 1.55; }

/* 10. Notifications, chargement, vides ------------------------------------- */
.toasts {
    position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; width: min(560px, calc(100vw - 32px));
}
@media (max-width: 900px) { .toasts { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); } }
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-radius: 12px;
    background: var(--text); color: var(--bg);
    font-size: 14.5px; box-shadow: var(--shadow-lg);
    pointer-events: auto; animation: toast-in .2s ease;
    max-width: 100%;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.success svg { color: #5fd49a; }
.toast.error svg, .toast.danger svg { color: #ff8a95; }
.toast.warning svg { color: #f5bd5c; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.spinner {
    display: inline-block; width: 20px; height: 20px; flex: none;
    border: 2.5px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor; border-radius: 50%;
    animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--muted); }

.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 40px 20px; color: var(--muted);
}
.empty svg { width: 36px; height: 36px; color: var(--line-strong); margin-bottom: 4px; }
.empty b { color: var(--text-2); font-size: 15.5px; }
.empty p { max-width: 48ch; font-size: 14px; }

/* 11. Carte, jauge ---------------------------------------------------------- */
.map { height: 460px; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; background: var(--surface-3); }
.map-tall { height: calc(100vh - var(--top-h) - 190px); min-height: 420px; border-radius: var(--r-lg); }
@media (max-width: 900px) { .map { height: 340px; } .map-tall { height: calc(100vh - 56px - var(--tabbar-h) - 170px); min-height: 360px; } }
.leaflet-container { font-family: var(--font); background: var(--surface-3); }
.leaflet-tile-pane { filter: var(--map-filter); }
.fond-sombre { filter: none; }
.leaflet-popup-content-wrapper { border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--line); }
.leaflet-bar a:hover { background: var(--surface-2); }
.pop { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.pop-title { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.pop-meta { font-size: 12.5px; color: var(--muted); }
.pop-photos { display: flex; gap: 4px; flex-wrap: wrap; }
.pop-photos a { position: relative; display: block; }
.pop-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.pop-photos .etat { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend svg { flex: none; }

/* Jauge de remplissage (titan-visuels.js) */
.jauge-avaloir { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.jauge-piste {
    position: relative; height: 8px; border-radius: var(--pill);
    background: linear-gradient(90deg, var(--s-vide) 0%, var(--s-remplit) 55%, var(--s-plein) 100%);
}
.jauge-curseur {
    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--text); transform: translate(-50%, -50%);
}
.jauge-piste.jauge-inactive { background: var(--surface-3); height: 20px; display: flex; align-items: center; justify-content: center; }
.jauge-mention { font-size: 11.5px; color: var(--muted); }
.jauge-legende { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jauge-valeur { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.jauge-unite { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 1px; }
.jauge-plage { font-size: 11.5px; color: var(--muted); }

/* 12. Parcours terrain ------------------------------------------------------
   Pages plein écran pensées pour le téléphone : une action principale par
   étape, de gros boutons en bas, une progression toujours visible.
     <body class="terrain">
       <header class="wiz-top">…</header>
       <main class="wiz">
         <div class="wiz-progress">…</div>
         <section class="wiz-step is-active">…</section>
       </main>
       <footer class="wiz-actions">…gros boutons…</footer>
   ------------------------------------------------------------------------- */
body.terrain { background: var(--bg); min-height: 100%; display: flex; flex-direction: column; }
.wiz-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.wiz-top .back {
    all: unset; box-sizing: border-box; cursor: pointer; text-decoration: none;
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text);
}
.wiz-top .back:hover { background: var(--surface-3); }
.wiz-top .back svg { width: 22px; height: 22px; }
.wiz-top-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wiz-top-title b { font-family: var(--head); font-size: 18px; line-height: 1.2; }
.wiz-top-title span { font-size: 13px; color: var(--muted); }
.wiz-top .step-count { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--pill); white-space: nowrap; }

.wiz {
    flex: 1; width: 100%; max-width: 620px; margin: 0 auto;
    padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px;
}
.wiz-progress { display: flex; flex-direction: column; gap: 6px; }
.wiz-progress .bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.wiz-progress .bars i { height: 6px; border-radius: var(--pill); background: var(--line); }
.wiz-progress .bars i.is-done { background: var(--accent); }
.wiz-progress .bars i.is-now { background: var(--sky); }
.wiz-progress .labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; font-size: 12px; color: var(--muted); }
.wiz-progress .labels .is-now { color: var(--text); font-weight: 700; }

.wiz-step { display: none; flex-direction: column; gap: 14px; }
.wiz-step.is-active { display: flex; animation: vue-entree .2s ease; }
.wiz-title { font-family: var(--head); font-size: 24px; font-weight: 700; line-height: 1.2; }
.wiz-lead { font-size: 16px; color: var(--text-2); line-height: 1.5; }

.wiz-card {
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
    padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.wiz-card .ido { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.wiz-card .addr { color: var(--text-2); font-size: 15px; }
.wiz-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.wiz-actions {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
}
.wiz-actions > * { width: 100%; max-width: 588px; margin: 0 auto; }

/* Grands choix tactiles (liste de dossiers, d'avaloirs…) */
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    min-height: 64px; padding: 12px 16px;
    background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
    border: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.choice:hover { border-color: var(--line-strong); }
.choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.is-done { opacity: .55; }
.choice[disabled], .choice.is-disabled { opacity: .45; cursor: not-allowed; }
.choice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-main b { font-size: 16.5px; }
.choice-main span { font-size: 14px; color: var(--text-2); }
.choice-side { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.choice-side svg { width: 20px; height: 20px; }

/* Liste de contrôle (étapes techniques d'un flash, par exemple) */
.checks { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.check-item .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--muted); }
.check-item .ico svg { width: 15px; height: 15px; }
.check-item.is-ok .ico { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.check-item.is-run .ico { background: var(--accent-soft); color: var(--accent); }
.check-item.is-fail .ico { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.check-item.is-warn .ico { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.check-item.is-warn small { color: var(--warn); }
.check-item small { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 13px; }

.progress { height: 10px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s; }

/* Grand champ de saisie (scan, code) */
.big-input {
    width: 100%; height: 60px; padding: 0 18px;
    border: 2px solid var(--line-strong); border-radius: 14px;
    background: var(--surface); color: var(--text);
    font-family: var(--mono); font-size: 22px; letter-spacing: .02em;
}
.big-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }

/* Écran de résultat (succès / échec) */
.result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 8px; }
.result-ico { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; }
.result-ico svg { width: 44px; height: 44px; }
.result.is-ok .result-ico { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.result.is-fail .result-ico { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.result h2 { font-size: 26px; }
.result p { color: var(--text-2); font-size: 16px; max-width: 40ch; }

/* Hub terrain (onglet « Terrain » de l'app) */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hub-card {
    all: unset; box-sizing: border-box; cursor: pointer; text-decoration: none;
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
    color: var(--text); border: 2px solid transparent;
}
.hub-card:hover { border-color: var(--accent); color: var(--text); }
.hub-card:focus-visible { outline: 2px solid var(--focus); }
.hub-card .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.hub-card .ico svg { width: 26px; height: 26px; }
.hub-card b { font-family: var(--head); font-size: 19px; }
.hub-card span { color: var(--text-2); font-size: 14.5px; }

/* 13. Visibilité par rôle ---------------------------------------------------
   Le rôle est posé sur <html data-role="…"> après /api/me. C'est un confort
   d'interface : le refus réel est fait par le serveur (titan_rbac).
     .r-admin    Admin seul              .r-tech     Admin + Technicien
     .r-staff    Admin + Staff           .r-interne  Tout sauf Client et Prestataire */
[data-role="inconnu"]     :is(.r-admin, .r-staff, .r-tech, .r-interne),
[data-role="client"]      :is(.r-admin, .r-staff, .r-tech, .r-interne),
[data-role="prestataire"] :is(.r-admin, .r-staff, .r-tech, .r-interne),
[data-role="technicien"]  :is(.r-admin, .r-staff),
[data-role="staff"]       :is(.r-admin, .r-tech) {
    display: none !important;
}

/* 14. Utilitaires ---------------------------------------------------------- */
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.scroll-y { overflow-y: auto; }
.pre { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-btn { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; font-size: inherit; }
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: 2px solid var(--focus); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Compléments de mise en page */
.maxw-sm { max-width: 240px; }
.card-bar { padding-top: 14px; padding-bottom: 14px; }
.card-toolbar { padding: 0 20px 12px; }
.modal-sm { max-width: 460px; }
.dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 34px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
    color: var(--text-2); background: var(--surface-2);
    transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .ico svg { width: 34px; height: 34px; color: var(--accent); }
[data-icone] > svg:first-child { flex: none; }
.table td.mono, .table td .mono, .table .tag { white-space: nowrap; }
.leaflet-container img, .leaflet-container svg { max-width: none !important; }
.card-body.between { flex-direction: row; align-items: center; }
body.modal-ouverte { overflow: hidden; }
@media (max-width: 900px) {
    .topbar .scope { display: none; }
    .scope-bar-mobile { display: flex; }
    .scope-bar-mobile select { min-width: 0; flex: 1 1 0; }
}

/* Tableaux en cartes sur téléphone : <table class="table table-cards"> */
@media (max-width: 640px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody { display: block; }
    .table-cards tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
        padding: 12px 16px; border-bottom: 1px solid var(--line);
    }
    .table-cards tr:last-child { border-bottom: 0; }
    .table-cards td { border: 0; padding: 0; background: none !important; }
    .table-cards td[colspan], .table-cards td.full, .table-cards td.ellipsis { flex-basis: 100%; max-width: none; white-space: normal; }
    .table-cards td.right { margin-left: auto; text-align: right; }
    .table-cards td:last-child:not(.full) { margin-left: auto; }
    .table-cards tr.is-selected { background: var(--accent-soft); }
    .table-cards .jauge-avaloir { min-width: 160px; }
}
.page-wide { max-width: none; }

/* Logo Pollustock en tête sur téléphone. Son texte est noir : en sombre, on le
   pose sur une plaque blanche, comme dans la barre latérale. */
.topbar-logo { display: block; height: 34px; width: auto; }
:root[data-theme="dark"] .topbar-logo { background: #ffffff; border-radius: 8px; padding: 3px 8px; height: 38px; }

/* Cartes : elles restent SOUS les menus, fenêtres et barres collantes
   (Leaflet pose des z-index de 400 à 1000 : on les enferme dans la carte),
   et les gestes (pincer, molette, glisser) agissent sur la carte, pas sur
   la page. */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; touch-action: none; }
.leaflet-container.fond-photo .leaflet-tile-pane { filter: none; }
.leaflet-control-layers {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line) !important; border-radius: 10px !important;
    box-shadow: var(--shadow) !important;
}
.leaflet-control-layers-toggle {
    width: 40px !important; height: 40px !important; border-radius: 10px;
    background-color: var(--surface);
}
:root[data-theme="dark"] .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); background-color: #e6eef5; }
.leaflet-control-layers-expanded { padding: 10px 14px 10px 10px; font-family: var(--font); font-size: 14px; }
.leaflet-control-layers-base label { display: flex; align-items: center; gap: 4px; padding: 4px 2px; cursor: pointer; }
.leaflet-control-layers-selector { accent-color: var(--accent); width: 16px; height: 16px; margin: 0 6px 0 0 !important; }
.leaflet-control-attribution { font-size: 10px; background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--muted); }

/* Abonnement data (comptes client) — posé sur <html data-abonnement="0|1">.
     .r-pas-client   masqué pour tout client
     .r-data         masqué pour un client SANS abonnement
     .r-client-data  visible SEULEMENT pour un client AVEC abonnement */
[data-role="client"] .r-pas-client,
[data-role="client"][data-abonnement="0"] .r-data { display: none !important; }
html:not([data-role="client"][data-abonnement="1"]) .r-client-data { display: none !important; }
@media (max-width: 900px) {
    .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* Capteur « en service » (carte d'un client sans abonnement) : bleu Pollustock */
:root { --s-service: #2c6fa0; }
:root[data-theme="dark"] { --s-service: #5bb4e5; }

/* Graphiques de « Remplissage et stats » */
.chart-zone { position: relative; min-height: 220px; }
.chart { display: block; max-width: 100%; overflow: visible; }
.chart-axe { font-family: var(--font); font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-tip {
    position: absolute; z-index: 2; pointer-events: none;
    padding: 7px 10px; border-radius: 8px; background: var(--text); color: var(--bg);
    font-size: 13px; line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow-lg);
}

/* Cinq niveaux de remplissage (protocole du capteur). Palette vérifiée :
   écart de couleur suffisant entre niveaux voisins, y compris pour les
   daltoniens, à condition d'afficher aussi le pourcentage — c'est le cas
   partout (pastilles, légendes, infobulles). */
:root {
    --s-n0:   #2e9e6a;
    --s-n30:  #c9a80f;
    --s-n60:  #e3661e;
    --s-n80:  #cf2f6a;
    --s-n100: #951a10;
}
:root[data-theme="dark"] {
    --s-n0:   #048f51;
    --s-n30:  #ad9000;
    --s-n60:  #c25000;
    --s-n80:  #df5ba1;
    --s-n100: #c1332c;
}
.chip[data-etat="n0"]   { --c: var(--s-n0); }
.chip[data-etat="n30"]  { --c: var(--s-n30); }
.chip[data-etat="n60"]  { --c: var(--s-n60); }
.chip[data-etat="n80"]  { --c: var(--s-n80); }
.chip[data-etat="n100"] { --c: var(--s-n100); }
:root[data-theme="dark"] .chip[data-etat^="n"] { color: color-mix(in srgb, var(--c) 55%, #ffffff); }

/* Jauge : cinq paliers nets plutôt qu'un dégradé — le capteur ne mesure pas
   de valeurs intermédiaires. */
.jauge-piste {
    background: linear-gradient(90deg,
        var(--s-n0) 0 15%, var(--s-n30) 15% 45%, var(--s-n60) 45% 70%,
        var(--s-n80) 70% 90%, var(--s-n100) 90% 100%);
}
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-niveau { border-top: 4px solid var(--c, var(--line)); }
.kpi-niveau[data-etat="n0"] { --c: var(--s-n0); }
.kpi-niveau[data-etat="n30"] { --c: var(--s-n30); }
.kpi-niveau[data-etat="n60"] { --c: var(--s-n60); }
.kpi-niveau[data-etat="n80"] { --c: var(--s-n80); }
.kpi-niveau[data-etat="n100"] { --c: var(--s-n100); }
.chart-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.chart-legende span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Flash : accès à la remise à l'heure d'un capteur TITAN-TIME */
.heure-acces { margin-top: 20px; display: grid; gap: 8px; border: 1.5px dashed var(--line-strong); box-shadow: none; background: transparent; }
.heure-acces p { margin: 0; }

/* Carte : bouton unique « Voir détails » dans les infobulles */
.pop-actions { margin-top: 4px; }
.pop-actions .btn { width: 100%; justify-content: center; }

/* Carte : mode déplacer */
.switch-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.carte-deplacer-info { margin-bottom: 10px; }
.map.is-deplacer { outline: 3px solid var(--warn); outline-offset: -3px; }
.pt-deplacable { cursor: grab; }
.pt-deplacable:active { cursor: grabbing; }
.pt-deplacable span {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 0 0 2px var(--warn), 0 2px 6px rgba(0,0,0,.35);
}
.leaflet-dragging .pt-deplacable span { transform: scale(1.25); }

/* Fiche « Détails » : un bloc complet par capteur */
.bloc-capteur { display: grid; gap: 10px; padding: 14px; margin-top: 10px; }
.bloc-capteur .dl { margin: 0; }
.bloc-capteur .section-title { margin: 4px 0 0; }
.btn-danger-text { color: var(--danger); }
.choice input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
#modal-zero-depart .choices { margin-bottom: 12px; }

/* Flash : arrivée par « Reflasher » depuis la fiche */
.reflash-card { border: 2px solid var(--accent); display: grid; gap: 8px; }
.reflash-card p { margin: 0; }