/* ==========================================================================
   SKYWAY TRAVELERS — page « Notre identité »
   Source : NEW LIEN MAQUETTE.xd, plan « A PROPOS » (1920 × 3510)
   Complète style.css : mêmes unités (1rem = 10px à 1920), même design system.
   ========================================================================== */

/* ---------- bandeau de page (photo courte + fil d'Ariane) ---------- */
.phero{
  position:relative; z-index:20;
  margin-top:-6rem;                                 /* la photo passe sous la barre de contact */
  height:24.2rem;                                   /* photo 1920x274 posée a y=-32 */
  background:url("../images/hero-1.webp") center -53.5rem / 192rem auto no-repeat;
  color:#fff;
}
/* Voile sombre : sur une photo claire, le menu blanc devenait illisible.
   Le dégradé est plus dense en haut, là où se trouvent le logo et le menu,
   et s'efface vers le bas pour ne pas ternir la photo. */
.phero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.24) 100%);
  pointer-events:none;
}

.phero .nav{ top:calc(4.7rem + var(--nav-gap)); }
.phero .langs{ top:16.1rem; }                       /* XD : cadre a y=161 */

.crumb{
  position:absolute; left:77.4rem; top:19.1rem; z-index:14;
  width:37.2rem; height:14rem;
  background:#fff; border-radius:2rem;
  box-shadow:0 .6rem 2.4rem rgba(7,48,100,.12);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding-top:3.4rem;
}
.crumb__title{
  margin:0;
  display:flex; align-items:center; gap:1.2rem;
  font-family:var(--font-title); font-weight:600; font-size:2.9rem; line-height:2.5rem;
  letter-spacing:-.01em;
}
.crumb__title .ico{ width:2.2rem; height:2.2rem; color:var(--red); }
.crumb__path{
  display:flex; align-items:center; gap:.9rem;
  margin-top:2.1rem;
  font-family:var(--font-title); font-size:1.7rem; line-height:1.5rem;
  color:var(--ink);
}
.crumb__path .ico{ width:1.6rem; height:1.6rem; }
.crumb__path a:hover{ color:var(--red); }
.crumb__path [aria-current]{ color:var(--red); }

/* ---------- variante de titre 40 px (barre sous la ligne de base) ---------- */
.title--sm{ font-size:4rem; line-height:3rem; }
.title--sm .title__line::before{ top:4.7rem; }

/* ==========================================================================
   NOTRE IDENTITÉ
   ========================================================================== */
.ident{
  position:relative;
  height:94.6rem;                                   /* 242 -> 1188 */
}
.ident__intro{
  position:absolute; left:27.8rem; top:12.1rem;
  width:60rem;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}
.ident__col{ position:absolute; width:36rem; }
.ident__col--a{ left:27.8rem; top:35.3rem; }
.ident__col--b{ left:67.5rem; top:35.3rem; }
.ident__col p{
  margin-top:2.6rem;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}

/* photos en gélule : rayon 198 px, cadre rouge décalé (XD) */
.pill{ position:absolute; margin:0; }
.pill::before{
  content:""; position:absolute;
  width:35.9rem; height:75.8rem;
  border:.2rem solid var(--red);
  border-radius:19.8rem;
}
.pill img{
  position:absolute;
  max-width:none;
  border-radius:19.8rem;
  object-fit:cover;
}
.pill--a{ left:109.5rem; top:4.5rem; }              /* cadre a y=287 (242 + 45) */
.pill--a::before{ left:0; top:0; }
.pill--a img{ left:1.8rem; top:1.4rem; width:34.5rem; height:73rem; }
.pill--b{ left:150.1rem; top:10.1rem; }             /* cadre a y=343 */
.pill--b::before{ left:0; top:0; }
.pill--b img{ left:-.8rem; top:2rem; width:34.4rem; height:73.1rem; }

.deco--paper3{ position:absolute; left:2.4rem; top:72.6rem; width:10.22rem; height:6.17rem; }

/* ==========================================================================
   POURQUOI NOUS ?
   ========================================================================== */
