/*
 * main.css — styles du thème « Les Fables ».
 *
 * Consomme les variables de tokens.css (chargé avant, cf. functions.php).
 *
 * Ces règles vivaient dans la chaîne « styles.css » de theme.json. Elles en ont
 * été sorties : ce champ est injecté en CSS inline sur CHAQUE page vue (jamais
 * mis en cache) et n'offre ni coloration syntaxique, ni commentaires, ni
 * media queries lisibles. theme.json reste la source des *presets*, ce fichier
 * porte les *règles*.
 *
 * Portage de _dev/accueil-v3.html : accompli phase 4, section par section (voir
 * bas de fichier, à partir de « PAGE D'ACCUEIL »). Les sections propres à d'autres
 * pages (Contact, Mentions légales…) suivent la même logique : classes préfixées
 * lf-, jamais de couleur en dur quand un token de tokens.css existe.
 */

/* --- Navigation ---------------------------------------------------------- */

.wp-block-navigation a {
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wp-block-navigation a:hover {
	/* !important : le bloc Navigation pose ses couleurs en style inline. */
	color: var(--gold-lt) !important;
}

/* --- Liens du contenu ----------------------------------------------------- */

/*
 * theme.json ne déclare aucune couleur pour « elements.link » : les liens
 * rédactionnels tombaient donc sur le bleu par défaut du navigateur, en plein
 * milieu d'une charte crème et or.
 *
 * La règle est posée ICI et non dans theme.json à dessein : « elements.link »
 * s'appliquerait à TOUT le site, y compris aux liens de navigation de l'en-tête
 * et du pied de page, qui portent déjà leurs propres couleurs. On borne donc au
 * contenu éditorial, et on exclut les boutons (qui sont des liens habillés).
 */
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--earth);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--border);
	transition: color 160ms ease-out, text-decoration-color 160ms ease-out;
}

.wp-block-post-content a:not(.wp-element-button):hover {
	color: var(--gold);
	text-decoration-color: var(--gold);
}

/* Sur fond sombre, la terre n'a plus assez de contraste : on passe à l'or clair. */
.wp-block-post-content .has-encre-background-color a:not(.wp-element-button) {
	color: var(--gold-lt);
}

/* --- Citation ------------------------------------------------------------ */

.wp-block-quote {
	position: relative;
	border-left: none;
	padding-left: 30px;
}

.wp-block-quote::before {
	content: '\201C';
	position: absolute;
	left: -10px;
	top: -20px;
	font-family: var(--font-display);
	font-size: 6rem;
	line-height: 1;
	color: var(--gold-lt);
}

/* --- Portrait de La Fontaine --------------------------------------------- */

.portrait-lafontaine img {
	border: 3px solid var(--border);
	box-shadow: 6px 6px 0 var(--parchment);
}

/* --- Bandeau d'informations (3 colonnes) --------------------------------- */

@media (max-width: 768px) {
	.colonnes-info .wp-block-column {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
}

/* ==========================================================================
   PAGE D'ACCUEIL — portage de _dev/accueil-v3.html (phase 4)
   ========================================================================== */

/* --- Ornements (dividers ✦ / ❧) ------------------------------------------- */

.lf-ornament {
	padding: 10px 0;
	color: var(--gold);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	user-select: none;
}

/* --- Héro --------------------------------------------------------------------
 * Les silhouettes SVG décoratives (corbeau/renard/cigale, opacité .18) et la
 * texture de bruit du fond (SVG en data-URI, opacité .035) de la maquette sont
 * volontairement omises — voir la note en tête de patterns/accueil.php. L'anneau
 * décoratif, bien plus visible, est conservé en CSS pur (::before/::after),
 * sans balisage supplémentaire.
 * -------------------------------------------------------------------------- */

.lf-hero {
	position: relative;
}

.lf-hero::before,
.lf-hero::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

.lf-hero::before {
	width: min(680px, 85vw);
	height: min(680px, 85vw);
	border: 1px solid rgba(201, 168, 76, 0.25);
}

.lf-hero::after {
	width: calc(min(680px, 85vw) - 28px);
	height: calc(min(680px, 85vw) - 28px);
	border: 1px solid rgba(201, 168, 76, 0.15);
}

.lf-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	text-align: center;
}

