/*
Theme Name:  Solvo Capital
Theme URI:   https://solvocapital.com
Author:      Développeur Senior
Description: Thème institutionnel sur mesure pour Solvo Capital, fonds d'investissement B2B.
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     Propriétaire
Text Domain: solvo-capital
*/

/* ── Police principale : Outfit (chargée via wp_enqueue_style) ──────
   Géométrique, ronde et moderne — alternative libre à Circular.
   Repli : Helvetica / Arial si Google Fonts indisponible. ────────── */

/* ================================================================
   COMMUN
   Variables, reset, base HTML, typographie, layout, composants
   partagés sur toutes les pages.
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    /* Couleurs */
    --color-primary:       #007abf;
    --color-primary-dark:  #005a8e;
    --color-primary-light: #7ec8f0;

    /* Rouge réglementaire — réservé au bouton « Change cookie consent »,
       qu'Oana demande explicitement en rouge et très visible. */
    --color-alert:         #b3352e;
    --color-alert-light:   #f0897f;
    --color-accent:        #C9A84C;
    --color-surface:       #EDE8DF;
    --color-white:         #FFFFFF;
    --color-bg-nav:        #1e3f5a;
    --color-text:          #1a1a2e;
    --color-text-muted:    #6b7a8d;
    --color-border:        #dde4ec;

    /* Typographie */
    --font-serif:     'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-sans:      'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:      'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --line-height:    1.7;

    /* Échelle typographique */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.625rem;
    --text-3xl:  2.0625rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.25rem;

    /* Espacement */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Layout */
    --container-max:  75rem;
    --container-narrow: 57.5rem;
    --container-pad:  clamp(1.5rem, 5vw, 4rem);
    --chrome-max:     clamp(105rem, 94vw, 135rem);
    --chrome-pad:     clamp(0.625rem, 1.5vw, 1.5rem);

    /* Hauteur réelle du header, qui est en position:absolute et recouvre le
       haut de page : 2 × 5.5rem de padding-block + la hauteur du logo. Les
       pages à hero passent dessous sans problème ; celles qui démarrent par
       du texte doivent s'en décaler explicitement. */
    --header-h:       calc(11rem + clamp(6.5rem, 10vw, 9rem));
    --section-gap:    clamp(4rem, 8vw, 8rem);

    /* Divers */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;
    --transition: 200ms ease;
    --shadow-sm:  0 0.0625rem 0.1875rem rgba(10, 22, 40, 0.08);
    --shadow-md:  0 0.25rem 1rem rgba(10, 22, 40, 0.10);
}

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

html {
    font-size: clamp(0.75rem, 0.625vw, 1rem);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1 0 auto;
}

.error404 #main-content {
    display: flex;
    flex-direction: column;
}

/* ── Typographie ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: normal;
    line-height: 1.25;
    color: var(--color-primary);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin-bottom: var(--space-4); max-width: 70ch; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.1875rem;
    transition: color var(--transition);
}
a:hover { color: var(--color-accent); }

strong, b { font-weight: 600; }

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

ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
li { margin-bottom: var(--space-2); }

blockquote {
    border-left: 0.1875rem solid var(--color-accent);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-primary);
}

hr { border: none; border-top: 0.0625rem solid var(--color-border); margin: var(--space-8) 0; }

/* ── Layout ────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--section-gap) 0;
    background-color: var(--color-surface);
}

.section--alt {
    background-color: #f1eee8;
}

.section__label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.1875rem;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.625rem;
}

.section__label--news-home {
    font-size: 1.5rem;
    letter-spacing: 0.18em;
}

.section__label--featured {
    font-size: var(--text-lg);
    letter-spacing: 0.12em;
    line-height: 1.3;
    margin-bottom: 0.875rem;
}

.section__title {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 3vw, var(--text-4xl));
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

.section__title--featured {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
}

/* Titre d'affichage — le gros intertitre capitales de la page d'accueil.
   Était écrit en attribut style, recopié à l'identique dans sept fichiers. */
.display-title {
    font-family: var(--font-sans);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.0625rem;
    text-transform: uppercase;
    text-align: center;
    color: #111;
    margin-bottom: var(--space-8);
}

.section__intro {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.85;
    max-width: 35rem;
    margin-bottom: var(--space-12);
}

.text-center { text-align: center; }
.text-center .section__intro { margin-inline: auto; }

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -624.9375rem;
    top: 0.5rem;
    z-index: 999;
    padding: 0.5rem 1rem;
    background: #005485;
    color: var(--color-white);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.skip-link:focus { left: 0.5rem; }

/* ── Header ────────────────────────────────────────────────────── */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    transition: background var(--transition);
}

/* Le header est transparent : il emprunte le fond de la page qu'il recouvre.
   Sur les pages légales, dont le corps est blanc, il faut donc le peindre
   explicitement pour qu'il reste navy et que la navigation blanche se lise. */
body.is-legal-page .site-header {
    background-color: var(--color-bg-nav);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding-left: clamp(4rem, 12vw, 10rem);
    padding-right: clamp(4rem, 12vw, 10rem);
    padding-block: 5.5rem;
}

.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo img { height: clamp(6.5rem, 10vw, 9rem); width: auto; display: block; }

.nav-primary {
    display: flex;
    align-items: center;
    margin-top: -1.2rem;
}

.nav-primary__list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-8), 4vw, var(--space-12));
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.nav-primary__list li { margin-bottom: 0; }

.nav-primary__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding-inline: 0.3rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1125rem;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-primary__list a:hover { color: rgba(255,255,255,0.7); }
.nav-primary__list a:focus-visible,
.footer-legal a:focus-visible,
.nav-toggle:focus-visible,
.site-logo:focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.25rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.625rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
}

.nav-toggle__bar {
    display: block;
    width: 1.75rem;
    height: 0.1875rem;
    background: var(--color-white);
    border-radius: 0.125rem;
    transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(0.5625rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-0.5625rem) rotate(-45deg); }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-bg-nav);
    color: rgba(255,255,255,0.6);
}

.site-footer .container {
    max-width: var(--chrome-max);
    padding-inline: var(--chrome-pad);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-block: var(--space-6);
}

