/* LA MARQUE ET LA DISPOSITION DE CETTE OFFRE, ET SEULEMENT ELLES.
 *
 * La STRUCTURE commune vit dans `_coquille/coquille.css` : les boutons de
 * vehicule, les tableaux, la carte, les notes. Elle ne se duplique pas -- quatre
 * feuilles completes divergeraient, un correctif serait applique a trois sur
 * quatre, et c'est la quatrieme qu'un client regarde.
 *
 * Ce qui se redefinit ici, c'est le PLACEMENT. La coquille cherche ses regions
 * par identifiant sans se soucier de leur position : chaque offre peut donc
 * poser sa grille sans qu'aucune ligne de JavaScript ne change. C'est ce qui
 * permet quatre interfaces reellement differentes, et une seule coquille.
 *
 * FML : LE GESTIONNAIRE DE FLOTTE CLASSIQUE. Barre verticale a gauche, carte a
 * droite, panneau dessous. Cette offre vise un integrateur qui connait deja ce
 * geste ailleurs ; le surprendre ne lui apporterait rien.
 */
:root {
  --accent:#4a6fa5; --encre:#2b3a4a; --fond:#f5f7fa; --densite:7px;
  --titre:600 17px/1.25 system-ui, sans-serif;
  --barre:216px;
}

/* L'EN-TETE PORTE LE NOM ET LA DATE, rien d'autre : la navigation descend dans
   la barre. Un en-tete qui porte les deux oblige l'oeil a chercher lequel des
   deux rangs il vient de changer. */
header { justify-content:space-between; gap:16px; }

/* LA BARRE : navigation en haut, flotte en bas, separees par un titre. Les deux
   sont des choix, et ils ne se melangent pas -- « quel ecran » n'est pas « quel
   vehicule », et une liste unique ferait croire que si. */
.corps { grid-template-columns:var(--barre) minmax(0,1fr); }
.barre { display:flex; flex-direction:column; gap:14px; position:sticky; top:18px; }
.barre nav { flex-direction:column; gap:2px; }
.barre nav a { padding:9px 12px; border-radius:var(--rayon); font-size:13.5px;
  border-left:3px solid transparent; }
.barre nav a.on { background:var(--accent); color:#fff; border-left-color:var(--accent); }
.barre nav a:not(.on):hover { background:var(--carte); border-left-color:var(--trait); }

.flotte-titre { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--doux); font-weight:600; padding:0 12px;
  border-top:1px solid var(--trait); padding-top:12px; }
#flotte { display:flex; flex-direction:column; gap:4px; }

/* LA CARTE PREND LA HAUTEUR, le panneau ce qui reste. Un gestionnaire regarde
   d'abord OU, et ensuite COMBIEN. */
.scene { grid-template-rows:minmax(300px, 52vh) 1fr; }