.portrait-index-card {
    background: var(--paper);
    display: grid;
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
    margin-top: 64px;
    min-height: 660px;
}

.portrait-index-card__image {
    background: #ded5c8;
    display: flex;
    overflow: hidden;
}

.portrait-index-card__image img {
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    transition: transform 600ms ease;
    width: 100%;
}

.portrait-index-card:hover .portrait-index-card__image img {
    transform: scale(1.018);
}

.portrait-index-card__copy {
    align-self: center;
    padding: clamp(44px, 7vw, 104px);
}

.portrait-index-card__copy h3 {
    font-size: clamp(52px, 6vw, 86px);
    letter-spacing: var(--ls-display);
    line-height: .92;
    margin: 18px 0 22px;
}

.portrait-index-card__role {
    color: var(--terracotta);
    font-family: var(--serif);
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.03;
    margin: 0 0 28px;
}

.portrait-index-card__copy > p:not(.eyebrow, .portrait-index-card__role) {
    color: rgb(36 23 17 / 74%);
    font-family: var(--serif);
    font-size: var(--fs-read);
    line-height: 1.45;
    max-width: 650px;
}

.portrait-hero {
    background: var(--chocolate);
    color: var(--paper);
    padding-top: 108px;
    position: relative;
}

.portrait-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(440px, .72fr);
    margin-inline: auto;
    max-width: 1500px;
    min-height: 790px;
}

.portrait-hero__copy {
    align-self: center;
    padding: clamp(64px, 8vw, 118px) var(--page-padding);
}

.portrait-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-caption);
    gap: 10px;
    letter-spacing: var(--ls-label);
    margin: 0 0 54px;
    text-transform: uppercase;
}

.portrait-breadcrumb a {
    text-underline-offset: 5px;
}

.portrait-hero h1 {
    font-size: clamp(64px, 7.2vw, 104px);
    letter-spacing: var(--ls-display);
    line-height: .84;
    margin: 20px 0 34px;
}

.portrait-hero__lede {
    color: var(--gold);
    font-family: var(--serif);
    font-size: clamp(27px, 2.7vw, 42px);
    line-height: 1.02;
    margin: 0;
}

.portrait-hero__facts {
    border-top: 1px solid var(--white-line);
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-top: 52px;
    padding-top: 22px;
}

.portrait-hero__facts span {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.portrait-hero__media {
    align-self: stretch;
    background: #d8cdbd;
    margin: 0;
    min-height: 790px;
    overflow: hidden;
    position: relative;
}

.portrait-hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    width: 100%;
}

.portrait-hero__media figcaption,
.portrait-memory figcaption,
.portrait-lalbenque figcaption {
    background: rgb(36 23 17 / 88%);
    bottom: 0;
    color: var(--paper);
    font-size: 11px;
    left: 0;
    letter-spacing: .06em;
    padding: 9px 13px;
    position: absolute;
}

.portrait-article {
    overflow: hidden;
}

.portrait-reading {
    display: grid;
    gap: clamp(42px, 8vw, 118px);
    grid-template-columns: 180px minmax(0, 760px);
    justify-content: center;
    padding: clamp(90px, 10vw, 150px) var(--page-padding);
}

.portrait-section-marker {
    color: var(--terracotta);
    padding-top: 12px;
}

.portrait-section-marker span {
    font-family: var(--serif);
    font-size: 54px;
    line-height: 1;
}

.portrait-section-marker p {
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    margin: 14px 0 0;
    text-transform: uppercase;
}

.portrait-prose h2 {
    font-size: clamp(46px, 5vw, 70px);
    letter-spacing: var(--ls-display);
    line-height: .94;
    margin: 0 0 42px;
}

.portrait-prose p,
.portrait-memory__copy p,
.portrait-lalbenque__copy p {
    font-family: var(--serif);
    font-size: var(--fs-read);
    line-height: var(--lh-read);
    margin: 0 0 1.25em;
}

.portrait-dropcap::first-letter {
    color: var(--terracotta);
    float: left;
    font-family: var(--serif);
    font-size: 4.1em;
    line-height: .72;
    margin: .12em .12em 0 0;
}

