/**
 * Wilina Gradi ? Styles principaux
 * ?tape 1 : Header + Hero (Palette 1 ? Terracotta & Cr?me)
 *
 * Hero pleine largeur (maquette / brief ?tape 1).
 * Expertises = ?tape 2 (section suivante).
 */

/* ==========================================================================
   1. FONT FACES
   ========================================================================== */

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. TOKENS ? Palette 1
   ========================================================================== */

:root {
    --color-terracotta: #7a3420;
    --color-cream: #f3ebe3;
    --color-moka: #e8d9cb;
    --color-dark: #0e0603;
    --color-white: #ffffff;
    --color-white-muted: rgba(255, 255, 255, 0.9);

    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

    --container-pad: clamp(1.5rem, 5vw, 4.5rem);
    --section-max: 1080px;
    --section-pad-y: clamp(4.5rem, 9vh, 6.5rem);
}

/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-dark);
    background-color: var(--color-cream);
    line-height: 1.5;
    min-height: 100vh;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

/* ==========================================================================
   4. BOUTON
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.9rem 1.6rem;
    border: none;
    border-radius: 0;
}

.btn--terracotta {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

.btn:hover,
.btn:focus-visible {
    opacity: 0.92;
}

/* ==========================================================================
   5. HERO ? pleine largeur, hauteur viewport
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--color-white);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-dark);
    background-image: url("../images/hero.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        105deg,
        rgba(8, 3, 1, 0.82) 0%,
        rgba(10, 5, 2, 0.68) 40%,
        rgba(12, 7, 4, 0.5) 100%
    );
    pointer-events: none;
}

/* ==========================================================================
   6. NAVBAR ? overlay transparent sur le Hero
   ========================================================================== */

.navbar {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    padding: 2rem var(--container-pad) 0;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.navbar__logo {
    flex: 0 0 auto;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
    line-height: 1;
}

.navbar__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.navbar__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.navbar__item {
    position: relative;
    list-style: none;
}

.navbar__link {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white-muted);
    white-space: nowrap;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.navbar__link:hover,
.navbar__link:focus-visible {
    color: var(--color-white);
}

.navbar__link--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.navbar__caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

.navbar__item.is-open > .navbar__link--toggle .navbar__caret {
    transform: rotate(180deg);
}

.navbar__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 13.5rem;
    margin: 0;
    padding: 0.55rem 0;
    list-style: none;
    background: #1a0f0b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    z-index: 40;
}

.navbar__item.is-open > .navbar__dropdown {
    display: block;
}

.navbar__dropdown--nested {
    top: 0;
    left: calc(100% + 0.35rem);
    transform: none;
}

.navbar__item--nested {
    width: 100%;
}

.navbar__item--nested > .navbar__link--toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    box-sizing: border-box;
    letter-spacing: 0.08em;
}

.navbar__dropdown-link {
    display: block;
    padding: 0.65rem 1rem;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.navbar__dropdown-link:hover,
.navbar__dropdown-link:focus-visible {
    color: #fff;
    background: rgba(137, 59, 36, 0.45);
}

.navbar__dropdown-item--parent .navbar__dropdown-link {
    color: #c9a27a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.2rem;
}

.navbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    padding: 0.7rem 1.15rem;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border: 1.5px solid var(--color-terracotta);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.navbar__btn:hover,
.navbar__btn:focus-visible {
    background-color: transparent;
    color: var(--color-white);
    opacity: 1;
}

.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.navbar__toggle-bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-white);
}

/* ==========================================================================
   7. CONTENU HERO
   ========================================================================== */

.hero__content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem var(--container-pad) 5rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.hero__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--color-white);
    margin: 0 0 1.35rem;
    max-width: none;
}

.hero__subtitle {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
    line-height: 1.7;
    color: var(--color-white-muted);
    max-width: 46rem;
    margin: 0 auto 2.25rem;
}

.hero__content .btn {
    margin-top: 0.5rem;
}

.hero__scroll {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-white-muted);
    transition: color 0.2s ease, opacity 0.35s ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
    color: var(--color-white);
}

.hero__scroll.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hero__scroll-label {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero__scroll-mouse {
    display: block;
    width: 1.35rem;
    height: 2.1rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    position: relative;
}

.hero__scroll-wheel {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    width: 0.2rem;
    height: 0.35rem;
    margin-left: -0.1rem;
    border-radius: 999px;
    background-color: currentColor;
    animation: hero-scroll-wheel 1.6s ease-in-out infinite;
}

@keyframes hero-scroll-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 0;
        transform: translateY(0.7rem);
    }
    100% {
        opacity: 0;
        transform: translateY(0.7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__scroll-wheel {
        animation: none;
    }
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .navbar {
        padding-top: 1.5rem;
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background-color: rgba(14, 6, 3, 0.96);
        padding: 1.25rem var(--container-pad) 1.75rem;
        justify-content: flex-start;
    }

    .navbar__nav.is-open {
        display: flex;
    }

    .navbar__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        width: 100%;
    }

    .navbar__item {
        width: 100%;
    }

    .navbar__link--toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0.55rem 0;
    }

    .navbar__dropdown,
    .navbar__dropdown--nested {
        position: static;
        transform: none;
        display: none;
        min-width: 0;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0.15rem 0 0.55rem 0.85rem;
    }

    .navbar__item.is-open > .navbar__dropdown {
        display: block;
    }

    .navbar__dropdown-link {
        padding: 0.5rem 0;
    }

    .navbar__dropdown-item--parent .navbar__dropdown-link {
        border-bottom: none;
        color: rgba(255, 255, 255, 0.55);
    }

    .navbar__link {
        font-size: 0.75rem;
    }

    .hero__content {
        padding-bottom: 4rem;
    }

    .hero__title {
        max-width: 100%;
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    .hero__subtitle {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --container-pad: 1.25rem;
    }

    .navbar__logo {
        font-size: 0.875rem;
        letter-spacing: 0.1em;
    }

    .btn {
        font-size: 0.625rem;
        padding: 0.8rem 1.35rem;
    }
}

/* ==========================================================================
   9. EXPERTISES ? ?tape 2 (maquette Palette 1)
   Ne pas modifier les r?gles Header / Hero ci-dessus.
   ========================================================================== */

.expertises {
    --exp-accent: #6b3224;
    background-color: #f9f5f2;
    color: var(--exp-accent);
    padding: clamp(5rem, 10vh, 7.5rem) var(--container-pad);
}

.expertises__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Titre section (plus petit que les titres de blocs) + lune */
.expertises__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(3rem, 6vh, 4.5rem);
}

.expertises__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.9vw, 1.625rem);
    line-height: 1.2;
    color: var(--exp-accent);
    letter-spacing: 0;
}

.expertises__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    color: var(--exp-accent);
    line-height: 0;
}

.expertises__theme-icon {
    display: block;
}

/* Grille 3 colonnes — widgets à ouverture */
.expertises__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 1.75rem);
    row-gap: 1.5rem;
    align-items: stretch;
    margin-bottom: clamp(3.25rem, 6vh, 4.5rem);
    width: 100%;
}

.expertise-widget {
    margin: 0;
}

.expertise-widget__card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    background-color: #2a1510;
    color: var(--color-white);
    line-height: 0;
}

.expertise-widget__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s ease;
}

.expertise-widget__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(
        180deg,
        rgba(14, 6, 3, 0.15) 0%,
        rgba(14, 6, 3, 0.72) 55%,
        rgba(89, 38, 22, 0.88) 100%
    );
    opacity: 0;
    visibility: hidden;
    transform: translateY(12%);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

.expertise-widget__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 0.65rem;
}

.expertise-widget__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 18rem;
}

.expertise-widget__card:hover .expertise-widget__overlay,
.expertise-widget__card:focus-visible .expertise-widget__overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.expertise-widget__card:hover .expertise-widget__image,
.expertise-widget__card:focus-visible .expertise-widget__image {
    transform: scale(1.06);
}

@media (hover: none) {
    .expertise-widget__overlay {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        background: linear-gradient(
            180deg,
            rgba(14, 6, 3, 0.05) 0%,
            rgba(14, 6, 3, 0.55) 45%,
            rgba(89, 38, 22, 0.9) 100%
        );
        justify-content: flex-end;
        padding-bottom: 1.35rem;
    }

    .expertise-widget__image {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .expertise-widget__image,
    .expertise-widget__overlay {
        transition: none;
    }
}

.expertise {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.expertise__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--exp-accent);
    margin-bottom: 1.35rem;
    height: 56px;
}

.expertise__icon svg {
    display: block;
    width: 56px;
    height: 56px;
}

/* Titres de blocs ? plus grands que le H2 section */
.expertise__name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 1.85vw, 1.625rem);
    line-height: 1.15;
    color: var(--exp-accent);
    margin: 0 0 0.85rem;
}

.expertise__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.8125rem, 0.95vw, 0.9rem);
    line-height: 1.55;
    color: var(--exp-accent);
    opacity: 0.88;
    max-width: 14.5rem;
    margin: 0;
}

/* VOIR PLUS ? centr? sous la colonne du milieu */
.expertises__more {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--exp-accent);
    line-height: 1;
    padding: 0.35rem 0;
}

.expertises__more:hover,
.expertises__more:focus-visible {
    opacity: 0.75;
}

@media (max-width: 900px) {
    .expertises__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 3rem;
    }
}

@media (max-width: 600px) {
    .expertises {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .expertises__header {
        margin-bottom: 2.5rem;
    }
}

/* ==========================================================================
   10. MON PARCOURS ? �tape 3 (maquette Palette 1)
   Ne pas modifier Header / Hero / Expertises.
   ========================================================================== */

.parcours {
    background-color: var(--color-moka);
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.parcours__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.parcours__title {
    display: block;
    width: 100%;
    margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem);
    text-align: left;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    border-bottom: none;
    padding-bottom: 0;
}

/* Deux colonnes : photo | texte + bouton */
.parcours__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
}

.parcours__media {
    margin: 0;
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: flex-start;
    align-self: stretch;
}

.parcours__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
}

.parcours__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
}

.parcours__content.detail__rich {
    max-width: 34rem;
}

.parcours__content.detail__rich > p,
.parcours__content.detail__rich > ul,
.parcours__content.detail__rich > ol {
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.65;
    color: #2a1a14;
    text-align: justify;
    margin: 0 0 1.35rem;
}

.parcours__text {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.65;
    color: #2a1a14;
    max-width: 34rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    margin: 0 0 1.35rem;
}

.parcours__text:last-of-type {
    margin-bottom: 0;
}

.parcours__text:first-of-type {
    font-weight: 400;
}

.parcours__cta {
    margin-top: 1.75rem;
}

/* Responsive ? m�me structure empil�e, proportions conserv�es */
@media (max-width: 900px) {
    .parcours__layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 420px;
        margin-inline: auto;
        justify-items: stretch;
    }

    .parcours__media {
        max-width: 100%;
        align-self: auto;
    }

    .parcours__photo {
        height: auto;
        min-height: 0;
        aspect-ratio: 420 / 475;
    }

    .parcours__content {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .parcours__title {
        text-align: left;
    }

    .parcours__text {
        max-width: 100%;
        text-align: justify;
    }
}

@media (max-width: 600px) {
    .parcours {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .parcours__title {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   10b. MA PROGRESSION PROFESSIONNELLE
   ========================================================================== */

.progression {
    background-color: #f0ebe6;
    padding: clamp(3.5rem, 7vh, 5.5rem) var(--container-pad);
}

.progression__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.progression__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    margin: 0 0 clamp(2rem, 4vh, 3rem);
    text-align: center;
}

.progression__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.5rem) 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.progression__stat {
    flex: 1 1 7rem;
    max-width: 11rem;
    text-align: center;
}

.progression__value {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.55rem;
}

.progression__value--orange {
    color: #d3541a;
}

.progression__value--gold {
    color: #c9a227;
}

.progression__value--dark {
    color: var(--color-dark);
}

.progression__value--terracotta {
    color: var(--color-terracotta);
}

.progression__label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.35;
    color: var(--color-dark);
}

@media (max-width: 700px) {
    .progression__stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.25rem;
    }

    .progression__stat {
        max-width: none;
    }

    .progression__stat:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 11rem;
    }
}

@media (max-width: 420px) {
    .progression__stats {
        grid-template-columns: 1fr;
    }

    .progression__stat:last-child {
        grid-column: auto;
        max-width: none;
    }
}

/* ==========================================================================
   11. DERNIERES PUBLICATIONS ? �tape 4 (maquette Palette 1)
   Ne pas modifier Header / Hero / Expertises / Parcours.
   ========================================================================== */

.publications {
    background-color: #f5ebe0;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.publications__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.publications__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
    width: 100%;
    text-align: center;
}

.publications__title {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    border-bottom: 2px solid #c0392b;
    padding-bottom: 0.55rem;
}

/* Bouton "Voir toutes les publications" ? contour terracotta, l�ger rayon */
.publications__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-terracotta);
    background-color: transparent;
    border: 1.5px solid var(--color-terracotta);
    border-radius: 4px;
    padding: 0.7rem 1.15rem;
    white-space: nowrap;
    margin: clamp(1.75rem, 3.5vh, 2.5rem) auto 0;
}

.publications__all:hover,
.publications__all:focus-visible {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

/* Grille accueil : 3 colonnes (jusqu’à 6 cartes), puis 2, puis 1 */
.publications__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
    width: 100%;
}

.pub-card {
    display: flex;
    flex-direction: column;
    background: transparent;
}

.pub-card__media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}

.pub-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.pub-card__body {
    padding-top: 0.85rem;
}

.pub-card__category {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c26e40;
    margin: 0 0 0.45rem;
    line-height: 1.2;
}

.pub-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
    line-height: 1.35;
    color: #2a1a14;
    margin: 0 0 0.5rem;
}

.pub-card__title a {
    color: inherit;
}

.pub-card__title a:hover,
.pub-card__title a:focus-visible {
    color: var(--color-terracotta);
}

.pub-card__date {
    display: block;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #7a6a60;
}

