/*
 Theme Name:   GeneratePress Child - Cuisine de Djouza
 Description:  Child theme for cuisinezavecdjouza.fr (GeneratePress + GP Premium)
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/* GeneratePress enqueues this stylesheet automatically for child themes.
   Add site-specific overrides below. */

/* Alex Brush, self-hosted (NOT loaded from Google Fonts API which is
   render-blocking). Used only by the sidebar "About" widget text.
   font-display:swap keeps it off the LCP critical path. Root-relative URL so
   it resolves identically on staging and production after Rocket minify. */
@font-face {
	font-family: 'Alex Brush';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/wp-content/themes/generatepress-child/fonts/alex-brush-latin.woff2') format('woff2');
}

/* WP-PostRatings clickable stars injected into the Tasty card (notation
   migration). The plugin renders small gold GIF stars; enlarge them and recolor
   to the bordeaux accent via a CSS filter, keeping the filled/empty contrast. */
.djouza-card-rate {
	display: inline-block;
	line-height: 1;
}
.djouza-card-rate .post-ratings {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}
.djouza-card-rate .post-ratings img,
.djouza-card-rate .post-ratings-image {
	width: 22px !important;
	height: 22px !important;
	cursor: pointer;
	/* Recolor the gold GIF stars toward the bordeaux brand accent (deep red).
	   Exact #800000 on raster GIFs via filter is approximate; a pixel-perfect
	   match would need custom bordeaux star images (minor follow-up). */
	filter: brightness(0.34) sepia(1) saturate(520%) hue-rotate(-40deg) contrast(1.1);
	transition: transform 0.1s ease;
}
.djouza-card-rate .post-ratings img:hover {
	transform: scale(1.12);
}
.djouza-card-rate .post-ratings-text {
	display: none;
}

/* Tasty Recipes card: align with site identity (accent #800000, clean card
   on white background). Complements Settings > Design (template Fresh). */
