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%;
    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: 10vh;
}
.boite_momo{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.momo{
    width: 45%;
    min-height: 15vh;
    display: flex;
    flex-wrap: wrap;
    margin-top:2vh;
    border: 1px solid #ffcccc;
    border-radius: 1vh;
    margin-bottom: 2vh;
}
.momo_photo{
    width: 100%;
    min-height: 15vh;
}
.momo_texte{
    width: 100%;
    min-height: 15vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;    
}
.momo_texte h2{
    margin-bottom: -2.7vh;
    margin-left: 1vh;
}
.savoirplus{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.momo_texte h2, .momo_texte p{ font-family:'Dosis', verdana, arial, sans-serif;}
.momo_texte p{
    text-align: justify;
    margin-right: 1vh;
    margin-left: 2vh;
    text-indent: 4vh;
    font-size: 1.2vw;
}
.momo_texte a {
    font-family:'Dosis', verdana, arial, sans-serif;
    color: black;
    text-decoration: none;
    font-size: 1vw;
    width: 20vh;
    min-height: 2vh;
    background-color:#ffcccc;
    text-align: center;
    border-radius: 0.5vh;
}
.momo_texte a:hover {
    font-family:'Dosis', verdana, arial, sans-serif;
    color: black;
    font-size: 1.1vw;
    min-height: 4vh;
    min-width: 22vh;
}
.momo_photo img{
    width: 100%;
    min-height: 15vh;
}
 /************************Colonne de droite **********************/
 .colonne3{
    width: 25%;
    min-height: 130vh;display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.pb{width:10%;}
.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;}
} /* **************************************************************************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: 3vw;}
nav ul li a:hover{font-size: 3vw;}
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%;}
.ligne_momo{flex-direction: column;}
.plus-ligne a{font-size: 5vw;}
.momo_texte a {
    font-size: 5vw;
    min-height: 4vh;
    min-width: 5vh;
}
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 500px*/