/* ==========================================================================
   virginiethirion.be — modernisation + version mobile 1.0 (Pierre Papier Studio, 15/11/2026)
   Le rendu ordinateur reste celui de 2012 ; tout ce qui suit l'adapte ou le complète.
   ========================================================================== */

:root {
	--vt-beige: #f2e9d3;
	--vt-bordeaux: #5f0905;
}

/* --- Fond : image en pleine page, apparition en fondu (remplace Backstretch) --- */
#fond {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--vt-beige);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .9s ease;
}
#fond.visible { opacity: .2; }
@media (prefers-reduced-motion: reduce) {
	#fond { transition: none; }
}

/* --- Passage d'une page à l'autre en fondu (navigateurs récents ; les autres changent de page normalement) --- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }

/* --- Petits correctifs généraux --- */
img, iframe, video, audio { max-width: 100%; }
img { height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--vt-bordeaux); outline-offset: 2px; }
.contenu-seul { margin-left: 0; }
.resultats { margin-top: 15px; }
.resultats li { margin-bottom: 6px; }
.resultats a, .contenu-seul a { color: var(--vt-bordeaux); }
#nav-time::after, .galerie-thumbnails::after { content: ""; display: block; clear: both; }

/* --- Galeries : cadre fixe, flèches, compteur, légende dessous, miniatures --- */
.galerie { max-width: 500px; margin-top: 10px; }
.galerie-cadre { position: relative; }
.galerie-slideshow {
	padding-top: 0;
	aspect-ratio: 3 / 2;
	background: #e8dcc0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.galerie.plusieurs .galerie-slideshow { cursor: pointer; }
.galerie-slideshow img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* légende à gauche, « ‹ 1 / 4 › » à droite, sous l'image (rien ne recouvre la photo) */
.galerie-barre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; }
.galerie-controles { display: flex; align-items: baseline; gap: 4px; flex: none; color: var(--vt-bordeaux); }
.galerie-fleche {
	border: 0;
	background: none;
	color: var(--vt-bordeaux);
	font: inherit;
	font-size: 1.3rem;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}
.galerie-fleche:hover { opacity: .6; }
.galerie-compteur { font-size: .75rem; letter-spacing: 1px; }
.galerie-slideshow-legende {
	position: static;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	font-size: .9rem;
	min-height: 1.4em;
}
.galerie-copyright { font-size: .8em; opacity: .7; }
.galerie-thumbnails { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.galerie-thumbnails[hidden] { display: none; }
.galerie-thumbnail-unique {
	float: none;
	width: 56px;
	height: 56px;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	opacity: .6;
	outline: 1px solid transparent;
	transition: opacity .2s, outline-color .2s;
}
.galerie-thumbnail-unique:hover, .galerie-thumbnail-unique:focus-visible { opacity: .9; }
.galerie-thumbnail-unique.actif { opacity: 1; outline-color: var(--vt-bordeaux); }
.galerie-thumbnail-unique img { width: 100%; height: 100%; object-fit: cover; }
.galerie-thumbnail-unique .galerie-legende { display: none; }

/* --- Pied de page (signature) : toujours en bas, jamais par-dessus le contenu --- */
#wrapper { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* selon le gabarit, la signature est dans #page ou dans #wrapper : les deux poussent vers le bas */
#page { flex: 1 0 auto; display: flex; flex-direction: column; }
/* la page prend toute la largeur (pour la signature à droite), le contenu garde ses 870 px */
#page { width: auto; }
#page > :not(#signature) { width: 870px; max-width: 100%; }
#signature { position: static; margin-top: auto; text-align: right; padding: 40px 20px 12px; }

/* Lecteur audio (remplace le lecteur Flash) */
audio { display: block; margin: 8px 0 15px; width: 100%; max-width: 360px; }

/* Fiches (texte, mise en scène, article) : hiérarchie claire */
#contenu-central, .contenu-post-droite { line-height: 1.5; }
#contenu-central h1, .titre-rubrique { line-height: 1.15; margin-bottom: 8px; }
.fiche-sous-titre h3 { font-style: italic; font-size: 1.05rem; font-weight: normal; line-height: 1.4; margin-bottom: 8px; }
#contenu-central h2 {
	margin: 30px 0 10px;
	padding-bottom: 4px;
	font-size: .78rem;
	letter-spacing: 2px;
	color: var(--vt-bordeaux);
}
#contenu-central .if_block:first-of-type h2 { margin-top: 18px; }
/* Équipe de création : rôle | nom, en colonnes */
#m-e-s .personne { display: grid; grid-template-columns: 11em 1fr; column-gap: 14px; padding: 4px 0; border-bottom: 1px dotted rgba(95, 9, 5, .25); }
#m-e-s .personne .role { float: none; margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--vt-bordeaux); padding-top: 2px; }
#m-e-s .personne .nom { float: none; }
#m-e-s .personne .nom:only-child { grid-column: 1 / -1; } /* pas de rôle : le nom prend toute la ligne */
.exposant { text-transform: none; font-size: .62em; vertical-align: super; line-height: 0; }
#m-e-s .personne .nom a { color: inherit; }
#contenu-central p, .contenu-post-droite p { margin-bottom: 12px; }
.retour-liste { display: none; }

