/*
	Feuille du site public.

	Le parti pris est celui d'une revue imprimée : un papier chaud plutôt qu'un
	blanc d'écran, une serif de labeur pour les titres, et des capitales espacées
	pour tout ce qui n'est pas du texte de lecture. Les photographies portent la
	page — le reste doit s'effacer.

	Aucune police n'est téléchargée. Les familles employées sont déjà présentes
	sur les systèmes visés, ce qui supprime une requête bloquante, tout risque de
	texte invisible au chargement, et toute dépendance à un serveur tiers.
*/

:root {
	--papier: #fbf9f4;
	--papier-creux: #f4f0e7;
	--encre: #1c1a16;
	--encre-douce: #6b655a;
	--trait: #e4ded2;
	--vert: #4a6145;

	--printemps: #7d9e5c;
	--ete: #cf9a34;
	--automne: #bd6a3a;
	--hiver: #7c93a4;

	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--marge: clamp(1.25rem, 4vw, 4rem);
	--colonne: 42rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--papier: #16140f;
		--papier-creux: #1e1b15;
		--encre: #efe9dd;
		--encre-douce: #a49b8b;
		--trait: #322d24;
	}
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; }

.saut {
	position: absolute;
	left: -9999px;
	background: var(--encre);
	color: var(--papier);
	padding: 0.75rem 1rem;
	z-index: 100;
}
.saut:focus { left: 1rem; top: 1rem; }

/* — Bandeau ————————————————————————————————————————————————— */

.entete {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 1rem var(--marge);
	background: color-mix(in srgb, var(--papier) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--trait);
}

.entete-titre {
	font-size: 1.0625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: var(--sans);
	font-weight: 600;
}

