/* ==================================================================
   Bijoux de Soie — refonte plein écran
   ------------------------------------------------------------------
   Chargée APRÈS sections.css, dont elle reprend les jetons et redéfinit
   la mise en page. Parti pris : plus aucun bloc n'est enfermé dans une
   largeur maximale. Chaque rubrique est une bande pleine largeur avec
   son propre fond — on traverse des salles en défilant.

   Le dynamisme repose sur les animations pilotées par le défilement
   (`animation-timeline`), en CSS pur : aucun JavaScript ajouté. Elles
   sont TOUJOURS de simples enrichissements — la visibilité d'un contenu
   n'en dépend jamais, pour que les navigateurs qui ne les gèrent pas
   affichent la page normalement.
   ================================================================== */

/* Propriétés typées : nécessaires pour animer une valeur numérique
   depuis le CSS (une custom property non déclarée n'est pas animable). */
@property --bds-progression {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

:root {
	/* Rythme vertical des bandes, généreux en plein écran */
	--bds-bande:     clamp(4rem, 9vw, 9rem);
	--bds-bande-sm:  clamp(2.5rem, 6vw, 5rem);

	/* Gouttière latérale : c'est elle qui remplace le conteneur */
	--bds-marge:     clamp(1.15rem, 4.5vw, 4.5rem);
}

/* ==================================================================
   1. LIBÉRER LA PAGE
   Astra en mode « page-builder » ne met plus de conteneur, mais il
   reste des marges héritées à neutraliser.
   ================================================================== */

.ast-page-builder-template .bds-accueil,
.ast-page-builder-template .site-content .ast-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

.bds-accueil { overflow-x: clip; }

/* Le conteneur interne ne sert plus qu'au texte courant : il garde une
   largeur de lecture confortable, mais ne contraint plus les fonds. */
.bds-contenu {
	width: 100%;
	max-width: 1560px;
	margin-inline: auto;
	padding-inline: var(--bds-marge);
}

.bds-contenu--large { max-width: none; }
.bds-contenu--texte { max-width: 74ch; }

/* Bande pleine largeur */
.bds-bande {
	position: relative;
	padding-block: var(--bds-bande);
	width: 100%;
}

.bds-bande--blush { background: var(--bds-blush); }
.bds-bande--creme { background: var(--bds-creme); }
.bds-bande--encre { background: var(--bds-encre); color: var(--bds-blush); }
.bds-bande--blanc { background: var(--bds-blanc); }
.bds-bande--serre { padding-block: var(--bds-bande-sm); }
.bds-bande--nue   { padding-block: 0; }

/* ==================================================================
   2. BARRE DE PROGRESSION DE LECTURE
   Pilotée par le défilement du document, sans une ligne de JavaScript.
   ================================================================== */

.bds-progression {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 999;
	background: transparent;
	pointer-events: none;
}

.bds-progression::after {
	content: "";
	display: block;
	height: 100%;
	background: linear-gradient(to right, var(--bds-or-marque), var(--bds-or-clair));
	transform-origin: left center;
	transform: scaleX(0);
}

body.rtl .bds-progression::after { transform-origin: right center; }

@supports (animation-timeline: scroll()) {
	.bds-progression::after {
		animation: bds-avance linear forwards;
		animation-timeline: scroll(root block);
	}
}

@keyframes bds-avance {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Sans prise en charge, la barre reste invisible : c'est un ornement,
   pas une information. */
@supports not (animation-timeline: scroll()) {
	.bds-progression { display: none; }
}

/* ==================================================================
   3. SLIDER PLEIN ÉCRAN
   ================================================================== */

.bds-slide {
	aspect-ratio: auto;
	min-height: min(88svh, 720px);
	max-height: none;
}

@media (min-width: 700px) {
	.bds-slide { min-height: min(92svh, 900px); }
}

@media (min-width: 1100px) {
	.bds-slide { min-height: min(94svh, 1000px); }
}

.bds-slide__texte .bds-contenu { max-width: 1560px; }

.bds-slide__titre { font-size: clamp(2.2rem, 6.4vw, 5.2rem); }
.bds-slide__bloc  { max-width: 40rem; gap: 1.1rem; }
.bds-slide__accroche { font-size: clamp(1rem, 1.25vw, 1.18rem); }

/* Indice de défilement, sous le slider */
.bds-slider__indice {
	position: absolute;
	inset-block-end: clamp(1rem, 2.5vw, 1.8rem);
	inset-inline-start: var(--bds-marge);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--bds-sans);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bds-or-pale);
}

.bds-slider__indice span::after {
	content: "";
	display: block;
	width: 1px;
	height: 34px;
	margin-inline: auto;
	background: linear-gradient(to bottom, var(--bds-or-pale), transparent);
	animation: bds-descend 2.2s ease-in-out infinite;
}

@keyframes bds-descend {
	0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
	50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

@media (max-width: 699px) { .bds-slider__indice { display: none; } }

/* ==================================================================
   4. BANDEAU DÉFILANT
   Deux copies de la même liste défilent côte à côte : quand la
   première sort, la seconde a pris sa place, la boucle est invisible.
   ================================================================== */

.bds-ticker {
	background: var(--bds-encre);
	overflow: hidden;
	padding-block: clamp(.9rem, 1.6vw, 1.4rem);
	border-block: 1px solid rgba(247, 235, 228, .12);
}

.bds-ticker__piste {
	display: flex;
	width: max-content;
	animation: bds-defile 38s linear infinite;
}

.bds-ticker:hover .bds-ticker__piste,
.bds-ticker:focus-within .bds-ticker__piste {
	animation-play-state: paused;
}

.bds-ticker__lot {
	display: flex;
	align-items: center;
	flex: none;
}

.bds-ticker__mot {
	font-family: var(--bds-serif);
	font-size: clamp(.95rem, 1.5vw, 1.35rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bds-or-pale);   /* 13,10:1 sur encre — mesuré */
	padding-inline: clamp(1.1rem, 2.4vw, 2.2rem);
	white-space: nowrap;
}

/* Séparateur en losange, motif du logo */
.bds-ticker__mot::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	background: var(--bds-or-marque);
	transform: rotate(45deg);
	margin-inline-start: clamp(1.1rem, 2.4vw, 2.2rem);
	vertical-align: middle;
}

@keyframes bds-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

body.rtl .bds-ticker__piste { animation-name: bds-defile-rtl; }

@keyframes bds-defile-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

/* ==================================================================
   5. HÉRO ÉDITORIAL
   Le titre se dévoile par un volet qui monte, piloté au défilement.
   ================================================================== */

.bds-hero {
	background: var(--bds-blush);
	padding-block: clamp(4rem, 10vw, 10rem);
	overflow: hidden;
}

.bds-hero__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

@media (min-width: 1000px) {
	.bds-hero__grille { grid-template-columns: 1.15fr .85fr; }
}

.bds-hero__titre {
	font-size: clamp(2.6rem, 7.4vw, 6rem);
	line-height: .98;
	letter-spacing: .01em;
}

.bds-hero__texte {
	font-size: clamp(1.05rem, 1.4vw, 1.28rem);
	max-width: 44ch;
}

/* Visuel du héro : plus de cadre, il déborde vers la droite. */
.bds-hero__visuel {
	aspect-ratio: 4 / 5;
	border: 0;
	border-radius: 0;
	max-height: 82svh;
}

@media (min-width: 1000px) {
	.bds-hero__visuel {
		aspect-ratio: 3 / 4;
		/* Débord jusqu'au bord de l'écran : c'est ce débord qui donne
		   l'impression de pleine page. */
		margin-inline-end: calc(var(--bds-marge) * -1);
	}
}

/* Volet de dévoilement, piloté par l'entrée dans le champ de vision */
@supports (animation-timeline: view()) {
	.bds-hero__visuel img {
		clip-path: inset(0 0 0 0);
		animation: bds-volet linear both;
		animation-timeline: view(block);
		animation-range: entry 8% cover 34%;
	}

	@keyframes bds-volet {
		from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
		to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
	}
}

/* ==================================================================
   6. PANNEAUX COLLECTIONS
   Sur grand écran : quatre panneaux plein écran bord à bord ; celui
   qu'on survole s'élargit, les autres se resserrent.
   Sur mobile : défilement horizontal avec accrochage.
   ================================================================== */

.bds-panneaux {
	display: flex;
	gap: 2px;
	width: 100%;
	background: var(--bds-encre);
}

