/* =========================================================
   Bizerte Menu – styles
   Couleurs modifiables dans le premier bloc (.bzm).
   ========================================================= */

.bzm {
	--bzm-or: #B5954F;          /* onglets, prix, flèche suivante */
	--bzm-or-fonce: #957834;    /* survol des onglets */
	--bzm-or-clair: #E2CE9E;    /* contour de la carte */
	--bzm-encre: #1E1E1E;       /* titres, onglet actif */
	--bzm-texte: #707070;       /* descriptions */
	--bzm-ligne: #E4E4E4;       /* trait sous le nom du plat */
	--bzm-fond: #FFFFFF;        /* fond de la carte */

	--bzm-police-titre: var(--e-global-typography-primary-font-family, "Cormorant Garamond"), Georgia, serif;
	--bzm-police-texte: var(--e-global-typography-text-font-family, "Work Sans"), Arial, sans-serif;

	--bzm-largeur-onglets: 900px; /* largeur max. de la zone des onglets */

	/* Bloc centré de 1200px (réglable avec largeur="..." dans le shortcode) */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--bzm-largeur, 1200px);
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
	font-family: var(--bzm-police-texte);
}

/* L'attribut hidden doit toujours gagner sur display:grid/flex */
.bzm [hidden] {
	display: none !important;
}

/* ---------- Titre ---------- */
.bzm .bzm__titre {
	margin: 0 0 22px;
	font-family: var(--bzm-police-titre);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--bzm-encre);
}

/* ---------- Onglets ---------- */
.bzm .bzm__onglets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 auto 36px;
	font-size: 16px;
}

.bzm .bzm__onglet {
	appearance: none;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 0;
	background: var(--bzm-or);
	color: #fff;
	font-family: var(--bzm-police-texte);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s ease;
	font-size: 15px;
	font-family: 'Work Sans';
}

.bzm .bzm__onglet:hover,
.bzm .bzm__onglet:focus {
	background: var(--bzm-or-fonce);
	color: #fff;
}

.bzm .bzm__onglet.is-active,
.bzm .bzm__onglet.is-active:hover,
.bzm .bzm__onglet.is-active:focus {
	background: #000;
	color: #fff;
}

.bzm .bzm__onglet:focus-visible {
	outline: 2px solid var(--bzm-encre);
	outline-offset: 2px;
}

/* ---------- Carte ---------- */
.bzm .bzm__carte {
	background: var(--bzm-fond);
	border: 1px solid var(--bzm-or-clair);
	border-radius: 14px 40px 14px 40px;
	padding: 40px clamp(20px, 5vw, 64px);
	text-align: left;
}

/* ---------- Slider ---------- */
/* La fenêtre masque les diapositives voisines ; les marges négatives
   laissent de la place à l'ombre des photos pour ne pas la couper. */
.bzm .bzm__fenetre {
	overflow: hidden;
	margin: -14px -16px;
}

.bzm .bzm__piste {
	display: flex;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.bzm .bzm__piste.is-instant {
	transition: none;
}

.bzm .bzm__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 34px 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chaque diapositive occupe toute la largeur de la carte */
.bzm .bzm__diapo {
	box-sizing: border-box;
	flex: 0 0 100%;
	min-width: 0;
	padding: 14px 16px;
}

/* ---------- Plat ---------- */
.bzm .bzm__plat {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.bzm .bzm__plat--sans-photo {
	grid-template-columns: minmax(0, 1fr);
}

.bzm .bzm__photo {
	position: relative;
	width: 108px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 6px 10px rgba(0, 0, 0, .28);
}

.bzm .bzm__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

/* Fin cercle blanc à l'intérieur de la photo */
.bzm .bzm__photo::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	pointer-events: none;
}

.bzm .bzm__nom {
	margin: 0 0 8px;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--bzm-ligne);
	font-family: var(--bzm-police-texte);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bzm-encre);
}

.bzm .bzm__desc {
	margin: 0 0 14px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--bzm-texte);
}

.bzm .bzm__prix {
	display: inline-block;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--bzm-or);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.bzm .bzm__prix .amount,
.bzm .bzm__prix bdi {
	color: inherit;
}

.bzm .bzm__prix ins {
	text-decoration: none;
	background: none;
}

