/* ============================================================
   sudoku-9x9.css — feuille de style des 4 pages 9x9
   index.html · sudoku-du-jour.html · en/index.html · en/daily-sudoku.html

   Cree le 2026-09-06 (point 21 : extraction du CSS inline).
   Ces 216 regles etaient dupliquees a l'identique dans le <style>
   de chacune des 4 pages : toute correction devait etre repetee
   4 fois, et un oubli passait inapercu (cause racine des
   regressions #grid-id 29/08, ascenseur du menu 02/09,
   .nav-section-label 29/08, .legal-footer 05/09).

   ORDRE DE CHARGEMENT — a ne pas changer :
     sudoku-core.css  PUIS  sudoku-9x9.css
   Plusieurs regles ci-dessous surchargent volontairement le core a
   specificite egale (.cell, .num-btn, .numpad, :root, body.dark…) :
   elles ne gagnent que parce qu'elles sont declarees APRES.

   NE PAS redeclarer ces regles dans le <style> d'une page : c'est
   exactement le piege que ce fichier existe pour supprimer.
   ============================================================ */

body {
      font-family: 'DM Mono', monospace;
      padding: 40px 20px 60px;
    }

    :root {
      --accent:       #c9a227;
      --accent2:      #e05555;
      --error:        #de0013;
      --progress-bg:  #eeecdf;
    }
    body.dark {
      --accent:       #e8c547;
      --accent2:      #ff6b6b;
      --error:        #ff4757;
      --progress-bg:  #2a2840;
    }

    /* ── HEADER ── */
    header { margin-bottom: 32px; }
    .site-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 6vw, 3.5rem);
      font-weight: 900; letter-spacing: -1px;
      background: linear-gradient(135deg, var(--accent) 0%, #f0a500 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1;
    }
    .site-sub {
      color: var(--muted); font-size: 0.8rem; letter-spacing: 4px;
      text-transform: uppercase; margin-top: 8px;
    }

    .game-wrapper { width: 100%; max-width: 560px; }

    /* ── CONTRÔLES ── */
    .ctrl-btn {
      padding: 7px 16px;
      font-family: 'DM Mono', monospace; font-size: 0.75rem;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--surface); color: var(--muted);
      border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; transition: color 0.2s, border-color 0.2s;
      box-shadow: none;
    }
    .ctrl-btn:hover { color: var(--text); border-color: var(--muted); }
    .ctrl-btn.active { color: var(--accent-text); border-color: var(--accent-text); }

    #notes-btn { border-width: 2px; font-weight: 600; }
    #notes-btn.active { background: #7a8a9a; color: #fff; border-color: #5a6a7a; box-shadow: 0 2px 8px rgba(90,106,122,0.35); }
    body.dark #notes-btn { background: var(--surface); color: #e8c547; border-color: #e8c547; box-shadow: none; }
    body.dark #notes-btn.active { background: #7a8a9a; color: #fff; border-color: #5a6a7a; box-shadow: none; }

    .difficulty-select {
      appearance: none; -webkit-appearance: none;
      padding: 7px 32px 7px 14px;
      font-family: 'DM Mono', monospace; font-size: 0.75rem;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6a8a'/%3E%3C/svg%3E") no-repeat right 10px center;
      color: var(--muted); border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; transition: color 0.2s, border-color 0.2s; outline: none;
    }
    .difficulty-select:hover { color: var(--text); border-color: var(--muted); }
    .difficulty-select option { background: var(--surface); color: var(--text); text-transform: uppercase; }

    .difficulty-badge {
      font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
      padding: 3px 10px; border-radius: 20px; font-weight: 500;
    }
    .badge-facile    { color: #177e3d; border: 1px solid #177e3d; }
    .badge-moyen     { color: var(--accent-text); border: 1px solid var(--accent-text); }
    .badge-difficile { color: #b35304; border: 1px solid #b35304; }
    .badge-expert    { color: var(--error); border: 1px solid var(--error); }
    .badge-diabolique { color: #9734f5; border: 1px solid #9734f5; }
    body.dark .badge-facile     { color: #4ade80; border-color: #4ade80; }
    body.dark .badge-difficile  { color: #fb923c; border-color: #fb923c; }
    body.dark .badge-diabolique { color: #ac5df7; border-color: #ac5df7; }
    .difficulty-select.badge-facile     { color: #177e3d; border-color: #177e3d; }
    .difficulty-select.badge-moyen      { color: var(--accent-text); border-color: var(--accent-text); }
    .difficulty-select.badge-difficile  { color: #b35304; border-color: #b35304; }
    .difficulty-select.badge-expert     { color: var(--error); border-color: var(--error); }
    .difficulty-select.badge-diabolique { color: #9734f5; border-color: #9734f5; }
    body.dark .difficulty-select.badge-facile     { color: #4ade80; border-color: #4ade80; }
    body.dark .difficulty-select.badge-difficile  { color: #fb923c; border-color: #fb923c; }
    body.dark .difficulty-select.badge-diabolique { color: #ac5df7; border-color: #ac5df7; }

    .status-bar {
      letter-spacing: 1px; margin-bottom: 10px;
      font-size: 0.78rem; font-weight: 700; color: var(--muted);
      display: flex; justify-content: space-between; align-items: center;
    }
    #status-msg.win { color: var(--accent-text); }

    /* ── BANNIÈRE REPRISE ── */
    /* ── VERROU DE REPRISE (2026-08-26) ──
       Corrige l'incohérence §2.8 de l'audit : au chargement, le moteur
       (sudoku-core.js) démarre toujours une partie neuve avant même que
       cette page ait pu vérifier s'il existe une sauvegarde. Résultat :
       une grille jouable et un badge/chrono cohérents, mais pour la
       MAUVAISE partie, pendant que la bannière propose de reprendre
       l'autre. Plutôt que réordonner le boot du moteur partagé (risqué,
       utilisé par 10 pages), on bloque toute interaction avec la page
       tant que le choix n'est pas fait :
       - #resume-shield : calque invisible plein écran (clic + focus),
         ne fait rien au clic (le choix n'est volontairement pas
         esquivable en cliquant ailleurs) ;
       - .save-banner : devient une carte flottante par-dessus le calque,
         qui recouvre visuellement les contrôles et le haut de la grille
         au lieu de s'insérer dans le flux comme avant.
       Voir _openResumeLock()/_closeResumeLock() plus bas (piège de focus
       clavier inclus — Tab ne doit pas sortir des 2 boutons). */
    .resume-shield { display: none; position: fixed; inset: 0; z-index: 300; background: transparent; }
    .resume-shield.show { display: block; }

    .save-banner {
      display: none; flex-direction: column; gap: 14px;
      position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
      z-index: 301; width: min(90vw, 380px);
      padding: 20px 22px; text-align: center;
      background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
      font-size: 0.78rem; color: var(--text); letter-spacing: 1px;
    }
    .save-banner.visible { display: flex; animation: slideDown 0.3s ease; }
    @keyframes slideDown {
      from { opacity: 0; transform: translate(-50%,-6px); }
      to   { opacity: 1; transform: translate(-50%,0); }
    }
    .save-actions { display: flex; gap: 8px; flex-shrink: 0; justify-content: center; }
    .save-btn {
      padding: 5px 12px;
      font-family: 'DM Mono', monospace; font-size: 0.72rem;
      letter-spacing: 1px; text-transform: uppercase;
      border-radius: 4px; border: 1px solid var(--border);
      background: var(--surface); color: var(--muted); cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .save-btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
    .save-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
    .save-btn.primary:hover { background: #b8952e; border-color: #b8952e; color: #fff; }

    /* ── BARRE DE PROGRESSION ── */
    .progress-track { height: 4px; background: var(--progress-bg); border-radius: 4px; overflow: hidden; }
    .progress-fill {
      height: 100%; background: var(--accent); border-radius: 4px;
      width: 0%; transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .progress-fill.complete { background: #22c55e; }

    /* ── GRILLE 9×9 ── */
    .grid-container {
      background: var(--border);
      border: 2px solid var(--accent);
      border-radius: 6px; overflow: hidden;
      grid-template-columns: repeat(9, 1fr);
      gap: 1px; padding: 0; box-shadow: none;
    }
    .cell {
      background: var(--cell-bg); border-radius: 0; border: none;
      font-family: 'DM Mono', monospace;
      font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 500;
      transition: background 0.1s;
    }
    .cell[data-col="2"], .cell[data-col="5"] { border-right: 2px solid var(--accent); }
    .cell[data-row="2"], .cell[data-row="5"] { border-bottom: 2px solid var(--accent); }
    .cell.given { color: var(--given) !important; }
    .cell.error-cell { color: var(--error) !important; background: rgba(255,71,87,0.12) !important; }
    .cell.selected   { background: var(--cell-selected) !important; }
    .cell.highlight  { background: var(--cell-highlight); }
    .cell:hover:not(.given) { background: var(--cell-hover); }
    .cell[data-val] { color: var(--accent-text); }
    .cell.given[data-val] { color: var(--given); }
    .cell.error-cell[data-val] { color: var(--error) !important; }
    .cell .notes-grid { grid-template-columns: repeat(3, 1fr); }
    .cell .notes-grid span { font-size: clamp(0.45rem, 1.6vw, 0.7rem); }

    /* ── NUMPAD ── */
    .numpad { grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 14px; }
    .numpad.side-mode { grid-template-columns: 1fr; margin-top: 0; }
    .num-btn {
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      color: var(--text); font-family: 'DM Mono', monospace;
      font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 500;
      box-shadow: none;
      position: relative;
    }
    .num-btn:hover  { background: var(--cell-hover); border-color: var(--muted); transform: none; }
    .num-btn:active { transform: scale(0.92); box-shadow: none !important; }
    .numpad.side-mode .num-btn { width: 50px; height: 50px; font-size: 1.3rem; }
    .num-btn:nth-child(1),.num-btn:nth-child(2),.num-btn:nth-child(3),
    .num-btn:nth-child(4),.num-btn:nth-child(5),.num-btn:nth-child(6),
    .num-btn:nth-child(7),.num-btn:nth-child(8),.num-btn:nth-child(9) {
      color: var(--text); border-color: var(--border); box-shadow: none;
    }
    /* .numpad en préfixe pour gagner en spécificité sur les règles
       :nth-child juste au-dessus (même spécificité sinon, et elles
       passaient après dans la cascade → la couleur plus claire de "used"
       ne s'appliquait jamais malgré le bouton bien désactivé — corrigé
       le 2026-08-14). */
    .numpad .num-btn.used { color: var(--muted); background: var(--cell-hover); opacity: 0.4; pointer-events: none; }
    /* Nombre de chiffres restants (2026-08-14) — même taille/police que les
       candidats des cases (.cell .notes-grid span), en bas à droite,
       encore plus discret (opacity très réduite sur --muted) pour ne pas
       concurrencer le gros chiffre. */
    .num-badge {
      position: absolute; bottom: 3px; right: 5px;
      font-family: 'DM Mono', monospace; font-size: clamp(0.45rem, 1.6vw, 0.7rem);
      font-weight: 500; color: var(--muted); opacity: 0.35; line-height: 1;
      pointer-events: none;
    }
    .num-btn.used .num-badge { display: none; } /* chiffre complet : déjà grisé, badge inutile */

    /* ── BOUTONS ACTION ── */
    .erase-btn, .hint-btn {
      flex: 1; padding: 12px 10px;
      font-family: 'DM Mono', monospace; font-size: 0.8rem;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      color: var(--muted); cursor: pointer;
      transition: color 0.2s, border-color 0.2s; box-shadow: none;
    }
    .erase-btn:hover { color: var(--error); border-color: var(--error); transform: none; }
    .hint-btn:hover  { color: var(--accent2); border-color: var(--accent2); transform: none; }
    #layout-btn {
      flex: 1; padding: 12px 10px;
      font-family: 'DM Mono', monospace; font-size: 0.8rem;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      color: var(--muted); cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    #layout-btn:hover  { color: var(--accent-text); border-color: var(--accent-text); }
    #layout-btn.active { color: var(--accent-text); border-color: var(--accent-text); }

    /* ── ANNEAU ── */
    .ring-btn { font-family: 'DM Mono', monospace; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    .ring-btn:hover { box-shadow: 0 4px 18px rgba(201,162,39,0.5); }

    /* ── INDICATEUR AUTOSAVE ── */
    .autosave-indicator {
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--muted); text-align: right; margin-top: 6px;
      transition: color 0.3s;
    }
    .autosave-indicator.saved { color: #22c55e; }

    /* ── STATS ── */
    .stats-section {
      margin-top: 20px; padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .stats-title {
      font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 12px;
    }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .stat-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 4px; padding: 10px 8px; text-align: center;
    }
    .stat-value {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem; font-weight: 700; color: var(--accent-text); line-height: 1;
    }
    .stat-label {
      font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
      color: var(--muted); margin-top: 4px;
    }
    .stats-detail {
      margin-top: 10px; display: grid;
      grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .stats-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 10px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      font-size: 0.75rem;
    }
    .stats-row-label { color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
    .stats-row-value { color: var(--accent-text); font-weight: 600; }
    .stats-reset-btn {
      display: block; width: 100%; margin-top: 8px; padding: 7px;
      font-family: 'DM Mono', monospace; font-size: 0.75rem;
      letter-spacing: 2px; text-transform: uppercase;
      background: none; border: 1px solid var(--border); border-radius: 4px;
      color: var(--muted); cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    .stats-reset-btn:hover { color: var(--error); border-color: var(--error); }
    .stats-info {
      margin-top: 12px; padding: 12px 14px;
      background: var(--cell-highlight); border: 1px solid var(--border); border-radius: 4px;
      font-size: 0.75rem; color: var(--muted); line-height: 1.75;
      display: flex; flex-direction: column; gap: 8px;
    }
    .stats-info p { margin: 0; }
    .stats-info strong { color: var(--text); }
    /* Audit 05/09 : --muted (#84839f) sur --cell-highlight (#363162) ne donnait que 3,23:1.
       Le seuil AA a 12px est 4,5:1 (le seuil 3:1 ne vaut qu'a partir de 18,66px gras / 24px). */
    body.dark .stats-info { color: #a8a7c4; }

    /* ── WIN OVERLAY ── */
    .win-overlay { flex-direction: column; gap: 20px; backdrop-filter: blur(6px); }
    .win-overlay .win-title {
      font-family: 'Playfair Display', serif;
      font-size: 3rem; font-weight: 900; color: var(--accent-text); text-align: center;
    }
    .win-details { display: flex; flex-direction: column; gap: 6px; align-items: center; }
    .win-detail-row {
      font-size: 0.88rem; letter-spacing: 1px;
      color: rgba(255,255,255,0.7); text-transform: uppercase;
    }
    .win-detail-row strong { color: #fff; font-weight: 700; }
    .win-share-btn {
      padding: 10px 24px;
      font-family: 'DM Mono', monospace; font-size: 0.8rem;
      letter-spacing: 2px; text-transform: uppercase;
      background: var(--surface); color: var(--muted);
      border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; transition: color 0.2s, border-color 0.2s;
    }
    .win-share-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
    .win-share-btn.copied { color: #22c55e; border-color: #22c55e; }
    .win-btn {
      padding: 14px 40px;
      font-family: 'DM Mono', monospace; font-size: 0.9rem;
      letter-spacing: 2px; text-transform: uppercase;
      background: var(--accent); color: var(--bg);
      border: none; border-radius: 4px; cursor: pointer;
      box-shadow: 4px 4px 0 #b8952e;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .win-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #b8952e; }
    .win-card { display: contents; }
    .win-emoji { display: none; }

    /* ── AIDE ── */
    .help-btn {
      width: 100%; margin-top: 10px; padding: 10px;
      font-family: 'DM Mono', monospace; font-size: 0.8rem;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      color: var(--muted); cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    .help-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
    .help-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(15,14,23,0.85); backdrop-filter: blur(6px);
      z-index: 200; align-items: center; justify-content: center;
    }
    .help-overlay.show { display: flex; }
    .help-modal {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 36px 40px;
      max-width: 480px; width: 90%; position: relative;
      max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .help-modal h3 {
      font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
      color: var(--accent-text); margin-bottom: 24px;
    }
    .help-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .help-list li {
      font-size: 0.82rem; color: var(--muted); line-height: 1.6;
      padding-left: 16px; border-left: 2px solid var(--border);
    }
    .help-list li strong { color: var(--text); display: block; margin-bottom: 2px; }
    .help-close {
      position: absolute; top: 16px; right: 16px;
      background: none; border: none; color: var(--muted);
      font-size: 1.2rem; cursor: pointer; transition: color 0.2s; line-height: 1;
    }
    .help-close:hover { color: var(--text); }

    /* ── SOLVEUR EN MODALE (2026-08-14) ──
       Même pattern que .help-overlay/.help-modal, juste plus large pour
       loger la grille de lecture + le panneau d'explication. */
    :root {
      --solver-blue:  #3b82f6;
      --solver-green: #22c55e;
      --solver-red:   #ef4444;
    }
    body.dark {
      --solver-blue:  #60a5fa;
      --solver-green: #4ade80;
      --solver-red:   #f87171;
    }
    .solver-overlay { display: none; position: fixed; inset: 0; background: rgba(15,14,23,0.85); backdrop-filter: blur(6px); z-index: 210; align-items: center; justify-content: center; padding: 20px; }
    .solver-overlay.show { display: flex; }
    .solver-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 30px 32px; max-width: 680px; width: 100%; position: relative; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .solver-modal h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }
    .solver-modal-sub { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
    .solver-hints-left { font-size: 0.72rem; color: var(--accent-text); font-weight: 700; margin-bottom: 18px; }
    .solver-hints-left.out { color: var(--error); }

    .solver-notice {
      font-size: .74rem; color: var(--accent2);
      background: rgba(224,85,85,.08); border: 1px solid var(--accent2);
      border-radius: 6px; padding: 9px 12px; margin-bottom: 14px; line-height: 1.5;
    }

    .svgrid-wrap { width: 100%; max-width: 480px; margin: 0 auto; }
    .svgrid {
      display: grid; grid-template-columns: repeat(9,1fr);
      background: var(--border); border: 2px solid var(--accent);
      border-radius: 6px; overflow: hidden; gap: 1px; aspect-ratio: 1;
    }
    .svcell {
      background: var(--cell-bg); display: flex; align-items: center; justify-content: center;
      position: relative; font-size: clamp(1rem, 3.6vw, 1.5rem); font-weight: 500;
      color: var(--accent-text); transition: background .15s;
    }
    .svcell[data-col="2"], .svcell[data-col="5"] { border-right: 2px solid var(--accent); }
    .svcell[data-row="2"], .svcell[data-row="5"] { border-bottom: 2px solid var(--accent); }
    .svcell.given { color: var(--given); font-weight: 700; }
    .svcell .notes-grid { grid-template-columns: repeat(3,1fr); width: 100%; height: 100%; display: grid; }
    .svcell .notes-grid span { font-size: clamp(.42rem, 1.6vw, .62rem); display: flex; align-items: center; justify-content: center; color: var(--muted); }

    .svcell.solver-line    { background: rgba(239,68,68,0.10) !important; }
    .svcell.solver-blocker { outline: 2px solid var(--solver-blue) !important; outline-offset: -2px; background: rgba(59,130,246,0.16) !important; z-index: 1; }
    .svcell.solver-elim    { background: rgba(239,68,68,0.20) !important; }
    .svcell.solver-elim .notes-grid span.struck { text-decoration: line-through; color: var(--solver-red); }
    .svcell.solver-solved  { outline: 2px solid var(--solver-green) !important; outline-offset: -2px; background: rgba(34,197,94,0.20) !important; z-index: 1; }

    .solver-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: .66rem; color: var(--muted); }
    .legend-item { display: inline-flex; align-items: center; gap: 5px; }
    .legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
    .legend-blue  { background: rgba(59,130,246,0.16); outline: 2px solid var(--solver-blue); outline-offset: -1px; }
    .legend-red   { background: rgba(239,68,68,0.20); outline: 2px solid var(--solver-red); outline-offset: -1px; }
    .legend-green { background: rgba(34,197,94,0.20); outline: 2px solid var(--solver-green); outline-offset: -1px; }

    /* Clignotement sur la vraie grille quand on ferme la modale après un
       "Appliquer ce coup" — repère visuel pour retrouver la case posée. */
    @keyframes solverFlash {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); }
      70%  { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .cell.solver-flash { animation: solverFlash 0.5s ease-out 8; position: relative; z-index: 5; }

    #solver-modal-panel { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 16px; }
    .solver-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
    .solver-technique-tag { font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; font-weight: 700; background: rgba(59,130,246,.12); color: var(--solver-blue); border: 1px solid var(--solver-blue); }
    .solver-step-counter { font-size: .62rem; color: var(--muted); letter-spacing: 1px; }
    .solver-panel-body { padding: 12px 14px; background: var(--surface); font-size: .8rem; color: var(--text); line-height: 1.65; min-height: 40px; }
    .solver-panel-body strong { color: var(--accent-text); }

    .solver-modal-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
    .solver-btn {
      padding: 10px 18px; font-family: 'DM Mono', monospace; font-size: .76rem;
      letter-spacing: 1px; text-transform: uppercase; border-radius: 6px; cursor: pointer;
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
      transition: transform .15s, opacity .15s;
    }
    .solver-btn:hover:not(:disabled) { transform: translateY(-1px); }
    .solver-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    .solver-btn.primary { background: var(--accent); color: #1a1a2e; border-color: var(--accent); font-weight: 700; }
    .solver-btn.apply { background: var(--solver-green); color: #0b2e17; border-color: var(--solver-green); font-weight: 700; }
    .solver-btn.apply:disabled { background: var(--bg); color: var(--muted); border-color: var(--border); }

    @media (max-width: 480px) {
      .solver-modal { padding: 22px 18px; }
    }

    /* #grid-id : styles laissés à sudoku-core.css (color: var(--muted)).
       La règle qui existait ici codait la couleur en dur et annulait la
       correction de contraste du 2026-08-04 (1,52:1 en clair, 1,43:1 en
       sombre). Retirée le 2026-08-29 — ne pas la remettre. */

    .footer-links {
      margin-top: 16px; padding-top: 12px;
      border-top: 1px solid var(--border);
      display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
    }
    .footer-link {
      font-family: 'DM Mono', monospace; font-size: 0.75rem;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--muted); text-decoration: none; transition: color 0.2s;
     padding: 6px 4px; margin: -6px -4px; display: inline-block;}
    .footer-link:hover { color: var(--accent-text); }
    .footer-link.as-button { background: none; border: none; cursor: pointer; }

    .legal-footer {
      margin: 40px auto 0; padding-top: 14px;
      border-top: 1px solid var(--border);
      display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
      max-width: 640px; opacity: 0.55;
    }
    .legal-footer a, .legal-footer button {
      font-family: 'DM Mono', monospace; font-size: 0.75rem;
      color: var(--muted); text-decoration: none;
      background: none; border: none; cursor: pointer; transition: opacity 0.2s;
      display: inline-block; padding: 7px 6px; margin: -7px -6px;
    }
    .legal-footer a:hover, .legal-footer button:hover { opacity: 1; text-decoration: underline; }

    @media (max-width: 420px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-detail { grid-template-columns: 1fr; }
    }

    /* ── Bloc SEO (texte + FAQ) ── */
    .seo-content { max-width: 640px; width: 100%; margin: 32px auto 0; text-align: left; position: relative; z-index: 1; }
    .seo-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 700; color: var(--text); margin-bottom: 10px; }
    .seo-content h3 { font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2-text); margin: 24px 0 10px; }
    .seo-content p { font-family: 'DM Mono', monospace; font-size: 0.8rem; line-height: 1.75; color: var(--muted); margin-bottom: 10px; }
    .seo-content p:last-child { margin-bottom: 0; }
    .seo-content a { color: var(--accent-text); font-weight: 600; text-decoration: underline; }
    .seo-content p a, .seo-content li a { display: inline-block; padding: 4px 3px; margin: -4px -3px; }
    .seo-content ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .seo-content li { font-family: 'DM Mono', monospace; font-size: 0.78rem; line-height: 1.6; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; }
    .seo-content li strong { color: var(--text); }
    .faq-mini details { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; }
    .faq-mini summary { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 0.8rem; color: var(--text); cursor: pointer; }
    .faq-mini p { font-family: 'DM Mono', monospace; margin-top: 8px; margin-bottom: 0 !important; }
    /* Bloc "toutes les grilles" — hub vers les autres formats */
    .seo-content .format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .seo-content .format-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; text-decoration: none; font-weight: 400; transition: border-color .15s ease, transform .15s ease; }
    .seo-content .format-card:hover, .seo-content .format-card:focus-visible { border-color: var(--accent2); transform: translateY(-2px); }
    .seo-content .format-card-title { display: block; font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .seo-content .format-card-desc { display: block; font-family: 'DM Mono', monospace; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
    @media (max-width: 420px) { .seo-content .format-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Specifique a sudoku-du-jour.html / en/daily-sudoku.html
   (elements absents des 2 pages d'accueil — sans effet sur elles)
   ============================================================ */

.sudoku-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.sudoku-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; }

.daily-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px;
      border: 1px solid var(--accent); color: var(--accent-text); background: var(--cell-selected);
      transition: opacity 0.3s;
    }

.daily-badge.hidden { opacity: 0; pointer-events: none; }

.daily-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease infinite; }

@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }