/* Tablette animée : le panel dans un cadre de tablette, avec le passage du thème sombre au thème clair.
 * Balisage et animation : /js/tablette.js. Les captures viennent de scripts/panel-captures/capture.js.
 * Toutes les mesures du cadre sont en cqw (largeur de .tb-stage) : la tablette garde ses proportions
 * du téléphone au grand écran. */
.tb{--tb-acc:74,222,128;position:relative;margin:0 0 30px;
  /* Pose au repos : tablette de biais (rotations X, Y, Z) et décalée vers la droite, autant que la marge
     de la page le permet pour que l'écran reste entier (100vw - 100cqw = les deux marges). */
  --tb-ax:8deg;--tb-ay:16deg;--tb-az:-1.5deg;--tb-dx:clamp(2cqw,calc((100vw - 100cqw)/2 - 24px),9cqw)}
.tb-host{overflow-x:clip}
.tb-stage{position:relative;container-type:inline-size;perspective:1700px;perspective-origin:42% 36%}

/* Halo derrière la tablette : vert quand l'écran est sombre, blanc quand il passe au clair */
.tb-glow{position:absolute;inset:8% 2% -6%;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.75;
  background:radial-gradient(closest-side,rgba(var(--tb-acc),.3),rgba(var(--tb-acc),0) 74%);transition:opacity .9s ease}
.tb-glow::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(closest-side,rgba(255,255,255,.36),rgba(255,255,255,0) 74%)}
.tb.is-light .tb-glow::after{opacity:1}
html:root[data-theme=light] .tb-glow{opacity:.5;background:radial-gradient(closest-side,rgba(0,0,0,.2),rgba(0,0,0,0) 74%)}
html:root[data-theme=light] .tb-glow::after{display:none}

/* Cadre. --tb-e (de 0 à 1, donné par le script) fait arriver la tablette plus couchée et plus à droite,
   puis elle se pose dans sa position de biais à mesure qu'elle entre dans l'écran.
   Les ombres décalées en bas à gauche donnent l'épaisseur de la tranche que l'on voit sous cet angle. */
.tb-device{--tb-k:calc(1 - var(--tb-e,1));position:relative;padding:1.9cqw;border-radius:3.4cqw;transform-origin:50% 62%;will-change:transform;
  transform:translate3d(calc(var(--tb-dx) + var(--tb-k)*5cqw),0,0) rotateX(calc(var(--tb-ax) + var(--tb-k)*15deg)) rotateY(calc(var(--tb-ay) + var(--tb-k)*10deg)) rotateZ(calc(var(--tb-az) - var(--tb-k)*2deg)) scale(calc(1 - var(--tb-k)*.07));
  background:linear-gradient(150deg,#303137 0%,#0d0d0f 30%,#050506 68%,#222327 100%);
  box-shadow:0 0 0 1px #46474d,-.14cqw .14cqw 0 1px #3b3c42,-.28cqw .28cqw 0 1px #27282c,-.42cqw .42cqw 0 1px #151517,
    -3cqw 7cqw 9cqw -4cqw rgba(0,0,0,.85),-1.5cqw 3cqw 5cqw -3cqw rgba(0,0,0,.7)}
.tb-cam{position:absolute;top:.68cqw;left:50%;width:.54cqw;height:.54cqw;margin-left:-.27cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3b4a66,#0b0d12 62%);box-shadow:0 0 0 1px rgba(255,255,255,.05)}

/* Écran : les captures sont empilées, celle qui arrive se découvre par-dessus */
.tb-screen{position:relative;aspect-ratio:1912/1338;overflow:hidden;border-radius:1.5cqw;background:#0b0c0f;isolation:isolate;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tb-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.tb-img.is-on{opacity:1;z-index:1}
.tb-img.is-in{opacity:1;z-index:3}
.tb-halo{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:rgb(var(--tb-acc))}
.tb-screen::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 26%)}
.tb-glare{position:absolute;inset:-10% -30%;z-index:5;opacity:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 55%)}

/* Doigt : pastille translucide comme le pointeur d'une tablette */
.tb-tap,.tb-rip{position:absolute;left:60%;top:76%;z-index:7;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.tb-tap{width:max(2.5cqw,13px);height:max(2.5cqw,13px);opacity:0;background:rgba(140,144,152,.46);
  border:1.5px solid rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(0,0,0,.28),0 5px 16px rgba(0,0,0,.32);
  transition:left .85s cubic-bezier(.55,0,.15,1),top .85s cubic-bezier(.55,0,.15,1),opacity .3s ease}
.tb-rip{z-index:6;width:max(2.5cqw,13px);height:max(2.5cqw,13px);opacity:0;border:2px solid rgb(var(--tb-acc))}

/* Commandes sous la tablette */
.tb-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:clamp(40px,7.4vw,96px)}
.tb-note{font-size:14.5px;line-height:1.5;color:var(--ap-ink-2,#a1a1a6)}
.tb-ctl{display:flex;gap:10px;flex-wrap:wrap}
.tb-seg{display:inline-flex;gap:2px;padding:4px;border-radius:980px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.tb-seg button{appearance:none;display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 16px;border:0;border-radius:980px;cursor:pointer;
  background:transparent;color:#a1a1a6;font:600 13.5px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:0;transition:background .2s ease,color .2s ease}
.tb-seg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-seg button:hover{color:#f5f5f7}
.tb-seg button.on{background:#f5f5f7;color:#0b0b0d}
.tb-seg button:focus-visible{outline:2px solid rgb(var(--tb-acc));outline-offset:2px}
html:root[data-theme=light] .tb-seg{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.07)}
html:root[data-theme=light] .tb-seg button{color:#6e6e73}
html:root[data-theme=light] .tb-seg button:hover{color:#1d1d1f}
html:root[data-theme=light] .tb-seg button.on{background:#111;color:#fff}

@media(max-width:760px){
  .tb{--tb-ax:6deg;--tb-ay:12deg;--tb-az:-1.5deg;--tb-dx:2cqw}
  .tb-bar{justify-content:center;margin-top:30px}
  .tb-note{display:none}
  .tb-ctl{justify-content:center;gap:8px}
  .tb-seg button{padding:8px 12px;font-size:13px}
  .tb-seg button svg{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tb-tap,.tb-rip,.tb-glare,.tb-halo{display:none}
}