/* ==========================================================================
   SKYWAY TRAVELERS — page « Notre process »
   Source : NEW LIEN MAQUETTE.xd, plan « A PROPOS – 1 » (1920 × 3472)
   Réutilise style.css (socle) et apropos.css (bandeau + fil d'Ariane).
   ========================================================================== */

/* ==========================================================================
   LES 5 ÉTAPES        section : 242 -> 2187
   ========================================================================== */
.steps{
  position:relative;
  height:194.5rem;
}

.steps__intro{
  position:absolute; left:57rem; top:8.9rem;        /* XD : ligne de base 354 */
  width:78rem;
  text-align:center;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}

/* la courbe centrale est le tracé exact du XD */
.steps__line{
  position:absolute; left:95.72rem; top:28.45rem;   /* XD : (957,2 ; 526,5) */
  width:4.58rem; height:158.66rem;
  pointer-events:none;
}

.deco--cam4  { position:absolute; left:5.2rem;   top:66.7rem;  width:15.01rem; height:12.25rem; }
.deco--lib4  { position:absolute; left:177.3rem; top:35.8rem;  width:14.08rem; height:39.35rem; }
.deco--paper4{ position:absolute; left:5.3rem;   top:179rem;   width:10.22rem; height:6.17rem; }

/* --- une étape : image d'un côté, texte de l'autre, pastille sur la courbe --- */
.step{ position:absolute; }
.step__media{
  position:absolute;
  width:55rem; height:25.2rem;
  max-width:none;
  border-radius:1rem;
  object-fit:cover;
  box-shadow:0 .4rem 2rem rgba(7,48,100,.10);
}
.step__body{ position:absolute; }
/* colonne de droite : bloc étroit ; colonne de gauche : bloc large (XD) */
.step--1 .step__body,
.step--3 .step__body,
.step--5 .step__body{ width:36rem; }
.step--2 .step__body,
.step--4 .step__body{ width:50rem; }
.step__head{
  display:flex; align-items:center; gap:1.4rem;
  margin:0;
  font-family:var(--font-title); font-weight:600; font-size:2.9rem; line-height:2.5rem;
  letter-spacing:-.01em; color:var(--ink);
}
.step__head .ico{ width:3.2rem; height:3.2rem; color:var(--red); }
.step__body p{
  margin-top:1.9rem;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}
.step__num{
  position:absolute;
  width:3.9rem; height:3.5rem;
  border-radius:.5rem;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-weight:600; font-size:2rem; line-height:1.7rem;
}

/* positions relevées une à une dans le XD (origine section = 242) */
.step--1 .step__media{ left:32.7rem;  top:34.3rem; }
.step--1 .step__body { left:101.8rem; top:33.9rem; }
.step--1 .step__num  { left:91.33rem; top:43.7rem; }

.step--2 .step__media{ left:109.3rem; top:61.6rem; }
.step--2 .step__body { left:32.7rem;  top:63.7rem; }
.step--2 .step__num  { left:99.57rem; top:74.2rem; }

.step--3 .step__media{ left:32.7rem;  top:92.3rem; }
.step--3 .step__body { left:101.8rem; top:96.3rem; }
.step--3 .step__num  { left:91.33rem; top:103.85rem; }

.step--4 .step__media{ left:109.3rem; top:121rem; }
.step--4 .step__body { left:32.7rem;  top:125.7rem; }
.step--4 .step__num  { left:99.57rem; top:133.6rem; }

.step--5 .step__media{ left:32.7rem;  top:151.7rem; }
.step--5 .step__body { left:101.8rem; top:155.7rem; }
.step--5 .step__num  { left:91.33rem; top:163.25rem; }

/* ==========================================================================
   TÉMOIGNAGES        section : 2187 -> 2716
   ========================================================================== */
.quotes--page{
  margin-top:0;
  height:52.9rem;
  padding:9.5rem 0 0;                                /* titre a y=2322 */
}
.quotes--page .quotes__viewport{ margin-top:10.8rem; }  /* cartes a y=2442 */
.quotes--page .carousel-nav{ bottom:5.5rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .steps{ height:auto; padding:4rem 0 6rem; }
  .steps__intro{ position:static; width:min(var(--wrap),92%); margin:0 auto 6rem; }
  .steps__line,.deco--cam4,.deco--lib4,.deco--paper4{ display:none; }

  .steps__list{ width:min(var(--wrap),92%); margin-inline:auto; display:grid; gap:6rem; }
  .step{ position:relative; display:grid; gap:2.4rem; }
  .step__media,.step__body,.step__num{ position:static; width:100%; }
  .step__media{ height:26rem; }
  .step__num{ width:3.9rem; height:3.5rem; }

  .quotes--page{ height:auto; padding:6rem 0 8rem; }
  .quotes--page .carousel-nav{ position:static; margin-top:3rem; }
}

@media (max-width:767px){
  .step__head{ font-size:2.4rem; }
}