/**************************************************************************

 Visionneuse photographique
 Version : 1.0

 Société Mycologique de Provence

**************************************************************************/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width: 100%;
    /* On enlève height: 100% et overflow: hidden pour permettre le scroll */
    min-height: 100vh;
    background: #111;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

/**********************************************************
    Ecran d'accueil
**********************************************************/

#accueil{
    /* On passe en position relative pour que le conteneur s'adapte à la hauteur du contenu */
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: #000;
    color: #222;
    padding: 30px 0; /* Ajoute un peu d'espace en haut et en bas pour ne pas coller les bords */
}

#accueil h1{

    font-size:2.3rem;
    font-weight:normal;
    
}
    
#launch-box{
    /* On enlève le position absolute et le top: 50px qui écrasaient la boîte */
    position: relative;
    margin-top: -100px; /* pour remonter le cadre contenant les boutons*/
    
    background: #ffffff;
    padding: 30px 40px;
    border: 4px solid blue;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    text-align: center;
    max-width: 600px;
    width: 90%;
    /* flex: 1 n'est plus nécessaire ici */
}

#btn-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}    
    

.soustitre{

    font-size:1.1rem;
    color:#666;

}

.boutons{

    display:flex;
    gap:20px;
        
}

.boutons button{

    padding:15px 30px;
    font-size:18px;
    cursor:pointer;
    flex: 1;
    white-space: nowrap;   /* Empêche le retour à la ligne */
     min-width: 200px;

}

#manuel {
    background-color: #4da3ff;   /* bleu clair */
    color: black;
    font-weight: bold;
}

#auto {
    background-color: #00bcd4;   /* cyan */
    color: black;
    font-weight: bold;
}

#retour {
    padding:15px 30px;
    font-size:18px;
    cursor:pointer;
    flex: 1;
    white-space: nowrap;   /* Empêche le retour à la ligne */
    min-width: 200px;
    background-color: green;   /* cyan */
    color: white;
    font-weight: bold;
    border-radius: 10px;
}

#manuel:hover {
    background-color: #82c3ff;
}

#auto:hover {
    background-color: #26d7e8;
}

#retour:hover {
    background-color: #26d7e8;
    color: black;
}

/* Boutons transformés en liens */
.menu-btn {
    display: block;
    background-color: blue;
    color: white;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    border: 2px solid black;
    transition: background-color 0.3s, color 0.3s;
}

.util-btn {
    display: block;
    background-color:green;
    color: white;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    border: 2px solid black;
    transition: background-color 0.3s, color 0.3s;
}

/* Effet au survol */
.menu-btn:hover {
    background-color: cyan;
    color: black;
}
.boutons{

    display:flex;
    gap:20px;       

}

/********************* pour aller à un N° de photo précis -*****************//


#saut-rapide {
    position: absolute !important; /* Sort du flux flex */
    top: 20px !important;                     /* Positionné en haut */
    left: 20px !important;                    /* Positionné à gauche */
    z-index: 9999;                 /* Au-dessus de tout */
    display: flex;                 /* Pour aligner l'input et le bouton entre eux */
    gap: 5px;
}



#btn-saut {
  /* Positionné en haut à gauche */
    position: absolute !important; /* Sort du flux flex */
    top: 50px !important;                     /* Positionné en haut */
    left: 20px !important;
    width: 80px;
    text-align: center;                      
    /*margin: 0 !important */
    padding: 5px !important;
    background: blue !important; /* Pour voir s'il change de couleur */
    color: white !important;
    border: 1px solid white;
}

#input-index {

    position: absolute !important; /* Sort du flux flex */
    top: 90px !important;                     /* Positionné en haut */
    left: 20px !important;                    /* Positionné à gauche */
    width: 80px;
    padding: 5px;
    background-color:white;
    /*background: rgba(0,0,0,0.8);*/
    color: black;
    border: 1px solid white;
    border-radius: 5px;
    text-align: center;
}

/* Masquer les flèches incrémentales de l'input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield; /* Pour Firefox */
}
/*****************************************  fin aller à   *****************************/



/**********************************************************
    Visionneuse
**********************************************************/


#visionneuse{

    /*position:fixed;*/
    position:absolute; !important
    inset:0;

    width:100vw;

    height:100vh;
    height:100dvh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:black;

    overflow:hidden;

}

.cache{

    display:none !important;

}

/**********************************************************
    Image
**********************************************************/

#zoneImage{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

