/*
 * La page de suivi : elle se lit d un coup d oeil, dans une file
 * d attente, au soleil, sur un telephone tenu d une main.
 *
 * LE NUMERO EST LE SEUL ELEMENT IMPORTANT. C est lui qu on crie, c est
 * lui qu on cherche. Tout le reste - l heure, le lieu, le total - est un
 * rappel, pas une information.
 */

.comptoir-suivi {
	--papier: #FBF8F2;
	--carte: #FFFFFF;
	--encre: #241E17;
	--doux: #5C5145;
	--trait: #D8CEBE;
	--braise: #8A2B18;
	--pousse: #1F5C41;
	--attente: #7A5A12;

	box-sizing: border-box;
	max-width: 30rem;
	margin: 0 auto;
	padding: 28px 20px 40px;
	background: var(--papier);
	color: var(--encre);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	text-align: center;
}

.comptoir-suivi * { box-sizing: border-box; }

.cs-quoi {
	margin: 0;
	color: var(--doux);
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cs-numero {
	display: block;
	margin: 4px 0 10px;
	font-size: clamp(84px, 26vw, 150px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--braise);
	font-variant-numeric: tabular-nums;
}

.cs-phrase {
	margin: 0 0 22px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/* La marche : quatre crans, celui qui est atteint est plein. */
.cs-marche {
	display: flex;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.cs-cran {
	flex: 1 1 0;
	height: 8px;
	border-radius: 999px;
	background: var(--trait);
}

.comptoir-suivi[data-etat="recue"] .cs-cran--recue,
.comptoir-suivi[data-etat="cuisine"] .cs-cran--recue,
.comptoir-suivi[data-etat="cuisine"] .cs-cran--cuisine,
.comptoir-suivi[data-etat="prete"] .cs-cran--recue,
.comptoir-suivi[data-etat="prete"] .cs-cran--cuisine,
.comptoir-suivi[data-etat="prete"] .cs-cran--prete,
.comptoir-suivi[data-etat="remise"] .cs-cran { background: var(--pousse); }

.comptoir-suivi[data-etat="cuisine"] .cs-phrase { color: var(--attente); }
.comptoir-suivi[data-etat="prete"] .cs-phrase { color: var(--pousse); font-size: 25px; }
.comptoir-suivi[data-etat="annulee"] .cs-phrase { color: var(--braise); }

.cs-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--trait);
	border-radius: 12px;
	background: var(--carte);
	text-align: left;
	font-size: 15.5px;
}

.cs-details dt { color: var(--doux); font-size: 14px; }
.cs-details dd { margin: 0; font-weight: 650; }

.cs-alerte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0 22px;
	border: 1px solid var(--trait);
	border-radius: 12px;
	background: var(--carte);
	color: var(--encre);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

.comptoir-suivi :focus-visible {
	outline: 3px solid var(--braise);
	outline-offset: 3px;
}

.comptoir-suivi--vide {
	padding: 40px 20px;
	color: var(--doux);
	font-size: 16px;
}

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