@font-face{font-family:'Newsreader';src:url('https://infos.kanibal-studio.com/asset/fonts/newsreader.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:'Fraunces';src:url('https://infos.kanibal-studio.com/asset/fonts/fraunces.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}@font-face{font-family:'Inter';src:url('https://infos.kanibal-studio.com/asset/fonts/inter.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}/* Palette K-Pulse — tokens de couleur (définitions ; usages via var()) */
:root {
  --kp-navy: #0b0b10;
  --kp-abyss: #0b0b10;
  --kp-success: #10b981;
  --kp-info: #fbbf24;
  --kp-x1: #fbbf24;
  --kp-x2: #c084fc;
  --kp-x3: #f43f5e;
  --kp-x4: #34d399;
  --kp-x5: #fb923c;
  --kp-x6: #2dd4bf;
  --kp-ink-soft: #3a3a4a;
  --kp-x7: #a3efff;
  --kp-x8: #94a3b8;
  --kp-x9: #25d366;
  --kp-x10: #1da851;
  --kp-x11: #1a1a1a;
  --kp-x12: #1877f2;
  --kp-x13: #0d5fc7;
  --kp-x14: #cbd5e1;
  --kp-x15: #e2e8f0;
  --kp-x16: #f1f5f9;
  --kp-x17: #a3efff;
  --kp-x18: #aab5c7;
  --kp-x19: #e9edf5;
  --kp-x20: #91a0b6;
  --kp-x21: #22c55e;
  --kp-x22: #ef4444;
  --kp-ink-deep: #0b0b10;
  --kp-ink: #17171f;
  --kp-x23: #52525b;
  --kp-gold-deep: #00657a;
  --kp-paper: #f5f3ef;
  --kp-x24: #005468;
  --kp-x25: #0b0b10;
  --kp-x26: #29293a;
  --kp-x27: #4b4b5d;
  /* Paliers cyan des gradients ; noms historiques gardés pour compatibilité. */
  --kp-gold-highlight: #e4fbff;   /* .brand span : reflet clair du dégradé cyan */
  --kp-gold-brand-dark: #36bfe0;  /* .brand span : palier sombre du dégradé cyan */
  --kp-gold-badge-dark: #13acd2;  /* .badge : palier sombre du dégradé cyan */
  --kp-gold-cta-dark: #13acd2;    /* .btn-cta-premium : palier sombre du dégradé cyan */
  --kp-red-dark: #b23a2f;         /* .badge.laune : palier sombre du dégradé rouge */
  --kp-gold-antique: #005468;     /* thème clair .brand span : départ du dégradé cyan */
  --kp-brown-dark: #003c4a;       /* thème clair .brand span : fin du dégradé cyan */
}

/* K-Pulse 360 — Refonte V3 Cyan, Ink & Paper Edition */
/* Polices AUTO-HÉBERGÉES (woff2 dans static/kpulse/fonts/) — les @font-face sont
   injectées par `_font_face_css()` avant cette feuille, car leur URL dépend de la base
   publique. ⚠ Ne PAS revenir à Google Fonts : dépendance externe + transfert d'IP non
   consenti pour un lectorat FR/BE. Historique : cet en-tête affirmait « Google Fonts
   inlined via preconnect & preload » alors qu'AUCUN @font-face n'existait — les polices
   n'étaient jamais chargées (audit owner 2026-07-30). */

:root {
  --bg: #0b0b10;
  --bg-rgb: 11, 11, 16;
  --surface-rgb: 23, 23, 31;
  /* Accents de texte adaptés au thème ; fonds CTA toujours cyan clair.
     Les noms --gold* restent compatibles avec les usages historiques. */
  --accent-fill: #21d4fd;
  --accent-fill-soft: #a3efff;
  --paper: rgba(var(--surface-rgb), 0.75);
  --surface: #17171f;
  --surface2: #24242e;
  --header-bg: rgba(var(--bg-rgb), 0.92);
  --nav-bg: rgba(var(--surface-rgb), 0.88);
  --ink: #f9fafb;
  --muted: #a1a1aa;
  /* Texte secondaire lisible aussi sur --surface2, la surface sombre la plus claire. */
  --faint: #92929b;
  --body: #e4e4e7;
  --line: rgba(33, 212, 253, 0.2);
  --line-bright: rgba(33, 212, 253, 0.55);
  --pulse: #ff3b30;
  --pulseSoft: #cc2d24;
  --gold: #21d4fd;
  --goldsoft: #a3efff;
  --goldGlow: rgba(33, 212, 253, 0.35);
  --hero-bg: #0b0b10;
  --hero-text: #ffffff;
  --serif: 'Fraunces', Georgia, serif;
  --read: 'Newsreader', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --heading-font: 'Fraunces', Georgia, serif; /* 'Outfit' retiré : police absente du repo */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--body);
  font-family: var(--read);
  font-size: 17.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: 
    radial-gradient(1200px 700px at 80% -10%, rgba(33, 212, 253, 0.12), transparent 65%),
    radial-gradient(900px 500px at 15% 40%, rgba(33, 212, 253, 0.08), transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-fill); color: #000; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 10050;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 800;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

/*
 * Révélation au scroll — opacity uniquement (pas de transform, cause CLS 0.32
 * desktop fixé 2026-08-01 Wave 0). Le contenu reste visible par défaut : la
 * classe n'est posée qu'une fois IntersectionObserver effectivement prêt.
 * Ainsi une erreur, un timeout ou le blocage de app.js ne masque jamais les
 * titres et les cartes du flux éditorial.
 */
.kp-motion-ready .card, .kp-motion-ready .secttl { opacity: 0; }
.kp-motion-ready .card { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.kp-motion-ready .secttl { transition: opacity 0.5s; }
.kp-motion-ready .card.in, .kp-motion-ready .secttl.in { opacity: 1; }

/* HEADER */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header-bg, rgba(var(--bg-rgb), 0.92));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 28px 14px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.9em;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.brand span {
  background: linear-gradient(135deg, var(--kp-gold-highlight) 0%, var(--gold) 50%, var(--kp-gold-brand-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(33, 212, 253, 0.3));
}

.brand:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 12px;
  box-shadow: 0 0 14px var(--gold);
  animation: beat 2s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

.tag {
  color: var(--muted);
  font-size: 0.85em;
  font-style: italic;
  font-family: var(--read);
  letter-spacing: 0.3px;
}

.nav {
  background: var(--nav-bg, rgba(var(--surface-rgb), 0.88));
  position: sticky;
  top: 0;
  z-index: 29;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

.art .body > .kicker + .kicker { margin-left: 12px; }

/* Outil de lecture séparé des rubriques ; l'inscription reste un geste explicite. */
.reading-tools { background: var(--surface2); border-bottom: 1px solid var(--line); }
.reading-tools .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 24px !important; min-height: 60px; }
.reading-tools .push-cta { appearance: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .85rem/1.2 var(--sans); padding: 8px 13px; min-height: 44px; cursor: pointer; }
.reading-tools .push-cta:hover { color: var(--ink); border-color: var(--gold); }
.reading-tools .push-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.reading-tools .push-cta:disabled { opacity: .55; cursor: not-allowed; }
.reading-tools [role="status"] { color: var(--muted); font-size: .78rem; }
@media (max-width: 600px) { .reading-tools .wrap { justify-content: flex-start; min-height: 48px; } }

.nav .wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .nav .wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .nav .wrap::-webkit-scrollbar { display: none; }
}

.nav a {
  color: var(--muted);
  padding: 14px 14px;
  font-family: var(--sans);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s ease;
}

.nav a:hover, .nav a.on { color: var(--goldsoft); }

.nav a:after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav a:hover:after, .nav a.on:after { transform: scaleX(1); }

/* LAYOUT */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 38px 34px;
}

/* HERO CARTE LA UNE */
.hero {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-color: var(--hero-bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  animation: kenburns 25s ease-out forwards;
  will-change: transform;
}

@keyframes kenburns {
  from { transform: scale(1.03); }
  to { transform: scale(1.12); }
}

.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(11, 11, 16, 0.96) 6%, rgba(11, 11, 16, 0.55) 50%, rgba(11, 11, 16, 0.15) 100%);
}

.hero .b {
  position: relative;
  z-index: 2;
  padding: 54px;
  max-width: 860px;
}

.hero h1, .hero h2 {
  font-family: var(--serif);
  font-size: 3.35em;
  line-height: 1.15;
  margin: 20px 0 16px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--hero-text);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.hero p {
  color: var(--body);
  font-size: 1.18em;
  line-height: 1.6;
  margin: 0 0 26px;
  font-family: var(--read);
  max-width: 660px;
}

