/* ==========================================================================
   SELECTIONS — PAGE FILTRÉE
   (grille projets + hover identique bandeau)
   ========================================================================== */

/* =========================
   0) VARIABLES (fallback si pas déjà global)
   ========================= */
   :root{
    --stancreation-bandeau-gap: clamp(.25rem, .6vw, .6rem);
    --stancreation-image-bandeau-height: clamp(30rem, 60vh, 52rem);
  
    --stancreation-bandeau-ease: cubic-bezier(.22, .61, .36, 1);
    --stancreation-bandeau-dur: .55s;
  
    --stancreation-bandeau-hover-voile: rgba(255, 255, 255, .75);
  
    --stancreation-bandeau-titre-font: "Poppins", system-ui, sans-serif;
    --stancreation-bandeau-titre-size: clamp(1.4rem, 2.8vw, 2.4rem);
    --stancreation-bandeau-titre-weight: 500;
    --stancreation-bandeau-titre-letter: -0.05em;
    --stancreation-bandeau-titre-color: #000;
  
    --stancreation-selections-gap: clamp(.8rem, 1.4vw, 1.3rem);
    --stancreation-selections-w-closed: calc((100% - (var(--stancreation-selections-gap) * 4)) / 5);
    --stancreation-selections-w-open: calc((var(--stancreation-selections-w-closed) * 2) + var(--stancreation-selections-gap));
  }
  
  /* =========================
     1) WRAPPER
     ========================= */
  .stancreation-selections{
    position: relative;
    z-index: 2;
  }
  
  /* =========================
     2) HERO
     ========================= */
  .stancreation-selections-hero{
    padding: 10% 13% 0 13%;
  }
  
  .stancreation-selections-hero-contenu{
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .stancreation-selections-titre{
    margin: 0 0 1.2rem 0;
    text-align: center;
  }
  
  .stancreation-selections-hero-svg{
    margin: 0 auto clamp(1.6rem, 3vw, 2.6rem) auto;
    max-width: var(--container);
  }
  
  .stancreation-selections-hero-svg svg{
    display: block;
    width: 100%;
    height: auto;
  }
  
  .stancreation-selections-texte{
    margin: 0 auto 4% auto;
    max-width: 70ch;
    text-align: center;
  }
  
  /* =========================
     3) FILTRES
     ========================= */
  .stancreation-selections-filtres{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.4rem);
    margin: 0 auto 5% auto;
    width: fit-content;
    max-width: 100%;
  }
  
  .stancreation-selections-filtre{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
  
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(.95rem, 1.1vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0;
    color: #000;
  
    padding: .2rem 0;
    position: relative;
  }
  
  .stancreation-selections-filtre::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -.15rem;
    width: 100%;
    height: .30rem;
    background: currentColor;
  
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  
  .stancreation-selections-filtre:hover::after,
  .stancreation-selections-filtre.is-active::after{
    transform: scaleX(1);
  }
  
  /* =========================
     4) SECTION + CONTENEUR
     ========================= */
  .stancreation-selections-section{
    padding: 0 13% 10% 13%;
  }
  
  .stancreation-selections-contenu{
    max-width: var(--container);
    margin: 0 auto;
  }
  
  /* =========================
     5) GRILLE (fallback)
     ========================= */
  .stancreation-selections-grille{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--stancreation-selections-gap);
    justify-content: center;
    align-content: start;
  }
  
  /* =========================
     6) CARTE — HOVER “BANDEAU”
     ========================= */
  .stancreation-selections-carte{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
  
    width: 100%;
    height: var(--stancreation-image-bandeau-height);
  
    text-decoration: none;
    color: inherit;
  
    grid-column: span 1;
  }
  
  .stancreation-selections-visuel{
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  
  /* image */
  .stancreation-selections-img{
    position: absolute;
    inset: 0;
    z-index: 1;
  
    width: 100%;
    height: 100%;
    object-fit: cover;
  
    filter: none;
    transform: scale(1.001);
    transition: transform .35s ease;
  }
  
  /* voile AU-DESSUS image (SANS transform) */
  .stancreation-selections-visuel::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
  
    background: var(--stancreation-bandeau-hover-voile);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  
  /* texte overlay */
  .stancreation-selections-texte-carte{
    position: absolute;
    inset: 0;
    z-index: 3;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  
    pointer-events: none;
  
    opacity: 0;
    transform: scale(.985);
    transition: opacity .35s ease, transform .35s ease;
  }
  
  .stancreation-selections-texte-carte > *{
    display: block;
  }
  
  /* titre */
  .stancreation-selections-nom{
    margin: 0;
    font-family: var(--stancreation-bandeau-titre-font);
    font-size: var(--stancreation-bandeau-titre-size);
    font-weight: var(--stancreation-bandeau-titre-weight);
    letter-spacing: var(--stancreation-bandeau-titre-letter);
    color: var(--stancreation-bandeau-titre-color);
    line-height: 1.05;
  }
  
  /* badges */
  .stancreation-selections-prestations{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .45rem;
    margin: 1rem 0 .55rem 0;
  }
  
  .stancreation-selections-prestation{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: .28rem .55rem;
    border: 1px solid #000;
    border-radius: clamp(.8rem, 1.4vw, 1.2rem);
  
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(.68rem, .85vw, .82rem);
    font-weight: 500;
    color: #000;
  
    text-transform: none !important;
    letter-spacing: 0;
  }
  
  /* secteur / année */
  .stancreation-selections-secteur{
    margin: 0.5rem 4rem 0.5rem 4rem;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(.78rem, .95vw, .95rem);
    font-weight: 300;
    color: #000;
  }
  
  .stancreation-selections-annee{
    margin-top: .2rem;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(.72rem, .9vw, .9rem);
    font-weight: 500;
    color: #000;
  }
  
  /* hover / active */
  .stancreation-selections-carte:hover,
  .stancreation-selections-carte.is-active{
    z-index: 10;
  }
  
  .stancreation-selections-carte:hover .stancreation-selections-img,
  .stancreation-selections-carte.is-active .stancreation-selections-img{
    transform: scale(1.02);
  }
  
  .stancreation-selections-carte:hover .stancreation-selections-visuel::after,
  .stancreation-selections-carte.is-active .stancreation-selections-visuel::after{
    opacity: 1;
  }
  
  .stancreation-selections-carte:hover .stancreation-selections-texte-carte,
  .stancreation-selections-carte.is-active .stancreation-selections-texte-carte{
    opacity: 1;
    transform: scale(1);
  }
  
  /* masquage filtre */
  .stancreation-selections-carte.is-hidden{
    display: none;
  }
  
  /* =====================================================================
     7) MODE “LIGNES CONTROLÉES” (si JS wrappe en .ligne/.piste)
     ===================================================================== */
  .stancreation-selections-grille:has(.stancreation-selections-ligne){
    display: block;
  }
  
  .stancreation-selections-ligne{
    width: 100%;
    overflow: hidden;
    margin: 0 0 var(--stancreation-selections-gap) 0;
  }
  
  .stancreation-selections-ligne-piste{
    display: flex;
    gap: var(--stancreation-selections-gap);
    width: 100%;
    transform: translateX(0);
    transition: transform var(--stancreation-bandeau-dur) var(--stancreation-bandeau-ease);
    will-change: transform;
  }
  
  .stancreation-selections-ligne .stancreation-selections-carte{
    flex: 0 0 var(--stancreation-selections-w-closed);
    width: var(--stancreation-selections-w-closed);
    grid-column: unset !important;
  
    transition:
      flex-basis var(--stancreation-bandeau-dur) var(--stancreation-bandeau-ease),
      width var(--stancreation-bandeau-dur) var(--stancreation-bandeau-ease);
  }
  
  .stancreation-selections-ligne .stancreation-selections-carte:hover,
  .stancreation-selections-ligne .stancreation-selections-carte.is-active{
    flex-basis: var(--stancreation-selections-w-open);
    width: var(--stancreation-selections-w-open);
  }
  
  .stancreation-selections-ligne.is-shift-left .stancreation-selections-ligne-piste{
    transform: translateX(calc(-1 * (var(--stancreation-selections-w-closed) + var(--stancreation-selections-gap))));
  }
  
  /* =========================
     8) RESPONSIVE (<= 900px)
     ========================= */
  @media (max-width: 900px){
  
    .stancreation-selections-hero{
      padding: 20% 13% 0 13%;
    }
  
    .stancreation-selections-section{
      padding: 0 8% 12% 8%;
      margin-top: 10%;
    }
  
    .stancreation-selections-filtres{
      margin-top: 10%;
    }
  
    /* 1 carte par ligne */
    .stancreation-selections-grille{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: clamp(.9rem, 3vw, 1.2rem) !important;
    }
  
    /* neutralise le mode lignes si présent */
    .stancreation-selections-ligne,
    .stancreation-selections-ligne-piste{
      all: unset;
    }
  
    .stancreation-selections-carte{
      width: 100% !important;
      height: clamp(14rem, 34vh, 20rem) !important;
      grid-column: auto !important;
    }
  
    /* mobile : voile + texte toujours lisibles */
    .stancreation-selections-visuel::after{
      opacity: 1 !important;
      background: rgba(255,255,255,.70) !important;
    }
  
    .stancreation-selections-texte-carte{
      opacity: 1 !important;
      transform: none !important;
    }
  
    .stancreation-selections-img{
      transform: scale(1.02) !important;
    }
  
    .stancreation-selections-nom{
      font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }
  
    .stancreation-selections-prestation{
      font-size: clamp(.65rem, 2.6vw, .82rem) !important;
      padding: .28rem .55rem !important;
      margin-top: 5%;
    }
  
    .stancreation-selections-secteur{
      font-size: clamp(.65rem, 2.6vw, .82rem) !important;
    }
  
    .stancreation-selections-annee{
      font-size: clamp(.6rem, 2.4vw, .75rem) !important;
    }
  }
  
  /* =========================
     9) ACCESSIBILITÉ / MOTION
     ========================= */
  @media (prefers-reduced-motion: reduce){
    .stancreation-selections-img,
    .stancreation-selections-visuel::after,
    .stancreation-selections-texte-carte{
      transition: none !important;
    }
  }

  /* ==========================================================================
   SELECTIONS — RÉVÉLATION DU CONTENU (comme PROJETS bandeau)
   - Stagger : nom -> badges -> secteur -> année
   - Blur + translate + delay pour laisser le hover “s’installer”
   ========================================================================== */

/* base : overlay global */
.stancreation-selections-texte-carte{
  opacity: 0;
  transform: translateY(.6rem) scale(.985);
  filter: blur(6px);
  transition:
    opacity .35s ease,
    transform .45s var(--stancreation-bandeau-ease),
    filter .45s ease;
  transition-delay: 0s;
  will-change: opacity, transform, filter;
}

/* base : éléments internes (stagger) */
.stancreation-selections-nom,
.stancreation-selections-prestations,
.stancreation-selections-secteur,
.stancreation-selections-annee{
  opacity: 0;
  transform: translateY(.5rem);
  filter: blur(6px);
  transition:
    opacity .35s ease,
    transform .45s var(--stancreation-bandeau-ease),
    filter .45s ease;
  will-change: opacity, transform, filter;
}

/* delays progressifs */
.stancreation-selections-nom{ transition-delay: .18s; }
.stancreation-selections-prestations{ transition-delay: .28s; }
.stancreation-selections-secteur{ transition-delay: .36s; }
.stancreation-selections-annee{ transition-delay: .42s; }

/* état hover / active : on montre l’overlay */
.stancreation-selections-carte:hover .stancreation-selections-texte-carte,
.stancreation-selections-carte.is-active .stancreation-selections-texte-carte{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);

  /* synchro avec les transitions hover (comme projets) */
  transition-delay: calc(var(--stancreation-bandeau-dur) * 0.55);
}

/* état hover / active : on révèle chaque élément */
.stancreation-selections-carte:hover .stancreation-selections-nom,
.stancreation-selections-carte.is-active .stancreation-selections-nom,
.stancreation-selections-carte:hover .stancreation-selections-prestations,
.stancreation-selections-carte.is-active .stancreation-selections-prestations,
.stancreation-selections-carte:hover .stancreation-selections-secteur,
.stancreation-selections-carte.is-active .stancreation-selections-secteur,
.stancreation-selections-carte:hover .stancreation-selections-annee,
.stancreation-selections-carte.is-active .stancreation-selections-annee{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* mobile : pas de hover, donc lisible direct (tu avais déjà ça) */
@media (max-width: 900px){
  .stancreation-selections-texte-carte,
  .stancreation-selections-nom,
  .stancreation-selections-prestations,
  .stancreation-selections-secteur,
  .stancreation-selections-annee{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .stancreation-selections-prestations {
    margin-top: 0.5rem;
  }
}

/* réduit motion */
@media (prefers-reduced-motion: reduce){
  .stancreation-selections-texte-carte,
  .stancreation-selections-nom,
  .stancreation-selections-prestations,
  .stancreation-selections-secteur,
  .stancreation-selections-annee{
    transition: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}