/* ============================================================================ DrivyGo — Socle de design tokens ---------------------------------------------------------------------------- Source unique de verite pour les 4 surfaces du produit : site public, espace client VIP, admin, application chauffeur. DIRECTION : nuit bleutee + or champagne. L'ancienne palette (emeraude #10B981 sur le site public, teal #0b6f6b dans l'app) lisait fintech ou ecologie, pas chauffeur de luxe. L'accent est ECHANTILLONNE sur le logo (images/drivygo-noir.png), qui est un embleme et un logotype serif dores sur noir. La classe `.btn-gold` de l'app VIP n'etait donc pas une derive de nommage : elle correspondait au logo, et c'est le teal qui s'en etait ecarte. PRINCIPE : l'or est un accent CLAIR. Il ne porte jamais de texte blanc (1.3:1) : un bouton or porte de l'encre bleu nuit (11.62:1). C'est ce rapport inverse qui produit l'effet metal sur fond sombre. CONVENTION : les noms de tokens deja utilises dans css/style.css sont CONSERVES (y compris les alias --color-emerald*) pour ne rien casser ; ils pointent desormais vers l'or. A CHARGER AVANT la feuille de la surface. ========================================================================== */ :root { /* ── Couleur : base nuit bleutee ─────────────────────────────────────── */ --night-950: #070B16; /* fond le plus profond */ --night-900: #0B1020; /* fond de page */ --night-850: #0F1424; /* section alternee */ --night-800: #141A2E; /* surface de carte */ --night-700: #1C2440; /* surface surelevee */ --night-600: #2A3352; /* bordure marquee */ --night-500: #3C4668; /* bordure discrete */ /* Texte : blancs froids, contraste verifie sur --night-900 */ --ink-50: #EEF1F6; /* titres (16.1:1) */ --ink-200: #D3D9E4; /* texte courant (12.3:1) */ --ink-400: #9AA4BA; /* texte secondaire ( 6.4:1) */ --ink-500: #7A85A0; /* mentions ( 4.6:1) */ /* Alias de compatibilite : style.css reference ces noms. */ --color-black: var(--night-950); --color-black-soft: var(--night-900); --color-zinc-900: var(--night-850); --color-zinc-800: var(--night-800); --color-zinc-700: var(--night-700); --color-zinc-600: var(--night-600); --color-zinc-500: var(--night-500); --color-zinc-400: var(--ink-400); --color-zinc-300: var(--ink-200); --color-zinc-200: var(--ink-50); --color-white: #FFFFFF; /* ── Couleur : accent or champagne ────────────────────────────────────── Valeurs ECHANTILLONNEES sur le logo reel (images/drivygo-noir.png), dont les ors dominants sont #F0E0B0, #E0D0A0, #E0C090, #D0B080 : un champagne clair, pas un jaune sature. Le platine initialement retenu entrait en conflit avec le logo — et la classe `.btn-gold` de l'app VIP n'etait donc pas une derive de nommage mais un reste de l'intention d'origine. */ --brand: #DFC98F; /* or champagne — accent principal */ --brand-bright: #F2E3B8; /* or poli — survol, reflets */ --brand-deep: #B8975C; /* or oxyde — bordures, etats presses */ /* Encre a poser SUR l'or. Jamais de blanc : l'or est un accent CLAIR, du blanc dessus donnerait 1.3:1. Ici 11.62:1. */ --on-brand: var(--night-900); /* Alias de compatibilite (anciennement emeraude). */ --color-emerald: var(--brand); --color-emerald-400: var(--brand-bright); --color-emerald-500: var(--brand-deep); /* Teintes derivees : evite d'ecrire des rgba() en dur. */ --brand-tint-08: rgba(223, 201, 143, 0.08); --brand-tint-12: rgba(223, 201, 143, 0.12); --brand-tint-20: rgba(223, 201, 143, 0.20); --brand-tint-32: rgba(223, 201, 143, 0.32); /* ── Sections claires ─────────────────────────────────────────────────── Les pages SEO alternent fonds sombres et fonds clairs (blocs FAQ). L'or etant un accent clair, il est illisible sur fond clair : ces sections utilisent un bronze profond comme accent. L'ancien fond clair etait teinte VERT (#f6faf9 -> #ecf4f2), ce qui jurerait avec la nuit bleutee : on passe en gris froid neutre. */ --light-bg-from: #F4F6FA; --light-bg-to: #E8ECF4; --light-surface: #FFFFFF; --light-border: rgba(28, 36, 64, 0.12); --light-ink: #16203A; /* titres sur clair (14.5:1) */ --light-ink-muted: #46527045; /* reserve */ --light-ink-body: #414D6B; /* texte courant ( 7.4:1) */ --brand-on-light: #70571C; /* bronze : liens et accents sur clair (5.8:1) un or clair y tomberait a 2.3:1 */ /* Etoiles d'avis : elles reprennent l'or oxyde de la marque. */ --star: var(--brand-deep); /* ── Couleur : etats ─────────────────────────────────────────────────── */ /* Desatures pour cohabiter avec l'or sans jurer. */ --danger: #E2646A; --warning: #D9A54C; --success: #6FB49A; --info: #7FA8D9; /* ── Surfaces & bordures ─────────────────────────────────────────────── */ --surface-glass: linear-gradient(180deg, rgba(20, 26, 46, 0.92), rgba(11, 16, 32, 0.94)); --surface-glass-light: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); /* --border-glass : separation purement decorative, hors exigence de contraste. --border-strong : contour de composant interactif (champ, bouton contour). WCAG 1.4.11 impose 3:1 pour ces contours. A 0.26 le composite tombait a 2.35:1 ; 0.46 donne 3.30:1 sur le fond de page. */ --border-glass: rgba(223, 201, 143, 0.16); --border-strong: rgba(223, 201, 143, 0.44); /* ── Typographie ─────────────────────────────────────────────────────── */ /* Contraste serif/sans : le marqueur typographique du luxe le plus lisible. Playfair Display pour les titres, Inter pour la lecture courante. Playfair etait deja chargee par l'app VIP : aucune police en plus. */ --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family: var(--font-sans); /* Echelle fluide en rem : un clamp() en px ignore la taille de police choisie par l'utilisateur dans son navigateur (accessibilite). */ --text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --text-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.38rem + 0.60vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.65rem + 1.10vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.85rem + 2.00vw, 3.5rem); --text-5xl: clamp(2.75rem, 2.00rem + 3.75vw, 4.5rem); --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.65; --leading-relaxed: 1.8; /* Les titres serif supportent un interlettrage legerement negatif ; les capitales d'accroche demandent au contraire de l'air. */ --tracking-display: -0.015em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Espacement ──────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Le luxe se lit surtout dans l'air : rythme vertical genereux. */ --section-y: clamp(4rem, 3rem + 5vw, 7rem); --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem); --container-max: 78rem; /* ── Rayons ──────────────────────────────────────────────────────────── */ /* Volontairement sobres : les grands arrondis lisent "consumer app". 14 valeurs en dur coexistaient, dont 999px ET 9999px pour la pilule. */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-pill: 9999px; --radius-circle: 50%; /* ── Ombres ──────────────────────────────────────────────────────────── */ /* Sur fond sombre, une ombre noire ne se voit pas : la profondeur vient d'un filet clair en haut de surface, pas d'un flou porte. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-lift: 0 28px 64px rgba(0, 0, 0, 0.55); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-focus: 0 0 0 3px var(--brand-tint-32); /* ── Mouvement ───────────────────────────────────────────────────────── */ /* Transitions un peu plus lentes : la precipitation lit "bon marche". */ --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 520ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Profondeur ──────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ── Titres en serif ────────────────────────────────────────────────────── Applique globalement pour que la refonte porte sur les 22 pages sans toucher chaque gabarit. */ h1, h2, h3, .hero-title, .section-title, .cta-title { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); } /* h4 a h6 restent en sans : ce sont des intertitres fonctionnels (libelles de pied de page, sous-blocs), pas des accroches. */ /* ── Accessibilite : respect de la preference de mouvement ───────────────── prefers-reduced-motion etait absent des 4 feuilles de style. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }