/* Titre activité */
.activity-title
{
    padding-top: 120px; /* Marge interne depuis le haut */
    position: relative;
}

.activity-title h2
{
    text-transform: uppercase; /* Lettres en capitale */ 
    font-size: 21px; /* Taille police */
    font-weight: bold; /* Graisse */
    color: var(--txt); /* Couleur txt */
    font-family: 'Montserrat'; /* Police de caractère */
}

/* Signe moins */
.minus
{
    position: absolute; /* Position par rapport au titre */
        top: 115px; /* Depuis le haut */
        left: 40px; /* Depuis la gauche */
}

/* Infobulle */
.tooltipMinus
{
    position: relative;
}

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

.tooltipMinus:hover .tooltipTextMinus
{
    visibility: visible; /* Visible */
    opacity: 1;
}

/* Contenu à propos */
.aPropos-content
{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px; /* Marge externe depuis le haut */
}

/* Contenu titre présentation */
.content-title
{
    width: 100%; /* Largeur */
    margin-top: 35px; /* Marge externe depuis le haut */
}

.content-title h2
{
    font-size: 21px; /* Taille de la police */
}

/* Texte du titre présentation & texte barres de progession */
.content-title h2, .bar-text
{
    font-weight: lighter; /* Graisse */
    color: var(--txt); /* Couleur texte */
    font-family: 'Montserrat'; /* Police de caractère */
    text-transform: capitalize; /* 1ère lettre en capitale */
}


/* Contenu présentation */
.content
{
    margin-left: 35px; /* Marge externe depuis la gauche */
    margin-right: 35px; /* Marge externe depuis la droite */
    margin-bottom: 20px; /* Marge externe depuis le bas */
    text-align: justify; /* Texte justifié */
    font-size: 17px; /* Taille police de caractère */
    color: var(--txt); /* Couleur du texte */
    font-family: 'Montserrat'; /* Police de caractère */
    line-height: 1.5; /* Interligne */
    padding: 10px /* Marge interne */
}

/* Icônes des services proposés */
.iconeServices
{
    text-align: center; /* Icônes centrées */
}

/* Conteneur barres de progression */
.container-bar
{
    width: 100%; /* Largeur */
    margin-left: 20px; /* Marge externe depuis la gauche */
    margin-right: 20px; /* Marge externe depuis la droite */
}

/* Espaces entre chaque barre de progression */ 
.bar:not(:last-child)
{
    margin-top: 15px; /* Marge externe depuis le haut */
    margin-bottom: 15px; /* Marge externe depuis le bas */
}

/* Barre de progression */
.bar
{
    width: 100%; /* Largeur */
    background-color: var(--card-border); /* Couleur de fond */
    border-radius: 5px; /* Bords arrondis */
    /* Neumorphisme  
    box-shadow: inset 5px 5px 10px #2c2c2c,
                inset -5px -5px 10px #5c5c5c; */
}

/* Contenu barres de progression */
.bar-stat
{
    padding: 8px 20px; /* Marges internes */
    border-radius: 5px; /* Bords arrondis */
    color: var(--txt); /* Couleur texte */
}

/* Texte barre de progression */
.bar-text
{
    font-size: 14px; /* Taille de la police */
}

/* Animation de chaque logiciel */
#figma
{
    background-color: #16164f; /* Couleur de fond */
    animation: figmaSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes figmaSlide
{
    0%{width: 0%;}
    100%{width: 75%;}
}

#htmlcss
{
    background-color: #e54c22;
    animation: htmlcssSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes htmlcssSlide
{
    0%{width: 0%;}
    100%{width: 85%;}
}

#js
{
    background-color: #c8b343;
    animation: jsSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes jsSlide
{
    0%{width: 0%;}
    100%{width: 60%;}
}

#php
{
    background-color: #4f5c93;
    animation: phpSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes phpSlide
{
    0%{width: 0%;}
    100%{width: 70%;}
}

#sql
{
    background-color: #20758f;
    animation: sqlSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes sqlSlide
{
    0%{width: 0%;}
    100%{width: 70%;}
}

#bootstrap
{
    background-color: #7810f7;
    animation: bootstrapSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes bootstrapSlide
{
    0%{width: 0%;}
    100%{width: 85%;}
}

/* Texte de chaque service proposé */
.service h2
{
    text-transform: uppercase; /* Texte en majuscule */
    font-weight: bold; /* Graisee */
    font-size: 17px; /* Taille police de caractère */
}

/* Carte contact */
.contactCard
{
    width: 275px; /* Largeur */
    height: 126px; /* Hauteur */
    margin: 40px auto; /* Marges */
    background-image: url("../img/fond/contactBgMob.png") ; /* Image de fond */
    background-repeat: no-repeat; /* Sans répétition */
}

/* Paragraphe carte contact */
.contactCard p
{
    padding: 13px 0 0 20px; /* Marges internes */
    font-size: 14px; /* Taille police de caractère */
    font-family: 'Montserrat'; /* Police de caractère */
    color: var(--txt); /* Couleur du texte */
}

/* Bouton me contacter carte contact */
.btn-card
{
    background-color: #C20020;
    padding: 5px 7px 5px 7px; /* Marges internes */
    margin-top: 12px; /* Marge externe depuis le haut */
    margin-left: -3px; /* Marge externe depuis la gauche */
    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: 14px; /* Taille de la police de caractère */
}

/* Introduction carte contact */
.contactIntro
{
    padding: 0 15px 0 15px; /* Marges internes */
    margin-top: 35px; /* Marge depuis le haut */
}

.contactIntro 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 */
}

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

/* Media queries */
@media only screen and (min-width: 960px) 
{
    /* Titre activité */
    .activity-title
    {
        padding-top: 200px; /* Marge interne depuis le haut */
    }

    /* Signe moins */
    .minus
    {
        position: absolute; /* Position par rapport au titre */
            top: 196px; /* Depuis le haut */
            left: 593px; /* Depuis la gauche */
    }

    /* Texte infobulle */
    .tooltipTextMinus
    {
        position:absolute; /* Position par rapport au signe moins */
            top: -40px;
            left: -24px;
        background-color: #141414; /* Couleur de fond */
        color: var(--txt); /* Couleur texte */
        white-space: nowrap; /* En ligne */
        padding: 10px 15px; /* Marges internes */
        font-size: 14px; /* Taille de la police de caractère */
        border-radius: 7px; /* Bords arrondis */
        visibility: hidden; /* Invisible  */
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* Conteneur activité */
    .activity-container
    {
        display: flex;
        justify-content: center; /* Centré horizontalement */
        align-content: center; /* Centré verticalement */
        margin-top: -25px; /* Marge externe depuis le haut */
        margin-bottom: 175px; /* Marge externe depuis le bas */
    }

    /* Contenu à propos */
    .aPropos-content
    {
        display: flex;
    }

    /* Bloc présentation & barres de progression */
    .presentation, .container-bar
    {
        margin-top: 35px; /* Marge externe depuis le haut */
        margin-bottom: 45px; /* Marge externe depuis le bas */
    }

    .presentation
    {
        width: 50%; /* Largeur */
    }

    .container-bar
    {
        width: 45%; /* Largeur */
    }

    /* Bloc services proposés */
    .service
    {
        margin: 0 auto; /* Bloc centré */
        width: 32%; /* Largeur de chaque bloc par rapport à l'écran */
        text-align: justify; /* Texte justifié */
        font-size: 17px; /* Taille police de caractère */
        color: var(--txt); /* Couleur du texte */
        font-family: 'Montserrat'; /* Police de caractère */
        line-height: 1.5; /* Interligne */
        padding: 10px /* Marge interne */
    }

    /* Carte contact */
    .contactCard
    {
        width: 624px; /* Largeur */
        height: 256px; /* Hauteur */
        justify-content: center; /* Centré (Axe horizontal) */
        align-items: center; /* Centré (Axe vertical) */
        background-image: url("../img/fond/contactBg.png") ; /* Image de fond */
        background-repeat: no-repeat; /* Sans répétition */
    }

    /* Paragraphe carte contact */
    .contactCard p
    {
        padding: 25px 0 0 50px; /* Marges internes */
        font-size: 20px; /* Taille police de caractère */
        font-family: 'Montserrat'; /* Police de caractère */
        color: var(--txt); /* Couleur du texte */
    }

    /* Bouton me contacter carte contact */
    .btn-card
    {
        background-color: #C20020;
        padding: 15px; /* Marges internes */
        margin-top: 15px; /* Marge externe depuis le haut */
        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: 15px; /* Taille de la police de caractère */
        font-weight: bold;
    }
}

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

/* Media queries */
@media only screen and (min-device-width: 560px) and (max-device-width: 912px)
{
    /* Signe moins */
    .minus
    {
        position: absolute; /* Position par rapport au titre */
            top: 135px; /* Depuis le haut */
            left: 260px; /* Depuis la gauche */
    }

    /* Conteneur activités */
    .activity-container
    {
        margin-top: 50px; /* Marge externe depuis le haut */
        margin-bottom: 50px; /* Marge externe depuis le bas */
    }

    /* Bloc présentation  & barres de progression */
    .presentation, .container-bar
    {
        margin-bottom: 45px; /* Marge externe depuis le bas */
    }

    /* Carte contact */
    .contactCard
    {
        width: 624px; /* Largeur */
        height: 256px; /* Hauteur */
        justify-content: center; /* Centré (Axe horizontal) */
        align-items: center; /* Centré (Axe vertical) */
        background-image: url("../img/fond/contactBg.png") ; /* Image de fond */
        background-repeat: no-repeat; /* Sans répétition */
    }

    /* Paragraphe carte contact */
    .contactCard p
    {
        padding: 50px 0 0 50px; /* Marges internes */
        font-size: 20px; /* Taille police de caractère */
        font-family: 'Montserrat'; /* Police de caractère */
        color: var(--txt); /* Couleur du texte */
    }

    /* Bouton me contacter carte contact */
    .btn-card
    {
        background-color: #C20020;
        padding: 15px; /* Marges internes */
        margin-top: 15px; /* Marge externe depuis le haut */
        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: 15px; /* Taille de la police de caractère */
        font-weight: bold;
    }
}


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

/* Media queries */
@media only screen and (width: 912px)
{
    /* Conteneur activités */
    .activity-container
    {
        margin-top: 35px; /* Marge externe depuis le haut */
    }

    /* Bloc services proposés */
    .service
    {
        margin: 0 auto; /* Centré */
    }

    /* Contenu du bloc service & titre */
    .content, .content-title h2
    {
        font-size: 21px; /* Taille police de caractère */
    }

    /* Carte contact */
    .contactCard
    {
        width: 624px; /* Largeur */
        height: 256px; /* Hauteur */
        justify-content: center; /* Centré (Axe horizontal) */
        align-items: center; /* Centré (Axe vertical) */
        background-image: url("../img/fond/contactBg.png") ; /* Image de fond */
        background-repeat: no-repeat; /* Sans répétition */
    }
}

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

/* Media queries */
@media only screen and (width: 1024px)
{
    /* Signe moins */
    .minus
    {
        position: absolute; /* Position par rapport au titre */
            top: 212px; /* Depuis le haut */
            left: 390px; /* Depuis la gauche */
    }

    .tooltipTextMinus
    {
        position:absolute; /* Position par rapport au signe moins */
            top: -40px;
            left: -23px;
    }

    /* Conteneur activités */
    .activity-container
    {
        margin-top: -25px; /* Marge externe depuis le haut */
        margin-bottom: 75px; /* Marge externe depuis le bas */
    }

    /* Bloc services proposés */
    .service
    {
        margin-left: -5px; /* Marge externe depuis la gauche */
        margin-right: -5px; /* Marge externe depuis la droite */
        margin-top: 100px; /* Marge externe depuis le haut */
        margin-bottom: 130px; /* Marge externe depuis le bas */
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
        
    }

    /* Carte contact */
    .contactCard
    {
        width: 624px; /* Largeur */
        height: 256px; /* Hauteur */
        justify-content: center; /* Centré (Axe horizontal) */
        align-items: center; /* Centré (Axe vertical) */
        background-image: url("../img/fond/contactBg.png") ; /* Image de fond */
        background-repeat: no-repeat; /* Sans répétition */
    }
}

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

/* Media queries */
@media only screen and (width: 1280px)
{
    /* Signe moins */
    .minus
    {
        position: absolute; /* Position par rapport au titre */
            top: 212px; /* Depuis le haut */
            left: 514px; /* Depuis la gauche */
    }

    .tooltipTextMinus
    {
        position:absolute; /* Position par rapport au signe moins */
            top: -40px;
            left: -25px;
    }

    /* Bloc services proposés */
    .service
    {
        margin-left: -5px; /* Marge externe depuis la gauche */
        margin-right: -5px; /* Marge externe depuis la droite */
        margin-top: 100px; /* Marge externe depuis le haut */
        margin-bottom: 50px; /* Marge externe depuis le bas */
        justify-content: center; /* Alignement horizontal (centré) */
        align-items: center; /* Alignement vertical (centré) */
            
    }

    /* Carte contact */
    .contactCard
    {
        width: 624px; /* Largeur */
        height: 256px; /* Hauteur */
        justify-content: center; /* Centré (Axe horizontal) */
        align-items: center; /* Centré (Axe vertical) */
        background-image: url("../img/fond/contactBg.png") ; /* Image de fond */
        background-repeat: no-repeat; /* Sans répétition */
    }
}