body{
    margin:0;
    overflow-x:hidden;
    }
    
    .footer{
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    padding:40px 20px;
    font-family: 'Play', sans-serif;
    text-align:center;
    border-top: 2px solid #ff4500;
    margin-top: 60px;
    }
    
    .footer .row{
    width:100%;
    margin:15px 0%;
    padding:10px 0%;
    color:gray;
    font-size: 0.8em;
    }
    
    .footer .row a{
    text-decoration:none;
    color:gray;
    transition: 0.3s ease;
    font-size: 1em;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 50%;
    }
    
    .footer .row a:hover {
        background: rgba(255, 69, 0, 0.2);
        color: #ff4500;
    }
    

    
    .footer .row ul{
    width:100%;
    }
    
    .footer .row ul li{
    display:inline-block;
    margin:0px 20px;
    transition: 0.3s ease;
    }
    
    .footer .row ul li a {
        color: gray;
        text-decoration: none;
        transition: 0.3s ease;
        border-bottom: 2px transparent solid;
    }
    
    .footer .row ul li a:hover {
        color: #ff4500;
        border-bottom: 2px #ff4500 solid;
    }
    
    .footer .row a i{
    font-size:2em;
    margin:0% 1%;
    }
    
    @media (max-width:720px){
    .footer{
    text-align:left;
    padding:5%;
    }
    .footer .row ul li{
    display:block;
    margin:10px 0px;
    text-align:left;
    }
    .footer .row a i{
    margin:0% 3%;
    }
    .footer .row a{
        font-size: 1em;
    }
    }

/*###############################################################################################################*/


li img{
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

.splide__slide img {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
}

.splide{
    margin-bottom: 30px;
    background: linear-gradient(45deg, rgb(100, 98, 98), rgb(41, 38, 38));
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
}

/* .splide h1{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 2em;
    color: white;
    margin: 30px;
} */

.splide__slide .disabled{
    pointer-events: none;
    cursor: default;
    transform: scale(0.6); /*sets all slides to a scaling of 0.8 (80%)*/
    background-color: transparent;
    display: flex;  /* used for all slides vertical align center */
    justify-content: center; /* used for all slides vertical align center */
    transition: 0.5s;
    opacity: 0.3;
    
}
.splide__slide.is-active .disabled{
    pointer-events: all;
    cursor: pointer;
    border: 5px solid white;
    transition: 0.5s;
    transform: scale(0.8); /* sets the active slide to scaling of 1 (100%) */
    opacity: 1;
}

.splide__slide.is-active .disabled:hover{
    transition: 0.5s;
    border: 5px solid white;
    transform: scale(0.85); /* sets the active slide to scaling of 1 (100%) */
    opacity: 0.8;
}

body.first{
    background: rgb(23, 22, 22);
}

body.second{
    background: linear-gradient(45deg, rgb(100, 98, 98), rgb(41, 38, 38));
}

/*##############################################################################################################################*/

header.accueil{
    margin: 0;
    padding-bottom: 50%;
    background-image: url(../images/assets/backgrounds/fond_accueil.png);
    /* background-image: url(../images/assets/backgrounds/fond_accueil.png); */
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.8;
}

header.autre{
    margin: 0;
    padding-bottom: 0;
    background-image: url(../images/assets/backgrounds/fond_autre.png);
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.8;
}

.container_index{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 0 50px;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(125,125,125,1) 100%);
    opacity: 0.6;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 0 50px;
}

.logo_index img{
    display: block;
    visibility: hidden;
    width: 150%;
    margin-top: 10px ;
    margin-left: -30px; 
    margin-bottom: 10px;
}

.logo img{
    display: block;
    width: 150%;
    margin-top: 10px ;
    margin-left: -30px; 
    margin-bottom: 10px;
}


.menu {
    display: flex;
    list-style-type: none;
    padding-top: 10px;
    margin: 0;
}

