/* ═══════════════════════════════════════════════════════════════════════════
   Orbit Gallery Widget — CSS
   Direction artistique : sombre, électrique, luxueux
   Fonte d'affichage : Clash Display / Syne
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');

/* ── Variables globales ───────────────────────────────────────────────────── */
.ogw-scene {
  --ogw-bg1:      #0d0d1a;
  --ogw-bg2:      #1a0a2e;
  --ogw-bg3:      #0a1a2e;
  --ogw-glow:     #7c3aed;
  --ogw-neon:     #a78bfa;
  --ogw-glitch1:  #ff003c;
  --ogw-glitch2:  #00ffff;
  --ogw-ripple:   rgba(167,139,250,0.4);
  --ogw-noise:    40%;
  --ogw-card-border: rgba(255,255,255,0.12);
  font-family: 'Syne', sans-serif;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
.ogw-scene *, .ogw-scene *::before, .ogw-scene *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCÈNE
   ═══════════════════════════════════════════════════════════════════════════ */
.ogw-scene {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Fonds ────────────────────────────────────────────────────────────────── */
.ogw-bg-solid    { background: var(--ogw-bg1); }
.ogw-bg-gradient { background: linear-gradient(135deg, var(--ogw-bg1) 0%, var(--ogw-bg2) 100%); }

.ogw-bg-noise {
  background: var(--ogw-bg1);
}
.ogw-bg-noise::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: calc(var(--ogw-noise) / 100);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.ogw-bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, var(--ogw-bg2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, var(--ogw-bg3) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--ogw-bg1) 0%, var(--ogw-bg1) 100%);
}

/* ── Orbes d'ambiance ─────────────────────────────────────────────────────── */
.ogw-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: ogw-orb-float 8s ease-in-out infinite alternate;
}
.ogw-orb-1 {
  width: 500px; height: 500px;
  top: -150px; left: -100px;
  background: radial-gradient(circle, var(--ogw-glow) 0%, transparent 70%);
  opacity: 0.25;
  animation-duration: 9s;
}
.ogw-orb-2 {
  width: 400px; height: 400px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ogw-glow) 60%, #06b6d4) 0%, transparent 70%);
  opacity: 0.2;
  animation-duration: 12s; animation-delay: -3s;
}
.ogw-orb-3 {
  width: 300px; height: 300px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--ogw-glow) 40%, #ec4899) 0%, transparent 70%);
  opacity: 0.15;
  animation-duration: 7s; animation-delay: -5s;
}
@keyframes ogw-orb-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}
.ogw-orb-3 { animation: ogw-orb-float3 11s ease-in-out infinite alternate; }
@keyframes ogw-orb-float3 {
  from { transform: translate(-50%, -50%) scale(0.9); }
  to   { transform: translate(calc(-50% + 40px), calc(-50% - 30px)) scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER CARTES — Layout modes
   ═══════════════════════════════════════════════════════════════════════════ */
.ogw-cards-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ── MAGNETIC SCATTER — cartes positionnées en JS ─────────────────────────── */
.ogw-mode-magnetic-scatter .ogw-cards-wrap {
  position: absolute; inset: 0;
}
.ogw-mode-magnetic-scatter .ogw-card {
  position: absolute;
  /* Position initiale définie par JS */
}

/* ── BROKEN GRID ──────────────────────────────────────────────────────────── */
.ogw-mode-broken-grid .ogw-cards-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 80px);
  gap: 12px;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.ogw-mode-broken-grid .ogw-card:nth-child(1) { grid-column: 1/6;  grid-row: 1/4; }
.ogw-mode-broken-grid .ogw-card:nth-child(2) { grid-column: 6/10; grid-row: 1/3; }
.ogw-mode-broken-grid .ogw-card:nth-child(3) { grid-column: 10/13;grid-row: 1/5; }
.ogw-mode-broken-grid .ogw-card:nth-child(4) { grid-column: 1/4;  grid-row: 4/7; }
.ogw-mode-broken-grid .ogw-card:nth-child(5) { grid-column: 4/10; grid-row: 3/7; }
.ogw-mode-broken-grid .ogw-card:nth-child(6) { grid-column: 10/13;grid-row: 5/7; }
.ogw-mode-broken-grid .ogw-card { width: 100% !important; height: 100%; }

/* ── CINEMATIC STRIP ──────────────────────────────────────────────────────── */
.ogw-mode-cinematic-strip .ogw-cards-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 60px 40px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.ogw-mode-cinematic-strip .ogw-cards-wrap:active { cursor: grabbing; }
.ogw-mode-cinematic-strip .ogw-cards-wrap::-webkit-scrollbar { display: none; }
.ogw-mode-cinematic-strip .ogw-card {
  flex-shrink: 0;
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), margin 0.4s ease;
  margin: 0 8px;
}
.ogw-mode-cinematic-strip .ogw-card:hover {
  transform: scale(1.08) translateY(-12px);
  margin: 0 24px;
  z-index: 10;
}

