/* Habillage d’origine Studens, restauré depuis la sauvegarde du 24 septembre. */

    :root {
      --blue: #3b82f6;
      --blue-light: #60a5fa;
      --blue-pale: #93c5fd;
      --blue-dark: #1d4ed8;
      --blue-glow: rgba(59, 130, 246, 0.4);
      --cyan-accent: #22d3ee;
      --bg: #020206;
      --surface: rgba(15, 23, 42, 0.6);
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: #cbd5e1;
    }

    h1, h2, h3, h4 { font-family: 'Syne', sans-serif; }

    /* ── Glassmorphism System ── */
    .glass {
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      background: rgba(15, 23, 42, 0.45);
      border: 1px solid rgba(59, 130, 246, 0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.3);
    }

    .glass-light {
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      background: rgba(30, 41, 59, 0.35);
      border: 1px solid rgba(59, 130, 246, 0.08);
    }

    .glass-card {
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      background: rgba(15, 23, 42, 0.55);
      border: 1px solid rgba(59, 130, 246, 0.15);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      background: rgba(15, 23, 42, 0.65);
      border-color: rgba(59, 130, 246, 0.3);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 40px rgba(59, 130, 246, 0.12);
      transform: translateY(-2px);
    }

    .glass-nav {
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      background: rgba(3, 3, 8, 0.75);
      border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    }

    .glass-input {
      backdrop-filter: blur(12px) saturate(130%);
      -webkit-backdrop-filter: blur(12px) saturate(130%);
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(59, 130, 246, 0.15);
    }

    .glass-tag {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.2);
    }

    /* ── CTA Flare (shimmer + glow, inspired by Comkuate) ── */
    .btn-flare {
      position: relative;
      overflow: hidden;
      transition: background .2s, transform .15s, box-shadow .35s, border-color .2s;
    }
    .btn-flare::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
      background-size: 220% 100%;
      background-position: -120% 0;
      transition: background-position .6s ease;
      pointer-events: none;
      border-radius: inherit;
    }
    .btn-flare:hover::before {
      background-position: 220% 0;
    }
    /* Primary CTA (filled glass) */
    .btn-flare-primary {
      background: rgba(59, 130, 246, 0.12);
      border: 1px solid rgba(59, 130, 246, 0.3);
      color: #93c5fd;
      box-shadow: 0 2px 16px rgba(59, 130, 246, 0.25), 0 0 40px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .btn-flare-primary:hover {
      background: rgba(59, 130, 246, 0.2);
      border-color: rgba(59, 130, 246, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    /* Secondary CTA (glass outline) */
    .btn-flare-secondary {
      background: rgba(30, 41, 59, 0.35);
      border: 1px solid rgba(59, 130, 246, 0.1);
      color: #cbd5e1;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .btn-flare-secondary::before {
      background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.1) 50%, transparent 80%);
      background-size: 220% 100%;
      background-position: -120% 0;
    }
    .btn-flare-secondary:hover {
      background: rgba(30, 41, 59, 0.55);
      border-color: rgba(59, 130, 246, 0.25);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(59, 130, 246, 0.15), 0 0 36px rgba(59, 130, 246, 0.06), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    /* Nav CTA (compact) */
    .btn-flare-nav {
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.25);
      color: #93c5fd;
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
    }
    .btn-flare-nav:hover {
      background: rgba(59, 130, 246, 0.18);
      border-color: rgba(59, 130, 246, 0.4);
      transform: translateY(-1px);
      box-shadow: 0 4px 18px rgba(59, 130, 246, 0.25), 0 0 30px rgba(59, 130, 246, 0.1);
    }

    /* ── Glow Effects ── */
    .glow-blue { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
    .text-glow { text-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }

    /* ── Sponsor / Ad Slots ── */
    .ad-slot {
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.35) 100%);
      border: 1px solid rgba(59, 130, 246, 0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 20px rgba(0,0,0,0.25);
      transition: all 0.4s ease;
    }
    .ad-slot:hover {
      border-color: rgba(59, 130, 246, 0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 30px rgba(59, 130, 246, 0.08);
    }
    .ad-slot-label {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(148, 163, 184, 0.8);
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    /* Grid-embedded ad (same height as article cards) */
    .ad-slot-grid {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }
    /* Inline ad (horizontal, between sections) */
    .ad-slot-inline {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    /* Sidebar ad (article page) */
    .ad-slot-sidebar {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ad-logo {
      opacity: 1;
      transition: opacity 0.3s;
      filter: grayscale(0%);
    }
    .ad-slot:hover .ad-logo {
      opacity: 1;
      filter: grayscale(0%);
    }

    /* ── CRT Scanlines ── */
    .scanlines::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      opacity: 0.04;
      mix-blend-mode: overlay;
      background: repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent 3px);
    }

    /* ── Noise Overlay ── */
    .noise {
      background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E');
    }

    /* ── Marquee ── */
    @keyframes marquee-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-33.333%); }
    }
    .animate-marquee-left {
      animation: marquee-left 40s linear infinite;
    }
    .mask-fade {
      -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
      mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
    }

    /* ── Article Card Image ── */
    .article-img {
      position: relative;
      overflow: hidden;
      background: #0a0a14;
    }
    .article-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      display: block;
    }
    .article-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(3, 3, 8, 0.80) 0%, rgba(3, 3, 8, 0.15) 55%, transparent 100%);
      z-index: 1;
      pointer-events: none;
    }
    .article-img .cat-pill-wrap {
      position: absolute;
      bottom: 12px;
      left: 16px;
      z-index: 2;
    }
    .group:hover .article-img img {
      transform: scale(1.05);
    }

    /* ── Category Pills ── */
    .cat-digital { --cat: #3b82f6; }
    .cat-marketing { --cat: #8b5cf6; }
    .cat-entrepreneuriat { --cat: #f59e0b; }
    .cat-tech { --cat: #22d3ee; }
    .cat-design { --cat: #ec4899; }

    .cat-pill {
      background: rgba(var(--cat-rgb, 59, 130, 246), 0.1);
      border: 1px solid rgba(var(--cat-rgb, 59, 130, 246), 0.25);
      color: var(--cat, #3b82f6);
    }

    /* ── Divider Glow ── */
    .divider-glow {
      position: relative;
      height: 1px;
      overflow: hidden;
    }
    .divider-glow::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.15), transparent);
    }
    .divider-glow::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.5), transparent);
      filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
    }

    /* ── Retro Grid (synthwave perspective floor) ── */
    .retro-grid {
      position: fixed;
      bottom: 0;
      left: -50%;
      width: 200%;
      height: 92vh;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      transform-style: preserve-3d;
      perspective: 400px;
    }
    .retro-grid::before {
      content: '';
      position: absolute;
      /* Une période supplémentaire aux deux bords maintient le plan couvert
         pendant son déplacement. Le pivot reste à la position d'origine. */
      bottom: -60px;
      left: 0;
      width: 100%;
      height: calc(100% + 120px);
      transform: rotateX(68deg);
      transform-origin: 50% calc(100% - 60px);
      background:
        repeating-linear-gradient(
          90deg,
          rgba(59, 130, 246, 0.16) 0px,
          rgba(59, 130, 246, 0.08) 2px,
          transparent 2px,
          transparent 60px
        ),
        repeating-linear-gradient(
          0deg,
          rgba(59, 130, 246, 0.12) 0px,
          rgba(59, 130, 246, 0.06) 2px,
          transparent 2px,
          transparent 60px
        );
      background-size: 60px 60px;
      animation: grid-scroll 8s linear infinite;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    /* Horizon glow line */
    .retro-grid::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent 5%, rgba(59, 130, 246, 0.45) 30%, rgba(59, 130, 246, 0.85) 50%, rgba(59, 130, 246, 0.45) 70%, transparent 95%);
      filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 45px rgba(59, 130, 246, 0.5));
    }
    /* Vertical fade so grid vanishes into the dark top */
    .retro-grid-fade {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 92vh;
      pointer-events: none;
      z-index: 1;
      background: linear-gradient(to bottom, var(--bg) 0%, transparent 25%, transparent 85%, rgba(3, 3, 8, 0.5) 100%);
    }

    @keyframes grid-scroll {
      0% { transform: rotateX(68deg) translateY(0); }
      100% { transform: rotateX(68deg) translateY(60px); }
    }

    /* ── Scroll Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    
/* Dropdown Articles menu */
    .glass-nav .md\:flex > a { white-space: nowrap; }
    
    /* Nav dropdown — version validée */
    .nav-dropdown { position: relative; }
    .nav-dropdown-menu {
      position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
      min-width: 220px; padding: 8px; border-radius: 16px; opacity: 0; pointer-events: none;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.15s;
      background: rgba(5, 5, 12, 0.98); backdrop-filter: blur(40px) saturate(1.8);
      -webkit-backdrop-filter: blur(40px) saturate(1.8);
      border: 1px solid rgba(168, 85, 247, 0.18); box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
      z-index: 100;
    }
    .nav-dropdown-menu::before { content:''; position:absolute; top:-28px; left:0; right:0; height:28px; background:transparent; }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-menu:hover { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
    .nav-dropdown-menu a {
      display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px;
      font-size: 13px; color: #94a3b8; transition: all 0.2s; font-weight: 300;
    }
    .nav-dropdown-menu a:hover { background: rgba(59, 130, 246, 0.08); color: #93c5fd; }
    .nav-dropdown-menu .dropdown-divider { height: 1px; background: rgba(148, 163, 184, 0.06); margin: 4px 8px; }
    .nav-dropdown-menu .nav-dd-disabled { display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:10px; font-size:13px; color:#64748b; font-weight:300; cursor:not-allowed; opacity:0.7; }
    .nav-dropdown-menu .nav-dd-disabled:hover { background:transparent; color:#64748b; }
    .nav-dropdown-menu .nav-dd-soon { margin-left:auto; font-size:10px; padding:2px 7px; border-radius:9999px; background:rgba(148,163,184,0.1); color:#94a3b8; letter-spacing:0.04em; font-weight:500; }