:root{
      --sky:#8fd3ff;
      --grass:#4caf50;
      --stone:#6b7280;
      --dark:#0f172a;
      --primary:#f59e0b;
      --secondary:#22c55e;
      --tint:rgba(15, 23, 42, 0.5);
    }

    *{margin:0;padding:0;box-sizing:border-box}
        html{ width:100%; overflow-x:hidden; }
    
    /* By default (desktop) hide mobile-only controls so they don't appear unstyled */
    .hamburger, .mobile-nav, .mobile-overlay { display: none; }
    body{
      position: relative; /* Added for the gradient's positioning context */
      font-family:'Poppins',sans-serif;
      color:#1f2937;
      overflow-x:hidden;
    }

    /* Fixed background implemented with a pseudo-element so it works more consistently on mobile */
    body::after{
      content: '';
      position: fixed;
      inset: 0;
      z-index: -100; /* behind everything */
      background-image: url('background.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      will-change: transform;
      pointer-events: none;
    }

        /* Make images, media and iframes responsive to avoid horizontal overflow */
        img, picture, video, iframe, embed, object {
          max-width: 100%;
          height: auto;
          display: block;
        }
    
    /* Top Gradient Overlay */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 90px; /* Height of the gradient */
      background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
      z-index: 9; /* Below the nav (10) but above content */
      pointer-events: none; /* Don't intercept clicks */
    }

    .subtitle{
      font-size:1.3rem;
      margin-bottom:2rem;
      font-weight:600;
    }

    .logo-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 5rem;
    }

    .marge-acceuil{
      height: 180px;
    }
    
    .marge-sections{
      height: 50px;
    }

    .header{
      margin-bottom: 90px;
    }

    .header-logo-icon {
      height: 180px;
    }

    .header-logo-img {
      width: auto;
      max-width: 800px;
      height: auto;
    }

    .buttons{
      display:flex;
      gap:1.5rem;
      justify-content:center;
      flex-wrap:wrap;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding:1rem 2.5rem;
      border-radius:20px;
      font-weight:700;
      text-decoration:none;
      font-size:1.1rem;
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      transition:.25s;
      cursor: pointer;
    }

    .btn.modpack{
        background:linear-gradient(#facc15,#f59e0b);color:#000;
    }

    .btn.lore{
        background:linear-gradient(#00dd00,#009e00);color:#000;
    }

    .btn.discord{
        background:linear-gradient(#5865F2,#404EED);color:#fff;
    }

    .btn.curseforge{
        background:linear-gradient(#ff9100,#7c4600);color:#fff;
    }

    .btn:hover{
        transform:translateY(-4px) scale(1.03)
    }

    /* Desktop navigation (use .desktop-nav to avoid affecting mobile nav) */
    .desktop-nav{
      position:fixed;
      top: 10px; /* Matched to logo's top position */
      right:40px;
      height: 60px; /* Set fixed height */
      background:rgba(128, 128, 128, 0.5);
      backdrop-filter:blur(10px);
      border-radius:999px;
      padding: 0 2rem; /* Adjust padding */
      display:flex;
      align-items: center; /* Vertically center links */
      gap:2rem;
      box-shadow:0 10px 20px rgba(0,0,0,.3);
      z-index: 10;
    }
    .desktop-nav a{
      text-decoration:none;
      font-weight:600;
      color:#ffffff;
      font-size: 1.2rem; /* Increase font size */
      transition: transform 0.18s ease, color 0.18s ease;
      display:inline-block;
      line-height:1;
    }

    .desktop-nav a:hover{
      transform: translateY(-3px) scale(1.04);
      color: #fff;
    }

    .top-logo {
      position: fixed;
      top: 10px;
      left: 10px;
      height:75px; /* Match nav height */
      z-index: 10;
    }

    /* SECTIONS */
    section{
      max-width:1200px;
      margin:auto;
      padding:3rem 1.5rem;
      position: relative;
      z-index: 1;
    }

    h2{
      font-family:'Baloo 2',cursive;
      font-size:4rem;
      text-align:center;
      margin-bottom:1rem;
      color:#ffffff;
      text-shadow: 3px 3px 1px #c46c00;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:2rem;
    }

    .card{
      background:var(--tint);
      backdrop-filter: blur(2px);
      border-radius:24px;
      padding:2rem;
      box-shadow:0 15px 40px rgba(0,0,0,.15);
      text-align:center;
      transition:.25s;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .card:hover{transform:translateY(-6px)}

    .card h3{
      margin-bottom:1rem;
      font-family:'Baloo 2',cursive;
      font-size:1.6rem;
    }

    .actus-container{
      background:rgba(255,255,255,.9);
      border-radius:30px;
      padding:1rem;
      box-shadow:0 20px 50px rgba(0,0,0,.15);
      line-height:1.8;
    }

    footer{
      background:#0f172a;
      color:#cbd5f5;
      text-align:center;
      padding:2rem;
    }

    /* Modal Styles */
    .modal {
      display: none; /* Masqué par défaut */
      position: fixed; /* Reste en place */
      z-index: 20; /* Au-dessus de tout */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.6); /* Fond noir semi-transparent */
      align-items: center;
      justify-content: center;
    }

    .modal.show {
      display: flex; /* Afficher avec flexbox pour le centrage */
    }

    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 30px;
      border-radius: 20px;
      width: 90%;
      max-width: 500px;
      text-align: center;
      position: relative;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .close-btn {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close-btn:hover,
    .close-btn:focus {
      color: black;
    }

    .modal-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 20px;
    }


    .discord-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2em;
      flex-wrap: wrap;
    }

    .discord-text-container{
      text-align: left;
      max-width: 580px;
      font-size: 1.2rem; /* Increased font size */
      color: white;
      background:var(--tint);
      backdrop-filter: blur(2px);
      border-radius: 24px;
      padding: 2rem;
      box-shadow: 0 15px 40px rgba(0,0,0,.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .text-container {
      font-size: 1.2rem; /* Increased font size */
      color: white;
      background:var(--tint);
      backdrop-filter: blur(2px);
      border-radius: 24px;
      padding: 2rem;
      box-shadow: 0 15px 40px rgba(0,0,0,.15);
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Responsive rules (mobile-first enhancements) */
@media (max-width: 900px) {
  :root { --card: #ffffffee; }
  /* Add safe horizontal padding on small screens so content never touches edges */
  body { padding: 0 0.95rem; }

  /* Make the fixed background behave nicely on some mobile browsers by using transform */
  body::after{ background-position: center top; transform: translateZ(0); }

  .marge-acceuil{ height: 120px; }
  .marge-sections{ height: 40px; }

  .header{ margin-bottom: 60px; }

  .header-logo-icon { height: 110px; }
  .header-logo-img { max-width: 90%; }

  .buttons{ flex-direction: column; gap:0.75rem; align-items: center; }
  /* Buttons keep comfortable side margins instead of stretching full width */
  .btn{ padding:0.75rem 1rem; font-size:1rem; border-radius:12px; width:auto; max-width:520px; box-sizing:border-box; justify-content:center; display:inline-flex; align-items:center; margin: 0 0.5rem; }
  .btn img{ margin-right:0.6rem; height:1.2em; display:inline-block }

  /* Hide the desktop nav on small screens and use a hamburger menu instead */
  .desktop-nav{ display: none; }

  /* Hamburger button */
  .hamburger{
    display:flex; /* show hamburger only on small screens */
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 30;
    width: 48px;
    height: 42px;
    border-radius: 10px;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap:4px;
    flex-direction: column;
    padding: 6px;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .hamburger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition: transform .25s, opacity .25s }

  .hamburger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
  .hamburger.open span:nth-child(2){ opacity: 0 }
  .hamburger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

  /* Off-canvas mobile nav */
  .mobile-nav{
    display:flex; /* show mobile nav only on small screens */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 86%;
    max-width: 320px;
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(8,12,20,0.98));
    color: #fff;
    z-index: 29;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
    padding: 3.5rem 1.25rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mobile-nav.open{ transform: translateX(0) }

  .mobile-nav a{ color:#fff; text-decoration:none; font-weight:700; padding:0.75rem 0.5rem; border-radius:8px; display:block }
  .mobile-nav a:hover{ background: rgba(255,255,255,0.04) }

  /* Overlay backdrop for nicer visual */
  .mobile-overlay{
    position: fixed;
    inset: 0 0 0 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px) brightness(.7);
    z-index: 28;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    display:block; /* allow overlay to be shown on small screens */
  }

  .mobile-overlay.show{ opacity: 1; visibility: visible }

  /* Mobile nav header and close button */
  .mobile-nav .mobile-nav-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px }
  .mobile-nav .mobile-nav-logo{ height:44px; width:auto }
  .mobile-nav .close-mobile{ background:transparent; border:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; padding:6px; border-radius:8px }
  .mobile-nav .close-mobile:hover{ background: rgba(255,255,255,0.04) }

  /* Larger, centered links for touch targets */
  .mobile-nav a{ font-size:1.05rem; padding:1rem; text-align:left }

  /* Slightly narrower panel for better visual balance */
  .mobile-nav{ width:78%; max-width:360px }

  .top-logo{ height:54px; left:10px; top:8px }

  .discord-container {
    justify-content: center;
  }

  /* Ensure sections respect the page padding and do not create extra horizontal overflow */
  section{ padding:2rem 0.5rem }

  h2{ font-size:2.2rem }

  .lore-container, .card { padding:1.2rem }

  iframe{ width:100%; max-width:100%; height:280px }
}

/* Discord widget sizing: desktop keep a fixed height, mobile will adapt */
.discord .discord-widget, .discord-widget{
  width: 100%;
  max-width: 450px;
  height: 400px;
  border: none;
}

@media (max-width: 900px){
  .discord .discord-widget, .discord-widget{
    max-width: 100%;
    height: 280px; /* smaller on narrow screens */
  }
}

@media (max-width: 480px) {
  .marge-acceuil{ height: 90px }
  .header-logo-icon { height: 90px }
  h2{ font-size:1.8rem }
  .subtitle{ font-size:1rem }
  .desktop-nav{ padding:0.4rem 0.75rem; gap:0.4rem }
  .top-logo{ height:48px }
  .cards{ gap:1rem }
  .card h3{ font-size:1.25rem }
  .text-container, .discord-text-container { font-size:1rem }
  .modal-content{ padding:20px }
}