.tasty-recipes {
	border: 1px solid #e3dcdc;
	border-radius: 8px;
	padding: 1.5em;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tasty-recipes a {
	color: #800000;
}
.tasty-recipes h4 {
	color: #800000;
	margin-top: 1em;
}

/* Mobile (<768px) readability: the Tasty card plugin defaults stack ~120px of
   side padding on a ~390px screen (.tasty-recipes 1.5em here + the plugin's 36px
   on .tasty-recipes-ingredients / -instructions), squeezing ingredient and step
   text to 2-3 words per line. Slim the card padding and drop the inner horizontal
   padding so the content uses near-full card width. Desktop (>=768px) untouched. */
@media (max-width: 767px) {
	.tasty-recipes {
		padding: 12px;
	}
	/* Tasty sets the inner ingredients/instructions padding with a higher-specificity
	   rule, so override with !important (mobile-scoped) the way the star sizing above
	   already overrides the plugin. The card's 12px is the side breathing room. */
	.tasty-recipes-ingredients,
	.tasty-recipes-instructions {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Home / archives: match the prod layout - centered title above a wide image,
   short justified excerpt, accent read-more. */
.blog .entry-header,
.archive .entry-header {
	text-align: center;
}
.blog .entry-summary,
.archive .entry-summary {
	text-align: justify;
}
.blog .read-more,
.archive .read-more {
	color: #800000;
	font-weight: 600;
}
.blog article.post,
.archive article.post {
	margin-bottom: 50px;
}

/* ===== Article content links - dark bordeaux, underlined (client request).
   Scoped to .entry-content so nav/widgets are untouched; Tasty card links are
   re-asserted below with higher specificity to keep the accent + no underline. */
.entry-content a {
	color: #600000;
	text-decoration: underline;
}
.entry-content a:hover {
	color: #400000;
}
.entry-content .tasty-recipes a {
	color: #800000;
	text-decoration: none;
}

/* ===== Logo sizing - 400px desktop / 280 mobile, CLS-safe.
   Deterministic (body ... beats GP's cached .site-header .header-image rule),
   and aspect-ratio on the inner <img> reserves height (Imagify wraps the logo
   in <picture> without width/height attributes). ===== */
body .site-header .header-image,
body .site-header .site-logo img {
	width: 400px;
	max-width: 100%;
	height: auto;
}
body .site-header .header-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 400 / 219;
}
@media (max-width: 768px) {
	body .site-header .header-image,
	body .site-header .site-logo img {
		width: 280px;
	}
}
.navigation-stuck .site-logo img,
.sticky-navigation-logo img {
	max-width: 200px;
	height: auto;
}

/* ===== Primary menu centered (model) - fallback to the GP setting ===== */
.main-navigation .inside-navigation .main-nav > ul,
.main-navigation .main-nav > ul {
	justify-content: center;
}
/* White, uppercase, dark-text menu with a bordeaux hover (prod style). The base
   colours come from the GP customizer (navigation_* = white / #222 / #800000);
   here we add the uppercase and light separators so the white bar reads cleanly
   against the white header and content, and give the dropdowns a soft shadow. */
.main-navigation .main-nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.main-navigation {
	border-top: 1px solid #ece6e6;
	border-bottom: 1px solid #ece6e6;
}
.main-navigation .main-nav ul ul {
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* ===== HOME (front page) curated layout ===== */
.djouza-home {
	max-width: 1100px;
	margin: 0 auto;
}
.djouza-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin: 0 0 14px;
}
.djouza-search {
	display: flex;
}
.djouza-search input[type="search"] {
	min-width: 240px;
	padding: 10px 14px;
	border: 1px solid #d8cccc;
	border-right: 0;
	border-radius: 6px 0 0 6px;
}
.djouza-search button {
	padding: 10px 18px;
	border: 0;
	background: #800000;
	color: #fff;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
}
.djouza-search button:hover {
	background: #600000;
}
.djouza-btn {
	display: inline-block;
	padding: 10px 18px;
	background: #800000;
	color: #fff !important;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}
.djouza-btn:hover {
	background: #600000;
}
.djouza-btn-ghost {
	background: transparent;
	color: #800000 !important;
	border: 2px solid #800000;
}
.djouza-btn-ghost:hover {
	background: #800000;
	color: #fff !important;
}
.djouza-welcome {
	text-align: center;
	color: #444;
	margin: 0 0 28px;
}
/* Home H1 in the Alex Brush script face (client request: warmer, handwritten
   welcome on the front page). Scoped to .djouza-home-title, the single H1 on the
   static front page only -- article and archive titles keep their readable
   sans-serif for legibility and SEO. Script faces read visually smaller and
   thinner, so the size is bumped well above the 1.6em sans-serif baseline, with
   a reduced (still large) mobile size to stay legible on small screens. Alex
   Brush ships weight 400 only. */
.djouza-home-title {
	font-family: 'Alex Brush', 'Great Vibes', 'Allura', cursive;
	font-weight: 400;
	text-align: center;
	color: #800000;
	font-size: 2.8em;
	line-height: 1.2;
	margin: 0 0 0.5em;
}
@media (max-width: 768px) {
	.djouza-home-title {
		font-size: 2em;
	}
}
/* Optional category description under the archive title (category.php). The full
   text is always in the HTML (SEO). When JS is active (.djouza-js set in <head>
   before paint, so no flash) it is clamped to 3 lines with a bordeaux "Lire la
   suite" toggle that expands it in place; without JS the full text shows. */
.djouza-archive-desc-wrap {
	max-width: 760px;
	margin: 0 auto 1.4em;
	text-align: center;
}
.djouza-archive-desc {
	color: #555;
}
.djouza-desc-toggle {
	display: none;
}
.djouza-js .djouza-archive-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.djouza-js .djouza-archive-desc.is-expanded {
	display: block;
	overflow: visible;
}
.djouza-js .djouza-desc-toggle {
	display: inline-block;
	margin: 0.2em 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: #800000;
	font-weight: 600;
	cursor: pointer;
}
.djouza-js .djouza-desc-toggle:hover {
	text-decoration: underline;
}
.djouza-section-title {
	text-align: center;
	color: #800000;
	margin: 1.6em 0 1em;
}
.djouza-section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	background: #800000;
	margin: 8px auto 0;
}
.djouza-grid {
	display: grid;
	gap: 24px;
	margin-bottom: 8px;
}
.djouza-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.djouza-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}
.djouza-grid-compact {
	margin-top: 24px;
}
/* Home category pools: a 12-card pool is rendered but only the first 4 show
   (no-JS = first 4 by date, clean fallback). The djouzaShuffleHome script
   reorders the cards on each load so the visible 4 are random. Always exactly 4
   shown => the grid keeps the same height => zero CLS. */
.djouza-shuffle > .djouza-card:nth-child(n+5) {
	display: none;
}
.djouza-card {
	margin: 0;
	text-align: center;
}
.djouza-card .djouza-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: #f3eeee;
}
/* Crop the photo to the 4:3 box. Imagify wraps some thumbnails in <picture>
   and moves .djouza-thumb-img onto it, so target the inner <img> too. */
