/* Brewstock v2 — module espace client : profil, recommandations, statistiques, aperçu animé, HOP ALERT.
   Jetons --bw-* de la charte (theme/brewstock/assets/css/base.css), Playfair Display et Inter, mobile d'abord.
   Rangé dans la couche « components » du thème. */

@layer components {
	/* ---------- Commun ---------- */
	.bw-ec { --bw-ec-rayon: var(--bw-radius-l, 20px); }
	.bw-ec-note { margin: 0; font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-carte { display: grid; gap: var(--bw-s3); padding: var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); container-type: inline-size; }
	.bw-ec-carte__titre { font-size: var(--bw-fs-h3); }
	.bw-ec-carte__sous { margin: calc(var(--bw-s2) * -1) 0 0; font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-lien-bouton { min-height: var(--bw-tap); padding: 0 var(--bw-s3); border: 0; background: transparent; color: var(--bw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
	.bw-ec-lien-bouton:hover { color: var(--bw-green-700); }
	.bw-ec-vide { display: grid; gap: var(--bw-s3); justify-items: start; padding: var(--bw-s5) var(--bw-s4); border: 1px dashed var(--bw-line-strong); border-radius: var(--bw-ec-rayon); background: var(--bw-white); }
	.bw-ec-vide__titre { font-size: var(--bw-fs-h3); }
	.bw-ec-vide p { margin: 0; }
	.bw-ec-details { font-size: var(--bw-fs-sm); }
	.bw-ec-details > summary { display: inline-flex; align-items: center; min-height: var(--bw-tap); color: var(--bw-link); font-weight: 600; cursor: pointer; }
	.bw-ec-details[open] > summary { margin-bottom: var(--bw-s2); }
	.bw-ec-table { width: 100%; border-collapse: collapse; font-size: var(--bw-fs-sm); font-variant-numeric: tabular-nums; }
	.bw-ec-table th, .bw-ec-table td { padding: var(--bw-s2) var(--bw-s2); border-bottom: 1px solid var(--bw-line); text-align: left; vertical-align: top; }
	.bw-ec-table thead th { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); font-weight: 700; }
	.bw-ec-table tbody th { font-weight: 600; }

	/* ---------- Bloc « C’est quoi le prochain projet de bière ? » ---------- */
	.bw-ec-projet { display: grid; gap: var(--bw-s4); padding: var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: linear-gradient(180deg, color-mix(in srgb, var(--bw-green-pale) 55%, var(--bw-white)) 0%, var(--bw-white) 70%); container-type: inline-size; }
	.bw-ec-projet__entete { display: grid; gap: var(--bw-s1); }
	.bw-ec-projet__surtitre { font-size: var(--bw-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bw-green-700); }
	.bw-ec-projet__titre { font-size: var(--bw-fs-h2); }
	.bw-ec-projet__texte { color: var(--bw-text-soft); font-size: var(--bw-fs-sm); max-width: 44rem; }
	.bw-ec-recos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 78%); gap: var(--bw-s3); margin: 0 calc(var(--bw-s4) * -1); padding: 2px var(--bw-s4) var(--bw-s2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bw-s4); list-style: none; }
	.bw-ec-reco { scroll-snap-align: start; }
	.bw-ec-reco__carte { position: relative; display: grid; gap: var(--bw-s1); align-content: start; height: 100%; padding: var(--bw-s3) var(--bw-s3) var(--bw-s3) calc(var(--bw-s3) + 5px); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-white); box-shadow: var(--bw-shadow-1); overflow: hidden; transition: box-shadow var(--bw-duree), border-color var(--bw-duree); }
	.bw-ec-reco__carte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--bw-repere, var(--bw-line-strong)); }
	.bw-ec-reco__carte:hover { box-shadow: var(--bw-shadow-2); border-color: var(--bw-line-strong); }
	.bw-ec-reco__carte:has(.bw-ec-reco__lien:focus-visible) { box-shadow: var(--bw-focus); }
	.bw-ec-reco__titre { font-size: 1.125rem; }
	.bw-ec-reco__lien { color: var(--bw-ink); text-decoration: none; }
	.bw-ec-reco__lien::after { content: ""; position: absolute; inset: 0; } /* toute la carte mène à la fiche */
	.bw-ec-reco__lien:focus-visible { box-shadow: none; }
	.bw-ec-reco__raison { display: block; justify-self: start; margin: var(--bw-s1) 0; padding: 0.2rem var(--bw-s2); border-radius: var(--bw-radius-s); background: var(--bw-green-pale); color: var(--bw-green-700); font-size: var(--bw-fs-xs); font-weight: 700; line-height: 1.4; }
	.bw-ec-reco__donnees { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); font-variant-numeric: tabular-nums; }
	.bw-ec-reco__prix { font-weight: 700; font-variant-numeric: tabular-nums; }
	.bw-ec-reco--selection .bw-mono { background: #EFEDE6; box-shadow: none; }
	.bw-ec-projet__invite { display: grid; gap: var(--bw-s2); padding: var(--bw-s3) var(--bw-s4); border-radius: var(--bw-radius-m); background: var(--bw-cream); border: 1px solid var(--bw-line); }
	.bw-ec-projet__invite p { margin: 0; font-size: var(--bw-fs-sm); }
	.bw-ec-projet__actions form { margin: 0; }
	.bw-ec-projet__liens { margin: 0; font-size: var(--bw-fs-sm); }
	.bw-ec-projet__liens a { display: inline-block; padding-block: 0.3rem; font-weight: 600; }
	@container (min-width: 34rem) {
		.bw-ec-recos { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; }
	}
	@container (min-width: 52rem) {
		.bw-ec-recos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	}
	@media (min-width: 900px) {
		.bw-ec-projet { padding: var(--bw-s5); }
	}
	.bw-ec-acc { padding-block: var(--bw-s5) 0; }

	/* ---------- Profil de brasseur ---------- */
	.bw-ec-intro { display: grid; gap: var(--bw-s2); padding: var(--bw-s4); border-radius: var(--bw-ec-rayon); background: var(--bw-green-pale); }
	.bw-ec-intro__titre { font-size: var(--bw-fs-h3); }
	.bw-ec-intro p { margin: 0; }
	.bw-ec-page-profil { display: grid; gap: var(--bw-s4); }
	.bw-ec-profil { display: grid; gap: var(--bw-s5); padding: var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); }
	.bw-ec-profil.est-pas-a-pas { gap: var(--bw-s4); min-height: 22rem; align-content: start; }
	.bw-ec-progression { display: grid; gap: var(--bw-s2); }
	.bw-ec-progression__texte { margin: 0; font-size: var(--bw-fs-xs); font-weight: 700; color: var(--bw-text-soft); }
	.bw-ec-progression__barre { height: 6px; border-radius: var(--bw-radius-pill); background: var(--bw-green-pale); overflow: hidden; }
	.bw-ec-progression__barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bw-green-600); transition: width 200ms ease; }
	.bw-ec-etape { display: grid; gap: var(--bw-s2); }
	.bw-ec-etape__titre { padding: 0; font-family: var(--bw-font-display); font-size: var(--bw-fs-h3); font-weight: 700; line-height: var(--bw-lh-tight); }
	.bw-ec-etape__titre:focus, .bw-ec-etape__titre:focus-visible { outline: none; box-shadow: none; } /* titre de la question : reçoit le focus à chaque écran, sans être interactif */
	.bw-ec-etape__aide { margin: 0; font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-ec-etape__sous { margin: var(--bw-s2) 0 0; font-weight: 700; font-size: var(--bw-fs-sm); }
	.bw-ec-choix { display: flex; flex-wrap: wrap; gap: var(--bw-s2); }
	.bw-ec-puce { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--bw-tap); max-width: 100%; cursor: pointer; }
	.bw-ec-puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* case native : clavier et lecteurs d'écran */
	.bw-ec-puce__txt { display: inline-flex; align-items: center; gap: var(--bw-s2); min-height: var(--bw-tap); padding: 0.55rem var(--bw-s4); border: 1px solid var(--bw-line-strong); border-radius: var(--bw-radius-pill); background: var(--bw-white); font-size: var(--bw-fs-sm); font-weight: 600; line-height: 1.3; transition: background var(--bw-duree), border-color var(--bw-duree); }
	.bw-ec-puce__txt::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; border: 1.5px solid var(--bw-line-strong); border-radius: 50%; background: var(--bw-white); }
	.bw-ec-puce input[type="checkbox"] + .bw-ec-puce__txt::before { border-radius: 4px; }
	.bw-ec-puce:hover .bw-ec-puce__txt { border-color: var(--bw-ink); }
	.bw-ec-puce input:checked + .bw-ec-puce__txt { border-color: var(--bw-green-700); background: var(--bw-green-pale); color: var(--bw-ink); }
	.bw-ec-puce input:checked + .bw-ec-puce__txt::before { content: "✓"; display: grid; place-items: center; border-color: var(--bw-green-700); background: var(--bw-green-700); color: var(--bw-white); font-size: 0.75rem; font-weight: 800; line-height: 1; }
	.bw-ec-puce input:focus-visible + .bw-ec-puce__txt { box-shadow: var(--bw-focus); }
	.bw-ec-puce--note { flex-basis: 100%; }
	.bw-ec-puce--note .bw-ec-puce__txt { border-radius: var(--bw-radius-m); }
	.bw-ec-puce__note { display: block; margin: var(--bw-s1) 0 0 var(--bw-s4); font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-profil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-s2); }
	.bw-ec-profil__actions .bw-btn--action { min-width: 9rem; }
	.bw-ec-profil.est-pas-a-pas .bw-ec-profil__actions { flex-wrap: nowrap; } /* une seule ligne : la barre collante reste basse sur mobile */
	.bw-ec-profil.est-pas-a-pas .bw-ec-profil__actions .bw-btn--action { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
	.bw-ec-profil.est-pas-a-pas .bw-ec-profil__actions [data-bw-ec-retour] { flex: none; padding-inline: var(--bw-s3); }
	.bw-ec-profil__plus-tard { margin: calc(var(--bw-s3) * -1) 0 0; }
	.bw-ec-profil__erreur { margin: 0; padding: var(--bw-s2) var(--bw-s3); border-left: 4px solid var(--bw-error); background: color-mix(in srgb, var(--bw-error) 6%, var(--bw-white)); font-size: var(--bw-fs-sm); }
	.bw-ec-profil.est-pas-a-pas .bw-ec-profil__actions { position: sticky; bottom: 0; padding-block: var(--bw-s3); background: var(--bw-white); }

	/* ---------- Statistiques ---------- */
	.bw-ec-stats { display: grid; gap: var(--bw-s4); }
	.bw-ec-stats__outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-s3); }
	.bw-ec-stats__outils .bw-compte__intro { flex: 1 1 16rem; }
	.bw-ec-stats__prix { display: inline-flex; align-items: center; gap: var(--bw-s2); font-size: var(--bw-fs-sm); font-weight: 600; }
	.bw-ec-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bw-s2); margin: 0; padding: 0; list-style: none; }
	.bw-ec-chiffres li { display: grid; gap: 0.15rem; align-content: start; padding: var(--bw-s3); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-white); }
	.bw-ec-chiffres__val { font-size: 1.375rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
	.bw-ec-chiffres__val .bw-regime { font-size: 0.6em; }
	.bw-ec-chiffres__lib { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	@media (min-width: 900px) { .bw-ec-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
	.bw-ec-palier { background: color-mix(in srgb, var(--bw-green-pale) 40%, var(--bw-white)); }
	.bw-ec-palier__texte { margin: 0; }
	.bw-ec-palier__jauge { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bw-s1); font-size: var(--bw-fs-xs); color: var(--bw-text-soft); font-variant-numeric: tabular-nums; }
	.bw-ec-palier__jauge .bw-ec-barre { grid-column: 1 / -1; height: 12px; }
	.bw-ec-palier__jauge span:last-child { text-align: right; }
	.bw-ec-figure { position: relative; margin: 0; display: grid; gap: var(--bw-s2); }
	.bw-ec-figure__large { display: none; }
	@container (min-width: 36rem) {
		.bw-ec-figure__mobile { display: none; }
		.bw-ec-figure__large { display: block; }
	}
	.bw-ec-figure--court { max-width: 28rem; }
	.bw-ec-figure__resume { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-ec-graphe { width: 100%; height: auto; overflow: visible; font-family: var(--bw-font-text); font-variant-numeric: tabular-nums; }
	.bw-ec-graphe__grille { stroke: var(--bw-line); stroke-width: 1; }
	.bw-ec-graphe__base { stroke: var(--bw-line-strong); stroke-width: 1; }
	.bw-ec-graphe__axe { fill: var(--bw-ink-soft); }
	.bw-ec-graphe__valeur { fill: var(--bw-ink); font-weight: 700; }
	.bw-ec-graphe__barre { fill: var(--bw-green-600); }
	.bw-ec-graphe__zone { fill: transparent; }
	.bw-ec-graphe__zone:hover + .bw-ec-graphe__barre, .bw-ec-graphe__barre:hover { fill: var(--bw-green-700); }
	.bw-ec-bulle { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 10px)); padding: var(--bw-s1) var(--bw-s2); border-radius: var(--bw-radius-s); background: var(--bw-ink); color: var(--bw-cream); font-size: var(--bw-fs-xs); font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--bw-shadow-2); }
	.bw-ec-barre { display: block; width: 100%; height: 10px; }
	.bw-ec-barre__fond { fill: var(--bw-green-pale); }
	.bw-ec-barre__val { fill: var(--bw-green-600); }
	.bw-ec-classement { display: grid; gap: var(--bw-s3); margin: 0; padding: 0; list-style: none; counter-reset: bw-ec-rang; }
	.bw-ec-classement li { display: grid; grid-template-columns: 1fr auto; gap: var(--bw-s1) var(--bw-s3); align-items: baseline; counter-increment: bw-ec-rang; }
	.bw-ec-classement li .bw-ec-barre { grid-column: 1 / -1; }
	.bw-ec-classement__nom { font-weight: 700; }
	.bw-ec-classement__nom::before { content: counter(bw-ec-rang) ". "; color: var(--bw-text-soft); font-weight: 600; }
	.bw-ec-classement__val { font-variant-numeric: tabular-nums; font-weight: 600; }
	.bw-ec-classement__part { color: var(--bw-text-soft); font-weight: 400; }
	/* Tableau des prix : lignes empilées sur mobile */
	@container (max-width: 34rem) {
		.bw-ec-table--prix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
		.bw-ec-table--prix tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--bw-s3); padding: var(--bw-s2) 0; border-bottom: 1px solid var(--bw-line); }
		.bw-ec-table--prix th, .bw-ec-table--prix td { padding: 0.1rem 0; border: 0; }
		.bw-ec-table--prix tbody th { grid-column: 1 / -1; font-size: var(--bw-fs-base); }
		.bw-ec-table--prix td::before { content: attr(data-titre); display: block; font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
		.bw-ec-table--prix td:last-child { grid-column: 1 / -1; }
	}

	/* ---------- Aperçu animé ---------- */
	.bw-ec-apercu { display: grid; gap: var(--bw-s4); align-items: center; }
	.bw-ec-apercu__texte { display: grid; gap: var(--bw-s2); justify-items: start; max-width: 34rem; }
	.bw-ec-apercu__texte p { margin: 0; color: var(--bw-text-soft); }
	.bw-ec-apercu__surtitre { font-size: var(--bw-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bw-green-700) !important; }
	.bw-ec-apercu__titre { font-size: var(--bw-fs-h2); }
	.bw-ec-apercu__actions { margin-top: var(--bw-s2) !important; }
	.bw-ec-apercu__figure { margin: 0; display: grid; gap: var(--bw-s2); max-width: 32rem; width: 100%; }
	.bw-ec-apercu__legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-s2); font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-apercu__pause { min-height: 2.75rem; padding: 0 var(--bw-s3); border: 1px solid var(--bw-line-strong); border-radius: var(--bw-radius-pill); background: var(--bw-white); color: var(--bw-ink); font-size: var(--bw-fs-xs); font-weight: 700; cursor: pointer; }
	.bw-ec-apercu__pause[aria-pressed="true"] { background: var(--bw-ink); color: var(--bw-cream); }
	.bw-ec-apercu__calcul p { margin: var(--bw-s2) 0 0; font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-apercu__calcul td { white-space: nowrap; }
	.bw-ec-apercu--compte { margin-top: var(--bw-s5); padding: var(--bw-s5) var(--bw-s3); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); }
	.bw-ec-apercu--stats { padding: var(--bw-s4) var(--bw-s3); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); }
	@media (min-width: 900px) {
		.bw-ec-apercu { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: var(--bw-s6); align-items: start; }
		.bw-ec-apercu--stats { grid-template-columns: 1fr; }
	}
	/* Tableau de bord fictif (v2) : carte HTML, deux graphiques SVG, liste des variétés */
	.bw-ec-ap { display: grid; gap: var(--bw-s3); padding: var(--bw-s3); border: 1px solid var(--bw-line); border-radius: 16px; background: var(--bw-white); box-shadow: var(--bw-shadow-2); font-variant-numeric: tabular-nums; }
	.bw-ec-ap__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bw-s2); }
	.bw-ec-ap__entete p { margin: 0; }
	.bw-ec-ap__titre { font-family: var(--bw-font-display); font-size: 1.125rem; font-weight: 700; color: var(--bw-ink); }
	.bw-ec-ap__sous { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-ap__badge { flex: none; padding: 0.2rem 0.55rem; border-radius: var(--bw-radius-pill); background: var(--bw-ink); color: var(--bw-cream); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; }
	.bw-ec-ap__kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bw-s2); margin: 0; padding: 0; list-style: none; }
	.bw-ec-ap__kpi li { display: grid; gap: 0.05rem; align-content: start; padding: var(--bw-s2); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-cream); }
	.bw-ec-ap__kpi strong { font-size: 1.125rem; line-height: 1.2; }
	.bw-ec-ap__kpi span { font-size: 0.75rem; color: var(--bw-text-soft); line-height: 1.3; }
	.bw-ec-ap__kpi em { justify-self: start; margin-top: 0.15rem; padding: 0 0.35rem; border-radius: var(--bw-radius-s); background: var(--bw-green-pale); color: var(--bw-green-700); font-size: 0.6875rem; font-style: normal; font-weight: 700; }
	.bw-ec-ap__bloc { display: grid; gap: 0.15rem; }
	.bw-ec-ap__section { margin: 0; font-size: var(--bw-fs-xs); font-weight: 700; color: var(--bw-ink); }
	.bw-ec-ap__section span { font-weight: 400; color: var(--bw-text-soft); }
	.bw-ec-ap__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--bw-font-text); }
	.bw-ec-ap__saison { fill: var(--bw-orange-pale); }
	.bw-ec-ap__note { font-size: 8.5px; font-weight: 600; fill: var(--bw-orange-700); }
	.bw-ec-ap__axe { font-size: 9px; fill: var(--bw-ink-soft); }
	.bw-ec-ap__lib { font-size: 10px; font-weight: 600; fill: var(--bw-ink); }
	.bw-ec-ap__valeur { font-size: 9.5px; font-weight: 700; fill: var(--bw-ink); }
	.bw-ec-ap__grille { stroke: var(--bw-line); stroke-width: 1; }
	.bw-ec-ap__base, .bw-ec-ap__an { stroke: var(--bw-line-strong); stroke-width: 1; }
	.bw-ec-ap__col { fill: var(--bw-green-600); }
	.bw-ec-ap__ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
	.bw-ec-ap__ligne--cascade { stroke: #037C63; }
	.bw-ec-ap__ligne--chinook { stroke: #6163B8; }
	.bw-ec-ap__ligne--magnum { stroke: #9A6105; }
	.bw-ec-ap__point { stroke: var(--bw-white); stroke-width: 1.5; }
	.bw-ec-ap__point.bw-ec-ap__ligne--cascade { fill: #037C63; }
	.bw-ec-ap__point.bw-ec-ap__ligne--chinook { fill: #6163B8; }
	.bw-ec-ap__point.bw-ec-ap__ligne--magnum { fill: #9A6105; }
	.bw-ec-ap__varietes { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; }
	.bw-ec-ap__varietes li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 3.2rem; gap: var(--bw-s2); align-items: center; }
	.bw-ec-ap__vnom { font-weight: 600; line-height: 1.25; }
	.bw-ec-ap__tag { display: inline-block; padding: 0 0.3rem; border-radius: var(--bw-radius-s); background: var(--bw-green-pale); color: var(--bw-green-700); font-size: 0.625rem; font-style: normal; font-weight: 700; white-space: nowrap; }
	.bw-ec-ap__tag--fin { background: var(--bw-cream); color: var(--bw-ink-soft); box-shadow: inset 0 0 0 1px var(--bw-line-strong); }
	.bw-ec-ap__vbarre, .bw-ec-ap__jauge { display: block; height: 8px; border-radius: 4px; background: var(--bw-green-pale); overflow: hidden; }
	.bw-ec-ap__vbarre span, .bw-ec-ap__jauge span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--bw-green-600); }
	.bw-ec-ap__vkg { text-align: right; font-weight: 600; }
	.bw-ec-ap__palier { display: grid; gap: 0.3rem; padding-top: var(--bw-s2); border-top: 1px solid var(--bw-line); font-size: 0.75rem; }
	.bw-ec-ap__palier p { margin: 0; }
	@media (prefers-reduced-motion: no-preference) {
		html.bw-js .bw-ec-ap__col { transform-box: fill-box; transform-origin: 50% 100%; animation: bw-ec-pousse 10s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 45ms) infinite both; }
		html.bw-js path.bw-ec-ap__ligne:not(.bw-ec-ap__point) { stroke-dasharray: 1; animation: bw-ec-trace 10s ease-out 0.9s infinite both; }
		html.bw-js .bw-ec-ap__point { animation: bw-ec-apparait 10s ease-out calc(1s + var(--i) * 110ms) infinite both; }
		html.bw-js .bw-ec-ap__vbarre span, html.bw-js .bw-ec-ap__jauge span { transform-origin: 0 50%; animation: bw-ec-allonge 10s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s infinite both; }
		.bw-ec-apercu__figure.est-en-pause *, .bw-ec-apercu__figure.est-hors-ecran * { animation-play-state: paused !important; }
	}
	@keyframes bw-ec-pousse { 0% { transform: scaleY(0); opacity: 1; } 12%, 90% { transform: scaleY(1); opacity: 1; } 97%, 100% { transform: scaleY(1); opacity: 0; } }
	@keyframes bw-ec-allonge { 0% { transform: scaleX(0); opacity: 1; } 12%, 90% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
	@keyframes bw-ec-trace { 0% { stroke-dashoffset: 1; opacity: 1; } 20%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
	@keyframes bw-ec-apparait { 0% { opacity: 0; transform: translateY(4px); } 8%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

	/* ---------- Projets de bière ---------- */
	.bw-ec-projet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-s2); margin: 0; }
	.bw-ec-projets-mini { display: grid; gap: var(--bw-s1); margin: 0; padding: 0; list-style: none; font-size: var(--bw-fs-sm); }
	.bw-ec-projets-mini li { display: flex; flex-wrap: wrap; gap: 0 var(--bw-s2); padding: var(--bw-s2) var(--bw-s3); border-radius: var(--bw-radius-m); background: var(--bw-white); border: 1px solid var(--bw-line); }
	.bw-ec-projets-mini span { color: var(--bw-text-soft); }
	.bw-ec-projet--accueil { padding-block: var(--bw-s4); }
	.bw-ec-projet--accueil .bw-ec-projet__titre { font-size: var(--bw-fs-h3); }
	.bw-ec-champs-ligne { display: grid; gap: var(--bw-s3); }
	@media (min-width: 600px) { .bw-ec-champs-ligne { grid-template-columns: 1fr 1fr; } }
	.bw-ec-champ select { width: 100%; max-width: 26rem; }
	.bw-ec-enregistre { padding: var(--bw-s3) var(--bw-s4); border-left: 4px solid var(--bw-green-600); border-radius: var(--bw-radius-s); background: color-mix(in srgb, var(--bw-green-pale) 55%, var(--bw-white)); font-size: var(--bw-fs-sm); }
	.bw-ec-enregistre p { margin: 0; }
	.bw-ec-projet-resultat, .bw-ec-projets { display: grid; gap: var(--bw-s4); }
	.bw-ec-projet-resume { display: grid; gap: var(--bw-s1); }
	.bw-ec-etiquettes { display: flex; flex-wrap: wrap; gap: var(--bw-s1); margin: 0; padding: 0; list-style: none; }
	.bw-ec-etiquettes li { padding: 0.15rem var(--bw-s2); border-radius: var(--bw-radius-pill); background: var(--bw-white); border: 1px solid var(--bw-line-strong); font-size: var(--bw-fs-xs); font-weight: 600; }
	.bw-ec-projet-groupe { display: grid; gap: var(--bw-s2); container-type: inline-size; }
	.bw-ec-projet-groupe__titre { font-size: var(--bw-fs-h3); }
	.bw-ec-recos.bw-ec-recos--projet { margin: 0; padding: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; }
	@container (min-width: 34rem) { .bw-ec-recos.bw-ec-recos--projet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	@container (min-width: 52rem) { .bw-ec-recos.bw-ec-recos--projet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	.bw-ec-reco__role { margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bw-text-soft); }
	.bw-ec-reco__qte { display: grid; gap: 0.1rem; margin: var(--bw-s1) 0 0; padding-top: var(--bw-s2); border-top: 1px solid var(--bw-line); font-size: var(--bw-fs-xs); }
	.bw-ec-reco__qte strong { font-size: var(--bw-fs-sm); }
	.bw-ec-projet-total { margin: 0; padding: var(--bw-s3) var(--bw-s4); border-radius: var(--bw-radius-m); background: var(--bw-white); border: 1px solid var(--bw-line); }
	.bw-ec-projet-resultat__actions, .bw-ec-projets__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-s2); }
	.bw-ec-projets__entete .bw-compte__intro { flex: 1 1 18rem; }
	.bw-ec-form-ligne { margin: 0; }
	.bw-ec-liste-projets { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); overflow: hidden; }
	.bw-ec-liste-projets__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-s2) var(--bw-s4); padding: var(--bw-s3) var(--bw-s4); }
	.bw-ec-liste-projets__ligne + .bw-ec-liste-projets__ligne { border-top: 1px solid var(--bw-line); }
	.bw-ec-liste-projets__ligne p { margin: 0; }
	.bw-ec-liste-projets__nom { font-weight: 700; }
	.bw-ec-liste-projets__resume, .bw-ec-liste-projets__date { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-liste-projets__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-s1); }

	/* ---------- HOP ALERT ---------- */
	.bw-ec-alerte { display: grid; gap: var(--bw-s3); margin-top: var(--bw-s4); padding: var(--bw-s4); border: 1px solid var(--bw-line); border-left: 4px solid var(--bw-green-600); border-radius: var(--bw-radius-m); background: var(--bw-white); scroll-margin-top: calc(var(--bw-entete-h) + 1rem); }
	.bw-ec-alerte p { margin: 0; }
	.bw-ec-alerte__titre { display: flex; align-items: center; gap: var(--bw-s2); font-family: var(--bw-font-text); font-size: var(--bw-fs-base); font-weight: 800; letter-spacing: 0.06em; }
	.bw-ec-alerte__titre .bw-icone { color: var(--bw-green-700); }
	.bw-ec-alerte__ailleurs { padding: var(--bw-s2) var(--bw-s3); border-radius: var(--bw-radius-s); background: var(--bw-green-pale); font-size: var(--bw-fs-sm); }
	.bw-ec-alerte__retour { padding: var(--bw-s2) var(--bw-s3); border-left: 4px solid var(--bw-green-600); background: color-mix(in srgb, var(--bw-green-pale) 50%, var(--bw-white)); font-size: var(--bw-fs-sm); font-weight: 600; }
	.bw-ec-alerte__retour--erreur { border-left-color: var(--bw-error); background: color-mix(in srgb, var(--bw-error) 6%, var(--bw-white)); }
	.bw-ec-alerte__form { display: grid; gap: var(--bw-s3); }
	.bw-ec-alerte__form p { margin: 0; }
	.bw-ec-champ { display: grid; gap: var(--bw-s1); }
	.bw-ec-champ label { font-weight: 600; font-size: var(--bw-fs-sm); }
	.bw-ec-champ input { width: 100%; max-width: 26rem; }
	.bw-ec-champ input[aria-invalid="true"], .bw-ec-case input[aria-invalid="true"] { outline: 2px solid var(--bw-error); outline-offset: 1px; }
	.bw-ec-champ__aide { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-case { display: grid; grid-template-columns: auto 1fr; gap: var(--bw-s2); align-items: start; font-size: var(--bw-fs-sm); }
	.bw-ec-case[hidden] { display: none; }
	.bw-ec-case input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--bw-green-700); }
	.bw-ec-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
	.bw-ec-alerte__actions .bw-btn { gap: var(--bw-s2); }
	.bw-ec-alerte__actions .bw-icone { width: 1.1rem; height: 1.1rem; }
	.bw-ec-alerte__statut:empty { display: none; }
	.bw-ec-alerte__statut { font-size: var(--bw-fs-sm); font-weight: 600; color: var(--bw-green-700); }
	.bw-ec-alerte__statut.est-erreur { color: var(--bw-error); }
	.bw-ec-alerte__form.est-envoye .bw-ec-champ, .bw-ec-alerte__form.est-envoye .bw-ec-case, .bw-ec-alerte__form.est-envoye .bw-ec-alerte__actions { display: none; }
	.bw-ec-alerte__petit, .bw-ec-alerte__qui { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-alerte__qui { font-size: var(--bw-fs-sm); }
	/* Bouton des cartes épuisées : au-dessus du lien qui couvre la carte */
	.bw-ec-alerte-lien { position: relative; z-index: 3; display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0; text-align: left; border: 0; background: none; color: var(--bw-green-700); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
	.bw-ec-alerte-lien:hover { color: var(--bw-ink); }
	.bw-ec-alerte-lien:disabled { color: var(--bw-text-soft); text-decoration: none; cursor: default; }
	/* DS2-24 : bouton d'une carte de la boutique. Zone de clic de 48 px de haut (guide UX, mobile) ; la carte ne change pas
	   de hauteur (pseudo-élément hors du flux, au-dessus du lien de la carte). La zone s'arrête 6 px sous le texte et monte
	   au-dessus : elle ne recouvre jamais le bouton « Choisir » placé dessous. */
	.bw-produit .bw-produit__stock .bw-ec-alerte-lien::before { content: ""; position: absolute; top: auto; right: -0.25rem; bottom: -0.375rem; left: -0.25rem; height: 3rem; }
	/* Boîte de dialogue */
	.bw-ec-dialogue { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--bw-s4); border: 0; border-radius: var(--bw-ec-rayon); background: var(--bw-white); color: var(--bw-ink); box-shadow: var(--bw-shadow-2); }
	.bw-ec-dialogue::backdrop { background: rgb(30 30 28 / 0.55); }
	.bw-ec-dialogue__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--bw-s2); margin-bottom: var(--bw-s2); }
	.bw-ec-dialogue__texte { margin: 0 0 var(--bw-s3); }
	@media (max-width: 599px) {
		.bw-ec-dialogue { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--bw-ec-rayon) var(--bw-ec-rayon) 0 0; padding-bottom: calc(var(--bw-s4) + env(safe-area-inset-bottom)); }
	}

	/* ---------- Mes alertes ---------- */
	.bw-ec-alertes { display: grid; gap: var(--bw-s4); }
	.bw-ec-liste-alertes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); overflow: hidden; }
	.bw-ec-liste-alertes__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-s2) var(--bw-s4); padding: var(--bw-s3) var(--bw-s4); }
	.bw-ec-liste-alertes__ligne + .bw-ec-liste-alertes__ligne { border-top: 1px solid var(--bw-line); }
	.bw-ec-liste-alertes__ligne p { margin: 0; }
	.bw-ec-liste-alertes__ligne form { margin: 0; }
	.bw-ec-liste-alertes__nom { font-weight: 700; }
	.bw-ec-liste-alertes__statut { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-liste-alertes__ligne--active .bw-ec-liste-alertes__statut::before { content: "● "; color: var(--bw-green-600); }

	/* ---------- Page des liens d'e-mail (confirmer, arrêter) ---------- */
	.bw-ec-message { padding-block: var(--bw-s6); }
	.bw-ec-message__boite { display: grid; gap: var(--bw-s3); max-width: 38rem; padding: var(--bw-s5) var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-ec-rayon); background: var(--bw-white); }
	.bw-ec-message__boite p { margin: 0; }
	.bw-ec-message__marque { font-size: var(--bw-fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--bw-green-700); }
	.bw-ec-message__actions { display: flex; flex-wrap: wrap; gap: var(--bw-s2); }
	.bw-ec-message__actions form { margin: 0; }

	/* Création de compte : ce que le compte apporte */
	.bw-ec-avantages a { font-weight: 700; }

	/* ---------- Cartes à sélectionner (BRW-146) : mois, budget, volume, styles ---------- */
	.bw-ec-sous-groupe { display: grid; gap: var(--bw-s2); min-width: 0; margin: 0; padding: 0; border: 0; }
	.bw-ec-sous-groupe > legend { padding: 0; }
	.bw-ec-grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--bw-s2); } /* 3 colonnes à 375 px */
	.bw-ec-grille-choix--large { grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); }
	.bw-ec-carte-choix { position: relative; display: block; min-width: 0; cursor: pointer; }
	.bw-ec-carte-choix--pleine { grid-column: 1 / -1; }
	.bw-ec-carte-choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* vrai bouton radio : clavier (flèches) et lecteurs d'écran */
	.bw-ec-carte-choix__corps { position: relative; display: grid; align-content: center; gap: 0.1rem; height: 100%; min-height: 3.5rem; padding: var(--bw-s2); border: 1px solid var(--bw-line-strong); border-radius: var(--bw-radius-m); background: var(--bw-white); text-align: center; transition: background var(--bw-duree), border-color var(--bw-duree); }
	.bw-ec-carte-choix--pleine .bw-ec-carte-choix__corps { min-height: var(--bw-tap); }
	.bw-ec-carte-choix__titre { font-size: var(--bw-fs-sm); font-weight: 700; line-height: 1.25; color: var(--bw-ink); }
	.bw-ec-carte-choix__sous { font-size: var(--bw-fs-xs); line-height: 1.3; color: var(--bw-text-soft); }
	.bw-ec-carte-choix:hover .bw-ec-carte-choix__corps { border-color: var(--bw-ink); }
	.bw-ec-carte-choix input:checked + .bw-ec-carte-choix__corps { border-color: var(--bw-green-700); box-shadow: inset 0 0 0 1px var(--bw-green-700); background: var(--bw-green-pale); }
	.bw-ec-carte-choix input:checked + .bw-ec-carte-choix__corps .bw-ec-carte-choix__sous { color: var(--bw-ink); }
	.bw-ec-carte-choix input:checked + .bw-ec-carte-choix__corps::after { content: "✓"; position: absolute; right: 0.4rem; bottom: 0.2rem; font-size: 0.75rem; font-weight: 800; line-height: 1; color: var(--bw-green-700); } /* repère autre que la couleur */
	.bw-ec-carte-choix input:focus-visible + .bw-ec-carte-choix__corps { box-shadow: var(--bw-focus); }
	/* « Autre volume » : la saisie n'apparaît que si la carte est choisie (navigateur sans :has() : toujours visible) */
	.bw-ec-volume:not(:has(input[value="autre"]:checked)) .bw-ec-volume__autre { display: none; }

	/* ---------- Houblon au litre de bière (BRW-147 à 149) : statistiques et panier ---------- */
	.bw-ec-litre { gap: var(--bw-s4); }
	.bw-ec-litre__reglage { display: grid; gap: var(--bw-s3); }
	.bw-ec-litre__reglage[hidden] { display: none; }
	.bw-ec-dosage { display: grid; gap: var(--bw-s1); }
	.bw-ec-dosage label { font-weight: 700; font-size: var(--bw-fs-sm); }
	.bw-ec-dosage__ligne { display: flex; align-items: center; gap: var(--bw-s3); }
	.bw-ec-dosage input[type="range"] { flex: 1 1 auto; min-width: 0; min-height: var(--bw-tap); margin: 0; accent-color: var(--bw-green-700); cursor: pointer; }
	.bw-ec-dosage__valeur { flex: none; min-width: 4.5rem; padding: 0.3rem var(--bw-s2); border-radius: var(--bw-radius-s); background: var(--bw-green-pale); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
	.bw-ec-litre__resultat { display: grid; gap: var(--bw-s2); padding: var(--bw-s3) var(--bw-s4); border-left: 4px solid var(--bw-green-600); border-radius: var(--bw-radius-s); background: color-mix(in srgb, var(--bw-green-pale) 45%, var(--bw-white)); }
	.bw-ec-litre__resultat p, .bw-ec-litre__comparaison p { margin: 0; }
	.bw-ec-litre__resultat strong { font-variant-numeric: tabular-nums; }
	.bw-ec-litre__hypothese { font-size: var(--bw-fs-sm); }
	.bw-ec-litre__comparaison { display: grid; gap: var(--bw-s2); padding: var(--bw-s3) var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-s); }
	.bw-ec-litre__releves { margin: 0; padding-left: 1.1rem; font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	.bw-ec-litre__enregistre { display: grid; gap: var(--bw-s2); }
	.bw-ec-litre__enregistre[hidden] { display: none; }
	.bw-ec-litre__enregistre > p { margin: 0; font-weight: 700; font-size: var(--bw-fs-sm); }
	.bw-panier__formulaire .bw-ec-litre { margin-top: var(--bw-s5); } /* panier : sous les articles */
}