/* style.css */
/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://example.com/twenty-twenty-one-child/
 Description:  Twenty Twenty-One Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyone-child
*/

/* Typefaces */
@font-face {
	font-family: 'INDEPENDENT Text';
	src: url('fonts/INDEPENDENT_Text-Regular.otf');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-RegularItalic.otf') format('opentype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-MediumItalic.otf') format('opentype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* General Site Design */
:root {
	--custom-font-size-xs: 1.25rem;
	--custom-font-size-sm: 1.625rem;
	--custom-font-size-md: 2.375rem;
	--custom-font-size-lg: 3.75rem;

	--custom-line-height-xs: 1.2rem;
	--custom-line-height-sm: 2rem;
	--global--line-height-body: 2rem;
	--custom-line-height-md: 2.6125rem;
	--custom-line-height-md: 4.125rem;
	/* --custom-line-height-xs: clamp(1.875rem, 3vw, 2.4375rem);
	--custom-line-height-sm: clamp(2rem, 2.75vw, 3.3125rem);
	--custom-line-height-md: clamp(3.3125rem, 5.3vw, 4.5rem);
	--custom-line-height-lg: clamp(4.5rem, 7.2vw, 5rem); */
}

.error-page h1 {
	font-family: 'Founders Grotesk' !important;
	margin-top: 13vw !important;
}

.error-page p {
	margin-top: 3vw;
	margin-left: 10px;
	font-family: 'INDEPENDENT Text';
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	margin-top: 0 !important;
}

body {
	background-color: #ffffff !important;
	margin-top: 11vw !important;
	color: #000 !important;
	border-bottom: 10vw;
}

.site-content {
	margin-left: 2.34375vw;
	margin-right: 2.34375vw;
	height: auto !important;
	position: relative;
	top: 1.5vw !important;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'INDEPENDENT Text', sans-serif !important;
}

h3 {
	font-size: 60px !important;
	line-height: 70px !important;
	/* padding-bottom: 0.1vw !important; */
}

p {
	font-family: 'Founders Grotesk';
	width: 40%;
	padding-bottom: 3vw !important;
	font-size: clamp(var(--custom-font-size-sm), 2vw, 1.5rem);
	line-height: 2rem !important;
}

.p2 {
	font-size: clamp(var(--custom-font-size-xs), 1.5vw, 1.25rem);
	line-height: 1.75rem !important;
	text-decoration: none;
}
.p3 {
	line-height: 1rem !important;
	width: max-content;
	white-space: nowrap;
}

.page-atelier a,
.atelier-presentation a {
	text-decoration: none;
	color: #0000EE;
	color: black !important;
}

.page-atelier a {
	display: block;
}

@media (max-width: 800px) {
	body {
		margin-top: 150px !important;
	}

	.site-content {
		margin-left: 15px;
		margin-right: 15px;
	}

	h3 {
		font-size: clamp(2.25rem, 2.7125vw, 3rem) !important;
		line-height: 50px !important;
	}

	.site-foot .p2 {
		line-height: 1rem !important;
	}
}

@media (max-width: 1200px) {

	p {
		width: 100% !important;
	}
}

@media (min-width: 2201px) {
	.first-col,
	ul,
	p {
		width: 33% !important;
	}

	.atelier-presentation p {
		width: 60% !important;
	}

	#program-grid p {
		width: 33% !important;
	}

}


/* Pratique */
#googlemap {
	margin-top: 1vw;
	margin-bottom: 1vw !important;
}

.address-pratique {
	padding-top: 1vw;
	padding-bottom: 0 !important;
}





/* Ateliers */
.atelier-map {
	display: flex;
	width: 100%;
	height: auto;
	vertical-align: middle;
	justify-content: center;
}

.atelier-map img {
	width: 80vw !important;
	height: auto;
	vertical-align: middle;
}

.ateliers-cont {
	padding-bottom: 3vw;
}

.atelier-image {
	width: 72vw;
	height: 48vw;
	overflow: hidden;
	display: block;
	position: relative;
	margin-bottom: 3px;
	object-fit: cover;
}

.atelier-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.page-atelier p {
	width: 57.5%;
	text-align: left;
}

.page-atelier h3 {
	width: auto;
}

.ateliers-cont h3 {
	position: relative;
	line-height: 35px !important;
}
@media (max-width: 1050px) {
	.ateliers-cont h3 {
		line-height: 50px !important;
	}
}

