/* ==========================================================================
   Patelin : Amis, « Je cherche », dons, échanges, colis de Lucette (js/friends.js).
   Même direction : scène de nuit, papiers officiels, un seul accent (rouge panneau).
   Matières propres à cette vue : carte postale guillochée, timbre dentelé, tampon
   d'oblitération, papier kraft et ficelle (le colis de Lucette).
   Préfixe : fr-. Couches : colis 64 (sous les éclats 66 et les toasts 70).
   ========================================================================== */

:root {
  --kraft: oklch(0.64 0.072 66);
  --kraft-hi: oklch(0.72 0.07 72);
  --kraft-lo: oklch(0.52 0.066 60);
  --kraft-ink: oklch(0.33 0.05 55);
  --twine: oklch(0.9 0.035 85);
  --twine-lo: oklch(0.74 0.05 75);
  --post-ink: oklch(0.36 0.06 262);
}

/* ---------------------------------------------------------------- QR code, code en cases */
.fr-qr { display: block; width: 100%; height: auto; }
.fr-qr__bg { fill: oklch(0.99 0.003 95); }
.fr-qr__fg { fill: var(--sign-ink); }

.fr-codebox { display: inline-flex; gap: 4px; }
.fr-codebox span {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.95em;
  border: 1.5px solid oklch(0.3 0.02 262 / 0.75); border-radius: 4px; background: oklch(1 0 0 / 0.75);
  font: 600 17px/1 var(--font-mono); color: var(--sign-ink);
}
.fr-codebox.is-dark span { border-color: var(--line); background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------- timbre et tampon */
.fr-stamp {
  position: relative; flex: none; display: inline-grid; width: 62px; aspect-ratio: 0.84; padding: 5px;
  background: oklch(0.98 0.008 90);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 2.3px, #000 2.7px) -4px -4px / 8px 8px round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 2.3px, #000 2.7px) -4px -4px / 8px 8px round;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
  transform: rotate(3deg);
}
.fr-stamp__in {
  display: grid; place-items: center; align-content: center; gap: 4px;
  background:
    repeating-radial-gradient(circle at 50% 120%, transparent 0 3px, oklch(0.55 0.08 245 / 0.14) 3px 4px),
    oklch(0.9 0.035 245);
  border: 1px solid oklch(0.55 0.08 245 / 0.4);
}
.fr-stamp .sign { font-size: 8.5px; box-shadow: none; }
.fr-stamp .sign__in { padding: 0.2em 0.4em 0.12em; border-width: 0.18em; }
.fr-stamp__v { font: 800 9px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.38 0.08 245); }

.fr-postmark {
  position: absolute; display: grid; place-items: center; align-content: center; gap: 1px;
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid var(--post-ink); box-shadow: inset 0 0 0 3px oklch(1 0 0 / 0), inset 0 0 0 4.5px var(--post-ink);
  color: var(--post-ink); opacity: 0.62; transform: rotate(-14deg); pointer-events: none;
  mix-blend-mode: multiply;
}
.fr-postmark__town { max-width: 58px; overflow: hidden; white-space: nowrap; text-overflow: clip; font: 800 9px/1 var(--font-display); letter-spacing: 0.08em; }
.fr-postmark__date { font: 600 10px/1 var(--font-mono); }
.fr-postmark__waves {
  position: absolute; left: 66px; top: 26px; width: 74px; height: 22px;
  background: repeating-linear-gradient(180deg, var(--post-ink) 0 2px, transparent 2px 7px);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent);
}

/* ---------------------------------------------------------------- mise en page de la vue */
.fr-hero { display: grid; }
.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-head .fb-title { margin-top: 0; }
.fr-loading { display: grid; gap: 14px; margin-top: 28px; }
.fr-grid { margin-top: 20px; min-width: 0; }
.fr-main, .fr-side { min-width: 0; }
.fr-main > *, .fr-side > * { min-width: 0; }

@media (max-width: 1023px) {
  .fr-grid { display: flex; flex-direction: column; gap: 18px; }
  .fr-main, .fr-side { display: contents; }
  .fr-alerts { order: 0; }
  .fr-invite { order: 1; }
  .fr-todo { order: 2; }
  .fr-tabs { order: 3; }
  .fr-panel { order: 4; }
  .fr-side__box { order: 5; }
  .fr-today { order: 6; }
  .fr-tabs { display: flex; width: 100%; }
  .fr-tabs .fb-seg__btn { flex: 1; justify-content: center; padding: 0 10px; }
}
@media (min-width: 1024px) {
  .fr-head { justify-content: flex-start; gap: 16px; }
  .fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 18px 44px; align-items: start; }
  .fr-main { display: grid; gap: 18px; }
  .fr-side { display: grid; gap: 18px; }
  .fr-tabs { justify-self: start; }
}

