/*
 * main.css
 * Design system du site public 4C.
 * Charge après variables.css.
 */

/* ---------------------------------------------------------------
   Reset minimal
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.15;
    margin: 0 0 0.6em;
    font-weight: 600;
}
p { margin: 0 0 1em; color: var(--color-text-muted); max-width: 65ch; }
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Liseré tricolore — device structurel récurrent (sceau/ruban officiel) */
.ribbon {
    height: var(--ribbon-height);
    background: linear-gradient(
        90deg,
        var(--color-primary) 0 33%,
        var(--color-secondary) 33% 66%,
        var(--color-accent) 66% 100%
    );
}

/* ---------------------------------------------------------------
   Boutons
--------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.7rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-secondary); color: #fff; }
.btn-primary:hover { background: var(--color-secondary-dark); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* ---------------------------------------------------------------
   Navbar
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Barre de navigation — aplat vert du mouvement
   (le vert du palmier du logo, assombri pour le contraste :
   voir la note dans variables.css)
--------------------------------------------------------------- */
.site-header {
    background: var(--color-green-dark);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 6px 18px -12px rgba(0, 0, 0, 0.45);
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
}
/* Le logo est un emblème circulaire sur fond blanc : sans le rogner en
   rond, il apparaîtrait comme un carré blanc posé sur le vert. */
.brand img {
    height: 42px;
    width: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nav-links {
    display: flex;
    align-items: center;
    /* 1,5rem au lieu de 1,9 : avec quatre entrées au lieu de neuf, la
       barre respire de toute façon, et 4 × 6 px repris valent mieux
       en marge de sécurité qu'en air perdu. */
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    font-size: 0.96rem;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: #fff;
    border-bottom-color: var(--color-accent);
}
.nav-links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/*
 * Bouton d'appel à l'action dans la barre verte.
 *
 * Il ne peut PAS rester rouge : #CE1126 sur #176128 donne un contraste
 * de 1,34:1 — le bouton se fondrait dans le fond, et serait tout
 * simplement invisible pour une partie des daltoniens (le rouge sur
 * vert est la confusion la plus répandue). L'or du logo, avec du texte
 * sombre, résout les deux problèmes d'un coup.
 */
.site-header .btn-primary {
    background: var(--color-accent);
    color: var(--color-text);
    border-color: var(--color-accent);
    font-weight: 700;
}
.site-header .btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.nav-cta { display: flex; align-items: center; gap: 1rem; }

/* ---------------------------------------------------------------
   Menus déroulants de la barre de navigation

   Le raisonnement chiffré qui a conduit à regrouper neuf entrées en
   quatre est écrit dans includes/navbar.php.

   Le panneau est masqué par `display: none` et non par une opacité
   ou une translation : un panneau invisible mais présent dans le
   flux reste accessible au clavier et lu par les lecteurs d'écran —
   l'utilisateur tabule alors dans un menu qu'il ne voit pas.
--------------------------------------------------------------- */
.nav-groupe { position: relative; }

.nav-groupe-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
/*
 * Le repère doit tenir tant que le panneau est ouvert. Sans
 * `[aria-expanded="true"]`, il disparaît dès que le pointeur quitte le
 * bouton pour descendre dans le panneau : on se retrouve avec un menu
 * ouvert dont plus rien n'indique de quelle entrée il vient.
 */
.nav-groupe-bouton:hover,
.nav-groupe-bouton[aria-expanded="true"],
.nav-groupe.est-actif > .nav-groupe-bouton {
    color: #fff;
    border-bottom-color: var(--color-accent);
}
.nav-groupe-bouton:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.nav-chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.18s ease;
}
.nav-groupe-bouton[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Intitulé de groupe : utile seulement dans le tiroir mobile. */
.nav-groupe-titre { display: none; }

.nav-panneau {
    display: none;
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -0.9rem;
    z-index: 60;
    min-width: 270px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 38px rgba(0, 12, 40, 0.22);
}
.nav-groupe-bouton[aria-expanded="true"] + .nav-groupe-titre + .nav-panneau { display: block; }

/* Zone tampon invisible entre le bouton et le panneau : sans elle, le
   pointeur qui descend traverse un vide et rien ne se passe si l'on
   ajoute un jour une ouverture au survol. */
.nav-panneau::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.9rem;
    height: 0.9rem;
}

.nav-panneau a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    border-bottom: 0;
    color: var(--color-text);
    text-decoration: none;
}
.nav-panneau a:hover,
.nav-panneau a:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
    border-bottom: 0;
}
.nav-panneau a[aria-current="page"] {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-bottom: 0;
}
.nav-panneau-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}
/* La ligne d'aide n'est pas décorative : « Manifeste » et « Vision &
   valeurs » ne se distinguent pas d'eux-mêmes pour un visiteur qui
   arrive sur le site. */
.nav-panneau-aide {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    flex-direction: column;
    gap: 5px;
}
.hamburger span {
    display: block;
    width: 26px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 860px) {
    .hamburger { display: inline-flex; }
    .nav-links {
        position: fixed;
        inset: 0 0 0 30%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--color-green-dark);
        padding: 5.5rem 1.8rem 2rem;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        box-shadow: -8px 0 24px rgba(0,0,0,0.08);
    }
    .nav-links.is-open { transform: translateX(0); }
    .nav-links > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
    .nav-links a { display: block; width: 100%; padding: 0.9rem 0; }
    .nav-cta .btn-outline { display: none; }

    /*
     * DANS LE TIROIR, PAS DE DÉROULANT. Le bouton disparaît, le
     * panneau s'ouvre à plat sous son intitulé. Replier des sous-menus
     * dans un panneau vertical obligerait à deux gestes pour atteindre
     * un lien, sans rien économiser : la place verticale ne manque pas.
     */
    .nav-groupe-bouton { display: none; }

    .nav-groupe-titre {
        display: block;
        padding: 1.1rem 0 0.35rem;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-accent);
    }

    .nav-panneau {
        display: block;
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .nav-panneau::before { display: none; }
    .nav-panneau li { width: 100%; }
    .nav-panneau a {
        padding: 0.7rem 0 0.7rem 0.9rem;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.88);
    }
    .nav-panneau a:hover,
    .nav-panneau a:focus-visible,
    .nav-panneau a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }
    .nav-panneau-aide { display: none; }   /* le tiroir doit rester court */
}

/* ---------------------------------------------------------------
   Hero — aplat de couleur institutionnel (plus de fond blanc/pâle)
--------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--spacing-section) + 1.5rem) 0 var(--spacing-section);
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 209, 0, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.06) 0%, transparent 55%),
        linear-gradient(155deg, var(--color-primary-dark) 0%, var(--color-primary) 68%, var(--color-primary) 100%);
    color: #fff;
}
/* ---------------------------------------------------------------
   Filigrane : la carte de la RDC derrière l'emblème
   ---------------------------------------------------------------
   Le tracé reprend la composition de l'emblème officiel — le sceau
   posé sur la carte du pays. Il est donc centré derrière l'emblème,
   plus large que lui, et déborde du bandeau : on en perçoit la forme
   sans jamais la lire comme une illustration de premier plan.

   « soft-light » plutôt qu'une simple opacité : le mode de fusion
   MÉLANGE les couleurs du drapeau au bleu du fond au lieu de poser
   un calque translucide par-dessus. Le jaune éclaircit, le rouge
   réchauffe, le bleu ciel se fond — le dégradé se lit comme une
   variation de la matière du fond, pas comme une image collée.

   Le filigrane ne passe JAMAIS derrière le texte : il est ancré sur
   l'emblème, pas sur le bandeau. Vérifié au pixel sur les deux
   dispositions — recouvrement entre la boîte du titre et celle du
   filigrane : 0 px² en 1440 px comme en 390 px. Le contraste du
   texte blanc est donc rigoureusement inchangé, et le restera si
   l'on décide plus tard d'assombrir ou d'éclaircir le tracé.
--------------------------------------------------------------- */
.hero-emblem .filigrane-rdc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(162%, 505px);
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.28;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* L'emblème reste au premier plan, le filigrane l'entoure. */
.hero-emblem img { position: relative; z-index: 1; }

.hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: 50%;
    width: 460px;
    height: 460px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 0 46px rgba(255,255,255,0.035);
    pointer-events: none;
}
.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 1.1rem;
    letter-spacing: 0.01em;
}
.hero-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--color-accent);
    display: inline-block;
}
.hero h1 {
    font-size: var(--fs-hero);
    color: #fff;
    max-width: 15ch;
}
.hero .lede {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.82);
    max-width: 46ch;
    margin-bottom: 1.8rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-outline:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.hero-emblem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-emblem img {
    width: min(100%, 320px);
    /* L'emblème est un disque sur fond blanc : posé tel quel sur l'aplat
       bleu du hero, il formait un carré blanc. On le rogne en rond et on
       lui ajoute un liseré doré, comme un médaillon. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(255, 209, 0, 0.55),
        0 18px 34px rgba(0, 10, 40, 0.35);
}
@media (max-width: 860px) {
    .hero .container { grid-template-columns: 1fr; text-align: left; }
    .hero-emblem { order: -1; max-width: 170px; margin: 0 auto 1.2rem; }
    .hero-emblem .filigrane-rdc { width: 190%; opacity: 0.22; }
    .hero::after { display: none; }
}

/* ---------------------------------------------------------------
   Sections génériques
--------------------------------------------------------------- */
.section { padding: var(--spacing-section) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 640px; margin-bottom: 2.6rem; }
.section-head h2 { color: var(--color-primary-dark); font-size: var(--fs-h1); }

/* ---------------------------------------------------------------
   Liste éditoriale (remplace les cartes en petites cases) —
   rangées pleine largeur séparées par un filet, repère couleur
   à gauche plutôt qu'un encadré complet.
--------------------------------------------------------------- */
.feature-list { border-top: 1px solid var(--color-border); }
.feature-row {
    display: grid;
    grid-template-columns: 4px 1fr 2.2fr;
    gap: 2rem;
    align-items: start;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--color-border);
}
.feature-row .bar { align-self: stretch; background: var(--color-primary); border-radius: 2px; }
.feature-row:nth-child(3n+2) .bar { background: var(--color-secondary); }
.feature-row:nth-child(3n+3) .bar { background: var(--color-green); }
.feature-row h3 {
    font-size: var(--fs-h3);
    color: var(--color-text);
    margin: 0;
}
.feature-row p { margin: 0; }
@media (max-width: 700px) {
    .feature-row { grid-template-columns: 4px 1fr; }
    .feature-row p { grid-column: 2; }
}

/* Variante en grille pour la page Vision (plus d'entrées, même logique de repère couleur) */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}
.value-card {
    padding: 1.9rem 1.7rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.value-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
}
.value-card:nth-child(4n+2)::before { background: var(--color-secondary); }
.value-card:nth-child(4n+3)::before { background: var(--color-accent); }
.value-card:nth-child(4n+4)::before { background: var(--color-green); }
.value-card h3 {
    font-size: var(--fs-h3);
    color: var(--color-text);
    margin-bottom: 0.4rem;
}
.value-card p { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------
   Bandeau plein cadre — rompt la monotonie du fond blanc entre
   deux sections, porte un message fort.
--------------------------------------------------------------- */
.stat-band {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 3.4rem 0;
}
.stat-band .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.stat-band p {
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 46ch;
    font-size: 1.05rem;
}
.stat-band strong {
    font-family: var(--font-heading);
    color: var(--color-accent);
}

/* ---------------------------------------------------------------
   Blocs "Qui sommes-nous / Histoire / Mission" (page mouvement)
--------------------------------------------------------------- */
.content-block {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    padding: 2.6rem 0;
    border-bottom: 1px solid var(--color-border);
}
.content-block:last-child { border-bottom: none; }
.content-block h2 {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin: 0;
}
.content-block .content-body p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
    .content-block { grid-template-columns: 1fr; gap: 0.8rem; }
}

.notice-editable {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.7rem 1rem;
    background: #FFF8E1;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #6B5300;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer { background: var(--color-primary-dark); color: #EFEFF5; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding: var(--spacing-section) 0 2.5rem;
}
.footer-brand { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.site-footer p { color: #C7CBDE; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: #C7CBDE; text-decoration: none; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 1.2rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #9BA0BC;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Barre de filtre (recherche / catégorie) — actualités, activités
--------------------------------------------------------------- */
.filter-bar {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 2rem 0 2.5rem;
}
.filter-bar input[type="search"],
.filter-bar select {
    padding: 0.7rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-text);
}
.filter-bar input[type="search"] { flex: 1; min-width: 220px; }

/* ---------------------------------------------------------------
   Grille d'actualités
--------------------------------------------------------------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem;
}
.news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.news-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.news-card img,
.news-card-placeholder {
    width: 100%;
    height: 180px;
    object-fit: cover;
    /* Cadrage par le HAUT. Beaucoup d'illustrations du mouvement sont
       des scans de tracts ou de coupures de presse, en format portrait :
       un cadrage centré coupait le titre et ne montrait qu'un bloc de
       texte illisible. Par le haut, la vignette montre le titre du
       document — ce qui est exactement ce qu'on attend d'une vignette. */
    object-position: center top;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
}
.news-card-body { padding: 1.3rem 1.4rem 1.5rem; }
.news-card-cat {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}
.news-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.news-card p { font-size: 0.92rem; margin-bottom: 0.7rem; }
.news-card-date { font-size: 0.82rem; color: var(--color-text-muted); }

.pagination {
    display: flex;
    gap: 0.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
}
.pagination a.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination a:hover:not(.is-active) { border-color: var(--color-primary); }

/* ---------------------------------------------------------------
   Article
--------------------------------------------------------------- */
.article-container { max-width: 760px; }
.article h1 { font-size: var(--fs-h1); color: var(--color-primary-dark); margin-top: 0.4rem; }
.article-meta { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1.8rem; }
.article-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
}
.article-content { font-size: 1.05rem; color: var(--color-text); }
.article-content p { max-width: none; color: var(--color-text); }

