/* ── Police Last Christmas ──────────────────────────────────────
   AVERTISSEMENT : fichier extrait de la maquette de démonstration.
   Licence usage personnel uniquement → remplacer par la version
   commerciale avant mise en ligne.
   ─────────────────────────────────────────────────────────────── */
@font-face { font-family:"LastChristmas"; font-weight:300; font-style:normal; font-display:swap;
  src:url(LastChristmas-300.woff) format("woff") }
@font-face { font-family:"LastChristmas"; font-weight:400; font-style:normal; font-display:swap;
  src:url(LastChristmas-400.woff) format("woff") }
@font-face { font-family:"LastChristmas"; font-weight:700; font-style:normal; font-display:swap;
  src:url(LastChristmas-700.woff) format("woff") }

/* ── Variables ───────────────────────────────────────────────── */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg-a: #0e3626; --bg-b: #06180f; --glow: rgba(255,200,110,.16);
  --green: #003d20; --green-2: #0f5a3a;
  --kraft: #bc9a5b; --kraft-hi: #e3c98f;
  --red: #d9453c; --red-deep: #b8362e;
  --white: #fff; --text: #fff; --muted: #d8e4dc;
  --sheet: #fbf6ea; --sheet-text: #262016; --sheet-muted: #6a5a3c;
  --sheet-line: rgba(188,154,91,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg-a:#0a2a1d; --bg-b:#041109; --glow:rgba(255,200,110,.10); }
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: inherit }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px) }
body {
  margin: 0; min-height: 100%; color: var(--text);
  font-family: "Arimo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse at 15% 0%, var(--glow), transparent 55%),
    linear-gradient(180deg, var(--bg-a), var(--bg-b) 75%),
    #06180f;
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; filter: blur(2px);
  background:
    radial-gradient(circle at 8% 62%, rgba(255,214,130,.16) 0 26px, transparent 27px),
    radial-gradient(circle at 92% 38%, rgba(255,214,130,.14) 0 34px, transparent 35px),
    radial-gradient(circle at 70% 85%, rgba(255,226,160,.10) 0 22px, transparent 23px),
    radial-gradient(circle at 30% 92%, rgba(255,226,160,.10) 0 30px, transparent 31px);
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* ── Snow canvas ──────────────────────────────────────────────── */
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1 }

/* ── Page wrapper ─────────────────────────────────────────────── */
.page { position: relative; z-index: 2 }

/* ── Barre démo / preview ─────────────────────────────────────── */
.demo {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center;
  padding: .5rem 1rem; background: rgba(0,0,0,.82); color: var(--muted); font-size: .78rem;
  border-bottom: 1px solid rgba(188,154,91,.4);
}
.demo button {
  font: inherit; color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(188,154,91,.6); border-radius: 6px; padding: .25rem .6rem; cursor: pointer;
}
.demo button:hover { background: rgba(188,154,91,.3) }

