/* Yeees! — Mode TV / Tizen / vieux navigateurs * Active dès que a la classe .tv-mode (poussée par tv-mode.js) * Objectif : éliminer le clignotement et garantir la lisibilité sur : * - Samsung Tizen Web Browser (TV) * - LG webOS Browser (TV) * - Anciens Smart TV * - Vieilles tablettes Android (≤ 7) * - Tous appareils avec prefers-reduced-motion */ html.tv-mode * { /* Coupe TOUTES les animations et transitions : pas de flicker sur TV */ animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } /* Backdrop-filter mal supporté → fond opaque garanti */ html.tv-mode .backdrop-blur-lg, html.tv-mode .backdrop-blur-md, html.tv-mode .backdrop-blur-sm, html.tv-mode .backdrop-blur, html.tv-mode [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: #FFFAF5 !important; /* cream opaque */ } /* Sticky souvent mal géré sur Tizen → on garde le header en haut sans sticky */ html.tv-mode header.sticky, html.tv-mode [class*="sticky"] { position: relative !important; top: auto !important; } /* Toujours afficher le menu desktop sur TV (résolution 1920×1080 = lg breakpoint Tailwind) */ html.tv-mode nav.lg\:flex { display: flex !important; } html.tv-mode .lg\:hidden { display: none !important; } html.tv-mode .hidden.lg\:flex { display: flex !important; } html.tv-mode .hidden.lg\:inline-flex { display: inline-flex !important; } html.tv-mode .hidden.md\:inline { display: inline !important; } html.tv-mode .hidden.sm\:flex { display: flex !important; } html.tv-mode .hidden.sm\:inline { display: inline !important; } html.tv-mode .hidden.xl\:inline-flex { display: inline-flex !important; } /* Désactive les effets hover qui peuvent flicker sur TV sans souris */ html.tv-mode *:hover { transform: none !important; } /* Pulsations / spinners → fixés */ html.tv-mode .animate-pulse, html.tv-mode .animate-spin, html.tv-mode .animate-bounce { animation: none !important; opacity: 1 !important; } /* Gradients radiaux/coniques parfois mal rendus → fallback uni */ html.tv-mode [class*="bg-gradient-radial"], html.tv-mode [class*="bg-gradient-conic"] { background: #FF6B35 !important; } /* Cartes et boutons en mode TV : bordure visible (souvent le hover crée la bordure) */ html.tv-mode .product-card, html.tv-mode [class*="hover:border"] { border-width: 1.5px !important; } /* Force la pleine résolution sur les images (pas de blur progressif) */ html.tv-mode img { image-rendering: auto !important; } /* Préfère reduced-motion système : applique automatiquement le mode TV */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ═══════════════════════════════════════════════════════════ FOCUS RINGS TV : visibilité MAX pour navigation au remote La TV navigue avec ←↑→↓ + OK, il faut SAVOIR où on est ═══════════════════════════════════════════════════════════ */ html.tv-mode :focus, html.tv-mode :focus-visible { outline: 4px solid #FF6B35 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.25) !important; border-radius: 6px; position: relative; z-index: 10; } /* Encore plus visible sur les boutons d'action principaux */ html.tv-mode button:focus, html.tv-mode .cat-tab:focus, html.tv-mode .sub-tab:focus, html.tv-mode .model-series-btn:focus, html.tv-mode .model-exact-btn:focus, html.tv-mode .univers-card:focus, html.tv-mode a:focus { outline: 5px solid #FF6B35 !important; outline-offset: 4px !important; transform: scale(1.05) !important; background-color: #FFE4D2 !important; } /* Boutons plus gros sur TV (la résolution est 1920x1080 mais regardée de loin) */ html.tv-mode .cat-tab, html.tv-mode .sub-tab, html.tv-mode .model-series-btn, html.tv-mode .model-exact-btn { font-size: 14px !important; padding: 8px 14px !important; min-height: 36px; } /* Liens du menu nav : plus gros sur TV */ html.tv-mode header nav a { font-size: 16px !important; padding: 6px 8px !important; } /* CTA téléphone : très visible sur TV */ html.tv-mode header a[href^="tel:"] { font-size: 16px !important; padding: 10px 18px !important; } /* Cards produit : focus très visible (parcours avec arrow keys) */ html.tv-mode .product-card:focus, html.tv-mode .product-card:hover { outline: 4px solid #FF6B35 !important; outline-offset: 4px !important; border-color: #FF6B35 !important; } /* Force la pointer-events: auto pour s'assurer que tout reçoit les clics */ html.tv-mode button, html.tv-mode a, html.tv-mode [role="button"], html.tv-mode .cat-tab, html.tv-mode .sub-tab, html.tv-mode .model-series-btn, html.tv-mode .model-exact-btn, html.tv-mode .univers-card, html.tv-mode .product-card { pointer-events: auto !important; cursor: pointer !important; } /* Aucun overlay ne doit intercepter les clics en mode TV */ html.tv-mode .backdrop, html.tv-mode [class*="backdrop"]:not(header):not(button):not(a) { pointer-events: none !important; }