/* ==========================================================================
   SKYWAY TRAVELERS — page « Devenir partenaire skyway »
   Source : NEW LIEN MAQUETTE.xd, plan « NOS SERVICES » (1920 × 2923)
   Réutilise style.css (socle) et apropos.css (bandeau + fil d'Ariane).
   ========================================================================== */

.phero--partner{
  background:url("../images/pt-hero.webp") center -53.5rem / 192rem auto no-repeat;
}
.crumb--wide{ left:71.4rem; width:49.2rem; }        /* XD : (714, 191) 492x140 */

/* ==========================================================================
   LES 3 NIVEAUX        section : 242 -> 2164
   ========================================================================== */
.tiers-page{
  position:relative;
  z-index:2;                 /* le pied de page porte z-index:1 : sans cela il
                                recouvrirait le bas du bloc Ambassador (photos
                                et bouton), qui déborde volontairement dans la
                                zone vide de 286 px en haut du footer (XD). */
  height:192.2rem;
}

/* fond bleuté du bloc Navigator (XD : -5, 984, 1031 x 630) */
.tiers-page__bg{
  position:absolute; left:-.5rem; top:74.2rem;
  width:103.1rem; height:63rem;
  background:#F8FAFF;
}
.tiers-page__map{
  position:absolute; left:90.7rem; top:9.7rem;
  width:117.8rem; height:66.4rem;
  max-width:none; opacity:.9; pointer-events:none;
}

.deco--lib5   { position:absolute; left:1.3rem;   top:97.9rem;  width:14.08rem; height:39.35rem; }
.deco--stamps { position:absolute; left:69.22rem; top:125.05rem; width:13.77rem; height:18.22rem; }
.deco--cam5   { position:absolute; left:1.3rem;   top:196.2rem; width:15.01rem; height:12.25rem; }
.deco--route5 { position:absolute; left:163.79rem; top:164.45rem; width:31.74rem; height:25.06rem; }

/* ---------- photos ---------- */
.pt-photo{
  position:absolute;
  max-width:none;
  object-fit:cover;
  border-radius:2rem;
}
.pt-c1{ left:27.5rem; top:10.4rem; width:31.1rem; height:29.9rem; }
.pt-c2{ left:60.5rem; top:10.4rem; width:31.2rem; height:54.5rem; }
.pt-c3{ left:27.5rem; top:41.9rem; width:31.1rem; height:23rem; }

.pt-n1{ left:101.8rem; top:74.2rem; width:90.2rem; height:63rem; border-radius:0; }
.pt-tilt{
  position:absolute; left:91.189rem; top:86.582rem; margin:0;
  width:31.1rem; height:36.6rem;
  transform:rotate(14deg); transform-origin:0 0;
  border:.6rem solid #fff; border-radius:1rem;
  box-shadow:0 .6rem 2.4rem rgba(7,48,100,.18);
}
.pt-tilt img{
  width:100%; height:100%; max-width:none;
  object-fit:cover; border-radius:.6rem;
  border:.2rem solid #fff;
}

.pt-a1{ left:-3.6rem; top:142.7rem; width:59.3rem; height:51.1rem; }
.pt-a2{ left:35.9rem; top:161.2rem; width:56.9rem; height:43.6rem; }

/* ---------- carte d'un niveau ---------- */
.tier-card{ position:absolute; }
.tier-card .title{ display:flex; align-items:center; gap:1.4rem; }
.tier-card .title .ico{ width:3.2rem; height:3.2rem; color:var(--red); }
.tier-card .btn{ margin-top:3.4rem; }

/* Les intitulés doivent rester DANS la largeur de leur carte : apropos.css
   (chargé après style.css sur cette page) applique « height:4.6rem » et
   « white-space:nowrap » à .checks li, à spécificité égale de .checks--wide li.
   Les lignes partaient donc en une seule ligne par-dessus les photos
   (Navigator, Ambassador). On remonte la spécificité ici, dans la feuille
   de la page, plutôt que de toucher une feuille partagée. */
.tier-card .checks li{
  height:auto;
  min-height:4.5rem;
  white-space:normal;
  align-items:flex-start;
  overflow-wrap:anywhere;                   /* garde-fou : aucun mot ne déborde */
}
.tier-card .checks li .ico{ margin-top:1rem; flex:none; }

/* Connector : carte blanche posée sur le décor (XD : 1095, 404, 546 x 356) */
.tier-card--connector{
  left:109.5rem; top:16.2rem;
  width:54.6rem; min-height:35.6rem;
  background:#fff; border-radius:2rem;      /* blanc sur blanc dans le XD : pas d'ombre */
  padding:1.9rem 2.5rem 2.5rem 4.4rem;
}
.tier-card--connector .checks--wide{ margin-top:3.2rem; margin-left:0; }

.tier-card--navigator{ left:31.3rem; top:84.4rem; width:44rem; }
.tier-card--navigator .checks--wide{ margin-top:3.4rem; margin-left:0; }

.tier-card--ambassador{ left:111.1rem; top:151.5rem; width:52rem; }
.tier-card--ambassador .checks--wide{ margin-top:3.4rem; margin-left:0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .tiers-page{
    height:auto; padding:6rem 0 8rem;
    width:min(var(--wrap),92%); margin-inline:auto;
    display:grid; gap:6rem;
  }
  .tiers-page__bg,.tiers-page__map,.deco--lib5,.deco--stamps,
  .deco--cam5,.deco--route5,.pt-tilt{ display:none; }

  .pt-photo{ position:relative; left:auto; top:auto; width:100%; height:26rem; }
  .pt-c2,.pt-c3,.pt-a2{ display:none; }

  .tier-card{ position:relative; left:auto; top:auto; width:100%; }
  .tier-card--connector{ padding:3rem; }
}

@media (max-width:767px){
  .crumb--wide{ width:min(49.2rem,92%); }
  .crumb--wide .crumb__title{ font-size:2.2rem; text-align:center; }
}