/* ── Flocons décoratifs ───────────────────────────────────────── */
.fx { position: absolute; pointer-events: none; z-index: 0 }
.fx.gold { color: #c9a24f; opacity: .9 }
.fx.white { color: #fff; animation: tw 3.6s ease-in-out infinite }
.fx svg, .fx use { width: 100%; height: 100%; stroke: currentColor; stroke-width: .8; fill: none }
@keyframes tw { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  --hh: clamp(500px, 46vw, 740px);
  position: relative; width: 100%;
  min-height: calc(var(--hh) - 100px);
  overflow: hidden; isolation: isolate;
  background: #0c2419; display: flex; align-items: center;
}
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: calc(var(--hh) * .95); max-width: 70%; z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78% }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,24,15,.9) 0, rgba(6,24,15,.55) 42%, rgba(6,24,15,0) 72%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6,24,15,.55));
}
.hero-inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 56px clamp(20px,5vw,64px); position: relative;
}
.kicker {
  display: inline-flex; align-items: center; gap: clamp(10px,1.6vw,18px);
  padding: 0; background: none; border-radius: 0; box-shadow: none;
  margin: 0 0 clamp(10px,2vw,20px); font-weight: 700;
  letter-spacing: .42em; font-size: clamp(.85rem,1.8vw,1.3rem);
  text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.kicker::before, .kicker::after {
  content: ""; flex: 0 0 auto; width: clamp(24px,4vw,56px); height: 2px; background: var(--kraft);
}
h1.slogan {
  margin: 0; font-family: "LastChristmas","Brush Script MT",cursive;
  font-weight: 400; color: #fff; line-height: 1.08;
  text-shadow: 2px 2px 0 var(--green), 4px 4px 0 var(--green), 6px 8px 12px rgba(0,0,0,.35);
}
h1.slogan span { display: block }
.l1 { font-size: clamp(3rem,7vw,5.6rem) }
.l2 { font-size: clamp(2.2rem,5vw,4rem) }
.l3 { font-size: clamp(2.6rem,6.4vw,5.2rem) }
.lead {
  display: inline-block; margin-top: clamp(18px,3vw,32px);
  padding: .1em 0 .1em clamp(14px,2vw,22px);
  background: none; border-radius: 0; box-shadow: none;
  border-left: 3px solid var(--kraft);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  font-weight: 700; font-size: clamp(1.2rem,2.6vw,2.1rem);
  line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 25ch;
}
.lead .hl { color: var(--kraft-hi) }

/* ── Calendrier ───────────────────────────────────────────────── */
main { max-width: 1040px; margin: 0 auto; padding: clamp(24px,4vw,44px) clamp(12px,3vw,24px) 24px }
.intro {
  text-align: center; margin: 0 auto clamp(18px,3vw,28px); max-width: 56ch;
  color: var(--muted); font-size: clamp(1rem,1.9vw,1.2rem); line-height: 1.55;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px,2.8vw,38px) clamp(16px,2.6vw,36px);
}

/* ── Cellule ──────────────────────────────────────────────────── */
.cell { position: relative; aspect-ratio: 1; perspective: 900px; min-width: 0; min-height: 0 }
.cell.big {
  grid-column: span 4; height: clamp(96px,14vw,150px); aspect-ratio: auto;
}
.cell.big .inside { opacity: 0; transition: opacity .5s .3s; cursor: default }
.cell.big:has(.door.noel.opening) .inside,
.cell.big:has(.door.noel.opened)  .inside { opacity: 1 }

