:root {
	--green: #146434;
	--green-dark: #0d4423;
	--night: #0f1a14;
	--cream: #f6f1e7;
	--paper: #ffffff;
	--ink: #1e2620;
	--ink-soft: #5a6660;
	--gold: #c9a24a;
	--gold-deep: #a8832f; /* le doré, pour du texte sur fond clair */
	--line: #e3ddd0;
	--radius: 12px;
	--shadow: 0 14px 40px rgba(15, 26, 20, 0.14);
	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Source Sans 3', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--cream);
}

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

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.6em;
	color: var(--green-dark);
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); color: #fff; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

a { color: var(--green); }

.eyebrow {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold);
	margin-bottom: 0.8em;
}

/* En-tête */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 1.25rem;
	background: var(--green);
	color: #fff;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #fff;
	text-decoration: none;
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
}

.brand img { width: 52px; height: auto; }

.nav { display: flex; gap: 1.5rem; }

.nav a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
}

.nav a:hover, .nav a:focus { border-bottom-color: var(--gold); }

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	margin: 6px 0;
	background: #fff;
}

/* Bandeau d'accueil */
.hero {
	background:
		linear-gradient(rgba(13, 30, 20, 0.72), rgba(13, 30, 20, 0.82)),
		url('assets/img/photos/photo-couverture.jpg') center 35% / cover no-repeat,
		var(--night);
	color: #fff;
	padding: clamp(3.5rem, 10vw, 8rem) 1.25rem;
	text-align: center;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-inner { max-width: 760px; margin: 0 auto; }

.hero-logo { margin: 0 auto 1.5rem; width: clamp(180px, 30vw, 280px); }

.hero .eyebrow { color: var(--gold); }

.lead { font-size: 1.25rem; color: rgba(255, 255, 255, 0.86); max-width: 620px; margin: 0 auto 1.8em; }

/* Boutons */
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; }

.actions.center { justify-content: center; }

.hero .actions { justify-content: center; }

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--gold);
	color: var(--night);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--gold);
	transition: transform 0.15s ease, background 0.15s ease;
}

.button:hover, .button:focus { transform: translateY(-1px); background: #d9b25c; }

.button.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }

.section:not(.dark) .button.ghost { color: var(--green-dark); border-color: var(--green); }

.button.ghost:hover, .button.ghost:focus { background: rgba(255, 255, 255, 0.12); }

/* Sections */
.section { padding: clamp(3rem, 7vw, 6rem) 1.25rem; }

.section.dark { background: var(--night); color: rgba(255, 255, 255, 0.9); }

.section.dark h2 { color: #fff; }

.section.muted { background: var(--paper); }

/* Galerie : moins d'air au-dessus du titre, sous la section sombre */
#photos.section { padding-top: clamp(2rem, 4vw, 3rem); }

.container { max-width: 1100px; margin: 0 auto; }

.container.narrow { max-width: 760px; text-align: center; }

.container.narrow .actions { justify-content: center; }

.split {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.split.reverse { grid-template-columns: 0.8fr 1.2fr; }

/* Une colonne ne s'élargit jamais au-delà de l'écran (affiche sur téléphone) */
.split > * { min-width: 0; }

.intro { max-width: 720px; font-size: 1.15rem; }

/* Chiffres clés */
.facts {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.facts div {
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
}

.facts dt { margin-bottom: 0.5rem; }

/* Chaque encadré est cliquable : le lien du titre s'étend sur tout l'encadré, qui se soulève au survol */
.facts div:hover, .facts div:focus-within { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 26, 20, 0.18); }

.fact-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }

.fact-link {
	text-decoration: none;
	display: flex;
	/* Le texte, sur une ou deux lignes, est centré verticalement sur le chiffre */
	align-items: center;
	gap: 0.5rem;
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--gold-deep);
	line-height: 1.1;
}

/* Chiffres « alignés » (même hauteur que les majuscules) : les chiffres elzéviriens de Cormorant, comme le 3 qui descend, faussaient le centrage */
.facts dt strong { flex: 0 0 auto; font-size: 2.6rem; font-weight: 700; color: var(--green); line-height: 1; font-variant-numeric: lining-nums; }

.facts dd { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

.facts dd ul { margin: 0; padding-left: 1.1rem; }

.facts dd li { margin: 0.1rem 0; }

/* Affiche */
.poster { margin: 0; }

.poster img {
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 auto;
	width: 100%;
	max-width: 420px;
}

.poster figcaption {
	margin-top: 0.9rem;
	text-align: center;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.7);
}

/* Cartes */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 4px solid var(--green);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.card h3 { margin-bottom: 0.8rem; }

.card ul { margin: 0; padding-left: 1.1rem; }

.card li { margin-bottom: 0.5rem; }

/* Contact */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
	align-items: start;
}

.social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	transition: transform 0.15s ease;
}

.social:hover, .social:focus { transform: translateY(-2px); }

.social img { width: 160px; height: 160px; border-radius: 8px; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }

.social small { font-family: var(--sans); font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); }

.address {
	background: var(--green);
	color: #fff;
	border-radius: var(--radius);
	padding: 1.5rem;
	height: 100%;
}

.address h3, .address a { color: #fff; }

/* Tout le bloc « Répétitions » mène à la carte, et se soulève au survol comme les autres encadrés cliquables */
.address { position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease; }

.address:hover, .address:focus-within { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 26, 20, 0.22); }

.address-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }

/* Pied de page */
.site-footer {
	background: var(--green-dark);
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 2rem 1.25rem;
	font-size: 0.95rem;
}

.site-footer img { margin: 0 auto 0.6rem; width: 44px; }

.site-footer a { color: #fff; }

/* Page mentions légales */
.legal { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem; }

/* Écrans étroits */
@media (max-width: 860px) {
	.split, .split.reverse { grid-template-columns: 1fr; }
	.cards, .contact-grid { grid-template-columns: 1fr; }
	.poster img { max-width: 340px; }
}

@media (max-width: 1100px) {
	.nav-toggle { display: block; }
	#nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--green-dark);
		padding: 0.5rem 1.25rem 1rem;
	}
	#nav.open { display: flex; }
	#nav a { padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (max-width: 700px) {
	.brand span { font-size: 1.15rem; }
	/* Téléphone : les 4 encadrés tiennent dans la largeur de l'écran, collés à gauche et resserrés.
	   minmax(0, 1fr) : une colonne ne s'élargit plus au-delà de sa part, même avec un mot long. */
	.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.45rem;
		margin-left: -1rem;
		margin-right: -0.6rem;
	}
	.facts div { padding: 0.7rem 0.6rem; }
	.fact-link { font-size: 1.02rem; gap: 0.35rem; }
	.facts dt strong { font-size: 1.9rem; }
	.facts dt { margin-bottom: 0.35rem; }
	.facts dd { font-size: 0.86rem; overflow-wrap: anywhere; }
	.facts dd ul { padding-left: 0.9rem; }
}

/* Navigation : page courante */
.nav a.current { border-bottom-color: var(--gold); }

/* Titre de page intérieure */
.page-title {
	background: var(--green);
	color: #fff;
	padding: 1.5rem 1.25rem 1.6rem;
}

.page-title h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 0.3em; }

.page-title .eyebrow { margin-bottom: 0.3em; }

.page-title h1 { color: #fff; }

.page-title .lead { margin: 0; max-width: 860px; }

.container.narrow-left { max-width: 820px; }

.loading { color: var(--ink-soft); font-style: italic; }

/* Trombinoscope */
.pupitre { margin-bottom: 3rem; }

.pupitre h2 {
	font-size: 1.7rem;
	border-bottom: 2px solid var(--gold);
	display: inline-block;
	padding-bottom: 0.2rem;
	margin-bottom: 1.2rem;
}

.people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 1.5rem;
}

.person {
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: center;
}

.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Relief au survol : la photo s'ouvre en grand au clic */
.person { cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease; }

.person:hover, .person:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 26, 20, 0.18); outline: none; }

.photo-viewer-box { margin: 0; background: #fff; border-radius: var(--radius); padding: 1rem; text-align: center; max-width: 92vw; }

.photo-viewer-box img { width: min(80vmin, 600px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }

.photo-viewer-box figcaption { margin-top: 0.8rem; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--green-dark); }

/* Anciens choristes : vignettes plus petites, la liste s'allongera avec les années */
.anciens .people { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.9rem; }

.anciens .person figcaption { padding: 0.5rem 0.4rem 0.6rem; }

.anciens .person strong { font-size: 0.98rem; line-height: 1.2; }

.person figcaption { padding: 0.8rem 0.6rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }

.person strong { font-family: var(--serif); font-size: 1.2rem; color: var(--green-dark); }

.person span { font-size: 0.92rem; color: var(--gold); font-weight: 600; }

.person small { color: var(--ink-soft); }

/* Onglets des concerts */
.tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }

.tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 0.7rem 1.2rem;
	font: inherit;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ink-soft);
	cursor: pointer;
}

.tab.active { color: var(--green-dark); border-bottom-color: var(--gold); }

.tab-panel[hidden] { display: none; }

.concerts { display: grid; gap: 1.5rem; }

/* Une carte par concert : l'affiche (format A3, 1 x 1,414) est montrée entière, jamais recadrée.
   Toute la carte est cliquable, avec un relief au survol. */
.concert {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1.5rem;
	align-items: start;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Toute la carte mène au concert : le lien du titre s'étend sur l'ensemble de la carte */
.concert { position: relative; cursor: pointer; }

.concert-body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Lien vers un chœur partenaire : au-dessus de la carte cliquable, il mène à son propre site */
.partner-link { position: relative; z-index: 2; color: inherit; text-decoration: none; }

/* Au survol, le nom se souligne, dans la couleur du texte qui l'entoure (doré dans le sous-titre, noir dans le texte) */
.partner-link:hover, .partner-link:focus { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }

/* Écran étroit (téléphone) : le nom du chœur partenaire est souligné d'emblée, pour qu'on voie qu'il est cliquable */
@media (max-width: 700px) {
	.partner-link { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
}

.concert:hover, .concert:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(15, 26, 20, 0.22);
}

.concert.upcoming {
	border: 2px solid var(--gold);
	box-shadow: var(--shadow);
	grid-template-columns: 280px 1fr;
}

.concert-poster-link { display: block; line-height: 0; }

.concert-poster {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.25s ease;
}

.concert:hover .concert-poster { transform: scale(1.02); }

.empty-poster { display: block; }

.concert-body { padding: 1.4rem 1.5rem; }

.concert-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.3rem; }

.concert-head h3 { margin: 0; font-size: 2.4rem; }

.concert-head .button { flex-shrink: 0; }

.concert-body h3 a { color: inherit; text-decoration: none; }

.concert:hover .concert-body h3 a { text-decoration: underline; text-decoration-color: var(--gold); }

.concert-date {
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold);
	margin-bottom: 0.4rem;
}

.concert.upcoming h3 { font-size: 2.8rem; }

.concert-sub { color: var(--gold-deep); font-weight: 600; margin-bottom: 0.6rem; }

.concert-dates { list-style: none; margin: 0 0 1.2rem; padding: 0; }

.concert-dates li { display: flex; flex-direction: column; padding: 0.55rem 0; border-top: 1px solid var(--line); }

.concert-dates li:first-child { border-top: 0; }

.concert-dates strong { color: var(--green-dark); }

.concert-dates small { color: var(--ink-soft); }

.concert-dates.compact li { padding: 0.35rem 0; }

/* Concert à venir : un extrait de la présentation (trois lignes, puis « … ») ; le texte entier est sur la page du concert */
.concert-summary {
	color: var(--ink);
	margin: 0.2rem 0 0;
	max-width: 62ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Page d'un concert : une date par encadré blanc, côte à côte */
.concert-dates.boxes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.8rem;
	margin: 2rem 0 1.5rem;
}

.concert-dates.boxes li {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.8rem 1rem;
	line-height: 1.4;
}

.concert-dates.boxes li:first-child { border-top: 1px solid var(--line); }

/* Encadrés des dates : se soulèvent légèrement au survol, comme les autres encadrés (sans bouger la mise en page) */
.concert-dates.boxes li { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.concert-dates.boxes li:hover, .concert-dates.boxes li:focus-within { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 26, 20, 0.16); }

/* Le jour et l'heure sur une ligne, l'heure centrée sur la hauteur du jour */
.concert-dates.boxes .date-day { display: flex; align-items: baseline; font-family: var(--serif); font-size: 2rem; font-weight: 700; color: #115a2e; line-height: 1.1; margin-bottom: 0.15rem; }

.concert-dates.boxes strong { color: var(--gold-deep); font-size: 0.92rem; white-space: nowrap; }

.concert-dates.boxes .date-lieu, .concert-dates.boxes .date-lieu ~ span { font-size: 0.9rem; }

/* L'heure, à droite du jour : plus petite, dans le même vert foncé que le jour (le vert clair paraissait délavé) */
.concert-dates.boxes .date-hour { display: inline-flex; align-items: center; position: relative; top: -0.35em; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: #115a2e; margin-left: 0.6rem; }

/* Concert à venir : l'heure en grand, dans la police du jour. Même construction que pour les concerts
   passés (le point, centré sur l'heure) : seuls la taille, la police et le décalage vertical changent. */
.concert-dates.boxes.upcoming .date-hour { font-family: var(--serif); font-size: 0.8em; font-weight: 700; top: calc(-0.24em - 1px); font-variant-numeric: lining-nums; }

/* Point décoratif entre le jour et l'heure : 5 × 5 px, jamais rétréci par la ligne */
.concert-dates.boxes .date-hour::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-right: 0.6rem; }

/* Concert à venir : le point à la même hauteur que sur les concerts passés (8,4 px au-dessus de la base du jour) */
.concert-dates.boxes.upcoming .date-hour::before { position: relative; top: 1.2px; }

/* Le mot « Église » devant le lieu : sous-entendu sur ordinateur, affiché sur écran étroit */
.lieu-eglise { display: none; }

@media (max-width: 700px) {
	.lieu-eglise { display: inline; }
}

.concert-dates.boxes .date-lieu { color: var(--ink); font-weight: 600; }

/* Le lieu mène à la carte (Google Maps) */
.concert-dates.boxes a.date-lieu { text-decoration: none; }

/* Au survol, le lieu reste noir et se souligne, dans sa couleur */
.concert-dates.boxes a.date-lieu:hover, .concert-dates.boxes a.date-lieu:focus { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }

/* Page d'un concert */
.back { margin: 0; }

/* Haut de la page d'un concert : les concerts précédent et suivant juste à droite du lien de retour */
.concert-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 2.5rem; margin-bottom: 1.5rem; }

.concert-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; }

/* « Concert passé » / « Concert à venir », sur la ligne des liens */
.concert-status { margin: 0; font-size: 1rem; }

/* La page d'un concert charge la graisse 800 pour « à venir » : les autres gras restent en demi-gras (600), comme avant */
body[data-page="concert"] strong, body[data-page="concert"] b { font-weight: 600; }

body[data-page="concert"] .concert-status strong { font-weight: 800; }

.concert-status:empty { display: none; }

.concert-nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; }

.concert-detail {
	display: grid;
	grid-template-columns: minmax(280px, 5fr) 7fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.concert-detail-poster img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.concert-detail-body h1 { color: var(--green-dark); font-size: clamp(2rem, 4vw, 3rem); }

.concert-detail-body h2 { font-size: 1.5rem; margin-top: 1.6rem; }

.concert-detail-body .lead { color: var(--gold-deep); font-weight: 600; margin: 0 0 0.5rem; max-width: none; }

/* Vidéo YouTube d'un concert, au format 16/9 */
.concert-video { margin-top: 1.5rem; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--night); }

/* Miniature posée sur le lecteur pendant le chargement ; les clics passent au travers */
.concert-video-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.concert-video-cover.hidden { opacity: 0; }

.concert-video iframe, .concert-video video { width: 100%; height: 100%; border: 0; display: block; }

.concert-video-link { margin-top: 0.6rem; font-size: 0.95rem; }

.empty {
	background: var(--paper);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
}

/* Chants par saison */
.saison { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }

/* Au survol d'une saison, un très léger relief : on comprend qu'on peut l'ouvrir ou la fermer */
.saison { transition: transform 0.18s ease, box-shadow 0.18s ease; }

.saison:has(.saison-toggle:hover), .saison:has(.saison-toggle:focus-visible) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 26, 20, 0.08); }

.saison h2 { margin: 0; }

.saison-toggle {
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	background: none;
	border: 0;
	padding: 1.1rem 1.4rem;
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--green-dark);
	cursor: pointer;
	text-align: left;
}

.saison-toggle small { font-family: var(--sans); font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); }

.saison-toggle::after { content: '+'; margin-left: auto; color: var(--gold); font-size: 1.6rem; }

.saison.open .saison-toggle::after { content: '−'; }

.saison-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s ease;
}

.saison.open .saison-body { grid-template-rows: 1fr; }

.saison-inner { overflow: hidden; padding: 0 1.4rem; transition: padding 0.6s ease; }

.saison.open .saison-inner { padding-bottom: 1.2rem; }

.trimestre {
	font-size: 1.15rem;
	margin: 1.2rem 0 0.4rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid var(--line);
	color: var(--gold);
}

.chant-list { margin: 0; padding: 0 0 0.4rem 1.3rem; }

.chant-list li { margin-bottom: 0.5rem; }

.chant-list .compositeur { color: var(--ink-soft); }

/* Petit tiret doré, léger, entre le titre et le compositeur */
.chant-list .compositeur::before { content: '–'; margin: 0 0.45em; color: var(--gold); font-weight: 400; }

.chant-list small { display: block; color: var(--ink-soft); }

@media (max-width: 700px) {
	.concert, .concert.upcoming { grid-template-columns: 1fr; }
	.concert-body { padding: 1.2rem; }
	.concert-poster { max-height: 70vh; }
}

@media (max-width: 860px) {
	.concert-detail { grid-template-columns: 1fr; }
	.concert-detail-poster img { max-width: 480px; margin: 0 auto; display: block; }
}

/* Vidéo de présentation */
.video-section .container { text-align: center; }

.video-section video {
	width: 100%;
	max-width: 900px;
	margin: 1rem auto 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: #000;
	display: block;
}

/* Galerie de photos */
.gallery {
	display: grid;
	grid-template-columns: 3fr 2fr 2fr 3fr;
	gap: 1rem;
	margin-top: 1.5rem;
}

.gallery img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

@media (max-width: 860px) {
	.gallery { grid-template-columns: 1fr 1fr; }
	.gallery img { height: 240px; }
}

/* QR codes sous les boutons */
.qr-row { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; }

.qr-row a { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; }

.qr-row img { width: 130px; height: 130px; border-radius: 8px; border: 1px solid var(--line); background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }

.qr-row a:hover img, .qr-row a:focus img, .social:hover img, .social:focus img { transform: scale(1.12); box-shadow: var(--shadow); }

/* Visionneuse des QR codes : en grand, pour être lu par un téléphone */
.qr-viewer {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 26, 20, 0.88);
	padding: 1.5rem;
}

.qr-viewer.open { display: flex; }

.qr-viewer-box {
	background: #fff;
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
	max-width: 92vw;
}

.qr-viewer-box img { width: min(70vmin, 520px); height: auto; display: block; margin: 0 auto 1rem; }

.qr-viewer-box p { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.5rem; color: var(--green-dark); }

.qr-viewer-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
}

/* Section « L'ensemble » : la devise en vert, la question en doré */
.motto { color: var(--green); font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: 0.2em; }

.motto-sub { color: var(--gold-deep); font-size: 1.6rem; margin-bottom: 0.9em; }

/* Les trois rendez-vous, sur une ligne */
.rdv { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--gold); }

/* Pages intérieures : moins d'air que sur l'accueil */
body[data-page] .section { padding-top: clamp(1.5rem, 3vw, 2.2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

/* Pages intérieures : le titre de la page est dans la barre fixe du haut, après le nom de l'ensemble ;
   le bandeau vert ne garde que la phrase d'introduction, qui part au défilement */
.header-title {
	margin-right: auto;
	padding-left: 1.5rem;
	border-left: 1px solid rgba(201, 162, 74, 0.5);
	min-width: 0;
}

.header-title .eyebrow { margin: 0 0 0.15em; line-height: 1; font-size: 0.78rem; }

.header-title h1 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; white-space: nowrap; }

/* Nom de la rubrique seul dans la barre, en doré ; le titre de la page est dans le bandeau */
/* Même style que les petits mots dorés (« Musique sacrée ») : capitales espacées, police du texte ; taille gardée */
.header-name { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; color: var(--gold); }

/* Rubrique seule dans la barre (page des choristes) : sans trait, placée pile au-dessus du titre du bandeau.
   --title-x : bord gauche commun, celui du contenu de la page, mais jamais sous le nom de l'ensemble */
@media (min-width: 701px) {
	body:has(.rubric) { --title-x: max((100vw - 1100px) / 2, 17.5rem); }

	.header-title.rubric {
		position: absolute;
		left: var(--title-x);
		top: 50%;
		transform: translateY(-50%);
		padding-left: 0;
		border-left: 0;
	}

	body:has(.rubric) .page-title .container { margin-left: calc(var(--title-x) - 1.25rem); }
}

@media (max-width: 700px) {
	.header-title.rubric { border-left: 0; padding-left: 0; }
}

body[data-page] .page-title h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1; margin: -0.15em 0 0.1em; }

.site-header .brand { margin-right: 1.5rem; }

body[data-page] .page-title { padding: 0 1.25rem 0.75rem; }

body[data-page] .page-title .lead { font-size: 1.1rem; line-height: 1.4; }

/* Téléphone : le logo seul, pour laisser la place au titre */
@media (max-width: 700px) {
	.header-title ~ .nav-toggle, .header-title { flex-shrink: 0; }
	.site-header:has(.header-title) .brand span { display: none; }
	.site-header .brand { margin-right: 1rem; }
	.header-title { padding-left: 1rem; }
}

/* ------------------------------------------------------------------
   Page d'un concert, mise en page finale (en fin de fichier pour l'emporter sur les règles générales)
   --box : largeur d'un encadré de date = sa ligne la plus longue, mesurée par script.js
   ------------------------------------------------------------------ */
body[data-page="concert"] .container { max-width: 1320px; }

@media (min-width: 1200px) {
	/* Marges sur les côtés aussi larges que possible (5rem au plus), tant que l'affiche et quatre encadrés tiennent */
	body[data-page="concert"] .section {
		padding-left: max(1.25rem, min(5rem, (100vw - 460px - 2.5rem - 4 * var(--box, 13.5rem) - 1.5rem - 20px) / 2));
		padding-right: max(1.25rem, min(5rem, (100vw - 460px - 2.5rem - 4 * var(--box, 13.5rem) - 1.5rem - 20px) / 2));
	}

	/* Affiche : 460 px de large au plus, jamais plus haute que l'écran, et laissant la place aux quatre encadrés */
	body[data-page="concert"] {
		--poster: min(460px, (100vh - 11rem) / 1.414, 100% - 2.5rem - 4 * var(--box, 13.5rem) - 1.5rem);
	}

	body[data-page="concert"] .concert-detail {
		grid-template-columns: var(--poster) 1fr;
		gap: 2.5rem;
	}

	/* Ligne du haut, mêmes colonnes que la page : « Concert passé » au-dessus de la colonne du texte */
	body[data-page="concert"] .concert-top {
		display: grid;
		grid-template-columns: minmax(var(--poster), max-content) 1fr;
		column-gap: 2.5rem;
	}

	/* Au-dessus de la colonne du texte, à mi-chemin entre son bord gauche et son centre
	   (25 % de la colonne, moins un quart de la largeur de la mention, environ 2rem) */
	body[data-page="concert"] .concert-status { justify-self: start; margin-left: calc(25% - 2rem); }

	body[data-page="concert"] .concert-dates.boxes { grid-template-columns: repeat(4, var(--box, 13.5rem)); gap: 0.5rem; }
}

/* Entre tablette et petit ordinateur : l'affiche au-dessus, les encadrés en dessous sur toute la largeur */
@media (min-width: 701px) and (max-width: 1199px) {
	body[data-page="concert"] .concert-detail { grid-template-columns: 1fr; }
	body[data-page="concert"] .concert-detail-poster img { max-width: 460px; margin: 0 auto; }
	body[data-page="concert"] .concert-dates.boxes { grid-template-columns: repeat(auto-fill, var(--box, 13.5rem)); gap: 0.5rem; }
}

@media (min-width: 701px) {
	/* L'affiche entière tient à l'écran ; ses proportions sont conservées */
	body[data-page="concert"] .concert-detail-poster img { width: auto; max-height: calc(100vh - 11rem); }
	.concert-dates.boxes li > * { white-space: nowrap; }
	.concert-dates.boxes li { padding: 0.8rem 0.75rem; }
}

@media (max-width: 700px) {
	.concert-dates.boxes { grid-template-columns: 1fr; }
}

/* Formulaire « Nous écrire » */
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; max-width: 760px; }

.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.contact-form label { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 600; color: var(--green-dark); }

.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfcf9; color: var(--ink); }

.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.2); }

.contact-form .button { justify-self: start; cursor: pointer; font: inherit; font-weight: 600; }

.contact-form .hp { display: none; }

.contact-form .form-note { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.contact-form .row[hidden] { display: none; }

@media (max-width: 700px) { .contact-form .row { grid-template-columns: 1fr; } }

/* Contact : quatre encadrés, dont « Nous contacter par mail » (mène au formulaire) */
.contact-grid { grid-template-columns: repeat(4, 1fr); }

.mail-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.3rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; height: 100%; transition: transform 0.18s ease, box-shadow 0.18s ease; }

.mail-card:hover, .mail-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 26, 20, 0.14); }

.mail-card h3 { margin: 0.3rem 0 0.2rem; font-size: 1.5rem; }

.mail-card p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }

.mail-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold); font-size: 2.2rem; line-height: 1; }

@media (max-width: 1100px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* Page « Nous écrire » : présentation à gauche, formulaire à droite */
.contact-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-aside { position: sticky; top: 6rem; }

.contact-aside h2 { margin: 1rem 0 0.5rem; }

.contact-aside p { color: var(--ink-soft); }

.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }

.contact-list li { padding-left: 1rem; border-left: 3px solid var(--gold); color: var(--ink-soft); font-size: 0.97rem; }

.contact-list b { display: block; color: var(--green-dark); font-family: var(--serif); font-size: 1.2rem; }

.contact-form { border-top: 4px solid var(--green); box-shadow: var(--shadow); max-width: none; }

.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem; }

.contact-form .button { padding: 0.8rem 2.2rem; }

@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } .contact-aside { position: static; } }

/* Mariages : les trois boutons sur une ligne */
#mariages .container.narrow { max-width: 940px; }

#mariages .actions { flex-wrap: wrap; justify-content: center; }

/* Encadré « Répétitions » : plus d'air sous le titre, horaires puis adresse séparés, lieu non souligné */
.address h3 { margin-bottom: 1rem; }

.address p { margin: 0 0 1rem; }

.address p:last-child { margin-bottom: 0; }

.address .address-link { text-decoration: none; font-weight: 600; }

/* Téléphone (écran tactile, sans survol possible) : les lieux menant à la carte sont soulignés d'emblée,
   pour qu'on voie qu'ils sont cliquables. Sur ordinateur, rien ne change : soulignement au survol seulement. */
@media (hover: none) and (pointer: coarse) {
	.concert-dates.boxes a.date-lieu,
	.address .address-link { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
}

/* Encadré « Répétitions » plus aéré */
.address { padding: 2rem 1.8rem; line-height: 1.8; }

.address h3 { margin-bottom: 1.4rem; }

.address p { margin-bottom: 1.4rem; }

.address h3 { font-size: 1.6rem; }

/* Message si l'envoi du formulaire échoue */
.form-error { margin: 0; color: #b3261e; font-weight: 600; font-size: 0.92rem; }

.form-error:empty { display: none; }

/* Page de confirmation : message centré sur le fond beige */
.merci { min-height: 55vh; display: grid; place-items: center; }

.merci .container { text-align: center; }

.merci .mail-icon { margin: 0 auto 1.2rem; }

.merci h1 { color: var(--green-dark); font-size: clamp(2rem, 4vw, 2.8rem); }

.merci .lead { color: var(--ink-soft); margin: 0 auto 1.5rem; }

/* Page d'un concert : les sauts de ligne de la description (paragraphes séparés dans concerts.json) s'affichent */
.concert-description { white-space: pre-line; }