/* LA STRUCTURE EST COMMUNE, LA MARQUE NE L'EST PAS.
 *
 * Tout ce qui est ici vaut pour les quatre offres : une barre, une flotte, une
 * vue. Ce qui distingue une offre vit dans ses VARIABLES -- une couleur, une
 * graisse, une densite -- posees par son propre fichier.
 *
 * POURQUOI PAS QUATRE FEUILLES COMPLETES. Elles divergeraient : un correctif
 * applique a trois sur quatre, et c'est la quatrieme qu'un client regarde. Une
 * structure partagee et des variables par offre laissent la marque libre sans
 * laisser la mise en page se disperser. */
:root {
  --encre:#36454f; --fond:#f7f8f9; --carte:#fff; --trait:#e3e7ea;
  --accent:#e8a03d; --doux:#7a858c;
  --rayon:6px; --titre:600 18px/1.3 system-ui, sans-serif;
  --densite:10px;
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.55 system-ui, -apple-system, sans-serif;
       color:var(--encre); background:var(--fond);
       display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; }

header { display:flex; align-items:center; gap:28px; padding:14px 22px;
         background:var(--carte); border-bottom:2px solid var(--accent); }
h1 { margin:0; font:var(--titre); letter-spacing:-.2px; }
nav { display:flex; gap:6px; flex-wrap:wrap; }
nav a { color:var(--doux); text-decoration:none; padding:6px 12px;
        border-radius:var(--rayon); font-size:13px; }
nav a:hover { background:var(--fond); color:var(--encre); }
nav a.on { background:var(--accent); color:#fff; }

.corps { display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px;
         padding:18px 22px; align-items:start; }
#flotte { display:flex; flex-direction:column; gap:6px; }
.veh { display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
       background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon);
       padding:var(--densite) 12px; font:inherit; color:inherit; }
.veh:hover { border-color:var(--accent); }
.veh.on { border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.veh b { font-weight:600; }
.caps { font-size:11px; color:var(--doux); }

main { background:var(--carte); border:1px solid var(--trait);
       border-radius:var(--rayon); padding:16px; min-height:320px; }
footer { padding:10px 22px; color:var(--doux); font-size:12px;
         border-top:1px solid var(--trait); }

.tbl { border-collapse:collapse; width:100%; }
.tbl th { font-size:11px; text-transform:uppercase; letter-spacing:.4px;
          color:var(--doux); font-weight:600; }
.tbl th, .tbl td { padding:var(--densite) 10px; border-bottom:1px solid var(--trait);
                   text-align:left; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl tr:hover td { background:var(--fond); }
.vide { color:var(--doux); font-style:italic; }
.note { color:var(--doux); font-size:12px; margin-top:12px; }
.tag { font-size:10px; color:var(--doux); border:1px solid var(--trait);
       border-radius:3px; padding:1px 5px; margin-left:6px; }

/* LE CONTROLE DE DATE. Sa POSITION appartient a chaque offre -- en-tete chez
   FML, calendrier plein chez One -- mais son aspect de base est commun : un
   champ lisible et une note qui dit ce que la periode couvre. */
#date { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#date input[type="date"] { font:inherit; color:inherit; padding:5px 8px;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--carte); }
#date .note { margin:0; }
#date .vide { font-size:12px; }

/* Deux niveaux de titre dans un panneau : sans separation visible, deux
   tableaux successifs se lisent comme un seul. */
.section { font:600 13px/1.3 system-ui, sans-serif; text-transform:uppercase;
  letter-spacing:.5px; color:var(--doux); margin:22px 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--trait); }
.section:first-child { margin-top:0; }

/* LA CARTE ET LE PANNEAU, COTE A COTE. La carte porte le geste -- ou sont les
   vehicules, ou passent les trajets -- et le panneau porte le chiffre. Les
   empiler obligerait a faire defiler pour relier les deux. */
.scene { display:grid; grid-template-rows:minmax(260px, 42vh) 1fr; gap:14px; min-width:0; }
#carte { display:block; width:100%; height:100%; border:1px solid var(--trait);
         border-radius:var(--rayon); overflow:hidden; background:var(--carte); }
/* Une carte sans couche reste visible mais s'efface : elle dit « rien a montrer
   ici », pas « quelque chose a casse ». */
#carte.vide { opacity:.55; }