/* Starsbox : visuels produits (mug, calendrier, livre) et animations legeres.
   Le prenom est pose en HTML par-dessus l'image (jamais cuit dans le pixel). Coupe si "reduire les animations". */
.pod{position:relative;width:100%;margin:0;container-type:inline-size;overflow:hidden;background:#f6e8c8;line-height:0}
.pod img{width:100%;height:auto;aspect-ratio:4/3;display:block}
.pod-name{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-family:"Baloo 2",sans-serif;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;color:#16264a}
.pod-mug .pod-name{left:43.8%;top:70.2%;font-size:4.7cqw;mix-blend-mode:multiply;opacity:.93;text-shadow:0 .1cqw .1cqw rgba(255,255,255,.5);transform:translate(-50%,-50%) scaleX(.97)}
.pod-a{grid-area:1/1;position:relative;transform-origin:50% 10%}
.pod-cal{display:grid;perspective:1200px}
.pod-cal .pod-b{grid-area:1/1;opacity:0;transition:opacity .6s ease}
.pod-cal .pod-a{transition:transform .8s ease,opacity .8s ease;backface-visibility:hidden}
.pod-cal.flip .pod-a{transform:rotateX(-82deg);opacity:0}
.pod-cal.flip .pod-b{opacity:1}
.pod-cal .pod-name{left:50%;top:74.3%;font-size:7.3cqw}
.pod-book .pod-name{left:52.8%;top:69.4%;display:flex;flex-direction:column;align-items:center;gap:.5cqw;text-align:center;color:#fff;transform:translate(-50%,-50%) skewY(5deg) scaleX(.92);text-shadow:0 .2cqw .6cqw rgba(0,0,0,.55)}
.pod-book .pod-name i{font-style:normal;font-size:2.1cqw;font-family:"Nunito",sans-serif;font-weight:800;letter-spacing:.04em;opacity:.95}
.pod-book .pod-name b{font-size:5cqw;color:#ffd96a;font-weight:800}
.pod-vis{padding:0!important;min-height:0!important;display:block!important;background:#f6e8c8}
.cl-p .vis.pod-vis .pod img{max-height:none;width:100%;height:auto;border-radius:0}
.pod-vid{position:relative;display:block;aspect-ratio:4/3;background:#f6e8c8;line-height:0;overflow:hidden}
.pod-vid video{width:100%;height:100%;object-fit:cover;display:block}
.pod-vid small{position:absolute;right:8px;bottom:8px;background:rgba(22,38,74,.78);color:#fff;font:700 .72rem/1 "Nunito",sans-serif;padding:5px 9px;border-radius:99px}
/* vitrine : mug, calendrier, livre */
.pod-show{margin:0 0 var(--cl-s3,16px)}
.pod-stage{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;perspective:1100px;background:#f6e8c8;box-shadow:0 8px 24px rgba(22,38,74,.12)}
.pod-stage .pod{position:absolute;inset:0;opacity:0;transform:rotateY(-70deg) scale(.88);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pod-stage .pod.is-on{opacity:1;transform:none;pointer-events:auto}
.pod-tabs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pod-tabs button{font:800 .85rem/1 "Nunito",sans-serif;border:2px solid #d9cfb8;background:#fff;color:#16264a;border-radius:99px;padding:10px 16px;min-height:44px;cursor:pointer}
.pod-tabs button[aria-pressed="true"]{background:#16264a;border-color:#16264a;color:#fff}
/* compteurs */
.pod-stats{list-style:none;margin:var(--cl-s3,16px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.pod-stats li{background:#fff8ec;border:2px solid #f0e2bf;border-radius:14px;padding:12px 6px}
.pod-stats b{display:block;font:800 1.9rem/1 "Baloo 2",sans-serif;color:#ef5d6e;font-variant-numeric:tabular-nums}
.pod-stats span{display:block;margin-top:4px;font-size:.78rem;line-height:1.25;color:#3b4560}
/* portes du calendrier : s'ouvrent au defilement */
.cm-grid span{backface-visibility:hidden}
.js-pod .cm-grid.is-in span:not(.open){animation:pod-door .7s ease both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes pod-door{0%{transform:rotateY(0)}48%{transform:rotateY(90deg)}52%{transform:rotateY(90deg);background:#fff8ec;color:#8a5a00;box-shadow:inset 0 0 0 2px #f0c14b}100%{transform:rotateY(0);background:radial-gradient(circle,#ffe08a 0 40%,#fff8ec 78%);color:#8a5a00;box-shadow:inset 0 0 0 2px #f0c14b}}
/* apparition au defilement */
.js-pod [data-rv]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
.js-pod [data-rv].is-in{opacity:1;transform:none}
/* le prenom s'imprime sur le produit */
.js-pod .pod .pod-name{clip-path:inset(0 100% 0 0)}
.js-pod .pod.is-in .pod-name,.js-pod .pod.is-on .pod-name{animation:pod-type 1.1s steps(9,end) .35s both}
@keyframes pod-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-20% -10% -20% -10%)}}
@media (prefers-reduced-motion:reduce){
  .js-pod .pod .pod-name{clip-path:none;animation:none!important}
  .js-pod [data-rv]{opacity:1;transform:none;transition:none}
  .js-pod .cm-grid.is-in span:not(.open){animation:none}
  .pod-stage .pod{transition:none;transform:none}
  .pod-cal .pod-a,.pod-cal .pod-b{transition:none}
}
@media (max-width:480px){.pod-stats b{font-size:1.5rem}.pod-tabs button{flex:1 1 30%;padding:10px 6px}}