/* ==========================================================================
   Artsolite — Site · feuille de style du site public (refonte 2026-2027)
   --------------------------------------------------------------------------
   Portée : uniquement les pages qui utilisent le modèle de page
   « Artsolite — Site » (classe .arts-site sur <body>). Les pages actuelles
   ne sont jamais touchées.

   Organisation
     1. Police (Raleway auto-hébergée)
     2. Variables : couleurs, typographie, espacements
     3. Accents de rubrique
     4. Base : texte, titres, liens, listes, médias, tableaux
     5. Accessibilité : focus, lien d'évitement, texte masqué
     6. Mise en page : conteneurs, sections, grilles
     7. Barre fixe (pictos + menu)
     8. Titres de page, surtitres, chapeaux
     9. Boutons et liens d'action
    10. Carrousel
    11. Cartes (agenda, actus, archives)
    12. Infos pratiques
    13. Tuiles « Je suis… »
    14. Dépliants (cartes du restaurant, FAQ)
    15. Sorties des pièces du back-office (carte, horaires, textes, logos)
    16. Formulaires (newsletter, contact)
    17. Annonces, citations, vidéos, plans
    18. Fil d'Ariane, pagination
    19. Pied de page
    20. Utilitaires
    21. Mouvement réduit, couleurs forcées, impression
   ========================================================================== */

/* 1. Police --------------------------------------------------------------- */
@font-face {
	font-family: "Raleway Artsolite";
	src: url("../fonts/raleway-latin-wght.woff") format("woff");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Raleway Artsolite";
	src: url("../fonts/raleway-latin-wght-italic.woff") format("woff");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
/* Police du logo, dessinée par Aurélie Alleon (Etpourquoipaslalune).
   Son apostrophe dessine déjà le double trait du nom : on tape L'artsolite
   avec UNE apostrophe dans cette police (le « o » et le « e » final ont les yeux). */
@font-face {
	font-family: "Lartsolite Logo";
	src: url("../fonts/lartsolite-logo.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
body.arts-site .as-police-logo { font-family: "Lartsolite Logo", "Raleway Artsolite", sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* 2. Variables ------------------------------------------------------------ */
body.arts-site {
	/* Couleurs de la marque (aplats, filets, décor) */
	--as-bleu: #37BACF;
	--as-rose: #F9CFCD;
	--as-jaune: #F7DE2B;
	--as-rouge: #E8442E;
	--as-vert: #59A345;
	--as-gris: #727D87;

	/* Variantes lisibles en texte sur fond sombre (≥ 4,5:1 sur tous les fonds) */
	--as-rouge-texte: #F0604B;
	--as-gris-texte: #9AA4AD;

	/* Fonds et texte */
	--as-fond: #000;          /* fond des pages */
	--as-surface: #141414;    /* cartes, encadrés */
	--as-surface-2: #1E1E1E;  /* survols, champs */
	--as-pied-fond: #0A0A0A;
	--as-texte: #F0F0F0;      /* 18,4:1 sur noir */
	--as-texte-2: #C8C8C8;    /* 12,6:1 */
	--as-texte-doux: #A6A6A6; /* 8,6:1 — mentions, dates */
	--as-ligne: #3A3A3A;      /* séparateurs décoratifs */
	--as-bord-champ: #8A8A8A; /* bord des champs : ≥ 3:1 (composant d'interface) */
	--as-focus: #F7DE2B;      /* anneau de focus, 15:1 sur noir */

	/* Accent de la page (redéfini par .as-accent-*) */
	--accent: var(--as-bleu);
	--accent-texte: var(--as-bleu);
	--sur-accent: #000;

	/* Typographie */
	--as-police: "Raleway Artsolite", "Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--as-fs-1: .875rem;                                     /* 14 px : mentions */
	--as-fs-2: 1rem;                                        /* 16 px : petit texte */
	--as-fs-3: 1.125rem;                                    /* 18 px : texte courant */
	--as-fs-4: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);       /* h3 */
	--as-fs-5: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);   /* h2 */
	--as-fs-6: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);       /* h1 */
	--as-fs-7: clamp(2.5rem, 1.5rem + 5vw, 5rem);           /* une, accueil */
	--as-interligne: 1.6;
	--as-interligne-titre: 1.12;

	/* Espacements */
	--as-e-1: .25rem;
	--as-e-2: .5rem;
	--as-e-3: .75rem;
	--as-e-4: 1rem;
	--as-e-5: 1.5rem;
	--as-e-6: 2rem;
	--as-e-7: 3rem;
	--as-e-8: clamp(3rem, 2rem + 4vw, 5.5rem);   /* entre sections */

	/* Gabarits */
	--as-large: 160rem;     /* plein écran : la largeur n'est limitée que par l'écran (au-delà de 2 560 px, on centre) */
	--as-lecture: 42rem;    /* ~70 caractères */
	--as-gouttiere: clamp(1rem, .25rem + 3vw, 4rem);
	--as-rayon: 4px;
	--as-pilule: 999px;
	--as-barre-h: 4.25rem;
	--as-duree: .2s;

	/* Neutralise les réglages globaux d'Elementor sur ces pages */
	--e-global-color-primary: var(--as-texte);
	--e-global-color-secondary: var(--as-texte-2);
	--e-global-color-text: var(--as-texte);
	--e-global-color-accent: var(--accent);
	--e-global-typography-primary-font-family: var(--as-police);
	--e-global-typography-secondary-font-family: var(--as-police);
	--e-global-typography-text-font-family: var(--as-police);
	--e-global-typography-accent-font-family: var(--as-police);
}

/* 3. Accents de rubrique ---------------------------------------------------
   À poser sur <body> (réglage de la page) ou sur n'importe quel bloc :
   la couleur suit la rubrique, comme les guillemets colorés du site actuel. */
body.arts-site .as-accent-bleu,  body.arts-site.as-accent-bleu  { --accent: var(--as-bleu);  --accent-texte: var(--as-bleu); }
body.arts-site .as-accent-rose,  body.arts-site.as-accent-rose  { --accent: var(--as-rose);  --accent-texte: var(--as-rose); }
body.arts-site .as-accent-jaune, body.arts-site.as-accent-jaune { --accent: var(--as-jaune); --accent-texte: var(--as-jaune); }
body.arts-site .as-accent-rouge, body.arts-site.as-accent-rouge { --accent: var(--as-rouge); --accent-texte: var(--as-rouge-texte); }
body.arts-site .as-accent-vert,  body.arts-site.as-accent-vert  { --accent: var(--as-vert);  --accent-texte: var(--as-vert); }
body.arts-site .as-accent-gris,  body.arts-site.as-accent-gris  { --accent: var(--as-gris);  --accent-texte: var(--as-gris-texte); }
/* 2.67 : vert et bleu (restaurant & bar-café) — la page prend le vert, le menu montre les deux */
body.arts-site .as-accent-vert-bleu, body.arts-site.as-accent-vert-bleu { --accent: var(--as-vert); --accent-texte: var(--as-vert); --accent-2: var(--as-bleu); }

/* 4. Base ------------------------------------------------------------------ */
html:has(body.arts-site) { scroll-padding-top: calc(var(--as-barre-h) + 1rem); }
body.arts-site {
	margin: 0;
	background: var(--as-fond);
	color: var(--as-texte);
	font-family: var(--as-police);
	font-size: var(--as-fs-3);
	font-weight: 400;
	line-height: var(--as-interligne);
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	hyphens: manual;
}
body.arts-site *, body.arts-site *::before, body.arts-site *::after { box-sizing: border-box; }

body.arts-site :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--as-police);
	color: var(--as-texte);
	line-height: var(--as-interligne-titre);
	letter-spacing: -.01em;
	margin: 0 0 var(--as-e-4);
	text-transform: none;
	font-feature-settings: normal;
}
body.arts-site h1 { font-size: var(--as-fs-6); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; }
body.arts-site h2 { font-size: var(--as-fs-5); font-weight: 800; margin-top: var(--as-e-7); }
body.arts-site h3 { font-size: var(--as-fs-4); font-weight: 700; margin-top: var(--as-e-6); }
body.arts-site h4 { font-size: var(--as-fs-3); font-weight: 700; margin-top: var(--as-e-5); }
body.arts-site :where(h1, h2, h3, h4):first-child { margin-top: 0; }
/* Lignes équilibrées : les titres et les phrases centrées se coupent en lignes
   de longueur proche (pas de mot orphelin). Un retour à la ligne voulu
   (<br>, ou Entrée dans les éditeurs du back-office) reste toujours possible. */
body.arts-site :where(h1, h2, h3, h4, .as-chapeau, .as-surtitre, [style*="text-align:center"], .as-centre, .as-entete-page p) { text-wrap: balance; }
body.arts-site p { text-wrap: pretty; }

body.arts-site p { margin: 0 0 var(--as-e-4); max-width: var(--as-lecture); }
body.arts-site :where(.as-centre) p,
body.arts-site p.as-centre { margin-inline: auto; }
body.arts-site strong, body.arts-site b { font-weight: 700; }
body.arts-site small { font-size: var(--as-fs-1); }

body.arts-site a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
	transition: color var(--as-duree), text-decoration-color var(--as-duree);
}
body.arts-site a:hover { color: var(--accent-texte); text-decoration-color: currentColor; }

body.arts-site :where(ul, ol) { margin: 0 0 var(--as-e-4); padding-left: 1.4em; max-width: var(--as-lecture); }
body.arts-site :where(ul, ol) li { margin: 0 0 var(--as-e-2); }
body.arts-site ul li::marker { color: var(--accent); }
body.arts-site ol li::marker { color: var(--accent-texte); font-weight: 700; }

body.arts-site :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
body.arts-site figure { margin: 0 0 var(--as-e-5); }
body.arts-site figcaption { margin-top: var(--as-e-2); font-size: var(--as-fs-1); color: var(--as-texte-doux); }

body.arts-site hr,
body.arts-site .as-separateur {
	border: 0;
	height: 4px;
	width: 5rem;
	background: var(--accent);
	margin: var(--as-e-6) 0;
}
body.arts-site .as-separateur--centre { margin-inline: auto; }

/* Tableaux (tarifs, programmes) */
body.arts-site .as-tableau { overflow-x: auto; margin: 0 0 var(--as-e-5); }
body.arts-site table { width: 100%; border-collapse: collapse; font-size: var(--as-fs-2); }
body.arts-site caption { text-align: left; font-weight: 700; font-size: var(--as-fs-3); padding-bottom: var(--as-e-3); }
body.arts-site th, body.arts-site td { padding: var(--as-e-3) var(--as-e-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--as-ligne); }
body.arts-site thead th { border-bottom: 3px solid var(--accent); font-weight: 700; }
body.arts-site tbody th { font-weight: 600; }
body.arts-site td.as-nombre, body.arts-site th.as-nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 5. Accessibilité --------------------------------------------------------- */
body.arts-site :focus { outline: none; }
body.arts-site :focus-visible {
	outline: 3px solid var(--as-focus);
	outline-offset: 3px;
	border-radius: 2px;
}
body.arts-site .as-sr,
body.arts-site .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
body.arts-site .as-evitement {
	position: absolute;
	top: var(--as-e-2);
	left: var(--as-e-2);
	z-index: 1000;
	padding: var(--as-e-3) var(--as-e-5);
	background: var(--as-jaune);
	color: #000;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--as-pilule);
	transform: translateY(-200%);
}
body.arts-site .as-evitement:focus { transform: none; }

/* 6. Mise en page ---------------------------------------------------------- */
body.arts-site .as-conteneur {
	width: 100%;
	max-width: calc(var(--as-large) + 2 * var(--as-gouttiere));
	margin-inline: auto;
	padding-inline: var(--as-gouttiere);
}
body.arts-site .as-conteneur--etroit { max-width: calc(var(--as-lecture) + 2 * var(--as-gouttiere)); }

body.arts-site .as-section { padding-block: var(--as-e-8); }
body.arts-site .as-section--serree { padding-block: var(--as-e-7); }
body.arts-site .as-section--surface { background: var(--as-surface); }
body.arts-site .as-section--accent { background: var(--accent); color: var(--sur-accent); }
body.arts-site .as-section--accent :where(h1, h2, h3, h4, p, li) { color: var(--sur-accent); }
body.arts-site .as-section--accent a { color: var(--sur-accent); text-decoration-color: currentColor; }
body.arts-site .as-section--accent .as-aide,
body.arts-site .as-section--accent figcaption,
body.arts-site .as-section--accent .as-texte-doux,
body.arts-site .as-section--accent .as-surtitre,
body.arts-site .as-section--accent label { color: var(--sur-accent); }
body.arts-site .as-section--filet { border-top: 4px solid var(--accent); }
body.arts-site .as-section > .as-conteneur > :last-child { margin-bottom: 0; }

body.arts-site .as-pile > * + * { margin-top: var(--as-e-5); }

body.arts-site .as-grille {
	display: grid;
	gap: var(--as-e-6) var(--as-e-7);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--as-colonne, 17rem)), 1fr));
}
/* En liste : sans puces ni retrait. Sur un conteneur : garde ses marges. */
body.arts-site :is(ul, ol).as-grille { list-style: none; padding: 0; margin: 0; max-width: none; }
body.arts-site .as-grille > li { margin: 0; }
body.arts-site .as-grille--2 { --as-colonne: 26rem; }
body.arts-site .as-grille--3 { --as-colonne: 19rem; }
body.arts-site .as-grille--4 { --as-colonne: 14rem; }

body.arts-site .as-duo {
	display: grid;
	gap: var(--as-e-6);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
	body.arts-site .as-duo { grid-template-columns: 1fr 1fr; gap: var(--as-e-7); }
	body.arts-site .as-duo--inverse > :first-child { order: 2; }
}
body.arts-site .as-duo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--as-rayon); }

/* 7. Barre fixe ------------------------------------------------------------ */
body.arts-site .as-barre {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(0, 0, 0, .94);
	border-bottom: 1px solid var(--as-ligne);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
body.admin-bar.arts-site .as-barre { top: 32px; }
@media (max-width: 782px) { body.admin-bar.arts-site .as-barre { top: 0; } }

body.arts-site .as-barre__interieur {
	display: flex;
	align-items: center;
	gap: var(--as-e-4);
	min-height: var(--as-barre-h);
}
body.arts-site .as-barre__logo { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; }
body.arts-site .as-barre__logo img { height: 2rem; width: auto; }
body.arts-site .as-barre__logo-texte { font-family: "Lartsolite Logo", "Raleway Artsolite", sans-serif; font-weight: 400; font-size: 1.85rem; line-height: 1; text-transform: none; letter-spacing: 0; white-space: nowrap; }

body.arts-site .as-barre__pictos {
	display: flex;
	align-items: center;
	gap: var(--as-e-1);
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	max-width: none;
}
body.arts-site .as-barre__pictos li { margin: 0; }
body.arts-site .as-picto {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: var(--as-e-1) var(--as-e-2);
	color: var(--as-texte);
	text-decoration: none;
	border-radius: var(--as-rayon);
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
}
body.arts-site .as-picto svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
body.arts-site .as-picto svg[hidden] { display: none; }
body.arts-site .as-picto__texte { font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .02em; }
body.arts-site .as-picto[aria-expanded="true"] { background: var(--as-surface-2); color: var(--as-texte); }
/* Survol seulement avec une souris (sur mobile, le « survol » restait collé après un toucher) */
@media (hover: hover) { body.arts-site .as-picto:hover { background: var(--as-surface-2); color: var(--as-texte); } }
/* Repère rouge sous le picto actif : celui dont la fenêtre est ouverte,
   sinon celui de la page en cours */
body.arts-site .as-barre { --accent: var(--as-rouge); --accent-texte: var(--as-rouge-texte); }
/* 2.48 : le pied de page garde le rouge de la marque, quelle que soit la couleur de la page */
body.arts-site .as-pied { --accent: var(--as-rouge); --accent-texte: var(--as-rouge-texte); }
/* Les pictos ouvrent des fenêtres : seul celui dont la fenêtre est ouverte
   porte le repère (pas de repère « page en cours » qui resterait affiché) */
body.arts-site .as-picto[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--as-rouge); }

/* Menu principal */
body.arts-site .as-menu { display: none; }
body.arts-site .as-menu__liste { list-style: none; margin: 0; padding: 0; max-width: none; }
body.arts-site .as-menu__liste li { margin: 0; }
body.arts-site .as-menu a,
body.arts-site .as-menu .as-menu__parent {
	display: block;
	padding: var(--as-e-3) var(--as-e-4);
	color: var(--as-texte);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--as-rayon);
}
/* Onglet parent sans page (lien « # » dans le menu) : bouton qui déplie */
body.arts-site .as-menu .as-menu__parent {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: var(--as-e-2);
	background: transparent; border: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
body.arts-site .as-menu__parent::after {
	content: ""; width: .5em; height: .5em; flex: 0 0 auto;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg); transition: transform var(--as-duree);
}
body.arts-site .as-menu__parent[aria-expanded="true"]::after { transform: translateY(25%) rotate(-135deg); }
body.arts-site .as-menu__parent[aria-expanded="false"] + .as-menu__sous { display: none; }
body.arts-site .as-menu .as-menu__parent:hover { background-color: var(--as-surface-2); }
body.arts-site .as-menu a:hover { background-color: var(--as-surface-2); color: var(--as-texte); }
/* 2.67 : chaque onglet porte la couleur de sa page (boîte « couleur de la page »,
   ou classe CSS as-accent-… posée sur l'élément dans Apparence → Menus).
   Le repère (page en cours, survol, sous-menu ouvert) prend cette couleur ;
   « vert et bleu » (restaurant & bar-café) donne un repère moitié-moitié. */
body.arts-site .as-menu li { --accent-2: initial; }
body.arts-site .as-menu li.as-accent-vert-bleu { --accent-2: var(--as-bleu); }
body.arts-site .as-menu a[aria-current="page"],
body.arts-site .as-menu a:hover,
body.arts-site .as-menu a:focus-visible,
body.arts-site .as-menu .as-menu__parent:hover,
body.arts-site .as-menu .as-menu__parent[aria-expanded="true"] {
	background-image: linear-gradient(180deg, var(--accent) 50%, var(--accent-2, var(--accent)) 50%);
	background-size: 4px 100%;
	background-position: left center;
	background-repeat: no-repeat;
}
body.arts-site .as-menu .as-menu__sous { list-style: none; margin: 0 0 var(--as-e-2); padding-left: var(--as-e-4); }
body.arts-site .as-menu .as-menu__sous a { font-weight: 500; color: var(--as-texte-2); }

/* Ordinateur : menu affiché dans la barre */
@media (min-width: 80rem) {
	body.arts-site .as-barre__bouton-menu { display: none; }
	body.arts-site .as-menu { display: block; flex: 1 1 auto; }
	body.arts-site .as-menu__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--as-e-1); }
	body.arts-site .as-menu__liste > li { position: relative; }
	body.arts-site .as-menu a,
	body.arts-site .as-menu .as-menu__parent { padding: var(--as-e-2) var(--as-e-3); font-size: var(--as-fs-2); }
	body.arts-site .as-menu .as-menu__parent { width: auto; }
	body.arts-site .as-menu a[aria-current="page"],
	body.arts-site .as-menu a:hover,
	body.arts-site .as-menu a:focus-visible,
	body.arts-site .as-menu .as-menu__parent:hover,
	body.arts-site .as-menu .as-menu__parent[aria-expanded="true"] {
		background-image: linear-gradient(90deg, var(--accent) 50%, var(--accent-2, var(--accent)) 50%);
		background-size: 100% 3px;
		background-position: left bottom;
	}
	/* Sous-menu : repère à gauche, comme sur mobile */
	body.arts-site .as-menu .as-menu__sous a[aria-current="page"],
	body.arts-site .as-menu .as-menu__sous a:hover,
	body.arts-site .as-menu .as-menu__sous a:focus-visible {
		background-image: linear-gradient(180deg, var(--accent) 50%, var(--accent-2, var(--accent)) 50%);
		background-size: 4px 100%;
		background-position: left center;
	}
	body.arts-site .as-menu .as-menu__sous {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		padding: var(--as-e-2);
		background: var(--as-surface);
		border: 1px solid var(--as-ligne);
		border-radius: var(--as-rayon);
		display: none;
	}
	body.arts-site .as-menu li:hover > .as-menu__sous,
	body.arts-site .as-menu li:focus-within > .as-menu__sous,
	body.arts-site .as-menu .as-menu__parent[aria-expanded="true"] + .as-menu__sous { display: block; }
	body.arts-site .as-barre__pictos { margin-left: 0; }
	/* Une seule ligne : la barre prend toute la largeur de l'écran,
	   les onglets ne passent jamais à la ligne */
	body.arts-site .as-barre__interieur { max-width: none; gap: var(--as-e-3); }
	body.arts-site .as-menu__liste { flex-wrap: nowrap; gap: 0; }
	body.arts-site .as-menu__liste > li > a,
	body.arts-site .as-menu__liste > li > .as-menu__parent { white-space: nowrap; padding-inline: var(--as-e-2); }
	body.arts-site .as-menu .as-menu__sous a { white-space: normal; }
	/* Petit filet vertical entre les onglets */
	body.arts-site .as-menu__liste > li { display: flex; align-items: center; }
	body.arts-site .as-menu__liste > li + li::before {
		content: ""; flex: 0 0 auto; width: 1px; height: 1.1em; margin-inline: var(--as-e-1);
		background: var(--as-gris-texte); opacity: .6;
	}
	body.arts-site .as-menu__liste > li > a,
	body.arts-site .as-menu__liste > li > .as-menu__parent { padding-inline: var(--as-e-3); }
}
/* Petit ordinateur : onglets un peu plus serrés */
@media (min-width: 80rem) and (max-width: 89.99rem) {
	body.arts-site .as-menu__liste > li > a,
	body.arts-site .as-menu__liste > li > .as-menu__parent { padding-inline: var(--as-e-2); font-size: .95rem; }
	body.arts-site .as-menu__liste > li + li::before { margin-inline: 2px; }
}
/* Ordinateur moyen : pictos sans libellé visible (le libellé reste lu
   par les lecteurs d'écran), pour garder une seule ligne */
@media (min-width: 80rem) and (max-width: 99.99rem) {
	body.arts-site .as-picto__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	body.arts-site .as-picto { position: relative; }
}
/* Mobile et tablette : panneau ouvert par le bouton ☰ */
@media (max-width: 79.99rem) {
	body.arts-site .as-barre.est-ouverte .as-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--as-barre-h));
		overflow-y: auto;
		padding: var(--as-e-4) var(--as-gouttiere) var(--as-e-6);
		background: var(--as-fond);
		border-bottom: 4px solid var(--accent);
	}
	body.arts-site .as-barre.est-ouverte .as-menu a,
	body.arts-site .as-barre.est-ouverte .as-menu .as-menu__parent { font-size: var(--as-fs-4); }
}
@media (max-width: 30rem) {
	body.arts-site .as-picto__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	body.arts-site .as-barre__logo img { height: 1.6rem; }
	body.arts-site .as-barre__interieur { gap: var(--as-e-2); }
	body.arts-site .as-barre__logo-texte { font-size: 1.5rem; }
	body.arts-site .as-barre__pictos { gap: 0; }
	body.arts-site .as-picto { min-width: 2.5rem; padding: var(--as-e-1); position: relative; }
	body.arts-site .as-barre__logo { min-width: 0; flex-shrink: 1; }
	body.arts-site .as-barre__logo img { max-width: 38vw; object-fit: contain; object-position: left center; }
}
/* Très petits écrans (320 px) */
@media (max-width: 22.5rem) {
	body.arts-site .as-barre__interieur { padding-inline: .75rem; gap: var(--as-e-1); }
	body.arts-site .as-barre__logo-texte { font-size: 1.3rem; }
	body.arts-site .as-picto { min-width: 2.375rem; padding-inline: 0; }
}

/* 8. Titres de page -------------------------------------------------------- */
body.arts-site .as-entete-page { padding-block: var(--as-e-8) var(--as-e-6); text-align: center; }
body.arts-site .as-titre-page { position: relative; margin-inline: auto; max-width: 22ch; }
/* Le grand guillemet coloré de l'identité actuelle, ignoré par les lecteurs d'écran */
body.arts-site .as-titre-page::before {
	content: "\201C";
	content: "\201C" / "";
	display: block;
	color: var(--accent);
	font-size: 1.6em;
	line-height: .6;
	height: .45em;
	font-weight: 800;
}
body.arts-site .as-entete-page .as-separateur,
body.arts-site .as-entete-page .as-surtitre { margin-inline: auto; }
body.arts-site .as-surtitre {
	display: block;
	margin: 0 0 var(--as-e-2);
	color: var(--accent-texte);
	font-size: var(--as-fs-1);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
body.arts-site .as-chapeau { font-size: var(--as-fs-4); line-height: 1.45; color: var(--as-texte-2); max-width: 40rem; }
body.arts-site .as-entete-page .as-chapeau { margin-inline: auto; }
body.arts-site .as-titre-section { display: flex; align-items: baseline; gap: var(--as-e-4); flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--as-e-5); }
body.arts-site .as-titre-section > :first-child { margin: 0; }
body.arts-site .as-texte-accent { color: var(--accent-texte); }

/* 9. Boutons --------------------------------------------------------------- */
body.arts-site .as-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--as-e-2);
	min-height: 2.75rem;
	padding: .65em 1.5em;
	border: 2px solid var(--accent);
	border-radius: var(--as-pilule);
	background: var(--accent);
	color: var(--sur-accent);
	font: inherit;
	font-size: var(--as-fs-2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background var(--as-duree), color var(--as-duree), border-color var(--as-duree);
}
body.arts-site .as-bouton:hover { background: var(--as-texte); border-color: var(--as-texte); color: #000; }
body.arts-site .as-bouton svg { width: 1.2em; height: 1.2em; flex: none; }
body.arts-site .as-bouton--contour { background: transparent; color: var(--as-texte); }
body.arts-site .as-bouton--contour:hover { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
body.arts-site .as-bouton--clair { background: var(--as-texte); border-color: var(--as-texte); color: #000; }
body.arts-site .as-bouton--clair:hover { background: var(--accent); border-color: var(--accent); }
body.arts-site .as-bouton--grand { font-size: var(--as-fs-3); padding: .8em 1.9em; }
body.arts-site .as-boutons { display: flex; flex-wrap: wrap; gap: var(--as-e-3); align-items: center; margin: var(--as-e-5) 0 0; }
body.arts-site ul.as-boutons { list-style: none; padding: 0; max-width: none; }
body.arts-site .as-boutons > li { margin: 0; }
body.arts-site .as-section--accent .as-bouton { background: #000; border-color: #000; color: var(--as-texte); }
body.arts-site .as-section--accent .as-bouton:hover { background: var(--as-texte); border-color: var(--as-texte); color: #000; }

body.arts-site .as-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 700;
	text-decoration: none;
	color: var(--as-texte);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}
body.arts-site .as-lien-fleche::after { content: "\2192"; content: "\2192" / ""; transition: transform var(--as-duree); }
body.arts-site .as-lien-fleche:hover { color: var(--accent-texte); }
body.arts-site .as-lien-fleche:hover::after { transform: translateX(3px); }

/* 10. Carrousel -------------------------------------------------------------
   Défilement par aimantation (fonctionne sans JavaScript, au doigt et au
   clavier) ; le script ajoute flèches, pastilles et lecture automatique
   avec bouton Pause (RGAA 13.8). */
body.arts-site .as-carrousel { position: relative; }
body.arts-site .as-carrousel__piste {
	display: flex;
	gap: var(--as-e-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
body.arts-site .as-carrousel__piste::-webkit-scrollbar { display: none; }
body.arts-site .as-carrousel__diapo {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}
body.arts-site .as-carrousel--cartes .as-carrousel__diapo { flex-basis: min(85%, 22rem); }
@media (min-width: 48rem) { body.arts-site .as-carrousel--cartes .as-carrousel__diapo { flex-basis: calc((100% - var(--as-e-5)) / 2); } }
@media (min-width: 64rem) { body.arts-site .as-carrousel--cartes .as-carrousel__diapo { flex-basis: calc((100% - 2 * var(--as-e-5)) / 3); } }

body.arts-site .as-carrousel__controles {
	display: flex;
	align-items: center;
	gap: var(--as-e-2);
	margin-top: var(--as-e-4);
}
body.arts-site .as-carrousel__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid var(--as-texte);
	border-radius: 50%;
	background: #000;
	color: var(--as-texte);
	cursor: pointer;
}
body.arts-site .as-carrousel__bouton svg { width: 1.25rem; height: 1.25rem; }
body.arts-site .as-carrousel__bouton:hover { background: var(--as-texte); color: #000; }
body.arts-site .as-carrousel__bouton[disabled] { opacity: .35; cursor: default; background: #000; color: var(--as-texte); }
body.arts-site .as-carrousel__points { display: flex; gap: var(--as-e-1); margin: 0 0 0 var(--as-e-2); padding: 0; list-style: none; }
body.arts-site .as-carrousel__points li { margin: 0; }
body.arts-site .as-carrousel__point {
	width: 2rem; height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
body.arts-site .as-carrousel__point::before {
	content: "";
	width: .75rem; height: .75rem;
	border-radius: 50%;
	border: 2px solid var(--as-texte);
}
body.arts-site .as-carrousel__point[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); }

/* Variante « à la une » : grande image, légende en bas */
body.arts-site .as-une .as-carrousel__diapo { position: relative; }
body.arts-site .as-une__image { width: 100%; height: clamp(22rem, 70vh, 44rem); object-fit: cover; }
body.arts-site .as-une__legende {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--as-e-8) var(--as-gouttiere) var(--as-e-6);
	background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,0) 100%);
}
body.arts-site .as-une__legende > * { max-width: var(--as-large); margin-inline: auto; }
body.arts-site .as-une__titre { font-size: var(--as-fs-7); font-weight: 800; text-transform: uppercase; margin-block: 0 var(--as-e-3); }
body.arts-site .as-une__legende p { color: var(--as-texte); font-size: var(--as-fs-4); line-height: 1.4; }
body.arts-site .as-une .as-carrousel__controles {
	position: absolute;
	top: var(--as-e-4);
	right: var(--as-gouttiere);
	margin: 0;
}

/* 11. Cartes ---------------------------------------------------------------- */
body.arts-site .as-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--as-surface);
	border-radius: var(--as-rayon);
	overflow: hidden;
	border-bottom: 4px solid var(--accent);
}
body.arts-site .as-carte__media { order: -1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--as-surface-2); margin: 0; }
body.arts-site .as-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
body.arts-site .as-carte:hover .as-carte__media img { transform: scale(1.04); }
body.arts-site .as-carte__corps { display: flex; flex-direction: column; gap: var(--as-e-2); padding: var(--as-e-5); flex: 1; }
body.arts-site .as-carte__titre { font-size: var(--as-fs-4); font-weight: 800; margin: 0; }
body.arts-site .as-carte__titre a { text-decoration: none; }
/* Toute la carte est cliquable, le lien reste celui du titre */
body.arts-site .as-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.arts-site .as-carte:focus-within { outline: 3px solid var(--as-focus); outline-offset: 3px; }
body.arts-site .as-carte__titre a:focus-visible { outline: none; }
body.arts-site .as-carte__date { order: -1; color: var(--as-texte-2); font-size: var(--as-fs-2); font-weight: 600; margin: 0; }
body.arts-site .as-carte__surtitre { order: -2; margin: 0; }
body.arts-site .as-carte__texte { color: var(--as-texte-2); font-size: var(--as-fs-2); margin: 0; }
body.arts-site .as-carte__pied { margin-top: auto; padding-top: var(--as-e-3); font-size: var(--as-fs-1); color: var(--as-texte-doux); }
body.arts-site .as-carte--passee { border-bottom-color: var(--as-ligne); }
body.arts-site .as-carte--passee .as-carte__media img { filter: grayscale(.6); }

/* 12. Infos pratiques ------------------------------------------------------ */
body.arts-site .as-infos {
	display: grid;
	gap: var(--as-e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
body.arts-site .as-info {
	margin: 0;
	padding: var(--as-e-5);
	background: var(--as-surface);
	border-top: 4px solid var(--accent);
	border-radius: var(--as-rayon);
}
body.arts-site .as-info__icone { width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: var(--as-e-3); }
body.arts-site .as-info__titre { font-size: var(--as-fs-4); font-weight: 800; margin: 0 0 var(--as-e-2); }
body.arts-site .as-info p:last-child { margin-bottom: 0; }

/* 13. Tuiles « Je suis… » -------------------------------------------------- */
body.arts-site .as-tuiles {
	display: grid;
	gap: var(--as-e-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
body.arts-site .as-tuiles li { margin: 0; }
body.arts-site .as-tuile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-e-3);
	height: 100%;
	min-height: 4.5rem;
	padding: var(--as-e-4) var(--as-e-5);
	background: var(--as-surface);
	border-left: 6px solid var(--accent);
	border-radius: var(--as-rayon);
	color: var(--as-texte);
	font-size: var(--as-fs-3);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--as-duree);
}
body.arts-site .as-tuile::after { content: "\2192"; content: "\2192" / ""; color: var(--accent-texte); font-size: 1.25em; transition: transform var(--as-duree); }
body.arts-site .as-tuile:hover { background: var(--as-surface-2); color: var(--as-texte); }
body.arts-site .as-tuile:hover::after { transform: translateX(4px); }

/* 14. Dépliants (<details>) ------------------------------------------------- */
body.arts-site .as-deplier { border-top: 1px solid var(--as-ligne); margin: 0; }
body.arts-site .as-deplier:last-of-type { border-bottom: 1px solid var(--as-ligne); }
body.arts-site .as-deplier > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-e-4);
	min-height: 3.5rem;
	padding: var(--as-e-4) 0;
	font-size: var(--as-fs-4);
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}
body.arts-site .as-deplier > summary::-webkit-details-marker { display: none; }
body.arts-site .as-deplier > summary::after {
	content: "+";
	content: "+" / "";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--sur-accent);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}
body.arts-site .as-deplier[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
body.arts-site .as-deplier > summary:hover { color: var(--accent-texte); }
body.arts-site .as-deplier__contenu { padding: 0 0 var(--as-e-6); }

/* 15. Sorties des pièces du back-office -------------------------------------- */

/* Carte du restaurant et du bar — [arts_carte tag="…"] */
body.arts-site .arts-carte { display: flex; flex-direction: column; margin: 0 0 var(--as-e-5); max-width: 48rem; }
body.arts-site .arts-carte-item {
	display: flex;
	gap: var(--as-e-4);
	align-items: flex-start;
	padding: var(--as-e-3) 0;
	border-bottom: 1px dotted var(--as-ligne);
}
body.arts-site .arts-carte-item:last-child { border-bottom: 0; }
body.arts-site .arts-carte-item-media { flex: 0 0 4.5rem; }
body.arts-site .arts-carte-item-media img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--as-rayon); }
body.arts-site .arts-carte-item-corps {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--as-e-4);
	row-gap: 2px;
	align-items: baseline;
}
body.arts-site .arts-carte-item-libelle { font-size: var(--as-fs-3); }
body.arts-site .arts-carte-item-prix { font-weight: 700; color: var(--accent-texte); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
body.arts-site .arts-carte-item-producteur { grid-column: 1 / -1; font-size: var(--as-fs-1); color: var(--as-texte-doux); font-style: italic; }
@media (max-width: 30rem) {
	body.arts-site .arts-carte-item-corps { grid-template-columns: 1fr; }
	body.arts-site .arts-carte-item-prix { text-align: left; }
}

/* Horaires — [arts_horaires_public espace="…"] */
/* Tous les espaces — [arts_horaires_public] sans paramètre (Horaires v0.3) */
body.arts-site .arts-horaires {
	display: grid;
	gap: var(--as-e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Ordinateur : tous les espaces sur une seule ligne, quel que soit leur nombre */
@media (min-width: 64rem) {
	body.arts-site .arts-horaires,
	body.arts-site .as-infos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--as-e-4); }
}
body.arts-site .arts-horaires {
	list-style: none; margin: 0; padding: 0; max-width: none;
}
body.arts-site .arts-horaires__espace {
	margin: 0;
	padding: var(--as-e-5);
	background: var(--as-surface);
	border-top: 4px solid var(--accent);
	border-radius: var(--as-rayon);
}
body.arts-site .arts-horaires__nom {
	display: flex; align-items: center; gap: var(--as-e-2);
	font-size: var(--as-fs-4); font-weight: 800; margin: 0 0 var(--as-e-3);
	color: var(--as-texte); text-transform: none;
}
body.arts-site .arts-horaires__nom::before {
	content: ""; flex: 0 0 auto; width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent);
}
/* Une couleur de la marque par espace (les autres gardent l'accent de la page) */
body.arts-site .arts-horaires__espace--site        { --accent: var(--as-rouge); }
body.arts-site .arts-horaires__espace--expositions { --accent: var(--as-rose); }
body.arts-site .arts-horaires__espace--restaurant  { --accent: var(--as-vert); }
body.arts-site .arts-horaires__espace--bar,
body.arts-site .arts-horaires__espace--bar-cafe    { --accent: var(--as-bleu); }
body.arts-site .arts-horaires__espace--boutique    { --accent: var(--as-jaune); }
body.arts-site .arts-horaires-vide { color: var(--as-texte-2); }
body.arts-site .arts-horaires-texte p { margin: 0 0 var(--as-e-2); }
body.arts-site .arts-horaires-texte p:last-child { margin-bottom: 0; }

/* Textes du site — [arts_bloc nom="…"] */
body.arts-site .arts-bloc > :last-child { margin-bottom: 0; }
body.arts-site .arts-bloc h2, body.arts-site .arts-bloc h3, body.arts-site .arts-bloc h4 { margin-top: var(--as-e-5); }

/* Logos partenaires — [arts_logos] */
body.arts-site .arts-logos {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--as-e-3) !important;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
body.arts-site .arts-logos__item {
	/* L'image remplit toute la vignette (format 16/9, celui des visuels producteurs), sans cadre */
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--as-rayon);
}
body.arts-site .arts-logos__img { display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none !important; object-fit: cover; }

/* 16. Formulaires ----------------------------------------------------------- */
body.arts-site .as-formulaire { display: grid; gap: var(--as-e-4); max-width: 32rem; }
body.arts-site .as-formulaire--ligne { grid-template-columns: 1fr; max-width: 40rem; }
@media (min-width: 40rem) { body.arts-site .as-formulaire--ligne { grid-template-columns: 1fr auto; align-items: end; } }
body.arts-site .as-champ { display: flex; flex-direction: column; gap: var(--as-e-1); }
body.arts-site .as-champ label, body.arts-site .as-libelle { font-weight: 700; font-size: var(--as-fs-2); }
body.arts-site .as-champ .as-requis { color: var(--as-rouge-texte); font-weight: 700; }
body.arts-site .as-aide { font-size: var(--as-fs-1); color: var(--as-texte-doux); margin: 0; }
body.arts-site :where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], select, textarea).as-saisie,
body.arts-site .as-champ :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	min-height: 2.75rem;
	padding: .6em .85em;
	border: 2px solid var(--as-bord-champ);
	border-radius: var(--as-rayon);
	background: var(--as-surface);
	color: var(--as-texte);
	font: inherit;
	font-size: var(--as-fs-3);
	line-height: 1.3;
	box-shadow: none;
}
body.arts-site .as-champ textarea { min-height: 8rem; resize: vertical; }
body.arts-site .as-champ :where(input, select, textarea):focus-visible { border-color: var(--as-focus); outline: 3px solid var(--as-focus); outline-offset: 0; }
body.arts-site .as-champ ::placeholder { color: var(--as-texte-doux); opacity: 1; }
body.arts-site .as-champ [aria-invalid="true"] { border-color: var(--as-rouge-texte); }
body.arts-site .as-erreur { color: var(--as-rouge-texte); font-size: var(--as-fs-2); font-weight: 600; margin: 0; }
body.arts-site .as-erreur::before { content: "\26A0\FE0E  "; content: "\26A0\FE0E  " / ""; }
body.arts-site .as-case { display: flex; gap: var(--as-e-3); align-items: flex-start; font-size: var(--as-fs-2); }
body.arts-site .as-case input { width: 1.25rem; height: 1.25rem; margin: .2em 0 0; flex: none; accent-color: var(--accent); }
body.arts-site .as-message-ok { padding: var(--as-e-4); border-left: 4px solid var(--as-vert); background: var(--as-surface); margin: 0; }

body.arts-site .as-newsletter { display: grid; gap: var(--as-e-5); align-items: center; }
@media (min-width: 60rem) { body.arts-site .as-newsletter { grid-template-columns: 1fr 1fr; gap: var(--as-e-7); } }
body.arts-site .as-newsletter__titre { font-size: var(--as-fs-5); font-weight: 800; margin: 0 0 var(--as-e-2); }

/* 17. Annonces, citations, vidéos, plans ------------------------------------ */
body.arts-site .as-annonce {
	display: flex;
	gap: var(--as-e-3);
	align-items: flex-start;
	padding: var(--as-e-4) var(--as-e-5);
	margin: 0 0 var(--as-e-5);
	background: var(--as-surface);
	border-left: 6px solid var(--accent);
	border-radius: var(--as-rayon);
}
body.arts-site .as-annonce svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: .1em; }
body.arts-site .as-annonce p:last-child { margin-bottom: 0; }
body.arts-site .as-annonce--alerte { border-left-color: var(--as-rouge); }
body.arts-site .as-annonce--alerte svg { color: var(--as-rouge-texte); }
body.arts-site .as-bandeau-annonce { max-width: none; margin: 0; background: var(--as-jaune); color: #000; text-align: center; padding: var(--as-e-2) var(--as-gouttiere); font-weight: 700; font-size: var(--as-fs-2); }
body.arts-site .as-bandeau-annonce a { color: #000; text-decoration-color: #000; }

body.arts-site blockquote {
	margin: var(--as-e-6) 0;
	padding: 0 0 0 var(--as-e-5);
	border-left: 4px solid var(--accent);
	font-size: var(--as-fs-4);
	line-height: 1.45;
	font-style: italic;
}
body.arts-site blockquote p { max-width: 38rem; }
body.arts-site blockquote cite, body.arts-site blockquote footer { display: block; margin-top: var(--as-e-3); font-size: var(--as-fs-2); font-style: normal; color: var(--as-texte-doux); }

body.arts-site .as-video, body.arts-site .as-plan {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--as-surface);
	border-radius: var(--as-rayon);
	overflow: hidden;
	margin: 0 0 var(--as-e-3);
}
body.arts-site .as-plan { aspect-ratio: 4 / 3; }
body.arts-site .as-video :where(iframe, video), body.arts-site .as-plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 18. Fil d'Ariane, pagination ---------------------------------------------- */
body.arts-site .as-ariane ol { display: flex; flex-wrap: wrap; gap: var(--as-e-2); list-style: none; padding: 0; margin: 0; font-size: var(--as-fs-1); color: var(--as-texte-doux); max-width: none; }
body.arts-site .as-ariane li { margin: 0; }
body.arts-site .as-ariane li + li::before { content: "/"; content: "/" / ""; margin-right: var(--as-e-2); color: var(--as-texte-doux); }
body.arts-site .as-ariane a { color: var(--as-texte-2); }
body.arts-site .as-ariane [aria-current="page"] { color: var(--as-texte); font-weight: 600; }

body.arts-site .as-pagination { display: flex; flex-wrap: wrap; gap: var(--as-e-2); align-items: center; justify-content: center; list-style: none; padding: 0; margin: var(--as-e-6) 0 0; max-width: none; }
body.arts-site .as-pagination li { margin: 0; }
body.arts-site .as-pagination a, body.arts-site .as-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--as-e-3);
	border: 2px solid var(--as-ligne); border-radius: var(--as-pilule);
	text-decoration: none; font-weight: 700;
}
body.arts-site .as-pagination a:hover { border-color: var(--accent); color: var(--as-texte); }
body.arts-site .as-pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

/* 19. Pied de page ---------------------------------------------------------- */
body.arts-site .as-pied {
	background: var(--as-pied-fond);
	border-top: 4px solid var(--accent);
	padding-block: var(--as-e-7) var(--as-e-5);
	font-size: var(--as-fs-2);
	color: var(--as-texte-2);
}
body.arts-site .as-pied__colonnes {
	display: grid;
	gap: var(--as-e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
body.arts-site .as-pied__titre { font-size: var(--as-fs-2); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--as-texte); margin: 0 0 var(--as-e-3); }
body.arts-site .as-pied p { margin: 0 0 var(--as-e-2); }
body.arts-site .as-pied ul { list-style: none; padding: 0; margin: 0; }
body.arts-site .as-pied li { margin: 0 0 var(--as-e-2); }
body.arts-site .as-pied a { color: var(--as-texte); }
body.arts-site .as-pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-e-3) var(--as-e-5);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--as-e-7);
	padding-top: var(--as-e-5);
	border-top: 1px solid var(--as-ligne);
	font-size: var(--as-fs-1);
}
body.arts-site .as-pied__legal { display: flex; flex-wrap: wrap; gap: var(--as-e-2) var(--as-e-4); }
body.arts-site .as-pied__legal li { margin: 0; }
body.arts-site .as-reseaux { display: flex; gap: var(--as-e-2); }
body.arts-site .as-reseaux li { margin: 0; }
body.arts-site .as-reseaux a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem;
	border: 2px solid var(--as-texte-2);
	border-radius: 50%;
	color: var(--as-texte);
	text-decoration: none;
}
body.arts-site .as-reseaux a:hover { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
body.arts-site .as-reseaux svg { width: 1.25rem; height: 1.25rem; }

/* 20. Utilitaires ------------------------------------------------------------ */
body.arts-site .as-centre { text-align: center; }
body.arts-site .as-centre > :where(p, ul, ol, .as-chapeau) { margin-inline: auto; }
body.arts-site .as-sans-marge { margin: 0 !important; }
body.arts-site .as-texte-doux { color: var(--as-texte-doux); }
body.arts-site .as-pleine-largeur { width: 100%; max-width: none; }
body.arts-site .as-masque-mobile { display: none; }
@media (min-width: 48rem) { body.arts-site .as-masque-mobile { display: revert; } body.arts-site .as-seulement-mobile { display: none; } }

/* 21. Mouvement réduit, couleurs forcées, impression -------------------------- */
@media (prefers-reduced-motion: reduce) {
	html:has(body.arts-site) { scroll-behavior: auto; }
	body.arts-site *, body.arts-site *::before, body.arts-site *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	body.arts-site .as-carte:hover .as-carte__media img { transform: none; }
}
@media (forced-colors: active) {
	body.arts-site .as-bouton, body.arts-site .as-tuile, body.arts-site .as-carte, body.arts-site .as-info, body.arts-site .as-annonce { border: 2px solid CanvasText; }
	body.arts-site .as-carrousel__point[aria-current="true"]::before { background: Highlight; }
	body.arts-site :focus-visible { outline-color: Highlight; }
}
@media print {
	body.arts-site { background: #fff; color: #000; font-size: 11pt; }
	body.arts-site :where(h1, h2, h3, h4, p, li, a, td, th) { color: #000 !important; }
	body.arts-site .as-barre, body.arts-site .as-carrousel__controles, body.arts-site .as-newsletter, body.arts-site .as-evitement, body.arts-site .as-reseaux { display: none !important; }
	body.arts-site .as-section, body.arts-site .as-pied, body.arts-site .as-carte, body.arts-site .as-info, body.arts-site .as-tuile { background: none !important; }
	body.arts-site a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
	body.arts-site .as-carrousel__piste { display: block; overflow: visible; }
}

/* =========================================================================
 * Fenêtres de la barre d'icônes (dialog natif : Échap, piège du focus)
 * ====================================================================== */
body.arts-site { --as-haut-barre: var(--as-barre-h); }
@media (min-width: 783px) { body.admin-bar.arts-site { --as-haut-barre: calc(var(--as-barre-h) + 32px); } }
/* Voile sous la barre : la barre reste visible et cliquable */
body.arts-site .as-voile { display: none; }
body.arts-site.as-fenetre-ouverte .as-voile {
	display: block; position: fixed; inset: 0; z-index: 90;
	background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html:has(body.arts-site.as-fenetre-ouverte) { overflow: hidden; }
body.arts-site.as-fenetre-ouverte .as-barre { z-index: 100; }
body.arts-site .as-fenetre {
	position: fixed; z-index: 95;
	top: calc(var(--as-haut-barre) + 1.25rem); left: 0; right: 0;
	width: min(100% - 2 * var(--as-gouttiere), 72rem);
	max-height: calc(100vh - var(--as-haut-barre) - 2.5rem);
	margin: 0 auto;
	padding: 0;
	color: var(--as-texte);
	background: var(--as-fond);
	border: 1px solid var(--as-ligne);
	border-top: 4px solid var(--accent);
	border-radius: var(--as-rayon);
	overflow: auto;
	overscroll-behavior: contain;
}
/* La barre et ses fenêtres concernent tout le site : une seule couleur, le rouge */
body.arts-site .as-fenetre { --accent: var(--as-rouge); --accent-texte: var(--as-rouge-texte); }
body.arts-site .as-fenetre__tete {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: var(--as-e-3);
	padding: var(--as-e-4) var(--as-e-5);
	background: var(--as-fond);
	border-bottom: 1px solid var(--as-ligne);
}
body.arts-site .as-fenetre__titre { margin: 0; font-size: var(--as-fs-5); text-transform: none; }
body.arts-site .as-fenetre__fermer {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 2.75rem; height: 2.75rem; padding: 0;
	color: var(--as-texte); background: var(--as-surface-2); border: 0; border-radius: 50%; cursor: pointer;
}
body.arts-site .as-fenetre__fermer:hover { background: var(--as-texte); color: #000; }
body.arts-site .as-fenetre__corps { padding: var(--as-e-5); }
body.arts-site .as-fenetre__corps > :last-child { margin-bottom: 0; }
/* Image en tête de fenêtre (choisie dans « Textes du site ») : bandeau pleine largeur */
body.arts-site .as-fenetre__corps > .as-fenetre__image {
	display: block; width: calc(100% + 2 * var(--as-e-5)); max-width: none; height: auto;
	aspect-ratio: 21 / 8; object-fit: cover;
	margin: calc(-1 * var(--as-e-5)) calc(-1 * var(--as-e-5)) var(--as-e-5);
}
body.arts-site .as-fenetre__pied { margin: 0; padding: 0 var(--as-e-5) var(--as-e-5); max-width: none; }
@media (prefers-reduced-motion: no-preference) {
	body.arts-site .as-fenetre[open] { animation: as-fenetre-entree .18s ease-out; }
	@keyframes as-fenetre-entree { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
}
@media (max-width: 40rem) {
	/* Mobile : la fenêtre monte du bas de l'écran ; la barre reste visible
	   au-dessus (toucher le fond assombri referme la fenêtre). */
	body.arts-site .as-fenetre { top: auto; bottom: 0; width: 100%; max-width: none; max-height: calc(100% - var(--as-haut-barre) - .75rem); margin: 0; border-radius: var(--as-rayon) var(--as-rayon) 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
	body.arts-site .as-fenetre__corps, body.arts-site .as-fenetre__pied { padding-inline: var(--as-gouttiere); }
	body.arts-site .as-fenetre__corps > .as-fenetre__image { width: calc(100% + 2 * var(--as-gouttiere)); margin-inline: calc(-1 * var(--as-gouttiere)); aspect-ratio: 16 / 7; }
	body.arts-site .as-fenetre__tete { padding-inline: var(--as-gouttiere); }
}

/* =========================================================================
 * Pages incluses (fenêtres) et réservation
 * ====================================================================== */
body.arts-site .as-page-incluse > :first-child { margin-top: 0; }
body.arts-site .as-fenetre .as-page-incluse .as-section { padding-block: var(--as-e-5); }
body.arts-site .as-fenetre .as-page-incluse .as-section:first-child { padding-top: 0; }
body.arts-site .as-fenetre .as-page-incluse .as-conteneur { padding-inline: 0; }
body.arts-site .as-image { width: 100%; height: auto; border-radius: var(--as-rayon); }
/* Le numéro de réservation (bloc « Réserver au restaurant ») devient un gros bouton */
body.arts-site .arts-bloc--contact-restaurant a[href^="tel:"] {
	display: inline-flex; align-items: center; gap: var(--as-e-2);
	min-height: 2.75rem; padding: var(--as-e-2) var(--as-e-5);
	background: var(--accent); color: var(--sur-accent); border-radius: 999px;
	font-weight: 800; text-decoration: none; margin-block: var(--as-e-1);
}
body.arts-site .arts-bloc--contact-restaurant a[href^="tel:"]:hover { background: var(--as-texte); color: #000; }
/* Mentions de la carte (tuile Menu, rubriques « Mentions ») : discrètes */
body.arts-site .as-mentions .arts-carte { margin: 0; max-width: none; }
body.arts-site .as-mentions .arts-carte-item { border: 0; padding-block: 2px; }
body.arts-site .as-mentions .arts-carte-item-libelle { font-size: var(--as-fs-1); color: var(--as-texte-doux); font-weight: 400; }

/* =========================================================================
 * Carrousel « Dock » (logos qui défilent, celui du centre agrandi)
 * <div class="as-dock" aria-label="…">[arts_logos dossier="producteurs"]</div>
 * Sans JavaScript : grille normale. Avec « réduire les animations » :
 * bande horizontale qu'on fait glisser (pas de mouvement automatique).
 * ====================================================================== */
body.arts-site .as-dock { position: relative; }
body.arts-site .as-dock.est-actif {
	overflow: hidden;
	padding-block: var(--as-e-6);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.arts-site .as-dock.est-actif .arts-logos {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--as-e-4) !important;
	width: max-content;
	will-change: transform;
}
body.arts-site .as-dock.est-actif .arts-logos__item {
	flex: 0 0 auto;
	width: clamp(10rem, 7rem + 9vw, 15rem);
	height: auto;
	transform-origin: center center;
	transition: box-shadow var(--as-duree);
}
body.arts-site .as-dock.est-actif .arts-logos__item.est-centre { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6); }
body.arts-site .as-dock.est-manuel {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-block: var(--as-e-4);
}
body.arts-site .as-dock.est-manuel::-webkit-scrollbar { display: none; }
body.arts-site .as-dock.est-manuel:focus-visible { outline: 3px solid var(--as-rouge); outline-offset: 2px; }
body.arts-site .as-dock.est-manuel .arts-logos {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--as-e-4) !important;
	width: max-content;
	padding-inline: calc(50% - clamp(5rem, 3.5rem + 4.5vw, 7.5rem));
}
body.arts-site .as-dock.est-manuel .arts-logos__item {
	flex: 0 0 auto;
	width: clamp(10rem, 7rem + 9vw, 15rem);
	height: auto;
	scroll-snap-align: center;
	opacity: .55;
}
body.arts-site .as-dock.est-manuel .arts-logos__item.est-centre { opacity: 1; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6); }
body.arts-site .as-dock__commandes { display: flex; justify-content: flex-end; margin-top: var(--as-e-2); }
body.arts-site .as-dock__pause {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0;
	color: var(--as-texte); background: var(--as-surface-2); border: 1px solid var(--as-ligne); border-radius: 50%; cursor: pointer;
}
body.arts-site .as-dock__pause svg { width: 1.1rem; height: 1.1rem; }
body.arts-site .as-dock__pause:hover { background: var(--as-texte); color: #000; }

/* Fenêtre rapide : colonnes Restaurant / Bar */
body.arts-site .as-colonnes-espaces { display: grid; gap: var(--as-e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
body.arts-site .as-colonnes-espaces > * > * + * { margin-top: var(--as-e-4); }
body.arts-site .as-image--bandeau { aspect-ratio: 21 / 8; object-fit: cover; }
body.arts-site .as-mentions { margin-top: var(--as-e-5); }

/* =========================================================================
 * Fiche d'un logo (producteur…) — [arts_logos fiches="1"]
 * ====================================================================== */
body.arts-site .arts-logos__fiche {
	display: block; width: 100%; height: 100%; padding: 0; margin: 0;
	border: 0; background: none; cursor: pointer; border-radius: inherit;
}
body.arts-site .arts-logos__fiche:focus-visible { outline: 3px solid var(--as-rouge); outline-offset: -3px; }
body.arts-site .as-fiche {
	width: min(100% - 2 * var(--as-gouttiere), 30rem);
	max-height: 80vh;
	padding: 0;
	color: var(--as-texte);
	background: var(--as-fond);
	border: 1px solid var(--as-ligne);
	border-top: 4px solid var(--accent, var(--as-rouge));
	border-radius: var(--as-rayon);
	overflow: auto;
}
body.arts-site .as-fiche::backdrop { background: rgba(0, 0, 0, .6); }
body.arts-site .as-fiche__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--as-e-3); padding: var(--as-e-4) var(--as-e-5) 0; }
body.arts-site .as-fiche__titre { margin: 0; font-size: 1.25rem; line-height: 1.25; }
body.arts-site .as-fiche__fermer {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
	color: var(--as-texte); background: var(--as-surface-2); border: 1px solid var(--as-ligne); border-radius: 50%;
}
body.arts-site .as-fiche__fermer svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { body.arts-site .as-fiche__fermer:hover { background: var(--as-texte); color: #000; } }
body.arts-site .as-fiche__texte { padding: var(--as-e-3) var(--as-e-5) var(--as-e-5); }
body.arts-site .as-fiche__texte > :first-child { margin-top: 0; }
body.arts-site .as-fiche__texte > :last-child { margin-bottom: 0; }

/* =========================================================================
 * Piles qui se déroulent — cartes du restaurant et du bar [arts_cartes]
 * Titres centrés ; prix dans une colonne fixe à droite, alignés d'une
 * ligne à l'autre et d'une pile à l'autre. Une colonne vide de même
 * largeur à gauche garde les libellés vraiment centrés.
 * ====================================================================== */
body.arts-site .as-piles { --prix-l: 10rem; max-width: 56rem; margin: 0 auto var(--as-e-8); }
body.arts-site .as-piles--restaurant { --accent: var(--as-vert); --accent-texte: var(--as-vert); }
body.arts-site .as-piles--bar { --accent: var(--as-bleu); --accent-texte: var(--as-bleu); }
body.arts-site .as-piles__titre { text-align: center; margin: 0 0 var(--as-e-5); }
body.arts-site .as-piles__titre::after { content: ""; display: block; width: 4rem; height: 3px; margin: var(--as-e-3) auto 0; background: var(--accent); }

body.arts-site .as-pile { border-top: 1px solid var(--as-ligne); }
body.arts-site .as-pile:last-child { border-bottom: 1px solid var(--as-ligne); }
body.arts-site .as-pile__titre {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 3.5rem;
	padding: var(--as-e-3) 3.5rem;
	cursor: pointer;
	list-style: none;
	text-align: center;
}
body.arts-site .as-pile__titre::-webkit-details-marker { display: none; }
body.arts-site .as-pile__nom { margin: 0; font-size: var(--as-fs-4); line-height: 1.25; }
body.arts-site .as-pile__icone {
	position: absolute; right: var(--as-e-3); top: 50%;
	width: 2rem; height: 2rem; margin-top: -1rem;
	border-radius: 50%; border: 1px solid var(--as-ligne);
}
body.arts-site .as-pile__icone::before, body.arts-site .as-pile__icone::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; margin: -1px 0 0 -.4rem;
	background: currentColor; transition: transform var(--as-duree);
}
body.arts-site .as-pile__icone::after { transform: rotate(90deg); }
body.arts-site .as-pile[open] .as-pile__icone::after { transform: rotate(0deg); }
body.arts-site .as-pile[open] .as-pile__icone { border-color: var(--accent); color: var(--accent-texte); }
body.arts-site .as-pile__titre:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) { body.arts-site .as-pile__titre:hover .as-pile__nom { color: var(--accent-texte); } }
body.arts-site .as-pile__corps { padding: 0 0 var(--as-e-6); }

/* Contenu d'une pile */
body.arts-site .as-pile .arts-carte { max-width: none; margin: 0; }
body.arts-site .as-pile .arts-carte-item { display: block; padding: var(--as-e-3) 0; }
body.arts-site .as-pile .arts-carte-item-corps {
	display: grid;
	grid-template-columns: var(--prix-l) minmax(0, 1fr) var(--prix-l);
	column-gap: var(--as-e-4);
	align-items: baseline;
}
body.arts-site .as-pile .arts-carte-item-libelle { grid-column: 2; text-align: center; text-wrap: balance; }
body.arts-site .as-pile .arts-carte-item-prix { grid-column: 3; grid-row: 1; white-space: nowrap; text-align: right; }
body.arts-site .as-pile .arts-carte-item-producteur { grid-column: 2; text-align: center; }
body.arts-site .as-pile .arts-carte-intertitre {
	margin: var(--as-e-6) 0 var(--as-e-2); text-align: center;
	font-size: var(--as-fs-3); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-texte);
}
body.arts-site .as-pile .arts-carte-note { margin: var(--as-e-3) auto; max-width: 40rem; text-align: center; color: var(--as-texte-2); text-wrap: balance; }
body.arts-site .as-pile .arts-carte-item-media { display: none; }
@media (max-width: 40rem) {
	body.arts-site .as-pile .arts-carte-item-corps { grid-template-columns: minmax(0, 1fr) auto; }
	body.arts-site .as-pile .arts-carte-item-prix { font-size: var(--as-fs-2); }
	body.arts-site .as-pile .arts-carte-item-libelle, body.arts-site .as-pile .arts-carte-item-producteur { grid-column: 1; text-align: left; }
	body.arts-site .as-pile .arts-carte-item-prix { grid-column: 2; }
	body.arts-site .as-pile__titre { padding-inline: 3rem; }
}

/* Ardoise — formules d'un menu (type « Formule » dans l'écran Menu) */
body.arts-site .arts-carte-ardoise {
	max-width: 38rem;
	margin: var(--as-e-4) auto var(--as-e-6);
	padding: var(--as-e-5) clamp(1rem, .5rem + 2vw, 2rem);
	background: var(--as-surface);
	border: 1px solid var(--as-ligne);
	border-top: 4px solid var(--accent);
	border-radius: calc(var(--as-rayon) * 2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 .75rem 2rem rgba(0, 0, 0, .45);
}
body.arts-site .arts-carte-ardoise-note { margin: 0 0 var(--as-e-4); text-align: center; color: var(--as-texte-2); text-wrap: balance; }
body.arts-site .arts-carte-ardoise-note:last-child { margin: var(--as-e-4) 0 0; }
body.arts-site .arts-carte-formule {
	display: flex; align-items: baseline; gap: var(--as-e-2);
	margin: 0; padding: var(--as-e-2) 0;
}
body.arts-site .arts-carte-formule-libelle { font-size: var(--as-fs-3); }
body.arts-site .arts-carte-formule-points { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--as-ligne); transform: translateY(-.3em); }
body.arts-site .arts-carte-formule-prix { font-size: var(--as-fs-4); font-weight: 700; color: var(--accent-texte); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.arts-site .arts-carte-formule-libelle { flex: 0 1 auto; min-width: 0; }

/* Pile qui réunit plusieurs rubriques (ex. « Carte » : Entrées, Plats…) */
body.arts-site .as-pile__partie + .as-pile__partie { margin-top: var(--as-e-6); }
body.arts-site .as-pile__partie-titre {
	margin: var(--as-e-4) 0 var(--as-e-2); text-align: center;
	font-size: var(--as-fs-3); text-transform: uppercase; letter-spacing: .1em; color: var(--accent-texte);
}
body.arts-site .as-pile__partie-titre::after { content: ""; display: block; width: 2.5rem; height: 2px; margin: var(--as-e-2) auto 0; background: var(--accent); }
body.arts-site .as-pile--reunie .arts-carte-intertitre { font-size: var(--as-fs-2); color: var(--as-texte-2); }

/* Ardoise-sommaire d'une pile réunie (Carte : Entrées, Plats…) */
body.arts-site .as-sommaire ul { list-style: none; margin: 0; padding: 0; }
body.arts-site .as-sommaire a.arts-carte-formule { color: var(--as-texte); text-decoration: none; border-radius: var(--as-rayon); }
body.arts-site .as-sommaire .as-sommaire__fleche { font-size: var(--as-fs-3); }
@media (hover: hover) {
	body.arts-site .as-sommaire a.arts-carte-formule:hover .arts-carte-formule-libelle { color: var(--accent-texte); }
	body.arts-site .as-sommaire a.arts-carte-formule:hover .arts-carte-formule-points { border-bottom-color: var(--accent); }
}
body.arts-site .as-sommaire a.arts-carte-formule:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.arts-site .as-pile__partie-titre { scroll-margin-top: calc(var(--as-haut-barre, 4.5rem) + 5rem); }
body.arts-site .as-pile__partie-titre:focus { outline: none; }

/* Fermer vite une pile longue :
 * 1. le titre d'une pile ouverte reste collé sous la barre d'icônes,
 *    avec son bouton « − » toujours à portée ;
 * 2. un bouton « Fermer ↑ » en bas de chaque pile. */
body.arts-site .as-pile[open] > .as-pile__titre {
	position: sticky; top: var(--as-haut-barre); z-index: 5;
	background: var(--as-fond);
	box-shadow: 0 1px 0 var(--as-ligne);
}
body.arts-site .as-pile, body.arts-site .as-pile__titre { scroll-margin-top: var(--as-haut-barre); }
body.arts-site .as-pile__pied { margin: var(--as-e-6) 0 0; text-align: center; }
body.arts-site .as-pile__fermer {
	display: inline-flex; align-items: center; gap: var(--as-e-2);
	min-height: 2.75rem; padding: var(--as-e-2) var(--as-e-5);
	font: inherit; font-weight: 600; color: var(--as-texte);
	background: transparent; border: 1px solid var(--as-ligne); border-radius: 999px; cursor: pointer;
}
body.arts-site .as-pile__fermer:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { body.arts-site .as-pile__fermer:hover { border-color: var(--accent); color: var(--accent-texte); } }

/* Bouton flottant « Fermer … ↑ » pendant la lecture d'une pile ouverte */
body.arts-site .as-flottant {
	position: fixed; z-index: 80; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
	transform: translate(-50%, 150%);
	display: inline-flex; align-items: center; gap: var(--as-e-2);
	max-width: calc(100% - 2rem); min-height: 3rem; padding: var(--as-e-2) var(--as-e-5);
	font: inherit; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #000; background: var(--as-texte);
	border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6);
	transition: transform var(--as-duree) ease-out;
}
body.arts-site .as-flottant.est-visible { transform: translate(-50%, 0); }
body.arts-site .as-flottant:focus-visible { outline: 3px solid var(--as-rouge); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.arts-site .as-flottant { transition: none; } }

/* =========================================================================
 * Page Restaurant — en-tête (photo 16/9, titre, texte) et ligne d'infos
 * L'emplacement du futur bandeau du site se trouve AU-DESSUS de cet
 * en-tête (chantier à part) : rien ici ne fait office de bandeau.
 * ====================================================================== */
body.arts-site .as-entete-media { display: grid; gap: var(--as-e-6); align-items: center; }
@media (min-width: 56rem) { body.arts-site .as-entete-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--as-e-7); } }
body.arts-site .as-entete-media__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--as-rayon); }
body.arts-site .as-entete-media__texte > :first-child { margin-top: 0; }
body.arts-site .as-entete-media__texte .as-titre-page { margin: 0 0 var(--as-e-4); text-align: left; }
@media (max-width: 55.99rem) { body.arts-site .as-entete-media__texte .as-titre-page { text-align: center; } }

/* Ligne d'infos : « Réserver » + mentions, chacune ouvre une petite fenêtre */
body.arts-site .as-infos-ligne {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: var(--as-e-3) var(--as-e-5);
	margin: var(--as-e-7) auto 0; max-width: 56rem;
	padding: var(--as-e-4) 0; border-top: 1px solid var(--as-ligne); border-bottom: 1px solid var(--as-ligne);
}
body.arts-site .as-lien-popup {
	padding: var(--as-e-2) 0; min-height: 2.75rem;
	font: inherit; color: var(--as-texte); background: none; border: 0; cursor: pointer;
	text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
@media (hover: hover) { body.arts-site .as-lien-popup:hover { color: var(--accent-texte); } }
body.arts-site .as-lien-popup:focus-visible, body.arts-site .as-bouton-popup:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
body.arts-site .as-bouton-popup {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--as-e-2) var(--as-e-6);
	font: inherit; font-weight: 700; color: #000; background: var(--accent); border: 0; border-radius: 999px; cursor: pointer;
}
@media (hover: hover) { body.arts-site .as-bouton-popup:hover { filter: brightness(1.12); } }
/* Contenu des petites fenêtres */
body.arts-site .as-fiche .arts-horaires { display: block; margin: 0 0 var(--as-e-4); }
body.arts-site .as-fiche .arts-horaires__espace { padding: 0; background: none; border: 0; }
body.arts-site .as-fiche .arts-carte { margin: 0; }
body.arts-site .as-fiche .arts-carte-item { padding: var(--as-e-2) 0; }
body.arts-site .as-fiche .arts-horaires__nom { font-size: var(--as-fs-3); }
/* Bouton d'action dans un en-tête photo + texte (ex. « Réserver ») */
body.arts-site .as-entete-media__action { margin: var(--as-e-6) 0 0; }
@media (max-width: 55.99rem) { body.arts-site .as-entete-media__action { text-align: center; } }
/* Ligne de mentions juste sous une série de piles */
body.arts-site .as-piles + .as-infos-ligne { margin-top: calc(var(--as-e-5) - var(--as-e-8)); margin-bottom: 0; border-top: 0; border-bottom: 0; }
/* En-tête de partie (ex. le bar) : photo à droite sur ordinateur, pour alterner */
@media (min-width: 56rem) { body.arts-site .as-entete-media--inverse .as-entete-media__photo { order: 2; } }
body.arts-site .as-entete-media__titre { margin: 0 0 var(--as-e-4); }
@media (max-width: 55.99rem) { body.arts-site .as-entete-media__titre { text-align: center; } }
body.arts-site .as-entete-media + .as-piles { margin-top: var(--as-e-7); }
/* Marge supplémentaire sur les côtés pour les en-têtes photo + texte
 * (la mise en page reste sur toute la largeur) */
body.arts-site .as-entete-media { padding-inline: clamp(.5rem, -1rem + 5vw, 6rem); }

/* Apparition en glissé : la photo et le texte arrivent chacun de leur côté
 * quand le bloc entre à l'écran (classe posée par site.js ; jamais si le
 * visiteur a demandé moins d'animations, et rien de caché sans JavaScript). */
html.as-anim body.arts-site .as-entete-media__photo,
html.as-anim body.arts-site .as-entete-media__texte {
	opacity: 0;
	transition: opacity .9s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1);
}
html.as-anim body.arts-site .as-entete-media__photo { transform: translateX(-3rem); }
html.as-anim body.arts-site .as-entete-media__texte { transform: translateX(3rem); transition-delay: .12s; }
html.as-anim body.arts-site .as-entete-media--inverse .as-entete-media__photo { transform: translateX(3rem); }
html.as-anim body.arts-site .as-entete-media--inverse .as-entete-media__texte { transform: translateX(-3rem); }
@media (max-width: 55.99rem) {
	html.as-anim body.arts-site .as-entete-media__photo,
	html.as-anim body.arts-site .as-entete-media--inverse .as-entete-media__photo { transform: translateY(2rem); }
	html.as-anim body.arts-site .as-entete-media__texte,
	html.as-anim body.arts-site .as-entete-media--inverse .as-entete-media__texte { transform: translateY(2rem); }
}
html.as-anim body.arts-site .as-entete-media.est-visible .as-entete-media__photo,
html.as-anim body.arts-site .as-entete-media.est-visible .as-entete-media__texte { opacity: 1; transform: none; }
/* Titres des piles : agrandis par site.js selon leur position à l'écran */
body.arts-site .as-pile__nom { transform-origin: center center; will-change: transform; }
/* L'en-tête visible à l'ouverture : effet plus lent et plus ample */
html.as-anim body.arts-site .as-entete-media.est-entree .as-entete-media__photo,
html.as-anim body.arts-site .as-entete-media.est-entree .as-entete-media__texte { transition-duration: 1.4s, 1.4s; }
html.as-anim body.arts-site .as-entete-media.est-entree .as-entete-media__texte { transition-delay: .25s; }

/* Piles tirées d'un bloc de Textes du site ([arts_bloc … format="piles"]) */
body.arts-site .as-piles--bloc { max-width: none; margin: var(--as-e-5) 0 0; }
body.arts-site .as-piles--bloc .as-pile__nom { font-size: var(--as-fs-3); }
body.arts-site .as-piles--bloc .as-pile__corps { padding-bottom: var(--as-e-5); }
body.arts-site .as-piles--bloc .as-pile__pied { margin-top: var(--as-e-4); }
/* Même marge sur les côtés que les en-têtes photo + texte */
body.arts-site .as-marges { padding-inline: clamp(.5rem, -1rem + 5vw, 6rem); }
/* Lien présenté comme le bouton d'action d'un en-tête */
body.arts-site a.as-bouton-popup { text-decoration: none; }
body.arts-site .as-flottant[hidden] { display: none; }
/* Sous la carte : l'adresse sur une ligne + bouton « Agrandir la carte » */
body.arts-site .as-sous-carte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--as-e-3) var(--as-e-5); margin-top: var(--as-e-4); }
body.arts-site .as-sous-carte .arts-bloc p { margin: 0; }

/* Vitrine d'un groupe de tuiles (labels, moyens de paiement) — [arts_vitrine] */
body.arts-site .as-vitrine-bloc + .as-vitrine-bloc { margin-top: var(--as-e-7); }
body.arts-site .as-vitrine__titre { text-align: center; font-size: var(--as-fs-4); margin: 0 0 var(--as-e-5); }
body.arts-site .as-vitrine { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--as-e-4); list-style: none; margin: 0 auto; padding: 0; max-width: none; }
body.arts-site .as-vitrine__item {
	display: flex; flex-direction: column; align-items: center; gap: var(--as-e-2);
	font: inherit; color: var(--as-texte); background: none; border: 0; padding: 0; text-align: center;
}
body.arts-site button.as-vitrine__item { cursor: pointer; }
body.arts-site button.as-vitrine__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--as-rayon); }
/* Logos : vignette blanche, logo entier */
body.arts-site .as-vitrine--logos .as-vitrine__item { width: 10rem; }
body.arts-site .as-vitrine--logos .as-vitrine__media {
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 3 / 2; padding: var(--as-e-3); background: #fff; border-radius: var(--as-rayon);
}
body.arts-site .as-vitrine--logos .as-vitrine__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
body.arts-site .as-vitrine--logos .as-vitrine__item:not(:has(.as-vitrine__media))::before {
	content: ""; display: block; width: 100%; aspect-ratio: 3 / 2; border: 1px dashed var(--as-ligne); border-radius: var(--as-rayon);
}
body.arts-site .as-vitrine--logos .as-vitrine__nom { font-size: var(--as-fs-1); line-height: 1.3; }
@media (hover: hover) { body.arts-site button.as-vitrine__item:hover .as-vitrine__nom { color: var(--accent-texte); text-decoration: underline; } }
/* Pastilles : une ligne compacte (ex. moyens de paiement) */
body.arts-site .as-vitrine--pastilles .as-vitrine__item {
	flex-direction: row; min-height: 2.75rem; padding: var(--as-e-2) var(--as-e-4);
	border: 1px solid var(--as-ligne); border-radius: 999px;
}
body.arts-site .as-vitrine--pastilles .as-vitrine__media { display: inline-flex; height: 1.75rem; padding: 2px 4px; background: #fff; border-radius: 3px; }
body.arts-site .as-vitrine--pastilles .as-vitrine__logo { height: 100%; width: auto; }
/* Piles d'un bloc : le titre ne doit pas hériter de la marge des intertitres */
body.arts-site .arts-bloc .as-pile__nom { margin: 0; }
/* Colonnes adresse + carte : les piles en haut, pas centrées sur la carte */
body.arts-site .as-duo.as-marges { align-items: start; }
body.arts-site .as-vitrine-note { max-width: 42rem; margin: var(--as-e-7) auto 0; text-align: center; font-size: var(--as-fs-2); color: var(--as-texte-2); }
body.arts-site .as-vitrine-note h3 { font-size: var(--as-fs-3); margin: 0 0 var(--as-e-2); color: var(--as-texte); }
/* Piles qui se suivent (bloc + vitrines + bloc) : une seule liste continue.
 * La page enveloppe la série dans .as-piles-serie. */
body.arts-site .as-piles-serie .as-piles--bloc { margin-top: 0; }
body.arts-site .as-piles-serie .as-piles--bloc ~ * .as-pile:first-child,
body.arts-site .as-piles-serie > * + * .as-pile:first-child,
body.arts-site .as-piles-serie > * + .as-piles--bloc > .as-pile:first-child { border-top: 0; }
body.arts-site .as-pile--vitrine .as-vitrine { justify-content: flex-start; }
body.arts-site .as-piles--bloc .arts-bloc { margin: 0; }
/* [arts_pile] : logo de la tuile et logos d'un dossier dans une pile */
body.arts-site .as-pile__logo { float: right; margin: 0 0 var(--as-e-3) var(--as-e-4); padding: 4px 6px; background: #fff; border-radius: var(--as-rayon); }
body.arts-site .as-pile__logo img { display: block; height: 3rem; width: auto; }
body.arts-site .as-pile__corps::after { content: ""; display: block; clear: both; }
body.arts-site .as-pile__logos { margin-top: var(--as-e-4); }
body.arts-site .as-pile__logos .arts-logos { display: flex !important; flex-wrap: wrap; gap: var(--as-e-3) !important; }
body.arts-site .as-pile__logos .arts-logos__item { width: 7.5rem; aspect-ratio: 3 / 2; padding: var(--as-e-2); background: #fff; display: flex; align-items: center; justify-content: center; }
body.arts-site .as-pile__logos .arts-logos__img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100% !important; object-fit: contain; }

/* Page Venir : coordonnées compactes sous les piles, et une carte assez haute
 * pour que la colonne de gauche (piles fermées + coordonnées) ne la dépasse pas */
body.arts-site .as-coordonnees { margin-top: var(--as-e-6); font-size: var(--as-fs-2); }
body.arts-site .as-coordonnees .arts-bloc__titre { font-size: var(--as-fs-4); margin: 0 0 var(--as-e-2); }
body.arts-site .as-coordonnees .arts-bloc--contacts { columns: 2; column-gap: var(--as-e-5); }
body.arts-site .as-coordonnees .arts-bloc--contacts .arts-bloc__titre { column-span: all; }
body.arts-site .as-coordonnees h3 { font-size: var(--as-fs-2); font-weight: 800; margin: 0 0 2px; break-after: avoid; }
body.arts-site .as-coordonnees p { margin: 0 0 var(--as-e-3); break-inside: avoid; }
body.arts-site .as-coordonnees .arts-bloc--contact-restaurant { margin-top: var(--as-e-3); }
body.arts-site .as-coordonnees .arts-bloc--contact-restaurant a[href^="tel:"] {
	display: inline; min-height: 0; padding: 0; margin: 0; background: none; color: inherit; font-weight: 700;
	border-radius: 0; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em;
}
@media (max-width: 30rem) { body.arts-site .as-coordonnees .arts-bloc--contacts { columns: 1; } }
@media (min-width: 52rem) { body.arts-site .as-duo.as-marges .as-plan { aspect-ratio: auto; height: clamp(26rem, 44vw, 40rem); } }

/* 2.21 — Mon séjour : carte du réseau culturel + vignettes carrées */
body.arts-site .as-sejour__carte { position: relative; height: clamp(28rem, 80vh, 50rem); margin-block: var(--as-e-5) var(--as-e-7); }
body.arts-site .as-sejour__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.arts-site .as-vignettes .as-carrousel__diapo { flex-basis: min(58%, 14.5rem); }
@media (min-width: 40rem) { body.arts-site .as-vignettes .as-carrousel__diapo { flex-basis: calc((100% - 3 * var(--as-e-5)) / 4); } }
@media (min-width: 64rem) { body.arts-site .as-vignettes .as-carrousel__diapo { flex-basis: calc((100% - 4 * var(--as-e-5)) / 5); } }
body.arts-site .as-vignette { position: relative; display: block; aspect-ratio: 1; overflow: hidden; color: #fff; text-decoration: none; background: #111; }
body.arts-site .as-vignette__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
body.arts-site .as-vignette__legende {
	position: absolute; inset: auto 0 0 0;
	display: block;
	padding: 2rem var(--as-e-3) var(--as-e-3);
	background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,0) 100%);
	font-size: .75rem; line-height: 1.35;
}
body.arts-site .as-vignette__nom { margin: 0 0 .2rem; font-size: .9375rem; line-height: 1.2; color: #fff; }
body.arts-site .as-vignette__texte, body.arts-site .as-vignette__texte p { display: block; margin: 0; color: #fff; }
body.arts-site a.as-vignette:hover .as-vignette__image, body.arts-site a.as-vignette:focus-visible .as-vignette__image { transform: scale(1.05); }
body.arts-site a.as-vignette:hover .as-vignette__nom { text-decoration: underline; }
body.arts-site a.as-vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.arts-site .as-vignette__image { transition: none; } }

/* 2.24 — Bandeaux de page (titre, baseline, petits yeux ; image(s) ou vidéo) */
body.arts-site .as-bandeau {
	position: relative;
	display: flex;
	align-items: center;
	height: clamp(15rem, 9rem + 18vw, 25rem);   /* 400 px au plus */
	overflow: hidden;
	background: var(--as-surface);
	isolation: isolate;
}
body.arts-site .as-bandeau__fond { position: absolute; inset: 0; z-index: -2; }
body.arts-site .as-bandeau__image, body.arts-site .as-bandeau__video {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover;
}
body.arts-site .as-bandeau__image { opacity: 0; transition: opacity 1.2s ease; }
body.arts-site .as-bandeau__image.est-active { opacity: 1; }
/* Voile sombre côté texte : lisibilité garantie quelle que soit la photo */
body.arts-site .as-bandeau::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%);
}
body.arts-site .as-bandeau--sans-image::before { display: none; }
body.arts-site .as-bandeau__texte {
	width: 100%;
	padding-inline: calc(var(--as-gouttiere) + clamp(.5rem, -1rem + 5vw, 6rem));
	max-width: 46rem;
	box-sizing: content-box;
	text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
body.arts-site .as-bandeau__titre {
	margin: 0 0 var(--as-e-2);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem);
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
}
body.arts-site .as-bandeau__titre::before { content: "\201C"; content: "\201C" / ""; color: var(--as-gris-texte); margin-right: .04em; }
body.arts-site .as-bandeau__baseline, body.arts-site .as-bandeau__baseline p {
	margin: 0; color: #fff;
	font-size: clamp(1rem, .9rem + .45vw, 1.3125rem); line-height: 1.4;
}
body.arts-site .as-bandeau__yeux { display: block; width: clamp(6rem, 4rem + 6vw, 9rem); height: auto; margin-top: var(--as-e-4); }
body.arts-site .as-bandeau__pause {
	position: absolute; right: var(--as-gouttiere); bottom: var(--as-e-4);
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0;
	border: 2px solid #fff; border-radius: 50%;
	background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
}
body.arts-site .as-bandeau__pause svg { width: 1.1rem; height: 1.1rem; }
body.arts-site .as-bandeau__pause:hover { background: #fff; color: #000; }
@media (max-width: 40rem) {
	body.arts-site .as-bandeau::before { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%); }
	body.arts-site .as-bandeau { align-items: flex-end; }
	body.arts-site .as-bandeau__texte { padding-bottom: var(--as-e-5); padding-right: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { body.arts-site .as-bandeau__image { transition: none; } }

/* 2.25 — Pied de page : 4 blocs (~200 px) — horaires un par un, coordonnées,
   liens, réseaux + newsletter ; puis partenaires et droits */
body.arts-site .as-pied { margin-top: var(--as-e-8); padding-block: var(--as-e-5) var(--as-e-4); }
body.arts-site .as-pied__blocs {
	display: grid; gap: var(--as-e-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
@media (min-width: 64rem) { body.arts-site .as-pied__blocs { grid-template-columns: 1.2fr 1.3fr 1fr .85fr .85fr; } }
body.arts-site .as-pied__bloc {
	min-height: 12.5rem; box-sizing: border-box;
	padding: var(--as-e-4); background: var(--as-surface); border-radius: var(--as-rayon);
	font-size: .875rem; line-height: 1.45;
}
body.arts-site .as-pied .as-pied__titre { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--as-e-3); color: var(--as-texte); }
body.arts-site .as-pied__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--as-e-2); }
body.arts-site .as-pied__entete .as-pied__titre { margin: 0; }
body.arts-site .as-pied__fleches { display: flex; gap: var(--as-e-1); }
body.arts-site .as-pied__fleches button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; padding: 0; border: 2px solid var(--as-texte); border-radius: 50%;
	background: none; color: var(--as-texte); cursor: pointer;
}
body.arts-site .as-pied__fleches button:hover { background: var(--as-texte); color: #000; }
body.arts-site .as-pied__fleches svg { width: 1rem; height: 1rem; }
body.arts-site .as-pied__horaires { list-style: none; margin: var(--as-e-3) 0 var(--as-e-2); padding: 0; }
body.arts-site .as-pied__horaire { margin: 0 0 var(--as-e-3); padding: var(--as-e-1) 0 0 var(--as-e-3); background: none; border: 0; border-left: 4px solid var(--accent); border-radius: 0; }
body.arts-site [data-un-par-un].est-actif [data-diapos] > li { display: none; margin: 0; }
body.arts-site [data-un-par-un].est-actif [data-diapos] > li.est-visible { display: block; animation: as-fondu-pied .6s ease; }
@keyframes as-fondu-pied { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.arts-site [data-un-par-un].est-actif [data-diapos] > li.est-visible { animation: none; } }
body.arts-site .as-pied__bloc--partenaires .arts-logos { margin: var(--as-e-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--as-e-2); justify-content: center; }
body.arts-site .as-pied__bloc--partenaires .arts-logos__item { width: 7.5rem; aspect-ratio: 1; background: #fff; }
body.arts-site .as-pied__bloc--partenaires.est-actif [data-diapos] > li.arts-logos__item { margin: 0 auto; }
body.arts-site .as-pied__bloc--partenaires .arts-logos__img { object-fit: contain; }
body.arts-site .as-pied__horaire .arts-horaires__nom { font-size: 1rem; margin: 0 0 var(--as-e-1); text-transform: none; letter-spacing: 0; }
body.arts-site .as-pied__horaire p { margin: 0 0 var(--as-e-1); }
body.arts-site .as-pied__bloc--horaires > p { margin: var(--as-e-2) 0 0; font-size: .8125rem; }
body.arts-site .as-pied__logo { display: inline-block; text-decoration: none; color: var(--as-texte); margin-bottom: var(--as-e-1); }
body.arts-site .as-pied__logo-texte { font-family: "Lartsolite Logo", "Raleway Artsolite", sans-serif; font-size: 1.5rem; line-height: 1; white-space: nowrap; }
body.arts-site .as-pied__logo-img { height: 1.75rem; width: auto; display: block; }
body.arts-site .as-pied__adresse p { margin: 0 0 var(--as-e-2); color: var(--as-texte-doux); }
body.arts-site .as-pied__contacts p { margin: 0 0 var(--as-e-1); }
body.arts-site .as-pied__etiquette { font-weight: 700; color: var(--as-texte-doux); }
body.arts-site .as-pied__etiquette::after { content: " :"; }
body.arts-site .as-pied__bloc--liens ul { list-style: none; margin: 0; padding: 0; }
body.arts-site .as-pied__bloc--liens li { margin: 0 0 var(--as-e-1); }
body.arts-site .as-pied__bloc--reseaux .as-reseaux { margin: 0 0 var(--as-e-4); flex-wrap: wrap; }
body.arts-site .as-pied__newsletter a {
	display: inline-block; padding: .55rem 1rem; border: 2px solid var(--as-texte); border-radius: var(--as-pilule);
	font-weight: 700; text-decoration: none;
}
body.arts-site .as-pied__newsletter a:hover { background: var(--as-texte); color: #000; }
body.arts-site .as-pied__newsletter p { margin: 0; }
/* v2.33 — Dans « Suivez-nous », le premier lien hors réseaux reste un bouton
 * (newsletter) ; les suivants deviennent des liens soulignés de rouge
 * (ex. « Ce qu'il s'est passé »). Texte blanc pour la lisibilité, trait rouge
 * de la marque. */
body.arts-site .as-pied__newsletter p + p { margin-top: var(--as-e-4); }
body.arts-site .as-pied__newsletter p + p a {
	display: inline; padding: 0; border: 0; border-radius: 0; background: none;
	color: var(--as-texte); font-weight: 700;
	text-decoration: underline; text-decoration-color: var(--as-rouge);
	text-decoration-thickness: 3px; text-underline-offset: 6px;
}
body.arts-site .as-pied__newsletter p + p a:hover,
body.arts-site .as-pied__newsletter p + p a:focus-visible { background: none; color: var(--as-texte); text-decoration-thickness: 5px; }
body.arts-site .as-pied a { text-underline-offset: 3px; }
body.arts-site .as-pied__partenaires { margin-top: var(--as-e-5); }
body.arts-site .as-pied__partenaires .as-pied__titre { margin: 0; }
body.arts-site .as-dock--pied .arts-logos__item,
body.arts-site .as-dock--pied.est-actif .arts-logos__item,
body.arts-site .as-dock--pied.est-manuel .arts-logos__item { width: clamp(4.5rem, 4rem + 2vw, 6rem); aspect-ratio: 1; }
body.arts-site .as-dock--pied .arts-logos__img { object-fit: contain; background: #fff; }
body.arts-site .as-dock--pied.est-actif { padding-block: var(--as-e-3); }
body.arts-site .as-pied__partenaires .as-dock__commandes { margin-top: 0; }
body.arts-site .as-pied__droits { margin-top: var(--as-e-3); padding-top: var(--as-e-3); border-top: 1px solid var(--as-ligne); font-size: .8125rem; color: var(--as-texte-doux); }
body.arts-site .as-pied__droits p { margin: 0; }
/* 2.56 — Lien « Qui a créé L''artsolite ? » à côté de la ligne de droits */
body.arts-site .as-pied__droits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--as-e-2) var(--as-e-5); }
body.arts-site .as-pied__droits .as-pied__fenetre { min-height: 2.75rem; padding: var(--as-e-2) 0; font-size: inherit; color: var(--as-texte); }
body.arts-site .as-plan-site, body.arts-site .as-plan-site ul { list-style: none; margin: 0; padding: 0; }
body.arts-site .as-plan-site ul { padding-left: var(--as-e-5); border-left: 2px solid var(--as-ligne); margin: var(--as-e-2) 0 var(--as-e-2) var(--as-e-2); }
body.arts-site .as-plan-site li { margin: 0 0 var(--as-e-2); font-size: var(--as-fs-3); }

/* =========================================================================
 * 2.31 — Picto « Réseaux » (bleu) et sa fenêtre plein écran
 * -------------------------------------------------------------------------
 * Données : tuile « Pied de page — Réseaux sociaux » (comme le pied de page).
 * La fenêtre occupe tout l'écran sous la barre ; la page est floutée
 * derrière ; les réseaux sont en colonne, nom sous l'icône.
 * Exception voulue à la règle « une seule couleur (rouge) pour la barre ».
 * ====================================================================== */
body.arts-site .as-picto.as-picto--reseaux { color: var(--as-bleu); }
@media (hover: hover) { body.arts-site .as-picto.as-picto--reseaux:hover { color: var(--as-bleu); } }
body.arts-site .as-picto.as-picto--reseaux[aria-expanded="true"] { color: var(--as-bleu); box-shadow: inset 0 -3px 0 var(--as-bleu); }
/* Petits téléphones (moins de 384 px) : pas de place, le picto disparaît ;
   les réseaux restent dans le pied de page. */
@media (max-width: 23.99rem) { body.arts-site .as-barre__item--reseaux { display: none; } }

/* Fond : page floutée (repli sombre uni si le flou n'est pas disponible
   ou si le visiteur a demandé moins de transparence) */
body.arts-site.as-fenetre-ouverte:has(#as-fenetre-reseaux[open]) .as-voile {
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(16px) saturate(.8);
	backdrop-filter: blur(16px) saturate(.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.arts-site.as-fenetre-ouverte:has(#as-fenetre-reseaux[open]) .as-voile { background: rgba(0, 0, 0, .93); }
}
@media (prefers-reduced-transparency: reduce) {
	body.arts-site.as-fenetre-ouverte:has(#as-fenetre-reseaux[open]) .as-voile { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* La fenêtre elle-même : transparente, plein écran sous la barre
   (sélecteur renforcé pour passer devant les règles des autres fenêtres,
   y compris la version « tiroir » du mobile) */
body.arts-site .as-fenetre.as-fenetre--reseaux {
	--accent: var(--as-bleu); --accent-texte: var(--as-bleu);
	top: var(--as-haut-barre); bottom: 0; left: 0; right: 0;
	width: 100%; max-width: none; height: auto; max-height: none;
	margin: 0; padding: 0;
	background: transparent;
	border: 0; border-radius: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
body.arts-site .as-fenetre.as-fenetre--reseaux[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
	body.arts-site .as-fenetre.as-fenetre--reseaux[open] { animation: as-reseaux-fondu .2s ease-out; }
	body.arts-site .as-fenetre--reseaux[open] .as-reseaux-pop__liste > li,
	body.arts-site .as-fenetre--reseaux[open] .as-reseaux-pop__bouton { animation: as-reseaux-entree .38s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
	@keyframes as-reseaux-fondu { from { opacity: 0; } to { opacity: 1; } }
	@keyframes as-reseaux-entree { from { opacity: 0; transform: translateY(1rem) scale(.94); } to { opacity: 1; transform: none; } }
}

body.arts-site .as-reseaux-pop__fermer { position: absolute; top: var(--as-e-4); right: var(--as-gouttiere); z-index: 2; background: rgba(255, 255, 255, .12); }
body.arts-site .as-reseaux-pop {
	flex: 1 0 auto;
	display: flex; flex-direction: column; align-items: center;
	gap: var(--as-e-5);
	min-height: 100%;
	padding: var(--as-e-6) var(--as-gouttiere) calc(var(--as-e-6) + env(safe-area-inset-bottom, 0px));
	text-align: center;
}
body.arts-site .as-reseaux-pop__titre {
	margin: 0; max-width: none;
	font-size: var(--as-fs-2); font-weight: 300;
	text-transform: uppercase; letter-spacing: .28em;
	color: var(--as-texte-2);
}
/* Colonne étalée sur toute la hauteur disponible */
body.arts-site .as-reseaux-pop__liste {
	flex: 1 0 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
	gap: var(--as-e-4);
	width: 100%; max-width: none;
	margin: 0; padding: 0; list-style: none;
}
body.arts-site .as-reseaux-pop__liste > li { margin: 0; }
body.arts-site .as-reseaux-pop__lien {
	display: flex; flex-direction: column; align-items: center; gap: var(--as-e-2);
	min-width: 9rem; padding: var(--as-e-2);
	color: var(--as-texte); text-decoration: none;
	border-radius: var(--as-rayon);
}
body.arts-site .as-reseaux-pop__rond {
	display: grid; place-items: center;
	width: clamp(3.5rem, 10vh, 5.25rem); aspect-ratio: 1;
	color: var(--as-bleu);
	background: rgba(0, 0, 0, .35);
	border: 2px solid var(--as-bleu);
	border-radius: 50%;
	transition: background-color .15s, color .15s, transform .15s;
}
body.arts-site .as-reseaux-pop__rond svg { width: 46%; height: 46%; }
body.arts-site .as-reseaux-pop__nom { font-size: var(--as-fs-3); font-weight: 400; letter-spacing: .04em; }
body.arts-site .as-reseaux-pop__lien:is(:hover, :focus-visible) .as-reseaux-pop__rond { background: var(--as-bleu); color: #000; transform: scale(1.06); }
body.arts-site .as-reseaux-pop__autres { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--as-e-3); }
body.arts-site .as-reseaux-pop__bouton {
	display: inline-flex; align-items: center; min-height: 2.75rem;
	padding: var(--as-e-2) var(--as-e-6);
	color: var(--as-texte); text-decoration: none;
	border: 2px solid var(--as-texte-2); border-radius: 999px;
	font-weight: 600;
}
body.arts-site .as-reseaux-pop__bouton:is(:hover, :focus-visible) { background: var(--as-texte); border-color: var(--as-texte); color: #000; }

/* Ordinateur : colonne centrée, sans s'étirer sur toute la hauteur */
@media (min-width: 48rem) and (min-height: 32rem) {
	body.arts-site .as-reseaux-pop { justify-content: center; gap: var(--as-e-6); }
	body.arts-site .as-reseaux-pop__liste { flex: 0 0 auto; justify-content: center; gap: var(--as-e-5); }
	body.arts-site .as-reseaux-pop__rond { width: clamp(3.75rem, 8vh, 5rem); }
}
/* Téléphone en paysage (peu de hauteur) : les réseaux passent en ligne */
@media (orientation: landscape) and (max-height: 32rem) {
	body.arts-site .as-reseaux-pop { justify-content: center; gap: var(--as-e-4); padding-block: var(--as-e-4); }
	body.arts-site .as-reseaux-pop__liste { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--as-e-4) var(--as-e-6); }
	body.arts-site .as-reseaux-pop__lien { min-width: 0; }
	body.arts-site .as-reseaux-pop__rond { width: 3.75rem; }
}
@media (forced-colors: active) {
	body.arts-site .as-reseaux-pop__rond, body.arts-site .as-reseaux-pop__bouton { border-color: CanvasText; }
}

/* =========================================================================
 * 2.34 — Page Boutique
 * ====================================================================== */

/* Carrousel « Dock » en ronds : <div class="as-dock as-dock--ronds">.
 * Les logos (carrés de préférence) sont recadrés en disque. Le format
 * 16/9 des visuels producteurs ne s'applique pas ici (il coupait les
 * ronds en deux). */
body.arts-site .as-dock--ronds .arts-logos__item,
body.arts-site .as-dock--ronds.est-actif .arts-logos__item,
body.arts-site .as-dock--ronds.est-manuel .arts-logos__item {
	width: clamp(6rem, 5rem + 2vw, 7.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
}
body.arts-site .as-dock--ronds .arts-logos { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
body.arts-site .as-dock--ronds.est-actif .arts-logos,
body.arts-site .as-dock--ronds.est-manuel .arts-logos { gap: var(--as-e-2) !important; }
body.arts-site .as-dock--ronds.est-manuel .arts-logos { padding-inline: calc(50% - clamp(3rem, 2.5rem + 1vw, 3.75rem)); }
body.arts-site .as-dock--ronds .arts-logos__img { object-fit: cover; border-radius: 50%; }
body.arts-site .as-dock--ronds .arts-logos__fiche { border-radius: 50%; }
body.arts-site .as-dock--ronds .arts-logos__fiche:focus-visible { outline-offset: -4px; }

/* En-tête photo + texte calé en haut : le titre s'aligne sur le bord
 * haut de la photo (au lieu d'être centré verticalement). */
body.arts-site .as-entete-media--haut { align-items: start; }
body.arts-site .as-entete-media--haut .as-entete-media__texte .arts-bloc > :first-child { margin-top: 0; }
body.arts-site .as-entete-media--haut .as-entete-media__texte .arts-bloc > :last-child { margin-bottom: 0; }

/* Effet vignette (bords assombris) : <div class="as-effet-vignette">…</div>
 * autour de la photo, de la vidéo ou du diaporama. */
body.arts-site .as-effet-vignette { position: relative; overflow: hidden; border-radius: var(--as-rayon); line-height: 0; }
body.arts-site .as-effet-vignette::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 4rem 1.5rem rgba(0, 0, 0, .78);
}
body.arts-site .as-effet-vignette img, body.arts-site .as-effet-vignette video { border-radius: 0; }

/* Photo d'un bloc avec plusieurs images (fondu) ou une vidéo —
 * [arts_bloc_image] de Textes du site 0.14+. Même principe que les bandeaux. */
body.arts-site .arts-bloc-media {
	position: relative; display: block; width: 100%;
	aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--as-rayon); background: var(--as-surface);
	line-height: 0;
}
body.arts-site .arts-bloc-media .arts-bloc-media__image,
body.arts-site .arts-bloc-media .arts-bloc-media__video {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	aspect-ratio: auto; object-fit: cover; border-radius: 0;
}
body.arts-site .arts-bloc-media .arts-bloc-media__image { opacity: 0; transition: opacity 1.2s ease; }
body.arts-site .arts-bloc-media .arts-bloc-media__image.est-active { opacity: 1; }
body.arts-site .arts-bloc-media__pause {
	position: absolute; right: var(--as-e-3); bottom: var(--as-e-3); z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0;
	border: 2px solid #fff; border-radius: 50%;
	background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; line-height: 1;
}
body.arts-site .arts-bloc-media__pause svg { width: 1.1rem; height: 1.1rem; }
body.arts-site .arts-bloc-media__pause:hover { background: #fff; color: #000; }
body.arts-site .arts-bloc-media__pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.arts-site .arts-bloc-media .arts-bloc-media__image { transition: none; } }

/* 2.51 : onglet Accueil dessiné comme un shed (élément de menu avec la classe CSS « as-menu-accueil »).
   Ordinateur : l'icône seule (le mot « Accueil » reste lu par les lecteurs d'écran). Menu mobile : icône + mot. */
body.arts-site .as-menu a.as-menu__accueil { display: inline-flex; align-items: center; gap: var(--as-e-2); }
body.arts-site .as-menu__accueil svg { width: 1.9em; height: 1.15em; flex: none; color: var(--as-texte); transition: transform var(--as-duree); }   /* 2.52 : blanc */
body.arts-site .as-menu a.as-menu__accueil:hover svg { transform: translateY(-2px); }
@media (min-width: 80rem) {
	body.arts-site .as-menu__accueil-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* 2.53 : page « Ce qu'il s'est passé » (extension Archives) : vignettes au format A4, comme les affiches.
   Les coins arrondis restent ceux de l'extension. */
body.arts-site .as-archives .as-arch__tuile { aspect-ratio: 210 / 297; }

/* 2.54 : pages « Je suis… » (Groupes et séminaires, Presse, Scolaires, Artistes) : illustration et bouton de téléchargement */
body.arts-site .as-profil__image { margin-block: var(--as-e-5) var(--as-e-6); }
body.arts-site .as-profil__image img { width: 100%; height: auto; }
body.arts-site .as-profil__action { margin-top: var(--as-e-6); }

/* 2.55 : formulaire de contact ([arts_formulaire]) */
body.arts-site .as-form { display: grid; gap: var(--as-e-4); margin-top: var(--as-e-7); padding-top: var(--as-e-6); border-top: 1px solid var(--as-ligne); }
body.arts-site .as-form__titre { margin: 0; }
body.arts-site .as-form .as-formulaire { max-width: 44rem; gap: var(--as-e-5); }
body.arts-site .as-form__duo { display: grid; gap: var(--as-e-4); }
@media (min-width: 40rem) { body.arts-site .as-form__duo { grid-template-columns: 1fr 1fr; } }
body.arts-site .as-form__profil { display: grid; gap: var(--as-e-5); }
body.arts-site .as-form__profil[hidden] { display: none; }
body.arts-site .as-form__groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
body.arts-site .as-form__groupe legend { padding: 0; margin-bottom: var(--as-e-2); }
body.arts-site .as-form__choix { display: flex; flex-wrap: wrap; gap: var(--as-e-2) var(--as-e-5); }
body.arts-site .as-form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.arts-site .as-form__merci:focus { outline: 3px solid var(--as-focus); outline-offset: 3px; }
body.arts-site .as-form .as-case a { color: inherit; }

/* =========================================================================
 * 2.61 — Pictogrammes officiels dans les textes : [picto velo] Texte…
 * ====================================================================== */
body.arts-site .as-picto-img { display: inline-block; width: 2.6em; height: 2.6em; vertical-align: middle; border-radius: .3em; margin: 0 .7em 0 0; }
body.arts-site li:has(> .as-picto-img:first-child) { list-style: none; display: flow-root; min-height: 2.6em; padding-block: .15em; }
body.arts-site li > .as-picto-img:first-child { float: left; margin-top: .1em; }
body.arts-site p > .as-picto-img:first-child { float: left; margin-top: .1em; }
body.arts-site p:has(> .as-picto-img:first-child) { display: flow-root; min-height: 2.6em; }
body.arts-site :is(h1, h2, h3, h4) .as-picto-img { width: 1.4em; height: 1.4em; margin-right: .45em; vertical-align: -.25em; }
body.arts-site .as-titre-page .as-picto-img { width: 1.1em; height: 1.1em; vertical-align: -.12em; }