/*
Theme Name: La Foulée de Drumettaz-Clarafond
Theme URI: https://www.fouleededrumettaz.com/
Author: La Foulée de Drumettaz-Clarafond
Description: Thème WordPress sur mesure pour La Foulée de Drumettaz-Clarafond.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: la-foulee
*/


@font-face {
    font-family: "Manrope";
    src: url("./assets/fonts/Manrope-Regular.woff") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("./assets/fonts/Manrope-Bold.woff") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

html,
body {
    margin: 0;
    padding: 0;
}

.wp-site-blocks {
    min-height: 100vh;
}

.wp-site-blocks > :last-child {
    margin-bottom: 0 !important;
}

.site-footer {
    margin-bottom: 0 !important;
}

footer.wp-block-template-part {
    margin-bottom: 0 !important;
}

/* =========================================================
   CONTENEURS
   ========================================================= */

.wp-site-blocks {
    overflow-x: clip;
}

.alignwide {
    max-width: 1440px;
}

.wp-block-group.alignwide {
    width: min(100% - 32px, 1440px);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group:not(.alignfull):not(.alignwide) {
    box-sizing: border-box;
}

/*[class$="__content"] {
	margin-left: 24px;
	margin-right: 24px;
}*/

/* =========================================================
   ESPACEMENT DES CONTENEURS DE SECTIONS
   ========================================================= */

.home-hero__content,
.home-breath__content,
.home-courses__content,
.home-youth__content,
.home-program__content,
.home-practical__content,
.home-values__content,
.home-volunteers__content,
.home-partners__content,
.home-cta__content {
	box-sizing: border-box;
	padding-left: 24px;
	padding-right: 24px;
}

@media (max-width: 767px) {

	.home-hero__content,
	.home-breath__content,
	.home-courses__content,
	.home-youth__content,
	.home-program__content,
	.home-practical__content,
	.home-values__content,
	.home-volunteers__content,
	.home-partners__content,
	.home-cta__content {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =========================================================
   HEADER — VERSION FINALE
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;
    background: var(--wp--preset--color--cream);
    border-bottom: 1px solid rgba(31, 36, 48, 0.10);
}

.site-header__inner {
    min-height: 82px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.site-header__navigation {
    gap: 24px;
}

.site-navigation {
    font-size: 15px;
}

.site-navigation .wp-block-navigation-item__content {
    position: relative;
    padding: 8px 0;
    font-weight: 600;
    text-decoration: none;
    color: var(--wp--preset--color--anthracite);
    transition: color 180ms ease;
}

.site-navigation .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--wp--preset--color--terracotta);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.site-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--terracotta);
}

.site-navigation .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
}

/* CTA */

.site-header__cta {
    flex-shrink: 0;
}

.site-header__cta .wp-block-button__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 10px 22px;
    font-size: 14px;
}

/* =========================================================
   MENU MOBILE
   ========================================================= */

.wp-block-navigation__responsive-container {
    background-color: var(--wp--preset--color--blue-deep) !important;
    color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container
.wp-block-navigation-item__content {
    color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container
.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--ochre);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--blue-deep);
}

.wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.wp-block-navigation__responsive-container.is-menu-open {
    padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
    width: 100%;
    align-items: flex-start;
    gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
    width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    line-height: 1.15;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content::after {
    display: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .site-header__navigation {
        gap: 16px;
    }

    .site-navigation {
        font-size: 14px;
    }

    .site-header__cta .wp-block-button__link {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .site-header__inner {
        min-height: 68px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .site-header .wp-block-site-logo img {
        max-width: 125px;
    }

    .site-header__navigation {
        gap: 10px;
    }

    /*
     * On mobile, the CTA reste visible à côté du burger.
     */
    .site-header__cta .wp-block-button__link {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 12px;
    }

    /*
     * Le menu desktop est remplacé par le bouton burger
     * natif du bloc Navigation.
     */
    .site-navigation {
        min-width: 32px;
    }

    .wp-block-navigation__responsive-container-open {
        width: 32px;
        height: 32px;
    }
}

/* =========================================================
   BOUTONS
   ========================================================= */

.wp-block-button__link {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--wp--preset--shadow--light);
}

.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
a:focus-visible {
    outline: 3px solid var(--wp--preset--color--ochre);
    outline-offset: 3px;
}

/* =========================================================
   CARTES
   ========================================================= */

.foulee-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--light);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.foulee-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wp--preset--shadow--medium);
}

/* =========================================================
   IMAGES
   ========================================================= */

.foulee-image-cover {
    overflow: hidden;
}

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

/* =========================================================
   BADGES / CHIPS
   ========================================================= */

.foulee-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   SOUFFLE
   ========================================================= */


.foulee-souffle {
    position: relative;
    overflow: hidden;
}

.foulee-souffle::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 120px;
    right: -80px;
    bottom: -40px;

    border: 2px solid currentColor;
    border-left-color: transparent;
    border-right-color: transparent;

    border-radius: 50%;
    opacity: 0.08;
    transform: rotate(-8deg);
    pointer-events: none;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.foulee-section {
    padding-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(48px, 7vw, 96px);
}

.foulee-section--small {
    padding-top: clamp(32px, 5vw, 64px);
    padding-bottom: clamp(32px, 5vw, 64px);
}

/* =========================================================
   HERO
   ========================================================= */

.foulee-hero {
    position: relative;
    min-height: min(720px, 75vh);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.foulee-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(14, 42, 74, 0.78) 0%,
            rgba(14, 42, 74, 0.50) 45%,
            rgba(14, 42, 74, 0.08) 100%
        );
    pointer-events: none;
}

.foulee-hero > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    .foulee-reveal {
        animation: fouleeReveal 700ms ease both;
    }

    @keyframes fouleeReveal {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .site-header__inner {
        min-height: 68px;
    }

    .site-header .wp-block-site-logo img {
        max-width: 125px;
    }

    .foulee-hero {
        min-height: 620px;
    }

    .foulee-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(14, 42, 74, 0.30) 0%,
                rgba(14, 42, 74, 0.78) 75%,
                rgba(14, 42, 74, 0.90) 100%
            );
    }

    .foulee-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* =========================================================
   NAVIGATION MOBILE — COULEURS
   ========================================================= */

@media (max-width: 767px) {

	.site-navigation {
		color: #ffffff;
	}

	.site-navigation .wp-block-navigation__responsive-container {
		background-color: #0E2A4A !important;
		color: #ffffff !important;
	}

	.site-navigation .wp-block-navigation__responsive-container-content,
	.site-navigation .wp-block-navigation__responsive-container-content ul,
	.site-navigation .wp-block-navigation-item,
	.site-navigation .wp-block-navigation-item__content {
		color: #ffffff !important;
	}

	.site-navigation .wp-block-navigation-item__content:hover,
	.site-navigation .wp-block-navigation-item__content:focus {
		color: #ffffff !important;
	}

	.site-navigation .wp-block-navigation__responsive-container-close {
		color: #ffffff !important;
	}

	.site-navigation .wp-block-navigation__responsive-container-open {
		color: #1F2430 !important;
	}
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
	background-color: #0E2A4A;
	color: #FFFFFF;
	margin-top: 0;
}

.site-footer__main {
	padding-top: 64px;
	padding-bottom: 48px;
	display: flex;
	gap: 48px;
}

.site-footer__identity {
	flex: 1 1 320px;
	max-width: 420px;
}

.site-footer__identity .wp-block-site-logo {
	margin-bottom: 16px;
}

.site-footer__identity .wp-block-site-logo img {
	max-width: 150px;
	height: auto;
}

.site-footer__baseline {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #FFFFFF;
}

.site-footer__description {
	margin: 0;
	max-width: 380px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}


/* Navigation */

.site-footer__navigation {
	flex: 0 1 220px;
}

.site-footer__title {
	margin-top: 0;
	margin-bottom: 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
}

.site-footer__navigation .wp-block-navigation {
	color: #FFFFFF;
}

.site-footer__navigation .wp-block-navigation-item {
	margin-bottom: 10px;
}

.site-footer__navigation
.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 15px;
	transition: color 180ms ease;
}

.site-footer__navigation
.wp-block-navigation-item__content:hover,
.site-footer__navigation
.wp-block-navigation-item__content:focus {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* CTA */

.site-footer__actions {
	flex: 0 1 240px;
}

.site-footer__actions p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 0;
}

.site-footer__actions .wp-block-button {
	margin-top: 16px;
}

.site-footer__actions .wp-block-button__link {
	min-height: 44px;
}


/* Réseaux sociaux */

.site-footer__social {
	padding-top: 24px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	gap: 24px;
}

.site-footer__social-label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
}

.site-footer__social .wp-block-social-links {
	margin: 0;
}

.site-footer__social
.wp-social-link {
	background: transparent !important;
	color: #FFFFFF !important;
}

.site-footer__social
.wp-social-link:hover {
	transform: translateY(-2px);
}


/* Bas de footer */

.site-footer__bottom {
	background-color: rgba(0, 0, 0, 0.12);
}

.site-footer__bottom > .wp-block-group {
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-footer__copyright,
.site-footer__legal {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

.site-footer__legal a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}


/* =========================================================
   FOOTER — MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.site-footer__main {
		padding-top: 48px;
		padding-bottom: 40px;
		gap: 40px;
	}

	.site-footer__identity,
	.site-footer__navigation,
	.site-footer__actions {
		flex: 1 1 100%;
		max-width: none;
	}

	.site-footer__identity {
		max-width: 420px;
	}

	.site-footer__navigation .wp-block-navigation {
		align-items: flex-start;
	}

	.site-footer__social {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.site-footer__bottom > .wp-block-group {
		gap: 8px;
		align-items: flex-start;
	}
}


/* =========================================================
   HOME — HERO
   ========================================================= */

.home-hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}

.home-hero__content {
	width: 100%;
	padding-top: 96px;
	padding-bottom: 96px;
}

.home-hero__eyebrow {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.home-hero__title {
	margin: 0 0 20px;
	font-family: "Manrope", sans-serif;
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: #FFFFFF;
}

.home-hero__intro {
	/*max-width: 620px;*/
	margin: 0 0 12px;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	line-height: 1.5;
	color: #FFFFFF;
}

.home-hero__date {
	margin: 0 0 28px;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
}

.home-hero__cta {
	margin-top: 8px;
}

.home-hero__cta .wp-block-button__link {
	min-height: 48px;
	padding-left: 28px;
	padding-right: 28px;
}


/* Mobile */

@media (max-width: 767px) {

	.home-hero {
		min-height: 600px;
	}

	.home-hero__content {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.home-hero__title {
		font-size: clamp(2.5rem, 13vw, 4rem);
	}

	.home-hero__intro {
		font-size: 1.05rem;
	}

	.home-hero__date {
		margin-bottom: 24px;
	}
}

/* =========================================
   HOME — HERO
   ========================================= */

.home-hero {
    position: relative;
    width: 100%;
    max-width: none !important;
    min-height: 650px;
    margin-left: 0;
    margin-right: 0;
}

.home-hero.alignfull {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.home-hero__content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-hero h1 {
    max-width: 850px;
    margin-top: 12px;
    margin-bottom: 16px;
    color: #ffffff;
}

.home-hero p {
    color: #ffffff;
}

.home-hero .wp-block-buttons {
    margin-top: 32px;
    margin-bottom: 32px;
}

.home-hero .foulee-countdown {
    max-width: 520px;
    margin-top: 32px;
}

@media (max-width: 767px) {

    .home-hero {
        min-height: 620px;
    }

    .home-hero__content {
        padding: 64px 16px;
    }

    .home-hero h1 {
        font-size: 32px;
        line-height: 1.25;
    }

    .home-hero .foulee-countdown {
        margin-top: 24px;
    }
}

/* =========================================
   HOME — LE SOUFFLE
   ========================================= */

.home-breath {
    position: relative;
    overflow: hidden;
    background: #F6F1E8;
}

.home-breath__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-breath h2 {
    max-width: 760px;
    margin-bottom: 20px;
}

.home-breath p {
    max-width: 720px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.65;
}

/* =========================================
   MOTIF — SOUFFLE
   ========================================= */

.souffle-separator {
    position: relative !important;
    width: 150px !important;
    height: 36px !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.souffle-separator::before,
.souffle-separator::after {
    content: "";
    position: absolute;
    left: 0;
    width: 150px;
    height: 3px;
    border-radius: 999px;
    border: 0 !important;
    background: linear-gradient(
        90deg,
        #2C76B7 0%,
        #66B7E6 40%,
        #E0A43A 72%,
        #D86A3A 100%
    );
}

.souffle-separator::before {
    top: 9px;
    transform: rotate(-3deg);
}

.souffle-separator::after {
    top: 19px;
    width: 105px;
    opacity: 0.45;
    transform: rotate(4deg);
}

@media (max-width: 767px) {

    .home-breath__content {
        padding: 64px 16px;
    }

    .home-breath p {
        font-size: 16px;
    }
}

.souffle-separator hr {
    display: none !important;
}

.souffle-separator::marker {
    display: none;
}

/* =========================================
   HOME — COURSES
   ========================================= */

.home-courses {
    background: #FFFFFF;
}

.home-courses__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-courses h2 {
    margin-bottom: 12px;
}

.home-courses__content > p {
    margin-top: 0;
    margin-bottom: 40px;
    color: #1F2430;
    font-size: 18px;
    line-height: 1.6;
}

.home-courses .wp-block-columns {
    gap: 24px;
}

@media (max-width: 767px) {

    .home-courses__content {
        padding: 64px 16px;
    }

    .home-courses .wp-block-columns {
        gap: 24px;
    }
}

/* =========================================
   HOME — JEUNES
   ========================================= */

.home-youth {
    background: #F6F1E8;
}

.home-youth__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-youth .wp-block-columns {
    align-items: center;
    gap: 64px;
}

.home-youth__image {
    overflow: hidden;
    border-radius: 12px;
}

.home-youth__image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.home-youth h2 {
    max-width: 560px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.home-youth p {
    max-width: 560px;
    line-height: 1.6;
}

.home-youth .wp-block-button {
    margin-top: 24px;
}

@media (max-width: 767px) {

    .home-youth__content {
        padding: 64px 16px;
    }

    .home-youth .wp-block-columns {
        gap: 32px;
    }

    .home-youth .wp-block-column:first-child {
        order: 1;
    }

    .home-youth .wp-block-column:last-child {
        order: 2;
    }
}

/* =========================================
   HOME — PROGRAMME
   ========================================= */

.home-program {
    background: #FFFFFF;
}

.home-program__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-program__content > p:first-child {
    margin-bottom: 12px;
    color: #D86A3A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-program h2 {
    max-width: 760px;
    margin-top: 0;
    margin-bottom: 20px;
}

.home-program__content > p:nth-child(3) {
    max-width: 700px;
    margin-bottom: 48px;
    font-size: 18px;
    line-height: 1.6;
}

.home-program .wp-block-columns {
    gap: 24px;
}

.home-program .wp-block-column {
    padding: 32px;
    border: 1px solid rgba(31, 36, 48, 0.08);
    border-radius: 12px;
    background: #F6F1E8;
}

.home-program .wp-block-column h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.home-program .wp-block-column p {
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 767px) {

    .home-program__content {
        padding: 64px 16px;
    }

    .home-program__content > p:nth-child(3) {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .home-program .wp-block-columns {
        gap: 16px;
    }

    .home-program .wp-block-column {
        padding: 24px;
    }
}

/* =========================================
   HOME — INFOS PRATIQUES
   ========================================= */

.home-practical {
    background: #0E2A4A;
    color: #FFFFFF;
}

.home-practical__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-practical__content > p:first-child {
    margin-bottom: 12px;
    color: #66B7E6;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-practical h2 {
    max-width: 760px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.home-practical__content > p:nth-child(3) {
    max-width: 700px;
    margin-bottom: 48px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.6;
}

.home-practical .wp-block-columns {
    gap: 64px;
    align-items: center;
}

.home-practical h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.home-practical .wp-block-column p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

.home-practical__map {
    overflow: hidden;
    border-radius: 12px;
}

.home-practical__map img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.home-practical .wp-block-button {
    margin-top: 24px;
}

@media (max-width: 767px) {

    .home-practical__content {
        padding: 64px 16px;
    }

    .home-practical .wp-block-columns {
        gap: 32px;
    }

    .home-practical__content > p:nth-child(3) {
        font-size: 16px;
        margin-bottom: 32px;
    }
}

/* =========================================
   HOME — ESPRIT DE LA FOULÉE
   ========================================= */

.home-values {
    background: #F6F1E8;
}

.home-values__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-values__content > p:first-child {
    margin-bottom: 12px;
    color: #D86A3A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-values h2 {
    max-width: 800px;
    margin-top: 0;
    margin-bottom: 20px;
}

.home-values__content > p:nth-child(3) {
    max-width: 760px;
    margin-bottom: 48px;
    font-size: 18px;
    line-height: 1.6;
}

.home-values .wp-block-columns {
    gap: 24px;
}

.home-values .wp-block-column {
    padding: 32px;
    border-radius: 12px;
    background: #FFFFFF;
}

.home-values h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.home-values .wp-block-column p {
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 767px) {

    .home-values__content {
        padding: 64px 16px;
    }

    .home-values__content > p:nth-child(3) {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .home-values .wp-block-column {
        padding: 24px;
    }
}

/* =========================================
   HOME — BÉNÉVOLES
   ========================================= */

.home-volunteers {
    background: #FFFFFF;
}

.home-volunteers__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-volunteers .wp-block-columns {
    align-items: center;
    gap: 64px;
}

.home-volunteers__image {
    overflow: hidden;
    border-radius: 12px;
}

.home-volunteers__image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.home-volunteers h2 {
    max-width: 560px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.home-volunteers .wp-block-column p {
    max-width: 560px;
    line-height: 1.6;
}

.home-volunteers .wp-block-button {
    margin-top: 24px;
}

@media (max-width: 767px) {

    .home-volunteers__content {
        padding: 64px 16px;
    }

    .home-volunteers .wp-block-columns {
        gap: 32px;
    }
}

/* =========================================
   HOME — PARTENAIRES
   ========================================= */

.home-partners {
    background: #F6F1E8;
}

.home-partners__content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.home-partners__content > p:first-child {
    margin-bottom: 12px;
    color: #D86A3A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-partners h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.home-partners__content > p:nth-child(3) {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
    line-height: 1.6;
}

.home-partners figure {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: center;
}

.home-partners__logos img {
    align-items: center;
    display: flex;
    height: auto;
  }  

.home-partners__logos img {
    display: block;
    width: 100%;
    max-width: 150px;
    max-height: 80px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition:
        opacity 180ms ease,
        filter 180ms ease;
}

.home-partners__logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 1024px) {

    .home-partners__logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {

    .home-partners__content {
        padding: 64px 16px;
    }

    .home-partners__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
}

/* =========================================================
   HOMEPAGE — CTA FINAL
   ========================================================= */

.home-cta {
	background: #0E2A4A;
	color: #FFFFFF;
}

.home-cta__content {
	max-width: 900px;
	margin: 0 auto;
	padding-top: 96px;
	padding-bottom: 96px;
	text-align: center;
}

.home-cta__content > p:first-child {
	margin-bottom: 12px;
	color: #E0A43A;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home-cta h2 {
	margin-top: 0;
	margin-bottom: 20px;
	color: #FFFFFF;
}

.home-cta__content > p:nth-child(3) {
	max-width: 680px;
	margin-right: auto;
	margin-bottom: 32px;
	margin-left: auto;
	color: rgba(255, 255, 255, 0.88);
	font-size: 18px;
	line-height: 1.6;
}

.home-cta .wp-block-button__link {
	background: #D86A3A;
	color: #FFFFFF;
}

.home-cta .wp-block-button__link:hover {
	background: #B44B2C;
	transform: translateY(-2px);
}

@media (max-width: 767px) {

	.home-cta__content {
		padding: 64px 16px;
	}

	.home-cta h2 {
		font-size: 28px;
		line-height: 1.3;
	}

	.home-cta__content > p:nth-child(3) {
		font-size: 16px;
	}
}

/* =========================================================
   HEADER SUR LA HERO
   ========================================================= */

.site-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background: transparent !important;
	border-bottom: 0 !important;
	color: #FFFFFF;
}

.site-header__inner {
	background: transparent !important;
}

.site-header .wp-block-site-logo img {
	max-height: 64px;
	width: auto;
}

.site-header .site-navigation a {
	color: #FFFFFF !important;
}

.site-header .site-navigation a:hover {
	color: #FFFFFF !important;
}

.site-header__cta .wp-block-button__link {
	background: #D86A3A;
	color: #FFFFFF;
}

.site-header__cta .wp-block-button__link:hover {
	background: #B44B2C;
}

/* La Hero commence derrière le header */
.home-hero {
	padding-top: 0 !important;
}

/* Le contenu de la Hero reste transparent */
.home-hero__content {
	background: transparent !important;
}

.course-single {
    background: #F6F1E8;
}

.course-single__content {
    max-width: 1200px;
    padding: 96px 24px;
}

.course-single h1 {
    margin-bottom: 24px;
}

.course-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.course-single__meta p {
    margin: 0;
    padding: 10px 16px;
    background: #fff;
    border-radius: 999px;
    font-weight: 700;
}

.course-single .wp-block-post-featured-image {
    margin-bottom: 48px;
}

@media (max-width: 767px) {
    .course-single__content {
        padding: 64px 16px;
    }

    .course-single__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.course-single__details {
    margin-top: 64px;
}

.course-single__detail {
    margin-bottom: 48px;
}

.course-single__detail h2 {
    margin-bottom: 16px;
}

.course-single__map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.course-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.course-single__actions .wp-element-button {
    background: #D86A3A;
    color: #fff;
}

.course-single__actions .wp-element-button:hover {
    background: #B44B2C;
}

.home-practical__content .wp-block-image img,
.practical-page .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* =========================================================
   HEADER — comportement général
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: #F6F1E8;
    border-bottom: 1px solid rgba(31, 36, 48, .08);
    color: #1F2430;
    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.site-header__inner {
    transition: min-height .25s ease;
}


/* =========================================================
   HOME — header posé sur le hero
   ========================================================= */

.home .site-header {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent !important;
    border-bottom: 0;
    color: #fff;
}

.home .site-header .site-navigation a {
    color: #fff !important;
}

.home .site-header .wp-block-site-logo img {
    max-height: 82px;
    width: auto;
    transition: max-height .25s ease;
}


/* CTA */

.site-header__cta .wp-element-button,
.site-header__cta .wp-block-button__link {
    background: #D86A3A !important;
    color: #fff !important;
    border: 0 !important;
}

.site-header__cta .wp-element-button:hover,
.site-header__cta .wp-block-button__link:hover {
    background: #B44B2C !important;
    color: #fff !important;
}


/* =========================================================
   HOME — header après scroll
   ========================================================= */

.home .site-header.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    background: #0E2A4A !important;
    box-shadow: 0 8px 24px rgba(14, 42, 74, .18);
}

.home .site-header.is-scrolled .wp-block-site-logo img {
    max-height: 48px;
}

.home .site-header.is-scrolled .site-navigation a {
    color: #fff !important;
}


/* =========================================================
   AUTRES PAGES
   ========================================================= */

body:not(.home) .site-header .site-navigation a {
    color: #1F2430 !important;
}

body:not(.home) .site-header .wp-block-site-logo img {
    max-height: 52px;
}


/* =========================================================
   TRANSITION
   ========================================================= */

.site-header__inner {
    min-height: 82px;
}

.home .site-header.is-scrolled .site-header__inner {
    min-height: 68px;
}

/* =========================================================
   COURSE CARDS
   ========================================================= */

.foulee-course-card {
    overflow: hidden;
}

.foulee-course-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.foulee-course-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Bouton */

.foulee-course-card__button .wp-element-button,
.foulee-course-card__button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    background: #D86A3A !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: none !important;
}

.foulee-course-card__button .wp-element-button:hover,
.foulee-course-card__button a:hover {
    background: #B44B2C !important;
    color: #fff !important;
}

/* Logo home : grand dans le hero */
.home .site-header .wp-block-site-logo {
    width: 180px !important;
    max-width: 180px !important;
}

.home .site-header .wp-block-site-logo img {
    display: block;
    width: 180px !important;
    max-width: 180px !important;
    max-height: none !important;
    height: auto !important;
}

/* Logo réduit après scroll */
.home .site-header.is-scrolled .wp-block-site-logo {
    width: 115px !important;
    max-width: 115px !important;
}

.home .site-header.is-scrolled .wp-block-site-logo img {
    width: 60px !important;
    max-width: 60px !important;
}


.site-navigation {
    gap: 26px !important;
}

.site-navigation a {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-decoration: none !important;
    transition: opacity .2s ease, transform .2s ease;
}

.site-navigation a:hover {
    opacity: .75;
    transform: translateY(-1px);
}

.home .site-header:not(.is-scrolled) .site-navigation a {
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

.site-header__cta .wp-element-button,
.site-header__cta .wp-block-button__link {
    min-height: 42px;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

body {
    font-family: "Inter", sans-serif;
    color: #1F2430;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

h1 {
    font-weight: 800;
}

button,
input,
select,
textarea,
.wp-element-button,
.wp-block-button__link {
    font-family: "Inter", sans-serif;
}

/* =========================================================
   HERO
   ========================================================= */

.home-hero {
    min-height: 680px;
}

.home-hero__content {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 110px;
    padding-bottom: 70px;
}

.home-hero__content h1 {
    max-width: 780px;
    margin-top: 16px;
    margin-bottom: 20px;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.home-hero__content p {
    max-width: 620px;
}

.home-hero__content .wp-block-button {
    margin-top: 12px;
}

@media (max-width: 767px) {

    .home .site-header .wp-block-site-logo,
    .home .site-header .wp-block-site-logo img {
        width: 120px !important;
        max-width: 120px !important;
    }

    .home .site-header.is-scrolled .wp-block-site-logo,
    .home .site-header.is-scrolled .wp-block-site-logo img {
        width: 92px !important;
        max-width: 92px !important;
    }

    .home-hero,
    .home-hero__content {
        min-height: 620px;
    }

    .home-hero__content {
        padding-top: 130px;
        padding-bottom: 48px;
        justify-content: center;
    }

    .home-hero__content h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.05;
    }

    .home-hero__content p {
        font-size: 15px;
        line-height: 1.5;
    }
}

/* =========================================================
   RYTHME DES SECTIONS
   ========================================================= */

.home-breath__content,
.home-courses__content,
.home-youth__content,
.home-program__content,
.home-practical__content,
.home-values__content,
.home-volunteers__content,
.home-partners__content,
.home-cta__content {
    padding-top: 88px;
    padding-bottom: 88px;
}

.home-breath h2,
.home-courses h2,
.home-program h2,
.home-values h2,
.home-partners h2 {
    margin-bottom: 16px;
}

.home-breath p,
.home-courses > .home-courses__content > p,
.home-program > .home-program__content > p,
.home-values > .home-values__content > p,
.home-partners > .home-partners__content > p {
    max-width: 680px;
}

.home .site-header {
    z-index: 1000;
}

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

.home-hero__content {
    position: relative;
    z-index: 2;
}

/* =========================================================
   MENU MOBILE — toutes les pages
   ========================================================= */

@media (max-width: 767px) {

    /* Conteneur du menu ouvert */
    .site-header .site-navigation {
        background: #0E2A4A !important;
        color: #fff !important;
    }

    /* Liens */
    .site-header .site-navigation a,
    .site-header .site-navigation .wp-block-navigation-item__content {
        color: #fff !important;
    }

    .site-header .site-navigation a:hover,
    .site-header .site-navigation .wp-block-navigation-item__content:hover {
        color: #fff !important;
        opacity: .75;
    }

    /* Bouton de fermeture */
    .site-header .site-navigation button,
    .site-header .site-navigation .wp-block-navigation__responsive-container-close {
        color: #fff !important;
    }

    /* Icônes du bouton burger / fermeture */
    .site-header .site-navigation svg {
        fill: currentColor;
    }

}

/* =========================================================
   PAGES INTERNES — CONTENEUR ET MARGES
   ========================================================= */

body:not(.home) main.wp-block-group > .wp-block-group,
body:not(.home) main.wp-block-group > .wp-block-post-content,
body:not(.home) .wp-block-post-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Les éléments pleine largeur restent pleine largeur */
body:not(.home) main.alignfull {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767px) {

    body:not(.home) main.wp-block-group > .wp-block-group,
    body:not(.home) main.wp-block-group > .wp-block-post-content,
    body:not(.home) .wp-block-post-content {
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* Pages classiques */
.page-main {
    width: 100%;
    box-sizing: border-box;
}

.page-main > .wp-block-post-title,
.page-main > .wp-block-post-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .page-main > .wp-block-post-title,
    .page-main > .wp-block-post-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   FICHE COURSE
   ========================================================= */

.course-single {
    width: 100%;
    background: #F6F1E8;
}

.course-single__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 96px 24px;
}

.course-single h1 {
    margin-top: 0;
    margin-bottom: 24px;
}

.course-single .wp-block-post-featured-image {
    margin-top: 32px;
    margin-bottom: 48px;
}

.course-single .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.course-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.course-single__meta p {
    margin: 0;
    padding: 10px 16px;
    background: #fff;
    border-radius: 999px;
    font-weight: 700;
}

.course-single__details {
    margin-top: 64px;
}

.course-single__detail {
    margin-bottom: 48px;
}

.course-single__detail h2 {
    margin-bottom: 16px;
}

.course-single__map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.course-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.course-single__actions .wp-element-button {
    background: #D86A3A !important;
    color: #fff !important;
}

.course-single__actions .wp-element-button:hover {
    background: #B44B2C !important;
}

@media (max-width: 767px) {

    .course-single__content {
        padding: 64px 16px;
    }

    .course-single__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .course-single__details {
        margin-top: 48px;
    }
}

.foulee-courses-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

@media(max-width:1023px) {
    .foulee-courses-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767px) {
    .foulee-courses-grid {
        grid-template-columns:1fr;
    }
}