/* Mise en page principale */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; /* Reset Margin et Padding */
}

/* Imperatif pour du responsive */

img, object, embed, canvas, video, audio, picture {
   max-width:100%;
   height:auto;
   border:0;}

body {
   width: 100%; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
	background-color: #e0eaff;/*  remplacement image */
   padding: 1px; /* Marge Exterieur Body */
   background-image: url("frame/logo.jpg"); /* image de fond  */
   background-position: 50%;/*  position image */
   background-size: 100%;/* taille image  */
   background-repeat: no-repeat;/* statut image  */
   background-color: black;/*  remplacement image */
   background-attachment: fixed;/*  effet sur image */
}

.titre1 {
   color: black; /* Couleur Texte */
   text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
   /* text-align: center; */
   font-size: 3em; /* Taille ecriture texte */
   margin: 10px 10px 00px 10px ; /* Marge Interieur */
   text-align: center;
}

.titre2 {
   color: black; /* Couleur Texte */
   text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
   /* text-align: center; */
   font-size: 2.5em; /* Taille ecriture texte */
   margin: 70px 10px 00px 10px ; /* Marge Interieur */
   text-align: center;
}

.soustitre {
   color: black; /* Couleur Texte */
   text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
   /* text-align: center; */
   font-size: 2em; /* Taille ecriture text */
}

p {
   padding: 0px 10px 10px 10px; /* Marge Exterieur */
   font-size: 1.2em; /* Taille ecriture text */
}

.image {
   padding: 10px 0 0 0;
}

/* .image:hover {*/
   /* width:400px; */
   /* height:400px; */
/* } */

p.texte {
   font-size: 1.4em; /* Taille ecriture text */
}

a {
   padding: 0px 10px 10px 10px;
   text-decoration: none; /* Suprime le soulignement genere par Menu */
   color: black; /* Couleur des Liens */
   text-shadow: red 0.1em 0.1em 0.3em;
   font-weight: bold; /* Liens en Gras */
   font-size: 2em; /* Taille ecriture text */
}
   
a:hover {
      background-color: wheat;
      text-shadow: red 0.1em 0.1em 0.3em;
      margin: 0 0 0 0;  /* Marge Exterieur header */
      padding: 10px 10px 10px 10px;  /* Marge Interieur header */
   }

   .opak {
   opacity: 0.9; /* opacite du texte */
}

/* Debut Mise en page Haute */

div.logo {
   width: 100%; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
	background-color: #e0eaff;/*  remplacement image */
   border-top: 10px ridge #0099ff; /* bordure du header */
   border-right: 10px ridge #0099ff; /* bordure du header */
   border-left: 10px ridge #0099ff; /* bordure du header */
}

.logo {
   /*background-color: red;/* */
   display: flex;
   flex-direction: row; /* axe vertical  enfants seront l'un en dessous des autres */
   justify-content: space-evenly; /* Centre mon paragraphe3*/
   align-items: center;  /* Centre mon paragraphe3*/
}

.logotitre {
   /*background-color: yellow; /* */
   width: 30%; /* Largeur body */
   height: 50%; /* Hauteur body */
   font-size: 3.2em; /* Taille ecriture liste */
   margin: 20px 0px 0px 20px; /* marge Exterieur logo */
   padding: 30px 20px 30px 20px; /* Redimensionne Interieur Logo */
   color: wheat; /* couleur texte logo */
   text-shadow: red 0.1em 0.1em 0.2em;  /* ombre texte menu */
   background-color: #0099ff; /* couleur fond logo */
   box-shadow: #99ffff 0.2em 0.2em 0.4em;  /* ombre texte boite */
   border-radius: 50%; /* bordure logo */
   text-align: center;
}

.entete {
   /* background-color: green; /* */
   width: 20em; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-size: 2em; /* Taille ecriture liste */
   margin: 10px 10px 10px 10px; /* marge Exterieur logo */
   padding: 10px 10px 10px 10px; /* Redimensionne Interieur Logo */
   color: black; /* couleur texte logo */
   text-shadow: red 0.1em 0.1em 0.2em;  /* ombre texte menu */
} 

/* Fin Mise en page Haute */

/* Debut texte */

.description {
   width: 100%; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
	background-color: #e0eaff;/*  remplacement image */
   border-right: 10px ridge #0099ff; /* bordure du header */
   border-left: 10px ridge #0099ff; /* bordure du header */
   padding: 60px 10px 10px 10px;
   margin-top: 0px;
}

