/* ============================================================
   AU BAVAROIS — page Allgäuer Brennerei
   Section vidéos : façade de lecture différée (RGPD).
   La vignette est une image LOCALE ; l'iframe youtube-nocookie
   n'est créé qu'au clic (voir le script dans allgauer.php).
   ============================================================ */

.videos-section { max-width: 900px; margin: 0 auto; }
.videos-consent { font-size: 13px; color: var(--text-muted); max-width: 640px; margin: 12px auto 0; }

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
    text-align: left;
}

.video-card {
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Façade 16:9 : aspect-ratio fixe le bloc avant même le décodage de l'image
   (anti-CLS), object-fit:cover absorbe les miniatures 4:3 letterboxées. */
.video-facade { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Bouton de lecture : recouvre la façade, focusable clavier, libellé texte. */
.video-play {
    position: absolute; inset: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 0; cursor: pointer; font: inherit; color: #fff;
    transition: background var(--transition);
}
.video-play:hover, .video-play:focus-visible { background: rgba(0, 0, 0, 0.55); }
.video-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.video-play-ico {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--gold); color: #110e0a;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; padding-left: 4px;
}
.video-play-txt {
    font-size: 13px; font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 12px; border-radius: 999px;
}

/* Repli sans JavaScript : lien vers la vidéo sur YouTube (pas de bouton mort). */
.video-nojs {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: block; text-align: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.7); color: var(--gold-light);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.video-nojs:hover, .video-nojs:focus-visible { background: rgba(0, 0, 0, 0.85); }

.video-meta { padding: 12px 14px 14px; }
.video-title { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.video-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.video-date { margin: 6px 0 0; font-size: 12px; color: var(--text-dark); }