/* HTML ELEMENTS*/

@font-face {
    font-family: "sintony";
    src: url(../fonts/sintony/Sintony-Regular.otf);
}

@font-face {
    font-family: "sintony";
    font-weight: bold;
    src: url(../fonts/sintony/Sintony-Bold.otf);
}

:root {
    --main-color: #152745;
    --bg-color: #fff;
    --secondary-color: #D17B0F;


    scroll-behavior: smooth;
}

body {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
}

h1 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 40px;
    color: var(--main-color);
}

h2 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 36px;
    color: var(--main-color);
}

h3 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 32px;
    color: var(--main-color);
}

h4 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 28px;
    color: var(--main-color);
}

h5 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 24px;
    color: var(--main-color);
}

h6 {
    font-family: "sintony";
    font-weight: bold;
    font-size: 20px;
    color: var(--main-color);
}

/* CLASS & ID*/

.navbar {
    /* position: static;
    display: flex; */
    /* align-items: center; */
    background-color: var(--bg-color) !important;
    height: 175px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* padding: 0 10%; */

}

#navimg {
    position: relative;
    top: 25%;
    /* left: 2%; */
    /* margin-top: 41px;
    padding-left: 50px; */
    /* margin-right: -19%; */
    align-items: center;
    /* height: 50%; */
    width: 0px;
}

#img-navbar {
    height: 86px;
    /* height:50% */
}

.containernav {
    margin-left: 0px;
}

/* .navbar-nav a {

    text-decoration: none;
    color: var(--main-color);

    /*permet de faire le soulignement au passage de la souris
    background-image: linear-gradient(var(--main-color), var(--main-color)) ;
    background-size: 0% 0.1em ;
    background-position-y: 100% ;
    background-position-x: 0% ;
    background-repeat: no-repeat ;
    transition: background-size 0.2s ease-in-out ;
} */

/*animation lien*/
/*garder cette spécificité pour overwrite bootstrap*/
.navbar-nav a.nav-link {
    color: var(--main-color);
    text-decoration: none;
    /* enlever la soulignement par défaut */
    position: relative;
    /* définir la position relative pour le pseudo-élément */
}

/* Style du pseudo-élément pour la barre de soulignement */
.navbar-nav a.nav-link::after {
    color: var(--main-color) !important;
    content: '';
    position: absolute;
    bottom: -3px;
    /* définir la position au-dessous du lien */
    left: 0;
    width: 0%;
    height: 3px;
    background-color: var(--main-color);
    transition: width 0.3s ease;
    /* ajouter une transition pour l'animation */
}

/* Style au passage de la souris */
.navbar-nav a.nav-link:hover::after {
    width: 100%;
    color: var(--main-color) !important;
    /* agrandir la barre de soulignement jusqu'à 100% de la largeur */
}

/*fin code chatgpt bouton*/
#myBtn {
    display: none;
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    flex-direction: column;
    z-index: 98;
    /* Make sure it does not overlap */
    background-color: var(--main-color);
    /* Set a background color */
    backdrop-filter: blur(100px);
    border-radius: 10px;
    /* Rounded corners */
    border: 5px solid rgb(197, 197, 197);

}

#myBtn a {

    z-index: 99;
    background-color: var(--main-color);
    /* Set a background color */
    text-decoration: none;
    color: white;
    /* Text color */
    backdrop-filter: blur(100px);
    opacity: 0.9;
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    font-family: "sintony";
    font-size: 18px;
    /* Increase font size */
}

#myBtn a:hover {
    background-color: var(--bg-color);
    /* Add a dark-grey background on hover */
    color: var(--main-color);
    opacity: 1;
    backdrop-filter: blur(0);
}


.highlight {
    color: var(--secondary-color);
}

.nav-link a:hover,
.nav-link a:focus,
.nav-link a:active {
    background-size: 100% 0.1em;
}

.nav-item {
    text-align: center;
    margin: 0 15px;
    /* padding-top: 60px; */


    font-family: "sintony";
    font-weight: bold;
    font-size: 28px;
    color: var(--main-color);
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 27px;
}

#identity {
    margin-top: 40px;
}

#title {
    margin-top: 21px;
}

#illustration-picture {
    margin-top: 50px;
    margin-bottom: -6px;
}

#img-illu {
    width: 70.3%;
}

#apropos {
    margin-top: 0;
    padding: 4% 14.85% 12.5%;
    /*background-color: var(--main-color);*/

    /*gradiant from https://www.joshwcomeau.com/gradient-generator/ */
    background-image: linear-gradient(45deg,
            hsl(217deg 89% 21%) 0%,
            hsl(218deg 78% 21%) 5%,
            hsl(219deg 70% 20%) 10%,
            hsl(219deg 62% 19%) 16%,
            hsl(218deg 53% 18%) 22%,
            hsl(218deg 53% 18%) 28%,
            hsl(218deg 53% 18%) 35%,
            hsl(218deg 53% 18%) 43%,
            hsl(218deg 53% 18%) 50%,
            hsl(218deg 53% 18%) 58%,
            hsl(218deg 53% 18%) 65%,
            hsl(218deg 53% 18%) 71%,
            hsl(218deg 53% 18%) 78%,
            hsl(219deg 62% 19%) 84%,
            hsl(219deg 70% 20%) 89%,
            hsl(218deg 78% 21%) 95%,
            hsl(217deg 89% 21%) 100%);

    margin-bottom: 25px;

    font-size: 24px;
    font-family: "sintony";
    font-weight: bold;
    text-align: left;

    color: var(--bg-color);



}

#projets {
    width: 70%;
    border: 5px solid #152745;
    background-color: #fff;
    border-radius: 30px;

    margin-top: -110px;
    margin-bottom: 25px;

}

.card {
    position: relative;
     height: 15em; 
    background-color: #cbcbcb;
    border-radius: 10px;
    margin: 5%;
    overflow: hidden;

}


.projectName {
    position: absolute;
    left: 12.5%;
    top: 40%;
    width: 75%;
    margin: 0;
    font-family: "sintony";
    font-size: 25px;
    font-weight: bold;
    color: var(--secondary-color);
    z-index: 2;

    text-shadow: 2px 0 var(--bg-color), -2px 0 var(--bg-color), 0 2px var(--bg-color), 0 -2px var(--bg-color),
               1px 1px var(--bg-color), -1px -1px var(--bg-color), 1px -1px var(--bg-color), -1px 1px var(--bg-color);

}

.card img {
    position: relative;
    left: 0;
    top: 1px;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    overflow: hidden;
    transition: all 0.5s;

}

.card img:hover {
    transform: scale(1.2);
    filter: blur(1em);
}

.projectCTA {
    margin-top: 45px;
}

.buttonCTA {
    width: 28%;
    max-width: 350px;
    height: 20%;
    /* margin-top: 100px; */
    margin-bottom: 30px;
    border-radius: 50px;
    border: 3px solid var(--main-color);
    background-color: var(--bg-color);
    box-shadow: 0px 2px 2px rgb(90, 90, 90);

    color: var(--main-color);
    font-family: "sintony";
    font-size: 36px;
    font-weight: bold;

    transition-duration: 0.3s;
    transition-property: background-color, box-shadow;

}

.buttonCTA:hover {
    background-color: var(--main-color);
    color: var(--bg-color);
}

#contact {
    margin-top: 125px;
    margin-bottom: 100px;
}

#contact button {
    margin-top: 100px
}


article {
    background-image: linear-gradient(45deg,
            hsl(217deg 89% 21%) 0%,
            hsl(218deg 78% 21%) 5%,
            hsl(219deg 70% 20%) 10%,
            hsl(219deg 62% 19%) 16%,
            hsl(218deg 53% 18%) 22%,
            hsl(218deg 53% 18%) 28%,
            hsl(218deg 53% 18%) 35%,
            hsl(218deg 53% 18%) 43%,
            hsl(218deg 53% 18%) 50%,
            hsl(218deg 53% 18%) 58%,
            hsl(218deg 53% 18%) 65%,
            hsl(218deg 53% 18%) 71%,
            hsl(218deg 53% 18%) 78%,
            hsl(219deg 62% 19%) 84%,
            hsl(219deg 70% 20%) 89%,
            hsl(218deg 78% 21%) 95%,
            hsl(217deg 89% 21%) 100%);
    color: var(--bg-color);
    font-size: 24px;
    padding: 5% 3%;
    margin: 0 3%;
    border-radius: 10px;
    font-family: 'sintony';

}

.article_for_articles {
    /* background-color: var(--bg-color) !important; */
    background-image: none;

    padding: 2% 3%;
    margin: 0 3%;
}

.article_for_articles p {
    color: var(--main-color);
    font-family: 'sintony';
    font-weight: bold;
    font-size: 24px;
}

.date {
    padding: 2% 3%;
    margin: 0 3%;
    font-family: 'sintony';
    font-size: 18px;
    font-style: italic;
    color: var(--main-color);
}

.source {
    background-image: linear-gradient(45deg,
            hsl(217deg 89% 21%) 0%,
            hsl(218deg 78% 21%) 5%,
            hsl(219deg 70% 20%) 10%,
            hsl(219deg 62% 19%) 16%,
            hsl(218deg 53% 18%) 22%,
            hsl(218deg 53% 18%) 28%,
            hsl(218deg 53% 18%) 35%,
            hsl(218deg 53% 18%) 43%,
            hsl(218deg 53% 18%) 50%,
            hsl(218deg 53% 18%) 58%,
            hsl(218deg 53% 18%) 65%,
            hsl(218deg 53% 18%) 71%,
            hsl(218deg 53% 18%) 78%,
            hsl(219deg 62% 19%) 84%,
            hsl(219deg 70% 20%) 89%,
            hsl(218deg 78% 21%) 95%,
            hsl(217deg 89% 21%) 100%);
    border-radius: 10px;
    font-family: 'sintony';
    font-size: 24px;
    width: 15%;
    padding: 10px 3%;
    padding-bottom: 50px;
    margin: 0 6%;
}

.source h3 {
    color: var(--bg-color);
    padding-top: 0;
}

.source a {
    text-decoration: none;
    color: var(--secondary-color);

}