/* ---------------------------------------------------------------
   PARTAGE D'UN ARTICLE

   LA COULEUR DE MARQUE EST DANS LE PICTOGRAMME, JAMAIS EN APLAT.
   Ce n'est pas un parti pris graphique, c'est une contrainte
   mesurée : du texte blanc sur le vert officiel de WhatsApp
   (#25D366) donne 1,98:1, et sur le bleu de Facebook (#1877F2)
   4,23:1 — l'un est illisible, l'autre passe sous le seuil AA de
   4,5:1. Les boutons restent donc neutres, et la teinte ne porte
   que le dessin, où le seuil applicable est 3:1 (WCAG 1.4.11).

   Le vert de WhatsApp est remplacé par #128C7E, sa déclinaison
   sombre officielle : 4,14:1 sur blanc, contre 1,98:1 pour le vert
   clair, qui serait invisible pour une partie des visiteurs.
--------------------------------------------------------------- */
.partage {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.partage-titre {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.partage-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.partage-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* 44 px de haut : la cible tactile minimale recommandée. En
       dessous, le doigt manque le bouton une fois sur cinq. */
    min-height: 44px;
    padding: 0.55rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.partage-bouton .icone { flex: 0 0 auto; }

.partage-bouton:hover {
    background: var(--color-bg-alt);
    transform: translateY(-1px);
}
.partage-bouton:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* La teinte de marque, uniquement sur le dessin et le liseré. */
.partage-whatsapp .icone { color: #128C7E; }
.partage-whatsapp:hover  { border-color: #128C7E; }
.partage-facebook .icone { color: #1877F2; }
.partage-facebook:hover  { border-color: #1877F2; }
.partage-x .icone        { color: #16202E; }
.partage-x:hover         { border-color: #16202E; }
.partage-copier .icone   { color: var(--color-primary); }
.partage-copier:hover    { border-color: var(--color-primary); }

/* État de confirmation, posé par assets/js/main.js. */
.partage-copier.est-copie {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.partage-retour {
    margin: 0.7rem 0 0;
    min-height: 1.2em;   /* réserve la place : pas de saut de page */
    font-size: 0.86rem;
    color: var(--color-primary-dark);
}
.partage-retour[data-echec] { color: var(--color-secondary); }

@media (max-width: 480px) {
    /* Quatre pastilles ne tiennent pas sur une ligne de téléphone.
       Deux par deux plutôt qu'une colonne : la zone de partage
       resterait sinon plus haute que le pied de l'article. */
    .partage-liste { display: grid; grid-template-columns: 1fr 1fr; }
    /* Le <li> doit s'étirer, sinon le bouton garde sa largeur de
       contenu et « X » flotte au milieu d'une colonne vide. */
    .partage-liste > li { display: flex; }
    .partage-bouton { flex: 1; justify-content: center; }
}

/* Visible pour un lecteur d'écran, invisible à l'écran. On ne peut
   pas utiliser display:none : cela retire aussi le texte de l'arbre
   d'accessibilité, donc de ce que le lecteur d'écran annonce. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------
   Activités
--------------------------------------------------------------- */
.activity-list { border-top: 1px solid var(--color-border); }
.activity-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.8rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--color-border);
}
.activity-row img,
.activity-row-placeholder {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
}
.activity-row h3 { margin-bottom: 0.3rem; }
.activity-meta { font-size: 0.85rem; color: var(--color-secondary); font-weight: 600; margin-bottom: 0.5rem; }
@media (max-width: 700px) {
    .activity-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Galerie — albums
--------------------------------------------------------------- */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
}
.album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.album-card img,
.album-card-placeholder {
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
}
.album-card-body { padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.album-card-body h3 { font-size: 1.02rem; margin: 0; }
.album-card-body span { font-size: 0.82rem; color: var(--color-text-muted); }

/* Photos d'un album + lightbox */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.7rem;
}
.photo-thumb {
    padding: 0; border: none; background: none; cursor: pointer;
    border-radius: var(--radius-sm); overflow: hidden;
}
.photo-thumb img { width: 100%; height: 140px; object-fit: cover; transition: transform 0.2s ease; }
.photo-thumb:hover img { transform: scale(1.04); }

.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 12, 26, 0.92);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: 88vw; max-height: 84vh; border-radius: var(--radius-sm); }
.lightbox-close, .lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    border-radius: 50%;
    width: 46px; height: 46px;
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); }

/* ---------------------------------------------------------------
   Contact
--------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 3rem;
}
.contact-infos { list-style: none; margin: 0; padding: 0; }
.contact-infos li { margin-bottom: 1.3rem; color: var(--color-text-muted); }
.contact-infos strong { display: block; color: var(--color-text); margin-bottom: 0.2rem; }
.contact-infos a { color: var(--color-primary); text-decoration: none; }

.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; }
.form-row { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.form-row input, .form-row textarea {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.97rem;
    resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-size: 0.92rem; }
.alert-success { background: #EAF6EC; color: #1E7A34; border: 1px solid #BFE3C4; }
.alert-error { background: #FCEAEA; color: #A50D1F; border: 1px solid #F3C2C2; }

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

/* ---------------------------------------------------------------
   Formulaire d'adhésion
--------------------------------------------------------------- */
.adhesion-container { max-width: 880px; }

.adhesion-form fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.8rem 0.4rem;
    margin: 0 0 1.8rem;
}
.adhesion-form legend {
    padding: 0 0.6rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.05rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
}
.form-row-wide { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .form-grid { grid-template-columns: 1fr; }
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}
.consent-row input { margin-top: 0.2rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Panneau de confirmation d'adhésion
--------------------------------------------------------------- */
.confirmation-panel {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-green);
    border-radius: var(--radius-md);
}
.confirmation-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EAF6EC;
    color: var(--color-green);
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}
.confirmation-panel h2 { font-size: 1.4rem; color: var(--color-primary-dark); }
.confirmation-number {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    margin: 1rem 0;
}
.confirmation-number strong { color: var(--color-secondary); }


/* ---------------------------------------------------------------
   Page de vérification publique (/verifier/{token})
--------------------------------------------------------------- */
.verif-section { padding-top: 3.5rem; }
.verif-container {
    max-width: 480px;
    text-align: center;
}
.verif-logo { width: 64px; height: 64px; margin: 0 auto 1rem; }
.verif-container h1 { font-size: 1.4rem; color: var(--color-primary-dark); margin-bottom: 2rem; }

.verif-result {
    padding: 2.2rem 1.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-border);
}
.verif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.verif-result h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }

.verif-valid { border-top-color: var(--color-green); background: #F3FAF4; }
.verif-valid .verif-icon { background: #E1F3E4; color: var(--color-green); }

.verif-invalid { border-top-color: var(--color-secondary); background: #FDF4F4; }
.verif-invalid .verif-icon { background: #FBE3E4; color: var(--color-secondary); }

.verif-warning { border-top-color: var(--color-accent); background: #FFFBEB; }
.verif-warning .verif-icon { background: #FEF3C7; color: #92730B; }

.verif-details {
    margin: 1.2rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    text-align: left;
    font-size: 0.95rem;
}
.verif-details dt { color: var(--color-text-muted); font-weight: 600; }
.verif-details dd { margin: 0; color: var(--color-text); }

.verif-footnote { margin-top: 1.2rem; font-size: 0.85rem; color: var(--color-text-muted); }


/* ---------------------------------------------------------------
   Filigrane du logo sur les pages intérieures
   ---------------------------------------------------------------
   L'emblème du mouvement en très grand, très pâle, derrière le
   contenu — le même geste que sur la fiche PDF officielle, pour que
   le site et le document imprimé se répondent.

   Choix techniques, et leurs raisons :

   - L'URL vient d'une variable CSS posée par header.php
     (--brand-logo), elle-même alimentée par logo_url(). Le nom du
     fichier n'est donc écrit en dur nulle part, ici non plus : changer
     le logo depuis l'administration changera aussi le filigrane.

   - position: fixed, et non absolute : l'emblème reste immobile
     pendant le défilement. En absolute il défilerait avec la page et
     se lirait comme une image de contenu mal placée.

   - opacity 0,04 + grayscale : à peine perceptible. Un filigrane
     coloré à 10 % rendrait les paragraphes pénibles à lire, ce qui est
     exactement l'inverse du but recherché.

   - PAS sur l'accueil : le hero y est un aplat bleu foncé, le
     filigrane y serait invisible ou sale.
--------------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(72vw, 620px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    transform: translate(-50%, -50%);
    background-image: var(--brand-logo, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.032;
    filter: grayscale(1);
    pointer-events: none;
    z-index: 0;
    display: none;
}

body:not(.page-accueil)::before { display: block; }

/* Le contenu passe devant le filigrane. Les sections sans fond propre
   le laissent transparaître ; .section-alt, qui a le sien, le masque —
   ce qui crée une alternance plutôt agréable en descendant la page.

   .site-header est VOLONTAIREMENT absent de cette liste : il porte déjà
   z-index: 50, et le tiroir de navigation mobile en dépend. Le ramener
   à 1 le ferait passer derrière <main>, et le contenu de la page
   s'afficherait par-dessus le menu ouvert. */
main,
.site-footer { position: relative; z-index: 1; }

@media print {
    body::before { display: none !important; }
}

/* ---------------------------------------------------------------
   Le mot du coordonnateur (page d'accueil)
--------------------------------------------------------------- */
.coordinator-grid {
    display: grid;
    /*
     * 380 px et non 300 : le portrait est le seul visage du mouvement
     * sur la page d'accueil, et à 300 px il se lisait comme une
     * vignette d'illustration plutôt que comme une prise de parole.
     * La colonne de texte garde minmax(0, 1fr) — elle absorbe la
     * différence sans jamais déborder.
     */
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: center;
}

.coordinator-portrait {
    margin: 0;
    position: relative;
}
.coordinator-portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;   /* on ne rogne jamais le haut du visage */
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}
/*
 * Filet doré en pied de portrait — le troisième ton du logo, utilisé
 * une seule fois dans la section. Une bordure complète enfermerait le
 * portrait comme un cadre de photo d'identité ; un filet l'ancre.
 */
.coordinator-portrait::after {
    content: "";
    position: absolute;
    left: 0;
    right: 30%;
    bottom: -10px;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-green));
}

.coordinator-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-green-dark);
    margin-bottom: 0.9rem;
}

.coordinator-quote {
    margin: 0 0 1.6rem;
    padding: 0 0 0 1.4rem;
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.9vw, 1.42rem);
    line-height: 1.5;
    color: var(--color-primary-dark);
    text-wrap: pretty;
}

.coordinator-name {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.16rem;
    color: var(--color-text);
}
.coordinator-role {
    margin: 0.15rem 0 0;
    font-size: 0.94rem;
    color: var(--color-text-muted);
}

/* Visible uniquement en développement — voir pages/home.php */
.coordinator-todo {
    margin: 1.4rem 0 0;
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius-sm);
    background: #FBF0DC;
    border: 1px solid #E8D3A4;
    color: #7A5200;
    font-size: 0.84rem;
}
.coordinator-todo code { font-family: Consolas, monospace; font-size: 0.95em; }

@media (max-width: 760px) {
    .coordinator-grid { grid-template-columns: 1fr; }
    /*
     * Sur téléphone, le portrait passait à 260 px de large sur un
     * écran de 390 : deux tiers de la largeur perdus en marge, pour
     * une photo déjà petite. On lui laisse la pleine largeur du
     * contenu, plafonnée à 420 px pour qu'elle ne s'étire pas sur une
     * tablette en portrait.
     */
    .coordinator-portrait { max-width: min(100%, 420px); }
    .coordinator-portrait::after { right: 45%; }
}

/* ---------------------------------------------------------------
   Notre mission
--------------------------------------------------------------- */
.mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 3.4rem);
    align-items: start;
}
.mission-head { margin-bottom: 0; }
.mission-body { max-width: 62ch; }
.mission-texte {
    margin: 0 0 1.2rem;
    font-size: 1.04rem;
}
.mission-invitation {
    margin: 0 0 1.4rem;
    padding-left: 1.2rem;
    border-left: 3px solid var(--color-green);
    color: var(--color-text);
}
.mission-devise {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
}

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

/* ---------------------------------------------------------------
   Un seul Congo — les chiffres du pays
--------------------------------------------------------------- */
.figures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.figure {
    background: var(--color-surface);
    padding: 1.6rem 1.4rem;
}
.figure dt {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.figure dd {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Une nation, quatre langues
--------------------------------------------------------------- */
.unite-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: center;
}
.unite-body h2 {
    color: var(--color-primary-dark);
    font-size: var(--fs-h2);
    margin: 0 0 0.9rem;
}
.unite-body p {
    margin: 0 0 1.6rem;
    max-width: 46ch;
}
.unite-visuel { margin: 0; }
.unite-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

@media (max-width: 820px) {
    .unite-grid { grid-template-columns: 1fr; }
    /* L'illustration passe AVANT le texte sur mobile : c'est elle qui
       porte le message, le texte ne fait que l'expliciter. */
    .unite-visuel { order: -1; }
}

/* ---------------------------------------------------------------
   Devise colorée — hero et pied de page
   Les couleurs viennent de variables.css, qui documente pourquoi
   elles changent selon le fond.
--------------------------------------------------------------- */
.hero-devise {
    /* Les deux moitiés de la devise ne peuvent plus se couper en leur
       milieu (espaces insécables posés par devise_coloree). balance
       répartit alors les lignes au mieux au lieu de laisser une ligne
       orpheline d'un seul mot. */
    text-wrap: balance;
}
.hero-devise .devise-congo,
.hero-devise .devise-congolais { font-weight: 700; }

/* Le signe « = » porte le sens de la devise : les deux mots sont une
   seule et même chose. On lui donne donc un peu d'air, au lieu de le
   laisser se noyer entre deux mots plus longs. */
.hero-devise .devise-egal {
    padding-inline: 0.12em;
    font-weight: 700;
}

.footer-devise {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   Pages légales — mentions légales, politique de confidentialité

   Un texte juridique se lit mal en pleine largeur : au-delà d'une
   soixantaine de caractères par ligne, l'œil perd le début de la
   ligne suivante. La colonne est donc étroite, l'interligne plus
   généreux que sur le reste du site, et la hiérarchie des titres
   franche — c'est ce qui permet de retrouver un point précis sans
   tout relire.
--------------------------------------------------------------- */
.container-narrow {
    max-width: 760px;
}

.legal-page {
    background: var(--color-surface);
}
.legal-page .section-head {
    margin-bottom: 2rem;
}
.legal-page h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-primary-dark);
    margin: 2.6rem 0 0.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}
.legal-page h3:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1.6rem;
}
.legal-page h4 {
    font-size: 1.02rem;
    color: var(--color-green-dark);
    margin: 1.6rem 0 0.5rem;
}
.legal-page p {
    line-height: 1.75;
    margin-bottom: 1rem;
    color: var(--color-text);
}
.legal-list {
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}
.legal-list li {
    line-height: 1.7;
    margin-bottom: 0.55rem;
}

/* Encadré « l'essentiel » : la plupart des lecteurs ne liront que
   celui-là. Il doit donc suffire à lui seul, et se voir. */
.legal-highlight {
    background: var(--color-primary-light);
    border-left: 4px solid var(--color-green-dark);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
}
.legal-highlight p {
    margin: 0;
}

.legal-contact {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* Liens légaux du pied de page : présents partout, sans attirer
   l'œil plus que nécessaire. */
.footer-legal {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
}
.footer-legal a {
    color: #C7CBDE;
    text-decoration: none;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   Texte repliable — « Lire la suite »

   Les classes « est-repliable » et « est-replie » sont posées par
   assets/js/main.js, jamais par le serveur : sans JavaScript, le
   texte s'affiche entier et aucune de ces règles ne s'applique.
--------------------------------------------------------------- */
.est-repliable {
    /* --repliable-fond : couleur du dégradé de bas de bloc. Elle doit
       correspondre au fond de la section, sinon le fondu se voit comme
       une bande. Chaque contexte la redéfinit. */
    --repliable-fond: var(--color-bg);
    transition: max-height 0.35s ease;
}

.est-replie {
    max-height: var(--repliable-hauteur, 260px);
    overflow: hidden;
    position: relative;
}

/*
 * Dégradé de bas de bloc : il dit « le texte continue ». Sans lui, une
 * coupure nette ressemble à une fin de paragraphe, et le lecteur ne
 * comprend pas à quoi sert le bouton.
 */
.est-replie::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--repliable-fond) 85%);
}

.repliable-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 1.6rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--color-green-dark);
    border-radius: 999px;
    background: transparent;
    /* #176128 sur fond clair : 6,44:1 */
    color: var(--color-green-dark);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.repliable-bouton::after {
    content: "▾";
    font-size: 0.8em;
    transition: transform 0.2s;
}
.repliable-bouton[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.repliable-bouton:hover,
.repliable-bouton:focus-visible {
    background: var(--color-green-dark);
    color: #fff;
}

/* Le mot du coordonnateur repose sur le fond général de la page. */
.coordinator .est-repliable { --repliable-fond: var(--color-bg); }

/* Le bouton s'aligne sur le retrait de la citation, dont la barre
   dorée marque le bord gauche. */
.coordinator .repliable-bouton { margin-left: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
    .est-repliable,
    .repliable-bouton,
    .repliable-bouton::after { transition: none; }
}

/* ---------------------------------------------------------------
   MANIFESTE OFFICIEL

   Une charte ne se lit pas comme une page de présentation. Trois
   partis pris de mise en page :

   1. Colonne étroite (62 caractères) et interligne large. Ce texte
      se lit en entier, d'une traite : au-delà d'une soixantaine de
      caractères par ligne, l'œil perd le début de la ligne suivante.
   2. Numérotation des articles apparente. C'est un document qu'on
      cite — « article 4 du manifeste » doit se retrouver d'un coup
      d'œil.
   3. Typographie de titre en serif, comme les documents officiels
      du mouvement, et non la police de l'interface.
--------------------------------------------------------------- */
.manifeste-hero {
    background: linear-gradient(160deg, var(--color-primary-dark), #0B1533);
    color: #fff;
    padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.4rem, 6vw, 4rem);
    text-align: center;
}
.manifeste-surtitre {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.manifeste-titre {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4.4vw, 3rem);
    line-height: 1.25;
    text-wrap: balance;
}
.manifeste-sous-titre {
    margin: 1.1rem 0 0;
    font-size: 0.95rem;
    color: #C7CBDE;
}

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

/*
 * Deux réglages globaux sont neutralisés ici, et c'est délibéré.
 *
 * max-width: 65ch — la règle générale limite la longueur de ligne des
 * paragraphes, ce qui est juste sur une page où le texte cohabite avec
 * des images. Ici, c'est la COLONNE ELLE-MÊME (760 px) qui donne déjà
 * la bonne mesure : cumuler les deux ramenait le texte à 451 px de
 * large, soit une colonne famélique perdue au milieu d'un grand vide.
 *
 * color — les paragraphes du site sont en gris atténué (#55566B,
 * 7,00:1). Convenable pour un texte d'accompagnement, insuffisant pour
 * un document qu'on lit d'un bout à l'autre : le manifeste passe au
 * texte plein (#14141F, 17,29:1).
 */
.manifeste p {
    line-height: 1.8;
    margin: 0 0 1.1rem;
    max-width: none;
    color: var(--color-text);
}
.manifeste li { color: var(--color-text); }

/* --- Préambule : le seul passage en vers du document --- */
.manifeste-preambule {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.manifeste-preambule h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-green-dark);
    margin: 0 0 1.4rem;
}
.manifeste-vers {
    margin: 0 0 0.3rem;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    color: var(--color-primary-dark);
}
.manifeste-decision {
    margin-top: 1.6rem;
    font-size: 1.1rem;
}

/* --- Articles --- */
.manifeste-article { margin-bottom: 3.2rem; }
.manifeste-numero {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
}
.manifeste-article h2 {
    margin: 0 0 1.2rem;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    color: var(--color-primary-dark);
}

.manifeste-liste {
    margin: 0 0 1.2rem;
    padding-left: 1.3rem;
}
.manifeste-liste li { line-height: 1.8; margin-bottom: 0.6rem; }

/* --- Article 3 : les deux équations --- */
.manifeste-equation {
    margin: 0 0 1.6rem;
    padding: 1.3rem 1.5rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-green-dark);
}
.manifeste-equation-titre {
    margin: 0 0 0.7rem !important;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 700;
}
.manifeste-equation p:last-child { margin-bottom: 0; }

/* --- Article 4 : les quatre C --- */
.quatre-c {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.1rem;
}
.quatre-c-carte {
    position: relative;
    padding: 1.5rem 1.3rem 1.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.quatre-c-code {
    position: absolute;
    top: -0.75rem;
    left: 1.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--color-green-dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.quatre-c-carte h3 {
    margin: 0.2rem 0 0.6rem;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--color-primary-dark);
}
.quatre-c-carte p { margin: 0; font-size: 0.95rem; line-height: 1.7; }

/* --- Article 5 : les valeurs --- */
.valeurs-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: valeur;
}
.valeurs-liste li {
    counter-increment: valeur;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.7;
}
.valeurs-liste li::before {
    content: counter(valeur);
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    /* #14141F sur #FFD100 : 13,8:1 */
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 700;
}
.valeurs-liste strong { color: var(--color-primary-dark); }
.valeurs-liste span { color: var(--color-text-muted); }

/* --- Article 6 : le serment --- */
.manifeste-serment {
    padding: 1.6rem 1.8rem;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
}
.manifeste-serment-intro {
    margin: 0 0 0.9rem !important;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--color-primary-dark);
}
.manifeste-serment ul { margin: 0; padding-left: 1.2rem; }
.manifeste-serment li { line-height: 1.8; margin-bottom: 0.45rem; }

/* --- Article 7 : l'appel --- */
.manifeste-appel {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.6 !important;
    color: var(--color-primary-dark);
    padding-left: 1.3rem;
    border-left: 3px solid var(--color-accent);
}
.manifeste-cloture {
    font-size: 1.05rem;
    font-style: italic;
}

/* --- Signature --- */
.manifeste-signature {
    margin-top: 3.4rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-green-dark);
    text-align: center;
}
.manifeste-fait { margin: 0 0 0.3rem !important; font-style: italic; color: var(--color-text-muted); }
.manifeste-pour { margin: 0 0 1.2rem !important; font-weight: 600; }
.manifeste-devise-pied {
    margin: 0 0 0.8rem !important;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 700;
}
.manifeste-cri {
    margin: 0 !important;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 700;
    color: var(--color-secondary);
    text-wrap: balance;
}

/* Le manifeste doit s'imprimer proprement : c'est un document qu'un
   responsable de section affichera dans un local. */
@media print {
    .manifeste-hero { background: none; color: #000; padding: 0 0 1.5rem; }
    .manifeste-surtitre, .manifeste-sous-titre { color: #444; }
    .stat-band, .site-header, .site-footer, .ribbon { display: none !important; }
    .manifeste-article { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------
   Renvoi au manifeste (page d'accueil)
--------------------------------------------------------------- */
.manifeste-renvoi { background: var(--color-bg-alt); }
.manifeste-renvoi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.2rem);
    align-items: center;
}
.manifeste-renvoi-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-green-dark);
    margin-bottom: 0.7rem;
}
.manifeste-renvoi h2 {
    margin: 0 0 1rem;
    font-size: var(--fs-h2);
    color: var(--color-primary-dark);
}
.manifeste-renvoi-extrait {
    font-family: var(--font-heading);
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    line-height: 1.65;
    color: var(--color-primary-dark);
    padding-left: 1.2rem;
    border-left: 3px solid var(--color-accent);
    margin-bottom: 1rem;
}
.manifeste-renvoi-meta { font-size: 0.92rem; margin-bottom: 1.4rem; }

/* Les quatre C en colonne : un rappel visuel du nom du mouvement,
   pas une liste à lire. */
.manifeste-renvoi-c {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.manifeste-renvoi-c li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}
.manifeste-renvoi-c strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-green-dark);
    color: #fff;
    font-size: 0.82rem;
}

@media (max-width: 820px) {
    .manifeste-renvoi-grid { grid-template-columns: 1fr; }
}

/* Numéro d'ordre sur les cartes de valeurs (page Vision) */
.value-card { position: relative; }
.value-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text);   /* 13,8:1 sur l'or */
    font-size: 0.85rem;
    font-weight: 700;
}
.vision-sous-titre {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin: 0 0 0.3rem;
}
.vision-intro { margin-bottom: 1.6rem; }
.vision-renvoi {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.94rem;
}

/* ---------------------------------------------------------------
   MÉDIATHÈQUE VIDÉO

   Le cadre garde un rapport 16/9 FIXE avant même que l'affiche ne
   soit chargée : sans aspect-ratio, la grille se réorganise à chaque
   image qui arrive, et le visiteur voit la page sauter sous ses yeux
   — le défaut de mise en page le plus pénible qui soit sur une
   connexion lente.
--------------------------------------------------------------- */
.video-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.6rem;
}

.video-carte {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.video-cadre {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-primary-dark);
    overflow: hidden;
}

.video-affiche {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Aucune affiche fournie : un aplat de marque. On ne va JAMAIS
   chercher la vignette chez YouTube — ce serait signaler la visite. */
.video-affiche-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--color-primary-dark), #0B1533);
}
.video-affiche-vide span {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: 0.1em;
}

/* Bouton de lecture : cible large, centrée, contrastée sur n'importe
   quelle affiche grâce au voile sombre. */
.video-lire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: rgba(0, 12, 40, 0.28);
    cursor: pointer;
    transition: background 0.2s;
}
.video-lire:hover,
.video-lire:focus-visible {
    background: rgba(0, 12, 40, 0.46);
}
.video-lire-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fff;
    font-size: 1.5rem;
    padding-left: 5px;   /* le triangle n'est pas optiquement centré */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
}
.video-lire:hover .video-lire-icone,
.video-lire:focus-visible .video-lire-icone { transform: scale(1.08); }

.video-duree {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    pointer-events: none;
}

/* Le lecteur remplace le contenu du cadre au clic. */
.video-lecteur {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.video-carte-corps { padding: 1.1rem 1.2rem 1.3rem; }
.video-carte-corps h3 {
    margin: 0 0 0.4rem;
    font-size: 1.08rem;
    color: var(--color-primary-dark);
}
.video-resume {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: 1.6;
    /* Trois lignes suffisent en vignette : le titre porte l'essentiel. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.video-note {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    max-width: 62ch;
}

/* ---------------------------------------------------------------
   Vidéo à la une — haut de la page d'accueil
--------------------------------------------------------------- */
.une-video {
    background: linear-gradient(165deg, var(--color-primary-dark), #0B1533);
    padding: clamp(2.2rem, 5vw, 3.6rem) 0;
    color: #fff;
}
.une-video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: center;
}
.une-video .video-cadre {
    border-radius: var(--radius-md);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.une-video-eyebrow {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.7rem;
}
.une-video h2 {
    margin: 0 0 0.8rem;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}
.une-video p {
    color: #C7CBDE;
    max-width: 52ch;
    line-height: 1.7;
}
.une-video-meta {
    font-size: 0.85rem;
    color: #9BA0BC !important;
    margin-bottom: 1.3rem;
}
.une-video .btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.une-video .btn-outline:hover,
.une-video .btn-outline:focus-visible {
    background: #fff;
    color: var(--color-primary-dark);
}

@media (max-width: 860px) {
    .une-video-grid { grid-template-columns: 1fr; }
}

/* Conteneur de lecteur sans habillage de carte — la vidéo à la une
   est déjà posée sur le fond sombre de sa section. */
.video-carte-nue { display: block; }