/* Caché par défaut via [hidden] */ #ddx-popup[hidden] { display: none !important; } .ddx-popup { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; font-family: inherit; /* récupère la fonte du */ } /* Backdrop violet accent ECM */ .ddx-popup__backdrop { position: absolute; inset: 0; background: rgba(49, 39, 131, 0.5); /* #312783 */ backdrop-filter: blur(3px); } /* Fenêtre */ .ddx-popup__dialog { position: relative; max-width: 640px; width: min(92vw, 640px); background: #fff; border-radius: 16px; padding: 60px; box-shadow: 0 20px 60px rgba(0,0,0,.25); border-top: 6px solid #e65d90; /* bandeau rose ECM */ transform: translateY(10px); opacity: 0; transition: opacity .25s ease, transform .25s ease; outline: none; } .ddx-popup--open .ddx-popup__dialog { opacity: 1; transform: translateY(0); } /* Typo */ .ddx-popup__title { font-family: inherit; margin: 0 0 1rem; font-size: 2.4rem; line-height: 1em; font-weight: 300; color: #312783; border-left: 20px solid #e65d90; padding-left: 10px; } .ddx-popup__content { font-size: 1rem; line-height: 1.6; color: #312783; margin: 2rem 0 0; } .ddx-popup__content p { margin: .5rem 0;display: none; } /* Fermer */ .ddx-popup__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 50px; line-height: 1; cursor: pointer; color: #e65d90; opacity: .7; font-weight: 500; } .ddx-popup__close:hover { opacity: 1; } /* Bouton ECM */ .ddx-popup__btn { display: inline-block; padding: 12px 22px; border-radius: 50px; border: 3px solid #e65d90; text-decoration: none; background: #312783; color: #fff; font-weight: 300; line-height: 1; transition: background .2s ease, transform .2s ease; } .ddx-popup__btn:hover { background: #e65d90; transform: scale(1.05); } /* Body lock quand pop-up ouverte */ body.ddx-nosroll { overflow: hidden; touch-action: none; } @media (prefers-reduced-motion: reduce) { .ddx-popup__dialog, .ddx-popup__backdrop { transition: none !important; } }