:root {
    --bg: #000;
    --fg: #fff;
    --muted: rgba(255, 255, 255, .78);
    --muted2: rgba(255, 255, 255, .6);
    --card: rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .12);
    --accent: #d946ef;
    --accent-2: #6d28d9;
  }

  html {
    scroll-behavior: smooth
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"
  }

  .container {
    max-width: 1080px;
    margin-inline: auto;
    padding: 0 1rem
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: saturate(150%) blur(6px);
    backdrop-filter: saturate(150%) blur(6px);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: .5rem
  }

  .nav {
    display: flex;
    gap: 1.25rem;
    align-items: center
  }

  .nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.5s ease, color 0.5s ease;
  }

  .nav a:hover {
    color: #fff;
    transform: scale(1.1);
  }

  .burger {
    display: none;
    appearance: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: .6rem;
    color: #fff;
    padding: .45rem .6rem
  }

  section {
    scroll-margin-top: 84px;
    padding: 3.25rem 0
  }

  h1 {
    font-size: 2.125rem;
    line-height: 1.2;
    margin: 0
  }

  h2 {
    font-size: 1.5rem;
    margin: 0
  }

  h3 {
    margin: 0 0 .25rem 0
  }

  .muted {
    color: var(--muted)
  }

  .muted2 {
    color: var(--muted2)
  }

  .grid {
    display: grid;
    gap: 1rem
  }

  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem
  }

  .pill {
    display: inline-block;
    background: rgba(217, 70, 239, .22);
    color: #f0abfc;
    padding: .35rem .7rem;
    border-radius: .5rem;
    font-size: .85rem;
    white-space: nowrap
  }

  .section-bg {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(217, 70, 239, .35);
    border-radius: 1.25rem;
    text-align: center;
    ;
    background: radial-gradient(60% 60% at 50% 35%, rgba(217, 70, 239, .25), rgba(109, 40, 217, .18), rgba(0, 0, 0, 0))
  }

  footer {
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, .7)
  }

  .footer-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
  }

  @media (max-width: 768px) {
    body {
      font-size: 15px
    }

    h1 {
      font-size: 1.6rem
    }

    h2 {
      font-size: 1.25rem
    }

    .cols-2 {
      grid-template-columns: 1fr
    }

    .nav {
      display: none
    }

    .nav.open {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      position: absolute;
      right: 1rem;
      top: 56px;
      background: #0a0a0a;
      border: 1px solid var(--border);
      border-radius: .8rem;
      padding: .6rem 1rem
    }

    section {
      padding: 2.25rem 0
    }

    .container {
      padding: 0 .9rem
    }
  }

  .brand img {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
  }

  a:focus,
  a:active {
    outline: none;
    box-shadow: none;
  }

  .discord-wrap {
    max-width: 760px;
    margin: 0 auto
  }

  .discord-title {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem
  }

  .discord-title .star {
    filter: drop-shadow(0 0 6px rgba(217, 70, 239, .6))
  }

  .discord-invite {
    margin: .5rem 0 1rem 0;
    text-align: center
  }

  .discord-invite a {
    color: #60a5fa;
    text-decoration: none
  }

  .discord-invite a:hover {
    text-decoration: underline
  }

  .discord-card {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
  }

  .discord-frame {
    display: block;
    border: 0;
    width: 100%;
    height: 420px;
    border-radius: .6rem
  }

  .btn {
    display: inline-block;
    border: 1px solid var(--border);
    padding: .55rem .9rem;
    border-radius: .6rem;
    color: #fff;
    text-decoration: none
  }

  .btn:hover {
    background: rgba(255, 255, 255, .06)
  }



  .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* espace entre logo et texte */
  }

  .brand .logo {
    width: 42px;
    /* taille du logo */
    height: 42px;
    object-fit: contain;
    vertical-align: middle;
  }

  .brand strong {
    font-size: 0.95rem;
  }

  .brand-link {
    text-decoration: none !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .brand-link:hover {
    opacity: 0.9;
  }

  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    /* ajuste si nécessaire */
  }


  .nav-button {
    /* permet de gérer la largeur et hauteur */
    padding: 1rem;
    /* espace à l'intérieur du bouton */
    background-color: #a812e4;
    /* couleur de fond */
    color: #fff;
    /* couleur du texte */
    text-decoration: none;
    /* supprime le soulignement */
    border-radius: 15px;
    /* coins arrondis, plus grand = plus rond */
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .language-toggle {
    position: relative
  }

  .language-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, .08);
    /* Dark transparent background */
    border: 1px solid var(--border);
    border-radius: .75rem;
    /* Original radius */
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem .8rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    min-width: unset;
    /* Remove fixed width constraint if not needed, or keep for stability. Let's start with auto/unset to fit content naturally */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: normal;
  }

  .language-button:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
    /* Original hover effect */
  }

  .language-caret {
    font-size: .7rem;
    margin-left: .25rem;
  }

  .language-menu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    /* Align left again or center? Original was left:0 */
    /* If left:0, it aligns with left of button. */
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: .75rem;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .4rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 95;
  }

  .language-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .language-option {
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    padding: .4rem .5rem;
    border-radius: .5rem;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .language-option:hover {
    background: rgba(255, 255, 255, .08)
  }

  .flag-icon {
    width: 20px;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 2px;
  }

  .language-option.active {
    background: rgba(173, 70, 255, .2);
    color: #f0abfc;
    font-weight: 600
  }

  .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
  }

  .nav-button:hover {
    transform: scale(1.1);
    /* agrandit légèrement le bouton */

  }

  .nav {
    display: flex;
    gap: 2rem;
    /* augmente l'espacement horizontal entre les liens */
  }

  .container {
    position: relative;
    /* nécessaire pour que l'image soit positionnée par rapport à ce container */
  }


  /* === Image positionnée à droite sur PC === */
  .right-image {
    position: absolute;
    top: -26px;
    right: 0;
    width: 500px;
    max-width: 100%;
  }


  .right-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }



  @media (min-width: 769px) {

    /* Restaure le glow sur PC */
    .fade-in-image.glow {
      filter: drop-shadow(0 0 20px #ad46ff);
    }
  }

  @media (max-width: 768px) {
    .right-image {
      position: static;
      display: flex;
      justify-content: center;
      width: 100%;

    }



    .right-image img {
      width: 80%;
      max-width: 380px;
      height: auto;
      position: relative;
      top: 120px;
    }
  }


  @media (max-width: 768px) {
    .image-container+h2 {
      margin-top: 20rem;
      /* colle juste ce h2 à l’image */
    }


  }



  .fade-in-image {
    opacity: 0;
    transform: translateY(2px);
    /* petit effet de glissement vers le haut */
    animation: fadeIn 1s ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }

    to {
      opacity: 1;

    }
  }

  .fade-in-image.glow {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  html,
  body {
    overflow-x: hidden;
    /* ✅ empêche le scroll horizontal */
    width: 100%;
  }

  /* Sécurise tous les conteneurs pour éviter un léger débordement */
  .image-container {
    max-width: 100%;
    /* ✅ empêche tout dépassement horizontal */
    overflow-x: hidden;
  }

  .snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* pour ne pas bloquer les clics */
    overflow: hidden;
    z-index: 9999;
  }

  .snowflake {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes fall {
    to {
      transform: translateY(100vh);
    }
  }

  .glow {
    position: relative;
    filter: drop-shadow(0 0 1px #9b2eff) drop-shadow(0 0 15px #9b2eff);
  }

  @media (max-width: 768px) {

    /* --- NAV --- */
    .nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 70%;
      height: 100vh;
      background: #0f0f0f;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        transform 0.38s cubic-bezier(.2, .9, .2, 1),
        opacity 0.28s ease,
        visibility 0s linear 0.38s;
      z-index: 90;
      padding: 2rem 1rem;
    }

    .nav.active {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        transform 0.38s cubic-bezier(.2, .9, .2, 1),
        opacity 0.28s ease,
        visibility 0s linear 0s;
    }

    .nav a {
      color: #fff;
      text-decoration: none;
      font-size: 1.4rem;
      margin: 14px 0;
      opacity: 0;
      transform: translateX(18px);
      transition: opacity 0.28s ease 0.05s, transform 0.28s ease 0.05s;
    }

    .nav.active a {
      opacity: 1;
      transform: translateX(0);
    }

    .language-toggle {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 1rem
    }

    .language-menu {
      left: 50%;
      transform: translate(-50%, 6px);
      width: 100%;
      max-width: 240px
    }

    .language-menu.open {
      transform: translate(-50%, 0)
    }

    /* --- BURGER --- */
    .burger {
      display: block;
      background: none;
      border: none;
      color: white;
      font-size: 0;
      /* on masque le caractère ☰ */
      width: 32px;
      height: 24px;
      position: relative;
      z-index: 100;
      cursor: pointer;
    }

    .burger::before,
    .burger::after,
    .burger span {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background: #fff;
      transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .burger::before {
      top: 0;
    }

    .burger span {
      top: 50%;
      transform: translateY(-50%);
    }

    .burger::after {
      bottom: 0;
    }

    .burger.active::before {
      transform: translateY(10px) rotate(45deg);
    }

    .burger.active span {
      opacity: 0;
    }

    .burger.active::after {
      transform: translateY(-10px) rotate(-45deg);
    }
  }

  /* === Centrage du titre Discord sur mobile === */
  @media (max-width: 768px) {
    #discord .discord-title {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* === FORCER la barre en FIXE ===
   Coller ceci en fin de style.css pour qu'il surpasse la plupart des règles. */
  header.header,
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
  }

  /* Evite que le contenu passe dessous (ajuste la valeur selon la hauteur réelle de ta nav) */
  body {
    padding-top: 111px !important;
    /* <- ajuste: 72px est un point de départ courant */
  }