/* ===========================================================
   GUI-FUN-V2 — overrides par-dessus styles.css (style index.html)
   Ne garde que les éléments propres à cette version :
   hero violet arrondi · nav transparente · stickers · cartes astrales
   =========================================================== */

:root {
  /* tokens utilisés par les cartes astrales (absents de styles.css) */
  --bd: 3px solid #0c0716;
  --hard-lg: 8px 8px 0 rgba(0,0,0,.5);
  --r-lg: 28px;
}

/* =========================================================
   NAV — transparente (fond violet translucide au scroll)
   ========================================================= */
.nav { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .25s ease, backdrop-filter .25s ease; }
.nav.is-scrolled { background: rgba(69,0,95,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__links a { color: #fff; }
.nav__socials a { background: rgba(255,255,255,.12); color: #fff; }
.nav__socials a:hover { background: var(--cyan); color: var(--ink); }

/* =========================================================
   HERO — bandeau violet #45005f à bas arrondi
   ========================================================= */
.hero { position: relative; z-index: 1; min-height: 100svh; margin-top: calc(-1 * var(--nav-h)); display: grid; align-items: center; padding-block: calc(var(--nav-h) + clamp(30px, 7vw, 70px)) clamp(40px, 9vw, 90px); overflow: hidden; background: linear-gradient(283deg, var(--pink), #ff6ec2 55%, var(--cyan)); color: #fff; border-bottom: 0; border-bottom-left-radius: clamp(34px, 5vw, 64px); border-bottom-right-radius: clamp(34px, 5vw, 64px); }
.hero .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero__logo { display: block; width: clamp(280px, 50vw, 560px); height: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,.28)); }
.hero__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__bg::before, .hero__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hero__bg::before { width: 60vw; height: 60vw; left: -18vw; top: -12vw; background: radial-gradient(circle, var(--pink), transparent 65%); }
.hero__bg::after  { width: 55vw; height: 55vw; right: -16vw; bottom: -18vw; background: radial-gradient(circle, var(--cyan), transparent 64%); }
.hero__glow-y { position: absolute; display: block; width: 40vw; height: 40vw; right: 10vw; top: 8vw; background: radial-gradient(circle, var(--yellow), transparent 62%); filter: blur(80px); opacity: .28; z-index: 0; }
.hero__inner { position: relative; z-index: 2; display: grid; gap: clamp(26px, 4vw, 40px); }
.hero h1 { font-family: var(--font-display); font-size: clamp(3.2rem, 15vw, 9.5rem); line-height: .9; letter-spacing: -.03em; font-weight: 800; text-transform: uppercase; color: #fff; }
.hero h1 .a { color: var(--pink); }
.hero h1 .b { color: var(--yellow); }
.hero h1 .c { color: var(--cyan); }
.hero__baseline { font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 500; max-width: 38ch; color: #fff; }
.hero__baseline b { font-family: var(--font-display); font-weight: 700; color: var(--yellow); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 22px; }
.hero__socials a { background: rgba(255,255,255,.08); }
.hero__socials a:hover { background: var(--pink); transform: translateY(-2px); }
.hero__loc { color: #fff; }
@media (min-width: 860px) {
  .hero__inner { max-width: 920px; }
  .hero h1 { max-width: 14ch; }
}

/* =========================================================
   ÉMOJIS FLOTTANTS (stickers ancrés par section)
   ========================================================= */
.floaties { display: none; }
.floatie { position: absolute; z-index: 3; pointer-events: none; will-change: transform; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.3)); animation: floaty var(--d, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes floaty {
  0%   { transform: translateY(0) rotate(-10deg); }
  50%  { transform: translateY(-26px) rotate(12deg); }
  100% { transform: translateY(0) rotate(-10deg); }
}
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-12px) rotate(1.5deg); }
}

/* =========================================================
   CARTES ASTRALES (fondatrices)
   ========================================================= */
.astro-hint { text-align: left; font-weight: 700; font-size: .9rem; color: var(--muted); margin: 18px 0 0; }
.astro-layout { display: grid; gap: clamp(26px, 5vw, 54px); align-items: center; }
.astro-intro .section-head { margin-bottom: 6px; }
@media (min-width: 920px) { .astro-layout { grid-template-columns: 1fr 1.15fr; } }
.astro { display: flex; justify-content: center; align-items: center; gap: clamp(6px, 1.5vw, 22px); perspective: 1600px; padding: 8px 0 4px; }
.astro-card { position: relative; width: clamp(170px, 30vw, 300px); aspect-ratio: 3 / 4.9; flex: none; cursor: pointer; outline: none; transform: scale(.84) translateY(16px); z-index: 1; filter: brightness(.9) saturate(.92); transition: transform .55s cubic-bezier(.34,1.45,.5,1), filter .45s ease; }
.astro[data-active="left"]  .astro-card[data-side="left"]  { transform: scale(1) translate(7%, -8px);  z-index: 3; filter: none; }
.astro[data-active="right"] .astro-card[data-side="right"] { transform: scale(1) translate(-7%, -8px); z-index: 3; filter: none; }
.astro-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; border-radius: var(--r-lg); }

.astro-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.55,0,.25,1.15); }
.astro[data-active="left"]  .astro-card[data-side="left"]  .astro-card__inner,
.astro[data-active="right"] .astro-card[data-side="right"] .astro-card__inner { transform: rotateY(0deg); }
.astro[data-active="left"]  .astro-card[data-side="right"] .astro-card__inner,
.astro[data-active="right"] .astro-card[data-side="left"]  .astro-card__inner { transform: rotateY(180deg); }

.astro-card__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--hard-lg); overflow: hidden; display: flex; flex-direction: column; align-items: center; }

/* RECTO — thème astral */
.astro-card__front { background: radial-gradient(125% 85% at 50% -12%, #4a2a72 0%, #2a173f 56%, #1a0e2b 100%); color: #fff; padding: 16px 15px 15px; text-align: center; gap: 5px; }
.astro-stars { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 16%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 84% 12%, #ffe9a8, transparent),
    radial-gradient(1.2px 1.2px at 26% 60%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 72% 46%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 48% 84%, #ffe9a8, transparent),
    radial-gradient(1.2px 1.2px at 90% 76%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 36% 32%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 60% 70%, #fff, transparent); }
.astro-sign { position: relative; font-size: clamp(2.3rem, 7vw, 3rem); line-height: 1; color: var(--yellow); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.astro-signname { position: relative; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; opacity: .92; }
.astro-photo { position: relative; width: 54%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--yellow); margin: 8px 0 3px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.astro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.astro-name { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3.4vw, 1.65rem); }
.astro-tag { position: relative; font-weight: 800; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #0c0716; background: var(--cyan); border: 2px solid #0c0716; border-radius: 999px; padding: 2px 9px; }
.astro-traits { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 3px; }
.astro-traits span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #0c0716; background: rgba(255,255,255,.93); border-radius: 999px; padding: 3px 8px; display: inline-flex; gap: 4px; align-items: center; }
.astro-traits b { color: var(--pink); font-size: .8rem; }
.astro-blurb { position: relative; font-size: .78rem; font-weight: 500; line-height: 1.35; color: #e8dcff; margin-top: 2px; }
.astro-insta { position: relative; margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: #0c0716; background: var(--yellow); border: 2px solid #0c0716; border-radius: 999px; padding: 5px 14px; transition: background .15s; }
.astro-insta:hover { background: #fff; }

/* VERSO — logo */
.astro-card__back { transform: rotateY(180deg); background: linear-gradient(150deg, var(--pink) 0%, #ff6ec2 48%, var(--cyan) 100%); justify-content: center; gap: 14px; padding: 20px; }
.astro-back-logo { position: relative; width: 76%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.22)); }
.astro-back-text { position: relative; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: #fff; }

@media (max-width: 460px) {
  .astro-blurb { display: none; }
  .astro-card { aspect-ratio: 3 / 3.95; }
}
/* =========================================================
   PROCHAINS ÉVÉNEMENTS — slider
   ========================================================= */
.back-link { white-space: nowrap; }
.eventpage { padding-top: clamp(28px, 6vw, 56px); }
.nextshow { background: var(--ink); position: relative; z-index: 0; overflow: hidden; margin-top: calc(-1 * clamp(34px, 5vw, 64px)); padding-bottom: clamp(26px, 4vw, 50px); }
.eslider { position: relative; }
.eslider:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; border-radius: var(--radius-lg); }
.eslider__viewport { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08); }
.eslider__track { display: flex; transition: transform .55s cubic-bezier(.5,0,.2,1); }
.eslide { position: relative; flex: 0 0 100%; min-height: clamp(440px, 60vh, 580px); display: flex; align-items: flex-end; overflow: hidden; }
.eslide__media { position: absolute; inset: 0; z-index: 0; }
.eslide__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.eslide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(8,5,12,.95) 0%, rgba(8,5,12,.74) 44%, rgba(8,5,12,.12) 100%), linear-gradient(to top, rgba(8,5,12,.8), transparent 55%); }
.eslide__content { position: relative; z-index: 2; padding: clamp(26px, 5vw, 54px); display: grid; gap: 13px; max-width: 640px; }
.eslide__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1; text-transform: uppercase; color: #fff; }
.eslide__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #e7dcf0; font-weight: 600; font-size: .95rem; }
.eslide__meta span { display: inline-flex; align-items: center; gap: 7px; }
.eslide__meta svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.eslide__desc { color: #cdbfdb; max-width: 52ch; }
.eslide__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.eslider__nav { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.22); transition: background .15s, transform .15s; }
.eslider__nav:hover { background: var(--pink); }
.eslider__prev { left: 14px; }
.eslider__next { right: 14px; }
.eslider__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.eslider__dots button { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.3); transition: background .15s, width .2s; }
.eslider__dots button.is-active { background: var(--pink); width: 28px; }
@media (max-width: 560px) {
  .eslider__nav { width: 40px; height: 40px; top: auto; bottom: 12px; transform: none; }
  .eslide__content { padding-bottom: 70px; }
}

/* =========================================================
   FORMATS — halos cohérents avec le hero + stickers de carte
   ========================================================= */
.formats { position: relative; overflow: hidden; padding-top: clamp(28px, 5vw, 56px); }
.formats::before, .formats::after { content: ""; position: absolute; border-radius: 50%; filter: blur(75px); pointer-events: none; z-index: 0; }
.formats::before { width: 56vw; height: 56vw; left: -20vw; top: -14vw; background: radial-gradient(circle, rgba(255,46,156,.22), transparent 66%); }
.formats::after { width: 52vw; height: 52vw; right: -18vw; bottom: -18vw; background: radial-gradient(circle, rgba(52,212,222,.20), transparent 64%); }
.formats .wrap { position: relative; z-index: 1; }
/* image remplacée par un sticker */
.format__media { display: grid; place-items: center; aspect-ratio: auto; min-height: clamp(190px, 24vw, 260px); overflow: hidden; }
.format__media::after { display: none; }
.format--show .format__media { background: radial-gradient(circle at 50% 44%, rgba(255,46,156,.30), transparent 70%); }
.format--bingo .format__media { background: radial-gradient(circle at 50% 44%, rgba(52,212,222,.26), transparent 70%); }
.format__sticker { position: relative; z-index: 2; display: block; width: clamp(110px, 15vw, 148px); height: clamp(110px, 15vw, 148px); animation: floaty 6s ease-in-out infinite; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.35)); }
.format__sticker svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .astro-card, .astro-card__inner { transition: transform .2s linear; }
  .floatie { animation: none !important; }
}