/*
 * Poker Master — ce que les guides ajoutent au socle des articles
 * (proxies/css-article.php) et du blog (css-blog.php) : le fil d'Ariane, les
 * exemples en cartes, le tableau des mains de départ et le lexique.
 */

.breadcrumb { margin-bottom: 16px; font-size: 0.85rem; color: #94a3b8; }
.breadcrumb a { color: var(--color-light); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ----- Hub ----- */
.cluster-section { margin-bottom: 48px; }
.cluster-section:last-child { margin-bottom: 24px; }
.cluster-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cluster-header h2 { font-size: 1.4rem; font-weight: 700; color: var(--color-accent); margin: 0 0 6px; }
.cluster-header p { font-size: 0.92rem; color: #94a3b8; margin: 0; line-height: 1.5; }
.blog-card h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.blog-card h3 a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
.blog-card h3 a:hover { color: var(--color-light); }

/* ----- Tableau des mains ----- */
.table-mains td { vertical-align: middle; }
.table-mains .cartes-ligne { flex-wrap: nowrap; }
.main-nom-moteur { display: block; margin-top: 4px; font-size: 0.78rem; color: #86efac; }

/* ----- Duel d'exemple ----- */
.duel {
  margin: 14px 0 22px;
  padding: 14px;
  border-radius: 12px;
  border: 4px solid #4a2c17;
  background: radial-gradient(120% 90% at 50% 30%, #1a6b3a 0%, #14532d 55%, #0b3a1f 100%);
}
.duel-tableau, .duel-joueur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.duel-tableau { border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 4px; padding-bottom: 10px; }
.duel-nom { min-width: 64px; font-size: 0.85rem; font-weight: 700; color: #f1f5f9; }
.duel-main { font-size: 0.88rem; color: #d1fae5; }
.duel-joueur.gagne .duel-main { color: #86efac; font-weight: 700; }
.duel .carte { --carte-l: 36px; }
.duel-verdict { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #f1f5f9; font-size: 0.92rem; line-height: 1.55; }
.duel-verdict strong { color: #fff; }

/* ----- Mains de départ ----- */
.grille-depart { border-collapse: separate; border-spacing: 2px; min-width: 560px; }
.grille-depart td { padding: 5px 2px; text-align: center; border-radius: 4px; border: none; line-height: 1.15; }
.depart-main { display: block; font-size: 0.72rem; font-weight: 700; }
.depart-note { display: block; font-size: 0.75rem; opacity: 0.85; }
.depart-forte { background: #b45309; color: #fff; }
.depart-bonne { background: #a16207; color: #fff; }
.depart-tardive { background: #166534; color: #f0fdf4; }
.depart-marginale { background: #1e3a5f; color: #dbeafe; }
.depart-faible { background: #1f2937; color: #9ca3af; }
.depart-pastille { display: inline-block; width: 28px; height: 18px; border-radius: 4px; vertical-align: middle; }

/* ----- Lexique ----- */
.lexique-sommaire { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 18px 0 24px; }
.lexique-sommaire a {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--color-light);
  text-decoration: none;
}
.lexique-sommaire a:hover { border-color: var(--color-accent); }
.lexique { margin: 0; }
.lexique-terme { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); scroll-margin-top: 70px; }
.lexique-terme dt { font-size: 1.1rem; font-weight: 700; color: var(--color-accent); margin-bottom: 6px; }
.lexique-terme dd { margin: 0; }
.lexique-terme dd p { margin: 0 0 6px; line-height: 1.6; }
.lexique-exemple { color: #94a3b8; font-size: 0.92rem; }
.lexique-terme:target dt { text-decoration: underline; }