/* Atelier Enila Tityad — feuille de style unique du site
   Un seul fond chaud et mat (pas de blocs blancs qui agressent l'oeil),
   une typographie éditoriale type catalogue d'exposition,
   des groupes d'images pensés en vis-à-vis quand l'original le faisait.
   Public plutôt âgé : gros caractères, aucune animation, aucun menu caché. */

:root {
	--fond: #a8a7a3;
	--fond-menu: #dbd9d3;
	--fond-creux: #ead9b8;
	--cadre-image: #f4f2ed;
	--texte: #3a2f24;
	--texte-doux: #4f4436;
	--prune: #7a2358;
	--prune-fonce: #5a1a41;
	--terracotta: #a1552f;
	--bordure: #746b56;
	--taille-texte: 20px;
	--police-titre: "Bodoni MT", Didot, "Playfair Display", Georgia, "Iowan Old Style", serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Liberation Serif", serif;
	font-size: var(--taille-texte);
	line-height: 1.65;
}

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

a:hover,
a:focus {
	color: var(--prune-fonce);
}

a:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 2px;
}

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

/* Police à part pour les titres seulement : plus marquée, du genre catalogue
   d'exposition. Le texte courant garde Georgia, plus sûr pour la lecture. */
h1, h2, h3 {
	font-family: var(--police-titre);
}

/* Lien d'évitement pour aller directement au contenu */
.lien-evitement {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--prune);
	color: #fff;
	padding: 0.8em 1.2em;
	z-index: 100;
	text-decoration: none;
}

.lien-evitement:focus {
	left: 0;
}

/* En-tête / couverture */
.entete {
	background: var(--fond);
	padding: 3rem 1.2rem 1.6rem;
	text-align: center;
}

.entete h1 {
	margin: 0;
	font-size: 2.6rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--texte);
}

.entete h1 .initiale {
	color: var(--prune);
	font-weight: 700;
}

.entete p.slogan {
	margin: 0.8rem auto 0;
	max-width: 34rem;
	color: var(--texte-doux);
	font-size: 1.05rem;
	font-style: italic;
}

.ornement {
	margin: 1.1rem 0 0;
	color: var(--terracotta);
	letter-spacing: 0.6em;
	font-size: 0.85rem;
}

/* Navigation principale : liste plate de 6 entrées, toujours visible,
   aucun menu déroulant, aucun survol (recommandations NN/g pour public âgé) */
.nav-principale {
	background: var(--fond-menu);
	border-top: 1px solid var(--bordure);
	border-bottom: 1px solid var(--bordure);
}

.nav-principale ul {
	list-style: none;
	margin: 0 auto;
	max-width: 56rem;
	padding: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2rem 0.3rem;
}

.nav-principale a {
	display: inline-block;
	padding: 0.55rem 0.9rem;
	color: var(--texte);
	text-decoration: none;
	font-size: 1.02rem;
	border-bottom: 2px solid transparent;
}

.nav-principale a:hover,
.nav-principale a:focus {
	color: var(--prune);
}

.nav-principale a.page-active {
	color: var(--prune);
	border-bottom-color: var(--terracotta);
	font-weight: 700;
}

/* Repérage : la seule barre de navigation qui reste, réduite à l'essentiel.
   Pas de menu à 30 entrées : juste "d'où je viens" et "où je suis". */
.reperage {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.4rem 1.2rem;
	max-width: 56rem;
	margin: 0 auto;
	padding: 1rem 1.4rem;
	border-top: 1px solid var(--bordure);
	border-bottom: 1px solid var(--bordure);
	font-size: 0.95rem;
}

.reperage .lien-retour {
	color: var(--prune);
	white-space: nowrap;
}

.reperage .repere {
	color: var(--texte-doux);
	font-style: italic;
}

.retour-sommaire-bas {
	text-align: center;
	margin: 2.5rem 0 0;
}

.retour-sommaire-bas a {
	color: var(--prune);
}

/* Contenu principal */
main {
	max-width: 56rem;
	margin: 0 auto;
	padding: 1.5rem 1.4rem 3.5rem;
}

/* Colonne resserrée pour le texte courant : ligne de lecture confortable */
.colonne-texte {
	max-width: 38rem;
	margin: 0 auto;
}

