/* TrailAdapt — Bauhaus component overrides Bootstrap
 * Source : 03-UI-SPEC.md §Component Inventory lignes 261-278, §States lignes 274-278.
 * Override `.btn`, `.btn-primary`, `.form-control`, `.form-label`, `.form-text`, `.alert`, `.page-title`.
 */

/* === .page-title (UI-SPEC ligne 262) === */
.page-title {
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    font-size: 1.25rem;       /* 20px */
    line-height: 1.2;
    color: var(--bauhaus-noir);
    border-bottom: 1px solid var(--bauhaus-light-grey);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* === .btn (UI-SPEC §Typography ligne 125, ligne 131 + §Component Inventory ligne 265) === */
.btn {
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    font-size: 0.75rem;        /* 12px */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 20px;
}

.btn:focus,
.btn:active {
    box-shadow: none;
}

/* === .btn-primary (UI-SPEC §Color ligne 174 + §States ligne 278) === */
.btn-primary {
    background-color: var(--bauhaus-vermillon);
    border-color: var(--bauhaus-vermillon);
    color: var(--bauhaus-blanc);
}

.btn-primary:hover {
    background-color: var(--bauhaus-vermillon-dark);
    border-color: var(--bauhaus-vermillon-dark);
    color: var(--bauhaus-blanc);
}

.btn-primary:active,
.btn-primary:focus {
    background-color: var(--bauhaus-vermillon-deep);
    border-color: var(--bauhaus-vermillon-deep);
    color: var(--bauhaus-blanc);
}

/* === .btn-outline-dark Bauhaus override (UI-REVIEW WARNING #3) ===
 * Override du focus ring Bootstrap natif (bleu) → vermillon — cohérent avec
 * le reste du système Bauhaus (form-control, btn-primary). Utilisé par les
 * boutons "Annuler" form annotation + "Éditer" popup annotation. */
.btn-outline-dark {
    border-color: var(--bauhaus-near-black);
    color: var(--bauhaus-near-black);
    background-color: var(--bauhaus-blanc);
    border-radius: 0;
    box-shadow: none;
}

.btn-outline-dark:hover {
    background-color: var(--bauhaus-near-black);
    border-color: var(--bauhaus-near-black);
    color: var(--bauhaus-blanc);
}

.btn-outline-dark:active,
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible {
    background-color: var(--bauhaus-near-black);
    border-color: var(--bauhaus-vermillon);
    color: var(--bauhaus-blanc);
    box-shadow: 0 0 0 2px var(--bauhaus-vermillon);
    outline: none;
}

/* === .form-control (UI-SPEC §Component Inventory ligne 264 + §States lignes 276-277) === */
.form-control {
    font-family: var(--bauhaus-font-body);
    font-weight: 400;
    font-size: 14px;
    border: 1px solid var(--bauhaus-light-grey);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 12px;
    color: var(--bauhaus-noir);
    background-color: var(--bauhaus-blanc);
}

.form-control:focus {
    border-color: var(--bauhaus-vermillon);
    box-shadow: none;
    outline: none;
}

.form-control.is-invalid {
    border-color: var(--bauhaus-vermillon-dark);
}

/* Accessibilité touch — UI-SPEC §Component Inventory ligne 267 + §Spacing ligne 113 */
.form-control[type="file"] {
    min-height: 44px;
}

/* === .form-label (UI-SPEC §Typography ligne 123 + ligne 130) === */
.form-label {
    font-family: var(--bauhaus-font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--bauhaus-noir);
    margin-bottom: var(--space-sm);
}

/* === .form-text (UI-SPEC §Component Inventory ligne 266) === */
.form-text,
.form-text.text-muted {
    color: var(--bauhaus-mid-grey);
    font-size: 14px;
}

/* === .alert (UI-SPEC §Component Inventory ligne 263 + §States lignes 274-275) === */
.alert {
    font-family: var(--bauhaus-font-body);
    border: 1px solid var(--bauhaus-light-grey);
    border-left-width: 3px;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--bauhaus-blanc);
    color: var(--bauhaus-noir);
    padding: var(--space-md);
}

