@charset "UTF-8";
/* CSS Document */
 
 
* {
    margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
header{
    grid-row: 1/2;
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
	padding: 1vw;
	background-color: rgba(0, 0, 0, 0.5);
	height: 6rem;
	max-height: 9rem;
	width: 100vw;
}
 
footer{
    bottom: 0;
    width: 100%;
    left: 0;
    grid-row: 6/7;
	grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
}
 
body{
    width: 100%;
    margin: 0 auto;
}

/*-------------------------debut du header-------------------------*/

.gridcontainer{
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
	width: 100%;
}
 
.backgroundpage{
    background-image: url("../images/Fichier 1@4x.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
 
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 100%;
    padding: auto;
    margin: 0px;
    width: 100%;
	gap: 2vw;
}
 
.logo{
    width: 60%;
    max-height: 60%;
    justify-content: flex-start;
}

.homelogo:hover{
	transform: scale(1.02);
}
 
.homelogo{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1vw;
    padding-right: 2vw;
    width: 100%;
	transition: transform 0.6s ease-in-out;
}
 
.headercolumn{
    flex: 1;
    text-align: center;
	max-width: 50%;
}
 
.header .headercolumn:nth-child(2) {
    flex: 2;
}
 
.homelogo a{
    display: flex;
    align-items: center;
    max-width: 50vw;
	min-width: 25vw;
}
 
.menubox{
    font-family: "roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
	color: rgba(0,0,0,1);
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 100pt;
    padding: 1vh 2vw;
    font-size: clamp(0.75rem, 0.75vw, 1rem);
}
 
a{
    color: inherit;
    text-decoration: none;
}
 
.nav-link{
    font-size: 1.2em;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.7);
    transition: background-color 0.8s ease, border-radius 0.8s ease, padding 0.8s ease, color 0.8s ease, transform 0.8s ease;
    transform: scale(1);
}
 
.nav-link:hover{
    background-color: rgba(255,255,255, 0.8);
    border-radius: 100pt;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 4%;
    padding-right:4%;
    color: rgba(178, 17, 43, 1);
	transform: scale(1.1) ease;
}
 
.buyvinyl{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
 
.buyvinyl a{
    display: flex;
    align-items: center;
	color: rgba(178, 17, 43, 0);
	transition: transform 0.6s ease, color 0.6s ease;
}
 .buyvinyl a:hover{
   transform: scale(1.1);
	color: rgba(178, 17, 43, 1);
}
.buytext{
    font-family: "roboto-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1rem, 4vw, 2rem);
	justify-content: center;
}

.logovinyl{
    height: 4vh;
	width: auto;
    padding-left: 1vh;
    padding-right: 2vh;
}
 
@media (max-width: 1024px) {
	body{
		min-width: 100vw;
	}
	
	
	.header {
        display: flex;
        padding: 1vh 2vw;
		min-width: 100vw;
    }
    
    .buyvinyl{
        margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: flex-end;
    }
	
	.logovinyl{
		max-height: 3vh;
		min-height: 1vh;
	}
    
    .homelogo{
        margin-left: 0vw;
		min-width: 10rem;
		max-width: 25vw;
    }
    
    .headercolumn{
        width: 100vw;
        align-items: flex-start;
		flex: 1;
		
    }
    .menubox{
        margin: 1vh 0;
        margin-left: 1vw;
        min-width: 30vw;
        font-size: clamp(0.40rem, 1.3vw, 1rem);
		display: flex;
		flex-direction: row;
		gap: 1rem;

    }
	header{
		height:8.5rem;
		max-height: 8.5rem;
	}
	.buyvinyl a{
    display: flex;
    align-items: center;
	color: rgba(178, 17, 43, 1);
	}
}
 
@media (max-width: 480px) {
	body{
		min-width: 100vw;
	}
	.header {
        display: flex;
        padding: 1vh 2vw;
		min-width: 100vw;
    }
    
    .buyvinyl{
        margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: flex-end;
    }
	
	.logovinyl{
		max-height: 3vh;
		min-height: 1vh;
	}
    
    .homelogo{
        margin-left: 0vw;
		min-width: 5rem;
		max-width: 30vw;
    }
    
    .headercolumn{
        width: 100vw;
        align-items: flex-start;
		flex: 1;
    }
	
    .menubox{
        margin: 1vh 0;
        margin-left: 1vw;
        min-width: 30vw;
        font-size: clamp(0.45rem, 0.75vw, 0.75rem);
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
    }
	
	header{
		height:8.5rem;
		max-height: 8.5rem;
	}
	
	.buyvinyl a{
    display: flex;
    align-items: center;
	color: rgba(178, 17, 43, 1);
	}
}
/*-------------------------fin du header-------------------------*/



/*-------------------------debut du footer-------------------------*/

.footertext{
    font-family: "roboto-condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.7rem, 1.5vw, 1.5rem);
    color: #fff;
    opacity: 0.4;
}
 
.footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100vw;
    padding: 0vw 3vw 2vw;
    background: black;
	margin-top: 10%;
}
 
.iconessocialmediacontainer{
    display: flex;
    justify-content: flex-end;
    gap: 2vw;
	margin-top: 1.5vh;
    align-content: flex-end;
}
 
.footercolumn{
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.iconessocialmedia{
    height: auto;
    width: 3vw;
	transition: transform 0.7s ease;
	max-width: 1.5vw;
	align-content: flex-end;
}
 
.iconessocialmedia:hover{
    transform: scale(1.5);
}
 
.footerleft{
    flex-basis: 20%;
}
 
.footerright{
    display: flex;
    justify-content: flex-end;
}

 @media (max-width: 480px) {
    .iconessocialmedia {
        width: 2.5vw;
    }
	 .iconessocialmediacontainer{
		 display: grid;
		 grid-template-columns: 1fr 1fr 1fr;
	 }
	 .footerright{
		 justify-content: flex-end; 
	 }
}
 @media (max-width: 1024px) {
    .iconessocialmedia {
        min-width: 2.5vw;
    }
	 .iconessocialmediacontainer{
		 display: grid;
		 grid-template-columns: 1fr 1fr 1fr;
	 }
	 .footerright{
		 justify-content: flex-end; 
	 }
}
 /*-------------------------fin du footer-------------------------*/


/*-------------------------debut du contenu de page-------------------------*/
.titrepage{
    font-family: "roboto-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(0.5rem, 2vw, 3rem);
    padding: 1rem;
    text-align: center;
    grid-row: 2/3;
    justify-content: center;
	grid-column: 1/-1;
}

/*-------------------------debut du A propos-------------------------*/

.photos img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photocontainer {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    gap: 1vw; 
    grid-column: 1 /-1;
    grid-row: 3 / 6;
    padding: 1rem;
}
 
.photos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18%;
    height: 40vh;
	position: relative;
	overflow: hidden;
}

.names{
    position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 60%;
	padding: 0.5rem;
	color: rgba(255, 255, 255, 1);
	text-align: left;
	font-family: 'LEMON MILK', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

.description{
	font-family: 'General Sans', sans-serif;
 	font-weight: 200;
	font-style: italic;
	font-size: 0.9rem;
	text-align: justify;
	color: #fff;
}

.photos:hover .names{
	opacity: 1;
}

@media (max-width: 1024px) {
    .titrepage {
        font-size: clamp(1.2rem, 4vw, 3rem);
        padding: 1.5rem 1rem;
		align-items: center;
    }
	.names{
		opacity:1;
		font-size: 2.2vw;
	}
	
	.description{
		font-size: 1.6vw;
	}
	
	.photos {
        width: 25vw; 
    }
}
 
@media (max-width: 480px) {
    .titrepage {
        font-size: clamp(1rem, 5vw, 2.5rem);
        padding: 1rem 0.5rem;
		align-items: center;
    }
	
	.names{
		opacity:1;
		font-size: 3vw;
	}
	
	.photos {
        width: 40vw; 
    }
	
	.description{
		font-size: 2.2vw;
	}

}

	/*-------------------------fin du A propos-------------------------*/

/*-------------------------debut du nous joindre-------------------------*/

.contactcontainer{
	display: flex;
	gap: 2vw;
	padding: 1rem;
	grid-column: 1/13;
	grid-row: 3/6;
	align-items: center;
    justify-content: center;
}

.googlemapgadget{
	width: 100%;
    height: auto;
    max-width: 600px; 
    max-height: 450px;
}

.contactinfos{
	font-family: 'General Sans', sans-serif;
 	font-weight: 300;
	font-style: italic;
	font-size: clamp(1rem, 5vw, 2rem);
	line-height: 2;
}

@media (max-width: 1024px) {
    .contactcontainer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    	justify-content: center;
    }

    .googlemapgadget iframe {
        max-width: 90%; 
        height: auto;
		height: 30vh;
    }

    .contactinfos {
        font-size: clamp(1rem, 5vw, 2rem);
        text-align: left;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .googlemapgadget iframe {
        max-width: 100%;
		height: 30vh;
    }

    .contactinfos {
        font-size: clamp(1rem, 5vw, 5rem); 
    }
}

/*-------------------------fin du nous joindre-------------------------*/

/*-------------------------debut du evenements-------------------------*/

.evenementscontainer{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column: 1/13;
	grid-row: 3/6;
	gap: 1rem;
	padding: 1rem;
}

.evenement{
	display: flex;
	padding: 2rem;
	height: auto;
	gap: 1rem;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
}

.evenementimagedate{
	width: 50%;
	max-width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evenementimagedate img{
	height: auto;
	width: 100%;
	object-fit: contain;
}

.titreevenement{
	font-family: 'General Sans', sans-serif;
 	font-weight: 600;
	font-style: normal;
	font-size: clamp(2rem, 2.5vw, 2.5rem);
}

.lieuevenement{
	font-family: 'General Sans', sans-serif;
 	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.descriptionevenement{
	font-family: 'General Sans', sans-serif;
 	font-weight: 300;
	font-style: normal;
	font-size: clamp(1rem, 1.2vw, 1.5rem);
	text-align: justify;
}

.evenementdetails{
	width: 50%;
	max-width: 50%;
	flex: 1;
}

.evenementdate{
	display: flex;
	background-color: black;
	color: #fff;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
}

.jour{
	font-family: "roboto-condensed", sans-serif;
    font-weight: 600;
	font-size: 5vw;
}

.moisannee{
	font-family: 'General Sans', sans-serif;
 	font-weight: 200;
	font-style: normal;
	font-size: 2vw;
	text-align: center;
}

@media (max-width: 1024px) {
    .evenementscontainer {
        grid-template-columns: 1fr;
    }

    .evenement {
        flex-direction: row;
        width: 100%;
    }

    .evenementimagedate,
    .evenementdetails {
        width: 50%;
    }

    .jour {
        font-size: 8vw;
    }

    .moisannee {
        font-size: 3vw;
    }
}

@media (max-width: 480px) {
    .evenement {
        flex-direction: column;
        align-items: flex-start;
    }

	.evenementimagedate{
		width: 100%;
        text-align: left;
	}
    .evenementdetails {
        width: 100%;
        text-align: left;
		max-width: 100%;
    }

    .jour {
        font-size: 10vw;
    }

    .moisannee {
        font-size: 4vw;
    }
}

/*-------------------------fin du evenements-------------------------*/

/*-------------------------debut du carousel-------------------------*/

.photocarouselcontainer {
    width: 100%;
    position: relative;
    margin: 0 auto;
    grid-column: 1/-1;
    grid-row: 3/6;
    overflow: hidden;
    padding: 0 2rem;
}

.photocarousel {
    width: 100%;
    height: auto;
    position: relative;
    aspect-ratio: 16/9;
    max-height: 80vh; 
}

.carouselimage {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 3s ease-in-out;
    display: none;
}

.carouselimage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

input[type="radio"] {
    display: none;
}

#carousel-1:checked ~ .photocarousel #image-1,
#carousel-2:checked ~ .photocarousel #image-2,
#carousel-3:checked ~ .photocarousel #image-3,
#carousel-4:checked ~ .photocarousel #image-4,
#carousel-5:checked ~ .photocarousel #image-5,
#carousel-6:checked ~ .photocarousel #image-6,
#carousel-7:checked ~ .photocarousel #image-7,
#carousel-8:checked ~ .photocarousel #image-8,
#carousel-9:checked ~ .photocarousel #image-9 {
    display: block;
    opacity: 1;
}

.carousel-nav label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    z-index: 10;
}

.carousel-nav label:hover {
    background-color: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav label img {
    width: 35px;   
    height: 35px;  
    filter: brightness(0) invert(1); 
}

.prev {
    left: 30px;
}

.next {
    right: 30px;
}

#carousel-1:checked ~ .carousel-nav #prev-1,
#carousel-1:checked ~ .carousel-nav #next-1,
#carousel-2:checked ~ .carousel-nav #prev-2,
#carousel-2:checked ~ .carousel-nav #next-2,
#carousel-3:checked ~ .carousel-nav #prev-3,
#carousel-3:checked ~ .carousel-nav #next-3,
#carousel-4:checked ~ .carousel-nav #prev-4,
#carousel-4:checked ~ .carousel-nav #next-4,
#carousel-5:checked ~ .carousel-nav #prev-5,
#carousel-5:checked ~ .carousel-nav #next-5,
#carousel-6:checked ~ .carousel-nav #prev-6,
#carousel-6:checked ~ .carousel-nav #next-6,
#carousel-7:checked ~ .carousel-nav #prev-7,
#carousel-7:checked ~ .carousel-nav #next-7,
#carousel-8:checked ~ .carousel-nav #prev-8,
#carousel-8:checked ~ .carousel-nav #next-8,
#carousel-9:checked ~ .carousel-nav #prev-9,
#carousel-9:checked ~ .carousel-nav #next-9 {
    display: flex;
}

@media (max-width: 1024px) {
    .photocarousel {
        height: 70vh;
    }
    
    .carousel-nav label {
        width: 45px;
        height: 45px;
    }
    
    .carousel-nav label img {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .photocarousel {
        height: 60vh;
    }
    
    .carousel-nav label {
        width: 35px;
        height: 35px;
    }
    
    .carousel-nav label img {
        width: 20px;
        height: 20px;
    }

    .photocarouselcontainer {
        padding: 0 1rem;
    }
}

/*----------------------------fin du carousel-----------------------------*/

/*-------------------------fin du contenu de page-------------------------*/