/* ============================================================
   blog.css — Style Zikof partagé pour tous les articles de blog.
   Hybride : identité Zikof (Bricolage/Hanken, crème/sombre, accents pop,
   ombres dures légères) + lisibilité "magazine" pour les longs articles.
   Remplace le <style> embarqué de chaque article + un header Zikof.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #17151f;
  --bg2: #241f33;
  --bg3: #2d2740;
  --ink: #fbf2dd;        /* crème */
  --text: #fbf2dd;
  --text2: #b9b3c9;      /* texte atténué */
  --paper: #fbf2dd;
  --primary: #2b2bff;    /* bleu Zikof */
  --accent: #ffd23f;     /* jaune Zikof */
  --pink: #ff5da2;
  --green: #16c08a;
  --red: #ff5da2;
  --line: #0c0b12;
  --border: rgba(251,242,221,0.14);
  --card: #241f33;
  --shadow: 3px 3px 0 #000;
  --shadow-sm: 2px 2px 0 #000;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Barre du haut (fallback si un article n'a pas encore le header Zikof injecté) */
.article-header {
  padding: 14px 20px; border-bottom: 3px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1000px; margin: 0 auto; font-size: 0.9rem;
}
.article-header a { color: var(--text2); font-weight: 600; }
.article-header a:hover { color: var(--accent); text-decoration: none; }
.article-header .brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--accent); -webkit-text-fill-color: initial; background: none;
}

/* Colonne de lecture */
.article { max-width: 800px; margin: 0 auto; padding: 34px 20px 64px; }
.breadcrumb { font-size: 0.82rem; color: var(--text2); margin-bottom: 20px; }
.breadcrumb a { color: var(--text2); }
.breadcrumb a:hover { color: var(--accent); }

.article h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 14px; color: var(--ink);
}
.article-meta { color: var(--text2); font-size: 0.88rem; margin-bottom: 30px; }
.article-meta strong { color: var(--accent); }
.article-lead {
  font-size: 1.14rem; line-height: 1.7; color: var(--text);
  margin-bottom: 32px; padding-left: 16px; border-left: 4px solid var(--accent);
}

.article h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 3.3vw, 1.9rem); margin: 46px 0 16px;
  color: var(--ink); letter-spacing: -0.01em;
}
.article h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  margin: 28px 0 10px; color: var(--accent);
}
.article p { margin-bottom: 18px; font-size: 1.02rem; color: #efe7d4; }
.article strong { color: var(--accent); font-weight: 700; }
.article em { color: var(--ink); }
.article ul, .article ol { margin: 0 0 22px 24px; }
.article li { margin-bottom: 8px; }
.article a { color: var(--accent); }
.article a:hover { color: #fff; }

/* TLDR */
.tldr {
  background: var(--bg2);
  border: 3px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 14px; padding: 20px 22px; margin: 0 0 32px;
  box-shadow: var(--shadow);
}
/* Bandeau de suite de saison : signale qu'un article lié à une compétition
   passée reste utile, et oriente vers la compétition en cours. Calé sur le
   style .tldr, en couleur d'alerte plutôt qu'en accent pour se distinguer du
   résumé qui le suit immédiatement. */
.suite-saison {
  background: var(--bg2);
  border: 3px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 14px; padding: 16px 20px; margin: 0 0 20px;
  line-height: 1.6;
}
.suite-saison p { margin: 0; font-size: 0.98rem; }
.suite-saison a { color: var(--accent); font-weight: 700; }

/* Mention du critère de classement et de l'éditeur du comparatif. Discrète
   mais présente : un classement numéroté sans critère annoncé, où l'auteur se
   place au-dessus d'un concurrent, se retourne contre la crédibilité qui fait
   tenir l'article. */
.note-classement {
  margin: -8px 0 24px; padding: 10px 14px; border-radius: 10px;
  background: rgba(251, 242, 221, .05);
  border-left: 3px solid var(--line);
  font-size: .9rem; line-height: 1.55; color: var(--text2);
}

.tldr-label {
  display: inline-block; font-family: var(--font-display);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); margin-bottom: 8px;
}
.tldr p { margin: 0; font-size: 1.02rem; }

/* Tables comparatives */
.compare-wrap { overflow-x: auto; margin: 24px -4px; }
table.compare {
  min-width: 720px; width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 0.9rem; background: var(--bg2);
  border: 3px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow);
}
table.compare th, table.compare td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
table.compare thead th {
  background: var(--bg3); font-family: var(--font-display); font-weight: 800;
  color: var(--paper); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.04em; position: sticky; top: 0;
}
table.compare tbody tr:hover { background: rgba(43,43,255,0.10); }
table.compare .ok { color: var(--green); font-weight: 700; }
table.compare .ko { color: var(--pink); font-weight: 700; }
table.compare .partial { color: var(--accent); font-weight: 600; }
table.compare .app-name { font-weight: 800; color: var(--paper); white-space: nowrap; }

