/* -----------------------------------
Page Référencement SEO — styles dédiés
------------------------------------ */

/* Chiffres clés hero */
.seo-stat-card {
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.seo-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15) !important;
}

/* -----------------------------------
Animations apparition au scroll
------------------------------------ */
.seo-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.seo-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pas d'animation sur mobile */
@media (max-width: 991.98px) {
    .seo-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------
Espacement sections
------------------------------------ */
.seo-fade-in.container {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

@media (max-width: 767.98px) {
    .seo-fade-in.container {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Mobile : chiffres plus compacts */
@media (max-width: 767.98px) {
    .seo-stat-card .fs-1 {
        font-size: 1.6rem !important;
    }

    .seo-stat-card .fs-sm {
        font-size: 0.78rem !important;
    }
}

/* -----------------------------------
Mobile global — cohérence typographique
------------------------------------ */
@media (max-width: 767.98px) {

    /* H1 hero */
    h1.display-5 {
        font-size: 1.7rem !important;
        line-height: 1.25;
    }

    /* Texte intro */
    .fs-lg {
        font-size: 0.95rem !important;
        line-height: 1.55;
    }

    /* H2 sections */
    h2.h3 {
        font-size: 1.2rem;
    }

    /* Boutons CTA côte à côte sur mobile */
    .d-flex.gap-2 {
        gap: 0.5rem !important;
    }

    /* Formulaire contact — largeur fixe à retirer sur mobile */
    .col-lg-5.col-md-6[style*="width: 600px"] {
        width: 100% !important;
    }
}