/* ══════════════ LES MOTS FLÉCHÉS ══════════════

   Une seule feuille pour les trois usages. Ce qui change d'un usage à
   l'autre, c'est UNE mesure — le côté de la case — et tout le reste en
   découle : le corps des définitions, l'épaisseur des traits, la taille
   des lettres. C'est la seule façon d'avoir la même grille à l'écran,
   sur la feuille imprimée et dans le livre sans la redessiner trois
   fois.

       --mf-case : le côté d'une case
       --mf-colonnes : posé par le dessin, c'est la largeur de la grille

   Sur le téléphone, la case se calcule sur la largeur de l'écran : une
   grille de neuf colonnes doit tenir sans qu'on la pousse du doigt. */

.mf-grille {
  --mf-case: 44px;
  --mf-trait: 1px;
  --mf-encre: #111;
  --mf-papier: #fff;
  --mf-def-fond: #f2f0ec;
  --mf-def-encre: #2a2724;

  display: grid;
  grid-template-columns: repeat(var(--mf-colonnes), var(--mf-case));
  gap: 0;
  width: calc(var(--mf-case) * var(--mf-colonnes) + var(--mf-trait));
  max-width: 100%;
  margin: 0 auto;
  border-top: var(--mf-trait) solid var(--mf-encre);
  border-left: var(--mf-trait) solid var(--mf-encre);
  background: var(--mf-papier);
}

.mf-case {
  position: relative;
  width: var(--mf-case);
  height: var(--mf-case);
  border-right: var(--mf-trait) solid var(--mf-encre);
  border-bottom: var(--mf-trait) solid var(--mf-encre);
  box-sizing: border-box;
  overflow: hidden;
}

/* ── La case où l'on écrit ── */
.mf-lettre {
  background: var(--mf-papier);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mf-case) * 0.5);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mf-encre);
}

