:root{
  /* Couleurs alignées sur le logo GASI-PUZZLES (noir + or/tan) */
  --gold:        #B8935E;
  --gold-light:  #D4B483;
  --gold-dark:   #8B6F45;
  --black:       #1A1A1A;
  --black-soft:  #2B2B2B;
  --soft:        #FAF7F2;
  --muted:       #7A6A5A;
  --radius:      18px;
  --shadow:      0 10px 40px rgba(26,26,26,.12);
  --grad:        linear-gradient(135deg, #1A1A1A 0%, #2B2B2B 100%);
  --grad-gold:   linear-gradient(135deg, #B8935E 0%, #8B6F45 100%);
}

*{box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--soft); color:var(--black);
  margin:0; padding:0;
}

/* NAV */
.navbar-gasi{
  background:rgba(255,255,255,.92); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(26,26,26,.08);
  padding:.6rem 0; position:sticky; top:0; z-index:1000;
}
.logo-img{ height:60px; width:auto; }
.brand-logo{ padding:0; }
.nav-link{font-weight:500;color:var(--black)!important;transition:.3s}
.nav-link:hover{color:var(--gold)!important}

/* ============================================================
   HERO ANIMÉ
   ============================================================ */
.hero{
  position:relative;
  min-height: 640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  border-radius:0 0 40px 40px;
}

/* Slides en arrière-plan */
.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.4s ease-in-out, transform 8s ease-out;
  transform: scale(1.05);
  will-change: opacity, transform;
}
.hero-slide.active{
  opacity:1;
  transform: scale(1);
}

/* Overlay sombre pour lisibilité */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(135deg, rgba(0,0,0,.72) 0%, rgba(26,26,26,.55) 50%, rgba(184,147,94,.35) 100%);
}

/* Contenu par-dessus */
.hero-content{
  position:relative;
  z-index:2;
  padding: 6rem 0 7rem;
}

.hero h1{
  font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.1;
  text-shadow:0 4px 20px rgba(0,0,0,.4);
}
.hero p{
  opacity:.95;
  font-size:1.15rem;
  max-width:620px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  background:rgba(184,147,94,.25);
  border:1px solid rgba(212,180,131,.4);
  backdrop-filter:blur(10px);
  padding:.5rem 1rem;
  border-radius:100px;
  font-size:.85rem;
  font-weight:500;
  margin-bottom:1.5rem;
  color:var(--gold-light);
}
.hero-badge i{ color: var(--gold-light); }

/* Points indicateurs */
.hero-dots{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.6rem;
  z-index:3;
}
.hero-dot{
  width:32px;
  height:4px;
  border-radius:100px;
  border:none;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  padding:0;
  transition:.35s;
}
.hero-dot.active{
  background:var(--gold-light);
  width:52px;
}
.hero-dot:hover{ background:rgba(212,180,131,.7); }

/* ============================================================
   FILTRES
   ============================================================ */
.filters-bar{
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.25rem;
  margin-top:-3rem; position:relative; z-index:10;
  border:1px solid rgba(184,147,94,.12);
}

/* ============================================================
   CARTES PUZZLES
   ============================================================ */
.puzzle-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  transition:.4s cubic-bezier(.2,.9,.3,1); cursor:pointer;
  border:1px solid rgba(184,147,94,.15); height:100%;
  display:flex; flex-direction:column;
}
.puzzle-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 50px rgba(26,26,26,.18);
  border-color:var(--gold);
}
.puzzle-cover{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(135deg,#F5EBE0,#E8D5B7);
}
.puzzle-cover img{width:100%;height:100%;object-fit:cover;transition:.6s}
.puzzle-card:hover .puzzle-cover img{transform:scale(1.08)}
.badge-theme{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  padding:.35rem .75rem; border-radius:100px;
  font-size:.75rem; font-weight:600; color:var(--black);
  display:flex; align-items:center; gap:.3rem;
}
.badge-country{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.puzzle-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.puzzle-title{font-weight:700;font-size:1rem;margin-bottom:.25rem;color:var(--black)}
.puzzle-meta{font-size:.8rem;color:var(--muted);display:flex;gap:1rem;margin-top:auto}
.qr-badge{
  position:absolute; bottom:12px; right:12px;
  background:var(--grad-gold); color:#fff;
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(184,147,94,.45);
}

/* MODAL */
.modal-content{border-radius:var(--radius);border:none;overflow:hidden}
.modal-gallery img{width:100%;border-radius:12px;margin-bottom:.5rem}
.puzzle-preview-thumb{
  width:70px;height:70px;object-fit:cover;border-radius:12px;
  cursor:pointer;border:3px solid transparent;transition:.3s;
}
.puzzle-preview-thumb.active{border-color:var(--gold)}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-gasi{
  background:var(--grad-gold); color:#fff; border:none;
  padding:.75rem 1.75rem; border-radius:100px;
  font-weight:600; transition:.3s;
}
.btn-gasi:hover{
  transform:translateY(-2px); color:#fff;
  box-shadow:0 10px 28px rgba(184,147,94,.45);
  background:linear-gradient(135deg,#C9A57A 0%,#8B6F45 100%);
}
.btn-outline-gasi{
  border:2px solid var(--gold); color:var(--gold-dark);
  background:transparent; padding:.65rem 1.5rem;
  border-radius:100px; font-weight:600; transition:.3s;
}
.btn-outline-gasi:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* LOADER */
.loader{text-align:center;padding:3rem;color:var(--muted)}
.spinner{
  width:48px;height:48px;border:4px solid rgba(184,147,94,.18);
  border-top-color:var(--gold);border-radius:50%;
  animation:spin 1s linear infinite;margin:0 auto 1rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

.empty-state{text-align:center;padding:4rem 1rem;color:var(--muted)}
.empty-state i{font-size:4rem;opacity:.3;margin-bottom:1rem;display:block}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--black); color:#fff;
  padding:3.5rem 0 1.5rem; margin-top:5rem;
}
footer a{color:rgba(255,255,255,.6);text-decoration:none;transition:.3s}
footer a:hover{color:var(--gold-light)}
.footer-link{ color:rgba(255,255,255,.7); }
.footer-link:hover{ color:var(--gold-light); }
.footer-logo{ filter: brightness(0) invert(1); opacity:.95; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .hero{
    min-height: 560px;
    border-radius:0 0 24px 24px;
  }
  .hero-content{ padding: 4rem 0 5rem; }
  .filters-bar{ margin-top:-2rem; padding:1rem; }
  .logo-img{ height:48px; }
}

@media(max-width:480px){
  .hero{ min-height: 520px; }
  .hero h1{ font-size:1.7rem; }
  .hero p{ font-size:1rem; }
  .hero-dots{ bottom:1.2rem; }
}