/* ---------------------------------------------------------------- bandeaux */
.fr-alerts { display: grid; gap: 10px; }
.fr-alerts:empty { display: none; }
.fr-alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start;
  padding: 14px; border-radius: var(--r-panel); background: var(--bg-elev); border: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink-2); text-wrap: pretty;
}
.fr-alert b { color: var(--ink); font-weight: 600; }
.fr-alert__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink-2); }
.fr-alert__ico .ico { width: 18px; height: 18px; }
.fr-alert__acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
/* bandeau d'une ligne : l'icône, la phrase, le bouton */
.fr-alert.is-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fr-alert.is-row .fr-alert__acts { grid-column: auto; }
.fr-alert.is-row p { align-self: center; }
.fr-alert--invite { align-items: center; }
.fr-alert--link { border-color: color-mix(in oklch, var(--signal) 45%, var(--line-soft)); background: linear-gradient(110deg, oklch(0.25 0.04 27 / 0.55), var(--bg-elev) 60%); }
.fr-alert--link .fr-alert__ico { background: oklch(0.32 0.08 27 / 0.7); color: var(--signal-hi); }
.fr-alert--invite .fr-alert__ico { background: oklch(0.3 0.05 245 / 0.6); color: oklch(0.85 0.06 245); }
.fr-alert.is-bad { border-color: oklch(0.55 0.15 27 / 0.6); background: oklch(0.24 0.035 27); }

/* ---------------------------------------------------------------- à traiter */
.fr-todo { display: grid; gap: 10px; }
.fr-todo__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; }
.fr-todo__title .count-pill { margin-left: 0; }
.fr-req {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--r-panel); background: var(--bg-elev); border: 1px solid color-mix(in oklch, var(--signal) 40%, var(--line-soft));
}
.fr-req__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-elev-2); color: var(--ink-2); }
.fr-req__ico .ico { width: 20px; height: 20px; }
.fr-req__txt { display: grid; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.fr-req__txt b, .fr-req__txt .who--btn { color: var(--ink); }
.fr-req__txt .fb-plate { font-size: 12px; min-width: 24px; padding: 3px 5px 2px; vertical-align: 1px; }
.fr-req__meta { font-size: 13px; color: var(--ink-3); }
.fr-req__acts { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (min-width: 560px) { .fr-req { grid-template-columns: auto minmax(0, 1fr) auto; } .fr-req__acts { grid-column: auto; } }

/* ---------------------------------------------------------------- invitation : carte postale */
.fr-side__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; }
.fr-invite { display: grid; gap: 0; }
.fr-invite__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fr-invite__gain {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: oklch(0.86 0.12 90 / 0.1); border: 1px solid oklch(0.8 0.09 85 / 0.35);
  color: oklch(0.92 0.1 90); font: 600 13.5px/1 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fr-invite__gain .ico { width: 16px; height: 16px; }
.fr-invite__gain > span:last-of-type { font-weight: 500; color: var(--ink-2); }
.fr-postcard {
  position: relative; margin-top: 14px; padding: 16px 16px 14px; border-radius: 10px; overflow: hidden;
  color: var(--sign-ink);
  background:
    repeating-radial-gradient(circle at -12% -10%, transparent 0 9px, oklch(0.55 0.06 245 / 0.08) 9px 10px),
    repeating-radial-gradient(circle at 112% 112%, transparent 0 9px, oklch(0.55 0.06 27 / 0.07) 9px 10px),
    linear-gradient(180deg, oklch(0.975 0.008 85), oklch(0.95 0.014 80));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 22px 50px -26px rgb(0 0 0 / 0.9), 0 0 0 1px oklch(0.8 0.02 80);
  transform: rotate(-0.6deg);
}
/* liseré « par avion » discret : rouge panneau et bleu nuit */
.fr-postcard::before {
  content: ""; position: absolute; inset: 0; border: 5px solid transparent; border-radius: inherit; pointer-events: none;
  border-image: repeating-linear-gradient(135deg, var(--signal) 0 10px, transparent 10px 16px, oklch(0.42 0.12 262) 16px 26px, transparent 26px 32px) 5;
  opacity: 0.85;
}
.fr-postcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fr-postcard__k { font: 800 13px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.fr-postcard__from { margin-top: 6px; font-size: 14px; color: oklch(0.4 0.02 262); }
.fr-postcard__from b { color: var(--sign-ink); font-weight: 700; }
.fr-postcard__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; }
.fr-postcard__qr {
  display: block; padding: 6px; border: 0; border-radius: 8px; background: oklch(0.99 0.003 95);
  box-shadow: 0 0 0 1px oklch(0.8 0.02 80), 0 6px 14px -8px rgb(0 0 0 / 0.5); cursor: zoom-in;
}
.fr-postcard__text { display: grid; gap: 6px; min-width: 0; }
.fr-postcard__codek { margin-top: 4px; font: 700 11px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.45 0.02 262); }
.fr-postcard__link { font: 500 11.5px/1.3 var(--font-mono); color: oklch(0.45 0.02 262); overflow-wrap: anywhere; }
.fr-postcard .fr-postmark { right: 60px; top: 40px; width: 62px; height: 62px; opacity: 0.5; }
.fr-postcard .fr-postmark__waves { display: none; }
.fr-invite__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fr-invite__acts .btn--primary { flex: 1 1 180px; }
.fr-invite__qrbtn { display: none; }

/* compact (on a déjà des amis, écran étroit) : le QR passe dans une feuille */
@media (max-width: 1023px) {
  .fr-invite.is-compact .fr-postcard__body { grid-template-columns: minmax(0, 1fr); }
  .fr-invite.is-compact .fr-postcard__qr, .fr-invite.is-compact .fr-postcard__codek { display: none; }
  .fr-invite.is-compact .fr-postcard__body { margin-top: 10px; }
  .fr-invite.is-compact .fr-invite__qrbtn { display: inline-flex; }
  .fr-invite.is-compact .fr-invite__acts { flex-wrap: nowrap; }
  .fr-invite.is-compact .fr-invite__acts .btn--quiet { width: 48px; padding: 0; flex: none; }
  .fr-invite.is-compact .fr-invite__acts .btn--quiet .fr-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .fr-postcard__body { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .fr-codebox span { font-size: 15px; }
  .fr-codebox { gap: 3px; }
}

.fr-qrsheet { display: grid; justify-items: center; gap: 14px; }
.fr-qr--big { width: min(78vw, 320px); padding: 14px; border-radius: 16px; background: oklch(0.99 0.003 95); box-sizing: content-box; }
.fr-qrsheet__code { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------- colonne : code, quotas, règles */
.fr-side__box { padding: 16px; border-radius: var(--r-panel); background: var(--bg-elev); border: 1px solid var(--line-soft); }
.fr-code { display: grid; gap: 8px; }
.fr-code__row { display: flex; gap: 8px; }
.fr-code__input {
  flex: 1; min-width: 0; padding: 0 14px; min-height: 48px;
  font: 600 18px/1 var(--font-mono); letter-spacing: 0.32em; text-transform: uppercase;
}
.fr-code__input::placeholder { letter-spacing: 0.32em; color: var(--ink-3); }
.fr-code .field__error { color: oklch(0.78 0.12 27); font-size: 13.5px; }
.fr-code .btn { flex: none; }

.fr-today__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.fr-today__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.fr-pips { display: inline-flex; align-items: center; gap: 5px; }
.fr-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line); }
.fr-pips i.is-on { background: var(--ink-3); border-color: var(--ink-3); }
.fr-pips b { margin-left: 6px; min-width: 1.4ch; text-align: right; font: 600 13px/1 var(--font-mono); color: var(--ink); }


/* ---------------------------------------------------------------- onglets */
.fr-tabs .fb-seg__badge.is-quiet { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.fr-panel { min-width: 0; }
.fr-panel:focus-visible { outline-offset: 6px; }
.fr-sub {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1;
}
.fr-sub .ico { width: 19px; height: 19px; color: var(--ink-3); }
.fr-sub small { font: 500 13px var(--font-mono); color: var(--ink-3); }

/* ---------------------------------------------------------------- amis */
.fr-friends { display: grid; gap: 16px; }
.fr-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-friend {
  display: grid; gap: 12px; padding: 12px; border-radius: var(--r-panel);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  transition: border-color 0.2s var(--ease);
}
.fr-friend.has-match { border-color: oklch(0.42 0.03 262); }
.fr-friend__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fr-friend__main {
  display: grid; place-items: center; padding: 2px; border: 0; background: none; border-radius: 12px; color: inherit;
}
.fr-friend__main::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; }
.fr-friend__main:focus-visible { outline: none; }
.fr-friend__head:has(.fr-friend__main:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.fr-friend__head:has(.fr-friend__main:active) { transform: scale(0.99); }
.fr-friend__head .who--btn, .fr-friend__more { position: relative; z-index: 1; }
.fr-friend__id { display: grid; gap: 2px; min-width: 0; pointer-events: none; }
.fr-friend__id .who--btn, .fr-friend__id .fr-friend__crown { pointer-events: auto; }
.fr-friend__name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: var(--ink); min-width: 0; }
.fr-friend__crown { display: inline-grid; color: var(--gold); }
.fr-friend__crown .ico { width: 16px; height: 16px; }
.fr-friend__meta { font-size: 13px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fr-friend__seen { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.fr-friend__seen i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.fr-friend__seen i.is-today { background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 22%, transparent); }
.fr-friend__seen i.is-week { background: var(--ink-3); }
.fr-friend__more { width: 40px; height: 40px; }

/* panneau de commune du joueur */
.fr-home { font-size: 11px; max-width: 108px; }
.fr-home .sign__in { padding: 0.32em 0.6em 0.24em; border-width: 0.2em; }
.fr-home .sign__in span { display: block; white-space: nowrap; }
.fr-home[data-lines="3"] { font-size: 9.5px; }
.fr-home.is-big { font-size: 17px; max-width: 220px; }
.fr-home.is-big[data-lines="3"] { font-size: 14px; }
.fr-home--plate { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; background: var(--bg-elev-2); color: var(--ink-3); }
.fr-home--plate .fb-plate { font-size: 16px; }
.fr-home--plate .ico { width: 20px; height: 20px; }

/* actions d'un ami */
.fr-friend__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fr-act {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  min-height: 44px; padding: 0 10px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--line-soft); color: var(--ink);
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.18s var(--ease), border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.fr-act span { overflow: hidden; text-overflow: ellipsis; }
.fr-act .ico { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .fr-act:hover:not(:disabled) { background: oklch(0.29 0.02 262); border-color: var(--line); } }
.fr-act:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.fr-act:disabled { opacity: 0.6; }
.fr-act.is-locked { background: transparent; border-style: dashed; border-color: var(--line); color: var(--ink-3); }
.fr-act.is-locked .ico { width: 15px; height: 15px; }
.fr-act__q {
  position: absolute; top: -8px; right: 8px; min-width: 20px; padding: 2px 6px; border-radius: 999px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font: 600 10.5px/1 var(--font-mono);
}
@media (max-width: 420px) {
  .fr-act { flex-direction: column; gap: 3px; min-height: 56px; padding: 6px 6px 5px; border-radius: 14px; font-size: 12.5px; }
  .fr-act.is-locked .ico { width: 16px; height: 16px; }
}
@media (min-width: 1024px) {
  .fr-friend { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 16px; }
  .fr-friend__head { grid-column: 1; grid-row: 1; }
  .fr-friend__acts { grid-column: 2; grid-row: 1; align-self: center; grid-template-columns: repeat(3, auto); }
  .fr-friend__acts .fr-act { padding: 0 16px; }
  .fr-friend .fr-matches { grid-column: 1 / -1; }
}

/* rapprochements : fiches papier, bord rouge panneau */
.fr-matches { display: grid; gap: 8px; }
.fr-match {
  display: grid; gap: 8px; padding: 10px 12px 11px; border-radius: 10px;
  background: linear-gradient(180deg, oklch(0.965 0.008 85), oklch(0.94 0.012 80));
  color: var(--sign-ink); box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.9);
}
.fr-match__txt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.fr-match__txt .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--signal); }
.fr-match.is-mine .fr-match__txt .ico { color: oklch(0.42 0.12 262); }
.fr-match__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 12px 0 10px;
  border-radius: 999px; border: 1px solid oklch(0.3 0.02 262 / 0.22); background: oklch(1 0 0 / 0.75);
  color: var(--sign-ink); font: 600 13px/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-chip i { flex: none; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px oklch(0.3 0.02 262 / 0.3); }