.hero .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kp-navy);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-fill-soft) 0%, var(--accent-fill) 100%);
  padding: 14px 28px;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 0 25px var(--goldGlow);
}

.hero:hover .more {
  transform: translateY(-2px);
  box-shadow: 0 0 35px var(--goldGlow);
}

/* CARTES D'ARTICLES */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-bright);
  box-shadow: 0 20px 50px -15px var(--goldGlow);
}

.ph {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  background: var(--surface2);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.card:hover .ph { transform: scale(1.05); }

.ph.noimg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: radial-gradient(120% 120% at 30% 18%, var(--surface) 0%, var(--surface2) 100%);
  font-family: var(--serif);
  font-size: 3.5em;
  font-weight: 800;
  color: var(--gold);
}

.card .b {
  position: relative;
  z-index: 2;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kicker {
  /* ⚠ Sans display/align-self, ce <span> devient un flex-item dans les cartes et
     s'ÉTIRE sur toute la largeur : le badge de rubrique s'affichait comme une barre
     pleine largeur au lieu d'épouser son texte (constaté 2026-07-30 sur /rubrique). */
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  font-family: var(--sans);
  font-size: 0.68em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
}

.card h2 {
  font-family: var(--serif);
  margin: 10px 0 0;
  font-size: 1.38em;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.3s ease;
}

.card:hover h2 { color: var(--goldsoft); }

.card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.0em;
  line-height: 1.58;
  font-family: var(--read);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cred {
  display: block;
  font-size: 0.7em;
  color: var(--faint);
  margin-top: 16px;
  font-family: var(--sans);
}

/* LEAD STORY FIRST CARD */
@media(min-width: 760px) {
  .grid > .card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .grid > .card:first-child .ph {
    width: 55%;
    aspect-ratio: auto;
    min-height: 380px;
  }
  .grid > .card:first-child .b {
    width: 45%;
    justify-content: flex-start;
    padding: 44px 50px;
  }
  .grid > .card:first-child h2 {
    font-size: 2.15em;
    line-height: 1.12;
    margin-top: 14px;
  }
  .grid > .card:first-child p {
    font-size: 1.05em;
    -webkit-line-clamp: 4;
    margin-top: 18px;
  }
}

/* BADGES */
.badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-fill) 0%, var(--kp-gold-badge-dark) 100%);
  color: var(--kp-abyss);
  font-family: var(--sans);
  font-size: 0.65em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 6px 14px;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(33, 212, 253, 0.35);
}

.badge.laune {
  background: linear-gradient(135deg, var(--pulse) 0%, var(--kp-red-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4);
}

/* SECTION TITLE */
.secttl {
  font-family: var(--serif);
  font-size: 1.6em;
  font-weight: 700;
  margin: 60px 0 28px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 20px;
  letter-spacing: -0.5px;
}

.secttl:before {
  content: '';
  width: 32px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--gold);
  flex: none;
}

.secttl:after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Lien « Voir toutes les rubriques » sous la grille bornée de la home (CWV DOM,
   audit PageSpeed 2026-08-04) — ouvre #cat-modal, jamais déclenché avant ce câblage. */
.see-all-rubriques {
  text-align: center;
  margin: 4px 0 32px;
}

.see-all-rubriques button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  padding: 10px 20px;
}

.see-all-rubriques button:hover {
  background: rgba(33, 212, 253, 0.1);
}


/* === K-PULSE 360 V3 ULTRA-PREMIUM ENHANCEMENTS === */

/* Reading Progress Bar */
#read-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--goldsoft) 50%, var(--gold) 100%);
  z-index: 100;
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 12px rgba(33, 212, 253, 0.8);
}

/* Wall Dual Step Indicator */
.wall-steps {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 12px 18px;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--muted);
}

.step-pill.active {
  color: var(--gold);
}

.step-pill.completed {
  color: var(--kp-success);
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(33, 212, 253, 0.15);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--gold);
}

.step-pill.completed .step-num {
  background: var(--kp-success);
  border-color: var(--kp-success);
  color: #000;
}

.step-arrow {
  color: var(--faint);
  font-size: 0.8em;
}

/* Enhanced CTA Shimmer */
.btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.35);
}

.btn:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  transform: rotate(30deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  20%, 100% { transform: translateX(100%) rotate(30deg); }
}

/* Card Hover Elevation & Glow */
.card {
  border: 1px solid rgba(33, 212, 253, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(33, 212, 253, 0.45);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(33, 212, 253, 0.15);
}

/* Live Reader Count Tag */
.reader-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  font-family: var(--sans);
  color: var(--gold);
  background: rgba(33, 212, 253, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(33, 212, 253, 0.2);
}

.reader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kp-success);
  box-shadow: 0 0 8px var(--kp-success);
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}


/* === EXECUTIVE WALL & FORM STYLING V3 === */
.wall {
  background: linear-gradient(160deg, rgba(var(--surface-rgb), 0.96) 0%, rgba(var(--bg-rgb), 0.98) 100%);
  border: 1px solid rgba(33, 212, 253, 0.35);
  border-radius: 16px;
  padding: 36px 32px;
  margin: 36px 0;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(33, 212, 253, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.wall-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(33, 212, 253, 0.1);
  border: 1px solid rgba(33, 212, 253, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.wall h3 {
  font-family: var(--serif);
  font-size: 1.6em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}

.wall p.wall-intro {
  font-family: var(--read);
  font-size: 1.02em;
  color: var(--body);
  margin: 0 0 20px;
  line-height: 1.6;
}

.form-field-group {
  position: relative;
  margin-bottom: 16px;
}

.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrapper .field-icon {
  position: absolute;
  left: 16px;
  font-size: 1.1em;
  pointer-events: none;
}

.input-icon-wrapper input {
  width: 100%;
  padding: 16px 16px 16px 46px;
  background: rgba(var(--bg-rgb), 0.85);
  border: 1.5px solid rgba(33, 212, 253, 0.25);
  border-radius: 10px;
  color: var(--body);
  font-family: var(--sans);
  font-size: 1em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.input-icon-wrapper input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--surface-rgb), 0.95);
  box-shadow: 0 0 18px rgba(33, 212, 253, 0.35), inset 0 2px 4px rgba(0,0,0,0.4);
}

.input-icon-wrapper input::placeholder {
  color: var(--faint);
  font-weight: 400;
}

.custom-cb-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.88em;
  color: var(--body);
  margin: 14px 0;
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
}

.custom-cb-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(33, 212, 253, 0.4);
  border-radius: 5px;
  background: rgba(var(--bg-rgb), 0.9);
  cursor: pointer;
  flex: none;
  margin-top: 2px;
  position: relative;
  transition: all 0.2s ease;
}

.custom-cb-label input[type="checkbox"]:checked {
  background: var(--accent-fill);
  border-color: var(--gold);
}

.custom-cb-label input[type="checkbox"]:checked:after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 12px;
  font-weight: 900;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 16px 0 6px;
  margin-top: 22px;
  border-top: 1px solid rgba(33, 212, 253, 0.15);
  font-family: var(--sans);
  font-size: 0.78em;
  color: var(--muted);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust-item span {
  color: var(--gold);
}


/* BADGES THÉMATIQUES PAR CATÉGORIE */
.kicker[data-cat="tech"], .badge.tech { background: rgba(56, 189, 248, 0.12); color: var(--kp-info); border: 1px solid rgba(56, 189, 248, 0.35); }
.kicker[data-cat="economie"], .badge.economie { background: rgba(251, 191, 36, 0.12); color: var(--kp-x1); border: 1px solid rgba(251, 191, 36, 0.35); }
.kicker[data-cat="politique"], .badge.politique { background: rgba(192, 132, 252, 0.12); color: var(--kp-x2); border: 1px solid rgba(192, 132, 252, 0.35); }
.kicker[data-cat="sante"], .badge.sante { background: rgba(244, 63, 94, 0.12); color: var(--kp-x3); border: 1px solid rgba(244, 63, 94, 0.35); }
.kicker[data-cat="sport"], .badge.sport { background: rgba(52, 211, 153, 0.12); color: var(--kp-x4); border: 1px solid rgba(52, 211, 153, 0.35); }
.kicker[data-cat="culture"], .badge.culture { background: rgba(251, 146, 60, 0.12); color: var(--kp-x5); border: 1px solid rgba(251, 146, 60, 0.35); }
.kicker[data-cat="environnement"], .badge.environnement { background: rgba(45, 212, 191, 0.12); color: var(--kp-x6); border: 1px solid rgba(45, 212, 191, 0.35); }

/* LETTRINE & DESIGN ÉDITORIAL */
.fullbody > p:first-of-type::first-letter, .artbody > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  margin-right: 12px;
  margin-top: 4px;
  color: var(--gold);
  font-weight: 800;
}

blockquote {
  border-left: 3px solid var(--gold);
  margin: 28px 0;
  padding: 12px 0 12px 24px;
  font-family: var(--serif);
  font-size: 1.15em;
  font-style: italic;
  color: var(--goldsoft);
  background: rgba(33, 212, 253, 0.04);
  border-radius: 0 8px 8px 0;
}


/* ==========================================================================
   K-PULSE 360° — EXECUTIVE TOP LEVEL MEDIA SUITE (V4 WORLD-CLASS EDITION)
   ========================================================================== */

/* BARRE DE PROGRESSION DE LECTURE */
#read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--goldsoft), var(--gold));
  z-index: 1000;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(33, 212, 253, 0.6);
}

/* TOP UTILITY BAR EXECUTIVE */
.top-utility {
  background: rgba(var(--bg-rgb), 0.95);
  border-bottom: 1px solid rgba(33, 212, 253, 0.15);
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  padding: 6px 0;
}

.top-utility .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 0;
  padding-bottom: 0;
}

.utility-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pulse);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: rgba(255, 59, 48, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.live-dot {
  width: 7px;
  height: 7px;
  background: var(--pulse);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--pulse);
  animation: pulse-red 1.8s infinite;
}

@keyframes pulse-red {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

.ticker-text {
  color: var(--body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 460px;
}

.utility-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.market-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--faint);
  font-size: 0.74rem;
}

.market-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.market-item .up { color: var(--kp-x4); font-weight: 700; }
.market-item .down { color: var(--kp-x3); font-weight: 700; }

.btn-cta-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent-fill) 0%, var(--kp-gold-cta-dark) 100%);
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(33, 212, 253, 0.3);
}

.btn-cta-premium:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 0 20px rgba(33, 212, 253, 0.5);
}

/* HERO SPLIT SECTION (HOME) */
.hero-split-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

@media(min-width: 960px) {
  .hero-split-wrap {
    grid-template-columns: 2.1fr 1fr;
  }
}

/* FIL INFO CONTINU PANEL (SIDEBAR HERO) */
.live-stream-panel {
  background: var(--paper);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 35px rgba(0,0,0,0.5);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(33, 212, 253, 0.15);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.panel-title {
  /* margin:0 : cette classe est portée par un <h2> depuis l'audit a11y 2026-08-04
     (hiérarchie de titres, était un <div>) — neutralise la marge par défaut du navigateur,
     rendu visuel inchangé. */
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 480px;
  padding-right: 4px;
}

.stream-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.2s ease;
}

.stream-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stream-item:hover {
  transform: translateX(4px);
}

.stream-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72em;
  color: var(--faint);
  font-family: var(--sans);
}

.stream-time {
  color: var(--gold);
  font-weight: 700;
}

/* h3 (pas h4) depuis l'audit a11y 2026-08-04 : cf. _live_stream_panel dans
   platform_client_routes.py — sélecteur réaligné sur la balise réellement émise. */
.stream-item h3 {
  font-family: var(--serif);
  font-size: 0.98em;
  line-height: 1.35;
  margin: 0;
  font-weight: 600;
  color: var(--body);
}

.stream-item:hover h3 {
  color: var(--goldsoft);
}

/* ARTICLE META BAR (AUTHOR, READ TIME) */
.art-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(33, 212, 253, 0.15);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}

.author-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-soft));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 800;
  font-size: 0.75rem;
  color: #000;
}

.read-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--body);
}

