/**
 * Styles pour le bouton WhatsApp flottant
 */
.floating-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    /* vert WhatsApp */
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    /* En dessous de la navbar (1000) et du menu mobile (1200-1201) mais au-dessus du contenu */
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}

.floating-whatsapp svg {
    width: 28px;
    height: 28px;
    display: block;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    outline: none;
}

/* Animation douce (désactivée si l'utilisateur préfère réduire) */
@media (prefers-reduced-motion: no-preference) {
    .floating-whatsapp {
        animation: pulse 2.5s infinite ease-in-out;
    }

    @keyframes pulse {
        0%,
        100% {
            box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
        }

        50% {
            box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
        }
    }
}

/* Optionnel : petite étiquette sur desktop */
@media (min-width: 992px) {
    .floating-whatsapp::after {
        content: "WhatsApp";
        position: absolute;
        right: 64px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #fff;
        color: #111;
        font: 500 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
        opacity: 0;
        transform: translateX(6px);
        pointer-events: none;
        transition: .15s ease;
        white-space: nowrap;
    }

    .floating-whatsapp:hover::after,
    .floating-whatsapp:focus-visible::after {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Classe pour le texte accessible aux lecteurs d'écran uniquement */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Masquer sur très petits écrans si nécessaire
@media (max-width: 360px){ .floating-whatsapp{ display:none; } } */