.bzm .bzm__prix del {
	margin-right: 6px;
	font-weight: 400;
	opacity: .75;
}

/* Apparition douce quand on change d'onglet */
.bzm .bzm__panneau.is-entrant {
	animation: bzm-apparition .35s ease both;
}

@keyframes bzm-apparition {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Pagination ---------- */
.bzm .bzm__pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}

.bzm .bzm__fleche {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--bzm-encre);
	border-radius: 50%;
	background: transparent;
	color: var(--bzm-encre);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.bzm .bzm__fleche--next {
	border-color: var(--bzm-or);
	color: var(--bzm-or);
}

/* Chevron fin */
.bzm .bzm__fleche::before {
	content: "";
	width: 6px;
	height: 6px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}
.bzm .bzm__fleche--prev::before {
	transform: rotate(45deg);
	margin-left: 2px;
}
.bzm .bzm__fleche--next::before {
	transform: rotate(-135deg);
	margin-right: 2px;
}

.bzm .bzm__fleche:hover:not(:disabled),
.bzm .bzm__fleche:focus:not(:disabled) {
	background: var(--bzm-or);
	border-color: var(--bzm-or);
	color: #fff;
}

.bzm .bzm__fleche:focus-visible {
	outline: 2px solid var(--bzm-encre);
	outline-offset: 2px;
}

.bzm .bzm__fleche:disabled {
	opacity: .3;
	cursor: default;
	background: transparent;
}

/* Texte lu par les lecteurs d'écran uniquement */
.bzm .bzm__statut {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Tablette ---------- */
@media (max-width: 900px) {
	.bzm .bzm__liste {
		gap: 30px 28px;
	}
	.bzm .bzm__plat {
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 16px;
	}
	.bzm .bzm__photo {
		width: 90px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.bzm .bzm__onglets {
		gap: 5px;
		margin-bottom: 24px;
	}
	.bzm .bzm__carte {
		border-radius: 10px 28px 10px 28px;
		padding: 26px 18px;
	}
	.bzm .bzm__liste {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.bzm .bzm__plat {
		grid-template-columns: 80px minmax(0, 1fr);
	}
	.bzm .bzm__photo {
		width: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bzm .bzm__panneau.is-entrant {
		animation: none;
	}
	.bzm .bzm__piste {
		transition: none;
	}
	.bzm .bzm__onglet,
	.bzm .bzm__fleche {
		transition: none;
	}
}


/* =========================================================
   Shortcode 2 : [bizerte_menu_liste]
   Sections alternées photo / liste avec défilement
   ========================================================= */

.bzl {
	--bzl-or: #B5954F;          /* noms des plats, prix, rond "scroll" */
	--bzl-titre: #2C3540;       /* titres des sections */
	--bzl-texte: #3A3A3A;       /* descriptions */
	--bzl-ligne: #E4E4E4;       /* traits de séparation */
	--bzl-curseur: #2C3540;     /* barre de défilement */
	--bzl-onglet: #2B3A55;      /* contour et texte des boutons de catégories */

	--bzl-police-titre: var(--e-global-typography-primary-font-family, "Cormorant Garamond"), Georgia, serif;
	--bzl-police-texte: var(--e-global-typography-text-font-family, "Work Sans"), Arial, sans-serif;

	--bzl-marge-ext: clamp(48px, 8vw, 110px);  /* côté extérieur (place du "scroll") */
	--bzl-marge-int: clamp(24px, 4vw, 56px);   /* côté du trait central */
	--bzl-espace: clamp(40px, 5vw, 64px);      /* espace au-dessus/dessous des traits */

	box-sizing: border-box;
	width: 100%;
	max-width: var(--bzl-largeur, 1200px);
	margin: 0 auto;
	padding: 0 16px;
	font-family: var(--bzl-police-texte);
	text-align: left;
}

/* L'attribut hidden doit toujours gagner */
.bzl [hidden] {
	display: none !important;
}

/* ---------- Boutons des catégories (onglets="oui" ou "filtre") ---------- */
.bzl .bzl__onglets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 8px;
	max-width: 1040px;
	margin: 0 auto var(--bzl-espace);
}

.bzl .bzl__onglet {
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--bzl-onglet);
	border-radius: 0;
	background: #fff;
	color: var(--bzl-onglet);
	font-family: var(--bzl-police-texte);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bzl .bzl__onglet:hover,
.bzl .bzl__onglet:focus {
	border-color: var(--bzl-or);
	background: #fff;
	color: var(--bzl-or);
	text-decoration: none;
}

.bzl .bzl__onglet.is-active,
.bzl .bzl__onglet.is-active:hover,
.bzl .bzl__onglet.is-active:focus {
	border-color: var(--bzl-or);
	background: var(--bzl-or);
	color: #fff;
}

.bzl .bzl__onglet:focus-visible {
	outline: 2px solid var(--bzl-onglet);
	outline-offset: 2px;
}

/* ---------- Rangée : photo | liste ---------- */
.bzl .bzl__rangee {
	scroll-margin-top: var(--bzl-decalage, 30px);
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	margin: 0;
	padding: var(--bzl-espace) 0;
}

.bzl .bzl__rangee:first-child {
	padding-top: 0;
}

.bzl .bzl__rangee:last-child {
	padding-bottom: 0;
}

/* Mode filtre : une seule section visible à la fois */
.bzl.bzl--filtre .bzl__sections .bzl__rangee {
	padding: 0;
	border-top: 0;
}

.bzl .bzl__rangee.is-entrant {
	animation: bzm-apparition .35s ease both;
}

/* Trait horizontal entre deux sections */
.bzl .bzl__rangee + .bzl__rangee {
	border-top: 1px solid var(--bzl-ligne);
}

/* Trait vertical central (continu d'une section à l'autre) */
.bzl .bzl__rangee::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--bzl-ligne);
}

/* Colonne de gauche / de droite selon le côté de la photo */
.bzl .bzl__rangee--image-gauche .bzl__visuel,
.bzl .bzl__rangee--image-droite .bzl__contenu {
	grid-column: 1;
	grid-row: 1;
	padding: 0 var(--bzl-marge-int) 0 var(--bzl-marge-ext);
}

.bzl .bzl__rangee--image-gauche .bzl__contenu,
.bzl .bzl__rangee--image-droite .bzl__visuel {
	grid-column: 2;
	grid-row: 1;
	padding: 0 var(--bzl-marge-ext) 0 var(--bzl-marge-int);
}

/* ---------- Photo ---------- */
.bzl .bzl__visuel {
	min-width: 0;
}

.bzl .bzl__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 9 / 10;
	object-fit: cover;
	border-radius: 6px 48px 6px 48px;
}

.bzl .bzl__rangee--image-droite .bzl__image {
	border-radius: 48px 6px 48px 6px;
}

/* ---------- Liste ---------- */
.bzl .bzl__contenu {
	min-width: 0;
	padding-top: 12px;
}

.bzl .bzl__titre {
	margin: 0 0 22px;
	font-family: var(--bzl-police-titre);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bzl-titre);
	font-family: 'Cormorant Garamond';
}

.bzl .bzl__zone {
	position: relative;
}

.bzl .bzl__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bzl .bzl__plat {
	margin: 0 0 24px;
	padding: 0;
}

.bzl .bzl__plat:last-child {
	margin-bottom: 0;
}

.bzl .bzl__texte {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bzl-ligne);
}

.bzl .bzl__nom {
	margin: 0 0 4px;
	font-family: var(--bzl-police-texte);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bzl-or);
	font-family: 'Work Sans';
}

.bzl .bzl__desc {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--bzl-texte);
}

.bzl .bzl__prix {
	display: inline-block;
	margin-top: 14px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--bzl-or);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.bzl .bzl__prix .amount,
.bzl .bzl__prix bdi {
	color: inherit;
}

.bzl .bzl__prix ins {
	text-decoration: none;
	background: none;
}

.bzl .bzl__prix del {
	margin-right: 6px;
	font-weight: 400;
	opacity: .75;
}

