/* =====================================================
   MAK3D
   Laboratoire de création numérique
   STYLE PRINCIPAL
   Version propre 2026
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root{

    --bleu:#7396FE;
    --orange:#FF7A4D;
    --vert:#79B59F;

    --texte:#303030;
    --fond:#ffffff;

    --gris:#f5f6f8;

    --bordure:rgba(0,0,0,.12);

    --ombre:
    0 15px 40px rgba(0,0,0,.10);

}



/* =====================================================
   RESET
===================================================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;


    color:var(--texte);

    line-height:1.6;

    overflow-x:hidden;


    background:

    linear-gradient(
        180deg,
        #ffffff,
        #f3f5f8
    );


}



/* =====================================================
   FOND TECHNIQUE MAK3D
===================================================== */


body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;


    background-image:

    linear-gradient(
        rgba(115,150,254,.06) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(115,150,254,.06) 1px,
        transparent 1px
    );


    background-size:

    60px 60px;


}



/* =====================================================
   HEADER
   MENU INDEPENDANT
===================================================== */


header{

    width:100%;

    position:relative;


    display:flex;

    align-items:center;

    justify-content:space-between;


    gap:30px;


    padding:

    15px clamp(20px,5vw,80px);


    background:white;


    border-bottom:

    1px solid var(--bordure);


    box-shadow:

    0 10px 30px rgba(0,0,0,.06);



}



/* =====================================================
   LOGO
===================================================== */


.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}



.logo img{

    width:150px;

    height:auto;

    display:block;

    transition:.3s;

}



.logo img:hover{

    transform:scale(1.05);

}





/* =====================================================
   MENU
===================================================== */


nav#menu{


    flex:1;


    display:flex;


    justify-content:flex-end;


    align-items:center;


    flex-wrap:wrap;


    gap:

    12px 25px;


}



nav#menu a{


    text-decoration:none;


    color:#333;


    font-size:15px;


    font-weight:500;


    white-space:nowrap;


    transition:.3s;


}



nav#menu a:hover{

    color:var(--orange);

}





/* =====================================================
   MENU MOBILE
===================================================== */


.menu-toggle{


    display:none;


    border:0;

    background:none;

    cursor:pointer;


}



.menu-toggle span{


    display:block;


    width:30px;


    height:3px;


    margin:6px;


    background:#333;


}





/* =====================================================
   HERO
===================================================== */


.hero{


    min-height:90vh;


    padding:

    70px clamp(20px,8vw,120px);


    display:grid;


    grid-template-columns:

    1fr 1fr;


    align-items:center;


    gap:50px;


}



.intro h1{


    font-size:

    clamp(40px,6vw,80px);


    line-height:1.1;


    font-weight:800;


}



.intro h2{


    font-size:

    clamp(28px,4vw,55px);


    color:#222;


    margin-bottom:25px;


}



.intro p{


    max-width:750px;


    font-size:

    clamp(17px,2vw,22px);


}





/* =====================================================
   BOUTON
===================================================== */


.bouton{


    display:inline-block;


    margin-top:35px;


    padding:

    14px 38px;


    border-radius:50px;


    color:white;


    text-decoration:none;


    background:

    linear-gradient(
        45deg,
        var(--orange),
        var(--bleu)
    );


    transition:.3s;


}



.bouton:hover{


    transform:

    translateY(-5px);


}





/* =====================================================
   SCENE 3D
===================================================== */


#scene3D{


    height:

    min(65vh,600px);


    display:flex;


    justify-content:center;


    align-items:center;


}



#scene3D canvas{


    max-width:100%;


}





/* =====================================================
   SECTIONS
===================================================== */


section{


    padding:

    90px clamp(20px,8vw,120px);


}



section h2{


    font-size:

    clamp(32px,5vw,55px);


    margin-bottom:40px;


    color:#222;


}



section p{


    max-width:900px;


    font-size:20px;


}





/* =====================================================
   CARTES
===================================================== */


.cartes{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(250px,1fr)
    );


    gap:35px;


}



article{


    background:

    rgba(255,255,255,.9);


    border:

    1px solid var(--bordure);


    border-radius:25px;


    padding:35px;


    box-shadow:var(--ombre);


    transition:.35s;


}



article:hover{


    transform:

    translateY(-10px);


    border-color:

    var(--bleu);


}



article h3{


    color:

    var(--orange);


    margin-bottom:15px;


}





/* =====================================================
   GALERIE
===================================================== */


.galerie{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(220px,1fr)
    );


    gap:30px;


}



.galerie div{


    height:230px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:white;


    border:

    1px solid var(--bordure);


    border-radius:25px;


    transition:.3s;


}



.galerie div:hover{


    transform:scale(1.04);


}





/* =====================================================
   FOOTER
===================================================== */


footer{


    padding:50px 20px;


    text-align:center;


    color:#777;


}



/* Facebook */


.social-facebook{


    display:inline-flex;


    align-items:center;


    gap:10px;


    margin-top:25px;


    padding:

    10px 22px;


    color:white;


    text-decoration:none;


    border-radius:50px;


    font-size:14px;


    font-weight:600;


    background:

    linear-gradient(
        135deg,
        var(--bleu),
        var(--orange)
    );


    transition:.3s;


}



.social-facebook svg{


    width:20px;

    height:20px;


}



.social-facebook:hover{


    transform:

    translateY(-4px);


}





/* =====================================================
   FLECHE RETOUR HAUT
===================================================== */


#top{


    position:fixed;


    right:25px;


    bottom:25px;


    width:45px;


    height:45px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        var(--bleu),
        var(--orange)
    );


    color:white;


    text-decoration:none;


    font-size:22px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.2);


}





/* =====================================================
   TABLETTE
===================================================== */


@media(max-width:1200px){


header{

    flex-wrap:wrap;

}



nav#menu{


    width:100%;

    justify-content:center;


}



}





/* =====================================================
   MOBILE
===================================================== */


@media(max-width:900px){



header{


    flex-wrap:nowrap;


}



.menu-toggle{


    display:block;


}



nav#menu{


    position:absolute;


    top:80px;


    right:20px;


    width:260px;


    padding:25px;


    flex-direction:column;


    align-items:flex-start;


    background:white;


    border-radius:20px;


    box-shadow:var(--ombre);


    opacity:0;


    visibility:hidden;


    transform:translateY(-15px);


    transition:.3s;


}



nav#menu.active{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}



.hero{


    grid-template-columns:1fr;


    text-align:center;


}



}



@media(max-width:600px){



.logo img{


    width:110px;


}



section{


    text-align:center;


}



.cartes,


.galerie{


    grid-template-columns:1fr;


}



}