/*
Theme Name: Succulent Passé
Theme URI:
Author: Victor
Description: Thème sur-mesure pour Succulent Passé — site vitrine éditorial autour d'objets anciens, orienté vers une boutique eBay. Inspiration Art nouveau, cabinet de curiosités, carnet de collectionneur.
Version: 0.22.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: brocante-vitrine
*/

/* ==========================================================================
   1. Socle
   ========================================================================== */

:root {
	--sp-content: 680px;
	--sp-wide: 1140px;
	--sp-gutter: clamp(1.25rem, 5vw, 3.5rem);

	--sp-anthracite: #1e1c1a;
	--sp-encre: #3a3530;
	--sp-ivoire: #f7f2ea;
	--sp-parchemin: #ece2d3;
	--sp-rose: #dcb8ae;
	--sp-cuivre: #a9683a;

	--sp-trait: rgba(30, 28, 26, 0.12);
	--sp-trait-fort: rgba(30, 28, 26, 0.22);
	--sp-ombre: 0 18px 40px -24px rgba(30, 28, 26, 0.45);

	--sp-transition: 260ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--sp-ivoire);
	color: var(--sp-encre);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	text-decoration: none;
}

::selection {
	background: var(--sp-rose);
	color: var(--sp-anthracite);
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Légende éditoriale : italique serif, comme une note en marge de catalogue —
   remplace le motif "petites capitales espacées" utilisé partout. */
.sp-eyebrow,
.sp-card__kicker,
.trouvaille-card__date {
	font-family: Newsreader, Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
}

/* ==========================================================================
   2. Titres de section
   ========================================================================== */

.sp-section-title {
	text-align: center;
}

/* Dans une bande, l'espacement vient du rembourrage de la bande. */
.sp-band .sp-section-title {
	margin-top: 0;
	margin-bottom: 1.75rem;
}

/* ==========================================================================
   3. En-tête & navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem var(--sp-gutter);
	background: rgba(247, 242, 234, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--sp-trait);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
}

.site-branding img {
	height: 40px;
	width: auto;
	flex-shrink: 0;
}

.site-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.site-nav-toggle__bar {
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--sp-anthracite);
	transition: transform var(--sp-transition), opacity var(--sp-transition);
}

.site-nav-toggle.is-open .site-nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.site-nav-toggle.is-open .site-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.site-nav-toggle.is-open .site-nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.site-nav {
	display: none;
	width: 100%;
}

.site-nav.is-open {
	display: block;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav > ul {
	display: flex;
	flex-direction: column;
	padding: 1rem 0 0.5rem;
}

.site-nav a {
	position: relative;
	display: block;
	padding: 0.75rem 0;
	color: var(--sp-anthracite);
	transition: color var(--sp-transition);
}

.site-nav > ul > li > a {
	font-size: 0.95rem;
	white-space: nowrap;
}

.site-nav a:hover {
	color: var(--sp-cuivre);
}

.site-nav li {
	position: relative;
	border-bottom: 1px solid var(--sp-trait);
}

.site-nav li li {
	border-bottom: none;
	padding-left: 1rem;
}

.site-nav li li a {
	font-size: 0.95rem;
	font-family: Newsreader, Georgia, serif;
	color: var(--sp-encre);
}

.site-nav li ul {
	display: none;
	flex-direction: column;
	padding-bottom: 0.6rem;
}

.site-nav li.submenu-open > ul {
	display: flex;
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--sp-cuivre);
}

.submenu-toggle {
	position: absolute;
	top: 0.35rem;
	right: 0;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	font-size: 1.2rem;
	font-family: inherit;
	color: var(--sp-anthracite);
	cursor: pointer;
	line-height: 1;
}

@media (min-width: 900px) {
	.site-nav-toggle {
		display: none;
	}

	.site-nav {
		display: block;
		width: auto;
	}

	.site-nav > ul {
		flex-direction: row;
		align-items: center;
		gap: 1.6rem;
		padding: 0;
	}

	.site-nav li {
		border-bottom: none;
	}

	.site-nav > ul > li > a {
		padding: 0.35rem 0;
	}

	/* Soulignement qui se déploie depuis la gauche. */
	.site-nav > ul > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: var(--sp-cuivre);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--sp-transition);
	}

	.site-nav > ul > li > a:hover::after,
	.site-nav > ul > li.current-menu-item > a::after,
	.site-nav > ul > li.current_page_ancestor > a::after {
		transform: scaleX(1);
	}

	.site-nav li ul {
		position: absolute;
		top: calc(100% + 0.6rem);
		left: -1.25rem;
		min-width: 250px;
		padding: 0.9rem 1.25rem;
		background: var(--sp-ivoire);
		border: 1px solid var(--sp-trait);
		box-shadow: var(--sp-ombre);
		z-index: 20;
	}

	/* Pont invisible entre le lien et le sous-menu : sans lui, la souris
	   traverse une zone vide en descendant (l'espace de 0.6rem ci-dessus)
	   qui n'appartient ni au lien ni au menu, ce qui coupe le survol avant
	   d'atteindre le menu. Mêmes coordonnées que le sous-menu, mais invisible
	   — rien ne change visuellement, seule la zone de survol s'agrandit.
	   Uniquement sur les éléments qui ont réellement un sous-menu (classe posée
	   par WordPress) : posé sur tous les <li> sans distinction, ce pont de
	   250px de large débordait invisiblement à droite du dernier lien du menu
	   (Contact), provoquant une barre de défilement horizontale sur tout le
	   site alors que rien ne dépassait visuellement. */
	.site-nav li.menu-item-has-children::before {
		content: "";
		position: absolute;
		top: 100%;
		left: -1.25rem;
		min-width: 250px;
		height: 0.6rem;
	}

	.site-nav li li {
		padding-left: 0;
	}

	.site-nav li li a {
		padding: 0.4rem 0;
	}

	.site-nav li:hover > ul,
	.site-nav li:focus-within > ul,
	.site-nav li.submenu-open > ul {
		display: flex;
	}

	.submenu-toggle {
		display: none;
	}
}

/* ==========================================================================
   4. Gabarit de page & largeurs
   ========================================================================== */

.site-main {
	display: block;
}

.page-content {
	padding: 0 var(--sp-gutter) 4rem;
}

.page-content__header {
	max-width: var(--sp-content);
	margin: 0 auto;
	padding: 4.5rem 0 0;
	text-align: center;
}

.page-content__header h1 {
	margin: 0;
}

.page-content__image {
	max-width: var(--sp-wide);
	margin: 2.5rem auto;
}

.page-content__body > * {
	max-width: var(--sp-content);
	margin-left: auto;
	margin-right: auto;
}

.page-content__body > .alignwide {
	max-width: var(--sp-wide);
}

/* Les blocs pleine largeur s'échappent de la gouttière du gabarit. */
.page-content__body > .alignfull {
	max-width: none;
	width: calc(100% + var(--sp-gutter) * 2);
	margin-left: calc(var(--sp-gutter) * -1);
	margin-right: calc(var(--sp-gutter) * -1);
}

.page-content__body {
	padding-top: 2.5rem;
}

.sp-bouton-rapide {
	margin-bottom: 2.5rem;
}

/* Sur l'accueil, le hero remonte contre l'en-tête. */
.home .page-content {
	padding-top: 0;
}

.home .page-content__body {
	padding-top: 0;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.sp-hero {
	position: relative;
	padding: clamp(4.5rem, 12vw, 8.5rem) var(--sp-gutter);
	background-color: var(--sp-anthracite);
	background-size: cover;
	background-position: center;
	color: var(--sp-ivoire);
	text-align: center;
	overflow: hidden;
}

/* Voile de lisibilité, utile dès qu'une photo de fond sera ajoutée. */
.sp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(30, 28, 26, 0.55), rgba(30, 28, 26, 0.8));
	pointer-events: none;
}

.sp-hero > * {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.sp-hero .sp-eyebrow {
	color: var(--sp-rose);
	margin-bottom: 1.5rem;
}

.sp-hero h1,
.sp-hero h2 {
	color: var(--sp-ivoire);
	font-weight: 300;
	/* «auto» sur les côtés : sans cela le raccourci écraserait le centrage. */
	margin: 0 auto 1.5rem;
}

.sp-hero p {
	color: rgba(247, 242, 234, 0.92);
}

.sp-hero .sp-lead {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.15rem;
	line-height: 1.7;
}

/* Sur fond sombre, le bouton principal s'inverse pour rester visible. */
.sp-hero .wp-block-button:not(.is-style-contour):not(.is-style-ebay) > .wp-block-button__link,
.sp-band--sombre .wp-block-button:not(.is-style-contour):not(.is-style-ebay) > .wp-block-button__link {
	background: var(--sp-ivoire);
	color: var(--sp-anthracite);
}

.sp-hero .wp-block-button:not(.is-style-contour):not(.is-style-ebay) > .wp-block-button__link:hover,
.sp-band--sombre .wp-block-button:not(.is-style-contour):not(.is-style-ebay) > .wp-block-button__link:hover {
	background: var(--sp-cuivre);
	color: var(--sp-ivoire);
}

.sp-hero .wp-block-buttons {
	margin-top: 2.5rem;
}

/* --- Hero plein écran : ce que l'on voit en ouvrant le site ------------- */

.sp-hero--plein {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* La hauteur de l'en-tête est mesurée par le script ; la valeur de repli
	   sert le temps du chargement et si le script ne tourne pas. */
	min-height: calc(100svh - var(--sp-hauteur-entete, 4.6rem));
	/* Le centrage vertical fait le travail du rembourrage haut : le conserver
	   ferait dépasser le hero sous la ligne de flottaison. */
	padding-top: clamp(2rem, 6vh, 4rem);
	/* Réserve la place de l'indice de défilement, qui est en position absolue :
	   sans ce dégagement le texte centré vient buter dessus. */
	padding-bottom: clamp(8rem, 15vh, 11.5rem);
}

/* Écran peu haut (portable 13", fenêtre réduite) : on resserre plutôt que de
   laisser le hero déborder largement sous la ligne de flottaison. */
@media (max-height: 760px) {
	.sp-hero--plein h1 {
		font-size: clamp(2.1rem, 6.5vh, 3.1rem);
	}

	.sp-hero--plein h1::after {
		margin-top: 1.1rem;
	}

	.sp-hero--plein .wp-block-buttons {
		margin-top: 1.75rem;
	}

	.sp-hero--plein {
		padding-bottom: clamp(6rem, 13vh, 8rem);
	}
}

/* Halo cuivré qui respire lentement derrière le titre : le fond n'est plus
   un aplat noir mort, sans pour autant distraire de la lecture. */
.sp-hero--plein::before {
	background:
		radial-gradient(115% 75% at 50% 8%, rgba(169, 104, 58, 0.32), transparent 62%),
		radial-gradient(90% 60% at 82% 96%, rgba(220, 184, 174, 0.16), transparent 60%),
		linear-gradient(160deg, rgba(30, 28, 26, 0.5), rgba(30, 28, 26, 0.88));
	transform-origin: 50% 20%;
	animation: sp-halo 16s ease-in-out infinite alternate;
}

@keyframes sp-halo {
	from {
		transform: scale(1);
		opacity: 0.92;
	}
	to {
		transform: scale(1.14) translateY(-2.5%);
		opacity: 1;
	}
}

/* Entrée en cascade : le regard suit l'ordre de lecture au lieu de recevoir
   tout le bloc d'un coup. */
.sp-hero--plein > * {
	animation: sp-entree 1s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}

.sp-hero--plein > *:nth-child(1) {
	animation-delay: 0.15s;
}

.sp-hero--plein > *:nth-child(2) {
	animation-delay: 0.3s;
}

.sp-hero--plein > *:nth-child(3) {
	animation-delay: 0.5s;
}

.sp-hero--plein > *:nth-child(4) {
	animation-delay: 0.7s;
}

@keyframes sp-entree {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Le titre gagne un filet qui se déploie sous lui, comme un trait de plume. */
.sp-hero--plein h1::after {
	content: "";
	display: block;
	width: 120px;
	height: 1px;
	margin: 1.75rem auto 0;
	background: var(--sp-rose);
	transform: scaleX(0);
	transform-origin: center;
	animation: sp-trait 1.4s cubic-bezier(0.2, 0.65, 0.3, 1) 0.75s both;
}

@keyframes sp-trait {
	to {
		transform: scaleX(1);
	}
}

/* Indice de défilement : un mot et un trait qui descend en boucle. */
.sp-hero__cue {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vh, 2.75rem);
	transform: translateX(-50%);
	margin: 0 !important;
	color: rgba(247, 242, 234, 0.6) !important;
	font-family: Newsreader, Georgia, serif;
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
	/* Anime son propre trajet plutôt que de réutiliser sp-entree : une
	   animation qui cible "transform" remplace entièrement sa valeur statique
	   pendant toute sa durée (et après, via fill-mode both), donc réutiliser
	   sp-entree ici effaçait le translateX(-50%) qui centre l'élément. */
	animation: sp-entree-centre 1s cubic-bezier(0.2, 0.65, 0.3, 1) 1.1s both;
}

@keyframes sp-entree-centre {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(26px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%);
	}
}

.sp-hero__cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 40px;
	margin: 0.75rem auto 0;
	background: linear-gradient(to bottom, var(--sp-rose), transparent);
	transform-origin: top;
	animation: sp-indice 2.6s ease-in-out infinite;
}

@keyframes sp-indice {
	0%,
	100% {
		opacity: 0.2;
		transform: scaleY(0.5);
	}
	50% {
		opacity: 0.95;
		transform: scaleY(1);
	}
}

/* ==========================================================================
   6. Bandes de section
   ========================================================================== */

.sp-band {
	padding: clamp(3.5rem, 8vw, 6rem) var(--sp-gutter);
}

.sp-band > * {
	max-width: var(--sp-wide);
	margin-left: auto;
	margin-right: auto;
}

.sp-band--parchemin {
	background: var(--sp-parchemin);
}

.sp-band--sombre {
	background: var(--sp-anthracite);
	color: rgba(247, 242, 234, 0.85);
	text-align: center;
}

.sp-band--sombre h2,
.sp-band--sombre h3 {
	color: var(--sp-ivoire);
	font-weight: 300;
}

.sp-band--sombre .sp-eyebrow {
	color: var(--sp-rose);
}

.sp-band--etroit > * {
	max-width: var(--sp-content);
}

/* Bande texte + image côte à côte (ex. « Derrière chaque objet, une
   découverte » sur l'accueil). Texte à gauche, image à droite ; empilés sur
   mobile, image en second pour ne pas repousser le texte plus bas que le
   pouce ne défile en un geste. */
.sp-decouverte {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.sp-decouverte {
		grid-template-columns: 1fr 1fr;
	}
}

.sp-decouverte__texte {
	text-align: left;
}

.sp-decouverte__texte .sp-section-title {
	text-align: left;
}

.sp-decouverte__image {
	background: var(--sp-parchemin);
	overflow: hidden;
}

.sp-decouverte__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ==========================================================================
   7. Cartes
   ========================================================================== */

.sp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin-top: 3rem;
}

/* Grille en deux colonnes : évite qu'une quatrième carte reste orpheline
   sur les très grands écrans. */
@media (min-width: 900px) {
	.sp-grid--duo {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* La gouttière de la grille remplace les marges verticales des blocs. */
.sp-grid > *,
.sp-card__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Paragraphe d'introduction sous un titre de section. */
.sp-intro-section {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	color: rgba(58, 53, 48, 0.85);
}

.sp-band--sombre .sp-intro-section {
	color: rgba(247, 242, 234, 0.8);
}

.sp-lien-wrap {
	margin-top: 2.25rem;
}

.sp-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-ivoire);
	border: 1px solid var(--sp-trait);
	transition: border-color var(--sp-transition);
}

.sp-band--parchemin .sp-card {
	background: var(--sp-ivoire);
}

.sp-card:hover {
	border-color: var(--sp-cuivre);
}

/* Carte sans illustration : un filet cuivre remplace l'image. */
.sp-card--texte {
	border-top: 2px solid var(--sp-cuivre);
}

.sp-card figure,
.sp-card .wp-block-image {
	margin: 0;
	background: var(--sp-parchemin);
	overflow: hidden;
}

.sp-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* Les illustrations au trait respirent mieux en «contain». */
.sp-card img[src$=".svg"] {
	object-fit: contain;
	padding: 0.5rem;
}

.sp-card:hover img {
	transform: scale(1.035);
}

.sp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	flex-grow: 1;
}

.sp-card__kicker {
	color: var(--sp-cuivre);
	margin: 0;
}

.sp-card h3,
.sp-card h2 {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.25;
}

.sp-card p {
	margin: 0;
	font-size: 0.97rem;
	color: rgba(58, 53, 48, 0.85);
}

/* Lien fléché en pied de carte. */
.sp-card__link-wrap {
	margin-top: auto !important;
	padding-top: 0.5rem;
}

.sp-card__link,
.sp-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sp-anthracite);
	font-size: 0.92rem;
	font-weight: 600;
	transition: color var(--sp-transition);
}

.sp-card__link::after,
.sp-lien-fleche::after {
	content: "→";
}

.sp-card__link:hover,
.sp-lien-fleche:hover {
	color: var(--sp-cuivre);
}

/* Un <button> qui doit se fondre parmi les liens fléchés du site (ex : rouvrir
   le bandeau cookies depuis la page qui l'explique) : on efface le chrome par
   défaut du bouton pour ne garder que le style du lien. */
button.sp-lien-fleche {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

/* ==========================================================================
   8. Boutons & appels à l'action
   ========================================================================== */

.wp-block-button__link {
	transition: background-color var(--sp-transition), color var(--sp-transition),
		border-color var(--sp-transition);
}

/* Variante contour, pour le second bouton d'un duo. */
.is-style-contour .wp-block-button__link,
.wp-block-button.is-style-contour > .wp-block-button__link {
	background: transparent !important;
	color: currentColor !important;
	border: 1px solid currentColor;
}

.is-style-contour .wp-block-button__link:hover,
.wp-block-button.is-style-contour > .wp-block-button__link:hover {
	background: var(--sp-cuivre) !important;
	border-color: var(--sp-cuivre);
	color: var(--sp-ivoire) !important;
}

/* Variante eBay : cuivre, avec flèche animée. */
.is-style-ebay .wp-block-button__link,
.wp-block-button.is-style-ebay > .wp-block-button__link,
.trouvaille-card__ebay-button,
.sp-bouton-ebay {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--sp-cuivre) !important;
	color: var(--sp-ivoire) !important;
	padding: 0.85rem 1.7rem;
	font-family: "Public Sans", "Segoe UI", sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	border: none;
	border-radius: 3px;
}

.is-style-ebay .wp-block-button__link::after,
.wp-block-button.is-style-ebay > .wp-block-button__link::after,
.trouvaille-card__ebay-button::after,
.sp-bouton-ebay::after {
	content: "↗";
	font-size: 0.95em;
}

.is-style-ebay .wp-block-button__link:hover,
.wp-block-button.is-style-ebay > .wp-block-button__link:hover,
.trouvaille-card__ebay-button:hover,
.sp-bouton-ebay:hover {
	background: var(--sp-anthracite) !important;
}

/* ==========================================================================
   9. Texte long : pages éditoriales
   ========================================================================== */

.page-content__body > h2 {
	margin-top: 3.5rem;
	margin-bottom: 1.25rem;
}

/* Filet discret au-dessus des titres de niveau 2 du corps de l'article
   (les titres de section et les titres de cartes en sont exclus). */
.page-content__body > h2:not(.sp-section-title)::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin-bottom: 1.4rem;
	background: var(--sp-cuivre);
	opacity: 0.55;
}

.page-content__body h3 {
	margin-top: 2.5rem;
	margin-bottom: 0.9rem;
	font-weight: 600;
}

.page-content__body ul {
	list-style: none;
	padding-left: 1.5rem;
}

.page-content__body ul li {
	position: relative;
	margin-bottom: 0.6rem;
}

/* Puce losange, rappel du motif de l'ornement. */
.page-content__body ul li::before {
	content: "";
	position: absolute;
	left: -1.35rem;
	top: 0.72em;
	width: 5px;
	height: 5px;
	background: var(--sp-cuivre);
	transform: rotate(45deg);
	opacity: 0.75;
}

.page-content__body blockquote {
	margin: 2.5rem 0;
	padding-left: 1.75rem;
	border-left: 2px solid var(--sp-rose);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--sp-anthracite);
}

/* Chapô : premier paragraphe des pages éditoriales. */
.sp-focus .page-content__body > p:first-of-type {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--sp-anthracite);
}

/* Lettrine, pour l'esprit «carnet de collectionneur». */
.sp-focus .page-content__body > p:first-of-type::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	font-family: Newsreader, Georgia, serif;
	font-size: 3.9em;
	font-weight: 400;
	line-height: 0.78;
	color: var(--sp-cuivre);
}

/* Mises en forme disponibles depuis le formulaire « Ajouter un objet »
   (menu Format de l'éditeur). Mêmes couleurs et même esprit que les pages
   « Focus sur… », pour rester cohérent même dans un texte court. */
.sp-lettrine {
	float: left;
	margin: 0.08em 0.12em 0 0;
	font-family: Newsreader, Georgia, serif;
	font-size: 3.9em;
	font-weight: 400;
	line-height: 0.78;
	color: var(--sp-cuivre);
}

/* Barre de séparation insérée depuis l'éditeur (bouton « ligne horizontale »),
   même filet discret que celui affiché au-dessus des titres des pages Focus.
   Le sélecteur .sp-separateur (ancienne version, avant le passage au bouton
   natif) reste ici pour que les descriptions déjà tapées avec l'ancien réglage
   s'affichent correctement sans avoir à être retouchées. */
.page-content__body hr,
.page-content__body p.sp-separateur {
	width: 40px;
	height: 1px;
	margin: 2.5rem auto;
	border: none;
	background: var(--sp-cuivre);
	opacity: 0.55;
}

/* ==========================================================================
   10. Trouvailles
   ========================================================================== */

.trouvailles-archive {
	padding: 0 var(--sp-gutter) 5rem;
}

.archive-header {
	max-width: var(--sp-content);
	margin: 0 auto 1rem;
	padding-top: 4.5rem;
	text-align: center;
}

.archive-header h1 {
	margin: 0;
}

.archive-header p {
	margin-top: 1rem;
	color: rgba(58, 53, 48, 0.8);
}

.trouvailles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	max-width: var(--sp-wide);
	margin: 3rem auto 0;
}

.trouvaille-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sp-ivoire);
	border: 1px solid var(--sp-trait);
	transition: border-color var(--sp-transition);
}

/* Rend toute la carte cliquable (image, date, texte, espace vide compris) en
   étirant le lien du titre par-dessus la carte entière. Le bouton eBay reste
   cliquable indépendamment grâce à son propre z-index, au-dessus du lien
   étiré. */
.trouvaille-card__title .trouvaille-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.trouvaille-card:hover {
	border-color: var(--sp-cuivre);
}

.trouvaille-card__link {
	color: inherit;
	display: block;
}

.trouvaille-card__image {
	background: var(--sp-parchemin);
	overflow: hidden;
}

.trouvaille-card__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.trouvaille-card:hover .trouvaille-card__image img {
	transform: scale(1.035);
}

.trouvaille-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.6rem;
	flex-grow: 1;
}

.trouvaille-card__date {
	color: var(--sp-cuivre);
}

.trouvaille-card__title {
	margin: 0;
	font-family: Newsreader, Georgia, serif;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--sp-anthracite);
}

.trouvaille-card__excerpt {
	font-size: 0.95rem;
	color: rgba(58, 53, 48, 0.85);
}

.trouvaille-card__excerpt p {
	margin: 0;
}

.trouvaille-card__ebay-button {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
}

.trouvailles-vide {
	max-width: var(--sp-content);
	margin: 3rem auto;
	padding: 3rem;
	text-align: center;
	background: var(--sp-parchemin);
	color: rgba(58, 53, 48, 0.8);
}

.trouvailles-pagination {
	max-width: var(--sp-wide);
	margin: 3rem auto 0;
	text-align: center;
}

.trouvailles-pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	color: var(--sp-encre);
}

.trouvailles-pagination .page-numbers.current {
	color: var(--sp-cuivre);
	border-bottom: 1px solid var(--sp-cuivre);
}

/* Fiche produit */

.trouvaille-single {
	padding: 0 var(--sp-gutter) 5rem;
}

.trouvaille-produit {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	column-gap: clamp(2rem, 5vw, 4rem);
	row-gap: 2.5rem;
	max-width: var(--sp-wide);
	margin: 0 auto;
	padding-top: 3.5rem;
}

/* Colonne de gauche : grande image + vignettes. */
.trouvaille-produit__galerie {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.trouvaille-produit__image-principale {
	position: relative;
	background: var(--sp-parchemin);
	overflow: hidden;
}

.trouvaille-produit__image-principale img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.trouvaille-produit__fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 28, 26, 0.55);
	color: var(--sp-ivoire);
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--sp-transition), background-color var(--sp-transition);
}

.trouvaille-produit__image-principale:hover .trouvaille-produit__fleche,
.trouvaille-produit__image-principale:focus-within .trouvaille-produit__fleche {
	opacity: 1;
}

.trouvaille-produit__fleche:hover {
	background: var(--sp-cuivre);
}

.trouvaille-produit__fleche--gauche {
	left: 0.75rem;
}

.trouvaille-produit__fleche--droite {
	right: 0.75rem;
}

