/* ==========================================================================
   SKYWAY TRAVELERS — page « Nos services »
   Source : NEW LIEN MAQUETTE.xd, plan « Liste services » (1920 × 2831)
   Réutilise style.css (socle) et apropos.css (bandeau + fil d'Ariane).
   ========================================================================== */

.svc-page{
  position:relative; z-index:2;
  height:182.6rem;                                   /* 242 -> 2068 (haut du pied de page) */
  padding-top:13.8rem;                               /* premières cartes a y=380 */
}
.svc-page__deco{
  position:absolute; left:0; top:-7.8rem;            /* XD : (0, 164) 1920 x 907 */
  width:192rem; height:90.7rem;
  max-width:none; pointer-events:none;
}

/* grille 3 x 3 : cartes 519,5 x 585, écarts 40,5 et 33 (XD) */
.svc-grid{
  position:relative;
  width:163.95rem;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3, 51.95rem);
  gap:3.3rem 4.05rem;
}

.svc{
  position:relative;
  height:58.5rem;
  border-radius:1rem;
  overflow:hidden;
  color:#fff;
}
.svc__photo{
  position:absolute; left:-1.6rem; top:-17.1rem;     /* fenêtre du XD dans la photo 551 x 1040 */
  width:55.1rem; height:104rem;
  max-width:none; object-fit:cover;
}
.svc::after{
  content:""; position:absolute; inset:0;
  background:#000; opacity:.404;                     /* voile du XD */
}

.svc__title{
  position:absolute; z-index:2; left:7.2rem; top:6.5rem;
  margin:0;
  font-family:var(--font-body); font-weight:600;
  font-size:3.2rem; line-height:3.3rem;
}
.svc__text{
  position:absolute; z-index:2; left:7.2rem; top:36.3rem;
  width:34rem;
  font-size:1.8rem; line-height:2.5rem;
}
.svc__cta{
  position:absolute; z-index:2; left:7.2rem; top:46.2rem;
  width:29.3rem; height:7.6rem;
  background:transparent; color:#fff;
  box-shadow:inset 0 0 0 .2rem rgba(255,255,255,.9);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .svc-page{ height:auto; padding-bottom:8rem; }
  .svc-page__deco{ display:none; }
  .svc-grid{ width:min(var(--wrap),92%); margin-top:6rem;
             grid-template-columns:repeat(2,1fr); gap:3rem; }
  .svc{ height:52rem; }
  .svc__photo{ left:0; top:0; width:100%; height:100%; }
  .svc__title,.svc__text,.svc__cta{ left:4rem; }
  .svc__text{ top:30rem; width:auto; right:4rem; }
  .svc__cta{ top:40rem; }
}

@media (max-width:767px){
  .svc-grid{ grid-template-columns:1fr; }
}