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;
}

        /**************** 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;
}
.module-ligne-texte p{
    font-family:'Dosis', verdana, arial, sans-serif;
    margin-left: 2vh;
    text-align: justify;
    margin-right: 1vh; 
}
.ligne2-index{
    width: 100%;
    min-height: 25vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 4vh;
    border: 1px solid #ffcccc;
    border-radius: 1vh;
}
.ligne2-index h2{
    font-family:'Dosis', verdana, arial, sans-serif;
    color: #DF3F3F;
    text-indent: 7vh;
}
.titre-ligne{
    width: 100%;
    min-height: 5vh;

}
.module-ligne{
    width: 100%;
    min-height:17vh;
    display: flex;
    flex-wrap: wrap;

}
.module-ligne-img{
    width: 40%;
    min-height: 17vh;
    margin-left: 1vh;
}
.module-ligne-img img{
    width: 100%;
    min-height: 17vh;
}
.module-ligne-texte{
    width: 55%;
    min-height: 15vh;
}
.plus-ligne{
    width: 100%;
    min-height: 3vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    
}
.plus-ligne a{
    font-family:'Dosis', verdana, arial, sans-serif;
    text-decoration: none;
    color: black;
    font-size:1vw;
    width: 20vh;
    border: 1px solid #ffcccc;
    text-indent: 5vh;
    border-radius: 1vh;
    margin-bottom: 2vh;
    margin-right: 2vh;
}
.plus-ligne a:hover{
    color:#DF3F3F;
    font-size: 1.2vw;
}
.ligne-actu{
    width: 100%;
    min-height: 40vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 3vh;
    margin-bottom: 2vh;
}
.gras{
    font-weight: bold;
}
.module-actu{
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2vh;
    margin-bottom: 2vh;
    border: 1px solid #ffcccc;
    border-radius: 1vh;
}
.actu-img{
    width: 25%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}
.actu-img img{
    width: 100%;
    min-height: 10vh;
    margin-left: 1vh;
}
.actu-texte{
    width: 75%;
    min-height:10vh;

}
.actu-texte p{
    font-family:'Dosis', verdana, arial, sans-serif;
    margin-left:2vh;
}
 /************************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: 95%;} 
.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: 3vw;}
.momo_texte a{font-size: 3vw;}
.colonne1 ul li a{ font-size: 3vw;}
.ligne2-index{margin-top: 6vh;}
.ligne2-index a{font-size: 2vw;}
.momo_texte a{
    font-size: 3vw;
    min-width: 5vh;
}
.plus-ligne a{width: 40%;}
.dossiers{ width: 100%;}
.dossiers h3{ font-size: 3.2vw;}
.dossiers h4{ font-size: 2.5vw;}
.module3_photo{ display: none;}
.module3_texte{ width: 100%;}
.module3_texte p{ 
    font-size:1.5vw;
    line-height: 3vh;
}
.source a {width: 80%;}
.source 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;}
.pub_bandeau{display:none;}
.dossiers p{font-size:2;}
.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*/

@media screen and (max-width: 800px)
{
.container{width: 95%;} 
header{width: 100%;}
.logo{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 10vh;
}
.logo img{
    width: 100%;
    min-height: 10vh;
}
.menu_complet{width: 100%;}
nav ul {background-color: white;}
nav ul li a {font-size: 3vw;}
nav ul li a:hover{font-size: 3vw;}
.menu_recrutement a {font-size: 3vw;}
.barre_recherche input{min-height: 2vh;}
.colonne1 {display: none;}
.colonne2{
    width: 70%;
    min-height: 50vh;
}
.momo_texte a{
    font-size: 3vw;
    min-width: 5vh;
}
.colonne3{
    width: 30%;
    min-height: 50vh;
}
.colonne3 p{ font-size: 2.3vw;}
.tutos{margin-top: -10vh;}
/*.source{margin-top: 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: 3vw;}
.block3{width: 100%;}
.block3 ul li a{font-size: 3vw;}

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