.alert-success {
    border-left-color: var(--bauhaus-near-black);
    background-color: var(--bauhaus-blanc);
    color: var(--bauhaus-noir);
}

/* WARN-07 fix : square Bauhaus vermillon avant le texte success — différencie
 * visuellement de alert-danger (border-left vermillon) et alert info hypothétique,
 * sans casser la neutralité Bauhaus du fond/texte. Bauhaus = formes géométriques
 * primaires (carré + cercle + triangle) — ici un carré 8px aligné baseline. */
.alert-success::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--bauhaus-vermillon);
    margin-right: var(--space-sm);
    vertical-align: baseline;
}

.alert-danger {
    border-left-color: var(--bauhaus-vermillon);
    background-color: var(--bauhaus-blanc);
    color: var(--bauhaus-vermillon-dark);
}

/* === P4 ingestion-videos rules (relocated from trailadapt/static/) === */
/* TrailAdapt — components.css
 *
 * Bauhaus design system — overrides Bootstrap + composants custom.
 * Inherited projet-wide depuis Phase 3 (P3 03-UI-SPEC).
 *
 * P4 plan 04-08 (Wave 6) ajoute :
 *   - .section-title (UI-SECTION-TITLES, h2 sub-section uppercase Jost)
 *   - .unplaced-panel + .unplaced-* (UNPLACED-02, panel "À placer (N)")
 *
 * Ne suppose pas que ce fichier existait avant P4 — créé directement par
 * plan 04-08. Les règles Bauhaus de base (.btn-primary, .form-control, etc.)
 * sont héritées de Bootstrap CDN + tokens.css (séparation 3 fichiers UI-SPEC).
 *
 * Tokens utilisés (définis dans tokens.css) :
 *   --bauhaus-font-display, --bauhaus-font-body
 *   --bauhaus-blanc, --bauhaus-off-white, --bauhaus-noir,
 *   --bauhaus-mid-grey, --bauhaus-light-grey
 *   --space-xs, --space-sm, --space-md, --space-lg
 */

/* ============================================================
 * P4 plan 04-08 — UI-SECTION-TITLES (h2 sub-section)
 * ============================================================
 * Hiérarchie page upload :
 *   h1 .page-title (project.name, noir)
 *     h2 .section-title (Pseudonyme / Trace GPX / Photo / Vidéo / À placer)
 *
 * Justification (cf 04-UI-SPEC §Component Inventory §1) :
 *   - Famille Jost (cohérence avec h1 et .btn du système Bauhaus).
 *   - letter-spacing 0.08em (légèrement plus large que .btn 0.06em).
 *   - color mid-grey (h1 reste fort, h2 plus discret).
 *   - Pas de border-bottom (h1 garde l'unique border).
 */
.section-title {
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    font-size: 0.875rem;          /* 14px */
    line-height: 1.2;
    color: var(--bauhaus-mid-grey);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--space-lg) 0 var(--space-sm) 0;
}

/* ============================================================
 * P4 plan 04-08 — UNPLACED-02 panel "À placer (N)"
 * ============================================================
 * Conditionnel server-side : section absente du DOM si N=0.
 *   <details open> natif HTML pour repli/déploiement (pas de JS, CSP-friendly).
 *   ASCII markers ▾/▸ (pas d'icône Bootstrap Icons — neutralité Bauhaus).
 */
.unplaced-panel {
    background-color: var(--bauhaus-off-white);
    border: 1px solid var(--bauhaus-light-grey);
    padding: var(--space-md);
}

.unplaced-toggle {
    font-family: var(--bauhaus-font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--bauhaus-noir);
    cursor: pointer;
    list-style: none;            /* hide default details marker */
    padding: var(--space-xs) 0;
}