/*
 * Portrait « pull vert » qui illustre la section « Faire grandir le jeu ».
 * Modeste (max 560px), aligné à gauche dans la colonne de texte, et
 * responsive : largeur 100% + hauteur auto (garde le ratio 16/9 de la photo).
 */
.portrait-transmission-photo {
    border-radius: 3px;
    margin: clamp(38px, 5vw, 60px) 0 0;
    max-width: 560px;
    overflow: hidden;
}

.portrait-transmission-photo img {
    display: block;
    height: auto;
    width: 100%;
}

.portrait-quote {
    background: var(--cocoa);
    color: var(--paper);
    margin: 0;
    padding: clamp(76px, 10vw, 142px) var(--page-padding);
    text-align: center;
}

.portrait-quote p {
    font-size: clamp(38px, 5vw, 72px);
    /* interlettrage détendu (au lieu de --ls-display -0.04em, trop condensé) */
    letter-spacing: -0.01em;
    /* interligne aéré (au lieu de .98, trop serré sur 3 lignes) */
    line-height: 1.16;
    margin: auto;
    max-width: 1080px;
}

.portrait-memory {
    background: var(--sage);
    color: var(--paper);
    display: grid;
    grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
}

.portrait-memory__media {
    background: #e9e0d3;
    margin: 0;
    min-height: 820px;
    overflow: hidden;
    padding: clamp(28px, 4vw, 60px);
    position: relative;
}

.portrait-memory__media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.portrait-memory__copy {
    align-self: center;
    padding: clamp(64px, 8vw, 120px);
}

.portrait-memory__copy h2,
.portrait-lalbenque__copy h2 {
    font-size: clamp(46px, 5vw, 72px);
    letter-spacing: var(--ls-display);
    line-height: .93;
    margin: 18px 0 42px;
}

.portrait-memory__closing {
    border-top: 1px solid var(--white-line);
    color: var(--gold);
    font-size: clamp(25px, 2.5vw, 36px) !important;
    line-height: 1.15 !important;
    margin-top: 34px !important;
    padding-top: 30px;
}

.portrait-lalbenque {
    background: var(--chocolate);
    color: var(--paper);
    display: grid;
    /* colonne image réduite (photo moins imposante, texte plus large) */
    grid-template-columns: minmax(0, .72fr) minmax(390px, 1.28fr);
}

/*
 * Photo « Vingt échiquiers » : le fichier est DÉJÀ recadré comme voulu
 * (2199 x 1816, ratio ~1,21). Le cadre reprend exactement ce ratio, donc la
 * photo est affichée en entier, sans recadrage supplémentaire, à toutes les
 * tailles (desktop, tablette, mobile). Responsive par nature (aspect-ratio +
 * width:100%). En desktop (bloc @media min-width:981px plus bas), elle est en
 * plus alignée en haut sur le texte et décalée du bord gauche.
 */
