/*
Theme Name: Philippe Fiévet
Theme URI: https://philippe-fievet.be
Author: Pour Philippe Fiévet
Description: Thème sur mesure pour le site de l'écrivain Philippe Fiévet. Inspiré du site existant, au design épuré et littéraire, pensé pour fonctionner avec l'extension « PF Livres ».
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: pf-theme
*/

/* =====================================================================
   1. VARIABLES DE COULEUR
   ---------------------------------------------------------------------
   Ajustez ici les valeurs aux codes EXACTS du site actuel.
   Le reste du thème s'adapte automatiquement.
   ===================================================================== */
:root {
	--pf-bg:        #f7f3ea;  /* fond parchemin / crème          */
	--pf-surface:   #fffdf8;  /* cartes, encarts                 */
	--pf-ink:       #23271f;  /* texte principal                 */
	--pf-green-900: #16291c;  /* vert très foncé (titres, header)*/
	--pf-green-700: #244a31;  /* vert principal                  */
	--pf-green-500: #3a6b47;  /* vert clair / liens              */
	--pf-gold:      #b08a3e;  /* accent doré / ocre              */
	--pf-gold-soft: #d8c089;  /* doré clair (filets, hover)      */
	--pf-muted:     #6f7167;  /* texte secondaire                */
	--pf-line:      #e4dccb;  /* filets, bordures                */

	--pf-red:       #8c1b1b;  /* rouge couverture (header/footer)*/
	--pf-red-dark:  #6f1414;  /* rouge foncé (ombres)            */
	/* « Tranche de livre » : fines striures crème imitant les pages. */
	--pf-pages: repeating-linear-gradient( 90deg, #efe4cb 0, #efe4cb 2px, #c9b489 2px, #c9b489 3px );

	--pf-maxw:      1120px;
	--pf-radius:    10px;
	--pf-shadow:    0 18px 40px -24px rgba(22, 41, 28, .45);
	--pf-shadow-sm: 0 8px 20px -16px rgba(22, 41, 28, .55);

	/* Variables de rôle (police / taille / couleur) par zone de contenu.
	   Valeurs de base ici (= Générale) ; surchargées dynamiquement par le thème
	   (Personnaliser > Typographie et Couleurs), au :root pour Générale et sur
	   .pf-livre / .pf-extraits-section / .pf-oep-section… pour les autres zones.
	   Les blocs imbriqués héritent de la zone parente quand un réglage est vide. */
	--pf-text-font:  "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--pf-text-size:  18px;
	--pf-text-color: #23271f;

	--pf-title-font:  "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--pf-title-color: #16291c;
	/* --pf-title-size non défini par défaut : chaque balise garde sa taille. */

	--pf-sub-font:  "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--pf-sub-color: #b08a3e;
	/* --pf-sub-size non défini par défaut. */
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background-color: var(--pf-bg);
	background-image:
		radial-gradient(circle at 12% -10%, rgba(58, 107, 71, .07), transparent 42%),
		radial-gradient(circle at 100% 0%, rgba(176, 138, 62, .07), transparent 40%);
	color: var(--pf-text-color);
	font-family: var(--pf-text-font);
	font-size: var(--pf-text-size);
	font-weight: var(--pf-text-weight, 400);
	font-style: var(--pf-text-style, normal);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--pf-green-700);
	text-decoration: none;
	transition: color .2s ease;
}
a:hover { color: var(--pf-gold); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pf-title-font);
	font-weight: var(--pf-title-weight, 700);
	font-style: var(--pf-title-style, normal);
	color: var(--pf-title-color);
	line-height: 1.12;
	margin: 0 0 .5em;
	letter-spacing: .2px;
}
/* Taille : si --pf-title-size est défini (réglage de zone), il s'applique ;
   sinon chaque balise garde sa taille de thème (repli du var()). */
h1 { font-size: var(--pf-title-size, clamp(2.4rem, 5vw, 3.6rem)); }
h2 { font-size: var(--pf-title-size, clamp(1.8rem, 3.5vw, 2.6rem)); }
h3 { font-size: var(--pf-title-size, 1.4rem); }

p { margin: 0 0 1.1em; }

