/* responsive.css — règles mobiles COMMUNES à toutes les pages revendeur (JC 24/07).
   Défini UNE FOIS, branché sur chaque page (correction à la source, jamais recopié).
   Structure visée : body{display:flex} > aside.side (250px sticky) + main.
   Sur mobile : on empile — la barre latérale devient un bandeau horizontal défilant. */

/* TOUS ECRANS — main NE DOIT JAMAIS DEPASSER LA FENETRE (JC, 02/09/2026 : « sur les
   ecrans PC plus petits que celui de developpement il manque le cote droit »).
   main est un enfant flex:1 du body. Un enfant flex a min-width:auto par defaut :
   il refuse de descendre sous la largeur INTRINSEQUE de son contenu. Des qu'un
   bloc interne est en nowrap (carte vehicule d'upload.html : 800 px), main
   s'elargit au-dela de la fenetre et la droite disparait — pas de barre de
   defilement, juste du contenu coupe. Mesure a 1024 px : main jusqu'a 1087.
   min-width:0 etait pose plus bas, mais seulement sous 900 px : le PC n'etait
   pas couvert. La regle vaut a toutes les largeurs — c'est LE correctif
   flexbox canonique, et il ne change rien la ou rien ne debordait.
   overflow-x:auto : si un bloc interne reste trop large malgre tout, il defile
   dans main au lieu d'etre coupe. */
main { min-width: 0; overflow-x: auto; }

@media (max-width: 900px) {
  /* La BARRE LATÉRALE est gérée par ui-chrome.js (tiroir ☰ mobile, menu en colonne) :
     AUCUNE règle .side ici — sinon conflit (leçon du 24/07 : le menu s'affichait en ligne). */
  main { min-width: 0; padding-bottom: 84px !important; } /* dégage le bas pour la rangée flottante (menu · FR · Assistant), au plus près du contenu */
  /* QUAND UN <footer> SUIT <main>, c'est LUI le dernier element : la reserve
     doit etre sous lui, pas sous main. Mesure du 02/09/2026 sur
     catalogue-gratuit en 375 px : 84 px de vide entre les liens legaux et le
     copyright, et le copyright lui-meme sous les pastilles. Les deux defauts
     ont la meme cause : la reserve etait au mauvais etage. La regle ci-dessous
     deplace la reserve sur le footer et remet main a sa marge normale.
     Les pastilles sont EMPILEES (FR au-dessus de l'Assistant) : deux hauteurs
     de 46 px + les marges, soit ~130 px a couvrir. */
  main:has(+ footer) { padding-bottom: 24px !important; }
  main + footer { padding-bottom: 140px !important; }
  /* Catalogue mobile (JC 24/07) : on masque le panneau de filtres à remplir à la main —
     on garde seulement le catalogue cliquable (zones + grille de marques). PC inchangé. */
  .filterbar { display: none !important; }
  /* Les colonnes deviennent des piles */
  .vin-2col, .two-col, .grid2 { display: block !important; }
  /* Grilles internes (Stages, prestations, contenu+récap) : plus de débordement à droite */
  .cols { grid-template-columns: 1fr !important; }
  .grid3 { grid-template-columns: 1fr 1fr !important; }
  .platevin-cols { grid-template-columns: 1fr !important; }
  body { overflow-x: hidden; }
  /* MOBILE = TACTILE (règle JC 24/07) : aucune barre de défilement visible, on glisse au doigt */
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .vin-2col > div + div { margin-top: 12px; }
  /* Tableaux larges : défilement horizontal au lieu de casser la page */
  .table-wrap, .tablewrap { overflow-x: auto; }
  table { max-width: 100%; }
  img, canvas, video { max-width: 100%; height: auto; }
}