/* =========================================================================
   VooX — Galerie de l'accueil (maquette « bloc 2 »), entre le défilant des
   membres et le fil : carrousel en éventail, filtres par espace thématique.
   Polices, couleurs et rayons de la charte (voox.css).
   ========================================================================= */

.vg{padding:56px 0 30px;overflow:hidden;background:#fff}

.vg-eyebrow{margin:0;text-align:center;font:600 11.5px var(--voox-font-title);letter-spacing:.3em;text-transform:uppercase;color:var(--voox-brand-ink,#B8286E)}
.vg-titre{margin:10px 0 0;text-align:center;font-size:clamp(28px,3.6vw,40px);line-height:1.1;font-weight:600}
.vg-intro{max-width:36ch;margin:12px auto 0;text-align:center;font-size:15px;line-height:1.55;color:var(--voox-text)}

/* --- Filtres ------------------------------------------------------------ */
.vg-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1000px;margin:28px auto 0}
.vg-filtre{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border:1px solid rgba(11,15,20,.26);border-radius:999px;cursor:pointer;
  background:#fff;color:var(--voox-title);font:500 13.5px var(--voox-font-text);text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.vg-filtre:hover{border-color:var(--voox-title);transform:translateY(-1px)}
.vg-filtre.is-active{background:var(--voox-title);border-color:var(--voox-title);color:#fff}
.vg-plus{padding:0 22px;border-color:var(--voox-title);font-family:var(--voox-font-title);font-weight:600}
.vg-filtre:focus-visible,.vg-fleche:focus-visible,.vg-carte a:focus-visible{outline:3px solid rgba(0,209,255,.55);outline-offset:3px}

/* --- Scène en éventail -------------------------------------------------- */
/* Même largeur que le défilant des membres et le fil (gabarit .voox-container :
   1300 px, marges de 20 px) ; les cartes qui dépassent sont coupées au bord. */
.vg-scene{
  --vg-l:clamp(230px,24vw,330px);--vg-h:calc(var(--vg-l) * 1.24);
  position:relative;width:calc(100% - 40px);max-width:1260px;height:calc(var(--vg-h) + 150px);
  margin:-4px auto -34px;overflow:hidden;touch-action:pan-y;user-select:none;
}
.vg-piste{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.vg-carte{
  position:absolute;left:50%;top:50%;width:var(--vg-l);height:var(--vg-h);
  margin:calc(var(--vg-h) / -2) 0 0 calc(var(--vg-l) / -2);
  border-radius:22px;overflow:hidden;background:#E5E7EB;
  box-shadow:0 26px 50px -30px rgba(11,15,20,.5);
}
.vg-anime .vg-carte{transition:transform .65s cubic-bezier(.22,.7,.2,1),opacity .45s ease,box-shadow .45s ease}
.vg-carte.is-active{box-shadow:0 44px 80px -34px rgba(11,15,20,.6)}
.vg-carte.is-off{pointer-events:none}
.vg-carte a{display:block;width:100%;height:100%;color:#fff;text-decoration:none;-webkit-user-drag:none}
.vg-carte img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vg-carte:not(.is-active) a{cursor:pointer}
.vg-carte:not(.is-active) img{filter:saturate(.9)}
.vg-legende{
  position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  font:600 15px/1.25 var(--voox-font-title);text-shadow:0 2px 4px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;
}
.vg-carte.is-active .vg-legende{opacity:1;transform:none}

/* --- Flèches ------------------------------------------------------------ */
.vg-nav{display:flex;justify-content:center;gap:12px}
.vg-fleche{
  display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(11,15,20,.32);border-radius:50%;cursor:pointer;
  background:#fff;color:var(--voox-title);transition:background .2s,color .2s,transform .2s;
}
.vg-fleche:hover{background:var(--voox-title);color:#fff;transform:scale(1.05)}

/* --- Sans JavaScript : une simple rangée défilante ---------------------- */
.vg:not(.is-ready) .vg-scene{height:auto;overflow-x:auto;scrollbar-width:none}
.vg:not(.is-ready) .vg-piste{position:static;display:flex;gap:16px;width:max-content;padding:10px 20px}
.vg:not(.is-ready) .vg-carte{position:relative;left:auto;top:auto;margin:0}
.vg:not(.is-ready) .vg-legende{opacity:1;transform:none}
.vg:not(.is-ready) .vg-nav{display:none}

@media (max-width:700px){
  .vg{padding-top:40px}
  .vg-filtres{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:22px -20px 0;padding:2px 20px 6px;scrollbar-width:none}
  .vg-filtres::-webkit-scrollbar{display:none}
  .vg-scene{--vg-l:62vw;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .vg-anime .vg-carte,.vg-legende,.vg-filtre,.vg-fleche{transition:none}
}