/* NO YAAWI Pro : bandeau animé, carrousel d'affiches, thèmes. */

/* ----- Bandeau d'images qui défile derrière le logo ----- */
header.avec-hbg{overflow:hidden}
header.hero.avec-hbg{position:relative}
.hbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,15,.96) 0,rgba(13,13,15,.80) 38%,rgba(13,13,15,.55) 70%,rgba(13,13,15,.80) 100%),linear-gradient(180deg,rgba(13,13,15,.2),rgba(13,13,15,.85))}
.hbg-piste{display:flex;gap:10px;height:100%;width:max-content;animation:hbg 70s linear infinite;padding:6px 0}
.hbg-piste img{height:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;opacity:.9;filter:saturate(1.15)}
@keyframes hbg{from{transform:translateX(0)}to{transform:translateX(-50%)}}
header.avec-hbg>*:not(.hbg),header.avec-hbg .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hbg-piste{animation:none}}

/* ----- Carrousel d'affiches ----- */
#carr{margin:0 0 16px}
.car-t{font-weight:800;font-size:15px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.car-t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,36,27,.18);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(232,36,27,0)}}
.car{position:relative}
.car-piste{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
.car-piste::-webkit-scrollbar{display:none}
.car-s{flex:0 0 min(78%,320px);scroll-snap-align:center;margin:0;position:relative;border-radius:var(--img-r,16px);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);background:#111}
.car-s img{display:block;width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in;transition:transform .5s}
.car-s:hover img{transform:scale(1.03)}
.car-s figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;color:#fff;font-weight:800;font-size:13.5px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.car-pts{display:flex;justify-content:center;gap:6px;margin-top:6px}
.car-pts button{width:7px;height:7px;border-radius:7px;border:0;padding:0;background:#c9c3b8;cursor:pointer;transition:width .3s,background .3s}
.car-pts button.on{width:22px;background:var(--red)}

/* =====================  THÈME PRESTIGE  ===================== */
body.th-prestige{background:#F3EFE8}
body.th-prestige header{background:radial-gradient(circle at 88% -20%,#5a120d 0,#1b1313 42%,#0d0d0f 78%)}
body.th-prestige nav{gap:6px;padding-bottom:10px}
body.th-prestige nav button{border:0;border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.06);color:#d9d9d9}
body.th-prestige nav button.on{color:#fff;background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 4px 14px rgba(232,36,27,.4)}
body.th-prestige .day .dh{background:linear-gradient(120deg,#141414 0,#2a1715 60%,#5a120d 100%)}
body.th-prestige .day.today .dh{background:linear-gradient(120deg,var(--red),var(--red2))}
body.th-prestige .day.today{box-shadow:0 10px 26px rgba(232,36,27,.22)}
body.th-prestige .pk{border-left:4px solid var(--red)}
body.th-prestige .tauxbar{background:linear-gradient(135deg,#fff 0,#fff7f1 100%)}
body.th-prestige .chips button.on{background:linear-gradient(135deg,#141414,#3a1a17);color:#fff}
body.th-prestige h2::before{background:linear-gradient(180deg,var(--red),var(--red2))}
body.th-prestige .card,body.th-prestige .pk,body.th-prestige .day,body.th-prestige .msg,body.th-prestige .tauxbar,body.th-prestige .agbar,body.th-prestige .ag,body.th-prestige .stats div,body.th-prestige .invc{border-radius:18px;border-color:#ebe5da;box-shadow:0 1px 2px rgba(20,20,20,.04),0 8px 22px rgba(20,20,20,.06)}
body.th-prestige .btn:not(.light):not(.wa){background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 6px 16px rgba(232,36,27,.28)}
body.th-prestige .btn{border-radius:12px}
body.th-prestige h2{letter-spacing:-.2px}
body.th-prestige .sheet{border-radius:22px 22px 0 0}
@media(min-width:700px){body.th-prestige .sheet{border-radius:22px}}
body.th-prestige .stats div b{background:linear-gradient(135deg,#141414,#5a120d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================  THÈME NUIT  ===================== */
body.th-nuit{--paper:#0e0e11;--line:#2a2a30;--muted:#9a9aa3;background:#0e0e11;color:#ececf0}
body.th-nuit header{background:radial-gradient(circle at 88% -20%,#4a0f0b 0,#141418 45%,#0b0b0d 80%)}
body.th-nuit main,body.th-nuit h2,body.th-nuit h3,body.th-nuit .lead{color:inherit}
body.th-nuit .lead,body.th-nuit .lg,body.th-nuit small{color:#a3a3ad}
body.th-nuit .banner,body.th-nuit .weekbar button,body.th-nuit .day,body.th-nuit .todo,body.th-nuit .card,body.th-nuit .info,body.th-nuit .compose,body.th-nuit .msg,body.th-nuit .sheet,body.th-nuit .stats div,body.th-nuit .bars,body.th-nuit .cbar input,body.th-nuit .chips button,body.th-nuit .pk,body.th-nuit .mq,body.th-nuit .jr,body.th-nuit .tauxbar,body.th-nuit .ag,body.th-nuit .rgi,body.th-nuit .agbar,body.th-nuit .alr>div,body.th-nuit .invc,body.th-nuit .hb,body.th-nuit .filebar{background:#18181d;border-color:#2a2a30;color:#ececf0}
body.th-nuit .f input,body.th-nuit .f select,body.th-nuit .f textarea,body.th-nuit .compose textarea,body.th-nuit .pfl div,body.th-nuit .invc code{background:#111115;border-color:#2c2c33;color:#ececf0}
body.th-nuit .btn.light,body.th-nuit .pill.ghost,body.th-nuit .card .edit{background:#26262d;color:#ececf0}
body.th-nuit .chips button.on{background:#ececf0;color:#111}
body.th-nuit .day .dh,body.th-nuit .day header{color:#fff}
body.th-nuit .alr>div.nv{background:#2a1513;border-color:var(--red)}
body.th-nuit .car-pts button{background:#3a3a42}
body.th-nuit .modal{background:rgba(0,0,0,.7)}
body.th-nuit .addbtn{background:#18181d;border-color:#3a3a42;color:#ececf0}

/* ----- Modèle « Grande bannière » : les affiches en grand, en fondu ----- */
header.hdr-hero .brand{min-height:var(--ban-h,170px);align-items:flex-end;padding-bottom:4px;transition:min-height .35s}
header.hdr-hero.replie .brand{min-height:0}
header.hdr-hero .hfade{position:absolute;top:-28%;right:-4%;left:auto;width:175%;height:auto;max-width:none;opacity:0;transition:opacity 1.2s ease;animation:kb 14s ease-in-out infinite alternate;transform-origin:80% 40%}
header.hdr-hero .hfade.on{opacity:1}
@keyframes kb{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.14) translateY(-3%)}}
header.hdr-hero .hbg::after{background:linear-gradient(90deg,rgba(10,10,12,.85) 0,rgba(10,10,12,.35) 45%,rgba(10,10,12,0) 70%),linear-gradient(180deg,rgba(10,10,12,0) 45%,rgba(10,10,12,.8) 80%,rgba(10,10,12,.97) 100%)}
header.hdr-hero.replie .hbg::after{background:linear-gradient(90deg,rgba(10,10,12,.95) 0,rgba(10,10,12,.7) 50%,rgba(10,10,12,.45) 100%)}
header.hdr-hero h1,header.hdr-hero .brand p{text-shadow:0 2px 10px rgba(0,0,0,.7)}
header.hdr-hero .tools button{background:rgba(20,20,22,.55);backdrop-filter:blur(6px)}
@media(min-width:700px){header.hdr-hero .brand{min-height:calc(var(--ban-h,170px) + 30px)}header.hdr-hero .hfade{width:70%;top:-40%;right:0}}

/* ----- Modèle « Bande d'affiches » : une rangée d'affiches en couleur qui défile ----- */
.hstrip{overflow:hidden;margin:12px -18px 0;padding:2px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hstrip-piste{display:flex;gap:8px;width:max-content;animation:hbg 55s linear infinite}
.hstrip-piste img{height:86px;aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
@media(min-width:700px){.hstrip-piste img{height:110px}}
/* Modèle « Images en fond » : voile plus léger pour bien voir les affiches */
header.hdr-fond .hbg::after{background:linear-gradient(90deg,rgba(13,13,15,.88) 0,rgba(13,13,15,.55) 45%,rgba(13,13,15,.25) 75%,rgba(13,13,15,.45) 100%),linear-gradient(180deg,rgba(13,13,15,0) 40%,rgba(13,13,15,.8))}
header.hdr-fond .hbg-piste img{opacity:1}

/* ----- Vignettes qui défilent sous la grande bannière (cliquables) ----- */
.hpop{position:relative;z-index:1;max-width:1100px;margin:10px -18px 0;overflow:hidden;transition:max-height .35s,opacity .35s,margin .35s;max-height:100px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hpop-piste{display:flex;gap:9px;width:max-content;padding:3px 0 6px;animation:hbg 40s linear infinite}
.hpop:hover .hpop-piste,.hpop:active .hpop-piste{animation-play-state:paused}
.hpop button{flex:none;width:var(--vig,78px);height:var(--vig,78px);padding:0;border:0;border-radius:var(--vig-r,12px);overflow:hidden;cursor:zoom-in;box-shadow:var(--vig-s,0 6px 16px rgba(0,0,0,.45));outline:2px solid var(--vig-b,rgba(255,255,255,.85));outline-offset:-2px;background:#222;transition:transform .2s}
.hpop button:hover{transform:translateY(-3px) scale(1.04)}
.hpop img{width:100%;height:100%;object-fit:cover;display:block}
header.replie .hpop{max-height:0;opacity:0;margin-top:0}
header.hdr-hero{cursor:zoom-in}header.hdr-hero nav,header.hdr-hero .tools{cursor:default}
@media(min-width:700px){.hpop{margin:12px auto 0}.hpop button{width:calc(var(--vig,78px) * 1.23);height:calc(var(--vig,78px) * 1.23)}}

/* ----- Visionneuse plein écran ----- */
.vis{position:fixed;inset:0;z-index:90;background:rgba(8,8,10,.94);display:flex;align-items:center;justify-content:center;animation:visin .25s ease}
@keyframes visin{from{opacity:0}to{opacity:1}}
.vis figure{margin:0;max-width:94vw;max-height:84vh;display:flex;flex-direction:column;align-items:center}
.vis img{max-width:94vw;max-height:76vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6);object-fit:contain;animation:visimg .3s ease}
@keyframes visimg{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.vis figcaption{color:#fff;font-weight:800;margin-top:10px;text-align:center;font-size:15px}
.vis button{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.vis-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;font-size:20px}
.vis-g,.vis-d{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:14px;font-size:34px;line-height:1}
.vis-g{left:10px}.vis-d{right:10px}
.vis-b{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px;color:#ccc;font-size:13px}
.vis-del{border-radius:999px;padding:9px 16px;font-weight:800;background:var(--red)!important}

/* ----- Gestion des images de la bannière (admin) ----- */
.banl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 4px}
.banc{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.banc img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#ddd}
.banc>div{padding:8px 10px 4px;font-size:13.5px}.banc small{display:block;color:var(--muted);font-size:12px}
.banc .btn{margin:6px 10px 10px;padding:7px 10px}
.banc.bn-off{opacity:.55}.banc.bn-prog small{color:#b26a00}
.banadd{border:2px dashed #cfc8bb;background:transparent;border-radius:14px;min-height:150px;cursor:pointer;font-weight:800;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.banadd span{font-size:30px;color:var(--red)}
body.th-nuit .banc{background:#18181d;border-color:#2a2a30}

/* ----- Réglages de l'administrateur (panneau « Personnaliser ») ----- */
header.hdr-hero .hbg::after{opacity:var(--voile,1)}
header.sans-zoom .hfade{animation:none;transform:none}
header.sans-vig .hpop{display:none}
#annonce{position:relative;z-index:1;overflow:hidden;margin:10px -18px 0;background:var(--red);color:#fff;font-weight:800;font-size:13.5px;white-space:nowrap}
#annonce span{display:inline-block;padding:7px 0;padding-left:100%;animation:annonce var(--ann-v,22s) linear infinite}
@keyframes annonce{to{transform:translateX(-100%)}}
header.replie #annonce{display:none}
body.txt-grand{zoom:1.08}body.txt-tgrand{zoom:1.16}
.perso h4{margin:16px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.perso .chips{margin-bottom:4px}.perso input[type=range]{width:100%;accent-color:var(--red)}
.couls{display:flex;gap:8px;flex-wrap:wrap}.couls button{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}.couls button.on{box-shadow:0 0 0 3px var(--ink)}