/* ==========================================================================
   Florence Sartori — Feuille de style principale
   Design system basé sur la maquette v18 : Cormorant Garamond (titres) +
   Jost (texte courant), bleu Klein, bronze, fond ivoire.
   Mobile-first, avec points de rupture tablette (768px) et desktop (1024px).
   ========================================================================== */

:root {
	--fs-blue: #002FA7;
	--fs-blue-dark: #0a1744;
	--fs-cream: #f2ede4;
	--fs-cream-2: #ece5d8;
	--fs-bronze: #a9782f;
	--fs-bronze-text: #7a5620; /* variante plus foncée de --fs-bronze, réservée au texte : contraste AA (4.5:1) garanti sur fond blanc/ivoire, là où --fs-bronze seul (3,3:1) échoue en tant que texte (bordures/fonds/icônes restent en --fs-bronze, où seul un contraste 3:1 est exigé). */
	--fs-ink: #1a1a1a;
	--fs-ink-soft: #4a4a4a;
	--fs-border: #ddd6c8;
	--fs-white: #ffffff;

	--fs-font-serif: 'Cormorant Garamond', Georgia, serif;
	--fs-font-sans: 'Jost', Helvetica, Arial, sans-serif;

	--fs-container: 1200px;
	--fs-radius: 4px;
	--fs-gap: clamp(16px, 3vw, 32px);
}

/* ---- Reset de base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--fs-font-sans);
	color: var(--fs-ink);
	background: var(--fs-cream);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Classes utilitaires pour contrôler la taille d'une vidéo insérée dans le
   corps d'un article (page Actualités). À appliquer sur le bloc Vidéo depuis
   l'éditeur : panneau de droite > Avancé > "Classe(s) CSS supplémentaire(s)". */
.fs-video-small  { max-width: 400px; margin: 24px auto; }
.fs-video-medium { max-width: 600px; margin: 24px auto; }
.fs-video-large  { max-width: 800px; margin: 24px auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
	font-family: var(--fs-font-serif);
	font-weight: 500;
	margin: 0 0 0.5em;
	color: var(--fs-ink);
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.fs-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 9999;
	background: var(--fs-blue); color: #fff; padding: 10px 16px; border-radius: var(--fs-radius);
}

