/* Brewstock v2 — page « Devenir vendeur » (BRW-127, page-devenir-vendeur.php).
   Mobile d'abord (375 px), puis 600 / 900 / 1200 px. Jetons --bw-* de base.css uniquement, couche components.
   Vert 600 pour l'action, orange réservé au contrat sur 3 récoltes (UX-20), Playfair Display pour les titres, Inter. */

@layer components {
	.bw-vendeur { display: flex; flex-direction: column; overflow-wrap: break-word; font-variant-numeric: lining-nums; }
	.bw-vendeur__h2 { font-size: var(--bw-fs-h2); margin-bottom: var(--bw-s4); text-wrap: balance; }
	.bw-vendeur__h3 { font-size: var(--bw-fs-h3); text-wrap: balance; }
	.bw-vendeur__h4 { font-family: var(--bw-font-text); font-size: var(--bw-fs-sm); font-weight: 700; margin-top: var(--bw-s2); }
	.bw-vendeur__petit { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }

	/* Boutons de la page : grands, sur une ou deux lignes si l'écran est étroit (jamais de débordement) */
	.bw-vendeur__btn { min-height: 3.25rem; padding: var(--bw-s2) var(--bw-s5); font-size: var(--bw-fs-base); white-space: normal; text-align: center; line-height: 1.25; }

	/* ---------- En-tête de page ---------- */
	.bw-vendeur__heros {
		padding-block: var(--bw-s6);
		background: color-mix(in srgb, var(--bw-green-pale) 55%, var(--bw-cream));
		border-bottom: 1px solid var(--bw-line);
	}
	.bw-vendeur__heros-grille { display: grid; gap: var(--bw-s6); align-items: center; }
	.bw-vendeur__heros-texte { display: grid; gap: var(--bw-s3); justify-items: start; max-width: 40rem; }
	.bw-vendeur__surtitre { font-size: var(--bw-fs-sm); font-weight: 700; color: var(--bw-green-700); text-wrap: balance; }
	.bw-vendeur__titre { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
	.bw-vendeur__chapo { font-size: var(--bw-fs-md); color: var(--bw-text-soft); max-width: 36rem; }
	.bw-vendeur__actions { display: flex; flex-wrap: wrap; gap: var(--bw-s2); width: 100%; margin-top: var(--bw-s2); }
	.bw-vendeur__actions .bw-btn { flex: 1 1 15rem; }
	.bw-vendeur__note { display: flex; align-items: flex-start; gap: var(--bw-s2); font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-vendeur__note .bw-icone { width: 1rem; height: 1rem; margin-top: 0.2em; color: var(--bw-green-700); }

	/* L'essentiel : trois faits */
	.bw-vendeur__bref { padding: var(--bw-s5) var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-l); background: var(--bw-white); box-shadow: var(--bw-shadow-1); }
	.bw-vendeur__bref-titre { font-size: var(--bw-fs-h3); margin-bottom: var(--bw-s3); }
	.bw-vendeur__faits { display: grid; margin: 0; }
	.bw-vendeur__fait { display: grid; gap: var(--bw-s1); padding-block: var(--bw-s3); border-top: 1px solid var(--bw-line); }
	.bw-vendeur__fait dt { display: flex; align-items: center; gap: var(--bw-s2); font-size: var(--bw-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bw-text-soft); }
	.bw-vendeur__fait dt .bw-icone { width: 1.125rem; height: 1.125rem; color: var(--bw-green-700); }
	.bw-vendeur__fait dd { margin: 0; color: var(--bw-ink); }
	.bw-vendeur__fait strong { display: block; font-size: var(--bw-fs-h3); font-weight: 750; line-height: var(--bw-lh-tight); letter-spacing: -0.01em; } /* données en Inter (UX-20) */

	/* ---------- Blocs ---------- */
	.bw-vendeur__bloc { padding-block: var(--bw-s6); }
	.bw-vendeur__bloc--clair { background: var(--bw-white); border-block: 1px solid var(--bw-line); }
	.bw-vendeur__intro { color: var(--bw-text-soft); margin: calc(-1 * var(--bw-s2)) 0 var(--bw-s5); max-width: 40rem; }
	.bw-vendeur__etroit { max-width: 54rem; }

	/* Comment ça marche */
	.bw-vendeur__etapes { display: grid; gap: var(--bw-s3); }
	.bw-vendeur__etape { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--bw-s3); row-gap: var(--bw-s1); align-items: start; align-content: start; padding: var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-white); }
	.bw-vendeur__etape .bw-vendeur__h3 { font-size: var(--bw-fs-md); align-self: center; }
	.bw-vendeur__etape p { grid-column: 2; font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-vendeur__num { grid-row: span 2; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--bw-radius-pill); background: var(--bw-action-bg); color: var(--bw-white); font-weight: 700; font-size: var(--bw-fs-base); line-height: 1; }

	/* Conditions */
	.bw-vendeur__grille { display: grid; gap: var(--bw-s4); }
	.bw-vendeur__carte { display: grid; align-content: start; gap: var(--bw-s3); min-width: 0; padding: var(--bw-s5) var(--bw-s4); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-cream); container-type: inline-size; }
	.bw-vendeur__carte-tete { display: flex; align-items: center; gap: var(--bw-s3); }
	.bw-vendeur__pastille { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--bw-radius-pill); background: var(--bw-green-pale); color: var(--bw-green-700); }
	.bw-vendeur__liste { display: grid; gap: var(--bw-s2); }
	.bw-vendeur__liste li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--bw-s2); align-items: start; }
	.bw-vendeur__coche { margin-top: 0.15em; color: var(--bw-green-600); }
	.bw-vendeur__liste a { color: var(--bw-link); }

	/* Rémunération et exemple chiffré */
	.bw-vendeur__carte--remuneration { background: color-mix(in srgb, var(--bw-green-pale) 45%, var(--bw-white)); border-color: var(--bw-green-light); }
	.bw-vendeur__exemple { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bw-line); border-radius: var(--bw-radius-m); background: var(--bw-white); font-variant-numeric: lining-nums tabular-nums; overflow: hidden; }
	.bw-vendeur__exemple caption { caption-side: top; text-align: left; padding-bottom: var(--bw-s2); font-size: var(--bw-fs-sm); font-weight: 700; color: var(--bw-ink); }
	.bw-vendeur__exemple th, .bw-vendeur__exemple td { padding: var(--bw-s3); font-size: var(--bw-fs-sm); vertical-align: baseline; }
	.bw-vendeur__exemple th { text-align: left; font-weight: 400; color: var(--bw-ink); }
	.bw-vendeur__exemple td { text-align: right; white-space: nowrap; font-weight: 600; }
	.bw-vendeur__exemple tr + tr > * { border-top: 1px solid var(--bw-line); }
	.bw-vendeur__exemple-total > * { background: var(--bw-green-pale); font-weight: 700; }
	.bw-vendeur__exemple-total th { font-weight: 700; }
	.bw-vendeur__exemple-total td { font-size: var(--bw-fs-md); color: var(--bw-green-700); }

	/* Expédition : points de dépôt */
	.bw-vendeur__depots { display: grid; gap: var(--bw-s2); }
	.bw-vendeur__depots li { display: grid; gap: 0.125rem; padding: var(--bw-s2) var(--bw-s3); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-s); background: var(--bw-white); }
	.bw-vendeur__depots strong { font-size: var(--bw-fs-sm); }
	.bw-vendeur__depots span { font-size: var(--bw-fs-xs); color: var(--bw-text-soft); }
	@container (min-width: 30rem) {
		.bw-vendeur__depots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	/* Qualité et réglementation */
	.bw-vendeur__exigences { display: grid; margin: 0; }
	.bw-vendeur__exigences > div { display: grid; gap: 0.125rem; padding-block: var(--bw-s2); border-top: 1px solid var(--bw-line); }
	.bw-vendeur__exigences > div:first-child { border-top: 0; padding-top: 0; }
	.bw-vendeur__exigences dt { font-size: var(--bw-fs-sm); font-weight: 700; }
	.bw-vendeur__exigences dd { margin: 0; }
	@container (min-width: 30rem) {
		.bw-vendeur__exigences > div { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--bw-s3); }
	}
	@container (min-width: 62rem) {
		.bw-vendeur__exigences { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bw-s6); }
		.bw-vendeur__exigences > div:nth-child(2) { border-top: 0; padding-top: 0; }
	}

	/* Contrat sur 3 récoltes (orange réservé aux contrats) */
	.bw-vendeur__carte--contrat { background: var(--bw-orange-pale); border-color: color-mix(in srgb, var(--bw-orange) 45%, var(--bw-white)); }
	.bw-vendeur__carte--contrat .bw-vendeur__pastille { background: var(--bw-white); color: var(--bw-orange-700); }
	.bw-vendeur__carte--contrat .bw-vendeur__petit { color: var(--bw-ink); }

	.bw-vendeur__relance { display: flex; justify-content: center; margin-top: var(--bw-s6); }
	.bw-vendeur__relance .bw-btn { width: 100%; max-width: 24rem; }

	/* ---------- Questions fréquentes ---------- */
	.bw-vendeur__faq { border-top: 1px solid var(--bw-line); }
	.bw-vendeur__question { border-bottom: 1px solid var(--bw-line); }
	.bw-vendeur__question > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--bw-s3); min-height: var(--bw-tap); padding-block: var(--bw-s3); font-weight: 600; font-size: var(--bw-fs-md); line-height: 1.35; cursor: pointer; list-style: none; }
	.bw-vendeur__question > summary::-webkit-details-marker { display: none; }
	.bw-vendeur__question > summary:hover { color: var(--bw-green-700); }
	.bw-vendeur__chevron { flex: none; transition: transform var(--bw-duree); }
	.bw-vendeur__question[open] .bw-vendeur__chevron { transform: rotate(180deg); }
	.bw-vendeur__reponse { padding-bottom: var(--bw-s4); max-width: 65ch; }

	/* ---------- Appel final ---------- */
	.bw-vendeur__final { padding-block: var(--bw-s7); background: var(--bw-green-700); color: var(--bw-cream); }
	.bw-vendeur__final-grille { display: grid; gap: var(--bw-s5); align-items: center; }
	.bw-vendeur__final-titre { font-size: var(--bw-fs-h2); margin-bottom: var(--bw-s2); color: var(--bw-cream); }
	.bw-vendeur__final-actions { display: grid; gap: var(--bw-s3); justify-items: start; }
	.bw-vendeur__final-actions .bw-btn { width: 100%; max-width: 24rem; }
	.bw-vendeur__btn--clair { background: var(--bw-cream); color: var(--bw-ink); }
	.bw-vendeur__btn--clair:hover { background: var(--bw-white); color: var(--bw-ink); }
	.bw-vendeur__final-mail { font-size: var(--bw-fs-sm); }
	.bw-vendeur__final-mail a { color: var(--bw-cream); text-decoration: underline; }
	.bw-vendeur__final-mail a:hover { color: var(--bw-white); }

	/* ---------- 600 px ---------- */
	@media (min-width: 600px) {
		.bw-vendeur__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.bw-vendeur__carte { padding: var(--bw-s5); }
		.bw-vendeur__bref { padding: var(--bw-s5); }
		.bw-vendeur__actions .bw-btn { flex: 0 1 auto; white-space: nowrap; }
	}

	/* ---------- 900 px ---------- */
	@media (min-width: 900px) {
		.bw-vendeur__heros { padding-block: var(--bw-s7); }
		.bw-vendeur__heros-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--bw-s7); }
		.bw-vendeur__bloc { padding-block: var(--bw-s7); }
		.bw-vendeur__etapes { gap: var(--bw-s4); }
		.bw-vendeur__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bw-s5); }
		/* Qualité et contrat sur toute la largeur : pas de carte étirée à vide à côté d'une plus longue */
		.bw-vendeur__carte--large { grid-column: 1 / -1; }
		.bw-vendeur__carte--contrat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bw-s6); }
		.bw-vendeur__carte--contrat .bw-vendeur__carte-tete, .bw-vendeur__contrat-annonce { grid-column: 1 / -1; } /* DON-10 : phrase sur les contrats en tête, sur toute la largeur */
		.bw-vendeur__final-grille { grid-template-columns: minmax(0, 1fr) auto; gap: var(--bw-s7); }
		.bw-vendeur__final-actions { justify-items: center; text-align: center; }
		.bw-vendeur__final-actions .bw-btn { width: auto; }
	}

	/* ---------- 1200 px ---------- */
	@media (min-width: 1200px) {
		.bw-vendeur__heros-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
		.bw-vendeur__etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
		.bw-vendeur__etape { grid-template-columns: minmax(0, 1fr); row-gap: var(--bw-s2); padding: var(--bw-s5); }
		.bw-vendeur__num { grid-row: auto; margin-bottom: var(--bw-s1); }
		.bw-vendeur__etape p { grid-column: 1; }
	}
}

/* ---------- Formulaire « Demander un compte producteur » (DON-01 à DON-12, template-parts/vendeur/demande-compte.php) ----------
   Dans la page (sans JavaScript, ou en faisant défiler) et dans la fenêtre <dialog> (vendeur.js). Champs de 48 px de haut,
   16 px de texte (pas de zoom sur iPhone), erreurs en rouge avec icône et texte (jamais la couleur seule). */
@layer components {
	.bw-dp__form { display: grid; gap: var(--bw-s4); }
	.bw-dp__mention { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-dp__grille { display: grid; gap: var(--bw-s4); }
	.bw-dp__champ { display: grid; gap: var(--bw-s1); align-content: start; min-width: 0; }
	.bw-dp__libelle { font-weight: 600; font-size: var(--bw-fs-base); color: var(--bw-ink); padding: 0; }
	.bw-dp__facultatif { font-weight: 400; color: var(--bw-text-soft); }
	.bw-dp__aide { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-dp__aide a { color: var(--bw-link); }
	.bw-dp__champ input[type="text"], .bw-dp__champ input[type="email"], .bw-dp__champ input[type="tel"], .bw-dp__champ textarea {
		width: 100%; min-height: var(--bw-tap); padding: var(--bw-s3); border: 1px solid var(--bw-line-strong); border-radius: var(--bw-radius-s);
		background: var(--bw-white); color: var(--bw-ink); font-size: 1rem; line-height: 1.4;
	}
	.bw-dp__champ textarea { min-height: 7.5rem; resize: vertical; }
	.bw-dp__champ input:focus-visible, .bw-dp__champ textarea:focus-visible { border-color: var(--bw-ink); }

	/* Erreurs */
	.bw-dp__erreur { display: flex; align-items: flex-start; gap: var(--bw-s2); font-size: var(--bw-fs-sm); font-weight: 600; color: var(--bw-error); }
	.bw-dp__erreur-icone { width: 1.125rem; height: 1.125rem; margin-top: 0.1em; }
	.bw-dp__champ--erreur { padding-left: var(--bw-s3); border-left: 4px solid var(--bw-error); }
	.bw-dp__champ--erreur input[type="text"], .bw-dp__champ--erreur input[type="email"], .bw-dp__champ--erreur input[type="tel"], .bw-dp__champ--erreur textarea { border: 2px solid var(--bw-error); }
	.bw-dp__resume { padding: var(--bw-s4); border: 2px solid var(--bw-error); border-radius: var(--bw-radius-m); background: #FEF3F2; }
	.bw-dp__resume:focus-visible { box-shadow: var(--bw-focus); }
	.bw-dp__resume-titre { font-family: var(--bw-font-text); font-size: var(--bw-fs-md); font-weight: 700; color: var(--bw-error); margin-bottom: var(--bw-s1); }
	.bw-dp__resume ul { margin: var(--bw-s2) 0 0; padding-left: 1.25rem; display: grid; gap: var(--bw-s1); }
	.bw-dp__resume a { color: var(--bw-error); font-weight: 600; }

	/* Mode de culture : options larges, faciles à toucher */
	fieldset.bw-dp__champ { margin: 0; }
	.bw-dp__choix { display: grid; gap: var(--bw-s2); }
	.bw-dp__option { display: flex; align-items: center; gap: var(--bw-s3); min-height: var(--bw-tap); padding: var(--bw-s2) var(--bw-s3); border: 1px solid var(--bw-line-strong); border-radius: var(--bw-radius-s); background: var(--bw-white); cursor: pointer; }
	.bw-dp__option:has(input:checked) { border-color: var(--bw-green-600); background: color-mix(in srgb, var(--bw-green-pale) 50%, var(--bw-white)); }
	.bw-dp__option input, .bw-dp__case input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--bw-green-600); }
	.bw-dp__champ--erreur .bw-dp__option { border-color: var(--bw-error); }

	/* Consentement */
	.bw-dp__case { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--bw-s3); align-items: start; }
	.bw-dp__case input { margin-top: 0.15em; }
	.bw-dp__case label { cursor: pointer; }

	/* Champ piège : hors de l'écran, ignoré des lecteurs d'écran et du clavier */
	.bw-dp__piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

	.bw-dp__envoi { display: grid; gap: var(--bw-s2); justify-items: start; }
	.bw-dp__envoi .bw-btn { width: 100%; }
	.bw-dp__envoi .bw-btn[disabled] { opacity: 0.6; cursor: progress; }
	.bw-dp__note { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }

	/* Accusé de réception */
	.bw-dp__accuse { display: grid; gap: var(--bw-s2); justify-items: start; padding: var(--bw-s5) var(--bw-s4); border: 1px solid var(--bw-green-light); border-radius: var(--bw-radius-m); background: color-mix(in srgb, var(--bw-green-pale) 45%, var(--bw-white)); }
	.bw-dp__accuse:focus-visible { box-shadow: var(--bw-focus); }
	.bw-dp__accuse-icone { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--bw-radius-pill); background: var(--bw-green-600); color: var(--bw-white); }
	.bw-dp__accuse-titre { font-size: var(--bw-fs-h3); }
	.bw-dp__accuse-suite { font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-dp__accuse-fermer { display: none; margin-top: var(--bw-s2); }
	.bw-dp-dialogue .bw-dp__accuse-fermer { display: inline-flex; }

	/* Fenêtre : plein écran sur mobile, centrée et bornée à partir de 600 px */
	.bw-dp-dialogue { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--bw-cream); color: var(--bw-ink); }
	.bw-dp-dialogue::backdrop { background: rgb(30 30 28 / 0.55); }
	.bw-dp-dialogue__cadre { display: flex; flex-direction: column; height: 100%; }
	.bw-dp-dialogue__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bw-s3); padding: var(--bw-s3) var(--bw-s2) var(--bw-s3) var(--bw-s4); border-bottom: 1px solid var(--bw-line); background: var(--bw-white); }
	.bw-dp-dialogue__titre { font-size: var(--bw-fs-h3); padding-top: var(--bw-s2); }
	.bw-dp-dialogue__intro { margin-top: var(--bw-s1); font-size: var(--bw-fs-sm); color: var(--bw-text-soft); }
	.bw-dp-dialogue__fermer { flex: none; }
	.bw-dp-dialogue__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--bw-s4); }
	html:has(.bw-dp-dialogue[open]) { overflow: hidden; }

	@media (min-width: 600px) {
		.bw-dp__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bw-s4); row-gap: var(--bw-s4); }
		.bw-dp__champ--large { grid-column: 1 / -1; }
		.bw-dp__choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.bw-dp__envoi .bw-btn { width: auto; }
		.bw-dp-dialogue { width: min(46rem, calc(100% - 2rem)); height: auto; max-height: calc(100dvh - 3rem); margin: auto; border-radius: var(--bw-radius-l); box-shadow: var(--bw-shadow-2); overflow: hidden; }
		.bw-dp-dialogue__cadre { max-height: calc(100dvh - 3rem); }
		.bw-dp-dialogue__tete { padding: var(--bw-s4) var(--bw-s3) var(--bw-s4) var(--bw-s5); }
		.bw-dp-dialogue__corps { padding: var(--bw-s5); }
	}
	@media (prefers-reduced-motion: no-preference) {
		.bw-dp-dialogue[open] { animation: bw-dp-entree var(--bw-duree) ease-out; }
		@keyframes bw-dp-entree { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
	}
}

/* DON-10 : la phrase sur l'ouverture progressive des contrats, mise en avant dans la carte des contrats */
@layer components {
	.bw-vendeur__contrat-annonce { font-weight: 600; }
}