.pf-container {
	width: 100%;
	max-width: var(--pf-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}

.pf-eyebrow {
	font-family: var(--pf-sub-font);
	text-transform: uppercase;
	letter-spacing: .28em;
	font-size: var(--pf-sub-size, .72rem);
	font-weight: var(--pf-sub-weight, 600);
	font-style: var(--pf-sub-style, normal);
	color: var(--pf-sub-color);
	margin: 0 0 .8em;
}

/* Texte courant par zone : on redéclare police / taille / couleur sur chaque
   conteneur de zone, car les descendants héritent de la valeur calculée (et non
   de la variable). Les titres et sous-titres portent leurs propres règles
   (police/taille/couleur) et ne sont donc pas affectés. */
.pf-livre,
.pf-extraits-section, .pf-extrait-single,
.pf-oep-section, .pf-oep-single {
	font-family: var(--pf-text-font);
	font-size: var(--pf-text-size);
	font-weight: var(--pf-text-weight, 400);
	font-style: var(--pf-text-style, normal);
	color: var(--pf-text-color);
}

/* Filet décoratif sous les titres de section */
.pf-rule {
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--pf-gold), var(--pf-gold-soft));
	border: 0;
	margin: 0 0 1.6em;
}
.pf-rule.is-center { margin-inline: auto; }

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

/* =====================================================================
   3. EN-TÊTE
   ===================================================================== */
.pf-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--pf-red);
	border-bottom: 1px solid var(--pf-red-dark);
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
}
.pf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 24px;
	padding: 18px 0 22px;
}
.pf-header__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
/* Logo + nom du site côte à côte */
.pf-header__identity {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pf-brand {
	font-family: var(--pf-site-title-font, var(--pf-title-font));
	font-size: var(--pf-site-title-size, clamp(1.9rem, 3.4vw, 2.6rem));
	font-weight: var(--pf-site-title-weight, 700);
	font-style: var(--pf-site-title-style, normal);
	text-transform: uppercase;
	color: var(--pf-site-title-color, #fff);
	letter-spacing: 1px;
	line-height: 1.05;
}
.pf-brand:hover { color: var(--pf-site-title-color, #fff); }
.pf-brand__leaf { color: var(--pf-gold-soft); }
.pf-header__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.pf-header__brand .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 56px; /* surchargé par le réglage du personnalisateur */
}

/* Icônes de réseaux sociaux (header & footer) */
.pf-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	color: #fff;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pf-social a:hover {
	background: rgba(255, 255, 255, .15);
	border-color: var(--pf-gold-soft);
	color: var(--pf-gold-soft);
}
.pf-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
	display: block;
}
.pf-header__social a { width: 32px; height: 32px; }
.pf-header__social svg { width: 16px; height: 16px; }

.pf-menu {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0; padding: 0;
}
.pf-menu a {
	font-family: var(--pf-menu-font, var(--pf-text-font));
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	padding: 6px 0;
	position: relative;
}
.pf-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--pf-gold-soft);
	transition: width .25s ease;
}
.pf-menu a:hover::after,
.pf-menu .current-menu-item > a::after { width: 100%; }

.pf-nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
.pf-nav-toggle span {
	display: block;
	width: 26px; height: 2px;
	background: #fff;
	margin: 5px 0;
	transition: .25s ease;
}

/* Groupe de droite (menu + recherche + hamburger) */
.pf-header__right {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Bouton loupe */
.pf-search-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	padding: 6px;
	line-height: 0;
	display: inline-flex;
	align-items: center;
}
.pf-search-toggle:hover { color: var(--pf-gold-soft); }

