/* ==========================================================================
   FLOTTILLE — theme.css
   Thème global (fond sombre + panneaux flous clairs), basé sur la DA v5
   validée en maquette. À charger dans base.html, APRÈS Bootstrap et APRÈS
   le <style> existant qui définit --nav-, --app-fond, --font-, pour que
   les valeurs ci-dessous les surchargent :

     <link href=".../bootstrap.min.css" rel="stylesheet">
     <style> ... variables existantes ... </style>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
     {% block styles %}{% endblock %}

   Portée de ce fichier (passe "socle") :
     1. Recolore les variables déjà utilisées par base.html (--nav-fond,
        --nav-accent, --app-fond...) → sidebar/topbar/fond changent tout
        de suite, partout, sans toucher au HTML de base.html.
     2. Neutralise/adapte les composants Bootstrap génériques (formulaires,
        tableaux, badges, alertes, boutons) pour qu'ils restent lisibles sur
        fond sombre — nécessaire même sur les pages pas encore migrées.
     3. Ajoute les classes composants du nouveau système (.panel, .panel-btn,
        .plate, .kpi-chip, .row-card...) à appliquer page par page, en
        commençant par la fiche véhicule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES — surcharge des tokens existants + nouveaux tokens
   -------------------------------------------------------------------------- */
:root {
    /* Fond app (utilisé par body dans le <style> existant de base.html) */
    --app-fond: #101C2D;

    /* Sidebar (mêmes noms de variables que l'existant — juste recolorés) */
    --nav-fond: #16243A;
    --nav-fond-survol: rgba(255,255,255,0.06);
    --nav-fond-actif: rgba(240,162,48,0.12);
    --nav-accent: #F0A230;
    --nav-texte: #AEC0D4;
    --nav-texte-actif: #FFFFFF;

    /* Échelle de gris ardoise (neutres) */
    --ink-950: #101C2D;
    --ink-900: #16243A;
    --ink-800: #1C2C44;
    --ink-700: #24374F;
    --ink-600: #324A66;
    --ink-400: #7590AC;
    --ink-200: #AEC0D4;
    --ink-100: #E4ECF4;

    /* Accent principal (interactif / marque) */
    --accent: #F0A230;
    --accent-fonce: #C98418;
    --accent-texte-sur: #101C2D; /* texte à utiliser sur un fond --accent plein */

    /* Familles sémantiques (bordures/icônes de section, badges) */
    --tps: #F0A93D;      /* temps / vigilance      — échéances            */
    --tps-fond: #241B0C;
    --hum: #4EA1E8;      /* humain / organisation  — conducteurs, résas   */
    --hum-fond: #101D2C;
    --inc: #FF4D55;      /* incidents              — sinistres, pannes    */
    --inc-fond: #251215;
    --arg: #22D68F;      /* argent                 — dépenses             */
    --arg-fond: #0E2118;
    --doc: #9AAEC2;      /* neutre / documentaire  — documents, contrats  */
    --doc-fond: #1C2C44;

    /* Panneau flou (le composant central de la DA) */
    --panel-fond: rgba(72, 98, 134, 0.85);
    --panel-bordure: rgba(255,255,255,0.18);
    --panel-bordure-haut: rgba(255,255,255,0.28);
    --panel-blur: 20px;

    /* Rayon / ombre standard */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --ombre-panel: 0 16px 32px -16px rgba(0,0,0,0.6);

    /* Couleur des motifs de grille technique (fond de page, plusieurs
       pages en ont une copie locale codée en dur — voir note plus bas) */
    --grille-ligne: rgba(255,255,255,0.03);

    /* Champs de formulaire et barres translucides (nav sticky...) —
       variables dédiées pour basculer proprement en thème clair */
    --champ-fond: rgba(16, 28, 45, 0.6);
    --champ-fond-focus: rgba(16, 28, 45, 0.8);
    --surface-fond: rgba(16, 28, 45, 0.75);

    /* Texte le plus contrasté (titres de panneau, valeurs KPI, en-têtes de
       tableau) — blanc pur en sombre, presque noir en clair */
    --texte-vif: #FFFFFF;

    /* Survol des bandeaux de section (panel-header) — légèrement plus clair
       que le panneau, neutre (jamais teinté par la famille de couleur) */
    --bandeau-survol: rgba(255,255,255,0.12);

    --voile-flou: 6px;
}

/* --------------------------------------------------------------------------
   1bis. THÈME CLAIR — activé via <html data-theme="clair">.
   -------------------------------------------------------------------------- */
/* Les panneaux (couleurs, textes, champs, bandeaux...) gardent exactement
   le même style que le mode sombre dans les deux thèmes — aucune variable
   de :root n'est redéfinie ici pour eux, elle est donc simplement héritée
   telle quelle. Seuls changent : le fond de page (gris-bleuté clair au
   lieu du dégradé sombre) et la couleur des traits de la grille technique
   (sombres sur fond clair, au lieu de blancs sur fond sombre). */
[data-theme="clair"] {
    --grille-ligne: rgba(20,35,55,0.06);
    --surface-fond: rgba(83, 108, 143, 0.75);
}
[data-theme="clair"] body {
    background: #95A9C3;
}
[data-theme="clair"] .app-sidebar {
    background: rgba(83, 108, 143, 0.75);
}


/* --------------------------------------------------------------------------
   2. BASE — fond, typo, sélection
   -------------------------------------------------------------------------- */
body {
    background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 55%, #0C1626 100%);
    background-attachment: fixed;
    color: var(--ink-100);
    overflow-x: hidden;
}

a { color: var(--accent); }
a:hover { color: var(--nav-texte-actif); }

::selection { background: var(--accent); color: var(--accent-texte-sur); }

/* Motif de grille technique très discret, réservé aux zones "hero"
   (à poser via la classe .grid-bg sur un conteneur, jamais sur un panneau) */
.grid-bg {
    background-image:
        linear-gradient(var(--grille-ligne) 1px, transparent 1px),
        linear-gradient(90deg, var(--grille-ligne) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Conteneur centré générique pour les pages liste migrées — évite de
   redéfinir un .fv/.xxx local à chaque page comme fait ponctuellement sur
   la fiche véhicule (#42/#43). */
.contenu-page { max-width: 1140px; margin: 0 auto 1.5rem; }

/* Quadrillage technique pleine page, fixé au viewport (position:fixed,
   inset:0) — indépendant de la hauteur de n'importe quel panneau, donc
   jamais affecté par le contenu (filtres qui réduisent un tableau, etc.).
   Générique à toute page utilisant .contenu-page (pages liste simples),
   pas posé sur <body> globalement pour ne pas affecter la fiche véhicule
   (qui garde sa propre grille confinée au hero, cf. vehicules/detail.html). */
body:has(.contenu-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--grille-ligne) 1px, transparent 1px),
        linear-gradient(90deg, var(--grille-ligne) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
    body:has(.contenu-page)::before { position: absolute; }
}



/* --------------------------------------------------------------------------
   3. SIDEBAR — la structure HTML existante (.app-sidebar, .app-nav-link...)
      n'a pas besoin de changer : elle est déjà pilotée par les variables
      --nav-*. On ajoute juste un flou et un fond translucide.
   -------------------------------------------------------------------------- */
.app-sidebar {
    background: rgba(22, 36, 58, 0.75);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
}

.app-nav-link.active {
    font-weight: 600;
}

.app-sidebar-deco {
    border-color: rgba(255,255,255,0.18) !important;
}


/* --------------------------------------------------------------------------
   4. PANNEAU (composant central) — à poser sur toute section/carte/bloc
      qui doit se détacher du fond. Enfants directs uniquement pour les
      bordures/bannières (cf. piège #42 sur les sélecteurs > ).
   -------------------------------------------------------------------------- */
.panel {
    position: relative;
    background: var(--panel-fond);
    backdrop-filter: blur(var(--panel-blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(130%);
    border: 1px solid var(--panel-bordure);
    border-top-color: var(--panel-bordure-haut);
    border-radius: var(--radius);
    box-shadow: var(--ombre-panel);
    overflow: hidden; /* clippe le liseré coloré du panel-header à l'arrondi du panneau */
}

/* Bannière d'en-tête de section — accent sémantique en bordure gauche.
   Usage : <div class="panel-header panel-header--temps"> */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.7rem;
    padding: 0.85rem 1.15rem 0.85rem 0.9rem;
    background: var(--bandeau-survol);
    border-left: 3px solid var(--doc);
    box-sizing: border-box;
}
.panel-header h2, .panel-header h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--texte-vif);
    letter-spacing: -0.01em;
    margin: 0;
}
/* Le bandeau suit l'arrondi du haut du panneau (comme .tdb-bloc-titre du dashboard) :
   le liseré coloré se courbe et s'affine vers la droite au lieu d'être coupé net. */
.panel > .panel-header:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
    border-top-right-radius: calc(var(--radius) - 1px);
}
.panel-header--temps  { border-left-color: var(--tps); }
.panel-header--humain { border-left-color: var(--hum); }
.panel-header--incident { border-left-color: var(--inc); }
.panel-header--argent { border-left-color: var(--arg); }

.panel-header-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    margin-right: 0.65rem;
    background: var(--doc-fond);
    color: var(--doc);
}
.panel-header--temps .panel-header-icone     { background: var(--tps-fond); color: var(--tps); }
.panel-header--humain .panel-header-icone    { background: var(--hum-fond); color: var(--hum); }
.panel-header--incident .panel-header-icone  { background: var(--inc-fond); color: var(--inc); }
.panel-header--argent .panel-header-icone    { background: var(--arg-fond); color: var(--arg); }

/* Corps de panneau (filtres, tableau, état vide) */
.panel-body {
    border-top: 1px solid rgba(255,255,255,0.10);
}
.panel-body + .panel-body { border-top: 1px solid rgba(255,255,255,0.08); }


/* --------------------------------------------------------------------------
   5. BOUTONS EN VERRE — actions de panneau (remplace les .btn Bootstrap
      dans les zones déjà migrées ; les .btn Bootstrap classiques ailleurs
      restent gérés par la section 8 ci-dessous en attendant la migration)
   -------------------------------------------------------------------------- */
.panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    padding: 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-100);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease;
}
[data-theme="clair"] .panel-btn:not(.panel-btn-primary):not(:hover) { background: rgba(255,255,255,0.15); }
.panel-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.24); color: #fff; }

.panel-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texte-sur);
}
.panel-btn-primary:hover { background: #FFB951; color: var(--accent-texte-sur); }

.panel-btn-danger { color: #FF3B47; }
.panel-btn-danger:hover { color: #fff; background: rgba(255,59,71,0.22); border-color: rgba(255,59,71,0.55); }
[data-theme="clair"] .panel-btn-danger:not(:hover) { color: #FF5A64; }

.panel-btn-succes { color: #18E48B; }
.panel-btn-succes:hover { color: #fff; background: rgba(24,228,139,0.22); border-color: rgba(24,228,139,0.55); }

.panel-btn-bleu { color: var(--hum); }
.panel-btn-bleu:hover { color: #fff; background: rgba(78,161,232,0.18); border-color: rgba(78,161,232,0.4); }
[data-theme="clair"] .panel-btn-bleu:not(:hover) { color: #7DBBF0; }

/* Variante compacte — actions de ligne dans un tableau (Modifier/Supprimer...) */
.panel-btn-sm { padding: 0.28rem 0.65rem; font-size: 0.72rem; }

/* Lien d'action discret dans une ligne (ex. "Modifier"), coloré uniquement
   au survol — cf. hiérarchie d'actions déjà décidée au #42 */
.action-discrete {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-200);
    text-decoration: none;
}
.action-discrete:hover { color: var(--accent); }
.action-discrete.danger:hover { color: var(--inc); }


/* --------------------------------------------------------------------------
   6. PLAQUE / KPI — éléments de lecture de données (hero fiche véhicule)
   -------------------------------------------------------------------------- */
.plate {
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    color: var(--texte-vif);
}

.kpi-chip {
    background: var(--panel-fond);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: 1px solid var(--panel-bordure);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
}
.kpi-chip-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-200);
    margin: 0 0 0.15rem;
}
.kpi-chip-valeur {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--texte-vif);
    margin: 0;
}
.kpi-chip-valeur small { color: var(--ink-200); font-size: 0.7rem; font-weight: 500; margin-left: 0.2rem; }


/* --------------------------------------------------------------------------
   6bis. FORMULAIRES DE FILTRE — barre de filtres en une ligne dans un
   .panel-body, structure attendue :
     <form class="panel-form">
       <div><label>Label</label><select class="form-select form-select-sm">...</select></div>
       <div class="flex-auto"><button class="panel-btn panel-btn-primary">🔍</button></div>
     </form>
   -------------------------------------------------------------------------- */
.panel-form { padding: 0.85rem 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem; background: rgba(255,255,255,0.07); }
.panel-form > div { flex: 1 1 148px; }
.panel-form > .flex-auto { flex: 0 0 auto; }
.panel-form label {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--ink-200); margin: 0 0 0.32rem; display: block;
}
.panel-reset { padding: 0.5rem 1.25rem; background: rgba(255,255,255,0.07); }
.panel-table-wrap { padding: 0 0 0.5rem; }
.panel-empty { padding: 1.7rem 1.1rem; text-align: center; font-size: 0.88rem; color: var(--ink-200); margin: 0; }

/* Habillage générique du partial _export_selection.html (contenu non
   modifié, partagé par toutes les pages liste). Structure réelle :
   <div class="d-flex justify-content-between ...">
     <span id="compteur-selection">...</span><button id="bouton-export">...</button>
   </div>
   — cette div interne, pas .export-selection-wrap, porte le flex ;
   !important pour garantir la priorité sur les utilitaires Bootstrap. */
.export-selection-wrap { padding: 0.6rem 1.25rem; background: rgba(255,255,255,0.07); }
.export-selection-wrap > div.d-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0.6rem;
}
#compteur-selection { color: var(--ink-200) !important; }
#bouton-export {
    background: var(--arg) !important;
    border: 1px solid var(--arg) !important;
    color: #101C2D !important;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-left: auto !important;
    flex-shrink: 0;
}
#bouton-export:hover { background: #3EE8A4 !important; }
#bouton-export:disabled {
    background: rgba(34,214,143,0.3) !important;
    border-color: rgba(34,214,143,0.3) !important;
    color: rgba(16,28,45,0.6) !important;
    cursor: not-allowed;
}



/* --------------------------------------------------------------------------
   7. TABLEAUX EN LIGNES-CARTES — remplace .table Bootstrap dans une page
      migrée. Structure attendue :
        <div class="table-scroll"><table class="table-panel">...</table></div>
      dans un .panel-body, ou une liste de .row-card pour un rendu non
      tabulaire. Le conteneur .table-scroll fait défiler horizontalement
      plutôt que de laisser les colonnes s'écraser / le contenu passer à la
      ligne en dessous d'une certaine largeur d'écran.
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-panel {
    width: 100%;
    min-width: 640px; /* force le scroll du conteneur plutôt que l'écrasement des colonnes */
    font-size: 0.85rem;
    border-collapse: collapse;
}
.table-panel thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--texte-vif);
    font-weight: 600;
    padding: 0.7rem 1.25rem;
    background: rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    white-space: nowrap;
}
.table-panel thead th.numerique { text-align: right; }
.table-panel tbody td {
    padding: 0.75rem 1.25rem;
    color: var(--ink-100);
    vertical-align: middle;
}
.table-panel tbody td.numerique { text-align: right; font-family: var(--font-mono); }
.table-panel tbody td.principal { font-weight: 600; color: var(--texte-vif); }
.table-panel tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background-color .12s ease;
}
.table-panel tbody tr:last-child { border-bottom: none; }
.table-panel tbody tr:hover { background: rgba(255,255,255,0.05); }
/* Surlignage de ligne (échéance en retard / bientôt due), réutilisable sur
   toute page liste ayant besoin d'attirer l'œil sur une ligne précise */
.table-panel tbody tr.ligne-alerte { background: rgba(255,77,85,0.20); }
.table-panel tbody tr.ligne-attention { background: rgba(240,169,61,0.20); }
.table-panel tbody tr.ligne-alerte:hover { background: rgba(255,77,85,0.30); }
.table-panel tbody tr.ligne-attention:hover { background: rgba(240,169,61,0.30); }

/* Variante "ligne carte" pour listes non tabulaires (conducteurs, photos) */
.row-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    transition: background-color .12s ease;
}
.row-card:hover { background: rgba(255,255,255,0.05); }
.row-card + .row-card { border-top: 1px solid rgba(255,255,255,0.06); }

/* Sous-tableau légèrement plus clair que le panneau qui l'entoure — utile
   pour un tableau secondaire dans une page déjà chargée (historique
   d'échéances sur une fiche contrat, dépenses liées sur une fiche sinistre,
   etc.). Usage : <div class="sous-tableau-clair"><div class="table-scroll">
   <table class="table-panel">...</table></div></div> */
.sous-tableau-clair {
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   8. BADGES / STATUTS — pastilles colorées, familles sémantiques
   -------------------------------------------------------------------------- */
.badge-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.badge-panel--temps     { background: var(--tps-fond); color: var(--tps); }
.badge-panel--humain    { background: var(--hum-fond); color: var(--hum); }
.badge-panel--incident  { background: var(--inc-fond); color: var(--inc); }
.badge-panel--argent    { background: var(--arg-fond); color: var(--arg); }
.badge-panel--succes    { background: var(--arg-fond); color: var(--arg); }
.badge-panel--neutre    { background: rgba(255,255,255,0.08); color: var(--ink-200); }

/* Point de statut "vivant" (ex. véhicule disponible) */
.dot-pulse { position: relative; display: inline-block; }
.dot-pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: 999px;
    background: currentColor; animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dot-pulse::after { animation: none; } }


/* --------------------------------------------------------------------------
   9. NAV STICKY (ancres de section) — cf. fiche véhicule #42
   -------------------------------------------------------------------------- */
.sticky-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface-fond);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.6rem 0;
}
.sticky-tabs a {
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-200);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
}
.sticky-tabs a:hover { background: rgba(255,255,255,0.05); }
.sticky-tabs a.active {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--texte-vif);
}
.sticky-tabs .compteur { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-400); margin-left: 0.25rem; }
[data-theme="clair"] .sticky-tabs .compteur { color: inherit; }


/* --------------------------------------------------------------------------
   10. NEUTRALISATION BOOTSTRAP — pour que les pages PAS ENCORE migrées
       restent lisibles sur le nouveau fond sombre (formulaires, tableaux,
       alertes, badges par défaut). À retirer section par section au fur et
       à mesure que .table-panel / .panel-btn remplacent réellement le
       markup Bootstrap sur une page.
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--champ-fond) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: var(--ink-100) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--champ-fond-focus) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(240,162,48,0.15) !important;
    color: var(--ink-100) !important;
}
.form-control::placeholder { color: var(--ink-400); }
.form-label { color: var(--ink-200); }
.form-text { color: var(--ink-200) !important; }
.form-check-label { color: var(--ink-100); }
.form-check-input {
    background-color: var(--champ-fond);
    border-color: rgba(255,255,255,0.25);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(240,162,48,0.15);
}

/* --------------------------------------------------------------------------
   Calendrier des réservations — partagé par planning.html, reserver.html et
   modifier.html via _grille_calendrier.html. Chaque semaine est une grille CSS
   de 7 colonnes : les réservations sont des barres positionnées par
   grid-column (durée) et grid-row (piste).
   -------------------------------------------------------------------------- */
.calendrier-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.5rem; }
.calendrier-titre { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.calendrier-titre h4 { font-family: var(--font-display); color: var(--texte-vif); margin: 0; font-size: 1.05rem; text-align: center; }
.calendrier-aujourdhui {
    font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.2; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--accent); text-decoration: none;
}
.calendrier-aujourdhui.cache { visibility: hidden; }
.calendrier-aujourdhui:hover { color: var(--texte-vif); }

.cal { border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,0.03); }
.cal-jours-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: rgba(255,255,255,0.07); }
.cal-jours-semaine div {
    font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-200); padding: 0.5rem; text-align: center;
}
.cal-semaine {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 6.7rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.cal-jour { position: relative; padding: 0.3rem 0.45rem; border-left: 1px solid rgba(255,255,255,0.06); }
.cal-jour:first-child { border-left: none; }
.cal-jour.weekend { background: rgba(255,255,255,0.025); }
.cal-jour.hors-mois { background: rgba(0,0,0,0.14); }
.cal-jour-numero { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--ink-100); }
.cal-jour.passe .cal-jour-numero, .cal-jour.hors-mois .cal-jour-numero { color: var(--ink-400); }
.cal-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-jour.aujourdhui .cal-jour-numero {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.25rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-texte-sur);
}

/* Clic sur un jour libre → réserver ce jour (le "+" n'apparaît qu'au survol / focus) */
.cal-jour-ajout {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0.2rem 0.45rem; font-weight: 700; font-size: 1rem;
    color: var(--accent); text-decoration: none;
    opacity: 0; transition: opacity .12s ease, background-color .12s ease;
}
.cal-jour-ajout:hover, .cal-jour-ajout:focus-visible { opacity: 1; background: rgba(240,162,48,0.10); }
@media (hover: none) { .cal-jour-ajout { opacity: 0.35; } }

