/* ============================================================ mobile-pro.css — corrections mesurees, telephone et finition ------------------------------------------------------------ Chargee APRES extra.css, donc elle gagne sans avoir a monter la specificite. Fichier separe et non fusionne dans les feuilles existantes : tout ce qui est ici se retire en une ligne si besoin. Chaque bloc corrige un defaut MESURE, pas une impression. Les mesures d origine sont citees en commentaire pour qu on puisse les refaire. ============================================================ */ /* ------------------------------------------------------------ 1. BANDEAU DE CONSENTEMENT ------------------------------------------------------------ CookieYes s affiche en style par defaut : boutons bleu vif #1863DC, coins a 2 px, sur un site creme et or aux boutons dores et arrondis. C est le tout premier element que voit un visiteur, et il annonce « gabarit installe a la hate » avant meme la premiere oeuvre. L extension ecrit ses couleurs en attributs style= en ligne (style="color:#1863DC;background-color:transparent;border-color:#1863DC"). Une regle ordinaire ne peut pas les battre : !important est ici la seule voie, et il est limite aux selecteurs .cky-*. La police n est pas touchee : CookieYes utilise deja Inter, qui est la sans-serif du site. ------------------------------------------------------------ */ .cky-consent-bar { background: var(--c-white) !important; border: 1px solid var(--c-border) !important; border-radius: var(--radius-lg, 18px) !important; box-shadow: 0 18px 50px rgba(35, 33, 30, .16) !important; } .cky-title { font-family: var(--font-serif) !important; color: var(--c-ink) !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: .01em !important; } .cky-notice-des, .cky-notice-des p, .cky-preference-content-wrapper, .cky-preference-content-wrapper p, .cky-accordion-header-des p, .cky-gpc-wrapper .cky-gpc-desc { color: var(--c-text) !important; font-size: .875rem !important; /* 14 px : le defaut descendait a 12 px */ line-height: 1.65 !important; } /* les trois boutons reprennent exactement le style .cf-btn du theme */ .cky-btn { font-family: var(--font-sans) !important; font-size: .74rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; border-radius: var(--radius, 10px) !important; border-width: 2px !important; border-style: solid !important; padding: 13px 24px !important; min-height: 46px !important; /* etait 44 : on passe le seuil tactile */ line-height: 1 !important; transition: all .25s ease !important; } .cky-btn-accept { background: var(--c-gold) !important; border-color: var(--c-gold) !important; color: var(--c-white) !important; } .cky-btn-accept:hover { background: var(--c-ink) !important; border-color: var(--c-ink) !important; } .cky-btn-reject, .cky-btn-customize { background: transparent !important; border-color: var(--c-border-dark) !important; color: var(--c-ink) !important; } .cky-btn-reject:hover, .cky-btn-customize:hover { border-color: var(--c-gold) !important; color: var(--c-gold) !important; } .cky-btn-preferences, .cky-preference-header .cky-preference-title { font-family: var(--font-serif) !important; color: var(--c-ink) !important; } /* la croix de fermeture faisait 24x24 : sous le seuil tactile de 44 px */ .cky-btn-close { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* l interrupteur des categories reprend l or du site plutot que le bleu */ .cky-switch input:checked { background-color: var(--c-gold) !important; border-color: var(--c-gold) !important; } .cky-show-desc-btn, .cky-always-active { color: var(--c-gold) !important; } /* la pastille de reouverture flottante, en or plutot qu en bleu */ .cky-btn-revisit-wrapper { background: var(--c-ink) !important; } /* ------------------------------------------------------------ 2. PANNEAU DE PREFERENCES SUR TELEPHONE ------------------------------------------------------------ Mesure sur un ecran de 375 px : .cky-preference-center occupe 845 px de large et deborde des deux cotes (gauche -187 px, droite 658 px). Le visiteur qui veut refuser une categorie precise ne peut pas lire la moitie du panneau. ------------------------------------------------------------ */ @media (max-width: 640px) { .cky-preference-center { max-width: calc(100vw - 24px) !important; width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; margin: 0 !important; border-radius: var(--radius-lg, 18px) !important; } .cky-preference-body-wrapper, .cky-preference-content-wrapper, .cky-accordion-wrapper, .cky-accordion, .cky-accordion-item, .cky-accordion-header-wrapper, .cky-accordion-header { max-width: 100% !important; box-sizing: border-box !important; } .cky-prefrence-btn-wrapper { flex-wrap: wrap !important; gap: 8px !important; } .cky-prefrence-btn-wrapper .cky-btn { flex: 1 1 100% !important; } } /* ------------------------------------------------------------ 3. ZONES TACTILES DE L EN-TETE ------------------------------------------------------------ Mesure : la croix du bandeau d annonce fait 12x18 px. Recommandation Apple et Google : 44x44 px. A 12 px, un pouce la manque une fois sur deux et ferme autre chose — ou rien. La recherche et le panier font 40x40 : juste sous le seuil. ------------------------------------------------------------ */ @media (max-width: 900px) { .cf-promo-close { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* la zone grandit sans que la croix grossisse : le dessin ne bouge pas */ font-size: 1.15rem !important; line-height: 1 !important; } .cf-header-icon, .cf-hamburger, .cf-drawer-close, .cf-search-popup__close { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ------------------------------------------------------------ 4. MICRO-LIBELLES : LISIBILITE SANS ABIMER LE DESSIN ------------------------------------------------------------ Les capitales espacees a 10-11 px sont un procede typographique assume, pas un defaut : les grossir toutes ferait perdre au site son allure de galerie. Deux cas sortent pourtant du cadre. .cf-stat__label 9,9 px en blanc a 45 % d opacite .cf-payment-badge 10,4 px en blanc a 55 % d opacite A cette taille, une capitale espacee n a plus assez de matiere pour supporter une telle transparence : les chiffres cles de la page d accueil (« Artworks Available ») et les moyens de paiement du pied de page — deux elements qui servent precisement a rassurer — sont les moins lisibles de la page. On remonte l opacite et on pose un plancher a 11 px, sans toucher a la graisse ni a l espacement. ------------------------------------------------------------ */ .cf-stats .cf-stat__label { font-size: 11px !important; color: rgba(255, 255, 255, .78) !important; } .cf-footer-payments .cf-payment-badge, .cf-payment-icons .cf-payment-badge { font-size: 11px !important; color: rgba(255, 255, 255, .82) !important; } /* titres de colonnes du pied de page : ce sont des reperes de navigation, pas des ornements — ils meritent 12 px */ .cf-footer-main .cf-footer-col h5 { font-size: 12px !important; } /* mention legale du pied de page : 35 % d opacite la rend presque invisible, alors qu elle porte le nom de la societe */ footer .cf-footer-bottom p { color: rgba(255, 255, 255, .6) !important; } /* ------------------------------------------------------------ 5. CHOIX DE LA FINITION SUR LA FICHE PRODUIT ------------------------------------------------------------ Mesure sur telephone : .cf-frame__type fait 26 px de haut (« Rolled » 69x26, « Stretched +11 EUR » 147x26, « Framed +18 EUR » 133x26). Ce sont les trois boutons qui changent le prix, sur la page qui vend, et ils sont a 18 px sous le seuil tactile. Les pastilles de taille juste au-dessus font 94x52 : elles montrent la bonne mesure, ce reglage-ci a simplement ete oublie. On agit sur le remplissage plutot que sur la hauteur fixe, pour que l etiquette reste centree et que le prix affiche en dessous du libelle ne soit pas coupe. ------------------------------------------------------------ */ @media (max-width: 900px) { /* Ne PAS imposer flex-direction: column ici. Essai du 2026-09-08 : la colonne empilait le libelle et son prix, ce qui reduisait la largeur de moitie (« Stretched +11 EUR » passait de 147 a 71 px) et faisait grimper la hauteur a 85 px. On se contente d agrandir la zone : remplissage vertical et hauteur minimale, sans toucher a la disposition interne. */ .cf-frame__type { min-height: 44px !important; padding-top: 11px !important; padding-bottom: 11px !important; box-sizing: border-box !important; } } /* ------------------------------------------------------------ 6. COMMANDES PRESENTES SUR TOUTES LES PAGES ------------------------------------------------------------ Releve identique sur l accueil, une fiche produit, une page peintre, une categorie et la FAQ — ce sont donc des composants, pas des accidents de page : .cf-lang-switch__item 36x20 bascule EN / FR .cf-btn--primary 180x36 bouton principal du theme .cf-filter-clear 63x31 effacement des filtres Le plus genant est le premier : sur un site bilingue, passer d une langue a l autre est une commande de premier plan, et 20 px de haut en font la cible la plus difficile de la page. On agit par min-height et remplissage, jamais par height fixe : les boutons qui depassent deja 44 px ne bougent pas, et rien ne se deforme. Limite au telephone et a la tablette. ------------------------------------------------------------ */ @media (max-width: 900px) { .cf-lang-switch__item { min-height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .cf-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { min-height: 44px !important; box-sizing: border-box !important; } .cf-filter-clear { min-height: 44px !important; padding-top: 8px !important; padding-bottom: 8px !important; box-sizing: border-box !important; } } /* ------------------------------------------------------------ 7. FILTRES DE LA BOUTIQUE : INUTILISABLES SUR TELEPHONE ------------------------------------------------------------ Defaut BLOQUANT, mesure le 2026-09-09 sur un ecran de 375x812 : ouvrir n importe lequel des cinq filtres (Mouvement, Artiste, Format, Pays, Siecle) n affichait RIEN. Hauteur visible du menu deroulant : 0 pixel. Mecanique exacte. extra.css:306 pose, sous 768 px, .cf-filter-row{overflow-x:auto}. La specification CSS Overflow 3 impose alors le calcul de overflow-y a « auto » : la rangee devient une boite de defilement de 52 px de haut, qui ROGNE ses descendants en position absolue. Le menu s ouvre a 437 px quand la bande finit a 436 : il tombe entierement en dehors. Mesure a l appui — bande [384, 436], menu [437, 757], intersection nulle. Correction retenue : sous 768 px, le menu passe en position fixe et devient une feuille ancree en bas d ecran. Le position:fixed echappe au rognage — verifie au prealable qu aucun ancetre ne porte transform, filter, perspective, will-change ni contain:paint, qui en feraient le bloc conteneur et casseraient la correction. Ce qui n a PAS ete touche : overflow-x:auto reste en place. Le retirer ferait deborder la barre et rendrait toute la page defilante lateralement, alors qu elle est aujourd hui a zero debordement. La fermeture au clic exterieur (main.js) fonctionne toujours : verifie apres coup. ------------------------------------------------------------ */ @media (max-width: 768px) { .cf-filter-dropdown { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important; max-height: 65vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 18px 18px 0 0 !important; border: 1px solid var(--c-border) !important; border-bottom: 0 !important; box-shadow: 0 -14px 44px rgba(35, 33, 30, .22) !important; z-index: 1200 !important; } /* les options mesuraient 41 px : on passe le seuil tactile */ .cf-filter-dropdown a, .cf-filter-dropdown label, .cf-filter-dropdown button { min-height: 44px !important; display: flex !important; align-items: center !important; } } /* ------------------------------------------------------------ 8. FILTRE ARTISTE : LIEN « VIEW ALL », RECHERCHE, RESULTATS ------------------------------------------------------------ Le menu ne porte plus 3 463 liens mais les 50 peintres les mieux pourvus (357 Ko economises sur chaque page de la boutique). Trois elements nouveaux a habiller : le lien vers l index des peintres, le champ de recherche, et la zone de resultats. Ces regles ne sont PAS reservees au telephone : l allegement et la recherche valent aussi sur ordinateur. ------------------------------------------------------------ */ .cf-filter-opt--all { font-weight: 700 !important; color: var(--c-gold) !important; border-bottom: 1px solid var(--c-border) !important; } .cf-filter-search { display: block; padding: 10px 14px; border-bottom: 1px solid var(--c-border); position: sticky; /* reste accessible quand on fait defiler les 50 noms */ top: 0; background: var(--c-white); z-index: 2; } .cf-filter-search__input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; font-family: var(--font-sans); font-size: .875rem; color: var(--c-ink); background: var(--c-cream); border: 1px solid var(--c-border); border-radius: var(--radius, 10px); } .cf-filter-search__input:focus { outline: none; border-color: var(--c-gold); background: var(--c-white); } .cf-filter-vide { margin: 0; padding: 14px; font-size: .8rem; color: var(--c-muted); text-align: center; } @media (max-width: 768px) { /* le champ doit rester au pouce dans la feuille ancree en bas */ .cf-filter-search__input { min-height: 44px !important; font-size: 16px !important; } } /* ------------------------------------------------------------ 9. GRILLES PRODUITS : RETIRER LES CLEARFIX WOOCOMMERCE ------------------------------------------------------------ 2026-09-18, catalogue public a 390 px : la premiere carte est dans la seconde colonne. Les pseudo-elements ::before/::after de WC (content:" ", display:table) occupent des cellules de notre grid. Le theme utilise deja grid pour toutes ces listes : aucun float ne doit etre nettoye ici. Ne pas toucher aux cartes elles-memes. ------------------------------------------------------------ */ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } /* ------------------------------------------------------------ 10. TIROIRS FERMES : AFFICHAGE ET INTERACTION ------------------------------------------------------------ La translation seule laisse les liens du menu et du mini-panier exposes aux technologies d'assistance. Le JS assure inert et le focus ; cette couche conserve l'animation .open et retire le tiroir ferme de l'affichage. Aucun overflow global masque. ------------------------------------------------------------ */ #cf-mobile-menu, #cf-cart-drawer { visibility: hidden; pointer-events: none; transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s; } #cf-mobile-menu.open, #cf-cart-drawer.open { visibility: visible; pointer-events: auto; transition-delay: 0s; } /* ------------------------------------------------------------ 11. SOUS-MENUS ORDINATEUR : COLONNE BORNEE ------------------------------------------------------------ 2026-09-18, accueil 1280 px : le sous-menu des mouvements herite display:flex de .cf-nav ul et atteint 2490 px de large, meme masque. Son bord droit a 1773 px explique le debordement du document. Garder le menu principal horizontal ; seul le sous-menu redevient une colonne defilante, accessible aussi avec le focus clavier. ------------------------------------------------------------ */ @media (min-width: 901px) { .cf-nav ul li ul { display: block; width: 280px; min-width: 0; max-width: calc(100vw - 32px); max-height: min(420px, calc(100vh - 140px)); max-height: min(420px, calc(100dvh - 140px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } .cf-nav ul li ul li { width: 100%; } .cf-nav ul li ul li a { white-space: normal; overflow-wrap: break-word; } .cf-nav ul li:focus-within > ul { opacity: 1; visibility: visible; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { #cf-mobile-menu, #cf-cart-drawer, .cf-overlay, .cf-cart-overlay, .cf-nav ul li ul { transition: none; } } /* ------------------------------------------------------------ 12. EN-TETE MOBILE : LE LOGO CEDE LA PLACE AUX COMMANDES ------------------------------------------------------------ A 320 px, le logo SVG conserve sa largeur intrinseque (194 px) et la grille a trois colonnes reserve encore une colonne au menu desktop masque. Le panier et le hamburger sortent de l'ecran. Deux colonnes suffisent au DOM existant. Le logo se redimensionne dans la place restante ; les trois commandes restent a 44x44 px. Les langues restent disponibles dans le tiroir existant. ------------------------------------------------------------ */ @media (max-width: 900px) { .cf-header-inner { grid-template-columns: minmax(0, 1fr) auto; } .cf-header-inner > .cf-logo { min-width: 0; max-width: 100%; min-height: 44px; } .cf-header-inner > .cf-logo .cf-logo-svg { width: 217px; max-width: 100%; height: auto; max-height: 38px; } .cf-header-actions { grid-column: 2; gap: 4px; } .cf-header-actions .cf-header-icon, .cf-header-actions .cf-hamburger { flex: 0 0 44px; width: 44px; height: 44px; } #cf-mobile-menu .cf-drawer-close-row { gap: 8px; } #cf-mobile-menu .cf-drawer-close-row .cf-logo { min-width: 0; white-space: normal; line-height: 1.4; } #cf-mobile-menu .cf-drawer-close { flex: 0 0 44px; } } @media (max-width: 374px) { .cf-header-inner { padding-right: 12px !important; padding-left: 12px !important; gap: 8px !important; } .cf-header-actions { gap: 0; } } /* Live QA at 320px: payment badges must wrap inside the footer. */ .cf-footer-payments { flex-wrap: wrap; max-width: 100%; } @media (max-width: 600px) { .cf-btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; } }