.unplaced-toggle::-webkit-details-marker {
    display: none;
}

/* WARN-06 fix : marker dans un <span aria-hidden="true"> (pas en ::before
 * sur summary), sinon JAWS/NVDA annoncent "triangle pointing down Vidéos
 * et photos...". Avec aria-hidden, screen-readers sautent le marker et
 * lisent uniquement le texte sémantique du summary. */
.unplaced-toggle-marker {
    display: inline-block;
    margin-right: var(--space-xs);
}

.unplaced-toggle-marker::before {
    content: "▾";                /* ouvert par défaut */
}

.unplaced-panel details:not([open]) .unplaced-toggle-marker::before {
    content: "▸";
}

.unplaced-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.unplaced-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    background-color: var(--bauhaus-blanc);
    border: 1px solid var(--bauhaus-light-grey);
}

.unplaced-thumb {
    /* Box 48x64 + object-fit: contain → préserve l'aspect ratio natif (portrait
     * Samsung ≈ 1080x1920 affiché en portrait, paysage GoPro affiché letterboxé).
     * Avant : 64x64 + cover → crop carré, masquait l'orientation et la
     * miniature paraissait fausse côté UAT P4 (en plus du bug rotation poster). */
    width: 48px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    background-color: var(--bauhaus-light-grey);
}

.unplaced-thumb-placeholder {
    /* Pattern Bauhaus typique pour les médias sans aperçu (vidéo dont
     * poster a échoué, photo en cours, etc.). Aucune dépendance image.
     * Hérite des dimensions 48x64 de .unplaced-thumb. */
    width: 48px;
    height: 64px;
    flex-shrink: 0;
    background: repeating-linear-gradient(
        45deg,
        var(--bauhaus-light-grey),
        var(--bauhaus-light-grey) 4px,
        var(--bauhaus-off-white) 4px,
        var(--bauhaus-off-white) 8px
    );
}

.unplaced-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.unplaced-name {
    font-family: var(--bauhaus-font-body);
    font-size: 14px;
    color: var(--bauhaus-noir);
    /* WARN-05 fix : break-word respecte les délimiteurs naturels (_, -, .)
     * au lieu de couper au caractère comme break-all. Pertinent maintenant
     * que .unplaced-name affiche "Vidéo #N" (court) ou un nom de fichier
     * (futur P5) plutôt que l'UUID interne. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.unplaced-sub {
    font-family: var(--bauhaus-font-body);
    font-size: 12px;
    color: var(--bauhaus-mid-grey);
    margin-top: var(--space-xs);
}

/* =====================================================================
   P10 BUILD-* — Construction du tracé adapté
   Tokens-first : 0 hex hardcoded (verrou test_no_hex_hardcode_in_bauhaus_blocks).
   0 utilisation de --bauhaus-success-green (reserved-for placement_status=manual P5).
   Source : 10-UI-SPEC §CSS Classes Nouvelles + §Color + §Spacing.
   ===================================================================== */

/* C1 — Bouton inline tracks-panel */
.ta-adapted-build-btn {
    min-height: 32px;
}
@media (max-width: 767.98px) {
    .ta-adapted-build-btn { min-height: 44px; }
}

/* C2 — Offcanvas Construction
 * P11 hotfix UAT 1 (2026-05-07) : top:56px + height:calc(100vh - 56px) pour
 * s'aligner sur la grille toolbar 56px (cf map.css `.ta-panel-left/right`).
 * Évite l'occlusion du bouton ✏️ Mode édition pendant que le mode source P10
 * est actif. Workaround UAT-validé "fermer la croix" devient inutile.
 * Sélecteur double-class pour battre `.offcanvas-end { top: 0 }` Bootstrap. */
.offcanvas.ta-build-offcanvas {
    top: 56px;
    height: calc(100vh - 56px);
}
.ta-build-offcanvas .offcanvas-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--bauhaus-light-grey);
}
.ta-build-header-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.ta-build-header-meta {
    color: var(--bauhaus-mid-grey);
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}
.ta-build-offcanvas .offcanvas-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Toggles mutex modes (mutex via aria-pressed côté JS) */
.ta-build-mode-toggles {
    display: flex;
    gap: var(--space-sm);
}
.ta-build-mode-btn {
    flex: 1;
    min-height: 36px;
    border: 1px solid var(--bauhaus-mid-grey);
    background: var(--bauhaus-blanc);
    color: var(--bauhaus-mid-grey);
}
@media (max-width: 767.98px) {
    .ta-build-mode-btn { min-height: 44px; }
}
.ta-build-mode-btn[aria-pressed="true"] {
    border-color: var(--bauhaus-vermillon);
    background: var(--bauhaus-off-white);
    color: var(--bauhaus-vermillon);
}

