/* ============================================================
   FAB (Floating Action Button)
   Bouton flottant en bas-droite.

   Comportement responsive :
   - Sur device avec hover (desktop, souris/trackpad) : étendu en
     permanence (icône + texte). Évite le bug d'oscillation des
     transitions de taille au hover.
   - Sur device tactile (mobile, tablette) : compact (icône seule).
     L'aria-label assure l'accessibilité, le tap ouvre la modale.

   Pattern responsive UX.
   ============================================================ */


/* ============================================================
   BASE — Mobile-first (compact par défaut)
   ============================================================ */

.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 40;

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

    height: 3.5rem;
    width: 3.5rem;
    padding: 0;
    border-radius: 9999px;

    background-color: var(--color-primary);
    color: var(--color-bg);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease,
                box-shadow 0.2s ease,
                transform 0.1s ease;
}

.fab:hover {
    filter: brightness(0.92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.fab:active {
    transform: translateY(1px);
    filter: brightness(0.88);
}

.fab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

html.dark .fab {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html.dark .fab:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   ICÔNE
   ============================================================ */

.fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.fab-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}


/* ============================================================
   LABEL (texte)
   Caché par défaut (mobile/tactile), affiché sur desktop via
   @media (hover: hover) ci-dessous.
   ============================================================ */

.fab-label {
    display: none;
    font-weight: 500;
    font-size: 0.9375rem;
}


/* ============================================================
   DESKTOP (souris/trackpad : capable de hover)
   FAB toujours étendu, label toujours visible.
   ============================================================ */

@media (hover: hover) {

    .fab {
        width: auto;
        padding: 0 1.5rem;
        gap: 0.625rem;
    }

    .fab-label {
        display: inline;
    }

}