/* Barre de réservation */
.cal-resa {
    position: relative; z-index: 2;
    display: flex; align-items: center; align-self: center;
    height: 1.4rem; margin: 0 0.25rem; padding: 0 0.5rem;
    border-radius: 6px;
    background-color: var(--couleur, #495057);
    color: #fff; font-size: 0.7rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    transition: filter .12s ease;
}
.cal-resa:hover { filter: brightness(1.15); color: #fff; }
.cal-resa-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-resa.coupe-gauche { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-resa.coupe-droite { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-resa.coupe-gauche::before { content: '◂'; margin-right: 0.3rem; opacity: 0.8; }
.cal-resa.coupe-droite::after { content: '▸'; margin-left: 0.3rem; opacity: 0.8; }
.cal-resa.entretien {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px);
}
.cal-resa.en-avant { z-index: 3; outline: 2px solid #fff; outline-offset: 1px; }

.cal-pied { margin-top: 0.9rem; min-height: 2.4rem; }
.cal-legende {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
    margin: 0; padding: 0; font-size: 0.78rem; color: var(--ink-200);
}
.cal-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-legende-pastille { width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.cal-vide { text-align: center; color: var(--ink-200); font-size: 0.82rem; margin: 0; }
.cal-aide { color: var(--ink-200); font-size: 0.82rem; margin: 0.9rem 0 0; }

/* Sélection de plage de jours (page réserver) */
[data-selection-dates] .cal-jour:not(.passe) { cursor: pointer; }
[data-selection-dates] .cal-jour:not(.passe):not(.selection):hover { background: rgba(240,162,48,0.10); }
.cal-jour.selection { background: rgba(240,162,48,0.22); }
.cal-jour.sel-debut, .cal-jour.sel-fin { background: rgba(240,162,48,0.38); }
.cal-jour.sel-debut { box-shadow: inset 3px 0 0 var(--accent); }
.cal-jour.sel-fin { box-shadow: inset -3px 0 0 var(--accent); }
.cal-jour.sel-debut.sel-fin { box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent); }
.cal-jour.selection .cal-jour-numero { color: var(--texte-vif); }

@media (max-width: 640px) {
    .cal-resa { font-size: 0.62rem; padding: 0 0.3rem; }
}

/* --- Page planning : bascule de vue, sélecteur de véhicule --- */
.planning-bascule { display: inline-flex; gap: 0.2rem; padding: 0.2rem; background: rgba(0,0,0,0.22); border-radius: var(--radius-sm); }
.planning-bascule a {
    font-size: 0.75rem; font-weight: 600; color: var(--ink-200); text-decoration: none;
    padding: 0.3rem 0.7rem; border-radius: 0.35rem;
}
.planning-bascule a:hover { color: #fff; }
.planning-bascule a.active { background: var(--accent); color: var(--accent-texte-sur); }

.planning-vehicules { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: rgba(255,255,255,0.07); }
.planning-fleche { flex: 0 0 auto; justify-content: center; width: 2.2rem; height: 2.6rem; padding: 0; font-size: 1.3rem; line-height: 1; }
.planning-pastilles { display: flex; gap: 0.5rem; flex: 1; min-width: 0; overflow-x: auto; padding: 0.15rem 0 0.35rem; scroll-snap-type: x proximity; }
.pastille-vehicule {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.05rem;
    min-width: 8.5rem; padding: 0.45rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05); color: var(--ink-100); text-decoration: none;
    scroll-snap-align: center; transition: background-color .15s ease, border-color .15s ease;
}
.pastille-vehicule:hover { background: rgba(255,255,255,0.11); color: #fff; }
.pastille-vehicule.active { border-color: var(--accent); background: rgba(240,162,48,0.14); color: #fff; }
.pastille-plaque { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; }
.pastille-modele { font-size: 0.7rem; color: var(--ink-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.dot-dispo { flex: 0 0 auto; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--arg); }
.dot-dispo.occupe { background: var(--inc); }

.planning-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.25rem; }
.planning-resume-titre { display: flex; flex-direction: column; }
.planning-resume strong { font-family: var(--font-mono); font-size: 1.05rem; color: var(--texte-vif); }
.planning-resume span { font-size: 0.8rem; color: var(--ink-200); }

/* --- Vue « toute la flotte » --- */
.flotte-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); }
.flotte-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.flotte-table th, .flotte-table td { border-bottom: 1px solid rgba(255,255,255,0.06); border-left: 1px solid rgba(255,255,255,0.05); }
.flotte-table thead th {
    min-width: 2.1rem; padding: 0.5rem 0; text-align: center;
    font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--ink-200);
    background: rgba(255,255,255,0.07);
}
.flotte-jour-nom { display: block; font-size: 0.64rem; opacity: 0.8; }
.flotte-table .flotte-vehicule {
    position: sticky; left: 0; z-index: 3; min-width: 11rem; padding: 0.5rem 0.9rem;
    text-align: left; background: var(--ink-700); border-left: none;
}
.flotte-vehicule a { display: flex; flex-direction: column; color: var(--texte-vif); text-decoration: none; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; }
.flotte-vehicule a:hover { color: var(--accent); }
.flotte-vehicule small { font-family: inherit; font-weight: 400; font-size: 0.74rem; color: var(--ink-200); }
.flotte-cel { position: relative; height: 3.8rem; padding: 0; }
.flotte-cel.weekend, .flotte-table thead th.weekend { background: rgba(255,255,255,0.04); }
.flotte-cel.aujourdhui, .flotte-table thead th.aujourdhui { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.flotte-resa, .flotte-libre { position: absolute; inset: 3px 1px; display: block; border-radius: 4px; }
.flotte-resa:hover { filter: brightness(1.2); }
.flotte-libre { border: 1px dashed rgba(240,162,48,0.6); opacity: 0; transition: opacity .12s ease; }
.flotte-libre:hover, .flotte-libre:focus-visible { opacity: 1; background: rgba(240,162,48,0.15); }

/* Vue flotte : la page s'élargit pour donner plus de place aux 31 colonnes */
.contenu-page:has(.flotte-scroll) { max-width: 1480px; }

/* Cellule découpée : jusqu'à 3 bandes + un bouton "nb de réservations" */
.flotte-pile { position: absolute; inset: 3px 1px; display: flex; flex-direction: column; gap: 1px; }
.flotte-pile .flotte-resa { position: static; inset: auto; flex: 1 1 0; min-height: 0; border-radius: 3px; }
.flotte-plus {
    flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid rgba(255,255,255,0.40); border-radius: 3px;
    background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; line-height: 1;
    transition: background-color .12s ease;
}
.flotte-plus:hover { background: rgba(255,255,255,0.30); }

/* Fenêtre de détail d'une journée */
.flotte-dialog {
    width: min(28rem, calc(100vw - 2rem)); padding: 0;
    border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius);
    background: var(--ink-800); color: var(--ink-100);
    box-shadow: var(--ombre-panel); font-size: 0.9rem; text-align: left;
}
.flotte-dialog::backdrop { background: rgba(8,14,24,0.6); backdrop-filter: blur(3px); }
.flotte-dialog-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1.1rem; background: var(--bandeau-survol); border-left: 3px solid var(--hum);
}
.flotte-dialog-tete h5 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; color: var(--texte-vif); }
.flotte-dialog-tete small { color: var(--ink-200); font-size: 0.75rem; }
.flotte-dialog-liste { list-style: none; margin: 0; padding: 0.35rem 0; max-height: 60vh; overflow-y: auto; }
.flotte-dialog-liste li + li { border-top: 1px solid rgba(255,255,255,0.06); }
.flotte-dialog-liste a {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.1rem;
    color: var(--ink-100); text-decoration: none; font-family: inherit; font-weight: 400; font-size: inherit;
}
.flotte-dialog-liste a:hover { background: rgba(255,255,255,0.06); }
.flotte-dialog-pastille { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.flotte-dialog-texte { display: flex; flex-direction: column; min-width: 0; }
.flotte-dialog-qui { font-weight: 600; color: var(--texte-vif); }
.flotte-dialog-horaire { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-200); }

/* Texte Bootstrap par défaut, sombre sur fond clair à l'origine — illisible
   tel quel sur le nouveau fond sombre (ex: message d'aide dans
   _export_selection.html, "text-muted" un peu partout dans l'app) */
.text-muted { color: var(--ink-200) !important; }
.text-danger { color: var(--inc) !important; }
.text-dark  { color: var(--ink-100) !important; }
small, .small { color: inherit; }

.table { color: var(--ink-100); --bs-table-color: var(--ink-100); }
.table > :not(caption) > * > * { background-color: transparent; border-bottom-color: rgba(255,255,255,0.08); }
.table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.05); }

