/* ================================================
   IMPORT DES POLICES - KARMA & MONTSERRAT
   ================================================ */
@import url('https://fonts.googleapis.com/css?family=Karma:400,500,600|Montserrat:300,400,500,600,700');

/* ================================================
   HAUT-LIEU SINGLE TEMPLATE - DESIGN ONAC-VG
   ================================================ */

#content {
    background-color: #f2f2f2;
}
html {
    font-size: 16px;
}
/* ================================================
   CONTAINER - Largeur identique à la cible
   ================================================ */
.fr-container {
    max-width: 1060px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    gap: 5vh;
    display: flex;
    flex-direction: column;
    font-weight: 400;

    p {
        margin: 0;
    }

    [href] {
        background-image: none;
    }
}

@media (max-width: 1059px) {
    .fr-container {
        max-width: calc(100% - 40px) !important;
    }

    .haut-lieu-access-callout {
        flex-direction: column-reverse;
    }
}

@media (max-width: 767px) {
    .fr-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ================================================
   CHAPÔ
   ================================================ */
#haut-lieu-section-chapo-sidebar {
    justify-content: space-between;
}

#haut-lieu-introduction-section-text {
    width: 520px !important;
}

.haut-lieu-chapo {
    margin-bottom: 1rem !important;
}

.haut-lieu-chapo-text {
    font-family: 'Karma';
    font-size: 2.3rem;
    line-height: 3rem !important;
    color: #2E2E2E;
    font-weight: 400;
}



/* ================================================
   INTRODUCTION
   ================================================ */
.haut-lieu-introduction {
    font-family: 'Montserrat';
    font-size: 1.9rem;
    color: #2E2E2E;
    font-weight: 300;
    margin-bottom: 3rem;
}

.haut-lieu-introduction p {
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.5rem !important;
}

.haut-lieu-introduction p+p {
    margin-top: 20px;
}

.haut-lieu-introduction strong,
.haut-lieu-introduction b {
    font-weight: 600;
}

/* ================================================
   SIDEBAR - INFOS PRATIQUES
   ================================================ */

.haut-lieu-introduction-sidebar {
    width: 420px;
}

.haut-lieu-sidebar-card {
    background-color: #ffffff;
    padding: 40px 60px;
    border-radius: 3px;
    width: 420px;
}

.haut-lieu-introduction-sidebar div+div {
    padding: 20px 0 20px;
}

.haut-lieu-sidebar-title {
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Karma';
    border-bottom: none;
}

.haut-lieu-horaires-content h3 {
    color: #132A67;
    font-size: 1.1rem;
    font-weight: 400;
    font-family: 'karma';
    margin-bottom: 0;
}

.haut-lieu-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.haut-lieu-info-item {
    border-bottom: 1px solid rgba(19, 42, 103, 0.15);
}

.haut-lieu-info-item:first-child {
    padding-top: 0;
}

.haut-lieu-info-item:last-child {
    border-bottom: 1px solid rgba(19, 42, 103, 0.15);
}

.haut-lieu-info-value {
    color: #2E2E2E;
    font-size: .8rem;
    font-weight: 300;
    font-family: 'Montserrat', Arial, sans-serif;
    margin: 0 0 10px 0;
    line-height: 1.2rem;

}

.haut-lieu-info-value a {
    color: #2E2E2E;
    text-decoration: underline;
}

.haut-lieu-info-value a:hover {
    color: #132A67;
}

.haut-lieu-info-link {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 8px 0 0 0;
    font-size: .7rem;
    font-family: 'Montserrat', Arial, sans-serif;
}



#haut-lieu-sidebar-voir-sur-la-carte {
    gap: 10px;
    margin: 20px 0px 20px 0px !important;
    text-decoration: underline;
}

.haut-lieu-info-link a {
    color: #000;
    text-decoration: none;
    font-weight: 400;
    background-image: none;
}

.fr-icon-map-pin-2-line {
    width: 25px;
}

.haut-lieu-info-link a:hover {
    text-decoration: none;
}

.haut-lieu-info-link [class^="fr-icon-"] {
    flex-shrink: 0;
    font-size: .5rem;
    color: #132A67;
}

.haut-lieu-contact-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.haut-lieu-horaires {
    padding: 20px 0;
}

.haut-lieu-horaires-content,
.haut-lieu-horaires-content p,
.haut-lieu-horaires-content ul,
.haut-lieu-horaires-content li {
    font-size: .8rem;
    line-height: 1.2rem;
    color: #132A67;
    font-weight: 300;
    font-family: 'Montserrat', Arial, sans-serif;
}

.haut-lieu-horaires-content ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

.haut-lieu-horaires-content li {
    position: relative;
    font-size: .7rem;
    padding-left: 1rem;
    font-weight: 400;
}

.haut-lieu-horaires-content ul li::before {
    font-size: .5rem;
    font-family: 'onacvg-icons';
    content: "\e900";
    color: #A92931;
    position: absolute;
    left: 0;
    top: 0;
}

.haut-lieu-horaires-content li::marker {
    content: none;
}

.haut-lieu-horaires-content li strong {
    font-weight: 500;
}

.haut-lieu-extra-info {
    border-top: 1px solid rgba(19, 42, 103, 0.15);
    padding-top: 20px;
}

.haut-lieu-extra-info .haut-lieu-info-value {
    color: #132A67;
    font-size: 0.7rem;
    margin: 0;
    font-weight: 400;
}


/* ================================================
   SECTION "COMMENT SE RENDRE" AVEC CARTE
   ================================================ */
.haut-lieu-access-section {
    background-color: #0d7bc6;
    margin-top: 50px;
    margin-bottom: 50px;
}

.haut-lieu-access-callout {
    color: #ffffff;
    padding: 150px 70px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 728px;
}

.haut-lieu-access-title {
    color: #ffffff;
    font-family: 'Karma', Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 3rem;
}

.haut-lieu-access-subtitle {
    color: #ffffff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 15px;
}

.haut-lieu-access-content {
    margin-bottom: 20px;
}

.haut-lieu-access-text,
.haut-lieu-access-text p,
.haut-lieu-access-text ul,
.haut-lieu-access-text li {
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
}

.haut-lieu-access-text h2 {
    color: #ffffff;
    font-family: 'Karma';
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.1rem;
    padding-left: 0;
    margin-left: 0;
}

.haut-lieu-access-text ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
}


.haut-lieu-access-text ul li::before {
    font-family: 'onacvg-icons';
    content: "\e900";
    font-size: .5rem;
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
}

.haut-lieu-access-text li::marker {
    content: none;
}

.haut-lieu-access-text ul strong {
    font-weight: 600;
}

.haut-lieu-access-text li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 5px;
    line-height: 1.4rem;
}

.haut-lieu-access-text p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 500;
    line-height: 2rem;
}

/* Bouton Itinéraire stylisé */
.haut-lieu-btn-itineraire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #132A67;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: 'Montserrat', Arial, sans-serif;
    padding: 15px 30px;
    border: none !important;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    width: 170px;
    height: 50px;
}

.haut-lieu-btn-itineraire::before {
    content: "\2ba3";
    font-size: 1.4rem;
}

.haut-lieu-btn-itineraire:hover {
    background-color: #051849 !important;
    outline: 2px solid #051849;
    outline-offset: 2px;
}

.haut-lieu-btn-itineraire .fr-icon-arrow-right-line {
    font-size: 1.4rem;
}

.haut-lieu-btn-itineraire::after {
    display: none;
}

.haut-lieu-map-container {
    height: 100%;
    min-height: 500px;
    border-radius: 0;
    overflow: hidden;
    background-color: #f6f6f6;
}

.haut-lieu-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================
   VISITES GUIDÉES
   ================================================ */
.haut-lieu-visites {
    margin-bottom: 50px;
}

#haut-lieu-visite-section {
    justify-content: space-between;
}

.haut-lieu-visites h2 {
    color: #132A67;
    font-family: 'Karma';
    font-weight: 400 !important;
    font-size: 1.7rem !important;
    margin-bottom: 30px;
}

.haut-lieu-visites-content {
    font-size: .8rem;
    line-height: 1.3rem;
    color: #2E2E2E;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 300;
}

.haut-lieu-visites-content ul {
    margin-left: -10px;
    margin-bottom: 15px;
}

.haut-lieu-visites-content p {
    font-size: .9rem;
    margin-bottom: 0;
}

.haut-lieu-visites-content li {
    padding-left: 15px;
}

.haut-lieu-visites-content strong {
    font-weight: 600;
}

.haut-lieu-visites-content li::marker {
    content: "\e900";
    font-family: 'onacvg-icons';
    font-size: .5rem;
    color: #A92931;
}


.haut-lieu-reservation-box {
    background-color: #FFFFFF;
    border-radius: 3px;
    border-left: none;
    padding: 40px 60px 20px 60px;
}

.haut-lieu-reservation-title {
    color: #2E2E2E;
    font-weight: 500;
    font-size: 1.4rem;
    font-family: 'Karma';
    margin-bottom: 5px;
    line-height: 1.8rem;
}

.haut-lieu-reservation-box-content {
    border-top: 1px solid #dadada;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
}

.haut-lieu-reservation-box-content a,
.haut-lieu-reservation-box-content p {
    text-decoration: none;
    --underline-img: none;
    font-size: 0.8rem;
    font-weight: 300;
}

.haut-lieu-reservation-box-content strong {
    color: #132A67;
    text-transform: uppercase;
    font-weight: 300;
    font-size: .8rem;
}


/* ================================================
   RESPONSIVE - TABLETTE
   ================================================ */
@media (max-width: 991px) {


    #haut-lieu-introduction-section-text {
        width: 100%;
        flex: 0 0 100%;
    }

    /* Chapô */
    .haut-lieu-chapo-text {
        font-size: 1.7rem;
        line-height: 2.2rem !important;
        font-weight: 400;
    }

    .haut-lieu-sidebar {
        margin-top: 50px;
        position: static;
    }

    .haut-lieu-sidebar-card {
        padding: 30px;
        width: 70vw;
    }

    .haut-lieu-access-callout {
        margin-bottom: 30px;
        padding: 30px;
    }

    .haut-lieu-map-container {
        min-height: 350px;
    }

    .haut-lieu-access-callout {
        height: auto;
    }

    #haut-lieu-section-chapo-sidebar {
        gap: 0px;
    }
}

/* ================================================
   RESPONSIVE - MOBILE
   ================================================ */
@media (max-width: 767px) {

    .fr-container {
        gap: 0;
    }



    /* Introduction */
    .haut-lieu-introduction {
        font-size: 1.3rem;
        line-height: 2.2rem;
    }

    /* Sidebar */
    .haut-lieu-sidebar {
        margin-top: 40px;
    }

    .haut-lieu-sidebar-card {
        padding: 30px;
    }

    /* Access */
    .haut-lieu-access-title {
        font-size: 2rem;
    }

    .haut-lieu-access-callout {
        margin-bottom: 20px;
        padding: 30px;
    }

    .haut-lieu-map-container {
        min-height: 300px;
    }


}

/* ================================================
   RESPONSIVE - PETIT MOBILE
   ================================================ */
@media (max-width: 575px) {

    .haut-lieu-chapo-text {
        font-size: 1.3rem;
        line-height: 2rem;
    }

    .haut-lieu-access-callout {
        padding: 25px;
    }

    .haut-lieu-sidebar-card {
        padding: 25px;
    }


}

/* ================================================
   UTILITIES
   ================================================ */
.blocks-container {
    margin-top: 0;
}

.fr-mr-1w {
    margin-right: 0.5rem !important;
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {


    .haut-lieu-sidebar {
        position: static;
        page-break-inside: avoid;
    }

    .haut-lieu-access-callout {
        background-color: #e3f4ff !important;
        color: #2E2E2E !important;
        page-break-inside: avoid;
    }


    .haut-lieu-galerie-title {
        color: #2E2E2E !important;
    }


}