/* ============================================================
   La Caféothèque — Page éditoriale (contenu riche habillé « article »)
   Surcouche de cafeo-article.css. Ajoute : layout single-column,
   style des titres Gutenberg et des galeries. Scopé .cafeo-editorial.
   ============================================================ */

/* ---- Layout : une seule colonne, centrée (pas de sidebar presse) ---- */
.cafeo-editorial .article-layout {
	display: block;
}
.cafeo-editorial .article-body {
	max-width: 920px;
	margin: 0 auto;
}
.cafeo-editorial .article-cta {
	max-width: 920px;
	margin: 56px auto 0;
}
/* Le contenu éditorial est centré → on centre aussi le bloc H1/breadcrumbs
   du hero à la même largeur pour qu'ils s'alignent avec le corps. */
.cafeo-editorial .article-hero__inner {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Titres Gutenberg (wp-block-heading : h2 / h3) ---- */
.cafeo-editorial .article-body h2 {
	position: relative;
	font-family: 'Onest', sans-serif;
	font-weight: 400;
	color: var(--brown-dark);
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: 1px;
	line-height: 1.25;
	padding-top: 22px;
	margin: 56px 0 24px;
	text-wrap: pretty;
}
.cafeo-editorial .article-body h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--gold);
}
.cafeo-editorial .article-body h3 {
	font-family: 'Onest', sans-serif;
	font-weight: 500;
	color: var(--brown);
	font-size: clamp(19px, 2.2vw, 24px);
	letter-spacing: .5px;
	line-height: 1.3;
	margin: 40px 0 16px;
}
.cafeo-editorial .article-body h4 {
	font-family: 'Onest', sans-serif;
	font-weight: 500;
	color: var(--charcoal);
	font-size: 18px;
	letter-spacing: .3px;
	margin: 32px 0 14px;
}
.cafeo-editorial .article-body > h2:first-child,
.cafeo-editorial .article-body > h3:first-child,
.cafeo-editorial .article-body > *:first-child { margin-top: 0; }

/* ---- Listes ---- */
.cafeo-editorial .article-body ul,
.cafeo-editorial .article-body ol {
	margin: 0 0 36px;
	padding-left: 24px;
}
.cafeo-editorial .article-body li {
	font-size: 17px;
	color: var(--charcoal);
	line-height: 1.9;
	margin-bottom: 10px;
}
.cafeo-editorial .article-body li::marker { color: var(--kaki); }

/* ---- Liens dans le corps ---- */
.cafeo-editorial .article-body a {
	color: var(--brown-dark);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s ease;
}
.cafeo-editorial .article-body a:hover { text-decoration-color: var(--brown-dark); }

/* ---- Galeries (wp-block-gallery) : imposer la mise en grille côte à côte.
   WP core stylise ces galeries « nested images » avec une spécificité de
   niveau ID (sélecteur :not(#individual-image)) qui écrasait nos règles et
   laissait chaque image en pleine largeur → empilées. On reprend donc la main
   avec !important et une base flex explicite. ---- */
.cafeo-editorial .article-body .wp-block-gallery {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin: 8px 0 44px;
	padding: 0;
	list-style: none;
	align-items: stretch;
}
.cafeo-editorial .article-body .wp-block-gallery figure.wp-block-image {
	margin: 0 !important;
}
.cafeo-editorial .article-body .wp-block-gallery.columns-2 figure.wp-block-image {
	flex: 0 0 calc(50% - 8px) !important;
	width: calc(50% - 8px) !important;
	max-width: calc(50% - 8px) !important;
}
.cafeo-editorial .article-body .wp-block-gallery.columns-3 figure.wp-block-image {
	flex: 0 0 calc(33.333% - 11px) !important;
	width: calc(33.333% - 11px) !important;
	max-width: calc(33.333% - 11px) !important;
}
.cafeo-editorial .article-body .wp-block-gallery figure.wp-block-image img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.cafeo-editorial .article-body .wp-block-gallery figcaption {
	font-size: 14px;
	color: var(--rose-brown);
	text-align: center;
	margin-top: 8px;
}

