/* ========================================================================= VELOLOD — couche d'interactions ------------------------------------------------------------------------- Tout ce fichier est conditionnel. Trois barrières successives : @media (hover: hover) and (pointer: fine) → pas d'effet au doigt @media (prefers-reduced-motion: no-preference) → réglage système respecté .vl-motion sur → posé par le JavaScript Sans JavaScript, aucune de ces règles ne s'applique et la page reste entièrement utilisable. Aucune règle ici ne modifie la mise en page : uniquement transform, opacity et box-shadow. ========================================================================= */ /* ---------- Le focus visible ne dépend d'aucune condition ---------------- */ /* C'est la règle la plus importante du fichier : elle s'applique toujours, y compris sans JavaScript et en mouvement réduit. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } :focus-visible { outline-offset: 4px; } /* ---------- Cible tactile minimale --------------------------------------- */ .product-card__fav, .product-card__compare, .rail__btn, .hero__nav, .hero__dot { min-width: 44px; min-height: 44px; } .hero__dot { padding: 16px 10px; background-clip: content-box; } @media (hover: hover) and (pointer: fine) { @media (prefers-reduced-motion: no-preference) { /* * Curseur personnalisé retiré : le pointeur natif du système est conservé. * Aucune règle « cursor: none » ne subsiste — rien ne doit pouvoir masquer * la flèche de l'utilisateur. */ /* ==================================================== IMAGES ET CARTES == */ .vl-media { overflow: hidden; transform-style: preserve-3d; } .vl-media > img { will-change: auto; backface-visibility: hidden; } .product-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .cat-card { transition: box-shadow var(--dur-base) var(--ease-out); } .cat-card:hover { box-shadow: var(--shadow-lg); } /* ================================================== MICRO-INTERACTIONS == */ .btn { transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn:active { transform: translateY(1px) scale(.985); } .tool, .rail__btn, .hero__nav { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .tool:active, .rail__btn:active, .hero__nav:active { transform: scale(.94); } .link-arrow svg { transition: transform var(--dur-base) var(--ease-out); } .link-arrow:hover svg { transform: translateX(4px); } .chip, .subcats a, .spec-chip { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .chip:active { transform: scale(.96); } } } /* ========================================================================= Les blocs suivants s'appliquent partout : ce sont des états, pas des animations. Ils restent utiles en mouvement réduit et sur mobile. ========================================================================= */ /* ---------- Favoris ------------------------------------------------------ */ .product-card__fav { position: relative; } .product-card__fav[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); } @media (prefers-reduced-motion: no-preference) { .product-card__fav[aria-pressed="true"] svg { animation: vl-pop 320ms var(--ease-out); } @keyframes vl-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } } /* ---------- Comparateur -------------------------------------------------- */ .product-card__compare[aria-pressed="true"] { color: var(--accent); font-weight: 800; } .compare-bar { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; padding: var(--space-4) var(--gutter); background: var(--vl-ink-900); color: #fff; box-shadow: 0 -12px 32px rgba(20, 23, 26, .18); transform: translateY(101%); transition: transform var(--dur-base) var(--ease-out); } .compare-bar.is-open { transform: none; } @media (prefers-reduced-motion: reduce) { .compare-bar { transition: none; } } .compare-bar__count { font-weight: 800; } .compare-bar__clear { border: 0; background: none; color: rgba(255, 255, 255, .7); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .compare-bar__clear:hover { color: #fff; } /* ---------- Retour d'information : panier, favoris, filtres -------------- */ .vl-toast { position: fixed; z-index: 10001; inset: auto var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)) auto; display: flex; align-items: center; gap: var(--space-3); max-width: min(92vw, 380px); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--vl-ink-900); color: #fff; font-size: var(--step--1); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .vl-toast.is-open { opacity: 1; transform: none; } .vl-toast svg { flex: none; color: var(--accent); } .vl-toast a { color: #fff; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .vl-toast { transition: opacity var(--dur-fast) linear; transform: none; } } /* Bouton en cours de traitement : le retour est immédiat, sans décalage. */ .btn.is-loading, .button.loading { position: relative; color: transparent !important; pointer-events: none; } .btn.is-loading::after, .button.loading::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: vl-spin 640ms linear infinite; } @keyframes vl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after, .button.loading::after { animation-duration: 1600ms; } } /* ---------- Alerte retour en stock --------------------------------------- */ .restock { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .restock__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .restock__form input[type="email"] { flex: 1 1 220px; padding: .8rem 1rem; min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; } .restock__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--step--2); color: var(--text-muted); margin-top: var(--space-3); } .restock__consent input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); margin-top: 2px; } .restock__done { color: #0F7A45; font-size: var(--step--1); margin-top: var(--space-3); } /* ---------- Tableau du comparateur --------------------------------------- */ .compare-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .compare-table th, .compare-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; } .compare-table thead th { position: sticky; top: var(--header-h-compact); background: #fff; z-index: 1; } .compare-table img { width: 100%; max-width: 180px; border-radius: var(--radius-sm); } .compare-table tbody th { width: 190px; font-weight: 800; color: var(--text-muted); } /* ---------- Révélations : jamais de contenu bloqué ------------------------ */ /* Sans JavaScript, .reveal reste visible : la classe is-in n'est qu'un bonus. */ html.no-js .reveal { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }