/* Compétences */                
.skills-title
{
    width: 100%; /* Largeur */
}
        
/* Nom compétences */
.skills-title h2
{
    text-align: center; /* Texte aligné */
    font-weight: bolder; /* Graisse */
    font-size: 20px; /* Taille de la police */
    color: var(--txt); /* Couleur texte */
    margin-bottom: 10px; /* Marge externe depuis le bas */
}                

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

    /* Carte compétences */
    .skills
    {
        width: 350px; /* Largeur */
        height: 325px; /* Hauteur */
        background-color: var(--bgBody); /* Couleur de fond */
        border-radius: 7px; /* Bords arrondis */
        overflow: hidden; /* Contenu rogné si besoin */
        box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Ombre */
        margin: 20px; /* Marges externes */
        position: relative;
    }

    .skills-def
    {
        padding: 0 15px 0 15px; /* Marges internes */
    }

    .skills-def p
    {
        font-family: 'Montserrat'; /* Police de caractère */
        font-weight: 400; /* Niveau de graisse */
        font-size: 15px; /* Taille police de caractère */
        color: var(--txt); /* Couleur du texte */
        text-align: justify; /* Justifié */
        line-height: 1.7; /* Hauteur des lignes */
    }

        /* Image */
        .skills img
        {
            width: 100%; /* Largeur */
            height: 250px; /* Hauteur */
        }

        /* Contenu */
        .skills-content
        {
            margin: 0px 7px 0px 7px; /* Marges internes */
        }

            /* Nom du projet & détail */
            .skills-content h6, .skills-content p
            {
                color: var(--txt); /* Couleur du texte */
            }

            /* Nom du projet */
            .skills-content h6
            {
                font-family: 'Montserrat'; /* Police de caractère */
                font-weight: bold; /* Graisse */
                margin-top: 27px; /* Marge externe depuis le haut */
                margin-left: 5px; /* Marge externe depuis la gauche */
            }

            /* Détail */
            .skills-content p 
            {
                font-family: 'Montserrat'; /* Police de caractère */
                font-size: 14px; /* Taille police de caractère */
                line-height: 1.3; /* Hauteur des lignes */
            }

            /* Logiciels utilisés */
            .log
            {
                display: inline-flex; /* Affichage en ligne */
            }

            /* Etiquettes compétences de chaque projet */
            .tag
            {
                background-color: #2196F3; /* Couleur de fond */
            }

            /* Etiquettes logiciels utilisés pour chaque chaque projet */
            .log-tag
            {
                background-color:rgb(16, 16, 16); /* Couleur de fond */
            }

            /* Etiquettes compétences & logiciels */
            .tag, .log-tag
            {
                color: var(--txt); /* Couleur du texte */
                font-size: 11px; /* Taille police de caractère */
                padding: 4px 10px; /* Marges internes */
                border-radius: 25px; /* Bords arrondis */
                margin-top: 0; /* Marge externe depuis le haut */
            }

        /* Superposition */
        .skills-overlay
        {
            display: flex;
            justify-content: center; /* Alignement horizontal (centré) */
            align-items: center; /* Alignement vertical (centré) */
            position: absolute; /* Position */
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            cursor: default;
            border-radius: 7px 7px 0 0; /* Bords arrondis */
            opacity: 0; /* Opacité */
            visibility: none; /* Invisible */
            transition: .5s ease;
            background-color: var(--bgModal); /* Couleur de fond */
        }

        /* Au survol de la souris sur la superposition */
        .skills-content:hover .skills-overlay
        {
            opacity: 1; /* Opaque à 100% */
            width: 402px; /* Largeur */
            height: 325px; /* Hauteur */
        }

        /* Bouton plus sur superposition */
        .btn-plus
        {
            display: flex;
            justify-content: center; /* Alignement horizontal (centré) */
            align-items: center; /* Alignement vertical (centré) */
            margin-right: 35px; /* Marge externe depuis la droite */
            width: 75px; /* Largeur */
            height: 40px; /* Hauteur */
            background-color: var(--coord); /* Couleur de fond */
            border-radius: 7px; /* Bords arrondis */
        }
        
        /* Au survol sur le bouton plus */ 
        .btn-plus:hover
        {
            cursor: pointer; /* Main */
        }

        /* Boite de dialogue */
        .modal-dialog
        {
            background-color: var(--bgModal); /* Couleur de fond */
        }

        .modal
        {
            display: none; /* aché par défaut */
            position: fixed; /* position fixe */
            left: 0;
            top: 100px; /* Depuis le haut */
            overflow: auto; /* Défillement si besoin */
            font-family: 'Montserrat'; /* Police de caractère */
        }

        /* En-tête boite de dialogue */
        .modal-header
        {
            background-color: var(--bgModal); /* Couleur de fond */
            color: var(--txt); /* Couleur */
        }

        /* En-tête & pied de page boite de dialogue */
        .modal-header, .modal-footer
        {
            border: none; /* Sans bordure */
            border-radius: 0; /* Sans arrondis */
        }

        /* Titre boite de dialogue */
        .modal-title
        {
            font-family: 'Montserrat'; /* Police de caractère */
            font-weight: bold; /* Graisse */
        }

        /* Contenu boite de dialogue */
        .modal-content 
        {
            position: relative;
            margin: auto; /* Marges automatique */
            padding: 0; /* Marges internes */
            width: 100%; /* Largeur */
            border: none; /* Sans bordure */
            animation-name: animatetop; /* Nom de l'animation */
            animation-duration: 0.4s; /* Durée de l'animation */
            background-color: var(--bgModal); /* Couleur de fond */
        }

        /* Animation */
        @keyframes animatetop 
        {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

        /* Bouton fermeture (X) boite de dialogue */
        .btn-close:hover
        {
           cursor: pointer; /* Main */ 
        }

        /* Corps boite de dialogue */
        .modal-body
        {
            background-color: var(--bgModal); /* Couleur de fond */
        }

        /* Dimension image projet dans boite de dialogue */
        .modal-body img
        {
            width: 225px; /* Largeur */
            height: 110px; /* Hauteur */
        }

        /* Paragraphe */
        .modal-body p
        {
            color: var(--txt); /* Couleur */
            font-size: 15px; /* Taille police de caractère */
            text-align: left; /* Texte aligné à gauche */
        }

        /* Pied de page boite de dialogue */
        .modal-footer
        {
            background-color: var(--bgModal); /* Couleur de fond */
            color: var(--txt); /* Couleur */
            padding: 1px 0 1px 0; /* Marges internes */
            justify-content: center; /* Centré (Axe horizontal) */
            align-items: center; /* Centré (Axe vertical) */
        }

        /* Bouton sur la superposition */
        /* Couleur du bouton projets en ligne */
        .btn-skills
        {
            background-color: #C20020; /* Couleur de fond */
            cursor: pointer; /* Main */ 
        }

        /* Couleur du bouton projets en local */
        .btn-skills-disabled
        {
            background-color: #FEA92A; /* Couleur de fond */
            cursor: default;
        }

        .btn-skills, .btn-skills-disabled
        {
            padding: 5px; /* Marges internes */
            margin: 15px; /* Marges externes */
            display: inline-block; /* En ligne */
            color: var(--txt); /* Couleur du texte */
            text-decoration: none; /* Suppression soulignement bleu du lien */
            border-radius: 7px; /* Bords arrondis */
            font-family: 'Montserrat'; /* Police de caractère */
            font-size: 16px; /* Taille de la police de caractère */
        }

/************************************************/
/* Pc Version (laptops/desktops, 960px and up) */
/**********************************************/

/* Media queries */
@media only screen and (min-width: 960px) 
{
    /* Carte compétences */
    .skills
    {
        width: 402px; /* Largeur */
    }

    .skills-def
    {
        padding: 0 300px 0 300px; /* Marges internes */
        height: 190px; /* Hauteur */
    }

    .skills-def p
    {
        font-family: 'Montserrat'; /* Police de caractère */
        font-weight: 400; /* Graisse */
        font-size: 17px; /* Taille police de caractère */
        color: var(--txt); /* Couleur du texte */
        text-align: justify; /* Texte justifié */
        line-height: 1.5; /* Hauteur des lignes */
    }

    /* Etiquettes compétences de chaque projet */
    .tag
    {
        display: inline-flex; /* Affichage */
        color: var(--txt); /* Couleur du texte */
        font-size: 12px; /* Taille police de caractère */
        padding: 6px 12px; /* Marges internes */
        border-radius: 25px; /* Bords arrondis */
        background-color: #2196F3; /* Couleur de fond */
        margin-top: 0; /* Marge externe depuis le haut */
    }

    /* Superposition */
    .skills-overlay
    {
        position: absolute; /* Position */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        cursor: default;
        height: 176px; /* Hauteur */
        width: 402px; /* Largeur */
        border-radius: 7px 7px 0 0; /* Bords arrondis */
        opacity: 0; /* Opacité */
        visibility: none; /* Invisible */
        transition: .5s ease;
        background-color: #141414; /* Couleur de fond */
    }

    /* Bouton plus sur superposition */
    .btn-plus
    {
        margin-right: 0; /* Marge externe depuis la droite */
    }

    /* Boite de dialogue */
    .modal-dialog
    {
        top: 55px; /* Depuis le haut */
        width: 70%; /* Largeur */
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
    }

    /* En-tête & pied de page boite de dialogue */
    .modal-header, .modal-footer
    {
        border: none; /* Sans bordure */
        border-radius: 0; /* Sans arrondis */
    }

    .btn-skills, .btn-skills-disabled
    {
        padding: 10px; /* Marges internes */
    }
}

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

/* Media queries */
@media only screen and (min-device-width: 560px) and (max-device-width: 912px)
{
    /* Boite de dialogue */
    .modal-dialog
    {
        top: 100px; /* Depuis le haut */
 
    }
}

/******************************/
/* Nest Hub Version (1024px) */
/****************************/

/* Media queries */
@media only screen and (width: 1024px)
{
    /* Définition compétences */
    .skills-def
    {
        padding-left: 15px; /* Marge interne depuis la gauche */
        padding-right: 15px; /* Marge interne depuis la droite */
    }

    /* Boite de dialogue */
    .modal-dialog
    {
        top: -15px; /* Depuis le haut */
     
    }
}

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

/* Media queries */
@media only screen and (width: 1280px)
{
    .skills-def
    {
        padding-left: 15px; /* Marge interne depuis la gauche */
        padding-right: 15px; /* Marge interne depuis la droite */
    }
}