/* Pop-up d'evenement. Reprise telle quelle du code qui etait injecte
   dans Divi > Options du theme > Integration, ou il vivait faute de
   theme enfant. Les reglages, eux, sont passes dans inc/popup.php. */

#mm-popup{
  /* ---- Position verticale du bouton sur le visuel (a ajuster si besoin) ---- */
  --mm-cta-bottom: -21px;       /* paysage : a cheval sur le bord bas du visuel */
  /* Vertical (mobile) : dans la bande du bas, sous le bandeau de couleur.
     A mesurer sur chaque affiche. Sur celle du 14 novembre, le bandeau jaune
     occupe de 61,5 % a 83,9 % de la hauteur et porte la date : les 21,5 %
     de l'affiche precedente posaient le bouton en plein sur le 14. */
  --mm-cta-bottom-mobile: 6%;
  position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px;font-family:'Abel',Helvetica,Arial,sans-serif}
#mm-popup.mm-open{display:flex}
#mm-popup .mm-overlay{position:absolute;inset:0;background:rgba(20,30,60,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:mm-fade .25s ease both}
#mm-popup .mm-card{position:relative;width:100%;min-width:0;max-width:620px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:mm-pop .3s cubic-bezier(.2,.9,.3,1.3) both;-webkit-overflow-scrolling:touch}

/* --- visuel + bouton en premier plan --- */
#mm-popup .mm-visual{position:relative;display:block;line-height:0}
#mm-popup .mm-visual img{display:block;width:100%;height:auto;border-radius:14px 14px 0 0}
#mm-popup .mm-cta{position:absolute;left:50%;bottom:var(--mm-cta-bottom);transform:translateX(-50%);z-index:2;display:inline-block;white-space:nowrap;background:#2a4fa3;color:#f9e44b!important;font-family:'Anton',Helvetica,Arial,sans-serif;font-size:clamp(14px,3.1vw,21px);letter-spacing:1px;line-height:1;text-transform:uppercase;text-decoration:none!important;padding:.75em 1.9em;border-radius:7px;border:2px solid #f9e44b;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:background .2s,transform .2s}
#mm-popup .mm-cta:hover,#mm-popup .mm-cta:focus{background:#1d3c82;color:#fff!important;transform:translateX(-50%) translateY(-3px)}
#mm-popup .mm-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* --- bandeau d'infos sous le visuel --- */
#mm-popup .mm-info{padding:34px 22px 8px;text-align:center}
#mm-popup .mm-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
#mm-popup .mm-meta li{display:flex;align-items:center;gap:7px;font-size:16px;color:#2b3a4a;line-height:1.35}
#mm-popup .mm-meta svg{flex:0 0 17px;width:17px;height:17px;fill:#2a4fa3}
#mm-popup .mm-later{display:block;margin:10px auto 16px;background:none;border:0;padding:6px;font-family:'Abel',Helvetica,Arial,sans-serif;font-size:14.5px;color:#8a97a5;text-decoration:underline;cursor:pointer}
#mm-popup .mm-later:hover{color:#2a4fa3}
#mm-popup .mm-close{position:absolute;top:11px;right:11px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(20,30,60,.55);color:#fff;font-size:25px;line-height:38px;cursor:pointer;transition:background .2s;padding:0}
#mm-popup .mm-close:hover,#mm-popup .mm-close:focus{background:rgba(20,30,60,.85)}
@keyframes mm-fade{from{opacity:0}to{opacity:1}}
@keyframes mm-pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

/* --- mobile : visuel vertical, carte plus etroite --- */
@media(max-width:600px){
 #mm-popup{padding:12px}
 #mm-popup .mm-card{max-width:400px}
 #mm-popup .mm-cta{bottom:var(--mm-cta-bottom-mobile);letter-spacing:.5px;padding:.7em 1.6em;font-size:clamp(15px,4.4vw,20px)}
 #mm-popup .mm-info{padding:14px 16px 4px}
 #mm-popup .mm-meta{gap:7px;flex-direction:column;align-items:center}
 #mm-popup .mm-meta li{font-size:14.5px}
 #mm-popup .mm-later{margin:8px auto 13px}
}
/* --- ecrans courts : on resserre pour que le visuel vertical tienne sans defilement --- */
@media(max-height:760px) and (max-width:600px){
 #mm-popup .mm-card{max-width:330px}
 #mm-popup .mm-meta li{font-size:13.5px}
}
@media(max-height:660px) and (max-width:600px){
 #mm-popup .mm-card{max-width:290px}
 #mm-popup .mm-info{display:none}
}
@media(prefers-reduced-motion:reduce){
 #mm-popup .mm-overlay,#mm-popup .mm-card{animation:none}
 #mm-popup .mm-cta:hover{transform:translateX(-50%)}
}
body.mm-noscroll{overflow:hidden}