/**
 * Bloc: Team - Fiches équipe carousel
 * Design exact selon Figma node 3991:3884
 * v4 — crossfade doux au hover (remplace slide-up)
 */

.team {
    padding: 80px 0 0 0;
    background-color: var(--color-blanc);
    overflow: visible;
}

/* Header avec titre - FOND BLANC */
.team__header {
    max-width: var(--container-max-width);
    margin: 0 auto 60px;
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right));
    background-color: var(--color-blanc);
}

.team__title {
    font-family: 'tt-commons-pro-thin', 'TT Commons Pro', sans-serif;
    font-size: 64px;
    font-weight: 100;
    line-height: 1.2;
    color: var(--color-noir);
    text-align: left;
    margin: 0;
}

/* Wrapper carousel avec navigation - FOND NOIR hauteur fixe */
.team__carousel-wrapper {
    position: relative;
    width: 100%;
    background-color: #000000;
    height: 740px;
}

/* Zone de scroll */
.team__carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
}

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

/* Grid horizontal - Hauteur fixe */
.team__grid {
    display: flex;
    gap: 20px;
    padding: 0 var(--marge-laterale);
    min-width: min-content;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

/* Fiche membre - Hauteur FIXE 740px */
.team__member {
    flex: 0 0 450px;
    height: 740px;
    width: 450px;
    max-width: 450px;
    max-height: 740px;
    background-color: #000;
    overflow: hidden;
    position: relative;
}

/* Card */
.team__card {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

/* Photo - plein cadre, fade out au hover */
.team__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 450px;
    height: 550px;
    overflow: hidden;
    transition: opacity 0.4s ease;
}

.team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    /* #34227 — eclaircissement tres leger et homogene des 4 photos (Anne se detachait
       mal du fond sur veste noire), sans casser le contraste */
    filter: brightness(1.05);
}

.team__member:hover .team__photo {
    opacity: 0;
}

/* Couche fermee — nom + titre en bas (visible par defaut, fade out au hover) */
/* Hauteur auto (pas de top fixe / overflow:hidden) : le panneau s'adapte au contenu et
   grandit vers le haut si besoin (recouvre le bas de la photo, meme fond noir que .team__card
   en dessous -> aucun impact visuel quand le contenu tient dans l'ancien gabarit 190px).
   Corrige le debordement du texte pour la fiche Julien (titre sur 4 lignes). */
.team__info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 35px;
    box-sizing: border-box;
    background-color: #000;
    z-index: 2;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team__info::after {
    content: '';
    position: absolute;
    bottom: 35px;
    left: 35px;
    right: 35px;
    height: 1px;
    background-color: rgba(240, 239, 239, 0.3);
}

/* Header du panneau hover — identique visuellement a .team__info */
/* #34227 (30/09) — padding-bottom:10px ajoute sous le bloc des fonctions, symetrique
   au gap de 10px deja present AU-DESSUS (entre le filet .team__separator et le texte
   .team__position, herite du gap:10px du flex-column). Sans lui le filet du bas
   (::after, bottom:0) etait colle au texte des fonctions -- aucun espace, contrairement
   au haut. Desktop uniquement : mobile a deja son propre correctif equivalent
   (padding-bottom:20px, regle mobile ci-dessous, #648 tour 4). */
.team__content-header {
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.team__content-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(240, 239, 239, 0.3);
}

.team__member:hover .team__info {
    opacity: 0;
    pointer-events: none;
}

/* Couche ouverte — fond noir pleine hauteur, nom + titre + details (fade in au hover) */
.team__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    padding: 65px 35px 35px 35px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 239, 239, 0.55) transparent;
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* #34227 (25/09) — fiche Julien (titre + bio + expertises + cursus longs) : le
   contenu depasse la hauteur fixe de la card (740px) et "Mon Cursus" etait tronque
   sans indice visuel qu'il fallait faire defiler. Le scroll interne existait deja
   (overflow-y: auto) mais etait quasi invisible (barre 3px, opacite 0.3) : personne
   ne la remarquait. Fix : barre plus visible (5px, opacite 0.55) + degrade de fondu
   en bas du panneau (sticky, ne consomme pas de hauteur de scroll) qui signale
   qu'il reste du contenu a faire defiler. Sur les fiches sans debordement (Marc,
   Anne, Amelie), le degrade se fond dans le fond noir identique : aucun changement
   visuel, aucune fiche cassee. */
.team__content::-webkit-scrollbar {
    width: 5px;
}

.team__content::-webkit-scrollbar-thumb {
    background: rgba(240, 239, 239, 0.55);
    border-radius: 3px;
}

.team__content::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    margin-top: -30px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 85%);
    pointer-events: none;
}

.team__member:hover .team__content {
    opacity: 1;
    pointer-events: auto;
}

/* Animation hover sur les enfants de .team__content */
/* Les éléments partent de translateY(10px) opacity 0 et arrivent à leur état normal */
/* Stagger via transition-delay : nom 0s, séparateur 0.05s, titre 0.1s, détails 0.18s */

.team__content .team__name {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0s;
}

.team__content .team__separator {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.05s;
}

.team__content .team__position {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.1s;
}

.team__content .team__details {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
    transition-delay: 0.18s;
}

.team__member:hover .team__content .team__name,
.team__member:hover .team__content .team__separator,
.team__member:hover .team__content .team__position,
.team__member:hover .team__content .team__details {
    opacity: 1;
    transform: translateY(0);
}

/* Typographie */
.team__name {
    font-family: 'PP Neue Machina', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #F0EFEF;
    margin: 0;
    line-height: 26.4px;
    letter-spacing: -0.04em;
}

.team__separator {
    width: 100%;
    height: 1px;
    background-color: rgba(240, 239, 239, 0.3);
    margin: 0;
}

.team__position {
    font-family: 'PP Neue Machina', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #F0EFEF;
    margin: 0;
    line-height: 22px;
    letter-spacing: 0;
}

/* Détails (bio, expertises, cursus) */
.team__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 25px;
}

.team__details__heading {
    font-family: 'PP Neue Machina', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #F0EFEF;
    line-height: 19px;
    margin: 0;
    letter-spacing: 0;
}

.team__details__heading:not(:first-child) {
    margin-top: 12px;
}

.team__details__text {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #F0EFEF;
    line-height: 25px;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Navigation flèches */
.team__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.team__nav:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.team__nav--prev {
    left: 20px;
}

.team__nav--next {
    right: 20px;
}

.team__nav svg {
    width: 24px;
    height: 24px;
}

/* Responsive Mobile */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .team {
        padding: 60px 0 0 0;
    }

    .team__header {
        margin-bottom: 40px;
    }

    .team__title {
        font-size: 32px;
    }

    .team__carousel-wrapper {
        height: auto;
    }

    /* Pas de scrollbar horizontal en mode colonne */
    .team__carousel {
        overflow-x: hidden;
    }

    /* Colonne unique : membres empilés verticalement */
    .team__grid {
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 0;
        height: auto;
        min-width: unset;
        justify-content: flex-start;
    }

    /* Override du flex fixe desktop — pleine largeur */
    .team__member {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none; /* AJOUTER — override du 740px desktop qui tronquait le contenu */
        position: static;
        margin-bottom: 20px; /* Espace entre les fiches membres */
    }

    .team__card {
        position: static;
        height: auto;
    }

    .team__photo {
        position: static;
        width: 100%;
        height: 400px; /* Plus de hauteur pour montrer plus de la photo (était 320px) */
    }

    /* Désactiver le hover desktop qui cache la photo */
    .team__member:hover .team__photo {
        opacity: 1;
    }

    .team__member:hover .team__info {
        opacity: 1;
        pointer-events: auto;
    }

    .team__member:hover .team__content {
        opacity: 1;
    }

    /* Annuler les animations hover sur enfants .team__content (mobile = pas de hover) */
    .team__content .team__name,
    .team__content .team__separator,
    .team__content .team__position,
    .team__content .team__details {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .team__info {
        display: none;
    }

    /* Zone header toujours visible : nom + titre */
    .team__content {
        position: static;
        opacity: 1;
        height: auto;
        padding: 20px 24px 0 24px;
        overflow-y: visible;
        pointer-events: auto;
    }

    /* #34227 (25/09) — le degrade de fondu bas (ajoute pour le scroll interne desktop,
       cf. regle de base .team__content::after) n'a pas lieu d'etre ici : mobile est en
       flux libre (overflow-y: visible, accordeon max-height), rien n'est tronque. Sans
       ce retrait, le degrade sticky se figerait en position statique et recouvrirait
       la fin du texte "Mon Cursus" sur toutes les fiches mobiles. */
    .team__content::after {
        display: none;
    }

    .team__content-header {
        min-height: auto;
        padding-bottom: 20px; /* #648 tour 4 — espace entre texte fonction et filet ::after (bottom:0) */
        cursor: pointer; /* Indique que la zone est cliquable */
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 10px; /* Espacement au-dessus du filet (nom → séparateur) */
    }

    /* Nom sur la première ligne, à gauche — le "+" sera à droite sur la même ligne */
    .team__content-header .team__name {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    /* Séparateur en deuxième ligne, pleine largeur */
    .team__content-header .team__separator {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: 8px; /* #648 — éloigner le filet du texte fonction en dessous */
    }

    /* Titre en troisième ligne, à gauche */
    .team__content-header .team__position {
        grid-column: 1;
        grid-row: 3;
    }

    /* Bouton toggle "+" / "×" — sans bordure, juste le caractère */
    .team__toggle-btn {
        display: flex; /* Visible uniquement mobile */
        align-items: center;
        justify-content: center;
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: 28px;
        height: 28px;
        background: transparent;
        border: none; /* Pas de bordure */
        color: #F0EFEF;
        font-family: 'PP Neue Machina', sans-serif;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .team__member.is-expanded .team__toggle-btn {
        transform: rotate(45deg); /* "+" devient "×" */
    }

    /* Détails : masqués par défaut, dépliables */
    .team__details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        margin-top: 0;
    }

    .team__member.is-expanded .team__details {
        max-height: 2000px; /* Valeur suffisamment grande pour tout contenu */
    }

    /* Padding bottom du content uniquement quand déplié */
    .team__member.is-expanded .team__content {
        padding-bottom: 20px;
    }

    .team__name {
        font-size: 22px;
        line-height: 1.2;
    }

    .team__position {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Masquer la navigation carousel (inutile en colonne) */
    .team__nav {
        display: none;
    }
}

/* Tablette portrait (tactile, de 769px a 1032px) : les 4 fiches en grille 2x2, accordeon au toucher.
   Pose apres le bloc Compact (cascade). align-items: start : une fiche depliee allonge sa
   rangee sans etirer sa voisine. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 769px) and (max-width: 1032px) {
    .team__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 0 var(--marge-laterale);
        align-items: start;
    }

    .team__member {
        margin-bottom: 0;
    }
}

/* Desktop : cacher le bouton toggle (inutile, le hover CSS gère) */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none), (min-width: 769px) and (orientation: landscape), (min-width: 1033px) {
    .team__toggle-btn {
        display: none;
    }

    /* #34227 (30/09) — voir commentaire au-dessus de .team__content::after (regle de
       base) : garantit que le degrade de fondu ne recouvre jamais la derniere ligne de
       texte reel, quelle que soit la fiche. */
    .team__details {
        padding-bottom: 30px;
    }
}

/* Desktop (769px–2200px) : fiches fluides pour tenir sur 4 colonnes, flèches masquées */
/* Seuil étendu de 1500px à 2200px — fix Modif#5 : 4 fiches fixes 450px requièrent 2020px min, */
/* ce qui coupait Amélie entre 1500px et 2000px. flex:1 1 0 résout sans toucher au JS ni au HTML. */
@media (min-width: 769px) and (hover: hover) and (max-width: 2200px), (min-width: 769px) and (pointer: fine) and (max-width: 2200px), (min-width: 769px) and (pointer: none) and (max-width: 2200px), (min-width: 769px) and (orientation: landscape) and (max-width: 2200px), (min-width: 1033px) and (max-width: 2200px) {
    /* Le wrapper prend la hauteur dictée par les fiches */
    .team__carousel-wrapper {
        height: auto;
    }

    /* Pas de scroll horizontal : les fiches se partagent la largeur */
    .team__carousel {
        overflow-x: hidden;
    }

    /* Grid : pas de min-width forcé, les fiches se répartissent.
       #34227 (30/09) — align-items:stretch (override du flex-start de base, team.css L.~66)
       pour que les 4 .team__member s'egalisent sur la hauteur de la plus haute (Julien,
       titre 4 lignes). Sans ce override, chaque fiche gardait sa hauteur de contenu propre
       et le filet du bas de .team__info n'etait pas a la meme position d'une personne a
       l'autre (ex. Marc bien plus haut que Julien). */
    .team__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 450px));
        justify-content: center;
        min-width: unset;
        padding: 0 max(var(--marge-laterale), calc((100% - 1600px) / 2 + var(--marge-laterale)));
        gap: 12px;
        align-items: stretch;
    }

    /* Fiches fluides : s'adaptent à l'espace disponible */
    .team__member {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
    }

    /* La carte : contexte de positionnement pour le hover overlay.
       #34227 (30/09) — height:100% (au lieu de auto) pour que la carte remplisse le
       .team__member desormais etire (align-items:stretch sur .team__grid) a la hauteur
       de la fiche la plus haute (Julien). */
    .team__card {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Photo : largeur 100% de la fiche, hauteur proportionnelle via padding-bottom */
    .team__photo {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 122%; /* ratio 450×550 ≈ 1.22 */
        flex-shrink: 0;
    }

    .team__photo img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    /* Info (nom+titre fermé) : suit le flux sous la photo */
    /* padding-bottom porte a 30px (au lieu de 20px, meme valeur que top/left/right) :
       reserve, entre la derniere ligne du texte de fonction et le filet du bas (::after),
       le meme espace (10px, le gap flex existant entre le filet du haut .team__separator
       et la premiere ligne) qu'au-dessus -- mesure a 0px avant correction sur la fiche la
       plus haute (Julien, celle qui dicte la hauteur des 4 via align-items:stretch). */
    .team__info {
        position: relative;
        top: auto;
        bottom: auto;
        width: 100%;
        padding: 20px 20px 30px 20px;
        min-height: 190px;
        flex: 1;
    }

    /* Filet sous le texte : la regle de base (bottom:35px) est calibree sur le padding
       35px du layout desktop fixe (>2200px). Dans CE breakpoint le padding de .team__info
       est 20px (ligne 594) : sans cette surcharge le filet, positionne a 35px du bas du
       panneau, empietait de 15px sur le contenu quand celui-ci depasse min-height (cas
       Julien, titre sur 4 lignes). En alignant bottom sur le meme padding (20px), le filet
       se retrouve toujours exactement apres le contenu, quelle que soit sa hauteur. */
    /* #34227 (30/09) — left/right restaient a 35px (valeur de la regle de base, calibree
       pour le padding 35px du layout desktop fixe >2200px) alors que .team__info a ICI un
       padding de 20px (ligne ~594) : le filet du bas demarrait 15px plus a droite et
       finissait 15px plus tot que le filet du haut (.team__separator, qui suit lui le vrai
       padding 20px). Alignes sur le padding reel de ce breakpoint. */
    .team__info::after {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    /* Couche hover : overlay absolu sur toute la card */
    .team__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 40px 20px 20px 20px;
    }

    /* Masquer les flèches : les 4 fiches tiennent sans carousel */
    .team__nav {
        display: none;
    }
}

/* Paysage tactile (tablettes et telephones en paysage) : titre de section reduit */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1376px) {
    .team__title {
        font-size: 52px;
    }
}