<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' blob: data:;">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{{ PRODUCT_NAME }}}</title>
<style>
  /* — Police web (mets la même que ton TMP en .woff2) — */
  @font-face{
    font-family:"UiBrand";
    src:url("StreamingAssets/Fonts/Anton-Regular.woff2") format("woff2");
    font-display:swap;
  }

  :root{
    /* sous-titres */
    --sub-font-size: 46px;
    --sub-radius: 16px;

    /* image overlay (ancrée bas-droite) */
    --overlay-gap: clamp(12px, 2.5vw, 28px);
    --overlay-bottom-clear: 120px;     /* marge au-dessus du bandeau */
    --overlay-maxw: clamp(140px, 22vw, 360px);
  }

  html,body{
    height:100%; margin:0; background:#000; color:#fff;
    font:16px/1.35 UiBrand, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  }

  /* Conteneurs Unity + couches */
  #unity-container{ position:fixed; inset:0; overflow:hidden; isolation:isolate; }
  #unity-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; background:#000 !important; outline:none; }

  /* Vidéo AU-DESSUS du canvas */
  #video-overlay{ position:absolute; inset:0; z-index:5; }
  #video-overlay video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; pointer-events:none; background:#000; z-index:5;
  }

  /* Image overlay : ancrée bas-droite AU-DESSUS des textes */
  #img-overlay{ position:absolute; inset:0; z-index:30; pointer-events:none; display:block; }
  #dom-img{
    position:absolute;
    right: var(--overlay-gap);
    bottom: calc(var(--overlay-gap) + var(--overlay-bottom-clear) + env(safe-area-inset-bottom));
    max-width: var(--overlay-maxw);
    max-height: 32vh;
    width:auto; height:auto; object-fit:contain;
    opacity:0; transform:scale(.995);
    transition:opacity .22s ease-out, transform .22s ease-out;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
  }
  #img-overlay.show #dom-img{ opacity:1 !important; transform:scale(1); }

  /* Bandeau SOUS-TITRES plein écran (au-dessus de la vidéo, sous l'image) */
  #dom-overlay{ position:absolute; inset:0; z-index:20; pointer-events:none; }
  .speaker{
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    width: 90vw; max-width: 1200px; text-align:center;
    font-size: 36px; font-weight:800; letter-spacing:.2px;
    color:#ffe26f; text-shadow:0 2px 4px rgba(0,0,0,.6);
  }

  .subtitle-wrap{
    position:absolute; left:0; right:0; bottom:0; display:block; pointer-events:none;
  }
  .subtitle{
    width:100%; max-width:none; margin:0; box-sizing:border-box;
    padding:28px clamp(16px,3vw,46px) calc(28px + env(safe-area-inset-bottom));
    text-align:center;

    background:rgba(0,0,0,.62);
    backdrop-filter:saturate(120%) blur(2px);
    color:#fff; font-size:var(--sub-font-size); line-height:1.25; font-weight:500; letter-spacing:.1px;
    box-shadow:0 -1px 0 rgba(255,255,255,.06) inset, 0 -12px 40px rgba(0,0,0,.35);
    border-radius: var(--sub-radius) var(--sub-radius) 0 0;
  }
  .subtitle b,.subtitle strong{ font-weight:700; }
  .subtitle i,.subtitle em{ font-style:italic; }
  .subtitle u{ text-decoration:underline; }
  .subtitle br{ line-height:0; }

  /* Écran de démarrage + barre */
  #startOverlay{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:#000; }
  .panel{ width:min(560px,92vw); padding:28px 24px; border-radius:12px;
          background:linear-gradient(180deg,#0c0f14 0%,#0a0c10 100%); box-shadow:0 10px 40px rgba(0,0,0,.35);
          display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
  .cta{ padding:12px 18px; border-radius:10px; border:0; cursor:pointer; background:#1f6feb; color:#fff; font-weight:700; font-size:15px; }
  .cta:hover{ filter:brightness(1.08); }
  .hidden{ display:none !important; }
  .progress-wrap{ width:100%; }
  .progress-label{ display:flex; justify-content:space-between; font-size:12px; opacity:.75; margin-bottom:6px; }
  .progress{ width:100%; height:10px; background:#1b1f24; border-radius:999px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
  .progress>.bar{ width:0%; height:100%; background:linear-gradient(90deg,#2688ff,#4fb3ff); border-radius:999px; transition:width .15s ease-out; }
</style>
</head>
<body>
  <div id="unity-container">
    <canvas id="unity-canvas" tabindex="0"></canvas>

    <!-- Vidéo HTML5 (au-dessus du canvas) -->
    <div id="video-overlay"></div>

    <!-- Image overlay (au-dessus du texte) -->
    <div id="img-overlay"><img id="dom-img" alt=""></div>

    <!-- Overlay DOM des sous-titres -->
    <div id="dom-overlay">
      <div id="dom-speaker" class="speaker"></div>
      <div class="subtitle-wrap"><div id="dom-subtitle" class="subtitle"></div></div>
    </div>
  </div>

  <!-- Click-to-start + barre -->
  <div id="startOverlay">
    <div class="panel">
      <div style="font-weight:800">{{{ PRODUCT_NAME }}}</div>
      <div style="opacity:.75;font-size:13px">Cliquez pour démarrer le chargement</div>
      <button id="startBtn" class="cta">Cliquer pour démarrer</button>
      <div id="progressArea" class="progress-wrap hidden">
        <div class="progress-label"><span>Chargement…</span><span id="pctTxt">0%</span></div>
        <div class="progress"><div id="bar" class="bar"></div></div>
      </div>
      <div id="errorBox" class="hidden" style="color:#ff9b9b;font-size:12px"></div>
    </div>
  </div>

  <script>
    const buildUrl="Build", loaderUrl=buildUrl + "/{{{ LOADER_FILENAME }}}";
    const config = {
      dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
      frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
      codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "{{{ COMPANY_NAME }}}",
      productName: "{{{ PRODUCT_NAME }}}",
      productVersion: "{{{ PRODUCT_VERSION }}}",
      webglContextAttributes: { alpha:false } // canvas opaque (vidéo au-dessus)
    };

    const container=document.getElementById('unity-container');
    const canvas=document.getElementById('unity-canvas');
    const videoLayer=document.getElementById('video-overlay');
    const imgLayer=document.getElementById('img-overlay');
    const overlay=document.getElementById('startOverlay');
    const startBtn=document.getElementById('startBtn');
    const progressUI=document.getElementById('progressArea');
    const bar=document.getElementById('bar');
    const pctTxt=document.getElementById('pctTxt');
    const errorBox=document.getElementById('errorBox');

    function setProgress(v){ v=Math.max(0,Math.min(1,v||0)); bar.style.width=(v*100).toFixed(0)+'%'; pctTxt.textContent=(v*100).toFixed(0)+'%'; }

    function enforceLayers(){
      container.style.position='fixed'; container.style.inset='0'; container.style.overflow='hidden'; container.style.isolation='isolate';
      canvas.style.position='absolute'; canvas.style.inset='0'; canvas.style.zIndex='1';
      videoLayer.style.position='absolute'; videoLayer.style.inset='0'; videoLayer.style.zIndex='5';
      imgLayer.style.position='absolute'; imgLayer.style.inset='0'; imgLayer.style.zIndex='30';
      const v=(window.Module&&Module.WVO_video)||videoLayer.querySelector('video');
      if(v){ v.style.zIndex='5'; v.style.pointerEvents='none'; v.style.objectFit=v.style.objectFit||'cover'; }
      document.getElementById('dom-overlay').style.zIndex='20';
    }
    enforceLayers();
    setInterval(enforceLayers,600);
    new MutationObserver(enforceLayers).observe(container,{attributes:true,childList:true,subtree:true});

    let started=false;
    function startUnity(){
      if(started) return; started=true;
      startBtn.classList.add('hidden'); progressUI.classList.remove('hidden'); setProgress(0);
      const s=document.createElement('script'); s.src=loaderUrl;
      s.onload=()=>{ createUnityInstance(canvas, config, (p)=>setProgress(p)).then(()=>{ setProgress(1); overlay.remove(); }).catch(err=>{ errorBox.classList.remove('hidden'); errorBox.textContent=(err&&err.message)?err.message:String(err); console.error(err); }); };
      s.onerror=()=>{ errorBox.classList.remove('hidden'); errorBox.textContent='Erreur : impossible de charger le loader Unity.'; };
      document.body.appendChild(s);
    }
    startBtn.addEventListener('click', startUnity, {once:true});
  </script>
  <script>
  // Désactive le menu contextuel sur la zone de jeu (canvas + couches vidéo/images)
  (function () {
    function isInUnityArea(el) {
      return el && (el.id === 'unity-canvas' ||
                    el.closest && (el.closest('#unity-container') ||
                                   el.closest('#video-overlay') ||
                                   el.closest('#img-overlay')));
    }
    document.addEventListener('contextmenu', function (e) {
      if (isInUnityArea(e.target)) e.preventDefault();
    }, {capture:true});
  })();
</script>
</body>
</html>
