/* ===== Boutons de la grille (espace métier) ===== */
.btn-outline-primary {
	min-height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ===== Cartes de la colonne latérale =====
   Note : on écrit ".card.bloc-carte-gris" (deux classes combinées) plutôt que
   ".bloc-carte-gris" seule. Ça augmente la spécificité CSS pour être sûr de
   gagner face aux règles ".card" de Bootstrap, quel que soit l'ordre de
   chargement des feuilles de style. */

.bloc-carte-image-wrap {
	display: flex;
	justify-content: center;
	padding-top: 1.5rem;
}
.bloc-carte-image-wrap img {
	max-width: 140px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Bloc gris neutre (ex: anomalie de paiement) */
.card.bloc-carte-gris {
	background-color: #f1f2f4 !important;
}

/* Encart coloré (ex: Mémo Grippe) */
.card.bloc-carte-couleur {
	background-color: #7b86c9 !important;
	color: #fff;
}
.card.bloc-carte-couleur a {
	color: #fff;
	text-decoration: underline;
}

/* Logo simple cliquable, sans bordure (section "outils / logos" en bas de page) */
.bloc-logo-lien {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	opacity: 0.9;
	transition: opacity 0.15s ease-in-out;
}
.bloc-logo-lien:hover {
	opacity: 1;
}
.bloc-logo-lien img {
	max-height: 44px;
	width: auto;
}
.bloc-logo-lien span {
	font-size: 0.8rem;
	color: inherit;
}


/* =====================================================================
   HABILLAGE MODERNE DES ESPACES MÉTIER
   Pour revenir à l'ancien rendu, supprimer tout ce qui suit ce bandeau.
   ===================================================================== */

/* --- Images des encarts : petites par défaut ---
   Pour les masquer complètement, ajouter dans CSS additionnel :
   .bloc-carte-image-wrap { display: none; }                             */
.bloc-carte-image-wrap { padding-top: 1.1rem; }
.bloc-carte-image-wrap img {
	max-width: 64px;
	max-height: 64px;
	border-radius: 12px;
}

/* --- Titre de la page --- */
.single-espace_metier h1 {
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(1.8rem, 3vw, 2.3rem);
}
.single-espace_metier h1 .text-primary { color: #1a6bc2 !important; }

/* --- Boutons de services : cartes blanches, bordure bleue, relief au survol --- */
.single-espace_metier .btn-outline-primary {
	min-height: 64px;
	border: 1.5px solid #1a6bc2;
	border-radius: 12px;
	background: #fff;
	color: #1a6bc2;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.single-espace_metier .btn-outline-primary:hover,
.single-espace_metier .btn-outline-primary:focus-visible {
	background: #1a6bc2;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(26, 107, 194, .25);
}
.single-espace_metier .btn-outline-primary img { max-height: 26px; }

/* --- Encarts d'information --- */
.card.bloc-carte-gris,
.card.bloc-carte-couleur {
	border-radius: 14px !important;
	box-shadow: none;
}
.card.bloc-carte-gris {
	background-color: #eef3fb !important;
	color: #1b2430;
}
.card.bloc-carte-couleur {
	background: linear-gradient(135deg, #6f7fd0, #8a95dc) !important;
	color: #fff;
}
.card.bloc-carte-gris .card-body,
.card.bloc-carte-couleur .card-body {
	padding: 1.2rem 1.3rem;
	font-size: .93rem;
	line-height: 1.55;
}
.card.bloc-carte-gris a { color: #0a3f94; font-weight: 600; }

/* --- Section actualités du bas --- */
.single-espace_metier main h2.h5 {
	font-weight: 800;
	letter-spacing: .02em;
	color: #0a3f94 !important;
}

/* --- Bouton « Consulter » des encarts (champs "Bouton" du bloc partagé) --- */
.card.bloc-carte-couleur .btn,
.card.bloc-carte-gris .btn {
	border: 0;
	border-radius: 999px;
	padding: .5rem 1.3rem;
	font-weight: 700;
	font-size: .85rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
	transition: transform .15s ease, box-shadow .15s ease;
}
.card.bloc-carte-couleur .btn { background: #fff; color: #4a58b0; }
.card.bloc-carte-gris .btn { background: #1a6bc2; color: #fff; }
.card.bloc-carte-couleur .btn:hover,
.card.bloc-carte-gris .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(16, 24, 40, .18); }
.card.bloc-carte-couleur a.btn { text-decoration: none; }

/* --- Section « Outils » : logos plus grands, présentés en cartes --- */
.bloc-logo-lien {
	background: #fff;
	border: 1px solid #e6ebf3;
	border-radius: 14px;
	padding: 1rem 1.6rem;
	min-width: 190px;
	min-height: 84px;
	justify-content: center;
	opacity: 1;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bloc-logo-lien:hover {
	transform: translateY(-2px);
	border-color: #1a6bc2;
	box-shadow: 0 8px 18px rgba(26, 107, 194, .18);
}
.bloc-logo-lien img {
	max-height: 64px;
	max-width: 190px;
}