/* ==========================================================================
   La carte sur le site public — « ardoise de pub ».
   Calquée sur la carte imprimée du Sinclair : panneau vert profond, titres or
   en capitales, noms crème, prix or. Pensée d'abord pour le téléphone (c'est là
   que le QR amène les clients), avec une mise en deux colonnes sur grand écran.
   ========================================================================== */

/* Les variables sont posées sur la carte ET sur la barre d'onglets : ces deux
   éléments sont voisins (pas imbriqués), donc chacun a besoin de sa propre copie,
   sinon la barre d'onglets se retrouve sans fond (transparente) et le texte se
   superpose au contenu qui défile derrière. */
.cb-carte,
.cb-onglets {
	--cb-vert: #05371e;
	--cb-vert-fonce: #042514;
	--cb-creme: #f6f1e4;
	--cb-or: #e9cd7c;
	--cb-or-vif: #f2d98a;
	--cb-estompe: rgba(246, 241, 228, 0.62);
	--cb-filet: rgba(233, 205, 124, 0.22);
	--cb-rouge: #f08a80;
}

/* ---------------------------------------------------- Onglets de catégories
   Barre collante à deux visages :
   - au repos, en haut sur le fond clair de la page : sobre, un simple filet ;
   - une fois figée au défilement (classe « est-collee », posée par carte.js) :
     la pastille verte, lisible par-dessus le panneau vert.
   La transition CSS assure le passage en douceur de l'un à l'autre. */

.cb-onglets {
	position: sticky;
	top: var(--tr-hauteur-entete, 0px);
	z-index: 20;
	margin: 0 0 2rem;
	padding: 0.55rem 0.5rem;

	/* État « posé » (défaut). */
	background: transparent;
	border-radius: 6px;
	border-bottom: 1px solid var(--tr-filet, rgba(28, 26, 23, 0.12));
	box-shadow: none;

	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	transition: background 280ms ease, border-radius 280ms ease, box-shadow 280ms ease,
		border-color 280ms ease, padding 280ms ease;
}

.cb-onglets::-webkit-scrollbar {
	display: none;
}

.cb-onglets ul {
	display: flex;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.cb-onglets a {
	display: block;
	padding: 0.5rem 1.05rem;
	border-radius: 999px;
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tr-estompe, #6b6559);
	text-decoration: none;
	transition: background 200ms, color 200ms;
}

.cb-onglets a:hover,
.cb-onglets a:focus-visible {
	color: var(--tr-texte, #1c1a17);
	background: color-mix(in srgb, var(--tr-or, #9a7420) 12%, transparent);
}

.cb-onglets a.est-actif {
	background: var(--tr-or, #9a7420);
	color: #fff;
}

/* État « collé » : la pastille verte, une fois la barre figée au défilement. */
.cb-onglets.est-collee {
	padding: 0.6rem 0.75rem;
	background: var(--cb-vert-fonce);
	border-radius: 999px;
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.cb-onglets.est-collee a {
	color: var(--cb-estompe);
}

.cb-onglets.est-collee a:hover,
.cb-onglets.est-collee a:focus-visible {
	color: var(--cb-creme);
	background: rgba(233, 205, 124, 0.14);
}

.cb-onglets.est-collee a.est-actif {
	background: var(--cb-or);
	color: var(--cb-vert-fonce);
}

/* ------------------------------------------------------------- Le panneau */

.cb-carte--site {
	position: relative;
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
	background:
		radial-gradient(120% 60% at 50% -10%, rgba(233, 205, 124, 0.12), transparent 60%),
		linear-gradient(180deg, var(--cb-vert) 0%, var(--cb-vert-fonce) 100%);
	border: 1px solid var(--cb-filet);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	color: var(--cb-creme);

	/* Deux colonnes sur grand écran, comme la carte imprimée. Les catégories
	   coulent naturellement de l'une à l'autre sans jamais se couper. */
	column-gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
	.cb-carte--site {
		column-count: 2;
	}
}

/* --------------------------------------------------------------- Catégories */

.cb-categorie {
	break-inside: avoid;
	margin: 0 0 2.5rem;
	/* Compense la barre d'onglets collante quand on saute à une ancre. */
	scroll-margin-top: calc(var(--tr-hauteur-entete, 0px) + 5rem);
}

.cb-categorie:last-child {
	margin-bottom: 0;
}

.cb-categorie__entete {
	margin-bottom: 1.25rem;
}

.cb-categorie__titre {
	position: relative;
	margin: 0;
	padding-bottom: 0.6rem;
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cb-or);
	border-bottom: 2px solid var(--cb-filet);
}

/* Le petit trait or plein sous le début du titre : signature « pub ». */
.cb-categorie__titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 2.5rem;
	height: 2px;
	background: var(--cb-or);
}

.cb-categorie__intro {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--cb-estompe);
}

/* ---------------------------------------------------------------- Boissons */

.cb-boissons {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-boisson {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(246, 241, 228, 0.09);
}

.cb-boisson:last-child {
	border-bottom: 0;
}

.cb-boisson__texte {
	min-width: 0;
}

.cb-boisson__nom {
	margin: 0;
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cb-creme);
}

.cb-boisson__meta {
	margin: 0.2rem 0 0;
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cb-or);
	opacity: 0.85;
}

/* La composition du cocktail : c'est ce qui remplissait « le vide » reproché. */
.cb-boisson__note {
	margin: 0.3rem 0 0;
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--cb-estompe);
	max-width: 42ch;
}

/* Le prix : un pavé or, lisible d'un coup d'œil, aligné en colonne nette. */
.cb-boisson__prix {
	display: flex;
	flex-shrink: 0;
	gap: 0.9rem;
	text-align: right;
}

.cb-prix {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.cb-prix__label {
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-estompe);
}

.cb-prix__valeur {
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 1.12rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--cb-or-vif);
}

