/* ═══════════════════════════════════════════════════════════════
   Moirans Pratique — Mon portefeuille (js/portefeuille.js)
   Affiché dans Perso (interface v2). Classes préfixées « pf- ».
   ═══════════════════════════════════════════════════════════════ */

.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Carte (visuel) ───────────────────────────────────────────── */
.pf-carte {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(0,0,0,.3);
  isolation: isolate;
}
.pf-carte::after {               /* reflet */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 42%);
  pointer-events: none;
}
.pf-carte-motif {                /* grande icône en filigrane (modèle illustré) */
  position: absolute;
  right: -8%; bottom: -18%;
  width: 62%; aspect-ratio: 1;
  opacity: .17;
  z-index: -1;
}
.pf-carte-motif .ico { width: 100%; height: 100%; }
.pf-carte--modele::before {      /* motif de cercles du modèle */
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 120%, rgba(255,255,255,.18) 0 22%, transparent 22.5%),
    radial-gradient(circle at 105% -10%, rgba(255,255,255,.14) 0 30%, transparent 30.5%);
}
.pf-carte-ico {
  position: absolute; top: 9%; left: 7%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.35);
}
.pf-carte-ico .ico { width: 17px; height: 17px; vertical-align: 0; }
.pf-carte--grande .pf-carte-ico .ico { width: 25px; height: 25px; }
.pf-carte-nom {
  position: absolute; left: 7%; right: 7%; top: 44%;
  font-family: var(--font-d);
  font-size: 13.5px; font-weight: 600; line-height: 1.15;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.pf-carte-bas {
  position: absolute; left: 7%; right: 7%; bottom: 8%;
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 10px; opacity: .85;
  white-space: nowrap; overflow: hidden;
}
.pf-carte-fin { font-family: var(--font-m); letter-spacing: .04em; }
.pf-carte--grande { border-radius: 22px; max-width: 360px; margin: 0 auto; }
.pf-carte--grande .pf-carte-nom { font-size: 22px; top: 42%; }
.pf-carte--grande .pf-carte-ico { width: 44px; height: 44px; }
.pf-carte--grande .pf-carte-bas { font-size: 13px; }

/* ── Liste dans Perso ─────────────────────────────────────────── */
#pf-racine { margin-top: 16px; }
.pf-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-vignette { display: block; padding: 0; border: 0; background: none; border-radius: 16px; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.pf-vignette:active { transform: scale(.96); }
.pf-filtres { display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px 12px; padding: 2px; scrollbar-width: none; }
.pf-filtres::-webkit-scrollbar { display: none; }
.pf-filtres button {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--text2);
  font-size: 12.5px; font-weight: 600;
}
.pf-filtres button[aria-pressed="true"] { background: #fff; color: #141220; border-color: #fff; }
.pf-vide {
  padding: 18px 14px;
  border-radius: 20px;
  border: 1px dashed rgba(255,255,255,.26);
  color: var(--text2);
  font-size: 13.5px; line-height: 1.5;
  text-align: center;
}
.pf-vide .ico { width: 34px; height: 34px; opacity: .8; margin-bottom: 6px; }
.pf-vide p { margin: 0; }
.pf-ajouter {
  width: 100%;
  margin-top: 14px;
  min-height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: var(--v2-accent, var(--green));
  color: #fff;
  font-size: 15px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px var(--v2-accent-glow, rgba(0,0,0,.3));
}
.pf-ajouter:active { transform: scale(.98); }
.pf-lien-sync, .pf-bandeau {
  width: 100%;
  margin-top: 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-align: left;
  font-size: 13.5px;
}
.pf-lien-sync > .ico, .pf-bandeau > .ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text2); }
.pf-lien-sync span:not(.prefs-link-chev), .pf-bandeau span { flex: 1; min-width: 0; }
.pf-lien-sync small, .pf-bandeau small { display: block; color: var(--text2); font-size: 12px; margin-top: 2px; }
.pf-bandeau { margin: 0 0 12px; border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.12); }
.pf-bandeau > .ico { color: #fbbf24; }

/* ── Feuille (panneau du bas) ─────────────────────────────────── */
.pf-feuille { position: fixed; inset: 0; z-index: 3500; pointer-events: none; }
.pf-feuille.open { pointer-events: auto; }
.pf-fond { position: absolute; inset: 0; background: rgba(4,5,12,.55); opacity: 0; transition: opacity .25s; }
.pf-feuille.open .pf-fond { opacity: 1; }
.pf-panneau {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 32px 32px 0 0;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: 0;
  background: rgba(20,20,36,.86);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 -18px 50px rgba(0,0,0,.45);
  color: var(--text);
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.pf-feuille.open .pf-panneau { transform: none; }
html.v2-eco .pf-panneau { background: #17172a; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.pf-ouvert { overflow: hidden; }

/* Bouton fermer : vrai cercle, vraie croix (deux traits) */
.pf-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: var(--text);
  z-index: 2;
}
.pf-croix { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.pf-titre { margin: 2px 48px 16px 2px; font-family: var(--font-d); font-size: 22px; font-weight: 600; }
.pf-texte { margin: 0 0 14px; color: var(--text2); font-size: 14px; line-height: 1.55; }
.pf-texte .ico { color: var(--green); }
.pf-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: var(--text2); font-size: 12.5px; line-height: 1.5; }
.pf-astuce { margin: 14px 0 0; color: var(--text3); font-size: 12.5px; text-align: center; }
.pf-optionnel {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: 16px;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.3);
  color: var(--text); font-size: 13.5px; line-height: 1.5;
}
.pf-optionnel > .ico { flex: 0 0 auto; width: 20px; height: 20px; color: #4ade80; margin-top: 1px; }
.pf-erreur { margin: 0; color: #fca5a5; font-size: 13px; }

.pf-choix { display: flex; flex-direction: column; gap: 10px; }
.pf-choix button {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-align: left;
}
.pf-choix button > .ico {
  width: 46px; height: 46px; flex: 0 0 46px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--v2-accent, var(--green));
  color: #fff;
}
.pf-choix strong { display: block; font-size: 15px; }
.pf-choix small { display: block; color: var(--text2); font-size: 12.5px; margin-top: 1px; }

.pf-camera { position: relative; overflow: hidden; border-radius: 24px; background: #000; aspect-ratio: 3 / 4; max-height: 52dvh; margin: 0 auto; }
.pf-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-viseur {
  position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%;
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.85);
}
.pf-nfc { display: grid; place-items: center; height: 140px; }
.pf-nfc .ico { width: 72px; height: 72px; color: var(--v2-accent, var(--green)); animation: pf-onde 1.6s ease-in-out infinite; }
@keyframes pf-onde { 50% { transform: scale(1.12); opacity: .7; } }

/* Formulaire */
.pf-apercu { margin: 0 auto 16px; max-width: 280px; }
.pf-form { display: flex; flex-direction: column; gap: 12px; }
.pf-form label { display: flex; flex-direction: column; gap: 5px; color: var(--text2); font-size: 12.5px; font-weight: 600; }
.pf-form input:not([type="radio"]), .pf-form select {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font: inherit;
  font-size: 16px;         /* évite le zoom d'iOS */
  font-weight: 400;
}
.pf-form select option { color: #111; }
.pf-fonds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.pf-fonds legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--text2); font-size: 12.5px; font-weight: 600; }
.pf-form .pf-pastille {
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  cursor: pointer;
}
.pf-form .pf-pastille--modele {
  width: auto; flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
  color: var(--text); font-size: 12px;
}
.pf-pastille input { position: absolute; opacity: 0; pointer-events: none; }
.pf-pastille:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Boutons */
.pf-actions { display: flex; gap: 10px; margin-top: 16px; }
.pf-btn {
  flex: 1;
  min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 14px; font-weight: 600;
  width: 100%;
}
.pf-actions .pf-btn { width: auto; }
.pf-btn--plein { background: var(--v2-accent, var(--green)); border-color: rgba(255,255,255,.3); color: #fff; margin-top: 4px; }
.pf-btn--danger { color: #fca5a5; border-color: rgba(248,113,113,.35); }
.pf-btn:disabled { opacity: .6; }
.pf-camera + .pf-astuce + .pf-btn { margin-top: 12px; }

/* Affichage d'une carte */
.pf-affichage { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; }
.pf-code {
  display: grid; place-items: center;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  min-height: 120px;
}
.pf-code svg { width: 100%; max-height: 150px; }
.pf-code canvas { width: min(240px, 70vw) !important; height: auto !important; }
.pf-code[hidden] { display: none; }
.pf-numero { text-align: center; font-family: var(--font-m); font-size: 18px; letter-spacing: .08em; word-break: break-all; }

/* Code redessinable : le code tout en haut de l'écran (c'est cette
   partie qu'on tend à la personne qui scanne), la carte en dessous. */
.pf-panneau--affichage { min-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)); }
.pf-affichage--code { padding-top: 46px; }
.pf-affichage--code .pf-code { min-height: 150px; }
.pf-affichage--code .pf-code svg { max-height: 170px; }
.pf-carte-sous { margin-top: 6px; }
.pf-carte-sous .pf-carte--grande { max-width: 260px; }
.pf-carte-sous .pf-carte--grande .pf-carte-nom { font-size: 18px; }