/* Cartes à jouer de la Pyramide (écran et téléphones). La taille se règle avec --w. */
.carte {
  --w: 84px;
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * .1);
  background: linear-gradient(160deg, #ffffff, #eef0f6);
  color: #1e1b2e;
  box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .18) rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08);
  font-family: 'Outfit', system-ui, sans-serif;
  overflow: hidden;
  flex: none;
}
.carte.rouge { color: #e11d48; }
.c-coin {
  position: absolute;
  top: 5%;
  left: 7%;
  display: grid;
  justify-items: center;
  font-size: calc(var(--w) * .17);
  line-height: .95;
  font-weight: 700;
}
.c-coin b { font-weight: 900; letter-spacing: -.04em; }
.c-coin.bas { top: auto; left: auto; bottom: 5%; right: 7%; transform: rotate(180deg); }
.c-centre { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .46); line-height: 1; }
.carte.figure .c-centre { display: flex; align-items: center; justify-content: center; gap: 2%; font-size: calc(var(--w) * .3); }
.carte.figure .c-centre b { font-size: calc(var(--w) * .46); font-weight: 900; }
.carte.figure { background: linear-gradient(160deg, #fffaf0, #f6ecd8); }

/* Dos des cartes */
.carte.dos {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 14%, transparent 15%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 calc(var(--w) * .05), transparent 0 calc(var(--w) * .1)),
    linear-gradient(150deg, #7c3aed, #db2777);
  box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .18) rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--w) * .045) #fff;
}

/* Carte qui se retourne : .tourne > .dos + recto ; ajouter .vue pour montrer le recto */
.tourne { position: relative; width: var(--w); aspect-ratio: 5 / 7; perspective: 900px; flex: none; }
.tourne-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.34, 1.4, .64, 1); }
.tourne.vue .tourne-in { transform: rotateY(180deg); }
.tourne .carte { position: absolute; inset: 0; --w: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tourne .carte:not(.dos) { transform: rotateY(180deg); }
/* tailles du texte quand la carte suit son conteneur */
.tourne { container-type: inline-size; }
.tourne .c-coin { font-size: 17cqw; }
.tourne .c-centre { font-size: 46cqw; }
.tourne .carte.figure .c-centre { font-size: 30cqw; }
.tourne .carte.figure .c-centre b { font-size: 46cqw; }
.tourne .carte { border-radius: 10cqw; box-shadow: 0 1.2cqw 6cqw rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tourne .carte.dos { box-shadow: 0 1.2cqw 6cqw rgba(0, 0, 0, .4), inset 0 0 0 4.5cqw #fff; }