/**
 * WS Booster - Equipe Accordeon
 *
 * Accordeon horizontal d'equipe : rangee de lamelles photo, une qui se deplie
 * en carte profil au clic. Mobile (<=767px) : cartes profil completes
 * empilees les unes sous les autres (pas d'accordeon).
 *
 * Variables CSS (posees par le PHP via selectors) :
 *   --ws-tac-height       hauteur du conteneur
 *   --ws-tac-speed        vitesse de transition
 *   --ws-tac-strip-w      largeur d'une lamelle repliee
 *   --ws-tac-gray         intensite noir et blanc des lamelles repliees
 *   --ws-tac-social-size  taille de l'icone reseau
 *   --ws-tac-social-box   taille de la pastille reseau
 */

/* ===== Conteneur (rangee flex horizontale) ===== */
.ws-tac {
    --ws-tac-height: 420px;
    --ws-tac-speed: 1.2s;          /* duree unique : fermeture ET ouverture
                                       sont synchronises pour conserver la
                                       largeur totale de la rangee constante */
    --ws-tac-ease: cubic-bezier(0, 0.55, 0.45, 1); /* circ-out, souple */
    --ws-tac-fade-delay: 0.55; /* fraction de --ws-tac-speed avant fade-in du body */
    --ws-tac-strip-w: 90px;
    --ws-tac-gray: 100%;
    --ws-tac-social-size: 18px;
    --ws-tac-social-box: 38px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: var(--ws-tac-height);
}

/* ===== Lamelle / carte ===== */
.ws-tac__item {
    position: relative;
    flex: 0 0 var(--ws-tac-strip-w);
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    background-color: #0f172a;
    /* Transition synchronisee : meme duree pour l'ouverture ET la fermeture.
       Important pour que la lamelle qui se ferme et celle qui s'ouvre
       echangent leur largeur sans que la rangee totale ne se contracte. */
    transition:
        flex var(--ws-tac-speed) var(--ws-tac-ease),
        flex-grow var(--ws-tac-speed) var(--ws-tac-ease),
        flex-basis var(--ws-tac-speed) var(--ws-tac-ease);
    outline: none;
    will-change: flex-grow, flex-basis;
}

.ws-tac__item:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55);
}

/* Lamelle ouverte : occupe l'espace disponible */
.ws-tac__item.is-open {
    flex: 1 1 auto;
    cursor: default;
}

/* ===== Photo (media) ===== */
.ws-tac__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.ws-tac__photo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
}

/* Voile + noir et blanc sur les lamelles repliees uniquement */
.ws-tac__item:not(.is-open) .ws-tac__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.25);
    transition: opacity var(--ws-tac-speed) var(--ws-tac-ease);
}

/* Photo : transition synchronisee avec la lamelle. */
.ws-tac__photo {
    transition: filter var(--ws-tac-speed) var(--ws-tac-ease);
}

.ws-tac:not(.ws-tac--no-gray) .ws-tac__item:not(.is-open) .ws-tac__photo {
    filter: grayscale(var(--ws-tac-gray));
}

.ws-tac__item.is-open .ws-tac__photo {
    filter: none;
}

/* Overlay (nom + icone par-dessus la photo) : masque en desktop,
   affiche uniquement en version mobile (cf @media plus bas). */
.ws-tac__overlay {
    display: none;
}

/* ===========================================================
   CARTE OUVERTE - architecture commune
   ===========================================================
   IMPORTANT : la photo (.ws-tac__media) reste TOUJOURS en position
   absolute inset:0 (pas de bascule absolute -> relative qui creerait
   un snap non-transitionnable). Le contenu (.ws-tac__body) est lui
   aussi TOUJOURS en absolute, opacite 0 au repos, opacite 1 quand la
   carte est ouverte. Du coup l'ouverture/fermeture est 100% smooth
   dans TOUS les modes (Classique / Full / Glass). */

.ws-tac__item.is-open {
    background-color: #ffffff;
}

/* ===== Corps (contenu profil) - toujours rendu, opacite controlee ===== */
.ws-tac__body {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    /* Fermeture : on coupe vite l'opacite du contenu pour que la lamelle
       redevienne juste une photo, mais la largeur reste synchro avec
       l'ouverture (gere par le flex transition). */
    transition:
        opacity calc(var(--ws-tac-speed) * 0.35) var(--ws-tac-ease),
        transform calc(var(--ws-tac-speed) * 0.35) var(--ws-tac-ease);
}

.ws-tac__item.is-open .ws-tac__body {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    /* Ouverture : duree = (1 - delay) * speed, retardee de delay * speed.
       Le contenu attend que la carte soit deja en train de s'ouvrir avant
       d'apparaitre -> rendu progressif, jamais brutal. */
    transition:
        opacity calc(var(--ws-tac-speed) * (1 - var(--ws-tac-fade-delay, 0.55)))
            var(--ws-tac-ease)
            calc(var(--ws-tac-speed) * var(--ws-tac-fade-delay, 0.55)),
        transform calc(var(--ws-tac-speed) * (1 - var(--ws-tac-fade-delay, 0.55)))
            var(--ws-tac-ease)
            calc(var(--ws-tac-speed) * var(--ws-tac-fade-delay, 0.55));
}

/* ===========================================================
   MODE CLASSIQUE (split) : body anchored a un cote, photo derriere
   =========================================================== */
.ws-tac--mode-split .ws-tac__body {
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(220px, 62%, calc(100% - 180px));
    background-color: #ffffff;
}
.ws-tac--mode-split.ws-tac--photo-right .ws-tac__body {
    right: auto;
    left: 0;
}

/* ===========================================================
   MODE FULL : body couvre tout le bouton + gradient
   =========================================================== */
.ws-tac--mode-full .ws-tac__body {
    --ws-tac-grad-from: rgba(15, 23, 42, 0);
    --ws-tac-grad-to:   rgba(15, 23, 42, 0.85);
    inset: 0;
    background-image: linear-gradient(180deg, var(--ws-tac-grad-from) 0%, var(--ws-tac-grad-to) 100%);
    color: #ffffff;
    justify-content: flex-end;
}
.ws-tac--mode-full .ws-tac__name,
.ws-tac--mode-full .ws-tac__job,
.ws-tac--mode-full .ws-tac__bio {
    color: inherit;
}

/* ===========================================================
   MODE GLASS : body en panneau verre depoli (frosted)
   =========================================================== */
.ws-tac--mode-glass .ws-tac__body {
    --ws-tac-glass-bg:     rgba(255, 255, 255, 0.18);
    --ws-tac-glass-blur:   14px;
    --ws-tac-glass-border: rgba(255, 255, 255, 0.35);
    background-color: var(--ws-tac-glass-bg);
    -webkit-backdrop-filter: blur(var(--ws-tac-glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--ws-tac-glass-blur)) saturate(140%);
    border: 1px solid var(--ws-tac-glass-border);
    border-radius: 16px;
    color: #ffffff;
}
.ws-tac--mode-glass .ws-tac__name,
.ws-tac--mode-glass .ws-tac__job,
.ws-tac--mode-glass .ws-tac__bio {
    color: inherit;
}

/* Glass : positions du panneau */
.ws-tac--mode-glass.ws-tac--glass-left .ws-tac__body {
    top: 20px; bottom: 20px; left: 20px; right: auto;
    width: clamp(220px, 42%, 420px);
}
.ws-tac--mode-glass.ws-tac--glass-right .ws-tac__body {
    top: 20px; bottom: 20px; right: 20px; left: auto;
    width: clamp(220px, 42%, 420px);
}
.ws-tac--mode-glass.ws-tac--glass-bottom .ws-tac__body {
    left: 20px; right: 20px; bottom: 20px; top: auto;
    height: auto;
    max-height: 60%;
}

.ws-tac__name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.ws-tac__job {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #2563eb;
}

.ws-tac__bio {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

/* ===== Icones reseaux ===== */
.ws-tac__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.ws-tac__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ws-tac-social-box);
    height: var(--ws-tac-social-box);
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ws-tac__social:hover {
    background-color: #e2e8f0;
    color: #2563eb;
    transform: translateY(-2px);
}

.ws-tac__social svg {
    width: var(--ws-tac-social-size);
    height: var(--ws-tac-social-size);
    display: block;
}

/* ===== Mobile (<=767px) : cartes empilees, image seule visible =====
   Chaque membre = une carte empilee montrant UNIQUEMENT la photo. Le titre
   et le texte (.ws-tac__body) sont masques et apparaissent au clic sur
   l'image (la carte recoit .is-open). Le corps suit l'etat .is-open comme
   en desktop : la regle de base (.ws-tac__body display:none) et
   .ws-tac__item.is-open .ws-tac__body (display:flex) operent telles quelles,
   on ne force PAS l'affichage du corps ici. */
@media (max-width: 767px) {
    .ws-tac {
        flex-direction: column;
        height: auto;
    }

    /* Chaque lamelle devient une carte pleine largeur, empilee. */
    .ws-tac__item,
    .ws-tac__item.is-open,
    .ws-tac--photo-right .ws-tac__item.is-open {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        cursor: pointer;
    }

    /* Photo : bandeau pleine largeur en haut (zone cliquable pour reveler).
       Hauteur pilotee par le controle "Hauteur de la photo sur mobile". */
    .ws-tac__item .ws-tac__media,
    .ws-tac__item.is-open .ws-tac__media {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        width: 100%;
        height: var(--ws-tac-mobile-photo-h, 240px);
    }

    /* Photos en couleur, aucun voile sur mobile. */
    .ws-tac__photo {
        filter: none !important;
    }
    .ws-tac__media::after {
        display: none !important;
    }

    /* Corps revele : visible une fois la carte ouverte. */
    .ws-tac__item.is-open .ws-tac__body {
        overflow: visible;
    }

    /* ----- Overlay : nom + icone par-dessus la photo (invite au clic) ----- */
    .ws-tac__overlay {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to top, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0) 46%);
    }

    /* Le nom sur la photo (bas gauche), lisible grace au degrade. */
    .ws-tac__overlay-name {
        position: absolute;
        left: 16px;
        right: 64px;
        bottom: 14px;
        color: #ffffff;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* La pastille icone (haut droite), legerement surelevee (ombre portee). */
    .ws-tac__overlay-icon {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #ffffff;
        color: #0f172a;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.38);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ws-tac__overlay-icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    /* Carte ouverte : l'icone pivote pour signaler l'etat (re-clic = referme). */
    .ws-tac__item.is-open .ws-tac__overlay-icon {
        transform: rotate(135deg);
    }

    /* Le nom est deja affiche dans l'overlay : on masque celui du corps. */
    .ws-tac__body .ws-tac__name {
        display: none;
    }
}