.footer-legal { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-legal a { font-size: 0.8125rem; color: rgba(255,255,255,0.40); text-decoration: none; transition: color var(--transition); overflow-wrap: anywhere; }
.footer-legal a:hover { color: var(--color-white); }

/* Mention réglementaire ORIAS/AMF — obligatoire sur toutes les pages.
   Pavé de plusieurs lignes : il occupe toute la largeur sous les liens,
   en retrait typographique pour ne pas concurrencer la navigation. */
.footer-legal-notice {
    /* Échappe au max-width: 70ch global des <p>, qui écrasait le pavé sur
       ~5 lignes dans le coin du footer. On vise la moitié du container sur
       grand écran ; en dessous, le plancher de 34rem reprend la main et le
       texte occupe toute la largeur disponible. Tout est relatif : aucune
       valeur en px, donc le rendu suit la taille de police de l'utilisateur. */
    max-width: max(50%, 34rem);
    margin: 0;
    padding-block: var(--space-6) var(--space-8);
    border-top: 0.0625rem solid rgba(255,255,255,0.10);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.34);
    text-wrap: pretty;
}

.footer-legal-notice em {
    font-style: italic;
}

.cookie-banner {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(calc(100vw - 2rem), 34rem);
    padding: var(--space-6);
    color: var(--color-text);
    background: var(--color-white);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__body { display: flex; flex-direction: column; gap: var(--space-3); }

.cookie-banner__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.cookie-banner__text {
    margin: 0;
    max-width: none;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.cookie-banner__text a { color: var(--color-primary); }

/* Les catégories consentables. Functional est verrouillée : son <input> est
   `disabled`, donc grisé par le navigateur — on assume cet état, il dit au
   visiteur que le choix ne lui appartient pas. */
.cookie-banner__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.cookie-banner__categories li { margin-bottom: 0; }

.cookie-banner__category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.cookie-banner__category input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.cookie-banner__category input:disabled { cursor: default; }
.cookie-banner__category input:disabled + span { color: var(--color-text-muted); }

/* ── Bannière longue ───────────────────────────────────────────────
   Même carte, dépliée : on élargit et on plafonne la hauteur, le corps
   défilant à l'intérieur pour que la bannière ne dépasse jamais l'écran. */
.cookie-banner.is-expanded {
    width: min(calc(100vw - 2rem), 42rem);
}

.cookie-banner.is-expanded .cookie-banner__body {
    max-height: min(26rem, 55vh);
    overflow-y: auto;
}

.cookie-banner__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 0.0625rem solid var(--color-border);
}

.cookie-banner__details[hidden] { display: none; }

.cookie-banner__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

/* Lien « Show details » : discret, aligné à gauche, pas un bouton d'action. */
.cookie-banner__more {
    align-self: flex-start;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.cookie-banner__more:hover { color: var(--color-primary-dark); }

/* ── Dossiers dépliants de l'onglet Details ────────────────────── */
.cookie-folder {
    border-bottom: 0.0625rem solid var(--color-border);
}

.cookie-folder__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.cookie-folder__head::-webkit-details-marker { display: none; }

/* Chevron maison : pointe vers le bas replié, vers le haut déplié, comme
   demandé dans le document. */
.cookie-folder__head::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 0.125rem solid var(--color-primary);
    border-bottom: 0.125rem solid var(--color-primary);
    transform: rotate(45deg) translate(-0.15em, -0.15em);
    transition: transform var(--transition);
}

.cookie-folder[open] > .cookie-folder__head::after {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.cookie-folder__check { display: inline-flex; }

.cookie-folder__check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.cookie-folder__count {
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-muted);
    background: #f1eee8;
    border-radius: 1rem;
    font-variant-numeric: tabular-nums;
}

.cookie-folder__body {
    padding-bottom: var(--space-4);
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cookie-folder__about,
.cookie-folder__empty {
    margin: 0;
    max-width: none;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.cookie-folder__empty { font-style: italic; }

.cookie-detail {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: 0.2rem var(--space-4);
    margin: 0;
    padding: var(--space-3);
    font-size: 0.8125rem;
    background: #f6f8fb;
    border-radius: var(--radius-sm);
}

.cookie-detail dt {
    font-weight: 600;
    color: var(--color-text-muted);
}

.cookie-detail dd { margin: 0; }

.cookie-detail code,
.cookie-stamp code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* Empreinte du consentement, onglet About : l'identifiant qu'Oana demande
   au visiteur de citer en cas de réclamation. */
.cookie-stamp {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: 0.2rem var(--space-4);
    margin: 0;
    padding: var(--space-3);
    font-size: 0.8125rem;
    background: #f6f8fb;
    border-radius: var(--radius-sm);
}

.cookie-stamp[hidden] { display: none; }
.cookie-stamp dt { font-weight: 600; color: var(--color-text-muted); }
.cookie-stamp dd { margin: 0; overflow-wrap: anywhere; }

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Hiérarchie visuelle imposée par Oana : « Accept all » plein et recommandé,
   « Accept selection » neutre, « Deny non-essential » en contour rouge. */
.cookie-btn,
.contact-map__button {
    border: 0.0625rem solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.625rem 1rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-primary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.cookie-btn--primary,
.contact-map__button {
    color: var(--color-white);
    background: var(--color-primary);
}

.cookie-btn--deny {
    color: var(--color-alert);
    border-color: var(--color-alert);
}

.cookie-btn--primary:hover,
.cookie-btn--neutral:hover,
.contact-map__button:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.cookie-btn--deny:hover {
    color: var(--color-white);
    background: var(--color-alert);
    border-color: var(--color-alert);
}

.cookie-btn:focus-visible,
.contact-map__button:focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.1875rem;
}

/* ── Boutons ───────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.625rem;
    border-radius: var(--radius-sm);
    border: 0.0625rem solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    white-space: nowrap;
}

.btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn--primary:hover { background: transparent; color: var(--color-primary); }

.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }

.btn--accent { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.btn--accent:hover { opacity: 0.85; }

/* ── Cartes génériques ─────────────────────────────────────────── */
.card-grid { display: grid; gap: 1.375rem; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 122, 191, 0.22);
}

.card__thumbnail-link {
    display: block;
    text-decoration: none;
    background: linear-gradient(135deg, var(--color-bg-nav), var(--color-primary));
}

.card__thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.card__meta-separator {
    opacity: 0.4;
}

.card__title {
    margin-bottom: 0.85rem;
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    line-height: 1.35;
    color: var(--color-text);
}

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

.card__title-link:hover {
    color: var(--color-primary);
}

.card__excerpt {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.85;
}

.card__link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    border-bottom: 0.0625rem solid var(--color-primary);
    padding-bottom: 0.125rem;
}

.card__link:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ── Utilitaires ───────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

.text-muted  { color: var(--color-text-muted); }
.para        { font-size: 1.3rem; color: var(--color-text-muted); font-weight: 500; line-height: 1.85; }
.about-home__text { text-align: justify; }
.about-home__text p,
.about-home__text li { text-align: justify; max-width: none; }
.text-accent { color: var(--color-accent); }
.text-serif  { font-family: var(--font-serif); }
.mt-auto     { margin-top: auto; }


/* ================================================================
   PAGE D'ACCUEIL — front-page.php
   ================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
    position: relative;
    height: clamp(40.625rem, 80vh, 63.75rem);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: calc(50% + 6.25rem) 38%;
    background-repeat: no-repeat;
}

.hero__bg--media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30, 63, 90, 0.9) 0, rgba(30, 63, 90, 0.9) 10%, rgba(30, 63, 90, 0) 50%);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    padding: 0 var(--container-pad);
    width: 100%;
    max-width: 125rem;
    transform: translateY(3rem);
}

.hero__eyebrow { display: block; font-size: 1.75rem; letter-spacing: 0.1875rem; text-transform: uppercase; color: var(--color-primary-light); margin-bottom: 1.375rem; }
.hero__title { font-family: var(--font-serif); font-size: clamp(1.95rem, 3vw, 2.65rem); font-weight: 400; color: var(--color-white); line-height: 1.3; margin-bottom: 1.375rem; max-width: 58rem; }
.hero__title em { font-style: italic; color: var(--color-primary-light); }
.hero__subtitle { font-size: var(--text-base); color: rgba(255,255,255,0.70); line-height: 1.78; max-width: 26.875rem; margin-bottom: 2.375rem; }
.hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

.hero--news {
    height: clamp(40.625rem, 80vh, 63.75rem);
}

/* Filtre du hero uniformisé : les pages News utilisent désormais le même
   filtre que la home (.hero__overlay). On ne surcharge plus le dégradé ici
   pour que la classe .hero__overlay--news hérite simplement de la base. */

.hero__content--news {
    padding-left: clamp(4rem, 12vw, 10rem);
    padding-right: clamp(4rem, 8vw, 6rem);
}

.news-hero__subtitle {
    max-width: 34rem;
    color: rgba(255,255,255,0.78);
    margin-bottom: 0;
}

.news-page {
    background-color: var(--color-surface);
}

.stats-bar--news {
    background: linear-gradient(180deg, #17324c 0%, #10283f 100%);
}

.news-editorial {
    padding-top: clamp(4rem, 7vw, 6rem);
}

.news-editorial__intro {
    margin-bottom: var(--space-8);
}

.news-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.news-featured__media {
    display: block;
    min-height: 100%;
    background: linear-gradient(135deg, #123654 0%, var(--color-primary) 100%);
}

.news-featured__media img,
.news-featured__fallback {
    width: 100%;
    height: 100%;
    min-height: 28rem;
    object-fit: cover;
}

.news-featured__fallback {
    background:
        radial-gradient(circle at top right, rgba(201,168,76,0.25), transparent 28%),
        linear-gradient(135deg, #17324c 0%, var(--color-primary) 100%);
}

.news-featured__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
}

.news-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.news-featured__category {
    padding: 0.35rem 0.7rem;
    background: rgba(0,122,191,0.08);
    color: var(--color-primary);
}

.news-featured__title {
    margin-bottom: 1rem;
    color: var(--color-text);
}

.news-featured__title a {
    color: inherit;
    text-decoration: none;
}

.news-featured__title a:hover {
    color: var(--color-primary);
}

.news-featured__excerpt {
    font-size: 1.3rem;
    font-weight: 500;
    max-width: 40ch;
    margin-bottom: 1.75rem;
    color: var(--color-text-muted);
    line-height: 1.85;
}

.news-archive {
    border-top: 0.0625rem solid rgba(0, 122, 191, 0.08);
    background-color: var(--color-surface);
}

.news-archive .container {
    max-width: 90rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.news-archive__intro {
    margin-bottom: var(--space-8);
}

.news-archive__intro .section__intro {
    margin-bottom: 0;
}

.news-archive__grid {
    padding-block: 0 var(--space-12);
}

.news-page .card__thumbnail-link {
    background: linear-gradient(135deg, #21425d 0%, #44627a 100%);
}

.news-page .card {
    position: relative;
    border: 0.0625rem solid #6d8faa;
    border-radius: 0;
    background-color: #21425d !important;
}

/* Toute la carte cliquable : le lien du titre s'étire sur l'ensemble
   de la carte (motif « stretched link »), un seul lien sémantique. */
.news-page .card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.news-page .card:hover {
    border-color: #4f7696;
}

.news-page .card__thumbnail {
    aspect-ratio: 4 / 3;
}

.news-page .card__body {
    padding: 1.35rem 1.35rem 1.5rem;
    background-color: transparent !important;
}

.news-page .card__meta {
    color: #b9cddd;
}

.news-page .card__title {
    color: #f7fbff;
}

.news-page .card__title-link:hover {
    color: #d4e9f7;
}

.news-page .card__excerpt {
    font-size: 1.16rem;
    line-height: 1.72;
    color: #d7e4ee;
}

.news-empty-state__card {
    max-width: 44rem;
    padding: clamp(2rem, 4vw, 3rem);
    border: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
    box-shadow: none;
}

/* ── Stats bar ─────────────────────────────────────────────────── */
.stats-bar { background: var(--color-bg-nav); border-top: 0.0625rem solid rgba(255,255,255,0.07); }
.stats-bar__list { display: flex; justify-content: center; align-items: center; list-style: none; padding: 2.25rem var(--container-pad); flex-wrap: wrap; gap: 0.5rem 0; }
.stats-bar__item { text-align: center; padding: 0 2.75rem; }
.stats-bar__sep { display: block; width: 0.0625rem; height: 2.5rem; background: rgba(255,255,255,0.13); }
.stats-bar__value { display: block; font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--color-white); font-weight: 400; margin-bottom: 0.375rem; letter-spacing: -0.03125rem; }
.stats-bar__label { font-size: var(--text-xs); letter-spacing: 0.09375rem; text-transform: uppercase; color: rgba(255,255,255,0.42); }

/* ── About ─────────────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: start;
    background-color: var(--color-surface);
}
.about-grid__text .section__title { margin-bottom: 1rem; }
.about-grid__text p { margin-bottom: 1rem; }
.about-grid__subheading { font-size: var(--text-sm); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin: 1.75rem 0 0.625rem; }
.about-grid__text .btn { margin-top: 1.5rem; }

.values { display: flex; flex-direction: column; gap: 1.625rem; }
.value-item { border-left: 0.125rem solid var(--color-primary); padding-left: 1.25rem; }
.value-item__title { font-size: 1.15rem; letter-spacing: 0.075rem; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: 0.5rem; }
.values--process .value-item__text {
    text-align: justify;
    max-width: none;
}

.sustainability__text {
    text-align: justify;
    max-width: none;
}

.criteria-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.criteria-card {
    grid-column: span 2;
    border: 0.0625rem solid rgba(15, 82, 217, 0.3);
}

.criteria-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(15, 82, 217, 0.3);
}

.criteria-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.criteria-card:nth-child(5) {
    grid-column: 4 / span 2;
}

/* ── Criteria PAI-style ────────────────────────────────────────── */
.criteria-pai {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-12);
}

.criteria-pai__item {
    border-top: 0.125rem solid var(--color-text);
    padding-top: 1.25rem;
}

.criteria-pai__label {
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.625rem;
    line-height: 1.2;
}

.criteria-pai__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.criteria-pai__list li {
    font-size: var(--text-base);
    color: var(--color-text);
    padding: 0.15rem 0;
}

.criteria-pai__text {
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0;
    max-width: none;
}

/* ── Pillars ───────────────────────────────────────────────────── */
.section-divider {
    display: flex;
    justify-content: center;
    padding: 0 var(--container-pad);
    margin: 0.5rem 0 1.25rem;
}

.section-divider__bar {
    width: 100%;
    max-width: calc(var(--container-max) * 0.8);
    height: 0.125rem;
    background: #0f52d9;
    clip-path: polygon(
        0 50%,
        10% 46%,
        22% 38%,
        34% 28%,
        50% 20%,
        66% 28%,
        78% 38%,
        90% 46%,
        100% 50%,
        90% 54%,
        78% 62%,
        66% 72%,
        50% 80%,
        34% 72%,
        22% 62%,
        10% 54%
    );
}

.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.0625rem; background: var(--color-border); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.pillar { background: var(--color-surface); padding: 2.25rem 1.875rem; }
.pillar__number { font-family: var(--font-serif); font-size: 2.25rem; color: var(--color-border); margin-bottom: 1.125rem; line-height: 1; }
.pillar__title { font-size: var(--text-sm); letter-spacing: 0.03125rem; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: 0.625rem; }
.pillar__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.72; }

/* ── News ──────────────────────────────────────────────────────── */
.news-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; gap: 1.25rem; }
.news-header .section__title { margin-bottom: 0; }
.news-header__actions { display: flex; align-items: center; gap: 1rem; }

.news-carousel {
    max-width: 100%;
    margin-inline: auto;
    background-color: var(--color-surface);
}

.news-carousel__wrapper { 
    position: relative; 
    display: flex; 
    align-items: center; 
}

.carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    background: var(--color-surface);
    color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, color 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.carousel-button svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.carousel-button--prev {
    left: -1.625rem;
}

.carousel-button--next {
    right: -1.625rem;
}

@media (max-width: 75rem) {
    .carousel-button--prev { left: -0.875rem; }
    .carousel-button--next { right: -0.875rem; }
}

@media (max-width: 48rem) {
    .carousel-button {
        width: 2.75rem;
        height: 2.75rem;
    }
    .carousel-button--prev { left: -0.625rem; }
    .carousel-button--next { right: -0.625rem; }
}

.carousel-button:hover {
    background-color: var(--color-bg-nav);
    color: var(--color-white);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    transform: translateY(-50%) scale(1.05);
}

.carousel-button--prev:hover svg { transform: translateX(-0.125rem); }
.carousel-button--next:hover svg { transform: translateX(0.125rem); }

.carousel-button:disabled {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.95);
}

