/* ==========================================================================
   Gestion de flotte de taxis — feuille de style unique
   Aucune dependance externe : ni police distante, ni framework.
   ========================================================================== */

:root {
  --nuit:        #14213d;
  --nuit-clair:  #1e3057;
  --or:          #f0a500;
  --fond:        #f4f6fa;
  --carte:       #ffffff;
  --texte:       #1c2333;
  --texte-doux:  #5b6478;
  --bord:        #dfe4ee;
  --vert:        #0f7b4f;
  --vert-fond:   #e7f5ee;
  --rouge:       #b3261e;
  --rouge-fond:  #fdeceb;
  --ambre:       #96650a;
  --ambre-fond:  #fdf3e0;
  --bleu-fond:   #e8effb;
  --rayon:       10px;
  --ombre:       0 1px 2px rgba(20,33,61,.06), 0 4px 12px rgba(20,33,61,.06);
  --largeur-menu: 15rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

a { color: #17457f; }
a:hover { color: #0d2c56; }

.saut-contenu {
  position: absolute; left: -999px;
  background: var(--nuit); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------------ Structure */

.application {
  display: grid;
  grid-template-columns: var(--largeur-menu) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "barre barre" "menu contenu";
  min-height: 100vh;
}

.barre {
  grid-area: barre;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem; height: 3.25rem;
  background: var(--nuit); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.marque {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.barre-date { color: #b9c4da; font-size: .85rem; }
.bouton-menu { display: none; font-size: 1.35rem; cursor: pointer; padding: .1rem .4rem; }

.menu { grid-area: menu; background: var(--nuit-clair); padding: .75rem 0 2rem; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1rem; color: #c6d0e4; text-decoration: none;
  font-size: .92rem; border-left: 3px solid transparent;
}
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a.actif { background: rgba(255,255,255,.10); color: #fff; border-left-color: var(--or); font-weight: 600; }
.menu-icone { width: 1.25rem; text-align: center; font-size: .95rem; }
.badge {
  margin-left: auto; background: var(--or); color: #3a2900;
  border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 700;
}

.contenu { grid-area: contenu; padding: 1.5rem; max-width: 100%; overflow-x: hidden; }

.voile-menu { display: none; }
.bascule-menu { display: none; }

/* ------------------------------------------------------------------- En-tetes */

.entete-page {
  display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.entete-page h1 { margin: 0; font-size: 1.4rem; letter-spacing: -.01em; }
.entete-page .sous-titre { margin: .2rem 0 0; color: var(--texte-doux); font-size: .9rem; }
.entete-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .98rem; margin: 0 0 .5rem; }

/* --------------------------------------------------------------------- Cartes */

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.1rem; margin-bottom: 1.25rem;
}
.carte > :last-child { margin-bottom: 0; }
.carte-titre { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.carte-titre h2 { margin: 0; }
.carte-titre .entete-actions { margin-left: auto; }

.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* ------------------------------------------------------------------ Indicateurs */

.indicateur {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .9rem 1rem; box-shadow: var(--ombre);
}
.indicateur .libelle { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }
.indicateur .valeur { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.indicateur .detail { font-size: .82rem; color: var(--texte-doux); margin-top: .15rem; }
.indicateur.positif .valeur { color: var(--vert); }
.indicateur.negatif .valeur { color: var(--rouge); }

/* -------------------------------------------------------------------- Tableaux */

.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texte-doux); font-weight: 700;
  padding: .5rem .6rem; border-bottom: 2px solid var(--bord); white-space: nowrap;
}
tbody td { padding: .55rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
tbody tr:hover { background: #fafbfe; }
tfoot td { padding: .6rem; font-weight: 700; border-top: 2px solid var(--bord); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sombre { color: var(--rouge); }
.clair { color: var(--vert); }
.discret-texte { color: var(--texte-doux); font-size: .85rem; }
.vide {
  padding: 2rem 1rem; text-align: center; color: var(--texte-doux);
  background: #fafbfe; border: 1px dashed var(--bord); border-radius: var(--rayon);
}

/* -------------------------------------------------------------------- Pastilles */

.pastille {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.pastille.ok        { background: var(--vert-fond);  color: var(--vert); }
.pastille.alerte    { background: var(--rouge-fond); color: var(--rouge); }
.pastille.attention { background: var(--ambre-fond); color: var(--ambre); }
.pastille.neutre    { background: #eceff5;           color: var(--texte-doux); }

/* -------------------------------------------------------------------- Boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .48rem .85rem; border-radius: 8px; border: 1px solid transparent;
  background: var(--nuit); color: #fff; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.3;
}
.bouton:hover { background: #0e1830; color: #fff; }
.bouton.neutre { background: #fff; color: var(--texte); border-color: var(--bord); }
.bouton.neutre:hover { background: #f2f4f9; color: var(--texte); }
.bouton.danger { background: var(--rouge); }
.bouton.danger:hover { background: #8f1e17; }
.bouton.discret { background: transparent; color: #c6d0e4; border-color: rgba(255,255,255,.25); }
.bouton.discret:hover { background: rgba(255,255,255,.12); color: #fff; }
.bouton.petit { padding: .3rem .6rem; font-size: .8rem; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.en-ligne { display: inline; }
.actions-ligne { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Formulaires */

.champs { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.champ { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.champ.pleine-largeur { grid-column: 1 / -1; }
.champ label { font-size: .85rem; font-weight: 600; }
.champ .aide { font-size: .78rem; color: var(--texte-doux); }
.obligatoire { color: var(--rouge); }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .48rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--bord); border-radius: 8px; background: #fff; color: var(--texte);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #7fa5df; outline-offset: 0; border-color: #7fa5df;
}
textarea { min-height: 4.5rem; resize: vertical; }
input[type=checkbox] { width: 1rem; height: 1rem; }

.actions-formulaire {
  display: flex; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--bord); flex-wrap: wrap;
}

fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: .9rem; margin: 0 0 1rem; }
legend { font-weight: 700; font-size: .9rem; padding: 0 .35rem; }

/* --------------------------------------------------------------------- Filtres */

.filtres {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .8rem; margin-bottom: 1rem;
}
.filtres .champ { flex: 1 1 10rem; }
.filtres .actions { display: flex; gap: .4rem; }

.periodes { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.periodes a {
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--bord);
  background: #fff; text-decoration: none; font-size: .84rem; color: var(--texte);
}
.periodes a.actif { background: var(--nuit); color: #fff; border-color: var(--nuit); }

/* -------------------------------------------------------------------- Messages */

.message {
  padding: .7rem .9rem; border-radius: var(--rayon); margin-bottom: 1rem;
  font-size: .9rem; border: 1px solid transparent;
}
.message.succes { background: var(--vert-fond);  color: var(--vert);  border-color: #bde5d1; }
.message.erreur { background: var(--rouge-fond); color: var(--rouge); border-color: #f3c7c4; }
.message.avertissement { background: var(--ambre-fond); color: var(--ambre); border-color: #f0dcb4; }
.message.info   { background: var(--bleu-fond);  color: #17457f; border-color: #c6d8f4; }
.message ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.bandeau-alerte {
  background: var(--ambre-fond); border: 1px solid #f0dcb4; color: var(--ambre);
  border-radius: var(--rayon); padding: .8rem .9rem; margin-bottom: 1.25rem;
}
.bandeau-alerte h2 { color: var(--ambre); font-size: .95rem; margin-bottom: .4rem; }
.bandeau-alerte ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; }

/* --------------------------------------------------------------------- Onglets */

.onglets {
  display: flex; gap: .2rem; border-bottom: 2px solid var(--bord);
  margin-bottom: 1.1rem; overflow-x: auto;
}
.onglets a {
  padding: .5rem .85rem; text-decoration: none; color: var(--texte-doux);
  font-size: .89rem; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--nuit); border-bottom-color: var(--or); }

/* --------------------------------------------------------------------- Modales */

.modale {
  border: none; border-radius: var(--rayon); padding: 0;
  max-width: 30rem; width: calc(100% - 2rem); box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modale::backdrop { background: rgba(16,24,40,.5); }
.modale form { padding: 1.2rem; }
.modale h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.modale-details {
  margin: .5rem 0; padding: .6rem .6rem .6rem 1.6rem;
  background: var(--rouge-fond); border-radius: 8px; font-size: .87rem; color: var(--rouge);
}
.modale-avertissement { font-size: .85rem; color: var(--texte-doux); margin: .6rem 0 0; }
.modale-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ----------------------------------------------------------------- Pagination */

.pagination { display: flex; gap: .3rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination-courante {
  padding: .3rem .6rem; border-radius: 7px; border: 1px solid var(--bord);
  text-decoration: none; font-size: .85rem; background: #fff; color: var(--texte);
}
.pagination-courante { background: var(--nuit); color: #fff; border-color: var(--nuit); font-weight: 700; }
.pagination-ellipse { color: var(--texte-doux); padding: 0 .2rem; }

/* -------------------------------------------------------------------- Divers */

.liste-definitions { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .4rem .9rem; font-size: .9rem; }
.liste-definitions dt { color: var(--texte-doux); }
.liste-definitions dd { margin: 0; font-weight: 500; }

.graphique { width: 100%; overflow-x: auto; }
.graphique svg { display: block; min-width: 20rem; }

.frise { list-style: none; margin: 0; padding: 0; }
.frise li {
  display: grid; grid-template-columns: 6.2rem 1.4rem 1fr auto; gap: .6rem;
  align-items: baseline; padding: .5rem .2rem; border-bottom: 1px solid var(--bord); font-size: .89rem;
}
.frise .frise-date { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.frise .frise-montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.apercu-document { width: 100%; height: 75vh; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; }
.apercu-image { max-width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--bord); }

/* ---------------------------------------------------------------- Connexion */

.page-connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(160deg, #14213d, #24365e);
}
.boite-connexion {
  background: #fff; border-radius: 14px; padding: 1.8rem; width: 100%; max-width: 22rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.boite-connexion h1 { font-size: 1.15rem; margin: 0 0 .3rem; }
.boite-connexion p.sous-titre { margin: 0 0 1.2rem; color: var(--texte-doux); font-size: .88rem; }
.boite-connexion .bouton { width: 100%; margin-top: 1rem; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 860px) {
  .application { grid-template-columns: 1fr; grid-template-areas: "barre" "contenu"; }
  .bouton-menu { display: block; }
  .menu {
    position: fixed; top: 3.25rem; bottom: 0; left: 0; width: 15rem; z-index: 30;
    transform: translateX(-100%); transition: transform .18s ease; overflow-y: auto;
  }
  .bascule-menu:checked ~ .application .menu { transform: translateX(0); }
  .bascule-menu:checked ~ .voile-menu {
    display: block; position: fixed; inset: 3.25rem 0 0 0; background: rgba(10,16,32,.45); z-index: 25;
  }
  .contenu { padding: 1rem; }
  .barre-date { display: none; }
  .marque span { font-size: .92rem; }
  .frise li { grid-template-columns: 1fr; gap: .15rem; }
  .liste-definitions { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .liste-definitions dt { margin-top: .5rem; }
}

/* ----------------------------------------------------------------- Impression */

@media print {
  .barre, .menu, .entete-actions, .filtres, .periodes, .pagination,
  .onglets, .bouton, .voile-menu { display: none !important; }
  .application { display: block; }
  .contenu { padding: 0; }
  .carte { box-shadow: none; border: none; padding: 0; margin-bottom: 1rem; }
  body { background: #fff; font-size: 11pt; }
  table { font-size: 10pt; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  @page { margin: 1.5cm; }
}