:root{
    --color1:rgb(100, 155, 237);
    --color2: antiquewhite;
    --color3:#f4f4f4;
    --color4:#000000;
    --color5:#f5f4f2;




}



body{
    min-width: 255px;
    /*margin: 0;*/
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1280px;
   
    min-height: 500PX;
    background-color: var(--color5);

    
    
    margin-left: auto;
    margin-right: auto;
            
}


div.barrenavigation{

    align-content: center;
    margin-left: 50px;
  
    margin-right: auto;
    text-align: left;
    margin-top: 50px;
    max-width: 1280px;
    min-width: 500px;

}

a.bouton {
    padding: 8px 8px; 
    border:3px solid  var(--color5);
    border-radius: 10px;
     color:  var(--color4);
     text-decoration: none;
     background-color: var(--color5) ;
     display:inline-block;
     margin-top: 15px;
     font-size: 14px;

}


div.section{
    background-color: #f8f8f8;
    max-width: 100%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px  ;
   /* box-shadow: 1px 1px 8px 1px #888888;*/

}

div.section2 {
    background-color: var(--color5);
    max-width: 100%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-left:10px;
    padding-right: 0px  ;
}

table.table{

    align-content: center;
}

div.ligne-separation{
    width: 100%;
    background-color: black;
    height: 01px;
    display:inline-block;
    /*position: absolute;*/
    
    
}
.contact{
    color: var(--color4);

} 
img.logo{
    padding-top: opx;
    margin-top: 0px;
    
} 

h2 {
    color: rgb(170, 152, 136);
    font-size:25px; 
}

h4{
    color: rgb(170, 152, 136);
}
 .col40{
    width: 40%;
    height: 40%;
 }  

 .col60{
    height: 60%;
    width: 60%;
 }
 a.bouton{
    color: rgb(170, 152, 136);
    font-weight: bolder;
 }
   
a.bouton:hover {
       color: var(--color2);
       border:3px solid #00000000;
       background-color:#00000040 ;

   }

div.texte-avec-ligne-verticale {
    border-left: 4px solid var(--color4);
    padding-left: 8px;
    height: 50px;
    display: inline-block;
}
div.texte-avec-ligne-verticale-longue {
    border-left: 4px solid var(--color4);
    padding-left: 8px;
    height: 100%;
    display: inline-block;
}

div.texte-avec-ligne-verticale-longue-droite {
    border-right: 4px solid var(--color4);
    padding-right: 8px;
    height: 100%;
    display: inline-block;
}
   /*iframe*/
iframe{

    width:100%;
    border: none;
    height: 350Px;
    
   

}
div.frame{
    margin: 30px 50px;
    padding: 20px 30px;
    background-color: var(--color5);
   /* box-shadow: 1px 1px 8px 1px #888888;*/
    font-size: 14px;
    
   
}    



.contactez-nous{

background-color: var(--color5);



}
/* baare de navigue stangart*/

.topnav {
    overflow: hidden;
    background-color: (var(--color5));
    
  
          
  }
  
  .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
  padding: 14px 16px;
 
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: (var(--color5));
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }