/* ==================================================================
   Bijoux de Soie — rubriques de la page d'accueil et effets
   ------------------------------------------------------------------
   Motifs d'interaction relevés sur lavoyageuse-bijoux.com puis
   reconstruits ici avec notre palette. Valeurs d'origine conservées
   parce qu'elles sont bien calibrées :

     courbe signature : cubic-bezier(.51, .5, .07, .99)
     durée courante   : .25s     (survols)
     durée longue     : .4s      (soulignements, images)

   Les couleurs viennent des jetons --bds-* définis dans style.css,
   eux-mêmes reliés à la palette Astra : une modification dans
   l'admin se propage jusqu'ici.
   ================================================================== */

:root {
	--bds-courbe:   cubic-bezier(.51, .5, .07, .99);
	--bds-court:    .25s;
	--bds-long:     .4s;

	/* Amplitude du zoom et du glissement des visuels au survol */
	--bds-img-zoom: 1.06;
	--bds-img-glisse: 0px;

	/* Largeur du contenu */
	--bds-large:    1240px;
	--bds-etroit:   680px;
}

.bds-contenu {
	width: 100%;
	max-width: var(--bds-large);
	margin-inline: auto;
	padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

/* ==================================================================
   1. TYPOGRAPHIE DES RUBRIQUES
   Le lettrage large et fin du logo, décliné en titres.
   ================================================================== */

.bds-titre-section {
	font-family: var(--bds-serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 4.4vw, 2.9rem);
	line-height: 1.14;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bds-encre);
	margin: 0;
	text-wrap: balance;
}

.bds-surtitre {
	font-family: var(--bds-sans);
	font-size: .74rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--bds-or-texte);
	margin: 0 0 1rem;
}

.bds-chapeau {
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--bds-texte);
	max-width: 58ch;
	margin: 1rem 0 0;
}

/* ==================================================================
   2. SOULIGNEMENT ANIMÉ DES LIENS
   ------------------------------------------------------------------
   Le trait se rétracte vers la droite, saute à gauche, puis se
   redéploie. Reproduction fidèle du motif relevé — en deux phases,
   pas un simple balayage.
   ================================================================== */

.bds-lien {
	position: relative;
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 1px);
	background-size: 0 1px;
	transition: background-size var(--bds-long) var(--bds-courbe);
	padding-bottom: 1px;
}

.bds-lien:hover,
.bds-lien:focus-visible {
	background-size: 100% 1px;
}

/* Lien déjà souligné au repos : l'animation en deux temps se déclenche */
.bds-lien--actif {
	background-size: 100% 1px;
}

.bds-lien--actif:hover,
.bds-lien--actif:focus-visible {
	animation: bds-souligne .7s var(--bds-courbe) forwards;
}

@keyframes bds-souligne {
	0%   { background-position: 100% calc(100% - 1px); background-size: 100% 1px; }
	35%  { background-position: 100% calc(100% - 1px); background-size: 0 1px; }
	36%  { background-position: 0    calc(100% - 1px); background-size: 0 1px; }
	100% { background-position: 0    calc(100% - 1px); background-size: 100% 1px; }
}

/* ==================================================================
   3. HÉRO
   ================================================================== */

.bds-hero {
	position: relative;
	background: var(--bds-blush);
	padding-block: clamp(3.5rem, 11vw, 8rem);
	overflow: hidden;
}

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

@media (min-width: 900px) {
	.bds-hero__grille { grid-template-columns: 1.05fr .95fr; }
}

.bds-hero__titre {
	font-family: var(--bds-serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 6.6vw, 4.1rem);
	line-height: 1.06;
	letter-spacing: .045em;
	color: var(--bds-encre);
	margin: 0;
	text-wrap: balance;
}

.bds-hero__titre em {
	font-style: italic;
	color: var(--bds-or-texte);
}

.bds-hero__texte {
	font-size: 1.1rem;
	line-height: 1.78;
	color: var(--bds-texte);
	max-width: 46ch;
	margin: 1.5rem 0 0;
}

.bds-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-top: 2.1rem;
}

/* Visuel du héro : léger flottement continu, très lent. */
.bds-hero__visuel {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 2px;
	overflow: hidden;
	background: var(--bds-creme);
	border: 1px solid var(--bds-bordure);
}

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

.bds-hero__vide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem;
	color: var(--bds-gris);
	font-size: .88rem;
	line-height: 1.6;
}

/* ==================================================================
   4. BOUTONS DE RUBRIQUE
   Or de la marque en aplat, texte encre (5,57:1). Le survol
   éclaircit l'or — voir la note dans style.css.
   ================================================================== */

