/* Fidélité — carte de tampons d'un torréfacteur de quartier.
   Concept : la carte à tampons du comptoir, en version numérique — grain torréfié,
   tampon qui s'imprime à l'encre cuivre, code QR au dos de la carte. Style : atelier. */

.carte-fidelite{
  border-radius:var(--radius-m);background:linear-gradient(155deg,var(--ink),color-mix(in srgb, var(--ink) 70%, black));color:var(--paper);padding:20px;
  position:relative;overflow:hidden;margin-bottom:18px;
}
.carte-fidelite::before{
  content:'';position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--accent) 35%, transparent),transparent 70%);
}
.carte-fidelite .enseigne{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;opacity:.85}
.carte-fidelite .titulaire{font-family:var(--font-display);font-size:19px;font-weight:700;margin-top:4px}
.carte-fidelite .numero{font-size:11.5px;opacity:.7;margin-top:2px;letter-spacing:.05em;font-variant-numeric:tabular-nums}

.grille-tampons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 8px;position:relative;z-index:1}
.tampon-case{
  aspect-ratio:1;border-radius:var(--radius-s);border:1.6px dashed rgba(255,255,255,.35);display:flex;align-items:center;
  justify-content:center;transition:transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.tampon-case svg{width:20px;height:20px;color:rgba(255,255,255,.35)}
.tampon-case.rempli{background:color-mix(in srgb, var(--accent) 90%, transparent);border-color:transparent;transform:scale(1.04)}
.tampon-case.rempli svg{color:#fff}
.tampon-case.nouveau{animation:pop .4s cubic-bezier(.22,1,.36,1)}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1.04);opacity:1}}

.progres-texte{font-size:12.5px;opacity:.85;position:relative;z-index:1}
.progres-texte b{font-weight:800;font-variant-numeric:tabular-nums}

.bloc-qr{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px;margin-bottom:14px}
.bloc-qr .qr{width:72px;height:72px;flex-shrink:0;background:#fff;border-radius:var(--radius-s);padding:5px;border:1px solid var(--line)}
.bloc-qr .texte-qr p:first-child{font-weight:700;font-size:13.5px}
.bloc-qr .texte-qr p:last-child{font-size:11.5px;color:var(--muted);margin-top:2px}

.recompense{
  display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--paper);margin-bottom:10px;
}
.recompense .pic{
  width:42px;height:42px;border-radius:var(--radius-s);background:color-mix(in srgb, var(--line) 45%, var(--paper));display:flex;align-items:center;justify-content:center;
  color:var(--ink);flex-shrink:0;
}
.recompense .pic svg{width:20px;height:20px}
.recompense .infos{flex:1;min-width:0}
.recompense .titre{font-weight:700;font-size:14px}
.recompense .cout{font-size:11.5px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
.recompense button{flex-shrink:0}

.histo-ligne{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.histo-ligne:last-child{border-bottom:none}
.histo-ligne .pic{
  width:34px;height:34px;border-radius:var(--radius-s);background:color-mix(in srgb, var(--line) 45%, var(--paper));display:flex;align-items:center;justify-content:center;
  color:var(--ink);flex-shrink:0;
}
.histo-ligne .pic svg{width:16px;height:16px}
.histo-ligne .contenu{flex:1;min-width:0}
.histo-ligne .titre{font-size:13.5px;font-weight:700}
.histo-ligne .date{font-size:11.5px;color:var(--muted)}
.histo-ligne .valeur{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.scan-zone{
  border-radius:var(--radius-m);background:var(--ink);height:220px;position:relative;overflow:hidden;margin:14px 0;
  display:flex;align-items:center;justify-content:center;
}
.scan-zone .cadre{width:150px;height:150px;border:2px solid var(--accent);border-radius:var(--radius-m);position:relative}
.scan-zone .ligne{
  position:absolute;left:8%;right:8%;height:2px;background:var(--accent);top:10%;
  animation:balaie 1.8s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes balaie{0%,100%{top:10%}50%{top:88%}}
.scan-zone p{position:absolute;bottom:14px;color:var(--paper);font-size:12px;opacity:.75}

.fiche-client{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;text-align:center;margin:14px 0}
.avatar-init{
  width:44px;height:44px;border-radius:50%;background:color-mix(in srgb, var(--line) 45%, var(--paper));border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--ink);
}
.fiche-client .avatar-init{width:52px;height:52px;margin:0 auto 10px;font-size:18px}