/*
Theme Name: EkOolos
Theme URI: https://www.ekoolos.fr
Description: Thème bloc d'EkOolos : données énergie et climat, lecture avant tout.
Author: EkOolos
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.4
License: GPL-2.0-or-later
Text Domain: ekoolos
*/

:root {
	--ek-paper: #f5f8ee;
	--ek-surface: #ffffff;
	--ek-ink: #17250f;
	--ek-muted: #56664a;
	--ek-line: #dbe4cb;
	--ek-link: #3f7400;
	--ek-brand: #487f00;
	--ek-sun: #f48c0f;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ek-paper: #0d1608;
		--ek-surface: #152010;
		--ek-ink: #e8f1db;
		--ek-muted: #9bb08a;
		--ek-line: #27371a;
		--ek-link: #a4dc4f;
		--ek-brand: #6fb11a;
		--ek-sun: #ffa23d;
	}
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-variant-numeric: proportional-nums; text-rendering: optimizeLegibility; }
:where(a):focus-visible, :where(button):focus-visible, :where(input, select, textarea):focus-visible {
	outline: 3px solid var(--ek-sun);
	outline-offset: 2px;
}

/* ---------- Ruban : la production électrique française en direct ---------- */
.ek-ribbon { display: block; color: inherit; text-decoration: none; }
.ek-ribbon-bar { display: flex; width: 100%; }
.ek-ribbon-bar i { display: block; min-width: 1px; }
.ek-ribbon.is-thin .ek-ribbon-bar { height: 6px; }
.ek-ribbon.is-large .ek-ribbon-bar { height: clamp(28px, 5vw, 56px); border-radius: 4px; overflow: hidden; }
.ek-ribbon-meta { display: block; margin-top: .6rem; font-size: var(--wp--preset--font-size--small); color: var(--ek-muted); }
.ek-ribbon-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .4rem 0 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.ek-ribbon-legend li { display: flex; align-items: center; gap: .4rem; }
.ek-ribbon-legend span { width: .7rem; height: .7rem; border-radius: 2px; }
.ek-ribbon-legend b { font-variant-numeric: tabular-nums; }

/* ---------- En-tête ---------- */
.ek-header { border-bottom: 1px solid var(--ek-line); }
.ek-header-inner { padding-block: 1rem; }
.ek-brand, .ek-brand a { font-size: 1.55rem; text-decoration: none; color: var(--ek-brand); }
.ek-brand a::before { content: ""; display: inline-block; width: 1.7em; height: 1.7em; margin-right: .5rem; vertical-align: -.5em; background: url(assets/brand/flower.svg) center / contain no-repeat; }
.ek-header .wp-block-navigation { font-size: .95rem; font-weight: 500; }
.ek-header .wp-block-navigation a { text-decoration: none; color: var(--ek-ink); }
.ek-header .wp-block-navigation a:hover { color: var(--ek-link); text-decoration: underline; }

/* ---------- Accueil : le bandeau ---------- */
.ek-stage {
	position: relative;
	margin-top: 0;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
	color: #f4f9ea;
	background:
		radial-gradient(55% 90% at 88% -10%, rgba(244, 140, 15, .34), transparent 62%),
		radial-gradient(40% 60% at 0% 100%, rgba(120, 190, 30, .22), transparent 70%),
		linear-gradient(135deg, #0f2108 0%, #22440a 55%, #35650a 100%);
	overflow: hidden;
	padding-inline: var(--wp--style--root--padding-right, 1.25rem);
}
.ek-stage h1 { max-width: 20ch; margin: 0 0 .75rem; color: #fff; text-wrap: balance; }
.ek-stage .ek-kicker { margin: 0 0 .4rem; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffd68c; }
/* Deuxième temps du bandeau : les courbes en direct, sous leur propre titre */
.ek-stage-live { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid rgba(244, 249, 234, .14); }
.ek-stage h2 { margin: 0 0 .75rem; color: #fff; font-size: var(--wp--preset--font-size--title-l); text-wrap: balance; }
/* Le moteur : titre et chapô sur toute la largeur (le champ, lui, garde une largeur confortable à la lecture) */
.ek-stage .ek-stage-search h1, .ek-stage .ek-stage-search .ek-lead { max-width: none; }
.ek-stage .ek-lead { max-width: 54ch; margin: 0; font-size: var(--wp--preset--font-size--lead); color: rgba(244, 249, 234, .85); }
.ek-stage a { color: inherit; }
.ek-stage .ek-ribbon-meta, .ek-stage .ek-ribbon-legend { color: rgba(244, 249, 234, .8); }
.ek-hero-chart { position: relative; margin-top: clamp(1rem, 3vw, 2rem); }
/* Heure de la dernière mesure : en gros, en haut à droite, reliée au dernier point par un trait */
.ek-hero-stamp { margin: 0 0 .75rem; color: #fff; line-height: 1.15; }
.ek-hero-stamp .ek-stamp-k, .ek-hero-stamp .ek-stamp-date { display: block; font-size: .95rem; color: rgba(244, 249, 234, .82); }
.ek-hero-stamp .ek-stamp-time { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ek-hero-stamp .ek-stamp-k { color: #ffd68c; }
.ek-hero-stamp.is-late .ek-stamp-k { color: #ffb36b; }
.ek-hero-link { display: none; }
@media (min-width: 900px) {
	/* Le chapô des courbes laisse la place à l'heure, affichée à sa droite juste au-dessus du graphique */
	.ek-stage .ek-stage-live .ek-lead { max-width: min(54ch, calc(100% - 15rem)); }
	.ek-hero-stamp { position: absolute; right: 52px; bottom: calc(100% + .75rem); margin: 0; text-align: right; } /* le script l'aligne ensuite sur la ligne « maintenant » */
	.ek-hero-link { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; }
	.ek-hero-link.is-on { opacity: 1; }
	.ek-hero-link .ek-link-line { fill: none; stroke: rgba(255, 214, 140, .9); stroke-width: 1.5; stroke-linecap: round; }
	.ek-hero-link .ek-link-head { fill: #ffd68c; stroke: none; }
	.ek-hero-link .ek-link-line { transition: stroke-dashoffset .6s cubic-bezier(.3, .7, .3, 1) .6s; }
}
@media (prefers-reduced-motion: reduce) { .ek-hero-link .ek-link-line { transition: none; } }
.ek-hero-canvas { width: 100%; height: clamp(300px, 46vw, 440px); }
.ek-hero-chart.is-error .ek-hero-canvas { display: none; }

.ek-ribbon.is-large .ek-ribbon-bar { animation: ek-reveal 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ek-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ek-ribbon.is-large .ek-ribbon-bar { animation: none; } }

/* Chiffres clés avec leur courbe */
.ek-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ek-live li { margin: 0; }
.ek-live a {
	display: block; height: 100%; padding: 1rem 1.1rem .4rem; color: inherit; text-decoration: none;
	background: var(--ek-surface); border: 1px solid var(--ek-line); border-radius: 10px;
	transition: border-color .2s, transform .2s;
}
.ek-live a:hover { border-color: var(--ek-brand); transform: translateY(-2px); }
.ek-live b { display: block; font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ek-live span { display: block; margin-top: .25rem; min-height: 2.6em; font-size: var(--wp--preset--font-size--small); color: var(--ek-muted); }
.ek-live .ek-spark { display: block; height: 64px; margin: .4rem -.3rem 0; }
.ek-live-wrap { position: relative; z-index: 2; margin-top: -2.25rem; }
@media (prefers-reduced-motion: reduce) { .ek-live a { transition: none; } .ek-live a:hover { transform: none; } }

.ek-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ek-line); }
.ek-index li { margin: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--ek-line); }
.ek-index a { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--title-m); font-weight: 700; text-decoration: none; color: var(--ek-ink); }
.ek-index a:hover { color: var(--ek-link); text-decoration: underline; }
.ek-index p { margin: .25rem 0 0; max-width: 60ch; color: var(--ek-muted); font-size: var(--wp--preset--font-size--small); }

.ek-section-title { margin-bottom: 1rem; }

/* ---------- Pages et articles ---------- */
.ek-page-title { margin-top: clamp(2rem, 5vw, 3.5rem); text-wrap: balance; }
.ek-meta { color: var(--ek-muted); font-size: var(--wp--preset--font-size--small); }
.wp-block-post-content > * + h2 { margin-top: 3rem; }
.wp-block-post-content :where(ul, ol) { padding-left: 1.3rem; }
.wp-block-post-content :where(table) { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.wp-block-post-content :where(th, td) { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--ek-line); vertical-align: top; }
.ek-chart, .ek-solar { max-width: var(--wp--style--global--wide-size, 72rem); }

/* Graphiques et simulateur : aligné sur la palette du thème */
.ek-chart, .ek-solar {
	--ek-bg: var(--ek-surface);
	--ek-fg: var(--ek-ink);
	--ek-accent: var(--ek-link);
	--ek-soft: var(--ek-paper);
	--ek-on-accent: var(--ek-surface);
}
.ek-chart { border-radius: 6px; }

/* ---------- Pied de page ---------- */
.ek-footer { margin-top: 6rem; padding-block: 2.5rem; border-top: 1px solid var(--ek-line); font-size: var(--wp--preset--font-size--small); color: var(--ek-muted); }
.ek-footer a { color: var(--ek-muted); }
.ek-footer a:hover { color: var(--ek-link); }
.ek-footer p { max-width: 62ch; }

/* ---------- Liste d'articles ---------- */
.ek-posts .wp-block-post { padding: 1.2rem 0; border-bottom: 1px solid var(--ek-line); }
.ek-posts .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--title-m); }
.ek-posts .wp-block-post-title a { text-decoration: none; color: var(--ek-ink); }
.ek-posts .wp-block-post-title a:hover { color: var(--ek-link); text-decoration: underline; }

/* ---------- Ajustements ---------- */
.alignwide > .ek-section-title { margin-top: 3.5rem; }
.ek-footer > * { margin-left: 0 !important; margin-right: 0 !important; }
.ek-footer { max-width: var(--wp--style--global--wide-size, 72rem); margin-inline: auto; }
@media (max-width: 600px) {
	.ek-live li { padding-right: .6rem; }
	.ek-stage h1 { margin-top: 0; }
}

/* Alignement : le padding racine ne s'applique plus au body (useRootPaddingAwareAlignments) */
.ek-header-inner, .ek-footer {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 1.25rem);
}
.ek-footer { max-width: none; }
.ek-footer > * { max-width: calc(var(--wp--style--global--wide-size, 72rem) - 2.5rem); margin-inline: auto !important; }

/* ---------- Articles (/actus/) : colonne de lecture, mention d'origine, tableaux de chiffres ---------- */
body.single-post main { --wp--style--global--content-size: 46rem; }
.ek-origin { padding: .85rem 1rem; font-size: .9375rem; color: var(--ek-muted); background: var(--ek-surface); border: 1px solid var(--ek-line); border-left: 4px solid var(--ek-brand); border-radius: 6px; }
.ek-actu-table table { font-size: .9375rem; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.ek-actu-table th, .ek-actu-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--ek-line); }
.ek-actu-table :is(th, td):not(:first-child) { text-align: right; white-space: nowrap; }
.ek-actu-table thead th { font-size: .8125rem; color: var(--ek-muted); font-weight: 600; }
.ek-actu-table figcaption { font-size: .8125rem; color: var(--ek-muted); }
body.single-post .ek-note { font-size: .8125rem; color: var(--ek-muted); }
@media (max-width: 600px) { .ek-actu-table { overflow-x: auto; } }

.ek-comments { margin-top: 2.5rem; }
.ek-comment { padding: .8rem 0; border-top: 1px solid var(--ek-line); font-size: .9375rem; }
.ek-comment .wp-block-comment-date { font-size: .8125rem; color: var(--ek-muted); }
.ek-archives-link { margin-top: 2rem; color: var(--ek-muted); }

/* ---------- Accueil : l'histoire du site ---------- */
.ek-history-body { display: grid; gap: 1.5rem 3rem; }
.ek-history-body p { max-width: 62ch; margin: 0 0 1rem; }
.ek-history-links { font-size: var(--wp--preset--font-size--small); }
.ek-timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--ek-line); }
.ek-timeline li { position: relative; margin: 0 0 1.1rem; padding-left: 1.2rem; }
.ek-timeline li::before { content: ""; position: absolute; left: -.42rem; top: .45rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ek-paper); border: 2px solid var(--ek-brand); }
.ek-timeline li:last-child::before { background: var(--ek-sun); border-color: var(--ek-sun); }
.ek-timeline b { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem; line-height: 1.2; }
.ek-timeline span { display: block; font-size: var(--wp--preset--font-size--small); color: var(--ek-muted); }
@media (min-width: 800px) { .ek-history-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.ek-hero-credit { margin-top: .4rem; font-size: .75rem; color: var(--ek-muted); text-align: right; }