/* Cartes app (comparatifs) */
.app-card {
  background: var(--bg2); border: 3px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.app-card h3 {
  margin-top: 0; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.app-card .badge {
  font-family: var(--font-display); font-size: 0.72rem; padding: 4px 11px;
  background: var(--primary); color: #fff; border: 2px solid var(--line);
  border-radius: 999px; font-weight: 700; letter-spacing: 0.03em;
}
.app-card .badge.best { background: var(--accent); color: var(--line); }
.app-card .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 600px) { .app-card .pros-cons { grid-template-columns: 1fr; } }
.app-card .pros-cons div { padding: 12px 14px; border-radius: 10px; font-size: 0.92rem; border: 2px solid var(--line); }
.app-card .pros { background: rgba(22,192,138,0.10); }
.app-card .pros strong { color: var(--green); }
.app-card .cons { background: rgba(255,93,162,0.08); }
.app-card .cons strong { color: var(--pink); }
.app-card .cta {
  display: inline-block; margin-top: 12px; padding: 9px 18px; border-radius: 10px;
  background: var(--primary); color: #fff !important; border: 2px solid var(--line);
  box-shadow: var(--shadow-sm); font-weight: 700; font-size: 0.9rem;
  transition: transform 0.08s, box-shadow 0.08s;
}
.app-card .cta:hover { text-decoration: none; }
.app-card .cta:active { transform: translate(2px,2px); box-shadow: none; }

/* Étapes numérotées (HowTo) */
.steps { counter-reset: step; list-style: none; margin: 0 0 24px; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding: 14px 16px 14px 58px;
  background: var(--bg2); border: 3px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 13px;
  width: 32px; height: 32px; background: var(--accent); color: var(--line);
  border: 2px solid var(--line); border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
}
.steps li strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* Grille de thèmes / puces */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 24px; }
.theme-grid span {
  background: var(--bg2); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 0.92rem; box-shadow: var(--shadow-sm);
}

