@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/*  */
/* FONTS */
/*  */
.h1 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4.5rem;
}
.h2 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 3rem;
}
.h3 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2rem;
}
.h4 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.5rem;
}
.h5 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.125rem;
}
.text-regular {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}
.text-medium {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
}
.text-semibold {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
}
.hero-text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3rem;
}
.hero-text-big {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4.2rem;
}

/*  */
/* AUTRES */
/*  */
.card-a-propos, .card-competences {
    min-width: 12rem;
    min-height: 12rem;
}
.card-contact {
    min-width: 10rem;
    min-height: 10rem;
}
.text-area-h {
    height: 120px;
}
.cv-icon {
    max-width: 24px;
}
svg {
    fill: #171717;
}
body {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    background-color: #171717;
}
.text-red {
    color: #CB0F00;
}
.bg-red {
    color: white;
    background-color: #CB0F00;
}
.gap-6 {
    gap: 6.5rem;
}
.cls-1 {
    fill: #ffffff;
}



/* SPLASHSCREEN */
.splashscreen {
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
}
#splashBg {
    background-image: url(../medias/Background.webp);
    background-size: cover;
    height: 100vh;
    width: 100vw;
    margin-top: -200vh;
    position: absolute;
    top: 0;
    left: 0;
    transition: margin-top 1.5s cubic-bezier(0,0.14,0,1);
}
#containerLogo {
    height: 100vh;
}
#splashLogo {
    max-width: 450px;
    width: 0;
    opacity: 0;
    transition: all 1s cubic-bezier(0.6,-0.28,0.74,0.05);
}







/*  */
/* NAV */
/*  */
header {
    top: 24px;
}
.navbar {
    background-color: #17171715 !important;
    border: solid 1px #ffffff10;
    border-radius: 100px;
    backdrop-filter: blur(25px);
}
.nav-link {
    margin-top: 4px;
}
.nav-item {
    width: 138px;
}

/*  */
/* ACCUEIL */
/*  */
#accueil {
    height: 100vh;
    background-image: url(../medias/background.webp);
    background-size: cover;
    background-attachment: fixed;

}

/*  */
/* A PROPOS */
/*  */
#a-propos {
    padding: 124px 0;
}
#a-propos .pre-h2 {
    width: 64px;
    height: 64px;
    background-color: #0530D0;
}
.section-h2 {
    margin: 0 64px;
}
.section-content {
    margin: 48px 170px 0 170px;
}
.card {
    border-radius: 46px;
}
.card-a-propos {
    background-color: #fff;
    transition: .3s ease-in-out;
}
#a-propos .card-a-propos:hover {
    background-color: #0530D0;
    color: #fff;
}
#a-propos .card-a-propos svg {
    transition: .3s ease-in-out;
}
#a-propos .card-a-propos:hover svg {
    fill: #fff;
}
.btn-cv {
    background-color: white;
    color: #0530D0;
    margin-top: 96px;
}

/*  */
/* COMPETENCES */
/*  */
#competences {
    padding: 124px 0;
}
#competences .pre-h2 {
    width: 64px;
    height: 64px;
    background-color: #43CAE5;
}
.card-competences {
    transition: .3s ease-in-out;
}
#competences .card-competences:hover {
    background-color: #43CAE5;
    color: #fff;
}
#competences .card-competences:hover svg {
    transition: .3s ease-in-out;
}
#competences .card-competences:hover svg {
    fill: #fff;
}

/*  */
/* PORTFOLIO */
/*  */
#portfolio {
    padding: 124px 0;
}
#portfolio .pre-h2 {
    width: 64px;
    height: 64px;
    background-color: #DBB703;
}


/*  */
/* CONTACT */
/*  */
#contact {
    padding: 124px 0 0 0;
}
#contact .section-h2 {
    margin-bottom: 48px;
}
#contact .pre-h2 {
    width: 64px;
    height: 64px;
    background-color: #CB0F00;
}
#contact .section-content {
    height: 100%;
    min-height: 100vh;
    padding: 130px 120px;
    margin: 0;
    background-image: url(../medias/background2.webp);
    background-size: cover;
}
.card-contact {
    background-color: #CB0F00;
    border-radius: 48px;
}
.reseaux-content {
    background-color: #fff;
    border-radius: 48px;
    padding: 48px;
}
.reseaux-content h4 {
    color: #171717;
}
.form-content {
    color: #171717;
    background-color: #fff;
    border-radius: 48px;
    padding: 48px;
}

/*  */
/* FOOTER */
/*  */
footer {
    padding-right: 200px;
    padding-left: 3rem;
}

.logo-img {
    min-width: 250px;
}
footer a {
    text-decoration: none;
    color: #fff;
}
.to-top {
    background-color: #DBB703;
    position: fixed;
    bottom: 120px;
    right: 64px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all .5s;
}
.to-top.visible {
    pointer-events: auto;
    opacity: 1;
}



/* --------- */
/* --------- */
/* ----MOBILE---- */
/* --------- */
/* --------- */

@media screen and (max-width: 576px) {
    html {
        font-size: 14px;
    }

    .h1 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 3.75rem;
    }

    .h2 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 2.1rem;
    }

    .h3 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 2rem;
    }

    .h4 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.25rem;
    }

    .h5 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.125rem;
    }

    .hero-text {
        font-family: 'Noto Sans', sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 2rem;
    }

    .hero-text-big {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 3.53rem;
    }

    .card-a-propos, .card-competences {
        min-width: 9rem;
        max-width: 9rem;
        min-height: 9rem;
        max-height: 9rem;
    }
    /*  */
    /* NAV */
    /*  */
    .nav-item {
        width: 51px;
        padding: 4px 0 4px 0;
    }

    .nav-item p {
        display: none;
    }
    .nav-icon {
        max-width: 24px;
    }

    /*  */
    /* ACCUEIL */
    /*  */
    #accueil {
        height: 100vh;
        background-attachment: fixed;
    }
    .sur-mon {
        padding-right: 12px;
    }
    #accueil svg {
        max-width: 24px;
        width: 100%;
    }

    /*  */
    /* A PROPOS */
    /*  */
    #a-propos {
        padding: 64px 0;
    }
    #a-propos .pre-h2 {
        max-width: 24px;
        max-height: 24px;
    }
    .section-h2 {
        margin: 0 16px;
    }
    .section-content {
        margin: 48px 16px 0 16px;
    }
    .card {
        border-radius: 32px;
    }
    
    /*  */
    /* COMPETENCES */
    /*  */
    #competences {
        padding: 64px 0;
    }
    #competences .pre-h2 {
        width: 24px;
        height: 24px;
    }
    .ajust-text-ae {
        font-size: 1.1rem;
    }
    .ajust-text-pr {
        font-size: .99rem;
    }

    /*  */
    /* PORTFOLIO */
    /*  */

    #portfolio {
        padding: 64px 0;
    }
    #portfolio .pre-h2 {
        width: 24px;
        height: 24px;
    }

    /*  */
    /* CONTACT */
    /*  */

    #contact {
        padding: 64px 0 0 0;
    }
    #contact .pre-h2 {
        width: 24px;
        height: 24px;
    }
    #contact .section-content {
        padding: 32px 16px;
    }
    .card-contact {
        min-width: 5rem;
        min-height: 5rem;
        border-radius: 24px;
    }
    .contact-icon{
        width: 32px;
        height: 32px;
    }
    .reseaux-content {
        border-radius: 16px;
        padding: 16px;
    }
    .form-content {
        border-radius: 16px;
        padding: 16px;
    }

    /*  */
    /* FOOTER */
    /*  */
    footer {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}


/* ------------ */
/* ------------ */
/* ------TABLET------ */
/* ------------ */
/* ------------ */
@media (min-width: 577px) and (max-width: 991px) {
    html {
        font-size: 14px;
    }

    .h1 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 3.75rem;
    }

    .h2 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 2.1rem;
    }

    .h3 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 2rem;
    }

    .h4 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.25rem;
    }

    .h5 {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.125rem;
    }

    .hero-text {
        font-family: 'Noto Sans', sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 2rem;
    }

    .hero-text-big {
        font-family: 'Noto Sans Display', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 3.53rem;
    }

    .card-a-propos, .card-competences {
        min-width: 10rem;
        max-width: 10rem;
        min-height: 10rem;
        max-height: 10rem;
    }
    /*  */
    /* NAV */
    /*  */
    .nav-item {
        width: 80px;
        padding: 6px 0 6px 0;
    }
    .nav-item p {
        display: none;
    }
    .nav-icon {
        max-width: 32px;
    }

    /*  */
    /* ACCUEIL */
    /*  */
    #accueil svg {
        max-width: 28px;
    }

    /*  */
    /* A PROPOS */
    /*  */
    #a-propos {
        padding: 64px 0;
    }
    #a-propos .pre-h2 {
        max-width: 24px;
        max-height: 24px;
    }
    .section-h2 {
        margin: 0 32px;
    }
    .section-content {
        margin: 48px 32px 0 32px;
    }
    .card {
        border-radius: 32px;
    }
    
    /*  */
    /* COMPETENCES */
    /*  */
    #competences {
        padding: 64px 0;
    }
    #competences .pre-h2 {
        width: 24px;
        height: 24px;
    }
    .ajust-text-ae {
        font-size: 1.1rem;
    }
    .ajust-text-pr {
        font-size: .99rem;
    }

    /*  */
    /* PORTFOLIO */
    /*  */

    #portfolio {
        padding: 64px 0;
    }
    #portfolio .pre-h2 {
        width: 24px;
        height: 24px;
    }

    /*  */
    /* CONTACT */
    /*  */

    #contact {
        padding: 64px 0 0 0;
    }
    #contact .pre-h2 {
        width: 24px;
        height: 24px;
    }
    #contact .section-content {
        padding: 32px 16px;
    }
    .card-contact {
        min-width: 8rem;
        min-height: 8rem;
        border-radius: 36px;
    }
    .contact-icon{
        width: 56px;
        height: 56px;
    }
    .reseaux-content {
        border-radius: 16px;
        padding: 16px;
    }
    .form-content {
        border-radius: 16px;
        padding: 16px;
    }

    /*  */
    /* FOOTER */
    /*  */
    footer {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

/*  */
/*  */
/* MENTIONS LEGALES */
/*  */
/*  */

.title-mentions {
    margin-top: 150px;
}

/*  */
/*  */
/* POLITIQUE DE CONFIDENTIALITE */
/*  */
/*  */

.title-politique {
    margin-top: 150px;
}

/* Cacher le badge reCAPTCHA v3 */
.grecaptcha-badge {
    visibility: hidden;
}