/* =====================================================================
   Le tapis — le hall de tri en modèle réduit (jeu d'arcade).
   Un module de diorama posé sur le tapis de découpe : sol béton, tapis roulant, bacs roulants peints.
   Lumière dorée venue d'en haut à droite, ombres longues vers le bas à gauche, flou de maquette au fond.
   ===================================================================== */
.tapis-jeu{--bw:min(76%, 330px); --sol:#D7CBB3; --bois:#C8A27A; --bois-fonce:#8C6B4A; --kraft:#C49A63;
  position:relative; display:flex; flex-direction:column; gap:10px; color:var(--encre);
  height:calc(100dvh - 104px - var(--haut) - var(--bas)); min-height:470px; max-height:880px;
  user-select:none; -webkit-user-select:none}
.tapis-jeu .tp-lib{font-family:var(--f-chiffre); font-size:9px; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; font-weight:500}

/* ---------- Le tableau du quai (affichage lumineux) ---------- */
.tp-tableau{flex:none; display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4, auto); align-items:stretch; padding:7px 4px;
  background:linear-gradient(180deg, #2A2822 0%, #171612 100%); color:var(--papier); border:2px solid #0E0D0B; border-radius:14px;
  box-shadow:0 4px 0 #0B0A08, 0 18px 30px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08)}
.tp-case{display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; padding:0 9px}
.tp-case + .tp-case{border-left:1px solid rgba(244,235,221,.12)}
.tp-case .tp-lib{color:rgba(244,235,221,.52)}
.tp-case b{font-weight:600; line-height:1; white-space:nowrap}
.tp-score b{font-size:23px; color:var(--jaune); text-shadow:0 0 14px rgba(233,176,32,.45)}
.tp-mult b{font-size:17px; color:rgba(244,235,221,.75)}
.tp-mult[data-m="2"] b{color:var(--jaune)}
.tp-mult[data-m="3"] b{color:#F49A3A; text-shadow:0 0 10px rgba(244,154,58,.55)}
.tp-mult[data-m="4"] b{color:#FF7448; text-shadow:0 0 14px rgba(255,116,72,.75)}
.tp-compte b{font-size:15px}
.tp-rec{display:none}
.tp-msg{display:none}
.tp-msg span{font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--jaune); text-shadow:0 0 12px rgba(233,176,32,.5); white-space:nowrap}
.tp-msg span[data-ton="ko"]{color:#FF7A5C; text-shadow:0 0 12px rgba(255,98,62,.6)}
.tp-msg span[data-ton="or"]{color:#FFD36B}
.tp-rec b{font-size:15px; color:rgba(244,235,221,.8)}
.tp-annonce{position:absolute; left:0; right:0; bottom:0; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:normal; pointer-events:none}
.tp-barres{display:flex; align-items:flex-end; gap:2px; height:15px}
.tp-barres i{width:4px; border-radius:1px; background:rgba(244,235,221,.16); transition:background .3s}
.tp-barres i:nth-child(1){height:5px}.tp-barres i:nth-child(2){height:7px}.tp-barres i:nth-child(3){height:10px}.tp-barres i:nth-child(4){height:12px}.tp-barres i:nth-child(5){height:15px}
.tp-barres i.on{background:var(--jaune); box-shadow:0 0 6px rgba(233,176,32,.6)}
.tp-barres i.on:nth-child(n+4){background:#F49A3A}
.tp-feux{display:flex; gap:5px; align-items:center; height:15px}
.tp-feux i{width:12px; height:12px; border-radius:50%; background:#3A3731; box-shadow:inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 1.5px #0E0D0B}
.tp-feux i.on{background:radial-gradient(circle at 35% 30%, #FF9C7E, var(--brique) 60%); box-shadow:0 0 0 1.5px #0E0D0B, 0 0 10px rgba(255,98,62,.85)}

/* ---------- Le module de diorama ---------- */
.tp-corps{flex:1; min-height:0; display:flex; gap:18px}
.tp-scene{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; padding:8px 8px 12px; border-radius:20px;
  background-color:var(--sol);
  background-image:radial-gradient(90% 60% at 20% 80%, rgba(120,96,60,.12), transparent 70%),
    linear-gradient(rgba(29,27,22,.07) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(29,27,22,.07) 1.5px, transparent 1.5px);
  background-size:auto, 72px 72px, 72px 72px; background-position:0 0, -1px -1px, -1px -1px;
  border:2px solid var(--encre); box-shadow:0 7px 0 var(--bois-fonce), 0 7px 0 2px var(--encre), 0 30px 46px -22px rgba(0,0,0,.75)}
/* lumière dorée et flou de maquette au fond du hall */
.tapis-jeu:not([data-etat="service"]) .tp-scene::before{display:none}
.tp-scene::after{content:''; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(110% 70% at 100% 0%, rgba(255,210,140,.34), transparent 62%), linear-gradient(200deg, transparent 55%, rgba(60,40,20,.12));
  mix-blend-mode:soft-light}
.tp-scene::before{content:''; position:absolute; left:2px; right:2px; top:36px; height:52px; z-index:5; pointer-events:none;
  -webkit-backdrop-filter:blur(1.3px); backdrop-filter:blur(1.3px); -webkit-mask-image:linear-gradient(#000 35%, transparent); mask-image:linear-gradient(#000 35%, transparent)}

.tp-hall{position:relative; flex:1; min-height:0; overflow:hidden; border-radius:13px 13px 6px 6px; isolation:isolate}
.tp-quai-nom{position:absolute; left:0; right:0; top:0; z-index:2; min-height:30px; padding:8px 12px 6px; text-align:center;
  font-family:var(--f-chiffre); font-size:10px; line-height:1.25; letter-spacing:.09em; text-transform:uppercase; color:rgba(244,235,221,.82);
  background:linear-gradient(180deg, #3A352D, #26231E); border-bottom:2px solid var(--encre)}
.tp-tremie{position:absolute; left:50%; top:28px; z-index:2; width:calc(var(--bw) + 22px); height:34px; transform:translateX(-50%);
  background:linear-gradient(180deg, #0F0E0C, #2D2A25); border:2px solid var(--encre); border-top:0; border-radius:0 0 14px 14px;
  display:grid; place-items:center; box-shadow:0 10px 16px -10px rgba(0,0,0,.6)}
.tp-tremie::after{content:''; position:absolute; left:-2px; right:-2px; bottom:-2px; height:7px; border-radius:0 0 12px 12px;
  background:repeating-linear-gradient(135deg, var(--jaune) 0 7px, var(--encre) 7px 14px); border:1.5px solid var(--encre)}
.tp-tremie span{font-family:var(--f-chiffre); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,235,221,.45); margin-top:-6px}

/* le convoyeur : bande caoutchouc, rails à rouleaux, rouleau de bout */
.tp-convoyeur{position:absolute; left:50%; top:40px; bottom:-2px; width:var(--bw); z-index:1;
  transform:translateX(-50%) perspective(700px) rotateX(13deg); transform-origin:50% 100%}
.tp-convoyeur::before{content:''; position:absolute; top:0; bottom:0; left:-16px; right:-16px; border-left:3px dashed rgba(233,176,32,.85); border-right:3px dashed rgba(233,176,32,.85)}
.tp-bande{position:absolute; top:0; bottom:0; left:11px; right:11px;
  background-color:#26282B; background-image:repeating-linear-gradient(180deg, #3A3D42 0 2px, #1D1F22 2px 4px, #2B2D31 4px 18px)}
.tp-convoyeur::after{content:''; position:absolute; top:0; bottom:0; left:11px; right:11px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.45), transparent 16%, transparent 84%, rgba(0,0,0,.45))}
.tp-rail{position:absolute; top:0; bottom:0; width:13px; border:1.5px solid var(--encre);
  background:repeating-linear-gradient(180deg, transparent 0 9px, rgba(29,27,22,.45) 9px 11px), linear-gradient(90deg, #6A7076, #D5D9DC 45%, #7C8288)}
.tp-rail.g{left:0}.tp-rail.d{right:0}
.tp-rouleau{position:absolute; left:-3px; right:-3px; bottom:0; height:15px; border-radius:8px; border:2px solid var(--encre);
  background:linear-gradient(180deg, #8C9399, #E7EAEC 40%, #727980 85%)}

.tp-deco{position:absolute; z-index:0; width:clamp(32px, calc((100% - var(--bw)) / 2 - 14px), 104px); height:auto; top:76px; filter:drop-shadow(-6px 8px 0 rgba(31,22,12,.18))}
.tp-deco-g{left:6px}
.tp-deco-d{right:6px; top:auto; bottom:22px}

/* bande de sécurité entre le hall et les bacs */
.tp-zebra{flex:none; height:9px; margin:7px 2px 0; border-radius:3px; border:1.5px solid var(--encre);
  background:repeating-linear-gradient(135deg, var(--jaune) 0 9px, var(--encre) 9px 18px)}

/* ---------- Les bacs roulants ---------- */
.tp-bacs{position:relative; z-index:2; flex:none; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); gap:8px; margin-top:9px}
.tapis-jeu[data-bacs="2"] .tp-bacs{--n:2}
.tapis-jeu[data-bacs="3"] .tp-bacs{--n:3}
.tp-bac{--c:var(--jaune); --t:var(--encre); --relief:#1D1B16; position:relative; display:flex; flex-direction:column; min-width:0; text-align:center;
  transition:transform .12s var(--ease-sortie); touch-action:manipulation}
.tp-bac:nth-child(2){--c:var(--brique); --t:var(--papier-3)}
.tp-bac:nth-child(3){--c:#3F8A6B; --t:var(--papier-3)}
.tp-bac:nth-child(4){--c:#3F5164; --t:var(--papier-3)}
.tp-bouche{position:relative; display:block; height:22px; overflow:hidden; border:2px solid var(--encre); border-bottom:0; border-radius:9px 9px 0 0;
  background:linear-gradient(180deg, #0F0E0C, #3A3530)}
.tp-pile{position:absolute; left:6px; right:6px; bottom:2px; display:flex; flex-wrap:wrap-reverse; justify-content:center; gap:2px}
.tp-pile i{width:14px; height:10px; border-radius:1.5px; background:linear-gradient(160deg, #D3AD78, #B68A55); border:1px solid var(--encre); transform:rotate(var(--r, 0deg))}
.tp-face{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 5px 9px; color:var(--t);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, white) 0%, var(--c) 30%, color-mix(in srgb, var(--c) 90%, black) 100%);
  border:2px solid var(--encre); border-radius:0 0 9px 9px; box-shadow:0 4px 0 var(--relief), -6px 10px 14px -8px rgba(31,22,12,.45)}
.tp-face{background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 13px), linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, white) 0%, var(--c) 30%, color-mix(in srgb, var(--c) 90%, black) 100%)}
.tp-touche{display:grid; place-items:center; width:21px; height:21px; flex:none; border-radius:50%; background:var(--encre); color:var(--papier); font-size:10.5px; font-weight:600}
.tp-nom{font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:84%; text-transform:uppercase; font-size:13.5px; line-height:1.04;
  letter-spacing:.01em; overflow-wrap:break-word; hyphens:manual; text-wrap:balance}
.tp-nom.serre{font-stretch:68%}
.tp-indice{font-size:11px; line-height:1.25; font-weight:550; opacity:.92; text-wrap:balance; overflow-wrap:anywhere}
.tp-roues{display:flex; justify-content:space-between; padding:0 12px; height:7px}
.tp-roues i{width:11px; height:7px; border-radius:0 0 5px 5px; background:var(--encre)}
.tp-bac:hover .tp-face{filter:brightness(1.05)}
.tp-bac:active{transform:translateY(3px)}
.tp-bac:focus-visible{outline:none}
.tp-bac:focus-visible .tp-face{outline:3px solid var(--papier-3); outline-offset:2px}
.tp-bac.survol{transform:translateY(-5px)}
.tp-bac.survol .tp-face, .tp-bac.vise .tp-face{box-shadow:0 4px 0 var(--relief), 0 0 0 3px var(--papier-3), 0 0 22px 2px rgba(255,236,190,.65)}
.clavier .tp-bac.vise::before{content:''; position:absolute; left:50%; top:-17px; z-index:3; border:9px solid transparent; border-top:11px solid var(--jaune); border-bottom:0;
  transform:translateX(-50%); filter:drop-shadow(0 2px 0 var(--encre)); animation:tp-vise 1s ease-in-out infinite}
@keyframes tp-vise{50%{transform:translate(-50%, 3px)}}
.tp-bac.bon .tp-face{box-shadow:0 4px 0 var(--relief), 0 0 0 4px rgba(46,125,79,.9), 0 0 24px 4px rgba(122,214,150,.6)}
.tp-bac.faux .tp-face{filter:saturate(.45) brightness(.86); box-shadow:0 4px 0 var(--relief), 0 0 0 4px var(--brique), 0 0 22px 5px rgba(255,98,62,.6)}
.tp-bac.cible .tp-face{animation:tp-cible .7s ease-in-out infinite}
.tp-bac.cible::after{content:'ici'; position:absolute; left:50%; top:-26px; z-index:3; transform:translateX(-50%); padding:2px 8px; border-radius:999px;
  background:var(--ok); color:var(--papier-3); border:1.5px solid var(--encre); font-family:var(--f-chiffre); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
@keyframes tp-cible{0%,100%{box-shadow:0 4px 0 var(--relief), 0 0 0 3px rgba(46,125,79,.95)}50%{box-shadow:0 4px 0 var(--relief), 0 0 0 7px rgba(46,125,79,.55), 0 0 26px 6px rgba(122,214,150,.55)}}

/* ---------- Les colis ---------- */
.tp-couche{position:absolute; inset:0; z-index:3; pointer-events:none}
.tp-colis{--k1:#D3AD78; --k2:#C49A63; --k3:#B4884F; position:absolute; left:50%; top:0; width:calc(var(--bw) - 46px); padding:9px 9px 11px;
  border:2px solid var(--encre); border-radius:6px; pointer-events:auto; touch-action:none; cursor:grab; will-change:transform;
  background:linear-gradient(160deg, var(--k1), var(--k2) 55%, var(--k3));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.14), -11px 15px 0 -7px rgba(31,22,12,.3)}
.tp-colis[data-teinte="1"]{--k1:#C9A06A; --k2:#B98E59; --k3:#A87C47}
.tp-colis[data-teinte="2"]{--k1:#DDBA86; --k2:#D0AA74; --k3:#BE965F}
.tp-colis:not(.actif){cursor:default}
.tp-colis.saisi{cursor:grabbing; z-index:2; box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.14), -20px 28px 0 -8px rgba(31,22,12,.22)}
.tp-scotch{position:absolute; left:50%; top:-2px; bottom:-2px; width:28px; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(232,208,158,.7), rgba(246,231,196,.92) 50%, rgba(232,208,158,.7)); border-left:1px solid rgba(110,80,40,.25); border-right:1px solid rgba(110,80,40,.25)}
.tp-etiq{position:relative; z-index:1; display:block; padding:6px 10px 8px; background:#FFFCF4; border:1.5px solid var(--encre); border-radius:3px;
  transform:rotate(var(--penche, 0deg)); box-shadow:0 1px 0 rgba(0,0,0,.18)}
.tp-etiq-haut{display:flex; justify-content:space-between; gap:8px; padding-bottom:4px; margin-bottom:6px; border-bottom:1px dashed rgba(29,27,22,.3);
  font-size:8.5px; letter-spacing:.1em; color:var(--encre-3)}
.tp-etiq-texte{font-size:15.5px; line-height:1.28; font-weight:650; color:var(--encre); overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; text-wrap:balance}
.tp-colis.moyen .tp-etiq-texte{font-size:18px; font-weight:700; line-height:1.18}
.tp-colis.court .tp-etiq-texte{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:115%; font-size:36px; line-height:1; text-align:center; letter-spacing:.02em; padding:2px 0}
.tp-codebarre{display:block; width:56%; height:13px; margin-top:7px; opacity:.85;
  background:repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 3px, var(--encre) 3px 4px, transparent 4px 7px, var(--encre) 7px 10px, transparent 10px 11px, var(--encre) 11px 12px, transparent 12px 15px)}
.tp-colis.court .tp-codebarre{margin-left:auto; margin-right:auto}
.tp-jauge{display:none; position:absolute; left:8px; right:8px; bottom:3px; height:4px; border-radius:2px; background:var(--brique); transform-origin:left; transform:scaleX(var(--reste, 1))}
@media (prefers-reduced-motion: reduce){ .tp-jauge{display:block} .tp-scene::before{display:none} }

.tp-plus{position:absolute; left:50%; top:0; z-index:6; pointer-events:none; white-space:nowrap;
  font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:110%; font-size:21px; color:var(--jaune);
  text-shadow:0 2px 0 var(--encre), 2px 0 0 var(--encre), -2px 0 0 var(--encre), 0 -2px 0 var(--encre), 2px 2px 0 var(--encre), -2px 2px 0 var(--encre)}
.tp-plus.combo{font-size:24px; color:#FF8A4C; text-transform:uppercase}

/* ---------- Fiche d'intro, ticket de correction, changement de quai, rideau ---------- */
.tp-intro{position:absolute; inset:0; z-index:6; margin:auto; width:min(calc(100% - 20px), 430px); height:fit-content; max-height:calc(100% - 46px); overflow-y:auto;
  padding:16px 16px 14px; background:var(--papier) var(--grain); color:var(--encre); border-radius:var(--r); border:2px solid var(--encre);
  box-shadow:0 5px 0 var(--encre), 0 30px 50px -20px rgba(0,0,0,.65); top:30px}
.tp-intro .ref, .tp-fin .ref{display:flex; align-items:center; gap:8px; color:var(--encre-2); margin-bottom:10px}
.tp-intro .ref .trait, .tp-fin .ref .trait{flex:1; height:1px; background:currentColor; opacity:.22}
.tp-intro .titre{line-height:1.02}
.tp-intro .btn{position:sticky; bottom:0; z-index:1}
.tp-intro-consigne{margin:6px 0 10px; font-size:15px; line-height:1.4; color:var(--encre-2)}
.tp-regles{list-style:none; display:grid; gap:8px; padding:10px 0; border-top:1px dashed var(--trait-moyen); border-bottom:1px dashed var(--trait-moyen)}
.tp-regles li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.35}
.tp-regles li > svg{width:22px; height:22px; flex:none; color:var(--encre-2)}
.tp-regles .tp-feux{flex:none; height:22px; gap:3px}
.tp-regles .tp-feux i{width:9px; height:9px}
.tp-kbd-grp{display:flex; gap:3px; flex:none}
.tapis-jeu kbd{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border:1.5px solid var(--encre); border-radius:5px; background:var(--papier-3);
  box-shadow:0 2px 0 var(--encre); font-family:var(--f-chiffre); font-size:10.5px; font-weight:600; color:var(--encre); line-height:1}
.tp-record{display:block; margin:10px 0 12px; font-size:11px; color:var(--encre-2); letter-spacing:.02em}
.tp-record b{color:var(--encre)}

.tp-ticket{position:absolute; left:0; right:0; top:max(84px, 22%); z-index:6; margin:0 auto; width:min(calc(100% - 36px), 340px); display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:12px 14px 10px; text-align:left; background:#FFFDF6; color:var(--encre); border:2px solid var(--encre); border-radius:6px;
  box-shadow:0 5px 0 var(--encre), 0 26px 40px -16px rgba(0,0,0,.6); cursor:pointer}
.tp-ticket::before{content:''; position:absolute; left:10px; right:10px; top:-7px; height:12px;
  background:radial-gradient(circle at 6px 6px, var(--sol) 4px, transparent 4.5px) 0 0 / 14px 12px repeat-x}
.tp-tampon{display:inline-block; padding:2px 9px; border:2.5px solid var(--brique); border-radius:4px; color:var(--brique); transform:rotate(-3deg);
  font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:110%; text-transform:uppercase; font-size:15px; letter-spacing:.02em}
.tp-ticket-colis{font-size:16px; line-height:1.3; font-weight:700; overflow-wrap:break-word}
.tp-ticket-dest{font-size:15px}
.tp-ticket-dest b{display:inline-block; padding:1px 7px; border-radius:4px; background:var(--ok-pale); color:#1F5E3A; border:1.5px solid rgba(46,125,79,.5)}
.tp-ticket-pied{font-size:9.5px; letter-spacing:.04em; color:var(--encre-3)}

.tp-banniere{position:absolute; left:12px; right:12px; top:max(86px, 18%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 16px 13px; text-align:center;
  background:var(--encre); color:var(--papier); border-radius:12px; border:2px solid #0E0D0B; box-shadow:0 5px 0 #0B0A08, 0 24px 40px -18px rgba(0,0,0,.7)}
.tp-banniere .tp-lib{color:rgba(244,235,221,.6)}
.tp-banniere b{font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:112%; text-transform:uppercase; font-size:20px; line-height:1.05; color:var(--jaune)}
.tp-banniere-sous{font-size:13.5px; color:rgba(244,235,221,.8)}

.tp-rideau{position:absolute; inset:0; z-index:7; display:grid; place-items:center; border-bottom:6px solid var(--encre);
  background:repeating-linear-gradient(180deg, #A2A8AD 0 11px, #6B7278 11px 13px, #B9BEC2 13px 24px)}
.tp-rideau b{padding:10px 18px; border:2.5px solid var(--encre); border-radius:8px; transform:rotate(-4deg); background:var(--brique); color:var(--papier-3);
  font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:112%; text-transform:uppercase; font-size:26px; box-shadow:0 5px 0 var(--encre)}
.tp-rideau.fini b{background:var(--ok)}

/* ---------- Colonne de côté (ordinateur) ---------- */
.tp-cote{display:none}

/* ---------- Fin de service : score, record, colis à reprendre ---------- */
.tapis-jeu.fin{height:auto; min-height:0; max-height:none; user-select:text; -webkit-user-select:text}
.tp-fin{width:100%; max-width:760px; margin:0 auto; padding:20px 18px 18px; background:var(--papier) var(--grain); color:var(--encre); border-radius:var(--r);
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.6)}
.tp-fin-tete .titre{margin-bottom:10px}
.tp-fin-score{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px}
.tp-fin-score > b{font-size:48px; font-weight:600; line-height:1; letter-spacing:-.02em}
.tp-fin-score .tp-lib{color:var(--encre-2); font-size:10px}
.tp-fin-score .tp-record{margin:0; flex-basis:100%}
.tp-tampon-record{display:inline-block; padding:4px 11px; transform:rotate(-4deg); background:var(--jaune); border:2.5px solid var(--encre); border-radius:6px; box-shadow:0 3px 0 var(--encre);
  font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:110%; text-transform:uppercase; font-size:15px}
.tp-fin-stats{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:14px}
.tp-fin-stats > div{display:flex; flex-direction:column; gap:4px; padding:10px 10px 9px; border-radius:var(--r-s); background:var(--papier-2)}
.tp-fin-stats b{font-size:20px; font-weight:600; line-height:1}
.tp-fin-stats .tp-lib{color:var(--encre-2)}
.tp-fin-rates{margin-top:18px}
.tp-fin-rates h4{color:var(--encre-2); font-size:10px; margin-bottom:2px}
.tp-fin-rates ol{list-style:none; display:grid; gap:10px; margin-top:8px}
.tp-fin-rates.vide p{padding:14px; border-radius:var(--r-s); background:var(--ok-pale); color:#1F5E3A; font-size:15px; line-height:1.45}
.tp-rate{display:grid; gap:9px; padding:13px 13px 12px; border-radius:12px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); box-shadow:0 2px 0 var(--trait-doux)}
.tp-rate-colis{display:flex; align-items:flex-start; gap:11px}
.tp-rate-colis .tp-lib{color:var(--encre-3); display:block; margin-bottom:3px}
.tp-rate-colis p{font-size:16.5px; line-height:1.3; font-weight:700; overflow-wrap:break-word}
.tp-mini{position:relative; flex:none; width:34px; height:28px; margin-top:2px; border:1.5px solid var(--encre); border-radius:3px; background:linear-gradient(160deg, #D3AD78, #B68A55)}
.tp-mini::before{content:''; position:absolute; left:50%; top:0; bottom:0; width:8px; transform:translateX(-50%); background:rgba(246,231,196,.85)}
.tp-mini::after{content:''; position:absolute; left:5px; top:8px; width:14px; height:9px; background:#FFFCF4; border:1px solid var(--encre)}
.tp-rate-bacs{display:flex; flex-wrap:wrap; gap:6px}
.tp-rate-bacs > span{display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 6px; border-radius:999px; font-size:13.5px; line-height:1.25}
.tp-rate-bacs svg{width:15px; height:15px; flex:none}
.tp-rate-mis{background:var(--ko-pale); color:#8E2F1C}
.tp-rate-bon{background:var(--ok-pale); color:#1F5E3A}
.tp-rate-expl{font-size:15px; line-height:1.5}
.tp-rate-expl p + p{margin-top:5px}
.tp-rate-source{font-family:var(--f-chiffre); font-size:10.5px; line-height:1.4; color:var(--encre-3); letter-spacing:.02em}
#tpFini{margin-top:18px}

/* ---------- Téléphone : quatre bacs en deux rangées, pour des étiquettes lisibles ---------- */
@media (max-width: 599px){
  .tapis-jeu[data-bacs="4"] .tp-bacs{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:7px}
  .tapis-jeu[data-bacs="4"] .tp-bouche{height:13px; border-radius:8px 8px 0 0}
  .tapis-jeu[data-bacs="4"] .tp-pile{bottom:1px}
  .tapis-jeu[data-bacs="4"] .tp-pile i{width:11px; height:8px}
  .tapis-jeu[data-bacs="4"] .tp-face{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; align-content:center; column-gap:8px; row-gap:2px; text-align:left; padding:6px 8px 7px}
  .tapis-jeu.niv-1[data-bacs="4"] .tp-touche{grid-row:1 / span 2}
  .tapis-jeu[data-bacs="4"] .tp-nom{font-size:13px; text-wrap:pretty}
  .tapis-jeu[data-bacs="4"] .tp-indice{grid-column:2; font-size:10.5px; text-wrap:pretty}
  .tapis-jeu[data-bacs="4"] .tp-roues{height:5px}
  .tapis-jeu[data-bacs="4"] .tp-roues i{height:5px}
}

/* ---------- Petits écrans ---------- */
@media (max-width: 380px){
  .tapis-jeu{--bw:min(80%, 330px)}
  .tp-cadence{display:none}
  .tp-tableau{grid-template-columns:minmax(0,1.4fr) repeat(3, auto)}
  .tp-score b{font-size:20px}
  .tp-bacs{gap:6px}
  .tp-nom{font-size:12px}
  .tp-indice{font-size:10px}
  .tp-colis.court .tp-etiq-texte{font-size:32px}
  .tp-etiq-texte{font-size:14.5px}
  .tp-colis.moyen .tp-etiq-texte{font-size:16.5px}
}
@media (max-height: 740px){
  .tapis-jeu{gap:8px}
  .tp-tableau{padding:5px 2px}
  .tp-score b{font-size:20px}
  .tp-face{padding:5px 4px 7px; gap:3px}
  .tp-indice{font-size:10px}
  .tp-regles li:nth-child(2){display:none}
  .tp-intro{padding:13px 14px 12px; top:22px; max-height:calc(100% - 30px)}
  .tp-intro .ref{display:none}
  .tp-intro-consigne{font-size:14px; margin:4px 0 8px}
  .tp-regles{gap:6px; padding:8px 0}
  .tp-record{margin:8px 0 10px}
  .tp-intro .btn{min-height:48px}
}
@media (max-height: 660px){
  .tp-intro-consigne{display:none}
  .tp-record{font-size:10px}
  .tp-regles li{font-size:13px}
}

/* ---------- Ordinateur : le hall s'élargit, la fiche du quai passe à droite ---------- */
@media (min-width: 900px){
  .tapis-jeu{--bw:400px; height:calc(100dvh - 120px - var(--haut) - var(--bas)); min-height:600px; max-height:860px; gap:14px}
  .tp-tableau{display:flex; padding:9px 6px}
  .tp-tableau .tp-case{min-width:108px}
  .tp-rec{display:flex}
  .tp-msg{display:flex; flex:1; align-items:center; justify-content:center; min-width:0}
  .tp-tableau .tp-msg{min-width:0}
  .tp-rec b{font-size:18px}
  .tp-case{padding:0 16px}
  .tp-case .tp-lib{font-size:9.5px}
  .tp-score b{font-size:28px}
  .tp-mult b{font-size:21px}
  .tp-compte b{font-size:18px}
  .tp-scene{padding:10px 10px 14px}
  .tp-quai-nom{font-size:11px; padding:9px 14px 7px}
  .tp-colis{width:calc(var(--bw) - 50px); padding:10px 10px 12px}
  .tp-etiq-texte{font-size:17px}
  .tp-colis.moyen .tp-etiq-texte{font-size:21px}
  .tp-colis.court .tp-etiq-texte{font-size:44px}
  .tp-bacs{gap:12px}
  .tp-bouche{height:26px}
  .tp-face{padding:9px 8px 11px; gap:5px}
  .tp-nom{font-size:16px; font-stretch:92%}
  .tp-indice{font-size:12px}
  .tp-touche{width:24px; height:24px; font-size:11.5px}
  .tp-deco-g{top:84px; left:16px}
  .tp-deco-d{right:16px; bottom:28px}
  .tp-ticket{width:min(calc(100% - 60px), 380px)}
  .tp-intro{width:min(calc(100% - 40px), 460px); padding:20px 22px 18px}
  .tp-cote{display:flex; flex-direction:column; gap:12px; width:262px; flex:none; min-height:0}
  .tp-cote > div{padding:14px 16px; border-radius:var(--r); background:var(--papier) var(--grain); color:var(--encre); box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -26px rgba(0,0,0,.7)}
  .tp-cote .tp-lib{display:block; color:var(--encre-3); margin-bottom:6px}
  .tp-fiche-titre{display:block; font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:110%; text-transform:uppercase; font-size:19px; line-height:1.02; margin-bottom:6px}
  .tp-fiche p{font-size:14px; line-height:1.4; color:var(--encre-2)}
  .tp-touches p{font-size:13.5px; line-height:1.3; display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:var(--encre-2)}
  .tp-touches p + p{margin-top:8px}
  .tp-journal{flex:1; min-height:0; overflow:hidden}
  .tp-journal ol{list-style:none; display:flex; flex-direction:column}
  .tp-journal li{display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px dashed var(--trait-moyen); font-size:13px; line-height:1.3}
  .tp-journal li:last-child{border-bottom:0}
  .tp-journal li span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .tp-journal li svg{width:15px; height:15px; flex:none; margin-top:1px; padding:2px; border-radius:50%; color:var(--papier-3)}
  .tp-journal li.ok svg{background:var(--ok)}
  .tp-journal li.ko svg{background:var(--ko)}
  .tp-journal li.ko span{color:var(--encre-2)}
  .tp-journal ol:empty::before{content:'Les colis triés s\2019 affichent ici.'; font-size:13px; color:var(--encre-3)}
  .tp-fin{padding:28px 32px 26px}
  .tp-fin-score > b{font-size:60px}
  .tp-rate{grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); column-gap:20px; padding:15px 17px 14px}
  .tp-rate-colis, .tp-rate-bacs{grid-column:1}
  .tp-rate-expl{grid-column:2; grid-row:1 / span 2}
  .tp-rate-source{grid-column:1 / -1}
}