/* Tirer des cartes — feuille propre à l'outil. Le socle partagé
   (/commun/outil.css et /commun/formulaire.css) est chargé avant elle. */

select { padding: 6px 8px; }

.resultat { margin-top: 4px; }

/* --- Les cartes ------------------------------------------------------------ */

.cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 90px;
  background: #e9eef0;
  color: #15191b;
  border-radius: 7px;
  box-shadow: 0 1px 0 #000;
  font-weight: 600;
}

.carte.rouge { color: #c62f2f; }
.carte.atout { background: #f3ead2; }

.carte .coin {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.85rem;
  line-height: 1;
}

.carte.atout .coin { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.carte .centre { font-size: 1.9rem; line-height: 1; }
.carte.atout .centre { font-size: 1.6rem; }
.carte.speciale .centre { font-size: 0.7rem; letter-spacing: 0.06em; }

.cartes.petites { justify-content: flex-start; gap: 5px; }
.cartes.petites .carte { width: 34px; height: 48px; border-radius: 4px; }
.cartes.petites .coin { top: 2px; left: 3px; font-size: 0.6rem; }
.cartes.petites .atout .coin { font-size: 0.45rem; }
.cartes.petites .centre { font-size: 1.05rem; }
.cartes.petites .speciale .centre { font-size: 0.45rem; }

/* --- Tirages précédents ---------------------------------------------------- */

.precedents { margin-top: 24px; }

.precedents h2 {
  margin: 0 0 8px;
  color: var(--discret);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.precedents ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }