/* ════════════════════════════════════════════════════════════
   ENHANCE 2026 — Layer de polish premium par-dessus le magazine
   Ajoute : mesh gradients animés, 3D tilt, smooth animations,
   typographie fluide, glassmorphism boost, page transitions.
   N'écrase rien — ne fait qu'ajouter.
   ════════════════════════════════════════════════════════════ */

/* ─── 1. CONTENU VISUEL — Mesh gradient animé en arrière-plan ─── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 800px 600px at 10% 15%, rgba(108,71,255,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 700px 700px at 90% 20%, rgba(255,90,31,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 800px 600px at 80% 90%, rgba(108,71,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 500px 500px at 25% 85%, rgba(197,240,46,0.07) 0%, transparent 60%);
  animation: e26-mesh-drift 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes e26-mesh-drift {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  33%  { transform: translate(2%,-1%) scale(1.05); opacity: .94; }
  66%  { transform: translate(-1.5%,1.5%) scale(.98); opacity: 1; }
  100% { transform: translate(0,0) scale(1); opacity: .96; }
}

/* ─── 2. MOTION — Floating ambient blobs ─── */
.e26-blob {
  position: fixed;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  will-change: transform;
  animation: e26-blob-float 22s ease-in-out infinite;
}
.e26-blob.e26-b1 { top: -8%; left: -8%; width: 480px; height: 480px; background: var(--violet, #6C47FF); animation-delay: 0s; }
.e26-blob.e26-b2 { top: 35%; right: -15%; width: 540px; height: 540px; background: var(--orange, #FF5A1F); animation-delay: -7s; }
.e26-blob.e26-b3 { bottom: -10%; left: 25%; width: 420px; height: 420px; background: #C5F02E; opacity: .14; animation-delay: -14s; }

@keyframes e26-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%      { transform: translate(60px, -50px) scale(1.1) rotate(5deg); }
  50%      { transform: translate(-40px, 60px) scale(.92) rotate(-4deg); }
  75%      { transform: translate(50px, 30px) scale(1.06) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .e26-blob { animation: none !important; }
}

/* ─── 3. PROFONDEUR — Glassmorphism boost sur les surfaces ─── */
.e26-depth {
  position: relative;
  isolation: isolate;
}
.e26-depth::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Box-shadow colorées (signature 2026) */
.btn,
.btn-primary {
  box-shadow:
    0 1px 2px rgba(108,71,255,.15),
    0 4px 12px rgba(108,71,255,.18),
    0 12px 32px rgba(255,90,31,.12) !important;
  transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(108,71,255,.2),
    0 8px 22px rgba(108,71,255,.3),
    0 22px 50px rgba(255,90,31,.18) !important;
}

/* ─── 4. CARDS / ARTICLES — 3D tilt + lift sur hover (PAS sur .spotm grosse section) ─── */
[data-reveal],
.article,
.card,
.cover-card,
.federation-card,
.fed-card,
.sport-card,
.disc-card {
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease,
    opacity .8s cubic-bezier(.2,.8,.2,1) !important;
  transform-origin: center center;
}

@media (hover: hover) {
  .article:hover,
  .card:hover,
  .cover-card:hover,
  .fed-card:hover,
  .sport-card:hover,
  .disc-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 24px 60px rgba(108,71,255,.22), 0 6px 20px rgba(0,0,0,.08);
    z-index: 2;
  }
}

/* ─── 5. SHIMMER effect au hover sur cards (sauf .spotm) ─── */
.cover-card,
.fed-card,
.sport-card,
.disc-card {
  position: relative;
  overflow: hidden;
}
.cover-card::after,
.fed-card::after,
.sport-card::after,
.disc-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .9s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 3;
}
@media (hover: hover) {
  .cover-card:hover::after,
  .fed-card:hover::after,
  .sport-card:hover::after,
  .disc-card:hover::after {
    left: 150%;
  }
}

/* ─── Verrouille la grosse section Sport du Mois (.spotm) ─── */
.spotm, .spotm:hover,
.spotm-video, .spotm-video:hover,
.spotm-thumb, .spotm-thumb:hover,
.spotm-thumb-icon, .spotm-thumb:hover .spotm-thumb-icon {
  transform: none !important;
  scale: 1 !important;
}

/* ─── 6. TYPOGRAPHIE FLUIDE & EXPRESSIVE ─── */
h1, .display-1, .hero-title {
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  letter-spacing: -.025em;
}
/* Headings : letter-spacing s'aère sur mobile */
@media (max-width: 720px) {
  h1, .display-1 { letter-spacing: -.01em; }
}

/* ─── 7. SCROLL FLUIDE NATIF (smooth scroll) ─── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── 8. LIENS — Underline animé qui s'étend ─── */
a:not(.btn):not(.nav-link):not(.bottom-tab):not(.cover-card):not(.spotm-cta) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.4,0,.2,1);
}
a:not(.btn):not(.nav-link):not(.bottom-tab):not(.cover-card):not(.spotm-cta):hover {
  background-size: 100% 1px;
}

/* ─── 9. BUTTONS — Ripple + press feedback ─── */
.btn, button:not(.bottom-tab):not(.cursor-dot):not(.cursor-ring) {
  position: relative;
  overflow: hidden;
}
.btn::before,
button:not(.bottom-tab):not(.cursor-dot):not(.cursor-ring)::before {
  content: '';
  position: absolute;
  top: var(--ripple-y, 50%); left: var(--ripple-x, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: translate(-50%, -50%);
  transition: width .5s ease, height .5s ease, opacity .5s ease;
  pointer-events: none;
  opacity: 1;
}
.btn:active::before,
button:active::before {
  width: 200px; height: 200px; opacity: 0;
  transition: width .5s ease, height .5s ease, opacity .8s ease;
}

/* ─── 10. PAGE TRANSITIONS — fade in au load ─── */
/* NB: pas de transform ici. Un transform sur <body> (même translateY(0) figé
   par fill-mode:both) fait du body le bloc englobant des éléments position:fixed,
   ce qui projetait les .e26-blob (bottom:-10%) sous le contenu et créait ~600px
   de vide scrollable en bas de page. Fade opacity-only = pas d'effet de bord. */
@keyframes e26-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: e26-page-in .5s cubic-bezier(.16,1,.3,1) both;
}

/* ─── 11. SIGNATURE KINETIC — Glow orange sur éléments clés ─── */
.btn-primary,
.cta-primary {
  position: relative;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--violet, #6C47FF), var(--orange, #FF5A1F));
  opacity: 0;
  z-index: -1;
  filter: blur(16px);
  transition: opacity .35s;
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after { opacity: .55; }
}

/* ─── 12. SCROLLBAR custom ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(108,71,255,.3), rgba(255,90,31,.3));
  border-radius: 100px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(108,71,255,.55), rgba(255,90,31,.55));
  background-clip: padding-box; border: 2px solid transparent;
}

/* ─── 13. SELECTION HIGHLIGHT ─── */
::selection { background: var(--orange, #FF5A1F); color: white; }
::-moz-selection { background: var(--orange, #FF5A1F); color: white; }

/* ─── 14. FOCUS-VISIBLE polish ─── */
:focus-visible {
  outline: 3px solid var(--violet, #6C47FF) !important;
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-offset .15s;
}