/******************* BASE ********************/

body {
	background-color:rgba(0, 0, 0, 0);
	margin:0vw;

}

a {
	transition: all 0.3s ease-in-out;
	font-family: "Cal Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	letter-spacing: 1.5px;
	text-decoration: none;
	color:#E8C256;
}

a:hover {
	letter-spacing: 4px;
}

p {
	font-size:calc( 6px + 0.8vw );
	color:#311F41;
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

h1 {
	font-size:calc(20px + 4.2vw);
	font-family: "Cal Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height:1;
	color:#8A3356;
}

h2 {
	font-size:calc(10px + 1.3vw);
	font-family: "Cal Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#311F41;

}

img {
}

/******************* MENU & HAUT DE PAGE ********************/

#logo {
    position: fixed;
    transition: all 0.08s ease-in-out;
    right: 0;
    width:calc(60px + 5vw);
    z-index: 98;
}

#logo:hover {
}

.menu {
	position:fixed;
	width:calc(130px + 10vw);
	right:calc(60px + 5vw);
	margin-top:1vw;
	z-index: 99;
}

.boutonmenu {
	text-align:right;
	margin:0.5vw;
	font-size:22px;
}
/********************** HEADER **********************/

.stickers {
	background-image:url('images/stickers/01.jpg');
	background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;
}

.douarn {
	background-image:url('images/douarneniste/1.jpg');
	background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;
}

.workshop {
	background-image:url('images/workshop/illu.jpg');
	background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;
}

.course {
	background-image:url('images/course/6.jpg');
	background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;
}

.escargot{
	background-image:url('images/escargotclub/04.png');
	background-size: auto 100%; 
    background-position: center;
    background-repeat: no-repeat;
}

.cinematheque {
	background-image:url('images/cinematheque/imagefond.jpg');
	background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;
}

.header {
	color:rgb(0,0,0,0);
	height:calc(300px + 15vw);
}

/******************* PAGE ********************/

.grdcpres {
    color:rgb(0,0,0);
    display:flex;
	background-color: #FDFDED;
	padding:2vw 2vw 2vw 6vw;
	border-top:solid 1px #8A3356;
}

.pttpres1 {
	width:55%;
}

.pttpres2 {
	padding:3vw 0vw 0vw 3vw;
	border-left:1px solid #8A3356;
	width:40%;
}

.titre1 {
	margin-top:-30px;
}

.titre2 {
	margin-top:-30px;

}

.ligneboutons {
	background-color:#FDFDED;
	padding:0vw 8vw 2vw 6vw;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0vw;
	border-bottom:solid 1px #8A3356;
}

.boutons {
	flex: 1 1 35;
	background-color:rgb(0, 0, 0, 0);
	border-radius:50px;
	border:2px solid #8A3356;
	text-align:center;
	padding:6px 35px 5px 35px;
	margin:1vw 0vw 0 5vw;
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
	font-weight:900;
	font-size:18px;
	color:#8A3356;
	transition: all 0.4s ease;
}

.spe {
	width:40%;
	text-align:center;
	margin-left:3vw;
	color:#8A3356;
}

.spe a {
	color:#8A3356;
}

.spe a:hover {
	color:#E8C256;
}

.boutons:hover {
	border:2px solid #E8C256;
	color:#E8C256;
}

.gallerie {
	display:block;
	background-color:#311F41;
	padding: 4vw;
}

.bandeau {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:2vw;
}

.cases {
	flex:1 1 25%;
	transition: transform 1s ease;
	background-color:white;
	margin:0.5vw;
	overflow:hidden;
	height:calc(300px + 10vw);
	border-radius:5px;
	border:solid 1px #E8C256;
	display:flex;
	justify-content: center;
    align-items: center;
}

.cases:hover {
	transform: scale(1.2);
}

/**************** BAS DE PAGE *********************/

.ligne-contact {
	background-color:red;
	height:45px;
	position:fixed;
	bottom:0px;
	width:100vw;
	text-align:center;
	z-index:99;
	font-family:"Helvetica", sans-serif;
}

.case-contact {
	display:inline-block;
	margin:6px 3vw 0vw 3vw;
}

.case-contact button {
	background-color:;
	border-radius:30px;
	height:30px;
	padding:0px 6px 0px 6px;
	border:0;
}


@media screen and (min-width:651px) and (max-width : 950px) {


.header {
	background-size: 160% auto; 
	height:calc(300px + 10vw);
}

.spe {
	width:60%;
	text-align:center;
	margin-left:3vw;
	color:#8A3356;
}

.gallerie {
	display:block;
	padding: 4vw;
}

.bandeau {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:2vw;
	object-position:center;
}

.cases {
	flex:1 1 45%;
	transition: transform 3s ease;
	background-color:white;
	margin:0.5vw;
	overflow:hidden;
	height:calc(300px + 10vw);
	border-radius:5px;
}

.cases:hover {
	transform: scale(1.3);
}

.cases img {
	height: 140%;	
}

}

/******************* CONTACT ********************/

.ligne-contact {
	background-color:rgb(0,0,0,0);
	position:fixed;
	bottom:140px;
	left:0px;
	left:0px;
	z-index:99;
}

.case-contact {
	display:block;
	margin:1vw 0vw 0vw 1vw;
	text-align:left;
}

.case-contact button {
	background-color:rgb(49,31,65,0);
	border-radius:30px;
	height:35px;
	width:35px;
	border:0;
	padding:0px;
	transition: all 0.6s ease-in-out;
}

.case-contact button:hover{
	background-color:rgb(49,31,65,0.7);
}

.case-contact img {
	height:35px;
	width:35px;
}

.case-contact a {
	font-weight:400;
	color:rgb(232,194,86,1);
	font-family:"parkinsans", sans-serif;
}


/******************* FOOTER ********************/

.footer {
	color:#E0DFDC;
	background-color:#311F41;
	font-weight:100;
	font-size:10px;
	height:220px;
	display: flex;
	font-family:"Parkinsans", sans-serif;
	overflow:hidden;
}

.case-footer {
	flex: 1;
	line-height: 0.8;
	margin:4vw;
}

.c-case-footer{
	flex:1;
	line-height: 1.4;
	margin:2vw 4vw 4vw 80px;
}

.footer a {
	font-weight:100;
	color:#E0DFDC;
}

.footer a:hover {
	letter-spacing: 3px;
}

.case-footer img {
	z-index:100;
	height:auto;
	margin:0vw 0vw 0vw 0vw;
	width:25vw;
	justify-content: center; /* Centre les éléments horizontalement */
	align-items: center;
}

.case-footer h4 {
	font-size:calc( 4px + 1vw );
	font-weight:100;
}

.c-case-footer h4 {
	font-size:18px;
	font-weight:100;
}


@media screen and (min-width:0px) and (max-width : 650px) {


h2 {
	font-size:22px;
}

p {
	font-size:15px;
}

.header{
	background-size: 160% auto; 
	height:calc(300px + 10vw);
}

.grdcpres {
	display:block;
}

.pttpres1{
	width:100%
}

.pttpres2{
	width:85%
}
.ligneboutons {
	background-color:#FDFDED;
	padding:0vw -20vw 0vw 0vw;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0vw;
	/*border-bottom:solid 1px rgb(0, 0, 0, 0);*/
}

.boutons {
	padding:10px 35px 5px 35px;
	margin:5vw 0vw 0 5vw;
}

.boutons:hover {
	/*border:2px solid rgb(0, 0, 0, 0);
	color:rgb(0, 0, 0, 0);*/
}

.spe {
	width:50%;
	border:0px solid black;
	background-color:#E8C256;
	text-align:center;
	margin-left:10vw;
	color:white;
}

.gallerie {
	background-color: #FDFDED;
	
}

.bandeau{
	display:block;
	border:0px solid black;
}

.cases {
	background-color:white;
	margin:5vh 0vh 0vh 0vh;
	overflow:hidden;
	height:calc(300px + 10vw);
	border-radius:5px;
}

.cases:hover {
	transform: scale(1);
}

.cases img {
	height: 140%;	
}

.footer {
	font-weight:100;
	font-size:10px;
	height:210px;
}


.c-case-footer{
	flex:1;
	line-height: 1.4;
	margin:2vw 4vw 4vw 50px;
}

.footer a {
	font-weight:100;
	color:#E0DFDC;
}

.footer a:hover {
	letter-spacing: 2px;
}

.case-footer img {
	z-index:100;
	height:auto;
	margin:0vw 0vw 0vw 0vw;
	width:0vw;
	justify-content: center; /* Centre les éléments horizontalement */
	align-items: center;
}

.case-footer h4 {
	font-size:10px;
	font-weight:100;
}

.c-case-footer h4 {
	font-size:14px;
	font-weight:100;
}


}