/*** Base ***/
html
{
    scroll-behavior: smooth;
}

:root
{
    --bgBody: #404A4C;
    --titleSubTitle: #706f6c;
    --coord: #0BC682;
    --txt: #F8F7F4;
    --txtFooter: #808080;
    --card-border: #717171;
    --bgModal: #161f26; 
}

/* Corps du site */
body
{
    width: 100%; /* Largeur */
    background-color: var(--bgBody); /* Couleur de fond */
    overflow-x: hidden; /* Aucun ascenseur horizontal */
}

h2, h4
{
    display: flex;
    justify-content: center; /* Alignement horizontal (centré) */
    align-items: center; /* Alignement vertical (centré) */
    color: var(--txt); /* Couleur txt */
}
/*** /Base ***/





/*******************/
/* Mobile version */
/*****************/

/* En-tête */
.header 
{
    padding: 60px; /* Marges internes */
    font-size: 30px; /* Taille police de caractère */
    /* justify-content: center; */
    /* align-items: center; */
    background-color: var(--bgBody); /* Couleur de fond */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Ombre */
}

/* Lien en-tête */
.header a
{
    text-decoration: none; /* Suppression soulignement bleu */
}

/* Logo */
.logo
{
    float: left; /* A gauche */
    width: 30px; /* Largeur */
    height: 30px; /* Hauteur */
    margin-top: 7px; /* Marge depuis le haut */
}

/* Titre & sous-titre */
.title, .subTitle
{
    font-family: 'Oswald'; /* Police de caractère */
    text-transform: uppercase; /* Majuscule */
    color: var(--titleSubTitle); /* Couleur txt */
    text-align: center; /* Texte centré */
}

/* Titre */
.title
{
    font-size: 30px; /* Taille police de caractère */
    font-weight: bolder; /* Graisse */
}

/* Sous-titre */
.subTitle
{
    font-size: 25px; /* Taille police de caractère */
    letter-spacing: 4px; /* Espace en les lettres */
    margin-left: 30px; /* Marge externe depuis la gauche */
}

/* Conteneur principal */
.main-container
{
    flex-wrap: wrap; /* Retour à la ligne */
    display: flex;
    justify-content: center; /* Alignement horizontal (centré) */
    align-items: center; /* Alignement vertical (centré) */
}

.card-container h3, .btnGroup h2, nav ul li a, button, .skills-title h2
{
    font-family: 'Montserrat'; /* Police de caractère */
}

