:root {
    --bleu_fonce: #171717;
    --bleu_clair: rgb(102, 102, 102);
    --sable: #EED5A7;
    --beige : #F9EEE0;
    --pomme : #7DC4A3;
    --blanc : #fff;
    --PFormalScript : "Petit Formal Script";
    --Larsseit : Larsseit;
}

* {
    margin: 0;
    padding: 0;
    background-color: #171717;
    color: white;
}
body {
    background-color: #171717;
}

h1 {
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}

/* Navigation */
.navigation {
    position: fixed;
    z-index: 15;
}
/* Styles pour les écrans petits (<1200px) */
@media screen and (max-width: 1200px) {
    .large-screen {
        display: none; /* Masquer le lien pour les grands écrans */
    }
}

/* Styles pour les écrans grands (>1200px) */
@media screen and (min-width: 1200px) {
    .small-screen {
        display: none; /* Masquer le lien pour les petits écrans */
    }
}


/* Annimation logo terminal*/
svg .blinkit {animation: col 1.5s linear infinite;}
@keyframes col {
    0%,2% {fill:none}
    3% {fill:white}
    75%,100% {fill:none}
}


/* Style Page d'accueil */
.presentation-small {
    display: none;
}
.accueil {
    margin: 0 50px;
}
.accueil h1 {
    text-align: center;
}

.accueil .fleche-accueil {
    position: fixed;
    top: 90%;
    right: 50%;
}

@keyframes slideIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.texte-accueil {
    animation: slideIn 2s ease-out;
}

/* Style Page presentation */
.page-presentation {
    width: 70%;
    margin: 0 auto;
}
.page-presentation p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    color: #999;
}
.page-presentation a {
    color: #999;
}
.page-presentation h1 {
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    margin-bottom: 4%;
}
.page-presentation h3 {
    font-family: 'Roboto Mono', monospace;
    margin-bottom: 1%;
}

.presentation p {
    margin: 40px 0;
}

.titre-passion h1 {
    margin-bottom: 0;
}
.passions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}
.passions h3 {
    text-align: center;
}
.page-passion {
    font-family: 'Roboto Mono', monospace;
}


.passions img {
    display: block;
    margin: 0 auto 10px auto;
    height: 32vh;
}


/*  Page CV  */
.imageCV {
    width: 50%;
}
.page-cv h3 {
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}
.page-cv {
    font-family: 'Roboto Mono', monospace;
}
.page-cv li {
    color: #999;
    font-family: IBM Plex Mono, monospace;
}
.page-cv .contenu-col-gauche p {
    color: #999;
    font-family: IBM Plex Mono, monospace;
}
.page-cv a {
    text-decoration: none;
    color: #999;
}
.page-cv a:hover {
    color: white;
}


/*  Page Veille techno */
.veilleTechnologique {
    width: 80%;
    margin: 0 auto;
}
.veilleTechnologique p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    color: #999;
}
.veilleTechnologique a {
    color: white;
}
.veilleTechnologique h1 {
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    margin-bottom: 4%;
}


