/* Sélecteur de langue AbayaFemme, sobre, tactile et sans dépendance JS. */

.af-lang {
	--afl-ink: var(--af-color-ink, oklch(0.27 0.012 92));
	--afl-muted: var(--af-color-ink-muted, oklch(0.46 0.018 83));
	--afl-accent: var(--af-color-olive-700, oklch(0.43 0.04 103));
	--afl-accent-deep: var(--af-color-olive-900, oklch(0.31 0.028 101));
	--afl-surface: var(--af-surface-raised, oklch(0.992 0.008 78));
	--afl-ground: var(--af-color-ivory, oklch(0.975 0.012 78));
	--afl-hover: var(--af-color-olive-100, oklch(0.94 0.018 101));
	--afl-line: var(--af-color-border, oklch(0.89 0.018 77));
	--afl-focus: var(--af-color-focus, oklch(0.5 0.15 250));
	--afl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf7f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	font-family: var(--af-font-ui, system-ui, sans-serif);
	font-size: 0.875rem;
	line-height: 1.4;
}

.af-lang__box { position: relative; }

.af-lang__toggle {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.75rem;
	color: var(--afl-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--af-radius-md, 0.75rem);
	cursor: pointer;
	list-style: none;
	transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
	user-select: none;
}

.af-lang__toggle::-webkit-details-marker { display: none; }
.af-lang__toggle::marker { content: ""; }

.af-lang__toggle:hover,
.af-lang__box[open] > .af-lang__toggle {
	color: var(--afl-accent-deep);
	background: var(--afl-hover);
	border-color: color-mix(in oklch, var(--afl-accent) 22%, var(--afl-line));
}

.af-lang__toggle:focus-visible,
.af-lang__link:focus-visible {
	outline: 2px solid var(--afl-focus);
	outline-offset: 3px;
}

.af-lang__flag {
	display: inline-grid;
	width: 2.35rem;
	height: 2rem;
	place-items: center;
	background: var(--afl-ground);
	border: 1px solid var(--afl-line);
	border-radius: var(--af-radius-sm, 0.5rem);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.18rem;
	line-height: 1;
	box-shadow: 0 1px 2px oklch(0.22 0.015 75 / 6%);
}

.af-lang__flag--current {
	width: 1.65rem;
	height: 1.45rem;
	background: transparent;
	border: 0;
	font-size: 1.05rem;
	box-shadow: none;
}
.af-lang__current { font-weight: 620; letter-spacing: 0.01em; }
.af-lang__current--short { font-size: 0.72rem; letter-spacing: 0.08em; }