.card-content h3, nav ul li a
{
    font-weight: lighter; /* Graisse */
}

    /* Carte & groupe de boutons */
    .card-container, .btnGroup
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
    }

    .card-container
    {
        margin-top: 150px; /* Marge extérieure depuis le haut */
    }

        /* Carte */
        .card
        {
            background-color: #06394a; /* Couleur de fond */
            border-radius: 7px; /* Bords arrondis */  
            height: 150px; /* Hauteur du bloc */
            width: 340px; /* Largeur du bloc */
        }

            /* Portrait */
            .card img
            {
                border-radius: 50%; /* Portrait arrondi */
            }

            /* Photo */
            .hue
            {
                width: 90px; /* Largeur */
                height: 90px; /* Hauteur */
                /*filter: hue-rotate(180deg); Teinte de la photo */
                margin: 17px 19px 0px 17px; /* Marges externes */
                float: left; /* A gauche */
            }

            /* Coordonnées */
            .card-content h3
            {
  
                color: var(--txt); /* Couleur txt */
                position: absolute;
                    left: 133px;
                    bottom: -32px;
                font-size: 14px; /* Taille police de caractère */
            }

            .card-content
            {
                position: relative;
            }

                /* Logo LinkedIn */
                .linkedIn
                {
                    position: absolute; /* Positionnment par rapport au contenu de la carte */
                        top: 102px; /* Depuis le haut */
                        left: 0; /* Depuis la gauche */
                }

                    /* Infobulle */
                    .tooltipLinkedIn
                    {
                        position: relative; /* Positionnment par rapport au logo */
                        cursor: pointer;
                    }

                    /* Texte infobulle */
                        .tooltipTextLinkedIn
                        {
                            position: absolute; 
                                top: 6px;
                                left: 33px;
                            background-color: #141414; /* Couleur de fond */
                            color:var(--txt); /* Couleur du texte */
                            white-space: nowrap; /* En ligne */
                            padding: 4px 8px; /* Marges internes */
                            border-radius: 7px; /* Bords arrondis */
                            font-size: 11px; /* Taille de la police de caractère */
                            visibility: hidden; /* Invisible  */
                            opacity: 0; /* Opacité */
                            transition: opacity 0.5s ease;
                        }

                    /* Infobulle au survol de la souris */
                    .tooltipLinkedIn:hover .tooltipTextLinkedIn
                    {
                        visibility: visible; /* Visible */
                        opacity: 1; /* Opacité */
                    }

                /* Signe plus */
                .plus
                {
                    position: absolute; /* Positionnment par rapport au contenu de la carte */
                        right: -5px; /* Depuis la droite */
                        top: 103px; /* Depuis le haut */
                }

                    /* Infobulle */
                    .tooltipPlus
                    {
                        position: relative; /* Positionnment par rapport au signe plus */
                        cursor: pointer;
                    }

                        /* Texte infobulle */
                        .tooltipTextPlus
                        {
                            position: absolute;
                                top: 5px;
                                right: 33px;
                            background-color: #141414; /* Couleur de fond */
                            color:var(--txt); /* Couleur texte */
                            white-space: nowrap; /* En ligne */
                            padding: 4px 8px; /* Marges internes */
                            border-radius: 7px; /* Bords arrondis */
                            font-size: 11px; /* Taille de la police de caractère */
                            visibility: hidden; /* Invisible  */
                            opacity: 0;
                            transition: opacity 0.5s ease;
                        }

                    /* Infobulle au survol de la souris */
                    .tooltipPlus:hover .tooltipTextPlus
                    {
                        visibility: visible; /* Visible */
                        opacity: 1;
                    }

    /* Intro */
    .intro h5
    {
        color:var(--txt); /* Couleur texte */
        font-family: 'Montserrat'; /* Police de caractère */
        font-size: 13px; /* Taille police de caractère */
        text-align: center; /* Texte centré */
        font-weight: lighter; /* Graisse */
    }

    /* Groupe de boutons */
    .btnGroup
    {
        height: 150px; /* Hauteur du bloc */
        margin-bottom: 15px; /* Marge externe depuis le bas */
    }     

            /* Titre au dessus du groupe de boutons */
            nav h2
            {
                text-transform: uppercase; /* Lettres en capitale */ 
                font-size: 20px; /* Taille police */
                font-weight: bold; /* Graisse */
                color: var(--txt); /* Couleur txt */
            }

            /* Liste des boutons */
            ul
            {
                padding: 0px; /* Suppression marges internes */
                margin: 0 auto; /* Centrage vertical */
                text-align: center; /* Centrage horizontal */
            }

            /* Liste des boutons */
            nav ul li 
            {
                list-style-type: none; /* Sans puce de liste */
                display: inline-flex; /* Affichage en ligne */
                padding: 8px 10px; /* Marges entre chaque bouton */
            }

                /* Liens */
                nav ul li a
                {
                    text-decoration: none; /* Sans soulignement */
                    color: var(--txt); /* Couleur txt */
                    justify-content: center; /* Alignement horizontal (centré) */
                    align-items: center; /* Alignement vertical (centré) */
                }

                    /* Boutons */
                    button
                    {
                        width: 90px; /* Largeur */
                        height: 30px; /* Hauteur */
                        border: none; /* Sans bordure */
                        border-radius: 30px; /* Coins arrondis */
                        background-color: var(--bgBody); /* Couleur de fond */
                        color: var(--txt);
                        font-size: 14px;
                        border: 3px solid var(--txt); /* Epaisseur de la bordure & couleur */
                        transform: .4s; /* Durée de la transition */
                    }

                    /* Au survol des différents boutons */
                    button:hover
                    {
                        transform: scale(1.1);  /* Homothétie des boutons (10% + grand) */
                        cursor: pointer; /* Curseur indiquant un lien */
                    }

/* Pied de page */ 
.footer
{
    width: 100%; /* Largeur */
    height: 100px; /* Hauteur */
    margin-top: 25px; /* Marge externe depuis le haut */
    background-color: var(--bgBody); /* Couleur de fond */
}

.footer .row
{
    display: flex;
    color: var(--txt); /* Couleur texte */
    font-family: 'Montserrat'; /* Police de caractère */
}

/* Liens */
.footer .row a
{
    text-decoration:none; /* Suppression soulignement bleu du lien */
    color: var(--txt); /* Couleur texte */
    transition:0.5s;
    font-size: 11px; /* Taille police de caractère */
}

