/* ============================================================
   Boutons flottants de contact — Téléphone + WhatsApp
   ============================================================
   Nouveau par rapport aux sites sources : team-maohi n'avait que
   WhatsApp, chez-vallau que le téléphone. Ici les deux se
   combinent proprement dans un empilement vertical bas-droite au
   lieu de se marcher dessus.

   Variables requises (mappe-les sur la palette du site) :
     --fab-primary        couleur du bouton "Appeler" (= couleur de marque)
     --fab-primary-dark   nuance hover du bouton "Appeler"
   Le vert WhatsApp (#25d366) est une couleur de marque WhatsApp
   FIXE — ne pas la tokeniser, elle ne doit jamais changer avec le
   thème du site.

   Si un seul canal de contact existe, ne monte que le <a> correspondant
   dans le HTML : le CSS s'adapte automatiquement (pas de gap fantôme).
   ============================================================ */

.contact-fabs {
    position: fixed; right: 20px; bottom: 20px; z-index: 1150;
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 14px;
    transition: bottom .3s ease;
}

.fab {
    position: relative;
    display: inline-flex; align-items: center; gap: 0;
    height: 60px; padding: 0; border-radius: 999px;
    overflow: hidden; text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14);
    transition: box-shadow .3s ease, transform .2s ease, opacity .25s ease;
}
.fab-icon {
    width: 34px; margin: 0 13px; flex-shrink: 0; position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
}
.fab-icon svg { width: 100%; height: 100%; display: block; }
.fab-label {
    max-width: 0; white-space: nowrap; color: #fff; font-weight: 700; font-size: 15px;
    opacity: 0; overflow: hidden; position: relative; z-index: 1;
    transition: max-width .34s cubic-bezier(.16,.8,.3,1), opacity .26s ease, margin .34s ease;
}
.fab:hover .fab-label, .fab:focus-visible .fab-label { max-width: 220px; opacity: 1; margin-right: 20px; }
.fab:hover .fab-icon, .fab:focus-visible .fab-icon { margin-right: 6px; }
.fab:focus-visible { outline: none; }

.fab-pulse {
    position: absolute; inset: 0; border-radius: 999px; z-index: 0;
    animation: fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* Bouton Appeler — couleur de marque du site */
.fab--call { background: var(--fab-primary); }
.fab--call .fab-pulse { background: var(--fab-primary); }
.fab--call:hover, .fab--call:focus-visible {
    background: var(--fab-primary-dark);
    box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 6px 14px rgba(0,0,0,.18);
}

/* Bouton WhatsApp — vert de marque WhatsApp, fixe (jamais thémé) */
.fab--whatsapp { background: #25d366; }
.fab--whatsapp .fab-pulse { background: #25d366; }
.fab--whatsapp:hover, .fab--whatsapp:focus-visible {
    background: #1ebe5b;
    box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 6px 14px rgba(0,0,0,.18);
}

/* On masque tout l'empilement pendant une bannière cookies / PWA-install en bas d'écran,
   pour ne jamais superposer deux couches d'UI flottantes.
   Adapte les sélecteurs #cookie-banner / .pwa-install à ton site. */
body:has(#cookie-banner.is-visible) .contact-fabs,
body:has(.pwa-install.is-visible) .contact-fabs { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
    /* Remonte au-dessus de la bottom navbar mobile (voir header.css) */
    .contact-fabs { right: 16px; bottom: calc(70px + env(safe-area-inset-bottom) + 12px); }
    .fab { height: 56px; }
    .fab-icon { width: 30px; margin: 0 13px; }
    .fab:hover .fab-label, .fab:focus-visible .fab-label { max-width: 0; opacity: 0; margin-right: 0; }
    .fab:hover .fab-icon, .fab:focus-visible .fab-icon { margin-right: 13px; }
}
@media (prefers-reduced-motion: reduce) { .fab-pulse { display: none; } }