/*
Theme Name: Finance Nomade · Blog
Template: twentytwentyfive
Description: Habillage du blog aux couleurs Finance Nomade (charte sapin/or, Marcellus/Montserrat).
Version: 1.4
Author: Finance Nomade
*/

/* Jetons repris de la vitrine (styles-proto.css, thème sombre). */
:root {
	--fn-bg: #162417;
	--fn-bg-elev: #1E3A1E;
	--fn-bg-deep: #0F1A10;
	--fn-ink: #F4F6F4;
	--fn-ink-soft: #D0E4D0;
	--fn-ink-muted: #8FA88F;
	--fn-sauge: #A3B18A;
	--fn-or: #C9A961;
	--fn-line: rgba(244, 246, 244, 0.10);
}

/* Blocs Spectra hérités de l'ancien site (plugin retiré) : on neutralise
   les débordements · conteneurs ramenés dans la colonne de lecture,
   images fluides et centrées. */
.wp-block-uagb-container,
.wp-block-uagb-container.alignfull {
	max-width: var(--wp--style--global--content-size, 645px) !important;
	margin-inline: auto !important;
}
.wp-block-uagb-image,
.wp-block-uagb-image .wp-block-uagb-image__figure {
	display: block;
	text-align: center;
}
.wp-block-uagb-container img,
.wp-block-uagb-image img {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* Séparateurs décoratifs Spectra (flèche SVG géante sans le CSS du
   plugin) : purement ornementaux, on les masque. */
.wp-block-uagb-separator { display: none; }

/* CTA Spectra « call-to-action » (plugin retiré) : sans son CSS le lien est
   inline et chaque ligne reçoit son propre pavé arrondi · on en refait un
   bouton charte propre. */
.wp-block-uagb-call-to-action {
	text-align: center;
	margin: 2rem auto;
}
.wp-block-uagb-call-to-action .uagb-cta__button-link-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	max-width: 100%;
	background: var(--fn-or);
	color: var(--fn-bg);
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 0.95rem 1.9rem;
	border-radius: 2rem;
	text-align: center;
	text-decoration: none;
}
.wp-block-uagb-call-to-action .uagb-cta__button-link-wrapper:hover {
	background: #d8bc7e;
	color: var(--fn-bg);
}

/* Le titre d'article s'étale plus large que la colonne de texte,
   comme les grands titres de la vitrine. */
.single .wp-block-post-title {
	max-width: min(var(--wp--style--global--wide-size, 1600px), 94vw);
}

/* Photos : même traitement que la vitrine · légèrement assombries et
   désaturées pour rester dans la charte (et gommer le rendu « stock »). */
.wp-block-post-featured-image img {
	filter: brightness(0.8) saturate(0.85);
}

/* ---- Cartes des listes (/blog/ et archives), langage de la vitrine ---- */

.fn-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 2rem;
}
.fn-grille > li {
	display: flex;
}
.fn-carte {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--fn-line);
	background: var(--fn-bg-elev);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.45s;
}
.fn-carte:hover {
	transform: translateY(-6px);
	border-color: var(--fn-sauge);
}
.fn-carte-media {
	position: relative;
	overflow: hidden;
	background: var(--fn-bg-deep);
}
.fn-carte-media .wp-block-post-featured-image {
	margin: 0;
}
.fn-carte-media img {
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fn-carte:hover .fn-carte-media img {
	transform: scale(1.05);
}
.fn-carte-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 26, 16, 0) 50%, rgba(15, 26, 16, 0.55) 100%);
	pointer-events: none;
}
.fn-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
}
.fn-chip a {
	display: inline-block;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	background: var(--fn-bg);
	color: var(--fn-sauge);
	border: 1px solid var(--fn-sauge);
	padding: 0.3rem 0.7rem;
	text-decoration: none;
}
.fn-chip a:hover {
	color: var(--fn-or);
	border-color: var(--fn-or);
}
.fn-carte-corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.7rem 1.7rem;
}
.fn-carte-corps .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.fn-carte-corps .wp-block-post-title {
	font-size: 1.45rem;
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0.85rem 0 0;
}
.fn-carte-corps .wp-block-post-title a {
	text-decoration: none;
	color: var(--fn-ink);
}
.fn-carte-corps .wp-block-post-excerpt {
	margin-top: 0.7rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--fn-ink-soft);
}

/* Métadonnées « 17 février 2026 · 6 min de lecture » : mono, capitales. */
.fn-meta,
.fn-meta time,
.fn-meta a {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--fn-ink-muted);
	text-decoration: none;
}

