/* ==========================================================================
   Pole Street View Inspector — feuille de style unique (web + app Android TWA)
   Direction : fond gris clair, bleu encre, en-tete sombre, IBM Plex Sans/Mono.
   Les ecrans terrain (liste, fiche poteau, circuit) sont concus mobile d'abord ;
   les pages admin reutilisent les memes composants de base (.card, boutons...).
   ========================================================================== */
:root {
    --bg: #F3F4F1;
    --surface: #FFFFFF;
    --surface-2: #E6E9EA;
    --line: #DDE1E3;
    --line-soft: #ECEEEF;
    --line-strong: #C9CFD3;
    --ink: #16202B;
    --muted: #56606B;
    --faint: #8A939C;
    --accent: #1E3A5F;
    --accent-soft: #E8EEF5;
    --head: #16202B;
    --head-2: #2B3A4A;
    --head-muted: #A9B4BF;
    --ok: #1F7A4D;
    --warn: #B04E06;
    --bad: #A11D1D;
    --grey: #5B6570;
    --radius: 12px;
    --radius-sm: 10px;
    --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --bottom-nav-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}
a { color: var(--accent); }
h1 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
:focus-visible { outline: 3px solid #7FA6D6; outline-offset: 2px; }

/* ------------------------------------------------------------------ En-tete */
.topbar {
    background: var(--head);
    color: #fff;
    min-height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.topbar-row { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar .brand {
    color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 1px; line-height: 1.2;
}
.brand-kicker { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--head-muted); }
.brand-name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.team-avatar {
    width: 36px; height: 36px; border-radius: 18px; background: var(--head-2); color: #fff;
    display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
    flex-shrink: 0;
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; flex: 1; justify-content: flex-end; }
.topbar nav a { color: #D5DCE3; text-decoration: none; font-size: 14px; }
.topbar nav a:hover { color: #fff; }
.topbar nav .nav-meta { color: var(--head-muted); font-size: 13px; }
.topbar nav form { display: inline; margin: 0; }
.nav-link-button {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 14px;
    color: #D5DCE3; cursor: pointer; text-decoration: underline;
}
.nav-toggle { display: none; }
/* Etat du partage de position (comptes equipe) : texte a cote de « Connecte »
   + pastille sur l'avatar (visible sans ouvrir le menu, sur mobile). */
.position-indicator { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.position-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); }
.position-indicator[data-state="active"] { --c: var(--ok); }
.position-indicator[data-state="closed"] { --c: #E8750A; }
.position-indicator[data-state="denied"], .position-indicator[data-state="off"],
.position-indicator[data-state="unavailable"] { --c: #D93A3A; }
.team-avatar { position: relative; }
.team-avatar[data-pos-state]::after {
    content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--faint); border: 2px solid var(--head);
}
.team-avatar[data-pos-state="active"]::after { background: var(--ok); }
.team-avatar[data-pos-state="closed"]::after { background: #E8750A; }
.team-avatar[data-pos-state="denied"]::after, .team-avatar[data-pos-state="off"]::after,
.team-avatar[data-pos-state="unavailable"]::after { background: #D93A3A; }
.loc-steps { margin: 0 0 4px; font-size: 14px; }
.position-alerts ul { margin: 0; padding-left: 18px; }
.position-alerts li { margin: 4px 0; }
.alert-bad { color: var(--bad); font-weight: 600; }
.alert-warn { color: var(--warn); font-weight: 600; }
.days-field { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.days-field legend { font-weight: 600; margin-bottom: 6px; }
.loc-steps dt { font-weight: 600; margin-top: 8px; }
.loc-steps dd { margin: 2px 0 0; color: var(--muted); }
.team-position-icon { font-size: 22px; line-height: 28px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }

/* ------------------------------------------------ Barre de navigation du bas */
.bottom-nav { display: none; }
.more-sheet-head { display: none; }

/* --------------------------------------------------------------- Composants */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.flash-container { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 6px; border: 1px solid transparent; }
.flash-success { background: #E3F1E9; color: #14532D; border-color: #BFDCCB; }
.flash-error { background: #F8E3E3; color: #7A1414; border-color: #E8BDBD; }
.flash-warning { background: #FDEBD9; color: #7A3304; border-color: #F2C79E; }

.simple-table, .poles-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
.simple-table th, .simple-table td, .poles-table th, .poles-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-size: 14px;
}
.simple-table th, .poles-table th {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
    background: #FAFAF8;
}
.poles-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #F5F7F8; }

.badge {
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.code-tag {
    font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted);
    border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; line-height: 18px;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.code-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }

.stats-row { display: flex; gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; }
.stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 12px; color: var(--muted); }

.filters-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.filters-row select, .filters-row input { padding: 8px; border-radius: 8px; border: 1px solid var(--line-strong); font: inherit; font-size: 14px; background: var(--surface); }

input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea {
    font: inherit; color: var(--ink);
}

.btn-small, button, .btn-primary, .btn-validate, .btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    margin: 2px;
}
.btn-small:hover, button:hover { background: #F5F7F8; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #172F4D; }
.btn-validate { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; font-size: 16px; min-height: 52px; width: 100%; border-radius: var(--radius); margin: 0; }
.btn-validate:hover { background: #172F4D; }
.btn-validate:disabled { background: #8A96A3; border-color: #8A96A3; cursor: not-allowed; }
.btn-warning { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.btn-warning:hover { background: #FBEFEF; }

.progress-bar-track {
    background: var(--surface-2);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    display: flex;
}
.progress-bar-fill { background: var(--accent); height: 100%; transition: width 0.3s ease; }

/* Controle segmente (onglets A faire / Faits / Tous) */
.segmented {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
    background: var(--surface-2); border-radius: var(--radius-sm); margin: 0 0 12px;
}
.segmented a, .segmented button {
    min-height: 36px; margin: 0; border: 0; border-radius: 7px; background: none; display: flex;
    align-items: center; justify-content: center; font-size: 14px; color: var(--muted); text-decoration: none;
}
.segmented .active, .segmented [aria-current="page"] {
    background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,32,43,0.12);
}
.filter-btn.active { background: var(--surface); color: var(--ink); }

/* Bloc repliable generique (<details class="fold">) */
.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.fold > summary {
    list-style: none; cursor: pointer; min-height: 50px; padding: 0 14px; display: flex; align-items: center;
    justify-content: space-between; gap: 10px; font-weight: 600;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
    content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); margin: -4px 4px 0 0; flex-shrink: 0;
}
.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.fold-body { padding: 0 14px 14px; }
.fold-count { font-weight: 400; color: var(--muted); }

/* ======================================================= Liste des poteaux */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.progress-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.progress-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.progress-card-top strong { font-size: 15px; }
.progress-card-top span { font-size: 13px; color: var(--muted); }
.progress-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.progress-legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-field {
    flex: 1; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--muted);
}
.search-field input { border: 0; outline: none; background: none; font-size: 15px; width: 100%; min-width: 0; }
.icon-button {
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; flex-shrink: 0; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.icon-button .dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }

.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.filter-panel[hidden] { display: none; }
.filter-panel .filters-row { margin: 0; }
.filter-panel-actions { display: flex; gap: 8px; margin-top: 10px; }
.filter-panel-actions > * { flex: 1; margin: 0; }

.result-count { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

.pole-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.pole-row { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.pole-row:last-child { border-bottom: 0; }
.pole-row-select { width: 44px; min-height: 66px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: -8px; }
.pole-row-select input { width: 20px; height: 20px; }
.pole-row-link {
    flex: 1; min-width: 0; min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    color: var(--ink); text-decoration: none;
}
.pole-row-link:hover { background: #F7F8F9; }
.pole-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pole-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pole-num { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.pole-row-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.status-pill .swatch { width: 10px; height: 10px; border-radius: 3px; }
.chevron { color: var(--faint); }
.empty-state { padding: 24px 16px; text-align: center; color: var(--muted); margin: 0; }

.list-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.list-tools form { margin: 0; }
.circuit-create input[type=text] {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); margin: 0 0 8px; width: 100%;
}

/* Tableau desktop / liste mobile */
.poles-cards-mobile { display: none; }
.primary-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.primary-actions form, .primary-actions > a { margin: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===================================================== Fiche poteau (inspect) */
.inspect-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;
}
.inspect-head a, .inspect-head .inspect-head-spacer { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; text-decoration: none; font-size: 15px; color: var(--accent); border-radius: 8px; }
.inspect-head a:hover { background: var(--accent-soft); }
.inspect-head .inspect-head-spacer { visibility: hidden; }
.inspect-head-title { font-size: 15px; font-weight: 600; }

.inspect-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}
.image-zone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.image-wrapper { position: relative; background: var(--head-2); }
.image-wrapper img { width: 100%; display: block; }
.image-missing { min-height: 260px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--head-muted); padding: 20px; text-align: center; }
.photo-chip {
    position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border-radius: 6px; background: rgba(22,32,43,0.82); color: #E4E9EE; font-size: 12px; font-weight: 600;
}
.photo-chip.is-old { color: #FFD9B8; }
.photo-chip.is-validated { color: #BFE8D0; }

.view-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.view-bar-single { grid-template-columns: 1fr; }
.view-bar a, .view-bar button {
    min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 4px;
    color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600;
}
.view-bar button { border: 0; border-radius: 0; margin: 0; background: none; color: var(--accent); font-family: inherit; }
.view-bar a:hover, .view-bar button:hover { background: #F5F7F8; }
.view-bar button[aria-expanded="true"] { background: var(--accent-soft); }
.view-more-panel { border-top: 1px solid var(--line); padding: 12px 16px; }
.view-more-panel[hidden] { display: none; }
.view-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.view-more-grid > a, .view-more-grid > form > button { width: 100%; min-height: 44px; margin: 0; font-size: 14px; text-align: center; line-height: 1.25; }
.view-more-grid > form { margin: 0; }
.tech-info { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.6; }
.tech-info div { overflow-wrap: anywhere; }

.pole-id { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 4px; }
.pole-id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pole-id-num { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.pole-id-sub { font-size: 14px; color: var(--muted); }
.go-button {
    min-height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
    border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none;
}
.go-button:hover { background: var(--accent-soft); }

.inspection-zone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.inspection-zone .pole-id { padding-top: 16px; }
.section-label { padding: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.status-group { border: 0; margin: 14px 0 0; padding: 0 16px; min-width: 0; }
.state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.state { position: relative; display: block; cursor: pointer; }
.state input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.state-tile {
    min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: var(--radius-sm);
    border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.2;
}
.state-tile .swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; background: var(--c); }
.state-tile kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 500; }
.state input:checked + .state-tile { background: var(--c); border-color: var(--c); color: #fff; }
.state input:checked + .state-tile .swatch { background: #fff; }
.state input:checked + .state-tile kbd { color: rgba(255,255,255,0.75); }
.state input:focus-visible + .state-tile { outline: 3px solid #7FA6D6; outline-offset: 2px; }
.state-bon { --c: var(--ok); }
.state-controler { --c: var(--warn); }
.state-mauvais { --c: var(--bad); }
.state-nonvisible { --c: var(--grey); }

.constats-card { margin: 14px 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fold-flat { border: 0; border-radius: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
    min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 20px;
    border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px;
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid #7FA6D6; outline-offset: 2px; }
.comment-field { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.comment-field svg { margin-top: 3px; }
.comment-field textarea { border: 0; outline: none; padding: 0; font-size: 15px; resize: none; overflow: hidden; min-height: 24px; background: none; width: 100%; }
.validate-bar {
    position: sticky; bottom: 0; z-index: 5; margin-top: 16px; padding: 12px 16px 16px; background: var(--surface);
    border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
}

/* Anciennes classes (pages grille de vues / historique) */
.overlay-cartouche {
    position: absolute; top: 14px; left: 14px; background: rgba(22,32,43,0.8); color: #fff;
    padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
}
.color-badge { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff; margin-left: 4px; }
.info-text { font-size: 12px; color: var(--muted); margin-top: 10px; }
.tag-validated { color: var(--ok); font-weight: 600; margin-left: 8px; }
.tag-warning { color: var(--warn); font-weight: 600; margin-left: 8px; }
.view-controls { margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.status-btn { display: block; padding: 10px; border-radius: 8px; margin-bottom: 6px; color: #fff; font-weight: 600; cursor: pointer; }
.status-bon { background: var(--ok); }
.status-controler { background: var(--warn); }
.status-mauvais { background: var(--bad); }
.status-nonvisible { background: var(--grey); }
.checklist-group { border: none; padding: 0; margin-bottom: 14px; }
.checklist-group label { display: block; margin-bottom: 4px; }
textarea { width: 100%; border-radius: 8px; border: 1px solid var(--line-strong); padding: 8px; }

.grid-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.grid-tile img { width: 100%; border-radius: 6px; background: var(--head-2); }
.image-missing-small { background: var(--head-2); color: var(--head-muted); height: 180px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }

/* ============================================================ Circuit */
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; font-size: 15px; margin-bottom: 4px; }
.circuit-head { margin-bottom: 14px; }
.circuit-head h1 { margin: 0 0 4px; }
.circuit-head p { margin: 0; font-size: 14px; color: var(--muted); }
.circuit-map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.circuit-map-card .map-toolbar { position: relative; }
.circuit-progress { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.circuit-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.circuit-progress-top strong { font-size: 15px; }
.circuit-progress-top span { font-size: 13px; color: var(--muted); }
.map-note { font-size: 12px; color: var(--muted); margin: 0; }
.resume-button { display: flex; min-height: 52px; width: 100%; margin: 0 0 12px; font-size: 16px; border-radius: var(--radius); text-decoration: none; }

.stop-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.stop { border-bottom: 1px solid var(--line-soft); }
.stop:last-child { border-bottom: 0; }
.stop-row { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 14px; }
.stop-num {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--ink);
}
.stop.is-done .stop-num { background: var(--ok); color: #fff; }
.stop.is-next .stop-num { background: var(--accent); color: #fff; }
.stop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; padding: 4px 0; }
.stop-main .pole-num { font-size: 14px; }
.stop-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-reason { font-size: 12px; color: var(--ok); }
.stop-icon {
    width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); border-radius: 8px; text-decoration: none;
}
.stop-icon:hover { background: var(--accent-soft); }
.stop-icon { border: 0; background: none; margin: 0; padding: 0; min-height: 44px; }
.stop-icon[aria-expanded="true"] { background: var(--accent-soft); }
.stop-panel[hidden] { display: none; }
.stop-panel { padding: 4px 14px 14px 52px; display: flex; flex-direction: column; gap: 8px; }
.stop-panel form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.stop-panel select, .stop-panel input[type=text] {
    min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); width: 100%;
}
.stop-panel .btn-small, .stop-panel button { margin: 0; min-height: 44px; }
.stop-panel-links { display: flex; flex-wrap: wrap; gap: 8px; }
.stop-panel-links > * { flex: 1 1 auto; }
.stop-panel-links form { flex: 1 1 auto; }
.stop-panel-links form button { width: 100%; }
.tools-list { display: flex; flex-direction: column; gap: 8px; }
.tools-list form { margin: 0; }
.tools-list .btn-small, .tools-list button { width: 100%; margin: 0; min-height: 44px; justify-content: flex-start; }

/* Carte metier circuit (marqueurs numerotes + popup riche) */
.circuit-marker {
    width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px;
    font-family: var(--mono); display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.circuit-marker.is-done { opacity: 0.4; }
.circuit-popup { font-family: var(--font); font-size: 13px; line-height: 1.5; min-width: 220px; }
.popup-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.popup-actions select, .popup-actions input { min-height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px; }
.badge-done { background: var(--ok); }
.badge-todo { background: var(--warn); }

/* ------------------------------------------------- Cartes : taille + plein ecran */
.map-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.circuit-map-card .map-toolbar { position: absolute; top: 10px; right: 10px; z-index: 500; margin: 0; }
.circuit-map-wrap { position: relative; }
#map-fullscreen-btn { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.25); margin: 0; }

/* Desktop : hauteur de base — sans cette regle le conteneur Leaflet reste a 0px
   de haut (invisible) des qu'aucune media query mobile ne s'applique. */
#circuit-map:not(.map-fullscreen) { height: 50vh; min-height: 320px; }

@media (max-width: 768px) and (orientation: portrait) {
    #circuit-map:not(.map-fullscreen) { height: 34vh; min-height: 220px; }
}
@media (max-width: 900px) and (orientation: landscape) {
    #circuit-map:not(.map-fullscreen) { height: 70vh; min-height: 220px; }
}

/* Plein ecran : tous formats/tailles, iOS + Android */
#circuit-map.map-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; /* repli si dvh non supporte */
    min-height: 0; border-radius: 0; z-index: 9999;
}
@supports (height: 100dvh) {
    #circuit-map.map-fullscreen { height: 100dvh; }
}
.map-toolbar.map-toolbar-fullscreen,
.circuit-map-card .map-toolbar.map-toolbar-fullscreen {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    z-index: 10000;
    margin: 0;
}
body.map-fullscreen-lock { overflow: hidden; }

/* -------------------------------------- Mini-carte recap circuits (page /circuits) */
#circuits-overview-map:not(.map-fullscreen) { height: 320px; min-height: 240px; border-radius: 8px; }
#circuits-overview-map.map-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; min-height: 0; border-radius: 0; z-index: 9999;
}
@supports (height: 100dvh) {
    #circuits-overview-map.map-fullscreen { height: 100dvh; }
}

/* Bandeau d'installation PWA (templates/_pwa_install.html) */
.pwa-install[hidden], .pwa-install [hidden] { display: none !important; }
.pwa-install {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2000; display: flex; align-items: center; gap: 10px;
    background: var(--head); color: #fff; padding: 12px 14px; border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3); font-size: 14px;
}
.pwa-install span { flex: 1; }
.pwa-install #pwa-install-close { background: none; color: #fff; border: none; font-size: 18px; }

/* ------------------------------------------------------------ Photos terrain */
.photos-card { margin: 14px 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.photos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.photos-title { font-weight: 600; }
.photos-sync { font-size: 13px; color: var(--muted); }
.photos-sync.is-ok { color: var(--ok); }
.photos-sync.is-error, .photos-status.is-error { color: var(--bad); }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0; }
.photos-grid:empty { display: none; }
button.photo-tile { position: relative; aspect-ratio: 1; padding: 0; margin: 0; min-height: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-badge { position: absolute; right: 4px; bottom: 4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--grey); }
.photo-badge.is-sent { background: var(--ok); }
.photo-badge.is-error { background: var(--bad); }
.photo-nogps { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; color: #fff; background: rgba(161, 29, 29, 0.85); }
.btn-photo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; cursor: pointer; }
.btn-photo:active { background: #D9E3EE; }
.btn-photo.is-busy { opacity: 0.6; pointer-events: none; }
.photos-status { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.photo-viewer { padding: 0; border: 0; width: min(96vw, 900px); max-width: 96vw; border-radius: var(--radius); background: #111; color: #fff; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, 0.75); }
.photo-viewer img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
.pv-meta { padding: 10px 14px; font-size: 14px; color: #D5DBE0; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.pv-actions .btn-small, .pv-actions button { margin: 0; min-height: 44px; }

@media (max-width: 900px) {
    .inspect-grid { grid-template-columns: 1fr; }
    .grid-views { grid-template-columns: repeat(2, 1fr); }
    .stats-row { flex-wrap: wrap; }
    .stat-card { flex: 1 1 40%; padding: 10px 12px; }
}

/* ==================================================================== Mobile */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    body.has-bottom-nav { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    main { padding: 14px 16px; }
    h1 { font-size: 22px; }

    /* En-tete : projet + initiales ; le menu complet vit dans la feuille « Plus » */
    .topbar { padding: 0 16px; gap: 12px; min-height: 60px; }
    .topbar-row { flex: 1; justify-content: space-between; }
    .team-avatar { display: flex; }
    .topbar nav {
        display: none;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
        flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
        background: var(--surface); color: var(--ink);
        border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(22,32,43,0.25);
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
        max-height: 80vh; overflow-y: auto;
    }
    .topbar nav.open { display: flex; }
    .more-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; font-size: 16px; }
    .more-sheet-head button { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: var(--ink); }
    .topbar nav a, .topbar nav .nav-link-button {
        display: flex; align-items: center; min-height: 48px; padding: 0 4px; margin: 0;
        border-bottom: 1px solid var(--line-soft); font-size: 16px; color: var(--ink); text-decoration: none; width: 100%; text-align: left;
    }
    .topbar nav .nav-meta { color: var(--muted); font-size: 13px; padding: 8px 4px; }
    .topbar nav form { display: block; }
    .topbar nav .nav-link-button { color: var(--bad); border-bottom: 0; }
    .nav-primary { display: none !important; }
    .sheet-backdrop { position: fixed; inset: 0; background: rgba(22,32,43,0.4); z-index: 2500; }
    .sheet-backdrop[hidden] { display: none; }

    .bottom-nav {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface); border-top: 1px solid var(--line);
    }
    .bottom-nav a, .bottom-nav button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--muted); font-size: 12px; text-decoration: none; background: none; border: 0; margin: 0; padding: 0;
        border-radius: 0; min-height: 0;
    }
    .bottom-nav [aria-current="page"] { color: var(--accent); font-weight: 600; }
    .pwa-install { bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom)); }

    /* Cartes statistiques : 2 par ligne max */
    .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 12px; text-align: center; }
    .stat-value { font-size: 20px; }

    .primary-actions { flex-direction: column; }
    .primary-actions form, .primary-actions .btn-primary { width: 100%; }
    .primary-actions button, .primary-actions > a.btn-primary { width: 100%; text-align: center; }

    .filters-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .filters-row select, .filters-row input { width: 100%; min-height: 44px; }
    .filters-row button, .filters-row a { width: 100%; text-align: center; margin: 0; }
    .btn-small, button { min-height: 44px; }

    /* Liste poteaux : tableau desktop masque, liste compacte a la place */
    .poles-table-desktop { display: none; }
    .poles-cards-mobile { display: block; }
    .page-head { display: none; }

    /* Fiche poteau : image bord a bord, barre Valider collee en bas */
    body.page-inspect main { padding: 0; }
    body.page-inspect.has-bottom-nav { padding-bottom: 0; }
    body.page-inspect .flash-container { margin: 12px 16px 0; }
    body.page-inspect .topbar { display: none; }
    .inspect-head {
        position: sticky; top: 0; z-index: 20; margin: 0; min-height: 56px; padding: 0 6px;
        background: var(--head); color: #fff;
    }
    .inspect-head a { color: #fff; }
    .inspect-head a:hover { background: var(--head-2); }
    .inspect-grid { gap: 0; }
    .image-zone, .inspection-zone { border: 0; border-radius: 0; }
    .image-zone { border-bottom: 1px solid var(--line); }
    .inspection-zone { background: transparent; }
    .validate-bar { margin-top: 16px; border-radius: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .view-more-panel { padding: 12px 16px; }
    .state-tile kbd { display: none; }

    /* Circuit */
    .circuit-popup { min-width: 0; max-width: 62vw; }
    .popup-actions { flex-direction: column; }
    .popup-actions a, .popup-actions button, .popup-actions select, .popup-actions input { width: 100%; text-align: center; }
}

@media (min-width: 769px) {
    .sheet-backdrop { display: none !important; }
    .inspect-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 6px; }
    .inspection-zone { position: sticky; top: 76px; }
}

/* Leaflet colore tous les liens des popups : on retablit nos boutons */
.leaflet-container { font-family: var(--font); }
.leaflet-container a.btn-primary { color: #fff; }
.leaflet-container a.btn-small { color: var(--ink); }

/* Photos V2 : avant/apres, minimum par poteau, n° de poteau */
.photo-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 16px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #E8750A; color: #fff; font-size: 15px; line-height: 1.35; box-shadow: 0 2px 8px rgba(176, 78, 6, 0.25); }
.photo-alert[hidden] { display: none; }
.photo-alert-text { flex: 1 1 220px; }
.photo-alert-next { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.photos-counter { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--warn); }
.photos-counter.is-complete { color: var(--ok); }
.photo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.btn-photo.is-apres { background: #E3F1E9; color: var(--ok); }
.btn-photo.is-apres:active { background: #CFE6D8; }
.btn-photo.is-import { min-height: 44px; border-style: solid; background: var(--surface); font-weight: 500; font-size: 14px; }
.pole-gps { margin: 6px 16px 0; font-size: 13px; color: var(--muted); }
.pole-gps a { font-family: var(--mono, monospace); }
.gps-far, .photo-far { color: var(--bad); font-weight: 600; }
.photo-far { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; color: #fff; background: rgba(161, 29, 29, 0.85); }
.photo-nogps-text { font-size: 12px; color: var(--muted); }
.photo-kind { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(30, 58, 95, 0.9); }
.photo-kind.is-apres { background: rgba(31, 122, 77, 0.9); }
.pole-number-edit { margin: 8px 16px 0; }
.pole-number-warning { margin: 8px 16px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #FDEBD9; color: #7A3304; border: 1px solid #F2C79E; font-size: 14px; }
.pole-number-dialog { border: 0; border-radius: var(--radius); padding: 18px; width: min(92vw, 420px); }
.pole-number-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.pole-number-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.pn-help { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.pn-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.pn-field input { font-size: 18px; padding: 10px; font-family: var(--mono); }
.pn-error { margin: 8px 0 0; color: var(--bad); font-size: 14px; }
.pn-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.photo-count { font-size: 12px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.photo-count.is-complete { color: var(--ok); }
.stop-photos-warn { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: #E8750A; color: #fff; font-size: 12px; font-weight: 600; }
.popup-photos-warn { color: var(--warn); font-weight: 700; }

/* Instance de test (POTEAUX_ENV_BANNER) : impossible a confondre avec la prod. */
.env-banner {
    padding: 6px 12px; text-align: center;
    background: #B42318; color: #FFFFFF;
    font-weight: 700; letter-spacing: .08em; font-size: .85rem;
}