/* =============================================================================
   Trader Finder — Styles
============================================================================= */

:root {
	--tr-color-primary:    #771783;
	--tr-color-accent:     #601268;
	--tr-color-text:       #1E1E1E;
	--tr-color-text-muted: #6b7280;
	--tr-color-bg:         #ffffff;
	--tr-color-bg-alt:     #f5f7fa;
	--tr-color-border:     #e2e8f0;
	--tr-radius:           4px;
	--tr-container:        1448px; /* 1400px de contenu utile + 2×1.5rem de padding-inline */
}

/* ── Conteneurs ────────────────────────────────────────────────────────────── */
.tf-hero__inner,
.tf-filters__inner,
.tf-directory__inner {
	max-width: var(--tr-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* ── Section carte (wrapper 1a + 1b) ──────────────────────────────────────── */
.tf-map-section {
	position: relative;
}

/* ── Filtre overlay (1a) — desktop : absolu en bas à gauche de la carte ───── */
.tf-map-overlay-filters {
	position: absolute;
	bottom: 1.5rem;
	/* Aligné sur le bord gauche du contenu de la page (conteneur centré + padding) */
	left: max(1.5rem, calc((100% - var(--tr-container)) / 2 + 1.5rem));
	z-index: 10;
	width: 450px;
	background: rgba(255, 255, 255, 0.64);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(119, 23, 131, 0.2);
	border-radius: 0;
	padding: 30px 1.25rem;
}

.tf-map-overlay-filters .tf-filters {
	flex-direction: column;
	align-items: center; /* centre les groupes (donc le select) dans l'overlay */
	gap: 30px;
}

/* Groupes calés sur la largeur du select : centrés en bloc, mêmes bords gauche/droit */
.tf-map-overlay-filters .tf-filters__group {
	min-width: 0;
	width: 360px;
	max-width: 100%;
}

/* Matériaux empilés verticalement, alignés sur le bord gauche du select */
.tf-map-overlay-filters .tf-filters__checks {
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
}

/* Tous les textes de l'overlay : #1E1E1E, 16px, 500 */
.tf-map-overlay-filters,
.tf-map-overlay-filters .tf-filters__select,
.tf-map-overlay-filters .tf-check {
	color: #1E1E1E;
	font-size: 16px;
	font-weight: 500;
}

/* Select et cases à cocher : fond transparent, bordure 1px solid #771783 */
.tf-map-overlay-filters .tf-filters__select {
	background: transparent;
	border: 1px solid #771783;
}

.tf-map-overlay-filters .tf-check input[type="checkbox"] {
	background: transparent;
	border: 1px solid #771783;
}

/* Case cochée : on garde le remplissage violet pour lisibilité de la coche */
.tf-map-overlay-filters .tf-check input[type="checkbox"]:checked {
	background: #771783;
}

/* ── Carte (1b) ────────────────────────────────────────────────────────────── */
.tf-map {
	height: 600px;
	background: var(--tr-color-bg-alt);
	position: relative;
}

.tf-map__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	color: var(--tr-color-text-muted);
}

.tf-map__spinner {
	display: block;
	width: 36px;
	height: 36px;
	border: 3px solid var(--tr-color-border);
	border-top-color: var(--tr-color-primary);
	border-radius: 50%;
	animation: tf-spin .8s linear infinite;
}

@keyframes tf-spin { to { transform: rotate(360deg); } }

.tf-map__loading-text { font-size: .9rem; }

.tf-map--active .tf-map__placeholder { display: none; }

/* ── InfoWindow Google Maps — bouton fermer compact ────────────────────────── */
.gm-style .gm-style-iw-c {
	padding: 0 !important;
}

.gm-style .gm-style-iw-d {
	overflow: hidden !important;
}

/* Réduit le bouton fermer (×) */
.gm-style .gm-ui-hover-effect {
	top: 0 !important;
	right: 0 !important;
	width: 24px !important;
	height: 24px !important;
	opacity: .6 !important;
}

.gm-style .gm-ui-hover-effect > span {
	width: 14px !important;
	height: 14px !important;
	margin: 5px !important;
}

/* ── Popup Google Maps ─────────────────────────────────────────────────────── */
.tf-map-popup {
	padding: .75rem 1rem 1rem;
	min-width: 190px;
	max-width: 230px;
	font-family: "Nunito", sans-serif;
}

.tf-map-popup__entity {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #1E1E1E;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .4rem;
}

.tf-map-popup__name {
	display: none;
}

.tf-map-popup__addr {
	font-size: 14px;
	font-weight: 400;
	color: #1E1E1E;
	margin: 0 0 .75rem;
}

.tf-map-popup__link {
	display: inline-block;
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
	background: var(--tr-color-primary);
	text-decoration: none;
	padding: .3rem .9rem;
	border-radius: 999px;
	transition: background .2s;
}

.tf-map-popup__link:hover { background: var(--tr-color-accent); color: #fff; }

/* ── Filtres annuaire (2a) ─────────────────────────────────────────────────── */
.tf-dir-filters-wrap {
	padding: 1.75rem 0;
}

.tf-dir-title {
	font-size: 32px;
	font-weight: 400;
	color: var(--tr-color-text);
	margin: 0 0 1.25rem;
}

/* ── Filtres communs (overlay + annuaire) ──────────────────────────────────── */
.tf-filters {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.tf-filters__group {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 180px;
}

.tf-filters__group--materials { min-width: 280px; }

.tf-filters__label {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tr-color-text-muted);
	display: none; /* masqué sur desktop, visible sur mobile via media query */
}

.tf-filters__select {
	width: 360px;
	max-width: 100%;
	padding: .55rem .9rem;
	border: 1px solid var(--tr-color-primary);
	border-radius: var(--tr-radius);
	font-size: .95rem;
	background: var(--tr-color-bg);
	color: var(--tr-color-text);
	cursor: pointer;
	appearance: auto;
}

.tf-filters__checks {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	max-width: 850px;
}

.tf-check {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: 0 10px 10px 0;
	font-size: 16px;
	cursor: pointer;
	user-select: none;
}

.tf-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--tr-color-primary);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	transition: background-color .15s, border-color .15s;
}

