/* ==========================================================================
   Bouton WhatsApp flottant (réglages : Admin > Bouton WhatsApp)
   Les valeurs par défaut ci-dessous sont surchargées, élément par élément,
   par le style en ligne (variables --wa-*) généré depuis l'admin.
   Chargé par le site public et par l'aperçu de l'admin.
   ========================================================================== */
.ifps-wa {
    --wa-bg: #25d366;
    --wa-fg: #ffffff;
    --wa-pulse: rgba(37, 211, 102, .45);
    --wa-size: 60px;
    --wa-size-m: 54px;
    --wa-x: 24px;
    --wa-y: 24px;
    --wa-xm: 16px;
    --wa-ym: 16px;
    --wa-z: 9990;
    --wa-shadow: 0 4px 14px rgba(0, 0, 0, .30);
    --wa-radius: 999px;

    position: fixed;
    bottom: calc(var(--wa-y) + env(safe-area-inset-bottom, 0px));
    z-index: var(--wa-z);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 16px);
    font-family: inherit;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.ifps-wa--right { right: calc(var(--wa-x) + env(safe-area-inset-right, 0px)); align-items: flex-end; }
.ifps-wa--left { left: calc(var(--wa-x) + env(safe-area-inset-left, 0px)); align-items: flex-start; }

/* Apparition différée (délai et/ou défilement) : masqué jusqu'à ce que le script le révèle. */
.ifps-wa.is-pending { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; }

.ifps-wa__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--wa-size);
    min-width: var(--wa-size);
    padding: 0;
    overflow: hidden;
    background: var(--wa-bg);
    color: var(--wa-fg);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ifps-wa__btn:hover { transform: scale(1.06); filter: brightness(1.05); color: var(--wa-fg); }
.ifps-wa__btn:active { transform: scale(.97); }
.ifps-wa__btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: var(--wa-shadow), 0 0 0 6px #1d2433; }

.ifps-wa__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--wa-size);
    height: var(--wa-size);
}

.ifps-wa__icon {
    width: calc(var(--wa-size) * .54);
    height: calc(var(--wa-size) * .54);
    fill: currentColor;
}

.ifps-wa__label {
    max-width: 0;
    margin: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: max-width .3s ease, opacity .25s ease, margin .3s ease;
}

.ifps-wa[data-label-mode="always"] .ifps-wa__label,
.ifps-wa[data-label-mode="hover"] .ifps-wa__btn:hover .ifps-wa__label,
.ifps-wa[data-label-mode="hover"] .ifps-wa__btn:focus-visible .ifps-wa__label {
    max-width: 260px;
    margin: 0 22px 0 -6px;
    opacity: 1;
}

/* Halo pulsé qui attire l'œil (désactivé si l'utilisateur limite les animations) */
.ifps-wa--pulse .ifps-wa__btn { animation: ifps-wa-pulse 2.4s ease-out infinite; }
.ifps-wa--pulse .ifps-wa__btn:hover { animation-play-state: paused; }

@keyframes ifps-wa-pulse {
    0% { box-shadow: var(--wa-shadow), 0 0 0 0 var(--wa-pulse); }
    70% { box-shadow: var(--wa-shadow), 0 0 0 16px rgba(0, 0, 0, 0); }
    100% { box-shadow: var(--wa-shadow), 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Bulle de message d'accueil */
.ifps-wa__bubble {
    position: relative;
    max-width: min(270px, calc(100vw - 2 * var(--wa-x) - 12px));
    padding: 12px 34px 12px 15px;
    background: #ffffff;
    color: #1d2433;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}

.ifps-wa__bubble[hidden] { display: none; }
.ifps-wa__bubble.is-visible { opacity: 1; transform: none; }

.ifps-wa__bubble::after {
    content: "";
    position: absolute;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .06);
}

.ifps-wa--right .ifps-wa__bubble::after { right: calc(var(--wa-size) / 2 - 7px); }
.ifps-wa--left .ifps-wa__bubble::after { left: calc(var(--wa-size) / 2 - 7px); }

.ifps-wa__bubble-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5b6577;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ifps-wa__bubble-close:hover { background: #eef1f7; color: #1d2433; }

/* Hors horaires : le bouton reste utilisable mais discret */
.ifps-wa.is-closed .ifps-wa__btn { filter: saturate(.55); }
.ifps-wa.is-closed.ifps-wa--pulse .ifps-wa__btn { animation: none; }

/* Visibilité selon l'appareil */
@media (min-width: 768px) { .ifps-wa--hide-desktop { display: none; } }

/* Mobile : taille et marges propres, libellé masqué sauf si demandé */
@media (max-width: 767px) {
    .ifps-wa {
        --wa-size: var(--wa-size-m);
        --wa-x: var(--wa-xm);
        --wa-y: var(--wa-ym);
    }

    .ifps-wa--hide-mobile { display: none; }
    .ifps-wa:not([data-label-mobile="1"]) .ifps-wa__label { display: none; }
    .ifps-wa__label { font-size: 14px; }

    .ifps-wa[data-label-mobile="1"][data-label-mode="always"] .ifps-wa__label,
    .ifps-wa[data-label-mobile="1"][data-label-mode="hover"] .ifps-wa__btn:focus-visible .ifps-wa__label {
        max-width: calc(100vw - var(--wa-size) - 2 * var(--wa-x) - 40px);
        white-space: normal;
        line-height: 1.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ifps-wa,
    .ifps-wa__btn,
    .ifps-wa__label,
    .ifps-wa__bubble { transition: none; }
    .ifps-wa--pulse .ifps-wa__btn { animation: none; }
}

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

/* Aperçu dans l'admin : le bouton est positionné dans un faux écran plutôt que dans la fenêtre. */
.ifps-wa--preview { position: absolute; bottom: var(--wa-y); }
.ifps-wa--preview.ifps-wa--right { right: var(--wa-x); }
.ifps-wa--preview.ifps-wa--left { left: var(--wa-x); }
.ifps-wa--preview .ifps-wa__btn { animation-play-state: running; }