/* Responsive ? 3 ? 2 ? 1 colonnes, m�me hi�rarchie carte */
@media (max-width: 900px) {
    .publications__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .publications {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .publications__header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }

    .publications__grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        max-width: 26rem;
    }

    .publications__title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   12. CALL TO ACTION ? �tape 5 (maquette Palette 1)
   Ne pas modifier les sections pr�c�dentes.
   ========================================================================== */

.cta {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(280px, 38vh, 420px);
    padding: clamp(3.5rem, 7vh, 5rem) var(--container-pad);
    color: var(--color-white);
    overflow: hidden;
}

.cta__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1a0e08;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Overlay brun chaud pour lisibilit� (maquette) */
.cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(20, 10, 5, 0.72) 0%,
        rgba(40, 18, 8, 0.58) 45%,
        rgba(55, 25, 12, 0.48) 100%
    );
    pointer-events: none;
}

.cta__inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 0.65rem;
}

.cta__subtitle {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.15vw, 1.0625rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 1.75rem;
    max-width: 28rem;
}

/* Bouton ME CONTACTER ? sable/or maquette #F1BD6A */
.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: #1a100c;
    background-color: #e6c47f;
    border: none;
    border-radius: 3px;
    padding: 0.9rem 1.55rem;
}

.cta__btn:hover,
.cta__btn:focus-visible {
    opacity: 0.92;
}

@media (max-width: 600px) {
    .cta {
        min-height: 260px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .cta__title {
        font-size: 1.625rem;
    }

    .cta__subtitle {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   13. FOOTER ? �tape 6 (maquette Palette 1)
   Ne pas modifier les sections pr�c�dentes.
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-footer {
    background-color: #832a12;
    color: #fdf5e6;
    padding: clamp(3.5rem, 7vh, 5rem) var(--container-pad) 0;
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.35fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.site-footer__logo {
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 1.8vw, 1.625rem);
    line-height: 1.15;
    letter-spacing: 0.06em;
    color: #fdf5e6;
    margin-bottom: 1.25rem;
}

.site-footer__logo-line {
    display: block;
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(253, 245, 230, 0.85);
    border-radius: 50%;
    color: #fdf5e6;
    line-height: 0;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    background-color: rgba(253, 245, 230, 0.12);
}

.site-footer__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    color: #fdf5e6;
    margin: 0 0 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(253, 245, 230, 0.55);
    display: inline-block;
    min-width: 6.5rem;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.site-footer__list a,
.site-footer__list--plain {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(253, 245, 230, 0.92);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
    color: #fff;
}

.site-footer__newsletter-text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(253, 245, 230, 0.92);
    margin: 0 0 1rem;
    max-width: 16rem;
}

.site-footer__form-row {
    display: flex;
    align-items: stretch;
    max-width: 17rem;
}

.site-footer__input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: #2a1a14;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 0.7rem 0.85rem;
    outline: none;
}

.site-footer__input::placeholder {
    color: #9a8b82;
}

.site-footer__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    background-color: #e6c47f;
    color: #1a100c;
    border: none;
    border-radius: 0;
    cursor: pointer;
    line-height: 0;
}

.site-footer__submit:hover,
.site-footer__submit:focus-visible {
    opacity: 0.92;
}

.site-footer__flash {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0 0 0.85rem;
    max-width: 17rem;
}

.site-footer__flash--ok {
    color: #e6c47f;
}

.site-footer__flash--err {
    color: #f3c2b4;
}

.site-footer__bottom {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 0 1.5rem;
    border-top: 1px solid rgba(253, 245, 230, 0.22);
}

.site-footer__copyright {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.6875rem;
    color: rgba(253, 245, 230, 0.75);
    margin: 0;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__legal a {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.6875rem;
    color: rgba(253, 245, 230, 0.75);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: #fff;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem 2rem;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding-top: 3rem;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 2rem;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .site-footer__form-row {
        max-width: 100%;
    }
}

/* ==========================================================================
   14. AUTEURS & THÉMATIQUES
   ========================================================================== */

.auteurs {
    background-color: #f3ebe4;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.auteurs__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.auteurs__header {
    margin-bottom: clamp(2.25rem, 4.5vh, 3.25rem);
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auteurs__title {
    display: block;
    width: fit-content;
    margin: 0 auto 0.85rem;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    border-bottom: 2px solid #c0392b;
    padding-bottom: 0.55rem;
}

.auteurs__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.auteurs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.35rem);
}

.theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: 1.25rem 1.15rem 1.35rem;
    border-top: 1.5px solid var(--color-terracotta);
    color: inherit;
    background: transparent;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.theme-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.1rem;
}

.theme-card__index {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(137, 59, 36, 0.65);
}

.theme-card__icon {
    display: inline-flex;
    color: var(--color-terracotta);
    line-height: 0;
    transition: transform 0.3s ease;
}

.theme-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.25;
    color: var(--color-terracotta);
    margin: 0 0 0.65rem;
}

.theme-card__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.85);
    margin: 0;
}