.tf-check input[type="checkbox"]:checked {
	background: var(--tr-color-primary);
	border-color: var(--tr-color-primary);
}

.tf-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: .3rem;
	height: .55rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Annuaire (2b) ─────────────────────────────────────────────────────────── */
.tf-directory {
	padding: 0 0 4rem;
	background: #fff;
}

.tf-empty {
	text-align: center;
	color: var(--tr-color-text-muted);
	font-style: italic;
	padding: 3rem 0;
}

/* ── Aucun résultat ────────────────────────────────────────────────────────── */
.tf-no-results {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--tr-color-text-muted);
}

.tf-no-results p { font-size: 1.1rem; margin-bottom: 1.25rem; }

.tf-no-results .btn { display: inline-block; width: auto; }

/* ── Continent ─────────────────────────────────────────────────────────────── */
.tf-continent-section { margin-bottom: 2.5rem; }

.tf-continent-heading {
	background: var(--tr-color-primary);
	color: #fff;
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--tr-radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

/* Chevron dans un rond blanc (identique à documentation.css) */
.tf-continent-chevron {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}

.tf-continent-chevron::before {
	content: '';
	width: 16px;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23771783' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* État replié */
.tf-continent-collapsed .tf-continent-chevron {
	transform: rotate(180deg);
}

.tf-continent-collapsed .tf-continent-body {
	display: none;
}

/* ── Pays ──────────────────────────────────────────────────────────────────── */
.tf-country-section { margin-bottom: 2rem; }

.tf-country-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--tr-color-text);
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.tf-country-heading .fi {
	width: 1.3em;
	height: .975em;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ── Grille de cartes traders ──────────────────────────────────────────────── */
.tf-cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1100px) { .tf-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .tf-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .tf-cards-grid { grid-template-columns: 1fr; } }

/* ── Carte trader ──────────────────────────────────────────────────────────── */
.tf-card {
	background: #F2F2F2;
	border: none;
	border-radius: var(--tr-radius);
	display: flex;
	flex-direction: column;
}

.tf-card__body {
	padding: 1.4rem 1.4rem 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.tf-card__name {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

/* Entité légale — ligne violette en haut de la carte */
.tf-card__entity {
	font-size: 24px;
	font-weight: 700;
	color: var(--tr-color-primary);
	letter-spacing: .05em;
	margin: 0;
	/* 30px au total avec le gap .35rem du .tf-card__body */
	margin-bottom: calc(30px - .35rem);
}

.tf-card__name a {
	color: var(--tr-color-text);
	text-decoration: none;
}

.tf-card__city {
	font-size: 14px;
	font-weight: 400;
	color: #1E1E1E;
	margin: 0;
}

.tf-card__address {
	font-size: 14px;
	font-weight: 400;
	color: #1E1E1E;
	margin: 0;
	line-height: 1.4;
}

.tf-card__materials {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.tf-card__materials li {
	font-size: 14px;
	font-weight: 400;
	color: #1E1E1E;
	line-height: 1.5;
}

.tf-card__footer { padding: 1rem 1.4rem 1.4rem; }

.trader-finder .tf-card__footer .tf-card__cta {
	padding: .5rem 1.25rem !important;
	border-radius: 30px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	width: auto !important;
	display: inline-block !important;
}

/* ── Contact note (notice compact dans l'annuaire) ─────────────────────────── */
.tf-contact-note {
	display: inline-flex;
	align-items: center;
	/* row-gap .75rem : si le texte force un retour a la ligne du bouton avant le
	   breakpoint mobile (colonne), l'espacement vertical entre les deux lignes
	   reste raisonnable au lieu d'heriter du column-gap 3rem. */
	gap: .75rem 3rem;
	background: #F2F2F2;
	padding: .75rem 1.25rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.tf-contact-note p {
	margin: 10px 20px 10px;
	font-size: 20px;
	font-weight: 400;
	color: var(--tr-color-text);
}

/* Bouton contact-note : règle la PLUS forte (spécificité 0,3,0 + !important),
   passe devant .trader-finder .btn et Elementor. */
.trader-finder .tf-contact-note__btn.tf-contact-note__btn {
	white-space: nowrap !important;
	font-weight: 400 !important;
	border-radius: 999px !important;
	font-size: 16px !important;
}

/* ── Boutons ─── plus forts qu'Elementor via !important (spécificité 0,2,0) ──── */
.trader-finder .btn {
	display: inline-block !important;
	padding: .65rem 1.25rem !important;
	border-radius: var(--tr-radius) !important;
	font-size: .875rem !important;
	font-weight: 400 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color .2s, color .2s, border-color .2s !important;
	border: 2px solid transparent !important;
	font-family: inherit !important;
}

.trader-finder .btn--primary {
	background: var(--tr-color-primary) !important;
	color: #fff !important;
	border-color: var(--tr-color-primary) !important;
}

.trader-finder .btn--primary:hover {
	background: var(--tr-color-accent) !important;
	border-color: var(--tr-color-accent) !important;
	color: #fff !important;
}

.trader-finder .btn--outline {
	background: transparent !important;
	color: var(--tr-color-primary) !important;
	border-color: var(--tr-color-primary) !important;
}

.trader-finder .btn--outline:hover {
	background: var(--tr-color-primary) !important;
	color: #fff !important;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* Overlay au-dessus de la carte, dans le flux (carte dessous). On garde le
	   fond blanc translucide + blur du desktop. */
	.tf-map-section {
		display: flex;
		flex-direction: column;
	}

	.tf-map-overlay-filters {
		position: relative;
		order: -1;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		width: 100%;
		border-radius: 0;
	}

	/* Matériaux verticaux sur mobile */
	.tf-map-overlay-filters .tf-filters__checks {
		flex-direction: column;
	}

	/* Carte au format proche du portrait */
	.tf-map { height: 450px; }

	/* Dir filters */
	.tf-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.tf-filters__group { min-width: 0; }

	/* Contact note : empilement vertical sur mobile — le gap desktop (3rem,
	   pense pour un espacement horizontal texte/bouton) devient un espace
	   vertical demesure une fois en colonne, on le reduit ici. */
	.tf-contact-note {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
	}

	.tf-contact-note p {
		margin: 0;
	}
}