/*
Theme Name: Sustainability Education Platform
Description: Editorial theme for climate and sustainability education.
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Source+Sans+3:wght@300;400;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

:root {
  --green-dark:  #1a3a2a;
  --green-mid:   #4a9a6a;
  --green-light: #7ec88a;
  --green-pale:  #e8f4e8;
  --ink:         #1a1a18;
  --ink-soft:    #444;
  --muted:       #888;
  --rule:        #ccc;
  --bg:          #f8f7f4;
  --bg-warm:     #f0ede6;
  --accent:      #e87a5a;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body:  'Source Serif 4', Georgia, serif;
  --font-sans:  'Source Sans 3', sans-serif;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Header ── */
.site-header {
  background: var(--green-dark);
  padding: 0 28px;
}
.site-header__inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.site-logo {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--green-pale);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-logo em {
  font-style: italic;
  color: var(--green-light);
}
.site-nav {
  display: flex;
  gap: 0;
  list-style: none;
}
.site-nav li a {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #a8c8a8;
  padding: 6px 14px;
  display: block;
  border-right: 0.5px solid #2a5a3a;
  transition: color 0.15s;
}
.site-nav li:last-child a { border-right: none; }
.site-nav li a:hover,
.site-nav li.current-menu-item a { color: var(--green-pale); }

/* ── Stats strip ── */
.stats-strip {
  background: var(--ink);
  padding: 6px 28px;
}
.stats-strip__inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.stats-strip__label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #666;
  white-space: nowrap;
}
.stats-strip__item {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}
.stats-strip__item strong {
  font-weight: 600;
  color: #ddd;
}

/* ── Hero ── */
.hero {
  background: var(--green-dark);
  padding: 44px 28px 40px;
  border-bottom: 3px solid var(--green-dark);
}
.hero__inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero__section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-light);
  margin-bottom: 10px;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.06;
  color: var(--green-pale);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.hero__title em { font-style: italic; color: #b8e0c0; }
.hero__deck {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #a8c8a8;
  font-style: italic;
  margin-bottom: 20px;
}
.hero__link {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-light);
  border-bottom: 1px solid var(--green-light);
  padding-bottom: 1px;
  transition: opacity 0.15s;
}
.hero__link:hover { opacity: 0.7; }
.hero__chart {
  background: #132e1e;
  border: 0.5px solid #2a5a3a;
  padding: 16px;
}
.hero__chart-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-light);
  margin-bottom: 10px;
}

/* ── Hero KPI dashboard ── */
.hero--kpi {
  background: var(--green-dark);
  padding: 36px 28px 32px;
  border-bottom: 3px solid var(--green-dark);
}
.hero-kpi__inner {
  max-width: 1060px;
  margin: 0 auto;
}
.hero-kpi__eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
}
.hero-kpi__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ecf8a;
  display: inline-block;
  animation: kpi-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes kpi-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.8); }
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.kpi-card {
  background: #0e2317;
  padding: 18px 18px 14px;
  position: relative;
  border-top: 2px solid transparent;
  transition: background 0.15s;
}
.kpi-card:hover { background: #122b1e; }
.kpi-card--atm    { border-top-color: #4a9a6a; }
.kpi-card--temp   { border-top-color: #c04a2a; }
.kpi-card--ocean  { border-top-color: #3a7abf; }
.kpi-card--forest { border-top-color: #7a9a3a; }
.kpi-card--budget { border-top-color: #a04a8a; }
.kpi-card__cat {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
  opacity: 0.6;
  margin-bottom: 5px;
}
.kpi-card__label {
  font-size: 11px;
  color: #8ab89a;
  margin-bottom: 8px;
  line-height: 1.35;
}
.kpi-card__row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
}
.kpi-card__val {
  font-size: 28px;
  font-weight: 600;
  color: var(--green-pale);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-card__unit {
  font-size: 11px;
  color: #6a9a7a;
}
.kpi-card__trend {
  font-size: 10px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.kpi-trend--up   { color: #e07a5a; }
.kpi-trend--down { color: #e07a5a; }
.kpi-spark {
  width: 100%;
  height: 36px;
  display: block;
  margin-bottom: 6px;
}
.kpi-card__src {
  font-size: 9px;
  color: #4a7a5a;
  line-height: 1.3;
}
.hero-kpi__footnote {
  margin-top: 14px;
  font-size: 10px;
  color: #4a7a5a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hero-kpi__more {
  color: var(--green-light);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.05em;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.hero-kpi__more:hover { opacity: 1; }
@media (max-width: 680px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-card__val { font-size: 22px; }
}
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: minmax(0,1fr); }
}

/* ── Section label ── */
.section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 5px;
  margin-bottom: 14px;
}

/* ── Tags ── */
.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  margin-bottom: 7px;
}
.tag--climate     { background: #e8f4e8; color: #1a4a2a; }
.tag--energy      { background: #faf0e0; color: #4a3010; }
.tag--water       { background: #e8f0fa; color: #1a3a6a; }
.tag--forestry    { background: #eaf4e2; color: #1a4a1a; }
.tag--regulation  { background: #f4ece8; color: #4a2a1a; }
.tag--world       { background: #f0ede6; color: #3a3020; }

/* ── 6-col grid (2 rows of 3) ── */
.content-grid {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 28px;
}
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.content-col {
  border-right: 0.5px solid var(--rule);
  padding: 20px 20px 24px;
}
.content-col:first-child { padding-left: 0; }
.content-col:last-child  { border-right: none; padding-right: 0; }

/* ── Article typography ── */
.art-title-lg {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.art-title-lg a:hover { color: var(--green-dark); }
.art-title-sm {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 3px;
}
.art-title-sm a:hover { color: var(--green-dark); }
.art-deck {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 8px;
}
.art-meta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.art-divider {
  border: none;
  border-top: 0.5px solid #ddd;
  margin: 12px 0;
}
.mini-article { padding: 9px 0; border-bottom: 0.5px solid #eee; }
.mini-article:last-child { border-bottom: none; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--green-dark);
  margin-top: 32px;
  padding: 14px 28px 28px;
}
.site-footer__inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-logo {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 900;
  color: var(--green-dark);
}
.footer-logo em { font-style: italic; color: var(--green-mid); }
.footer-links {
  display: flex;
  gap: 18px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--ink); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__chart { display: none; }
  .hero__title { font-size: 28px; }
  .content-row { grid-template-columns: 1fr; }
  .content-col { border-right: none; border-bottom: 0.5px solid var(--rule); padding: 16px 0; }
  .site-nav { display: none; }
}


.hero__inner--single {
  display: block;
  max-width: 760px;
}

/* ── Feed chronologique ── */
.feed-header {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 0 0;
  border-bottom: 2px solid var(--green-dark);
  margin-bottom: 0;
}
.feed-header__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin-bottom: 4px;
}
.feed-header__label a {
  color: var(--muted);
  border-bottom: 0.5px solid var(--rule);
}
.feed-header__label a:hover { color: var(--ink); }
.feed-header__section-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  padding-bottom: 16px;
}
.feed-header__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  padding-bottom: 16px;
}
.feed-list {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 40px;
}
.feed-item {
  padding: 22px 0;
  border-bottom: 0.5px solid var(--rule);
}
.feed-item:last-child { border-bottom: none; }
.feed-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.feed-item .art-meta { font-size: 10px; }
.feed-item .art-title-lg { font-size: 20px; margin-bottom: 6px; }
.feed-item .art-deck { font-size: 14px; }

/* ── Stats strip : scroll sur mobile ── */
.stats-strip__inner {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.stats-strip__inner::-webkit-scrollbar { display: none; }
.stats-strip__separator { color: #444; }
.stats-strip__more {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-light);
  white-space: nowrap;
  border-bottom: 0.5px solid var(--green-light);
  padding-bottom: 1px;
}
.stats-strip__more:hover { opacity: 0.7; }

/* ── Page Climate Indicators ── */
.indicators-page {
  background: var(--bg);
  padding: 0 28px 60px;
}
.indicators-page__inner { max-width: 1060px; margin: 0 auto; }
.indicators-header {
  padding: 36px 0 28px;
  border-bottom: 2px solid var(--green-dark);
  margin-bottom: 32px;
}
.indicators-header__title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 900;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.indicators-header__intro {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 680px;
  line-height: 1.6;
}

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ind-card {
  background: #fff;
  border: 0.5px solid var(--rule);
  padding: 20px;
  border-top: 3px solid var(--rule);
}
.ind-card--atmosphere { border-top-color: #4a9a6a; }
.ind-card--temperature { border-top-color: #e87a5a; }
.ind-card--cryosphere  { border-top-color: #5ab0d8; }
.ind-card--ocean       { border-top-color: #1a5f8a; }
.ind-card--emissions   { border-top-color: #c04a2a; }
.ind-card--land        { border-top-color: #7a9a3a; }
.ind-card--water       { border-top-color: #2a7abf; }

.ind-card__category {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ind-card__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
}
.ind-card__value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.ind-card__unit {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}
.ind-card__trend {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ind-card__trend--up   { color: #c04a2a; }
.ind-card__trend--down { color: #1a5a8a; }
.ind-card__context {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
  border-top: 0.5px solid var(--rule);
  padding-top: 10px;
}
.ind-card__source {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ind-card__source a {
  color: var(--green-mid);
  border-bottom: 0.5px solid var(--green-mid);
}
.ind-card__source a:hover { color: var(--green-dark); }

.indicators-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--bg-warm);
  border-left: 3px solid var(--muted);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
}

@media (max-width: 768px) {
  .indicators-grid { grid-template-columns: 1fr; }
  .feed-item .art-title-lg { font-size: 17px; }
}

/* ── Single article ── */
.hero__meta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #7ab08a;
  margin-top: 16px;
}
.single-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 28px 60px;
}
.single-content {
  max-width: 680px;
  margin: 40px auto 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.single-content p { margin-bottom: 1.4em; }
.single-content h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 2em 0 0.6em;
  letter-spacing: -0.01em;
}
.single-content h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}
.single-content a {
  color: var(--green-dark);
  border-bottom: 1px solid var(--green-light);
}
.single-content a:hover { color: var(--green-mid); }
.single-content blockquote {
  border-left: 3px solid var(--green-light);
  margin: 1.6em 0;
  padding: 0.5em 0 0.5em 1.2em;
  font-style: italic;
  color: var(--ink-soft);
}
.single-content ul, .single-content ol {
  margin: 0 0 1.4em 1.4em;
}
.single-content li { margin-bottom: 0.4em; }

/* ── Point rouge Live ── */
.stats-strip__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e03a2a;
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Feed item avec image ── */
.feed-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.feed-item__thumb {
  flex-shrink: 0;
  width: 180px;
  height: 110px;
  overflow: hidden;
  display: block;
}
.feed-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.feed-item__thumb:hover img { opacity: 0.88; }
.feed-item__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-item__thumb--placeholder svg {
  width: 100%;
  height: 100%;
}
.feed-item__body { flex: 1; min-width: 0; }
.feed-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* ── Single : image en haut de l'article ── */
.single-thumbnail {
  max-width: 680px;
  margin: 32px auto 0;
  height: 340px;
  overflow: hidden;
}
.single-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.single-thumbnail--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-thumbnail--placeholder svg {
  width: 100%;
  height: 100%;
}
.single-content { margin-top: 28px; }

@media (max-width: 768px) {
  .feed-item { flex-direction: column; }
  .feed-item__thumb { width: 100%; height: 160px; }
  .single-thumbnail { height: 200px; }
}

/* ── En-tête sticky ── */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ── Ticker défilant ── */
.stats-strip {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.stats-strip__badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 16px;
  flex-shrink: 0;
  border-right: 0.5px solid #2a2a2a;
}
.stats-strip__track-wrap {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.stats-strip__track {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  will-change: transform;
  padding: 0 20px;
}
.stats-strip__sep {
  color: #444;
  flex-shrink: 0;
}
/* Supprime les anciens styles qui entrent en conflit */
.stats-strip__inner { display: none; }

/* ── Badge Live cliquable ── */
a.stats-strip__badge {
  text-decoration: none;
  transition: opacity 0.15s;
}
a.stats-strip__badge:hover { opacity: 0.75; }

/* ── Badge auto-updated sur les cartes ── */
.ind-card--live { border-top-width: 3px; }
.ind-card__live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-mid);
  margin-bottom: 10px;
}
.ind-card__update {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
  font-style: italic;
}