/* ==========================================================================
   Clé des Anges — Tirage payant « Les 7 Familles planétaires » (belline.css)
   Dépend de tirage.css (tokens + cartes/flip) et de tarot.css (pioche défilable
   .cda-tarot-pioche + conteneur .cda-tarot-slot-carte réutilisés). N'ajoute que
   la grille des 7 familles et l'habillage Belline. Scopé sous .cda-belline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grille des 7 familles planétaires (flex wrap, responsive)
   -------------------------------------------------------------------------- */
.cda-belline-familles {
  --cda-fam-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cda-fam-gap);
  width: 100%;
  margin: 10px auto 26px;
}

/* 4 cartes par ligne qui remplissent la largeur du conteneur (puis 3 en ligne 2). */
.cda-belline-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: calc((100% - 3 * var(--cda-fam-gap)) / 4);
}

/* Domaine de vie = titre mis en avant (choix : domaine devant la planète).
   Hauteur réservée (jusqu'à 3 lignes) + texte aligné en bas : toutes les cartes
   d'une même ligne démarrent alors au MÊME niveau, quel que soit le nombre de
   lignes du titre. */
.cda-belline-slot-domaine {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.6em;
  font-family: var(--font-serif);
  font-size: clamp(.82rem, 2.1vw, .95rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--cda-heading);
}

/* Planète = petit accent discret sous le domaine. */
.cda-belline-slot-planete {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--cda-muted);
  text-align: center;
}

.cda-belline-symbole {
  font-size: .9rem;
  color: var(--cda-accent-text);
}

/* Conteneur de la carte : réutilise .cda-tarot-slot-carte (tarot.css) pour le
   cadre en pointillés ; ici on gère seulement la carte injectée. */
.cda-belline-slot .cda-carte {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: auto;
}

.cda-belline-slot .cda-carte.is-flipped .cda-carte-inner {
  transform: rotateY(180deg);
}

.cda-belline-slot-nom {
  font-family: var(--font-serif);
  font-size: clamp(.84rem, 2vw, .95rem);
  line-height: 1.2;
  text-align: center;
  color: var(--cda-heading);
}

.cda-belline-slot-nom .cda-belline-mot {
  display: block;
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--cda-muted);
}

/* Résultat, interprétation, boutons, domaines : tout est dans le socle
   (tirage.css). Aucune redéfinition ici — voir l'en-tête de ce fichier. */

/* --------------------------------------------------------------------------
   2. Petits écrans : 2 cartes par rangée, bien grandes
   -------------------------------------------------------------------------- */
@media (max-width: 440px) {
  /* 2 cartes par ligne sur mobile, bien grandes. */
  .cda-belline-slot { width: calc((100% - var(--cda-fam-gap)) / 2); }
}