:root {
      --ink: #111315;
      --muted: #686d73;
      --surface: #f2f2f2;
      --white: #ffffff;
      --line: rgba(17, 19, 21, 0.12);
      --accent: #ff5a3d;
      --sidebar-width: 76px;
      --radius-xl: 34px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--white);
      color: var(--ink);
      font-family: "Manrope", sans-serif;
      overflow-x: hidden;
    }
    #decouvrir .feature-card-block {
  background-image: url('images/a.png'); /* Remplacez par le nom de votre image */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 180px; /* Ajustez la hauteur de la bannière selon vos besoins (ex: 180px) */
  padding-top: 210px; /* Décale le texte vers le bas pour qu'il ne se superpose pas à la bannière */
}
 
.feature-card-block{
    position:relative;
    overflow:visible;
}

.nami-left{
    position:absolute;
    left:-20px;
    bottom:0;
    width:180px;
    z-index:5;
}

.psyduck-right{
    position:absolute;
    right:-20px;
    bottom:0;
    width:150px;
    z-index:5;
}
    .feature-card-block{
    text-align:center;
}

.feature-card-block h2,
.feature-card-block p{
    margin-left:auto;
    margin-right:auto;
}

.discord-cta-btn{
    display:inline-block;
    margin-top:30px;
}

