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

############# Version B avec gestion 4 boutons #######################


Taille de la fenêtre affichage carte du GPS
#fenetreGPS {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}






*/





/* ========================================================================
   LIEU_GPS_CSS_bis.css

   CSS commun aux programmes GPS :

       - Lieu_GPS.php
       - Lieux_GPS_Form_bis.php
       - Lieux_GPS_Carte.php
       - Lieux_GPS_Carte_Images.php
       - Lieux_GPS_ListePhotosLieu.php

   Organisation :

       1 - Eléments GPS communs
       2 - Formulaire de sélection
       3 - Leaflet et carte générale communs
       4 - Lieux_GPS_Carte.php
       5 - Lieux_GPS_Carte_Images.php
       6 - Lieux_GPS_ListePhotosLieu.php
       7 - Affichage téléphone / tablette

   ======================================================================== */


/* ========================================================================
   1 - ELEMENTS GPS COMMUNS
   ======================================================================== */


/* ------------------------------------------------------------------------
   BOUTON GPS INDIVIDUEL

   Bouton produit par :
       Lieu_GPS_Affiche(...)
   ------------------------------------------------------------------------ */

.boutonLieuGPS {
    padding: 4px 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 5px;
    border: 1px solid #777;
    border-radius: 6px;
    background: white;
}


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

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

.boutonLieuGPS.gps-fond-jaune {
    background: #ffffcc;
}

.boutonLieuGPS.gps-fond-vert {
    background: #ccff99;
}

.boutonLieuGPS.gps-gras {
    font-weight: bold;
}

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

.CouleurColonne {
    background: #ccffff;
}



/* ------------------------------------------------------------------------
   FOND DE LA FENETRE MODALE GPS

   Créé par :
       Lieu_GPS_Fenetre()
   ------------------------------------------------------------------------ */

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


/* ------------------------------------------------------------------------
   FENETRE CONTENANT LA CARTE GPS
   ------------------------------------------------------------------------ */

#fenetreGPS {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}


/* ------------------------------------------------------------------------
   TITRE DE LA FENETRE GPS

   Contient :
       - LieuCode
       - LieuCommen éventuel
   ------------------------------------------------------------------------ */

#barreGPS {
    display: flex;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    padding: 5px 8px 5px 15px;
    background: white;
}

#titreGPS {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    color: black;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#boutonsExternesGPS {
    display: flex;
    gap: 6px;
    margin-left: 10px;
    margin-right: 55px;
}

#ouvrirGoogleMaps,
#ouvrirGoogleEarth,
#ouvrirAppleMaps {
    display: inline-block;
    padding: 5px 9px;
    color: black;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    background: white;
    border: 1px solid #777;
    border-radius: 6px;
}

#ouvrirGoogleMaps:hover,
#ouvrirGoogleEarth:hover,
#ouvrirAppleMaps:hover {
    background: #eeeeee;
}
/* ------------------------------------------------------------------------
   CARTE OPENSTREETMAP INDIVIDUELLE

   iframe utilisée dans la fenêtre GPS.
   ------------------------------------------------------------------------ */

    #iframeGPS {
        width: 100%;
        height: calc(100% - 50px);
        border: 0;
    }

/* ------------------------------------------------------------------------
   BOUTON DE FERMETURE DE LA FENETRE GPS
   ------------------------------------------------------------------------ */

#fermerGPS {
    position: absolute;
    z-index: 10;
    right: 8px;
    top: 5px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 30px;
    cursor: pointer;
    background: white;
    border: 1px solid #999;
    border-radius: 50%;
}


/* ========================================================================
   2 - FORMULAIRE DE SELECTION
   ========================================================================

   Utilisé par :
       Lieux_GPS_Form_bis.php

   Boutons :
       - Lieu
       - Type
       - Département
       - Région
       - Code Postal
       - Afficher

   ======================================================================== */


/* Boutons du formulaire */

.selection-recherche button {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    background: white;
    border: 1px solid #777;
    border-radius: 6px;
}


/* Survol d'un bouton normal */

.selection-recherche button:hover {
    background: #eeeeee;
}


/* ------------------------------------------------------------------------
   BOUTON CORRESPONDANT AU CHOIX ACTIF

   Exemple :
       si $choix = 'Dpt',
       le bouton Département est affiché en cyan.
   ------------------------------------------------------------------------ */

.selection-recherche button.bouton-selection-actif {
    background: #00cccc !important;
    color: black !important;
}


/* Conserve la couleur du bouton actif au survol */

.selection-recherche button.bouton-selection-actif:hover {
    background: #00cccc !important;
}


/* ------------------------------------------------------------------------
   CHAMP DE SAISIE DIRECTE
   ------------------------------------------------------------------------ */

.selection-recherche input {
    width: 120px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #999;
    border-radius: 5px;
}


