:root {
	--sio2-bleu: #0a53ec;
}

/* Litera affiche les paragraphes <p> dans une police à empattements (Georgia) et le
   reste (titres, listes...) en sans-serif : rendu incohérent selon la structure du
   contenu. On uniformise tout sur la police sans-serif du thème. */
p {
	font-family: var(--bs-body-font-family);
}

body {
	background-color: #f8f9fa;
}

.card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sio2-entete {
	background-color: #e9ecef;
}

.sio2-entete-titre {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	margin-bottom: 0.25rem;
}

.sio2-entete-titre a {
	color: var(--sio2-bleu);
	text-decoration: none;
}

.sio2-entete-soustitre {
	color: var(--sio2-bleu);
	font-size: 1rem;
	margin-bottom: 0;
}

.sio2-entete-banniere {
	display: block;
	width: 100%;
	height: auto;
	max-height: 234px;
	object-fit: cover;
}

.navbar .nav-link {
	font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
	color: var(--sio2-bleu);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	background-color: #eef3fe;
	color: var(--sio2-bleu);
}

a {
	color: var(--sio2-bleu);
}

.card-title a {
	color: var(--sio2-bleu);
	text-decoration: none;
}

.card-title a:hover,
.card-title a:focus {
	color: #08379e;
	text-decoration: underline;
}

/* classes historiques de l'éditeur classique WordPress, encore présentes dans
   quelques anciens articles migrés (photos avec habillage de texte) */
.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
	max-width: 50%;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
	max-width: 50%;
}

.aligncenter {
	display: block;
	margin: 1em auto;
}

.alignnone {
	margin: 1em 0;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.875em;
	color: #6c757d;
	text-align: center;
	margin-top: 0.25em;
}

/* vidéos (CKEditor MediaEmbed) alignées à gauche/droite : réduites pour que le texte
   puisse effectivement s'afficher à côté (sans ça, l'alignement seul ne change rien,
   la vidéo occupant toute la largeur par défaut) */
.media.media-style-align-left,
.media.media-style-align-right {
	width: 50% !important;
}

.media.media-style-petite {
	width: 40% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 576px) {
	.media.media-style-align-left,
	.media.media-style-align-right {
		width: 100% !important;
		float: none !important;
	}
}