/* Au survol de la souris */
.footer .row a:hover
{
    color: var(--txtFooter); /* Couleur texte */
}

/* Liste */
.footer .row ul
{
    list-style-type : none; /* Suppression puce de liste */
    display: inline-flex; /* Liste en ligne */
    justify-content: center; /* Alignement horizontal (centré) */
}

/* Retour haut de page */
#to-top 
{
    display: none; /* Invisible par défaut */
    position: fixed; /* Position fixe */
    bottom: 15px; /* Depuis le bas */
    right: 21px; /* Depuis la droite */
    width: 35px; /* Largeur */
    height: 35px; /* Hauteur */
    z-index: 99; /* Au dessus de la pile */
    cursor: pointer; /* Forme du curseur (main) */
}
      
/************************************************/
/* Pc Version (laptops/desktops, 960px and up) */
/**********************************************/

/* Media queries */
@media only screen and (min-width: 960px) 
{
    /* En-tête */
    #header
    {
        width: 100%; /* Largeur */
        z-index: 999; /* Au 1er plan */
        height: 145px; /* Hauteur */
        position: fixed; /* Postition fixe */
        background-color: var(--bgBody); /* Couleur de fond */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Ombre */
        top: 0; /* A partir du haut */
    }

    /* Logo */
    .logo
    {
        width: 100px; /* Largeur */
        height: 100px; /* Hauteur */
        margin-top: 25px; /* Marge externe depuis le haut */
    }

    /* Titre & sous-titre */
    .title, .subTitle
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
        padding-top: 5px; /* Marge interne depuis le haut */
        font-family: 'Oswald'; /* Police de caractère */
        text-transform: uppercase; /* Majuscule */
        color: var(--titleSubTitle); /* Couleur txt */
    }

    /* Titre */
    .title
    {
        font-weight: bold; /* Graisse */
        font-size: 64px; /* Taille police de caractère */
    }

    /* Sous-titre */
    .subTitle
    {
        font-size: 35px; /* Taille police de caractère */
        letter-spacing: 17px; /* Espace en les lettres */
        margin-top: -30px; /* Marge externe haut */
    }

    /* Conteneur principal */
    .main-container
    {
        flex-wrap: wrap; /* Retour à la ligne */
    }

    .card-container
    {
        margin-top: 200px; /* Marge interne depuis le haut */ 
    }

        /* Carte */
        .card
        {
            width: 530px; /* Largeur */
            height: 220px; /* Hauteur */
        }

            /* Photo */
            .hue
            {
                width: 183px; /* Largeur */
                height: 183px; /* Hauteur */
                margin: 17px 25px 0px 25px; /* Marges externes */
                float: left; /* A gauche */
            }

            /* Coordonnées */
            .card-content h3
            {
                font-size: 20px; /* Taille police de caractère */
                margin-top: 27px; /* marge interne depuis le haut */
                position: relative;
                    left: 235px;
                    bottom: 200px;
            }

            /* Logo LinkedIn */
            .linkedIn
            {
                position: absolute; /* Positionnment dans la carte */
                    top: 154px;
                    left: 0;
            }

            /* Info bulle LinkedIn */
            .tooltipTextLinkedIn
            {
                position: absolute; /* Positionnement par rapport au logo LinkedIn */
                    top: -4px;
                    left: 33px;
                background-color: #141414; /* Couleur de fond */
                color:var(--txt); /* Couleur txt */
                white-space: nowrap;
                padding: 10px 15px; /* Marges intérieures */
                border-radius: 7px; /* Coins arrondis */
                font-size: 14px; /* Taille police de caractère */
                visibility: hidden;
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            /* Signe plus */
            .plus
            {
                position: absolute; /* Positionnment dans la carte */
                    left: 240px;
                    top: 155px;
            }

            /* Info bulle signe plus */
            .tooltipTextPlus
            {
                position: absolute; /* Positionnement par rapport au signe plus */
                    top: -4px;
                    right: 300px;
                background-color: #141414; /* Couleur de fond */
                color:var(--txt); /* Couleur txt */
                white-space: nowrap; 
                padding: 10px 15px; /* Marges intérieures */
                border-radius: 7px; /* Coins arrondis */
                font-size: 14px; /* Taille police de caractère */
                visibility: hidden;
                opacity: 0; /* Opacité */
                transition: opacity 0.5s ease;
            }

        /* Intro */
        .intro h5
        {
            font-size: 19px; /* Taille police de caractère */
        }

        /* Groupe de boutons */
        .btnGroup
        {
            margin-top: 195px; /* Marge extérieure haute */
            width: 593px; /* Largeur du bloc */
            justify-content: flex-end; /* Affichage à la fin du bloc */
        }

            /* Titre au dessus du groupe de boutons */
            nav h2
            {
                font-size: 24px; /* Taille police */
                text-align: center; /* texte centré */
            }

            /* Liste des boutons */
            nav ul li 
            {
                list-style-type: none; /* Sans puce de liste */
                display: inline-flex; /* Affichage en ligne */
                padding: 2px 4px; /* Marges entre chaque bouton */
            }

            /* Boutons */
            button
            {
                width: 130px; /* Largeur */
                height: 52px; /* Hauteur */
                padding: 6px 20px; /* Marges intérieures */
                font-size: 16px; /* Taille police de caractère */
            } 
    
    /* Nom compétences */
    .skills-title 
    {
        width: 100%; /* 100% de large */
    }
        
        .skills-title h2
        {
            font-size: 24px; /* Taille police de caractère */
            padding: 7px 0px 7px 0px; /* Marges internes */
            margin-top: 100px; /* Marge externe depuis le haut */
        }  

    /* Conteneur compétences */
    .skills-container
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
        margin-bottom: 100px; /* Marge externe depuis le bas */
    }

    /* Icônes logiciels utilisés */
    .overlay-text img
    {
        width: 36px; /* Largeur */
        height: 36px; /* Hauteur */
    }

    /* Liens */
    .footer .row a
    {
        text-decoration:none; /* Suppression soulignement bleu du lien */
        color: var(--txt); /* Couleur texte */
        transition:0.5s;
        font-size: 14px; /* Taille police de caractère */
    }

    /* Haut de page */
    #to-top 
    {
        right: 112px; /* Depuis la droite */
        width: 45px; /* Largeur */
        height: 45px; /* Hauteur */
        bottom: 27px; /* Depuis le bas */
    }
}

/***************************************/
/* Samsung Galaxy S8+ Version (360px) */
/*************************************/

/* Media queries */
@media only screen and (min-width: 360px) 
{
    /* Pied de page */
    .footer .row
    {
        text-align: center; /* Texte aligné */
    }
}

/************************************************/
/* Ipad Version (560px and up, 912px and down) */
/**********************************************/

/* Media queries */
@media only screen and (min-device-width: 560px) and (max-device-width: 912px)
{

    /* Entête */
    #header
    {
        height: 120px; /* Hauteur */
 
    }

    /* Logo */
    .logo
    {
        float: left; /* A gauche */
        width: 40px; /* Largeur */
        height: 40px; /* Hauteur */
        margin-top: -2px; /* Marge externe depuis le haut */
    }

    /* Compétences */                
    .skills-title
    {
        margin-top: 15px; /* Marge externe depuis le haut */
    }

    /* Titre et sous-titre du site */
    .title, .subTitle
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
        margin-top: -42px; /* Marge externe depuis le haut */
    }

    /* Titre */
    .title
    {
        font-weight: bold; /* Graisse */
        font-size: 57px; /* Taille police de caractère */
    }

    /* Sous-titre */
    .subTitle
    {
        font-size: 25px; /* Taille police de caractère */
        letter-spacing: 15px; /* Espace en les lettres */
        margin-top: -20px; /* Marge externe haut */
    }

        /* Groupe de boutons */
        .btnGroup
        {
            margin-top: 150px; /* Marge externe depuis le haut */
            margin-left: 20px; /* Marge externe depuis la gauche */
        }

    /* Info bulle LinkedIn & signe plus */
    .tooltipTextLinkedIn, .tooltipTextPlus
    {
        background-color: #141414; /* Couleur de fond */
        color: var(--txt); /* Couleur texte */
        white-space: nowrap; /* En ligne */
        padding: 4px 8px; /* Marges internes */
        border-radius: 7px; /* Bords arrondis */
        font-family: 'Montserrat'; /* Police de caractère */
        font-size: 11px; /* Taille de la police de caractère */
        visibility: hidden; /* Invisible  */
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* Postion du texte info bulle */
    .tooltipTextLinkedIn
    {
        position: absolute; /* Positionnement */
            left: 29px;
            bottom: 5px;
    }

    /* Postion du texte info bulle */
    .tooltipTextPlus
    {
        position: absolute; /* Positionnement */
            right: 32px;
            bottom: 7px;
    }

    /* Pied de page */
    .footer .row
    {
        font-size: 14px; /* Taille police de caractère */
        height: 30px; /* Hauteur */
    }

    /* Haut de page */
    #to-top 
    {
        right: 35px; /* Depuis la droite */
        bottom: 70px; /* Depuis le bas */
        padding-right: 0; /* Marge interne depuis la droite */
    }

}

