/* ======================================================
   EVENTS – VISION CLEAN + APPLE COVERFLOW (ONE FILE)
   - Base grid theme (clean, centered, category glow)
   - Optional 3D coverflow on desktop only
   - No vertical cut / no giant black paddings
====================================================== */

/* =========================
   VARIABLES
========================= */
:root{
  --ev-radius: 22px;
  --ev-shadow: 0 25px 60px rgba(0,0,0,.45);
  --ev-text: #f1f5f9;
  --ev-muted: #cbd5e1;

  /* Coverflow tuning (desktop) */
  --cf-perspective: 1600px;
  --cf-card-max: 420px;     /* max width card */
  --cf-card-vw: 75vw;       /* card width relative to screen */
  --cf-side-x: 260px;       /* side translate X */
  --cf-side-z: 60px;        /* side translate Z */
  --cf-active-z: 220px;     /* active translate Z */
  --cf-side-rot: 45deg;     /* side rotateY */
  --cf-side-scale: .85;     /* side scale */
}

/* =========================
   RESET / TOP GAP FIX
========================= */
html, body{
  margin:0 !important;
  padding:0 !important;
}

/* =========================
   WIDGET WRAP
========================= */
.events-widget{
  position:relative;
  margin:0 !important;
  padding:0 0 30px !important;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:visible; /* important for glow */
}

/* Particles canvas safety (optional) */
#particles{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* =========================
   DEFAULT GRID (fallback)
========================= */
.events-grid{
  position:relative;
  z-index:2;
  display:grid;
  gap:28px;
  margin:0 !important;
}

@media(min-width:1024px){
  .events-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:640px) and (max-width:1023px){
  .events-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:639px){
  .events-grid{ grid-template-columns:1fr; }
}

/* ======================================================
   CARD BASE (BEAUTIFUL LIKE BEFORE)
====================================================== */
.event-card{
  position:relative;
  border-radius:var(--ev-radius);
  overflow:hidden;

  background:rgba(15,23,42,.75);
  backdrop-filter:blur(28px);

  border:1px solid rgba(255,255,255,.06);

  /* category outline (stable and discreet) */
  outline:1px solid color-mix(in srgb, var(--cat-color) 40%, transparent);
  outline-offset:-1px;

  box-shadow:0 20px 60px rgba(0,0,0,.45);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    outline-color .35s ease,
    filter .35s ease,
    opacity .35s ease;
}

.event-card:hover{
  outline:1px solid var(--cat-color);
  box-shadow:
    0 0 35px color-mix(in srgb, var(--cat-color) 70%, transparent),
    0 35px 80px rgba(0,0,0,.6);
}

/* ======================================================
   IMAGE
====================================================== */
.event-cover{
  position:relative;
  overflow:hidden;
}

.event-cover img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .7s ease;
}

.event-card:hover .event-cover img{
  transform:scale(1.05);
}

/* ======================================================
   BADGES (ON IMAGE)
====================================================== */
.event-cover .event-badge{
  position:absolute;
  top:14px;
  padding:6px 14px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.15);
  z-index:5;
  white-space:nowrap;
}

.event-badge.live{
  right:14px;
  background:rgba(239,68,68,.25);
  color:#ff4d4d;
  box-shadow:0 0 20px rgba(239,68,68,.6);
  animation:pulseLive 1.6s infinite;
}

.event-badge.premium{
  left:14px;
  background:rgba(255,215,0,.18);
  color:#ffd700;
  box-shadow:0 0 20px rgba(255,215,0,.5);
}

.event-badge.full{
  right:14px;
  background:rgba(148,163,184,.25);
  color:#fff;
}

.event-badge.finished{
  right:14px;
  background:rgba(71,85,105,.35);
  color:#e2e8f0;
}

@keyframes pulseLive{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 16px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

/* ======================================================
   BODY CONTENT (CENTERED)
====================================================== */
.event-body{
  padding:1.3rem 1.2rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.65rem;
  color:var(--ev-text);
}

.event-category{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  background:var(--cat-color);
  color:#fff;
  box-shadow:0 0 15px color-mix(in srgb, var(--cat-color) 60%, transparent);
  white-space:nowrap;
}

.event-title{
  font-size:1.3rem;
  font-weight:800;
  line-height:1.3;
  margin:0;
}

.event-excerpt{
  font-size:.95rem;
  color:var(--ev-muted);
  max-width:90%;
}

.event-date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}

/* Location: FIX icon size + color */
.event-location{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  opacity:.9;
  color:#fff;
}

.event-location svg{
  width:16px !important;
  height:16px !important;
  fill:var(--cat-color) !important;
  flex-shrink:0;
}

/* Places */
.event-places{
  font-size:.85rem;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--cat-color);
  color:var(--cat-color);
}

.event-places.full{
  background:rgba(239,68,68,.2);
  border-color:#ef4444;
  color:#fff;
}

/* Button */
.event-actions{ margin-top:1rem; }

.event-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  color:#fff;

  background:linear-gradient(
    135deg,
    color-mix(in srgb, var(--cat-color) 75%, black 10%),
    var(--cat-color)
  );

  box-shadow:
    0 15px 35px rgba(0,0,0,.4),
    0 0 20px color-mix(in srgb, var(--cat-color) 55%, transparent);

  transition:all .3s ease;
}

.event-actions .btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 25px 60px rgba(0,0,0,.5),
    0 0 30px color-mix(in srgb, var(--cat-color) 70%, transparent);
}