/* Contenu derrière la porte */
.inside {
  position: absolute; inset: 0; border: 0; padding: 6px; border-radius: 9px;
  cursor: default;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(4px,.8vw,9px); text-align: center;
  background: radial-gradient(circle at 50% 48%, #fff8e1, #f0d48e 58%, #c79c46);
  box-shadow: inset 0 0 16px rgba(120,80,15,.45);
  color: #4a3308; font: 700 .8rem "Arimo", Arial, sans-serif;
}
.inside:is(button) { cursor: pointer }
.in-day { font-size: clamp(.62rem,1vw,.8rem); font-weight: 400; opacity: .85 }
.in-icons { display: flex; gap: clamp(4px,.8vw,9px) }
.in-icons svg { width: clamp(16px,2.2vw,24px); height: auto }
.in-go {
  display: inline-block; padding: clamp(2px,.4vw,5px) clamp(6px,.9vw,10px);
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: clamp(.58rem,.9vw,.72rem); line-height: 1.15; transition: background .2s;
  white-space: nowrap;
}
.inside:is(button):hover .in-go { background: var(--red-deep) }
.in-soon { font-size: clamp(.62rem,1vw,.78rem); opacity: .7; font-style: italic }

/* ── Porte ──────────────────────────────────────────────────────
   z-index: 1 pour couvrir le .inside au repos.
   Quand opened → rotateY(-82deg), la porte s'écarte et
   le .inside devient visible et cliquable.
   ─────────────────────────────────────────────────────────────── */
.door {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0;
  border-radius: 9px; cursor: pointer;
  background-size: cover; background-position: center; background-color: var(--kraft);
  transform-origin: left center; transform: rotateY(0); backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.35,.1,.2,1), filter .3s, box-shadow .3s;
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.door:hover:not(.locked):not(.opened) {
  transform: rotateY(-14deg);
  box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(255,236,170,.55), 0 6px 14px rgba(0,0,0,.45);
}
.door:focus-visible { outline: 3px solid #fff; outline-offset: 3px }
.door.opened, .door.opening { transform: rotateY(-82deg); pointer-events: none }
.door.opened { pointer-events: none }
.door.locked { filter: grayscale(.5) brightness(.58); cursor: not-allowed }
.door.today { animation: glow 2.4s ease-in-out infinite }

/* Rendre l'inside cliquable quand la porte est ouverte */
.cell:has(.door.opened) .inside { cursor: pointer }
.cell:has(.door.opened) .inside:hover .in-go { background: var(--red-deep) }

@keyframes glow {
  0%,100% { box-shadow: 0 0 0 3px #fff, 0 0 10px 2px rgba(255,236,170,.55), 0 6px 14px rgba(0,0,0,.45) }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 28px 9px rgba(255,236,170,.9), 0 6px 14px rgba(0,0,0,.45) }
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
.door.shake { animation: shake .45s }

/* Badge cadenas */
.lock-badge {
  position: absolute; top: 7%; right: 7%; width: clamp(20px,2.6vw,30px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(15,15,15,.82); color: #fff;
}
.lock-badge svg { width: 56%; height: 56% }

/* Pastille Aujourd'hui */
.tag {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 2;
  white-space: nowrap; background: #fff; color: var(--green); font-weight: 700;
  font-size: .64rem; padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none;
}

/* ── Footer ───────────────────────────────────────────────────── */
footer { margin-top: clamp(28px,5vw,56px) }
.foot { display: flex; align-items: stretch; background: var(--green); min-height: 104px }
.foot-logo {
  flex: 0 0 clamp(190px,27vw,390px); background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 24px 10px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - clamp(30px,4.2vw,58px)) 100%, 0 100%);
}
.foot-logo img { display: block; width: min(100%,250px); height: auto }
.foot-band {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px));
}
.pill {
  display: inline-block; background: #fff; color: var(--green); font-weight: 700;
  text-decoration: none; font-size: clamp(1rem,2.4vw,2rem);
  padding: .35rem 1.1rem; border-radius: 6px;
}
.pill:hover { background: var(--kraft-hi) }
.pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px }

/* ── Toast ────────────────────────────────────────────────────── */
#toast {
  /* left/bottom positionnés par JS au-dessus du bouton cliqué */
  position: fixed; top: auto; right: auto; margin: 0;
  transform: translateX(-50%) translateY(6px); opacity: 0;
  background: #0b0b0b; color: #fff; border: 1px solid var(--kraft);
  padding: .45rem .9rem; border-radius: 8px; font-size: .85rem;
  pointer-events: none; white-space: nowrap; max-width: 90vw; text-align: center;
  transition: transform .2s, opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;
}
#toast:popover-open { transform: translateX(-50%) translateY(0); opacity: 1 }
@starting-style { #toast:popover-open { transform: translateX(-50%) translateY(6px); opacity: 0 } }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1 }

/* ── Dialog (modale) ──────────────────────────────────────────── */
dialog {
  padding: 0; border: 0; background: transparent; color: var(--sheet-text);
  width: min(760px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow: visible;
}
dialog::backdrop { background: rgba(3,12,8,.82); backdrop-filter: blur(3px) }
dialog[open] .sheet { animation: rise .55s cubic-bezier(.2,.8,.2,1) }
@keyframes rise { from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} }

.sheet {
  position: relative; max-height: calc(100dvh - 20px); overflow: auto; border-radius: 14px;
  background: radial-gradient(ellipse at 50% -10%, rgba(188,154,91,.28), transparent 60%), var(--sheet);
  box-shadow: 0 0 0 2px var(--kraft), 0 30px 70px rgba(0,0,0,.65);
  scrollbar-width: thin; scrollbar-color: var(--kraft) transparent;
}
.sheet-head {
  padding: 30px 28px 16px; text-align: center; border-bottom: 1px solid var(--sheet-line);
}
.sheet-date { margin: 0; font-weight: 700; font-size: .85rem; color: var(--red-deep) }
.sheet h2 {
  margin: 6px 0 4px; font-family: "LastChristmas","Brush Script MT",cursive;
  font-weight: 400; font-size: clamp(2.2rem,6vw,3.4rem); line-height: 1.1;
  color: var(--green); letter-spacing: 0;
}
.sheet-quote {
  margin: 12px auto 2px; max-width: 46ch;
  font-size: clamp(1.05rem,2.4vw,1.25rem); line-height: 1.45;
  font-style: italic; color: var(--sheet-text);
}
.sheet-quote:empty { display: none }
.sheet-ref { margin: 0; font-style: italic; font-size: 1.15rem; color: var(--sheet-muted) }

.close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--sheet-line);
  background: rgba(255,255,255,.7); color: var(--green); font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.close:hover { background: var(--kraft-hi) }