main h2 {
	font-size: 1.9rem;
	font-weight: 400;
	color: var(--prune);
	text-align: center;
	margin: 0.5rem 0 2rem;
}

main h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--prune);
}

p {
	margin: 0 0 1.1em;
}

/* Séparateur discret entre deux sections, à la place des anciens blocs blancs */
.separateur {
	width: 4rem;
	height: 1px;
	margin: 2.4rem auto;
	background: var(--bordure);
	border: none;
}

/* Variante "fil" : marque le rythme d'un pas à pas (pages d'apprentissage),
   écho discret à la chaîne du métier à tisser, sans être un gadget. */
.separateur-fil {
	text-align: center;
	margin: 2.6rem auto;
	color: var(--bordure);
	letter-spacing: 0.5em;
	font-size: 0.85rem;
}

/* Sommaire : la table des matières du site, seule vraie page de navigation */
.sommaire {
	max-width: 40rem;
	margin: 3rem auto 0;
}

.sommaire > .legende {
	text-align: center;
	font-size: 0.92rem;
	font-style: italic;
	color: var(--texte-doux);
	margin-bottom: 2.4rem;
}

.chapitre {
	margin: 0 0 2.2rem;
}

.chapitre h3 {
	margin: 0 0 0.7rem;
	font-size: 1.3rem;
	font-weight: 400;
	font-style: italic;
	color: var(--prune);
	border-bottom: 1px solid var(--bordure);
	padding-bottom: 0.4rem;
}

.chapitre h3 a {
	font-style: normal;
}

.chapitre ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 1;
}

.chapitre li {
	padding: 0.28rem 0;
	font-size: 1rem;
}

.chapitre a {
	text-decoration: underline;
}

.chapitre .a-venir {
	color: var(--texte-doux);
	font-style: italic;
	opacity: 0.72;
}

@media (min-width: 640px) {
	.chapitre ul {
		columns: 2;
		column-gap: 2rem;
	}
	.chapitre li {
		break-inside: avoid;
	}
}

/* Une oeuvre : image encadrée d'un simple filet, légende façon cartel de musée */
figure.oeuvre {
	margin: 0;
	text-align: center;
}

figure.oeuvre img {
	margin: 0 auto;
	border: 2px solid var(--cadre-image);
}

figure.oeuvre figcaption {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--texte-doux);
	line-height: 1.5;
}

figure.oeuvre figcaption .titre-oeuvre {
	display: block;
	font-size: 1.15rem;
	font-style: italic;
	color: var(--texte);
	margin-bottom: 0.25rem;
}

/* Une oeuvre seule, présentée en grand */
.oeuvre-seule {
	margin: 2.6rem 0;
}

.oeuvre-seule figure.oeuvre img {
	max-width: 26rem;
}

/* Deux oeuvres mises en vis-à-vis, comme dans la galerie d'origine */
.duo-oeuvres {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 2.2rem;
	align-items: start;
	margin: 2.6rem 0;
}

/* Groupe de texte + image(s) à deux colonnes (garde l'ordre d'origine) */
.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.8rem 2.2rem;
	align-items: center;
	margin: 2.4rem 0;
}

/* Groupe à trois colonnes (ex : matériel de départ, historique du tissage) */
.trio {
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr;
	gap: 1.6rem;
	align-items: start;
	margin: 2.4rem 0;
}

/* Accueil : image et texte d'intention côte à côte, comme sur l'ancien site */
.duo-accueil {
	grid-template-columns: 5fr 7fr;
}

/* Page d'une œuvre : image (avec cartel et prix) et texte de présentation côte à côte */
.duo-oeuvre {
	grid-template-columns: 5fr 7fr;
	align-items: center;
}

.duo-oeuvre .oeuvre-principale,
.duo-oeuvre .cartel,
.duo-oeuvre .prix {
	max-width: none;
}

.duo-oeuvre .colonne-texte {
	max-width: none;
	margin-top: 0.5rem;
}

