/* ════════════════════════════════════════════════════════════════════════ VARIABLES — Front Office TCA Industries ───────────────────────────────────────────────────────────────────── Charte graphique officielle Luciole Studio 2024. 4 couleurs de marque : Anthracite, Bleu Pétrole, Doré, Blanc. 2 polices : Urbanist (body) + Kaelia (titres). Surcharge des tokens globaux définis dans variables.css. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Couleurs de marque officielles ──────────────────────────────── */ /* Décision client juin 2026 : le bleu pétrole devient la couleur PRIMAIRE (était anthracite), le doré la SECONDAIRE. Quasi-zéro noir/anthracite. Les variables --tca-anthracite sont gardées pour compatibilité mais pointent désormais sur petrol pour propager la nouvelle identité sur tous les composants existants sans toucher 50 lignes de CSS. */ --tca-primary: #0D4156; /* bleu pétrole — couleur principale */ --tca-secondary: #D8AB65; /* doré — couleur secondaire */ --tca-anthracite: #0D4156; /* alias de --tca-primary (rétrocompat) */ --tca-petrol: #0D4156; --tca-gold: #D8AB65; --tca-white: #FFFFFF; /* ── Variations utilitaires (dérivées, ne pas inventer d'autres) ── */ --tca-petrol-light: #1A5972; --tca-petrol-dark: #062F3F; --tca-gold-light: #E4BD83; --tca-gold-dark: #BE9550; --tca-anthracite-light: #1A5972; /* alias petrol-light (rétrocompat) */ /* ── Gris fonctionnels (UI uniquement, hors charte) ──────────────── */ --tca-gray-50: #F8F8F8; --tca-gray-100: #EEEEEE; --tca-gray-200: #DDDDDD; --tca-gray-300: #C5C5C5; --tca-gray-400: #999999; --tca-gray-500: #777777; --tca-gray-600: #555555; --tca-gray-700: #3A3B3B; /* ── État erreur (formulaires, validation) ──────────────────────── */ --tca-error: #DC2626; --tca-error-bg: #FEF2F2; --tca-success: #16A34A; --tca-success-bg: #F0FDF4; /* ── Typographies ────────────────────────────────────────────────── */ --tca-font-body: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --tca-font-heading: 'Kaelia', 'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ── Tailles de police (mobile-first, ajustées en media query) ──── */ --tca-fs-h1: 2rem; /* 32px mobile */ --tca-fs-h2: 1.6rem; /* 26px mobile */ --tca-fs-h3: 1.25rem; /* 20px mobile */ --tca-fs-h4: 1.125rem; /* 18px mobile */ --tca-fs-body: 1rem; /* 16px */ --tca-fs-small: 0.875rem; /* 14px */ --tca-fs-eyebrow: 0.75rem; /* 12px uppercase */ /* ── Espacements (rythme vertical 8px) ──────────────────────────── */ --tca-space-1: 0.25rem; /* 4px */ --tca-space-2: 0.5rem; /* 8px */ --tca-space-3: 0.75rem; /* 12px */ --tca-space-4: 1rem; /* 16px */ --tca-space-5: 1.5rem; /* 24px */ --tca-space-6: 2rem; /* 32px */ --tca-space-7: 3rem; /* 48px */ --tca-space-8: 5rem; /* 80px */ --tca-space-9: 7.5rem; /* 120px */ /* ── Header ───────────────────────────────────────────────────────── */ /* Décalage haut du drawer mobile. Valeur de repli uniquement : le script de _nav.html.twig la remplace par la hauteur réellement mesurée du header, qui dépend du logo et ne peut donc pas être figée ici sans risquer de recouvrir le haut du header (c'était le cas avec l'ancien 64px). */ --tca-header-h-mobile: 111px; /* ── Conteneur ────────────────────────────────────────────────────── */ --tca-container-max: 1500px; /* +300 vs 1200 : moins de marges sur écrans larges */ --tca-container-pad-mobile: 1.25rem; /* 20px */ --tca-container-pad-tablet: 2rem; /* 32px */ --tca-container-pad-desktop: 3rem; /* 48px (au lieu de 80px) */ /* ── Border-radius — style carré / industriel ─────────────────────── */ /* Petits/moyens unifiés à 6px (industriel, sobre). XL réservé aux gros wrappers (sections gris, testimonials) → 18px pour donner de la douceur aux grandes formes. */ --tca-radius-sm: 3px; --tca-radius: 6px; --tca-radius-md: 6px; --tca-radius-lg: 6px; --tca-radius-xl: 18px; --tca-radius-pill: 999px; /* ── Bordures ─────────────────────────────────────────────────────── */ --tca-border: 1px solid var(--tca-gray-100); --tca-border-strong: 1px solid var(--tca-gray-200); /* ── Shadows discrètes ───────────────────────────────────────────── */ --tca-shadow-sm: 0 1px 3px rgba(13, 65, 86, 0.06); --tca-shadow: 0 2px 8px rgba(13, 65, 86, 0.08); --tca-shadow-md: 0 4px 16px rgba(13, 65, 86, 0.10); --tca-shadow-lg: 0 8px 32px rgba(13, 65, 86, 0.12); /* ── Transitions ──────────────────────────────────────────────────── */ --tca-transition: all 0.2s ease; --tca-transition-slow: all 0.3s ease; /* ── Z-index scale ────────────────────────────────────────────────── */ --tca-z-nav: 100; --tca-z-dropdown: 200; --tca-z-modal: 1000; --tca-z-toast: 2000; /* ── Surcharge des tokens globaux (compatibilité moule existant) ── */ --accent: var(--tca-petrol); --accent2: var(--tca-petrol-light); --green: var(--tca-success); --red: var(--tca-error); --orange: var(--tca-gold); --pink: var(--tca-gold-light); --text: var(--tca-anthracite); --muted: var(--tca-gray-500); --bg: var(--tca-white); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: var(--tca-gray-100); --glass-shadow: var(--tca-shadow); --gradient-accent: linear-gradient(135deg, var(--tca-petrol), var(--tca-petrol-light)); --gradient-green: linear-gradient(135deg, var(--tca-success), var(--tca-petrol)); --gradient-red: linear-gradient(135deg, var(--tca-error), var(--tca-gold)); --required: var(--tca-error); } /* ── Tailles desktop ─────────────────────────────────────────────────── */ @media (min-width: 1024px) { :root { --tca-fs-h1: 3rem; /* 48px desktop */ --tca-fs-h2: 2rem; /* 32px desktop */ --tca-fs-h3: 1.5rem; /* 24px desktop */ --tca-fs-h4: 1.25rem; /* 20px desktop */ --tca-fs-eyebrow: 0.875rem; /* 14px uppercase */ } }