@media (hover: hover) and (pointer: fine) { button.fr-chip:hover { background: oklch(1 0 0); border-color: oklch(0.3 0.02 262 / 0.4); } }

.fr-pending { padding-top: 6px; }
.fr-pending ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-pending__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); color: var(--ink-2); font-size: 14px;
}
.fr-pending__row b { color: var(--ink); }
.fr-pending__row .fb-plate { font-size: 12px; min-width: 24px; padding: 3px 5px 2px; }
.fr-count { font: 500 12.5px var(--font-mono); color: var(--ink-3); text-align: right; }

/* vide : trois enveloppes */
.fr-empty {
  display: grid; justify-items: start; gap: 10px; padding: 22px 18px; border-radius: var(--r-panel);
  border: 1px dashed var(--line); color: var(--ink-2); font-size: 14.5px; text-wrap: pretty;
}
.fr-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--ink); }
.fr-empty__art { position: relative; width: 120px; height: 64px; margin-bottom: 6px; }
.fr-empty__env {
  position: absolute; bottom: 0; width: 70px; height: 46px; border-radius: 5px;
  background: linear-gradient(160deg, var(--kraft-hi), var(--kraft) 60%, var(--kraft-lo));
  box-shadow: 0 10px 18px -10px rgb(0 0 0 / 0.8), inset 0 0 0 1px oklch(0.4 0.05 60 / 0.4);
}
.fr-empty__env::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom right, transparent 49%, oklch(0.45 0.06 60 / 0.5) 50%, transparent 51%) 0 0 / 50% 60% no-repeat,
    linear-gradient(to bottom left, transparent 49%, oklch(0.45 0.06 60 / 0.5) 50%, transparent 51%) 100% 0 / 50% 60% no-repeat;
}
.fr-empty__env:nth-child(1) { left: 0; transform: rotate(-10deg); }
.fr-empty__env:nth-child(2) { left: 24px; bottom: 8px; transform: rotate(4deg); background: linear-gradient(160deg, oklch(0.97 0.01 85), oklch(0.9 0.02 80)); }
.fr-empty__env:nth-child(3) { left: 50px; transform: rotate(12deg); }

.fr-danger { color: oklch(0.78 0.12 27); border-color: oklch(0.5 0.12 27 / 0.6); }
@media (hover: hover) and (pointer: fine) { .fr-danger:hover:not(:disabled) { color: oklch(0.85 0.1 27); border-color: oklch(0.6 0.14 27); } }

