:root{
  --frame:#000; --title:#fff; --subtitle:#c9c9c9;
  --title-shadow:0 2px 4px rgba(0,0,0,.70), 0 8px 24px rgba(0,0,0,.45);
  --subtitle-shadow:0 1px 3px rgba(0,0,0,.70), 0 6px 18px rgba(0,0,0,.40);
  --safe-top:0px; --safe-bottom:0px; --flags-bottom:2px;
}
html,body{
  height:100%; margin:0; background:var(--frame); overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
#cover-container{
  position:relative; width:100%; height:100vh; height:100svh; height:100dvh;
  background:var(--frame); overflow:hidden;
}

/* Image */
#cover-picture{display:block;}
#cover-image{
  position:absolute; top:auto; bottom:calc(var(--safe-bottom));
  left:50%; transform:translateX(-50%) scaleY(1.03);
  height:calc(100% - var(--safe-top) - var(--safe-bottom));
  width:auto; max-width:100%; object-fit:contain; display:block; z-index:1;
}

/* Titres */
#titles{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top));
  left:calc(16px + env(safe-area-inset-left));
  right:calc(16px + env(safe-area-inset-right));
  z-index:5; pointer-events:none; text-transform:uppercase; letter-spacing:.02em; text-align:center;
}
.title-wrap{display:inline-block;}
#titles h1{
  margin:0 0 clamp(8px,1.6vmin,18px) 0; color:var(--title); font-weight:900; line-height:1;
  text-shadow:var(--title-shadow); font-size:clamp(28px,7.2vw,110px); white-space:nowrap; word-spacing:.08em;
}
.subtitles{
  width:100%; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  column-gap:clamp(4px,1.2vw,14px); color:var(--subtitle); font-weight:600; line-height:1.05;
  text-shadow:var(--subtitle-shadow); font-size:clamp(21px,4.3vw,60px); white-space:nowrap;
}
.s-left{justify-self:start;}
.s-right{justify-self:end;}
.slash{justify-self:center; padding:0 clamp(3px,1vw,8px);}

/* Anaglyphe portrait (ta version validée) */
@media (orientation:portrait){
  .subtitles{font-size:clamp(22px,4.8vw,62px);}
  .subtitles .s-left,.subtitles .s-right{
    text-shadow:1.2px 0 0 rgba(0,255,255,.6), -1.2px 0 0 rgba(255,0,0,.6), var(--subtitle-shadow);
  }
}

/* Déposé du lettrage */
.subtitle-letter{display:inline-block; transform:translateY(0); opacity:1;}
.subtitles.subtitle-run .subtitle-letter{
  animation:letterDrop .66s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0)*.035s);
}
@keyframes letterDrop{
  0%{opacity:0; transform:translateY(-.55em) skewY(3deg); filter:blur(1.2px);}
  60%{opacity:1; filter:blur(.25px);}
  100%{opacity:1; transform:translateY(0) skewY(0); filter:blur(0);}
}
@media (prefers-reduced-motion:reduce){
  .subtitles.subtitle-run .subtitle-letter{animation:none!important; opacity:1; transform:none; filter:none;}
}

/* Drapeaux */
#flags{
  position:absolute;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(2px + env(safe-area-inset-bottom));
  display:flex; gap:14px; z-index:10;
}
.flag-wrap{display:inline-block; will-change:transform; transform-origin:left center;}
#flags img{
  display:block; width:42px; height:auto; cursor:pointer; user-select:none; -webkit-user-drag:none;
  padding:5px; border-radius:10px;
  filter:drop-shadow(-4px 7px 5px rgba(0,0,0,.4)) saturate(1);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#flags img:hover,#flags img:focus,#flags img.touch-highlight{
  transform:scale(1.06);
  filter:drop-shadow(-4px 7px 5px rgba(0,0,0,.4)) saturate(1.08);
  box-shadow:0 0 0 3px rgba(255,255,255,.26), 0 6px 20px rgba(0,0,0,.45);
}
#flags img:active{
  transform:scale(1.12);
  filter:drop-shadow(-4px 7px 5px rgba(0,0,0,.4)) saturate(1.08);
  box-shadow:0 0 0 4px rgba(255,255,255,.28), 0 10px 30px rgba(0,0,0,.55);
}

/* Portrait validé */
@media (orientation:portrait){
  :root{--subtitle:#b8b8b8; --safe-top:12vh; --safe-bottom:1vh;}
  #cover-image{
    top:auto; bottom:calc(var(--safe-bottom) - 6px); left:50%;
    transform:translateX(-50%) scaleY(1.015);
    height:calc(100% - var(--safe-top) - var(--safe-bottom));
    width:106%; max-width:none; object-fit:fill; display:block;
  }
  #titles{left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right));}
  #titles h1{font-size:clamp(38px, 9.2vw, 122px);}
}

/* ===== Coquille : IFRAME plein écran ===== */
#app-frame{
  position:fixed; inset:0; width:100%; height:100%;
  border:0; display:none; z-index:2147483647; background:#000;
}
#app-frame.active{ display:block; }

/* Fallback plein écran si FS refusé (ta base) */
html.fs-simulated, body.fs-simulated { overflow:hidden; }
html.fs-simulated #cover-container,
body.fs-simulated #cover-container{
  height:calc(var(--vh, 1vh) * 100);
}

/* Bouton "Revenir en plein écran" (visible uniquement après une sortie) */
#fs-reenter{
  position:fixed;
  top:14px;
  right:14px;
  width:56px;
  height:56px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,0.8);
  background:rgba(0,0,0,0.55);
  color:#ffffff;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2147483647;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
#fs-reenter .fs-icon{
  width:30px;
  height:30px;
  display:block;
}
#fs-reenter .fs-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#fs-reenter.visible{display:flex;}
#fs-reenter:active{transform:scale(0.98);}