/* ============================================================
   pastelfm.com — Newsletter premium éditorial
   Burgundy + cream + serif Spectral. Vibe Substack / The Browser
   ============================================================ */

/* Fonts self-hosted (WOFF2 latin + latin-ext) — zéro render-blocking externe */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sourcesans3-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sourcesans3-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/sourcesans3-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/sourcesans3-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sourcesans3-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sourcesans3-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sourcesans3-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sourcesans3-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/spectral-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/spectral-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/spectral-600-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/spectral-600-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/spectral-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/spectral-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/spectral-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/spectral-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/spectral-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/spectral-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/spectral-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/spectral-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/spectral-800-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/spectral-800-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --bg: #f7f5ef;
  --bg-soft: #efe9dc;
  --bg-elevated: #ffffff;
  --text: #15202e;
  --text-dim: #46505e;
  --text-mute: #6b7280;
  --burgundy: #16243b;
  --burgundy-dark: #0e1828;
  --burgundy-soft: #e8edf4;
  --olive: #b1842f;
  --olive-dark: #8a6420;
  --olive-soft: #f7eecd;
  --warn: #c2410c;
  --border: #e4ddcd;
  --border-soft: #f0ebde;
  --border-strong: #c9c0ad;
  --max-w: 1040px;
  --max-w-wide: 1180px;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(22, 36, 59, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(177, 132, 47, 0.05) 0%, transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(22, 36, 59, 0.03) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Subtle paper texture (fun) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    repeating-linear-gradient(45deg, rgba(22, 36, 59, 0.015) 0 1px, transparent 1px 4px);
}

/* HEADER — minimaliste serif */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.site-header-inner,
.header-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 1.3em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.45em;
  color: var(--text);
  letter-spacing: -0.02em;
}
.site-logo .logo-img {
  height: 40px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.site-logo .logo-mark, .site-logo .logo-text { display: none; }

.site-nav { display: flex; gap: 1.6em; align-items: center; }
.site-nav ul { list-style: none; display: flex; gap: 1.6em; align-items: center; }
.site-nav a, .site-nav ul a {
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0.01em;
  padding: 0.3em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s, color 0.18s;
}
.site-nav a:hover {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}
.site-nav a[aria-current="page"] {
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
}

/* MAIN — colonne magazine étroite */

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3em 1.5em 5em;
}

/* ARTICLE HEADER */

.article-head {
  margin-bottom: 1.4em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.article-head h1, .article h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4em, 5vw, 3.4em);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 0.45em;
  color: var(--text);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  font-size: 0.86em;
  color: var(--text-mute);
  font-family: var(--font-sans);
  padding-top: 0.6em;
}
.article-meta .meta-item { display: inline-flex; align-items: center; gap: 0.3em; }
.article-meta strong { color: var(--text); font-weight: 600; }
.article-meta a {
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 600;
}
.article-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ARTICLE LEDE — pull quote style */

.article-lede {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: 1.32em !important;
  line-height: 1.55 !important;
  color: var(--text);
  margin: 1.4em 0 0;
  padding: 0.4em 0 0.4em 1.4em;
  border-left: 3px solid var(--burgundy);
  font-weight: 500;
}
.article-lede strong {
  font-style: normal;
  color: var(--burgundy);
  font-weight: 700;
}

/* H2 / H3 */

.article h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8em, 3.2vw, 2.25em);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 2.4em 0 0.9em;
  color: var(--text);
  position: relative;
  padding-top: 0.7em;
}
.article h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--burgundy) 0%, var(--olive) 100%);
  border-radius: 2px;
}

.article h3 {
  font-family: var(--font-serif);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 1.6em 0 0.55em;
  color: var(--text);
  line-height: 1.3;
}

/* PARAGRAPHS / LINKS / TEXT */

.article p {
  margin-bottom: 1.15em;
  line-height: 1.72;
  color: var(--text);
  font-size: 1em;
}

