/*
 * Section Notre équipe — Figma node 2644:68363.
 *
 * Cadrage de la maquette : padding vertical 96, gap 48 entre l'en-tête et le corps, en-tête
 * bridé à 884 et centré, puis gap 24 entre filtres, grille et pagination. La grille tient
 * quatre fiches de 348 séparées de 32 : 4 x 348 + 3 x 32 = 1488, soit la largeur de contenu.
 */

.section-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--section-space);
}

.section-team__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 884px dans la maquette. */
    width: min(884px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-team__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-team__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

.section-team__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
}

/* ---- Filtres ---- */

.section-team__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Composant Filter du design system — Figma node 2288:27217, trois états : Base, Hover,
 * Active. Hover et Active partagent le même habillage, seule la croix les distingue.
 */
.section-team__filter {
    display: flex;
    gap: var(--space-compact);
    align-items: center;
    justify-content: center;
    /* 16 de chaque côté : dans la maquette c'est 8 sur la pastille plus 8 sur le conteneur
       de texte. La pastille active reprend 8 à gauche pour y loger la croix. */
    padding: var(--space-micro) var(--space-m);
    /* La maquette dessine des pastilles de 34 de haut, sous les 44 recommandés pour une
       cible tactile. On rattrape par une zone de clic invisible plutôt qu'en grossissant la
       pastille, qui doit rester conforme au dessin. */
    position: relative;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-alpha-10);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-600);
    text-decoration: none;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

.section-team__filter::after {
    content: "";
    position: absolute;
    inset-block: -5px;
    inset-inline: 0;
}

/* État Hover de la maquette : la pastille passe en primary, pas en beige plus foncé. Le
   focus clavier reçoit le même traitement, sans quoi il resterait moins lisible que la
   souris. */
.section-team__filter:hover,
.section-team__filter:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

.section-team__filter--active .section-team__filter-cross {
    display: block;
}