/* Zone idle */
.ta-build-idle-zone {
    padding: var(--space-sm);
}
.ta-build-idle-hint {
    color: var(--bauhaus-mid-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* Zone source */
.ta-build-source-zone {
    padding-top: var(--space-sm);
}
.ta-build-source-instruction {
    color: var(--bauhaus-mid-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}
.ta-build-source-instruction--step2 {
    color: var(--bauhaus-vermillon);
}

/* Zone pen */
.ta-build-pen-zone {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.ta-build-pen-counter {
    font-size: 12px;
    font-weight: 400;
    color: var(--bauhaus-mid-grey);
    margin: 0;
}
.ta-build-pen-counter--warning {
    color: var(--bauhaus-warning-orange);
}
.ta-build-pen-list {
    list-style: none;
    padding: var(--space-sm);
    margin: 0;
    background: var(--bauhaus-off-white);
    font-size: 12px;
    font-weight: 400;
    color: var(--bauhaus-mid-grey);
    max-height: 240px;
    overflow-y: auto;
}
.ta-build-pen-list li {
    padding: var(--space-xs) 0;
}
.ta-build-pen-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.ta-build-pen-actions button {
    min-height: 36px;
}
@media (max-width: 767.98px) {
    .ta-build-pen-actions button { min-height: 44px; }
    /* P10 ui-review BLOCKER #1 hotfix mobile (Apple HIG 44pt). */
    .ta-segment-panel-actions button { min-height: 44px; }
}

/* C3 — Panel flottant Début/Fin (segment-panel) */
.ta-segment-panel {
    max-height: 40vh;
}
.ta-segment-panel-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.ta-segment-panel-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.ta-segment-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px; /* touch target a11y mobile */
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}
.ta-segment-panel-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}
/* P10 ui-review BLOCKER #1 hotfix : touch target Apple HIG 44pt mobile + 36px desktop
   sur les boutons Annuler/Valider du panel BUILD-04 (UI-SPEC §Spacing l.108 verbatim). */
.ta-segment-panel-actions button {
    min-height: 36px;
}

/* C5 — Pen markers (L.divIcon CSS) — exception border-radius 50% pour cercle géométrique */
.ta-pen-marker {
    width: 20px;
    height: 20px;
    background-color: var(--bauhaus-vermillon);
    border-radius: 50%; /* exception circular marker — pas radius layout */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ta-pen-marker-num {
    color: var(--bauhaus-blanc);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

/* C6 — Flash segment placeholder (transition runtime via JS — voir helpers.js flashSegment) */
.ta-flash-segment {
    /* Intentionnellement vide — la transition est appliquée via element.style.transition
       dans helpers.js flashSegment (CSP-clean, pas @keyframes inline). */
}

/* C7 — Toast conflict (vermillon-deep border) */
.ta-toast--conflict {
    border-left: 4px solid var(--bauhaus-vermillon-deep);
}
.ta-toast-reload-btn {
    padding: var(--space-xs) var(--space-sm);
}

/* Empty state hint (Etat B tracks-panel — pas d'AdaptedTrack encore créé) */
.ta-adapted-empty-hint {
    color: var(--bauhaus-mid-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 var(--space-sm) 0;
}

/* ============================================================================
   P11 EDIT-01..09 — Mode édition vertex AdaptedTrack (Wave 3 Task 3)
   Calque .ta-build-* P10 (panel) + .ta-segment-* P10 (boutons).
   Tokens-first Bauhaus (0 hex hardcode, var(--bauhaus-*) only).
   No border-radius, no box-shadow (verrous P3 Bauhaus).
   ============================================================================ */

.ta-adapted-edit-panel {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040; /* au-dessus de la carte Leaflet (z-index 400 par défaut), sous modals (1050) */
    padding: var(--space-sm);
    background: var(--bauhaus-blanc);
    border: 1px solid var(--bauhaus-near-black);
    /* Bauhaus no-radius no-shadow */
}
.ta-adapted-edit-panel[hidden] {
    display: none !important; /* defense AUDIT F7 P8 */
}

.ta-adapted-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: stretch;
}

.ta-adapted-edit-btn {
    flex: 1 1 auto;
    min-height: 44px; /* touch target — verrou D-UIR-01 P10 */
    border-radius: 0; /* Bauhaus no-radius */
    font-family: var(--bauhaus-font-display);
}

/* P11 UI-REVIEW hotfix top-fix #2 — restauration BEM `.ta-adapted-edit-btn--active`
   (UI-SPEC §C2). Bootstrap `.btn.active` rendait fond gris foncé (pas de feedback
   vermillon "outil actif"). Spec : fond off-white + bordure/texte vermillon. */
.ta-adapted-edit-btn--active,
.ta-adapted-edit-btn.active {
    background: var(--bauhaus-off-white);
    border-color: var(--bauhaus-vermillon);
    color: var(--bauhaus-vermillon);
}

/* P11 EDIT-08 D11-07 — Override CSS vertices Geoman ≥16px desktop, tokens-first.
   Default Geoman vertex icon est 12px → trop petit pour drag précis sur écran touch
   (Apple HIG 44pt raté + WCAG 2.5.5). Bauhaus no-radius (square handles). */
.leaflet-pm-vertex-icon {
    min-width: 16px;
    min-height: 16px;
    background: var(--bauhaus-blanc);
    border: 2px solid var(--bauhaus-near-black);
    border-radius: 0; /* Bauhaus no-radius */
}
.leaflet-pm-vertex-icon:hover {
    background: var(--bauhaus-off-white);
    border-color: var(--bauhaus-vermillon);
}

/* P11 EDIT-07 — Modal Simplifier slider + preview live.
   Slider HTML5 type=range natif Bootstrap (.form-range) — accent-color override
   pour aligner avec palette Bauhaus vermillon. */
.ta-simplify-slider {
    width: 100%;
    accent-color: var(--bauhaus-vermillon);
}

.ta-simplify-preview {
    font-family: var(--bauhaus-font-body);
    font-size: 12px;
    color: var(--bauhaus-mid-grey);
}

/* === P15 plan 15-05 — Modal reutilisable + bouton danger Bauhaus tokens-first === */

/* Verrou P3 reserved-for : warning-orange deja alloue annotation "verifier".
   P15 ajoute usage acceptable .ta-btn-danger (semantique "danger/attention").
   tokens-first : 0 hex hardcode, var(--bauhaus-*) uniquement (verrou test_no_hex_hardcode). */
.ta-btn-danger {
    background-color: var(--bauhaus-warning-orange);
    color: var(--bauhaus-blanc);
    border: none;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    font-family: var(--bauhaus-font-body);
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.ta-btn-danger:hover,
.ta-btn-danger:focus {
    background-color: var(--bauhaus-vermillon-dark);
    color: var(--bauhaus-blanc);
}
.ta-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal confirm content override — Bauhaus 0 radius. */
.ta-confirm-content {
    border-radius: 0;
    border: 1px solid var(--bauhaus-near-black);
}

/* === P15 plan 15-06 — Admin console layout (UI-SPEC §Screen A) === */
/* Tokens-first Bauhaus : 0 hex hardcode dans .ta-admin-* / .ta-contributors /
 * .ta-btn-export — tout passe par var(--bauhaus-*) (verrou
 * test_admin_css_no_hex_hardcode_in_ta_admin_blocks). */

.ta-admin-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bauhaus-noir);
    color: var(--bauhaus-blanc);
}
.ta-header-back {
    color: var(--bauhaus-blanc);
    text-decoration: none;
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-sm);
}
.ta-header-back:hover,
.ta-header-back:focus {
    color: var(--bauhaus-vermillon);
}
.ta-admin-header-title {
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--bauhaus-blanc);
}

.ta-admin-console {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-lg);
    background-color: var(--bauhaus-blanc);
}
.ta-admin-page-title {
    font-family: var(--bauhaus-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--bauhaus-noir);
    margin-bottom: var(--space-xl);
}
.ta-admin-section {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--bauhaus-light-grey);
}
.ta-admin-section .section-title {
    font-family: var(--bauhaus-font-display);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bauhaus-mid-grey);
    margin-bottom: var(--space-md);
}

