/*GPT du 14/09/26 : https://chatgpt.com/c/6aa10889-f0a4-83eb-bc66-f4cdc8c5a8c4 


//   BoutonAffiche_CSS.css  ===>>> Lieu_BoutonAffiche_CSS.css

//	###📒🟦🟦 ############################### Bouton_Affiche par GPT  ##################################################


BoutonAffiche_CSS.css
    ├── CSS des Bouton_Affiche()
    └── CSS de ImageGPS_Affiche()

Lieu_GPS_ImageAffiche.php
    └── fonctionnement ImageGPS_Affiche()

Lieu_GPS.php
    └── fonctionnement de la carte
*/

/*  nécessaire pour Bouton_Affiche  ( bouton avec lien vers une page locale, site, document pdf, video)
/* ================================================================
   BOUTONAFFICHE.CSS

   Présentation générale des boutons ouvrant une fenêtre
   ================================================================ */


/* ----------------------------------------------------------------
   BOUTON
   ---------------------------------------------------------------- */

.bouton-affiche {
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-decoration: none;
    background: white;
    border: 1px solid #777;
    border-radius: 6px;
    cursor: pointer;
}


/* ----------------------------------------------------------------
   SURVOL DU BOUTON
   ---------------------------------------------------------------- */

.bouton-affiche:hover {
    background: #eeeeee;
}



/* Compléments possibles */

.bouton-texte-bleu {
    color: blue;
}

.bouton-fond-jaune {
    background: #ffffcc;
}

.bouton-fond-bleu {
    background: #dceeff;
}

.bouton-petit {
    font-size: 12px;
    padding: 2px 6px;
}

.bouton-grand {
    font-size: 18px;
    padding: 8px 14px;
}

/* le texte du bouton est en bleu, même au survol */
.bouton-affiche.bouton-texte-bleu,
.bouton-affiche.bouton-texte-bleu:hover {
    color: blue ;
}


/*  bouton Self sur 2 lignes */
    /*
    les 3 premiers paramètres restent inchangés ;
    le 4e paramètre facultatif permet d'ajouter la ligne supérieure ;
    les deux lignes sont séparées grâce à display: block;
    toutes les personnalisations de BoutonAffiche_CSS.css restent disponibles.
    */

.bouton-affiche .bouton-ligne1 {
    display: block;
    text-align: center;
    font-size: 12px;
}

.bouton-affiche .bouton-ligne2 {
    display: block;
    text-align: center;
    font-weight: bold;
}

/*
La règle signifie :
si .boutonLieuGPS se trouve à l'intérieur d'un élément ayant .bouton-texte-bleu, son texte devient bleu.
*/

.boutonLieuGPS.bouton-texte-bleu ,
.boutonLieuGPS.bouton-texte-bleu :hover {
    color: blue;
}

.boutonLieuGPS.bouton-texte-rouge ,
.boutonLieuGPS.bouton-texte-rouge :hover {
    color: red;
}


/* =========================================================
   IMAGES GPS
   ========================================================= */

.imagesGPS-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.imageGPS {
    min-width: 0;
    text-align: center;
}

.imageGPS-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.imageGPS-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.imageGPS-legende {
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}


.imageGPS-bouton {
    margin-top: 8px;
}


/* Une seule image par ligne sur petit écran */
@media (max-width: 700px) {

    .imagesGPS-grille {
        grid-template-columns: 1fr;
    }
}



/* pour affichage une image en overlay */
/* ================================================================
   IMAGE EN OVERLAY
   ================================================================ */

#boutonAfficheOverlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
}

#boutonAfficheOverlayFenetre {
    position: absolute;
    left: 10%;
    top: 5%;
    width: 70%;
    height: 90%;
    /*background: white;*/
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #777;
}

#boutonAfficheOverlayEntete {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
}

#boutonAfficheOverlayTitre {
    font-weight: bold;
    color:yellow;
}

#boutonAfficheOverlayFermer {
    cursor: pointer;
}

#boutonAfficheOverlayContenu {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

#boutonAfficheOverlayImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
}


/* images inexistante*/
/* Version non disponible */

/* ================================================================
   BOUTON INDISPONIBLE
   ================================================================ */

.bouton-affiche.bouton-indisponible {
    color: #777;
    background: #dddddd;
    border-color: #aaaaaa;
    cursor: default;
}

.bouton-affiche.bouton-indisponible:hover {
    color: #777;
    background: #dddddd;
}


/* ================================================================
   BOUTON INDISPONIBLE --- cela complique pour RIEN
   ================================================================ */
/*
.bouton-affiche.bouton-indisponible:disabled {
    color: #999 !important;
    background: #dddddd !important;
    border-color: #aaaaaa !important;
    cursor: default;
    opacity: 0.65;
}

.bouton-affiche.bouton-indisponible:disabled:hover {
    color: #999 !important;
    background: #dddddd !important;
}
*/