/* Écriture au feutre du carton (2026-10-01) : vraies polices de marqueur. */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Caveat+Brush&display=swap');
/* Le carton du grenier, en 3D CSS. Taille réglable via --W (largeur), --H (hauteur), --D (profondeur). */
.carton-scene { --W: 300px; --H: 190px; --D: 200px; position: relative; width: calc(var(--W) * 1.3); height: calc(var(--H) * 1.9); perspective: 1100px; display: grid; place-items: center; }
.carton { position: relative; width: var(--W); height: var(--H); transform-style: preserve-3d; transform: translateY(18%) rotateX(-24deg) rotateY(-30deg); transition: transform .5s var(--ease); }
.carton-scene.clickable { cursor: pointer; }
/* Mode officiel : plus de carton en stock, le prochain est « en route » (js/ouvrir.js). */
.carton-scene.carton-waiting { opacity: .42; filter: grayscale(.5); }
.carton-scene.clickable:hover .carton { transform: translateY(16%) rotateX(-26deg) rotateY(-26deg); }

.carton .face, .carton .hinge, .carton .tape, .carton .inside { position: absolute; left: 50%; top: 50%; }
.carton .face { transform-style: preserve-3d; }
.f-front, .f-back { width: var(--W); height: var(--H); }
.f-left, .f-right { width: var(--D); height: var(--H); }
.f-bottom { width: var(--W); height: var(--D); }
.f-front  { transform: translate(-50%, -50%) translateZ(calc(var(--D) / 2)); }
.f-back   { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--D) / 2)); }
.f-right  { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--W) / 2)); }
.f-left   { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--W) / 2)); }
.f-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--H) / 2)); }

/* Carton ondulé : couleur kraft, cannelures, bords usés. */
.face, .flap {
  background:
    linear-gradient(180deg, rgba(255, 240, 210, .25), transparent 35%, rgba(90, 60, 30, .12)),
    repeating-linear-gradient(90deg, rgba(110, 75, 35, .07) 0 2px, transparent 2px 8px),
    var(--kraft);
  box-shadow: inset 0 0 0 2px rgba(110, 75, 35, .35), inset 0 0 26px rgba(90, 60, 30, .25);
}
.f-right, .f-left { background-color: var(--kraft-dark); filter: brightness(.92); }
.f-back, .f-bottom { background-color: var(--kraft-deep, #8E6C40); }

/* Rabats du dessus : charnières sur les arêtes avant et arrière. */
.hinge { width: 0; height: 0; transform-style: preserve-3d; }
.hinge-front { transform: translate3d(0, calc(var(--H) / -2), calc(var(--D) / 2)); }
.hinge-back  { transform: translate3d(0, calc(var(--H) / -2), calc(var(--D) / -2)); }
.flap { position: absolute; width: var(--W); height: calc(var(--D) / 2); left: calc(var(--W) / -2); bottom: 0; transform-origin: 50% 100%;
  background-color: var(--kraft-light); transition: transform .8s var(--ease-spring); }
.hinge-front .flap { transform: rotateX(90deg); }
.hinge-back .flap  { transform: rotateX(-90deg); }
.carton.open .hinge-front .flap { transform: rotateX(-118deg); }
.carton.open .hinge-back .flap  { transform: rotateX(112deg); transition-delay: .08s; }

/* Scotch sur la jointure, qui déborde sur les côtés. */
.tape { width: calc(var(--W) + 4px); height: 46px; background: var(--tape);
  transform: translate(-50%, -50%) translateY(calc(var(--H) / -2 - 1.5px)) rotateX(90deg);
  box-shadow: inset 0 0 0 1px rgba(160, 140, 90, .35); transform-origin: 0 50%; }
.tape::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .25) 18px 20px); }
.tape-side { position: absolute; top: -1px; left: 50%; width: 46px; height: 58px; transform: translateX(-50%); background: var(--tape); }
.carton.ripping .tape { animation: peel .5s var(--ease) forwards; }
.carton.ripping .tape-side, .carton.open .tape-side, .carton.open .tape { opacity: 0; transition: opacity .3s; }
@keyframes peel {
  to { transform: translate(-50%, -50%) translateY(calc(var(--H) / -2 - 40px)) rotateX(90deg) rotateZ(-8deg) scaleX(.1); opacity: 0; }
}

/* Écriture au feutre sur la face avant. */
/* En bas de la face : le rabat avant ouvert recouvre le haut. */
.carton-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 12%;
  font-family: var(--font-hand); color: #3B2A33; text-align: center; transform: rotate(-3deg); }
.carton-label strong { font-size: calc(var(--H) * .27); line-height: .9; font-weight: 700; letter-spacing: .02em; }
.carton-label > span { font-size: calc(var(--H) * .12); font-weight: 700; }
/* Écriture au feutre réaliste (version précédente : Patrick Hand bien nette, règles ci-dessus) — activée par la classe
   .marker (js/carton.js) : police de marqueur, lettres irrégulières (.mk, rotation / décalage / taille propres à
   chaque lettre), bord baveux et encre inégale (filtre SVG #carton-marker), encre qui se fond dans le carton. */
.carton-label.marker { color: var(--ink-marker, #1E1A20); transform: rotate(-3deg); gap: 0; }
/* --fit (js/carton.js) : réduit les titres longs pour qu'ils tiennent sur une ligne. */
.carton-label.marker strong { font-family: 'Permanent Marker', var(--font-hand); font-weight: 400; font-size: calc(var(--H) * .25 * var(--fit, 1)); letter-spacing: .01em;
  line-height: 1; white-space: nowrap; }
.carton-label.marker > span { white-space: nowrap; }
.carton-label.marker > span { font-family: 'Caveat Brush', var(--font-hand); font-weight: 400; font-size: calc(var(--H) * .14); }
.carton-label.marker > :is(strong, span, del) { filter: url(#carton-marker); mix-blend-mode: multiply; opacity: .95;
  text-shadow: 0 0 .6px currentColor, .4px .3px 0 rgba(0, 0, 0, .12); }
.carton-label.marker del { font-family: 'Permanent Marker', var(--font-hand); color: rgba(30, 26, 32, .55); }
.carton-label .mk { display: inline-block; transform: translateY(var(--dy, 0)) rotate(var(--dr, 0deg)) scale(var(--ds, 1)); white-space: pre; }
/* Boîte blanche : l'encre ne se fond pas, elle reste posée dessus. */
.carton-scene[data-skin="blanc"] .carton-label.marker > :is(strong, span) { mix-blend-mode: normal; }
.carton-stamp { position: absolute; right: 14px; bottom: 12px; font-family: var(--font-display); font-size: calc(var(--H) * .08); color: #B04E6E;
  border: 2px solid #B04E6E; border-radius: 6px; padding: 2px 8px; transform: rotate(-10deg); opacity: .7; }

/* Cartes qui dépassent du carton ouvert (accueil). */
.inside { transform: translate(-50%, -50%) translateY(calc(var(--H) * -.34)); transform-style: preserve-3d; display: flex; justify-content: center; }
.inside .card { --w: calc(var(--W) * .42); margin: 0 calc(var(--W) * -.05); }
.inside .card:nth-child(1) { transform: rotate(-12deg) translateY(10%); }
.inside .card:nth-child(2) { transform: translateY(-6%); }
.inside .card:nth-child(3) { transform: rotate(10deg) translateY(12%); }

/* Nuage de poussière à l'ouverture. */
.puff { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.puff i { position: absolute; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 244, 230, .95), rgba(236, 226, 214, 0) 70%);
  animation: puff 1.1s var(--ease) forwards; }
@keyframes puff {
  from { transform: translate(0, 0) scale(.3); opacity: .95; }
  to { transform: translate(var(--tx), var(--ty)) scale(1.6); opacity: 0; }
}

/* Ombre au sol. */
.carton-scene::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(58, 44, 64, .28), transparent 70%); z-index: -1; }

@media (max-width: 480px) {
  .carton-scene { --W: 220px; --H: 140px; --D: 150px; }
}

/* ==== Livraisons variées (js/carton.js, 2026-10-01) =================================================== */
/* ---- Apparences (data-skin) : couleurs du carton et motifs imprimés ---- */
.carton-scene[data-skin="recycle"] { --kraft: #A9824F; --kraft-dark: #8A6638; --kraft-light: #BE9A68; --kraft-deep: #6E5030; }
.carton-scene[data-skin="recycle"] :is(.face, .flap) { background-image:
    radial-gradient(circle at 20% 30%, rgba(60, 40, 20, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255, 240, 210, .18) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 240, 210, .18), transparent 35%, rgba(60, 40, 20, .18)),
    repeating-linear-gradient(90deg, rgba(80, 55, 25, .1) 0 2px, transparent 2px 7px);
  background-size: 9px 11px, 13px 7px, auto, auto; }
.carton-scene[data-skin="blanc"] { --kraft: #ECE7DE; --kraft-dark: #D6CFC2; --kraft-light: #F5F1EA; --kraft-deep: #BDB4A4; }
.carton-scene[data-skin="blanc"] :is(.face, .flap) { box-shadow: inset 0 0 0 2px rgba(150, 135, 110, .35), inset 0 0 22px rgba(120, 100, 70, .14); }
.carton-scene[data-skin="blanc"] .carton-label { color: #2F3A4A; }
.carton-scene[data-skin="express"] { --kraft: #D3B07E; --kraft-dark: #B08A55; --kraft-light: #E2C495; }
/* Bande du transporteur imaginaire « Unboxd Express » imprimée sur la face avant et le côté. */
/* (Face avant : un simple liseré en haut, la bande passerait sur l'écriture au feutre.) */
.carton-scene[data-skin="express"] .f-front::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4%; background: linear-gradient(90deg, #E85D3A, #F2994A); opacity: .9; }
.carton-scene[data-skin="express"] .f-right::before { content: 'GRENIER EXPRESS'; position: absolute; left: 0; right: 0; top: 78%; height: 15%;
  display: grid; place-items: center; background: linear-gradient(90deg, #E85D3A, #F2994A); color: #FFF4E8; font: 800 calc(var(--H) * .075)/1 var(--font-body);
  letter-spacing: .25em; opacity: .9; }
.carton-scene[data-skin="demenagement"] { --kraft: #C59B66; --kraft-dark: #A27A47; }
/* Poignée découpée sur le côté et pictogrammes imprimés (verre, flèches) en bas de la face avant. */
.carton-scene[data-skin="demenagement"] .f-right::before { content: ''; position: absolute; left: 50%; top: 14%; width: 34%; height: 11%; transform: translateX(-50%);
  border-radius: 999px; background: #3A2A1C; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .6), 0 0 0 2px rgba(110, 75, 35, .4); }
.carton-scene[data-skin="demenagement"] .f-front::before { content: '↑↑   ⌂   ↑↑'; position: absolute; left: 6%; top: 6%; font: 800 calc(var(--H) * .1)/1 var(--font-body);
  color: rgba(40, 30, 25, .72); letter-spacing: .1em; white-space: pre; }
.carton-scene[data-skin="reutilise"] :is(.f-front, .f-right)::after { content: ''; position: absolute; left: 12%; top: 18%; width: 46%; height: 16%;
  background: rgba(240, 232, 214, .38); clip-path: polygon(0 10%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 60% 88%, 24% 100%, 2% 86%); transform: rotate(-4deg); } /* reste d'une vieille étiquette arrachée */
.carton-label del { font-size: calc(var(--H) * .14); color: rgba(59, 42, 51, .6); text-decoration-thickness: 3px; text-decoration-color: rgba(59, 42, 51, .8); transform: rotate(4deg); }

/* ---- Scotch (data-tape) ---- */
.carton[data-tape="marron"] :is(.tape, .tape-side) { background: rgba(176, 124, 62, .9); }
.carton[data-tape="papier"] :is(.tape, .tape-side) { background: rgba(170, 196, 222, .92); }
/* Scotch imprimé « FRAGILE » : texte rouge sur blanc, liseré rouge sur les bords. */
.carton[data-tape="fragile"] :is(.tape, .tape-side) { background: linear-gradient(180deg, #D9534F 0 3px, #F4F1EA 3px calc(100% - 3px), #D9534F calc(100% - 3px)); }
.carton[data-tape="fragile"] .tape::before { display: none; }
.carton[data-tape="fragile"] .tape::after { content: 'FRAGILE · FRAGILE · FRAGILE · FRAGILE'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 900 15px/1 var(--font-body); color: #C4383E; letter-spacing: .14em; white-space: nowrap; overflow: hidden; }

/* ---- Décorations posées sur les faces (.cz) : position en % de la face, rotation --r ---- */
.face .cz { position: absolute; transform: rotate(var(--r, 0deg)); pointer-events: none; line-height: 1; }
.cz-stamp { padding: .25em .6em; font: 800 calc(var(--H) * .075)/1 var(--font-body); letter-spacing: .08em; color: var(--c); border: 2.5px solid var(--c);
  border-radius: 4px; opacity: .62; mix-blend-mode: multiply; -webkit-mask: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 100%); }
.cz-postmark { width: calc(var(--H) * .3); height: calc(var(--H) * .3); border-radius: 50%; border: 2px solid rgba(30, 30, 40, .55); display: grid; place-content: center;
  text-align: center; color: rgba(30, 30, 40, .62); font: 700 calc(var(--H) * .042)/1.15 var(--font-body); mix-blend-mode: multiply; }
.cz-postmark i { font-style: normal; font-weight: 800; }
.cz-postmark svg { position: absolute; left: 80%; top: 22%; width: calc(var(--H) * .5); fill: none; stroke: rgba(30, 30, 40, .5); stroke-width: 1.6; }
/* Timbre : bord dentelé (trous seulement dans la marge), dessin et valeur. */
.cz-timbre { width: calc(var(--H) * .2); height: calc(var(--H) * .25); padding: 3px; background: #FBF8F0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 1.5px, #000 1.8px) 0 0 / 5px 5px;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 1.5px, #000 1.8px) 0 0 / 5px 5px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .2); }
.cz-timbre > span { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 2px 1px 3px;
  background: var(--c); border: 2px solid #FBF8F0; color: #fff; }
.cz-timbre svg { width: 70%; fill: currentColor; stroke: none; margin-top: 2px; }
.cz-timbre b { font: 800 calc(var(--H) * .036)/1 var(--font-body); }
/* Étiquette d'expédition : en-tête, numéro, lignes d'adresse, code-barres. */
.cz-label { width: calc(var(--H) * .62); padding: 5px 6px 6px; background: #FFFDF7; box-shadow: 1px 2px 3px rgba(0, 0, 0, .22); display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-body); color: #222; }
.cz-label b { font-size: calc(var(--H) * .045); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #E85D3A; }
.cz-label i { font-size: calc(var(--H) * .036); font-style: normal; font-weight: 700; }
/* Rien ne dépasse des faces du carton (une décoration près d'un bord est coupée par l'arête). */
.carton-scene[data-skin] .carton .face { overflow: hidden; }
/* Étiquette pliée sur une arête (js/carton.js foldLabels) : ombre qui s'assombrit vers le pli, puis l'arête du pli. */
.cz-label--fold-x, .cz-label--fold-y { position: absolute; }
.cz-label--fold-x::after, .cz-label--fold-y::before { content: ''; position: absolute; pointer-events: none; }
.cz-label--fold-x::after { top: 0; bottom: 0; left: calc(var(--fx) - 14px); width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(60, 50, 35, .16) 70%, rgba(40, 30, 20, .32)); border-right: 1px solid rgba(255, 255, 255, .7); }
.cz-label--fold-y::before { left: 0; right: 0; top: calc(var(--fy) - 12px); height: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(60, 50, 35, .16) 70%, rgba(40, 30, 20, .32)); border-bottom: 1px solid rgba(255, 255, 255, .7); }
.cz-label s, .cz-label em { display: block; height: 3px; background: rgba(0, 0, 0, .28); border-radius: 2px; text-decoration: none; }
.cz-label em:last-of-type { width: 62%; }
.cz-barcode { height: calc(var(--H) * .09); margin-top: 2px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px, #111 7px 10px, transparent 10px 11px); }
.cz-fragile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; background: #D9363E; color: #fff; border-radius: 3px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .2); font: 800 calc(var(--H) * .045)/1 var(--font-body); letter-spacing: .08em; }
.cz-fragile svg { width: calc(var(--H) * .14); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cz-arrows svg { width: calc(var(--H) * .22); fill: none; stroke: rgba(30, 25, 25, .62); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cz-smiley { display: grid; place-items: center; min-width: calc(var(--H) * .16); height: calc(var(--H) * .16); padding: 0 .3em; border-radius: 999px;
  background: #FFD84D; color: #6B4A00; font: 800 calc(var(--H) * .09)/1 var(--font-hand); box-shadow: 1px 2px 2px rgba(0, 0, 0, .2); }

/* ---- Colis abîmé ---- */
.cz-crush { position: absolute; right: 0; top: 0; width: 34%; height: 46%; pointer-events: none; }
.cz-crush--side { left: 0; right: auto; width: 40%; height: 40%; }
.cz-crush svg { width: 100%; height: 100%; overflow: visible; }
.cz-crush path:first-child { fill: rgba(45, 28, 12, .42); }
.cz-crush path:last-child { stroke: rgba(30, 18, 6, .65); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cz-stain { position: absolute; width: calc(var(--H) * .32); height: calc(var(--H) * .22); border-radius: 50%; transform: rotate(var(--r)); pointer-events: none;
  background: radial-gradient(ellipse, rgba(110, 70, 30, .12) 40%, rgba(90, 55, 20, .32) 62%, transparent 70%); }
/* Déchirure : un morceau de papier arraché qui laisse voir la cannelure du carton. */
.cz-tear { position: absolute; width: calc(var(--H) * .3); height: calc(var(--H) * .16); transform: rotate(var(--r)); pointer-events: none;
  background: repeating-linear-gradient(90deg, #E9D7B5 0 3px, #CDB48A 3px 5px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
  clip-path: polygon(0 40%, 14% 8%, 28% 30%, 44% 0, 58% 22%, 76% 4%, 100% 34%, 92% 70%, 72% 100%, 50% 80%, 30% 100%, 10% 78%); }
.cz-repair { position: absolute; width: 60%; height: calc(var(--H) * .14); background: rgba(176, 124, 62, .78); transform: rotate(var(--r)); pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(120, 80, 30, .3); }
.cz-damaged { padding: .35em .6em; background: #F6C443; color: #1A1A1A; font: 900 calc(var(--H) * .05)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  border: 3px solid transparent; border-image: repeating-linear-gradient(45deg, #1A1A1A 0 5px, #F6C443 5px 10px) 3; box-shadow: 1px 2px 3px rgba(0, 0, 0, .25); }
.cz-scuffs { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(115deg, transparent 30%, rgba(255, 245, 225, .22) 31% 33%, transparent 34% 52%, rgba(255, 245, 225, .18) 53% 54%, transparent 55%),
    linear-gradient(80deg, transparent 60%, rgba(60, 40, 20, .18) 61% 62%, transparent 63%); }
.carton-scene[data-condition="abime"] .face { filter: saturate(.85); }

/* ---- Colis protégé ---- */
.cz-strap { position: absolute; top: -1px; bottom: -1px; width: 6%; min-width: 7px; pointer-events: none;
  background: linear-gradient(90deg, #2E64B8, #4C86DA 50%, #2E64B8); box-shadow: 0 0 0 1px rgba(20, 40, 80, .3); }
.cz-corner { position: absolute; width: 17%; height: 24%; pointer-events: none; border: calc(var(--H) * .05) solid #7E5B33; }
.cz-corner--tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.cz-corner--tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.cz-corner--bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.cz-corner--br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.cz-seal { display: grid; place-items: center; text-align: center; width: calc(var(--H) * .36); height: calc(var(--H) * .36); border-radius: 50%; padding: 4px;
  background: radial-gradient(circle, #2E64B8 60%, #23508F 61% 64%, #2E64B8 65%); color: #fff; font: 800 calc(var(--H) * .042)/1.15 var(--font-body);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); }
.cz-seal b { font-size: calc(var(--H) * .1); }

/* ---- Lot d'une console : grande étiquette « Lot » avec le support et le nom de la console ---- */
.cz-console { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 7px; background: #FFFDF7; border: 2px solid #222; border-radius: 4px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .25); font-family: var(--font-body); color: #1A1A1A; max-width: 78%; }
.cz-console svg { width: calc(var(--H) * .17); flex: none; fill: #1A1A1A; }
.cz-console small { display: block; font-size: calc(var(--H) * .045); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #C4383E; }
.cz-console b { display: block; font-size: calc(var(--H) * .075); font-weight: 900; line-height: 1.05; }
/* ---- Vide-grenier : étoile fluo du prix ---- */
.cz-price { display: grid; place-content: center; text-align: center; width: calc(var(--H) * .36); height: calc(var(--H) * .36); background: #FFE14D;
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 56%, 96% 76%, 74% 78%, 70% 100%, 52% 86%, 32% 100%, 28% 79%, 6% 80%, 16% 58%, 0 42%, 20% 32%, 16% 10%, 38% 18%);
  font: 400 calc(var(--H) * .085)/1 'Permanent Marker', var(--font-hand); color: #C4161C; }
.cz-price b { font-weight: 400; font-size: .6em; color: #1E1A20; }
/* ---- Colis du voisin : mot sur papillon jaune, poussière, toile d'araignée ---- */
.cz-postit { width: calc(var(--H) * .5); min-height: calc(var(--H) * .32); padding: 6px 7px; background: linear-gradient(180deg, #FFF59A, #F7E86A);
  box-shadow: 1px 3px 4px rgba(0, 0, 0, .25); font: 400 calc(var(--H) * .06)/1.15 'Caveat Brush', var(--font-hand); color: #1F2A55; line-height: 1.1; }
.cz-postit i { display: block; margin-top: 4px; font-style: normal; text-align: right; font-size: .9em; }
.cz-dust { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(circle at 20% 15%, rgba(235, 228, 215, .5), transparent 35%), radial-gradient(circle at 75% 30%, rgba(235, 228, 215, .35), transparent 40%),
    radial-gradient(circle, rgba(240, 235, 225, .5) 0 .6px, transparent 1px) 0 0 / 7px 9px, linear-gradient(180deg, rgba(225, 218, 205, .45), transparent 60%); }
.carton-scene[data-parcel="voisin"] .face, .carton-scene[data-parcel="voisin"] .flap { filter: saturate(.7) brightness(.95); }
.cz-cobweb { position: absolute; right: 0; top: 0; width: 34%; fill: none; stroke: rgba(245, 240, 232, .7); stroke-width: .8; pointer-events: none; }
/* ---- Colis d'import : étiquette par avion (liseré rouge et bleu) et déclaration de douane verte ---- */
.cz-airmail { padding: 5px 9px; background: #FFFDF7; border: 4px solid transparent; font-family: var(--font-body); color: #1F3E8C;
  border-image: repeating-linear-gradient(135deg, #C8102E 0 6px, #FFFDF7 6px 9px, #1F3E8C 9px 15px, #FFFDF7 15px 18px) 4; box-shadow: 1px 2px 3px rgba(0, 0, 0, .2); }
.cz-airmail b { display: block; font-size: calc(var(--H) * .07); font-weight: 900; letter-spacing: .06em; }
.cz-airmail i { display: block; font-size: calc(var(--H) * .04); font-style: normal; font-weight: 700; }
.cz-customs { width: calc(var(--H) * .55); padding: 4px 6px; background: #CFE8C6; border: 1.5px solid #3E7A3A; font-family: var(--font-body); color: #23401F;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .2); font-size: calc(var(--H) * .036); line-height: 1.25; }
.cz-customs b { display: block; font-weight: 900; }
.cz-customs i { float: right; font-style: normal; font-weight: 800; margin-top: -1.2em; }
/* ---- Coffret collector : boîte noire mate, dorure, ruban rouge, cachet de cire ---- */
.carton-scene[data-skin="collector"] { --kraft: #1D1B22; --kraft-dark: #141218; --kraft-light: #26232C; --kraft-deep: #0E0D11; }
.carton-scene[data-skin="collector"] :is(.face, .flap) { background-image: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 40%, rgba(0, 0, 0, .25));
  box-shadow: inset 0 0 0 2px #B8953F, inset 0 0 0 4px rgba(0, 0, 0, .6), inset 0 0 0 5px rgba(232, 200, 120, .5); }
.carton-scene[data-skin="collector"] :is(.carton-label, .carton-stamp) { display: none; }
.carton[data-tape="none"] :is(.tape, .tape-side) { display: none; }
.cz-gilt { position: absolute; inset: 7%; border: 1px solid rgba(232, 200, 120, .55); pointer-events: none; }
.cz-ribbon { position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none;
  background: linear-gradient(90deg, #7E1020, #C8243A 30%, #E04558 50%, #C8243A 70%, #7E1020); box-shadow: 0 0 4px rgba(0, 0, 0, .5); }
.cz-plate { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-display); color: #E9C46A;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.cz-plate small { font: 700 calc(var(--H) * .05)/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: #CFAE5A; }
.cz-plate b { font-weight: 400; font-size: calc(var(--H) * .2); line-height: 1; letter-spacing: .02em;
  background: linear-gradient(180deg, #FFF0B3, #E9C46A 45%, #A9822A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cz-plate i { font: 600 calc(var(--H) * .042)/1 var(--font-body); font-style: normal; letter-spacing: .08em; color: #CFAE5A; }
.cz-wax { display: grid; place-items: center; width: calc(var(--H) * .22); height: calc(var(--H) * .22); border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #E0485C, #A3162B 60%, #6E0D1C); box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .2);
  font: 400 calc(var(--H) * .11)/1 var(--font-display); color: rgba(60, 5, 15, .75); text-shadow: 0 1px 0 rgba(255, 140, 150, .35); }
.puff .spark { width: 8px; height: 8px; margin: -4px; background: linear-gradient(135deg, #FFF6C8, #E9C46A 50%, #B58C22); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---- Carton de bienvenue (première livraison) : kraft emballé comme un cadeau, ruban et nœud, confettis ---- */
.carton-scene[data-skin="bienvenue"] { --kraft: #D9AE72; --kraft-dark: #BF925A; --kraft-light: #E6C08A; --kraft-deep: #A57A45; }
.cz-confetti { position: absolute; inset: 0; pointer-events: none; }
.cz-confetti .cf { position: absolute; width: 5px; height: 9px; border-radius: 1px; background: var(--c); transform: rotate(var(--r)); opacity: .9; }
.cz-confetti .cf:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
.cz-gift-ribbon { position: absolute; pointer-events: none; background: linear-gradient(90deg, #C2456A, #F28CA8 35%, #FFC3D3 50%, #F28CA8 65%, #C2456A);
  box-shadow: 0 0 3px rgba(80, 20, 40, .35); }
.cz-gift-ribbon--v { top: 0; bottom: 0; width: 9%; transform: translateX(-50%); }
.cz-gift-ribbon--h { left: 0; right: 0; bottom: 7%; height: 9%;
  background: linear-gradient(180deg, #C2456A, #F28CA8 35%, #FFC3D3 50%, #F28CA8 65%, #C2456A); }
.cz-gift-bow { position: absolute; top: -2%; width: calc(var(--H) * .5); height: calc(var(--H) * .26); transform: translateX(-50%); pointer-events: none; }
.cz-gift-bow i { position: absolute; top: 0; width: 50%; height: 100%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 55%, #C2456A 0 28%, #F28CA8 30% 70%, #E0668A 72%); box-shadow: 0 2px 3px rgba(80, 20, 40, .35); }
.cz-gift-bow i:first-child { left: 0; transform: rotate(-14deg); }
.cz-gift-bow i:nth-child(2) { right: 0; transform: rotate(14deg) scaleX(-1); }
.cz-gift-bow b { position: absolute; left: 50%; top: 22%; width: 22%; height: 56%; transform: translateX(-50%); border-radius: 30%;
  background: linear-gradient(90deg, #A8335A, #E0668A 50%, #A8335A); }
.cz-welcome { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 12px 7px; background: #FFF8E6; border-radius: 6px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .25), inset 0 0 0 2px #F4C95D; font-family: var(--font-body); color: #3A2C40; }
.cz-welcome b { font: 400 calc(var(--H) * .1)/1 'Caveat Brush', var(--font-hand); color: #C2456A; }
.cz-welcome i { font: 800 calc(var(--H) * .04)/1.2 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
:is(.puff, .peanut-bed) .peanut--party[data-c="0"] { background: #F7D98A; }
:is(.puff, .peanut-bed) .peanut--party[data-c="1"] { background: #F8B9CB; }
:is(.puff, .peanut-bed) .peanut--party[data-c="2"] { background: #BDE8D3; }
:is(.puff, .peanut-bed) .peanut--party[data-c="3"] { background: #BFD5F7; }
.puff .confetto { width: 7px; height: 11px; margin: -5px -3px; border-radius: 1px; background: var(--c); }
.puff .confetto:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }

/* Lit de polystyrène dans le colis protégé ouvert (au ras de l'ouverture). */
.peanut-bed { position: relative; width: calc(var(--W) * .9); height: calc(var(--H) * .3); margin-top: calc(var(--H) * .2); transform: rotateX(70deg); }
.carton:not(.open) .peanut-bed { display: none; }
.peanut-bed b { position: absolute; }
/* Polystyrène (colis protégé) et miettes de carton (colis abîmé) projetés à l'ouverture, qui retombent au sol. */
.puff b { position: absolute; left: 0; top: 0; opacity: 0; animation: bit-fly 1.5s forwards; }
:is(.puff, .peanut-bed) .peanut { width: 15px; height: 9px; margin: -4px -7px; border-radius: 48% 52% 45% 55% / 60% 60% 40% 40%; background: #FBFAF4;
  box-shadow: inset -2px -2px 0 rgba(150, 140, 120, .35), 0 1px 1px rgba(0, 0, 0, .25); }
:is(.puff, .peanut-bed) .peanut::after { content: ''; position: absolute; left: 40%; top: 0; width: 20%; height: 45%; border-radius: 0 0 50% 50%; background: rgba(170, 160, 140, .45); }
:is(.puff, .peanut-bed) .peanut--green { background: #DDEBC8; }
/* Polystyrène doré du coffret collector. */
:is(.puff, .peanut-bed) .peanut--gold { background: linear-gradient(135deg, #FFF3C4, #E9C46A 45%, #B58C22); box-shadow: inset -2px -2px 0 rgba(120, 85, 20, .45), 0 1px 2px rgba(0, 0, 0, .35); }
:is(.puff, .peanut-bed) .peanut--gold::after { background: rgba(140, 100, 25, .5); }
.puff .crumb { width: 8px; height: 6px; margin: -3px; background: #A8834F; clip-path: polygon(0 20%, 60% 0, 100% 50%, 70% 100%, 10% 80%); }
@keyframes bit-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(calc(var(--s) * .4)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  10% { opacity: 1; }
  45% { transform: translate(calc(var(--tx) * .55), var(--ty)) rotate(calc(var(--rot) * .45)) scale(var(--s)); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { opacity: 1; transform: translate(var(--tx), var(--fall)) rotate(var(--rot)) scale(var(--s)); }
}