/******************************/
/* Ipad Pro Version (1024px) */
/****************************/

/* Media queries */
@media only screen and (width: 1024px)
{
    /* Logo */
    .logo
    {
        margin-top: -0px; /* Marge externe depuis le haut */
    }

    /* Titre & sous-titre */
    .title, .subTitle
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
        margin-top: -12px; /* Marge externe depuis le haut */
    }

    .title, .subTitle
    {
        padding-right: 75px;
    }

    /* Sous-titre */
    .subTitle
    {
        font-size: 25px; /* Taille police de caractère */
        letter-spacing: 15px; /* Espace en les lettres */
        margin-top: -20px; /* Marge externe haut */
    }

    /* Groupe de boutons */
    .btnGroup
    {
        justify-content: center; /* Alignement horizontal (centré) */
        margin-top: 25px; /* Marge externe haut */
    }

    /* Pied de page */
    .footer
    {
        height: 150px; /* Hauteur */
        margin-bottom: 55px; /* Marge externe depuis le bas */
        font-size: 15px; /* Taille police de caractère */
    }

    /* Liens */
    .footer .row a
    {
        font-size: 15px; /* Taille police de caractère */
    }

    /* Haut de page */
    #to-top 
    {
        right: 73px; /* Depuis la droite */
        bottom: 170px; /* Depuis le bas */
        width: 45px; /* Largeur */
        height: 45px; /* Hauteur */
        padding-right: 0; /* Marge interne depuis la droite */
    }
}

/*********************************/
/* Surface Duo Version (540px) */
/*******************************/

/* Media queries */
@media only screen and (width: 540px)
{
    /* Titre & sous-titre */
    .title, .subTitle
    {
        display: flex;
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
    }

    .subTitle
    {
        margin-left: 35px; /* Marge externe depuis la gauche */
    }

    /* Info bulle LinkedIn & signe plus */
    .tooltipTextLinkedIn, .tooltipTextPlus
    {
        background-color: #141414; /* Couleur de fond */
        color: var(--txt); /* Couleur texte */
        white-space: nowrap; /* En ligne */
        padding: 4px 8px; /* Marges internes */
        border-radius: 7px; /* Bords arrondis */
        font-family: 'Montserrat'; /* Police de caractère */
        font-size: 11px; /* Taille de la police de caractère */
        visibility: hidden; /* Invisible  */
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* Postion du texte info bulle */
    .tooltipTextLinkedIn
    {
        position: absolute;
            left: 29px; /* Depuis la gauche */
            bottom: 4px; /* Depuis le bas */
    }

    /* Postion du texte info bulle */
    .tooltipTextPlus
    {
        position: absolute;
            right: 32px; /* Depuis la droite */
            bottom: 7px; /* Depuis le bas */
    }

    /* Pied de page */
    .footer .row
    {
        font-size: 14px; /* Taille police de caractère */
    }

    /* Haut de page */
    #to-top 
    {
        right: 99px; /* Depuis la droite */
        bottom: 15px; /* Depuis le bas */
        width: 45px; /* Largeur */
        height: 45px; /* Hauteur */
        padding-right: 0; /* Marge interne depuis la droite */
    }
}

/**************************/
/* Surface Pro 7 (912px) */
/************************/

/* Media queries */
@media only screen and (width: 912px)
{
    /* Haut de page */
    #to-top 
    {
        right: 99px; /* Depuis la droite */
        bottom: 70px; /* Depuis le bas */
        padding-right: 0; /* Marge interne depuis la droite */
    }

    /* Liens */
    .footer .row a
    {
        font-size: 15px; /* Taille police de caractère */
    }
}

/**********************************/
/* Nest Hub Max Version (1280px) */
/********************************/

/* Media queries */
@media only screen and (width: 1280px)
{
    /* Haut de page */
    #to-top 
    {
        right: 224px; /* Depuis la droite */
        bottom: 30px; /* Depuis le bas */
        width: 45px; /* Largeur */
        height: 45px; /* Hauteur */
        padding-right: 0; /* Marge interne depuis la droite */
    }

    /* Liens */
    .footer .row a
    {
        font-size: 15px; /* Taille police de caractère */
    }
}