/* ============================================================
   Le Plus — feuille moderne (surcharge de style.css)
   Chargée après style.css, uniquement sur le blog leplus.info.
   ============================================================ */

:root {
	--lp-bleu: #0f6fb8;
	--lp-bleu-fonce: #0b5c99;
	--lp-encre: #16202b;
	--lp-texte: #26313d;
	--lp-gris: #64748b;
	--lp-bord: #e4e8ee;
	--lp-fond: #f5f7fa;
	--lp-carte: #ffffff;
	--lp-rayon: 16px;
	--lp-ombre: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .16);
	--lp-largeur: 1120px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	background: var(--lp-fond);
	color: var(--lp-texte);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: #cfe6f8; color: var(--lp-encre); }

a { color: var(--lp-bleu); text-decoration: none; }
a:hover { color: var(--lp-bleu-fonce); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #8dc4ea; outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

/* ---------- enveloppe ---------- */

#wrapper {
	max-width: var(--lp-largeur);
	width: auto;
	margin: 0 auto;
	padding: 0 20px 40px;
	background: none;
	border: 0;
}

#header { padding: 22px 0 0; float: none; width: auto; }

#masthead { float: none; width: auto; }

#branding { margin: 0; float: none; width: 100%; max-width: 100%; }

#branding img {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	border-radius: var(--lp-rayon);
	box-shadow: var(--lp-ombre);
}

/* ---------- barre de catégories ---------- */

.lp-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	margin: 14px -20px 0;
	padding: 10px 20px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--lp-bord);
}

.lp-nav-in {
	width: 100%;
	max-width: var(--lp-largeur);
	margin: 0 auto;
	display: flex;
	box-sizing: border-box;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.lp-nav-in::-webkit-scrollbar { display: none; }

.lp-chip {
	flex: 0 0 auto;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--lp-bord);
	background: #fff;
	color: var(--lp-texte);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.lp-chip:hover { border-color: #c9d6e3; background: #f2f7fc; color: var(--lp-bleu-fonce); text-decoration: none; }
.lp-chip-actif { background: var(--lp-encre); border-color: var(--lp-encre); color: #fff; }
.lp-chip-actif:hover { background: var(--lp-encre); color: #fff; }

/* ---------- grille principale ---------- */

#main {
	width: auto;
	max-width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 34px;
	align-items: start;
	padding: 30px 0 0;
	clear: none;
}

#container, #content, #primary {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

#primary {
	position: sticky;
	top: 74px;
	align-self: start;
}

/* ---------- cartes d'article (liste, archives) ---------- */

.post {
	background: var(--lp-carte);
	border: 1px solid var(--lp-bord);
	border-radius: var(--lp-rayon);
	padding: 26px 28px 22px;
	margin: 0 0 22px;
	box-shadow: var(--lp-ombre);
}

.post .entry-title {
	margin: 0 0 10px;
	font-size: clamp(1.32rem, 1.1rem + .9vw, 1.68rem);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.015em;
	color: var(--lp-encre);
}
.post .entry-title a { color: inherit; }
.post .entry-title a:hover { color: var(--lp-bleu); text-decoration: none; }

.entry-content { color: var(--lp-texte); }
.entry-content p { margin: 0 0 1em; }
.entry-content p:last-child { margin-bottom: 0; }

.entry-meta,
.entry-utility {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--lp-gris);
}

.entry-meta a, .entry-utility a { color: var(--lp-gris); }
.entry-meta a:hover, .entry-utility a:hover { color: var(--lp-bleu); }

.post .entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* aperçu de liste : on limite la hauteur du texte */
.home .post .entry-content,
.blog .post .entry-content,
.archive .post .entry-content {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- article seul ---------- */

.single .post, .page .post { padding: 34px 36px 30px; }

.single .entry-title, .page .entry-title {
	margin: 0 0 18px;
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.7rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.025em;
	color: var(--lp-encre);
}

.entry-content > p:first-of-type { font-size: 1.06em; }

.leplus-chapo {
	padding: 16px 18px;
	margin: 0 0 22px;
	background: #f2f7fc;
	border-left: 4px solid var(--lp-bleu);
	border-radius: 0 12px 12px 0;
	color: #1d2b38;
}
.leplus-chapo strong { font-weight: 600; }

.entry-content h2 {
	margin: 1.9em 0 .6em;
	padding-left: 14px;
	border-left: 5px solid var(--lp-bleu);
	font-size: clamp(1.22rem, 1rem + .7vw, 1.45rem);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--lp-encre);
	clear: none;
}

.entry-content h3 {
	margin: 1.6em 0 .5em;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--lp-encre);
}

.entry-content ul, .entry-content ol {
	margin: 0 0 1.1em 1.2em;
	list-style: disc;
}
.entry-content ol { list-style: decimal; }
.entry-content li { margin: .35em 0; }

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid #d7e3ee;
	color: #33414f;
	font-style: italic;
}

.entry-content code, .entry-content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
	background: #f1f4f8;
	border-radius: 8px;
}
.entry-content code { padding: .15em .4em; }
.entry-content pre { padding: 14px 16px; overflow-x: auto; }

.entry-content table {
	width: 100%;
	max-width: 100%;
	margin: 1.4em 0;
	font-size: .95em;
	border: 1px solid var(--lp-bord);
	border-radius: 12px;
	overflow: hidden;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
.entry-content th, .entry-content td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--lp-bord);
	text-align: left;
}
.entry-content tr:nth-child(even) td { background: #fafbfd; }

/* illustration BD */
figure.leplus-bd { margin: 26px 0 !important; }
figure.leplus-bd img {
	border-radius: 14px !important;
	border: 1px solid var(--lp-bord) !important;
	box-shadow: var(--lp-ombre);
	width: 100%;
}
figure.leplus-bd figcaption { margin-top: 8px !important; color: var(--lp-gris) !important; }

.wp-caption { max-width: 100%; }
.wp-caption img { border-radius: 12px; }

.entry-utility {
	clear: both;
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid var(--lp-bord);
}

/* ---------- navigation entre articles ---------- */

.navigation {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 22px 0;
	font-size: 15px;
}
.navigation .nav-previous, .navigation .nav-next {
	flex: 1 1 0;
	background: #fff;
	border: 1px solid var(--lp-bord);
	border-radius: 12px;
	padding: 12px 16px;
}
.navigation .nav-next { text-align: right; }
.navigation a { font-weight: 600; }
.navigation .meta-nav { color: var(--lp-gris); }

/* ---------- colonne latérale ---------- */

#primary li.widget-container,
.widget-container {
	list-style: none;
	background: var(--lp-carte);
	border: 1px solid var(--lp-bord);
	border-radius: var(--lp-rayon);
	padding: 18px 20px;
	margin: 0 0 18px;
	box-shadow: var(--lp-ombre);
	font-size: 15px;
}

.widget-title {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lp-gris);
}

.widget-container ul { margin: 0; }
.widget-container li {
	padding: 6px 0;
	border-bottom: 1px solid #f1f4f8;
	font-size: 15px;
	list-style: none;
}
.widget-container li:last-child { border-bottom: 0; }
.widget-container li ul { margin-left: 10px; }
.widget-container a { color: var(--lp-texte); font-weight: 500; }
.widget-container a:hover { color: var(--lp-bleu); text-decoration: none; }

.tagcloud a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f2f6fa;
	border: 1px solid var(--lp-bord);
	font-size: 13px !important;
	color: var(--lp-texte);
}
.tagcloud a:hover { background: var(--lp-bleu); border-color: var(--lp-bleu); color: #fff; text-decoration: none; }

/* recherche */
#searchform { display: flex; gap: 8px; }
#searchform #s {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--lp-bord);
	border-radius: 10px;
	font-size: 15px;
	background: #fff;
	color: var(--lp-texte);
}
#searchform #searchsubmit {
	padding: 9px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-encre);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
#searchform #searchsubmit:hover { background: var(--lp-bleu); }

/* ---------- commentaires ---------- */

