/**
 * Styles des archives (métier, ville) et de la page hub.
 * Chargé uniquement sur ces pages (cf. inc/01-assets.php).
 *
 * Rappel : le fond global du site est NOIR. Les blocs de contenu sont
 * des cartes crème. Variables de marque définies dans style.css.
 */

.welcome-archive,
.welcome-hub {
	--wa-gap: clamp(16px, 3vw, 28px);
	max-width: 1080px;
	margin: 0 auto 64px;
	padding: 0 16px;
	font-family: var(--welcome-sans, "Poppins", sans-serif);
	color: var(--welcome-encre, #1A1A1A);
}

/* ---------- FIL D'ARIANE (sur fond noir) ---------- */

.wa-ariane {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: .85rem;
	margin: 0 0 14px;
	color: rgba(250, 246, 241, .55);
}
.wa-ariane a { color: rgba(250, 246, 241, .8); text-decoration: none; }
.wa-ariane a:hover { color: #fff; text-decoration: underline; }

/* ---------- EN-TÊTE ---------- */

.wa-entete {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 20px;
	padding: clamp(20px, 4vw, 40px);
	margin-bottom: var(--wa-gap);
}

.wa-entete h1 {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: clamp(1.7rem, 4.5vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--welcome-encre, #1A1A1A);
}

.wa-entete__intro {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--welcome-gris, #5A5148);
	max-width: 68ch;
}
.wa-entete__intro strong { color: var(--welcome-cardinal, #D2042D); }
.wa-entete__pop { font-size: .9em; }

.wa-entete__desc { margin-top: 1em; line-height: 1.7; color: var(--welcome-gris, #5A5148); }

/* ---------- GRILLE DE FICHES ---------- */

.wa-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin-bottom: var(--wa-gap);
}

.wa-carte {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.wa-carte:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

.wa-carte__lien { display: block; text-decoration: none !important; color: var(--welcome-encre, #1A1A1A) !important; }
.wa-carte__lien .wa-carte__nom { color: var(--welcome-encre, #1A1A1A); }

.wa-carte__visuel {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--welcome-tan, #E4DACE), var(--welcome-surface, #F0EBE3));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.wa-carte__visuel img { width: 100%; height: 100%; object-fit: cover; }

.wa-carte__initiale {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: 2.6rem;
	color: rgba(26, 26, 26, .22);
	line-height: 1;
}

.wa-carte__texte { padding: 14px 16px 18px; }

.wa-carte__nom {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: 1.15rem;
	margin: 0 0 3px;
	line-height: 1.2;
	color: var(--welcome-encre, #1A1A1A);
}

.wa-carte__meta {
	margin: 0 0 8px;
	font-size: .85rem;
	color: var(--welcome-gris, #5A5148);
}

.wa-carte__prix { margin: 0; font-size: .9rem; color: var(--welcome-gris, #5A5148); }
.wa-carte__prix strong { color: var(--welcome-cardinal, #D2042D); }

.wa-carte__presta { margin: 3px 0 0; font-size: .8rem; color: var(--welcome-gris, #5A5148); }

/* ---------- MAILLAGE ---------- */

.wa-maillage {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 20px;
	padding: clamp(18px, 3.5vw, 32px);
	margin-bottom: var(--wa-gap);
}

.wa-maillage h2 {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: clamp(1.2rem, 2.8vw, 1.5rem);
	margin: 0 0 .8em;
	color: var(--welcome-encre, #1A1A1A);
}

.wa-liens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px 20px;
}

.wa-liens li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }

.wa-liens a {
	color: var(--welcome-encre, #1A1A1A);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wa-liens a:hover { color: var(--welcome-cardinal, #D2042D); }

.wa-liens__n {
	font-size: .74rem;
	color: var(--welcome-gris, #5A5148);
	background: var(--welcome-surface, #F0EBE3);
	border-radius: 999px;
	padding: 1px 7px;
	flex-shrink: 0;
}

/* ---------- APPEL À L'ACTION ---------- */

.wa-cta {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 20px;
	padding: clamp(20px, 4vw, 36px);
	text-align: center;
}
.wa-cta h2 {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: clamp(1.2rem, 2.8vw, 1.5rem);
	margin: 0 0 .4em;
}
.wa-cta p { margin: 0 0 18px; color: var(--welcome-gris, #5A5148); }

.wa-btn {
	display: inline-block;
	background: var(--welcome-cardinal, #D2042D);
	color: #fff !important;
	text-decoration: none !important;
	padding: 14px 32px;
	border-radius: 999px;
	font-weight: 600;
	transition: opacity .15s ease;
}
.wa-btn:hover { opacity: .88; }

/* ---------- PAGINATION ---------- */

.welcome-archive .navigation.pagination { margin-bottom: var(--wa-gap); }
.welcome-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.welcome-archive .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--welcome-creme, #FAF6F1);
	color: var(--welcome-encre, #1A1A1A);
	text-decoration: none;
}
.welcome-archive .page-numbers.current {
	background: var(--welcome-cardinal, #D2042D);
	color: #fff;
}

.wa-vide {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 20px;
	padding: clamp(20px, 4vw, 36px);
	margin-bottom: var(--wa-gap);
	color: var(--welcome-gris, #5A5148);
}

/* ---------- PAGE HUB ---------- */

.wh-metiers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: var(--wa-gap);
}

.wh-metier {
	background: var(--welcome-creme, #FAF6F1);
	border-radius: 16px;
	padding: 20px;
	text-decoration: none !important;
	/* ⚠️ PAS `inherit` : le thème colore les liens en blanc, et le nom du
	   métier devenait invisible sur la carte crème (constaté en prod le
	   11/08). On impose la couleur d'encre. */
	color: var(--welcome-encre, #1A1A1A) !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.wh-metier:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

.wh-metier__nom {
	font-family: var(--welcome-serif, "Playfair Display", Georgia, serif);
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--welcome-encre, #1A1A1A);
}
.wh-metier__n { font-size: .82rem; color: var(--welcome-gris, #5A5148); }
.wh-metier__prix { font-size: .85rem; color: var(--welcome-cardinal, #D2042D); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.wa-carte, .wh-metier { transition: none; }
	.wa-carte:hover, .wh-metier:hover { transform: none; }
}