/**
 * FONTS SYSTEM - Système centralisé de polices
 * Version: PROFESSIONNEL ÉLÉGANT
 * 
 * Palette de polices : Inter (corps de texte) + Montserrat (titres)
 * Élégant, moderne, professionnel et excellent contraste
 */

/* Import des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root {
    /* ============================================
       📝 PALETTE DE POLICES PROFESSIONNELLES
       ============================================ */
    
    /* Police pour texte courant - Inter (excellente lisibilité) */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
                    'Helvetica Neue', sans-serif;
    
    /* Police pour titres - Montserrat (impact visuel fort) */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 
                    'Segoe UI', Roboto, sans-serif;
    
    /* Police mono - Technique mais lisible */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    
    /* Police alternative - Pour citations ou accent */
    --font-alt: 'Inter', Georgia, 'Times New Roman', Times, serif;
    
    
    /* ============================================
       📏 ÉCHELLE TYPOGRAPHIQUE ÉLÉGANTE
       ============================================ */
    
    /* Taille de base légèrement augmentée pour meilleure lisibilité */
    --text-base: 17px;
    
    /* Échelle modulaire - 1.25 (perfect fourth) pour harmonie */
    --text-xs: 0.75rem;     /* 12.75px */
    --text-sm: 0.875rem;    /* 14.875px */
    --text-base: 1rem;      /* 17px */
    --text-md: 1.125rem;    /* 19.125px */
    --text-lg: 1.25rem;     /* 21.25px */
    --text-xl: 1.5rem;      /* 25.5px */
    --text-2xl: 1.875rem;   /* 31.875px */
    --text-3xl: 2.25rem;    /* 38.25px */
    --text-4xl: 3rem;       /* 51px */
    --text-5xl: 3.75rem;    /* 63.75px */
    
    
    /* ============================================
       📐 HAUTEURS DE LIGNE OPTIMISÉES
       ============================================ */
    
    --leading-none: 1;
    --leading-tight: 1.2;       /* Titres */
    --leading-snug: 1.375;      /* Sous-titres */
    --leading-normal: 1.6;      /* Corps de texte */
    --leading-relaxed: 1.75;    /* Paragraphes longs */
    --leading-loose: 2;         /* Citations */
    
    
    /* ============================================
       🎨 GRAISSES DE POLICE RAFFINÉES
       ============================================ */
    
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    
    /* ============================================
       🔤 ESPACEMENT DES LETTRES SUBTIL
       ============================================ */
    
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
}

/* ============================================
   🎨 APPLICATION DES STYLES PROFESSIONNELS
   ============================================ */

/* 1. RÉINITIALISATION ÉLÉGANTE */
html {
    font-size: var(--text-base);
    font-family: var(--font-primary);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 2. CORPS DE TEXTE - INTER (excellente lisibilité) */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: #1a202c; /* Gris anthracite pour contraste optimal */
}

/* 3. TITRES - MONTSEERRAT (impact visuel) */
h1, .h1, .hero-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: #2d3748; /* Gris foncé */
    margin-bottom: 0.5em;
}

h2, .h2, .section-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: #2d3748;
    margin-bottom: 0.75em;
}

h3, .h3, .service-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: #2d3748;
    margin-bottom: 0.5em;
}

h4, .h4 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    color: #4a5568;
}

/* 4. TEXTE COURANT - INTER (lisibilité optimale) */
p, .text-body, .service-desc, .contact-lead, .section-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: #4a5568; /* Gris moyen pour contraste doux */
    margin-bottom: 1.25em;
}

/* 5. TEXTE SECONDRAIRE */
.small-text, .legal-text, .footer-bottom p {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: #718096; /* Gris clair */
}

/* 6. BOUTONS - STYLE PROFESSIONNEL */
.btn, .button, .phone-btn, .contact-phone-large {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: none; /* Plus professionnel que uppercase */
    text-decoration: none;
}

/* Boutons principaux accentuent la graisse */
.btn-primary, .btn-secondary, .phone-btn {
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
}

/* 7. LIENS - STYLE SOBRE */
a, .footer-links a, .footer-legal a {
    font-family: var(--font-primary);
    font-size: inherit;
    font-weight: var(--font-medium);
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #4299e1; /* Bleu professionnel au hover */
    text-decoration: underline;
}

