/* ============================================================
   PORTRAIT 5 — L'EQUIPE
   De une a quatre personnes. Seule : grand portrait et presentation
   complete. A plusieurs : les portraits cote a cote, en onglets, et la
   presentation de la personne choisie en dessous.

   Pas de photo ronde ni d'icones : des portraits verticaux, comme des
   tirages poses sur une table, et la personne choisie se detache par la
   lumiere (les autres s'estompent), pas par un badge.

   Signature : changement de personne en fondu croise avec legere
   translation, sans saut de hauteur — les panneaux sont empiles dans la
   meme cellule de grille, la plus haute fiche donne la hauteur. Sans JS,
   le premier panneau seul est affiche (attribut hidden sur les autres).
   ============================================================ */

.portrait-5 {
    padding: clamp(4rem, 9vw, 8rem) 5%;
    background: var(--gray-light);
    color: var(--black);
}

.portrait-5__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---- En-tete ------------------------------------------------- */
.portrait-5__entete {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
        "surtitre surtitre"
        "titre intro";
    align-items: end;
    column-gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.portrait-5__surtitre {
    grid-area: surtitre;
    margin: 0 0 1rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.portrait-5__titre,
.portrait-5__titre:hover {
    grid-area: titre;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 500;
    line-height: 1.12;
    color: var(--black);
}

.portrait-5__titre .mcl-accent {
    font-style: italic;
    color: var(--primary);
}

.portrait-5__intro {
    grid-area: intro;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gray-dark);
}

/* ---- Une seule personne -------------------------------------- */
.portrait-5__solo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
}

.portrait-5__solo--sans-photo {
    grid-template-columns: minmax(0, 1fr);
}

.portrait-5__visuel {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 50vw 50vw 6px 6px;   /* arche : la forme organique du site (cf. hero-12) */
    background: var(--gray-light);
}

.portrait-5__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.portrait-5--seul .portrait-5__fiche {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;
}

.portrait-5--seul .portrait-5__actions {
    margin-top: 0.5rem;
}

/* ---- Onglets (plusieurs personnes) --------------------------- */
.portrait-5__choix {
    display: grid;
    grid-template-columns: repeat(var(--portrait-5-n, 3), minmax(0, 13rem));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.portrait-5__onglet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    position: relative;
    padding: 0 0 0.9rem;
    border: 0;
    background: none;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.portrait-5__onglet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portrait-5__onglet-cadre {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 50vw 50vw 6px 6px;   /* arche : la forme organique du site (cf. hero-12) */
    background: var(--gray-light);
    opacity: 0.55;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portrait-5__onglet-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.portrait-5__onglet-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-style: italic;
    line-height: 1;
    color: var(--primary);
}

.portrait-5__onglet-nom {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.25;
    color: var(--gray-dark);
    transition: color 0.25s ease;
}

.portrait-5__onglet-fonction {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--gray-dark);
}

.portrait-5__onglet:hover .portrait-5__onglet-cadre {
    opacity: 0.85;
}

.portrait-5__onglet:hover .portrait-5__onglet-nom {
    color: var(--black);
}

.portrait-5__onglet:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.portrait-5__onglet[aria-selected="true"]::after {
    transform: scaleX(1);
}

.portrait-5__onglet[aria-selected="true"] .portrait-5__onglet-cadre {
    opacity: 1;
}

.portrait-5__onglet[aria-selected="true"] .portrait-5__onglet-photo {
    transform: scale(1.03);
}

.portrait-5__onglet[aria-selected="true"] .portrait-5__onglet-nom {
    color: var(--black);
}

/* ---- Panneaux ------------------------------------------------ */
.portrait-5__panneaux {
    display: grid;
}

.portrait-5__panneau {
    grid-area: 1 / 1;
}

/* Sans JS, seul le premier panneau s'affiche. La fiche est en `display: grid`,
   qui l'emporterait sur le `display: none` que le navigateur donne a [hidden]. */
.portrait-5__panneau[hidden] {
    display: none;
}

.portrait-5__panneau:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 6px;
}

/* ---- Fiche d'une personne ------------------------------------ */
.portrait-5__fiche {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.portrait-5__nom,
.portrait-5__nom:hover {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--black);
}

.portrait-5__fonction {
    margin: 0.4rem 0 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--gray-dark);
}

.portrait-5__citation {
    margin: 1.75rem 0 0;
    padding-left: 1.1rem;
    border-left: 1px solid var(--primary);
}

.portrait-5__citation-bloc {
    margin: 0;
    padding: 0;
}

.portrait-5__citation-texte {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--black);
}

.portrait-5__citation-texte .mcl-accent {
    color: var(--primary);
}

.portrait-5__para {
    margin: 0 0 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--gray-dark);
}

.portrait-5__libelle {
    margin: 1.75rem 0 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-dark);
}

.portrait-5__formations {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portrait-5__formation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gray-dark) 22%, transparent);
}

.portrait-5__formation-intitule {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--black);
}

.portrait-5__formation-annee {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--gray-dark);
    font-variant-numeric: tabular-nums;
}

/* ---- Bouton -------------------------------------------------- */
.portrait-5__actions {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.portrait-5__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.9rem;
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--on-accent);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.portrait-5__btn:hover,
.portrait-5__btn:focus-visible {
    background: color-mix(in srgb, var(--accent) 84%, var(--black));
    color: var(--on-accent);
}

.portrait-5__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- Signature (armee par le JS) -----------------------------
   Tous les panneaux restent dans la grille (le JS retire `hidden`) : la
   cellule prend la hauteur du plus haut, donc changer de personne ne fait
   jamais sauter la page. Les inactifs sont invisibles ET inertes. */
.portrait-5--anime .portrait-5__panneau {
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.25rem);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}

.portrait-5--anime .portrait-5__panneau.is-sortant {
    transform: translateX(-1.25rem);
}

.portrait-5--anime .portrait-5__panneau.is-actif {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, visibility 0s linear 0s;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
    .portrait-5__entete {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "surtitre"
            "titre"
            "intro";
    }

    .portrait-5__intro {
        margin-top: 1rem;
    }

    .portrait-5__solo,
    .portrait-5__fiche {
        grid-template-columns: minmax(0, 1fr);
    }

    .portrait-5__visuel {
        width: min(100%, 26rem);
    }
}

@media (max-width: 768px) {
    .portrait-5__choix {
        grid-template-columns: repeat(var(--portrait-5-n, 3), minmax(0, 1fr));
    }

    .portrait-5__onglet-fonction {
        display: none;
    }
}

@media (max-width: 480px) {
    .portrait-5__onglet-nom {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portrait-5__onglet::after,
    .portrait-5__onglet-cadre,
    .portrait-5__onglet-photo,
    .portrait-5--anime .portrait-5__panneau,
    .portrait-5--anime .portrait-5__panneau.is-actif {
        transform: none;
        transition: none;
    }
}