/* ------------------------------------------------------------------------
   LISTE DEROULANTE DU FORMULAIRE
   ------------------------------------------------------------------------ */

.selection-recherche select {
    width: 220px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #999;
    border-radius: 5px;
    background: white;
}


/* ========================================================================
   3 - LEAFLET ET CARTE GENERALE
   COMMUNS A CARTE ET CARTE_IMAGES
   ======================================================================== */


/* ------------------------------------------------------------------------
   CARTE GENERALE

   Utilisée par :
       - Lieux_GPS_Carte.php
       - Lieux_GPS_Carte_Images.php

   La même présentation est volontairement utilisée dans les deux
   programmes afin de conserver un affichage homogène.
   ------------------------------------------------------------------------ */

#carteGenerale {
    width: 100%;
    height: 850px;
    margin-bottom: 35px;
    background: #ddd;
    border: 1px solid #888;
    border-radius: 8px;
    box-sizing: border-box;
}


/* ------------------------------------------------------------------------
   POPUP LEAFLET

   Fond gris clair, texte noir et pointe cyan.
   ------------------------------------------------------------------------ */

.leaflet-popup-content-wrapper {
    background: #f0f0f0;
}


/* Pointe située sous la popup */

.leaflet-popup-tip {
    background: #00cccc;
}


/* Texte contenu dans la popup */

.leaflet-popup-content {
    font-size: 14px;
    line-height: 1.4;
    color: black;
}


/* ========================================================================
   4 - Lieux_GPS_Carte.php
   ======================================================================== */


/* ------------------------------------------------------------------------
   MARQUEUR AVEC NOM DU LIEU
   ------------------------------------------------------------------------ */

.marqueur-lieu {
    display: inline-block;
    background: white;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    box-shadow:
        1px 1px 5px
        rgba(0, 0, 0, 0.5);
}


/* ------------------------------------------------------------------------
   LISTE DES LIEUX SOUS LA CARTE
   ------------------------------------------------------------------------ */

.liste-lieux {
    margin-top: 20px;
    padding: 15px;
    background: white;
    border-radius: 8px;
}


.lieu {
    margin: 6px 0;
}


/* ------------------------------------------------------------------------
   COMMANDES DE LA CARTE
   ------------------------------------------------------------------------ */

.commandes-carte {
    margin-bottom: 15px;
}


/* Bouton d'enregistrement de la carte en JPG */

#enregistrerJPG {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
}


/* Message affiché pendant/après l'export JPG */

#messageExport {
    margin-left: 15px;
    font-weight: bold;
}


/* ========================================================================
   5 - Lieux_GPS_Carte_Images.php
   ======================================================================== */


/* ------------------------------------------------------------------------
   TITRE AFFICHE SUR LA CARTE GENERALE
   ------------------------------------------------------------------------ */

.titre-carte-generale {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 8px 12px;
    border: 2px solid #333;
    border-radius: 6px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    box-shadow:
        1px 1px 5px
        rgba(0, 0, 0, 0.5);
}



/* ------------------------------------------------------------------------
   LETTRES A, B, C...
   Même présentation sur la carte et dans la popup
   ------------------------------------------------------------------------ */

.marqueur-lettre,
.lettre-popup {
    display: inline-block;
    background: yellow;
    border: 2px solid #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    box-sizing: content-box;
}


/* Ombre du marqueur affiché sur la carte */

.marqueur-lettre {
    box-shadow:
        1px 1px 4px
        rgba(0, 0, 0, 0.5);
}


/* Position de la lettre dans la popup */

.lettre-popup {
    margin-right: 8px;
    vertical-align: middle;
}


/* ------------------------------------------------------------------------
   CONTENU DES POPUP PHOTOS
   ------------------------------------------------------------------------ */

.popup-photo {
    text-align: center;
    min-width: 190px;
}


.popup-photo .nom-photo {
    font-weight: bold;
    margin-bottom: 6px;
}


.popup-photo img {
    display: block;
    max-width: 180px;
    max-height: 140px;
    margin: 8px auto;
    border-radius: 4px;
}


.popup-photo .description-photo {
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    margin: 8px 0;
    color: #b00020;
}


/* ------------------------------------------------------------------------
   LISTE DES PHOTOS
   ------------------------------------------------------------------------ */

.image-bloc {
    background: white;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
}


.image-bloc img {
    max-width: 500px;
    max-height: 400px;
    display: block;
    margin-bottom: 15px;
}


/* Nom de l'image */

.nom {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    
}


/* Lettre A, B, C... affichée devant la photo */

.lettre-photo {
    display: inline-block;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    margin-right: 8px;
    text-align: center;
    border: 2px solid #333;
    border-radius: 50%;
    background: yellow;
    font-weight: bold;
    
}


/* Coordonnées GPS */

.gps {
    font-family: monospace;
    font-size: 16px;
    line-height: 1.7;
}


/* Messages d'erreur */

