/* ==========================================================================
   Artsolite — Site · page immersive (Centre d'art) — 2.35
   [arts_ouverture] · [arts_sheds] · [arts_espaces]
   Chargée seulement sur les pages qui utilisent ces shortcodes.
   Principe : la page est complète sans JavaScript ; le script ajoute
   .est-anime au toit en sheds pour passer en mode « défilement ».
   ========================================================================== */

/* Variante de rose (choix de Philippe, 26 oct. 2026) — aplat, pas du texte courant */
body.arts-site { --as-framboise: #E0517F; }
body.arts-site .as-accent-framboise { --accent: var(--as-framboise); --accent-texte: #EE7A9C; }

/* 1. Ouverture plein écran ------------------------------------------------ */
body.arts-site .as-ouverture {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: start;   /* texte dans le ciel, l'usine et le canal restent visibles dessous */
	min-height: calc(100svh - var(--as-haut-barre));
	overflow: hidden;
	background: #07080f;
}
body.arts-site .as-ouverture__fond { position: absolute; inset: 0; z-index: -1; }
body.arts-site .as-ouverture__dessin,
body.arts-site .as-ouverture__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
body.arts-site .as-ouverture__fond::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 80%, var(--as-fond) 100%);
}
body.arts-site .as-ouverture--photo .as-ouverture__fond::after {
	background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.2) 80%, var(--as-fond) 100%);
}
body.arts-site .as-ouverture__texte {
	display: grid;
	justify-items: center;
	gap: var(--as-e-4);
	padding-block: clamp(2.5rem, 11vh, 7.5rem) var(--as-e-8);
	text-align: center;
}
body.arts-site .as-ouverture__surtitre {
	margin: 0;
	font-size: var(--as-fs-1);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--as-jaune);
}
body.arts-site .as-ouverture__titre {
	margin: 0;
	font-size: clamp(3.25rem, 11vw, 9.25rem);
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.035em;
	text-transform: none;
}
body.arts-site .as-ouverture__baseline { display: grid; justify-items: center; gap: var(--as-e-5); }
body.arts-site .as-ouverture__baseline p {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(1.2rem, 1rem + 1.2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.35;
	color: var(--as-texte);
}
/* Les liens de la baseline : premier = bouton plein, suivants = liens fléchés */
body.arts-site .as-ouverture__baseline p:has(a) {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: var(--as-e-3) var(--as-e-6);
	max-width: none; font-size: var(--as-fs-2); font-weight: 700;
}
body.arts-site .as-ouverture__baseline a { color: var(--as-bleu); text-decoration: none; }
body.arts-site .as-ouverture__baseline a::after { content: " ›"; }
body.arts-site .as-ouverture__baseline a:hover { text-decoration: underline; text-underline-offset: .2em; }
body.arts-site .as-ouverture__baseline a:first-of-type {
	display: inline-flex; align-items: center; min-height: 2.75rem;
	padding: .65em 1.5em; border-radius: var(--as-pilule);
	background: var(--as-bleu); color: #000;
}
body.arts-site .as-ouverture__baseline a:first-of-type::after { content: none; }
body.arts-site .as-ouverture__baseline a:first-of-type:hover { background: var(--as-texte); text-decoration: none; }
body.arts-site .as-ouverture__suite {
	position: absolute; left: 0; right: 0; bottom: clamp(.75rem, 3vh, 2rem);
	margin: 0;
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--as-texte-doux);
}
body.arts-site .as-ouverture__suite::after { content: " ↓"; }

/* 2. Toit en sheds -------------------------------------------------------- */
/* Mode simple (sans script, ou animations réduites) : une liste lisible */
body.arts-site .as-sheds { position: relative; }
body.arts-site .as-sheds__dessin,
body.arts-site .as-sheds__reperes { display: none; }
body.arts-site .as-sheds__contenu { padding-block: var(--as-e-8); }
body.arts-site .as-sheds__textes {
	display: grid;
	gap: var(--as-e-7);
	max-width: 72rem;
	margin-inline: auto;
}
@media (min-width: 52rem) { body.arts-site .as-sheds__textes { grid-template-columns: 1fr 1fr; } }
body.arts-site .as-shed { display: grid; gap: var(--as-e-3); align-content: start; }
body.arts-site .as-shed::before {
	/* la barre oblique de la marque, dans la couleur du shed */
	content: ""; width: 4.5rem; height: .55rem; margin-bottom: var(--as-e-4);
	background: var(--accent);
	transform: rotate(30deg); transform-origin: left center;
}
body.arts-site .as-shed__surtitre {
	margin: 0;
	font-size: var(--as-fs-1);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent-texte);
}
body.arts-site .as-shed__titre {
	margin: 0;
	font-size: clamp(2rem, 1.2rem + 3.6vw, 4.5rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.025em;
	text-transform: none;
}
body.arts-site .as-shed__texte p {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
	color: var(--as-texte-2);
}

/* Mode défilement (ajouté par le script) */
/* 2.40 : environ un tiers d'écran de défilement par shed (un à deux crans de
   molette), au lieu d'un écran entier (quatre crans). */
body.arts-site .as-sheds.est-anime { height: calc(100svh - var(--as-haut-barre) + var(--n, 6) * 34svh); }
body.arts-site .as-sheds.est-anime .as-sheds__scene {
	position: sticky;
	top: var(--as-haut-barre);
	height: calc(100svh - var(--as-haut-barre));
	overflow: hidden;
	isolation: isolate;
}
body.arts-site .as-sheds.est-anime .as-sheds__dessin { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
body.arts-site .as-sheds.est-anime .as-sheds__scene::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.8) 26%, rgba(0,0,0,0) 50%);
}
body.arts-site .as-sheds.est-anime .as-sheds__contenu {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	height: 100%;
	max-width: calc(72rem + 2 * var(--as-gouttiere));
	margin-inline: auto;
	padding-block: 0 clamp(1.75rem, 7vh, 4.5rem);
}
body.arts-site .as-sheds.est-anime .as-sheds__reperes {
	display: grid; gap: var(--as-e-3);
	margin: 0; padding: 0; list-style: none;
	font-size: .75rem; font-variant-numeric: tabular-nums;
	color: var(--as-texte-doux);
}
body.arts-site .as-sheds__reperes li { display: flex; align-items: center; gap: var(--as-e-3); margin: 0; transition: color .4s; }
body.arts-site .as-sheds__reperes li::before { content: ""; width: 1.1rem; height: 2px; background: currentColor; transition: width .4s, background-color .4s; }
body.arts-site .as-sheds__reperes li.est-actif { color: var(--as-texte); }
body.arts-site .as-sheds__reperes li.est-actif::before { width: 2.25rem; background: var(--accent); }
body.arts-site .as-sheds.est-anime .as-sheds__textes { position: relative; display: block; min-height: 15rem; max-width: none; margin: 0; }
body.arts-site .as-sheds.est-anime .as-shed {
	position: absolute; left: 0; right: 0; bottom: 0;
	max-width: 38rem;
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
body.arts-site .as-sheds.est-anime .as-shed::before { display: none; }
body.arts-site .as-sheds.est-anime .as-shed.est-passe { transform: translateY(-2.5rem); }
body.arts-site .as-sheds.est-anime .as-shed.est-actif { opacity: 1; transform: none; }
@media (max-width: 40rem) {
	body.arts-site .as-sheds.est-anime .as-sheds__contenu { grid-template-columns: 1fr; align-content: end; padding-bottom: 5vh; }
	body.arts-site .as-sheds.est-anime .as-sheds__reperes { grid-auto-flow: column; justify-content: start; }
	body.arts-site .as-sheds__reperes li span { display: none; }
	body.arts-site .as-sheds.est-anime .as-sheds__textes { min-height: 17rem; }
}

/* 3. Espaces (carrousel de grandes cartes) -------------------------------- */
body.arts-site .as-espaces-section .as-espaces__titre {
	margin: 0 0 var(--as-e-4);
	font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.025em;
	max-width: 18ch;
}
body.arts-site .as-espaces__chapeau { max-width: var(--as-lecture); margin-bottom: var(--as-e-6); color: var(--as-texte-2); }
body.arts-site .as-espaces .as-carrousel__piste { padding-block: var(--as-e-5) var(--as-e-2); }
/* Cartes « duotone » (2.37, choix de Philippe) : photo plein cadre passée en
   noir et blanc puis teintée de la couleur de l'espace ; barre oblique des
   sheds en blanc ; mot en grand en lettres évidées ; texte en bas. */
body.arts-site .as-espaces .as-carrousel__diapo {
	flex: 0 0 auto;
	width: min(78vw, 22rem);
	aspect-ratio: 3 / 4.3;
	max-width: 100%;
}
body.arts-site .as-espace {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #000;
}
body.arts-site .as-espace::before {   /* la barre oblique de la marque */
	content: ""; position: absolute; z-index: 3; left: 1.4rem; top: 1.5rem;
	width: 4rem; height: .55rem; background: #fff;
	transform: rotate(30deg); transform-origin: left center;
}
body.arts-site .as-espace__visuel {
	position: absolute; inset: 0; z-index: -1;
	overflow: hidden;
	background-color: #000;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 9px),
		repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 4px, transparent 4px 9px),
		radial-gradient(120% 90% at 30% 20%, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, #000) 60%, #000 100%);
}
body.arts-site .as-espace__photo {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(1.05);
}
body.arts-site .as-espace__visuel--photo::before {   /* teinte : la couleur de l'espace */
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: var(--accent); mix-blend-mode: multiply;
}
body.arts-site .as-espace__visuel::after {           /* lisibilité du texte */
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 66%);
}
body.arts-site .as-espace__mot {
	position: absolute; z-index: 3; left: 1.25rem; right: 1.25rem; top: 4.6rem;
	font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.1rem);
	font-weight: 900;
	line-height: .88;
	letter-spacing: -.045em;
	overflow-wrap: anywhere;
	color: transparent;
	-webkit-text-stroke: 2px #fff;
}
body.arts-site .as-espace__texte {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	display: grid; gap: var(--as-e-2);
	padding: var(--as-e-5) var(--as-e-5) var(--as-e-5);
}
body.arts-site .as-espace__texte p { margin: 0; color: rgba(255,255,255,.88); font-size: var(--as-fs-2); line-height: 1.5; }
body.arts-site .as-espace__etiquette {
	font-size: clamp(.95rem, .8rem + .45vw, 1.15rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent) !important; filter: brightness(1.3);   /* 2.41 : plus grande (demande de Philippe) */
}
body.arts-site .as-espace__titre { margin: 0; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; color: #fff; }

/* 2.39 : cartes en paysage à partir de 48 rem (demande de Philippe) — une
   carte et demie à l'écran, la molette fait vraiment défiler. Téléphone :
   portrait, une carte par écran. */
@media (min-width: 48rem) {
	body.arts-site .as-espaces .as-carrousel__diapo { width: min(86vw, 58rem); aspect-ratio: 16 / 10; }
	body.arts-site .as-espace__texte { right: auto; max-width: 34rem; padding: var(--as-e-6); }
	body.arts-site .as-espace__visuel::after {
		background:
			linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 62%),
			linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
	}
	body.arts-site .as-espace__mot { right: auto; max-width: 70%; font-size: clamp(3rem, 1.5rem + 3.5vw, 5.5rem); left: 2rem; top: 4.8rem; }
	body.arts-site .as-espace::before { left: 2.1rem; top: 1.8rem; }
}

/* Mode « molette » (2.36, ajouté par le script) : la section reste fixe,
   le défilement vertical fait glisser les cartes. Hauteur réglée par le script. */
body.arts-site .as-espaces-section.est-defile { padding-block: 0; }
body.arts-site .as-espaces-section.est-defile > .as-conteneur {
	position: sticky;
	top: var(--as-haut-barre);
	height: calc(100svh - var(--as-haut-barre));
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	padding-block: var(--as-e-4);
	overflow: hidden;
}
body.arts-site .as-espaces-section.est-defile .as-espaces__titre { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); margin-bottom: var(--as-e-2); }
body.arts-site .as-espaces-section.est-defile .as-carrousel__piste {
	overflow-x: hidden;            /* c'est la molette qui fait glisser */
	scroll-snap-type: none;
	scroll-behavior: auto;
	padding-block: var(--as-e-4) var(--as-e-2);
}
body.arts-site .as-espaces-section.est-defile .as-carrousel__diapo {
	/* la carte entière tient dans l'écran, sous le titre et au-dessus des flèches */
	height: clamp(20rem, calc(100svh - var(--as-haut-barre) - 18rem), 36rem);
	width: auto;
	max-width: 86vw;
}
body.arts-site .as-espaces-section.est-defile .as-carrousel__controles { margin-top: var(--as-e-3); }

/* 5. Histoire (2.41) ------------------------------------------------------
   Mode simple : image en sépia, puis titre et récit. Le script ajoute
   .est-anime : la photo part d'un tirage posé de biais et grandit jusqu'au
   plein écran (variable --z de 0 à 1), puis les paragraphes défilent. */
body.arts-site .as-histoire { position: relative; --z: 1; }
body.arts-site .as-histoire__scene { position: relative; overflow: hidden; isolation: isolate; }
body.arts-site .as-histoire__cadre { position: relative; }
body.arts-site .as-histoire__tirage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
body.arts-site .as-histoire__photo {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: sepia(.45) contrast(1.06) brightness(.95);   /* 2.42 : photo d'archive déjà en noir et blanc, teinte légère */
}
body.arts-site .as-histoire__tirage::after {   /* grain et vignettage du tirage */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(30,18,6,.55) 100%),
		repeating-radial-gradient(circle at 30% 40%, rgba(255,240,210,.035) 0 1px, transparent 1px 3px);
}
body.arts-site .as-histoire__contenu { display: grid; gap: var(--as-e-5); padding-block: var(--as-e-7) var(--as-e-6); max-width: calc(72rem + 2 * var(--as-gouttiere)); margin-inline: auto; }
body.arts-site .as-histoire__surtitre { margin: 0; font-size: var(--as-fs-1); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #E9C98F; }
body.arts-site .as-histoire__titre { margin: 0; font-size: clamp(2.25rem, 1.3rem + 4vw, 5rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; text-transform: none; }
body.arts-site .as-histoire__texte { display: grid; gap: var(--as-e-4); max-width: 40rem; }
body.arts-site .as-histoire__etape p { margin: 0; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); line-height: 1.5; color: var(--as-texte); }
body.arts-site .as-histoire__sources { padding-block: var(--as-e-5) var(--as-e-7); max-width: calc(48rem + 2 * var(--as-gouttiere)); }
body.arts-site .as-histoire__sources .as-pile__corps { font-size: var(--as-fs-2); color: var(--as-texte-2); }
body.arts-site .as-histoire__sources li { margin-bottom: var(--as-e-2); }

/* Mode défilement */
body.arts-site .as-histoire.est-anime { height: calc(100svh - var(--as-haut-barre) + (var(--n, 4) + 1.5) * 40svh); }
body.arts-site .as-histoire.est-anime .as-histoire__scene {
	position: sticky; top: var(--as-haut-barre);
	height: calc(100svh - var(--as-haut-barre));
	background: #0b0805;
}
body.arts-site .as-histoire.est-anime .as-histoire__cadre {
	position: absolute; inset: 0; z-index: -1;
	display: grid; place-items: center;
}
body.arts-site .as-histoire.est-anime .as-histoire__tirage {
	width: 100%; height: 100%; aspect-ratio: auto;
	transform: scale(calc(.46 + .54 * var(--z))) rotate(calc((1 - var(--z)) * -3deg));
	outline: calc((1 - var(--z)) * 14px) solid #EFE6D2;
	border-radius: calc((1 - var(--z)) * 6px);
	box-shadow: 0 30px 80px rgba(0,0,0, calc((1 - var(--z)) * .7));
	will-change: transform;
}
body.arts-site .as-histoire.est-anime .as-histoire__cadre::after {   /* voile pour lire le texte, qui monte avec --z */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	opacity: var(--z);
	background:
		linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 68%),
		linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%);
}
body.arts-site .as-histoire.est-anime .as-histoire__contenu {   /* 2.43 : le récit sous le titre */
	position: relative; height: 100%;
	grid-template-rows: auto auto; align-content: start; gap: var(--as-e-5);
	padding-block: var(--as-e-6) var(--as-e-6);
}
body.arts-site .as-histoire.est-anime .as-histoire__tete { text-shadow: 0 2px 24px rgba(0,0,0,.6); }
body.arts-site .as-histoire.est-anime .as-histoire__texte { position: relative; min-height: 14rem; }
body.arts-site .as-histoire.est-anime .as-histoire__etape {
	position: absolute; left: 0; right: 0; top: 0;
	opacity: 0; transform: translateY(1.5rem);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
body.arts-site .as-histoire.est-anime .as-histoire__etape.est-passe { transform: translateY(-1.5rem); }
body.arts-site .as-histoire.est-anime .as-histoire__etape.est-actif { opacity: 1; transform: none; }
body.arts-site .as-histoire__reperes { display: none; }
body.arts-site .as-histoire.est-anime .as-histoire__reperes { display: flex; gap: .4rem; margin-top: var(--as-e-4); grid-row: 2; }
body.arts-site .as-histoire__reperes span { width: 1.6rem; height: 3px; background: rgba(255,255,255,.3); transition: background-color .3s; }
body.arts-site .as-histoire__reperes span.est-actif { background: #E9C98F; }

/* Étape finale (2.43) : le lieu aujourd'hui, « Bienvenue à L''artsolite » */
body.arts-site .as-histoire__tete { display: grid; }
body.arts-site .as-histoire__tete-origine,
body.arts-site .as-histoire__tete-final { grid-area: 1 / 1; display: grid; gap: var(--as-e-3); align-content: start; transition: opacity .6s ease; }
body.arts-site .as-histoire__tete-final,
body.arts-site .as-histoire__actuelle { display: none; }
body.arts-site .as-histoire__final-titre { margin: 0 0 var(--as-e-3); font-size: var(--as-fs-5); font-weight: 800; text-transform: none; }
body.arts-site .as-histoire.est-anime .as-histoire__tete-final { display: grid; opacity: 0; }
body.arts-site .as-histoire.est-anime .as-histoire__final-titre {   /* déjà affiché en grand dans l'en-tête */
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.arts-site .as-histoire.est-anime .as-histoire__actuelle {
	display: block; position: absolute; inset: 0;
	opacity: 0; transform: scale(1.08);
	transition: opacity 1.1s ease, transform 2.2s cubic-bezier(.2, .7, .2, 1);
}
body.arts-site .as-histoire__photo-actuelle { display: block; width: 100%; height: 100%; object-fit: cover; }
body.arts-site .as-histoire.est-final .as-histoire__actuelle { opacity: 1; transform: none; }
body.arts-site .as-histoire.est-final .as-histoire__tete-origine { opacity: 0; }
body.arts-site .as-histoire.est-final .as-histoire__tete-final { opacity: 1; }
body.arts-site .as-histoire.est-final .as-histoire__reperes span.est-actif { background: var(--as-bleu); }

/* 6. Vidéo (2.41) --------------------------------------------------------- */
body.arts-site .as-film .as-conteneur { display: grid; gap: var(--as-e-5); justify-items: center; }
body.arts-site .as-film__titre { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; text-align: center; }
body.arts-site .as-film__cadre { width: min(100%, 64rem, calc((100svh - 12rem) * 16 / 9)); aspect-ratio: 16 / 9; max-width: 100%; border-radius: 1rem; overflow: hidden; background: #111; }
body.arts-site .as-film__cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
body.arts-site .as-film__legende { max-width: none; text-align: center; font-size: var(--as-fs-1); color: var(--as-texte-2); }
@media (min-width: 64rem) { body.arts-site .as-film__legende p { white-space: nowrap; } }   /* 2.45 : une seule ligne */
body.arts-site .as-film__legende p { margin: 0; }

/* Entrée dans la vidéo (2.43) : la section reste fixe, le lecteur part
   petit dans le noir et s'agrandit jusqu'à occuper l'écran (--v de 0 à 1). */
body.arts-site .as-film.est-anime { --v: 0; height: calc(100svh - var(--as-haut-barre) + 70svh); padding-block: 0; }
body.arts-site .as-film.est-anime > .as-conteneur {
	position: sticky; top: var(--as-haut-barre);
	height: calc(100svh - var(--as-haut-barre));
	align-content: center; overflow: hidden;
	background: radial-gradient(60% 50% at 50% 55%, rgba(55,186,207, calc(.16 * var(--v))) 0%, rgba(0,0,0,0) 70%);
}
body.arts-site .as-film.est-anime .as-film__titre { opacity: calc(.35 + .65 * var(--v)); transform: translateY(calc((1 - var(--v)) * 2rem)); }
body.arts-site .as-film.est-anime .as-film__cadre {
	width: min(100%, 76rem, calc((100svh - var(--as-haut-barre) - 12rem) * 16 / 9));
	transform: scale(calc(.42 + .58 * var(--v)));
	border-radius: calc(.5rem + (1 - var(--v)) * 1.5rem);
	box-shadow: 0 0 calc(var(--v) * 90px) rgba(55,186,207, calc(.25 * var(--v)));
	will-change: transform;
}
body.arts-site .as-film.est-anime .as-film__legende { opacity: var(--v); }

/* 7. Programme (2.47) : À l'affiche, prochains rendez-vous -------------- */
body.arts-site .as-une-expo {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; align-items: end;
	min-height: calc(100svh - var(--as-haut-barre));
	background: #000;
}
body.arts-site .as-une-expo__fond { position: absolute; inset: 0; z-index: -1; }
body.arts-site .as-une-expo__image { display: block; width: 100%; height: 100%; object-fit: cover; animation: as-recul 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes as-recul { from { transform: scale(1.08); } to { transform: none; } }
body.arts-site .as-une-expo__fond::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 35%, rgba(0,0,0,0) 65%),
		linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
body.arts-site .as-une-expo__texte { display: grid; gap: var(--as-e-3); padding-block: var(--as-e-8) clamp(2.5rem, 9vh, 6rem); max-width: calc(72rem + 2 * var(--as-gouttiere)); width: 100%; margin-inline: auto; }
body.arts-site .as-une-expo__surtitre { margin: 0; font-size: var(--as-fs-1); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--as-jaune); }
body.arts-site .as-une-expo__titre { margin: 0; max-width: 16ch; font-size: clamp(2.5rem, 1.3rem + 4.8vw, 6.25rem); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: none; }
body.arts-site .as-une-expo__sous-titre { margin: 0; max-width: 32ch; font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); font-weight: 600; color: var(--as-texte); }
body.arts-site .as-une-expo__periode { margin: 0; font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); font-weight: 300; color: var(--as-texte); }
body.arts-site .as-une-expo__action { margin: var(--as-e-3) 0 0; }
body.arts-site .as-une-expo__bouton {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: .65em 1.5em;
	border-radius: var(--as-pilule); background: var(--as-bleu); color: #000; font-weight: 700; text-decoration: none;
}
body.arts-site .as-une-expo__bouton:hover { background: var(--as-texte); }

body.arts-site .as-prog__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--as-e-3) var(--as-e-5); margin-bottom: var(--as-e-6); }
body.arts-site .as-prog__titre { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; text-transform: none; }
body.arts-site .as-expos-autres .as-prog__titre { margin-bottom: var(--as-e-6); }
body.arts-site .as-prog__tout { color: var(--as-bleu); font-weight: 700; text-decoration: none; }
body.arts-site .as-prog__tout:hover { text-decoration: underline; text-underline-offset: .2em; }

body.arts-site .as-expo-cartes { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--as-e-6); margin: 0; padding: 0; list-style: none; }
body.arts-site .as-expo-carte { margin: 0; min-width: 0; }
body.arts-site .as-expo-carte__lien { display: grid; gap: var(--as-e-4); color: inherit; text-decoration: none; }
body.arts-site .as-expo-carte__media { display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: 1rem; background: var(--as-surface); }
body.arts-site .as-expo-carte__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
body.arts-site .as-expo-carte__lien:hover .as-expo-carte__image { transform: scale(1.04); }
body.arts-site .as-expo-carte__texte { display: grid; gap: var(--as-e-1); }
body.arts-site .as-expo-carte__lieu { font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--as-rose); }
body.arts-site .as-expo-carte__titre { font-size: var(--as-fs-5); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
body.arts-site .as-expo-carte__periode { color: var(--as-texte-2); }

body.arts-site .as-rdv-filtres { display: flex; flex-wrap: wrap; gap: var(--as-e-2); margin: calc(-1 * var(--as-e-3)) 0 var(--as-e-6); }
body.arts-site .as-rdv-filtres button { font: inherit; font-size: var(--as-fs-1); font-weight: 700; color: var(--as-texte); background: transparent; border: 2px solid var(--as-ligne); border-radius: var(--as-pilule); padding: .5em 1.1em; cursor: pointer; }
body.arts-site .as-rdv-filtres button:hover { border-color: var(--as-texte-2); }
body.arts-site .as-rdv-filtres button[aria-pressed="true"] { background: var(--as-texte); border-color: var(--as-texte); color: #000; }
body.arts-site .as-rdv-liste { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--as-e-6) var(--as-e-5); margin: 0; padding: 0; list-style: none; }
body.arts-site .as-rdv { margin: 0; min-width: 0; }
body.arts-site .as-rdv__lien { display: grid; gap: var(--as-e-3); color: inherit; text-decoration: none; }
body.arts-site .as-rdv__media { position: relative; display: block; aspect-ratio: 210 / 297;   /* 2.53 : format A4, comme les affiches */ max-width: 100%; overflow: hidden; border-radius: 1rem; background: var(--as-surface); }
body.arts-site .as-rdv__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
body.arts-site .as-rdv__lien:hover .as-rdv__image { transform: scale(1.05); }
body.arts-site .as-rdv__date {
	position: absolute; left: .75rem; top: .75rem;
	display: grid; justify-items: center; min-width: 3.4rem; padding: .35rem .5rem .4rem;
	border-radius: .65rem; background: var(--accent); color: #000; line-height: 1;
}
body.arts-site .as-rdv__jour { font-size: 1.6rem; font-weight: 900; }
body.arts-site .as-rdv__mois { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.arts-site .as-rdv__texte { display: grid; gap: .25rem; }
body.arts-site .as-rdv__type { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); }
body.arts-site .as-rdv__titre { font-size: var(--as-fs-3); font-weight: 700; line-height: 1.25; }
body.arts-site .as-rdv__quand { font-size: var(--as-fs-1); color: var(--as-texte-doux); }
body.arts-site .as-rdv[hidden] { display: none; }
/* 2.49 : liste repliée — sans script, tout reste visible */
body.arts-site .as-rdv-section.est-replie.est-js .as-rdv--suite { display: none; }
body.arts-site .as-rdv-plus { display: flex; justify-content: center; max-width: none; margin: var(--as-e-7) 0 0; }
body.arts-site .as-rdv-plus__bouton { font: inherit; font-weight: 700; color: var(--as-texte); background: transparent; border: 2px solid var(--as-texte); border-radius: var(--as-pilule); padding: .7em 1.6em; cursor: pointer; }
body.arts-site .as-rdv-plus__bouton:hover { background: var(--as-texte); color: #000; }
body.arts-site .as-rdv-plus__nb { font-weight: 400; opacity: .75; }
body.arts-site .as-rdv-section:not(.est-replie) .as-rdv-plus,
body.arts-site .as-rdv-section:not(.est-js) .as-rdv-plus { display: none; }
body.arts-site .as-rdv-section { scroll-margin-top: var(--as-haut-barre); }

/* 2.50 : horaires posés sur la photo de la carte */
body.arts-site .as-espace__horaires {
	justify-self: start; max-width: 100%;
	margin-bottom: var(--as-e-2); padding: .55rem .8rem .6rem;
	border-left: 3px solid var(--accent); border-radius: 0 .6rem .6rem 0;
	background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-size: .82rem; line-height: 1.4; color: #fff;
}
body.arts-site .as-espace__texte .as-espace__horaires p { margin: 0; max-width: none; font-size: inherit; color: #fff; }
body.arts-site .as-espace__texte .as-espace__horaires-titre {
	display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem !important;
	font-size: .68rem !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent) !important; filter: brightness(1.3);
}
@media (prefers-reduced-transparency: reduce) { body.arts-site .as-espace__horaires { background: rgba(0,0,0,.85); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Cartes posées (Accueil) : sans molette, côte à côte */
body.arts-site .as-espaces-section--pose .as-carrousel__piste { flex-wrap: wrap; overflow: visible; justify-content: flex-start; }
@media (min-width: 48rem) {
	body.arts-site .as-espaces-section--pose .as-carrousel__piste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.arts-site .as-espaces-section--pose .as-espaces .as-carrousel__diapo { width: auto; aspect-ratio: 3 / 4; }
	body.arts-site .as-espaces-section--pose .as-espace__mot { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.6rem); max-width: none; right: 1.25rem; }
	body.arts-site .as-espaces-section--pose .as-espace__texte { max-width: none; right: 0; padding: var(--as-e-5); }
}
body.arts-site .as-espaces-section--pose .as-carrousel__controles { display: none; }

/* 4. Mouvement réduit, couleurs forcées ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.arts-site .as-sheds__reperes li,
	body.arts-site .as-sheds__reperes li::before,
	body.arts-site .as-sheds.est-anime .as-shed,
	body.arts-site .as-histoire__etape,
	body.arts-site .as-histoire__tete-origine,
	body.arts-site .as-histoire__tete-final,
	body.arts-site .as-histoire__actuelle,
	body.arts-site .as-expo-carte__image,
	body.arts-site .as-rdv__image { transition: none; }
	body.arts-site .as-une-expo__image { animation: none; }
}
@media (forced-colors: active) {
	body.arts-site .as-ouverture__fond, body.arts-site .as-sheds__dessin { display: none; }
	body.arts-site .as-espace__visuel { display: none; }
	body.arts-site .as-espace { border: 1px solid CanvasText; }
	body.arts-site .as-espace__texte { position: static; }
	body.arts-site .as-espace__mot { display: none; }
}