/* =============================================
   RESPONSIVE - MSP Zyxel
   Basé sur la structure layout_min.css existante
   ============================================= */

/* ── Video iframe fluid ── */
.video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── Images de base ── */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
p.awards-image img {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  display: block;
}

/* ── Footer ── */
#footer .wrapper {
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
}
#footer a { padding: 2px 6px; }

/* ==============================================
   BANNER DESKTOP : texte + formulaire côte à côte
   ============================================== */

/* Reset du position:fixed venant de layout_min */
.banner-form-float {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  z-index: auto !important;
  width: auto !important;
}

.banner-content-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
}

.banner-content-row .banner-cta {
  flex: 0 0 auto;
  max-width: 50%;
  background-color: #F9F9F9;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  height: auto !important;
}

.banner-content-row .banner-form-float {
  flex: 1 1 auto;
  padding: 0px 32px !important;
}

.banner-cta-inner {
  padding: 55px 24px!important;
}
.banner-cta-inner h1 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}
.banner-cta-inner h2 {
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}
.banner-cta-inner ul {
  margin: 0 !important;
  padding-left: 18px !important;
  line-height: 1.6 !important;
}
.banner-cta-inner ul li {
  margin-bottom: 2px !important;
  font-size: 14px;
}

/* ==============================================
   TABLETTE (max 991px)
   ============================================== */
@media screen and (max-width: 991px) {
  .two-columns { flex-direction: column; }
  .two-columns .first-col,
  .two-columns .second-col { width: 100%; flex: 1 1 100%; }
  .first-col-image { max-width: 360px; margin: 0 auto !important; }
  .ml-90 { margin-left: 0 !important; }
  .pt-80 { padding-top: 30px; }
  .carousel1 { width: 95%; margin: 0 auto; }
  #row_4 { margin-top: 40px; }
  .banner-content-row .banner-cta { max-width: 60%; }
  .banner-cta-inner { padding: 16px 18px; }
  .banner-cta-inner h1 { font-size: 20px !important; }
  .banner-cta-inner h2 { font-size: 13px !important; }
  .banner-content-row .banner-form-float { padding: 16px !important; }
}

/* ==============================================
   MOBILE (max 768px)
   ============================================== */
@media screen and (max-width: 768px) {

  /* --- BANNIÈRE : pleine largeur, empilement vertical --- */

  /* La bannière image : on corrige le margin-top qui vient de layout_min
     (.banner-img { margin-top: 75px } = hauteur du header fixe)
     On garde 75px pour ne pas passer sous le header */
  #main .banner-wrap .banner-img {
    height: 200px !important;
    margin-top: 75px !important;
  }

  /* Supprime tout espace autour du banner-wrap */
  #main .banner-wrap {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Empilement vertical texte + formulaire */
  .banner-content-row {
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .banner-content-row .banner-cta {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .banner-cta-inner { padding: 14px 16px; }
  .banner-cta-inner h1 { font-size: 19px !important; }
  .banner-cta-inner h2 { font-size: 13px !important; }

  .banner-content-row .banner-form-float {
    width: 100% !important;
    padding: 12px 16px !important;
  }

  /* --- ESPACEMENTS --- */
  #row_0 { padding-top: 0 !important; }
  #row_4 { margin-top: 0 !important; padding: 0 !important; }
  #row_5 .frm-wrapper {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  /* Supprime le padding du wrapper pour coller le formulaire à gauche */
  #row_5.wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- FORMULAIRES ALIGNÉS À GAUCHE --- */
  .banner-form-float,
  #row_5 .frm-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hs-form-frame,
  .banner-form-float .hs-form-frame,
  #row_5 .hs-form-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    --hsf-background__padding: 0px !important;
    --hsf-default-background__padding: 0px !important;
  }
  .hs-form-frame iframe {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- FORMULAIRE HUBSPOT : forcer alignement à gauche --- */
  /* Conteneur row_5 pleine largeur sans centrage */
  #row_5,
  #row_5 .frm-wrapper,
  #row_5 .contact_section_inner,
  #row_5 .row,
  #row_5 [class*="col-"] {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
  /* Annule tout centrage Bootstrap sur le formulaire */
  #row_5 .hs-form-frame {
    float: none !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
  }
  /* Variables CSS HubSpot : forcer alignement interne à gauche */
  #row_5 .hs-form-frame {
    --hsf-form__text-align: left !important;
    --hsf-submit__alignment: left !important;
    --hsf-legal__text-align: left !important;
  }
  /*
  #row_5 h5.text-center {
    text-align: left !important;
  }*/

  /* --- TEXTE JUSTIFIÉ --- */
  p, li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
  h5.text-center, h6.text-center { text-align: center !important; }
  #sub-title { padding: 13px!important }
  #footer-it { text-align: center!important }

  /* --- DIVERS --- */
  button.header-button { padding: 15px 12px; font-size: 14px; }
  .first-col-image { max-width: 280px; margin: 0 auto !important; }
  .partner-image { margin-left: 0 !important; max-width: 260px; }
  .pt-80 { padding-top: 20px; }
  .pb-35 { padding-bottom: 10px; }
  .carousel1 { width: 100%; margin: 0; }
  h5 { font-size: 20px; }
  h6 { font-size: 16px; }

  #footer .wrapper { flex-direction: column; align-items: center; }
}