.feuille {
   width: 80%; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
   background-image : url("frame/FeuillePC.png");
   background-position: center;
   margin:auto;
	background-color: #e0eaff;/*  remplacement image */
   padding: 40px 20px 40px 20px;
   border-radius: 5%;   /* padding: 10px 10px 10px 10px; */
}

.iframe {
   width: 100%;
   height: 100%;
   }

.videodrone { 
   background-color: #e0eaff; /* */
   border: 1em solid white;
   box-shadow: black 0.3em 0.3em 0.6em;  /* ombre boite */ 
   position: relative;
   text-align: center;  /* Centre mon paragraphe3*/
   margin-top: 3em; /* Marge superieur Video */
   margin-bottom: 3em;  /* Marge inferieur Video */
   margin-left:auto;
   margin-right:auto;
   width: 75%;
   height: auto;
}

.videodrone iframe  { 
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }

/* Fin texte */

/* Debut Slider et video */

.sortie {
   width: 100%; /* Largeur body */
   height: 100%; /* Hauteur body */
   font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
	background-color: #e0eaff;/*  remplacement image */
   padding: 30px 0 30px 0;
   text-align: center;
   border-right: 10px ridge #0099ff; /* bordure du header */
   border-left: 10px ridge #0099ff; /* bordure du header */
}

.photo {
   /*background-color: red;/* */
   display: flex;
   flex-direction: row; /* axe vertical  enfants seront l'un en dessous des autres */     justify-content: space-evenly; /* Centre mon paragraphe3*/
   align-items: center;  /* Centre mon paragraphe3*/
}

/* Debut Slider */
.slider1 {
   background-color: green;
   width: 30%; /* taille Slider */
   margin: 3em 3em 3em 12em;
   overflow: hidden;
   border: 1em solid white;
   box-shadow: black 0.3em 0.3em 0.6em;  /* ombre boite */ 
   display: flex;
   justify-content: center; /* Centre mon paragraphe3*/
   align-items: center;  /* Centre mon paragraphe3*/
}

.slider1 .slider {
   display: flex;
   animation: slider1 16s infinite ease-in-out;
}

.slider1 img {
background-color: yellow;
flex-shrink: 0;
padding: 0 0;
width: 100%;
height: 100%;
}
/*
Pour un diaporama de 8 images.
Calcule a effectuer:

2sec par image soit 2x8=16
donc remplaer par votre valer =>
   => animation: slider1 16s infinite ease-in-out;

   ------------------------------------------------

5% par transition
soit 5x8=40%  de transition

reste divise par 
100-40=60%

60%/nbr photo soit 8 = 7.5%

Avec ces deux valeur on adapte l'echelle du temps 
et le nombre de photos

*/

@keyframes slider1 {
0%,
9.28%{ /* duree visionnage photo */
    transform: translateX(0);
}
14.28%, /*  plus transion */
23.56%{ /* duree visionnage photo */
    transform: translateX(-100%);
}
28.56%, /* plus transion */
37.84%{ /* duree visionnage photo */
    transform: translateX(-200%);
}
42.84%, /* plus transion */
52.12%{ /* duree visionnage photo */
    transform: translateX(-300%);
}
57.12%, /* plus transion */
66.4%{ /* duree visionnage photo */
    transform: translateX(-400%);
}
71.4%, /* plus transion */
80.68%{ /* duree visionnage photo */
    transform: translateX(-500%);
}
85.68%, /* plus transion */
94.96%{ /* duree visionnage photo */
    transform: translateX(-600%);
}

99.5%, /* plus transion 
ICI JE TRICHE UN PEU POUR MASQUER L4EFFET DE RETOUR*/
100%{ /* duree visionnage photo */
    transform: translateX(-700%);
}
}

/* Fin Slider */

.video { 
   background-color: transparent; /* */
   border: 1em solid white;
   box-shadow: black 0.3em 0.3em 0.6em;  /* ombre boite */ 
   position: relative;
   text-align: center;  /* Centre mon paragraphe3*/
   margin-top: 0;
   margin-left:auto;
   margin-right:auto;
   width: 25%;
   height: auto;
}

.video iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* Fin Slider et video */

/* ----------------Coordonnees---------------------- */

.coordonnee { 
   width: 100%; /* Largeur body */
   height: 100%; /* Hauteur body */
   background-color: #e0eaff;/*  remplacement image */
   border-right: 10px ridge #0099ff; /* bordure du header */
   border-left: 10px ridge #0099ff; /* bordure du header */
   border-bottom: 10px ridge #0099ff; /* bordure du header */
   
   /*background-color: transparent;*/
   display: flex;
   flex-direction: row; /* axe vertical  enfants seront l'un en dessous des autres */
   justify-content: space-between; /* Centre mon paragraphe3*/
   align-items: center;  /* Centre mon paragraphe3*/
   padding: 2em 0 0 0;
}

.fb:hover {
   background-color: blueviolet; /*  */
   border: blue ridge 0.2em;
   color: chartreuse;
   text-shadow: #e0eaff 0.2em 0.2em 0.5em;
   margin: 0 0 0 0;  /* Marge Exterieur header */
   padding: 0 0 0 0;  /* Marge Interieur header */
   box-shadow : 0.2em 0.2em 0.5em black inset,  0.2em 0.2em 0.5em black; 
}

.Localisation { 
   width: 40%; /* taille Slider */
   background-color: transparent;
   padding: 0 0 0 4em;
}

.map { 
   width: 55%; /* taille Slider */
   height: auto;
   /* width="600" height="450" */
   background-color: transparent;
   padding: 4em 4em 4em 4em;
   margin-bottom: 50px;

   overflow:hidden;
   padding-bottom:56.25%;
   position:relative;
   height:0;
}
.map iframe {
   left:0;
   top:0;
   height:100%;
   width:100%;
   position:absolute;
}

/* -------------------------------------- */

/* -----------------Retour haut de page----------------------------------- */	
#scrollUp {
   position: fixed;
   opacity: 0.9;
   filter: grayscale(100%);
   transform: scale(0.2);
   left: -5em;
   bottom: -5em;
   z-index: 10;
}

#scrollUp:hover {
   position: fixed;
   opacity: 1.1;
   filter: grayscale(100%);
   transform: scale(0.4);
   left: -4em;
   bottom: -4em;
   z-index: 10;
}
/* -------------------------------------- */

/* ---------------------- Adaptation Ecran 1000px ----------------------------- */

@media all and (max-width: 1000px) { /* (max-width: 991px) */
   
   .image {
      display: none;
   }

   div.logo {
      display: flex;
      flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/
   }

   .logotitre { /* Pegase Hotel */
      width: 90%; /* Largeur div */
      height: 50%; /* Hauteur div */
      background-color: transparent; /* Couleur Fond */
      color: black; /* Couleur Ecriture */
      font-size: 4em; /* Taille ecriture  */
   }

   .entete { /* Service proposés */
      width: 90%; /* Largeur div */
      height: 100%; /* Hauteur div */
      font-size: 2.5em; /* Taille ecriture  */
      margin-left: 5em; /* Espace gauche texte */
   
   } 
   
   .feuille { /* Dimension de la page */
      width: 90%; /* Largeur body */
      height: 100%; /* Hauteur body */
   }

   p.texte {
      font-size: 2em; /* Taille ecriture text */
   }

   .videodrone { 
      width: 85%;
      height: auto;
   }
   
   .slider1 {
      background-color: green;
      width: 50%; /* taille Slider */
      margin: auto;
      overflow: hidden;
      border: 1em solid white;
      box-shadow: black 0.2em 0.2em 0.5em;  /* ombre boite */ 
      display: flex;
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/
      margin-left: 1em;
   }

   .video { 
      background-color: #e0eaff; /* */
      width: 50%;
      height: auto;
      overflow: hidden;
      border: 1em solid white;
      box-shadow: black 4px 4px 12px;  /* ombre boite */ 
      margin: 1em;

    }

   .coordonnee { 
      width: 100%; /* Largeur body */
      height: 100%; /* Hauteur body */
      background-color: #e0eaff;/*  remplacement image */
      /*background-color: transparent; /* */
      display: flex;
      flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/

   }

   .Localisation { 
      width: 90%; /* taille Slider */
      background-color: transparent;
      padding: 1em 0em 0em 2.5em;
      text-align: center;  /* Centre mon paragraphe3*/
      margin-left:auto;
      margin-right:auto;
   }

   .map { 
      width: 90%; /* taille Slider */
      height: auto;
      /* width="600" height="450" */
      background-color: transparent;
      padding: 4em 4em 15em 4em;
      margin-bottom: 5em;
      overflow:hidden;
      padding-bottom:56.25%;
      position:relative;
      height:0;
   }
   
   .titre1 {      
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      /* text-align: center; */
      font-size: 3em; /* Taille ecriture texte */
      text-align: center;
   }
   
   .titre2 {
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      /* text-align: center; */
      font-size: 3em; /* Taille ecriture texte */
      margin: 0em 0 0 0; /* Marge Interieur */
      text-align: center;
   }
   
   .soustitre {
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      font-size: 3.5em; /* Taille ecriture text */
   }

   p {
      padding: 0px 10px 10px 10px; /* Marge Exterieur */
      font-size: 2.2em; /* Taille ecriture text */
   }

   a {
      font-size: 3.5em; /* Taille ecriture text */
   }

   #scrollUp {
      zoom: 2;
      left: -5.5em;
      bottom: -7.5em;
   }

}

/* ---------------------- Adaptation Ecran 750 px ------------------------------ */

@media all and (max-width: 750px) { /* (max-width: 991px) */
   
   .image {
      display: none;
   }

   div.logo {
      display: flex;
      flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/
   }

   .logotitre { /* Pegase Hotel */
      background-color: transparent;
      color: black;
      width: 100%; /* Largeur body */
      height: 50%; /* Hauteur body */
      font-size: 3em; /* Taille ecriture liste */
      margin-left: 0em; /* donne un retrait a la div */
      margin-top: -0.5em;
   }

   .entete { /* Service proposés */
      background-color: transparent;
      width: 100%; /* Largeur body */
      height: 100%; /* Hauteur body */
      font-size: 1.5em; /* Taille ecriture liste */
      margin-left: 2em; /* donne un retrait a la div */
      margin-top: -0.5em;
   } 

   .description {
      padding: 0 0 0 0; 
   }

   .feuille { /* Dimension de la page */
      width: 95%; /* Largeur div */
      height: 100%; /* Hauteur div */
      padding: 0.5em 0.5em 0.01em 0.5em ;
   }

   p.texte {
      font-size: 1.5em; /* Taille ecriture texte */
   }
   
   .videodrone { 
      width: 90%;
      height: auto;
      border: 0.5em solid white;
      text-align: center;  /* Centre mon paragraphe3*/
      margin-left:0.75em;
      margin-right:auto;
      margin-top: 1em;
   }

   .sortie {
      padding: 1em 0 0 0;
   }

   .slider1 {
      background-color: green;
      width: 80%; /* taille Slider */
      margin: auto;
      overflow: hidden;
      border: 0.5em solid white;
      box-shadow: black 0.2em 0.2em 0.5em;  /* ombre boite */ 
      display: flex;
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/
      margin-left: 1em;
      margin-top: 0em;
   }

   .video { 
      background-color: #e0eaff; /* */
      width: 80%;
      height: auto;
      overflow: hidden;
      border: 0.5em solid white;
      box-shadow: black 4px 4px 12px;  /* ombre boite */ 
      margin: 0em 1em 0em 1em;

    }

   .coordonnee { 
      width: 100%; /* Largeur body */
      height: 100%; /* Hauteur body */
      background-color: #e0eaff;/*  remplacement image */
      display: flex;
      flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
      justify-content: center; /* Centre mon paragraphe3*/
      align-items: center;  /* Centre mon paragraphe3*/
      margin-top: 0em;
   }

   .Localisation { 
      width: 95%; /* taille Slider */
      background-color: transparent;
      padding: 1em 0em 0em 2.5em;
      text-align: center;  /* Centre mon paragraphe3*/
      margin-left: -1em;
   }

   .map { 
      width: 90%; /* taille Slider */
      height: auto;
      /* width="600" height="450" */
      background-color: transparent;
      padding: 4em 4em 4em 4em;
      margin-bottom: 5em;
      overflow:hidden;
      padding-bottom:56.25%;
      position:relative;
      height:0;
   }
   
   .titre1 {      
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      /* text-align: center; */
      font-size: 2em; /* Taille ecriture texte */
      margin: 0 0 0 0 ; /* Marge Interieur */
      text-align: center;
   }
   
   .titre2 {
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      /* text-align: center; */
      font-size: 2em; /* Taille ecriture texte */
      text-align: center;
   }
   
   .soustitre {
      color: black; /* Couleur Texte */
      text-shadow: red 0.1em 0.1em 0.3em;  /* ombre texte */
      font-size: 2em; /* Taille ecriture text */
   }

   p {
      padding: 0px 10px 10px 10px; /* Marge Exterieur */
      font-size: 1.5em; /* Taille ecriture text */
   }

   a {
      font-size: 2em; /* Taille ecriture text */
   }

   #scrollUp {
      zoom: 1.2;
      left: -5.5em;
      bottom: -6em;
   }

}