/* Highlight subtil sur strong dans la prose (fun) */
.article p strong {
  background: linear-gradient(180deg, transparent 65%, rgba(177, 132, 47, 0.25) 65%, rgba(177, 132, 47, 0.25) 95%, transparent 95%);
  padding: 0 2px;
}
.article-lede strong {
  background: linear-gradient(180deg, transparent 65%, rgba(22, 36, 59, 0.18) 65%, rgba(22, 36, 59, 0.18) 95%, transparent 95%);
}

/* Drop cap sur premier paragraphe après lede */
.article-lede + p::first-letter,
.article-head + main .article > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 4.2em;
  font-weight: 700;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--burgundy);
}

.article ul, .article ol { margin: 0.6em 0 1.3em 1.4em; }
.article li { margin: 0.5em 0; line-height: 1.65; }

.article a:not(.casino-cta):not(.detail-cta):not(.casino-screenshot):not(.site-logo):not(.inline-cta) {
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed var(--burgundy);
  padding-bottom: 1px;
  transition: color 0.18s;
}
.article a:not(.casino-cta):not(.detail-cta):not(.casino-screenshot):not(.inline-cta):hover {
  color: var(--burgundy-dark);
  border-bottom-style: solid;
}

strong { color: var(--text); font-weight: 700; }
em { color: var(--text-dim); font-style: italic; }

/* AUTHOR BYLINE — magazine style */

.author-byline {
  display: flex;
  gap: 2.5em;
  align-items: center;
  flex-wrap: nowrap;
  margin: 1em 0 0;
  padding: 0.9em 0 0;
  font-family: var(--font-sans);
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 700px) {
  .author-byline { flex-wrap: wrap; gap: 1em; }
}
.author-block {
  display: flex;
  gap: 0.85em;
  align-items: center;
}
.author-block img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.author-info { line-height: 1.3; }
.author-name {
  font-weight: 700;
  font-size: 0.95em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.author-label {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.4em;
}
.verified-badge {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.verified-badge path {
  fill: var(--olive);
}
.author-block--reviewer .verified-badge path {
  fill: var(--burgundy);
}
.author-meta {
  color: var(--text-mute);
  font-size: 0.84em;
  margin-top: 0.1em;
}
.author-meta time { color: var(--text); font-weight: 600; }

/* CASINO BLOCK — gros numéro serif italic décoratif */

.article .casino-block {
  display: block;
  padding: 2.2em 2.2em;
  margin: 1.4em 0 1.4em 2.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.article .casino-block:hover {
  transform: translateY(-2px);
  border-color: var(--burgundy);
  box-shadow: 0 8px 24px rgba(22, 36, 59, 0.08);
}
.article .casino-block::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  border-left: 3px solid var(--burgundy);
  pointer-events: none;
}
.article .casino-block:first-of-type {
  background: linear-gradient(135deg, var(--olive-soft) 0%, var(--bg-elevated) 50%);
  border-color: var(--olive);
}
.article .casino-block:first-of-type::after {
  border-left-color: var(--olive);
}
.article .casino-block:first-of-type::before {
  content: 'NUMÉRO 1';
  position: absolute;
  top: 1.4em;
  right: 0;
  font-family: var(--font-sans);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--olive);
  background: var(--olive-soft);
  padding: 0.3em 0.7em;
  border-radius: 2px;
}
.article .casino-rank {
  position: absolute;
  left: -2.8em;
  top: 0.7em;
  width: 2.8em;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3em;
  font-weight: 700;
  color: var(--burgundy);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.article .casino-block:first-of-type .casino-rank {
  color: var(--olive-dark);
}
.article .casino-body { min-width: 0; }
.article .casino-block h3 {
  margin: 0 0 0.5em !important;
  font-family: var(--font-serif);
  font-size: 1.42em;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.25;
}

/* Meta-band sous chaque H3 casino — éditorial */
.article .casino-block p.meta-band,
.article p.meta-band {
  display: block;
  padding: 0 0 0.9em;
  background: transparent;
  color: var(--text-mute);
  font-size: 0.82em;
  font-weight: 500;
  font-family: var(--font-sans);
  font-style: normal;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  margin: 0 0 1em !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Tableau scrollable sur mobile (anti-débordement viewport) */
.article .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Focus clavier visible sur les CTA (a11y) */
.article a.inline-cta:focus-visible,
.article a.table-cta:focus-visible,
.article a.casino-screenshot:focus-visible,
.sticky-cta:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 2px;
}

/* Titre encadré "À retenir" (non-heading pour préserver la hiérarchie Hn) */
.article .retain-box .retain-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0;
  margin: 0 0 0.45em;
  color: var(--olive-dark);
}

/* Pros/cons en grille 2-col "TOP focus" — visuel structuré */
.article .focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1.4em 0 1em;
  width: 100%;
  max-width: none;
}
.article .focus-card {
  padding: 1.2em 1.3em;
  border-radius: 8px;
  font-family: var(--font-sans);
  position: relative;
}
.article .focus-card--pros {
  background: linear-gradient(135deg, var(--olive-soft) 0%, #fef9e6 100%);
  border: 1px solid rgba(177, 132, 47, 0.25);
}
.article .focus-card--cons {
  background: linear-gradient(135deg, var(--burgundy-soft) 0%, #fceff1 100%);
  border: 1px solid rgba(22, 36, 59, 0.25);
}
.article .focus-card__label {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.article .focus-card--pros .focus-card__label {
  background: var(--olive);
  color: #fff;
}
.article .focus-card--cons .focus-card__label {
  background: var(--burgundy);
  color: #fff;
}
.article .focus-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article .focus-card li {
  position: relative;
  padding: 0.35em 0 0.35em 1.6em;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.article .focus-card--pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--olive);
  color: #fff;
  border-radius: 50%;
  font-size: 0.65em;
  font-weight: 700;
}
.article .focus-card--cons li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--burgundy);
  color: #fff;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
}

