@import "/style/design-systeme.css";
:root {
    --text-para: #e5e5e5;
    --main-color: #2a6bd2;
    --bg-colo-article: rgba(119, 162, 231, 0.2);
    --card-blur-morph: #bfbfbf40 1px solid;;

    --bg-color-dark: #111111;
    --bg-color-menu: #232323;
    --text-color-menu: #ffff;
    --title-color: #151a1d;

    --primary-color: #2a6bd2;
    --primary-color-focus: rgba(42, 107, 210, 0.5);
    --primary-color-hover: #245dbd;
    --primary-color-disable: #6a80af;
    --primary-text-color-disable: rgb(155, 167, 198);

    --main-color--dark: #06376e;
    --3d-color: #1dbb13;
    --edit-color: #8f3cc7;
    --graph-color: #c96e23;
    --dev-color: #0090e2;


    --main-gardient: linear-gradient(to bottom right, #427fe1, #2acfd3);
    --video-gardient: linear-gradient(to bottom right, #8f3cc7, #da63ec);
    --design-gardient: linear-gradient(to bottom right, #c96e23, #f1bb33);
    --3d-gardient: linear-gradient(to bottom right, #1dbb13, #21701c);

    --bg-colo-card: rgba(119, 162, 231, 0.2);
    --card-blur-border: #bfbfbf40 1px solid;
    --card-shadow-color: 0 5px 15px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar {
    width: 10px;
    background: var(--main-color--dark);
}

::-webkit-scrollbar-thumb {
    border: solid 0 transparent;
    background: var(--main-color);
    border-radius: 10px;
}

* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.container-loading .loader{
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-to-load{
    display: none;
}

.container-load{
    animation: color 1.5s infinite ease-in-out;
}

.container-loading .loader img{
    display: flex;
    width: 100px;
    height: 100px;
}

@keyframes color {
    0%   { background: rgba(119, 162, 231, 0.2); }
    50%  { background: #18191b; }
    100% { background: rgba(119, 162, 231, 0.2); }
}

body {
    background-color: var(--bg-color-dark);
    justify-items: center;
}

main {
    display: grid;
    width: 100%;
}

.top-btn{
    position: fixed;
    z-index: 10;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
}
@media (max-width: 1100px) {
    .top-btn{
        bottom: 10px;
        right: 10px;
    }
}


/*----header all page----*/

header {
    transition: height 0.3s ease-in-out;
    position: fixed;
    height: 10vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(19,19,19,0.6) 100%);
}

header .bg-header {
    transition: top 0.3s ease-in-out;
    top: -100px;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 35, 35, 0.60);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

header ul {
    padding-inline-start: 0;
    z-index: 1;
}

header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1;
}

header .logo .icon {
    margin: 13px;
    width: 50px;
    height: 50px;
    background-size: cover;
    background-image: url("https://cdn.discordapp.com/emojis/1099439031697293374.webp?size=96&quality=lossless");
}

header .logo span {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color-menu);
}

header .navbar {
    display: flex;
    list-style: none;
    padding-right: 100px;
}

header .navbar a {
    color: var(--text-color-menu);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 5px 0;
    margin: 0 30px;
    text-decoration: none;
}

header .navbar .drop-menu-active{
    margin-top: 16px;
    overflow: hidden;
    position: absolute;
    width: max-content;
    height: max-content;
}

header .navbar .drop-menu-active div {
    background-color: rgb(35, 35, 35, 0.60);
    backdrop-filter: blur(10px);
    border-radius: 0 0 10px 10px;
    flex-direction: column;
    display: flex;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, display 0.1s ease-in-out;
}
header .navbar .drop-menu .test i{
    color: #fff;
    transition: transform 0.3s ease-in-out;
}
header .navbar .drop-menu .test a{
    margin: 0 10px 0 30px ;
}

header .navbar a:hover {
    color: var(--main-color);
    transition: all 0.20s ease-in;
}

header .navbar a.active {
    color: var(--main-color);
}

header .main a {
    margin-right: 25px;
    margin-left: 10px;
    color: var(--text-color-menu);
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
}


header .user i {
    color: var(--main-color);
    font-size: 40px;
    margin-right: 13px;
}

header .main a:hover {
    color: var(--main-color);
    transition: all 0.20s ease-in;
}

header #menu-icon {
    font-size: 35px;
    color: var(--main-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}









/* --------- FOOTER ELEMENT --------- */









footer a {
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 5px;
}

footer a:hover {
    color: var(--main-color);
}

footer .mail {
    text-decoration-line: none;
}

footer .mail:hover {
    text-decoration-line: underline;
}

footer i {
    margin: 10px;
    color: #ffffff;
    font-size: 1.5rem;
}

footer i:hover {
    cursor: pointer;
    color: var(--main-color);
}

footer .contact {
    display: grid;
    align-content: start;
    text-align: start;
}

.about-site {
    width: 100%;
    text-align: start;
}

.footer-tow-title {
    justify-content: space-between;
    display: flex;
    width: 800px;
}

footer hr {
    width: 80%;
    margin: 10px auto 5px auto;
}

footer {
    position: relative;
    top: 0;
    display: grid;
    padding: 20px;
    width: 100%;
    background-color: var(--bg-color-menu);
    height: 30vh;
    justify-content: center;
    text-align: center;
}

footer h2, footer p {
    color: #ffffff;
}

footer h2 {
    margin-bottom: 10px;
    margin-top: 10px;
}

.bull1 {
    background-color: #3c74c7;
    width: 40rem;
    height: 40rem;
    border-radius: 100%;
    right: 10%;
    top: -30%;
    position: relative;
    filter: blur(110px);
    opacity: 40%;
}

.bull2 {
    background-color: #18306e;
    position: relative;
    width: 65rem;
    height: 65rem;
    border-radius: 100%;
    right: -80%;
    top: -120%;
    filter: blur(110px);
    opacity: 60%;
}

.bull3 {
    background-color: #2569c0;
    width: 65rem;
    height: 50rem;
    border-radius: 100%;
    right: -30%;
    top: -180%;
    position: relative;
    filter: blur(180px);
    opacity: 50%;
}

.bull4 {
    background-color: #18306e;
    width: 23rem;
    height: 23rem;
    border-radius: 100%;
    right: -20%;
    top: -280%;
    position: relative;
    filter: blur(180px);
    opacity: 100%;
}

.bull5 {
    background-color: #2569c0;
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    right: -55%;
    top: -940%;
    position: relative;
    filter: blur(120px);
    opacity: 100%;
}

.bull6 {
    background-color: #ce32de;
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    right: -15%;
    top: -300%;
    position: relative;
    filter: blur(100px);
    opacity: 70%;
}

.bull7 {
    background-color: #8f3cc7;
    width: 25rem;
    height: 25rem;
    border-radius: 100%;
    right: -55%;
    top: -200%;
    position: relative;
    filter: blur(130px);
    opacity: 80%;
}

.bull8 {
    background-color: #c96e23;
    width: 25rem;
    height: 30rem;
    border-radius: 100%;
    right: -20%;
    top: -180%;
    position: relative;
    filter: blur(140px);
    opacity: 60%;
}

.bull9 {
    background-color: #f1b443;
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    right: -65%;
    top: -600%;
    position: relative;
    filter: blur(100px);
    opacity: 80%;
}

.bull10 {
    background-color: #3c74c7;
    width: 20rem;
    height: 20rem;
    border-radius: 100%;
    right: -65%;
    top: -320%;
    position: relative;
    filter: blur(100px);
    opacity: 80%;
}

.bull11 {
    background-color: #2569c0;
    width: 15rem;
    height: 15rem;
    border-radius: 100%;
    right: -40%;
    top: -340%;
    position: relative;
    filter: blur(90px);
    opacity: 90%;
}

.bull12 {
    background-color: #2569c0;
    width: 15rem;
    height: 11rem;
    border-radius: 100%;
    right: -20%;
    top: -700%;
    position: relative;
    filter: blur(90px);
    opacity: 90%;
}

.bull13 {
    background-color: #1dbb13;
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    right: -40%;
    top: 270%;
    position: relative;
    filter: blur(60px);
    opacity: 60%;
}

.bull14 {
    background-color: #1dbb13;
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    right: -75%;
    top: -50%;
    position: relative;
    filter: blur(90px);
    opacity: 90%;
}

.bull15 {
    background-color: #1dbb13;
    width: 9rem;
    height: 9rem;
    border-radius: 100%;
    right: -10%;
    top: -300%;
    position: relative;
    filter: blur(90px);
    opacity: 90%;
}

.bull16 {
    background-color: #1dbb13;
    width: 11rem;
    height: 11rem;
    border-radius: 100%;
    right: -20%;
    top: -100%;
    position: relative;
    filter: blur(120px);
    opacity: 90%;
}

.bg-bull {
    display: grid;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 6670px;
    width: 100%;
    z-index: -10000;
}
@media (max-width: 1100px) {
    .bg-bull {
        height: 8100px;
    }
}
@media (max-width: 700px) {
    .bg-bull {
        height: 8400px;
    }
}
@media (max-width: 400px) {
    .bg-bull {
        height: 9890px;
    }
}

.bg-bull-projet {
    display: grid;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 120vh;
    width: 100%;
    z-index: -10000;
}

.bull1-1 {
    background-color: #8f3cc7;
    width: 25rem;
    height: 25rem;
    border-radius: 100%;
    top: 400px;
    right: -1020px;
    position: relative;
    filter: blur(130px);
    opacity: 80%;
}

a {
    text-decoration: none;
}

/*----Section video edit----*/
/*----Section Design Graohique----*/
/*----Section Programmation----*/
/*----Section Modélisation 3D----*/






/* --------- PAGE PROJET --------- */



.galerie .bento-grid .container-gallery:hover > .container img {
    transform: scale(1.1);
}

.projet iframe {
    border: none;
}



/* --------- PAGE GALERIE --------- */

/*----Section 1----*/
/*----Section 2----*/
/*----Section 4----*/




/* --------- PAGE CONTACT --------- */








.bull17 {
    background-color: #3c74c7;
    width: 40rem;
    height: 40rem;
    border-radius: 100%;
    right: -10%;
    top: -60%;
    position: relative;
    filter: blur(130px);
    opacity: 40%;
}

.bull18 {
    background-color: #18306e;
    position: relative;
    width: 50rem;
    height: 50rem;
    border-radius: 100%;
    right: 30%;
    top: -40%;
    filter: blur(130px);
    opacity: 60%;
}

.bull19 {
    background-color: #2569c0;
    width: 65rem;
    height: 50rem;
    border-radius: 100%;
    right: -30%;
    top: -140%;
    position: relative;
    filter: blur(180px);
    opacity: 50%;
}

.bull20 {
    background-color: #18306e;
    width: 23rem;
    height: 23rem;
    border-radius: 100%;
    right: -90%;
    top: -650%;
    position: relative;
    filter: blur(150px);
    opacity: 100%;
}
.bull-contact {
    display: grid;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -10000;
}
.contact-view .sec2{
    gap: 20px;
    display: grid;
    grid-template-columns: 400px 600px;
    justify-content: center;
    margin: 15vh 0 10vh 0;
}
.contact-view .sec2 .paragraphe{
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: var(--bg-colo-article);
    backdrop-filter: blur(10px);
    border: var(--card-blur-morph);
    font-size: 1.2rem;
    color: white;
}
.contact-view .sec2 .img{
    grid-row: 3/4;
    grid-column: 1/2;
}
.contact-view .sec2 .content{
    grid-column: 2;
    grid-row: 2/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: var(--bg-colo-article);
    backdrop-filter: blur(10px);
    border: var(--card-blur-morph);
    font-size: 1.2rem;
    color: white;
}
.contact-view .sec2 .content form input, .contact-view .sec2 .content form textarea{
    padding: 10px;
    border-radius: 10px;
    border: none;
    margin: 0 10px;
    width: 100%;
}
.contact-view .sec2 .content form .about .message label{
    margin: 10px 0;
}
.contact-view .sec2 .content form div{
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.contact-view .sec2 .content form .about{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.contact-view .sec2 .content form .message{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.contact-view .sec2 .title{
    display: flex;
    justify-content: center;
    grid-column: 1/3;
    grid-row: 1/2;
    font-size: 1.2rem;
    color: white;
}
.contact-view .sec2 .content form textarea, .contact-view .sec2 .content form input[type="submit"]{
    margin: 0;
}
.contact-view .sec2 .content .error-form{
    color: var(--graph-color);
}
.contact-view .sec2 .content .success-form{
    color: var(--3d-color);
}








/* --------- PAGE VEILLE INFO --------- */








.veille-info .sec1{
    margin: 160px auto 0 auto;
    color: #fff;
}
.veille-info .sec2 .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 55%;
    margin: 100px auto;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: var(--bg-colo-article);
    backdrop-filter: blur(10px);
    border: var(--card-blur-morph);
    font-size: 1.2rem;
    color: white;
}

.veille-info .sec2 .content p{
    width: 80%;
    margin-left: 20px;
    color: var(--text-para);
}
.veille-info .sec2 .content li{
    margin: 0  0 10px 40px;
    color: var(--text-para);
}
.veille-info .sec2 .content article{
    width: 80%;
    margin: 30px auto;
    display: flex;
    align-items: center;
}
.veille-info .sec2 .content article.left{
    flex-direction: row-reverse;
}
.veille-info .sec2 .content .left .content-article{
    margin-left: 20px;
}
.veille-info .sec2 .content article .img-content{
    width: 420px;
    height: 280px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0 auto 0 auto;
}
.veille-info .sec2 .content article .img-content img{
    height: 100%;
}
.veille-info .sec2 .content .end{
    font-size: 1rem;
    color: var(--text-para);
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}
.veille-info p{
    margin: 20px 20px;
}
.veille-info lu{
    margin-top: 20px;
}


@media (max-width: 1610px) {
    .projet .sec1 .title-sec{
        width: max-content;
    }
    .projet .sec1 .contenu{
        flex-direction: column;
    }
}
@media (max-width: 1390px) {
    .galerie section .grid {
        grid-template-columns: 360px 360px 360px;
    }
}
@media (max-width: 1280px) {
    header .navbar a {
        padding: 5px 0;
        margin: 0 20px;
    }
}
@media (min-width: 1100px){
    header .navbar .drop-menu .test:hover + .drop-menu-active div{
        transform: translateY(-0%);
    }
    header .navbar .drop-menu .test:hover i {
        transform: rotateZ(180deg);
    }

    header .navbar .drop-menu-active div:hover {
        transform: translateY(-0%);
    }
    .drop-menu-active:hover + header .navbar .drop-menu .test i {
        transform: rotateZ(180deg);
    }

}
@media (max-width: 1100px) {
    header{
        background-color: rgba(35, 35, 35, 0.60);
        backdrop-filter: blur(10px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        height: 100px;
    }

    header .bg-header{
        display: none;
    }

    header .navbar .drop-menu .test{
        display: flex;
        align-items: center;
    }

    header .navbar .drop-menu .test i:hover{
        transform: rotateZ(180deg);
    }

    header .navbar .drop-menu .test i{
        margin-left: 40px;
    }


    header .navbar .drop-menu .drop-menu-active{
        height: 0;
        position: static;
        transition: height 0.3s ease-in-out;
        margin: 0;
    }

    header .navbar .drop-menu .drop-menu-active div{
        transform: none;
        margin-left: 30px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: none;
    }

    header .navbar .drop-menu .test:hover + .drop-menu-active{
        height: 120px;
    }

    header #menu-icon {
        display: block;
    }

    header .navbar {
        padding: 20px 0;
        position: absolute;
        gap: 10px;
        top: 100%;
        height: max-content;
        right: -100%;
        width: 50vw;
        background: var(--main-color);
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 0 0 0 10px;
        transition: all .50s ease;
    }

    header .navbar a {
        display: block;
        margin: 12px 0;
        padding: 0 25px;
        transition: all .50s ease;
    }

    header .navbar a.active {
        color: var(--title-color);
    }

    header .navbar a:hover {
        color: var(--title-color);
        transform: translateX(7px);
    }

    header .navbar.open {
        right: 0;
        display: flex;
    }
}
@media (max-width: 1090px) {
    .galerie section .grid {
        grid-template-columns: 320px;
    }
}
@media (max-width: 820px) {
    footer {
        height: 400px;
    }

    .footer-tow-title {
        width: 100%;
        display: grid;
    }

    .about-site {
        width: 100%;
        text-align: start;
        justify-items: center;
    }
}
@media (max-width: 800px) {
    header {
        width: 100%;
        transition: .2s;
    }

    header .navbar a {
        padding: 5px 0;
        margin: 0 20px;
    }
}
@media (max-width: 710px){
    .projet .sec1 .contenu .txt{
        width: calc(100% - 20px);
    }
    .projet .bento-grid {
        grid-template-columns: repeat(2, calc(50% - 5px));
    }
    .projet .bento-grid .c-1 { grid-column: span 2; grid-row: span 2;}
    .projet .bento-grid .c-2 { grid-column: span 1; grid-row: span 1;}
    .projet .bento-grid .c-3 { grid-column: span 1; grid-row: span 1;}
    .projet .bento-grid .c-4 { grid-column: span 2; grid-row: span 1;}
    .projet .bento-grid .c-5 { grid-column: span 1; grid-row: span 2;}
    .projet .bento-grid .c-6 { grid-column: span 1; grid-row: span 2;}
    .projet .bento-grid .c-7 { grid-column: span 1; grid-row: span 1;}
    .projet .bento-grid .c-8 { grid-column: span 1; grid-row: span 1;}
    .projet .bento-grid .c-9 { grid-column: span 1; grid-row: span 2;}
    .projet .bento-grid .c-10 { grid-column: span 1; grid-row: span 1;}
    .projet .sec1{
        padding: 50px 0;
    }
    .projet .sec1 .title-sec{
        margin-left: 10px;
    }
}
@media (max-width: 400px) {
    footer {
        height: 400px;
    }

    .footer-tow-title {
        width: 100%;
        display: grid;
    }

    .about-site {
        width: 100%;
        text-align: start;
        justify-items: center;
    }
}


@media (max-width: 1400px) {
    .veille-info .sec2 .content{
        width: 90%;
    }
    .veille-info .sec2 .content article{
        flex-direction: column !important;
    }
}
@media (max-width: 600px) {
    .veille-info .sec2 .content article .img-content{
        width: 300px;
        height: 160px;
    }
}

.veille-info .sec2 .left, .veille-info .sec2 .right{
    width: max-content;
}





/* --------- PAGE PORTFOLIO --------- */





@keyframes scrollText {
    0%, 12.5% {
        transform: translateY(0);
    }
    14.5%, 37.5% {
        transform: translateY(-30px);
    }
    39.5%, 62.5% {
        transform: translateY(-60px);
    }
    64.5%, 81.25% {
        transform: translateY(-90px);
    }
    83.25%, 100% {
        transform: translateY(-120px);
    }
}
.portfolio{

    .header-sec .min_logo {
        width: 70px;
        margin: 20px;
        border-radius: 50px;
        display: none;
    }
    .header-sec{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    @media (max-width: 1100px) {
        .header-sec .min_logo {
            display: block;
        }
    }

    .diapo .icon-diapo:hover{
        cursor: pointer;
        transform: scale(1.1);
        color: var(--primary-color);
    }
    .diapo .icon-diapo:active{
        transform: scale(0.8);
    }
    .diapo .icon-diapo{
        margin: auto;
        font-size: 2rem;
        transition: transform 0.2s ease-in-out;
    }
    .diapo article{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .diapo {
        position: relative;
        justify-content: space-between;
        display: flex;
        width: 800px;
    }
    .diapo .content {
        overflow: hidden;
        justify-content: start;
    }
    .diapo .content .content, .slide {
        width: 680px;
        display: flex;
        transition: all 0.5s ease-in-out;
    }
    .diapo .content .img-content{
        width: 680px;
        height: 382px;
    }
    .diapo .content .video{
        width: 680px;
        height: 382px;
    }
    .diapo .content .video iframe{
        border: none;
        width: inherit;
        height: inherit;
    }
    .diapo .article-content {
        position: absolute;
        transition: transform 0.2s ease-out, right 0.2s ease-out;
        width: 600px;
        overflow: hidden;
        padding: 10px 20px;
        z-index: 1;
    }
    .diapo .article-content .slide-article {
        width: max-content;
        display: flex;
        transition: transform 0.5s ease-out;
    }
    .diapo .article-content article {
        height: max-content;
        transition: all 0.2s ease-out;
        width: 560px;
        margin-right: 40px;
        border: var(--card-blur-morph);
    }
    .diapo .content .slide{
        width: 680px;
        height: 382px;
    }
    .diapo .article-phone{
        display: none;
    }
    .diapo .icon-diapo-phone{
        transition: transform 0.2s ease-in-out;
    }
    .diapo .icon-diapo-phone:hover{
        cursor: pointer;
        transform: scale(1.1);
        color: var(--primary-color);
    }
    .diapo .icon-diapo-phone:active{
        transform: scale(0.8);
    }
    .diapo .article-content-phone .slide-article {
        width: max-content;
        display: flex;
        transition: transform 0.5s ease-out;
    }
    .diapo .article-content-phone article {
        height: max-content;
        transition: all 0.2s ease-out;
        width:74vw;
        margin-right: 5vw;
        border: var(--card-blur-morph);
    }
    .diapo .article-content-phone {
        transition: transform 0.2s ease-out, right 0.2s ease-out;
        overflow: hidden;
        width: 80vw;
        padding: 10px 20px;
    }
    .diapo .content .img-content img {
        width: inherit;
    }
    @media (max-width: 1440px) {
        .diapo .content .slide{
            width: 580px;
            height: 326px;
        }
        .diapo .content .img-content{
            width: 580px;
            height: 326px;
        }
        .diapo .content .video{
            width: 580px;
            height: 326px;
        }
    }
    @media (max-width: 1100px) {
        .diapo{
            width: auto;
            flex-direction: column-reverse;
        }
        .diapo .icon-diapo{
            display: none;
        }
        .diapo .content{
            width: 100%;
            margin: 20px 0;
        }
        .diapo .content .slide{
            width: 100vw;
        }
        .diapo .content .img-content{
            display: flex;
            align-items: center;
            width: 100vw;
        }
        .diapo .content .video{
            display: flex;
            align-items: center;
            width: 100vw;
        }
        .diapo .article-content{
            display: none;
        }
        .diapo .article-phone{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
    }

/* --------- SECTION MOI --------- */

    .section-moi{
        height: max-content;
        position: relative;
        display: grid;
        align-items: center;
        justify-items: center;
        padding: 100px 0 0 0;
        width: 100%;
    }
    .section-moi .blur-card{
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 25px;
        height: 27rem;
        width: 60rem;
    }
    .section-moi .blur-card .title-info{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .section-moi .blur-card .title-h1{
        line-height: 50px;
    }
    #moi-logo {
        border-radius: 200px;
        height: 20rem;
        transition: height 0.3s ease-in-out;
    }
    .section-moi .card {
        justify-content: space-between;
        display: grid;
        grid-template: 2;
        grid-template-columns: 25% 25% 25% 25%;

        margin: 50px 0;
    }
    .card a {
        margin: 20px;
        border-radius: 10px;
        overflow: hidden;
        width: 330px;
        height: 220px;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 0.30s ease-in;
    }
    .card a h3 {
        position: relative;
        color: white;
        display: flex;
        justify-content: center;
        top: 250px;
        transition: all 0.35s ease-out;
        font-size: 1.7rem;
    }
    .card a:hover h3 {
        top: 100px;
        transition: all 0.35s ease-out;
    }
    .video-edit-box:hover {
        background-image: linear-gradient(to bottom, transparent 5%, rgba(143, 60, 199, 0.6) 75%), url("https://images.pexels.com/photos/257904/pexels-photo-257904.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .video-edit-box {
        background-image: url("https://images.pexels.com/photos/257904/pexels-photo-257904.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .graphisme-box:hover {
        background-image: linear-gradient(to bottom, transparent 5%, rgba(201, 110, 35, 0.6) 75%), url("https://images.pexels.com/photos/8761047/pexels-photo-8761047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .graphisme-box {
        background-image: url("https://images.pexels.com/photos/8761047/pexels-photo-8761047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .prog-box:hover {
        background-image: linear-gradient(to bottom, transparent 5%, rgba(0, 144, 226, 0.60) 75%), url("https://images.pexels.com/photos/270404/pexels-photo-270404.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .prog-box {
        background-image: url("https://images.pexels.com/photos/270404/pexels-photo-270404.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .modelisation-box:hover {
        background-image: linear-gradient(to bottom, transparent 5%, rgba(29, 187, 19, 0.75) 75%), url("https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    }
    .modelisation-box {
        background-image: url("https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
        background-position: center;
    }
    .scrolling-text-container {
        overflow: hidden;
        height: 30px;
        position: relative;
    }
    .scrolling-text {
        position: relative;
        top: 0;
        left: 0;
        animation: scrollText 12s linear infinite;
    }
    .scrolling-text span {
        display: block;
        height: 30px;
        line-height: 30px;
    }
    .btn-info .btn-primary, .btn-info .btn-secondary{
        margin: 0;
    }
    .btn-info {
        display: flex;
        gap: 10px;
    }
    @media (max-width: 1100px) {
        .section-moi .blur-card{
            width: 100%;
            border-radius: 0 0 10px 10px;
        }
        .card {
            grid-template-columns: 50% 50% !important;
        }
    }
    @media (max-width: 1500px) {
        .card a {
            width: 280px;
            height: 187px;
        }
    }
    @media (max-width: 1300px) {
        .card a {
            width: 230px;
            height: 154px;
        }
    }
    @media (max-width: 820px) {
        #moi-logo{
            height: 15rem;
        }
    }
    @media (max-width: 680px) {
        .title-info .title-h1{
            text-align: center;
        }
        .section-moi .blur-card{
            display: flex;
            flex-direction: column;
            height: max-content;
        }
        .section-moi .blur-card .title-info{
            margin-left: 0;
            margin-top: 20px;
        }
        .btn-info{
            justify-content: center;
        }
    }
    @media (max-width: 550px) {
        .card a {
            margin: 10px;
            width: 170px;
            height: 114px;
        }
    }
    @media (max-width: 400px) {
        .card {
            display: none !important;
        }
    }

/* --------- SECTION ABOUT ME --------- */

    .section-about-me .main-card .grid .big-icon{
        font-size: 3rem;
    }
    .section-about-me .main-card .grid ul{
        grid-template-columns: 20% 20% 20% 20% 20%;
        grid-row-gap: 20px;
        display: grid;
    }
    .section-about-me .box{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px 0;
    }
    .section-about-me .box .larg_logo{
        width: 400px;
    }
    .section-about-me .box .about-me{
        gap: 20px;
        display: flex;
        flex-direction: column;
        width: 700px;
    }
    .section-about-me .box .about-me .blur-card{
        width: 100%;
    }
    .section-about-me .box .title-h3{
        margin: 20px 0;
    }
    .diplome {
        margin: auto;
        display: grid;
        grid-template-columns: 260px 260px;
        gap: 20px;
    }
    .diplome article {
        margin: 15px auto 15px auto;
        padding: 20px;
        background-color: rgba(119, 162, 231, 0.2);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        backdrop-filter: blur(10px);
        border: var(--card-blur-morph);
    }
    .diplome article .title {
        background-image: linear-gradient(to bottom right, #427fe1, rgba(42, 207, 211, 0));
        background-color: #2acfd3;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 1.2rem;
        transition: all 0.30s ease-out;
    }
    .diplome article .title:hover {
        background-color: var(--main-color);
        cursor: default;
    }
    .diplome article .title i {
        margin-right: 10px;
    }
    .diplome article li {
        margin-left: 20px;
        margin-bottom: 10px;
    }
    @media (max-width: 1440px) {
        .section-about-me .box .about-me{
            width: 100%;
        }
        .section-about-me .box .larg_logo{
            width: 300px;
        }
    }
    @media (max-width: 1100px) {
        .section-about-me .box .larg_logo{
            display: none;
        }
        .section-about-me .main-card{
            border-radius: 0;
        }
        .section-about-me .box{
            width: 80%;
            margin: auto;
        }
    }
    @media (max-width: 820px) {
        .section-about-me .main-card .grid ul {
            grid-template-columns: 33% 33% 33%;
        }
    }
    @media (max-width: 800px) {
        .section-about-me .box{
            width: 90%;
            margin: auto;
        }
        .section-about-me .box .diplome{
            justify-content: center;
        }
    }
    @media (max-width: 600px) {
        .section-about-me .box .diplome {
            grid-template-columns: 300px;
        }
    }
    @media (max-width: 400px) {
        .section-about-me .main-card .grid ul {
            grid-template-columns: none;
        }
    }

/* --------- SECTION PROGRAMMATION --------- */

    .section-prog .box-prog .left{
        width: 30%;
    }
    .section-prog .box-prog .left .blur-card{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .section-prog .box-prog .left .btn-primary{
        margin-top: 50px;
        margin-left: 0;
    }
    .section-prog .box-prog .left .btn-secondary{
        margin-left: 0;
    }
    .section-prog .box-prog{
        padding: 50px 0;
    }
    .section-prog .box-prog .diapo .content .img-content img {
        width: inherit;
    }
    .section-prog .box-prog .diapo .article-content {
        top: -160px;
        right: 200px;
    }
    .section-prog .box-prog .diapo .article-content:hover {
        right: 180px;
    }
    .section-prog .main-card img{
        width: 60px;
    }
    @media (max-width: 1440px) {
        .section-prog .box-prog .diapo .article-content{
            top: -200px;
            right: 50px;
        }
    }
    @media (max-width: 1100px) {
        .section-prog .box-prog{
            width: 80%;
            margin: auto;
            flex-direction: column;
        }
        .section-prog .box-prog .left{
            width: 100%;
        }
        .section-prog .main-card{
            border-radius: 0;
        }
    }
    @media (max-width: 500px) {
        
        .section-prog .main-card .grid ul{
            display: grid;
            grid-template-columns: 30% 30% 30%;
        }
    }

/* --------- SECTION DESIGN GRAPHIQUE --------- */

    .section-design .box-graph{
        flex-direction: row-reverse;
    }
    .section-design .box-graph .left{
        width: 30%;
    }
    .section-design .box-graph .left .blur-card{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .section-design .box-graph .left .btn-primary{
        margin-top: 50px;
        margin-left: 0;
    }
    .section-design .box-graph{
        padding: 50px 0;
    }
    .section-design .box-graph .diapo .article-content {
        top: -160px;
        right: -100px;
    }
    .section-design .box-graph .diapo .article-content:hover {
        right: -120px;
    }
    .section-design .design-card{
        width: 30vw;
    }
    .section-design .design-card img{
        width: 60px;
    }
    .section-design .box-graph  .left .btn-secondary {
        margin-left: 0;
    }
    @media (max-width: 1440px) {
        .section-design .box-graph .diapo .article-content{
            top: 420px;
            right: -285px;
        }
        .section-design .box-graph .diapo .article-content:hover {
            right: -305px;
        }
    }
    @media (max-width: 1100px) {
        .section-design .box-graph{
            width: 80%;
            margin: auto;
            flex-direction: column;
        }
        .section-design .box-graph .left{
            width: 100%;
        }
        .section-design .design-card{
            width: inherit;
            border-radius: 0;
        }
    }

    /* --------- SECTION VIDEO --------- */

    .section-video .box-video .left{
        width: 30%;
    }
    .section-video .box-video .left .blur-card{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .section-video .box-video .left .btn-primary{
        margin-top: 50px;
        margin-left: 0;
    }
    .section-video .box-video{
        padding: 50px 0;
    }
    .section-video .box-video .diapo .article-content {
        top: -160px;
        right: 200px;
    }
    .section-video .box-video .diapo .article-content:hover {
        right: 180px;
    }
    .section-video .video-card{
        width: 50vw;
    }
    .section-video .video-card img{
        width: 60px;
    }
    .section-video .box-video  .left .btn-secondary {
        margin-left: 0;
    }
    @media (max-width: 1440px) {
        .section-video .box-video .diapo .article-content{
            top: -200px;
            right: 50px;
        }
    }
    @media (max-width: 1100px) {
        .section-video .box-video{
            width: 80%;
            margin: auto;
            flex-direction: column;
        }
        .section-video .box-video .left{
            width: 100%;
        }
        .section-video .video-card{
            width: inherit;
            border-radius: 0;
        }
    }

    /* --------- SECTION 3D --------- */

    .section-3d .card-3d img{
        width: 60px;
    }
    .section-3d .card-3d ul li{
        width: max-content;
    }
    .section-3d .foot .blur-card{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 60%;
    }
    .section-3d .foot{
        display: flex;
        justify-content: space-around;
        width: 80%;
        margin: auto;
    }
    .section-3d .box-3d img{
        width: 100%;
    }
    .section-3d .box-3d{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: auto;
        padding: 50px 0;
        gap: 50px;
    }
    .section-3d .box-3d .blur-card{
        width: max-content;
        position: absolute;
        border: 3px dashed;
    }
    
    @media (max-width: 1100px) {
        .section-3d .box-3d{
            display: flex;
            flex-direction: column;
        }
        .section-3d .box-3d .blur-card{
            position: relative;
            width: initial;
        }
        .section-3d .foot .blur-card{
            width: 100%;
        }
        .section-3d .foot{
            display: flex;
            flex-direction: column;
            gap: 50px;
        }
    }
}





/* --------- PAGE GALERIE --------- */





.galerie{

    .grid-projet {
        justify-content: center;
        display: grid;
        grid-template-columns: 360px 360px 360px 360px;
    }
    .grid-projet .article {
        text-decoration: none;
        position: relative;
        margin: 20px 10px;
        width: 340px;
        height: 270px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
    .grid-projet .article .content i{
        position: relative;
        display: flex;
        justify-content: center;
        top: 55px;
        font-size: 4rem;
    }
    .grid-projet .article .content {
        width: 320px;
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 10px;
    }
    .grid-projet .article .content img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease-out;
    }
    .grid-projet .article div {
        margin: 0 auto 0 auto;
        border-radius: 10px;
        width: 320px;
        height: 180px;
    }
    .grid-projet .article .title-h4, .grid-projet .article .para-left {
        margin: 10px 0 0 10px;
    }
    .grid-projet .article:hover {
        background-color: var(--bg-color-menu);
    }
    .grid-projet .article:hover > .content img {
        transform: scale(1.1);
    }
    .grid-projet .article:hover > .content i {
        transform: scale(1.2);
    }
    .grid-projet .article .content i{
        transition: transform 0.2s ease-out;
    }
    @media (max-width: 1440px) {
        .grid-projet {
            grid-template-columns: 360px 360px 360px;
        }
    }
    @media (max-width: 1100px) {
        .grid-projet {
            grid-template-columns: 360px 360px;
        }
    }
    @media (max-width: 750px) {
        .grid-projet {
            grid-template-columns: 360px;
        }
    }

    /* --------- HERO HEADER --------- */

    .section-large{
        padding: 50px 0;
    }

    .hero-header{
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .hero-header .title{
        gap: 20px;
        width: max-content;
        display: flex;
        align-items: center;
        margin-top: 100px;
    }
    .hero-header .title .big-icon{
        font-size: 5rem;
    }
    @media (max-width: 1100px) {
        .hero-header{
            width: 60%;
        }
    }
    @media (max-width: 600px) {

        .hero-header .title{
            flex-direction: column;
            text-align: center;
        }
        .hero-header{
            width: 90%;
        }
    }
    @media (max-width: 600px) {

        .hero-header .title{
            width: inherit;
        }
    }

    /*--------- VIDEO PROJET --------- */

    .section-video .grid-projet .article .content i{
        color: #673986;
    }
    .section-video .grid-projet .article div {
        background-color: var(--edit-color);
    }

    /*--------- DESIGN PROJET --------- */

    .section-design .grid-projet .article .content i{
        color: #8c5a22;
    }
    .section-design .grid-projet .article div {
        background-color: var(--graph-color);
    }
    
    /*--------- DESIGN PROJET --------- */

    .section-dev .grid-projet .article .content i{
        color: #265c7a;
    }
    .section-dev .grid-projet .article div {
        background-color: var(--dev-color);
    }

    .end{
        display: flex;
        justify-content: center;
    }
    .end .btn-primary{
        width: max-content;
        margin: auto;
    }
}

/* --------- PAGE PARCOURS --------- */

.parcours{
    .hero-header{
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .hero-header .title{
        gap: 20px;
        width: max-content;
        display: flex;
        align-items: center;
        margin-top: 100px;
    }
    .hero-header .title .big-icon{
        font-size: 5rem;
    }
    @media (max-width: 1100px) {
        .hero-header{
            width: 60%;
        }
    }
    @media (max-width: 600px) {

        .hero-header .title{
            flex-direction: column;
            text-align: center;
        }
        .hero-header{
            width: 90%;
        }
    }
    @media (max-width: 600px) {

        .hero-header .title{
            width: inherit;
        }
    }
}






/*----Section 1----*/

.parcours .sec1 {
    display: flex;
    justify-content: center;
    padding: 100px;
}

.parcours .sec1 h1{
    font-size: 2.5rem;
    background: linear-gradient(to bottom right, #2a6bd2, #0facb0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.parcours .sec2 .part1 {
    display: flex;
    justify-content: center;
}
.parcours .sec2 .part1 svg {
    width: 450px;
    padding: 100px 0 20px 50px;
}
.parcours .sec2 .part1 img{
    height: 300px;
    margin-left: 20px;
}
.parcours .sec2 .part2 {
    display: flex;
    justify-content: center;
}
.parcours .sec2 .part2 svg {
    width: 450px;
    padding: 200px 0 20px 0;
}
.parcours .sec2 .part2 img{
    height: 300px;
    margin-right: 20px;
}





.projet{
    color: var(--text-para);
    
    .section-large{
        padding: 100px 20px;
    }

    .title-content{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .title-content .blur-card{
        position: absolute;
        top: 150px;
        z-index: 10;
        background-color: rgb(90 134 205 / 40%);
    }
    .title-content .blur-card .title-h1{
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6));
    }


    .banner-projet {
        display: flex;
        width: 100%;
        height: 400px;
        overflow: hidden;
        object-fit: cover;
        -webkit-mask: -webkit-linear-gradient(-90deg, black 30%, transparent 100%);
        justify-content: center;
        align-items: center;
    }
    
    .banner-projet img {
        width: 100%;
        filter: blur(15px);
    }

    
    .box{
        padding: 20px 0;
        display: flex;
    }
    .section-about .box .left{
        width: 40%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .section-about .box .left .title{
        margin-bottom: 10px;
    }
    .section-about .box .left .project-about li{
        margin-left: 10px;
    }
    .section-about .box .left .project-about h4{
        margin: 10px 0;
        font-size: 1.5rem;
    }
    .section-about .box .left .project-about a{
        color: var(--text-color-menu);
        text-decoration: underline;
        color: #fff;
        transition: color 0.2s ease-in-out;
    }
    .section-about .box .left .project-about a:hover{
        color: var(--primary-color);
    }
    .section-about .box .right{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .section-about .box .right .info{
        padding: 0 20px;
        gap: 20px;
        flex-wrap: wrap;
    }
    .section-about .box .right .info div{
        width: max-content;
        padding: 10px;    
    }
    .section-about .box .right .info p{
        pointer-events: none;
        font-size: 1.2rem;
        text-align: center;
        font-family: 'Fredoka', sans-serif;
    }
    .section-about .box .right .info .btn-primary{
        margin: 0;
    }
    .section-about .box .right .info .other {
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        background-color: #424242;
    }
    .section-about .box .right .skills .title{
        margin-bottom: 10px;
    }
    .section-about .box .right .skills{
        margin: 0 20px;
    }
    .section-about .box .right .skills .skills-list{
        flex-wrap: wrap;
        gap: 10px;
    }
    .section-about .box .right .video{
        padding: 0 20px;
    }


    .section-galerie .grid {
        gap: 10px;
        justify-content: flex-start;
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
    
    .section-galerie .grid img {
        object-fit: cover;
        width: 100%;
    }
    
    .section-galerie .grid .container {
        position: relative;
        margin: 20px 10px 20px 10px;
        width: 330px;
        height: 200px;
        display: flex;
        overflow: hidden;
        background-color: #18191b;
        border: 10px #18191b00 solid;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: row;
        align-content: center;
        transition: background 0.2s ease-in-out;
    }
    
    .section-galerie .grid .container:hover {
        border: 10px rgba(119, 162, 231, 0) solid;
        background-color: rgba(119, 162, 231, 0.2);
    }
    
    .popup-image {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(21, 26, 29, 0.8);
        width: 100%;
        height: 100%;
        z-index: 101;
        display: none;
        justify-content: center;
        cursor: pointer;
    }
    
    .popup-image span {
        position: absolute;
        top: 50px;
        right: 10px;
        font-size: 60px;
        font-weight: bolder;
        color: #fff;
    }
    
    .popup-image span:hover {
        color: var(--main-color);
    }
    
    .popup-image img {
        border-radius: 10px;
        transform: scale(60%, 60%);
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
        cursor: default;
    }





    .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 220px);
        grid-auto-rows: 150px;
        gap: 20px;
        padding: 0 20px;
    }
    
    .bento-grid .container-gallery .img-card {
        border-radius: calc(10px - 10px);
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease-out;
    }
    
    .bento-grid .c-1 { grid-column: span 2; grid-row: span 2;}
    .bento-grid .c-2 { grid-column: span 1; grid-row: span 2;}
    .bento-grid .c-3 { grid-column: span 1; grid-row: span 2;}
    .bento-grid .c-4 { grid-column: span 1; grid-row: span 1;}
    .bento-grid .c-5 { grid-column: span 1; grid-row: span 1;}
    .bento-grid .c-6 { grid-column: span 2; grid-row: span 2;}
    .bento-grid .c-7 { grid-column: span 2; grid-row: span 1;}
    .bento-grid .c-8 { grid-column: span 1; grid-row: span 1;}
    .bento-grid .c-9 { grid-column: span 2; grid-row: span 1;}
    .bento-grid .c-10 { grid-column: span 1; grid-row: span 1;}
    
    .bento-grid .container-gallery {
        position: relative;
        display: flex;
        overflow: hidden;
        border: 10px rgba(59, 91, 141, 0) solid;
        background-color: #18191b;
        border-radius: 10px;
        cursor: pointer;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: row;
        transition: background 0.2s ease-in-out;
    }
    
    .bento-grid .container-gallery:hover {
        border: 10px rgba(119, 162, 231, 0) solid;
        background-color: rgba(119, 162, 231, 0.2);
    }
    .section-btn{
        padding: 50px 20px;
    }
    .section-btn .content-btn{
        display: flex;
        justify-content: center;
    }
    .section-btn .content-btn a{
        margin: 0 30px;
        height: max-content;
    }
    @media (max-width: 1440px){
        .bento-grid {
            grid-template-columns: repeat(3, 220px);
        }
        .bento-grid .c-1 { grid-column: span 2; grid-row: span 2;}
        .bento-grid .c-2 { grid-column: span 1; grid-row: span 2;}
        .bento-grid .c-3 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-4 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-5 { grid-column: span 1; grid-row: span 2;}
        .bento-grid .c-6 { grid-column: span 2; grid-row: span 1;}
        .bento-grid .c-7 { grid-column: span 2; grid-row: span 1;}
        .bento-grid .c-8 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-9 { grid-column: span 2; grid-row: span 1;}
        .bento-grid .c-10 { grid-column: span 1; grid-row: span 1;}
    }
    @media (max-width: 1610px){
        .banner-projet img{
            top: -400px;
        }
    }
    @media (max-width: 1100px){
        .section-about .box .right .video iframe{
            width: 360px;
            height: 203px;
        }
        .title-content .blur-card{
            width: 80%;
        }
        .title-content .blur-card .title-h1{
            font-size: 2rem;
            text-align: center;
        }
        .section-about .box .right{
            width: inherit;
        }
        .banner-projet img{
            top: -300px;
        }
        .section-about .box .left{
            padding-left: 20px;
            width: 50%;
        }
        .bento-grid {
            grid-template-columns: repeat(2, calc(50% - 10px));
        }
        .bento-grid .c-1 { grid-column: span 2; grid-row: span 2;}
        .bento-grid .c-2 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-3 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-4 { grid-column: span 2; grid-row: span 1;}
        .bento-grid .c-5 { grid-column: span 1; grid-row: span 2;}
        .bento-grid .c-6 { grid-column: span 1; grid-row: span 2;}
        .bento-grid .c-7 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-8 { grid-column: span 1; grid-row: span 1;}
        .bento-grid .c-9 { grid-column: span 1; grid-row: span 2;}
        .bento-grid .c-10 { grid-column: span 1; grid-row: span 1;}

        .section-btn .content-btn a{
            margin: 0 10px;
            height: max-content;
        }
    }
    @media (max-width: 800px){
        .section-about .box .right .video iframe{
            width: 310px;
            height: 175px;
        }
    }
    @media (max-width: 660px){
        .section-about .box .right .video iframe {
            width: -webkit-fill-available;
            height: 250px;
        }
        .section-galerie .grid {
            justify-content: center;
        }
        .section-about .box{
            flex-direction: column;
        }
        .section-about .header-sec{
            padding: 0 20px;
        }
        .section-about .box .left{
            width: 100%;
            padding: 0 20px;
        }
        .section-about .box .right .info{
            padding: 20px;
        }
        .bento-grid {
            padding: 20px;
        }
    }
}

.contact-view {
    .section-large{
        padding: 100px 20px 50px 20px;
    }
    .section-large .title{
        justify-content: center;
        text-wrap-mode: wrap;
    }
    .title-h6{
        margin-top: 20px;
    }
    .sec2{
        margin: 5vh auto;
    }
    @media (max-width: 1200px){
        .section-large {
            padding: 100px 20px 20px 20px;
        }
        .section-large .title{
            width: 80%;
            margin: auto;
        }
        .sec2{
            width: 80%;
            margin: 3vh auto;
            display: flex;
            flex-direction: column-reverse;
        }
        .sec2 .img{
            display: none;
        }
    }
    @media (max-width: 700px){
        .sec2 .content form div {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
        }
        .sec2{
            margin: 20px auto;
            display: flex;
            flex-direction: column-reverse;
        }
    }
}