/* ============================================================
   Webreactiv' — styles complémentaires (Tailwind Play CDN)
   ============================================================ */

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

/* Hero full-bleed : l'image est fournie en style inline (chemin relatif) */
.hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Survol des cartes de services / projets */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Pulsation (bouton WhatsApp) */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 94, 91, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 94, 91, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 94, 91, 0);
    }
}

/* Pastille flottante (badge sur image) */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* Entrée du hero en cascade */
.hero-reveal {
    opacity: 0;
    transform: translateY(22px);
    animation: heroReveal 0.7s ease forwards;
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Apparition au scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Focus visible pour l'accessibilité */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(255, 94, 91, 0.55);
    outline-offset: 2px;
}