/* Titre du héro : bloc wp:html (3 lignes à styles distincts, impossibles à
   porter en attributs natifs — cf. la règle wrapper-vs-inner de la compétence
   wordpress-block-content : une classe sur un span interne exige core/html). */
.lf-hero-title {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 10px;
}

.lf-hero-italic {
	font-size: clamp(2rem, 6vw, 4.4rem);
	font-style: italic;
}

.lf-hero-large {
	display: block;
	font-size: clamp(2.6rem, 8vw, 6rem);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1;
}

.lf-hero-sub {
	font-size: clamp(1.5rem, 4vw, 2.8rem);
	font-style: italic;
	letter-spacing: 0.06em;
}

.lf-hero-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 10px 24px;
	border: 1px solid rgba(201, 168, 76, 0.4);
}

.lf-hero-brand-logo {
	font-family: var(--font-ui);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink);
	margin: 0;
}

.lf-hero-brand-dot {
	color: var(--gold);
}

.lf-hero-brand-tagline {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-style: italic;
	color: var(--muted);
	border-left: 1px solid var(--border);
	padding-left: 12px;
	margin: 0;
}

/* --- Bandeau d'informations : icônes -------------------------------------- */

.lf-info-icon {
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: 18px;
	color: var(--gold);
}

/* --- Vitrine boutique (fond sombre) ---------------------------------------
 * Aucun preset de theme.json ne couvre un blanc semi-transparent
 * (rgba(255,255,255,.65) dans la maquette) : d'où l'inline style plutôt qu'un
 * textColor, posé directement dans le bloc (voir patterns/accueil.php).
 * -------------------------------------------------------------------------- */

.lf-gallery-teaser em {
	color: var(--gold);
	font-style: italic;
}

/* Grille en CSS pur (display:grid), pas via l'attribut layout du bloc — même
   choix que .lf-contact-grid (patterns/contact.php) : le rendu ne dépend alors
   d'aucune classe générée dynamiquement par le support « layout » du cœur.
   Contrepartie, cf. la remise à zéro des marges plus bas : le wp:group reste
   marqué is-layout-flow par le cœur, dont les marges entre enfants subsistent. */
.lf-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	max-width: 960px;
	margin: 0 auto 48px;
}

/*
 * Remise à zéro de la marge verticale que le cœur pose entre enfants d'un
 * wp:group. Passer un groupe en display:grid en CSS ne lui retire pas sa classe
 * is-layout-flow : la règle du cœur
 *   :where(.wp-block-group-is-layout-flow) > :not(:first-child)
 *     { margin-block-start: var(--wp--style--block-gap) }   (soit 24 px ici)
 * continue de s'appliquer à chaque tuile SAUF la première. En disposition flow
 * ces marges s'empileraient verticalement ; en grille, elles décalent chaque
 * élément À L'INTÉRIEUR de sa propre piste. La 1re tuile, seule sans marge, se
 * retrouve donc 24 px PLUS HAUT que ses deux voisines de rangée — le symptôme
 * remonté (« problème d'alignement sur la première photo »), qui n'avait rien à
 * voir avec le recadrage des visuels. Mesuré : tuile 1 à y=2275, tuiles 2 et 3
 * à y=2299. Le `gap` de la grille, lui, fait déjà tout le travail d'espacement.
 *
 * Vaut pour toute grille CSS bâtie sur un wp:group : .lf-contact-grid est dans
 * le même cas (invisible en 1 colonne, décale la colonne de droite à ≥782 px).
 */
.lf-gallery-grid > *,
.lf-contact-grid > * {
	margin-block-start: 0;
}

/*
 * Tuile carrée, PAS 3/4 comme la maquette littérale. Les visuels livrés mêlent
 * portraits (corbeau-renard, cigale-fourmi, loup-agneau) et paysages
 * (renard-cigogne, lion-rat, grenouille-boeuf, ratio ~1,29:1) : forcés dans une
 * tuile 3/4, object-fit:cover recadrait les paysages sur une bande centrale
 * étroite et coupait l'essentiel de la composition. Le carré répartit le
 * recadrage des deux côtés au lieu de l'imposer tout entier à la moitié des
 * visuels. (Ce choix reste valable pour lui-même — mais il n'a PAS réglé le
 * « problème d'alignement » remonté à l'époque, qui venait des marges du cœur,
 * cf. plus haut. Ne pas rejouer un changement de ratio pour ce motif.)
 *
 * L'image reste à pleine luminosité — plus de mix-blend-mode/opacity, qui
 * rendaient les œuvres invisibles (retour utilisateur : « trop sombre, on ne les
 * voit pas »). Seul un voile en bas (::after) assombrit la zone du titre, sans
 * toucher au reste de l'image.
 */
