html,body{margin: 0;
padding: 0;}


@font-face {
  font-family:'Mister Sally' ;
  src: url('font/Mister\ sally.ttf');
}



 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
     color:rgba(138, 73, 4, 0.749);
 }

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}

.entete{width: 100%;
height: 580PX;
background-color:#FFBE00 ;}

.logo{width: 225px;
height: 350px;
margin-top: -950px;
margin-left: 42%;}
h1
{text-align: center;
    position: absolute;
    margin-top: -550px;
    margin-left: 10px;
color:white;
font-size: 40px;
  font-family: sans-serif;
  font-weight: 700;
  font-style: normal;
  padding-top: 80PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 100px;
margin-left: 27%;
}

.slogan2{font-family:sans-serif ;
color:black;
font-size: 30px;
font-weight: 500;
font-style: italic;
text-align: center;
position: absolute;
margin-top: -200px;
margin-left: 22%;
line-height: 40PX;
}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10S; 
  animation-fill-mode:both;
  
}


  .slogan2:last-of-type p {
  
  animation: reveal 10s ;
  animation-fill-mode: both;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}



@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:0;width:0px;}
    30% {width:755px;}
    80% {opacity:1;}
    100% {opacity:1;width:755px;}
}




.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}
.titreheader{color:white;
font-size:26PX;
margin-top:-340px;
margin-left: 37%;}
   h2{  font-family:sans-serif;
    font-size: 36PX;
    font-weight:800;
    margin-top: 40px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }
 
 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 24px;
color: gray;
margin-top: 30PX;}


.conteneur1{display: flex;
  flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 10%;
}

p.titresite{text-align: center;
  margin-top: 36PX;
  font-size: 16PX;
  color: black;
  font-weight: 600;
  font-family: sans-serif;
   font-style: 500;
  background-color:white;
  margin-left: -60%;
}

.titresitetomsouville{
  margin-top: 36PX;
  font-size: 16PX;
  color: black;
  font-weight: 600;
  font-family: sans-serif;
   font-style: 500;
  margin-left: 8%; 
}
.siteauto{width: 480PX;
height: 250PX;
margin-left: 30PX;
margin-top: 80PX;}

.sitetom{width: 480PX;
height: 250PX;
margin-left: 30PX;
margin-top: 80PX;}

footer{max-width: 100%;
height: 340px;
margin-top: 120PX;
background-color: #FFBE00;}

.logofooter{width: 225px;
height: 210px;
width: 140PX;
margin-top: -25px;
margin-left: 46%;}

h4
{margin-left: 42%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
text-align: center;
margin-top: -55px;
}

.pfooter{font-size: 25PX;
text-align: center;
font-family:sans-serif;
margin-top: 40px;
margin-left: 45%;
position: absolute;
color: black;
}
 .mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 80PX;
  }


@media screen and (min-width: 300px) and (max-width: 650px){
.navbar-brand{color: rgb(154, 120, 56);
  position: absolute;
  margin-top: 0PX;
font-size: 18PX;
font-weight: 600;
 margin-left: 4%;
 position: sticky;
}
.navbar-nav{flex-direction: column;
margin-top: 8PX;}


 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -0%;
    color: rgb(154, 120, 56);}

    .navbar-toggler{margin-left: 80%;
        z-index: 1;
        color:#C9C094;
      margin-top: -24PX;}
    .navbar-toggler-icon{color:gold;
    }
.navbar-toggler.collapsed{margin-top: -14PX;}


.entete{height: 300px;
}
.logo{
height: 150px;
width: 100PX;
margin-top: -520px;
margin-left: 38%;}

h1
{text-align: center;
    position: absolute;
    margin-top: -300px;
    margin-left: -23px;
color:white;
font-size: 16px;
  font-family:  sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

    .titreheader{color:white;
font-size:12PX;
margin-top:-200px;
margin-left: 27%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:#6c6c64 ;
font-size: 15px;
text-align: center;
position: absolute;
margin-top: -130px;
margin-left: 2%;
line-height: 20PX;
color: black;}


h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 14s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}}

 h2{font-family:sans-serif;
    font-size: 24PX;
    font-weight: 700;
    margin-top: 30px;
  text-align: center; 
color: rgb(154, 120, 56);
 }
 
 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 20px;
color: gray;
margin-top: 30PX;}


.conteneur1{display: flex;
    flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 10%;
}

.titre{text-align: center;
  margin-top: 24PX;
  font-size: 24PX;
  color:#C9C094;
  font-weight: 600;
   font-family: cursive;
   font-style: normal;
  background-color:white;
  margin-left: 30%;
}

.siteauto{width: 320PX;
height: 200PX;
margin-left: 30PX;
margin-top: 60PX;}

p.titresite{text-align: center;
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -0%;
}

.sitetom{width: 320PX;
height: 200PX;
margin-left: 30PX;
margin-top: 60PX;}

p.titresitetomsouville{text-align: center;
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -0%;
}
footer{max-width: 100%;
height: 260px;
margin-top: 120PX;
background-color: #FFBE00;}

.logofooter{height: 128PX;
width: 90PX;
margin-left: 40%;
margin-top: 10px;}
h4{
  margin-left: 32%;
  position: absolute;
font-family:sans-serif;
font-size: 16PX;
font-weight: 600;
color:white;
margin-top: -30px;
text-align: center;
}

.pfooter{font-size: 20PX;
text-align: center;
font-weight: 400;
margin-top: 40px;
margin-left: 33%;
position: absolute;
color: black;}

 .mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 8%;
margin-top: 95PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 45%;
    margin-top: 70PX;
  }


}

 @media screen and (min-width: 651px) and (max-width: 1023px){
.navbar-nav > li > a
{font-size:18px;
   font-family:Mochiy,sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: 0%;
    color:rgb(154, 120, 56);}

    .navbar-toggler{color:#C9C094;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}
.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 10PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 66%;
}
.logo{margin-left: 36%;}

.entete{width: 100%;
height: 580PX;
background-color: #FFBE00;}
h1
{text-align: center;
    position: absolute;
    margin-top: -480px;
    margin-left: -140px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-left: 68PX;
margin-top: -320px;
font-size: 22PX;}



 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}
.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black ;
font-size: 28px;
text-align: center;
position: absolute;
margin-top: -220px;
margin-left: 2%;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: reveal 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 10s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}}

p.titresite{text-align: center;
  margin-top: 15PX;
  font-size: 18PX;
  color:black;
  font-weight: 600;
  font-family: sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -35%;
}

.titresitetomsouville{text-align: center;
  margin-top: 15PX;
  font-size: 18PX;
  color:black;
  font-weight: 600;
  font-family: sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -35%;}

footer{max-width: 100%;
height: 320px;
margin-top: 60PX;
background-color: #FFBE00;}
.logofooter{margin-left: 44%;}


h4{
  margin-left: 40%;
  position: absolute;
font-family:sans-serif;
font-size: 20PX;
font-weight: 800;
color:white;
margin-top: -50px;
}

.pfooter{font-size: 26PX;
text-align: center;
font-family:sans-serif;
margin-top: 40px;
margin-left: 42%;
position: absolute;
color: black;}

.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 30%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 58%;
    margin-top: 80PX;
  }
}


@media screen and (min-width: 1300px) {
html,body{margin: 0;
padding: 0;}




 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgb(154, 120, 56);}

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}



.entete{width: 100%;
height: 580PX;
background-color: #FFBE00;}


h1
{text-align: center;
    position: absolute;
    margin-top: -480px;
    margin-left: 100px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-top: -300px;
margin-left: 31%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 26px;
text-align: center;
position: absolute;
margin-top: -180px;
margin-left: 28%;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: reveal 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 14s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}

 
}




.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;}

 .siteauto{width: 320PX;
height: 250PX;
margin-left: 20%;
margin-top: 60PX;}

p.titresite{text-align: center;
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -45%;
}

.sitetom{width: 320PX;
height: 250PX;
margin-left: 20%;
margin-top: 60PX;}

p.titresitetomsouville{text-align: center;
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -44%;
}


footer{max-width: 100%;
height: 320px;
margin-top: 60PX;
background-color: #FFBE00;}

h4{
  margin-left: 44%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
margin-top: -60px;
}

.pfooter{font-size: 28PX;
text-align: center;
font-family:sans-serif;
margin-top: 30px;
margin-left: 45%;
position: absolute;
color: black;}
}

@media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {

     .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgba(138, 73, 4, 0.749);}

 .navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
} 

h1
{text-align: center;
    position: absolute;
    margin-top: -460px;
    margin-left: 20px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-top: -280PX;
margin-left: 28%;
font-size: 23PX;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 50px;
margin-left: 26%;
width: 800PX;
}

.slogan2 {font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 32px;
text-align: center;
position: absolute;
margin-top: -170px;
margin-left: 15%;}


.siteauto{width: 380PX;
height: 200PX;
margin-left: 10%;
margin-top: 60PX;}

p.titresite{
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -54%;
}

.sitetom{width: 380PX;
height: 200PX;
margin-left: 10%;
margin-top: 60PX;}

p.titresitetomsouville{
  margin-top: 6PX;
  font-size: 14PX;
  color: black;
  font-weight: 600;
  font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: -54%;
}

footer{max-width: 100%;
height: 320px;
margin-top: 60PX;
background-color: #FFBE00;}
h4{
  margin-left: 43%;
  position: absolute;
font-family:sans-serif;
font-size: 22PX;
font-weight: 800;
color:white;
margin-top: -48px;
}

.pfooter{font-size: 20PX;
text-align: center;
margin-top: 60px;
margin-left: 47%;
position: absolute;
color: black;
font-family: sans-serif;
}}