/* ------------------------------------------------------------------ bureau
   Les styles qui ne servent que devant un écran : la barre latérale, et les
   variantes larges des composants. index.html les charge sous condition de
   largeur, ils ne sont donc ni dans la coquille ni sur le téléphone de
   Redouane. Le seul point de bascule de l'app reste 900 px.                  */

.coque { display: flex; align-items: stretch; }
.coque__principal { flex: 1; min-width: 0; }
.coque__contenu { padding-bottom: var(--e-10); }

/* La barre compacte s'arrête au bord de la barre latérale : elle appartient à
   la colonne de contenu, pas à la fenêtre. */
.entete__barre { left: var(--largeur-laterale); }


/* === Barre latérale ======================================================= */

.laterale {
  flex: 0 0 var(--largeur-laterale);
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-5) var(--e-3);
  background: var(--noir); color: var(--sur-noir);
}

.laterale__marque {
  display: flex; align-items: baseline; gap: 6px;
  padding: var(--e-2) var(--e-3) var(--e-5);
}
.laterale__marque img { height: 12px; width: auto; }
.laterale__marque span {
  font: 500 13px/1 var(--police-marque);
  letter-spacing: .005em; white-space: nowrap;
}

.laterale__lien {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--touche); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2);
  color: var(--sur-noir-2);
  font: var(--t-corps-fort);
  transition: background var(--d-1), color var(--d-1);
}
.laterale__lien:hover { color: var(--sur-noir); background: var(--sombre-survol); }
.laterale__lien.est-actif { color: var(--sur-noir); background: var(--sombre-actif); }
.laterale__lien svg { width: 20px; height: 20px; flex: 0 0 auto; }

.laterale__filet { height: 1px; background: var(--sombre-actif); margin: var(--e-3) var(--e-3); }
.laterale__bas { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-1); }

.laterale__actions { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-2) var(--e-1); }
/* Texte calé à gauche, derrière son icône. Centré, un libellé qui passe sur
   deux lignes se lit en escalier et ne s'aligne plus sur les entrées de
   navigation juste au-dessus. */
.laterale__actions .bouton { justify-content: flex-start; text-align: left; }
/* La barre laterale est noire dans les deux themes. Un bouton « fort », qui est
   noir sur fond clair, y disparaissait entierement : le geste le plus frequent
   du terrain, invisible sur un ordinateur. Il prend donc ici le traitement
   inverse, clair sur fond noir. */
.laterale__actions .bouton--fort { background: var(--sur-noir); color: var(--noir); }


/* === Variantes larges ===================================================== */

.galerie { grid-template-columns: repeat(6, 1fr); }

/* La feuille se centre au lieu de monter du bas, et perd sa poignée : on la
   ferme à la souris, pas au doigt. */
.voile { align-items: center; }
.feuille {
  max-width: 560px; max-height: 84vh; border-radius: var(--r-4);
  animation: tx-apparait var(--d-2) var(--courbe);
}
@keyframes tx-apparait {
  from { transform: scale(.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.feuille__poignee { display: none; }
.feuille__prise { touch-action: auto; cursor: default; }
.feuille__prise:active { cursor: default; }

.toasts { bottom: var(--e-6); }

.photos__geste { min-height: 140px; }
.montant { padding: var(--e-8); }
.fiche__gestes .bouton { flex: 0 0 auto; min-width: 220px; }