/* Premium title gradient */
.event-card.premium{
  border:1px solid rgba(255,215,0,.35);
  box-shadow:0 0 35px rgba(255,215,0,.25), var(--ev-shadow);
}
.event-card.premium .event-title{
  background:linear-gradient(90deg,#fff,#ffd700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ======================================================
   MOBILE OPTIMISATION
====================================================== */
@media(max-width:768px){
  .events-widget{ padding:0 0 22px !important; }
  .event-cover img{ height:180px; }
  .event-title{ font-size:1.1rem; }
  .event-excerpt{ font-size:.9rem; }
  .event-body{ padding:1rem; }
}

/* ======================================================
   APPLE COVERFLOW 3D (DESKTOP ONLY)
   Active by: .events-grid.vision-coverflow
   - NO huge black paddings
   - NO vertical cut
   - Active card full visible (scaled via vw/max)
====================================================== */
/* =========================================
   TRUE CENTERED APPLE COVERFLOW
========================================= */

/* =========================================
   APPLE COVERFLOW – PERFECT SIZE FIX
   (no double scaling)
========================================= */

.events-grid.vision-coverflow{
  position:relative;
  display:block;
  perspective:2000px;
  padding:50px 0;
  padding-top:120px;
  padding-bottom:120px;
  overflow:visible;
  padding-top:120px;
  padding-bottom:120px;
}

/* ===============================
   CARTE BASE (FULL SIZE)
=============================== */
.events-grid.vision-coverflow .event-card{
  position:absolute;
  top:40;
  left:50%;

  width:min(75vw, 420px); /* taille réelle */
  max-width:420px;

  transform-style:preserve-3d;
  transform:translateX(-50%);

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    opacity .4s ease,
    filter .4s ease;

  will-change:transform;
}

/* ===============================
   ACTIVE (CENTRALE)
=============================== */
.events-grid.vision-coverflow .event-card.is-active{
  transform:
    translateX(-50%)
    translateZ(260px)
    rotateY(0deg);

  opacity:1;
  filter:brightness(1);
  z-index:50;
}



/* =========================================
   COVERFLOW PROGRESSIF (toutes les cartes)
========================================= */

.events-grid.vision-coverflow .event-card{
  position:absolute;
  top:120px;
  left:50%;

  width:min(75vw,420px);
  max-width:420px;

  transform-style:preserve-3d;

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    opacity .4s ease,
    filter .4s ease;

  will-change:transform;
}



/* Carte centrale */
.events-grid.vision-coverflow .event-card.is-active{
  transform:
    translateX(-50%)
    translateZ(260px)
    rotateY(0deg);

  opacity:1;
  filter:brightness(1);
  z-index:50;
}

/* cartes gauche/droite progressives */

.events-grid.vision-coverflow .event-card[data-pos="-1"]{
  transform:
    translateX(calc(-50% - 260px))
    translateZ(120px)
    rotateY(45deg)
    scale(.9);
}

.events-grid.vision-coverflow .event-card[data-pos="-2"]{
  transform:
    translateX(calc(-50% - 480px))
    translateZ(40px)
    rotateY(55deg)
    scale(.85);
}

.events-grid.vision-coverflow .event-card[data-pos="-3"]{
  transform:
    translateX(calc(-50% - 680px))
    translateZ(-40px)
    rotateY(65deg)
    scale(.8);
}

/* côté droit */

.events-grid.vision-coverflow .event-card[data-pos="1"]{
  transform:
    translateX(calc(-50% + 260px))
    translateZ(120px)
    rotateY(-45deg)
    scale(.9);
}

.events-grid.vision-coverflow .event-card[data-pos="2"]{
  transform:
    translateX(calc(-50% + 480px))
    translateZ(40px)
    rotateY(-55deg)
    scale(.85);
}

.events-grid.vision-coverflow .event-card[data-pos="3"]{
  transform:
    translateX(calc(-50% + 680px))
    translateZ(-40px)
    rotateY(-65deg)
    scale(.8);
}





/* ===============================
   HALO
=============================== */
.events-grid.vision-coverflow .event-card.is-active::after{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius:50px;
  background:radial-gradient(circle,
      color-mix(in srgb,var(--cat-color) 60%,transparent),
      transparent 60%);
  filter:blur(50px);
  opacity:.85;
  z-index:-1;
}

/* ===============================
   REFLECTION (SUBTLE)
=============================== */
.events-grid.vision-coverflow .event-card::before{
  content:"";
  position:absolute;
  bottom:-40px;
  left:0;
  right:0;
  height:120px;
  background:linear-gradient(to bottom, rgba(255,255,255,.15), transparent);
  transform:scaleY(-1);
  opacity:.25;
  pointer-events:none;
}

/* =========================================
   MOBILE / TABLETTE = RESET COMPLET
========================================= */

@media (max-width:1024px){

  .events-grid.vision-coverflow{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
    perspective:none !important;
    padding:0 16px !important; /* petit padding propre */
  }

  .events-grid.vision-coverflow .event-card{
    position:relative !important;

    left:auto !important;        /* 🔥 IMPORTANT */
    top:auto !important;

    width:100% !important;
    max-width:100% !important;

    transform:none !important;   /* 🔥 IMPORTANT */
    opacity:1 !important;
    filter:none !important;

    margin:0 !important;
  }

  .events-grid.vision-coverflow::before,
  .events-grid.vision-coverflow::after{
    display:none !important;
  }

}