/* ==========================================================================
   SKYWAY TRAVELERS — gabarit commun des fiches service
   Source : NEW LIEN MAQUETTE.xd, plans « Liste services – 6 » à « – 9 »
   Réutilise style.css (socle) et apropos.css (bandeau + fil d'Ariane).
   Chaque fiche règle ensuite ses propres coordonnées.
   ========================================================================== */

.fiche{ position:relative; z-index:2; }   /* les logos débordent sur le pied de page */

/* sur ces fiches la barre rouge est 4 px au-dessus de la ligne de base (XD) */
.fiche .title--sm{ line-height:3.9rem; }
.fiche .title--sm .title__line::before{ top:2.6rem; }

/* ---------- colonne de texte ---------- */
.fiche__text{ position:absolute; left:27.5rem; width:63.5rem; }
.fiche__text p{
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
  margin-bottom:3rem;
}
.fiche__text .title{ margin-top:8.6rem; margin-bottom:1.8rem; }
.fiche__text .btn{ margin-top:2.1rem; }

/* ---------- photos en gélule (rayon 198, cadre rouge décalé) ---------- */
.fiche .pill--a img,
.fiche .pill--b img{ max-width:none; }

/* ---------- mosaïque ---------- */
.mosaic{ position:absolute; left:0; right:0; }
.mosaic img{
  position:absolute;
  max-width:none;
  object-fit:cover;
  border-radius:2rem;
}

/* ---------- bandeau de logos ---------- */
.logos{ position:absolute; left:0; right:0; }
.logos img{
  position:absolute;
  width:19.3rem; height:12.9rem;
  max-width:none;
  object-fit:contain;
}

/* ---------- décors ---------- */
.deco--route6 { position:absolute; left:-3.48rem; top:3.02rem;  width:26.8rem;  height:32.36rem; }
.deco--stamps6{ position:absolute; left:-1.6rem;  top:60.8rem;  width:13.77rem; height:18.22rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .fiche{ height:auto !important; padding:5rem 0 7rem; }
  .fiche__text{ position:static; width:min(var(--wrap),92%); margin-inline:auto; }
  .fiche .pill,.deco--route6,.deco--stamps6{ display:none; }

  .mosaic,.logos{ position:static; width:min(var(--wrap),92%); margin:5rem auto 0; }
  .mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
  .mosaic img{ position:static; width:100%; height:22rem; }
  .logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:2rem 3rem; }
  .logos img{ position:static; }
}

@media (max-width:767px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic img{ height:16rem; }
  .logos img{ width:14rem; height:9rem; }
}
