/* =====================================================================
 * Winsiders Floating CTA — styles front.
 * Tout est scopé sous .wcta (container racine). Les couleurs et l'arrondi
 * transitent par les variables CSS --wcta-* posées en inline sur .wcta par
 * le PHP (overrides possibles par bouton sur .wcta__btn).
 *
 * Sections :
 *   1. Variables & conteneur
 *   2. Liste & items
 *   3. Bouton (pastille) & icône
 *   4. Labels — 3 modes (tooltip / inline / hidden)
 *   5. Positions (6) & orientations (2)
 *   6. Responsive — breakpoints Enfold (desktop/tablette/mobile)
 *   7. Accessibilité & reduced motion
 * ================================================================== */

/* ------------------------------------------------------------------
 * 1. Variables & conteneur
 * --------------------------------------------------------------- */
.wcta {
    /* Valeurs de repli si le PHP ne pose pas de variables inline. */
    --wcta-list-bg: #2271b1;
    --wcta-btn-bg: #ffffff;
    --wcta-icon-color: #2271b1;
    --wcta-label-color: #2271b1;
    --wcta-radius: 2.65rem;
    --wcta-accent-offset: 1.6rem;
    --wcta-z-index: 9990;
    --wcta-btn-size: 2.65rem;
    --wcta-icon-size: 1.65rem;
    --wcta-gap: 0.6rem;
    --wcta-transition: 0.15s ease-in-out;
    --wcta-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);

    position: fixed;
    z-index: var(--wcta-z-index);
    display: flex;
}

/* ------------------------------------------------------------------
 * 2. Liste & items
 * --------------------------------------------------------------- */
/* L'arrondi de liste est automatiquement proportionnel : arrondi bouton
 * + padding de liste (0.4rem). */
.wcta .wcta__list {
    display: grid;
    gap: var(--wcta-gap);
    margin: 0;
    padding: 0.4rem;
    background-color: var(--wcta-list-bg);
    border-radius: calc(var(--wcta-radius) + 0.4rem);
    box-shadow: var(--wcta-shadow);
    list-style: none;
    text-align: center;
}

/* Fond de liste désactivé : fond transparent, sans ombre ni padding. */
.wcta.wcta--no-list-bg .wcta__list {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

/* Ombre du fond de liste désactivée. */
.wcta.wcta--no-shadow .wcta__list {
    box-shadow: none;
}

.wcta .wcta__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ------------------------------------------------------------------
 * 3. Bouton (pastille) & icône
 * --------------------------------------------------------------- */
.wcta .wcta__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    min-width: var(--wcta-btn-size);
    min-height: var(--wcta-btn-size);
    padding: 0;
    overflow: visible; /* laisse passer l'infobulle hors du bouton */
    border: 0;
    border-radius: var(--wcta-radius);
    background-color: var(--wcta-btn-bg);
    color: var(--wcta-label-color);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--wcta-transition), box-shadow var(--wcta-transition);
}

.wcta .wcta__btn:hover,
.wcta .wcta__btn:focus-visible {
    transform: translateY(-0.25rem);
    box-shadow: var(--wcta-shadow);
    text-decoration: none;
}

.wcta .wcta__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Icônes SVG Enfold inline : le markup porte width/height en attributs,
 * on force la taille via CSS (les sélecteurs avec .wcta devant restent
 * assez forts pour battre les attributs de présentation). */
.wcta .wcta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wcta-btn-size);
    height: var(--wcta-btn-size);
    color: var(--wcta-icon-color);
    line-height: var(--wcta-btn-size);
}

.wcta .wcta__icon svg {
    width: var(--wcta-icon-size) !important;
    height: var(--wcta-icon-size) !important;
    fill: currentColor;
}

.wcta .wcta__icon img {
    width: var(--wcta-icon-size);
    height: var(--wcta-icon-size);
    display: block;
    margin: auto;
    object-fit: contain;
}

/* Icônes iconfont Enfold : le glyphe transite par data-av_icon, la
 * police par la classe avia-font-{font} chargée par Enfold côté front. */
