@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --sky-light: #cfe7f5;
  --sky-mid: #6fa9d6;
  --hero-bg: #D1E6F0;
  --navy: #17255f;
  --navy-deep: #0d1638;
  --ink: #1a2733;
  --paper: #f7f9fa;
  --paper-dim: #eef2f4;
  --line: #d8e1e6;
  --accent: #00817d;
  --max: 760px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

.prose {
  max-width: var(--max);
}

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(160deg, #17255f 0%, #0d1638 100%);
  border-bottom: none;
}

.site-nav .nav-links a {
  color: rgba(255, 255, 255, 0.85);
}
.site-nav .nav-links a:hover {
  color: #ffffff;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand-logo {
  display: flex;
  align-items: center;
}

.brand-logo img {
  height: 42px;
  width: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover { color: var(--accent); text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  padding: 88px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  display: flex;
  align-items: center;
  gap: 56px;
}

.hero-copy { flex: 1.1; }

.eyebrow {
  font-size: 14px;
  color: var(--navy-deep);
  font-weight: 600;
  margin: 0 0 10px;
}

.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 68px;
  line-height: 0.95;
  color: var(--navy-deep);
  margin: 0 0 20px;
}

.hero h1 em {
  display: block;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--navy-deep);
  margin-bottom: 6px;
}

.hero p.lead {
  font-size: 18px;
  color: var(--navy-deep);
  max-width: 42ch;
  margin: 0 0 28px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }


.hero-art {
  flex: 0.9;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(18, 41, 58, 0.18);
}

.hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */
section.block { padding: 64px 0; }
section.block.alt { background: var(--paper-dim); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  border-bottom: 2px solid rgba(23, 37, 95, 0.12);
  padding-bottom: 14px;
  position: relative;
}

.section-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.5px;
  color: var(--navy-deep);
  margin: 0;
}


/* ---------- Episode / post cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}

.card .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--teal-deep);
  letter-spacing: 1px;
  margin: 0 0 6px;
}

.card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.3;
}

.card p {
  font-size: 14.5px;
  color: #47555f;
  margin: 0 0 16px;
}

/* ---------- Listen / social icon links ---------- */
.listen-links,
footer .socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.listen-links a,
footer .socials a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  text-decoration: none;
  color: var(--navy-deep);
  line-height: 1;
}

.listen-links a.spotify,
footer .socials a.spotify { color: #1BC257; }
.listen-links a.spotify:hover { border-color: #1BC257; background: #1BC25715; }

.listen-links a.apple,
footer .socials a.apple { color: #8F53B3; }
.listen-links a.apple:hover { border-color: #8F53B3; background: #8F53B315; }

.listen-links a.linkedin,
footer .socials a.linkedin { color: #0A66C2; }
.listen-links a.linkedin:hover { border-color: #0A66C2; background: #0A66C215; }

/* ---------- Blog list ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }

.post-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.post-item .date {
  font-size: 13px;
  color: #6b7a83;
  margin: 0 0 6px;
}

.post-item h3 { font-size: 20px; margin: 0 0 8px; }
.post-item p { color: #47555f; margin: 0; font-size: 15px; }

/* ---------- Post page ---------- */
.post-header { padding: 56px 0 24px; border-bottom: 1px solid var(--line); }
.post-header h1 { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--navy-deep); margin: 0 0 10px; line-height: 1.05; }
.post-header .date { color: #6b7a83; font-size: 14px; }

.post-body {
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.75;
  padding: 40px 0 80px;
}
.post-body h2 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 600; margin-top: 2em; }
.post-body a { text-decoration: underline; }

/* ---------- About ---------- */
.about-block { padding: 64px 0; }
.about-block .wrap { display: flex; gap: 48px; align-items: flex-start; }
.about-photo { width: 220px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.about-photo img { width: 100%; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  font-size: 13.5px;
  color: #6b7a83;
}
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .hero .wrap { flex-direction: column; }
  .hero h1 { font-size: 48px; }
  .hero-art { width: 100%; }
  .about-block .wrap { flex-direction: column; }
  .about-photo { width: 140px; }
}
/* ---------- Marchés en direct ---------- */
.market-updated {
  font-size: 12.5px;
  color: #6b7a83;
  font-weight: 500;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.market-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
}

.market-label {
  font-size: 13px;
  color: #6b7a83;
  font-weight: 600;
  margin: 0 0 10px;
}

.market-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: var(--navy-deep);
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

.market-value span {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #6b7a83;
  margin-left: 4px;
}

.market-value.market-pending { color: #c3ccd2; }

.market-sub {
  font-size: 13px;
  color: #6b7a83;
  margin: 0;
}

/* ================================================================
   UPGRADE — plus de caractère visuel, palette sobre et élégante
   ================================================================ */

:root {
  --deep: #17255f;
  --teal: #00817d;
  --teal-deep: #00625f;
}

/* --- Eyebrow devient un badge discret --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(23, 37, 95, 0.06);
  border: 1px solid rgba(23, 37, 95, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: var(--deep);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
}


/* --- Séparateur net entre hero et le reste --- */
.hero {
  border-bottom: 3px solid var(--deep);
}

/* --- Cartes épisodes/posts : relief discret au survol --- */
.card,
.market-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(23, 37, 95, 0.10);
  border-color: rgba(23, 37, 95, 0.18);
}

.listen-links a.spotify:hover,
footer .socials a.spotify:hover { border-color: var(--teal); }

/* --- Cartes marché : marine + sarcelle, sans surcharge de couleurs --- */
.market-card {
  border-top: 4px solid var(--line);
  position: relative;
  overflow: hidden;
}
.market-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(23, 37, 95, 0.10);
}

.market-card--oil { border-top-color: var(--deep); }
.market-card--oil .market-value { color: var(--deep); }

.market-card--power { border-top-color: var(--teal); }
.market-card--power .market-value { color: var(--teal-deep); }

.market-card--mix { border-top-color: var(--navy); }
.market-card--mix .market-value { color: var(--navy-deep); }

/* --- Section headers avec un trait d'accent sarcelle, discret --- */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--teal);
}

/* --- Alternance de fond, tres subtile --- */
section.block.alt {
  background: linear-gradient(180deg, var(--paper-dim) 0%, #e7edf0 100%);
}

/* --- Liens d'écoute : leger relief au survol --- */
.listen-links a,
footer .socials a {
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.listen-links a:hover,
footer .socials a:hover {
  transform: translateY(-2px) scale(1.05);
}

/* ================================================================
   HERO — fond degrade marine profond
   ================================================================ */

.hero {
  background: linear-gradient(160deg, #17255f 0%, #0d1638 100%);
  border-bottom: none;
}

.hero .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}
.hero .eyebrow::before {
  background: var(--teal);
}

.hero h1 {
  color: #ffffff;
  text-shadow: none;
}

.hero h1 em {
  color: rgba(255, 255, 255, 0.65);
  text-shadow: none;
}

.hero p.lead {
  color: rgba(255, 255, 255, 0.78);
}


.hero-art {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* ================================================================
   PAGE ÉPISODES — bandeau + cartes avec pochette
   ================================================================ */

.episodes-header {
  background: linear-gradient(160deg, #17255f 0%, #0d1638 100%);
  padding: 56px 0 48px;
}
.episodes-header .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}
.episodes-header .eyebrow::before { background: var(--teal); }
.episodes-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: #ffffff;
  margin: 14px 0 10px;
  letter-spacing: 0.5px;
}
.episodes-header .lead-sm {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  max-width: 52ch;
  margin: 0;
}

.card-grid--episodes {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card--episode {
  padding: 0;
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 180px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.card--episode:hover .card-thumb img {
  transform: scale(1.05);
}

.card-thumb-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(23, 37, 95, 0.85);
  color: #ffffff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.card--episode .card-body {
  padding: 20px 22px 22px;
}

.card--episode h3 {
  font-size: 17px;
  line-height: 1.3;
}
.post-episode-card {
  max-width: 460px;
  margin: 24px auto 32px;
}
.post-header-banner h1 {
  font-size: 40px;
  margin: 14px 0 6px;
}
.post-header-banner .lead-sm {
  font-size: 14px;
  opacity: 0.7;
}
.about-banner {
  padding-bottom: 40px;
}

.about-block {
  padding: 56px 0 72px;
}
.about-block .wrap {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.about-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  width: 160px;
}

.about-photo {
  width: 140px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(23, 37, 95, 0.18);
  border: 1px solid var(--line);
}
.about-photo img {
  width: 100%;
  display: block;
}

.about-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-contact-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.about-contact-icon.linkedin {
  color: #0A66C2;
}
.about-contact-icon:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: #0A66C2;
}

@media (max-width: 760px) {
  .about-block .wrap {
    flex-direction: column;
  }
  .about-side {
    width: auto;
  }
}
.card--post {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card--post:hover {
  text-decoration: none;
}

.post-card-date {
  font-size: 12.5px;
  color: #6b7a83;
  margin: 0 0 6px;
  font-weight: 600;
}

.post-hero-image {
  max-width: 700px;
  max-height: 320px;
  margin: -24px auto 0;
  padding: 0 28px;
  overflow: hidden;
  border-radius: 12px;
}
.post-hero-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(23, 37, 95, 0.2);
}

@media (max-width: 760px) {
  .post-hero-image {
    margin-top: -20px;
  }
}
.card-grid--blog {
  grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
}

/* ================================================================
   BOUTON ÉCOUTER + MENU DÉROULANT
   ================================================================ */

/* ================================================================
   CARTE ÉPISODE DANS UN ARTICLE DE BLOG : corrections
   ================================================================ */

.post-episode-card .card-thumb {
  max-height: none;
}

.post-episode-card,
.post-episode-card *:not(i) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.post-episode-card h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================================================================
   ÉPISODE EN VEDETTE (page épisodes)
   ================================================================ */

.card--featured {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.card--featured .card-thumb {
  width: 42%;
  max-height: none;
  aspect-ratio: auto;
  flex-shrink: 0;
}
.card--featured .card-body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card--featured h3 {
  font-size: 24px;
}
.card--featured p {
  font-size: 15.5px;
}

.card-featured-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--teal);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.card-grid--rest {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 760px) {
  .card--featured {
    flex-direction: column;
  }
  .card--featured .card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}
.card--featured {
  overflow: visible;
}
.card--featured .card-thumb {
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}


/* ================================================================
   MARCHÉS EN DIRECT — terminal de trading
   ================================================================ */

.markets {
  background: linear-gradient(160deg, #0d1638 0%, #17255f 100%);
  padding: 56px 0;
}

.markets .section-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.markets .section-head::after {
  background: var(--teal);
}
.markets .section-head h2 {
  color: #ffffff;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 6px;
  box-shadow: 0 0 8px var(--teal);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.market-updated {
  color: rgba(255, 255, 255, 0.55);
}

.market-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 20px 22px;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.market-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}

.market-card--oil { border-top-color: var(--coral, #e8703a); }
.market-card--power { border-top-color: var(--teal); }
.market-card--mix { border-top-color: #6fa9d6; }

.market-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.market-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.market-card .market-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.market-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}
.market-value span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}
.market-value.market-pending {
  color: rgba(255, 255, 255, 0.3);
}

.market-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
}

.market-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 8px;
  padding: 3px 9px;
  border-radius: 4px;
}
.market-trend.up { color: #ff6b5b; background: rgba(255, 107, 91, 0.12); }
.market-trend.down { color: #3ddc97; background: rgba(61, 220, 151, 0.12); }
.market-trend.flat { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }

.market-card .market-label {
  margin: 0;
}

.market-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 2px 0 6px;
  padding: 3px 9px;
  border-radius: 999px;
}
.market-trend.up { color: #b3391f; background: rgba(179, 57, 31, 0.08); }
.market-trend.down { color: #1a7a4c; background: rgba(26, 122, 76, 0.08); }
.market-trend.flat { color: #6b7a83; background: rgba(107, 122, 131, 0.08); }

/* Correctif visibilité des chiffres sur fond sombre */
.markets .market-value {
  color: #ffffff !important;
}
.markets .market-value span {
  color: rgba(255, 255, 255, 0.5) !important;
}
.markets .market-label {
  color: rgba(255, 255, 255, 0.55) !important;
}
.markets .market-sub {
  color: rgba(255, 255, 255, 0.45) !important;
}


/* ================================================================
   GADGETS — jauge CO2 + tracker Ormuz, style terminal
   ================================================================ */

.gadgets {
  background: linear-gradient(160deg, #0d1638 0%, #17255f 100%);
  padding: 56px 0;
}

.gadgets-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.gadget-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 22px;
  backdrop-filter: blur(6px);
}

.gadget-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}

.co2-gauge {
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
}
.co2-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 700;
  display: block;
}
.co2-unit {
  font-size: 12px;
  opacity: 0.7;
}

.co2-low { color: #3ddc97; }
.co2-mid { color: #e8b33a; }
.co2-high { color: #ff6b5b; }

.gadget-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 10px 0 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}

.ormuz-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.ormuz-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.ormuz-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
.ormuz-fallback a {
  color: var(--teal);
}

@media (max-width: 760px) {
  .gadgets-grid {
    grid-template-columns: 1fr;
  }
}
.market-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-style: italic;
}
.mix-breakdown {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mix-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.mix-row-label {
  width: 78px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.65);
}

.mix-row-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mix-row-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
}

.mix-row-value {
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.85);
}

/* ================================================================
   BADGE CO2 + MINI-BARRE (carte Mix, accueil)
   ================================================================ */

.mix-co2-badge {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #3ddc97;
  background: rgba(61, 220, 151, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}

.mix-mini-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.mix-mini-seg {
  height: 100%;
  background: var(--teal);
}
.mix-mini-seg:nth-child(2) { background: #3ddc97; }
.mix-mini-seg:nth-child(3) { background: #6fa9d6; }
.mix-mini-seg:nth-child(4) { background: #e8703a; }
.mix-mini-seg:nth-child(5) { background: #e8b33a; }
.mix-mini-seg:nth-child(6) { background: rgba(255,255,255,0.3); }

/* ================================================================
   TRAFIC MARITIME — cartes AIS (générique, plusieurs détroits)
   ================================================================ */

.ais-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.ais-embed-wrap--hero {
  aspect-ratio: 21 / 9;
}
.ais-frame {
  width: 100%;
  height: 100%;
  border: none;
}
.ais-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
.ais-fallback a.inc-all { margin: 0; align-self: center; color: #fff; }
.ais-fallback { z-index: 1; background: rgba(13, 22, 56, 0.92); }
.ais-retry {
  background: var(--teal);
  border: none;
  color: #fff;
  font: 600 13px 'Inter', sans-serif;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
}
.ais-retry:hover { background: var(--teal-deep); }

.ormuz-hero {
  margin-top: 20px;
}

.strait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ================================================================
   GADGET CARD générique (réutilisée sur plusieurs pages)
   ================================================================ */

.gadget-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 22px;
  backdrop-filter: blur(6px);
}
.gadget-card--full {
  width: 100%;
}
.gadget-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}
.gadget-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 10px 0 0;
  font-family: 'JetBrains Mono', monospace;
}

.co2-gauge {
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  min-width: 140px;
  flex-shrink: 0;
}
.co2-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 700;
  display: block;
}
.co2-unit {
  font-size: 12px;
  opacity: 0.7;
}
.co2-low { color: #3ddc97; }
.co2-mid { color: #e8b33a; }
.co2-high { color: #ff6b5b; }

.mix-detail-top {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.mix-breakdown {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mix-breakdown--wide {
  flex: 1;
  min-width: 220px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.mix-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.mix-row-label {
  width: 78px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.65);
}
.mix-row-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mix-row-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
}
.mix-row-value {
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.85);
}

.mkt-updated-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 20px 0 0;
}

/* ================================================================
   PAGE /marches/ — onglets
   ================================================================ */

.mkt-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mkt-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkt-tab-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.mkt-tab-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.mkt-panel {
  display: none;
}
.mkt-panel.active {
  display: block;
}

.mkt-weekly {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px 22px;
}
.mkt-weekly-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}
.mkt-weekly-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-weekly-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.mkt-weekly-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: #fff;
}
.mkt-weekly-value.up { color: #ff6b5b; }
.mkt-weekly-value.down { color: #3ddc97; }

@media (max-width: 760px) {
  .strait-grid {
    grid-template-columns: 1fr;
  }
  .mix-detail-top {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ================================================================
   PAGE /marches/ — panneaux marine sur fond blanc
   ================================================================ */

.mkt-page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--navy-deep);
  margin: 0 0 18px;
  letter-spacing: 0.5px;
}

.mkt-panel-card {
  background: linear-gradient(160deg, #17255f 0%, #0d1638 100%);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(23, 37, 95, 0.18);
  margin-bottom: 40px;
}
.mkt-panel-card--map {
  padding: 22px;
}

.market-grid--detail {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mkt-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mkt-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
.mkt-badge.up { color: #ff6b5b; background: rgba(255, 107, 91, 0.14); }
.mkt-badge.down { color: #3ddc97; background: rgba(61, 220, 151, 0.14); }

.mkt-sparkline {
  width: 100%;
  height: 30px;
  display: block;
  margin: 10px 0 4px;
}

.mkt-updated-footer--light {
  color: #6b7a83;
}
.mkt-updated-footer--light .live-dot {
  background: var(--teal);
  box-shadow: none;
}

.ais-embed-wrap--hero {
  aspect-ratio: 21 / 9;
}

@media (max-width: 760px) {
  .ais-embed-wrap--hero {
    aspect-ratio: 16 / 9;
  }
}

/* ================================================================
   NAV MOBILE — menu hamburger
   ================================================================ */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
}

@media (max-width: 760px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #17255f;
    padding: 12px 24px 20px;
    gap: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-nav .wrap {
    position: relative;
  }
}

/* Correctifs page /marches/ : lisibilité + espacement */
.mkt-panel-card .market-value {
  color: #ffffff !important;
}
.mkt-panel-card .market-value span {
  color: rgba(255, 255, 255, 0.5) !important;
}

.mkt-block {
  padding: 32px 0;
}
.mkt-panel-card {
  margin-bottom: 20px;
}
.mkt-panel-card:last-child {
  margin-bottom: 0;
}

.mix-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
}

.mix-detail-top {
  align-items: flex-start;
}

.mix-detail-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mix-col-caption {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
  max-width: 140px;
}

/* Mix & carbone — agencement en 2 colonnes (option B) */
.mix-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
}

.mix-split {
  display: grid;
  grid-template-columns: 1fr 1px 2fr;
  gap: 24px;
  align-items: start;
}

.mix-split-divider {
  background: rgba(255, 255, 255, 0.1);
  height: 100%;
  min-height: 140px;
}

.mix-split-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

.mix-split-col--co2 {
  text-align: center;
}
.mix-co2-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  font-weight: 700;
  color: #3ddc97;
  margin: 0;
  line-height: 1;
}
.mix-co2-unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin: 6px 0 0;
}

@media (max-width: 640px) {
  .mix-split {
    grid-template-columns: 1fr;
  }
  .mix-split-divider {
    display: none;
  }
  .mix-split-col--co2 {
    text-align: left;
  }
}

/* ================================================================
   HENRY HUB + BADGES DE TRAFIC MARITIME
   ================================================================ */

.traffic-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.traffic-badge.fluide {
  color: #3ddc97;
  background: rgba(61, 220, 151, 0.14);
}
.traffic-badge.partiel {
  color: #e8b33a;
  background: rgba(232, 179, 58, 0.14);
}
.traffic-badge.ferme {
  color: #ff6b5b;
  background: rgba(255, 107, 91, 0.14);
}

.mkt-traffic-stats {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
  margin: 0 0 14px;
}

.market-card--gas { border-top-color: #e8b33a; }

/* Correctif visibilité des titres sur les cartes trafic maritime */
.mkt-panel-card--map .gadget-label {
  color: rgba(255, 255, 255, 0.75) !important;
}
.gadget-label {
  color: rgba(255, 255, 255, 0.75) !important;
}

.mkt-traffic-stats {
  color: rgba(255, 255, 255, 0.7) !important;
}
.mkt-flip-outer {
  overflow: visible !important;
  perspective: 1000px;
  cursor: pointer;
  transform: none !important;
}

.mkt-flip-inner {
  position: relative;
  width: 100%;
  min-height: 230px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.mkt-flip-outer.flipped .mkt-flip-inner { transform: rotateY(180deg); }

.mkt-flip-front, .mkt-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}

.mkt-flip-front {
  background: rgba(255,255,255,0.05);
  position: relative;
}
.mkt-flip-back {
  background: #0d1638;
  transform: rotateY(180deg);
}

.mkt-commodity-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 23px;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 2px 0 8px;
}
.mkt-commodity-name--sm { font-size: 16px; margin: 0; color: #ffffff; }

.mkt-flip-hint {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Titre sur la 1re ligne, boutons sur la 2e : titre + 4 boutons ne tiennent pas
   sur une ligne dans une carte étroite (le bouton d'agrandissement débordait) */
.mkt-flip-back-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.mkt-flip-back-head .mkt-commodity-name--sm { white-space: nowrap; }
.mkt-flip-back-head .mkt-expand-btn { margin-left: auto; }
.mkt-period-btns { display: flex; gap: 5px; }
.period-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e2e8f5;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.period-btn.active { background: #e8703a; border-color: #e8703a; color: #fff; }
.period-btn:hover:not(.active) { background: rgba(255,255,255,0.2); }

.mkt-chart-wrap { flex: 1; position: relative; min-height: 130px; }
.mkt-chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.market-card--oil.mkt-flip-outer { border-top: 3px solid #e8703a; }
.market-card--power.mkt-flip-outer { border-top: 3px solid #00817d; }
.market-card--gas.mkt-flip-outer { border-top: 3px solid #e8b33a; }

/* ===== Vue agrandie des graphiques marché ===== */
.mkt-expand-btn { font-size: 13px; line-height: 1; padding: 4px 8px; }
.mkt-ma-btn.active { background: #ffffff; border-color: #ffffff; color: #0d1638; }

.mkt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 28, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mkt-modal[hidden] { display: none; }

.mkt-modal-box {
  width: min(1000px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px;
  background: linear-gradient(160deg, #17255f, #0d1638);
  border-top: 3px solid #00817d;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #fff;
}

.mkt-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mkt-modal-head .mkt-commodity-name { font-size: 30px; margin: 0; }
.mkt-modal-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.mkt-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.mkt-modal-close:hover { background: rgba(255, 255, 255, 0.2); }

.mkt-modal-chart { position: relative; height: 420px; }
.mkt-modal-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.mkt-modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.mkt-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.mkt-modal-stat .mkt-weekly-value { font-size: 18px; white-space: nowrap; }
.mkt-modal-stat .mkt-weekly-value small { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.mkt-modal-stat-sub { font-size: 11px; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 640px) {
  .mkt-modal { padding: 0; }
  .mkt-modal-box { height: 100%; border-radius: 0; padding: 18px 16px; }
  .mkt-modal-chart { height: auto; flex: 1; min-height: 260px; }
  .mkt-modal-head .mkt-commodity-name { font-size: 24px; }
  /* Croix toujours en haut à droite de l'écran, même en faisant défiler */
  .mkt-modal-head { padding-right: 48px; }
  .mkt-modal-close { position: fixed; top: 14px; right: 14px; z-index: 2; background: rgba(13, 22, 56, 0.9); }
}
.mkt-modal-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== Détroits : tableau de bord par détroit ===== */
.mt-section-note { color: #5a6b7b; font-size: 13px; margin: -6px 0 18px; }
.mt-card {
  background: linear-gradient(160deg, #17255f, #0d1638);
  border-radius: 16px;
  padding: 22px 24px;
  color: #fff;
  margin-bottom: 22px;
}
.mt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-card .mkt-commodity-name { margin: 0; font-size: 26px; }
.mt-badge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.mt-badge.fluide { background: rgba(61, 220, 151, 0.15); color: #3ddc97; }
.mt-badge.partiel { background: rgba(232, 179, 58, 0.15); color: #e8b33a; }
.mt-badge.ferme { background: rgba(255, 107, 91, 0.15); color: #ff6b5b; }

.mt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.mt-kpi { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 12px 14px; }
.mt-kpi-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.4px; }
.mt-kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; margin: 4px 0 2px; }
.mt-kpi-value small { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.mt-kpi-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.mt-kpi-note { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 0 0 14px; }
.mt-gauge { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin-top: 8px; position: relative; overflow: hidden; }
.mt-gauge span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.mt-gauge--ok { background: #3ddc97; }
.mt-gauge--mid { background: #e8b33a; }
.mt-gauge--low { background: #ff6b5b; }

.mt-chart { position: relative; height: 200px; }
.mt-chart--tall { height: 280px; }
.mt-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.mt-legend { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0 16px; }
.mt-sw { display: inline-block; width: 18px; border-top: 2px solid #e8703a; margin-right: -8px; vertical-align: middle; }
.mt-sw--ref { border-top: 2px dashed rgba(255, 255, 255, 0.6); }
.mt-sw--teal { border-top-color: #4fd1c5; }

.mt-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.mt-ctx-item { border-left: 3px solid #00817d; padding: 2px 0 2px 10px; }
.mt-ctx-item strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 17px; }
.mt-ctx-item span { font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.mt-src { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin: 8px 0 6px; }
.mt-src a, .mt-more a { color: #4fd1c5; }
.mt-more { font-size: 13px; font-weight: 600; margin: 10px 0 0; }

.mt-map { margin: 18px 0 0; }
.mt-map-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px 'Inter', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #4fd1c5; }
.mt-live i { width: 7px; height: 7px; border-radius: 50%; background: #4fd1c5; animation: nw-pulse 1.4s infinite; }
.mt-map-note { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.mt-map .ais-embed-wrap { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }

@media (max-width: 640px) {
  .mt-card { padding: 18px 16px; }
  .mt-card .mkt-commodity-name { font-size: 22px; }
  .mt-kpi-value { font-size: 20px; }
}

/* ===== Bandeau « Dernières infos » : un titre à la fois, défilement vertical ===== */
.nw-section { padding: 18px 0 0; }
.nw-bar { display: flex; align-items: stretch; background: #0d1638; border-radius: 10px; overflow: hidden; color: #fff; min-height: 46px; }
.nw-label {
  flex: none; display: flex; align-items: center; gap: 8px; background: #e8703a; padding: 0 14px;
  font: 700 12px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap;
}
.nw-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nw-pulse 1.4s infinite; }
@keyframes nw-pulse { 50% { opacity: 0.25; } }
.nw-list { flex: 1; min-width: 0; position: relative; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.nw-slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform 0.6s ease, opacity 0.6s ease, visibility 0s linear 0.6s;
}
.nw-slide.is-active { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.6s ease, opacity 0.6s ease; }
.nw-slide.is-leaving { transform: translateY(-100%); opacity: 0; visibility: visible; transition: transform 0.6s ease, opacity 0.6s ease; }
.nw-slide a { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 0 16px; color: #fff; text-decoration: none; font-size: 14px; }
.nw-slide a:hover .nw-title, .nw-slide a:focus .nw-title { color: #4fd1c5; }
.nw-src { flex: none; font-weight: 700; color: #4fd1c5; font-size: 12px; }
.nw-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-time { flex: none; color: rgba(255, 255, 255, 0.5); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.nw-count { flex: none; display: flex; align-items: center; padding: 0 12px; font: 12px 'JetBrains Mono', monospace; color: rgba(255, 255, 255, 0.45); }
.nw-note { font-size: 11px; color: #5a6b7b; margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .nw-slide, .nw-slide.is-active, .nw-slide.is-leaving { transition: none; }
}
/* Téléphone : libellé en bandeau fin au-dessus, titre sur toute la largeur (3 lignes max) */
@media (max-width: 640px) {
  .nw-bar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 30px 92px; }
  .nw-label { grid-column: 1; grid-row: 1; padding: 0 14px; font-size: 11px; }
  .nw-count { grid-column: 2; grid-row: 1; background: #e8703a; color: rgba(255, 255, 255, 0.85); padding: 0 14px; font-size: 11px; }
  .nw-list { grid-column: 1 / -1; grid-row: 2; }
  .nw-slide a { flex-wrap: wrap; align-content: center; gap: 4px 8px; padding: 10px 14px; font-size: 14.5px; line-height: 1.35; }
  .nw-title { flex-basis: 100%; order: 3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}

/* ===== Incidents : carte ===== */
.inc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.inc-chip {
  font: 700 12px 'Inter', sans-serif; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c); background: transparent; color: var(--c);
}
.inc-chip.active { background: var(--c); color: #0d1638; }
#inc-map { height: 440px; border-radius: 10px; background: #0d1638; }
.inc-tiles { filter: invert(1) hue-rotate(200deg) brightness(0.9) contrast(0.85) saturate(0.6); }
.inc-list-title { font: 700 13px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.6); margin: 20px 0 10px; }
.inc-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(255, 255, 255, 0.15); }
.inc-list li { position: relative; padding: 0 0 14px 10px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.inc-list li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #0d1638; }
.inc-list time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-right: 6px; }
.inc-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); margin-right: 4px; }
.inc-vessel { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.inc-card .leaflet-popup-content { font: 13px/1.4 'Inter', sans-serif; }
@media (max-width: 640px) { #inc-map { height: 340px; } }

/* ===== Page Marchés : sommaire, « À retenir », rubriques ===== */
.mk-toc {
  position: sticky; top: 64px; z-index: 15;
  background: rgba(247, 249, 250, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); margin-top: 18px;
}
.mk-toc .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.mk-toc .wrap::-webkit-scrollbar { display: none; }
.mk-toc a {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font: 600 13px 'Inter', sans-serif; color: #17255f; text-decoration: none; border: 1px solid transparent;
}
.mk-toc a:hover, .mk-toc a.is-current { background: #fff; border-color: #d8e1e6; }
.mk-toc a.is-current { color: #00817d; border-color: #00817d; }
.mk-toc i { font-size: 12px; color: #00817d; }
.mk-toc .mk-toc-minor { margin-left: auto; color: #5a6b7b; font-weight: 500; }

.mk-glance { padding: 22px 0 6px; }
.mk-glance-title { font: 700 12px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; color: #5a6b7b; margin: 0 0 10px; }
.mk-glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.mk-glance-item {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: #fff; border: 1px solid #d8e1e6; transition: border-color 0.2s, transform 0.2s;
}
.mk-glance-item:hover { border-color: #00817d; transform: translateY(-2px); }
.mk-glance-label { font-size: 12px; color: #5a6b7b; }
.mk-glance-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; color: #17255f; }
.mk-glance-value small { font-family: 'Inter', sans-serif; font-size: 12px; color: #5a6b7b; }
.mk-glance-value.up { color: #d9463a; }
.mk-glance-value.down { color: #1f9d6b; }
.mk-glance-sub { font-size: 12px; color: #5a6b7b; }

.mk-section { padding: 44px 0 28px; scroll-margin-top: 120px; }
.mk-section--alt { background: var(--paper-dim); }
.mk-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.mk-head .mkt-page-title { margin: 0 0 4px; font-size: 30px; }
.mk-head-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: #17255f; color: #fff; font-size: 18px;
}
.mk-head-icon--power { background: #00817d; }
.mk-head-icon--oil { background: #e8703a; }
.mk-head-icon--sea { background: #2f6f8f; }
.mk-head-icon--risk { background: #d9463a; }
.mk-lead { margin: 0; font-size: 14px; color: #5a6b7b; max-width: 720px; }
.mt-card, .mt-brent { scroll-margin-top: 120px; }


.mk-straits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.mk-strait {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: #fff; border: 1px solid #d8e1e6; border-top: 4px solid #a0aec0;
}
.mk-strait.fluide { border-top-color: #1f9d6b; }
.mk-strait.partiel { border-top-color: #e8b33a; }
.mk-strait.ferme { border-top-color: #d9463a; }
.mk-strait:hover { border-color: #00817d; }
.mk-strait-name { font: 600 13px 'Inter', sans-serif; color: #17255f; }
.mk-strait-pct { font-family: 'JetBrains Mono', monospace; font-size: 26px; color: #17255f; }
.mk-strait-sub { font-size: 12px; color: #5a6b7b; }
.mk-strait-bar { height: 5px; background: #eef2f4; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.mk-strait-bar span { display: block; height: 100%; background: #17255f; border-radius: 3px; }
@media (max-width: 640px) {
  .mk-straits { grid-template-columns: 1fr; }
  .mk-head .mkt-page-title { font-size: 26px; }
}

.mk-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.mk-sources div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid #d8e1e6; border-radius: 10px; }
.mk-sources strong { font-size: 13px; color: #17255f; }
.mk-sources span { font-size: 13px; color: #1a2733; }
.mk-sources em { font-style: normal; font-size: 12px; color: #00817d; }

/* ===== Accueil : « Le point marchés » ===== */
.hq-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 150px 130px; align-items: center; gap: 16px;
  padding: 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none;
  transition: background 0.15s ease;
}
a.hq-row:hover { background: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; }
.hq-head { padding-top: 10px; padding-bottom: 10px; font: 600 11px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.hq-head span:nth-child(4) { text-align: right; }
.hq-name { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 15px; }
.hq-name small, .hq-inc-text small { font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.hq-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; white-space: nowrap; }
.hq-value small { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.hq-change .mt-badge { font-size: 11px; padding: 3px 10px; }
.hq-trend { display: flex; justify-content: flex-end; }
.hq-spark { display: block; overflow: visible; }
.hq-spark polyline { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hq-spark circle { fill: #fff; }
.hq-bar { display: block; width: 114px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.hq-bar i { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: #3ddc97; }
.hq-bar--partiel i { background: #e8b33a; }
.hq-bar--ferme i { background: #ff6b5b; }
.hq-incidents { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; background: rgba(255, 107, 91, 0.07); }
.hq-incidents .hq-name i { color: #ff6b5b; font-size: 13px; margin-right: 6px; }
.hq-incidents .hq-name { display: block; }
.hq-incidents .hq-name small { display: block; margin-top: 2px; }
.hq-inc-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.hq-inc-text b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 18px; color: #fff; margin-right: 4px; }
.hq-incidents .inc-all { margin: 0; justify-self: end; align-self: center; }
@media (max-width: 760px) {
  .hq-head { display: none; }
  .hq-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 4px; }
  .hq-name { grid-column: 1; grid-row: 1; }
  .hq-trend { grid-column: 2; grid-row: 1; }
  .hq-value { grid-column: 1; grid-row: 2; font-size: 22px; }
  .hq-change { grid-column: 2; grid-row: 2; justify-self: end; }
  .hq-spark, .hq-bar { width: 96px; }
  .hq-incidents { grid-template-columns: 1fr; padding: 14px 12px; }
  .hq-incidents > * { grid-column: 1 !important; grid-row: auto !important; }
  .hq-incidents .inc-all { justify-self: start; }
}

/* ===== Électricité France : carte prix + mix ===== */
.pw-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: linear-gradient(160deg, #17255f 0%, #0d1638 100%); border-radius: 16px; color: #fff;
  box-shadow: 0 16px 40px rgba(23, 37, 95, 0.18); overflow: hidden;
}
.pw-price, .pw-mix { padding: 26px 28px; display: flex; flex-direction: column; }
.pw-mix { background: rgba(255, 255, 255, 0.03); border-left: 1px solid rgba(255, 255, 255, 0.08); }
.pw-top { display: flex; justify-content: space-between; align-items: center; }
.pw-label { margin: 0; font: 700 11px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.pw-value { margin: 10px 0 2px; font-family: 'JetBrains Mono', monospace; font-size: 44px; line-height: 1.1; color: #fff; }
.pw-value small { font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(255, 255, 255, 0.55); }
.pw-sub { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.pw-mix .pw-sub { margin-top: auto; padding-top: 14px; }
.pw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.pw-stats div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.pw-stats span { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.pw-stats strong { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; }
.pw-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pw-chart-head > span { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.pw-chart { position: relative; height: 170px; }
.pw-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.pw-co2 { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; }
.pw-co2-value { font-family: 'JetBrains Mono', monospace; font-size: 44px; line-height: 1; }
.pw-co2-text { display: flex; flex-direction: column; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.pw-co2-text strong { font-size: 14px; }
.pw-co2--low .pw-co2-value, .pw-co2--low strong { color: #3ddc97; }
.pw-co2--mid .pw-co2-value, .pw-co2--mid strong { color: #e8b33a; }
.pw-co2--high .pw-co2-value, .pw-co2--high strong { color: #ff6b5b; }
.pw-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, 0.08); gap: 2px; }
.pw-stack span { display: block; height: 100%; min-width: 3px; }
.pw-legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.pw-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.pw-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pw-legend b { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; }
.pw-src--nucleaire { background: #8b7cf6; }
.pw-src--eolien { background: #4fd1c5; }
.pw-src--solaire { background: #f6c343; }
.pw-src--hydraulique { background: #3b82f6; }
.pw-src--gaz { background: #e8703a; }
.pw-src--bioenergies { background: #3ddc97; }
.pw-src--thermique { background: #a0aec0; }
@media (max-width: 860px) {
  .pw-card { grid-template-columns: 1fr; }
  .pw-mix { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}
@media (max-width: 480px) {
  .pw-price, .pw-mix { padding: 20px 18px; }
  .pw-value, .pw-co2-value { font-size: 36px; }
  .pw-legend { grid-template-columns: 1fr; }
}

/* ===== Incidents : liste courte à côté de la carte ===== */
.inc-latest { margin-top: 18px; }
.inc-list li { padding-bottom: 12px; }
.inc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inc-where { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.inc-sum {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== Variation des prix (flèche vs cours précédent) ===== */
.px-change {
  display: inline-flex; align-items: baseline; gap: 4px; font: 700 13px 'Inter', sans-serif;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.px-change small { font-weight: 500; font-size: 11px; opacity: 0.75; margin-left: 2px; }
.px-change--up { color: #ff6b5b; background: rgba(255, 107, 91, 0.14); }
.px-change--down { color: #3ddc97; background: rgba(61, 220, 151, 0.14); }
.px-change--flat { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.market-change { margin: 2px 0 6px; }
.pw-value .px-change { margin-left: 12px; font-size: 14px; }

/* ===== Mix : source dominante et part bas carbone ===== */
.pw-stats--mix { grid-template-columns: 1fr 1fr; margin: 0 0 18px; }
.pw-stats--mix strong { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.pw-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* La carte Leaflet crée ses propres calques (z-index 400+) : on l'isole pour qu'elle
   ne passe pas par-dessus la barre du site et le sommaire au défilement */
#inc-map { position: relative; z-index: 0; isolation: isolate; }


/* ===== Option C : tableau de bord + détail en fenêtre ===== */
/* Pétrole et gaz : deux prix côte à côte, même style que la carte Électricité */
.pw-card--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pw-card--duo .pw-price + .pw-price { border-left: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 860px) {
  .pw-card--duo { grid-template-columns: 1fr; }
  .pw-card--duo .pw-price + .pw-price { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

.mk-more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mk-link-tile {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #dfe6ea; border-radius: 12px; padding: 14px 16px;
  font: 13px 'Inter', sans-serif; color: #5a6b7b; transition: border-color 0.2s, transform 0.2s;
}
.mk-link-tile:hover { border-color: #00817d; transform: translateY(-2px); }
.mk-link-tile > i { font-size: 20px; color: #e8703a; }
.mk-link-tile span { display: flex; flex-direction: column; gap: 2px; }
.mk-link-tile strong { font-size: 14px; color: #17255f; }
.mk-link-tile b { margin-left: auto; color: #00817d; font-size: 16px; }
.mk-soon {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px dashed #c5d0d6; font-size: 12.5px; color: #5a6b7b;
}
.mk-soon strong { font-size: 14px; color: #17255f; }
.mk-soon-tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #b7791f; }
@media (max-width: 860px) { .mk-more-row { grid-template-columns: 1fr; } }

/* Détroits : trois fiches compactes avec la carte en direct */
.cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, #17255f, #0d1638); border-top: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 40px rgba(23, 37, 95, 0.18); scroll-margin-top: 120px;
}
.cp-tile.fluide { border-top-color: #3ddc97; }
.cp-tile.partiel { border-top-color: #e8b33a; }
.cp-tile.ferme { border-top-color: #ff6b5b; }
.cp-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-tile-name { margin: 0; font: 400 24px 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 0.5px; }
.cp-tile .mt-badge { font-size: 11px; padding: 4px 10px; }
.cp-tile-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-tile-figs div { display: flex; flex-direction: column; gap: 2px; }
.cp-tile-figs strong { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; }
.cp-tile-figs strong.cp-tile-pct { font-size: 30px; line-height: 1.1; }
.cp-tile-figs span { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); line-height: 1.35; }
.cp-tile .mt-gauge { margin-top: 0; }
.cp-tile-map { aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); }
.cp-tile .mt-src { margin: -4px 0 0; }
@media (max-width: 960px) { .cp-grid { grid-template-columns: 1fr; } }

/* Fenêtre de détail (élément <dialog> natif) */
.mk-dialog {
  width: min(960px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 24px 28px;
  border: none; border-top: 3px solid #00817d; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, #17255f, #0d1638); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.mk-dialog::backdrop { background: rgba(6, 10, 28, 0.72); backdrop-filter: blur(3px); }
.mk-dialog .mt-head { margin-bottom: 14px; }
.mk-dialog .mkt-commodity-name { margin: 0; font-size: 28px; }
.mk-dialog-tools { display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .mk-dialog { padding: 18px 16px; } }

/* Sécurité en mer : carte + chiffres 30 j et derniers incidents à côté */
.inc-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; }
.inc-side { display: flex; flex-direction: column; }
.inc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.inc-stats div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.inc-stats strong { font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 500; line-height: 1.1; }
.inc-stats strong.inc-stats-hot { color: #ff6b5b; }
.inc-stats span { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.inc-top { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.inc-side .inc-list-title { margin-top: 18px; }
.inc-side .inc-all { margin-top: auto; }
@media (max-width: 860px) { .inc-grid { grid-template-columns: 1fr; } }

/* ===== Rubriques Pétrole et Gaz ===== */
.mk-head-icon--gas { background: #b7791f; }
.pw-note { margin: 8px 0 12px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.pw-chart--tall { flex: 1; min-height: 260px; }
.pw-mix .mt-legend { margin: 10px 0 0; }
.mk-more-row { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.gz-list { list-style: none; margin: 12px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gz-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 10px 14px;
}
.gz-name { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; }
.gz-name i { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.gz-name strong { font-size: 15px; }
.gz-name span { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.gz-price { font-family: 'JetBrains Mono', monospace; font-size: 18px; text-align: right; white-space: nowrap; }
.gz-price small { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.gz-price .px-change { margin-left: 8px; font-size: 11.5px; }
.gz-sub { grid-column: 1 / -1; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
.gz-row--europe .gz-name i, .gz-sw--europe { background: #4fd1c5; }
.gz-row--asie .gz-name i, .gz-sw--asie { background: #f472b6; }
.gz-row--usa .gz-name i, .gz-sw--usa { background: #e8b33a; }
.gz-spreads { margin: 0 0 16px; }
.gz-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: -8px; vertical-align: middle; }
.gz-legend { margin: 8px 0 0; }
@media (max-width: 480px) {
  .gz-row { grid-template-columns: 1fr; }
  .gz-price { text-align: left; }
}
.gz-price .px-change small { display: none; }
.gz-name { overflow: hidden; }
.gz-name span { overflow: hidden; text-overflow: ellipsis; }

/* ===== Gaz : stocks européens ===== */
.gs-level .pw-co2-value { color: #4fd1c5; }
.gs-level .pw-co2-value small { font-size: 22px; margin-left: 2px; }
.gs-level strong { color: #fff; }
.gs-bar { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); overflow: visible; }
.gs-bar span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #00817d, #4fd1c5); }
.gs-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; }
.gs-bar-legend { display: flex; justify-content: space-between; margin: 5px 0 16px; font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.gs-bar-legend { position: relative; }
.gs-ly-mark { position: absolute; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.gs-down { color: #ff6b5b; }
.gs-up { color: #3ddc97; }
.gz-sw--ly { background: rgba(255, 255, 255, 0.55); }

/* ================================================================
   CHARTE : boutons et liens d'action (une seule définition)
   Principal = sarcelle plein · Secondaire = contour · Lien = pilule
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px 'Inter', sans-serif; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn i { font-size: 12px; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(0, 129, 125, 0.28); }
.btn-primary:hover { background: var(--teal-deep); color: #fff; box-shadow: 0 10px 24px rgba(0, 129, 125, 0.35); }
.btn-ghost { background: transparent; border-color: rgba(23, 37, 95, 0.25); color: var(--deep); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.hero .btn-ghost:hover { border-color: #4fd1c5; color: #4fd1c5; }

/* Bouton « Écouter » des cartes épisodes : principal, petite taille */
.btn-listen {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 999px; border: none; background: var(--teal); color: #fff;
  font: 600 13.5px 'Inter', sans-serif; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 129, 125, 0.25);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-listen:hover { background: var(--teal-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 129, 125, 0.32); }
.btn-listen i { font-size: 11px; }

/* Liens « Tout le détail → » : petite pilule, flèche sarcelle */
.section-head a, footer .socials a.footer-podcast-link, .post-body .bl-author-links a, .post-body .bl-back a {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  width: auto; height: auto; padding: 7px 15px; border-radius: 999px;
  background: rgba(23, 37, 95, 0.05); border: 1px solid rgba(23, 37, 95, 0.14);
  font: 600 13px 'Inter', sans-serif; color: var(--deep); text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.section-head a span, .footer-podcast-link span { color: var(--teal); transition: transform 0.15s ease; }
.section-head a:hover, footer .socials a.footer-podcast-link:hover, .post-body .bl-author-links a:hover, .post-body .bl-back a:hover { border-color: var(--teal); background: rgba(0, 129, 125, 0.06); color: var(--deep); text-decoration: none; }
.section-head a:hover span, .footer-podcast-link:hover span { transform: translateX(3px); }
.bl-author-links a i { font-size: 14px; color: var(--deep); }
footer .socials a.footer-podcast-link { margin-left: 6px; }
.markets .section-head a { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.markets .section-head a span { color: #4fd1c5; }
.markets .section-head a:hover { border-color: #4fd1c5; background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Liens d'action sur fond sombre (détroits, incidents) : même pilule que « Tout le détail » */
.mk-open, .inc-all {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  font: 600 13px 'Inter', sans-serif; color: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mk-open span, .inc-all span { color: #4fd1c5; transition: transform 0.15s ease; }
.mk-open:hover, .inc-all:hover { border-color: #4fd1c5; background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; }
.mk-open:hover span, .inc-all:hover span { transform: translate(2px, -2px); }
.inc-all:hover span { transform: translateX(3px); }
.mk-open { margin-top: auto; align-self: flex-start; }
.inc-all { align-self: flex-start; margin-top: auto; }

/* ================================================================
   CARTES ÉPISODES RETOURNABLES
   ================================================================ */
.ep-flip { perspective: 1400px; }
.ep-flip--featured { margin-bottom: 32px; }
.ep-flip-inner { position: relative; height: 100%; display: grid; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }
.ep-flip.flipped .ep-flip-inner { transform: rotateY(180deg); }
.ep-front, .ep-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ep-front { grid-area: 1 / 1; display: flex; flex-direction: column; }
.ep-front.card--featured { flex-direction: row; }
.ep-front .card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.ep-front .card-body .btn-listen { margin-top: auto; }
.ep-front.card--featured .card-body { justify-content: center; }
.ep-front.card--featured .card-body .btn-listen { margin-top: 0; }
.ep-flip.flipped .ep-front:hover { transform: none; }

.ep-back {
  grid-area: 1 / 1; position: relative; transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px 22px; border-radius: 10px; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, rgba(23, 37, 95, 0.94), rgba(13, 22, 56, 0.97)), var(--cover) center / cover;
  box-shadow: 0 14px 32px rgba(23, 37, 95, 0.22);
}
.ep-back-kicker { margin: 0; font: 700 11px 'Inter', sans-serif; letter-spacing: 0.8px; text-transform: uppercase; color: #4fd1c5; }
.ep-back-title { margin: 0 0 6px; font: 600 16px/1.35 'Inter', sans-serif; }
.ep-flip--featured .ep-back { padding: 32px 40px; }
.ep-flip--featured .ep-back-title { font-size: 22px; }
.ep-back-links { display: flex; flex-direction: column; gap: 8px; }
.ep-flip--featured .ep-back-links { flex-direction: row; flex-wrap: wrap; }
.ep-flip--featured .ep-link { flex: 1 1 180px; }
.ep-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff; font: 600 14px 'Inter', sans-serif; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ep-link i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #fff; flex: none; }
.ep-link--spotify i { color: #1BC257; }
.ep-link--apple i { color: #8F53B3; }
.ep-link--linkedin i { color: #0A66C2; }
.ep-link b { margin-left: auto; color: #4fd1c5; font-weight: 600; }
.ep-link:hover { background: rgba(255, 255, 255, 0.16); border-color: #4fd1c5; color: #fff; text-decoration: none; transform: translateY(-1px); }
.ep-back-close {
  align-self: flex-start; margin-top: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85);
  font: 600 12.5px 'Inter', sans-serif;
}
.ep-back-close:hover { border-color: #4fd1c5; color: #fff; }
@media (max-width: 760px) {
  .ep-front.card--featured { flex-direction: column; }
  .ep-flip--featured .ep-back-links { flex-direction: column; }
  /* en colonne, la base de 180 px devenait une hauteur : boutons géants sur téléphone */
  .ep-flip--featured .ep-link { flex: none; }
  .ep-flip--featured .ep-back { padding: 24px 22px; }
  .ep-flip--featured .ep-back-title { font-size: 18px; }
}
/* Écran tactile : le dos apparaît en fondu (la rotation 3D est capricieuse sur mobile, Safari surtout) */
@media (hover: none) {
  .ep-flip.flipped .ep-flip-inner { transform: none; }
  .ep-flip-inner { transition: none; }
  .ep-back { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .ep-flip.flipped .ep-back { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
  .card:hover, .card--episode:hover .card-thumb img { transform: none; }
}
.ep-flip .card-thumb-badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(23, 37, 95, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .ep-flip-inner { transition: none; }
}

/* Durée de l'épisode à côté du bouton « Écouter » */
.ep-actions { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ep-front .card-body .ep-actions .btn-listen { margin-top: 0; }
.ep-front.card--featured .card-body .ep-actions { margin-top: 0; }
.ep-duration { display: inline-flex; align-items: center; gap: 6px; font: 500 13px 'Inter', sans-serif; color: var(--muted, #5a6b7b); }
.ep-duration i { color: var(--teal); font-size: 12px; }

/* « Écouter ici » : premier choix au dos de la carte, en sarcelle */
.ep-link--here { width: 100%; cursor: pointer; text-align: left; background: var(--teal); border-color: var(--teal); }
.ep-link--here i { color: var(--teal); font-size: 12px; }
.ep-link--here b { color: rgba(255, 255, 255, 0.85); font: 500 12.5px 'JetBrains Mono', monospace; }
.ep-link--here:hover { background: var(--teal-deep); border-color: #4fd1c5; }

/* ================================================================
   LECTEUR DU PODCAST (barre fixée en bas)
   ================================================================ */
.pl-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 900; width: min(760px, calc(100% - 24px));
  display: none; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  background: linear-gradient(160deg, #17255f, #0d1638); color: #fff; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(6, 10, 28, 0.45);
  transform: translateX(-50%);
}
.pl-bar.is-open { display: flex; animation: pl-in 0.25s ease; }
@keyframes pl-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
html.has-player body { padding-bottom: 96px; }
.pl-cover { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.pl-info { display: flex; flex-direction: column; min-width: 0; width: 190px; flex: none; }
.pl-kicker { font: 700 10.5px 'Inter', sans-serif; letter-spacing: 0.7px; text-transform: uppercase; color: #4fd1c5; }
.pl-title { font: 600 13.5px 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-btn {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
  font: 600 11px 'Inter', sans-serif;
}
.pl-btn:hover { border-color: #4fd1c5; }
.pl-toggle { width: 42px; height: 42px; background: var(--teal); border-color: var(--teal); font-size: 14px; box-shadow: 0 6px 16px rgba(0, 129, 125, 0.35); }
.pl-toggle:hover { background: var(--teal-deep); }
.pl-progress { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pl-time, .pl-dur { font: 500 12px 'JetBrains Mono', monospace; color: rgba(255, 255, 255, 0.7); flex: none; }
.pl-seek {
  --p: 0%; flex: 1; min-width: 0; height: 5px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  border-radius: 3px; background: linear-gradient(90deg, #4fd1c5 var(--p), rgba(255, 255, 255, 0.18) var(--p));
}
.pl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.35); }
.pl-seek::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #fff; }
.pl-close { flex: none; background: none; border: none; color: rgba(255, 255, 255, 0.55); font-size: 15px; cursor: pointer; padding: 6px; }
.pl-close:hover { color: #fff; }
@media (max-width: 640px) {
  .pl-bar { flex-wrap: wrap; bottom: 10px; gap: 8px 10px; padding: 10px 12px; }
  .pl-info { flex: 1; width: auto; }
  .pl-back, .pl-fwd { display: none; }
  .pl-progress { order: 5; flex-basis: 100%; }
  html.has-player body { padding-bottom: 130px; }
}

/* ================================================================
   HERO : pochette retournable (plateformes + dernier épisode)
   ================================================================ */
.hero-flip { flex: 0.9; min-width: 0; }
.hero-flip .hero-art { flex: none; width: 100%; position: relative; }
.hero-flip-btn {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 22px; background: none; border: none; cursor: pointer;
}
.hero-flip-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
  background: var(--teal); color: #fff; font: 600 14.5px 'Inter', sans-serif;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease, background 0.15s ease;
}
.hero-flip-btn:hover .hero-flip-pill { background: var(--teal-deep); transform: translateY(-2px); }
.hero-back { border-radius: 14px; padding: 30px 28px; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.12); }
.hero-back .ep-back-title { font-size: 22px; }
.hero-platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-platforms .ep-link { flex: 1 1 150px; padding: 9px 12px; font-size: 13.5px; gap: 10px; }
.hero-platforms .ep-link i { width: 26px; height: 26px; font-size: 13px; }
.hero-latest { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hero-latest-title {
  margin: 0 0 4px; font: 600 15px/1.35 'Inter', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 760px) {
  .hero-flip { width: 100%; }
  .hero-back { padding: 24px 20px; }
}

/* Lecteur : bouton agrandir et grande vue (pochette, épisode, commandes, liens) */
.pl-expand { flex: none; background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 14px; cursor: pointer; padding: 6px; }
.pl-expand:hover { color: #4fd1c5; }
.pl-links { display: none; }
.pl-backdrop { position: fixed; inset: 0; z-index: 899; background: rgba(6, 10, 28, 0.72); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.pl-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }

.pl-bar.is-expanded {
  top: 50%; bottom: auto; width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  transform: translate(-50%, -50%); animation: pl-grow 0.25s ease;
  flex-wrap: wrap; justify-content: center; gap: 14px 14px; padding: 26px 26px 22px; border-radius: 22px; text-align: center;
}
@keyframes pl-grow { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pl-bar.is-expanded .pl-cover { order: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); }
.pl-bar.is-expanded .pl-info { order: 2; flex: 1 1 100%; width: auto; align-items: center; gap: 4px; }
.pl-bar.is-expanded .pl-kicker { font-size: 12px; }
.pl-bar.is-expanded .pl-title { white-space: normal; font-size: 18px; line-height: 1.35; }
.pl-bar.is-expanded .pl-progress { order: 3; flex: 1 1 100%; }
.pl-bar.is-expanded .pl-back, .pl-bar.is-expanded .pl-fwd { order: 4; display: grid; width: 44px; height: 44px; font-size: 12px; }
.pl-bar.is-expanded .pl-toggle { order: 4; width: 64px; height: 64px; font-size: 22px; }
.pl-bar.is-expanded .pl-links { order: 5; flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.pl-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; text-decoration: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font: 600 12.5px 'Inter', sans-serif;
}
.pl-link:hover { border-color: #4fd1c5; color: #fff; text-decoration: none; }
.pl-link--spotify i { color: #1BC257; }
.pl-link--apple i { color: #c77dff; }
.pl-link--linkedin i { color: #4ea1f3; }
.pl-bar.is-expanded .pl-expand, .pl-bar.is-expanded .pl-close { position: absolute; top: 10px; }
.pl-bar.is-expanded .pl-expand { right: 44px; }
.pl-bar.is-expanded .pl-close { right: 12px; }
.pl-bar.is-expanded .pl-cover { margin-top: 18px; }
@media (max-width: 640px) {
  .pl-bar.is-expanded { flex-wrap: wrap; }
  .pl-bar.is-expanded .pl-progress { order: 3; flex-basis: 100%; }
}

/* Carte épisode cliquable en entier */
.ep-front { cursor: pointer; }

/* Vignette : elle recouvre la bordure de 1 px de la carte (sinon liseré clair sur mobile) */
.ep-front .card-thumb { margin: -1px -1px 0; border-radius: 10px 10px 0 0; }
.ep-front.card--featured .card-thumb { margin: -1px 0 -1px -1px; border-radius: 10px 0 0 10px; }
@media (max-width: 760px) {
  .ep-front.card--featured .card-thumb { margin: -1px -1px 0; border-radius: 10px 10px 0 0; }
}

/* Cartes retournables (pochette du hero et épisodes) : la carte garde la taille de sa face avant ;
   le dos ne l'agrandit qu'une fois retournée (sinon vide sous la pochette ou dans les cartes) */
.ep-flip .ep-back { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; }
.ep-flip.flipped .ep-back { position: relative; }
@media (max-width: 760px) {
  .hero { padding: 64px 0 32px; }
  .hero .wrap { gap: 36px; }
}

/* Barre de chargement de Turbo entre deux pages */
.turbo-progress-bar { height: 3px; background: var(--teal); }

/* Vignettes des cartes épisodes : hauteur fixe. Avec « aspect-ratio 16/9 + max-height », Safari (iPhone)
   réduisait la largeur quand la hauteur était plafonnée : vide à droite de l'image sur les téléphones larges */
.ep-front .card-thumb { aspect-ratio: auto; height: 180px; max-height: none; }
.ep-front.card--featured .card-thumb { height: auto; }
@media (max-width: 760px) {
  .ep-front.card--featured .card-thumb { width: auto; height: 200px; }
}

/* ================================================================
   BLOG : article à la une, étiquettes, suivi
   ================================================================ */
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bl-tag { font: 600 11.5px 'Inter', sans-serif; padding: 3px 10px; border-radius: 999px; background: rgba(0, 129, 125, 0.1); color: var(--teal-deep); }
.bl-tag--new { background: var(--orange, #e8703a); color: #fff; }
.bl-tag--dark { background: rgba(255, 255, 255, 0.12); color: #4fd1c5; }

.bl-featured {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none;
  box-shadow: 0 16px 40px rgba(23, 37, 95, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bl-featured:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 22px 48px rgba(23, 37, 95, 0.14); }
.bl-featured-img { min-height: 300px; overflow: hidden; }
.bl-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bl-featured:hover .bl-featured-img img { transform: scale(1.04); }
.bl-featured-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.bl-featured-body h2 { margin: 0 0 8px; font: 700 26px/1.25 'Inter', sans-serif; color: var(--ink); }
.bl-meta { margin: 0 0 14px; font: 600 13px 'Inter', sans-serif; color: #6b7a83; }
.bl-excerpt { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: #47555f; }
.bl-read { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--teal); color: #fff; font: 600 14px 'Inter', sans-serif; }
.bl-read span { transition: transform 0.15s ease; }
.bl-featured:hover .bl-read { background: var(--teal-deep); }
.bl-featured:hover .bl-read span { transform: translateX(3px); }
.bl-more-head { margin-top: 48px; }
@media (max-width: 760px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured-img { min-height: 0; height: 200px; }
  .bl-featured-body { padding: 22px 20px; }
  .bl-featured-body h2 { font-size: 21px; }
}

.bl-follow {
  margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: 16px; background: linear-gradient(160deg, #17255f, #0d1638); color: #fff;
}
.bl-follow-title { margin: 0 0 4px; font: 400 24px 'Bebas Neue', sans-serif; letter-spacing: 0.5px; }
.bl-follow-text { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.7); max-width: 46ch; }
.bl-follow-links { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-follow .btn-ghost, .ab-cta--dark .btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.bl-follow .btn-ghost:hover { border-color: #4fd1c5; color: #4fd1c5; }

/* Page article : méta, partage, auteur, articles voisins */
.bl-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 500 14px 'Inter', sans-serif; color: rgba(255, 255, 255, 0.72); }
.bl-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-family: 'Inter', sans-serif; }
.bl-share-label { font: 700 12px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; color: #6b7a83; margin-right: 6px; }
.bl-share .btn { padding: 8px 16px; font-size: 13.5px; }
.post-body .bl-share a, .post-body .bl-author a, .post-body .bl-pager a, .post-body .bl-back a { text-decoration: none; }
.bl-author {
  display: flex; gap: 18px; align-items: center; margin: 28px 0 0; padding: 20px 22px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); font-family: 'Inter', sans-serif;
}
.bl-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.bl-author-name { margin: 0 0 4px; font: 700 16px 'Inter', sans-serif; color: var(--ink); }
.bl-author-bio { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #47555f; }
.bl-author-links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bl-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; font-family: 'Inter', sans-serif; }
.bl-pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.bl-pager a:hover { border-color: var(--teal); }
.bl-pager span { font-size: 12px; font-weight: 600; color: var(--teal); }
.bl-pager strong { font-size: 14.5px; line-height: 1.35; }
.bl-pager-next { grid-column: 2; text-align: right; }
.bl-back { margin: 24px 0 0; font: 600 14px 'Inter', sans-serif; }
@media (max-width: 640px) {
  .bl-pager { grid-template-columns: 1fr; }
  .bl-pager-next { grid-column: 1; }
  .bl-author { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   À PROPOS : chiffres, parcours, sujets, appels à l'action
   ================================================================ */
.ab-section { padding-top: 56px; }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.ab-kicker { margin: 0 0 14px; font: 700 12px 'Inter', sans-serif; letter-spacing: 0.7px; text-transform: uppercase; color: var(--teal); }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ab-stats div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--paper-dim); }
.ab-stats strong { font: 500 26px 'JetBrains Mono', monospace; color: var(--deep); line-height: 1.1; }
.ab-stats span { font-size: 12.5px; color: #5a6b7b; }
.ab-note { margin: 14px 0 0; font-size: 14px; color: #47555f; }
.ab-path { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(0, 129, 125, 0.25); display: flex; flex-direction: column; gap: 16px; }
.ab-path li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ab-path li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px #fff; }
.ab-path strong { font-size: 15.5px; color: var(--ink); }
.ab-path span { font-size: 14px; color: #47555f; line-height: 1.5; }
.ab-themes { margin: 28px 0; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ab-chip { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 600 13px 'Inter', sans-serif; color: var(--deep); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.ab-chip:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.ab-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.home-cta .ab-cta:not(.ab-cta--dark) { background: #f4f7f9; }
.ab-cta { border-radius: 16px; padding: 24px 26px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ab-cta .ab-kicker { margin: 0; }
.ab-cta-text { margin: 0; font-size: 15px; line-height: 1.55; color: #47555f; }
.ab-cta--dark { background: linear-gradient(160deg, #17255f, #0d1638); border: none; color: #fff; }
.ab-cta--dark .ab-kicker { color: #4fd1c5; }
.ab-cta--dark .ab-cta-text { color: rgba(255, 255, 255, 0.8); }
.ab-cta--dark .ab-cta-text strong { color: #fff; }
.ab-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-platforms { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; }
.ab-platforms a { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px 'Inter', sans-serif; color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.ab-platforms a:hover { color: #4fd1c5; text-decoration: none; }
.ab-platforms .fa-spotify { color: #1BC257; }
.ab-platforms .fa-podcast { color: #c77dff; }
@media (max-width: 760px) {
  .ab-grid, .ab-cta-grid { grid-template-columns: 1fr; }
  .ab-stats strong { font-size: 21px; }
}

/* ===== Deux langues : sélecteur FR | EN, mention « podcast en français » ===== */
.nav-links { align-items: center; }
.site-nav .nav-links .nav-lang a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
}
.site-nav .nav-links .nav-lang a i { font-size: 12px; color: #4fd1c5; }
.site-nav .nav-links .nav-lang a:hover { border-color: #4fd1c5; }
@media (max-width: 760px) {
  .site-nav .nav-links .nav-lang a { display: inline-flex; margin-top: 10px; padding: 7px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
}
.lang-note { display: flex; align-items: center; gap: 8px; margin: -12px 0 20px; font-size: 13.5px; color: #47555f; }
.lang-note i { color: var(--teal); }
.ab-lang-note { font-weight: 400; color: rgba(255, 255, 255, 0.6); }

/* Barre de navigation : dernier épisode en pilule (lance le lecteur) */
.nav-ep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 auto 0 20px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.nav-ep:hover { border-color: #4fd1c5; color: #ffffff; }
.nav-ep-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--orange, #e8703a); }
.nav-ep-tag { font-weight: 600; }
.nav-ep-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.75); }
.nav-ep i { font-size: 10px; color: #4fd1c5; }
html.has-player .nav-ep { display: none; }
@media (max-width: 1000px) { .nav-ep-title { display: none; } }
@media (max-width: 760px) { .nav-ep { margin-left: 12px; padding: 5px 10px; font-size: 12px; } }

/* Ligne de cotations sous le bandeau d'actus (accueil, ordinateur ; masquée sur téléphone) */
.qs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.qs-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 13px; color: var(--ink); text-decoration: none; }
.qs-item:hover { text-decoration: none; }
.qs-item:hover .qs-val { color: #00817d; }
.qs-name { font-size: 12px; font-weight: 600; color: #5a6b7b; }
.qs-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.qs-chg { font-size: 12px; font-weight: 700; }
.qs-chg--up { color: #c53030; }
.qs-chg--down { color: #1f8a55; }
.qs-status { font-size: 12px; font-weight: 700; }
.qs-status.ferme { color: #c53030; }
.qs-status.partiel { color: #b7791f; }
.qs-status.fluide { color: #1f8a55; }
/* Même petite pilule que les autres liens « … → » (.section-head a) */
.qs-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: rgba(23, 37, 95, 0.05); border: 1px solid rgba(23, 37, 95, 0.14);
  font: 600 12px 'Inter', sans-serif; color: var(--deep); white-space: nowrap; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.qs-all:hover { border-color: var(--teal); background: rgba(0, 129, 125, 0.06); color: var(--deep); text-decoration: none; }
@media (max-width: 640px) { .qs { display: none; } }

/* Détroit quasi à l'arrêt (< 15 % du trafic normal) : même rouge que « fortement perturbé »,
   badge plein pour le distinguer */
.traffic-badge.arret, .mt-badge.arret { background: #ff6b5b; color: #0d1638; }
.mk-strait.arret { border-top-color: #d9463a; }
.hq-bar--arret i { background: #ff6b5b; }
.cp-tile.arret { border-top-color: #ff6b5b; }
.qs-status.arret { color: #c53030; }

/* ===== Page « Prix de l'électricité demain » (day-ahead ENTSO-E) ===== */
.da-section { padding-top: 32px; }
.da-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
.da-when { font: 700 11px 'Inter', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: #e8703a; padding: 4px 10px; border-radius: 999px; }
.da-date { margin: 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.da-stats { grid-template-columns: 1fr; }
.da-stats div { flex-direction: row; justify-content: space-between; align-items: baseline; }
.da-neg { margin: 0 0 10px; font-size: 13px; color: #4fd1c5; }
.da-src { margin-top: auto; padding-top: 8px; }
.da-hours { justify-content: flex-start; }
.da-chart { position: relative; height: 300px; margin-top: 12px; }
.da-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.da-h2 { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.5px; margin: 0 0 4px; color: var(--deep); }
.da-compare { margin-top: 36px; }
.da-compare-card { margin-top: 14px; padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.da-compare-chart { position: relative; }
.da-compare-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.da-compare-src { margin: 8px 0 0; font-size: 12px; color: #5a6b7b; }
.da-explain { margin-top: 40px; max-width: 760px; }
.da-explain p { font-size: 15px; line-height: 1.7; color: var(--ink); }
.da-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.da-links a, .da-links button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  background: rgba(23, 37, 95, 0.05); border: 1px solid rgba(23, 37, 95, 0.14);
  font: 600 13px 'Inter', sans-serif; color: var(--deep); text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.da-links a span { color: var(--teal); transition: transform 0.15s ease; }
.da-links button { cursor: pointer; }
.da-links button i { font-size: 11px; color: var(--teal); }
.da-links a:hover, .da-links button:hover { border-color: var(--teal); background: rgba(0, 129, 125, 0.06); text-decoration: none; }
.da-links a:hover span { transform: translateX(3px); }
@media (max-width: 860px) {
  .da-card { grid-template-columns: 1fr; }
  .da-chart { height: 240px; }
}
/* Fenêtre « Prix de l'électricité demain » dans /marches/ */
.da-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.da-kpis .px-change { margin: 4px 0 0; font-size: 12px; }
.da-dlg-h { margin: 16px 0 6px; font: 700 11px 'Inter', sans-serif; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.mk-dialog .da-when { margin-left: 6px; vertical-align: 1px; }
.da-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.da-dlg-actions button.mk-open i { font-size: 11px; color: #4fd1c5; }