/* * 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: 1200px; --ci-container-px: 1.25rem; /* 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; }