.trouvaille-produit__vignettes {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Cadre actif : un élément à part qui glisse d'une vignette à l'autre,
   plutôt qu'une bordure qui s'allume/s'éteint sur chaque vignette. */
.trouvaille-produit__vignette-indicateur {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 64px;
	height: 64px;
	border: 2px solid var(--sp-cuivre);
	box-sizing: border-box;
	pointer-events: none;
	transition: transform 320ms cubic-bezier(0.3, 0.7, 0.3, 1);
	will-change: transform;
}

.trouvaille-produit__vignette {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	border: none;
	background: var(--sp-parchemin);
	cursor: pointer;
	opacity: 0.65;
	transition: opacity var(--sp-transition);
}

.trouvaille-produit__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trouvaille-produit__vignette:hover {
	opacity: 1;
}

.trouvaille-produit__vignette.is-active {
	opacity: 1;
}

/* Sans photo, une seule colonne : le texte occupe toute la fiche. */
.trouvaille-produit--sans-image {
	grid-template-columns: 1fr;
}

.trouvaille-produit--sans-image .trouvaille-produit__infos {
	max-width: var(--sp-content);
	margin: 0 auto;
	width: 100%;
}

/* Colonne de droite : informations. */
.trouvaille-produit__infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.trouvaille-produit__eyebrow {
	margin: 0;
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
}

.trouvaille-produit__infos h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 3vw, 2.2rem);
}

.trouvaille-produit__caracteristiques {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0.5rem 0 2rem;
	padding: 1.25rem 1.5rem;
	width: 100%;
	background: var(--sp-parchemin);
}

.trouvaille-produit__caracteristiques > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.92rem;
}

.trouvaille-produit__caracteristiques dt {
	color: rgba(58, 53, 48, 0.7);
}

.trouvaille-produit__caracteristiques dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

/* Description : pleine largeur, sous la galerie et les infos. */
.trouvaille-produit__description {
	grid-column: 1 / -1;
	max-width: var(--sp-content);
	margin: 1rem auto 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--sp-trait);
}

@media (max-width: 782px) {
	.trouvaille-produit {
		grid-template-columns: 1fr;
	}

	.trouvaille-produit__description {
		margin-top: 0;
	}
}

/* ==========================================================================
   9 ter. Articles « Focus sur… »
   ========================================================================== */

/* --- En-tête d'article ------------------------------------------------- */

.focus-entete {
	position: relative;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	/* S'échappe de la gouttière du gabarit pour aller bord à bord. */
	width: calc(100% + var(--sp-gutter) * 2);
	margin-left: calc(var(--sp-gutter) * -1);
	margin-right: calc(var(--sp-gutter) * -1);
	padding: clamp(3.5rem, 8vh, 6rem) var(--sp-gutter);
	background: var(--sp-anthracite);
	color: rgba(247, 242, 234, 0.85);
	overflow: hidden;
}

.focus-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 120% at 78% 50%, rgba(169, 104, 58, 0.28), transparent 62%);
	pointer-events: none;
}

.focus-entete__texte {
	position: relative;
	z-index: 1;
	max-width: var(--sp-content);
	margin-left: auto;
}

.focus-entete__serie {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1rem;
	font-family: Newsreader, Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
}

.focus-entete__categorie {
	color: var(--sp-rose);
}

.focus-entete__rang {
	padding-left: 0.7rem;
	border-left: 1px solid rgba(247, 242, 234, 0.25);
	color: rgba(247, 242, 234, 0.6);
}

.focus-entete h1 {
	margin: 0;
	color: var(--sp-ivoire);
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
}

.focus-entete__meta {
	margin: 1.5rem 0 0;
	color: rgba(247, 242, 234, 0.55);
	font-size: 0.9rem;
}

.focus-entete__illustration {
	position: relative;
	z-index: 1;
	justify-self: center;
}

.focus-entete__illustration img {
	width: min(280px, 100%);
	opacity: 0.55;
	/* Les dessins au trait sont sombres : on les inverse pour qu'ils se lisent
	   sur l'anthracite. Une vraie photo mise en avant reste, elle, intacte. */
	filter: invert(1) sepia(0.35) saturate(0.6);
}

.focus-entete__illustration img:not([src$=".svg"]) {
	filter: none;
	opacity: 0.85;
}

/* --- Corps : sommaire + texte ------------------------------------------ */

.focus-corps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-top: clamp(2rem, 4vh, 3rem);
}

.focus-corps .page-content__body {
	padding-top: 0;
	min-width: 0;
}

/* Le premier titre n'a pas à se décoller : l'espace vient déjà de l'en-tête et
   du sommaire au-dessus. */
.focus-corps .page-content__body > *:first-child {
	margin-top: 0;
}

@media (min-width: 1081px) {
	.focus-corps {
		/* Le texte garde sa largeur de lecture ; le sommaire occupe la marge de
		   gauche, qui restait vide. */
		grid-template-columns: 250px minmax(0, var(--sp-content)) 250px;
		justify-content: center;
		gap: clamp(2rem, 4vw, 3.5rem);
	}

	.focus-corps .page-content__body {
		grid-column: 2;
	}

	.focus-corps .page-content__body > * {
		margin-left: 0;
		margin-right: 0;
	}

	.focus-sommaire {
		grid-column: 1;
		grid-row: 1;
	}
}

/* --- Sommaire ---------------------------------------------------------- */

.focus-sommaire {
	min-width: 0;
}

.focus-sommaire__boite {
	position: sticky;
	top: calc(var(--sp-hauteur-entete, 4.6rem) + 1.5rem);
	padding: 1.1rem 1.25rem;
	background: var(--sp-parchemin);
	border-left: 2px solid var(--sp-cuivre);
}

.focus-sommaire__titre {
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1rem;
	font-style: italic;
	cursor: pointer;
	list-style: none;
}

/* Le chevron de <details> est remplacé par un signe discret, cohérent. */
.focus-sommaire__titre::-webkit-details-marker {
	display: none;
}

.focus-sommaire__titre::after {
	content: "+";
	float: right;
	color: var(--sp-cuivre);
	font-style: normal;
}

.focus-sommaire__boite[open] .focus-sommaire__titre::after {
	content: "–";
}

.focus-sommaire__liste {
	max-height: min(58vh, 520px);
	margin: 1rem 0 0;
	padding: 0 0 0 1.4rem;
	overflow-y: auto;
	counter-reset: sommaire;
	scrollbar-width: thin;
	scrollbar-color: var(--sp-trait-fort) transparent;
}

.focus-sommaire__liste::-webkit-scrollbar {
	width: 4px;
}

.focus-sommaire__liste::-webkit-scrollbar-thumb {
	background: var(--sp-trait-fort);
}

.focus-sommaire__liste li {
	margin-bottom: 0.5rem;
	line-height: 1.35;
}

.focus-sommaire__liste a {
	display: block;
	color: rgba(58, 53, 48, 0.78);
	font-size: 0.9rem;
	transition: color var(--sp-transition);
}

.focus-sommaire__liste a:hover {
	color: var(--sp-cuivre);
}

.focus-sommaire__liste a.is-active {
	color: var(--sp-anthracite);
	font-weight: 600;
}

/* --- Confort de lecture du texte long ---------------------------------- */