.theme-card__open {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.theme-card__open > * {
    overflow: hidden;
}

.theme-card__detail {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.75);
    margin: 0 0 0.85rem;
}

.theme-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.theme-card:hover,
.theme-card:focus-visible {
    background-color: rgba(255, 255, 255, 0.55);
    border-top-color: #6b3224;
    transform: translateY(-2px);
    outline: none;
}

.theme-card:hover .theme-card__icon,
.theme-card:focus-visible .theme-card__icon {
    transform: translateY(-2px);
}

.theme-card:hover .theme-card__open,
.theme-card:focus-visible .theme-card__open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1rem;
}

@media (hover: none) {
    .theme-card__open {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 1rem;
    }

    .theme-card__detail {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-card,
    .theme-card__icon,
    .theme-card__open {
        transition: none;
    }
}

@media (max-width: 900px) {
    .auteurs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .auteurs {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .auteurs__grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .theme-card {
        padding-left: 0;
        padding-right: 0;
    }

    .theme-card:hover,
    .theme-card:focus-visible {
        background-color: transparent;
        transform: none;
    }
}

/* ==========================================================================
   15. CONTACT
   ========================================================================== */

.contact {
    background-color: #f5ebe0;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.contact__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.contact__header {
    margin-bottom: clamp(2rem, 4vh, 2.75rem);
    max-width: 34rem;
}

.contact__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    margin: 0 0 0.85rem;
}

.contact__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.contact__list li,
.contact__list a {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #2a1a14;
}

.contact__list a:hover,
.contact__list a:focus-visible {
    color: var(--color-terracotta);
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact__label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #2a1a14;
}

.contact__input,
.contact__textarea {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: #2a1a14;
    background-color: #fff;
    border: 1px solid rgba(137, 59, 36, 0.28);
    border-radius: 0;
    padding: 0.75rem 0.9rem;
    width: 100%;
    outline: none;
}

.contact__input:focus,
.contact__textarea:focus {
    border-color: var(--color-terracotta);
}

.contact__textarea {
    resize: vertical;
    min-height: 8rem;
}

.contact__submit {
    align-self: flex-start;
    margin-top: 0.35rem;
}

@media (max-width: 900px) {
    .contact__layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 32rem;
    }
}

@media (max-width: 600px) {
    .contact {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ==========================================================================
   16. INVESTIGATIONS
   ========================================================================== */

.investigations {
    background-color: #f9f5f2;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.investigations__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.investigations__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: clamp(2rem, 4vh, 2.75rem);
    text-align: center;
}

.investigations__heading {
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.investigations__title {
    display: block;
    width: fit-content;
    margin: 0 auto 0.85rem;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    border-bottom: 2px solid #c0392b;
    padding-bottom: 0.55rem;
}

.investigations__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.investigations__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-terracotta);
    background-color: transparent;
    border: 1.5px solid var(--color-terracotta);
    border-radius: 4px;
    padding: 0.7rem 1.15rem;
    white-space: nowrap;
    margin: clamp(1.75rem, 3.5vh, 2.5rem) auto 0;
}

.investigations__all:hover,
.investigations__all:focus-visible {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

.investigations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    width: 100%;
}

.investigation-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
}

.investigation-card__media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}

.investigation-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.investigation-card__body {
    padding-top: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.investigation-card__category {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c26e40;
    margin: 0 0 0.55rem;
    line-height: 1.2;
}

.investigation-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.3;
    color: #2a1a14;
    margin: 0 0 0.65rem;
}

.investigation-card__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.85);
    margin: 0 0 1rem;
    flex: 1;
}

.investigation-card__date {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.75rem;
    color: #7a6a60;
}

@media (max-width: 900px) {
    .investigations__grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .investigations__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .investigations {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ==========================================================================
   PAGES INTERNES ? listing & d?tail
   ========================================================================== */

.navbar--page {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-dark);
    padding: 1.25rem var(--container-pad);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.page {
    background-color: var(--color-cream);
    min-height: 60vh;
}

.page__banner {
    background-color: #efe6dc;
    border-bottom: 1px solid rgba(137, 59, 36, 0.12);
    padding: 3.5rem var(--container-pad) 2.75rem;
}

.page__banner-inner {
    max-width: 920px;
    margin: 0 auto;
}

.page__eyebrow {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin: 0 0 0.75rem;
}

.page__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    color: #2a1a14;
    margin: 0 0 0.85rem;
}

.page__lead {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
    line-height: 1.6;
    color: rgba(42, 26, 20, 0.78);
    margin: 0;
    max-width: 40rem;
}

.page__body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem var(--container-pad) 4.5rem;
}