/* FAQ */
.faq-q {
  background: var(--bg2); border: 3px solid var(--line); border-left: 5px solid var(--accent);
  padding: 14px 18px; margin-bottom: 14px; border-radius: 12px;
}
.faq-q h3 { color: var(--ink); margin: 0 0 6px; font-size: 1.02rem; font-family: var(--font-display); }
.faq-q p { margin: 0; font-size: 0.96rem; color: #efe7d4; }

/* FAQ en <details> (blocs .zk-faq) */
.zk-faq summary { color: var(--ink); }
.zk-faq details { border-color: var(--border) !important; }

/* Bannière de jeu (CTA) — Zikof plat, SANS dégradé, avec icône du jeu */
.cta-zikof {
  background: var(--bg2); padding: 20px 22px;
  border: 3px solid var(--line); border-left: 7px solid var(--accent);
  border-radius: 16px; margin: 36px 0; color: var(--ink);
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 18px; text-align: left;
}
.cta-zikof img.cta-ico {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 14px;
  border: 3px solid var(--line); box-shadow: var(--shadow-sm); object-fit: cover;
}
.cta-zikof .cta-body { flex: 1 1 auto; }
.cta-zikof h3 { color: var(--ink); margin: 0 0 6px; font-size: 1.3rem; font-family: var(--font-display); }
.cta-zikof p { margin: 0 0 12px; color: #efe7d4; opacity: 0.95; }
.cta-zikof a.cta-btn, .cta-zikof > a {
  display: inline-block; padding: 11px 24px; background: var(--accent);
  color: var(--line) !important; border: 3px solid var(--line); border-radius: 12px;
  font-weight: 800; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.cta-zikof a:hover { text-decoration: none; }
.cta-zikof a:active { transform: translate(2px,2px); box-shadow: none; }
@media (max-width: 560px) { .cta-zikof { flex-direction: column; text-align: center; align-items: stretch; } .cta-zikof img.cta-ico { align-self: center; } }

/* Liens jeux avec icône (encart "jeux liés") */
.related-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related-box li { margin: 0; }
.related-box li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 2px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.related-box li a:hover { text-decoration: none; background: var(--bg3); }
.related-box li img { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--line); flex: 0 0 auto; }
.related-box li b { color: var(--accent); }

/* Encart jeux liés */
.related-box { border: 3px solid var(--line); background: var(--bg2); border-radius: 14px; padding: 18px 20px; margin: 28px 0; box-shadow: var(--shadow-sm); }
.related-box h3 { margin-top: 0; color: var(--accent); }
.related-box ul { margin-bottom: 0; }

.footnote { color: var(--text2); font-size: 0.82rem; border-top: 3px solid var(--line); padding-top: 20px; margin-top: 36px; }

/* ── Index du blog (liste d'articles) ── */
.hero-blog { max-width: 820px; margin: 0 auto; padding: 44px 20px 6px; text-align: center; }
.hero-blog h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,5vw,3rem); color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; }
.hero-blog p { color: var(--text2); font-size: 1.06rem; margin-top: 12px; }
.articles { max-width: 820px; margin: 0 auto; padding: 26px 20px 64px; display: grid; gap: 16px; }
.article-card { display: block; background: var(--bg2); border: 3px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); transition: transform .1s, box-shadow .1s; color: var(--text); }
.article-card:hover { text-decoration: none; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.article-card .tag { display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--line); background: var(--accent); border: 2px solid var(--line); border-radius: 999px; padding: 3px 11px; margin-bottom: 10px; }
.article-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; color: var(--ink); margin: 0 0 8px; line-height: 1.15; }
.article-card p { color: #efe7d4; font-size: 0.98rem; margin: 0 0 12px; }
.article-card .meta { display: flex; justify-content: space-between; align-items: center; color: var(--text2); font-size: 0.85rem; }
.article-card .read-arrow { color: var(--accent); font-weight: 700; }
.footer { text-align: center; color: var(--text2); font-size: 0.85rem; padding: 26px 20px; border-top: 3px solid var(--line); max-width: 820px; margin: 0 auto; }
.footer a { color: var(--text2); }
.footer a:hover { color: var(--accent); }

/* ── Bannières & tuiles de jeu héritées des anciens articles (style Zikof, plat, sans dégradé) ── */
.cta-play, .cta-quiz {
  background: var(--bg2); border: 3px solid var(--line); border-left: 7px solid var(--accent);
  border-radius: 16px; padding: 20px 22px; margin: 30px 0; box-shadow: var(--shadow);
}
.cta-play h3, .cta-quiz h3 { color: var(--ink); font-family: var(--font-display); margin: 0 0 8px; font-size: 1.25rem; }
.cta-play p, .cta-quiz p { color: #efe7d4; margin: 0 0 14px; }
.cta-play a, .cta-quiz a, .play-link {
  display: inline-block; padding: 11px 24px; background: var(--accent);
  color: var(--line) !important; border: 3px solid var(--line); border-radius: 12px;
  font-weight: 800; box-shadow: var(--shadow-sm); text-decoration: none;
}
.cta-play a:hover, .cta-quiz a:hover, .play-link:hover { text-decoration: none; }
.cta-play a:active, .cta-quiz a:active, .play-link:active { transform: translate(2px,2px); box-shadow: none; }
.play-link { margin: 6px 0; }

.game-block { margin: 26px 0; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.game-tile {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 14px 60px;
  position: relative; background: var(--bg2); border: 3px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm); color: var(--text) !important; min-height: 76px;
}
.game-tile:hover { text-decoration: none; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #000; }
.game-tile strong { color: var(--accent); font-family: var(--font-display); font-size: 1.02rem; }
.game-tile span { color: #cfc7dc; font-size: 0.86rem; line-height: 1.4; }
.game-tile img.tile-ico { position: absolute; left: 12px; top: 14px; width: 36px; height: 36px; border-radius: 9px; border: 2px solid var(--line); }

/* Tableau comparatif des pages « vs » (généré par _hubs/gen-hubs.mjs) */
.vs-table table td { padding: 10px 12px; border-bottom: 1px solid var(--line, #e5e5e5); vertical-align: top; }
.vs-table table tr:last-child td { border-bottom: none; }
.vs-table table td:first-child { font-weight: 600; }
.vs-table table td:nth-child(2) { color: var(--accent, #7c3aed); }