.portrait-lalbenque__media {
    align-self: center;
    aspect-ratio: 2199 / 1816;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.portrait-lalbenque__media img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.portrait-lalbenque__copy {
    align-self: center;
    padding: clamp(62px, 7vw, 106px);
}

.portrait-lalbenque__number {
    border-block: 1px solid var(--white-line);
    color: var(--gold);
    font-size: clamp(25px, 2.3vw, 34px) !important;
    line-height: 1.18 !important;
    margin: 34px 0 !important;
    padding: 27px 0;
}

.portrait-ending {
    background: var(--paper);
    padding: clamp(88px, 11vw, 160px) var(--page-padding);
    text-align: center;
}

.portrait-ending p {
    font-family: var(--serif);
    /* taille abaissée (avant : clamp(30px, 3.6vw, 52px)) pour un rendu plus posé */
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.14;
    margin: 0 auto 26px;
    max-width: 1000px;
}

.portrait-ending p:last-child {
    color: var(--terracotta);
}

.portrait-cta {
    align-items: center;
    background: #fff;
    display: grid;
    gap: clamp(42px, 7vw, 100px);
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
    margin: 0 auto clamp(90px, 10vw, 150px);
    max-width: 1120px;
    padding: clamp(38px, 6vw, 76px);
}

.portrait-cta__logo {
    display: block;
}

.portrait-cta__logo img {
    height: auto;
    margin: auto;
    max-height: 260px;
    object-fit: contain;
}

.portrait-cta__copy h2 {
    font-size: clamp(42px, 4.5vw, 64px);
    letter-spacing: var(--ls-display);
    line-height: .95;
    margin: 15px 0 22px;
}

.portrait-cta__copy p:not(.eyebrow) {
    color: rgb(36 23 17 / 72%);
    font-family: var(--serif);
    font-size: var(--fs-read);
    line-height: 1.42;
}

@media (max-width: 980px) {
    .portrait-hero {
        padding-top: 82px;
    }

    .portrait-hero__grid,
    .portrait-memory,
    .portrait-lalbenque {
        grid-template-columns: 1fr;
    }

    .portrait-hero__media {
        min-height: 720px;
    }

    .portrait-memory__media {
        min-height: 620px;
    }

    .portrait-lalbenque__media {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .portrait-index-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .portrait-index-card__image {
        aspect-ratio: 4 / 5;
    }

    .portrait-index-card__copy {
        padding: 40px 28px 48px;
    }

    .portrait-hero__copy {
        padding: 58px 24px 62px;
    }

    .portrait-breadcrumb {
        margin-bottom: 38px;
    }

    .portrait-hero h1 {
        font-size: clamp(56px, 19vw, 78px);
    }

    .portrait-hero__media {
        min-height: 0;
    }

    .portrait-hero__media img {
        height: auto;
        object-fit: contain;
    }

    .portrait-reading {
        gap: 32px;
        grid-template-columns: 1fr;
        padding-inline: 24px;
    }

    .portrait-section-marker {
        align-items: baseline;
        display: flex;
        gap: 18px;
    }

    .portrait-section-marker span {
        font-size: 42px;
    }

    .portrait-prose h2,
    .portrait-memory__copy h2,
    .portrait-lalbenque__copy h2 {
        font-size: clamp(42px, 13vw, 58px);
    }

    .portrait-memory__media {
        min-height: 0;
        padding: 24px;
    }

    .portrait-memory__media img {
        height: auto;
    }

    .portrait-memory__copy,
    .portrait-lalbenque__copy {
        padding: 62px 24px;
    }

    .portrait-lalbenque__media {
        min-height: 0;
    }

    .portrait-cta {
        grid-template-columns: 1fr;
        margin-inline: 24px;
        text-align: center;
    }

    .portrait-cta__logo img {
        max-height: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portrait-index-card__image img {
        transition: none;
    }
}

/*
 * Alignement de la 2e section d'article (« Faire grandir le jeu ») sur le
 * texte de la zone verte située juste au-dessus (« À la table de Kasparov »).
 * Uniquement à partir de 981 px : en dessous, la zone verte passe en une seule
 * colonne et cet alignement n'a plus lieu d'être.
 * La 1re section (.portrait-reading--opening) n'est volontairement pas touchée.
 * Le début du texte vert vaut : 39 % de la largeur (colonne image) + son retrait
 * intérieur clamp(64px, 8vw, 120px). On y soustrait la colonne repère (180px)
 * et l'espacement de la grille clamp(42px, 8vw, 118px).
 */
@media (min-width: 981px) {
    .portrait-reading:not(.portrait-reading--opening) {
        justify-content: start;
        padding-left: calc(39% + clamp(64px, 8vw, 120px) - 180px - clamp(42px, 8vw, 118px));
        padding-right: var(--page-padding);
    }

    /*
     * Photo « Vingt échiquiers » sur desktop : alignée en HAUT avec le texte
     * (align-self:start des deux côtés + marge haute = retrait haut du texte),
     * et DÉCALÉE du bord gauche (marge gauche) pour ne plus être collée au bord.
     * width:auto laisse la grille remplir la colonne moins ces marges.
     */
    .portrait-lalbenque__copy {
        align-self: start;
    }

    .portrait-lalbenque__media {
        align-self: start;
        margin: clamp(62px, 7vw, 106px) 0 clamp(40px, 4vw, 64px) clamp(48px, 5vw, 88px);
        width: auto;
    }
}