/* ==========================================
      JE SUIS PAS UNE FILLE FACILE
========================================== */

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

body{

    background:#080808;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;

}

/* ==========================
        HEADER
========================== */

header{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:25px 25px 10px;

    height:auto !important;
    min-height:0 !important;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none !important;

    box-shadow:none;

    overflow:visible;

}

/* Supprime le Hero de style.css */
header::before,
header::after{

    display:none !important;

    content:none !important;

}

.logo{

    display:block;

}

.logo img{

    width:150px;

    display:block;

}

nav{

    display:flex;

    align-items:center;

    gap:35px;

}

nav a{

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

}

nav a:hover{

    color:#d4af37;

}

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

.hero-spectacle{

    max-width:1400px;

    margin:25px auto 70px;

    padding:0 25px;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:1200px;

    display:block;

    margin:auto;

    border-radius:25px;

    box-shadow:0 30px 70px rgba(0,0,0,.55);

}

/* ==========================
        CONTENEUR
========================== */

.container{

    width:90%;
    max-width:1100px;

    margin:auto;

}

/* ==========================
        SYNOPSIS
========================== */

.synopsis{

    padding-bottom:90px;

}

.badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(212,175,55,.10);

    border:1px solid rgba(212,175,55,.30);

    color:#d4af37;

    font-weight:bold;

    margin-bottom:30px;

}

.synopsis h1{

    font-size:60px;

    color:#d4af37;

    margin-bottom:25px;

}

.synopsis h2{

    font-size:36px;

    margin-bottom:35px;

}

.synopsis p{

    font-size:22px;

    line-height:1.9;

    color:#d8d8d8;

    margin-bottom:25px;

}

blockquote{

    margin-top:45px;

    padding:35px;

    border-left:4px solid #d4af37;

    background:#121212;

    font-size:28px;

    font-style:italic;

    color:white;

}

/* ==========================
        INFORMATIONS
========================== */

.infos{

    padding:100px 0;

    background:#101010;

}

.infos h2{

    text-align:center;

    color:#d4af37;

    font-size:48px;

    margin-bottom:60px;

}

.infos-grid{

    display:grid;

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

    gap:30px;

}

.info-box{

    background:#181818;

    border-radius:20px;

    padding:35px;

    border:1px solid rgba(212,175,55,.18);

    text-align:center;

    transition:.35s;

}

.info-box:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

}

.info-box h3{

    color:#d4af37;

    margin-bottom:20px;

    font-size:30px;

}

.info-box p{

    color:#d8d8d8;

    font-size:19px;

    line-height:1.8;

}

/* ==========================
      BANDE-ANNONCE
========================== */

.bande-annonce{

    padding:100px 0;

}

.bande-annonce h2{

    text-align:center;

    color:#d4af37;

    font-size:48px;

    margin-bottom:30px;

}

.bande-annonce p{

    text-align:center;

    color:#cfcfcf;

    font-size:22px;

}

/* ==========================
      PROCHAINES DATES
========================== */

.dates{

    padding:100px 0;

    background:#101010;

}

.dates h2{

    text-align:center;

    color:#d4af37;

    font-size:48px;

    margin-bottom:50px;

}

.date-box{

    max-width:800px;

    margin:auto;

    padding:40px;

    border-radius:20px;

    background:#181818;

    border:1px solid rgba(212,175,55,.20);

    text-align:center;

}

.date-box p{

    font-size:22px;

    line-height:1.9;

    color:#d8d8d8;

}

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

.contact-production{

    padding:120px 0;

}

.contact-production h2{

    text-align:center;

    color:#d4af37;

    font-size:48px;

    margin-bottom:30px;

}

.contact-production p{

    text-align:center;

    font-size:22px;

    color:#d8d8d8;

    line-height:1.8;

    max-width:900px;

    margin:auto auto 50px;

}

.contact-btn{

    display:block;

    width:fit-content;

    margin:auto;

    padding:18px 45px;

    border-radius:50px;

    background:#d4af37;

    color:#111;

    text-decoration:none;

    font-weight:bold;

    transition:.35s;

}

.contact-btn:hover{

    background:white;

    transform:translateY(-5px);

}

/* ==========================
        RESPONSIVE
========================== */

@media(max-width:900px){

header{

    flex-direction:column;

    gap:25px;

}

nav{

    flex-wrap:wrap;

    justify-content:center;

}

.hero-image img{

    border-radius:18px;

}

.synopsis h1{

    font-size:42px;

}

.synopsis h2{

    font-size:30px;

}

.synopsis p{

    font-size:18px;

}

blockquote{

    font-size:22px;

    padding:25px;

}

.infos-grid{

    grid-template-columns:1fr;

}

.infos h2,
.bande-annonce h2,
.dates h2,
.contact-production h2{

    font-size:36px;

}

.date-box{

    padding:25px;

}

.date-box p,
.contact-production p,
.bande-annonce p{

    font-size:18px;

}

}