@import url('https://fonts.googleapis.com/css2?family=Allura&family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Big+Shoulders:opsz,wght@10..72,100..900&family=Cinzel:wght@400..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Lexend+Deca:wght@100..900&family=Monsieur+La+Doulaise&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');



#logoLML{
    width: 50px;
}


/*------------------ACCUEIL--------------------*/

.logo-header{
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-rubriques{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 5px;
}

.header-rubriques a{
    color: rgb(255, 255, 255);
    padding: 5px;
    font-size: 15px;
    text-decoration: none;
    transition-duration: 800ms;
}

.header-rubriques a:hover{
    font-size: 17px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 3px;
    color: rgba(176, 145, 98);
    transition-duration: 600ms;
}


.bande-accueil {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; 
}

.bande-accueil-fond{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../media/ch-aubry.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    transform: scale(1.2);
    transition: transform 0.8s ease;
    z-index: 1;
    
}

.bande-accueil:hover .bande-accueil-fond {
    transform: scale(1);
}

.bande-accueil:hover .bande-accueil-contenu {
    color: rgb(211, 210, 209);
    transition-duration: 800ms;
}

.bande-accueil-contenu {
    transition-duration: 800ms;
    position: relative;
    z-index: 2; 
    font-size: 50px;
    color: rgba(176, 145, 98);
    font-weight: 400;
}

.accueil{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px;
    border-radius: 10px;
    gap: 30px;
    padding-left: 5px;
}

.accroche{
    font-size: 25px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.accroche h3{
    color: rgba(176, 145, 98);
    font-size: 40px;
    font-weight: 800;
}

#photo-chaubry{
    width: 700px;
    border-radius: 15px;
}

.case-accueil{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px;
}

.case{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 20px;
    border: 1px solid rgb(46, 46, 46);
    background-color: rgb(37, 37, 37);
    transition-duration: 800ms;
    border-radius: 10px;
    width: 33%;
    overflow: hidden;
}

.case:hover{
    background-color:rgb(24, 24, 24) ;
    transition-duration: 600ms;
}

.case h3{
    color:rgba(176, 145, 98);
}

.case img{
    width: 100%;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;

    filter: brightness(0.7);
}

.case p{
    color: rgb(217, 217, 217);
}





.es-accueil{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
    padding-top: 40px;
    text-align: center;
    padding-bottom: 40px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top: 1px solid rgb(46,46,46);
}


.es-accueil-content{
    color: rgb(236, 231, 231);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 15px;
}

.es-accueil-content img{
    width: 50%;
    filter: brightness(0.8);
    border-radius: 10px;
}


.apropos{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: rgb(45, 45, 45);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: 30px;
}

.apropos h3{
    font-size: 35px;
}


.apropos-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 40%;
    margin: 10px;
    text-align: center;
    font-weight: 300;
}



.contact{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contact-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px;
    padding-bottom: 40px;
}


.coordonnee{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: justify;
}

.reseau{
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border-right: 1px solid rgba(176, 145, 98);
    padding-right: 20px;
}

.reseau p{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.lien-reseau{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.reseau a{
    text-decoration: none;
    color: white;
}

.logo-reseau{
    width: 35px;
    height: auto;
}

iframe{
    border-radius: 15px;
}

/*------------------ MATERIEL ------------------*/

.materiel{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 100px;
}

.materiel li{
    color: rgb(162, 162, 162);
}

.materiel h3{
    color:rgba(176, 145, 98) ;
    font-size: 35px;
}

.accroche{
    min-height: 13vh;
    border: 1px solid rgb(46,46,46);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

.materiel-content{
    text-align: center;
    display: flex;
    min-height: 60vh;
}

.materiel-content-image{
    filter: brightness(0.7);
    background-size: cover;
    background-position: center;
    width: 75%;
}

#materiel-son{
    background-image: url("../media/photo/a10.webp");
    border-bottom: 1px solid rgb(46,46,46);
}

#materiel-mobilier{
    background-image: url("../media/photo/art-table.webp");
}

#materiel-lumiere{
    background-image: url("../media/photo/lumiere2.webp");
    background-position: bottom;
}

