@import url("/custom/param.css");

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* @font-face {
    font-family: 'Acumin Variable Conceptzs';
    src: url('/siteWeb/fonts/Acumin\ VF\ Default.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
} */

:root {
    --header-height: 7.5rem;
    --footer-download-section-height: 9.5rem;
    --black-color-light: hsl(220, 24%, 15%);
    --param_couleur_accent: var(--param_couleur2);
    --param_couleur_hover1: #10647b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* font-size: 50.5%; */
}

body {
    font-size: 1.4em;
    display: flex;
    flex-direction: column;
    flex: 1;
}

main {
    flex: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

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

.container {
    max-width: 1420px;
    /* margin-inline: 1.5rem; */
}

/*=================================== HEADER ========================================*/

.header {
    width: 100%;
    background-color: var(--param_couleur1);
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
    z-index: 100;
}

.search-lang-container {
    margin-right: 2.8rem;
}

.nav {
    height: var(--header-height);
}

.navigation-menu-and-language {
    display: flex;
    align-items: flex-end;
    /* padding-bottom: 2rem; */
    flex: 1;
    z-index: 144;
}

.nav__menu {
    flex: 1;
}

.nav__burger,
.nav__close {
    color: #fff;
}

.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    column-gap: .25rem;
    margin-right: 2rem;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

.nav__logo img {
    width: auto;
    height: 6rem;
}

.nav__toggle {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 2.8rem;
}

.nav__burger,
.nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 3.2rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

.nav__close {
    opacity: 0;
}

.search_button_opener {
    cursor: pointer;
    background-color: #fff;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 3rem;
    color: var(--param_couleur2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
    .navigation-menu-and-language {
        position: absolute;
        left: 0;
        top: calc(var(--header-height) - 1rem);
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
        flex-direction: column;
    }

    .navigation-menu-and-language .nav__menu {
        width: 100%;
    }

    .navigation-menu-and-language::-webkit-scrollbar {
        width: 0;
    }

    .nav__list {
        background-color: var(--param_couleur1);
        padding-top: 1rem;
    }
}

.nav__link {
    color: var(--param_couleurTexte2);
    background-color: var(--param_couleur1);
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
}

.searchLink,
.homeLink {
    justify-content: start;
}

.searchLink p,
.homeLink p {
    display: block;
    margin-left: 1rem;
}

.nav__link:hover {
    background-color: var(--black-color-light);
}

.nav__link.activeLink {
    color: var(--param_couleur2) !important;
}

/* Show menu */
.show-menu {
    opacity: 1;
    top: var(--header-height);
    pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__close {
    opacity: 1;
    transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
    cursor: pointer;
}

.dropdown__arrow {
    /* font-size: 1.25rem; */
    margin-left: 0.4rem;
    /* font-weight: initial; */
    transition: transform .4s;
}

.langue-selector {
    font-size: 1.4rem;
}

.lang_menu {
    font-size: 1.4rem !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.dropdown__link,
.dropdown__sublink {
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--param_couleurTexte2);
    background-color: var(--param_couleur1);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-semi-bold);
    transition: background-color .3s;
}

.dropdown__link i,
.dropdown__sublink i {
    font-size: 1.25rem;
    font-weight: initial;
}

.dropdown__link:hover,
.dropdown__sublink:hover {
    background-color: var(--black-color-light);
}

.dropdown__menu,
.dropdown__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu,
.dropdown__subitem:hover>.dropdown__submenu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
    /* transform: rotate(90deg); */
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
    .container {
        /* margin-inline: 1rem; */
    }

    .nav__link {
        padding-inline: 1rem;
    }
}

/* For large devices */
@media screen and (min-width: 1118px) {
    .container {
        margin-inline: auto;
    }

    .nav {
        height: calc(var(--header-height) + 0.8rem);
        display: flex;
        /* justify-content: space-between; */
    }

    .nav__toggle {
        display: none;
    }

    .nav__list {
        height: 100%;
        display: flex;
        /* column-gap: 3rem; */
        justify-content: space-between;
        /* justify-content: flex-end; */
    }

    .nav__link {
        height: 100%;
        padding: 0;
        justify-content: initial;
        column-gap: .25rem;
        padding-bottom: 1.4rem;
    }

    .searchLink p,
    .homeLink p {
        display: none;
        margin-left: 0;
    }

    .nav__link:hover {
        background-color: transparent;
        text-decoration: underline;
    }

    .searchLink:hover {
        text-decoration: none;
    }

    .nav__link.homeLink:hover {
        text-decoration: none;
    }

    .dropdown__item,
    .dropdown__subitem {
        position: relative;
    }

    .dropdown__menu,
    .dropdown__submenu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        top: calc(var(--header-height) - 2rem);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s, top .3s;
    }

    .dropdown__link,
    .dropdown__sublink {
        padding-inline: 1rem 3.5rem;
    }

    .dropdown__subitem .dropdown__link {
        padding-inline: 1rem;
    }

    .dropdown__submenu {
        position: absolute;
        left: 100%;
        top: .5rem;
    }

    /* Show dropdown menu */
    .dropdown__item:hover .dropdown__menu {
        opacity: 1;
        top: 3.5rem !important;
        pointer-events: initial;
        transition: top .3s;
    }

    /* Show dropdown submenu */
    .dropdown__subitem:hover>.dropdown__submenu {
        opacity: 1;
        top: 3.5rem !important;
        pointer-events: initial;
        transition: top .3s;
    }
}

/*=================================== FOOTER ========================================*/
.footer {
    margin-top: 3.4rem;
}

.footer .download-app-section {
    background-color: var(--param_couleur1);
    /* height: var(--footer-download-section-height); */
    padding: 1rem 3.8rem 1.8rem 3.8rem;
    display: flex;
    align-items: center;
}

.download-app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.footer .download-app-section_logo {
    width: auto;
    height: clamp(5rem, 10vw, 6.8rem);
}

.footer .download-app-section_logo-container {
    /* background-color: #fff;
    border-radius: .5rem;
    padding: 0.4rem; */
}

.footer .download-app h5 {
    /* font-size: 3.6rem; */
    font-size: clamp(2rem, 4vw, 3.6rem);
    color: var(--param_couleurTexte2);
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

.footer .application-stores {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.footer .application-stores img {
    height: auto;
    width: clamp(12rem, 15vw, 15rem);
}

.footer .contact-section {
    background-color: var(--param_couleur2);
    padding: 3rem 3.8rem 0 3.8rem;
    display: flex;
    align-items: center;
    position: relative;
}

.footer .contact-logo-section {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    flex: 1;
}

.footer .contact-logo-section img {
    height: auto;
    width: 34rem;
}

.footer .contact-adresse-reseau {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer .contact-adresse-reseau .adresse {
    color: var(--param_couleurTexte1);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 1.8rem;
}

.footer .contact-adresse-reseau .adresse p::first-line {
    font-weight: 700;
}

.footer .social-media-link {
    display: flex;
    gap: 1.8rem;
    align-items: center;
}

.footer .social-media-link img {
    width: 4rem;
    height: 4rem;
}

.footer .social-media-link a {
    background-color: #fff;
    border-radius: 50px;
    padding: 0.3rem;
}

.footer .contact-phone-mail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-self: flex-start;
    align-items: center;
}

.footer .contact-phone-mail .contact-link {
    text-align: center;
    border-radius: 1.5rem;
    border: 1px solid #000;
    width: 80%;
    padding: 1rem 0px;
    cursor: pointer;
}

.footer .footer-last-section {
    /* position: absolute; */
    /* bottom: .8rem; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem 2.4rem;
    width: 100%;
    flex-wrap: wrap;
    background-color: var(--param_couleur2);
    padding: 1.2rem 3.8rem 1.2rem 3.8rem;
}


/*=============== LAYOUT ===============*/

section.wrapper-content {
    padding: 2.8rem 5.4rem;
}

section.blue {
    background-color: var(--param_couleur3);
}

/*============MAIN SECTION=============*/
.page-title-container {
    margin-bottom: 4rem;
}

.home-page-title {
    font-size: clamp(3.4rem, 5vw, 5rem);
    /* font-size: 5rem; */
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: var(--param_couleur1);
}

.home-page-subtitle {
    font-family: "Source Serif 4", serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(3.1rem, 4.6vw, 4.6rem);
    text-align: center;
    color: var(--param_couleur1);
}

.page-articles-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 equal columns */
    gap: 2.8rem 2rem;
    /* Space between grid items */
}

.article {
    --img-scale: 1.001;
    border-radius: 3rem;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.article:hover,
.article:focus {
    --img-scale: 1.1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.article img {
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
}

.article.type1 {
    display: flex;
}

.article.type1 img {
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
    width: 100%;
    height: 100%;
    /* Ensure the image takes full height */
    object-fit: cover;
    /* Resize the image while maintaining its aspect ratio and cropping from the center */
    object-position: center;
}

.article.type1 .article-content {
    flex: 1;
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.article.type1 .article-content .article-title {
    color: var(--param_couleur2);
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    font-family: "Source Serif 4", serif;
    font-weight: 500;
    font-style: italic;
}

.article.type1 .article-content .article-subtitle {
    font-size: clamp(2.6rem, 3.9vw, 3.9rem);
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

.article.type1 .article-content .article-subtitle,
.article.type1 .article-content .article-text {
    color: var(--param_couleurTexte2);
}

.article.type1 .article-content .article-text {
    margin-top: 1.4rem;
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.article.type1 .article-content .article-text-content .article-text {
    flex: 3;
    text-align: justify;
}

.article.type1 .article-content .article-link {
    flex: 1;
    display: flex;
    align-items: center;
}

.article.type1 .article-content .article-link div {
    background-color: var(--param_couleur2);
    border-radius: 50%;
    /* Make the background circular (optional, depending on your design) */
    display: inline-flex;
    /* Ensure it wraps tightly around the icon */
    align-items: center;
    /* Center the icon vertically */
    justify-content: center;
    width: 39px;
    height: 39px;
}

.article.type1 .article-content .article-link i {
    color: var(--param_couleurTexte2);
}


.article.type1 {
    background-color: var(--param_couleur1);
    grid-column: span 6;
}

.article.type2 {
    background-color: #fff;
    grid-column: span 3;
}

.article.type3 {
    background-color: #fff;
    grid-column: span 2;
}

.article.layout3-fill2 {
    /* grid-column: span 3; */
}

.article.layout3-fill1 {
    /* grid-column: span 2; */
}

.article.type2,
.article.type3 {
    display: flex;
    flex-direction: column;
}

.article.type1 .article-image-wrapper {
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
}

.article.type2 .article-image-wrapper,
.article.type3 .article-image-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    max-height: 241px;
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
}

.article.type2 img,
.article.type3 img {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article.type2 .article-content,
.article.type3 .article-content {
    padding: 1rem 2.6rem 2rem 2.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article.type2 .article-text-content,
.article.type3 .article-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
}

.article.type2 .article-link,
.article.type3 .article-link {
    color: var(--param_couleur1)
}

.article.type2 .article-content .article-title,
.article.type3 .article-content .article-title {
    text-align: center;
    color: var(--param_couleur1);
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1.9rem, 2.2vw, 2.2rem);
}

.article.type2 .article-content .article-text,
.article.type3 .article-content .article-text {
    color: var(--param_couleurTexte1);
    text-align: center;
    font-size: clamp(1.6rem, 2vw, 2rem);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

@media (max-width: 980px) {
    .page-articles-container {
        grid-template-columns: repeat(2, 1fr);
        /* Single column on small screens */
    }

    .article.type1 {
        grid-column: span 2;
    }

    .article.type2,
    .article.type3 {
        grid-column: span 1;
    }

    .article.layout2-fill {
        /* grid-column: span 2; */
    }
}

@media (max-width: 748px) {
    .page-articles-container {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }

    .article.type1,
    .article.type2,
    .article.type3 {
        grid-column: span 1;
    }
}

/*=============== PATRIMOINES ===============*/
.patrimoine-info-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.patrimoine-page-title {
    font-size: clamp(3.4rem, 5vw, 5rem);
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: var(--param_couleur1);
}

.poi-page-title {
    font-size: clamp(3.4rem, 5vw, 5rem);
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: var(--param_couleur1);


    /* color: var(--param_couleur1);
    font-family: "Source Serif 4", serif;
    font-weight: 400;
    font-size: clamp(3.4rem, 5vw, 5rem); */
}

.poi-page-title {
    /* font-style: italic; */
}

.patrimoine-page-text {
    color: var(--param_couleurTexte1);
    margin-top: 1.4rem;
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    max-width: 1420px;
}

.patrimoine-page-text.poi-text {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    text-align: justify;
}

.patrimoine-page-text.poi-text p {
    display: inline;
}

.poi-address p {
    font-size: clamp(1.8rem, 2.4vw, 2.4rem);
    font-weight: 300;
    color: var(--param_couleurTexte1);
    font-family: 'Open Sans', sans-serif;
}

.poi-list-section .totalPoi {
    color: var(--param_couleur1);
    text-align: center;
    font-size: clamp(2.8rem, 4vw, 4rem);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.poi-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.8rem 2rem;
    padding: 2.8rem 0px;
}

.poi-item {
    background-color: var(--param_couleur3);
    border-radius: 1rem;
    overflow: hidden;
    --poi-img-scale: 1.001;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    border: 1px solid #eee;
}

.poi-item a {
    display: flex;
    height: 15rem;
    width: 100%;
    border-radius: 1rem
}

.poi-item a .imageContainer {
    width: 35%;
    height: 100%;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.poi-item a .imageContainer {
    height: auto;
}

.poi-item .poi-info-container {
    width: 65%;
    padding: 2rem 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
}

.poi-item .poi-info-container i {
    color: var(--param_couleur1);
}

.poi-item .poi-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.poi-item {
    position: relative;
}

.poi-item .poi-info-container.circuit .poi-ordre {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--param_couleurTexte2);
    background-color: var(--param_couleur1);
    width: 5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 5rem; */
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 4;
}

.poi-item .poi-info-container.circuit .poi-ordre {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
}


.poi-item:hover,
.poi-item:focus {
    --img-scale: 1.1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}

.poi-item .poi-image {
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
}

.poi-item .poi-title {
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
}

.poi-item .poi-zone {
    text-transform: uppercase;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.poi-item .poi-dates {
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.5rem);
    color: var(--param_couleur1);
}

.poi-item.etapeCircuit .imageContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    width: 35%;
    /* Black color with 25% opacity */
    z-index: 2;
    /* Ensures the filter is on top of the image */
}

.pagination-poi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 1vw, 1rem);
}

.pagination-poi button {
    border: none;
    background-color: transparent;
    color: var(--param_couleur1);
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    cursor: pointer;
    width: clamp(2.8rem, 3.8vw, 3.8rem);
    height: clamp(2.8rem, 3.8vw, 3.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .3rem;
    transition: all .4s ease-in-out;
    border-radius: 5rem;
}

.pagination-poi button:hover {
    color: var(--param_couleurTexte2);
    background-color: var(--param_couleur1);
}

.pagination-poi button.current-page {
    color: var(--param_couleurTexte2);
    background-color: var(--param_couleur1);
}

.search-filters {
    margin-top: 3.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.search-filters .filters {
    display: flex;
    align-items: center;
    gap: 1.8rem 6rem;
    width: 80%;
    flex-wrap: wrap;
}

.search-filters .filters .select2 {
    flex: 1;
    min-width: 20rem;
}

.search-filters .filters .select2-selection,
.initFilterStyle {
    border: 2px solid var(--param_couleur1);
    border-radius: 1rem;
}

.initFilterStyle {
    height: 38px;
    border: 2px solid var(--param_couleur1);
    border-radius: 1rem;
    height: 38px;
    color: var(--param_couleur1);
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    text-align: center;
    padding: 0 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.select2-container .select2-selection--single {
    height: 38px;
    position: relative !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    text-align: center;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.select2-search__field {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.5rem !important;
}

.select2-results__message {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container .select2-selection--single .select2-selection__arrow-custom {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* .select2-container .select2-selection--single.themeFilter:not(.select2-selection--clearable)::after,
.select2-container .select2-selection--single.zoneFilter:not(.select2-selection--clearable)::after {
    font-family: "Font Awesome 6 Sharp" !important;
    content: "\f078";
    position: absolute;
    right: 10px;
    top: 50%;
    color: var(--param_couleur1);
    font-size: 2rem;
    transform: translateY(-50%);
} */

.select2-container .select2-selection--single:not(.select2-selection--clearable)::after {
    font-family: "Font Awesome 6 Sharp" !important;
    content: "\f078";
    position: absolute;
    right: 10px;
    top: 50%;
    color: var(--param_couleur1);
    font-size: 2rem;
    transform: translateY(-50%);
}

.select2-container .select2-selection--single {
    font-weight: 800 !important;
    font-family: "Open Sans", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-selection__placeholder {
    /* color: var(--param_couleurTexte2) !important; */
    color: var(--param_couleur1) !important;
}

.select2-container .select2-selection--single {
    /* background-color: var(--param_couleur1) !important; */
    background-color: transparent !important;

}

/* .select2-container .select2-selection--single.themeFilter,
.select2-container .select2-selection--single.zoneFilter {
    background-color: transparent !important;
} */

/* .select2-selection--single.themeFilter .select2-selection__placeholder,
.select2-selection--single.zoneFilter .select2-selection__placeholder {
    color: var(--param_couleur1) !important;
} */

.search-container {
    display: flex;
    align-items: center;
    width: 80%;
    height: 38px;
    border: 2px solid var(--param_couleur1);
    border-radius: 1rem;
    transition: border-color 0.15s ease-in-out;
    gap: 0.8rem;
    padding: 0 .8rem;
}

.search-icon {
    color: var(--param_couleur_accent);
    pointer-events: none;
}

.search-poi {
    height: 100%;
    font-size: 1rem;
    line-height: 1.5;
    flex: 1;
    border: none !important;
    border-radius: 1rem;
    color: var(--param_couleur1) !important;
    font-weight: 800 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 1.5rem !important
}

.search-poi::placeholder {
    font-weight: 800;
    color: var(--param_couleur1);
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    opacity: 0.4;
}

.search-poi:focus-visible {
    border: none !important;
    outline: none !important;
}

.search-poi:focus::placeholder {
    color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--param_couleur1) !important;
}

.select2-dropdown {
    border: 2px solid var(--param_couleur1);
    /* border-radius: 1rem !important; */
}

.select2-container--default .select2-results__option {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    padding: 0.8rem 1.2rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--param_couleur1) !important;
    color: var(--param_couleurTexte2);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--param_couleur1) !important;
    color: var(--param_couleurTexte2);
}

.select2-results__options {
    max-height: 250px !important;
}


@media (max-width: 1600px) {
    .poi-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.8rem 2rem;
    }
}

@media (max-width: 1350px) {
    .poi-list {
        grid-template-columns: 1fr;
        gap: 2rem 2rem;
    }

    .poi-item a .imageContainer {
        width: 30%;
    }

    .poi-item .poi-info-container {
        width: 70%;
    }

    .poi-item.etapeCircuit a .imageContainer {
        width: 35%;
    }

    .poi-item.etapeCircuit .poi-info-container {
        width: 65%;
    }
}

/*=============== MAP =================*/
.carte-poi {
    width: 100%;
    height: clamp(25rem, 40vw, 40rem);
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    border: 1px solid #cccccc;
    bottom: 25px;
    left: -50px;
    min-width: 18rem;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-attribution {
    display: none;
}

.popup-title {
    font-weight: 700;
    color: var(--param_couleurTexte1);
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
}

.popup-zone {
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--param_couleurTexte1);
}

.my-popup-container {
    width: 18rem;
}

.popup-image-container {
    width: 18rem;
    height: 10rem;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    align-items: center;
}

.popup-content {
    padding: 0.4rem 0.8rem;
}

.popup-link-container {
    margin-top: 0.4rem;
}

.popup-link {
    color: var(--param_couleur1);
}

.popup-link:hover {
    text-decoration: underline;
}

.poi-circuit-info {
    display: flex;
    align-items: center;
    padding: 2.2rem 3rem;
    border-radius: 1rem;
    border: 2px solid var(--param_couleur1);
    width: fit-content;
    margin: 2.8rem auto;
    gap: 6.8rem;
}

.poi-circuit-info .circuit-item .picto-container {
    height: 3rem;
}

.poi-circuit-info .circuit-item .value {
    font-weight: 700;
    color: var(--param_couleur1);
    font-family: "Open Sans", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

/*==================RESPONSIVE==================*/
@media screen and (max-width: 940px) {
    .container.download-app {
        flex-direction: column;
        gap: 0.8rem;
    }

    .poi-circuit-info {
        gap: 4.8rem;
    }

    .container.download-app h5 {
        margin-bottom: 1.2rem;
    }

    .footer .contact-section {
        flex-direction: column;
        gap: 1.8rem;
    }

    .footer .contact-logo-section {
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }

    .footer .contact-logo-section img {
        width: 49%;
    }

    .footer .contact-phone-mail {
        width: 100%;
        flex-direction: row;
        gap: 1.8rem;
        justify-content: center;
        align-items: stretch;
    }

    .footer .contact-phone-mail .contact-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2.8rem;
    }

    .poi-list {
        grid-template-columns: 1fr;
        gap: 1.4rem 2rem;
    }
}

@media screen and (max-width: 830px) {
    section.wrapper-content {
        padding: 2.8rem 3.4rem;
    }

    .wrapper-content.poi-list-section {
        padding: 2.8rem 3.4rem 1.8rem 3.4rem;
    }


    .footer .contact-section {
        padding: 3rem 3.4rem 0 3.4rem;
    }

    .footer .footer-last-section {
        padding: 1.2rem 3.4rem 1.2rem 3.4rem;
    }

    .article.type1 {
        flex-direction: column;
    }

    .article.type1 .article-image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 241px;
        border-radius: 0;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
    }

    .article.type1 img {
        border-radius: 0;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
    }

    .article.type1 .article-content {
        padding: 1rem 2.6rem 2rem 2.6rem;
    }

    .article.type1 .article-text-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1.4rem;
    }

    .article.type1 .article-text-content .article-text {
        margin-top: 0;
    }

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

    .search-filters {
        margin-top: 2.8rem;
    }
}

@media screen and (max-width: 540px) {
    section.wrapper-content {
        padding: 2.8rem 2rem;
    }

    .poi-circuit-info {
        gap: 2.4rem;
        padding: 1.2rem 1rem;
    }


    .wrapper-content.poi-list-section {
        padding: 2.8rem 2rem 0.8rem 2rem;
    }

    .footer .contact-section {
        padding: 3rem 1.8rem 0 1.8rem;
    }

    .footer .footer-last-section {
        padding: 1.2rem 1.8rem 1.2rem 1.8rem;
    }

    .footer .contact-phone-mail {
        gap: .8rem;
        align-items: stretch;
    }

    .footer .contact-phone-mail .contact-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.8rem;
    }

    .footer .social-media-link img {
        width: 3.4rem;
        height: 3.4rem;
    }

    .search-filters {
        margin-top: 1.8rem;
        gap: 1rem;
        width: 100%;
    }

    .search-filters .search-container {
        width: 100%;
    }

    .search-filters .filters {
        gap: 1rem 6rem;
        width: 100%;
    }

    .poi-item a {
        height: fit-content;
        min-height: 15rem;
    }

}

/*=================CONTACT=================*/
.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal__container {
    background-color: #fff;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
    font-family: "Open Sans", sans-serif;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal__title {
    color: var(--param_couleur1);
    font-family: "Source Serif 4", serif;
    font-size: 2.4rem;
    margin: 0;
}

.modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.modal__close:before {
    content: '\2715';
    color: #aaa;
    font-size: 28px;
}

.modal__close:hover:before {
    color: var(--param_couleur1);
}

/* Form styles remain the same */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.4rem;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.form-group input.error,
.form-group textarea.error {
    border-color: #dc3545;
}

button[type="submit"] {
    background-color: var(--param_couleur1);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.6rem;
    font-family: 'Open Sans', sans-serif;
}

button[type="submit"]:hover {
    background-color: var(--param_couleur_hover1);
}

.success-message {
    color: green;
    text-align: center;
    font-size: 1.8rem;
    padding: 20px;
}

.error-message {
    color: #dc3545;
    text-align: center;
    font-size: 1.8rem;
    padding: 20px;
}

/* Micromodal animation */
.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}

.form-group label .required {
    color: #dc3545;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

/* cookie */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--param_couleur1);
    color: white;
    padding: 1.4rem 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.cookie-consent p {
    font-family: "Open Sans", sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
}

.cookie-consent a {
    font-family: "Open Sans", sans-serif;
    background-color: transparent;
    color: var(--param_couleur2);
    font-weight: 700;
    font-size: 1.5rem;
}

.cookie-consent-buttons {
    display: flex;
    gap: 1rem;
}

.cookie-consent-button {
    padding: 0.8rem 2.4rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cookie-accept {
    font-family: "Open Sans", sans-serif;
    background: var(--param_couleur2);
    color: var(--param_couleurTexte2);
    font-weight: 700;
    font-size: 1.5rem;
    text-wrap: nowrap;
}

.cookie-decline {
    font-family: "Open Sans", sans-serif;
    background-color: transparent;
    color: var(--param_couleur2);
    font-weight: 700;
    font-size: 1.5rem;
}

.cookie-decline:hover,
.cookie-consent a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 636px) {
    .cookie-consent {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: end;
    }
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: auto;
}

.page-articles-container.themeArticle {
    padding: 2.4rem 0;
}