/*STYLES GENERAUX*/
        *{
            font-family: Avenir, sans-serif;
            padding: 0px;
            margin: 0px;
            text-align: justify;
            box-sizing: border-box;
        }
        body{
            background: #ededed;
        }
        p{
            font-size: 1em;
            line-height: 1.5em;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /*HEADER & FOOTER*/
        header, footer{
            width: 100%;
            padding: 20px 0px;
            background: url("../img/background.png") #4f4f4f;
            box-shadow: 0px 0px 15px #333;
        }
        header{
            border-bottom: 2px solid #fff;
            height: 120px;
        }
        header h1{
            color: white;
            font-size: 1.5em;
            width: 90%;
            margin: 0 auto;
        }

        footer{
            border-top: 2px solid #fff;
        }
        footer p{
            width: 90%;
            margin: 0 auto;
            color: #fff;
            text-align: center;
        }
        footer a{
            color: #fff;
        }

        /*SECTIONS*/
        section{
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            width: 100%;
            padding-bottom: 20px;
            margin: 20px auto;
            box-shadow: 0px 0px 10px #bbb;
            background-color: #fff;
            border-radius: 15px;
            
        }

        section h2{
            margin: 20px 0;
            width: 90%;
        }
        section > div{
            width: 90%;
        }

        /*SECTION INFOS*/
        .photo{
            text-align: center;
        }
        .photo img{
            width: 150px;
            height: 150px;
            border: 3px solid #fff;
            box-shadow: 0px 0px 10px #777;
            border-radius: 50%;
            margin-top: -80px;
        }
        .pres{
            border-bottom: 2px dashed #ccc;
        }
        .pres a{
            display: block;
            text-align: center;
            padding: 10px;
            margin: 10px auto 30px auto;
            color: #fff;
            background-color: #EA0;
            box-shadow: 0px 0px 10px #ccc;
            border-radius: 5px;
        }
        .contact-flex{
            display: flex;
            flex-flow: row wrap;
            align-items: center;
        }
        .contact-flex p:first-child{
            flex: 0 0 40%;
        }
        .contact-flex p:last-child{
            flex: 0 0 60%;
        }
        .social{
            display: flex;
            justify-content: space-around;
            margin: 10px auto 0px auto;
        }
        .social img{
            width: 40px;
            height: 40px;
        }

        /*SECTION EXP*/
        .exp{
            display: flex;
            flex-flow: row wrap;
            border-bottom: 1px solid #bbb;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .exp-info{
            display: flex;
            flex-flow: column wrap;
        }
        .exp-logo{
            flex: 0 0 25%;
            max-width: 100px;
        }
        .exp-info{
            flex: 0 0 70%;
            margin-left: auto;
        }
        .exp img{
            width: 100%;
        }
        .exp h3{
            font-size:  1.2em;
        }
        .exp h4{
            font-size:  1em;
            font-weight: normal;
        }
/*SECTION PROJETS*/
        .proj{
            display: flex;
            flex-flow: row wrap;
            border-bottom: 1px solid #bbb;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .proj-info{
            display: flex;
            flex-flow: column wrap;
        }
        .proj-logo{
            flex: 0 0 25%;
            max-width: 100px;
        }
        .proj-info{
            flex: 0 0 70%;
            margin-left: auto;
        }
        .proj img{
            width: 100%;
        }
        .proj h3{
            font-size:  1.2em;
        }
        .proj h4{
            font-size:  1em;
            font-weight: normal;
        }
        /*SECTION FORMATION*/
        .form{
            display: flex;
            flex-flow: row wrap;
            border-bottom: 1px solid #bbb;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .form-info{
            display: flex;
            flex-flow: column wrap;
        }
        .form-logo{
            flex: 0 0 25%;
            max-width: 100px;
        }
        .form-info{
            flex: 0 0 70%;
            margin-left: auto;
        }
        .form img{
            width: 100%;
        }
        .form h3{
            font-size:  1.2em;
        }
        .form h4{
            font-size:  1em;
            font-weight: normal;
        }
        /*SECTION COMPETENCES*/
        .h3gauche{
            width: 90%;
        }
        .comp{
            display:flex;
            flex-flow: row wrap;
            margin-bottom: 10px;
        }
        .comp p{
            flex: 0 0 40%;
        }
        .conteneur-barre{
            flex: 0 0 60%;
            border-radius: 5px;
            background-color: #D0D0BB;
            border-bottom: 1px #D0D0BB;
        }
        .barre{
            display: block;
            border-radius: 5px;
            height: 100%;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .comp2{
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        .conteneur-barre2{
            flex: 0 0 100%;
            height: 0.5em;
            margin-bottom: 0.25em;
            border-radius: 5px;
            background-color: grey;
        }

        /*SECTION INTERETS*/
        .interet{
            flex: 0 1 50%;
            display: flex;
            flex-flow: column wrap;
            align-items: center;
            margin-bottom: 20px;
        }
        .interet img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 0px 0px 15px #555;
        }

        /*VERSION BUREAU DU CV*/
        @media screen and (min-width: 980px){
            section{
                width: 80%;
                box-shadow: 0px 0px 10px #bbb;
            }
            a:hover{
                color: #EA0;
            }
            header h1{
                width: 80%;
            }
            .pres, .contact{
                flex: 0 0 45%;
            }
            .pres{
                border-bottom: none;
                border-right: 2px solid #ccc;
                padding-right: 20px;
                margin-left: auto;
            }
            .contact{
                padding-left: 20px;
                margin-right: auto;
            }
            .pres a{
                border: 2px solid transparent;
            }
            .pres a:hover{
                color: #f28835;
                background-color: #fff;
                border: 2px solid #f28835;
                box-shadow: 0px 0px 20px #666;
            }
            .exp-logo{
                flex: 0 0 10%;
            }
            .exp-info, .exp-desc{
                flex: 0 0 85%;
                margin-left: auto;
            }
            .proj-logo{
                flex: 0 0 10%;
            }
            .proj-info, .proj-desc{
                flex: 0 0 85%;
                margin-left: auto;
            }
            .form-logo{
                flex: 0 0 10%;
            }
            .form-info, .form-desc{
                flex: 0 0 85%;
                margin-left: auto;
            }
            .interet{
                flex: 0 1 25%;
            }
        }
        
.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}
.badge-sas {
  color: #fff;
  background-color: #3739c4;
}
.badge-python {
  color: #fff;
  background-color: #992feb;
}
.badge-r {
  color: #fff;
  background-color: #6398d2;
}
.badge-latex {
  color: #fff;
  background-color: #17a2b8;
}
.badge-sql {
  color: #fff;
  background-color: #1857ab;
}
.badge-nosql {
  color: #fff;
  background-color: #e7a854;
}
.badge-qgis {
  color: #fff;
  background-color: #1f9d16;
}