.why2{
  position:relative;
  height:82rem;                                     /* 1188 -> 2008 */
  background:#FFFAF8;
}
.why2__leaf{
  position:absolute; left:-7.2rem; top:-5.1rem;
  width:25rem; height:22rem; pointer-events:none;
}
.why2__photo{
  position:absolute; right:0; top:.3rem;
  width:115.1rem; height:83.7rem;
  max-width:none;
  object-fit:cover;
}
.why2__text{ position:absolute; left:17.8rem; top:17.5rem; width:58rem; }
.why2__text > p{
  margin-top:2.9rem;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}

.checks{ margin-top:4.3rem; margin-left:3.8rem; }
/* `:not(.checks--wide)` : les listes larges (partenaire, fiches longues) ont
   leur propre calage dans `style.css` — sans cette exclusion, le `nowrap`
   ci-dessous gagnait par ordre de chargement et le texte sortait du cadre. */
.checks:not(.checks--wide) li{
  display:flex; align-items:center; gap:1.4rem;
  height:4.6rem;                                    /* XD : pas de 46 px */
  white-space:nowrap;
  font-family:var(--font-title); font-weight:600; font-size:2.3rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.checks .ico{ width:2.2rem; height:2.2rem; color:var(--red); }

.deco--route3{ position:absolute; left:1.5rem; top:58rem; width:18.11rem; height:21.83rem; }

/* ==========================================================================
   ILS NOUS FONT CONFIANCE
   ========================================================================== */
.trust{
  position:relative;
  height:74.2rem;                                   /* 2008 -> 2750 */
  background:var(--page);
}
.trust .title{ padding-top:12.3rem; }               /* titre a y=2172 */

.trust__photo{ position:absolute; object-fit:cover; border-radius:2rem; }
.trust__photo--a{
  left:0; top:27.5rem; width:65.4rem; height:51.1rem;
  border:1rem solid #fff;
}
.trust__photo--b{ left:39.8rem; top:39.6rem; width:62.8rem; height:43.6rem; }

.trust__list{ position:absolute; left:119.8rem; top:31rem; }
.trust__list li{
  display:flex; align-items:center; gap:1.5rem;
  height:4.9rem;                                    /* XD : interligne 49 px */
  font-family:var(--font-title); font-weight:600; font-size:2.3rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.trust__list .ico{ width:2.2rem; height:2.2rem; color:var(--red); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .phero{ height:auto; min-height:20rem; padding-bottom:12rem; background-size:cover; }
  .phero .langs{ display:none; }
  .crumb{ position:relative; left:auto; top:auto; margin:14rem auto 0; }

  .ident{ height:auto; padding:6rem 0 8rem; display:grid; gap:4rem;
          width:min(var(--wrap),92%); margin-inline:auto; grid-template-columns:1fr 1fr; }
  .ident__intro,.ident__col,.pill{ position:static; width:auto; }
  .ident__intro{ grid-column:1 / -1; }
  .pill{ display:none; }
  .deco--paper3{ display:none; }

  .why2{ height:auto; padding:6rem 0 8rem; }
  .why2__leaf,.deco--route3{ display:none; }
  .why2__photo{ position:relative; right:auto; top:auto; width:100%; height:40rem; border-radius:0; }
  .why2__text{ position:static; width:min(var(--wrap),92%); margin:4rem auto 0; }

  .trust{ height:auto; padding-bottom:8rem; }
  .trust .title{ padding-top:6rem; }
  .trust__photo{ position:relative; left:auto; top:auto; width:min(var(--wrap),92%);
                 height:auto; margin:3rem auto 0; }
  .trust__photo--a{ border-width:.6rem; }
  .trust__list{ position:static; width:min(var(--wrap),92%); margin:4rem auto 0; }
}

@media (max-width:767px){
  .ident{ grid-template-columns:1fr; }
  .crumb{ width:min(37.2rem,92%); }
  .checks li,.trust__list li{ height:auto; padding:.8rem 0; align-items:flex-start; }
  .checks .ico,.trust__list .ico{ margin-top:.4rem; }
}