/* Journal (articles) : même grille que les rubriques Écriture / Mise en scène (260 px | 500 px) */
div.post {
	display: grid;
	grid-template-columns: 260px 500px;
	column-gap: 40px;
	margin: 0 0 36px;
	padding: 0 0 36px;
	border-bottom: 1px dotted var(--vt-bordeaux);
}
div.post:last-child { border-bottom: 0; }
div.infos-post-gauche { float: none; width: auto; margin: 0; text-align: left; display: flex; flex-direction: column; }
div.infos-post-gauche .retour-liste { order: -2; display: block; margin-bottom: 14px; color: var(--vt-bordeaux); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: .78rem; }
div.infos-post-gauche ul.post-meta { order: -1; margin: 0 0 6px; }
ul.post-meta li { float: none; width: auto; margin: 0; padding: 0; border-top: 0; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--vt-bordeaux); }
div.infos-post-gauche h3 { font-size: 130%; line-height: 1.2; text-transform: uppercase; }
div.infos-post-gauche h3 a { color: inherit; text-decoration: none; }
div.infos-post-gauche h3 a:hover { color: var(--vt-bordeaux); }
div.contenu-post-droite { width: auto; margin-left: 0; padding-top: 0; }
div.contenu-post-droite .galerie { margin-top: 12px; }

/* Titre des pages Actualité / Journal, comme les autres rubriques */
.titre-rubrique { text-transform: uppercase; font-size: 200%; font-weight: normal; margin: 10px 0 14px; }
/* Vidéo remplacée par un lien (Dailymotion) */
.video-lien a { color: var(--vt-bordeaux); text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; border-bottom: 1px dotted; text-decoration: none; }
.video-lien a::before { content: "▶ "; }

/* Liste des titres : le titre en cours est repéré */
#liste-des-textes-gauche li.actif a { color: var(--vt-bordeaux); border-bottom: 1px dotted; }

/* Signature : discrète */
#signature { font-size: 70%; opacity: .55; transition: opacity .2s; }
#signature:hover, #signature:focus-within { opacity: 1; }

/* Barre et menu mobile : cachés sur ordinateur */
.barre-mobile, .menu-mobile { display: none; }

/* ==========================================================================
   Téléphone et petite tablette
   ========================================================================== */
