/* Hero Banner */
.home p {
        font-size: 16px;
        margin-bottom: 24px;
}
.home-hero-wrapper {
        display: flex;
        align-content: center;
        justify-content: space-between;
        height: 90vh;
}
.home-hero-wrapper-inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1320px;
        height: 100%;
        padding: 0;
}
.home-hero-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100%;
        object-fit: cover;
}
.home-hero-title{
        width: 548px;
}
.home-hero-title h1{
        margin-bottom: 24px;
        font-weight: 900;
        line-height: 1.1;
        text-shadow: 0 0 7px #313131;
}

/*  Alerts */
.home-hero-alerts{
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 448px;
        color: #fff;
}
.home-hero-alerts .hero-alert{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: var(--main-color-light);
        color: var(--default-text-color);
        padding: 16px;
        cursor: pointer;
        border-radius: 12px;
        transition: filter .3s;
}
.home-hero-alerts .hero-alert:hover{
        filter: brightness(.88);
}
.hero-alert .hero-alert-header{
        display: flex;
        align-items: center;
}
.hero-alert-header .tag{
        background-color: #FF4343;
        margin-right: 8px;
}
.modal-alert .modal-content .title,
.hero-alert-header .title{
        font-family: 'Scond';
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
}
/*.hero-alert-content{*/
/*        font-size: 12px;*/
/*        margin-bottom: 8px;*/
/*}*/

.modal-alert .modal-content{
        background-color: var(--main-color-light);
        color: var(--default-text-color);
        border: none;
        border-radius: 16px;
}
.modal-alert .modal-header,
.modal-alert .modal-body,
.modal-alert .modal-footer{
        padding: 24px;
        border: none;
}
.modal-alert .modal-header{
        justify-content: start;
        padding-bottom: 0;
}
.modal-alert .modal-main{
        padding-top: 16px;
        padding-bottom: 16px;
}
.modal-alert .modal-footer{
        padding-top: 0;
}
.modal-alert .modal-body img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        border-radius: 16px;
        margin-bottom: 24px;
}
.modal-alert .modal-content .title{
        font-size: 24px;
        font-weight: 900;
}
.modal-alert .modal-content .tag{
        background-color: #FF4343;
        margin-right: 12px;
}

/* Itinéraires */
.home-trail-wrapper{
        background-color: #fff;
}
.trail-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 40px;
        padding: 16px 32px;
        background-color: var(--main-color-light);
        transition: filter .3s;
        overflow: hidden;
}
.trail-card:hover{
        filter: brightness(.93);
}
.trail-card .trail-mascot {
        width: 170px;
        height: 0;
        align-self: start;
        margin-top: 8px;
        margin-left: -8px;
        margin-right: -4px;
}
.trail-card .trail-mascot svg {
        width: 100%;
        height: auto;
}
.trail-card .trail-title {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
}
.trail-card .trail-title svg{
        width: 32px;
}
.trail-card .trail-title h3 {
        line-height: 1;
}

.trail-card .trail-data {
        flex-grow: 1;
}
.trail-card .trail-data p {
        margin-bottom: 8px;
}
.trail-card .trail-data .trail-numerics {
        gap: 32px;
}
.trail-card .trail-data .trail-numerics p {
        margin-bottom: 0;
}
.trail-card .trail-data .trail-numerics-item-value {
        color: inherit;
}

.trail-card .trail-text {
        max-width: 600px;
        margin: auto;
}

.trail-card button {
        margin-left: auto;
}
.trail-data-inner-mobile{
        display: none;
}

/* Sentiers */
.home-intro-wrapper {
        background-color: var(--main-color-light);
        color: var(--main-color);
        padding-top: 70px;
        padding-bottom: 70px;
}
section.home-intro-wrapper .wrapper-inner {
        min-height: 350px;
}
.home-intro-wrapper-inner .img-block {
        position: relative;
        width: 50%;
}
.home-intro-wrapper-inner .img-block svg {
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-40%);
        height: 700px;
        width: 840px;
}
.home-intro-wrapper {
        overflow: hidden;
}

/* Carte */
.home-map-wrapper .section-bg::after {
        background: linear-gradient(90deg, rgba(6, 22, 14, 0.50) 28.09%, rgba(0, 0, 0, 0.00) 66.41%), rgba(6, 22, 14, 0.50);
}
.home-map-wrapper{
        color: var(--light-text-color);
}

/* Jurassien */
.home-jurassien-wrapper {
        background-color: var(--main-color);
        color: var(--light-text-color);
}

section .road-lines-svg svg:nth-of-type(1) {
        left: 0;
}
section .road-lines-svg svg:nth-of-type(2) {
        right: -10%;
        bottom: -100px;
}