/* Mots croisés — feuille de style partagée (Mots croisés 1 & 2). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1a1814;
  --paper: #f2f5fa;
  --paper-dark: #e6ecf6;
  --brand: #1d3a5f;
  --gold: #b89a5a;
  --gold-light: #d4b87a;
  --muted: #7a7060;
  --ok: #4c7a4c;
  --bad: #b4553f;
  --cell: 36px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; }

/* ── EN-TÊTE ── */
.entete {
  text-align: center;
  padding: 2.5rem 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(184,154,90,0.25);
}
.marque {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--brand);
  margin-bottom: 1.2rem;
}
.marque:hover { color: var(--gold); }
.marque .embleme { color: var(--gold); font-style: normal; }
.entete h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.01em;
}
.accroche { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.02em; margin-top: 0.4rem; }
.entete-liens { margin-top: 1rem; display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.lien-aide {
  background: none;
  border: 1px solid rgba(184,154,90,0.5);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s;
}
.lien-aide:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* ── BARRE D'OUTILS ── */
.outils {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245,242,235,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(184,154,90,0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
}
.minuteur {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  min-width: 5.2rem;
  text-align: center;
  color: var(--ink);
}
.minuteur .lbl {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.minuteur.masque #temps { letter-spacing: 0.2em; color: var(--muted); }
.bouton {
  background: none;
  border: 1px solid rgba(184,154,90,0.5);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.bouton:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.bouton[aria-pressed="true"] { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.bouton.discret { border-color: rgba(122,112,96,0.35); color: var(--muted); }
.bouton.discret:hover { background: var(--muted); color: var(--paper); border-color: var(--muted); }

/* ── DISPOSITION ── */
main {
  max-width: 1150px;
  margin: 0 auto;
  padding: 2rem 1.2rem 5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
  position: relative;
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; gap: 2rem; }
  :root { --cell: 32px; }
  td.cell input { font-size: 1rem; }
}
/* Sur téléphone : cases plus petites mais carrées ; défilement gauche/droite
   pour accéder à toute la grille. */
@media (max-width: 560px) {
  :root { --cell: 30px; }
  td.cell input { font-size: 0.92rem; }
  main { padding: 1.5rem 0.8rem 4rem; }
}
@media (max-width: 400px) {
  :root { --cell: 27px; }
  td.cell input { font-size: 0.82rem; }
}

.grille-wrap { overflow-x: auto; padding-bottom: 0.5rem; }
/* Sur ordinateur : la grille reste figée pendant qu'on fait défiler les
   définitions, pour ne jamais en cacher une partie. La marge basse sur les
   définitions donne assez de course pour garder la grille épinglée jusqu'à
   la dernière définition. */
@media (min-width: 901px) {
  .grille-wrap {
    position: sticky;
    top: 5.25rem;                       /* sous la barre d'outils fixe */
    align-self: start;
    overflow: visible;
  }
  .defs { padding-bottom: 16rem; }
}
table.grille { border-collapse: collapse; margin: 0 auto; table-layout: fixed; }
table.grille th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--gold);
  width: var(--cell);
  min-width: var(--cell);
  max-width: var(--cell);
  height: 1.3rem;
  text-align: center;
}
table.grille th.rang { width: 1.6rem; min-width: 1.6rem; max-width: 1.6rem; }

td.cell {
  /* Cases toujours carrées, jamais déformées (min = max). */
  width: var(--cell);
  height: var(--cell);
  min-width: var(--cell);
  max-width: var(--cell);
  min-height: var(--cell);
  max-height: var(--cell);
  padding: 0;
  border: 1px solid rgba(26,24,20,0.55);
  position: relative;
  background: #fff;
}
td.cell.noire { background: var(--ink); border-color: var(--ink); }
td.cell input {
  width: 100%; height: 100%;
  border: none; background: transparent;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--ink);
  caret-color: var(--gold);
  padding: 0;
}
td.cell input:focus { outline: none; }
td.cell.mot { background: #f4ecd5; }
td.cell.sel { background: var(--gold-light); }
td.cell.ok  { background: #d8e8d2 !important; }
td.cell.ok input { color: var(--ok); }
td.cell.bad { background: #efd6cd !important; }
td.cell.bad input { color: var(--bad); }

/* ── PAUSE ── */
.jeu.pause .grille-wrap,
.jeu.pause .defs { filter: blur(9px); opacity: 0.25; pointer-events: none; user-select: none; }
.voile-pause {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.jeu.pause .voile-pause { display: flex; }
.voile-pause p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--muted);
}

/* ── DÉFINITIONS ── */
.defs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
@media (max-width: 1100px) { .defs { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .defs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .defs { grid-template-columns: 1fr; } }
.defs h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400; font-size: 1.4rem;
  margin-bottom: 0.6rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(184,154,90,0.4);
}
.defs ol { list-style: none; }
.defs li {
  display: flex; gap: 0.55rem;
  font-size: 0.82rem; line-height: 1.5;
  padding: 0.32rem 0.4rem; border-radius: 3px;
  cursor: pointer; transition: background 0.2s;
}
.defs li:hover { background: var(--paper-dark); }
.defs li.actif { background: #f4ecd5; }
.defs li .num {
  flex: 0 0 auto; min-width: 2.1rem;
  color: var(--gold); font-weight: 600; font-size: 0.78rem; text-align: right;
}

/* ── BANNIÈRE DE FIN + VAINQUEURS ── */
.fin {
  margin: 0 auto 1.5rem; max-width: 720px; text-align: center;
  background: var(--paper-dark); border: 1px solid var(--gold);
  padding: 1.4rem 1.5rem; display: none;
}
.fin.on { display: block; animation: pop 0.4s ease; }
.fin h2 {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-weight: 400; font-size: 1.9rem; color: var(--gold);
}
.fin p { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }
.fin-form { margin-top: 1rem; display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.fin-form input {
  font-family: inherit; font-size: 0.85rem;
  padding: 0.55rem 0.9rem; border: 1px solid rgba(184,154,90,0.6);
  background: var(--paper); color: var(--ink); min-width: 12rem;
}
.fin-form input:focus { outline: none; border-color: var(--gold); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.vainqueurs {
  max-width: 720px; margin: 0 auto 3rem; padding: 0 1.2rem;
  display: none;
}
.vainqueurs.on { display: block; }
.vainqueurs h2 {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-weight: 400; font-size: 1.6rem; text-align: center;
  margin-bottom: 1rem;
}
.vainqueurs table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.vainqueurs th, .vainqueurs td {
  text-align: left; padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(184,154,90,0.2);
}
.vainqueurs th {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.vainqueurs td.rang-num { color: var(--gold); width: 2rem; }
.vainqueurs td.duree { font-variant-numeric: tabular-nums; }

/* ── AIDE ── */
dialog#aide {
  max-width: 560px; border: 1px solid var(--gold);
  background: var(--paper); color: var(--ink); padding: 2rem; line-height: 1.7;
}
dialog#aide::backdrop { background: rgba(26,24,20,0.55); }
dialog#aide h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.7rem; margin-bottom: 0.8rem; }
dialog#aide ul { margin: 0.6rem 0 0.6rem 1.1rem; }
dialog#aide li { margin-bottom: 0.4rem; font-size: 0.9rem; }
dialog#aide p { font-size: 0.9rem; margin-bottom: 0.6rem; }
dialog#aide .bouton { margin-top: 0.6rem; }

footer.pied {
  text-align: center; padding: 2.5rem 1rem;
  border-top: 1px solid rgba(184,154,90,0.2);
  color: var(--muted); font-family: 'Cormorant Garamond', serif; font-style: italic;
}