/* =========================================
BASE
========================================= */

#results-page-premium{
  font-family:'Poppins',sans-serif;
  color:#fff;
  background:#000;
}

/* =========================================
BACKGROUND
========================================= */

#results-page-premium .bg{
  padding:110px 20px 80px;

  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 40%),
    radial-gradient(circle at bottom, rgba(180,140,80,0.10), transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.9)),
    url("images/resultats.png");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* overlay optionnel (même style que médiathèque si tu en ajoutes un jour) */
#results-page-premium .bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* =========================================
TITLE (IDENTIQUE À MÉDIATHÈQUE)
========================================= */

.page-title{
  text-align:center;
  margin-bottom:80px;
}

.page-title h1{
  font-size:clamp(3rem,6vw,5rem);
  font-weight:700;

  background:linear-gradient(to bottom,#fff,#d8d8d8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  margin:0;
}

/* =========================================
CONTAINER
========================================= */

#results-page-premium .container{
  max-width:1050px;
  margin:auto;
}

/* =========================================
ACCORDION
========================================= */

#results-page-premium .accordion-item{
  margin-bottom:18px;

  border-radius:26px;
  overflow:hidden;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  transition:.4s ease;
}

#results-page-premium .accordion-item:hover{
  border-color:rgba(255,255,255,0.18);
}

/* HEADER */
#results-page-premium .accordion-header{
  padding:24px 28px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  cursor:pointer;

  font-size:1.3rem;
  font-weight:800;
}

/* ARROW */
#results-page-premium .accordion-header span{
  transition:.3s ease;
  opacity:.7;
}

#results-page-premium .accordion-item.active .accordion-header span{
  transform:rotate(180deg);
  opacity:1;
}

/* CONTENT */
#results-page-premium .accordion-content{
  max-height:0;
  overflow:hidden;

  transition:max-height .7s ease;

  padding:0 20px;
}

#results-page-premium .accordion-item.active .accordion-content{
  max-height:900px;
}

/* GRID */
#results-page-premium .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
  padding:18px 0 28px;
}

/* CARD */
#results-page-premium .card{
  text-align:center;

  padding:28px 18px;
  border-radius:18px;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);

  transition:.35s ease;
  position:relative;
  overflow:hidden;
}

#results-page-premium .card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,0.18);
}

/* IMG */
#results-page-premium .card img{
  width:110px;
  margin-bottom:14px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* BUTTON */
#results-page-premium .btn-result{
  display:inline-block;

  margin-top:10px;
  padding:11px 22px;

  border-radius:999px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);

  color:#fff;
  font-weight:800;
  font-size:.9rem;

  text-decoration:none;

  transition:.3s ease;
}

#results-page-premium .btn-result:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.3);
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

  #results-page-premium .bg{
    background-attachment:scroll;
    padding:80px 16px 60px;
  }

  #results-page-premium .grid{
    display:flex;
    overflow-x:auto;
    gap:14px;
    scroll-snap-type:x mandatory;
  }

  #results-page-premium .card{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}