/*
 * La borne : l ecran du client.
 *
 * TROIS CONTRAINTES COMMANDENT TOUT LE RESTE, et aucune n est une
 * question de gout :
 *
 *   1. On commande DEBOUT, souvent d une seule main, parfois en tenant
 *      un enfant. D ou des cibles de 64 px : c est la largeur d un pouce,
 *      mesuree, pas devinee.
 *   2. On commande EN PLEIN SOLEIL, sur un marche. D ou des contrastes
 *      qui ne descendent jamais sous 4,5:1 - verifie au calcul, chaque
 *      couple.
 *   3. On commande EN TROIS MINUTES. D ou un seul chemin visible par
 *      ecran, et le recapitulatif toujours la, en bas, sans y penser.
 */

.comptoir-borne {
	--papier: #FBF8F2;
	--carte: #FFFFFF;
	--encre: #241E17;
	--doux: #5C5145;
	--trait: #D8CEBE;
	--braise: #8A2B18;
	--braise-clair: #FBEDE9;
	--pousse: #1F5C41;
	--pousse-clair: #E8F1EC;
	--eteint: #EFE9DF;

	/* La cible : 64 px de haut, partout ou l on peut appuyer. */
	--cible: 64px;
	--rayon: 14px;
	--marge: 20px;

	--titre: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	/*
	 * 64 PX PARTOUT, Y COMPRIS SUR LES BOUTONS SECONDAIRES. La premiere
	 * version descendait le « moins » et le « retirer » a 48 px, au motif
	 * qu ils comptent moins. C est l inverse : ce sont eux qu on touche
	 * par erreur, et un client qui retire son menu au lieu d en ajouter
	 * un ne recommence pas.
	 */

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--titre);
	font-size: 17px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.comptoir-borne *,
.comptoir-borne *::before,
.comptoir-borne *::after { box-sizing: border-box; }

body.comptoir-page-borne {
	margin: 0;
	padding: 0;
	background: #FBF8F2;
}

/* ---------------------------------------------------------------- */
/* L en-tete : ou je suis, et ce que je peux faire                   */
/* ---------------------------------------------------------------- */

.cb-tete {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px var(--marge);
	background: var(--carte);
	border-bottom: 1px solid var(--trait);
	position: sticky;
	top: 0;
	z-index: 5;
}

.cb-tete__lieu { flex: 1 1 auto; min-width: 0; }

.cb-tete__lieu b {
	display: block;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cb-tete__lieu span {
	display: block;
	font-size: 13.5px;
	color: var(--doux);
}

/* ---------------------------------------------------------------- */
/* Les boutons                                                       */
/* ---------------------------------------------------------------- */

.cb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--cible);
	min-width: var(--cible);
	padding: 0 22px;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.cb-bouton--fort {
	background: var(--braise);
	border-color: var(--braise);
	color: #FFFFFF;
}

.cb-bouton--large { width: 100%; }
.cb-bouton--calme { background: transparent; }

.cb-bouton[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/*
 * LE FOCUS SE VOIT. Un contour de 3 px, decale, qui tient sur les deux
 * fonds : sans lui, la navigation au clavier existe sans etre utilisable,
 * ce qui revient au meme.
 */
.comptoir-borne :focus-visible {
	outline: 3px solid var(--braise);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Le corps                                                          */
/* ---------------------------------------------------------------- */

.cb-corps {
	flex: 1 1 auto;
	padding: var(--marge);
	padding-bottom: 24px;
}

.cb-titre {
	margin: 0 0 4px;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.cb-titre:focus { outline: none; }

.cb-chapo {
	margin: 0 0 20px;
	color: var(--doux);
	font-size: 15.5px;
}

/* ---------------------------------------------------------------- */
/* Les grilles de tuiles                                             */
/* ---------------------------------------------------------------- */

.cb-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-tuile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 132px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}

/*
 * LA PHOTO DECIDE. Sur une tuile, le nom confirme un choix deja fait par
 * l oeil ; il ne l informe pas. D ou une image qui prend la moitie de la
 * hauteur, et un nom qui tient en deux lignes.
 */
.cb-tuile__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--eteint);
}

.cb-tuile__creux {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--eteint);
}

.cb-tuile__texte {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
	padding: 12px 14px 14px;
}