.news-carousel.is-static .carousel-button {
    opacity: 0;
    pointer-events: none;
}

.news-carousel__viewport {
    overflow: hidden;
    width: 100%;
}

.news-carousel__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
}

.news-carousel__track::-webkit-scrollbar {
    display: none;
}

.news-carousel__slide {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.card-news { border: 0.0625rem solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.card-news:hover { box-shadow: var(--shadow-md); }
.card-news__img { height: 18.75rem; background: linear-gradient(135deg, var(--color-bg-nav), var(--color-primary)); position: relative; display: flex; align-items: flex-end; padding: 0.875rem; overflow: hidden; }
.card-news__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-news__img-overlay { position: absolute; inset: 0; background: rgba(13,31,45,0.35); }
.card-news__cat { position: relative; z-index: 1; font-size: 0.625rem; letter-spacing: 0.09375rem; text-transform: uppercase; color: var(--color-primary-light); background: rgba(13,31,45,0.55); padding: 0.1875rem 0.5rem; border-radius: 0.125rem; }
.card-news__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card-news__date { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.5rem; }
.card-news__title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-text); line-height: 1.45; margin-bottom: 1.125rem; flex: 1; }
.card-news__link { align-self: flex-start; font-size: 0.6875rem; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--color-primary); text-decoration: none; border-bottom: 0.0625rem solid var(--color-primary); padding-bottom: 0.0625rem; transition: color 0.2s, border-color 0.2s; }
.card-news__link:hover { color: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* ── CTA band ──────────────────────────────────────────────────── */
.cta-band { background: var(--color-primary); padding: 4.5rem 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.cta-band__title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--color-white); font-weight: 400; line-height: 1.3; }
.cta-band__sub { font-size: var(--text-sm); color: rgba(255,255,255,0.72); margin-top: 0.5rem; }