.ta-admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    max-width: 480px;
}
.ta-admin-form label {
    font-size: 14px;
    color: var(--bauhaus-noir);
    font-family: var(--bauhaus-font-body);
}
.ta-admin-form input,
.ta-admin-form textarea {
    padding: var(--space-sm);
    border: 1px solid var(--bauhaus-light-grey);
    border-radius: 0;
    font-family: var(--bauhaus-font-body);
    font-size: 14px;
    color: var(--bauhaus-noir);
    background-color: var(--bauhaus-blanc);
}
.ta-admin-form input:focus,
.ta-admin-form textarea:focus {
    outline: 2px solid var(--bauhaus-vermillon);
    outline-offset: 0;
}
.ta-admin-form-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
.ta-admin-form-actions button {
    min-height: 44px;
    min-width: 44px;
}

/* P15 hotfix UAT-3 — visible feedback aria-live form status (Bauhaus tokens-first). */
/* Auparavant class="visually-hidden" → screen-reader-only, mais aucun retour visuel */
/* pour l'admin après POST 200. UAT scénario 2 a confirmé : DB updated, 0 feedback UI. */
.ta-admin-form-status {
    font-family: var(--bauhaus-font-body);
    font-size: 13px;
    color: var(--bauhaus-noir);
    padding: var(--space-xs) 0;
    min-height: 1.4em;
}
.ta-admin-form-status:empty {
    display: none;
}

