/* Bloc détaillé de formation inséré uniquement sur la seconde page publicitaire event-4. */
.event4-formation-detail[hidden]{display:none!important}
body.event4-active .event4-formation-detail{
  display:block;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 0 28px;
  box-sizing:border-box;
  background:transparent;
}
body.event4-active .event4-formation-detail > section{
  box-sizing:border-box;
}
body.event4-active .event4-formation-detail .formation-info-grid{
  margin-top:0;
}
body.event4-active .event4-formation-detail .formation-program-detail .module-card p{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  max-height:42px!important;
  overflow:hidden!important;
  opacity:1!important;
  margin-top:6px!important;
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  transition:max-height .25s ease!important;
}
body.event4-active .event4-formation-detail .formation-program-detail .module-card.open p{
  display:block!important;
  -webkit-line-clamp:unset!important;
  max-height:none!important;
  overflow:visible!important;
  opacity:1!important;
  margin-top:6px!important;
  white-space:pre-line!important;
}
body.event4-active .event4-formation-detail .formation-program-detail .module-card.open .module-toggle{
  transform:rotate(180deg)!important;
}
body.event4-active .event4-formation-detail .formation-program-detail .module-card button{
  cursor:pointer;
}
body.event4-active .event4-formation-detail .formation-pricing-lite a[data-action="payment-start"]{
  display:block;
  margin-top:auto;
  padding:10px 12px;
  border-radius:4px;
  background:#082d7c;
  color:#fff;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}
body.event4-active .event4-formation-detail .cert-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media(max-width:700px){
  body.event4-active .event4-formation-detail{
    max-width:none;
    padding:0 16px 22px;
  }
  body.event4-active .event4-formation-detail .formation-logo-row{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  body.event4-active .event4-formation-detail .formation-logo-row > *{
    scroll-snap-align:start;
  }
}

/* LOT correctif 2026-08-05 — restauration ciblée du responsive mobile d'event-4.
   Le conteneur reçoit aussi la classe .formation-main afin de réutiliser les
   media queries officielles de la page détaillée de formation. */
@media (max-width: 767px){
  body.event4-active .event4-formation-detail.formation-main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-info-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    padding:22px 16px!important;
    box-sizing:border-box!important;
  }
  body.event4-active .event4-formation-detail .formation-info-grid>article{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-mission{
    padding:34px 20px!important;
    text-align:center!important;
  }

  body.event4-active .event4-formation-detail .formation-marketing-v93{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin:18px 12px!important;
    padding:28px 14px!important;
    box-sizing:border-box!important;
  }
  body.event4-active .event4-formation-detail .formation-marketing-v93 .grid.four{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.event4-active .event4-formation-detail .formation-marketing-v93 .marketing-card-v93{
    width:100%!important;
    max-width:none!important;
    min-height:210px!important;
    margin:0!important;
    padding:28px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  body.event4-active .event4-formation-detail .audience-tags-v93{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    width:100%!important;
    max-width:none!important;
  }
  body.event4-active .event4-formation-detail .audience-tags-v93>span{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 16px!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-softwares,
  body.event4-active .event4-formation-detail .formation-program-detail,
  body.event4-active .event4-formation-detail .formation-pricing-lite,
  body.event4-active .event4-formation-detail .formation-planning-lite,
  body.event4-active .event4-formation-detail .certifications-showcase{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:16px!important;
    padding-right:16px!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-program-detail .module-card{
    grid-template-columns:76px minmax(0,1fr) auto!important;
    gap:10px!important;
    width:100%!important;
    padding:12px!important;
    box-sizing:border-box!important;
  }
  body.event4-active .event4-formation-detail .formation-program-detail .module-card .module-img{
    width:76px!important;
    height:76px!important;
    min-height:76px!important;
  }

  body.event4-active .event4-formation-detail .pricing-lite-grid,
  body.event4-active .event4-formation-detail .planning-v22-grid,
  body.event4-active .event4-formation-detail .platform-v22-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:100%!important;
  }
  body.event4-active .event4-formation-detail .pricing-lite-grid>*,
  body.event4-active .event4-formation-detail .planning-v22-grid>*,
  body.event4-active .event4-formation-detail .platform-v22-row>*{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .certifications-showcase .cert-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:4px 6px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    box-sizing:border-box!important;
  }
  body.event4-active .event4-formation-detail .certifications-showcase .cert-grid::-webkit-scrollbar{display:none!important}
  body.event4-active .event4-formation-detail .certifications-showcase .cert-grid>.cert-card{
    flex:0 0 calc(100% - 12px)!important;
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
    min-width:calc(100% - 12px)!important;
    margin:0!important;
    scroll-snap-align:center!important;
    box-sizing:border-box!important;
  }
}

/* LOT correctif 2026-08-05 — largeur mobile event-4.
   La page d'actualité fournit déjà une gouttière via .course-page-layout.
   Ce retrait est neutralisé uniquement pour le bloc formation event-4 afin que
   ses propres sections retrouvent les mêmes gouttières que la page formation. */
@media (max-width: 767px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    --event4-layout-gutter:22px;
    width:auto!important;
    max-width:none!important;
    margin-left:calc(-1 * var(--event4-layout-gutter))!important;
    margin-right:calc(-1 * var(--event4-layout-gutter))!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}
@media (max-width: 560px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    --event4-layout-gutter:16px;
  }
}

/* LOT correctif V2 — agrandissement mobile renforcé du bloc formation event-4.
   Le bloc est centré par rapport au viewport, avec 12 px de gouttière extérieure.
   Les sections internes conservent leurs 16 px officiels : marge visuelle finale
   d'environ 28 px, identique à la page formation mobile de référence. */
@media (max-width: 767px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    min-width:0!important;
    margin-left:calc(50% - 50vw + 12px)!important;
    margin-right:calc(50% - 50vw + 12px)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-info-grid,
  body.event4-active .event4-formation-detail .formation-softwares,
  body.event4-active .event4-formation-detail .formation-program-detail,
  body.event4-active .event4-formation-detail .formation-pricing-lite,
  body.event4-active .event4-formation-detail .formation-planning-lite,
  body.event4-active .event4-formation-detail .certifications-showcase{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-marketing-v93{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
    box-sizing:border-box!important;
  }
}

@media (max-width: 420px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    margin-left:calc(50% - 50vw + 8px)!important;
    margin-right:calc(50% - 50vw + 8px)!important;
  }
}

/* LOT correctif V3 — largeur mobile quasi pleine, gouttière finale ~3 mm.
   Objectif : laisser environ 11 px à gauche et à droite du viewport, sans cumul
   avec les paddings internes hérités du composant formation. */
@media (max-width: 767px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    width:calc(100vw - 22px)!important;
    max-width:calc(100vw - 22px)!important;
    min-width:calc(100vw - 22px)!important;
    margin-left:calc(50% - 50vw + 11px)!important;
    margin-right:calc(50% - 50vw + 11px)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Neutralisation des retraits horizontaux ajoutés à l'intérieur du bloc. */
  body.event4-active .event4-formation-detail .formation-info-grid,
  body.event4-active .event4-formation-detail .formation-mission,
  body.event4-active .event4-formation-detail .formation-softwares,
  body.event4-active .event4-formation-detail .formation-program-detail,
  body.event4-active .event4-formation-detail .formation-pricing-lite,
  body.event4-active .event4-formation-detail .formation-planning-lite,
  body.event4-active .event4-formation-detail .certifications-showcase{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail .formation-marketing-v93{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Les cartes et grilles occupent toute la largeur désormais disponible. */
  body.event4-active .event4-formation-detail .formation-info-grid > article,
  body.event4-active .event4-formation-detail .formation-marketing-v93,
  body.event4-active .event4-formation-detail .formation-program-detail .module-card,
  body.event4-active .event4-formation-detail .pricing-lite-grid > *,
  body.event4-active .event4-formation-detail .planning-v22-grid > *,
  body.event4-active .event4-formation-detail .platform-v22-row > *{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}

@media (max-width: 420px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    min-width:calc(100vw - 20px)!important;
    margin-left:calc(50% - 50vw + 10px)!important;
    margin-right:calc(50% - 50vw + 10px)!important;
  }
}

/* LOT correctif V4 — alignement mobile uniforme à ~3 mm du viewport.
   Toute la zone de formation, de la bannière jusqu'à Nos formateurs, utilise
   exactement la même largeur extérieure : viewport - 22 px (11 px par côté). */
@media (max-width: 767px){
  body.event4-active .course-page-left > .event4-formation-detail.formation-main{
    width:calc(100vw - 22px)!important;
    max-width:calc(100vw - 22px)!important;
    min-width:0!important;
    margin-left:calc(50% - 50vw + 11px)!important;
    margin-right:calc(50% - 50vw + 11px)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-formation-detail > section,
  body.event4-active .event4-formation-detail .formation-info-grid,
  body.event4-active .event4-formation-detail .formation-mission,
  body.event4-active .event4-formation-detail .formation-marketing-v93,
  body.event4-active .event4-formation-detail .formation-softwares,
  body.event4-active .event4-formation-detail .formation-program-detail,
  body.event4-active .event4-formation-detail .formation-pricing-lite,
  body.event4-active .event4-formation-detail .formation-planning-lite,
  body.event4-active .event4-formation-detail .certifications-showcase{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Une seule gouttière interne cohérente : 0 sur les grands conteneurs,
     les cartes gardent uniquement leur padding de contenu. */
  body.event4-active .event4-formation-detail .formation-info-grid,
  body.event4-active .event4-formation-detail .formation-softwares,
  body.event4-active .event4-formation-detail .formation-program-detail,
  body.event4-active .event4-formation-detail .formation-pricing-lite,
  body.event4-active .event4-formation-detail .formation-planning-lite,
  body.event4-active .event4-formation-detail .certifications-showcase{
    padding-left:0!important;
    padding-right:0!important;
  }
}