/* Galeries vidéos — même identité visuelle que les galeries photos (site
   existant), adaptée pour l'affichage de vidéos plutôt que de photos. */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #2a2320;
}

.page {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Bandeau du haut, repris à l'identique du site actuel */
.site-header {
    text-align: center;
}
.site-header img {
    display: block;
    margin: 0 auto;
}
.site-nav {
    text-align: center;
    padding: 6px 0 10px;
}

/* Pages view.php / video.php : menu du haut et pied de page toujours
   visibles, la grille / le lecteur occupant l'espace restant en défilement
   propre. */
.gallery-viewer {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.gallery-viewer .site-header,
.gallery-viewer .site-footer {
    flex: 0 0 auto;
}
.gallery-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* Zone de contenu principal */
.content {
    position: relative;
    min-height: 420px;
    padding: 30px 30px 20px;
}

.content h1 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    color: #2a2320;
    margin: 0 0 30px;
}

/* Un bloc par activité (Aikido / Qi-Gong / Shiatsu), en "escalier", comme
   sur les pages "images" du site. */
.activity-block {
    position: relative;
    z-index: 1;
    margin-bottom: 34px;
    margin-left: 0;
}
.activity-block.level-1 { margin-left: 130px; }
.activity-block.level-2 { margin-left: 240px; }

.activity-title {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* Grille des vignettes de saisons, à l'intérieur d'un bloc d'activité */
.season-grid-wrap {
    position: relative;
}
.season-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
}
/* Image d'arrière-plan placée à gauche de la grille (ex. Qi-gong) : collée
   contre le bord gauche de la grille de vignettes, alignée sur le haut de
   la première vignette (« 2005 »), plutôt que sous le bloc entier. */
.season-grid-wrap .watermark {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: 10px;
}

.season-tile,
.archives-tile {
    display: block;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.season-tile:hover,
.archives-tile:hover {
    transform: translateY(-3px);
}
.season-tile img {
    display: block;
    width: 116px;
    height: 64px;
}

/* Ligne épinglée (2e ligne) d'une activité, ex. « Ceinture noire » / « Kata
   31 » pour l'aïkido : toujours 5 emplacements fixes, non soumise à
   l'archivage. Mêmes dimensions de vignette que .season-tile, mais en
   object-fit:cover pour tolérer des vignettes qui ne font pas exactement
   116×64 (ex. le visuel "ceinture"). */
.pinned-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin-top: 10px;
}
.pinned-tile img {
    display: block;
    width: 116px;
    height: 64px;
    object-fit: contain;
}
/* Vignette "ceinture noire" : conserve sa taille d'origine (116 × 80 px,
   plus haute que les autres vignettes "dates") plutôt que d'être réduite
   pour tenir dans la case standard. */
.pinned-tile img[src*="dates-ceinturen.jpg"] {
    width: 116px;
    height: 80px;
}
.pinned-slot-empty {
    display: block;
    width: 116px;
    height: 64px;
    flex: 0 0 auto;
}

.clearfix {
    clear: both;
}

.corner-col {
    float: left;
    margin: 0 20px 20px 0;
}
.archives-tile {
    display: block;
    margin-top: 0;
}
.watermark {
    display: block;
    width: 117px;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.watermark-floating {
    display: block;
    width: 200px;
    height: auto;
    margin: 40px 0 0;
    pointer-events: none;
    user-select: none;
}

/* Pied de page, repris à l'identique du site actuel */
.site-footer {
    text-align: center;
    padding: 10px 0 20px;
}
.site-footer img {
    display: block;
    margin: 0 auto;
}

/* Encadré provisoire affiché à la place d'une vignette qui n'a pas encore
   été déposée (nouvelle saison créée depuis l'admin, en attendant l'envoi
   de l'image "dates" définitive). */
.tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.2;
    color: #8a7d6f;
    background: repeating-linear-gradient(45deg, #f3ede4, #f3ede4 8px, #ece4d5 8px, #ece4d5 16px);
    border: 1px dashed #cbbfa8;
    border-radius: 4px;
    padding: 4px;
}
.season-grid .tile-placeholder { width: 116px; height: 64px; }

/* Page view.php / video.php : zone défilante contenant la grille de vidéos
   ou le lecteur, dans l'espace laissé libre par le menu du haut / bas. */
.local-gallery-wrap {
    overflow-y: auto;
    padding: 24px 30px 40px;
}

/* Pages stub (saison / archives) */
.stub-box {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}
.stub-box h1 {
    margin-bottom: 10px;
}
.stub-box p {
    color: #6b5f55;
}
.stub-box a.back {
    display: inline-block;
    margin-top: 24px;
    color: #25438f;
    text-decoration: none;
    font-size: 0.95rem;
}
.stub-box a.back:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Grille des vidéos (view.php) et lecteur (video.php).
   Palette reprise du même gris clair que les galeries photos, pour une
   identité cohérente entre les deux sections du site.
   ========================================================================== */

:root{
  --vg-mount:#E6E6E6;
  --vg-mount-hover:#BFBFBF;
  --vg-stage-bg:#E6E6E6;
  --vg-text:#333333;
}

.lr-gallery,
.video-gallery{
  max-width:900px;
  margin:0 auto;
  text-align:left;
  font-family:helvetica, arial, tahoma, verdana, sans-serif;
  color:var(--vg-text);
  background:#fff;
}

.video-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.video-tile{
  display:block;
  text-decoration:none;
}
.video-tile-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:150px;
  background:var(--vg-mount);
  overflow:hidden;
  border-radius:4px;
}
.video-tile:hover .video-tile-frame{
  background:var(--vg-mount-hover);
}
.video-tile-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-tile-placeholder{
  font-size:0.72rem;
  color:#8a8a8a;
  text-align:center;
  padding:6px;
}
.video-play-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.12);
  transition:background 0.15s ease;
}
.video-tile:hover .video-play-badge{
  background:rgba(0,0,0,0.22);
}

