/********************************************
APPLICATIONS SECTION (page applications.php
et vignette sur la page d'accueil)
*********************************************/

.apps-hero h1,
.apps-transition h2 {
	font: bold 20px Arial, Helvetica, sans-serif;
	color: #1C4574;
	margin: 0 0 10px 0;
}

.apps-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 20px;
}

.app-card {
	flex: 1 1 280px;
	box-sizing: border-box;
	padding: 15px;
	background-color: #F8F8F8;
	border: 1px solid #eee;
	border-radius: 4px;
}

.app-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.app-card-name {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #1B1A22;
	margin: 0;
}

.app-badge {
	display: inline-block;
	font: bold 11px Arial, Helvetica, sans-serif;
	padding: 3px 8px;
	border-radius: 3px;
	white-space: nowrap;
}

.app-badge--available {
	background-color: #DAEAFB;
	color: #1C4574;
	border: 1px solid #C8DCF0;
}

.app-badge--in_development {
	background-color: #EFEFEF;
	color: #605F5F;
	border: 1px solid #DDDDDD;
}

.app-card-desc {
	font-weight: bold;
	margin: 0 0 6px 0;
}

.app-card-full {
	color: #727272;
	margin: 0 0 12px 0;
	line-height: 18px;
}

.app-cta {
	display: inline-block;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding: 8px 14px;
	border-radius: 3px;
	text-decoration: none;
}

.app-cta--enabled {
	background-color: #1C4574;
	color: #fff;
}

.app-cta--enabled:hover {
	background-color: #2A5A94;
}

.app-cta--disabled {
	background-color: transparent;
	color: #9A9A9A;
	border: 1px solid #DDDDDD;
	cursor: default;
}

/* ---------- Vignette page d'accueil ---------- */

.apps-teaser {
	padding: 15px;
	margin-bottom: 20px;
	background-color: #F8F8F8;
	border: 1px solid #eee;
	border-radius: 8px;
}

.apps-teaser h2 {
	font: bold 20px Arial, Helvetica, sans-serif;
	color: #1C4574;
	margin: 0 0 6px 0;
}

.apps-teaser-intro {
	margin: 0 0 15px 0;
}

.apps-teaser-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 15px;
}

.apps-mini-card {
	flex: 1 1 170px;
	box-sizing: border-box;
	padding: 12px;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
}

.apps-mini-card h3 {
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #1B1A22;
	margin: 0 0 4px 0;
}

.apps-mini-card p {
	color: #727272;
	font-size: 11px;
	line-height: 16px;
	margin: 0 0 8px 0;
}

.apps-teaser-cta {
	display: inline-block;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding: 8px 14px;
	border-radius: 3px;
	background-color: #1C4574;
	color: #fff;
	text-decoration: none;
}

.apps-teaser-cta:hover {
	background-color: #2A5A94;
}

@media (max-width: 700px) {
	.app-card,
	.apps-mini-card {
		flex: 1 1 100%;
	}
}