.djouza-card .djouza-thumb picture {
	display: block;
	width: 100%;
	height: 100%;
}
.djouza-card .djouza-thumb img,
.djouza-card .djouza-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.djouza-card .djouza-thumb:hover img {
	transform: scale(1.04);
}
.djouza-card-title {
	margin: 0.55em 0 0.2em;
	font-size: 1.05em;
	line-height: 1.3;
}
.djouza-card-title a {
	color: #800000;
	text-decoration: none;
}
.djouza-card-title a:hover {
	color: #600000;
}
.djouza-card-compact .djouza-card-title {
	font-size: 0.98em;
}
.djouza-stars {
	display: block;
	color: #800000;
	font-size: 0.9em;
}
.djouza-stars small {
	color: #666;
}
.djouza-excerpt {
	text-align: justify;
	font-size: 0.92em;
	color: #555;
	margin: 0.5em 0 0;
	line-height: 1.55;
}
.djouza-more {
	text-align: center;
	margin: 18px 0 0;
}
@media (max-width: 880px) {
	.djouza-grid-3,
	.djouza-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.djouza-grid-3,
	.djouza-grid-4 {
		grid-template-columns: 1fr;
	}
	.djouza-search input[type="search"] {
		min-width: 0;
		flex: 1;
	}
}

/* ===== Home "About" band (client request): round lazyloaded photo + short bio,
   placed after the latest recipes so it never delays the LCP (the first recipe
   image above stays the LCP). Photo left / text right on desktop, stacked and
   centered on mobile. The round box is reserved via aspect-ratio => zero CLS.
   Tones match the sidebar About widget (brown #8c5623 ring) and the strip band
   (#fbf7f4), accents in the bordeaux brand #800000. ===== */
.djouza-about {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 880px;
	margin: 2.4em auto;
	padding: 22px 26px;
	background: #fbf7f4;
	border: 1px solid #ecdede;
	border-radius: 12px;
}
.djouza-about-photo {
	flex: 0 0 auto;
}
.djouza-about-photo img {
	width: 150px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	border: 4px solid #8c5623;
	box-shadow: 0 4px 12px rgba(140, 86, 35, 0.2);
}
.djouza-about-text {
	flex: 1 1 auto;
}
.djouza-about-title {
	color: #800000;
	margin: 0 0 0.4em;
	font-size: 1.4em;
}
.djouza-about-text p {
	color: #444;
	margin: 0 0 1em;
	line-height: 1.6;
}
@media (max-width: 600px) {
	.djouza-about {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding: 20px 16px;
	}
	.djouza-about-photo img {
		width: 120px;
	}
}

/* ===== Tasty quick links (Jump / Print) styled as buttons, matching the
   home search button (bg #800000, white text, hover #600000). The native
   "Buttons" style is a Tasty Pro feature, so we restyle the links here. ===== */
.tasty-recipes-quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 1.2em;
}
.tasty-recipes-quick-links > span {
	display: none;
}
.tasty-recipes-quick-links a {
	display: inline-block;
	padding: 10px 18px;
	background: #800000;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
}
.tasty-recipes-quick-links a:hover,
.tasty-recipes-quick-links a:focus {
	background: #600000;
	color: #fff;
}

/* ===== /recettes magazine grid + pagination ===== */
.djouza-recettes {
	padding-top: 6px;
}
.djouza-recettes .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 30px;
}
.djouza-recettes .page-numbers {
	padding: 8px 13px;
	border: 1px solid #e0d6d6;
	border-radius: 6px;
	text-decoration: none;
	color: #800000;
	line-height: 1;
}
.djouza-recettes .page-numbers.current {
	background: #800000;
	color: #fff;
	border-color: #800000;
}
.djouza-recettes a.page-numbers:hover {
	background: #600000;
	color: #fff;
	border-color: #600000;
}
.djouza-recettes .page-numbers.dots {
	border: 0;
	padding: 8px 4px;
}

/* ===== Footer widgets (Informations / Categories / Suivez-nous) ===== */
.footer-widgets .widget-title,
.site-footer .widget .widget-title {
	color: #800000;
}
.footer-widgets a {
	text-decoration: none;
}
.footer-widgets a:hover {
	text-decoration: underline;
}

/* ===== Mobile slideout (off-canvas) menu: white panel, dark uppercase links,
   bordeaux hover (matches the new white desktop menu). The empty-panel bug is
   fixed by assigning the menu to the slideout location server-side. ===== */
#generate-slideout-menu {
	background-color: #ffffff;
	border-right: 1px solid #ece6e6;
}
#generate-slideout-menu a,
#generate-slideout-menu .main-nav ul li a {
	color: #222;
	text-transform: uppercase;
}
#generate-slideout-menu .main-nav ul li a:hover,
#generate-slideout-menu .main-nav ul li a:focus,
#generate-slideout-menu .main-nav ul li.sfHover > a,
#generate-slideout-menu .main-nav ul li[class*="current-menu"] > a {
	background-color: #f6f0f0;
	color: #800000;
}
#generate-slideout-menu .sub-menu {
	background-color: #faf7f7;
}
#generate-slideout-menu .slideout-exit,
.slideout-overlay .slideout-exit {
	color: #222;
}

/* ===== Article readability (client request): darker, less thin body text.
   System fonts kept for performance; #222 + explicit 400 removes the washed-out
   grey look without loading a webfont. ===== */
.single .entry-content,
.single .entry-content p,
.single .entry-content li {
	color: #222;
	font-weight: 400;
}

/* ===== Article heading hierarchy (client request): strong bold, branded.
   H1/H2 in bordeaux #800000 700, H3 in #222 600. Overrides GP's thin 300
   heading weight. Scoped to .single so the home / Tasty card keep their look. */
.single .entry-title {
	font-weight: 700;
	color: #800000;
}
.single .entry-content h2 {
	font-weight: 700;
	color: #800000;
}
.single .entry-content h3 {
	font-weight: 600;
	color: #222;
}
/* Keep the Tasty recipe card headings as the plugin styles them (its own
   colors / centering), unaffected by the article heading rules above. */
.single .entry-content .tasty-recipes h2,
.single .entry-content .tasty-recipes h3,
.single .entry-content .tasty-recipes h4 {
	color: #800000;
}

/* ===== Recipe thumbnail strip at the top of single posts. Pure-CSS horizontal
   scroll (no JS), fixed thumbnail box (zero CLS), small lazyloaded images so
   the content image keeps the LCP. ===== */
.djouza-strip {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fbf7f4;
	border-bottom: 1px solid #ecdede;
}
/* Full-width track: no max-width so it spans the whole viewport (the strip is a
   direct child of #page = full width). Side padding leaves room for the arrows
   in the gutters so they don't cover the first/last vignette. */
.djouza-strip-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding: 8px 48px;
}
/* Arrow buttons overlaid at the strip ends (desktop). The strip is sticky =
   positioned, so these resolve against it. JS hides them at each end / when
   there is nothing to scroll. */
.djouza-strip-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.djouza-strip-arrow:hover,
.djouza-strip-arrow:focus {
	color: #800000;
}
.djouza-strip-arrow[hidden] {
	display: none;
}
.djouza-strip-prev {
	left: 8px;
}
.djouza-strip-next {
	right: 8px;
}
/* Each cell: fixed width, square image LEFT + title RIGHT, vertically centered.
   Title clamped to 2 lines with ellipsis, never overflowing the cell. */
.djouza-strip-item {
	flex: 0 0 auto;
	width: 240px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	scroll-snap-align: start;
}
.djouza-strip-img {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.djouza-strip-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.3;
	color: #333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.djouza-strip-item:hover .djouza-strip-title {
	color: #800000;
}
@media (max-width: 600px) {
	.djouza-strip-track {
		padding: 6px 12px;
		gap: 10px;
	}
	.djouza-strip-item {
		width: 210px;
	}
	/* Touch scroll is the primary mode on mobile: hide the arrows. */
	.djouza-strip-arrow {
		display: none;
	}
}

/* ===== Breadcrumb above the article title (single posts), discreet, bordeaux
   category links. Renders the Rank Math breadcrumb. ===== */
.djouza-breadcrumb {
	font-size: 0.82em;
	color: #777;
	margin-bottom: 12px;
}
.djouza-breadcrumb a {
	color: #800000;
	text-decoration: none;
}
.djouza-breadcrumb a:hover {
	text-decoration: underline;
}
/* Hide the current article title (the last crumb, .last) and its preceding
   separator (the 2nd-to-last child) so the visible trail ends on the last
   category (it duplicates the H1 below). The title stays in the HTML and in the
   BreadcrumbList JSON-LD (kept complete for SEO). Single posts only (the
   .djouza-breadcrumb wrapper exists only there). */
.djouza-breadcrumb .last,
.djouza-breadcrumb .rank-math-breadcrumb p > .separator:nth-last-child(2) {
	display: none;
}

/* ===== Article tags as bordeaux buttons (end of article). font-size:0 on the
   container collapses the commas/whitespace between the inline tag links. ===== */
.single .tags-links {
	display: block;
	margin-top: 24px;
	font-size: 0;
}
.single .tags-links a {
	display: inline-block;
	font-size: 14px;
	background: #800000;
	color: #fff;
	padding: 6px 14px;
	margin: 0 6px 8px 0;
	border-radius: 4px;
	text-decoration: none;
	line-height: 1.4;
}
.single .tags-links a:hover,
.single .tags-links a:focus {
	background: #600000;
	color: #fff;
}

/* ===== Post navigation: previous left, next right, responsive. ===== */
.single .post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid #ecdede;
}
.single .post-navigation .nav-previous {
	text-align: left;
}
.single .post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}
.single .post-navigation a {
	color: #800000;
	text-decoration: none;
	font-weight: 600;
}
.single .post-navigation a:hover {
	color: #600000;
	text-decoration: underline;
}
.single .post-navigation .nav-previous a::before {
	content: "\00ab\00a0";
}
.single .post-navigation .nav-next a::after {
	content: "\00a0\00bb";
}
@media (max-width: 520px) {
	.single .post-navigation {
		flex-direction: column;
	}
	.single .post-navigation .nav-next {
		text-align: left;
		margin-left: 0;
	}
}

/* ===== Sidebar "About" widget ("Qui est Djouza"), replicated from the prod
   custom CSS (round photo, cursive intro, discreet read-more link). The border
   tone is the prod brown #8c5623 (not the bordeaux accent). ===== */
.solopine_about_widget .about-img img {
	width: 250px !important;
	max-width: 100% !important;
	/* aspect-ratio keeps the photo a PERFECT circle even when the sidebar column
	   is narrower than 250px (max-width clamps the width, aspect-ratio + height
	   auto then match the height to it -- otherwise a fixed 250px height would
	   make the clamped image a vertical oval). Reserves the box => zero CLS. */
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	margin: 0 auto !important;
	display: block !important;
	border: 4px solid #8c5623 !important;
	box-shadow: 0px 4px 12px rgba(140, 86, 35, 0.2) !important;
}
.solopine_about_widget p {
	font-family: 'Alex Brush', 'Great Vibes', 'Allura', cursive !important;
	font-size: 28px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: #111111 !important;
	word-spacing: 2px !important;
}
.solopine_about_widget .about-link-more {
	font-family: Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: bold !important;
	color: #800000 !important;
	text-decoration: underline !important;
	display: block !important;
	margin-top: 15px !important;
}

/* ===== Footer (prod structure): two centered columns + copyright bar. Rendered
   by the child (generate_before_footer_content / generate_copyright). ===== */
.djouza-footer-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 64px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 38px 20px 10px;
	text-align: center;
}
.djouza-footer-title {
	color: #800000;
	font-size: 1em;
	letter-spacing: 0.04em;
	margin: 0 0 0.9em;
}
.djouza-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.djouza-footer-col li {
	margin: 0 0 0.55em;
}
.djouza-footer-col a {
	color: #444;
	text-decoration: none;
}
.djouza-footer-col a:hover {
	color: #800000;
}
/* "Designed by Cuisinez avec Djouza" link: it sits in the dark copyright bar
   (.site-info, ~#222 background), so it must be light, not bordeaux. White +
   underline reads it as a link with strong contrast; hover to a warm gold. */
.djouza-credit a {
	color: #ffffff;
	text-decoration: underline;
}
.djouza-credit a:hover,
.djouza-credit a:focus {
	color: #e0b35c;
}
@media (max-width: 600px) {
	.djouza-footer-cols {
		gap: 28px;
		padding: 26px 16px 6px;
	}
}

/* ===== Comments section heading: branded like the article section headings
   (bordeaux #800000, bold). The text itself is the comment count, set in
   functions.php (djouza_comments_count_title). ===== */
.comments-title {
	font-weight: 700;
	color: #800000;
}