/* ================================================================ ArtKeyz — Accessibilité tactile et lisibilité ---------------------------------------------------------------- Feuille séparée volontairement : ces règles corrigent des mesures précises, elles doivent rester repérables et annulables d'un bloc. Deux constats mesurés sur le site : · 40 à 48 zones cliquables sous 44×44 px selon la page, dont le bouton menu mobile à 38×32 — la commande de navigation principale sur téléphone. · de nombreux textes à 9, 10 et 11 px : sous 12 px, Google signale « texte illisible » sur mobile, et la cible 35-60 ans d'ArtKeyz le ressent directement. Technique employée pour les liens en ligne (fil d'Ariane, footer, nav) : padding vertical + marge négative de même valeur. La zone tactile grandit, l'encombrement visuel ne bouge pas. Sans ça, le footer doublerait de hauteur. ================================================================ */ /* ── Repère commun ──────────────────────────────────────────────── 44px : seuil confortable retenu par Google et par WCAG 2.5.5. La norme AA (WCAG 2.5.8) n'exige que 24px ; on vise plus haut sur les commandes réellement utilisées au doigt. */ /* ================================================================ 1. ZONES TACTILES ================================================================ */ /* Bouton menu mobile — mesuré à 38×32 */ .nav-hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Icônes de la nav (panier) */ .nav-icons > * { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Liens de navigation principale */ .nav-links a { display: inline-block; padding-top: 15px; padding-bottom: 15px; margin-top: -15px; margin-bottom: -15px; } /* Fil d'Ariane et lien de retour — mesurés à 62×12 et 91×12. Ici on vise 26px, pas 44 : ces liens sont empilés à quelques pixels l'un de l'autre, et une zone de 44px faisait déborder le lien de retour SUR le fil d'Ariane — un clic en haut du fil activait le mauvais lien. 26px satisfait le seuil AA (WCAG 2.5.8 : 24px) sans créer de chevauchement. */ .breadcrumb a, .back-link { display: inline-block; padding-top: 7px; padding-bottom: 7px; margin-top: -7px; margin-bottom: -7px; } /* Respiration réelle entre le lien de retour et le fil d'Ariane */ .back-link { margin-bottom: 10px; } /* Le fil d'Ariane était en nowrap : à 12px le nom du produit débordait et se superposait à la ligne du dessus sur mobile. */ .breadcrumb { flex-wrap: wrap; row-gap: 4px; } @media (max-width: 640px) { .breadcrumb { letter-spacing: 0.1em; } } /* Liens du footer — mesurés à 327×14 */ #site-footer .footer-col ul a, #site-footer .footer-bottom-links a, #site-footer .footer-contact-item a { display: inline-block; padding-top: 15px; padding-bottom: 15px; margin-top: -15px; margin-bottom: -15px; } /* La marge négative annule l'espacement d'origine : on le rétablit sur la liste plutôt que sur le lien. */ #site-footer .footer-col ul li + li { margin-top: 10px; } /* Réseaux sociaux */ #site-footer .footer-social-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Sélecteur de quantité — mesuré à 40×40 */ .qty-step { min-width: 44px; min-height: 44px; } /* Pastilles de finition noir/blanc sur les cartes produit : 18px visuellement, mais la zone tactile doit rester atteignable. */ .swatch { position: relative; } .swatch::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Filtres de la collection, boutons d'option, liens de section */ .filters-bar button, .opt-btn, .suggestions-link, .savoir-faire-link, .article-cta, .journal-card-link { display: inline-flex; align-items: center; min-height: 44px; } /* Puces de galerie : cibles minuscules par nature */ .gallery-dots .dot, .card-dots .card-dot { position: relative; } .gallery-dots .dot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Vignettes de galerie */ .gallery-thumbs .thumb { min-width: 56px; min-height: 56px; } /* ================================================================ 2. LISIBILITÉ — plancher à 12 px ---------------------------------------------------------------- Les micro-capitales espacées font partie de l'identité du site : on ne les supprime pas, on les remonte au plancher lisible. Le letter-spacing est légèrement réduit là où l'agrandissement risquerait de faire passer le libellé à la ligne. ================================================================ */ .nav-logo-tagline { font-size: 12px; } .breadcrumb, .back-link, .product-series, .limited-badge, .limited-badge-card, .product-specs-title, .product-specs-label, .product-card-series, .sugg-series, .suggestions-tag, .section-label, .landing-section-label, .city-section-label, .hero-scroll-hint span, .brand-band-num, .brand-tile-label, .brand-tile-count, .product-card-cta, .footer-badge, #site-footer .footer-col ul a, #site-footer .footer-bottom-links a, #site-footer .footer-copyright, .qty-label, .option-label { font-size: 12px; } /* Descriptions et prix des cartes : 11 px mesurés */ .product-card-desc, .landing-card-brand, .city-card-brand, .journal-card-date { font-size: 12px; } /* L'accroche du hero était en clamp(10px, …) : on relève le plancher */ .hero-tagline { font-size: clamp(12px, 1.2vw, 13px); } /* Second passage, après mesure dans le navigateur : ces éléments-là étaient les plus problématiques et m'avaient échappé au premier tri. Le bouton d'ajout au panier à 10px et les garanties à 7,5px sont les deux plus graves — l'un est l'action d'achat, l'autre porte les arguments de réassurance juste avant la décision. */ .btn-add-cart, .opt-btn, .price-tax-note, .suggestions-link, .sugg-cta, .limited-badge strong, .limited-badge-card strong, .cart-head-count, .cart-empty-sub, .cart-empty-cta, .cart-empty-title, #site-footer .footer-tagline, #site-footer .footer-desc, #site-footer .footer-col h4, #site-footer .footer-contact-item a, #site-footer .footer-contact-item span { font-size: 12px; } /* 7,5px : la plus petite valeur trouvée sur tout le site. */ .garanties .garantie-item p { font-size: 12px; line-height: 1.45; } /* Bandes marque et CTA de section de l'accueil */ .brand-band-cta, .brand-band-num, .brand-band-num em, .section-cta { font-size: 12px; } .section-cta, .brand-band-cta { display: inline-flex; align-items: center; min-height: 44px; } /* collection.html a son propre jeu de classes, défini dans son