/* ============================================================
   PORTRAIT 2 — LETTRE OUVERTE
   Une colonne etroite, comme une lettre ecrite a la premiere personne :
   medaillon ovale en tete (jamais l'avatar rond d'une page equipe),
   lettrine, puis le nom pose en fin de texte, a la maniere d'une signature.
   Les formations viennent en post-scriptum, sans badge.

   Signature : les paragraphes apparaissent un a un, lentement, comme une
   lecture. Etats caches uniquement sous .portrait-2--anime (pose par le JS).
   ============================================================ */

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

.portrait-2__feuille {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

/* ---- Medaillons --------------------------------------------- */
.portrait-2__medaillons {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.portrait-2__medaillon {
    display: block;
    width: clamp(5.5rem, 9vw, 7rem);
    height: auto;   /* l'attribut height du <img> l'emporterait sur aspect-ratio */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 999px;
    background: var(--gray-light);
}

.portrait-2__medaillons--groupe .portrait-2__medaillon {
    width: clamp(4.25rem, 7vw, 5.25rem);
    border: 3px solid var(--gray-light);
}

.portrait-2__medaillons--groupe .portrait-2__medaillon + .portrait-2__medaillon {
    margin-left: -1.1rem;
}

/* ---- En-tete ------------------------------------------------- */
.portrait-2__surtitre {
    margin: 0 0 0.9rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.portrait-2__titre,
.portrait-2__titre:hover {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--black);
}

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

/* ---- La lettre ----------------------------------------------- */
.portrait-2__lettre {
    width: 100%;
    max-width: 34rem;
    text-align: left;
}

.portrait-2__para {
    margin: 0 0 1.35rem;
    font-family: var(--font-display);
    font-size: clamp(1.075rem, 1.35vw, 1.225rem);
    line-height: 1.8;
    color: var(--black);
}

.portrait-2__para--premier::first-letter {
    float: left;
    margin: 0.08em 0.12em 0 0;
    font-family: var(--font-display);
    font-size: 3.6em;
    font-style: italic;
    line-height: 0.82;
    color: var(--primary);
}

/* ---- Signature ----------------------------------------------- */
.portrait-2__signature {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-left: clamp(0rem, 12vw, 9rem);
}

.portrait-2__formule {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--gray-dark);
}

.portrait-2__nom,
.portrait-2__nom:hover {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.2rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
}

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

/* ---- Cosignataires et post-scriptum -------------------------- */
.portrait-2__cosignataires,
.portrait-2__ps {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--gray-dark) 22%, transparent);
}

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

.portrait-2__membres {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portrait-2__membre-nom,
.portrait-2__membre-nom:hover {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--black);
}

.portrait-2__membre-fonction {
    margin: 0.15rem 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-dark);
}

.portrait-2__formations {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--black);
}

.portrait-2__formation {
    display: inline;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--black);
}

.portrait-2__formation + .portrait-2__formation::before {
    content: " · ";
    color: var(--gray-dark);
}

.portrait-2__formation-annee {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--gray-dark);
}

/* ---- Bouton -------------------------------------------------- */
.portrait-2__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(2.5rem, 4vw, 3.25rem);
    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-2__btn:hover,
.portrait-2__btn:focus-visible {
    background: color-mix(in srgb, var(--accent) 84%, var(--black));
    color: var(--on-accent);
}

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

/* ---- Signature (armee par le JS) -----------------------------
   Le JS revele les morceaux de la lettre UN PAR UN, a son rythme : la
   cadence est la sienne, pas celle d'un transition-delay qui partirait
   pendant que le paragraphe est encore hors de l'ecran. */
.portrait-2--anime .portrait-2__para,
.portrait-2--anime .portrait-2__signature,
.portrait-2--anime .portrait-2__cosignataires,
.portrait-2--anime .portrait-2__ps {
    opacity: 0;
    transform: translateY(0.6rem);
    filter: blur(3px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.portrait-2--anime .portrait-2__para.is-visible,
.portrait-2--anime .portrait-2__signature.is-visible,
.portrait-2--anime .portrait-2__cosignataires.is-visible,
.portrait-2--anime .portrait-2__ps.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 768px) {
    .portrait-2__signature {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portrait-2--anime .portrait-2__para,
    .portrait-2--anime .portrait-2__signature,
    .portrait-2--anime .portrait-2__cosignataires,
    .portrait-2--anime .portrait-2__ps {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}