/* Le titre visé par une ancre ne doit pas se retrouver sous l'en-tête collant. */
.focus-article .page-content__body h2 {
	scroll-margin-top: calc(var(--sp-hauteur-entete, 4.6rem) + 1.5rem);
}

.focus-article .page-content__body h2:focus {
	outline: none;
}

/* Les longues énumérations d'indices passent sur deux colonnes : une liste de
   onze puces à la file casse le rythme de lecture. */
@media (min-width: 700px) {
	.focus-article .page-content__body ul:has(li:nth-child(6)) {
		columns: 2;
		column-gap: 2.5rem;
	}

	.focus-article .page-content__body ul:has(li:nth-child(6)) li {
		break-inside: avoid;
	}
}

@media (max-width: 1080px) {
	.focus-entete {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.focus-entete__texte {
		margin-left: auto;
		margin-right: auto;
	}

	.focus-entete__serie {
		justify-content: center;
	}

	.focus-entete__illustration {
		order: -1;
	}

	.focus-entete__illustration img {
		width: min(180px, 60%);
		margin: 0 auto;
	}

	.focus-sommaire__boite {
		position: static;
	}
}

/* --- Accordéon (catégories de la Boutique eBay) ------------------------ */

.sp-accordeon {
	display: flex;
	flex-direction: column;
	max-width: var(--sp-content);
	margin: 0 auto;
}

.sp-accordeon__item {
	border-bottom: 1px solid var(--sp-trait-fort);
}

.sp-accordeon__item:first-child {
	border-top: 1px solid var(--sp-trait-fort);
}

.sp-accordeon__titre {
	position: relative;
	display: block;
	padding: 1.5rem 2.25rem 1.5rem 0;
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
	transition: color var(--sp-transition);
}

.sp-accordeon__titre::-webkit-details-marker {
	display: none;
}

.sp-accordeon__titre::after {
	content: "+";
	position: absolute;
	top: 1.4rem;
	right: 0.25rem;
	color: var(--sp-cuivre);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
}

.sp-accordeon__item[open] .sp-accordeon__titre::after {
	content: "–";
}

.sp-accordeon__titre:hover {
	color: var(--sp-cuivre);
}

.sp-accordeon__corps {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 620px;
	padding: 0 2.25rem 2rem 0;
	color: rgba(58, 53, 48, 0.88);
	font-size: 0.98rem;
	line-height: 1.7;
}

.sp-accordeon__corps p {
	margin: 0;
}

.sp-accordeon__lien {
	margin-top: 0.25rem;
}

/* --- Tuiles de la page « Focus sur… » ---------------------------------- */

.focus-grille {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-width: var(--sp-wide) !important;
	margin-top: 3rem;
}

.focus-tuile {
	display: grid;
	grid-template-columns: minmax(200px, 340px) 1fr;
	align-items: stretch;
	background: var(--sp-ivoire);
	border: 1px solid var(--sp-trait);
	transition: border-color var(--sp-transition);
}

.focus-tuile:hover {
	border-color: var(--sp-cuivre);
}

/* Une tuile sur deux inverse image et texte : le regard zigzague au lieu de
   descendre une colonne uniforme. Le gabarit des colonnes est permuté en même
   temps que l'ordre — sinon le texte hériterait de la colonne étroite prévue
   pour l'image. */
.focus-tuile:nth-child(even) {
	grid-template-columns: 1fr minmax(200px, 340px);
}

.focus-tuile:nth-child(even) .focus-tuile__image {
	order: 2;
}

.focus-tuile__image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--sp-parchemin);
	overflow: hidden;
}

