/* الخطوط تُحمّل عبر في كل صفحة، وليس هنا، للأداء. */
/* Les polices sont chargées via dans le de chaque page
(voir assets/css/FONTS.md), jamais par @import. */
/* ============================================================
TOUITIGROUP — tokens.css
Source unique des variables de design (couleurs, polices,
espacements, rayons, motion). Aucun sélecteur de composant ici.
Préfixes :
--tg-* partagé par toutes les pages
--service-* réservé aux pages service (défini dans service.css)
--home-* réservé à la page d'accueil
Ordre de chargement recommandé dans le :
1. tokens.css 2. base.css 3. service.css (ou home.css)
Valeurs de couleur : reprises de COLOR_TOKENS.md (palette réelle
du site). Seules nouveautés validées : gold-text et gold-hover.
============================================================ */
/* ------------------------------------------------------------
Breakpoints (documentation uniquement — les custom properties
ne sont pas utilisables dans @media).
Nouveaux composants (mobile-first) : @media (min-width: ).
Composants hérités (desktop-first) : @media (max-width: ).
--bp-sm : 640px mobile
--bp-md : 768px tablette portrait
--bp-lg : 1024px tablette paysage / petit laptop
--bp-xl : 1280px desktop
Exemple : @media (max-width: 768px) { … } ← = --bp-md
------------------------------------------------------------ */
:root {
/* ===== COULEURS — Or (marque) ===== */
--tg-color-gold: #c9a84c; /* accents, bordures, icônes, texte sur fond noir */
--tg-color-gold-text: #7a5f1a; /* texte or sur fond clair (ivoire/blanc) — contraste 5.50 sur ivoire */
--tg-color-gold-hover: #b8963f; /* état hover des éléments or */
--tg-color-gold-light: rgba(201, 168, 76, 0.1); /* fonds teintés légers (callout, hover de ligne) */
--tg-color-gold-highlight: #f5e070; /* fin du dégradé or (ex « gold-light » de identity.css) */
--tg-color-gold-dark: #8a6d1e; /* bordures / grands titres or sur fond clair (contraste 4.46 : pas pour le petit texte) */
--tg-color-gold-gradient: linear-gradient(135deg, #c9a84c, #f5e070); /* boutons CTA, mots en valeur */
/* ===== COULEURS — Fonds ===== */
--tg-color-black: #0a0a0a; /* fond principal du site */
--tg-color-dark: #111111; /* nav, formulaires, surfaces surélevées */
--tg-color-dark-2: #1a1a1a; /* cartes sur fond noir */
--tg-color-ivory: #f7f4ee; /* sections claires UNIQUEMENT */
--tg-color-white: #ffffff; /* cartes sur fond ivoire */
/* ===== COULEURS — Texte ===== */
--tg-color-text: #ffffff; /* texte principal sur fond noir */
--tg-color-text-muted: rgba(255, 255, 255, 0.75); /* paragraphes secondaires */
--tg-color-text-subtle: rgba(255, 255, 255, 0.5); /* notes, légendes, séparateurs */
--tg-color-ink: #201d18; /* texte sur fond clair — contraste 15.3 sur ivoire */
--tg-color-ink-muted: rgba(32, 29, 24, 0.75); /* texte secondaire sur fond clair */
--tg-color-stone: #a39063; /* décoratif uniquement (placeholders) — pas pour du texte */
/* ===== COULEURS — Bordures & overlays ===== */
--tg-color-border: rgba(201, 168, 76, 0.18); /* bordure or discrète */
--tg-color-border-strong: rgba(201, 168, 76, 0.4); /* bordure or marquée, hover */
--tg-color-border-light: #d9d3c6; /* bordure sur fond clair (method-step, trust-item) */
--tg-color-border-ink: rgba(32, 29, 24, 0.1); /* bordure de carte sur fond clair */
--tg-color-overlay: rgba(10, 10, 10, 0.55); /* voile sur photo */
--tg-color-overlay-strong: rgba(10, 10, 10, 0.9); /* voile fort (bas de carte, menu mobile) */
--tg-color-selection: rgba(201, 168, 76, 0.3); /* ::selection */
--tg-color-card-bg: #fafafa; /* fond off-white des cartes fabricants (demande 2026-09-25) */
--tg-color-card-border: rgba(201, 168, 76, 0.25); /* bordure or translucide des cartes fabricants — respecte « jamais de gris » */
/* ===== POLICES ===== */
--tg-font-heading-fr: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--tg-font-body-fr: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--tg-font-heading-ar: 'Cairo', -apple-system, 'Segoe UI', Tahoma, sans-serif;
--tg-font-body-ar: 'Cairo', -apple-system, 'Segoe UI', Tahoma, sans-serif;
/* Graisses chargées (voir FONTS.md) — n'utiliser que celles-ci par police,
sinon le navigateur simule un faux gras :
Inter (FR) : 400, 500, 600, 700, 800
Cairo (AR) : 400, 500, 600, 700, 800
Hiérarchie : h1 800 · h2 700 · h3 600 · texte 400 · nav 500 · boutons 600 */
--tg-weight-light: 300; /* non chargée — conservée pour compatibilité, rendue en 400 */
--tg-weight-regular: 400; /* texte courant */
--tg-weight-medium: 500; /* liens de navigation */
--tg-weight-semibold: 600; /* h3, boutons */
--tg-weight-bold: 700; /* h2, CTA */
--tg-weight-extrabold: 800; /* h1 */
/* Échelle typographique (fluide) */
--tg-text-xs: 0.75rem; /* 12px */
--tg-text-sm: 0.875rem; /* 14px */
--tg-text-base: 1rem; /* 16px */
--tg-text-lg: clamp(1.0625rem, 1.3vw, 1.1875rem); /* 17–19px */
--tg-text-h3: clamp(1.25rem, 1.8vw, 1.5rem); /* 20–24px */
--tg-text-h2: clamp(1.75rem, 3.6vw, 2.75rem); /* 28–44px — Inter est plus large que le serif */
--tg-text-h1: clamp(2.25rem, 5vw, 3.75rem); /* 36–60px */
--tg-leading-tight: 1.1;
--tg-leading-body: 1.7;
/* ===== ESPACEMENTS ===== */
--tg-space-xs: 0.25rem; /* 4px */
--tg-space-sm: 0.5rem; /* 8px */
--tg-space-md: 1rem; /* 16px */
--tg-space-lg: 1.5rem; /* 24px */
--tg-space-xl: 2.5rem; /* 40px */
--tg-space-2xl: 4rem; /* 64px */
/* ===== RAYONS ===== */
--tg-radius-sm: 4px;
--tg-radius-md: 8px;
--tg-radius-lg: 16px;
--tg-radius-full: 999px;
/* ===== LAYOUT ===== */
--tg-container-max: 1200px;
--tg-container-pad: clamp(1.25rem, 5vw, 3.75rem); /* 20–60px */
--tg-prose-max: 47.5rem; /* 760px */
--tg-section-y: clamp(4.5rem, 9vw, 7.5rem); /* 72–120px */
/* ===== OMBRES ===== */
--tg-shadow-card: 0 24px 50px rgba(32, 29, 24, 0.14);
--tg-shadow-gold: 0 12px 36px rgba(201, 168, 76, 0.35);
--tg-shadow-card-soft: 0 12px 28px rgba(32, 29, 24, 0.10); /* ombre légère au survol des cartes claires */
/* ===== MOTION ===== */
--tg-ease: cubic-bezier(0.16, 1, 0.3, 1);
--tg-ease-press: cubic-bezier(0.4, 0, 0.6, 1);
--tg-duration: 0.35s;
/* ===== FOCUS ===== */
--tg-focus-ring: 2px solid var(--tg-color-gold);
--tg-focus-offset: 3px;
/* ===== NAVIGATION ===== */
--tg-nav-h: 72px; /* hauteur de la navbar fixe (réservée en haut de page) */
/* ===== Z-INDEX ===== */
--tg-z-wa-float: 90; /* bouton WhatsApp flottant */
--tg-z-nav: 100; /* navbar fixe */
--tg-z-overlay: 200; /* menu mobile ouvert */
--tg-z-modal: 1000; /* dialogues (politique de confidentialité…) */
/* ===== COMPOSANTS PARTAGÉS ===== */
--tg-card-pad: 2rem; /* 32px — padding intérieur des cartes */
--tg-control-h: 3rem; /* 48px — hauteur mini des boutons (cible tactile) */
--tg-control-h-lg: 3.5rem; /* 56px — .tg-btn--lg */
--tg-wa-size: 3.5rem; /* 56px — diamètre du bouton WhatsApp flottant */
--tg-blur: 14px; /* flou d'arrière-plan (navbar solide, menu mobile) */
--tg-tracking-wide: 0.08em; /* libellés, liens de nav */
--tg-tracking-wider: 0.16em; /* titres de colonnes en capitales */
--tg-duration-slow: 0.8s; /* apparition au scroll (.tg-reveal) */
--tg-duration-fast: 0.12s; /* retour « appui » (:active) */
--tg-icon-size: 1.125rem; /* 18px — icônes dans boutons et réseaux sociaux */
}