@media (max-width: 1400px){
    /* ### LAYOUT ### */
    .container{
        max-width: 1240px;
        width: calc(100% - 32px);
    }
    .wrapper-inner {
        max-width: 1240px;
        width: calc(100% - 32px);
        padding: 64px 0;
    }
    .container {
        max-width: 1240px;
    }
    .page-template-default #main {
        background-position: left top;
    }

    /* ### Header ### */
    .home-hero-wrapper-inner {
        width: calc(100% - 32px);
    }
    header#header .logo-brand {
        width: 172px;
    }
    header#header .header-navbar .navbar-nav > li > a {
        font-size: 15px;
    }

    /* ### TRAIL CARD ### */
    .trail-card {
        gap: 24px;
    }
    .trail-card .trail-text {
        width: 40%;
    }
}

@media (max-width: 1199px) {
    /* ### LAYOUT ### */

    .container{
        max-width: 1100px;
        width: calc(100% - 56px);
    }
    .wrapper-inner {
        max-width: 1100px;
        width: calc(100% - 56px);
        padding: 56px 0;
    }
    .container {
        max-width: 1100px;
    }

    #main {
        margin-top: 70px;
    }
    #main > .img-banner {
        height: 330px;
    }

    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 32px;
    }

    .wrapper-inner {
        min-height: 432px;
    }

    section.section-with-text .section-content {
        gap: 56px;
        justify-content: initial;
    }

    img.img-card {
        height: 300px;
    }

    /* ### Header ### */
    header#header .header-navbar#desktop-navbar {
        display: none;
    }
    .header-mobile-togglers {
        display: flex;
    }

    header#header {
        height: 100px;
    }

    header#header.sticky {
        height: 70px;
    }

    header#header #mobile-navbar.header-navbar-brand h3 {
        font-size: 20px;
    }

    header#header #mobile-navbar.header-navbar {
        display: block;
        position: absolute;
        top: 0;
        right: -450px;
        height: 100vh;
        background: #fff;
        transition: .2s;
        z-index: 5;
    }

    header#header .header-navbar .navbar-nav {
        gap: 0;
    }

    header#header #mobile-navbar.header-navbar.active {
        right: 0;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 70px 0;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav > li {
        margin-right: 0;
        margin-left: 50px;
        margin-bottom: 40px;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav > li:before,
    header#header #mobile-navbar.header-navbar .navbar-nav > li:after {
        display: none;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav li a {
        text-align: start;
        white-space: initial;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav .dropdown-menu {
        position: relative ! important;
        transform: none ! important;
        margin: 0 ! important;
        padding: 0;
        border: 0;
        inset: 0 ! important;
        padding-left: 5px;
        max-width: 90%;
    }

    header#header .header-navbar .navbar-nav .dropdown-menu.show {
        max-height: initial;
    }
    header#header .header-navbar .navbar-nav .dropdown-menu li:first-of-type {
        margin-top: 12px;
    }

    header#header .header-navbar .navbar-nav .dropdown-menu li:last-of-type {
        margin-bottom: 12px;
    }

    header#header .header-navbar .navbar-nav > li ul li a {
        display: inline-block;
        max-width: 296px;
        font-size: 16px;
        font-family: 'Noto';
        font-weight: 500;
    }

    header#header .header-navbar .navbar-nav > li > a {
        font-size: 18px;
    }

    header#header .header-navbar .navbar-nav > li a .caret {
        position: relative;
    }

    header#header #language-navbar .navbar-nav > li a .caret {
        top: -2px;
    }

    header#header .header-navbar .navbar-nav > li a .caret:after {
        right: initial;
        top: 4px;
        left: calc(100% + 4px);
    }

    header#header #mobile-navbar.header-navbar .navbar-nav {
        width: auto;
        padding: 0 12px;
        gap: 8px;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav > li {
        margin-right: initial;
        margin-left: initial;
        margin-bottom: initial;
        max-width: 100%;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav li a {
        border-radius: 24px;
    }

    header#header #mobile-navbar.header-navbar .navbar-nav .dropdown-menu {
        padding-left: initial;
        max-width: initial;
        border-radius: 0;
    }

    header#header #mobile-navbar.header-navbar .dropdown-menu .menu-item {
        margin: 12px 0;
    }

    header#header #mobile-navbar .footer-navbar .navbar-nav {
        margin-top: 24px;
        padding-top: 24px;
        position: relative;
        gap: 4px;
    }

    header#header #mobile-navbar .footer-navbar .navbar-nav:after {
        content: '';
        position: absolute;
        top: 0;
        left: 24px;
        right: 0;
        width: calc(100% - 48px);
        background-color: #ccc;
        height: 1px;
    }

    header#header #mobile-navbar .footer-navbar .navbar-nav .nav-link {
        font-size: 12px;
        font-family: 'Noto';
        padding: 4px 12px;
    }

    /* ### ###### ### */
    /* ### FOOTER ### */
    /* ### ###### ### */
    footer#footer .footer-inner-container {
        grid-template-columns: 60% 40%;
        height: 400px;
    }

    footer#footer .footer-inner-container > div {
        margin-bottom: 40px;
    }

    footer#footer h3 {
        margin-top: 40px;
    }

    footer#footer .footer-inner-container > .footer-dev-container {
        padding-bottom: 40px;
    }

    /* ### BURGER MENU ### */
    header#header .header-navbar-toggler {
        display: flex;
        align-items: center;
    }

    header#header .header-navbar-toggler.cross-toggler {
        left: 24px;
        top: 24px;
    }

    header#header .header-navbar-toggler.cross-toggler .burger-menu {
        width: 24px;
        height: 16px;
    }

    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu {
        height: 2px;
    }

    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu:first-of-type {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu:last-of-type {
        bottom: 50%;
        transform: translate(0, -50%) rotate(45deg);
    }

    header#header .header-navbar-toggler.cross-toggler .burger-menu:hover > .item-burger-menu:nth-of-type(2) {
        width: 100%;
    }

    /* ### HOME ### */
    .home-hero-title {
        width: 480px;
    }

    .home-hero-alerts {
        width: 40%;
    }

    .home-hero-wrapper {
        height: 75vh;
    }

    .home-intro-wrapper {
        padding-top: initial;
        padding-bottom: initial;
    }

    section.home-intro-wrapper .wrapper-inner {
        min-height: initial;
    }

    .section-with-text.home-map-wrapper .wrapper-inner {
        justify-content: center;
    }

    .home-map-wrapper .section-bg::after {
        background: rgba(6, 22, 14, 0.70);
    }

    .home-intro-wrapper-inner .img-block svg {
        height: 500px;
        width: 600px;
    }

    .trail-card .trail-mascot {
        width: 150px;
        margin-top: 0;
    }

    .trail-data-inner,
    .home .trail-numerics {
        display: none;
    }

    .home .trail-numerics-mobile {
        display: flex;
    }

    .trail-data-inner-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .trail-card .trail-data .trail-numerics {
        align-items: center;
    }

    .trail-card {
        gap: 32px;
    }

    .trail-card .trail-text {
        display: none;
    }

    .trail-card .trail-data .trail-end {
        margin-bottom: 0;
    }

    .trail-numerics-item {
        height: auto;
    }

    .modal-alert .modal-content .title,
    .hero-alert-header .title {
        font-size: 16px;
    }

    .home-jurassien-wrapper .road-lines-svg svg:nth-of-type(2) {
        display: none;
    }

    /* ### Chemin ### */
    .button.button-w-bg svg {
        height: 24px;
    }

    .button.button-w-bg p {
        font-size: 14px;
    }

    section.trail-texts .block-inner {
        flex-direction: column;
        gap: 8px;
    }

    section.trail-stages .trail-stage-datas .left,
    section.trail-stages .trail-stage-datas .right,
    .block-inner .left,
    .block-inner .right {
        width: 100%;
    }

    section.trail-stages .trail-stage-datas {
        flex-direction: column;
        gap: 16px;
    }

    .trail-guide a {
        font-size: 14px;
    }

    .trail-guide svg {
        width: 24px;
    }

    .trail-guide .block-inner {
        padding: 16px 24px;
    }
    .single-chemin .page-cover {
        height: 60vh;
    }

    /* ### Carte ### */
    #left-panel, #left-panel .left-panel-inner {
        width: 400px;
    }
    #left-panel #chemins-list-page .chemin-list-item .chemin-datas,
    #left-panel #chemins-list-page .chemin-list-item .chemin-datas label {
        font-size: 12px;
    }
    .page-la-carte #main{
        margin-top: 70px;
    }
}

@media (max-width: 1024px){
    /* ### LAYOUT ### */
    h1.page-title{
        font-size: 28px;
        padding: 10px 10px;
        padding-top: 45px;
    }
    h1.page-title:before, 
    h1.page-title:after {
        top: -10px;
        width: 100vw;
        height: 40px;
    }
    h1.page-title:after{
        display: none;
    }
    h1.page-title:before {
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        background-position: center;
        background-size: cover;
    }
    .button.button-w-bg {
        gap: 8px;
    }
    .wrapper-inner{
        /*padding: 24px 0;*/
    }
    .page-template-default #main {
        background-image: none;
    }

    /* ### HOME ### */
    .trail-card .trail-data .trail-numerics {
        gap: 12px;
    }
    .home-hero-title {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .home-hero-wrapper-inner {
        justify-content: center;
        flex-direction: column;
    }
    .home-hero-title h1 {
        text-align: center;
    }
    .home-hero-alerts {
        position: absolute;
        width: 100%;
        bottom: 24px;
        align-items: end;
    }
    .home-hero-alerts .hero-alert {
        width: auto;
        gap: 16px;
        padding: 8px 12px;
    }
    .home-hero-alerts > .hero-alert:not(:first-of-type) {
        display: none;
    }

    /* ### Chemin ### */
    .trail-guide .block-inner {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trail-content .col-md-4 {
        width: 45%;
    }
    .trail-content .col-md-8 {
        width: 55%;
    }
    section.trail-datas .block-inner {
        flex-direction: column;
        gap: 16px;
    }
    section.trail-datas .trail-datas-type {
        justify-content: center;
    }
    .trail-datas .trail-numerics {
        gap: 16px;
        justify-content: space-between;
    }

    /* ### Facet ### */
    .block-search .facetwp-facet input.facetwp-search,
    .block-search .facetwp-facet select.facetwp-dropdown{
        min-width: initial;
    }
    .page-hebergements-restaurants .wrapper-inner {
        gap: 24px;
    }
    .page-hebergements-restaurants .wrapper-inner .blocks-column {
        width: 100%;
        padding: 0;
    }
    .page-hebergements-restaurants .facetwp-filters {
        display: flex;
        gap: 16px;
    }
    .page-hebergements-restaurants .facetwp-filters .facetwp-filter {
        width: 33%;
    }
    .block-search .facetwp-filters .facetwp-facet:last-of-type{
        margin: 0
    }
}

@media (max-width: 768px) {
    /* ### LAYOUT ### */
    h1.page-title {
        font-size: 24px;
    }
    h1 {
        font-size: 40px;
    }
    h3 {
        font-size: 18px;
    }
    .start-finish-title {
        font-size: 14px;
    }
    img.img-card,
    .home-intro-wrapper-inner .img-block {
        width: 100%;
    }
    section.section-with-text .section-content {
        flex-direction: column;
    }

    section.section-with-text .section-content {
        gap: 24px;
    }
    .page-cover {
        height: 35vh;
    }
    .page-cover .wrapper-inner {
        min-height: initial;
    }
    .page-cover .page-title {
        bottom: 16px;
        max-width: 100%;
    }
    img.img-card {
        height: 224px;
    }
    .button-default-svg{
        padding: 8px 24px 8px 20px;
    }

    section.bandeaux .wrapper-inner {
        min-height: 0;
    }

    section.bandeaux.theme-sombre .road-lines-svg{
        display: none;
    }

    .page-template-default .page-content {
        padding: 0 32px;
        margin: 32px auto;
    }

    /* ### HEADER ### */
    .admin-bar header#header {
        top: 46px;
    }

    header#header.sticky img.logo-brand-sticky {
        height: 80%;
    }

    header#header .header-navbar-brand {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }

    header#header .header-navbar-brand h3 {
        font-size: 18px;
    }

    /* ### ###### ### */
    /* ### FOOTER ### */
    /* ### ###### ### */
    footer#footer .footer-content {
        width: calc(75% - 32px);
        min-width: initial;
        max-width: initial;
        padding: 16px 0;
    }

    footer#footer .footer-content hr {
        margin: 10px 0;
    }
    footer#footer .footer-content .nav-link{
        padding: 0;
    }

    footer#footer .footer-inner-container {
    grid-template-columns: 1fr;
    }

    /* ### HOME ### */
    .trail-card {
        gap: 24px;
    }

    .trail-card .trail-mascot {
        width: 100px;
    }

    .trail-card .trail-title {
        margin-bottom: 4px;
    }

    .trail-card .trail-title svg {
        width: 24px;
    }

    .start-finish-title {
        font-size: 14px;
    }

    .trail-card .trail-data .trail-numerics {
        font-size: 12px;
    }

    .trail-card .trail-data .denivele {
        display: none;
    }

    section.section-with-text .text-block {
        width: 100%;

    }

    .home-intro-wrapper-inner .img-block svg {
        right: -5%;
        transform: translateY(-60%);
    }

    section.home-intro-wrapper .wrapper-inner {
        gap: 0;
    }

    .home-intro-wrapper-inner .img-block svg {
        height: 480px;
        width: 550px;
        opacity: 0.2;
        z-index: -1;
    }

    .home-jurassien-wrapper {
        overflow: hidden;
    }

    section .road-lines-svg svg:nth-of-type(1) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
    }

    .home-hero-wrapper {
        height: 60vh;
    }

    .home-intro-wrapper-inner .img-block {
        display: none;
    }

    .home-jurassien-wrapper {
        overflow: hidden;
    }

    section .road-lines-svg svg:nth-of-type(1) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
    }

    .home-hero-alerts {
        align-items: center;
    }

    /* ### Histoire ### */
    section.bandeaux.text-left .section-content {
        flex-direction: column;
    }

    .page-histoire-des-chemins section .road-lines-svg {
        display: none;
    }

    /* ### Chemin ### */
    .single-chemin .page-cover {
        height: 50vh;
    }

    .trail-content .col-md-4,
    .trail-content .col-md-8 {
        width: 100%;
        padding: 0;
    }

    .page-cover .page-title {
        gap: 32px;
    }

    .page-cover .page-title svg {
        margin-bottom: -60px;
        width: 124px;
    }

    .trail .trail-content {
        background-position: 50% top;
    }

    /* ### Chemin ### */
    /* Voir en JS la réorganisation des blocs */
    .trail .trail-content {
        gap: 24px;
    }
    .single-chemin .page-cover {
        height: 45vh;
    }
    .page-cover .page-title svg {
        margin-bottom: -100px;
        width: 72px;
    }
    .page-les-gabelous .page-cover .page-title svg {
        margin-bottom: -160px;
    }
    section.trail-stages .trail-stage-cover {
        padding-top: 172px;
    }
    section.trail-stages .trail-stage-inner .trail-stage-inner-inner{
        padding-left: 24px;
    }
     section.trail-stages .trail-stage-datas {
         padding: 16px 0;
     }
    section.trail-stages .trail-stage-cover-map {
        width: 70px;
    }
    section.trail-stages .trail-stage-number, section.trail-stages .trail-stage-icon {
        bottom: -4px;
        width: 32px;
        height: 32px;
    }
    section.trail-stages .trail-stage-content .trail-stage-inner-inner {
        padding: 0;
    }
    .trail-stage-inner .trail-stage-inner-inner:after,
    section.trail-stages:after{
        display: none;
    }
    section.trail-map .map {
        height: 300px;
    }
    section.trail-stages .trail-stage-datas {
        position: relative;
        z-index: 1;
    }

    /* ### Point d'interet ### */
    .point-dinteret .blocks-wrapper>*{
            padding-left: 0;
            padding-right: 0;
    }

    .point-dinteret .blocks-wrapper>*:not(:first-of-type){
            padding-top: 20px;
    }
    section.point-dinteret-introduction .point-dinteret-galerie{
        grid-template-columns: 1fr 1fr;
    }
    section.point-dinteret-introduction .point-dinteret-galerie img{
        height: 124px;
    }
    .point-dinteret-title,
    section.point-dinteret-map .map-header h3{
        line-height: 1.6;
    }


    /* ### Facet ### */
    .blocks-wrapper .blocks-column-results .blocks-column-results-inner{
        grid-template-columns: repeat(2, 1fr);
    }
    .page-hebergements-restaurants .facetwp-filters{
        flex-direction: column;
    }
    .page-hebergements-restaurants .facetwp-filters .facetwp-filter {
        width: 100%;
    }

    /* ### 404 error ###*/
    .error404 div.chemins-list{
        width: 100%;
        flex-direction: column;
    }
}