/* Pagination (identique à la grille photos) */
.lr-pagination{
  margin-top:16px;
  text-align:center;
}
.lr-pagination ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:4px;
  flex-wrap:wrap;
}
.lr-pagination li{
  padding:5px 10px;
  font-size:0.85rem;
}
.lr-pagination a{
  color:var(--vg-text);
  text-decoration:underline;
}
.lr-pagination .lr-current{
  border:1px solid #999;
  border-radius:3px;
  font-weight:bold;
}
.lr-pagination .lr-prev,
.lr-pagination .lr-next{
  font-weight:bold;
}

/* Page "lecteur" (video.php) : Précédent / Index / Suivant, vidéo sur fond
   gris clair, lien de téléchargement — même principe que la vue grand
   format des galeries photos. */
.lr-detail-title{
  text-align:center;
  font-size:0.95rem;
  font-weight:600;
  margin:0 0 10px;
  color:var(--vg-text);
}
.lr-detail-nav{
  text-align:center;
  margin-bottom:16px;
}
.lr-detail-nav ul{
  list-style:none;
  display:inline-flex;
  gap:16px;
  margin:0;
  padding:0;
}
.lr-detail-nav a{
  color:var(--vg-text);
  text-decoration:underline;
  font-size:0.85rem;
  font-weight:600;
}
.lr-detail-nav .lr-disabled{
  color:#bbb;
  font-size:0.85rem;
  font-weight:600;
}

.lr-stage{
  background:var(--vg-stage-bg);
  padding:30px 20px;
  text-align:center;
}
.video-player-frame{
  display:inline-block;
  max-width:100%;
}
.video-player-frame video{
  display:block;
  max-width:100%;
  max-height:70vh;
  background:#000;
}

.lr-download{
  text-align:center;
  margin-top:14px;
}
.lr-download a{
  color:var(--vg-text);
  font-size:0.85rem;
  text-decoration:underline;
}