/* Champ de recherche déployé à gauche de la loupe */
.pf-search-inline {
	display: flex;
	align-items: center;
}
.pf-search-inline__input {
	width: 0;
	max-width: 52vw;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #fff;
	color: var(--pf-ink);
	font-family: var(--pf-text-font);
	font-size: .95rem;
	opacity: 0;
	transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.pf-search-inline.is-open .pf-search-inline__input {
	width: 220px;
	padding: 9px 12px;
	border-color: rgba(255, 255, 255, .55);
	opacity: 1;
	margin-right: 6px;
}

/* =====================================================================
   4. HÉRO / ACCUEIL
   ===================================================================== */
.pf-hero {
	padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
	text-align: center;
}
.pf-hero h1 { font-style: italic; }
.pf-hero__video {
	max-width: 860px;
	margin: 32px auto 0;
	border-radius: var(--pf-radius);
	overflow: hidden;
	box-shadow: var(--pf-shadow);
	border: 1px solid var(--pf-line);
	background: #000;
}
.pf-hero__video video { width: 100%; display: block; }

.pf-section { padding: clamp(48px, 7vw, 88px) 0; }
.pf-section__head { text-align: center; margin-bottom: 48px; }

/* =====================================================================
   5. GRILLE DE LIVRES
   ===================================================================== */
.pf-books {
	display: grid;
	grid-template-columns: repeat(auto-fit, min(190px, 100%));
	justify-content: center;
	gap: clamp(24px, 4vw, 44px);
}
.pf-book-card { text-align: center; }
.pf-book-card__cover {
	position: relative;
	display: block;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: var(--pf-shadow);
	aspect-ratio: 2 / 3;
	background: linear-gradient(135deg, var(--pf-green-700), var(--pf-green-900));
	transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.pf-book-card__cover img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.pf-book-card__cover::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(22,41,28,.28));
	opacity: 0;
	transition: opacity .35s ease;
}
.pf-book-card:hover .pf-book-card__cover {
	transform: translateY(-8px) rotate(-.6deg);
	box-shadow: 0 28px 50px -22px rgba(22,41,28,.6);
}
.pf-book-card:hover .pf-book-card__cover::after { opacity: 1; }
.pf-book-card__title {
	font-family: var(--pf-title-font);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--pf-green-900);
	margin: 16px 0 0;
}
.pf-book-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--pf-gold-soft);
	font-family: var(--pf-title-font);
	font-style: italic;
	padding: 16px;
}

/* =====================================================================
   6. PAGE LIVRE (single)
   ===================================================================== */
/* Évite tout débordement horizontal causé par les bandes pleine largeur.
   La page livre prend la couleur d'arrière-plan (Personnaliser > Arrière-plan) :
   l'image globale du site ne transparaît plus entre les sections. */
.pf-livre {
	overflow-x: clip;
	background-color: var(--pf-cb-color, var(--pf-bg));
}

/* Espace sous la zone « Acheter en ligne ». Le padding appartient à .pf-livre-top,
   donc le fond (has-bg) le couvre et l'image va toujours jusqu'au bord, tandis que
   les tuiles d'achat ne sont plus collées au bas de l'image. */
.pf-livre-top { padding-bottom: clamp(24px, 3.5vw, 40px); }

/* Image de fond du haut de la page (jusqu'à la vidéo), à 60 % d'opacité.
   Le calque de couleur à 40 % équivaut exactement à une image à 60 %. */
.pf-livre-top.has-bg {
	background-image:
		linear-gradient( rgba(247, 243, 234, .4), rgba(247, 243, 234, .4) ),
		var(--pf-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pf-livre-hero {
	display: grid;
	grid-template-columns: 1fr minmax(0, 300px);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
	padding-top: clamp(40px, 6vw, 72px);
}
/* Texte à gauche, couverture à droite (l'ordre du HTML est inversé via order). */
.pf-livre-intro {
	order: 1;
	/* Même cadre que les extraits, fond à 80 % d'opacité. */
	background: rgba(255, 253, 248, .8);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
	padding: clamp(22px, 3vw, 34px);
}
.pf-livre-cover { order: 2; }
/* Dans la colonne de gauche, le texte de présentation remplit la largeur. */
.pf-livre-intro .pf-livre-body { max-width: none; margin: 18px 0 0; }
.pf-livre-cover img {
	width: 100%;
	border-radius: 6px;
	box-shadow: var(--pf-shadow);
}
.pf-livre-editeur {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--pf-line);
	font-size: .95rem;
	color: var(--pf-muted);
}
.pf-livre-editeur__label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--pf-gold);
	font-weight: 600;
	margin: 0 0 6px;
}
.pf-livre-editeur p { margin: 0 0 4px; }

/* « À lire aussi » : livres liés, en vignettes sous la couverture */
.pf-aussi { margin-top: 22px; text-align: center; }
.pf-aussi__label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--pf-gold);
	font-weight: 600;
	margin: 0 0 10px;
}
.pf-aussi__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.pf-aussi__item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--pf-ink);
	max-width: 150px;
}
.pf-aussi__cover {
	display: block;
	width: 120px;
	height: auto;
	border-radius: 6px;
	box-shadow: var(--pf-shadow-sm);
}
.pf-aussi__title {
	font-family: var(--pf-title-font);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}
.pf-aussi__item:hover .pf-aussi__title { color: var(--pf-gold); }

/* En-tête de catégorie : texte encadré + bouton vers un site externe */
.pf-cat-intro {
	background: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
	padding: clamp(22px, 3vw, 34px);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.pf-cat-intro > p:last-child { margin-bottom: 0; }
.pf-cat-intro__action { margin: 16px 0 0; }
.pf-articles-list { margin-top: 8px; }

/* Bloc « Auteur » : photo (+ citation dessous) à gauche, texte encadré à droite */
.pf-auteur {
	display: flex;
	gap: clamp(20px, 4vw, 40px);
	align-items: flex-start;
}
.pf-auteur__left {
	flex: 0 0 38%;
	max-width: 38%;
}
.pf-auteur__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
}
.pf-auteur__quote {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-left: 3px solid var(--pf-gold-soft);
	font-family: var(--pf-title-font);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--pf-green-900);
}
.pf-auteur__quote p { margin: 0; }
/* Texte à droite : même cadre que les extraits. */
.pf-auteur__right {
	flex: 1;
	min-width: 0;
	background: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
	padding: clamp(22px, 3vw, 34px);
}
.pf-auteur__text p:last-child { margin-bottom: 0; }
@media (max-width: 782px) {
	.pf-auteur { flex-direction: column; }
	.pf-auteur__left { flex-basis: auto; max-width: none; width: 100%; }
}

/* Un avis ... le vôtre ? */
/* « Un avis … le vôtre? » : bande pleine largeur avec la couleur d'arrière-plan. */
.pf-avis-section {
	position: relative;
	margin-top: 0;
	padding-block: clamp(32px, 5vw, 56px);
}
.pf-avis-section::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-color: var(--pf-cb-color, var(--pf-bg));
	z-index: 0;
}
.pf-avis-section > * {
	position: relative;
	z-index: 1;
}
.pf-avis-text {
	font-size: 1.12rem;
	color: var(--pf-ink);
}
.pf-avis-text a {
	color: var(--pf-green-700);
	border-bottom: 2px solid var(--pf-gold-soft);
	font-weight: 600;
}
.pf-avis-text a:hover { color: var(--pf-gold); border-color: var(--pf-gold); }

/* Acheter en ligne */
.pf-achats-section { margin-top: clamp(32px, 5vw, 56px); margin-bottom: clamp(32px, 5vw, 56px); }
.pf-achats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 18px;
}
.pf-achat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px;
	background: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
	color: var(--pf-ink);
	transition: transform .2s ease, border-color .25s ease;
}
.pf-achat:hover {
	transform: translateY(-3px);
	border-color: var(--pf-gold-soft);
	color: var(--pf-ink);
}
.pf-achat__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}
.pf-achat__img img {
	max-height: 64px;
	width: auto;
	object-fit: contain;
}
.pf-achat__nom { font-weight: 600; }
.pf-achat__version {
	font-size: .8rem;
	color: var(--pf-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}
.pf-livre-intro h1 { font-style: italic; margin-bottom: .3em; }
.pf-livre-meta {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--pf-line);
	font-size: .95rem;
	color: var(--pf-muted);
}
.pf-livre-meta li { margin-bottom: 4px; }

/* Bande pleine largeur derrière la vidéo : couleur d'arrière-plan générale
   (Personnaliser > Couleurs · Générale > Couleur de l'arrière-plan). */
.pf-livre-video-band {
	background: var(--pf-cb-color, var(--pf-bg));
	padding: clamp(40px, 6vw, 72px) 0;
	margin: 0;
}
.pf-livre-video {
	margin: 0;
	border-radius: var(--pf-radius);
	overflow: hidden;
	box-shadow: var(--pf-shadow);
	border: 1px solid rgba(255, 255, 255, .12);
	background: #000;
}
.pf-livre-video video { width: 100%; display: block; }
.pf-video-embed { line-height: 0; }
.pf-livre-video iframe,
.pf-video-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}
.pf-livre-video__credit {
	text-align: center;
	font-family: var(--pf-vcredit-font, var(--pf-text-font));
	font-size: var(--pf-vcredit-size, .85rem);
	color: var(--pf-vcredit-color, var(--pf-gold-soft));
	font-style: italic;
	margin: 14px 0 0;
}
/* Bloc « Vidéo du dernier livre » : sur fond clair, crédit plus contrasté par
   défaut ; la couleur configurée (si définie) prend le dessus. */
.pf-video-livre .pf-livre-video__credit { color: var(--pf-vcredit-color, var(--pf-muted)); }

.pf-livre-body { max-width: 760px; }
.pf-livre-body p:first-letter { /* douce capitale */ }

/* Extraits */
.pf-extraits-section { padding-block: clamp(28px, 4vw, 48px); }
/* Image de fond de la zone des extraits, pleine largeur, à 60 % d'opacité. */
.pf-extraits-section.has-bg {
	position: relative;
	padding-block: clamp(28px, 4vw, 48px);
}
.pf-extraits-section.has-bg::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-image:
		linear-gradient( rgba(247, 243, 234, .4), rgba(247, 243, 234, .4) ),
		var(--pf-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
.pf-extraits-section.has-bg > * {
	position: relative;
	z-index: 1;
}
.pf-extraits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 32px;
}
.pf-extrait {
	background: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	padding: 26px 26px 22px;
	box-shadow: var(--pf-shadow-sm);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
.pf-extrait::before {
	content: "\201C"; /* guillemet ouvrant */
	position: absolute;
	top: -18px; right: 14px;
	font-family: var(--pf-title-font);
	font-size: 6rem;
	color: var(--pf-gold-soft);
	opacity: .5;
	line-height: 1;
}

/* Extrait avec image de mise en avant : image à gauche, contenu à droite */
.pf-extrait--has-media {
	flex-direction: row;
	align-items: stretch;
	gap: 22px;
}
.pf-extrait__media {
	flex: 0 0 130px;
	align-self: flex-start;
	width: 130px;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	overflow: hidden;
	background: var(--pf-gold-soft);
}
.pf-extrait__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pf-extrait__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

@media screen and (max-width: 600px) {
	.pf-extrait--has-media { flex-direction: column; }
	.pf-extrait__media { width: 100%; aspect-ratio: 16 / 9; }
}
.pf-extrait__tag {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--pf-gold);
	font-weight: 600;
	margin-bottom: 12px;
}
.pf-extrait__text {
	font-style: italic;
	color: var(--pf-ink);
	margin-bottom: 18px;
	flex: 1;
}
.pf-extrait__link {
	align-self: flex-start;
	font-family: var(--pf-text-font);
	font-weight: 600;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--pf-green-700);
	border-bottom: 2px solid var(--pf-gold-soft);
	padding-bottom: 2px;
}
.pf-extrait__link:hover { border-color: var(--pf-gold); color: var(--pf-gold); }

.pf-extrait__title {
	font-family: var(--pf-title-font);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 6px;
}
.pf-extrait__title a { color: var(--pf-ink); }
.pf-extrait__title a:hover { color: var(--pf-gold); }

/* Groupe de liens (Lire l'extrait / Numilog) sous un extrait */
.pf-extrait__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Page publique d'un extrait */
.pf-container--narrow { max-width: 820px; }
.pf-extrait-single { padding: clamp(40px, 6vw, 80px) 0; }
/* Cadre des pages Extrait / On en parle (comme le bloc de présentation du livre). */
.pf-single-card {
	background: rgba(255, 253, 248, .85);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
	padding: clamp(24px, 4vw, 44px);
}
.pf-extrait-head { text-align: center; margin-bottom: 8px; }
.pf-extrait-head .pf-extrait__tag { margin-top: 10px; }
.pf-extrait-video { margin: 24px 0; }
.pf-extrait-body { margin-top: 8px; }
.pf-extrait-body blockquote, .pf-extrait-body p { font-size: 1.1rem; }

/* Bouton générique */
.pf-btn {
	display: inline-block;
	background: var(--pf-green-700);
	color: #fff;
	font-family: var(--pf-text-font);
	font-weight: 600;
	font-size: var(--pf-btn-size, .85rem);
	letter-spacing: .08em;
	padding: 12px 26px;
	border-radius: 999px;
	transition: background .25s ease, color .2s ease, border-color .25s ease, transform .2s ease;
}
.pf-btn:hover { background: var(--pf-green-900); color: #fff; transform: translateY(-2px); }
/* Variantes de bouton */
.pf-btn--sm { padding: 8px 18px; font-size: .78rem; }
.pf-btn--ghost {
	background: transparent;
	color: var(--pf-green-700);
	border: 1px solid var(--pf-gold-soft);
}
.pf-btn--ghost:hover {
	background: transparent;
	color: var(--pf-gold);
	border-color: var(--pf-gold);
}

/* =====================================================================
   « On en parle »
   ===================================================================== */
/* Section « On en parle » : bande pleine largeur avec fond distinct. */
.pf-oep-section {
	margin: 0;
	padding-block: clamp(40px, 6vw, 72px);
	/* Fond = image d'arrière-plan définie dans Personnaliser > Arrière-plan. */
	background-color: transparent;
	background-image: var(--pf-cb-image, none);
	background-position: center;
	background-repeat: repeat;
	/* Sort du conteneur centré pour occuper toute la largeur. */
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
/* Le contenu de la section reste aligné sur la largeur du conteneur. */
.pf-oep-inner {
	max-width: var(--pf-maxw);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}
.pf-oep-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 32px;
}
.pf-oep {
	background: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	padding: 24px;
	box-shadow: var(--pf-shadow-sm);
	display: flex;
	flex-direction: column;
}
.pf-oep--has-media {
	flex-direction: row;
	align-items: flex-start;
	gap: 22px;
}
.pf-oep__media {
	flex: 0 0 150px;
	width: 150px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--pf-gold-soft);
}
.pf-oep__img { display: block; width: 100%; height: auto; }
.pf-oep__content { flex: 1; min-width: 0; }
.pf-oep__date {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--pf-muted);
	margin-bottom: 6px;
}
.pf-oep__title {
	font-family: var(--pf-title-font);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
}
.pf-oep__title a { color: var(--pf-ink); }
.pf-oep__title a:hover { color: var(--pf-gold); }
.pf-oep__comment {
	font-style: italic;
	color: var(--pf-green-700);
	margin: 0 0 8px;
}
.pf-oep__text { color: var(--pf-ink); margin: 0 0 16px; }
.pf-oep__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Page « On en parle » */
.pf-oep-single { padding: clamp(40px, 6vw, 80px) 0; }
.pf-oep-head { text-align: center; }
.pf-oep-head .pf-oep__date { margin-top: 8px; }
.pf-oep-head .pf-oep__comment { margin-top: 10px; }
.pf-oep-single__media {
	margin: 0 0 24px;
	border-radius: 6px;
	overflow: hidden;
}
.pf-oep-single__img { display: block; width: 100%; height: auto; }
.pf-oep-body { margin-bottom: 24px; }

@media screen and (max-width: 600px) {
	.pf-oep--has-media { flex-direction: column; }
	.pf-oep__media { width: 100%; }
}

.pf-back {
	display: inline-block;
	margin-top: 48px;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* =====================================================================
   7. PAGES & ARTICLES
   ===================================================================== */
.pf-page { padding: clamp(40px, 6vw, 80px) 0; overflow-x: clip; }
.pf-page__header { text-align: center; margin-bottom: 48px; }
/* Le contenu des pages occupe toute la largeur du conteneur (comme la page livre / l'accueil). */
.pf-page .pf-prose { max-width: none; }
.pf-page .pf-prose > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}
.pf-page .pf-prose > .alignwide {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	padding-inline: clamp(24px, 6vw, 96px);
}

/* Page d'accueil statique (contenu libre + blocs). Pas de padding bas : il
   s'additionnait à la marge du footer et créait un grand vide en fin de page. */
.pf-front-page__content { padding-block: clamp(40px, 6vw, 80px) 0; }
.pf-front-page__content > * { margin-block: 1.2em; }
/* Bloc « Vidéo du dernier livre » : moins d'espace au-dessus du titre. */
.pf-front-page__content > .pf-video-livre { margin-top: .3em; }
.pf-video-livre .pf-section__head { margin-bottom: 28px; }
/* L'espace en dessous des blocs « Vidéo du dernier livre » et « Grille des
   livres » est réglable par bloc (attribut « Espace en dessous »). */
/* Support des blocs « pleine largeur » et « large » dans la page d'accueil. */
.pf-front-page__content > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}
.pf-front-page__content > .alignwide {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	padding-inline: clamp(24px, 6vw, 96px);
}
.pf-grille-livres__empty { text-align: center; color: var(--pf-muted); }
.pf-prose { max-width: 760px; margin-inline: auto; }
.pf-prose img { border-radius: 6px; margin: 1.5em 0; }
.pf-prose h2, .pf-prose h3 { margin-top: 1.6em; }
.pf-prose blockquote {
	border-left: 3px solid var(--pf-gold-soft);
	margin: 1.5em 0;
	padding: 4px 0 4px 24px;
	font-style: italic;
	color: var(--pf-muted);
}

/* =====================================================================
   8. PIED DE PAGE
   ===================================================================== */
.pf-footer {
	margin-top: clamp(40px, 5vw, 72px);
	background: var(--pf-red);
	color: var(--pf-footer-color, #fff);
	font-family: var(--pf-footer-font, var(--pf-text-font));
	padding: 14px 0 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Sur la page d'accueil, on réduit l'espace avant le pied de page
   (les blocs ont déjà leur propre marge basse). */
.home .pf-footer { margin-top: clamp(28px, 3vw, 48px); }
.pf-footer a { color: var(--pf-gold-soft); }
.pf-footer a:hover { color: #fff; }

/* Footer sur une seule colonne, tout centré ; menu sous le logo. */
.pf-footer__cols {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}
.pf-footer__group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 48px);
}
.pf-footer__copyright,
.pf-footer__text {
	font-size: var(--pf-footer-size, .9rem);
	color: rgba(255, 255, 255, .85);
	max-width: 240px;
}
.pf-footer__copyright p,
.pf-footer__text p { margin: 0; }
.pf-footer__logo { line-height: 0; }
.pf-footer__logo .custom-logo { display: block; width: auto; height: auto; max-height: 70px; margin: 0 auto; }
.pf-footer__name {
	font-family: var(--pf-footer-font, var(--pf-title-font));
	font-size: 1.7rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pf-footer-color, #fff);
	line-height: 1;
}

.pf-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	font-size: var(--pf-footer-size, .9rem);
	letter-spacing: .04em;
}
.pf-footer__menu a {
	color: #fff;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.pf-footer__menu a:hover { color: #fff; border-bottom-color: var(--pf-gold-soft); }
.pf-footer__menu .current-menu-item > a { color: var(--pf-gold-soft); }

/* =====================================================================
   9. RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
	.pf-livre-hero { grid-template-columns: 1fr; }
	/* En une colonne, la couverture repasse au-dessus du texte. */
	.pf-livre-cover { order: 0; max-width: 260px; margin-inline: auto; }
	.pf-livre-intro { order: 1; }
}
@media (max-width: 720px) {
	body { font-size: 17px; }
	.pf-nav-toggle { display: block; }
	.pf-menu {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--pf-red);
		border-bottom: 1px solid var(--pf-red-dark);
		box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .5);
		padding: 8px 24px 20px;
		display: none;
	}
	.pf-menu.is-open { display: flex; }
	.pf-menu a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
	.pf-menu a::after { display: none; }
}