/* ============================================================================ TAPIS BOEUF — Confort de lecture sur téléphone, silo VENTE ---------------------------------------------------------------------------- Tout ce fichier est enfermé dans @media (max-width:767px). Sur ordinateur et tablette, il ne s'applique JAMAIS : le design validé ne bouge pas d'un pixel. Pour tout annuler : retirer la ligne des pages. Corrige quatre choses mesurées au viewport 390 px : 1. des textes descendus à 7–10 px, illisibles à bout de bras 2. des liens et boutons de 9 à 27 px de haut, trop petits pour le pouce 3. des sections très hautes qui allongent inutilement la page 4. le défilement des carrousels, qui s'arrêtait n'importe où ========================================================================== */ @media (max-width:767px){ /* --------------------------------------------------------------- 1. LISIBILITÉ — plancher de 11 px sur les petites capitales Les libellés en JetBrains Mono espacé tombaient à 7,4 px. On remonte la taille ET on resserre l'interlettrage : sans ça, un texte plus gros mais toujours très espacé reste dur à lire. --------------------------------------------------------------- */ .caption, .cap, .kc-cta, .kc-l2, .lbl, .note, .sep, .all, .u, .vp, .dv, .dt, .dp, .ftr-titre, .ftr-reset, .gv-diff-idx, .gv-hv-o, .gv-hv-l, .kh-bc, .kh-count, .fk-btn, .gv-btn, .kh-btn, .tbu-group-title, .tbu-col-title, .tbu-tagline, .tbu-cb-devis, .tbu-cb-tel, .fk-specs dt, .fk-specs dd { font-size: 11px !important; letter-spacing: .11em !important; } /* les liens d'action méritent un cran de plus */ .lk, .gv-link, .kc-name, .gv-hv-legend .n { font-size: 12px !important; letter-spacing: .1em !important; } /* contraste : le gris clair sur ivoire passe mal en plein soleil */ .gv-shead p, .kh-hero .lede, .gv-hv-foot p, .fx-slide p.d { color:#5A4B45 !important; } .gv-exc .gv-shead p, .gv-exc .fx-slide p.d { color:rgba(250,246,240,.82) !important; } /* --------------------------------------------------------------- 2. LE POUCE — 44 px de haut minimum sur tout ce qui se touche (recommandation d'accessibilité : une cible sous 40 px se rate une fois sur trois en marchant) --------------------------------------------------------------- */ .lk, .gv-link, .all, .fk-btn, .gv-btn, .kh-btn, .ftr-reset, .tbu-hub-link { display: inline-flex !important; align-items: center; min-height: 44px; } .ftr-reset { padding: 0 16px !important; } /* filtres des pages collection : listes déroulantes confortables */ .ftr select, .ftr label > select { min-height: 44px !important; font-size: 12px !important; } .ftr label { min-height: 44px; } /* pastilles des carrousels : 9 px à l'écran, mais 24 px de zone touchable */ .fx-dot, .gv-dot { position: relative; width: 10px !important; height: 10px !important; } .fx-dot::after, .gv-dot::after { content:""; position:absolute; inset:-8px; /* zone invisible autour */ } .fx-dots, .gv-dots { gap: 14px !important; padding: 6px 0; } /* flèches des carrousels : plus grandes et mieux détachées */ .fx-btn, .gv-rail-btn { width:44px !important; height:44px !important; } /* numéro de téléphone du menu : cible correcte */ .tbu-tel { display:inline-flex !important; align-items:center; min-height:44px; } /* --------------------------------------------------------------- 3. RESPIRATION — on raccourcit la page sans retirer une ligne galerie-vente faisait 12 670 px de haut, soit 33 écrans. On ne supprime AUCUN contenu : on resserre seulement les marges hautes et basses des sections, très généreuses car pensées pour un grand écran. --------------------------------------------------------------- */ .gv-sec { padding-top: 3.4rem !important; } .gv-exc { padding: 3.6rem 1.2rem !important; } .gv-diff { padding: 3.2rem 0 .5rem !important; } .gv-railsec { padding-top: 3.4rem !important; } .gv-shead { margin-bottom: 1.9rem !important; } .kh-hero { padding: 6.5rem 1.2rem 2.2rem !important; } .kh-sec { padding-bottom: 3.4rem !important; } .gv-cta, .kh-cta { padding-top: 3.4rem !important; padding-bottom: 3.4rem !important; } .crit { margin-top: 2.2rem !important; } /* --------------------------------------------------------------- 4. FLUIDITÉ — les carrousels s'arrêtent proprement sur une carte Avant : le défilement s'immobilisait au milieu de deux tapis. --------------------------------------------------------------- */ .gv-rail, .gv-slides, .kh-rail { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 1.2rem; overscroll-behavior-x: contain; /* n'entraîne plus la page entière */ } .gv-rc, .gv-slide, .kc { scroll-snap-align: center; } /* pas de « rebond » horizontal parasite sur la page */ html, body { overscroll-behavior-x: none; } /* --------------------------------------------------------------- 5. STABILITÉ — l'image garde sa place pendant le chargement Évite que le texte saute sous le doigt au moment où la photo arrive. --------------------------------------------------------------- */ .gv-rc img, .kc img, .fx-slide figure img { background:#F3EDE4; } /* --------------------------------------------------------------- 6. CONFORT DE LECTURE des paragraphes --------------------------------------------------------------- */ .gv-prose p, .gv-diff-card p, .kh-hero .lede { line-height: 1.75 !important; } .gv-prose p { font-size: 1rem !important; } /* --------------------------------------------------------------- 7. ÉCONOMIE DE BATTERIE — on coupe les effets qui ne se voient pas au doigt (survols, zooms lents) : le défilement en devient plus fluide. --------------------------------------------------------------- */ .gv-rc img, .gv-exc-item .ph img, .kc img { transition: none !important; } .gv-diff-card { transition: none !important; } /* --------------------------------------------------------------- 8. NAVIGATION — fil d'Ariane et bas de page Le fil d'Ariane (« Les tapis d'exception › Tapis persan › Ghoum ») tombait à 9,6 px : c'est pourtant lui qui permet de remonter d'un niveau sans repartir du menu. --------------------------------------------------------------- */ .fk-bc, .kh-bc { font-size:11px !important; letter-spacing:.1em !important; gap:6px 10px !important; } .fk-bc a, .kh-bc a { font-size:11px !important; display:inline-flex; align-items:center; min-height:34px; /* touchable sans casser le fil */ } .tbu-legal a, .tbu-copy, .tbu-footer .tbu-legal a { font-size:11px !important; } .tbu-legal a { display:inline-flex; align-items:center; min-height:38px; } .tbu-legal { gap:6px 18px !important; } /* mention de copyright en bas de page */ .tbu-footer p, .tbu-bottom p { font-size:11px !important; } }