body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  background: #111;
  color: #eee;
}
.glt-page-wrap { max-width: 900px; margin: 0 auto; }

.glt-player{
  position:relative;
  user-select:none;
  outline:none;
}

.glt-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:8px;
  isolation:isolate;
  overflow:visible;
}

/* RESET WP/Theme */
.glt-stage, .glt-stage * , .glt-stage *::before , .glt-stage *::after{
  box-sizing:border-box;
}
.glt-stage button{
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  font:inherit !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  border:0 !important;
  background:transparent;
  color:inherit !important;
  appearance:none;
  -webkit-appearance:none;
}

.glt-video-wrap{
  position:absolute;
  inset:0;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  z-index:0;
}

.glt-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  z-index:0;
  transform:translateZ(0);
  transition:opacity .2s ease;
}
.glt-player.is-stopped .glt-video{ opacity:0; }

/* Fullscreen */
.glt-player.is-fullscreen .glt-stage{
  width:100vw; height:100vh;
  aspect-ratio:auto; border-radius:0;
}
.glt-player.is-fullscreen .glt-video-wrap{ border-radius:0; }

/* Overlay */
.glt-overlay{
  position:absolute;
  inset:0;
  cursor:pointer;
  z-index:5;
}

/* Pills globales */
.glt-btn,
.glt-skip,
.glt-close-btn{
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease, opacity .15s ease;
}
.glt-btn:hover,
.glt-skip:hover,
.glt-close-btn:hover{
  background:rgba(0,0,0,.72);
  border-color:rgba(255,255,255,.55);
}
.glt-btn:active,
.glt-close-btn:active{ transform:translateY(1px); }
.glt-skip:active{ transform:translateY(-50%) translateY(1px); }

/* Skip ±5 */
.glt-skip{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:20;

  width:56px !important;
  height:56px !important;

  background:rgba(0,0,0,.65) !important;
  border:2px solid rgba(255,255,255,.9) !important;
  box-shadow:0 3px 9px rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity:.97;
}
.glt-skip-left{ left:.6rem !important; right:auto !important; }
.glt-skip-right{ right:.6rem !important; left:auto !important; }
.glt-skip .glt-icon-fill svg{
  width:26px !important; height:26px !important; fill:#fff;
}

/* Bouton central Play / Pause – même look que les boutons ±5s */
.glt-play-toggle{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  z-index:20;

  width:56px !important;
  height:56px !important;

  border-radius:999px;
  background:rgba(0,0,0,.65) !important;
  border:2px solid rgba(255,255,255,.9) !important;
  box-shadow:0 3px 9px rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity:.97;

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease, opacity .15s ease;
}

.glt-play-toggle:hover{
  background:rgba(0,0,0,.72) !important;
  border-color:rgba(255,255,255,.55) !important;
}

.glt-play-toggle:active{
  transform:translate(-50%, -50%) translateY(1px) !important;
}

.glt-play-toggle .glt-icon svg{
  width:26px;
  height:26px;
  fill:#fff;
  stroke:none;
}

/* Close */
.glt-close-btn{
  position:absolute !important;
  top:.35rem !important; right:.45rem !important;
  left:auto !important;
  z-index:20;
  width:30px; height:30px;
  font-size:1rem;
}

/* Controls bas (2 lignes) */
.glt-controls{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  z-index:20;
  padding:.35rem .6rem .5rem;
  background:linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,.08));
  display:flex; flex-direction:column;
  gap:.35rem;
  overflow:visible;
}
.glt-progress-row{ display:flex; width:100%; }
.glt-buttons-row{
  display:flex; align-items:center; justify-content:space-between;
}
.glt-buttons-left,
.glt-buttons-right{
  display:flex; align-items:center; gap:.45rem;
}
.glt-btn{ width:32px; height:32px; }

/* Icons génériques */
.glt-icon{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.glt-icon svg{
  display:block; width:18px; height:18px;
  stroke:#fff; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.glt-icon-fill svg{
  width:20px; height:20px; fill:#fff; stroke:none;
}

/* help mark */
.glt-help-btn{ font-size:0; }
.glt-help-mark{
  font-weight:500; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; opacity:.95;
}

/* progress */
.glt-progress{
  width:100%;
  -webkit-appearance:none; appearance:none;
  height:4px; background:#555; border-radius:2px; cursor:pointer;
}
.glt-progress::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%;
  background:#e53935; border:none; margin-top:-3px;
}
.glt-progress::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%;
  background:#e53935; border:none;
}
.glt-progress::-moz-range-track{ height:4px; background:transparent; }

/* volume horizontal */
.glt-volume{ position:relative; display:flex; align-items:center; gap:.35rem; }

