/* ===================================================================== Polish UI/UX — GAG GE Couche d'animations/finitions douces. Ne change PAS l'identité (couleurs, typo, structure). Progressif : sans JS ou avec prefers-reduced-motion, tout reste visible (aucune animation). L'état masqué initial n'est appliqué que si (posée avant le rendu par un script inline) → aucun flash. ===================================================================== */ html { scroll-behavior: smooth; } /* --- Révélation au scroll --- */ html.js-reveal main section { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1); will-change: opacity, transform; } html.js-reveal main section.is-visible { opacity: 1; transform: none; } /* Stagger léger des cartes dans une grille révélée */ html.js-reveal main section .grid > * { opacity: 0; transform: translateY(18px); } html.js-reveal main section.is-visible .grid > * { animation: gagCardIn 0.65s cubic-bezier(0.16, 0.84, 0.44, 1) forwards; } html.js-reveal main section.is-visible .grid > *:nth-child(1) { animation-delay: 0.06s; } html.js-reveal main section.is-visible .grid > *:nth-child(2) { animation-delay: 0.14s; } html.js-reveal main section.is-visible .grid > *:nth-child(3) { animation-delay: 0.22s; } html.js-reveal main section.is-visible .grid > *:nth-child(4) { animation-delay: 0.30s; } html.js-reveal main section.is-visible .grid > *:nth-child(5) { animation-delay: 0.38s; } html.js-reveal main section.is-visible .grid > *:nth-child(6) { animation-delay: 0.46s; } @keyframes gagCardIn { to { opacity: 1; transform: none; } } /* --- Cartes : survol soigné (lift + ombre + accent rouge) --- */ main article, main .grid > a { box-shadow: 0 1px 3px rgba(46, 52, 66, 0.05); transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease; } main article:hover, main .grid > a:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -16px rgba(46, 52, 66, 0.28); border-color: rgba(228, 18, 54, 0.35); } /* --- Boutons rouges : micro-interaction --- */ main .bg-gag-red { transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } main a.bg-gag-red:hover, main button.bg-gag-red:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(228, 18, 54, 0.55); } /* --- Réduction de mouvement : tout neutralisé --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-reveal main section, html.js-reveal main section .grid > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } main article, main .grid > a, main .bg-gag-red { transition: none !important; } }