/*
Theme Name: Palingénésie
Theme URI: https://palingenesie.com
Description: Thème enfant GeneratePress pour le site Palingénésie.
Author: Alinoa
Author URI: https://alinoa.be
Template: generatepress
Version: 1.1.10
Text Domain: palingenesie
*/

/**
 * Header — logo typographique.
 *
 * La production utilise le titre du site comme logo texte avec Cormorant
 * Garamond. On garde donc le nom WordPress en texte, mais on le stylise pour
 * retrouver cette présence éditoriale sans recréer une image.
 */
.site-branding .main-title {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.site-branding .main-title a,
.site-branding .main-title a:hover,
.site-branding .main-title a:focus {
	color: #333;
	text-decoration: none;
}

.gb-text-palin-footer-logo {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
}

.gb-text-palin-footer-logo a,
.gb-text-palin-footer-logo a:hover,
.gb-text-palin-footer-logo a:focus {
	color: var(--base-3);
	text-decoration: none;
}

.gb-text-palin-footer-tagline {
	max-width: 34rem;
	color: var(--base-3);
	font-size: .8125rem;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .075em;
	text-align: center;
	text-transform: uppercase;
	opacity: .78;
}

.gb-element-palin-footer-branding {
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.gb-element-c471d0fb .gb-element-9eeddf5b {
	justify-content: center;
	width: 100%;
}

@media (max-width: 767px) {
	.gb-element-c471d0fb .gb-element-9eeddf5b {
		align-items: center;
	}
}

/**
 * Accueil — hero principal.
 *
 * L'image du hero est très détaillée. On augmente légèrement l'overlay noir
 * pour préserver la lisibilité du titre, de l'accroche et des vignettes sans
 * transformer l'image en simple aplat.
 */
.home .gb-element-482720dc {
	background-color: rgba(11, 11, 18, .68);
}

.palin-hero-posts {
	position: relative;
	z-index: 1;
	max-width: calc(var(--gb-container-width) + 64px);
	margin-right: auto;
	margin-left: auto;
	padding-right: 2rem;
	padding-bottom: 5rem;
	padding-left: 2rem;
}

.palin-hero-posts__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 3rem;
	row-gap: 2rem;
	padding-top: 3rem;
	border-top: 1px solid var(--base-3);
}

.palin-hero-posts__item {
	min-width: 0;
}

.palin-hero-posts__link {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	color: var(--base-3);
	text-decoration: none;
}

.palin-hero-posts__link:hover,
.palin-hero-posts__link:focus {
	color: var(--base);
}

.palin-hero-posts__media {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 2px;
}

.palin-hero-posts__image {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.palin-hero-posts__title {
	min-width: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.palin-hero-posts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.palin-hero-posts {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}

	.palin-hero-posts__list {
		grid-template-columns: 1fr;
	}
}

/**
 * Pages et articles standards — respiration entre titre et contenu.
 *
 * Les pages qui ne passent pas par un hero GenerateBlocks utilisent le rendu
 * natif GeneratePress. Par défaut, le contenu peut être trop proche du titre.
 */
.page:not(.home) .inside-article > .entry-header + .entry-content,
.single .inside-article > .entry-header + .entry-content {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/**
 * Heroes GeneratePress/GenerateBlocks — respiration avant le contenu.
 *
 * Les titres de pages, archives et résultats de recherche sont injectés via
 * des Elements GeneratePress. On ajoute donc l'espace sur ces heroes, pas sur
 * le contenu natif.
 */
.gb-element-f0c6758e,
.gb-element-8c8d8b5f,
.gb-element-7a842ee7 {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/**
 * Accueil — cartes d'articles GenerateBlocks.
 *
 * Le starter Archive laisse certaines images de boucle se dimensionner selon
 * leur taille intrinsèque. Sur les cartes larges, elles peuvent alors déborder
 * horizontalement hors de leur carte. On verrouille donc le cadre image en 16/9
 * et on force l'image à remplir ce cadre sans dépasser.
 */
.home .gb-loop-item-bfca2c91 {
	overflow: hidden;
}

.home .gb-loop-item-bfca2c91 .gb-element-7efc952d {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.home .gb-loop-item-bfca2c91 .gb-media-a80a97dd {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Archives — grille de contenu + sidebar.
 *
 * La colonne principale du template archive contient des cards avec de grands
 * médias et plusieurs badges de catégories. Sans `min-width: 0`, CSS Grid
 * laisse cette colonne prendre sa largeur intrinsèque et pousser sous la
 * sidebar.
 */
.archive .gb-element-5e54ba54 > *,
.archive .gb-element-9333bc15,
.archive .gb-looper-e8a19db8,
.archive .gb-loop-item-bfca2c91 {
	min-width: 0;
}

.archive .gb-loop-item-bfca2c91 {
	overflow: hidden;
}

.archive .gb-loop-item-bfca2c91 .gb-element-7efc952d {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.archive .gb-loop-item-bfca2c91 .gb-media-a80a97dd {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.home .gb-loop-item-bfca2c91 .gb-element-7efc952d > a,
.archive .gb-loop-item-bfca2c91 .gb-element-7efc952d > a {
	display: block;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.home .gb-loop-item-bfca2c91 .gb-element-12b5617a,
.archive .gb-loop-item-bfca2c91 .gb-element-12b5617a {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.home .gb-loop-item-bfca2c91 .gb-element-12b5617a a,
.archive .gb-loop-item-bfca2c91 .gb-element-12b5617a a {
	pointer-events: auto;
}

/**
 * Accueil — étiquettes de catégories sur les cards.
 *
 * Le bloc GenerateBlocks affiche toutes les catégories sur une seule ligne.
 * Dès qu'un article a 4 ou 5 catégories, les badges débordent ou compriment
 * fortement le premier badge. On force donc une grille de 3 badges par ligne.
 */
.home .gb-loop-item-bfca2c91 .gb-element-12b5617a > .gb-text,
.archive .gb-loop-item-bfca2c91 .gb-element-12b5617a > .gb-text {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: .5rem;
	align-items: start;
	justify-content: start;
	max-width: 100%;
	overflow: visible;
}

/**
 * Articles seuls — sidebar native GeneratePress.
 *
 * Les articles utilisent maintenant la sidebar native du thème, activée dans
 * les réglages GeneratePress. On garde ici seulement l'habillage côté thème
 * enfant pour rapprocher son rendu de la sidebar du template d'archive.
 */
.single.right-sidebar .site-content {
	display: grid;
	grid-template-columns: minmax(0, 800px) minmax(16rem, 20rem);
	column-gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
	justify-content: center;
	max-width: 1364px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}

.single.right-sidebar .content-area,
.single.right-sidebar .is-right-sidebar {
	float: none;
	width: auto;
}

.single.right-sidebar .content-area,
.single.right-sidebar .site-main,
.single.right-sidebar article.dynamic-content-template {
	display: contents;
}

.single.right-sidebar article.dynamic-content-template > .gb-element-383d7110 {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
}

.single.right-sidebar article.dynamic-content-template > .gb-element-5bd40b80,
.single.right-sidebar .comments-area {
	grid-column: 1;
}

.single.right-sidebar .is-right-sidebar {
	grid-column: 2;
	grid-row: 2 / span 99;
	align-self: start;
	margin-top: 4rem;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.single .gb-text-f065b849 {
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.single .gb-text-f065b849 a {
	white-space: nowrap;
}

.single .inside-right-sidebar {
	position: sticky;
	top: 2rem;
}

.single .inside-right-sidebar .widget {
	margin-bottom: 2rem;
	font-size: .9375rem;
	line-height: 1.45;
}

.single .inside-right-sidebar .widget-title {
	margin-bottom: 1.25rem;
	color: var(--contrast-3);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.single .inside-right-sidebar ul {
	margin-left: 0;
	list-style: none;
}

.single .inside-right-sidebar li {
	margin-bottom: .75rem;
}

.single .inside-right-sidebar a {
	color: var(--accent);
	text-decoration: none;
}

.single .inside-right-sidebar a:hover,
.single .inside-right-sidebar a:focus {
	color: var(--accent-2);
}

.single .inside-right-sidebar .search-form {
	display: flex;
	gap: .5rem;
}

.single .inside-right-sidebar .search-field {
	min-width: 0;
}

/**
 * Articles seuls — encart newsletter.
 *
 * L'encart repris de l'accueil est pensé comme un module plus large. Sur un
 * article seul, on le ramène sur la largeur de la colonne éditoriale pour
 * éviter qu'il déborde visuellement vers la sidebar.
 */
.single.right-sidebar .site-main > .gb-element-7df55512 {
	grid-column: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 736px;
	margin: clamp(3rem, 6vw, 5rem) auto;
}

@media (max-width: 768px) {
	.single.right-sidebar .site-content {
		display: block;
		padding-right: 0;
		padding-left: 0;
	}

	.single.right-sidebar .content-area,
	.single.right-sidebar .site-main,
	.single.right-sidebar article.dynamic-content-template {
		display: block;
	}

	.single.right-sidebar .is-right-sidebar {
		margin-top: 0;
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}

	.single .inside-right-sidebar {
		position: static;
	}
}

/**
 * Articles seuls — commentaires natifs WordPress.
 *
 * Le template d'article est construit en GenerateBlocks avec un contenu centré
 * sur 800px. Les commentaires, eux, sont injectés ensuite par GeneratePress et
 * n'héritent pas de ce conteneur. On les réaligne donc explicitement sur la
 * colonne éditoriale.
 */
.single .comments-area {
	max-width: 800px;
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	padding: 0 2rem 4rem;
}

.single .comments-title,
.single .comment-reply-title {
	margin-bottom: 2rem;
	color: var(--contrast-2);
	font-size: clamp(1.375rem, 2vw, 1.875rem);
	line-height: 1.2;
}

.single .comment-list {
	margin: 0;
	list-style: none;
}

.single .comment-list .comment {
	margin-bottom: 2rem;
}

.single .comment-body {
	padding: 1.5rem;
	background: var(--base-2);
	border-radius: 2px;
}

.single .comment-meta {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.single .comment-meta .avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.single .comment-author .fn {
	color: var(--contrast-2);
	font-style: normal;
	font-weight: 700;
}

.single .comment-metadata {
	color: var(--contrast-3);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.single .comment-content {
	font-size: 1rem;
	line-height: 1.6;
}

.single .comment-content p:last-child {
	margin-bottom: 0;
}

.single .comment-reply-link {
	display: inline-block;
	margin-top: 1rem;
	color: var(--accent);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
}

.single .comment-reply-link:hover,
.single .comment-reply-link:focus {
	color: var(--accent-2);
}

.single .comment-respond {
	margin-top: 3rem;
}

.single .comment-form textarea,
.single .comment-form input:not([type="checkbox"]):not([type="submit"]) {
	width: 100%;
}

.single .comment-form .submit {
	background-color: var(--accent);
	color: var(--base-3);
}

.single .comment-form .submit:hover,
.single .comment-form .submit:focus {
	background-color: var(--accent-2);
	color: var(--base-3);
}

@media (max-width: 768px) {
	.single .comments-area {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}

	.single .comment-meta {
		align-items: flex-start;
	}
}