.close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px }

/* ── Onglets ──────────────────────────────────────────────────── */
.tabs { display: flex; justify-content: center; gap: 6px; padding: 14px 16px 0; flex-wrap: wrap }
.tab {
  font: 700 12.5px "Arimo", sans-serif;
  border: 1px solid var(--sheet-line); background: transparent; color: var(--green);
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  display: flex; gap: .45rem; align-items: center;
}
.tab[aria-selected="true"] { background: var(--green); color: #fff; border-color: var(--green) }
.tab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px }

/* ── Panneaux ─────────────────────────────────────────────────── */
.panel { padding: 20px clamp(18px,5vw,40px) 10px }
.panel[hidden] { display: none }

.prose {
  font-family: "Arimo", Arial, sans-serif; font-size: 1.08rem; line-height: 1.7;
  max-width: 62ch; margin: 0 auto;
}
.prose p { margin: 0 0 1em }
.prose p:first-child::first-letter {
  float: left; font-size: 3.4em; line-height: .8; padding: .08em .1em 0 0;
  color: var(--red-deep); font-weight: 700;
}
.prose strong { font-weight: 700 }
.prose em { font-style: italic }
.prose a { color: var(--green) }
.prose iframe { width: 100%; border: 0; border-radius: 8px; margin-top: 12px }

/* PDF */
.tab-pdf { margin-top: 20px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sheet-line) }
.tab-pdf embed { display: block; width: 100% }
.pdf-fallback { margin-top: 10px; text-align: center; padding-bottom: 10px }
.pdf-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  border: 1px solid var(--sheet-line); border-radius: 20px; color: var(--green);
  text-decoration: none; font-size: .9rem;
}
.pdf-link:hover { background: var(--kraft-hi) }

/* ── Navigation modale ────────────────────────────────────────── */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 16px clamp(14px,4vw,28px) 24px;
}
.nav button {
  font: 700 .82rem "Arimo", sans-serif; padding: .55rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--sheet-line); background: transparent; color: var(--green);
}
.nav button:hover:not(:disabled) { background: var(--kraft-hi) }
.nav button:disabled { opacity: .35; cursor: default }
.nav button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px }
@media (max-width: 540px) {
  .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  #prev  { grid-column: 1; grid-row: 1; text-align: left }
  #next  { grid-column: 2; grid-row: 1; text-align: right }
  #share { grid-column: 1 / -1; grid-row: 2; text-align: center }
}

