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;
}
.pub_bandeau{
    width: 100%;
    min-height: 14vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.colonne2 h1 {
    font-family: 'Viga', verdana, arial, sans-serif;
    margin-left: 1vh;
    margin-top: 8vh;
}   
.mosaique{
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     min-height: 50vh;
     margin-top: 5vh;
     border: 1px solid #ffcccc;
     border-radius: 1vh;
}
.ligne{
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: space-around;
     width: 100%;
     min-height: 14vh;
     margin-bottom: 4vh;
     margin-top: 2vh;
 }   
.vignette1{
    width:25%;
    min-height:12vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vi-image{
    width: 100%;
    min-height: 10vh;
}
.vi-lien{
    width: 100%;
    min-height: 2vh;
}
.vignette1 a{
    text-decoration: none;
    font-family:'Dosis', verdana, arial, sans-serif;
    color: black;
    font-size: 1vw;
}
.vignette1 a:hover{font-weight: bold;}
.vignette2 a{
    text-decoration: none;
    font-family:'Dosis', verdana, arial, sans-serif;
    color: black;
    font-size: 1vw;
}
.vignette2 a:hover{font-weight: bold;}
.vignette3 a{
    text-decoration: none;
    font-family:'Dosis', verdana, arial, sans-serif;
    color: black;
    font-size: 1vw;
}
.vignette3 a:hover{
    font-weight: bold;
}
.vignette2{
    width:25%;
    min-height:12vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vignette3{
    width:25%;
    min-height:12vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tele{
    font-family:'Dosis', verdana, arial, sans-serif;
    margin-left: 2vh;
    font-size: 1vw;
}
    
/************************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;
}
/*  *************************************************************************** responsive design */
@media screen and (max-width: 1050px)
{
.container{width: 90%;} 
.menu_recrutement a {font-size: 2vw;}
.menu_recrutement a:hover {font-size: 2vw;}
nav ul li a{ font-size: 2vw;}
nav ul li a:hover{ font-size: 2vw;}
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; }
.savoirplus a{font-size: 2vw;}
.savoirplus a{font-size: 2vw;}
.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:2vw;}
.dossiers a{font-size: 1.5vw;}
.dossiers a:hover{font-size: 1.5vw;}
.source{margin-top: 3vh;}
.source a{font-size: 1.5vw;}
.source a:hover{font-size: 1.5vw;}
.vi-lien a {font-size: 1.5vw;}
.vi-lien a:hover {font-size: 1.5vw;}
.tele{font-size: 2vw;}
} 
/* **************************************************************************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%;}
.ligne{ 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tele{font-size: 4vw;}
.vi-lien{margin-bottom: 2vh;}
.vi-lien a {font-size: 4vw;}
.pub_bandeau{
    width: 100%;
    display: flex; 
    flex-wrap: wrap;
}
.pub_bandeau a{text-align: center;}
.pub_bandeau img{width: 80%;}
.module_article{width: 100%;}
.main_article img {width: 100%;}
.module_article_photo{ display: none;}
.module_article_texte{width: 100%;}
.boutton{display: none;}
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: 3vw;}
.block2 ul li a:hover{font-size: 3vw;}
.block3{width: 100%;}
.block3 ul li a{font-size: 3vw;}
.block3 ul li a:hover{font-size: 3vw;}
}/* fin média 890px*/