/* ==========================================================================
   Bandeau store « My Botanical Garden » : bloc bleu très clair arrondi,
   lien fléché, titre Gotham Bold, trait vertical, liste Bebas Neue, tampon.
   ========================================================================== */

.bandeau-store {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--store-h);
	padding: var(--store-pad-top) var(--store-tampon-droite) var(--store-pad-bas) var(--store-pad-x);
	border-radius: var(--radius-media);
	background: var(--c-blue-ghost);
	color: var(--c-blue-dark);
	transition: background var(--t-hover);
}

/* ---------- Tout le bandeau est cliquable ----------
   Un seul vrai lien (« Vers le store ») dont la zone est étirée sur tout le bandeau :
   un seul arrêt au clavier, un seul nom pour les lecteurs d'écran. */
.bandeau-store--lien {
	cursor: pointer;

	& .bandeau-store__lien::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--z-dessus); /* au-dessus du titre et de la liste, eux-mêmes positionnés */
		border-radius: inherit;
	}

	/* Focus clavier : c'est tout le bandeau qui s'entoure. */
	& .bandeau-store__lien:focus-visible {
		outline: none;
	}

	&:has(.bandeau-store__lien:focus-visible) {
		outline: 2px solid var(--c-focus);
		outline-offset: 4px;
	}
}

.bandeau-store__lien {
	align-self: flex-start;
	color: var(--c-blue);

	& .lien-fleche__fleche {
		color: var(--c-blue);
	}
}

.bandeau-store__contenu {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: var(--store-titre-decalage);
}

.bandeau-store__titre,
.bandeau-store__liste {
	position: relative;
	top: var(--store-texte-bas);
}

.bandeau-store__titre {
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-store);
	line-height: var(--lh-display-store);
	letter-spacing: var(--ls-display-store);
	text-transform: uppercase;
}

.bandeau-store__liste {
	margin-left: var(--store-gap-trait);
	padding-left: var(--store-gap-liste);
	font-family: var(--ff-condensed);
	font-size: var(--fs-store-list);
	line-height: var(--lh-store-list);
	text-transform: uppercase;

	/* Trait vertical de 3 px, centré sur la liste. */
	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: var(--store-rule);
		height: var(--store-trait-h);
		background: var(--c-blue);
		transform: translateY(-50%);
	}
}

.bandeau-store__tampon {
	flex: none;
	width: var(--store-tampon-w);
	height: auto;
	margin-left: auto;
}

/* ---------- Survol de tout le bandeau (souris, à partir de la tablette) ---------- */
@media (hover: hover) and (min-width: 768px) {
	.bandeau-store--lien {
		&:hover,
		&:has(.bandeau-store__lien:focus-visible) {
			background: var(--c-blue-ghost-survol);

			/* Seconde flèche du lien, comme au survol d'un lien fléché. */
			& .fleche__svg + .fleche__svg {
				opacity: 1;
				transform: translate(-50%, -50%) rotate(var(--fleche-rotation)) translateX(var(--hover-decalage-fleche));
			}

			& .bandeau-store__liste::before {
				transform: translateY(-50%) scaleY(var(--store-trait-survol));
			}

			& .bandeau-store__tampon {
				rotate: var(--store-tampon-survol);
			}
		}
	}

	.bandeau-store__liste::before {
		transition: transform var(--t-apparition) var(--courbe-apparition);
	}

	/* Une fois apparu, le tampon réagit tout de suite au survol (sans le délai de cascade). */
	.bandeau-store--lien .bandeau-store__tampon.est-visible {
		transition-delay: 0s;
	}
}

/* Tablette : titre et liste côte à côte, tampon en haut à droite. */
@media (max-width: 1023.98px) {
	.bandeau-store {
		position: relative;
		padding: var(--space-l);
	}

	.bandeau-store__contenu {
		margin: var(--space-l) 0 0;
	}

	.bandeau-store__tampon {
		position: absolute;
		top: var(--space-m);
		right: var(--space-m);
		width: var(--store-tampon-tablette);
	}
}

/* Mobile : tout est empilé, le trait devient horizontal. */
@media (max-width: 767.98px) {
	.bandeau-store {
		width: calc(100% - 2 * var(--page-margin));
		min-height: 0;
		padding: var(--space-l) var(--space-m);
	}

	.bandeau-store__titre,
	.bandeau-store__liste {
		top: 0;
	}

	.bandeau-store__contenu {
		flex-direction: column;
		align-items: flex-start;
	}

	.bandeau-store__liste {
		margin: var(--space-m) 0 0;
		padding: var(--space-m) 0 0;

		&::before {
			top: 0;
			width: var(--store-trait-mobile);
			height: var(--store-rule);
			transform: none;
		}
	}

	.bandeau-store__tampon {
		position: static;
		align-self: center;
		width: var(--store-tampon-mobile);
		margin: var(--space-l) 0 0;
	}
}