/* ==========================================================================
   Fonts — Outfit (titres) + Inter (corps), hébergés localement
   Fichiers fournis dans /public/fonts/ — pas de requête externe (RGPD friendly)
   ========================================================================== */

/* Inter — Latin (français de base) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — Latin étendu (accents rares, œ Œ, etc.) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Outfit — Latin (français de base) */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit — Latin étendu */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* Playfair Display — Latin étendu */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — italique, pour l'accent des titres de héros (auto-hébergée) */
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/fraunces-latin-italic.woff2') format('woff2');
}

/* ==========================================================================
   CSS Variables & Tokens
   ========================================================================== */
:root {
    /* Charte historique — teal profond · orange chaleureux · moutarde (audit site 2026) */
    --color-primary: #0a4548;
    --color-primary-light: #147a7f;
    --color-primary-dark: #102a2c;

    --color-secondary-brand: #d36b42;
    --color-secondary: #b85d38;
    --color-secondary-hover: #9f4d2f;
    --color-secondary-on-dark: #f08a4f;

    --color-accent: #e8b923;
    /* Chiffres hero / stats — jaune discret sur fond sombre */
    --color-stat-lime: #d4bc78;

    /* Accents par pôle — utilisés comme var(--accent) dans les profil-card */
    --accent-pole-petite-enfance: var(--color-primary);
    --accent-pole-famille: var(--color-accent);
    --accent-pole-adultes: var(--color-primary);
    --accent-pole-jeunesse: var(--color-secondary-brand);

    /* Accents valeur-cards (lecentre.astro) — palette propre au carousel */
    --valeur-dignite: #e46a25;
    --valeur-solidarite: var(--color-primary);
    --valeur-democratie: var(--color-primary-light);
    --valeur-confidential: var(--color-primary-dark);
    --valeur-laicite: var(--color-secondary);
    --valeur-accessibilite: var(--color-accent);

    --color-bg: #f7f3ee;
    --color-bg-soft: #efe8df;
    --color-surface: #ffffff;
    --color-surface-hover: #f0ebe6;
    --color-bg-alt: #f4ede5;

    --color-text-main: #0a1b1d;
    --color-text-muted: #4a545a;
    --color-text-subtle: #5f6b73;
    --color-text-light: #ffffff;

    /* Typography : titres Outfit, corps Inter */
    --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Corps ≥ 16 px : plancher explicite pour le mobile, agrandi sur desktop */
    --font-scale-body: clamp(1rem, calc(0.95rem + 0.35vw), 1.0625rem);
    --font-scale-lead: clamp(1.0625rem, calc(1rem + 0.35vw), 1.1875rem);

    /* Espacements fluides (min → proportionnel → max) */
    --spacing-xs: clamp(0.2rem, 0.15rem + 0.15vw, 0.25rem);
    --spacing-sm: clamp(0.45rem, 0.4rem + 0.25vw, 0.5rem);
    --spacing-md: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);
    --spacing-lg: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
    --spacing-xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    --spacing-xxl: clamp(3rem, 2rem + 3vw, 4rem);

    /* Conteneur & grille */
    --container-max: 1280px;
    --container-padding-inline: clamp(1rem, 4vw, 2.5rem);
    --grid-gap-fluid: clamp(0.75rem, 2vw, 1.5rem);

    /* Effects */
    --shadow-sm: 0 2px 8px rgba(16, 42, 44, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 42, 44, 0.1);
    --shadow-lg: 0 20px 40px rgba(16, 42, 44, 0.12);
    --shadow-glow: 0 8px 28px rgba(211, 107, 66, 0.32);

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    --top-bar-height: 40px;
    --current-header-bottom: var(--header-offset);
    --current-anchor-offset: var(--current-header-bottom);

    /* Rythme vertical des sections — palier respirant et fluide */
    --section-py: clamp(4rem, 7vw, 7.5rem);
    --header-offset: calc(var(--top-bar-height) + 80px);

    /* Largeur de lecture confortable pour le corps de texte */
    --prose-max: 68ch;

    /* Ombre dédiée au survol des cartes (cohérence cross-pages) */
    --shadow-card-hover: 0 18px 36px rgba(10, 69, 72, 0.16);

    --text-accent-gradient: linear-gradient(135deg, var(--color-secondary-on-dark) 0%, #f2a06a 100%);
    --text-accent-gradient-section: linear-gradient(135deg, var(--color-secondary-brand) 0%, var(--color-secondary) 100%);

    --hero-overlay-gradient:
        linear-gradient(90deg,
            rgba(5, 37, 39, 0.72) 0%,
            rgba(5, 37, 39, 0.52) 38%,
            rgba(5, 37, 39, 0.24) 67%,
            rgba(5, 37, 39, 0.28) 100%),
        linear-gradient(180deg,
            rgba(4, 26, 28, 0.06) 0%,
            rgba(4, 26, 28, 0.18) 100%);
}

/* Sur les écrans étroits, le voile suit l’empilement vertical du contenu. */
@media (max-width: 760px) {

    .hero,
    .fp2-hero,
    .page-hero,
    .subpage-hero {
        --hero-overlay-gradient: linear-gradient(180deg,
                rgba(5, 37, 39, 0.76) 0%,
                rgba(5, 37, 39, 0.56) 52%,
                rgba(5, 37, 39, 0.74) 100%);
    }
}

/* ===== Sommaire collant : page adhesion ===== */
.page-inscription .inscription-toc {
    position: sticky;
    top: max(0px, calc(var(--current-header-bottom, var(--header-offset)) - 1px));
    z-index: 990;
    margin: 0;
    padding: 0;
    background: rgba(247, 243, 238, 0.94);
    border-top: 1px solid rgba(10, 69, 72, 0.08);
    border-bottom: 1px solid rgba(10, 69, 72, 0.1);
    box-shadow: 0 16px 34px rgba(16, 42, 44, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        top 0.24s ease,
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}

.page-inscription .inscription-toc.is-stuck {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(16, 42, 44, 0.13);
}

.page-inscription .inscription-toc__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    overflow: hidden;
}

.page-inscription .inscription-toc__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    white-space: nowrap;
}

.page-inscription .inscription-toc__label::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(211, 107, 66, 0.14);
}

.page-inscription .inscription-toc__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
    padding: 0.3rem;
    overflow-x: auto;
    border: 1px solid rgba(10, 69, 72, 0.1);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.7);
    scrollbar-width: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.page-inscription .inscription-toc__list::-webkit-scrollbar {
    display: none;
}

.page-inscription .inscription-toc__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.52rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.page-inscription .inscription-toc__list a:hover,
.page-inscription .inscription-toc__list a:focus-visible {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 10px 22px rgba(10, 69, 72, 0.18);
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 768px) {
    .page-inscription .inscription-toc__inner {
        flex-direction: column;
        align-items: center;
        gap: 0.55rem;
        overflow: visible;
        /* allow __list to scroll horizontally */
    }

    .page-inscription .inscription-toc__list {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 0.05rem;
        overflow-x: auto;
        /* scroll tabs horizontally instead of clipping */
        /* fade hint at right edge to signal horizontal scroll */
        -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
        mask-image: linear-gradient(to right, black 88%, transparent 100%);
    }

    /* Pills plus compactes pour que tous les onglets soient au moins partiellement visibles */
    .page-inscription .inscription-toc__list a {
        font-size: 0.78rem;
        padding: 0.44rem 0.75rem;
        min-height: 44px;
    }
}

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

html {
    scroll-behavior: smooth;
    /* Échelle de base fluide : tout ce qui est en rem suit la largeur d’écran.
       Minimum 16 px pour respecter les recommandations WCAG AA (lisibilité). */
    font-size: clamp(16px, 0.9rem + 0.35vw, 17px);
    /* Évite que les ancres se cachent derrière la top-bar + header fixes */
    scroll-padding-top: var(--current-anchor-offset, var(--current-header-bottom, var(--header-offset)));
    /* clip bloque le débordement horizontal SANS créer de scroll-container,
       ce qui préserve position:sticky sur les éléments enfants (toc, form-progress…) */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-scale-body);
    color: var(--color-text-main);
    background-color: var(--color-bg);
    background-image: radial-gradient(120% 85% at 100% 0%, rgba(10, 69, 72, 0.07) 0%, transparent 55%),
        radial-gradient(90% 65% at 0% 100%, rgba(211, 107, 66, 0.05) 0%, transparent 52%);
    background-attachment: scroll;
    line-height: 1.65;
    /* overflow-x: hidden crée un scroll-container implicite et casse position:sticky —
       overflow-x: clip bloque le défilement horizontal sans cet effet de bord */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.logo-title,
.logo-subtitle {
    font-family: var(--font-body);
    letter-spacing: 0.01em;
}

.logo-title {
    font-weight: 700;
}

.logo-subtitle {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

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

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

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.text-gradient {
    background: var(--text-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Accent doré harmonisé sur tous les héros (couleur alignée sur la page d'accueil).
   On redéfinit la variable d'accent dans le contexte .hero : tous les .text-gradient
   des héros — y compris les surcharges de pôle qui référencent la variable — passent
   en or. Les surtitres et titres de section conservent l'orange de marque. */
.hero {
    --text-accent-gradient: linear-gradient(118deg, #ffc7a1 0%, #f2955f 42%, #e37a48 72%, #d3672f 100%);
}

/* Accent des titres de héros : serif Playfair Display en italique, couleur
   dorée pleine (plus de dégradé), alignée sur l'accent doré de la page d'accueil.
   Ombre portée pour la lisibilité sur la photo. Les surtitres/titres de section
   gardent leur style habituel. */
.hero .hero-title .text-gradient,
.hero .subpage-hero__title .text-gradient,
.hero .page-hero__title .text-gradient {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--color-accent);
    color: var(--color-accent);
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

/* Section FAQ sur fond clair : texte plein contrasté (WCAG), pas de gradient clair sur clair */
#faq .section-title .text-gradient {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--color-primary-dark);
    display: inline;
}

/* Titres sur fonds clairs : accent presque plein, plus sobre que le dégradé historique. */
.section .text-gradient {
    background: var(--text-accent-gradient-section);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ==========================================================================
   Components : Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 44px;
    padding: 0.8125rem 1.75rem;
    border-radius: 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: none;
    transition: var(--transition-normal);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn-lg {
    padding: 1rem 2.125rem;
    font-size: 1.0625rem;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    box-shadow: 0 4px 14px rgba(211, 107, 66, 0.32);
}

.btn-primary:hover {
    background-color: var(--color-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Secondaire nav : lisible sur fond vidéo puis sur header scroll blanc */
.btn-nav-secondary {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid rgba(255, 255, 255, 0.42);
    box-shadow: none;
}

.btn-nav-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.65);
    transform: translateY(-2px);
}

.header.scrolled .btn-nav-secondary {
    color: var(--color-primary-dark);
    border-color: rgba(10, 69, 72, 0.35);
}

.header.scrolled .btn-nav-secondary:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background-color: rgba(211, 107, 66, 0.06);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-nav-secondary:focus-visible,
.btn-outline-primary:focus-visible {
    /* Double anneau : contour foncé + halo blanc → visible sur fond clair ET sur les heros sombres (WCAG 2.4.11). */
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Bandeau France Services — composant partagé (accueil, numérique, permanences) */
.numerique-france-band {
    background: linear-gradient(135deg, #0a4548 0%, #12686a 100%);
    color: var(--color-text-light);
    padding: clamp(1.45rem, 3vw, 2.2rem) 0;
}

.numerique-france-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(1.25rem, 4vw, 2.5rem);
}

.numerique-france-band__copy {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.numerique-france-band__points li {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.numerique-france-band__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 0.5rem;
    opacity: 0.86;
}

.numerique-france-band h2 {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    margin-bottom: 0.65rem;
    color: var(--color-text-light);
}

.numerique-france-band p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 40rem;
}

/* Services chips */
.nfb-services {
    list-style: none;
    padding: 0;
    margin: 1.3rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}

.nfb-service {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
}

.nfb-service__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nfb-service__icon i {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
}

.nfb-service__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.nfb-service__text strong {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.nfb-service__text span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.3;
}

.numerique-france-band__cta {
    flex-shrink: 0;
    align-self: flex-start;
    width: fit-content;
}

.numerique-france-band__btn {
    background-color: #ffffff;
    color: var(--color-primary-dark);
    border: 1px solid rgba(255, 255, 255, 0.78);
    font-weight: 700;
    box-shadow: none;
    min-height: 0;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

.numerique-france-band__btn:hover {
    background-color: #f0faf9;
    color: var(--color-primary-dark);
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: none;
}

.numerique-france-band__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .numerique-france-band__inner {
        grid-template-columns: 1fr;
    }

    .numerique-france-band__cta {
        width: 100%;
    }

    .numerique-france-band__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Bouton France Services (teal foncé + texte clair) */
.btn-france-services {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background-color: #134e4a;
    color: #e2e8f0;
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    min-height: 0;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.btn-france-services:hover {
    background-color: #0f3d3a;
    color: #f8fafc;
    border-color: rgba(226, 232, 240, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(19, 78, 74, 0.28);
}

.btn-france-services:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn-france-services--sm {
    font-size: 0.72rem;
    padding: 0.38rem 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Shine Effect for Primary Button */
.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shine 4s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* ==========================================================================
   Top bar (infos rapides)
   ========================================================================== */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1002;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    min-height: var(--top-bar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    will-change: transform;
}

/* Réapparition instantanée en remontée — évite le vide au-dessus du menu */
html:not(.hide-top-bar) .top-bar {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: none;
}

html.hide-top-bar .top-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .top-bar {
        transition: none;
    }
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    /* Pas de padding vertical : il s'ajoutait à min-height et rendait le
       bandeau (~51px) plus haut que --top-bar-height (40px), si bien que le
       header fixe (top:--top-bar-height) chevauchait le bas du bandeau.
       align-items:center centre le contenu dans la hauteur min. */
    padding: 0;
    min-height: var(--top-bar-height);
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.top-bar__inner::-webkit-scrollbar {
    display: none;
}

.top-bar__cluster {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.65rem;
}

.top-bar__cluster--right {
    gap: 0.25rem;
}

.top-bar__quick-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.top-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.top-bar__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.top-bar__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Lien actif : double indication (couleur + soulignement) pour aria-current */
.top-bar__link[aria-current='page'],
.top-bar__link--current {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-accent);
}

/* Accents colorés : liens rapides en jaune doré, action de contact en orange chaud */
.top-bar__link--accent {
    color: var(--color-accent);
    font-weight: 600;
}

.top-bar__link--accent:hover {
    color: #f5cc4d;
    background: rgba(255, 255, 255, 0.06);
}

.top-bar__link--accent.top-bar__link--contact {
    color: var(--color-secondary-on-dark);
}

.top-bar__link--accent.top-bar__link--contact:hover {
    color: #ffad7a;
    background: rgba(255, 255, 255, 0.06);
}

/* Cible tactile minimum 44 px sur mobile (sans alourdir le bandeau desktop) */
.top-bar__link--touch {
    min-height: 28px;
}

@media (hover: none),
(max-width: 900px) {
    .top-bar__link--touch {
        min-height: 44px;
        padding-block: 0.4rem;
    }
}

/* Bouton Accessibilité : effet "pilule" pour le détacher visuellement */
.a11y-toolbar__toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.a11y-toolbar__toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.a11y-toolbar__toggle[aria-expanded='true'] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Panneau options d'affichage (lié à #a11y-toolbar, bouton .a11y-toolbar__toggle) */
.a11y-toolbar {
    position: relative;
    z-index: 1200;
    background: var(--color-surface);
    border-bottom: 1px solid rgba(10, 69, 72, 0.12);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) 0;
}

.a11y-toolbar[hidden] {
    display: none !important;
}

.a11y-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.a11y-toolbar__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary-dark);
    margin: 0;
    width: 100%;
}

@media (min-width: 600px) {
    .a11y-toolbar__title {
        width: auto;
        margin-right: var(--spacing-md);
    }
}

.a11y-toolbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.a11y-toolbar .a11y-btn {
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(10, 69, 72, 0.2);
    background: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-text-main);
    transition: var(--transition-fast);
}

.a11y-toolbar .a11y-btn:hover {
    border-color: var(--color-primary-light);
}

.a11y-toolbar .a11y-btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}

.a11y-toolbar .a11y-toggle {
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(10, 69, 72, 0.35);
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-primary-dark);
}

.a11y-toolbar .a11y-toggle[aria-pressed='true'] {
    background: rgba(10, 69, 72, 0.08);
    border-style: solid;
}

html[data-a11y-text='sm'] {
    font-size: 15px;
}

html[data-a11y-text='lg'] {
    font-size: 19px;
}

html.a11y-high-contrast body {
    background: #fff !important;
}

html.a11y-high-contrast body,
html.a11y-high-contrast .section,
html.a11y-high-contrast .footer {
    color: #000 !important;
}

html.a11y-high-contrast a {
    color: #0000ee !important;
}

html.a11y-high-contrast .header,
html.a11y-high-contrast .top-bar {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-high-contrast .header .nav-links a,
html.a11y-high-contrast .top-bar__link {
    color: #fff !important;
}

html.a11y-high-contrast .hero,
html.a11y-high-contrast .hero *:not(video):not(img),
html.a11y-high-contrast .form-card,
html.a11y-high-contrast .benefit-card,
html.a11y-high-contrast .service-card,
html.a11y-high-contrast .step-card {
    background-color: #fff !important;
    color: #000 !important;
    text-shadow: none !important;
}

html.a11y-high-contrast .btn,
html.a11y-high-contrast button,
html.a11y-high-contrast input,
html.a11y-high-contrast select,
html.a11y-high-contrast textarea {
    border-color: #000 !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

html.a11y-reduce-motion .header,
html.a11y-reduce-motion .header *:not(.nav-links a::after) {
    transition: none !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}

html.a11y-reduce-motion .fade-up,
html.a11y-reduce-motion .fade-in {
    opacity: 1 !important;
    transform: none !important;
}

.top-bar__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.top-bar__status {
    gap: 0.35rem;
    white-space: nowrap;
}

.open-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #f5c542;
    box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.18);
    flex: 0 0 auto;
}

[data-open-status].is-open .open-status-dot {
    background: #49d17d;
    box-shadow: 0 0 0 3px rgba(73, 209, 125, 0.18);
}

[data-open-status].is-closed .open-status-dot {
    background: #f08a4f;
    box-shadow: 0 0 0 3px rgba(240, 138, 79, 0.2);
}

[data-open-status].is-paused .open-status-dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(232, 185, 35, 0.2);
}

/* Séparateur vertical top-bar */
.top-bar__sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Variante "lead" : sépare la nav rapide du bloc d'actions (Accessibilité, Adhérer…) */
.top-bar__sep--lead {
    height: 16px;
    margin: 0 0.5rem;
}

/* Icônes top-bar (accessibilité, dark mode…) */
.top-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.78);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    padding: 0;
}

.top-bar__icon:hover {
    color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
}

.top-bar__text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
}

.top-bar__text i {
    color: var(--color-accent);
    opacity: 0.95;
}

/* ----- Responsive top-bar -----
   Stratégie : on garde le bandeau sur UNE seule ligne en réduisant
   progressivement les éléments (priorité contact + actions colorées)
   plutôt qu'en empilant — d'où une hauteur stable de 40px partout. */
@media (max-width: 1024px) {
    .top-bar__link--touch {
        min-height: 44px;
        padding-block: 0.4rem;
    }

    .top-bar__quick-links,
    .top-bar__sep--lead {
        display: none;
    }

    .top-bar__inner {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .top-bar__cluster {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .top-bar__cluster--left .top-bar__link:last-child span,
    .top-bar__cluster--right>a.top-bar__link--accent:last-child span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .top-bar__cluster--left .top-bar__link:last-child,
    .top-bar__cluster--right>a.top-bar__link--accent:last-child {
        display: inline-flex;
        min-width: 44px;
        justify-content: center;
    }

    .top-bar__cluster--right>.top-bar__link:not(.top-bar__link--accent):not(:first-child) {
        display: none;
    }

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

    .top-bar__link--accent,
    .top-bar .a11y-toolbar__toggle {
        justify-content: center;
        min-width: 44px;
    }
}

@media (max-width: 900px) {
    :root {
        --top-bar-height: 56px;
    }
}

@media (max-width: 600px) {
    .top-bar__inner {
        gap: var(--spacing-sm);
    }

    .top-bar__cluster {
        gap: 0.4rem;
    }

    /* On masque le libellé "Accessibilité" pour ne garder que l'icône (la pilule reste visible) */
    .a11y-toolbar__toggle span {
        display: none;
    }

    .a11y-toolbar__toggle {
        padding: 0.25rem 0.55rem;
    }

    .top-bar__dot {
        display: none;
    }
}

@media (max-width: 768px) {

    .top-bar__status,
    .top-bar__dot--status {
        display: none;
    }
}

@media (max-width: 480px) {

    /* E-mail en icône seule sur très petit écran */
    .top-bar__cluster--left .top-bar__link:last-child span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .top-bar__cluster--left .top-bar__link:last-child {
        display: inline-flex;
        min-width: 44px;
        justify-content: center;
    }

    /* L'icône seule suffit pour Adhérer sur très petit écran */
    .top-bar__link--accent span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 420px) {
    .logo-img {
        height: 42px;
    }

    .logo-title {
        font-size: 1rem;
    }

    .logo-subtitle {
        font-size: 0.75rem;
    }

    .hero-values {
        gap: 0.5rem;
        justify-content: center;
    }

    .value-item {
        font-size: 0.92rem;
    }

    .header {
        padding: 0.4rem 0;
    }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.header {
    position: fixed;
    top: var(--top-bar-height);
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, padding 0.2s ease;
    padding: var(--spacing-md) 0;
}

/* Enfants du header : sans transition (sauf underline des liens nav) */
.header *:not(.nav-links a::after) {
    transition: none !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    .header {
        transition: none !important;
    }
}

.header .nav-links a::after {
    transition-property: width;
    transition-duration: var(--transition-normal);
    transition-timing-function: ease;
}

html.hide-top-bar .header {
    top: 0;
}

/* Remontée : topbar visible + hero → menu transparent (miroir de hide-top-bar) */
html.header-over-hero:not(.hide-top-bar) .header,
html:not(.hide-top-bar) .header:not(.scrolled) {
    /* Voile dégradé constant derrière le menu : lisibilité homogène sur toutes les pages,
       quel que soit le hero (vidéo claire ou zone sombre). */
    background: linear-gradient(to bottom, rgba(9, 38, 42, 0.5) 0%, rgba(9, 38, 42, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

html.header-over-hero:not(.hide-top-bar) .header .logo-white,
html:not(.hide-top-bar) .header:not(.scrolled) .logo-white {
    display: block !important;
}

html.header-over-hero:not(.hide-top-bar) .header .logo-color,
html:not(.hide-top-bar) .header:not(.scrolled) .logo-color {
    display: none !important;
}

html.header-over-hero:not(.hide-top-bar) .header .logo-title,
html:not(.hide-top-bar) .header:not(.scrolled) .logo-title {
    color: var(--color-text-light) !important;
}

html.header-over-hero:not(.hide-top-bar) .header .logo-subtitle,
html:not(.hide-top-bar) .header:not(.scrolled) .logo-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.header-over-hero:not(.hide-top-bar) .header .nav-links a,
html:not(.hide-top-bar) .header:not(.scrolled) .nav-links a {
    color: rgba(255, 255, 255, 0.95);
}

html.header-over-hero:not(.hide-top-bar) .header .hamburger,
html.header-over-hero:not(.hide-top-bar) .header .hamburger::before,
html.header-over-hero:not(.hide-top-bar) .header .hamburger::after,
html:not(.hide-top-bar) .header:not(.scrolled) .hamburger,
html:not(.hide-top-bar) .header:not(.scrolled) .hamburger::before,
html:not(.hide-top-bar) .header:not(.scrolled) .hamburger::after {
    background-color: var(--color-text-light);
}

.header.scrolled,
html.hide-top-bar .header,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(16, 42, 44, 0.1);
    padding: var(--spacing-sm) 0;
}

.header.scrolled .logo-white,
html.hide-top-bar .header .logo-white,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .logo-white {
    display: none;
}

.header.scrolled .logo-color,
html.hide-top-bar .header .logo-color,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .logo-color {
    display: block;
}

.header.scrolled .logo-title,
html.hide-top-bar .header .logo-title,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .logo-title {
    color: var(--color-primary-dark);
}

.header.scrolled .logo-subtitle,
html.hide-top-bar .header .logo-subtitle,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .logo-subtitle {
    color: var(--color-text-muted);
}

.header.scrolled .nav-links a,
html.hide-top-bar .header .nav-links a,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .nav-links a {
    color: var(--color-text-main);
}

.header.scrolled .hamburger,
.header.scrolled .hamburger::before,
.header.scrolled .hamburger::after,
html.hide-top-bar .header .hamburger,
html.hide-top-bar .header .hamburger::before,
html.hide-top-bar .header .hamburger::after,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .hamburger,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .hamburger::before,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .hamburger::after {
    background-color: var(--color-primary-dark);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 44px;
    min-height: 44px;
    /* Le logo ne se laisse pas compresser par la nav (7 pôles) : évite le
       retour à la ligne de « Centre Social » qui rendait le header trop haut. */
    flex-shrink: 0;
    z-index: 1001;
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: none;
}

.logo-color {
    display: none;
}

.header.scrolled .logo-white {
    display: none;
}

.header.scrolled .logo-color {
    display: block;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.1;
    white-space: nowrap;
    transition: none;
}

.logo-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    transition: none;
}

.header.scrolled .logo-title {
    color: var(--color-primary-dark);
}

.header.scrolled .logo-subtitle {
    color: var(--color-text-muted);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-links a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    padding: var(--spacing-sm) 0;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
}

.header.scrolled .nav-links a {
    color: var(--color-text-main);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.header.scrolled .nav-links a:hover {
    color: var(--color-secondary);
}

/* Lien de navigation actif (aria-current="page") */
.nav-links a[aria-current="page"]::after {
    width: 100%;
}

.header.scrolled .nav-links a[aria-current="page"] {
    color: var(--color-secondary);
}

.header .nav-links .nav-dropdown__menu a,
html.header-over-hero:not(.hide-top-bar) .header .nav-links .nav-dropdown__menu a,
html:not(.hide-top-bar) .header:not(.scrolled) .nav-links .nav-dropdown__menu a,
body:not(:has(main .hero, section.hero, section.page-hero, section.ra-hero)) .header .nav-links .nav-dropdown__menu a {
    color: var(--color-text-main) !important;
}

.header .nav-links .nav-dropdown__menu a:hover,
.header .nav-links .nav-dropdown__menu a:focus-visible,
.header .nav-links .nav-dropdown__menu a[aria-current="page"] {
    color: var(--color-primary) !important;
}

/* Liens / titres visibles uniquement dans le menu mobile (styles panneau → global-ui.css) */
.nav-link--mobile-only,
.nav-link--mobile-heading {
    display: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header.scrolled .btn-icon {
    color: var(--color-text-main);
    border-color: rgba(0, 0, 0, 0.1);
}

.header.scrolled .btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    width: 44px;
    height: 44px;
    padding: 10px;
    position: relative;
    border-radius: var(--radius-sm);
}

.hamburger,
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    height: 2px;
    background-color: var(--color-text-light);
    transition: transform 0.25s ease-in-out, background-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.header.scrolled .hamburger,
.header.scrolled .hamburger::before,
.header.scrolled .hamburger::after {
    background-color: var(--color-primary-dark);
}

.mobile-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.hamburger {
    left: 10px;
    right: 10px;
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger::before,
.hamburger::after {
    left: 0;
    right: 0;
    width: auto;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Menu mobile ouvert : transformation en X */
body.nav-open .hamburger {
    background-color: transparent !important;
}

body.nav-open .hamburger::before {
    transform: translateY(8px) rotate(45deg);
}

body.nav-open .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative;
    /* Plafonné : plein écran sur petits écrans, pas de grand vide sur grand écran.
       Le hero grandit si le contenu dépasse (pas de rognage). */
    min-height: min(100svh, 800px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: calc(90px + var(--top-bar-height));
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    overflow: visible;
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        justify-content: flex-start;
        padding-top: calc(80px + var(--top-bar-height));
    }
}

/* Masquer uniquement le dépassement horizontal du hero */
.hero-background {
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index retiré : l'ordre DOM (background avant container) suffit.
       z-index:-1 sans stacking context sur .hero passait sous le fond du <body>. */
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero-poster-overlay {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    z-index: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

/* Fade-out déclenché par initHeroVideoFlash() dans main.js quand la vidéo joue */
.hero-poster-overlay--hidden {
    opacity: 0;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay-gradient);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

.hero-container--single {
    grid-template-columns: minmax(0, 42rem);
    justify-content: flex-start;
}

/* Accueil : texte gauche + barre stats droite */
.page-home .hero-container {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
}

@media (max-width: 1024px) {
    .page-home .hero-container {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .page-home .hero-stats.home-hero-stats-strip.hero-stats--embed {
        justify-self: center;
        max-width: min(100%, 38rem);
        margin-inline: auto;
        margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
    }
}

.page-home .hero-values {
    margin-bottom: var(--spacing-lg);
}

.page-home .hero-partners {
    margin-top: clamp(0.2rem, 1vw, 0.45rem);
    padding-top: clamp(0.6rem, 1.8vw, 1.05rem);
}

/* ── Barre chiffres clés accueil (glass horizontal) ── */
/* Barre stats hero accueil — layout capture : chiffre en haut, icone+label en bas */
.page-home .hero-stats.home-hero-stats-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: clamp(1.1rem, 2.8vw, 1.7rem) clamp(0.8rem, 2.2vw, 1.3rem);
    border-radius: clamp(1.25rem, 4vw, 2.25rem);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(24px) saturate(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.page-home .hero-stats.home-hero-stats-strip.hero-stats--embed {
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: min(100%, 38rem);
}

/* Chaque stat : colonne — chiffre haut, icône+label bas */
.page-home .hero-stats.home-hero-stats-strip .stat-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(0.4rem, 1.2vw, 0.65rem);
    padding: clamp(0.3rem, 1vw, 0.55rem) clamp(0.6rem, 1.8vw, 1rem);
}

/* Ligne du chiffre : number + symbole côte à côte */
.page-home .hero-stats.home-hero-stats-strip .stat-figures {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.12em;
    line-height: 1;
}

.page-home .hero-stats.home-hero-stats-strip .stat-number {
    font-size: clamp(1.7rem, 3.8vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.page-home .hero-stats.home-hero-stats-strip .stat-plus,
.page-home .hero-stats.home-hero-stats-strip .stat-suffix {
    font-size: clamp(0.88rem, 2vw, 1.05rem);
    font-weight: 700;
    color: var(--color-stat-lime, #c8e035);
    line-height: 1;
}

/* Ligne du bas : icône + libellé côte à côte */
.page-home .hero-stats.home-hero-stats-strip .stat-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.45rem, 1.3vw, 0.7rem);
    min-width: 0;
}

.page-home .hero-stats.home-hero-stats-strip .stat-icon {
    flex-shrink: 0;
    width: clamp(36px, 6.5vw, 44px);
    height: clamp(36px, 6.5vw, 44px);
    border-radius: 10px;
    background: linear-gradient(150deg, #ffb300 0%, #f07000 100%);
    box-shadow: 0 3px 10px rgba(240, 112, 0, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 2.4vw, 1.1rem);
    color: #fff;
}

.page-home .hero-stats.home-hero-stats-strip .stat-label {
    font-size: clamp(0.7rem, 1.5vw, 0.82rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.35;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
    min-width: 0;
}

.page-home .hero-stats.home-hero-stats-strip .stat-divider {
    width: 1px;
    flex-shrink: 0;
    align-self: center;
    height: clamp(3rem, 8vw, 4.5rem);
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    margin-inline: 0;
}

@media (max-width: 639px) {

    /* Hero accueil : démarrer le contenu sous le header sticky, hauteur naturelle */
    .page-home .hero {
        min-height: auto;
        justify-content: flex-start;
        padding-top: calc(var(--header-offset) + 1.875rem);
        padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
    }

    /* Épuration mobile : masquer la rangée de valeurs (icônes Solidarité/…) */
    .page-home .hero-values {
        display: none;
    }

    .page-home .hero-title {
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
    }

    .page-home .hero-description {
        margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
    }

    .page-home .hero-stats.home-hero-stats-strip {
        padding: 1rem 0.6rem;
        border-radius: 1.1rem;
    }

    /* Stat : revenir en ligne (icône gauche, contenu droite) sur mobile */
    .page-home .hero-stats.home-hero-stats-strip .stat-item {
        flex-direction: row;
        align-items: center;
        gap: 0.38rem;
        padding: 0.2rem 0.35rem;
    }

    /* Chiffres : colonne (number / symbol) */
    .page-home .hero-stats.home-hero-stats-strip .stat-figures {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.04em;
    }

    .page-home .hero-stats.home-hero-stats-strip .stat-number {
        font-size: clamp(1.15rem, 5vw, 1.45rem);
    }

    .page-home .hero-stats.home-hero-stats-strip .stat-plus,
    .page-home .hero-stats.home-hero-stats-strip .stat-suffix {
        font-size: clamp(0.65rem, 2.6vw, 0.8rem);
    }

    /* Meta : icône + libellé en colonne sur mobile */
    .page-home .hero-stats.home-hero-stats-strip .stat-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.22rem;
        min-width: 0;
        flex: 1 1 0;
    }

    .page-home .hero-stats.home-hero-stats-strip .stat-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    .page-home .hero-stats.home-hero-stats-strip .stat-label {
        font-size: clamp(0.58rem, 2.2vw, 0.68rem);
        line-height: 1.2;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
        hyphens: none;
        word-break: normal;
        overflow-wrap: normal;
    }

    .page-home .hero-stats.home-hero-stats-strip .stat-divider {
        height: clamp(2.4rem, 7vw, 3rem);
    }
}

/* Partenaires intégrés au hero (pleine largeur sous contenu + stats) */
.hero-partners {
    position: relative;
    z-index: 2;
    margin-top: clamp(0.5rem, 2vw, 1.25rem);
    padding-top: clamp(1rem, 2.5vw, 1.75rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
}

.hero-partners__marquee-wrap {
    --hero-partners-fade: clamp(28px, 7vw, 88px);
    position: relative;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
    padding-block: 0.25rem;
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0,
            rgba(0, 0, 0, 0.12) calc(var(--hero-partners-fade) * 0.35),
            rgba(0, 0, 0, 0.65) calc(var(--hero-partners-fade) * 0.72),
            #000 var(--hero-partners-fade),
            #000 calc(100% - var(--hero-partners-fade)),
            rgba(0, 0, 0, 0.65) calc(100% - var(--hero-partners-fade) * 0.72),
            rgba(0, 0, 0, 0.12) calc(100% - var(--hero-partners-fade) * 0.35),
            transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0,
            rgba(0, 0, 0, 0.12) calc(var(--hero-partners-fade) * 0.35),
            rgba(0, 0, 0, 0.65) calc(var(--hero-partners-fade) * 0.72),
            #000 var(--hero-partners-fade),
            #000 calc(100% - var(--hero-partners-fade)),
            rgba(0, 0, 0, 0.65) calc(100% - var(--hero-partners-fade) * 0.72),
            rgba(0, 0, 0, 0.12) calc(100% - var(--hero-partners-fade) * 0.35),
            transparent 100%);
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
}

.hero-partners__track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    will-change: transform;
    animation: hero-partners-scroll 48s linear infinite;
}

/* Logos partenaires du héros — posés directement sur la photo, sans cartouche blanc.
   Un halo clair assure la lisibilité des logos sombres sur le fond photographique. */
.hero-partners__logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 10vw, 138px);
    height: clamp(54px, 6vw, 72px);
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
}

.hero-partners__logo-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.7)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
}

.hero-partners__track:hover {
    animation-play-state: paused;
}

@keyframes hero-partners-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--hero-partners-shift, -50%));
    }
}

.hero-partners__header {
    margin-bottom: var(--spacing-sm);
}

.hero-partners .badge-blue {
    margin-bottom: var(--spacing-sm);
}

.hero-partners .title-ensemble {
    color: var(--color-text-light);
    font-size: clamp(1.65rem, 3.5vw, 2.65rem);
    margin-bottom: 0;
}

.hero-partners .partners-marquee {
    padding: var(--spacing-md) 0;
}

.hero-partners .partners-marquee::before {
    background: linear-gradient(to right, rgba(16, 42, 44, 0.98) 0%, transparent 100%);
}

.hero-partners .partners-marquee::after {
    background: linear-gradient(to left, rgba(16, 42, 44, 0.98) 0%, transparent 100%);
}

.hero-partners .partners-text-row p {
    color: rgba(255, 255, 255, 0.78);
}

.hero-content {
    color: var(--color-text-light);
    max-width: 650px;
}

.badge-wrapper {
    margin-bottom: var(--spacing-lg);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-title {
    font-size: clamp(2rem, 3.75vw, 3.125rem);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.5px;
}

.hero-description {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-md);
    max-width: min(35rem, 100%);
}

.hero-description--sm {
    font-size: 0.95rem;
}

.hero-description__link {
    color: var(--color-surface, #fff);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    row-gap: var(--spacing-md);
    margin-bottom: calc(var(--spacing-xxl) + var(--spacing-sm));
}

.value-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    transition:
        transform var(--transition-fast) ease,
        color var(--transition-fast) ease;
}

a.value-item:hover {
    transform: translateY(-3px);
    color: #ffffff;
}

.value-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition:
        background var(--transition-fast) ease,
        box-shadow var(--transition-fast) ease,
        transform var(--transition-fast) ease;
}

a.value-item:hover .value-icon {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

/* Hero accueil : parcours, horaires, hiérarchie des CTA (aligné héros internes) */
.hero-practical {
    margin: 0 0 var(--spacing-md);
    max-width: 38rem;
}

.hero-practical__inner {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-practical__inner p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.hero-practical__inner p+p {
    margin-top: 0.45rem;
}

.hero-practical__strong {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
}

.hero-practical a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.hero-practical a:hover {
    color: #fff;
}

.hero-cta-group {
    margin-bottom: var(--spacing-md);
}

.hero-cta-label {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.hero-cta-hint {
    margin: 0.85rem 0 0;
    max-width: 36rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.hero-cta-hint a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.hero-cta-hint a:hover {
    color: #fff;
}

.hero-btn-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    line-height: 1.2;
    min-height: 3.25rem;
}

.hero-btn-stack__main {
    font-size: 1.05rem;
    font-weight: 700;
}

.hero-btn-stack__sub {
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.02em;
}

/* Glass Panel Stats */
.glass-panel {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number,
.stat-plus,
.stat-suffix {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.stat-number--text-sm {
    font-size: 1rem;
    letter-spacing: 0;
}

.stat-number--text-lg {
    font-size: 1.1rem;
    letter-spacing: 0;
}

.stat-plus,
.stat-suffix {
    color: var(--color-secondary);
}

/* Sur mobile, valeur + unité sur la même ligne (ex : 100%) */
@media (max-width: 640px) {
    .stat-content {
        display: block;
    }

    .stat-number,
    .stat-plus,
    .stat-suffix {
        display: inline;
    }

    .stat-label {
        display: block;
        margin-top: 0.15rem;
    }
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.stat-divider {
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.scroll-indicator {
    position: absolute;
    bottom: clamp(2.25rem, 5vw, 3.25rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: bounce 2s infinite;
}

@media (max-width: 767px) {
    .scroll-indicator {
        display: none;
    }
}

.scroll-indicator__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: white;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.scroll-indicator__btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
}

.scroll-indicator__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* ==========================================================================
   Sections & Layout
   ========================================================================== */
.section {
    /* Aération fluide : entre 3rem et 6rem selon la largeur d'écran.
       Les sections qui ont besoin d'un rythme spécifique (acces-rapide,
       engagement, chiffres…) le redéfinissent explicitement après. */
    padding: var(--section-py) 0;
    position: relative;
}

.bg-light {
    background:
        radial-gradient(circle at 12% 8%, rgba(211, 75, 43, 0.08), transparent 28rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(235, 243, 241, 0.94) 100%),
        var(--color-bg-soft);
}

.bg-white-pure {
    background: #ffffff;
}

.bg-cream {
    background:
        radial-gradient(circle at 86% 14%, rgba(10, 69, 72, 0.08), transparent 26rem),
        linear-gradient(180deg, #fffaf4 0%, #f7efe6 100%);
}

.bg-teal-mist {
    background:
        radial-gradient(circle at 16% 18%, rgba(216, 168, 51, 0.14), transparent 24rem),
        linear-gradient(135deg, rgba(236, 247, 246, 0.98) 0%, rgba(255, 255, 255, 0.92) 52%, rgba(234, 243, 240, 0.96) 100%);
}

.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    background-image: linear-gradient(100deg, #c2603a 0%, #b07d15 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

.section-subtitle::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    flex-shrink: 0;
}

.section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    color: var(--color-primary-dark);
    text-wrap: balance;
    line-height: 1.2;
}

.section-text {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.section-description {
    font-size: var(--font-scale-lead);
    color: var(--color-text-muted);
    max-width: min(38.75rem, 100%);
    margin: 0 auto;
    line-height: 1.75;
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: var(--spacing-sm);
}

.mt-3 {
    margin-top: var(--spacing-md);
}

.mt-4 {
    margin-top: var(--spacing-lg);
}

.mt-5 {
    margin-top: var(--spacing-xl);
}

/* Mission Section */
.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

.mission-image {
    position: relative;
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-lg);
}

.rounded-image {
    border-radius: var(--radius-lg);
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.image-accent {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    z-index: 1;
}

/* ----- Mission list modernisée : items avec check-icon en squircle, hover subtle ----- */
.mission-list {
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
    padding: 0;
}

.mission-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 1rem;
    color: var(--color-text-main);
    font-weight: 500;
    line-height: 1.5;
    padding: 0.65rem 0.85rem;
    background: rgba(10, 69, 72, 0.035);
    border: 1px solid rgba(10, 27, 29, 0.05);
    border-radius: 0.85rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mission-list li:hover {
    background: rgba(10, 69, 72, 0.06);
    border-color: rgba(10, 69, 72, 0.12);
    transform: translateX(2px);
}

.mission-list i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(10, 69, 72, 0.12);
    color: var(--color-primary);
    font-size: 0.85rem;
    margin-top: 0.1rem;
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
}

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

.btn-outline-hero {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.5em;
}

.btn-outline-hero:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.9);
    color: white;
}

.btn-outline-hero:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Services Section Carousel */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
    padding: var(--spacing-sm) 5px;
    /* prevent shadow clipping */
}

.carousel-track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    color: var(--color-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-fast);
    z-index: 10;
}

.carousel-btn:hover {
    background: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .carousel-btn {
        display: none;
    }

    .carousel-track-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--spacing-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .carousel-track-container::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .carousel-track {
        gap: var(--spacing-md);
    }

    .service-card {
        scroll-snap-align: start;
        flex: 0 0 85% !important;
    }
}

.service-card {
    flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
    min-width: 280px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 1024px) {
    .service-card {
        flex: 0 0 calc(50% - var(--spacing-lg) / 2);
    }
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background-color: var(--color-bg-soft);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .card-image img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(5, 51, 51, 0.8) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--spacing-md);
}

.service-card:hover .card-overlay {
    opacity: 1;
}

.btn-circular {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover .btn-circular {
    transform: translateY(0);
}

.card-content {
    padding: var(--spacing-lg);
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-bg);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-top: -48px;
    /* Pulls it up over the image */
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    border: 4px solid var(--color-surface);
}

.card-content h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-dark);
}

.card-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.card-category {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

.card-meta {
    list-style: none;
    padding: 0;
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(10, 69, 72, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-meta li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.card-meta li i {
    color: var(--color-primary);
    width: 14px;
    flex-shrink: 0;
}

/* Responsive for Sections */
@media (max-width: 992px) {
    .mission-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .image-accent {
        display: none;
    }
}

/* Agenda Section */
.agenda-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.agenda-card {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    border-left: 4px solid var(--color-secondary);
}

.agenda-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.agenda-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding-right: var(--spacing-md);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-primary-dark);
}

.date-day {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.date-month {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agenda-content {
    flex-grow: 1;
    padding: 0 var(--spacing-md);
}

.agenda-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 1px;
}

.agenda-title {
    font-size: 1.125rem;
    color: var(--color-text-main);
    margin: 4px 0;
}

.agenda-time {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.agenda-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.agenda-card:hover .agenda-link {
    background: var(--color-secondary);
    color: white;
}

/* Engagement Section */
.engagement-section {
    --hero-overlay-gradient:
        linear-gradient(90deg,
            rgba(5, 37, 39, 0.5) 0%,
            rgba(5, 37, 39, 0.34) 45%,
            rgba(5, 37, 39, 0.26) 70%,
            rgba(5, 37, 39, 0.34) 100%),
        linear-gradient(180deg,
            rgba(4, 26, 28, 0.05) 0%,
            rgba(4, 26, 28, 0.14) 100%);
    position: relative;
    padding: var(--section-py) 0;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.engagement-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.engagement-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.engagement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay-gradient);
}

/* Bouton contour dans un héros sombre (EngagementSection) : la variante
   primaire (teal sur teal) y est illisible — on passe en contour clair. */
.engagement-section .btn-outline-primary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
}

.engagement-section .btn-outline-primary:hover,
.engagement-section .btn-outline-primary:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
}

.engagement-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.engagement-content :is(h2, p) {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
}

.text-white {
    color: white !important;
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.engagement-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.engagement-paths {
    list-style: none;
    padding: 0;
    margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.75rem;
    max-width: 44rem;
}

.engagement-path {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    font-weight: 500;
    line-height: 1.35;
}

.engagement-path i {
    flex-shrink: 0;
    color: var(--color-accent, #e8b923);
    font-size: 1.05rem;
    opacity: 0.95;
}

/* ==========================================================================
   Accès Rapide Section
   ========================================================================== */
.acces-rapide-section {
    background: linear-gradient(180deg, #f8faf9 0%, #eef4f2 100%);
    padding: var(--section-py) 0;
}

.badge-urgent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(228, 106, 37, 0.2);
    color: #e46a25;
    border: 1px solid rgba(228, 106, 37, 0.4);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(228, 106, 37, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(228, 106, 37, 0);
    }
}

.acces-rapide-badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.acces-rapide-badge-dot .pulse-dot {
    flex-shrink: 0;
}

.acces-rapide-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-family: var(--font-heading);
    color: var(--color-text-main);
    font-weight: 800;
    margin-bottom: 0;
}

.acces-rapide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

/* ----- Card verticale moderne : icône → titre → desc → CTA ----- */
.acces-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid rgba(10, 27, 29, 0.07);
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
    color: var(--color-text-main);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.acces-card:hover {
    transform: translateY(-4px);
    border-color: rgba(10, 27, 29, 0.14);
    box-shadow: 0 14px 36px rgba(16, 42, 44, 0.09);
}

.acces-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: transform 0.25s ease;
}

.acces-card:hover .acces-card__icon {
    transform: scale(1.05) rotate(-3deg);
}

.acces-card--rdv .acces-card__icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.acces-card--droits .acces-card__icon {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.acces-card--numerique .acces-card__icon {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

.acces-card--phone .acces-card__icon {
    background: rgba(228, 106, 37, 0.12);
    color: #c2410c;
}

.acces-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.acces-card__desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.acces-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

.acces-card__cta i {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.acces-card:hover .acces-card__cta i {
    transform: translateX(4px);
}

/* ----- Carte téléphone : featured avec subtle gradient + numéro mis en évidence ----- */
.acces-card--featured {
    background: linear-gradient(180deg, #fff 0%, rgba(228, 106, 37, 0.06) 100%);
    border-color: rgba(228, 106, 37, 0.18);
}

.acces-card__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c2410c;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.acces-card__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c2410c;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.3);
    }
}

.acces-card__phone-num {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #c2410c;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1;
}

.acces-card__phone-hours {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

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

@media (max-width: 768px) {
    .acces-rapide-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Je Suis Section (Profils Usagers)
   ========================================================================== */
.je-suis-section {
    background: var(--color-bg);
}

.je-suis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.profil-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-main);
    border-left: 4px solid var(--accent, var(--color-primary));
    box-shadow: 0 10px 30px rgba(16, 42, 44, 0.05);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.profil-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent, var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.profil-card:hover::after {
    transform: scaleX(1);
}

.profil-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(10, 69, 72, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f9 100%);
}

.profil-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent, var(--color-primary)) 15%, transparent);
    color: var(--accent, var(--color-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.profil-card h3 {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.profil-card h3 strong {
    font-size: 1.35rem;
    color: var(--color-primary-dark);
    font-weight: 800;
    font-family: var(--font-heading);
    display: block;
    margin-bottom: 0.25rem;
}

.profil-card>p {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.profil-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent, var(--color-primary));
    margin-top: auto;
    padding-top: var(--spacing-md);
    transition: gap 0.2s ease;
}

.profil-card:hover .profil-card__cta {
    gap: 0.8rem;
}

@media (min-width: 1025px) {
    .je-suis-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .je-suis-grid>* {
        grid-column: span 2;
    }

    /* 7 cartes : dernière centrée sur la 3e ligne */
    .je-suis-grid> :nth-child(7) {
        grid-column: 3 / 5;
    }
}

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

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

/* Accueil — impact & grille pôles (DA institutionnelle proximité) */
.home-impact-section {
    padding-top: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
    background: var(--color-bg-soft);
}

.home-impact-intro {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto var(--spacing-xl);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.home-impact-intro a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.home-impact-intro a:hover {
    color: var(--color-secondary);
}

.home-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: var(--spacing-lg);
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    list-style: none;
}

.home-impact-grid--single {
    grid-template-columns: 1fr;
    max-width: 22rem;
}

.home-impact-item {
    padding: var(--spacing-md);
}

.home-impact-item strong {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 2.65rem);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.home-impact-item span {
    font-size: 0.97rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.home-poles-section .section-description {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.home-poles-section {
    overflow: visible;
}

.home-poles-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: start;
    overflow: visible;
}

@media (min-width: 640px) {
    .home-poles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .home-poles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Pattern Raffinato : 1 col pleine → 2 cols → 1 col pleine → 2 cols */
    .home-poles-grid .profil-card:nth-child(3n+1) {
        grid-column: 1 / -1;
    }
}

.home-poles-grid .profil-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    scroll-margin-top: var(--current-anchor-offset, var(--current-header-bottom, var(--header-offset)));
}

.home-poles-grid .profil-card__cta {
    flex-shrink: 0;
}

.home-poles-grid .profil-card h3,
.home-poles-grid .profil-card>p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.home-poles-grid .profil-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 639px) {
    .home-poles-grid .profil-card {
        padding: clamp(1.15rem, 4vw, var(--spacing-xl));
        /* Ombre plus courte : évite l’effet de carte « coupée » avec overflow-x: clip sur html */
        box-shadow: 0 6px 20px rgba(16, 42, 44, 0.07);
    }

    .home-poles-grid .profil-card h3 strong {
        font-size: clamp(1.15rem, 4.5vw, 1.35rem);
    }

    .home-poles-grid .profil-card>p {
        font-size: 1rem;
    }

    .home-poles-grid .profil-card__cta {
        line-height: 1.35;
    }
}

.profil-card__age {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.8;
}

.home-pole-card--primary {
    --accent: var(--color-primary);
}

.home-pole-card--secondary {
    --accent: var(--color-secondary-brand);
}

.home-pole-card--accent {
    --accent: var(--color-accent);
}

/* Jaune charte : bordure conservée, liens lisibles sur fond blanc */
.home-pole-card--accent .profil-card__cta,
a.home-pole-card--accent .profil-card__cta,
.profil-card--famille .profil-card__cta {
    color: var(--color-primary-dark);
}

.home-pole-card--accent:hover .profil-card__cta,
.profil-card--famille:hover .profil-card__cta {
    color: var(--color-secondary);
}

.home-pole-card--accent .profil-card__icon {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface));
}

.home-poles-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: var(--spacing-xl);
    max-width: 40rem;
    margin-inline: auto;
}

.home-poles-section .home-poles-actions .btn-outline-primary {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    background-color: var(--color-surface);
    font-weight: 700;
}

.home-poles-section .home-poles-actions .btn-outline-primary:hover,
.home-poles-section .home-poles-actions .btn-outline-primary:focus-visible {
    background: var(--color-primary-dark);
    color: var(--color-text-light);
    border-color: var(--color-primary-dark);
}

@media (max-width: 639px) {
    .home-poles-actions {
        flex-direction: column;
        align-items: stretch;
        /* use calc to never exceed viewport regardless of margin resolution */
        width: min(100%, 22rem);
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
        padding-inline: clamp(0.5rem, 4vw, 1.25rem);
        margin-inline: auto;
    }

    .home-poles-actions .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        white-space: normal;
        /* allow text to wrap if needed */
        text-align: center;
    }
}

.partners-section__lead {
    margin-top: 0.85rem;
}

/* Partners Section */
.partners-section {
    padding-bottom: var(--spacing-xxl);
}

.partners-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: var(--spacing-lg) 0;
}

/* Masque de dégradé pour adoucir l'entrée/sortie des logos */
.partners-marquee::before,
.partners-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.partners-marquee::before {
    left: 0;
    background: linear-gradient(to right, #f0f4f4 0%, transparent 100%);
}

.partners-marquee::after {
    right: 0;
    background: linear-gradient(to left, #f0f4f4 0%, transparent 100%);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: scroll-partners 30s linear infinite;
    padding: var(--spacing-md) 0;
}

.partners-track:hover {
    animation-play-state: paused;
}

.partner-card-modern {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    min-width: 160px;
    cursor: pointer;
    overflow: hidden;
}

.partner-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.partner-inline-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition-normal);
}

.partner-card-modern:hover .partner-inline-logo {
    transform: scale(1.05);
}

.partners-text-row p {
    color: var(--color-primary-dark);
    font-size: 0.95rem;
    font-weight: 500;
}

@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 50px));
    }
}

/* Page Le Centre — présentation horizontale des logos (template partagé) */
.page-lecentre .partners-marquee {
    --partner-logo-h: 76px;
    display: block;
}

.page-lecentre .partners-marquee:not(.is-ready) {
    min-height: calc(var(--partner-logo-h) + 2.5rem);
}

.page-lecentre .partner-card-modern {
    flex-shrink: 0;
    width: auto;
    height: auto;
    min-width: 204px;
    min-height: calc(var(--partner-logo-h) + 1.3rem);
    padding: 0.65rem 1rem;
    cursor: default;
}

.page-lecentre .partner-inline-logo {
    height: var(--partner-logo-h);
    width: auto;
    max-width: 186px;
    max-height: var(--partner-logo-h);
    filter: grayscale(40%);
}

.page-lecentre .partner-card-modern:hover {
    transform: translateY(-2px);
}

.page-lecentre .partner-card-modern:hover .partner-inline-logo {
    filter: grayscale(0%);
    transform: none;
}

.page-lecentre .partners-text-row p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
}

.partners-marquee:not(.is-ready) .partners-track:empty {
    min-height: 120px;
}

.page-contact .contact-hero-note {
    font-size: 1rem;
}

.page-contact .contact-hero-note__link {
    color: #fff;
    text-decoration: underline;
}

.page-contact .contact-hero-note__link:hover,
.page-contact .contact-hero-note__link:focus-visible {
    text-decoration-thickness: 2px;
}

.partners-noscript__lead {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    text-align: center;
}

.partners-noscript__list {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
    color: var(--color-text-main);
    text-align: center;
}

.pole-info-card {
    background: var(--color-bg-soft);
    border: 1px solid rgba(11, 79, 79, 0.08);
}

.pole-info-card__inner {
    padding: var(--spacing-xl);
}

.pole-info-card__title {
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-md);
}

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

.pole-checklist__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.pole-checklist__icon {
    color: var(--color-primary);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.faq-stack {
    max-width: 780px;
    margin-inline: auto;
}

.notice-info {
    max-width: 42rem;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-main);
}

@media (max-width: 1024px) {
    .page-lecentre .partners-track {
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .partner-inline-logo {
        height: 45px;
    }

    .partners-text-row p {
        font-size: 0.85rem;
        line-height: 1.8;
    }

    .partners-track {
        gap: 50px;
    }

    .page-lecentre .partners-marquee {
        --partner-logo-h: 64px;
    }

    .page-lecentre .partner-card-modern {
        min-width: min(204px, 72vw);
        min-height: calc(var(--partner-logo-h) + 1.2rem);
    }

    .partners-hero-panel {
        margin: 1.5rem 0;
        padding: 0.4rem 0.75rem;
    }

    @keyframes scroll-partners {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-50% - 25px));
        }
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding-top: var(--spacing-xxl);
    border-top: 3px solid var(--color-secondary);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.4fr;
    gap: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.8;
}

.footer-social__label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--spacing-sm);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* Ancrage `.social-links a` conservé pour les autres pages du site */
.social-links a,
.social-links__item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition-fast);
}

.social-links a:hover,
.social-links__item:hover {
    background: var(--color-secondary);
    transform: translateY(-3px);
}

.social-links a:focus-visible,
.social-links__item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.social-links__item--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.social-links__item--disabled:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}

.footer-title {
    color: white;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-secondary-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(240, 138, 79, 0.5);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-info li {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.contact-info i {
    color: var(--color-secondary);
    margin-top: 5px;
}

.opening-hours h3,
.opening-hours h5 {
    color: white;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* Sur fond clair (blocs contact des pôles), le titre passe en encre foncée */
.program-intro-grid .opening-hours h3,
.program-intro-grid .opening-hours h5 {
    color: var(--color-primary-dark, #063032);
}

.program-intro-grid .opening-hours h3 i,
.program-intro-grid .opening-hours h5 i {
    color: var(--color-secondary, #d36b42);
}

.opening-hours h3 i,
.opening-hours h5 i {
    margin-right: var(--spacing-xs);
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) 0;
    font-size: 0.875rem;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-md);
}

.footer-legal a:hover {
    color: white;
}

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

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .flex-between {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Animations Utilities
   ========================================================================== */
/* Contenu VISIBLE par défaut. L'état masqué initial n'est appliqué que si le JS
   confirme qu'il va animer (html.js-anim, posé par un script inline en <head>).
   Ainsi une erreur JS ne peut plus jamais vider les pages. */
.fade-up {
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in {
    transition: opacity 0.55s ease;
}

html.js-anim .fade-up:not(.is-visible) {
    opacity: 0;
    transform: translateY(22px);
}

html.js-anim .fade-in:not(.is-visible) {
    opacity: 0;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Filet de sécurité : si le JS d'animation n'a pas démarré (classe anim-ready
   absente), un timeout en <head> pose anim-failsafe et tout redevient visible. */
html.anim-failsafe .fade-up,
html.anim-failsafe .fade-in {
    opacity: 1 !important;
    transform: none !important;
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-values {
        justify-content: center;
    }

    .hero-ctas {
        justify-content: center;
    }

    .glass-panel {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stat-divider {
        width: 1px;
        height: auto;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%);
    }
}

@media (max-width: 1024px) {

    .nav-links,
    .nav-actions .btn {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .a11y-toolbar__toggle--nav-mobile {
        width: 44px;
        min-height: 44px;
    }

    .navbar {
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .logo {
        flex: 1;
        min-width: 0;
    }

    .mobile-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Panneau mobile modernisé → public/css/global-ui.css */
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.2rem);
    }

    .glass-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stat-item {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .stat-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%);
    }
}

/* Héros avec chiffres clés (accueil, pôles, etc.) — petites hauteurs (ex. 390–700) : stats en ligne +
   premier écran tenu sans scroll lorsque bandeau partenaires présent */
/* Tablette / grand mobile (541-1024px) : stats en ligne horizontale pour eviter
   que le panel (~580px) depasse le contenu hero lorsqu'ils s'empilent en colonne */
@media (min-width: 541px) and (max-width: 1024px) {
    section.hero:has(.hero-stats) .hero-stats.glass-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
        padding: 0.85rem 1rem;
        max-width: none;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.25rem 0.5rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-divider {
        display: block;
        width: 1px;
        height: auto;
        min-height: 3rem;
        align-self: stretch;
        flex-shrink: 0;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%);
    }

    section.hero:has(.hero-stats) .hero-stats .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-number,
    section.hero:has(.hero-stats) .hero-stats .stat-plus,
    section.hero:has(.hero-stats) .hero-stats .stat-suffix {
        font-size: 1.6rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-label {
        font-size: 0.8rem;
        line-height: 1.3;
        text-align: center;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-content {
        min-width: 0;
        text-align: center;
    }
}

/* Stats hero : mise en ligne sur TOUS les mobiles (pas seulement les petits ecrans) */
@media (max-width: 540px) {
    section.hero:has(.hero-stats) .hero-stats.glass-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
        padding: 0.65rem 0.5rem;
        max-width: none;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.15rem 0.25rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-divider {
        display: block;
        width: 1px;
        height: auto;
        min-height: 2.5rem;
        align-self: stretch;
        flex-shrink: 0;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%);
    }

    section.hero:has(.hero-stats) .hero-stats .stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-number,
    section.hero:has(.hero-stats) .hero-stats .stat-plus,
    section.hero:has(.hero-stats) .hero-stats .stat-suffix {
        font-size: 1.15rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-label {
        font-size: 0.68rem;
        line-height: 1.3;
        text-align: center;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-content {
        min-width: 0;
        text-align: center;
    }

    /* Réduire le gap entre contenu hero et stats panel sur mobile */
    section.hero:has(.hero-stats) .hero-container {
        gap: 16px;
    }

    /* Réduire les boutons CTA hero sur mobile */
    section.hero:has(.hero-stats) .hero-ctas .btn {
        padding-block: 13px;
        font-size: 1rem;
    }

    section.hero:has(.hero-stats) .hero-ctas {
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Exception : adultes-seniors conserve ses stats masquées sur mobile */
    .page-adultes-seniors section.hero:has(.hero-stats) .hero-stats.glass-panel {
        display: none;
    }
}

/* Héros — épuration mobile + petites tablettes (≤768px).
   Sur téléphones et tablettes en portrait, on retire les éléments secondaires
   ou décoratifs du héro pour faciliter la lecture (moins de charge cognitive,
   héro qui tient à l'écran) :
   - l'encart pratique « Repères utiles » (~47 % de la hauteur ; téléphone et
     contact restent accessibles via la barre du haut et la page Contact) ;
   - les pastilles de valeurs (Écoute / Orientation…) — purement illustratives ;
   - le fil d'Ariane et le badge — redondants et décoratifs à cette taille.
   `display:none` conserve les éléments dans le HTML : le balisage reste lisible
   par les moteurs de recherche. Tout réapparaît au-delà de 768px. */
@media (max-width: 768px) {

    section.hero .hero-practical-panel,
    section.hero .hero-values,
    section.hero .breadcrumb,
    section.hero .badge-wrapper {
        display: none;
    }
}

@media (max-width: 540px) and (max-height: 760px) {
    section.hero:has(.hero-stats) {
        justify-content: flex-start;
        padding-top: calc(62px + var(--top-bar-height));
        padding-bottom: 0.5rem;
        min-height: min(100vh, 100dvh);
    }

    .page-home section.hero:has(.hero-stats) {
        padding-top: calc(var(--header-offset) + 1.875rem);
        min-height: auto;
        padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
    }

    section.hero:has(.hero-stats) .badge-wrapper {
        margin-bottom: var(--spacing-sm);
    }

    section.hero:has(.hero-stats) .badge {
        font-size: 0.78rem;
        padding: 5px 12px;
        line-height: 1.35;
    }

    /* Contenu hero dense : horaires & parcours restent accessibles au scroll */
    section.hero:has(.hero-stats) .hero-practical,
    section.hero:has(.hero-stats) .hero-cta-hint {
        display: none;
    }

    section.hero:has(.hero-stats) .hero-cta-group {
        margin-bottom: var(--spacing-sm);
    }

    section.hero:has(.hero-stats) .hero-cta-label {
        margin-bottom: 0.35rem;
        font-size: 0.72rem;
    }

    section.hero:has(.hero-stats) .hero-btn-stack {
        min-height: 0;
        gap: 0.05rem;
        padding-block: 0.2rem;
    }

    section.hero:has(.hero-stats) .hero-btn-stack__main {
        font-size: 0.92rem;
    }

    section.hero:has(.hero-stats) .hero-btn-stack__sub {
        font-size: 0.7rem;
    }

    section.hero:has(.hero-stats) .hero-description {
        margin-bottom: var(--spacing-sm);
        font-size: 0.98rem;
        line-height: 1.55;
    }

    section.hero:has(.hero-stats) .hero-ctas {
        margin-top: 0.2rem;
        gap: var(--spacing-sm);
    }

    section.hero:has(.hero-stats) .hero-values {
        gap: 0.45rem var(--spacing-md);
        row-gap: 0.35rem;
        margin-bottom: var(--spacing-md);
    }

    section.hero:has(.hero-stats) .value-item {
        font-size: 0.95rem;
    }

    section.hero:has(.hero-stats) .hero-container {
        gap: 0.6rem;
    }

    /*
     * Sous max-width 768px, les .glass-panel passent en colonne (très haut) ;
     * Adultes & Seniors utilise une grille 3 col. — display:flex reprend la main ici.
     */
    section.hero:has(.hero-stats) .hero-stats.glass-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-between;
        gap: 0.3rem;
        padding: 0.5rem 0.55rem;
        text-align: left;
        max-width: none;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-item {
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-divider {
        display: block;
        width: 1px;
        height: auto;
        min-height: 2.4rem;
        align-self: stretch;
        flex-shrink: 0;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%);
    }

    section.hero:has(.hero-stats) .hero-stats .stat-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-number,
    section.hero:has(.hero-stats) .hero-stats .stat-plus,
    section.hero:has(.hero-stats) .hero-stats .stat-suffix {
        font-size: 1.2rem;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-label {
        font-size: 0.68rem;
        line-height: 1.25;
        text-align: left;
    }

    section.hero:has(.hero-stats) .hero-stats .stat-content {
        min-width: 0;
    }

    section.hero:has(.hero-stats) aside.hero-partners {
        margin-top: 0.3rem;
        padding-top: 0.55rem;
    }

    section.hero:has(.hero-stats) .hero-partners__logo-card {
        width: clamp(76px, 22vw, 108px);
        height: clamp(44px, 12vw, 58px);
        padding: 0.35rem 0.55rem;
    }

    section.hero:has(.hero-stats) .hero-partners__logo-card img {
        max-height: 36px;
    }
}

@media (max-width: 480px) and (max-height: 740px) {
    section.hero:has(.hero-stats) .hero-values {
        display: none;
    }

    section.hero:has(.hero-stats) {
        padding-top: calc(56px + var(--top-bar-height));
    }

    .page-home section.hero:has(.hero-stats) {
        padding-top: calc(var(--header-offset) + 1.875rem);
    }

    section.hero:has(.hero-stats) .badge-wrapper {
        margin-bottom: var(--spacing-sm);
    }
}

/* ==========================================================================
   Modernisation transverse
   - Focus visible global, skip-links accessibles
   - Largeur de lecture, ancres avec marge sous header fixe
   - Aération des sections, footer logo, marquee partenaires
   - Préférence "reduced motion"
   ========================================================================== */

/* Focus clavier visible et cohérent partout (la top-bar garde son outline blanc) */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip-links : invisibles tant qu'on n'est pas focus, puis visibles en haut à gauche */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--spacing-md);
    background: var(--color-primary-dark);
    color: var(--color-text-light);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: var(--spacing-md);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.site-back-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    text-decoration: none;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        background var(--transition-fast);
}

.site-back-top:hover,
.site-back-top:focus-visible {
    color: var(--color-text-light);
    background: var(--color-primary-dark);
}

.site-back-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Compense la top-bar + header fixes pour les ancres internes */
section[id],
[id='main-content'] {
    scroll-margin-top: var(--current-anchor-offset, var(--current-header-bottom, var(--header-offset)));
}

/* Largeur de lecture confortable pour les blocs de prose hors grille */
.section-text,
.mission-content p,
.contact-detail__body p,
.synthese-card p,
.gouv-card p,
.timeline-text {
    max-width: var(--prose-max);
}

/* Footer : logo (remplace les style="height:40px" inline) */
.footer-logo-img {
    height: 40px;
    width: auto;
    margin-bottom: var(--spacing-md);
}

/* Conteneur du marquee partenaires (remplace style inline du wrapper) */
.partners-marquee-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Panneau partenaires dans le hero */
.partners-hero-panel {
    margin: 2rem 0;
    padding: 0.5rem 1rem;
}

/* Cible tactile dédiée pour les boutons d'action de la nav (44 px mobile) */
.btn-touch {
    min-height: 44px;
}

@media (hover: none),
(max-width: 900px) {
    .btn-touch {
        min-height: 44px;
    }
}

/* Adoucit les liens dans le footer uniquement (fond sombre) */
.footer .contact-info a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
}

.footer .contact-info a:hover {
    color: var(--color-secondary);
    text-decoration-color: var(--color-secondary);
}

/* Préférence utilisateur : motion réduit
   Désactive animations longues, transforms et fade-up sans casser la mise en page */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .header,
    .header *:not(.nav-links a::after) {
        transition: none !important;
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }

    .fade-up,
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-partners__marquee-wrap {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .partners-track,
    .hero-partners__track,
    .pulse-dot,
    .badge-urgent,
    .scroll-indicator,
    .shine-effect::before {
        animation: none !important;
    }

    .service-card:hover,
    .acces-card:hover,
    .profil-card:hover,
    .synthese-card:hover,
    .gouv-card:hover,
    .timeline-content:hover,
    .partner-card-modern:hover,
    .agenda-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   PAGES INTERNES — CONTACT, INSCRIPTION, AGENDA, ACTUS, ÉQUIPE, BÉNÉVOLAT
   ========================================================================== */

/* Utility — masque visuel mais accessible aux lecteurs d'écran */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Sub-page hero (variante allégée du page-hero de lecentre.html) ===== */
.subpage-hero {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

.subpage-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.subpage-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.subpage-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-gradient);
    z-index: 1;
}

@media (max-width: 768px) {

    /* On mobile, hide the bg image to avoid text bleeding through the overlay */
    .subpage-hero__bg img {
        opacity: 0;
    }

    /* Solid teal bg so the section isn't just white */
    .subpage-hero {
        background: var(--color-primary-dark, #0a4548);
    }
}

.subpage-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--header-offset) + 1.5rem);
    padding-bottom: var(--spacing-xxl);
    max-width: 820px;
}

.subpage-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(232, 185, 35, 0.15);
    border: 1px solid rgba(232, 185, 35, 0.35);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
}

.subpage-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    color: white;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.subpage-hero__title .text-gradient {
    line-height: 1.1;
}

.subpage-hero__desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.subpage-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.page-inscription .hero {
    min-height: clamp(620px, calc(100vh - var(--top-bar-height)), 760px);
}

.page-inscription .hero-background img {
    object-position: center 42%;
}

.page-inscription .gradient-overlay {
    background: var(--hero-overlay-gradient);
}

.page-inscription .hero-title {
    max-width: 13ch;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.adhesion-hero-recap {
    max-width: 62ch;
    margin: 0 0 var(--spacing-md);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 0.6vw + 0.92rem, 1.16rem);
    font-weight: 700;
    line-height: 1.6;
}

.adhesion-hero-recap a,
.page-inscription .hero-description a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.adhesion-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    max-width: 760px;
    margin: 0 0 var(--spacing-lg);
    padding: 0;
}

.adhesion-hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-heading);
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.adhesion-hero-facts i {
    color: var(--color-accent);
}

/* Version mobile épurée : on masque les pastilles de réassurance du hero —
   elles s'empilent et surchargent le hero sur petit écran. L'essentiel (titre,
   description, CTA) reste. */
@media (max-width: 640px) {
    .adhesion-hero-facts {
        display: none !important;
    }
}

.page-inscription .subpage-hero__hint {
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 768px) {
    .subpage-hero {
        min-height: 48vh;
    }

    .subpage-hero__inner {
        padding-top: calc(96px + var(--top-bar-height));
    }

    .page-inscription .hero {
        min-height: auto;
    }

    .page-inscription .breadcrumb {
        display: none;
    }

    .page-inscription .hero-container {
        padding-bottom: 2.25rem;
    }

    .page-inscription .hero-title {
        max-width: none;
    }

    .page-inscription .hero-description {
        margin-bottom: 0.95rem;
    }

    .adhesion-hero-recap {
        margin-bottom: 0.85rem;
        font-size: 0.98rem;
    }

    .adhesion-hero-facts {
        gap: 0.45rem;
        margin-bottom: 1rem;
    }

    .adhesion-hero-facts li {
        min-height: 2rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.88rem;
    }

    .page-inscription .subpage-hero__hint {
        display: none;
    }
}

/* ===== Fil d'Ariane partagé ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-heading);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.breadcrumb i {
    font-size: 0.65rem;
}

.breadcrumb [aria-current='page'] {
    color: var(--color-accent);
}

/* ===== Formulaires ===== */

/* Conteneur d'erreurs de formulaire (remplace style inline) */
.form-errors {
    display: none;
    color: #d32f2f;
    background-color: #fdeaea;
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
}

.form-errors.is-visible {
    display: block;
}

.form-errors__note {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-main);
}

/* Fieldset sans bordure ni padding (remplace style="border:none;padding:0;") */
.form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.form-fieldset .form-label {
    margin-bottom: 0.6rem;
    display: block;
}

/* Note de formulaire sans marge basse (remplace style="margin-bottom:0;") */
.form-note--flush {
    margin-bottom: 0;
}

.form-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(10, 69, 72, 0.06);
}

.form-card__title {
    font-size: 1.4rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.form-card__lead {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-grid--full {
    grid-template-columns: 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--spacing-md);
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary-dark);
}

.form-required {
    color: var(--color-secondary);
    margin-left: 2px;
}

.form-label--upper {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

.form-select--pill {
    border-radius: 2rem;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b4f4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-main);
    background: var(--color-bg);
    border: 2px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
    font-family: var(--font-body);
    line-height: 1.6;
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px rgba(24, 134, 134, 0.15);
}

.form-help {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.form-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    min-height: 44px;
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(10, 69, 72, 0.08);
}

.form-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--color-secondary);
    flex-shrink: 0;
    cursor: pointer;
}

.form-checkbox-group label {
    font-size: 0.9rem;
    color: var(--color-text-main);
    line-height: 1.5;
    cursor: pointer;
}

.form-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border: 2px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-radio-option:hover {
    border-color: var(--color-primary-light);
    background: var(--color-surface);
}

.form-radio-option input[type='radio'] {
    accent-color: var(--color-secondary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.form-radio-option span {
    font-size: 0.95rem;
    color: var(--color-text-main);
    font-weight: 500;
}

.form-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.form-submit {
    padding: 0.85rem 2rem;
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 10px rgba(228, 106, 37, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.form-submit:hover {
    background: var(--color-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.form-submit:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.form-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-message {
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;
    line-height: 1.55;
}

.form-message[hidden] {
    display: none;
}

.form-message--error {
    color: #8a1f17;
    background: #fdeaea;
    border: 1px solid rgba(196, 71, 34, 0.24);
}

.form-message--success {
    color: #164b36;
    background: #e8f6ef;
    border: 1px solid rgba(10, 69, 72, 0.18);
}

.form-card__header {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.form-card__eyebrow {
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.form-card__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 320px;
}

.form-card__pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-soft);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
}

.form-step {
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgba(10, 69, 72, 0.1);
}

.form-step__head {
    margin-bottom: var(--spacing-md);
}

.form-step__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    background: rgba(211, 107, 66, 0.1);
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
}

.form-step__title,
.form-section__title {
    margin: 0 0 0.25rem;
    color: var(--color-primary-dark);
    font-size: 1.15rem;
}

.form-step__desc,
.form-section__desc {
    color: var(--color-text-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.form-fieldset--plain {
    border: 0;
    padding: 0;
}

.form-section {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid rgba(10, 69, 72, 0.1);
}

.form-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
}

.form-upload-area {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.25rem;
    min-height: 148px;
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 2px dashed rgba(10, 69, 72, 0.25);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    transition: var(--transition-fast);
}

.form-upload-area.is-dragover,
.form-upload-area:hover {
    border-color: var(--color-secondary);
    background: rgba(211, 107, 66, 0.06);
}

.form-upload-area input[type='file'] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.form-upload-area__icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: #fff;
    font-size: 1.25rem;
}

.form-upload-area__text {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary-dark);
}

.form-upload-area__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.form-upload-list {
    display: grid;
    gap: 0.5rem;
    margin-top: var(--spacing-md);
}

.form-upload-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid rgba(10, 69, 72, 0.1);
}

.form-upload-file__name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.form-upload-file__size {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.form-upload-file__remove,
.btn-signature-clear,
.form-signature-toolbar button {
    border: 1px solid rgba(10, 69, 72, 0.18);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--color-primary-dark);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 0.45rem 0.75rem;
}

.form-signature-pad {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: var(--spacing-md);
    border-radius: var(--radius-md);
    background: #fff;
    border: 2px solid rgba(10, 69, 72, 0.14);
    touch-action: none;
    user-select: none;
}

.form-signature-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
}

.form-signature-toolbar button.is-active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(10, 69, 72, 0.22);
    background: #fff;
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 800;
    cursor: pointer;
}

.inscription-prep__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--spacing-xxl);
    align-items: center;
}

.inscription-prep__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

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

.inscription-checklist {
    display: grid;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.inscription-checklist__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--spacing-md);
    align-items: start;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid rgba(10, 69, 72, 0.08);
}

.inscription-checklist__item i {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.inscription-checklist__item strong,
.inscription-checklist__item span {
    display: block;
}

.inscription-checklist__item span {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.page-inscription .form-card,
.page-inscription .form-step,
.page-inscription .form-section,
.page-inscription .form-group {
    min-width: 0;
}

.page-inscription .form-card__header,
.page-inscription .form-card__pills,
.page-inscription .form-step,
.page-inscription .form-step__panels,
.page-inscription .form-section,
.page-inscription .form-upload-area,
.page-inscription .form-upload-list,
.page-inscription .form-signature-toolbar,
.page-inscription .form-group--full {
    grid-column: 1 / -1;
}

.page-inscription .form-signature-pad {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 25 / 9;
}

.page-inscription .form-signature-toolbar,
.page-inscription .form-actions {
    flex-wrap: wrap;
}

.page-inscription .form-signature-toolbar button,
.page-inscription .btn-signature-clear,
.page-inscription .btn-pdf,
.page-inscription .form-submit {
    min-height: 44px;
}

.page-inscription .form-signature-toolbar__status {
    flex: 1 1 100%;
}

.page-inscription .form-upload-area {
    min-width: 0;
}

.page-inscription .btn-pdf {
    max-width: 100%;
    white-space: normal;
}

.pagination-meta {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
}

@media (max-width: 600px) {

    .form-grid,
    .form-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: var(--spacing-lg);
    }

    .page-inscription .form-card {
        padding: var(--spacing-md);
    }

    .page-inscription .form-step {
        padding-inline: 0;
    }

    .page-inscription .form-actions>* {
        width: 100%;
    }

    .page-inscription .form-upload-area {
        min-height: 132px;
        padding: var(--spacing-md);
    }

    .page-inscription .form-upload-file {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-inscription .form-upload-file__remove {
        width: 100%;
        min-height: 44px;
    }

    .form-card__header {
        grid-template-columns: 1fr;
    }

    .form-card__header {
        display: grid;
    }

    .form-card__pills {
        justify-content: flex-start;
        max-width: none;
    }

    .form-section {
        padding: var(--spacing-md);
    }
}

/* ===== Mise en page contact 2 colonnes ===== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--spacing-xxl);
    align-items: start;
}

.contact-layout>*,
.contact-info-block,
.contact-detail,
.contact-detail__body {
    min-width: 0;
}

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

/* Bloc d'infos contact (réutilisable) */
.contact-info-block {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(10, 69, 72, 0.06);
}

.contact-info-block .contact-detail:first-of-type {
    padding-top: 0;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid rgba(10, 69, 72, 0.08);
}

.contact-detail:last-child {
    border-bottom: none;
}

.contact-detail__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-detail__body strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-secondary);
    margin-bottom: 0.2rem;
}

.contact-detail__body p,
.contact-detail__body a {
    font-size: 1rem;
    color: var(--color-text-main);
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
}

.contact-detail__body a:hover {
    color: var(--color-secondary);
}

.contact-detail__body .contact-pole-email-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-detail__body .contact-pole-email-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pole-email-item__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.pole-email-item__link {
    font-size: 0.9rem;
    color: var(--color-primary);
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pole-email-item__link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.map-embed {
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.map-embed iframe {
    width: 100%;
    height: 320px;
    border: none;
    display: block;
}

/* ===== Cartes "permanence" (contact / agenda) ===== */
.permanences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}

.permanence-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    border-top: 4px solid var(--color-primary-light);
    transition: var(--transition-normal);
}