/* ---------------------------------------------------------------- miniatures de cartes et grilles de choix */
.fr-mini {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 9px;
  color: inherit; text-align: inherit; -webkit-tap-highlight-color: transparent;
}
button.fr-mini { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { button.fr-mini:hover .card__tilt { transform: translateY(-3px); transition: transform 0.25s var(--ease); } }
button.fr-mini:focus-visible { outline-offset: 3px; border-radius: 10px; }
.fr-mini__count {
  position: absolute; top: -6px; right: -6px; z-index: 2; padding: 3px 6px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink); font: 600 11px/1 var(--font-mono);
}
.fr-mini__badge {
  position: absolute; left: 50%; bottom: -8px; z-index: 2; transform: translateX(-50%); max-width: calc(100% + 8px);
  padding: 4px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--paper); color: var(--sign-ink); font: 700 10.5px/1 var(--font-ui);
  box-shadow: 0 0 0 1.5px var(--signal), 0 6px 12px -6px rgb(0 0 0 / 0.8);
}
.fr-mini.is-hot .card { box-shadow: 0 0 0 2px var(--signal), 0 12px 24px -12px var(--signal); border-radius: 4.5cqw; }
.fr-mini.is-locked .card { filter: grayscale(1) brightness(0.55); }
.fr-mini.is-locked { cursor: not-allowed; }
.fr-mini__why { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.fr-mini__why .ico { width: 13px; height: 13px; }
.fr-mini.is-unknown { display: grid; place-items: center; aspect-ratio: 63 / 88; border: 1px dashed var(--line); font: 500 12px var(--font-mono); color: var(--ink-3); }

.fr-picker { display: grid; gap: 14px; }
.fr-picker__box .input { min-height: 46px; }
.fr-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 12px; padding: 6px 4px 8px; }
.fr-picker__none { grid-column: 1 / -1; color: var(--ink-3); font-size: 14px; }
.fr-picker__more { justify-self: center; }

/* ---------------------------------------------------------------- feuilles : étapes, aperçu, récapitulatif */
.fr-steps { display: grid; gap: 16px; min-width: 0; }
.fr-steps > * { min-width: 0; }
.fr-steps__lead { color: var(--ink-2); font-size: 14.5px; text-wrap: pretty; }
.fr-steps__acts { display: grid; gap: 10px; }
.fr-preview { position: relative; display: grid; justify-items: center; padding: 4px 0 8px; overflow: hidden; }
.fr-preview__card { width: min(58vw, 230px, calc((100dvh - 420px) * 0.716)); min-width: 150px; touch-action: none; }
.fr-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.fr-facts li .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--ink-3); }
.fr-facts li.is-hot { color: var(--ink); }
.fr-facts li.is-hot .ico { color: var(--signal-hi); }
.fr-sent { display: grid; justify-items: center; gap: 12px; padding: 12px 0 4px; text-align: center; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }
.fr-sent__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in oklch, var(--good) 18%, var(--bg-elev-2)); color: var(--good); box-shadow: 0 0 0 1px color-mix(in oklch, var(--good) 40%, transparent); }
.fr-sent__ico .ico { width: 28px; height: 28px; }
.fr-center { text-align: center; color: var(--ink-2); }
.fr-none { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border-radius: 14px; border: 1px dashed var(--line); color: var(--ink-2); font-size: 14px; text-wrap: pretty; }
.fr-none .ico { width: 26px; height: 26px; color: var(--ink-3); }
.fr-none b { color: var(--ink); }
.fr-none.is-big { padding: 22px 18px; }
.fr-warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 12px; background: oklch(0.26 0.03 80 / 0.5); color: var(--ink-2); font-size: 13.5px; }
.fr-warn .ico { width: 17px; height: 17px; color: var(--gold); }
.fr-want { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink-2); font-size: 14.5px; }

.fr-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.fr-swap figure { margin: 0; display: grid; justify-items: center; gap: 8px; position: relative; }
.fr-swap figcaption { font: 700 12px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.fr-swap__card { position: relative; width: min(100%, 190px); }
.fr-swap__arrows { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elev-2); color: var(--ink-2); border: 1px solid var(--line-soft); }
.fr-swap__arrows .ico { width: 20px; height: 20px; }
.fr-seal {
  position: absolute; left: -6%; right: -6%; top: 44%; z-index: 3; display: grid; place-items: center; height: 30px;
  background: linear-gradient(180deg, var(--kraft-hi), var(--kraft)); color: var(--kraft-ink);
  font: 800 12px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  transform: rotate(-6deg); box-shadow: 0 6px 12px -6px rgb(0 0 0 / 0.8);
}

.fr-why { display: grid; gap: 10px; }
.fr-why__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; color: var(--ink); font-size: 15px; text-wrap: pretty; }
.fr-why__item .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }
.fr-why__rule { color: var(--ink-3); font-size: 13px; }
.fr-why.is-inline { padding: 12px; border-radius: 12px; border: 1px dashed var(--line); }
.fr-why.is-inline .fr-why__item { font-size: 13.5px; color: var(--ink-2); }

.fr-visit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-soft); }
.fr-visit__plate { display: grid; place-items: center; min-width: 56px; min-height: 48px; color: var(--ink-3); }
.fr-visit__name { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink); overflow-wrap: anywhere; }
.fr-visit__meta { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }

.fr-pickf { display: grid; gap: 12px; }
.fr-pickf__lead { color: var(--ink-2); }
.fr-pickf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-pickf__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--bg); color: var(--ink); text-align: left;
}
@media (hover: hover) and (pointer: fine) { .fr-pickf__row:hover { border-color: var(--line); background: var(--bg-elev-2); } }
.fr-pickf__row > .ico { width: 18px; height: 18px; color: var(--ink-3); }
.fr-pickf__txt { display: grid; gap: 2px; min-width: 0; }
.fr-pickf__txt small { font-size: 12.5px; color: var(--ink-3); }
.fr-pickf__txt small.is-hot { color: var(--signal-hi); font-weight: 600; }
.fr-pickf__row.is-locked { opacity: 0.75; border-style: dashed; }

/* fiche d'un ami */
.fr-fiche { display: grid; gap: 18px; min-width: 0; }
.fr-fiche > * { min-width: 0; }
.fr-fiche__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.fr-fiche__id { display: grid; gap: 6px; }
.fr-fiche__line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink); font-size: 15px; }
.fr-fiche__line.is-muted { color: var(--ink-3); font-size: 13.5px; }
.fr-fiche__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fr-fiche__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 12px; padding: 4px 4px 8px; }
.fr-fiche__rm { justify-self: center; color: oklch(0.75 0.1 27); }

/* ---------------------------------------------------------------- « Je cherche » */
.fr-wishes { display: grid; gap: 16px; }
.fr-wishes__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.fr-wishes__lead { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14.5px; }
.fr-wishes__lead .ico { width: 18px; height: 18px; color: var(--ink-3); }
.fr-wishes__n { font: 500 15px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.fr-wishes__n b { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--ink); }
.fr-wishes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 14px; padding: 6px 2px; }
.fr-wish { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.fr-wish__rm {
  position: absolute; top: -9px; right: -9px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--ink-2);
  box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.8);
}
@media (hover: hover) and (pointer: fine) { .fr-wish__rm:hover { color: var(--ink); background: oklch(0.32 0.04 27); border-color: oklch(0.5 0.12 27); } }
.fr-wish__rm .ico { width: 15px; height: 15px; }
.fr-wish__hold, .fr-wish__note { display: flex; align-items: flex-start; justify-content: center; gap: 5px; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--ink-3); text-align: center; }
.fr-wish__hold { color: var(--signal-hi); font-weight: 600; }
.fr-wish__hold .ico { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.fr-wish.is-target .fr-mini__badge { box-shadow: 0 0 0 1.5px var(--gold-lo); background: var(--gold); color: var(--gold-ink); }
.fr-wish.is-held .card { box-shadow: 0 0 0 2px var(--signal), 0 12px 24px -14px var(--signal); border-radius: 4.5cqw; }
.fr-wish--add {
  display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; aspect-ratio: 63 / 88;
  border-radius: 10px; border: 1.5px dashed var(--line); background: transparent; color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-align: center; padding: 8px;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) { .fr-wish--add:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); background: var(--bg-elev); } }
.fr-wish--add:disabled { opacity: 0.5; cursor: not-allowed; }
.fr-wish__plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elev-2); font: 400 26px/1 var(--font-ui); }
.fr-wishes__empty { color: var(--ink-3); font-size: 14px; }
.fr-wish-res .result:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------- échanges */
.fr-trades { display: grid; gap: 22px; }
.fr-tsec { display: grid; gap: 10px; }
.fr-trade {
  display: grid; gap: 12px; padding: 14px; border-radius: var(--r-panel);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
}
.fr-trade.is-in { border-color: color-mix(in oklch, var(--signal) 40%, var(--line-soft)); }
.fr-trade__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 14.5px; color: var(--ink-2); }
.fr-trade__head b { color: var(--ink); }
.fr-trade__left { font: 500 12.5px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.fr-trade__body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; max-width: 460px; }
.fr-trade__side { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.fr-trade__side .fr-mini { width: min(100%, 112px); }
.fr-trade__side b { max-width: 100%; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fr-trade__k { font: 700 11.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.fr-trade__arrows { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev-2); color: var(--ink-2); }
.fr-trade__arrows .ico { width: 18px; height: 18px; }
.fr-trade__note, .fr-trade__warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--ink-3); }
.fr-trade__warn { flex-basis: 100%; color: oklch(0.82 0.1 80); }
.fr-trade__note .ico, .fr-trade__warn .ico { width: 15px; height: 15px; margin-top: 1px; }
.fr-trade__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-hist__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 12px; background: var(--bg-elev); font-size: 13.5px; color: var(--ink-2);
}
.fr-hist__row small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fr-hist__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-hist__st { padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--bg-elev-2); color: var(--ink-3); white-space: nowrap; }
.fr-hist__row.is-accepted .fr-hist__st { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
@media (max-width: 520px) {
  .fr-hist__row { grid-template-columns: auto minmax(0, 1fr); }
  .fr-hist__row small { grid-column: 2; }
  .fr-hist__txt { white-space: normal; }
}

/* ---------------------------------------------------------------- envoi d'un don : l'enveloppe qui s'envole */
.fr-env {
  position: absolute; left: 50%; bottom: 10px; z-index: 4; width: min(70%, 230px); aspect-ratio: 1.55; margin-left: max(-35%, -115px);
  visibility: hidden; opacity: 0; perspective: 700px; pointer-events: none;
}
.fr-env__back, .fr-env__front { position: absolute; inset: 0; border-radius: 6px; }
.fr-env__back { background: var(--kraft-lo); }
.fr-env__front {
  background:
    linear-gradient(to top right, transparent 49.5%, oklch(0.45 0.06 60 / 0.55) 50%, transparent 51%) 0 100% / 50% 62% no-repeat,
    linear-gradient(to top left, transparent 49.5%, oklch(0.45 0.06 60 / 0.55) 50%, transparent 51%) 100% 100% / 50% 62% no-repeat,
    linear-gradient(170deg, var(--kraft-hi), var(--kraft) 55%, var(--kraft-lo));
  box-shadow: 0 18px 30px -16px rgb(0 0 0 / 0.9);
}
.fr-env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%; transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--kraft-hi), var(--kraft));
  clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: visible;
}
.fr-env__to { position: absolute; left: 10%; bottom: 14%; font: 700 14px/1 var(--font-display); letter-spacing: 0.04em; color: var(--kraft-ink); }
.fr-env .fr-stamp { position: absolute; right: 7%; top: 10%; width: 46px; }