/* -------------------------------------------------------------- Coup de cœur */

.cb-boisson--coup-de-coeur {
	margin: 0.35rem -0.9rem;
	padding: 0.85rem 0.9rem;
	border-bottom: 0;
	background: linear-gradient(90deg, rgba(233, 205, 124, 0.14), rgba(233, 205, 124, 0.02));
	border-left: 3px solid var(--cb-or);
	border-radius: 0 8px 8px 0;
}

.cb-boisson--coup-de-coeur + .cb-boisson {
	border-top: 1px solid rgba(246, 241, 228, 0.09);
}

.cb-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.45rem;
	padding: 0.16em 0.6em;
	border-radius: 999px;
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateY(-2px);
}

.cb-badge--coeur {
	background: var(--cb-or);
	color: var(--cb-vert-fonce);
}

.cb-badge--epuise {
	background: rgba(240, 138, 128, 0.16);
	color: var(--cb-rouge);
}

/* --------------------------------------------------------------- Épuisé */

.cb-boisson--epuise {
	opacity: 0.45;
}

.cb-boisson--epuise .cb-boisson__nom,
.cb-boisson--epuise .cb-prix__valeur {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.cb-vide {
	padding: 3rem 1.5rem;
	text-align: center;
	font-style: italic;
	font-size: 1.1rem;
	color: var(--cb-estompe);
}

/* ==========================================================================
   Sélection de la page d'accueil (héritée : le thème pose déjà le fond vert).
   ========================================================================== */

.cb-carte--selection .cb-boisson__nom {
	font-family: var(--tr-police-ui, system-ui, sans-serif);
	font-size: 1.15rem;
	font-weight: 600;
}

.cb-carte--selection .cb-boisson__meta {
	color: var(--tr-or-clair, #e9cd7c);
}

.cb-carte--selection .cb-prix__valeur {
	font-weight: 800;
}

/* ==========================================================================
   Téléphone
   ========================================================================== */

@media (max-width: 600px) {
	.cb-boisson {
		flex-direction: column;
		gap: 0.45rem;
	}

	.cb-boisson__prix {
		gap: 1.1rem;
		text-align: left;
	}

	.cb-prix {
		flex-direction: row;
		align-items: baseline;
		gap: 0.4rem;
	}

	.cb-boisson--coup-de-coeur {
		margin-left: -0.9rem;
		margin-right: -0.9rem;
	}
}

/* ==========================================================================
   Impression — le patron voudra tôt ou tard sortir la carte sur papier.
   On repasse en clair (sobre, économe en encre) et en deux colonnes.
   ========================================================================== */

@media print {
	.cb-onglets {
		display: none;
	}

	.cb-carte--site {
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		color: #111;
		column-count: 2;
		column-gap: 2.5rem;
	}

	.cb-categorie__titre {
		color: #000;
		border-color: #000;
	}

	.cb-categorie__titre::after {
		background: #000;
	}

	.cb-boisson__nom {
		color: #000;
	}

	.cb-boisson__meta {
		color: #444;
	}

	.cb-boisson__note {
		color: #333;
	}

	.cb-prix__valeur {
		color: #000;
	}

	.cb-boisson--coup-de-coeur {
		background: none;
		border-left: 2px solid #000;
	}

	.cb-boisson--epuise {
		display: none;
	}
}