.erreur {
    color: #b00020;
}


/* Information concernant les images HEIC */

.heic {
    color: #b06000;
}


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

   Une seule définition :
   le doublon présent dans l'ancien CSS a été supprimé.
   ------------------------------------------------------------------------ */

.bouton-carte {
    margin-top: 12px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}


/* ------------------------------------------------------------------------
   MODAL : CARTE INDIVIDUELLE
   ------------------------------------------------------------------------ */

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


#contenuCarte {
    position: relative;
    width: 85%;
    height: 85%;
    margin: 3% auto;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}


#carteIframe {
    width: 100%;
    height: 100%;
    border: 0;
}


#fermerCarte {
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 5px;
    width: 40px;
    height: 40px;
    background: white;
    border: 1px solid #999;
    border-radius: 50%;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
}


/* ------------------------------------------------------------------------
   MODAL LIEU GPS

   Eléments particuliers de Lieux_GPS_Carte_Images.php.
   ------------------------------------------------------------------------ */

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


#contenuLieuGPS {
    position: relative;
    width: 85%;
    height: 85%;
    margin: 3% auto;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}


#enteteLieuGPS {
    height: 45px;
    box-sizing: border-box;
    padding: 10px 55px 10px 15px;
    font-size: 18px;
}


#carteLieuGPS {
    width: 100%;
    height: calc(100% - 45px);
    border: 0;
}


#fermerLieuGPS {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 38px;
    height: 38px;
    background: white;
    border: 1px solid #999;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
}


/* ------------------------------------------------------------------------
   SELECTION DU DOSSIER SOURCE
   ------------------------------------------------------------------------ */

.selection-source {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: white;
    border: 1px solid #aaa;
    border-radius: 8px;
}


.selection-source label {
    font-size: 16px;
}


.selection-source select {
    min-width: 280px;
    padding: 7px 10px;
    font-size: 15px;
    background: white;
    border: 1px solid #999;
    border-radius: 5px;
    cursor: pointer;
}


.selection-source button {
    padding: 7px 14px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    background: white;
    border: 1px solid #777;
    border-radius: 5px;
}


.selection-source button:hover {
    background: #eeeeee;
}


/* ========================================================================
   6 - Lieux_GPS_ListePhotosLieu.php

   Partie volontairement minimale pour le moment.
   Le CSS du tableau sera revu séparément après validation du reste.
   ======================================================================== */

/* ========================================================================
   6 - Lieux_GPS_ListePhotosLieu.php
   TABLEAU DES LIEUX
   ======================================================================== */


/* Tableau général */

.tableau-lieux {
    width: 100%;
    border-collapse: collapse;
    background: white;
}


/* En-têtes et cellules */

.tableau-lieux th,
.tableau-lieux td {
    padding: 7px 10px;
    border: 1px solid #aaa;
    text-align: left;
    vertical-align: top;
}

.tableau-lieux .centre {
    text-align: center;
}

.tableau-lieux .texte-bleu {
    color: blue;
}

.tableau-lieux .gras {
    font-weight: bold;
}

.tableau-lieux .fond-jaune {
    background: #ffffcc;
}





.tableau-lieux .bouton-lien {
    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;
}

.tableau-lieux .bouton-lien:hover {    
    background: #eeeeee;
}





/* Ligne d'en-tête */

.tableau-lieux th {
    background: #eeeeee;
    font-weight: bold;
}


/* Alternance légère des lignes */

.tableau-lieux tbody tr:nth-child(even) {
    background: #f8f8f8;
}


/* Mise en évidence de la ligne survolée */

.tableau-lieux tbody tr:hover {
    background: #e8f8f8;
}




/* ============================================================
   BOUTON DE CHANGEMENT DE CARTE

   GOOGLE dans Lieu_GPS.php
   OSM dans Lieu_GPS_bis.php
   ============================================================ */

.boutonChangerCarte {
    display: inline-block;
    padding: 5px 10px;
    color: blue;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    background: #ffffcc;
    border: 2px solid #555;
    border-radius: 6px;
}

.boutonChangerCarte:hover {
    background: #ffff99;
}







/* ========================================================================
   7 - AFFICHAGE TELEPHONE / TABLETTE
   ======================================================================== */


/* ------------------------------------------------------------------------
   COMPOSANT GPS
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {

    #titreGPS {
        height: 70px;
        padding-top: 10px;
        font-size: 16px;
    }

    .commentaireGPS {
        font-size: 12px;
    }

    #iframeGPS {
        height: calc(100% - 70px);
    }
}


/* ------------------------------------------------------------------------
   CARTE_IMAGES
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {

    body {
        margin: 10px;
    }

    #carteGenerale {
        height: 450px;
    }

    .image-bloc img {
        max-width: 100%;
        height: auto;
    }

    #contenuCarte {
        width: 95%;
        height: 85%;
        margin: 7% auto;
    }
}