/* Legacy pros-line/cons-line fallback (au cas où) */
.article p.pros-line,
.article p.cons-line {
  padding: 0.7em 0;
  margin: 0.6em 0 !important;
  font-size: 0.94em;
  line-height: 1.65;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
}
.article p.pros-line { border-top: 1px dotted var(--olive); border-bottom: 1px dotted var(--olive); }
.article p.cons-line { border-top: 1px dotted var(--burgundy); border-bottom: 1px dotted var(--burgundy); }
.article p.pros-line strong { color: var(--olive-dark); letter-spacing: 0.06em; font-size: 0.85em; text-transform: uppercase; }
.article p.cons-line strong { color: var(--burgundy); letter-spacing: 0.06em; font-size: 0.85em; text-transform: uppercase; }

@media (max-width: 700px) {
  .article .focus-grid { grid-template-columns: 1fr; }
}

/* CTA principal — bouton plein conversion */
.article .cta-wrap { margin-top: 1.3em; }
.article a.inline-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.95em 1.4em;
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  color: #fff !important;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.06em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(22, 36, 59, 0.25);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.article a.inline-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22, 36, 59, 0.32);
  filter: brightness(1.07);
  color: #fff !important;
}
.article a.inline-cta::after { content: ' →'; }
.article .cta-micro {
  display: block;
  margin-top: 0.55em;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.78em;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
/* Premier casino = bouton olive (cohérent avec le bloc Numéro 1) */
.article .casino-block:first-of-type a.inline-cta {
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive-dark) 100%);
  box-shadow: 0 4px 14px rgba(177, 132, 47, 0.25);
}

