/* EH Questionnaire — modale custom (support on-site, lot coquille, étape 3) * * Scopée .ehqm-* — AUCUNE classe .modal* : on ne touche JAMAIS la modale BS3 * du thème (terrain miné : double Bootstrap BS3/BS5 + double jQuery + AdminLTE, * cf. [[Site EH]]). Sans jQuery. * * L'overlay est attaché à par ehq-modal.js → il échappe aux stacking * contexts créés par un ancêtre (transform/filter/contain) — gotcha #1 Site EH. * Toutes les valeurs sont explicites : on n'hérite pas de la cascade du thème. */ /* Verrou de scroll de l'arrière-plan pendant l'ouverture. */ .ehqm-lock { overflow: hidden !important; } /* Backdrop plein écran + centrage du dialog. */ .ehqm-overlay { position: fixed; inset: 0; z-index: 2147483000; /* au-dessus du thème, d'AdminLTE et du bandeau cookies */ display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; margin: 0; background: rgba(16, 24, 40, 0.62); opacity: 0; transition: opacity .18s ease; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .ehqm-overlay.ehqm-open { opacity: 1; } .ehqm-overlay * { box-sizing: border-box; } /* Carte — fenêtrée sur desktop (la page reste visible derrière). */ .ehqm-dialog { position: relative; width: min(960px, 92vw); height: 100vh; /* fallback si dvh non supporté */ height: min(90vh, 880px); max-height: 90vh; margin: 0; background: #ffffff; border-radius: 14px; box-shadow: 0 24px 60px rgba(16, 24, 40, 0.32); overflow: hidden; transform: translateY(8px) scale(.99); transition: transform .18s ease; } .ehqm-overlay.ehqm-open .ehqm-dialog { transform: none; } /* L'iframe porte tout le design EH (document isolé) : ici juste le cadre. */ .ehqm-iframe { display: block; width: 100%; height: 100%; margin: 0; border: 0; background: #ffffff; } /* Croix de fermeture (navy EH, focus vert d'eau EH). */ .ehqm-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1a2744; font-size: 26px; line-height: 40px; font-weight: 400; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18); transition: background .15s ease, transform .15s ease; } .ehqm-close:hover { background: #ffffff; transform: scale(1.05); } .ehqm-close:focus-visible { outline: 2px solid #42b892; outline-offset: 2px; } /* Panneau de confirmation simulée (étape 4, capture visiteur). Remplace l'iframe dans le dialog ; placeholder du lot coquille — aucun envoi réel. Valeurs explicites : on n'hérite pas de la cascade du thème. */ .ehqm-confirm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; margin: 0; padding: 32px 28px; text-align: center; background: #ffffff; color: #1a2744; } .ehqm-confirm-title { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #1a2744; } .ehqm-confirm-text { margin: 0; max-width: 440px; font-size: 1rem; line-height: 1.5; color: #45506a; } .ehqm-confirm-btn { margin: 8px 0 0; padding: 12px 28px; border: 0; border-radius: 999px; background: #42b892; color: #ffffff; font-size: 1rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s ease, transform .15s ease; } .ehqm-confirm-btn:hover { background: #38a07f; transform: translateY(-1px); } .ehqm-confirm-btn:focus-visible { outline: 2px solid #1a2744; outline-offset: 2px; } /* Mobile : plein écran, sans coins arrondis. */ @media (max-width: 640px) { .ehqm-overlay { padding: 0; } .ehqm-dialog { width: 100%; /* = l'overlay (inset:0), évite le quirk 100vw + scrollbar */ height: 100%; max-height: none; border-radius: 0; } .ehqm-close { top: 8px; right: 8px; } } @media (prefers-reduced-motion: reduce) { .ehqm-overlay, .ehqm-dialog { transition: none; } }