/* ============================================================ */
/* ===== PAGE GALERIE VIDÉOS — thème vert (#7ec97e), grille de cartes vidéo + lightbox ===== */
/* Lié APRÈS styles.css. N'altère jamais styles.css. */

/* Le thème vert porte --fg:#0c2510 (vert très sombre) : le logo header en currentColor
   reste parfaitement lisible sur #7ec97e, aucun ajustement nécessaire. */

/* ===== HERO ===== */
.v-hero{position:relative;padding:clamp(40px,7vh,84px) 0 clamp(30px,5vh,56px);overflow:hidden}
.v-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,5vw,78px);align-items:center}
.v-hero h1{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(40px,5.4vw,86px);line-height:1.0;letter-spacing:-.005em;margin:0 0 24px;max-width:15ch}
.v-hero h1 .h1-main{display:block}
.v-hero h1 .h1-sub{display:block;font-family:'Parkinsans',sans-serif;font-weight:700;font-size:.3em;line-height:1.22;letter-spacing:.004em;opacity:.82;margin-top:.4em}
.v-hero .v-lead{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:56ch;margin:0 0 16px}
.v-hero .v-lead.is-small{font-size:clamp(15px,1.05vw,17px);opacity:.92}
.v-hero-ctas{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px;align-items:center}
.v-hero-ctas .btn-line{margin-top:0}

/* Visuel du hero : grand player cliquable, image + badge play central */
.v-hero-media{position:relative}
.v-hero-play{
  position:relative;display:block;width:100%;
  border:0;padding:0;margin:0;cursor:pointer;
  border-radius:24px;overflow:hidden;
  aspect-ratio:4/3;background:color-mix(in srgb,var(--fg) 8%,transparent);
  box-shadow:0 40px 90px -50px rgba(8,30,12,.6);
}
.v-hero-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.2,.6,.2,1)}
.v-hero-play:hover img,.v-hero-play:focus-visible img{transform:scale(1.05)}
.v-hero-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,12,.06) 40%,rgba(8,30,12,.42));pointer-events:none}
.v-play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(70px,9vw,92px);height:clamp(70px,9vw,92px);border-radius:999px;
  display:grid;place-items:center;z-index:2;
  background:rgba(255,255,255,.94);color:var(--accent);
  box-shadow:0 18px 44px -16px rgba(8,30,12,.6);
  transition:transform .35s cubic-bezier(.2,.6,.2,1),background .3s ease;
}
.v-hero-play:hover .v-play-badge,.v-hero-play:focus-visible .v-play-badge{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.v-play-badge svg{width:42%;height:42%;fill:currentColor;margin-left:8%}
@media(max-width:880px){
  .v-hero-grid{grid-template-columns:1fr;gap:34px}
  .v-hero-media{max-width:560px}
}

/* ===== GRILLE DE VIDÉOS ===== */
.s-vgallery{padding-top:clamp(40px,6vh,80px)}
.s-vgallery .m-head{margin-bottom:clamp(34px,4.5vh,52px)}
.v-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,24px);
}
.v-card{
  position:relative;display:block;text-align:left;
  border:0;padding:0;margin:0;cursor:pointer;
  border-radius:20px;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 8%,transparent);
  box-shadow:0 24px 60px -46px rgba(8,30,12,.65);
  transition:transform .4s cubic-bezier(.2,.6,.2,1),box-shadow .4s ease;
}
.v-card:hover,.v-card:focus-visible{transform:translateY(-4px);box-shadow:0 34px 70px -44px rgba(8,30,12,.7)}
.v-card.is-feature{grid-column:span 2}
.v-thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden}
.v-card.is-feature .v-thumb{aspect-ratio:16/9}
.v-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.v-card:hover .v-thumb img,.v-card:focus-visible .v-thumb img{transform:scale(1.06)}
/* Voile dégradé bas pour le contraste du bouton de lecture */
.v-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,12,0) 38%,rgba(8,30,12,.55));pointer-events:none}
/* Bouton play en overlay */
.v-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:62px;height:62px;border-radius:999px;z-index:2;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--accent);
  box-shadow:0 14px 34px -14px rgba(8,30,12,.6);
  opacity:.9;transition:transform .35s cubic-bezier(.2,.6,.2,1),opacity .3s ease,background .3s ease;
}
.v-card:hover .v-play,.v-card:focus-visible .v-play{transform:translate(-50%,-50%) scale(1.06);opacity:1;background:#fff}
.v-play svg{width:40%;height:40%;fill:currentColor;margin-left:8%}

@media(max-width:880px){
  .v-grid{grid-template-columns:repeat(2,1fr)}
  .v-card.is-feature{grid-column:span 2}
}
@media(max-width:560px){
  .v-grid{grid-template-columns:1fr}
  .v-card.is-feature{grid-column:span 1}
  .v-card .v-thumb,.v-card.is-feature .v-thumb{aspect-ratio:16/10}
}

/* ===== SECTION FINALE — boutons de découverte ===== */
.v-final-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:26px;align-items:center}
.v-final-links .btn-line{margin-top:0}

/* ===== LIGHTBOX VIDÉO ===== */
.vlb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(6,22,10,.93);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.vlb.is-open{opacity:1;visibility:visible}
.vlb-stage{position:relative;max-width:1180px;width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.vlb-figure{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.vlb-video{
  width:100%;max-height:78vh;
  border-radius:14px;background:#000;display:block;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.7);
}
/* Embed externe (YouTube / Vimeo) : cadre 16:9 contenu dans la hauteur dispo */
.vlb-embed{
  width:100%;max-width:calc(78vh * 16 / 9);
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.7);
}
.vlb-embed iframe{width:100%;height:100%;border:0;display:block}
/* [hidden] doit l'emporter sur les display author de .vlb-video / .vlb-placeholder
   (sinon le <video> vide reste affiché par-dessus l'iframe de l'embed) */
.vlb-video[hidden],
.vlb-embed[hidden],
.vlb-placeholder[hidden]{display:none}
.vlb-placeholder{
  width:100%;aspect-ratio:16/9;max-height:70vh;
  border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,#0c2510 80%,#7ec97e);
  border:1px solid rgba(255,255,255,.12);
}
.vlb-placeholder p{margin:0;color:#f3eede;font-family:'Parkinsans',sans-serif;font-weight:300;font-size:15px;letter-spacing:.01em;text-align:center;max-width:34ch}
.vlb-ph-ico{width:64px;height:64px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.vlb-ph-ico svg{width:30%;height:30%;fill:currentColor;margin-left:8%}
.vlb-caption{
  color:#f3eede;font-family:'Parkinsans',sans-serif;font-weight:400;
  font-size:14px;letter-spacing:.02em;text-align:center;opacity:.92;min-height:1.2em;
}
.vlb-close{
  position:absolute;top:clamp(-6px,1vh,6px);right:0;z-index:3;
  width:54px;height:54px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  transition:background .25s ease,transform .25s ease;
}
.vlb-close:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.vlb-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.vlb-close{width:46px;height:46px;top:-6px}}

@media(prefers-reduced-motion: reduce){
  .v-card,.v-card .v-thumb img,.v-hero-play img,.v-play,.v-play-badge{transition:none}
}