.team {
    background: var(--chirripo-color-bg, #0D0D0D);
    color: var(--chirripo-color-text, #f5f5f5);
    padding: var(--chirripo-space-xl, 6rem) var(--chirripo-space-md, 1.5rem);
    text-align: center;
}

/* Section plein écran, desktop uniquement : sur mobile, une hauteur
   forcée à 100vh écraserait le carrousel (cf. consigne "conserver un
   comportement correct sur les petits écrans") — la hauteur y reste donc
   pilotée par le padding/contenu comme avant. */
@media (min-width: 769px) {
    .team {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.team__inner {
    max-width: var(--chirripo-container-width, 1280px);
    margin: 0 auto;
}

.team__header {
    max-width: 560px;
    margin: 0 auto var(--chirripo-space-lg, 3rem);
}

/* ---- Card membre, partagée entre la grille et le carrousel ---- */

.team__member {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    text-align: left;
}

.team__photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) brightness(0.85);
}

.team__overlay {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--chirripo-space-sm, 0.75rem);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
}

.team__member:hover .team__overlay,
.team__member:focus-within .team__overlay,
.team__member.is-active .team__overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.team__name {
    font-family: var(--chirripo-font-display, serif);
    font-size: 1.05rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
}

.team__role {
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 1rem;
    color: #6A6A6A;
}

.team__socials {
    display: flex;
    gap: 0.4em;
    margin-top: 0.2em;
}

.team__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.team__social:hover {
    background: var(--chirripo-color-accent, #B6B6FB);
    color: #111;
}

/* ---- Mode "Grille" (home) : rangée en accordéon, la card survolée
   s'élargit pendant que les autres se compriment. ---- */

.team__grid {
    display: flex;
    gap: var(--chirripo-space-md, 1.5rem);
    margin: 0 0 var(--chirripo-space-lg, 3rem);
}

.team__grid .team__member {
    flex: 1;
    min-width: 0;
    transition: flex 0.45s ease-in-out;
}

/*
 * Limité au desktop (min-width ci-dessous, hors de portée du breakpoint
 * mobile à 768px) : .team__member est un <figure tabindex="0">, le focus
 * qu'il reçoit au clic PERSISTE après le clic (contrairement à cliquer
 * ailleurs, qui le fait perdre) — sans ce cantonnement, ce :focus-within
 * continuait de forcer flex:1.5 sur mobile même une fois .is-active retiré
 * (spécificité plus élevée que le flex-basis mobile), cassant le retour à
 * la grille 2x2 quand on referme la card active en cliquant dessus.
 */
@media (min-width: 769px) {

    .team__grid .team__member:hover,
    .team__grid .team__member:focus-within,
    .team__grid .team__member.is-active {
        flex: 1.5;
    }
}

/*
 * Mobile : grille 2 colonnes x 2 lignes toujours affichée telle quelle en
 * dessous (pas de hover fiable au tactile). Au tap (piloté par view.js), la
 * card passe en position:absolute et couvre tout le conteneur (inset:0) —
 * elle grandit donc à 100% en passant devant les 3 autres, qui restent en
 * place dans la grille, simplement recouvertes. position/inset ne pouvant
 * pas s'animer nativement en CSS, view.js applique la technique FLIP :
 * un transform (translate+scale) fixé sans transition juste avant/après le
 * changement d'état, puis relâché avec la transition active — l'oeil voit
 * un agrandissement fluide de la taille/position d'origine jusqu'au plein
 * cadre, sans jamais passer par un transform:scale() qui resterait actif
 * (donc sans flou ni texte visuellement déformé une fois l'animation finie).
 */
@media (max-width: 768px) {
    .team__grid {
        flex-wrap: wrap;
        position: relative;
    }

    .team__grid .team__member {
        flex: 1 1 calc(50% - var(--chirripo-space-md, 1.5rem) / 2);
        /* Sur .team__member lui-même (pas juste .is-active) : la technique
           FLIP en a besoin dans les deux sens — au retrait de .is-active,
           l'élément redevient un .team__member "nu", et sans transition
           déclarée ici aussi, le trajet retour se ferait sans animation
           (saut brut plutôt qu'un rétrécissement fluide). */
        transition: transform 0.45s ease-in-out;
    }

    .team__grid .team__member.is-active {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    /*
     * :hover "colle" sur tactile (comportement connu de plusieurs
     * navigateurs mobiles : un tap déclenche :hover, qui reste actif tant
     * qu'un autre élément ne le "vole" pas) — sans ce reset, le texte
     * révélé par la règle générale .team__member:hover .team__overlay
     * restait affiché même une fois la card redevenue une card normale de
     * la grille 2x2. Seul .is-active (piloté par view.js, donc fiable) doit
     * révéler le texte ici.
     */
    .team__grid .team__member:hover .team__overlay,
    .team__grid .team__member:focus-within .team__overlay {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }

    .team__grid .team__member.is-active .team__overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .team__grid .team__member.is-active .team__photo-wrap {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* ---- Mode "Carrousel" (page dédiée) : défilement horizontal plein
   écran, avec le membre suivant visible à moitié en bord d'écran. ---- */

.team__carousel {
    display: flex;
    gap: var(--chirripo-space-md, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin: 0 0 var(--chirripo-space-lg, 3rem);
    padding-bottom: var(--chirripo-space-sm, 0.75rem);
    scrollbar-width: none;
    box-sizing: border-box;
    width: 85vw;
    margin-left: calc(70% - 50vw);
}

.team__carousel::-webkit-scrollbar {
    display: none;
}

.team__carousel .team__member {
    flex: 0 0 clamp(240px, 24vw, 340px);
    scroll-snap-align: start;
    transition: flex-basis 0.45s ease-in-out;
}

/*
 * padding-left sur le container n'a aucun effet ici (scroll-snap-type sur
 * .team__carousel exclut son propre padding du snapport) : l'inset avant
 * le premier membre doit être posé directement sur son contenu. Ciblé sur
 * .team__photo-wrap, pas .team__member : ce dernier est aussi le
 * positioning context de .team__overlay (position:absolute), et lui
 * ajouter un padding-left y désynchronise nom/rôle/lien LinkedIn de
 * l'image (ils ne partagent pas le même box model — le texte se
 * retrouvait éjecté au-dessus de la photo au lieu de rester en overlay
 * dessus). box-sizing:border-box nécessaire ici : sans lui, le
 * padding-left s'ajouterait aux 100% de largeur au lieu d'être inclus
 * dedans, et l'image déborderait (juste rognée par l'overflow:hidden du
 * parent, mais pour la mauvaise raison).
 */
.team__carousel .team__member:first-child .team__photo-wrap {
    box-sizing: border-box;
}

/*
 * Desktop uniquement : le clamp() ci-dessous descendrait jusqu'à son
 * minimum sur les petits viewports faute de min-width ici, ce qui
 * pourrait passer sous le flex-basis mobile par défaut — la card
 * "agrandie" au survol/tap deviendrait alors plus petite que les autres,
 * l'inverse de l'effet voulu.
 */
@media (min-width: 769px) {

    .team__carousel .team__member:hover,
    .team__carousel .team__member:focus-within {
        flex-basis: clamp(320px, 32vw, 460px);
    }
}

@media (max-width: 768px) {
    .team__carousel .team__member {
        flex-basis: 60vw;
    }

    .team__carousel .team__member:hover,
    .team__carousel .team__member:focus-within {
        flex-basis: 76vw;
    }

    .team__carousel {
        margin-bottom: 0;
        gap: var(--chirripo-space-sm, 1rem);
        /* margin-left plein-bord (50vw) hérité de la règle de base
           ci-dessus, pas redéclaré ici — les deux avaient fini par
           diverger (49vw/41vw en desktop, -12vw/44vw en mobile), cause du
           bord blanc/scroll horizontal parasite sur Agence mobile. Une
           seule valeur, un seul endroit. */
    }

}

/* Forme/couleur/hover : .btn-pill (tokens.css) — n'avait auparavant aucun
   hover propre, il en profite maintenant du hover partagé. */

@media (prefers-reduced-motion: reduce) {

    .team__grid .team__member,
    .team__carousel .team__member,
    .team__overlay {
        transition: none;
    }

    .team__carousel {
        display: flex;
        gap: var(--chirripo-space-md, 1.5rem);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin: 0 0 var(--chirripo-space-lg, 3rem);
        padding-bottom: var(--chirripo-space-sm, 0.75rem);
        scrollbar-width: none;
        box-sizing: border-box;
        width: 85vw;
        margin-left: calc(60% - 50vw);
    }
}