/* ==========================================================================
   Page Anwendungen (page-anwendungen.php) : liste sobre et compacte
   Même structure que l'Espace applications de megaique.net.
   ========================================================================== */
.mq-apps__hero {
	background: var(--mq-color-bg-soft);
	border-bottom: 1px solid var(--mq-color-line);
	padding-block: var(--mq-space-6);
}

.mq-apps__title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.12;
	color: var(--mq-color-ink);
	margin: 0 0 var(--mq-space-2);
}

.mq-apps__lead { font-size: 1.05rem; line-height: 1.6; color: var(--mq-color-muted); margin: 0; max-width: 640px; }

.mq-apps-page .mq-section { padding-block: clamp(2rem, 4vw, 3rem); }

.mq-apps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 1rem;
}

.mq-app {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	min-height: 44px;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--mq-color-line);
	border-radius: var(--mq-radius);
	color: var(--mq-color-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mq-app:hover,
.mq-app:focus-visible { border-color: var(--mq-color-primary); box-shadow: var(--mq-shadow); color: var(--mq-color-ink); }
.mq-app:focus-visible { outline: 2px solid var(--mq-color-primary); outline-offset: 2px; }

.mq-app__ico {
	flex: none;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #fff1e8;
	color: var(--mq-color-primary-dark);
	overflow: hidden;
}

.mq-app__ico svg { width: 22px; height: 22px; }
.mq-app__ico img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.mq-app.is-internal .mq-app__ico { background: var(--mq-color-bg-soft); color: var(--mq-color-secondary); }

.mq-app__body { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.mq-app__name { font-family: var(--mq-font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.mq-app__desc { color: var(--mq-color-body); font-size: 0.9rem; line-height: 1.45; }
.mq-app__host { color: var(--mq-color-secondary); font-size: 0.82rem; overflow-wrap: anywhere; }

.mq-app__go { flex: none; width: 18px; height: 18px; color: var(--mq-color-muted); margin-top: 0.15rem; transition: color 0.15s ease, transform 0.15s ease; }
.mq-app:hover .mq-app__go { color: var(--mq-color-primary); transform: translate(2px, -2px); }

.mq-apps__group { font-family: var(--mq-font-head); font-size: 1.05rem; font-weight: 700; color: var(--mq-color-ink); margin: 2.2rem 0 0.9rem; }
.mq-container > .mq-apps__group:first-child { margin-top: 0; }
.mq-apps__group span { font-weight: 400; color: var(--mq-color-muted); font-size: 0.88rem; margin-left: 0.4rem; }

.mq-apps__note { margin: 1.8rem 0 0; color: var(--mq-color-muted); font-size: 0.88rem; line-height: 1.5; max-width: 760px; }

@media (max-width: 640px) {
	.mq-apps__group span { display: block; margin: 0.2rem 0 0; }
}