/**
 * Décryptage — Base & design tokens.
 *
 * Esthétique « papier » (broadsheet WSJ) à l'ancienne, mécanique moderne.
 * Tout est piloté par variables CSS : palette, échelle typographique, filtres
 * d'image (couleur / noir & blanc / sépia). Le mode d'image est appliqué par
 * des classes (.lj-img.is-bw / .is-sepia / .is-color) posées côté PHP, jamais
 * en style en ligne — ce qui permet l'effet « couleur au survol ».
 *
 * @package Decryptage
 */

/* ======================================================================
   1. Tokens
   ====================================================================== */
:root {
	/* Palette « papier » — ivoire chaud, encre presque noire. */
	--paper:        #f7f5ee;   /* intérieur du journal — blanc cassé (moins jaune ; réglable en admin) */
	--paper-2:      #ece8dc;   /* panneaux / pages dessous */
	--paper-3:      #e1dccd;   /* survols / pages dessous (plus profond) */
	--ink:          #16140d;   /* encre — titres, texte fort */
	--ink-soft:     #322d20;   /* texte courant */
	--ink-mute:     #6d6552;   /* méta, légendes, secondaire */
	--rule:         #d4cbb2;   /* filets fins clairs */
	--rule-strong:  #1a160d;   /* filets fins « presse » (sous le bandeau) */
	--accent:       #8a1711;   /* oxblood éditorial — usage parcimonieux */
	--accent-ink:   #5e0f0a;
	--white:        #fbf8ee;

	/* Familles typographiques. */
	--font-display: "Playfair Display", "Times New Roman", Georgia, serif; /* Didone — titrage */
	--font-serif:   "PT Serif", Georgia, "Times New Roman", serif;          /* corps */
	--font-sans:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* méta / nav / kickers */

	/* Échelle typographique (fluide). */
	--fs-nameplate: clamp(2.75rem, 1.2rem + 6.4vw, 5.75rem);
	--fs-hero:      clamp(2.05rem, 1.2rem + 3vw, 3.55rem);
	--fs-h2:        clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
	--fs-feed-head: clamp(1.5rem, 1.1rem + 1.1vw, 1.9rem);
	--fs-card:      clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	--fs-feed-item: 1.28rem;
	--fs-body:      1.0625rem;
	--fs-small:     0.95rem;
	--fs-kicker:    0.72rem;
	--fs-meta:      0.78rem;

	/* Rythme & structure. */
	--container:    1240px;
	--gap:          clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
	--space:        clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
	--radius:       2px;

	/* Filtres d'image (résolus côté thème ; surchargés par variante). */
	--img-filter-bw:    grayscale(100%) contrast(1.05);
	--img-filter-sepia: sepia(0.62) grayscale(0.18) contrast(1.02) brightness(0.99) saturate(1.05);

	/* Mouvement. */
	--ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:      0.55s;
	--dur-fast: 0.28s;
}

/* ======================================================================
   2. Reset léger
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-soft);
	font-family: var(--font-serif);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Grain de papier très discret. */
	background-image:
		repeating-linear-gradient(0deg, rgba(22,20,13,0.012) 0 1px, transparent 1px 3px);
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; margin: 0 0 0.4em; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space) 0; }
::selection { background: var(--ink); color: var(--paper); }

/* ======================================================================
   3. Structure
   ====================================================================== */
.lj-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 0.4rem + 2vw, 2.25rem); }

.lj-site-content { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--space); }

/* Grille accueil / archive : contenu + colonne latérale. */
.lj-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 980px) {
	.lj-sidebar-right .lj-layout { grid-template-columns: minmax(0, 1.92fr) minmax(280px, 0.92fr); }
	.lj-sidebar-left  .lj-layout { grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.92fr); }
	.lj-sidebar-left  .lj-sidebar { order: -1; }
	.lj-sidebar-none  .lj-layout { grid-template-columns: minmax(0, 1fr); }
}

.lj-main { min-width: 0; }
.lj-home-section + .lj-home-section { margin-top: var(--space); }

/* Sidebar « collante » sur grand écran pour un fil qui suit la lecture. */
@media (min-width: 980px) {
	.lj-sidebar { position: sticky; top: calc(var(--lj-sticky-offset, 96px) + 12px); }
}

/* ======================================================================
   4. Filets & ornements « presse »
   ====================================================================== */
.lj-rule         { border: 0; border-top: 1px solid var(--rule); }
.lj-rule--strong { border-top: 2px solid var(--rule-strong); }
.lj-rule--double { border: 0; border-top: 3px double var(--rule-strong); }

/* Titre de rubrique : libellé + filet + lien « tout voir ». */
.lj-section-title {
	display: flex; align-items: baseline; gap: 1rem;
	font-family: var(--font-display); font-style: italic; font-weight: 700;
	font-size: var(--fs-feed-head); color: var(--ink);
	margin: 0 0 1.1rem; padding-bottom: 0.55rem;
	border-bottom: 2px solid var(--rule-strong);
}
.lj-section-title > span:first-child { white-space: nowrap; }
.lj-section-title::after { content: ""; flex: 1 1 auto; }
.lj-section-more {
	font-family: var(--font-sans); font-style: normal; font-weight: 600;
	font-size: var(--fs-kicker); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ink-mute); white-space: nowrap; transition: color var(--dur-fast) var(--ease);
}
.lj-section-more:hover { color: var(--accent); }

/* Kicker / sur-titre catégorie. */
.lj-kicker {
	font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-kicker);
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
	margin-bottom: 0.55rem; display: block;
}
.lj-kicker .lj-kicker-in { font-weight: 400; color: var(--ink-mute); }
.lj-kicker a { color: inherit; }
.lj-kicker a:hover { color: var(--accent); }

/* Méta (date, auteur, lecture, vues). */
.lj-entry-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem;
	font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--ink-mute);
	letter-spacing: 0.02em;
}
.lj-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.lj-meta-item time { font-style: italic; }
.lj-icon { width: 1em; height: 1em; display: inline-block; opacity: 0.75; }

/* ======================================================================
   5. Filtres d'image (couleur / N&B / sépia) + survol couleur
   ====================================================================== */
.lj-img { position: relative; overflow: hidden; margin: 0; background: var(--paper-3); }
.lj-img img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--dur) var(--ease), transform 0.9s var(--ease); }
.lj-img.is-color img { filter: none; }
.lj-img.is-bw    img { filter: var(--img-filter-bw); }
.lj-img.is-sepia img { filter: var(--img-filter-sepia); }
/* Couleur au survol : seulement quand l'image est filtrée. */
.lj-hover-color.is-bw:hover img,
.lj-hover-color.is-sepia:hover img { filter: none; }
/* Léger zoom au survol des vignettes cliquables. */
.lj-zoom:hover img { transform: scale(1.035); }

/* Voile « papier » réutilisable au-dessus d'une image (hero, cartes pleine image). */
.lj-img-veil::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(22,20,13,0.04), rgba(22,20,13,0.04));
	mix-blend-mode: multiply;
}

/* ======================================================================
   6. Boutons & liens d'action
   ====================================================================== */
.lj-readmore, .lj-btn {
	font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-kicker);
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
	display: inline-flex; align-items: center; gap: 0.5rem;
}
.lj-readmore { position: relative; padding-bottom: 3px; }
.lj-readmore::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: var(--ink); transform: scaleX(1); transform-origin: left;
	transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.lj-readmore:hover { color: var(--accent); }
.lj-readmore:hover::after { background: var(--accent); transform: scaleX(1.0); }
.lj-readmore .lj-arrow { transition: transform var(--dur-fast) var(--ease); }
.lj-readmore:hover .lj-arrow { transform: translateX(4px); }

.lj-btn {
	padding: 0.7rem 1.2rem; border: 1.5px solid var(--ink); background: transparent;
	cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lj-btn:hover { background: var(--ink); color: var(--paper); }

/* ======================================================================
   7. Texte courant (article)
   ====================================================================== */
.lj-prose { font-size: 1.16rem; line-height: 1.72; color: var(--ink-soft); }
.lj-prose p { margin: 0 0 1.25em; }
.lj-prose h2, .lj-prose h3 { margin-top: 1.6em; }
.lj-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lj-prose blockquote {
	margin: 1.6em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--ink);
	font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--ink);
}
/* Lettrine optionnelle. */
.lj-prose.lj-dropcap > p:first-of-type::first-letter {
	float: left; font-family: var(--font-display); font-weight: 800; font-size: 4.6em;
	line-height: 0.72; padding: 0.06em 0.12em 0 0; color: var(--ink);
}

/* ======================================================================
   8. Sidebar / widgets
   ====================================================================== */
.lj-widget + .lj-widget { margin-top: var(--space); }
.lj-widget-title {
	font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-feed-head);
	color: var(--ink); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--rule-strong);
}
.lj-widget ul li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.lj-widget ul li a { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.lj-widget ul li a:hover { color: var(--accent); }

/* ======================================================================
   9. Accessibilité
   ====================================================================== */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.lj-skip-link {
	position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--ink); color: var(--paper);
	padding: 0.7rem 1rem; font-family: var(--font-sans); transition: top var(--dur-fast) var(--ease);
}
.lj-skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}