/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 4 mai 2025, 12:46:04
    Author     : alban
*/

pre {margin: 0px;padding: 0px;display: inline-block;background-color: palegreen;border-width: 0;box-sizing: border-box;font-family: Times; font-weight: normal; color:black; font-size: 1vw;}

body > footer {position: fixed;bottom: 0px;}

.fond{
    z-index: 1;position:absolute;background-position-x: 0vw;background-position-y: 0vh;background-size: cover;background-image: url("images/Sanstitre-650.19.jpg");
  top:0vh;left: 0vw;text-align: center;padding: 0vw;height: 100vh;width: 100vw;}    
  
.entete{z-index:1;border-radius : 0.5vw; position:absolute;top:1vh;left: 1vw;text-align: center;border-top: 0.1vw solid blueviolet;border-left: 0.1vw solid blueviolet;border-right: 0.1vw solid blueviolet;height: 15vh;width: 98vw;}
video {z-index:1;border-radius: 0.5vw;position: absolute;left: 87.5vw;top:1.5vh;width: 11vw;border: 0.1vw solid black;display: inline-block;}
.corps{z-index:1;border-radius: 0.5vw;position:absolute;top:16vh;left: 1vw;text-align: center;border-left: 0.1vw solid blueviolet;border-right: 0.1vw solid blueviolet;height: 70vh;width: 98vw;}
.pied{z-index:1;border-radius: 0.5vw;position:absolute;top:86vh;left: 1vw;text-align: center;border-bottom: 0.1vw solid blueviolet;border-left: 0.1vw solid blueviolet;border-right: 0.1vw solid blueviolet;height: 13vh;width: 98vw;}

entete_titre{position:absolute;z-index: 2;top: 1.7vh;left: 25vw;text-align: center;width: 50vw;font-family: arial black;color:blueviolet;font-size: 2.5vw;}
entete_pub{position:absolute;z-index: 2;top: 8vh;left: 15vw;text-align: center;width: 70vw;font-family: arial;color:black;font-size: 1.5vw;}
text_pied{position:absolute;z-index: 2;top: 94vh;left: 10vw;text-align: center;width: 72vw;font-family: arial;color:black;font-size: 0.8vw;}

entete_titre_popup{position:absolute;z-index: 2;top: 1.7vh;left: 1vw;font-family: arial black;color:blueviolet;font-size: 1vw;}
/* test arguments*/

/* Affiche le logo SGN*/
.logo{position:fixed;z-index: 2;top: 1.5vh;left: 0.5vw;width: 15vw;height: 12vh;border-style : none;text-indent: -999em;background-image: url('images/logo.png');
      background-size: 12vw;background-position:center;background-repeat:no-repeat;}

   /* Affiche les icones*/
.logo_images{
      position:absolute; z-index: 2; top: 15vh; right: 2.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/images.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;
   }
 .logo_infos{
      position:absolute; z-index: 2; top: 26vh; right: 2.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/infos.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_webcam{
      position:absolute; z-index: 2; top: 37vh; right: 2.5vw; width: 3.5vw; height: 8vh;
     border-style : none;text-indent: -999em;background-image: url('files/webcam.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_vector{
      position:absolute; z-index: 2; top: 48vh; right: 2.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/vector.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_contact{
      position:absolute; z-index: 2; top: 59vh; right: 2.5vw; width: 3.5vw; height: 8vh;
     border-style : none;text-indent: -999em;background-image: url('files/contact.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_liens{
      position:absolute; z-index: 2; top: 70vh; right: 2.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/liens.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_journal{
      position:absolute; z-index: 2; top: 81vh; right: 2.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/journal.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;}
 .logo_ecrire{
      position:absolute; z-index: 2; top: 15vh; right: 8.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/plume.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;
   }
 .logo_campingcar{
      position:absolute; z-index: 2; top: 81vh; right: 8.5vw; width: 3.5vw; height: 8vh;
      border-style : none;text-indent: -999em;background-image: url('files/campingcar.png');
      background-size: 3vw;background-position:center;background-repeat:no-repeat;
   }
   
/* effacement de la zone et apparition du popup*/ 
 #popup-overlay_images{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_images.open{display: block;}
 #popup-overlay_infos{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_infos.open{display: block;}
 #popup-overlay_webcam{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_webcam.open{display: block;}
 #popup-overlay_vector{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_vector.open{display: block;}
 #popup-overlay_contact{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_contact.open{display: block;}
 #popup-overlay_liens{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_liens.open{display: block;}
 #popup-overlay_journal{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_journal.open{display: block;}
 #popup-overlay_ecrire{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_ecrire.open{display: block;}
 #popup-overlay_campingcar{position: fixed;top: 0; left: 0;right: 0;bottom: 0;z-index: 98;background: rgba(0,0,0,0.7);display:none;}
 #popup-overlay_campingcar.open{display: block;}
 
 /* Active les popup button*/
 .button_images{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 15vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
 
 .button_infos{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 26vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
 }
  
 .button_webcam{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 37vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
 
       
 .button_vector{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 48vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
     
 .button_contact{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010;border : 0.2vw solid blueviolet;border: none ;
      top: 59vh;text-align: center; font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
   
 .button_liens{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010;border : 0.2vw solid blueviolet;border: none ;
      top: 70vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
 .button_journal{
      position:absolute; z-index: 2; right: 2.2vw; width: 5vw; height: 8vh;
      background:#00000010;border : 0.2vw solid blueviolet;border: none ;
      top: 81vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
 .button_ecrire{
      position:absolute; z-index: 2; right: 8.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 15vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
      
  .button_campingcar{
      position:absolute; z-index: 2; right: 8.2vw; width: 5vw; height: 8vh;
      background:#00000010; border : 0.2vw solid blueviolet; border: none ;
      top: 81vh;text-align: center;font-size: 1.6vh;text-shadow: 0.1vw 0.1vw 0.1vw white;
      }
      
 .popup-contenu-images{
    max-width: 100%;
     visibility: visible;position:absolute; 
     top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
     width: 75vw; height: 55vh; /* Taille de la fenêtre*/
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; text-align: justify;justify-content: space-around;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}   
 .popup-contenu-infos {
     visibility: visible;position:absolute;
     top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
     width: 50vw; height: 50vh;
      margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; text-align: justify;overflow-y: auto;justify-content: space-around;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}
 .popup-contenu-webcam {
     visibility: visible;position:absolute;
     top:1vh;left: 1vw;border: 0.1vw solid black;
     top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
     width: 60vw; height: 42vh;
      margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; text-align: center;overflow: auto;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
    }
 .popup-contenu-vector {
    visibility: visible;position:absolute; 
    top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
    width: 40vw; height: 42vh;
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
    background-color: #ccc; text-align: center; overflow-y: auto;
    border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}

.popup-contenu-contact {
     visibility: visible;position:absolute; 
     top: 50%; left: 50%; transform:translate(-50%,-50%);   /*positionne au centre */
     width: 50vw; height: 44vh;                             /* taille de la fenetre*/
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; overflow-y: auto;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}
.popup-contenu-liens {
    visibility: visible;position:absolute; 
     top: 50%; left: 50%; transform:translate(-50%,-50%);   /*positionne au centre */
     width: 45vw; height: 55vh;                             /* taille de la fenetre*/
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; overflow-y: auto;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}

.popup-contenu-journal {
     visibility: visible;position:absolute; 
    top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
    width: 57vw; height: 85vh;
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
    background-color: #ccc; text-align: center; overflow: auto;
    border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}
.popup-contenu-ecrire{
    max-width: 100%;
     visibility: visible;position:absolute; 
     top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
     width: 75vw; height: 55vh; /* Taille de la fenêtre*/
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; text-align: center;justify-content: space-around;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}
.popup-contenu-campingcar{
    max-width: 100%;
     visibility: visible;position:absolute; 
     top: 50%; left: 50%; transform:translate(-50%,-50%); /*positionne au centre */
     width: 35vw; height: 55vh; /* Taille de la fenêtre*/
     margin: 0.5vw;padding: 0.5vw;box-sizing: border-box;align-items: unset; display: inline-table;/*justify-content: center;*/
     background-color: #ccc; text-align: center;justify-content: space-around;
     border : 0.1vh solid white;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;
}


  @-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}


@keyframes fadeIn {from {opacity: 0;}
  to {opacity:1;}
}

/* Passage sur bouton, affichage d'un cadre*/
.button_images:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_infos:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_webcam:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_vector:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_contact:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_liens:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_journal:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_ecrire:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.button_campingcar:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;}
.popup-exit:hover{ border : 0.15vw solid blueviolet;border-radius: 50%;} 
  /*
  Hauteur = heignt = vh
  Largeur = width = vw
  */
  .popup-exit{cursor: pointer;display: block; position: absolute;top:-2.5vw;right:0.5vw;width: 2vw;height: 2vw;text-align: center; text-decoration: none;color: #231557;background: #ccc; border-radius: 50%;font-size: 1.4vw; border : 0.1vh solid white;}
  .popup-exit1{cursor: pointer;display: block; position: absolute;top:0vw;right:0.5vw;width: 2vw;height: 2vw;text-align: center; text-decoration: none;color: #231557;background: #ccc; border-radius: 50%;font-size: 1.4vw; border : 0.1vh solid white;}
  
  
  .widjet{position: relative;width: 80%;height: 100%;}
  .plan{position: fixed;top: 13vh; left:10vw;width: 20vw;height: 23vh;}
  .plan1{position: initial; width: 20vw;height: 23vh;}
H2popup {position:relative;z-index: 2;font-family: arial black;color: blueviolet;font-size: xx-large;text-align: center;}
H3popup{position:relative;font-family: Times; font-weight: bold; color:black; font-size: x-large;}
H4popup{font-family: Times; font-weight: normal; color:black; font-size: large; text-align: justify;padding: 3vh;}

.textalarm{text-transform: uppercase;background-image: linear-gradient(-225deg,#231557 0%,#44107a 29%,#ff1361 67%,#fff800 100%);
  background-size: auto auto;background-clip: border-box;background-size: 200% auto;color: #fff;
  -webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: textclip 2s linear infinite;display: inline-block;font-size: 1.5vw;}

@keyframes textclip { to { background-position: 200% center; }}

.zone1 {float: left; width: 40%; text-align: center;}

.zone2 {float: left; width:60%; text-align: center;}

/* gestion diaporama*/
.container {
      margin: auto;
    position: absolute;
    max-height: 50vh;
    /* object-fit: contain; */
    width: auto;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}

.slides {
 object-fit: contain;
   /* resize: auto; */
    align-items: center;
}
img.taille-image{max-height: 50vh;max-width: 65vw;}
.prev{
  cursor: pointer;
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 1vw;
  border-radius: 0 0.2vw 0.2vw 0;
  background: rgba(0, 0, 0, .5);
  transition: all .3s;
  font-size: 1vw;
  left: 0;
}

.next {
  cursor: pointer;
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 1vw;
  border-radius: 0 0.2vw 0.2vw 0;
  background: rgba(0, 0, 0, .5);
  transition: all .3s;
  font-size: 1vw;
  right: 0;
  border-radius: 0.2vw 0 0 0.2vw;
}

.glisser{
  margin: auto;
    position: absolute;
    max-height: 50vh;
    width: auto;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
}
.prev:hover,
.next:hover {
  background: rgba(0, 0, 0, .8);
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin: 10px 2px 0 2px;
  display: inline-block;
  background: #ddd;
  transition: all .3s;
}

.active,
.dot:hover {
  background: #717171;
}
.journal{
    position: relative;
    top: 4vh;
    left: 0vw;
    width: 90%;
    height: 70vh;
    z-index: 1;
}

.tableau{width:100%;height: 80%;table-layout: fixed;}
.webcam_pirou{width: 22vw;height: -webkit-fill-available;display: flex;}
.webcam_sgn{width: 22vw;height: 17vh;display: block;
.widjet{position: relative;width: 100%;height: 100%;}


  /*th,td{border: 1px solid red;}
  Hauteur = heignt = vh
  Largeur = width = vw
  */