.source a:hover {
    text-decoration: underline;
}



/**LISTE PROJET ET ARTICLE**/

.container-list {
    width: 50%
}

.cardliste {

    margin: 20px 0;
    padding: 1%;
    border: 2px solid var(--main-color);
    border-radius: 10px;
    background-image: linear-gradient(45deg,
            hsl(217deg 89% 21%) 0%,
            hsl(218deg 78% 21%) 5%,
            hsl(219deg 70% 20%) 10%,
            hsl(219deg 62% 19%) 16%,
            hsl(218deg 53% 18%) 22%,
            hsl(218deg 53% 18%) 28%,
            hsl(218deg 53% 18%) 35%,
            hsl(218deg 53% 18%) 43%,
            hsl(218deg 53% 18%) 50%,
            hsl(218deg 53% 18%) 58%,
            hsl(218deg 53% 18%) 65%,
            hsl(218deg 53% 18%) 71%,
            hsl(218deg 53% 18%) 78%,
            hsl(219deg 62% 19%) 84%,
            hsl(219deg 70% 20%) 89%,
            hsl(218deg 78% 21%) 95%,
            hsl(217deg 89% 21%) 100%);
    color: var(--bg-color) !important;
}

.cardliste h3,
p {
    color: var(--bg-color);

}

.cardliste p {
    font-family: "sintony";
    font-size: 24px;
}

.lien-card {
    text-decoration: none;
    transform: scale(1);

}

.lien-card div:hover {
    transform: scale(1.01);
}


/*PROJET*/
.description{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.description:hover{
    /* text-overflow: unset; */
    display: inline-block;
    animation-name: scroll-text;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

/*animation scroll-text*/
/*source https://codepen.io/stantonl33/pen/QzMLye */ 
@keyframes scroll-text {
    0% {
      transform: translateX(0%);
    }
    90% {
      transform: translateX(-100%);
    }
    95% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(0%);
    }
  }
/*FOOTER*/

footer {


    width: 100%;
    height: 15%;
    /*background-color: var(--main-color);*/
    margin-top: 8%;

    background-image: linear-gradient(45deg,
            hsl(217deg 89% 21%) 0%,
            hsl(218deg 78% 21%) 5%,
            hsl(219deg 70% 20%) 10%,
            hsl(219deg 62% 19%) 16%,
            hsl(218deg 53% 18%) 22%,
            hsl(218deg 53% 18%) 28%,
            hsl(218deg 53% 18%) 35%,
            hsl(218deg 53% 18%) 43%,
            hsl(218deg 53% 18%) 50%,
            hsl(218deg 53% 18%) 58%,
            hsl(218deg 53% 18%) 65%,
            hsl(218deg 53% 18%) 71%,
            hsl(218deg 53% 18%) 78%,
            hsl(219deg 62% 19%) 84%,
            hsl(219deg 70% 20%) 89%,
            hsl(218deg 78% 21%) 95%,
            hsl(217deg 89% 21%) 100%);
}

footer p {
    margin-top: 75px;
    font-family: "sintony";
    font-size: 14px;
    color: var(--bg-color);



    white-space: pre;

}

footer p span {
    color: red;
}

/* .footer{ /*cas où le footer ne se mettrais pas en bas
    position: absolute;
    bottom: 0;
    width: 100%;
} */

/*RESPONSIVE*/

@media only screen and (max-width : 1475px) {
    .nav-item {
        font-size: 30px;
        background-color: var(--bg-color);
        margin: 0;
    }

    .source {
        /* max-width: 100%; */
        width: 85%;
        margin: 0 7.5% ;
    }

}

@media only screen and (max-width: 1235px) {
    .nav-item {
        font-size: 25px;
        background-color: var(--bg-color);
        margin: 0;
    }

    .source {
        /* max-width: 100%; */
        width: 85%;
        margin: 0 7.5% ;
    }
}

@media only screen and (max-width: 1010px) {
    body {
        overflow-x: hidden;
    }

    .navbar {
        height: 120px;
    }

    /*#navimg{
        margin-right: -27%;
    }

    #img-navbar{
        height: 70px;
    }*/


    .nav-link {
        background-color: var(--bg-color);
        width: 100%;
        margin: 0;
    }



    #apropos {
        margin-top: 0;
        padding: 4% 20% 12.5%;
    }

    #projets {
        margin-top: -90px;
    }

    .buttonCTA {
        width: 28%;
        max-width: 175px;
        height: 20%;
        /* margin-top: 100px; */
        margin-bottom: 30px;
        border-radius: 50px;
        border: 3px solid var(--main-color);
        background-color: var(--bg-color);
        box-shadow: 0px 2px 2px rgb(90, 90, 90);

        color: var(--main-color);
        font-family: "sintony";
        font-size: 17px;
        font-weight: bold;

        transition-duration: 0.3s;
        transition-property: background-color, box-shadow;

    }

    .buttonCTA:hover {
        background-color: var(--main-color);
        color: var(--bg-color);
    }


    .source {
        /* max-width: 100%; */
        width: 85%;
        margin: 0 7.5% ;
    }



}