/* ==========================================================================
   Variables du module — préfixées "lmp" (La Martillacaise · Partenaires)
   pour ne jamais entrer en collision avec les variables du thème.

   Chaque couleur retombe par défaut sur la palette Kubio du site via
   var(--kubio-color-N, fallback). Si le module est utilisé sur un site
   sans Kubio, les valeurs de fallback s'appliquent telles quelles.

   Important : Kubio expose ses variables comme de simples triplets RGB
   ("8, 149, 130", sans fonction couleur autour), destinés à être
   consommés via rgba(var(--kubio-color-N), alpha). Comme la variable
   existe bel et bien, écrire var(--kubio-color-N, #hex) ne déclenche
   jamais notre fallback hex : il faut donc envelopper dans rgb() pour
   obtenir une couleur valide dans tous les cas (avec ou sans Kubio).
   Aucune variable de police : les titres/textes héritent du thème.
   ========================================================================== */
.lmp {
	--lmp-primary:   rgb(var(--kubio-color-1, 8, 149, 130));   /* teal — accent interactif principal */
	--lmp-secondary: rgb(var(--kubio-color-2, 134, 4, 40));    /* bordeaux profond */
	--lmp-accent:    rgb(var(--kubio-color-3, 227, 57, 42));   /* rouge — touches ponctuelles */
	--lmp-muted:     rgb(var(--kubio-color-4, 107, 167, 159)); /* teal doux */
	--lmp-surface:   rgb(var(--kubio-color-5, 255, 255, 255));
	--lmp-ink:       rgb(var(--kubio-color-6, 11, 19, 43));    /* bleu nuit — texte, fonds sombres */

	/* teintes dérivées, calculées à partir des couleurs ci-dessus :
	   s'adaptent automatiquement si les variables Kubio sont reconfigurées. */
	--lmp-bg-tint:   color-mix(in srgb, var(--lmp-ink) 4%, var(--lmp-surface));
	--lmp-line:      color-mix(in srgb, var(--lmp-ink) 14%, transparent);
	--lmp-text-soft: color-mix(in srgb, var(--lmp-ink) 60%, var(--lmp-surface));
	--lmp-shadow:    0 10px 26px color-mix(in srgb, var(--lmp-ink) 12%, transparent);
	--lmp-shadow-lg: 0 26px 60px color-mix(in srgb, var(--lmp-ink) 32%, transparent);
	--lmp-radius:    16px;
}

.lmp { color: var(--lmp-ink); }
.lmp * { box-sizing: border-box; }
.lmp a { color: inherit; }
.lmp button { font-family: inherit; }

/* ---------- Search ---------- */
.lmp .search-wrap { position: relative; max-width: 440px; }
.lmp .search-wrap svg {
	position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--lmp-text-soft);
}
.lmp #lmp-search {
	width: 100%; padding: .85rem 1rem .85rem 2.7rem; border-radius: 100px;
	border: 1.5px solid var(--lmp-line); background: var(--lmp-surface);
	font-size: .96rem; font-family: inherit; color: var(--lmp-ink); outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lmp #lmp-search::placeholder { color: var(--lmp-text-soft); }
.lmp #lmp-search:focus-visible {
	border-color: var(--lmp-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmp-primary) 20%, transparent);
}

/* ---------- Filter pills ---------- */
.lmp .filters { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1.9rem 0 .4rem; }
.lmp .pill {
	display: flex; align-items: center; gap: .45em;
	padding: .5em 1em; border-radius: 100px; border: 1.5px solid var(--lmp-line);
	background: var(--lmp-surface); color: var(--lmp-ink); cursor: pointer;
	font-size: .85rem; font-weight: 500; white-space: nowrap; font-family: inherit;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.lmp .pill:hover {
	transform: translateY(-1px); border-color: var(--lmp-primary);
	background: var(--lmp-surface); color: var(--lmp-ink); /* le thème force une couleur de survol sur tout <button> : on la reprend ici */
}
.lmp .pill .count {
	font-size: .72rem; font-weight: 600;
	color: var(--lmp-text-soft); background: var(--lmp-bg-tint);
	padding: .1em .5em; border-radius: 100px;
}
.lmp .pill[aria-pressed="true"] { background: var(--lmp-primary); border-color: var(--lmp-primary); color: #fff; }
.lmp .pill[aria-pressed="true"] .count { background: rgba(255, 255, 255, .22); color: #fff; }

.lmp .results-count {
	font-size: .78rem; font-weight: 600; letter-spacing: .03em;
	color: var(--lmp-text-soft); margin: .6rem 0 2.2rem; text-transform: uppercase;
}

/* ---------- Category sections ---------- */
.lmp .category-block { margin-bottom: 3rem; }
.lmp .category-block[hidden] { display: none; }
.lmp .category-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.4rem; }
.lmp .category-head h2 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.lmp .category-head .divider { flex: 1; height: 1px; background: var(--lmp-line); position: relative; }
.lmp .category-head .divider svg {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 22px; height: 22px; color: var(--lmp-primary); background: var(--lmp-surface); padding: 0 6px;
}
.lmp .partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }

.lmp .partner-card {
	background: var(--lmp-surface); border: 1.5px solid var(--lmp-line); border-radius: var(--lmp-radius);
	padding: 1.3rem 1.1rem 1.1rem; display: flex; flex-direction: column; align-items: center;
	gap: .7rem; text-align: center; cursor: pointer; width: 100%; font-family: inherit;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lmp .partner-card[hidden] { display: none; }
.lmp .partner-card:hover, .lmp .partner-card:focus-visible {
	transform: translateY(-3px); box-shadow: var(--lmp-shadow); border-color: transparent; outline: none;
	background: var(--lmp-surface); color: var(--lmp-ink); /* le thème force une couleur de survol sur tout <button> : on la reprend ici */
}
.lmp .partner-card:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmp-primary) 25%, transparent), var(--lmp-shadow);
}