/* ── Cadeau Noël (case big) ───────────────────────────────────── */
.inside.greeting { gap: clamp(12px,3vw,34px) }
.inside.greeting:hover { filter: none; box-shadow: inset 0 0 16px rgba(120,80,15,.45) }
.gr-text {
  font-family: "LastChristmas","Brush Script MT",cursive; font-weight: 400;
  font-size: clamp(2rem,5.6vw,4.2rem); line-height: 1.05;
  color: #8f2a22; text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.gr-star { font-size: clamp(1.2rem,3vw,2.2rem); color: #a9832f }

.door.noel {
  background: none; box-shadow: none; border-radius: 0;
  display: block; overflow: visible; color: #fff;
}
.door.noel:hover:not(.locked) { transform: none; box-shadow: none }
.door.noel .gift-lid, .door.noel .gift-base {
  position: absolute; display: flex; align-items: stretch;
}
.door.noel .gift-base {
  left: 2%; right: 2%; top: 46%; bottom: 0; border-radius: 0 0 10px 10px;
  background: #c93f36;
  box-shadow: 0 8px 16px rgba(0,0,0,.45), inset 0 -10px 18px rgba(0,0,0,.18);
  transition: opacity .5s .35s, transform .6s .35s;
}
.door.noel .gift-lid {
  left: 0; right: 0; top: 26%; height: 24%; border-radius: 8px; background: #e0524a;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  transition: transform .9s cubic-bezier(.3,.1,.2,1), opacity .5s .4s;
}
.door.noel .rib {
  flex: 0 0 clamp(44px,7vw,84px); background: #e3c37d;
  box-shadow: inset 6px 0 8px rgba(255,255,255,.35), inset -6px 0 8px rgba(120,80,15,.25);
}
.door.noel .gl, .door.noel .gr {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.door.noel .n  { font-weight: 700; font-size: clamp(1.8rem,5vw,3.4rem); line-height: 1 }
.door.noel .nl { font-family: "LastChristmas","Brush Script MT",cursive; font-size: clamp(1.8rem,5vw,3.4rem); line-height: 1 }
.door.noel .bow {
  position: absolute; left: 50%; bottom: calc(100% - 6px);
  width: clamp(76px,10vw,130px); transform: translateX(-50%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.door.noel .lock-badge { top: 30%; right: 8% }
.door.noel:hover:not(.locked) .gift-lid { transform: translateY(-8px) rotate(-1.5deg) }
.cell .door.noel.opening .gift-lid,
.cell .door.noel.opened  .gift-lid { transform: translateY(-190%) rotate(-16deg); opacity: 0 }
.cell .door.noel.opening .gift-base,
.cell .door.noel.opened  .gift-base { opacity: 0; transform: translateY(12%) scaleY(.88) }
.door.noel.today { animation: giftglow 2.4s ease-in-out infinite }
@keyframes giftglow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,236,170,.6)) }
  50%      { filter: drop-shadow(0 0 20px rgba(255,236,170,.95)) }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .calendar { grid-template-columns: repeat(4,1fr) }
  .cell.big { grid-column: span 2 }
}
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; --hh: auto }
  .hero-photo {
    position: relative; order: -1; width: 100%; max-width: none; height: clamp(300px,92vw,520px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero-photo img { object-position: 50% 60% }
  .hero::before { display: none }
  .hero-inner { margin-top: -96px; padding: 0 20px 36px; text-align: center }
  .lead { border-left: 0; padding-left: 0; margin-left: auto; margin-right: auto }
  .foot { min-height: 92px }
}
@media (max-width: 520px) {
  .calendar { grid-template-columns: repeat(2,1fr) }
  .foot { flex-direction: column }
  .foot-logo { flex: 0 0 auto; clip-path: none; padding: 12px }
  .foot-logo img { width: 210px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important }
  #snow { display: none }
}

/* ── Bouton debug ────────────────────────────────────────────── */
#debugBtn {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.2);
  padding: .3rem .65rem; border-radius: 6px; font-size: .75rem;
  text-decoration: none; backdrop-filter: blur(6px);
  opacity: .4; transition: opacity .2s;
}
#debugBtn:hover { opacity: 1; }

/* ── CTA mobile "ouvrir la case" ─────────────────────────────── */
#openCta {
  display: none;
}
@media (max-width: 760px) {
  #openCta {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--kraft);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    cursor: pointer;
    z-index: 90;
    white-space: nowrap;
    opacity: 0;
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), opacity .3s;
    pointer-events: none;
  }
  #openCta.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  #openCta svg { width: 18px; height: 18px; flex-shrink: 0 }
}

/* ── Highlight case cible ─────────────────────────────────────── */
@keyframes cellHighlight {
  0%   { outline-color: rgba(188,154,91,.9); outline-offset: 0px }
  50%  { outline-color: rgba(188,154,91,.5); outline-offset: 6px }
  100% { outline-color: rgba(188,154,91,0);  outline-offset: 10px }
}
.cell.highlight {
  outline: 3px solid var(--kraft);
  border-radius: 11px;
  animation: cellHighlight 1s ease-out 3 forwards;
}