/* Carte de fidélité Queen Nails — styles partagés (port du handoff « vraie version »).
   Sert sur l'ACCUEIL (iPhone plat). kards.html garde sa copie inline, préfixée #kards-demo. */
  /* ===== VRAIE carte Queen Nails (handoff) : dessinée à 412px de large puis scalée pour remplir l'écran ===== */
    .qn2{ --a:#C9897B; --a2:#E0A89A; --gold:#D9A38F; --tx:#2E2622; --txs:#8A766E;
    position:relative; width:100%; min-height:100%; display:flex; flex-direction:column; overflow:hidden;
    font-family:'Jost',sans-serif; background-image:url('img/qn3-bg.webp'); background-size:cover; background-position:42% 28%; }
    .qn2-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(165deg, rgba(255,253,251,.62) 0%, rgba(248,228,222,.34) 48%, rgba(242,212,206,.20) 78%, rgba(251,244,240,.32) 100%); }
    .qn2-in{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding:24px 20px 26px; }
    .qn2-head{ display:flex; flex-direction:column; align-items:center; gap:12px; }
    .qn2-logo-w{ width:100%; padding:8px 16px 4px; display:flex; justify-content:center; }
    .qn2-logo{ width:72%; max-width:248px; height:auto; display:block; filter:drop-shadow(0 4px 12px rgba(150,100,90,.28)); }
    .qn2-kick{ display:flex; align-items:center; gap:10px; }
    .qn2-kl{ height:1px; width:30px; background:linear-gradient(90deg, transparent, var(--gold)); }
    .qn2-kl.r{ background:linear-gradient(90deg, var(--gold), transparent); }
    .qn2-kt{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color:#7c6a62; }
    .qn2-greet{ padding-left:4px; }
    .qn2-bj{ font-size:10.5px; letter-spacing:4px; text-transform:uppercase; color:var(--a); font-weight:500; margin-bottom:-4px; }
    .qn2-name{ font-family:'Pinyon Script',cursive; font-size:58px; font-weight:400; color:var(--tx); line-height:1.06; letter-spacing:.5px; padding-bottom:4px; }
    .qn2-sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15.5px; color:var(--txs); margin-top:4px; font-weight:500; letter-spacing:.2px; }
  /* MATIÈRE DU MÉTIER (design final) : marbre rosé veiné d'or + voile clair, au lieu du blanc
     translucide. Bonus : ça supprime le backdrop-filter, connu pour les carrés fantômes iOS. */
    .qn2-panel{ position:relative; border-radius:22px; padding:18px 18px 20px;
    background-image:linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,248,246,.30)), url('img/qn3-panel.webp');
    background-size:100% 100%, 100% 100%; background-position:center, center;
    border:1px solid rgba(217,163,143,.5); box-shadow:0 14px 34px -18px rgba(150,100,90,.45), inset 0 1px 0 rgba(255,255,255,.6); }
    .qn2-pb{ position:absolute; inset:0; border-radius:22px; padding:1px; background:linear-gradient(115deg,#F2D4CE,#E8C4B8,#D9A38F,#F2D4CE,#E8C4B8,#D9A38F); background-size:300% 100%; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; z-index:2; animation:qn2-travel 9s linear infinite; }
    .qn2-ph{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
    .qn2-pt{ font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--tx); white-space:nowrap; }
    .qn2-count{ font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:700; line-height:normal; white-space:nowrap; filter:drop-shadow(0 0 5px rgba(224,168,154,.55)); background:linear-gradient(120deg,var(--a),var(--a2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* 10 tampons : 5 colonnes → 2 lignes PLEINES. (En 4 colonnes la dernière ligne
     n'aurait que 2 cases sur 4 — moche.) */
    .qn2-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }
    .qn2-stamp{ position:relative; aspect-ratio:1; overflow:visible; }
    .qn2-se{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(160,123,110,.6); display:flex; align-items:center; justify-content:center; color:rgba(138,118,110,.85); font-size:14px; background:rgba(255,255,255,.25); }
  /* Médaillon rempli = le VRAI visuel du design (vernis nacré), à 126 % : il DÉBORDE de sa
     case pour paraître plus gros que le cercle pointillé. max-width:none obligatoire. */
    .qn2-sf{ position:absolute; inset:0; display:none; }
    .qn2-sf img{ position:absolute; top:50%; left:50%; width:126%; height:126%;
    max-width:none; max-height:none; object-fit:contain; transform:translate(-50%,-47%);
    filter:drop-shadow(0 5px 11px rgba(201,137,123,.5)); }
    .qn2-stamp.on .qn2-sf{ display:block; }   .qn2-stamp.on .qn2-se{ display:none; }
    .qn2-reward{ position:relative; overflow:hidden; border-radius:22px; padding:20px 18px;
    background-image:linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,248,246,.30)), url('img/qn3-panel-plain.webp');
    background-size:100% 100%, 100% 100%; background-position:center, center;
    border:1px solid rgba(217,163,143,.45); box-shadow:0 14px 34px -18px rgba(150,100,90,.4); display:flex; align-items:center; gap:14px; }
  /* icône récompense = le visuel du design (plus de carré autour, comme la vraie carte) */
    .qn2-ric{ flex:none; width:56px; height:56px; display:block; }
    .qn2-ric img{ width:56px; height:56px; object-fit:contain; display:block; filter:drop-shadow(0 5px 10px rgba(201,137,123,.35)); }
    .qn2-rk{ font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--txs); font-weight:600; margin-bottom:3px; }
    .qn2-rt{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--tx); line-height:1.18; }
  /* ⚠️ le voile était bien plus opaque ici (.82/.72) que sur l'état "Bientôt" (.42/.30) →
     le marbre devenait presque invisible une fois la carte gagnée. Même voile que l'état
     normal : le marbre reste visible à l'identique, gagné ou pas. */
    .qn2.won .qn2-reward{ background-image:linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,248,246,.30)), url('img/qn3-panel-plain.webp');
    background-size:100% 100%, 100% 100%; background-position:center, center;
    border:1px solid rgba(217,163,143,.85); animation:qn2-halo 3.2s ease-in-out infinite; }
    .qn2.won .qn2-ric img{ filter:drop-shadow(0 5px 12px rgba(201,137,123,.6)); }
    .qn2.won .qn2-rk{ color:var(--a); }
  /* ===== BAS DE CARTE — conforme à la carte en production : le QR est NU (aucun panneau
     autour, aucun texte), suivi des deux badges Wallet OFFICIELS à hauteur identique. ===== */
    .qn2-qr{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:2px; }
    .qn2-qrbox{ background:#fff; border:1px solid var(--gold); border-radius:16px; padding:10px;
    box-shadow:0 8px 20px -10px rgba(150,100,90,.5); width:124px; height:124px; }
    .qn2-wallet{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; margin-top:2px; }
    /* artworks officiels Apple/Google : hauteur identique, jamais de cadre ajouté ni de déformation */
    .qn2-wbtn{ height:44px; width:auto; flex:none; display:block; }
  @keyframes qn2-travel{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
  @keyframes qn2-halo{0%,100%{box-shadow:0 0 0 1px rgba(217,163,143,.55), 0 18px 44px -10px rgba(201,137,123,.5), 0 0 46px -8px rgba(224,168,154,.55);}50%{box-shadow:0 0 0 1px rgba(217,163,143,.8), 0 18px 50px -8px rgba(201,137,123,.7), 0 0 78px 2px rgba(224,168,154,.85);}}

/* ===== Écran de FÉLICITATIONS (port du handoff : à 10/10 la carte est REMPLACÉE par cet écran) ===== */
  .qn2-celeb{ position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none;
    background:linear-gradient(165deg, rgba(255,253,251,.90) 0%, rgba(248,228,222,.86) 48%, rgba(251,244,240,.92) 100%);
    transition:opacity .22s ease; }
  .qn2.celebre .qn2-celeb{ opacity:1; }
  .qn2-in{ transition:opacity .35s ease; }
  .qn2.celebre .qn2-in{ opacity:0; pointer-events:none; }
  .qn2-celeb-in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:6px; padding:40px 24px; }
  .qn2-celeb-logo{ width:62%; max-width:230px; height:auto; opacity:0; transform:scale(.6);
    filter:drop-shadow(0 4px 12px rgba(150,100,90,.28)); }
  .qn2.celebre .qn2-celeb-logo{ animation:qn2-pop .5s cubic-bezier(.2,.85,.3,1.25) .08s both; }
  @keyframes qn2-pop{ 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
  .qn2-celeb-fel{ font-weight:500; letter-spacing:.32em; font-size:10.5px; color:var(--a);
    text-transform:uppercase; margin-top:18px; }
  .qn2-celeb-name{ font-family:'Pinyon Script',cursive; font-weight:400; font-size:66px; line-height:.95; color:var(--tx); }
  .qn2-celeb-win{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:26px; color:var(--tx); }
  /* le halo qui pulse derrière la récompense */
  .qn2-celeb-halo{ position:relative; height:52px; width:100%; }
  .qn2-celeb-halo::before{ content:''; position:absolute; top:50%; left:50%; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(224,168,154,.55) 0%, rgba(224,168,154,0) 65%);
    transform:translate(-50%,-50%); animation:qn2-burst 2.6s ease-out infinite; }
  @keyframes qn2-burst{ 0%{transform:translate(-50%,-50%) scale(.6);opacity:.9} 70%,100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
  .qn2-celeb-rew{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; margin-top:4px;
    background:linear-gradient(120deg,var(--a),var(--a2)); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 6px rgba(224,168,154,.5)); }
  .qn2-celeb-txt{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:15.5px;
    color:var(--txs); max-width:260px; line-height:1.35; margin-top:8px; }
  /* confettis (palette du handoff Queen Nails) */
  /* Les confettis couvrent TOUT l'écran du téléphone et tombent du haut vers le bas.
     La distance de chute (--chute) est posée par le JS d'après la hauteur réelle de la carte :
     en %, translateY se calcule sur la hauteur du confetti lui-même → ils ne descendaient que
     d'une centaine de pixels et s'entassaient en haut. */
  .qn2-conf{ position:absolute; inset:0; z-index:7; pointer-events:none; overflow:hidden; }
  .qn2-conf i{ position:absolute; top:0; display:block; opacity:0; will-change:transform,opacity; }
  .qn2.celebre .qn2-conf i{ animation:qn2-fall var(--d,3s) linear var(--dl,0s) forwards; }
  @keyframes qn2-fall{
    0%{ transform:translateY(var(--depart,-110px)) rotate(0deg); opacity:1; }
    100%{ transform:translateY(var(--chute,1010px)) rotate(760deg); opacity:.85; } }