/* ================================
   MINIATURES — SWITCHABLE
   (Version A par défaut : cover)
================================ */
:root{
  --thumb-w: <?= (int)$thumbW ?>px;
  --thumb-h: <?= (int)$thumbH ?>px;
  --thumb-fit: <?= htmlspecialchars($thumbFit) ?>; /* cover | contain */
  --thumb-bg: <?= htmlspecialchars($thumbBg) ?>;
  --thumb-radius: 6px;
}

/* ================= BASE ================= */
body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#111;
  color:#fff;
}

/* ========== HEADER (sans Bootstrap) ========== */
.header-bar{
  position: sticky;
  top: 0;
  z-index: 2000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(6px);
}
.header-left,.header-center,.header-right{
  flex:1;
  display:flex;
  align-items:center;
}
.header-left{ justify-content:flex-start; }
.header-center{ justify-content:center; }
.header-right{ justify-content:flex-end; gap:8px; }

.gallery-title{
  color:#fff;
  font-size:1.15rem;
  padding:4px 10px;
  border-radius:8px;
  background: rgba(0,0,0,0.35);
  white-space:nowrap;
  max-width: 80vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

/*ancien  style simple pour le bouton retour */
/*
.btn-retour{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-size:0.9rem;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.35);
}
.btn-retour:hover{ border-color: rgba(255,255,255,0.7); }
*/

/*Nouveau style pour le bouton retour */

.btn-retour{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px;
  border-radius:999px;

  background:rgba(0,0,0,0.45);
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);

  font-size:0.9rem;
  text-decoration:none;
  cursor:pointer;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease,
    color .2s ease;
}

/* effet hover identique aux flèches */
.btn-retour:hover{
  background:rgba(13,110,253,0.85);
  color:#fff;
  box-shadow:0 0 14px rgba(13,110,253,.85);
  transform:scale(1.05);
}



.btn-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:34px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.btn-ico:hover{ border-color: rgba(255,255,255,0.7); }

.audio-player{
  height:28px;
  max-width:220px;
}
@media (max-width: 650px){
  .gallery-title{ font-size:1.0rem; }
  .audio-player{ max-width:140px; }
}

/* ===== VUE ===== */
#vue{
  display:grid;
  grid-template-columns:repeat(auto-fill, var(--thumb-w));
  gap:12px;
  padding:20px;
  justify-content:center;
}
.thumb{
  width:var(--thumb-w);
  height:var(--thumb-h);
  position:relative;
  cursor:pointer;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:var(--thumb-fit);
  background:var(--thumb-bg);
  border-radius:var(--thumb-radius);
  display:block;
}
.thumb.video::after{
  content:"▶ vidéo";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  border-radius:var(--thumb-radius);
  pointer-events:none;
}

/* ajout 02/26 */
.thumb:hover{
    transform:scale(1.6); /* base 1.03 */
    box-shadow:0 0 8px rgba(255,255,255,0.4);
    z-index: 500;
}



/* ===== OVERLAY ===== */
  /* overlay au-dessus du header */
  /*#overlay{ z-index: 5000; }*/
#overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  z-index:5000; /* z-index:1000;*/
  pointer-events:auto;
}

#overlay.show{ display:block; }

/* ===== VIEWER ===== */
#viewer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none; /* boutons cliquables */ 
}
#viewer img,
#viewer video{
  max-width:90vw;
  max-height:90vh;
  pointer-events:auto;
}

/* ===== CONTROLES OVERLAY ===== */
    /* flèches simples */
    /*
    .arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      font-size:48px;
      cursor:pointer;
      -webkit-user-select:none;
      user-select:none;
    }
    .arrow.left{ left:20px; }
    .arrow.right{ right:20px; }
    */
/* flèches bleues */
/* ===== FLÈCHES CAROUSEL — visibilité renforcée ===== */
.arrow{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:42px;
  color:#ffffff;

  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.25);

  cursor:pointer;
  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;

  -webkit-user-select:none;
  user-select:none;
}

/* Position */
.arrow.left{ left:20px; }
.arrow.right{ right:20px; }

/* Hover / focus */
.arrow:hover{
  background:rgba(13,110,253,0.85); /* bleu */
  color:#fff;
  box-shadow:0 0 14px rgba(13,110,253,.85);
  transform:scale(1.05);
}

/* Immersive : légèrement plus grandes */
body.immersive .arrow{
  width:64px;
  height:64px;
  font-size:48px;
}




#close, #playPause, #btnFull{
  position:absolute;
  top:15px;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

/* controls overlay encore au-dessus */
#close, #playPause, #btnFull, .arrow{ z-index: 5100; }

/* quand overlay ouvert, on masque le header VUE */
body.overlay-open .header-bar{ display:none; }


#close{ right:20px; font-size:26px; }
#playPause{ left:20px; font-size:22px; }
#btnFull{ left:65px; font-size:22px; }

/* ===== INDICATION VIDÉO ===== */
#videoHint{
  position:absolute;
  bottom:90px;              /* ⬆️ plus haut que la légende */
  left:50%;
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:1rem;
  border-radius:10px;

  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

#videoHint.show{
  opacity:1;
}

/* Icône vidéo */
#videoHint::before{
  content:"▶";
  font-size:1.4em;
  color:#4da3ff;            /* bleu doux */
}

/* ===== IMMERSIVE / FULLSCREEN ===== */
body.immersive #overlay{
  background:rgba(0,0,0,.95);
}
body.immersive #viewer img,
body.immersive #viewer video{
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  object-fit: contain; /* ou cover si tu veux remplir en rognant */
}

/* En immersive : l'audio (header) à droite pour éviter le centre */
body.immersive .header-right{
  justify-content:flex-end;
}

/* flèches de couleur */
/* 🔧 CORRECTIF POSITION FLÈCHES */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transform-origin:center;
}

/* hover corrigé */
.arrow:hover{
  background:rgba(13,110,253,0.85);
  color:#fff;
  box-shadow:0 0 14px rgba(13,110,253,.85);
  transform:translateY(-50%) scale(1.05);
}

.arrow.left{ left:20px; right:auto; }
.arrow.right{ right:20px; left:auto; }

/*style de la légende (overlay discret)*/
/* ===== LÉGENDE IMAGE (OPTIONNELLE) ===== */
#legend{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;

  padding:6px 14px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:1rem;
  border-radius:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

/* visible */
#legend.show{
  opacity:1;
}

/* immersive : un peu plus bas */
body.immersive #legend{
  bottom:40px;
}

/* loader video */
/* ===== LOADER VIDÉO ===== */
#videoLoader{
  position:absolute;
  width:56px;
  height:56px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#4da3ff;     /* bleu doux */
  animation:spin 1s linear infinite;

  display:none;
  pointer-events:none;
}

/* version réduite si on veut */
/*
#videoLoader{
  width:40px;
  height:40px;
  border-width:3px;
}
  */



@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* Centrage dans le viewer */
#viewer #videoLoader{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
/* ===== HEADER RESPONSIVE ===== */

/* pour smartphone  3 lignes*/
@media (max-width: 640px){

  .header-bar{
    flex-wrap:wrap;               /* autorise retour ligne */
    justify-content:center;
    row-gap:6px;
  }

  .header-left,
  .header-center,
  .header-right{
    flex:0 0 100%;                /* chaque bloc sur sa ligne */
    justify-content:center;
  }

  .header-left{
    order:1;
  }

  .header-center{
    order:2;
    text-align:center;
  }

  .header-right{
    order:3;
    gap:8px;
  }

  .gallery-title{
    font-size:1.05rem;
    white-space:normal;           /* autorise retour ligne */
  }

  .audio-player{
    max-width:160px;
  }
}

/* pour smartphone  2 lignes si on veut*/
/*
@media (max-width: 640px){
  .header-left{
    flex:0 0 auto;
  }
  .header-right{
    flex:0 0 auto;
  }
  .header-center{
    flex:1 1 100%;
    order:3;
  }
}
*/