.materiel-desc{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin: 20px;
}

.materiel-desc h3{
    font-size: 45px;
}

.materiel-desc span{
    font-size: 35px;
    color: rgba(176, 145, 98);
    font-weight: 800;
}




/*------------------ GALERIE ------------------*/
.galerie-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px;
}

.second-column img{
    width: auto;
    height: 450px;
    border-radius: 15px;
    
}

.second-column{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
}


/*------------------ PRESTATION ------------------*/

.accroche-presta{
    min-height: 13vh;
    border: 1px solid rgb(46,46,46);
    display: flex;
    justify-content: center;
    align-items: center;

}

.prestation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; 
}

.presta-fond{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../media/photo/dj.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    transform: scale(1.2);
    transition: transform 0.8s ease;
    z-index: 1;
    
}

.prestation:hover .presta-fond {
    transform: scale(1);
}

.prestation:hover .contenu {
    color: rgb(211, 210, 209);
    transition-duration: 800ms;
}

.contenu {
    transition-duration: 800ms;
    position: relative;
    z-index: 2; 
    font-size: 50px;
    color: rgba(176, 145, 98);
    font-weight: 400;
}

.experience{
    display: flex;
    justify-content: center;
    gap: 20%; 
    border: 1px solid rgb(46,46,46);
    text-align: center;
    min-height: 13vh;
    background-color: rgb(37, 37, 37);
}

.experience span{
    font-size: 35px;
    color: rgba(176, 145, 98);
    font-weight: 800;
}

.experience p{
    color: rgb(127, 126, 124);
    font-size: 15px;
}

.experience-content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.prestation-content{
    text-align: center;
    display: flex;
}

.prestation-content-image{
    background-image: url('../media/photo/dj2.webp');
    background-size: cover;
    width: 75%;
    height: 60vh;
}

.prestation-desc{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px;
    flex-direction: column;
}

.prestation-desc h3{
    font-size: 45px;
}

.prestation-desc span{
    font-size: 35px;
    color: rgba(176, 145, 98);
    font-weight: 800;
}

#presta-dj{
    background-image: url("../media/photo/dj.webp");
}

#presta-corporate{
    background-image: url("../media/photo/es2.webp");
    background-position: center;
}

#location-mobilier{
    background-image: url("../media/photo/mobilier.webp");
    background-position: center;
}


/*------------------ ES ------------------*/

.es-desc{
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 50px;
}


.bande-es {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; 
}

.bande-es-fond{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../media/photo/es6.webp');
    background-size: cover;
    background-position: top;
    filter: brightness(0.5);
    transform: scale(1.2);
    transition: transform 0.8s ease;
    z-index: 1;
    
}

.bande-es:hover .bande-es-fond {
    transform: scale(1);
}

.bande-es:hover .bande-es-contenu {
    color: rgb(211, 210, 209);
    transition-duration: 800ms;
}

.bande-es-contenu {
    transition-duration: 800ms;
    position: relative;
    z-index: 2; 
    font-size: 50px;
    color: rgba(176, 145, 98);
    font-weight: 400;
}