.bds-panneau {
	position: relative;
	display: block;
	text-decoration: none;
	overflow: hidden;
	min-height: min(78svh, 760px);
	flex: 1 1 0;
	transition: flex-grow .7s var(--bds-courbe);
}

@media (hover: hover) and (min-width: 1200px) {
	.bds-panneaux:hover .bds-panneau { flex-grow: .82; }
	.bds-panneaux .bds-panneau:hover,
	.bds-panneaux .bds-panneau:focus-visible { flex-grow: 1.7; }
}

/*
 * Rail à accrochage jusqu'à 1199 px, et pas seulement sur mobile : à
 * 1000 px, quatre panneaux côte à côte ne font que 250 px de large pour
 * 780 px de haut, et les noms de collection y deviennent illisibles.
 */
@media (max-width: 1199px) {
	.bds-panneaux {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-inline: var(--bds-marge);
		scrollbar-width: none;
	}
	.bds-panneaux::-webkit-scrollbar { display: none; }
	.bds-panneau {
		scroll-snap-align: center;
		min-height: 68svh;
	}
}

.bds-panneau__media { position: absolute; inset: 0; overflow: hidden; }

.bds-panneau__media img,
.bds-panneau__media .bds-substitut {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0) scale(1.03);
	transition: transform 1.1s var(--bds-courbe), filter .6s var(--bds-courbe);
	filter: saturate(.94);
}

.bds-panneau:hover .bds-panneau__media img,
.bds-panneau:focus-visible .bds-panneau__media img {
	transform: translateZ(0) scale(1.1);
	filter: saturate(1.06);
}

/* Voile : 0,74 au bas, validé à 6,30:1 pour le blush sur photo claire. */
.bds-panneau__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(28, 26, 24, .84) 0%,
		rgba(28, 26, 24, .58) 30%,
		rgba(28, 26, 24, .18) 62%,
		rgba(28, 26, 24, .04) 100%
	);
}

.bds-panneau__libelle {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: clamp(1.3rem, 2.4vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.bds-panneau__num {
	font-family: var(--bds-mono, var(--bds-sans));
	font-size: .7rem;
	letter-spacing: .2em;
	color: var(--bds-or-pale);
}

.bds-panneau__nom {
	font-family: var(--bds-serif);
	font-size: clamp(1.3rem, 2.1vw, 2rem);
	line-height: 1.1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bds-blush);
	text-wrap: balance;
}

.bds-panneau__compte {
	font-family: var(--bds-sans);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bds-or-pale);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--bds-court) var(--bds-courbe),
	            transform var(--bds-long) var(--bds-courbe);
}

.bds-panneau:hover .bds-panneau__compte,
.bds-panneau:focus-visible .bds-panneau__compte {
	opacity: 1;
	transform: translateY(0);
}

/* Pas de survol au doigt : le compteur reste toujours lisible. */
@media (max-width: 1199px) {
	.bds-panneau__compte { opacity: 1; transform: none; }
}

/* Filet or qui se déploie au survol */
.bds-panneau__trait {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: 3px;
	width: 100%;
	background: var(--bds-or-marque);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--bds-long) var(--bds-courbe);
	z-index: 2;
}

body.rtl .bds-panneau__trait { transform-origin: right center; }

.bds-panneau:hover .bds-panneau__trait,
.bds-panneau:focus-visible .bds-panneau__trait { transform: scaleX(1); }

/* ==================================================================
   7. BANDE PARALLAXE
   L'image se déplace plus lentement que la page. Piloté au défilement,
   donc fluide et sans JavaScript.
   ================================================================== */

.bds-parallaxe {
	position: relative;
	height: min(72svh, 700px);
	overflow: hidden;
	background: var(--bds-encre);
}

.bds-parallaxe__media {
	position: absolute;
	inset-inline: 0;
	inset-block-start: -14%;
	height: 128%;
}

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

@supports (animation-timeline: view()) {
	.bds-parallaxe__media {
		animation: bds-parallaxe linear both;
		animation-timeline: view(block);
	}

	@keyframes bds-parallaxe {
		from { transform: translateY(-8%); }
		to   { transform: translateY(8%); }
	}
}

