/* =========================================================
   VARIABLES
========================================================= */

:root {
    --background: #F7F9FA;
    --text: #17242D;
    --body: #344550;
    --primary: #4F6D8A;
    --cta: #2F526F;
    --border: #D9E1E6;
    --muted: #61717D;

    --font-body: "Inter", sans-serif;
    --font-editorial: "Newsreader", serif;

    --site-width: 1080px;
    --reading-width: 700px;

    
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
}

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

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


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-editorial);
    font-weight: 400;
    color: var(--text);
}

h1 {
    max-width: 760px;
    font-size: 56px;
    line-height: 1.12;
}

h2 {
    font-size: 40px;
    line-height: 1.2;
}

h3 {
    font-size: 28px;
    line-height: 1.25;
}

p {
    margin: 0;
    color: var(--body);
}


/* =========================================================
   LAYOUT
========================================================= */

.container {
    width: min(100% - 48px, var(--site-width));
    margin-inline: auto;
}

.content-width {
    max-width: var(--reading-width);
}

.section {
    padding-block: 112px;
}

.section-bordered {
    border-block: 1px solid var(--border);
}

.section-top-border {
    border-top: 1px solid var(--border);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    border-bottom: 1px solid var(--border);
}

.header-inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 14px;
}

.main-nav a {
    color: var(--muted);
    transition: color 180ms ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--cta);
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    padding-block: 96px 112px;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: center;
    gap: 80px;
}


/* =========================================================
   HERO — TEXTE
========================================================= */

.hero-content {
    max-width: 720px;
}

.hero-content .eyebrow {
    margin-bottom: 24px;

    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-content h1 {
    max-width: 700px;
    margin-bottom: 32px;

    font-size: 52px;
    line-height: 1.12;
}

.hero-text {
    max-width: 680px;
}

.hero-text p {
    margin-bottom: 20px;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   HERO — LIEN
========================================================= */

.hero-content .text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;

    color: var(--cta);
    font-size: 15px;
    font-weight: 500;
}

.hero-content .text-link span {
    transition: transform 180ms ease;
}

.hero-content .text-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   HERO — PHOTO
========================================================= */

.hero-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            black 88%,
            transparent 100%
        );
}


/* =========================================================
   HERO — MOBILE
========================================================= */

@media (max-width: 800px) {

    .hero {
        padding-block: 72px 80px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-image {
        max-width: 300px;
        justify-self: start;
        order: -1;
    }

    .hero-content h1 {
        font-size: 40px;
    }

}


/* =========================================================
   LINKS
========================================================= */

.text-link {
    display: inline-block;
    margin-top: 32px;

    color: var(--cta);
    font-size: 14px;
    font-weight: 500;

    text-decoration-line: underline;
    text-decoration-color: var(--border);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;

    transition: text-decoration-color 180ms ease;
}

.text-link:hover {
    text-decoration-color: var(--cta);
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {
    margin-bottom: 20px;

    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* =========================================================
   REGARDER AUTREMENT
========================================================= */

.themes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;

    margin-top: 64px;
}

.themes article h3 {
    font-size: 27px;
}

.themes article p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   CONVICTIONS

   Chaque conviction est présentée dans un encadré gris clair
   sobre (--card-bg), coins légèrement arrondis, pas d'ombre.
   Layout en grille responsive : 1 colonne en mobile, 2-3 en
   desktop selon la largeur. Les classes .conviction-card sont
   ajoutées dans le HTML ; aucune modification de .section,
   body, div, ou autre sélecteur générique.
========================================================= */

/*.convictions {
    max-width: 1080px;
    margin-top: 64px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    justify-content: center;
}
    */
    .convictions {
    max-width: 1080px;
    margin-top: 64px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.convictions > * {
    flex: 0 1 320px; /* largeur cible ~320px, calculée pour 3 par ligne sur 1080px avec gap 24px */
}

.conviction-card {
    background-color: var(--card-bg);
    padding: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.conviction-card h3 {
    max-width: 100%;
    font-size: 24px;
    line-height: 1.3;
}

.conviction-card p {
    max-width: 100%;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.7;
}

/* Tablette : 2 colonnes */
@media (max-width: 900px) {
    .convictions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 820px;
    }
}


/* =========================================================
   ARTICLES
========================================================= */

.articles-preview {
    margin-top: 64px;
    margin-bottom: 8px;
    max-width: 820px;
}

.subsection-title {
    margin-bottom: 32px;
    font-size: 28px;
}

.article-preview {
    padding-block: 32px;
    border-top: 1px solid var(--border);
}

.article-preview:last-child {
    border-bottom: 1px solid var(--border);
}

.article-preview h4 {
    font-size: 32px;
    line-height: 1.2;

    transition: color 180ms ease;
}

.article-preview a:hover h4 {
    color: var(--cta);
}

.article-preview p {
    max-width: var(--reading-width);
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7;
}

.article-preview span {
    display: block;
    margin-top: 16px;

    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================================================
   ACTIVITÉS
========================================================= */

.activities-section {
    padding-block: 96px 120px;
}

.activities {
    margin-top: 64px;
}

.activity {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: center;
    gap: 72px;

    padding-block: 64px;

    border-top: 1px solid var(--border);
}

.activity:last-child {
    border-bottom: 1px solid var(--border);
}


/* Illustration */

.activity-image {
    width: 100%;
    max-width: 320px;
}

.activity-image img {
    display: block;

    width: 100%;
    height: auto;
}


/* Contenu */

.activity-content {
    max-width: 600px;
}

.activity-content .eyebrow {
    margin-bottom: 14px;
}

.activity-content h3 {
    max-width: 560px;
    margin-bottom: 24px;

    font-family: var(--font-editorial);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
}

.activity-content p:not(.eyebrow) {
    margin-bottom: 24px;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   ACTIVITÉ INVERSÉE
========================================================= */

.activity-reverse {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.activity-reverse .activity-image {
    grid-column: 2;
    grid-row: 1;
}

.activity-reverse .activity-content {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .activities-section {
        padding-block: 72px 88px;
    }

    .activities {
        margin-top: 48px;
    }

    .activity,
    .activity-reverse {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;

        padding-block: 48px;
    }

    .activity-image,
    .activity-reverse .activity-image {
        grid-column: auto;
        grid-row: auto;

        width: 100%;
        max-width: 280px;
    }

    .activity-content,
    .activity-reverse .activity-content {
        grid-column: auto;
        grid-row: auto;

        justify-self: start;
    }

    .activity-content h3 {
        font-size: 28px;
    }

}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 28px;

    font-size: 14px;
}

.social-links a {
    color: var(--cta);
}

.social-links a:hover {
    text-decoration: underline;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    border-top: 1px solid var(--border);
}

.footer-inner {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);
    font-size: 12px;
}

.footer-inner p {
    font-size: 12px;
}

.footer-inner nav {
    display: flex;
    gap: 24px;
}

.footer-inner a:hover {
    color: var(--cta);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .themes {
        grid-template-columns: repeat(2, 1fr);
    }

    .themes article:last-child {
        grid-column: 1 / -1;
    }

    .activities {
        gap: 40px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    body {
        font-size: 17px;
    }

    .container {
        width: min(100% - 36px, var(--site-width));
    }

    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .hero {
        padding-block: 88px;
    }

    .hero-name {
        font-size: 27px;
        margin-bottom: 20px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 26px;
    }

    .section {
        padding-block: 80px;
    }

    .themes {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 48px;
    }

    .themes article:last-child {
        grid-column: auto;
    }

    .convictions {
        margin-top: 48px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .conviction-card {
        padding: 24px;
        border-radius: 4px;
    }

    .conviction-card h3 {
        font-size: 22px;
    }

    .conviction-card p {
        font-size: 15px;
    }

    .articles-preview {
        margin-top: 48px;
    }

    .article-preview h4 {
        font-size: 28px;
    }

    .activities {
        grid-template-columns: 1fr;
        gap: 72px;
        margin-top: 48px;
    }

    .activity h3 {
        font-size: 28px;
    }

    .footer-inner {
        min-height: auto;
        padding-block: 28px;

        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .footer-inner nav {
        flex-wrap: wrap;
        gap: 16px 24px;
    }
}
/* =========================================================
   PAGE À PROPOS
========================================================= */

.about-intro {
    padding-block: 120px;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 700px);
    gap: 80px;
    align-items: start;
}

.about-photo {
    position: sticky;
    top: 40px;
}

.about-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.about-intro-content h1 {
    margin-bottom: 28px;
}

.intro-role {
    margin-bottom: 28px;
    font-size: 20px;
    line-height: 1.6;
}

.about-intro-content > p + p {
    margin-top: 24px;
}


/* =========================================================
   CITATIONS
========================================================= */

blockquote {
    margin: 40px 0;

    padding-left: 28px;

    border-left: 2px solid var(--primary);

    font-family: var(--font-editorial);
    font-size: 30px;
    line-height: 1.35;
    color: var(--text);
}

.placeholder {
    color: var(--muted);
    font-style: italic;
}


/* =========================================================
   ACTIVITÉS — À PROPOS
========================================================= */

.about-activities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;

    margin-top: 64px;
}

.about-activities article h3 {
    margin-top: 12px;
}

.about-activities article > p:not(.eyebrow) {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.75;
}

.about-final {
    margin-top: 80px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about-intro {
        padding-block: 80px;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-photo {
        position: static;
        max-width: 240px;
    }

    .about-photo img {
        aspect-ratio: 3 / 4;
    }

    blockquote {
        margin-block: 32px;
        padding-left: 20px;
        font-size: 26px;
    }

    .about-activities {
        grid-template-columns: 1fr;
        gap: 72px;
        margin-top: 48px;
    }
}
/* =========================================================
   PAGE ARTICLES
========================================================= */

.articles-header {
    padding-block: 112px 96px;
}

.articles-header h1 {
    margin-bottom: 32px;
}

.articles-intro {
    max-width: 650px;
    font-size: 20px;
    line-height: 1.7;
}


/* =========================================================
   FILTRES
========================================================= */

.article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 64px;
}

.filter {
    display: inline-block;

    padding: 7px 14px;

    border: 1px solid var(--border);

    color: var(--muted);
    font-size: 13px;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.filter:hover,
.filter.active {
    border-color: var(--primary);
    color: var(--cta);
}


/* =========================================================
   LISTE DES ARTICLES
========================================================= */

.articles-list {
    max-width: 900px;
}

.article-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 48px;

    padding-block: 40px;

    border-top: 1px solid var(--border);
}

.article-item:last-child {
    border-bottom: 1px solid var(--border);
}


/* =========================================================
   MÉTADONNÉES
========================================================= */

.article-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-top: 5px;

    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.article-meta span {
    color: var(--muted);
}


/* =========================================================
   CONTENU
========================================================= */

.article-theme {
    margin-bottom: 8px;

    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.article-content h2 {
    font-size: 32px;
    line-height: 1.2;
}

.article-content h2 a {
    transition: color 180ms ease;
}

.article-content h2 a:hover {
    color: var(--cta);
}

.article-content > p:last-child {
    max-width: 650px;
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .articles-header {
        padding-block: 80px;
    }

    .articles-intro {
        font-size: 18px;
    }

    .article-filters {
        margin-bottom: 40px;
    }

    .article-item {
        grid-template-columns: 1fr;
        gap: 12px;

        padding-block: 32px;
    }

    .article-meta {
        flex-direction: row;
        gap: 12px;
    }

    .article-meta span::before {
        content: "·";
        margin-right: 12px;
    }

    .article-content h2 {
        font-size: 28px;
    }

}
/* =========================================================
   ARTICLE — HEADER
========================================================= */

.article-header {
    padding-block: 96px 80px;
}

.article-container {
    width: min(100% - 48px, 700px);
    margin-inline: auto;
}

.back-link {
    display: inline-block;

    margin-bottom: 64px;

    color: var(--muted);
    font-size: 13px;
}

.back-link:hover {
    color: var(--cta);
}


.article-header .article-theme {
    margin-bottom: 20px;

    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.article-header h1 {
    max-width: 760px;

    margin-bottom: 32px;

    font-size: 56px;
    line-height: 1.1;
}


.article-lead {
    max-width: 680px;

    margin-bottom: 32px;

    font-family: var(--font-editorial);
    font-size: 25px;
    line-height: 1.45;
    color: var(--body);
}


.article-information {
    display: flex;
    gap: 12px;

    color: var(--muted);
    font-size: 12px;
}

.article-information span::before {
    content: "·";
    margin-right: 12px;
}


/* =========================================================
   ARTICLE — IMAGE
========================================================= */

.article-cover {
    width: min(100% - 48px, 1080px);
    margin: 0 auto 72px;
}

.article-cover img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: cover;
}

.article-cover figcaption {
    max-width: 680px;
    margin: 12px auto 0;

    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   CORPS DE L'ARTICLE
========================================================= */

.article-body {
    width: min(100% - 48px, 680px);
    margin-inline: auto;

    font-size: 18px;
    line-height: 1.8;
}


.article-body p {
    margin-bottom: 28px;

    color: var(--body);
}


.article-body h2 {
    margin-top: 72px;
    margin-bottom: 28px;

    font-size: 36px;
    line-height: 1.2;
}


.article-body h3 {
    margin-top: 52px;
    margin-bottom: 20px;

    font-size: 28px;
}


.article-body strong {
    color: var(--text);
    font-weight: 600;
}


.article-body a {
    color: var(--cta);

    text-decoration-line: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 4px;
}


.article-body a:hover {
    text-decoration-color: var(--cta);
}


/* =========================================================
   LISTES
========================================================= */

.article-body ul,
.article-body ol {
    margin: 32px 0;
    padding-left: 28px;

    color: var(--body);
}


.article-body li {
    margin-bottom: 10px;
}


/* =========================================================
   CITATIONS
========================================================= */

.article-body blockquote {
    margin: 56px 0;

    padding: 8px 0 8px 28px;

    border-left: 2px solid var(--primary);

    font-family: var(--font-editorial);
    font-size: 32px;
    line-height: 1.35;

    color: var(--text);
}


/* =========================================================
   FIN DE L'ARTICLE
========================================================= */

.article-footer {
    margin-top: 96px;
    padding-block: 64px;

    border-top: 1px solid var(--border);
}


.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    padding-bottom: 56px;

    font-size: 13px;
}


.article-tags span {
    margin-right: 8px;

    color: var(--muted);
}


.article-tags a {
    padding: 6px 12px;

    border: 1px solid var(--border);

    color: var(--muted);
}


.article-tags a:hover {
    border-color: var(--primary);
    color: var(--cta);
}


/* =========================================================
   NAVIGATION ENTRE ARTICLES
========================================================= */

.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}


.article-navigation-item {
    display: flex;
    flex-direction: column;

    padding: 32px 0;

    transition: color 180ms ease;
}


.article-navigation-item.previous {
    padding-right: 40px;
}


.article-navigation-item.next {
    padding-left: 40px;

    border-left: 1px solid var(--border);

    text-align: right;
}


.article-navigation-item span {
    margin-bottom: 12px;

    color: var(--muted);
    font-size: 12px;
}


.article-navigation-item strong {
    font-family: var(--font-editorial);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
}


.article-navigation-item:hover {
    color: var(--cta);
}


/* =========================================================
   RETOUR
========================================================= */

.article-back {
    margin-top: 48px;

    text-align: center;
}


.article-back a {
    color: var(--muted);
    font-size: 13px;
}


.article-back a:hover {
    color: var(--cta);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .article-header {
        padding-block: 72px 56px;
    }

    .article-container {
        width: min(100% - 36px, 700px);
    }

    .back-link {
        margin-bottom: 48px;
    }

    .article-header h1 {
        font-size: 40px;
    }

    .article-lead {
        font-size: 22px;
    }

    .article-cover {
        width: calc(100% - 36px);
        margin-bottom: 56px;
    }

    .article-body {
        width: calc(100% - 36px);

        font-size: 17px;
        line-height: 1.75;
    }

    .article-body h2 {
        margin-top: 56px;

        font-size: 32px;
    }

    .article-body h3 {
        font-size: 26px;
    }

    .article-body blockquote {
        margin-block: 44px;

        padding-left: 20px;

        font-size: 27px;
    }

    .article-navigation {
        grid-template-columns: 1fr;
    }

    .article-navigation-item.previous {
        padding-right: 0;
    }

    .article-navigation-item.next {
        padding-left: 0;

        border-top: 1px solid var(--border);
        border-left: 0;

        text-align: left;
    }

}
/* =========================================================
   TABLE DES MATIÈRES
========================================================= */

.article-toc {
    margin-bottom: 80px;
}

.toc-inner {
    padding: 28px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.toc-title {
    margin-bottom: 16px;

    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.article-toc ol {
    margin: 0;
    padding-left: 24px;

    color: var(--muted);
}

.article-toc li {
    padding-block: 5px;
}

.article-toc a {
    color: var(--muted);
    font-size: 15px;
}

.article-toc a:hover {
    color: var(--cta);
}
/* =========================================================
   SOURCES
========================================================= */

.article-sources {
    width: min(100% - 48px, 680px);
    margin: 80px auto 0;
    padding-top: 48px;

    border-top: 1px solid var(--border);
}

.article-sources h2 {
    margin-bottom: 24px;

    font-size: 24px;
}

.article-sources ul {
    margin: 0;
    padding-left: 22px;
}

.article-sources li {
    margin-bottom: 10px;
}

.article-sources a {
    color: var(--cta);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 4px;
}

.article-sources a:hover {
    text-decoration-color: var(--cta);
}
@media (max-width: 700px) {

    .article-cover {
        width: calc(100% - 36px);
        margin-bottom: 56px;
    }

    .article-sources {
        width: calc(100% - 36px);
        margin-top: 64px;
    }

}


/* Navigation fluide vers les sections */

.article-body h2,
.article-body h3 {
    scroll-margin-top: 32px;
}

/* =========================================================
   PAGE JURIDIQUE
========================================================= */

.legal-page {
    padding-block: 96px 120px;
}

.legal-content {
    max-width: 760px;
    margin-inline: auto;
}

.legal-content h1 {
    margin-bottom: 32px;
}

.legal-intro {
    max-width: 650px;
    margin-bottom: 80px;

    font-family: var(--font-editorial);
    font-size: 22px;
    line-height: 1.55;
}

.legal-section {
    margin-bottom: 64px;
}

.legal-section h2 {
    margin-bottom: 24px;

    font-size: 28px;
    line-height: 1.25;
}

.legal-section p {
    margin-bottom: 18px;

    font-size: 16px;
    line-height: 1.75;
}

.legal-section a {
    color: var(--cta);

    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 4px;
}

.legal-section a:hover {
    text-decoration-color: var(--cta);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .legal-page {
        padding-block: 72px 80px;
    }

    .legal-intro {
        margin-bottom: 56px;

        font-size: 20px;
    }

    .legal-section {
        margin-bottom: 48px;
    }

    .legal-section h2 {
        font-size: 25px;
    }

}
/* =========================================================
   INTER
========================================================= */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   NEWSREADER
========================================================= */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* =========================================================
   PROJETS — INTRODUCTION
========================================================= */

.projects-header {
    padding-block: 96px 80px;
}

.projects-header-content {
    max-width: 760px;
}

.projects-header h1 {
    margin-bottom: 32px;
}

.projects-intro {
    max-width: 680px;
    margin-bottom: 20px;

    font-size: 19px;
    line-height: 1.7;
}


/* =========================================================
   PROJETS — LISTE
========================================================= */

.projects-list {
    padding-block: 0 40px;
}

.project {
    display: grid;
    grid-template-columns: 150px minmax(0, 680px);
    gap: 48px;

    padding-block: 56px;

    border-top: 1px solid var(--border);
}

.project:last-child {
    border-bottom: 1px solid var(--border);
}


/* =========================================================
   MÉTADONNÉES
========================================================= */

.project-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding-top: 7px;
}

.project-status {
    color: var(--primary);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-date {
    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   CONTENU
========================================================= */

.project-content h2 {
    margin-bottom: 20px;

    font-family: var(--font-editorial);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
}

.project-description {
    font-size: 19px;
    line-height: 1.65;
}

.project-content p {
    margin-bottom: 18px;
}


/* =========================================================
   ÉVÉNEMENTS
========================================================= */

.projects-events {
    padding-block: 100px;
}

.projects-events-inner {
    max-width: 830px;
}

.projects-events h2 {
    margin-bottom: 48px;
}

.event {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 48px;

    padding-block: 32px;

    border-top: 1px solid var(--border);
}

.event:last-child {
    border-bottom: 1px solid var(--border);
}

.event-date {
    padding-top: 4px;

    color: var(--muted);
    font-size: 14px;
}

.event-content h3 {
    margin-bottom: 10px;

    font-family: var(--font-editorial);
    font-size: 25px;
    font-weight: 400;
}

.event-content p {
    margin-bottom: 8px;
}


/* =========================================================
   CONCLUSION
========================================================= */

.projects-closing {
    padding-block: 80px 120px;
}

.projects-closing-inner {
    max-width: 680px;

    padding-top: 40px;

    border-top: 1px solid var(--border);
}

.projects-closing-inner p {
    margin-bottom: 24px;

    font-family: var(--font-editorial);
    font-size: 24px;
    line-height: 1.45;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .projects-header {
        padding-block: 72px 56px;
    }

    .projects-intro {
        font-size: 18px;
    }

    .project {
        grid-template-columns: 1fr;
        gap: 20px;

        padding-block: 44px;
    }

    .project-meta {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .project-content h2 {
        font-size: 30px;
    }

    .project-description {
        font-size: 18px;
    }

    .projects-events {
        padding-block: 72px;
    }

    .event {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .projects-closing {
        padding-block: 64px 80px;
    }

    .projects-closing-inner p {
        font-size: 21px;
    }

}
/* =========================================================
   ADDITIONS — Corporate / banded layout (2026-09-22)
   ---------------------------------------------------
   Approche additive : aucune modification des sélecteurs
   génériques existants (.section, .site-header, etc.).
   On introduit de nouvelles variables et classes utilitaires
   pour rester compatible avec les autres pages du site.

   Objectif : rythme visuel « corporate » par alternance
   de bandes blanches / bleu clair très désaturé (dérivé de
   --primary), avec séparateurs fins, sans ombres ni gradients.
========================================================= */


/* -----------------------------------------------------
   Nouvelles variables (dérivées de la palette existante)
----------------------------------------------------- */

:root {
    /* Bande de fond "alt" — bleu très clair désaturé,
       dérivé de --primary (#4F6D8A) sans introduire
       une nouvelle teinte disjointe. */
    --section-alt-bg: #EFF3F6;

    /* Séparateur fin entre bandes — cohérent avec --border
       mais légèrement plus marqué pour le rythme corporate. */
    --section-divider: #DDE6EC;

    /* Fond gris très clair pour les encadrés de convictions (sobre, cohérent avec la palette). */
    --card-bg: #F5F6F7;

    /* Variante locale du padding de section pour les bandes
       (laisse .section.padding-block: 112px intact partout). */
    --band-padding-block: 120px;
}


/* -----------------------------------------------------
   Utilitaire : bande de fond pleine largeur
   Appliqué sur <section> en complément de la classe
   .section existante. Aucun changement sur .section.
----------------------------------------------------- */

.section--alt {
    background-color: var(--section-alt-bg);
    /* Conserve le padding générique de .section ; on
       n'ajoute rien qui pourrait entrer en conflit avec
       d'autres pages qui n'utilisent pas cette classe. */
}


/* -----------------------------------------------------
   Utilitaire : séparateur fin haut + bas pour bande alt
   Donne un rythme "corporate" discret entre les bandes,
   sans surcharger (pas d'ombre, pas de gradient).
----------------------------------------------------- */

.section--band-divider {
    border-top: 1px solid var(--section-divider);
    border-bottom: 1px solid var(--section-divider);
}


/* -----------------------------------------------------
   Cohérence visuelle des activités à l'intérieur d'une bande
   (optionnel, additif) — conserve la palette existante.
----------------------------------------------------- */

.section--alt .activity {
    border-top-color: var(--section-divider);
}

.section--alt .activity:last-child {
    border-bottom-color: var(--section-divider);
}


/* =========================================================
   ADDITIONS — Menu mobile (JS activé)
   ---------------------------------------------------
   Le bouton ☰ existe dans le DOM et devient visible
   sous 800px, mais aucun état "ouvert" n'était défini.
   On ajoute la règle pour l'état .is-open de .main-nav.
   Le JS toggle la classe ; le CSS ouvre/ferme le menu.
========================================================= */

.main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    position: absolute;
    top: 88px;        /* aligné sous le header */
    left: 0;
    right: 0;

    padding: 24px 24px 32px;

    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.menu-toggle[aria-expanded="true"] {
    color: var(--cta);
}


/* =========================================================
   ADDITIONS — Mobile (≤ 700px) — menu ouvert
   ---------------------------------------------------
   S'aligne sur la media query existante « RESPONSIVE — MOBILE »
   (max-width: 700px) où .main-nav passe en display:none et
   .menu-toggle devient visible. On ne touche pas aux media
   queries existantes : on ajoute un second bloc qui ne se
   déclenche que lorsque le bouton est réellement affiché.
========================================================= */

@media (max-width: 700px) {

    .site-header {
        position: relative; /* nécessaire pour le menu absolu */
    }

    .main-nav.is-open {
        gap: 18px;
        top: 72px;
        padding: 20px 24px 28px;
    }

}
/* =========================================================
   THEMES — icônes SVG au-dessus de chaque titre
========================================================= */

/* Conteneur de l'icône : bloc, taille fixe, aligné à gauche
   (cohérent avec le flux du h3 et du p de l'article) */
.theme-icon {
    display: block;

    width: 36px;
    height: 36px;
    margin: 0 0 12px 0;

    /* Couleur de l'icône : gris-bleu foncé cohérent avec un thème sobre.
       Utilise currentColor côté SVG pour rester facile à surcharger. */
    color: #3a4a5c;
}

/* Le SVG remplit le conteneur et hérite de la couleur via currentColor */
.theme-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
}