/* ---------------------------------------------------------------- colis de Lucette */
.fr-parcel {
  position: fixed; inset: 0; z-index: 64; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center; gap: 12px; overflow: hidden;
  padding: calc(var(--safe-t) + 18px) var(--gutter) calc(var(--safe-b) + 22px);
  outline: none;
}
.fr-parcel__veil {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 80% at 50% 58%, oklch(0.22 0.03 262 / 0.96), oklch(0.1 0.012 262 / 0.98));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.fr-parcel__rays {
  position: absolute; left: 50%; top: 56%; z-index: -1; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
  background: repeating-conic-gradient(from 0deg, oklch(0.9 0.05 80 / 0.07) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 42%); mask: radial-gradient(circle, #000 0, transparent 42%);
  opacity: 0; pointer-events: none;
}
.fr-parcel__close { position: absolute; top: calc(var(--safe-t) + 14px); right: 14px; }
.fr-parcel__count { min-height: 20px; font: 500 13px var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; }
.fr-parcel__lucette { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width: min(100%, 440px); padding-right: 40px; }
.fr-parcel__av { display: grid; place-items: center; width: 64px; height: 64px; }
.fr-parcel__av > * { width: 64px; height: 64px; }
.fr-parcel__bubble {
  position: relative; padding: 12px 14px; border-radius: 16px; background: var(--paper); color: var(--sign-ink);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.9);
}
.fr-parcel__bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: inherit; transform: rotate(45deg); border-radius: 3px;
}
.fr-parcel__talk { position: relative; font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.fr-parcel__talk .who { color: inherit; }
.fr-parcel__stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 0; }
.fr-parcel__scene { position: relative; width: min(84vw, 420px, calc((100dvh - 310px) * 0.95)); aspect-ratio: 0.95; }
.fr-parcel__card {
  position: absolute; left: 50%; top: 0; z-index: 1; width: 66%; margin-left: -33%;
}
.fr-parcel__card .card__glow { opacity: 1; }
.fr-parcel__tag { position: absolute; z-index: 3; top: -12px; right: -16px; font-size: 14px; padding: 6px 12px; transform: rotate(-4deg); box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.8); }
.fr-parcel__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, 440px); min-height: 56px; }
.fr-parcel__acts .btn--xl { flex: 1 1 240px; }
.fr-lucette-alt {
  display: grid; place-items: center; width: var(--s, 64px); height: var(--s, 64px); border-radius: 50%;
  background: oklch(0.3 0.06 262); color: oklch(0.86 0.12 92); box-shadow: inset 0 0 0 3px oklch(0.86 0.12 92 / 0.5);
}
.fr-lucette-alt .ico { width: 46%; height: 46%; }

/* le colis */
.fr-box {
  position: absolute; left: 0; right: 0; bottom: 14%; z-index: 2; width: 100%; aspect-ratio: 1.42; margin: 0 auto;
  padding: 0; border: 0; background: none; color: var(--kraft-ink); perspective: 900px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fr-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 10px; }
.fr-box__body {
  position: absolute; inset: 14% 2% 0; border-radius: 6px; overflow: hidden;
  background:
    repeating-linear-gradient(97deg, oklch(0.5 0.06 60 / 0.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(8deg, oklch(0.78 0.06 75 / 0.08) 0 2px, transparent 2px 11px),
    radial-gradient(120% 90% at 30% 20%, var(--kraft-hi), var(--kraft) 55%, var(--kraft-lo));
  box-shadow: inset 0 -10px 18px -10px oklch(0.35 0.05 55 / 0.7), inset 0 0 0 1px oklch(0.42 0.05 58 / 0.5), 0 28px 40px -20px rgb(0 0 0 / 0.95);
}
.fr-box__lid {
  position: absolute; left: 0; right: 0; top: 6%; z-index: 3; height: 17%; border-radius: 6px;
  background:
    repeating-linear-gradient(97deg, oklch(0.5 0.06 60 / 0.07) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, oklch(0.76 0.07 74), var(--kraft-hi));
  box-shadow: inset 0 -2px 0 oklch(0.45 0.06 60 / 0.5), 0 8px 12px -8px rgb(0 0 0 / 0.6);
  transform-origin: 50% 0;
}
.fr-box__twine { position: absolute; z-index: 4; pointer-events: none; }
.fr-box__twine--v {
  left: 50%; top: 6%; bottom: 0; width: 8px; margin-left: -4px;
  background: repeating-linear-gradient(160deg, var(--twine) 0 3px, var(--twine-lo) 3px 5px);
  box-shadow: 0 0 0 1px oklch(0.5 0.04 70 / 0.35);
}
.fr-box__twine--h {
  left: 2%; right: 2%; top: 56%; height: 8px; margin-top: -4px;
  background: repeating-linear-gradient(70deg, var(--twine) 0 3px, var(--twine-lo) 3px 5px);
  box-shadow: 0 0 0 1px oklch(0.5 0.04 70 / 0.35);
}
.fr-box__knot { position: absolute; left: 50%; top: 6%; z-index: 5; width: 64px; height: 34px; margin: -18px 0 0 -32px; pointer-events: none; }
.fr-box__knot i {
  position: absolute; top: 4px; width: 30px; height: 22px; border-radius: 50%;
  border: 6px solid var(--twine); box-shadow: 0 2px 0 var(--twine-lo), 0 6px 10px -6px rgb(0 0 0 / 0.6);
}
.fr-box__knot i:first-child { left: 0; transform: rotate(-18deg); }
.fr-box__knot i:last-child { right: 0; transform: rotate(18deg); }
.fr-box__knot::after { content: ""; position: absolute; left: 50%; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 4px; background: var(--twine); box-shadow: 0 2px 0 var(--twine-lo); }
.fr-box__label {
  position: absolute; left: 6%; top: 52%; display: grid; gap: 2px; width: 40%; padding: 8px 10px; border-radius: 3px;
  background: oklch(0.97 0.006 90); color: var(--sign-ink); text-align: left; transform: rotate(-2deg);
  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.5);
}
.fr-box__label small { font: 600 9.5px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.45 0.02 262); }
.fr-box__label b { font: 700 16px/1.05 var(--font-display); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-box .fr-stamp { position: absolute; right: 8%; top: 8%; width: 54px; }
.fr-box .fr-postmark { right: 22%; top: 2%; width: 66px; height: 66px; opacity: 0.55; }
.fr-box .fr-postmark__waves { left: auto; right: 54px; width: 60px; }
.fr-box__fragile {
  position: absolute; right: 6%; bottom: 9%; padding: 4px 7px 3px; border: 2px solid var(--signal); border-radius: 3px;
  color: var(--signal); font: 800 10px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-3deg); opacity: 0.85; mix-blend-mode: multiply; max-width: 42%; white-space: normal; text-align: center;
}
/* mouvement réduit : colis déjà ouvert, carte posée devant */
.fr-parcel__card.is-out ~ .fr-box.is-open { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fr-parcel__rays { opacity: 0.6; }
  .fr-postcard { transform: none; }
}
@media (max-height: 640px) {
  .fr-parcel { gap: 8px; padding-top: calc(var(--safe-t) + 10px); }
  .fr-parcel__av, .fr-parcel__av > * { width: 48px; height: 48px; }
  .fr-parcel__talk { font-size: 14.5px; }
}

/* ---------------------------------------------------------------- crochets hors de la vue */
/* fiche d'une carte : « Offrir à un ami », « Proposer en échange » */
.detail__row--friends { flex-wrap: wrap; }
.detail__row--friends .btn { flex: 1 1 170px; }
/* profil : invitation d'amis */
.pf-invite { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.pf-invite__qr { display: block; padding: 5px; border-radius: 8px; background: oklch(0.99 0.003 95); }
.pf-invite__qr:empty { display: none; }
.pf-invite__txt { display: grid; gap: 8px; min-width: 0; }
.pf-invite__txt .ref__link { min-width: 0; }
.pf-invite__txt .ref__link code { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.pf-invite__txt .ref__link { overflow: visible; }
.pf-invite__more { margin: 2px -10px -6px; }
/* classements : « Ajouter en ami » */
.lb-add {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-3);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) { .lb-add:hover:not(:disabled) { color: var(--ink); border-color: var(--line); background: var(--bg-elev-2); } }
.lb-add:disabled { color: var(--good); border-color: transparent; cursor: default; }
.lb-add .ico { width: 16px; height: 16px; }
/* v1.3 · date d'ouverture des dons, sous la phrase du bandeau de liaison */
.fr-alert__when { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.fr-alert__when .ico { flex: none; width: 15px; height: 15px; }