/* BANDEAU NEWSLETTER INLINE DECISE */
.newsletter-banner {
  background: radial-gradient(120% 120% at 20% 20%, rgba(33, 212, 253, 0.12) 0%, rgba(var(--surface-rgb), 0.85) 100%);
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  padding: 36px 40px;
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

@media(min-width: 768px) {
  .newsletter-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.nl-text h3 {
  font-family: var(--serif);
  font-size: 1.6em;
  margin: 0 0 8px;
  color: var(--ink);
}

.nl-text p {
  font-family: var(--read);
  color: var(--muted);
  margin: 0;
  font-size: 1em;
}

.nl-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.nl-input {
  flex: 1;
  background: rgba(var(--bg-rgb), 0.8);
  border: 1px solid var(--line);
  color: var(--body);
  padding: 12px 18px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.9em;
  outline: none;
}

.nl-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 15px var(--goldGlow);
}

.nl-submit {
  background: linear-gradient(135deg, var(--accent-fill-soft) 0%, var(--accent-fill) 100%);
  color: #000;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.85em;
  padding: 12px 22px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.nl-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px var(--goldGlow);
}


/* ==========================================================================
   K-PULSE 360° — MOBILE-FIRST CORE DEFAULTS (<= 768px)

   Les règles compactes sont la base. Les valeurs grand écran sont rétablies
   ensuite sous min-width ; 769px conserve exactement l'ancienne frontière
   max-width: 768px, y compris au pixel 768.
   ========================================================================== */

/* CONTAINER & GLOBAL PADDING */
.wrap {
  padding: 16px 14px !important;
}

/* EXECUTIVE TOP UTILITY BAR */
.top-utility .wrap {
  padding: 4px 12px !important;
  gap: 8px !important;
}
.utility-left { gap: 8px !important; }
.ticker-text {
  max-width: 150px !important;
  font-size: 0.68rem !important;
}
.market-ticker { display: none !important; }
.btn-cta-premium {
  padding: 3px 8px !important;
  font-size: 0.65rem !important;
}

/* MAIN HEADER & BRAND */
.top .wrap {
  padding: 10px 14px !important;
  gap: 10px !important;
}
.brand { font-size: 1.35em !important; }
.brand:after {
  width: 7px !important;
  height: 7px !important;
  margin-left: 8px !important;
}
.top .tag { display: none !important; }

/* HERO BLAZE BANNER */
.hero-split-wrap {
  gap: 20px !important;
  margin-bottom: 24px !important;
}
.hero {
  min-height: 360px !important;
  border-radius: 10px !important;
}
.hero .b {
  padding: 22px 16px 20px !important;
  max-width: 100% !important;
}
.hero h1, .hero h2 {
  font-size: 1.55em !important;
  line-height: 1.22 !important;
  margin: 10px 0 8px !important;
  letter-spacing: -0.3px !important;
}
.hero p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 16px !important;
  font-size: 0.94em !important;
  line-height: 1.48 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.hero .more {
  padding: 10px 18px !important;
  font-size: 0.72em !important;
}

/* GRID CARDS & BENTO */
.grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
.card { border-radius: 10px !important; }
.card .b { padding: 16px 16px 18px !important; }
.card h2 {
  margin-top: 8px !important;
  font-size: 1.15em !important;
  line-height: 1.3 !important;
}
.card p {
  margin-top: 8px !important;
  font-size: 0.9em !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 2 !important;
}

/* FIL INFO CONTINU PANEL */
.live-stream-panel {
  padding: 18px 16px !important;
  border-radius: 10px !important;
}
.stream-list { max-height: 360px !important; }

/* NEWSLETTER INLINE BANNER */
.newsletter-banner {
  flex-direction: column !important;
  margin: 32px 0 !important;
  padding: 24px 18px !important;
  border-radius: 10px !important;
}
.nl-text h3 { font-size: 1.3em !important; }
.nl-form {
  flex-direction: column !important;
  gap: 10px !important;
  max-width: 100% !important;
}
.nl-input, .nl-submit {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 12px 14px !important;
}

/* ARTICLE READING PAGE */
.art h1 {
  margin: 10px 0 14px !important;
  font-size: 1.65em !important;
  line-height: 1.25 !important;
}
.art .intro {
  font-size: 1.02em !important;
  line-height: 1.6 !important;
}
.freebody {
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
}
.fullbody > p:first-of-type::first-letter, .artbody > p:first-of-type::first-letter {
  margin-right: 8px !important;
  font-size: 2.6em !important;
}
.art-meta-bar {
  flex-wrap: wrap !important;
  gap: 10px !important;
  font-size: 0.78rem !important;
}

/* DESKTOP ENHANCEMENTS FOR MOBILE-FIRST CORE */
@media (min-width: 769px) {
  .wrap { padding: 40px 28px !important; }
  .weather-bar .wrap { padding: 0 16px !important; }

  .top-utility .wrap {
    padding: 0 28px !important;
    gap: 16px !important;
  }
  .utility-left { gap: 16px !important; }
  .ticker-text {
    max-width: 460px !important;
    font-size: inherit !important;
  }
  .market-ticker { display: flex !important; }
  .btn-cta-premium {
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
  }

  .top .wrap {
    padding: 16px 28px 14px !important;
    gap: 18px !important;
  }
  .brand { font-size: 1.9em !important; }
  .brand:after {
    width: 10px !important;
    height: 10px !important;
    margin-left: 12px !important;
  }
  .top .tag { display: inline !important; }

  .hero-split-wrap {
    gap: 28px !important;
    margin-bottom: 40px !important;
  }
  .hero {
    min-height: 540px !important;
    border-radius: 12px !important;
  }
  .hero.une {
    border-radius: 20px !important;
  }
  .hero .b {
    padding: 54px !important;
    max-width: 860px !important;
  }
  .hero h1, .hero h2 {
    margin: 20px 0 16px !important;
    font-size: 3.35em !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
  }
  .hero p {
    display: block;
    overflow: visible;
    margin-bottom: 26px !important;
    font-size: 1.18em !important;
    line-height: 1.6 !important;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }
  .hero .more {
    padding: 14px 28px !important;
    font-size: 0.78em !important;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important;
    gap: 24px !important;
  }
  .card { border-radius: 16px !important; }
  .card .b { padding: 22px 24px 24px !important; }
  .card h2 {
    margin-top: 10px !important;
    font-size: 1.38em !important;
    line-height: 1.3 !important;
  }
  .card p {
    margin-top: 12px !important;
    font-size: 1em !important;
    line-height: 1.58 !important;
    -webkit-line-clamp: 3 !important;
  }
  .grid > .card:first-child .b {
    padding: 44px 50px !important;
  }
  .grid > .card:first-child h2 {
    margin-top: 14px !important;
    font-size: 2.15em !important;
    line-height: 1.12 !important;
  }
  .grid > .card:first-child p {
    margin-top: 18px !important;
    font-size: 1.05em !important;
    -webkit-line-clamp: 4 !important;
  }

  .live-stream-panel {
    padding: 24px !important;
    border-radius: 12px !important;
  }
  .stream-list { max-height: 480px !important; }

  .newsletter-banner {
    flex-direction: row !important;
    margin: 48px 0 !important;
    padding: 36px 40px !important;
    border-radius: 12px !important;
  }
  .nl-text h3 { font-size: 1.6em !important; }
  .nl-form {
    flex-direction: row !important;
    gap: 10px !important;
    max-width: 420px !important;
  }
  .nl-input {
    width: auto !important;
    padding: 12px 18px !important;
  }
  .nl-submit {
    width: auto !important;
    padding: 12px 22px !important;
  }

  .art h1 {
    margin: 0.67em 0 !important;
    font-size: 2em !important;
    line-height: inherit !important;
  }
  .art .intro {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .freebody {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .fullbody > p:first-of-type::first-letter, .artbody > p:first-of-type::first-letter {
    margin-right: 12px !important;
    font-size: 3.4em !important;
  }
  .art-meta-bar {
    flex-wrap: nowrap !important;
    gap: 16px !important;
    font-size: 0.82rem !important;
  }
}
/* END MOBILE-FIRST CORE */


/* ==========================================================================
   K-PULSE 360° — ACCESSIBILITÉ & SCROLL PARFAIT BARRE DE RUBRIQUES MOBILE
   ========================================================================== */

.nav {
  position: sticky;
  top: 50px;
  z-index: 29;
  background: rgba(var(--bg-rgb), 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(33, 212, 253, 0.2);
}

.nav .wrap {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  padding: 10px 28px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.nav .wrap::-webkit-scrollbar {
  display: none !important;
}

.nav a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--body) !important;
  background: rgba(var(--surface-rgb), 0.75) !important;
  border: 1px solid rgba(33, 212, 253, 0.22) !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.nav a:hover {
  color: #fff !important;
  border-color: rgba(33, 212, 253, 0.5) !important;
  background: rgba(var(--surface-rgb), 0.9) !important;
}

.nav a.on {
  color: #000 !important;
  background: linear-gradient(135deg, var(--accent-fill-soft) 0%, var(--accent-fill) 100%) !important;
  border-color: var(--goldsoft) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(33, 212, 253, 0.45) !important;
}

.nav a:after {
  display: none !important;
}

/* MENU MODAL TOUTES LES RUBRIQUES (MOBILE DRAWER) */
#cat-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(var(--bg-rgb), 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  animation: fadeInModal 0.25s ease-out forwards;
}

#cat-modal.open {
  display: flex;
}

#cat-modal[hidden] { display: none !important; }
body.dialog-open { overflow: hidden; }

@keyframes fadeInModal {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cat-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(33, 212, 253, 0.2);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.cat-modal-head h2 {
  font-family: var(--serif);
  font-size: 1.6em;
  margin: 0;
  color: var(--ink);
}

.cat-modal-close {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.5em;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.cat-modal-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  text-align: center;
  transition: all 0.2s ease;
}

.cat-modal-item:hover {
  border-color: var(--gold);
  background: var(--surface2);
  transform: translateY(-2px);
}

.cat-modal-item .count {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kp-motion-ready .card, .kp-motion-ready .secttl { opacity: 1; }
  .hero-img { transform: none !important; }
}


/* ==========================================================================
   ARTICLE PAGE HERO IMAGE HD STYLING
   ========================================================================== */

.art-hero-img-wrap {
  margin: 0 0 24px 0 !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(33, 212, 253, 0.25) !important;
  background: var(--paper) !important;
}

.art-hero-img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

.art-hero-img-wrap .credit {
  padding: 10px 16px !important;
  font-size: 0.76rem !important;
  color: var(--muted) !important;
  background: var(--surface) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
}


/* ==========================================================================
   K-PULSE 360° — 5 LEVIERS D'EXCELLENCE MULTIMÉDIA & INTERACTIVITÉ
   ========================================================================== */

/* 1. LECTEUR AUDIO SYNTHÉTISÉ */
.art-audio-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: rgba(var(--surface-rgb), 0.85);
  border: 1px solid rgba(33, 212, 253, 0.3);
  border-radius: 12px;
  padding: 12px 18px;
  margin: 16px 0 24px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.btn-play-audio {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--accent-fill-soft) 0%, var(--accent-fill) 100%);
  color: #000;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(33, 212, 253, 0.4);
}

.btn-play-audio:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(33, 212, 253, 0.6);
}

.btn-play-audio:focus-visible,
.audio-seek:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.audio-seek {
  flex: 1;
  min-width: 120px;
  accent-color: var(--gold);
  cursor: pointer;
}

.audio-seek:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.audio-time {
  flex-shrink: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audio-status {
  order: 4;
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 0;
  color: var(--faint);
  font-family: var(--sans);
  font-size: 0.76rem;
}

.sr-only-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .audio-seek { order: 3; flex-basis: 100%; }
}

[data-theme="light"] .art-audio-player {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 101, 122, 0.38);
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.1);
}

[data-theme="light"] .audio-time,
[data-theme="light"] .audio-status {
  color: var(--kp-ink-soft);
}

/* 4. DOSSIER SPÉCIAL DOSSIERS CONTEXTUELS */
.special-dossier-box {
  background: rgba(var(--surface-rgb), 0.6);
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 28px 0;
}

/* h2 (pas h4) depuis l'audit a11y 2026-08-04 : cf. _special_dossier_html dans
   platform_client_routes.py — sélecteur réaligné sur la balise réellement émise. */
.special-dossier-box h2 {
  margin: 0 0 10px 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
}

.dossier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dossier-link {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dossier-link:hover {
  color: var(--gold);
  text-decoration: underline;
}


/* ==========================================================================
   RENDU MARKDOWN → HTML DANS LES ARTICLES
   ========================================================================== */

.art-subheading {
  font-family: var(--serif);
  font-size: 1.35em;
  font-weight: 800;
  color: var(--gold);
  margin: 36px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(33, 212, 253, 0.2);
}

.art-subsubheading {
  font-family: var(--serif);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--kp-x17);
  margin: 28px 0 12px 0;
}

.art .freebody p,
.article-body p,
.freebody p {
  margin: 0 0 20px 0;
  line-height: 1.8;
  hyphens: auto;
}

.art-list {
  margin: 16px 0;
  padding-left: 20px;
}

.art-list li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--ink);
}

.art-list li strong {
  color: var(--gold);
}


/* ==========================================================================
   BANDEAU MÉTÉO LIVE (FRANCE & BELGIQUE)
   ========================================================================== */

