@charset "utf-8";
/* ../css/expo.css */

html, body{
	height: 100%;
	scroll-behavior: smooth;
}

body{
	background: #fff;
	font-size: 1vw;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.8vw;
	color: #000;
	margin: 0;
	overflow-x: hidden;
}

a{
	text-decoration: none;
	font-weight: 800;
	color: #000;
}

.filtre-actif{ color: #f0f; }
a:hover{ color: #f0f; }

img{
	width: 100%;
	height: auto;
	display: block;
}

.videosLabel{
	font-size: 8vw;
	font-weight: 800;
	color: #ccc;
	padding: 6vw 0 3vw;
}

/* =========================================================
   Expositions (liste + overlay)
   ========================================================= */
.exposition{
	position: relative;
	width: 100%;
	margin-bottom: 1vh;
	z-index: 0;
	display: block;
	color: inherit;
}
.exposition:hover{ color: inherit; }

.exposition .captation{
	position: absolute;
	bottom: 5%;
	left: 2%;
	width: 96%;
}

.captation .titre{
	font-size: 6vw;
	font-weight: 800;
	text-align: right;
	color: #fff;
	text-shadow: 2px 2px 2px black;
	margin-bottom: 2%;
	opacity: 0.9;
}

.captation .sousTitre{
	font-size: 2vw;
	font-weight: 800;
	text-align: right;
	color: #fff;
	text-shadow: 2px 2px 2px black;
	margin-bottom: 2%;
	opacity: 0.9;
}

.captation .resume{
	position: relative;
	left: 65%;
	width: 31%;
	font-size: 1.2vw;
	font-weight: 500;
	background-color: rgba(255, 255, 255, 0.9);
	padding-top: 2vw;
	padding-left: 2vw;
	padding-right: 2vw;
	padding-bottom: 0.4vw;
}

.suite{
	position: relative;
	color: #FFF;
	padding: 1vw;
	line-height: 4vw;
	background-color: #999;
}

/* =========================================================
   EN-TÊTE (commun)
   ========================================================= */
.enTete .titre{
	position: absolute;
	top: 3vw;
	right: 1%;
	font-size: 8vw;
	font-weight: 800;
	line-height: 0vw;
	text-shadow: 2px -2px 3px #FFFFFF;
	z-index: 3;
}
.enTete .titre a{
	font-size: 8vw;
	font-weight: 800;
}
.enTete .titre a:hover{ color: #f0f; }

.enTete .sousTitre{
	position: absolute;
	top: 4vw;
	right: 1%;
	line-height: 5vw;
	text-shadow: 2px -2px 3px #FFFFFF;
	z-index: 5;
}
.enTete .sousTitre a{
	font-size: 3vw;
	font-weight: 800;
}

/* =========================================================
   EN-TÊTE DÉTAIL
   ========================================================= */
.enTete .expo{
	position: absolute;
	top: 7vw;
	right: 1%;
	color: #fff;
	font-size: 3vw;
	font-weight: 800;
	line-height: 4vw;
	width: auto;
	z-index: 4;
	text-shadow: 2px 2px 3px #000;
}

.enTete .artiste{
	position: absolute;
	top: 11.2vw;
	right: 1%;
	color: #fff;
	font-size: 2.4vw;
	font-weight: 800;
	line-height: 3.2vw;
	z-index: 4;
	text-shadow: 2px 2px 3px #000;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.enTete .lieu{
	position: absolute;
	top: 11.2vw;
	right: 1%;
	color: #fff;
	font-size: 2vw;
	font-weight: 800;
	line-height: 3.2vw;
	width: auto;
	z-index: 4;
	text-shadow: 2px 2px 3px #000;
}

.enTete .lieu.with-artist{ top: 15.2vw; }

/* =========================================================
   FOOTER COMMUN — 5 colonnes
   ========================================================= */

.footer-5cols{
	display: grid;
	grid-template-columns: 5% 25% 25% 40% 5%;
	width: 100%;
	margin: 3vw 0;
	align-items: start;
}

.footer-5cols .fcol{
	box-sizing: border-box;
	padding: 1vw;
}

.footer-5cols .theme{
	font-size: 3vw;
	font-weight: 800;
	padding-top: 3vh;
	padding-bottom: 3vh;
	margin-bottom: 1.2vw;
	line-height: 1.2;
}

.footer-5cols .sousTitre{
	font-size: 2vw;
	font-weight: 800;
	padding-top: 4vh;
	padding-bottom: 3vh;
}

.footer-5cols .section{
	margin-bottom: 3vw;
}

/* =========================================================
   MEDIAS + labels (base)
   ========================================================= */
figure.media-fullwidth{
	position: relative;
	margin: 0 0 1vw;
}

figure.media-fullwidth img,
figure.media-fullwidth video{
	position: relative;
	z-index: 1;
	display: block;
	width: 100vw;
	max-width: 100vw;
	height: auto;
}

figcaption.file-label{
	position: absolute;
	top: 85%;
	left: 2.5%;
	transform: translateY(-50%);
	padding: 0.25vw 0.6vw;
	background: rgba(30,30,30,0.9);
	color: #fff;
	font-size: 0.95rem;
	border-radius: 5%;
	pointer-events: none;
	z-index: 5;
	max-width: 92vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

audio.audio-player{
	position: absolute;
	top: 80%;
	left: 2.5%;
	width: 50%;
	height: 5%;
	z-index: 6;
}

figure.media-fullwidth .audio-fallback{
	width: 100vw;
	max-width: 100vw;
	height: 56vw;
	background: #111;
}

.youtube_iframe_conteneur{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1vw 0;
}
.youtube_iframe_conteneur iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================================
   MODE LISTE DÉTAIL — médias adaptatifs
   - base : limités à 70vh
   - si trop hauts : .media-wide => pleine largeur
   ========================================================= */

body.view-list figure.media-fullwidth.detail-image{
	position: relative;
	margin: 0 0 1vw;
}

body.view-list figure.media-fullwidth.detail-image img,
body.view-list figure.media-fullwidth video{
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 40px);
	object-fit: contain;
}

body.view-list .media-wide{
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
}

body.view-list .youtube_iframe_conteneur{
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 40px);
	margin: 0 auto 1vw auto;
}

body.view-list .youtube_iframe_conteneur iframe{
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================================
   MODE DÉTAIL — titres de sous-répertoires
   ========================================================= */

/* liste */
body.view-list .subdirTitle{
	display: block;
	width: 100%;
	clear: both;
	margin: 5vw 0 3vw 0;
}

body.view-list .subdirTitle + figure{
	margin: 0 0 0.5vw 0;
}

body.view-list .subdirName{
	display: block;
	font-size: clamp(1rem, 3vw, 3.2rem);
	color: #999;
	font-weight: 800;
	margin: 0;
}

/* grille */
body.view-grid .subdirTitle{
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
	margin: 2vw 0 0.5vw 0;
	padding: 0 12px;
}

body.view-grid .subdirName{
	display: block;
	font-size: clamp(18px, 2.2vw, 34px);
	line-height: 1.1;
	color: #999;
	font-weight: 800;
	margin: 0;
}

/* =========================================================
   Scroll buttons
   ========================================================= */
.scroll-cmd{
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 0.6vw, 10px);
	font-weight: 800;
	font-size: clamp(12px, 1.1rem, 18px);
	line-height: 1;
	background: #f0f;
	color: #fff;
	border: 0;
	cursor: pointer;
	user-select: none;
	opacity: 0.7;
	z-index: 50;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.scroll-cmd:hover{
	opacity: 1;
	background: #70f;
	transform: translateY(-0.2vw);
}

.scroll-down-cmd{
	top: clamp(10px, 1.2vw, 18px);
	left: clamp(10px, 1.2vw, 18px);
	padding: clamp(8px, 0.9vw, 14px) clamp(12px, 1.6vw, 22px);
	border-radius: clamp(6px, 0.5vw, 12px);
}

/* =========================================================
   TOP / BACK
   ========================================================= */
:root{
	--tb-margin: clamp(12px, 1.2vw, 18px);
	--tb-size: calc(clamp(44px, 3.4vw, 62px) * 0.7);
	--tb-gap: 8px;
}

.scroll-top-cmd,
.scroll-back-cmd{
	width: var(--tb-size);
	height: var(--tb-size);
	border-radius: 999px;
	padding: 0;
	opacity: 0.5;
}

.scroll-top-cmd{
	right: var(--tb-margin);
	bottom: var(--tb-margin);
}

.scroll-back-cmd{
	right: calc(var(--tb-margin) + var(--tb-size) + var(--tb-gap));
	bottom: var(--tb-margin);
}

.scroll-top-cmd svg,
.scroll-back-cmd svg{
	width: 72%;
	height: 72%;
	display: block;
	fill: currentColor;
}

.scroll-top-cmd:hover,
.scroll-back-cmd:hover{
	opacity: 1;
}

.nav-btn{
	position: relative;
	background-color: rgb(255, 0, 255);
	color: rgb(255, 255, 255);
	transition: background-color 2s linear, color 2s linear;
}
.nav-btn::before{
	content:"";
	position:absolute;
	top:0; left:0; right:0;
	height: 6px;
	background: #f0f;
	opacity: 1;
	pointer-events:none;
}
.nav-btn.is-dim{
	background-color: rgba(255, 0, 255, 0.3);
	color: rgba(255, 255, 255, 0.3);
}
.nav-btn:hover{
	transition: background-color 0.2s linear, color 0.2s linear;
	background-color: rgb(112, 0, 255);
	color: rgb(255, 255, 255);
}

/* =========================================================
   MODE GRILLE — LISTE
   ========================================================= */

body:not(.view-grid) #exposList.expos-list{
	display: block;
}

body.view-grid #exposList.expos-list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.35vw;
	padding: 0vw;
}

@media (max-width: 1100px){
	body.view-grid #exposList.expos-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (orientation: portrait) and (max-width: 699px){
	body.view-grid #exposList.expos-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3px;
		padding: 0 3px 6px 3px;
	}
}

body.view-grid .exposition{
	margin-bottom: 0;
	overflow: hidden;
	background: #000;
}

body.view-grid .exposition > a{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.view-grid .exposition > a > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
	transform-origin: center center;
}

body.view-grid .exposition:hover > a > img{
	transform: scale(1.05);
}

body.view-grid .exposition .captation{ pointer-events: none; }
body.view-grid .exposition .captation a{ pointer-events: auto; }

body.view-grid .captation .resume{ display:none !important; }

body.view-grid .captation .titre{
	font-size: clamp(18px, 2.0vw, 34px);
	line-height: 1.05;
	margin-bottom: 0.6%;
	text-shadow: 1px 1px 2px #000;
}

body.view-grid .captation .sousTitre{
	font-size: clamp(12px, 1.05vw, 18px);
	line-height: 1.1;
	margin-bottom: 0.6%;
	text-shadow: 1px 1px 2px #000;
}

/* =========================================================
   MODE GRILLE — DÉTAIL
   ========================================================= */

#detailImages.detail-images{
	display: block;
}

body.view-grid #detailImages.detail-images{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding: 12px;
}

@media (max-width:1100px){
	body.view-grid #detailImages.detail-images{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 10px;
	}

	body.view-grid .subdirTitle{
		padding: 0 10px;
	}
}

@media (orientation:portrait) and (max-width:699px){
	body.view-grid #detailImages.detail-images{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		padding: 6px;
	}

	body.view-grid .subdirTitle{
		padding: 0 6px;
		margin: 3vw 0 2.4vw 0;
	}

	body.view-grid .subdirName{
		font-size: clamp(14px, 4.2vw, 22px);
	}
}

body.view-grid #detailImages .detail-image{
	margin: 0;
	overflow: hidden;
}

body.view-grid #detailImages .detail-image img{
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	transition: transform .2s ease;
}

body.view-grid #detailImages .detail-image:hover img{
	transform: scale(1.05);
}

body.view-grid #detailImages .detail-image .file-label{
	display: none;
}

body.view-grid #detailImages .detail-image.media-fullwidth img,
body.view-grid #detailImages .detail-image.media-fullwidth video{
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* =========================================================
   Responsive additions
   ========================================================= */
@media (orientation: portrait) and (max-width: 699px){

	:root{
		--tb-margin: 14px;
		--tb-size: 35px;
		--tb-gap: 8px;
	}

	figcaption.file-label{
		font-size: 0.3rem;
		padding: 0.1rem 0.2rem;
	}

	.enTete .expo{
		font-size: 6vw;
		line-height: 7vw;
		top: 14vw;
	}

	.enTete .artiste{
		font-size: 4.8vw;
		line-height: 6vw;
		top: 22vw;
		white-space: normal;
		max-width: 96vw;
		text-align: right;
	}

	.enTete .lieu{
		font-size: 4vw;
		line-height: 5vw;
	}

	.enTete .lieu.with-artist{ top: 30vw; }
	.enTete .lieu.no-artist{ top: 22vw; }

	.scroll-cmd{ font-size: 15px !important; }

	.scroll-down-cmd{
		padding: 10px 14px;
		border-radius: 5%;
		top: 14px;
		left: 14px;
	}

	.scroll-top-cmd svg,
	.scroll-back-cmd svg{
		width: 75%;
		height: 75%;
	}

	body.view-list .subdirName{
		font-size: 6vw;
	}
}

@media (orientation: landscape) and (max-width: 1023px){

	:root{
		--tb-margin: 12px;
		--tb-size: 38px;
		--tb-gap: 8px;
	}

	figcaption.file-label{
		font-size: 0.5rem;
		padding: 0.1rem 0.2rem;
	}

	.scroll-cmd{ font-size: 16px !important; }

	.scroll-down-cmd{
		padding: 10px 16px;
		border-radius: 5%;
		top: 12px;
		left: 12px;
	}

	.scroll-top-cmd svg,
	.scroll-back-cmd svg{
		width: 72%;
		height: 72%;
	}
}

@media (orientation: portrait) and (min-width: 700px){

	:root{
		--tb-margin: 16px;
		--tb-size: 36px;
		--tb-gap: 8px;
	}

	.scroll-cmd{ font-size: 16px; }

	.scroll-down-cmd{
		padding: 10px 14px;
		border-radius: 5%;
		top: 16px;
		left: 16px;
	}

	.scroll-top-cmd svg,
	.scroll-back-cmd svg{
		width: 72%;
		height: 72%;
	}

	.enTete .expo{
		font-size: 4vw;
		line-height: 5vw;
	}

	.enTete .artiste{
		font-size: 3vw;
		line-height: 4vw;
	}

	.enTete .lieu{
		font-size: 2.6vw;
		line-height: 3.6vw;
	}
}

@media (orientation: landscape) and (min-width: 1024px){

	:root{
		--tb-margin: 18px;
		--tb-size: 42px;
		--tb-gap: 8px;
	}

	.scroll-cmd{ font-size: 18px; }

	.scroll-down-cmd{
		padding: 12px 18px;
		border-radius: 5%;
	}

	.scroll-top-cmd svg,
	.scroll-back-cmd svg{
		width: 72%;
		height: 72%;
	}
}