/* ============================================================
   sudoku-print.css — feuille de style des 2 pages Imprimer
   sudoku-imprimer.html · en/print-sudoku.html

   Cree le 2026-09-06 (point 21 : extraction du CSS inline),
   apres sudoku-9x9.css. Ces 135 regles etaient dupliquees a
   l'identique dans le <style> des 2 pages : toute correction
   devait etre faite deux 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-print.css
   Plusieurs regles ci-dessous surchargent volontairement le core
   a specificite egale (:root, body.dark, body, .footer-links,
   .legal-footer…) : elles ne gagnent que parce qu'elles sont
   declarees APRES.

   SEULE DIVERGENCE FR/EN au moment de l'extraction :
   .footer-links portait `align-self: center` en FR et pas en EN
   (bloc de liens du bas centre sur la page FR, colle a gauche sur
   la page EN au-dela de ~700px). Unifie sur la version centree —
   decision de Jean-Christophe le 06/09. Tout le reste etait
   strictement identique, memes regles dans le meme ordre.

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

:root { --accent: #c9a227; --accent2: #e05555; --error: #de0013; }
body.dark { --accent: #e8c547; --accent2: #ff6b6b; --error: #ff4757; }

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

/* ── HEADER ── */
header { margin-bottom: 36px; padding: 0 56px; text-align: center; width: 100%; align-self: stretch; }
.site-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); 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; }
.breadcrumb { font-size: 0.7rem; color: var(--muted); letter-spacing: 2px; margin-top: 10px; }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }

/* ── LAYOUT ── */
.page-layout { display: flex; gap: 32px; width: 100%; max-width: 1100px; align-items: flex-start; position: relative; z-index: 1; }

