/*!
 * Module: twoblocs
 * Nouvelle maquette:
 * - Image à gauche + contenu (CMS/WYSIWYG) à droite
 * - Blocs collés (aucun espace entre colonnes)
 * - Angles arrondis aux extrémités (wrapper avec overflow:hidden)
 * - Section pleine largeur même dans un thème encapsulé en .container
 */

/* Section pleine largeur — approche robuste sans scroll horizontal */
section.twoblocs.twoblocs-fullwidth {
  position: relative;
  display: flow-root;        /* nouveau contexte de formatage pour éviter tout chevauchement avec l’élément précédent */
  clear: both;               /* démarre après les éléments flottants éventuels */
  margin-top: 32px;          /* espace suffisant pour commencer après homeproducts */
  margin-bottom: 24px;
  width: 100%;
  z-index: 0;                /* reste dans le flux sans passer au-dessus des éléments précédents */
}

/* Petit titre au-dessus (style overline) */
.twoblocs .twoblocs-overline {
  margin: 0 0 10px 0;
  padding: 0 4px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

/* Titre de section (heading) aligné à gauche au-dessus des deux blocs */
.twoblocs .twoblocs-heading {
  margin: 0 0 6px 0;        /* réduit l’espace vertical */
  font-size: 1rem;          /* taille plus compacte */
  line-height: 1.1;         /* resserre la hauteur de ligne */
  font-weight: 700;         /* un peu moins épais */
  letter-spacing: .02em;
  text-transform: none;
  color: #222;
  pointer-events: none;     /* si un recouvrement subsiste, laisse passer les clics vers les produits en dessous */
}

/* Wrapper qui porte les angles arrondis et masque les débordements */
.twoblocs .twoblocs-wrapper {
  border-radius: 16px;
  overflow: hidden;
  background: #f6f2ec; /* crème comme la maquette */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(17,17,17,.06);
}

/* Grille 2 colonnes collées (gap 0) et hauteurs égales par défaut */
.twoblocs .twoblocs-inner {
  display: grid;
  grid-template-columns: 0.44fr 0.56fr; /* proportions proches du visuel */
  gap: 0;
  align-items: stretch; /* étire les items à la hauteur de la ligne */
}

/* Colonnes */
.twoblocs .twoblocs-col {
  min-width: 0; /* permet aux contenus longs de shrink correctement */
}

/* Colonne gauche: image qui couvre toute la hauteur de la ligne */
.twoblocs .twoblocs-left {
  position: relative;
}
.twoblocs .twoblocs-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* couvre verticalement selon la hauteur du bloc droit */
}

/* Colonne droite: bloc de contenu */
.twoblocs .twoblocs-right .twoblocs-block {
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  background: #fff; /* panneau clair comme la maquette */
  border: 1px solid rgba(0,0,0,.05);
  border-left: none; /* joint propre avec l'image (collé) */
  border-radius: 0 16px 16px 0; /* arrondi seulement à l'extrémité droite */
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Titre / contenu */
.twoblocs .twoblocs-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem; /* titre plus présent comme sur le visuel */
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .2px;
  color: #222;
}
.twoblocs .twoblocs-content {
  line-height: 1.6;
  color: #555;
}
.twoblocs .twoblocs-content img {
  max-width: 100%;
  height: auto;
}

/* Responsive: pile en 1 colonne sur mobile/tablette */
@media (max-width: 991.98px) {
  .twoblocs .twoblocs-inner {
    grid-template-columns: 1fr;
  }
  .twoblocs .twoblocs-img {
    height: auto;      /* image redevient responsive */
    max-height: 60vh;  /* évite une image trop haute sur mobile */
  }
  .twoblocs .twoblocs-right .twoblocs-block {
    padding: 20px;
  }
}

/* Optionnel: protection anti-overflow horizontale (au cas où des contenus débordent) */
.twoblocs .twoblocs-content {
  overflow-wrap: anywhere;
  word-break: normal;
}