@font-face {
    font-family: 'Gotham';
    src: url(../Fonts/Gotham-Black.otf);
    src: url(../Fonts/Gotham-Bold.otf);
}

/*Partie Accueil*/
nav {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; /*La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée. border-box prend en compte les padding contrairement au content-box.*/
    display: flex; /* Les liens seront disposés à l'horizontal */
    justify-content: space-around;
    align-items: center;
    min-height: 7vh; /* A vérifier, ma hauteur ne pourra pas baisser en dessous de 7vh */
    background-color: #ffffff;
    position: fixed; /*Pour faire fonctionner le z-index*/
    top: 0;
    width: 100%;
    z-index: 5; /*Pour faire passer au premier plan mon menu déroulant*/
}

.logo > a > h1 {
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.6em;
    text-decoration: none;
}

.nav-links li {
    list-style-type: none;
}
.nav-links li a {
    color: #000000;
    font-size: 1.2em;
    text-decoration: none;
}
.nav-links {
    display: flex;
    justify-content: space-around;
    width: 50%; /* Pour trouver la bonne largeur, appliquer d'abord un justify-content et un background-color pour estimer la largeur du bloc ul */
    color: #eeeeee;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 15px;
    padding: 0;
}

.burger {
    display: none; /* J'ai préféré commencer à réaliser le .burger div {} ci-dessous avant afin de voir et maitriser le rendu de ce dernier. Je suis ensuite passé à cette étape pour gérer ensuite le responsive en mettant mon premier media screen. */
    cursor: pointer; /* Le curseur se transforme en en main comme sur un lien désormais */
}

.burger div{ /* Cibler uniquement burger n'est pas utile vu que l'on ne le voit pas. */
    width: 25px;
    height: 3px;
    background-color: #000000;   
    margin: 5px;
    transition: all 0.3s ease;
}

body {
    background-color: #1C323A;
    font-family: Gotham, Metropolis, Futura, iCiel, sans-serif;
}

#anchor {
    position: absolute;
    top: 103%;
    left: 50%;
}

header {
    background-image: url(../IMG/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffffee;
    box-shadow: 0em 0.3em 0.7em #000000;
    margin-bottom: 80px;
}
html {
    --res: calc(0.01*10vmin);
    /* Je déclare une variable --res où vmin correspond à partie de l'écran la plus petite (hauteur en grand écran, largeur en petit écran) */
}
header > p {
    width: 80%;
    font-size: calc(54 * var(--res));
    /* J'utilise ma variable comme unité.*/
}
header > p > span {
    position: relative;
}
.cta {
    padding-right: 5vw;
    padding-left: 5vw;
    border-radius: 10px;
    font-size: calc(40 * var(--res));
    box-shadow: 0em 0em 0.5em #ffffff;
    scroll-behavior: smooth;
}

/*Page Accueil*/
.medias {
    list-style-type: none;
    position: absolute;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*Page Expérience*/
.contactMediasXp {
    list-style-type: none;
    position: fixed;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
}
/*Page Formation*/
.contactMediasSchool {
    list-style-type: none;
    position: fixed;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
}
/*Page CV*/
.contactMediasCv {
    list-style-type: none;
    position: fixed;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
}
.bulle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    background: #f1f1f1;
    cursor: pointer;
    position: relative;
}
.hr1 {
    border: 2px solid;
    background-color: #ffffff;
    width: 60%;
    margin-top: 2em;
    margin-bottom: 2em;
}
.important {
    font-size: calc(60 * var(--res));
    text-transform: uppercase;
}
.portfolioLink:hover {
    text-decoration: none;
}
.intro {
    font-size: calc(32 * var(--res));
}
.hr2 {
    border: 2px solid;
    background-color: #ffffff;
    width: 5em;
    margin-top: 1.5em;
}
#skillPart {
    background-color: #e3d7c5;
    font-size: calc(37 * var(--res));
}

/* Séparateur vague vers le bas */
.separation {
    position: relative;
    background-color: #e3d7c5;
}

#shape-fill01 {
    fill: #1C323A;
}

/* Séparateur vague vers le haut */

.custom-shape-divider-bottom-1610907985 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1610907985 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 75px;
}

#shape-fill02 {
    fill: #e3d7c5;
}

#skillPart .hr2 {
    background-color: #343A40;
}

.pictureThomas {
    width: 18em;
    height: 18em;
}

.container {
    text-align: center;
    margin-top: 6em;
}
.skill-icon {
    width: 40%;
    height: auto;
}

footer {
    background-color: #EAEAEA;
    width: 100%;
}
#carouselPortfolio {
    width: 70vw;
}

/*Animation menu burger*/

.toggle .line1 { /* Je souhaite que mon burger se transforme en croix, apès ouverture et avant fermeture pour indiquer qu'on peut le fermer */
    transform: rotate(-45deg) translate(-5px,6px);
    border-radius: 50%;
}
.toggle .line2 {
    opacity: 0; /* On ne doit pas voir la deuxième ligne */
}
.toggle .line3 {
    transform: rotate(45deg) translate(-5px,-6px);
}
/*Fin animation menu burger*/

