/**
 * Système de typographie fluide et responsive
 * Utilise clamp() pour des tailles de police fluides
 */

:root {
    /* Typographie fluide pour les titres */
    --h1-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    --h2-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
    --h3-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
    --h4-size: clamp(1.25rem, 2.5vw + 0.25rem, 1.75rem);
    --h5-size: clamp(1.1rem, 2vw + 0.25rem, 1.5rem);
    --h6-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
    
    /* Typographie fluide pour le contenu */
    --text-large: clamp(1.1rem, 1.5vw + 0.25rem, 1.5rem);
    --text-base: clamp(0.95rem, 1vw + 0.25rem, 1.1rem);
    --text-small: clamp(0.85rem, 0.75vw + 0.25rem, 0.95rem);
    --text-tiny: clamp(0.75rem, 0.5vw + 0.25rem, 0.85rem);
    
    /* Espacement fluide */
    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --spacing-sm: clamp(0.5rem, 1vw, 1rem);
    --spacing-md: clamp(1rem, 2vw, 1.5rem);
    --spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
    --spacing-xl: clamp(2rem, 5vw, 4rem);
    --spacing-2xl: clamp(3rem, 8vw, 6rem);
    
    /* Hero section fluid */
    --hero-title: clamp(2.5rem, 8vw + 1rem, 5rem);
    --hero-subtitle: clamp(1.25rem, 3vw + 0.5rem, 2rem);
    --hero-button: clamp(1rem, 2vw + 0.5rem, 1.75rem);
}

/* Application de la typographie fluide */
h1, .h1 {
    font-size: var(--h1-size);
    line-height: 1.2;
}

h2, .h2 {
    font-size: var(--h2-size);
    line-height: 1.3;
}

h3, .h3 {
    font-size: var(--h3-size);
    line-height: 1.3;
}

h4, .h4 {
    font-size: var(--h4-size);
    line-height: 1.4;
}

h5, .h5 {
    font-size: var(--h5-size);
    line-height: 1.4;
}

h6, .h6 {
    font-size: var(--h6-size);
    line-height: 1.5;
}

/* Classes utilitaires pour le texte */
.text-large {
    font-size: var(--text-large);
}

.text-base {
    font-size: var(--text-base);
}

.text-small {
    font-size: var(--text-small);
}

.text-tiny {
    font-size: var(--text-tiny);
}

/* Espacement utilitaire */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }

/* Application au hero */
.hero-text h1,
.hero-text .hero-title {
    font-size: var(--hero-title);
}

.hero-text p,
.hero-subtitle {
    font-size: var(--hero-subtitle);
}

.start-button {
    font-size: var(--hero-button);
    padding: clamp(10px, 2vw, 15px) clamp(15px, 3vw, 25px);
}

/* Responsive container fluide */
.container-fluid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 3rem);
}

/* Grille responsive fluide */
.grid-fluid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid-2-cols {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-3-cols {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid-4-cols {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Breakpoints pour ajustements fins */
@media (max-width: 1200px) {
    :root {
        --spacing-2xl: clamp(2rem, 6vw, 4rem);
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-xl: clamp(1.5rem, 4vw, 2.5rem);
        --spacing-2xl: clamp(2rem, 5vw, 3rem);
    }
    
    .grid-3-cols,
    .grid-4-cols {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: clamp(1rem, 2.5vw, 1.5rem);
        --spacing-xl: clamp(1.25rem, 3vw, 2rem);
        --spacing-2xl: clamp(1.5rem, 4vw, 2.5rem);
    }
    
    .grid-2-cols,
    .grid-3-cols,
    .grid-4-cols {
        grid-template-columns: 1fr;
    }
}

/* Classes d'animation pour scroll-reveal */
.scroll-reveal {
    opacity: 0;
}

.scroll-reveal.revealed {
    opacity: 1;
}

/* Variantes d'animation prédéfinies */
.scroll-reveal-fast {
    transition-duration: 400ms !important;
}

.scroll-reveal-slow {
    transition-duration: 900ms !important;
}

.scroll-reveal-bounce {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.scroll-reveal-smooth {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Effets de fade spéciaux */
.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

.fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}