.card {
    background: var(--panel-fond) !important;
    border: 1px solid var(--panel-bordure) !important;
    color: var(--ink-100);
}

.modal-content { background: var(--ink-900); color: var(--ink-100); border: 1px solid rgba(255,255,255,0.12); }

.alert-warning { background: var(--tps-fond); color: var(--tps); border-color: rgba(240,169,61,0.3); }
.alert-danger  { background: var(--inc-fond); color: var(--inc); border-color: rgba(255,77,85,0.3); }
.alert-success { background: var(--arg-fond); color: var(--arg); border-color: rgba(34,214,143,0.3); }
.alert-info { background: var(--hum-fond); color: var(--hum); border-color: rgba(78,161,232,0.3); }

/* Croix de fermeture Bootstrap (alertes, modales) : icône noire par défaut,
   donc invisible sur les fonds sombres, dans les deux thèmes. */
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.7; }
.btn-close:hover { opacity: 1; }

/* Boutons Bootstrap génériques, tant qu'une page n'utilise pas .panel-btn */
.btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--accent-texte-sur); }
.btn-primary:hover { background-color: #FFB951; border-color: #FFB951; color: var(--accent-texte-sur); }
.btn-outline-secondary { color: var(--ink-200); border-color: rgba(255,255,255,0.2); }
.btn-outline-secondary:hover { background: rgba(255,255,255,0.08); color: #fff; }
.btn-outline-danger { color: var(--inc); border-color: rgba(255,77,85,0.4); }
.btn-outline-danger:hover { background: rgba(255,77,85,0.15); color: #fff; }
[data-theme="clair"] .btn-outline-danger { color: #FF8187; }
/* ==========================================================================
   Barres de défilement (ascenseurs)
   Par défaut : piste et curseur clairs du système, qui tranchent sur le thème sombre.
   Ici : piste transparente, curseur fin et arrondi, légèrement plus marqué au survol.
   -------------------------------------------------------------------------- */
:root {
    --scroll-curseur: rgba(255,255,255,0.22);
    --scroll-curseur-survol: rgba(255,255,255,0.38);
}
/* Ascenseur de la PAGE en mode clair : posé sur le fond clair, donc curseur sombre */
[data-theme="clair"] {
    --scroll-curseur: rgba(20,35,55,0.38);
    --scroll-curseur-survol: rgba(20,35,55,0.58);
}
/* Ascenseurs à l'intérieur des panneaux, fenêtres et tableaux : toujours sur fond sombre,
   quel que soit le thème de la page */
.panel, .modal-content, .table-scroll, .app-sidebar, .tdb-parc, .tdb-bloc {
    --scroll-curseur: rgba(255,255,255,0.22);
    --scroll-curseur-survol: rgba(255,255,255,0.38);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-curseur) transparent;
}

/* Anciens Safari : pas de scrollbar-color, on passe par les pseudo-éléments WebKit.
   (Les navigateurs récents ignorent ces règles quand scrollbar-color est pris en charge.) */
@supports not (scrollbar-color: auto) {
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-corner { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: var(--scroll-curseur);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--scroll-curseur-survol); background-clip: padding-box; }
}

/* Ascenseur de la page en thème sombre.
   Piste « transparente » = le navigateur laisse apparaître la piste claire de son thème par
   défaut (color-scheme: light), d'où la bande blanche à droite de la page. On déclare donc la
   page comme sombre (ce qui assombrit aussi la piste native et les contrôles de formulaire) et
   on donne à la piste une couleur pleine, celle du bas du dégradé de fond. */
html:not([data-theme="clair"]) {
    color-scheme: dark;
    scrollbar-color: var(--scroll-curseur) var(--ink-950);
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ CLAVIER — indicateur de focus visible partout, lien d'évitement
   (à ajouter À LA FIN de app/static/css/theme.css)
   :focus-visible = le contour n'apparaît qu'à la navigation clavier, pas au clic.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.panel-btn:focus-visible,
.btn:focus-visible,
.app-nav-link:focus-visible,
.app-sidebar-deco:focus-visible,
.app-theme-toggle:focus-visible,
.app-menu-toggle:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}
/* Les champs ont déjà leur halo ambré au focus : on y ajoute un contour net,
   le halo seul (15 % d'opacité) est trop discret. */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.form-check-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
[aria-invalid="true"] {
    border-color: var(--inc) !important;
}
.panel-btn:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}