/* ── ORBITAL RING — positionnement JS ────────────────────────────────────── */
.ogw-mode-orbital-ring .ogw-cards-wrap {
  position: absolute; inset: 0;
}
.ogw-mode-orbital-ring .ogw-card {
  position: absolute;
  transform-origin: center center;
}

/* ── EDITORIAL ────────────────────────────────────────────────────────────── */
.ogw-mode-editorial .ogw-cards-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 4px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.ogw-mode-editorial .ogw-card:nth-child(1) { grid-row: 1/3; }
.ogw-mode-editorial .ogw-card { width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE — Base
   ═══════════════════════════════════════════════════════════════════════════ */
.ogw-card {
  width: 260px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ogw-card-border);
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
  will-change: transform;
  cursor: pointer;
}

/* ── Image ────────────────────────────────────────────────────────────────── */
.ogw-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.ogw-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.ogw-card-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1e1e3f 0%, #3d1a5e 100%);
}

/* ── Overlays ─────────────────────────────────────────────────────────────── */
.ogw-card-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.ogw-ov-gradient-bottom {
  background: linear-gradient(to top, var(--ogw-ov-color, rgba(0,0,0,0.85)) 0%, transparent 55%);
}
.ogw-ov-gradient-full {
  background: linear-gradient(160deg, var(--ogw-ov-color2, rgba(124,58,237,0.3)) 0%, var(--ogw-ov-color, rgba(0,0,0,0.6)) 100%);
}
.ogw-ov-color {
  background: var(--ogw-ov-color, rgba(0,0,0,0.5));
}
.ogw-ov-duotone {
  background: linear-gradient(135deg, var(--ogw-ov-color2, rgba(124,58,237,0.6)) 0%, var(--ogw-ov-color, rgba(0,0,0,0.7)) 100%);
  mix-blend-mode: multiply;
}
.ogw-ov-none { display: none; }

.ogw-card-overlay.hover-only { opacity: 0; }
.ogw-card:hover .ogw-card-overlay.hover-only { opacity: 1; }

/* ── Body texte ───────────────────────────────────────────────────────────── */
.ogw-card-body {
  padding: 18px 20px 20px;
  position: relative;
  z-index: 5;
}

/* ── Meta ─────────────────────────────────────────────────────────────────── */
.ogw-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ogw-cat {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #a78bfa; border: 1px solid #a78bfa;
  padding: 2px 9px; border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}
.ogw-card:hover .ogw-cat { background: #a78bfa; color: #0d0d1a; }
.ogw-date { font-size: 0.7rem; color: rgba(255,255,255,0.4); }

/* ── Titre ────────────────────────────────────────────────────────────────── */
.ogw-title {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 8px;
}
.ogw-title a { color: inherit; text-decoration: none; }

/* ── Extrait ──────────────────────────────────────────────────────────────── */
.ogw-excerpt {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Lien ─────────────────────────────────────────────────────────────────── */
.ogw-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #a78bfa; text-decoration: none;
  transition: gap 0.25s, color 0.2s;
}
.ogw-link svg { width: 14px; height: 14px; transition: transform 0.25s; }
.ogw-link:hover { gap: 10px; color: #c4b5fd; }
.ogw-link:hover svg { transform: translateX(3px); }

/* ── Numéro ───────────────────────────────────────────────────────────────── */
.ogw-card-num {
  position: absolute; top: 12px; right: 14px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
  z-index: 10;
  transition: color 0.3s;
}
.ogw-card:hover .ogw-card-num { color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLES DE CARTES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Glass sombre ─────────────────────────────────────────────────────────── */
.ogw-card-glass-dark .ogw-card-body {
  background: rgba(10, 8, 22, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ogw-card-glass-dark:hover {
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.2), 0 30px 60px rgba(0,0,0,0.5);
}

/* ── Glass clair ──────────────────────────────────────────────────────────── */
.ogw-card-glass-light .ogw-card-body {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.ogw-card-glass-light { border-color: rgba(255,255,255,0.2); }
.ogw-card-glass-light:hover { border-color: rgba(255,255,255,0.5); }

/* ── Brutaliste ───────────────────────────────────────────────────────────── */
.ogw-card-brutalist {
  border: 3px solid #fff;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ogw-card-brutalist:hover {
  box-shadow: 10px 10px 0 var(--ogw-glow);
  transform: translate(-3px, -3px) !important;
}
.ogw-card-brutalist .ogw-card-body {
  background: #0d0d1a;
  border-top: 3px solid #fff;
}

/* ── Minimal ──────────────────────────────────────────────────────────────── */
.ogw-card-minimal { border: none; background: transparent; }
.ogw-card-minimal .ogw-card-body { background: transparent; padding: 12px 0; }
.ogw-card-minimal:hover { box-shadow: none; }
.ogw-card-minimal .ogw-card-media {
  border-radius: 12px;
  overflow: hidden;
}

/* ── Film ─────────────────────────────────────────────────────────────────── */
.ogw-card-film .ogw-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  background-size: 150px, 100%;
  mix-blend-mode: multiply;
  pointer-events: none; z-index: 3;
}
.ogw-card-film .ogw-card-body {
  background: linear-gradient(to bottom, rgba(20,14,8,0.9), rgba(10,8,5,0.95));
  border-top: 1px solid rgba(200,180,100,0.15);
}
.ogw-card-film { border-color: rgba(200,180,100,0.2); }
.ogw-card-film .ogw-title { color: #f5e6c8; }
.ogw-card-film .ogw-excerpt { color: rgba(245,230,200,0.6); }

/* ── Néon ─────────────────────────────────────────────────────────────────── */
.ogw-card-neon {
  border-color: var(--ogw-neon);
  box-shadow: 0 0 15px rgba(167,139,250,0.3), inset 0 0 15px rgba(167,139,250,0.05);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.ogw-card-neon:hover {
  box-shadow: 0 0 30px var(--ogw-neon), 0 0 60px rgba(167,139,250,0.4), inset 0 0 20px rgba(167,139,250,0.1);
  border-color: #c4b5fd;
}
.ogw-card-neon .ogw-card-body {
  background: rgba(5, 0, 20, 0.85);
  backdrop-filter: blur(16px);
}
.ogw-card-neon .ogw-title { text-shadow: 0 0 20px rgba(167,139,250,0.5); }
.ogw-card-neon .ogw-cat { color: var(--ogw-neon); border-color: var(--ogw-neon); }

/* ═══════════════════════════════════════════════════════════════════════════
   EFFETS HOVER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Glitch RGB ───────────────────────────────────────────────────────────── */
.ogw-glitch-r, .ogw-glitch-b {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}
.ogw-glitch-r { filter: url(#ogw-glitch-r); }
.ogw-glitch-b { filter: url(#ogw-glitch-b); }

.ogw-hover-glitch .ogw-card:hover .ogw-glitch-r {
  opacity: 0.7;
  animation: ogw-glitch-r 0.3s steps(2) infinite;
}
.ogw-hover-glitch .ogw-card:hover .ogw-glitch-b {
  opacity: 0.6;
  animation: ogw-glitch-b 0.3s steps(2) infinite 0.1s;
}

@keyframes ogw-glitch-r {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
  33%  { clip-path: inset(55% 0 10% 0); transform: translate(3px, -3px); }
  66%  { clip-path: inset(5% 0 80% 0);  transform: translate(-2px, 4px); }
  100% { clip-path: inset(40% 0 30% 0); transform: translate(4px, -1px); }
}
@keyframes ogw-glitch-b {
  0%   { clip-path: inset(70% 0 5% 0);  transform: translate(4px, 1px); }
  33%  { clip-path: inset(10% 0 50% 0); transform: translate(-3px, 3px); }
  66%  { clip-path: inset(45% 0 20% 0); transform: translate(2px, -4px); }
  100% { clip-path: inset(80% 0 5% 0);  transform: translate(-4px, 2px); }
}

/* ── Révélation progressive ───────────────────────────────────────────────── */
.ogw-hover-reveal .ogw-card .ogw-card-body {
  transform: translateY(calc(100% - 52px));
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.ogw-hover-reveal .ogw-card:hover .ogw-card-body {
  transform: translateY(0);
}
.ogw-hover-reveal .ogw-card .ogw-card-media { overflow: hidden; }

/* ── Shockwave ────────────────────────────────────────────────────────────── */
.ogw-shockwave {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 20;
}
.ogw-card:hover .ogw-shockwave::after {
  content: '';
  position: absolute;
  width: 300%; height: 300%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  animation: ogw-shockwave 0.7s ease-out forwards;
  border-radius: 50%;
}
@keyframes ogw-shockwave {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Ripple canvas ────────────────────────────────────────────────────────── */
.ogw-ripple-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CURSEUR CUSTOM
   ═══════════════════════════════════════════════════════════════════════════ */
.ogw-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform;
}

.ogw-cursor-dot {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ogw-cursor-circle {
  width: 36px; height: 36px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
}
.ogw-scene:has(.ogw-card:hover) .ogw-cursor-circle {
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.1);
  border-color: var(--ogw-glow);
  mix-blend-mode: normal;
}

.ogw-cursor-cross {
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}
.ogw-cursor-cross::before, .ogw-cursor-cross::after {
  content: '';
  position: absolute;
  background: #fff;
  top: 50%; left: 50%;
}
.ogw-cursor-cross::before { width: 24px; height: 2px; transform: translate(-50%, -50%); }
.ogw-cursor-cross::after  { width: 2px; height: 24px; transform: translate(-50%, -50%); }

.ogw-cursor-label {
  background: var(--ogw-glow);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 30px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 0;
  transition: opacity 0.3s;
}
.ogw-scene:has(.ogw-card:hover) .ogw-cursor-label { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS D'ENTRÉE (classes ajoutées par JS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* État initial — invisible */
.ogw-card.ogw-pre-anim {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
}

/* Après animation : retour normal (géré par GSAP) */
.ogw-card.ogw-animated {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ogw-mode-broken-grid .ogw-cards-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .ogw-mode-broken-grid .ogw-card { grid-column: auto !important; grid-row: auto !important; }
  .ogw-mode-editorial .ogw-cards-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .ogw-mode-editorial .ogw-card:nth-child(1) { grid-row: auto; }
}

@media (max-width: 600px) {
  .ogw-mode-broken-grid .ogw-cards-wrap,
  .ogw-mode-editorial .ogw-cards-wrap {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .ogw-mode-magnetic-scatter .ogw-cards-wrap,
  .ogw-mode-orbital-ring .ogw-cards-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    position: static;
  }
  .ogw-mode-magnetic-scatter .ogw-card,
  .ogw-mode-orbital-ring .ogw-card {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  .ogw-cursor { display: none; }
}