/*
Theme Name:   Joconde
Theme URI:    https://lajoconde.paris
Author:       lajoconde.paris
Description:  Theme classique, sobre et academique pour lajoconde.paris. Double typographie (serif pour la lecture, sans-serif pour la navigation), palette neutre, zero animation parasite. L'architecture s'efface devant le texte. Concu pour fonctionner avec le plugin Joconde Core.
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  joconde
*/

/* =========================================================================
   0. VARIABLES — un seul endroit pour ajuster l'identite visuelle
   ========================================================================= */
:root {
	/* Typographie
	   Par defaut : piles systeme (zero requete reseau = performance maximale).
	   Pour des polices dediees (ex. Spectral + Inter auto-hebergees), remplacer
	   simplement les deux variables ci-dessous et charger les @font-face. */
	--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fs-base: 1.125rem;   /* 18px : confort de lecture des textes longs */
	--lh-base: 1.7;
	--measure: 68ch;       /* largeur de lecture optimale */

	/* Palette academique et neutre */
	--paper:      #f7f4ec;  /* fond parchemin / ivoire */
	--paper-2:    #efe9db;  /* fond secondaire (encarts) */
	--ink:        #1c1a17;  /* encre, texte principal */
	--ink-soft:   #4a453d;  /* texte secondaire */
	--ink-faint:  #7c766a;  /* legendes, meta */
	--rule:       #ddd6c7;  /* filets, bordures fines */
	--accent:     #8a3b2e;  /* sanguine : liens, marques (usage parcimonieux) */
	--accent-ink: #6e2f24;  /* sanguine foncee : survol */

	--space:   1.5rem;
	--space-l: 3rem;
	--radius:  2px;
	--maxw:    1180px;
}

/* Variante sombre, sobre et chaude — activee selon la preference systeme.
   Aucune bascule intrusive, aucun bouton : on respecte le choix de l'OS. */
@media (prefers-color-scheme: dark) {
	:root {
		--paper:     #17150f;
		--paper-2:   #201d16;
		--ink:       #ece7db;
		--ink-soft:  #c3bcac;
		--ink-faint: #8f8878;
		--rule:      #35311f;
		--accent:    #d08a5f;
		--accent-ink:#e0a179;
	}
}

/* =========================================================================
   1. RESET DOUX & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-serif);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
a:hover, a:focus { color: var(--accent-ink); border-bottom-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Titres : sans-serif discret, structure claire */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	color: var(--ink);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 2.2em 0 0.6em;
}
h1 { font-size: 2.15rem; margin-top: 0; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.15em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-l) 0; }

/* =========================================================================
   2. MISE EN PAGE GENERALE
   ========================================================================= */
.container { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }

.site-content { padding: var(--space-l) 0 var(--space-l); }

/* Colonne de lecture — bride la largeur du texte long */
.reading { width: min(100% - 3rem, var(--measure)); margin-inline: auto; }

/* =========================================================================
   3. EN-TETE & NAVIGATION (sans-serif)
   ========================================================================= */
.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}
.site-header .container {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space);
	padding: 1.4rem 1.5rem;
	flex-wrap: wrap;
}
.site-branding { font-family: var(--font-sans); }
.site-title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
}
.site-title a { color: var(--ink); border: 0; }
.site-title a:hover { color: var(--accent); }
.site-description {
	font-size: 0.82rem;
	color: var(--ink-faint);
	margin: 0.15rem 0 0;
	font-family: var(--font-sans);
}

.main-nav ul {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	flex-wrap: wrap;
}
.main-nav a {
	color: var(--ink-soft);
	border: 0;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

/* =========================================================================
   4. PIED DE PAGE
   ========================================================================= */
.site-footer {
	border-top: 1px solid var(--rule);
	margin-top: var(--space-l);
	padding: var(--space-l) 0;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--ink-faint);
}
.site-footer a { color: var(--ink-soft); }

/* =========================================================================
   5. HUB HISTORIQUE — pages encyclopediques
   ========================================================================= */
.entry-header { margin-bottom: var(--space-l); }
.entry-title { margin-bottom: 0.2em; }
.entry-kicker {
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	color: var(--ink-faint);
	margin: 0 0 0.6rem;
}

.entry-content > * { margin-inline: auto; }
.entry-content h2 { scroll-margin-top: 1.5rem; }
.entry-content h3 { scroll-margin-top: 1.5rem; }

/* Sommaire genere par [sommaire] */
.jsommaire {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 1.2rem 1.5rem;
	margin: 0 auto var(--space-l);
	font-family: var(--font-sans);
	max-width: var(--measure);
}
.jsommaire-title {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--ink-faint);
	margin: 0 0 0.6rem;
}
.jsommaire ul { list-style: none; margin: 0; padding: 0; }
.jsommaire li { margin: 0.25rem 0; font-size: 0.95rem; }
.jsommaire li a { color: var(--ink-soft); border: 0; }
.jsommaire li a:hover { color: var(--accent); }
.jsommaire-sub { padding-left: 1.2rem; font-size: 0.9rem; }

/* Notes de bas de page generees par [note] / [notes] */
.jnote-ref { font-size: 0.7em; line-height: 0; }
.jnote-ref a { border: 0; font-family: var(--font-sans); }
.jnotes {
	max-width: var(--measure);
	margin: var(--space-l) auto 0;
	border-top: 1px solid var(--rule);
	padding-top: var(--space);
	font-size: 0.92rem;
	color: var(--ink-soft);
}
.jnotes-title {
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--ink-faint);
}
.jnotes-list { padding-left: 1.4rem; }
.jnotes-list li { margin-bottom: 0.5rem; scroll-margin-top: 1.5rem; }
.jnote-back { border: 0; margin-left: 0.3rem; }

/* =========================================================================
   6. CABINET DE LECTURE — bibliographie
   ========================================================================= */
.cabinet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-l) var(--space);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ouvrage-card { display: flex; flex-direction: column; }
.ouvrage-cover {
	aspect-ratio: 3 / 4;
	background: var(--paper-2);
	border: 1px solid var(--rule);
	overflow: hidden;
	margin-bottom: 0.9rem;
}
.ouvrage-cover img { width: 100%; height: 100%; object-fit: cover; }
.ouvrage-card h2 { font-size: 1.05rem; margin: 0 0 0.15rem; }
.ouvrage-card h2 a { color: var(--ink); border: 0; }
.ouvrage-card h2 a:hover { color: var(--accent); }
.ouvrage-author {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--ink-faint);
	margin: 0;
}

/* Fiche ouvrage detaillee */
.ouvrage-single { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-l); align-items: start; }
.ouvrage-single .ouvrage-cover { margin: 0; }
.ouvrage-meta { font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink-soft); }
.ouvrage-meta dt { color: var(--ink-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.8rem; }
.ouvrage-meta dd { margin: 0.1rem 0 0; }
@media (max-width: 640px) {
	.ouvrage-single { grid-template-columns: 1fr; }
	.ouvrage-single .ouvrage-cover { max-width: 220px; }
}

/* =========================================================================
   7. ATELIER D'ANALYSE — etudes de cas
   ========================================================================= */
.etude-list { list-style: none; margin: 0; padding: 0; }
.etude-list li { border-bottom: 1px solid var(--rule); padding: var(--space) 0; }
.etude-list h2 { margin: 0 0 0.3rem; font-size: 1.4rem; }
.etude-list h2 a { color: var(--ink); border: 0; }
.etude-list h2 a:hover { color: var(--accent); }
.etude-lead { color: var(--ink-soft); margin: 0; }

.etude-chapeau {
	font-size: 1.28rem;
	line-height: 1.55;
	color: var(--ink-soft);
	font-style: italic;
	max-width: var(--measure);
	margin: 0 auto var(--space-l);
}

/* Images HD : peuvent deborder la colonne de lecture pour respirer */
.etude-content figure,
.etude-content .wp-block-image {
	margin: var(--space-l) auto;
	max-width: var(--maxw);
}
.etude-content figure img,
.etude-content .wp-block-image img { cursor: zoom-in; }
.etude-content figcaption,
.etude-content .wp-element-caption {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--ink-faint);
	text-align: center;
	margin-top: 0.6rem;
}

/* Tableaux de donnees */
.etude-content table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	margin: var(--space-l) auto;
	max-width: var(--measure);
	display: block;
	overflow-x: auto;
}
.etude-content th, .etude-content td,
.entry-content th, .entry-content td {
	border: 1px solid var(--rule);
	padding: 0.55rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.etude-content thead th,
.entry-content thead th { background: var(--paper-2); }

/* Blocs de citation (carnets de Leonard) */
.etude-content blockquote,
.entry-content blockquote {
	max-width: var(--measure);
	margin: var(--space-l) auto;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border-left: 3px solid var(--accent);
	font-style: italic;
	color: var(--ink-soft);
}
.etude-content blockquote cite,
.entry-content blockquote cite {
	display: block;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--ink-faint);
	margin-top: 0.6rem;
}
.etude-content blockquote cite::before { content: "\2014\00a0"; }

/* Sources en fin d'etude */
.etude-sources {
	max-width: var(--measure);
	margin: var(--space-l) auto 0;
	border-top: 1px solid var(--rule);
	padding-top: var(--space);
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--ink-soft);
}
.etude-sources h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.etude-sources ul { padding-left: 1.2rem; }
.etude-sources li { margin-bottom: 0.4rem; }

/* Visionneuse d'image (zoom) — legere, sans dependance */
.jzoom-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 9, 7, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: 9999;
	cursor: zoom-out;
}
.jzoom-overlay img { max-width: 96vw; max-height: 92vh; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.jzoom-hint {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-sans);
	font-size: 0.78rem;
	color: rgba(255,255,255,.7);
}

/* =========================================================================
   8. ESPACE D'ECHANGE — zone membre
   ========================================================================= */
.espace-gate {
	max-width: 34rem;
	margin: var(--space-l) auto;
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-l);
}
.espace-gate h2 { margin-top: 0; }
.espace-gate p { color: var(--ink-soft); }
.espace-gate .login-username,
.espace-gate .login-password { margin-bottom: 1rem; }
.espace-gate label { font-family: var(--font-sans); font-size: 0.9rem; display: block; margin-bottom: 0.3rem; }
.espace-gate input[type=text],
.espace-gate input[type=password] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1rem;
}
.espace-gate .button,
.espace-member .button {
	font-family: var(--font-sans);
	background: var(--accent);
	color: #fff;
	border: 0;
	padding: 0.65rem 1.4rem;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.95rem;
}
.espace-gate .button:hover,
.espace-member .button:hover { background: var(--accent-ink); }
.espace-member { max-width: var(--measure); margin-inline: auto; }
.espace-toolbar {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--ink-faint);
	border-bottom: 1px solid var(--rule);
	padding-bottom: var(--space);
	margin-bottom: var(--space-l);
	display: flex;
	justify-content: space-between;
	gap: var(--space);
	flex-wrap: wrap;
}

/* =========================================================================
   9. UTILITAIRES & ACCESSIBILITE
   ========================================================================= */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--ink); color: var(--paper);
	padding: 0.6rem 1rem; font-family: var(--font-sans); z-index: 10000;
}
.skip-link:focus { left: 0; }

.entry-meta {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--ink-faint);
}

.read-more {
	font-family: var(--font-sans);
	font-size: 0.85rem;
}

/* Pagination sobre */
.pagination {
	font-family: var(--font-sans);
	margin-top: var(--space-l);
	display: flex;
	gap: 1rem;
	justify-content: center;
}
.pagination .page-numbers {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	color: var(--ink-soft);
}
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Respect de la preference "moins d'animations" */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}