/* =====================================================================
   ERNEX — Correctif Responsive (responsive-fix.css)
   Objectif : rendre la page d'accueil parfaitement adaptée à TOUS les
   écrans (mobile, tablette, ordinateur, grand écran) SANS modifier le
   design, les couleurs, les textes ni la mise en page existante.
   Chargé en dernier : il ne fait que corriger les débordements et la
   mise à l'échelle des médias.
   ===================================================================== */

/* 1) Supprime tout défilement / débordement horizontal parasite
      (cause principale du décalage et du « non-centrage » sur écran). */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2) Les médias ne dépassent jamais la largeur de l'écran. */
img, video, iframe, svg, picture, canvas {
  max-width: 100%;
  height: auto;
}
/* garde le ratio des vidéos d'arrière-plan sans les déformer */
video { height: auto; }

/* 3) Empêche n'importe quel bloc de forcer une largeur plus grande
      que la fenêtre (images décochées « backstage », diaporamas, etc.). */
.u-image,
.u-image img,
.u-gallery,
.u-slider,
.u-carousel,
.u-layout,
.u-container-layout,
.u-sheet {
  max-width: 100%;
}

/* 4) Menu mobile coulissant (off-canvas) : on le garde hors écran sans
      qu'il n'élargisse la page. */
.u-sidenav,
.u-sidenav-overflow,
.u-offcanvas {
  max-width: 100vw;
}

/* 6) UNIFICATION DE LA MISE EN PAGE : toutes les sections de la page
      d'accueil partagent EXACTEMENT le même conteneur que l'en-tête et le
      pied de page — largeur max 1180px, centré, avec une gouttière
      latérale IDENTIQUE (clamp(1.25rem,5vw,2.5rem)). Résultat : tous les
      titres, textes et contenus s'alignent sur le même bord gauche/droit
      et les marges latérales sont parfaitement égales sur tout le site. */
.u-body .u-sheet {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1.25rem, 5vw, 2.5rem) !important;
  padding-right: clamp(1.25rem, 5vw, 2.5rem) !important;
  box-sizing: border-box !important;
}
/* les grilles internes remplissent ce conteneur et s'alignent à gauche
   (au lieu d'avoir des largeurs fixes différentes par section). */
.u-body .u-sheet > [class*="u-layout-wrap"] {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* 7) (Les pages internes utilisent désormais leur propre mise en page :
      aucune règle Nicepage n'est nécessaire ici.) */

/* 5) Sur téléphone : sécurise les images surdimensionnées de Nicepage
      qui gardent parfois une largeur fixe en pixels. */
@media (max-width: 767px) {
  .u-image,
  .u-image img,
  [class*="u-image"] img {
    max-width: 100% !important;
  }
  /* évite qu'un conteneur en largeur fixe ne crée un débordement */
  .u-sheet,
  .u-layout-cell,
  .u-container-layout {
    max-width: 100% !important;
  }
}

/* 8) MOBILE : l'illustration de la section « Branding » (#block-3) penchait
      vers la gauche (largeur fixe + marge gauche négative héritées de
      Nicepage). On la recentre et on l'adapte à la largeur de l'écran. */
@media (max-width: 767px){
  /* empiler proprement la section en une colonne */
  #block-3{ overflow: hidden !important; }
  #block-3 .u-layout-wrap-1{ display: block !important; width: 100% !important; margin: 0 !important; }
  #block-3 .u-layout-cell-1,
  #block-3 .u-layout-cell-2{ display: block !important; width: 100% !important; min-height: 0 !important; }
  #block-3 .u-container-layout-1{
    padding-left: clamp(1.25rem, 5vw, 2.5rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2.5rem) !important;
  }
  #block-3 .u-container-layout-2{ padding-left: 0 !important; padding-right: 0 !important; }
  #block-3 .u-sheet-1{ min-height: 0 !important; }
  /* illustration centrée et AGRANDIE (le PNG a de grandes marges
     transparentes : on l'élargit, le surplus transparent est masqué) */
  #block-3 .u-image-1{
    position: static !important;
    float: none !important;
    inset: auto !important;
    display: block !important;
    width: min(132vw, 720px) !important;
    max-width: none !important;
    height: auto !important;
    margin: 1rem 0 0 calc((100vw - min(132vw, 720px)) / 2) !important;
  }
}