.weather-bar {
  background: rgba(var(--surface-rgb), 0.88);
  border-bottom: 1px solid rgba(33, 212, 253, 0.18);
  padding: 6px 0;
  font-size: 0.78rem;
  font-family: var(--sans);
  color: var(--muted);
  backdrop-filter: blur(8px);
}

.weather-bar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.weather-bar .wrap::-webkit-scrollbar {
  display: none;
}

.weather-lbl {
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-size: 0.72rem;
}

.weather-items {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.weather-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
}

.weather-item:hover {
  border-color: rgba(33, 212, 253, 0.4);
  background: rgba(33, 212, 253, 0.06);
  transform: translateY(-1px);
}

.weather-item strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.weather-item .w-temp {
  color: var(--gold);
  font-weight: 700;
}


/* ==========================================================================
   OPTIMISATION PAGESPEED LCP HERO IMAGE
   ========================================================================== */

.hero img.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero .b {
  position: relative;
  z-index: 2;
}


/* SECURITÉ DÉBORDEMENT CATEGORIES NAV */
.nav .wrap::after {
  content: '';
  padding-right: 24px;
}


/* ==========================================================================
   MOBILE-FIRST NAVIGATION DEFAULTS (<= 768px)

   Les propriétés identiques aux règles canoniques ci-dessus ne sont pas
   répétées. Seuls les écarts mobile/desktop restent dans cette cascade.
   ========================================================================== */

.nav {
  top: 0 !important;
  z-index: 999 !important;
  background: rgba(var(--bg-rgb), 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(33, 212, 253, 0.25) !important;
}

.nav .wrap {
  gap: 6px !important;
  padding: 8px 16px 8px 12px !important;
}

.nav a {
  padding: 6px 11px !important;
  border: 1px solid rgba(33, 212, 253, 0.25) !important;
  background: rgba(var(--surface-rgb), 0.85) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.5px !important;
}

/* DESKTOP ENHANCEMENTS FOR MOBILE-FIRST NAVIGATION */
@media (min-width: 769px) {
  .nav {
    top: 50px !important;
    z-index: 29 !important;
    background: rgba(var(--bg-rgb), 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(33, 212, 253, 0.2) !important;
  }

  .nav .wrap {
    gap: 10px !important;
    padding: 10px 28px !important;
  }

  .nav a {
    padding: 8px 16px !important;
    border: 1px solid rgba(33, 212, 253, 0.22) !important;
    background: rgba(var(--surface-rgb), 0.75) !important;
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
  }
}
/* END MOBILE-FIRST NAVIGATION */


/* SCROLL PADDING ET CENTRAGE DU BOUTON ACTIF */
.nav .wrap {
  scroll-padding: 0 40px !important;
}
.nav a {
  scroll-margin: 0 40px !important;
}

/* === PREMIUM EDITORIAL EMAIL INPUT & GOLD BUTTON (TASK 3) === */
.lead-form input[type="email"],
.newsletter-form input[type="email"],
.optin-form input[type="email"],
.form-group input[type="email"],
.wall input[type="email"],
input[type="email"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line-bright) !important;
  border-radius: 0 !important;
  color: var(--body) !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  padding: 14px 12px !important;
  outline: none !important;
  transition: border-color 0.25s ease !important;
  width: 100% !important;
}

.lead-form input[type="email"]:focus,
.newsletter-form input[type="email"]:focus,
.optin-form input[type="email"]:focus,
.form-group input[type="email"]:focus,
.wall input[type="email"]:focus,
input[type="email"]:focus {
  border-bottom-color: var(--gold) !important;
}

.lead-form button,
.newsletter-form button,
.optin-form button,
.form-group button,
.wall button,
button.btn-subscribe,
button[type="submit"] {
  background: var(--accent-fill) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(33, 212, 253, 0.25) !important;
  font-size: 0.9rem !important;
}

.lead-form button:hover,
.newsletter-form button:hover,
.optin-form button:hover,
.form-group button:hover,
.wall button:hover,
button.btn-subscribe:hover,
button[type="submit"]:hover {
  background: var(--kp-x7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(33, 212, 253, 0.4) !important;
}

/* === SHARE BUTTONS — visibilité + alignement mobile (fix owner 2026-08-01) === */
/* Problème : boutons transparents sur fond sombre = invisibles.
   Fix : fonds colorés pleins aux couleurs de marque de chaque réseau. */
.share-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 32px 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.share-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--kp-x8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-right: 4px !important;
  opacity: 0.7 !important;
}

/* Boutons PLEINS avec couleur de marque — visibles immédiatement */
.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

/* WhatsApp — vert */
.share-btn.share-wa {
  background: var(--kp-x9) !important;
  color: #fff !important;
}
.share-btn.share-wa:hover {
  background: var(--kp-x10) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
}

/* X (Twitter) — noir */
.share-btn.share-x {
  background: #000 !important;
  color: #fff !important;
}
.share-btn.share-x:hover {
  background: var(--kp-x11) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* Facebook — bleu */
.share-btn.share-fb {
  background: var(--kp-x12) !important;
  color: #fff !important;
}
.share-btn.share-fb:hover {
  background: var(--kp-x13) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35) !important;
}

/* Bouton "Partager" natif / copier — accent cyan */
.share-btn.share-cp {
  background: rgba(33, 212, 253, 0.15) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(33, 212, 253, 0.3) !important;
}
.share-btn.share-cp:hover {
  background: rgba(33, 212, 253, 0.25) !important;
  border-color: rgba(33, 212, 253, 0.6) !important;
}

.share-btn svg {
  flex-shrink: 0 !important;
}

/* === STICKY MOBILE — fix définitif (owner 2026-08-01) === */
/* Problème : débordement horizontal + boutons coupés + pas de sticky.
   Fix : barre fixe en bas, largeur égale forcée, overflow contrôlé. */
@media (max-width: 768px) {
  /* Empêcher le scroll horizontal global */
  body { overflow-x: hidden !important; }

  /* La barre sticky EN BAS DE L'ÉCRAN — toujours visible */
  .share-bar.share-sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    background: rgba(var(--surface-rgb), 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .share-bar.share-sticky .share-label {
    display: none !important;
  }
  /* Chaque bouton : LARGEUR ÉGALE forcée, ni plus ni moins */
  .share-bar.share-sticky .share-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 8px 2px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }
  .share-bar.share-sticky .share-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  /* Sur <380px : icônes seules, texte masqué */
  @media (max-width: 380px) {
    .share-bar.share-sticky .share-btn {
      font-size: 0 !important;
      gap: 0 !important;
      padding: 12px 4px !important;
    }
    .share-bar.share-sticky .share-btn svg {
      width: 22px !important;
      height: 22px !important;
    }
  }
  body.has-sticky-share { padding-bottom: 68px !important; }
}

/* === EDITORIAL TYPOGRAPHY & DROP CAP (TASK 5) === */
.article-body,
.freebody,
.art .body {
  font-size: 1.125rem !important;
  line-height: 1.8 !important;
  color: var(--kp-x14) !important;
}

.article-body > p:first-child::first-letter,
.freebody > p:first-child::first-letter,
.art .body > .intro > p:first-child::first-letter,
.intro > p:first-child::first-letter {
  font-size: 3.25em !important;
  line-height: 0.85 !important;
  float: left !important;
  color: var(--gold) !important;
  font-family: var(--serif, 'Newsreader', serif) !important;
  font-weight: 700 !important;
  padding-top: 4px !important;
  padding-right: 12px !important;
  padding-bottom: 2px !important;
}


/* === CITATIONS, LISTES & TABLEAUX (fix mise en page 2026-08-01) === */
.article-body blockquote,
.freebody blockquote,
.art .body blockquote {
  margin: 24px 0 !important;
  padding: 16px 20px !important;
  border-left: 4px solid var(--gold) !important;
  background: rgba(33, 212, 253, 0.06) !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: var(--kp-x15) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
}
.article-body blockquote p,
.freebody blockquote p {
  margin: 0 !important;
}
.article-body blockquote cite,
.freebody blockquote cite,
.art .body blockquote cite {
  display: block !important;
  margin-top: 10px !important;
  font-size: 0.80rem !important;
  line-height: 1.4 !important;
  color: var(--kp-x18) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-align: right !important;
}

/* === CITATIONS & ATTRIBUTIONS DE SOURCES DANS LE CORPS DE TEXTE === */
/* Directive : caractères des phrases qui citent les sources nettement réduits (0.80rem vs 1.125rem) */
.source-citation,
.source-attribution,
cite,
.article-body cite,
.freebody cite,
.art .body cite {
  font-size: 0.80rem !important;
  line-height: 1.45 !important;
  color: var(--kp-x18) !important;
  font-style: italic !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  letter-spacing: 0.015em !important;
}

.source-line {
  margin: 20px 0 !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-left: 2px solid rgba(33, 212, 253, 0.4) !important;
  border-radius: 0 6px 6px 0 !important;
}
.source-line .source-citation {
  display: block !important;
  font-size: 0.78rem !important;
}

[data-theme="light"] .source-citation,
[data-theme="light"] cite,
[data-theme="light"] .article-body cite,
[data-theme="light"] .freebody cite {
  color: var(--muted) !important;
}
[data-theme="light"] .source-line {
  background: rgba(0, 0, 0, 0.025) !important;
  border-left-color: rgba(33, 212, 253, 0.5) !important;
}

/* Listes à puces */
.article-body ul,
.article-body ol,
.freebody ul,
.freebody ol,
.art .body ul,
.art .body ol {
  margin: 16px 0 !important;
  padding-left: 28px !important;
}
.article-body li,
.freebody li,
.art .body li {
  margin: 8px 0 !important;
  line-height: 1.7 !important;
  color: var(--kp-x14) !important;
}

/* Tableaux */
.article-body table,
.freebody table,
.art .body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
  font-size: 0.95rem !important;
}
.article-body th,
.article-body td,
.freebody th,
.freebody td {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 10px 14px !important;
  text-align: left !important;
}
.article-body th,
.freebody th {
  background: rgba(33, 212, 253, 0.1) !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
}
.article-body tr:nth-child(even),
.freebody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Séparateurs hr — discret au lieu de pointillés */
.article-body hr,
.freebody hr,
.art .body hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  margin: 32px 0 !important;
}