.bds-btn {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-family: var(--bds-sans);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1em 2.1em;
	border-radius: 2px;
	background: var(--bds-or-marque);
	color: var(--bds-encre);
	border: 1px solid var(--bds-or-marque);
	cursor: pointer;
	transition: background-color var(--bds-court) var(--bds-courbe),
	            border-color var(--bds-court) var(--bds-courbe);
}

.bds-btn:hover,
.bds-btn:focus-visible {
	background: var(--bds-or-survol);
	border-color: var(--bds-or-survol);
	color: var(--bds-encre);
}

/* La flèche avance au survol — micro-interaction discrète. */
.bds-btn__fleche {
	display: inline-block;
	transition: transform var(--bds-court) var(--bds-courbe);
}

.bds-btn:hover .bds-btn__fleche { transform: translateX(4px); }

.bds-btn--fantome {
	background: transparent;
	color: var(--bds-or-texte);
	border-color: var(--bds-or-trait);
}

.bds-btn--fantome:hover,
.bds-btn--fantome:focus-visible {
	background: var(--bds-or-marque);
	border-color: var(--bds-or-marque);
	color: var(--bds-encre);
}

/* ==================================================================
   5. RUBRIQUE COLLECTIONS
   Cartes visuelles : l'image zoome et glisse, le libellé monte.
   ================================================================== */

.bds-section { padding-block: clamp(3rem, 8vw, 6rem); }
.bds-section--creme { background: var(--bds-creme); }
.bds-section--encre { background: var(--bds-encre); }

.bds-section__tete {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.bds-collections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: clamp(1rem, 2.4vw, 1.6rem);
}

.bds-collection {
	position: relative;
	display: block;
	text-decoration: none;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	background: var(--bds-blush);
	border: 1px solid var(--bds-bordure);
	isolation: isolate;
}

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

.bds-collection__media img,
.bds-collection__media .bds-substitut {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* translateZ(0) force l'accélération matérielle — comme sur le site
	   observé. Sans elle, le zoom saccade sur mobile. */
	transform: translateZ(0) scale(1);
	transition: transform var(--bds-long) var(--bds-courbe);
	will-change: transform;
}

.bds-collection:hover .bds-collection__media img,
.bds-collection:focus-visible .bds-collection__media img,
.bds-collection:hover .bds-collection__media .bds-substitut,
.bds-collection:focus-visible .bds-collection__media .bds-substitut {
	transform: translateX(var(--bds-img-glisse)) translateZ(0) scale(var(--bds-img-zoom));
}

/* Voile dégradé pour garantir la lisibilité du libellé sur photo */
.bds-collection__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(28, 26, 24, .74) 0%,
		rgba(28, 26, 24, .34) 38%,
		rgba(28, 26, 24, 0) 68%
	);
	transition: opacity var(--bds-court) var(--bds-courbe);
}

.bds-collection:hover .bds-collection__voile { opacity: .88; }

.bds-collection__libelle {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	z-index: 1;
}

.bds-collection__nom {
	font-family: var(--bds-serif);
	font-size: 1.32rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #F7EBE4;
	transition: transform var(--bds-long) var(--bds-courbe);
}

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

.bds-collection:hover .bds-collection__nom,
.bds-collection:focus-visible .bds-collection__nom {
	transform: translateY(-3px);
}

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

/* Substitut quand la catégorie n'a pas encore d'image */
.bds-substitut {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(-45deg,
			var(--bds-blush) 0 12px,
			var(--bds-creme) 12px 24px);
}

.bds-substitut span {
	font-family: var(--bds-serif);
	font-size: 2.4rem;
	color: var(--bds-or-trait);
	opacity: .5;
}

/* ==================================================================
   6. GRILLE PRODUITS DE LA PAGE D'ACCUEIL
   ================================================================== */

.bds-produits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: clamp(1rem, 2.4vw, 1.7rem);
}

.bds-produit {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bds-blanc);
	border: 1px solid var(--bds-bordure);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color var(--bds-court) var(--bds-courbe),
	            box-shadow var(--bds-court) var(--bds-courbe);
}

.bds-produit:hover {
	border-color: var(--bds-or-trait);
	box-shadow: 0 8px 26px rgba(28, 26, 24, .08);
}

.bds-produit__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bds-creme);
}

.bds-produit__media img,
.bds-produit__media .bds-substitut {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0) scale(1);
	transition: transform var(--bds-long) var(--bds-courbe),
	            opacity var(--bds-court) var(--bds-courbe);
	will-change: transform;
}

.bds-produit:hover .bds-produit__media img,
.bds-produit:hover .bds-produit__media .bds-substitut {
	transform: translateX(var(--bds-img-glisse)) translateZ(0) scale(var(--bds-img-zoom));
}

/* Seconde image révélée au survol, quand la galerie en contient une.
   C'est le motif « hover-content-image » du site observé. */
.bds-produit__media--duo .bds-produit__img2 {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.bds-produit__media--duo:hover .bds-produit__img2 { opacity: 1; }
.bds-produit__media--duo:hover .bds-produit__img1 { opacity: 0; }

.bds-produit__corps {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.05rem 1.15rem 1.3rem;
	flex: 1;
}

.bds-produit__nom {
	font-family: var(--bds-serif);
	font-size: 1.06rem;
	font-weight: 400;
	letter-spacing: .035em;
	line-height: 1.35;
	margin: 0;
}

.bds-produit__nom a {
	color: var(--bds-encre);
	text-decoration: none;
}

.bds-produit__prix {
	font-family: var(--bds-sans);
	font-size: .98rem;
	font-weight: 600;
	color: var(--bds-or-texte);
	font-variant-numeric: tabular-nums;
	margin-top: auto;
	padding-top: .4rem;
}

.bds-produit__prix del {
	color: var(--bds-gris);
	font-weight: 400;
	margin-inline-end: .45em;
	text-decoration-thickness: 1px;
}

.bds-produit__prix ins { text-decoration: none; }

/* Pastilles de couleur de soie — la variante se voit, sans clic.
   Le site observé ne le fait pas en page boutique : on va plus loin. */
.bds-pastilles {
	display: flex;
	gap: .34rem;
	flex-wrap: wrap;
	padding-top: .15rem;
}

/* L'anneau doit atteindre 3:1 contre la carte blanche (WCAG 1.4.11,
   contraste des éléments non textuels) : sans lui, une soie ivoire
   (1,23:1 sur blanc) ou argent (1,91:1) serait invisible. Mesuré :
   rgba(28,26,24,.50) donne 3,33:1 — .22 ne donnait que 1,59:1. */
.bds-pastille {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(28, 26, 24, .5);
	flex: none;
	transition: transform var(--bds-court) var(--bds-courbe);
}

.bds-produit:hover .bds-pastille { transform: scale(1.12); }

.bds-pastilles__reste {
	font-family: var(--bds-sans);
	font-size: .72rem;
	color: var(--bds-gris);
	align-self: center;
	letter-spacing: .04em;
}

/* Badge d'étiquette (nouveauté, promo) */
.bds-badge {
	position: absolute;
	inset-block-start: .7rem;
	inset-inline-start: .7rem;
	z-index: 2;
	font-family: var(--bds-sans);
	font-size: .64rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 500;
	padding: .42em .8em;
	border-radius: 2px;
	background: var(--bds-encre);
	color: var(--bds-blush);
}

.bds-badge--promo { background: var(--bds-or-marque); color: var(--bds-encre); }

/* ==================================================================
   7. RUBRIQUE RÉCIT (bandeau image + texte)
   ================================================================== */

.bds-recit__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.8rem, 4.5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.bds-recit__grille { grid-template-columns: 1fr 1fr; }
	.bds-recit--inverse .bds-recit__media { order: 2; }
}

.bds-recit__media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 2px;
	border: 1px solid var(--bds-bordure);
	background: var(--bds-creme);
}

.bds-recit__media img,
.bds-recit__media .bds-substitut {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transform: translateZ(0) scale(1);
	transition: transform 1.1s var(--bds-courbe);
}

.bds-recit:hover .bds-recit__media img { transform: translateZ(0) scale(1.04); }

/* Filet à losange du logo, en ouverture de rubrique */
.bds-filet-losange {
	border: 0;
	height: 1px;
	width: 84px;
	margin: 0 0 1.3rem;
	background: var(--bds-or-marque);
	position: relative;
}

.bds-filet-losange::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -3px;
	width: 6px; height: 6px;
	background: var(--bds-or-marque);
	transform: translateY(-50%) rotate(45deg);
}

/* ==================================================================
   8. BANDEAU RÉASSURANCE
   ================================================================== */

.bds-atouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: clamp(1.2rem, 3vw, 2.5rem);
}

.bds-atout {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	text-align: center;
	align-items: center;
	padding: .5rem;
}

.bds-atout__icone {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	color: var(--bds-or-texte);
	transition: transform var(--bds-long) var(--bds-courbe);
}

.bds-atout:hover .bds-atout__icone { transform: translateY(-4px); }

.bds-atout__icone svg { width: 100%; height: 100%; }

.bds-atout__titre {
	font-family: var(--bds-serif);
	font-size: 1.04rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bds-encre);
	margin: 0;
}

.bds-atout__texte {
	font-size: .89rem;
	line-height: 1.6;
	color: var(--bds-texte);
	margin: 0;
	max-width: 30ch;
}

/* ==================================================================
   9. CAPTURE D'ADRESSE (fond encre)
   ================================================================== */

.bds-lettre { text-align: center; }

.bds-lettre .bds-titre-section,
.bds-lettre .bds-atout__titre { color: var(--bds-blush); }

.bds-lettre .bds-surtitre { color: var(--bds-or-clair); }

.bds-lettre__texte {
	color: var(--bds-blush);
	opacity: .86;
	max-width: 48ch;
	margin: 1rem auto 2rem;
	font-size: 1.02rem;
	line-height: 1.75;
}

.bds-lettre__forme {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	max-width: 520px;
	margin-inline: auto;
}

.bds-lettre__champ {
	flex: 1 1 240px;
	background: transparent;
	/* .34 ne donnait que 2,84:1 sur le fond encre — sous le seuil de 3:1.
	   .45 donne 4,00:1. */
	border: 1px solid rgba(247, 235, 228, .45);
	border-radius: 2px;
	padding: .95em 1.1em;
	color: var(--bds-blush);
	font-family: var(--bds-sans);
	font-size: .95rem;
	transition: border-color var(--bds-court) var(--bds-courbe);
}

.bds-lettre__champ::placeholder { color: rgba(247, 235, 228, .55); }

.bds-lettre__champ:focus {
	outline: none;
	border-color: var(--bds-or-clair);
}

.bds-lettre__mention {
	font-size: .78rem;
	color: var(--bds-blush);
	opacity: .6;
	margin-top: 1.1rem;
}

/* ==================================================================
   10. APPARITION AU DÉFILEMENT
   Piloté par IntersectionObserver (reveal.js). Sans JavaScript, le
   contenu reste visible : l'état masqué n'est appliqué que si la
   classe .bds-js est présente sur <html>.
   ================================================================== */

.bds-js .bds-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--bds-courbe),
	            transform .7s var(--bds-courbe);
}

.bds-js .bds-reveal.bds-vu {
	opacity: 1;
	transform: translateY(0);
}

/* Cascade : chaque enfant entre légèrement après le précédent. */
.bds-js .bds-cascade > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--bds-courbe),
	            transform .6s var(--bds-courbe);
}

.bds-js .bds-cascade.bds-vu > * {
	opacity: 1;
	transform: translateY(0);
}

.bds-js .bds-cascade.bds-vu > *:nth-child(1) { transition-delay: 0ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(2) { transition-delay: 70ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(3) { transition-delay: 140ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(4) { transition-delay: 210ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(5) { transition-delay: 280ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(6) { transition-delay: 350ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(7) { transition-delay: 420ms; }
.bds-js .bds-cascade.bds-vu > *:nth-child(8) { transition-delay: 490ms; }

/* ==================================================================
   11. VERSION ARABE (RTL)
   Le glissement des images doit s'inverser, sinon il part du mauvais
   côté. Les décalages logiques (inset-inline) se miroitent seuls.
   ================================================================== */

body.rtl {
	--bds-img-glisse: 0px;
}

body.rtl .bds-btn:hover .bds-btn__fleche { transform: translateX(-4px); }

body.rtl .bds-filet-losange::after {
	inset-inline-end: auto;
	inset-inline-start: -3px;
}

body.rtl .bds-lien,
body.rtl .bds-lien--actif {
	background-position: 100% calc(100% - 1px);
}

body.rtl .bds-lien--actif:hover {
	animation-name: bds-souligne-rtl;
}

@keyframes bds-souligne-rtl {
	0%   { background-position: 0    calc(100% - 1px); background-size: 100% 1px; }
	35%  { background-position: 0    calc(100% - 1px); background-size: 0 1px; }
	36%  { background-position: 100% calc(100% - 1px); background-size: 0 1px; }
	100% { background-position: 100% calc(100% - 1px); background-size: 100% 1px; }
}

/* ==================================================================
   12. PRÉFÉRENCE DE MOUVEMENT RÉDUIT
   Tout est neutralisé, y compris les états d'apparition — sinon un
   contenu masqué ne réapparaîtrait jamais.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.bds-js .bds-reveal,
	.bds-js .bds-cascade > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.bds-produit:hover .bds-produit__media img,
	.bds-collection:hover .bds-collection__media img,
	.bds-recit:hover .bds-recit__media img {
		transform: translateZ(0) scale(1);
	}
}