/* ==============================================
   IPHONE (max 430px) — iPhone 14 Pro Max, 14, 13
   ============================================== */
@media screen and (max-width: 430px) {

  body { overflow-x: hidden; }

  /* Bannière image réduite */
  #main .banner-wrap .banner-img {
    height: 170px !important;
    margin-top: 75px !important;
  }

  /* Texte bannière compact */
  .banner-cta-inner { padding: 12px 14px; }
  .banner-cta-inner h1 { font-size: 17px !important; line-height: 1.25 !important; }
  .banner-cta-inner h2 { font-size: 12px !important; }
  .banner-cta-inner ul li { font-size: 13px; }

  /* Images pleine largeur */
  .first-col-image,
  .partner-image { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; }
  img.img-responsive { max-width: 100%; width: 100%; }
  p.awards-image img { max-width: 100%; }

  /* Carousel */
  .carousel1, .carousel { width: 100% !important; margin: 0 !important; padding: 8px!important }

  /* Espacements réduits */
  .pt-80 { padding-top: 16px; }
  .pb-35 { padding-bottom: 8px; }
  .mt-50 { margin-top: 20px !important; }
  .mb-50 { margin-bottom: 20px !important; }
  h5 { font-size: 18px; }
  h6 { font-size: 15px; }
  button.header-button { padding: 12px 10px; font-size: 13px; }
}

/* ==============================================
   IPHONE SE (max 375px)
   ============================================== */
@media screen and (max-width: 375px) {
  #main .banner-wrap .banner-img { height: 150px !important; }
  .banner-cta-inner h1 { font-size: 15px !important; }
  .banner-cta-inner h2 { font-size: 11px !important; }
  .banner-cta-inner ul li { font-size: 12px; }
  h5 { font-size: 16px; }
  h6 { font-size: 14px; }
}



/* ==============================================
   UL WHITEPAPER — décalé vers la droite
   ============================================== */
.text-inner .ul-whitepaper {
  display: table;
  margin-left: 19%;
  margin-right: auto;
  text-align: left;
  padding-left: 1.2em;
}

@media screen and (max-width: 991px) {
  .text-inner .ul-whitepaper { margin-left: 20%; }
}
@media screen and (max-width: 768px) {
  .text-inner .ul-whitepaper { margin-left: 0; }
}

/* ==============================================
   WHITEPAPER BLOCK — tout aligné ensemble
   ============================================== */
.whitepaper-block {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.whitepaper-block p {
  text-align: left;
  margin: 0 0 8px 0;
}
.whitepaper-block .ul-whitepaper {
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.2em;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .whitepaper-block { display: block; width: 100%; }
  .whitepaper-block p,
  .whitepaper-block .ul-whitepaper { text-align: left !important; margin-left: 0 !important; }
}

/* ==============================================
   AWARDS — logos côte à côte, responsive
   ============================================== */
.awards-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}
.awards-main {
  max-width: 600px;
  width: 100%;
  height: auto;
}
.awards-winner {
  max-width: 100px;
  width: 100%;
  height: auto;
  flex-shrink: 0;
   margin-left: -22px;
}
@media screen and (max-width: 991px) {
  .awards-main   { max-width: 420px; }
  .awards-winner { max-width: 71px; }
}
@media screen and (max-width: 768px) {
  .awards-main   { max-width: 300px; }
  .awards-winner { max-width: 49px; }
}
@media screen and (max-width: 430px) {
  .awards-wrapper { gap: 12px; padding-top: 20px; padding-bottom: 20px; }
  .awards-main   { max-width: 220px; }
  .awards-winner { max-width: 36px; margin-left: -11px; }
}

/* ==============================================
   NAV — supprime le trait sous MSP Home
   ============================================== */
#header #navigation .btn-wrapper ul li.active:before,
#header #navigation .btn-wrapper ul li:hover:before {
  display: none !important;
}

/* ==============================================
   ROW_0 — texte justifié, centré, responsive
   ============================================== */
#row_0 .text-inner {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}
#row_0 .text-inner p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
#row_0 .text-inner p[style] {
  text-align: center !important;
}

@media screen and (max-width: 991px) {
  #row_0 .text-inner { max-width: 600px; }
}
@media screen and (max-width: 768px) {
  #row_0 .text-inner {
    max-width: 100%;
    padding: 0 12px;
  }
  #row_0 .text-inner p {
    text-align: justify !important;
  }
}


 #MSP-padding {
    padding: 14px!important;
  }