.lf-gallery-tile {
	/* min-height:0 impératif : le cœur pose un min-height:430px par défaut sur
	   tout wp:cover sans minHeight explicite. Sans ce reset, aspect-ratio calcule
	   la largeur À PARTIR de ces 430px au lieu de l'inverse, et la piste de
	   grille est forcée plus large que ne l'offre 1fr — débordement silencieux
	   sur petit écran. Constaté à 390px. */
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: 0;
	height: auto;
	background: linear-gradient(145deg, #2a2218, #1a1208);
	border: 1px solid rgba(201, 168, 76, 0.15);
	overflow: hidden;
	transition: border-color 0.3s;
}

.lf-gallery-tile:hover {
	border-color: rgba(201, 168, 76, 0.5);
}

.lf-gallery-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(13, 13, 13, 0.82) 0%, rgba(13, 13, 13, 0.32) 34%, rgba(13, 13, 13, 0) 62%);
	pointer-events: none;
}

.lf-gallery-tile .wp-block-cover__inner-container {
	position: relative;
	/* !important : le cœur pose déjà z-index:1 sur ce même élément via un
	   sélecteur bien plus spécifique (body:not(...) .wp-block-cover:not(:has(...))
	   .wp-block-cover__inner-container, cf. wp-includes/blocks/cover/style.min.css).
	   Sans lui, ce z-index reste à 1, à ÉGALITÉ avec le voile ::after (z-index:1
	   également) : l'égalité se tranche par l'ordre de peinture, où ::after est
	   traité comme le DERNIER enfant — le voile passait donc AU-DESSUS du texte,
	   au lieu de dessous. Constaté : titres illisibles, « sous l'ombrage ». Même
	   cause que .lf-lead (marges) dans CLAUDE.md — un sélecteur du cœur plus
	   spécifique qu'une classe simple. */
	z-index: 2 !important;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	/* Suit la taille du titre : 20px sur grande tuile, resserré quand elle
	   rétrécit. Voir la note sur le clamp du titre juste en dessous. */
	padding-bottom: clamp(11px, 3vw, 20px);
}

/*
 * Titre à taille fluide. La tuile fait ~1/3 de 960px en desktop (316px) mais
 * ~50vw en mobile : à 390px de large elle tombe à 162px, où un titre fixé à
 * 1.1rem passait sur trois lignes et masquait le visuel qu'il légende (« La
 * Grenouille et le Bœuf »). Le clamp lie la taille à la largeur du viewport,
 * qui pilote elle-même celle de la tuile en mobile — inutile d'empiler des
 * media queries. Bornes : plancher 0.78rem à 390px, plafond 1.1rem (la valeur
 * de la maquette) atteint dès ~550px, donc desktop et tablette inchangés.
 */
.lf-gallery-tile .wp-block-cover__inner-container p {
	margin: 0;
	padding: 0 12px;
	font-size: clamp(0.78rem, 3.2vw, 1.1rem);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 700;
	color: var(--white);
	text-align: center;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* --- CTA commercial -------------------------------------------------------- */

.lf-cta-section h2 strong {
	font-weight: 900;
}

.lf-cta-section h2 em {
	color: var(--earth);
	font-style: italic;
}

.lf-cta-subh {
	margin: 28px 0 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.5vw, 1.7rem);
	color: var(--ink);
}

.lf-cta-subh strong {
	font-weight: 900;
}

.lf-cta-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}

.lf-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 1.5px solid var(--border);
	transition: border-color 0.2s, background 0.2s;
}

.lf-cta-pill:hover {
	border-color: var(--gold);
	background: rgba(201, 168, 76, 0.05);
}

.lf-cta-pill p {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ink);
}

