/* sudoku-blog-article.css — commun aux 10 pages ARTICLES du blog (pas l'index)
 * Cree le 2026-09-06 par extraction du CSS inline — point 21.
 * A CHARGER APRES sudoku-core.css ET sudoku-blog.css : .sidebar-link, .section-header,
 * .section-title et .content-body y surchargent la version index a specificite egale. */

.sidebar-link { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-family: "DM Mono", monospace; font-size: 0.78rem; color: var(--muted); text-decoration: none; border-radius: 4px; border: 1px solid transparent; cursor: pointer; background: none; transition: color 0.15s, background 0.15s, border-color 0.15s; text-align: left; width: 100%; }
.sidebar-link:hover { color: var(--text); background: var(--cell-hover); }
.section-header { margin-bottom: 10px; }
.blog-meta { font-size: 0.7rem; color: var(--muted); letter-spacing: 1px; margin-bottom: 20px; }
.section-title { font-family: "Playfair Display", serif; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; color: var(--text); line-height: 1.15; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.content-body { font-size: 0.88rem; line-height: 1.85; color: var(--muted); }
.content-body p { margin-bottom: 1.2em; }
article.blog-section { margin-bottom: 40px; scroll-margin-top: 20px; }
article.blog-section h2 { font-family: "Playfair Display", serif; font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.mobile-nav-toggle { display: none; width: 100%; padding: 10px 14px; font-family: "DM Mono", monospace; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; margin-bottom: 12px; text-align: left; }

@media (max-width: 700px) {
  .mobile-nav-toggle { display: block; }
  .sidebar nav { display: none; }
  .sidebar nav.open { display: flex; }
}

/* « À lire aussi » — bloc de maillage interne en fin d'article (14/09).
 * Tout est ciblé PAR CLASSE, jamais par hN : c'est ce qui a mordu le 12/09
 * sur .article-card h3 (§3.1). La couleur du <a> est posée explicitement,
 * sinon les titres héritent du bleu #0000EE de l'UA.
 * Pas d'opacity sur le conteneur (piège §3.3 : --muted tombait à 2,1:1).
 * Contrastes vérifiés : titre 5,13:1 clair / 10,32:1 sombre ;
 * accroche 5,07:1 clair / 4,73:1 sombre. */
.read-also { width: 100%; max-width: 1100px; margin: 8px auto 0; padding-top: 28px; border-top: 1px solid var(--border); }
.read-also-title { font-family: "Playfair Display", serif; font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.read-also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.read-also-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.read-also-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.read-also-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.read-also-card-title { font-family: "Playfair Display", serif; font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--accent-text); }
.read-also-card-desc { font-family: "DM Mono", monospace; font-size: 0.72rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 700px) {
  .read-also { padding-top: 22px; }
  .read-also-grid { grid-template-columns: 1fr; }
}

/* « Jouer maintenant » — CTA de fin d'article (14/09).
 * EXTRAIT des 10 blocs <style> inline des articles : la regle etait
 * dupliquee 10 fois, exactement le piege §3.1 « regle dupliquee en page ».
 * Une seule source ici, 2 modificateurs pour les 2 variantes de couleur.
 *
 * SURVOL « ASCENSEUR » (JC, 14/09) : le bouton s'enfonce VERS sa marche au
 * lieu de s'en eloigner, comme body.kids .num-btn:hover (sudoku-core.css).
 * Marche 3px au repos, deplacement de 3px en bas-droite : le bouton se pose
 * donc a PLAT (ombre residuelle 3-3 = 0). Ombre neutre et non assortie a la
 * couleur du bouton — choix JC, plus lisible en clair.
 * /!\ box-shadow au survol ecrit « 0 0 0 0 <couleur> » et PAS « none » :
 * une transition vers none ne s'anime pas, il faut la meme structure.
 *
 * MODE SOMBRE — MARCHE COLOREE + HALO (option B, JC 14/09) : une marche
 * noire est INVISIBLE sur #0f0e17 — c'est deja le constat du §3.1 pour
 * l'anneau kids, qui utilise --cN-digit pour la meme raison. En sombre la
 * marche reprend donc la couleur du bouton, et un halo discret au repos
 * s'allume au survol. Chaque variante pose sa teinte de halo dans --g
 * (composantes RVB nues, consommees en rgba(var(--g), a)) : une seule paire
 * de regles body.dark couvre les 3 variantes.
 * /!\ NE PAS remettre une marche noire en sombre, testee et invisible.
 *
 * CONTRASTE (mesure le 14/09 sur le site en ligne, 12,8px poids 400,
 * seuil 4,5:1) : le texte etait var(--bg) sur fond or = 2,2:1 en clair.
 * Passe a #1a1a2e, la valeur fixe du §5.6 « texte sur fond or » —
 * 7,05:1 clair / 10,16:1 sombre. Idem rouge : 4,55:1 / 6,15:1.
 * Le violet ne passait dans AUCUN sens sur --accent3 (#a855f7 : 4,31:1 en
 * texte sombre, 3,96:1 en blanc), d'ou un fond FIXE #7c3aed + blanc,
 * 5,70:1 dans les 2 themes. Ne pas le repasser en var(--accent3). */
.cta-play { --g: 232,197,71; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 24px; font-family: "DM Mono", monospace; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; background: var(--accent); color: #1a1a2e; border: none; border-radius: 4px; cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.45); text-decoration: none; transition: transform 0.1s, box-shadow 0.1s; }
.cta-play:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 0 rgba(0,0,0,.45); }
.cta-play:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* L'ombre etant neutre, les variantes ne posent plus que leur couleur
   de fond et leur teinte de halo — pas besoin de redeclarer box-shadow. */
.cta-play--rouge  { --g: 255,107,107; background: var(--accent2); }
.cta-play--violet { --g: 167,139,250; background: #7c3aed; color: #fff; }

body.dark .cta-play       { box-shadow: 3px 3px 0 rgba(var(--g),.55), 0 0 12px 1px rgba(var(--g),.18); }
body.dark .cta-play:hover { box-shadow: 0 0 0 0 rgba(var(--g),.55), 0 0 24px 6px rgba(var(--g),.55); }

/* Cible tactile (WCAG 2.5.5) : 12px+12px de padding + ~17px de ligne = 42px
   mesures, sous les 44px. Ecrans tactiles seuls, rien ne bouge a la souris. */
@media (pointer: coarse) { .cta-play { min-height: 44px; } }