.wcta .wcta__icon[data-av_icon]::before {
    content: attr(data-av_icon);
    font-size: var(--wcta-icon-size);
    font-style: normal;
    font-weight: normal;
    line-height: var(--wcta-btn-size);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fallback générique si aucune police Enfold n'est chargée : le glyphe
 * tombe sur une police système (contenu = caractère unicode). */
.wcta .wcta__icon[data-av_icon]:not([class*="avia-font-"])::before {
    font-family: "dashicons", sans-serif;
}

/* ------------------------------------------------------------------
 * 4. Labels — 3 modes (tooltip / inline / hidden)
 * --------------------------------------------------------------- */
.wcta .wcta__label {
    display: none;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Mode tooltip : infobulle hors du bouton, côté opposé à l'écran ---
 * La flèche est un carré tourné à 45° à cheval sur le bord de la bulle
 * (joint seamless avec la bulle, même fond que celle-ci). */
.wcta .wcta__btn--tooltip .wcta__label {
    position: absolute;
    top: 50%;
    right: -0.45rem;
    transform: translate(100%, -50%);
    display: block;
    padding: 0.8rem 1.6rem;
    border-radius: 0.5rem;
    background: var(--wcta-tooltip-bg, #fff);
    /* Couleur du texte d'infobulle : réglage global (« Couleur du texte des
     * infobulles ») surchargé par bouton — le style inline du <a> définit
     * --wcta-tooltip-color quand « Couleur du label dans l'infobulle » est
     * renseignée. Si vide des deux côtés, hérite de la couleur du label. */
    color: var(--wcta-tooltip-color, var(--wcta-label-color));
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: var(--wcta-shadow);
    visibility: hidden;
    opacity: 0;
    transition: left var(--wcta-transition), right var(--wcta-transition),
        opacity var(--wcta-transition), visibility var(--wcta-transition);
    z-index: 1;
}

/* Docks à gauche (bulle à droite du bouton) : flèche au bord GAUCHE de la
 * bulle pointant vers la GAUCHE (vers le bouton). */
.wcta .wcta__btn--tooltip .wcta__label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.3rem;
    transform: translateY(-50%) rotate(45deg);
    width: 0.6rem;
    height: 0.6rem;
    background: var(--wcta-tooltip-bg, #fff);
    z-index: -1;
}

/* Listes à droite de l'écran : infobulle à gauche du bouton — la bulle est
 * déjà côté gauche, seule la flèche doit pointer vers le bouton. */
.wcta.wcta--pos-top-right .wcta__btn--tooltip .wcta__label,
.wcta.wcta--pos-center-right .wcta__btn--tooltip .wcta__label,
.wcta.wcta--pos-bottom-right .wcta__btn--tooltip .wcta__label {
    right: auto;
    left: -0.45rem;
    transform: translate(-100%, -50%);
}

/* Docks à droite : bulle à gauche du bouton — flèche au bord DROIT de la
 * bulle pointant vers la DROITE (vers le bouton, qui est à gauche de la
 * bulle). */
.wcta.wcta--pos-top-right .wcta__btn--tooltip .wcta__label::after,
.wcta.wcta--pos-center-right .wcta__btn--tooltip .wcta__label::after,
.wcta.wcta--pos-bottom-right .wcta__btn--tooltip .wcta__label::after {
    left: auto;
    right: -0.3rem;
    transform: translateY(-50%) rotate(45deg);
}

.wcta .wcta__btn--tooltip:hover .wcta__label,
.wcta .wcta__btn--tooltip:focus-visible .wcta__label {
    visibility: visible;
    opacity: 1;
}

/* --- Mode inline : label visible dans la pastille --- */
.wcta .wcta__btn--inline {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0 1rem;
}

.wcta .wcta__btn--inline .wcta__label {
    display: inline;
    color: var(--wcta-label-color);
}

/* --- Mode hidden : pastille seule (déjà le défaut) --- */

/* ------------------------------------------------------------------
 * 5. Positions (6) & orientations (2)
 * --------------------------------------------------------------- */
/* Vertical par défaut (grid), horizontal via flex. */
.wcta.wcta--horizontal .wcta__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

/* top-left */
.wcta.wcta--pos-top-left {
    top: var(--wcta-accent-offset);
    left: var(--wcta-accent-offset);
    right: auto;
    bottom: auto;
}

/* top-center */
.wcta.wcta--pos-top-center {
    top: var(--wcta-accent-offset);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
}

/* top-right */
.wcta.wcta--pos-top-right {
    top: var(--wcta-accent-offset);
    right: var(--wcta-accent-offset);
    left: auto;
    bottom: auto;
}

/* center-right */
.wcta.wcta--pos-center-right {
    top: 50%;
    right: var(--wcta-accent-offset);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}

/* bottom-right */
.wcta.wcta--pos-bottom-right {
    bottom: var(--wcta-accent-offset);
    right: var(--wcta-accent-offset);
    left: auto;
    top: auto;
}

/* bottom-left */
.wcta.wcta--pos-bottom-left {
    bottom: var(--wcta-accent-offset);
    left: var(--wcta-accent-offset);
    right: auto;
    top: auto;
}

/* center-left */
.wcta.wcta--pos-center-left {
    top: 50%;
    left: var(--wcta-accent-offset);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}

/* bottom-center */
.wcta.wcta--pos-bottom-center {
    bottom: var(--wcta-accent-offset);
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}

/* ------------------------------------------------------------------
 * 6. Responsive — breakpoints Enfold
 *    desktop ≥990px / tablette 768–989px / mobile ≤767px
 * --------------------------------------------------------------- */

/* --- Masquage par breakpoint (wcta--hide-*) ---
 * Classes racine : le dock entier est masqué (réglage global Affichage).
 * Classes par item (.wcta .wcta--hide-*) : un bouton précis est masqué
 * (visibilité responsive par bouton, v1.3.0). */
@media (min-width: 990px) {
    .wcta.wcta--hide-desktop {
        display: none;
    }

    /* Item masqué sur desktop : la pastille disparaît du dock. */
    .wcta .wcta--hide-desktop {
        display: none !important;
    }

    /* Tous les items sont masqués sur ce breakpoint : le dock entier
     * disparaît (sinon le fond de liste resterait visible, vide). */
    .wcta:not(:has(.wcta__item:not(.wcta--hide-desktop))) {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 989px) {
    .wcta.wcta--hide-tablet {
        display: none;
    }

    /* Item masqué sur tablette : la pastille disparaît du dock. */
    .wcta .wcta--hide-tablet {
        display: none !important;
    }

    /* Tous les items sont masqués sur ce breakpoint : le dock entier
     * disparaît (sinon le fond de liste resterait visible, vide). */
    .wcta:not(:has(.wcta__item:not(.wcta--hide-tablet))) {
        display: none;
    }
}

@media (max-width: 767px) {
    .wcta.wcta--hide-mobile {
        display: none;
    }

    /* Item masqué sur mobile : la pastille disparaît du dock. */
    .wcta .wcta--hide-mobile {
        display: none !important;
    }

    /* Tous les items sont masqués sur ce breakpoint : le dock entier
     * disparaît (sinon le fond de liste du dock bas resterait visible,
     * vide). */
    .wcta:not(:has(.wcta__item:not(.wcta--hide-mobile))) {
        display: none;
    }
}

/* --- Surcharge de position tablette (768–989px) --- */
@media (min-width: 768px) and (max-width: 989px) {
    .wcta.wcta--pos-tablet-top-left {
        top: var(--wcta-accent-offset);
        left: var(--wcta-accent-offset);
        right: auto;
        bottom: auto;
        transform: none;
    }

    .wcta.wcta--pos-tablet-top-right {
        top: var(--wcta-accent-offset);
        right: var(--wcta-accent-offset);
        left: auto;
        bottom: auto;
        transform: none;
    }

    .wcta.wcta--pos-tablet-center-right {
        top: 50%;
        right: var(--wcta-accent-offset);
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
    }

    .wcta.wcta--pos-tablet-bottom-right {
        bottom: var(--wcta-accent-offset);
        right: var(--wcta-accent-offset);
        left: auto;
        top: auto;
        transform: none;
    }

    .wcta.wcta--pos-tablet-bottom-left {
        bottom: var(--wcta-accent-offset);
        left: var(--wcta-accent-offset);
        right: auto;
        top: auto;
        transform: none;
    }

    .wcta.wcta--pos-tablet-center-left {
        top: 50%;
        left: var(--wcta-accent-offset);
        right: auto;
        bottom: auto;
        transform: translateY(-50%);
    }

    /* top-center / bottom-center (tablettes) */
    .wcta.wcta--pos-tablet-top-center {
        top: var(--wcta-accent-offset);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
    }

    .wcta.wcta--pos-tablet-bottom-center {
        bottom: var(--wcta-accent-offset);
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
    }
}

/* --- Mobile ≤767px --- */

/* Position de repli par défaut : dock bas plein écran, uniquement quand
 * aucune position mobile n'est choisie (le sélecteur :not laisse les
 * blocs .wcta--pos-mobile-* ci-dessous écraser les propriétés utiles). */
@media (max-width: 767px) {
    .wcta:not([class*="wcta--pos-mobile-"]) {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
    }

    .wcta:not([class*="wcta--pos-mobile-"]):not(.wcta--mobile-icons) .wcta__list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        width: 100vw;
        margin: 0;
        padding: 0.4rem;
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        box-shadow: none;
    }

    .wcta:not([class*="wcta--pos-mobile-"]):not(.wcta--mobile-icons) .wcta__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .wcta:not([class*="wcta--pos-mobile-"]):not(.wcta--mobile-icons) .wcta__btn,
    .wcta:not([class*="wcta--pos-mobile-"]):not(.wcta--mobile-icons) .wcta__btn--inline {
        width: 100%;
        /* height:100% : la liste étire les items (align-items:stretch) à
         * la hauteur du bouton le plus haut (label sur 2 lignes) ; sans
         * cette valeur les pastilles gardent chacune leur hauteur de
         * contenu et le dock horizontal est dénivelé. */
        height: 100%;
        min-height: 2.65rem;
        border-radius: 0.5rem;
        /* border-box obligaire ici : le bouton desktop est en content-box
         * (pastille), et width:100% + padding déborderait sinon de l'item. */
        box-sizing: border-box;
    }

    /* Pastilles verticales compactes, pas de lift au tap. */
    .wcta .wcta__btn:hover,
    .wcta .wcta__btn:focus-visible {
        transform: none;
    }

    .wcta .wcta__btn--inline .wcta__label {
        font-size: 0.75rem;
        /* Le label doit s'adapter à la largeur disponible du dock,
         * pas forcer la largeur du bouton au-delà de l'écran. */
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
    }

    /* --- Option « pastilles compactes » (wcta--mobile-icons, défaut) ---
     * La liste garde son style desktop (fond, arrondi proportionnel,
     * ombre, pastilles rondes content-box) ; seul le conteneur plein
     * écran du dock bas centre la liste et la liste repasse en flexrow. */
    .wcta--mobile-icons:not([class*="wcta--pos-mobile-"]) {
        justify-content: center;
    }

    .wcta--mobile-icons:not([class*="wcta--pos-mobile-"]) .wcta__list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--wcta-gap);
    }

    /* Sur mobile les infobulles sont masquées : les labels inline le sont
     * aussi en mode pastilles compactes, et le padding inline est
     * neutralisé pour retrouver une pastille de la taille de l'icône. */
    .wcta--mobile-icons .wcta__btn--inline .wcta__label {
        display: none;
    }

    .wcta--mobile-icons .wcta__btn--inline {
        padding: 0;
        gap: 0;
    }

    /* Infobulles masquées sur mobile (trop intrusives en dock bas). */
    .wcta .wcta__btn--tooltip .wcta__label {
        display: none;
    }

    /* --- Option « labels visibles » (wcta--mobile-labels) ---
     * Le bouton tooltip devient inline : le label s'affiche dans la
     * pastille étirée (les règles du dock bas étiré plus haut s'appliquent
     * car la racine ne porte pas wcta--mobile-icons). Placées après la
     * règle de masquage pour gagner à spécificité égale.
     * Sélecteurs self-chainés (.wcta.wcta--mobile-labels, spécificité
     * 0,4,0) OBLIGATOIRES : les règles d'infobulle par position
     * (.wcta.wcta--pos-center-right .wcta__btn--tooltip .wcta__label)
     * sont à 0,4,0 et réimposeraient sinon leur transform de
     * positionnement sur un label devenu static (labels projetés hors
     * des boutons, hors écran sur les docks à droite).
     *
     * Densité : à 390px, les items partagent la largeur (flex:1 1 0,
     * ~119px par pastille pour 3 boutons). L'icône pleine taille
     * (2.65rem) + paddings laissaient ~37px au texte — le label passait
     * sur 3-5 lignes ou débordait. Pattern bottom-nav compact : icône
     * réduite à 1.25rem, pastille moins haute (2.15rem), gap icône-texte
     * 0.4rem, paddings horizontaux 0.5rem. */
    .wcta.wcta--mobile-labels .wcta__btn--tooltip {
        flex-direction: row;
        gap: 0.4rem;
        padding: 0 0.5rem;
        min-height: 2.15rem;
    }

    .wcta.wcta--mobile-labels .wcta__btn--tooltip .wcta__icon {
        flex: 0 0 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        line-height: 1.25rem;
    }

    .wcta.wcta--mobile-labels .wcta__btn--tooltip .wcta__icon svg,
    .wcta.wcta--mobile-labels .wcta__btn--tooltip .wcta__icon img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    .wcta.wcta--mobile-labels .wcta__btn--tooltip .wcta__label {
        display: inline;
        position: static;
        transform: none;
        /* min-width: 0 : le label est un flex item de la pastille — sans
         * cette valeur il garde min-width:auto (largeur max-content du
         * mot le plus long) et déborde de la pastille étirée. */
        min-width: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        color: var(--wcta-label-color);
        font-size: 0.75rem;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
    }

    /* La flèche d'infobulle n'a plus de sens sur un label inline. */
    .wcta.wcta--mobile-labels .wcta__btn--tooltip .wcta__label::after {
        content: none;
    }

    /* Dock bas plein écran (pas de position mobile explicite) : les items
     * partagent la largeur, le layout horizontal ne laisse que ~77px au
     * texte (icône + gap + paddings). Pattern bottom-nav : icône AU-DESSUS
     * du texte (colonne) → ~109px de texte, 1-2 lignes au lieu de 3.
     * Les positions mobiles explicites (pastilles de coin content-box)
     * gardent le layout horizontal, plus compact. */
    .wcta.wcta--mobile-labels:not([class*="wcta--pos-mobile-"]) .wcta__btn--tooltip {
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.35rem 0.5rem;
        min-height: 3.4rem;
    }

    /* --- Positions mobiles choisies (écrasent le dock par défaut) --- */
    .wcta.wcta--pos-mobile-top-left {
        top: var(--wcta-accent-offset);
        left: var(--wcta-accent-offset);
        right: auto;
        bottom: auto;
        transform: none;
    }

    .wcta.wcta--pos-mobile-top-right {
        top: var(--wcta-accent-offset);
        right: var(--wcta-accent-offset);
        left: auto;
        bottom: auto;
        transform: none;
    }

    .wcta.wcta--pos-mobile-center-right {
        top: 50%;
        right: var(--wcta-accent-offset);
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
    }

    .wcta.wcta--pos-mobile-bottom-right {
        bottom: var(--wcta-accent-offset);
        right: var(--wcta-accent-offset);
        left: auto;
        top: auto;
        transform: none;
    }

    .wcta.wcta--pos-mobile-bottom-left {
        bottom: var(--wcta-accent-offset);
        left: var(--wcta-accent-offset);
        right: auto;
        top: auto;
        transform: none;
    }

    .wcta.wcta--pos-mobile-center-left {
        top: 50%;
        left: var(--wcta-accent-offset);
        right: auto;
        bottom: auto;
        transform: translateY(-50%);
    }

    /* top-center / bottom-center (mobiles) */
    .wcta.wcta--pos-mobile-top-center {
        top: var(--wcta-accent-offset);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
    }

    .wcta.wcta--pos-mobile-bottom-center {
        bottom: var(--wcta-accent-offset);
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
    }
}

/* ------------------------------------------------------------------
 * 7. Accessibilité & reduced motion
 * --------------------------------------------------------------- */
.wcta .wcta__btn:focus-visible {
    outline: 2px solid var(--wcta-icon-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wcta *,
    .wcta *::before,
    .wcta *::after {
        transition: none !important;
        animation: none !important;
    }

    .wcta .wcta__btn:hover,
    .wcta .wcta__btn:focus-visible {
        transform: none;
    }
}