/* La marque Boumbo, reprise de `boumbo/landing.html` — MEMES VALEURS, pas des
 * approximations. Une application qui ressemble a la landing sans l'egaler se
 * lit comme un produit different de celui qu'on a vendu.
 *
 * Bitume et jaune : le contraste fort tient de loin, dans une camionnette, sur
 * un telephone en plein soleil. Ce n'est pas un gout, c'est le contexte d'usage.
 *
 * La structure vit dans `_coquille/coquille.css` et ne se duplique pas. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --bitume:#15181C; --craie:#F1F3F5; --jaune:#F5C518; --sur-jaune:#15181C;
  --jaune-sombre:#C79C0C; --ardoise:#A5B0BA;

  --accent:var(--jaune);
  --encre:var(--craie);
  --fond:var(--bitume);
  --carte:#1C2026;
  --trait:#2A313A;
  --doux:var(--ardoise);
  --rayon:4px;
  --densite:11px;
  --titre:700 20px/1.2 "Archivo", system-ui, sans-serif;
}

body { font-family:"Archivo", system-ui, sans-serif; }

/* LE JAUNE EST UNE COULEUR D'ACTION, pas de decoration : il marque ce qui est
 * selectionne et ce qui est cliquable, jamais un fond large. Sur du bitume, un
 * aplat jaune fatigue en trois minutes. */
header { border-bottom:3px solid var(--jaune); background:var(--carte); }
h1 { color:var(--craie); text-transform:uppercase; letter-spacing:.5px; }
h1::after { content:""; display:inline-block; width:7px; height:7px;
            background:var(--jaune); border-radius:50%; margin-left:8px;
            vertical-align:middle; }

nav a.on { background:var(--jaune); color:var(--sur-jaune); font-weight:600; }
nav a:hover { background:#242a31; color:var(--craie); }

.veh { background:var(--carte); border-color:var(--trait); }
.veh:hover { border-color:var(--jaune-sombre); }
.veh.on { border-color:var(--jaune); box-shadow:inset 3px 0 0 var(--jaune); }

main { background:var(--carte); border-color:var(--trait); }
.tbl th { color:var(--jaune-sombre); }
.tbl tr:hover td { background:#242a31; }

/* Les chiffres en mono : ils s'alignent, et un kilometrage se lit en colonne. */
.tbl .num, .caps { font-family:"JetBrains Mono", ui-monospace, monospace; }

/* ── LA DISPOSITION, PROPRE A CETTE OFFRE ──────────────────────────────────────
 *
 * UN RAIL HORIZONTAL D'ICONES, de gauche a droite, sous l'en-tete. C'est la
 * forme d'une application qu'on ouvre sur un telephone pose sur un tableau de
 * bord : les six entrees tiennent en une ligne, le pouce les atteint toutes, et
 * aucune ne se cache derriere un menu.
 *
 * La coquille ne connait pas cette disposition. Elle cherche `#nav`, `#flotte`,
 * `#date`, `#carte`, `#vue` et `#etat` par identifiant ; ou ils se trouvent la
 * regarde pas. C'est ce qui permet a FML d'avoir une barre verticale et a
 * celle-ci un rail, sans une ligne de JavaScript de difference. */
.corps { grid-template-columns:minmax(0,1fr); gap:14px; }

#nav { display:flex; gap:8px; overflow-x:auto; padding:2px; }
#nav a { display:flex; flex-direction:column; align-items:center; gap:7px;
  min-width:96px; padding:13px 14px 11px; border-radius:var(--rayon);
  background:var(--carte); border:1px solid var(--trait);
  font-size:12px; font-weight:600; letter-spacing:.2px; white-space:nowrap; }
#nav a svg { width:26px; height:26px; }
/* Le trait de l'icone suit l'etat : `currentColor` fait le travail, aucune
   regle de couleur n'est ecrite pour les icones. */
#nav a.on { background:var(--jaune); color:var(--sur-jaune); border-color:var(--jaune); }
#nav a:not(.on):hover { border-color:var(--jaune-sombre); color:var(--craie); }

/* LE RAIL EST DANS LE CORPS, PAS DANS L'EN-TETE : il defile avec la page sur un
   telephone, au lieu de manger un tiers de la hauteur en permanence. */
header { display:flex; justify-content:space-between; align-items:center; }

/* La flotte passe a l'HORIZONTALE elle aussi : trois a vingt vehicules tiennent
   en une bande, et la carte recupere toute la largeur. Une colonne de gauche
   aurait coute 230 px pour afficher trois lignes. */
#flotte { flex-direction:row; flex-wrap:wrap; gap:8px; }
.veh { flex-direction:row; align-items:baseline; gap:10px; min-width:170px; }

.scene { grid-template-rows:minmax(320px, 56vh) 1fr; }

/* Les tuiles de synthese, en grille : sur fond sombre elles portent le chiffre
   mieux qu'un tableau. */
.tuiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px,1fr));
  gap:10px; margin-bottom:6px; }
.tuile { background:#20262e; border:1px solid var(--trait); border-radius:var(--rayon);
  padding:12px; display:flex; flex-direction:column; gap:2px; }
.tuile b { font:600 21px/1 "JetBrains Mono", ui-monospace, monospace; color:var(--jaune); }
.tuile span { font-size:11px; color:var(--doux); }
.tuile em { font-style:normal; font-size:11.5px; color:var(--craie); }