/* ============================================================
   Page d'accueil — styles spécifiques
   ============================================================ */

/* ── Contenu du héros ─────────────────────────────────────────────── */
.page-home .hero-container {
    grid-template-columns: minmax(0, 46rem);
    justify-content: flex-start;
}

.page-home .hero-title {
    max-width: 16ch;
    margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.36);
}

/* Accent du titre : serif Playfair Display en italique, couleur dorée
   pleine (plus de dégradé) + ombre portée pour la lisibilité sur la photo. */
.page-home .hero-title .text-gradient {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    -webkit-text-fill-color: var(--color-accent);
    color: var(--color-accent);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.page-home .hero-slide__kicker {
    margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.page-home .hero-description {
    max-width: 38rem;
    text-wrap: pretty;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}

.page-home-hero-ctas {
    margin-top: 0;
    margin-bottom: clamp(1rem, 2.5vw, 1.25rem);
}

.page-home-hero-ctas .btn {
    min-height: 3.5rem;
    white-space: normal;
    text-align: center;
}

.page-home-hero-ctas .btn i {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .page-home .hero-container {
        justify-content: center;
    }

    .page-home .hero-title,
    .page-home .hero-description {
        margin-inline: auto;
    }

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

@media (max-width: 480px) {
    .page-home-hero-ctas {
        width: min(100%, 22rem);
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.55rem;
    }

    /* 2 CTAs : chaque bouton prend la moitié */
    .page-home-hero-ctas .btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        min-height: 3.35rem;
        padding-inline: 0.9rem;
        gap: 0.45rem;
        font-size: clamp(0.85rem, 4vw, 0.98rem);
        line-height: 1.15;
    }

    .page-home .hero-title {
        max-width: 10.5ch;
    }
}

/* Héros accueil — règle unique consolidée.
   Fond transparent : sous les logos partenaires, on laisse voir le crème du
   fond de page. La photo couvre le reste du héros.
   Le héros est aujourd'hui la seule section de la page (avant le footer) :
   il occupe donc toute la hauteur de l'écran (100svh, avec repli 100vh pour
   les navigateurs sans unités viewport « small »). */
.page-home .hero {
    overflow-x: clip;
    overflow-y: visible;
    background: transparent;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 0;
}

/* Resserre l'espace sous les CTA pour que le bandeau partenaires reste
   confortablement dans la fenêtre visible, sans avoir à faire défiler. */
.page-home .hero-ctas {
    margin-bottom: var(--spacing-lg);
}

/* Évite le chevauchement des points et bouton pause du carrousel avec les cartes partenaires */
.page-home .hero-slider__controls {
    bottom: clamp(5.5rem, 10vw, 6.8rem);
}

.hero-partners__marquee-wrap {
    overflow: hidden;
    max-width: 100%;
}

.page-home .hero-partners.container {
    align-self: center;
    width: 100vw;
    max-width: none;
    padding-inline: 0;
}

.page-home .hero {
    position: relative;
}

.page-home .hero .hero-partners {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Ancrée en absolu tout en bas de la photo du hero, sous le contenu. */
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: clamp(0.6rem, 1.4vw, 1rem) 0 clamp(0.9rem, 2.2vw, 1.4rem);
    border-top: 0;
    background: transparent;
    z-index: 6;
}

/* Le bas du héros est au ras : la respiration est portée par le haut de
   cette section (crème), pas par une bande blanche sous le héros. */
.page-home section.home-pillars-section {
    padding-top: clamp(2.5rem, 6vw, 4rem);
}

.page-home .hero-partners__marquee-wrap {
    width: 100%;
    padding-block: 0;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Bouton pause/lecture du bandeau (WCAG 2.2.2) : discret, en bas à droite. */
.page-home .hero-partners__pause {
    position: absolute;
    right: clamp(0.6rem, 2vw, 1.25rem);
    bottom: 0.25rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(16, 42, 44, 0.45);
    color: #fff;
    font-size: 0.62rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.page-home .hero-partners__pause:hover,
.page-home .hero-partners__pause:focus-visible {
    background: rgba(16, 42, 44, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
}

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

/* Marquee : les cartes défilent horizontalement en boucle continue.
   Décalage fixé à -50% du rail (moitié = 2 copies entières → boucle sans couture). */
.page-home .hero-partners__track {
    width: max-content;
    flex-wrap: nowrap;
    gap: clamp(0.7rem, 1.2vw, 1rem);
    --hero-partners-shift: -50% !important;
    animation-duration: 54s;
}

.page-home .hero-partners__logo-card,
.page-home--modern .hero-partners__logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    width: clamp(208px, 20vw, 264px);
    height: clamp(64px, 6vw, 76px);
    padding: 0.4rem 1rem 0.4rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
    /* Ombre discrète et rapprochée : évite une bande sombre sous les cartes
       (l'ancienne 0 14px 32px débordait sur le crème du fond de page). */
    box-shadow: 0 2px 8px rgba(16, 42, 44, 0.12);
    color: #1c2f31;
    opacity: 1;
    visibility: visible;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-home .hero-partners__logo-card img {
    width: clamp(50px, 5vw, 62px);
    height: clamp(46px, 4.6vw, 56px);
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    padding: 0.35rem;
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(16, 42, 44, 0.05);
    object-fit: contain;
    filter: none;
}

.page-home .hero-partners__name {
    min-width: 0;
    color: #1c2f31;
    font-family: var(--font-heading);
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-home a.hero-partners__logo-card:hover,
.page-home a.hero-partners__logo-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.95);
    background: #fff;
    box-shadow: 0 5px 14px rgba(16, 42, 44, 0.18);
    transform: translateY(-3px);
}

.page-home a.hero-partners__logo-card:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.page-home .hero-partners__track:focus-within {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .page-home .hero-partners__marquee-wrap {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .page-home .hero-partners__track {
        animation: none;
    }

    .page-home .hero-partners__pause {
        display: none;
    }
}

@media (max-width: 640px) {

    /* Hero plus court sur mobile : décalage plus doux + cartes un peu plus
       basses pour rester sur la photo sans chevaucher les CTA. */
    .page-home .hero-partners {
        /* -4.5rem à l'époque où le bandeau n'avait pas de padding bas ;
           on remonte d'autant (padding-bottom ≈ 1rem) pour que l'espace
           sous les cartes reste sur la photo, comme sur desktop. */
        margin-top: 0;
    }

    .page-home .hero-partners__logo-card {
        width: clamp(190px, 62vw, 230px);
        height: 56px;
        padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    }

    .page-home .hero-partners__logo-card img {
        width: 44px;
        height: 42px;
    }

    .page-home .hero-partners__track {
        gap: 0.5rem;
    }
}

@media (max-width: 640px) {
    .page-home .hero-container {
        padding-top: 0;
        /* Réserve la hauteur du bandeau remonté (-5.5rem) + une respiration :
           les logos ne recouvrent jamais les boutons sur mobile. */
        padding-bottom: clamp(6.5rem, 20vw, 7.5rem);
    }

    .page-home .hero-title {
        max-width: 11ch;
        font-size: clamp(2.2rem, 9.5vw, 2.75rem);
        line-height: 0.98;
    }

    .page-home .hero-description {
        font-size: 1rem;
        line-height: 1.58;
    }

}

/* Optimize hero spacing on shorter screens (desktop/tablet) to keep critical content and partners above the fold */
@media (max-height: 800px) and (min-width: 769px) {
    .page-home .hero {
        padding-top: calc(56px + var(--top-bar-height));
    }

    .page-home .hero-title {
        font-size: clamp(2.6rem, 4.25vw, 3.5rem);
        line-height: 0.94;
        margin-bottom: clamp(0.75rem, 1.5vh, 1rem);
    }

    .page-home .hero-description {
        margin-bottom: 1rem;
        font-size: 0.95rem;
        line-height: 1.45;
        max-width: 32rem;
    }

    .page-home .hero-ctas {
        margin-bottom: clamp(0.75rem, 2vh, 1rem);
    }
}

@media (min-width: 769px) {
    /* Réserve, en bas de chaque diapositive, la hauteur du bandeau remonté
       (~116px) + une respiration : les logos ne peuvent plus recouvrir les
       boutons, même quand le titre occupe trois lignes (diapo « S'engager »). */
    .page-home section.hero .hero-slide {
        padding-bottom: clamp(8.5rem, 12vh, 9.5rem);
    }

    .page-home .hero-partners {
        /* Position équilibrée : cartes assez basses pour ne pas toucher les
           boutons, mais le bas du bandeau reste au-dessus du bord de la photo
           (padding sous les logos = photo, ni vert ni blanc). */
        margin-top: 0;
        padding-top: 0;
    }

    .page-home .hero-slider .hero-slider__controls {
        bottom: calc(clamp(66px, 6vw, 78px) + 0.5rem) !important;
    }
}

/* État vide de l’agenda (aucun rendez-vous à venir) */
.home-agenda-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    max-width: 46rem;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    padding: 1.5rem 1.75rem;
    border: 1px dashed rgba(10, 69, 72, 0.25);
    border-radius: var(--radius-lg, 1.25rem);
    background: var(--color-surface, #fff);
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.home-agenda-empty i {
    color: var(--color-secondary);
}

/* ── Variante modernisée ─────────────────────────────────────── */
.page-home--modern {
    --home-ink: var(--color-primary-dark);
    --home-line: rgba(10, 69, 72, 0.12);
    --home-mist: var(--color-bg-soft);
}

.page-home--modern .hero-content .fade-up,
.page-home--modern .hero-content.fade-up {
    opacity: 1;
    transform: none;
}

.page-home--modern .section.bg-light {
    background: var(--home-mist);
}

/* (Accent du titre héros : voir la règle unique en tête de fichier.) */

.page-home--modern .home-feed-card {
    border: 1px solid var(--home-line);
    box-shadow: 0 12px 32px rgba(10, 69, 72, 0.09);
}


@media (max-width: 768px) {
    .page-home--modern .page-home-hero-ctas {
        width: min(100%, 22rem);
        margin-inline: auto;
    }
}

/* Accueil mobile épuré : priorité aux actions et aux informations utiles. */
@media (max-width: 600px) {
    .page-home .hero-slider .hero-slide {
        min-height: 500px !important;
    }

    .page-home .hero-slide__kicker {
        display: none !important;
    }

    .page-home .hero-title {
        max-width: 13ch;
        font-size: clamp(2.05rem, 9vw, 2.35rem);
        line-height: 1;
    }

    .page-home .hero-description {
        max-width: 31ch;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .page-home-hero-ctas .btn {
        min-height: 3rem;
        padding-inline: 0.7rem;
        font-size: 0.9rem;
    }

    .page-home .hero-partners__logo-card {
        width: 92px;
        padding-inline: 0.5rem;
        justify-content: center;
    }

    .page-home .hero-partners__name {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .page-home .section {
        padding-block: 2.75rem;
    }

    .page-home--modern .home-feed-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .page-home--modern .home-feed-card__media {
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .page-home--modern .home-feed-card__media img {
        height: 100%;
        min-height: 100%;
    }

    .page-home--modern .home-feed-card__body {
        gap: 0.4rem;
        padding: 0.85rem;
    }

    .page-home--modern .home-feed-card__excerpt,
    .page-home--modern .home-feed-card__facts {
        display: none;
    }

    .page-home--modern .home-feed-card__cta {
        min-height: 44px;
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
        line-height: 1.25;
    }

}
/* ============================================================
   ANCRES DU HÉROS (refonte 6 sections) — évite que la cible
   d'ancre disparaisse sous le header fixe.
   ============================================================ */
#vie-du-centre,
#orientation,
#poles {
    scroll-margin-top: var(--current-anchor-offset, var(--header-offset, 96px));
}