/*
	EYSSINA — habillage « encre sur papier » du modèle Dimension (HTML5 UP).
	Ce fichier se charge après main.css et n'en modifie que l'apparence.
*/

/* Polices (embarquées : le site fonctionne aussi hors ligne) */
	@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
	@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
	@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
	@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }

	:root {
		--encre: #1d1a17;
		--encre-douce: rgba(29, 26, 23, 0.62);
		--trait: rgba(29, 26, 23, 0.55);
		--papier: #f4eddc;
		--papier-voile: rgba(244, 237, 220, 0.95);
		--survol: rgba(29, 26, 23, 0.06);
		--horizon: 62vh;
	}

/* Base */
	body { background: #c9c0a6; color: var(--encre); }
	body, input, select, textarea {
		color: var(--encre);
		font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
		font-weight: 400;
		font-size: 1.15rem;
		line-height: 1.7;
	}
	h1, h2, h3, h4, h5, h6 { color: var(--encre); font-weight: 500; }
	a { color: inherit; border-bottom-color: var(--trait); }
	a:hover { border-bottom-color: transparent; }
	strong, b { color: var(--encre); font-weight: 600; }

/* Fond : la vidéo remplace l'image du modèle */
	#bg:before { background: none !important; }
	#bg:after { display: none; }
	#bg video {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		transition: filter 0.325s ease-in-out, transform 0.325s ease-in-out;
	}
	body.is-article-visible #bg video { filter: blur(3px) brightness(0.92); transform: scale(1.02); }

/* Mise en page : l'en-tête se pose sous l'horizon */
	#wrapper { justify-content: flex-start; }
	body:not(.is-article-visible) #wrapper { padding-top: 0; }
	#wrapper:before { flex: 0 0 auto; height: calc(var(--horizon) + 1.2rem); }
	body.is-article-visible #wrapper { justify-content: center; }
	body.is-article-visible #wrapper:before { display: none; }
	#footer { margin-top: auto; padding-top: 1.5rem; }

/* En-tête */
	#header { background-image: none; }
	#header > * { margin-top: 1.1rem; }
	#header > *:before { display: none; }
	#header .logo {
		width: auto; height: auto; line-height: normal;
		border: 0; border-radius: 0;
	}
	#header .logo h1 { margin: 0; line-height: 0; }
	#header .logo img {
		display: block;
		width: clamp(240px, 30vw, 440px);
		max-height: calc(100vh - var(--horizon) - 9rem);
		min-height: 110px;
		object-fit: contain;
		height: auto;
	}

	#header nav ul { border: 0; border-radius: 0; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
	#header nav ul li { border-left: 0; position: relative; }
	#header nav ul li + li:before {
		content: '·'; position: absolute; left: -0.3rem; top: 50%;
		transform: translateY(-52%); color: var(--encre-douce); font-size: 1.2rem;
	}
	#header nav ul li a {
		min-width: 0; height: 2.6rem; line-height: 2.6rem;
		padding: 0 1.1rem 0 1.3rem;
		font-size: 0.95rem; font-weight: 500; letter-spacing: 0.22rem;
		color: var(--encre);
	}
	#header nav ul li a:hover { background-color: transparent; color: #000; text-decoration: underline; text-underline-offset: 0.45rem; text-decoration-thickness: 1px; }
	#header nav ul li a:active { background-color: transparent; }
	#header nav.use-middle:after { display: none; }

/* Panneaux */
	#main article {
		background-color: var(--papier-voile);
		color: var(--encre);
		width: 42rem;
		border-radius: 2px;
		box-shadow: 0 1.5rem 3rem rgba(40, 30, 20, 0.18), 0 0 0 1px rgba(29, 26, 23, 0.08);
		padding-top: 4rem;
	}
	#main article h2.major {
		border-bottom: solid 1px var(--trait);
		font-size: 1.6rem; letter-spacing: 0.3rem; font-weight: 500;
		width: max-content; max-width: 100%;
		padding-bottom: 0.4rem; margin-bottom: 2rem;
	}
	#main article .close:before {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle%3Eline %7B stroke: %231d1a17%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
	}
	#main article .close:hover:before { background-color: var(--survol); }
	#main article .close:active:before { background-color: rgba(29, 26, 23, 0.12); }

	#main article p.lead { font-size: 1.4rem; font-style: italic; line-height: 1.55; }

	.image.personnage { float: right; width: 8.5rem; margin: -1rem -0.5rem 0.5rem 1.5rem; border: 0; }
	.image.personnage img { width: 100%; border-radius: 0; }
	.image.personnage:before { display: none; }

/* Chansons */
	ul.titres { list-style: none; padding: 0; margin: 0 0 2rem 0; }
	ul.titres > li {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
		padding: 0.8rem 0; border-top: solid 1px rgba(29, 26, 23, 0.18);
	}
	ul.titres > li:first-child { border-top: 0; }
	ul.titres h3 { margin: 0; font-size: 1.35rem; letter-spacing: 0.04rem; text-transform: none; font-weight: 500; }
	ul.titres ul.icons { margin: 0; }

/* Icônes */
	ul.icons li a { border-bottom: 0; color: var(--encre); }
	ul.icons li a:hover { background-color: var(--survol); }
	ul.icons li a,
	ul.icons li a.icon:before { color: var(--encre); }
	ul.icons li a { box-shadow: none !important; border: solid 1px var(--trait) !important; }

/* Clips */
	.clip { margin-bottom: 2.2rem; }
	.clip .cadre {
		position: relative; aspect-ratio: 16 / 9;
		background: rgba(29, 26, 23, 0.05);
		border: solid 1px rgba(29, 26, 23, 0.25);
	}
	.clip .cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	.clip-attente {
		position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
		font-style: italic; color: var(--encre-douce); letter-spacing: 0.08rem;
	}
	.clip h3 { margin: 0.7rem 0 0; font-size: 1.2rem; font-weight: 500; text-transform: none; letter-spacing: 0.03rem; }

/* Formulaire et boutons */
	label { color: var(--encre); font-weight: 500; letter-spacing: 0.15rem; }
	input[type="text"], input[type="password"], input[type="email"], select, textarea {
		color: var(--encre); background: rgba(255, 255, 255, 0.4);
		border-color: var(--trait);
	}
	input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
		border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); background: rgba(255, 255, 255, 0.65);
	}
	input[type="submit"], input[type="reset"], input[type="button"], button, .button {
		color: var(--encre) !important; box-shadow: inset 0 0 0 1px var(--encre);
		font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: 0.22rem;
	}
	input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover { background-color: var(--survol); }
	input[type="submit"].primary, button.primary, .button.primary {
		background-color: var(--encre); color: var(--papier) !important;
	}
	input[type="submit"].primary:hover, button.primary:hover, .button.primary:hover { background-color: #3a332c; }

/* Pied de page */
	#footer .copyright { color: var(--encre); font-size: 0.72rem; letter-spacing: 0.18rem; opacity: 0.7; font-weight: 500; }

/* Petits écrans */
	@media screen and (max-width: 736px) {
		#main article { padding-top: 3.5rem; }
		#main article h2.major { font-size: 1.35rem; letter-spacing: 0.2rem; }
		.image.personnage { width: 6rem; margin: -0.5rem -0.5rem 0.5rem 1rem; }
	}
	@media screen and (max-width: 480px) {
		body, input, select, textarea { font-size: 1.08rem; }
		#header { padding: 0; }
		#header nav ul { flex-direction: row; min-width: 0; }
		#header nav ul li { border-top: 0 !important; }
		#header nav ul { gap: 0; }
		#header nav ul li + li:before { display: none; }
		#header nav ul li a { height: 2.3rem; line-height: 2.3rem; padding: 0 0.5rem; font-size: 0.82rem; letter-spacing: 0.1rem; width: auto; }
		#wrapper:before { height: calc(var(--horizon) + 1.6rem); }
		ul.titres > li { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
	}

/* Boutons-liens (navigation interne des panneaux) */
	button.lien, #main button.lien {
		all: unset;
		cursor: pointer;
		font: inherit;
		color: var(--encre);
		border-bottom: dotted 1px var(--trait);
		line-height: 1.5;
	}
	button.lien:hover { border-bottom-color: transparent; color: #000; }
	button.lien:focus-visible { outline: 1px solid var(--encre); outline-offset: 3px; }
	.vide { font-style: italic; color: var(--encre-douce); }
	.compte { font-size: 0.8em; color: var(--encre-douce); }

/* Écriture : le carnet */
	.carnet-filtre {
		display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
		padding: 0.5rem 0.9rem; margin: -0.5rem 0 1.8rem;
		background: rgba(29, 26, 23, 0.05); font-style: italic;
	}
	.fragment { padding: 0 0 2rem; margin: 0 0 2rem; border-bottom: solid 1px rgba(29, 26, 23, 0.15); }
	.fragment-date {
		margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.2rem; text-transform: uppercase;
		color: var(--encre-douce); font-weight: 500;
	}
	.fragment h3 { font-size: 1.3rem; text-transform: none; letter-spacing: 0.03rem; margin: 0 0 0.6rem; font-weight: 500; }
	.fragment .image.fit { margin: 0.4rem 0 1.1rem; }
	.fragment .image img { border-radius: 1px; }
	.fragment .image:before { display: none; }
	.fragment-texte p { font-size: 1.32rem; line-height: 1.6; margin: 0 0 0.8rem; }
	.fragment-texte p:last-child { margin-bottom: 0; }
	.fragment-themes { margin: 0.9rem 0 0; display: flex; gap: 0.9rem; flex-wrap: wrap; font-style: italic; font-size: 0.98rem; }
	.fragment-themes button.lien:before { content: '#'; opacity: 0.55; margin-right: 0.08rem; }

	.carnet-archives h3 { font-size: 1.05rem; letter-spacing: 0.3rem; text-transform: uppercase; font-weight: 500; margin: 0 0 1rem; }
	.carnet-archives h4 { font-size: 0.8rem; letter-spacing: 0.2rem; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 0.6rem; font-weight: 500; }
	.archives-colonnes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; }
	.archives-dates, .archives-dates ul { list-style: none; padding: 0; margin: 0; }
	.archives-dates > li { margin-bottom: 0.6rem; }
	.archives-dates > li > button.lien { font-weight: 600; }
	.archives-dates ul { padding-left: 1rem; }
	.archives-dates ul li { padding: 0; }
	.archives-themes { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; }
	@media screen and (max-width: 480px) { .archives-colonnes { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Musique */
	.musique-section { margin-bottom: 2.2rem; }
	.musique-section h3 {
		font-size: 1.05rem; letter-spacing: 0.3rem; text-transform: uppercase; font-weight: 500;
		margin: 0 0 0.8rem; padding-bottom: 0.3rem; border-bottom: solid 1px rgba(29, 26, 23, 0.18);
	}
	.musique-section h3 .type { display: block; font-size: 0.7rem; letter-spacing: 0.22rem; color: var(--encre-douce); margin-bottom: 0.1rem; }
	.musique-section ul.titres > li { padding: 0.4rem 0; border-top: 0; display: block; }
	#main button.lien.chanson { display: flex; align-items: center; gap: 1rem; border-bottom: 0; width: 100%; }
	#main button.lien.chanson .vignette { flex: 0 0 6.5rem; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(29, 26, 23, 0.08); }
	#main button.lien.chanson .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
	#main button.lien.chanson .titre { font-size: 1.3rem; border-bottom: dotted 1px transparent; }
	button.lien.chanson:hover .titre { border-bottom-color: var(--trait); }

	.musique-fiche button.retour { font-style: italic; font-size: 1rem; }
	.fiche-titre { font-size: 1.8rem; text-transform: none; letter-spacing: 0.03rem; font-weight: 500; margin: 1.2rem 0 1rem; }
	.lecteur { position: relative; aspect-ratio: 16 / 9; background: #1d1a17; cursor: pointer; overflow: hidden; }
	.lecteur img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; }
	.lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	.lecteur button.lecture {
		all: unset; position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem;
		border-radius: 50%; background: rgba(244, 237, 220, 0.9); cursor: pointer;
		box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.25);
	}
	.lecteur button.lecture:after {
		content: ''; position: absolute; left: 1.65rem; top: 1.25rem;
		border-style: solid; border-width: 0.85rem 0 0.85rem 1.35rem; border-color: transparent transparent transparent var(--encre);
	}
	.lecteur:hover button.lecture { background: #fff; }
	.sur-youtube { margin: 0.5rem 0 0; text-align: right; font-size: 0.95rem; font-style: italic; }
	.paroles { margin-top: 2.2rem; }
	.paroles .strophe { font-size: 1.2rem; line-height: 1.65; margin: 0 0 1.4rem; }
	.paroles .strophe.refrain { font-style: italic; padding-left: 1.4rem; border-left: solid 1px var(--trait); }

/* Albums */
	ul.albums { list-style: none; padding: 0; margin: 0; }
	ul.albums li { padding: 0.35rem 0; }
	#main button.lien.album { display: flex; justify-content: space-between; align-items: baseline; width: 100%; border-bottom: 0; gap: 1rem; }
	#main button.lien.album .titre { font-size: 1.35rem; font-style: italic; border-bottom: dotted 1px transparent; }
	button.lien.album:hover .titre { border-bottom-color: var(--trait); }
	.fiche-type { margin: 1.2rem 0 -0.8rem; font-size: 0.75rem; letter-spacing: 0.22rem; text-transform: uppercase; color: var(--encre-douce); font-weight: 500; }
	.album-presentation p { font-style: italic; font-size: 1.2rem; line-height: 1.6; margin: 0 0 0.8rem; }
	.album-presentation { margin-bottom: 1.8rem; }
	ol.album-titres { list-style: none; padding: 0; margin: 0 0 1rem; }
	ol.album-titres > li { padding: 0.45rem 0; border-top: solid 1px rgba(29, 26, 23, 0.14); display: block; }
	ol.album-titres > li:first-child { border-top: 0; }
	#main button.lien.chanson .piste { flex: 0 0 1.6rem; font-size: 0.95rem; color: var(--encre-douce); text-align: right; }
	.sur-youtube.gauche { text-align: left; margin-top: 0; }
	.paroles h4.partie { font-size: 0.85rem; letter-spacing: 0.25rem; text-transform: uppercase; color: var(--encre-douce); margin: 2rem 0 1rem; font-weight: 500; }
	.paroles h4.partie:first-child { margin-top: 0; }

/* Paroles et traduction côte à côte */
	#main article#la-voix-du-merle.bilingue { width: 60rem; }
	.paroles.bilingue .langues {
		display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 1.2rem;
		font-size: 0.72rem; letter-spacing: 0.22rem; text-transform: uppercase; color: var(--encre-douce); font-weight: 500;
	}
	.paroles.bilingue .paire { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
	.paroles.bilingue .vf .strophe { font-style: italic; color: rgba(29, 26, 23, 0.78); }
	.paroles.bilingue .vf .strophe.refrain { color: rgba(29, 26, 23, 0.7); }
	.paroles.bilingue .vf h4.partie { visibility: hidden; }
	@media screen and (max-width: 736px) {
		.paroles.bilingue .langues { display: none; }
		.paroles.bilingue .paire { grid-template-columns: 1fr; gap: 0; margin-bottom: 0.6rem; }
		.paroles.bilingue .vo .strophe { margin-bottom: 0.45rem; }
		.paroles.bilingue .vf .strophe { font-size: 1.05rem; margin-bottom: 1.5rem; }
		.paroles.bilingue .vf h4.partie { display: none; }
	}

/* Mentions de droits */
	.droits { margin: 2.5rem 0 0; padding-top: 1rem; border-top: solid 1px rgba(29, 26, 23, 0.15); font-size: 0.85rem; line-height: 1.6; color: var(--encre-douce); font-style: italic; }
	#footer .copyright { max-width: 46rem; margin-left: auto; margin-right: auto; line-height: 2; }
	#footer .copyright span { white-space: nowrap; }

/* À voix basse : extraits et lecture */
	.fragment.long .fragment-texte p { font-size: 1.2rem; }
	.fragment h3 button.titre-lien { border-bottom: 0; font-weight: 500; }
	.fragment h3 button.titre-lien:hover { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 1px; }
	.fragment .suite { margin: 0.6rem 0 0; font-style: italic; }
	.carnet-lecture button.retour-carnet { font-style: italic; font-size: 1rem; display: inline-block; margin-bottom: 1.6rem; }
	.lecture-titre { font-size: 1.8rem; text-transform: none; letter-spacing: 0.02rem; font-weight: 500; line-height: 1.3; margin: 0 0 1.6rem; }
	.lecture-texte p, .recit p { font-size: 1.22rem; line-height: 1.75; margin: 0 0 1rem; text-align: left; }
	.fin { text-align: center; margin: 2rem 0 1rem; font-size: 1.3rem; color: var(--encre-douce); }

/* Au pied de la montagne */
	#main article.recit { width: 46rem; }

/* Menu : intitulés longs */
	#header nav ul li a { letter-spacing: 0.16rem; padding: 0 0.9rem 0 1.05rem; }
	@media screen and (max-width: 980px) {
		#header nav ul li a { font-size: 0.85rem; letter-spacing: 0.12rem; padding: 0 0.6rem 0 0.75rem; }
	}
	@media screen and (max-width: 680px) {
		#header nav ul { flex-direction: column; align-items: center; gap: 0; }
		#header nav ul li + li:before { display: none; }
		#header nav ul li a { height: 2.1rem; line-height: 2.1rem; font-size: 0.85rem; letter-spacing: 0.16rem; padding: 0 0.6rem; }
		#header .logo img { max-height: calc(100vh - var(--horizon) - 13rem); }
	}
	@media screen and (max-width: 680px) {
		#wrapper:before { height: calc(var(--horizon) + 0.6rem) !important; }
		#header > * { margin-top: 0.5rem; }
		#header .logo img { width: 190px; min-height: 0; max-height: none; }
		#header nav ul li a { height: 1.85rem; line-height: 1.85rem; font-size: 0.8rem; }
		#footer { padding-top: 0.6rem; }
		#footer .copyright { font-size: 0.6rem; letter-spacing: 0.1rem; }
	}

/* Feuille de fin de texte */
	.fin svg.feuille { width: 3.2rem; height: auto; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
	.fin svg.feuille path:nth-child(2) { fill: rgba(29, 26, 23, 0.08); }
	.fin svg.feuille path:nth-child(4) { stroke-width: 1.1; }

/* Mentions légales */
	#mentions-legales h3 { font-size: 0.85rem; letter-spacing: 0.22rem; text-transform: uppercase; font-weight: 500; margin: 1.8rem 0 0.5rem; }
	#mentions-legales p { font-size: 1.05rem; }