/* Lot 07 — styles strictement limités à l'actualité Journée Portes Ouvertes. */
.jpo-promo[hidden]{display:none!important}
.jpo-active .jpo-promo[hidden]{display:block!important}
.jpo-active [data-event-detail-root]{display:none!important}
.jpo-active .course-page-main{padding-top:0!important}
.jpo-active .course-page-layout{max-width:1180px!important;padding-left:16px!important;padding-right:16px!important}
.jpo-active .event-detail-v001{margin-top:34px!important}
.jpo-promo{overflow:hidden;background:#fff;border:1px solid #e2e7ef;border-radius:14px;box-shadow:0 8px 30px rgba(3,22,65,.08);margin:0 0 30px;color:#071b47}
.jpo-header{height:70px;background:#061a43;display:flex;align-items:center;gap:28px;padding:0 22px;color:#fff}
.jpo-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:12px;font-weight:900;line-height:1.05;letter-spacing:.3px;white-space:nowrap}.jpo-brand img{width:38px;height:44px;object-fit:contain}.jpo-brand b{color:#ff5a1f}
.jpo-nav{display:flex;gap:28px;margin-left:auto}.jpo-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:700}.jpo-nav a:hover{text-decoration:underline}
.jpo-book{display:inline-flex;align-items:center;justify-content:center;background:#ff4d16;color:#fff!important;text-decoration:none;font-weight:900;border-radius:6px;box-shadow:0 4px 12px rgba(255,77,22,.25)}.jpo-book-top{padding:13px 18px;white-space:nowrap}.jpo-menu{display:none;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}
.jpo-hero{display:grid;grid-template-columns:56% 44%;min-height:340px;background:#061a43;color:#fff}.jpo-hero-copy{padding:30px 38px 24px;position:relative;z-index:2}.jpo-kicker{color:#ff5a1f;font-size:14px;font-weight:900;margin:0 0 14px}.jpo-hero h1{font-size:30px;line-height:1.12;margin:0 0 14px;color:#fff;text-transform:none}.jpo-intro{font-size:13px;line-height:1.55;max-width:620px;color:#fff;margin:0 0 18px}.jpo-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;font-size:13px;margin-bottom:20px}.jpo-book-main{padding:13px 22px}.jpo-hero-image{min-width:0}.jpo-hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.jpo-content{padding:0 28px 18px;background:#fff}.jpo-section{padding:22px 12px;border-bottom:1px solid #dce3ee}.jpo-section:last-child{border-bottom:0}.jpo-section h2{color:#071d6a;font-size:20px;text-align:center;margin:0 0 16px;font-weight:900}.jpo-heart p{max-width:860px;margin:0 auto;text-align:center;font-size:14px;line-height:1.55;color:#26334a}
.jpo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:920px;margin:0 auto}.jpo-grid article{display:flex;align-items:flex-start;gap:12px;border:1px solid #dfe4eb;border-radius:8px;padding:13px 16px;background:#fff}.jpo-grid article>span{flex:0 0 25px;width:25px;height:25px;border:2px solid #28a745;border-radius:50%;display:grid;place-items:center;color:#28a745;font-weight:900}.jpo-grid p{margin:0;font-size:13px;line-height:1.42;color:#1b2434}.jpo-grid strong{font-weight:900}
.jpo-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 14px;max-width:920px;margin:0 auto}.jpo-pills span{border:1.5px solid #183dba;border-radius:999px;color:#102b88;font-size:12px;font-weight:800;padding:7px 20px;min-width:180px;text-align:center}.jpo-pills .wide{min-width:330px}
.jpo-steps{display:flex;align-items:flex-start;justify-content:center;gap:16px;max-width:930px;margin:0 auto}.jpo-steps div{text-align:center;min-width:112px}.jpo-steps b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:#f8d4cf;color:#5a2a24;border:1px solid #f3b2a8;font-size:18px}.jpo-steps div:nth-of-type(2) b{background:#f7dfbd;border-color:#efc985}.jpo-steps div:nth-of-type(3) b{background:#f5eb9d;border-color:#e5d35b}.jpo-steps div:nth-of-type(4) b{background:#d8eccf;border-color:#add39f}.jpo-steps div:nth-of-type(5) b{background:#dbe6f5;border-color:#b8cbe8}.jpo-steps span{font-size:12px;font-weight:800;line-height:1.25;color:#1b2434}.jpo-steps i{font-style:normal;margin-top:14px;color:#6c7480;font-size:24px}
@media(max-width:900px){.jpo-header{gap:16px;padding:0 16px}.jpo-nav{gap:14px}.jpo-hero{grid-template-columns:1fr}.jpo-hero-image{height:310px;order:-1}.jpo-hero-copy{padding:26px 26px 28px}.jpo-steps{gap:8px}.jpo-steps div{min-width:92px}.jpo-steps i{font-size:19px}.jpo-content{padding-left:18px;padding-right:18px}}
@media(max-width:700px){.jpo-header{height:64px}.jpo-brand span{display:none}.jpo-brand img{width:42px}.jpo-nav{display:none;position:absolute;top:64px;left:16px;right:16px;z-index:20;background:#061a43;padding:14px;border-radius:0 0 8px 8px;flex-direction:column;gap:0}.jpo-nav a{padding:10px;border-bottom:1px solid rgba(255,255,255,.15)}.jpo-menu-open .jpo-nav{display:flex}.jpo-book-top{margin-left:auto;padding:10px 13px;font-size:12px}.jpo-menu{display:block}.jpo-hero{display:flex;flex-direction:column;background:#061a43}.jpo-hero-copy{order:1;padding:18px 18px 22px}.jpo-hero-image{order:0;height:230px}.jpo-hero h1{font-size:23px}.jpo-kicker{font-size:12px}.jpo-intro{font-size:12px}.jpo-facts{grid-template-columns:1fr;gap:7px;font-size:12px}.jpo-book-main{width:100%;padding:12px 10px}.jpo-grid{grid-template-columns:1fr}.jpo-pills span,.jpo-pills .wide{min-width:0;width:calc(50% - 7px);padding:7px 8px;font-size:11px}.jpo-steps{gap:5px;justify-content:space-between}.jpo-steps div{min-width:0;flex:1}.jpo-steps b{width:32px;height:32px;font-size:13px}.jpo-steps i{font-size:14px;margin-top:8px}.jpo-steps span{font-size:9px}.jpo-section{padding:18px 0}.jpo-section h2{font-size:16px}.jpo-content{padding:0 14px 12px}.jpo-heart p{font-size:12px}.jpo-active .course-page-layout{padding-left:10px!important;padding-right:10px!important}}
@media(max-width:390px){.jpo-book-top{font-size:10px;padding:9px}.jpo-hero-image{height:205px}.jpo-pills span,.jpo-pills .wide{width:100%}.jpo-steps{gap:2px}.jpo-steps i{font-size:12px}.jpo-steps span{font-size:8px}}


/* LOT 07.1 — correction strictement limitée à event-3 sur ordinateur. */
@media (min-width:701px){
  .jpo-active .jpo-header{display:none!important}
  .jpo-active .jpo-hero{
    position:relative;
    display:block;
    min-height:340px;
    overflow:hidden;
    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) 93%,transparent) 28%,color-mix(in srgb,var(--jpo-admin-color,#061a43) 72%,transparent) 48%,color-mix(in srgb,var(--jpo-admin-color,#061a43) 25%,transparent) 66%,transparent 82%),
      var(--jpo-hero-image,url("assets/images/journee-portes-ouvertes-chantier.webp"));
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }
  .jpo-active .jpo-hero-copy{
    position:relative;
    z-index:2;
    width:58%;
    min-height:340px;
    box-sizing:border-box;
    background:transparent;
  }
  .jpo-active .jpo-hero-image{display:none!important}
}


/* LOT 07.2 — correction strictement limitée à l'en-tête mobile de event-3. */
@media (max-width:700px){
  /* Supprime le doublon : l'en-tête officiel générique est masqué uniquement
     lorsque la page promotionnelle event-3 est active sur téléphone. */
  .jpo-active > .topbar{display:none!important}

  /* Un seul en-tête promotionnel mobile, toujours accessible. */
  .jpo-active .jpo-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:1002!important;
    height:64px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    color:#061a43!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:0 3px 12px rgba(3,22,65,.12)!important;
    padding:0 16px!important;
  }
  .jpo-active .jpo-brand{
    color:#061a43!important;
    gap:8px!important;
    min-width:0!important;
  }
  .jpo-active .jpo-brand img{
    width:46px!important;
    height:50px!important;
    flex:0 0 auto!important;
  }
  .jpo-active .jpo-brand span{
    display:block!important;
    color:#061a43!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .jpo-active .jpo-brand b{color:#ff5a1f!important}
  .jpo-active .jpo-book-top{
    margin-left:auto!important;
    padding:11px 14px!important;
    font-size:12px!important;
    border-radius:7px!important;
  }
  .jpo-active .jpo-menu{
    display:block!important;
    color:#061a43!important;
    font-size:31px!important;
    line-height:1!important;
    padding:0!important;
    margin-left:4px!important;
  }

  /* La barre d'annonces reste fixée immédiatement sous l'en-tête unique. */
  .jpo-active > .ticker{
    position:fixed!important;
    top:64px!important;
    left:0!important;
    right:0!important;
    z-index:1001!important;
    margin:0!important;
  }

  /* Réserve exactement l'espace de l'en-tête et de la barre fixe afin que
     l'image commence dessous sans être masquée. */
  .jpo-active .course-page-main{
    padding-top:104px!important;
  }

  /* Le panneau hamburger reste attaché à l'en-tête unique et s'ouvre sous
     la barre d'annonces, sans créer un second en-tête. */
  .jpo-active .jpo-nav{
    position:fixed!important;
    top:104px!important;
    left:10px!important;
    right:10px!important;
    z-index:1003!important;
    background:#061a43!important;
  }

  /* Conserve l'image, son cadrage et sa transition existante sans toucher
     au contenu de la bannière ni aux sections suivantes. */
  .jpo-active .jpo-hero-image{
    position:relative!important;
  }
}

@media (max-width:430px){
  .jpo-active .jpo-header{padding-left:10px!important;padding-right:10px!important;gap:8px!important}
  .jpo-active .jpo-brand img{width:42px!important;height:46px!important}
  .jpo-active .jpo-brand span{font-size:10px!important}
  .jpo-active .jpo-book-top{font-size:11px!important;padding:10px 11px!important}
  .jpo-active .jpo-menu{font-size:29px!important}
}

@media (max-width:360px){
  /* LOT 07.4 — conserver le nom du centre à côté du logo même sur les
     téléphones étroits, sans modifier le reste de l'en-tête. */
  .jpo-active .jpo-brand{gap:5px!important}
  .jpo-active .jpo-brand img{width:36px!important;height:40px!important}
  .jpo-active .jpo-brand span{
    display:block!important;
    font-size:8.5px!important;
    line-height:1.02!important;
    letter-spacing:-.1px!important;
  }
  .jpo-active .jpo-book-top{font-size:9px!important;padding:8px 8px!important}
  .jpo-active .jpo-menu{margin-left:2px!important}
}

/* LOT 07.3 — panneau de navigation mobile plein écran, event-3 uniquement. */
@media (max-width:700px){
  .jpo-active.jpo-menu-open{overflow:hidden!important}

  .jpo-active.jpo-menu-open .jpo-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:88px minmax(0,1fr)!important;
    align-items:center!important;
    gap:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100vh!important;
    padding:0 24px 24px!important;
    background:#fff!important;
    color:#061a43!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    z-index:2000!important;
  }

  .jpo-active.jpo-menu-open .jpo-brand{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
    color:#061a43!important;
  }

  .jpo-active.jpo-menu-open .jpo-brand img{
    width:58px!important;
    height:64px!important;
    object-fit:contain!important;
  }

  .jpo-active.jpo-menu-open .jpo-brand span{
    display:block!important;
    overflow:visible!important;
    color:#061a43!important;
    font-size:clamp(15px,4.2vw,22px)!important;
    font-weight:900!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }

  .jpo-active.jpo-menu-open .jpo-brand b{color:#ff5a1f!important}
  .jpo-active.jpo-menu-open .jpo-book-top{display:none!important}

  .jpo-active .jpo-menu{
    font-size:0!important;
  }
  .jpo-active .jpo-menu::before{
    content:'☰';
    display:block;
    font-size:31px;
    line-height:1;
  }

  .jpo-active.jpo-menu-open .jpo-menu{
    grid-column:2!important;
    grid-row:1!important;
    display:grid!important;
    place-items:center!important;
    width:64px!important;
    height:64px!important;
    margin:0!important;
    padding:0!important;
    border-radius:14px!important;
    background:#061a43!important;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(3,22,65,.16)!important;
  }
  .jpo-active.jpo-menu-open .jpo-menu::before{
    content:'×';
    font-size:58px!important;
    font-weight:200!important;
    line-height:.72!important;
    transform:translateY(-2px)!important;
  }

  .jpo-active.jpo-menu-open .jpo-nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    align-self:start!important;
    width:100%!important;
    margin:0!important;
    padding:28px 8px 14px!important;
    gap:0!important;
    border-top:1px solid #d9dee8!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .jpo-active.jpo-menu-open .jpo-nav a{
    display:block!important;
    padding:17px 4px!important;
    border:0!important;
    color:#061a43!important;
    font-size:clamp(25px,7vw,38px)!important;
    font-weight:400!important;
    line-height:1.2!important;
    text-decoration:none!important;
  }

  .jpo-active.jpo-menu-open > .ticker{visibility:hidden!important}
}

@media (max-width:390px){
  .jpo-active.jpo-menu-open .jpo-header{padding-left:16px!important;padding-right:16px!important}
  .jpo-active.jpo-menu-open .jpo-brand img{width:50px!important;height:56px!important}
  .jpo-active.jpo-menu-open .jpo-brand span{font-size:14px!important}
  .jpo-active.jpo-menu-open .jpo-menu{width:56px!important;height:56px!important}
  .jpo-active.jpo-menu-open .jpo-menu::before{font-size:51px!important}
  .jpo-active.jpo-menu-open .jpo-nav{padding-top:22px!important}
  .jpo-active.jpo-menu-open .jpo-nav a{padding:15px 2px!important;font-size:27px!important}
}

/* LOT 07.5 — conserver réellement le nom du centre sur téléphone.
   Le bloc marque reçoit une largeur réservée ; le bouton et le hamburger
   ne peuvent plus l'écraser jusqu'à rendre le texte invisible. */
@media (max-width:700px){
  .jpo-active .jpo-header{
    gap:6px!important;
  }
  .jpo-active .jpo-brand{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:108px!important;
    overflow:visible!important;
  }
  .jpo-active .jpo-brand span{
    display:block!important;
    flex:0 0 auto!important;
    min-width:68px!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .jpo-active .jpo-book-top{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  .jpo-active .jpo-menu{
    flex:0 0 auto!important;
  }
}

@media (max-width:430px){
  .jpo-active .jpo-header{
    padding-left:8px!important;
    padding-right:8px!important;
    gap:5px!important;
  }
  .jpo-active .jpo-brand{
    min-width:104px!important;
    gap:4px!important;
  }
  .jpo-active .jpo-brand img{
    width:38px!important;
    height:42px!important;
  }
  .jpo-active .jpo-brand span{
    min-width:62px!important;
    font-size:8.2px!important;
    line-height:1.02!important;
    letter-spacing:-.15px!important;
  }
  .jpo-active .jpo-book-top{
    padding:9px 9px!important;
    font-size:10px!important;
  }
  .jpo-active .jpo-menu{
    width:34px!important;
    margin-left:0!important;
  }
}

@media (max-width:360px){
  .jpo-active .jpo-brand{
    min-width:96px!important;
  }
  .jpo-active .jpo-brand img{
    width:34px!important;
    height:38px!important;
  }
  .jpo-active .jpo-brand span{
    min-width:57px!important;
    font-size:7.6px!important;
  }
  .jpo-active .jpo-book-top{
    padding:8px 7px!important;
    font-size:8.8px!important;
  }
}


/* LOT 07.6 — correction finale réelle de l'affichage du nom du centre.
   Cette règle est volontairement placée en dernier pour neutraliser les
   anciennes media queries qui pouvaient encore masquer ou écraser le texte. */
@media (max-width:700px){
  .jpo-active:not(.jpo-menu-open) .jpo-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 38px!important;
    align-items:center!important;
    column-gap:6px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand img{
    display:block!important;
    width:40px!important;
    height:44px!important;
    min-width:40px!important;
    object-fit:contain!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand span{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    color:#061a43!important;
    font-size:clamp(7.5px,2.35vw,10.5px)!important;
    font-weight:900!important;
    line-height:1.02!important;
    letter-spacing:-.12px!important;
    white-space:nowrap!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-book-top{
    display:inline-flex!important;
    flex:0 0 auto!important;
    max-width:148px!important;
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:clamp(9px,2.65vw,11px)!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-menu{
    display:block!important;
    width:38px!important;
    min-width:38px!important;
    margin:0!important;
  }
}
@media (max-width:370px){
  .jpo-active:not(.jpo-menu-open) .jpo-header{
    grid-template-columns:minmax(0,1fr) auto 34px!important;
    column-gap:4px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:4px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand img{
    width:34px!important;
    height:38px!important;
    min-width:34px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-brand span{
    font-size:7.2px!important;
    letter-spacing:-.18px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-book-top{
    max-width:132px!important;
    padding:8px 7px!important;
    font-size:8.6px!important;
  }
  .jpo-active:not(.jpo-menu-open) .jpo-menu{
    width:34px!important;
    min-width:34px!important;
  }
}

/* LOT 08 — couleur administrable de la bannière event-3. */
.jpo-active .jpo-hero,.jpo-active .jpo-hero-copy{background-color:var(--jpo-admin-color,#061a43)}


/* LOT 08.2 — rendu ciblé de la bannière event-3.
   Ordinateur : image administrée sur toute la largeur, sans panneau opaque.
   Mobile : transition douce entre le bas de l'image et la zone de texte. */
@media (min-width:701px){
  .jpo-active .jpo-hero{
    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;
  }
  .jpo-active .jpo-hero-copy{
    background:transparent!important;
    background-color:transparent!important;
  }
  .jpo-active .jpo-hero-image{display:none!important}
}

@media (max-width:700px){
  .jpo-active .jpo-hero-image{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  .jpo-active .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%);
  }
  .jpo-active .jpo-hero-copy{
    background-color:var(--jpo-admin-color,#061a43)!important;
  }
}