/* ============================================================
   blog.css — styles de la page Blog (hmercadal.fr)
   À déposer dans : template/default/custom/blog.css
   (le site interdit les <style> intégrés à la page : CSP)
   ============================================================ */

/* ---------- Base ---------- */
.blog-page {
	--accent: #e08a3c;                       /* couleur d'accent : à changer ici */
	--line: rgba(128, 128, 128, 0.35);       /* traits, fonctionne en thème clair et sombre */
	--soft: rgba(128, 128, 128, 0.12);       /* fonds d'encadrés */
	--largeur: 100%;                         /* largeur de la page : 100% = pleine largeur, ou ex. 1600px pour plafonner sur très grand écran */
	--fond: #3a3a3a;                         /* couleur de fond du bandeau fixe : à accorder avec le fond du site */
	--decalage: 0px;                         /* distance du bandeau au haut de la fenêtre (utile si l'en-tête du site est lui aussi fixe) */
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 1.5em 2em 3em;
	box-sizing: border-box;
	line-height: 1.65;
}
.blog-page * { box-sizing: border-box; }
.blog-page h1 { font-size: 2em; margin-bottom: 0.3em; }

/* ---------- Bandeau de menu : accès direct à tous les billets ---------- */
.blog-page .blog-menu {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 2.5em;
	padding: 0.7em 0;
	position: sticky;                        /* bandeau fixe en haut quand on fait défiler */
	top: var(--decalage);
	z-index: 100;
	background: var(--fond);
	box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.5);
	border-top: 3px solid var(--accent);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;                        /* défilement horizontal si beaucoup de billets */
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.blog-page .blog-menu-label {
	flex: none;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-right: 0.4em;
}
.blog-page .blog-menu a {
	flex: none;
	padding: 0.3em 0.9em;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
}
.blog-page .blog-menu a:hover,
.blog-page .blog-menu a:focus { border-color: var(--accent); color: var(--accent); }

/* ---------- Un billet ---------- */
.blog-page .post {
	margin-bottom: 4em;
	padding-bottom: 3em;
	border-bottom: 1px solid var(--line);
	scroll-margin-top: 5em;                  /* le titre n'est pas masqué par le bandeau fixe après un clic sur le menu */
	counter-reset: section;
}
.blog-page .post:last-of-type { border-bottom: none; }

.blog-page .post-kicker {
	font-size: 0.8em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.4em;
}
.blog-page .post-title {
	font-size: 2em;
	line-height: 1.2;
	margin: 0 0 0.2em;
	word-wrap: break-word;
}
.blog-page .post-date { opacity: 0.6; font-size: 0.9em; margin-bottom: 1.2em; }
.blog-page .post-lead { font-size: 1.15em; opacity: 0.9; margin-bottom: 1.5em; }

/* ---------- Images ---------- */
.blog-page .post figure { margin: 1.5em 0; }
.blog-page .post img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 90vh;                        /* évite une photo plus haute que l'écran */
	object-fit: contain;                     /* sans déformation ni recadrage */
	border-radius: 6px;
}
.blog-page .post figcaption {
	font-size: 0.85em;
	opacity: 0.65;
	margin-top: 0.5em;
}
/* Deux photos côte à côte (une sous l'autre sur mobile) */
.blog-page .photo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	margin: 1.5em 0;
}
.blog-page .photo-grid figure { margin: 0; }

/* ---------- Encadré "Carnet pratique" ---------- */
.blog-page .post-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1em 1.5em;
	margin: 1.8em 0;
	padding: 1.1em 1.3em;
	background: var(--soft);
	border-top: 3px solid var(--accent);
	border-radius: 6px;
}
.blog-page .post-info dt {
	font-size: 0.75em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}
.blog-page .post-info dd { margin: 0.15em 0 0; }

/* ---------- Sections numérotées automatiquement ---------- */
.blog-page .post h3 {
	counter-increment: section;
	font-size: 1.25em;
	margin: 2em 0 0.4em;
}
.blog-page .post h3::before {
	content: counter(section) ". ";
	color: var(--accent);
}
/* h3 sans numéro : ajouter class="no-num" */
.blog-page .post h3.no-num::before { content: none; }

/* ---------- Conseil / remarque ---------- */
.blog-page .post-tip {
	margin: 1.5em 0;
	padding: 0.8em 1.1em;
	border-left: 4px solid var(--accent);
	background: var(--soft);
	border-radius: 0 6px 6px 0;
}
.blog-page .post-tip p { margin: 0; }

/* ---------- Lien vers l'album ---------- */
.blog-page .post-album {
	display: inline-block;
	margin: 0.5em 0 1em;
	padding: 0.5em 1.1em;
	border: 1px solid var(--accent);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}
.blog-page .post-album:hover { background: var(--soft); }

/* ---------- Tableau (défile horizontalement sur mobile) ---------- */
.blog-page .table-wrap { overflow-x: auto; margin: 1.5em 0; }
.blog-page table { border-collapse: collapse; width: 100%; min-width: 480px; }
.blog-page th, .blog-page td {
	text-align: left;
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--line);
}
.blog-page th { font-size: 0.8em; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }

/* ---------- Questions / réponses repliables ---------- */
.blog-page details { border-bottom: 1px solid var(--line); padding: 0.8em 0; }
.blog-page summary { cursor: pointer; font-weight: 600; }
.blog-page details p { margin: 0.6em 0 0; }

/* ---------- Navigation en bas de billet ---------- */
.blog-page .post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-top: 2.5em;
	font-size: 0.95em;
}
.blog-page .post-nav a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.blog-page { padding: 1em 0.8em 2em; }
	.blog-page h1 { font-size: 1.6em; }
	.blog-page .post-title { font-size: 1.5em; }
	.blog-page .post-lead { font-size: 1.05em; }
	.blog-page .photo-grid { grid-template-columns: 1fr; }
	.blog-page .post-nav { flex-direction: column; }
}