/* =========================================
   09 - NOS SPECTACLES
========================================= */

.nsPage{
  background: var(--ruggieri-deep);
  color: var(--ruggieri-white);
}

/* Section fullwidth avec fond slider */
.nsHeroBg{
  position: relative;
  overflow: hidden;
  padding: 70px 0 90px;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,255,255,0.04),
      rgba(0,0,0,0) 60%
    ),
linear-gradient(
  to bottom,
  #000000 0%,
  #101010 30%,
  #1e1e1e 60%,
  #0a0a0a 85%,
  #000000 100%
);


  color: var(--ruggieri-white);
}

.nsHeroBg::before{
  content:"";
  position:absolute;
  inset: -18%;

  background: linear-gradient(
    135deg,
    #d5b66a 0%,
    #bd9e57 35%,
    #8b7647 70%,
    #796840 100%
  );

  -webkit-mask: url("img/embleme_ruggieri.svg") center / contain no-repeat;
          mask: url("img/embleme_ruggieri.svg") center / contain no-repeat;

  opacity: 0.10; /* 👈 un poil baissé */
  filter:
    blur(1.2px)                 /* 👈 diffusion douce */
    drop-shadow(0 0 16px rgba(189,158,87,0.20));

  pointer-events: none;
  z-index: 0;
}

.nsHeroBg::after{
  content:"";
  position:absolute;
  inset: -18%;

  background: linear-gradient(
    135deg,
    #bd9e57 0%,
    #796840 100%
  );

  -webkit-mask: url("img/embleme_ruggieri.svg") center / contain no-repeat;
          mask: url("img/embleme_ruggieri.svg") center / contain no-repeat;

  opacity: 0.08; /* 👈 légèrement réduit */
  filter: blur(3px);

  pointer-events: none;
  z-index: 0;
}


/* Wrap au-dessus du fond */
.nsWrap{
  position: relative;
  z-index: 1;
}



/* Grille 7 cartes : 4 + 3 */
.nsGrid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

/* Base : petites cartes => 4 par ligne */
.nsGrid .sCard{
  grid-column: span 3;
}

/* Les 3 premières deviennent grandes => 3 sur la 1ère ligne */
.nsGrid .sCard:nth-child(-n+3){
  grid-column: span 4;
}


/* Responsive : 2 colonnes */
@media (max-width: 1100px){
  .nsHeroBg{
    min-height: auto;
    padding: 54px 0 78px;
  }

  .nsGrid{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
  }
  .nsGrid .sCard,
  .nsGrid .sCard:nth-child(n+5){
    grid-column: span 6;
  }
}

/* Mobile : 1 colonne */
@media (max-width: 640px){
  .nsGrid .sCard,
  .nsGrid .sCard:nth-child(n+5){
    grid-column: span 12;
  }
}

/* =========================================
   Cartes (héritées + ajustées pour être + grandes)
   - on utilise .sCard--ns pour éviter d’impacter l’accueil
========================================= */

.sCard--ns{
  /* + grandes que l’index */
  aspect-ratio: 5 / 6;
  border-radius: 26px;
}

/* Légère montée + shadow un peu plus premium */
.sCard--ns{
  box-shadow: 0 22px 70px rgba(0,0,0,0.42);
}
.sCard--ns:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 95px rgba(0,0,0,0.50);
}

/* Zoom image un poil plus doux */
.sCard--ns::before{
  transition:
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter .45s ease;
}
.sCard--ns:hover::before{
  transform: scale(1.07);
}

/* Label un chouia plus lisible */
.sCard--ns .sCard__label{
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
}

/* Overlay : on garde ton design, juste un peu plus clean */
.sCard--ns .sCard__overlay{
  background: rgba(0,0,0,0.64);
}

/* CTA : un peu plus présent */
.sCard--ns .sCard__overlayCta{
  padding: 11px 16px;
  letter-spacing: .20em;
}

/* Mobile : ratio plus “banner” */
@media (max-width: 640px){
  .sCard--ns{
    aspect-ratio: 16 / 10;
    border-radius: 20px;
  }
}



@media (max-width: 1100px){
  .nsGrid{
    gap: 16px;
  }

  /* IMPORTANT : on annule l’effet "3 grandes" */
  .nsGrid .sCard,
  .nsGrid .sCard:nth-child(-n+3){
    grid-column: span 6;
  }
}

@media (max-width: 640px){
  .nsGrid .sCard,
  .nsGrid .sCard:nth-child(-n+3){
    grid-column: span 12;
  }

  /* 👇 on redonne de la hauteur aux cartes */
  .sCard--ns{
    aspect-ratio: 1 / 1;   /* plus vertical, plus lisible */
    border-radius: 18px;
  }
}
/* Respiration sous la grille – desktop */
@media (min-width: 1101px){
  .nsHeroBg{
    padding-bottom: 140px; /* 👈 augmente l’air sous les cartes */
  }
}