/* =====================================
   LA BRIQUE IMPRO - STYLE 2026
   Théâtre contemporain / scène / premium
===================================== */

:root {

    --primary:#c0392b;
    --primary-dark:#922b21;

    --dark:#151515;
    --dark-soft:#222;

    --light:#fafafa;
    --white:#ffffff;

    --text:#333;

    --shadow:
    0 20px 50px rgba(0,0,0,.15);

    --radius:20px;

}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
}



body{

    font-family:'Montserrat',sans-serif;

    background:var(--light);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}



/* ===============================
 NAVBAR
================================ */


.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;


    background:
    rgba(255,255,255,.88);

    backdrop-filter:blur(15px);

    z-index:1000;

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

}



.logo{

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:800;

    letter-spacing:1px;

}



.logo img{

    width:60px;

    height:60px;

    object-fit:cover;

    border-radius:50%;

    box-shadow:
    0 5px 15px rgba(0,0,0,.2);

}



.navbar ul{

    display:flex;

    gap:35px;

    list-style:none;

}



.navbar a{

    color:#222;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.navbar a:hover{

    color:var(--primary);

}



/* menu mobile */

.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:2rem;

    cursor:pointer;

}



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


.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:120px 8% 80px;

    color:white;

    overflow:hidden;

}



.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.65)
    ),

    url("images/hero.jpg");


    background-size:cover;

    background-position:center;

    animation:zoom 18s infinite alternate;

    z-index:-1;

}



@keyframes zoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.1);
    }

}




.hero-content{

    max-width:900px;

}



.hero h1{

    font-size:
    clamp(3rem,7vw,5.5rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:30px;

}



.hero p{

    font-size:1.35rem;

    margin-bottom:45px;

    color:#eee;

}





.btn{

    display:inline-block;

    padding:18px 45px;

    background:var(--primary);

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}



.btn:hover{

    background:var(--primary-dark);

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 30px rgba(192,57,43,.4);

}





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


section{

    padding:100px 8%;

}



h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:70px;

    color:var(--primary);

}



h2::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    background:var(--primary);

    margin:20px auto;

    border-radius:10px;

}





/* ===============================
 SPECTACLES
================================ */


.cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:40px;

}



.card{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.4s;
    display:flex;
    flex-direction: column;

}



.card:hover{

    transform:
    translateY(-12px);

}



.card img{

    width:100%;

    height:280px;

    object-fit:cover;

}



.card-info{

    padding:35px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.card-info p{
    flex-grow:1;
    margin-bottom:25px;
}

.card-info .btn{
    margin-top:auto;
}

.card h3{

    color:var(--primary);

    font-size:1.5rem;

    margin-bottom:15px;

}





/* ===============================
 ASSOCIATION
================================ */


.dark{

    background:

    linear-gradient(
    135deg,
    #111,
    #252525
    );

    color:white;

}



.dark h2{

    color:white;

}



.container{

    max-width:900px;

    margin:auto;

    text-align:center;

}



.container p{

    margin-bottom:25px;

    font-size:1.15rem;

}





/* ===============================
 CONTACT
================================ */


.contact-card{

    max-width:600px;

    margin:auto;

    background:white;

    padding:50px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

}



.contact-card h3{

    color:var(--primary);

    font-size:1.8rem;

    margin-bottom:25px;

}

.contact-card a:not(.btn){
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.contact-card a:not(.btn):hover{
    text-decoration: underline;
}

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


footer{

    background:#090909;

    color:white;

    padding:40px;

    text-align:center;

}





/* ===============================
 ANIMATIONS
================================ */


.fade-in{

    opacity:0;

    transform:
    translateY(40px);

    transition:
    1s ease;

}



.fade-in.visible{

    opacity:1;

    transform:
    translateY(0);

}





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


@media(max-width:900px){


.navbar{

    padding:15px 25px;

}


.menu-toggle{

    display:block;

}



.navbar ul{

    display:none;

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    text-align:center;

    padding:30px;

}



.navbar ul.active{

    display:flex;

}



.hero h1{

    font-size:2.8rem;

}



section{

    padding:70px 25px;

}



}




@media(max-width:600px){


.logo span{

    font-size:.9rem;

}


.hero p{

    font-size:1rem;

}


.btn{

    padding:15px 30px;

}


h2{

    font-size:2.2rem;

}


.card img{

    height:220px;

}

.logo img{
    transition:.4s ease;
}


.navbar.scrolled{

    padding-top:10px;
    padding-bottom:10px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}


.menu-toggle{

    color:#c0392b;

}


@media(max-width:900px){

.menu.active{

    display:flex;

}

}
}