/* * OG e-Commerce — main.css * Variables CSS + Reset + Typographie + Utilitaires de base * Les valeurs de couleur sont des DÉFAUTS — écrasées par le CSS Customizer * injecté dynamiquement dans via inc/customizer.php → og_ec_customizer_css() * * Préfixe classes : .og-ec- (namespace isolé, compatible OG Suite) */ /* ════════════════════════════════════════════════════════════════════════ 1. VARIABLES CSS — Défauts (surchargés par Customizer) ════════════════════════════════════════════════════════════════════════ */ :root { /* Couleurs — surchargées dynamiquement */ --ci-red: #CC0000; --ci-red-hover: #A50000; --ci-red-light: #FFF0F0; --ci-red-100: rgba(204, 0, 0, 0.08); --ci-gray: #6B7280; --ci-gray-light: #9CA3AF; --ci-gray-100: #F2F4F6; --ci-gray-200: #E5E7EB; --ci-gray-300: #D1D5DB; --ci-dark: #111111; --ci-dark-soft: #1F2937; --ci-white: #FFFFFF; --ci-body-bg: #FFFFFF; --ci-text: #1F2937; --ci-text-light: #6B7280; --ci-text-muted: #9CA3AF; --og-footer-bg: #111111; --og-footer-text: #FFFFFF; --og-topbar-bg: #CC0000; --og-topbar-text: #FFFFFF; --ci-whatsapp: #25D366; --ci-whatsapp-dark: #128C7E; /* Typographie */ --ci-font: 'Inter', system-ui, -apple-system, sans-serif; --ci-font-size: 16px; --ci-line-height: 1.65; /* Espacements */ --ci-space-xs: 0.25rem; --ci-space-sm: 0.5rem; --ci-space-md: 1rem; --ci-space-lg: 1.5rem; --ci-space-xl: 2rem; --ci-space-2xl: 3rem; --ci-space-3xl: 5rem; /* Conteneur */ --ci-container: 1400px; --ci-container-px: 1.5rem; /* Rayons */ --ci-radius-sm: 4px; --ci-radius: 8px; --ci-radius-lg: 12px; --ci-radius-xl: 16px; --ci-radius-full: 9999px; /* Ombres */ --ci-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --ci-shadow: 0 4px 24px rgba(0,0,0,0.08); --ci-shadow-md: 0 8px 32px rgba(0,0,0,0.12); --ci-shadow-lg: 0 16px 48px rgba(0,0,0,0.16); /* Transitions */ --ci-transition: all 0.2s ease; --ci-transition-lg: all 0.35s ease; /* Z-index */ --ci-z-dropdown: 100; --ci-z-sticky: 200; --ci-z-overlay: 300; --ci-z-modal: 400; --ci-z-toast: 500; } /* ════════════════════════════════════════════════════════════════════════ 2. RESET ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--ci-font-size); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ci-font); font-size: 1rem; line-height: var(--ci-line-height); color: var(--ci-text); background-color: var(--ci-body-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--ci-red); text-decoration: none; transition: var(--ci-transition); } a:hover { color: var(--ci-red-hover); } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: var(--ci-font); line-height: 1.25; font-weight: 700; color: var(--ci-text); } p { color: var(--ci-text-light); line-height: var(--ci-line-height); } /* ════════════════════════════════════════════════════════════════════════ 3. TYPOGRAPHIE ════════════════════════════════════════════════════════════════════════ */ h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; } h2 { font-size: clamp(1.375rem, 3.5vw, 2rem); font-weight: 700; } h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 600; } h4 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; } h5 { font-size: 1rem; font-weight: 600; } h6 { font-size: 0.875rem; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ 4. CONTENEUR ════════════════════════════════════════════════════════════════════════ */ .og-ec-container { width: 100%; max-width: var(--ci-container); margin-inline: auto; padding-inline: var(--ci-container-px); } .og-ec-container--narrow { max-width: 720px; } .og-ec-container--full { max-width: 100%; padding-inline: 0; } /* ════════════════════════════════════════════════════════════════════════ 5. SECTIONS ════════════════════════════════════════════════════════════════════════ */ .og-ec-section { padding-block: var(--ci-space-3xl); } .og-ec-section--sm { padding-block: var(--ci-space-2xl); } .og-ec-section--lg { padding-block: 6rem; } .og-ec-section--white { background-color: var(--ci-white); } .og-ec-section--gray { background-color: var(--ci-gray-100); } .og-ec-section--dark { background-color: var(--og-footer-bg); color: var(--og-footer-text); } .og-ec-section--red { background-color: var(--ci-red); color: var(--ci-white); } .og-ec-section--dark h1, .og-ec-section--dark h2, .og-ec-section--dark h3, .og-ec-section--dark p { color: var(--og-footer-text); } .og-ec-section-header { text-align: center; margin-bottom: var(--ci-space-2xl); } .og-ec-section-header h2 { margin-bottom: var(--ci-space-sm); } .og-ec-section-header p { max-width: 560px; margin-inline: auto; font-size: 1.0625rem; } .og-ec-section-header h2::after { content: ''; display: block; width: 48px; height: 3px; background-color: var(--ci-red); margin: var(--ci-space-sm) auto 0; border-radius: var(--ci-radius-full); } /* ════════════════════════════════════════════════════════════════════════ 6. GRILLES ════════════════════════════════════════════════════════════════════════ */ .og-ec-grid { display: grid; gap: var(--ci-space-lg); } .og-ec-grid-2 { grid-template-columns: repeat(2, 1fr); } .og-ec-grid-3 { grid-template-columns: repeat(3, 1fr); } .og-ec-grid-4 { grid-template-columns: repeat(4, 1fr); } .og-ec-flex { display: flex; } .og-ec-flex-center { display: flex; align-items: center; justify-content: center; } .og-ec-flex-between { display: flex; align-items: center; justify-content: space-between; } .og-ec-gap-sm { gap: var(--ci-space-sm); } .og-ec-gap-md { gap: var(--ci-space-md); } .og-ec-gap-lg { gap: var(--ci-space-lg); } /* ════════════════════════════════════════════════════════════════════════ 7. ACCESSIBILITÉ ════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--ci-red); outline-offset: 2px; border-radius: var(--ci-radius-sm); } /* ════════════════════════════════════════════════════════════════════════ 8. UTILITAIRES ════════════════════════════════════════════════════════════════════════ */ .og-ec-text-center { text-align: center; } .og-ec-text-red { color: var(--ci-red); } .og-ec-text-white { color: var(--ci-white); } .og-ec-text-muted { color: var(--ci-text-muted); } .og-ec-fw-700 { font-weight: 700; } .og-ec-fw-800 { font-weight: 800; } .og-ec-mt-sm { margin-top: var(--ci-space-sm); } .og-ec-mt-md { margin-top: var(--ci-space-md); } .og-ec-mt-lg { margin-top: var(--ci-space-lg); } .og-ec-mt-xl { margin-top: var(--ci-space-xl); } .og-ec-mb-sm { margin-bottom: var(--ci-space-sm); } .og-ec-mb-md { margin-bottom: var(--ci-space-md); } .og-ec-mb-lg { margin-bottom: var(--ci-space-lg); } .og-ec-mb-xl { margin-bottom: var(--ci-space-xl); } .og-ec-hidden { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ 9. LIVE SEARCH — Barre de recherche avec suggestions en temps réel Utilisé dans : template-parts/header/nav-main.php (#og-search-bar) JS associé : OGEC.initLiveSearch() dans assets/js/main.js ════════════════════════════════════════════════════════════════════════ */ /* Wrapper principal — prend toute la place dispo dans #og-search-bar */ .og-live-search { position: relative; flex: 1; min-width: 0; } /* Formulaire de recherche */ .og-live-search__form { display: flex; align-items: center; background: var(--ci-white); border: 1.5px solid var(--ci-gray-200); border-radius: var(--ci-radius); overflow: visible; /* Le dropdown dépasse */ transition: border-color 0.2s ease, box-shadow 0.2s ease; } .og-live-search__form:focus-within { border-color: var(--ci-red); box-shadow: 0 0 0 3px var(--ci-red-100); } /* Champ texte */ .og-live-search__input { flex: 1; min-width: 0; padding: 12px 16px; font-family: var(--ci-font); font-size: 15px; color: var(--ci-text); background: transparent; border: none; outline: none; /* Réinitialiser les styles WP/WC sur .search-field */ box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; } .og-live-search__input::placeholder { color: var(--ci-text-muted); font-size: 14px; } /* Supprimer l'icône native × des navigateurs */ .og-live-search__input::-webkit-search-decoration, .og-live-search__input::-webkit-search-cancel-button, .og-live-search__input::-webkit-search-results-button, .og-live-search__input::-webkit-search-results-decoration { display: none; } /* Bouton submit */ .og-live-search__submit { display: flex; align-items: center; justify-content: center; padding: 0 18px; height: 100%; min-height: 48px; background: var(--ci-red); color: var(--ci-white); border: none; cursor: pointer; font-size: 15px; flex-shrink: 0; transition: background 0.2s ease; border-radius: 0 var(--ci-radius) var(--ci-radius) 0; } .og-live-search__submit:hover, .og-live-search__submit:focus-visible { background: var(--ci-red-hover); outline: none; } /* ── Dropdown suggestions ──────────────────────────────────────────────── */ .og-live-search__dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ci-white); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-lg); border: 1px solid var(--ci-gray-200); z-index: var(--ci-z-modal); /* Au-dessus du mega-menu */ overflow: hidden; max-height: 380px; overflow-y: auto; /* Scrollbar discrète */ scrollbar-width: thin; scrollbar-color: var(--ci-gray-200) transparent; } .og-live-search__dropdown[hidden] { display: none; } .og-live-search__dropdown::-webkit-scrollbar { width: 4px; } .og-live-search__dropdown::-webkit-scrollbar-track { background: transparent; } .og-live-search__dropdown::-webkit-scrollbar-thumb { background: var(--ci-gray-200); border-radius: 2px; } /* ── Item suggestion ───────────────────────────────────────────────────── */ .og-ls-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--ci-text); border-left: 3px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; cursor: pointer; } .og-ls-item:hover, .og-ls-item:focus, .og-ls-item--active { background: var(--ci-gray-100); border-left-color: var(--ci-red); outline: none; color: var(--ci-text); } /* Miniature produit */ .og-ls-item__thumb { width: 40px; height: 40px; object-fit: contain; border-radius: var(--ci-radius-sm); border: 1px solid var(--ci-gray-200); flex-shrink: 0; background: var(--ci-gray-100); } /* Bloc texte */ .og-ls-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .og-ls-item__name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; color: var(--ci-text); } /* Surbrillance du terme tapé */ .og-ls-item__name mark { background: var(--ci-red-100); color: var(--ci-red); font-weight: 700; border-radius: 2px; padding: 0 2px; } /* Ligne meta : prix + catégorie */ .og-ls-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .og-ls-item__price { font-size: 12px; font-weight: 700; color: var(--ci-red); white-space: nowrap; } .og-ls-item__cat { font-size: 11px; color: var(--ci-text-muted); background: var(--ci-gray-100); border: 1px solid var(--ci-gray-200); padding: 1px 6px; border-radius: var(--ci-radius-full); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } /* ── États spéciaux ────────────────────────────────────────────────────── */ /* Message "aucun résultat" */ .og-ls-empty { padding: 18px 16px; font-size: 13.5px; color: var(--ci-text-light); text-align: center; line-height: 1.5; } .og-ls-empty strong { color: var(--ci-text); } /* Spinner de chargement */ .og-ls-loader { display: flex; align-items: center; justify-content: center; padding: 18px; gap: 10px; font-size: 13px; color: var(--ci-text-muted); } .og-ls-loader::before { content: ''; width: 18px; height: 18px; border: 2px solid var(--ci-gray-200); border-top-color: var(--ci-red); border-radius: 50%; animation: og-ls-spin 0.65s linear infinite; flex-shrink: 0; } @keyframes og-ls-spin { to { transform: rotate(360deg); } } /* ── Responsive mobile ─────────────────────────────────────────────────── */ @media (max-width: 767px) { .og-live-search__input { padding: 11px 12px; font-size: 14px; } .og-live-search__submit { padding: 0 14px; min-height: 44px; font-size: 14px; } /* Sur mobile : dropdown s'étend sur toute la largeur du viewport */ .og-live-search__dropdown { position: fixed; left: 12px; right: 12px; top: auto; /* recalculé dynamiquement en JS */ max-height: 55vh; border-radius: var(--ci-radius); } .og-ls-item { padding: 10px 12px; gap: 10px; } .og-ls-item__thumb { width: 36px; height: 36px; } .og-ls-item__name { font-size: 13px; } }