.ta-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--bauhaus-off-white);
    margin-bottom: var(--space-md);
    font-family: var(--bauhaus-font-body);
    font-size: 14px;
    color: var(--bauhaus-noir);
}

.ta-contributors {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bauhaus-font-body);
}
.ta-contributors thead th {
    font-family: var(--bauhaus-font-display);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bauhaus-mid-grey);
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--bauhaus-light-grey);
}
.ta-contributors tbody td {
    padding: var(--space-sm);
    font-size: 14px;
    color: var(--bauhaus-noir);
    border-bottom: 1px solid var(--bauhaus-light-grey);
}
.ta-contributors tbody tr:nth-child(even) {
    background-color: var(--bauhaus-off-white);
}

.ta-admin-badge {
    display: inline-block;
    padding: 2px 6px;
    background-color: var(--bauhaus-near-black);
    color: var(--bauhaus-blanc);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ta-empty-state {
    color: var(--bauhaus-mid-grey);
    font-style: italic;
    font-family: var(--bauhaus-font-body);
}

.ta-btn-export {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bauhaus-vermillon);
    color: var(--bauhaus-blanc);
    text-decoration: none;
    font-family: var(--bauhaus-font-display);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0;
}
.ta-btn-export:hover,
.ta-btn-export:focus {
    background-color: var(--bauhaus-vermillon-dark);
    color: var(--bauhaus-blanc);
}
.ta-btn-export--disabled {
    background-color: var(--bauhaus-mid-grey);
    pointer-events: none;
    opacity: 0.5;
}

