/* =========================== COMMON STYLES — Épicerie Tropicale Réutilisable sur toutes les pages =========================== */ html, body { background-color: #FEFDF7; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; } img { max-width: 100%; height: auto; } /* Désactive les hover-jump sur device tactile */ @media (hover: none) { .hover\:-translate-y-2:hover { transform: none; } } /* Cache les halos décoratifs blur sur mobile (économie de paint) */ @media (max-width: 767px) { [class*="blur-["][class*="rounded-full"][class*="pointer-events-none"] { display: none !important; } } /* Premium Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #FEFDF7; } ::-webkit-scrollbar-thumb { background: #FF8C00; border-radius: 5px; } /* Advanced Reveal Animations N'hide les éléments QUE si JS est chargé (.js-ready sur ). Sans JS / avant JS / pour outils crawler/screenshot : contenu visible par défaut. */ .js-ready .reveal { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .reveal.active { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Stagger delays */ .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } /* Advanced Glassmorphism */ .glass-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); } /* Text gradient clip */ .text-gradient { background: linear-gradient(135deg, #FF8C00, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Flag-icons (drapeaux SVG, remplace les emojis nationaux) */ @import url('https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css'); /* Sizing par défaut des drapeaux dans le projet */ .fi { display: inline-block; width: 1.4em; height: 1em; vertical-align: middle; background-size: cover; background-position: 50%; background-repeat: no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .fi.rounded-sm { border-radius: 3px; } /* Logo SVG dans navbar / footer */ .brand-logo { height: 40px; width: auto; display: block; } .brand-logo-sm { height: 32px; width: auto; display: block; } .brand-logo-footer { height: 84px; width: auto; display: block; } @media (min-width: 768px) { .brand-logo { height: 44px; } .brand-logo-footer { height: 96px; } } /* Accordion (services / FAQ) */ .accordion-item .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-item.is-open .accordion-content { max-height: 1500px; } .accordion-item .accordion-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-item.is-open .accordion-icon { transform: rotate(180deg); } /* Hero court interne (pages secondaires) */ .inner-hero { min-height: 380px; } @media (min-width: 768px) { .inner-hero { min-height: 460px; } } /* Lien actif navbar */ .nav-link.is-active { color: #FF8C00; } /* ================================ PANIER (système simple WhatsApp) ================================ */ /* Boutons à l'intérieur de chaque carte produit */ .product-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); } @media (min-width: 1024px) { .product-actions { flex-direction: row; gap: 8px; } } .product-action-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 1.1; cursor: pointer; transition: all 0.25s ease; font-family: 'Inter', sans-serif; border: 0; white-space: nowrap; } .product-action-btn.is-primary { background: #FF8C00; color: #fff; } .product-action-btn.is-primary:hover { background: #E67E00; } .product-action-btn.is-primary.is-added { background: #228B22; } .product-action-btn.is-secondary { background: #fff; color: #1A1A1A; border: 1px solid #e5e7eb; } .product-action-btn.is-secondary:hover { border-color: #FF8C00; color: #FF8C00; } /* Bouton flottant (panier) */ .cart-fab { position: fixed; bottom: 24px; right: 24px; z-index: 45; display: none; align-items: center; gap: 10px; background: #1A1A1A; color: #fff; border: 0; border-radius: 9999px; padding: 14px 22px; font-weight: 500; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 140, 0, 0.18); cursor: pointer; transition: transform 0.25s ease, background 0.25s ease; font-family: 'Inter', sans-serif; } .cart-fab.is-visible { display: inline-flex; animation: cartFabIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .cart-fab:hover { background: #FF8C00; transform: translateY(-2px); } .cart-fab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 9999px; background: #FFD700; color: #1A1A1A; font-weight: 700; font-size: 11px; } @keyframes cartFabIn { from { transform: translateY(28px) scale(0.85); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Drawer panier */ .cart-drawer { position: fixed; inset: 0; z-index: 60; display: none; } .cart-drawer.is-open { display: block; } .cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cartFadeIn 0.25s ease both; } .cart-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 440px; background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.3); animation: cartPanelIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes cartFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes cartPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .cart-item { display: flex; align-items: center; gap: 12px; background: #f9fafb; border-radius: 14px; padding: 12px 14px; transition: background 0.2s ease; } .cart-item:hover { background: #f3f4f6; } .cart-item-remove { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9999px; background: #fff; border: 1px solid #e5e7eb; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #6b7280; } .cart-item-remove:hover { border-color: #ef4444; color: #ef4444; } /* Toast confirmation ajout */ .cart-toast { position: fixed; bottom: 100px; right: 24px; z-index: 70; background: #1A1A1A; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 8px; animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both, toastOut 0.3s ease 2.4s forwards; } @keyframes toastIn { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toastOut { to { transform: translateY(28px); opacity: 0; pointer-events: none; } } /* Patterns décoratifs (points blancs) */ .pattern-dots-sm { background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0); background-size: 24px 24px; } .pattern-dots-lg { background-image: radial-gradient(circle at 2px 2px, #fff 2px, transparent 0); background-size: 32px 32px; }