.trio .colonne-images {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.trio figure.oeuvre img,
.duo figure.oeuvre img {
	max-width: 100%;
}

@media (max-width: 640px) {
	.duo-oeuvres,
	.duo,
	.trio {
		grid-template-columns: 1fr;
	}
}

/* Poème / texte d'intention : lignes resserrées comme un texte écrit, pas
   des paragraphes de formulaire */
.texte-poeme {
	font-style: italic;
	text-align: center;
}

.texte-poeme p {
	margin: 0 0 0.15em;
}

.texte-poeme .respiration {
	height: 1.1em;
}

/* Pour reprendre certaines lignes centrées héritées du contenu d'origine */
.centre {
	text-align: center;
}

/* Mentions secondaires : discrètes, pas au même niveau que le propos principal */
.mentions {
	font-size: 0.88rem;
	color: var(--texte-doux);
}

/* Boutons de navigation séquentielle (page précédente / suivante) */
.nav-sequentielle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin: 3rem auto 1rem;
	max-width: 38rem;
}

.bouton-page {
	flex: 1 1 auto;
	display: block;
	padding: 0.9rem 1.2rem;
	border: 1px solid var(--terracotta);
	color: var(--terracotta);
	text-decoration: none;
	font-size: 1rem;
	text-align: center;
}

.bouton-page:hover,
.bouton-page:focus {
	background: var(--terracotta);
	color: var(--fond);
}

.bouton-page .etiquette {
	display: block;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--texte-doux);
	margin-bottom: 0.2rem;
}

.bouton-page:hover .etiquette,
.bouton-page:focus .etiquette {
	color: var(--fond);
}

.bouton-page.desactive {
	border-color: var(--bordure);
	color: var(--texte-doux);
	cursor: default;
}

.bouton-page.desactive:hover {
	background: none;
	color: var(--texte-doux);
}

.bouton-page.desactive .etiquette {
	color: var(--texte-doux);
}

/* ---- Page d'une œuvre ---- */

.oeuvre-principale {
	margin: 0 auto 2rem;
	text-align: center;
}

.oeuvre-principale img {
	margin: 0 auto;
	border: 2px solid var(--cadre-image);
	max-width: 30rem;
	max-height: 36rem;
	width: auto;
}

/* Vue de détail secondaire, quand une pièce a plus d'une image (ex : un détail
   en gros plan en plus de la vue d'ensemble) */
.oeuvre-principale.detail {
	margin-top: 1.2rem;
}

.oeuvre-principale.detail img {
	max-width: 14rem;
}

/* Petites vignettes vers d'autres œuvres, quand le texte de l'artiste
   fait référence à une pièce d'une autre page */
.references-croisees {
	display: flex;
	gap: 1.4rem;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 1.2rem 0 0;
}

.reference-oeuvre {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--texte-doux);
}

.reference-oeuvre img {
	max-width: 5rem;
	max-height: 6rem;
	border: 2px solid var(--cadre-image);
	margin: 0 auto 0.3rem;
}

.reference-oeuvre:hover img,
.reference-oeuvre:focus img {
	border-color: var(--terracotta);
}

/* Deux photos d'une même œuvre présentées côte à côte (ex : les deux éléments
   physiques d'une pièce en plusieurs parties) */
.paire-images {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.paire-images figure.oeuvre-principale {
	flex: 1 1 8rem;
	max-width: 12rem;
	margin: 0;
}

/* Variante en grand : quand les deux photos doivent se voir côte à côte,
   en pleine largeur de page plutôt que dans une colonne étroite */
.paire-images.grande {
	margin: 2.4rem 0;
}

.paire-images.grande figure.oeuvre-principale {
	flex: 0 1 auto;
	max-width: 22rem;
}

.paire-images.grande figure.oeuvre-principale img {
	max-height: 44rem;
}

/* Une seule photo, mais large (ex : un triptyque tissé à l'horizontale) —
   sortie de la colonne étroite pour occuper toute la largeur de page */
.oeuvre-principale.grande {
	margin: 0 0 2.4rem;
}

.oeuvre-principale.grande img {
	max-width: 50rem;
	max-height: none;
}

.oeuvre-principale .legende-detail {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--texte-doux);
}

.titre-oeuvre-page {
	text-align: center;
	font-size: 2rem;
	font-weight: 400;
	color: var(--prune);
	margin: 0 0 0.6rem;
}

/* Cartel : les informations factuelles de la pièce, centrées, une ligne par info */
.cartel {
	max-width: 34rem;
	margin: 0 auto 2rem;
	text-align: center;
	color: var(--texte-doux);
	font-size: 1rem;
	line-height: 1.8;
}

.cartel p {
	margin: 0;
}

.cartel strong {
	font-style: italic;
	font-weight: 400;
	color: var(--texte-doux);
}

.prix {
	text-align: center;
	font-size: 1.35rem;
	color: var(--texte);
	margin: 1.6rem 0;
}

/* Emplacement à remplir par mami : visible exprès, pour ne rien inventer */
.a-completer {
	background: var(--fond-creux);
	border: 1px dashed var(--terracotta);
	color: var(--terracotta);
	padding: 0.15em 0.5em;
	font-size: 0.9rem;
	font-style: italic;
}

.bloc-a-completer {
	max-width: 38rem;
	margin: 2rem auto;
	padding: 1.2rem 1.4rem;
	background: var(--fond-creux);
	border: 1px dashed var(--terracotta);
	color: var(--texte-doux);
	font-size: 0.95rem;
	font-style: italic;
}

/* Bloc d'acquisition : l'aboutissement de chaque page d'œuvre */
.bloc-acquerir {
	max-width: 38rem;
	margin: 3rem auto 0;
	padding: 1.8rem 1.6rem;
	border: 2px solid var(--prune);
	text-align: center;
}

.bloc-acquerir h2 {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	color: var(--prune);
}

.coordonnees {
	font-size: 1.2rem;
	margin: 1rem 0;
	line-height: 1.9;
}

.coordonnees a {
	font-weight: 700;
}

.garanties {
	margin: 1.4rem 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--bordure);
	list-style: none;
	text-align: left;
	font-size: 0.98rem;
	color: var(--texte-doux);
}

.garanties li {
	margin: 0 0 0.5rem;
	padding-left: 1.4rem;
	text-indent: -1.4rem;
}

.garanties li::before {
	content: "— ";
	color: var(--terracotta);
}

/* Version réduite du bloc "Acquérir", pour l'accueil : ici la pièce n'est pas
   précisée, ce n'est qu'une indication — le vrai bloc d'acquisition, celui qui
   compte, reste grand sur chaque page d'œuvre. */
.bloc-acquerir.discret {
	max-width: 26rem;
	padding: 1.1rem 1.4rem;
	border-width: 1px;
}

.bloc-acquerir.discret h2 {
	font-size: 1.05rem;
	margin-bottom: 0.6rem;
}

.bloc-acquerir.discret .coordonnees {
	font-size: 1rem;
	margin: 0.6rem 0;
}

.bloc-acquerir.discret p {
	font-size: 0.92rem;
	color: var(--texte-doux);
}

/* Version resserrée du bloc "Acquérir" sur les pages d'œuvre : moins d'espace
   perdu en hauteur, mais le texte garde sa taille normale — c'est ici que ça
   doit convaincre, contrairement à la version "discret" de l'accueil. */
.bloc-acquerir.compact {
	max-width: 30rem;
	margin-top: 2rem;
	padding: 1.2rem 1.4rem;
}

.bloc-acquerir.compact h2 {
	margin-bottom: 0.6rem;
	font-size: 1.25rem;
}

.bloc-acquerir.compact p {
	margin: 0 0 0.6rem;
}

.bloc-acquerir.compact .coordonnees {
	margin: 0.6rem 0;
}

.bloc-acquerir.compact .garanties {
	margin-top: 0.8rem;
	padding-top: 0.8rem;
}

/* ---- Grilles de vignettes (collections, œuvres, voyage) ---- */

.grille-vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2.4rem 2rem;
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
}

.grille-vignettes li {
	margin: 0;
	text-align: center;
}

.grille-vignettes img {
	margin: 0 auto 0.8rem;
	border: 2px solid var(--cadre-image);
}

.grille-vignettes a {
	text-decoration: none;
	display: block;
}

.grille-vignettes a:hover img,
.grille-vignettes a:focus img {
	border-color: var(--terracotta);
}

.grille-vignettes .nom {
	display: block;
	font-size: 1.15rem;
	font-style: italic;
	color: var(--prune);
	text-decoration: underline;
}