.page__back {
    margin: 2.5rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.page__back a {
    color: var(--color-terracotta);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.page__back a:hover,
.page__back a:focus-visible {
    border-bottom-color: var(--color-terracotta);
}

/* Listing */

.listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
    align-items: stretch;
    width: 100%;
}

.listing__grid .pub-card {
    min-width: 0;
    height: 100%;
}

.listing__grid .pub-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.listing__grid .pub-card__date {
    margin-top: auto;
}

.listing__grid--text {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing__excerpt {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.8);
    margin: 0 0 0.75rem;
}

.listing__read {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-terracotta);
    text-decoration: none;
}

.listing__read:hover,
.listing__read:focus-visible {
    text-decoration: underline;
}

.listing--expertises {
    display: grid;
    gap: 2.5rem;
}

.detail-block {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(137, 59, 36, 0.15);
}

.detail-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.detail-block__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: var(--color-terracotta);
    margin: 0 0 0.65rem;
}

.detail-block__lead {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    color: #2a1a14;
    margin: 0 0 1rem;
}

/* Detail */

.detail__media {
    margin: 0 0 2rem;
    overflow: hidden;
}

.detail__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

.detail__content {
    max-width: 40rem;
}

.detail__excerpt {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    color: #2a1a14;
    margin: 0 0 1.5rem;
}

.detail__excerpt p {
    margin: 0 0 0.65rem;
}

.detail__excerpt p:last-child {
    margin-bottom: 0;
}

.detail__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(42, 26, 20, 0.9);
    margin: 0 0 1.15rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.detail__rich {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(42, 26, 20, 0.9);
}

.detail__rich > *:first-child {
    margin-top: 0;
}

.detail__rich p,
.detail__rich ul,
.detail__rich ol,
.detail__rich blockquote {
    margin: 0 0 1.15rem;
}

.detail__rich h2,
.detail__rich h3,
.detail__rich h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    color: #2a1a14;
    line-height: 1.25;
    margin: 1.75rem 0 0.75rem;
}

.detail__rich h2 { font-size: 1.45rem; }
.detail__rich h3 { font-size: 1.25rem; }
.detail__rich h4 { font-size: 1.1rem; }

.detail__rich ul,
.detail__rich ol {
    padding-left: 1.35rem;
}

.detail__rich li {
    margin-bottom: 0.35rem;
}

.detail__rich a {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.detail__rich img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.25rem 0;
}

.detail__rich blockquote {
    border-left: 3px solid var(--color-terracotta);
    padding-left: 1rem;
    color: rgba(42, 26, 20, 0.8);
    font-style: italic;
}

.detail__rich strong,
.detail__rich b {
    font-weight: 600;
}

.detail__rich [style*="text-align: left"],
.detail__rich [style*="text-align:left"] { text-align: left; }
.detail__rich [style*="text-align: center"],
.detail__rich [style*="text-align:center"] { text-align: center; }
.detail__rich [style*="text-align: right"],
.detail__rich [style*="text-align:right"] { text-align: right; }
.detail__rich [style*="text-align: justify"],
.detail__rich [style*="text-align:justify"] { text-align: justify; }

.detail__rich .align-left,
.detail__rich .alignleft { text-align: left; }
.detail__rich .align-center,
.detail__rich .aligncenter { text-align: center; }
.detail__rich .align-right,
.detail__rich .alignright { text-align: right; }
.detail__rich .alignjustify { text-align: justify; }

.detail__rich img[style*="float: left"],
.detail__rich img[style*="float:left"] {
    float: left;
    margin: 0.35rem 1rem 0.75rem 0;
}
.detail__rich img[style*="float: right"],
.detail__rich img[style*="float:right"] {
    float: right;
    margin: 0.35rem 0 0.75rem 1rem;
}

.detail__file {
    margin: 2rem 0 0;
}

/* Engagement — vues & réactions */
.engage {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(140, 72, 48, 0.18);
}

.engage__views {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    color: rgba(14, 6, 3, 0.62);
}

.engage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.engage__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(122, 52, 32, 0.28);
    border-radius: 999px;
    background: rgba(255, 252, 248, 0.9);
    color: var(--color-dark);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.engage__btn:hover,
.engage__btn:focus-visible {
    border-color: var(--color-terracotta);
    outline: none;
}

.engage__btn.is-active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #fff;
}

.engage__btn--like {
    font-weight: 600;
}

.engage__btn--like .engage__heart {
    color: var(--color-terracotta);
    font-size: 1rem;
    line-height: 1;
}

.engage__btn--like.is-active .engage__heart {
    color: #fff;
}

.engage__btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.engage__btn-count {
    min-width: 1.1em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Commentaires */
.comments {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(122, 52, 32, 0.18);
}

.comments__title {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-dark);
}

.comments__count {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(14, 6, 3, 0.55);
}

.comments__empty {
    margin: 0 0 1.25rem;
    color: rgba(14, 6, 3, 0.62);
}

.comments__list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comments__item {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(122, 52, 32, 0.14);
    border-radius: 12px;
    background: rgba(255, 252, 248, 0.85);
}

.comments__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    margin-bottom: 0.45rem;
}

.comments__author {
    font-weight: 650;
}

.comments__meta time {
    font-size: 0.82rem;
    color: rgba(14, 6, 3, 0.55);
}

.comments__body {
    margin: 0;
    line-height: 1.55;
    white-space: pre-wrap;
}

.comments__form {
    display: grid;
    gap: 0.85rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(122, 52, 32, 0.16);
    border-radius: 14px;
    background: rgba(232, 217, 203, 0.28);
}

.comments__form-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.15rem;
}

.comments__hint {
    margin: -0.35rem 0 0;
    font-size: 0.88rem;
    color: rgba(14, 6, 3, 0.62);
}

.comments__field {
    display: grid;
    gap: 0.35rem;
}

.comments__field span {
    font-size: 0.86rem;
    font-weight: 600;
}

.comments__field em {
    font-style: normal;
    font-weight: 400;
    color: rgba(14, 6, 3, 0.55);
}

.comments__field input,
.comments__field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(122, 52, 32, 0.22);
    border-radius: 10px;
    background: #fff;
    color: var(--color-dark);
    font: inherit;
}

.comments__field input:focus,
.comments__field textarea:focus {
    outline: 2px solid rgba(122, 52, 32, 0.35);
    outline-offset: 1px;
}

.comments__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.comments__status {
    margin: 0;
    font-size: 0.9rem;
}

.comments__status.is-ok {
    color: #2f6b3a;
}

.comments__status.is-err {
    color: #8b1e1e;
}

.detail-block .engage,
.detail-block .comments {
    margin-top: 1.75rem;
}

.detail--parcours {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.5rem 3rem;
    align-items: start;
}

.detail__portrait {
    margin: 0;
}

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

.investigation-card__title a,
.theme-card__title a {
    color: inherit;
    text-decoration: none;
}

.investigation-card__title a:hover,
.investigation-card__title a:focus-visible,
.theme-card__title a:hover,
.theme-card__title a:focus-visible {
    color: var(--color-terracotta);
}

@media (max-width: 900px) {
    .listing__grid,
    .listing__grid--text {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .detail--parcours {
        grid-template-columns: 1fr;
        max-width: 28rem;
    }

    .page__banner {
        padding-top: 2.75rem;
        padding-bottom: 2rem;
    }

    .page__body {
        padding-top: 2.25rem;
        padding-bottom: 3.5rem;
    }
}

@media (max-width: 600px) {
    .listing__grid,
    .listing__grid--text {
        grid-template-columns: 1fr;
        max-width: 26rem;
        margin-inline: auto;
    }
}

/* ==========================================================================
   STORIES
   ========================================================================== */

.stories {
    background-color: #f8f4f0;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.stories__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.stories__header {
    margin-bottom: clamp(2rem, 4vh, 3rem);
    max-width: 38rem;
}

.stories__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    margin: 0 0 0.85rem;
}

.stories__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.stories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    width: 100%;
}

.story-card {
    border-top: 1.5px solid var(--color-terracotta);
    padding-top: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.story-card__category {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c26e40;
    margin: 0 0 0.55rem;
}

.story-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.3;
    color: #2a1a14;
    margin: 0 0 0.65rem;
}

.story-card__title a {
    color: inherit;
    text-decoration: none;
}

.story-card__title a:hover {
    color: var(--color-terracotta);
}

.story-card__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.85);
    margin: 0 0 1rem;
    flex: 1;
}

.story-card__date {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.75rem;
    color: #7a6a60;
}

@media (max-width: 900px) {
    .stories__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   INTERVENTIONS
   ========================================================================== */

.interventions {
    background-color: #f0ebe6;
    padding: clamp(4.5rem, 9vh, 6.5rem) var(--container-pad);
}

.interventions__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.interventions__header {
    margin-bottom: clamp(2rem, 4vh, 3rem);
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interventions__title {
    display: block;
    width: fit-content;
    margin: 0 auto 0.85rem;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-terracotta);
    border-bottom: 2px solid #c0392b;
    padding-bottom: 0.55rem;
}

.interventions__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.interventions__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.intervention-item {
    border-top: 1px solid rgba(137, 59, 36, 0.28);
    padding: 1.2rem 0;
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
    width: 100%;
}

.intervention-item:last-child {
    border-bottom: 1px solid rgba(137, 59, 36, 0.28);
}

.intervention-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.intervention-item__type {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c26e40;
}

.intervention-item__date {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.75rem;
    color: #7a6a60;
}

.intervention-item__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.3;
    color: #2a1a14;
    margin: 0 0 0.35rem;
}

.intervention-item__place {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(42, 26, 20, 0.8);
    margin: 0;
}

@media (max-width: 700px) {
    .intervention-item {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .intervention-item__meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   SECTION SUBNAV + ECRITURES / GROUPES
   ========================================================================== */

.section-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 0.85rem;
    margin: 0 0 clamp(1.75rem, 3vh, 2.5rem);
}

.section-subnav__link {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    border-bottom: 1px solid transparent;
    padding-bottom: 0.15rem;
}

.section-subnav__link:hover,
.section-subnav__link:focus-visible {
    border-bottom-color: var(--color-terracotta);
}

.ecritures {
    background-color: #efe4d8;
    padding: var(--section-pad-y) var(--container-pad);
}

.ecritures__inner {
    max-width: var(--section-max);
    margin: 0 auto;
    width: 100%;
}

.ecritures__header {
    margin-bottom: clamp(2rem, 4vh, 3rem);
    max-width: 38rem;
}

.ecritures__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    color: var(--color-terracotta);
    margin: 0 0 0.85rem;
}

.ecritures__intro,
.ecritures__branch-text,
.publications__intro {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #2a1a14;
    margin: 0;
}

.ecritures__branch {
    margin-top: clamp(2.25rem, 4vh, 3.25rem);
    width: 100%;
}

.ecritures__branch:first-child {
    margin-top: 0;
}

.ecritures__branch-title,
.stories__group-title,
.publications__group-title,
.interventions__group-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    color: #2a1a14;
    margin: 0 0 0.65rem;
}

#ecritures-expertises-title {
    display: block;
    width: fit-content;
    margin: 0 auto 1.75rem;
    text-align: center;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    color: var(--color-terracotta);
    border-bottom: 2px solid #c0392b;
    padding-bottom: 0.55rem;
}

.ecritures__branch-text {
    margin-bottom: 1.5rem;
    max-width: 38rem;
}

.ecritures__widgets {
    margin-bottom: 0;
    width: 100%;
}

.ecritures__themes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
    width: 100%;
}

.ecriture-theme {
    border-top: 1.5px solid var(--color-terracotta);
    padding-top: 0.9rem;
}

.ecriture-theme__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--color-terracotta);
    margin: 0 0 0.45rem;
}

.ecriture-theme__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(42, 26, 20, 0.85);
    margin: 0;
}

.stories__group,
.publications__group,
.interventions__group {
    margin-top: clamp(2rem, 4vh, 2.75rem);
    width: 100%;
}

.interventions__subgroup {
    margin-top: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(137, 59, 36, 0.25);
    width: 100%;
}

.interventions__subgroup-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c26e40;
    margin: 0 0 0.75rem;
}

.publications__header--stack {
    align-items: flex-end;
    gap: 1.25rem;
    width: 100%;
}

.publications__intro {
    margin-top: 0.65rem;
    max-width: 34rem;
}

.publications__empty {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    color: rgba(42, 26, 20, 0.65);
    margin: 0;
}

.section-subnav {
    width: 100%;
}

/* Ancres : compensation navbar sticky */
#parcours,
#ecritures,
#ecritures-reflexions,
#ecritures-journalisme,
#stories,
#stories-bd,
#stories-visuelles,
#stories-nouvelles,
#investigations,
#publications,
#publications-analyses,
#publications-articles,
#publications-memoires,
#publications-communications,
#auteurs,
#interventions,
#interventions-conference,
#interventions-atelier,
#interventions-formation,
#formation-webinaire,
#formation-workshop,
#contact,
#newsletter,
[id^="journalisme-"] {
    scroll-margin-top: 5.5rem;
}

@media (max-width: 900px) {
    .ecritures__themes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expertises__grid,
    .ecritures__widgets {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .ecritures__themes {
        grid-template-columns: 1fr;
    }
}

.listing__group {
    margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.listing__group-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    color: var(--color-terracotta);
    margin: 0 0 1.25rem;
}

.ecritures__preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.ecritures__preview-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1.5px solid var(--color-terracotta);
    padding-top: 1.15rem;
    color: inherit;
    min-height: 8rem;
}

.ecritures__preview-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    color: var(--color-terracotta);
    margin: 0 0 0.55rem;
}

.ecritures__preview-text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(42, 26, 20, 0.85);
    margin: 0 0 1rem;
    flex: 1;
}

.ecritures__preview-cta {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.ecritures__preview-card:hover .ecritures__preview-cta,
.ecritures__preview-card:focus-visible .ecritures__preview-cta {
    text-decoration: underline;
}

a.ecriture-theme {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

a.ecriture-theme:hover,
a.ecriture-theme:focus-visible {
    opacity: 0.85;
}

.ecritures-page__subtitle {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    color: var(--color-terracotta);
    margin: 0 0 1.5rem;
}

.section-subnav__link.is-active {
    border-bottom-color: var(--color-terracotta);
    font-weight: 600;
}

@media (max-width: 700px) {
    .ecritures__preview {
        grid-template-columns: 1fr;
    }
}