/* FILE: chicken-road-2/index.css (v1 - 2026-09-28)
   SCOPE: page-local styles for /chicken-road-2/ only */

:root {
  --fg: #1a1a1a;
  --bg: #ffffff;
  --muted: #555;
  --link: #498003;
  --link-on-dark: #84e905;
  --max: 720px;
}

* { box-sizing: border-box; }

body {
  font-family: Poppins, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  padding: 0;
}

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* hero-flush (owner 2026-10-17, HARD — rulebook H4): a page opening with
   .crp-hero sits FLUSH under the tagline strip; the main column's top
   breathing room belongs to text-first openings only. No empty band
   above the hero. Guard: staged-qa L.topgap (1280 + 390). */
main:has(> article > .crp-hero:first-child),
main:has(> .crp-hero:first-child) { padding-top: 0; }

h1 { font-size: 1.875rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
p { margin: 0 0 1rem; }

.meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 2rem;
}

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

/* link colour on dark content surfaces (owner order 2026-10-22): body links
   take the branded green. --link #498003 is the deepest shade of the brand
   lime hue (#84e905) passing WCAG AA on light surfaces (4.80:1 on #ffffff,
   4.52:1 on the #fff7ed takeaways panel). Dark content surfaces use the
   brand lime itself (11.76:1 on #14161a). Underline stays everywhere -
   colour is never the only link signal. Component-scoped rule: links inside
   .crp-hero / .quiz-option are component colours by design (staged-qa
   L.linkcolor ancScope), the plain-link token governs everywhere else. */
.crp-hero a, .quiz-option a { color: var(--link-on-dark); }

table { margin: 0 0 1rem; }
/* key-value table top-alignment (owner order 2026-10-31, HARD — register
   R-289): in two-column "at a glance" tables the first-column headings
   align to the TOP of their row, on the second column's first line.
   Without this declaration the UA default (middle) drops headings to
   the middle of wrapped rows (owner screenshot, EN Cash-or-Crash UNLV
   table). The rule is generic — every th/td on the estate top-aligns;
   component table rules (.crp-article table, table.cmp, .crp-wt,
   .kf-table) already declare the same locally and keep precedence by
   specificity. Guard: staged-qa L.kvalign (rendered computed style,
   390 + 1280). */
th, td { text-align: left; vertical-align: top; }

.takeaways {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 14px 0 24px;
}
.takeaways h2 { margin: 0.5rem 0 0.5rem; font-size: 1.05rem; }
.takeaways ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }

details {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 0 0 8px;
}
details summary {
  cursor: pointer;
  font-weight: 600;
}
details[open] summary { margin-bottom: 6px; }

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e5e5;
  color: var(--muted);
}/* CRP SHELL — shared nav + search (BVDS v2.0 / gamblingnerd pattern). Scope: all non-heritage pages. */
.crp-nav {
  position: sticky; top: 0; z-index: 1000;
  background: #14161a;
  display: flex; align-items: center; gap: 4px;
  padding: 0 20px; height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.crp-nav-logo { display: flex; align-items: center; margin-right: 14px; }
.crp-nav-logo img { height: 40px; width: auto; border-radius: 4px; display: block; }
.crp-nav-menu { display: flex; align-items: center; gap: 2px; flex: 1; }
.crp-nav-item { position: relative; }
.crp-nav-item > a {
  color: #e8e8e8; text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: 10px 14px; display: block; border-radius: 4px;
}
.crp-nav-item > a:hover, .crp-nav-item:focus-within > a { background: #23262e; color: #e8b64c; }
.crp-drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: #1a1d24; border: 1px solid #2c2f36; border-radius: 6px;
  padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.crp-nav-item:hover .crp-drop, .crp-nav-item:focus-within .crp-drop { display: block; }
.crp-drop a {
  color: #c9cdd4; text-decoration: none; font-size: 13.5px;
  padding: 9px 12px; display: block; border-radius: 4px;
}
.crp-drop a:hover { background: #23262e; color: #e8b64c; }
.crp-search { position: relative; margin-left: auto; }
.crp-search input {
  background: #23262e; border: 1px solid #2c2f36; border-radius: 6px;
  color: #e8e8e8; font-size: 13.5px; padding: 8px 12px; width: 190px;
  outline: none;
}
.crp-search input:focus { border-color: #e8b64c; width: 230px; }
.crp-search-results {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 320px;
  background: #1a1d24; border: 1px solid #2c2f36; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); overflow: hidden;
}
.crp-search-results a {
  display: block; padding: 10px 14px; text-decoration: none;
  border-bottom: 1px solid #23262e;
}
.crp-search-results a:last-child { border-bottom: 0; }
.crp-search-results strong { display: block; color: #e8e8e8; font-size: 13.5px; }
.crp-search-results span { display: block; color: #8b93a1; font-size: 12px; margin-top: 2px; }
.crp-search-results a:hover { background: #23262e; }
.crp-search-results a:hover strong { color: #e8b64c; }
.crp-search-empty { display: block; padding: 12px 14px; color: #8b93a1; font-size: 13px; }
.crp-nav-toggle, .crp-nav-burger { display: none; }

@media (max-width: 860px) {
  .crp-nav { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .crp-nav-burger {
    display: block; color: #e8b64c; font-size: 22px; cursor: pointer;
    margin-left: auto; padding: 4px 10px; user-select: none;
  }
  .crp-nav-menu {
    display: none; flex-direction: column; align-items: stretch; width: 100%;
    order: 3; padding-top: 8px;
  }
  .crp-nav-toggle:checked ~ .crp-nav-menu { display: flex; }
  .crp-drop { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 16px; }
  .crp-search { order: 4; width: 100%; margin: 10px 0 4px; }
  .crp-search input { width: 100%; }
  .crp-search input:focus { width: 100%; }
  .crp-search-results { left: 0; width: 100%; }
}/* CRP FOOTER V2 + BACK-TO-TOP + HERO (gamblingnerd patterns, CRP brand) */

/* ---- amber top rule + dark footer ---- */
.crp-footer-v2 {
  background: #14161a;
  border-top: 4px solid #e8b64c;
  color: #9aa0a6;
  margin-top: 3rem;
  padding: 34px 20px 26px;
}
.crp-footer-v2 .crp-fw { max-width: 1100px; margin: 0 auto; }

/* footer search */
.crp-footer-search {
  display: flex; justify-content: center; margin: 0 auto 26px; max-width: 520px;
  background: #1a1d24; border: 1px solid #2c2f36; border-radius: 999px; padding: 6px;
}
.crp-footer-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: #e8e8e8; font-size: 14px; padding: 8px 14px;
}
.crp-footer-search button {
  background: #e8b64c; color: #14161a; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 13px; padding: 9px 22px; cursor: pointer;
}
.crp-footer-search button:hover { background: #d97706; }
.crp-footer-search-results {
  display: none; max-width: 520px; margin: -20px auto 20px;
  background: #1a1d24; border: 1px solid #2c2f36; border-radius: 8px; overflow: hidden;
}
.crp-footer-search-results a { display: block; padding: 10px 16px; text-decoration: none; border-bottom: 1px solid #23262e; }
.crp-footer-search-results strong { display: block; color: #e8e8e8; font-size: 13.5px; }
.crp-footer-search-results span { display: block; color: #8b93a1; font-size: 12px; }
.crp-footer-search-results a:hover { background: #23262e; }
.crp-footer-search-results a:hover strong { color: #e8b64c; }

/* footer link row with amber underlines */
.crp-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 34px; margin-bottom: 28px;
}
.crp-footer-links a {
  color: #e8e8e8; text-decoration: none; font-weight: 600; font-size: 14px;
  padding-bottom: 6px; border-bottom: 2px solid #e8b64c;
}
.crp-footer-links a:hover { color: #e8b64c; }

/* brand + socials */
.crp-footer-brand { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.crp-footer-brand img { height: 34px; width: auto; display: block; }
.crp-footer-social { display: flex; gap: 14px; }
.crp-footer-social a { color: #9aa0a6; text-decoration: none; font-size: 12.5px; }
.crp-footer-social a:hover { color: #e8b64c; }

/* disclaimer */
.crp-footer-disc { max-width: 980px; margin: 0 auto 22px; font-size: 12.5px; line-height: 1.65; }
.crp-footer-disc p { margin: 0 0 10px; }
.crp-footer-disc strong { color: #c9cdd4; }

/* sources + RG */
.crp-footer-sources { text-align: center; font-size: 12.5px; margin-bottom: 16px; }
.crp-footer-sources strong { color: #c9cdd4; }
.crp-rg-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.crp-18 {
  display: inline-block; background: #e8b64c; color: #14161a; font-weight: 800;
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px;
}
.crp-footer-copy { text-align: center; font-size: 12px; color: #6b7280; margin: 14px 0 0; }

/* ---- back to top ---- */
.crp-top-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 1200;
  width: 46px; height: 46px; border-radius: 50%;
  background: #e8b64c; color: #14161a; border: 0; cursor: pointer;
  font-size: 20px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.4);
  display: none; align-items: center; justify-content: center;
}
.crp-top-btn:hover { background: #d97706; }
.crp-top-btn.show { display: flex; }

/* ---- hero (hub) ---- */
.crp-hero {
  position: relative; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center right;
  margin: 0 0 22px;
}
.crp-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,12,18,.92) 0%, rgba(10,12,18,.72) 42%, rgba(10,12,18,.15) 75%, rgba(10,12,18,0) 100%);
}
.crp-hero-inner { position: relative; padding: 44px 38px 40px; max-width: 640px; }
.crp-hero-inner h1 { color: #fff; font-size: 2rem; line-height: 1.15; margin: 0 0 14px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.crp-hero-desc { color: #d5d9e0; font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.crp-hero .meta { color: #9aa0a6; margin: 0; }
.crp-hero-sources { color: #9aa0a6; font-size: 12px; margin: 10px 0 0; }
.crp-hero-sources strong { color: #e8b64c; font-size: 11px; letter-spacing: .08em; }

@media (max-width: 640px) {
  .crp-hero-inner { padding: 30px 22px; }
  .crp-hero-inner h1 { font-size: 1.5rem; }
  .crp-footer-links { gap: 16px 22px; }
}
/*shell-v4*/
html body .crp-footer-v2 .crp-fw{max-width:680px;margin:0 auto;padding:0 18px}
.crp-nav-search{display:flex;gap:6px;margin-left:auto;position:relative;align-items:center}
.crp-nav-search input{width:180px;padding:6px 10px;border-radius:8px;border:1px solid #3a3f4b;background:#151820;color:#fff;font-size:14px}
.crp-nav-search input::placeholder{color:#8a93a6}
.crp-nav-search button{background:#b7791f;color:#fff;border:0;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;font-weight:600}
.crp-search-results{position:absolute;top:110%;right:0;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);min-width:280px;max-width:340px;display:none;z-index:60;padding:6px}
.crp-search-results a{display:block;padding:8px 10px;color:#16181d;font-size:14px;border-radius:6px}
.crp-search-results a:hover{background:#f4f0e6}
.crp-search-empty{display:block;padding:8px 10px;color:#666;font-size:13px}
@media(max-width:760px){
  .crp-nav-search{margin:10px 0 4px;width:100%}
  .crp-nav-search input{flex:1;width:auto}
}
.crp-nav-item > a{display:inline-block}

/*crp-icons-v1*/
.crp-icon-group{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}
.crp-icon-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;margin:0}
.crp-icon-card img{flex:none}
.crp-icon-card h3{margin:0 0 6px;font-size:16px;color:#1a202c}
.crp-icon-card p{margin:0;font-size:14px;line-height:1.55;color:#4a5568}

/*shell-v5*/
.crp-burger{display:none;background:none;border:0;color:#e8b64c;font-size:22px;cursor:pointer;line-height:1;margin-left:auto;padding:4px 10px;user-select:none;border-radius:8px}
.crp-burger:hover{background:#22262e}
.crp-burger:focus-visible{outline:2px solid #e8b64c}
@media(max-width:860px){
  .crp-burger{display:block}
  .crp-nav-menu.open{display:flex;flex-direction:column;align-items:stretch;width:100%;order:3;background:#14161a;border:1px solid #2a2f3a;border-radius:10px;padding:8px 10px;margin-top:8px}
  .crp-nav-menu.open .crp-nav-item > a{display:block;padding:10px 12px;color:#fff;border-radius:8px}
  .crp-nav-menu.open .crp-nav-item > a:hover{background:#22262e}
}
.crp-footer-v2{max-width:680px;margin:0 auto;padding:30px 22px 24px}

/*shell-v6*/
.crp-brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.crp-brand img{height:34px;width:auto;display:block}
@media(max-width:640px){
  .crp-hero{background-position:center}
  .crp-hero::before{background:linear-gradient(180deg,rgba(10,12,18,.80) 0%,rgba(10,12,18,.42) 55%,rgba(10,12,18,.10) 100%)}
}
/* crp-nav - sticky header + mobile menu polish (progressive) */
.crp-nav{position:sticky;top:0;z-index:60}
@media (max-width:860px){.crp-nav-menu{display:none}.crp-nav-menu.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#0b0e14;padding:12px 16px;gap:10px}
#crp-nav-toggle{display:inline-flex}}
@media (min-width:861px){#crp-nav-toggle{display:none}}/* crp-media - responsive media defaults */
main img{max-width:100%;height:auto}
main iframe{max-width:100%}
figure{margin:16px 0}
figcaption{font-size:13px;color:#9aa3b2;margin-top:6px}/* crp-icons - inline glyph helpers */
.crp-ic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em}
.crp-badge-18{display:inline-block;border:1px solid #e0b64f;color:#e0b64f;border-radius:4px;font-size:11px;padding:0 5px;font-weight:700}/* crp-pwa - install/offline notice slot (progressive; no SW in this build) */
.crp-offline-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:#2a2110;color:#f4d58d;text-align:center;padding:8px;font-size:13px;z-index:90}
body.is-offline .crp-offline-bar{display:block}/* crp-quiz - quiz option states */
.quiz-option{cursor:pointer;border:1px solid #2a3140;border-radius:8px;padding:10px 14px;margin:4px 0;background:#12161d}
.quiz-option:hover{border-color:#e0b64f}
.quiz-option.selected{border-color:#e0b64f;background:#1a1608}/* crp-search - search results dropdown */
#crp-search-results,#crp-footer-results{display:none;position:absolute;z-index:70;background:#12161d;border:1px solid #2a3140;border-radius:8px;min-width:260px;max-width:420px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.crp-search-item{display:block;padding:10px 12px;border-bottom:1px solid #232a36;text-decoration:none}
.crp-search-item-t{display:block;font-weight:600;color:#f4f6fa}
.crp-search-item-d{display:block;font-size:12px;color:#9aa3b2}
.crp-search-empty{padding:10px 12px;color:#9aa3b2;font-size:13px}/* crp-toc - table of contents panel */
.crp-toc-on{border:1px solid #2a3140;border-radius:8px;padding:14px 18px;background:#12161d;margin:18px 0}
.crp-toc-h{font-weight:700;margin:0 0 8px;font-size:14px;color:#e0b64f}
.crp-toc-on ol{margin:0;padding-left:18px;font-size:14px;line-height:1.8}
.crp-toc-on a{color:#cfd6e4;text-decoration:none}
.crp-toc-on a:hover{text-decoration:underline}/* site-tagline - persistent UTP strip under site header (row-92 spec: non-heading <p>, gold on dark, Poppins, subordinate to H1) */
.site-tagline-strip{background:#0b0d12;border-bottom:1px solid #1c2230;text-align:center;padding:7px 14px}
.site-tagline{margin:0;font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-size:14px;letter-spacing:.4px;color:#d69e2e}
@media (max-width:600px){.site-tagline{font-size:12.5px;letter-spacing:.2px}}

/* row724 chart390-go (owner CSS GO 2026-10-11): mobile chart height reduce - full chart visible */
@media (max-width:480px){#rtpChart{height:200px !important}}


/* P0 Option B Teal Counterpoint (owner CSS GO rows 747+749, 2026-10-11) */
.crp-aff-cta{display:block;width:fit-content;margin:8px auto;padding:16px 36px;border-radius:10px;background:#0e7c7b;color:#ffffff;font-weight:700;font-size:17px;line-height:1.4;text-decoration:none;text-align:center;min-height:44px;max-width:420px;border-bottom:3px solid #e8b64c;cursor:pointer;transition:transform 0.15s ease,background 0.15s ease}
.crp-aff-cta:hover{transform:translateY(-1px);background:#0f8a89}
.crp-aff-cta:active{transform:translateY(0)}
.crp-aff-cta:focus-visible{outline:3px solid #e8b64c;outline-offset:2px}
.crp-aff-disclosure{display:block;margin-top:10px;font-size:12px;color:#8b93a1;text-align:center}
@media (max-width:480px){.crp-aff-cta{display:block;width:100%;box-sizing:border-box;padding:18px 24px}}

/* URGENT fix 2026-10-12 (owner GO): skip link hidden until focus */
.crp-skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.crp-skip:focus-visible{position:fixed;left:12px;top:12px;width:auto;height:auto;overflow:visible;z-index:10000;background:#e8b64c;color:#14161a;padding:10px 18px;border-radius:6px;font:600 14px system-ui,sans-serif;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* URGENT fix 2026-10-12 (owner GO): hero background image */
.crp-hero{background-image:url('/images/chicken-road-crash-game-hero.jpg');background-size:cover;background-position:center}

/* URGENT QA fix 2026-10-12 (owner GO): nav items never wrap */
.crp-nav-item > a, .crp-nav-menu a { white-space: nowrap; }

/* URGENT QA fix3 2026-10-12 (owner GO): simulator results stick near sliders on mobile */
@media (max-width:480px){.crp-tool-panel .crp-kpi-row{position:sticky;top:64px;z-index:50;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:8px 6px;border-radius:8px;margin-top:8px}}

/* crp-intro-benefit — intro=benefit block (owner hard rule 2026-10-13): the standard opening
   panel of PR articles and calculator pages. Built ONLY from existing palette tokens:
   panel tint #fff7ed + border #fdba74 (the .takeaways pairing), accent #e8b64c (brand gold),
   text var(--fg), marker var(--link). One component, every page — never ad-hoc styling. */
.crp-intro-benefit{background:#fff7ed;border:1px solid #fdba74;border-left:4px solid #e8b64c;border-radius:6px;padding:14px 18px;margin:0 0 14px}
.crp-intro-benefit-tag{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.crp-intro-benefit .crp-hero-desc,.crp-intro-benefit-lead{color:var(--fg);font-size:16px;line-height:1.6;margin:0}
.crp-intro-benefit-list{margin:10px 0 0;padding:0 0 0 18px;color:var(--fg);font-size:15px;line-height:1.55}
.crp-intro-benefit-list li{margin:0 0 4px}
.crp-intro-benefit-list li:last-child{margin:0}

/* crp-press-box / crp-press-quote — journalist blocks on PR articles (owner 2026-10-13):
   suggested story angles + quotable expert quote. Same palette tokens as
   .crp-intro-benefit / .takeaways: panel tint #fff7ed, border #fdba74,
   accent #e8b64c (brand gold), text var(--fg). Design-system file only. */
.crp-press-box{background:#fff7ed;border:1px solid #fdba74;border-radius:6px;padding:14px 18px;margin:18px 0}
.crp-press-box h2{margin:0 0 8px}
.crp-press-box h3{margin:14px 0 4px;font-size:16px;line-height:1.4}
.crp-press-box p{margin:0 0 6px;line-height:1.6}
.crp-press-quote{margin:18px 0;padding:4px 0 4px 16px;border-left:4px solid #e8b64c}
.crp-press-quote p{font-size:17px;line-height:1.6;margin:0 0 6px}
.crp-press-quote cite{font-style:normal;font-weight:700}
.crp-press-note{font-size:14px;line-height:1.6}

/* crp-demo — PR-2 interactive demonstration block (« Le prédicteur contre le hasard »,
   2026-10-13): replays the reference round streams; palette tokens only, same
   tinted-panel pairing as .crp-intro-benefit / .crp-press-box. */
.crp-demo{background:#fff7ed;border:1px solid #fdba74;border-radius:6px;padding:16px 18px;margin:14px 0 20px}
.crp-demo-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 12px}
.crp-demo-group{display:flex;gap:6px}
.crp-demo button{background:#fff;border:1px solid #fdba74;color:var(--fg);border-radius:4px;padding:7px 12px;font:600 13px system-ui,sans-serif;cursor:pointer}
.crp-demo button[aria-pressed="true"]{background:#e8b64c;border-color:#e8b64c;color:#14161a}
.crp-demo label{font-size:13px;font-weight:600;color:var(--fg);display:flex;flex-direction:column;gap:4px}
.crp-demo select{background:#fff;border:1px solid #fdba74;border-radius:4px;padding:6px 8px;font:14px system-ui,sans-serif;color:var(--fg)}
.crp-demo input[type="range"]{accent-color:#e8b64c;width:170px}
.crp-demo-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px}
@media (max-width:640px){.crp-demo-panels{grid-template-columns:1fr}}
.crp-demo-panel{background:#fff;border:1px solid #fdba74;border-radius:6px;padding:10px 14px}
.crp-demo-panel h3{margin:0 0 6px;font-size:15px}
.crp-demo-panel p{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--fg)}
.crp-demo-panel.pred{border-top:4px solid #c2452d}
.crp-demo-panel.ctrl{border-top:4px solid #3d5a80}
.crp-demo-busts{font-size:13px;color:var(--fg);margin:4px 0}
.crp-demo canvas{width:100%;height:auto;background:#fff;border:1px solid #fdba74;border-radius:6px}
.crp-demo-status{font-size:13px;margin:6px 0 10px;color:var(--fg)}
.crp-demo-views{display:flex;gap:6px;margin:0 0 10px}
.crp-demo-legend{font-size:13px;margin:8px 0 4px}
.crp-demo-legend .sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:middle;margin:0 2px 0 8px}
.crp-demo-legend .sw.gold{background:#e8b64c}
.crp-demo-legend .sw.red{background:rgba(194,69,45,.85)}

/* crp-media-podcast / crp-media-webinaire — media-format panels (owner 2026-10-14):
   the podcast page carries TWO media inputs; each gets an instantly recognisable
   panel so the formats never read as identical plain sections. Podcast = the warm
   audio family (panel tint #fff7ed + border #fdba74 + gold accent #e8b64c — the
   .takeaways / .crp-intro-benefit pairing). Webinaire = the cool live-screen family
   (panel tint #f4f6fa + border #e2e8f0 + teal accent #0e7c7b — the P0 teal
   counterpoint). Palette tokens only — no ad-hoc colors. The header icon is an
   inline SVG (.crp-media-icon, stroke=currentColor, sized in em so it scales with
   the heading): MICROPHONE for the podcast, MONITOR + PLAY for the webinaire.
   One component pair, reused wherever a media block appears — never ad-hoc.
   The coding is COMPLETE (owner 2026-10-14): EVERY block of a media type carries
   its panel — the « Épisodes » list is podcast content, so its section is a
   .crp-media-podcast panel with the mic H2, exactly like the intro block; a
   plain white section between the two panels breaks the code. Inside a panel,
   each item (.podcast-episode) renders as a raised white card (family-tinted
   border) so items stay scannable against the tint. Non-media sections
   (e.g. « Jeu responsable ») stay neutral — no panel. */
.crp-media-podcast,.crp-media-webinaire{border-radius:6px;padding:16px 18px;margin:0 0 22px}
.crp-media-podcast{background:#fff7ed;border:1px solid #fdba74;border-left:4px solid #e8b64c}
.crp-media-webinaire{background:#f4f6fa;border:1px solid #e2e8f0;border-left:4px solid #0e7c7b}
.crp-media-podcast section:first-child>h2{margin-top:0}
.crp-media-podcast section+section>h2{margin-top:1.25rem}
.crp-media-podcast section:last-child>p:last-child{margin-bottom:0}
.crp-media-podcast>h2{margin-top:0}
.crp-media-webinaire>h2{margin-top:0}
.crp-media-podcast .podcast-episode,.crp-media-webinaire .podcast-episode{background:#fff;border:1px solid #fed7aa;border-radius:6px;padding:14px 16px;margin:0 0 16px;box-shadow:0 1px 2px rgba(20,22,26,.05)}
.crp-media-webinaire .podcast-episode{border-color:#cbd5e1}
.crp-media-podcast .podcast-episode:last-child,.crp-media-webinaire .podcast-episode:last-child{margin-bottom:0}
.crp-media-podcast .podcast-episode>h2,.crp-media-webinaire .podcast-episode>h3{margin-top:.35rem}
.crp-media-icon{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.22em;margin-right:9px}
.crp-media-podcast .crp-media-icon{color:#d69e2e}
.crp-media-webinaire .crp-media-icon{color:#0e7c7b}

/* crp-kpi — KPI card row (owner fix 2026-10-30): the « L'essentiel »
   summary strips on research/statistics pages and the results rows
   inside .crp-tool-panel. The markup (.crp-kpi-row > .crp-kpi >
   .kpi-label / .kpi-val / .kpi-sub) shipped estate-wide WITHOUT base
   styles and rendered as stacked plain text (owner flag on the census
   page); these are the missing base rules. Card language mirrors
   .crp-icon-card / .crp-demo-panel: white card, #e2e8f0 border, soft
   shadow, accent top bar — in the data-surface brand pairing: navy
   #0F2B46 values, gold #e8b64c accent (the IG-2 chart tokens).
   DATA-SURFACE COLORS: brand tokens only. Scoped to .crp-kpi-row so
   the standalone .crp-kpi value lines inside .crp-cmp-card
   (comparateur) keep their page-local styling untouched. */
.crp-kpi-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.crp-kpi-row .crp-kpi{flex:1 1 118px;min-width:0;background:#fff;border:1px solid #e2e8f0;border-top:3px solid #e8b64c;border-radius:12px;padding:14px 16px 12px;box-shadow:0 1px 2px rgba(20,22,26,.05);font-variant-numeric:tabular-nums}
.crp-kpi-row .kpi-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6472;line-height:1.45;margin:0 0 6px;overflow-wrap:break-word}
.crp-kpi-row .kpi-val{font-size:2rem;font-weight:800;line-height:1.1;color:#0F2B46;margin:0 0 6px}
.crp-kpi-row .kpi-sub{font-size:12.5px;line-height:1.5;color:#4a5568;margin:0;overflow-wrap:break-word}
/* tool-panel numerals are currency strings (longer than article
   figures): one step down so they hold one line at panel width. */
.crp-tool-panel .crp-kpi-row .kpi-val{font-size:1.5rem}
@media (max-width:560px){
  .crp-kpi-row .crp-kpi{flex:1 1 calc(50% - 6px)}
  .crp-kpi-row .kpi-val{font-size:1.7rem}
}
@media (max-width:340px){
  .crp-kpi-row .crp-kpi{flex-basis:100%}
}
/* tool-panel results stay a compact strip when the ≤480px sticky
   variant above pins the row: three mini-cards across, tighter type.
   The sticky rule itself is untouched. */
@media (max-width:480px){
  .crp-tool-panel .crp-kpi-row .crp-kpi{flex:1 1 0;padding:8px}
  .crp-tool-panel .crp-kpi-row .kpi-label{font-size:9.5px;margin-bottom:3px}
  .crp-tool-panel .crp-kpi-row .kpi-val{font-size:1.05rem;margin-bottom:3px}
  .crp-tool-panel .crp-kpi-row .kpi-sub{font-size:10.5px;line-height:1.4}
}