/* ================================================================
   ARTICLE — single.php
   ================================================================ */
.single-post .site-header,
.single-team_member .site-header {
    position: relative;
    background: var(--color-bg-nav);
    border-bottom: none;
    box-shadow: none;
}

.single-team_member .site-header__inner {
    padding-block: 1.5rem;
}

.single-post .nav-primary__list a,
.single-team_member .nav-primary__list a {
    color: var(--color-white);
}

.single-post .nav-primary__list a:hover,
.single-team_member .nav-primary__list a:hover {
    color: rgba(255,255,255,0.7);
}

.single-post .nav-toggle__bar,
.single-team_member .nav-toggle__bar {
    background: var(--color-white);
}

.post-page {
    background-color: var(--color-surface);
}

.post-page .container {
    max-width: 90rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.post-simple-header {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--space-4);
    background: var(--color-surface);
}


.post-simple-header__breadcrumbs,
.post-simple-header__byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post-simple-header__breadcrumbs {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.post-simple-header__breadcrumb {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

.post-simple-header__breadcrumb:hover {
    color: var(--color-primary);
}

.post-simple-header__meta-sep {
    opacity: 0.38;
}

.post-simple-header__term {
    color: var(--color-primary);
}

.post-simple-header__title {
    color: var(--color-primary-dark);
    font-size: clamp(3.4rem, 7vw, 6.25rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-4);
}

.post-simple-header__byline {
    color: var(--color-text-muted);
    font-size: var(--text-xl);
    margin-bottom: var(--space-5, 1.25rem);
}

.post-simple-header__intro {
    max-width: 56ch;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    line-height: 1.85;
}

.post-featured {
    padding: 0 0 var(--space-12);
    background-color: var(--color-surface);
}

.post-featured-figure {
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    background: #f7f3eb;
}

.post-featured-image {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.post-featured-figure__caption {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-top: 0.0625rem solid var(--color-border);
}

.post-body {
    padding: var(--space-6) 0 var(--space-8);
    background-color: var(--color-surface);
}

.post-body__inner {
    /* Largeur = wideSize de theme.json (75rem) pour que les blocs « Large »
       puissent s'étendre. La largeur de LECTURE est gérée plus bas via le
       constrained layout de .prose. */
    max-width: var(--container-max);
    margin-inline: auto;
}

.post-article-card {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.prose {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.85;
    color: var(--color-text);
    max-width: none;
    font-family: var(--font-sans);
}

.prose *,
.prose p,
.prose li,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
[class*="wp-block-"] {
    font-family: var(--font-sans) !important;
}

.prose p,
.prose li,
.prose ul,
.prose ol {
    max-width: none;
}

/* Largeurs natives Gutenberg, pilotées par theme.json (contentSize /
   wideSize). .prose se comporte comme un « constrained layout » : le
   contenu courant est centré à la largeur de lecture, et les blocs en
   alignement « Large » / « Pleine largeur » (+ les colonnes par défaut)
   débordent pour occuper plus d'espace. */
.prose > * {
    max-width: var(--wp--style--global--content-size, 57.5rem);
    margin-inline: auto;
}
.prose > .wp-block-columns,
.prose > .alignwide {
    max-width: var(--wp--style--global--wide-size, 75rem);
}
.prose > .alignfull {
    max-width: none;
}

.prose h2 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-4);
    padding-top: var(--space-8);
    border-top: 0.0625rem solid rgba(221, 228, 236, 0.9);
    font-size: clamp(1.75rem, 2.35vw, 2.4rem);
    color: var(--color-primary-dark);
}

.prose h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: clamp(1.35rem, 1.95vw, 1.65rem);
    color: var(--color-primary-dark);
}

.prose p {
    margin-bottom: var(--space-6);
}

.prose ul,
.prose ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-8);
}