.number {
	display: inline-flex;
	position: static;
	font-family: 'Founders Grotesk';
	width: 2.2vw;
	height: 2.2vw;
	background-color: #FF0089;
	color: white;
	border-radius: 50%;
	vertical-align: 55%;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.title-number-cont {
	display: flex;
	align-items: flex-start;
	align-items: center;
	margin-top: 25px;
}

.ateliers-cont h3 {
    position: relative;
    display: inline-flex;
    margin-bottom: 27px;
}

.pastille {
	height: 46px;
	margin-top: -50px;
	margin-left: 12px;
}

/* Ateliers Hover */
#_1:hover, #_2:hover, #_3:hover,
#_4:hover, #_5:hover, #_6:hover,
#_7:hover, #_8:hover, #_9:hover {
  cursor: pointer;
}

svg .names {
  visibility: hidden;
}

/* Tooltip styling */
#tooltip {
	font-family: 'Founders Grotesk';
	position: fixed !important;
	visibility: hidden;
	background: black;
	color: white;
	padding-top: 8px !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	border-radius: 0px !important;
	white-space: pre;
	z-index: 10;
	font-size: clamp(var(--custom-font-size-sm), 2vw, 38px) !important;
	top: 16vw;
}

#tooltip {
	position: absolute;
	visibility: hidden;
	background: black;
	color: white;
	z-index: 1000; /* Make sure it's on top of other elements */
	pointer-events: none; /* Initially, don't allow interactions */
	font-size: clamp(var(--custom-font-size-sm), 2vw, 38px) !important;
	top: 16vw;
}
  
  #tooltip a {
	color: white !important;
	text-decoration: none;
	pointer-events: auto; /* Enable interaction with the links */
	visibility: inherit;
  }
  

@media (max-width: 800px) {
	.atelier-image {
		width: 100%;
		height: 100%;
	}

	.number {
		width: 3.3vw;
		height: 3.3vw;
		vertical-align: 70%;
	}

	.pastille {
		height: 33px;
		/* margin-bottom: 20px; */
		margin-top: -40px;
	}

	.title-number-cont {
		margin-top: 10px;
	}
}

@media (max-width: 430px) {
	#atelier-poisson,
	#atelier-troillet,
	#atelier-empreintes,
	#atelier-gaist,
	#atelier-interval,
	#atelier-schauenberg,
	#atelier-muller,
	#atelier-lorenz,
	#atelier-munari,
	#atelier-meca,
	#atelier-pc,
	#atelier-pont12,
	#atelier-violaine {
		max-width: min-content !important;
	}

	p {
		font-size: var(--custom-font-size-xs);
		line-height: 20px !important;
	}
}


/* Pages Ateliers */
.atelier-presentation {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}

.atelier-page-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5625vw;
	width: 100%;
	margin: 1.5625vw 0 1.5625vw 0 !important;
}

.atelier-page-grid img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.atelier-presentation h3 {
	padding-bottom: 1vw;
}

.atelier-presentation h3,
.atelier-presentation p {
	grid-column: 1 / 3;
	width: 90%;
	margin: 0;
	padding-bottom: 0.5vh;
	justify-content: left;
}

.atelier-presentation h3 {
	grid-column: 1 / 4 !important;
	width: 150%;
}

.atelier-presentation .text-container {
	grid-column: 1 / 3;
	grid-row: 1;
	width: 100%;
}

.presentation-container {
	/* width: 31.2vw; */
	grid-row: 1;
	grid-column: 4;
	align-self: start;
	justify-self: end;
}

.atelier-presentation .p2 {
	/* width: 31.2vw !important; */
	padding-top: 25px;
	line-height: 20px !important;
	width: 100%;
}

.photo-pres {
	grid-row: 1;
	grid-column: 4;
	justify-self: end;
	align-self: start;
	width: auto;
	height: auto;
}

#js1,
#js2,
#js3 {
	width: 62%;
	grid-column: span 2;
}

#km-italic {
	font-style: italic;
}

#km1,
#km4,
#p12-1,
#p12-4,
#p12-5,
#poisson2,
#poisson4,
#poisson7,
#interval-atelier-pres,
#interval-bulle,
#e-e-3 {
	grid-column: span 2;
}

.atelier-landscape-image {
	grid-column: span 2;
}

/* Navigation Atelier */
.navigation-atelier {
	display: flex;
	justify-content: space-between;
	padding-top: 5vw;
}