.cb-tuile__nom {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
}

.cb-tuile__prix {
	font-size: 15px;
	font-weight: 600;
	color: var(--doux);
	font-variant-numeric: tabular-nums;
}

.cb-tuile--epuise { cursor: not-allowed; }
.cb-tuile--epuise .cb-tuile__image,
.cb-tuile--epuise .cb-tuile__creux { filter: grayscale(1); opacity: .5; }
.cb-tuile--epuise .cb-tuile__nom { color: var(--doux); }

/*
 * ZERO GRISE, IL NE MASQUE PAS. Faire disparaitre un plat donnerait
 * l impression d une carte qui bouge toute seule, et le client
 * chercherait ce qu il a vu la veille. Il le voit, barre, et il sait
 * pourquoi.
 */
.cb-epuise {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--braise-clair);
	color: var(--braise);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.cb-reste {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pousse-clair);
	color: var(--pousse);
	font-size: 12.5px;
	font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Les etapes                                                        */
/* ---------------------------------------------------------------- */

.cb-fil {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--doux);
}

.cb-fil b { color: var(--encre); }

.cb-choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border: 0;
}

.cb-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--cible);
	padding: 10px 14px;
	border: 2px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}

.cb-option[aria-pressed="true"] {
	border-color: var(--braise);
	background: var(--braise-clair);
}

.cb-option__vignette {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--eteint);
}

.cb-option__corps { flex: 1 1 auto; min-width: 0; }
.cb-option__nom { font-weight: 650; }

