.sosc-hs {     margin: 60px 0 100px; text-align:center; }
.sosc-hs__badge { 
    display:inline-block; 
    background:#eef6e5;
     padding: 8px 10px 8px 10px;
    border-radius: 8px 8px 8px 8px;
    font-size:12px; 
    margin-bottom:20px; 
}
.sosc-hs__title {    
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 80px;
        line-height: 48px;
}
.sosc-hs__head{max-width: 750px;margin:0 auto}


.sosc-hs-element1, .sosc-hs-element-title{
  display:flex;
  flex-direction: row;
  justify-content: center;
}


.sosc-hs-icone{
      position: absolute;
    display: block;
    transform: translate(217px, 0px);
}
.sosc-hs-line-title{
      position: absolute;
    display: block;
    transform: translate(145px, 40px);
}

.sosc-hs-img-ctc{
    position: absolute;
    display: block;
    transform: translate(350px, 20px);
}
.sosc-hs__cards {
    display: grid;
    justify-content: center;

    flex-wrap: wrap;
    margin-bottom: 60px;
    grid-template-columns: repeat(5, 1fr);

}

/* carte inclinée */
.sosc-hs__card{
  position: relative;
  width: 220px; height: 300px;
  border-radius: 12px; overflow: hidden;
  transform: rotate(var(--rot, 0deg)) translate(var(--x), var(--y))  translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  will-change: transform;
  transform-origin: center center;
}

/* au survol (ou focus clavier) => on scale la carte ENTIEREMENT,
   on garde exactement la même rotation */
.sosc-hs__card:hover,
.sosc-hs__card:focus-within{
  transform: rotate(var(--rot, 0deg)) scale(1.06)  translate(var(--x), var(--y)) ;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  z-index: 3; /* passe au-dessus des voisines pendant le scale */
}

/* l’image reste 100% de la carte, pas d’animation propre */
.sosc-hs__img{
  width:100%; height:100%;
  object-fit: cover; display:block;
  transform: none; transition: none;
}

/* titre inchangé */
.sosc-hs__card-title{
  position:absolute; left:16px; bottom:16px;
  color:#fff; font-weight:600; font-size:18px;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  pointer-events:none;
}

/* optionnel: réduire l’effet sur mobile pour éviter les chevauchements */
@media (hover:none) and (pointer:coarse){
  .sosc-hs__card:hover,
  .sosc-hs__card:focus-within{
    transform: rotate(var(--rot, 0deg)) scale(1.02);
  }
}


.sosc-hs__cta { display:flex; justify-content:center; align-items:center; gap:12px; }
.sosc-hs__btn {
  background:#ed8210; color:#fff; 
     font-size: 14px;
    border-radius: 8px 8px 8px 8px;
    padding: 24px 30px 24px 30px;
}
.sosc-hs__btn:hover { background:#ed8210;color:#fff;  }
.sosc-hs__note { font-style:italic; color:#e3a600; font-size:16px; }