/* Style du bouton (identique à l'original) */
.discord-cta-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #ffffff;
    color: #333;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(88, 101, 242, 0.4);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.discord-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(88, 101, 242, 0.6);
}
    a { color: inherit; text-decoration: none; }
    button { color: inherit; font: inherit; cursor: pointer; }

    /* --- ANIMATION AU SCROLL (REVEAL) --- */
    .reveal {
      opacity: 0;
      transform: translateY(45px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    .sidebar {
      position: fixed;
      top: 7vh;
      bottom: 7vh;
      left: 22px;
      width: var(--sidebar-width);
      min-height: 460px;
      padding: 18px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 18px 60px rgba(17, 19, 21, 0.08);
      z-index: 50;
    }
    .sidebar-logo {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
    }
    .sidebar-nav {
      margin: auto 0;
      display: grid;
      gap: 18px;
    }
    .side-icon {
      position: relative;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #8a8f95;
      transition: .22s ease;
    }
    .side-icon svg { width: 25px; height: 25px; stroke-width: 1.8; }
    .side-icon svg:hover, .side-icon.active { color: var(--ink); }
    .sidebar-help { margin-top: auto; }

    main { margin-left: 0; background-color: #f2f2f2;}
    .home {
      min-height: 100vh;
      padding: 26px 26px 26px 120px;
      display: flex;
    }
    .home-frame {
      width: 100%;
      min-height: calc(100vh - 52px);
      padding: 0 28px 28px;
      background: white;
      border-radius: 30px;
      overflow: hidden;
    }
    .topbar {
      height: 86px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .top-links { display: flex; align-items: center; gap: 34px; }
    .top-links a {
      color: #62676c;
      font-size: 13px;
      font-weight: 700;
      transition: .2s;
    }
    .top-links a:hover { color: var(--ink); }

    .hero-carousel {
      position: relative;
      min-height: calc(100vh - 166px);
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: #e8e8e8;
      isolation: isolate;
    }
    .slides,
    .slide { position: absolute; inset: 0; }
    .slide {
      opacity: 0;
      transform: scale(1.035);
      transition: opacity .75s ease, transform 1s ease;
      overflow: hidden;
    }
    .slide.active { opacity: 1; transform: scale(1); }
    .slide-one { background: linear-gradient(135deg, #dce5df 0%, #becdc3 100%); }
    .slide-two { background: linear-gradient(135deg, #e8ddd4 0%, #ccb5a4 100%); }
    .slide-three { background: linear-gradient(135deg, #d9dce9 0%, #b7bdd3 100%); }
    .slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(13,18,16,.72) 0%, rgba(13,18,16,.40) 43%, rgba(13,18,16,.05) 78%);
      z-index: 2;
    }

    .slide-decoration { position: absolute; inset: 0; }
    .decoration-map {
      background-image: url('images/fond1.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .floating-shop {
      position: absolute;
      right: 7%;
      bottom: 8%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      width: 250px;
      border-radius: 20px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 25px 60px rgba(25,29,27,.15);
      backdrop-filter: blur(18px);
      z-index: 3;
    }
    .shop-thumb { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:#111; color:#fff; font-size:12px; font-weight:800; }
    .floating-shop div:last-child { display:grid; gap:4px; }
    .floating-shop strong { font-size:14px; }
    .floating-shop span { color:#7a7e82; font-size:11px; }

    .tcg-card {
      position: absolute;
      right: 17%;
      top: 50%;
      width: min(250px, 25vw);
      aspect-ratio: .7;
      border-radius: 24px;
      box-shadow: 0 35px 80px rgba(35,23,16,.22);
    }
    .card-back { 
      background: url('images/luffy.png') center / cover no-repeat; 
      transform: translate(55px,-55%) rotate(12deg); 
      opacity: .9; 
    }
    .card-front {
      background: url('images/lugia.jpeg') center / cover no-repeat;
      transform: translateY(-50%) rotate(-8deg);
    }

    .logo-display-card {
      position: absolute;
      right: 17%;
      top: 50%;
      width: min(220px, 22vw);
      aspect-ratio: .7;
      transform: translateY(-50%) rotate(-6deg);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.95);
      display: grid;
      place-items: center;
      padding: 25px;
      box-shadow: 0 35px 80px rgba(35,23,16,.22);
      backdrop-filter: blur(16px);
      z-index: 3;
    }
    .logo-display-card img { width: 100%; height: 100%; object-fit: contain; }

    .ikon-card {
      position: absolute;
      right: 17%;
      top: 50%;
      width: min(220px, 22vw);
      aspect-ratio: .7;
      border-radius: 24px;
      box-shadow: 0 35px 80px rgba(35,23,16,.22);
    }
    .ikon-second {
      background: url('images/ikon3.png') center / cover no-repeat;
      transform: translate(45px, -56%) rotate(10deg);
      z-index: 2;
      opacity: .95;
    }
    .ikon-third {
      background: url('images/ikon2.png') center / cover no-repeat;
      transform: translate(90px, -45%) rotate(20deg);
      z-index: 1;
      opacity: .9;
    }

    .spark { position:absolute; color:#fff; font-size:48px; opacity:.75; }
    .spark-a { top:18%; right:13%; }
    .spark-b { bottom:13%; right:40%; font-size:28px; }

    .hero-copy {
      position: relative;
      z-index: 6;
      width: min(720px, 62%);
      min-height: calc(100vh - 166px);
      padding: clamp(50px, 7vh, 90px) clamp(36px, 6vw, 90px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
    }
    h1 {
      margin: 0;
      font-size: clamp(64px, 8vw, 128px);
      line-height: .82;
      letter-spacing: -.075em;
      font-weight: 500;
    }
    h1 span { font-weight: 800; }
    .hero-text {
      max-width: 570px;
      margin: 34px 0 30px;
      color: rgba(255,255,255,.77);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.75;
    }
    .primary-button {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 15px 20px;
      border-radius: 14px;
      color: var(--ink);
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 14px 30px rgba(0,0,0,.12);
      transition: .25s ease;
    }
    .primary-button:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,.18); }
    .primary-button svg { width:17px; height:17px; }

    .carousel-controls {
      position: absolute;
      z-index: 8;
      left: 50%;
      transform: translateX(-50%);
      bottom: 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .carousel-arrow {
      width: 38px;
      height: 38px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.24);
      border-radius:50%;
      color:#fff;
      background:rgba(255,255,255,.09);
      cursor:pointer;
      backdrop-filter:blur(10px);
    }
    .carousel-arrow:hover { background:rgba(255,255,255,.2); }
    .carousel-arrow svg { width:16px;height:16px; }
    .carousel-dots { display:flex; gap:8px; }
    .dot { width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.38);cursor:pointer;transition:.25s; }
    .dot.active { width:28px;background:#fff; }

    /* --- SECTIONS EN BLOCS STYLE CARTE --- */
    .block-wrapper { padding: 40px 10vw 40px 14vw; background: var(--surface); }
    .feature-card-block {
      position: relative;
      background: #ffffff;
      border-radius: 36px;
      padding: clamp(40px, 6vw, 80px);
      color: var(--ink);
      overflow: hidden;
      box-shadow: 0 25px 70px rgba(17, 19, 21, 0.08);
      border: 1px solid rgba(17, 19, 21, 0.06);
    }
    h2 { max-width:850px; margin:14px 0 20px; font-size:clamp(34px, 4.5vw, 60px); letter-spacing:-.04em; line-height:1.02; font-weight: 800; }
    .content-lead { font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 14px; line-height: 1.6; }
    .feature-card-block p:not(.section-label) { max-width: 680px; color: var(--muted); line-height: 1.8; font-size: 15px; }

    /* Grille Explication carte */
    .explanation-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
    .explanation-card {
      background: var(--surface);
      padding: 30px;
      border-radius: 22px;
      border: 1px solid var(--line);
      position: relative;
      transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s;
    }
    .explanation-card:hover {
      transform: translateY(-4px);
      border-color: rgba(17, 19, 21, 0.25);
    }
    .explanation-card h3 { margin: 16px 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
    .explanation-card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.65; }
    .card-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: var(--ink);
      color: #fff;
      display: grid;
      place-items: center;
    }

    /* Menu Déroulant */
    .custom-dropdown { position: relative; display: inline-block; user-select: none; background-color: #f2f2f2; border-radius: 7px; padding: 4px;}
    .dropdown-trigger { display: flex; align-items: center; gap: 10px;  border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: all 0.2s ease-in-out; }
    .dropdown-trigger:hover, .custom-dropdown.active .dropdown-trigger { border-color: #333333; }
    .flag-img { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; }
    .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333333; transition: transform 0.2s ease; }
    .custom-dropdown.active .arrow-down { transform: rotate(180deg); }
    .dropdown-menu { position: absolute; top: calc(100% + 5px); left: 0; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: none; flex-direction: column; padding: 5px; min-width: 100%; box-sizing: border-box; z-index: 100; }
    .custom-dropdown.active .dropdown-menu { display: flex; }
    .dropdown-item { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 8px 12px; width: 100%; cursor: pointer; border-radius: 4px; transition: background-color 0.15s ease; }
    .dropdown-item:hover { background-color: #f0f0f0; }

    /* --- BLOC DISCORD (IDENTIQUE À L'ORIGINAL) --- */
    .discord-massive-wrap {
      padding: 40px 10vw 40px 14vw;
      background: var(--surface);
    }
    .discord-hero-card {
      position: relative;
      background-image: url('images/discord2.png');
      background-repeat: no-repeat;
      background-position: right 20px center;
      border-radius: 36px;
      padding: clamp(50px, 7vw, 90px);
      color: white;
      overflow: hidden;
      box-shadow: 0 30px 90px rgba(15, 17, 23, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .discord-hero-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(88, 101, 242, 0.28) 0%, transparent 70%);
      pointer-events: none;
    }
    .discord-content-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 50px;
      align-items: center;
    }
    .discord-hero-card h2 {
      color: black;
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1.05;
      letter-spacing: -.03em;
      margin: 0 0 20px;
    }
    .discord-hero-card p {
      color: #949ba4;
      font-size: 16px;
      line-height: 1.7;
      margin: 0 0 35px;
      max-width: 520px;
    }
    .discord-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }
    .discord-cta-btn {
      background: white;
      border: 1px solid black;
      color: black;
      padding: 18px 32px;
      border-radius: 16px;
      font-weight: 800;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 12px 35px rgba(88, 101, 242, 0.4);
      transition: transform .25s ease, background .25s ease;
    }
    .discord-cta-btn:hover {  transform: translateY(-3px); }

    /* Footer Complet */
    .rich-footer {
      background: white;
      color: black;
      padding: 90px 10vw 40px 14vw;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 50px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand p { color: #8a8f95; font-size: 14px; margin-top: 18px; line-height: 1.65; max-width: 320px; }
    .footer-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 22px; color: #fff; }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
    .footer-col a { color: #8a8f95; font-size: 14px; transition: color .2s; }
    .footer-col a:hover { color: black; }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 35px;
      color: #8a8f95;
      font-size: 13px;
    }
    .footer-socials { display: flex; gap: 14px; }
    .footer-socials a { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,0.05); display: grid; place-items: center; color: #fff; transition: .2s; border: 1px solid rgba(255,255,255,0.08); }
    .footer-socials a:hover { background: var(--accent); border-color: transparent; }
@media screen and (max-width: 1024px) {
  /* --- TABLETTE --- */
  .hero-copy {
    width: 100%;
  }
  
  /* Masquer les éléments absolus complexes pour éviter les chevauchements */
  .tcg-card, 
  .logo-display-card, 
  .ikon-card, 
  .floating-shop, 
  .spark {
    display: none;
  }
  
  /* Ajustement des espacements (prise en compte de la sidebar gauche) */
  .block-wrapper, 
  .discord-massive-wrap, 
  .rich-footer {
    padding: 40px 5vw 40px 110px;
  }
  
  /* Grille Discord */
  .discord-content-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .discord-actions {
    justify-content: center;
  }
  .discord-hero-card {
    background-position: center bottom;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  /* --- MOBILE --- */
  
  /* Transformation de la sidebar en barre de navigation basse */
  .sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 75px;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0 10px;
    border-radius: 24px 24px 0 0;
    border: none;
    border-top: 1px solid var(--line);
    z-index: 100;
  }
  .sidebar-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin: 0;
    gap: 0;
  }
  .sidebar-logo, 
  .sidebar-help {
    display: none;
  }
  
  /* Réajustement du layout global */
  .home {
    padding: 15px 15px 90px 15px; /* 90px en bas pour ne pas cacher le contenu avec la sidebar */
  }
  .home-frame {
    padding: 0 15px 25px;
  }
  .block-wrapper, 
  .discord-massive-wrap, 
  .rich-footer {
    padding: 40px 5vw;
  }
  
  /* Topbar */
  .topbar {
    height: auto;
    flex-direction: column;
    padding: 20px 0;
    gap: 15px;
  }
  .top-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  /* Hero Section */
  .hero-carousel,
  .hero-copy {
    min-height: 50vh;
  }
  .hero-copy {
    padding: 40px 15px;
    text-align: center;
  }
  h1 {
    font-size: clamp(38px, 10vw, 56px);
  }
  h2 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .primary-button {
    margin: 0 auto;
  }
  
  /* Sections Cartes & Découvrir */
  #decouvrir .feature-card-block {
    background-size: 150% 120px;
    padding-top: 140px;
  }
  .feature-card-block {
    padding: 30px 15px;
  }
  .nami-left {
    width: 90px;
    left: -5px;
  }
  .psyduck-right {
    width: 75px;
    right: -5px;
  }
  .explanation-grid {
    grid-template-columns: 1fr;
  }
  
  /* Section Discord */
  .discord-hero-card {
    padding: 40px 20px;
    background-image: none; /* Améliore la lisibilité sur petit écran */
  }
  .discord-hero-card h2 {
    font-size: 32px;
  }
  .discord-hero-card::before {
    display: none;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .footer-brand p {
    margin: 15px auto;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 70px; /* Espace pour la barre de navigation basse */
  }
}

@media screen and (max-width: 480px) {
  /* --- PETITS MOBILES --- */
  .top-links {
    display: none; /* Cache les liens du haut si l'écran est vraiment trop petit */
  }
  .discord-cta-btn {
    width: 100%;
    justify-content: center;
  }
}