.prose li {
    margin-bottom: var(--space-2);
}

.prose blockquote {
    margin-block: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-left: 0.1875rem solid var(--color-primary);
    background: #f6f8fb;
    font-style: normal;
    font-size: var(--text-lg);
}

.prose figure {
    margin-block: var(--space-8);
}

.prose figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
}

/* Reset Gutenberg block default white backgrounds */
.prose [class*="wp-block-"] {
    background-color: transparent;
}

/* ── Pages légales ─────────────────────────────────────────────────
   Terms of Use, Legal Notice, Privacy Notice. Texte dense et long :
   on descend d'un cran la taille de .prose (calibrée pour des articles)
   et on resserre la mesure pour rester sous ~90 caractères par ligne. */
/* Sélecteur doublé : .page-content est déclaré plus bas dans le fichier et
   reprendrait la main sur le padding à specificité égale. */
.page-content.legal-page {
    padding-block: var(--space-12) var(--space-24);
}

.legal-prose {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
}

.legal-prose > * {
    max-width: 48rem;
}

.legal-prose h2 {
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    margin-top: var(--space-12);
}

.legal-prose h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-top: var(--space-6);
}

/* Blocs adresse (siège social, AMF, CNIL) : lignes courtes non justifiées,
   détachées du corps du texte. */
.legal-prose .legal-address {
    margin-block: var(--space-4) var(--space-6);
    padding-left: var(--space-6);
    border-left: 0.125rem solid var(--color-primary);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.legal-prose .legal-updated {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 0.0625rem solid rgba(221, 228, 236, 0.9);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.legal-prose a {
    color: var(--color-primary);
    overflow-wrap: anywhere;
}

/* Tableau des cookies. Six colonnes qui ne tiennent pas sous 38rem : le
   conteneur défile horizontalement pour que la page, elle, ne bouge pas. */
.legal-prose .legal-table-wrap {
    margin-block: var(--space-6);
    overflow-x: auto;
}

.legal-prose .legal-table {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal-prose .legal-table th,
.legal-prose .legal-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    border-bottom: 0.0625rem solid rgba(221, 228, 236, 0.9);
}

.legal-prose .legal-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.legal-prose .legal-table code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.875em;
}

.legal-table__sub {
    display: inline-block;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.legal-prose .legal-table__note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Bouton « Change cookie consent ». Oana le veut très visible et sous forme
   de bouton ; on garde le bleu du site plutôt que le rouge qu'elle suggérait,
   pour ne pas introduire une couleur d'alerte sur une action anodine. */
.legal-prose .cookie-reopen-wrap {
    margin-block: var(--space-8);
}

.cookie-reopen {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 0.125rem solid var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.cookie-reopen:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.cookie-reopen:focus-visible {
    outline: 0.1875rem solid var(--color-primary-dark);
    outline-offset: 0.2rem;
}

.post-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 0.0625rem solid var(--color-border);
}

.post-pagination__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.post-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding-inline: var(--space-3);
    border: 0.0625rem solid var(--color-border);
}

.post-footer {
    margin-top: var(--space-12);
    background-color: transparent;
}

.post-footer__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: clamp(1.25rem, 3vw, 2rem) 0 0;
    border-top: 0.0625rem solid var(--color-border);
}


/* ================================================================
   ARCHIVE / BLOG — archive.php
   ================================================================ */