.permanence-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.permanence-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    margin-bottom: var(--spacing-md);
}

.permanence-card__day {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 0.4rem;
}

.permanence-card__title {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.permanence-card__hours {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.permanence-card__hours i {
    color: var(--color-primary-light);
}

.permanence-card__desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.permanence-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary-light);
    font-family: var(--font-heading);
}

.permanence-card__note {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.permanence-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.permanence-card__link:hover {
    color: var(--color-secondary-brand);
}

.hero-ctas .btn-sm,
.hero-panel .btn-sm {
    min-height: 44px;
}

.permanences-grid--numerique {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.permanences-numerique-block {
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(10, 69, 72, 0.1);
    scroll-margin-top: calc(var(--header-height, 72px) + var(--top-bar-height, 40px) + 1rem);
}

.permanences-numerique-block__title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
    text-align: center;
}

.permanences-numerique-block__intro {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.permanence-numerique-urgence {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 52rem;
    margin: var(--spacing-lg) auto 0;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    background: rgba(42, 157, 143, 0.08);
    border: 1px solid rgba(42, 157, 143, 0.2);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-primary-dark);
}

.permanence-numerique-urgence i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #2a9d8f;
}

.permanences-numerique-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: var(--spacing-xl);
}

.page-permanences-numerique .permanences-numerique-ctas .btn {
    min-height: 0;
    padding: 0.82rem 1.35rem;
    border-radius: 0.8rem;
    line-height: 1.25;
    box-shadow: none;
}

.page-permanences-numerique .permanences-numerique-ctas .btn-outline-primary {
    border-width: 2px;
}

/* ===== Cartes tarifs adhésion ===== */
.tarifs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--spacing-lg);
}

.tarifs-grid--single {
    max-width: 440px;
    margin-inline: auto;
}

.tarif-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid rgba(10, 69, 72, 0.08);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    display: flex;
    flex-direction: column;
}

.tarif-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.tarif-card--featured {
    border-color: var(--color-secondary);
    box-shadow: 0 12px 28px rgba(228, 106, 37, 0.18);
}

.tarif-card__ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: white;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tarif-card__title {
    font-size: 1.2rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.tarif-card__price {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--color-primary);
    line-height: 1;
    margin: var(--spacing-sm) 0;
}

.tarif-card__price small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
}

.tarif-card__features {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    flex-grow: 1;
}

.tarif-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.tarif-card__features i {
    color: var(--color-primary-light);
    margin-top: 4px;
    flex-shrink: 0;
}

/* ===== Étapes (process) ===== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-xl);
    counter-reset: step;
}

.step-card {
    position: relative;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    text-align: center;
    transition: var(--transition-normal);
}

.step-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.step-card__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: white;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -36px auto var(--spacing-md);
    box-shadow: 0 6px 14px rgba(228, 106, 37, 0.3);
}

.step-card__title {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.step-card p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.cta-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

.prose-narrow {
    max-width: 42rem;
    margin-inline: auto;
}

/* ==========================================================================
   Bénéfices — section "Ce que les habitants trouvent au Centre"
   ========================================================================== */
.benefits-section {
    background: var(--color-bg-soft);
}

.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.temoignage-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-lg);
    position: relative;
}

.temoignage-card::before {
    content: '\201C';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-xl);
    font-size: 4.5rem;
    line-height: 1;
    font-family: var(--font-heading);
    color: var(--color-primary);
    opacity: 0.1;
    pointer-events: none;
}

.temoignage-card--accent {
    background: var(--color-primary);
    border-color: transparent;
}

.temoignage-card--accent .temoignage-quote p {
    color: rgba(255, 255, 255, 0.92);
}

.temoignage-card--accent::before {
    color: white;
    opacity: 0.18;
}

.temoignage-card--accent .temoignage-name {
    color: white;
}

.temoignage-card--accent .temoignage-role {
    color: rgba(255, 255, 255, 0.65);
}

.temoignage-quote {
    margin: 0;
    flex-grow: 1;
}

.temoignage-quote p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-main);
    font-style: italic;
}

.temoignage-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.temoignage-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.temoignage-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.temoignage-role {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

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

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

/* ==========================================================================
   Engagement Stats (chiffres clés dans la section engagement)
   ========================================================================== */
.engagement-stats {
    display: flex;
    justify-content: center;
    gap: clamp(var(--spacing-xl), 6vw, var(--spacing-xxl));
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.engagement-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.engagement-stat-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--color-accent);
    line-height: 1;
}

.engagement-stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    max-width: 140px;
    line-height: 1.4;
}

/* ==========================================================================
   Programme sections — social.html, multimedia.html et pages de service
   ========================================================================== */
.program-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

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

.program-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(10, 69, 72, 0.08);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-family: 'Playfair Display', 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.program-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-lg);
}

.program-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--spacing-md);
}

.program-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: rgba(10, 69, 72, 0.06);
    border: 1px solid rgba(10, 69, 72, 0.14);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-primary);
}

.program-strip__item i {
    color: var(--color-secondary);
    font-size: 0.78rem;
}

.program-media-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin: 0;
}

.program-media-card img,
.program-media-card video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.program-media-card figcaption {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-style: italic;
    line-height: 1.5;
    border-top: 1px solid rgba(10, 69, 72, 0.08);
}

.program-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.program-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    border-top: 3px solid var(--color-primary-light);
    transition: var(--transition-normal);
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.program-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md);
}

.program-card h3 {
    font-size: 1.05rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.program-card p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.program-cta-panel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem);
    background-color: var(--color-primary-dark);
    background-image: var(--program-cta-image, none);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.program-cta-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(16, 42, 44, 0.92) 0%,
            rgba(10, 69, 72, 0.78) 55%,
            rgba(10, 69, 72, 0.5) 100%);
    z-index: -1;
}

.program-cta-panel .section-subtitle {
    color: var(--color-accent);
}

.program-cta-panel .section-title {
    color: white;
}

.program-cta-panel p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
}

.parcours-teaser {
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--spacing-lg);
    background: rgba(10, 69, 72, 0.06);
    border: 1px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-lg);
    text-align: center;
}

.parcours-teaser__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary-dark);
    margin: 0 0 var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.parcours-teaser__label i {
    color: var(--color-secondary, #e46a25);
    opacity: 0.95;
}

/* ===== FAQ accordéon natif (details/summary) — même composant sur tout le site ===== */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.faq-list.ias-faq-modern {
    max-width: 880px;
    margin-top: var(--spacing-xl);
}

.faq-list.ej-faq--wide {
    max-width: 900px;
    margin-top: 3rem;
}

.faq-list.fp-faq-list {
    max-width: 820px;
}

.faq-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.08);
    overflow: hidden;
    transition: var(--transition-normal);
}

.faq-item[open] {
    box-shadow: var(--shadow-md);
    border-color: rgba(10, 69, 72, 0.18);
    background: var(--color-bg-soft);
}

.faq-item summary {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-primary-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    transition: var(--transition-fast);
    background: transparent;
}

.faq-item summary::-webkit-details-marker,
.faq-item summary::marker {
    display: none;
    content: '';
}

.faq-item summary:hover {
    background: rgba(10, 69, 72, 0.04);
}

.faq-item summary:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.faq-item summary::after {
    content: '+';
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 4.2vw, 1.8rem);
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.faq-item[open] summary::after {
    content: '-';
}

/* Réponse : wrapper explicite ou <p> direct sous <details> */
.faq-item__body,
.faq-item>p {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    border-top: 1px solid rgba(10, 69, 72, 0.12);
    background: var(--color-surface);
}

.faq-item__body p {
    margin: 0;
}

.faq-item__body p+p {
    margin-top: var(--spacing-sm);
}

/* ===== Filtres agenda (catégories) ===== */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.agenda-filter-status {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 auto var(--spacing-xl);
    max-width: 42rem;
    line-height: 1.45;
    min-height: 1.45em;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    background: var(--color-surface);
    border: 2px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.filter-chip.is-active,
.filter-chip[aria-pressed='true'] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.filter-chip:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== Cartes événement « riches » (page agenda) ===== */
.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 900px;
}

.event-card {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: var(--spacing-lg);
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 27, 29, 0.07);
    transition: var(--transition-normal);
}

.event-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.event-card__date {
    text-align: center;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    color: var(--color-primary-dark);
}

.event-card__date .day {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.event-card__date .month {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    margin-top: 0.2rem;
}

.event-card__date .year {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.event-card__category {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    background: var(--color-primary);
    padding: 0.18rem 0.7rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.4rem;
}

.event-card__title {
    font-size: clamp(1.3rem, 2.5vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

.event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.event-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.event-card__meta i {
    color: var(--color-primary-light);
}

.event-card__cta {
    align-self: center;
    justify-self: end;
}

.event-card__cta.btn-france-services--sm {
    justify-self: end;
}

@media (max-width: 700px) {
    .event-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .event-card__date {
        max-width: 110px;
        margin: 0 auto;
    }

    .event-card__cta {
        justify-self: center;
    }
}

/* ===== Newsletter horizontale ===== */
.newsletter-band {
    background-color: var(--color-primary-dark);
    background-image:
        linear-gradient(135deg, rgba(16, 42, 44, 0.92) 0%, rgba(10, 69, 72, 0.72) 45%, rgba(11, 58, 60, 0.6) 100%),
        url('/images/poles/actualites-agenda/hero-actualites-agenda.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
}

.newsletter-band__copy {
    min-width: 0;
}

.newsletter-band h2 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.newsletter-band__copy p {
    max-width: 38rem;
}

.newsletter-band p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

.newsletter-form input[type='email'] {
    min-width: min(240px, 100%);
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.newsletter-form input[type='email']:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(232, 185, 35, 0.3);
}

.newsletter-form .form-note {
    flex-basis: 100%;
    margin-top: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
    .newsletter-band {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .newsletter-band__copy p {
        max-width: none;
    }

    .newsletter-form {
        justify-content: center;
    }
}

/* Bannière de confirmation : lisible sur la bande newsletter sombre.
   La base .form-success-banner utilise un texte teal sur fond clair —
   illisible ici. On force un panneau translucide clair + texte blanc. */
.newsletter-band .form-success-banner {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.38);
    border-left-color: var(--color-accent);
    color: #fff;
}

.newsletter-band .form-success-banner::before {
    color: var(--color-accent);
}

/* ===== Cartes article (page actualités) ===== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.articles-grid>li {
    display: flex;
    min-width: 0;
}

.articles-grid>li>.article-card {
    flex: 1;
    width: 100%;
}

.article-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.article-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.article-card:hover .article-card__image img {
    transform: scale(1.06);
}

.article-card__category {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--color-secondary);
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
}

.article-card__body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.article-card__date {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.article-card__date i {
    color: var(--color-primary-light);
}

.article-card__title {
    font-size: 1.15rem;
    color: var(--color-primary-dark);
    line-height: 1.3;
}

.article-card__excerpt {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
}

.article-card__link {
    margin-top: var(--spacing-sm);
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.4rem;
    align-self: flex-start;
}

.article-card__link:hover {
    color: var(--color-secondary-hover);
    gap: 0.6rem;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xxl);
    flex-wrap: wrap;
}

.pagination button,
.pagination a {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 2px solid rgba(10, 69, 72, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.pagination button:hover,
.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .is-current,
.pagination [aria-current='page'] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Cartes membre équipe ===== */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-xl);
}

@media (min-width: 900px) {
    .members-grid--two {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        max-width: 820px;
        margin-inline: auto;
    }

    .members-grid--three {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
}

.staff-pole {
    margin-top: var(--spacing-xxl);
}

.staff-pole:first-of-type {
    margin-top: var(--spacing-md);
}

.staff-pole__title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 var(--spacing-lg);
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(10, 69, 72, 0.15);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.staff-pole__title>i[aria-hidden='true'] {
    color: var(--color-primary);
    font-size: 1.05em;
    opacity: 0.92;
    flex-shrink: 0;
}

.member-card__avatar--direction {
    background: linear-gradient(145deg, #073a3d 0%, #146b6f 100%);
}

.member-card__avatar--admin {
    background: linear-gradient(145deg, #3d4756 0%, #687588 100%);
}

.member-card__avatar--famille,
.member-card__avatar--ej {
    background: linear-gradient(145deg, #b45309 0%, var(--color-secondary) 100%);
}

.member-card__avatar--adultes {
    background: linear-gradient(145deg, #0f766e 0%, #2dd4bf 100%);
}

.member-card__avatar--seniors {
    background: linear-gradient(145deg, #0d9488 0%, #5eead4 100%);
}

.member-card__avatar--numerique {
    background: linear-gradient(145deg, #073a3d 0%, #157a7f 100%);
}

.member-card__initials {
    font-size: clamp(1.45rem, 3.5vw, 1.9rem);
    letter-spacing: 0.06em;
    line-height: 1;
}

.member-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    text-align: center;
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.member-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.member-card__avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2rem;
    overflow: hidden;
    border: 4px solid var(--color-bg);
    box-shadow: 0 4px 12px rgba(10, 69, 72, 0.15);
}

.member-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-card__name {
    font-size: 1.15rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.2rem;
}

.member-card__role {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

.member-card__bio {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.member-card__contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
}

.member-card__contact:hover {
    color: var(--color-secondary);
}

/* ===== Témoignages bénévoles ===== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

.testimonial-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(10, 69, 72, 0.06);
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: var(--spacing-lg);
    font-family: var(--font-heading);
    font-size: 5rem;
    color: var(--color-secondary);
    line-height: 1;
    opacity: 0.85;
}

.testimonial-card__quote {
    font-size: 1rem;
    color: var(--color-text-main);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(10, 69, 72, 0.08);
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.testimonial-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 0.95rem;
    line-height: 1.2;
}

.testimonial-card__role {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ===== Bénéfices/missions (cartes simples icone + titre + texte) ===== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-xl);
}

.benefit-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10, 69, 72, 0.06);
    text-align: center;
    transition: var(--transition-normal);
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.benefit-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto var(--spacing-md);
    box-shadow: 0 6px 14px rgba(228, 106, 37, 0.25);
}

.benefit-card h3 {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.benefit-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* ===== Hero vidéo — Adultes & Seniors ===== */

/* Image de secours : couvre tout le hero-background en attendant la vidéo */
.page-adultes-seniors .as-hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}

/* Vidéo hero : par-dessus le poster dès qu'elle est prête */
.page-adultes-seniors .as-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 1;
}

/* Le gradient reste au-dessus de la vidéo */
.page-adultes-seniors .hero-background .gradient-overlay {
    z-index: 2;
}

/* prefers-reduced-motion : masquer la vidéo, laisser le poster */
@media (prefers-reduced-motion: reduce) {
    .page-adultes-seniors .as-hero-video {
        display: none !important;
    }
}

html.a11y-reduce-motion .page-adultes-seniors .as-hero-video {
    display: none !important;
}

/* ────────────────────────────────────────
   RESPONSIVE CORRECTIONS — 320 / 375 / 430 / 480 / 560 / 600 px
   Corrections ciblées identifiées à l'audit multi-breakpoints.
   Toutes en ajout pur — aucune règle desktop existante n'est modifiée.
   ──────────────────────────────────────── */

/* ────────────────────────────────────────
   1. .btn-sm — classe utilisée dans 404.html mais non définie
   ──────────────────────────────────────── */
.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.4;
    min-height: 44px;
    border-radius: var(--radius-full);
}

/* ────────────────────────────────────────
   2. form-card double padding
   Le pattern <div class="form-card"><div style="padding:2.5rem">
   crée un double padding : 1.5rem (classe) + 2.5rem (inline) = 64 px
   par côté à 320 px. On neutralise le padding inline horizontal.
   ──────────────────────────────────────── */
@media (max-width: 600px) {
    .form-card>div[style*='padding'] {
        padding-inline: 0 !important;
    }
}

/* ────────────────────────────────────────
   3. Permanences-grid — force 1 colonne à ≤ 560 px
   minmax(260px,1fr) peut déborder si le container calc est juste
   au-dessus de 520 px à certains DPR.
   ──────────────────────────────────────── */
@media (max-width: 560px) {
    .permanences-grid {
        grid-template-columns: 1fr;
    }
}

/* ────────────────────────────────────────
   4. cta-button-row — pleine largeur à ≤ 480 px
   ──────────────────────────────────────── */
@media (max-width: 480px) {
    .cta-button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-button-row>.btn,
    .cta-button-row>a.btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ────────────────────────────────────────
   5. Boutons hero — pleine largeur à ≤ 480 px
   Couvre tous les héros subpage + hero principal index.html.
   ──────────────────────────────────────── */
@media (max-width: 480px) {
    .subpage-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .subpage-hero__ctas .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ────────────────────────────────────────
   6. adhesion-hero-facts pills — plus compactes à ≤ 375 px
   ──────────────────────────────────────── */
@media (max-width: 375px) {
    .adhesion-hero-facts {
        gap: 0.35rem;
        margin-bottom: var(--spacing-md);
    }

    .adhesion-hero-facts li {
        font-size: 0.78rem;
        padding: 0.25rem 0.5rem;
        min-height: 1.6rem;
    }
}

/* ────────────────────────────────────────
   7. Floating contact — panneau ne déborde pas à 320 px
   ──────────────────────────────────────── */
@media (max-width: 375px) {
    .floating-contact {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .floating-contact__panel {
        min-width: 0;
        width: calc(100vw - 1.5rem);
        max-width: 280px;
    }
}

/* ────────────────────────────────────────
   8. Top-bar — libellé Bénévolat masqué à ≤ 340 px
   L'icône reste ; seul le texte disparaît pour dégager de la place.
   ──────────────────────────────────────── */
@media (max-width: 340px) {
    .top-bar__cluster--right>a.top-bar__link--accent:last-child {
        display: none;
    }

    .top-bar__inner {
        gap: 0.2rem;
    }
}

/* ────────────────────────────────────────
   9. subpage-hero — titre et padding à ≤ 375 px
   ──────────────────────────────────────── */
@media (max-width: 375px) {
    .subpage-hero__inner {
        padding-top: calc(72px + var(--top-bar-height));
        padding-bottom: var(--spacing-xl);
    }

    .subpage-hero__title {
        font-size: clamp(1.5rem, 7.5vw, 2rem);
    }

    .subpage-hero__desc {
        font-size: 1rem;
    }
}

/* ────────────────────────────────────────
   10. Glass-panel stats (hero index.html) — compact à 375 px
   ──────────────────────────────────────── */
@media (max-width: 375px) {
    .glass-panel {
        padding: var(--spacing-lg);
    }

    .stat-number {
        font-size: 2.2rem;
    }
}

/* ────────────────────────────────────────
   11. program-media-card — limite la hauteur sur très petits écrans
   pour éviter un débordement vertical dans program-intro-grid
   ──────────────────────────────────────── */
@media (max-width: 600px) {

    .program-media-card img,
    .program-media-card video {
        max-height: 280px;
        object-fit: cover;
    }
}

/* ────────────────────────────────────────
   12. Titre de la section opening-hours — lisibilité à 430 px
   ──────────────────────────────────────── */
@media (max-width: 430px) {
    .opening-hours h3 {
        font-size: 1rem;
    }
}

/* ────────────────────────────────────────
   13. 404.html — liste de liens contextuels en colonne à ≤ 480 px
   ──────────────────────────────────────── */
@media (max-width: 480px) {
    .error-404-nav-cols {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {

    .footer-links a,
    .footer-legal a,
    .footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ==========================================================================
   Page Adultes & Seniors
   ========================================================================== */
.page-adultes-seniors .hero {
    min-height: clamp(720px, 82vh, 900px);
}

.page-adultes-seniors .hero-values {
    margin-bottom: 0;
}

.page-adultes-seniors .hero-stats {
    align-self: center;
}

.ias-service-intro,
.ias-route,
.ias-practical-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.ias-service-copy,
.ias-modern-head {
    max-width: 760px;
}

.ias-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--spacing-md);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(10, 69, 72, 0.08);
    color: var(--color-primary);
    font-family: 'Playfair Display', 'Lora', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ias-service-lede,
.ias-lede {
    max-width: var(--prose-max);
    color: var(--color-text-muted);
    font-size: var(--font-scale-lead);
    line-height: 1.75;
}

.ias-service-panel,
.ias-practical-card,
.ias-format-card,
.ias-clean-card,
.ias-step-clean {
    background: var(--color-surface);
    border: 1px solid rgba(10, 69, 72, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ias-service-panel--standalone {
    margin-top: var(--spacing-2xl);
    max-width: 52rem;
}

.ias-service-panel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.ias-service-panel__label {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ias-service-panel h3,
.ias-practical-card h3 {
    margin-bottom: 0.75rem;
}

.ias-service-panel p {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.ias-service-panel__actions,
.ias-practical-actions {
    display: grid;
    gap: 0.75rem;
}

.ias-service-panel__actions a,
.ias-practical-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
    background: rgba(10, 69, 72, 0.04);
    font-family: var(--font-heading);
    font-weight: 700;
}

.ias-service-panel__actions a:hover,
.ias-practical-action:hover,
.ias-service-panel__actions a:focus-visible,
.ias-practical-action:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-light);
    outline: none;
}

.ias-principles,
.ias-clean-grid,
.ias-format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    align-items: stretch;
}

.ias-principle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(10, 69, 72, 0.06);
}

.ias-principle i,
.ias-clean-card__icon,
.ias-format-card__icon,
.ias-practical-card__icon,
.ias-agenda-source__icon {
    color: var(--color-secondary);
}

.ias-principle span {
    color: var(--color-text-muted);
}

.ias-clean-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* Cartes « besoins fréquents » : pile verticale ; cartes « programme » : en-tête icône + titre, texte dessous */
.ias-clean-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.35rem, 2.75vw, 2rem);
    height: 100%;
}

.ias-format-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.7rem 1rem;
    align-items: center;
    padding: clamp(1.35rem, 2.75vw, 2rem);
    height: 100%;
    transition:
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.ias-format-card__icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.ias-format-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    line-height: 1.3;
    color: var(--color-primary-dark);
    min-width: 0;
}

.ias-format-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    line-height: 1.65;
    align-self: start;
}

.ias-format-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(10, 69, 72, 0.16);
    transform: translateY(-2px);
}

.ias-format-card:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.ias-clean-card__icon,
.ias-format-card__icon,
.ias-practical-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: rgba(211, 107, 66, 0.12);
    font-size: 1.28rem;
}

.ias-clean-card p,
.ias-format-card p {
    color: var(--color-text-muted);
}

.ias-clean-card>div {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.ias-clean-card h3 {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ias-format-card {
        transition: none;
    }

    .ias-format-card:hover {
        transform: none;
    }
}

.ias-clean-card ul,
.ias-practical-card ul {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.ias-clean-card li,
.ias-practical-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--color-text-muted);
}

.ias-clean-card li i,
.ias-practical-card li i {
    margin-top: 0.32rem;
    color: var(--color-primary);
}

.ias-route-note {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
    background: rgba(211, 107, 66, 0.08);
}

.ias-route-note strong,
.ias-route-note span {
    display: block;
}

.ias-route-note span {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
}

.ias-step-list {
    display: grid;
    gap: 1rem;
}

.ias-step-clean {
    display: flex;
    gap: 1rem;
    padding: 1.15rem;
}

.ias-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-weight: 800;
}

.ias-step-clean p {
    color: var(--color-text-muted);
}

.ias-agenda-source {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--spacing-xl);
    padding: 1rem;
    border: 1px solid rgba(10, 69, 72, 0.12);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.ias-agenda-source strong {
    display: block;
    color: var(--color-primary-dark);
}

.ias-agenda-source .btn {
    flex: 0 0 auto;
    margin-left: auto;
}

.ias-practical-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2rem);
}

.ias-map-modern {
    min-height: 360px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--color-bg-soft);
}

.ias-map-modern iframe {
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
}

/* Carte Google Maps à la hauteur de la colonne de gauche (blocs contact des pôles).
   Couvre les deux structures : carte en enfant direct de la grille, ou carte
   enveloppée dans une colonne latérale (carte + bouton). */
.program-intro-grid>.ias-map-modern {
    align-self: stretch;
    height: 100%;
}

.program-intro-grid> :has(> .ias-map-modern) {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.program-intro-grid> :has(> .ias-map-modern) .ias-map-modern {
    flex: 1 1 auto;
}

.ias-map-modern .map-consent-wrapper,
.ias-map-modern .map-consent-placeholder {
    height: 100%;
    min-height: inherit;
}

@media (max-width: 1024px) {
    .page-adultes-seniors .hero {
        min-height: auto;
    }

    .page-adultes-seniors .hero-stats {
        width: 100%;
        max-width: 760px;
    }

    .page-adultes-seniors .glass-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .page-adultes-seniors .stat-divider {
        display: none;
    }

    .page-adultes-seniors .stat-item {
        justify-content: center;
    }
}

@media (max-width: 900px) {

    .ias-service-intro,
    .ias-route,
    .ias-practical-layout,
    .ias-principles,
    .ias-clean-grid,
    .ias-format-grid {
        grid-template-columns: 1fr;
    }

    .ias-agenda-source {
        align-items: flex-start;
        flex-direction: column;
    }

    .ias-agenda-source .btn {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .page-adultes-seniors .hero {
        padding-top: calc(96px + var(--top-bar-height));
        padding-bottom: var(--spacing-xl);
    }

    .page-adultes-seniors .hero-container {
        gap: var(--spacing-xl);
    }

    .page-adultes-seniors .hero-values {
        gap: 0.75rem;
        row-gap: 0.6rem;
    }

    .page-adultes-seniors .glass-panel {
        grid-template-columns: 1fr;
        max-width: 430px;
        padding: var(--spacing-lg);
    }

    .page-adultes-seniors .stat-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .page-adultes-seniors .breadcrumb {
        display: none;
    }

    .page-adultes-seniors .hero {
        padding-top: calc(82px + var(--top-bar-height));
    }

    .page-adultes-seniors .hero-description {
        margin-bottom: 0.85rem;
    }

    .page-adultes-seniors .hero-values {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .page-adultes-seniors .value-item {
        justify-content: flex-start;
        font-size: 0.95rem;
    }

    .page-adultes-seniors .hero-stats {
        display: none;
    }

    .ias-clean-card,
    .ias-format-card,
    .ias-step-clean {
        padding: 1rem;
    }

    .ias-map-modern {
        min-height: 280px;
    }
}

/* ==========================================================================
   Page Famille & Parentalité
   ========================================================================== */
.page-famille-parentalite .hero {
    overflow-x: clip;
    overflow-y: visible;
    justify-content: flex-start;
    min-height: clamp(780px, 92vh, 980px);
    min-height: clamp(780px, 92dvh, 980px);
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.page-famille-parentalite .hero-container {
    width: 100%;
    max-width: 1280px;
    align-items: start;
    padding-top: calc(120px + var(--top-bar-height));
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-famille-parentalite .hero-stats.glass-panel {
    align-self: start;
    width: 100%;
    max-width: 22rem;
    justify-self: end;
}

@media (max-width: 1024px) {
    .page-famille-parentalite .hero-stats.glass-panel {
        max-width: min(100%, 36rem);
        justify-self: center;
        margin-inline: auto;
    }
}

.page-famille-parentalite .hero-ctas {
    align-items: center;
}

.page-famille-parentalite .hero-ctas .btn,
.page-famille-parentalite .cta-button-row .btn,
.page-famille-parentalite .engagement-actions .btn,
.page-famille-parentalite .fp-info-card .btn {
    white-space: nowrap;
}

.page-famille-parentalite .hero-ctas .btn i,
.page-famille-parentalite .cta-button-row .btn i,
.page-famille-parentalite .engagement-actions .btn i,
.page-famille-parentalite .fp-info-card .btn i {
    flex-shrink: 0;
}

.page-famille-parentalite .adhesion-hero-facts {
    max-width: 820px;
}

.fp-activity-wrap,
.as-activity-wrap {
    margin-top: var(--spacing-xl);
}

.page-adultes-seniors .carousel-track-container {
    overflow: visible;
    padding: 0;
}

.page-adultes-seniors .carousel-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    transform: none !important;
}

.page-adultes-seniors .service-card {
    min-width: 0;
    flex: initial !important;
}

.page-adultes-seniors .service-card .card-content a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.page-famille-parentalite .carousel-track {
    display: flex;
    gap: var(--spacing-lg);
}

/* Desktop/tablette : carrousel à flèches (clip + slide JS). */
@media (min-width: 769px) {
    .page-famille-parentalite .carousel-track-container {
        overflow: hidden;
    }
}

.fp-info-card {
    background: var(--color-bg-soft);
    border: 1px solid rgba(10, 69, 72, 0.08);
}

.fp-info-card__inner {
    padding: var(--spacing-xl);
}

.fp-info-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-md);
}

.fp-info-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fp-info-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--color-text-muted);
}

.fp-info-list i {
    color: var(--color-primary);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.fp-info-card .btn {
    width: 100%;
    justify-content: center;
}

.fp-faq-list {
    max-width: 780px;
    margin-inline: auto;
}

.page-famille-parentalite .faq-item a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (max-width: 900px) {
    .page-famille-parentalite .hero {
        min-height: auto;
    }

    .page-famille-parentalite .hero-container {
        padding-top: calc(100px + var(--top-bar-height));
        padding-bottom: var(--spacing-xl);
    }

    .page-famille-parentalite .adhesion-hero-facts {
        gap: 0.5rem;
    }

    .page-famille-parentalite .carousel-track,
    .page-adultes-seniors .carousel-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .page-famille-parentalite .section-title {
        font-size: clamp(1.65rem, 7.25vw, 2.1rem);
        line-height: 1.14;
    }

    .page-famille-parentalite .hero-ctas .btn,
    .page-famille-parentalite .cta-button-row .btn,
    .page-famille-parentalite .engagement-actions .btn,
    .page-famille-parentalite .fp-info-card .btn {
        gap: 0.55rem;
        min-height: 3.75rem;
        padding-inline: 1.25rem;
        font-size: clamp(0.98rem, 4.6vw, 1.08rem);
    }

    .page-famille-parentalite .breadcrumb {
        display: none;
    }

    .page-famille-parentalite .hero-container {
        padding-top: calc(82px + var(--top-bar-height));
    }

    .page-famille-parentalite .adhesion-hero-facts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-famille-parentalite .adhesion-hero-facts li {
        width: 100%;
    }

    .page-famille-parentalite .carousel-track,
    .page-adultes-seniors .carousel-track {
        grid-template-columns: 1fr;
    }

    .fp-info-card__inner {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 768px) {

    .page-famille-parentalite .step-card a,
    .page-famille-parentalite .faq-item p a,
    .page-famille-parentalite #contact-section .contact-info a,
    .page-famille-parentalite .footer a {
        display: inline-flex !important;
        align-items: center;
        min-height: 44px;
    }

    .page-famille-parentalite .footer .logo {
        min-width: 44px;
    }
}

@media (max-width: 430px) {
    .page-famille-parentalite .footer {
        padding-top: var(--spacing-xl);
    }

    .page-famille-parentalite .footer-grid {
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .page-famille-parentalite .footer-brand .logo {
        width: max-content;
        min-height: 0;
        margin-bottom: var(--spacing-sm);
    }

    .page-famille-parentalite .footer-logo-img {
        display: block;
        height: 56px;
        margin-bottom: 0;
    }

    .page-famille-parentalite .footer-desc {
        font-size: 0.94rem;
        line-height: 1.7;
    }

    .page-famille-parentalite .footer-links a,
    .page-famille-parentalite .footer-legal a,
    .page-famille-parentalite .footer-contact a {
        min-height: 0;
    }
}

@media (max-width: 360px) {

    .page-famille-parentalite #contact-section,
    .page-famille-parentalite #contact-section .container,
    .page-famille-parentalite #contact-section .program-intro-grid,
    .page-famille-parentalite #contact-section .program-intro-grid>*,
    .page-famille-parentalite #contact-section .section-title,
    .page-famille-parentalite #contact-section .section-text,
    .page-famille-parentalite #contact-section .opening-hours,
    .page-famille-parentalite #contact-section .contact-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .page-famille-parentalite #contact-section .section-title,
    .page-famille-parentalite #contact-section .section-text,
    .page-famille-parentalite #contact-section .contact-info a {
        overflow-wrap: anywhere;
    }
}

/* Responsive hardening shared by published pages */
main,
section,
.container,
.grid,
.benefits-grid,
.features-grid,
.cards-grid,
.poles-grid,
.events-list,
.form-grid,
.footer-grid,
.tarifs-grid,
.page-hero__grid {
    min-width: 0;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.table-responsive,
.pricing-table,
.tariff-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {

    .top-bar__inner,
    .header .container,
    .footer-grid,
    .contact-layout,
    .form-card,
    .form-section,
    .benefit-card,
    .service-card,
    .pole-card,
    .event-card,
    .article-card,
    .tarif-card {
        min-width: 0;
    }

    .footer a,
    .contact-info a,
    .contact-detail__body a {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1024px) {
    .btn-sm {
        min-height: 44px;
    }

    .footer a,
    .footer-links a,
    .footer-legal a,
    .footer .contact-info a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 430px) {
    .floating-contact {
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 1.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }

    .floating-contact__panel {
        width: min(280px, calc(100vw - 1.5rem));
        min-width: 0;
    }

    .floating-contact__action {
        min-height: 44px;
    }
}

/* Page « Le Centre » — hero plein viewport : compacter sur mobiles peu hauts */
@media (max-width: 540px) and (max-height: 760px) {
    .page-lecentre .page-hero {
        min-height: unset;
        align-items: flex-start;
    }

    .page-lecentre .page-hero__grid {
        padding-top: calc(72px + var(--top-bar-height));
        padding-bottom: var(--spacing-lg);
    }

    .page-lecentre .page-hero__title {
        font-size: clamp(1.6rem, 7vw, 2.3rem);
    }

    .page-lecentre .page-hero__desc {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
    }
}

/* ────────────────────────────────────────
   Subpage hero — écrans mobiles peu hauts (ex. 390–700)
   Compacte titre, textes, CTA et listes dans le hero interne (.subpage-hero).
   Positionné en fin de feuille pour dominer les règles /.page-* spécifiques.
   ──────────────────────────────────────── */
@media (max-width: 540px) and (max-height: 760px) {
    .subpage-hero {
        align-items: flex-start;
        min-height: unset;
    }

    .subpage-hero__inner {
        padding-top: calc(56px + var(--top-bar-height));
        padding-bottom: clamp(0.85rem, 3vh, 1.25rem);
    }

    .subpage-hero__badge {
        margin-bottom: var(--spacing-sm);
        font-size: 0.72rem;
        letter-spacing: 1.2px;
    }

    .subpage-hero__title {
        font-size: clamp(1.52rem, 6.8vw, 2.05rem);
        margin-bottom: var(--spacing-sm);
        line-height: 1.12;
    }

    .subpage-hero__desc {
        font-size: 0.93rem;
        line-height: 1.52;
        margin-bottom: var(--spacing-sm);
        max-width: none;
    }

    .subpage-hero__inner>.breadcrumb {
        margin-bottom: var(--spacing-sm);
        font-size: 0.8125rem;
    }

    .subpage-hero__ctas {
        gap: var(--spacing-sm);
        margin-top: 0.15rem;
    }

    .subpage-hero__inner .btn-lg {
        padding: 0.62rem 1.1rem;
        font-size: 0.98rem;
    }

    /* Rangée scrollable au lieu de colonnes très hautes */
    .subpage-hero ul.adhesion-hero-facts {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.32rem;
        margin-bottom: 0.65rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 0.15rem;
    }

    .subpage-hero ul.adhesion-hero-facts li {
        flex: 0 0 auto;
        width: auto;
        min-height: 1.72rem;
        padding: 0.28rem 0.52rem;
        font-size: 0.77rem;
    }

    .subpage-hero .adhesion-hero-recap {
        font-size: 0.88rem;
        margin-bottom: 0.55rem;
        line-height: 1.45;
    }

    .page-inscription .hero-container {
        padding-bottom: 1rem;
    }

    .page-inscription .adhesion-hero-recap {
        font-size: 0.87rem;
    }

    .page-inscription .adhesion-hero-facts li {
        min-height: 1.7rem;
    }

    .page-famille-parentalite .hero {
        min-height: auto;
        padding-bottom: clamp(1.25rem, 4vh, 2rem);
    }

    .page-famille-parentalite .hero-container {
        padding-bottom: clamp(1rem, 3vh, 1.75rem);
    }
}

@media (max-width: 480px) and (max-height: 740px) {
    .subpage-hero__inner {
        padding-top: calc(52px + var(--top-bar-height));
    }

    .page-famille-parentalite .hero-container {
        padding-top: calc(50px + var(--top-bar-height));
        padding-bottom: 0.85rem;
    }

    /* Liens sous les boutons repris plus bas (contact, petite enfance, etc.) */
    .subpage-hero__inner>.subpage-hero__ctas~.subpage-hero__desc {
        display: none;
    }
}

/* Premium polish: shared mobile hardening for a 10/10 audit pass. */
@media (max-width: 768px) {

    .hero,
    .subpage-hero,
    .page-hero {
        overflow-x: clip;
    }

    .hero-container,
    .subpage-hero__inner,
    .page-hero__grid {
        max-width: 100%;
        min-width: 0;
    }

    .hero-title,
    .subpage-hero__title,
    .page-hero__title,
    .section-title {
        overflow-wrap: anywhere;
    }

    .hero-ctas,
    .cta-button-row,
    .engagement-actions,
    .permanences-numerique-ctas {
        max-width: 100%;
        min-width: 0;
    }

    .hero-ctas .btn,
    .cta-button-row .btn,
    .engagement-actions .btn,
    .permanences-numerique-ctas .btn {
        min-width: 0;
        white-space: normal;
    }

    .page-inscription .inscription-toc,
    .page-inscription .inscription-toc__inner,
    .page-inscription .inscription-toc__list {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .page-inscription .inscription-toc {
        overflow: hidden;
    }

    .page-inscription .inscription-toc__list a {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .hero:not(.page-home .hero) {
        min-height: auto;
    }

    .hero-container {
        padding-top: 0;
        padding-bottom: clamp(1.5rem, 7vw, 2.5rem);
    }
}

/* Final mobile tightening: keep primary action and message above the fold. */
@media (max-width: 600px) {

    section.hero .hero-values,
    section.hero .hero-stats.glass-panel {
        display: none !important;
    }

    section.hero .hero-description {
        margin-bottom: 1rem !important;
        line-height: 1.55;
    }

    section.hero .hero-ctas {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    section.hero .hero-ctas .btn {
        min-height: 3.25rem;
        padding-block: 0.75rem;
    }

    .page-home .hero-values,
    .page-home .home-hero-stats {
        display: none !important;
    }

    .page-home .hero-container,
    .page-social .hero-container,
    .page-enfance-jeunesse .hero-container,
    .page-multimedia .hero-container,
    .page-contact .hero-container,
    .page-agenda .hero-container,
    .page-actualites .hero-container,
    .page-equipe .hero-container {
        padding-top: 0 !important;
        padding-bottom: clamp(1.5rem, 7vw, 2.4rem) !important;
    }

    .page-famille-parentalite .hero-container,
    .page-benevolat .hero-container {
        padding-top: calc(74px + var(--top-bar-height)) !important;
        padding-bottom: clamp(1.5rem, 7vw, 2.4rem) !important;
    }
}

/* Home mobile: remove the extra inner gap between the fixed menu and hero content. */
@media (max-width: 600px) {
    .page-home .hero {
        justify-content: flex-start !important;
        padding-top: calc(96px + var(--top-bar-height)) !important;
    }

    .page-home .hero-container {
        padding-top: 0 !important;
        align-items: start !important;
    }
}

.media-clips__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.media-clip-card {
    overflow: hidden;
    border: 1px solid rgba(16, 42, 44, 0.1);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.media-clip-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--nuit);
    object-fit: cover;
}

.media-clip-card__video--portrait {
    aspect-ratio: 9 / 16;
}

.media-clip-card__body {
    padding: 1.25rem;
}

.media-clip-card__body h3 {
    margin: 0 0 0.45rem;
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: 1.25rem;
}

.media-clip-card__body p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   IMPRESSION — @media print
   Optimisé pour les seniors qui impriment
   horaires, coordonnées et programmes.
   ═══════════════════════════════════════════ */
@media print {

    /* Reset couleurs */
    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Masquer les éléments non utiles à l'impression */
    .top-bar,
    .header,
    .a11y-toolbar,
    .footer,
    .hero-video,
    .hero-video-pause-btn,
    .hero-poster-overlay,
    .hero-scroll-cta,
    .mobile-toggle,
    .nav-actions,
    .partners-marquee,
    .pole-jump-nav,
    .home-newsletter,
    .footer-social,
    [data-video-pause],
    .btn-primary,
    .btn-secondary,
    .btn-outline-primary,
    .btn-lg,
    .shine-effect,
    .cta-button-row,
    .engagement-section,
    .fade-up,
    .a11y-btn,
    .a11y-toggle,
    .skip-links,
    video,
    iframe,
    .hero-background .gradient-overlay {
        display: none !important;
    }

    /* Mise en page sobre */
    body {
        font-size: 12pt;
        line-height: 1.6;
    }

    h1 {
        font-size: 20pt;
        margin-bottom: 8pt;
    }

    h2 {
        font-size: 16pt;
        margin-bottom: 6pt;
        page-break-after: avoid;
    }

    h3 {
        font-size: 13pt;
        margin-bottom: 4pt;
        page-break-after: avoid;
    }

    /* Éviter les coupures de page dans les blocs importants */
    .opening-hours,
    .contact-info,
    .benefit-card,
    .event-card,
    .pe-info-card {
        page-break-inside: avoid;
    }

    /* Afficher les URLs des liens (utile pour coordonnées, formulaires) */
    a[href^="http"]::after,
    a[href^="mailto"]::after,
    a[href^="tel"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444 !important;
    }

    /* Sauf les liens purement décoratifs ou de navigation */
    a[href^="#"]::after,
    .nav-links a::after,
    .footer-links a::after,
    .footer-brand a::after {
        content: none;
    }

    /* Hero : garder le titre, masquer le fond */
    .hero {
        background: none !important;
        min-height: auto !important;
        padding: 16pt 0 8pt;
    }

    .hero-title,
    .hero-subtitle {
        color: #000 !important;
    }

    /* Sections : espacements réduits */
    .section,
    section {
        padding: 12pt 0 !important;
    }

    .container {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   TOP BAR — référence visuelle du 13 juillet 2026
   ========================================================================== */
.top-bar {
    height: var(--top-bar-height);
    min-height: var(--top-bar-height);
    box-sizing: border-box;
}

.top-bar__inner {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.6rem, 1.35vw, 1.35rem);
    padding-inline: clamp(0.45rem, 1vw, 0.9rem);
    overflow: hidden;
}

.top-bar__cluster--left {
    justify-self: start;
    min-width: 0;
}

.top-bar__cluster--center {
    justify-self: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.top-bar__cluster--right {
    justify-self: end;
    min-width: 0;
    white-space: nowrap;
}

.top-bar__cluster--left,
.top-bar__cluster--center,
.top-bar__cluster--right {
    gap: 0.22rem;
}

.top-bar__link {
    flex: 0 0 auto;
    gap: 0.35rem;
    padding: 0.15rem 0.34rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Le bouton Accessibilité hérite de .top-bar__link (font-size: inherit)
   et suit donc la même réduction. */

.top-bar__cluster--left .top-bar__link {
    color: rgba(255, 255, 255, 0.86);
}

.top-bar__cluster--center .top-bar__link {
    color: rgba(255, 255, 255, 0.82);
}

.top-bar__cluster--center .top-bar__link:hover,
.top-bar__cluster--center .top-bar__link[aria-current='page'] {
    color: #fff;
}

.top-bar__dot {
    width: 2.5px;
    height: 2.5px;
    margin-inline: 0.15rem;
}

.top-bar__sep--lead {
    height: 18px;
    margin-inline: 0.45rem 0.35rem;
}

.top-bar .a11y-toolbar__toggle {
    min-height: 26px;
    padding: 0.18rem 0.62rem;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.09);
}

.top-bar__link--appointment,
.top-bar__link--volunteer {
    color: #f1c83f;
}

.top-bar__link--appointment:hover,
.top-bar__link--volunteer:hover {
    color: #ffe27a;
}

.top-bar__link--accent.top-bar__link--join {
    color: #f27a43;
}

.top-bar__link--accent.top-bar__link--join:hover {
    color: #ffad82;
}

.top-bar__link--accent[aria-current='page'] {
    color: inherit;
}

@media (max-width: 1320px) and (min-width: 1151px) {
    .top-bar__inner {
        gap: 0.45rem;
        padding-inline: 0.45rem;
    }

    .top-bar__link {
        gap: 0.28rem;
        padding-inline: 0.24rem;
        font-size: 0.75rem;
    }

    .top-bar .a11y-toolbar__toggle {
        padding-inline: 0.5rem;
    }

    .top-bar__sep--lead {
        margin-inline: 0.25rem 0.2rem;
    }
}

@media (max-width: 1150px) {
    .top-bar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .top-bar__cluster--center,
    .top-bar__sep--lead {
        display: none;
    }
}

@media (max-width: 1024px) {
    .top-bar__cluster--right>.a11y-toolbar__toggle {
        display: inline-flex !important;
    }

    .top-bar__cluster--right>.top-bar__link--accent {
        display: inline-flex;
        min-width: 44px;
    }

    .top-bar__cluster--left .top-bar__email span,
    .top-bar__cluster--right>.top-bar__link--accent span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 600px) {
    .top-bar__inner {
        gap: 0.2rem;
        padding-inline: 0.25rem;
    }

    .top-bar__cluster--left,
    .top-bar__cluster--right {
        gap: 0;
    }

    .top-bar__link {
        padding-inline: 0.3rem;
    }
}

@media (max-width: 340px) {
    .top-bar__cluster--right>.top-bar__link--volunteer {
        display: none !important;
    }
}

/* Navigation mobile épurée : trois accès utiles, puis le menu principal. */
@media (max-width: 600px) {
    :root {
        --top-bar-height: 40px;
    }

    .top-bar__cluster--left .top-bar__email,
    .top-bar__cluster--right>.top-bar__link--appointment,
    .top-bar__cluster--right>.top-bar__link--volunteer {
        display: none !important;
    }

    .header,
    .header.scrolled,
    html.hide-top-bar .header {
        padding-block: 0.4rem !important;
    }

    .header .logo-img {
        height: 40px;
    }
}
/* ============================================================
   TOP BAR + INDICATEUR OUVERT/FERMÉ — anti-chevauchement.
   Le groupe de gauche (statut + téléphone + e-mail) ne doit
   jamais déborder sur les liens du centre : clip + ellipse,
   puis e-mail en icône seule sous 1460px.
   ============================================================ */
.top-bar__cluster--left {
    overflow: hidden;
}

.top-bar__cluster--left .top-bar__email {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

.top-bar__cluster--left .top-bar__email span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1460px) {
    /* E-mail : icône seule (le libellé reste lu par les lecteurs d'écran
       via l'aria-label du lien) — même motif que la règle ≤1024px. */
    .top-bar__cluster--left .top-bar__email span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 1180px) {
    /* Statut : on garde le point coloré et un libellé raccourci géré par
       l'ellipse ; l'essentiel (couleur + « Accueil ouvert/fermé ») reste lisible. */
    .top-bar .open-status {
        min-width: 0;
        overflow: hidden;
    }

    .top-bar .open-status__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 190px;
    }
}

/* ============================================================
   BARRE SUPÉRIEURE — centrage des liens rapides ENTRE les deux
   séparateurs (fin du bloc gauche, début du bloc droit), et non
   sur la largeur totale de la barre.
   Avec des colonnes 1fr/1fr (ou un centrage sur toute la barre),
   le résultat ne correspond au centre visuel QUE si les blocs
   gauche et droite ont la même longueur — ce qui n'est pas le cas
   ici (statut + tél + e-mail à gauche, Accessibilité + 2 boutons à
   droite). On dimensionne donc les colonnes gauche/droite à leur
   contenu réel (auto) et on laisse la colonne centrale absorber
   tout l'espace restant : ses bornes sont alors exactement les
   deux séparateurs, et justify-self:center y centre les liens.
   ============================================================ */
.top-bar__inner {
    display: grid;
    /* minmax(0, auto/1fr) : les colonnes visent leur taille de contenu (ou tout
       l'espace restant pour le centre), mais peuvent se comprimer sous cette
       taille plutôt que de forcer un débordement si la barre devient étroite. */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
}

.top-bar__cluster--left {
    justify-self: start;
}

.top-bar__cluster--center {
    justify-self: center;
}

.top-bar__cluster--right {
    justify-self: end;
}