/* CSS historique (inchangé) */

.zoom a img:hover {
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
h1 {
  display: inline;
}
h2 {
  display: inline;
  font-weight: normal;
}
h3 {
  display: inline;
}
.arrondiFond {
  border-color: #FFFFFF;
  border-style: outset;
  border-width: 1px;
  padding: 10px;
  background: white;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
a:link {  text-decoration: none; }
a:visited {  text-decoration: none; }
a:hover {  text-decoration: none; font-weight: 600; font-size: 102%; }
a:active {  text-decoration: none; }
span {
  display: inline-block;
}

/* Bouton visible seulement sur mobile (par défaut caché) */
.bl-mobile-only {
  display: none;
}

.bl-menu-toggle {
  border: 1px solid #ffffff;
  background: #FF9933;
  color: #ffffff;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icône hamburger 3 traits */
.bl-menu-icon {
  display: inline-block;
}
.bl-menu-icon span {
  display: block;
  width: 18px;
  height: 2px;
  background: #ffffff;
  margin: 3px 0;
}

/* Overlay derrière le menu / colonne gauche */
.bl-overlay {
  display: none;
}
/* Logo BaroLand - taille desktop */
table.bl-header-table img.bl-logo-img {
  width: 120px;      /* fixe la largeur sur ordinateur */
  height: auto;      /* garde les proportions */
  display: inline-block;
}

/* ===== VERSION MOBILE UNIQUEMENT ===== */
@media (max-width: 900px) {
	
  /* Le bouton Menu apparaît sur mobile */
  .bl-mobile-only {
    display: inline-block;
  }

  /* Colonne de gauche en panneau coulissant */
  #leftCol {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 280px;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;
    box-shadow: 2px 0 6px rgba(0,0,0,0.35);
  }

  body.bl-sidebar-open #leftCol {
    transform: translateX(0);
  }

  .bl-overlay {
    display: none;
  }

  body.bl-sidebar-open .bl-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 900;
  }

  /* Barre de menus FIXE en haut sur mobile
     (la couleur de fond dynamique reste gérée dans la page HTML) */
  .bl-topbar-table {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 800;
  }

  /* On pousse le bloc logo + bandeau sous la barre fixe */
  .bl-header-table {
    margin-top: 40px;  /* ajuste 30–45 si besoin selon la hauteur de la barre */
  }

  /* Ligne des menus en flex (bouton + liens) */
  .bl-topbar {
    display: flex;
    align-items: center;
    white-space: nowrap;  /* à commenter si ça déborde trop */
    gap: 4px;
  }

  .bl-topbar font {
    display: inline-block;
    font-size: 13px;
  }

  /* On garde le bouton Menu à gauche */
  .bl-topbar .bl-mobile-only {
    margin-left: 0;
  }


  /* Tables 90% → 100% sur mobile (et 95% si besoin) */
  table[width="90%"],
  table[width="95%"] {
    width: 100% !important;
  }

/* Images responsives, sauf le logo et .no-mobile-scale */
img:not(.bl-logo-img):not(.no-mobile-scale) {
  max-width: min(400%, 90vw);
  height: auto;
}

/* Bandeau spécifique : bandeau1.gif responsive à 80% */
img[src*="bandeau1.gif"] {
  max-width: 80% !important;
  height: auto;
}

  /* Logo plus petit sur mobile */
  table.bl-header-table img.bl-logo-img {
    display: inline-block !important;
    width: 70px !important;
    max-width: 80px !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}