/* style.css - main styles */
:root {
    --bg-page: #0f1024;
    --panel: #0f1228;
    --accent: #7d5df0;
    --accent-2: #4aa3ff;
    --muted: #cfcfe6;
    --glass: rgba(255, 255, 255, 0.04);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    background: linear-gradient(180deg, #171751 0%, #0b0b1f 60%, #11102c 100%);
    color: var(--muted);
    -webkit-font-smoothing: antialiased;
}

/* Main container spacing */
.sd-main {
    padding: 0 0 40px;
}

/* Hero */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 56px 5%;
    position: relative;
    overflow: hidden;
}

/* subtle pixel grid background to feel Minecrafty */
.hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -500px;
    width: 900px;
    height: 600px;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 16px 16px;
    transform: rotate(12deg);
    opacity: 0.45;
}

/* Left column */
.hero-left {
    flex: 1;
    max-width: 720px;
}

.hero-left h1 {
    font-size: 40px;
    margin: 0 0 4px 0;
    color: #fff;
    line-height: 1.05;
    font-weight: 800;
}

.hero-left h1 span {
    color: var(--accent);
    text-shadow: 0 2px 14px rgba(125, 93, 240, 0.14);
    font-family: "Press Start 2P", monospace;
    font-size: 36px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* lead paragraph */
.lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    margin: 12px 0 18px 0;
}

/* ===== Image sous les CTA (gauche) — responsive améliorée ===== */
.hero-left-media{
  margin-top: clamp(16px, 3vw, 28px);
  width: 100%;
  max-width: clamp(360px, 40vw, 560px);   /* limite sur grands écrans */
}

.hero-left-media img{
  display: block;
  width: 100%;
  height: auto;                           /* proportions naturelles */
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}


.hero-left-media figcaption{
  font-size: .9rem;
  line-height: 1.4;
  opacity: .8;
  margin-top: 8px;
}

/* CTAs */
.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.sd-btn i { font-size: 14px; }

.sd-btn.primary {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 8px 30px rgba(79, 58, 179, 0.14);
}
.sd-btn.primary:hover { transform: translateY(-2px); }

.sd-btn.ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sd-btn.ghost:hover {
    transform: translateY(-1px);
    color: #ffffff;
}

.sd-btn.large {
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 16px;
}

/* ==================== DROITE (mise à jour) ==================== */
.hero-right {
    flex: 1;
    min-width: 520px;
    display: grid;
    align-content: start;   /* colle en haut */
    justify-items: end;     /* colle à droite */
    gap: 18px;
}

/* Conteneur du mockup + titre/cta : plus large + remonté */
.project-rotator {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: clamp(480px, 48vw, 820px);
    transform: translateY(-28px);   /* remonte le bloc */
}

/* Mockup : largeur 100%, ratio propre */
.mockup {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: linear-gradient(180deg, #0e0f2a, #16163a);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 56px rgba(8, 6, 25, 0.65);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.045);
    transition: transform .45s ease, box-shadow .35s ease;
    cursor: pointer;
}

.mockup:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 72px rgba(8, 6, 25, 0.75);
}

/* Image dans le mockup */
.mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* mets 'contain' si tu veux 0 recadrage */
    display: block;
    opacity: 1;
    transition: opacity .35s ease, transform .45s ease;
}

/* Carte projet sous l'image : rapprochée */
.project-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 820px;
    padding: 10px 6px;
    margin-top: 14px;
}

.project-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 800;
    font-size: 15px;
    display: inline-block;
    background: transparent;
}
.project-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.project-link span#rotator-title {
    font-family: "Press Start 2P", monospace;
    font-size: 14px;
    display: inline-block;
    line-height: 1.05;
}

.project-card strong#rotator-cta {
    font-size: 13px;
    color: #ddd;
    margin-top: 4px;
}

/* ==================== RESPONSIVE ==================== */

/* ↓ Large → Medium */
@media (max-width: 1280px){
  .project-rotator{ width: clamp(440px, 50vw, 720px); transform: translateY(-18px); }
}

/* ↓ Tablet */
@media (max-width: 1024px){
  .hero-right{ min-width: 0; }
  .project-rotator{ width: clamp(380px, 54vw, 640px); transform: translateY(-10px); }

  /* Image gauche : commence à se centrer et se réduire */
  .hero-left-media{ max-width: min(520px, 78vw); margin-left: auto; margin-right: auto; }
}

/* ↓ Small tablets / large phones */
@media (max-width: 800px){
  .project-rotator{ width: 100%; transform: none; }
  .hero-right{ justify-items: stretch; }

  /* CTAs en colonne + plein largeur */
  .hero-ctas{ flex-direction: column; align-items: stretch; }
  .sd-btn{ width: 100%; justify-content: center; }

  /* Image gauche plus compacte et centrée */
  .hero-left-media{ max-width: min(460px, 90vw); margin-left: auto; margin-right: auto; }
}

/* ↓ Phones */
@media (max-width: 640px){
  .hero{ flex-direction: column; align-items: stretch; gap: 32px; }

  .hero-left h1{ font-size: 34px; }
  .hero-left h1 span{ font-size: 28px; }

  .hero-left-media{ max-width: min(400px, 94vw); }
}

/* ↓ Small phones */
@media (max-width: 480px){
  .hero-left-media{ max-width: min(340px, 96vw); }
}







/* Section general */
.section {
    padding: 56px 5%;
}

.section h2 {
    text-align: center;
    font-size: 40px;
    color: #fff;
    margin: 0 0 6px 0;
}

.section .section-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
}

/* Cards grid */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}

/* Card */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 30px rgba(10, 8, 30, 0.5);
    transition: transform .18s ease;
}

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

/* Header icône + titre */
.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    justify-content: center;  /* centre icône + titre */
    text-align: center;       /* aligne le texte si multi-lignes */
}

.card-header h3 {
    margin: 0;
    font-size: 24px;
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
}

.card h3 {
    margin: 0 0 8px 0;
    color: #fff;
}

/* Texte */
.card p {
    margin-top: 6px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.5;
    text-align: center;
}

/* Nouveau visuel : grosse icône centrée (remplace l'ancienne image) */
.card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #21183f, #3b2e8a);
    box-shadow: 0 8px 20px rgba(34, 21, 85, 0.25);
    min-height: 256px;              /* hauteur “carte” agréable */
}

.card-visual i {
    font-size: 96px;                /* taille de l’icône */
    line-height: 1;
    color: #ffffff;
    opacity: 0.9;
    transform: translateZ(0);       /* lissage */
}

/* Lien */
.card .card-link {
    padding: 8px;
    align-self: flex-start;          /* correction: valeur valide */
    text-decoration: underline;
    text-underline-offset: 10px;
    color: whitesmoke;
}

.card .card-link:hover {
    color: white;
}

/* Responsive (inchangé sauf grilles) */
@media (max-width: 1200px) {
    .hero-right { width: 420px; }
    .mockup { height: 360px; max-width: 420px; }
}

@media (max-width: 1100px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    .hero-right { width: 360px; }
    .mockup { height: 300px; max-width: 360px; }
}

@media (max-width: 860px) {
    .hero { flex-direction: column; align-items: center; padding: 36px 5%; }
    .hero-left { order: 1; text-align: center; }
    .hero-right { width: 100%; order: 2; }
    .mockup { height: 240px; max-width: 720px; }
    .project-card { align-items: center; text-align: center; }
    .project-link span#rotator-title { font-size: 13px; }
    .cards { grid-template-columns: 1fr; }
    .hero-left h1 { font-size: 28px; }
}



/* ========= Hero Communauté (style mockup) — VERSION 55% / 45% ========= */
.community-hero{
  padding-top:64px;
  padding-bottom:64px;
}

/* Conteneur : 55% texte / 45% image, gap fluide */
.community-hero-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 5%;
  display:grid;
  grid-template-columns:55% 45%;     /* << split demandé */
  align-items:end;                    /* aligne le bas avec l’illustration */
  gap:clamp(20px,4vw,44px);
}

/* ---- LEFT ---- */
.community-hero-left{
  display:flex;
  flex-direction:column;
  align-items:center;                 /* centre liste + CTA + meta */
}

