/* -------------------------------------------------------------------------- Blog — raffinements hover impossibles en classes Webflow (selecteurs descendants : zoom image quand on survole TOUTE la carte, fleche du bouton qui se decale) -------------------------------------------------------------------------- */ /* Zoom image 1.04 quand la carte entiere est survolee (pattern portfolio). Complete le :hover pose sur .blog34_image (survol de l'image seule). */ .blog34_item:hover .blog34_image { transform: scale(1.04); } /* Titre de carte -> bleu accent quand la carte entiere est survolee */ .blog34_item:hover .blog34_title-text { color: #619dc2; } .blog34_title-text { transition: color 0.2s ease; } /* Fleche de « Lire l'article » : micro-nudge signature du site */ .blog34_button-wrapper .button.is-link .icon-embed-xxsmall, .blog34_button-wrapper .button.is-link svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .blog34_item:hover .button.is-link .icon-embed-xxsmall, .blog34_item:hover .button.is-link svg { transform: translateX(4px); } /* -------------------------------------------------------------------------- Filtres par tags (Finsweet fs-list) Radios natifs invisibles (.filter-radio-input, opacity 0, etires sur tout le bouton) : le mode custom de Webflow n'est pas activable par API, donc l'etat selectionne est reproduit ici via :has(). Meme voile navy que .checkbox.w--redirected-checked sur /projets. Blog.css n'est charge que sur /articles : aucun impact sur /projets. -------------------------------------------------------------------------- */ .filter-btn { cursor: pointer; transition: background-color 0.2s ease; } .filter-btn:has(.filter-radio-input:checked) { background-color: #43678d4d; } /* Tactile : pas de hover, le voile degrade reste plus present */ @media (hover: none) { .blog34_image-wrapper::after { background-image: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55) 100%); } } /* Accessibilite : neutralise les transitions si demande */ @media (prefers-reduced-motion: reduce) { .blog34_image, .blog34_title-text, .blog34_button-wrapper .button.is-link svg, .blog34_button-wrapper .button.is-link .icon-embed-xxsmall { transition: none !important; } .blog34_item:hover .blog34_image { transform: none; } }