/* ---- Conteneur générique ---- */
.fs-container {
	max-width: var(--fs-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- Boutons ---- */
.fs-btn {
	display: inline-block;
	padding: 13px 28px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--fs-radius);
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fs-btn--primary { background: var(--fs-blue); color: #fff; border-color: var(--fs-blue); }
.fs-btn--primary:hover { background: var(--fs-blue-dark); }
.fs-btn--outline { background: transparent; color: var(--fs-ink); border-color: var(--fs-ink-soft); }
.fs-btn--outline:hover { background: rgba(0,0,0,.05); }
.fs-btn--gold { background: #8f6526; color: #fff; border-color: #8f6526; } /* plus foncé que --fs-bronze : contraste AA (5,2:1) avec le texte blanc */
.fs-btn--gold:hover { background: #6f4e1c; }
.fs-link-plain { background: none; border: none; text-decoration: underline; color: inherit; font-size: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */
.fs-header {
	background: var(--fs-cream);
	border-bottom: 1px solid var(--fs-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.fs-header-inner {
	max-width: var(--fs-container);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.fs-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.fs-brand-name { font-family: var(--fs-font-serif); font-size: 22px; color: var(--fs-blue); }
.fs-brand-sub { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-ink-soft); }

.fs-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	background: none; border: none;
	order: 3;
}
.fs-nav-toggle span { display: block; height: 2px; background: var(--fs-ink); border-radius: 2px; }

.fs-nav-list {
	display: flex;
	gap: 28px;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.fs-nav-list a { padding: 4px 0; border-bottom: 1px solid transparent; }
.fs-nav-list a:hover,
.fs-nav-list .current-menu-item > a { border-color: var(--fs-blue); color: var(--fs-blue); }

.fs-header-side { display: flex; align-items: center; gap: 16px; order: 2; }

.fs-lang-switcher { display: flex; gap: 4px; font-size: 12px; list-style: none; margin: 0; padding: 0; }
.fs-lang-switcher li { display: inline-flex; }
.fs-lang-link, .fs-lang-switcher a {
	opacity: .6; text-transform: uppercase; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; min-height: 32px; padding: 4px 6px;
}
.fs-lang-link.is-active,
.fs-lang-link:hover,
.fs-lang-switcher a:hover,
.fs-lang-switcher .current-lang a { opacity: 1; font-weight: 600; color: var(--fs-blue); }

.fs-social-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-social-icon {
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	background: var(--fs-blue); color: #fff; border-radius: 50%;
	font-size: 10px; overflow: hidden;
}
.fs-social-icon img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.fs-social-icons--footer .fs-social-icon { background: var(--fs-bronze); }
.fs-social-icon--brand { background: transparent; overflow: visible; border-radius: 0; }
.fs-social-icon--brand svg { width: 26px; height: 26px; display: block; }
.fs-social-icons--footer .fs-social-icon--brand { background: transparent; }
.fs-social-icon--brand:hover { opacity: .85; }

/* Menu mobile : caché par défaut, panneau plein écran quand ouvert */
@media (max-width: 900px) {
	.fs-primary-nav {
		order: 4;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.fs-primary-nav.is-open { max-height: 400px; }
	.fs-nav-list { flex-direction: column; gap: 4px; padding: 12px 0; }
	.fs-nav-toggle { display: flex; }
}
@media (min-width: 901px) {
	.fs-nav-toggle { display: none; }
}

/* ==========================================================================
   Hero (accueil)
   ========================================================================== */
.fs-hero {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	max-width: 100%;
	overflow: hidden; /* garde-fou : la photo ne peut jamais déborder du bandeau */
}
@media (min-width: 901px) {
	.fs-hero { grid-template-columns: 1fr 1fr; min-height: 460px; }
}
.fs-hero-content {
	background: var(--fs-blue);
	color: #fff;
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.fs-hero-content h1 {
	color: #fff;
	font-size: clamp(28px, 5vw, 48px);
	white-space: pre-line;
}
.fs-hero-content p { max-width: 46ch; opacity: .92; }
.fs-hero-media {
	display: block;
	position: relative;
	height: clamp(220px, 60vw, 320px); /* mobile / tablette : hauteur plafonnée, plus de bandeau démesuré */
	background-color: var(--fs-cream-2);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}
@media (min-width: 901px) {
	/* Sur 2 colonnes, la photo suit toujours exactement la hauteur du bloc texte en face (stretch) : jamais plus haute. */
	.fs-hero-media { height: auto; align-self: stretch; }
}
/* ---- Slider (plusieurs photos/vidéos dans le bandeau d'accueil) ----
   Les slides sont toutes empilées en absolute et affichées via un fondu
   enchaîné (opacity) : ni saut ni recadrage différent d'une slide à l'autre. */
.fs-hero-slide {
	position: absolute;
	inset: 0;
	display: block;
	background-color: var(--fs-cream-2);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}
.fs-hero-slide.is-active { opacity: 1; pointer-events: auto; }
/* Comme pour les photos du bandeau, la vidéo reste entièrement visible sans
   recadrage/zoom automatique (contrairement à la vidéo de la page Contact,
   qui elle remplit son encart en le recadrant : comportement volontairement différent). */
.fs-hero-slide .fs-media-video { object-fit: contain; background: var(--fs-cream-2); }
.fs-hero-slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; border-radius: 50%; border: none;
	background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	z-index: 2; transition: background .2s ease;
}
.fs-hero-slider-arrow:hover { background: rgba(0,0,0,.55); }
.fs-hero-slider-prev { left: 12px; }
.fs-hero-slider-next { right: 12px; }
.fs-hero-slider-dots {
	position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 4px; z-index: 2;
}
.fs-hero-slider-dots button {
	/* Zone cliquable élargie (32x32, recommandation WCAG) autour du petit
	   point visuel (9px, via ::after) : évite de changer l'apparence tout en
	   rendant le bouton utilisable au doigt sur mobile. */
	width: 32px; height: 32px; border: none; background: transparent;
	padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fs-hero-slider-dots button::after {
	content: ''; display: block; width: 9px; height: 9px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.35);
	transition: background .2s ease;
}
.fs-hero-slider-dots button.is-active::after { background: #fff; }

.fs-hero-badge {
	position: absolute; top: 16px; right: 16px;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.6);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 11px;
}

/* ---- Bandeau "split" (série / œuvres) : titre à gauche, texte à droite ----
   Contrairement au bandeau d'accueil, il n'a pas de hauteur minimale fixe :
   sa hauteur s'ajuste toujours à la quantité de texte, jamais démesurée. */
.fs-hero.fs-hero--split { min-height: auto; }
.fs-hero--split .fs-hero-content {
	padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
	gap: 10px;
	/* Le bandeau bleu reste "plein cadre" (bord à bord), mais son texte doit
	   toujours démarrer à la même position horizontale que le reste du site
	   (breadcrumb, sections, etc. : cf. --fs-container / .fs-section plus bas).
	   Sans ce réglage, sur un grand écran, le titre restait collé au tout
	   bord gauche de l'écran alors que tout le reste du contenu est centré
	   dans une colonne de 1200px : d'où l'effet "pas centré" signalé.
	   IMPORTANT : ce padding est plafonné à 140px avec min() ci-dessous.
	   Sans plafond, sur les très grands écrans (ultra-wide, 4K...), le calc()
	   dépassait la largeur max de 480px du bloc (max-width plus bas) : il ne
	   restait alors plus de place pour le titre, qui se retrouvait écrasé à
	   une largeur quasi nulle et coupé net par l'overflow:hidden du bandeau
	   (c'est le bug "Démarche"/"Artistique" tronqués en "Déma"/"Artisti"). */
	padding-left: max(clamp(24px, 5vw, 56px), min(calc((100vw - var(--fs-container)) / 2), 140px));
}
.fs-hero--split .fs-hero-content h1 {
	font-weight: 700;
	white-space: pre-line;
}
.fs-hero-text {
	background: var(--fs-blue);
	color: #fff;
	padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 56px);
	display: flex;
	align-items: center;
	border-top: 1px solid rgba(255,255,255,.15);
	/* Symétrique du padding-left ci-dessus, côté droit du bandeau : même plafond. */
	padding-right: max(clamp(24px, 5vw, 56px), min(calc((100vw - var(--fs-container)) / 2), 140px));
}
.fs-hero-text p {
	max-width: 62ch;
	opacity: .92;
	white-space: pre-line;
	margin: 0;
}
@media (min-width: 901px) {
	/* La colonne de gauche s'ajuste à la taille du titre (max-content), la colonne
	   de droite récupère tout l'espace restant pour le texte : jamais de moitié-moitié
	   figée qui couperait un titre court ou écraserait un texte long. */
	.fs-hero.fs-hero--split { grid-template-columns: max-content minmax(320px, 1fr); }
	.fs-hero--split .fs-hero-content { max-width: 480px; }
	.fs-hero-text { border-top: none; border-left: 1px solid rgba(255,255,255,.15); }
}

/* ==========================================================================
   Sections génériques
   ========================================================================== */
.fs-section { padding: 56px 20px; max-width: var(--fs-container); margin: 0 auto; }
.fs-section-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--fs-bronze-text); margin-bottom: 8px; }
.fs-section-title { font-size: clamp(26px, 3vw, 34px); margin-bottom: 24px; }
.fs-section-title--gold { color: var(--fs-bronze-text); }

/* ---- Fil Instagram (page d'accueil) ---- */
.fs-instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fs-gap); }
.fs-instagram-item { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--fs-cream-2); }
.fs-instagram-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.fs-instagram-item:hover img { transform: scale(1.06); }
@media (max-width: 640px) { .fs-instagram-grid { grid-template-columns: repeat(2, 1fr); } }
.fs-lead { max-width: 70ch; color: var(--fs-ink-soft); }

/* ---- Liste "Expositions & prix" : les lignes avec URL sont cliquables ---- */
.fs-expo-title { display: block; }
.fs-expo-title--link { color: var(--fs-blue); }
.fs-expo-link-icon { font-size: 0.75em; margin-left: 2px; opacity: .75; }
.fs-expositions-list a:hover strong { text-decoration: underline; }

/* ---- Grille de cartes (œuvres / actualités) ---- */
.fs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fs-gap);
}
@media (min-width: 640px) { .fs-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .fs-grid--3, .fs-grid--2 { grid-template-columns: repeat(3, 1fr); } .fs-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.fs-card { display: block; }
.fs-news-card {
	display: block;
	background: var(--fs-cream);
	border-radius: var(--fs-radius);
	overflow: hidden;
	border-bottom: 3px solid var(--fs-bronze);
	transition: transform .2s ease, border-bottom-color .2s ease;
}
.fs-news-card:hover { transform: translateY(-2px); }
.fs-news-card .fs-news-date,
.fs-news-card .fs-news-title,
.fs-news-card .fs-news-link { padding-left: 16px; padding-right: 16px; }
.fs-news-card .fs-news-link { display: inline-block; padding-bottom: 16px; }
.fs-card-media, .fs-serie-card-media {
	background: var(--fs-cream-2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	height: clamp(240px, 26vw, 340px);
}
.fs-news-media {
	aspect-ratio: 4/5;
	background: var(--fs-cream-2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
/* object-fit: contain + max-width/max-height : l'image entière reste visible, jamais recadrée,
   qu'elle soit carrée, portrait ou paysage — seule sa taille d'affichage s'adapte au cadre. */
.fs-card-media img, .fs-serie-card-media img,
.fs-card-media video, .fs-serie-card-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* ---- Mise en situation (fiche œuvre) : photos plus grandes, cliquables (ouverture en grand dans un nouvel onglet) ---- */
.fs-situation-media { height: clamp(320px, 42vw, 560px); cursor: zoom-in; transition: opacity .2s ease; }
.fs-situation-media:hover { opacity: .85; }
.fs-situation-media--video { cursor: default; }
.fs-situation-media--video:hover { opacity: 1; }
.fs-situation-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.fs-news-media img { width: 100%; height: 100%; object-fit: contain; }
.fs-card-placeholder { width: 100%; aspect-ratio: 4/5; background: linear-gradient(160deg,#2a2f3a,#0b0d12); }
.fs-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px 12px; font-size: 13px; }
.fs-card-title { font-weight: 600; font-size: 16px; }
.fs-card-info { color: var(--fs-ink-soft); white-space: nowrap; }
.fs-card-status { display: block; margin-top: -8px; padding: 0 2px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--fs-bronze-text); }

/* ---- Cartes série (titre + texte au-dessus de l'œuvre mise en avant, sans cadre) ---- */
.fs-serie-card { display: flex; flex-direction: column; gap: 18px; }
.fs-serie-card-header { display: flex; flex-direction: column; gap: 4px; }
.fs-serie-card-title { font-size: 21px; margin-bottom: 6px; font-weight: 700; color: var(--fs-blue); transition: color .2s ease; }
.fs-serie-card:hover .fs-serie-card-title { color: var(--fs-blue-dark); }
.fs-serie-card-desc { margin: 0; font-size: 14px; color: var(--fs-ink-soft); }
.fs-serie-card-media { border-radius: var(--fs-radius); }

/* ---- Page Artiste : rangée de 2 médias (avant "Prix" / après "Expositions") ---- */
/* display: flex + justify-content: center pour que les médias soient
   regroupés et centrés sur la page (au lieu d'être plaqués aux deux
   extrémités d'une grille pleine largeur). */
.fs-artiste-images-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--fs-gap);
}
.fs-artiste-image {
	background: var(--fs-cream-2);
	border-radius: var(--fs-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4/5;
	height: 380px;
	max-height: 380px;
	width: auto;
	flex: 0 1 auto;
}
/* La photo OU la vidéo (fs_render_artiste_media() choisit automatiquement
   la bonne balise selon le fichier sélectionné en back-office). */
.fs-artiste-image .fs-artiste-media {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
@media (max-width: 640px) {
	.fs-artiste-image { height: auto; max-height: none; width: 100%; max-width: 320px; }
}

/* ---- Article actualité (single-actualite) : habillage éditorial ---- */
.fs-actu-badge {
	display: inline-block;
	background: var(--fs-blue);
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 14px;
}
.fs-actu-hero {
	background: var(--fs-cream-2);
	border-radius: var(--fs-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(260px, 42vw, 480px);
	margin-bottom: 28px;
}
.fs-actu-hero img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fs-actu-body > p:first-of-type::first-letter {
	font-family: var(--fs-font-serif);
	font-size: 52px;
	line-height: .8;
	float: left;
	padding: 4px 8px 0 0;
	color: var(--fs-blue);
}
.fs-actu-infos { background: var(--fs-cream-2); border-left: 3px solid var(--fs-bronze); padding: 18px 20px; margin: 28px 0; }
.fs-actu-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--fs-border);
}
.fs-actu-share { display: flex; align-items: center; gap: 12px; }
.fs-actu-share svg { width: 22px; height: 22px; display: block; }

/* ---- Accueil : bandeau "dernière actualité" (image à gauche, texte à droite) ---- */
.fs-section--tight { padding-top: 0; }
.fs-section--tight-bottom { padding-bottom: 16px; }
.fs-home-news {
	background: var(--fs-cream-2);
	border-radius: var(--fs-radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .fs-home-news { grid-template-columns: 1fr 1.1fr; } }
.fs-home-news-media {
	position: relative;
	background: var(--fs-border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	aspect-ratio: 4/5;
}
.fs-home-news-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (min-width: 768px) {
	/* L'image ne doit pas imposer sa propre hauteur : elle est retirée du flux (position absolue)
	   pour que la rangée de la grille se calcule uniquement sur la hauteur du bloc texte,
	   puis l'image vient occuper exactement cet espace, sans jamais le dépasser. */
	.fs-home-news-media { aspect-ratio: auto; align-self: stretch; padding: 0; }
	.fs-home-news-media img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); max-width: none; max-height: none; }
}
.fs-home-news-content {
	padding: clamp(28px, 5vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fs-news-date { font-size: 12px; color: var(--fs-bronze-text); margin: 12px 0 6px; }
.fs-news-title { font-size: 19px; margin-bottom: 6px; }
.fs-news-link { font-size: 12px; text-decoration: underline; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.fs-newsletter {
	background: var(--fs-blue);
	color: #fff;
	padding: 56px 20px;
	text-align: center;
}
.fs-newsletter-title { font-family: var(--fs-font-serif); font-size: clamp(20px, 3vw, 28px); max-width: 60ch; margin: 0 auto 24px; }
.fs-newsletter-form {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 480px; margin: 0 auto;
}
.fs-newsletter-form input[type="email"] {
	flex: 1; min-width: 220px; padding: 12px 14px; border: none; border-radius: var(--fs-radius);
}
.fs-newsletter-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; opacity: .8; margin-bottom: 12px; }

/* ==========================================================================
   Partenaires
   ========================================================================== */
.fs-partners { background: var(--fs-cream); text-align: center; padding: 48px 20px 24px; }
.fs-partners-intro { font-family: var(--fs-font-serif); font-style: italic; color: var(--fs-bronze-text); margin-bottom: 20px; max-width: var(--fs-container); margin-left: auto; margin-right: auto; }
.fs-partners-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; max-width: var(--fs-container); margin: 0 auto; width: 100%; }
.fs-partner-logo {
	border: 1px solid var(--fs-border);
	background: #fff;
	box-sizing: border-box;
	padding: 12px 20px;
	display: flex; align-items: center; justify-content: center;
	width: 190px;
	height: 76px;
	text-align: center;
}
.fs-partner-logo img { max-height: 32px; max-width: 100%; width: auto; display: block; margin: 0 auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.fs-footer { background: var(--fs-blue-dark); color: #cfd3de; }
.fs-footer-inner {
	max-width: var(--fs-container); margin: 0 auto; padding: 20px;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
	font-size: 12px;
}
.fs-footer-copy { justify-self: start; margin: 0; }
.fs-social-icons--footer { justify-self: center; }
.fs-footer-links { justify-self: end; display: flex; gap: 16px; }
@media (max-width: 640px) {
	.fs-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.fs-footer-copy, .fs-social-icons--footer, .fs-footer-links { justify-self: center; }
}
.fs-footer-links a:hover { text-decoration: underline; }

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.fs-breadcrumb { font-size: 12px; color: var(--fs-ink-soft); padding: 20px 20px 0; max-width: var(--fs-container); margin: 0 auto; }
.fs-breadcrumb a { text-decoration: underline; }
.fs-breadcrumb-current { color: var(--fs-ink); }

/* ==========================================================================
   Popup exposition
   ========================================================================== */
.fs-popup-overlay {
	position: fixed; inset: 0; background: rgba(20,20,20,.55);
	display: flex; align-items: center; justify-content: center;
	z-index: 999; padding: 20px;
}
.fs-popup-overlay[hidden] { display: none; }
.fs-popup {
	background: #fff; max-width: 420px; width: 100%; border-radius: var(--fs-radius);
	overflow: hidden; position: relative; max-height: 90vh; overflow-y: auto;
}
.fs-popup-media { height: 200px; background-color: var(--fs-cream-2); background-size: contain; background-repeat: no-repeat; background-position: center; }
a.fs-popup-media { cursor: pointer; }
.fs-popup-close {
	position: absolute; top: 10px; right: 12px; background: rgba(255,255,255,.9);
	border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; z-index: 2;
}
.fs-popup-body { padding: 20px; }
.fs-popup-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fs-bronze-text); }
.fs-popup-title { margin: 6px 0 2px; font-size: 24px; }
.fs-popup-subtitle { font-size: 13px; color: var(--fs-ink-soft); margin-bottom: 12px; }
.fs-popup-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }

/* ==========================================================================
   Bandeau cookies
   ========================================================================== */
.fs-cookie-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
	background: var(--fs-blue); color: #fff;
	padding: 18px 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.fs-cookie-banner[hidden] { display: none; }
.fs-cookie-text { margin: 0; font-size: 13px; max-width: 640px; }
.fs-cookie-text a { text-decoration: underline; }
.fs-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.fs-cookie-banner .fs-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */
.fs-contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .fs-contact-grid { grid-template-columns: 1fr 1fr; } }
.fs-contact-media { position: relative; overflow: hidden; aspect-ratio: 3/4; background: linear-gradient(160deg,#b98a3a,#3a2a12); border-radius: var(--fs-radius); }

/* ---- Vidéo en fond (bandeau accueil / photo contact) : remplit tout le conteneur,
   toujours en boucle et sans son (autoplay navigateur). ---- */
.fs-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-form-field { margin-bottom: 20px; }
.fs-form-field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; color: var(--fs-ink-soft); }
.fs-form-field input, .fs-form-field textarea {
	width: 100%; border: none; border-bottom: 1px solid var(--fs-border);
	background: transparent; padding: 8px 0; font-family: inherit; font-size: 15px;
}
.fs-form-field input:focus, .fs-form-field textarea:focus { outline: none; border-color: var(--fs-blue); }
.fs-form-success { background: #e6f4ea; color: #1e5631; padding: 14px 18px; border-radius: var(--fs-radius); margin-bottom: 20px; }
.fs-form-error { background: #fdecea; color: #8a1f1f; padding: 14px 18px; border-radius: var(--fs-radius); margin-bottom: 20px; }

/* ==========================================================================
   Fiche œuvre
   ========================================================================== */
.fs-oeuvre-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 32px 20px; max-width: var(--fs-container); margin: 0 auto; }
@media (min-width: 900px) { .fs-oeuvre-grid { grid-template-columns: 1.1fr 0.9fr; } }
.fs-oeuvre-media {
	position: relative;
	min-height: clamp(320px, 44vw, 560px);
	max-height: 78vh;
	background: var(--fs-cream-2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	overflow: hidden;
}
.fs-oeuvre-media img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; display: block; }
.fs-oeuvre-media-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.fs-oeuvre-badge { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.fs-oeuvre-eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--fs-bronze-text); }
.fs-oeuvre-title { font-size: 30px; margin: 6px 0 20px; }
.fs-oeuvre-specs { width: 100%; border-collapse: collapse; }
.fs-oeuvre-specs tr { border-bottom: 1px solid var(--fs-border); }
.fs-oeuvre-specs th, .fs-oeuvre-specs td { text-align: left; padding: 10px 0; font-weight: 400; font-size: 14px; }
.fs-oeuvre-specs th { color: var(--fs-ink-soft); font-weight: 400; }
.fs-oeuvre-specs td { text-align: right; font-weight: 600; white-space: pre-line; }
.fs-oeuvre-quote { font-style: italic; color: var(--fs-ink-soft); margin: 20px 0; white-space: pre-line; }
.fs-oeuvre-series-link { background: var(--fs-cream-2); padding: 16px; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid var(--fs-bronze); }
.fs-oeuvre-series-name { font-family: var(--fs-font-serif); font-size: 18px; font-weight: 700; color: var(--fs-blue); }
.fs-oeuvre-nav { display: flex; justify-content: space-between; padding: 0 20px 40px; max-width: var(--fs-container); margin: 0 auto; font-size: 13px; }

/* ==========================================================================
   Accessibilité : focus visible partout
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--fs-blue);
	outline-offset: 2px;
}

/* ==========================================================================
   Lightbox — agrandissement d'image en overlay, sans jamais quitter la page
   (évite d'exposer une URL Cloudinary dans la barre d'adresse au clic).
   ========================================================================== */
.fs-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 14, .92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 32px;
	z-index: 9999;
}
.fs-lightbox-overlay.is-open { display: flex; }
.fs-lightbox-overlay img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fs-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.5);
	background: transparent;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.fs-lightbox-close:hover { background: rgba(255,255,255,.12); }