/* ============================================================ OLIOLI KIDS — RESPONSIVE QA PATCH Fichier : olioli-responsive.css Inclure en dernier dans le de toutes les pages : Ce fichier corrige et renforce la mise en page mobile pour l'ensemble du site sans toucher aux fichiers existants. Breakpoints : --bp-tablet : 1024px --bp-mobile : 768px --bp-small : 480px --bp-xs : 380px Sections : 1. Globals & safe-area 2. Nav 3. Hero (landing) 4. Marquee 5. Category grid (landing) 6. Product grid & cards 7. Editorial block 8. Newsletter 9. Values grid 10. Category page hero 11. Toolbar & filters 12. Sidebar 13. Product sheet (fiche produit) 14. Reviews grid 15. Similar products 16. Breadcrumb 17. Account page 18. Blog grid 19. Contact & FAQ 20. Footer 21. Cart drawer patch 22. Checkout patch 23. Touch interaction polish 24. Typography scale 25. Utility helpers ============================================================ */ /* ────────────────────────────────────── 1. GLOBALS & SAFE-AREA ────────────────────────────────────── */ /* Prevent horizontal overflow globally */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* iOS safe-area padding for fixed/sticky elements */ @supports (padding-bottom: env(safe-area-inset-bottom)) { nav { padding-top: env(safe-area-inset-top, 0); } #olioli-cart-drawer, #ock-root { padding-bottom: env(safe-area-inset-bottom, 0); } .oc-footer, .ock-btn-submit { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0)); } } /* Remove tap highlight on interactive elements */ button, a, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; } /* Minimum touch target size */ @media (max-width: 768px) { button, .btn, .nav-icon, .filter-pill, .qty-btn, .ciq-btn, .oc-qty-btn, .prod-fav, .btn-fav, .btn-add, .pg-btn, .size-opt, .color-opt { min-height: 44px; min-width: 44px; } /* Override where min-width would break layout */ .filter-pill { min-width: unset; } .size-opt { min-width: unset; min-height: 40px; } .color-opt { min-width: 36px; min-height: 36px; } .pg-btn { min-width: 40px; min-height: 40px; } .oc-qty-btn, .ciq-btn { min-height: 40px; min-width: 40px; } } /* ────────────────────────────────────── 2. NAV ────────────────────────────────────── */ @media (max-width: 1024px) { nav { padding: 0 1.75rem; } .nav-menu li a, .nav-menu li span { padding: 6px 10px; font-size: 11px; } } @media (max-width: 768px) { nav { padding: 0 1.25rem; height: 56px; --nav-h: 56px; } /* Hide desktop nav links */ .nav-menu { display: none !important; } /* Mobile hamburger — show it */ .mob-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; transition: background 0.15s; } .mob-menu-btn:hover { background: rgba(44,40,32,0.06); } /* Cart button: shrink on small screens */ .nav-cart-btn { padding: 9px 14px; font-size: 11px; gap: 5px; } /* Logo size */ .logo { font-size: 19px; } } @media (max-width: 380px) { nav { padding: 0 1rem; } .nav-cart-btn { padding: 8px 10px; } /* Hide "Panier" text, show only icon + badge */ .nav-cart-btn .cart-btn-label { display: none; } } /* Mobile nav overlay: full bleed, large touch targets */ .mob-nav { padding: 0.5rem 0; } @media (max-width: 768px) { .mob-nav a, .mob-nav span { padding: 15px 1.5rem; font-size: 15px; display: flex; align-items: center; min-height: 52px; } } /* ────────────────────────────────────── 3. HERO (LANDING) ────────────────────────────────────── */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr; max-height: none; min-height: unset; } .hero-right { display: none; } .hero-left { padding: 3.5rem 2rem; min-height: 480px; } .hero-badges { gap: 1.2rem; flex-wrap: wrap; } } @media (max-width: 768px) { .hero-left { padding: 2.5rem 1.25rem 3rem; min-height: unset; } .hero-cta { flex-direction: column; gap: 10px; } .btn-hero { width: 100%; justify-content: center; padding: 15px 20px; font-size: 12px; } .hero-badges { gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; } .hero-badge { font-size: 12px; } .hero-eyebrow { margin-bottom: 1rem; } } @media (max-width: 480px) { .hero-left { padding: 2rem 1.25rem 2.5rem; } .hero-badges { flex-direction: column; gap: 0.6rem; } } /* ────────────────────────────────────── 4. MARQUEE ────────────────────────────────────── */ @media (max-width: 768px) { .marquee-item { font-size: 13.5px; padding: 0 1.5rem; } } /* ────────────────────────────────────── 5. CATEGORY GRID (LANDING) ────────────────────────────────────── */ @media (max-width: 768px) { .section { padding: 3rem 1.25rem; } .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .cat-card { aspect-ratio: 3/2; } .cat-card-name { font-size: 17px; } .cat-card-desc { font-size: 10px; } } @media (max-width: 480px) { .cats-grid { grid-template-columns: 1fr; gap: 0.75rem; } .cat-card { aspect-ratio: 5/3; } } /* ────────────────────────────────────── 6. PRODUCT GRID & CARDS ────────────────────────────────────── */ @media (max-width: 1024px) { .prods-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } } @media (max-width: 768px) { .prods-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Show quick-add on mobile (can't hover) */ .prod-quick { transform: translateY(0); opacity: 0; /* Keep it hidden; replaced by visible btn-add below */ } /* Make add-to-cart button always visible on mobile */ .prod-add { display: block !important; padding: 11px; font-size: 12px; } .prod-name { font-size: 15.5px; } .prod-sub { font-size: 10px; } .prod-price { font-size: 14px; } /* Increase fav button touch area */ .prod-fav, .btn-fav { width: 36px; height: 36px; font-size: 17px; } } @media (max-width: 380px) { .prods-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .prod-name { font-size: 14.5px; } } /* ────────────────────────────────────── 7. EDITORIAL BLOCK ────────────────────────────────────── */ @media (max-width: 1024px) { .editorial { grid-template-columns: 1fr; margin: 0 1.25rem; border-radius: 8px; } .ed-right { display: none; } .ed-left { padding: 3rem 2rem; } } @media (max-width: 768px) { .editorial { margin: 0 1rem; } .ed-left { padding: 2.5rem 1.5rem; } } /* ────────────────────────────────────── 8. NEWSLETTER ────────────────────────────────────── */ @media (max-width: 1024px) { .newsletter { grid-template-columns: 1fr; margin: 0 1.25rem; border-radius: 8px; padding: 3rem 2rem; gap: 1.5rem; } } @media (max-width: 768px) { .newsletter { margin: 0 1rem; padding: 2.5rem 1.5rem; } .nl-form { flex-direction: column; gap: 10px; } .nl-input { width: 100%; } .nl-btn { width: 100%; padding: 14px; } } /* ────────────────────────────────────── 9. VALUES GRID ────────────────────────────────────── */ @media (max-width: 1024px) { .values-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } .value-card { padding: 1.5rem; } } /* ────────────────────────────────────── 10. CATEGORY PAGE HERO ────────────────────────────────────── */ @media (max-width: 1024px) { .cat-page-hero, .cat-hero { grid-template-columns: 1fr; min-height: unset; } .cat-hero-right, .cat-hero-r { display: none; } } @media (max-width: 768px) { .cat-hero-left, .cat-hero-l { padding: 2.5rem 1.25rem; } .cat-hero-stats, .cat-hero-stats { gap: 1.5rem; flex-wrap: wrap; } /* Stat numbers smaller */ .cat-stat-val, .cat-stat-v { font-size: 22px; } } /* ────────────────────────────────────── 11. TOOLBAR & FILTERS ────────────────────────────────────── */ @media (max-width: 1024px) { .toolbar, .tb-toolbar { padding: 0.75rem 1.5rem; gap: 0.5rem; } } @media (max-width: 768px) { .toolbar, .tb-toolbar { padding: 0.7rem 1.25rem; flex-wrap: wrap; gap: 0.5rem; /* Prevent toolbar from stacking weirdly */ align-items: flex-start; } /* Filters scroll horizontally on mobile */ .toolbar-filters, #catFilters { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; flex: 0 0 100%; order: 1; padding-bottom: 2px; } .toolbar-filters::-webkit-scrollbar, #catFilters::-webkit-scrollbar { display: none; } .filter-pill { white-space: nowrap; flex-shrink: 0; padding: 7px 14px; font-size: 12px; } /* Sort + count on second row */ .toolbar-r, .toolbar-right { flex: 0 0 100%; order: 2; justify-content: space-between; margin-top: 0; } /* Hide list/grid view toggle on mobile (list view unusable on small screens) */ .view-btns { display: none; } .count-txt, .tb-count { font-size: 11px; } } /* ────────────────────────────────────── 12. SIDEBAR (category page) ────────────────────────────────────── */ /* Already hidden at 900px in veilleuses.html — this adds the missing index.html patch */ @media (max-width: 1024px) { .cat-layout { grid-template-columns: 1fr; } .sidebar { display: none; } } /* ────────────────────────────────────── 13. PRODUCT SHEET (fiche produit) ────────────────────────────────────── */ @media (max-width: 1024px) { .product-sheet, .prod-sheet { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.75rem; } .gallery { position: static !important; /* unstick gallery when stacked */ max-width: 520px; margin: 0 auto; width: 100%; } } @media (max-width: 768px) { .product-sheet, .prod-sheet { padding: 1.5rem 1.25rem; gap: 1.5rem; } /* Gallery */ .gallery-main { border-radius: 6px; } .gallery-thumbs { gap: 7px; } .thumb { width: 64px; height: 64px; } /* Product info */ .prod-title { font-size: 28px; } .price-main { font-size: 28px; } .price-old { font-size: 18px; } /* Options */ .size-opts { gap: 6px; flex-wrap: wrap; } .size-opt { padding: 9px 14px; font-size: 13px; } /* Qty + CTA */ .qty-block { gap: 1rem; } .qty-btn { width: 44px; height: 44px; } .qty-val { font-size: 16px; } .cta-row { gap: 8px; } .btn-atc { padding: 15px; font-size: 12px; } .btn-wish { width: 52px; height: 52px; flex-shrink: 0; } .btn-buy, .btn-buy-now { padding: 14px; font-size: 12px; } /* Guarantees: stack on very small */ .guarantees { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 1.2rem; } .guarantee-ic { font-size: 18px; } .guarantee-val { font-size: 11px; } .guarantee-txt { font-size: 10px; } /* Accordion */ .acc-trigger { font-size: 13px; padding: 1rem 0; } .acc-body { font-size: 13px; } } @media (max-width: 480px) { .guarantees { grid-template-columns: 1fr; text-align: center; } .prod-bc { font-size: 10px; } .prod-sku { font-size: 10.5px; } } /* ────────────────────────────────────── 14. REVIEWS GRID ────────────────────────────────────── */ @media (max-width: 1024px) { .reviews-grid { grid-template-columns: 1fr; } .reviews-summary { grid-template-columns: 1fr; gap: 1.5rem; } .score-big { font-size: 56px; } } @media (max-width: 768px) { .reviews-section { padding: 3rem 1.25rem; } .reviews-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .review-card { padding: 1.4rem; } } /* ────────────────────────────────────── 15. SIMILAR / RECO GRIDS ────────────────────────────────────── */ @media (max-width: 1024px) { .similar-grid, .reco-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 768px) { .similar-section, .reco { padding: 2.5rem 1.25rem; } .similar-head, .reco-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; } } /* ────────────────────────────────────── 16. BREADCRUMB ────────────────────────────────────── */ @media (max-width: 768px) { .breadcrumb { padding: 0.75rem 1.25rem; font-size: 11.5px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; scrollbar-width: none; } .breadcrumb::-webkit-scrollbar { display: none; } /* Truncate last item if too long */ .breadcrumb > *:last-child { overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: inline-block; vertical-align: middle; } } /* ────────────────────────────────────── 17. ACCOUNT PAGE ────────────────────────────────────── */ @media (max-width: 1024px) { .account-layout { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; } /* Horizontal scrolling tab strip */ .account-sidebar { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .account-sidebar::-webkit-scrollbar { display: none; } .account-menu { display: flex !important; flex-direction: row !important; gap: 6px; padding-bottom: 4px; min-width: max-content; } .account-menu li { border-bottom: none !important; flex-shrink: 0; } .account-menu li span { display: block; padding: 9px 16px !important; background: #F2E8E0; border-radius: 100px; white-space: nowrap; font-size: 13px !important; min-height: 40px; display: flex; align-items: center; } .account-menu li.active span { background: #2C2820; color: #FDFBF8; } } @media (max-width: 768px) { .account-layout { padding: 1.5rem 1.25rem; } .acc-t { font-size: 24px; } } /* ────────────────────────────────────── 18. BLOG GRID ────────────────────────────────────── */ @media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.5rem; gap: 1.2rem; } } @media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; } .blog-body { padding: 1.2rem; } .blog-t { font-size: 18px; } } /* ────────────────────────────────────── 19. CONTACT & FAQ ────────────────────────────────────── */ @media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; } .faq-layout, .legal-layout, .article-layout { padding: 2rem 1.5rem; } } @media (max-width: 768px) { .contact-layout, .faq-layout, .legal-layout, .article-layout { padding: 1.5rem 1.25rem; } .contact-info-title { font-size: 28px; } .btn-send { padding: 14px; } /* FAQ items easier to tap */ .faq-trigger { padding: 1.1rem 0; } /* Article typography */ .article-body { font-size: 16px; } .article-title { font-size: 28px; } } /* ────────────────────────────────────── 20. FOOTER ────────────────────────────────────── */ @media (max-width: 1024px) { footer { padding: 3.5rem 1.75rem 2rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 768px) { footer { padding: 3rem 1.25rem 2rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; } .footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; } .footer-bottom-links { flex-wrap: wrap; gap: 1rem; } .footer-desc { max-width: 100%; } } /* ────────────────────────────────────── 21. CART DRAWER PATCH Extends olioli-cart.js built-in styles ────────────────────────────────────── */ /* Prevent body scroll when drawer is open — reinforce */ body.oc-locked { overflow: hidden !important; touch-action: none; } @media (max-width: 768px) { #olioli-cart-drawer { /* Full width already set at 480px in olioli-cart.js — extend to 768px */ width: 100vw; /* Allow full-height scroll on iOS */ -webkit-overflow-scrolling: touch; } /* Larger close button */ .oc-close { width: 40px; height: 40px; } /* More breathing room */ .oc-header { padding: 1.3rem 1.25rem; } .oc-item { padding: 1rem 1.25rem; gap: 12px; } .oc-footer { padding: 1.2rem 1.25rem 1.6rem; } .oc-promo { padding: 0.9rem 1.25rem; } .oc-ship-bar { padding: 0.65rem 1.25rem; } /* Item thumbnail bigger on mobile */ .oc-item-thumb { width: 64px; height: 64px; } /* Checkout button full height */ .oc-btn-checkout { padding: 16px; font-size: 12.5px; } .oc-btn-continue { padding: 12px; } /* Promo row stacks on very small */ } @media (max-width: 380px) { .oc-promo-row { flex-direction: column; gap: 8px; } .oc-promo-btn { width: 100%; padding: 11px; text-align: center; } } /* Swipe-down hint on mobile (visual affordance) */ @media (max-width: 768px) { #olioli-cart-drawer::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(44,40,32,0.12); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } } /* ────────────────────────────────────── 22. CHECKOUT PATCH Extends olioli-checkout.js built-in styles ────────────────────────────────────── */ @media (max-width: 768px) { /* Full-width topbar items */ .ock-topbar { padding: 0 1.25rem; height: 54px; } .ock-logo { font-size: 18px; } .ock-back { font-size: 11.5px; } /* Steps: show icons only */ .ock-step-label { display: none; } .ock-steps { padding: 0.9rem 1.25rem; gap: 0; } .ock-step-num { width: 26px; height: 26px; font-size: 12px; } .ock-step-line { width: 30px; } /* Body */ .ock-body { padding: 1.5rem 1.25rem; gap: 1.5rem; } /* Section titles */ .ock-section-title { font-size: 10px; margin-bottom: 1rem; } /* Fields: always single column */ .ock-row2, .ock-row3 { grid-template-columns: 1fr; gap: 10px; } /* Inputs: larger on mobile */ .ock-input, .ock-select { font-size: 16px; padding: 13px 13px; } /* font-size: 16px prevents iOS zoom on focus */ /* Payment options */ .ock-payment-opt { padding: 13px 14px; } .ock-payment-label { font-size: 13px; } .ock-payment-desc { font-size: 11.5px; } /* Submit: sticky bottom */ .ock-btn-submit { position: sticky; bottom: 0; z-index: 10; margin-top: 1.5rem; border-radius: 0; padding: 17px; /* Bleed to edges */ margin-left: -1.25rem; margin-right: -1.25rem; width: calc(100% + 2.5rem); box-shadow: 0 -4px 20px rgba(44,40,32,0.10); } /* Summary card: collapsible on mobile */ .ock-summary-head { cursor: pointer; } .ock-summary-card { border-radius: 6px; } .ock-grand-val { font-size: 24px; } /* Confirmation */ .ock-confirm { padding: 3rem 1.25rem; } .ock-confirm-title { font-size: 30px; } .ock-confirm-details { padding: 1.2rem 1.25rem; } .ock-confirm-actions { flex-direction: column; } .ock-btn-shop, .ock-btn-secondary { width: 100%; padding: 14px; } .ock-confirm-detail-row { font-size: 12.5px; } } @media (max-width: 380px) { .ock-body { padding: 1.25rem 1rem; } .ock-btn-submit { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); } } /* Prevent iOS input zoom (font-size must be ≥16px) */ @media (max-width: 768px) { .ock-promo-input { font-size: 16px; } } /* ────────────────────────────────────── 23. TOUCH INTERACTION POLISH ────────────────────────────────────── */ /* Active states for touch (hover doesn't fire on mobile) */ @media (hover: none) and (pointer: coarse) { .btn-atc:active, .btn-hero-p:active, .btn-add:active, .prod-add:active, .oc-btn-checkout:active, .ock-btn-submit:active, .nl-btn:active { transform: scale(0.97); opacity: 0.88; } .filter-pill:active { opacity: 0.75; } /* Quick-add: show on tap, not hover */ .prod-quick { transform: translateY(0) !important; opacity: 0; pointer-events: none; } /* Color dots: larger hit area */ .color-opt, .cdot { width: 36px; height: 36px; } /* Remove hover-only transforms that feel odd on touch */ .hero-swatch:hover, .ed-swatch:hover, .cat-card:hover, .sim-card:hover .sim-img-inner, .prod-card:hover .prod-img-inner { transform: none; } /* But keep scale on product images (works fine) */ .prod-card:active .prod-img-inner { transform: scale(1.03); transition: transform 0.15s; } } /* Smooth scrolling containers */ .oc-body, .mob-nav, .toolbar-filters, #catFilters, .account-sidebar { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* ────────────────────────────────────── 24. TYPOGRAPHY SCALE ────────────────────────────────────── */ @media (max-width: 768px) { /* Section titles */ .section-title { font-size: 28px !important; } .ed-title { font-size: 26px !important; } .nl-title { font-size: 26px !important; } /* Page headers */ .page-header-title { font-size: 30px !important; } .page-header-sub { font-size: 13.5px; } /* Cart drawer title */ .oc-hd-t, .cart-hd-title { font-size: 20px; } /* Review big score */ .score-big { font-size: 48px; } } @media (max-width: 480px) { .section-title { font-size: 24px !important; } .ed-title { font-size: 22px !important; } } /* ────────────────────────────────────── 25. UTILITY HELPERS ────────────────────────────────────── */ /* Hide on mobile */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } /* Hide on desktop */ @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* Full-width button utility */ @media (max-width: 768px) { .btn-full-mobile { width: 100% !important; justify-content: center !important; } } /* Prevent table overflow in legal/acc pages */ @media (max-width: 768px) { .acc-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12.5px; } .acc-body table td { padding: 8px 10px; } } /* Fix zoom overlay on mobile */ @media (max-width: 768px) { .zoom-overlay { padding: 0; } .zoom-img, #zoomImg { max-width: 100vw !important; max-height: 90vh !important; border-radius: 0 !important; width: 100vw !important; } .zoom-close { top: 1rem; right: 1rem; } } /* Input autofill background fix */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #FDFBF8 inset !important; -webkit-text-fill-color: #2C2820 !important; caret-color: #2C2820; } /* Smooth focus outline that matches design */ :focus-visible { outline: 2px solid #C9846A; outline-offset: 2px; } button:focus-visible, a:focus-visible { outline: 2px solid #C9846A; border-radius: 2px; } /* ══════════════════════════════════════════════════════ PATCH: index.html mobile — blocking overflow fixes ════════════════════════════════════════════════════ */ /* Prevent horizontal overflow globally */ body { overflow-x: hidden; } @media (max-width: 768px) { /* Nav: hide text links, keep icons */ .nav-links { display: none; } .nav-actions { gap: 0.5rem; } /* Hero: stack columns */ .home-hero { grid-template-columns: 1fr; min-height: auto; } .hero-mosaic { display: none; } .hero-left { padding: 2.5rem 1.25rem 2rem; } .hero-sub { max-width: 100%; } /* Category grid: 2 cols */ .cats-grid { grid-template-columns: repeat(2, 1fr); } /* Product grids: 2 cols */ .prod-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .reco-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* Cat layout: no sidebar */ .cat-layout { grid-template-columns: 1fr; } .cat-sidebar { display: none; } .cat-hero-sec { grid-template-columns: 1fr; min-height: auto; } .cat-hero-right { display: none; } /* Editorial: stack */ .editorial { grid-template-columns: 1fr; min-height: auto; } /* Newsletter */ .nl-left { max-width: 100%; } .nl-form { flex-direction: column; } .nl-input { width: 100%; } /* Footer: single column */ .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } /* ── Modal: definitive mobile fix ────────────────────────────── Replaces previous partial override. Tested: 360px / 390px / 430px / iPhone Safari. ─────────────────────────────────────────────────────────── */ /* Backdrop: no padding, perfect centering */ .modal-backdrop { padding: 12px; align-items: flex-start; /* allow modal taller than viewport to scroll */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Modal box: single column, full-width, scrollable */ .modal-box { display: block !important; /* kill grid entirely */ grid-template-columns: unset; width: calc(100vw - 24px); max-width: 100%; min-width: 0; max-height: none; /* let content determine height */ height: auto; min-height: 0; border-radius: 10px; overflow: hidden; overflow-x: hidden; position: relative; } /* Gallery: full width, constrained height, no overflow */ .modal-gallery { width: 100%; min-width: 0; min-height: 200px; max-height: 52vw; /* square-ish on narrow screens */ padding: 1.25rem; gap: 0.75rem; overflow: hidden; } /* Main image: scale within gallery */ .modal-main-img { max-height: 36vw; } /* Info column: full width, normal flow, no inner scroll */ .modal-info { width: 100%; min-width: 0; padding: 1.25rem 1.1rem 1.5rem; overflow-y: visible; /* parent .modal-backdrop handles scrolling */ display: block; } /* Close button: sticky top-right corner, always visible */ .modal-close-btn { position: sticky; top: 0; float: right; z-index: 10; background: rgba(253,251,248,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; margin-bottom: 0.5rem; box-shadow: 0 1px 6px rgba(44,40,32,0.12); } /* Prevent float from collapsing subsequent content */ .modal-info::after { content: ''; display: table; clear: both; } /* Product name: smaller on mobile */ .modal-prod-name { font-size: 22px; } .modal-price-line { font-size: 22px; margin-bottom: 1rem; } /* Actions: full-width ATC button */ .modal-actions { margin-top: 1.25rem; padding-top: 0.75rem; flex-wrap: wrap; gap: 8px; } .btn-add-cart { flex: 1; min-width: 0; padding: 15px 10px; font-size: 12px; } .btn-wish { flex-shrink: 0; width: 48px; height: 48px; } /* Thumbnails: scrollable row */ .modal-thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; justify-content: flex-start; } .modal-thumbs::-webkit-scrollbar { display: none; } .modal-thumb { flex-shrink: 0; width: 48px; height: 48px; } .modal-gallery { min-height: 200px; max-height: 52vw; } /* Legacy cart drawer (index.html inline) */ .cart-drawer { width: 100vw !important; right: -100vw !important; } .cart-drawer.open { right: 0 !important; } } @media (max-width: 480px) { /* Single-col grids on small phones */ .prod-grid-4 { grid-template-columns: 1fr; } .reco-grid { grid-template-columns: repeat(2, 1fr); } .cats-grid { grid-template-columns: repeat(2, 1fr); } } /* Admin mobile */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { overflow-x: hidden; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .dash-grid { grid-template-columns: 1fr !important; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .modal-bg > div { margin: 0 !important; width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; height: 100vh; overflow-y: auto; } } /* ══════════════════════════════════════════════════════════════ PATCH D — Mobile nav: hamburger + drawer Fixes: .nav-links (not .nav-menu) now hidden, hamburger shown, drawer added, overflow eliminated at 390px and 430px. ══════════════════════════════════════════════════════════════ */ /* ── Desktop: hamburger hidden, nav-links visible ── */ .mob-menu-btn { display: none !important; } .mob-nav-overlay, .mob-nav-drawer { display: none; } @media (max-width: 768px) { /* Kill horizontal overflow at root level */ html, body { overflow-x: hidden; max-width: 100vw; } /* Nav container */ nav { padding: 0 1rem; height: 56px; position: sticky; top: 0; z-index: 200; } /* Hide desktop links — correct class is .nav-links not .nav-menu */ .nav-links { display: none !important; } /* Show hamburger */ .mob-menu-btn { display: flex !important; } /* Reduce right-side icon cluster */ .nav-actions { gap: 0.4rem; } .nav-icon { padding: 6px; } /* Cart button: icon + number only */ .nav-cart { padding: 9px 12px; font-size: 11px; gap: 4px; } /* Logo size */ .logo { font-size: 18px; } } /* ── Mobile nav overlay (dim background) ── */ .mob-nav-overlay { position: fixed; inset: 0; background: rgba(44,40,32,0.45); z-index: 300; opacity: 0; transition: opacity 0.25s; } .mob-nav-overlay.mob-nav-overlay-open { display: block; opacity: 1; } /* ── Mobile nav drawer (slides in from left) ── */ .mob-nav-drawer { position: fixed; top: 0; left: -100%; width: min(320px, 85vw); height: 100dvh; background: var(--warm, #FDFBF8); z-index: 400; display: flex; flex-direction: column; transition: left 0.28s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 32px rgba(44,40,32,0.12); overflow-y: auto; } .mob-nav-drawer.mob-nav-open { left: 0; } /* Drawer header */ .mob-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 0.5px solid rgba(44,40,32,0.1); } .mob-nav-logo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: #2C2820; } .mob-nav-logo em { color: #C9846A; font-style: italic; } .mob-nav-close { background: none; border: none; cursor: pointer; font-size: 18px; color: #8A8070; padding: 4px 6px; border-radius: 4px; } .mob-nav-close:hover { background: rgba(44,40,32,0.06); } /* Drawer links */ .mob-nav-links { list-style: none; padding: 0.75rem 0; margin: 0; flex: 1; } .mob-nav-links li { padding: 0.85rem 1.5rem; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #6B6560; cursor: pointer; border-bottom: 0.5px solid rgba(44,40,32,0.06); transition: background 0.15s, color 0.15s; } .mob-nav-links li:first-child { font-weight: 500; color: #2C2820; } .mob-nav-links li:hover { background: rgba(201,132,106,0.07); color: #C9846A; } /* ── 390px / 430px fine-tuning ── */ @media (max-width: 430px) { nav { padding: 0 0.85rem; height: 52px; } .logo { font-size: 17px; } .nav-cart { padding: 8px 10px; } .nav-icon { padding: 5px; } } @media (max-width: 390px) { .nav-actions { gap: 0.25rem; } .nav-cart span:not(#cartCount) { display: none; } /* hide "Panier" text, keep count */ } /* ══════════════════════════════════════════════════════════════ PATCH — fiche-produit.html: all mobile responsive fixes Targets: 320px (SE), 360px (Android), 390px (iPhone 15), 430px ══════════════════════════════════════════════════════════════ */ /* ── Zoom image box (replaces hardcoded 60vw inline style) ── */ .zoom-img-box { width: min(60vw, 600px); height: min(75vh, 600px); border-radius: 8px; background: linear-gradient(145deg, #E8D9CC, #D0A88E); display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .zoom-img-box { width: 90vw; height: 70vw; /* square-ish on mobile */ border-radius: 6px; } } /* ── CTA row: wrap on narrow screens ── */ .cta-row { flex-wrap: wrap; } .btn-atc { min-width: 0; } /* ── Gallery thumbnails: prevent overflow at 320px ── */ @media (max-width: 400px) { .gallery-thumbs { gap: 6px; } .thumb { width: 56px !important; height: 56px !important; } } @media (max-width: 340px) { .thumb { width: 48px !important; height: 48px !important; } } /* ── Similar grid: 2-col at 1024px, 1-col at 480px ── */ @media (max-width: 480px) { .similar-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 360px) { .similar-grid { grid-template-columns: 1fr !important; } } /* ── Size opts: wrap cleanly ── */ .size-opts { flex-wrap: wrap; } /* ── fiche-produit full-page layout ── */ @media (max-width: 768px) { .product-sheet { grid-template-columns: 1fr !important; gap: 1.5rem !important; padding: 1.25rem 1rem !important; } .gallery { position: static !important; width: 100% !important; max-width: 100% !important; } .gallery-main { width: 100%; max-width: 100%; } .gallery-thumbs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gallery-thumbs::-webkit-scrollbar { display: none; } /* CTA buttons: full width stack on tiny screens */ .cta-row { gap: 8px; } .btn-atc { padding: 16px 12px; font-size: 13px; } .btn-wish { flex-shrink: 0; width: 52px; height: 52px; } .btn-buy-now { padding: 14px; font-size: 12px; } } @media (max-width: 390px) { .product-sheet { padding: 1rem 0.85rem !important; } .btn-atc { font-size: 12px; padding: 15px 10px; } .guarantees { grid-template-columns: 1fr !important; gap: 0.75rem; } } /* ── veilleuses.html: hamburger + mobile nav (uses .nav-menu) ── */ @media (max-width: 600px) { /* .nav-menu already hidden at 600px via inline style in veilleuses.html */ /* Add overflow safety */ html, body { overflow-x: hidden; } .page-layout { overflow-x: hidden; } } /* ── Tablet (768–1024px) product sheet ── */ @media (min-width: 769px) and (max-width: 1024px) { .product-sheet { grid-template-columns: 1fr !important; gap: 2rem !important; } .gallery { position: static !important; max-width: 540px; margin: 0 auto; } } /* ── Modal: 430px fine-tuning ── */ @media (max-width: 430px) { .modal-gallery { max-height: 55vw; } .modal-main-img { max-height: 38vw; } .modal-info { padding: 1rem 1rem 1.5rem; } .modal-prod-name { font-size: 20px; } .modal-price-line { font-size: 20px; } } /* ── Modal: 390px (iPhone 15) ── */ @media (max-width: 390px) { .modal-gallery { padding: 1rem; max-height: 58vw; } .modal-main-img { max-height: 40vw; } .modal-info { padding: 0.9rem 0.9rem 1.4rem; } .modal-thumb { width: 44px; height: 44px; } } /* ── Modal: 360px (Android) ── */ @media (max-width: 360px) { .modal-box { width: calc(100vw - 16px); } .modal-backdrop { padding: 8px; } .modal-gallery { padding: 0.85rem; max-height: 60vw; } .modal-prod-name { font-size: 18px; } .modal-price-line { font-size: 18px; } .modal-thumb { width: 40px; height: 40px; } .modal-desc { font-size: 13px; } .modal-feature { font-size: 12px; } } /* ── Modal floating close button: mobile only ───────────────── Appears at top-right of .modal-box, always above the fold. Desktop (.modal-close-btn inside .modal-info) handles close. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Hide the in-info close button on mobile */ .modal-close-btn { display: none !important; } /* Show the floating close button */ .modal-close-float { display: flex !important; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; z-index: 20; width: 34px; height: 34px; background: rgba(253,251,248,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; border-radius: 50%; cursor: pointer; font-size: 16px; color: #2C2820; box-shadow: 0 1px 8px rgba(44,40,32,0.18); transition: background 0.15s; line-height: 1; } .modal-close-float:hover, .modal-close-float:active { background: rgba(44,40,32,0.1); } /* .modal-box must be position:relative for absolute close btn */ .modal-box { position: relative !important; } /* Ensure backdrop scroll works on iOS */ .modal-backdrop { -webkit-overflow-scrolling: touch; } }