/* ── PANNEAU ── */
.control-panel { width: 260px; flex-shrink: 0; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; }
.panel-title { font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); padding: 0 0 10px 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.panel-group { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel-label { font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.panel-select { appearance: none; -webkit-appearance: none; width: 100%; padding: 8px 32px 8px 12px; font-family: 'DM Mono', monospace; font-size: 0.78rem; background: var(--bg) 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(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; outline: none; transition: border-color 0.2s; }
.panel-select:hover, .panel-select:focus { border-color: var(--accent); }
.panel-select option { background: var(--surface); color: var(--text); }
.btn { width: 100%; padding: 11px; font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.btn:hover { color: var(--text); border-color: var(--muted); }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; box-shadow: 3px 3px 0 #8a6a10; transition: transform 0.1s, box-shadow 0.1s; }
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #8a6a10; color: var(--bg); }
.btn-secondary { color: var(--accent-text); border-color: var(--accent-text); }
.btn-secondary:hover { background: var(--cell-selected); }
.switch-row { display: flex; align-items: center; justify-content: space-between; }
.switch-label { font-size: 0.72rem; color: var(--muted); }
.switch { position: relative; width: 38px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--border); border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.switch-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; transition: transform 0.2s; }
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.info-box { font-size: 0.68rem; color: var(--muted); line-height: 1.7; padding: 10px 12px; background: var(--cell-highlight); border: 1px solid var(--border); border-radius: 4px; }
.info-box strong { color: var(--text); }

/* ── APERÇU ── */
.preview-area { flex: 1; min-width: 0; }
.preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.preview-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--text); }
.preview-badge { font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; color: var(--muted); }

/* ── LOADER ── */
.loader { display: none; padding: 60px 0; text-align: center; color: var(--muted); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; }
.loader.visible { display: block; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   FEUILLES — aperçu écran
   Approche : ratio A4 via aspect-ratio CSS,
   grilles centrées, tailles en % de la feuille.
══════════════════════════════════════ */
.sheet-wrapper { display: flex; flex-direction: column; gap: 24px; }

.sheet {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.12);
  width: 100%;
  aspect-ratio: 210 / 297; /* A4 portrait */
  box-sizing: border-box;
  padding: 4% 5%;
  display: flex;
  flex-direction: column;
  font-size: 1.2vw; /* base relative pour tout ce qui est dans la feuille */
}

/* En-tête */
.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2%; flex-shrink: 0; font-family: 'DM Mono', monospace; }
.sheet-site { font-size: 0.6em; color: #aaa; letter-spacing: 2px; text-transform: uppercase; }
.sheet-info { font-size: 0.55em; color: #ccc; text-align: right; line-height: 1.6; }

/* Grilles */
.sheet-grids {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.sheet-grids.layout-1 { grid-template-columns: 1fr; gap: 0; }
.sheet-grids.layout-2 { grid-template-columns: 1fr; gap: 3%; }
.sheet-grids.layout-4 { grid-template-columns: 1fr 1fr; gap: 3% 4%; }

/* Bloc */
.sudoku-block { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.sudoku-block-title { font-family: 'DM Mono', monospace; font-size: 0.55em; color: #aaa; letter-spacing: 2px; text-transform: uppercase; align-self: center; }

/*
  Grille carrée : on fixe la hauteur en % de la feuille selon le layout.
  La largeur suit automatiquement (même valeur = carré).
  layout-1 : 1 grille → hauteur max 75% de la feuille
  layout-2 : 2 grilles + gap → chacune max 43%
  layout-4 : 2×2 → chacune max 42% de la moitié = ~40%
*/
.sudoku-grid-print {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 2px solid #222;
  box-sizing: border-box;
  /* Largeur = hauteur pour rester carré */
}
/* Hauteur exprimée via width sur l'élément carré */
.sheet-grids.layout-1 .sudoku-grid-print { width: 72%; aspect-ratio: 1; }
.sheet-grids.layout-2 .sudoku-grid-print { width: 65%; aspect-ratio: 1; }
.sheet-grids.layout-4 .sudoku-grid-print { width: 90%; aspect-ratio: 1; }

.sudoku-cell-print {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-weight: 700;
  border: 0.5px solid #d0d0d0; box-sizing: border-box;
  background: white; color: #111;
}
.sheet-grids.layout-1 .sudoku-cell-print { font-size: 1.8em; }
.sheet-grids.layout-2 .sudoku-cell-print { font-size: 1.1em; }
.sheet-grids.layout-4 .sudoku-cell-print { font-size: 0.85em; }

.sudoku-cell-print.given-cell { background: #f0f0f0; }
.sudoku-cell-print.empty-cell { color: transparent; }

/* Séparateurs 3×3 */
.sudoku-cell-print[data-col="2"], .sudoku-cell-print[data-col="5"] { border-right: 2px solid #222; }
.sudoku-cell-print[data-col="0"] { border-left: none; }
.sudoku-cell-print[data-col="8"] { border-right: none; }
.sudoku-cell-print[data-row="2"], .sudoku-cell-print[data-row="5"] { border-bottom: 2px solid #222; }
.sudoku-cell-print[data-row="0"] { border-top: none; }
.sudoku-cell-print[data-row="8"] { border-bottom: none; }

/* Solution miniature — largeur en em proportionnelle à la grille */
.sol-wrapper { display: flex; align-items: center; gap: 4px; align-self: center; margin-top: 4px; }
.sol-label { font-family: 'DM Mono', monospace; font-size: 0.4em; color: #bbb; letter-spacing: 1px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.solution-grid { display: grid; grid-template-columns: repeat(9, 1fr); border: 1px solid #bbb; }
.sheet-grids.layout-1 .solution-grid { width: 8em; }
.sheet-grids.layout-2 .solution-grid { width: 6em; }
.sheet-grids.layout-4 .solution-grid { width: 5em; }
.sol-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 0.28em; border: 0.5px solid #e0e0e0; box-sizing: border-box; color: #888; }
.sol-cell[data-col="2"], .sol-cell[data-col="5"] { border-right: 1px solid #bbb; }
.sol-cell[data-col="0"] { border-left: none; }
.sol-cell[data-col="8"] { border-right: none; }
.sol-cell[data-row="2"], .sol-cell[data-row="5"] { border-bottom: 1px solid #bbb; }
.sol-cell[data-row="0"] { border-top: none; }
.sol-cell[data-row="8"] { border-bottom: none; }

.sheet-watermark { flex-shrink: 0; text-align: right; margin-top: 1.5%; font-family: 'DM Mono', monospace; font-size: 0.45em; color: #ddd; letter-spacing: 3px; text-transform: uppercase; }

/* ── MOBILE ── */
@media (max-width: 700px) {
  body { padding: 20px 12px 60px; }
  header { padding-left: 52px; }
  .page-layout { flex-direction: column; gap: 16px; }
  .control-panel { position: relative; top: 0; width: 100%; }

  /* Sur mobile : pas de simulation A4, on affiche les grilles directement */
  .sheet {
    aspect-ratio: auto;
    font-size: 3vw;
    padding: 3% 3% 2%;
    border-radius: 6px;
  }

  /* sheet-grids : empilement simple */
  .sheet-grids.layout-4 { grid-template-columns: 1fr 1fr; gap: 2% 3%; }

  /*
    Taille des grilles en vw :
    - layout-1 et 2 : grille ≈ 80% de la largeur écran
    - layout-4 : 2 colonnes → chacune ≈ 42% de la largeur
    On fixe width ET height égaux (carré) via CSS pur
  */
  .sheet-grids.layout-1 .sudoku-grid-print,
  .sheet-grids.layout-2 .sudoku-grid-print { width: 78vw; height: 78vw; }
  .sheet-grids.layout-4 .sudoku-grid-print  { width: 42vw; height: 42vw; }

  /* Police des cellules proportionnelle à la grille */
  .sheet-grids.layout-1 .sudoku-cell-print,
  .sheet-grids.layout-2 .sudoku-cell-print { font-size: calc(78vw / 9 * 0.55); }
  .sheet-grids.layout-4 .sudoku-cell-print  { font-size: calc(42vw / 9 * 0.55); }

  /* Retirer aspect-ratio sur les cellules (hauteur déjà fixée par la grille) */
  .sudoku-cell-print { aspect-ratio: auto; }

  /* Solution miniature */
  .sheet-grids.layout-1 .solution-grid,
  .sheet-grids.layout-2 .solution-grid { width: 22vw; }
  .sheet-grids.layout-4 .solution-grid  { width: 14vw; }
}

/* ══════════════════════════════════════
   IMPRESSION
   Zone utile A4 portrait (marges 12mm) : 186 × 273mm
   layout-1 : 1 grille 155×155mm centrée
   layout-2 : 2 grilles 118×118mm, gap 10mm  (118+118+10+en-tête ≈ 260mm ✓)
   layout-4 : 4 grilles 85×85mm en 2×2
══════════════════════════════════════ */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: white !important; padding: 0 !important; margin: 0 !important; }
  nav, header, .control-panel, .preview-header, .breadcrumb, .theme-btn, .loader { display: none !important; }
  .page-layout { display: block !important; }
  .preview-area { width: 100% !important; overflow: visible !important; }
  .sheet-wrapper { gap: 0 !important; }

  .sheet {
    border: none !important; box-shadow: none !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 10pt !important; /* base pour les em */
    page-break-after: always; break-after: page;
  }
  .sheet:last-child { page-break-after: avoid; break-after: avoid; }

  .sheet-header { margin-bottom: 4mm; }
  /* Centrage vertical pour layout-1 et layout-4 */
  .sheet-grids { align-content: center; }
  /* layout-2 : contenu en haut pour laisser de la place */
  .sheet-grids.layout-2 { align-content: start; gap: 6mm; }
  .sheet-grids.layout-4 { gap: 5mm 8mm; }

  /* Grilles en mm — layout-2 réduit quand solution affichée */
  .sheet-grids.layout-1 .sudoku-grid-print { width: 155mm !important; aspect-ratio: 1 !important; }
  .sheet-grids.layout-2 .sudoku-grid-print { width:  90mm !important; aspect-ratio: 1 !important; }
  .sheet-grids.layout-4 .sudoku-grid-print { width:  85mm !important; aspect-ratio: 1 !important; }

  .sheet-grids.layout-1 .sudoku-cell-print { font-size: 14pt !important; }
  .sheet-grids.layout-2 .sudoku-cell-print { font-size:  8pt !important; }
  .sheet-grids.layout-4 .sudoku-cell-print { font-size:  7pt !important; }

  .sheet-grids.layout-1 .solution-grid { width: 46mm !important; }
  .sheet-grids.layout-2 .solution-grid { width: 22mm !important; }
  .sheet-grids.layout-4 .solution-grid { width: 26mm !important; }
  .sol-cell { font-size: 4pt !important; }
  .sudoku-block-title { font-size: 7pt !important; }
  .sheet-watermark { font-size: 6pt !important; margin-top: 3mm; }
}

.footer-links {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  align-self: center;
}
.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; }
@media (pointer: coarse) { .footer-link { padding: 14px 8px; margin: -14px -8px; } }

/* ── CONTENU SEO + FAQ (point 5.1 audit 2026-08-30) ── */
.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 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; }