/* =========================================================
   Justice et Solidarité — Feuille de style principale
   Charte : violet #651a7d · magenta #f70059 · jaune #fff590 · vert #14a811
   ========================================================= */

:root {
    --violet: #651a7d;
    --violet-fonce: #4c1360;
    --violet-clair: #8f1d63;
    --magenta: #f70059;
    --rose: #eb6d78;
    --jaune: #fff590;
    --jaune-fonce: #f8da12;
    --vert: #14a811;
    --vert-clair: #80df78;

    --noir: #111111;
    --gris-tres-fonce: #2a2a2a;
    --gris-fonce: #55575a;
    --gris: #8a8c90;
    --gris-clair: #d9dbe0;
    --gris-tres-clair: #f6f7f9;
    --blanc: #ffffff;

    /* Titres : Lora (Google Fonts, proche de Georgia Pro) → fallback système Georgia Pro / Georgia */
    --police-titre: "Lora", "Georgia Pro", Georgia, "Times New Roman", serif;
    --police-sous-titre: "Barlow", "Segoe UI", sans-serif;
    /* Texte courant : Arial, universelle et instantanée (pas de webfont pour ne pas plomber le TTFB) */
    --police-texte: Arial, "Helvetica Neue", Helvetica, sans-serif;

    --largeur-max: 1240px;
    --largeur-etroite: 820px;
    --largeur-lecture: 840px;

    --rayon: 6px;
    --rayon-grand: 14px;

    --ombre-douce: 0 2px 12px rgba(17, 17, 17, .08);
    --ombre-portee: 0 8px 30px rgba(101, 26, 125, .18);

    --transition: .25s ease;

    --degrade-charte: linear-gradient(90deg, #651a7d 0%, #f70059 30%, #fff590 65%, #14a811 100%);
}

/* -------- Réinitialisation légère -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--noir);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--magenta); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--noir);
    line-height: 1.15;
    margin: 0 0 .6em;
    text-wrap: balance; /* équilibre les retours à la ligne (Chrome 114+, FF 121+, Safari 17.5+) */
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; }

/* -------- Conteneurs -------- */
.conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 24px; }
.conteneur-etroit { max-width: var(--largeur-etroite); }
.conteneur-lecture { max-width: var(--largeur-lecture); }
.texte-centre { text-align: center; }

/* -------- Entête -------- */
.entete {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--gris-clair);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.entete-contenu {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.entete-logo img {
    height: 64px;
    width: auto;
    transition: height var(--transition), filter var(--transition);
}
.entete-scrollee .entete-logo img { height: 64px; }

.menu-principal .liste-menu {
    display: flex;
    gap: 6px;
    align-items: center;
}
.lien-menu {
    position: relative;
    display: inline-block;
    padding: 10px 16px;
    font-family: var(--police-sous-titre);
    font-weight: 600;
    font-size: .95rem;
    color: var(--gris-tres-fonce);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    transition: color var(--transition), background var(--transition), text-shadow var(--transition);
}
.lien-menu:hover { color: var(--violet); background: var(--gris-tres-clair); }
.lien-actif { color: var(--violet); }
.lien-actif::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 24px;
    background: var(--magenta);
    border-radius: 3px;
    transition: background var(--transition);
}
.lien-menu-action {
    background: var(--violet);
    color: var(--blanc);
    padding: 10px 22px;
    margin-left: 8px;
    border-radius: 999px;
}
.lien-menu-action:hover { background: var(--magenta); color: var(--blanc); }
.lien-menu-action.lien-actif::after { display: none; }

/* Menu mobile */
.bouton-menu {
    display: none;
    width: 46px;
    height: 46px;
    background: transparent;
    border: none;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.barre-menu {
    display: block;
    height: 2px;
    background: var(--noir);
    border-radius: 2px;
    transform-origin: center;
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
/* Menu ouvert : le hamburger se transforme en croix.
   Bouton 46px, padding 12px → zone interne 22px, 3 barres de 2px espacées de 8px.
   Centre de la barre 2 (au repos) à 23px du haut du bouton = centre géométrique.
   Barre 1 au repos à Y=13 → +10px pour atteindre 23. Barre 3 à Y=33 → -10px. */
.bouton-menu[aria-expanded="true"] .barre-menu:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .barre-menu:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] .barre-menu:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Entête en mode transparent (au-dessus du hero) */
.entete-transparente {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
.entete-transparente .entete-logo img {
    height: 128px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, .55));
}
.entete-transparente.entete-scrollee .entete-logo img { height: 64px; }
.entete-transparente .lien-menu {
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.entete-transparente .lien-menu:hover {
    color: var(--jaune);
    background: rgba(255, 255, 255, .1);
}
.entete-transparente .lien-actif { color: var(--jaune); }
.entete-transparente .lien-actif::after { background: var(--jaune); }
.entete-transparente .lien-menu-action {
    background: rgba(255, 255, 255, .12);
    color: var(--blanc);
    border: 1px solid rgba(255, 255, 255, .55);
    text-shadow: none;
}
.entete-transparente .lien-menu-action:hover {
    background: var(--blanc);
    color: var(--violet);
    border-color: var(--blanc);
}
.entete-transparente .bouton-menu { background: transparent; }
.entete-transparente .barre-menu { background: var(--blanc); }

/* Menu burger ouvert : l'entête redevient blanche même si elle était transparente */
.entete-transparente.entete-menu-ouvert {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom-color: var(--gris-clair);
}
.entete-transparente.entete-menu-ouvert .entete-logo img { height: 64px; filter: none; }
.entete-transparente.entete-menu-ouvert .lien-menu { color: var(--gris-tres-fonce); text-shadow: none; }
.entete-transparente.entete-menu-ouvert .lien-menu:hover { color: var(--violet); background: var(--gris-tres-clair); }
.entete-transparente.entete-menu-ouvert .lien-actif { color: var(--violet); }
.entete-transparente.entete-menu-ouvert .lien-actif::after { background: var(--magenta); }
.entete-transparente.entete-menu-ouvert .lien-menu-action { background: var(--violet); color: var(--blanc); border: none; text-shadow: none; }
.entete-transparente.entete-menu-ouvert .lien-menu-action:hover { background: var(--magenta); color: var(--blanc); }
.entete-transparente.entete-menu-ouvert .bouton-menu { background: transparent; }
.entete-transparente.entete-menu-ouvert .barre-menu { background: var(--noir); }

/* -------- Contenu principal -------- */
/* padding-top = hauteur de l'entête fixe, sauf sur les pages avec hero pleine page */
.contenu-principal { min-height: 60vh; padding-top: 92px; }
body.page-accueil .contenu-principal { padding-top: 0; }

/* -------- Hero accueil (image plein cadre, textes en surimpression) -------- */
.hero-accueil {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--noir);
    color: var(--blanc);
}
.hero-fond {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Décalage pour garder Yan (côté gauche) visible sur tous les formats */
    object-position: 25% 35%;
}
.hero-voile {
    position: absolute;
    inset: 0;
    background:
        /* 1) Voile sombre principal côté droit (sous le texte) — lisibilité */
        linear-gradient(260deg,
            rgba(20, 8, 30, .85) 0%,
            rgba(20, 8, 30, .7) 30%,
            rgba(20, 8, 30, .4) 55%,
            rgba(20, 8, 30, .1) 80%,
            transparent 95%),
        /* 2) Renfort violet foncé sur la zone de texte */
        linear-gradient(260deg,
            rgba(76, 19, 96, .5) 0%,
            rgba(76, 19, 96, 0) 55%),
        /* 3) Wash magenta en bas à droite (charte) */
        radial-gradient(ellipse 70% 70% at 100% 100%,
            rgba(247, 0, 89, .3) 0%,
            rgba(247, 0, 89, 0) 60%),
        /* 4) Wash violet en haut à gauche */
        radial-gradient(ellipse 80% 90% at 0% 0%,
            rgba(101, 26, 125, .35) 0%,
            rgba(101, 26, 125, 0) 60%),
        /* 5) Wash vert en bas à gauche (rappel du parc + charte) */
        radial-gradient(ellipse 60% 60% at 0% 100%,
            rgba(20, 168, 17, .22) 0%,
            rgba(20, 168, 17, 0) 65%),
        /* 6) Touche jaune très subtile en haut */
        radial-gradient(ellipse 50% 40% at 50% 0%,
            rgba(255, 245, 144, .1) 0%,
            rgba(255, 245, 144, 0) 70%);
    pointer-events: none;
}
.hero-contenu {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 160px 0 120px;
}
.hero-contenu .conteneur { max-width: var(--largeur-max); }
/* Bloc de texte : poussé à droite pour libérer le portrait à gauche */
.hero-texte {
    max-width: 800px;
    margin-left: auto;
}
.hero-suptitre {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-size: .9rem;
    color: var(--jaune);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    margin: 0 0 24px;
    text-wrap: balance;
}
.hero-titre {
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--blanc);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
    margin: 0 0 28px;
}
.hero-sous-titre {
    font-family: var(--police-sous-titre);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    margin: 0 0 48px;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 0;
}
/* Quand le bloc parent est centré, on centre aussi les CTA */
.texte-centre .hero-actions,
.section-appel .hero-actions {
    justify-content: center;
}

/* Boutons — variantes pour le hero */
.hero-accueil .bouton-principal { background: var(--magenta); border-color: var(--magenta); }
.hero-accueil .bouton-principal:hover { background: var(--blanc); color: var(--violet); border-color: var(--blanc); }
.hero-accueil .bouton-secondaire {
    background: rgba(255, 255, 255, .1);
    color: var(--blanc);
    border-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(4px);
}
.hero-accueil .bouton-secondaire:hover { background: var(--blanc); color: var(--violet); border-color: var(--blanc); }
.hero-accueil .bouton-lien { color: var(--blanc); }
.hero-accueil .bouton-lien:hover { color: var(--jaune); }

.hero-indicateur {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: var(--blanc);
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .7rem;
    opacity: .9;
    z-index: 3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    text-decoration: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--rayon);
    transition: opacity var(--transition), color var(--transition), transform var(--transition);
}
.hero-indicateur:hover,
.hero-indicateur:focus-visible {
    opacity: 1;
    color: var(--jaune);
    outline: none;
    transform: translateX(-50%) translateY(-2px);
}
.hero-indicateur:hover .fleche-defilement,
.hero-indicateur:focus-visible .fleche-defilement {
    border-color: var(--jaune);
}
.fleche-defilement {
    width: 22px;
    height: 22px;
    border-right: 2px solid var(--blanc);
    border-bottom: 2px solid var(--blanc);
    transform: rotate(45deg);
    animation: rebond 1.6s infinite;
    transition: border-color var(--transition);
}
@keyframes rebond {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50%      { transform: translateY(8px) rotate(45deg); }
}

/* -------- Boutons -------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--police-sous-titre);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
    cursor: pointer;
}
.bouton-principal { background: var(--violet); color: var(--blanc); }
.bouton-principal:hover { background: var(--magenta); color: var(--blanc); transform: translateY(-1px); }
.bouton-secondaire { background: transparent; color: var(--violet); border-color: var(--violet); }
.bouton-secondaire:hover { background: var(--violet); color: var(--blanc); }
.bouton-lien {
    background: transparent;
    color: var(--noir);
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    border: none;
}
.bouton-lien:hover { color: var(--magenta); }

/* -------- Sections -------- */
.section { padding: clamp(60px, 8vw, 110px) 0; }
.section-message,
.section-contribution,
.section-reseaux,
.section-rejoindre-soutiens,
.section-signataires,
.section-actualites-apercu,
.section-a-venir { background: var(--gris-tres-clair); }

/* -------- Section Nouveaux signataires (Appel des 100) -------- */
.grille-signataires {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 36px;
    margin-bottom: 36px;
}
.carte-signataire {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-grand);
    padding: 24px 24px 22px;
    position: relative;
    overflow: hidden;
}
.carte-signataire::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--degrade-charte);
    border-radius: 0 0 3px 0;
}
.carte-signataire-nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 6px;
    color: var(--noir);
    line-height: 1.2;
    text-wrap: balance;
}
.carte-signataire-fonction {
    font-family: var(--police-sous-titre);
    font-size: .92rem;
    color: var(--gris-fonce);
    margin: 0;
    line-height: 1.4;
    text-wrap: balance;
}
.section-signataires .hero-actions {
    justify-content: flex-start;
}

/* -------- Section "À venir" (pages Liste et Programme en attente) -------- */
.section-a-venir { text-align: center; }
.section-appel {
    background: var(--violet);
    color: var(--blanc);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.section-appel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--degrade-charte);
    opacity: .18;
    pointer-events: none;
}
.section-appel .titre-appel, .section-appel .texte-appel { position: relative; }
.titre-appel { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--blanc); margin-bottom: 20px; }
.texte-appel { font-family: var(--police-sous-titre); font-size: 1.2rem; margin-bottom: 30px; }
.section-appel .bouton-principal { background: var(--magenta); border-color: var(--magenta); color: var(--blanc); }
.section-appel .bouton-principal:hover { background: var(--blanc); color: var(--violet); border-color: var(--blanc); }
.section-appel .bouton-secondaire { color: var(--blanc); border-color: var(--blanc); background: transparent; }
.section-appel .bouton-secondaire:hover { background: var(--blanc); color: var(--violet); }

.section-suptitre {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-size: .8rem;
    color: var(--magenta);
    margin: 0 0 14px;
}
.titre-section {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    margin-bottom: 28px;
    max-width: 840px;
}
.texte-introduction {
    font-family: var(--police-sous-titre);
    font-size: 1.15rem;
    color: var(--gris-fonce);
    max-width: 780px;
    line-height: 1.6;
}
.texte-centre .texte-introduction { margin-inline: auto; }
.entete-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}
.entete-section .titre-section { margin-bottom: 0; }
.lien-tout-voir {
    font-family: var(--police-sous-titre);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .9rem;
    color: var(--violet);
    border-bottom: 2px solid transparent;
}
.lien-tout-voir:hover { border-bottom-color: var(--magenta); color: var(--magenta); }

/* -------- Entête de page (autre que accueil) -------- */
/* Fond légèrement dégradé avec un rappel discret des 4 couleurs de la charte
   dans chaque coin — moderne, lisible, cohérent avec l'identité */
.entete-page {
    padding: 90px 0 60px;
    background:
        /* Violet en haut à gauche */
        radial-gradient(ellipse 60% 80% at 0% 0%,
            rgba(101, 26, 125, .11) 0%,
            transparent 55%),
        /* Magenta en haut à droite */
        radial-gradient(ellipse 55% 70% at 100% 0%,
            rgba(247, 0, 89, .10) 0%,
            transparent 55%),
        /* Vert en bas à droite */
        radial-gradient(ellipse 55% 60% at 100% 100%,
            rgba(20, 168, 17, .09) 0%,
            transparent 55%),
        /* Touche jaune subtile en bas à gauche */
        radial-gradient(ellipse 50% 55% at 0% 100%,
            rgba(255, 245, 144, .18) 0%,
            transparent 55%),
        /* Base blanc cassé très légèrement teintée */
        linear-gradient(135deg, #fafafb 0%, #f4f2f6 100%);
    border-bottom: 4px solid transparent;
    border-image: var(--degrade-charte) 1;
}
.titre-page {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    margin-bottom: 20px;
}
.sous-titre-page {
    font-family: var(--police-sous-titre);
    font-size: 1.2rem;
    color: var(--gris-fonce);
    max-width: 820px;
    line-height: 1.5;
    text-wrap: balance;
}

/* -------- Cartes d'axes (programme sur l'accueil) -------- */
.grille-axes {
    display: grid;
    /* 8 axes → 4 par ligne (2 lignes équilibrées) sur desktop.
       Bascule à 2 colonnes en tablette et 1 en mobile. */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}
@media (max-width: 1100px) {
    .grille-axes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .grille-axes { grid-template-columns: 1fr; }
}

/* CTA "Découvrir l'intégralité du programme" sous la grille */
.section-axes-cta {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0;
}
.carte-axe {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-grand);
    color: var(--noir);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}
.carte-axe::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--degrade-charte);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition);
}
.carte-axe:hover {
    border-color: transparent;
    box-shadow: var(--ombre-portee);
    transform: translateY(-4px);
    color: var(--noir);
}
.carte-axe:hover::before { transform: scaleY(1); }
.carte-axe-titre { font-size: 1.4rem; margin-bottom: 10px; }
.carte-axe-accroche { font-family: var(--police-sous-titre); color: var(--gris-fonce); margin-bottom: 16px; }
.carte-axe-lien { font-family: var(--police-sous-titre); font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-top: auto; }

/* -------- Cartes d'actualités -------- */
.grille-actualites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.grille-actualites-large { gap: 32px; }
.carte-actualite {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-grand);
    padding: 30px 28px;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
    /* pour ancrer le lien qui couvre toute la carte */
    position: relative;
}
.carte-actualite:hover { box-shadow: var(--ombre-portee); transform: translateY(-3px); cursor: pointer; }
/* Le lien de la carte s'étend en overlay invisible sur toute la carte
   → clic possible n'importe où sur la carte, le texte du lien reste visible/lisible */
.carte-actualite-lien::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.carte-actualite-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--police-sous-titre);
    font-size: .85rem;
    color: var(--gris-fonce);
    margin-bottom: 14px;
}
.etiquette {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--jaune);
    color: var(--noir);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.carte-actualite-titre { font-size: 1.25rem; margin-bottom: 12px; line-height: 1.25; }
.carte-actualite-chapeau { color: var(--gris-fonce); flex: 1; }
.carte-actualite-lien {
    font-family: var(--police-sous-titre);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .06em;
    margin-top: 12px;
    color: var(--violet);
}

/* -------- Programme : sommaire d'ancres -------- */
.ancres-programme {
    position: sticky;
    top: 92px; /* = hauteur exacte de l'entête fixe (logo 64 + padding 14×2) */
    background: var(--blanc);
    padding: 14px 0;
    margin-bottom: 40px;
    z-index: 10;
}
.ancres-programme ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ancres-programme a {
    display: inline-block;
    padding: 8px 14px;
    background: var(--gris-tres-clair);
    color: var(--gris-tres-fonce);
    font-family: var(--police-sous-titre);
    font-weight: 600;
    font-size: .85rem;
    border-radius: 999px;
    transition: background var(--transition), color var(--transition);
}
.ancres-programme a:hover { background: var(--violet); color: var(--blanc); }

/* -------- Programme : blocs d'axes -------- */
.liste-axes { display: flex; flex-direction: column; gap: 60px; }
.bloc-axe {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--gris-clair);
    scroll-margin-top: 160px;
}
.bloc-axe:first-child { border-top: none; padding-top: 0; }
.bloc-axe-numero {
    font-family: var(--police-titre);
    font-size: 3.6rem;
    color: var(--magenta);
    font-weight: 700;
    line-height: 1;
}
.bloc-axe-titre { font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin-bottom: 12px; }
.bloc-axe-accroche {
    font-family: var(--police-sous-titre);
    font-size: 1.2rem;
    color: var(--gris-fonce);
    margin-bottom: 20px;
}
.liste-points { list-style: none; padding: 0; }
.liste-points li {
    position: relative;
    padding: 12px 0 12px 34px;
    border-bottom: 1px dashed var(--gris-clair);
    line-height: 1.5;
}
.liste-points li:last-child { border-bottom: none; }
.liste-points li::before {
    content: "";
    position: absolute;
    left: 0;
    /* aligné verticalement sur le milieu visuel de la première ligne de texte
       (padding-top 12 + demi-line-height 12 - demi-épaisseur du filet 1.5) */
    top: 22px;
    width: 20px;
    height: 3px;
    background: var(--degrade-charte);
    border-radius: 3px;
}

/* -------- Carrousel candidats (pleine largeur jusqu'à 1400px, puis contenu) -------- */
.carrousel {
    position: relative;
    /* padding horizontal = respiration entre le bord du viewport et le premier/dernier slide */
    padding: 0 clamp(24px, 5vw, 80px);
    max-width: 100%;
    margin-inline: auto;
}
/* Au-dessus de 1400px : carrousel un peu plus large que le contenu classique,
   avec padding intérieur ajusté pour que les slides s'alignent quand même sur
   la colonne de contenu (24px depuis le bord de .conteneur ≈ 1240 max) */
@media (min-width: 1400px) {
    .carrousel {
        max-width: 1320px;
        padding-inline: 64px;
    }
    /* Flèches poussées dans les marges extérieures (hors du carrousel) */
    .fleche-precedent { left: -30px; }
    .fleche-suivant { right: -30px; }
}
/* Piste : Swiper gère le flex, le scroll, le drag → on ne fait qu'ajouter un peu d'air vertical */
.carrousel-piste { padding: 10px 0 30px; }
.carte-candidat {
    /* Largeur explicite requise par Swiper en mode slidesPerView: 'auto' */
    width: 250px;
    /* Hauteur uniforme via Swiper (align-items: stretch sur .swiper-wrapper par défaut) */
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-grand);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.carte-candidat:hover { box-shadow: var(--ombre-portee); transform: translateY(-4px); }
.carte-candidat-lien {
    display: flex;
    flex-direction: column;
    color: inherit;
    flex: 1;
}
.carte-candidat-portrait {
    aspect-ratio: 1 / 1;
    background: var(--gris-tres-clair);
    overflow: hidden;
}
.carte-candidat-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cadrage biaisé vers le haut : 50% horizontal, 25% vertical → on garde les visages
       dans le tiers supérieur de la photo (utile pour les portraits en pied ou en plan large) */
    object-position: 50% 25%;
    transition: transform .5s ease;
}
.carte-candidat:hover .carte-candidat-portrait img { transform: scale(1.04); }
.carte-candidat-corps {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.carte-candidat-position {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .7rem;
    color: var(--magenta);
    font-weight: 700;
    margin: 0 0 8px;
}
.carte-candidat-nom { font-size: 1.2rem; margin: 0 0 4px; }
.carte-candidat-fonction {
    font-family: var(--police-sous-titre);
    color: var(--gris-fonce);
    font-size: .9rem;
    margin: 0 0 12px;
}
.carte-candidat-bio {
    font-size: .95rem;
    color: var(--gris-tres-fonce);
    margin-bottom: 14px;
}
.carte-candidat-voir {
    font-family: var(--police-sous-titre);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .82rem;
    color: var(--violet);
    margin-top: auto; /* colle le lien en bas de la carte, alignement uniforme entre cartes */
}

.fleche-carrousel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--violet);
    border: 1px solid var(--gris-clair);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ombre-douce);
    z-index: 3;
    transition: background var(--transition), color var(--transition);
}
.fleche-carrousel:hover { background: var(--violet); color: var(--blanc); }
.fleche-precedent { left: clamp(8px, 2vw, 24px); }
.fleche-suivant { right: clamp(8px, 2vw, 24px); }
.fleche-carrousel.swiper-button-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* -------- Fiches candidats (bio longue + vidéo) -------- */
.section-fiches { background: var(--gris-tres-clair); }
.fiche-candidat {
    display: grid;
    gap: 60px;
    align-items: start;
    padding: 60px 0;
    border-bottom: 1px solid var(--gris-clair);
    scroll-margin-top: 120px;
}
/* Grid à 3 zones : titre / media / corps.
   En desktop, media spanne les 2 rangées à droite ou à gauche.
   En mobile (voir @media 1024px), on empile titre → media → corps. */
.fiche-alignee-gauche {
    grid-template-columns: 320px 1fr;
    grid-template-areas:
        "media titre"
        "media corps";
}
.fiche-alignee-droite {
    grid-template-columns: 1fr 320px;
    grid-template-areas:
        "titre media"
        "corps media";
}
.fiche-en-tete { grid-area: titre; }
.fiche-media   { grid-area: media; }
.fiche-corps   { grid-area: corps; }
.fiche-candidat:last-child { border-bottom: none; }

.fiche-media {
    /* Forcé en haut de la cellule grid (redondant avec align-items: start du parent,
       mais explicite pour éviter les cas de bord avec sticky) */
    align-self: start;
    position: sticky;
    top: 124px; /* un peu d'air sous l'entête fixe (~92px) */
    border-radius: var(--rayon-grand);
    overflow: hidden;
    background: var(--noir);
    /* Format portrait compact — les vidéos source 1080×1920 (9/16) sont légèrement
       recadrées haut/bas via object-fit: cover, mais le visage reste centré */
    aspect-ratio: 9 / 13;
    width: 100%;
}
.fiche-media img, .fiche-media video { width: 100%; height: 100%; object-fit: cover; }
/* NB : pas de `position: relative` sur .fiche-media-video — le `position: sticky`
   hérité de .fiche-media suffit à créer le contexte pour .bouton-play (absolute). */
/* Bouton play overlay dans le style du site (rond, violet → magenta au hover) */
.bouton-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(101, 26, 125, .88);
    color: var(--blanc);
    border: 3px solid rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    transition: transform var(--transition), background var(--transition), opacity var(--transition);
    z-index: 2;
    padding: 0;
}
.bouton-play:hover,
.bouton-play:focus-visible {
    background: var(--magenta);
    transform: translate(-50%, -50%) scale(1.06);
    outline: none;
}
/* Le triangle du play est visuellement asymétrique → petit décalage pour l'équilibrer optiquement */
.bouton-play svg { margin-left: 4px; }
/* Quand la vidéo est en lecture, on masque le bouton play */
.fiche-media-video.en-lecture .bouton-play {
    opacity: 0;
    pointer-events: none;
}
.fiche-position {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    color: var(--magenta);
    font-weight: 700;
    margin: 0 0 10px;
}
.fiche-nom { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 0 0 8px; }
.fiche-fonction {
    font-family: var(--police-sous-titre);
    font-size: 1.1rem;
    color: var(--gris-fonce);
    margin: 0 0 24px;
}
.fiche-bio { line-height: 1.7; }

/* -------- Grille de soutiens -------- */
.grille-soutiens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}
.carte-soutien { text-align: center; }
.carte-soutien-portrait {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
    background: var(--gris-tres-clair);
    border: 3px solid transparent;
    background-image: linear-gradient(var(--blanc), var(--blanc)), var(--degrade-charte);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.carte-soutien-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Portrait cliquable (soutien avec vidéo) : bouton transparent + overlay play */
.carte-soutien-media {
    position: relative;
    display: block;
    width: 160px;
    margin: 0 auto 18px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.carte-soutien-media .carte-soutien-portrait { margin: 0; }
.carte-soutien-play {
    position: absolute;
    /* Descendu vers le bas du portrait pour ne pas masquer le visage */
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(101, 26, 125, .9);
    color: var(--blanc);
    border: 3px solid rgba(255, 255, 255, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    opacity: .85;
    transition: transform var(--transition), background var(--transition), opacity var(--transition);
    pointer-events: none;
}
.carte-soutien-play svg { margin-left: 3px; } /* compense l'asymétrie du triangle */
.carte-soutien-media:hover .carte-soutien-play,
.carte-soutien-media:focus-visible .carte-soutien-play {
    background: var(--magenta);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}
.carte-soutien-media:focus-visible { outline: none; }
.carte-soutien-media:focus-visible .carte-soutien-portrait {
    box-shadow: 0 0 0 3px var(--magenta);
    border-radius: 50%;
}

/* -------- Lightbox vidéo -------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.lightbox.ouverte {
    opacity: 1;
    pointer-events: auto;
}
.lightbox-fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    cursor: pointer;
}
.lightbox-contenu {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Vidéos au format smartphone portrait (~9:16) → largeur réduite */
    max-width: 400px;
    background: var(--noir);
    border-radius: var(--rayon-grand);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-fermer {
    position: absolute;
    top: -46px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--blanc);
    cursor: pointer;
    padding: 6px;
    z-index: 2;
    transition: color var(--transition), transform var(--transition);
}
.lightbox-fermer:hover,
.lightbox-fermer:focus-visible {
    color: var(--jaune);
    outline: none;
    transform: rotate(90deg);
}
.lightbox-nom {
    position: absolute;
    top: -34px;
    left: 0;
    right: 60px;
    font-family: var(--police-sous-titre);
    font-weight: 600;
    color: var(--blanc);
    margin: 0;
    font-size: 1rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lightbox-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16; /* vidéos tournées en portrait 1080×1920 */
    max-height: 85vh;
    background: var(--noir);
    object-fit: contain;
}
@media (max-width: 720px) {
    .lightbox { padding: 60px 16px 16px; }
    .lightbox-fermer { top: 8px; right: 8px; background: rgba(0,0,0,.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; }
    .lightbox-nom { position: static; text-align: center; padding-bottom: 12px; }
}
.carte-soutien-nom { font-size: 1.15rem; margin: 0 0 6px; }
.carte-soutien-fonction {
    font-family: var(--police-sous-titre);
    color: var(--gris-fonce);
    font-size: .9rem;
    margin: 0;
    text-wrap: balance;
}

/* -------- Profession de foi -------- */
.section-profession { background: var(--blanc); }
.paragraphe-introduction {
    font-family: var(--police-sous-titre);
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--noir);
    padding: 0 0 24px;
    border-bottom: 1px solid var(--gris-clair);
    margin-bottom: 40px;
}
.titre-partie {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 40px 0 18px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-clair);
}
/* Quand le titre suit directement le paragraphe d'introduction (qui a déjà sa bordure basse),
   on retire la sienne pour éviter deux filets consécutifs. */
.paragraphe-introduction + .titre-partie {
    border-top: none;
    padding-top: 0;
    margin-top: 24px;
}
.section-profession p { line-height: 1.75; margin-bottom: 1.2em; }
.signature {
    font-family: var(--police-sous-titre);
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--violet);
    font-size: 1.05rem;
}
.actions-profession {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

/* -------- Formulaire -------- */
.formulaire { margin-top: 30px; }
.ligne-formulaire { margin-bottom: 20px; }
.ligne-double { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.champ-formulaire { margin-bottom: 20px; display: flex; flex-direction: column; }
.champ-formulaire label {
    font-family: var(--police-sous-titre);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 8px;
    color: var(--gris-tres-fonce);
}
.requis { color: var(--magenta); }
.champ-formulaire input[type="text"],
.champ-formulaire input[type="email"],
.champ-formulaire select,
.champ-formulaire textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--police-texte);
    font-size: 1rem;
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ-formulaire input:focus,
.champ-formulaire select:focus,
.champ-formulaire textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(101, 26, 125, .12);
}
.champ-formulaire textarea { resize: vertical; min-height: 140px; }
.champ-case {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.champ-case input { margin-top: 4px; accent-color: var(--violet); }
.champ-case label { font-family: var(--police-texte); font-weight: 400; margin: 0; }
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.ligne-actions { margin-top: 30px; }

.bandeau-succes, .bandeau-erreur {
    margin: 30px auto 0;
    padding: 18px 24px;
    border-radius: var(--rayon);
    font-family: var(--police-sous-titre);
    font-weight: 600;
    max-width: var(--largeur-etroite);
}
.bandeau-succes { background: rgba(20, 168, 17, .12); color: #0e6b0c; border-left: 4px solid var(--vert); }
.bandeau-erreur { background: rgba(247, 0, 89, .1); color: #a8003c; border-left: 4px solid var(--magenta); }

/* -------- Section don -------- */
.section-don { background: var(--gris-tres-clair); }

/* -------- Pied de page -------- */
.pied-page {
    background: var(--noir);
    color: var(--blanc);
    padding: 60px 0 30px;
    position: relative;
}
.pied-page::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--degrade-charte);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.pied-contenu {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.pied-logo { height: 62px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }
.pied-marque .pied-baseline {
    font-family: var(--police-sous-titre);
    color: var(--gris-clair);
    margin: 0;
}
.pied-titre {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    color: var(--jaune);
    margin: 0 0 16px;
}
.pied-liens li, .reseaux-sociaux li { margin-bottom: 10px; }
.pied-liens a, .lien-reseau {
    color: var(--gris-clair);
    font-family: var(--police-sous-titre);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pied-liens a:hover, .lien-reseau:hover { color: var(--blanc); }
.pied-info { font-family: var(--police-sous-titre); color: var(--gris-clair); }
.pied-info a { color: var(--jaune); border-bottom: 1px solid transparent; }
.pied-info a:hover { color: var(--jaune); border-bottom-color: var(--jaune); }
.pied-mentions {
    max-width: var(--largeur-max);
    margin: 40px auto 0;
    padding: 20px 24px 0;
    border-top: 1px solid #2a2a2a;
    font-family: var(--police-sous-titre);
    font-size: .82rem;
    color: var(--gris);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}
.pied-mentions p { margin: 0; }
.pied-mentions-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pied-mentions-liens a {
    color: var(--gris-clair);
    border-bottom: 1px solid transparent;
}
.pied-mentions-liens a:hover {
    color: var(--blanc);
    border-bottom-color: var(--jaune);
}
.pied-mentions-credit a {
    color: var(--jaune);
    border-bottom: 1px solid transparent;
}
.pied-mentions-credit a:hover { border-bottom-color: var(--jaune); }

/* =========================================================
   Responsive — mobile first à partir d'ici
   ========================================================= */
@media (max-width: 1024px) {
    .hero-contenu { padding: 140px 0 100px; }
    .hero-texte { max-width: 540px; }
    /* Fiche mobile : 3 rangées empilées, media intercalé entre titre et corps de bio.
       Le sticky est désactivé (pas de comportement collant en mobile). */
    .fiche-candidat,
    .fiche-alignee-gauche,
    .fiche-alignee-droite {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titre"
            "media"
            "corps";
        gap: 30px;
    }
    .fiche-media {
        /* `relative` (pas `static`) → le .bouton-play (absolute) reste ancré ici, pas plus haut */
        position: relative;
        /* Reset du `top: 124px` hérité du desktop (utile pour sticky, indésirable en relative
           où il pousse réellement l'élément vers le bas et cause un chevauchement avec le corps) */
        top: 0;
        max-width: 400px;
        /* Aligné à gauche (pas centré) : marge droite auto pousse le média contre le bord gauche */
        margin-inline: 0 auto;
    }
    .bloc-axe { grid-template-columns: 80px 1fr; gap: 24px; }
    .bloc-axe-numero { font-size: 2.8rem; }
    .pied-contenu { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   ≤ 1100px : bascule en menu burger (avant que les liens du menu
   n'aient plus assez de place dans l'entête)
   ========================================================= */
@media (max-width: 1100px) {
    .bouton-menu { display: flex; }
    .menu-principal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--blanc);
        /* padding-top = hauteur d'entête (logo 64 + padding 14×2) — les items sortent PILE
           sous le bas du header, sans jour */
        padding: 92px 20px 24px;
        border-bottom: 1px solid var(--gris-clair);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        max-height: 100vh;
        overflow-y: auto;
        /* z-index -1 → le menu passe DERRIÈRE le fond de l'entête (et donc derrière le bouton
           hamburger + logo, qui restent cliquables). La partie visible du menu dépasse sous
           l'entête, au-dessus du contenu de page. */
        z-index: -1;
    }
    .menu-principal.menu-ouvert {
        opacity: 1;
        pointer-events: auto;
    }
    .menu-principal .liste-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .lien-menu { padding: 11px 16px; }
    .lien-actif::after { display: none; }
    .lien-menu-action { margin-left: 0; text-align: center; padding: 12px 22px; }
}

@media (max-width: 720px) {
    .entete-logo img { height: 48px; }
    .entete-scrollee .entete-logo img { height: 48px; }
    /* Mobile : on garde la transparence sur le hero mais avec un logo plus modeste */
    .entete-transparente .entete-logo img { height: 88px; }
    .entete-transparente.entete-scrollee .entete-logo img { height: 48px; }
    /* Menu ouvert sur mobile : logo à la taille "blanche" normale */
    .entete-transparente.entete-menu-ouvert .entete-logo img { height: 48px; }

    /* Menu burger mobile : padding-top réduit (entête ≃ 76px sur mobile au lieu de 92px) */
    .menu-principal { padding-top: 76px; }

    /* Hero mobile : texte ancré en bas, image portrait dédiée (Yan centré) */
    .hero-accueil { align-items: flex-end; }
    .hero-image { object-position: center top; }
    .hero-contenu { padding: 0 0 60px; }
    .hero-texte { max-width: none; margin-left: 0; }
    .hero-titre { font-size: 2.2rem; }
    .hero-sous-titre { margin-bottom: 32px; font-size: 1.05rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .bouton { width: 100%; text-align: center; justify-content: center; }
    .hero-actions .bouton-lien { width: auto; align-self: center; }

    /* Pas de flèche "défiler" sur mobile */
    .hero-indicateur { display: none; }

    /* Voile qui remonte fortement depuis le bas sur mobile */
    .hero-voile {
        background:
            /* Sombre depuis le bas — couvre la zone de texte */
            linear-gradient(0deg,
                rgba(20, 8, 30, .92) 0%,
                rgba(20, 8, 30, .75) 25%,
                rgba(20, 8, 30, .4) 50%,
                rgba(20, 8, 30, .1) 70%,
                transparent 85%),
            /* Renfort violet foncé en bas */
            linear-gradient(0deg,
                rgba(76, 19, 96, .5) 0%,
                rgba(76, 19, 96, 0) 45%),
            /* Wash magenta en bas droite */
            radial-gradient(ellipse 100% 40% at 100% 100%,
                rgba(247, 0, 89, .3) 0%,
                rgba(247, 0, 89, 0) 70%),
            /* Wash vert en bas gauche */
            radial-gradient(ellipse 80% 35% at 0% 100%,
                rgba(20, 168, 17, .25) 0%,
                rgba(20, 168, 17, 0) 70%),
            /* Léger halo violet en haut */
            radial-gradient(ellipse 90% 30% at 50% 0%,
                rgba(101, 26, 125, .3) 0%,
                rgba(101, 26, 125, 0) 70%);
    }

    .conteneur { padding: 0 24px; }
    .section { padding: 60px 0; }
    .entete-page { padding: 50px 0 40px; }

    .ligne-double { grid-template-columns: 1fr; gap: 0; }

    .bloc-axe { grid-template-columns: 1fr; gap: 10px; }
    .bloc-axe-numero { font-size: 2.2rem; }

    .ancres-programme { position: static; }
    .carrousel { padding: 0 44px; }
    .carte-candidat { flex: 0 0 260px; }
    .fleche-carrousel { width: 40px; height: 40px; }

    .grille-soutiens { gap: 20px; }
    .carte-soutien-portrait { width: 130px; height: 130px; }

    .pied-contenu { grid-template-columns: 1fr; gap: 30px; text-align: left; }

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

@media (max-width: 420px) {
    .hero-titre { font-size: 2rem; }
    .hero-sous-titre { font-size: 1rem; }
    .titre-page { font-size: 2rem; }
}

/* =========================================================
   Programme complet (page /programme-preview, brouillon)
   ========================================================= */
.section-programme-edito { background: var(--gris-tres-clair); }
.section-programme-sommaire { background: var(--blanc); }
.section-programme-partie { padding-top: 40px; padding-bottom: 40px; }
.section-programme-partie:nth-of-type(even) { background: var(--gris-tres-clair); }

/* Conteneur de lecture élargi pour l'édito (contenu textuel long, sans colonne latérale) */
.section-programme-edito .conteneur-lecture { max-width: 1240px; }

/* Le sommaire général et les parties utilisent la largeur standard du .conteneur (var(--largeur-max) = 1240px) — pas d'override nécessaire */

/* Layout à 2 colonnes : intro + chapitres à gauche, sommaire sticky à droite */
.programme-partie-entete { margin-bottom: 40px; }
.programme-partie-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 60px;
    align-items: start;
}
.programme-partie-corps { min-width: 0; }

/* Sommaire sticky de la partie courante — aligné dès le haut (au niveau de l'intro).
   Sans bordure ; fond qui alterne avec celui de la section pour créer un contraste :
   - Section fond blanc  → TOC en gris clair
   - Section fond gris   → TOC en blanc */
.programme-partie-toc {
    position: sticky;
    top: 120px;
    align-self: start;
    padding: 20px;
    background: var(--gris-tres-clair);
    border: none;
    border-radius: var(--rayon-grand);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    font-family: var(--police-sous-titre);
}
.section-programme-partie:nth-of-type(even) .programme-partie-toc {
    background: var(--blanc);
}
.programme-partie-toc-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
.programme-partie-toc-liste li { margin-bottom: 2px; }
.programme-partie-toc-liste a {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 10px 8px;
    color: var(--gris-tres-fonce);
    line-height: 1.35;
    font-size: .88rem;
    border-radius: var(--rayon);
    transition: background var(--transition), color var(--transition);
}
.programme-partie-toc-liste a:hover {
    /* Fond violet très léger — fonctionne sur TOC blanche ET grise */
    background: rgba(101, 26, 125, .07);
    color: var(--violet);
}
.programme-partie-toc-num {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--magenta);
    font-size: .85rem;
}
/* Libellés : 2 lignes max, ellipse en fin */
.programme-partie-toc-lib {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive : le sommaire sticky disparaît sous 1024px
   (le sommaire général en haut de page fait office de navigation) */
@media (max-width: 1024px) {
    .section-programme-partie > .conteneur { max-width: var(--largeur-max); }
    .programme-partie-layout { grid-template-columns: 1fr; gap: 0; }
    .programme-partie-toc { display: none; }
    .programme-partie-entete { max-width: 100%; }
}

/* Édito */
.programme-edito-corps p {
    font-family: var(--police-sous-titre);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--gris-tres-fonce);
    margin-bottom: 1em;
}
.programme-edito-signature {
    font-family: var(--police-sous-titre);
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid var(--violet);
    font-size: 1rem;
    line-height: 1.5;
}

/* Sommaire */
.programme-sommaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 36px;
}
.programme-sommaire-partie {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-grand);
    padding: 30px 28px;
    position: relative;
    overflow: hidden;
}
.programme-sommaire-partie::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 4px;
    background: var(--degrade-charte);
    border-radius: 0 0 3px 0;
}
.programme-sommaire-suptitre {
    font-family: var(--police-sous-titre);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    color: var(--magenta);
    font-weight: 700;
    margin: 0 0 10px;
}
.programme-sommaire-titre {
    font-size: 1.3rem;
    margin: 0 0 20px;
    line-height: 1.25;
}
.programme-sommaire-titre a {
    color: var(--noir);
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition), color var(--transition);
}
.programme-sommaire-titre a:hover {
    color: var(--violet);
    border-bottom-color: var(--magenta);
}
.programme-sommaire-liste {
    list-style: decimal;
    padding-left: 22px;
    margin: 0;
    font-family: var(--police-sous-titre);
    font-size: .95rem;
    color: var(--gris-fonce);
    line-height: 1.5;
}
.programme-sommaire-liste li { margin-bottom: 8px; }
.programme-sommaire-liste a {
    color: var(--gris-tres-fonce);
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.programme-sommaire-liste a:hover {
    color: var(--violet);
    border-bottom-color: var(--gris-clair);
}

/* Entête de partie */
.programme-partie-suptitre {
    color: var(--magenta);
}
.programme-partie-titre {
    font-family: var(--police-titre);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--noir);
    line-height: 1.15;
    margin: 0 0 12px;
    text-wrap: balance;
}
.programme-partie-accroche {
    font-family: var(--police-sous-titre);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--violet);
    line-height: 1.4;
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gris-clair);
    text-wrap: balance;
}
.programme-partie-intro p {
    font-family: var(--police-sous-titre);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--gris-tres-fonce);
    margin-bottom: 1em;
}

