/* Styles du Memory */

.tableau-bord {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
}

.plateau {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 cartes par ligne → 4 × 4 = 16 cartes */
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

.carte-memory {
  aspect-ratio: 1;                /* des cartes bien carrées */
  padding: 0;
  font-size: 44px;
  line-height: 1;
  border: 2px solid var(--violet);
  border-radius: 14px;
  cursor: pointer;
  background-color: #b44cff;      /* une couleur « de secours » si le dégradé ne s'affiche pas */
  background-image: linear-gradient(135deg, var(--rose), var(--violet));   /* le dos de la carte */
  color: #fff;
  transition: transform 0.2s;
}
.carte-memory:hover { transform: scale(1.05); }
/* Chaque carte a 2 faces : le dos (❓) et le dessin.
   On CACHE le dessin avec visibility (et pas avec une couleur transparente :
   sur certains téléphones, les emojis gardent leurs couleurs et ça ne marchait pas). */
.carte-memory .face { visibility: hidden; display: none; }
.carte-memory .dos  { font-size: 0.6em; opacity: 0.85; }
.carte-memory.visible .face, .carte-memory.trouvee .face { visibility: visible; display: inline; }
.carte-memory.visible .dos,  .carte-memory.trouvee .dos  { display: none; }

.carte-memory.visible { background-image: none; background-color: #3a2d66; }
.carte-memory.trouvee { background-image: none; background-color: #1f5a3a; border-color: #3ddc84; cursor: default; }

/* Sur petit téléphone, des dessins un peu plus petits */
@media (max-width: 420px) { .carte-memory { font-size: 34px; } .plateau { gap: 7px; } }

.fin { font-size: 26px; font-weight: bold; text-align: center; min-height: 36px; }
#rejouer { border: none; cursor: pointer; color: var(--texte); }