/* ============================================================
 *  Mots-Cachés — Styles du générateur
 *  Fichier : /home/debian/site/assets/css/generateur.css
 * ============================================================ */

.generateur-form {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gen-group { margin-bottom: 1.25rem; }
.gen-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-base);
}
.gen-hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.25rem;
  line-height: 1.5;
}
.gen-group textarea,
.gen-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.gen-group textarea:focus,
.gen-group select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.gen-group textarea {
  min-height: 160px;
  resize: vertical;
  font-family: ui-monospace, monospace;
  line-height: 1.5;
}
.gen-compteur {
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.gen-compteur.is-warn { color: #b45309; font-weight: 600; }
.gen-compteur.is-erreur { color: #b91c1c; font-weight: 600; }

.gen-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .gen-row { grid-template-columns: 1fr; }
}

.gen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.gen-actions--final {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.gen-message {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.gen-message.is-erreur  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.gen-message.is-succes  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.gen-message.is-warn    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* --- Résultat --- */
.gen-resultat {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.gen-resultat h2 { margin-top: 0; }

.gen-apercu-wrap {
  overflow-x: auto;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
}
.gen-apercu-grille {
  display: grid;
  gap: 2px;
  background: #0f172a;
  padding: 3px;
  border-radius: 8px;
  margin-inline: auto;
  max-width: fit-content;
}
.gen-case {
  background: #fff;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  border-radius: 2px;
  min-width: 22px;
  font-family: ui-monospace, monospace;
  color: #0f172a;
}
.gen-case.is-mot {
  background: #fbbf24;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
  .gen-case { background: #334155; color: #f1f5f9; }
  .gen-case.is-mot { background: #b45309; color: #fff; }
}

.gen-liste-mots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gen-liste-mots li {
  background: var(--bg-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Aperçu dans le formulaire : adapte la largeur des cases */
.gen-apercu-grille[data-taille="8"]  { grid-template-columns: repeat(8, 1fr); }
.gen-apercu-grille[data-taille="10"] { grid-template-columns: repeat(10, 1fr); }
.gen-apercu-grille[data-taille="12"] { grid-template-columns: repeat(12, 1fr); }
.gen-apercu-grille[data-taille="15"] { grid-template-columns: repeat(15, 1fr); }


/* ============================================================
 *  Impression des grilles personnalisées
 *  Page : /grille-perso?id=XXX&print=solutions
 * ============================================================ */

.print-page-body {
  background: #e5e7eb; margin: 0; padding: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #111827; min-height: 100vh;
}
.print-loading {
  text-align: center; color: #6b7280;
  padding: 3rem 1rem; font-size: 0.95rem; line-height: 1.6;
}
.print-page {
  background: #fff; width: 21cm; min-height: 29.7cm;
  margin: 0 auto 1.5rem; padding: 1.5cm; box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.print-page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; border-bottom: 2px solid #111827;
  padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.print-page-head h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; color: #111827; }
.print-meta { font-size: 0.78rem; color: #6b7280; text-align: right; line-height: 1.5; white-space: nowrap; }
.print-intro { text-align: center; color: #6b7280; font-size: 0.85rem; margin: 0 0 1rem; }
.print-page-foot {
  margin-top: 1.5rem; padding-top: 0.6rem;
  border-top: 1px solid #d1d5db;
  font-size: 0.72rem; color: #6b7280; text-align: center;
}
.print-grid {
  display: grid; gap: 1px; background: #111827; padding: 2px;
  margin: 0 auto; width: 100%; max-width: 16cm;
}
.print-cell {
  background: #fff; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-weight: 700; font-size: 0.95rem; color: #111827; line-height: 1;
}
.print-legende {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.9rem; font-size: 0.82rem; color: #111827;
}
.print-legende-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: ui-monospace, monospace; font-weight: 600;
}
.print-legende-pastille {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; flex-shrink: 0;
}
.print-solutions-list {
  column-count: 2; column-gap: 1.5rem;
  margin: 0; padding: 0; list-style: none; font-size: 0.88rem;
}
.print-solutions-list li {
  break-inside: avoid; page-break-inside: avoid;
  padding: 0.35rem 0; border-bottom: 1px dotted #d1d5db;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.sol-pastille {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; flex-shrink: 0; position: relative; top: 1px;
}
.sol-mot { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 0.03em; }
.sol-coord { margin-left: auto; color: #4b5563; font-size: 0.78rem; white-space: nowrap; }

@page { size: A4 portrait; margin: 1.5cm; }

@media print {
  html, body {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .print-page-body { background: #fff !important; padding: 0 !important; }
  .print-loading { display: none !important; }
  .print-page {
    width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none;
    page-break-after: always; break-after: page;
  }
  .print-page:last-child { page-break-after: auto; break-after: auto; }
  .print-grid { max-width: 100%; gap: 0; padding: 1px; background: #000; }
  .print-cell { color: #000; }
  .print-cell.is-colored { color: #fff; }
}

/* ============================================================
 *  Correctifs impression v3
 *  - Lignes de grille : box-shadow inset (gap:1px disparaît en print HD)
 *  - En-tête : display:block (le flex casse en impression sur Chrome/Edge)
 *  - Page 3 : CSS Grid au lieu de column-count (instable en print)
 * ============================================================ */

@media print {
  /* 1) Lignes de grille */
  /* Bordures par border (Chrome Android print ignore box-shadow et gap) */
  .print-grid {
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    border-right: 0.3mm solid #000 !important;
    border-bottom: 0.3mm solid #000 !important;
    box-sizing: border-box !important;
  }
  .print-cell {
    box-shadow: none !important;
    border-top: 0.3mm solid #000 !important;
    border-left: 0.3mm solid #000 !important;
    box-sizing: border-box !important;
  }
  /* Cellules colorées : garantit l'impression du fond */
  .print-cell.is-colored {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 2) En-tête : layout block */
  .print-page-head {
    display: block !important;
  }
  .print-page-head h1 {
    font-size: 16pt !important;
    margin: 0 0 4pt 0 !important;
    display: block !important;
  }
  .print-meta {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 9pt !important;
    margin: 0 0 6pt 0 !important;
  }

  /* 3) Page 3 : 2 colonnes stables */
  .print-solutions-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-count: auto !important;
    column-gap: 0 !important;
    gap: 0 1.5rem !important;
  }
  .print-solutions-list li {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* ============================================================
 *  Sections SEO — mise en forme (v1)
 * ============================================================ */

.section-seo { padding-block: 2rem 3rem; }

.section-seo h2 {
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid var(--brand);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: var(--fs-xl);
}
.section-seo h2:first-of-type { margin-top: 0; }

/* Étapes numérotées */
.etapes {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
}
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding: 1rem 0 1rem 3.25rem;
  border-bottom: 1px dashed var(--border);
}
.etapes > li:last-child { border-bottom: none; padding-bottom: 0; }
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}
.etapes > li h3 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-lg);
}

/* Grille d'idées */
.idees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.idee-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--bg-soft);
  border-radius: 10px;
  border-left: 3px solid var(--brand);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-soft);
  transition: transform 0.15s, box-shadow 0.15s;
}
.idee-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.idee-item .idee-emoji {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.idee-item strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-size: var(--fs-base);
}

/* Encadrés conseil */
.conseils-grid { display: grid; gap: 1rem; margin: 1.5rem 0; }
.conseil-box {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--brand);
}
.conseil-box h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  font-size: var(--fs-lg);
}
.conseil-box h3 .conseil-ico {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.conseil-box p { margin: 0; line-height: 1.6; }

/* Liens maillage interne */
.seo-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.seo-liens a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--bg-soft);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.seo-liens a:hover {
  background: var(--bg-muted);
  border-color: var(--brand);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .etapes > li { padding-left: 2.9rem; }
  .etapes > li::before { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
}

/* ============================================================
 *  Sommaire ancre sur /generateur
 * ============================================================ */

.sommaire-generateur {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 0.85rem 0;
  margin-bottom: 1.5rem;
}
.sommaire-generateur .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.sommaire-label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}
.sommaire-generateur ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sommaire-generateur a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.sommaire-generateur a:hover {
  background: var(--bg-muted);
  border-color: var(--brand);
  transform: translateY(-1px);
}

/* Compense le header sticky lors du scroll vers une ancre */
.section-seo h2,
#faq {
  scroll-margin-top: 90px;
}

@media (max-width: 600px) {
  .sommaire-generateur .container { flex-direction: column; align-items: flex-start; }
  .sommaire-generateur ul { width: 100%; }
  .sommaire-generateur a { font-size: var(--fs-xs); padding: 0.3rem 0.7rem; }
}

/* Défilement fluide (au cas où pas déjà dans style.css) */
html { scroll-behavior: smooth; }


/* ============================================================
   Info "Mes grilles" sous le resultat du generateur
   ============================================================ */
.gen-info-mes-grilles {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
  font-size: .9rem;
  line-height: 1.5;
  color: #1e40af;
}
.gen-info-mes-grilles a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  .gen-info-mes-grilles {
    background: #0c1e3a;
    border-left-color: #60a5fa;
    color: #bfdbfe;
  }
  .gen-info-mes-grilles a {
    color: #93c5fd;
  }
}


/* ============================================================
   Avertissement filtre mots interdits
   ============================================================ */
.filtre-avertissement {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  padding: .75rem 1rem;
  margin: .75rem 0;
  color: #991b1b;
  font-size: var(--fs-sm, .875rem);
  line-height: 1.5;
}
.filtre-avertissement strong {
  display: block;
  margin-bottom: .15rem;
}
.filtre-avertissement small {
  color: #b91c1c;
  font-size: .8rem;
  display: block;
  margin-top: .15rem;
}
@media (prefers-color-scheme: dark) {
  .filtre-avertissement {
    background: #450a0a;
    border-color: #7f1d1d;
    border-left-color: #ef4444;
    color: #fecaca;
  }
  .filtre-avertissement small { color: #fca5a5; }
}