/* Import et mise en place police Lato sur les titres */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* Import et mise en place police Raleway sur le reste du site */

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont_wght.woff');
    src: url('../fonts/Raleway-VariableFont.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Raleway-Bold';
    src: url('../fonts/Raleway-Bold.woff');
    src: url('../fonts/Raleway-Bold.ttf') format('truetype'); 
}
@font-face {
    font-family: 'Raleway-BoldItalic';
    src: url('../fonts/Raleway-BoldItalic.woff');
    src: url('../fonts/Raleway-BoldItalic.ttf') format('truetype'); 
}
@font-face {
    font-family: 'Raleway-Italic';
    src: url('../fonts/Raleway-Italic.woff');
    src: url('../fonts/Raleway-Italic.ttf') format('truetype'); 
}
@font-face {
    font-family: 'Raleway-ItalicVariable';
    src: url('../fonts/Raleway-Italic-VariableFont.woff');
    src: url('../fonts/Raleway-Italic-VariableFont.ttf') format('truetype'); 
}
@font-face {
    font-family: 'Raleway-Regular';
    src: url('../fonts/Raleway-Regular.woff');
    src: url('../fonts/Raleway-Regular.ttf') format('truetype'); 
}
*
{
    font-family: "Raleway", sans-serif;
    box-sizing: border-box;
}
html
{
    background-color: #F5F5F5;
    height:auto;
    margin:0;
}
/* Taille du CV en largeur 1160px et centré et background de l'entête et pied de page */
body
{
    width: 1160px;
    height:auto;
    margin:0 auto;
    background-color: white;
}
header, footer
{
    background-color: #17abb3;
    align-content: center;
}
/* Mise en forme de l'header */
header
{
    display: flex;
    align-items: center;
    text-align:center;
    height: 240px;
}
/* Ajout d'une notion responsive pour l'accessibilité, qui entre en compte dans le SEO */
@media screen and (max-width: 1160px) 
{
    body
    {
        width: auto;
        height:auto;
        margin:0 auto;
        background-color: white;
    }
    header
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align:center;
        height: auto;
        width:auto;
        padding:1em;
    }
}
/* Mise en forme de la partie photo */
.photo
{
    width:348px;
    text-align: center;
}
.photo img
{
    width:40%;
    border-radius: 50%;
    border: white 5px solid;
}
/* Ajout de l'effet dynamique demandé */
.photo img:hover
{
    cursor: zoom-in;
}
/* Mise en forme du côté droit de l'header */
.header-contact
{
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
/* Mise en forme titre Nom Prénom */
header h2
{
    font-family: 'Lato',sans-serif;
    margin:auto;
    color:white;
    font-size: xxx-large;
}
/* Mise en forme du poste recherché */
.search-post
{
    margin:0.5em;
    font-size: x-large;
    color:white;
    font-weight: 600;
}
/* Mise en forme du bloc de coordonnées */
address
{
    display: flex;
    flex-direction:column;
    align-items:flex-start;
    margin:0;
    flex-wrap:wrap;
    font-size:small;
    height:55px;
    box-sizing: border-box;
    justify-content: center;
    width:100%;
}
address p
{
    font-style:normal;
    font-size:medium;
    text-align:left;
    margin:auto auto auto 25px;
    box-sizing: border-box;
    color:white;
}
/* Suppression mise en forme des liens */
a
{
    color:white;
    text-decoration: none;
}
/* Taille des icones */
.head-icon
{
    width:20px;
    float:left;
    padding-right:0.5em;
}



/* mise en forme de la partie principale*/
main
{
    display:flex;
}
/* Ajout d'une notion responsive pour l'accessibilité, qui entre en compte dans le SEO */
@media screen and (max-width: 1160px) 
{
    main
    {
        display:flex;
        flex-direction: column;
    }
}
/* On défini la taille de la partie profil */
.profile
{
    display:flex;
    flex-direction: column;
    min-width:348px;
    box-sizing:border-box;
    padding:2em;
    padding-left: 3em;
    row-gap:1em;
    background-color: #e3e3e380;
}
/* Titres du contenu du CV */
main h2
{
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    color:#17abb3;
    padding-bottom:8px; /* AJOUT SUITE CORRECTION */
    margin-bottom:auto;
    border-bottom: 1px solid #E3E3E3; /* AJOUT SUITE CORRECTION */
}

/* Partie profil */
/*.profile hr
{
    
    width:95%;
    margin-left: 0;
    border:none;
    border-top:1px solid #E3E3E3;
     INACTIF SUITE CORRECTION 
}*/
/* Mise en forme des compétences */
.skills-list
{
    width:95%;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top:1.5em;
    row-gap:0.5em;
}
.skills-item
{
    display:flex;
    align-items: center;
    width:100%;
    justify-content: space-between;
}
/* Mise en valeur de la compétence */
h3 /* La classe skills est maintenant rattaché à un titre h3 */
{
    font-weight: bold;
    font-family: 'Lato',sans-serif;
    font-size: medium;
    color:#333333;
    margin:0;
}
.skills
{
    width:50%;
}
/* Redimenssion des étoiles */
.skills-level img
{
    width:15px;
    display: inline;
    padding:0;
}
/* Mise en valeur de la langue parlée */
.language h3 /* Valeur H3 pour les titres */
{
    font-weight: bold;
    font-family: 'Lato',sans-serif;
    width:40%;
    color:#333333;
}
/* Mise en valeur de la langue parlée */
.language-level
{
    width:60%;
    text-align: right;
}

/* Mise en forme des listes */
.profile ul
{
    list-style-image: url('/assets/img/square-solid.svg');
    padding-left: 1em;
    line-height: 1.5em;
    margin:auto;
    margin-top:1.5em;
}


/* On défini la taille de la partie cv details */
.cv-details
{
    display:flex;
    flex-direction:column;
    padding:2em 3em;
    padding-left: 3em;
}

.cv-details hr
{
   /* border:none;
    border-top:1px solid #E3E3E3; INACTIF SUITE CORRECTION */
}

/*Mise en forme du texte de présentation*/
.profil-text
{
    text-indent: 2em;
    text-align: justify;
}

/* Mise en forme des items formations et experciences */
.list-items-cv
{
    display:flex;
    flex-direction: column;
}
.item-cv
{
    margin:0.3em 0;
    padding:0.5em;
    box-sizing: border-box;
    display: flex; /* AJOUT CORRECTION */
    flex-wrap: wrap; /* AJOUT CORRECTION */
}
.item-cv p
{
    margin:0 0; /* AJOUT CORRECTION */
}
/* Ajout de l'effet dynamique */
.item-cv:hover
{
    background-color: #E3E3E3;
    border-left: #17abb3 solid 0.5em;
    padding-left:1em;
}
.item-title
{
    font-weight: bolder;
    font-family: 'Lato',sans-serif;
    width:85%; /* AJOUT CORRECTION */
}
.date
{
    color:#17abb3;
    text-align:right;
    width:15%;/* AJOUT CORRECTION */
}
.item-infos
{
    font-size: small;
    font-style: italic;
    text-align:left;
}

/* Mise en page du footer */
footer
{
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size: small;
    font-style: italic;
    color:white;
}
.social-network
{
    display:flex;
    justify-content: center;
}
.social-network--icon
{
    width:25px;
    margin:0.3em 1em;
    margin-top:2em;
}
/* Ajout de l'effet dynamique demandé */
.social-network--icon:hover
{
    opacity:50%;
}
footer p
{
    margin:auto;
    margin-bottom:1em;
}