/* ==========================================================================
   Carte des implantations — page Contact

   Remplace la carte Leaflet / OpenStreetMap. L'ancienne coûtait 43 Ko de
   bibliothèque et 18 requêtes de tuiles vers un serveur tiers, pour un rendu
   beige et vert plaqué sur une bande marine, dézoomé au point qu'on lisait
   « Rambouillet » mais pas les trois sites.

   Le dessin est un SVG intégré à la page : aucun tiers, aucun cookie, donc
   aucun bandeau de consentement sur la page où un prospect est le plus près
   de nous écrire. Il pèse environ 5 Ko et s'affiche instantanément.

   La projection est linéaire sur la zone couverte : les trois repères sont
   placés d'après les coordonnées réelles des adresses.
   ========================================================================== */

.vc-plan__cadre {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Elementor remet à zéro la marge de toute <figure> contenue dans un widget,
   avec une règle à quatre classes. Le centrage du cadre doit donc être écrit
   au moins aussi précisément, sinon le dessin reste collé à gauche et laisse
   un vide de 400 px à sa droite. Chaque classe de la chaîne existe réellement
   dans le balisage : ce n'est pas un empilement pour gagner en priorité. */
.elementor .elementor-widget .vc-coord .vc-coord__wrap figure.vc-plan__cadre {
    margin: 0 auto 40px;
}

.vc-plan {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--vc-radius-lg, 26px);
    border: 1px solid #D5E3F3;
    background: #F4F8FD;
    /* L'ombre reste très basse : la carte est un élément de réassurance,
       pas le sujet de la page. */
    box-shadow: 0 18px 40px -28px rgba(6, 19, 39, .30);
}

.vc-plan__note {
    font-size: 14px;
    line-height: 1.6;
    color: #5A6B84;
    text-align: center;
    max-width: 62ch;
    margin: 0 auto;
}

/* Sur un téléphone, le dessin ne fait plus que 350 px de large. À cette
   échelle, les libellés secondaires tombent sous les 8 px : ils encombrent
   plus qu'ils n'informent. On ne garde que les trois villes, agrandies ; le
   détail des adresses est porté par les fiches qui suivent immédiatement.
   Les tailles sont exprimées en unités du viewBox, pas en pixels d'écran. */
@media (max-width: 600px) {
    .vc-plan__cadre { margin-bottom: 30px; gap: 11px; }
    .vc-plan__note { font-size: 13.5px; text-align: left; }

    .vc-plan__role,
    .vc-plan__eau,
    .vc-plan__detail { display: none; }

    .vc-plan__ville {
        font-size: 26px;
        /* Le rôle ayant disparu, le nom se recentre sur son repère. */
        transform: translateY(15px);
    }

    /* « Boissy-Saint-Léger » agrandi dépasse le bord droit du dessin :
       on le passe au-dessus de son repère plutôt que sur sa droite. */
    .vc-plan__ville--long { transform: translate(-58px, -16px); }

    .vc-plan__zone { font-size: 22px; letter-spacing: 5px; }
}

/* ==========================================================================
   Carte Google — la version posée en ligne le 28 octobre 2026

   Elle est placée hors du gabarit de contenu, directement dans la section :
   elle touche donc les deux bords de l'écran sans recourir à 100vw, qui
   compte la barre de défilement et décalerait la bande de quelques pixels.

   À savoir, et ce n'est pas un détail pour ce site : cette iframe dépose des
   cookies Google et transmet l'adresse IP du visiteur à Google dès le
   chargement de la page, sans qu'il ait rien demandé. Le dessin SVG rangé
   dans ../variantes/ ne fait ni l'un ni l'autre.
   ========================================================================== */

.vc-gmaps {
    margin: 0 0 34px;
    /* Mêmes bords, même arrondi et même filet que les fiches au-dessus et
       en dessous : la carte se lit comme une quatrième tuile de la série,
       pas comme une bande rapportée. L'arrondi ne tient que si le conteneur
       rogne l'iframe, d'où overflow. */
    border: 1px solid var(--vc-s2-line, #D5E3F3);
    border-radius: 16px;
    overflow: hidden;
    /* Ce qu'on voit le temps que Google réponde, plutôt qu'un rectangle
       blanc au chargement. */
    background: #DCE8F7;
    line-height: 0;
}

.vc-gmaps__plan {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
}

.vc-gmaps__note {
    font-size: 14px;
    line-height: 1.6;
    color: #5A6B84;
    text-align: center;
    max-width: 62ch;
    margin: 0 auto 36px;
}

@media (max-width: 900px) {
    .vc-gmaps__plan { height: 380px; }
}

@media (max-width: 600px) {
    .vc-gmaps { margin-bottom: 26px; }
    .vc-gmaps__plan { height: 300px; }
    .vc-gmaps__note { font-size: 13.5px; text-align: left; margin-bottom: 28px; }
}

/* --- la carte Google n'est chargée que si le visiteur la demande ----------
   Une iframe Google dépose ses cookies et lui transmet l'adresse IP dès
   l'ouverture de la page. Ici rien ne part tant que le bouton n'est pas
   cliqué. Le bloc d'attente occupe exactement la place de la carte, donc
   l'affichage ne saute pas au moment du remplacement. */

.vc-gmaps__attente {
    height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 24px;
    text-align: center;
    line-height: 1.6;
    background: #F4F8FD;
}

.vc-gmaps__pastille {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--vc-blue, #0E59F2);
    color: #fff;
    flex: none;
}
.vc-gmaps__pastille svg { width: 26px; height: 26px; }

.vc-gmaps__titre {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--vc-ink, #101828);
}

.vc-gmaps__phrase {
    margin: 0;
    max-width: 56ch;
    font-size: 14.5px;
    color: #5A6B84;
}

.vc-gmaps__bouton {
    appearance: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 13px 26px;
    margin-top: 4px;
    background: var(--vc-blue, #0E59F2);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.vc-gmaps__bouton:hover { background: #0B48C4; transform: translateY(-1px); }
.vc-gmaps__bouton:focus-visible { outline: 3px solid #0E59F2; outline-offset: 3px; }

.vc-gmaps__repli {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: #7A8697;
}
.vc-gmaps__repli a { color: var(--vc-blue, #0E59F2); }

@media (max-width: 900px) {
    .vc-gmaps__attente { height: 380px; }
}
@media (max-width: 600px) {
    .vc-gmaps__attente { height: 320px; gap: 11px; padding: 26px 18px; }
    .vc-gmaps__titre { font-size: 17.5px; }
    .vc-gmaps__phrase { font-size: 13.5px; }
}