/*------------------------------------*\
    # Bloc Localisation et acces (page representation)
\*------------------------------------*/

.compLocalisationAcces {
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}

.compLocalisationAcces .bottomContentComposants {
    height: 0 !important;
    background: none !important;
}

/* Masque le bloc quand la carte affiche la grille des sieges d'un bloc : la carte pose la class roomSection sur .mapRoom */
body:has(.mapRoom.roomSection) .compLocalisationAcces {
    display: none;
}

/*------------------------------------*\
    # Structure generale
\*------------------------------------*/

.localisation-acces {
    display: grid;
    grid-template-areas:
        "titre"
        "lieu"
        "carte"
        "transports";

    width: 100%;
    margin: 30px 0 40px;
    text-align: left;
}

.localisation-acces-contenu,
.localisation-acces-colonne-txt {
    display: contents;
}

/*------------------------------------*\
    # Titre
\*------------------------------------*/

.localisation-acces-titre {
    grid-area: titre;
    margin: 0 0 15px;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: #333333;
}

/*------------------------------------*\
    # Lieu
\*------------------------------------*/

.localisation-container-lieu {
    grid-area: lieu;
    position: relative;
    min-width: 0;
    padding-left: 42px;
}

.localisation-container-lieu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.25 10.5c0 5.25-8.25 11.25-8.25 11.25S3.75 15.75 3.75 10.5a8.25 8.25 0 0 1 16.5 0Z'/%3E%3Ccircle cx='12' cy='10.5' r='2.625'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
}

.localisation-acces-lieu {
    display: block;
    font-size: 1.25rem;
    line-height: 1.35;
    color: #555555;
}

#localisationAccesNom {
    font-size: 1.33rem;
    line-height: 1.3;
    font-weight: 700;
    color: #333333;
}

/*------------------------------------*\
    # Lien itineraire
\*------------------------------------*/

.localisation-acces-itineraire {
    position: relative;
    display: inline-block;
    margin-top: 8px;
    padding-left: 25px;
    font-size: 1.33rem;
    line-height: 1.3;
    color: #333333;
    text-decoration: underline;
}

.localisation-acces-itineraire::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.5225 3.75C22.5225 3.5475 22.44 3.36 22.305 3.2175C22.1625 3.075 21.975 3 21.7725 3H15.7575C15.345 3 15.0075 3.3375 15.0075 3.75C15.0075 4.1625 15.345 4.5 15.7575 4.5H19.965L11.475 12.99C11.1825 13.2825 11.1825 13.755 11.475 14.0475C11.7675 14.34 12.24 14.34 12.5325 14.0475L21.0225 5.5575V9.75C21.0225 10.1625 21.36 10.5 21.7725 10.5C22.185 10.5 22.5225 10.1625 22.5225 9.75V3.75ZM3 8.2425C3 7.83 3.3375 7.4925 3.75 7.4925H13.5C13.9125 7.4925 14.25 7.155 14.25 6.7425C14.25 6.33 13.9125 5.9925 13.5 5.9925H3.75C2.505 5.9925 1.5 6.9975 1.5 8.2425V18.7425C1.5 19.9875 2.505 20.9925 3.75 20.9925H17.25C18.495 20.9925 19.5 19.9875 19.5 18.7425V12.7425C19.5 12.33 19.1625 11.9925 18.75 11.9925C18.3375 11.9925 18 12.33 18 12.7425V18.7425C18 19.155 17.6625 19.4925 17.25 19.4925H3.75C3.3375 19.4925 3 19.155 3 18.7425V8.2425Z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}


/*------------------------------------*\
    # Carte
\*------------------------------------*/

.localisation-acces-carte {
    grid-area: carte;
    min-width: 0;
    margin-top: 20px;
}

.localisation-acces-carte-frame {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 248px;
    border: 0;
    border-radius: 10px;
}


/*------------------------------------*\
    # Transports
\*------------------------------------*/

.localisation-container-transports {
    grid-area: transports;
    position: relative;
    min-width: 0;
    margin-top: 20px;
    padding-left: 42px;
}

.localisation-container-transports::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.25' y='3' width='13.5' height='13.5' rx='2.25'/%3E%3Cpath d='M5.25 9.75h13.5M9.75 3v3M14.25 3v3M9 13.125h.008M15 13.125h.008M8.25 16.5 6.75 21M15.75 16.5 17.25 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
}

.localisation-acces-transports {
    color: #555555;
}

#localisationAccesTransportsTitre {
    margin-bottom: 4px;
    font-size: 1.33rem;
    line-height: 1.3;
    font-weight: 700;
    color: #333333;
}

#localisationAccesTransportsTexte {
    font-size: 1.25rem;
    line-height: 1.4;
}

/*------------------------------------*\
    # Tablette / Desktop
\*------------------------------------*/

@media screen and (min-width: 768px) {

    .localisation-acces {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 598px);

        grid-template-areas:
            "titre      carte"
            "lieu       carte"
            "transports carte";

        column-gap: clamp(25px, 4vw, 50px);
        align-items: start;
    }

    .localisation-acces-titre {
        margin-bottom: 15px;
    }

    .localisation-acces-carte {
        margin-top: 0;
    }

    .localisation-container-transports {
        margin-top: 20px;
    }
}


/*------------------------------------*\
    # Desktop large
\*------------------------------------*/

@media screen and (min-width: 1100px) {

    .localisation-acces {
        grid-template-columns:
            minmax(280px, 1fr)
            minmax(420px, 598px);

        column-gap: clamp(35px, 5vw, 60px);
    }
}


/*------------------------------------*\
    # Mobile
\*------------------------------------*/

@media screen and (max-width: 767px) {

    .compLocalisationAcces {
        padding: 0 15px;
    }

    .localisation-acces {
        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:
            "titre"
            "lieu"
            "carte"
            "transports";
    }

    .localisation-acces-carte {
        margin-top: 20px;
    }

    .localisation-container-transports {
        margin-top: 20px;
    }

    .localisation-acces-carte-frame {
        width: 100%;
        max-width: none;
    }
}