/*
 * @author: Mathieu MARI <contact@mathieumari.com>
 * @date:   06-08-2024 13:28:15
 * @lastModifiedBy:   Mathieu MARI <contact@mathieumari.com>
 * @lastModifiedTime: 2025-02-23 00:39:38
 */

@charset "UTF-8";

/* ------------------------------------------------------------------------------------------------------------------------------------------------- Media ALL */
@media all {
    #p-google_map div {
        border: 0px !important; /* Supprimer la bordure bleu quand on clique sur la map */
    }

    #pGoogleMapContainer div {
        border: 0px !important; /* Supprimer la bordure bleu quand on clique sur la map */
    }

    /* --------------------------------------------------------------------------------------------------- */
    #pGoogleMapMask {
        position: relative;
        z-index: 100;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
        display: flex; /* Flexbox pour centrer le contenu */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
    }

    #pGoogleMapMask .inside {
        color: white;
        font-size: 24px; /* Texte légèrement plus grand */
        padding: 30px 40px; /* Espacement interne plus grand pour plus d'élégance */
        border-radius: 12px; /* Coins arrondis pour un design plus moderne */
        background: rgba(255, 255, 255, 0.1); /* Fond légèrement transparent */

        /* Effet de blur */
        backdrop-filter: blur(
            10px
        ); /* Supporté par la majorité des navigateurs modernes */
        -webkit-backdrop-filter: blur(10px); /* Préfixe pour Safari */

        /* Ombre */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Ombre légère pour ajouter de la profondeur */
        -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Préfixe pour Safari */

        border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure fine et subtile */
        text-align: center; /* Centrer le texte à l'intérieur */
        letter-spacing: 1px; /* Espacement des lettres pour plus de lisibilité */
    }

    #pGoogleMapMask .inside h1 {
        font-size: 28px; /* Titre plus grand */
        margin-bottom: 10px; /* Espacement sous le titre */
        color: #fff; /* Couleur blanche pour le titre */
    }

    #pGoogleMapMask .inside p {
        font-size: 16px; /* Texte secondaire */
        color: rgba(
            255,
            255,
            255,
            0.8
        ); /* Texte avec transparence pour contraste subtil */
    }
}

/*
Bootstrap 4 breakpoints

Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/

/* ------------------------------------------------------------------------------------------------------------------------------------------------- ALL */
@media (min-width: 1201px) {
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- Extra large devices (large desktops, 1200px and up) */
@media all and (max-width: 1200px) {
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- Large devices (desktops, 992px and up) */
@media all and (max-width: 992px) {
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media all and (max-width: 768px) {
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- Small devices (landscape phones, 576px and up) */
@media all and (max-width: 576px) {
}