/* corrections.css
   - Fix responsive layout (évite le chevauchement des cartes)
   - Ajoute les classes de couleurs du moteur PHP (FacilireColorizer)
*/

/* Police (sécurité : déjà définie dans le CSS principal, mais on force au besoin) */
body {
  font-family: 'FredokaOne', cursive !important;
}

/* ✅ Empêche le zoom/hover de faire chevaucher les cartes sur écrans tactiles */
@media (hover: none) {
  .memory-card:hover {
    transform: none;
  }
}

/* ✅ Les cartes doivent suivre la largeur des cellules de la grille Tailwind */
.memory-card {
  width: 100% !important;
  height: auto !important;
  position: relative;
  aspect-ratio: 1/1;
  max-width: none !important;
  max-height: none !important;
}

/* Petite marge interne pour éviter que le texte touche les bords */
.word-text {
  padding: 0.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

/* Les lettres sont rendues une à une (React). Assurer un rendu stable. */
.word-text > span {
  display: inline-block;
}

/* =====================
   Couleurs moteur PHP
   ===================== */

/* Voyelles */
.c-rouge {
  color: #dc2626;
  font-weight: 700;
}

/* Consonnes */
.c-bleu {
  color: #1d4ed8;
  font-weight: 700;
}

/* Groupes (digrammes/trigrammes, etc.) */
.c-vert {
  color: #16a34a;
  font-weight: 700;
}

/* Variante "sapin" (vert plus sombre) */
.c-vert-sapin {
  color: #15803d;
  font-weight: 700;
}

/* Lettres muettes / grisé */
.c-gris {
  color: #6b7280;
  font-weight: 700;
}

/* Fallback */
.c-noir {
  color: #111827;
  font-weight: 700;
}

/* Wrapper éventuel renvoyé par l’engine PHP */
.mot {
  display: inline-block;
}

/* Fallback si aspect-ratio n’est pas supporté (évite des cartes à hauteur 0 => chevauchement) */
@supports not (aspect-ratio: 1 / 1) {
  .memory-card {
    height: 0 !important;
    padding-bottom: 100% !important;
  }
  .memory-card-inner {
    position: absolute !important;
    inset: 0 !important;
  }
}