/* ==================================================================
   Bijoux de Soie — panier accessible et tiroir
   ------------------------------------------------------------------
   Avant ce fichier, une cliente qui ajoutait un bijou n'avait aucun
   moyen de retrouver son panier : ni icône, ni compteur, ni lien.

   Contrastes mesurés :
     pastille : encre #1C1A18 sur or #B08D45     5,57:1
     icône et nom : encre sur blanc             17,35:1
     variante et croix : gris #6B635B sur blanc  5,90:1
     note : gris sur crème #FBF6F1               5,49:1
     point du compte : or #806732 sur blanc      5,38:1
   ================================================================== */

/* --- Les deux icônes du bandeau ----------------------------------- */

.bds-menu-compte,
.bds-menu-panier { display: flex; align-items: center; }

.bds-panier__lien,
.bds-compte {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px : cible tactile confortable, sans dépasser la hauteur du
	   bandeau où ces icônes s'insèrent. */
	min-width: 44px;
	min-height: 44px;
	color: var(--bds-encre, #1C1A18);
	text-decoration: none;
	transition: color var(--bds-transition, .3s);
}

.bds-panier__lien:hover,
.bds-compte:hover { color: var(--bds-or-texte, #806732); }

.bds-panier__lien:focus-visible,
.bds-compte:focus-visible {
	outline: 2px solid var(--bds-or-texte, #806732);
	outline-offset: 3px;
	border-radius: 2px;
}

.bds-panier__icone,
.bds-compte__icone {
	width: 22px;
	height: 22px;
	display: block;
}

/* La pastille du compteur. Elle ne porte QUE le nombre : le libellé
   complet est dans l'aria-label du lien, pour les lecteurs d'écran. */
.bds-panier__n {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--bds-or-marque, #B08D45);
	color: var(--bds-encre, #1C1A18);
	font-family: var(--bds-sans, system-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-sizing: border-box;
	/* Les chiffres restent lisibles de gauche à droite en arabe. */
	direction: ltr;
	unicode-bidi: isolate;
}

/* Un point discret dit « vous êtes connectée » sans mot en plus. */
.bds-compte__point {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bds-or-texte, #806732);
}

/* --- Le tiroir ---------------------------------------------------- */

.bds-tiroir {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.bds-tiroir[hidden] { display: none; }

.bds-tiroir__fond {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 24, .45);
	opacity: 0;
	transition: opacity var(--bds-transition, .3s);
}

.bds-tiroir__panneau {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(400px, 92vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -8px 0 40px rgba(28, 26, 24, .18);
	/* Le tiroir vient du bord où il est ancré : à droite en français, à
	   gauche en arabe. `translate` ne se retourne pas seul, d'où la règle
	   RTL plus bas. */
	translate: 100% 0;
	transition: translate var(--bds-transition, .3s);
}

.bds-tiroir.is-ouvert .bds-tiroir__fond { opacity: 1; }
.bds-tiroir.is-ouvert .bds-tiroir__panneau { translate: 0 0; }

[dir="rtl"] .bds-tiroir__panneau { translate: -100% 0; }
[dir="rtl"] .bds-tiroir.is-ouvert .bds-tiroir__panneau { translate: 0 0; }
[dir="rtl"] .bds-tiroir__panneau { box-shadow: 8px 0 40px rgba(28, 26, 24, .18); }

/* La page derrière ne défile plus : sur téléphone, le geste partait
   dans la page au lieu du tiroir. */
html.bds-fige { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.bds-tiroir__fond,
	.bds-tiroir__panneau { transition: none; }
}

/* --- Tête --- */

.bds-tiroir .bds-tiroir__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	margin: 0;
	border-bottom: 1px solid var(--bds-bordure, #E3D5CB);
}

/* Le titre : Astra impose une marge basse et une taille aux h2. Sans la
   remettre à zéro, elle poussait la croix hors de l'alignement. */
.bds-tiroir .bds-tiroir__titre {
	margin: 0;
	padding: 0;
	font-family: var(--bds-serif, Didot, serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--bds-encre, #1C1A18);
}

/*
 * La croix de fermeture.
 *
 * Astra habille TOUS les <button> : fond, bordure, padding, ombre, taille
 * de police, transformation du texte. Une classe seule ne suffisait pas —
 * le bouton héritait d'un padding qui le décalait du titre. On remet donc
 * chaque propriété à sa valeur voulue, avec une spécificité qui passe
 * devant celle d'Astra.
 */
.bds-tiroir .bds-tiroir__croix,
.bds-tiroir .bds-tiroir__croix:hover,
.bds-tiroir .bds-tiroir__croix:focus {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: none;
	color: var(--bds-gris, #6B635B);
	font-family: var(--bds-sans, system-ui);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color var(--bds-transition, .3s), background var(--bds-transition, .3s);
}

.bds-tiroir .bds-tiroir__croix:hover {
	color: var(--bds-encre, #1C1A18);
	background: var(--bds-creme, #FBF6F1);
}

.bds-tiroir .bds-tiroir__croix:focus-visible {
	outline: 2px solid var(--bds-or-texte, #806732);
	outline-offset: 1px;
}

/* Le signe × est un caractère : il ne tombe pas sur la ligne de base au
   centre optique de son carré. On le remonte d'un cheveu. */
.bds-tiroir .bds-tiroir__croix > span {
	display: block;
	margin-top: -.12em;
}

/* --- Corps --- */

.bds-tiroir__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.3rem 1.4rem;
	/* Beaucoup d'articles : on défile dans le tiroir, pas dans la page. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bds-tiroir__vide {
	margin: 1rem 0 1.4rem;
	color: var(--bds-texte, #4A443E);
}

.bds-tiroir__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bds-tiroir__ligne {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: .2rem .85rem;
	align-items: start;
	padding: .85rem 0;
	border-bottom: 1px solid var(--bds-bordure, #E3D5CB);
}

.bds-tiroir__vignette {
	grid-row: span 2;
	display: block;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--bds-blush, #F7EBE4);
}

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

.bds-tiroir__detail { min-width: 0; }

.bds-tiroir__nom {
	display: block;
	font-family: var(--bds-serif, Didot, serif);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--bds-encre, #1C1A18);
}

.bds-tiroir__variante,
.bds-tiroir__q {
	display: block;
	font-size: .84rem;
	color: var(--bds-gris, #6B635B);
	margin-top: .15rem;
}

/* La quantité et le prix restent en lecture gauche-à-droite. */
.bds-tiroir__q { direction: ltr; unicode-bidi: isolate; }

.bds-tiroir__retirer {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	color: var(--bds-gris, #6B635B);
	font-size: 1.3rem;
	line-height: 1;
	text-decoration: none;
	border-radius: 50%;
}

.bds-tiroir__retirer:hover {
	color: var(--bds-erreur, #9B2C2C);
	background: var(--bds-creme, #FBF6F1);
}

.bds-tiroir__retirer:focus-visible {
	outline: 2px solid var(--bds-or-texte, #806732);
	outline-offset: 1px;
}

/* --- Total et sortie --- */

.bds-tiroir__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.1rem 0 .25rem;
	font-size: 1.05rem;
	color: var(--bds-encre, #1C1A18);
}

.bds-tiroir__total strong { font-size: 1.2rem; }

.bds-tiroir__note {
	margin: 0 0 1.2rem;
	font-size: .82rem;
	color: var(--bds-gris, #6B635B);
}

.bds-tiroir__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .7rem;
	/* Les boutons restent en bas même si la liste est courte. */
	margin-top: auto;
}

.bds-tiroir__actions .bds-btn { text-align: center; }
.bds-tiroir__actions .bds-lien { align-self: center; }

/* --- Contre les règles du thème parent ---------------------------- */

/*
 * Astra souligne les liens dans le contenu et impose ses marges aux
 * paragraphes et aux listes. Le tiroir est une fenêtre, pas du contenu
 * d'article : on neutralise là où c'est nécessaire.
 */
.bds-tiroir a { text-decoration: none; }
.bds-tiroir p { margin-block: 0; }
.bds-tiroir ul { margin: 0; padding: 0; list-style: none; }

.bds-tiroir .bds-tiroir__nom,
.bds-tiroir .bds-tiroir__variante,
.bds-tiroir .bds-tiroir__q { text-transform: none; letter-spacing: normal; }

/* Le montant que WooCommerce enveloppe dans ses propres balises. */
.bds-tiroir .woocommerce-Price-amount { white-space: nowrap; }

/* ==================================================================
   LE PANIER SUR TÉLÉPHONE
   ------------------------------------------------------------------
   Astra replie le menu — et l'icône du panier avec — derrière le
   hamburger sous 921 px. Ce bouton fixe rend le panier visible sans
   ouvrir le menu.

   En bas à droite : le pouce y arrive plus facilement qu'au coin
   haut-droit sur un téléphone tenu à une main.

   Contrastes mesurés :
     rempli : encre #1C1A18 sur or #B08D45       5,57:1
     vide   : encre sur blanc                   17,35:1
     vide   : contour or #A58441 sur blanc       3,51:1  (seuil composant)
   ================================================================== */

.bds-flottant-cadre { display: contents; }

.bds-flottant {
	/* Au-dessus du seuil, tout se passe dans le bandeau : rien à afficher. */
	display: none;
}

/* 921 px : le seuil où Astra bascule sur le hamburger. Aligner le nôtre
   dessus évite la zone où ni l'un ni l'autre ne serait visible. */
@media (max-width: 921px) {
	.bds-flottant {
		position: fixed;
		/* La marge basse tient compte de la barre d'accueil des iPhone :
		   sans env(), le bouton se retrouve à moitié sous le trait. */
		inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
		inset-inline-end: 1rem;
		z-index: 9990;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		border: 1px solid #A58441;
		background: #fff;
		color: var(--bds-encre, #1C1A18);
		text-decoration: none;
		box-shadow: 0 4px 18px rgba(28, 26, 24, .18);
		transition: background var(--bds-transition, .3s), transform var(--bds-transition, .3s);
	}

	/* Rempli : on ne peut pas le manquer. */
	.bds-flottant--plein {
		background: var(--bds-or-marque, #B08D45);
		border-color: var(--bds-or-trait, #A58441);
	}

	.bds-flottant__icone {
		width: 24px;
		height: 24px;
		display: block;
	}

	.bds-flottant__n {
		position: absolute;
		inset-block-start: -2px;
		inset-inline-end: -2px;
		min-width: 21px;
		height: 21px;
		padding: 0 5px;
		border-radius: 999px;
		border: 2px solid #fff;
		background: var(--bds-encre, #1C1A18);
		color: #fff;
		font-family: var(--bds-sans, system-ui);
		font-size: 11px;
		font-weight: 700;
		line-height: 17px;
		text-align: center;
		box-sizing: border-box;
		direction: ltr;
		unicode-bidi: isolate;
	}

	.bds-flottant:active { transform: scale(.94); }

	.bds-flottant:focus-visible {
		outline: 3px solid var(--bds-or-texte, #806732);
		outline-offset: 2px;
	}

	/*
	 * Dans le menu déplié, l'icône du bandeau ferait doublon avec le bouton
	 * flottant, tous deux visibles en même temps. On garde le flottant, qui
	 * est là en permanence.
	 */
	.bds-menu-panier { display: none; }

	/* Le bouton passe au-dessus du pied de page : on lui laisse la place
	   pour ne rien masquer du dernier bloc. */
	.site-footer { padding-block-end: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bds-flottant { transition: none; }
	.bds-flottant:active { transform: none; }
}

/* Le tiroir doit rester au-dessus du bouton flottant. */
.bds-tiroir { z-index: 9999; }

/* ==================================================================
   LIVRAISON OFFERTE ET DÉLAIS
   ------------------------------------------------------------------
   « Plus que 120 Dh » fait ajouter un second bijou ; « offerte dès
   500 Dh » ne dit pas où l'on en est.

   Contrastes mesurés :
     texte or #806732 sur blush #F7EBE4     4,60:1
     atteint vert #12602C sur #E8F3EA       6,74:1
     délai encre sur blanc                 17,35:1
     note du délai gris #6B635B sur blanc   5,90:1
   ================================================================== */

.bds-franco {
	margin: 0 0 .9rem;
	padding: .65rem .85rem;
	border-radius: 3px;
	background: var(--bds-blush, #F7EBE4);
	color: var(--bds-or-texte, #806732);
	font-size: .88rem;
	line-height: 1.45;
	text-align: center;
}

/* Le seuil atteint change de couleur ET de mot : lu en noir et blanc, la
   coche et « offerte » suffisent à comprendre. */
.bds-franco--atteint {
	background: #E8F3EA;
	color: #12602C;
	font-weight: 600;
}

.bds-franco--atteint span { margin-inline-end: .3em; }

/* Dans le tiroir, le message se colle au total qu'il commente. */
.bds-tiroir .bds-franco { margin-bottom: .5rem; }

/* --- Le délai, dans le récapitulatif de commande ------------------- */

.bds-delai th,
.bds-delai td { vertical-align: top; }

.bds-delai td strong {
	display: block;
	color: var(--bds-encre, #1C1A18);
}

.bds-delai__note {
	display: block;
	margin-top: .15rem;
	font-size: .82rem;
	color: var(--bds-gris, #6B635B);
	line-height: 1.4;
}