/**
 * Extra MatGeco — Documents List
 * Styles scopés .em-dl-* pilotés par CSS custom properties.
 *
 * !important : appliqué sur toutes les props utilisateur pour battre
 * les Global Styles de Kadence (theme.json) et .entry-content h1..h6.
 */

/* =================================================================
 * Section wrapper
 * ================================================================= */
.em-dl {
	background: var(--em-dl-section-bg, transparent);
	color: var(--em-dl-section-text, inherit);
	padding-top: var(--em-dl-outer-pt, 0) !important;
	padding-bottom: var(--em-dl-outer-pb, 0) !important;
	position: relative;
}

/* Sans guide de pose, le bloc documents est la DERNIÈRE section de la fiche :
 * ménager un espace avant le bandeau footer, uniquement dans ce cas
 * (spécificité supérieure à la règle générique ci-dessus). */
.entry-content > .wp-block-columns:last-child .em-dl {
	padding-bottom: 64px !important;
}

/* Défaut : bloc pleine largeur, sans padding horizontal — l'utilisateur règle depuis l'Inspector si besoin.
   Le panel « Largeur du bloc » (blockMaxWidth) contraint la max-width quand activé. */
.em-dl-outer {
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* === Largeur du bloc unifiée (bmw) === */
.em-dl--bmw .em-dl-outer { max-width: var(--em-dl-bmw, none) !important; margin-inline: auto !important; }
@media (max-width: 1024px) {
	.em-dl--bmw .em-dl-outer { max-width: var(--em-dl-bmw-t, var(--em-dl-bmw, none)) !important; }
}
@media (max-width: 600px) {
	.em-dl--bmw .em-dl-outer { max-width: var(--em-dl-bmw-m, var(--em-dl-bmw-t, var(--em-dl-bmw, none))) !important; }
}

/* =================================================================
 * Head
 * ================================================================= */
.em-dl-head {
	margin-bottom: var(--em-dl-head-mb, 32px) !important;
	text-align: var(--em-dl-head-align, left);
}
.em-dl--head-align-center .em-dl-head { text-align: center; }
.em-dl--head-align-right .em-dl-head  { text-align: right;  }

.em-dl .em-dl-eyebrow {
	display: inline-block;
	font-size: var(--em-dl-eyebrow-fs, 13px) !important;
	font-weight: var(--em-dl-eyebrow-fw, 600) !important;
	font-style: var(--em-dl-eyebrow-fst, normal) !important;
	line-height: var(--em-dl-eyebrow-lh, 1.3) !important;
	letter-spacing: var(--em-dl-eyebrow-ls, 1.2px) !important;
	text-transform: var(--em-dl-eyebrow-tt, uppercase) !important;
	color: var(--em-dl-eyebrow-color, #1c4a1d) !important;
	margin-bottom: var(--em-dl-eyebrow-mb, 10px) !important;
}

.em-dl .em-dl-title,
.em-dl h1.em-dl-title,
.em-dl h2.em-dl-title,
.em-dl h3.em-dl-title,
.em-dl h4.em-dl-title,
.em-dl h5.em-dl-title,
.em-dl h6.em-dl-title {
	font-size: var(--em-dl-title-fs, 32px) !important;
	font-weight: var(--em-dl-title-fw, 700) !important;
	font-style: var(--em-dl-title-fst, normal) !important;
	line-height: var(--em-dl-title-lh, 1.15) !important;
	letter-spacing: var(--em-dl-title-ls, -0.5px) !important;
	text-transform: var(--em-dl-title-tt, none) !important;
	color: var(--em-dl-title-color, #11802f) !important;
	margin: 0 0 var(--em-dl-title-mb, 12px) 0 !important;
}
.em-dl .em-dl-title em {
	font-weight: var(--em-dl-title-em-fw, 700) !important;
	font-style: var(--em-dl-title-em-fst, italic) !important;
	text-transform: var(--em-dl-title-em-tt, none) !important;
	color: var(--em-dl-title-em-color, #000000) !important;
}

.em-dl .em-dl-lead,
.em-dl p.em-dl-lead {
	font-size: var(--em-dl-lead-fs, 16px) !important;
	font-weight: var(--em-dl-lead-fw, 400) !important;
	font-style: var(--em-dl-lead-fst, normal) !important;
	line-height: var(--em-dl-lead-lh, 1.55) !important;
	letter-spacing: var(--em-dl-lead-ls, 0) !important;
	text-transform: var(--em-dl-lead-tt, none) !important;
	color: var(--em-dl-lead-color, #4a5a4a) !important;
	margin: 0 0 var(--em-dl-lead-mb, 0) 0 !important;
	max-width: 780px;
}
/* L introduction est le seul element d en-tete a porter une largeur maximale :
   son texte est bien aligne A L INTERIEUR de son bloc, mais ce bloc doit encore
   etre place dans l en-tete, ce que font les marges automatiques. Les selecteurs
   reprennent " p.em-dl-lead " et le !important pour peser aussi lourd que la regle
   de mise en forme au-dessus : sans cela son " margin: 0 0 X 0 !important "
   l emporte et l introduction reste collee a gauche, quel que soit l alignement. */
.em-dl--head-align-center .em-dl-lead,
.em-dl--head-align-center p.em-dl-lead {
	margin-left: auto !important;
	margin-right: auto !important;
}
.em-dl--head-align-right .em-dl-lead,
.em-dl--head-align-right p.em-dl-lead {
	margin-left: auto !important;
	margin-right: 0 !important;
}
.em-dl--head-align-left .em-dl-lead,
.em-dl--head-align-left p.em-dl-lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* =================================================================
 * List (grid of docs)
 * ================================================================= */
.em-dl-list {
	display: grid;
	grid-template-columns: repeat(var(--em-dl-cols, 2), minmax(0, 1fr));
	gap: var(--em-dl-gap, 12px);
}

/* =================================================================
 * Doc card (v0.26+ : <div>, plus <a>)
 * ================================================================= */
.em-dl .em-dl-doc {
	display: flex;
	flex-wrap: wrap; /* v0.29.1 : autorise wrap quand la carte est étroite (colonnes Gutenberg) */
	align-items: center;
	gap: var(--em-dl-doc-gap, 12px) !important;
	padding: var(--em-dl-doc-py, 14px) var(--em-dl-doc-px, 16px) !important;
	background: var(--em-dl-doc-bg, #ffffff) !important;
	border: var(--em-dl-doc-bd-w, 1px) solid var(--em-dl-doc-bd-color, rgba(0,0,0,0.08)) !important;
	border-radius: var(--em-dl-doc-radius, 12px) !important;
	box-shadow: var(--em-dl-doc-shadow, none) !important;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

/* Hover variants */
.em-dl--hover-lift   .em-dl-doc:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; }
.em-dl--hover-border .em-dl-doc:hover { border-color: var(--em-dl-doc-hbd, #11802f) !important; }
.em-dl--hover-bg     .em-dl-doc:hover { background: var(--em-dl-doc-hbg, #f9fafb) !important; }
.em-dl--hover-none   .em-dl-doc:hover { transform: none; }

/* --- Icon badge (PDF / DWG / CSC…) --- */
.em-dl .em-dl-doc-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--em-dl-icon-size, 44px) !important;
	height: var(--em-dl-icon-size, 44px) !important;
	background: var(--em-dl-icon-bg, #11802f) !important;
	color: var(--em-dl-icon-color, #ffffff) !important;
	border-radius: var(--em-dl-icon-radius, 8px) !important;
	font-size: var(--em-dl-icon-fs, 12px) !important;
	font-weight: var(--em-dl-icon-fw, 700) !important;
	text-transform: var(--em-dl-icon-tt, uppercase) !important;
	letter-spacing: var(--em-dl-icon-ls, 0.5px) !important;
	line-height: 1;
}

/* --- Miniature par document (v0.35.0) — remplace le badge quand définie ---
 * Largeur ET hauteur s'appliquent au CADRE (border-box : bordure + padding inclus),
 * l'img remplit l'intérieur — thumbWidth=thumbHeight donne donc un cadre carré exact. */
.em-dl .em-dl-doc-thumb {
	flex-shrink: 0;
	width: var(--em-dl-thumb-w, 56px) !important;
	max-width: 100% !important; /* jamais plus large que la carte (colonnes étroites) */
	height: var(--em-dl-thumb-h, auto) !important;
	background: var(--em-dl-thumb-bg, transparent) !important;
	border: var(--em-dl-thumb-bd-w, 0px) solid var(--em-dl-thumb-bd-color, #e4e9e4) !important;
	border-radius: var(--em-dl-thumb-radius, 6px) !important;
	padding: var(--em-dl-thumb-pad, 0px) !important;
	margin: 0 !important;
	box-sizing: border-box;
	line-height: 0;
}
.em-dl .em-dl-doc-thumb img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important; /* = auto tant que le cadre n'a pas de hauteur fixe */
	object-fit: var(--em-dl-thumb-fit, cover) !important;
	/* Rayon intérieur = rayon du cadre moins bordure et padding (clampé à 0 par calc) */
	border-radius: calc(var(--em-dl-thumb-radius, 6px) - var(--em-dl-thumb-bd-w, 0px) - var(--em-dl-thumb-pad, 0px)) !important;
	margin: 0 !important;
}

/* --- Info block --- */
/* v0.29.1 : min-width 180px pour que le nom du fichier ait toujours au moins
   180px avant que les actions ne wrappent en dessous (fix titre coupé verticalement) */
.em-dl-doc-info {
	flex: 1 1 180px;
	min-width: 150px;
}

.em-dl .em-dl-doc-name {
	font-size: var(--em-dl-name-fs, 15px) !important;
	font-weight: var(--em-dl-name-fw, 600) !important;
	font-style: var(--em-dl-name-fst, normal) !important;
	line-height: var(--em-dl-name-lh, 1.3) !important;
	letter-spacing: var(--em-dl-name-ls, 0) !important;
	text-transform: var(--em-dl-name-tt, none) !important;
	color: var(--em-dl-name-color, #1c4a1d) !important;
	margin: 0 0 var(--em-dl-name-mb, 4px) 0 !important;
}

.em-dl .em-dl-doc-meta {
	font-size: var(--em-dl-meta-fs, 12px) !important;
	font-weight: var(--em-dl-meta-fw, 400) !important;
	font-style: var(--em-dl-meta-fst, normal) !important;
	line-height: var(--em-dl-meta-lh, 1.4) !important;
	letter-spacing: var(--em-dl-meta-ls, 0) !important;
	text-transform: var(--em-dl-meta-tt, none) !important;
	color: var(--em-dl-meta-color, #627262) !important;
	margin: 0 !important;
}

/* =================================================================
 * Actions (v0.26+ : deux boutons "Voir" + "Télécharger")
 * ================================================================= */
.em-dl .em-dl-doc-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}
.em-dl--btns-stack .em-dl-doc-actions {
	flex-direction: column;
	align-items: stretch;
}

/* Communes aux deux boutons */
.em-dl .em-dl-doc-view,
.em-dl .em-dl-doc-dl,
.em-dl a.em-dl-doc-view,
.em-dl a.em-dl-doc-dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	box-sizing: border-box;
}

/* Bouton "Voir" (secondary style) */
.em-dl .em-dl-doc-view,
.em-dl a.em-dl-doc-view {
	background: var(--em-dl-vbtn-bg, transparent) !important;
	color: var(--em-dl-vbtn-color, #1c4a1d) !important;
	border: 1px solid var(--em-dl-vbtn-bd, rgba(28,74,29,0.35)) !important;
	border-radius: var(--em-dl-vbtn-radius, 8px) !important;
	padding: var(--em-dl-vbtn-py, 8px) var(--em-dl-vbtn-px, 12px) !important;
	font-size: var(--em-dl-vbtn-fs, 13px) !important;
	font-weight: var(--em-dl-vbtn-fw, 600) !important;
}
.em-dl .em-dl-doc-view:hover,
.em-dl a.em-dl-doc-view:hover {
	background: var(--em-dl-vbtn-hbg, rgba(17,128,47,0.08)) !important;
	color: var(--em-dl-vbtn-hcolor, #11802f) !important;
}

/* Bouton "Télécharger" (primary style) */
.em-dl .em-dl-doc-dl,
.em-dl a.em-dl-doc-dl {
	background: var(--em-dl-dbtn-bg, #11802f) !important;
	color: var(--em-dl-dbtn-color, #ffffff) !important;
	border: 1px solid var(--em-dl-dbtn-bd, #11802f) !important;
	border-radius: var(--em-dl-dbtn-radius, 8px) !important;
	padding: var(--em-dl-dbtn-py, 8px) var(--em-dl-dbtn-px, 12px) !important;
	font-size: var(--em-dl-dbtn-fs, 13px) !important;
	font-weight: var(--em-dl-dbtn-fw, 600) !important;
}
.em-dl .em-dl-doc-dl:hover,
.em-dl a.em-dl-doc-dl:hover {
	background: var(--em-dl-dbtn-hbg, #0f7228) !important;
	color: var(--em-dl-dbtn-hcolor, #ffffff) !important;
}

/* Icônes SVG dans les boutons — héritent de currentColor
 * IMPORTANT : overflow visible + dimensions min + width/height 16px pour empêcher
 * le stroke-width 2.2 des SVG feather de déborder du viewBox et être clippé
 * par un parent avec overflow: hidden implicite (bug SVG natif). */
.em-dl.em-dl .em-dl-btn-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	line-height: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}
.em-dl.em-dl .em-dl-btn-icon svg,
.em-dl.em-dl .em-dl-btn-icon img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	display: block !important;
	fill: none;
	stroke: currentColor;
	overflow: visible !important;
}

/* =================================================================
 * Empty state
 * ================================================================= */
.em-dl-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--em-dl-meta-color, #627262);
	background: #f6f7f5;
	border-radius: 12px;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-dl-list { grid-template-columns: repeat(var(--em-dl-cols-t, 1), minmax(0, 1fr)); }
	.em-dl .em-dl-title,
	.em-dl h1.em-dl-title, .em-dl h2.em-dl-title, .em-dl h3.em-dl-title,
	.em-dl h4.em-dl-title, .em-dl h5.em-dl-title, .em-dl h6.em-dl-title {
		font-size: var(--em-dl-title-fs-t, 28px) !important;
	}
}

@media (max-width: 600px) {
	.em-dl .em-dl-title,
	.em-dl h1.em-dl-title, .em-dl h2.em-dl-title, .em-dl h3.em-dl-title,
	.em-dl h4.em-dl-title, .em-dl h5.em-dl-title, .em-dl h6.em-dl-title {
		font-size: var(--em-dl-title-fs-m, 24px) !important;
	}
	.em-dl .em-dl-lead, .em-dl p.em-dl-lead { font-size: var(--em-dl-lead-fs-m, 14px) !important; }
	.em-dl .em-dl-doc-name { font-size: var(--em-dl-name-fs-m, 14px) !important; }
	.em-dl .em-dl-doc-meta { font-size: var(--em-dl-meta-fs-m, 11px) !important; }

	/* Mobile — carte doc : passe en colonne, boutons pleine largeur */
	.em-dl .em-dl-doc {
		flex-wrap: wrap;
	}
	.em-dl .em-dl-doc-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 6px;
	}
	.em-dl .em-dl-doc-view,
	.em-dl .em-dl-doc-dl,
	.em-dl a.em-dl-doc-view,
	.em-dl a.em-dl-doc-dl {
		width: 100%;
	}
}

/* =================================================================
 * Editor tweaks
 * ================================================================= */
.editor-styles-wrapper .em-dl { max-width: 100%; }