/**
 * "Les Collectionneurs" — page + formulaires.
 * Reprend la charte 1000 BOLS déjà en place (voir galerie.css, product.css).
 * Les variables --mb-* sont redéfinies ici pour l'autonomie du fichier,
 * comme le fait déjà galerie.css.
 */

:root {
	--mb-bordeaux: #9e321f;
	--mb-ink: #171717;
	--mb-muted: #67645f;
	--mb-line: #ddd9d1;
	--mb-paper: #fbfaf7;
	--mb-soft: #f2f0ec;
}

.mb-collectors-page {
	background: var(--mb-paper);
	padding: 0 0 80px;
}

.mb-collectors-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- En-tête / intro ---------- */

.mb-collectors-header {
	padding: 72px 0 40px;
	text-align: center;
}

.mb-collectors-eyebrow {
	margin: 0 0 8px;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mb-bordeaux);
}

.mb-collectors-title {
	margin: 0 0 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.2;
	color: var(--mb-ink);
}

.mb-collectors-lede {
	margin: 0 0 20px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.15rem;
	color: var(--mb-muted);
}

.mb-collectors-rule {
	width: 56px;
	height: 1px;
	margin: 0 auto 24px;
	background: var(--mb-line);
}

.mb-collectors-intro {
	max-width: 560px;
	margin: 0 auto 14px;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--mb-ink);
	text-align: left;
}

.mb-collectors-intro strong {
	color: var(--mb-bordeaux);
}

/* ---------- Blocs (inscription / dépôt d'annonce) ---------- */

.mb-collectors-box {
	background: #fff;
	border: 1px solid var(--mb-line);
	padding: 32px 28px;
	margin-bottom: 32px;
}

.mb-collectors-box-title {
	margin: 0 0 20px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--mb-ink);
}

.mb-collectors-error {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fbeceb;
	border: 1px solid #e3b6b1;
	color: #7c2718;
	font-size: 0.88rem;
}

.mb-collectors-success {
	margin: 0;
	padding: 12px 14px;
	background: #eef4ec;
	border: 1px solid #b9d3af;
	color: #35521f;
	font-size: 0.92rem;
}

.mb-collectors-note {
	margin: 16px 0 0;
	font-size: 0.85rem;
	color: var(--mb-muted);
}

.mb-collectors-note a {
	color: var(--mb-bordeaux);
}

/* ---------- Formulaires ---------- */

.mb-collectors-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mb-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.mb-form-row-group {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.mb-form-row label {
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var(--mb-muted);
}

.mb-form-row input[type="text"],
.mb-form-row input[type="email"],
.mb-form-row input[type="password"],
.mb-form-row input[type="file"],
.mb-form-row select,
.mb-form-row textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mb-line);
	background: var(--mb-paper);
	color: var(--mb-ink);
	font-family: inherit;
	font-size: 0.95rem;
}

.mb-form-row select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239e321f' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 7px;
}

.mb-form-row input:focus,
.mb-form-row select:focus,
.mb-form-row textarea:focus {
	border-color: var(--mb-bordeaux);
	outline: none;
}

.mb-collectors-submit {
	align-self: flex-start;
	padding: 13px 28px;
	background: var(--mb-bordeaux);
	color: #fff;
	border: none;
	font-family: inherit;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mb-collectors-submit:hover {
	background: #7c2718;
}

/* ---------- Bouton déclencheur "Déposer une annonce" ---------- */

.mb-collectors-deposit-trigger,
.mb-collectors-actions {
	text-align: center;
	margin: 0 0 32px;
}

/* ---------- Fenêtre modale "Déposer une annonce" ---------- */

.mb-annonce-modal[hidden] {
	display: none;
}

.mb-annonce-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 20px;
	overflow-y: auto;
}

.mb-annonce-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(23, 23, 23, 0.55);
}

.mb-annonce-modal-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	background: #fff;
	border: 1px solid var(--mb-line);
	padding: 36px 28px;
}

.mb-annonce-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--mb-muted);
	cursor: pointer;
}

.mb-annonce-modal-close:hover {
	color: var(--mb-bordeaux);
}

/* ---------- Grille des annonces publiées ---------- */

.mb-collectors-grid {
	margin-top: 8px;
}

.mb-collectors-empty {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	color: var(--mb-muted);
}

.mb-collectors-card-ceramiste {
	color: var(--mb-bordeaux);
}

/* ---------- Actions du titulaire (Modifier / Supprimer) ---------- */

.mb-owner-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 12px;
}

.mb-delete-form {
	margin: 0;
}

.mb-delete-button {
	padding: 13px 20px;
	background: none;
	border: 1px solid var(--mb-line);
	color: var(--mb-muted);
	font-family: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mb-delete-button:hover {
	border-color: #9e321f;
	color: #9e321f;
}

@media (max-width: 640px) {
	.mb-collectors-header {
		padding: 48px 0 28px;
	}
	.mb-collectors-box {
		padding: 24px 18px;
	}
	.mb-form-row-group {
		flex-direction: column;
	}
}