@media (max-width: 576px){
    /* ### LAYOUT ### */
    .page-content {
        margin: 50px auto;
    }
    h1.page-title{
        padding-top: 25px;
    }
    h1.page-title:before,
    h1.page-title:after {
        height: 25px;
    }
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 24px;
    }
    .container {
        width: calc(100% - 40px);
    }
    .wrapper-inner {
        width: calc(100% - 40px);
    }
    .page-template-default .page-content {
        padding: 0 24px;
        margin: 24px auto;
    }

    /* ### FOOTER ### */
    footer#footer .footer-content {
        width: calc(100% - 64px);
    }
    footer#footer .footer-content {
        padding: 24px 0;
        width: calc(100% - 40px);
    }

    /* ### HEADER ### */
    header#header .header-navbar {
        right: -80%;
        width: 80%;
    }

    /* ### HOME ### */
    .home p{
        margin-bottom: 24px;
    }
    .trail-data-inner-mobile {
        gap: 4px;
    }
    .trail-card {
        padding: 16px 24px;
    }
    .trail-card .trail-mascot {
        display: none;
    }
    section .road-lines-svg{
        display: none;
    }
    .modal-lg {
        width: 95%;
        margin: 0 auto;
    }

    /* ### Chemin ### */
    section.trail-stages .trail-stage-cover {
        padding-top: 124px;
    }
    section.trail-stages .trail-stage-cover-map {
        height: 50px;
        width: 50px;
    }
    section.trail-stages .trail-stage-cover-map span {
        display: flex;
    }
    section.trail-stages .trail-stage-cover-map span svg {
        width: 16px;
    }

    /* ### Map ### */
    #left-panel #chemins-list-page .chemin-list-item .chemin-mascotte{
        display: none;
    }
    #point-dinteret-filters{
        padding: 16px;
    }
    #point-dinteret-filters .point-dinteret-filters-item{
        font-size: 14px;
    }
    #left-panel .left-panel-inner{
        padding: 8px;
    }
    .etape-title .start-finish-title{
        font-size: 16px;
        line-height: 1;
    }
    .etape-small-card-donnees{
        font-size: 12px;
    }
    #left-panel #chemins-list-page .chemin-list-item .chemin-mascotte {
        display: none;
    }
    #left-panel #chemin-page .etape-small-card .etape-small-card-content .etape-small-card-title span.etape-nb {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    #left-panel #chemin-page .etape-small-card .etape-small-card-cover{
        height: 170px;
    }

    /* ### Facet ### */
    .blocks-wrapper .blocks-column-results .blocks-column-results-inner{
        grid-template-columns: repeat(2, 1fr);
    }
}