.es-photo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.es-photo-affiche{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.es-photo-affiche img{
    width: 25%;
    height: auto;
}

.es-photo-soiree img{
    width: auto;
    height: 350px;
}

.es-photo-soiree{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
/*------------------ MENTIONS LEGALES ------------------*/
.mentions-legales {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(225, 228, 231);
}
.mentions-legales h1 {
    border-bottom: 1px solid rgba(176, 145, 98);
    padding-bottom: 10px;
}
.mentions-legales h2 {
    color: rgba(176, 145, 98);
    margin-top: 30px;
    font-size: 1.3em;
}
.mentions-legales ul {
    list-style-type: none; /* Enlève les points */
    padding: 0;            /* Optionnel : enlève le décalage à gauche causé par les puces */
    margin: 0;             /* Optionnel : remet les marges à zéro */
    
}
.mentions-legales li {
    margin-bottom: 8px;
    text-decoration: none;
}

/*------------------ GALERIE ------------------*/
.galerie-photo-content{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.galerie-photo img{
    height: 550px;
    width: 33%;
    object-fit: cover;
}

/*------------------ COMMUNS ------------------*/

body{
    padding: 0;
    margin: 0;
    font-size: 20px;
    color: rgb(225, 228, 231);
    font-family: "outfit";
    text-align: center;
    background: linear-gradient(180deg, rgb(36, 36, 36) 0%,rgb(28, 28, 28) 100%);
    cursor:default;
}

h1{
    color: rgba(176, 145, 98);
    font-weight: 500;
}

h3{
    color: rgba(176, 145, 98);
    font-weight: 800;
    font-size: 35px;
}


header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 10px;
    padding-right: 20px;
    height: 100px;
    border-bottom: 1px solid rgb(46, 46, 46);
}


button{
    padding: 10px;
    border: none;
    border-radius: 20px;
    background-color: rgb(71, 71, 71);
    color: white;
    margin-top: 10px;
}


button:hover{
    cursor: pointer;
    border: 1px solid rgba(176, 145, 98);
    background-color: rgb(42, 42, 42);
    transition-duration: 700ms;
}


footer{
    display: flex;
    justify-content: space-around;
    padding: 20px;
    align-items: center;
    border-top: 1px solid rgb(60, 60, 60);
    height:100px ;
    font-size: 15px;
    color: rgb(112, 112, 112);
}

footer a{
    text-decoration: none;
     color: rgb(112,112,112);
}


.carousel{
    margin: 100px, auto;
    display: flex;
    overflow-x: auto;
    overflow: hidden;
    gap: 1em;
    height: 30vh;
}

.carousel::-webkit-scrollbar{
    display: none;
}

.group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 120s infinite linear;
}

.card{
    flex: 0 0 5em;
    height: 30vh;
    width: auto;
    padding: 5px;
    border-radius: .2em;
}

.card img {
  width: auto;
  height: 100%;
  object-fit: cover; /* <-- Change 'size' to 'object-fit' */
  border-radius: 15px;
}




@keyframes spin {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*--------------------------------------------------------------------------*/
/*                       NOUVEAU SYSTÈME RESPONSIVE                         */
/*--------------------------------------------------------------------------*/

/* --- 1. TABLETTES & PETITS ÉCRANS PORTABLES (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    body {
        font-size: 18px;
    }

    /* Accueil */
    .accueil {
        margin: 40px 20px;
        gap: 20px;
    }

    #photo-chaubry {
        width: 50%;
    }

    .accroche {
        width: 50%;
    }

    .accroche h3 {
        font-size: 32px;
    }

    /* Boîtes de services (3 colonnes) */
    .case-accueil {
        gap: 15px;
        margin: 15px;
    }

    .case {
        width: 33%;
    }

    .case img {
        height: 200px;
    }

    /* Contenus Matériel & Prestations */
    .materiel-content, 
    .prestation-content {
        flex-direction: row;
    }

    .materiel-desc, 
    .prestation-desc {
        width: 50%;
        padding: 0 15px;
    }

    .materiel-content-image, 
    .prestation-content-image {
        width: 50%;
    }

    /* Événements (ES) */
    .es-photo-affiche img {
        width: 45%; /* Passe de 4 à 2 colonnes */
    }

    .es-photo-soiree img {
        height: 280px;
    }
}

/* --- 2. GRANDS MOBILES & PETITES TABLETTES (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }

    /* Header */
    header {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 15px;
    }

    .logo-header {
        gap: 15px;
    }

    .header-rubriques {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-rubriques a {
        font-size: 14px;
        padding: 5px 8px;
    }

    /* Bannières de titres */
    .bande-accueil, 
    .bande-es, 
    .prestation {
        height: 250px;
    }

    .bande-accueil-contenu, 
    .bande-es-contenu, 
    .contenu {
        font-size: 28px;
        text-align: center;
        padding: 0 15px;
    }

    /* Section Accueil principale */
    .accueil {
        flex-direction: column-reverse; /* Met la photo sous le texte d'accroche */
        margin: 30px 15px;
        gap: 25px;
    }

    .accroche {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .accroche h3 {
        font-size: 28px;
    }

    #photo-chaubry {
        width: 100%;
        max-width: 550px;
        height: auto;
    }

    /* Grille de 3 boîtes -> empilées verticalement */
    .case-accueil {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 15px;
    }

    .case {
        width: 100%;
        max-width: 450px;
    }

    .case img {
        height: 250px;
    }

    /* Sections Texte */
    .apropos-content {
        width: 85%;
    }

    .es-accueil-content img {
        width: 85%;
    }

    /* Section Contacts */
    .contact-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .coordonnee {
        width: 100%;
        max-width: 450px;
    }

    .coordonnee iframe {
        width: 100% !important;
        height: 250px;
    }

    .reseau {
        border-right: none;
        border-bottom: 1px solid rgba(176, 145, 98, 0.4);
        padding-right: 0;
        padding-bottom: 25px;
        align-items: center;
        width: 100%;
        max-width: 450px;
    }

    .lien-reseau {
        justify-content: center;
    }

    /* Matériels & Prestations (Deviennent verticaux) */
    .materiel {
        margin: 40px 15px;
    }

    .materiel-content, 
    .prestation-content {
        flex-direction: column;
        min-height: auto;
        border: 1px solid rgb(46, 46, 46);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .materiel-content-image, 
    .prestation-content-image {
        width: 100%;
        height: 250px;
    }

    .materiel-desc, 
    .prestation-desc {
        width: 100%;
        margin: 0;
        padding: 25px 15px;
        box-sizing: border-box;
    }

    .materiel-desc h3, 
    .prestation-desc h3 {
        font-size: 28px;
    }

    .materiel-desc span, 
    .prestation-desc span {
        font-size: 24px;
    }

    /* Compteurs d'expérience */
    .experience {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .experience-content {
        gap: 5px;
    }

    /* Galerie standard */
    .galerie-photo img {
        width: 48%; /* Grille de 2 images par ligne */
        height: 250px;
    }

    /* Galeries spécifiques (ES / Colonnes) */
    .second-column {
        flex-direction: column;
        width: 100%;
    }

    .second-column img {
        width: 100%;
        height: auto;
    }

    .es-photo-affiche {
        gap: 15px;
    }

    .es-photo-affiche img {
        width: 70%;
    }

    .es-photo-soiree {
        flex-direction: column;
        align-items: center;
    }

    .es-photo-soiree img {
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    /* Carrousel infini horizontal (Ajustement mobile) */
    .carousel {
        height: 20vh;
        margin: 50px auto;
    }
    
    .card {
        height: 20vh;
    }

    /* Footer */
    footer {
        flex-direction: column;
        height: auto;
        padding: 25px;
        gap: 15px;
        text-align: center;
    }
}

/* --- 3. PETITS MOBILES (max-width: 480px) --- */
@media screen and (max-width: 480px) {
    .header-rubriques {
        gap: 5px;
    }

    .header-rubriques a {
        font-size: 13px;
        padding: 4px 6px;
    }

    .accueil {
        margin: 20px 10px;
    }

    .bande-accueil-contenu, 
    .bande-es-contenu, 
    .contenu {
        font-size: 22px;
    }

    .accroche h3 {
        font-size: 24px;
    }

    .accroche p {
        font-size: 16px;
    }

    /* Galerie en 1 seule colonne sur les très petits écrans */
    .galerie-photo img {
        width: 100%;
        height: 300px;
    }

    .es-photo-affiche img {
        width: 90%;
    }
}