/*
 * 0,66 et pas moins. Mesuré sur la zone la plus claire du satin doré :
 *   0,52 → blush 3,55:1 et or pâle 3,14:1 — les deux ÉCHOUENT
 *   0,66 → blush 5,40:1 et or pâle 4,77:1 — les deux conformes AA
 * La citation est en gros caractères, mais la signature en dessous est
 * petite : il faut donc satisfaire le seuil du texte normal, pas celui
 * des grands titres.
 */
.bds-parallaxe__voile {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 24, .66);
}

.bds-parallaxe__mot {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	text-align: center;
	padding-inline: var(--bds-marge);
}

.bds-parallaxe__mot p {
	font-family: var(--bds-serif);
	font-size: clamp(1.5rem, 3.6vw, 3.1rem);
	line-height: 1.22;
	letter-spacing: .02em;
	color: var(--bds-blush);   /* 5,40:1 sur le voile à 0,66 — mesuré */
	max-width: 26ch;
	margin: 0;
	text-wrap: balance;
}

.bds-parallaxe__mot cite {
	display: block;
	margin-top: 1.4rem;
	font-family: var(--bds-sans);
	font-style: normal;
	font-size: .72rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--bds-or-pale);
}

/* ==================================================================
   8. GRILLE PRODUITS PLEINE LARGEUR
   ================================================================== */

.bds-produits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
	gap: clamp(.9rem, 1.8vw, 1.8rem);
}

@media (min-width: 1400px) {
	.bds-produits { grid-template-columns: repeat(4, 1fr); }
}

.bds-produit {
	border: 0;
	border-radius: 0;
	background: transparent;
	/* Requête de conteneur : la carte s'adapte à SA largeur, pas à
	   celle de l'écran — indispensable quand la grille change de
	   nombre de colonnes. */
	container-type: inline-size;
}

.bds-produit:hover { box-shadow: none; }

.bds-produit__media {
	aspect-ratio: 4 / 5;
	background: var(--bds-creme);
	overflow: hidden;
}

.bds-produit__corps {
	padding: 1.1rem .2rem 0;
	gap: .5rem;
}

.bds-produit__nom { font-size: clamp(1rem, 1.15vw, 1.18rem); }

@container (min-width: 320px) {
	.bds-produit__nom { font-size: 1.2rem; }
}

/* Dévoilement en cascade piloté au défilement */
@supports (animation-timeline: view()) {
	.bds-produits .bds-produit {
		animation: bds-monte linear both;
		animation-timeline: view(block);
		animation-range: entry 4% entry 42%;
	}

	@keyframes bds-monte {
		from { opacity: 0; transform: translateY(38px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ==================================================================
   9. LE GESTE — trois étapes avec ligne de progression
   ================================================================== */

.bds-etapes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	position: relative;
}

@media (min-width: 900px) {
	.bds-etapes { grid-template-columns: repeat(3, 1fr); }
}

.bds-etape {
	position: relative;
	padding-top: 2.6rem;
	border-top: 1px solid var(--bds-bordure);
}

.bds-etape__num {
	position: absolute;
	inset-block-start: -.75rem;
	inset-inline-start: 0;
	background: var(--bds-blush);
	padding-inline-end: .9rem;
	font-family: var(--bds-serif);
	font-size: 1.5rem;
	color: var(--bds-or-texte);
	line-height: 1;
}

.bds-bande--creme .bds-etape__num { background: var(--bds-creme); }

.bds-etape h3 {
	font-family: var(--bds-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.9vw, 1.65rem);
	letter-spacing: .04em;
	color: var(--bds-encre);
	margin: 0 0 .7rem;
	text-wrap: balance;
}

.bds-etape p {
	font-size: 1rem;
	line-height: 1.72;
	color: var(--bds-texte);
	margin: 0;
	max-width: 40ch;
}

/* La bordure supérieure se remplit d'or à mesure qu'on défile. */
@supports (animation-timeline: view()) {
	.bds-etape::before {
		content: "";
		position: absolute;
		inset-block-start: -1px;
		inset-inline-start: 0;
		height: 1px;
		width: 100%;
		background: var(--bds-or-marque);
		transform: scaleX(0);
		transform-origin: left center;
		animation: bds-trace linear both;
		animation-timeline: view(block);
		animation-range: entry 10% cover 40%;
	}

	body.rtl .bds-etape::before { transform-origin: right center; }

	@keyframes bds-trace {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

/* ==================================================================
   10. TITRES DE RUBRIQUE, À L'ÉCHELLE DU PLEIN ÉCRAN
   ================================================================== */

.bds-titre-section {
	font-size: clamp(2rem, 5vw, 3.8rem);
	letter-spacing: .05em;
	line-height: 1.04;
}

.bds-bande--encre .bds-titre-section { color: var(--bds-blush); }
.bds-bande--encre .bds-surtitre      { color: var(--bds-or-pale); }
.bds-bande--encre .bds-chapeau       { color: var(--bds-blush); opacity: .88; }

.bds-section__tete {
	align-items: baseline;
	margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

.bds-chapeau { font-size: clamp(1rem, 1.25vw, 1.15rem); }

/* ==================================================================
   11. ATOUTS, PLUS AÉRÉS
   ================================================================== */

.bds-atouts {
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.bds-bande--encre .bds-atout__titre { color: var(--bds-blush); }
.bds-bande--encre .bds-atout__texte { color: var(--bds-blush); opacity: .86; }
.bds-bande--encre .bds-atout__icone { color: var(--bds-or-pale); }

.bds-atout__icone { width: 46px; height: 46px; }

/* ==================================================================
   12. LETTRE D'ATELIER, PLEINE BANDE
   ================================================================== */

.bds-lettre .bds-titre-section { font-size: clamp(1.8rem, 4.2vw, 3.2rem); }
.bds-lettre__texte { font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* ==================================================================
   13. MOUVEMENT RÉDUIT
   Tout ce qui bouge s'arrête, y compris les animations pilotées par le
   défilement — et les états de départ sont neutralisés pour qu'aucun
   contenu ne reste masqué.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bds-ticker__piste { animation: none; }
	.bds-slider__indice span::after { animation: none; }

	.bds-hero__visuel img,
	.bds-parallaxe__media,
	.bds-produits .bds-produit,
	.bds-etape::before,
	.bds-progression::after {
		animation: none !important;
	}

	.bds-hero__visuel img { clip-path: none; transform: none; }
	.bds-parallaxe__media { transform: none; }
	.bds-produits .bds-produit { opacity: 1; transform: none; }
	.bds-etape::before { transform: scaleX(1); }
	.bds-progression { display: none; }

	.bds-panneau { transition: none; }
	.bds-panneau__media img { transition: none; }
}

/* ==================================================================
   14. CURSEUR PERSONNALISÉ SUR LES PANNEAUX
   ------------------------------------------------------------------
   Un cercle or portant « Découvrir » remplace le curseur, à l'intérieur
   des panneaux seulement. Texte encre sur or de marque : 5,57:1, déjà
   validé pour les boutons.

   Le curseur natif n'est masqué que dans la zone concernée, et seulement
   quand le script a confirmé qu'un vrai pointeur est présent (classe
   ajoutée par curseur.js). Sans JavaScript, ou au doigt, le curseur
   système reste intact.
   ================================================================== */

.bds-curseur {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 9998;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bds-or-marque);
	color: var(--bds-encre);
	pointer-events: none;
	opacity: 0;
	/* Le translate(-50%,-50%) est appliqué par le script en même temps que
	   la position : on n'anime donc ici que l'échelle et l'opacité. */
	scale: .2;
	transition: opacity .3s var(--bds-courbe), scale .45s var(--bds-courbe);
	will-change: transform, scale;
	mix-blend-mode: normal;
}

.bds-curseur.is-visible { opacity: 1; scale: 1; }
.bds-curseur.is-presse  { scale: .86; }

.bds-curseur__mot {
	font-family: var(--bds-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	padding-inline: .6rem;
}

/* Curseur natif masqué uniquement là où le nôtre prend le relais. */
.bds-panneaux--curseur,
.bds-panneaux--curseur .bds-panneau,
.bds-panneaux--curseur .bds-panneau * {
	cursor: none;
}

/* Le focus clavier reste parfaitement visible : le curseur personnalisé
   ne s'affiche pas dans ce cas, il ne doit donc rien remplacer. */
.bds-panneau:focus-visible {
	outline: 3px solid var(--bds-or-marque);
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.bds-curseur { display: none; }
}

/* ==================================================================
   15. TRANSITIONS ENTRE PAGES (View Transitions)
   ------------------------------------------------------------------
   La photo du produit se déplace de la grille vers la fiche au lieu de
   disparaître. Standard du web, aucune librairie.

   `@view-transition` est purement et simplement ignoré par les
   navigateurs qui ne le gèrent pas : la navigation reste alors
   classique. Aucun repli à écrire.

   Chaque `view-transition-name` doit être UNIQUE dans la page. Ils sont
   dérivés de l'identifiant du produit (`produit-42`) et attribués une
   seule fois par identifiant — voir bds_nom_transition() dans
   functions.php, qui garde trace de ce qui a déjà été nommé.
   ================================================================== */

@view-transition {
	navigation: auto;
}

/* Fondu croisé général, court : la page ne doit pas sembler lente. */
::view-transition-old(root) {
	animation: bds-vt-sortie .28s var(--bds-courbe) both;
}

::view-transition-new(root) {
	animation: bds-vt-entree .34s var(--bds-courbe) both;
}

@keyframes bds-vt-sortie {
	to { opacity: 0; }
}

@keyframes bds-vt-entree {
	from { opacity: 0; }
}

/*
 * L'image produit, elle, se déplace et se redimensionne. On laisse le
 * navigateur calculer le morphing, on ne règle que la durée et la courbe.
 */
::view-transition-group(*[class^="produit-"]),
::view-transition-image-pair(*) {
	animation-duration: .5s;
	animation-timing-function: var(--bds-courbe);
}

/* L'en-tête et le pied restent en place pendant la transition : sans ça
   ils clignoteraient à chaque navigation. */
.site-header { view-transition-name: bds-entete; }
.site-footer { view-transition-name: bds-pied; }

::view-transition-group(bds-entete),
::view-transition-group(bds-pied) {
	animation-duration: .28s;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * On ne désactive pas la transition — on la rend instantanée. La
	 * désactiver ferait réapparaître le clignotement qu'elle évite.
	 */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: .01ms !important;
	}
}

/* ==================================================================
   16. INDICE DE SECONDE VUE
   ------------------------------------------------------------------
   Signale qu'une vue portée existe. Visible au repos, il s'efface au
   survol — au moment précis où la seconde image apparaît.

   Fond encre plein et texte blush : 14,84:1, quelle que soit la photo
   en dessous. Aucune dépendance au contenu de l'image.
   ================================================================== */

.bds-produit__indice {
	position: absolute;
	inset-block-end: .7rem;
	inset-inline-end: .7rem;
	z-index: 2;
	font-family: var(--bds-sans);
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--bds-blush);
	background: var(--bds-encre);
	padding: .42em .8em;
	border-radius: 2px;
	opacity: .92;
	transition: opacity var(--bds-court) var(--bds-courbe),
	            transform var(--bds-court) var(--bds-courbe);
}

.bds-produit:hover .bds-produit__indice,
.bds-produit:focus-within .bds-produit__indice {
	opacity: 0;
	transform: translateY(6px);
}

/* Au doigt il n'y a pas de survol : l'étiquette resterait affichée en
   permanence par-dessus la photo. On la retire. */
@media (hover: none) {
	.bds-produit__indice { display: none; }
}

/* ==================================================================
   17. EN-TÊTE : LOGO ET SÉLECTEUR DE LANGUE
   ------------------------------------------------------------------
   Le logo utilisé est une version RECADRÉE sur le contenu visible :
   990 × 224, rapport 4,42:1.

   Le fichier d'origine faisait 1536 × 1024, mais le dessin n'occupait
   qu'une bande de 974 × 208 au centre — le reste était vide, avec des
   pixels de transparence quasi nulle qui faussaient toute détection
   automatique de cadrage. Au format brut, le logo mesurait environ
   10 px de haut dans un en-tête de 50 px, et le nom de la marque était
   parfaitement illisible.

   Le lettrage a par ailleurs été ASSOMBRI : dans le fichier d'origine il
   plafonnait à 2,45:1 sur le blush de l'en-tête, sous le seuil de 3:1
   même pour un grand titre. Sa luminosité a été ramenée dans la plage
   0,20–0,35 en conservant teinte et dégradés, ce qui porte tous les
   traits visibles entre 5,83:1 et 17,96:1.

   (Les deux tiers du logo d'origine sont quasi blancs — la tache derrière
   le visage — et donnent 1,14:1 sur blush : ils restent volontairement
   invisibles. Le tracé seul est plus net ainsi.)

   Les largeurs sont réglées dans Astra (283 / 230 / 186 px) pour viser
   des hauteurs de 64 / 52 / 42 px. Les bornes ci-dessous ne sont qu'un
   filet de sécurité si le logo est un jour remplacé par un fichier de
   rapport différent.
   ================================================================== */

.site-header .custom-logo-link img,
.ast-primary-header-bar .custom-logo-link img {
	max-height: 68px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity var(--bds-court) var(--bds-courbe);
}

@media (max-width: 921px) {
	.site-header .custom-logo-link img,
	.ast-primary-header-bar .custom-logo-link img { max-height: 56px; }
}

@media (max-width: 544px) {
	.site-header .custom-logo-link img,
	.ast-primary-header-bar .custom-logo-link img { max-height: 46px; }
}

/* Le logo occupe le bord gauche, sans marge parasite. */
.ast-primary-header-bar .site-branding { margin-inline-start: 0; }

/* ------------------------------------------------------------------
   Sélecteur de langue
   ------------------------------------------------------------------
   Contrastes, sur l'en-tête blush :
     langue active   : encre #1C1A18 sur or #B08D45   5,57:1
     langue inactive : or texte #806732 sur blush     4,60:1
   Le repère de la langue courante n'est pas que la couleur : elle est
   aussi remplie, et porte aria-current.
   ------------------------------------------------------------------ */

.bds-menu-langues {
	display: flex;
	align-items: center;
	/* Astra applique ses propres marges aux éléments de menu : on ne
	   veut ni puce, ni soulignement, ni survol de lien ici. */
	margin-inline-start: clamp(.6rem, 1.6vw, 1.4rem);
}

.bds-menu-langues > a,
.bds-menu-langues::before,
.bds-menu-langues::after { display: none; }

.bds-langues {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--bds-or-trait);
	border-radius: 2px;
	overflow: hidden;
	background: transparent;
	line-height: 1;
}

.bds-langue {
	display: inline-flex;
	align-items: center;
	gap: .42em;
	padding: .52em .74em;
	font-family: var(--bds-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bds-or-texte);
	background: transparent;
	transition: background-color var(--bds-court) var(--bds-courbe),
	            color var(--bds-court) var(--bds-courbe);
	/* Neutralise le soulignement animé des liens du site. */
	background-image: none;
}

/* Filet de séparation entre les deux langues */
.bds-langue + .bds-langue {
	border-inline-start: 1px solid var(--bds-or-trait);
}

.bds-langue:hover,
.bds-langue:focus-visible {
	background: var(--bds-or-clair);
	color: var(--bds-encre);
}

.bds-langue.is-actif {
	background: var(--bds-or-marque);
	color: var(--bds-encre);
	cursor: default;
}

.bds-langue.is-actif:hover { background: var(--bds-or-marque); }

.bds-langue__drapeau {
	display: block;
	width: 18px;
	height: 14px;
	object-fit: cover;
	border-radius: 1px;
	/* Un liseré sombre détache le drapeau du fond quel qu'il soit :
	   sans lui, le rouge marocain baverait sur l'or. */
	box-shadow: 0 0 0 1px rgba(28, 26, 24, .3);
	flex: none;
}

.bds-langue__abrege { display: block; }

/* Dans le menu mobile hors-champ, le sélecteur passe pleine largeur. */
.ast-mobile-popup-drawer .bds-menu-langues,
.ast-hfb-header .main-header-menu.ast-nav-mobile .bds-menu-langues {
	margin: 1rem 0 0;
	padding-block: .8rem;
	justify-content: center;
	width: 100%;
}

.ast-mobile-popup-drawer .bds-langues { width: auto; }

.ast-mobile-popup-drawer .bds-langue {
	padding: .72em 1.2em;
	font-size: .78rem;
}

/* En arabe, le filet de séparation doit changer de côté. */
body.rtl .bds-langue + .bds-langue {
	border-inline-start: 1px solid var(--bds-or-trait);
}