.grille-vignettes .detail {
	display: block;
	font-size: 0.92rem;
	color: var(--texte-doux);
	margin-top: 0.2rem;
}

/* Photos du grand voyage : un carrousel qui défile tout seul (script court, en bas
   de la page biographie) et qui reste une simple bande d'images consultable à la
   main si le script ne s'exécute pas. */
.carrousel-voyage {
	position: relative;
	max-width: 42rem;
	margin: 2rem auto;
}

.carrousel-piste {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.carrousel-piste::-webkit-scrollbar {
	display: none;
}

.carrousel-piste li {
	flex: 0 0 100%;
	scroll-snap-align: center;
	margin: 0;
	text-align: center;
}

.carrousel-piste img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--fond-creux);
	margin: 0 auto 0.6rem;
	border: 2px solid var(--cadre-image);
}

.carrousel-piste figcaption {
	font-size: 0.92rem;
	color: var(--texte-doux);
	font-style: italic;
}

.carrousel-fleche {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 2.8rem;
	height: 2.8rem;
	border: 2px solid var(--terracotta);
	border-radius: 50%;
	background: var(--fond-menu);
	color: var(--terracotta);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.carrousel-fleche:hover,
.carrousel-fleche:focus {
	background: var(--terracotta);
	color: var(--fond);
}

.carrousel-prec { left: 0.4rem; }
.carrousel-suiv { right: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
	.carrousel-piste { scroll-behavior: auto; }
}

/* ---- Page « L'atelier » : photos de l'atelier ---- */
/* NB : on cible `figure.oeuvre.photo-atelier` pour battre la spécificité de
   `figure.oeuvre { margin: 0 }`, sinon les photos se calent à gauche. */

figure.oeuvre.photo-atelier {
	max-width: 40rem;
	margin: 2.4rem auto;
}

.photo-atelier img {
	width: 100%;
}

/* Photo verticale (le métier en pied) : bornée en hauteur pour rester lisible. */
.photo-atelier.haute img {
	width: auto;
	max-width: 100%;
	max-height: 32rem;
}

/* Portrait : discret, en bas de page. */
figure.oeuvre.photo-atelier.portrait {
	max-width: 17rem;
}

/* Dans une mise en vis-à-vis, la photo occupe simplement sa colonne. */
.duo figure.oeuvre.photo-atelier {
	max-width: 100%;
	margin: 0;
}

/* ---- Chronologie de la biographie ---- */

.jalon {
	max-width: 38rem;
	margin: 0 auto 2.2rem;
}

.jalon h3 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--terracotta);
	letter-spacing: 0.05em;
}

/* Petit menu local reliant les trois pages de la démarche artistique */
.sous-nav-demarche {
	text-align: center;
	margin: -0.5rem 0 2.6rem;
	font-size: 0.95rem;
}

.sous-nav-demarche a {
	margin: 0 0.5rem;
}

.sous-nav-demarche .courant {
	margin: 0 0.5rem;
	color: var(--prune);
	font-weight: 700;
}

/* Vue d'ensemble : toutes les œuvres en vignettes sur une seule page */
.grille-vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 2rem 1.4rem;
	list-style: none;
	margin: 2.4rem 0;
	padding: 0;
}

.grille-vignettes a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cadre-vignette {
	height: 13rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cadre-image);
	background: var(--fond-creux);
	overflow: hidden;
	margin-bottom: 0.6rem;
}

.cadre-vignette img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.grille-vignettes h3 {
	font-size: 1.02rem;
	font-weight: 400;
	margin: 0 0 0.2rem;
	color: var(--texte);
}

.grille-vignettes a:hover h3,
.grille-vignettes a:focus h3 {
	color: var(--prune);
}

.prix-vignette {
	font-size: 0.85rem;
	color: var(--texte-doux);
	margin: 0;
}

/* Pied de page */
footer {
	border-top: 1px solid var(--bordure);
	text-align: center;
	padding: 2.2rem 1.2rem;
	color: var(--texte-doux);
	font-size: 0.98rem;
}

footer p {
	margin: 0 0 0.5em;
}

.liens-sociaux a {
	margin: 0 0.7em;
}

@media (max-width: 480px) {
	.entete h1 {
		font-size: 1.9rem;
	}
	:root {
		--taille-texte: 19px;
	}
}