/**
 * Celtiis Team - équipe dirigeante.
 *
 * Cards photo pleine avec overlay sombre : nom en haut, rôle en bas.
 * Hover : zoom subtil sur la photo + gradient légèrement plus marqué.
 */

.celtiis-team {
    --celtiis-team-columns: 4;
    --celtiis-team-radius: 15px;
    width: 100%;
}

.celtiis-team__grid {
    display: grid;
    grid-template-columns: repeat(var(--celtiis-team-columns), minmax(0, 1fr));
    align-items: end;
    gap: 18px;
    width: 100%;
}

.celtiis-team__card {
    position: relative;
    display: block;
    aspect-ratio: 10 / 11;
    border-radius: var(--celtiis-team-radius);
    overflow: hidden;
    background: var(--celtiis-color-primary, #1D3D70);
    isolation: isolate;
}

/* Le premier dirigeant garde la même largeur, mais bénéficie d'une carte
 * plus haute. Toutes les cartes restent alignées sur leur bord inférieur. */
.celtiis-team__grid > .celtiis-team__card:first-child {
    aspect-ratio: 4 / 5;
}

.celtiis-team__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    background-color: #1D3D701A;
    overflow: hidden;
}

.celtiis-team__image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    object-position: center top;
    display: block;
    transition: transform .6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.celtiis-team__card:hover .celtiis-team__image {
    transform: scale(1.04);
}

/* Voile sombre : transparent en haut, dégradé qui s'intensifie vers le bas. */
.celtiis-team__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.0) 45%,
            rgba(0, 0, 0, 0.55) 75%,
            rgba(0, 0, 0, 0.82) 100%);
    transition: background .25s ease;
    pointer-events: none;
}

.celtiis-team__card:hover::after {
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.05) 45%,
            rgba(0, 0, 0, 0.62) 75%,
            rgba(0, 0, 0, 0.88) 100%);
}

.celtiis-team__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    pointer-events: none;
}

.celtiis-team__name {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.25);
}

.celtiis-team__role {
    margin: 0;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
    max-width: 92%;
    white-space: pre-line;
}

/* Remplacement du texte court par le texte long dans les cartes avec overlay. */
.celtiis-team__descriptions {
    display: block;
}

.celtiis-team__description-slot {
    display: grid;
    transition: grid-template-rows .35s ease;
}

.celtiis-team__description-slot--short {
    grid-template-rows: 1fr;
}

.celtiis-team__description-slot--long {
    grid-template-rows: 0fr;
}

.celtiis-team__description-slot > .celtiis-team__role {
    min-height: 0;
    overflow: hidden;
    transition: transform .35s ease, opacity .25s ease;
}

.celtiis-team__card.has-hover-description .celtiis-team__role--long {
    opacity: 0;
    transform: translateY(100%);
}

.celtiis-team__card.has-hover-description:hover .celtiis-team__description-slot--short,
.celtiis-team__card.has-hover-description:focus .celtiis-team__description-slot--short,
.celtiis-team__card.has-hover-description:focus-within .celtiis-team__description-slot--short {
    grid-template-rows: 0fr;
}

.celtiis-team__card.has-hover-description:hover .celtiis-team__description-slot--long,
.celtiis-team__card.has-hover-description:focus .celtiis-team__description-slot--long,
.celtiis-team__card.has-hover-description:focus-within .celtiis-team__description-slot--long {
    grid-template-rows: 1fr;
}

.celtiis-team__card.has-hover-description:hover .celtiis-team__role--short,
.celtiis-team__card.has-hover-description:focus .celtiis-team__role--short,
.celtiis-team__card.has-hover-description:focus-within .celtiis-team__role--short {
    opacity: 0;
    transform: translateY(-100%);
}

.celtiis-team__card.has-hover-description:hover .celtiis-team__role--long,
.celtiis-team__card.has-hover-description:focus .celtiis-team__role--long,
.celtiis-team__card.has-hover-description:focus-within .celtiis-team__role--long {
    opacity: 1;
    transform: translateY(0);
}

.celtiis-team__card.has-hover-description:focus-visible {
    outline: 3px solid var(--celtiis-color-secondary, #FFD100);
    outline-offset: 3px;
}

/* Variante sans overlay : le nom et la description sont placés sous la photo. */
.celtiis-team.is-text-below .celtiis-team__grid {
    align-items: start;
}

.celtiis-team.is-text-below .celtiis-team__card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
}

.celtiis-team.is-text-below .celtiis-team__card::after {
    display: none;
}

.celtiis-team.is-text-below .celtiis-team__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 10 / 11;
}

.celtiis-team.is-text-below .celtiis-team__grid > .celtiis-team__card:first-child .celtiis-team__photo {
    aspect-ratio: 4 / 5;
}

.celtiis-team.is-text-below .celtiis-team__content {
    position: static;
    padding: 14px 0 0;
    gap: 6px;
    pointer-events: auto;
}

.celtiis-team.is-text-below .celtiis-team__name {
    color: var(--bs-primary, #1D3D70);
    text-shadow: none;
}

.celtiis-team.is-text-below .celtiis-team__role {
    color: var(--bs-body-color, #303030);
    text-shadow: none;
    max-width: 100%;
}

/* Premier membre agrandi (mode "feature first") ──────────────── */
.celtiis-team__grid.is-feature-first {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
}

.celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child {
    flex: var(--celtiis-team-first-grow, 1.2) 1 0;
    min-width: 0;
    aspect-ratio: auto;
}

.celtiis-team__grid.is-feature-first .celtiis-team__rest {
    flex: 3 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.celtiis-team__grid.is-feature-first .celtiis-team__rest .celtiis-team__card {
    aspect-ratio: 3 / 4;
}

.celtiis-team.is-text-below .celtiis-team__grid.is-feature-first .celtiis-team__rest .celtiis-team__card {
    aspect-ratio: auto;
}

.celtiis-team.is-text-below .celtiis-team__grid.is-feature-first .celtiis-team__rest .celtiis-team__photo {
    aspect-ratio: 3 / 4;
}

.celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child .celtiis-team__name {
    font-size: 22px;
}

.celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child .celtiis-team__role {
    font-size: 15px;
}

/* Premier membre seul sur la première ligne */
.celtiis-team__grid.is-feature-first.is-first-solo {
    flex-wrap: wrap;
}

.celtiis-team__grid.is-feature-first.is-first-solo > .celtiis-team__card:first-child {
    flex: 0 0 var(--celtiis-team-first-width, 45%);
    max-width: var(--celtiis-team-first-width, 45%);
    aspect-ratio: var(--celtiis-team-first-ratio, 0.8);
}

.celtiis-team__grid.is-feature-first.is-first-solo .celtiis-team__rest {
    flex: 1 1 100%;
    grid-template-columns: repeat(var(--celtiis-team-columns), minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 1024px) {
    .celtiis-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .celtiis-team__grid.is-feature-first {
        flex-wrap: wrap;
    }

    .celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child,
    .celtiis-team__grid.is-feature-first .celtiis-team__rest {
        flex: 1 1 100%;
    }

    .celtiis-team__grid.is-feature-first .celtiis-team__rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .celtiis-team__grid.is-feature-first.is-first-solo > .celtiis-team__card:first-child {
        flex: 0 0 var(--celtiis-team-first-width, 100%);
        max-width: var(--celtiis-team-first-width, 100%);
    }
}

@media (max-width: 575px) {
    .celtiis-team__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .celtiis-team__grid.is-feature-first .celtiis-team__rest {
        grid-template-columns: minmax(0, 1fr);
    }

    .celtiis-team__grid.is-feature-first.is-first-solo > .celtiis-team__card:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .celtiis-team__name {
        font-size: 17px;
    }
}

/* Points de pagination : même style que le carousel « Gérez vos services ».
 * Affichés seulement en mobile, où les cartes défilent. */
.celtiis-team__dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.celtiis-team__dot {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--celtiis-color-primary, #1D3D70);
    cursor: pointer;
    padding: 0;
}

.celtiis-team__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--celtiis-color-primary, #1D3D70);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s ease;
}

.celtiis-team__dot.is-active::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Mobile : rangée qui défile au doigt, toutes les photos à la même hauteur.
 * La carte suivante dépasse à droite pour montrer qu'on peut faire glisser. */
@media (max-width: 767px) {
    .celtiis-team .celtiis-team__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .celtiis-team .celtiis-team__grid::-webkit-scrollbar {
        display: none;
    }

    .celtiis-team__dots {
        display: flex;
    }

    /* Le premier membre et les suivants défilent dans la même rangée. */
    .celtiis-team .celtiis-team__grid .celtiis-team__rest {
        display: contents;
    }

    /* !important : les réglages « premier membre agrandi » imposent ailleurs
     * une largeur et une proportion propres à la première carte.
     * Largeur en vw et non en % : Elementor mesure la hauteur du bloc avant de
     * connaître la largeur de la rangée. En %, la carte (contenu tout en absolu)
     * y vaut 0, donc sa hauteur aussi, et elle déborde sur la suite de la page. */
    .celtiis-team .celtiis-team__grid .celtiis-team__card {
        flex: 0 0 min(78vw, 340px) !important;
        max-width: none !important;
        scroll-snap-align: start;
    }

    .celtiis-team:not(.is-text-below) .celtiis-team__card,
    .celtiis-team.is-text-below .celtiis-team__photo {
        aspect-ratio: 3 / 4 !important;
    }

    .celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child .celtiis-team__name {
        font-size: 17px;
    }

    .celtiis-team__grid.is-feature-first > .celtiis-team__card:first-child .celtiis-team__role {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .celtiis-team__description-slot,
    .celtiis-team__description-slot > .celtiis-team__role {
        transition: none;
    }
}