/*Partie exp*/
.sectionContainer {
    display: flex;
    justify-content: flex-end;
}
.timeline-area1 {
    margin: 90px 0px 110px 0px;
    max-width: 100vw;
    width: 80%;
    height: 1850px;
    border-left: 8px solid #ffffff; /*Ma ligne est en fait la bordure gauche de mon conteneur principal*/
    padding: 0 20px 0 30px;
    color: #ffffff;
    text-shadow: 0.1em 0.1em 0.2em #000000;
  }
  
  .bloc1 {
    padding: 50px 0px 25px 25px;
    font-size: 10px;
    line-height: 1.7em;
    position: relative;
    height: 300px;
    margin-bottom: 20px;
  }
  
   .bloc1:before {
    content: ''; /*Le contenu du point*/
    display: block; 
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background-color: #ffffff;
    position: absolute; /*Le point est par-dessus la ligne*/
    top: 70px; /*Déplace le point*/
    left: -49px;
    box-shadow: 0em 0.2em 0.4em #000000;
  }
  
  .bloc1 p {
    font-size: calc(35 * var(--res));
    font-weight: 700;
    margin-top: 0;
  }

  /*Partie Formation*/

.timeline-area2 {
    margin: 90px 0px 110px 0px;
    max-width: 100vw;
    width: 80%;
    height: 1000px;
    border-left: 8px solid #ffffff; /*Ma ligne est en fait la bordure gauche de mon conteneur principal*/
    padding: 0 20px 0 30px;
    color: #ffffff;
    text-shadow: 0.1em 0.1em 0.2em #000000;
  }
  
  .bloc2 {
    padding: 50px 25px;
    font-size: 10px;
    line-height: 3.1em;
    position: relative;
    height: 300px;
    margin-bottom: 30px;
  }
  
   .bloc2:before {
    content: ''; /*Le contenu du point*/
    display: block; 
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background-color: #ffffff;
    position: absolute; /*Le point est par-dessus la ligne*/
    top: 70px; /*Déplace le point*/
    left: -49px;
    box-shadow: 0em 0.2em 0.4em #000000;
  }
  
  .bloc2 p {
    font-size: calc(35 * var(--res));
    font-weight: 700;
    margin-top: 0;
  }

  /*Partie CV*/

.imgCv {
    height: 80vh;
}
.downloadBtns {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.downloadBtns > a {
    width: 100%;
}
.coloredBtn {
    width: 70%;
    height: 50px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    background: rgb(237,207,52);
    background: linear-gradient(36deg, rgba(237,207,52,1) 0%, rgba(218,140,61,1) 25%, rgba(245,119,223,1) 63%, rgba(246,75,49,1) 100%);
}
.greyBtn {
    width: 70%;
    height: 50px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    background: rgb(106,106,106);
    background: linear-gradient(49deg, rgba(106,106,106,1) 0%, rgba(45,44,44,1) 100%);
}


@media screen and (max-width:1200px) {
    .downloadBtns {
        height: 35vh;
    }
}

@media screen and (max-width:1024px) {
    body {
        overflow-x: hidden; /* Empêche le scroll horizontal. Si besoin de voir ce qu'il se passe de l'autre côté, F12 sur le navigateur, ou je pourrai scroller. */
    }
    .nav-links {
        position: absolute; /* Sauf erreur de ma part, le menu issu du menu burger sera indépendant de la taille de son conteneur. Ainsi, right:0px s'applique par rapport à l'écran et non son conteneur. Les height, top, right s'appliquent non plus en fonction du conteneur mais bien de l'écran. */
        right: 0px; /* Le menu sera situé à la droite de l'écran */
        height: 95vh;
        top: 7vh;
        background-color: #000000; /* en mettant le background, je m'aperçois que la largeur que prendra mon menu vertical sera 75% comme indiqué plus haut dans la première media screen. */
        display: flex;
        flex-direction: column; 
        align-items: center;
        width: 50%; /* J'ai modifié la largeur de mon menu */
        transform: translate(100%); 
        /* Le menu est complètement sorti de l'écran. Scroller à droite pour le voir. transform translate décale l'élément. Ceci dans le but de préparer une animation. */
        transition: transform 0.5s ease-in; /* mon animation agit sur transforme*/
    }
    .nav-links li a{
        color: #ffffff;
    }
    .burger {
        display: block; /* On passe de display none à block. Le fait de faire apparaitre le menu burger m'a décalée mon logo, il va falloir remédier à cela. */
    }
    .nav-active { /* .nav-active a été inventé pour le JS */
        transform: translateX(0%);
    }
    .sectionContainer {
        justify-content: center;
    }
    
}

@media screen and (max-width:768px) {
    .medias {
        position: relative;
        top: 25%;
        flex-direction: row;
    }
    .contactMediasXp {
        position: relative;
        top: 2070px;
        flex-direction: row;
    }
    .contactMediasSchool {
        position: relative;
        top: 1200px;
        flex-direction: row;
    }
    .contactMediasCv {
        position: relative;
        top: 820px;
        flex-direction: row;
    }
    .bulle {
        margin: 0px 15px;
    }  
    .skill-icon {
        width: 70%;
    }
    .imgCv {
        height: 60vh;
    }
    .downloadBtns > a {
        width: 90%;
    }
    .coloredBtn {
        font-size: 0.8em;
    }
    .greyBtn {
        margin-bottom: 60px;
        font-size: 0.8em;
    }
} 

@media screen and (max-width:520px) {
    .pictureThomas {
        width: 14em;
        height: 14em;
    }
    .skill-icon {
        width: 100%;
    }
}