.archive-header {
    background-color: var(--color-surface);
    border-bottom: 0.0625rem solid var(--color-border);
    padding-block: var(--space-16) var(--space-12);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-16);
    background-color: var(--color-surface);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding-block: var(--space-10);
    border-top: 0.0625rem solid var(--color-border);
    flex-wrap: wrap;
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: var(--space-3);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0.09375rem solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.pagination a:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
}
.pagination .current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.pagination .prev,
.pagination .next {
    min-width: auto;
    padding-inline: var(--space-4);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pagination .dots {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
}


/* ================================================================
   PAGE STANDARD — page.php
   ================================================================ */
.page-header {
    /* Le header du site étant absolu, un contenu qui démarre en haut de page
       passerait dessous : on dégage sa hauteur avant le titre. */
    padding-block: calc(var(--header-h) + var(--space-8)) var(--space-12);
    background-color: var(--color-surface);
    border-bottom: 0.0625rem solid var(--color-border);
}

.page-header__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.0625rem;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

/* Pages légales : on aligne le titre sur la colonne de texte (48rem), sinon
   il démarre plus à gauche que le corps de la page. */
.page-header--legal .container {
    max-width: 48rem;
}

.page-content {
    padding-block: var(--space-16);
    background-color: var(--color-surface);
}


/* ================================================================
   PAGE ÉQUIPE — page-templates/template-equipe.php
   ================================================================ */

.team-section .container {
    max-width: 90rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.team-member-layout {
    display: grid;
    grid-template-columns: 36.25rem 1fr;
    gap: var(--space-16);
    align-items: start;
    max-width: 100%;
    margin-inline-start: 0;
    padding-block: var(--space-12);
}

.team-member-layout__bio {
    display: flex;
    flex-direction: column;
    text-align: justify;
}

.team-member-layout__bio .member-linkedin {
    margin-top: var(--space-8);
}

.team-member-layout__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 48rem) {
    .team-member-layout {
        grid-template-columns: 1fr;
    }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.team-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: var(--shadow-md);
}

.team-card__photo-wrap {
    grid-area: 1 / 1;
    background: linear-gradient(135deg, var(--color-bg-nav), var(--color-primary));
}

.team-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: none;
    transition: transform 0.4s ease;
}

.team-card:hover .team-card__photo {
    transform: scale(1.04);
}

.team-card__photo-placeholder {
    width: 100%;
    height: 100%;
}

.team-card__body {
    grid-area: 1 / 1;
    align-self: end;
    z-index: 1;
    padding: 1.2rem;
    background: linear-gradient(to top, rgba(10,25,45,0.88) 0%, rgba(10,25,45,0.4) 60%, transparent 100%);
}

.team-card__role {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.25rem;
}

.team-card__name {
    display: block;
    color: #fff;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 48rem) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   EQUIPE V2 — template-equipe-v2.php
   ================================================================ */

.team-v2-section {
    background: var(--color-surface);
    position: relative;
    z-index: 2;
    padding-block: clamp(7rem, 10vw, 10rem) var(--space-24);
}

.team-v2-container {
    max-width: 90rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Grid */
.team-v2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 2rem;
    margin-top: var(--space-10);
}

/* Card */
.team-v2-card {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    position: relative;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.35s ease;
}

.team-v2-card:hover,
.team-v2-card[aria-expanded="true"] {
    transform: scale(1.035);
    z-index: 2;
}

.team-v2-card:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.1875rem;
}

.team-v2-card__photo-wrap {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-border);
}

.team-v2-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(1);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.team-v2-card:hover .team-v2-card__photo,
.team-v2-card[aria-expanded="true"] .team-v2-card__photo {
    transform: scale(1.03);
    filter: grayscale(0);
}

.team-v2-card__photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-nav), var(--color-primary));
}

.team-v2-card__body {
    padding: 0.8rem 0 0;
}

.team-v2-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.2rem;
    line-height: 1.3;
}

.team-v2-card__role {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.65rem;
}

.team-v2-card__accent {
    display: block;
    height: 0.125rem;
    width: 2.5rem;
    background: var(--color-primary);
    transition: width 0.35s ease;
}

.team-v2-card:hover .team-v2-card__accent,
.team-v2-card[aria-expanded="true"] .team-v2-card__accent {
    width: 100%;
}

/* Detail panel */
.team-v2-detail {
    grid-column: 1 / -1;
    background: transparent;
    border-top: 0.1875rem solid var(--color-text);
    padding: 2.5rem 2rem;
    position: relative;
    animation: teamPanelIn 0.28s ease both;
}

@keyframes teamPanelIn {
    from { opacity: 0; transform: translateY(-0.375rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.team-v2-detail__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    padding: 0.3rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.team-v2-detail__close:hover {
    color: var(--color-primary);
}

.team-v2-detail__inner {
    display: grid;
    grid-template-columns: 16.25rem 1fr;
    gap: 3rem;
    align-items: start;
}

.team-v2-detail__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.team-v2-detail__header {
    border-bottom: 0.125rem solid var(--color-text);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.team-v2-detail__name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.3rem;
}

.team-v2-detail__role {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-v2-detail__bio {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.team-v2-detail__bio p { margin-bottom: 0.9rem; }
.team-v2-detail__bio p:last-child { margin-bottom: 0; }

.team-v2-detail__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.team-v2-detail__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.team-v2-detail__linkedin[hidden] {
    display: none;
}

@media (max-width: 68.75rem) {
    .team-v2-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 48rem) {
    .team-v2-grid { grid-template-columns: repeat(2, 1fr); }

    .team-v2-detail__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .team-v2-detail__photo {
        max-width: 13.75rem;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 30rem) {
    .team-v2-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   404 — 404.php
   ================================================================ */
.hero--404 {
    flex: 1;
    min-height: 30rem;
}

.hero--404 .container {
    position: relative;
    z-index: 1;
}

.hero--404 .hero__content {
    display: flex;
    align-items: center;
    min-height: inherit;
}

.hero--404 .hero__eyebrow {
    color: rgba(255,255,255,0.75);
    font-size: clamp(4.375rem, 10vw, 8.125rem);
    letter-spacing: 0.5rem;
    margin-bottom: 0.75rem;
}

.hero--404 .hero__title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero--404 .hero__subtitle {
    max-width: 36rem;
}

.error-links-section {
    padding-block: var(--space-12) var(--space-8);
}

.error-links-grid {
    margin-top: var(--space-6);
}

.error-link-card {
    display: flex;
    flex-direction: column;
    min-height: 11.875rem;
    padding: 1.375rem;
    border: 0.0625rem solid rgba(255,255,255,0.08);
    background-image:
        linear-gradient(135deg, #0a2746 0%, #0d3459 24%, #114a79 52%, #1a6399 76%, #226fa3 100%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.error-link-card:hover {
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 1.125rem 2.25rem rgba(10, 22, 40, 0.16);
    transform: translateY(-0.125rem);
}

.error-link-card:nth-child(2) {
    background-position: 50% 50%;
}

.error-link-card:nth-child(3) {
    background-position: 100% 50%;
}

.error-link-card__label {
    display: inline-block;
    margin-bottom: var(--space-4);
    font-size: 0.625rem;
    letter-spacing: 0.1625rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
}

.error-link-card__title {
    margin-bottom: var(--space-4);
    color: var(--color-white);
}

.error-link-card__text {
    max-width: none;
    margin-bottom: var(--space-8);
    color: rgba(255,255,255,0.76);
    line-height: 1.8;
}

.error-link-card__cta {
    margin-top: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    color: var(--color-white);
}

.error-links-support {
    margin-top: var(--space-6);
    margin-bottom: 0;
    text-align: center;
    color: var(--color-text-muted);
}


/* ================================================================
   CONTACT — page-templates/template-contact.php
   ================================================================ */

/* Layout principal : photo gauche / contenu droit */
body.page-template-template-contact {
    min-height: 100vh;
}

/* Admin bar : réduire la hauteur disponible pour éviter le scroll parasite */
body.admin-bar.page-template-template-contact {
    min-height: calc(100vh - 2rem);
}

@media screen and (max-width: 48.875rem) {
    body.admin-bar.page-template-template-contact {
        min-height: calc(100vh - 2.875rem);
    }
}

@media (min-width: 56.3125rem) {
    body.page-template-template-contact {
        --contact-footer-height: 5.125rem;
        height: 100vh;
        overflow: hidden;
    }

    body.admin-bar.page-template-template-contact {
        height: calc(100vh - 2rem);
    }

    .page-template-template-contact #main-content {
        flex: 0 0 auto;
        height: calc(100% - var(--contact-footer-height));
    }

    .page-template-template-contact .contact-page {
        height: 100%;
    }

    .page-template-template-contact .contact-page__content {
        padding: clamp(7rem, 15vh, 12rem) clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vh, 2.5rem);
    }

    .page-template-template-contact .contact-page__title {
        margin-bottom: var(--space-8);
    }

    .page-template-template-contact .contact-item {
        padding-block: 1.25rem;
    }

    .page-template-template-contact .site-footer {
        flex: 0 0 var(--contact-footer-height);
    }

    .page-template-template-contact .site-footer .container,
    .page-template-template-contact .site-footer .footer-bottom {
        height: 100%;
    }

    .page-template-template-contact .site-footer .footer-bottom {
        align-items: center;
        padding-block: 0;
    }
}

.page-template-template-contact #main-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-template-template-contact .contact-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
}

.contact-page__photo,
.contact-page__content {
    overflow: hidden;
    min-height: 0;
}

.contact-page__photo {
    position: relative;
    overflow: hidden;
}

.contact-page__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 88% center;
    display: block;
}

.contact-page__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30, 63, 90, 1) 0, rgba(30, 63, 90, 1) 15%, rgba(30, 63, 90, 0) 100%);
    pointer-events: none;
}

.contact-page__content {
    background-color: var(--color-bg-nav);
    display: flex;
    flex-direction: column;
    padding: clamp(6rem, 12vh, 10rem) clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vh, 3rem);
}

.contact-page__title {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white);
    margin-top: clamp(2rem, 5vh, 4rem);
    margin-bottom: var(--space-12);
    line-height: 1.2;
}

/* Infos de contact */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-6);
    border-bottom: 0.0625rem solid rgba(255,255,255,0.08);
}

.contact-item:first-child { padding-top: 0; }
.contact-item:last-child  { border-bottom: none; }

.contact-item__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.contact-item__value {
    font-size: var(--text-base);
    color: var(--color-white);
    line-height: 1.7;
    margin: 0;
    font-style: normal;
}

.contact-linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

.contact-linkedin:hover { color: var(--color-white); }
.contact-linkedin svg   { flex-shrink: 0; }

.member-linkedin {
    color: var(--color-primary);
}
.member-linkedin:hover {
    color: var(--color-accent);
}

/* Item carte : remplit l'espace restant */
.contact-item--map {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Carte Google Maps */
.contact-map {
    flex: 1;
    min-height: 8.75rem;
    position: relative;
    margin-top: var(--space-2);
    background: rgba(255,255,255,0.08);
}

.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(25%);
}

.contact-map:not(.is-map-enabled) iframe {
    display: none;
}

.contact-map__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 0.0625rem solid rgba(255,255,255,0.16);
}

.contact-map.is-map-enabled .contact-map__placeholder {
    display: none;
}

.contact-map__placeholder p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgba(255,255,255,0.74);
}

/* Responsive */
@media (max-width: 56.25rem) {
    .page-template-template-contact .contact-page {
        grid-template-columns: 1fr;
    }

    .contact-page__photo {
        position: relative;
        height: 55vw;
        min-height: 18.75rem;
        max-height: 30rem;
    }

    .contact-page__content {
        min-height: auto;
        padding: var(--space-10) var(--container-pad);
    }

    .contact-map {
        padding-bottom: 56.25%;
    }
}

@media (min-width: 56.3125rem) {
    .contact-page__photo img {
        transform: scale(1.14) translateX(12%);
        transform-origin: center center;
    }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 64rem) {
    .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .criteria-card,
    .criteria-card:nth-child(4),
    .criteria-card:nth-child(5) { grid-column: auto; }
    .criteria-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 0.6875rem);
        width: 100%;
        justify-self: center;
    }
    .about-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero--404 { min-height: 27.5rem; }
    .news-carousel__slide { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 48rem) {
    body.has-open-nav { overflow: hidden; }

    .site-header__inner,
    .site-footer .container {
        padding-inline: var(--container-pad);
    }

    .nav-primary {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-nav);
        border-top: 0.0625rem solid rgba(255,255,255,0.08);
        padding: 1.25rem var(--container-pad) 1.75rem;
        box-shadow: 0 1rem 2rem rgba(10, 22, 40, 0.18);
        max-height: calc(100vh - 5.25rem);
        overflow-y: auto;
    }
    .nav-primary.is-open  { display: block; }
    .nav-primary__list    { flex-direction: column; align-items: flex-start; gap: 1.125rem; }
    .nav-primary__list a  { width: 100%; min-height: 3.125rem; font-size: 1.125rem; }
    .nav-toggle           { display: flex; }

    .cookie-banner {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
    }

    .cookie-banner__actions {
        justify-content: stretch;
    }

    .cookie-btn {
        flex: 1 1 8rem;
    }

    .hero--news {
        height: auto;
        min-height: 36rem;
    }

    .hero__content--news {
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
        padding-top: 12rem;
        padding-bottom: 5rem;
    }

    .news-featured {
        grid-template-columns: 1fr;
    }

    .news-featured__media img,
    .news-featured__fallback {
        min-height: 16rem;
    }

    .pillars-grid  { grid-template-columns: 1fr; }
    .card-grid,
    .card-grid--3,
    .card-grid--2,
    .archive-grid  { grid-template-columns: 1fr; }
    .criteria-grid { grid-template-columns: 1fr; }
    .criteria-card:last-child {
        grid-column: auto;
        max-width: none;
    }
    .news-header     { flex-direction: column; align-items: flex-start; }
    .news-header__actions { width: 100%; justify-content: space-between; }
    .news-carousel__slide { flex-basis: 100%; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .footer-bottom   { flex-direction: column; align-items: flex-start; }
    .stats-bar__item { padding: 0 1.25rem; }
    .stats-bar__sep  { display: none; }

    .post-hero__title { max-width: none; }
    .post-footer__inner { align-items: flex-start; }
    .post-nav__inner { grid-template-columns: 1fr; }
    .post-nav__item--next { align-items: flex-start; text-align: left; }

    .hero__actions { flex-direction: column; align-items: flex-start; }
    .hero--404 { min-height: 25rem; }
    .hero--404 .hero__eyebrow { font-size: clamp(3.75rem, 18vw, 6.25rem); }
    .hero--404 .hero__title { white-space: normal; }
}

