/* ============================================================================ SURVOL NEUTRALISÉ SUR APPAREILS TACTILES — template BLOG ---------------------------------------------------------------------------- POURQUOI Un écran tactile n'a pas de survol. Le navigateur applique quand même :hover au toucher et l'y laisse COLLÉ après le tap, jusqu'au toucher suivant ailleurs. Résultat : le bouton qu'on vient d'utiliser reste peint en état survolé — texte qui vire au blanc sur fond clair, compteurs illisibles, cartes figées en position soulevée. POURQUOI `hover: none` ET PAS `max-width` Ce critère cible le MATÉRIEL (absence de dispositif de survol), pas la largeur de la fenêtre. Une fenêtre étroite sur ordinateur garde donc ses survols, et une tablette large les perd — ce qui est le comportement voulu. `pointer: coarse` complète pour les appareils hybrides (écran tactile + souris) où `hover: none` seul ne suffit pas toujours. CE QUI EST NEUTRALISÉ : le décoratif — couleur, fond, bordure, ombre, transformation, échelle. CE QUI NE L'EST PAS : les survols FONCTIONNELS, ceux qui RÉVÈLENT un élément (menu ⋯ d'une carte, bouton de suppression, surcouche d'action). Les neutraliser rendrait ces boutons définitivement inatteignables au doigt. Ils sont au contraire forcés VISIBLES en permanence sur tactile — voir plus bas. Chargé en DERNIER dans le , après blog.css et style_lp.css, pour l'emporter à spécificité égale. ========================================================================= */ @media (hover: none), (pointer: coarse) { /* --- 1. Survols fonctionnels : rendus VISIBLES en permanence ------------ Sans souris, ces éléments n'apparaîtraient jamais. On les affiche donc d'emblée plutôt que de les laisser dépendre d'un survol impossible. */ .card .card-menu-btn, .card .card-overlay, .card-poster .poster-overlay, .card .card-team-hint, .b-card .b-sec-del { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* --- 2. Survols décoratifs : neutralisés ------------------------------- `unset` = `initial` pour ces propriétés non héritées : fond transparent, bordure de la couleur du texte, pas d'ombre. On retombe donc sur l'aspect au repos sans écrire de couleur en dur, ce qui laisse les thèmes clair et sombre intacts et évite d'énumérer 165 sélecteurs. (Pas `revert` : sur un il remonte jusqu'à la feuille du navigateur — voir la note sur la couleur plus bas.) */ /* `a:hover` volontairement ABSENT de cette liste : un lien qui hérite visuellement du fond de sa carte se retrouvait avec un fond transparent au toucher (mesuré : la carte crème devenait blanche sous le doigt). Les liens n'ont pas de fond propre à neutraliser — seule leur COULEUR posait problème, traitée dans le bloc suivant. */ button:hover, .b-card:hover, .bh-nav a:hover, .lp-more-item:hover, .b-tag:hover, .b-rub:hover, .bf a:hover, .card:hover, .card a:hover, .wl-menu-item:hover, .b-art-card:hover, .b-more:hover, .b-sec-head a:hover { background-color: unset !important; box-shadow: none !important; transform: none !important; } /* border-color volontairement ABSENT de la liste : `unset` le ramène à `currentColor`, ce qui dessinerait une bordure de la couleur du texte sur des boutons qui n'en avaient qu'une très pâle. Les bordures de survol sont traitées cas par cas dans les pages concernées. */ /* Couleur du TEXTE : c'est elle qui produisait les libellés illisibles (blanc sur crème) une fois le survol collé. ATTENTION — surtout PAS `revert` ici : sur un , `revert` remonte jusqu'à la feuille du NAVIGATEUR et repeint le lien en bleu #0000EE. Mesuré : les liens des cartes et du pied de page viraient au bleu sur mobile. `inherit` reprend la couleur du parent, qui est la couleur de texte du site dans les deux thèmes — clair comme sombre. */ a:hover, .bh-nav a:hover, .lp-more-item:hover, .bf a:hover, .b-tag:hover, .b-sec-head a:hover { color: inherit !important; } /* --- 3. Effets de mise à l'échelle et de translation ------------------- Cartes qui se soulèvent, vignettes qui zooment : sans souris l'effet reste figé après le tap. */ .b-card:hover img, .card:hover img, .b-art-card:hover img, .card-poster:hover img, .ph-ad-link:hover img, .b-thumb:hover img { transform: none !important; } /* --- 4. Soulignements révélés au survol -------------------------------- */ .bh-nav a:hover::after, .b-sec-head a:hover::after { transform: none !important; } /* --- 5. Barre d'actions des pages média (vidéo / photo / audio) --------- Ces boutons sont stylés par des sélecteurs de FORTE spécificité portant déjà !important — notamment `:root[data-mode="light"] .btn-action:hover` dans blog.css. Une règle simple ne les atteint pas : mesuré, le fond passait encore au blanc et le texte au rouge sous le doigt. On reprend donc le même préfixe `:root[data-mode=...]` pour égaler leur poids. */ :root .ph-actions .ph-btn:hover, :root .ph-actions .btn-like:hover, :root[data-mode="light"] .btn-action:hover, :root[data-mode="light"] .btn-like:hover, :root[data-mode="dark"] .btn-action:hover, :root[data-mode="dark"] .btn-like:hover, /* Sélecteur relevé À LA MESURE dans la cascade réelle : c'est lui qui l'emportait sur les pages média (fond blanc + texte rouge au toucher). Le combinateur enfant `>` et l'attribut de mode lui donnent une spécificité qu'aucune règle plus simple n'atteint. */ :root[data-mode="light"] .ph-actions > button:hover, :root[data-mode="light"] .ph-actions > a:hover, :root[data-mode="dark"] .ph-actions > button:hover, :root[data-mode="dark"] .ph-actions > a:hover { background: var(--surface-2) !important; background-color: var(--surface-2) !important; border-color: var(--line-soft) !important; /* `inherit` plutôt qu'une variable choisie à la main : on reprend exactement la couleur de texte du conteneur, donc celle du bouton au repos. Avec --text-soft le libellé s'éclaircissait légèrement au toucher — lisible, mais toujours un changement visible. */ color: inherit !important; } :root .ph-actions .ph-btn:hover i, :root .ph-actions .btn-like:hover i, :root[data-mode="light"] .btn-like:hover i { color: var(--text-faint) !important; } /* Les états ACTIFS (aimé, republié, enregistré) gardent leur accent : c'est l'état réel du contenu, pas un survol. */ :root .ph-save.on:hover, :root .ph-save.on:hover i, :root .ph-repost.on:hover, :root .ph-repost.on:hover i, :root .btn-like.reacted:hover i, :root .btn-like.has-reaction:hover, :root .btn-like.active:hover { color: var(--accent, var(--red)) !important; } /* « S'abonner » : bouton a FOND PLEIN. Il porte aussi .ph-btn, donc les regles ci-dessus lui imposeraient un texte fonce illisible sur son fond d'accent. On reprend les ROLES du contrat (et non --red en dur) : le bouton garde exactement son aspect de repos sous le doigt, quelle que soit la couleur d'accent du site. */ :root .ph-sub:not(.on):hover, :root[data-mode="light"] .ph-sub:not(.on):hover, :root[data-mode="dark"] .ph-sub:not(.on):hover { background: var(--lkb-solid-bg, var(--red)) !important; background-color: var(--lkb-solid-bg, var(--red)) !important; border-color: var(--lkb-solid-bg, var(--red)) !important; color: var(--lkb-solid-text, #fff) !important; } }