.glt-volume-slider{
  -webkit-appearance:none; appearance:none;
  width:0px; height:4px; opacity:0; pointer-events:none;
  background:#555; border-radius:2px; cursor:pointer;
  transition:width .18s ease, opacity .18s ease, margin-left .18s ease;
  margin-left:0;
}
.glt-volume.open .glt-volume-slider,
.glt-volume:hover .glt-volume-slider{
  width:80px; opacity:1; pointer-events:auto; margin-left:.2rem;
}
.glt-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:none; margin-top:-3px;
}
.glt-volume-slider::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:none;
}
.glt-volume-slider::-moz-range-track{ height:4px; background:transparent; }

/* Aide moderne */
.glt-help-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(900px, 94%);
  max-height:92%;
  background:#fff;
  color:#111;
  border-radius:16px;
  padding:30px 18px 14px;
  display:none;
  z-index:30;
  overflow:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.glt-help-panel.visible{ display:block; }

.glt-help-close{
  position:absolute;
  top:4px;
  right:10px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:none; background:transparent; color:#111;
  font-size:18px; cursor:pointer; opacity:.75; z-index:2;
}
.glt-help-close:hover{ opacity:1; }

.glt-help-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}
.glt-help-section{
  background:#f6f7f9;
  border:1px solid #e9ecef;
  border-radius:12px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.glt-help-title{
  margin:0 0 6px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:#6f6f6f;
}
.glt-help-row{
  display:flex; align-items:center; gap:10px;
  margin:4px 0; font-size:14px; flex-wrap:nowrap;
}
.glt-help-row .glt-keycap + .glt-keycap{ margin-left:6px; }
.glt-help-row > span:last-child{
  flex:1 1 auto; min-width:0; text-align:left; line-height:1.25;
}
.glt-keycap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; padding:4px 8px; border-radius:7px;
  background:#fdfdfd; border:1px solid #d1d5db;
  font-size:12px; font-weight:600; color:#111;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.10);
  white-space:nowrap;
}
@media (max-width:700px){
  .glt-help-panel{ width:96%; max-height:94%; padding:28px 14px 10px; }
  .glt-help-grid{ grid-template-columns:1fr; gap:10px; }
  .glt-help-row{ flex-wrap:wrap; }
}

/* Auto-hide UI */
.glt-player.ui-hidden .glt-controls,
.glt-player.ui-hidden .glt-close-btn,
.glt-player.ui-hidden .glt-skip,
.glt-player.ui-hidden .glt-play-toggle{
  opacity:0;
  pointer-events:none;
}
.glt-player.ui-hidden .glt-tooltip{
  opacity:0 !important; pointer-events:none !important;
}
.glt-player.ui-hidden {
  transition: opacity 1s ease-in-out;
}

/* Tooltip unique */
.glt-tooltip{
  position:absolute;
  left:0; top:0;
  transform:translate3d(0,0,0);
  z-index:70;
  max-width:calc(100% - 16px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(0,0,0,.86);
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.glt-tooltip::after{
  content:"";
  position:absolute;
  left:8px; right:8px;
  height:3px;
  background:#e53935;
  border-radius:2px;
  opacity:.95;
}
.glt-tooltip.tip-top::after{ bottom:4px; }
.glt-tooltip.tip-bottom::after{ top:4px; }
.glt-tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  transform:translateX(-50%);
}
.glt-tooltip.tip-top::before{
  bottom:-6px;
  border-top:6px solid rgba(0,0,0,.86);
}
.glt-tooltip.tip-bottom::before{
  top:-6px;
  border-bottom:6px solid rgba(0,0,0,.86);
}
.glt-tooltip.visible{ opacity:1; }
@media (hover:none){ .glt-tooltip{ font-size:13px; } }

/* =========================================================
   MOBILE ONLY: pas d’aide, pas de “clavier”
   + pas de tooltips, pas de barre volume
   ========================================================= */
@media (hover: none) and (pointer: coarse){
  .glt-help-btn{ display:none !important; }
  .glt-help-panel{ display:none !important; }

  /* tooltips off sur mobile */
  .glt-tooltip{ display:none !important; }

  /* barre de volume supprimée sur mobile (slider only) */
  .glt-volume-slider{
    display:none !important;
    width:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
    margin-left:0 !important;
  }

  /* optionnel: resserrer l'espace */
  .glt-volume{ gap:0 !important; }
}

/* Suppression du fond bleu sur mobile et desktop lors du focus sur les boutons */
button, .glt-player {
  -webkit-tap-highlight-color: transparent; /* Désactive l'effet de surbrillance */
}

/* ===== EMBED WRAPPER (page parente) ===== */

.glt-embed-wrap {
  max-width: 900px;
  margin: 2rem auto;
}

.glt-embed-wrap h2 {
  margin-bottom: 0.75rem;
}

.glt-embed-inner {
  position: relative;
  width: 100%;
  /* 16:9 : 56.25% (tu peux ajuster si tu veux plus haut ou plus bas) */
  padding-top: 56.25%;
}

.glt-embed-inner .glt-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}