@media (max-width: 35rem) {
    .footer-legal {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* ── Accordion ──────────────────────────────────────────────────────── */
.accordion {
    border-bottom: 0.0625rem solid var(--color-border);
}

.accordion:first-child {
    border-top: 0.0625rem solid var(--color-border);
}

.accordion__title {
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    font-family: var(--font-serif);
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion__title::-webkit-details-marker {
    display: none;
}

.accordion__title::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.accordion[open] .accordion__title::after {
    transform: rotate(45deg);
}

.accordion__content {
    padding-bottom: var(--space-5);
    color: var(--color-text);
    line-height: 1.7;
}

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

/* ================================================================
   HOME SKINS — variantes de fond pour les pages Home 2 / 3 / 4 / 5
   ----------------------------------------------------------------
   Chaque page enveloppe son contenu dans
   .home-skin--{light|dark|blue|ocean}. Les couleurs de texte/liens sont
   pilotées par les variables CSS. Les cartes News deviennent
   TRANSPARENTES (couleur de la peau, plus de beige ni de blanc) et
   héritent de la couleur de texte de la peau. Couleurs issues du
   système existant (--color-*).
   NB : assets/css/main.css force .section / .news-carousel / .card-news
   en --color-surface !important → d'où les !important ci-dessous.
   ================================================================ */

/* — FOND BLANC (Home 2) — */
.home-skin--light { background-color: var(--color-white); }
.home-skin--light .section { background-color: var(--color-white) !important; }

/* — NAVY PROFOND (Home 3) — texte blanc — */
.home-skin--dark {
    background-color: var(--color-bg-nav);
    --color-text:       #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.82);
    --color-primary:    var(--color-primary-light);
}
.home-skin--dark .section { background-color: var(--color-bg-nav) !important; }
.home-skin--dark #about h2 { color: #ffffff !important; }
.home-skin--dark .btn--outline:hover { color: var(--color-bg-nav); }
/* Le divider est transparent : dans ses marges, le fond cream du body
   transparaissait (bande claire). On lui donne le fond navy et on convertit
   ses marges verticales en padding pour combler le trou. */
.home-skin--dark .section-divider {
    background-color: var(--color-bg-nav);
    margin-block: 0;
    padding-block: 0.5rem 1.25rem;
}
/* Page News : neutralise les fonds beige des conteneurs (qui ne sont pas des
   .section) pour laisser ressortir le navy. Les cartes News sont déjà en navy. */
.home-skin--dark .news-page,
.home-skin--dark .news-archive,
.home-skin--dark .news-archive .container,
.home-skin--dark .archive-grid { background-color: transparent !important; }
/* Page Team : l'encadré de bio (.prose) a un fond beige forcé par main.css ;
   on le rend transparent pour que le texte blanc reste lisible sur le navy. */
.home-skin--dark .prose,
.home-skin--dark .team-v2-detail__bio { background-color: transparent !important; }
/* Pages légales — fond blanc. assets/css/main.css force .page-header,
   .page-content et .prose en beige avec !important : on les repasse en blanc
   au même poids. Les titres et les filets gardent leurs couleurs par défaut,
   déjà calculées pour un fond clair. */
.home-skin--light .page-header,
.home-skin--light .page-content,
.home-skin--light .prose { background-color: var(--color-white) !important; }

/* — BRUME BLEUTÉE CLAIRE (Home 4) — texte foncé conservé — */
.home-skin--blue {
    background: linear-gradient(180deg, #d7e5f2 0%, #c0d5e9 100%);
}
.home-skin--blue .section { background-color: transparent !important; }

/* — OCÉAN / TEAL PROFOND (Home 5) — texte blanc — */
.home-skin--ocean {
    background: linear-gradient(165deg, #0a3d49 0%, #0e4d5c 50%, #12606f 100%);
    --color-text:       #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.88);
    --color-primary:    #ffffff;
}
.home-skin--ocean .section { background-color: transparent !important; }
.home-skin--ocean #about h2 { color: #ffffff !important; }
.home-skin--ocean .section-divider__bar { background: var(--color-accent); }
.home-skin--ocean .btn--outline:hover { color: #0e4d5c; }

/* — GRIS NEUTRE (Home 6) — plus foncé et désaturé (sans dérive bleue),
     texte foncé conservé — */
.home-skin--grey {
    background: linear-gradient(180deg, #c0c0c0 0%, #9c9c9d 100%);
}
.home-skin--grey .section { background-color: transparent !important; }

/* — Panneau du carrousel transparent (laisse voir le fond de la peau) — */
.home-skin--light .news-carousel,
.home-skin--dark .news-carousel,
.home-skin--blue .news-carousel,
.home-skin--ocean .news-carousel,
.home-skin--grey .news-carousel { background-color: transparent !important; }

/* — Cartes News : fond TRANSPARENT (couleur de la peau), sans bordure ni
     ombre. Le texte hérite de la couleur de la peau. — */
.home-skin--light .card-news,
.home-skin--dark .card-news,
.home-skin--blue .card-news,
.home-skin--ocean .card-news,
.home-skin--grey .card-news {
    background-color: transparent !important;
    border-color: transparent;
    box-shadow: none;
}

/* — Flèches du carrousel : restent bleues sur leur pastille claire — */
.home-skin--light .carousel-button,
.home-skin--dark .carousel-button,
.home-skin--blue .carousel-button,
.home-skin--ocean .carousel-button,
.home-skin--grey .carousel-button {
    --color-primary: #007abf;
}