.cb-option__sup {
	color: var(--doux);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.cb-option__compte {
	flex: 0 0 auto;
	min-width: 28px;
	font-weight: 800;
	color: var(--braise);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cb-option[disabled] { cursor: not-allowed; opacity: .55; }

/* ---------------------------------------------------------------- */
/* Le recapitulatif permanent                                        */
/* ---------------------------------------------------------------- */

.cb-pied {
	position: sticky;
	bottom: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px var(--marge);
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	background: var(--carte);
	border-top: 1px solid var(--trait);
}

.cb-pied__resume {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
}

.cb-pied__resume b {
	display: block;
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.cb-pied__resume span { color: var(--doux); font-size: 13.5px; }

.cb-lignes { margin: 0 0 20px; padding: 0; list-style: none; }

.cb-ligne {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--trait);
}

.cb-ligne__corps { flex: 1 1 auto; min-width: 0; }
.cb-ligne__nom { font-weight: 700; }

.cb-ligne__detail {
	margin: 2px 0 0;
	color: var(--doux);
	font-size: 14px;
}

/*
 * LE « SANS » DU RECAPITULATIF. Dernier endroit avant de payer ou le
 * client peut s apercevoir qu il a oublie de le poser - ou qu il l a
 * pose sans le vouloir. Il ne se fond donc pas dans le detail gris.
 */
.cb-ligne__sans {
	display: inline-block;
	margin: 4px 0 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--braise-clair);
	color: var(--braise);
	font-size: 13.5px;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* La personnalisation : ce qu on ajoute, ce qu on retire              */
/* ------------------------------------------------------------------ */

.cb-soustitre {
	margin: 22px 0 10px;
	color: var(--doux);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cb-soustitre:first-of-type { margin-top: 8px; }

/*
 * AJOUTER ET RETIRER SONT DEUX GESTES OPPOSES, et l ecran doit le dire
 * sans qu on lise. Un ajout retenu vire au vert - on met quelque chose ;
 * un retrait retenu vire au rouge ET SE BARRE - on enleve quelque chose.
 * Le meme jeu de couleurs pour les deux ferait cocher « oignon » a
 * quelqu un qui n en veut pas.
 */
.cb-choix--ajouts .cb-option[aria-pressed="true"] {
	border-color: var(--pousse);
	background: var(--pousse-clair);
}

.cb-choix--ajouts .cb-option[aria-pressed="true"] .cb-option__compte { color: var(--pousse); }

.cb-option--sans[aria-pressed="true"] .cb-option__nom {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/*
 * Le champ de remarque : 64 px de haut comme tout le reste, et une
 * bordure assez marquee pour qu on voie que c est un endroit ou ecrire.
 */
.cb-remarque {
	display: block;
	width: 100%;
	min-height: var(--cible);
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 2px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	font-size: 16px; /* Sous 16 px, iOS zoome tout seul a la mise au point. */
	line-height: 1.4;
	resize: none;
}

.cb-remarque:focus-visible {
	outline: 3px solid var(--braise);
	outline-offset: 2px;
}

.cb-ligne__prix {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cb-ligne__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.cb-ligne__actions .cb-bouton {
	min-height: var(--cible);
	padding: 0 16px;
	font-size: 14.5px;
	font-weight: 600;
}

.cb-quantite {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	overflow: hidden;
}

.cb-quantite button {
	min-width: var(--cible);
	min-height: var(--cible);
	border: 0;
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	font-size: 21px;
	font-weight: 700;
	cursor: pointer;
}

.cb-quantite output {
	min-width: 40px;
	text-align: center;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Les messages                                                      */
/* ---------------------------------------------------------------- */

.cb-avis {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-left: 4px solid var(--braise);
	border-radius: 6px;
	background: var(--braise-clair);
	color: #6E2213;
	font-size: 15.5px;
}

.cb-avis--calme {
	border-left-color: var(--pousse);
	background: var(--pousse-clair);
	color: #16452F;
}

/* ---------------------------------------------------------------- */
/* La fin : le numero                                                */
/* ---------------------------------------------------------------- */

.cb-fin { text-align: center; padding: 24px 0 8px; }

.cb-numero {
	display: block;
	margin: 8px 0 4px;
	font-size: clamp(72px, 22vw, 132px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--braise);
	font-variant-numeric: tabular-nums;
}

.cb-fin__quoi { font-size: 18px; font-weight: 600; }
.cb-fin__ou { margin: 6px 0 22px; color: var(--doux); }

.cb-qr {
	display: inline-block;
	margin: 6px auto 14px;
	padding: 16px;
	border-radius: var(--rayon);
	/*
	 * LA ZONE DE SILENCE. qr-creator ne la dessine pas : sans cette marge
	 * blanche, aucun lecteur ne dechiffre le code. Ne pas retirer.
	 */
	background: #FFFFFF;
	line-height: 0;
}

/* ---------------------------------------------------------------- */
/* Le minuteur d inactivite                                          */
/* ---------------------------------------------------------------- */

.cb-veille {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: var(--marge);
	background: rgba(36, 30, 23, .93);
	color: #FFFFFF;
	text-align: center;
}

.cb-veille h2 { margin: 0; font-size: 30px; font-weight: 800; }
.cb-veille p { margin: 0; font-size: 18px; }
.cb-veille b { font-variant-numeric: tabular-nums; }

.cb-veille .cb-bouton {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--encre);
	min-width: 220px;
}

.comptoir-borne__attente,
.comptoir-borne__noscript {
	margin: 0;
	padding: 40px 20px;
	color: #5C5145;
	text-align: center;
}

/* ---------------------------------------------------------------- */
/* Le telephone                                                      */
/* ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.comptoir-borne { --marge: 14px; font-size: 16.5px; }
	.cb-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.cb-choix { grid-template-columns: 1fr; }
	.cb-titre { font-size: 23px; }
	.cb-pied { gap: 8px; }
	.cb-pied .cb-bouton { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.comptoir-borne * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- */
/* Les allergenes                                                    */
/* ---------------------------------------------------------------- */

/*
 * ZERO GESTE POUR LES LIRE. Un bouton « voir les allergenes » serait un
 * geste de trop pour quelqu un qui doit savoir AVANT de choisir. Ils
 * sont donc ecrits sous le nom, petits mais lisibles - 13 px sur fond
 * clair, mesure a 6,4:1.
 *
 * L en-tete porte en plus un acces a la liste complete : c est la
 * demande de celui qui compare, pas de celui qui verifie.
 */
.cb-allerg {
	display: block;
	margin-top: 2px;
	color: var(--doux);
	font-size: 13px;
	line-height: 1.3;
}

.cb-tete__allerg {
	flex: 0 0 auto;
	min-height: var(--cible);
	padding: 0 16px;
	font-size: 14.5px;
}

@media (max-width: 640px) {
	.cb-tete__allerg { padding: 0 12px; font-size: 13.5px; }
	.cb-allerg { font-size: 12.5px; }
}