/* ===========================================================================
   Bouton WhatsApp flottant
   ---------------------------------------------------------------------------
   Feuille autonome : le bouton est present sur les deux gabarits du site, qui
   n'ont pas la meme base de style (Bootstrap pour le catalogue et le
   back-office, CSS maison pour la page d'accueil). Toutes les proprietes sont
   donc declarees ici, sans rien attendre de l'exterieur.

   Empilement : z-index 190, soit au-dessus de l'en-tete collante (80) mais
   sous la visionneuse de la galerie (200), qui doit pouvoir le recouvrir.
   =========================================================================== */

.wa-flottant {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 190;

    display: inline-flex;
    align-items: center;
    gap: 0;

    height: 60px;
    padding: 0 15px;
    border-radius: 999px;

    background: #25d366;
    color: #06301b;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgb(6 48 27 / .5), 0 2px 6px rgb(0 0 0 / .12);

    transition: gap .3s cubic-bezier(.2, .7, .3, 1),
                padding .3s cubic-bezier(.2, .7, .3, 1),
                background .25s, box-shadow .25s, transform .2s;
}

.wa-flottant:hover,
.wa-flottant:focus-visible {
    background: #1fbe58;
    color: #06301b;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgb(6 48 27 / .6), 0 2px 6px rgb(0 0 0 / .14);
}

.wa-flottant svg {
    flex: 0 0 auto;
    display: block;
}

/* Le libelle est replie par defaut et se deploie au survol : le bouton reste
   discret tout en restant explicite pour qui l'approche. */
.wa-flottant-texte {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    opacity: 0;
    transition: max-width .3s cubic-bezier(.2, .7, .3, 1), opacity .25s;
}

.wa-flottant:hover .wa-flottant-texte,
.wa-flottant:focus-visible .wa-flottant-texte {
    max-width: 220px;
    opacity: 1;
}

.wa-flottant:hover,
.wa-flottant:focus-visible {
    gap: 10px;
    padding-right: 22px;
}

@media (max-width: 680px) {
    .wa-flottant {
        right: 16px;
        bottom: 16px;
        height: 54px;
        padding: 0 13px;
    }

    /* Au doigt il n'y a pas de survol : le libelle resterait ouvert apres le
       premier appui. On garde la pastille seule. */
    .wa-flottant-texte { display: none; }
    .wa-flottant:hover { gap: 0; padding-right: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-flottant, .wa-flottant-texte { transition: none; }
    .wa-flottant:hover { transform: none; }
}

@media print {
    .wa-flottant { display: none; }
}