body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container{
    width: 980px;
}
header{
    width: 100%;
    min-height: 16vh;
    display: flex;
    flex-wrap: wrap;
}
main{
    width: 100%;
    min-height:130vh;
    display: flex;
    flex-wrap: wrap;
}
footer{
    width: 100%;
    min-height:20vh;
    background-color: lightgray;
    display: flex;
    flex-wrap: wrap;
}
/***********fin structure de base ***************/
.logo{
   width: 20%;
   min-height: 16vh;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.menu_complet{
    width: 80%;
    min-height: 16vh;
}
.recherche{
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}
.menu_recrutement{
    width: 20%;
    min-height: 4.5vh;
    background-color: lightgrey;
    border-radius: 1vh;
    margin-bottom: 1.7vh;
    margin-left: 1vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9vw;
    font-family: 'Dosis', verdana, arial, sans-serif;
}
.menu_recrutement a {
    text-decoration: none;
    margin-left: 0.7vh;
    color: black;
    font-size: 1vw;
    font-family: 'Dosis', verdana, arial, sans-serif;
}
.menu_recrutement a:hover{
    color: #DF3F3F;
    font-size: 1.2vw;
    font-family: 'Dosis', verdana, arial, sans-serif;
}
.barre_recherche{
    margin-bottom: 1vh;
}
input{border-radius: 1vh;}
nav{
    width: 100%;
    min-height: 6vh;
    background: white url(images/bg-nav.jpg) top left no-repeat;  
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
nav ul li a{
    text-decoration: none;
    margin-left: 0.7vh;
    color: black;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.8vw;
}
nav ul li a:hover{
    color: #DF3F3F;
    font-size: 0.9vw;
    font-family: 'Dosis', verdana, arial, sans-serif;
}
.menu_logitheque{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.menu_pratique{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.menu_fondecran{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.menu_contact{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.menu_trucs{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.selection_menu{
    color:#DF3F3F;
    font-weight: bold;
}
/**************** Fin haut de page ***********************/
/******---**** Début corps de page -  colonne de gauche----*/
.colonne1{
    width: 20%;
    min-height: 130vh;
}
.colonne1 ul{
    list-style: none;
    text-decoration: none;
    margin-bottom: 1vh;
}
.colonne1 ul li a{
    text-decoration: none;
    font-size: 1.1vw;
    color: black;
    font-family:'Dosis', verdana, arial, sans-serif;
}
.colonne1 ul li a:hover{
    text-decoration: none;
    font-size: 1.5vw;
    color: #DF3F3F;
    font-family:'Dosis', verdana, arial, sans-serif;
    
}
.pub_colonne{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    min-height: 60vh;
    width: 100%;
}
/**************** Colonne centrale ********************/
.colonne2{
    width: 55%;
    min-height: 130vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.pub_bandeau{
    width: 100%;
    height: 14vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.colonne2 p{
    font-family:'Dosis', verdana, arial, sans-serif;
}
.colonne2 h1{
    margin-left: 1vh;
    font-family: 'Viga', verdana, arial, sans-serif;
    margin-top: 7vh;
}
.news{margin-top: 3vh;}
.publier{ margin-top: 8vh;}

/************************Colonne de droite **********************/
.colonne3{
    width: 25%;
    min-height: 130vh;display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.colonne3 h3{
    font-family:'Dosis', verdana, arial, sans-serif;
    margin: 0;
    list-style: square;
    
}
.colonne3 h4{
    font-family:'Dosis', verdana, arial, sans-serif;
}
.colonne3 h3 a{
    text-decoration: none;
    color: #DF3F3F;
}
.colonne3 h3 a:hover{
    text-decoration: underline;
    font-size: 1.5vw;
    color: black;
}
.dossiers{ 
    min-height: 43vh;
    width: 100%;
    margin-left: 2.5vh;
    border: 1px solid #ffcccc;
    border-radius: 1vh;
    margin-bottom: 4vh;
    padding: 2vh;
}
.module3{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    height: 10vh;
     margin-left: 2vh;
}
.module3_photo{
    width:40%;
    min-height: 10vh;
    margin-top: -1.1vh; 
}
.module3_texte{
    width: 60%;
    min-height: 22vh;
    font-size: 0.8vw;
    font-family:'Dosis', verdana, arial, sans-serif;
    text-align: justify;
    margin-top: 3vh;
}
.module3_photo img{
    width: 100%;
    min-height: 10vh;
}
.module3_texte p{
    margin-left: 1.5vh;
    margin-top: -2vh;
    line-height: 2vh;
    font-size: 0.8vw;
    font-family:'Dosis', verdana, arial, sans-serif;
}
.source{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-right: 1.5vh;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: center;
            
}
.source a {
    color: black;
    text-decoration: none;
    font-family:'Dosis', verdana, arial, sans-serif;
    width: 45%;
    border: 1px solid #ffcccc;
    border-radius: 1vh;
}
.source a:hover{
    color:#DF3F3F;
    font-size: 1vw;
    font-family:'Dosis', verdana, arial, sans-serif;
}
/**************** Fin corps de page *******************/
.block1{
    width:20%;
    min-height: 20vh;
    background-color: #636262;
    color: white; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;  
}
.block2{
    width: 55%;
    min-height: 20vh;
    background-color: #636262;
    display: flex;
    flex-wrap: wrap;
}
.plan_site{
    width: 50%;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.8vw;
}
.block2 ul{
    list-style: none;
}
.block2 ul li{
    line-height: 3vh;
    color: white;        
}
.block2 ul li a{
    text-decoration: none;
    color: white;
}
.block2 ul li a:hover{
    text-decoration: underline;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.9vw;
}
.plan_site2{
    width: 50%;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.8vw;
}
.block3{
    width: 25%;
    min-height: 20vh;
    background-color: #636262;
}
.plan_site3{width: 100%;}
.block3 ul{list-style: none;}
.block3 ul li{
    line-height: 3vh;        
}
.block3 ul li a{
    text-decoration: none;
    color: white;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.8vw;
}
.block3 ul li a:hover{
    text-decoration: underline;
    font-family:'Dosis', verdana, arial, sans-serif;
    font-size: 0.9vw;
}

/********************** Style formulaire ********************/
.form1{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-width: 30%; 
    font-family:'Dosis', verdana, arial, sans-serif;
    margin-top: 5vh;

}
fieldset{
    border:1px solid #DF3F3F;
   
}
legend{ font-family:'Dosis', verdana, arial, sans-serif;}
.titre_contact{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color:#DF3F3F;
    font-weight:bold;
}

.champ1{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 7vh;
    margin-top: 2vh;
    
}
.champ2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 7vh;
    margin-top: 2vh;
   
}
.champ3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 7vh;
    margin-top: 2vh;
}
.champ4{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 7vh;
    margin-top: 2vh;
    
}
.validation{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

input[type=submit]{
    width:10vh;
 margin-left:0.5vh;
 box-shadow:0.1vh 0.1vh 0.1vh #D83F3D;
 cursor:pointer;
}
input, textarea, select {
    
    border:0.2vh solid #F5C5C5;
    border-radius:0.5vh;
    width:20vh;
    box-shadow:0.1vh 0.1vh 0.2vh #C0C0C0 inset;
    }
.red { border: 0.1vh solid #D83F3D; }
.green { border: 0.1vh solid green; }


/*  *************************************************************************** responsive design */
@media screen and (max-width: 1050px)
{
.container{width: 90%;} 
.menu_recrutement a {font-size: 2vw;}
nav ul li a{ font-size: 1.5vw;  }
nav ul { background-color: white;}
.source{ font-size: 2vw;}
.momo_texte a{font-size: 2vw;}
.colonne1 ul li a { font-size: 2vw;}
.momo_texte a{
    font-size: 3vw;
    min-width: 5vh;
}
.dossiers, .tutos { width: 100%;}
.dossiers h3, .tutos h3{ font-size: 3.2vw;}
.dossiers h4, .dossiers h4{ font-size: 2.5vw;}
.module3_photo{ display: none;}
.module3_texte{ width: 100%;}
.module3_texte p{ 
    font-size:2vw;
    line-height:3.2vh; }
.block2 ul li a, .block2 ul li, .block3 ul li a{font-size: 1.5vw;}
.block2 ul li a:hover, .block2 ul li, .block3 ul li a:hover{font-size: 1.5vw;}
.dossiers p{font-size:2;}
.source{margin-top: 3vh;}
.source a{font-size: 1.5vw;}
} /* **************************************************************************fin screen 1050px   */
@media screen and (max-width:950px)
{
.container{width: 95%;} 
.colonne1{width: 14%;}
.colonne2{width:59%;}
.colonne3{width: 24%;}


}/*fin screen 950px*/
/**********************************************************************début média 890px    */
@media screen and (max-width: 890px)
{
.container{width: 98%;}  
header{width: 100%;}
.logo{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 20vh;
}
.logo img{width: 100%;}
.menu_complet{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
}
.recherche{width: 100%;}
.menu_recrutement{width: 100%;}
.menu_recrutement a {
    font-size: 4.5vw;
    width: 100%;
    text-align: center;
}
nav ul{
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
nav ul li {
    width: 100%;
    min-height:8vh;
    border: 1px solid #000;
}
nav ul li a {font-size: 4.5vw;}
nav ul li a:hover{font-size: 4.5vw;}
nav ul li img {margin-right: 5vh;}
.colonne1{display: none;}
.colonne3{display: none;}
.colonne2{width: 100%;}
.pub_bandeau{
    width: 100%;
    display: flex; 
    flex-wrap: wrap;
}
.pub_bandeau a{text-align: center;}
.pub_bandeau img{width: 80%;}
.colonne2 p{
    margin-left: 5vh;
    margin-right: 2vh;
}
footer{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.block1{
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
}
.block2{width: 100%;}
.block2 ul li a, .block2 ul li{font-size: 2vw;}
.block2 ul li a:hover{font-size: 2vw;}
.block3{width: 100%;}
.block3 ul li a{font-size: 2vw;}
.block3 ul li a:hover{font-size: 2vw;}
}/* fin média 890px*/