/* ==========================================================================
   RENTING CARS — SYSTEME DE DESIGN
   --------------------------------------------------------------------------
   CSS ecrit a la main, AUCUNE compilation : un developpeur ouvre ce fichier,
   modifie une couleur, rafraichit la page. C'est tout.

   Interface de comptoir : on l'utilise debout, parfois sur tablette, souvent
   avec un client en face. D'ou les trois regles :
     - on vise gros   : boutons de 48 px, zones cliquables genereuses
     - on lit de loin : texte de base 16 px, chiffres cles en 32 px
     - une action evidente par ecran : un seul bouton colore vif
   ========================================================================== */

:root {
  /* ------------------------------- MARQUE ------------------------------- */
  --marque:        #1f45f5;
  --marque-fonce:  #1a34e1;
  --marque-clair:  #eef4ff;
  --marque-bord:   #bcd3ff;

  /* ------------------------------ STATUTS ------------------------------- */
  /* Reserves : jamais utilises pour decorer. Rouge = ca coute de l'argent.  */
  --vert:      #0ca30c;  --vert-fond:   #e7f6ec;  --vert-bord:   #b6e3c2;
  --bleu:      #2a78d6;  --bleu-fond:   #e8f1fc;  --bleu-bord:   #b8d6f5;
  --violet:    #7c3aed;  --violet-fond: #f1ebfe;  --violet-bord: #d9c7fc;
  --orange:    #b45309;  --orange-fond: #fef3e2;  --orange-bord: #fad9a8;
  --rouge:     #d03b3b;  --rouge-fond:  #fdecea;  --rouge-bord:  #f7c2bd;
  --jaune:     #a16207;  --jaune-fond:  #fefadf;  --jaune-bord:  #f5e6a3;

  /* ----------------------------- GRAPHIQUES ----------------------------- */
  /* Palette validee : lisible en daltonisme. 3 series maximum.             */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;

  /* ------------------------------- NEUTRES ------------------------------ */
  --texte:      #1e2536;
  --texte-doux: #5b6577;
  --texte-pale: #8a94a6;
  --fond:       #f5f7fa;
  --blanc:      #ffffff;
  --bord:       #e3e8f0;
  --bord-fort:  #cbd3e1;

  /* -------------------------------- FORMES ------------------------------ */
  --rayon:       12px;
  --rayon-petit: 10px;
  --ombre:       0 1px 2px rgba(20, 30, 60, .06);
  --ombre-forte: 0 8px 24px rgba(20, 30, 60, .10);
  --barre:       232px;   /* largeur de la barre laterale */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marque); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Les montants et les compteurs s'alignent en colonne */
.chiffre { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MISE EN PAGE — barre laterale + contenu
   ========================================================================== */

.appli { display: flex; min-height: 100vh; }

.barre {
  width: var(--barre);
  flex: 0 0 var(--barre);
  background: var(--blanc);
  border-right: 1px solid var(--bord);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.barre .logo {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--bord);
  font-weight: 800; letter-spacing: .04em;
}
.barre .logo .pastille {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: var(--rayon-petit);
  background: var(--marque); color: #fff;
}
.barre .logo small { display: block; font-weight: 500; font-size: 11.5px; color: var(--texte-pale); letter-spacing: 0; }

.barre nav { padding: 10px 10px 16px; display: grid; gap: 2px; }
.barre nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border-radius: var(--rayon-petit);
  color: var(--texte-doux);
  font-size: 15px; font-weight: 500;
  text-decoration: none;
}
.barre nav a:hover { background: var(--fond); color: var(--texte); text-decoration: none; }
.barre nav a.actif { background: var(--marque-clair); color: var(--marque-fonce); font-weight: 600; }
.barre nav a svg { flex: 0 0 20px; }

.barre .pied { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--bord); }
.barre .pied .qui { font-size: 14px; font-weight: 600; }
.barre .pied .role { font-size: 12.5px; color: var(--texte-pale); }

.contenu { flex: 1; min-width: 0; }

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
  padding: 16px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.entete h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.2px; }
.entete .sous { margin: 2px 0 0; font-size: 14px; color: var(--texte-doux); }
.entete .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Recherche globale — presente sur tous les ecrans */
.recherche-globale {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  background: var(--fond); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-petit); padding: 0 14px;
  min-width: 260px; max-width: 420px; flex: 1 1 260px; height: 44px;
  color: var(--texte-pale);
}
.recherche-globale:focus-within { border-color: var(--marque); background: var(--blanc); box-shadow: 0 0 0 3px var(--marque-clair); }
.recherche-globale input { flex: 1; border: 0; background: none; outline: none; font: inherit; font-size: 14.5px; color: var(--texte); min-width: 0; }

/* Photo d'un vehicule */
.photo-vehicule { width: 100%; border-radius: var(--rayon); object-fit: cover; display: block; }
.vignette { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }

.page { padding: 24px 28px 60px; max-width: 1500px; }

/* ==========================================================================
   BOUTONS — 48 px de haut, icone + texte, une couleur par intention
   ========================================================================== */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--rayon-petit);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, box-shadow .12s, border-color .12s;
  text-decoration: none;
}
.bouton:hover { text-decoration: none; }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bouton svg { flex: 0 0 auto; }

.bouton-principal   { background: var(--marque); color: #fff; }
.bouton-principal:hover   { background: var(--marque-fonce); }
.bouton-valider     { background: var(--vert); color: #fff; }
.bouton-valider:hover     { background: #0a8c0a; }
.bouton-danger      { background: var(--rouge); color: #fff; }
.bouton-danger:hover      { background: #b83232; }
.bouton-secondaire  { background: var(--blanc); color: var(--texte); border-color: var(--bord-fort); }
.bouton-secondaire:hover  { background: var(--fond); }
.bouton-fantome     { background: transparent; color: var(--texte-doux); }
.bouton-fantome:hover     { background: var(--fond); color: var(--texte); }

.bouton-petit { min-height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 8px; }
.bouton-large { width: 100%; }

/* ==========================================================================
   CARTES
   ========================================================================== */

.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.carte > header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bord);
}
.carte > header h2 { margin: 0; font-size: 16.5px; font-weight: 700; }
.carte > header .droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.carte .corps { padding: 18px; }
.carte .corps.serre { padding: 0; }

/* ---------------------------- CARTES DE CHIFFRES ------------------------- */

.grille-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stat {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px;
  box-shadow: var(--ombre);
  display: block; color: inherit; text-decoration: none;
}
a.stat:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-forte); text-decoration: none; }
/* Le compteur sur lequel on a clique : il filtre la liste, il doit se voir */
.stat-actif { border-color: var(--marque); box-shadow: 0 0 0 2px var(--marque-clair); }
.stat .icone {
  width: 40px; height: 40px; border-radius: var(--rayon-petit);
  display: grid; place-items: center; margin-bottom: 12px;
  background: var(--marque-clair); color: var(--marque);
}
.stat .valeur { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.6px; }
.stat .libelle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-pale); margin-top: 6px; }
.stat .detail { font-size: 13.5px; color: var(--texte-doux); margin-top: 4px; }

.stat.vert   .icone { background: var(--vert-fond);   color: var(--vert); }
.stat.vert   .valeur { color: var(--vert); }
.stat.bleu   .icone { background: var(--bleu-fond);   color: var(--bleu); }
.stat.bleu   .valeur { color: var(--bleu); }
.stat.orange .icone { background: var(--orange-fond); color: var(--orange); }
.stat.orange .valeur { color: var(--orange); }
.stat.rouge  .icone { background: var(--rouge-fond);  color: var(--rouge); }
.stat.rouge  .valeur { color: var(--rouge); }
.stat.violet .icone { background: var(--violet-fond); color: var(--violet); }
.stat.violet .valeur { color: var(--violet); }

/* ==========================================================================
   ALERTES — ce qui coince passe avant les chiffres
   ========================================================================== */