h3#comments, h3#respond, .nocomments {
	margin: 30px 0 14px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--lp-encre);
}
ol.commentlist { margin: 0; }
ol.commentlist li {
	list-style: none;
	background: #fff;
	border: 1px solid var(--lp-bord);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.comment-author img { border-radius: 50%; float: left; margin-right: 10px; }
.comment-meta { font-size: 13px; color: var(--lp-gris); }
.reply { font-size: 14px; }
#respond input[type="text"], #respond input[type="email"], #respond input[type="url"], #respond textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--lp-bord);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--lp-texte);
}
#respond .form-submit input {
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-bleu);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
#respond .form-submit input:hover { background: var(--lp-bleu-fonce); }

/* ---------- pied ---------- */

#footer {
	margin-top: 40px;
	background: var(--lp-encre);
	color: #c3cfdb;
	border-radius: var(--lp-rayon);
	padding: 30px 28px;
	width: auto;
}
#footer a { color: #fff; }
#colophon { margin: 0; }
#site-info { font-size: 14px; text-align: center; color: #93a3b4; }
#footer .widget-container,
#footer .widget-title { color: #c3cfdb; }

/* ---------- tablettes et mobiles ---------- */

@media (max-width: 980px) {
	#main {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	#primary { position: static; top: auto; }
}

@media (max-width: 720px) {
	body { font-size: 16.5px; }
	#wrapper { padding: 0 14px 28px; }
	#header { padding-top: 14px; }
	.lp-nav { margin: 12px -14px 0; padding: 8px 14px; }
	.post { padding: 20px 18px 18px; border-radius: 14px; }
	.single .post, .page .post { padding: 22px 18px 20px; }
	.entry-content { font-size: 16.5px; }
	.entry-content table { white-space: normal; }
	.navigation { flex-direction: column; }
	.navigation .nav-next { text-align: left; }
	#footer { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- corrections d'héritage (Twenty Ten centre et justifie) ---------- */

body, .entry-content, .entry-content p, .leplus-chapo, .leplus-chapo strong,
.entry-title, .post .entry-title, .widget-container {
	text-align: left;
}

.single .entry-content p, .page .entry-content p { hyphens: auto; }

/* ---------- en-tête mobile : marque texte plutôt que la bannière ---------- */

.lp-brand-mobile { display: none; }

@media (max-width: 640px) {
	#branding img { display: none; }
	.lp-brand-mobile {
		display: block;
		padding: 16px 18px 14px;
		background: #fffdf6;
		border: 2px solid #111;
		border-radius: 16px;
		box-shadow: var(--lp-ombre);
		text-align: center;
	}
	.lp-brand-mobile:hover { text-decoration: none; }
	.lp-brand-mark {
		display: block;
		font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif;
		font-size: 40px;
		line-height: 1;
		letter-spacing: .02em;
		color: #0f6fb8;
		-webkit-text-stroke: 2px #111;
	}
	.lp-brand-tag {
		display: block;
		margin-top: 6px;
		font-size: 13.5px;
		font-weight: 600;
		color: #4a3d22;
	}
}

#site-info { text-align: center; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
#footer .widget-container { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- en-tête des archives (catégorie, étiquette, recherche) ---------- */

#content > h1 {
	margin: 0 0 22px;
	padding: 22px 28px;
	background: #fff;
	border: 1px solid var(--lp-bord);
	border-radius: var(--lp-rayon);
	box-shadow: var(--lp-ombre);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--lp-encre);
}

#content > h1:has(+ .archive-meta) { margin-bottom: 0; border-radius: var(--lp-rayon) var(--lp-rayon) 0 0; }

.archive-meta {
	margin: 0 0 22px;
	padding: 14px 28px 20px;
	background: #fff;
	border: 1px solid var(--lp-bord);
	border-top: 0;
	border-radius: 0 0 var(--lp-rayon) var(--lp-rayon);
	color: #46545f;
	font-size: 16px;
	line-height: 1.65;
	box-shadow: var(--lp-ombre);
}

#footer #site-info a { color: #fff; font-weight: 700; }
#footer #site-info a:hover { color: #9ecdf0; }
.lp-copy { display: block; margin-top: 6px; font-size: 13px; color: #7f8fa1; }

#colophon { border-top: 0; }
#footer #site-info { border-top: 0; padding-top: 0; }