/* Terrain Sûr — écran « Vidéo » plein écran, façon TikTok / Reels */

body:not([data-scr="video"]) .reels{display:none}
.reels{
  position:fixed;inset:0;z-index:800;display:grid;place-items:center;
  background:#0D0B08;color:#F6F0E4;overscroll-behavior:contain;touch-action:none;
  font-family:var(--body);
  --tsr-bas:calc(var(--tb-h,64px) + 26px + env(safe-area-inset-bottom));
}
.tsr{position:absolute;inset:0;display:grid;place-items:center}
.tsr-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;
  filter:blur(40px) saturate(140%) brightness(.4);transform:scale(1.1)}
.tsr-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.tsr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* grand écran : la vidéo verticale au centre, au-dessus de la barre d'onglets */
@media (min-aspect-ratio:10/16){
  .tsr{padding:18px 18px calc(var(--tb-h,64px) + 36px)}
  .tsr-stage{width:auto;height:100%;max-height:900px;aspect-ratio:9/16;border-radius:26px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(246,240,228,.08)}
  .reels{--tsr-bas:18px}
}

/* fondu haut et bas pour la lisibilité */
.tsr-stage::before,.tsr-stage::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.tsr-stage::before{top:0;height:130px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.tsr-stage::after{bottom:0;height:200px;background:linear-gradient(transparent,rgba(0,0,0,.78))}

.tsr-bars{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:4px}
.tsr-bars i{height:3px;border-radius:2px;background:rgba(246,240,228,.28);overflow:hidden}
.tsr-bars b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#E07A1F,#D4A72C)}

.tsr-top{position:absolute;z-index:3;top:calc(20px + env(safe-area-inset-top));right:6px;display:flex;gap:4px}
.tsr-logo{width:34px;height:34px;border-radius:10px;flex:none;background:#1E1B16;border:1px solid rgba(246,240,228,.2);display:grid;place-items:center}
.tsr-logo svg{width:22px;height:22px}
.tsr-id{flex:1;min-width:0;line-height:1.15}
.tsr-id b{display:block;font:700 15px/1.1 var(--display)}
.tsr-id span{font-size:12px;color:rgba(246,240,228,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

.tsr-ico{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#F6F0E4;background:rgba(20,18,14,.45);-webkit-tap-highlight-color:transparent;transition:transform .2s
}
.tsr-ico:active{transform:scale(.88)}
.tsr-ico:focus-visible,.tsr-tap button:focus-visible,.tsr-sonpill:focus-visible{outline:2px solid #D4A72C;outline-offset:-3px}
.tsr-ico svg{width:24px;height:24px}

.tsr-sonpill{position:absolute;z-index:3;top:calc(24px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,240,228,.2);background:rgba(30,27,22,.55);color:#F6F0E4;font:600 13px/1 var(--body);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tsr-sonpill svg{width:18px;height:18px}

/* zones de toucher : gauche = précédent, droite = suivant, centre = pause */
.tsr-tap{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:28% 1fr 28%}
.tsr-tap button{border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* colonne d'actions à droite */
.tsr-side{position:absolute;z-index:3;right:8px;bottom:calc(var(--tsr-bas) + 64px);display:grid;gap:16px;justify-items:center}
.tsr-side .tsr-ico{width:50px;height:50px;background:rgba(20,18,14,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(246,240,228,.16)}
.tsr-side small{display:block;font:600 10.5px/1 var(--body);margin-top:6px;padding:4px 7px;border-radius:999px;text-align:center;color:#F6F0E4;background:rgba(20,18,14,.55)}

.tsr-bottom{position:absolute;z-index:3;left:14px;right:10px;bottom:var(--tsr-bas);display:flex;align-items:center;justify-content:space-between;gap:12px}
.tsr-chap{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F0C24A;margin:0;padding:8px 11px;border-radius:999px;
  background:rgba(20,18,14,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tsr-txt{margin:8px 64px 0 0;font:500 14px/1.4 var(--body);color:rgba(246,240,228,.92);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tsr-cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;
  border:0;border-radius:999px;cursor:pointer;font:800 15px/1 var(--display);color:#1E1B16;
  background:radial-gradient(120% 160% at 30% 0%,#F29A45,#E07A1F 55%,#B85E12);
  box-shadow:0 14px 30px -12px rgba(224,122,31,.8),inset 0 1px 0 rgba(255,255,255,.35)
}
.tsr-cta:focus-visible{outline:2px solid #D4A72C;outline-offset:3px}
.tsr-cta svg{width:18px;height:18px}
.tsr.is-ended .tsr-cta{animation:tsrPulse 1.6s ease-in-out infinite}
@keyframes tsrPulse{50%{transform:scale(1.03);box-shadow:0 18px 40px -10px rgba(224,122,31,1)}}

/* indicateur de pause */
.tsr-state{position:absolute;z-index:3;left:50%;top:45%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(30,27,22,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:scale(.7);transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.25,1.4);pointer-events:none}
.tsr-state svg{width:32px;height:32px}
.tsr.is-paused .tsr-state{opacity:1;transform:none}
.tsr-top,.tsr-side,.tsr-bottom,.tsr-sonpill{transition:opacity .2s}
.tsr.is-held .tsr-top,.tsr.is-held .tsr-side,.tsr.is-held .tsr-bottom,.tsr.is-held .tsr-sonpill{opacity:0}

.tsr-toast{position:absolute;z-index:4;left:50%;top:120px;transform:translateX(-50%);padding:9px 14px;border-radius:999px;
  font:600 13px/1 var(--body);background:rgba(246,240,228,.95);color:#1E1B16;opacity:0;transition:opacity .2s;pointer-events:none}
.tsr-toast.on{opacity:1}

/* l'entrée dans l'écran Vidéo : léger zoom */
@keyframes tsrIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
body.scr-anim .reels .tsr-stage{animation:tsrIn .35s cubic-bezier(.2,.9,.25,1) both}

@media (prefers-reduced-motion:reduce){
  .tsr-state{transition:none}
  .tsr.is-ended .tsr-cta,body.scr-anim .reels .tsr-stage{animation:none}
}
@media print{.reels{display:none}}