/*** V1.0 ***/
.support{
	display : none;
}

html{
	height:100%;
    color : white;
    background-color: #303133;
}

body{
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-x : hidden;
	height:100%;
}

.header, .navigation, .footer{
    background-color : #303133;

    width: 100%;

    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

/*Mots clés*/
.partieFormation .keyword{
    list-style: none;
    cursor: default;
    margin-left: -40px;
}

/* Anchors */
a.anchorResume {
    top: -242px;
}

a.anchor{
    display: block;
    position: relative;
    visibility: hidden;
    top: -150px;
}

/* HEADER */
.header{
    height: 100px;
    display: grid;

    font-weight: bold;
    font-size: 1.5em;
    position: fixed;
    top : 0;
    z-index : 3;
    
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "coord titre droite";

    transition: 0.25s;
}

.coordonnees{
    grid-area : coord;
    font-size: 0.7em;
    margin-left : 5px;
    margin-left : 10px;
    margin-top : 10px;
}

.titre{
    grid-area : titre;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.titre .titre-nom{
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: underline;
}

.titre .titre-metier{
    font-size: 1.2em;
}

.titre .sous-titre{
    font-size: 0.9em;
}

.CV_PDF{
    color : #a5c7f1;
    font-size: 0.7em;
    text-decoration: none;
}

.CV_PDF:hover{
    text-decoration: underline;
}

.partDroite{
    grid-area : droite;
    align-self: start;
    justify-self: end;
    margin : 5px 5px 0 0;
}

/* NAVIGATION */
.navigation{
    box-shadow: 0px 5px 10px rgb(0 0 0 / 50%);

    height: 40px;
    position: fixed;
    top : 100px;
    z-index : 3;

    border-top : 2px solid #636363;

    transition: 0.25s;
}

.navigation .menuNav{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height : 100%;
}

.navigation  .menuNav div{
    margin : 0 10px 0 10px;
    padding : 0 2px 0 2px;
    text-align: center;
    height : 100%;
}

.navigation  .menuNav a{
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: block;
    width:100%;
    height: 100%;
    line-height: 40px;
    padding : 0 5px 0 5px;
    transition: 0.25s;
}

.navigation  .menuNav a:hover:not(.linkedin_link){
    background-color : white;
    color :#56585f;
}

.linkedin_link{
    margin-top : 5px;
    float : left;
}

/* MAIN */
.main{
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    margin-top : 142px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    z-index : 1;
    
    background: linear-gradient(to right bottom, #6d6d6d, #565961, #313338, #1a1c1f, #050606);
    background-attachment: scroll;
}

.main div:last-child{
    margin-bottom: 20px;
}

.titreMenu{
    color : white;
    text-align: center;

    background-color: rgba(50, 50, 50, 0.5);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
    margin-top : 10px;
    height: 80px;
}

/* Résumé */
.partieResume .titrePart{
    display: grid;
    margin : auto 20px auto 20px;
    grid-template-columns: 230px 1fr 10%;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "photo resume a";
}

.partieResume .listeCoordonnees{
    list-style: none;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: -20px;;
}

.parenthesesTitres{
    font-size: 0.8em;
    color :rgba(250, 250, 250, 0.5);
    font-weight: normal;
}

.photo{
    grid-area: photo;
    align-self: center;
}

.resume{
    grid-area: resume;
    text-align: justify;
}

/* Compétences */
.partieCompetences{
    display: grid;
    grid-template-columns: 20% 1fr 1fr 20%;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
    "a concepts langues b"
    "c langages perso d";
    grid-gap: 20px;

    padding : 0px 10px 0px 10px;
}

.partieCompetences h2{
    color : white;
    text-decoration: underline;
}

.partieCompetences ul{
    cursor: default;
    margin-left: -30px;
}

.partieCompetences ul li, .partieFormation .keyword li{
    display: inline-block;
    border : 1px solid white;
    padding : 8px;
    border-radius: 5px;
    margin-top : 10px;
    transition: 0.25s;
    font-weight: bold;
}

.partieCompetences ul li:hover, .partieFormation .keyword li:hover{
    background-color: white;
    color : #56585f;
}

.concepts{
    grid-area : concepts;
}

.langues{
    grid-area: langues;
}

.langages{
    grid-area : langages;
}

.perso{
    grid-area: perso;
}

/* Formation */
.partieFormation{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(2, auto) 2fr;
    grid-template-areas: 
    "date titre"
    "a lieu"
    "a contenu";
    grid-gap: 10px;
}

/* Expériences */
.subList{
    margin : 10px 0px 10px 0px;
}

/*Centres d'intérêts*/
.partieInterets{
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    grid-template-areas: 
    "a description b";
    grid-gap: 20px;

    padding : 0px 10px 0px 10px;
}

.partieInterets .description{
    font-size: 1.3em;
    font-weight: bold;
}

.partieInterets .description li{
    margin-bottom: 10px;
}

.partieFormation .description li{
    margin-bottom: 5px;
}

.partieFormation .description{
    margin-left : 5%;
}

/* Formation et Expérience */
.titrePart{
    grid-area: titre;
    color : #ffffff;
    font-size: 1.4em;
    font-weight: bold;
}

.date{
    grid-area: date;
    text-align: right;
    line-height: 25px;
    color : #dadada;
    font-size: 1.1em;
    font-weight: bold;
    padding-top:3px;
    padding-right: 10px;
}

.lieu{
    grid-area: lieu;
    color : #dadada;
    font-weight: bold;
}

.contenu{
    grid-area: contenu;
    padding-right : 5%;
}

/* Réalisation */
.partieRealisation{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 40px 2fr;
    grid-template-areas: 
    "categorie titreReal" 
    "a description"
    "b images";
    grid-gap: 10px;
}

.menuRealisation a{
    font-size: 0.6em;
    color : #dadada;
}

.menuRealisation a:hover{
    color : white;
}

.categorie{
    grid-area : categorie;
    text-align: right;
    padding-bottom : 3px;
    font-size : 1.6em;
    color : #dadada;
    margin-right : 15px;
    font-weight: bold;
}

.titreReal{
    grid-area : titreReal;
    color : white;
    font-size: 2em;
    font-weight: bold;
}

/* Réalisation : description */
.etatLibelle    { grid-area : etatLibelle; }
.etat           { grid-area : etat; }
.tempsLibelle   { grid-area : tempsLibelle; }
.temps          { grid-area : temps; }
.lienLibelle    { grid-area : lienLibelle; }
.lien           { grid-area : lien; }
.codeLibelle    { grid-area : codeLibelle; }
.code           { grid-area : code; }
.message        { grid-area : message; }

.etat, .temps, .lien, .code
{
    max-width: 400px;
}

.etatLibelle, .etat, .tempsLibelle, .temps, .lienLibelle, .lien, .codeLibelle, .code
{
    border : 1px solid white;
    padding : 3px;
}

.description{
    grid-area : description;
    align-self: start;
}

.partieRealisation .description{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 5fr;
    grid-template-areas: 
    "etatLibelle etat"
    "tempsLibelle temps"
    "lienLibelle lien"
    "codeLibelle code"
    "message message";
}

.images{
    grid-area: images;
    align-self: start;
}

.imageLink{
    text-decoration: none;
}

.partieRealisation .lien a, .partieRealisation .code a{
    color : white;
}

.imageHelp{
    vertical-align: bottom;
}

.partieRealisation div:last-child{
    margin-bottom: 3px;
}

.categorie, .titreReal{
    align-self: center;
}

.titreReal, .libelleLogiciels
 {
    text-decoration: underline;
 }

.titreReal a{
    color :#dadada;
    font-weight: normal;
    font-size: 0.8em;
}

.titreReal a:hover{
    color : white;
}

.commentaireCategorie{
    font-weight: none;
    font-size: 0.6em;
}

.titreElectronique{
    font-weight: none;
    font-size: 0.98em;
    padding-top : 6px;
}

.listeElectronique{
    margin : 0;
}

/* FOOTER */
.footer{
    min-height: 50px;
    align-self:flex-end;
    z-index : 1;
    display: flex;
    justify-content: center;
    background-color: #303133;
}

.credit{
    align-self: center;
}

/*************/
/*** MEDIA ***/
/*************/

@media (max-width: 980px){

    .partieRealisation{
        grid-template-columns: 1fr;
        grid-template-rows: max-content 40px 1fr max-content;
        grid-template-areas: 
        "categorie" 
        "titreReal" 
        "description"
        "images";

        padding : 0 15px 0 15px;
    }

    .categorie{
        justify-self: center;
        padding : 10px 0px 10px 0px;
    }

    .categorie:empty{
        margin-top : 0px;
    }
}

@media (max-width: 1150px){
    .partieCompetences{
        grid-template-columns: 5% 1fr 1fr 5%;
        grid-template-rows: repeat(2, auto);
        grid-template-areas: 
        "a concepts langues b"
        "c langages perso d";
    }
}

@media (max-width: 1000px){
    .partieInterets{
        display: grid;
        grid-template-columns: 5% 1fr 5%;
        grid-template-areas: 
        "a description b";
        grid-gap: 20px;

        padding : 0px 10px 0px 10px;
    }
}


@media (max-width: 855px){
    .header{
        grid-template-columns: 1fr;
        grid-template-rows: 70px 150px;
        grid-template-areas: 
        "coord"
        "titre";
        height: 172px;
    }

    .main{
        margin-top : 212px;
    }

    .coordonnees a img{
        float:right;
        margin-top : -15px;
    }

    .titre{
        align-self: start;
    }

    .navigation{
        top : 170px;
    }

    .navigation .menuNav a{
        font-size: 0.75em;
    }

    a.anchor{
        top: -220px;
    }
}

@media (max-width: 650px){

    .header{
        grid-template-columns: 1fr;
        grid-template-rows: 70px 150px;
        grid-template-areas: 
        "coord"
        "titre";
        height: 172px;
    }

    .main{
        margin-top : 422px;
    }

    .navigation{
        height: 250px;
        top : 170px;
        background-color: #303133;
    }

    .navigation .menuNav{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height : 100%;
    }

    .navigation .menuNav a{
        line-height: 30px;
    }

    .partieCompetences{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 
            "langues"
            "concepts"
            "langages"
            "perso";
    }

    .partieFormation{
        grid-template-areas: 
            "date titre"
            "a lieu"
            "contenu contenu";
    }

    .partieResume .titrePart{
        grid-template-columns: 1fr;
        grid-template-rows: 230px 1fr;
        grid-template-areas: 
        "photo" 
        "resume";
    }

    .photo{
        justify-self: center;
        align-self: center;
    }

    .tiret{
        display: block;
    }

    .date{
        text-align: center;
    }

    a.anchor{
        top : -430px;
    }
}

/***************/
/*** SUPPORT ***/
/***************/

/* Pour le moment : pas de support de Edge et IE pour les grids */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    .support{
        display : block;
    }
 }

@supports (-ms-accelerator:true) {
    /* IE Edge 12+ CSS */ 
    .support{
        display : block;
    }
 }
 
 @supports (-ms-ime-align:auto) {
     /* IE Edge 16+ CSS */ 
     .support{
        display : block;
    }
 }