/* ===== Titres de section ===== */
html { scroll-behavior: smooth; }
.bloc-titre-section {
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0a3f94 !important;
	padding-left: .8rem;
	border-left: 5px solid #1b7fd0;
	line-height: 1.25;
	scroll-margin-top: 90px; /* ne passe pas sous le menu fixe quand on arrive par un lien du sommaire */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Sommaire ===== */
.csm-sommaire {
	background: #eef3fb;
	border-radius: 14px;
	padding: 1.1rem 1.4rem 1.2rem;
	margin: 0 0 2rem;
}
.csm-sommaire-titre {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #0a3f94;
	margin-bottom: .7rem;
}
.csm-sommaire ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.csm-sommaire li { margin: 0; }
.csm-sommaire a {
	display: inline-block;
	padding: .4rem .95rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #d5e1f3;
	color: #0a3f94;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.csm-sommaire a:hover,
.csm-sommaire a:focus-visible {
	background: #1a6bc2;
	border-color: #1a6bc2;
	color: #fff;
}

/* ===== Texte libre : lecture plus confortable ===== */
.bloc-texte { line-height: 1.7; }
.bloc-texte p { margin-bottom: 1rem; }
.bloc-texte ul, .bloc-texte ol { margin-bottom: 1.1rem; }
.bloc-texte li { margin-bottom: .45rem; }
.bloc-texte img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.bloc-texte table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.bloc-texte th, .bloc-texte td { padding: .6rem .8rem; border: 1px solid #e1e7f0; }
.bloc-texte th { background: #eef3fb; color: #0a3f94; }
.bloc-texte blockquote {
	margin: 1.2rem 0;
	padding: 1rem 1.3rem;
	background: #eef3fb;
	border-left: 5px solid #1b7fd0;
	border-radius: 0 12px 12px 0;
}
.bloc-texte blockquote p:last-child { margin-bottom: 0; }

/* ===== Bouton retour en haut ===== */
.csm-haut {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 50;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #1a6bc2;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(10, 63, 148, .3);
	transition: transform .15s ease, background-color .15s ease;
}
.csm-haut[hidden] { display: none; }
.csm-haut:hover { background: #0a3f94; color: #fff; transform: translateY(-2px); }

/* ===== Grille de cartes ===== */
.bloc-carte-lien {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 90px;
	padding: 1rem;
	border: 1px solid #cfd4da;
	border-radius: 0.375rem;
	background: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: box-shadow 0.15s ease-in-out;
}
.bloc-carte-lien:hover {
	box-shadow: 0 0 0 2px #0d6efd;
}
.bloc-carte-lien img {
	max-width: 75%;
	max-height: 90px;
	width: auto;
	height: auto;
	margin-bottom: 0.5rem;
}

.card.bloc-carte-gris {
	background-color: #f1f2f4 !important;
}
.card.bloc-carte-couleur {
	background-color: #7b86c9 !important;
	color: #fff;
}
.card.bloc-carte-couleur a {
	color: #fff;
	text-decoration: underline;
}

/* Image des blocs partagés (réutilisés depuis les espaces métier) */
.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;
}

/* Logo simple cliquable, sans bordure (ex: Kit Médical, OmniPrat, WhyDoc) */
.bloc-logo-lien {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	padding: 0.75rem 1rem;
	opacity: 0.9;
	transition: opacity 0.15s ease-in-out;
}
.bloc-logo-lien:hover {
	opacity: 1;
}
.bloc-logo-lien img {
	max-height: 48px;
	width: auto;
}
.bloc-logo-lien span {
	font-size: 0.85rem;
	color: inherit;
}

/* Carrousel */
.carousel-item img {
	border-radius: 0.375rem;
	max-height: 420px;
	object-fit: cover;
}
.carousel-caption {
	background: rgba(0, 0, 0, 0.45);
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
}

/* Filet de sécurité : si une image est insérée directement dans un texte wysiwyg
   (plutôt que via le champ Image dédié), on l'empêche de déborder ou de forcer
   un alignement flottant qui casse la mise en page de la carte. */
.card-body img,
.mb-4 img {
	max-width: 100%;
	height: auto;
	float: none !important;
	display: block;
	margin: 0 auto 0.75rem auto;
}

/* Image cliquable ouvrant une pop-up (ex: nuages "Accès aux soins"...) — plus grande qu'un simple logo. */
.bloc-popup-lien {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* laisse l'image (et le texte) s'étirer sur toute la largeur disponible */
	text-align: center;
	gap: 0.5rem;
	text-decoration: none;
	padding: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease-in-out;
}
.bloc-popup-lien:hover {
	transform: scale(1.04);
}
.bloc-popup-lien img {
	width: 100%;
	height: auto;
}
.bloc-popup-lien span {
	font-size: 0.85rem;
	font-weight: 600;
	color: inherit;
}

/* ===== Bandeau fin (alternative légère au carrousel) — version moderne ===== */
.csm-bandeau-fin {
	position: relative;
	overflow: hidden;
	margin-bottom: 2rem;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10);
}
.csm-bandeau-contenu {
	position: relative; /* limite .stretched-link à cette bande */
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 68px;
	padding: 0.8rem 1.5rem 1.1rem;
}
.csm-bandeau-puce {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.csm-bandeau-icone {
	max-width: 24px;
	max-height: 24px;
	width: auto;
	height: auto;
}
.csm-bandeau-texte {
	flex: 1 1 auto;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.csm-bandeau-lien {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.csm-bandeau-contenu:hover .csm-bandeau-lien {
	transform: translateX(3px);
}

/* Variantes de couleur */
.csm-bandeau-accent {
	background: linear-gradient(105deg, #0a3f94 0%, #1b7fd0 100%); /* bleus du logo Clic Santé / Assurance Maladie */
	color: #fff;
}
.csm-bandeau-accent .csm-bandeau-lien { background: #fff; color: #0a3f94; }

.csm-bandeau-neutre {
	background: #f6f8fb;
	color: #1b2430;
	border: 1px solid #e4e8f0;
	box-shadow: none;
}
.csm-bandeau-neutre .csm-bandeau-lien { background: #0d6efd; color: #fff; }

.csm-bandeau-fonce {
	background: linear-gradient(105deg, #141c28 0%, #2a3a52 100%);
	color: #fff;
}
.csm-bandeau-fonce .csm-bandeau-lien { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Points de navigation */
.csm-bandeau-points {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 3;
}
.csm-bandeau-points button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	cursor: pointer;
	transition: opacity 0.2s ease, width 0.2s ease;
}
.csm-bandeau-points button.active {
	opacity: 0.95;
	width: 20px;
	border-radius: 4px;
}

@media (max-width: 576px) {
	.csm-bandeau-contenu {
		flex-wrap: wrap;
		gap: 0.6rem 0.8rem;
		padding: 0.9rem 1rem 1.3rem;
	}
	.csm-bandeau-texte {
		font-size: 0.95rem;
		flex-basis: calc(100% - 60px);
	}
}

/* ===== Colonnes en cartes (retrouve l'esprit de l'ancien site) ===== */
.csm-col-carte {
	background: #f7f9fd;
	border: 1px solid #e6ebf3;
	border-radius: 16px;
	padding: 1.6rem 1.7rem;
	box-shadow: 0 2px 12px rgba(16, 24, 40, .05);
}
/* Dans une carte, le titre est centré et sobre (plus de barre à gauche) */
.csm-col-carte .bloc-titre-section {
	margin: 0 0 1.1rem;
	padding-left: 0;
	border-left: 0;
	text-align: center;
	font-size: 1.4rem;
}
.csm-col-carte .bloc-titre-section::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: .55rem auto 0;
	border-radius: 3px;
	background: #1b7fd0;
}
.csm-col-carte > :last-child { margin-bottom: 0; }

/* ===== Trois colonnes (ex: étapes 1-2-3) : titres plus légers ===== */
.csm-trois-col .bloc-titre-section {
	margin-top: 0;
	font-size: 1.15rem;
	border-left-width: 4px;
}

/* ===== Sommaire en colonne fixe à gauche =====
   Le conteneur de la page devient une grille à 2 colonnes dès qu'il contient un
   sommaire latéral : sommaire à gauche (qui suit le défilement), tout le reste
   (titre, blocs) en une colonne à droite. Aucune modification du gabarit. */
@media (min-width: 992px) {
	:has(> .csm-sommaire-lateral) {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		column-gap: 3rem;
		row-gap: 0;
		align-items: start;
	}
	:has(> .csm-sommaire-lateral) > * {
		grid-column: 2;
		min-width: 0;
	}
	:has(> .csm-sommaire-lateral) > .csm-sommaire-lateral {
		grid-column: 1;
		grid-row: 1 / span 80;
		position: sticky;
		top: 90px;
		align-self: start;
	}
}
.csm-sommaire-lateral {
	background: #fff;
	border: 1px solid #e6ebf3;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(16, 24, 40, .06);
	padding: 1.3rem 1.2rem 1.2rem 1.4rem;
	margin-bottom: 2rem;
}
.csm-sommaire-lateral ul {
	display: block;
	border-left: 2px solid #e6ebf3;
	margin-top: .3rem;
}
.csm-sommaire-lateral li { margin: 0; }
.csm-sommaire-lateral a {
	display: block;
	margin-left: -2px;
	padding: .42rem .9rem;
	border: 0;
	border-left: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: #5b6676;
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.35;
}
.csm-sommaire-lateral a:hover,
.csm-sommaire-lateral a:focus-visible {
	background: transparent;
	border-color: #1b7fd0;
	color: #0a3f94;
}
.csm-sommaire-lateral a.is-active {
	border-left-color: #1a6bc2;
	color: #0a3f94;
	font-weight: 700;
}
/* Mobile : le sommaire repasse en haut, sans suivre le défilement */
@media (max-width: 991.98px) {
	.csm-sommaire-lateral { position: static; }
}

/* Page avec sommaire latéral : les « Deux colonnes » s'empilent en une seule colonne,
   sections séparées par un filet (comme la proposition du designer). */
@media (min-width: 992px) {
	:has(> .csm-sommaire-lateral) .csm-deux-col > [class*="col-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	:has(> .csm-sommaire-lateral) .csm-deux-col { --bs-gutter-y: 0; margin-bottom: 0 !important; }
	:has(> .csm-sommaire-lateral) .csm-col-carte {
		background: transparent;
		border: 0;
		border-top: 1px solid #e6ebf3;
		border-radius: 0;
		box-shadow: none;
		padding: 2rem 0 1.2rem;
	}
	:has(> .csm-sommaire-lateral) .csm-col-carte .bloc-titre-section {
		text-align: left;
		font-size: 1.6rem;
	}
	:has(> .csm-sommaire-lateral) .csm-col-carte .bloc-titre-section::after { margin-left: 0; }
}

/* ===== Trois colonnes en cartes (étapes 1-2-3) ===== */
.csm-etape {
	background: #f4f7fc;
	border-radius: 14px;
	padding: 1.3rem 1.4rem 1.2rem;
}
.csm-etape .bloc-titre-section {
	margin: 0 0 .6rem;
	padding-left: 0;
	border-left: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: #1b2430 !important;
	line-height: 1.3;
}
.csm-etape .bloc-texte {
	margin-bottom: 0 !important;
	font-size: .9rem;
	line-height: 1.6;
	color: #5b6676;
}
.csm-etape .bloc-texte p { margin-bottom: .6rem; }
.csm-etape .bloc-texte p:last-child { margin-bottom: 0; }
.csm-etape .bloc-texte a { color: #1a6bc2; font-weight: 600; }

/* ===== Titre de page « façon espace métier » ===== */
.csm-titre-page {
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(1.8rem, 3vw, 2.3rem);
}
.csm-titre-page .text-primary { color: #1a6bc2 !important; }
.csm-intro-page { max-width: 760px; line-height: 1.6; }

/* =====================================================================
   BLOCS PARTAGÉS DANS UNE PAGE (ex: retours ARL / NOEMIE de Télétransmission)
   Lecture confortable : texte à gauche, encarts clairs avec liseré, plus de
   gros pavés gris/violet avec texte centré. (Les encarts des pages d'espaces
   métier ne sont pas touchés.)
   ===================================================================== */
.csm-bloc-partage .card.bloc-carte-gris,
.csm-bloc-partage .card.bloc-carte-couleur {
	background: #f1f5fc !important;
	color: #1b2430;
	border-radius: 12px !important;
	border-left: 5px solid #1b7fd0 !important;
	box-shadow: none;
}
.csm-bloc-partage .card.bloc-carte-couleur {
	background: #eef0fb !important;
	border-left-color: #6f7fd0 !important;
}
.csm-bloc-partage .card-body {
	text-align: left !important;
	padding: 1.3rem 1.6rem;
	font-size: .95rem;
	line-height: 1.65;
}
.csm-bloc-partage .card-body p { margin-bottom: .8rem; }
.csm-bloc-partage .card-body p:last-child { margin-bottom: 0; }
.csm-bloc-partage .card-body ul,
.csm-bloc-partage .card-body ol {
	text-align: left;
	padding-left: 1.3rem;
	margin-bottom: .8rem;
}
.csm-bloc-partage .card-body li { margin-bottom: .5rem; }
.csm-bloc-partage .card.bloc-carte-couleur a,
.csm-bloc-partage .card.bloc-carte-gris a { color: #1a6bc2; text-decoration: underline; }
/* Contenu collé depuis un autre site (fonds violets / textes blancs en ligne) : on l'harmonise */
.csm-bloc-partage .card-body [style*="text-align"] { text-align: left !important; }
/* Un fond collé en ligne (violet...) est retiré : la carte s'en charge déjà */
.csm-bloc-partage .card-body [style*="background"] {
	background: transparent !important;
	color: #1b2430 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}
/* Le thème met un trait + un retrait sur les <blockquote> : ils doublaient le liseré de la carte */
.csm-bloc-partage .card-body blockquote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: inherit !important;
	font-style: normal;
	quotes: none;
}
.csm-bloc-partage .card-body blockquote::before,
.csm-bloc-partage .card-body blockquote::after { content: none !important; }
.csm-bloc-partage .card-body [style*="background"] * { color: #1b2430 !important; }
.csm-bloc-partage .card-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* ===== Encarts « Information / À noter / Attention » (blocs partagés dans les pages) ===== */
.csm-encart {
	--enc-fond: #f1f5fc;
	--enc-accent: #1b7fd0;
	--enc-texte-titre: #0a3f94;
	background: var(--enc-fond);
	border-radius: 14px !important;
	box-shadow: none;
	overflow: hidden;
}
.csm-encart-note {
	--enc-fond: #f1f0fb;
	--enc-accent: #6f6fd0;
	--enc-texte-titre: #3d3da0;
}
.csm-encart-attention {
	--enc-fond: #fff6e8;
	--enc-accent: #e07b00;
	--enc-texte-titre: #a65700;
}
.csm-encart .card-body { padding: 1.2rem 1.5rem 1.3rem; }
.csm-encart-entete {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: .7rem;
}
.csm-encart-entete:has(.csm-encart-titre:empty),
.csm-encart-entete:not(:has(.csm-encart-titre)) { margin-bottom: .2rem; }
.csm-encart-puce {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--enc-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.csm-encart-puce svg { display: block; }
.csm-encart-titre {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--enc-texte-titre);
	line-height: 1.3;
}
.csm-encart-texte {
	font-size: .95rem;
	line-height: 1.65;
	padding-left: calc(32px + .65rem); /* aligné sous le titre, à droite de la pastille */
}
@media (max-width: 575.98px) {
	.csm-encart-texte { padding-left: 0; }
}
.csm-encart-texte ul, .csm-encart-texte ol { padding-left: 1.2rem; }
.csm-encart-texte > :last-child { margin-bottom: 0 !important; }

/* ===== Bloc Vidéo ===== */
.csm-video { margin: 0 0 2rem; }
.csm-video-moyenne { max-width: 800px; margin-left: auto; margin-right: auto; }
.csm-video-titre {
	font-weight: 800;
	font-size: 1.1rem;
	color: #0a3f94;
	margin-bottom: .7rem;
}
.csm-video-cadre {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0b2145;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
.csm-video-cadre iframe,
.csm-video-cadre video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.csm-video-lien { display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; font-weight: 700; }
.csm-video-legende {
	margin-top: .6rem;
	font-size: .88rem;
	color: #5b6676;
}
.csm-video-transcription {
	margin-top: .8rem;
	background: #f1f5fc;
	border-radius: 12px;
	padding: .8rem 1.1rem;
	font-size: .92rem;
	line-height: 1.6;
}
.csm-video-transcription summary {
	cursor: pointer;
	font-weight: 700;
	color: #0a3f94;
}
.csm-video-transcription > div { margin-top: .7rem; }