/*
Theme Name: Septembre00
Theme URI: https://septembre00.com
Author: Septembre00
Author URI: https://septembre00.com
Description: Thème sur mesure qui reprend le design du site Cargo de Septembre00 : carrousel horizontal en noir et blanc sur l'accueil, index en grille, pages projet en diaporama avec crédits, version mobile dédiée. Inclut un outil d'import du contenu de l'ancien site (Outils → Import Septembre00).
Version: 1.0.54
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: septembre00
*/

/* ==========================================================================
   Variables
   Cargo exprime ses marges en "rem", qui valent 0,9 % de la largeur de
   la fenêtre (12,96 px à 1440 px de large). --u reproduit cette unité.
   ========================================================================== */

:root {
	--u: 0.9vw;
	--font: Times, "Times New Roman", serif;
	--ink: #000;
	--paper: #fff;
	--fs: 12px;                               /* taille unique de tous les textes */
	--lh: calc(var(--fs) * 1.2);              /* hauteur d'une ligne */
	--nav-h: calc(var(--u) * 2 + var(--lh));
	--slide-h: 87vh;                          /* hauteur max. des images d'un projet */
	--slide-w: 60vw;                          /* largeur max. (laisse la place aux crédits) */
	--cursor-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 2.5 10.75 7 3.25 11.5z' fill='%23000' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 7 7, e-resize;
	--cursor-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M10.75 2.5 3.25 7 10.75 11.5z' fill='%23000' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 7 7, w-resize;
	--mbar-h: calc(var(--u) * 4 + var(--lh) * 2);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

a {
	color: var(--ink);
	text-decoration: none;
}

a:active {
	opacity: 0.7;
}

img,
video {
	display: block;
	max-width: 100%;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bold;
}

p {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.s00-list {
	display: none;
}

/* ==========================================================================
   En-tête (bureau)
   ========================================================================== */

.s00-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	display: flex;
	align-items: baseline;
	padding: calc(var(--u) * 0.75) calc(var(--u) * 2) calc(var(--u) * 1.25) var(--u);
	background: var(--paper); /* barre de menu toujours visible, sur fond blanc */
	font-size: var(--fs);
	line-height: 1.2;
	pointer-events: none;
}

.admin-bar .s00-nav,
.admin-bar .s00-close,
.admin-bar .s00-mnav {
	top: 32px;
}

.s00-nav a {
	pointer-events: auto;
}

.s00-nav__brand {
	flex: 0 0 auto;
	width: calc(24.5vw - var(--u));
	font-size: var(--fs);
}

.s00-nav__menu {
	flex: 0 1 auto;
}

.s00-nav__menu a + a {
	margin-left: calc(var(--u) * 2.9);
}

.s00-nav__right {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.s00-nav__right a + a {
	margin-left: calc(var(--u) * 2.5);
}

.s00-nav__menu a:hover,
.s00-nav__right a:hover {
	text-decoration: underline;
}

/* Bouton "[x] close" des pages projet (bureau) */
.s00-close {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	display: block;
	padding: calc(var(--u) * 1.25) calc(var(--u) * 3) var(--u);
	font-size: var(--fs);
	line-height: 1.2;
}

/* Boutons "[x] close" de l'en-tête : mobile uniquement
   (sur ordinateur, "[X CLOSE ]" est groupé avec les crédits) */
.s00-close.s00-close--about,
.s00-close.s00-close--mobile {
	display: none;
}

/* ==========================================================================
   Accueil (bureau) : carrousel horizontal
   ========================================================================== */

.s00-home {
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--paper);
}

.admin-bar .s00-home {
	min-height: calc(100vh - 32px); /* connecté : la barre WordPress ne pousse pas le carrousel hors de l'écran */
}

.s00-carousel {
	overscroll-behavior: none; /* pas de rebond du navigateur aux extrémités */
	display: flex;
	width: 100%;
	overflow: hidden; /* le défilement est géré par main.js (bande déplacée) */
	background: var(--paper);
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-y;
}

/* Bande des projets, déplacée en douceur par main.js */
.s00-carousel__track {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end; /* chaque image touche le bas de l'écran, sans liseré */
	will-change: transform;
	backface-visibility: hidden;
}

.s00-carousel::-webkit-scrollbar {
	display: none;
}

.s00-carousel__item {
	flex: 0 0 auto;
	display: block;
	width: 57vh;
	margin-right: 0;
}

/* Titre sur une ligne : "[1] Loro Piana by Massimiliano Bomba" */
.s00-carousel__caption {
	padding-left: var(--u);
	margin-bottom: 3px; /* titre resserré sur l'image */
	white-space: nowrap;
	font-size: var(--fs);
	line-height: 1.2;
}

.s00-carousel__item img,
.s00-carousel__item video {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.45s ease, opacity 0.45s ease;
}

/* Images en noir et blanc, 20 % plus claires ; elles passent en couleur
   au survol de la souris, en douceur (écrans sans souris : toujours en couleur) */
@media (hover: hover) {
	.s00-carousel__item img,
	.s00-carousel__item video {
		filter: grayscale(100%);
		opacity: 0.8;
	}

	.s00-carousel__item:hover img,
	.s00-carousel__item:hover video {
		filter: grayscale(0%);
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Variante « petites images » (Projets → Ordre et affichage, ou ?accueil=petites)
   Une bande de petites images en bas de l'écran ; au survol, la petite image
   s'agrandit sur place, toujours alignée en bas avec les autres, qui
   s'écartent ; le titre du projet apparaît au-dessus.
   -------------------------------------------------------------------------- */
.s00-home--mini {
	--mini-h: 9vh;   /* hauteur des petites images */
	--zoom-h: 65vh;  /* hauteur de l'image agrandie */
}

.s00-carousel--mini {
	align-self: stretch; /* toute la hauteur : l'image agrandie n'est pas coupée */
}

.s00-carousel--mini .s00-carousel__track {
	align-items: flex-end;
}

.s00-carousel--mini .s00-carousel__item {
	position: relative;
	width: auto;
}

.s00-carousel--mini .s00-carousel__item img,
.s00-carousel--mini .s00-carousel__item video {
	width: auto;
	max-width: none;
	height: var(--mini-h);
	transition: none; /* taille, couleur et titre animés image par image par main.js */
}

/* Titre au-dessus de l'image agrandie, comme sur l'accueil en grandes images */
.s00-carousel--mini .s00-carousel__caption {
	position: absolute;
	left: 0;
	bottom: 100%;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Index (bureau) : grille 7 colonnes
   ========================================================================== */

/* Grille alignée sur la barre de menu : bord gauche = "Septembre00",
   bord droit = "instagram" */
.s00-index {
	padding: calc(var(--nav-h) + var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 6) var(--u);
}

.s00-index__grid {
	display: grid;
	/* 7 vignettes par ligne, réduites (0,7 puis encore -10 % = 0,63) :
	   la 1re reste sous "Septembre00", la 7e sous "instagram", et l'espace
	   entre les vignettes s'agrandit */
	grid-template-columns: repeat(7, calc((100% - 6 * var(--u)) / 7 * 0.63));
	justify-content: space-between;
	column-gap: var(--u);
	row-gap: calc(var(--u) * 1.5);
	align-items: start;
}

.s00-index__item {
	display: block;
}

.s00-index__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.s00-index__media img,
.s00-index__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.s00-index__item:hover .s00-index__media img,
.s00-index__item:hover .s00-index__media video {
	filter: grayscale(0%);
}

.s00-index__title {
	margin-top: 3px; /* titre resserré sous l'image */
	margin-bottom: 0;
	padding-top: 0;
	font-size: var(--fs);
	line-height: 1.2;
	text-align: left;
}

/* « by Nom du photographe » passe à la ligne d'un seul bloc, sans couper
   le nom (sauf s'il est plus long qu'une ligne entière) */
.s00-index__title .s00-by,
.s00-index__title .s00-seg {
	display: inline-block;
}

/* Bureau : les vignettes étant petites, le titre peut déborder à droite de
   l'image, dans l'espace libre jusqu'à la colonne suivante (moins une marge),
   pour ne pas couper les noms. 168,5 % = largeur d'une colonne + espace,
   calculé à partir du rapport 0,63 de la grille. « by Nom » toujours sur sa
   propre ligne, comme avant. */
@media (min-width: 768px) {
	.s00-index__title {
		width: calc(100% * 91 / 54 - var(--u) * 0.5);
	}

	.s00-index__item:nth-child(7n) .s00-index__title {
		width: calc(100% + var(--u) * 1.5); /* dernière colonne : bord de page */
	}

	.s00-index__title .s00-by {
		display: block;
	}
}

/* ==========================================================================
   À propos (bureau)
   ========================================================================== */

/* Un seul bloc de texte, aligné sur « projects » du menu, sans défilement */
html.s00-html-about,
html.s00-html-about body {
	height: 100%;
	overflow: hidden;
}

.s00-about {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto; /* seulement si la fenêtre est trop basse pour le texte */
	overscroll-behavior: contain;
	scrollbar-width: none;
	padding: calc(var(--u) * 20) 19.5vw calc(var(--u) * 6) 24.5vw; /* 24,5vw = début de « projects » */
	font-size: var(--fs);
	line-height: 1.2;
}

.s00-about::-webkit-scrollbar {
	display: none;
}

.s00-about__block p {
	margin: 0;
}

/* Un nom de client ou de service n'est jamais coupé en fin de ligne */
.s00-nb {
	white-space: nowrap;
}

.s00-about__text p + p {
	margin-top: 1.2em;
}

.s00-about__section {
	margin-top: 1.2em !important; /* une ligne vide entre les parties */
}

.s00-about__label {
	display: inline;
}

.s00-about__block a {
	color: var(--ink);
}

.s00-about__block a:hover {
	text-decoration: underline;
}

.s00-about-m {
	display: none;
}

/* ==========================================================================
   Page projet (bureau)
   L'image reste fixe au centre de l'écran (elle ne bouge pas au défilement),
   folio en bas à droite de l'image. "[X CLOSE ]" et les crédits forment un
   seul groupe en haut à gauche, qui défile si les crédits sont longs.
   Curseur ◀ / ▶ selon la moitié de l'écran survolée : un clic affiche
   l'image précédente / suivante.
   ========================================================================== */

.s00-project {
	position: relative;
	min-height: 100vh;
}

/* Page About : pas de rebond du navigateur au défilement */
html.s00-html-about,
html.s00-html-about body {
	overscroll-behavior: none;
}

/* Pages projet : la page ne défile pas et ne rebondit pas (souris, pavé,
   doigt), même connecté avec la barre d'administration de WordPress */
html.s00-html-project,
html.s00-html-project body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.s00-stage {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 16.5vw; /* l'image est centrée dans la zone à droite des crédits */
}

.admin-bar .s00-stage {
	top: 32px;
}

.s00-stage.is-prev {
	cursor: var(--cursor-prev);
}

.s00-stage.is-next {
	cursor: var(--cursor-next);
}

.s00-slideshow {
	position: relative;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

.s00-slide {
	display: none;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.s00-slide.is-active {
	display: flex;
}

.s00-slide__media {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.s00-slide__frame {
	position: relative;
	display: block;
}

.s00-slide__frame img,
.s00-slide__frame video {
	display: block;
	width: min(var(--slide-w), calc(var(--slide-h) * var(--r, 0.8)));
	height: auto;
	max-width: none;
}

.s00-slide__frame video[controls] {
	cursor: auto;
}

/* Folio "[1/15]" : centré entre l'image et le bord droit de la page, aligné sur le haut des crédits
   (placé par main.js ; sans crédits, il reste aligné sur le bas de l'image) */
.s00-slide__count {
	position: absolute;
	/* centré entre le bord droit de l'image et le bord de la page
	   (main.js recalcule la position exacte) */
	left: calc(75% + 20.875vw);
	bottom: -0.33em;
	transform: translateX(-50%);
	font-size: 10px; /* le folio est un peu plus petit que le reste du texte */
	line-height: 1.2;
	white-space: nowrap;
}

.s00-arrow {
	display: none;
}

/* Groupe "[X CLOSE ]" + crédits, en haut à gauche, fixe comme l'image.
   Si les crédits sont plus hauts que l'écran, ils défilent dans leur colonne. */
.s00-aside {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 20vw;
	min-width: 220px;
	padding: calc(var(--u) * 0.6) 0 calc(var(--u) * 4) var(--u);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	pointer-events: none;
}

.s00-aside::-webkit-scrollbar {
	display: none;
}

.admin-bar .s00-aside {
	top: 32px;
}

.s00-aside__close {
	display: inline-block;
	font-size: var(--fs);
	line-height: 1.2;
	pointer-events: auto;
}

.s00-aside .s00-credits__inner {
	max-width: 17em; /* colonne étroite : les lignes trop longues passent à la ligne */
	margin-top: calc(var(--u) * 6.5);
	margin-left: calc(var(--u) * 3.25);
	text-wrap: pretty;
}

/* Crédits : graisse normale, intitulés en italique comme sur mobile
   ("Photographer:", "Director:"…) */
.s00-credits__inner {
	pointer-events: auto;
	cursor: auto;
	font-weight: 400;
}

.s00-credits__inner i,
.s00-credits__inner em {
	font-style: italic;
	font-weight: 400;
}

.s00-credits__inner,
.s00-minfo__inner {
	font-size: var(--fs);
	line-height: 1.2;
}

.s00-credits__inner p {
	margin: 0 0 1.2em;
}

.s00-minfo__inner p {
	margin: 0 0 10px;
}

.s00-credits__inner p:last-child {
	margin-bottom: 0;
}

.s00-credits__inner a,
.s00-minfo__inner a {
	text-decoration: underline;
}

.s00-minfo__inner a.s00-minfo__close {
	text-decoration: none;
}

.s00-mbar,
.s00-minfo,
.s00-minfo-backdrop,
.s00-mnav {
	display: none;
}

/* ==========================================================================
   Pages génériques
   ========================================================================== */

.s00-page {
	padding: calc(var(--nav-h) + var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6);
	max-width: 100%;
}

.s00-page__inner {
	max-width: 42em;
}

.s00-page__inner > * + * {
	margin-top: 1.2em;
}

.s00-page__inner a {
	text-decoration: underline;
}

.s00-page__inner img {
	height: auto;
}

.s00-page__title {
	font-size: inherit;
	font-weight: 400;
	margin: 0 0 12px;
}

/* ==========================================================================
   MOBILE (≤ 767 px)
   ========================================================================== */

@media (max-width: 767px) {

	body {
		font-size: var(--fs);
	}

	.s00-only-desktop {
		display: none !important;
	}

	.s00-home,
	.admin-bar .s00-home {
		display: block;
		min-height: 0;
	}

	/* En-tête mobile : logo seul, fond blanc */
	.s00-mnav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 500;
		display: block;
		padding: calc(var(--u) * 2) var(--u) calc(var(--u) * 2) calc(var(--u) * 2);
		background: var(--paper);
		font-size: var(--fs);
		line-height: 1.2;
	}

	/* Tout ce qui est au-dessus du bandeau "Septembre00" reste blanc :
	   les images ne passent jamais au-dessus quand on fait défiler */
	.s00-mnav::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 100vh;
		background: var(--paper);
		pointer-events: none;
	}

	.admin-bar .s00-mnav,
	.admin-bar .s00-close {
		top: 46px;
	}

	.s00-close {
		padding: calc(var(--u) * 4);
		font-size: var(--fs);
	}

	/* "[x] close" de la page About : exactement à la place du titre
	   "Septembre00" de l'accueil */
	.s00-close.s00-close--about {
		display: block;
		padding: calc(var(--u) * 2) var(--u) calc(var(--u) * 2) calc(var(--u) * 2);
		line-height: 1.2;
	}

	/* Accueil mobile : liste verticale de tous les projets */
	.s00-list {
		display: block;
		padding: calc(var(--u) * 2 + var(--lh) + var(--u)) var(--u) var(--u);
	}

	.s00-list__item {
		display: block;
		margin-bottom: calc(var(--u) * 0.9);
	}

	.s00-list__item img,
	.s00-list__item video {
		width: 100%;
		height: auto;
	}

	.s00-list__title {
		margin-top: var(--u);
		margin-bottom: 0.5em;
		padding-top: calc(var(--u) * 0.25);
		font-size: var(--fs);
		line-height: 1.2;
	}

	/* Index mobile */
	.s00-index {
		padding: calc(var(--u) * 2 + var(--lh) + var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6);
	}

	.s00-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(var(--u) * 4);
		row-gap: calc(var(--u) * 4);
	}

	.s00-index__media img,
	.s00-index__media video {
		filter: none;
	}

	.s00-index__title {
		font-size: var(--fs);
	}

	/* À propos mobile */
	.s00-about {
		display: none;
	}

	/* La page About ne bouge pas : le texte est posé en bas de l'écran,
	   et ne défile (sous "[x] close") que s'il est plus haut que l'écran */
	html.s00-html-about,
	html.s00-html-about body {
		height: 100%;
		overflow: hidden;
	}

	.s00-about-m {
		position: fixed;
		top: calc(var(--u) * 4 + var(--lh)); /* sous la ligne de "[x] close" */
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: calc(var(--u) * 4) calc(var(--u) * 7) var(--u) calc(var(--u) * 4);
		font-size: var(--fs);
		line-height: 1.2;
	}

	.admin-bar .s00-about-m {
		top: calc(46px + var(--u) * 4 + var(--lh));
	}

	.s00-about-m > :first-child {
		margin-top: auto; /* texte calé en bas, sans rien couper s'il est long */
	}

	.s00-about-m p {
		margin: 0;
	}

	.s00-about-m__block + .s00-about-m__block {
		margin-top: 1.2em;
	}

	.s00-about-m__block > * + * {
		margin-top: 0;
	}

	.s00-about-m__block .s00-about-m__text p + p {
		margin-top: 1.2em;
	}

	/* Page projet mobile
	   L'image est posée sur le volet du bas (légende + [+] info), séparée
	   par un filet noir. Le volet monte par-dessus l'image pour les crédits. */
	.s00-project {
		--mtop: calc(var(--u) * 8 + var(--lh)); /* place de "[x] close" au-dessus de l'image */
		--mtoggle-h: calc(var(--u) * 2); /* marge entre le filet et la légende */
		--mline: 1px; /* filet entre l'image et le volet */
		--mbar-h: calc(var(--mline) + var(--mtoggle-h) + var(--lh) * 2 + var(--u) * 4);
		min-height: 100vh;
		min-height: 100svh;
	}

	@media (min-resolution: 2dppx) {
		.s00-project {
			--mline: 0.75px; /* filet fin sur les écrans Retina */
		}
	}

	.s00-aside {
		display: none;
	}

	.s00-project {
		min-height: 0;
	}

	.s00-stage,
	.admin-bar .s00-stage {
		position: fixed;
		top: 0;
		right: 0;
		bottom: var(--mbar-h); /* zone entre "[x] close" et le volet */
		left: 0;
		justify-content: center; /* images et vidéos centrées en hauteur */
		min-height: 0;
		padding: var(--mtop) 0 0; /* images bord à bord */
		touch-action: pinch-zoom; /* le doigt ne fait pas bouger l'image (le zoom reste possible) */
	}

	.admin-bar .s00-stage {
		top: 46px;
	}

	.s00-close.s00-close--mobile {
		display: block;
	}

	.s00-stage.is-prev,
	.s00-stage.is-next {
		cursor: auto;
	}

	.s00-slide__frame {
		width: 100%;
	}

	.s00-slide__frame img,
	.s00-slide__frame video {
		width: 100%;
		height: auto;
		max-height: calc(100svh - var(--mbar-h) - var(--mtop));
		object-fit: contain;
		object-position: 50% 100%;
	}

	/* Images toujours bord à bord : sur un écran peu haut, l'image est
	   légèrement recadrée en haut et en bas plutôt que de laisser des
	   marges blanches à gauche et à droite */
	.s00-slide__frame img {
		object-fit: cover;
		object-position: 50% 50%;
	}

	.admin-bar .s00-slide__frame img,
	.admin-bar .s00-slide__frame video {
		max-height: calc(100svh - var(--mbar-h) - var(--mtop) - 46px);
	}

	.s00-slide__count {
		display: none;
	}

	/* Glisser du doigt : l'image voisine arrive à côté, centrée en hauteur */
	.s00-slides {
		position: relative;
	}

	.s00-slide.is-peek {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		display: flex;
		pointer-events: none;
	}

	/* Flèches masquées sur mobile : on passe d'une image à l'autre en
	   glissant le doigt (styles gardés si on veut les réafficher : display:flex) */
	.s00-arrow {
		position: absolute;
		top: 50%;
		z-index: 3;
		display: none;
		align-items: center;
		justify-content: center;
		width: 40px; /* zone tactile confortable, le triangle reste petit */
		height: 40px;
		margin-top: -20px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #000;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.s00-arrow svg {
		display: block;
		width: 14px;
		height: 14px;
		overflow: visible;
	}

	.s00-arrow svg path {
		fill: currentColor;
		stroke: none;
	}

	.s00-arrow--prev {
		left: 0;
	}

	.s00-arrow--next {
		right: 0;
	}

	.s00-slideshow.is-single .s00-arrow {
		display: none;
	}

	/* Volet fermé : filet, légende + [+] info, flèche ︿ à droite */
	.s00-mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		display: block;
		padding: var(--mtoggle-h) calc(var(--u) * 4) calc(var(--u) * 4);
		border-top: var(--mline) solid var(--ink);
		background: var(--paper);
		font-size: var(--fs);
		line-height: 1.2;
	}

	.s00-mbar.has-info .s00-mbar__text {
		padding-right: calc(var(--u) * 6); /* le texte ne passe pas sous la flèche */
	}

	.s00-mbar,
	.s00-minfo-backdrop,
	.s00-close.s00-close--mobile {
		touch-action: pinch-zoom;
	}

	/* Flèche fine ︿ / ﹀ à droite du volet.
	   Fermé : centrée sur les deux lignes "légende / [+] info".
	   Ouvert : sur la première ligne des crédits, et elle y reste
	   si l'on fait défiler de longs crédits. */
	.s00-mtoggle {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: calc(var(--u) * 10);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ink);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.s00-mtoggle .s00-chevron {
		position: absolute;
		right: calc(var(--u) * 4.5);
		top: var(--chev-y);
		margin-top: -4px; /* moitié de la hauteur de la flèche */
	}

	.s00-mbar .s00-mtoggle {
		--chev-y: calc(var(--u) * 2 + var(--lh));
		bottom: 0;
	}

	.s00-minfo .s00-mtoggle {
		--chev-y: calc(var(--u) * 3 + var(--lh) / 2);
		height: calc(var(--u) * 6 + var(--lh));
	}

	.s00-chevron {
		display: block;
		width: 18px;
		height: 8px;
		overflow: visible;
	}

	/* Volet ouvert : il part de la position du volet fermé et monte
	   par-dessus l'image ; le filet reste en haut, la flèche ﹀ à droite */
	.s00-minfo {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: block;
		max-height: calc(100svh - var(--u) * 4 - var(--lh) - var(--u) * 2);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		border-top: var(--mline) solid var(--ink);
		background: var(--paper);
		transform: translate3d(0, calc(100% - var(--mbar-h)), 0);
		visibility: hidden;
		transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.5s;
	}

	.s00-minfo.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
	}

	.s00-minfo.is-dragging {
		transition: none;
	}

	.s00-minfo__head {
		position: sticky;
		top: 0;
		z-index: 1;
		height: 0;
	}

	.s00-minfo__inner {
		padding: calc(var(--u) * 3) calc(var(--u) * 10) 0 calc(var(--u) * 4);
		font-size: var(--fs);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.s00-minfo.is-open .s00-minfo__inner {
		opacity: 1;
		transition: opacity 0.35s ease 0.05s;
	}

	.s00-minfo__inner p {
		margin-bottom: 7px;
	}

	.s00-minfo__inner p:last-child {
		margin-bottom: 0;
	}

	/* "[-] info" reste visible en bas du volet, à la place de "[+] info" */
	.s00-minfo__inner p.s00-minfo__foot {
		position: sticky;
		bottom: 0;
		margin: 0;
		padding: 0 0 calc(var(--u) * 4);
		background: var(--paper);
	}

	/* Zone transparente au-dessus de l'image : un appui en dehors du volet le ferme */
	.s00-minfo-backdrop {
		position: fixed;
		inset: 0;
		z-index: 999;
		display: none;
		-webkit-tap-highlight-color: transparent;
	}

	body.s00-info-open .s00-minfo-backdrop {
		display: block;
	}

	body.s00-info-open {
		overflow: hidden;
	}

	.s00-page {
		padding: calc(var(--u) * 2 + var(--lh) + var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6);
	}
}

/* Connecté à WordPress, fenêtre étroite : la barre d'administration reste
   en haut au lieu de partir avec le défilement (sinon les images
   apparaissaient au-dessus du bandeau "Septembre00") */
@media screen and (max-width: 600px) {
	html #wpadminbar {
		position: fixed;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s00-index__media img,
	.s00-minfo,
	.s00-minfo.is-open,
	.s00-minfo__inner,
	.s00-minfo.is-open .s00-minfo__inner {
		transition: none;
	}
}