/* ============================================================ MOBILE RESCUE v30 — fichier externe (boutique, offre, packs) Charge en dernier dans le pour avoir la priorite. ============================================================ */ /* ============ WhatsApp FAB : ramene a taille raisonnable PARTOUT ============ */ /* (sur boutique.html, theme-global.css n'est pas charge, donc styles.css impose 56px par defaut) */ html body .whatsapp-fab, html body.page-boutique .whatsapp-fab { width: 44px !important; height: 44px !important; bottom: 1.2rem !important; right: 1.2rem !important; opacity: 0.85 !important; } html body .whatsapp-fab svg, html body.page-boutique .whatsapp-fab svg { width: 22px !important; height: 22px !important; } html body .whatsapp-fab::before, html body.page-boutique .whatsapp-fab::before { inset: -3px !important; } @media (max-width: 600px) { html body .whatsapp-fab, html body.page-boutique .whatsapp-fab { width: 42px !important; height: 42px !important; bottom: 0.9rem !important; right: 0.9rem !important; } html body .whatsapp-fab svg, html body.page-boutique .whatsapp-fab svg { width: 20px !important; height: 20px !important; } } @media (max-width: 820px) { html, html body { overflow-x: hidden !important; max-width: 100vw !important; } html body * { max-width: 100% !important; box-sizing: border-box !important; } html body img, html body video { max-width: 100% !important; height: auto !important; } html body .cursor, html body .cursor-label { display: none !important; } /* ============ HEADER mobile ============ */ html body .site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px !important; background: rgba(12, 34, 28, 0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(224, 180, 128, 0.18) !important; z-index: 100 !important; box-sizing: border-box !important; } html body .site-header .brand-logo { height: 34px !important; width: auto !important; } html body .site-header .nav { display: none !important; } /* FIX v31 : le menu burger DOIT pouvoir s'afficher quand il est ouvert. (display:none !important sans exception .is-open rendait le menu totalement inaccessible sur mobile : le burger ne faisait rien.) */ html body .site-header .nav.is-open { display: flex !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(85vw, 320px) !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; background: rgba(12, 34, 28, 0.97) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(224, 180, 128, 0.3) !important; padding: 5rem 2rem 2rem !important; margin: 0 !important; z-index: 99 !important; transform: none !important; flex-direction: column !important; align-items: flex-start !important; overflow-y: auto !important; } html body .site-header .nav.is-open ul { display: flex !important; flex-direction: column !important; gap: 1.6rem !important; align-items: flex-start !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } html body .site-header .nav.is-open a { font-size: 1.05rem !important; color: #fdebd6 !important; opacity: 1 !important; text-decoration: none !important; font-family: 'Cinzel', serif !important; letter-spacing: 0.12em !important; } html body .site-header .burger { display: flex !important; z-index: 100 !important; } html body .site-header .header-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body .site-header .header-actions .btn-pill, html body .site-header .header-actions a.btn { padding: 8px 14px !important; font-size: 11px !important; letter-spacing: 0.18em !important; border-radius: 999px !important; text-transform: uppercase !important; background: linear-gradient(135deg, #e0b480, #c89a64) !important; color: #0c221c !important; border: 0 !important; text-decoration: none !important; font-weight: 600 !important; } html body main { padding-top: 70px !important; } /* ============ Sections : padding mobile ============ */ html body main > section, html body main > div > section { padding: 40px 16px !important; box-sizing: border-box !important; } html body .section-title, html body section h1, html body section h2 { font-family: 'Cinzel', serif !important; font-weight: 500 !important; color: #fdebd6 !important; text-align: center !important; font-size: 30px !important; line-height: 1.1 !important; margin: 0 0 14px !important; } html body section h1 em, html body section h2 em { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; color: #e0b480 !important; font-weight: 400 !important; } html body .eyebrow { display: inline-block !important; color: #e0b480 !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } /* ============ OFFRE pack page mobile ============ */ html body.page-offre .offre-hero, html body.page-offre .offre-grid, html body.page-offre .offre-grid-v2 { padding: 70px 16px 30px !important; } html body.page-offre .offre-grid, html body.page-offre .offre-grid-v2 { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } html body.page-offre .offre-card, html body.page-offre .svc-card { grid-column: auto !important; border-radius: 16px !important; overflow: hidden !important; } html body.page-offre .svc-card-media { aspect-ratio: 16 / 10 !important; } html body.page-offre .svc-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body.page-offre .svc-card-body { padding: 18px !important; } html body.page-offre .svc-card-body h3 { font-size: 20px !important; margin: 0 0 10px !important; } html body.page-offre .svc-card-body p { font-size: 14px !important; line-height: 1.5 !important; } html body.page-offre .offre-cta-band { padding: 28px 18px !important; margin: 24px 16px !important; } html body.page-offre .offre-cta-band h2 { font-size: 22px !important; } html body.page-offre .offre-cta-row { flex-direction: column !important; gap: 10px !important; width: 100% !important; } html body.page-offre .offre-cta-row > a { width: 100% !important; justify-content: center !important; } /* ============ PACK page (prestige etc) mobile ============ */ html body.page-pack .pack-hero, html body.page-pack .pack-section { padding: 70px 16px 24px !important; } html body.page-pack .pack-grid { grid-template-columns: 1fr !important; gap: 16px !important; } html body.page-pack .pack-media { aspect-ratio: 16/10 !important; border-radius: 12px !important; overflow: hidden !important; } html body.page-pack .pack-title { font-size: 30px !important; } html body.page-pack form .field input, html body.page-pack form .field textarea { width: 100% !important; padding: 14px !important; font-size: 15px !important; background: rgba(12,34,28,0.6) !important; border: 1px solid rgba(224,180,128,0.25) !important; color: #fdebd6 !important; border-radius: 10px !important; box-sizing: border-box !important; } html body.page-pack form button { width: 100% !important; padding: 14px !important; } /* ============ BOUTIQUE mobile ============ */ html body.page-boutique .shop-hero { padding: 70px 16px 24px !important; text-align: center !important; } html body.page-boutique .shop-filters { overflow-x: auto !important; flex-wrap: nowrap !important; padding: 0 16px 8px !important; gap: 6px !important; } html body.page-boutique .shop-chip { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 11px !important; padding: 6px 12px !important; } html body.page-boutique .shop-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 12px !important; } html body.page-boutique .shop-card { border-radius: 12px !important; overflow: hidden !important; } html body.page-boutique .shop-card-media { aspect-ratio: 4/5 !important; } html body.page-boutique .shop-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body.page-boutique .shop-card-body { padding: 10px 8px !important; } html body.page-boutique .shop-card-title { font-size: 13px !important; line-height: 1.2 !important; margin: 0 0 4px !important; } html body.page-boutique .shop-card-price { font-size: 12px !important; } html body.page-boutique .shop-card .btn { width: 100% !important; padding: 8px !important; font-size: 11px !important; } /* ============ LEGAL pages mobile ============ */ html body.page-legal main { padding: 90px 16px 40px !important; max-width: 100% !important; } html body.page-legal main h1 { font-size: 26px !important; } html body.page-legal main h2 { font-size: 18px !important; margin-top: 24px !important; } html body.page-legal main p { font-size: 14px !important; line-height: 1.6 !important; } html body.page-legal main ul { padding-left: 18px !important; font-size: 14px !important; } /* ============ Footer commun ============ */ html body .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center !important; } html body .footer-bottom { flex-direction: column !important; gap: 8px !important; font-size: 11px !important; } /* ============ Boutons CTA universels ============ */ html body .btn, html body .big-cta, html body .pf-btn { box-sizing: border-box !important; text-align: center !important; } /* ============ Forcer images visibles ============ */ html body .reveal, html body [data-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; } html body .magnetic { transform: none !important; } } /* Petits ecrans (< 380px) */ @media (max-width: 380px) { html body .section-title, html body section h1, html body section h2 { font-size: 26px !important; } html body.page-boutique .shop-grid { gap: 8px !important; } }