/* =============================================================================
   Documentation — bibliothèque de fichiers téléchargeables
   ============================================================================= */

/* ── Fix global : l'attribut [hidden] peut être écrasé par des rules display
   des stylesheets author (display:flex sur .doc-card, etc.). Cette règle
   garantit que hidden = caché, quelle que soit la spécificité. ────────────── */

[hidden] { display: none !important; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.doc-hero {
	background: #1a1a2e;
	color: #fff;
	padding: 60px 20px;
	text-align: center;
}

.doc-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

.doc-hero__title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 700;
	margin: 0 0 16px;
}

.doc-hero__intro {
	font-size: 1.05rem;
	opacity: .85;
	max-width: 640px;
	margin: 0 auto;
}

/* ── Barre de filtres ────────────────────────────────────────────────────────
   Sticky sous le header Elementor (ajuster --header-height si besoin).
   4 lignes : 1 filtre par ligne, même en desktop.                            */

.doc-filters {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.doc-filters__inner {
	max-width: 1440px; /* 1400px de contenu utile + 2×20px de padding */
	margin: 0 auto;
	padding: 14px 20px;
}

/* Deux colonnes : labels (largeur du plus long) + contrôles.
   Les lignes utilisent display:contents pour que labels et contrôles
   partagent la même grille et s'alignent verticalement d'une ligne à l'autre. */
.doc-filters__grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 16px;
	align-items: center;
}

/* Ligne de filtre : ses enfants (label + contrôles) deviennent des items de la grille parente */
.doc-filter-row {
	display: contents;
}

.doc-filter-row__label {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 400;
	color: #1a1a1a;
	flex-shrink: 0;
	width: auto;
	white-space: nowrap;
	text-align: left;
	line-height: 1.2;
}

.doc-filter-row__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
	flex: 1;
	min-width: 0;
}

/* Select dans la zone de contrôles */
.doc-filter-row__controls .doc-filter-select {
	width: 100%;
	max-width: 340px;
}

/* Tabs produit */
.doc-filter-tab {
	padding: 6px 16px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: #f4f4f4;
	color: #333;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}

.doc-filter-tab:hover {
	background: #e0e0e0;
}

.doc-filter-tab.is-active {
	background: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
}

/* Toggles catégorie (type de document)
   Sélecteurs scopés sous .doc-filter-row__controls pour passer devant le style
   global des boutons du kit Elementor (.elementor-kit-5 button). */
.doc-filter-row__controls .doc-filter-toggle {
	padding: 10px 20px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #fff;
	color: #1a1a1a;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}

.doc-filter-row__controls .doc-filter-toggle.is-active {
	background: #771783;
	border-color: #771783;
	color: #fff;
}

.doc-filter-row__controls .doc-filter-toggle:hover {
	background: #5E1268;
	border-color: #5E1268;
	color: #fff;
}

/* Select (pays / trader) */
.doc-filter-select {
	padding: 11px 40px 11px 16px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance: none;
	font-size: .95rem;
	color: #333;
	cursor: pointer;
}

.doc-filter-select:focus {
	outline: none;
	border-color: #771783;
}

/* ── Résultats ───────────────────────────────────────────────────────────────*/

.doc-results {
	padding: 40px 20px 80px;
}

.doc-results__inner {
	max-width: 1400px; /* contenu utile aligné sur .doc-filters__inner */
	margin: 0 auto;
}

.doc-no-results,
.doc-empty {
	text-align: center;
	color: #888;
	padding: 60px 20px;
	font-size: 1rem;
}

/* ── Continent ───────────────────────────────────────────────────────────────*/

.doc-continent {
	margin-bottom: 32px;
}

/* Barre violette cliquable (repli / dépli) */
.doc-continent__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #771783;
	padding: 16px 24px;
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
}

.doc-continent__header:focus-visible {
	outline: 2px solid #5E1268;
	outline-offset: 2px;
}

.doc-continent__title {
	font-size: 32px;
	font-weight: 400;
	color: #fff;
	margin: 0;
}

/* Chevron dans un rond blanc */
.doc-continent__toggle {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}

.doc-continent__toggle::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;
}

.doc-continent.is-collapsed .doc-continent__toggle {
	transform: rotate(180deg);
}

.doc-continent__body {
	padding-top: 16px;
}

.doc-continent.is-collapsed .doc-continent__body {
	display: none;
}

/* ── Pays (sans fond) ────────────────────────────────────────────────────────*/

.doc-country {
	background: transparent;
	border-radius: 0;
	padding: 8px 0 4px;
	margin-bottom: 8px;
}

/* Le pays ne crée pas d'indentation : son titre et ses docs sont décalés de 24px
   (comme le texte du continent et de l'entité légale) pour un alignement unique. */
.doc-country__title {
	font-size: 24px;
	font-weight: 700;
	color: #1E1E1E;
	text-transform: uppercase;
	margin: 0 0 16px;
	padding-left: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.doc-country__title .fi {
	font-size: 1.2em;
	flex-shrink: 0;
}

/* ── Entité légale (#D9D9D9) ─────────────────────────────────────────────────*/

.doc-legal-entity {
	background: #D9D9D9;
	border-radius: 4px;
	padding: 20px 24px;
	margin: 12px 0;
}

.doc-legal-entity__title {
	font-size: 24px;
	font-weight: 700;
	color: #1E1E1E;
	margin: 0 0 16px;
}

/* Docs globaux de la LE (sans trader associé) */
.doc-le-docs {
	margin-bottom: 8px;
}

/* ── Trader (#F2F2F2) ────────────────────────────────────────────────────────*/

.doc-trader {
	background: #F2F2F2;
	border-radius: 0;
	padding: 20px 24px;
	margin: 24px 0;
}

.doc-trader__title {
	font-size: 20px;
	font-weight: 700;
	color: #1E1E1E;
	margin: 0 0 16px;
}

/* Les docs globaux du pays n'ont pas de titre et pas de fond distinct.
   Décalés de 24px pour aligner les noms de documents avec les titres. */
.doc-trader--global {
	background: transparent;
	padding: 0 24px 0 24px;
	margin: 0 0 8px;
}

.doc-trader--global .doc-trader__title {
	display: none;
}

/* ── Grille de cartes ────────────────────────────────────────────────────────*/

.doc-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 48px;
	padding-bottom: 20px;
}

/* ── Carte document (ligne : titre + bouton, sans encadré) ───────────────────*/

.doc-card {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.doc-card__title {
	flex: 1;
	min-width: 160px;
	font-size: 14px;
	font-weight: 400;
	color: #000;
	margin: 0;
	line-height: 1.35;
}

/* Zone de contrôle à droite de la carte : même largeur que ce soit un gros
   bouton "Download" (1 langue) ou un select + bouton icône (multi-langues). */
.doc-card__single,
.doc-card__lang-picker {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
	align-items: center;
}

/* 1 langue : le bouton remplit toute la largeur de la zone */
.doc-card__single .btn--download {
	width: 100%;
	min-width: 0;
}

.doc-card__lang-select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 40px 10px 18px;
	border: none;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 400;
	color: #000;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M3 6l3-3 3 3M3 10l3 3 3-3' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	appearance: none;
	cursor: pointer;
}

/* Selects de langue au niveau pays (docs globaux, sur fond blanc) :
   bordure noire pour rester visibles. Les niveaux LE (#D9D9D9) et
   trader (#F2F2F2) ont un fond gris, pas besoin de bordure. */
.doc-trader--global .doc-card__lang-select {
	border: 1px solid #000;
}

/* ── Bouton téléchargement ───────────────────────────────────────────────────*/

.btn--download {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 220px;
	padding: 10px 20px;
	background: #771783;
	color: #fff;
	border: none;
	border-radius: 30px;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.btn--download:hover {
	background: #771783;
	color: #fff;
}

/* Variante icône seule (bouton à côté du sélecteur de langue) */
.btn--download.btn--icon {
	min-width: 0;
	justify-content: center;
	gap: 0;
	padding: 10px 20px;
}

.btn--download::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 16px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M6 0v9M2 5l4 4 4-4M1 12h10' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Responsive ──────────────────────────────────────────────────────────────*/

@media (max-width: 900px) {
	/* Mobile : une seule colonne, label au-dessus de son contrôle */
	.doc-filters__grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.doc-filter-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 6px;
	}

	.doc-filter-row__label {
		width: auto;
		font-size: 1.1rem;
	}

	.doc-filter-row__controls .doc-filter-select {
		max-width: none;
	}

	.doc-filter-select {
		width: 100%;
	}

	.doc-cards {
		grid-template-columns: 1fr;
	}

	.doc-continent__header {
		padding: 14px 16px;
	}

	.doc-continent__title {
		font-size: 1.2rem;
	}

	.doc-country {
		padding: 8px 0 4px;
	}

	.doc-country__title,
	.doc-trader--global {
		padding-left: 16px;
	}

	.doc-legal-entity,
	.doc-trader {
		padding: 16px;
	}

	.doc-card__single,
	.doc-card__lang-picker {
		width: 100%;
	}

	.btn--download {
		min-width: 0;
		width: 100%;
	}

	.btn--download.btn--icon {
		width: auto;
	}
}