/* club151 — shared storefront styles (linked by every page) */ @keyframes lcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes lcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; } /* ---- Pokéball theme-switch transition ---- */ #lc-theme-fx { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; } #lc-theme-fx .wipe { position: absolute; inset: 0; animation: lcIris 820ms cubic-bezier(0.65,0,0.35,1) forwards; } @keyframes lcIris { 0% { clip-path: circle(0% at 50% 50%); } 26% { clip-path: circle(150% at 50% 50%); } 54% { clip-path: circle(150% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } } #lc-theme-fx .ball { position: relative; width: 104px; height: 104px; transform-style: preserve-3d; animation: lcBall 820ms cubic-bezier(0.5,1.5,0.45,1) forwards; } @keyframes lcBall { 0% { transform: perspective(600px) scale(0) rotateY(-360deg); opacity: 0; } 22% { transform: perspective(600px) scale(1.18) rotateY(-120deg); opacity: 1; } 40% { transform: perspective(600px) scale(1) rotateY(0deg); opacity: 1; } 58% { transform: perspective(600px) scale(1.06) rotateY(40deg); opacity: 1; } 74% { transform: perspective(600px) scale(1) rotateY(0deg); opacity: 1; } 100% { transform: perspective(600px) scale(0) rotateY(360deg); opacity: 0; } } /* 3D page tilt — desktop only (added via JS) */ #root.lc-3d { transform-origin: 50% 50%; animation: lcPageTilt 820ms cubic-bezier(0.65,0,0.35,1); } @keyframes lcPageTilt { 0% { transform: perspective(1400px) rotateX(0deg) scale(1); } 28% { transform: perspective(1400px) rotateX(8deg) scale(0.94); } 54% { transform: perspective(1400px) rotateX(8deg) scale(0.94); } 100% { transform: perspective(1400px) rotateX(0deg) scale(1); } } #lc-theme-fx .flash { position: absolute; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 40%, transparent 70%); animation: lcFlash 820ms ease-out forwards; } @keyframes lcFlash { 0%, 40% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.6); opacity: 1; } 66% { transform: scale(3.4); opacity: 0.5; } 80%, 100% { transform: scale(5); opacity: 0; } } #lc-theme-fx .ray { position: absolute; width: 220%; height: 220%; background: conic-gradient(from 0deg, transparent 0 10deg, rgba(255,255,255,0.10) 10deg 20deg, transparent 20deg 30deg, rgba(255,255,255,0.10) 30deg 40deg); animation: lcRay 820ms linear forwards; opacity: 0; } @keyframes lcRay { 0%, 38% { opacity: 0; transform: rotate(0deg) scale(0.4); } 52% { opacity: 0.8; } 100% { opacity: 0; transform: rotate(120deg) scale(1.2); } } /* Reduced-motion : la transition de thème devient un simple fondu court — pas de flash plein écran, pas de rayons, pas de spin ni de tilt 3D (photosensibilité / troubles vestibulaires). Sans risque côté JS : Chrome.jsx pilote toute la séquence au setTimeout, aucun animationend. */ @keyframes lcThemeFade { 0% { opacity: 0; } 26% { opacity: 1; } 54% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #lc-theme-fx .wipe { animation: lcThemeFade 820ms ease forwards !important; clip-path: none !important; } #lc-theme-fx .ball { animation: lcThemeFade 820ms ease forwards !important; } #lc-theme-fx .flash { animation: none !important; opacity: 0 !important; } #lc-theme-fx .ray { animation: none !important; opacity: 0 !important; } #root.lc-3d { animation: none !important; transform: none !important; } } /* ---- Add-to-cart bump ---- */ @keyframes lcBump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(0.88); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .lc-bump { animation: lcBump 0.42s ease; } } /* utility-bar link hover */ .lc-util { transition: color 0.15s ease; } .lc-util:hover { color: var(--yellow) !important; } /* ---- Accessibility & polish ---- */ /* Anneau de focus à DEUX composantes pour rester visible sur TOUS les fonds : le bleu accent tient sur les surfaces claires (#3363A9 sur blanc = 4.5:1) mais s'efface sur le header/footer navy (~1.6:1, sous les 3:1 requis) ; le halo clair prend alors le relais (~5:1 sur navy, et sur le contenu foncé du thème sombre). Sur une surface claire le halo est invisible mais inoffensif. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255,255,255,0.55); } :focus:not(:focus-visible) { outline: none; } a, button { -webkit-tap-highlight-color: transparent; } img { -webkit-user-drag: none; user-select: none; } ::selection { background: var(--accent); color: #fff; } .lc-skip { position: fixed; left: 16px; top: -80px; z-index: 10000; background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 10px; font-family: var(--font-body); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); text-decoration: none; border: 2px solid var(--yellow); transition: top 0.2s ease; } .lc-skip:focus { top: 16px; } /* ---- Entrée de section au chargement (CSS pur — ne peut jamais rester caché : lcRise n'anime que transform, l'opacité reste à 1 ; si l'animation ne joue pas, l'élément garde simplement son état visible par défaut). Les .lc-reveal de l'accueil sont exclus : ils ont leur propre réveil au scroll ci-dessous, et le fill « both » de lcRise écraserait leur transform de transition. */ @keyframes lcRise { from { transform: translateY(22px); } to { transform: none; } } @media (prefers-reduced-motion: no-preference) { main section:not(.lc-reveal) { animation: lcRise 0.55s cubic-bezier(0.2,0.8,0.2,1) both; } } /* ---- Réveils au scroll de l'accueil (.lc-reveal — classes posées par Home.jsx) ---- Sécurité anti-« contenu bloqué invisible » : l'état caché n'existe que via .lc-reveal-init, ajoutée par le JS juste AVANT l'observation. Sans JS (noscript, robots), sans IntersectionObserver ou en reduced-motion, aucune règle ne cache quoi que ce soit. */ @media (prefers-reduced-motion: no-preference) { .lc-reveal.lc-reveal-init { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2,0.8,0.2,1); } .lc-reveal.lc-reveal-init.in { opacity: 1; transform: none; } } /* Garde-fou hors media query : une fois révélé, toujours visible. */ .lc-reveal.in { opacity: 1; transform: none; } /* ---- Hero ken-burns drift ---- */ @keyframes lcKenburns { 0% { transform: scale(1) translate3d(0,0,0); } 100% { transform: scale(1.09) translate3d(-1.4%,-1%,0); } } /* ---- Pokéball hover spin ---- */ .lc-pb > svg { transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1); } .lc-pb:hover > svg { transform: rotate(360deg); } /* ---- Reassurance hover highlight ---- */ .lc-reassure { padding: 10px 16px; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease; cursor: default; } .lc-reassure:hover { background: rgba(51,99,169,0.10); transform: translateY(-1px); } .lc-reassure-ic { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .lc-reassure:hover .lc-reassure-ic { background: var(--accent); color: #fff !important; border-color: var(--accent) !important; } /* ---- Nav bar hover highlight ---- */ .lc-nav-link { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; border-radius: 6px 6px 0 0; } .lc-nav-link:hover { background: rgba(255,255,255,0.09); color: #fff !important; border-color: rgba(255,203,5,0.55) !important; } /* ---- Footer link + social hover ---- */ .lc-foot-link { transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease; } .lc-foot-link:hover { color: #fff !important; border-color: rgba(255,255,255,0.5) !important; } .lc-social { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.18); transition: all 0.18s ease; } .lc-social:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } /* ============================================ RESPONSIVE — desktop étroit, tablette & téléphone Surcharge les grilles inline (d'où !important). Paliers : 1060 (la nav ne tient plus) · 980 (2 colonnes → 1) · 680 (téléphone) · 460 (petit téléphone) ============================================ */ /* ---- 1060px : la barre de navigation (8 onglets en whiteSpace:nowrap, ~985px + 48px de gouttières) ne rentre plus dans .container-wide. Les onglets ne peuvent pas rétrécir sous leur min-content : sans conteneur de défilement la barre poussait le document et provoquait un débordement horizontal de ~185px sur TOUTES les pages entre 681 et 1060px (iPad portrait compris). Le méga-panneau est en position:absolute rattaché au