/* ======================================
   M&JP STUDIO - PAGE ACCUEIL
====================================== */


/* GENERAL */

.mjp-home {
    width:100%;
    overflow:hidden;
}


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

.mjp-hero {

    text-align:center;
    padding:90px 20px 70px;

}


.mjp-hero h1 {

    font-size:70px;
    font-weight:900;
    letter-spacing:3px;
    margin:0;

    background:linear-gradient(
        90deg,
        #00eaff,
        #9b00ff,
        #00eaff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}


.mjp-hero p {

    font-size:22px;
    color:#ddd;
    margin:25px 0 40px;

}



/* BOUTON PRINCIPAL */

.mjp-btn {

    display:inline-block;
    padding:15px 35px;

    border-radius:40px;

    background:#00d9ff;
    color:#000;

    font-weight:700;
    text-decoration:none;

    transition:.3s;

}


.mjp-btn:hover {

    transform:scale(1.08);

    box-shadow:
    0 0 20px #00d9ff;

}



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


.mjp-themes {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:35px;

    padding:40px;

}



.mjp-card {

    position:relative;

    background:#111;

    border-radius:25px;

    overflow:hidden;

    min-height:520px;

    transition:.4s;

}



.mjp-card:hover {

    transform:translateY(-15px);

}




/* IMAGE */


.mjp-image {

    height:300px;

    overflow:hidden;

}


.mjp-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.mjp-card:hover img {

    transform:scale(1.12);

}




/* CONTENU */

.mjp-content {

    padding:30px;

    text-align:center;

}



.mjp-content h2 {

    font-size:30px;

    margin-bottom:15px;

    color:white;

}



.mjp-content h2 span {

    display:block;

}



/* TEXTE */

.mjp-content p {

    color:#ccc;

    line-height:1.6;

}




/* BOUTON CARTE */

.mjp-btn-card {

    display:inline-block;

    margin-top:20px;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    color:white;

    font-weight:bold;

    transition:.3s;

}




/* COULEURS UNIVERS */


/* GAMING */

.gaming {

    box-shadow:
    0 0 25px rgba(0,200,255,.35);

}


.gaming .mjp-btn-card {

    background:#009cff;

}


.gaming:hover {

    box-shadow:
    0 0 40px #009cff;

}



/* MUSIC */

.music {

    box-shadow:
    0 0 25px rgba(170,0,255,.35);

}


.music .mjp-btn-card {

    background:#a000ff;

}


.music:hover {

    box-shadow:
    0 0 40px #a000ff;

}



/* FUTURE */

.future {

    box-shadow:
    0 0 25px rgba(0,255,220,.35);

}


.future .mjp-btn-card {

    background:#00d9cc;

    color:#000;

}


.future:hover {

    box-shadow:
    0 0 40px #00d9cc;

}





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


@media(max-width:900px){


.mjp-themes {

    grid-template-columns:1fr;

    padding:20px;

}



.mjp-hero h1 {

    font-size:45px;

}



.mjp-hero p {

    font-size:18px;

}



}
/* ======================================
   M&JP STUDIO - PAGES UNIVERS
====================================== */


.mjp-page-universe {

    width:100%;
    min-height:100vh;

}



/* HERO UNIVERS */

.mjp-universe-hero {

    text-align:center;

    padding:100px 20px 70px;

}



.mjp-universe-hero h1 {

    font-size:70px;

    font-weight:900;

    letter-spacing:4px;

    color:white;

}



.mjp-universe-hero h1 span {

    display:block;

}




.mjp-universe-hero p {

    max-width:800px;

    margin:30px auto;

    font-size:22px;

    color:#ccc;

    line-height:1.6;

}




/* CONTENU */

.mjp-universe-content {

    max-width:1100px;

    margin:auto;

    padding:40px 20px 100px;

    text-align:center;

}




/* BLOC PRESENTATION */

.mjp-feature-box {

    background:#111;

    border-radius:25px;

    padding:40px;

    margin-bottom:50px;

    box-shadow:
    0 0 30px rgba(255,255,255,.08);

}



.mjp-feature-box h2 {

    color:white;

    font-size:36px;

}



.mjp-feature-box p {

    color:#ccc;

    font-size:18px;

    line-height:1.7;

}





/* FEATURES */

.mjp-features {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:50px;

}



.mjp-features div {

    background:#151515;

    padding:30px;

    border-radius:20px;

    transition:.3s;

}



.mjp-features div:hover {

    transform:translateY(-10px);

}




.mjp-features h3 {

    color:white;

    font-size:24px;

}



.mjp-features p {

    color:#bbb;

    line-height:1.5;

}




/* COULEURS PAR UNIVERS */


/* GAMING */

.gaming-page .mjp-universe-hero h1 span {

    color:#009cff;

}


.gaming-page .mjp-features div:hover {

    box-shadow:
    0 0 25px #009cff;

}




/* MUSIC */

.music-page .mjp-universe-hero h1 span {

    color:#a000ff;

}


.music-page .mjp-features div:hover {

    box-shadow:
    0 0 25px #a000ff;

}





/* FUTURE */

.future-page .mjp-universe-hero h1 span {

    color:#00d9cc;

}


.future-page .mjp-features div:hover {

    box-shadow:
    0 0 25px #00d9cc;

}





/* MOBILE */

@media(max-width:900px){


.mjp-universe-hero h1 {

    font-size:45px;

}


.mjp-features {

    grid-template-columns:1fr;

}


.mjp-feature-box {

    padding:25px;

}


}