/* Theme Name: GM Mobile Parts Theme URI: https://gmmobileparts.com Description: Thème enfant de GeneratePress pour la plateforme B2B de pièces détachées smartphone GM Mobile Parts. Vente aux professionnels uniquement. Author: GM Mobile Parts Template: generatepress Version: 0.2.0 Text Domain: gmparts */ /* ========================================================================== 1. JETONS DE DESIGN Source : design Claude Design « GM PARTS », fichier « V4 LATESST ». Toutes les valeurs visuelles du projet sont déclarées ici et nulle part ailleurs. Aucun fichier CSS plus bas ne doit écrire une couleur, un espacement, un rayon ou une ombre en dur : il utilise var(--nom). Les valeurs que le design écrivait en dur dans ses composants ont été promues ici, avec exactement la même valeur. ========================================================================== */ :root { /* --- Structure --------------------------------------------------- */ --ink: #0F1519; /* texte principal */ --grey: #5B6B6A; /* texte secondaire, SKU, sous-titres */ --slate: #455164; /* rail des marques, colophon, survol bord. */ --paper: #FFFFFF; /* fond de page, cartes */ --bench: #F7F8F8; /* sections alternées, pied de page */ --chrome: #F0F1F3; /* barre de menu, champ de recherche */ --line: #E6EAE9; /* bordures fines des cartes */ --line-strong: #DCE3E2; /* champs, boutons contour, barres */ --placeholder: #E4EAE9; /* blocs image en attente */ /* --- Action : le vert est réservé aux boutons et aux liens -------- */ --action: #0E8F52; --action-lift: #0A7543; /* survol */ /* --- Accent : l'orange est réservé aux icônes et compteurs -------- */ --accent: #EF4505; /* --- Familles pastel : fond / encre. Tuiles, pilules, avatars ----- */ --pastel-slate-bg: #EEF1F5; --pastel-slate-ink: #455164; --pastel-green-bg: #E8F3EC; --pastel-green-ink: #0E8F52; --pastel-orange-bg: #FDECE6; --pastel-orange-ink: #EF4505; --pastel-amber-bg: #F7EEE2; --pastel-amber-ink: #A65A00; --pastel-grey-bg: #F0F1F3; --pastel-grey-ink: #5B6B6A; /* --- États de stock : le SEUL endroit où ces couleurs apparaissent */ --stock-ok: #0E8F52; --stock-low: #A65A00; --stock-out: #A32020; /* --- Couleurs promues depuis les composants du design ------------- */ /* Chacune n'existait qu'en dur dans une règle. Même valeur, un nom. */ --topbar-bg: #0E161D; /* fond de la barre d'annonces */ --vat-on: #519056; /* piste de l'interrupteur TVA activé */ --whatsapp: #25D366; /* bouton WhatsApp */ --whatsapp-lift: #1EBE5A; /* bouton WhatsApp, survol */ --hero-panel: #EBF3EC; /* panneau de l'illustration du hero */ --option-hover: #F3F4F6; /* survol d'une option de sélecteur */ --panel-ink: #1F2937; /* texte du panneau de menu mobile */ --locked: #9AA5A4; /* prix verrouillé « Login to see » */ /* --- Blancs translucides sur fond sombre (topbar, rail, colophon) -- */ --on-dark: rgba(255, 255, 255, .72); /* liens au repos */ --on-dark-strong: rgba(255, 255, 255, .82); /* boutons contour */ --on-dark-text: rgba(255, 255, 255, .88); /* texte courant */ --on-dark-sep: rgba(255, 255, 255, .16); /* séparateurs */ --on-dark-border: rgba(255, 255, 255, .28); /* bordures de boutons */ /* --- Blancs translucides des barres flottantes -------------------- */ --masthead-bg: rgba(255, 255, 255, .96); /* barre collante */ --mobile-cta-bg: rgba(255, 255, 255, .92); /* CTA mobile */ /* --- Polices : pile système uniquement, aucun @font-face ---------- */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Tailles de texte : les dix tailles du design ------------------ */ --fs-11: 11px; /* pilules, compteur panier, astuces, clés */ --fs-12: 12px; /* topbar, chips, SKU, colophon, méta */ --fs-13: 13px; /* labels, sous-textes, boutons fantômes, rail */ --fs-14: 14px; /* texte courant, boutons, navigation, h3 produit */ --fs-15: 15px; /* h3 des cartes, citations, sélecteurs */ --fs-16: 16px; /* lede du hero, h3 des étapes, FAQ */ --fs-20: 20px; /* h3 de l'article principal */ --fs-24: 24px; /* h2 de section, valeur de prix */ --fs-32: 32px; /* h2 de la bande compte pro */ --fs-48: 48px; /* h1 du hero */ /* --- Graisses : deux seulement. Jamais 600 ni 700. ---------------- */ --fw-normal: 400; --fw-medium: 500; /* --- Interlignes ---------------------------------------------------- */ --lh-body: 1.45; /* texte courant */ --lh-h1: 1.1; /* h1 du hero */ --lh-h2: 1.15; /* h2 de la bande compte pro */ --lh-title: 1.25; /* h3 des badges */ --lh-h3: 1.3; /* h3 de l'article principal */ --lh-card: 1.35; /* h3 des cartes produit et articles */ --lh-small: 1.4; /* sous-textes des badges */ --lh-lede: 1.5; /* lede, citations, étapes */ --lh-faq: 1.55; /* réponses de la FAQ */ --lh-address: 1.6; /* adresse du pied de page */ --lh-legal: 1.7; /* mentions légales */ /* --- Espacements de lettres ----------------------------------------- */ --ls-h1: -.015em; /* h1 du hero */ --ls-h2: -.01em; /* h2 de section et de la bande compte pro */ --ls-footer: .02em; /* titres de colonnes du pied de page */ --ls-pill: .04em; /* pilules mono */ --ls-caps: .06em; /* clés en majuscules de la carte prix */ /* --- Espacements : les valeurs utilisées par le design ------------- */ /* Nommées par leur valeur : le design ne suit pas une échelle stricte */ /* de 4, il utilise aussi 6, 10, 14 et 18. */ --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; /* Padding vertical des sections : 56px, ramené à 40px sous 1100px. */ --section-y: var(--sp-56); /* --- Géométrie ------------------------------------------------------ */ --radius-xs: 4px; /* vignettes internes */ --radius-sm: 6px; /* boutons, champs, plaques d'icône */ --radius: 8px; /* cartes */ --radius-md: 12px; /* tuiles, panneau du hero, carte prix */ --radius-lg: 16px; /* bande compte pro */ --pill: 999px; /* pilules, boutons ronds */ --round: 50%; /* bouton rond du rail des marques */ --wrap: 1280px; /* largeur maximale du contenu */ --gutter: 24px; /* marge latérale du contenu */ --touch: 44px; /* zone tactile minimale */ /* --- Ombres : diffuses, jamais grises et lourdes ------------------- */ --shadow: 0 1px 2px rgba(15, 21, 25, .04), 0 8px 24px -12px rgba(15, 21, 25, .10); --shadow-lift: 0 1px 2px rgba(15, 21, 25, .04), 0 12px 28px -12px rgba(15, 21, 25, .16); --shadow-menu: 0 1px 2px rgba(15, 21, 25, .04), 0 16px 32px -12px rgba(15, 21, 25, .18); --shadow-masthead: 0 1px 2px rgba(15, 21, 25, .04), 0 8px 24px -16px rgba(15, 21, 25, .22); --shadow-flat: 0 1px 2px rgba(15, 21, 25, .04); /* pilule de note */ --shadow-icon: 0 1px 2px rgba(15, 21, 25, .06); /* icônes, barre mobile */ /* --- Mouvement ------------------------------------------------------ */ --ease: .2s ease; /* transition standard */ --ease-press: .08s ease; /* retour de pression au clic */ --ease-fade: .35s ease; /* fondu du carrousel de la topbar */ --ease-slide: .25s ease; /* apparition du CTA mobile */ } /* Sous 1100px, les sections respirent moins. Un point de rupture ne peut pas être une variable CSS : les seuils du design sont documentés ici. 1100px burger, menu principal masqué, recherche pleine largeur 1024px hero sur une colonne 768px topbar en carrousel, finder sur une colonne 520px CTA mobile collant, grille produits sur deux colonnes */ @media (max-width: 1100px) { :root { --section-y: var(--sp-40); } } /* ========================================================================== 2. BASE Reproduit la section « reset & base » du design. Les sélecteurs de remise à zéro sont enveloppés dans :where() : leur spécificité tombe à zéro, donc n'importe quelle règle de composant les surcharge sans !important. ========================================================================== */ /* Le modèle de boîte par bordure évite tous les calculs de largeur. */ *, *::before, *::after { box-sizing: border-box; } html { /* Empêche iOS d'agrandir le texte en mode paysage. */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--fs-14); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--ink); background: var(--paper); /* Chiffres tabulaires : chaque chiffre occupe la même largeur. Indispensable pour aligner prix, stocks et SKU en colonnes. */ font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; } :where(img, svg) { display: block; max-width: 100%; } /* Les marges par défaut sont retirées : chaque composant pose les siennes avec les jetons d'espacement. */ :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; } :where(ul) { margin: 0; padding: 0; list-style: none; } /* Exception : le contenu rédigé dans l'éditeur WordPress (pages, articles) garde des listes et des paragraphes lisibles. « revert » rend au navigateur ses valeurs par défaut, sans en inventer de nouvelles. */ .entry-content :is(ul, ol) { margin: revert; padding: revert; list-style: revert; } .entry-content :is(h1, h2, h3, h4, p, figure, blockquote) { margin: revert; } a { color: var(--action); text-decoration: none; } a:hover { color: var(--action-lift); text-decoration: underline; } /* Les contrôles de formulaire héritent la police du body au lieu de la police système de leur plateforme. */ :where(button, input, select, textarea) { font: inherit; color: inherit; } /* Conteneur unique : une largeur maximale pour toutes les sections. */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } /* --- Accessibilité ------------------------------------------------------ */ /* Lien d'évitement : hors écran, visible seulement au focus clavier. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--sp-12) var(--sp-16); background: var(--paper); } .skip-link:focus { left: var(--sp-8); top: var(--sp-8); } /* Texte réservé aux lecteurs d'écran. La classe de WordPress est traitée de la même façon, pour que les templates WooCommerce en profitent. */ .sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Anneau de focus visible pour la navigation clavier (WCAG 2.4.7). */ :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; } /* L'attribut hidden doit gagner contre n'importe quel display. */ [hidden] { display: none !important; } /* Respect de la préférence de mouvement réduit. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================================================================== 3. NEUTRALISATION DE GENERATEPRESS Le PHP débranche l'en-tête, la navigation et le pied de page du parent. Il reste ses conteneurs vides : on retire leur habillage sans les masquer, car nos propres blocs sont rendus à l'intérieur. ========================================================================== */ /* Enveloppes de l'en-tête et du pied de page : ni fond, ni marge, ni bordure. Le design pose les siens sur ses propres éléments. */ .site-header, .site-footer { background: none; padding: 0; margin: 0; border: 0; box-shadow: none; } /* Restes de l'en-tête et du pied de page du parent : conteneur interne, navigation, zones de widgets, mention « Propulsé par ». */ .site-header .inside-header, #site-navigation, .main-navigation, .footer-widgets, .site-info { display: none; } /* Conteneurs de contenu : le parent y met une largeur maximale, des marges et du padding. Nos sections sont pleine largeur et centrent elles-mêmes leur contenu avec .wrap. */ .grid-container, .site-content, .content-area, .site-main { max-width: none; margin: 0; padding: 0; }