.mf-saisie {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: calc(var(--mf-case) * 0.5);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mf-encre);
  caret-color: var(--mf-encre);
}
.mf-saisie:focus { outline: 0; background: #fff6cf; }
/* Le mot qu'on est en train de faire s'éclaire en entier : sur un
   téléphone, on perd sinon le fil de la flèche qu'on suivait. */
.mf-case.mf-encours .mf-saisie { background: #fdf3d3; }
.mf-case.mf-encours .mf-saisie:focus { background: #ffe9a3; }

/* ── La case qui parle ── */
.mf-def {
  background: var(--mf-def-fond);
  color: var(--mf-def-encre);
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* ── Le corps suit la longueur ──
   Trois crans, et un quatrième quand la case est partagée en deux :
   une demi-case ne tient pas le même texte qu'une case entière. Le
   dessin pose la classe, la feuille donne la mesure. */
.mf-part { font-size: calc(var(--mf-case) * 0.19); }
.mf-part.mf-serre { font-size: calc(var(--mf-case) * 0.165); }
.mf-part.mf-tres-serre { font-size: calc(var(--mf-case) * 0.145); line-height: 1.02; }
.mf-deux .mf-part { font-size: calc(var(--mf-case) * 0.155); line-height: 1.04; }
.mf-deux .mf-part.mf-serre { font-size: calc(var(--mf-case) * 0.138); line-height: 1.0; }
.mf-deux .mf-part.mf-tres-serre { font-size: calc(var(--mf-case) * 0.122); line-height: 0.98; }

.mf-part {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  padding: calc(var(--mf-case) * 0.06);
  padding-right: calc(var(--mf-case) * 0.16);
  min-height: 0;
  overflow: hidden;
  hyphens: auto;
}

/* Deux définitions dans une case : un filet les sépare, sinon on lit
   une phrase qui n'existe pas. */
.mf-deux .mf-part + .mf-part {
  border-top: var(--mf-trait) solid rgba(0, 0, 0, 0.35);
}

.mf-texte { display: block; }

/* ── Les flèches ──
   Elles sont dessinées, pas écrites : un caractère de flèche change de
   dessin d'un appareil à l'autre, et sur la feuille imprimée il tombe
   parfois en carré vide. */
.mf-fleche {
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
.mf-vers-droite .mf-fleche {
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  border-width: calc(var(--mf-case) * 0.085) 0 calc(var(--mf-case) * 0.085) calc(var(--mf-case) * 0.10);
  border-color: transparent transparent transparent var(--mf-def-encre);
}
.mf-vers-bas .mf-fleche {
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  border-width: calc(var(--mf-case) * 0.10) calc(var(--mf-case) * 0.085) 0 calc(var(--mf-case) * 0.085);
  border-color: var(--mf-def-encre) transparent transparent transparent;
}

/* ── La case noire ──
   Une case-définition sans définition. Elle existe dans toutes les
   grilles du commerce ; elle sert de respiration. */
.mf-vide { background: var(--mf-encre); }

/* ── La page : la barre, l'état, les réponses ── */
.fl-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0 0.6rem;
}
.fl-etat {
  margin: 0 0 1rem;
  min-height: 1.4em;
  font-size: 0.92rem;
}
.fl-etat-bon { color: #1d7a45; font-weight: 600; }
.fl-etat-faux { color: #a8321e; }

.fl-grille-enveloppe {
  overflow-x: auto;
  padding: 0.2rem 0 0.6rem;
}

/* Une lettre fausse se montre sans gronder : on la voit, on la
   corrige, elle redevient normale dès qu'on retape. */
.mf-saisie.mf-faux { color: #a8321e; }
.mf-saisie.mf-bon { color: #1d7a45; }

.fl-solution {
  margin: 1.6rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 0.8rem;
}
.fl-solution summary {
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fl-solution[open] summary { margin-bottom: 0.8rem; }

.fl-autres { margin-top: 2.4rem; }
.fl-autres h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fl-autres ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.35rem 1.2rem; }

/* Sur la feuille, il ne reste que la grille : ni boutons, ni liens vers
   les autres grilles, ni solution ouverte par mégarde. */
@media print {
  .fl-barre, .fl-etat, .fl-autres, .breadcrumb { display: none !important; }
  .fl-solution { break-before: page; }
  .fl-grille-enveloppe { overflow: visible; }
}

/* ── Les solutions ── */
.mf-solution {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem 2rem;
  font-size: 0.9rem;
}
.mf-solution h3 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mf-solution ul { list-style: none; margin: 0; padding: 0; }
.mf-solution li { padding: 0.12rem 0; }
.mf-solution li b { font-weight: 700; }
.mf-solution li span { opacity: 0.7; }

/* ── Au doigt ──
   La case se calcule sur l'écran : neuf colonnes, plus les marges de la
   page, doivent tenir sans déborder. En dessous de 34 px, on ne vise
   plus la case avec le pouce. */
@media (max-width: 720px) {
  /* La page garde 28 pixels de marge de chaque côté : si on ne
     retire que 2rem, la grille dépasse son cadre et il faut la
     pousser du doigt pour voir la dernière colonne. On retire la
     vraie gouttière, plus une marge de sécurité.
     Le plancher de 34 pixels reste : en dessous, une définition ne
     se lit plus. Sur un très petit téléphone, la grille défile donc
     encore — c’est le bon compromis. */
  .mf-grille {
    --mf-case: min(44px, max(34px, calc((100vw - 3.75rem) / var(--mf-colonnes))));
  }
}

/* ── Sur la feuille ──
   L'encre grise d'un écran devient une tache sur une imprimante à jet :
   on repasse en traits noirs et fond blanc, et on interdit à la grille
   d'être coupée en deux par un saut de page. */
@media print {
  .mf-grille {
    --mf-case: 9mm;
    --mf-trait: 0.4mm;
    --mf-def-fond: #fff;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .mf-def { border-right-width: var(--mf-trait); }
  .mf-saisie { background: transparent !important; }
}