.ta-admin-danger-zone {
    border-top: 1px solid var(--bauhaus-warning-orange);
}

/* === P15 plan 15-07 (REVERT-V10) — Bouton 🔙 Revert AdaptedTrack === */
/* Server-rendered partial _revert_button.html — host sibling au tracks-panel. */
/* Verrou tokens-first : 0 hex hardcode (tout via var(--bauhaus-*)). */
/* Verrou D-UIR-01 P10 : touch-target min 44×44 mobile WCAG 2.5.5. */

.ta-revert-btn-host {
    /* UAT-5 fix : positioned au-dessus du map, à droite du panel left. */
    /* Auparavant pas de grid-column/row → grid auto-placement le rangeait */
    /* en row 3 (hors viewport, sous le map). Position fixed au-dessus de */
    /* Leaflet (z-index 700) mais sous le header (1030) et sous Bootstrap */
    /* modals (1050). */
    position: fixed;
    top: 72px;
    left: 340px; /* décalé à droite des Leaflet zoom controls (+/-) à top-left du map */
    z-index: 800;
    padding: 0;
}

@media (max-width: 767.98px) {
    .ta-revert-btn-host {
        left: 60px; /* mobile : panel-left collapsed, espace pour zoom controls */
    }
}

.ta-revert-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--bauhaus-blanc);
    color: var(--bauhaus-noir);
    border: 1px solid var(--bauhaus-near-black);
    font-family: var(--bauhaus-font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ta-revert-btn:hover,
.ta-revert-btn:focus {
    background-color: var(--bauhaus-off-white);
}

.ta-revert-btn--disabled {
    color: var(--bauhaus-mid-grey);
    border-color: var(--bauhaus-light-grey);
    cursor: not-allowed;
    background-color: var(--bauhaus-off-white);
}

.ta-revert-btn--disabled:hover,
.ta-revert-btn--disabled:focus {
    background-color: var(--bauhaus-off-white);
}


/* === P15 plan 15-08 — Panel historique révisions (Req 9) === */
.ta-history {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--bauhaus-light-grey);
}
.ta-history-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0;
}
.ta-history-item {
    /* padding moved to .ta-history-item-btn (P19.1 plan 19.1-02 — li becomes transparent container) */
    font-size: 14px;
    color: var(--bauhaus-noir);
    border-bottom: 1px solid var(--bauhaus-off-white);
}
.ta-history-op {
    font-family: monospace;
    font-size: 12px;
    color: var(--bauhaus-mid-grey);
}
.ta-history-see-all {
    min-height: 44px;       /* verrou D-UIR-01 mobile WCAG 2.5.5 */
    margin-top: var(--space-sm);
}
.ta-history-modal-list {
    max-height: 70vh;
}

/* === P19.1 plan 19.1-02 — Items historique cliquables (.ta-history-item-btn) =========
 * Élément bouton natif wrappant les spans textContent (D-04 a11y — Enter/Space gratuit).
 * Verrous Bauhaus tokens-first : 0 hex hardcodé — tout via var(--bauhaus-*) / var(--space-*).
 * Verrou P10 D-UIR-01 : min-height 44px (WCAG 2.5.5 touch target mobile).
 * Verrou P11 D11 : aucun border-radius (Bauhaus no-radius).
 */
.ta-history-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-xs) 0;       /* hérité de .ta-history-item (padding déplacé ici) */
    min-height: 44px;                  /* WCAG 2.5.5 touch target — verrou D-UIR-01 */
    background: transparent;
    border: 1px solid transparent;
    color: var(--bauhaus-noir);
    font-size: 14px;
    font-family: var(--bauhaus-font-body);
    font-weight: 400;
    line-height: 1.6;                  /* UI-SPEC §59 body line-height — explicit vs <button> UA reset (UI-REVIEW #3) */
    cursor: pointer;
    border-radius: 0;                  /* Bauhaus no-radius */
    /* Bauhaus : 0 box-shadow (--bs-box-shadow: none global) */
}
.ta-history-item-btn:hover {
    background: var(--bauhaus-off-white);
    border-color: var(--bauhaus-light-grey);
}
.ta-history-item-btn:focus-visible {
    outline: 2px solid var(--bauhaus-vermillon);
    outline-offset: 2px;
}
.ta-history-item-btn:active {
    background: var(--bauhaus-light-grey);
}

/* === P15 plan 15-08 (Req 6) — Offcanvas Ajouter (.ta-upload-link) === */
/* .ta-header-add existe deja dans static/css/map.css P6 (44px Bauhaus tokens-first). */
/* Pas de duplication ici — verrou anti-double declaration. */
.ta-upload-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--bauhaus-noir);
    text-decoration: none;
    border: 1px solid var(--bauhaus-light-grey);
}
.ta-upload-link:hover,
.ta-upload-link:focus {
    background-color: var(--bauhaus-off-white);
}

/* === P16 Plan 16-08 (STAGING-04) — bandeau STAGING ===========================
 * Visible UNIQUEMENT en staging (context_processor `staging_flag` expose
 * settings.STAGING=True via .env staging — config/settings/staging.py).
 *
 * Verrous Bauhaus tokens-first (P3 + P7 D5) :
 *   - 0 hex hardcode — tout via var(--bauhaus-*)
 *   - --bauhaus-warning-orange reserved-for élargi annotation 'verify' + staging
 *   - 0 border-radius (Bauhaus, neutralisé via --bs-border-radius=0)
 *   - 0 box-shadow (Bauhaus, neutralisé via --bs-box-shadow=none)
 *
 * Position sticky top + z-index 9999 = au-dessus de TOUT (Bootstrap modal=1055,
 * offcanvas=1045, navbar=1030, Leaflet panes max=700). Le banner DOIT dominer
 * pour signaler clairement l'environnement non-prod.
 *
 * KEY verrou test : test_staging_banner_never_renders_in_prod (settings.STAGING=False
 * → ABSENT du HTML render — defense côté template ET côté context_processor). */
.ta-staging-banner {
    background: var(--bauhaus-warning-orange);
    color: var(--bauhaus-near-black);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-family: var(--bauhaus-font-display);
    /* Verrou P8 UI-SPEC §136 cap 2 weights Bauhaus (400/500) — pas de 700.
     * Le contraste warning-orange + near-black + text-transform uppercase +
     * letter-spacing suffit pour signaler visuellement le banner. */
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 2px solid var(--bauhaus-near-black);
}

/* `.ta-back-link` — composant partagé cross-template (landing, login_*, upload).
 * Déplacé depuis landing.css en P18 UI-REVIEW Option A : upload.html charge
 * components.css mais PAS landing.css → fallback Bootstrap btn-link rendait
 * vermillon (reserved-for CTA). min-height 44px = touch-target WCAG 2.5.5. */
.ta-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-md);
    font-family: var(--bauhaus-font-body);
    font-size: 14px;
    color: var(--bauhaus-mid-grey);
    text-decoration: none;
}

.ta-back-link:hover,
.ta-back-link:focus-visible {
    color: var(--bauhaus-noir);
    text-decoration: underline;
}

.ta-back-link:focus-visible {
    outline: 2px solid var(--bauhaus-vermillon);
    outline-offset: 2px;
}