.alerte {
  border-radius: var(--rayon); padding: 14px 18px;
  border: 1px solid; display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
}
.alerte h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.alerte ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14.5px; }
.alerte .corps { flex: 1; min-width: 0; }
.alerte-rouge  { background: var(--rouge-fond);  border-color: var(--rouge-bord);  color: #7f1d1d; }
.alerte-orange { background: var(--orange-fond); border-color: var(--orange-bord); color: #78350f; }
.alerte-vert   { background: var(--vert-fond);   border-color: var(--vert-bord);   color: #14532d; }
.alerte-bleu   { background: var(--marque-clair); border-color: var(--marque-bord); color: #1e3a8a; }
/* La caution : violette partout, pour qu'on ne la confonde jamais avec un revenu */
.alerte-violet { background: var(--violet-fond); border-color: var(--violet-bord); color: #4c1d95; }
.alerte a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid;
}
.badge-vert   { background: var(--vert-fond);   color: var(--vert);   border-color: var(--vert-bord); }
.badge-bleu   { background: var(--bleu-fond);   color: var(--bleu);   border-color: var(--bleu-bord); }
.badge-violet { background: var(--violet-fond); color: var(--violet); border-color: var(--violet-bord); }
.badge-orange { background: var(--orange-fond); color: var(--orange); border-color: var(--orange-bord); }
.badge-rouge  { background: var(--rouge-fond);  color: var(--rouge);  border-color: var(--rouge-bord); }
.badge-jaune  { background: var(--jaune-fond);  color: var(--jaune);  border-color: var(--jaune-bord); }
.badge-gris   { background: var(--fond);        color: var(--texte-doux); border-color: var(--bord-fort); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.champ, select.champ, textarea.champ {
  width: 100%; min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit);
  background: var(--blanc); color: var(--texte);
  font: inherit; font-size: 15.5px;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.champ:focus { border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-clair); }
.champ:disabled { background: var(--fond); color: var(--texte-pale); }
textarea.champ { min-height: 84px; resize: vertical; }
select.champ { cursor: pointer; }

.libelle { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--texte-doux); }
.aide { margin: 5px 0 0; font-size: 12.5px; color: var(--texte-pale); }

.grille { display: grid; gap: 16px; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.case { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15px; }
.case input { width: 19px; height: 19px; accent-color: var(--marque); cursor: pointer; }

/* Etiquette cochable (equipements de l'etat des lieux) */
.puce-case {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-petit); cursor: pointer;
  font-size: 14.5px; background: var(--blanc);
}
.puce-case:hover { background: var(--fond); }
.puce-case:has(input:checked) { border-color: var(--vert); background: var(--vert-fond); color: var(--vert); font-weight: 600; }

/* ==========================================================================
   TABLEAUX
   ========================================================================== */

.enveloppe-tableau { overflow-x: auto; }

.tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tableau thead th {
  text-align: left; padding: 11px 16px;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-pale); white-space: nowrap;
}
.tableau tbody td { padding: 12px 16px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--marque-clair); }
.tableau .droite, .droite { text-align: right; }
.tableau .centre, .centre { text-align: center; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .94em; }

.vide { padding: 48px 20px; text-align: center; color: var(--texte-doux); }
.vide p { margin: 0 0 16px; }

/* ==========================================================================
   GRAPHIQUES
   ========================================================================== */

.graphique { position: relative; height: 240px; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--texte-doux); margin-top: 10px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Barres horizontales dessinees en CSS — aucune bibliotheque necessaire */
.barres { display: grid; gap: 10px; }
.barres .ligne { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.barres .piste { background: var(--fond); border-radius: 6px; height: 26px; overflow: hidden; }
.barres .remplissage { height: 100%; background: var(--serie-1); border-radius: 6px; min-width: 3px; }

/* ==========================================================================
   PLANNING
   ========================================================================== */

.planning { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.planning th, .planning td { border-bottom: 1px solid var(--bord); padding: 0; }
.planning .vehicule {
  position: sticky; left: 0; z-index: 2; background: var(--blanc);
  padding: 8px 12px; min-width: 210px; border-right: 1px solid var(--bord);
}
.planning thead th { background: var(--fond); font-size: 11px; padding: 7px 2px; text-align: center; color: var(--texte-pale); font-weight: 700; }
.planning thead th.weekend { background: #eceff4; }
.planning td.jour { height: 42px; min-width: 30px; border-right: 1px solid #f1f4f8; position: relative; }
.planning td.jour.weekend { background: #fafbfd; }
.planning .reservation, .planning .en-cours, .planning .en-retard {
  position: absolute; inset: 6px 1px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap;
}
.planning .reservation { background: var(--violet); }
.planning .en-cours    { background: var(--bleu); }
.planning .en-retard   { background: var(--rouge); }

/* ==========================================================================
   SCHEMA DE CARROSSERIE — cliquable
   ========================================================================== */

.carrosserie {
  position: relative; width: 260px; height: 400px;
  border: 1px solid var(--bord); border-radius: 10px;
  background: #fafbfd; flex: 0 0 260px;
}
.carrosserie .zone {
  position: absolute; border: 1px solid var(--bord-fort); border-radius: 4px;
  background: var(--blanc); cursor: pointer;
  display: grid; place-items: center; text-align: center;
  font-size: 8.5px; color: var(--texte-pale); line-height: 1.15; padding: 2px;
}
.carrosserie .zone:hover { border-color: var(--marque); background: var(--marque-clair); color: var(--marque); }
.carrosserie .zone.touchee { border: 2px solid var(--rouge); background: var(--rouge-fond); color: var(--rouge); font-weight: 700; }
.carrosserie .zone.initiale { border-color: var(--bord-fort); background: var(--fond); color: var(--texte-doux); }
.carrosserie .repere { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--texte-pale); font-weight: 700; }

/* ==========================================================================
   DIVERS
   ========================================================================== */

.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.onglets a {
  padding: 10px 16px; border-radius: var(--rayon-petit);
  border: 1px solid var(--bord-fort); background: var(--blanc);
  font-size: 14.5px; font-weight: 600; color: var(--texte-doux); text-decoration: none;
}
.onglets a:hover { background: var(--fond); text-decoration: none; }
.onglets a.actif { background: var(--marque-clair); border-color: var(--marque-bord); color: var(--marque-fonce); }

.pile { display: grid; gap: 16px; }
.rangee { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.separateur { border-top: 1px solid var(--bord); margin: 16px 0; }
.muet { color: var(--texte-doux); }
.pale { color: var(--texte-pale); }
.fort { font-weight: 700; }
.petit { font-size: 13px; }
.rouge { color: var(--rouge); }
.vert { color: var(--vert); }
.orange { color: var(--orange); }

.deux-colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }

dl.infos { margin: 0; display: grid; gap: 13px; }
dl.infos dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-pale); }
dl.infos dd { margin: 2px 0 0; font-weight: 600; }

/* ------------------------------- CONNEXION ------------------------------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--fond); }
.connexion .boite { width: 100%; max-width: 380px; }
.connexion .marque { text-align: center; margin-bottom: 22px; }
.connexion .marque .pastille {
  width: 60px; height: 60px; margin: 0 auto 12px;
  border-radius: 16px; background: var(--marque); color: #fff;
  display: grid; place-items: center;
}
.connexion h1 { margin: 0; font-size: 23px; font-weight: 800; }
.connexion .marque p { margin: 4px 0 0; color: var(--texte-doux); font-size: 14.5px; }

/* ==========================================================================
   RESPONSIVE — le comptoir travaille aussi sur tablette
   ========================================================================== */

@media (max-width: 1100px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .appli { flex-direction: column; }
  .barre {
    width: 100%; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--bord);
  }
  .barre nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .barre .pied { display: none; }
  .page, .entete { padding-left: 16px; padding-right: 16px; }
  .stat .valeur { font-size: 27px; }
}

/* ==========================================================================
   IMPRESSION — planches d'etiquettes
   ========================================================================== */

@media print {
  .barre, .entete, .sans-impression { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; max-width: none; }
  .carte { border: 0; box-shadow: none; }
  @page { size: A4; margin: 0; }
}

/* ==========================================================================
   GALERIE DE LA FLOTTE
   L'ecran qu'on tourne vers le client : la photo d'abord, le nom ensuite,
   le prix pour finir. Tout le reste se lit en gris.
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.carte-vehicule {
  display: flex;
  flex-direction: column;          /* les prix s'alignent d'une carte a l'autre */
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.carte-vehicule:hover {
  border-color: var(--marque);
  box-shadow: var(--ombre-forte);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Une voiture qu'on ne peut pas louer ne doit pas attirer l'oeil */
.carte-vehicule.indisponible .visuel img { filter: saturate(.45) brightness(.97); }

/* ------------------------------- LA PHOTO ------------------------------- */

.carte-vehicule .visuel {
  position: relative;
  width: 100%;
  height: 178px;
  background: linear-gradient(160deg, #eef1f5, #e2e6ec);
  overflow: hidden;
}
.carte-vehicule .visuel img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.carte-vehicule:hover .visuel img { transform: scale(1.04); }

/* Un voile sombre en bas : les etiquettes restent lisibles sur toute photo */
.carte-vehicule .visuel.avec-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(to top, rgba(17, 24, 39, .55), transparent);
  pointer-events: none;
}

.carte-vehicule .visuel-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; color: #9aa3af;
}
.carte-vehicule .visuel-vide span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Disponibilite : une pastille avec son point de couleur */
.carte-vehicule .etat {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  font-size: 11.5px; font-weight: 700; color: var(--texte);
}
.carte-vehicule .etat .point {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texte-pale);
}
.carte-vehicule .etat.libre { color: #14532d; }
.carte-vehicule .etat.libre .point { background: var(--vert); }

/* La categorie se pose sur le bas de la photo, dans sa propre couleur */
.carte-vehicule .categorie {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 4px 9px; border-radius: 999px;
  background: var(--teinte, var(--marque)); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ------------------------------- LE TEXTE ------------------------------- */

.carte-vehicule .infos {
  display: flex; flex-direction: column;
  flex: 1;                          /* pousse le prix en bas de la carte */
  padding: 14px 16px 16px;
}

.carte-vehicule .titre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.carte-vehicule .titre h3 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.25px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte-vehicule .annee { font-size: 12.5px; font-weight: 700; color: var(--texte-pale); flex: none; }
.carte-vehicule .plaque { margin-top: 2px; font-size: 11.5px; color: var(--texte-pale); }
.carte-vehicule .plaque .couleur { font-family: inherit; }

/* Trois colonnes fixes : les etiquettes ne passent jamais a la ligne, donc
   le prix reste a la meme hauteur d'une carte a l'autre. */
.carte-vehicule .specs {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.carte-vehicule .specs li {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; padding: 5px 6px; border-radius: 7px;
  background: var(--fond); color: var(--texte-doux);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carte-vehicule .specs svg { color: var(--texte-pale); flex: none; }

/* Le prix ferme la carte : c'est la derniere chose qu'on lit */
.carte-vehicule .tarif {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px;
}
.carte-vehicule .prix strong {
  display: block; font-size: 25px; font-weight: 800;
  letter-spacing: -.7px; line-height: 1.05; color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.carte-vehicule .prix span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-pale);
}
.carte-vehicule .tarifs-longs { text-align: right; font-size: 12px; font-weight: 700; color: var(--texte-doux); }
.carte-vehicule .tarifs-longs span { font-weight: 500; color: var(--texte-pale); }

.carte-vehicule .pied {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--bord);
  font-size: 11.5px; color: var(--texte-pale);
}
.carte-vehicule .pied span { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 640px) {
  .galerie { grid-template-columns: 1fr; }
}

/* Le nombre de reservations en attente, a cote de l'entree du menu */
.compteur-menu {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--marque); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center;
}

/* ==========================================================================
   VIDEOS D'ETAT DES LIEUX
   ========================================================================== */

.grille-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.carte-video { overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.carte-video.cochee { border-color: var(--rouge); box-shadow: 0 0 0 2px var(--rouge-fond); }
.carte-video.preuve { border-color: var(--violet-bord); }
.carte-video.supprimee { opacity: .6; }
/* Le fichier, pas un lecteur : une tuile avec son nom et le bouton de telechargement */
.carte-video .fichier-video {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 34px 14px 16px; background: var(--fond); color: var(--texte-pale);
  border-bottom: 1px solid var(--bord); text-align: center; min-height: 150px;
}
.carte-video .fichier-video .nom { color: var(--texte-doux); word-break: break-all; }
.carte-video .moment { position: absolute; top: 8px; left: 8px; }
.carte-video .coche {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, .95); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.carte-video .coche input { width: 18px; height: 18px; accent-color: var(--rouge); cursor: pointer; }
.carte-video .infos { padding: 12px 14px 14px; }

/* ==========================================================================
   PASTILLES DE FILTRE — une question du comptoir, son nombre, un clic
   ========================================================================== */
.pastilles-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pastille-filtre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--blanc);
  color: var(--texte-doux); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.pastille-filtre:hover { border-color: var(--bord-fort, #cbd5e1); text-decoration: none; }
.pastille-filtre .nb {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--fond); color: var(--texte-doux); font-size: 12px; font-weight: 700;
}
.pastille-filtre.vide { opacity: .55; }
.pastille-filtre.actif { border-color: var(--marque); color: var(--marque); box-shadow: 0 0 0 2px var(--marque-clair); }
.pastille-filtre.actif .nb { background: var(--marque); color: #fff; }
.pastille-filtre.rouge .nb   { background: var(--rouge-fond);  color: var(--rouge); }
.pastille-filtre.orange .nb  { background: var(--orange-fond); color: var(--orange); }
.pastille-filtre.violet .nb  { background: var(--violet-fond); color: var(--violet); }
.pastille-filtre.bleu .nb    { background: var(--bleu-fond);   color: var(--bleu); }
.pastille-filtre.vert .nb    { background: var(--vert-fond);   color: var(--vert); }
.pastille-filtre.actif.rouge, .pastille-filtre.actif.orange, .pastille-filtre.actif.violet,
.pastille-filtre.actif.bleu, .pastille-filtre.actif.vert { color: var(--marque); }

/* ==========================================================================
   RAPPORT
   ========================================================================== */

.grille-rapport { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.grille-rapport-large { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); }
.section-rapport {
  margin: 26px 0 12px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texte-pale);
}
.rapport-resume { font-size: 16.5px; line-height: 1.6; }
.rapport .violet { color: var(--violet); }

/* L'evolution d'un chiffre : vert quand c'est une bonne nouvelle */
.evo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.evo.hausse { color: var(--vert); background: var(--vert-fond); }
.evo.baisse { color: var(--rouge); background: var(--rouge-fond); }
.evo.neutre { color: var(--texte-pale); background: var(--fond); }

/* Classements : or, argent, bronze */
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.podium li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.podium .rang {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; background: var(--fond); color: var(--texte-doux);
}
.podium li:nth-child(1) .rang { background: #fdf0c4; color: #92600a; }
.podium li:nth-child(2) .rang { background: #e9edf3; color: #4b5565; }
.podium li:nth-child(3) .rang { background: #f9e2cf; color: #9a4d12; }

.liste-surveiller { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-surveiller li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.surveiller-rouge { border-color: var(--rouge-bord); }
.surveiller-violet { border-color: var(--violet-bord); }

.soldes-caisse strong { font-size: 1.12em; }
.piste-mini { background: var(--fond); border-radius: 4px; height: 10px; overflow: hidden; }
.piste-mini div { height: 100%; border-radius: 4px; min-width: 2px; }
.vignette-degat { width: 54px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bord); }

@media (max-width: 1100px) {
  .grille-rapport-large { grid-template-columns: 1fr; }
}

/* ------------------------------ MODE TELEVISION ------------------------------ */
/* Fond sombre, gros caracteres : lisible a trois metres, sans eblouir.       */

.mode-tv {
  --blanc: #121a2b; --fond: #0a0f1c; --texte: #f2f5fb; --texte-doux: #c3cadb; --texte-pale: #8d98af;
  --bord: #243049; --bord-fort: #33405e; --marque: #7aa2ff; --marque-clair: #1a2548; --marque-bord: #2f3f73;
  --vert: #3fd17f; --vert-fond: #0f2a1c; --vert-bord: #1d4d33;
  --rouge: #ff6b6b; --rouge-fond: #34161b; --rouge-bord: #5c262e;
  --orange: #ffab4c; --orange-fond: #33230f; --orange-bord: #5a3d18;
  --violet: #b794ff; --violet-fond: #241a3d; --violet-bord: #41306b;
  --bleu: #6aa8ff; --bleu-fond: #13263f; --bleu-bord: #23426a;
  --jaune: #f2cc5a; --jaune-fond: #2d2710; --jaune-bord: #52461b;
  background: var(--fond); color: var(--texte); font-size: 19px;
  cursor: none;
}
.mode-tv a { color: inherit; pointer-events: none; }
.mode-tv .alerte-bleu { color: var(--texte); }
.mode-tv .tv-entete {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 40px; background: rgba(10, 15, 28, .94); border-bottom: 1px solid var(--bord);
}
.mode-tv .tv-titre { font-size: 30px; font-weight: 800; letter-spacing: -.3px; }
.mode-tv .tv-sous { font-size: 18px; color: var(--texte-doux); }
.mode-tv .tv-droite { text-align: right; }
.mode-tv .tv-heure { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.mode-tv .tv-aide { font-size: 13px; color: var(--texte-pale); margin-top: 6px; }
.mode-tv .tv-page { padding: 28px 40px 80px; }
.mode-tv .tv-fin { text-align: center; color: var(--texte-pale); font-size: 15px; margin-top: 40px; }
.mode-tv .tv-pause {
  position: fixed; top: 110px; right: 40px; z-index: 6; padding: 10px 22px; border-radius: 999px;
  background: var(--orange); color: #111; font-weight: 800; letter-spacing: .1em;
}
.mode-tv .rapport-resume { font-size: 26px; line-height: 1.5; }
.mode-tv .grille-stats { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.mode-tv .stat { padding: 24px; }
.mode-tv .stat .valeur { font-size: 50px; }
.mode-tv .stat .libelle { font-size: 16px; }
.mode-tv .stat .detail { font-size: 17px; }
.mode-tv .evo { font-size: 17px; padding: 4px 12px; }
.mode-tv .carte > header h2 { font-size: 23px; }
.mode-tv .section-rapport { font-size: 18px; margin-top: 40px; }
.mode-tv .graphique { height: 360px; }
.mode-tv .barres .ligne { grid-template-columns: 260px 1fr auto; font-size: 19px; }
.mode-tv .barres .piste { height: 32px; }
.mode-tv .tableau { font-size: 19px; }
.mode-tv .tableau thead th { font-size: 14px; }
.mode-tv .petit { font-size: 16px; }
.mode-tv .podium .rang { width: 42px; height: 42px; font-size: 20px; }
.mode-tv .podium li { grid-template-columns: 44px minmax(0, 1fr) auto; }
.mode-tv .grille-rapport { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.mode-tv .grille-rapport-large { grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr); }
.mode-tv .podium li:nth-child(1) .rang { background: #4a3a0c; color: #ffd76a; }
.mode-tv .podium li:nth-child(2) .rang { background: #2c3446; color: #d6dcea; }
.mode-tv .podium li:nth-child(3) .rang { background: #43291a; color: #f3a86b; }
.rapport-chiffres { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.rapport-chiffres .stat .valeur { font-size: 27px; }
.mode-tv .rapport-chiffres { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.mode-tv .rapport-chiffres .stat .valeur { font-size: 46px; }

/* ==========================================================================
   CLIENTS — particulier ou societe, recherche par nom
   ========================================================================== */

.choix-type {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; cursor: pointer; background: var(--blanc);
}
.choix-type:hover { border-color: var(--bord-fort); }
.choix-type.actif { border-color: var(--marque); box-shadow: 0 0 0 2px var(--marque-clair); }
.choix-type input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--marque); }
.choix-type span span { display: block; margin-top: 2px; }

/* La recherche d'un client : on tape, la liste se filtre */
.choix-client { position: relative; }
.liste-clients {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow-y: auto;
  background: var(--blanc); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-petit); box-shadow: var(--ombre-forte);
}
.liste-clients li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.liste-clients li:hover, .liste-clients li.survol { background: var(--marque-clair); }
.liste-clients li.bloque { opacity: .5; cursor: not-allowed; }
.liste-clients li.vide { color: var(--texte-pale); cursor: default; }
.liste-clients .nom { font-weight: 600; }
.liste-clients .detail { font-size: 12.5px; color: var(--texte-pale); white-space: nowrap; }

/* ==========================================================================
   SAISIE DES MONTANTS ET DES KILOMETRES — « 100 000 DZD »
   ========================================================================== */

/* L'unite s'affiche a droite, dans le champ, sans gener la frappe */
.champ-unite { position: relative; display: block; width: 100%; }
.champ-unite > .champ { padding-right: 58px; }
.champ-unite::after {
  content: attr(data-unite);
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 600; color: var(--texte-pale); pointer-events: none;
}
[data-nombre] { font-variant-numeric: tabular-nums; text-align: right; }