/* FMI Gate — overlay conforme charte FMI 2026 (blanc/rouge, pilule, éditorial). Le formulaire est un CF7 : on style ses champs génériquement dans .fmi-vg-form. */ .fmi-vg { position: relative; max-width: 100%; font-family: 'Source Sans Pro', 'Source Sans 3', 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } .fmi-vg video { display: block; width: 100%; height: auto; border-radius: 8px; background: #0F172A; } /* Modal pleine page (v2.3.0 : vidéo comme téléchargement — un overlay dans le cadre vidéo est inutilisable sur mobile et invisible en plein écran). */ .fmi-vg-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); animation: fmi-vg-fade 250ms ease-out; overflow-y: auto; } /* Posé sur tant qu'une modal est ouverte : pas de scroll derrière. */ body.fmi-vg-noscroll { overflow: hidden; } .fmi-vg-overlay[hidden] { display: none; } @keyframes fmi-vg-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fmi-vg-overlay { animation: none; } } .fmi-vg-form { position: relative; /* ancre la croix .fmi-vg-close */ width: 100%; max-width: 420px; margin: auto; padding: 28px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); } .fmi-vg-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #64748B; } .fmi-vg-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #0F172A; } .fmi-vg-bar { display: block; width: 48px; height: 3px; margin: 10px 0 18px; background: #C41E1E; border-radius: 2px; } .fmi-vg-text { margin: 0 0 16px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #333333; } /* --- Champs CF7 dans l'overlay --- */ .fmi-vg-form label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #0F172A; } .fmi-vg-form input[type="text"], .fmi-vg-form input[type="email"], .fmi-vg-form input[type="tel"], .fmi-vg-form input[type="url"], .fmi-vg-form select, .fmi-vg-form textarea { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 10px 12px; font-family: inherit; font-size: 16px; font-weight: 400; color: #0F172A; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 4px; box-sizing: border-box; } .fmi-vg-form textarea { min-height: 80px; } .fmi-vg-form input:focus, .fmi-vg-form select:focus, .fmi-vg-form textarea:focus { outline: 2px solid #C41E1E; outline-offset: 1px; border-color: #C41E1E; } .fmi-vg-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: #C41E1E; } .fmi-vg-form .wpcf7-acceptance .wpcf7-list-item, .fmi-vg-form .wpcf7-checkbox .wpcf7-list-item { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #333333; } /* Boutons (submit CF7, bouton Télécharger) : AUCUN style ici — ils héritent volontairement du style global des boutons du site (kit Elementor : `.elementor-kit-N button / input[type=submit] / .elementor-button`). */ .fmi-vg-form .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #C41E1E; } .fmi-vg-form .wpcf7-response-output { margin: 12px 0 0; padding: 8px 12px; font-size: 14px; border: 1px solid #CBD5E1; border-radius: 4px; color: #0F172A; } .fmi-vg-form .wpcf7 form.invalid .wpcf7-response-output, .fmi-vg-form .wpcf7 form.failed .wpcf7-response-output { border-color: #C41E1E; color: #C41E1E; } .fmi-vg-success { margin: 12px 0 0; font-size: 16px; font-weight: 600; color: #0F172A; text-align: center; } /* --- Mode téléchargement : bouton CTA --- */ .fmi-vg--download { display: inline-block; } /* !important nécessaire : le kit Elementor (`.elementor-kit-N button`) impose sa couleur/fond aux boutons et rendait la croix blanche sur fond blanc. */ .fmi-vg-form .fmi-vg-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; font-size: 26px; line-height: 1; color: #C41E1E !important; background: transparent !important; border: none !important; border-radius: 9999px; cursor: pointer; } .fmi-vg-form .fmi-vg-close:hover, .fmi-vg-form .fmi-vg-close:focus { color: #8F1616 !important; background: transparent !important; } .fmi-vg-form .fmi-vg-close:focus-visible { outline: 2px solid #C41E1E; outline-offset: 1px; } @media (max-width: 480px) { .fmi-vg-form { padding: 20px; } .fmi-vg-title { font-size: 17px; } }