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.1vw;
    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%;
    height: 14vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}       
.colonne2 h1{ 
    margin-left: 1vh;
    font-family: 'Viga', verdana, arial, sans-serif;
    margin-top: 8vh;
}
.contenair-onglet{
    width: 100%;
    min-height: 50vh;           
}
.contenair-onglet ul, li { 
    display: flex;
    flex-wrap:wrap; 
    list-style: none; 
    margin: 0;
}
.contenair-onglet ul li a { 
    color: black; 
    text-decoration: none;
    text-align: center;
    font-family:'Dosis', verdana, arial, sans-serif;
    width: 100%;   
}
#contenu1{ 
    border: 1px solid #DF3F3F;
    border-radius:0.5vh;
        }
#contenu2{ 
    border: 1px solid #f17070;
    border-radius:0.5vh;
}
#contenu3{ 
    border: 1px solid #f5a5a5;
    border-radius:0.5vh;
} 
#onglet3{
    background-color: #f5a5a5;
    border-radius: 0.5vh 0.5vh 0vh 0vh;
    height: 3.5vh;
    width: 10vh;
    text-align: center;
    margin-top:1vh;
}
#onglet1{
    background-color: #DF3F3F;
    border-radius: 0.5vh 0.5vh 0vh 0vh;
    height: 3.5vh;
    width: 10vh;
    text-align: center;
    margin-top:1vh;
}
#onglet2{
    border-radius: 0.5vh 0.5vh 0vh 0vh;
    height: 3.5vh;
    width: 13vh;
    text-align: center;
    margin-top:1vh;
    background: #f17070;
}
#onglet3{
    border-radius: 0.5vh 0.5vh 0vh 0vh;
    height: 3.5vh;
    width: 10vh;
    text-align: center;
    margin-top:1vh;
}
#contenu2 { display: none; }
#contenu3 { display: none;}
.mo-onglet{
    width: 100%;
    min-height: 10vh;
    margin-top: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 
.mo-onglet p{font-family:'Dosis', verdana, arial, sans-serif;}
.mo-onglet-photo{
    width: 15%;
    min-height: 10vh;
}
.mo-onglet-photo img{
    width: 100%;
    height:10vh;
}
.mo-onglet-texte{
    width: 80%;
    min-height: 10vh;
}
.mo-detail{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items:center;
    width: 100%;
    height: 2.6vh;
}
.mo-detail a{
    text-decoration: none;
    color: black;
    width: 35%;
    height: 2.6vh;
    background-color: #ffcccc;
    border-radius: 1vh;
    text-align: center; 
    font-family:'Dosis', verdana, arial, sans-serif;  
}
.mo-detail a:hover{
    font-weight: bold;
    background-color: grey; 
}
        /************************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: 4.5vw;}
nav ul li a:hover{ font-size: 4.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; }
.savoirplus a{font-size: 2vw;}
.savoirplus a{font-size: 2vw;}
.mo-detail a{ font-size: 1vw;}
.mo-detail a:hover{font-size: 1vw;}
.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;}
} 

 /* **************************************************************************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%;}
.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*/