/**
 * Flow with Ludo - feuille de styles principale.
 *
 * Rempli progressivement au fil des étapes (header à l'étape 3, boucle
 * d'articles à l'étape 4, sidebar à l'étape 5, footer à l'étape 6).
 */

/* -----------------------------------------------------------------------
   Couleurs de marque - extraites du logo (assets/logo/flow-with-ludo-logo.jpg
   et cube-icon.png). Les valeurs vert/jaune/foncé sont surchargeables depuis
   le Customizer WordPress (voir inc/customizer.php, étape 7).
   ----------------------------------------------------------------------- */
:root {
	--color-green: #1a9657;         /* face avant du cube (vert principal, CTA, liens) */
	--color-green-light: #5bce81;   /* face dessus du cube (accents, hover, dégradés) */
	--color-yellow: #fed942;        /* face droite du cube (accent, mise en avant) */
	--color-dark: #2b3a41;          /* texte "with Ludo" (titres, texte foncé) */

	--color-text: #4a5568;          /* texte courant (gris moyen) */
	--color-text-muted: #718096;    /* méta : date, auteur, temps de lecture */

	--color-bg: #f7f9f7;            /* fond de page */
	--color-bg-white: #ffffff;      /* cartes, sidebar, header */
	--color-border: #e2e8f0;        /* séparateurs, bordures de cartes */

	--gradient-brand: linear-gradient(135deg, var(--color-green) 0%, var(--color-yellow) 100%);

	--font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container-max-width: 1200px;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	background-image: url('../images/bkgd.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
}

@media (max-width: 768px) {
	body {
		/* background-attachment: fixed est coûteux/mal supporté sur mobile. */
		background-attachment: scroll;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-dark);
}

a {
	color: var(--color-green);
}

a:hover,
a:focus {
	color: var(--color-green-light);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--color-dark);
	color: #fff;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------
   Header : logo, tagline, menu horizontal / burger mobile (étape 3)
   ----------------------------------------------------------------------- */

.site-header {
	background-color: var(--color-bg-white);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-branding__logo {
	flex-shrink: 0;
	display: block;
	line-height: 0;
}

.site-branding__logo img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.site-branding__text {
	min-width: 0;
}

.site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
}

.site-title a {
	color: var(--color-dark);
}

.site-title a:hover,
.site-title a:focus {
	color: var(--color-green-light);
}

.site-title__accent {
	color: var(--color-green);
}

.site-title a:hover .site-title__accent,
.site-title a:focus .site-title__accent {
	color: var(--color-green-light);
}

.site-tagline {
	margin: 2px 0 0;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--color-text-muted);
}

/* Bouton burger : visible uniquement sous 768px. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background-color: var(--color-dark);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.main-navigation .primary-menu {
	display: flex;
	align-items: center;
	gap: 24px;
}

.main-navigation .primary-menu > li > a {
	display: inline-block;
	padding: 6px 2px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-dark);
	border-bottom: 2px solid transparent;
}

.main-navigation .primary-menu > li > a:hover,
.main-navigation .primary-menu > li > a:focus {
	color: var(--color-green);
}

.main-navigation .primary-menu > li.current-menu-item > a,
.main-navigation .primary-menu > li.current_page_item > a {
	color: var(--color-green);
	border-bottom-color: var(--color-green);
}

@media (max-width: 768px) {
	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		display: none;
		width: 100%;
		order: 3;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation .primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 12px 0 4px;
		border-top: 1px solid var(--color-border);
	}

	.main-navigation .primary-menu > li {
		width: 100%;
	}

	.main-navigation .primary-menu > li > a {
		display: block;
		padding: 10px 4px;
	}
}

/* -----------------------------------------------------------------------
   Contenu principal : structure accueil/archive + sidebar (étape 4)
   ----------------------------------------------------------------------- */

