/* 
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 19 févr. 2021, 10:35:26
    Author     : valentine.schalckens
*/
.bg-custom 
{
    background-color: lightpink!important;
}
.jumbotron 
{
    background-color: transparent;
}
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    padding-top: 50px;
    background: url("images/sky-411136.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
}
.cadreCV 
{
    padding-bottom: 15px;
    background: white;
}
.btn-secondary {
    color: black;
    background-color: lightpink;
    border-color: #6c757d;
}

/****************************************************************
                    En-tête du CV
*****************************************************************/

#cv-entete
{
    margin-top : -45px;
    width  : 100%;
}
#cv-photo
{
    width : 172px;
    height : 172px;
    border-radius : 50%;
    overflow : hidden;
    padding : 5px;
    background : lightskyblue;
    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;
    color : linear-gradient(90deg, rgba(2,0,36,1) 0%, lightblue 0%, lightblue 93%);
}
#cv-intro h1 span 
{
    background-image: gray;  
    -webkit-background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text; 
    background-clip: text;
    color: transparent;

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

/*************************************************
                Rubriques
**************************************************/

.rubrique 
{
    margin-bottom : 15px;
}
.rubrique h2 
{   
    -webkit-background-clip: text;
    -moz-background-clip: text; 
    background-clip: text;
    color: lightskyblue;
      
}
.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 : 2em 0;
    list-style : none;
}
#parcours::before 
{
    width : 5px;
    height : 100%;
    position : absolute;
    left : 7.8px;
    top : 0;
    display : block;
    background : linear-gradient(90deg, rgba(2,0,36,1) 0%, lightblue 0%, lightblue 93%);;
    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 : linear-gradient(90deg, whitesmoke 0%, whitesmoke 0%, lightblue 60%);;
    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;
}
/* Pour empêcher la déformation du parcours scolaire selon la STA*/

@media(min-width: 500px)
{
    #experience .lieu {width:10% }
    #experience .date {width:20%}
    #experience .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%}
}
/*************************************************
                 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 : gayscale(0);
    -ms-filter : grayscale(0);
    -o-filter : grayscale(0);
}
.meContacter a, .meContacter a:hover {}
.meContacter a:hover>img {}

/**************************************************
                  Langues
**************************************************/

#langues .container 
{
    display : flex;
    flex-direction : row;
    justify-content : space-between;
}
#langues .langue, #langues .niveau 
{
    font-size : 1.3em;
}
#langues .langue 
{
    padding-top : 3px;
}
.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);
}

.badge-success 
{
    background-color:lightblue!important;
}

/*************************************************
                 Compétences
**************************************************/

#competences .container 
{
    display : flex;
    flex-direction : row;
    justify-content : space-between;
}
#competences .container .libelle 
{
    font-size : 1.3em;
    font-weight : 700;
}
#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;
}
#competence .container .classement5 
{
    background-position : 0 0px;
}

/*************************************************
                 Passions
**************************************************/

#passions .container p
{
    margin-top: 5px;
}