/* 8. FORMULAIRES - LISIBILITÉ OPTIMALE */
input, textarea, select {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: #2d3748;
}

::placeholder {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: #a0aec0;
    opacity: 1;
}

/* 9. LISTES - ESPACEMENT AMÉLIORÉ */
ul, ol {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: #4a5568;
}

li {
    margin-bottom: 0.75em;
}

/* 10. ÉLÉMENTS SPÉCIFIQUES AVEC STYLE ÉLÉGANT */

/* Héro - MISE EN VALEUR */
.hero-title {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tighter);
}

.hero-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.95); /* Pour contraste sur fond coloré */
}

.hero-response {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
}

/* Indicateurs urgence */
.urgence-indicators .indicator {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
}

/* Prix services - MISE EN VALEUR */
.service-price {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-normal);
    color: #2d3748;
}

/* Badges - STYLE FORT */
.hero-badge, .service-badge {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Footer - SOBRE ET PROFESSIONNEL */
.footer h3, .footer h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: #ffffff;
}

.footer p, .footer-address, .footer-hours {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-light);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.9);
}

.footer-links a {
    font-weight: var(--font-normal);
}

/* ============================================
   📱 RESPONSIVE RAFFINÉ
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --text-base: 16px;
    }
    
    h1, .h1, .hero-title {
        font-size: var(--text-3xl);
    }
    
    h2, .h2, .section-title {
        font-size: var(--text-2xl);
    }
    
    h3, .h3, .service-title {
        font-size: var(--text-xl);
    }
}

@media (max-width: 768px) {
    :root {
        --text-base: 16px;
    }
    
    h1, .h1, .hero-title {
        font-size: var(--text-2xl);
        letter-spacing: var(--tracking-normal);
    }
    
    h2, .h2, .section-title {
        font-size: var(--text-xl);
    }
    
    h3, .h3, .service-title {
        font-size: var(--text-lg);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg);
    }
    
    p, .text-body {
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }
    
    .btn, .phone-btn {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    h1, .h1, .hero-title {
        font-size: var(--text-xl);
    }
    
    h2, .h2, .section-title {
        font-size: var(--text-lg);
    }
    
    .hero-badge {
        font-size: var(--text-xs);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }
}

/* ============================================
   🎯 CLASSES UTILITAIRES POUR FLEXIBILITÉ
   ============================================ */

/* Familles de police */
.font-primary { font-family: var(--font-primary) !important; }
.font-heading { font-family: var(--font-heading) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.font-alt { font-family: var(--font-alt) !important; }

/* Tailles */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md { font-size: var(--text-md) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }

/* Graisses */
.font-light { font-weight: var(--font-light) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }
.font-extrabold { font-weight: var(--font-extrabold) !important; }

/* Hauteur de ligne */
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-snug { line-height: var(--leading-snug) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose { line-height: var(--leading-loose) !important; }

/* Espacement */
.tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }

/* ============================================
   💾 OPTIONS ALTERNATIVES (commentées)
   ============================================ */

/*
OPTION A : CLASSIQUE BUSINESS
---------------------------------
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    --font-primary: 'Roboto', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-alt: 'Roboto', sans-serif;
}

OPTION B : LUXE / PREMIUM
--------------------------
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
    --font-primary: 'Lato', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-mono: 'Courier New', monospace;
    --font-alt: 'Playfair Display', serif;
}

OPTION C : TECH / MODERNE
--------------------------
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&family=IBM+Plex+Sans:wght@500;600;700&display=swap');

:root {
    --font-primary: 'Source Sans Pro', sans-serif;
    --font-heading: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-alt: 'Source Sans Pro', sans-serif;
}
*/

/* ============================================
   ✅ POURQUOI CETTE COMBINAISON ?
   ============================================ */

/*
INTER (texte courant) :
- Excellente lisibilité à toutes tailles
- Hauteur x optimale pour le français
- Support complet des caractères spéciaux
- Très bon rendu sur écrans

MONTSEERRAT (titres) :
- Design géométrique moderne
- Fort impact visuel
- Élégant et professionnel
- Parfait pour les titres et CTAs

BÉNÉFICES DE CETTE COMBINAISON :
1. Hiérarchie claire entre titres et texte
2. Excellente accessibilité (contraste AA/AAA)
3. Chargement rapide (polices optimisées)
4. Aspect professionnel et moderne
5. Parfait pour tous les métiers techniques
*/