.nav-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: rgba(0, 0, 0, 1);
}

.nav-link p {
	margin: 0 16px;
	padding: 0 !important;
	width: 100%;
	margin-top: 9px;
}

.nav-link img {
	display: block;
}

.next img {
	transform: scaleX(-1);
}

.works {
	grid-column: 1 / 3;
	width: 66% !important;
}

@media (max-width: 800px) {
	.atelier-page-grid {
		grid-template-columns: 1fr;
	}
	.atelier-page-grid img {
		grid-column: span 1;
	}
	#js1,
	#js2,
	#js3 {
    	width: 100%;
	}

	#km1,
	#km4,
	#p12-1,
	#p12-4,
	#p12-5,
	#poisson2,
	#poisson4,
	#poisson7,
	#interval-atelier-pres,
	#interval-bulle,
	#e-e-3 {
		grid-column: span 1;
	}

	.atelier-presentation {
		display: block;
		flex-direction: column-reverse;
		gap: 1.5625vw;
	}

	.atelier-landscape-image {
		grid-column: span 1;
	}

	.presentation-container {
   		width: 100% !important;
	}

	.atelier-presentation .p2 {
		width: 100% !important;
	}
	.nav-link p {
		font-size: 16px;
		margin-top: 5px;
	}

	.atelier-presentation h3,
	.atelier-presentation p {
	grid-column: 1;
	width: 100% !important;
	margin: 0;
	}

	.photo-pres {
		width: 50% !important;
	}

	svg {
		width: 100%;
	}

	#tooltip {
		top: 50vw;
		font-size: 18px !important;
	}

}

@media (max-width: 1200px) {

	.atelier-presentation h3,
	.atelier-presentation p {
		grid-column: 1;
		width: 100% !important;
		margin: 0;
	}

	.atelier-presentation h3 {
		grid-column: 1/4;
	}
}


.acces {
	font-family: 'Founders Grotesk' !important;
	font-size: 1.3rem;
	line-height: 1.4rem;;
}

/* Portes Ouvertes */
#titre-portes-ouvertes {
	padding: 0 !important;
}

#affiche-po {
	width: 50%;
	position: relative;
	background-color: #FF0089;
	margin-bottom: 3vw;
}

#contenuaffichepo {
	width: 61.25vw;
	padding: 1.5%;
	object-fit: contain !important;
	padding: 0 !important;
}

#contenuaffichepo, #homepagenews {
	padding: 0 !important;
}

.button-wrapper {
    display: flex;
	flex-direction: column;
	align-items: flex-start; 
    align-items: center; /* Vertical alignment */
	width: 7.5%;
}

#prog-download {
	width: 7.5vw !important;
	height: auto;
	margin-top: 6px;
}

#download-button {
	width: 50%;
	align-items: center;
}

hr {
	width: auto;
	margin: 0.5px !important;
	background-color: #000;
	margin-top: 2vw !important;
	margin-bottom: 2vw !important;
}

#portes-ouvertes-para {
	font-family: 'INDEPENDENT Text';
	width: 750px !important;
}

/* Programme de la journée */
#program-grid {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 3vw;
}

.first-col,
.second-col {
	flex: 1;
}

.first-col> :first-child,
.second-col> :first-child {
	margin-top: 0;
}

.first-col {
	flex: 1;
	font-size: clamp(var(--custom-font-size-sm), 2vw, 1.5rem);
	width: 40%;
	padding: 0 1.5625vw 0 0;
}

#program-grid ul {
	font-family: 'Founders Grotesk';
	font-size: clamp(var(--custom-font-size-sm), 2vw, 1.5rem);
	list-style-type: none;
	width: 60%;
	padding-left: 1.5rem;
	max-width: 100%;
	list-style-type: disc;
	padding-left: 1.5rem !important;
	line-height: 2rem;
}

#program-grid .first-list {
	/* margin-top: -8px; */
}

#program-grid li {
	overflow-wrap: break-word;
	word-wrap: break-word;
	max-width: 100%;
}

#program-grid p {
	width: 100%;
	padding: 0 !important;
}

ul {
	font-size: clamp(1.4rem, 4vw, 1.8rem);
	padding-left: 1rem !important;
}

#progdelajournee {
	font-size: 38px !important;
	font-family: 'Founders Grotesk' !important;
	padding: 0 0.66vw 0 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	font-weight: 700 !important;
}

.tab {
	list-style-type: none;
}

#img-po {
	width: 100%;
	margin-bottom: 5vw;
}

#program-grid strong {
	font-size: 32px;
	line-height: 33px;
	margin-top: 5vw !important;
}

.second-col-list li {
	list-style: none;
	padding: 0 !important;

}

#program-grid ul.second-col-list {
	padding-left: 0 !important;
}

#program-grid.first-col p {
	width: 90%;
}

@media (max-width: 1200px) {
	#program-grid {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	#program-grid p {
		line-height: 4.5vw;
		width: 100% !important;
	}

	#program-grid ul {
		width: 100% !important;
	}
	#program-grid li {
		width: 100% !important;
	}
	.first-col {
		width: 100%;
	}
	
	.button-wrapper {
		width: 15vw !important;
	}

	#prog-download {
		width: 100vw !important;
	}

	#affiche-po {
		width: 100%;
	}

	#contenuaffichepo {
		width: 100%;
	}
	
}







/* Actualités */
#actu-grid {
	display: grid;
	grid-template-columns: repeat(2, 46.875vw);
	grid-template-rows: repeat(3, 31.25vw);
	gap: 1.5625vw;
	justify-content: center;
	margin-bottom: 5vw;
}

.actualite:hover {
	cursor: pointer;
}

#actu-grid>div {
	width: 46.875vw;
	height: 31.25vw;
	position: relative;
	background-color: #FF0089;
	display: grid;
	color: white;
	padding: 1vw;
	box-sizing: border-box;
	font-family: 'Founders Grotesk', sans-serif;
}

#actu-grid img {
	width: 100%;
	height: 100%;
	object-position: top center;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#actu-grid h3 {
	font-family: 'INDEPENDENT Text';
	font-size: 60px !important;
	line-height: 60px !important;
	width: 100%;
	margin-top: -30px;
	z-index: 3;
}

@media (max-width: 1650px) {
	#actu-grid h3 {
		font-size: 48px !important;
		line-height: 48px !important;
		margin-top: -50px !important;
	}
}

@media (max-width: 1180px) {
	#actu-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, calc(66.66667vw - 30px));
		gap: 1.5625vw;
	}

	#actu-grid>div {
		width: 100%;
		height: 100%;
		padding: 1vw;
	}

	#actu-grid p {
		margin-top: 1vw;
		padding: 1.5%;
		width: 100%;
	}

	h3 {
		margin-top: -5px !important;
		padding-bottom: 2vw !important;
	}
}

@media (max-width: 590px) {
	#actu-grid h3 {
		font-size: 6vw !important;
		line-height: 6.2vw !important;
		margin-top: -35px !important;
	}
	
}


/* Actu Event */
.news-page {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5625vw
}

.news-page h3 {
	font-family: 'INDEPENDENT Text' !important;
}

.news-page p {
	width: 100% !important;
}

.affiche-event {
	width: 100%;
	height: auto;
}

.news-object,
.affiche-event {
	grid-column: 1 / 2;
}

#flyer {
	position: absolute;
	right: 0;
	top: 0;
	width: 20%;
	height: auto;
	border: 1px solid black;
}

@media (max-width: 1200px) {
	.news-page {
		grid-template-columns: 1fr;
	}

	.news-object,
	.affiche-event {
		grid-column: 1 / 1;
	}

	#silvia2 {
		object-fit: cover;
	}

	#flyer {
		position: relative;
		display: grid;
		width: 100%;
		height: 100%;
	}
}



/* Aujourd'hui Gallery */
.gallery-container {
	top: 0;
	position: relative;
}

.gallery-slide img {
	display: none;
}

.gallery-prev {
	position: absolute;
	top: 50%;
	left: 1.5vw;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.2);
}

.gallery-next {
	position: absolute;
	top: 50%;
	right: 1.5vw;
	color: rgba(255, 255, 255, 0.2);
	transform: translateY(-50%) scaleX(-1);
}

.gallery-slide img {
	width: 100%;
	height: auto;
	display: block;
	padding-top: 1vw;
	padding-bottom: 0.75vw;
	zoom: 2;

}

#leftarrow,
#rightarrow {
	box-sizing: content-box;
	vertical-align: top;
	height: 3vw;
	width: auto;
	margin: 0;
	padding: 0;
	opacity: 0.6;
}

.gallery-prev:hover,
.gallery-next:hover {
	cursor: pointer;
}

@media (max-width: 768px) {

	#leftarrow,
	#rightarrow {
		height: 6.5vw;
	}

	.gallery-prev,
	.gallery-next {
		top: 50%;
		/* transform: translateY(-50%); */
	}
}





/* Galerie */
.galerie-grid {
	display: grid;
	gap: 1.5625vw;
	grid-template-columns: 1fr 1fr;
	padding-bottom: 3vw;
	width: 100%;
	box-sizing: border-box;
}

.gallery-image {
	height: 100%;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	justify-content: flex-end; 
}

.gallery-slide {
	display: flex;
	height: 750px;
	justify-content: flex-end; 
	overflow: hidden;
}

#galerie1,
#galerie2,
#galerie3,
#galerie6 {
	grid-column: span 2;
}

@media (max-width: 738px) {

	.galerie-grid {
		grid-template-columns: 1fr;
	}

	#galerie1,
	#galerie2,
	#galerie3,
	#galerie6 {
		grid-column: span 1;
	}

	#image-cont {
		grid-template-columns: 1fr;
		margin-top: 0px;
	}
}





/* Histoire */
.histoire-image {
	width: 62.2% !important;
}

.histoire-texte {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
}

.histoire-texte p {
	overflow: hidden;
	position: relative;
	z-index: 0;
	padding-top: 5px;
}
.histoire-texte .first-line {
	font-weight: 450;
}

.histoire-cont {
	padding-bottom: 1.5vw;
}

.histoire-cont h3 {
	font-family: 'Founders Grotesk' !important;
	padding-top: 35px;
	padding-bottom: 10px;
	line-height: 40px !important;
}

.histoire-texte p:not(.expanded):after {
	content: "";
	position: absolute;
	bottom: 0;
	z-index: 2;
	left: 0;
	width: 100%;
	height: 4vw;
	pointer-events: none;
}

.expand-btn {
	color: #000 !important;
	font-size: 60px !important;
	font-weight: 100 !important;
	background: none !important;
	background-color: #ffffff !important;
	border: none;
	padding: 0;
	grid-column: span 2;
	justify-self: start;
	outline: none !important;
	line-height: 30px;
}

.p1 {
	width: 100%;
	font-size: clamp(var(--custom-font-size-md), 2.5vw, 3rem) !important;
	line-height: 2.2rem !important;
}

 
.histoire-texte {
	grid-template-columns: 1fr;
}

.histoire-texte p {
	max-height: 12vw;
	display: none;
}

.histoire-texte p:first-child {
	display: block;
}

.histoire-texte p.expanded {
	max-height: none;
	padding-bottom: 0 !important;
}

.p1 {
	width: 100%;
	font-size: clamp(var(--custom-font-size-md), 2.5vw, 3rem) !important;
}

@media(max-width: 1000px)  {
	.histoire-image {
		width: 100% !important;
	}

	.histoire-texte p {
		max-height: 48vw;
	}
}

.histoire-cont {
	padding-bottom: 4vw;
}

.histoire-texte .expand-btn {
	display: block;
	grid-column: auto;
}


/* Responsive Homepage Design using CSS Grid */
#image-cont {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5625vw;
}

#rectanglemk:hover,
#femmetableau:hover {
	cursor: pointer;
}

.image-set {
	display: grid;
	grid-template-rows: auto auto;
	gap: 1.5625vw;
	position: relative;

}

#portesouvertes,
#femmetableau,
#atelierpoisson {
	grid-row: span 2;
	width: 46.875vw;
	height: 64vw;
	position: relative;
}

#portesouvertes {
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.landscape-images,
.right-set {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	gap: 1.5625vw;
}

#roger2,
#histoire3,
#captatelier,
#homepagenews,
#atelierinterval {
	width: 46.875vw;
	height: 31.25vw;
}

#homepagenews {
	background-color: #FF0089;
	display: grid;
	color: white;
	padding: 1vw;
	box-sizing: border-box;
}

#homepagenews h3 {
	font-family: 'INDEPENDENT Text', sans-serif !important;
	margin: 0;
}

#rectanglemk,
#acperrier {
	width: 100%;
	height: 64vw;
	grid-column: span 2;
}

#roger2:hover,
#histoire3:hover,
#captatelier:hover,
#homepagenews:hover,
#atelierinterval:hover,
#atelierpoisson:hover,
#acperrier:hover,
#portesouvertes {
	cursor: pointer;
}

.small-vertical {
	width: 22.65625vw;
	height: 31.25vw;
}

.double-vertical {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5625vw;
}

#image-cont a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

a img {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
}

.bg-image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100% !important;
	height: 100% !important;
}

/* HOMEPAGE HOVER EFFECT */
.image-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.image-container#atelierpoisson-container,
.image-container#po-container {
	grid-row: span 2;
}

.image-container.small-vertical-container {
	height: auto;
}

.image-container .image-description {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	height: 2vw;
}

.image-container:hover .image-description {
	opacity: 1;
}

.image-container#rectanglemk-container {
	grid-column: span 2;
}
	
@media (max-width: 800px) {
	/* Reset any grid or width settings to ensure a single column layout */
	#image-cont {
		grid-template-columns: 1fr !important; /* One column only */
		gap: 1.5625vw !important; /* Maintain gap */
	}

	/* Ensure that all images and containers take full width */
	.image-container, 
	.image-set, 
	.landscape-images, 
	.right-set, 
	.double-vertical,
	.bg-image {
		width: 100% !important; /* Full width */
		height: auto !important; /* Adjust height automatically */
		grid-column: 1 / -1 !important; /* Span full width */
		grid-row: auto !important; /* Reset any specific row settings */
		margin-top: 0 !important; /* Reset any specific top margin settings */
	}

	/* Target individual image styles if they have different settings */
	#portesouvertes, 
	#femmetableau, 
	#atelierpoisson, 
	#rectanglemk, 
	#homepagenews, 
	#acperrier,
	#roger2, 
	#histoire3, 
	#captatelier, 
	#atelierinterval,
	.small-vertical {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		height: auto !important;
		object-fit: cover !important;
	}

    #homepagenews {
        width: 100% !important;
        height: 63vw !important;
        padding: 1vw !important;
        box-sizing: border-box;
        display: grid !important;
        grid-template-rows: 1fr !important;
        /* margin-bottom: 1.5625vw; */
    }

	/* Ensure that no images are spanning more than one column */
	.image-container[style*="grid-column: span 2"],
	.image-container[style*="grid-row: span 2"] {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	#homepagenews h3 {
		padding-top: 10px;
		padding-left: 5px;
		font-size: 26px !important;
		line-height: 27px !important;
	}

	.image-description {
		height: 7.5vw !important;
	}
}

@media (max-width: 1200px) {
	#homepagenews h3 {
		font-size: var(--heading--font-size-h3) !important;
	}

}

.asso, .h4 {
	font-family: 'Founders Grotesk' !important;
}

/* Menu Styles */
.custom-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 550px;
	background-color: black;
	display: none;
	z-index: 2000;
	align-items: center;
	justify-content: center;
}

.custom-menu-overlay ul {
	list-style: none;
	padding: 0;
	text-align: left;
	width: auto;
	position: relative;
	top: 1.71875vw;
	left: 2.34375vw;
	z-index: 200;
}

.custom-menu-overlay a {
	color: white !important;
	text-decoration: none;
	transition: color 0.3s ease;
	font-size: 60px;
	z-index: 2000;
	font-family: 'INDEPENDENT Text';
}

.custom-menu-overlay a:hover {
	color: #FF0089 !important;
}

.menu-logo img,
.close-menu img {
	position: absolute;
	height: 4.9479vw;
	width: 4.16667vw;
	top: 1.71875vw;
	z-index: 10000;
}

.menu-logo img {
	position: absolute;
	height: 4.9479vw;
	width: 4.16667vw;
	top: 1.71875vw;
	right: 2.34375vw;
	cursor: pointer;
}

.close-menu img {
	width: 3.4896vw;
	height: 2.2615vw;
	position: absolute;
	right: 2.65625vw;
	top: 7.4479vw;
	cursor: pointer;
}

/* Mobile Menu */
@media (max-width: 800px) {

	.custom-menu-overlay {
		height: 350px;;
	}

	.custom-menu-overlay ul {
		top: 18px;
		left: 15px;
	}

	.custom-menu-overlay a {
		font-size: 6.9479vw;
		top: 23px;
	}

	.menu-logo img {
		width: 58px;
		height: 70px;
		top: 18px;
		right: 15px;
		z-index: 100;
	}

	.close-menu img {
		top: 92px;
		right: 19px;
		width: 47px;
		height: auto;
	}

}