@media screen and (max-width: 1199px) {
  main {
    padding-top: calc((var(--logo-width, 3.4rem) * 0.598) + (var(--spacing-sm, 1rem) * 2) + var(--spacing-2xl, 3rem)) !important;
  }
}

/* Augmentation du padding pour les très petits écrans */
@media screen and (max-width: 380px) {
  main {
    padding-top: calc((var(--logo-width, 3.4rem) * 0.598) + (var(--spacing-sm, 1rem) * 2) + var(--spacing-3xl, 4rem)) !important;
  }
}

.hero-image img,
.img img{
    object-fit: cover
}

a,
a:hover {
    text-decoration: none
}

body,
ul.h2-sub {
    line-height: var(--line-height)
}

body,
p,
ul {
    color: var(--text-color)
}

.autogrid,
.grid {
    --gutter: 3rem;
    grid-gap: var(--gutter)
}

.pt-lg,
main,
section {
    padding-top: var(--spacing-lg, 1.5rem)
}

.footer:before,
.note-excerpt header,
.text ol,
.text p,
.text ul {
    margin-bottom: 1.5rem
}

.footer h2,
.text dt {
    font-weight: 600
}
.sr-only {
    overflow: hidden
}

.navigation__button,
a {
    cursor: pointer
}

.menu,
.text figure ul li,
li {
    list-style: none
}

.sr-only,
.submenu {
    white-space: nowrap
}

.footer,
.navigation-button{
    text-align: center
}

/* SofiaSans - Police variable (200-900) */
@font-face {
    font-family: 'SofiaSans';
    src: url('../fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SofiaSans';
    src: url('../fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap
}

/* Alias pour compatibilité avec l'ancien code */
@font-face {
    font-family: 'SofiaSans-Regular';
    src: url('../fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-display: swap
}

@font-face {
    font-family: 'SofiaSans-Bold';
    src: url('../fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-display: swap
}

@font-face {
    font-family: 'SofiaSans-ExtraBold';
    src: url('../fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-display: swap
}

@font-face {
    font-family: 'SofiaSans-Black';
    src: url('../fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-display: swap
}

@media screen and (max-width:20rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.6rem;
        --spacing-xs: 0.7rem;
        --spacing-sm: 1rem;
        --spacing-md: 1.3rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-1·5xl: 2.2rem;
        --spacing-2xl: 2.4rem;
        --spacing-3xl: 3rem;
        --spacing-4xl: 3.7rem;
        --spacing-5xl: 7.5rem;
        --margin-page: 1.2rem;
        --padding-main-mobile: 3.8rem;
        --font-size-h1: 1.7rem;
        --font-size-info: 1.3rem;
        --font-size-h2: 1.7rem;
        --font-size-h2-activites: 1.4rem;
        --font-size-h3: 1.2rem;
        --font-size-h1-sub: 1.2rem;
        --font-size-h2-sub: 0.9rem;
        --font-size-p: 1rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 0.8rem;
        --font-size-button: 1rem;
        --border-radius: -21.8rem;
        --column-gap: 1rem;
        --logo-width: 3.4rem;
        --width-button-arrow: 2.2rem;
        --icon-mobile-width: 1.6rem;
        --spacing-divider: 3.1rem;
        --height-activite-card: 5.4rem;
        --width-bulle-mobile: 19.3rem;
        --width-bulle-desktop: -26.7rem;
        --width-bulle-mobile-icone: 6.2rem;
        --menu-activites-mobile: 0.9rem;
        --icon-mobile-width: 1.6rem;
        --font-size-nav-mobile: 0.8rem;
        --font-size-nav-mobile: 7.8rem;
        --font-size-nav-mobile: 0.9rem;
        --font-size-nav-mobile: -1.2rem;
        --font-size-nav-mobile: -0.6rem;
        --font-size-nav-mobile: -3rem;
        --font-size-nav-mobile: -7.5rem;
        --font-size-nav-mobile: -1.3rem;
        --font-size-nav-mobile: -5.6rem;
        --font-size-nav-mobile: 3rem
    }
}

@media screen and (max-width:26.25rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.6rem;
        --spacing-xs: 0.8rem;
        --spacing-sm: 1.1rem;
        --spacing-md: 1.4rem;
        --spacing-lg: 1.7rem;
        --spacing-xl: 2.3rem;
        --spacing-1·5xl: 2.6rem;
        --spacing-2xl: 2.9rem;
        --spacing-3xl: 3.8rem;
        --spacing-4xl: 4.8rem;
        --spacing-5xl: 9.6rem;
        --margin-page: 1.4rem;
        --padding-main-mobile: 4rem;
        --font-size-h1: 2rem;
        --font-size-info: 1.5rem;
        --font-size-h2: 1.9rem;
        --font-size-h2-activites: 1.5rem;
        --font-size-h3: 1.3rem;
        --font-size-h1-sub: 1.3rem;
        --font-size-h2-sub: 1rem;
        --font-size-p: 1.1rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 0.8rem;
        --font-size-button: 1rem;
        --border-radius: -18.9rem;
        --column-gap: 1.1rem;
        --logo-width: 3.8rem;
        --width-button-arrow: 2.4rem;
        --icon-mobile-width: 1.7rem;
        --spacing-divider: 1.8rem;
        --height-activite-card: 5.8rem;
        --width-bulle-mobile: 20.2rem;
        --width-bulle-desktop: -21.4rem;
        --width-bulle-mobile-icone: 6.4rem;
        --menu-activites-mobile: 1.1rem;
        --icon-mobile-width: 1.7rem;
        --font-size-nav-mobile: 0.8rem;
        --font-size-nav-mobile: 9.2rem;
        --font-size-nav-mobile: 2.1rem;
        --font-size-nav-mobile: -1.4rem;
        --font-size-nav-mobile: -0.6rem;
        --font-size-nav-mobile: -3.8rem;
        --font-size-nav-mobile: -9.6rem;
        --font-size-nav-mobile: -1.4rem;
        --font-size-nav-mobile: -7.2rem;
        --font-size-nav-mobile: 3.9rem
    }
}

@media screen and (max-width:32.5rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.7rem;
        --spacing-xs: 0.9rem;
        --spacing-sm: 1.2rem;
        --spacing-md: 1.6rem;
        --spacing-lg: 2rem;
        --spacing-xl: 2.7rem;
        --spacing-1·5xl: 3.1rem;
        --spacing-2xl: 3.4rem;
        --spacing-3xl: 4.6rem;
        --spacing-4xl: 5.9rem;
        --spacing-5xl: 11.8rem;
        --margin-page: 1.6rem;
        --padding-main-mobile: 4.3rem;
        --font-size-h1: 2.2rem;
        --font-size-info: 1.7rem;
        --font-size-h2: 2rem;
        --font-size-h2-activites: 1.7rem;
        --font-size-h3: 1.4rem;
        --font-size-h1-sub: 1.4rem;
        --font-size-h2-sub: 1.1rem;
        --font-size-p: 1.1rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 0.9rem;
        --font-size-button: 1.1rem;
        --border-radius: -16rem;
        --column-gap: 1.2rem;
        --logo-width: 4.2rem;
        --width-button-arrow: 2.6rem;
        --icon-mobile-width: 1.8rem;
        --spacing-divider: 0.5rem;
        --height-activite-card: 6.1rem;
        --width-bulle-mobile: 21.1rem;
        --width-bulle-desktop: -16rem;
        --width-bulle-mobile-icone: 6.6rem;
        --menu-activites-mobile: 1.3rem;
        --icon-mobile-width: 1.8rem;
        --font-size-nav-mobile: 0.9rem;
        --font-size-nav-mobile: 10.5rem;
        --font-size-nav-mobile: 3.3rem;
        --font-size-nav-mobile: -1.6rem;
        --font-size-nav-mobile: -0.7rem;
        --font-size-nav-mobile: -4.6rem;
        --font-size-nav-mobile: -11.8rem;
        --font-size-nav-mobile: -1.6rem;
        --font-size-nav-mobile: -8.9rem;
        --font-size-nav-mobile: 4.7rem
    }
}

@media screen and (max-width:38.75rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.7rem;
        --spacing-xs: 0.9rem;
        --spacing-sm: 1.3rem;
        --spacing-md: 1.7rem;
        --spacing-lg: 2.2rem;
        --spacing-xl: 3rem;
        --spacing-1·5xl: 3.5rem;
        --spacing-2xl: 3.9rem;
        --spacing-3xl: 5.4rem;
        --spacing-4xl: 7rem;
        --spacing-5xl: 14rem;
        --margin-page: 1.8rem;
        --padding-main-mobile: 4.6rem;
        --font-size-h1: 2.5rem;
        --font-size-info: 2rem;
        --font-size-h2: 2.1rem;
        --font-size-h2-activites: 1.8rem;
        --font-size-h3: 1.5rem;
        --font-size-h1-sub: 1.5rem;
        --font-size-h2-sub: 1.2rem;
        --font-size-p: 1.2rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 0.9rem;
        --font-size-button: 1.1rem;
        --border-radius: -13.1rem;
        --column-gap: 1.3rem;
        --logo-width: 4.6rem;
        --width-button-arrow: 2.7rem;
        --icon-mobile-width: 2rem;
        --spacing-divider: -0.8rem;
        --height-activite-card: 6.4rem;
        --width-bulle-mobile: 22rem;
        --width-bulle-desktop: -10.6rem;
        --width-bulle-mobile-icone: 6.9rem;
        --menu-activites-mobile: 1.5rem;
        --icon-mobile-width: 2rem;
        --font-size-nav-mobile: 0.9rem;
        --font-size-nav-mobile: 11.8rem;
        --font-size-nav-mobile: 4.5rem;
        --font-size-nav-mobile: -1.8rem;
        --font-size-nav-mobile: -0.7rem;
        --font-size-nav-mobile: -5.4rem;
        --font-size-nav-mobile: -14rem;
        --font-size-nav-mobile: -1.7rem;
        --font-size-nav-mobile: -10.5rem;
        --font-size-nav-mobile: 5.6rem
    }
}

@media screen and (max-width:45rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.8rem;
        --spacing-xs: 1rem;
        --spacing-sm: 1.4rem;
        --spacing-md: 1.9rem;
        --spacing-lg: 2.4rem;
        --spacing-xl: 3.4rem;
        --spacing-1·5xl: 3.9rem;
        --spacing-2xl: 4.4rem;
        --spacing-3xl: 6.2rem;
        --spacing-4xl: 8.1rem;
        --spacing-5xl: 16.2rem;
        --margin-page: 2rem;
        --padding-main-mobile: 4.9rem;
        --font-size-h1: 2.7rem;
        --font-size-info: 2.2rem;
        --font-size-h2: 2.2rem;
        --font-size-h2-activites: 1.9rem;
        --font-size-h3: 1.6rem;
        --font-size-h1-sub: 1.6rem;
        --font-size-h2-sub: 1.2rem;
        --font-size-p: 1.2rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1rem;
        --font-size-button: 1.2rem;
        --border-radius: -10.2rem;
        --column-gap: 1.4rem;
        --logo-width: 5.1rem;
        --width-button-arrow: 2.9rem;
        --icon-mobile-width: 2.1rem;
        --spacing-divider: -2.1rem;
        --height-activite-card: 6.7rem;
        --width-bulle-mobile: 22.9rem;
        --width-bulle-desktop: -5.2rem;
        --width-bulle-mobile-icone: 7.1rem;
        --menu-activites-mobile: 1.7rem;
        --icon-mobile-width: 2.1rem;
        --font-size-nav-mobile: 1rem;
        --font-size-nav-mobile: 13.1rem;
        --font-size-nav-mobile: 5.6rem;
        --font-size-nav-mobile: -2rem;
        --font-size-nav-mobile: -0.8rem;
        --font-size-nav-mobile: -6.2rem;
        --font-size-nav-mobile: -16.2rem;
        --font-size-nav-mobile: -1.9rem;
        --font-size-nav-mobile: -12.2rem;
        --font-size-nav-mobile: 6.5rem
    }
}

@media screen and (max-width:51.25rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.8rem;
        --spacing-xs: 1.1rem;
        --spacing-sm: 1.5rem;
        --spacing-md: 2.1rem;
        --spacing-lg: 2.6rem;
        --spacing-xl: 3.8rem;
        --spacing-1·5xl: 4.3rem;
        --spacing-2xl: 4.9rem;
        --spacing-3xl: 7rem;
        --spacing-4xl: 9.2rem;
        --spacing-5xl: 18.4rem;
        --margin-page: 2.1rem;
        --padding-main-mobile: 5.2rem;
        --font-size-h1: 3rem;
        --font-size-info: 2.4rem;
        --font-size-h2: 2.3rem;
        --font-size-h2-activites: 2.1rem;
        --font-size-h3: 1.7rem;
        --font-size-h1-sub: 1.8rem;
        --font-size-h2-sub: 1.3rem;
        --font-size-p: 1.2rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1rem;
        --font-size-button: 1.3rem;
        --border-radius: -7.3rem;
        --column-gap: 1.5rem;
        --logo-width: 5.5rem;
        --width-button-arrow: 3.1rem;
        --icon-mobile-width: 2.3rem;
        --spacing-divider: -3.4rem;
        --height-activite-card: 7.1rem;
        --width-bulle-mobile: 23.9rem;
        --width-bulle-desktop: 0.2rem;
        --width-bulle-mobile-icone: 7.3rem;
        --menu-activites-mobile: 1.9rem;
        --icon-mobile-width: 2.3rem;
        --font-size-nav-mobile: 1rem;
        --font-size-nav-mobile: 14.5rem;
        --font-size-nav-mobile: 6.8rem;
        --font-size-nav-mobile: -2.1rem;
        --font-size-nav-mobile: -0.8rem;
        --font-size-nav-mobile: -7rem;
        --font-size-nav-mobile: -18.4rem;
        --font-size-nav-mobile: -2.1rem;
        --font-size-nav-mobile: -13.8rem;
        --font-size-nav-mobile: 7.4rem
    }
}

@media screen and (max-width:57.5rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.8rem;
        --spacing-xs: 1.1rem;
        --spacing-sm: 1.6rem;
        --spacing-md: 2.2rem;
        --spacing-lg: 2.8rem;
        --spacing-xl: 4.1rem;
        --spacing-1·5xl: 4.8rem;
        --spacing-2xl: 5.4rem;
        --spacing-3xl: 7.8rem;
        --spacing-4xl: 10.3rem;
        --spacing-5xl: 20.6rem;
        --margin-page: 2.3rem;
        --padding-main-mobile: 5.5rem;
        --font-size-h1: 3.2rem;
        --font-size-info: 2.6rem;
        --font-size-h2: 2.4rem;
        --font-size-h2-activites: 2.2rem;
        --font-size-h3: 1.8rem;
        --font-size-h1-sub: 1.9rem;
        --font-size-h2-sub: 1.4rem;
        --font-size-p: 1.3rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.1rem;
        --font-size-button: 1.3rem;
        --border-radius: -4.5rem;
        --column-gap: 1.6rem;
        --logo-width: 5.9rem;
        --width-button-arrow: 3.2rem;
        --icon-mobile-width: 2.4rem;
        --spacing-divider: -4.7rem;
        --height-activite-card: 7.4rem;
        --width-bulle-mobile: 24.8rem;
        --width-bulle-desktop: 5.6rem;
        --width-bulle-mobile-icone: 7.5rem;
        --menu-activites-mobile: 2.1rem;
        --icon-mobile-width: 2.4rem;
        --font-size-nav-mobile: 1.1rem;
        --font-size-nav-mobile: 15.8rem;
        --font-size-nav-mobile: 8rem;
        --font-size-nav-mobile: -2.3rem;
        --font-size-nav-mobile: -0.8rem;
        --font-size-nav-mobile: -7.8rem;
        --font-size-nav-mobile: -20.6rem;
        --font-size-nav-mobile: -2.2rem;
        --font-size-nav-mobile: -15.4rem;
        --font-size-nav-mobile: 8.2rem
    }
}

@media screen and (max-width:63.75rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.9rem;
        --spacing-xs: 1.2rem;
        --spacing-sm: 1.7rem;
        --spacing-md: 2.4rem;
        --spacing-lg: 3.1rem;
        --spacing-xl: 4.5rem;
        --spacing-1·5xl: 5.2rem;
        --spacing-2xl: 5.9rem;
        --spacing-3xl: 8.6rem;
        --spacing-4xl: 11.4rem;
        --spacing-5xl: 22.8rem;
        --margin-page: 2.5rem;
        --padding-main-mobile: 5.7rem;
        --font-size-h1: 3.5rem;
        --font-size-info: 2.9rem;
        --font-size-h2: 2.5rem;
        --font-size-h2-activites: 2.4rem;
        --font-size-h3: 1.9rem;
        --font-size-h1-sub: 2rem;
        --font-size-h2-sub: 1.5rem;
        --font-size-p: 1.3rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.1rem;
        --font-size-button: 1.4rem;
        --border-radius: -1.6rem;
        --column-gap: 1.7rem;
        --logo-width: 6.3rem;
        --width-button-arrow: 3.4rem;
        --icon-mobile-width: 2.5rem;
        --spacing-divider: -6rem;
        --height-activite-card: 7.7rem;
        --width-bulle-mobile: 25.7rem;
        --width-bulle-desktop: 11rem;
        --width-bulle-mobile-icone: 7.7rem;
        --menu-activites-mobile: 2.3rem;
        --icon-mobile-width: 2.5rem;
        --font-size-nav-mobile: 1.1rem;
        --font-size-nav-mobile: 17.1rem;
        --font-size-nav-mobile: 9.1rem;
        --font-size-nav-mobile: -2.5rem;
        --font-size-nav-mobile: -0.9rem;
        --font-size-nav-mobile: -8.6rem;
        --font-size-nav-mobile: -22.8rem;
        --font-size-nav-mobile: -2.4rem;
        --font-size-nav-mobile: -17.1rem;
        --font-size-nav-mobile: 9.1rem
    }
}

@media screen and (max-width:70rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.9rem;
        --spacing-xs: 1.3rem;
        --spacing-sm: 1.7rem;
        --spacing-md: 2.5rem;
        --spacing-lg: 3.3rem;
        --spacing-xl: 4.8rem;
        --spacing-1·5xl: 5.6rem;
        --spacing-2xl: 6.4rem;
        --spacing-3xl: 9.4rem;
        --spacing-4xl: 12.5rem;
        --spacing-5xl: 25rem;
        --margin-page: 2.7rem;
        --padding-main-mobile: 6rem;
        --font-size-h1: 3.7rem;
        --font-size-info: 3.1rem;
        --font-size-h2: 2.6rem;
        --font-size-h2-activites: 2.5rem;
        --font-size-h3: 2rem;
        --font-size-h1-sub: 2.1rem;
        --font-size-h2-sub: 1.5rem;
        --font-size-p: 1.4rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.2rem;
        --font-size-button: 1.4rem;
        --border-radius: 1.3rem;
        --column-gap: 1.7rem;
        --logo-width: 6.7rem;
        --width-button-arrow: 3.6rem;
        --icon-mobile-width: 2.7rem;
        --spacing-divider: -7.3rem;
        --height-activite-card: 8.1rem;
        --width-bulle-mobile: 26.6rem;
        --width-bulle-desktop: 16.4rem;
        --width-bulle-mobile-icone: 8rem;
        --menu-activites-mobile: 2.5rem;
        --icon-mobile-width: 2.7rem;
        --font-size-nav-mobile: 1.2rem;
        --font-size-nav-mobile: 18.5rem;
        --font-size-nav-mobile: 10.3rem;
        --font-size-nav-mobile: -2.7rem;
        --font-size-nav-mobile: -0.9rem;
        --font-size-nav-mobile: -9.4rem;
        --font-size-nav-mobile: -25rem;
        --font-size-nav-mobile: -2.5rem;
        --font-size-nav-mobile: -18.7rem;
        --font-size-nav-mobile: 10rem
    }
}

@media screen and (max-width:76.25rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 0.9rem;
        --spacing-xs: 1.3rem;
        --spacing-sm: 1.8rem;
        --spacing-md: 2.7rem;
        --spacing-lg: 3.5rem;
        --spacing-xl: 5.2rem;
        --spacing-1·5xl: 6rem;
        --spacing-2xl: 6.9rem;
        --spacing-3xl: 10.2rem;
        --spacing-4xl: 13.6rem;
        --spacing-5xl: 27.2rem;
        --margin-page: 2.9rem;
        --padding-main-mobile: 6.3rem;
        --font-size-h1: 4rem;
        --font-size-info: 3.3rem;
        --font-size-h2: 2.7rem;
        --font-size-h2-activites: 2.7rem;
        --font-size-h3: 2rem;
        --font-size-h1-sub: 2.3rem;
        --font-size-h2-sub: 1.6rem;
        --font-size-p: 1.4rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.3rem;
        --font-size-button: 1.5rem;
        --border-radius: 4.2rem;
        --column-gap: 1.8rem;
        --logo-width: 7.1rem;
        --width-button-arrow: 3.8rem;
        --icon-mobile-width: 2.8rem;
        --spacing-divider: -8.6rem;
        --height-activite-card: 8.4rem;
        --width-bulle-mobile: 27.6rem;
        --width-bulle-desktop: 21.7rem;
        --width-bulle-mobile-icone: 8.2rem;
        --menu-activites-mobile: 2.7rem;
        --icon-mobile-width: 2.8rem;
        --font-size-nav-mobile: 1.3rem;
        --font-size-nav-mobile: 19.8rem;
        --font-size-nav-mobile: 11.5rem;
        --font-size-nav-mobile: -2.9rem;
        --font-size-nav-mobile: -0.9rem;
        --font-size-nav-mobile: -10.2rem;
        --font-size-nav-mobile: -27.2rem;
        --font-size-nav-mobile: -2.7rem;
        --font-size-nav-mobile: -20.4rem;
        --font-size-nav-mobile: 10.9rem
    }
}

@media screen and (max-width:82.5rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1rem;
        --spacing-xs: 1.4rem;
        --spacing-sm: 1.9rem;
        --spacing-md: 2.8rem;
        --spacing-lg: 3.7rem;
        --spacing-xl: 5.6rem;
        --spacing-1·5xl: 6.5rem;
        --spacing-2xl: 7.4rem;
        --spacing-3xl: 11rem;
        --spacing-4xl: 14.7rem;
        --spacing-5xl: 29.3rem;
        --margin-page: 3.1rem;
        --padding-main-mobile: 6.6rem;
        --font-size-h1: 4.2rem;
        --font-size-info: 3.5rem;
        --font-size-h2: 2.8rem;
        --font-size-h2-activites: 2.8rem;
        --font-size-h3: 2.1rem;
        --font-size-h1-sub: 2.4rem;
        --font-size-h2-sub: 1.7rem;
        --font-size-p: 1.5rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.3rem;
        --font-size-button: 1.6rem;
        --border-radius: 7.1rem;
        --column-gap: 1.9rem;
        --logo-width: 7.5rem;
        --width-button-arrow: 3.9rem;
        --icon-mobile-width: 3rem;
        --spacing-divider: -9.9rem;
        --height-activite-card: 8.7rem;
        --width-bulle-mobile: 28.5rem;
        --width-bulle-desktop: 27.1rem;
        --width-bulle-mobile-icone: 8.4rem;
        --menu-activites-mobile: 2.9rem;
        --icon-mobile-width: 3rem;
        --font-size-nav-mobile: 1.3rem;
        --font-size-nav-mobile: 21.1rem;
        --font-size-nav-mobile: 12.7rem;
        --font-size-nav-mobile: -3.1rem;
        --font-size-nav-mobile: -1rem;
        --font-size-nav-mobile: -11rem;
        --font-size-nav-mobile: -29.3rem;
        --font-size-nav-mobile: -2.8rem;
        --font-size-nav-mobile: -22rem;
        --font-size-nav-mobile: 11.7rem
    }
}

@media screen and (max-width:88.75rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1rem;
        --spacing-xs: 1.5rem;
        --spacing-sm: 2rem;
        --spacing-md: 3rem;
        --spacing-lg: 4rem;
        --spacing-xl: 5.9rem;
        --spacing-1·5xl: 6.9rem;
        --spacing-2xl: 7.9rem;
        --spacing-3xl: 11.8rem;
        --spacing-4xl: 15.8rem;
        --spacing-5xl: 31.5rem;
        --margin-page: 3.3rem;
        --padding-main-mobile: 6.9rem;
        --font-size-h1: 4.5rem;
        --font-size-info: 3.7rem;
        --font-size-h2: 2.9rem;
        --font-size-h2-activites: 3rem;
        --font-size-h3: 2.2rem;
        --font-size-h1-sub: 2.5rem;
        --font-size-h2-sub: 1.8rem;
        --font-size-p: 1.5rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.4rem;
        --font-size-button: 1.6rem;
        --border-radius: 10rem;
        --column-gap: 2rem;
        --logo-width: 7.9rem;
        --width-button-arrow: 4.1rem;
        --icon-mobile-width: 3.1rem;
        --spacing-divider: -11.2rem;
        --height-activite-card: 9rem;
        --width-bulle-mobile: 29.4rem;
        --width-bulle-desktop: 32.5rem;
        --width-bulle-mobile-icone: 8.6rem;
        --menu-activites-mobile: 3.1rem;
        --icon-mobile-width: 3.1rem;
        --font-size-nav-mobile: 1.4rem;
        --font-size-nav-mobile: 22.4rem;
        --font-size-nav-mobile: 13.8rem;
        --font-size-nav-mobile: -3.3rem;
        --font-size-nav-mobile: -1rem;
        --font-size-nav-mobile: -11.8rem;
        --font-size-nav-mobile: -31.5rem;
        --font-size-nav-mobile: -3rem;
        --font-size-nav-mobile: -23.6rem;
        --font-size-nav-mobile: 12.6rem
    }
}

@media screen and (max-width:95rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1rem;
        --spacing-xs: 1.5rem;
        --spacing-sm: 2.1rem;
        --spacing-md: 3.1rem;
        --spacing-lg: 4.2rem;
        --spacing-xl: 6.3rem;
        --spacing-1·5xl: 7.3rem;
        --spacing-2xl: 8.4rem;
        --spacing-3xl: 12.6rem;
        --spacing-4xl: 16.9rem;
        --spacing-5xl: 33.7rem;
        --margin-page: 3.5rem;
        --padding-main-mobile: 7.2rem;
        --font-size-h1: 4.7rem;
        --font-size-info: 4rem;
        --font-size-h2: 3rem;
        --font-size-h2-activites: 3.1rem;
        --font-size-h3: 2.3rem;
        --font-size-h1-sub: 2.6rem;
        --font-size-h2-sub: 1.9rem;
        --font-size-p: 1.5rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.4rem;
        --font-size-button: 1.7rem;
        --border-radius: 12.9rem;
        --column-gap: 2.1rem;
        --logo-width: 8.3rem;
        --width-button-arrow: 4.3rem;
        --icon-mobile-width: 3.2rem;
        --spacing-divider: -12.5rem;
        --height-activite-card: 9.4rem;
        --width-bulle-mobile: 30.3rem;
        --width-bulle-desktop: 37.9rem;
        --width-bulle-mobile-icone: 8.8rem;
        --menu-activites-mobile: 3.3rem;
        --icon-mobile-width: 3.2rem;
        --font-size-nav-mobile: 1.4rem;
        --font-size-nav-mobile: 23.8rem;
        --font-size-nav-mobile: 15rem;
        --font-size-nav-mobile: -3.5rem;
        --font-size-nav-mobile: -1rem;
        --font-size-nav-mobile: -12.6rem;
        --font-size-nav-mobile: -33.7rem;
        --font-size-nav-mobile: -3.1rem;
        --font-size-nav-mobile: -25.3rem;
        --font-size-nav-mobile: 13.5rem
    }
}

@media screen and (max-width:101.25rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1.1rem;
        --spacing-xs: 1.6rem;
        --spacing-sm: 2.2rem;
        --spacing-md: 3.3rem;
        --spacing-lg: 4.4rem;
        --spacing-xl: 6.6rem;
        --spacing-1·5xl: 7.7rem;
        --spacing-2xl: 8.8rem;
        --spacing-3xl: 13.4rem;
        --spacing-4xl: 18rem;
        --spacing-5xl: 35.9rem;
        --margin-page: 3.6rem;
        --padding-main-mobile: 7.4rem;
        --font-size-h1: 5rem;
        --font-size-info: 4.2rem;
        --font-size-h2: 3.1rem;
        --font-size-h2-activites: 3.3rem;
        --font-size-h3: 2.4rem;
        --font-size-h1-sub: 2.7rem;
        --font-size-h2-sub: 1.9rem;
        --font-size-p: 1.6rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.5rem;
        --font-size-button: 1.7rem;
        --border-radius: 15.8rem;
        --column-gap: 2.2rem;
        --logo-width: 8.7rem;
        --width-button-arrow: 4.5rem;
        --icon-mobile-width: 3.4rem;
        --spacing-divider: -13.8rem;
        --height-activite-card: 9.7rem;
        --width-bulle-mobile: 31.3rem;
        --width-bulle-desktop: 43.3rem;
        --width-bulle-mobile-icone: 9.1rem;
        --menu-activites-mobile: 3.5rem;
        --icon-mobile-width: 3.4rem;
        --font-size-nav-mobile: 1.5rem;
        --font-size-nav-mobile: 25.1rem;
        --font-size-nav-mobile: 16.2rem;
        --font-size-nav-mobile: -3.6rem;
        --font-size-nav-mobile: -1.1rem;
        --font-size-nav-mobile: -13.4rem;
        --font-size-nav-mobile: -35.9rem;
        --font-size-nav-mobile: -3.3rem;
        --font-size-nav-mobile: -26.9rem;
        --font-size-nav-mobile: 14.4rem
    }
}

@media screen and (max-width:107.5rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1.1rem;
        --spacing-xs: 1.7rem;
        --spacing-sm: 2.3rem;
        --spacing-md: 3.5rem;
        --spacing-lg: 4.6rem;
        --spacing-xl: 7rem;
        --spacing-1·5xl: 8.2rem;
        --spacing-2xl: 9.3rem;
        --spacing-3xl: 14.2rem;
        --spacing-4xl: 19rem;
        --spacing-5xl: 38.1rem;
        --margin-page: 3.8rem;
        --padding-main-mobile: 7.7rem;
        --font-size-h1: 5.2rem;
        --font-size-info: 4.4rem;
        --font-size-h2: 3.2rem;
        --font-size-h2-activites: 3.4rem;
        --font-size-h3: 2.5rem;
        --font-size-h1-sub: 2.9rem;
        --font-size-h2-sub: 2rem;
        --font-size-p: 1.6rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.5rem;
        --font-size-button: 1.8rem;
        --border-radius: 18.7rem;
        --column-gap: 2.3rem;
        --logo-width: 9.1rem;
        --width-button-arrow: 4.6rem;
        --icon-mobile-width: 3.5rem;
        --spacing-divider: -15.1rem;
        --height-activite-card: 10rem;
        --width-bulle-mobile: 32.2rem;
        --width-bulle-desktop: 48.7rem;
        --width-bulle-mobile-icone: 9.3rem;
        --menu-activites-mobile: 3.7rem;
        --icon-mobile-width: 3.5rem;
        --font-size-nav-mobile: 1.5rem;
        --font-size-nav-mobile: 26.4rem;
        --font-size-nav-mobile: 17.3rem;
        --font-size-nav-mobile: -3.8rem;
        --font-size-nav-mobile: -1.1rem;
        --font-size-nav-mobile: -14.2rem;
        --font-size-nav-mobile: -38.1rem;
        --font-size-nav-mobile: -3.5rem;
        --font-size-nav-mobile: -28.6rem;
        --font-size-nav-mobile: 15.2rem
    }
}

@media screen and (max-width:113.75rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1.1rem;
        --spacing-xs: 1.7rem;
        --spacing-sm: 2.4rem;
        --spacing-md: 3.6rem;
        --spacing-lg: 4.9rem;
        --spacing-xl: 7.3rem;
        --spacing-1·5xl: 8.6rem;
        --spacing-2xl: 9.8rem;
        --spacing-3xl: 15rem;
        --spacing-4xl: 20.1rem;
        --spacing-5xl: 40.3rem;
        --margin-page: 4rem;
        --padding-main-mobile: 8rem;
        --font-size-h1: 5.5rem;
        --font-size-info: 4.6rem;
        --font-size-h2: 3.3rem;
        --font-size-h2-activites: 3.5rem;
        --font-size-h3: 2.6rem;
        --font-size-h1-sub: 3rem;
        --font-size-h2-sub: 2.1rem;
        --font-size-p: 1.7rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.6rem;
        --font-size-button: 1.9rem;
        --border-radius: 21.6rem;
        --column-gap: 2.4rem;
        --logo-width: 9.5rem;
        --width-button-arrow: 4.8rem;
        --icon-mobile-width: 3.7rem;
        --spacing-divider: -16.4rem;
        --height-activite-card: 10.3rem;
        --width-bulle-mobile: 33.1rem;
        --width-bulle-desktop: 54.1rem;
        --width-bulle-mobile-icone: 9.5rem;
        --menu-activites-mobile: 3.9rem;
        --icon-mobile-width: 3.7rem;
        --font-size-nav-mobile: 1.6rem;
        --font-size-nav-mobile: 27.7rem;
        --font-size-nav-mobile: 18.5rem;
        --font-size-nav-mobile: -4rem;
        --font-size-nav-mobile: -1.1rem;
        --font-size-nav-mobile: -15rem;
        --font-size-nav-mobile: -40.3rem;
        --font-size-nav-mobile: -3.6rem;
        --font-size-nav-mobile: -30.2rem;
        --font-size-nav-mobile: 16.1rem
    }
}

@media screen and (max-width:120rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1.2rem;
        --spacing-xs: 1.8rem;
        --spacing-sm: 2.5rem;
        --spacing-md: 3.8rem;
        --spacing-lg: 5.1rem;
        --spacing-xl: 7.7rem;
        --spacing-1·5xl: 9rem;
        --spacing-2xl: 10.3rem;
        --spacing-3xl: 15.8rem;
        --spacing-4xl: 21.2rem;
        --spacing-5xl: 42.5rem;
        --margin-page: 4.2rem;
        --padding-main-mobile: 8.3rem;
        --font-size-h1: 5.7rem;
        --font-size-info: 4.8rem;
        --font-size-h2: 3.4rem;
        --font-size-h2-activites: 3.7rem;
        --font-size-h3: 2.7rem;
        --font-size-h1-sub: 3.1rem;
        --font-size-h2-sub: 2.2rem;
        --font-size-p: 1.7rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.7rem;
        --font-size-button: 1.9rem;
        --border-radius: 24.4rem;
        --column-gap: 2.5rem;
        --logo-width: 9.9rem;
        --width-button-arrow: 5rem;
        --icon-mobile-width: 3.8rem;
        --spacing-divider: -17.7rem;
        --height-activite-card: 10.7rem;
        --width-bulle-mobile: 34rem;
        --width-bulle-desktop: 59.5rem;
        --width-bulle-mobile-icone: 9.7rem;
        --menu-activites-mobile: 4.1rem;
        --icon-mobile-width: 3.8rem;
        --font-size-nav-mobile: 1.7rem;
        --font-size-nav-mobile: 29.1rem;
        --font-size-nav-mobile: 19.7rem;
        --font-size-nav-mobile: -4.2rem;
        --font-size-nav-mobile: -1.2rem;
        --font-size-nav-mobile: -15.8rem;
        --font-size-nav-mobile: -42.5rem;
        --font-size-nav-mobile: -3.8rem;
        --font-size-nav-mobile: -31.9rem;
        --font-size-nav-mobile: 17rem
    }
}

@media screen and (max-width:126.25rem) {
    :root {
        --spacing-3xs: 0.5rem;
        --spacing-2xs: 1.2rem;
        --spacing-xs: 1.9rem;
        --spacing-sm: 2.5rem;
        --spacing-md: 3.9rem;
        --spacing-lg: 5.3rem;
        --spacing-xl: 8.1rem;
        --spacing-1·5xl: 9.4rem;
        --spacing-2xl: 10.8rem;
        --spacing-3xl: 16.6rem;
        --spacing-4xl: 22.3rem;
        --spacing-5xl: 44.7rem;
        --margin-page: 4.4rem;
        --padding-main-mobile: 8.6rem;
        --font-size-h1: 6rem;
        --font-size-info: 5.1rem;
        --font-size-h2: 3.5rem;
        --font-size-h2-activites: 3.8rem;
        --font-size-h3: 2.8rem;
        --font-size-h1-sub: 3.2rem;
        --font-size-h2-sub: 2.2rem;
        --font-size-p: 1.8rem;
        --font-size-nav: 1rem;
        --font-size-nav-mobile: 1.7rem;
        --font-size-button: 2rem;
        --border-radius: 27.3rem;
        --column-gap: 2.5rem;
        --logo-width: 10.3rem;
        --width-button-arrow: 5.1rem;
        --icon-mobile-width: 3.9rem;
        --spacing-divider: -19.1rem;
        --height-activite-card: 11rem;
        --width-bulle-mobile: 35rem;
        --width-bulle-desktop: 64.8rem;
        --width-bulle-mobile-icone: 9.9rem;
        --menu-activites-mobile: 4.3rem;
        --icon-mobile-width: 3.9rem;
        --font-size-nav-mobile: 1.7rem;
        --font-size-nav-mobile: 30.4rem;
        --font-size-nav-mobile: 20.9rem;
        --font-size-nav-mobile: -4.4rem;
        --font-size-nav-mobile: -1.2rem;
        --font-size-nav-mobile: -16.6rem;
        --font-size-nav-mobile: -44.7rem;
        --font-size-nav-mobile: -3.9rem;
        --font-size-nav-mobile: -33.5rem;
        --font-size-nav-mobile: 17.9rem
    }
}

:root {
    --font-primary: 'SofiaSans', sans-serif;
    --font-title: 'SofiaSans', sans-serif;
    --font-secondary: 'SofiaSans', sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --line-height: 1.2;
    --clair: #EBD9C2;
    --vert: #0B522D;
    --orange: #DD614A;
    --orange-clair: #F4A698;
    --violet: #65336A;
    --violet-transparent: #65336AB2;
    --noir: #1E1E1E;
    --spacing-3xs: clamp(0.5rem, 0vw + 0.5rem, 5rem);
    --spacing-2xs: clamp(0.625rem, 0.54vw + 0.508rem, 11rem);
    --spacing-xs: clamp(0.75rem, 1.08vw + 0.516rem, 17rem);
    --spacing-sm: clamp(1rem, 1.41vw + 0.761rem, 23rem);
    --spacing-md: clamp(1.25rem, 2.49vw + 0.777rem, 36rem);
    --spacing-lg: clamp(1.5rem, 3.57vw + 0.794rem, 48rem);
    --spacing-xl: clamp(2rem, 5.73vw + 0.826rem, 73rem);
    --spacing-1·5xl: clamp(2.25rem, 6.81vw + 0.842rem, 85rem);
    --spacing-2xl: clamp(2.5rem, 7.89vw + 0.858rem, 97rem);
    --spacing-3xl: clamp(3rem, 12.86vw + 0.413rem, 149rem);
    --spacing-4xl: clamp(3.75rem, 17.51vw + 0.223rem, 199rem);
    --spacing-5xl: clamp(7.5rem, 35.03vw + 0.445rem, 398rem);
    /* --margin-page: clamp(0.9375rem, 2.98vw + 0.621rem, 4rem); */
     --margin-page: clamp(0.9375rem, -1.2649rem + 11.0119vw, 125rem);
    --padding-main-mobile: clamp(3.75rem, 4.55vw + 2.841rem, 6.25rem);
    --font-size-h1: clamp(1.875rem, 3.99vw + 0.944rem, 5.4rem);
    --font-size-info: clamp(1.25rem, 3.54vw + 0.598rem, 4.6rem);
    --font-size-h2: clamp(1.875rem, 1.67vw + 1.414rem, 3.3rem);
    --font-size-h2-activites: clamp(1.375rem, 2vw + 0.905rem, 3.5rem);
    --font-size-h3: clamp(1.25rem, 1.43vw + 0.956rem, 2.25rem);
    --font-size-h1-sub: clamp(1.125rem, 1.95vw + 0.769rem, 3rem);
    --font-size-h2-sub: clamp(0.875rem, 1.22vw + 0.694rem, 2.1rem);
    --font-size-p: clamp(1rem, 0.7vw + 0.881rem, 1.7rem);
    --font-size-nav: clamp(1rem, 0vw + 1rem, 1rem);
    --font-size-nav-mobile: clamp(0.75rem, 0.91vw + 0.568rem, 1rem);
    --font-size-button: clamp(0.9375rem, 0.97vw + 0.76rem, 1.9rem);
/* --font-size-h1: clamp(2.2rem, 3.99vw + 0.944rem, 5.4rem); */
--font-size-info: clamp(1.7rem, 3.54vw + 0.598rem, 4.6rem);
/* --font-size-h2: clamp(2rem, 1.67vw + 1.414rem, 3.3rem);
--font-size-h2-activites: clamp(1.7rem, 2vw + 0.905rem, 3.5rem); */
--font-size-h3: clamp(1.4rem, 1.43vw + 0.956rem, 2.25rem);
--font-size-h1-sub: clamp(1.19rem, 1.658vw + 0.654rem, 2.55rem);
--font-size-h2-sub: clamp(1.3rem, 1.22vw + 0.694rem, 2.1rem);
--font-size-p: clamp(1.3rem, 0.7vw + 0.881rem, 1.7rem);
--font-size-nav: clamp(1rem, 0vw + 1rem, 1rem);
--font-size-nav-mobile: clamp(0.9rem, 0.91vw + 0.568rem, 1rem);
--font-size-button: clamp(1.1rem, 0.97vw + 0.76rem, 1.9rem);

    --border-radius: clamp(5rem, 46.24vw + -31.043rem, 15rem);
    --column-gap: clamp(1rem, 1.41vw + 0.761rem, 2.3rem);
    --logo-width: clamp(3.375rem, 6.49vw + 2.135rem, 9.4rem);
    --width-button-arrow: clamp(2.1875rem, 2.76vw + 1.656rem, 4.8rem);
    --icon-mobile-width: clamp(1.5625rem, 2.23vw + 1.121rem, 3.6rem);
    --spacing-divider: clamp(1.5625rem, -20.89vw + 7.319rem, -16.2rem);
    --height-activite-card: clamp(5.4375rem, 8vw + 4.392rem, 6.875rem);
    --width-bulle-mobile: clamp(19.25rem, 14.79vw + 16.292rem, 28.125rem);
    --width-bulle-desktop: clamp(25rem, 86.19vw + -43.978rem, 43rem);
    --width-bulle-mobile-icone: clamp(6.1875rem, 3.54vw + 5.479rem, 8.3125rem);
    --menu-activites-mobile: clamp(0.875rem, 3.18vw + 0.239rem, 2.625rem);
    --icon-mobile-width: clamp(1.5625rem, 2.23vw + 1.121rem, 3.6rem);
    --font-size-nav-mobile: clamp(0.75rem, 0.91vw + 0.568rem, 1rem);
    --width-bulle-desktop-soutien: clamp(30rem, 103.43vw + -52.77rem, 51.6rem);
    --bulle-benevole-icone: clamp(3rem, 8.6vw + 1.24rem, 10.95rem);
    --padding-charte: clamp(2.1875rem, 21.24vw + 3.583rem, 14.85rem);
    --negative-margin-page: calc (-1 * (var(--margin-page)));
    --negative-spacing-2xs: clamp(-0.625rem, -0.54vw - 0.508rem, -1.1rem);
    --negative-spacing-3xl: clamp(-3rem, -12.86vw - 0.413rem, -14.9rem);
    --negative-spacing-5xl: clamp(-7.5rem, -35.03vw - 0.445rem, -39.8rem);
    --negative-spacing-md: clamp(-1.25rem, -2.49vw - 0.777rem, -3.6rem);
    --negative-spacing-4-5xl: clamp(-33rem, -26.265vw - 0.3345rem, -29.85rem);
    --spacing-3·5xl: clamp(3rem, 14.008vw + 0.1784rem, 15.92rem)
}

* {
    margin: 0;
    padding: 0
}

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

body {
    font-family: var(--font-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    font-size: var(--font-size-p, 1rem);
    background-color: var(--clair, #ebd9c2)
}

main {
    flex-grow: 1;
    background-color: var(--vert, #0b522d)
}

.footer,
main>* {
    margin: 0 var(--margin-page, 1.2rem)
}

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

a {
    color: inherit
}
.text a {
    text-decoration: underline
}

.note-excerpt,
.text {
    line-height: 1.5em
}

.text ol,
.text ul {
    margin-left: 1rem
}

.text ol ol,
.text ol p,
.text ol ul,
.text ul ol,
.text ul p,
.text ul ul {
    margin-bottom: 0
}

.partenaires-grille li,
.text ul>li {
    list-style: disc
}

.text ol>li {
    list-style: decimal
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    border: 0
}

hr {
    margin: var(--spacing-sm, 1rem) auto var(--spacing-2xs, .6rem) auto;
    width: 100%;
    border: 2px solid var(--orange-clair, #f4a698)
}

h1,
h1>p,
h2,
h2>p,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title, "Arial");
    font-weight: var(--font-weight-black, 900);
    letter-spacing: -.03em;
    line-height: 105%
}

h1,
h1>p {
    font-size: calc(0.9 * var(--font-size-h1, 1.7rem));
    margin-bottom: var(--spacing-sm, 1rem)
}

h2,
h2>p {
    font-size: calc(0.9 * var(--font-size-h2, 1.7rem));
    margin-bottom: var(--spacing-2xs, .6rem)
}

.mb-3xs,
li,
p,
ul {
    margin-bottom: var(--spacing-3xs, .5rem)
}

.h1-sub {
    font-size: calc(0.9 * var(--font-size-h1-sub, 1.2rem));
    margin-bottom: var(--spacing-lg, 1.3rem)
}

.h2-sub {
    font-size: calc(0.95 * var(--font-size-h2-sub, .9rem))
}
h3 {
    font-size: calc(0.95 * var(--font-size-h3, 1.2rem))
}

p,
ul {
    font-family: var(--font-primary);
    font-size: var(--font-size-p, 1rem);
    letter-spacing: -.01em;
    line-height: 150%
}

.button,
.footer_menu ul li,
button,
input {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-extrabold, 800)
}

.button,
button,
input {
    display: flex;
    align-items: center;
    font-size: calc(0.95 * var(--font-size-button, 1.1rem));
    border: none;
    gap: 15px
}

.grid {
    --columns: 12;
    display: grid;
    grid-template-columns: 1fr
}

@media screen and (min-width:60rem) {
    .grid {
        grid-template-columns: repeat(12, 1fr)
    }

    .grid>.column {
        grid-column: span var(--columns)
    }
}

.autogrid {
    --min: 10rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    grid-auto-flow: dense
}

.pb-lg,
section {
    padding-bottom: var(--spacing-lg, 1.5rem)
}

.section-divider {
    padding-top: 0;
    padding-bottom: 0;
    z-index: -1;
    position: relative;
    margin-top: clamp(-17.5rem, -15.29vw + 4.017rem, -5rem)
}

.bulle {
    background-color: var(--orange-clair, #f4a698);
    padding-left: var(--spacing-lg, 1.5rem) !important;
    padding-right: var(--spacing-lg, 1.5rem);
    border-radius: 0 50% 50%;
    aspect-ratio: 1/1;
    width: var(--width-bulle-mobile, 19.3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.bulle-soutien {
    padding-top: var(--spacing-lg, 1.5rem) !important;
    padding-bottom: var(--spacing-xl, 2rem);
    padding-right: var(--spacing-xl, 2rem) !important;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--orange, #dd614a);
    color: var(--clair, #ebd9c2);
        margin-left: auto;
    margin-right: 10px;
}

@media screen and (max-width: 1199px) {
    .bulle {
        width: clamp(18.75rem, 11.9241rem + 34.1297vw, 37.5rem)
    }
}

@media screen and (max-width: 600px) {
    .bulle-soutien p,
    .bulle-soutien .h2-sub {
        font-size: calc(0.95 * var(--font-size-button))
    }
}

@media screen and (min-width: 480px) and (max-width: 1199px) {
    .bulle-soutien {
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (max-width: 450px) {
    .bulle-benevole {
        margin-left: 0 !important;
    }
}

.braderie-section svg,
.bulle-soutien svg,
.button-arrow {
    width: var(--width-button-arrow, 2.2rem)
}

@media screen and (max-width:600px) {
    .bulle-soutien .button {
        padding-bottom: var(--spacing-sm, 1rem);
        padding-right: var(--spacing-2xl, 2.4rem)
    }
}

.bulle-soutien .button {
    align-self: end;
    padding-right: var(--spacing-md, 1.3rem);
    color: var(--violet, #65336a)
}

.bulle-soutien hr {
    border: 2px solid var(--violet, #65336a)
}

.bulle-benevole {
    padding: var(--spacing-lg, 1.5rem);
    background-color: var(--orange-clair, #f4a698);
    color: var(--violet, #65336a);
    margin-left: var(--spacing-lg, 1.5rem);
    margin-right: auto;
    margin-bottom: var(--spacing-xl, 2rem);
    justify-content: space-around;
    position: relative;
    top: 0;
    transform: translate(0, 50%);
    z-index: 3
}

.adresse-content,
.hero-container {
    color: var(--clair, #ebd9c2);
    display: flex
}

.bulle-benevole .button {
    align-self: end
}

.bulle-benevole-icone {
    width: var(--width-bulle-mobile-icone, 6.2rem);
    align-self: center;
    margin-right: var(--spacing-xs, .7rem)
}
.braderie-image,
.container-arrondi-hd-bg {
    border-radius: var(--border-radius, 2.8rem) 0 var(--border-radius, 2.8rem) 0
}

.adresse-content,
.border-radius-bg-hd,
.container-arrondi-hg-bd {
    border-radius: 0 var(--border-radius, 2.8rem) 0 var(--border-radius, 2.8rem)
}

.button-arrow {
    height: var(--width-button-arrow, 2.2rem);
    display: flex;
    align-items: center
}

.button:hover {
    filter: brightness(1.15)
}

.hero-section {
    display: flex;
    flex-direction: column;
    padding-bottom: 0
}

.hero-container {
    flex: 14;
    flex-direction: column;
padding-left: calc(var(--margin-page) - var(--spacing-lg, 1.5rem));
padding-right: calc(var(--margin-page) - var(--spacing-lg, 1.5rem));
}

.hero-title {
    font-family: var(--font-title);
    font-weight: var(--font-weight-black, 900);
    font-size: calc(0.9 * var(--font-size-h1))
}

.hero-image {
    flex: 15;
    z-index: 1000;
    position: relative
}

.adresse-content {
    flex: 1;
    flex-direction: column;
    background: var(--vert, #0b522d)
}

.braderie-section,
.flex-col{
    display: flex;
    flex-direction: column
}

.flex-row {
    display: flex;
    flex-direction: row
}

.braderie-content hr {
    border: 2px solid var(--vert, #0b522d)
}

.braderie-section li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: var(--spacing-md, 1.3rem)
}

.braderie-section svg {
    flex-shrink: 0
}

.braderie-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: var(--spacing-md, 1.3rem);
    color: var(--violet, #65336a)
}

.footer{
    color: var(--footer-color)
}

.footer {
    background-color: var(--footer-bg);
    display: flex;
    justify-content: end;
    z-index: 1000
}

.footer:before {
    display: none;
    content: "";
    width: 1.5rem;
    height: 2px;
    background: var(--color-black)
}

.footer h2 {
    margin-bottom: .75rem
}

.clair,
.footer p,
.footer ul,
.header__navigation a,
.header__navigation span,
.navigation-button-mobile:last-of-type a,
.navigation-button:last-of-type a {
    color: var(--clair, #ebd9c2)
}

.footer p {
    max-width: 15rem
}

.footer a:hover {
    color: var(--color-text)
}
.pagination>a:hover {
    background: var(--color-black);
    color: var(--color-white)
}
.menu-item.has-dropdown:hover .submenu{
    display: block
}

.footer ul {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: 0
}

.footer ul li {
    display: inline;
    font-size: var(--font-size-nav, 1rem);
    margin-bottom: 0
}

.footer_list,
.footer_menu {
    margin: auto
}

.full-width{
    margin-left: 0
}

.full-width,
.site__header {
    margin-right: 0
}

@media screen and (max-width:1200px) {
    .footer ul {
        flex-direction: column;
        gap: 5px
    }
}
.text code {
    background: var(--color-light)
}
.site__header {
    justify-content: space-between
}

.img{
    --h: 1;
    padding-bottom: calc(100% / var(--w) * var(--h));
    position: relative
}

.note-excerpt-date,
.pagination>span {
    color: var(--color-text-grey)
}

.pagination>a:hover {
    border-color: var(--color-black)
}

.note-excerpt figure {
    margin-bottom: .5rem
}

.text code {
    font-family: var(--font-family-mono);
    font-size: 1em;
    padding: 0 .5rem;
    display: inline-block;
    color: var(--color-black)
}

.img,
.text pre{
    background: var(--color-black)
}

.text pre {
    margin: 3rem 0;
    color: var(--color-white);
    padding: 1.5rem;
    overflow-x: scroll;
    overflow-y: hidden;
    line-height: 1.5rem
}

.text pre code {
    padding: 0;
    background: 0 0;
    color: inherit
}

.text hr {
    margin: 6rem 0
}

.text blockquote {
    font-size: 1.25rem;
    line-height: 1.325em;
    border-left: 2px solid var(--color-black);
    padding-left: 1rem;
    margin: 3rem 0;
    max-width: 25rem
}

.img img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    height: 100%;
    width: 100%;
    left: 0
}

.text blockquote footer {
    font-size: .875rem;
    font-style: italic
}

.text figure {
    margin: 3rem 0
}

.text figcaption {
    padding-top: .75rem;
    color: var(--color-text-grey)
}

.text figure ul {
    line-height: 0;
    display: grid;
    gap: 1.5rem;
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))
}

.img{
    display: block;
    --w: 1
}

.img[data-contain] img {
    object-fit: contain
}

.img-caption{
    padding-top: .75rem;
    line-height: 1.5em
}

.site__header {
    position: relative;
    display: flex;
    background-color: var(--vert, #0b522d);
    padding: 0 calc(var(--margin-page) - var(--spacing-lg, 1.5rem)) 0;
    width: 100%;
    align-items: center
}

@media screen and (max-width:1199px) {
    :root {
        --margin-page: clamp(0.9375rem, 18.75vw + -2.813rem, 11.25rem)
    }

    main {
        padding-top: var(--padding-main-mobile, 3.8rem)
    }

    .site__header {
        position: fixed;
        padding-bottom: var(--spacing-sm, 1rem);
        z-index: 10000;
        padding-top: var(--spacing-sm, 1rem)
    }

    .navigation__buttons-mobile {
        display: flex;
        gap: var(--spacing-sm, 1rem);
        padding-right: var(--spacing-lg, 1.5rem)
    }

    .partenaires-section h1,
    .section-3 h1 {
        padding-left: 0
    }
}

.header__logo svg {
    width: var(--logo-width, 3.4rem)
}

.site__header a {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-extrabold, 800)
}
.site__header li {
    margin-bottom: 0
}

.header__navigation {
    right: var(--spacing-md, 1.3rem)
}

.header__navigation,
.menu-item .submenu,
.navigation-hamburger__checkbox,
.navigation__buttons {
    display: none
}

.header__navigation ul {
    display: flex;
    gap: var(--spacing-sm, 1rem)
}

.site__header a,
.site__header span {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-extrabold, 800);
    font-size: var(--font-size-nav, 1rem)
}

.navigation-button {
    background-color: #eaddc8;
    border-radius: 0 0 0 50px;
    position: relative;
    font-weight: 700;
    color: #c66d54;
    width: 130px;
    padding: 52px 0 50px;
    margin-top: -2px
}

.background-orange,
.navigation-button-icon,
.navigation-button:nth-of-type(2) {
    background-color: var(--orange, #dd614a)
}

.navigation-button:hover {
    filter: brightness(1.1)
}

.navigation-button-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    bottom: -25px;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.navigation-mobile {
    display: flex;
    gap: var(--spacing-md, 1.3rem);
    padding-top: var(--spacing-sm, 1rem)
}

.menu,
.submenu li {
    padding: 0
}

.navigation-button-icon-mobile svg {
    width: var(--icon-mobile-width, 1.6rem)
}

@media screen and (max-width: 850px) {
    .navigation-button-icon-mobile svg {
        height: 30px
    }
}

.navigation-button-mobile:first-of-type a,
.navigation-button:first-of-type a {
    color: var(--orange, #dd614a)
}

.navigation-button-mobile {
    display: flex;
    flex-direction: column;
    text-align: center
}

.navigation-button-mobile a {
    font-size: var(--font-size-nav-mobile, .8rem)
}

.background-clair,
.navigation-button:nth-of-type(2) .navigation-button-icon {
    background-color: var(--clair, #ebd9c2)
}

.header__navigation-hamburger,
.navigation-hamburger__checkbox:checked~.navigation__button {
    position: fixed;
    right: var(--spacing-lg, 1.5rem);
    top: var(--spacing-lg, 1.5rem);
    z-index: 3000
}

.navigation-hamburger__nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    opacity: 0;
    width: 0;
    visibility: hidden;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--vert, #0b522d);
    transform: translateX(100%);
    transition: .3s
}

.hamburger-icon,
.menu-item {
    position: relative
}

.navigation-hamburger__nav a,
.navigation-hamburger__nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: var(--clair, #ebd9c2)
}

@media screen and (max-width: 640px) {
.navigation-hamburger__nav ul {
    gap: var(--spacing-2xs, 1.5rem);}}

.submenu a{
    color: var(--clair, #ebd9c2);
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-extrabold, 800);
    font-size: var(--font-size-nav, 1rem)
}

.navigation-hamburger__checkbox:checked~.navigation-hamburger__nav {
    width: 100%;
    visibility: visible;
    opacity: 1;
    transform: translateX(0)
}

.hamburger-icon,
.hamburger-icon::after,
.hamburger-icon::before {
    display: inline-block;
    width: 32px;
    background-color: var(--orange, #dd614a);
    height: 4px;
    border-radius: 3px
}

.hamburger-icon::after,
.hamburger-icon::before {
    content: "";
    position: absolute;
    left: 0;
    transition: .3s
}

.hamburger-icon::before {
    top: -.6rem
}

.hamburger-icon::after {
    top: .6rem
}

.navigation-hamburger__checkbox:checked+.navigation__button .hamburger-icon {
    background-color: transparent
}

.navigation-hamburger__checkbox:checked+.navigation__button .hamburger-icon::before {
    top: 0;
    transform: rotate(135deg)
}

.navigation-hamburger__checkbox:checked+.navigation__button .hamburger-icon::after {
    top: 0;
    transform: rotate(-135deg)
}

@media screen and (min-width:1200px) {
    .bulle {
        max-width: var(--width-bulle-desktop, -26.7rem);
        width: var(--width-bulle-desktop, -26.7rem)
    }

    .bulle-soutien {
        width: var(--width-bulle-desktop-soutien);
        max-width: var(--width-bulle-desktop-soutien)
    }

    .bulle-benevole-icone {
        width: var(--bulle-benevole-icone)
    }

    .hero-section {
        flex-direction: row
    }

    .header__navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm, 1rem)
    }

    .navigation__buttons {
        display: flex;
        gap: 20px
    }

    .header__navigation-hamburger,
    .navigation-mobile,
    .navigation__buttons-mobile {
        display: none
    }
}

.header__logo,
.navigation-button-mobile {
    z-index: 4000
}

.navigation-hamburger__nav ul li a {
    font-size: var(--font-size-h2, 1.7rem);
    line-height: 150%
}

@media screen and (max-width: 400px) {
    .navigation-hamburger__nav ul li a {
        font-size: 22px;
    }
}

.navigation-hamburger__nav .menu-separator {
    list-style: none;
    padding: 0;
    margin: 0
}



.menu {
    margin: 0
}

.menu-item {
    display: inline-block
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--vert, #0b522d);
    border: 1px solid var(--clair, #ebd9c2);
    border-radius: 6px;
    padding: .5rem 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    z-index: 100
}

.submenu a {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    font-weight: var(--font-weight-extrabold, 800)
}

.submenu a:hover {
    background-color: var(--clair, #ebd9c2);
    color: var(--vert, #0b522d)
}

.border-radius-hd {
    border-radius: 0 var(--border-radius, 2.8rem) 0 0
}

.border-radius-bg {
    border-radius: 0 0 0 var(--border-radius, 2.8rem)
}

.flex-1 {
    flex: 1
}

.flex-3 {
    flex: 3
}

.flex-4 {
    flex: 4
}

.h1 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-black, 900);
    font-size: var(--font-size-h1, 1.7rem)
}

.italic {
    font-style: italic
}

.full-width-padding {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--margin-page, 1.2rem);
    padding-right: var(--margin-page, 1.2rem)
}

.full-width{
    padding-left: 0
}

.full-width{
    padding-right: 0
}

.mb-sm {
    margin-bottom: var(--spacing-sm, 1rem)
}

.mt-lg {
    margin-top: var(--spacing-lg, 1.5rem)
}

.mb-lg {
    margin-bottom: var(--spacing-lg, 1.5rem)
}

.mb-xl {
    margin-bottom: var(--spacing-xl, 2rem)
}

.pt-0 {
    padding-top: 0
}

.pb-3xs {
    padding-bottom: var(--spacing-3xs, .5rem)
}

.pt-xs {
    padding-top: var(--spacing-xs, .7rem)
}

.pb-xs {
    padding-bottom: var(--spacing-xs, .7rem)
}

.pb-sm {
    padding-bottom: var(--spacing-sm, 1rem)
}

.pt-xl {
    padding-top: var(--spacing-xl, 2rem)
}

.pb-xl {
    padding-bottom: var(--spacing-xl, 2rem)
}

.pb-2xl {
    padding-bottom: var(--spacing-2xl, 2.4rem)
}

.pt-3xl {
    padding-top: var(--spacing-3xl, 3rem)
}

.pb-3xl {
    padding-bottom: var(--spacing-3xl, 3rem)
}

.pr-xs {
    padding-right: var(--spacing-xs, .7rem)
}

.pl-md {
    padding-left: var(--spacing-md, 1.3rem)
}

.pl-lg {
    padding-left: var(--spacing-lg, 1.5rem)
}

.pr-md {
    padding-right: var(--spacing-md, 1.3rem)
}

.pr-lg {
    padding-right: var(--spacing-lg, 1.5rem)
}

.pr-xl {
    padding-right: var(--spacing-xl, 2rem)
}

.pl-xl {
    padding-left: var(--spacing-xl, 2rem)
}

.pr-2xl {
    padding-right: var(--spacing-2xl, 2.4rem)
}

.pr-mp {
    padding-right: var(--margin-page, 1.2rem)
}

.gap-2xs {
    gap: var(--spacing-2xs, .6rem)
}

.gap-md {
    gap: var(--spacing-md, 1.3rem)
}

.gap-lg {
    gap: var(--spacing-lg, 1.5rem)
}

.gap-xl {
    gap: var(--spacing-xl, 2rem)
}

.vert {
    color: var(--vert, #0b522d)
}

.orange {
    color: var(--orange, #dd614a) !important;
    font-weight: 600;
}

.violet {
    color: var(--violet, #65336a)
}

.background-vert {
    background-color: var(--vert, #0b522d)
}

.background-orange-clair {
    background-color: var(--orange-clair, #f4a698)
}

.background-violet {
    background-color: var(--violet, #65336a)
}

.flex{
    display: flex
}

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

.gap-0 {
    gap: 0 !important
}




/*! MAJ 17/02/2026 */
.menu-label {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-extrabold, 800);
    font-size: var(--font-size-nav, 1rem);
}

.navigation-hamburger__nav .menu-separator hr {
    border: none;
    border-top: 3px solid var(--orange);
    opacity: 1;
}