/* Screenshot casino cliquable en tête de card */
.article a.casino-screenshot {
  display: block;
  margin: 0 0 1.3em;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.article a.casino-screenshot:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.article a.casino-screenshot img { width: 100%; height: auto; display: block; }
.article a.casino-screenshot::after {
  content: 'Visiter le site ↗';
  position: absolute;
  bottom: 0.6em;
  right: 0.6em;
  background: rgba(26, 26, 26, 0.82);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 999px;
}

/* Sticky CTA mobile */
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.65em 0.9em;
    background: var(--burgundy);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2);
    font-family: var(--font-sans);
  }
  .sticky-cta__label { font-size: 0.8em; font-weight: 600; line-height: 1.25; }
  .sticky-cta__btn {
    background: #fff; color: var(--burgundy);
    font-weight: 800; font-size: 0.85em;
    padding: 0.5em 0.85em; border-radius: 8px; white-space: nowrap;
  }
  main { padding-bottom: 4.5em; }
}

/* Colonne CTA du tableau comparatif */
.article .comparison-table td.cta-cell { text-align: center; padding: 0.5em; }
.article a.table-cta {
  display: inline-block;
  padding: 0.4em 0.8em;
  background: var(--burgundy);
  color: #fff !important;
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 6px;
  white-space: nowrap;
  transition: filter 0.15s;
}
.article a.table-cta:hover { filter: brightness(1.1); color: #fff !important; }

/* Top10 list — minimaliste */
.article ol.top10-list {
  background: var(--bg-soft);
  padding: 1.2em 1.4em 1.2em 2.6em;
  border-left: 3px solid var(--burgundy);
  border-radius: 0;
  margin: 1.5em 0 2.5em;
  font-family: var(--font-sans);
  font-size: 0.96em;
}
.article ol.top10-list li {
  padding: 0.3em 0;
  line-height: 1.55;
}
.article ol.top10-list strong { color: var(--burgundy); font-weight: 700; }

/* Signs-list — numéros romans en italique */
.article ol.signs-list {
  counter-reset: signs;
  list-style: none;
  padding-left: 0;
  margin: 1.2em 0 1.8em;
}
.article ol.signs-list li {
  counter-increment: signs;
  position: relative;
  padding: 0.7em 0 0.7em 3em;
  margin: 0.4em 0;
  line-height: 1.6;
  border-top: 1px solid var(--border-soft);
}
.article ol.signs-list li:last-child { border-bottom: 1px solid var(--border-soft); }
.article ol.signs-list li::before {
  content: counter(signs);
  position: absolute;
  left: 0;
  top: 0.6em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.8em;
  font-weight: 700;
  color: var(--olive);
  line-height: 1;
}

/* Retain box — encadré "À retenir" */
.article .retain-box {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  background: var(--olive-soft);
  border-left: 3px solid var(--olive);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08em;
  line-height: 1.55;
  color: var(--text);
}
.article .retain-box strong {
  font-style: normal;
  color: var(--olive-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
  display: block;
  margin-bottom: 0.5em;
}

/* TABLEAU comparatif — éditorial */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.92em;
  margin: 1.8em 0;
  font-family: var(--font-sans);
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
.comparison-table thead th {
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.9em 0.7em;
  text-align: left;
  border-bottom: 1px solid var(--text);
}
.comparison-table tbody td {
  padding: 0.85em 0.7em;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:first-child td {
  background: var(--olive-soft);
  font-weight: 600;
}
.comparison-table tbody tr:first-child td:first-child {
  position: relative;
  padding-left: 1.6em;
}
.comparison-table tbody tr:first-child td:first-child::before {
  content: '★';
  position: absolute;
  left: 0.4em;
  color: var(--olive);
}
.comparison-table .casino-name { color: var(--text); font-weight: 700; }
.comparison-table .bonus-val { color: var(--burgundy); font-weight: 700; }
.comparison-table a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* FAQ — accordion serif */

.article details {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.article details:last-of-type {
  border-bottom: 1px solid var(--border);
}
.article details summary {
  cursor: pointer;
  padding: 1.1em 2.5em 1.1em 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--text);
  list-style: none;
  position: relative;
  transition: color 0.18s;
}
.article details summary::-webkit-details-marker { display: none; }
.article details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  color: var(--burgundy);
  font-weight: 300;
  font-family: var(--font-serif);
  transition: transform 0.25s;
}
.article details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.article details summary:hover { color: var(--burgundy); }
.article details > *:not(summary) {
  padding: 0 0 1.3em;
  color: var(--text-dim);
  font-size: 0.96em;
  line-height: 1.7;
}

/* AUTHOR BOX en fin d'article */

.author-box {
  display: flex;
  gap: 1.6em;
  align-items: flex-start;
  padding: 2em 0;
  margin: 3em 0 1em;
  background: transparent;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
.author-box .author-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.author-box .author-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--burgundy);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.7em;
  flex-shrink: 0;
}
.author-box .author-photo + .author-avatar-fallback { display: none; }
.author-box h4 {
  margin: 0 0 0.25em;
  font-family: var(--font-serif);
  font-size: 1.3em;
  color: var(--text);
  font-weight: 700;
}
.author-credentials {
  font-family: var(--font-sans);
  font-size: 0.84em;
  color: var(--text-mute);
  margin-bottom: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.author-box p {
  margin: 0.4em 0;
  font-size: 0.95em;
  line-height: 1.65;
  color: var(--text-dim);
  font-family: var(--font-sans);
}
.author-social a {
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
  margin-right: 0.6em;
  font-family: var(--font-sans);
}

/* FOOTER — minimaliste serif */

.site-footer {
  margin-top: 5em;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 3em 0 2em;
  color: var(--text-dim);
}
.footer-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2em;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5em;
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid var(--border);
}
.site-footer h5, .site-footer h2 {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 0.8em;
  letter-spacing: -0.01em;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { padding: 0.3em 0; }
.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92em;
  border-bottom: 1px dashed transparent;
  transition: color 0.18s, border-color 0.18s;
}
.site-footer a:hover {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}
.footer-copyright {
  text-align: center;
  font-size: 0.85em;
  color: var(--text-mute);
  font-family: var(--font-sans);
  padding-top: 1em;
  font-style: italic;
}

/* WIDGET TOPLIST OVERRIDE — burgundy + olive */

[data-toplist-label] a,
[data-toplist-label] .cta a,
.casino-toplist-container a,
.casino-toplist-container .cta a {
  color: #fff !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

/* RESPONSIVE */

@media (max-width: 720px) {
  body { font-size: 17px; }
  main { padding: 2em 1.2em 3em; }
  .site-header-inner, .header-inner { padding: 1em 1.2em; }
  .site-logo .logo-img { height: 36px; max-width: 150px; }
  .site-nav, .site-nav ul { gap: 1em; }
  .site-nav a { font-size: 0.86em; }
  .article-head h1 { font-size: 2em; }
  .article h2 { font-size: 1.55em; }
  .article h3 { font-size: 1.2em; }
  .article-lede { font-size: 1.18em !important; padding-left: 1em; }
  .article .casino-block {
    margin-left: 0;
    margin-right: 0;
    padding: 1.4em 1.3em;
  }
  .article .casino-rank {
    position: static;
    width: auto;
    text-align: left;
    font-size: 2.8em;
    margin-bottom: 0.1em;
  }
  .article .casino-block:first-of-type::before { display: none; }
  .comparison-table { font-size: 0.84em; }
  .comparison-table thead th, .comparison-table tbody td { padding: 0.6em 0.4em; }
  .author-box {
    flex-direction: column;
    text-align: left;
    padding: 1.4em 0;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5em; }
  .author-byline { gap: 1.2em; }
}


/* ============ MCEL reskin — composants charte éditoriale ============ */
:root{ --green:#0a7d4f; --green-dark:#075f3c; --green-soft:#e3f3ea; --crimson:#b23a48; }

/* CTA verts (conversion) — override burgundy/gold */
.article a.inline-cta, .article .casino-block:first-of-type a.inline-cta{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  box-shadow:0 4px 14px rgba(10,125,79,.28);
}
.article a.inline-cta:hover{ box-shadow:0 8px 22px rgba(10,125,79,.36); }
.article a.table-cta{ background:var(--green); }
.article a.table-cta:hover{ filter:brightness(1.08); }
@media (max-width:720px){ .sticky-cta{ background:var(--green-dark); } .sticky-cta__btn{ color:var(--green-dark); } }

/* Étoiles de note casino */
.article .casino-rating{ display:flex; align-items:center; gap:.5em; margin:.2em 0 1em; }
.casino-rating .stars{ font-size:1.1em; letter-spacing:.06em; line-height:1; }
.casino-rating .star{ color:#d8d0bf; }
.casino-rating .star.on{ color:var(--olive); }
.casino-rating .rating-num{ font-family:var(--font-sans); font-weight:700; color:var(--text); font-size:.9em; }

/* H4 Avantages / Inconvénients + listes */
.article h4.adv-title, .article h4.inc-title{
  font-family:var(--font-sans); font-size:.76em; font-weight:700; text-transform:uppercase;
  letter-spacing:.11em; margin:1.35em 0 .5em;
}
.article h4.adv-title{ color:var(--green-dark); }
.article h4.inc-title{ color:var(--crimson); }
.article ul.adv-list, .article ul.inc-list{ list-style:none; margin:.2em 0 .5em; padding:0; }
.article ul.adv-list li, .article ul.inc-list li{
  position:relative; padding:.32em 0 .32em 1.75em; font-size:.95em; line-height:1.5;
  border:none; margin:.05em 0;
}
.article ul.adv-list li::before, .article ul.inc-list li::before{
  position:absolute; left:0; top:.34em; width:1.25em; height:1.25em;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; border-radius:50%; font-size:.7em; font-weight:700; line-height:1;
}
.article ul.adv-list li::before{ content:'\2713'; background:var(--green); }
.article ul.inc-list li::before{ content:'\2715'; background:var(--crimson); }

/* FAQ visible (sans accordéon) */
.article .faq-visible{ margin:1.2em 0 0; }
.article .faq-item{ padding:1.1em 0; border-top:1px solid var(--border); }
.article .faq-item:last-child{ border-bottom:1px solid var(--border); }
.article p.faq-q{ font-family:var(--font-serif); font-weight:700; font-size:1.13em; color:var(--text); margin:0 0 .4em; }
.article p.faq-a{ color:var(--text-dim); font-size:.96em; line-height:1.7; margin:0; }
.article .author-box .author-box-name{ font-family:var(--font-serif); font-size:1.3em; font-weight:700; color:var(--text); margin:0 0 .25em; }
.article p.age-warning{ background:#fcf3f1; border:1px solid rgba(178,58,72,.3); border-left:3px solid var(--crimson); padding:.7em 1em; font-size:.85em; line-height:1.5; color:var(--text-dim); margin:1.1em 0 1.6em; border-radius:5px; }
.article p.age-warning strong{ color:var(--crimson); background:none; }

/* Logo texte (wordmark brand) */
.site-logo .logo-text{display:inline-block;font-family:var(--font-serif);font-weight:700;font-size:1.35rem;color:var(--burgundy);line-height:1;white-space:nowrap;letter-spacing:-.01em}
@media (max-width:720px){
  .header-inner{flex-direction:column;align-items:center;gap:.7em}
  .site-nav{align-self:stretch;width:100%;flex-wrap:wrap;justify-content:center;gap:.45em .8em}
  .site-nav a{font-size:.8em}
  .site-logo .logo-text{font-size:1.2rem}
}