.af-lang__chevron {
	width: 0.42rem;
	height: 0.42rem;
	margin-inline-start: 0.05rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.62;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.af-lang__box[open] .af-lang__chevron { transform: rotate(-135deg); }

.af-lang__panel {
	position: absolute;
	z-index: 120;
	top: calc(100% + 0.55rem);
	inset-inline-end: 0;
	width: min(19rem, calc(100vw - 2rem));
	padding: 0.55rem;
	color: var(--afl-ink);
	background: var(--afl-surface);
	border: 1px solid var(--afl-line);
	border-radius: var(--af-radius-lg, 1.125rem);
	box-shadow: 0 1px 2px oklch(0.22 0.015 75 / 7%), 0 22px 50px oklch(0.22 0.015 75 / 16%);
}

.af-lang__eyebrow {
	margin: 0;
	padding: 0.55rem 0.7rem 0.45rem;
	color: var(--afl-muted);
	font-size: 0.69rem;
	font-weight: 720;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.af-lang__list { margin: 0; padding: 0; list-style: none; }
.af-lang__item { margin: 0; padding: 0; list-style: none; }
.af-lang__item::before,
.af-lang__item::after,
.af-lang__item > a::before { content: none; display: none; }

.af-lang__link {
	position: relative;
	display: grid;
	min-height: 3.25rem;
	grid-template-columns: 2.35rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.7rem;
	padding: 0.48rem 0.65rem;
	color: var(--afl-ink);
	border-radius: var(--af-radius-md, 0.75rem);
	text-decoration: none;
	transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.af-lang__link:hover,
.af-lang__link:focus-visible {
	color: var(--afl-accent-deep);
	background: var(--afl-hover);
}

/* Le thème colore tous ses liens avec `.af-scope :where(a)` (base.css) : même
   poids que `.af-lang__link`, et sa feuille est imprimée après celle-ci, donc
   c'est elle qui l'emportait. Sur fond clair l'olive passait pour l'encre
   attendue ; sur le charbon du pied de page le libellé devenait illisible. Un
   cran de spécificité, et la couleur redevient celle de la variante. */
.af-lang a.af-lang__link { color: var(--afl-ink); }

.af-lang a.af-lang__link:hover,
.af-lang a.af-lang__link:focus-visible { color: var(--afl-accent-deep); }

.af-lang__link:hover { transform: translateX(2px); }
.af-lang__link.is-current { background: color-mix(in oklch, var(--afl-hover) 72%, var(--afl-surface)); }

.af-lang__link.is-current::after {
	width: 1.25rem;
	height: 1.25rem;
	margin-inline-start: auto;
	background: var(--afl-accent-deep);
	border-radius: 50%;
	content: "";
	-webkit-mask: var(--afl-check) center / 0.75rem no-repeat;
	mask: var(--afl-check) center / 0.75rem no-repeat;
}

.af-lang__identity { display: grid; min-width: 0; gap: 0.06rem; }
.af-lang__nom { font-size: 0.88rem; font-weight: 650; line-height: 1.2; }
.af-lang__region { color: var(--afl-muted); font-size: 0.72rem; line-height: 1.25; }

.af-lang--inline .af-lang__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.af-lang--inline .af-lang__link { display: flex; min-height: 2.75rem; padding: 0.4rem 0.65rem; }
.af-lang--inline .af-lang__link.is-current::after { display: none; }

.af-lang--header {
	--afl-ink: var(--af-header-ink, var(--af-color-ink, oklch(0.27 0.012 92)));
	--afl-accent: var(--af-header-olive, var(--af-color-olive-700, oklch(0.43 0.04 103)));
	display: flex;
	align-items: stretch;
}

.af-lang--header .af-lang__box { display: flex; align-items: stretch; }

.af-lang--header .af-lang__toggle {
	position: relative;
	display: grid;
	min-width: 3.35rem;
	min-height: 3.2rem;
	grid-template-columns: auto auto;
	grid-template-rows: 1.35rem auto;
	place-content: center;
	column-gap: 0.22rem;
	row-gap: 0.18rem;
	padding: 0.2rem;
	color: var(--afl-ink);
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 0.72rem;
	line-height: 1;
}

.af-lang--header .af-lang__flag--current { grid-column: 1 / -1; justify-self: center; }
.af-lang--header .af-lang__current--short { justify-self: end; }
.af-lang--header .af-lang__chevron { align-self: center; justify-self: start; }

.af-lang--header .af-lang__toggle::after {
	position: absolute;
	inset: auto 20% 0;
	height: 1px;
	content: "";
	background: currentColor;
	opacity: 0;
	transform: scaleX(0.35);
	transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.af-lang--header .af-lang__toggle:hover,
.af-lang--header .af-lang__toggle:focus-visible,
.af-lang--header .af-lang__box[open] .af-lang__toggle { color: var(--afl-accent); background: none; }

.af-lang--header .af-lang__toggle:hover::after,
.af-lang--header .af-lang__toggle:focus-visible::after,
.af-lang--header .af-lang__box[open] .af-lang__toggle::after { opacity: 1; transform: scaleX(1); }
.af-lang--header .af-lang__panel { top: calc(100% - 0.05rem); }

/*
 * Le thème masque tout `.af-header-actions` sur téléphone. Le sélecteur est
 * pourtant une commande d'achat essentielle : on réaffiche uniquement cette
 * commande et on lui réserve une colonne compacte entre l'enseigne et la
 * recherche. Les liens Compte/Favoris/Panier restent masqués ici car leurs
 * raccourcis mobiles dédiés existent déjà.
 */
@media (max-width: 1099px) {
	.af-site-header .af-header__main {
		grid-template-columns: 3.15rem minmax(0, 1fr) 2.75rem 3.15rem 3.15rem;
	}

	.af-site-header .af-header-actions {
		display: flex;
		grid-column: 3;
		grid-row: 1;
		align-self: stretch;
		justify-self: stretch;
	}

	.af-site-header .af-header-actions > :not(.af-lang) { display: none; }

	.af-site-header .af-header-actions .af-lang,
	.af-site-header .af-header-actions .af-lang__box {
		display: flex;
		width: 100%;
		align-items: stretch;
	}

	.af-site-header .af-header-actions .af-lang__toggle {
		width: 100%;
		min-width: 2.75rem;
		min-height: 3.15rem;
	}

	.af-site-header .af-header-actions .af-lang__current,
	.af-site-header .af-header-actions .af-lang__chevron { display: none; }

	.af-site-header .af-header-actions .af-lang__panel {
		inset-inline-end: -6.65rem;
	}

	.af-site-header .af-header__mobile-search { grid-column: 4; }
	.af-site-header .af-header__mobile-cart { grid-column: 5; }
}

@media (max-width: 480px) {
	.af-site-header .af-header__main {
		grid-template-columns: 3.15rem minmax(0, 1fr) 2.75rem 3.15rem 3.15rem;
		gap: 0.2rem;
	}

	.af-site-header .af-header__wordmark { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
	.af-site-header .af-header__mobile-search { display: grid; grid-column: 4; }
	.af-site-header .af-header__mobile-cart { grid-column: 5; }
}

@media (max-width: 360px) {
	.af-site-header .af-header__main {
		grid-template-columns: 3.15rem minmax(0, 1fr) 2.75rem 3.15rem;
		gap: 0;
	}

	.af-site-header .af-header__wordmark { font-size: clamp(1.15rem, 5vw, 1.3rem); }
	.af-site-header .af-header__mobile-search { display: none; }
	.af-site-header .af-header__mobile-cart { grid-column: 4; }
	.af-site-header .af-header-actions .af-lang__panel { inset-inline-end: -3rem; }
	.af-site-header .af-header-actions .af-lang__flag--current { transform: translateX(0.4rem); }
}

/* ==========================================================================
   Le tiroir mobile.

   Le choix détaillé vit aussi en pied de tiroir, déplié, dans une grille de
   deux colonnes : les six libellés tiennent en trois rangées tactiles, sans
   rien ouvrir et sans pousser le catalogue vers le bas.
   ========================================================================== */

.af-lang-drawer {
	/* Collé au bas du panneau tant que la navigation ne le remplit pas : le
	   panneau est une colonne flex qui défile. */
	margin-block-start: auto;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--af-color-border, oklch(0.89 0.018 77));
}

.af-lang-drawer__label {
	margin: 0 0 0.5rem;
	padding-inline: 0.15rem;
	color: var(--af-color-ink-muted, oklch(0.46 0.018 83));
	font-family: var(--af-font-ui, system-ui, sans-serif);
	font-size: 0.69rem;
	font-weight: 720;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.af-lang--drawer { display: block; width: 100%; }

.af-lang--drawer .af-lang__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.3rem;
}

.af-lang--drawer .af-lang__link {
	min-height: 3rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid transparent;
	font-size: 0.9rem;
	font-weight: 560;
}

.af-lang--drawer .af-lang__link:hover { transform: none; }

.af-lang--drawer .af-lang__flag {
	width: 1.7rem;
	height: 1.3rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-size: 1.05rem;
}

.af-lang--drawer .af-lang__link.is-current {
	border-color: color-mix(in oklch, var(--afl-accent) 30%, transparent);
	font-weight: 660;
}

.af-lang--drawer .af-lang__link.is-current::after {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	mask-size: 0.7rem;
	-webkit-mask-size: 0.7rem;
}

/* ==========================================================================
   La barre basse du pied de page.

   Fond charbon : la palette du sélecteur est redéfinie ici, jamais les règles
   qui l'utilisent. Une rangée de pastilles centrée, alignée sur la mention
   légale qu'elle surplombe.
   ========================================================================== */

.af-lang--footer {
	--afl-ink: color-mix(in srgb, var(--af-color-white, #fff) 78%, transparent);
	--afl-muted: color-mix(in srgb, var(--af-color-white, #fff) 55%, transparent);
	--afl-hover: color-mix(in srgb, var(--af-color-white, #fff) 13%, transparent);
	--afl-accent-deep: var(--af-color-white, #fff);
	--afl-line: color-mix(in srgb, var(--af-color-white, #fff) 18%, transparent);
	display: block;
	width: 100%;
}

.af-lang--footer .af-lang__list { justify-content: center; gap: 0.15rem 0.2rem; }

.af-lang--footer .af-lang__link {
	min-height: 2.5rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--af-radius-pill, 999px);
	font-size: 0.86rem;
}

.af-lang--footer .af-lang__link:hover { transform: none; }

.af-lang--footer .af-lang__flag {
	width: 1.45rem;
	height: 1.1rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-size: 0.98rem;
}

.af-lang--footer .af-lang__link.is-current {
	background: var(--afl-hover);
	font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
	.af-lang__toggle,
	.af-lang__chevron,
	.af-lang__link { transition: none; }
	.af-lang__link:hover { transform: none; }
}

@media (prefers-contrast: more) {
	.af-lang__toggle { border-color: var(--afl-line); }
	.af-lang__link.is-current { text-decoration: underline; }
}

/* ==========================================================================
   La bannière de suggestion.

   Ancrée en bas, au-dessus de la barre de sécurité iOS et à gauche du bouton
   d'aide flottant du thème (`.af-support-fab`, z-index 390). Elle ne recouvre
   jamais un contrôle : elle se pose à côté.
   ========================================================================== */

.af-lang-suggest {
	--afl-ink: var(--af-color-ink, oklch(0.27 0.012 92));
	--afl-accent-deep: var(--af-color-olive-900, oklch(0.31 0.028 101));
	--afl-surface: var(--af-surface-raised, oklch(0.992 0.008 78));
	--afl-line: var(--af-color-border, oklch(0.89 0.018 77));
	position: fixed;
	z-index: 380;
	bottom: max(1.15rem, env(safe-area-inset-bottom));
	inset-inline-start: max(1.15rem, env(safe-area-inset-left));
	display: flex;
	width: min(26rem, calc(100vw - 2.3rem));
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 0.85rem;
	color: var(--afl-ink);
	background: var(--afl-surface);
	border: 1px solid var(--afl-line);
	border-radius: var(--af-radius-lg, 1.125rem);
	box-shadow: 0 1px 2px oklch(0.22 0.015 75 / 7%), 0 18px 44px oklch(0.22 0.015 75 / 18%);
	font-family: var(--af-font-ui, system-ui, sans-serif);
	opacity: 0;
	transform: translateY(0.6rem);
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.af-lang-suggest.is-open { opacity: 1; transform: none; }

.af-lang-suggest__flag {
	flex: none;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.35rem;
	line-height: 1;
}

.af-lang-suggest__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.35;
}

.af-lang-suggest a.af-lang-suggest__cta {
	flex: none;
	display: inline-flex;
	min-height: 2.4rem;
	align-items: center;
	padding: 0.4rem 0.85rem;
	color: var(--af-color-ivory, oklch(0.975 0.012 78));
	background: var(--afl-accent-deep);
	border-radius: var(--af-radius-pill, 999px);
	font-size: 0.82rem;
	font-weight: 640;
	text-decoration: none;
	white-space: nowrap;
}

.af-lang-suggest a.af-lang-suggest__cta:hover,
.af-lang-suggest a.af-lang-suggest__cta:focus-visible {
	background: var(--af-color-olive-700, oklch(0.43 0.04 103));
}

.af-lang-suggest__close {
	flex: none;
	display: grid;
	width: 2rem;
	height: 2rem;
	padding: 0;
	place-items: center;
	color: var(--af-color-ink-muted, oklch(0.46 0.018 83));
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.af-lang-suggest__close:hover,
.af-lang-suggest__close:focus-visible { color: var(--afl-ink); background: var(--af-color-olive-100, oklch(0.94 0.018 101)); }

.af-lang-suggest__close svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Sur téléphone la bannière traverse l'écran : à 360 px, une carte de 26 rem
   n'entre pas, et le bouton d'aide occupe déjà le coin droit. */
@media (max-width: 30rem) {
	.af-lang-suggest {
		inset-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
		bottom: max(0.75rem, env(safe-area-inset-bottom));
		width: auto;
		flex-wrap: wrap;
		row-gap: 0.55rem;
	}

	.af-lang-suggest__text { flex: 1 1 100%; order: 1; }
	.af-lang-suggest__flag { order: 0; }
	.af-lang-suggest__close { order: 0; margin-inline-start: auto; }
	.af-lang-suggest a.af-lang-suggest__cta { order: 2; width: 100%; justify-content: center; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.af-lang-suggest { transition: none; }
}