.section-team__filter--active {
    /* La croix occupe les 8 reprises à gauche. */
    padding-left: var(--space-compact);
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

/* La maquette ne dessine pas le survol de la pastille active. Elle est pourtant un lien qui
   fait quelque chose — retirer le filtre — donc elle s'assombrit d'un cran plutôt que de ne
   rien répondre au pointeur. */
.section-team__filter--active:hover,
.section-team__filter--active:focus-visible {
    background-color: var(--color-primary-900);
}

/*
 * Croix de 5x5 de la maquette, tracée en CSS : deux traits suffisent, ça évite un fichier SVG
 * et une requête pour dix pixels.
 *
 * Elle est rendue sur CHAQUE pastille et masquée sauf sur l'active. C'est ce qui permet au
 * moteur commun de n'avoir aucune balise à créer ni à détruire quand l'état change.
 */
.section-team__filter-cross {
    display: none;
    position: relative;
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

.section-team__filter-cross::before,
.section-team__filter-cross::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: 50%;
    width: 1px;
    background-color: currentColor;
}

.section-team__filter-cross::before {
    transform: rotate(45deg);
}

.section-team__filter-cross::after {
    transform: rotate(-45deg);
}

/* ---- Résultats : bloc remplacé sans rechargement ---- */

/* Le fondu du remplacement, la région d'annonce et l'anneau de focus du bloc sont dans le
   partial « filtered-grid » : ils font partie du comportement, pas du dessin. */
.section-team__results {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
}

/*
 * Sortie : le bloc s'efface. L'entrée est portée par les fiches elles-mêmes, avec un léger
 * décalage de l'une à l'autre — c'est ce qui distingue un remplacement d'un clignotement.
 */
.section-team__item {
    animation: bel-team-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Décalage par rang, sans passer par le JavaScript : huit fiches par page, donc huit règles.
   Plafonné à 8 x 25 = 200ms pour que la dernière fiche n'arrive pas en retard. */
.section-team__item:nth-child(2) { animation-delay: 25ms; }
.section-team__item:nth-child(3) { animation-delay: 50ms; }
.section-team__item:nth-child(4) { animation-delay: 75ms; }
.section-team__item:nth-child(5) { animation-delay: 100ms; }
.section-team__item:nth-child(6) { animation-delay: 125ms; }
.section-team__item:nth-child(7) { animation-delay: 150ms; }
.section-team__item:nth-child(8) { animation-delay: 175ms; }

@keyframes bel-team-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/*
 * Mouvement réduit : plus aucun déplacement ni fondu. Le contenu apparaît d'un coup, ce qui
 * est exactement ce que demande le réglage — et le script, qui interroge la même préférence,
 * n'attend alors pas la fin d'une transition qui n'existe plus.
 */
@media (prefers-reduced-motion: reduce) {
    /* Le fondu du bloc est coupé par le partial ; ici il ne reste que l'entrée des fiches. */
    .section-team__item {
        animation: none;
    }
}

/* ---- Grille ---- */

.section-team__grid {
    display: grid;
    /* Quatre colonnes de 348 dans la maquette. Le minimum est la largeur réelle de la fiche,
       et non une valeur ronde plus petite : à 260 il restait la place d'une cinquième colonne
       dans les 1490 du conteneur. À 348, 4 x 348 + 3 x 32 = 1488 passe, 5 ne passe pas — la
       grille se réorganise ensuite d'elle-même en 3 puis 2 colonnes, sans cascade de points
       de rupture. Le min() évite un débordement sous 348px de large. */
    grid-template-columns: repeat(auto-fill, minmax(min(348px, 100%), 1fr));
    gap: var(--space-bloc);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-team__card {
    position: relative;
    display: flex;
    /* La fiche est un rectangle de 348x454 dans la maquette. En ratio plutôt qu'en hauteur
       fixe, elle suit la largeur que la grille lui donne. */
    aspect-ratio: 348 / 454;
    overflow: hidden;
}

.section-team__media {
    position: absolute;
    inset: 0;
}

.section-team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fiche sans photo : fond beige et silhouette dorée, dans la partie haute laissée libre par le
   dégradé du texte. */
.section-team__media--picto {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block-start: 18%;
    background-color: var(--color-secondary-300);
    color: var(--color-secondary-500);
}

.section-team__picto {
    width: 44%;
    height: auto;
}

/*
 * Dégradé du bas vers le haut : opaque à 17,3 % de la hauteur, transparent à 84,6 %. Il est
 * posé sur le conteneur du texte lui-même, qui occupe toute la fiche — pas sur un calque en
 * plus.
 */
.section-team__info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-list);
    background-image: linear-gradient(
        to top,
        var(--color-primary-alpha-90) 17.308%,
        var(--color-primary-alpha-0) 84.615%
    );
}

.section-team__badge {
    padding: var(--space-micro) var(--space-s);
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    font-size: var(--font-size-small);
    line-height: 1.2;
    color: var(--color-primary-50);
}

.section-team__identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
    align-self: stretch;
    color: var(--color-primary-50);
}

.section-team__name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
}

.section-team__role {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
}

.section-team__empty {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

/* ---- Pagination ---- */

.section-team__pagination-list {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-team__pagination-list a,
.section-team__pagination-list span {
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px de cible tactile, alors que la maquette ne montre qu'un chiffre : le carré est
       transparent, seul le chiffre se voit. */
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

.section-team__pagination-list a:hover,
.section-team__pagination-list a:focus-visible {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}

.section-team__pagination-list .current {
    color: var(--color-primary);
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-team {
        --container-gutter: var(--space-bloc);
        gap: var(--space-large);
        padding-block: var(--section-space);
    }

    /* Sous les 1200, garder 348 en minimum ne laissait la place qu'à deux colonnes jusqu'à
       1150 : des fiches de 500 de large, pour un portrait dessiné à 348. On desserre. */
    .section-team__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    }
}

@media (max-width: 768px) {
    .section-team {
        --container-gutter: var(--space-m);
    }

    .section-team__grid {
        /* Deux colonnes tenues jusqu'en bas : une fiche pleine largeur donnerait un portrait
           de 454 de haut étiré sur tout l'écran. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-m);
    }

    .section-team__info {
        padding: var(--space-m);
    }

    .section-team__pagination-list {
        justify-content: center;
    }
}