/* ---------- Défilement (plus de plats que "visibles") ---------- */
.bzl .bzl__zone.is-defilable .bzl__liste {
	max-height: 26rem; /* valeur de secours, recalculée par le script */
	overflow-y: auto;
	scrollbar-width: none;                 /* barre native masquée (Firefox) */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

.bzl .bzl__zone.is-defilable .bzl__liste::-webkit-scrollbar {
	display: none;                         /* barre native masquée (Chrome, Safari) */
}

/* Plus de fondu une fois en bas de la liste */
.bzl .bzl__zone.is-fin .bzl__liste {
	-webkit-mask-image: none;
	mask-image: none;
}

.bzl .bzl__liste:focus-visible {
	outline: 2px solid var(--bzl-or);
	outline-offset: 6px;
}

/* Barre fine à droite de la liste */
.bzl .bzl__barre {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -24px;
	width: 2px;
	background: rgba(0, 0, 0, .06);
	border-radius: 2px;
}

.bzl .bzl__curseur {
	display: block;
	width: 100%;
	height: 60px;
	background: var(--bzl-curseur);
	border-radius: 2px;
	transition: transform .1s linear;
}

/* Indicateur "SCROLL" vertical, côté extérieur */
.bzl .bzl__scroll {
	appearance: none;
	position: absolute;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--bzl-titre);
	cursor: pointer;
	transform: translateY(-50%);
}

.bzl .bzl__rangee--image-gauche .bzl__scroll {
	right: calc(var(--bzl-marge-ext) * -1 + 12px);
}

.bzl .bzl__rangee--image-droite .bzl__scroll {
	left: calc(var(--bzl-marge-ext) * -1 + 12px);
}

.bzl .bzl__scroll-texte {
	writing-mode: vertical-rl;
	font-family: var(--bzl-police-texte);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.bzl .bzl__scroll-trait {
	width: 1px;
	height: 26px;
	background: currentColor;
	transform-origin: top;
	transition: transform .3s ease;
}

.bzl .bzl__scroll-rond {
	position: relative;
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--bzl-or);
	transition: transform .3s ease;
}

/* Petite flèche vers le bas dans le rond */
.bzl .bzl__scroll-rond::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-right: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(45deg);
}

.bzl .bzl__scroll:hover .bzl__scroll-trait,
.bzl .bzl__scroll:focus-visible .bzl__scroll-trait {
	transform: scaleY(1.35);
}

.bzl .bzl__scroll:hover .bzl__scroll-rond,
.bzl .bzl__scroll:focus-visible .bzl__scroll-rond {
	transform: translateY(8px);
}

.bzl .bzl__scroll:focus-visible {
	outline: 2px solid var(--bzl-or);
	outline-offset: 2px;
}

/* En bas de la liste : la flèche remonte */
.bzl .bzl__zone.is-fin .bzl__scroll-rond::before {
	top: 5px;
	transform: rotate(-135deg);
}

/* Liste finalement assez courte : pas de défilement */
.bzl .bzl__zone.is-inutile .bzl__barre,
.bzl .bzl__zone.is-inutile .bzl__scroll {
	display: none;
}

.bzl .bzl__zone.is-inutile .bzl__liste {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---------- Tablette et mobile : photo au-dessus, liste en dessous ---------- */
@media (max-width: 768px) {
	.bzl .bzl__rangee {
		grid-template-columns: minmax(0, 1fr);
		padding: 44px 0;
	}
	.bzl .bzl__rangee::before {
		display: none;
	}
	.bzl .bzl__rangee .bzl__visuel,
	.bzl .bzl__rangee .bzl__contenu {
		grid-column: 1;
		grid-row: auto;
		padding: 0;
	}
	.bzl .bzl__visuel {
		margin-bottom: 26px;
	}
	.bzl .bzl__image {
		aspect-ratio: 4 / 3;
	}
	.bzl .bzl__contenu {
		padding-top: 0;
	}
	.bzl .bzl__zone.is-defilable {
		padding-right: 18px;
	}
	.bzl .bzl__barre {
		right: 0;
	}
	.bzl .bzl__onglets {
		gap: 6px;
	}
	.bzl .bzl__onglet {
		padding: 7px 12px;
		font-size: 12px;
	}
	.bzl.bzl--filtre .bzl__sections .bzl__rangee {
		padding: 0;
	}
	/* Pas de place pour l'indicateur vertical : la barre et le fondu suffisent */
	.bzl .bzl__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bzl .bzl__rangee.is-entrant {
		animation: none;
	}
	.bzl .bzl__onglet,
	.bzl .bzl__curseur,
	.bzl .bzl__scroll-trait,
	.bzl .bzl__scroll-rond {
		transition: none;
	}
}