/* « Lire l'article ↗ » : sauge, flèche diagonale, comme la vitrine. */
.wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--fn-sauge);
	text-decoration: none;
	align-self: flex-start;
}
.wp-block-post-excerpt__more-link::after {
	content: '';
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7 M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7 M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-block-post-excerpt__more-link:hover {
	color: var(--fn-or);
}
.wp-block-post-excerpt__more-link:hover::after {
	transform: translate(3px, -3px);
}

/* ---- Article : en-tête éditorial ---- */

.fn-overline,
.fn-overline a {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fn-sauge);
	text-decoration: none;
}
.fn-overline a:hover {
	color: var(--fn-or);
}

/* Filet or court sous les métadonnées, signature de la vitrine.
   Le hr est en is-style-wide (pleine largeur de colonne, donc bien calé
   dans la mise en page contrainte) ; seuls ses 64 premiers pixels sont
   peints en or. */
hr.fn-filet {
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, var(--fn-or) 0 64px, transparent 64px);
	opacity: 1;
}

/* Héros d'article sous voile sombre. */
.fn-hero {
	position: relative;
}
.fn-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 26, 16, 0.05) 40%, rgba(15, 26, 16, 0.5) 100%);
	pointer-events: none;
}
@media (max-width: 760px) {
	.fn-hero,
	.fn-hero img {
		aspect-ratio: 16 / 10 !important;
	}
}

/* ---------------------------------------------------------------------------
   Texte justifie du corps d'article (demande Robin 30/07/2026).
   Le justify avait ete retire du theme.json le 19/07 : il est remis ICI, avec
   les deux garde-fous qui manquaient alors.
     - hyphens:auto : sans cesure, le francais justifie creuse des rivieres de
       blanc entre les mots (c'est ce qui faisait « vieillot »).
     - fer a gauche sous 760px : une colonne etroite justifiee est illisible.
   Portee volontairement limitee aux paragraphes et aux items de liste du corps
   d'article : ni les titres, ni les legendes, ni les blocs de l'habillage.
   --------------------------------------------------------------------------- */
.single .wp-block-post-content > p,
.single .wp-block-post-content > ul li,
.single .wp-block-post-content > ol li {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}

@media (max-width: 760px) {
	.single .wp-block-post-content > p,
	.single .wp-block-post-content > ul li,
	.single .wp-block-post-content > ol li {
		text-align: left;
		hyphens: manual;
		-webkit-hyphens: manual;
	}
}

/* =========================================================================
   EN-TÊTE ET PIED DE PAGE, ALIGNÉS SUR LA VITRINE (02/08/2026)
   Demande de Robin : « faire comme l'accueil au niveau du haut et du bas de
   page, faire un beau bouton retour au site ».
   Valeurs reprises telles quelles de la vitrine : enveloppe 1360 px, barre de
   72 px, marque Marcellus 20 px + JetBrains Mono 9 px en 0.22em, pilule dorée.
   ========================================================================= */

/* L'en-tête du thème parent est remplacé : on neutralise ses marges. */
.wp-site-blocks > header.fn-tete { margin-block-start: 0; }

/* ----- barre ----- */
.fn-tete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in oklab, var(--fn-bg) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--fn-line);
}
.fn-tete-inner {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	min-height: 72px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
@media (min-width: 861px) { .fn-tete-inner { padding-inline: 2.5rem; } }

/* ----- marque ----- */
.fn-marque {
	display: block;
	line-height: 1;
	text-decoration: none;
	margin-inline-end: auto;
}
.fn-marque-nom {
	display: block;
	font-family: Marcellus, "Times New Roman", serif;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: var(--fn-ink);
}
.fn-marque-sous {
	display: block;
	margin-top: 4px;
	font-family: "JetBrains Mono", monospace;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fn-ink-muted);
}
.fn-marque:hover .fn-marque-nom { color: var(--fn-or); }

/* ----- liens ----- */
.fn-nav { display: none; gap: 2.25rem; font-size: 14px; }
@media (min-width: 861px) { .fn-nav { display: flex; } }
.fn-nav a {
	position: relative;
	color: var(--fn-ink-soft);
	text-decoration: none;
	padding-block: 2px;
}
.fn-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--fn-or);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fn-nav a:hover { color: var(--fn-ink); }
.fn-nav a:hover::after,
.fn-nav a[aria-current="page"]::after { transform: scaleX(1); }
.fn-nav a[aria-current="page"] { color: var(--fn-ink); }

/* ----- bouton de retour, la pilule dorée de la vitrine ----- */
.fn-btn-retour {
	display: none;
	align-items: center;
	gap: 0.5rem;
	height: 40px;
	padding-inline: 1.25rem;
	border-radius: 999px;
	background: var(--fn-or);
	color: #12210F;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--fn-or);
	transition: background 0.3s, color 0.3s, transform 0.3s;
}
@media (min-width: 861px) { .fn-btn-retour { display: inline-flex; } }
.fn-btn-retour:hover {
	background: transparent;
	color: var(--fn-or);
	transform: translateY(-1px);
}
.fn-btn-retour svg { transition: transform 0.3s; }
.fn-btn-retour:hover svg { transform: translateX(-3px); }
.fn-btn-retour--large {
	display: inline-flex;
	height: 52px;
	justify-content: center;
	font-size: 14px;
	margin-top: 0.75rem;
}

/* ----- menu mobile ----- */
.fn-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin-inline-end: -0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--fn-ink);
}
@media (min-width: 861px) { .fn-burger { display: none; } }
.fn-burger span,
.fn-burger span::before,
.fn-burger span::after {
	content: "";
	display: block;
	width: 22px; height: 1.5px;
	background: currentColor;
	transition: transform 0.3s, opacity 0.3s;
}
.fn-burger span::before { transform: translateY(-6px); }
.fn-burger span::after { transform: translateY(4.5px); }
.fn-burger[aria-expanded="true"] span { background: transparent; }
.fn-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.fn-burger[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(0); }

.fn-menu-mobile {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 1.5rem 2rem;
	border-top: 1px solid var(--fn-line);
	background: var(--fn-bg);
}
.fn-menu-mobile[hidden] { display: none; }
.fn-menu-mobile > a:not(.fn-btn-retour) {
	font-family: Marcellus, "Times New Roman", serif;
	font-size: 26px;
	color: var(--fn-ink);
	text-decoration: none;
	letter-spacing: -0.01em;
}
html.fn-menu-ouvert { overflow: hidden; }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.fn-pied {
	margin-top: 5rem;
	border-top: 1px solid var(--fn-line);
	background: var(--fn-bg-deep);
}
.fn-pied-inner {
	max-width: 1360px;
	margin-inline: auto;
	padding: 3.5rem 1.5rem 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 641px) { .fn-pied-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) {
	.fn-pied-inner { grid-template-columns: 2fr 1fr 1fr 1fr; padding-inline: 2.5rem; gap: 3rem; }
}
.fn-pied-baseline {
	margin: 1.25rem 0 0;
	max-width: 320px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fn-ink-soft);
}
.fn-pied-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.fn-pied-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--fn-line);
	border-radius: 999px;
	color: var(--fn-ink-soft);
	transition: color 0.3s, border-color 0.3s;
}
.fn-pied-social a:hover { color: var(--fn-or); border-color: var(--fn-or); }

.fn-pied-titre {
	margin: 0 0 1.25rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fn-or);
}
.fn-pied-col ul { margin: 0; padding: 0; list-style: none; }
.fn-pied-col li { margin-bottom: 0.75rem; font-size: 14px; color: var(--fn-ink-soft); }
.fn-pied-col a { color: var(--fn-ink-soft); text-decoration: none; transition: color 0.3s; }
.fn-pied-col a:hover { color: var(--fn-or); }

.fn-pied-bas { border-top: 1px solid var(--fn-line); }
.fn-pied-bas-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--fn-ink-muted);
	grid-template-columns: none;
}
.fn-pied-bas-inner p { margin: 0; line-height: 1.7; }
.fn-pied-liens { display: flex; gap: 1.5rem; }
.fn-pied-liens a { color: var(--fn-ink-muted); text-decoration: none; text-transform: none; letter-spacing: normal; font-size: 11px; }
.fn-pied-liens a:hover { color: var(--fn-ink); }

/* NE PAS masquer le footer du template-part : WordPress enveloppe notre
   pied dans un <footer class="wp-block-template-part">, le masquer masquait
   donc tout le pied de page (constaté puis corrigé le 02/08/2026).
   Le template-part remplace déjà celui du thème parent : rien à masquer. */
footer.wp-block-template-part { margin-block-start: 0; }

/* Les patterns de navigation entre articles sont vides sur ce blog (une
   seule page, pas de pagination) mais gardaient leurs espacements :
   plus de 300 px de vide entre la dernière carte et le pied. */
main .wp-block-group:not(:has(*)) { display: none; }

/* =========================================================================
   FILET ET TITRES DE L'ARTICLE (02/08/2026)
   Deux retours de Robin sur la page article :
   « le trait n'est pas top, faut le décaler au niveau de la date »
   « faut améliorer la DA des titres, des transitions plus marquées,
     là c'est un gros gros bloc »
   ========================================================================= */

/* ----- 1. Le filet se cale sur la date, plus sur le titre -----
   Le H1 reçoit un max-width « wide » (règle .single .wp-block-post-title) :
   dans un conteneur centré, il déborde donc des deux côtés et démarre ~60 px
   plus à gauche que la catégorie et la date. Le séparateur, lui, héritait de
   cette largeur wide et s'alignait sur le titre au lieu de la date.
   On le ramène à la colonne de lecture : le trait doré de 64 px démarre
   désormais exactement sous le « 2 » de la date. */
/* La cause exacte, mesurée dans le navigateur : WordPress génère
   :root :where(.wp-block-separator.is-style-wide--1:not(.alignfull))
   { max-width: var(--wp--style--global--wide-size) }
   soit 1668 px là où la colonne de lecture fait 1488 px. Le filet
   s'alignait donc sur le titre (lui aussi en largeur wide) et non sur la
   date. On cible le même couple de classes, avec !important car cette
   règle est régénérée par WordPress et pourrait repasser devant. */
hr.fn-filet.is-style-wide {
	max-width: var(--wp--style--global--content-size) !important;
	margin-inline: auto !important;
}

/* ----- 2. Les titres de l'article -----
   Le corps était un bloc continu : rien ne signalait le passage d'une section
   à l'autre. Chaque H2 est désormais précédé du filet doré de 64 px, la même
   signature que sous le titre de l'article et que sur la vitrine, avec une
   vraie respiration au-dessus. La hiérarchie se lit sans avoir à comparer les
   tailles : filet + blanc pour un H2, or et plus petit pour un H3. */
.wp-block-post-content h2,
.wp-block-post-content h2.wp-block-heading {
	position: relative;
	font-family: Marcellus, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.05rem);
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--fn-ink);
	margin-top: 4.5rem;
	margin-bottom: 1.15rem;
	padding-top: 2rem;
}
.wp-block-post-content h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 2px;
	background: var(--fn-or);
}

.wp-block-post-content h3,
.wp-block-post-content h3.wp-block-heading {
	font-family: Marcellus, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(1.12rem, 0.95rem + 0.5vw, 1.35rem);
	line-height: 1.28;
	letter-spacing: -0.005em;
	color: var(--fn-or);
	margin-top: 2.6rem;
	margin-bottom: 0.7rem;
}

/* Un H3 qui suit immédiatement un H2 ne doit pas ajouter sa propre respiration. */
.wp-block-post-content h2 + h3 {
	margin-top: 1.4rem;
}

/* Le tout premier titre de l'article suit le chapeau : moitié moins d'air,
   sinon la page paraît coupée en deux dès le premier écran. */
.wp-block-post-content > h2:first-child {
	margin-top: 2rem;
}

/* Un peu plus d'air entre les paragraphes : c'est ce qui différencie
   visuellement un bloc de texte d'un article qui se lit. */
.wp-block-post-content p {
	margin-block: 1.15rem;
}

@media (max-width: 640px) {
	.wp-block-post-content h2 { margin-top: 3.25rem; padding-top: 1.5rem; }
	.wp-block-post-content h3 { margin-top: 2rem; }
}

/* ---------------------------------------------------------------------------
   Datation des chiffres (03/08/2026)
   Posé avant la première ligne de l'article, donc lu avant les chiffres.
   Discret : il ne doit pas voler la vedette au chapeau, seulement dater ce qui
   suit. Filet doré à gauche pour le rattacher à la DA sans l'encadrer.
   --------------------------------------------------------------------------- */
.wp-block-post-content p.fn-note-chiffres {
	margin: 0 0 2.4rem;
	padding: 0.5rem 0 0.5rem 1rem;
	border-left: 2px solid var(--fn-or);
	font-family: "JetBrains Mono", monospace;
	font-size: 0.78rem;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: var(--fn-ink-muted);
}

@media (max-width: 640px) {
	.wp-block-post-content p.fn-note-chiffres {
		font-size: 0.72rem;
		margin-bottom: 2rem;
	}
}