.entete-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lien-saison {
	text-decoration: none;
	color: var(--encre-douce);
	padding-bottom: 2px;
	border-bottom: 1.5px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.lien-saison:hover { color: var(--encre); }
.lien-saison.est-actif { color: var(--encre); border-bottom-color: currentColor; }

.lien-saison.saison-printemps.est-actif { border-bottom-color: var(--printemps); }
.lien-saison.saison-ete.est-actif { border-bottom-color: var(--ete); }
.lien-saison.saison-automne.est-actif { border-bottom-color: var(--automne); }
.lien-saison.saison-hiver.est-actif { border-bottom-color: var(--hiver); }

/* — Titre de une ———————————————————————————————————————————— */

.masthead {
	padding: clamp(3rem, 9vw, 7rem) var(--marge) clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

.masthead-titre {
	margin: 0;
	font-size: clamp(2.75rem, 9vw, 5.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.masthead-accroche {
	margin: 1.25rem 0 0;
	color: var(--encre-douce);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	font-style: italic;
}

.filtre-actif {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 2.5rem;
	padding: 0 var(--marge);
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.filtre-retirer { margin-left: 0.5rem; }

.pastille-saison {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--encre-douce);
}
.pastille-saison.saison-printemps { background: var(--printemps); }
.pastille-saison.saison-ete { background: var(--ete); }
.pastille-saison.saison-automne { background: var(--automne); }
.pastille-saison.saison-hiver { background: var(--hiver); }

/* — Grille du feed —————————————————————————————————————————— */

/*
	Le pavage est obtenu par colonnes CSS plutôt que par une grille : des
	photographies de hauteurs libres s'y empilent sans laisser les trous qu'une
	grille à lignes fixes produirait, et sans une ligne de JavaScript.
*/
.grille {
	padding: 0 var(--marge) clamp(3rem, 8vw, 6rem);
	max-width: 100rem;
	margin-inline: auto;
	columns: 3;
	column-gap: clamp(1.25rem, 3vw, 2.75rem);
}

@media (max-width: 1100px) { .grille { columns: 2; } }
@media (max-width: 700px)  { .grille { columns: 1; } }

.carte {
	break-inside: avoid;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.carte-lien { text-decoration: none; display: block; }

.carte-image {
	position: relative;
	overflow: hidden;
	background: var(--papier-creux);
}

.carte-image img {
	width: 100%;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte-lien:hover .carte-image img { transform: scale(1.035); }

.carte-compte {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	min-width: 1.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-align: center;
	backdrop-filter: blur(4px);
}

.carte-corps { padding-top: 1rem; }

.carte-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0 0 0.4rem;
	font-family: var(--sans);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.carte-saison { position: relative; padding-left: 0.85rem; }
.carte-saison::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}
.carte-saison.saison-printemps { color: var(--printemps); }
.carte-saison.saison-ete { color: var(--ete); }
.carte-saison.saison-automne { color: var(--automne); }
.carte-saison.saison-hiver { color: var(--hiver); }

.carte-titre {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.carte-extrait {
	margin: 0.5rem 0 0;
	color: var(--encre-douce);
	font-size: 0.98rem;
	line-height: 1.55;
}

.vide {
	padding: 6rem var(--marge);
	text-align: center;
	color: var(--encre-douce);
	font-style: italic;
	font-size: 1.15rem;
}

/* — Billet —————————————————————————————————————————————————— */

.heros {
	position: relative;
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	background: var(--papier-creux);
}

.heros-declencheur {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.heros-image {
	width: 100%;
	max-height: 82vh;
	object-fit: cover;
}

/* Le voile n'assombrit que le bas de l'image, là où le titre se pose : un
   assombrissement uniforme ternirait la photographie entière. */
.heros-voile {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

.heros-texte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.5rem, 5vw, 3.5rem);
	pointer-events: none;
	color: #fff;
	text-align: center;
}

.heros-titre {
	margin: 0;
	font-size: clamp(2rem, 6.5vw, 4.5rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.heros-saison {
	margin: 0 0 0.75rem;
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.billet-entete-nue {
	padding: clamp(3rem, 8vw, 6rem) var(--marge) 0;
	max-width: var(--colonne);
	margin-inline: auto;
	text-align: center;
}
.billet-entete-nue .heros-saison { color: var(--encre-douce); }

.billet-titre-nu {
	margin: 0;
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 400;
	line-height: 1.08;
}

.billet-date {
	max-width: var(--colonne);
	margin: 0 auto;
	padding: 0 var(--marge);
	text-align: center;
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.billet-texte {
	max-width: var(--colonne);
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	padding: 0 var(--marge);
	font-size: 1.15rem;
	line-height: 1.75;
}

.billet-texte p { margin: 0 0 1.4em; }

/* Une lettrine, seulement sur le premier paragraphe et seulement à partir de la
   tablette : sur un écran étroit elle mange une ligne entière. */
@media (min-width: 700px) {
	.billet-texte p:first-of-type::first-letter {
		float: left;
		font-size: 3.6em;
		line-height: 0.82;
		padding: 0.08em 0.09em 0 0;
		color: var(--vert);
	}
}

.galerie {
	max-width: 74rem;
	margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
	padding: 0 var(--marge);
	columns: 2;
	column-gap: clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 700px) { .galerie { columns: 1; } }

.galerie-element {
	break-inside: avoid;
	margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}

.galerie-element button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}

.galerie-element img { width: 100%; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.galerie-element button:hover img { transform: scale(1.02); }

.galerie-legende {
	margin: 0.55rem 0 0;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--encre-douce);
}

/* — Partage ————————————————————————————————————————————————— */

.partage {
	max-width: var(--colonne);
	margin: clamp(3rem, 7vw, 5rem) auto 0;
	padding: clamp(1.75rem, 4vw, 2.5rem) var(--marge);
	border-top: 1px solid var(--trait);
	border-bottom: 1px solid var(--trait);
	text-align: center;
}

.partage-titre {
	margin: 0 0 1rem;
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.partage-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.bouton-partage {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--trait);
	border-radius: 999px;
	background: none;
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.bouton-partage:hover { border-color: var(--encre); }

.bouton-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }

.bouton-copier.est-copie {
	background: var(--vert);
	border-color: var(--vert);
	color: #fff;
}

/* — Billets voisins ————————————————————————————————————————— */

.voisins {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	max-width: var(--colonne);
	margin: clamp(2.5rem, 6vw, 4rem) auto clamp(3rem, 8vw, 6rem);
	padding: 0 var(--marge);
}

.voisin { text-decoration: none; max-width: 20rem; }
.voisin-suivant { margin-left: auto; text-align: right; }

.voisin-sens {
	display: block;
	font-family: var(--sans);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--encre-douce);
	margin-bottom: 0.3rem;
}

.voisin-titre {
	display: block;
	font-size: 1.15rem;
	line-height: 1.25;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.voisin:hover .voisin-titre { border-bottom-color: currentColor; }

/* — Visionneuse ———————————————————————————————————————————— */

.visionneuse {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 11, 9, 0.96);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.visionneuse[hidden] { display: none; }
.visionneuse.est-ouverte { opacity: 1; }

.visionneuse-cadre {
	margin: 0;
	max-width: 100vw;
	max-height: 100vh;
	padding: clamp(1rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
}

.visionneuse-image {
	max-width: 100%;
	/* La légende et le compteur doivent rester visibles sous l'image. */
	max-height: calc(100vh - 8rem);
	width: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.visionneuse-image.est-chargee { opacity: 1; }

.visionneuse-legende {
	color: #f2ede2;
	font-style: italic;
	font-size: 0.95rem;
	text-align: center;
	max-width: 44rem;
}
.visionneuse-legende:empty { display: none; }

.visionneuse-compteur {
	position: absolute;
	bottom: 1.1rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: rgba(242, 237, 226, 0.6);
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
}

.visionneuse button {
	position: absolute;
	border: 0;
	background: none;
	color: #f2ede2;
	cursor: pointer;
	line-height: 1;
	opacity: 0.65;
	transition: opacity 0.2s;
	/* Cible tactile confortable, sans agrandir le glyphe. */
	padding: 0.5rem 1rem;
}
.visionneuse button:hover { opacity: 1; }

.visionneuse-fermer { top: 0.5rem; right: 0.75rem; font-size: 2.5rem; }
.visionneuse-precedent, .visionneuse-suivant { top: 50%; transform: translateY(-50%); font-size: 3.25rem; }
.visionneuse-precedent { left: 0.25rem; }
.visionneuse-suivant { right: 0.25rem; }

@media (max-width: 700px) {
	.visionneuse-precedent, .visionneuse-suivant { font-size: 2.5rem; }
}

body.visionneuse-ouverte { overflow: hidden; }

/* — Pied ———————————————————————————————————————————————————— */

.pied {
	padding: clamp(2.5rem, 6vw, 4rem) var(--marge);
	border-top: 1px solid var(--trait);
	text-align: center;
	color: var(--encre-douce);
}

.pied-titre {
	margin: 0 0 0.5rem;
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--encre);
}

.pied-mention {
	margin: 0.2rem 0;
	font-size: 0.88rem;
}

.pied-mention a { text-decoration: none; border-bottom: 1px solid var(--trait); }
.pied-mention a:hover { border-bottom-color: currentColor; }

/* — Page absente ———————————————————————————————————————————— */

.introuvable {
	padding: clamp(5rem, 14vw, 10rem) var(--marge);
	text-align: center;
}

.introuvable h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 6vw, 3.25rem);
	font-weight: 400;
}

.introuvable p { color: var(--encre-douce); margin: 0 0 2rem; }

.introuvable a {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* Respecte un système réglé sur « moins d'animations » : les transitions
   décoratives disparaissent, la navigation reste entière. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}