/* Bold dans le body — mise en valeur */
.article-body strong,
.freebody strong,
.art .body strong {
  color: var(--kp-x16) !important;
  font-weight: 700 !important;
}

/* Provenance éditoriale : les sources appartiennent à l'article, pas à un audit caché.
   Bloc REPLIÉ par défaut (<details>) et sans lien sortant — décision owner 2026-09-15 :
   l'attribution reste, la traçabilité est à un clic, le lecteur n'est plus renvoyé
   chez la presse concurrente au pied de chaque article. */
.article-sources {
  margin: 32px 0 20px;
  padding: 12px 20px;
  border: 1px solid rgba(33, 212, 253, 0.22);
  border-radius: 10px;
  background: rgba(33, 212, 253, 0.04);
}
.article-sources summary {
  margin: 0;
  color: var(--kp-x17);
  font: 700 0.85rem/1.4 var(--sans, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.article-sources[open] summary {
  margin-bottom: 8px;
}
.article-sources p {
  margin: 0 0 10px;
  color: var(--kp-x18);
  font-size: .80rem;
}
.article-sources ul {
  margin: 0;
  padding-left: 18px;
}
.article-sources li {
  margin: 6px 0;
  color: var(--kp-x19);
  font-size: .82rem;
}
.article-sources li span {
  display: block;
  color: var(--kp-x20);
  font-size: .74rem;
  margin-top: 2px;
}

/* Click-to-Tweet link (Wave 1 K-Pulse) — petit lien sous le titre */
.ctt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--kp-x8);
  text-decoration: none;
  margin: 4px 0 18px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: all 0.15s;
}
.ctt-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

/* === FIX MOBILE DÉFINITIF — barre de partage (owner 2026-08-01) === */
/* Problème : sur mobile, les boutons ont des largeurs inégales (WhatsApp 125px,
   X 69px, Facebook 118px) -> rendu "amateur". La classe share-sticky est retirée
   par le JS IntersectionObserver, donc le CSS sticky ne s'applique jamais.
   Solution : appliquer l'alignement égal À TOUTES les barres de partage sur
   mobile, sticky ou non. */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }

  .share-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 20px 0 !important;
  }
  .share-bar .share-label {
    display: none !important;
  }
  .share-bar .share-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 2px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 4px !important;
  }
  .share-bar .share-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  /* Sur très petits écrans (<380px) : icônes seules */
  @media (max-width: 380px) {
    .share-bar .share-btn {
      font-size: 0 !important;
      gap: 0 !important;
      padding: 12px 4px !important;
    }
    .share-bar .share-btn svg {
      width: 22px !important;
      height: 22px !important;
    }
  }
}
}

/* ═══ Trending widget (plus lus) ═══ */
.trending-widget {
  margin: 40px 0;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.trending-title-h {
  font-family: var(--serif);
  font-size: 1.3em;
  margin: 0 0 16px;
  color: var(--ink);
}
.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: opacity 0.2s;
}
.trending-item:hover { opacity: 0.75; }
.trending-item:last-child { border-bottom: none; }
.trending-rank {
  font-family: var(--serif);
  font-size: 1.6em;
  font-weight: 800;
  color: var(--gold);
  min-width: 32px;
  line-height: 1;
}
.trending-text { display: flex; flex-direction: column; gap: 3px; }
.trending-cat {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
}
.trending-title { font-size: 0.98em; color: var(--body); line-height: 1.3; }

/* ═══ Exit-intent email ═══ */
.exit-intent {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.exit-intent-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 420px;
  text-align: center;
  position: relative;
}
.exit-intent-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--goldsoft), var(--gold));
  border-radius: 16px 16px 0 0;
}
/* h3 (pas h4) depuis l'audit a11y 2026-08-04 : cf. _exit_intent_html dans
   platform_client_routes.py — sélecteur réaligné sur la balise réellement émise. */
.exit-intent-box h3 {
  font-family: var(--serif);
  font-size: 1.4em;
  margin: 0 0 8px;
  color: var(--ink);
}
.exit-intent-box p {
  font-size: 0.95em;
  color: var(--muted);
  margin: 0 0 18px;
}
.exit-intent-box input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--body);
  font-family: var(--read);
  font-size: 0.95em;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.exit-intent-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--accent-fill);
  color: var(--kp-ink-deep);
  font-weight: 700;
  cursor: pointer;
}
.exit-intent-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  font-size: 1.5em;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

/* ── Pop-up cookies RGPD (Consent Mode v2) — modal centré ─────────────────
   Complète la refonte du bandeau → modal (_cookie_banner_html) : ni l'ancien
   .cookie-banner ni le nouveau .cookie-overlay n'avaient de styles — le bloc
   s'affichait BRUT en bas de page. Le display:flex est posé par le JS. */
.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 28px 26px 22px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.cookie-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.cookie-close:hover,
.cookie-close:focus-visible { color: var(--ink); }
.cookie-modal-icon { font-size: 2rem; line-height: 1; margin-bottom: 8px; }
/* h2 (pas h3) depuis l'audit a11y 2026-08-04 : cf. _cookie_banner_html dans
   platform_client_routes.py — sélecteur réaligné sur la balise réellement émise. */
.cookie-modal h2 {
  font-family: var(--heading-font);
  color: var(--ink);
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.cookie-modal p {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.cookie-btns { display: flex; gap: 10px; justify-content: center; }
.cookie-modal .cookie-status {
  min-height: 1.35em;
  margin: 8px 0;
  font-size: 0.78rem;
}
.cookie-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.cookie-accept { background: var(--accent-fill); color: var(--kp-ink-deep); }
.cookie-accept:hover { background: var(--accent-fill-soft); }
.cookie-refuse {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(161, 161, 170, 0.4);
}
.cookie-refuse:hover { color: var(--ink); border-color: var(--muted); }
.cookie-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--faint);
  font-family: var(--sans);
  font-size: 0.78rem;
  text-decoration: underline;
}
.cookie-link:hover { color: var(--muted); }
.footer-privacy {
  display: block;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86em;
  margin: 5px 0;
  padding: 0;
  text-align: left;
}
.footer-privacy:hover,
.footer-privacy:focus-visible { color: var(--ink); text-decoration: underline; }
@media (max-width: 480px) {
  .cookie-overlay { align-items: flex-end; padding: 0; }
  .cookie-modal { border-radius: 14px 14px 0 0; max-width: none; }
}

