/* =============================================================================
   Adresse et carte - MyAddress, MyGoogleMap
   -----------------------------------------------------------------------------
   MyAddress ne porte pas de feuille de style propre : sa disposition en deux
   colonnes vient de MudGrid/MudItem, exactement comme chez Boracay, qui ne
   declarait lui non plus aucun bloc <style> pour ce composant.

   MyGoogleMap reprend le widget Google Maps reel (voir le bloc de tete du
   composant) : la mise en forme ne porte donc que sur les deux zones que la
   bibliotheque controle - le cadre de la recherche et celui de la carte -
   jamais sur l'interieur de la carte elle-meme, qui appartient a Google.
   ============================================================================= */


/* =============================================================================
   MyGoogleMap
   ============================================================================= */

.my-google-map {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--my-space-xs);
}

/*  Le message recouvre le cadre de la carte au lieu de le remplacer : le div
    .map-reference doit rester dans le DOM, my-google-map.js le cherchant par
    selecteur. Il est donc pose en absolu par-dessus, aligne sur le bas du
    conteneur - la recherche occupant le haut. */
.my-google-map__indisponible {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-sm);
    padding: var(--my-space-xl);
    box-sizing: border-box;
    text-align: center;
    background: var(--my-surface-sunken);
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-md);
}

.my-google-map .mud-icon-root.my-google-map__indisponible-icone {
    font-size: 3rem;
    color: var(--my-neutral-300);
}

.my-google-map__indisponible-titre {
    margin: 0;
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

.my-google-map__indisponible-detail {
    max-width: 52ch;
    margin: 0;
    line-height: var(--my-line-height-loose);
    color: var(--my-text-muted);
}

.my-google-map__autocomplete {
    width: 100%;
    min-height: 38px;
}

/*  Le champ de recherche de Google (gmp-place-autocomplete) vit dans le DOM
    fantome (shadow DOM) de son propre element : seules ses propriétés
    personnalisées CSS exposées peuvent etre atteintes depuis l'exterieur,
    pas ses regles internes. Boracay se contentait d'un cadre gris au repos,
    la couleur de focus bleue restant verrouillee par Google. */
.my-google-map__autocomplete > gmp-place-autocomplete {
    color: var(--my-text-default);
    background-color: transparent;
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-md);
    height: 38px;
}

.my-google-map__autocomplete > gmp-place-autocomplete:focus-within {
    border-color: transparent;
}

/*  .map-reference est un point d'ancrage lu par my-google-map.js
    (querySelector) : ne pas renommer sans mettre a jour le script. */
.my-google-map .map-reference {
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-md);
    overflow: hidden;
    box-shadow: var(--my-shadow-sm);
}