:root{
  --bg0:#061e26;
  --bg1:#07303a;
  --text:rgba(235,245,245,.92);
  --muted:rgba(235,245,245,.62);

  --cyan:rgba(120,255,240,.85);
  --pink:rgba(255,120,195,.85);
  --violet:rgba(185,120,255,.70);

  --stroke:rgba(120,255,240,.09);
  --strokePink:rgba(255,120,195,.16);

  --radius:18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 70% 15%, rgba(35,190,170,.18), transparent 60%),
    radial-gradient(900px 600px at 25% 65%, rgba(255,120,195,.14), transparent 62%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  overflow-x:hidden;
}

/* Anchor offsets (sticky header) */
:target{ scroll-margin-top:110px; }
.hero, .section{ scroll-margin-top:110px; }

/* ===== FX BACKGROUND ===== */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.blob{
  position:absolute;
  width:560px;
  height:560px;
  border-radius:999px;
  filter:blur(70px);
  opacity:.45;
}

.blob--a{
  left:8%;
  top:18%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,120,195,.85), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(185,120,255,.70), transparent 60%);
}
.blob--b{
  right:10%;
  top:8%;
  width:640px;
  height:640px;
  opacity:.30;
  background:
    radial-gradient(circle at 40% 40%, rgba(120,255,240,.55), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(255,120,195,.35), transparent 60%);
}
.blob--c{
  left:18%;
  bottom:6%;
  width:720px;
  height:720px;
  opacity:.22;
  background:
    radial-gradient(circle at 35% 45%, rgba(185,120,255,.45), transparent 65%),
    radial-gradient(circle at 70% 60%, rgba(120,255,240,.25), transparent 60%);
}

.grain{
  position:absolute;
  inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;
  opacity:.10;
  transform:rotate(4deg);
}

.vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 35%, transparent 35%, rgba(0,0,0,.50) 100%);
  opacity:.70;
}

/* Keep content above FX */
.topbar, .wrap{ position:relative; z-index:1; }

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  padding:24px 28px 10px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(4,20,25,.48), rgba(4,20,25,.06));
  border-bottom:1px solid rgba(120,255,240,.07);
}

.tabs{
  display:flex;
  justify-content:flex-end;
  gap:40px;
  max-width:1180px;
  margin:0 auto;
}

.tab{
  position:relative;
  text-decoration:none;
  color:rgba(220,250,250,.68);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 2px 12px;
  transition:color .2s ease, text-shadow .2s ease;
}
.tab:hover{
  color:rgba(255,120,195,.92);
  text-shadow:0 0 24px rgba(255,120,195,.25);
}
.tab::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:1px;
  background:rgba(120,255,240,.18);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease, background .25s ease;
}
.tab:hover::after{
  transform:scaleX(1);
  background:rgba(255,120,195,.35);
}
.tab.is-active{
  color:rgba(240,255,255,.92);
}
.tab.is-active::after{
  transform:scaleX(1);
  background:rgba(120,255,240,.40);
}

/* ===== LAYOUT ===== */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:84px 28px 56px;
}

.hero{
  padding-top:24px;
  min-height:72vh;
}

.title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500;
  font-size:clamp(64px, 7vw, 104px);
  margin:0 0 14px;
  color:rgba(255,170,215,.92);
  text-shadow:0 0 40px rgba(255,120,195,.20);
}

.kicker{
  margin:0 0 18px;
  color:rgba(255,170,215,.70);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  line-height:1.65;
}

.lead{
  max-width:520px;
  margin:0 0 34px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

/* ===== GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-top:10px;
}

@media (max-width: 980px){
  .tabs{ justify-content:center; gap:26px; }
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .wrap{ padding:64px 18px 44px; }
  .grid{ grid-template-columns:1fr; }
  .topbar{ padding:18px 16px 8px; }
}

/* ===== CARDS (no link ugliness) ===== */
.card{
  display:block;
  text-decoration:none !important;
  color:inherit !important;
  border-radius:var(--radius);
  padding:18px;
  background:linear-gradient(180deg, rgba(8,28,34,.52), rgba(8,28,34,.22));
  border:1px solid rgba(120,255,240,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow:hidden;
  min-height:168px;
  position:relative;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(300px 220px at 20% 20%, rgba(255,120,195,.16), transparent 55%),
    radial-gradient(320px 240px at 80% 80%, rgba(120,255,240,.10), transparent 60%);
  opacity:.70;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,120,195,.18);
  box-shadow:
    0 38px 110px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,120,195,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.card__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

.card__icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(255,120,195,.10);
  border:1px solid rgba(255,120,195,.18);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}

.card__icon img{
  width:26px;
  height:26px;
  object-fit:contain;
  display:block;
}

.card__titles{
  min-width:0;
}

.card__title{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:22px;
  color:rgba(210,255,255,.90);
  line-height:1.1;
}

.card__desc{
  margin:6px 0 0;
  font-size:12px;
  color:rgba(235,245,245,.62);
  line-height:1.5;
}

.card__cta{
  margin-top:18px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(235,245,245,.48);
  position:relative;
  z-index:1;
}

.card:hover .card__cta{
  color:rgba(255,120,195,.88);
  text-shadow:0 0 18px rgba(255,120,195,.22);
}

.card--accent{
  border-color:rgba(255,120,195,.22);
  box-shadow:
    0 38px 110px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,120,195,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== SECTIONS ===== */
.section{
  padding:84px 0 28px;
  border-top:1px solid rgba(120,255,240,.08);
}

.section__title{
  margin:0 0 10px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:40px;
  color:rgba(210,255,255,.90);
}

.section__text{
  margin:0;
  max-width:620px;
  color:rgba(235,245,245,.62);
  line-height:1.9;
  font-size:13px;
}

.footer{
  padding-top:36px;
  color:rgba(235,245,245,.45);
  font-size:12px;
  letter-spacing:.08em;
}
/* ===== ABOUT – style éditorial ===== */

.section--about{
  max-width: 760px;
}

.about__lead{
  margin: 0 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  color: rgba(235,245,245,.95);
  letter-spacing: .02em;
}

.about__text{
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: rgba(235,245,245,.68);
}

/* Petit accent subtil */
.section--about::before{
  content:"";
  display:block;
  width: 48px;
  height: 1px;
  margin-bottom: 22px;
  background: linear-gradient(
    90deg,
    rgba(255,120,195,.6),
    rgba(120,255,240,.4)
  );
}
/* ===== CONTACT ===== */

.section--contact{
  max-width: 760px;
}

.contact__list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.contact__item{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: rgba(235,245,245,.85);
  font-size: 14px;
  transition: color .2s ease, transform .2s ease;
}

.contact__item:hover{
  color: rgba(255,120,195,.9);
  transform: translateX(2px);
}

.contact__icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,120,195,.12);
  border: 1px solid rgba(255,120,195,.22);
  font-size: 14px;
  color: rgba(255,120,195,.9);
  flex-shrink: 0;
}

.contact__label{
  letter-spacing: .02em;
}

/* Élément non cliquable (Discord) */
.contact__item--static{
  cursor: default;
  opacity: .85;
}

.contact__item--static:hover{
  color: rgba(235,245,245,.85);
  transform: none;
}
/* ===== CONTACT (fix affichage + liens bleus) ===== */

.section--contact{
  max-width: 760px;
}

.contact__list{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

/* A et button -> même look */
.contact__item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(8,28,34,.25);
  border: 1px solid rgba(120,255,240,.10);

  /* 🔥 on écrase les styles de lien par défaut */
  color: rgba(235,245,245,.88) !important;
  text-decoration: none !important;

  font: inherit;
  text-align: left;

  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.contact__item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,120,195,.18);
  background: rgba(8,28,34,.35);
}

/* Icône */
.contact__icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;

  background: rgba(255,120,195,.12);
  border: 1px solid rgba(255,120,195,.22);
  color: rgba(255,120,195,.92);

  flex: 0 0 auto;
  user-select: none;
}

/* Texte */
.contact__label{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button (Discord) : reset propre */
.contact__copy{
  cursor: pointer;
  outline: none;
}

/* Petit hint "Copier" */
.contact__hint{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,245,245,.45);
}

/* Feedback copié */
.contact__copy.is-copied{
  border-color: rgba(120,255,240,.22);
}
.contact__copy.is-copied .contact__hint{
  color: rgba(120,255,240,.85);
}
.contact__copy.is-copied .contact__hint::after{
  content: " ✓";
}
.about__footer{
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(235,245,245,.45);
}