/**
 * Typography Global — d314.io
 * Design System V5 — palette sombre violette/cyan
 *
 * Chargé sur toutes les pages.
 * Polices chargées globalement via functions.php : Plus Jakarta Sans, JetBrains Mono
 */

/* ========================================
   VARIABLES V5
   ======================================== */
:root {
    /* Familles */
    --font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Texte */
    --color-text-primary:   #e6e8f6;
    --color-text-secondary: #8486a4;
    --color-text-muted:     #4a4c68;

    /* Accent */
    --color-accent: #6366f1;

    /* Poids */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* Tailles titres */
    --title-hero:       56px;
    --title-primary:    48px;
    --title-section:    42px;
    --title-subsection: 32px;
    --title-card:       24px;
    --title-small:      20px;

    /* Tailles corps */
    --text-large:  24px;
    --text-medium: 18px;
    --text-base:   16px;
    --text-small:  15px;
    --text-tiny:   14px;
    --text-xs:     13px;
    --text-sm:     12px;
    --text-xxs:    11px;

    /* Line-heights */
    --lh-tight:   1.1;
    --lh-normal:  1.2;
    --lh-relaxed: 1.5;
    --lh-loose:   1.6;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    :root {
        --title-hero:       48px;
        --title-primary:    40px;
        --title-section:    34px;
        --title-subsection: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --title-hero:       36px;
        --title-primary:    30px;
        --title-section:    26px;
        --title-subsection: 22px;
        --title-card:       20px;
        --text-base:        15px;
        --text-small:       14px;
    }
}

@media (max-width: 480px) {
    :root {
        --title-hero:       30px;
        --title-primary:    26px;
        --title-section:    22px;
        --title-subsection: 20px;
    }
}

/* ========================================
   BASE GLOBALE
   ======================================== */

body {
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--lh-loose);
    color: var(--text-primary);
}

/* ========================================
   TITRES HIÉRARCHIQUES
   ======================================== */

.title-hero {
    font-family: var(--font-family-primary);
    font-size: clamp(36px, 6vw, var(--title-hero));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.title-hero-gradient {
    font-family: var(--font-family-primary);
    font-size: clamp(36px, 6vw, var(--title-hero));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #e6e8f6 0%, #8486a4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-primary {
    font-family: var(--font-family-primary);
    font-size: clamp(28px, 5vw, var(--title-primary));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.title-section {
    font-family: var(--font-family-primary);
    font-size: clamp(24px, 4vw, var(--title-section));
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-normal);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.title-subsection {
    font-family: var(--font-family-primary);
    font-size: clamp(20px, 3vw, var(--title-subsection));
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-normal);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.title-card {
    font-family: var(--font-family-primary);
    font-size: clamp(18px, 2.5vw, var(--title-card));
    font-weight: var(--font-weight-semibold);
    line-height: var(--lh-normal);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.title-small {
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 2vw, var(--title-small));
    font-weight: var(--font-weight-semibold);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

/* ========================================
   SOUS-TITRES
   ======================================== */

.subtitle {
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 2vw, var(--text-large));
    font-weight: var(--font-weight-normal);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.subtitle-accent {
    font-family: var(--font-family-primary);
    font-size: clamp(15px, 1.8vw, var(--text-medium));
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-relaxed);
    color: var(--color-accent);
}

.label {
    font-family: var(--font-family-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   CORPS DE TEXTE
   ======================================== */

.text-large {
    font-family: var(--font-family-primary);
    font-size: clamp(18px, 2vw, var(--text-large));
    line-height: var(--lh-relaxed);
    color: var(--text-primary);
    font-weight: var(--font-weight-normal);
}

.text-medium {
    font-family: var(--font-family-primary);
    font-size: clamp(15px, 1.8vw, var(--text-medium));
    line-height: var(--lh-loose);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.text-base {
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    line-height: var(--lh-loose);
    color: var(--text-primary);
    font-weight: var(--font-weight-normal);
}

.text-small {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.text-tiny {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.text-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* ========================================
   VARIANTES DE COULEUR
   ======================================== */

.text-primary   { color: var(--color-accent) !important; }
.text-white     { color: var(--text-primary) !important; }
.text-gray      { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }

/* ========================================
   VARIANTES DE POIDS
   ======================================== */

.font-regular  { font-weight: var(--font-weight-normal) !important; }
.font-medium   { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold     { font-weight: var(--font-weight-bold) !important; }

/* ========================================
   EFFETS
   ======================================== */

.text-gradient {
    background: linear-gradient(135deg, #e6e8f6 0%, #8486a4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-color {
    background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   UTILITAIRES
   ======================================== */

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.text-balance  { text-wrap: balance; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ========================================
   H1 UNIFIÉ — TOUTES LES PAGES V5
   Override Elementor kit
   ======================================== */

.page-section-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(26px, 4vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: #e6e8f6 !important;
}

.page-hero-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(34px, 6vw, 64px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: #e6e8f6 !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}