.site-content-wrapper {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 32px 24px 64px;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.site-content-wrapper--full {
	display: block;
	max-width: 760px;
}

.site-main {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.archive-header {
	margin-bottom: 4px;
}

.archive-title {
	margin: 0 0 6px;
	font-size: 1.4rem;
}

.archive-description {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

@media (max-width: 900px) {
	.site-content-wrapper {
		flex-direction: column;
	}
}

/* -----------------------------------------------------------------------
   Carte article (boucle accueil / archives / recherche)
   ----------------------------------------------------------------------- */

.post-card {
	display: flex;
	gap: 20px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
}

.post-card:last-child {
	border-bottom: none;
}

.post-card__thumbnail {
	flex-shrink: 0;
	display: block;
	width: 220px;
	aspect-ratio: 16 / 10;
	max-height: 250px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	background-color: var(--color-border);
}

.post-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-card__meta-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.post-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.post-card__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.post-card__badge:hover,
.post-card__badge:focus {
	color: #fff;
	opacity: 0.85;
}

.post-card__reading-time {
	flex-shrink: 0;
	font-size: 0.78rem;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.post-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--color-dark);
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--color-green);
}

.post-card__excerpt {
	margin: 0;
	color: var(--color-text);
	font-size: 0.92rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__byline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.post-card__avatar {
	border-radius: 50%;
	display: block;
}

.post-card__author a {
	color: var(--color-text-muted);
	font-weight: 600;
}

.post-card__author a:hover,
.post-card__author a:focus {
	color: var(--color-green);
}

@media (max-width: 560px) {
	.post-card {
		flex-direction: column;
	}

	.post-card__thumbnail {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------
   Pagination ("Older posts" + numéros de page)
   ----------------------------------------------------------------------- */

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-dark);
}

.pagination .page-numbers.current {
	background-color: var(--color-green);
	border-color: var(--color-green);
	color: #fff;
}

.pagination .page-numbers:hover:not(.current) {
	border-color: var(--color-green);
	color: var(--color-green);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* -----------------------------------------------------------------------
   Aucun résultat (recherche / archive vide)
   ----------------------------------------------------------------------- */

.no-results h1 {
	font-size: 1.3rem;
}

/* -----------------------------------------------------------------------
   Sidebar : Upcoming Events, Catégories, Last Posts (étape 5)
   ----------------------------------------------------------------------- */

.widget-area {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.widget-area .widget {
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 20px;
}

.widget-area .widget-title {
	margin: 0 0 14px;
	font-size: 1rem;
}

.widget-area .widget-empty {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.widget-area .widget-view-all {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-green);
}

.widget-area .widget-view-all:hover,
.widget-area .widget-view-all:focus {
	color: var(--color-green-light);
}

@media (max-width: 900px) {
	.widget-area {
		width: 100%;
	}
}

/* Upcoming events */

.upcoming-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.upcoming-event + .upcoming-event {
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

/* Sortie d'un plugin d'événements externe (ex. shortcode EventOn) : on ne
   restyle pas son balisage, on évite juste qu'il déborde de la sidebar. */
.upcoming-events-shortcode {
	max-width: 100%;
	overflow-x: auto;
}

.upcoming-event__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background-color: #9146ff;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.upcoming-event__icon {
	font-size: 0.55rem;
}

.upcoming-event__title {
	margin: 0 0 4px;
	font-size: 0.92rem;
	font-weight: 600;
}

.upcoming-event__title a {
	color: var(--color-dark);
}

.upcoming-event__title a:hover,
.upcoming-event__title a:focus {
	color: var(--color-green);
}

.upcoming-event__datetime {
	margin: 0;
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

/* Catégories, stylées en pastilles. Deux balisages possibles selon que
   l'admin utilise le widget classique "Categories" (widget_categories)
   ou le bloc Gutenberg "Liste des catégories" (wp-block-categories-list) —
   dans ce dernier cas le compteur est un texte hors du lien, donc c'est
   le <li> entier qui porte le style de pastille, pas seulement le <a>. */

.widget_categories ul,
.wp-block-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.widget_categories li,
.wp-block-categories-list li {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-dark);
	white-space: nowrap;
}

.widget_categories li a,
.wp-block-categories-list li a {
	color: inherit;
}

.widget_categories li:hover,
.wp-block-categories-list li:hover {
	border-color: var(--color-green);
	color: var(--color-green);
}

/* -----------------------------------------------------------------------
   Footer (étape 6)
   ----------------------------------------------------------------------- */

.site-footer {
	margin-top: 40px;
	border-top: 1px solid var(--color-border);
}

.site-footer__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.site-footer__brand {
	margin: 0;
	font-size: 0.82rem;
}

.site-footer__brand a {
	color: var(--color-text-muted);
	font-weight: 600;
}

.site-footer__brand a:hover,
.site-footer__brand a:focus {
	color: var(--color-green);
}

/* -----------------------------------------------------------------------
   Contenu d'article : listes (puces/numéros) et citations (blockquote)
   ----------------------------------------------------------------------- */

/* Le reset global de style.css (ul[class], ol[class] { list-style: none })
   vise les listes de navigation (menu, widgets), mais WordPress ajoute une
   classe ("wp-block-list") aux listes du contenu des articles aussi : on
   restaure ici le rendu normal (puces/numéros, indentation) à l'intérieur
   du contenu. */
.entry-content ul,
.entry-content ol {
	list-style: revert;
	margin: revert;
	padding: revert;
}

.entry-content blockquote {
	margin: 20px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--color-green);
	border-radius: 8px;
	background-color: #eaf7ef; /* repli pour les navigateurs sans color-mix() */
	background-color: color-mix(in srgb, var(--color-green) 8%, white);
	color: var(--color-green);
	font-style: normal;
}

.entry-content blockquote p {
	margin: 0;
}

.entry-content blockquote p + p {
	margin-top: 10px;
}

.entry-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 24px 0;
	overflow-x: auto;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	font-size: 0.92rem;
}

.entry-content thead th {
	background-color: var(--color-green);
	color: #fff;
	text-align: left;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.entry-content tbody td,
.entry-content tbody th {
	padding: 12px 16px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
	vertical-align: top;
}

.entry-content tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) th {
	background-color: #eef8f1; /* repli pour les navigateurs sans color-mix() */
	background-color: color-mix(in srgb, var(--color-green) 5%, white);
}

.entry-content tbody tr:hover td,
.entry-content tbody tr:hover th {
	background-color: color-mix(in srgb, var(--color-green) 10%, white);
}