/* =========================================================
   FFF Responsive Safety Net (Divi-friendly)
   Objectif: éviter les débordements et rendre les médias fluides,
   sans toucher aux paddings/marges/layout définis dans Divi.
   ========================================================= */

/* 1) Calculs de largeur plus robustes (ne change pas le design, évite des surprises) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) Empêche le scroll horizontal accidentel (sans modifier les espacements) */
html,
body {
  max-width: 100%;
  overflow-x: hidden; /* volontairement "hidden" pour bloquer les débordements */
}

/* 3) Médias toujours contenus dans leur parent */
img,
svg,
video,
canvas,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* 4) Iframes: ne débordent pas (YouTube, Google Maps, etc.) */
iframe {
  max-width: 100%;
}

/* 5) Longues URLs / mots: évite qu'une seule chaîne casse la mise en page */
.et_pb_text,
.et_pb_blurb_description,
.et_pb_toggle_content,
.et_pb_tab_content,
.entry-content,
.woocommerce,
.et_pb_module {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6) Tableaux: on garde le tableau intact, mais on autorise un scroll local */
.et_pb_text table,
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 7) Cas Divi: certaines rows/sections peuvent dépasser à cause d'effets/transform */
.et_pb_section,
.et_pb_row,
.et_pb_column {
  max-width: 100%;
}

/* 8) Images de fond et overlays: éviter les débordements liés aux transformations */
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_module {
  background-clip: padding-box;
}

@media (max-width: 980px){
  html, body{
    overflow-x: clip;
  }
  @supports not (overflow-x: clip){
    html, body{ overflow-x: hidden; }
  }
}