/* ============================================================ EriFaye TV PATCH V5.1 - UI mobile buttons + register choices Corrige V5.0 : - plus de faux border/contour 10px - plus de vert détecté dynamiquement qui peut devenir blanc - choix Oui/Non = glow box-shadow 10px vert fixe - boutons longs mobile = largeur contenue, retour à la ligne propre ============================================================ */ :root { --ef-v51-success-green: #28a745; --ef-v51-success-green-rgb: 40, 167, 69; --ef-v51-choice-shadow: 0 0 10px 2px rgba(var(--ef-v51-success-green-rgb), 0.88); --ef-v51-choice-border-shadow: 0 0 0 1px rgba(var(--ef-v51-success-green-rgb), 0.95), 0 0 10px 2px rgba(var(--ef-v51-success-green-rgb), 0.80); } /* ------------------------------------------------------------ Header : le hamburger mobile reste masqué sur desktop. ------------------------------------------------------------ */ @media (min-width: 992px) { header .navbar-toggler, .navbar .navbar-toggler, .site-header .navbar-toggler, .main-header .navbar-toggler, .ef-header .navbar-toggler, .pq-header .navbar-toggler, #site-header .navbar-toggler, #main-header .navbar-toggler, header .mobile-menu-toggle, header .mobile-menu-btn, header .menu-mobile-toggle, header .menu-toggle, header .menu-toggle-btn, header .hamburger, header .hamburger-menu, header .hamburger-btn, header .responsive-menu-toggle, header .ef-mobile-menu-toggle, header .ef-header-menu-toggle, header .ef-header-burger, header .meanmenu-reveal, header .slicknav_btn, header button[aria-controls*="menu"], header button[aria-controls*="Menu"], header button[aria-controls*="navbar"], header button[aria-controls*="Navbar"], header button[data-toggle="collapse"], header button[data-bs-toggle="collapse"], header a[data-toggle="collapse"], header a[data-bs-toggle="collapse"], header .ef-v48-desktop-hide-toggle, header .ef-v49-desktop-hide-toggle, header .ef-v50-desktop-hide-toggle, header .ef-v51-desktop-hide-toggle, .ef-v48-desktop-hide-toggle, .ef-v49-desktop-hide-toggle, .ef-v50-desktop-hide-toggle, .ef-v51-desktop-hide-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /* ------------------------------------------------------------ Register wizard : choix Oui / Non. On utilise le ciblage qui marchait en V4.9/V5.0, mais avec un vrai glow 10px, pas un contour spread de 10px. ------------------------------------------------------------ */ .ef-v51-choice-candidate, .ef-v50-choice-candidate, .ef-v49-choice-candidate { cursor: pointer !important; transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, transform 0.18s ease-in-out !important; } .ef-v51-choice-candidate:hover, .ef-v51-choice-candidate.ef-v51-choice-selected, .ef-v51-choice-selected, .ef-v50-choice-candidate:hover, .ef-v50-choice-candidate.ef-v50-choice-selected, .ef-v50-choice-selected, .ef-v49-choice-candidate:hover, .ef-v49-choice-candidate.ef-v49-choice-selected, .ef-v49-choice-selected, .ef-v51-choice-candidate.is-selected, .ef-v51-choice-candidate.selected, .ef-v51-choice-candidate.active, .ef-v51-choice-candidate[aria-checked="true"], .ef-v51-choice-candidate[data-selected="1"], .ef-v50-choice-candidate.is-selected, .ef-v50-choice-candidate.selected, .ef-v50-choice-candidate.active, .ef-v50-choice-candidate[aria-checked="true"], .ef-v50-choice-candidate[data-selected="1"], .ef-v49-choice-candidate.is-selected, .ef-v49-choice-candidate.selected, .ef-v49-choice-candidate.active, .ef-v49-choice-candidate[aria-checked="true"], .ef-v49-choice-candidate[data-selected="1"] { color: inherit !important; border-color: var(--ef-v51-success-green) !important; box-shadow: var(--ef-v51-choice-border-shadow) !important; transform: translateY(-1px) !important; } /* On annule les vieux textes forcés en blanc par V4.9 quand le fond n'est plus vert. */ .ef-v51-choice-candidate:hover *, .ef-v51-choice-candidate.ef-v51-choice-selected *, .ef-v51-choice-selected *, .ef-v50-choice-candidate:hover *, .ef-v50-choice-candidate.ef-v50-choice-selected *, .ef-v50-choice-selected *, .ef-v49-choice-candidate:hover *, .ef-v49-choice-candidate.ef-v49-choice-selected *, .ef-v49-choice-selected * { color: inherit !important; } /* Couverture complémentaire si la page utilise directement is-selected/selected. */ [id*="register" i] .is-selected, [class*="register" i] .is-selected, [id*="inscription" i] .is-selected, [class*="inscription" i] .is-selected, [id*="wizard" i] .is-selected, [class*="wizard" i] .is-selected, [id*="signup" i] .is-selected, [class*="signup" i] .is-selected, [id*="register" i] .selected, [class*="register" i] .selected, [id*="inscription" i] .selected, [class*="inscription" i] .selected, [id*="wizard" i] .selected, [class*="wizard" i] .selected, [id*="signup" i] .selected, [class*="signup" i] .selected { border-color: var(--ef-v51-success-green) !important; box-shadow: var(--ef-v51-choice-border-shadow) !important; } /* ------------------------------------------------------------ Mobile : empêcher les gros boutons rouges / CTA de déborder. Même logique que pour le bouton accepter cookies : largeur contrôlée, padding raisonnable, texte qui peut revenir à la ligne. ------------------------------------------------------------ */ @media (max-width: 575.98px) { main .btn, main a.btn, main button.btn, main input[type="submit"].btn, main input[type="button"].btn, main .pq-button, main .pq-btn, main .ef-btn, main .ef-button, main .primary-btn, main .primary-button, main .theme-btn, main .subscribe-btn, main .subscription-btn, main .checkout-btn, main .payment-btn, main a[class*="btn" i], main button[class*="btn" i], main a[class*="button" i], main button[class*="button" i], section .btn, section a[class*="btn" i], section button[class*="btn" i], section a[class*="button" i], section button[class*="button" i], .modal .btn, .modal a[class*="btn" i], .modal button[class*="btn" i], .modal a[class*="button" i], .modal button[class*="button" i], .card .btn, .card a[class*="btn" i], .card button[class*="btn" i], .card a[class*="button" i], .card button[class*="button" i] { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 18px !important; padding-right: 18px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; text-align: center !important; line-height: 1.25 !important; justify-content: center !important; align-items: center !important; } main .btn + .btn, main a[class*="btn" i] + a[class*="btn" i], main button[class*="btn" i] + button[class*="btn" i], main a[class*="button" i] + a[class*="button" i], main button[class*="button" i] + button[class*="button" i], .modal .btn + .btn, .card .btn + .btn { margin-top: 12px !important; } main .button-row, main .btn-row, main .cta-row, main .actions-row, main .action-row, main .subscription-actions, main .checkout-actions, main .payment-actions, main .form-actions, .modal .modal-actions, .modal .form-actions, .card .card-actions { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } /* Exclusions pour ne pas transformer les petits boutons flottants/icônes. */ .back-to-top, .scroll-top, .scroll-to-top, #back-to-top, #scroll-top, a[href="#top"], a[href="#"] .fa-arrow-up, header .btn, header a[class*="btn" i], header button[class*="btn" i], nav .btn, nav a[class*="btn" i], nav button[class*="btn" i] { width: auto !important; max-width: none !important; padding-left: inherit !important; padding-right: inherit !important; white-space: inherit !important; } }