@media (max-width: 900px) {
	body { font-size: 112%; }

	#page { width: auto; padding: 0 16px 24px; }
	#page > :not(#signature) { width: auto; }

	/* Menu : barre compacte + overlay */
	#menus { display: none; }
	.barre-mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 50;
		margin: 0 -16px 16px;
		padding: 12px 16px;
		background: rgba(242, 233, 211, .92);
		border-bottom: 1px dotted var(--vt-bordeaux);
	}
	.barre-nom {
		color: var(--vt-bordeaux);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 1.05rem;
	}
	.menu-bouton {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font: inherit;
		font-size: .8rem;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: var(--vt-bordeaux);
		background: transparent;
		border: 1px solid var(--vt-bordeaux);
		padding: 8px 12px;
		cursor: pointer;
	}
	.menu-icone, .menu-icone::before, .menu-icone::after {
		display: block;
		width: 16px;
		height: 1px;
		background: currentColor;
		position: relative;
		transition: transform .2s, background .2s;
	}
	.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
	.menu-icone::before { top: -5px; }
	.menu-icone::after { top: 5px; }
	html.menu-ouvert .menu-icone { background: transparent; }
	html.menu-ouvert .menu-icone::before { transform: translateY(5px) rotate(45deg); }
	html.menu-ouvert .menu-icone::after { transform: translateY(-5px) rotate(-45deg); }

	.menu-mobile {
		position: fixed;
		inset: 0;
		z-index: 40;
		padding: 90px 24px 32px;
		background: var(--vt-beige);
		overflow-y: auto;
		flex-direction: column;
		justify-content: space-between;
	}
	html.menu-ouvert .menu-mobile { display: flex; }
	html.menu-ouvert { overflow: hidden; }
	.menu-mobile ul li { border-bottom: 1px dotted var(--vt-bordeaux); }
	.menu-mobile ul a {
		display: block;
		padding: 14px 0;
		color: var(--vt-bordeaux);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 1.4rem;
	}
	.menu-mobile .menu-contact { margin-top: 32px; }
	.menu-mobile .menu-contact a { color: var(--vt-bordeaux); font-size: 1.05rem; }

	/* Accueil : cadavre exquis à la taille de l'écran */
	#generator {
		font-size: clamp(2.2rem, 11vw, 4.5rem);
		letter-spacing: -1px;
		padding-left: 0;
		overflow-wrap: break-word;
	}
	#refresh { margin-top: 24px; }
	#refresh a { font-size: .8rem; }

	/* Fiche seule : pas de liste des titres, un lien retour à la place */
	body.single-ecriture #liste-des-textes-gauche,
	body.single-mise_en_scene #liste-des-textes-gauche { display: none; }
	.retour-liste {
		display: block;
		margin: 0 0 18px;
		padding: 2px 0 12px;
		border-bottom: 1px dotted var(--vt-bordeaux);
		color: var(--vt-bordeaux);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: .85rem;
	}
	/* lisibilité : l'image de fond est plus pâle sur téléphone (plutôt que des blocs) */
	#fond.visible { opacity: .12; }

	/* Écriture / Mise en scène */
	#contenu:has(#liste-des-textes-gauche) { display: flex; flex-direction: column; }
	#contenu-central { order: 1; display: block; width: auto; margin: 0; padding-bottom: 24px; }
	#liste-des-textes-gauche { order: 2; float: none; width: auto; font-size: 100%; }
	/* pages Écriture / Mise en scène : la présentation d'abord, puis le sommaire des titres */
	#liste-des-textes-gauche { padding-top: 20px; }
	/* le titre de la rubrique est déjà en haut de page : pas de répétition au-dessus de la liste */
	#liste-des-textes-gauche h2 { display: none; }
	#liste-des-textes-gauche ul { margin-top: 0; border-top: 1px dotted var(--vt-bordeaux); }
	#liste-des-textes-gauche li { border-bottom: 1px dotted var(--vt-bordeaux); }
	#liste-des-textes-gauche li a {
		display: block;
		position: relative;
		padding: 12px 32px 12px 2px;
		font-size: 1.1rem;
		line-height: 1.3;
	}
	#liste-des-textes-gauche li a::after { content: "→"; color: var(--vt-bordeaux); position: absolute; right: 2px; top: 12px; }
	#contenu-central h1, .titre-rubrique { font-size: 1.7rem; line-height: 1.15; overflow-wrap: break-word; }
	.mise-en-scene-date, .mise-en-scene-metteur, .mise-en-scene-lieu { float: none; display: inline; }
	#m-e-s .personne { grid-template-columns: 1fr; padding: 6px 0; }
	#m-e-s .personne .role { font-size: .72rem; }
	.mise-en-scene { margin-bottom: 6px; }

	/* Biographie : photos au-dessus, pleine largeur */
	#photos-gauche { float: none; width: auto; margin: 0 0 16px; }
	#photos-gauche #bio-slideshow .bio-photo .bio-slideshow-element { width: 100%; max-height: 55vh; object-fit: cover; object-position: center top; display: block; }
	.bio-legende {
		position: static;
		margin-top: 0;
		height: auto;
		background: rgba(255, 255, 255, .6);
	}

	/* Journal et articles : date au-dessus du texte */
	div.infos-post-gauche { float: none; width: auto; margin: 0 0 8px; text-align: left; }
	div.infos-post-gauche { display: flex; flex-direction: column; }
	div.infos-post-gauche .retour-liste { order: -2; align-self: flex-start; }
	div.infos-post-gauche ul.post-meta { order: -1; }
	ul.post-meta li { border-top: 0; padding-top: 0; margin-top: 0; font-size: .8rem; letter-spacing: 1px; color: var(--vt-bordeaux); }
	div.infos-post-gauche h3 { font-size: 1.5rem; line-height: 1.15; }
	ul.post-meta li { float: none; width: auto; }
	div.contenu-post-droite { width: auto; margin-left: 0; }
	div.post { display: block; margin: 0 0 32px; padding-bottom: 24px; }
	ul.post-meta li { margin-left: 0; max-width: none; }

	/* Actualités : voir plus bas (2 colonnes en mosaïque jusqu'à 560 px, puis une colonne) */
	.actubloc img { width: auto; max-width: 100%; display: block; margin-top: 8px; }

	/* Galeries : pleine largeur, cadre 4:3 */
	.galerie { max-width: none; }
	.galerie-slideshow { aspect-ratio: 4 / 3; }
	.galerie-fleche { padding: 6px 10px; }
	.galerie-thumbnail-unique { width: 60px; height: 60px; opacity: .8; }

	/* Photos (ancienne page) */
	#gauche-thumbs { width: auto; }
	#right-show { width: auto; margin-left: 0; }

	/* Vidéos et navigation */
	.video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	#nav-time { padding-top: 16px; }
	#nav-time a { display: inline-block; padding: 8px 0; }

	/* Signature : en bas de page, plus collée par-dessus le texte */
	#signature { padding: 32px 16px 12px; font-size: 65%; }
}

/* Actualités sur tablette / fenêtre moyenne : mosaïque en 2 colonnes (ordre conservé ligne par ligne) */
@media (min-width: 560px) and (max-width: 900px) {
	#contenu .actubloc { box-sizing: border-box; width: calc(50% - 14px); margin: 0 12px 12px 0; padding: 14px; }
}
/* Téléphone : une seule colonne (on neutralise le placement en mosaïque) */
@media (max-width: 559px) {
	#contenu .actubloc {
		position: static !important;
		left: auto !important;
		top: auto !important;
		float: none;
		width: auto;
		margin: 0 0 12px;
		padding: 14px;
	}
	#contenu:has(.actubloc) { height: auto !important; }
}