.community-hero-title{
  margin:0 0 10px 0;
  line-height:1.0;
  font-weight:600;
  font-size:clamp(28px,4.4vw,56px);
  color:#fff;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:center;
  font-family:"Press Start 2P","Minecraftia","VT323",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.community-hero-title span{ display:block; }

/* Liste centrée et alignée sur la même largeur que le texte */
.community-list{
  list-style:none;
  padding:0;
  margin:8px auto 18px auto;
  display:grid;
  gap:8px;
  text-align:center;
  width:clamp(460px,70vw,760px);
}
.community-list li{
  background:rgba(255,255,255,.03);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  font-weight:600;
}

/* CTA principal (violet Discord) */
.discord-primary-cta{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:10px;
  background:#5132c3;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  min-width:240px;
  width:clamp(220px,42vw,360px);
  margin:6px auto 0 auto;
  box-shadow:0 10px 26px rgba(88,101,242,.25);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.discord-primary-cta i{ font-size:18px; }
.discord-primary-cta .arrow{ margin-left:6px; }
.discord-primary-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(88,101,242,.34);
  filter:brightness(1.05);
}

.community-hero-actions{ margin-top:8px; }

/* Ligne méta centrée */
.community-hero-meta{
  margin-top:14px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.community-hero-meta .howto{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:rgba(255,255,255,.95);
  text-decoration:none;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  padding:9px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.community-hero-meta .howto:hover{ background:rgba(255,255,255,.08); }
.community-hero-meta .online{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:rgba(255,255,255,.9);
  font-size:13px;
}
.community-hero-meta .online .pulse{
  width:8px;height:8px;border-radius:50%;
  background:#a78bfa;
  box-shadow:0 0 0 0 rgba(167,139,250,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(167,139,250,.6); }
  70%{ box-shadow:0 0 0 10px rgba(167,139,250,0); }
  100%{ box-shadow:0 0 0 0 rgba(167,139,250,0); }
}

/* ---- RIGHT (image) ---- */
.community-hero-right{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  padding-bottom:clamp(2px,.8vw,12px);
}
.community-hero-right::after{
  content:"";
  position:absolute;
  inset:auto 14% 0 14%;
  height:18px;
  border-radius:100%;
  background:radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0));
  pointer-events:none;
}

/* image : jamais upscalée, aucun recadrage/zoom */
.community-hero-art{
  max-width:min(720px,100%);   /* autorise un peu plus large si dispo */
  width:auto; height:auto; display:block;
  image-rendering:pixelated;    /* rendu net façon Minecraft */
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

/* ====== Responsive ====== */
@media (max-width:1100px){
  .community-hero-inner{
    grid-template-columns:1fr;        /* pile : image au-dessus */
    align-items:center;
    text-align:center;
  }
  .community-hero-right{ order:-1; padding-bottom:0; }
  .community-hero-right::after{ inset:auto 20% 0 20%; }
  .community-hero-art{ max-width:min(520px,100%); }
}

@media (max-width:640px){
  .community-hero{ padding-top:48px; padding-bottom:48px; }
  .community-hero-title{ font-size:clamp(24px,8vw,40px); }
  .community-hero-sub,
  .community-list{ width:100%; }
  .community-list li{ padding:11px 12px; }
  .community-hero-meta{ flex-direction:column; gap:10px; }
  .discord-primary-cta{ width:100%; }
}








/* ===================== FAQ styles ===================== */
.faq {
    padding: 36px 6% 64px;
}

.faq-inner {
    max-width: 1720px;
    margin: 0 auto;
    text-align: center;
}

.faq h2 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.6px;
}

.faq-intro {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    font-size: 15px;
    text-align: center;
}

/* list */
.faq-list {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

/* each item */
.faq-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.005));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* question button */
.faq-q {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, transform .12s ease;
}

/* Bouton de question en ligne avec icône à gauche et chevron à droite */
.faq-q{
  display:flex;
  align-items:center;
  gap:10px;              /* espace entre l’icône et le texte */
  width:100%;
}

/* L’icône de chevron reste poussée à droite */
.faq-q .q-icon{
  margin-left:auto;
  display:inline-flex;
}

/* Image décorative à gauche de la question */
.faq-q .q-img{
  width:22px;
  height:22px;
  flex:0 0 22px;         /* évite le shrink */
  object-fit:contain;
  image-rendering:auto;
}

.faq-q:focus {
    outline: 3px solid rgba(125, 93, 240, 0.16);
    outline-offset: 3px;
}

/* question text */
.q-text {
    display: block;
    font-weight: 800;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

/* chevron */
.q-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    color: rgba(255, 255, 255, 0.95);
    transition: transform .22s cubic-bezier(.2, .9, .2, 1);
}

/* answer block — collapsed by default with max-height transition */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .36s cubic-bezier(.2, .9, .2, 1), padding .28s ease;
    padding: 0 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
}

.faq-a p {
    margin: 14px 0 22px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    font-size: 15px;
}

/* when expanded — we add a class via JS (.open) */
.faq-item.open .faq-a {
    max-height: 1720px;
    /* sufficiently large for expected content */
    padding: 12px 18px 20px;
}

.faq-item.open .q-icon {
    transform: rotate(180deg);
}

/* responsive */
@media (min-width: 760px) {
    .faq-list {
        grid-template-columns: 1fr;
        /* two columns on desktop */
        gap: 16px;
    }
}

@media (max-width: 760px) {
    .faq-list {
        grid-template-columns: 1fr;
    }

    .q-text {
        font-size: 15px;
    }
}