.menu > li {
    position: relative;
}
.menu > li:first-child {
    margin-left: 0; /* Retirer la marge du premier élément */
}
.menu > li > a {
    display: block;
    padding: 12px 20px;
    color: white;
    font-size: calc(0.2rem + 1.1vw);
    font-family: "Trebuchet MS", Arial, sans-serif;
    text-decoration: none;
    border-bottom: 3px transparent solid;
}

.menu > li:hover > a {
    border-bottom: 3px grey solid;
    transition: 1s;
    background: rgb(62, 60, 60);
    /* color: black; */
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    transition: 0.3s ease;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.menu > li:hover .sub-menu {
    transition: 1s;
    display: block;
    width: 100%;            
}

.sub-menu li {
    background: rgb(62, 60, 60);
    transition: 0.3s ease;
    display: block;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sub-menu li:first-child {
    border-radius: 0;
}

.sub-menu li:last-child {
    border-radius: 0 0 8px 8px;
}

.sub-menu li:hover {
    background: rgb(80, 75, 75);
}

.sub-menu li a {
    font-size: 1em;
    padding: 10px 10px;
    color: #fff;
    font-family: "Trebuchet MS", Arial, sans-serif;
    text-decoration: none;
    border-bottom: 3px transparent solid;
}

.sub-menu li:hover a{
    transition: 0.3s ease;
    border-bottom: 3px #ff4500 solid;
    color: #ff4500;
}

@media screen and (max-width: 1024px) {
    /* .menu > li > a{
        font-size: 1em;
    } */
    .sub-menu li a{
        font-size: 0.8em;
    }
    .logo img{
        display: none;
    }
}

@media screen and (max-width: 768px){
    .menu > li > a{
        font-size: 0.6em;
    }
    .sub-menu li a{
        font-size: 0.5em;
    }
}

@media screen and (max-width: 480px){
    .menu > li > a{
        font-size: 0.5em;
        padding: 12px 15px;
    }
    .sub-menu li a{
        font-size: 0.5em;
    }
}
@media screen and (max-width: 370px){
    .menu > li > a{
        font-size: 0.4em;
        padding: 12px 10px;
    }
    .sub-menu li{
        display: none;
    }
    .sub-menu li a{
        display: none;
        font-size: 0.5em;
    }
}
/*#########################################################################################################################*/

/* header.accueil { gère tout l'en-tête y compris le logo rond
    color: white;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: right;
    padding-right: 50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 50%;
    background: linear-gradient(to right,rgb(136, 132, 132),rgb(64, 61, 61)); 
    background-image: url(Pr\ ject.png);
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.8;
    flex-wrap: wrap;
} */

/* @media screen and (max-width : 2296px) {
    header.accueil{
        padding-bottom: 250%;
    }
} */

/* .menu-nav{
    padding-bottom: 3px;
}

.btn a.onglet{ gère le menu
    margin-top: 25px;
    margin-right: 10px;
    vertical-align: middle;
    float: left;
}
  

nav.menu-nav ul li.btn:hover a.onglet{ passage de la souris sur le menu
    color: black;
    transition: 1s;
    border-bottom: solid;
    border-radius: 0%;
    border-color: grey;
    
} */


/* nav.menu-nav ul li.btn a.onglet{ gère le style du menu
    font-size: 1.5em;
    color: white;
    border-bottom: solid;
    border-color: transparent;
    text-decoration: none;
    padding: 10px;
} */



/* nav.menu-nav ul li.btn{ gère l'écartement du menu
    display: inline-block;
    list-style-type: none;
    justify-content: space-around;

}*/



/*.conteneur{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
} */

/* header.autre { 
    color: white;
    font-family: "Trebuchet MS", Arial, sans-serif;
    text-align: right;
    padding-right: 50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    background: linear-gradient(to right,rgb(136, 132, 132),rgb(64, 61, 61)); 
    background-image: url(Pr\ ject.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
} */
/*######################################################################################*/



.galerie{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

}

.galerie img{
    width: 380px;
    height: 250px;
    margin: 50px;
    border: 2px solid white;
    box-shadow: 15px 15px 15px black;
}

@media screen and (max-width: 1024px){
    .galerie img{
        width: 200px;
        height: 131px;
    }    
}
.titre{
    color: white;
    text-align: center;
    padding-top: 30px;
    margin: 20px;
    font-size: calc(1rem + 1.5vw);
    font-family: "Trebuchet MS", Arial, sans-serif;
    line-height: 40px;
}

.text{
    color: white;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 50px;
    margin: 50px auto;
    font-size: calc(0.7rem + 1.5vw);
    font-family: monospace;
}

/*################################################################################################*/

/* form div{
    display: flex;
    flex-direction: column;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;;
    font-size: 0.7em;
    justify-content: space-between;
    width: 100%;
    
}

input{
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin-bottom: 10px;
    margin-top: 10px;
}

textarea{
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin-bottom: 10px;
    margin-top: 10px;
}

fieldset{
    display: flex;
    padding: 20px;
    color: white;
    font-size: 2em;
    font-family: "Trebuchet MS", Arial, sans-serif;
    width: 30%;
    margin: auto;
    margin-bottom: 50px;
    justify-content: center;
    flex-direction: column;
}

input[type=submit]{
    width: 70px;
    background-color: rgb(79, 79, 222);
    color: white;
}

input[type=submit]:hover{
    background-color: blue;
}

input[type=submit]:active{
    background-color: red;
} */

/*################################################################################################*/


.contact{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    margin: 0 auto;
}

.manager h2.cm{
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: white;
    font-size: calc(1.5rem + 1.5vw);
    padding-bottom: 50px;
}

.manager h2.td{
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: calc(1rem + 1.5vw);
    padding-bottom: 30px;
}

.manager a{
    text-decoration: none;
    background-color: red;
    color: black;
    padding: 15px;
    border-radius: 50px;
    margin-bottom: 50px;
}

.manager a.mail{
    font-size: calc(0.5rem + 1vw);
    padding-top: 21px;
    padding-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 15px 15px 15px black;
}

.manager a.mail:hover{
    background-color: rgb(208, 3, 3);
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
}

.manager a.mail2:hover{
    background-color: rgb(208, 3, 3);
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
}

.manager a.tel:hover{
    background-color: rgb(208, 3, 3);
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
}

.manager a.mail2{
    font-size: calc(0.5rem + 1vw);
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 20px;
    padding-top: 18px;
    box-shadow: 15px 15px 15px black;
}


.manager a.tel{
    font-size: calc(0.8rem + 1vw);
    padding-top: 19px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 15px 15px 15px black;
}

.lien{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 20px;
}

img.asso{
    display: flex;
    margin: auto;
    margin-bottom: 50px;
    opacity: 0.6;
    border: 5px solid black;
    border-radius: 1000px;
    width: 250px;
}

@media screen and (max-width: 1024px) {
    .contact{
        flex-direction: column;
    }
    .lien{
        flex-direction: column;
    }
    .manager a{
        margin: 0 auto;
        width: 40%;
    } 
    .manager a.tel{
        padding-top: 13px;
    }
    .manager a.mail{
        font-size: 1em;
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .manager a.mail2{
        padding-bottom: 15px;
        padding-top: 13px;
    }
    .manager{
        margin: 20px;
    }
    .img.asso{
        width: 40%;
    }
}

@media screen and (max-width: 768px){
    .manager a.mail{
        font-size: 0.7em;
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .manager a.tel{
        padding-top: 9px;
        padding-bottom: 5px;
    }
    .manager a.mail2{
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 480px){
    .manager a.mail{
        font-size: 0.6em;
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .manager a.tel{
        padding-top: 9px;
        padding-bottom: 5px;
    }
    .manager a.mail2{
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 370px){
    .manager a.mail{
        font-size: 0.5em;
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .manager a.tel{
        padding-top: 9px;
        padding-bottom: 5px;
    }
    .manager a.mail2{
        font-size: 0.6em;
        padding-bottom: 12px;
    }
}
/*###############################################################################*/

*{
    margin: 0;
    padding: 0;
}

.yt-responsive iframe{
    aspect-ratio: 16/9;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    border: 5px solid white;
}

.yt-responsive{
    display: flex;
    margin: auto;
}

section.video{
    background: rgb(23, 22, 22);
}

@media screen and (max-width: 480px){
    .yt-responsive iframe{
        /* height: 144px;
        width: 256px; */
        height: 169px;
        width: 300px;
    }
}
@media screen and (max-width: 370px){
    .yt-responsive iframe{
         height: 144px;
        width: 256px; 
    }
}

/*#############################################################################################################*/
/*Tableau de la section "Nous"*/

.zikos{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
}
.zikos h2{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: calc(0.5rem + 1vw);
}

.zikos td img{
    width: 70%;
    margin-left: calc(0.5rem + 1.5vw);
    margin-top: 50px;
    margin-bottom: 50px;
    border-width: 1em;
    border: 2px solid white;
    z-index: 9999;
}

.zikos td img.Killian{
    width: 55%;
    margin-left: calc(0.1rem + 1.5vw);
}

.zikos p a.killian{
    background-color: white;
    padding: 5px;
    font-family: monospace;
    color: black;
    text-decoration: none;
}

.zikos p a.killian:hover{
    background-color: grey;
    padding: 5px;
    font-family: monospace;
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
    text-decoration: none;
}

.zikos p a.killian:active{
    background-color: rgb(189, 72, 72);
    padding: 5px;
    font-family: monospace;
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
    text-decoration: none;
}

.zikos p.nico{
    color: white;
    width: 90%;
    font-size: calc(0.2rem + 1vw);
    margin-right: 202px;
    margin-bottom: 7px;
    font-family: monospace;
    line-height: calc(0.5rem + 1.5vw);
}

.zikos p.killian{
    color: white;
    width: 90%;
    font-size: calc(0.3rem + 1vw);
    margin-left: calc(4rem + 1.5vw);
    margin-bottom: 20px;
    margin-top: 20px;
    /* margin-right: 200px; */
    font-family: monospace;
    line-height: calc(0.5rem + 1.5vw);
}

td {
    border-bottom: 2px solid white;
    padding-bottom: 25px;
}

table.section_nous{
    margin-top: 40px;
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width:480px){
    .zikos p.killian{
        margin-left: calc(2rem + 1.5vw);
        width: 100%;
    }
    
}
@media screen and (max-width: 370px){
    .zikos p.nico{
        width: 80%;
        font-size: 0.5em;
    }
}

/*####################################################################################################################*/
/*Tableau section "Concerts"*/

table.section_concert{
    margin: auto;
    margin-top: 4%;
    width: 80%;
    border-spacing: 50px;
}


td{
    text-align: center;
    margin: 50px;
}

td p.concert{
    margin-bottom: 20px;
    color: white;
    font-family: monospace;
}

a{
    text-decoration: none;
}

td a p.date{
    font-size: calc(1rem + 1.5vw);
    transition: 0.5s;
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    text-align: center;
    color: black;
    margin-right: 50px;
    margin-left: 50px;
    padding-bottom: 5px;
    font-family: monospace;
    border: 2px solid white;
    border-radius: 10px;
}

td a p.date:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

td p.event{
    font-size: calc(1rem + 1.5vw);
    transition: 0.5s;
    text-align: left;
    color: white;
}

td p.event:hover{
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
}


td p.lieu{
    color: white;
    text-align: left;
    font-size: calc(0.5rem + 1.5vw);
    /* margin-top: 50px; */
}

td p.infos{
    display: block;
}

td p.infos a{
    font-size: calc(0.5rem + 1.5vw);
    text-decoration: none;
    margin-top: 100px;
    padding: 5px;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    font-family: monospace; 
}

td p.infos a:hover{
    text-decoration: none;
    margin-top: 100px;
    background-color: rgb(67, 62, 62);
    padding: 5px;
    font-family: monospace;
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    color: black;
}

td p.infos a:active{
    text-decoration: none;
    margin-top: 100px;
    background-color: rgb(182, 182, 234);
    text-shadow: 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204), 0 0 2px rgb(220, 212, 204);
    padding: 5px;
    font-family: monospace;
    color: rgb(25, 23, 23);
}

.soon{
    pointer-events: none;
    cursor:default;
    padding: 5px;
}

.soon_2{
    font-size: calc(0.7rem + 1.5vw);
}

.annule{
    padding: 5px;
    border: 2px solid white;
    border-radius: 10px;
    background-color: red;
}

@media screen and (max-width: 768px){
    table.section_concert{
        width: 50%;
    }
    td p.infos{
        display: none;
    }
}

@media screen and (max-width: 480px){
    table.section_concert{
        border-spacing: 20px;
        margin-bottom: 50px;
    }
    td p.infos{
        display: none;
    }
    td a p.date{
        margin-right: 20px;
        margin-left: 20px;
    }
    td p.event{
        font-size: 1.2em;
    }
    td p.lieu{
        font-size: 1em;
    }
    table.section_concert tr{
       padding-top: 100px;
    }
}

@media screen and (max-width: 370px){
    table.section_concert{
        border-spacing: 10px;
    }
}


/*#################################################################################################################################*/

.histoire{
    width: 70%;
    text-align: justify;
    font-size: calc(0.7rem + 1vw);
    font-family:monospace;
    color: white;
    margin: 5% auto;
}
.float{
    width: 40%;
    float: left;
    margin: 10px 30px;
    box-shadow: 0px 0px 21px 15px rgba(0,0,0,0.1);
}

.groupe{
    width: 40%;
    float: right;
    margin: 10px 30px;
    box-shadow: 0px 0px 21px 15px rgba(0,0,0,0.1);
}

@media screen and (max-width: 1024px){
    .float, .groupe{
        width: 300px;
    }
}
@media screen and (max-width: 370px){
    .float, .groupe{
        width: 200px;
    }
}

.banniere{
    width: 100%;
    margin: 10px auto;
    box-shadow: 0px 0px 21px 15px rgba(0,0,0,0.1);
}

a.histoire_lien_concert{
    text-decoration: underline;
    text-align: justify;
    font-size: calc(0.7rem + 1vw);
    font-family:monospace;
    color: white;
}

a.histoire_lien_concert:hover{
    color: rgb(192, 185, 185);
}

a.histoire_lien_concert:active{
    color: rgb(242, 189, 189);
}

/*############################################################################################################################*/

.live{
    margin: 2% auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 80px;
    color: white;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: calc(1rem + 1.5vw);
    text-align: center;
    line-height: 40px;
}

.live_texte{
    margin: 2.5% auto;
    text-align: center;
    max-width: 70%;
    color: white;
    font-family: monospace;
    font-size: calc(0.3rem + 1.5vw);
}

.live_texte img{
    margin: auto;
    width: 50%;
    border: 3px solid black;
}

#map { 
    aspect-ratio: 16/9;
    /* height: 20%;  */
    width: 50%;
    margin: 5px auto;
    margin-bottom: 5vh;
    border: 5px solid black;
}

.live_texte a{
    color: white;
}

ion-icon{
    margin: 50px;
    font-size: calc(2rem + 1.5vw);
    color: white;
    border: 5px rgb(146, 144, 144) solid;
    border-radius: 10px;
}

ion-icon:hover{
    color: rgb(198, 194, 194);
    border: 5px rgb(102, 100, 100) solid;
}

ion-icon:active{
    color: rgb(134, 131, 131);
    border: 5px rgb(200, 195, 195) solid;
}

.box-rebours{ 
    height: 150px; 
    margin-bottom: 50px;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}
.box_jour, .box_heure, .box_minute, .box_seconde { 
    padding: 10px; 
}
#jour, #heure, #minute, #seconde { 
    background:black; 
    padding: 10px 20px; 
    color: white; 
    font-size: calc(1.5rem + 1.5vw); 
    font-family: monospace;
    font-weight: bold; 
}
#jour_label, #heure_label, #minute_label, #seconde_label { 
    color: white;
    font-family: monospace;
    font-size: calc(0.5rem + 1.5vw); 
}

@media screen and (max-width: 480px){
    #map{
        height: 200px;
        width: 250px;
    }
}
@media screen and (max-width: 370px){
    #jour, #heure, #minute, #seconde{
        font-size: 1.2em;
    }
    #jour_label, #heure_label, #minute_label, #seconde_label {
        font-size: 1em;
    }
    .box_jour, .box_heure, .box_minute, .box_seconde{
        padding: 5px;
    }
}

/*##################################################################################################################################*/

.a_propos_general{
    width: 90%;
    margin: 2% auto;
}

.a_propos_membres {
    display: flex;
    max-width: 80%;
    margin: 50px auto;
    border-bottom: 5px solid white;
    padding: 20px;
    padding-bottom: 60px;
}

.left {
    flex: 1; /* Le niveau de l'image prend 1/2 de l'espace disponible */
    padding: 20px; /* Ajouter un espace autour de l'image */
}

.left img {
    transition: 0.5s;
    max-width: 90%; /* Assurer que l'image reste à l'intérieur de son conteneur */
    /* height: auto; */
    border: 5px solid white;
}


.left img:hover{
    transition: 0.5s;
    transform: scale(1.1);
}

.right {
    display: flex; /* Utilisation de Flexbox pour centrer verticalement le texte */
    justify-content: space-between; /* Centrer horizontalement le texte */
    align-items: center; /* Centrer verticalement le texte */
    flex: 2; /* Le niveau de la phrase prend 1/2 de l'espace disponible */
    padding: 20px 0; /* Ajouter un espace autour de la phrase */
   
}

.right p a{
    margin: 0; /* Supprimer les marges par défaut du paragraphe */
    /* font-size: 18px; Taille de police du texte */
    align-items: center;
    color: white;
    font-size: calc(1rem + 1.5vw);
    font-family: monospace;
}

.right p a:hover{
    text-decoration: underline;
    transform: scale(2);
}

.right p a:active{
    color: rgb(187, 182, 182);
}


@media screen and (max-width: 1024px) {
    .left img{
        border: 3px solid white;
    }
}

@media screen and (max-width: 480px) {
    .left img{
        border: 3px solid white;
        /* width: 150%; */
    }
    .right p a{
        font-size: 1em;
    }
}

/*###########################################################################################################################*/


.erreur_ordinateur{
    display: block;
    text-align: center;
    margin: 50px auto;
}

/* .erreur_ordinateur img{
    width: 500px;
}

.erreur_telephone{
    display: none;
    text-align: center;
} */


.erreur{
    text-align: center;
    color: white;
    font-family: monospace;
    margin-bottom: 50px;
    font-size: calc(0.5rem + 1.5vw);
}

@media screen and (max-width: 1024px) {
    .erreur_ordinateur img{
        width: 300px;
    }
}

@media screen and (max-width: 480px) {
    .erreur_ordinateur img{
        width: 150px;
    }
}

@media screen and (max-width: 370px) {
    .erreur_ordinateur img{
        width: 120px;
    }
    .erreur{
        font-size: 1em;
    }
}