/* Pochette : foil, crêtes de scellage, déchirure au doigt. La découpe dentelée est le clip-path ci-dessous. */
@property --sx{syntax:'<percentage>';inherits:true;initial-value:0%}
.pochettes{display:flex;flex-wrap:wrap;gap:36px 44px;padding:14px 6px 6px}
.po-bloc{display:grid;justify-items:center;gap:16px}
.po-legende{font:500 13px var(--titre);color:var(--doux);text-align:center}
.pochette{width:138px;aspect-ratio:3/4.2;position:relative;perspective:700px;container-type:inline-size;outline:none;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 12px 12px rgba(0,20,60,.34)) drop-shadow(0 2px 2px rgba(0,20,60,.3));
  animation:po-flotte 6s ease-in-out infinite,po-balayage 4.6s ease-in-out infinite}
.pochette.categorie{animation-delay:-2s,-1.4s}
.pochette.doree{animation-delay:-4s,-2.6s}
.pochette:focus-visible{outline:3px solid var(--orange);outline-offset:8px;border-radius:10px}
.po-incline{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pochette.actif .po-incline{transition:transform 90ms linear}
.po-haut,.po-bas{position:absolute;left:0;right:0;color:#fff;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%),repeating-linear-gradient(98deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px),repeating-linear-gradient(82deg,rgba(0,0,0,.11) 0 3px,transparent 3px 12px),var(--foil);
  background-repeat:no-repeat,repeat,repeat,no-repeat}
.po-haut{top:0;height:17%;z-index:3;background-size:260% 588%,auto,auto,100% 588%;background-position:var(--sx) 0,0 0,0 0,0 0;transform-origin:0 100%;transition:transform .85s cubic-bezier(.5,0,.25,1),opacity .6s .35s}
.po-bas{top:12%;height:88%;z-index:2;background-size:260% 113.6%,auto,auto,100% 113.6%;background-position:var(--sx) 100%,0 0,0 0,0 100%}
.po-haut::before,.po-bas::before{content:"";position:absolute;left:0;right:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1.5px,rgba(255,255,255,.34) 1.5px 3px,transparent 3px 6px)}
.po-haut::before{top:0;height:34%}
.po-bas::before{bottom:0;height:7%}
.po-contenu{position:absolute;inset:26% 6% 10%;display:grid;align-content:center;justify-items:center;gap:5cqw;text-align:center;font:600 9.4cqw/1.2 var(--titre);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.po-contenu small{font:500 8.7cqw var(--titre);opacity:.9}
.pochette.generale{--foil:linear-gradient(118deg,#001f47,#0a428a 30%,#002D62 46%,#1a5cb0 64%,#00234f);--teinte:var(--r3)}
.pochette.categorie{--foil:linear-gradient(118deg,#001f47,#0a428a 30%,#002D62 46%,#1a5cb0 64%,#00234f);--teinte:var(--r2)}
.pochette.generale,.pochette.argentee,.pochette.doree{--cat:#001a3b}   /* couleur de la bande du bas : le bleu de la pochette, un peu plus foncé */
.pochette.argentee{--cat:#5b6678}
.pochette.doree{--cat:#a97c06}
.pochette.generale .po-contenu,.pochette.categorie .po-contenu,.pochette.argentee .po-contenu,.pochette.doree .po-contenu{inset:18% 6% 37%}
.pochette.generale .po-bas,.pochette.categorie .po-bas,.pochette.argentee .po-bas,.pochette.doree .po-bas{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%),repeating-linear-gradient(98deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px),repeating-linear-gradient(82deg,rgba(0,0,0,.11) 0 3px,transparent 3px 12px),linear-gradient(115deg,color-mix(in srgb,var(--cat,#F37021) 78%,#fff),var(--cat,#F37021) 45%,color-mix(in srgb,var(--cat,#F37021) 78%,#000)),var(--foil);
  background-size:260% 113.6%,auto,auto,100% 29.5%,100% 113.6%;background-position:var(--sx) 100%,0 0,0 0,0 100%,0 100%;background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat}
.pochette.argentee{--foil:linear-gradient(120deg,#5d6676 0%,#e9edf3 14%,#a7b0be 32%,#ffffff 50%,#8892a2 68%,#e1e6ee 86%,#5d6676 100%);--teinte:var(--r1);filter:drop-shadow(0 12px 12px rgba(40,50,70,.38)) drop-shadow(0 0 14px rgba(190,200,215,.55))}
.pochette.argentee .po-haut,.pochette.argentee .po-bas{color:#1c2430}
.pochette.argentee .po-contenu{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.pochette.argentee .po-contenu span{color:#000}
.pochette.argentee .po-ligne{border-top-color:rgba(28,36,48,.5)}
.pochette.argentee{animation-delay:-3s,-2s}
.pochette.doree{--foil:linear-gradient(120deg,#8a5a00 0%,#f6dc7a 14%,#d4a017 32%,#fff3b8 50%,#b8860b 68%,#f6dc7a 86%,#8a5a00 100%);--teinte:var(--r5);filter:drop-shadow(0 12px 12px rgba(120,80,0,.38)) drop-shadow(0 0 18px rgba(240,200,80,.6))}
.pochette.doree .po-haut,.pochette.doree .po-bas{color:#3a2a00}
.pochette.doree .po-contenu{text-shadow:0 1px 0 rgba(255,255,255,.5)}
.pochette.doree .po-contenu span{color:#000}   /* le nom en noir, sur deux lignes ; « 5 cartes » garde le brun d'avant */
.po-etincelle{position:absolute;width:10px;height:10px;z-index:5;pointer-events:none;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:po-scintille 2.6s ease-in-out infinite}
.po-eclat{position:absolute;left:-6%;right:-6%;top:-14%;height:58%;z-index:0;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);background:radial-gradient(ellipse 58% 48% at 50% 38%,rgba(255,247,205,.5),rgba(255,196,84,.2) 45%,transparent 72%);filter:blur(5px)}
.pochette.dechiree .po-haut{transform:translate(18%,-150%) rotate(-32deg);opacity:0}
.pochette.dechiree .po-eclat{opacity:.55;transform:scale(1.02)}
@keyframes po-flotte{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes po-balayage{0%{--sx:0%}60%,100%{--sx:100%}}
@keyframes po-scintille{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:.7;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){
  .pochette,.po-etincelle{animation:none}
  .po-haut,.po-carte,.po-eclat,.po-incline{transition-duration:.01s;transition-delay:0s}
}
.po-haut{clip-path:polygon(0.0% 0.0%,5.0% 7.0%,10.0% 0.0%,15.0% 7.0%,20.0% 0.0%,25.0% 7.0%,30.0% 0.0%,35.0% 7.0%,40.0% 0.0%,45.0% 7.0%,50.0% 0.0%,55.0% 7.0%,60.0% 0.0%,65.0% 7.0%,70.0% 0.0%,75.0% 7.0%,80.0% 0.0%,85.0% 7.0%,90.0% 0.0%,95.0% 7.0%,100.0% 0.0%,100.0% 94.1%,95.0% 76.5%,90.0% 100.0%,85.0% 83.8%,80.0% 92.6%,75.0% 75.0%,70.0% 97.1%,65.0% 80.9%,60.0% 95.6%,55.0% 77.9%,50.0% 98.5%,45.0% 82.4%,40.0% 91.2%,35.0% 73.5%,30.0% 100.0%,25.0% 85.3%,20.0% 94.1%,15.0% 76.5%,10.0% 97.1%,5.0% 79.4%,0.0% 100.0%)}
.po-bas{clip-path:polygon(0.0% 5.7%,5.0% 1.7%,10.0% 5.1%,15.0% 1.1%,20.0% 4.5%,25.0% 2.8%,30.0% 5.7%,35.0% 0.6%,40.0% 4.0%,45.0% 2.3%,50.0% 5.4%,55.0% 1.4%,60.0% 4.8%,65.0% 2.0%,70.0% 5.1%,75.0% 0.9%,80.0% 4.3%,85.0% 2.6%,90.0% 5.7%,95.0% 1.1%,100.0% 4.5%,100.0% 100.0%,95.0% 98.6%,90.0% 100.0%,85.0% 98.6%,80.0% 100.0%,75.0% 98.6%,70.0% 100.0%,65.0% 98.6%,60.0% 100.0%,55.0% 98.6%,50.0% 100.0%,45.0% 98.6%,40.0% 100.0%,35.0% 98.6%,30.0% 100.0%,25.0% 98.6%,20.0% 100.0%,15.0% 98.6%,10.0% 100.0%,5.0% 98.6%,0.0% 100.0%)}

/* Glissement et déchirure */
.po-haut{transform:translate(calc(var(--dp,0)*14%),calc(var(--dp,0)*-70%)) rotate(calc(var(--dp,0)*-22deg))}
.pochette.glisse .po-haut{transition:none}
.pochette.glisse .po-eclat{opacity:calc(var(--dp,0)*.45);transform:scale(calc(.6 + var(--dp,0)*.42));transition:none}
.pochette.touche{animation:po-balayage 4.6s ease-in-out infinite}
.po-ligne{position:absolute;left:3%;right:3%;top:15%;z-index:4;border-top:2px dashed rgba(255,255,255,.62);pointer-events:none;animation:po-pouls 2s ease-in-out infinite}
.pochette.doree .po-ligne{border-top-color:rgba(58,42,0,.55)}
.po-doigt{position:absolute;top:calc(15% - 14px);left:5%;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.5);z-index:6;pointer-events:none;animation:po-doigt 2.6s ease-in-out infinite}
.pochette.touche .po-ligne,.pochette.touche .po-doigt,.pochette.dechiree .po-ligne,.pochette.dechiree .po-doigt{display:none}
.pochette.sortie{animation:po-retire .01s 1s forwards;transform:translate(-140%,120%) rotate(-28deg) scale(.8);opacity:0;pointer-events:none;transition:transform .85s cubic-bezier(.55,0,.85,.4),opacity .6s .2s}
/* Une fois sortie, la pochette quitte la page : sinon son emplacement (décalé vers le bas) allonge la zone de défilement de la pop-in */
@keyframes po-retire{to{display:none}}
@keyframes po-pouls{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes po-doigt{0%{transform:translateX(0);opacity:0}15%{opacity:1}75%{transform:translateX(calc(min(56vw,226px)*.78));opacity:1}100%{transform:translateX(calc(min(56vw,226px)*.78));opacity:0}}