/* ---- Image simple : joli cadre déjà hérité de cafeo-article.css ---- */
.cafeo-editorial .article-body .wp-block-image.alignwide { margin-left: -40px; margin-right: -40px; }
.cafeo-editorial .article-body figure { max-width: 100%; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.cafeo-editorial .article-body .wp-block-gallery.columns-2 figure.wp-block-image,
	.cafeo-editorial .article-body .wp-block-gallery.columns-3 figure.wp-block-image {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}
@media (max-width: 760px) {
	.cafeo-editorial .article-body .wp-block-image.alignwide { margin-left: 0; margin-right: 0; }
}

/* ===== Chapitres « Découvrir la caféologie » ===== */
/* Numéro de chapitre dans le hero éditorial. */
.cafeo-editorial .article-hero__eyebrow{font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:#ffd17c;margin:0 0 14px;font-weight:500;}

/* Corps de chapitre : rythme resserré (les textes du livre ont beaucoup de
   paragraphes courts → 36px entre chacun faisait trop d'air). */
.cafeo-chapitre .article-body p{margin-bottom:22px;}
.cafeo-chapitre .article-body h2{margin-top:48px;}
.cafeo-chapitre .article-body > p:first-child{
	font-size:20px;line-height:1.7;color:var(--brown);
}

/* Légendes / crédits photo (« FLEURS DE CAFÉ — © … »). Rapprochées de l'image
   qui les précède, discrètes et centrées. */
.cafeo-chapitre .article-body .cafeo-caption{
	margin:-28px 0 40px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
	color:var(--rose-brown);text-align:center;line-height:1.5;
}
/* Quand aucune image n'est encore posée au-dessus, la légende ne « colle » pas
   au paragraphe précédent : marge haute neutre si pas d'image juste avant. */
.cafeo-chapitre .article-body p:not(.wp-block-image) + .cafeo-caption{margin-top:0;}
.cafeo-chapitre .article-body .wp-block-image + .cafeo-caption{margin-top:-28px;}

/* Vers / poème (Partie I) : lignes centrées, resserrées, en majuscules douces. */
.cafeo-chapitre .article-body .cafeo-verse{
	text-align:center;margin:2px 0;line-height:1.55;
	font-size:clamp(18px,2.3vw,23px);color:var(--brown);letter-spacing:.4px;
}
.cafeo-chapitre .article-body .cafeo-verse:first-of-type{margin-top:8px;}

/* Navigation entre chapitres (bas de page) : deux pilules « précédent / suivant »
   alignées au corps (920px), séparées par un filet. Pas de titre d'article, pas
   de lien « tous les chapitres » : juste le sens + une flèche. Suivant = pilule
   dorée (CTA principal, cohérent avec le bouton BOUTIQUE) ; précédent = outline. */
.cafeo-article .chapter-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:920px;margin:8px auto 0;padding:36px 24px 96px;border-top:1px solid rgba(74,45,31,.14);}
.cafeo-article .chapter-nav__spacer{display:block;flex:0 0 1px;}
.cafeo-article .chapter-nav__btn{display:inline-flex;align-items:center;gap:11px;padding:13px 28px;border-radius:30px;font-family:'Onest',sans-serif;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s;}
.cafeo-article .chapter-nav__btn svg{width:16px;height:16px;flex:none;}
/* Précédent : pilule outline discrète. */
.cafeo-article .chapter-nav__btn--prev{border:1.5px solid rgba(74,45,31,.25);color:var(--brown-dark);background:#fff;}
.cafeo-article .chapter-nav__btn--prev:hover{border-color:var(--brown-dark);transform:translateX(-2px);}
.cafeo-article .chapter-nav__btn--prev svg{transform:scaleX(-1);}
/* Suivant : pilule dorée (charte). */
.cafeo-article .chapter-nav__btn--next{background:#ffd17c;color:#42240c;box-shadow:0 4px 14px rgba(255,209,124,.4);}
.cafeo-article .chapter-nav__btn--next:hover{background:#ffc659;transform:translateX(2px);box-shadow:0 6px 18px rgba(255,198,89,.5);}
@media(max-width:520px){
	.cafeo-article .chapter-nav{padding:28px 20px 80px;gap:10px;}
	.cafeo-article .chapter-nav__btn{padding:11px 18px;font-size:11px;letter-spacing:1.2px;gap:8px;}
	.cafeo-article .chapter-nav__btn svg{width:14px;height:14px;}
}