/* Chapitres */
.programme-chapitre {
    padding: 50px 0 40px;
    border-top: 1px solid var(--gris-clair);
    scroll-margin-top: 120px;
}
.programme-chapitre:first-child { border-top: none; }
.programme-chapitre-numero {
    font-family: var(--police-titre);
    font-size: 2.6rem;
    color: var(--magenta);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 6px;
    letter-spacing: .02em;
}
.programme-chapitre-titre {
    font-family: var(--police-titre);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: var(--noir);
    line-height: 1.2;
    margin: 0 0 24px;
    text-wrap: balance;
}
.programme-chapitre-intro { margin-bottom: 24px; }
.programme-chapitre-intro p {
    line-height: 1.7;
    color: var(--gris-tres-fonce);
    margin-bottom: 1em;
}

/* Liste des mesures */
.programme-mesures {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}
.programme-mesures li {
    position: relative;
    padding: 14px 0 14px 34px;
    border-bottom: 1px dashed var(--gris-clair);
    line-height: 1.55;
}
.programme-mesures li:last-child { border-bottom: none; }
.programme-mesures li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    width: 20px;
    height: 3px;
    background: var(--degrade-charte);
    border-radius: 3px;
}

/* Sous-chapitres (utile pour "Refondation démocratique") */
.programme-sous-chapitre {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--gris-clair);
}
.programme-sous-chapitre-titre {
    font-family: var(--police-titre);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--violet);
    margin: 0 0 12px;
}

/* Lien retour au sommaire de partie */
/* Responsive : sommaire général en une colonne sur tablette/mobile */
@media (max-width: 900px) {
    .programme-sommaire { grid-template-columns: 1fr; gap: 24px; }
}

/* -------- Animation d'apparition (respecte prefers-reduced-motion) -------- */
.anim-apparition {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.anim-apparition.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .anim-apparition, .anim-apparition.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .fleche-defilement { animation: none; }
    html { scroll-behavior: auto; }
}