/*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;
    }
}