/*
	Fichier 	: style.css
	Description     : Fichier de styles pour site web Boby le drone
	Date 		: 21/12/2022	
	Auteur 		: Jean-Michel
*/

/* Plan du CSS ici (possible de faire des recherche avec ctrl+g pour trouver une catégorie )

#-31 Body (mise en page de la page)

#-60 Accueil (page d'accueil)

#-94 Photos (Page des photos)

#-211 Hyperliens (Page hyperlien)

#-292 À propos (Page à propos)

#-268 Formulaire (Page formulaire)

#-321 Décoration (taille, police, h1,h2,liens etc...)

#-579 Java Script(banière de photo déroulante)

*/

/* Corps de la page général */
 @import url('http://fonts.googleapis.com/css?family=Oswald');
 
 /*police Dragon Ball*/
@font-face { font-family: 'fonty'; 	
             src:url('webfont.ttf'); }

   /* Body - corps de la page */      
   html, body {
    font-family: fonty;
    font-size:22px;
    color: black;
    letter-spacing: 2px;
    text-align: center;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    }
    
    
     /* Toutes les photos dans la page */
   img {
       width: 90px;
       height: 60px;
       vertical-align: text-top;
}
 /* paramètre pour le logo du site web */
img.logo {
       width: 105%;
       height: 50%;
       vertical-align: text-top;
}
 /* Paramètre pour le texte dans le menu de navigation */
.Navtitre{
    color: White;
    font-family: fonty;
    font-size:25px;
    font-family: italic;
    
    }
    
     /* pour appliquer la couleur vert */
      /* couleur qui affiche à l'utilisateur la page présentement actif dans le menu de navigation */
.vert{
color: #4AB600;
 }
 
 .sitelive{
 color: #3579F6;
  }
  
  .liensitesnav
  {
 color: white;
  }
 .liensitesnav:hover{
  	text-decoration: none;
        text-decoration: none;
        color: #3579F6;
        
            font-family: fonty; color: #3579F6;
       text-decoration: none; 
       }
  
  
  /* paramètre de paragraphes */
p  {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 1px;
  color:black;
  font-family: fonty;
   }

 /* paramètre de haut de la page*/     
.header  {
         width: 100%;
         padding: 200px 0;
         text-align: center;
         color: white;
}
 /* paramètre de la banière*/     
.headerban {
         width: 100%;
         padding: 10px 0;
         text-align: center;
         color: white;
         background-image: url('images/BanV.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
}

.title {
		float:left;
                margin-right:50px;
                font-size: 23px;
                text-shadow: 10px 2px black;
                font-family: Verdana;
                font-style: fonty;
		}

 /* bar de navigation */
men{
        /* pixels qui sépare le haut de la barre de navitation */
    margin-top: 30px;
        /* pixels qui sépare le bas de la barre de navitation */
    margin-bottom:10px;
}

men li {
    display: inline-block;
    /* Largeur des boutons */
    width: 170px;
    color:grey;
    
}

/* Liens */
a:link { /*lien non-visité */
    font-size:25px;
    font-family: fonty; color: black;
    text-decoration: none;
	}    
a:visited { /* lien visité */
    font-size:25px;
    -webkit-text-stroke: 1px black; /* width and color */
    font-family: fonty; color: black;
    text-decoration: none;
	} 
a:hover { /* survol du lien */
	text-decoration: none;
        text-decoration: none;
        color: #3579F6;
	}   
a:active { /*lien actif */
    font-family: fonty; color: #3579F6;
       text-decoration: none; 
}

/* Formulaire (Page formulaire) */
 fieldset {
    background-color: white;
    width: 70%;
    border: 5px solid black;
    border-radius: 20px;
    color:black;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
}
/* Tableau (hyperliens) */
img.tab {
       /* à propos des images dans le tableau */
       width: 100%;
       height: 55%;
       height: 100%;
       text-align: center;
       
}

table {
    width: 600px;
    height: 600px;


 /* Coller les cellules */
/* border-collapse: collapse; */

/* Espace entre les cellules*/
border-spacing:10px;

 /*Centrer le tableau sur la page*/
margin-left: auto;
margin-right: auto;

/* Arrondir les coins*/
border-radius:10px;
}

td {
    border: 3px dotted white;
    /*Marge intérieur de la cellule*/
    padding:20px;
    border-radius: 3px;
    width: 580000px;
}
.tgreen {
    background-color: green;
}
.tvert {
    background-color: green;
}
 /* dimension des tableaux */
.tcel4{
    border-width: 0px;
    text-shadow: 1px 2px black;
}
.tcel5{
    border: 0px solid white;
}
 /* sens des tableaux */
.tcentre {
    text-align: center;
}
/* ajoute le texte à gauche */
.left{
    text-align: left;   
    margin-left: 30px;
    padding-left: 30px;
    padding-right: 30px;
    
}
.center{
    text-align: center;   
    margin-left: auto;
    
}
iframe{
    text-align: left;
    }

legend{
    text-align: left;
    background-color: white;
    border: 5px solid black;
    border-radius: 20px;
    padding: 5px;
    color :black;
}
/* centre les div (ex: bouton input) */
div{    
    text-align: center;
    margin: 1px;
    
}

label {
    float: none;
    width: 50%;
    margin-right: 1px;
    text-align: center;
    font-weight: bold;
    color :black;
}

textarea {
    width: 80%;
    color :black;
}

/* Position bas */
footer {
color:black;
 margin-top: 100px;
 margin-bottom: 1px;
  font-size: 10px;

}
/* Gros Titre */
h1  {
  color:black;
  font-size: 70px;
  
   }
   /* Titre secondaire */
h2 {
  font-size: 45px;
  color:black;
}
/* Petit Titre */
h3  {
  color:black;
  font-size: 30px;
  font-family: fonty;
   }
li  {
  color:black;
   }
	   
/* taille et types de textes */

.texte	{
		font-family:fonty;
                font-size:20px;
                color: black;
		}
/* tailles du texte */
.p80px	{
	font-size:80px;
}

/* décoration barre de navigation  */
men {	
  vertical-align:middle;
  float: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: #353A3F;
  color: white;
}

 
 /* bouton à la page d'accueil '*/
.btn-bgstroke {
  font-size: 10px;
  display: inline-block;
  border: 0.5px solid black;
  padding: 30px 60px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
  font-family:Verdana;
  font-weight: bold;
}

 /* java script */
 
 .contenu {
    width: 100%;
    height: 150px;
    padding: 1px;
    border: 10px solid black;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: black;
    margin: auto;
}

.image-wrapper {
    overflow: hidden;
}

#imagederoul {
    position: relative;
    overflow: hidden;
    width: 960px;
    padding: 0;
    left: 0;
}

#imagederoul li {
    position: relative;
    max-width: 100%;
    float: left;
    list-style: none;
    left: 0;
}

.textpresentation {
    text-align: center;
    font-family: tahoma;
    font-size: 20px;
}

.VWtexte {
    font-family: tahoma;
    font-size: 22px;
    font-weight: bold;
}

.revision {
    margin-top: 205px;
    color: lightgray;
    font-size: 18px;
}

/* Photos (Page des photos) */
     
       #grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 350px;
  gap: 5px;
  height: 100vh;
  overflow-y: scroll;
  padding-right: 10px;
  grid-auto-flow: dense;
}

#grid::-webkit-scrollbar {
  background-color: #dedede;
  width: 10px;
}

#grid::-webkit-scrollbar-thumb {
  background-color: #757575;
}

.grid-item {
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.grid-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.grid-img:hover {
  transform: scale(1.2);
}

/* Java script page à propos */

div#page {
    width: 100%;
    height: 100%;
    text-align: center;

}
/* entête avec le titre dans à propos */
div#entete {
    width: 100%;
    height: 10%;
    background-color: black;
    padding-top: 1px;
}

div#gauche {
    float: left;
    width: 10%;
    height: 50%;
    background-color: black;
}

/* corp du texte qui donne son résultat dans à propos */
div#corps {
    width: 100%;
    height: 50%;
    text-align: justify;
    background-color: black;
    color: black;
    font-size: 40px;
    font-family: "courier normal";
}
/* fais disparaitre l'élément' */
#corps2{
    display: none;
}
#corps3{
    display: none;
}

#entete2 {
    display: none;
}
#entete3 {
    display: none;
}

input{
    margin-left: auto;
    margin-right: auto;
    
    width: 100%;
    color :black;
    }

/*Bouton*/
input[type="submit"]{
    font-family: fonty;
    border: 2px solid #3579F6;   
    text-align: center;
    background-color: white;
    color:black;
    font-size: 25px;
    display:inline-block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25px;

}
/* Bouton lorsque survolé avec la souris */
input:hover[type="submit"]{
    font-family: fonty;
    border: 2px solid black;   
    text-align: center;
    background-color: white;
    color:#3579F6;
    font-size: 25px;
    display:inline-block;
    margin-left: auto;
    margin-right: auto;
}
/*Bouton*/
input[type="reset"]{
    font-family: fonty;
    border: 2px solid #3579F6;   
    text-align: center;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    color:black;
    font-size: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25px;

}

/* Bouton lorsque survolé avec la souris */
input:hover[type="reset"]{
    font-family: fonty;
    border: 2px solid black;   
    text-align: center;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    color:#3579F6;
    font-size: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* bouton à cocher */
input[type="checkbox"] {
    width:20px;
    height:20px;

}
/* Bouton à cocher */
input.posi[type="checkbox"]{ 
    right: 20%;
    margin-left: 0px;
}

.notifcontactdone{
    background-color: white;
    border: 5px solid #00E353;
    border-radius: 20px;
    color:black;
    font-size: 30px;
        margin-left: auto;
    margin-right: auto;
    width:65%;
    }
    .menu2{visibility:hidden;}
    .jumbotron {
  background-image: url("../images/BanV.jpg");
  background-size: cover;
}

    
    @media screen and (min-width:301px) and (max-width:800px){body{padding:7px}
.menu{visibility:hidden; width:auto; height:0px; margin:0px; padding:0px; float:none; margin:0px}
   .menu2{visibility:visible;}
   img.logo {
       width: 172px;
       height: 39px;
       vertical-align: text-top;}
   }