#photo{

    max-width:96vw;
    max-height:92dvh;
    max-height:90vh;

    object-fit:contain;

    border:1px solid white;
    
    border-radius : 20px;

    box-shadow:0 0 25px rgba(255,255,255,.25);

    opacity:0;

    transition:
        opacity 0.5s ease;/* 0.8s à l'origine */
        
    will-change: transform; /* Optimisation pour les performances mobiles */
    touch-action: none;     /* On bloque le scroll natif pour laisser le JS travailler */   

}

/**********************************************************
    Légende
**********************************************************/

#legende{

    position:absolute;
    bottom:5px;
    left:50%;
    transform:translateX(-50%);
    Text-align:center;
    font-size:20px;
    color:white;
    letter-spacing:1px;
    background-color: #000; 
    border : 2px solid white;
    border-radius: 10px;
    padding: 2px 10px;

}

/**********************************************************
    annonce
**********************************************************/

#annonce{

    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);   
    Text-align:center;
    font-size:12px;
    color:white;
    letter-spacing:1px;
    background-color: #000; 
    border : 1px solid white;
    border-radius: 10px;
    padding: 2px 10px;

}

/**********************************************************
    Compteur
**********************************************************/

#compteur{

    position:absolute;
    top:20px;
    left:20px;
    font-size:20px;
    opacity:.95;

}

/**********************************************************
    Navigation
**********************************************************/

.navigation{
    position: absolute !important;
    /*position:absolute;*/
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    font-size:30px;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:white;

}

#precedent{

    left:25px;

}

#suivant{

    right:25px;

}

/**********************************************************
    Bouton Auto
**********************************************************/

#mode{

    position:absolute;
    right:25px;
    bottom:20px;
    padding:10px 20px;
    cursor:pointer;

}

/**********************************************************
    Bouton Fermer
**********************************************************/

#fermer{

    position:absolute;
    top:20px;
    right:20px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:22px;

}
#fermer:hover{
    color: red;
    font-size:26px;
    font-weight: bold;

}


/**********************************************************
    Bouton Aide
**********************************************************/

/* Style du bouton Aide (même famille que votre bouton quitter avec le 'x') */
#btn-aide {
    position: absolute;
    top: 80px; /* Ajustez selon l'emplacement de votre bouton 'x' */
    right: 20px;
    width: 43px;
    height: 43px;
    /*background: #333;*/
    background: blue;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
}


#btn-aide:hover {
    /*background: #555;*/
    background: green;
}

/* Fond semi-transparent de la pop-up */
.modal {
    display: none; /* Caché par défaut */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

/* Boîte blanche centrale pour l'image ou le texte */
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    width: 1200px; /* Ajustez la largeur selon votre image PowerPoint */
}

/* Bouton pour fermer la pop-up à l'intérieur */
#fermer-aide {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

#fermer-aide:hover {
    color: red;
}

/**********************************************************
    Bouton Plein écran
**********************************************************/

#plein-ecran {
    position: absolute;
    left: 25px;
    bottom: 20px;
    padding: 10px 20px;
    cursor: pointer;
   /*background: rgba(255, 255, 255, 0.15);*/
    background-color:white;
    color: black;
    border: none;
    border-radius: 5px;
}

@media (max-width: 600px) {
    #plein-ecran {
        padding: 8px 15px;
        font-size: 14px;
    }
   
    
}

@media (max-width: 800px) {

    .boutons {
        flex-direction: column;   /* Les boutons passent l’un sous l’autre */
        gap: 15px;                /* Un petit espace vertical */
    }

    .boutons button {
        min-width: unset;         /* On enlève la largeur minimale */
        width: 100%;              /* Chaque bouton prend toute la largeur */
    }
    .navigation{

        display:none;

    }
    
     #photo{

    max-width:96vw;
    max-height:85dvh;
    max-height:80vh;

    } 
      
     #legende {
        font-size:11px;
        bottom: 20%;      
        
    }
    
    .modal-content {

    width: 800px; /* Ajustez la largeur selon votre image PowerPoint */
}
    
   
}

#zoneImage, #photo {
    touch-action: pan-y !important; /* Autorise le défilement vertical et le reste */
    -webkit-user-select: none;      /* Empêche la sélection de texte qui bloque le swipe */
    user-select: none;
}


/* On limite ces règles aux appareils tactiles en paysage */
@media only screen and (pointer: coarse) and (orientation: landscape) {
    /* On retire le !important sur flex et display pour laisser le JS agir */
    #zoneImage {
        height: 80vh; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #photo {
        object-fit: contain;
        max-height: 100%;
        width: auto;
        border: 2px solid white;
        /* On s'assure que l'image ne bloque pas les événements tactiles */
        pointer-events: auto; 
    }

#launch-box{
padding: 15px 20px;
}
  
#btn-container{
    gap: 8px;
    margin-top: 15px;
}
 
   
#launch-box{
    top : 30px; 
}

}