:root{
  --top-inset: env(safe-area-inset-top, 0px);   /* recalculee en JS : Android renvoie 0 */
    --ink:#100E0B; --night:#14293A; --night-2:#0C1A26;
    --gold:#D8A24A; --gold-hi:#EBCB7A; --terracotta:#A6543A;
    --parchment:#F1E5CC; --stone:#9A8F79; --seal:#7C2B22;
    --stage-max:460px;
    /* ---- RÉGLAGES FACILES ---- */
    --pan-size:34%;      /* taille des plateaux de la balance */
    --pan-top:44%;       /* hauteur des plateaux (augmente = plus bas) */
    --boat-size:74px;    /* taille de la barque de l'écluse */
    --boat-sink:16px;    /* enfoncement de la barque dans l'eau (augmente = plus bas) */
    --card-face:26px;    /* taille du symbole des cartes du memory */
    --font-display:"Cinzel",Georgia,serif;
    --font-flavor:"Cormorant Garamond",Georgia,serif;
    --font-ui:"Inter",system-ui,-apple-system,sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  body{ background:#000; color:var(--parchment); font-family:var(--font-ui);
    overflow:hidden; display:flex; align-items:center; justify-content:center; }
  #stage{ position:relative; width:100vw; height:100dvh; max-width:var(--stage-max);
    background:var(--ink); overflow:hidden;
    box-shadow:0 0 0 1px rgba(216,162,74,.10),0 40px 120px rgba(0,0,0,.7); }
  @media (min-width:520px){ body{ background:radial-gradient(120% 120% at 50% 0%,#171310 0%,#000 70%); }
    #stage{ height:min(96dvh,900px); border-radius:26px; } }

  .screen{ position:absolute; inset:0; display:none; flex-direction:column; opacity:0; transition:opacity .6s ease; }
  .screen.active{ display:flex; opacity:1; }

  .art{ position:absolute; inset:0; overflow:hidden; background:var(--night-2); }
  .art img{ width:100%; height:100%; object-fit:cover; display:block; }
  .placeholder{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:24px;
    background:repeating-linear-gradient(45deg,rgba(216,162,74,.05) 0 14px,transparent 14px 28px),
      radial-gradient(120% 100% at 50% 20%,var(--night) 0%,var(--night-2) 60%,#06101a 100%); }
  .art.missing .placeholder{ display:flex; } .art.missing img{ display:none; }
  .placeholder .ph-icon{ font-size:30px; opacity:.7; }
  .placeholder .ph-file{ font-size:13px; font-weight:600; color:var(--gold-hi); background:rgba(0,0,0,.35);
    border:1px solid rgba(216,162,74,.35); border-radius:8px; padding:6px 10px; margin-top:12px; display:inline-block; word-break:break-all; }
  .placeholder .ph-note{ font-family:var(--font-flavor); font-size:15px; color:var(--stone); margin-top:12px; }

  .lang button:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }

  #splash{ cursor:pointer; }
  #splash .art::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(6,10,16,.15) 0%,rgba(6,10,16,0) 30%,rgba(6,10,16,.35) 62%,rgba(6,10,16,.92) 100%); }
  .splash-content{ position:relative; z-index:10; margin-top:auto; padding:0 30px calc(env(safe-area-inset-bottom,0) + 46px); text-align:center; }
  .eyebrow{ font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); opacity:.9; }
  .brand{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,9vw,44px); line-height:1.02; letter-spacing:.02em; color:var(--parchment); margin:14px 0 4px; text-shadow:0 2px 24px rgba(0,0,0,.6); }
  .rule{ width:54px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:16px auto; }
  .flavor{ font-family:var(--font-flavor); font-style:italic; font-size:19px; color:#e7dcc4; opacity:.92; }
  .tap-old{ margin-top:30px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-hi); animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
  .install-btn{ display:inline-block; margin:6px auto 0; font-family:var(--font-ui); font-size:14px; font-weight:600; cursor:pointer;
    padding:11px 20px; border-radius:999px; border:0; color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold));
    box-shadow:0 8px 22px rgba(216,162,74,.35); }
  .mobile-notice{ position:absolute; z-index:90; left:12px; right:12px; bottom:14px; display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:12px; background:rgba(12,20,28,.95); border:1px solid rgba(216,162,74,.4);
    box-shadow:0 12px 30px rgba(0,0,0,.5); }
  .mobile-notice span{ flex:1; font-family:var(--font-flavor); font-size:15px; color:#ece0c6; line-height:1.3; }
  .mobile-notice button{ background:transparent; border:0; color:var(--stone); font-size:16px; cursor:pointer; padding:2px 6px; }

  #home .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,16,.72) 0%,rgba(6,10,16,.55) 40%,rgba(6,10,16,.82) 100%); }
  .home-scroll{ position:relative; z-index:10; height:100%; display:flex; flex-direction:column; padding:calc(var(--top-inset) + 62px) 20px calc(env(safe-area-inset-bottom,0) + 22px); overflow-y:auto; }
  .home-head{ text-align:center; margin-bottom:20px; flex:0 0 auto; }
  .home-head .brand{ font-size:clamp(22px,6.4vw,28px); margin:8px 0 6px; }
  .home-head .eyebrow{ font-size:10px; letter-spacing:.34em; }
  .home-head .sub{ font-family:var(--font-flavor); font-style:italic; color:var(--stone); font-size:15px; }
  .tiles{ display:flex; flex-direction:column; gap:14px; flex:1 1 auto; }
  .tile{ position:relative; border:0; text-align:left; cursor:pointer; border-radius:14px; overflow:hidden; min-height:118px; background:var(--night-2); color:inherit; font-family:inherit;
    box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 0 0 1px rgba(216,162,74,.22); transition:transform .25s ease,box-shadow .25s ease; }
  .tile .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,10,16,.9) 0%,rgba(6,10,16,.55) 55%,rgba(6,10,16,.15) 100%); }
  .tile .tile-body{ position:relative; z-index:5; padding:16px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
  .tile .num{ font-size:10px; letter-spacing:.3em; color:var(--gold); }
  .tile .t-title{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.1; color:var(--parchment); margin:4px 0 3px; }
  .tile .t-sub{ font-family:var(--font-flavor); font-style:italic; font-size:15px; color:#d8ccb2; }
  .tile:not(.locked):hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(216,162,74,.5); }
  .tile:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; }
  .tile.locked{ cursor:not-allowed; }
  .tile.locked .art::after{ background:linear-gradient(90deg,rgba(6,10,16,.94) 0%,rgba(6,10,16,.8) 100%); }
  .tile.locked .t-title,.tile.locked .t-sub{ opacity:.55; }
  .seal{ position:absolute; z-index:8; top:12px; right:12px; width:44px; height:44px; border-radius:50%;
    background:radial-gradient(circle at 38% 32%,#a53d31,var(--seal) 70%); box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; color:#efd0b8; }
  .tile .status{ position:absolute; z-index:8; top:16px; left:16px; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi); background:rgba(0,0,0,.4); border:1px solid rgba(216,162,74,.4); padding:3px 8px; border-radius:999px; }

  #enquete .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,16,.12) 0%,rgba(6,10,16,0) 34%,rgba(6,10,16,.55) 66%,rgba(8,12,18,.9) 100%); }
  .top-btn{ position:absolute; z-index:50; top:calc(var(--top-inset) + 12px); font-size:12px; color:var(--parchment); background:rgba(8,12,18,.5); backdrop-filter:blur(6px); border:1px solid rgba(216,162,74,.25); border-radius:999px; padding:7px 13px; cursor:pointer; }
  .top-btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }

  /* NARRATIVE PANEL */
  .scene-panel{ position:absolute; left:0; right:0; bottom:0; z-index:20; display:flex; flex-direction:column; max-height:66%;
    padding:16px 18px calc(env(safe-area-inset-bottom,0) + 16px);
    background:linear-gradient(180deg,rgba(6,10,16,0),rgba(6,10,16,.55) 22%,rgba(8,12,18,.92)); }
  .sender{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; display:none; }
  .sender.on{ display:block; }
  .scene-narr{ font-family:var(--font-flavor); font-size:18px; line-height:1.42; color:#ece0c6; overflow-y:auto; max-height:30vh; padding-right:4px; }
  .scene-narr.message{ font-style:italic; border-left:2px solid rgba(216,162,74,.5); padding-left:14px; }
  .scene-narr .end-tag{ font-family:var(--font-display); font-size:13px; letter-spacing:.12em; color:var(--gold); display:block; margin-bottom:8px; }
  .choices{ display:flex; flex-direction:column; gap:9px; margin-top:14px; flex:0 0 auto; }
  .choice{ font-family:var(--font-ui); font-size:15px; font-weight:500; color:var(--parchment); text-align:left; padding:14px 15px; cursor:pointer; border-radius:12px;
    background:linear-gradient(180deg,rgba(20,41,58,.85),rgba(12,26,38,.9)); border:1px solid rgba(216,162,74,.3); display:flex; align-items:center; gap:12px; transition:.18s; }
  .choice .dot{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:1px solid var(--gold); color:var(--gold-hi); font-family:var(--font-display); font-size:12px; display:flex; align-items:center; justify-content:center; }
  .choice:hover{ border-color:var(--gold-hi); background:linear-gradient(180deg,rgba(28,52,72,.95),rgba(16,32,46,.95)); transform:translateX(2px); }
  .choice:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .choice[disabled]{ opacity:.5; pointer-events:none; }

  /* HOTSPOTS */
  .hotspots{ position:absolute; inset:0; z-index:24; pointer-events:none; }
  .hotspot{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; pointer-events:auto; cursor:pointer;
    background:radial-gradient(circle,rgba(235,203,122,.9),rgba(216,162,74,.25) 60%,transparent 72%); box-shadow:0 0 0 2px rgba(235,203,122,.5); animation:hspulse 2s ease-in-out infinite; }
  .hotspot::after{ content:''; position:absolute; inset:10px; border-radius:50%; background:var(--gold-hi); }
  .hotspot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .hotspot.seen{ animation:none; opacity:.5; background:radial-gradient(circle,rgba(154,143,121,.6),transparent 70%); box-shadow:0 0 0 1px rgba(154,143,121,.5); }
  .hotspot.seen::after{ background:var(--stone); }
  @keyframes hspulse{ 0%,100%{ box-shadow:0 0 0 2px rgba(235,203,122,.55);} 50%{ box-shadow:0 0 0 9px rgba(235,203,122,0);} }

  /* EXPLORE BAR */
  .explore-bar{ position:absolute; left:0; right:0; bottom:0; z-index:30; padding:14px 18px calc(env(safe-area-inset-bottom,0)+16px);
    background:linear-gradient(180deg,rgba(6,10,16,0),rgba(8,12,18,.9)); }
  .explore-bar .instr{ font-family:var(--font-flavor); font-style:italic; font-size:16px; color:#e0d4ba; text-align:center; margin-bottom:10px; }
  .explore-bar .acts{ display:flex; flex-direction:column; gap:9px; }
  .explore-hint{ font-family:var(--font-flavor); font-style:italic; font-size:15px; color:var(--gold); text-align:center; opacity:.85; padding:6px 0; }

  /* EXAMINE CARD */
  .examine-card{ position:absolute; left:0; right:0; bottom:0; z-index:40; padding:18px 18px calc(env(safe-area-inset-bottom,0)+18px);
    background:linear-gradient(180deg,rgba(6,10,16,.15),rgba(8,12,18,.97) 28%); }
  .examine-card .x-title{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
  .examine-card .x-text{ font-family:var(--font-flavor); font-size:18px; line-height:1.44; color:#ece0c6; max-height:34vh; overflow-y:auto; }
  .examine-card .x-close{ margin-top:14px; width:100%; }

  /* KEYPAD */
  .keypad-wrap{ position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px 18px calc(env(safe-area-inset-bottom,0)+18px); background:linear-gradient(180deg,rgba(6,10,16,.25) 0%,rgba(6,10,16,0) 26%,rgba(8,12,18,.96) 66%); }
  .keypad{ background:rgba(10,18,26,.92); border:1px solid rgba(216,162,74,.3); border-radius:16px; padding:16px; }
  .keypad .kp-prompt{ font-family:var(--font-flavor); font-style:italic; font-size:17px; color:#ece0c6; text-align:center; margin-bottom:12px; }
  .kp-cipher{ font-family:"Cinzel",serif; letter-spacing:.16em; font-size:16px; color:var(--gold-hi); text-align:center; line-height:1.6; margin-bottom:12px; word-break:break-word; }
  .kp-display{ display:flex; justify-content:center; gap:10px; margin-bottom:6px; }
  .kp-slot{ width:44px; height:54px; border-radius:10px; border:1px solid rgba(216,162,74,.4); background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:26px; color:var(--gold-hi); }
  .kp-msg{ min-height:18px; text-align:center; font-size:13px; color:var(--terracotta); margin:2px 0 8px; }
  .kp-msg.hint{ color:var(--gold); }
  .kp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .kp-key{ padding:14px 0; border-radius:10px; border:1px solid rgba(216,162,74,.25); background:linear-gradient(180deg,rgba(20,41,58,.8),rgba(12,26,38,.85)); color:var(--parchment); font-size:20px; font-family:var(--font-display); cursor:pointer; }
  .kp-key:hover{ border-color:var(--gold-hi); }
  .kp-actions{ display:flex; gap:8px; margin-top:8px; }
  .kp-actions button{ flex:1; padding:12px 0; border-radius:10px; cursor:pointer; font-family:var(--font-ui); font-size:14px; font-weight:600; }
  .kp-clear{ background:transparent; border:1px solid rgba(216,162,74,.3); color:var(--stone); }
  .kp-ok{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border:0; color:var(--ink); }
  .kp-back{ position:absolute; z-index:46; }
  .wk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .wk-key{ padding:11px 0; border-radius:8px; border:1px solid rgba(216,162,74,.25); background:linear-gradient(180deg,rgba(20,41,58,.8),rgba(12,26,38,.85)); color:var(--parchment); font-size:16px; font-family:var(--font-display); cursor:pointer; }
  .wk-key:hover{ border-color:var(--gold-hi); }
  .bells-row{ display:flex; justify-content:center; gap:10px; margin:8px 0 12px; }
  .bell{ width:52px; height:62px; border-radius:12px; border:1px solid rgba(216,162,74,.4); background:linear-gradient(180deg,rgba(20,41,58,.85),rgba(12,26,38,.9)); font-size:26px; cursor:pointer; transition:transform .1s ease, box-shadow .1s ease, background .1s ease; }
  .bell.lit{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); transform:translateY(-3px) scale(1.06); box-shadow:0 0 18px rgba(235,203,122,.6); }
  .bells-progress{ display:flex; justify-content:center; gap:6px; min-height:12px; margin-bottom:6px; }
  .bells-progress .pd{ width:9px; height:9px; border-radius:50%; background:rgba(216,162,74,.25); }
  .bells-progress .pd.on{ background:var(--gold-hi); }
  .orient-rows{ display:flex; flex-direction:column; gap:10px; margin:8px 0 10px; }
  .orient-row{ display:flex; align-items:center; gap:8px; }
  .orient-row .g-name{ flex:1; font-family:var(--font-flavor); font-size:16px; color:#ece0c6; }
  .orient-dirs{ display:flex; gap:5px; }
  .orient-dirs button{ width:36px; height:36px; border-radius:8px; border:1px solid rgba(216,162,74,.3); background:rgba(12,26,38,.85); color:var(--parchment); font-family:var(--font-display); font-size:14px; cursor:pointer; }
  .orient-dirs button.sel{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--ink); border-color:var(--gold-hi); }
  .asm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; width:232px; margin:10px auto; }
  .asm-tile{ width:110px; height:110px; border:1px solid rgba(216,162,74,.35); border-radius:6px; background-color:#0c1a26;
    background-size:200% 200%; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .28s cubic-bezier(.3,.7,.3,1); color:rgba(235,203,122,.9); font-size:32px; }
  .asm-tile:hover{ border-color:var(--gold-hi); }
  .seq-list{ display:flex; flex-direction:column; gap:7px; margin:8px 0 10px; }
  .seq-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; cursor:pointer;
    background:linear-gradient(180deg,rgba(20,41,58,.85),rgba(12,26,38,.9)); border:1px solid rgba(216,162,74,.28);
    font-family:var(--font-flavor); font-size:16px; color:#ece0c6; transition:.18s; }
  .seq-item:hover{ border-color:var(--gold-hi); }
  .seq-item .s-num{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:1px solid var(--gold);
    color:var(--gold-hi); font-family:var(--font-display); font-size:12px; display:flex; align-items:center; justify-content:center; }
  .seq-item.picked{ background:linear-gradient(180deg,rgba(216,162,74,.28),rgba(166,120,50,.22)); border-color:var(--gold-hi); }
  .seq-item.picked .s-num{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--ink); }
  .keypad-wrap.big{ justify-content:flex-start; padding-top:calc(var(--top-inset) + 58px); }
  .keypad-wrap.big .keypad{ background:rgba(8,14,20,.55); border-color:rgba(216,162,74,.22); }
  .scale{ position:relative; height:min(38vh,300px); margin:2px 0 10px; }
  .scale-img{ position:absolute; inset:0; display:none; }
  .scale-img.on{ display:block; }
  .scale-img img{ position:absolute; display:block; }
  .sc-stand{ left:50%; top:8%; width:52%; margin-left:-26%; }
  .sc-beam{ left:50%; top:6%; width:98%; margin-left:-49%; transform-origin:50% 50%;
    transition:transform .7s cubic-bezier(.3,1.25,.4,1); filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
  .sc-pan{ width:var(--pan-size); margin-left:calc(var(--pan-size) / -2); top:var(--pan-top);
    transition:transform .7s cubic-bezier(.3,1.25,.4,1); filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
  .sc-pan-l{ left:12%; } .sc-pan-r{ left:88%; }
  .sc-val{ position:absolute; top:calc(var(--pan-top) + 26%); font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--gold-hi);
    text-shadow:0 2px 8px rgba(0,0,0,.95); transition:transform .7s cubic-bezier(.3,1.25,.4,1); }
  .sc-val-l{ left:2%; width:24%; text-align:center; }
  .sc-val-r{ left:74%; width:24%; text-align:center; }
  /* si le fléau fourni contient déjà ses plateaux, ajouter la classe .nopans sur #scaleImg */
  .scale-img.nopans .sc-pan{ display:none; }
  .bal-read{ text-align:center; font-family:var(--font-display); font-size:15px; color:var(--parchment); margin:2px 0 8px; }
  .bal-read .ok{ color:#a7e0a0; } .bal-read .no{ color:var(--terracotta); }
  .scale-css{ position:absolute; inset:0; }
  .scale-css.off{ display:none; }
  .beam{ position:absolute; left:50%; top:34px; width:220px; height:5px; margin-left:-110px; border-radius:3px;
    background:linear-gradient(90deg,var(--gold),var(--gold-hi),var(--gold));
    transform-origin:50% 50%; transition:transform .55s cubic-bezier(.3,1.3,.4,1); }
  .pan{ position:absolute; top:5px; width:64px; height:52px; margin-left:-32px; border-radius:0 0 30px 30px;
    background:linear-gradient(180deg,rgba(216,162,74,.30),rgba(120,84,34,.45)); border:1px solid rgba(216,162,74,.55);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px; color:var(--parchment); }
  .pan-l{ left:0; } .pan-r{ left:220px; }
  .pivot{ position:absolute; left:50%; top:36px; margin-left:-9px; width:18px; height:56px;
    background:linear-gradient(180deg,var(--gold),rgba(120,84,34,.6)); clip-path:polygon(50% 0,100% 100%,0 100%); }
  .bal-weights{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-bottom:8px; }
  .bal-weights button{ font-size:12px !important; padding:9px 0 !important; }
  .bal-weights button{ padding:10px 0; border-radius:8px; border:1px solid rgba(216,162,74,.28);
    background:linear-gradient(180deg,rgba(20,41,58,.85),rgba(12,26,38,.9)); color:var(--parchment);
    font-family:var(--font-display); font-size:14px; cursor:pointer; }
  .bal-weights button.on{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--ink); border-color:var(--gold-hi); }
  .bal-tries{ font-family:var(--font-ui); font-size:11px; letter-spacing:.14em; color:var(--terracotta); text-align:center; margin-bottom:4px; }
  .lock-basin{ position:relative; height:min(30vh,220px); margin:6px 0 12px; border-radius:8px; overflow:hidden;
    background:linear-gradient(180deg,#16232c,#0b141b); border:1px solid rgba(216,162,74,.3); }
  .lk-water{ position:absolute; left:0; right:0; bottom:0; height:18%; overflow:hidden;
    background:linear-gradient(180deg,#3f7e74 0%,#2b5f5e 35%,#123037 100%);
    transition:height 1.5s cubic-bezier(.4,.1,.3,1); }
  .lk-wave{ position:absolute; left:-50%; right:-50%; top:-9px; height:20px;
    background:radial-gradient(ellipse 42px 10px at 50% 100%,rgba(198,240,226,.55),transparent 70%) repeat-x;
    background-size:84px 20px; animation:wavemove 7s linear infinite; opacity:.75; }
  .lk-wave2{ top:-5px; background-size:56px 14px; animation-duration:4.5s; animation-direction:reverse; opacity:.5; }
  @keyframes wavemove{ 0%{ transform:translateX(0) } 100%{ transform:translateX(84px) } }
  .lk-glint{ position:absolute; inset:0;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%);
    animation:glint 5.5s ease-in-out infinite; }
  @keyframes glint{ 0%,100%{ transform:translateX(-30%) } 50%{ transform:translateX(30%) } }
  .lk-boat{ position:absolute; left:50%; width:var(--boat-size); margin-left:calc(var(--boat-size) / -2);
    bottom:18%; margin-bottom:calc(var(--boat-sink) * -1);
    transition:bottom 1.5s cubic-bezier(.4,.1,.3,1); animation:bob 3.6s ease-in-out infinite;
    filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
  .lk-boat img{ width:100%; display:block; }
  .lk-boat img[data-missing="1"]{ display:none; }
  .lk-boat .lk-boat-fb{ display:none; font-size:26px; }
  .lk-boat img[data-missing="1"] ~ .lk-boat-fb{ display:block; }
  @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-3px) rotate(1deg) } }
  .lk-gate{ position:absolute; top:0; bottom:0; width:10px; background:linear-gradient(180deg,#4a3a22,#2a2013);
    border:1px solid rgba(216,162,74,.35); transition:transform .6s ease; }
  .lk-gate-l{ left:14px; } .lk-gate-r{ right:14px; }
  .lock-basin.openleft .lk-gate-l{ transform:translateX(-16px) rotate(-8deg); }
  .lock-basin.openright .lk-gate-r{ transform:translateX(16px) rotate(8deg); }
  .lk-marks{ position:absolute; right:4px; top:6px; bottom:6px; display:flex; flex-direction:column; justify-content:space-between;
    font-family:var(--font-display); font-size:9px; color:rgba(216,162,74,.55); }
  .lock-steps{ display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
  .lock-steps button{ text-align:left; padding:11px 12px; border-radius:10px; cursor:pointer;
    background:linear-gradient(180deg,rgba(20,41,58,.85),rgba(12,26,38,.9)); border:1px solid rgba(216,162,74,.28);
    font-family:var(--font-flavor); font-size:16px; color:#ece0c6; }
  .lock-steps button:hover{ border-color:var(--gold-hi); }
  .lock-steps button.done{ background:linear-gradient(180deg,rgba(216,162,74,.28),rgba(166,120,50,.2)); border-color:var(--gold-hi); pointer-events:none; }
  .dig-grid{ display:grid; gap:4px; margin:8px 0 10px; }
  .dig-cell{ aspect-ratio:1/1; border-radius:4px; cursor:pointer; position:relative; overflow:hidden;
    background:linear-gradient(150deg,#6d6152,#4a4136); border:1px solid rgba(0,0,0,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10); transition:transform .18s ease; }
  .dig-cell:hover{ transform:translateY(-2px); border-color:var(--gold-hi); }
  .dig-cell.dug{ background:linear-gradient(150deg,#2a2118,#171009); cursor:default; transform:none;
    box-shadow:inset 0 3px 10px rgba(0,0,0,.8); animation:digShake .35s ease; }
  .dig-cell.dug::after{ content:"·"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(216,162,74,.5); font-size:20px; }
  .dig-cell.hit{ background:radial-gradient(circle at 50% 45%,var(--gold-hi),var(--gold) 60%,#7a5a20);
    box-shadow:0 0 26px rgba(235,203,122,.85); animation:pop .6s ease; }
  .dig-cell.hit::after{ content:"\269C"; color:var(--ink); font-size:18px; }
  @keyframes digShake{ 0%{transform:translateY(-3px)} 60%{transform:translateY(2px)} 100%{transform:none} }
  .dig-coords{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:10px; color:rgba(216,162,74,.6); margin-bottom:3px; }
  .shake{ animation:shake .4s; }
  @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

  /* FLY + CARNET PANEL */
  .fly{ position:absolute; z-index:70; left:0; top:0; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--ink);
    background:radial-gradient(circle at 35% 30%,#fff6dc,var(--gold-hi) 45%,var(--gold) 100%);
    box-shadow:0 0 34px rgba(235,203,122,.85),0 8px 22px rgba(0,0,0,.4); will-change:transform,opacity;
    transition:transform .6s cubic-bezier(.2,1.4,.4,1); }
  .fly-halo{ position:absolute; z-index:69; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
    border:2px solid var(--gold-hi); animation:halo .7s ease-out forwards; pointer-events:none; }
  @keyframes halo{ 0%{ transform:scale(.4); opacity:.9 } 100%{ transform:scale(9); opacity:0 } }
  .spark{ position:absolute; z-index:68; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:50%;
    background:var(--gold-hi); box-shadow:0 0 10px rgba(235,203,122,.9); animation:sparkfade .6s ease-out forwards; pointer-events:none; }
  @keyframes sparkfade{ 0%{ transform:scale(1); opacity:.95 } 100%{ transform:scale(.2) translateY(14px); opacity:0 } }
  .burst{ position:absolute; z-index:71; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
    border:3px solid var(--gold-hi); animation:burst .6s ease-out forwards; pointer-events:none; }
  @keyframes burst{ 0%{ transform:scale(.3); opacity:1 } 100%{ transform:scale(3.2); opacity:0 } }
  .carnet-panel{ position:absolute; inset:0; z-index:80; display:none; flex-direction:column; padding:calc(var(--top-inset) + 20px) 22px calc(env(safe-area-inset-bottom,0) + 22px);
    background-image:linear-gradient(180deg,rgba(30,21,10,.80),rgba(16,11,5,.92)),url("../images/carnet_bg.webp");
    background-size:cover; background-position:center; backdrop-filter:blur(3px); }
  .carnet-panel.open{ display:flex; }
  .carnet-panel h2{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--parchment); letter-spacing:.04em; }
  .carnet-panel .close{ position:absolute; top:calc(var(--top-inset) + 16px); right:16px; }
  .carnet-sub{ font-family:var(--font-flavor); font-style:italic; font-size:14px; color:var(--gold); margin-top:3px; }
  .carnet-list{ margin-top:16px; display:flex; flex-direction:column; gap:11px; overflow-y:auto; }
  .carnet-empty{ font-family:var(--font-flavor); font-style:italic; font-size:17px; color:var(--stone); margin-top:24px; }
  .note{ font-family:var(--font-flavor); font-size:17px; color:#3b2d18; line-height:1.35;
    background:linear-gradient(180deg,#f3e7cb,#e5d4ae); border:1px solid rgba(120,90,45,.35);
    border-left:3px solid var(--terracotta); border-radius:8px; padding:12px 14px; box-shadow:0 6px 16px rgba(0,0,0,.4); }
  .note.fresh{ animation:noteIn .5s cubic-bezier(.2,1.2,.4,1); border-left-color:var(--gold); }
  @keyframes noteIn{ 0%{ transform:translateY(-14px) scale(.96); opacity:0 } 100%{ transform:none; opacity:1 } }
  .note.frag{ border-left-color:#b8860b; background:linear-gradient(180deg,#f8eed3,#eeE0b9); }
  .note .n-idx{ font-family:var(--font-display); font-size:11px; color:#8a6a2f; margin-right:8px; }
  .note .n-lys{ float:right; color:#b8860b; font-size:16px; }
  .carnet-restart{ margin-top:auto; align-self:center; font-family:var(--font-ui); font-size:12px; color:var(--stone);
    background:transparent; border:1px solid rgba(166,84,58,.5); border-radius:999px; padding:9px 16px; cursor:pointer; }
  .carnet-restart:hover{ color:var(--terracotta); border-color:var(--terracotta); }

  @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

  /* FEEDBACK / GAME OVER */
  .feedback{ position:absolute; inset:0; z-index:95; display:none; align-items:center; justify-content:center; padding:26px;
    background:radial-gradient(120% 100% at 50% 40%, rgba(8,12,18,.86), rgba(4,6,10,.96)); backdrop-filter:blur(4px); }
  .feedback.open{ display:flex; }
  .feedback-card{ width:100%; max-width:340px; text-align:center; padding:28px 24px;
    border-radius:18px; border:1px solid rgba(216,162,74,.4);
    background:linear-gradient(180deg, rgba(20,32,44,.96), rgba(10,16,24,.98));
    box-shadow:0 24px 70px rgba(0,0,0,.7); animation:fbpop .32s cubic-bezier(.2,.8,.3,1); }
  @keyframes fbpop{ 0%{ transform:scale(.86); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
  .feedback-card .fb-title{ font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:.04em; color:var(--gold-hi); }
  .feedback-card .fb-text{ font-family:var(--font-flavor); font-size:18px; line-height:1.45; color:#ece0c6; margin-top:12px; }
  .feedback-card .fb-btn{ margin-top:20px; font-family:var(--font-ui); font-size:15px; font-weight:600; cursor:pointer;
    padding:13px 20px; border-radius:12px; border:0; color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }
  .feedback-card.success{ border-color:rgba(120,190,120,.5); }
  .feedback-card.success .fb-title{ color:#a7e0a0; }
  .feedback-card.danger{ border-color:rgba(196,72,54,.7); box-shadow:0 0 60px rgba(166,60,44,.35),0 24px 70px rgba(0,0,0,.7); }
  .feedback-card.danger .fb-title{ color:#ef8f7c; }
  .feedback-card.danger .fb-btn{ background:linear-gradient(180deg,#c9553f,#8f2f22); color:#fbe9e2; }

  /* ================= MEMORY (square Gambetta) ================= */
  .mem-keypad{ padding:10px 8px 12px; }
  .mem-keypad .kp-prompt{ font-size:15px; margin-bottom:8px; }
  .mem-grid{ display:grid; gap:5px; margin:6px 0 8px; }
  .mem-card{ position:relative; aspect-ratio:3/4; border-radius:5px; cursor:pointer; perspective:600px; }
  .mem-inner{ position:absolute; inset:0; transition:transform .45s cubic-bezier(.3,1.1,.4,1); transform-style:preserve-3d; }
  .mem-card.up .mem-inner,.mem-card.done .mem-inner{ transform:rotateY(180deg); }
  .mem-face{ position:absolute; inset:0; border-radius:5px; backface-visibility:hidden;
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .mem-back{ background:linear-gradient(150deg,#5d4a2c,#2f2415); border:1px solid rgba(216,162,74,.45);
    color:rgba(235,203,122,.85); font-size:calc(var(--card-face) * .7); }
  .mem-back img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mem-back img[data-missing="1"]{ display:none; }
  .mem-back .mb-fb{ display:none; } .mem-back img[data-missing="1"] ~ .mb-fb{ display:block; }
  .mem-front{ transform:rotateY(180deg); background:linear-gradient(180deg,#f3e7cb,#e0cfa8);
    border:1px solid rgba(120,90,45,.5); color:#4a3a1c; font-size:var(--card-face); }
  .mem-card.done .mem-front{ background:linear-gradient(180deg,#f9efd0,#e8d49f);
    border-color:var(--gold); box-shadow:0 0 12px rgba(235,203,122,.55); }
  .mem-card.done{ cursor:default; }

  /* ================= BARRE SUPÉRIEURE UNIFIÉE ================= */
  .topbar{ position:absolute; z-index:60; left:0; right:0; top:0;
    display:flex; align-items:center; gap:6px;
    padding:calc(var(--top-inset) + 8px) 10px 8px;
    background:linear-gradient(180deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.72) 62%,rgba(8,12,18,0) 100%);
    backdrop-filter:blur(6px); pointer-events:none; }
  .topbar > *{ pointer-events:auto; }
  .tb-spacer{ flex:1 1 auto; pointer-events:none; }
  .tb-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:4px;
    height:34px; padding:0 10px; border-radius:999px; cursor:pointer;
    background:linear-gradient(180deg,rgba(28,42,56,.9),rgba(14,24,34,.92));
    border:1px solid rgba(216,162,74,.32); color:var(--parchment);
    font-family:var(--font-ui); font-size:12px; font-weight:600;
    box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); transition:.18s; }
  .tb-btn:hover{ border-color:var(--gold-hi); transform:translateY(-1px); }
  .tb-btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .tb-back .tb-ico{ font-size:17px; line-height:1; margin-top:-2px; }
  .tb-back .tb-lbl{ letter-spacing:.04em; }
  @media (max-width:400px){ .tb-back .tb-lbl{ display:none; } .tb-btn{ padding:0 9px; } }

  /* pastille INDICES */
  .tb-pill{ display:none; align-items:center; gap:5px; height:34px; padding:0 11px; border-radius:999px;
    background:linear-gradient(180deg,rgba(28,42,56,.9),rgba(14,24,34,.92));
    border:1px solid rgba(216,162,74,.32); box-shadow:0 3px 10px rgba(0,0,0,.45); }
  .tb-pill.show{ display:flex; }
  .tb-pill .fr-lys{ font-size:14px; line-height:1; color:rgba(154,143,121,.5); }
  .tb-pill .fr-lys.on{ color:var(--gold-hi); text-shadow:0 0 10px rgba(235,203,122,.75); }
  .tb-pill .fr-lys.pop{ animation:pop .6s ease; }
  .tb-pill .fr-count{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold-hi); }

  /* bouton NOTES (carnet) */
  .carnet-btn{ display:none; width:38px; height:34px; padding:0; overflow:visible; }
  .carnet-btn.show{ display:flex; }
  .carnet-btn.pop{ animation:pop .5s ease; }
  @keyframes pop{ 0%,100%{transform:scale(1)} 35%{transform:scale(1.22)} }
  .carnet-btn img{ width:26px; height:26px; object-fit:cover; border-radius:5px; display:block; }
  .carnet-btn img[data-missing="1"]{ display:none; }
  .carnet-btn .carnet-fallback{ display:none; font-size:16px; }
  .carnet-btn img[data-missing="1"] ~ .carnet-fallback{ display:block; }
  .carnet-btn .badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
    border-radius:999px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--ink);
    font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center;
    box-shadow:0 2px 5px rgba(0,0,0,.5); }
  .carnet-btn .badge.on{ display:flex; }

  .tb-snd{ width:34px; padding:0; font-size:14px; }
  .tb-snd.on{ color:var(--gold-hi); border-color:rgba(216,162,74,.55); }

  .tb-lang{ display:flex; gap:2px; padding:3px; border-radius:999px;
    background:linear-gradient(180deg,rgba(28,42,56,.9),rgba(14,24,34,.92));
    border:1px solid rgba(216,162,74,.32); box-shadow:0 3px 10px rgba(0,0,0,.45); }
  .tb-lang button{ font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.04em;
    color:var(--stone); background:transparent; border:0; cursor:pointer; padding:5px 7px; border-radius:999px; transition:.18s; }
  .tb-lang button.on{ color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }
  .tb-lang button:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }

  /* le contenu démarre sous la barre */
  .home-scroll{ padding-top:calc(var(--top-inset) + 66px) !important; }
  .keypad-wrap.big{ padding-top:calc(var(--top-inset) + 58px); }
  .carnet-panel{ padding-top:calc(var(--top-inset) + 62px) !important; }

  /* ================= PANNEAU ADMIN / ÉTAPES ================= */
  .tb-dev{ font-size:10px; letter-spacing:.08em; }
  .dev-panel{ position:absolute; inset:0; z-index:98; display:none; flex-direction:column;
    padding:calc(var(--top-inset) + 56px) 16px calc(env(safe-area-inset-bottom,0) + 16px);
    background:linear-gradient(180deg,rgba(10,16,22,.985),rgba(6,10,14,.995)); }
  .dev-panel.open{ display:flex; }
  .dev-panel h2{ font-family:var(--font-display); font-size:19px; color:var(--parchment); }
  .dev-help{ font-family:var(--font-flavor); font-style:italic; font-size:14px; color:var(--stone); margin:4px 0 12px; }
  .dev-list{ display:flex; flex-direction:column; gap:5px; overflow-y:auto; }
  .dev-item{ display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer;
    padding:9px 11px; border-radius:8px; border:1px solid rgba(216,162,74,.22);
    background:linear-gradient(180deg,rgba(20,41,58,.8),rgba(12,26,38,.86)); color:var(--parchment); }
  .dev-item:hover{ border-color:var(--gold-hi); }
  .dev-item .dv-id{ flex:1; font-family:var(--font-ui); font-size:12px; }
  .dev-item .dv-tag{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
    background:linear-gradient(180deg,var(--gold-hi),var(--gold)); padding:2px 7px; border-radius:999px; }
  .dev-item .dv-cp{ color:var(--gold); font-size:12px; }

  /* ================= PICK (choisir le bon livre) ================= */
  .pick-shelf{ display:flex; gap:6px; justify-content:center; align-items:flex-end; margin:12px 0 10px;
    padding:14px 8px 10px; border-radius:8px 8px 4px 4px;
    background:linear-gradient(180deg,rgba(60,42,24,.55),rgba(32,22,12,.75)); border:1px solid rgba(216,162,74,.25);
    box-shadow:inset 0 -6px 14px rgba(0,0,0,.55); }
  .pick-book{ position:relative; width:34px; border-radius:3px 3px 2px 2px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:10px 2px;
    border:1px solid rgba(0,0,0,.45); box-shadow:inset 1px 0 0 rgba(255,255,255,.12), 0 5px 10px rgba(0,0,0,.5);
    transition:transform .22s cubic-bezier(.3,1.3,.4,1); }
  .pick-book span{ writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--font-display); font-size:11px; letter-spacing:.04em; color:#f0e4c8; text-shadow:0 1px 2px rgba(0,0,0,.7);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pick-book:hover{ transform:translateY(-10px); }
  .pick-book.b1{ height:150px; background:linear-gradient(90deg,#6b2320,#8d3a30 40%,#5c1d1a); }
  .pick-book.b2{ height:168px; background:linear-gradient(90deg,#1d3a4a,#2d5a66 40%,#16303e); }
  .pick-book.b3{ height:142px; background:linear-gradient(90deg,#3a4a25,#556b32 40%,#2c3a1c); }
  .pick-book.b4{ height:160px; background:linear-gradient(90deg,#4a3520,#6b4d2c 40%,#382718); }
  .pick-book.b5{ height:136px; background:linear-gradient(90deg,#3d2545,#573466 40%,#2c1a33); }
  .pick-book.b6{ height:154px; background:linear-gradient(90deg,#28323d,#3b4a58 40%,#1d242c); }
  .pick-book.wrong{ animation:shake .4s; opacity:.45; pointer-events:none; }
  .pick-book.right{ transform:translateY(-16px); box-shadow:0 0 26px rgba(235,203,122,.9); border-color:var(--gold-hi); }

  .tile.unlocked{ cursor:default; }
  .tile.unlocked .t-title,.tile.unlocked .t-sub{ opacity:.85; }
  .tile.unlocked .art::after{ background:linear-gradient(90deg,rgba(6,10,16,.88) 0%,rgba(6,10,16,.55) 100%); }
  .tile .status.unlocked{ color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-color:transparent; }

  /* ---- SPLASH : bouton d'entrée pleine largeur ---- */
  .tap-btn{ display:block; width:100%; margin-top:26px; cursor:pointer; border:0;
    padding:17px 18px; border-radius:14px;
    background:linear-gradient(180deg,#F2D488,var(--gold) 55%,#B9822F);
    color:#120E07; font-family:var(--font-ui); font-weight:800; font-size:16px;
    letter-spacing:.16em; text-transform:uppercase;
    box-shadow:0 10px 28px rgba(216,162,74,.42), inset 0 1px 0 rgba(255,255,255,.5);
    animation:tapglow 2.8s ease-in-out infinite; }
  .tap-btn:active{ transform:translateY(1px); }
  @keyframes tapglow{ 0%,100%{ box-shadow:0 10px 28px rgba(216,162,74,.32), inset 0 1px 0 rgba(255,255,255,.5) }
                      50%{ box-shadow:0 12px 36px rgba(235,203,122,.62), inset 0 1px 0 rgba(255,255,255,.6) } }

  /* ---- narrateur : portrait + texte ---- */
  .narr-row{ display:flex; align-items:flex-end; gap:10px; }
  .speaker{ width:82px; flex:0 0 auto; display:none; align-self:flex-end;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation:speakIn .5s ease; }
  .speaker.show{ display:block; }
  @keyframes speakIn{ 0%{ transform:translateY(12px); opacity:0 } 100%{ transform:none; opacity:1 } }
  @media (max-width:380px){ .speaker{ width:64px; } }

  /* ---- barre de progression de la narration ---- */
  .narr-progress{ height:3px; border-radius:2px; margin-top:8px; background:rgba(216,162,74,.18); display:none; overflow:hidden; }
  .narr-progress.on{ display:block; }
  .narr-progress span{ display:block; height:100%; width:0%;
    background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transition:width .2s linear; }
  .choice.locked{ opacity:.35; pointer-events:none; filter:grayscale(.4); }

  /* ---- PICK en mode liste (choix longs) ---- */
  .pick-list{ display:flex; flex-direction:column; gap:9px; margin:10px 0; }
  .pick-row{ display:flex; align-items:center; gap:11px; cursor:pointer;
    padding:15px 15px; border-radius:12px; text-align:left;
    background:linear-gradient(180deg,rgba(24,44,60,.92),rgba(13,26,38,.94));
    border:1px solid rgba(216,162,74,.32); box-shadow:0 4px 14px rgba(0,0,0,.45);
    font-family:var(--font-flavor); font-size:17px; line-height:1.3; color:#ece0c6; transition:.18s; }
  .pick-row:hover{ border-color:var(--gold-hi); transform:translateX(3px); }
  .pick-row .pk-dot{ flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--gold); color:var(--gold-hi); font-size:13px;
    display:flex; align-items:center; justify-content:center; }
  .pick-row.wrong{ animation:shake .4s; opacity:.4; pointer-events:none; }
  .pick-row.right{ border-color:var(--gold-hi); background:linear-gradient(180deg,rgba(216,162,74,.35),rgba(166,120,50,.25));
    box-shadow:0 0 26px rgba(235,203,122,.7); }

  /* ================= UV — lampe de Wood ================= */
  .uv-doc{ position:relative; width:100%; aspect-ratio:3/4; max-height:52vh; margin:8px auto 10px;
    border-radius:8px; overflow:hidden; cursor:crosshair; touch-action:none;
    background:linear-gradient(160deg,#2a2418,#171208 60%,#0d0a05);
    border:1px solid rgba(216,162,74,.3); box-shadow:inset 0 0 60px rgba(0,0,0,.85); }
  .uv-doc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; }
  .uv-lamp{ position:absolute; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
    pointer-events:none; opacity:0; transition:opacity .2s;
    background:radial-gradient(circle,rgba(150,110,255,.42) 0%,rgba(110,80,220,.20) 45%,transparent 70%);
    box-shadow:0 0 60px rgba(140,100,255,.35); mix-blend-mode:screen; }
  .uv-doc.active .uv-lamp{ opacity:1; }
  .uv-word{ position:absolute; transform:translate(-50%,-50%); font-family:var(--font-flavor); font-style:italic;
    font-size:15px; white-space:nowrap; color:#cbb6ff; text-shadow:0 0 12px rgba(160,120,255,.9);
    opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .uv-word.on{ opacity:1; }

  /* ================= ARCHIVE — recherche de cote ================= */
  #arcRows .orient-row{ flex-direction:column; align-items:stretch; gap:5px; }
  #arcRows .g-name{ font-family:var(--font-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  #arcRows .orient-dirs{ flex-wrap:wrap; gap:5px; }
  #arcRows .orient-dirs button{ width:auto; padding:0 12px; height:38px; font-family:var(--font-flavor); font-size:15px; }

  /* pendant l'écoute obligatoire d'un indice, les autres pastilles sont inertes */
  .hotspots.gated{ pointer-events:none; }
  .hotspots.gated .hotspot{ opacity:.35; }
  #exProgress{ margin:10px 0 2px; }

/* ==========================================================================
   M39 — NOUVELLE FINALE : reliquaire, lampe, bascule de l'autel, tuile II
   ========================================================================== */

/* ---- verrou d'écoute sur les panneaux d'échec ---- */
  .feedback-card .narr-progress{ margin:10px 0 4px; }
  .fb-btn.locked{ opacity:.35; pointer-events:none; filter:grayscale(.4); }

/* ---- assemblage du reliquaire ---- */
  #relWrap .keypad{ gap:8px; }
  .rel-sub{ font:italic 400 14px/1.4 "Cormorant Garamond",serif; color:rgba(230,214,186,.62);
            text-align:center; margin:-2px 0 6px; }
  .rel-stage{ position:relative; width:min(78vw,330px); aspect-ratio:1/1; margin:0 auto;
              --rel-dark:0; transition:filter .5s ease; }
  .rel-stage::after{ content:""; position:absolute; inset:-14%; pointer-events:none; border-radius:50%;
              background:radial-gradient(circle at 50% 50%, transparent 42%, rgba(4,7,12,.92) 100%);
              opacity:var(--rel-dark); transition:opacity .55s ease; }
  .rel-casket{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
               filter:drop-shadow(0 12px 26px rgba(0,0,0,.65)); }
  .rel-cells{ position:absolute; inset:0; }
  .rel-cell{ position:absolute; cursor:pointer; border-radius:5px;
             box-shadow:inset 0 0 0 1px rgba(216,162,74,.16); transition:box-shadow .18s ease; }
  .rel-cell:not(.filled):hover{ box-shadow:inset 0 0 0 1px rgba(216,162,74,.55), 0 0 14px rgba(216,162,74,.25); }
  .rel-cell img{ width:100%; height:100%; object-fit:fill; display:block; }
  .rel-cell.filled{ cursor:default; box-shadow:none;
             animation:relSeat .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes relSeat{ 0%{ transform:scale(1.5); filter:brightness(2.4); opacity:.2; }
                    60%{ transform:scale(.97); filter:brightness(1.25); }
                    100%{ transform:scale(1); filter:none; opacity:1; } }
  .rel-cell.shake{ animation:relShake .34s ease; }
@keyframes relShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
  .rel-cell.nudge,.rel-shard.nudge{ animation:relNudge 1.5s ease 2; }
@keyframes relNudge{ 0%,100%{ box-shadow:none } 50%{ box-shadow:0 0 0 2px rgba(216,162,74,.8), 0 0 22px rgba(216,162,74,.55) } }

/* retour en arrière sur le lieu de la trouvaille */
  .rel-flash{ position:absolute; inset:-6%; border-radius:12px; pointer-events:none; opacity:0;
              background-size:cover; background-position:center;
              filter:saturate(.35) contrast(.9); mix-blend-mode:screen; }
  .rel-flash.on{ animation:relFlash .78s ease both; }
@keyframes relFlash{ 0%{opacity:0; transform:scale(1.06)} 22%{opacity:.5} 100%{opacity:0; transform:scale(1)} }

/* 1355 · 671 ans · 2026 */
  .rel-years{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
              text-align:center; font:600 22px/1.2 "Cinzel",serif; letter-spacing:.16em;
              color:#f0dcae; text-shadow:0 0 24px rgba(216,162,74,.85); opacity:0; pointer-events:none; }
  .rel-years.on{ animation:relYears 2.5s ease both; }
@keyframes relYears{ 0%{opacity:0; letter-spacing:.5em} 25%{opacity:1; letter-spacing:.16em}
                     70%{opacity:1} 100%{opacity:0; letter-spacing:.3em} }
  .rel-stage.done{ animation:relBloom 2.6s ease both; }
@keyframes relBloom{ 0%{ filter:none } 30%{ filter:brightness(1.9) drop-shadow(0 0 46px rgba(216,162,74,.95)) }
                     100%{ filter:brightness(1.15) drop-shadow(0 0 26px rgba(216,162,74,.6)) } }
  .rel-stage.done::after{ opacity:.85; }

/* plateau des éclats */
  .rel-tray{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:6px;
             max-width:min(92vw,400px); }
  .rel-shard{ width:52px; height:52px; padding:0; border:0; background:none; cursor:pointer;
              opacity:0; transition:transform .5s cubic-bezier(.2,1.2,.4,1), opacity .4s ease; }
  .rel-shard.in{ opacity:1; }
  .rel-shard img{ width:100%; height:100%; object-fit:contain; display:block;
                  filter:drop-shadow(0 3px 7px rgba(0,0,0,.7)); }
  .rel-shard.sel img{ filter:drop-shadow(0 0 12px rgba(216,162,74,.95)) brightness(1.3); transform:scale(1.14); }
  .rel-shard.gone{ opacity:0; transform:scale(.4); }

/* ---- faisceau de la lampe ---- */
  .art.has-torch img{ filter:brightness(.24) saturate(.7); transition:filter .6s ease; }
  .torch{ position:absolute; inset:0; z-index:3; --tx:50%; --ty:55%; touch-action:none; }
  .torch::before{ content:""; position:absolute; inset:0; pointer-events:none;
      -webkit-backdrop-filter:brightness(3.6) saturate(1.35); backdrop-filter:brightness(3.6) saturate(1.35);
      -webkit-mask:radial-gradient(circle 92px at var(--tx) var(--ty), #000 0 38%, transparent 72%);
              mask:radial-gradient(circle 92px at var(--tx) var(--ty), #000 0 38%, transparent 72%); }
  .torch-tip{ position:absolute; left:0; right:0; bottom:14px; text-align:center;
      font:500 13px/1.3 "Inter",sans-serif; color:rgba(240,220,174,.8); pointer-events:none;
      text-shadow:0 2px 10px rgba(0,0,0,.9); animation:torchTip 2.6s ease-in-out infinite; }
  .torch.live .torch-tip{ opacity:0; transition:opacity .5s ease; }
@keyframes torchTip{ 0%,100%{opacity:.45} 50%{opacity:.95} }

/* ---- bascule de la dalle d'autel ---- */
  .flip-ov{ position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
            background:rgba(4,7,12,.94); opacity:0; transition:opacity .5s ease; perspective:900px; }
  .flip-ov.go{ opacity:1; }
  .flip-ov.out{ opacity:0; }
  .flip-slab{ width:min(86vw,420px); transform:rotateX(0deg) scale(.9); transform-style:preserve-3d;
              transition:transform 2s cubic-bezier(.5,0,.2,1); }
  .flip-ov.go .flip-slab{ transform:rotateX(180deg) scale(1); }
  .flip-slab img{ width:100%; display:block; filter:drop-shadow(0 18px 40px rgba(0,0,0,.8)); }

/* ---- la tuile II se révèle après la victoire ---- */
  .tile.reveal{ animation:tileReveal 3s ease both; }
@keyframes tileReveal{ 0%{ box-shadow:0 0 0 0 rgba(216,162,74,0) }
  18%{ box-shadow:0 0 0 3px rgba(216,162,74,.95), 0 0 46px rgba(216,162,74,.7); transform:translateY(-4px) }
  55%{ box-shadow:0 0 0 2px rgba(216,162,74,.6), 0 0 30px rgba(216,162,74,.45) }
  100%{ box-shadow:0 0 0 0 rgba(216,162,74,0); transform:none } }
  .tile.reveal .art::after{ content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(105deg,transparent 30%,rgba(255,232,180,.55) 50%,transparent 70%);
      background-size:280% 100%; animation:tileSweep 1.7s ease .25s both; }
@keyframes tileSweep{ from{ background-position:180% 0 } to{ background-position:-80% 0 } }

@media (prefers-reduced-motion: reduce){
  .rel-cell.filled,.rel-flash.on,.rel-years.on,.rel-stage.done,.tile.reveal,.tile.reveal .art::after{ animation:none; }
  .flip-slab{ transition:none; }
}

/* ---- M40 : bandeau de victoire ---- */
  .win-panel{ position:absolute; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
      padding:24px; background:radial-gradient(ellipse at 50% 40%, rgba(40,28,12,.96), rgba(4,6,10,.985)); }
  .win-panel.open{ display:flex; animation:winIn .55s ease both; }
@keyframes winIn{ from{opacity:0} to{opacity:1} }
  .win-card{ width:100%; max-width:340px; text-align:center; padding:26px 22px 22px;
      border-radius:18px; background:linear-gradient(180deg, rgba(28,22,14,.92), rgba(14,12,9,.94));
      box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(216,162,74,.35);
      animation:winCard .7s cubic-bezier(.2,1.2,.35,1) both; }
@keyframes winCard{ from{ transform:translateY(18px) scale(.94); opacity:0 } to{ transform:none; opacity:1 } }
  .win-seal{ font-size:30px; color:#e7c27a; text-shadow:0 0 26px rgba(216,162,74,.9);
      animation:winSeal 2.6s ease-in-out infinite; }
@keyframes winSeal{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.14); opacity:1 } }
  .win-title{ font:700 30px/1.1 "Cinzel",serif; letter-spacing:.2em; color:#f2dfb2; margin:8px 0 10px;
      text-shadow:0 0 30px rgba(216,162,74,.55); }
  .win-sub{ font:600 17px/1.35 "Cormorant Garamond",serif; color:#e9dcc0; }
  .win-rule{ height:1px; margin:16px auto; width:60%;
      background:linear-gradient(90deg,transparent,rgba(216,162,74,.7),transparent); }
  .win-note{ font:400 14px/1.5 "Inter",sans-serif; color:rgba(230,214,186,.72); }
  .win-btn{ margin-top:20px; width:100%; padding:14px 16px; border:0; border-radius:12px; cursor:pointer;
      font:600 15px/1 "Inter",sans-serif; color:#20180c;
      background:linear-gradient(180deg,#e9c77e,#c99a44); box-shadow:0 10px 24px rgba(0,0,0,.5); }
  .win-btn:active{ transform:translateY(1px); }

/* ---- M40 : effacer la progression ---- */
  .wipe-btn{ grid-column:1/-1; margin:14px auto 4px; padding:10px 18px; cursor:pointer;
      background:none; border:1px solid rgba(216,162,74,.28); border-radius:10px;
      font:500 13px/1 "Inter",sans-serif; color:rgba(230,214,186,.55); }
  .wipe-btn:hover{ color:rgba(230,214,186,.9); border-color:rgba(216,162,74,.55); }

/* ---- M40 : tuile scellée ---- */
  .tile .status.sealed{ background:rgba(10,14,20,.72); color:rgba(230,214,186,.75);
      box-shadow:inset 0 0 0 1px rgba(216,162,74,.3); }

@media (prefers-reduced-motion: reduce){
  .win-panel.open,.win-card,.win-seal{ animation:none; }
}

/* ---- M41 : invite d'installation iOS ---- */
  .ios-card{ position:absolute; left:12px; right:12px; bottom:14px; z-index:70;
      display:none; align-items:flex-start; gap:12px; padding:14px 14px 12px;
      border-radius:16px; background:linear-gradient(180deg,rgba(26,21,14,.97),rgba(13,11,8,.97));
      box-shadow:0 18px 44px rgba(0,0,0,.65), inset 0 0 0 1px rgba(216,162,74,.32); }
  .ios-card.open{ display:flex; animation:iosIn .6s cubic-bezier(.2,1.2,.35,1) both; }
@keyframes iosIn{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
  .ios-ico{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
      font-size:18px; color:#20180c; background:linear-gradient(180deg,#e9c77e,#c99a44); }
  .ios-body{ flex:1 1 auto; min-width:0; }
  .ios-title{ font:600 14px/1.2 "Inter",sans-serif; color:#f0dcae; margin-bottom:3px; }
  .ios-text{ font:400 13px/1.45 "Inter",sans-serif; color:rgba(230,214,186,.78); }
  .ios-text b{ color:#e7c27a; font-weight:600; }
  .ios-close{ flex:0 0 auto; align-self:center; padding:8px 10px; cursor:pointer;
      background:none; border:1px solid rgba(216,162,74,.3); border-radius:9px;
      font:500 12px/1 "Inter",sans-serif; color:rgba(230,214,186,.6); }
@media (prefers-reduced-motion: reduce){ .ios-card.open{ animation:none; } }