/* Lumïe Fidélité — carte de fidélité à tampons et cartes à gratter (Mon compte › Ma fidélité).
   Couleurs du thème Lumïe, avec des valeurs de repli si le thème change. */

.fidelite {
  --f-framboise: var(--framboise, #E20B7E);
  --f-or: var(--or, #A09005);
  --f-or-clair: var(--or-clair, #F2DC8A);
  --f-cadeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5v8h14v-8M12 8.5v12M12 8.5c-1.5-3.5-5.5-4-5.5-1.5 0 1.5 2.5 1.5 5.5 1.5zM12 8.5c1.5-3.5 5.5-4 5.5-1.5 0 1.5-2.5 1.5-5.5 1.5z'/%3E%3C/svg%3E");
  color: var(--f-or);
}
.fidelite .fidelite-intro { margin: 0 0 18px; }

/* la carte à tampons : 20 cases, un cadeau toutes les 4 */
.fidelite-tampons {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 24px;
  list-style: none;
  border: 1px dashed rgba(226, 11, 126, .4);
  border-radius: 14px;
  background: linear-gradient(135deg, #FDEAF4, #FFF8F3);
}
.fidelite-tampons .tampon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  border: 1.5px dashed rgba(226, 11, 126, .45);
  border-radius: 50%;
  background: #fff;
  color: rgba(226, 11, 126, .55);
  font-size: 13px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.fidelite-tampons .tampon.est-rempli { border: 1.5px solid var(--f-framboise); background: var(--f-framboise); color: #fff; }
.fidelite-tampons .tampon.est-rempli .tampon-numero { font-size: 0; }
.fidelite-tampons .tampon.est-rempli .tampon-numero::before { content: '✦'; font-size: 15px; }
.fidelite-tampons .tampon.est-palier { border-color: var(--f-or); color: var(--f-or); }
.fidelite-tampons .tampon.est-palier.est-rempli { border: 1.5px solid #C59E34; background: linear-gradient(135deg, #E2BF5C, #F7E7A1 45%, #C59E34); color: #6E4208; }
.fidelite-tampons .tampon-cadeau {
  width: 52%;
  height: 52%;
  background: currentColor;
  -webkit-mask: var(--f-cadeau) center / contain no-repeat;
  mask: var(--f-cadeau) center / contain no-repeat;
}
@media (hover: hover) { .fidelite-tampons .tampon:hover { transform: scale(1.08); } }

.fidelite .fidelite-prochaine { margin: 0 0 34px; color: var(--f-framboise); font-size: 17px; }
.fidelite .fidelite-vide { margin: 0; }
.fidelite .fidelite-regles { margin: 30px 0 0; font-size: 14px; }

/* les cartes à gratter */
.cartes-a-gratter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte-a-gratter {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--f-framboise);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 40px -30px rgba(150, 20, 80, .6);
  transition: box-shadow .4s;
}
.carte-a-gratter.est-en-avant { box-shadow: 0 0 0 4px rgba(242, 220, 138, .9), 0 22px 40px -26px rgba(150, 20, 80, .7); }
.carte-zone { position: relative; }
.carte-dessous {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 24px 18px;
  background: radial-gradient(circle at 50% 0%, #FDEAF4, #fff 72%);
  text-align: center;
}
.carte-dessous p { margin: 0; }
/* gratter ne sélectionne pas le texte ; le code, lui, se sélectionne d'un clic */
.carte-dessous { -webkit-user-select: none; user-select: none; }
.carte-dessous .carte-code strong { -webkit-user-select: all; user-select: all; }
.carte-dessous .carte-titre { font-family: var(--script, 'Pinyon Script', cursive); font-size: 34px; line-height: 1.15; color: var(--f-framboise); }
.carte-dessous .carte-detail { max-width: 26em; font-size: 13.5px; line-height: 1.55; }
.carte-dessous .carte-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.carte-dessous .carte-code strong { padding: 4px 10px; border: 1px dashed var(--f-framboise); border-radius: 6px; color: var(--f-framboise); font-weight: 500; letter-spacing: .12em; }
.carte-a-gratter .carte-copier,
.carte-a-gratter .carte-reveler {
  padding: 4px 10px;
  border: 1px solid rgba(226, 11, 126, .4);
  border-radius: 999px;
  background: #fff;
  color: var(--f-framboise);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.carte-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;   /* sur téléphone, gratter ne fait pas défiler la page */
  transition: opacity .7s;
}
.carte-surface:active { cursor: grabbing; }
.carte-a-gratter.est-grattee .carte-surface { opacity: 0; pointer-events: none; }
.carte-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(226, 11, 126, .2);
  background: #FFFEF8;
  font-size: 12.5px;
}
.carte-statut.est-actif { color: var(--f-framboise); }
.carte-statut.est-inactif { color: #8A8170; text-decoration: line-through; }
.carte-a-gratter.est-grattee .carte-reveler { display: none; }
/* révélation : le cadeau apparaît dans un éclat */
.vient-d-etre-grattee .carte-titre { animation: lumie-eclat 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lumie-eclat { 0% { transform: scale(.82); opacity: .2; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }

@media (max-width: 600px) {
  .fidelite-tampons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; }
  .carte-dessous .carte-titre { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-surface, .fidelite-tampons .tampon { transition: none; }
  .vient-d-etre-grattee .carte-titre { animation: none; }
}