/* ===========================================================
   LES CASSES NOISETTES
   Style.css
   Version forêt sombre / vieux pub
   PARTIE 1/2
=========================================================== */


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

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


:root{

    --bois:#D8B07A;
    --bois-fonce:#6B4325;

    --brun:#2B160A;

    --orange:#D56C00;
    --rouge:#B63A18;

    --clair:#FFF8E7;

    --texte:#F5E8C8;

    --or:#FFE0A0;

}



/* ===========================================================
   GENERAL
=========================================================== */


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Baloo 2',cursive;

    background:#080604;

    color:var(--texte);

    overflow-x:hidden;

}



/* ===========================================================
   BACKGROUND FORET
=========================================================== */


#background {

    position:fixed;

    inset:0;


    background-image:

    linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.45)
    ),

    url("PICS/IMG/Fond.png");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    z-index:-10;

}

#footerPhrase{
    font-size:1.3rem;
    font-style:italic;
    color:#c9b28b;
    opacity:.9;
    text-align:center;
    padding:10px 20px;
    transition:opacity 1.3s;
}

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


header{


    position:fixed;

    top:0;

    left:0;


    width:100%;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:15px 50px;


    background:

    rgba(35,18,8,.78);


    backdrop-filter:blur(12px);


    border-bottom:

    1px solid rgba(216,176,122,.35);


    z-index:999;


}



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


.logo{

    z-index:5;

}



.logo img{


    width:95px;

    height:95px;


    border-radius:50%;


    object-fit:cover;


    background:#fff;


    border:

    5px solid var(--bois);


    box-shadow:

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


    transition:.35s;


}



.logo img:hover{


    transform:

    rotate(-8deg)

    scale(1.08);


}



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


nav{


    position:absolute;


    left:50%;


    transform:translateX(-50%);


    display:flex;


    gap:40px;


}



nav a{


    text-decoration:none;


    color:#FFE8B0;


    font-size:21px;


    font-weight:700;


    text-shadow:

    0 3px 8px #000;


    transition:.3s;


}



nav a:hover{


    transform:

    translateY(-4px)

    rotate(-2deg);


    color:#FFB94A;


}



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


.hero{


    min-height:100vh;


    display:flex;


    justify-content:space-evenly;


    align-items:center;


    gap:60px;


    padding:

    140px 60px 70px;


}



/* ===========================================================
   ECUREUILS
=========================================================== */


.left,
.right{


    flex:1;


    display:flex;


    justify-content:center;


}



.left img,
.right img{


    width:180px;


    aspect-ratio:1;


    object-fit:cover;


    border-radius:50%;


    padding:10px;


    background:#FFF6E8;


    border:

    6px solid var(--bois);


    box-shadow:

    0 20px 45px rgba(0,0,0,.7);


    animation:

    bounce 4s ease-in-out infinite;


    transition:.35s;


}



.left img:hover,
.right img:hover{


    transform:

    scale(1.08)

    rotate(-3deg);


}



.right img{

    animation-delay:.8s;

}



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


.center{


    flex:1;


    text-align:center;


    max-width:700px;


}



h1{


    font-size:86px;


    line-height:.92;


    color:#FFE8A8;


    text-shadow:


    0 5px 12px #000,


    0 0 25px rgba(255,190,80,.45);


}



#phrase{


    margin-top:28px;


    font-size:30px;


    line-height:1.45;


    color:#F5E8C8;


    text-shadow:

    0 3px 8px #000;


}



/* ===========================================================
   BOUTONS
=========================================================== */


.buttons{


    margin-top:35px;


    display:flex;


    justify-content:center;


    flex-wrap:nowrap;


    gap:16px;


}



.buttons a{


    text-decoration:none;


    color:#FFF4D0;


    background:


    linear-gradient(

    145deg,

    #8A5428,

    #3A1D0B

    );


    padding:

    14px 26px;


    border-radius:60px;


    border:

    2px solid #D8B07A;


    font-size:18px;


    font-weight:700;


    min-width:220px;


    text-align:center;


    box-shadow:

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


    transition:.35s;


}



.buttons a:hover{


    background:#B63A18;


    transform:

    translateY(-6px)

    scale(1.05);


    box-shadow:

    0 0 25px rgba(255,190,80,.5);


}



/* ===========================================================
   SCROLL
=========================================================== */


.scroll{


    position:absolute;


    bottom:25px;


    left:50%;


    transform:translateX(-50%);


    font-size:42px;


    color:#FFE8A8;


    text-shadow:

    0 3px 8px #000;


    animation:

    updown 2s infinite;


}

/* ===========================================================
   LES CASSES NOISETTES
   Style.css
   Version forêt sombre / vieux pub
   PARTIE 2/2
=========================================================== */


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


section{


    position:relative;


    width:100%;


}



section:not(.hero){


    max-width:1200px;


    margin:40px auto;


    padding:50px;


    background:


    rgba(40,20,8,.72);


    border-radius:24px;


    border:

    1px solid rgba(216,176,122,.25);


    box-shadow:


    0 15px 40px rgba(0,0,0,.65);


}



/* Sections pleine hauteur */


#concerts,
#photos,
#videos,
#terrier,
#contact{


    min-height:100vh;


    padding:

    120px 60px;


}



/* ===========================================================
   TITRES
=========================================================== */


h2{


    font-size:60px;


    color:#FFE8A8;


    text-align:center;


    margin-bottom:50px;


    text-shadow:


    0 5px 12px #000,


    0 0 20px rgba(255,190,80,.35);


}



h3{


    color:#FFD98A;


    font-size:32px;


    margin-bottom:15px;


    text-shadow:

    0 3px 8px #000;


}



/* ===========================================================
   TEXTES
=========================================================== */


p{


    font-size:20px;


    line-height:1.6;


    color:#F5E8C8;


    text-shadow:


    0 3px 8px rgba(0,0,0,.9);


}



ul{


    max-width:700px;


    margin:0 auto;


    font-size:22px;


    line-height:2;


    color:#F5E8C8;


    text-shadow:


    0 3px 8px #000;


}



/* ===========================================================
   IMAGES
=========================================================== */


img{


    max-width:100%;


    display:block;


}



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


#contact img{


    display:inline-block;


    transition:.3s;


}



#contact img:hover{


    transform:

    scale(1.15)

    rotate(-5deg);


}



/* ===========================================================
   LIENS
=========================================================== */


a{


    transition:.3s;


}



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


.logo img,
.left img,
.right img,
.buttons a,
nav a{


    will-change:transform;


}



@keyframes bounce{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-18px);


    }


}



@keyframes updown{


    0%,100%{


        transform:

        translate(-50%,0);


    }


    50%{


        transform:

        translate(-50%,12px);


    }


}



@keyframes fadeIn{


    from{


        opacity:0;


        transform:

        translateY(40px);


    }


    to{


        opacity:1;


        transform:

        translateY(0);


    }


}



.fade{


    animation:

    fadeIn .8s ease;


}



/* ===========================================================
   SELECTION TEXTE
=========================================================== */


::selection{


    background:#D56C00;


    color:white;


}



/* ===========================================================
   SCROLLBAR
=========================================================== */


::-webkit-scrollbar{


    width:12px;


}



::-webkit-scrollbar-track{


    background:#1B0E06;


}



::-webkit-scrollbar-thumb{


    background:#C98A3A;


    border-radius:20px;


}



::-webkit-scrollbar-thumb:hover{


    background:#A8611A;


}



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


@media(max-width:1200px){



    header{


        padding:

        15px 30px;


    }



    nav{


        gap:28px;


    }



    nav a{


        font-size:19px;


    }



    h1{


        font-size:72px;


    }



    #phrase{


        font-size:26px;


    }



}



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


@media(max-width:992px){



    .logo{


        display:none;


    }



    header{


        justify-content:center;


        padding:15px;


    }



    nav{


        position:static;


        transform:none;


        justify-content:center;


        flex-wrap:wrap;


        gap:12px 18px;


    }



    nav a{


        font-size:18px;


    }



    .hero{


        flex-direction:column;


        text-align:center;


        padding:

        140px 30px 60px;


        gap:30px;


    }



    .left img,
    .right img{


        width:140px;


    }



    h1{


        font-size:62px;


    }



    #phrase{


        font-size:22px;


    }


}



/* ===========================================================
   TELEPHONES
=========================================================== */


@media(max-width:768px){



    header{


        padding:12px;


    }



    nav{


        gap:10px 14px;


    }



    nav a{


        font-size:16px;


    }



    .hero{


        padding:

        120px 20px 50px;


    }



    .left img,
    .right img{


        width:120px;


        border-width:4px;


        padding:6px;


    }



    h1{


        font-size:46px;


    }



    #phrase{


        font-size:18px;


    }



    .buttons{


        flex-wrap:wrap;


    }



    .buttons a{


        width:240px;


        font-size:18px;


    }



    h2{


        font-size:40px;


    }



    p{


        font-size:18px;


    }



    section:not(.hero){


        padding:30px 20px;


    }


}



/* ===========================================================
   PETITS TELEPHONES
=========================================================== */


@media(max-width:480px){



    nav a{


        font-size:15px;


    }



    h1{


        font-size:38px;


    }



    #phrase{


        font-size:16px;


    }



    .left img,
    .right img{


        width:100px;


    }



    .buttons a{


        width:230px;


        font-size:17px;


    }


}
/* =========================================================
   LOGO PRINCIPAL HERO
   ========================================================= */

.hero-logo {
    width: min(650px, 75vw);
    margin: 0 auto 25px;
    padding: 0;
    line-height: 0;
}

.hero-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;

    /* Effet léger pour détacher le logo du décor */
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 18px rgba(255, 190, 80, 0.15));

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

/* Petit effet au survol */
.hero-logo:hover img {
    transform: scale(1.025);

    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 25px rgba(255, 190, 80, 0.25));
}


/* =========================================================
   TABLETTES
   ========================================================= */

@media (max-width: 900px) {

    .hero-logo {
        width: min(550px, 78vw);
        margin-bottom: 20px;
    }

}


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

@media (max-width: 600px) {

    .hero-logo {
        width: 88vw;
        max-width: 480px;
        margin-bottom: 18px;
    }

    .hero-logo img {
        filter:
            drop-shadow(
                0 5px 9px
                rgba(0, 0, 0, 0.7)
            );
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 380px) {

    .hero-logo {
        width: 92vw;
    }

}


/* ===========================================================
   FIN STYLE
=========================================================== */