.focus-tuile__image img {
	width: 100%;
	max-height: 240px;
	object-fit: contain;
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.focus-tuile:hover .focus-tuile__image img {
	transform: scale(1.04);
}

.focus-tuile__corps {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.focus-tuile__numero {
	margin: 0;
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.6rem;
	font-style: italic;
	line-height: 1;
	opacity: 0.75;
}

.focus-tuile__titre {
	margin: 0;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.focus-tuile__titre a {
	color: var(--sp-anthracite);
	transition: color var(--sp-transition);
}

.focus-tuile__titre a:hover {
	color: var(--sp-cuivre);
}

.focus-tuile__resume {
	margin: 0;
	color: rgba(58, 53, 48, 0.85);
	font-size: 0.97rem;
	line-height: 1.65;
}

.focus-tuile__pied {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
}

.focus-tuile__duree {
	color: rgba(58, 53, 48, 0.6);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.88rem;
	font-style: italic;
}

@media (max-width: 720px) {
	.focus-tuile {
		grid-template-columns: 1fr;
	}

	.focus-tuile:nth-child(even) .focus-tuile__image {
		order: 0;
	}

	.focus-tuile__image img {
		max-height: 170px;
	}
}

/* ==========================================================================
   9 bis. Vitrine verticale de la page d'accueil
   ========================================================================== */

.sp-vitrine {
	max-width: var(--sp-wide);
	margin: 0 auto;
}

.sp-vitrine__corps {
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

/* --- Colonne de gauche : la liste défilante ---------------------------- */

.sp-vitrine__colonne {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	/* Sans cela, un élément de grille refuse de descendre sous la largeur de son
	   contenu : le rail de vignettes pousserait toute la page en largeur. */
	min-width: 0;
	/* La liste suit le regard pendant qu'on lit la fiche de droite. */
	position: sticky;
	top: calc(var(--sp-hauteur-entete, 4.6rem) + 1.5rem);
}

.sp-vitrine__consigne,
.sp-vitrine__compteur {
	margin: 0;
	color: rgba(58, 53, 48, 0.6);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.85rem;
	font-style: italic;
}

.sp-vitrine__compteur {
	text-align: right;
}

.sp-vitrine__liste {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	max-height: min(60vh, 460px);
	padding-right: 0.5rem;
	overflow-y: auto;
	scroll-snap-type: y proximity;
	/* Volontairement sans overscroll-behavior: contain — arrivé au bout de la
	   liste, la molette doit rendre la main à la page plutôt que de bloquer
	   le visiteur sous le curseur. */
	scrollbar-width: thin;
	scrollbar-color: var(--sp-trait-fort) transparent;
}

.sp-vitrine__liste::-webkit-scrollbar {
	width: 4px;
}

.sp-vitrine__liste::-webkit-scrollbar-thumb {
	background: var(--sp-trait-fort);
}

.sp-vitrine__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-shrink: 0;
	width: 100%;
	padding: 0.6rem;
	background: transparent;
	border: none;
	border-left: 2px solid transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	scroll-snap-align: start;
	transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.sp-vitrine__item:hover,
.sp-vitrine__item.is-active {
	background: var(--sp-parchemin);
	border-left-color: var(--sp-cuivre);
}

.sp-vitrine__vignette {
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	background: var(--sp-parchemin);
	overflow: hidden;
}

.sp-vitrine__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.45);
	transition: filter var(--sp-transition), transform var(--sp-transition);
}

.sp-vitrine__item:hover .sp-vitrine__vignette img,
.sp-vitrine__item.is-active .sp-vitrine__vignette img {
	filter: none;
	transform: scale(1.06);
}

.sp-vitrine__item-texte {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sp-vitrine__item-annee {
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.82rem;
	font-style: italic;
}

.sp-vitrine__item-titre {
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.05rem;
	line-height: 1.25;
}

/* --- Colonne de droite : la fiche en grand ----------------------------- */

/* Toutes les fiches partagent la même cellule : la scène prend la hauteur de
   la plus haute, donc le fondu ne déplace jamais le contenu qui suit. */
.sp-vitrine__scene {
	display: grid;
	min-width: 0;
}

.sp-vitrine__fiche {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.6, 0.3, 1),
		visibility 420ms;
}

.sp-vitrine__fiche.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sp-vitrine__image {
	display: block;
	background: var(--sp-parchemin);
	overflow: hidden;
}

.sp-vitrine__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.sp-vitrine__image:hover img {
	transform: scale(1.04);
}

.sp-vitrine__infos {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.sp-vitrine__kicker {
	margin: 0;
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.92rem;
	font-style: italic;
	font-weight: 500;
}

.sp-vitrine__titre {
	margin: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.15;
}

.sp-vitrine__titre a {
	color: var(--sp-anthracite);
	transition: color var(--sp-transition);
}

.sp-vitrine__titre a:hover {
	color: var(--sp-cuivre);
}

.sp-vitrine__caracteristiques {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.25rem 0;
	padding: 1rem 1.25rem;
	background: var(--sp-parchemin);
}

.sp-vitrine__caracteristiques > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.9rem;
}

.sp-vitrine__caracteristiques dt {
	color: rgba(58, 53, 48, 0.7);
}

.sp-vitrine__caracteristiques dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.sp-vitrine__extrait {
	color: rgba(58, 53, 48, 0.88);
	font-size: 0.97rem;
	line-height: 1.65;
}

.sp-vitrine__extrait p {
	margin: 0 0 0.75rem;
}

.sp-vitrine__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: auto;
	padding-top: 0.75rem;
}

/* --- Adaptations ------------------------------------------------------- */

@media (max-width: 1000px) {
	.sp-vitrine__fiche {
		grid-template-columns: 1fr;
	}

	.sp-vitrine__image img {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 782px) {
	.sp-vitrine__corps {
		grid-template-columns: 1fr;
	}

	/* Sur mobile la liste passe en rail horizontal : le pouce fait défiler
	   latéralement, et la fiche reste entière sous les yeux. */
	.sp-vitrine__colonne {
		position: static;
	}

	.sp-vitrine__liste {
		flex-direction: row;
		max-height: none;
		padding: 0 0 0.75rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
	}

	.sp-vitrine__item {
		flex-direction: column;
		align-items: flex-start;
		width: auto;
		min-width: 132px;
		border-left: none;
		border-bottom: 2px solid transparent;
	}

	.sp-vitrine__item:hover,
	.sp-vitrine__item.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--sp-cuivre);
	}

	.sp-vitrine__vignette {
		width: 120px;
		height: 90px;
	}

	.sp-vitrine__item-titre {
		font-size: 0.95rem;
	}

	.sp-vitrine__compteur {
		text-align: left;
	}
}

/* ==========================================================================
   10 bis. Le fil rouge : navigation entre les contenus
   ========================================================================== */

/* Rappel de l'histoire dont l'objet est issu, sur la fiche produit.
   Placé avant le bouton eBay : on propose de lire avant d'acheter. */
.sp-objet-focus {
	display: block;
	width: 100%;
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.3rem;
	background: rgba(220, 184, 174, 0.22);
	border-left: 2px solid var(--sp-cuivre);
	transition: background-color var(--sp-transition);
}

.sp-objet-focus:hover {
	background: rgba(220, 184, 174, 0.4);
}

.sp-objet-focus__intro {
	display: block;
	margin-bottom: 0.2rem;
	color: rgba(58, 53, 48, 0.75);
	font-size: 0.88rem;
}

.sp-objet-focus__titre {
	display: block;
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.12rem;
	line-height: 1.3;
}

.sp-objet-focus__titre::after {
	content: " →";
	color: var(--sp-cuivre);
}

/* Sections « les objets de cette histoire » et « d'autres trouvailles ». */
.sp-liees {
	max-width: var(--sp-wide);
	margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--sp-trait);
	text-align: center;
}

.sp-liees .sp-eyebrow {
	margin: 0;
	color: var(--sp-cuivre);
}

.sp-liees .sp-section-title {
	margin: 0.4rem 0 0;
}

.sp-liees .trouvailles-grid {
	text-align: left;
}

.sp-liees__tout {
	margin-top: 2.5rem;
}

/* Série des focus : compteur, points de progression, précédent / suivant. */
.sp-serie {
	max-width: var(--sp-wide);
	margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--sp-trait);
	text-align: center;
}

.sp-serie__compteur {
	margin: 0;
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
}

.sp-serie__points {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	list-style: none;
	margin: 1rem 0 2.25rem;
	padding: 0;
}

.sp-serie__point {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--sp-trait-fort);
	transition: background-color var(--sp-transition);
}

.sp-serie__point:hover {
	background: var(--sp-cuivre);
}

.sp-serie__point.is-active {
	background: var(--sp-cuivre);
}

.sp-serie__liens {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--sp-trait);
	border: 1px solid var(--sp-trait);
}

.sp-serie__lien {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.6rem 1.75rem;
	background: var(--sp-ivoire);
	transition: background-color var(--sp-transition);
}

.sp-serie__lien:hover {
	background: var(--sp-parchemin);
}

.sp-serie__lien--precedent {
	text-align: left;
}

.sp-serie__lien--suivant {
	text-align: right;
}

.sp-serie__sens {
	color: rgba(58, 53, 48, 0.7);
	font-size: 0.85rem;
}

.sp-serie__lien--precedent .sp-serie__sens::before {
	content: "← ";
}

.sp-serie__lien--suivant .sp-serie__sens::after {
	content: " →";
}

.sp-serie__titre {
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.2rem;
	line-height: 1.25;
}

/* « Poursuivre la visite » : la relance de fin de page. */
.sp-suite {
	max-width: var(--sp-wide);
	margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
	padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	border-top: 1px solid var(--sp-trait);
}

