/* ============================================================
   Couleur de l'année
   ============================================================ */

.couleur-annee {
    font-family: var(--primary-font);
    background: #fff;
    padding: var(--gap-xl) 0;
}

/* ── Header ── */

.couleur-annee__header {
    text-align: center;
    margin-bottom: var(--gap-l);
    padding: 0 var(--gap-l);
}

.couleur-annee__title {
    font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--color-primary, #1a1a1a);
    margin: 0;
}

/* ── Body (2 colonnes) ── */

.couleur-annee__body {
    display: flex;
    align-items: stretch;
    gap: var(--gap-l);
}

/* ── Colonne images ── */

.couleur-annee__images {
    flex: 0 0 50%;
    min-width: 0;
}

.couleur-annee__hero img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/*
 * Mosaïque 2 colonnes décalées :
 *   col gauche  → img1 (60 %) + img3 (40 %)
 *   col droite  → img2 (40 %) + img4 (60 %)
 * 5 rangées égales × height totale = proportions fluides.
 */
.couleur-annee__mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    height: 420px;
    gap: 4px;
    margin-top: 4px;
}

.couleur-annee__mosaic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.couleur-annee__mosaic-img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; } /* tall  */
.couleur-annee__mosaic-img:nth-child(2) { grid-column: 2; grid-row: 1 / 3; } /* short */
.couleur-annee__mosaic-img:nth-child(3) { grid-column: 1; grid-row: 4 / 6; } /* short */
.couleur-annee__mosaic-img:nth-child(4) { grid-column: 2; grid-row: 3 / 6; } /* tall  */

/* ── Colonne texte ── */

/* wrapper flex qui s'étire sur toute la hauteur de la colonne images */
.couleur-annee__content-wrap {
    flex: 1;
    min-width: 0;
}

/* contenu sticky à l'intérieur du wrapper */
.couleur-annee__content {
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    max-width: calc(300px + (650 - 300) * ((100vw - 320px) / (1920 - 320)));
}

.couleur-annee__subheading {
    font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--color-primary, #1a1a1a);
    margin: 0;
}

.couleur-annee__intro,
.couleur-annee__description,
.couleur-annee__closing {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
}

/* ── Liste finitions ── */

.couleur-annee__features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr) );
    grid-auto-flow: dense;
    row-gap: .625rem;
    list-style: none;
    max-width: 320px;
    padding: 0;
    margin: 0;
}

.couleur-annee__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary, #1a1a1a);
    text-transform: capitalize;
}

span.couleur-annee__feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(155 88 59 / 10%);
    color: var(--color-secondary);
    width: 24px;
    height: 24px;
}

/* ── Align wide / full ── */

.alignwide .couleur-annee__body,
.alignfull .couleur-annee__body {
    max-width: none;
    padding: 0 max(var(--gap-l), 5vw);
}

.alignwide .couleur-annee__header,
.alignfull .couleur-annee__header {
    padding: 0 max(var(--gap-l), 5vw);
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .couleur-annee__body {
        flex-direction: column;
    }

    .couleur-annee__images {
        flex: none;
        width: 100%;
    }

    .couleur-annee__mosaic {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .couleur-annee__header {
        padding: 0 var(--gap-m);
    }

    .couleur-annee__body {
        padding: 0 var(--gap-m);
    }

    .couleur-annee__features {
        grid-template-columns: 1fr;
    }
}