/*  Page Contact  */
.contact {
    width: 85%;
    margin: 0 auto;
}
.coordonnee {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.coordonnee a {
    text-decoration: none;
    margin: 20px auto;
}
.coordonnee p {
    color: #999;
    font-family: IBM Plex Mono, monospace;
    margin-top: 10px;
}
.coordonnee a:hover p {
    color: white;
}
.erreur {
    color: lightskyblue;
}
.contact form {
    outline:  none;
}
.contact form label  {
    color: #999;
    font-family: IBM Plex Mono, monospace;
    font-weight: bold;
}

.contact form input[type=text]  {
    height: 35px;
    margin-bottom: 10px;
    background-color: #171717;
    border: none;
    border-radius: 0;
    border-bottom: #999 1px solid  ;
    color: white;
    font-family: IBM Plex Mono, monospace;
}
.contact form input[type=text]:focus  {
    outline:  none;
    color: white;
    background-color: #171717;
    border: none;
    border-radius: 0;
    border-bottom: #999 1px solid  ;
}
.contact form textarea  {
    background-color: #171717;
    border: none;
    border-radius: 0;
    border-bottom: #999 1px solid  ;
    color: white;
    font-family: IBM Plex Mono, monospace;
}
.contact form textarea:focus  {
    outline:  none;
    color: white;
    background-color: #171717;
    border: none;
    border-radius: 0;
    border-bottom: #999 1px solid  ;
}


/*  Header  */
.header {
    background-color: var(--bleu_fonce);
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 5;
    opacity: 0.95;
}
.main_container_header {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
}
.header__logo img {
    max-height: 50px;
    padding-right: 80px;
}


.header__nav__menu {
    display: flex;
    align-items: center;

}

.header__nav__menu__link {
    margin-right: 40px;
    overflow-y: hidden;
}


.header__nav__menu__link:last-of-type {
    margin-right: initial;
}

.header__nav__menu__link a {
    color: var(--blanc);
    font-family: 'Arial';
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.header__nav__menu__link a:after {
    content: '';
    height: 2px;
    background-color: var(--bleu_fonce);
    width: 0;
    position: absolute;
    bottom: -5px;
    right: 0;
    transition: 0.2s all ease-in-out;
}

.header__nav__menu__link a:hover:after {
    width: 100%;
    left: 0;
}

.header__burger {
    display: none;

}

.header__burger svg {
    stroke: #fff;
    width: 50px;
    height: 50px;
}

.header__nav__close {
    display: none;
}


/*  Détails des projets  */
.details-projet {
    min-height: 100vh;
    width: 90%;
    margin: 0 auto 0 auto;
    padding-bottom: 100px;
    padding-top: 100px;
}
.fleche-gauche {
    position: absolute;
    top: 100px;
    left: 20px;
}
.flecheSmallEcran {
    display: none;
}
.flecheBigEcran {
    display: block;
}

.pDetailsProjets
{
    color: #999;
    font-family: IBM Plex Mono, monospace;
}
.recapImage {
    bottom: -40%;
}
.logoLangage {
    height: 70px;
    margin-top: 10px;
}
.LienProjets {
    text-decoration: underline;
    color: white;
}

.disable-smooth-scroll {
    scroll-behavior: auto !important; /* Désactivation du défilement fluide */
}

@media screen and (max-width: 1200px) {

    .header__burger {
        display: block;
        cursor: pointer;
    }


    .header__nav {
        position: fixed;
        z-index: 20;
        top: 0;
        right: 0;
        width: 350px;
        height: 100vh;
        background-color: var(--bleu_fonce);
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
        box-shadow: -10px 4px 8px rgba(0, 0, 0, 0.2);
    }

    .header__nav.open {
        display: flex;
        animation: transformMenu 300ms ease-in-out forwards;
    }

    @keyframes transformMenu {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: initial;
        }
    }

    .placeNav{
        padding-top: 85px;
    }

    .header__nav__menu {
        flex-direction: column;
        align-items: flex-start;
    }

    .header__nav__menu__link {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .header__nav__menu__link a {
        font-size: 25px;
    }

    .header__nav__close {
        display: block;
        cursor: pointer;

    }

    .header__nav__close svg {
        stroke: #fff;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .overlay-menu-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--bleu_fonce);
        display: none;
    }

    .overlay-menu-mobile.open {
        display: block;
    }


    /*  Accueil  */
    .accueil {
        margin: 150px auto 100px auto;
    }

    /*  Présentation  */
    .presentation-large {
        display: none;
    }
    .presentation-small {
        display: block;
    }

    /*  CV  */
    .imageCV {
        width: 35%;
    }
    .imageCvDiv {
        display: flex;
        justify-content: center;
    }

    /*  Details projet  */
    .colonneDivCarrousel {
        margin-top: 200px;
    }

    /*  Details projets  */
    .details-projet {
        padding-top: 150px;
    }
    .flecheSmallEcran {
        display: block;
    }
    .flecheBigEcran {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .recapImage {
        bottom: -50%;
    }
}

@media screen and (max-width: 410px) {
    .recapImage {
        bottom: -60%;
    }
}