/* Mise en page générale : barre haute, garage à gauche, scène au centre,
   résultats à droite.

   La scène 3D est l'élément coûteux : elle est dimensionnée par la grille, et
   le canvas suit son conteneur par ResizeObserver (render/scene.js). Aucune
   dimension de canvas n'est écrite ici — un canvas redimensionné en CSS est un
   canvas flou. */

#topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--sp-3);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
}

.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-0); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 10px; height: 20px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, var(--ink-0) 0 4px, var(--bg-0) 4px 8px);
}
.brand-name { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-md); }

#scenario-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
#scenario-tabs::-webkit-scrollbar { display: none; }

.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
/* Sélecteur de langue : étroit, la langue choisie s'y lit en entier. */
.lang-select { max-width: 11rem; padding-block: 4px; font-size: var(--fs-sm); }

#workspace {
  display: grid;
  grid-template-columns: var(--garage-w) minmax(0, 1fr) var(--results-w);
  gap: 1px;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  background: var(--line-1);
  transition: grid-template-columns var(--t-mid) var(--ease);
}

/* Replier un panneau laisse la scène respirer sans la démonter : le canvas
   garde son contexte WebGL, seul le conteneur change de largeur. */
body[data-panel-garage='closed'] #workspace { --garage-w: 0px; }
body[data-panel-results='closed'] #workspace { --results-w: 0px; }
body[data-panel-garage='closed'] #garage,
body[data-panel-results='closed'] #results { opacity: 0; pointer-events: none; }

#stage-wrap {
  position: relative;
  min-width: 0;
  background: var(--bg-0);
  overflow: hidden;
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;           /* la caméra prend les gestes, pas le défilement */
}
/* Le réalisateur pose `data-gesture` quand il écoute les gestes de la vue
   (render/cameras.js) : la main ouverte dit qu'on peut tourner l'image. */
#stage[data-gesture] { cursor: grab; }
#stage[data-gesture='drag'] { cursor: grabbing; }

/* Tout ce qui flotte au-dessus de la scène ne doit jamais intercepter un
   geste de caméra : seuls les éléments interactifs réactivent les événements. */
#hud, #stage-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#stage-overlay { display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-3); }
#camera-bar, #stage-notices { pointer-events: auto; align-self: flex-end; }
/* Jamais plus large que la scène : il passe à la ligne au lieu d'être coupé
   par le bord, et sa hauteur réelle est reportée au HUD (render/cameras.js). */
#camera-bar { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
#stage-notices { pointer-events: none; display: grid; gap: var(--sp-1); justify-items: end; }

#playback {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  z-index: 10;
  min-width: min(620px, calc(100% - 2 * var(--sp-4)));
  pointer-events: auto;
}

/* Les panneaux latéraux défilent, la grille ne bouge pas. */
#garage, #results {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--bg-1);
  transition: opacity var(--t-mid) var(--ease);
}
#garage > .panel-body, #results > .panel-body { overflow-y: auto; overflow-x: hidden; }

/* Quatre voitures : le tableau des résultats, même resserré (panels.css),
   demande plus que les 380 px du panneau. Le panneau s'élargit alors avec
   l'écran, entre deux bornes, aux dépens de la scène et non du garage, dont
   les cartes ont déjà leur largeur la plus juste : la scène garde plus de
   600 px à 1366 px d'écran. Le nombre de colonnes est celui du tableau
   affiché (`data-columns`, ui/compare.js), pas celui du garage : c'est le
   tableau qu'il faut loger. Le sélecteur est sans poids, pour qu'un panneau
   replié garde sa largeur nulle. Sous 1181 px, les panneaux se resserrent et
   un tableau trop large défile dans son cadre. */
@media (min-width: 1181px) {
  :where(#workspace:has(#results-table .cmp[data-columns='4'])) {
    --results-w: clamp(420px, 16vw + 230px, 520px);
  }
}

/* Écrans étroits : la scène passe au-dessus, les panneaux deviennent des
   tiroirs plein écran. Un comparateur reste utilisable sur une tablette. */
@media (max-width: 1180px) {
  :root { --garage-w: 260px; --results-w: 300px; }
}

@media (max-width: 920px) {
  #workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(240px, 42vh) minmax(0, 1fr);
  }
  #garage, #results {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform var(--t-mid) var(--ease);
  }
  #results { transform: translateX(100%); }
  body[data-drawer='garage'] #garage,
  body[data-drawer='results'] #results { transform: none; box-shadow: var(--shadow-3); }
  #stage-wrap { grid-row: 1; }
  #playback { bottom: var(--sp-2); }
}

/* Téléphone : les boutons de la barre haute prenaient toute la largeur et
   la colonne élastique des épreuves tombait à zéro. Les onglets passent sur
   une seconde rangée, défilable, et la hauteur de la barre suit : tout ce
   qui se cale sous elle lit la même variable. */
@media (max-width: 640px) {
  :root { --topbar-h: 92px; }
  #topbar {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    row-gap: 0;
    padding-bottom: var(--sp-1);
  }
  #scenario-tabs { grid-column: 1 / -1; grid-row: 2; }
  .topbar-actions { justify-self: end; }
}