@font-face{font-family:"Rozha One";src:url(fonts/rozha-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
/* Décor panoramique de l'affiche « Noël Enchanté » à explorer à la lanterne : on glisse dans le paysage, les 24 cases y sont cachées. Univers nuit unique, assumé. */
:root{
  --night:#141c4a;
  --violet:#5d3f92;
  --orchid:#b0548f;
  --snow:#f1ecf8;
  --plum:#3b2c62;
  --gold:#ffd98a;
  --text:#f7f3ff;
  --muted:rgba(247,243,255,.76);
  --glass:rgba(28,22,72,.62);
  --glass-line:rgba(255,255,255,.26);
  --f-display:"Rozha One","Didot","Bodoni 72",Georgia,serif;
  --f-badge:"Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --f-body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --f-logo:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* ---------- Scène ---------- */
.app{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;
  background:linear-gradient(180deg,#2e3c94 0%,#4a51b2 24%,#7e63c0 48%,#d07fb4 72%,#ffc9a6 100%)}
.app.dragging{cursor:grabbing}
.aurora{position:absolute;inset:-10% -10% auto;height:75%;pointer-events:none;filter:blur(40px);opacity:.6;
  background:radial-gradient(40% 35% at 78% 22%,rgba(110,200,220,.35),transparent 70%),radial-gradient(35% 30% at 20% 30%,rgba(190,120,230,.35),transparent 70%),radial-gradient(30% 25% at 60% 45%,rgba(255,170,200,.25),transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(-4%,3%,0) scale(1.08);opacity:.8}}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.layer{position:absolute;left:0;top:0;height:100%;will-change:transform;pointer-events:none}
.layer svg{position:absolute;left:0;display:block}
#cases{position:absolute;inset:0}

.moon{position:absolute;width:clamp(90px,15vh,170px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 34%,rgba(150,150,175,.55) 0 7%,transparent 8%),radial-gradient(circle at 62% 60%,rgba(150,150,175,.45) 0 10%,transparent 11%),radial-gradient(circle at 70% 28%,rgba(150,150,175,.4) 0 5%,transparent 6%),radial-gradient(circle at 38% 74%,rgba(150,150,175,.35) 0 6%,transparent 7%),radial-gradient(circle at 40% 40%,#fff,#dcdbe8 55%,#b9b6cc);
  box-shadow:0 0 40px 10px rgba(220,220,255,.35),0 0 140px 40px rgba(180,170,255,.2)}
/* Traîneau du Père Noël, avec sa banderole (messages du back-office) */
.sleigh{position:absolute;left:0;top:90px;display:flex;align-items:center;opacity:0;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 0 14px rgba(255,226,170,.35))}
.sleigh > svg{width:240px;flex:none;height:auto;overflow:visible;animation:slBob 1.1s ease-in-out infinite alternate}
.sleigh.fly{animation:fly var(--dur,12s) linear forwards}
@keyframes fly{0%{opacity:0;transform:translate(var(--x0,-300px),70px) rotate(-5deg)}
  7%,90%{opacity:1}50%{transform:translate(calc((var(--x0,-300px) + var(--x1,1500px)) / 2),8px) rotate(-3deg)}
  100%{opacity:0;transform:translate(var(--x1,1500px),-60px) rotate(-7deg)}}
@keyframes slBob{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.sl-banner{position:relative;flex:none;margin:12px 34px 0 0;padding:7px 18px 7px 16px;border-radius:6px 3px 3px 6px;white-space:nowrap;
  background:linear-gradient(180deg,#fffaf0,#f7e2bf);color:#3b2c62;font-family:var(--f-badge);font-weight:700;font-size:16px;letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(10,5,40,.4),0 0 0 1px rgba(255,255,255,.6) inset;transform-origin:100% 50%;animation:slWave 1.3s ease-in-out infinite alternate}
.sl-banner::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:10px;background:inherit;
  clip-path:polygon(100% 0,0 0,60% 50%,0 100%,100% 100%)}
.sl-banner::after{content:"";position:absolute;right:-36px;top:50%;width:38px;height:2px;background:#1c1a45;transform:rotate(-14deg);transform-origin:0 50%}
@keyframes slWave{from{transform:translateY(-2px) skewY(-2.5deg)}to{transform:translateY(3px) skewY(2deg)}}

/* Voile de nuit + lanterne */
.veil{position:absolute;inset:0;pointer-events:none;background:rgba(14,10,46,.16);
  -webkit-mask-image:radial-gradient(circle var(--r,190px) at var(--mx,50%) var(--my,50%),transparent 0,transparent 42%,rgba(0,0,0,.6) 70%,#000 100%);
  mask-image:radial-gradient(circle var(--r,190px) at var(--mx,50%) var(--my,50%),transparent 0,transparent 42%,rgba(0,0,0,.6) 70%,#000 100%)}
.lamp{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--r,190px) * .9) at var(--mx,50%) var(--my,50%),rgba(255,226,170,.16),transparent 70%)}

/* ---------- Cases cachées ---------- */
.case{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border:0;padding:0;background:none;color:inherit;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,1.5,.4,1);pointer-events:auto;touch-action:none}
.case > svg.ic{width:34px;height:34px;filter:drop-shadow(0 0 4px rgba(255,255,255,.5));transition:filter .3s}
.case .n{position:absolute;right:-2px;bottom:-2px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--f-badge);font-weight:700;font-size:12px;background:rgba(30,22,80,.85);border:1px solid rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.case .lk{position:absolute;left:-2px;top:-2px;width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(30,22,80,.85)}
.case::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,170,.55),transparent 65%);opacity:0;transition:opacity .4s}
.case:hover,.case:focus-visible,.case.near{transform:scale(1.18)}
.case:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.case.near::before,.case:hover::before{opacity:1}

.case[data-f="star"] > svg.ic,.case[data-f="bigstar"] > svg.ic{color:#fff6d8}
.case[data-f="ornament"] > svg.ic{color:#ff9cc9}
.case[data-f="gift"] > svg.ic{color:#ffd0e6}
.case[data-f="crystal"] > svg.ic{color:#dff4ff}
.case[data-f="lantern"] > svg.ic{color:var(--gold)}
.case[data-f="bell"] > svg.ic{color:#ffe08f}
.case[data-f="window"] > svg.ic{color:var(--gold)}
.case[data-f="snowflake"] > svg.ic{color:#e3f2ff}
.case[data-f="bigstar"]{width:76px;height:76px;margin:-38px 0 0 -38px}
.case[data-f="bigstar"] > svg.ic{width:58px;height:58px}

.case.locked > svg.ic{opacity:.55;filter:grayscale(.5) drop-shadow(0 0 2px rgba(255,255,255,.3))}
.case.today::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;animation:ring 2.2s ease-out infinite}
.case.today.near::after{border-color:rgba(255,217,138,.9)}
@keyframes ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.7);opacity:0}}
.case.today > svg.ic{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(4deg)}}
.case.open .n{background:var(--gold);color:var(--plum);border-color:#fff}
.case.open > svg.ic{filter:drop-shadow(0 0 10px rgba(255,217,138,.9))}
.case.seen:not(.open) .n{border-color:var(--gold)}
.case.flash{animation:flash 1.2s ease-out}
@keyframes flash{30%{transform:scale(1.6)}}

/* ---------- Interface ---------- */
.hud{position:fixed;left:0;right:0;z-index:20;pointer-events:none;display:flex;gap:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hud > *{pointer-events:auto}
.hud.top{top:0;padding-top:calc(14px + env(safe-area-inset-top,0px));justify-content:space-between;align-items:flex-start}
.hud.bottom{bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.logo{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:var(--text);filter:drop-shadow(0 2px 8px rgba(10,5,40,.5))}
.logo img{display:block;width:118px;height:auto}
.logo span{font-family:var(--f-logo);font-weight:300;font-size:22px;letter-spacing:.32em;line-height:1;margin-right:-.32em}
.status{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px 18px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:min(460px,calc(100vw - 32px))}
.status .d{font-family:var(--f-badge);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.status .t{font-family:var(--f-badge);font-weight:600;font-size:17px;line-height:1.25}
.demo{font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--plum);border:0;font-family:var(--f-badge);font-weight:700;text-transform:uppercase;cursor:pointer}
.sunday{flex:none;position:relative;overflow:hidden;perspective:500px;background:rgba(30,40,100,.72);border:1px solid rgba(255,255,255,.14);padding:8px 12px;text-align:center;font-family:var(--f-badge);font-weight:700;text-transform:uppercase;line-height:1.05;max-width:170px}
.sunday b{display:block;font-size:17px}.sunday small{display:block;font-size:11px;font-weight:600}
.tm-in{transform-origin:50% 50%;backface-visibility:hidden}
/* Animations du badge, jouées à intervalle régulier */
.sunday.fx-flip .tm-in{animation:tmFlip .8s ease-in-out}
@keyframes tmFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.sunday.fx-fade .tm-in{animation:tmFade .8s ease-in-out}
@keyframes tmFade{50%{opacity:0}}
.sunday.fx-bounce{animation:tmBounce .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes tmBounce{0%,100%{transform:none}30%{transform:translateY(-7px) scale(1.06)}55%{transform:translateY(1px) scale(.98)}75%{transform:translateY(-2px)}}
.sunday.fx-shine{animation:tmGlow 1s ease-in-out}
.sunday.fx-shine::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,226,160,.85),transparent);animation:tmSweep .9s ease-in-out}
@keyframes tmSweep{to{left:120%}}
@keyframes tmGlow{50%{box-shadow:0 0 24px 4px rgba(255,217,138,.55);border-color:rgba(255,217,138,.8)}}

.strip-wrap{min-width:0;flex:1 1 520px;max-width:900px;padding:10px 12px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.strip-head{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-badge);font-weight:600;font-size:13px;margin-bottom:8px}
.strip-head span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.strip{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px}
.strip::-webkit-scrollbar{display:none}
.slot{flex:1 0 30px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(247,243,255,.45);
  font-family:var(--f-badge);font-weight:600;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums;padding:0}
.slot.seen{color:var(--text);border-color:rgba(255,217,138,.6)}
.slot.open{background:linear-gradient(180deg,#ffe6a8,#f4bf62);color:var(--plum);border-color:#fff}
.slot.today{color:var(--text);border-color:var(--gold);box-shadow:0 0 12px rgba(255,217,138,.6);animation:slotglow 1.8s ease-in-out infinite}
@keyframes slotglow{50%{box-shadow:0 0 20px rgba(255,217,138,.95)}}
.slot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--f-badge);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.05em;
  background:linear-gradient(180deg,#ffe6a8,#f4bf62);color:var(--plum);box-shadow:0 6px 24px rgba(255,200,100,.45);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,200,100,.6)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.ghost{background:var(--glass);color:var(--text);box-shadow:none;border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn svg{width:18px;height:18px}

.hint{position:fixed;left:50%;top:50%;z-index:15;transform:translate(-50%,-50%);pointer-events:none;text-align:center;font-family:var(--f-badge);font-weight:600;font-size:18px;
  text-shadow:0 2px 12px rgba(10,5,40,.8);transition:opacity .8s}
.hint svg{width:54px;height:54px;display:block;margin:0 auto 6px;animation:swipe 2s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translateX(-22px)}50%{transform:translateX(22px)}}
.hint.off{opacity:0}

/* Intro façon affiche */
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;text-align:center;padding:24px max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(70% 60% at 50% 45%,rgba(30,24,90,.35),rgba(10,8,40,.75));transition:opacity 1s,transform 1.2s cubic-bezier(.6,0,.2,1)}
.intro.gone{opacity:0;transform:scale(1.4);pointer-events:none}
.eyebrow{display:inline-block;transform:rotate(-3deg);background:var(--plum);padding:6px 16px;font-family:var(--f-badge);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,2vw,19px)}
h1{margin:8px 0 0;font-family:var(--f-display);font-weight:400;line-height:.86;text-shadow:0 0 34px rgba(255,255,255,.4)}
h1 .l1{display:block;font-size:clamp(76px,16vw,180px);letter-spacing:.02em}
h1 .l2{display:block;font-size:clamp(34px,6.6vw,78px);letter-spacing:.04em}
.intro p{max-width:46ch;margin:18px auto 24px;color:var(--muted);font-size:clamp(15px,1.8vw,18px);text-wrap:balance}
.intro .btn{font-size:17px;padding:16px 28px}

/* Fenêtres */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-left,0px));
  background:rgba(12,10,40,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s;-webkit-user-select:text;user-select:text}
@keyframes fade{from{opacity:0}}
.card{position:relative;width:min(520px,100%);max-height:calc(100% - 20px);overflow:auto;border-radius:28px;padding:34px 28px 26px;text-align:center;color:var(--plum);
  background:radial-gradient(120% 70% at 50% 0%,#fffaf0,#f8e2ee 55%,#e3d3f6);box-shadow:0 30px 80px rgba(10,5,40,.6),0 0 0 1px rgba(255,255,255,.7) inset;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.card .day{font-family:var(--f-badge);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--violet)}
.card .big-n{font-family:var(--f-display);font-size:96px;line-height:.9;margin-top:4px;background:linear-gradient(180deg,#d4699f,#6c47a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card svg.ic{width:70px;height:70px;color:var(--orchid);margin:6px 0}
.card h3{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.05;margin:4px 0 10px;text-wrap:balance}
.card p{margin:0 auto 14px;max-width:40ch;color:#4b3f72}
.tag{display:inline-block;transform:rotate(-2deg);background:var(--plum);color:#fff;font-family:var(--f-badge);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.04em;padding:5px 12px}
.card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.card .btn.ghost{color:var(--plum);border-color:rgba(60,40,100,.25);background:rgba(60,40,100,.06);backdrop-filter:none}
.card.locked-card .big-n{background:linear-gradient(180deg,#9b8fc4,#5d4f8d);-webkit-background-clip:text;background-clip:text}
.x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(60,40,100,.1);color:var(--plum);font-size:22px;cursor:pointer;line-height:1}
.x:focus-visible{outline:2px solid var(--violet)}

form{display:grid;gap:12px;text-align:left;margin-top:14px}
label{font-family:var(--f-badge);font-weight:600;font-size:14px}
.field{display:grid;gap:5px}
input[type=text],input[type=email]{width:100%;padding:13px 15px;border-radius:12px;border:1px solid rgba(60,40,100,.25);background:#fff;color:var(--plum);font:inherit;font-size:16px}
input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-family:var(--f-body);font-weight:400;font-size:13px;color:#5c5080}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--violet);flex:none}
.err{color:#b4234d;font-size:14px;min-height:1.2em;margin:0}
.note{font-size:13px;color:var(--violet)}

.toast{position:fixed;left:50%;top:calc(110px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);opacity:0;z-index:55;pointer-events:none;
  background:var(--plum);color:#fff;border:1px solid var(--glass-line);padding:12px 18px;border-radius:14px;font-family:var(--f-badge);font-weight:500;
  box-shadow:0 10px 30px rgba(10,5,40,.5);transition:.35s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

#fx{position:fixed;inset:0;z-index:60}

.preview{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(120px + env(safe-area-inset-top,0px));z-index:30;width:min(300px,calc(100% - 24px));padding:12px 14px;border-radius:14px;background:rgba(18,14,50,.92);border:1px solid var(--gold);font-size:13px}
.preview h4{margin:0 0 8px;font-family:var(--f-badge);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-size:12px}
.preview .r{display:flex;gap:8px;align-items:center}
.preview input{flex:1;accent-color:var(--gold)}
.preview output{font-family:var(--f-badge);font-weight:700;min-width:80px}
.preview .b{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.preview button{font:inherit;font-size:12px;padding:6px 9px;border-radius:9px;border:1px solid var(--glass-line);background:rgba(255,255,255,.08);color:var(--text);cursor:pointer}

.mail{width:min(600px,100%);max-height:calc(100% - 20px);overflow:auto;border-radius:14px;background:#fff;color:#2d2552;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .5s;position:relative}
.mail-meta{padding:14px 56px 14px 18px;border-bottom:1px solid #e6e1f0;font-size:13.5px;color:#5c5480;display:grid;gap:3px}
.mail-meta b{color:#2d2552}
.mail-hero{padding:28px 22px 24px;text-align:center;color:#fff;background:linear-gradient(180deg,#1d2560,#5a3e91 60%,#b0548f)}
.mail-hero h5{margin:14px 0 0;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.05}
.mail-hero p{margin:6px 0 0;opacity:.85;font-size:14px}
.mail-body{padding:24px 26px 30px;text-align:center}
.mail-body h6{font-family:var(--f-display);font-weight:400;font-size:28px;margin:6px 0 8px}
.mail-body p{margin:0 0 14px;color:#4b3f72}
.mail-foot{padding:14px 18px;background:#f4f1f9;font-size:12px;color:#6f6893;text-align:center}

@media (max-width:720px){
  .sunday{flex:none;padding:5px 7px;max-width:118px;align-self:flex-start}.sunday b{font-size:12px}.sunday small{font-size:9px}
  .status{flex:1 1 auto;min-width:0}
  .sl-banner{font-size:13px;padding:5px 12px 5px 12px;margin-right:26px}.sl-banner::after{right:-28px;width:30px}
  .sleigh > svg{width:150px}
  .logo img{width:92px}
  .status{padding:8px 12px}.status .t{font-size:15px}
  .hud.bottom{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .strip-wrap{flex:none;max-width:none}
  .hud.bottom > *{min-width:0;width:100%}
  .actions{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
  .actions .btn{min-width:0;padding:12px 8px;font-size:13px;white-space:normal;line-height:1.1}
  .case{width:46px;height:46px;margin:-23px 0 0 -23px}.case > svg.ic{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Formulaire : piège à robots et mentions */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal{font-size:12.5px;color:#5c5080;margin:0}
.legal a,.intro .links a{color:inherit}
.btn:disabled{opacity:.7;cursor:wait;transform:none}
.intro .links{margin-top:22px;font-size:13px;color:var(--muted)}
.intro .links a{color:var(--muted)}
.noscript{position:fixed;inset:auto 16px 16px;z-index:90;padding:14px;border-radius:12px;background:var(--plum);text-align:center}

[hidden]{display:none!important}

/* ===== Cases agrandies : médaillons ===== */
.case{width:78px;height:78px;margin:-39px 0 0 -39px;animation:float 4.5s ease-in-out infinite;animation-delay:var(--bob,0s)}
.case > svg.ic{width:48px;height:48px;position:relative;z-index:1}
.case .halo{position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--spark,#ffd98a) 45%,transparent) 0%,rgba(255,255,255,.08) 55%,transparent 72%);
  border:1.5px solid rgba(255,255,255,.35);box-shadow:0 0 22px color-mix(in srgb,var(--spark,#ffd98a) 50%,transparent),inset 0 0 14px rgba(255,255,255,.25);
}
.case .n{right:-4px;bottom:-4px;min-width:30px;height:30px;font-size:16px;z-index:2}
.case .lk{width:22px;height:22px;left:-2px;top:-2px;z-index:2}
.case::before{inset:-18px}
.case[data-f="bigstar"]{width:110px;height:110px;margin:-55px 0 0 -55px}
.case[data-f="bigstar"] > svg.ic{width:74px;height:74px}
.case.locked .halo{border-style:dashed;opacity:.7}
.case.today .halo{border-color:var(--spark,#ffd98a);animation:halo 1.6s ease-in-out infinite}
@keyframes halo{50%{box-shadow:0 0 44px var(--spark,#ffd98a),inset 0 0 18px rgba(255,255,255,.5)}}
.case.today::after{inset:-10px;border-width:3px}
.case.open .halo{background:radial-gradient(circle,color-mix(in srgb,var(--spark,#ffd98a) 70%,transparent),transparent 72%);border-color:#fff}
@keyframes float{50%{translate:0 -5px}}
/* Logo partenaire sur la case */
.case .pl{position:absolute;left:-10px;bottom:-8px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 2px 10px rgba(10,5,40,.5),0 0 0 2px var(--spark,#ffd98a);z-index:3}
.case .pl img{width:80%;height:80%;object-fit:contain}
.case.sponsored .halo{border-color:var(--spark,#ffd98a)}
/* Teinte d'ambiance du partenaire du jour */
.tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s;
  background:radial-gradient(70% 55% at 50% 30%,var(--tint,transparent),transparent 72%),linear-gradient(180deg,transparent 35%,var(--tint,transparent) 120%)}
.app.tinted .tint{opacity:.32}

/* ===== Partenaires dans les fenêtres ===== */
.offered{margin-top:18px;display:flex;justify-content:center}
.offered a,.offered > span,.offered > img{color:inherit}
.offered a,.offered{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#4b3f72;text-decoration:none}
.offered img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;padding:3px;box-shadow:0 1px 4px rgba(40,20,80,.2)}
.offered a:hover span{text-decoration:underline}
.card.inter{background:radial-gradient(120% 70% at 50% 0%,#fffaf0,color-mix(in srgb,var(--spark,#ffd98a) 25%,#f8e2ee) 60%,#e3d3f6)}
.card.inter .plogo{display:block;max-width:140px;max-height:56px;margin:8px auto 4px;object-fit:contain}
.card.inter .pimg{display:block;margin:10px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(40,20,80,.25);max-width:100%}
.card.inter .pimg img{display:block;width:100%;max-height:52vh;object-fit:contain;background:#fff}

/* ===== Vie du décor ===== */
.bl{animation:blink 2.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.garl{animation:chase 1.4s linear infinite}
@keyframes chase{to{stroke-dashoffset:-22}}
.win{animation:fire 3.2s ease-in-out infinite}.win.w2{animation-delay:-1.3s}
@keyframes fire{0%,100%{opacity:1}30%{opacity:.82}55%{opacity:.95}70%{opacity:.78}}
.flame{transform-box:fill-box;transform-origin:center;animation:flame 2.4s ease-in-out infinite}
@keyframes flame{50%{transform:scale(1.15);opacity:.8}}
.smoke{transform-box:fill-box;transform-origin:center;opacity:0;animation:smoke 6s ease-out infinite}
.smoke.s2{animation-delay:-2s}.smoke.s3{animation-delay:-4s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.7}100%{opacity:0;transform:translate(40px,-150px) scale(2.6)}}
.wave{transform-box:fill-box;transform-origin:0% 100%;animation:wave 3s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-18deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-14deg)}}
.shim{animation:shim 3s ease-in-out infinite}
@keyframes shim{50%{stroke-opacity:.15}}
.gl{animation:tw 3.4s ease-in-out infinite;opacity:.4}
@keyframes tw{50%{opacity:1}}
@media (max-width:720px){
  /* Mobile : médaillons plus gros, faciles à repérer et à toucher */
  .case{width:88px;height:88px;margin:-44px 0 0 -44px}.case > svg.ic{width:56px;height:56px}
  .case .n{min-width:32px;height:32px;font-size:17px;right:-6px;bottom:-6px}
  .case .lk{width:26px;height:26px}
  .case .pl{width:40px;height:40px}
  .case[data-f="bigstar"]{width:120px;height:120px;margin:-60px 0 0 -60px}.case[data-f="bigstar"] > svg.ic{width:80px;height:80px}
}
@media (prefers-reduced-motion:reduce){.case,.bl,.garl,.win,.flame,.smoke,.wave,.shim,.gl{animation:none!important}}

/* ===== Jeux ===== */
.case .gm{position:absolute;right:-8px;top:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;z-index:3;
  background:linear-gradient(180deg,#ffe6a8,#f4bf62);box-shadow:0 2px 8px rgba(10,5,40,.45);animation:gm 2.4s ease-in-out infinite}
.case .gm svg{width:18px;height:18px;color:#3b2c62}
@keyframes gm{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.08)}}
.case.locked .lk + .pl + .gm{right:-8px}
.game-cta{margin:18px auto 0;padding:14px 16px 16px;border-radius:18px;max-width:380px;
  background:linear-gradient(160deg,rgba(255,217,138,.35),rgba(176,84,143,.12));border:1px solid rgba(176,84,143,.25)}
.game-kicker{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-badge);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--orchid)}
.game-kicker svg{width:20px;height:20px}
.game-prize{margin:6px 0 12px;color:#3b2c62}
.game-closed{margin:0;font-size:14px;color:#6c5f95}
.card.game .hint-txt{font-size:12.5px;color:#6c5f95}
.card.game .small,.card .small{font-size:13px;color:#6c5f95}
.wheel-wrap{position:relative;width:min(340px,78vw);margin:14px auto 4px}
.wheel-wrap canvas{position:static;inset:auto;pointer-events:auto;width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(40,20,80,.35))}
.pointer{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-16px;z-index:2;
  border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #3b2c62;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px auto 0;padding:14px;max-width:340px;border-radius:20px;
  background:linear-gradient(180deg,#3b2c62,#5d3f92);box-shadow:inset 0 4px 14px rgba(0,0,0,.35),0 0 0 4px var(--spark,#ffd98a)}
.reel{height:96px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#e9e2f6,#fff 40%,#fff 60%,#e9e2f6)}
.reel-strip{will-change:transform;display:block}
.sym{height:96px;display:grid;place-items:center}
.sym svg{width:56px;height:56px;color:#b0548f}
.slots-base{height:14px;max-width:300px;margin:0 auto;border-radius:0 0 14px 14px;background:#2b2050}
.big-win{font-family:var(--f-display);font-size:64px;line-height:1;margin:6px 0 8px;
  background:linear-gradient(180deg,#f4bf62,#b0548f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.code{display:inline-block;margin:6px 0 12px;padding:12px 20px;border:2px dashed var(--orchid);border-radius:14px;background:#fff;
  font-family:var(--f-badge);font-weight:700;font-size:clamp(22px,6vw,30px);letter-spacing:.12em;color:#3b2c62;-webkit-user-select:all;user-select:all}

/* ===== Plus clair, plus lisible ===== */
.aurora{opacity:1;filter:blur(36px) saturate(1.3)}
.ground{position:absolute;left:0;right:0;bottom:0;top:var(--ground-top,100%);background:linear-gradient(180deg,#ece5f7,#d9cff0);pointer-events:none}
.case .halo{background:radial-gradient(circle,color-mix(in srgb,var(--spark,#ffd98a) 60%,transparent) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.06) 70%);
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 30px color-mix(in srgb,var(--spark,#ffd98a) 70%,transparent),inset 0 0 16px rgba(255,255,255,.4)}
.case > svg.ic{filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 2px 3px rgba(30,15,70,.4))}
.case .n{background:#fff;color:#3b2c62;border:2px solid var(--spark,#ffd98a);box-shadow:0 2px 8px rgba(20,10,60,.4)}
.case.locked > svg.ic{opacity:.82;filter:grayscale(.25) drop-shadow(0 0 4px rgba(255,255,255,.6))}
.case.locked .halo{opacity:.9}
.case.open .n{background:var(--gold);color:#3b2c62;border-color:#fff}
/* Cases partenaires : plus grandes */
.case.sponsored{width:104px;height:104px;margin:-52px 0 0 -52px;z-index:2}
.case.sponsored > svg.ic{width:62px;height:62px}
.case.sponsored .halo{border-width:3px;border-color:var(--spark,#ffd98a)}
.case.sponsored .pl{width:46px;height:46px;left:-12px;bottom:-10px}
.case.sponsored .n{min-width:34px;height:34px;font-size:17px}
/* Mobile */
@media (max-width:720px){
  .case{width:70px;height:70px;margin:-35px 0 0 -35px}.case > svg.ic{width:44px;height:44px}
  .case.sponsored{width:90px;height:90px;margin:-45px 0 0 -45px}.case.sponsored > svg.ic{width:54px;height:54px}
  .case.sponsored .pl{width:40px;height:40px}
  .hud.top{padding-top:calc(8px + env(safe-area-inset-top,0px));gap:8px}
  .logo img{width:74px}
  .status{padding:6px 10px;border-radius:12px}.status .d{font-size:11px}.status .t{font-size:13.5px}
  .hud.bottom{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px}
  .strip-wrap{padding:7px 8px;border-radius:14px}
  .strip-head{font-size:12px;margin-bottom:5px}
  .slot{flex:1 0 28px;height:28px;font-size:12px;border-radius:7px}
  .actions .btn{padding:10px 8px;font-size:12.5px}
  .hint{font-size:15px}
  .card{padding:26px 18px 20px;border-radius:22px}
  .card .big-n{font-size:72px}.card h3{font-size:28px}
  .toast{top:calc(84px + env(safe-area-inset-top,0px))}
}
#Lcases{z-index:1}
@media (max-width:720px){
  .case{width:60px;height:60px;margin:-30px 0 0 -30px}.case > svg.ic{width:38px;height:38px}
  .case .n{min-width:24px;height:24px;font-size:13px;right:-6px;bottom:-6px}
  .case .lk{width:20px;height:20px}
  .case.sponsored{width:80px;height:80px;margin:-40px 0 0 -40px}.case.sponsored > svg.ic{width:48px;height:48px}
  .case.sponsored .pl{width:34px;height:34px;left:-10px;bottom:-8px}
  .case[data-f="bigstar"]{width:80px;height:80px;margin:-40px 0 0 -40px}.case[data-f="bigstar"] > svg.ic{width:52px;height:52px}
}

/* ===== Roue de la fortune ===== */
.card.wheel-card{background:radial-gradient(120% 80% at 50% 0%,#4a3d9a 0%,#2b2468 55%,#1b1748 100%);color:#fff;
  box-shadow:0 30px 80px rgba(10,5,40,.7),0 0 0 1px rgba(255,255,255,.18) inset}
.card.wheel-card .day{color:var(--gold)}
.card.wheel-card h3{color:#fff;text-shadow:0 0 18px rgba(255,217,138,.55)}
.wheel-wrap{position:relative;width:min(380px,84vw);margin:10px auto 0}
.wheel-wrap canvas{position:static;inset:auto;pointer-events:auto;width:100%;height:auto;display:block}
.pin{position:absolute;left:50%;top:-14px;width:46px;height:62px;margin-left:-23px;z-index:2;transform-origin:50% 30%;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.45));transition:transform .18s cubic-bezier(.3,1.8,.5,1)}
.pin.tick{animation:tick .16s ease-out}
@keyframes tick{0%{transform:rotate(0)}35%{transform:rotate(-22deg)}100%{transform:rotate(0)}}
.wheel-legend{margin:12px auto 0;font-size:13.5px;color:rgba(255,255,255,.82);max-width:42ch}
.wheel-legend strong{color:var(--gold)}
.pointer{display:none}
.card.wheel-card .wheel-legend{color:rgba(255,255,255,.85)}
.card.wheel-card .wheel-legend strong{color:var(--gold)}
.qr{width:170px;margin:4px auto 10px;padding:8px;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(40,20,80,.18)}
.qr svg{display:block;width:100%;height:auto}
.voucher{display:block;width:100%;max-width:340px;margin:10px auto 0;border-radius:14px;box-shadow:0 8px 24px rgba(40,20,80,.25)}
.inter-actions{flex-direction:column;align-items:center}
.inter-actions .btn{min-width:min(320px,100%)}
.btn.pcta{flex-direction:column;gap:2px;padding:10px 22px;text-transform:none;letter-spacing:0;color:var(--plum);border-color:rgba(60,40,100,.28);background:rgba(255,255,255,.55);backdrop-filter:none}
.btn.pcta small{font-family:var(--f-body);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6c5f95}
.btn.pcta span{font-size:15px}
a.btn{text-decoration:none}
.btn.save-btn{white-space:normal}

/* ===== 100 % gagnant & drive-to-store ===== */
.game-cta.always{border-color:#f4bf62;background:linear-gradient(160deg,rgba(255,217,138,.55),rgba(255,255,255,.4))}
.always-badge{display:inline-block;margin:6px 0 0;padding:3px 12px;border-radius:999px;background:linear-gradient(180deg,#ffe6a8,#f4bf62);color:#3b2c62;font-family:var(--f-badge);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ticket{display:inline-block;margin:10px 0 12px;padding:14px 26px;border-radius:16px;background:#3b2c62;color:#fff;
  font-family:var(--f-badge);font-weight:700;font-size:clamp(34px,10vw,46px);letter-spacing:.22em;box-shadow:0 10px 26px rgba(40,20,80,.35);-webkit-user-select:all;user-select:all}
.waiting{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:4px 0 12px;font-size:14px;color:#5c5080}
.waiting .dot{width:9px;height:9px;border-radius:50%;background:var(--orchid);animation:wdot 1.2s ease-in-out infinite}
.waiting .dot:nth-child(2){animation-delay:.2s}.waiting .dot:nth-child(3){animation-delay:.4s}
@keyframes wdot{50%{transform:translateY(-6px);opacity:.4}}

/* ===== Plus lumineux ===== */
.case .halo{box-shadow:0 0 30px color-mix(in srgb,var(--spark,#ffd98a) 65%,transparent),inset 0 0 16px rgba(255,255,255,.35)}
.case.locked .halo{opacity:.85}
.case.locked > svg.ic{opacity:.8;filter:grayscale(.2) drop-shadow(0 0 5px rgba(255,255,255,.6))}
/* Mobile : médaillons nettement plus gros (règle finale, remplace les tailles précédentes) */
@media (max-width:720px){
  .case{width:88px;height:88px;margin:-44px 0 0 -44px}.case > svg.ic{width:56px;height:56px}
  .case .n{min-width:32px;height:32px;font-size:17px;right:-6px;bottom:-6px}
  .case .lk{width:26px;height:26px;padding:4px}
  .case .gm{width:34px;height:34px}.case .gm svg{width:20px;height:20px}
  .case.sponsored{width:108px;height:108px;margin:-54px 0 0 -54px}.case.sponsored > svg.ic{width:64px;height:64px}
  .case.sponsored .pl{width:44px;height:44px;left:-12px;bottom:-10px}
  .case[data-f="bigstar"]{width:124px;height:124px;margin:-62px 0 0 -62px}.case[data-f="bigstar"] > svg.ic{width:84px;height:84px}
}

/* ===== Fluidité et ergonomie ===== */
/* Lanternes célestes */
.skyl{position:absolute;inset:0 0 35% 0;pointer-events:none;overflow:hidden}
.skyl i{position:absolute;bottom:-40px;width:calc(14px * var(--s,1));height:calc(18px * var(--s,1));border-radius:40% 40% 30% 30% / 30% 30% 45% 45%;
  background:radial-gradient(circle at 50% 70%,#fff6d0 0,#ffc76a 45%,#e8794f 100%);opacity:0;
  box-shadow:0 0 calc(18px * var(--s,1)) calc(4px * var(--s,1)) rgba(255,190,110,.55);animation:rise var(--d,28s) linear infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}50%{transform:translate(var(--sw,30px),-38vh)}
  85%{opacity:.85}100%{transform:translate(0,-72vh) scale(.6);opacity:0}}
/* Fenêtres : fermeture en douceur */
.overlay.closing{animation:ovOut .22s ease-in forwards}
.overlay.closing > *{animation:cardOut .22s ease-in forwards}
@keyframes ovOut{to{opacity:0}}
@keyframes cardOut{to{transform:scale(.94) translateY(8px);opacity:0}}
/* Retour visuel au toucher */
.btn,.slot,.case{-webkit-tap-highlight-color:transparent}
.btn{transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,background .2s}
.btn:active{transform:scale(.95)}
.slot{transition:background .35s,border-color .35s,color .35s,transform .15s}
.slot:active{transform:scale(.9)}
.case:active{transform:scale(.94)}
/* Texte d'état : fondu quand il change */
.status .t{transition:opacity .18s}
.status .t.swap{opacity:0}
.btn .sm{display:none}
@media (max-width:720px){
  /* Cases : grosses mais pas envahissantes */
  .case{width:76px;height:76px;margin:-38px 0 0 -38px}.case > svg.ic{width:48px;height:48px}
  .case .n{min-width:28px;height:28px;font-size:15px;right:-5px;bottom:-5px}
  .case .lk{width:24px;height:24px;padding:4px}
  .case .gm{width:30px;height:30px}.case .gm svg{width:18px;height:18px}
  .case.sponsored{width:94px;height:94px;margin:-47px 0 0 -47px}.case.sponsored > svg.ic{width:56px;height:56px}
  .case.sponsored .pl{width:40px;height:40px;left:-10px;bottom:-8px}
  .case[data-f="bigstar"]{width:108px;height:108px;margin:-54px 0 0 -54px}.case[data-f="bigstar"] > svg.ic{width:72px;height:72px}
  /* Barre du bas compacte : boutons en pastilles alignées à droite, frise sous eux */
  .hud.bottom{flex-direction:column;align-items:stretch;gap:8px}
  .hud.bottom > .actions{width:auto;align-self:flex-end;display:flex;gap:8px}
  .actions .btn{width:auto;min-width:0;height:40px;padding:0 15px;font-size:13px;white-space:nowrap;gap:7px;line-height:1}
  .actions .btn svg{width:16px;height:16px}
  .btn .lg{display:none}.btn .sm{display:inline}
  .strip-wrap{padding:8px 10px 9px}
  .slot{flex:0 0 32px;height:32px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.skyl{display:none}}
@media (max-width:720px){
  .hud.bottom > .actions{order:-1}
  .moon{width:84px}
  .skyl i{width:calc(18px * var(--s,1));height:calc(23px * var(--s,1))}
}
/* Cadre anti-robot : n'apparaît que si Cloudflare demande une vérification */
.cf-float{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80}
.cf-float:empty{display:none}
/* Mobile : boutons Indice et E-mail à côté de la frise, cases plus grosses */
@media (max-width:720px){
  .hud.bottom{flex-direction:row;align-items:stretch;gap:8px}
  .hud.bottom > .strip-wrap{flex:1 1 auto;width:auto;min-width:0}
  .hud.bottom > .actions{order:2;width:auto;align-self:stretch;display:flex;flex-direction:column;gap:6px}
  .actions .btn{flex:1;width:58px;height:auto;min-height:0;padding:4px;flex-direction:column;gap:2px;font-size:10.5px;letter-spacing:.02em;border-radius:14px}
  .actions .btn svg{width:18px;height:18px}
  .strip-head{font-size:11.5px;margin-bottom:5px}
  .case{width:84px;height:84px;margin:-42px 0 0 -42px}.case > svg.ic{width:54px;height:54px}
  .case .n{min-width:30px;height:30px;font-size:16px}
  .case.sponsored{width:102px;height:102px;margin:-51px 0 0 -51px}.case.sponsored > svg.ic{width:62px;height:62px}
  .case[data-f="bigstar"]{width:116px;height:116px;margin:-58px 0 0 -58px}.case[data-f="bigstar"] > svg.ic{width:78px;height:78px}
}
@media (max-width:720px){
  .hud.bottom{flex-wrap:nowrap}
  .hud.bottom > .strip-wrap{flex:1 1 0}
}
/* Bandeau du haut : apparaît quelques secondes puis s'efface pour libérer le décor */
.status{opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .5s,transform .5s cubic-bezier(.2,1.2,.4,1)}
.status.on{opacity:1;transform:none;pointer-events:auto}
/* Accès au jeu des Lutins farceurs */
.arcade-link{position:fixed;z-index:21;left:14px;top:calc(92px + env(safe-area-inset-top,0px));display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,230,168,.95),rgba(244,191,98,.95));color:#3b2c62;text-decoration:none;font-family:var(--f-badge);font-weight:700;font-size:13px;
  box-shadow:0 6px 20px rgba(255,200,100,.45);animation:arcPulse 3s ease-in-out infinite;transition:transform .15s}
.arcade-link svg{width:22px;height:22px}
.arcade-link:active{transform:scale(.95)}
@keyframes arcPulse{50%{box-shadow:0 6px 28px rgba(255,200,100,.8)}}
.intro .links a[href="/jeu"]{color:var(--gold);font-weight:700}
@media (max-width:720px){.arcade-link{top:calc(78px + env(safe-area-inset-top,0px));left:10px;font-size:12px;padding:6px 11px 6px 8px}.arcade-link svg{width:19px;height:19px}}
@media (prefers-reduced-motion:reduce){.arcade-link{animation:none}}
.status{visibility:hidden}
.status.on{visibility:visible}
.status .d:empty{display:none}
.status{transition:opacity .5s,transform .5s cubic-bezier(.2,1.2,.4,1),visibility 0s linear .5s}
.status.on{transition:opacity .5s,transform .5s cubic-bezier(.2,1.2,.4,1),visibility 0s}