/* ============================================================================= MyGuitare — Design System pages de vente tokens.css — v1.0 — Avril 2026 Fichier à importer en premier dans toutes les pages de vente MyGuitare. Source de vérité pour toutes les variables de design (couleurs, typographie, espacement, bordures, ombres, breakpoints). Usage : puis dans ton CSS : .ma-classe { color: var(--mg-blue); padding: var(--space-6); } Règle absolue : ne JAMAIS hardcoder de couleur ou de taille dans une page de vente. Toujours passer par une variable CSS de ce fichier. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. POLICES GOOGLE FONTS À coller dans le de chaque page de vente AVANT tokens.css : Montserrat : titres (500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold) Lato : corps (400 Regular, 700 Bold) ----------------------------------------------------------------------------- */ :root { /* =========================================================================== COULEURS DE MARQUE Source : charte graphique MyGuitare v1.0 (mars 2026) + styleguide original 2020 =========================================================================== */ /* Primaire — bleu signature MyGuitare */ --mg-blue: #0075E2; /* Couleur primaire. Liens, CTA principaux. */ --mg-blue-dark: #002145; /* Titres H1, en-têtes, zones d'autorité. */ --mg-blue-light: #E8F0FE; /* Hover, zones sélectionnées, encarts révélation. */ --mg-blue-hover: #0063C1; /* Bleu -8% luminosité pour hover CTA primaire. */ /* CTA urgence et accent */ --mg-orange: #E26D00; /* CTA urgence, compte à rebours. */ --mg-orange-hover: #C35D00; /* Orange -8% pour hover. */ --mg-pink: #E20075; /* Badges exceptionnels, alertes haute intensité. */ /* Succès et validation */ --mg-green: #04E200; /* Prix promo, validation, vert fluo. */ --mg-green-btn: #27AE60; /* Boutons succès (« Accès gratuit »). */ --mg-green-btn-hover:#1E8F4E; /* Vert -8% pour hover. */ /* Alerte et erreur */ --mg-red: #E74C3C; /* Warnings, prix barrés, boutons « débloquer ». */ --mg-red-hover: #C93E30; /* Jaune étoiles (rating) */ --mg-star: #F5A623; /* Étoiles de témoignages. */ /* Or — garantie, premium, badges valorisants */ --mg-gold: #D68E0F; /* Or profond : badges garantie, accents premium. */ --mg-gold-light: #F7C152; /* Or clair : gradient haut, highlights. */ --mg-gold-soft: #FFF8E7; /* Crème pâle : fonds de blocs garantie / premium. */ --mg-gold-border: #F0D78A; /* Bordure sur fonds crème. */ --mg-gold-dark: #7A5200; /* Titres/texte sur fonds crème. */ /* Neutres */ --mg-bg: #F5F7FA; /* Fond de page. */ --mg-white: #FFFFFF; /* Cartes, encarts sur fond clair. */ --mg-border: #E0E0E0; /* Bordures discrètes. */ --mg-border-light: #EFEFEF; /* Bordure encore plus discrète (FAQ). */ --mg-text: #2C2C2C; /* Texte principal. */ --mg-text-soft: #555555; /* Texte secondaire plein corps. */ --mg-text-muted: #888888; /* Légendes, métadonnées. */ --mg-black: #000000; /* Logo et monochrome pur. */ --mg-black-soft: #282828; /* Pieds de page, zones sombres. */ /* Couleurs de progression (USAGE RESTREINT — uniquement niveaux de cursus) */ --mg-level-deb: #2979D6; /* Débutant */ --mg-level-inter: #EF9C1F; /* Intermédiaire */ --mg-level-conf: #9B3FB5; /* Confirmé */ --mg-level-avan: #2AAD5E; /* Avancé */ /* Couleurs de genre (HORS SCOPE pages de vente — documenté pour mémoire) */ /* À utiliser uniquement sur vignettes cours et réseaux sociaux, jamais sur les pages de vente générales. */ --mg-genre-pop-1: #BA22BA; --mg-genre-pop-2: #FFB206; --mg-genre-rock-1: #000000; --mg-genre-rock-2: #FFAA00; --mg-genre-blues-1: #1D1D91; --mg-genre-blues-2: #03FFA4; --mg-genre-frvar-1: #171A6B; --mg-genre-frvar-2: #A73B3B; --mg-genre-metal-1: #000000; --mg-genre-metal-2: #FF0000; --mg-genre-funk-1: #0E0B4F; --mg-genre-funk-2: #20FF00; /* =========================================================================== TYPOGRAPHIE Couple officiel MyGuitare : Montserrat (titres) + Lato (corps) Respecte la charte historique 2020 et la v1.0 de mars 2026. =========================================================================== */ --font-title: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Graisses */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Tailles de police — échelle pour pages de vente (plus généreuse qu'espace membre). Tailles responsives via clamp() : mobile → desktop. Valeurs min respectent la règle « jamais sous 16px mobile, 17px desktop ». */ --fs-h1: clamp(2rem, 1.4rem + 3.2vw, 4rem); /* 32 → 64px */ --fs-h2: clamp(1.625rem, 1.25rem + 2vw, 2.5rem); /* 26 → 40px */ --fs-h3: clamp(1.25rem, 1.125rem + 0.6vw, 1.75rem);/* 20 → 28px */ --fs-h4: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); /* 18 → 22px */ --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 → 22px */ --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18px */ --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);/* 14 → 15px */ --fs-xs: 0.8125rem; /* 13px — légendes */ --fs-btn: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem); /* 17 → 20px */ --fs-price-xl: clamp(3rem, 2rem + 3vw, 4.5rem); /* 48 → 72px */ /* Hauteurs de ligne */ --lh-tight: 1.15; /* H1, prix géants */ --lh-heading: 1.3; /* H2, H3 */ --lh-body: 1.6; /* corps */ --lh-loose: 1.75; /* paragraphes longs, lead */ /* Espacement des lettres */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; /* eyebrow, micro-capitales */ --ls-ultra: 0.12em; /* eyebrow en majuscules */ /* =========================================================================== ESPACEMENT — échelle 4px =========================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Espacement vertical entre sections (scope pages de vente) */ --section-py-mobile: var(--space-12); /* 48px */ --section-py-tablet: var(--space-16); /* 64px */ --section-py-desktop: var(--space-24); /* 96px */ /* =========================================================================== LARGEURS DE CONTENU =========================================================================== */ --max-w-narrow: 680px; /* Lecture confortable (corps long, bullets) */ --max-w-content: 900px; /* Sections narratives, blocs empathie/problème */ --max-w-wide: 1200px; /* Sections standard, grille cartes */ --max-w-full: 1440px; /* Hero full-width avec image à droite */ /* =========================================================================== BORDURES ET RADIUS =========================================================================== */ --border-width: 1px; --border-width-thick: 2px; --radius-sm: 6px; /* tags, badges, pilules */ --radius-md: 8px; /* boutons, inputs */ --radius-lg: 12px; /* cartes, accordéon */ --radius-xl: 20px; /* encarts majeurs, hero */ --radius-2xl: 24px; /* bloc offre/prix, bloc garantie */ --radius-full: 9999px; /* pilules, avatars ronds */ /* =========================================================================== OMBRES =========================================================================== */ --shadow-xs: 0 1px 2px rgba(0, 33, 69, 0.05); --shadow-sm: 0 1px 3px rgba(0, 33, 69, 0.08); --shadow-md: 0 4px 12px rgba(0, 33, 69, 0.08); --shadow-lg: 0 8px 24px rgba(0, 33, 69, 0.10); --shadow-xl: 0 16px 40px rgba(0, 33, 69, 0.12); /* Ombres teintées bleu (pour éléments hero ou flottants) */ --shadow-blue-sm: 0 4px 12px rgba(0, 117, 226, 0.15); --shadow-blue-md: 0 8px 24px rgba(0, 117, 226, 0.18); --shadow-blue-lg: 0 16px 40px rgba(0, 117, 226, 0.22); /* Ombre orange (CTA urgence) */ --shadow-orange-md: 0 8px 24px rgba(226, 109, 0, 0.22); /* =========================================================================== TRANSITIONS =========================================================================== */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 300ms; /* =========================================================================== Z-INDEX (échelle propre) =========================================================================== */ --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-cta-mobile: 60; /* =========================================================================== BREAKPOINTS (à utiliser via @media, on ne peut pas utiliser var() dans media queries) Documentés ici pour référence. Valeurs à recopier dans les media queries. =========================================================================== */ /* --bp-mobile-max: 767px */ /* --bp-tablet-min: 768px */ /* --bp-tablet-max: 1023px */ /* --bp-desktop-min:1024px */ /* --bp-wide-min: 1280px */ } /* ============================================================================= 2. RESET MINIMAL + BASE TYPOGRAPHY ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--mg-text); background: var(--mg-bg); } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--mg-blue); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--mg-blue-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--mg-blue-dark); margin: 0 0 var(--space-4); letter-spacing: var(--ls-tight); } h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--space-4); } p.lead { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--mg-text-soft); } strong, b { font-weight: var(--fw-bold); } em { font-style: italic; } :focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 3px; border-radius: var(--radius-sm); } /* ============================================================================= 3. CONTENEURS UTILITAIRES ============================================================================= */ .mg-container { width: 100%; max-width: var(--max-w-wide); margin-inline: auto; padding-inline: var(--space-6); } .mg-container-narrow { width: 100%; max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--space-6); } .mg-container-content{ width: 100%; max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--space-6); } .mg-section { padding-block: var(--section-py-mobile); } @media (min-width: 768px) { .mg-container, .mg-container-narrow, .mg-container-content { padding-inline: var(--space-8); } .mg-section { padding-block: var(--section-py-tablet); } } @media (min-width: 1024px) { .mg-section { padding-block: var(--section-py-desktop); } } /* ============================================================================= 4. VISUALLY HIDDEN (accessibilité) ============================================================================= */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }