/* ==================================================================
   Blog du Ciné-CLEP — coque autonome

   Le blog n'emprunte au site ni son bandeau, ni ses menus, ni sa barre
   latérale : il a les siens. Il en garde la fonte et la famille de bleus,
   pour rester de la même maison sans être fondu dedans.
   ================================================================== */

:root {
	--cineclep-bleu: #15217E;   /* le bleu du site */
	--cineclep-ciel: #298ECA;   /* le bleu de la têtière, relevé sur l'image */
	--cineclep-encre: #222;
	--cineclep-gris: #6b6b6b;
	--cineclep-filet: #e3e3e3;
}

body.cineclep-autonome { background: #fff; color: var(--cineclep-encre); }

.cineclep-site { max-width: 1140px; margin: 0 auto; padding: 0 16px 40px; }

/* ---- En-tête : la têtière, et rien d'autre ---- */

.cineclep-entete { margin: 18px 0 0; }
.cineclep-tetiere {
	display: block;
	background-repeat: no-repeat;
	background-position: center top;   /* le haut de l'image prime sur le bas */
	background-size: cover;
	aspect-ratio: 2000 / 672;
	width: 100%;
	border-radius: 4px;
}
@supports not (aspect-ratio: 1 / 1) {
	.cineclep-tetiere { height: 0; padding-top: 33.6%; }
}

/* ---- Navigation du blog ---- */

.cineclep-nav {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	background: var(--cineclep-bleu); color: #fff;
	padding: 10px 16px; margin-bottom: 30px; border-radius: 0 0 4px 4px;
}
.cineclep-nav > a {
	color: #fff; text-decoration: none; font-weight: 700;
	text-transform: uppercase; font-size: 13px; letter-spacing: .04em;
}
.cineclep-nav > a:hover { color: var(--cineclep-ciel); }
.cineclep-retour { margin-left: auto; font-weight: 400 !important; text-transform: none !important; }
.cineclep-recherche { display: flex; gap: 6px; }
.cineclep-recherche input[type="search"] {
	border: 0; border-radius: 3px; padding: 5px 9px; font-size: 13px; min-width: 190px;
}
.cineclep-recherche button {
	border: 0; border-radius: 3px; padding: 5px 11px; font-size: 13px;
	background: var(--cineclep-ciel); color: #fff; cursor: pointer;
}

/* ---- Deux colonnes ---- */

.cineclep-page { display: flex; gap: 34px; align-items: flex-start; }
.cineclep-contenu { flex: 1 1 auto; min-width: 0; }
.cineclep-barre { flex: 0 0 290px; width: 290px; }

/* ---- Les billets ---- */

.cineclep-billet { display: flex; gap: 18px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--cineclep-filet); }
.cineclep-billet:last-of-type { border-bottom: 0; }

.cineclep-date {
	flex: 0 0 56px; width: 56px; height: 58px;
	border: 1px solid var(--cineclep-bleu); border-radius: 4px;
	text-align: center; line-height: 1; padding-top: 7px; color: var(--cineclep-bleu);
}
.cineclep-mois { display: block; font-size: 13px; text-transform: uppercase; }
.cineclep-jour { display: block; font-size: 24px; font-weight: 700; }

.cineclep-corps { flex: 1 1 auto; min-width: 0; }
.cineclep-titre { margin: 0 0 4px; font-size: 24px; line-height: 1.25; }
.cineclep-titre a { color: var(--cineclep-bleu); text-decoration: none; }
.cineclep-titre a:hover { color: var(--cineclep-ciel); }
.cineclep-titre-seul { margin: 0 0 4px; font-size: 30px; line-height: 1.2; color: var(--cineclep-bleu); }
.cineclep-signature { margin: 0 0 12px; font-size: 13px; color: var(--cineclep-gris); }
.cineclep-signature a { color: var(--cineclep-bleu); }
.cineclep-vignette { margin: 0 0 12px; }
.cineclep-vignette img, .cineclep-illustration img { max-width: 100%; height: auto; }
.cineclep-illustration { margin: 0 0 20px; }
.cineclep-lire { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--cineclep-bleu); }
.cineclep-texte { font-size: 16px; line-height: 1.7; }
.cineclep-texte p { margin: 0 0 1.1em; }
.cineclep-resultat { margin: 0 0 20px; font-size: 15px; color: var(--cineclep-gris); }
.cineclep-vide { padding: 30px 0; color: var(--cineclep-gris); }
.cineclep-suite { display: flex; justify-content: space-between; gap: 20px; margin: 30px 0 0; font-size: 14px; }

/* ---- Barre latérale du blog ---- */

.cineclep-bloc { margin-bottom: 28px; }
.cineclep-bloc h2 {
	margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--cineclep-bleu); border-bottom: 2px solid var(--cineclep-ciel); padding-bottom: 6px;
}
.cineclep-bloc p { font-size: 14px; line-height: 1.6; color: var(--cineclep-gris); margin: 0; }
.cineclep-bloc ul { list-style: none; margin: 0; padding: 0; }
.cineclep-bloc li { padding: 6px 0; border-bottom: 1px solid var(--cineclep-filet); font-size: 14px; }
.cineclep-bloc li a { color: var(--cineclep-encre); text-decoration: none; }
.cineclep-bloc li a:hover { color: var(--cineclep-ciel); }
.cineclep-bloc-date { display: block; font-size: 12px; color: var(--cineclep-gris); }

/* ---- Pied ---- */

.cineclep-pied {
	margin-top: 44px; padding: 20px 16px; text-align: center;
	border-top: 3px solid var(--cineclep-bleu); font-size: 14px; color: var(--cineclep-gris);
}
.cineclep-pied p { margin: 0 0 4px; }
.cineclep-pied a { color: var(--cineclep-bleu); }

/* ---- Le bouton d'accès, dans la barre de droite du SITE ---- */

.cineclep-acces { display: block; text-decoration: none; }
.cineclep-acces img { max-width: 100%; height: auto; display: block; }
.cineclep-acces span {
	display: block; background: var(--cineclep-bleu); color: #fff; text-align: center;
	padding: 9px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.cineclep-acces:hover span { background: var(--cineclep-ciel); }

/* ---- Écrans étroits ---- */

@media (max-width: 900px) {
	.cineclep-page { display: block; }
	.cineclep-barre { width: auto; margin-top: 34px; }
}
@media (max-width: 600px) {
	.cineclep-billet { display: block; }
	.cineclep-date { display: inline-block; margin-bottom: 10px; }
	.cineclep-titre { font-size: 20px; }
	.cineclep-titre-seul { font-size: 23px; }
	.cineclep-retour { margin-left: 0; }
	.cineclep-recherche input[type="search"] { min-width: 0; width: 100%; }
}