/* Affichage front AGEC Ready — carte « Tri & recyclage » (gratuit) + caractéristiques art. 13 (premium).
   Pilotée par les tokens du design system (assets/css/agec-design-tokens.css, préfixe --agec-).
   Pictogrammes = SVG MAISON (assets/img/), originaux : on ne reproduit jamais le Triman/Info-tri officiel
   (mark protégé, charte producteur — décret 2021-835 / ADEME-CITEO ; cf. docs/regulatory/). Couleur des
   icônes pilotée par mask + background-color (token). Icônes décoratives (aria-hidden) ; le texte porte l'info.
   Contrastes ≥ WCAG AA (cf. docs/design/brand-and-ux.md). */

.agec-ready-tri,
.agec-ready-art13 {
	margin: var(--agec-space-5) 0;
	padding: var(--agec-space-4) var(--agec-space-5);
	background: var(--agec-color-surface);
	border: 1px solid var(--agec-color-hairline);
	border-left: 4px solid var(--agec-color-success);
	border-radius: var(--agec-radius-md);
	color: var(--agec-color-body);
	font-family: var(--agec-font-ui);
}

.agec-ready-art13 {
	border-left-color: var(--agec-color-premium);
}

.agec-ready-tri__title,
.agec-ready-art13__title {
	margin: 0 0 var(--agec-space-3);
	font-size: var(--agec-text-md);
	font-weight: var(--agec-weight-semibold);
	color: var(--agec-color-heading);
}

.agec-ready-tri__triman {
	display: flex;
	align-items: center;
	gap: var(--agec-space-2);
	margin: 0 0 var(--agec-space-3);
	color: var(--agec-color-body);
}

.agec-ready-tri__list,
.agec-ready-art13__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--agec-space-2);
}

.agec-ready-tri__list li {
	display: flex;
	align-items: center;
	gap: var(--agec-space-2);
}

.agec-ready-tri__material {
	font-weight: var(--agec-weight-semibold);
	color: var(--agec-color-heading);
}

.agec-ready-tri__consigne {
	color: var(--agec-color-muted);
}

.agec-ready-art13__item {
	color: var(--agec-color-body);
}

/* ----- Pictogrammes maison (mask SVG, teinte = token) ----- */
.agec-ready-tri__icon,
.agec-ready-tri__mark {
	display: inline-block;
	flex: none;
	width: 22px;
	height: 22px;
	background-color: var(--agec-color-success);
	-webkit-mask: var(--agec-icon) center / contain no-repeat;
	mask: var(--agec-icon) center / contain no-repeat;
}

.agec-ready-tri__mark {
	width: 24px;
	height: 24px;
	background-color: var(--agec-color-brand);
	--agec-icon: url(../img/icon-triman-mark.svg);
}

.agec-ready-tri__icon--tri      { --agec-icon: url(../img/icon-tri.svg); }
.agec-ready-tri__icon--verre    { --agec-icon: url(../img/icon-verre.svg); }
.agec-ready-tri__icon--ordures  { --agec-icon: url(../img/icon-ordures.svg); }
.agec-ready-tri__icon--collecte { --agec-icon: url(../img/icon-collecte.svg); }
.agec-ready-tri__icon--compost  { --agec-icon: url(../img/icon-compost.svg); }

/* ----- Page-portail dématérialisée art. 13 (R.541-222) — premium, publique ----- */
.agec-ready-portal {
	max-width: 820px;
	margin: var(--agec-space-10) auto;
	padding: 0 var(--agec-space-5);
	color: var(--agec-color-body);
	font-family: var(--agec-font-ui);
}

.agec-ready-portal__title {
	margin: 0 0 var(--agec-space-3);
	font-family: var(--agec-font-display);
	font-size: var(--agec-text-3xl);
	line-height: var(--agec-leading-tight);
	color: var(--agec-color-heading);
}

.agec-ready-portal__intro {
	margin: 0 0 var(--agec-space-8);
	max-width: 64ch;
	font-size: var(--agec-text-md);
	color: var(--agec-color-muted);
}

.agec-ready-portal__product {
	margin: 0 0 var(--agec-space-4);
	padding: var(--agec-space-5) var(--agec-space-6);
	background: var(--agec-color-surface);
	border: var(--agec-border-width) solid var(--agec-color-hairline);
	border-left: 4px solid var(--agec-color-premium);
	border-radius: var(--agec-radius-md);
	box-shadow: var(--agec-shadow-sm);
}

.agec-ready-portal__name {
	margin: 0 0 var(--agec-space-3);
	font-family: var(--agec-font-display);
	font-size: var(--agec-text-lg);
}

.agec-ready-portal__name a {
	color: var(--agec-color-heading);
	text-decoration: none;
}

.agec-ready-portal__name a:hover,
.agec-ready-portal__name a:focus {
	color: var(--agec-color-brand);
	text-decoration: underline;
}

.agec-ready-portal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--agec-space-2);
}

.agec-ready-portal__list li {
	position: relative;
	padding-left: var(--agec-space-5);
	color: var(--agec-color-body);
}

.agec-ready-portal__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--agec-color-premium);
}

.agec-ready-portal__empty {
	padding: var(--agec-space-6);
	background: var(--agec-color-bg);
	border-radius: var(--agec-radius-md);
	color: var(--agec-color-muted);
}

.agec-ready-portal__nav {
	display: flex;
	gap: var(--agec-space-3);
	margin-top: var(--agec-space-6);
}

.agec-ready-portal__prev,
.agec-ready-portal__next {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--agec-space-4);
	border: var(--agec-border-width) solid var(--agec-color-border);
	border-radius: var(--agec-radius-sm);
	color: var(--agec-color-brand);
	font-weight: var(--agec-weight-semibold);
	text-decoration: none;
}

.agec-ready-portal__prev:hover,
.agec-ready-portal__next:hover,
.agec-ready-portal__prev:focus,
.agec-ready-portal__next:focus {
	border-color: var(--agec-color-brand);
	background: var(--agec-color-success-bg);
}

.agec-ready-portal__prev:focus-visible,
.agec-ready-portal__next:focus-visible {
	outline: none;
	box-shadow: var(--agec-focus-ring);
}