.lf-cta-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--gold);
	border-radius: 50%;
	flex: none;
}

/* --- Expositions : bloc date scindé (jour + mois) -------------------------- */

.lf-expo-date {
	text-align: center;
	min-width: 50px;
	flex: none;
}

.lf-expo-day {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gold);
	line-height: 1;
}

.lf-expo-month {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ============ Tablette / desktop ============ */
@media (max-width: 781px) {
	/* 6 tuiles en 2 colonnes = 3 rangées pleines. Ne PAS masquer la dernière
	   (règle héritée de l'époque où la vitrine en comptait 5, où elle évitait
	   une tuile orpheline) : à 6, elle produit exactement le défaut qu'elle
	   visait — « Le Loup et l'Agneau » seul sur sa rangée, à côté d'un trou. */
	.lf-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Textes légaux (mentions légales, politique de confidentialité)
   ========================================================================== */

/*
 * Mesure de lecture. Ces deux pages sont de longs textes courants, sans image ni
 * colonne pour rompre la ligne : dans le conteneur contraint à 1200 px du
 * gabarit, leurs paragraphes atteignaient ~141 caractères par ligne (mesuré),
 * là où la plage lisible se situe entre 45 et 85. L'œil perd la ligne suivante.
 *
 * Borne exprimée en « ch » et non en pixels : la mesure suit alors la police
 * réellement rendue (EB Garamond est étroite), au lieu d'une largeur fixe juste
 * pour une seule fonte.
 *
 * La remise à gauche des marges est INDISPENSABLE : la disposition contrainte
 * pose « margin-left/right: auto » sur tout enfant, donc chaque bloc devenu plus
 * étroit que son conteneur se retrouve CENTRÉ, alors que le H1 (rendu par
 * templates/singular.html) reste calé à gauche. Constaté ici avant correctif :
 * paragraphes à x=419 sous des titres à x=113.
 *
 * ⚠️ Et il faut « !important », comme pour .lf-lead plus bas : le cœur pose ces
 * marges en !important via son style-engine, si bien qu'AUCUNE spécificité n'en
 * vient à bout. Essayé et mesuré ici : même en reprenant les deux classes du
 * cœur plus la nôtre — .wp-block-group.is-layout-constrained.lf-texte-legal,
 * soit (0,3,0) — le margin-left calculé restait à 306 px. À noter que le
 * max-width, lui, passe sans forçage : seules les marges sont en cause.
 *
 * Les titres ne sont pas bornés en pratique : à leur corps, 72ch dépasse déjà
 * le conteneur, et ils restent donc pleine largeur — ce qui est voulu.
 */
.lf-texte-legal > * {
	max-width: 72ch;
}

.is-layout-constrained.lf-texte-legal > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================================
   Boutique — formats & tarifs (patterns/boutique.php)
   ========================================================================== */

/* Carte d'un format. Hauteur égalisée : les trois colonnes du bloc columns ont
   des textes d'usage de longueurs différentes, et sans cela les cartes se
   terminent à des hauteurs distinctes — le fond parchemin rend l'écart visible. */
.lf-tarif-carte {
	height: 100%;
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
}

.lf-tarif-format {
	margin: 0 0 4px;
	font-size: 1.15rem;
}

.lf-tarif-prix {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--gold);
}

.lf-tarif-papier {
	margin: 0 0 10px;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--earth);
}

/* ==========================================================================
   Expositions (patterns/expositions.php)
   ========================================================================== */

.lf-expo-carte {
	border: 1px solid var(--border);
}

/* Exposition terminée : atténuée, mais PAS masquée. Elle reste une preuve de
   légitimité artistique (et une entrée SEO), d'où un simple retrait visuel. */
.lf-expo-carte.is-passee {
	opacity: 0.72;
}

.lf-expo-carte.is-passee .lf-eyebrow {
	color: var(--muted);
}

.lf-expo-vide {
	border: 1px dashed var(--border);
}

/* ==========================================================================
   Éléments éditoriaux partagés (À Propos, Contact, Mentions légales)
   ========================================================================== */

/* Sur-titre d'interface : Montserrat, capitales espacées. Repris tel quel de la
   maquette, où il coiffe chaque section. */
.lf-eyebrow {
	font-family: var(--font-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 12px;
}

/* Chapô : le paragraphe d'ouverture d'une page, un cran au-dessus du corps.
 *
 * ⚠️ Le désalignement n'est pas cosmétique. La disposition « constrained » du FSE
 * pose « margin-left/right: auto » sur TOUT enfant : un élément plus étroit que
 * son conteneur — ce qu'est un chapô borné à 62ch — se retrouve donc CENTRÉ,
 * alors qu'il doit s'aligner sur le titre. Vu à l'écran : chapô décalé de ~300 px
 * vers la droite sous un H1 calé à gauche.
 *
 * Le cœur pose ces marges en « !important » (wp-includes/style-engine, disposition
 * constrained) : ni une classe supplémentaire ni un « margin-inline » raccourci
 * n'en viennent à bout — vérifié au navigateur, marginLeft calculé restait à
 * 286 px. Le « !important » ci-dessous est donc le seul moyen de reprendre la
 * main, et il reste borné aux deux propriétés en cause. */
.lf-lead {
	font-size: 1.15rem;
	line-height: 1.75;
	color: var(--muted);
	max-width: 62ch;
}

.is-layout-constrained > .lf-lead {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* …sauf quand il est explicitement centré : on lui rend alors le centrage. */
.is-layout-constrained > .lf-lead.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Citation de l'artiste. Filet d'or à gauche plutôt qu'un guillemet géant :
   .wp-block-quote porte déjà ce dernier (voir plus haut), on ne les cumule pas. */
.lf-citation {
	border-left: 3px solid var(--gold);
	padding: 4px 0 4px 28px;
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--black);
}

/* ==========================================================================
   PAGE « À PROPOS »
   ========================================================================== */

/* Portrait / illustration d'ouverture : même traitement « tirage encadré » que
   le portrait de La Fontaine sur l'accueil, pour l'unité de la série. */
.lf-portrait img {
	border: 3px solid var(--border);
	box-shadow: 10px 10px 0 var(--parchment);
}

/* Repères de parcours : une ligne = un bloc Groupe en disposition flex, portant
   deux paragraphes (période, fait). Des blocs natifs plutôt qu'une liste à
   balisage libre : le client peut en ajouter un dans l'éditeur sans casser la
   mise en forme, et Gutenberg ne nettoie pas de balises au réenregistrement. */
.lf-repere {
	gap: 4px 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}

.lf-repere:first-of-type {
	border-top: 1px solid var(--border);
}

.lf-repere .lf-repere-annee {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	flex: 0 0 7rem;
	padding-top: 5px;
	margin: 0;
}

.lf-repere .lf-repere-texte {
	flex: 1 1 16rem;
	margin: 0;
}

/* ==========================================================================
   PAGE « CONTACT »

   Structure portée du projet Maison Aline (patterns/contact.php) : carte
   formulaire + colonne coordonnées. L'habillage, lui, suit la charte des
   Fables — angles vifs et filets d'or, là où Maison Aline arrondit tout.
   ========================================================================== */

/* Les blocs core/html ne reçoivent pas la contrainte « constrained » du FSE :
   la largeur de contenu est donc bornée ici, à la valeur de theme.json. */
.lf-contact-grid {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

/* ---- Carte formulaire ---- */
.lf-form-card {
	background: var(--white);
	border: 1px solid var(--border);
	box-shadow: 10px 10px 0 var(--parchment);
	padding: 32px 24px 36px;
}

.lf-form-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.15;
	color: var(--black);
	margin: 0 0 10px;
}

.lf-form-intro {
	color: var(--muted);
	margin: 0 0 26px;
	max-width: 52ch;
}

.lf-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lf-f-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.lf-f {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.lf-cap {
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Boîte de champ : la bordure et le focus vivent sur le conteneur, l'input est
   nu à l'intérieur. C'est ce qui permet d'y loger une icône alignée. */
.lf-f-in {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border);
	background: var(--cream);
	padding: 0 14px;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.lf-f-in:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}

.lf-f-in > svg {
	width: 18px;
	height: 18px;
	color: var(--gold);
	flex: none;
}

.lf-f-in input,
.lf-f-in select,
.lf-f-in textarea {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--black);
	padding: 13px 0;
}

.lf-f-in select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.lf-f-in .lf-chev {
	width: 17px;
	height: 17px;
	color: var(--muted);
	flex: none;
}

.lf-f-in.lf-area {
	align-items: flex-start;
}

.lf-f-in.lf-area > svg {
	margin-top: 15px;
}

.lf-f-in textarea {
	min-height: 132px;
	resize: vertical;
	line-height: 1.65;
	padding: 14px 0;
}

.lf-f-in input::placeholder,
.lf-f-in textarea::placeholder {
	color: var(--muted);
	opacity: 0.75;
}

/* Leurre anti-spam : hors écran, jamais présenté à un humain. Il ne doit pas
   être « display:none » — certains robots ignorent les champs non rendus. */
.lf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lf-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
}

.lf-consent input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--gold);
	flex: none;
	cursor: pointer;
}

.lf-consent span {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--muted);
}

.lf-consent a {
	color: var(--earth);
	text-decoration: underline;
}

.lf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 6px;
	padding: 16px 32px;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cream);
	background: var(--black);
	border: 1px solid var(--black);
	cursor: pointer;
	transition: background 180ms ease-out, color 180ms ease-out;
}

.lf-submit:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--black);
}

/* ---- Colonne coordonnées ---- */
.lf-info-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--black);
	margin: 0 0 22px;
}

.lf-contact-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lf-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.lf-disc {
	width: 44px;
	height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--parchment);
	border: 1px solid var(--border);
	color: var(--gold);
}

.lf-disc svg {
	width: 20px;
	height: 20px;
}

.lf-ci {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lf-ci-lbl {
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.lf-ci-val {
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--black);
	/* Une adresse e-mail longue ne doit pas déborder de la colonne sur mobile. */
	overflow-wrap: anywhere;
}

a.lf-ci-val:hover {
	color: var(--gold);
}

.lf-ci-sub {
	font-size: 0.9rem;
	color: var(--muted);
}

.lf-note {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--muted);
}

/* ---- Toast (piloté par assets/js/main.js) ---- */
.lf-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 1000;
	transform: translate(-50%, 140%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 36px);
	padding: 14px 22px;
	background: var(--black);
	color: var(--cream);
	box-shadow: 0 18px 40px rgba(13, 13, 13, 0.32);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	transition: transform 380ms ease-out, opacity 380ms ease-out;
}

.lf-toast.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
}

.lf-toast .lf-toast-ok {
	width: 18px;
	height: 18px;
	color: var(--gold-lt);
	flex: none;
}

.lf-toast.is-error .lf-toast-ok {
	display: none;
}

/* ==========================================================================
   PAGE « MENTIONS LÉGALES »
   ========================================================================== */

/* Bloc d'information encore incomplet. Volontairement VISIBLE : une mention
   légale manquante est une infraction, elle ne doit pas se fondre dans la page. */
.lf-a-completer {
	border-left: 3px solid var(--earth);
	background: var(--parchment);
	padding: 14px 20px;
	color: var(--earth);
	font-style: italic;
}

/* ==========================================================================
   Tablette / desktop
   ========================================================================== */

@media (min-width: 782px) {
	.lf-contact-grid {
		grid-template-columns: 1.6fr 1fr;
		gap: 56px;
	}

	.lf-form-card {
		padding: 44px 44px 48px;
	}

	.lf-form-title {
		font-size: 2.2rem;
	}

	.lf-f-row {
		grid-template-columns: 1fr 1fr;
	}

	.lf-submit {
		width: auto;
		align-self: flex-start;
		padding-inline: 46px;
	}
}

/* ==========================================================================
   PILIER « LES FABLES » (patterns/les-fables.php)

   Pivot v2 : page de contenu pédagogique. Le filtre et la grille vivent dans un
   bloc wp:html (cartes cliquables + data-* lus par assets/js/main.js) — d'où des
   contrôles de formulaire habillés à la main, comme la carte contact.
   ========================================================================== */

/* --- Barre de filtre ------------------------------------------------------ */

.lf-fables-filtre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
}

.lf-fables-recherche {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 240px;
	max-width: 340px;
	border: 1px solid var(--border);
	background: var(--white);
	padding: 0 14px;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.lf-fables-recherche:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22);
}

.lf-fables-recherche > svg {
	width: 18px;
	height: 18px;
	color: var(--gold);
	flex: none;
}

.lf-fables-recherche input {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--black);
	padding: 12px 0;
}

.lf-fables-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

/* Boîte du select : la flèche est un SVG positionné, le select natif n'affiche
   plus la sienne (appearance:none). Même parti pris que .lf-f-in du formulaire. */
.lf-fables-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.lf-fables-select select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 178px;
	border: 1px solid var(--border);
	background: var(--white);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--black);
	padding: 11px 40px 11px 14px;
	cursor: pointer;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.lf-fables-select select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22);
}

.lf-fables-select .lf-chev {
	position: absolute;
	right: 12px;
	width: 17px;
	height: 17px;
	color: var(--muted);
	pointer-events: none;
}

/* Compteur de résultats (mis à jour par le JS, aria-live). */
.lf-fables-compte {
	margin: 0 0 28px;
	text-align: center;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.lf-fables-vide {
	margin-top: 32px;
	text-align: center;
	color: var(--muted);
}

.lf-fables-reset {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: var(--earth);
	text-decoration: underline;
	cursor: pointer;
}

.lf-fables-reset:hover {
	color: var(--gold);
}

/* --- Grille de fables -----------------------------------------------------
 * .lf-fables-grid est un <div> brut (dans wp:html), PAS un wp:group : il
 * échappe donc à la marge de flow que le cœur pose entre enfants d'un groupe
 * (le piège de .lf-gallery-grid). Aucune remise à zéro nécessaire ici.
 * Points de rupture propres au composant : 1 colonne, puis 2, puis 3.
 * -------------------------------------------------------------------------- */

.lf-fables-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 560px) {
	.lf-fables-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.lf-fables-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Carte = lien enveloppant. On neutralise le style de lien éditorial
   (.wp-block-post-content a : souligné terre) : même spécificité (0,2,1) que la
   règle du cœur, déclarée plus bas donc gagnante. */
.lf-fables a.lf-fable-carte,
.lf-fables a.lf-fable-carte:hover {
	text-decoration: none;
	color: inherit;
}

.lf-fable-carte {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: border-color 220ms ease-out, box-shadow 220ms ease-out, transform 220ms ease-out;
}

.lf-fable-carte:hover {
	border-color: var(--gold);
	box-shadow: 8px 8px 0 var(--parchment);
	transform: translateY(-2px);
}

.lf-fable-carte-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(145deg, #2a2218, #1a1208);
}

.lf-fable-carte-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.lf-fable-carte:hover .lf-fable-carte-media img {
	transform: scale(1.04);
}

.lf-fable-carte-corps {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 22px 22px;
	flex: 1 1 auto;
}

.lf-fable-carte-titre {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--black);
}

.lf-fable-carte-morale {
	flex: 1 1 auto;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted);
}

.lf-fable-carte-lire {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	font-family: var(--font-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
}

.lf-fable-carte-lire svg {
	width: 15px;
	height: 15px;
	transition: transform 200ms ease-out;
}

.lf-fable-carte:hover .lf-fable-carte-lire svg {
	transform: translateX(3px);
}

/* ==========================================================================
   FICHE FABLE (patterns/fable.php)
   ========================================================================== */

.lf-fable-retour {
	margin-bottom: 18px;
}

.lf-fable-retour a {
	letter-spacing: 0.04em;
}

/* Étiquettes animaux / thèmes sous la morale. Groupe en flex : pas de marge de
   flow du cœur à neutraliser. */
.lf-fable-tag {
	margin: 0;
	padding: 5px 12px;
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--earth);
	background: var(--parchment);
	border: 1px solid var(--border);
}

.lf-fable-tag.is-theme {
	color: var(--gold);
	background: transparent;
}

/* Texte intégral : colonne de lecture resserrée (mesure en ch, comme les pages
   légales). Plus étroite que le conteneur : la disposition contrainte la centre
   d'elle-même — ce qui est ici l'effet VOULU, d'où pas de remise à gauche. */
.lf-fable-texte {
	max-width: 58ch;
	margin-inline: auto;
	font-size: 1.15rem;
	line-height: 1.85;
	color: var(--black);
}

.lf-fable-source {
	margin-top: 20px;
	color: var(--muted);
}