/* Bandeaux haut/bas */
.banner-strip {
  width: 100%;
  display: block;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-span: all;
  column-span: all;
}

.banner-strip img {
  display: block;
  width: 100%;
  height: auto;            /* Respecte les proportions */
  object-fit: cover;       /* Remplissage élégant si un conteneur fixe est ajouté plus tard */
  transition: opacity .25s ease-in-out;
  opacity: 0;              /* visible après préchargement */
  margin-top: 0;
}

.banner-strip img.is-ready { opacity: 1; }

/* Optionnel : limiter la hauteur max si souhaité
.banner-strip img { max-height: 420px; }
*/

/* === Intro pleine largeur + colonnes 50/50 (pages about_us / camera / contact) === */
@media (min-width: 900px) {
  /* La rangée principale en flex + wrap pour autoriser les blocs full-width */
  .table-container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 80px;
  }

  /* Intro pleine largeur (au-dessus des colonnes) */
  .table-container > .intro,
  .table-container > .row > .intro {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Colonnes égales (50/50) */
  .table-container > .row > .col-1,
  .table-container > .row > .col-2 {
    flex: 1 1 0 !important;   /* parts égales */
    max-width: none !important;
    min-width: 0;              /* évite les débordements */
  }

  /* Si un bandeau se retrouve dans la row, il prend sa propre ligne */
  .table-container > .row > .banner-strip {
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 0;
  }
}

@media (max-width: 899.98px) {
  /* Empilement propre en mobile */
  .table-container > .row > .col-1,
  .table-container > .row > .col-2 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .table-container > .intro,
  .table-container > .row > .intro {
    width: 100% !important;
  }
}
/* Marge uniquement pour la banner du bas */
.banner-strip:last-of-type {
  margin-top: 1px;
}