/* Contrat terminal : doit rester après les surcharges historiques !important. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .nav a,
  .lead-form input[type="email"],
  .newsletter-form input[type="email"],
  .optin-form input[type="email"],
  .form-group input[type="email"],
  .wall input[type="email"],
  input[type="email"],
  .lead-form button,
  .newsletter-form button,
  .optin-form button,
  .form-group button,
  .wall button,
  button.btn-subscribe,
  button[type="submit"],
  .share-btn,
  .cat-modal-item {
    transition: none !important;
  }
  .lead-form button:hover,
  .newsletter-form button:hover,
  .optin-form button:hover,
  .form-group button:hover,
  .wall button:hover,
  button.btn-subscribe:hover,
  button[type="submit"]:hover,
  .share-btn:hover,
  .cat-modal-item:hover,
  .hero-img {
    transform: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   MODE CLAIR (Light Theme) — ajouté 2026-08-13
   Sources : whitep4nth3r.com, CSS-Tricks light-dark(), MDN prefers-color-scheme
   ═════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg: #f5f3ef;
  --bg-rgb: 245, 243, 239;
  --surface-rgb: 255, 255, 255;
  --gold: #00657a;
  --goldsoft: #005468;
  /* Rubriques et états : mêmes familles, nuances lisibles sur papier. */
  --kp-info: #00657a;
  --kp-x1: #735000;
  --kp-x2: #7442a6;
  --kp-x3: #b51b42;
  --kp-x4: #006a45;
  --kp-x5: #995000;
  --kp-x6: #006c60;
  --kp-success: #00714e;
  --kp-x8: #576476;
  --kp-x18: #52525b;
  --kp-x20: #52525b;
  --paper: rgba(255, 255, 255, 0.88);
  --surface: #ffffff;
  --surface2: #f5f3ef;
  --header-bg: rgba(255, 255, 255, 0.95);
  --nav-bg: rgba(250, 249, 246, 0.95);
  --ink: #17171f;
  --muted: #52525b;
  --faint: #6b6b74;
  --body: #3a3a4a;
  --line: rgba(0, 101, 122, 0.25);
  --line-bright: rgba(0, 101, 122, 0.55);
  --hero-bg: #ffffff;
  --hero-text: #17171f;
}

[data-theme="light"] .brand {
  color: var(--kp-ink);
}

[data-theme="light"] .brand span {
  background: linear-gradient(135deg, var(--kp-gold-antique) 0%, var(--kp-gold-deep) 50%, var(--kp-brown-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 101, 122, 0.15));
}

[data-theme="light"] .nav {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .nav a {
  color: var(--kp-x23);
}

[data-theme="light"] .nav a.on,
[data-theme="light"] .nav a:hover {
  color: var(--kp-gold-deep);
}

[data-theme="light"] .site-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .weather-item {
  background: var(--kp-paper);
  border-color: rgba(0, 101, 122, 0.2);
}

[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] body {
  background-image:
    radial-gradient(1200px 700px at 80% -10%, rgba(33, 212, 253, 0.08), transparent 65%),
    radial-gradient(900px 500px at 15% 40%, rgba(33, 212, 253, 0.04), transparent 60%);
}

[data-theme="light"] ::selection {
  background: var(--accent-fill);
  color: var(--kp-ink-deep);
}

/* prefers-color-scheme désactivé (2026-08-13) : le DARK est le défaut du site. */

/* TOGGLE BOUTON */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 10040;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-bright); background: var(--surface);
  color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.theme-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.theme-toggle:active { transform: scale(0.95); }
[data-theme="light"] .theme-toggle::after { content: "☾"; }
:root:not([data-theme="light"]) .theme-toggle::after { content: "☀"; }

/* MICRO-INTERACTIONS cards — CLS-safe (opacity + shadow uniquement) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.3s ease,
      box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .card:hover {
    border-color: var(--line-bright);
    box-shadow: 0 8px 24px rgba(33, 212, 253,0.12), 0 2px 8px rgba(0,0,0,0.15);
  }
  .card:hover .carddate { color: var(--gold); }
  .hero.une:hover { box-shadow: 0 12px 40px rgba(33, 212, 253,0.18); }
  a.card-link:hover h3, a[href]:hover .cardtitle { color: var(--goldsoft); transition: color 0.2s ease; }
}

/* Scrollbar custom */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Focus visible — WCAG 2.2 */
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ═════════════════════════════════════════════════════════════════════
   REHAUSSEMENT VISUEL — V4 "Cyan, Ink & Paper" (2026-08-13)
   Sources : Tubik editorial, Michal Malewicz UI 2026-2027, CSS-Tricks
   ═════════════════════════════════════════════════════════════════════ */

/* ── WIDGET MÉTÉO PREMIUM ── */
.weather-bar {
  background: var(--paper);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  overflow: hidden;
}

.weather-bar .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.weather-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.weather-items {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}
.weather-items::-webkit-scrollbar { display: none; }

.weather-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--line);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: default;
}

.weather-item:hover {
  border-color: var(--line-bright);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(33, 212, 253, 0.15);
  transform: translateY(-1px);
}

.w-icon {
  font-size: 16px;
  line-height: 1;
}

.w-city {
  font-weight: 600;
  color: var(--ink);
}

.w-temp {
  font-weight: 700;
  font-size: 14px;
  color: var(--goldsoft);
}

.w-range {
  display: flex;
  gap: 4px;
  font-size: 11px;
}

.w-max { color: var(--goldsoft); font-weight: 600; }
.w-min { color: var(--muted); }

.weather-src {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  opacity: 0.6;
}

/* ── GLASSMORPHISM CARDS ── */
.card {
  background: var(--paper);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, var(--line-bright), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
}

/* ── HERO SECTION PREMIUM ── */
.hero.une {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-img {
  border-radius: 20px;
}

/* ── SECTION TITLES ── */
.secttl {
  font-family: var(--serif);
  font-weight: 700;
  position: relative;
  padding-left: 16px;
}

.secttl::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, var(--gold), var(--goldsoft));
  border-radius: 2px;
}

/* ── BENTO GRID AMÉLIORÉ ── */
.grid, .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

@media (min-width: 768px) {
  .grid, .cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 24px;
  }
}

/* ── HEADER NAV PREMIUM ── */
.site-header {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* ── ARTICLE BODY TYPOGRAPHY ── */
.art-body, .article-body {
  font-family: var(--read);
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
}

.art-body p, .article-body p {
  margin-bottom: 1.2em;
}

.art-body h2, .article-body h2 {
  font-family: var(--serif);
  font-size: 1.4em;
  font-weight: 700;
  margin-top: 1.5em;
  color: var(--ink);
}

/* ── GRADIENT TEXT (titres premium) ── */
.gradient-text {
  background: linear-gradient(135deg, var(--gold) 0%, var(--goldsoft) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BADGE CATÉGORIE PREMIUM ── */
.cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(33, 212, 253, 0.12);
  color: var(--gold);
  border: 1px solid rgba(33, 212, 253, 0.25);
}

/* ── SKELETON LOADING (perçu perf) ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── MODE CLAIR — glassmorphism adapté ── */
[data-theme="light"] .card,
[data-theme="light"] .weather-bar,
[data-theme="light"] .site-header {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

[data-theme="light"] .card::before {
  background: linear-gradient(135deg, rgba(33, 212, 253, 0.4), transparent 50%);
}

[data-theme="light"] .hero.une {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cat-badge {
  background: rgba(33, 212, 253, 0.15);
}

/* ═════════════════════════════════════════════════════════════════════
   FIX OVERFLOW MOBILE (2026-08-13) — empêche le swipe horizontal noir
   Sources : web.dev CLS, MDN overflow-x
   ═════════════════════════════════════════════════════════════════════ */

/* Filet global : aucun élément ne dépasse de la largeur viewport */
.site-header,
.nav,
.weather-bar,
.hero,
.grid,
.cards,
.sitefoot,
.wrap {
  max-width: 100vw;
  overflow-x: clip;
}

/* Le wrap intérieur garde son max-width mais ne déborde jamais */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px;
  box-sizing: border-box;
}

/* Images responsives — jamais plus larges que le conteneur */
img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Theme toggle : ne déborde pas sur mobile */
@media (max-width: 480px) {
  .theme-toggle {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* Nav scrollable : clip le débordement */
.nav {
  overflow-x: hidden;
}

.nav .wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Weather bar : clip horizontal */
.weather-bar {
  overflow: hidden;
}

.weather-items {
  overflow-x: auto;
  scrollbar-width: none;
}

/* ── FIX MÉTÉO ESPACEMENT (2026-08-13) ── */
.w-sep {
  color: var(--faint);
  opacity: 0.5;
  margin: 0 2px;
}

.w-range {
  gap: 6px !important;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.w-max::before { content: ''; }
.w-min::before { content: ''; }

/* ── FIX CARDS ESPACEMENT ── */
.card {
  margin-bottom: 4px;
}

.cards .card,
.grid .card {
  margin-bottom: 0;
}

/* ── FIX LIENS DANS CARDS ── */
.card a {
  display: block;
  text-decoration: none;
}

.cardtitle {
  line-height: 1.35;
  margin-bottom: 6px;
}

/* ── FIX SECTIONS (respiration) ── */
.secttl {
  margin: 32px 0 16px;
}

section {
  margin-bottom: 24px;
}

/* ── SCROLLBAR NAV INVISIBLE ── */
.nav .wrap {
  scrollbar-width: none;
}
.nav .wrap::-webkit-scrollbar { display: none; }

@media (min-width: 769px) {
  .nav .wrap {
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-x: visible !important;
  }
}

.article-body,
.freebody,
.art .body,
.cardtitle,
.card p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Corps de lecture K-Pulse : la largeur de la page (1200px) sert les cartes et
   les médias, pas les longues séquences de texte. Une mesure bornée aide à
   garder sa ligne sans modifier le Markdown ou intercaler un élément dans le
   récit. Les unités relatives laissent le zoom et les réglages de texte du
   navigateur se replier dans la largeur du viewport. */
.art .body > .intro,
.art .body > .article-body {
  width: 100%;
  max-width: min(100%, 72ch);
  margin-inline: auto;
  text-align: start;
}

.art .body > .article-body {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem) !important;
  line-height: 1.8 !important;
}

.art .body > .article-body > p {
  margin-bottom: 1.5em;
}

.art .body > .intro > p {
  margin-bottom: 1.5em;
}

@media (max-width: 600px) {
  .art .body > .intro,
  .art .body > .article-body {
    max-width: 100%;
  }
}

/* Contrats terminaux du thème clair. Ces règles sont volontairement placées après
   les styles éditoriaux historiques à !important : elles empêchent qu'une couleur
   conçue pour le fond sombre reste active sur la surface claire. */
[data-theme="light"] {
  --hero-text: #fff;
}

[data-theme="light"] .nav {
  background: var(--nav-bg) !important;
  border-bottom-color: rgba(0, 101, 122, 0.28) !important;
}

[data-theme="light"] .nav a {
  color: var(--kp-ink-soft) !important;
  background: #fff !important;
  border-color: rgba(0, 101, 122, 0.32) !important;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08) !important;
}

[data-theme="light"] .nav a:hover {
  color: var(--kp-x24) !important;
  background: var(--kp-paper) !important;
  border-color: var(--kp-gold-deep) !important;
}

[data-theme="light"] .nav a.on {
  color: var(--kp-x25) !important;
}

[data-theme="light"] .hero h1,
[data-theme="light"] .hero h2,
[data-theme="light"] .hero p {
  color: #fff !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .article-body,
[data-theme="light"] .freebody,
[data-theme="light"] .art .body,
[data-theme="light"] .article-body li,
[data-theme="light"] .freebody li,
[data-theme="light"] .art .body li,
[data-theme="light"] .article-body blockquote,
[data-theme="light"] .freebody blockquote,
[data-theme="light"] .art .body blockquote {
  color: var(--kp-ink-soft) !important;
}

[data-theme="light"] .article-body strong,
[data-theme="light"] .freebody strong,
[data-theme="light"] .art .body strong {
  color: var(--kp-ink) !important;
}

[data-theme="light"] .article-body th,
[data-theme="light"] .article-body td,
[data-theme="light"] .freebody th,
[data-theme="light"] .freebody td {
  border-color: rgba(26, 26, 46, 0.2) !important;
  color: var(--kp-x26);
}

[data-theme="light"] .article-body tr:nth-child(even),
[data-theme="light"] .freebody tr:nth-child(even) {
  background: rgba(26, 26, 46, 0.035) !important;
}

[data-theme="light"] .article-body hr,
[data-theme="light"] .freebody hr,
[data-theme="light"] .art .body hr {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(26, 26, 46, 0.25),
    transparent
  ) !important;
}

[data-theme="light"] .article-sources summary,
[data-theme="light"] .article-sources li {
  color: var(--kp-x24);
}

[data-theme="light"] .article-sources p {
  color: var(--kp-x27);
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;min-height:46px;border:none;border-radius:10px;background:var(--accent-fill);color:var(--kp-ink-deep);font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;cursor:pointer;text-decoration:none;box-shadow:0 2px 10px rgba(33,212,253,.22);transition:all .18s ease}.btn:hover{background:var(--accent-fill-soft);transform:translateY(-1px);box-shadow:0 4px 16px rgba(33,212,253,.34)}.btn:active{transform:translateY(0)}.btn:focus-visible{outline:3px solid var(--goldsoft);outline-offset:2px}@media(max-width:600px){.btn{width:100%}}.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:32px 0}.share-bar .share-label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-right:4px}.share-bar .share-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;padding:0;border-radius:50%;font-size:.875rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:all .2s}.share-bar .share-btn svg{width:18px;height:18px;flex:0 0 auto}.share-bar .share-wa{background:#25D366;color:#fff}.share-bar .share-wa:hover{background:#1da851;transform:translateY(-1px)}.share-bar .share-x{background:#000;color:#fff}.share-bar .share-x:hover{background:#1a1a1a;transform:translateY(-1px)}.share-bar .share-fb{background:#1877F2;color:#fff}.share-bar .share-fb:hover{background:#0d5fc7;transform:translateY(-1px)}.share-bar .share-cp{background:rgba(33,212,253,.15);color:var(--gold);border:1px solid rgba(33,212,253,.3)}.share-bar .share-cp:hover{background:rgba(33,212,253,.25)}.article-citation{margin:16px 0;color:var(--body)}.article-citation summary{cursor:pointer}.article-citation textarea{display:block;width:100%;box-sizing:border-box;min-height:7em;margin:10px 0;padding:12px;color:var(--body);background:var(--bg);border:1px solid var(--border);border-radius:8px}.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.5)}.card .ph{object-fit:cover}.card .ph{object-fit:cover}.carddate{display:block;font-size:.64em;color:var(--muted);opacity:.8;margin-top:2px}.meta{font-size:.82em;color:var(--muted);margin:0 0 4px;font-family:var(--sans)}.wall-more{margin:10px 0 2px}.wall-more summary{cursor:pointer;font-size:.86em;color:var(--gold);font-weight:600;margin:6px 0;list-style:none}.wall-more summary::-webkit-details-marker{display:none}.wallfoot{margin-top:14px;font-size:.8em;color:var(--muted);text-align:center}.wallfoot a{text-decoration:underline;margin:0 6px;color:var(--muted)}.minicap{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.minicap p{font-size:.92em;color:var(--muted);margin:0 0 10px;font-family:var(--read)}.minicapok{color:var(--gold);font-family:var(--read)}.sitefoot{margin-top:70px;border-top:1px solid var(--line);padding:38px 0 26px}.sitefoot .fcols{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}.sitefoot .fcol{min-width:160px}.sitefoot .fcol strong{font-family:var(--serif);font-size:1.15em;color:var(--ink)}.sitefoot .fcol p{font-size:.82em;color:var(--muted);margin:6px 0 0}.sitefoot .flbl{display:block;font-size:.66em;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint);margin-bottom:8px}.sitefoot .fcol a{display:block;font-size:.86em;color:var(--muted);margin:5px 0}.sitefoot .fcol a:hover{color:var(--ink);text-decoration:underline}.sitefoot .fcopy{font-size:.74em;color:var(--faint);margin:28px 0 0}.sitefoot .fcol .fsocial{display:flex;flex-wrap:wrap;gap:0 16px;list-style:none;margin:0;padding:0;max-width:min(100%,250px)}.sitefoot .fcol .fsocial li{margin:0;min-width:0}.sitefoot .fcol .fsocial a{display:inline-flex;align-items:center;gap:7px}.sitefoot .fcol .fsocial svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(pointer:coarse){body{background-attachment:scroll}}.sharegate{margin:18px 0 4px}.sharegate .sg-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.8em;text-transform:uppercase;letter-spacing:2px;margin:6px 0 12px}.sharegate .sg-or:before,.sharegate .sg-or:after{content:'';flex:1;height:1px;background:var(--line)}.sharegate .sg-p{font-size:.94em;color:var(--body);margin:0 0 10px;font-family:var(--read)}.sharegate .sharebar{margin:0}.srnudge{display:none;margin-top:20px;padding:14px 16px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-family:var(--read);font-size:.94em;color:var(--ink)}.srnudge a{color:var(--gold);font-weight:600;text-decoration:underline}.rgpd{margin-top:12px;font-size:.72em;line-height:1.55;color:var(--faint);font-family:var(--sans);text-align:left}.rgpd a{color:var(--muted);text-decoration:underline}