/* FABIEN BUILDING — correction ciblée bannière event-4, version 3.
   Cette feuille ne s'applique qu'à body.event4-active. */

body.event4-active .course-page-main{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding-top:0!important;
}
body.event4-active .course-page-layout{
  display:block!important;
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
}
body.event4-active .course-page-left{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}
body.event4-active [data-event-banner],
body.event4-active [data-event-shared-cards],
body.event4-active [data-event-detail-root]{display:none!important}

.event4-promo{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto 30px!important;
  overflow:hidden;
  background:#fff;
  border:1px solid #e2e7ef!important;
  border-radius:14px!important;
  box-shadow:0 8px 30px rgba(3,22,65,.08)!important;
  box-sizing:border-box!important;
}
.event4-promo[hidden]{display:none!important}
.event4-promo .event4-hero .jpo-hero-image img{width:100%;height:100%;object-fit:cover}
body.event4-menu-open .event4-promo .jpo-nav{display:flex!important}

/* Ordinateur : reproduction du composant validé event-3.
   Image pleine bannière, voile bleu progressif, texte superposé. */
@media (min-width:701px){
  body.event4-active .event4-promo .jpo-header{display:none!important}
  body.event4-active .event4-promo .jpo-hero{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:340px!important;
    overflow:hidden!important;
    background-color:var(--jpo-admin-color,#061a43)!important;
    background-image:
      linear-gradient(90deg,
        color-mix(in srgb,var(--jpo-admin-color,#061a43) 98%,transparent) 0%,
        color-mix(in srgb,var(--jpo-admin-color,#061a43) 94%,transparent) 30%,
        color-mix(in srgb,var(--jpo-admin-color,#061a43) 72%,transparent) 50%,
        color-mix(in srgb,var(--jpo-admin-color,#061a43) 30%,transparent) 68%,
        transparent 86%),
      var(--jpo-hero-image,url("assets/images/journee-portes-ouvertes-chantier.webp"))!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  body.event4-active .event4-promo .jpo-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:58%!important;
    max-width:760px!important;
    min-height:340px!important;
    box-sizing:border-box!important;
    padding:30px 38px 24px!important;
    background:transparent!important;
    background-color:transparent!important;
  }
  body.event4-active .event4-promo .jpo-hero-image{display:none!important}
}

/* Mobile/tablette : conserver la logique responsive déjà validée. */
@media (max-width:700px){
  body.event4-active .course-page-main{max-width:none!important;margin:0!important;}
  body.event4-active .course-page-layout{max-width:none!important;padding-left:10px!important;padding-right:10px!important;}
  body.event4-active>.topbar{display:none!important}
  body.event4-active .course-page-layout{padding:0!important}
  body.event4-active .event4-promo .jpo-hero-image{position:relative!important;overflow:hidden!important;isolation:isolate!important}
  body.event4-active .event4-promo .jpo-hero-image::after{
    content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:64px;pointer-events:none;
    background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--jpo-admin-color,#061a43) 38%,transparent) 48%,var(--jpo-admin-color,#061a43) 100%);
  }
  body.event4-active .event4-promo .jpo-hero-copy{background-color:var(--jpo-admin-color,#061a43)!important}
}

/* Les sections génériques de l'ancienne actualité restent masquées uniquement pour event-4. */
body.event4-active [data-event-detail-root] ~ section{display:none!important}


/* Sections event-4 copiées sans grand conteneur visuel intermédiaire. */
[data-event4-source-section][hidden]{display:none!important}
body.event4-active [data-event4-source-section]{box-sizing:border-box}

/* LOT — Synchronisation réelle des sections communes avec l'accueil. */
.event4-shared-sections[hidden]{display:none!important}
body.event4-active .event4-shared-sections{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  background:transparent;
}
body.event4-active .event4-shared-sections > section{
  display:block!important;
}

/* LOT correctif V4 — largeur et centrage uniformes sur toute la page event-4.
   De la bannière jusqu'aux quatre cartes Actualités et événements, tous les
   grands blocs utilisent une gouttière extérieure de 11 px (~3 mm) par côté. */
@media (max-width: 767px){
  body.event4-active .event4-promo,
  body.event4-active .course-page-left > .event4-shared-sections{
    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;
    box-sizing:border-box!important;
  }

  body.event4-active .event4-promo{
    margin-top:0!important;
    margin-bottom:30px!important;
  }

  body.event4-active .event4-shared-sections{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.event4-active .event4-shared-sections > section,
  body.event4-active .event4-shared-sections > .section{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Neutraliser uniquement les retraits horizontaux extérieurs cumulés des
     sections synchronisées, sans modifier leurs cartes ni leur fonctionnement. */
  body.event4-active .event4-shared-sections > .section{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.event4-active .event4-shared-sections .cards,
  body.event4-active .event4-shared-sections .grid,
  body.event4-active .event4-shared-sections .news-grid,
  body.event4-active .event4-shared-sections .trainers-grid,
  body.event4-active .event4-shared-sections .cert-grid,
  body.event4-active .event4-shared-sections .partners-grid,
  body.event4-active .event4-shared-sections .faq-list,
  body.event4-active .event4-shared-sections .process-grid{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}