.reaentier /* Bloc entier (body)*/
{
   width: 98%;
   margin: auto;
   background-color: rgb(214, 212, 212);     
}
.retour  /*retour page acceuil*/
{
  margin-top: 5px;
}
.retour a
{
  color:darkslategrey;  
}
.retour a:hover
{
  color: rgb(27, 206, 27);
  font-weight: bold;
}
h2
{
   color: rgb(129, 129, 127);
}
.textintro h2
{
  position: relative;
  height:80px;
  width: 80%;
  border:rgb(214, 212, 212) 1px solid;
  box-shadow: 0 0 10px rgb(63, 62, 62);
  margin-top: 15px;
  margin-right: 30%;
  margin-left: 100px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: 'Trebuchet MS', 'Comic Sans MS' ,' Lucida Sans Unicode',
   'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 1.1em;
   font-weight: bold;
   text-align: center;  
}
                                  /*  diaporama version2*/
img {
   max-width: 100%;
 }
 .slider-container {
   max-width: 800px;
   position: relative;  
   margin: auto;
   margin-top: 25px;
   height: 700px;
   overflow: hidden;
 }
 
 .menu {
   position: absolute;
   left: 0;
   z-index: 11;
   width: 100%;
   bottom: 0;
   text-align: center;
 }
 .menu label {
   cursor: pointer;
   display: inline-block;
   width: 10px;
   height: 10px;
   background: rgb(95, 94, 94);
   border-radius: 50px;
   margin: 0 0.2em 1em;
 }
 .menu label:hover,.menu label:focus {
   background: rgb(83, 228, 17);  
 }
 .menu label:active
 {
   background: rgb(235, 219, 5);
 }
 .slide-input{
   opacity: 0;
 }
 .slide-img {
   width: 50%;
   height: 650px;
   position: absolute;  
   margin-left: 25%;
   /*margin-top: 20px;*/
   top: 0;
   border: 2px solid whitesmoke;
   box-shadow:2 2 10 black;
   left: 100%;
   z-index: 10;
   transition: left 0s 0.75s;
 }

 
 [id^="slide"]:checked + .slide-img 
  {
   left: 0;
   z-index: 100;
   transition: left 0.65s ease-out;
 }
 @media only screen and (max-device-width :480px )
 /*modif iphone ok aout 24*/
 {
   .reaentier
   {
     width: 90%;
     margin:auto;
   }
   .textintro h2
   {
     width: 90%;
     height: auto;
     margin-left: 2%;
     color: black;
   }  
   .slide-img
  {
    width: 90%;
    margin-left: 2%;
  }
 }
 /*tablettes 7/10 pouces*/
 @media only screen  
and (min-device-width : 800px)
and (max-device-width : 1024px)
and (orientation : landscape) 
{
  .reaentier
  {
    width: 45%;
    margin:auto;
  }
  .textintro h2
  {
   width: 90%;
    height: auto;
    margin-left: 2px;
    color: black;
  }  
 .slide-img
 {
   width:90%;
   margin-left: 1%;  
 }

}
@media only screen
and (max-device-width :1024px)
{
  .reaentier
  {
    width: 80%;
    margin:auto;
  }
  .textintro h2
  {
   width: 80%;
    height: auto;
    margin-left: 2px;
    color: black;
  }  
 .slide-img
 {
   width:100%;
   margin: auto;  
 }
 
}