body { padding-top: 50px; }
.cadreCV { padding-bottom: 15px; background: white; }

/****************************************
*     Entête du CV
****************************************/
#cv-entete { margin-top: -45px; width: 100%;}

#cv-photo {
    width: 172px;
    height: 172px;
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;
    background: #eee;
    display: inline-block;
}
#cv-photo img { width: 160px; height: 160px; border-radius: 50%; }

#cv-intro h1 {
    margin: 0;
    padding: 0;
    font-size: 2.4em;
    font-weight: 700;
    letter-spacing: -1px;
}

#cv-intro h1 span { color: rgb(226,0,26); }

#cv-intro::after {
    background: url('images/ligne.png'); /* Dossier "images" est un
                                            sous-dossier de "css" (à créer) */
    width: 100%;
    height: 3px;
    margin-top: 15px;
    content: '';
    display: block;
}

/****************************************
*     Rubriques
****************************************/
.rubrique { margin-bottom: 15px; }
.rubrique h2 { color: rgb(226,0,26); }
.rubrique h2::before{ margin-right: 5px; }
.rubrique p{ font-size: 1.3em; line-height: 1.5em; }

/******************************************
*     Parcours scolaire
******************************************/
#parcours { margin-top: 20px; position: relative; padding: 1em 0; list-style: none; }
#parcours::before { width: 5px; height: 100%; position: absolute; left: 7.8px; top: 0; 
                    display: block; background: linear-gradient(to bottom, #ffffff 0%, 
                        #E2001A 7%, #E2001A, #ffffff 100%); content:""; }
#parcours li { width: 100%; z-index: 2; position: relative; float: left; }
#parcours .date .glyphicon-record::before { background: #FFFFFF; color: #555; }
#parcours .date { width: 75px; background-color: rgba(0, 0, 0, 0); font-size: 1.5em; 
                  font-weight: 700; display: inline-block; }
#parcours .details { width: 325px; display: inline-block; background: #eee;
                     position: relative; padding: 10px 10px 0 10px; 
                     border-bottom: 1px solid #ddd; margin: -4px -12px 20px 0; }
#parcours .details::after { content: ''; position: absolute; top: 15px; right: 0; 
                            left: -16px; height: 0; width: 0; border: solid transparent; 
                            border-right-color: #eee; border-width: 8px; 
                            pointer-events: none; }
#parcours .details h3{ font-size: 1.5em; margin: 0; padding: 0; font-weight: 700; }
#parcours .details p{ font-size: 1.3em; margin-top: 5px; padding: 0; }

/* Pour empècher la déformation du parcours scolaire selon la STA */
@media (min-width: 500px) { #parcours .date { width: 20%; }
                            #parcours .details { width: 80%; } 
}
@media (min-width: 768px) { #parcours .date { width: 25%; }
                            #parcours .details { width: 75%; }
}
@media (min-width: 992px) { #parcours .date { width: 17%; }
                            #parcours .details { width: 83%; }
}
@media (min-width: 1200px) { #parcours .date { width: 13%; }
                             #parcours .details { width: 87%; }
}

/******************************************
*     Expériences professionnelles
******************************************/
.experience { display:flex; margin-bottom: 15px; }
.experience .lieu { font-size: 1.1em; font-weight: bold; }
.experience .date { font-size: 1em; opacity: 0.7; }
.experience .profession { font-size: 1.45em; font-weight: bold; margin-top: -6px; }
.experience .details { font-size: 1.2em; line-height: 1.5em; }

/******************************************
*     Me contacter
******************************************/
.meContacter { clear: both; }
.meContacter .details { width: 100%; margin-left: 10px; margin-top: 3px;
                        font-size: 1.5em; font-weight: 700; justify-content: space-between; }
.contact-icon { filter: grayscale(1); -webkit-filter: grayscale(1);
                -moz-filter: grayscale(1); -ms-filter: grayscale(1);
                -o-filter: grayscale(1); height: 32px; width: 32px; 
                margin: 2px 0; }
.meContacter a, .meContacter a:hover { text-decoration: none; color: black; }
.meContacter a:hover>img { 
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
}
/******************************************
*     Compétences 
******************************************/
#competences .container { display: flex; flex-direction: row; justify-content: space-between; }
#competences .container .libelle { font-size: 1.3em; }
#competences .container .classement {
    background: scroll transparent url(images/Red-Rating-Stars.png) no-repeat;
    width: 160px; height: 27px; 
}
#competences .container .classement0 { background-position: 0 -142px; }
#competences .container .classement1 { background-position: 0 -112px; }
#competences .container .classement2 { background-position: 0 -84px; }
#competences .container .classement3 { background-position: 0 -56px; }
#competences .container .classement4 { background-position: 0 -28px; }
#competences .container .classement5 { background-position: 0 0px; }

/******************************************
*     Langues
******************************************/
#langues .container { display: flex; flex-direction: row; justify-content: space-between; }
#langues .langue { font-size: 1em; padding-top: 3px; width: min-content; display: flex; }
#langues .niveau { font-size: 1.2em; }

/******************************************
*     Passions
******************************************/
.passion{ color: #fff; display: inline-block; margin-right: 5px;
          margin-bottom: 5px; padding: 5px 5px 5px 5px; background: #000;
          position: relative; font-size: 1.2em; border-radius: 10px; }