.lmp .partner-logo {
	width: 100%; height: 96px; object-fit: contain; object-position: center;
}
.lmp .logo-badge {
	width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 1.1rem; color: #fff; flex-shrink: 0;
	background: var(--cat-color, var(--lmp-primary));
}
.lmp .partner-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: auto 0 0; }
/* .modal-body .tag ajouté ici : la modale vit hors du wrapper .lmp (voir
   AGENTS.md), donc un simple ".lmp .tag" ne matcherait jamais #lmp-modal-tag. */
.lmp .tag, .modal-body .tag {
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: .28em .7em; border-radius: 100px;
	color: var(--cat-color, var(--lmp-primary, #089582));
	background: color-mix(in srgb, var(--cat-color, var(--lmp-primary, #089582)) 14%, var(--lmp-surface, #fff));
}

/* ---------- Empty state ---------- */
.lmp .empty-state { text-align: center; padding: 4rem 1rem; color: var(--lmp-text-soft); }
.lmp .empty-state svg { width: 46px; height: 46px; color: var(--lmp-primary); margin-bottom: 1rem; }
.lmp .empty-state p { margin: .3rem 0 1.2rem; }
.lmp .reset-btn {
	font-size: .82rem; font-weight: 600; font-family: inherit;
	background: var(--lmp-primary); color: #fff; border: none; padding: .65em 1.3em; border-radius: 100px; cursor: pointer;
}
.lmp .reset-btn:hover { background: color-mix(in srgb, var(--lmp-primary) 85%, black); }

/* ---------- Modal ----------
   --lmp-topbar-offset : hauteur (ex. "104px") de tout bandeau fixe/sticky
   du site hôte qui flotterait au-dessus du contenu (topbar, bannière
   d'annonce…). Vaut 0px par défaut — le module ne peut pas la déduire
   lui-même. Si le site a un en-tête fixe/sticky qui recouvre le haut de
   la modale, définir cette variable (sur :root ou body, dans le CSS du
   thème/site) avec sa hauteur pour que la modale s'affiche en dessous. */
.modal-backdrop {
	position: fixed; inset: 0; background: color-mix(in srgb, var(--lmp-ink, #0B132B) 70%, transparent);
	backdrop-filter: blur(2px);
	display: flex; align-items: center; justify-content: center;
	padding: 1.2rem; padding-top: calc(var(--lmp-topbar-offset, 0px) + 1.2rem);
	/* au-dessus des bandeaux sticky des page builders (ex. Kubio : 9999) au cas où --lmp-topbar-offset ne serait pas défini */
	z-index: 10000;
}
.modal-backdrop[hidden] { display: none; }
.modal {
	background: var(--lmp-surface, #fff); width: min(680px, 100%);
	/* Overflow géré par .modal-body en desktop (colonne image fixe, seul le
	   texte scrolle) et remis sur .modal en mobile ci-dessous (une seule
	   colonne, tout scrolle ensemble) — voir AGENTS.md. */
	overflow: hidden;
	max-height: min(88vh, calc(100vh - var(--lmp-topbar-offset, 0px) - 2.4rem));
	border-radius: 20px; box-shadow: var(--lmp-shadow-lg);
	display: grid; grid-template-columns: 220px 1fr;
	animation: lmp-modal-in .18s ease;
	color: var(--lmp-ink, #0B132B);
}
@keyframes lmp-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-visual {
	background: linear-gradient(160deg, var(--lmp-ink, #0B132B), color-mix(in srgb, var(--lmp-primary, #089582) 55%, var(--lmp-ink, #0B132B)));
	display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
/* Vraie photo (ACF) : ni cercle ni cadre, prend toute la colonne (au lieu
   du badge 110px) pour agrandir l'image. Bascule via .has-photo posée par
   le JS sur #lmp-modal-logo (le wrapper garde la classe .logo-badge dans
   le HTML statique, donc on neutralise son style cercle ici plutôt que de
   dupliquer le markup). */
.modal-visual .logo-badge.has-photo { width: 100%; height: 100%; background: none; border: none; border-radius: 0; }
.modal-visual .modal-photo { width: 100%; height: auto; object-fit: contain; background-color: #fff; }
/* Badge à initiales de secours : on garde le cercle. Dupliqué hors .lmp
   pour la même raison que .modal-body .tag ci-dessus (modale hors .lmp). */
.modal-visual .logo-badge {
	width: 110px; height: 110px; font-size: 2rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff;
}

/* max-height direct (pas juste hérité du stretch de la grille) : une valeur
   en vh n'a pas besoin d'une hauteur "définie" sur l'ancêtre pour être
   respectée, contrairement à un simple `min-height: 0` sur l'item de
   grille combiné au `max-height` de .modal — cette dernière combinaison ne
   suffit pas à faire scroller .modal-body seul (testé : le débordement
   était silencieusement rogné par l'`overflow: hidden` de .modal, .modal-visual
   s'étirant alors sur la hauteur non contrainte du texte). */
.modal-body {
	padding: 2rem 2rem 2rem 1.8rem;
	overflow-y: auto;
	max-height: min(88vh, calc(100vh - var(--lmp-topbar-offset, 0px) - 2.4rem));
}
/* Sélecteur par ID : le style par défaut que Kubio applique à tout <button>
   (fond plein + border-radius 4px) a une spécificité CSS que .modal-close
   seul ne bat pas (égalité, départagée par ordre de source en faveur de
   Kubio) — voir AGENTS.md.
   Premier enfant de .modal-body (dans la zone claire de description,
   jamais sur la photo) plutôt qu'un overlay absolu sur .modal : en sticky,
   il reste visible pendant le scroll qu'il ait lieu sur .modal-body seul
   (desktop) ou sur .modal entier (mobile, une seule zone de scroll) — pas
   besoin de le repositionner par media query. */
#lmp-modal-close {
	position: sticky; top: 14px; display: flex; margin: -.5rem 0 .3rem auto;
	width: 34px; height: 34px; border-radius: 50%;
	border: none; background: var(--lmp-bg-tint); color: var(--lmp-ink); align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
}
#lmp-modal-close:hover { background: color-mix(in srgb, var(--lmp-ink, #0B132B) 12%, var(--lmp-surface, #fff)); color: var(--lmp-ink, #0B132B); }
.modal-body .tag { margin-bottom: .9rem; display: inline-block; }
.modal-body h2 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .7rem; }
.modal-body .desc { color: var(--lmp-text-soft); line-height: 1.6; margin: 0 0 1.4rem; }

.modal-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.modal-details li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.modal-details svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .15em; color: var(--lmp-primary); }
.modal-details a { text-decoration: none; color: var(--lmp-ink); }
.modal-details a:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.modal-backdrop { padding: 0; padding-top: var(--lmp-topbar-offset, 0px); align-items: flex-end; }
	.modal {
		grid-template-columns: 1fr; width: 100%;
		max-height: min(92vh, calc(100vh - var(--lmp-topbar-offset, 0px)));
		border-radius: 20px 20px 0 0; animation: lmp-modal-in-mobile .2s ease;
	}
	@keyframes lmp-modal-in-mobile { from { transform: translateY(100%); } to { transform: none; } }
	.modal { overflow-y: auto; } /* une colonne : tout le contenu scrolle ensemble, comme avant */
	/* annule le scroll indépendant de .modal-body (desktop) pour ne pas
	   avoir deux zones de scroll imbriquées sur mobile */
	.modal-body { max-height: none; overflow-y: visible; }
	.modal-visual { padding: 1.4rem; }
	.modal-visual .logo-badge { width: 76px; height: 76px; font-size: 1.3rem; }
	/* En desktop, la colonne image (220px) borne déjà la photo. En mobile,
	   .modal-visual passe en pleine largeur : sans cap, une petite photo se
	   retrouverait affichée bien plus grande que sa taille réelle. */
	.modal-visual .modal-photo { width: auto; max-width: 50%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.lmp *, .modal { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}