.sp-suite__intro {
	margin: 0 0 1.75rem;
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
	text-align: center;
}

.sp-suite__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sp-suite__carte {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.9rem;
	background: var(--sp-parchemin);
	border-left: 2px solid transparent;
	transition: border-color var(--sp-transition), background-color var(--sp-transition);
}

.sp-suite__carte:hover {
	border-left-color: var(--sp-cuivre);
}

.sp-suite__kicker {
	color: var(--sp-cuivre);
	font-family: Newsreader, Georgia, serif;
	font-size: 0.9rem;
	font-style: italic;
	font-weight: 500;
}

.sp-suite__titre {
	color: var(--sp-anthracite);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.45rem;
	line-height: 1.2;
}

.sp-suite__texte {
	color: rgba(58, 53, 48, 0.85);
	font-size: 0.95rem;
	line-height: 1.6;
}

.sp-suite__lien {
	margin-top: auto;
	padding-top: 0.9rem;
	color: var(--sp-anthracite);
	font-size: 0.92rem;
	font-weight: 600;
}

.sp-suite__lien::after {
	content: " →";
}

.sp-suite__carte:hover .sp-suite__lien {
	color: var(--sp-cuivre);
}

/* Ces blocs vivent hors du gabarit .page-content__body : on leur rend la
   gouttière latérale sur les pages éditoriales. */
.page-content .sp-liees,
.page-content .sp-serie,
.page-content .sp-suite {
	width: min(var(--sp-wide), 100%);
}

@media (max-width: 640px) {
	.sp-serie__liens {
		grid-template-columns: 1fr;
	}

	.sp-serie__lien--suivant {
		text-align: left;
	}
}

/* Barre de progression de lecture, sur les articles longs uniquement. */
.sp-progression {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 200;
	pointer-events: none;
}

.sp-progression__jauge {
	display: block;
	height: 100%;
	background: var(--sp-cuivre);
	transform: scaleX(0);
	transform-origin: left;
}

/* Apparition au défilement. La classe .sp-reveal n'est posée par le script
   que sur les éléments encore hors de l'écran : rien ne clignote au
   chargement, et sans JavaScript tout reste visible. */
.sp-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.sp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   11. Formulaire de contact
   ========================================================================== */

.sp-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	margin-top: 2rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--sp-parchemin);
}

.sp-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.35rem;
}

.sp-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.sp-contact-form__field--hidden {
	position: absolute;
	left: -9999px;
}

.sp-contact-form label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sp-anthracite);
}

.sp-contact-form input[type="text"],
.sp-contact-form input[type="email"],
.sp-contact-form input[type="file"],
.sp-contact-form textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--sp-trait-fort);
	background: var(--sp-ivoire);
	color: var(--sp-encre);
	border-radius: 0;
	transition: border-color var(--sp-transition);
}

.sp-contact-form input:hover,
.sp-contact-form textarea:hover {
	border-color: rgba(169, 104, 58, 0.5);
}

.sp-contact-form textarea {
	resize: vertical;
}

.sp-contact-form__submit {
	align-self: flex-start;
	background: var(--sp-anthracite);
	color: var(--sp-ivoire);
	border: none;
	border-radius: 3px;
	padding: 0.85rem 2rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--sp-transition);
}

.sp-contact-form__submit:hover {
	background: var(--sp-cuivre);
}

.sp-contact-form__notice {
	max-width: var(--sp-content);
	margin: 1.5rem auto 0;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	border-left: 3px solid var(--sp-cuivre);
	background: rgba(169, 104, 58, 0.08);
}

.sp-contact-form__notice--error {
	border-left-color: #a33;
	background: rgba(170, 51, 51, 0.07);
	color: #7a1f1f;
}

/* ==========================================================================
   12. Bandeau cookies
   ========================================================================== */

.sp-cookie-banner {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	max-width: 460px;
	margin: 0 auto;
	padding: 1.4rem 1.6rem;
	background: var(--sp-anthracite);
	color: rgba(247, 242, 234, 0.88);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
	z-index: 1000;
	font-size: 0.9rem;
}

.sp-cookie-banner p {
	margin: 0 0 1.1rem;
	line-height: 1.6;
}

.sp-cookie-banner a {
	color: var(--sp-rose);
	border-bottom: 1px solid rgba(220, 184, 174, 0.4);
}

.sp-cookie-banner__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.sp-cookie-banner__actions button {
	border: 1px solid rgba(247, 242, 234, 0.45);
	background: transparent;
	color: var(--sp-ivoire);
	border-radius: 3px;
	padding: 0.5rem 1.1rem;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.sp-cookie-banner__decline:hover {
	border-color: var(--sp-ivoire);
}

.sp-cookie-banner__accept {
	background: var(--sp-cuivre) !important;
	border-color: var(--sp-cuivre) !important;
}

.sp-cookie-banner__accept:hover {
	background: #bb7643 !important;
	border-color: #bb7643 !important;
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */

.site-footer {
	background: var(--sp-anthracite);
	color: rgba(247, 242, 234, 0.75);
	padding: clamp(3rem, 7vw, 5rem) var(--sp-gutter) 2rem;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 2.5rem;
	max-width: var(--sp-wide);
	margin: 0 auto;
}

.site-footer__column h3 {
	margin: 0 0 1.25rem;
	color: var(--sp-rose);
	font-family: Newsreader, Georgia, serif;
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 500;
}

.site-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.site-footer__column ul ul {
	margin-top: 0.65rem;
	padding-left: 0.9rem;
	gap: 0.5rem;
	border-left: 1px solid rgba(247, 242, 234, 0.15);
}

.site-footer__column a {
	color: rgba(247, 242, 234, 0.75);
	font-size: 0.92rem;
	transition: color var(--sp-transition);
}

.site-footer__column a:hover {
	color: var(--sp-rose);
}

.site-footer__bottom {
	max-width: var(--sp-wide);
	margin: 3rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(247, 242, 234, 0.15);
	font-size: 0.8rem;
	opacity: 0.65;
}

.site-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   14. Réglages fins
   ========================================================================== */

@media (max-width: 560px) {
	.sp-contact-form__row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.sp-card:hover,
	.trouvaille-card:hover {
		transform: none;
	}

	/* Filet de sécurité : même si la classe était posée, rien ne reste masqué. */
	.sp-reveal {
		opacity: 1;
		transform: none;
	}

	.sp-hero--plein::before,
	.sp-hero--plein > *,
	.sp-hero--plein h1::after,
	.sp-hero__cue,
	.sp-hero__cue::after {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	.sp-hero--plein h1::after {
		transform: scaleX(1);
	}

	.sp-hero__cue {
		transform: translateX(-50%);
	}
}