/* screen - application */

.application {
  align-items: flex-start;
  background-color: var(--shark);
  display: flex;
  flex-direction: column;
  height: 6346px;
  overflow: hidden;
  width: 1440px;
}

.application .overlap-group17 {
  align-items: flex-start;
  background-image: url(../img/fond-1-1.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  gap: 62px;
  min-height: 797px;
  padding: 38.0px 14.1px;
  width: 1440px;
}

.application .flex-row {
  align-items: center;
  display: flex;
  gap: 376px;
  min-width: 1314px;
}

/* ==== Animation du logo ==== */
@keyframes slideInLogo {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* état « de base » pour autoriser la transition au scroll */
.application .logo {
  transition: transform 0.1s linear, opacity 0.1s linear;
}

/* classe pour déclencher l’entrée */
.slide-in-logo {
  animation: slideInLogo 0.8s ease-out 0.2s forwards;
}


.application .logo {
  align-items: center;
  display: flex;
  gap: 2px;
  min-width: 212px;
}

.application .valise-logo-1 {
  height: 65px;
  object-fit: cover;
  width: 83px;
}




.application .home-bags {
  color: var(--shark);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 3.19px;
  min-height: 28px;
  min-width: 126px;
}

.main-nav {
  margin-top: 7.7px;
}

.nav-list {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1) État initial : invisible et juste un poil plus haut */
.nav-item {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2) Keyframes pour faire apparaître et glisser */
@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3) Animation décalée sur chaque item */
.nav-item:nth-child(1) {
  animation: fadeSlideIn 0.5s ease forwards;
  animation-delay: 0.5s;
}
.nav-item:nth-child(2) {
  animation: fadeSlideIn 0.5s ease forwards;
  animation-delay: 0.7s;
}
.nav-item:nth-child(3) {
  animation: fadeSlideIn 0.5s ease forwards;
  animation-delay: 0.9s;
}
.nav-item:nth-child(4) {
  animation: fadeSlideIn 0.5s ease forwards;
  animation-delay: 1.1s;
}

.nav-item:nth-child(5) {
  animation: fadeSlideIn 0.5s ease forwards;
  animation-delay: 1.3s;
}




/* 4) Fade-out des non-survolés (avec !important pour écraser le inline style de l’animation) */
.nav-list:hover .nav-item:not(:hover) {
  opacity: 0.5 !important;
}

/* 5) Style de base du lien + underline animée */
.nav-link {
  position: relative;
  color: #1C2831;
  font-family: var(--font-family-inter);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}



.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.application .overlap-group15 {
  align-self: center;
  height: 533px;
  margin-right: 29.78px;
  position: relative;
  width: 1339px;
}

.application .rectangle-7::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(136deg, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.33) 100%);
  border-radius: 124.89px;
  content: "";
  inset: 0;
  mask-composite: exclude;
  padding: 1.65px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.application .rectangle-7 {
  -webkit-backdrop-filter: blur(16.54px) brightness(100%);
  backdrop-filter: blur(16.54px) brightness(100%);
  background-color: var(--white-2);
  border: none;
  border-radius: 124.89px;
  height: 435px;
  left: 0;
  position: absolute;
  top: 98px;
  width: 1339px;
}

.application .alors-home-bags-est-fait-pour-vous {
  left: 612px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 0.85px 1.83px #0000002c;
  top: 314px;
}

.application .chers-voyageurs-dc {
  left: 612px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px -0.15px 1.32px #00000010;
  top: 127px;
}

.application .group-17 {
  align-items: flex-start;
  display: flex;
  gap: 33px;
  height: 100px;
  left: 912px;
  min-width: 233px;
  position: absolute;
  top: 386px;
}

/* ==== slide-in depuis la gauche ON SCROLL ==== */
.application .x1077105,
.application .x11423309,
.application .rectangle-4,
.application .rectangle-5 {
  /* état initial : invisible et hors-écran à gauche */
  opacity: 0;
  transform: translateX(300%);
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

/* une fois en vue : position d’origine + visible */
.application .x1077105.in-view,
.application .x11423309.in-view,
.application .rectangle-4.in-view,
.application .rectangle-5.in-view {
  opacity: 1;
  transform: translateX(0);
}

.application .rectangle-4 {
  border: 1.65px solid;
  border-color: var(--shark);
  border-radius: 9.93px;
  height: 100px;
  width: 100px;
}

.application .rectangle-5 {
  border: 1.65px solid;
  border-color: var(--shark);
  border-radius: 9.93px;
  height: 100px;
  margin-top: 0;
  width: 100px;
}

.application .x1077105 {
  height: 79px;
  left: 1058px;
  object-fit: cover;
  position: absolute;
  top: 399px;
  width: 78px;
}

.application .x11423309 {
  height: 79px;
  left: 925px;
  object-fit: cover;
  position: absolute;
  top: 399px;
  width: 79px;
}

.application .vous-arrivez-lht {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 16.5px;
  font-weight: 600;
  left: 706px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 210px;
  width: 605px;
}

.application .en_cours {
  height: 533px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 307px;
}

/* ==== effet reveal on scroll pour les 3 images ==== */
.application .en_cours,
.application .saisie,
.application .connexion {
  /* état initial : caché et décalé vers le bas */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.application .en_cours.in-view,
.application .saisie.in-view,
.application .connexion.in-view {
  /* une fois en vue : position normale + visible */
  opacity: 1;
  transform: translateY(0);
}

.application .saisie {
  height: 533px;
  left: 159px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 307px;
}

.application .connexion {
  height: 533px;
  left: 327px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 307px;
}

.application .overlap-group18 {
  align-self: center;
  height: 724px;
  margin-left: 27.5px;
  margin-top: 42px;
  position: relative;
  width: 1342px;
}

.application .overlap-group10 {
  height: 593px;
  left: 0;
  position: absolute;
  top: 131px;
  width: 1336px;
}

.application .rectangle-18::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(136deg, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.33) 100%);
  border-radius: 124.89px;
  content: "";
  inset: 0;
  mask-composite: exclude;
  padding: 1.65px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.application .rectangle-18 {
  -webkit-backdrop-filter: blur(16.54px) brightness(100%);
  backdrop-filter: blur(16.54px) brightness(100%);
  background-color: var(--white-2);
  border: none;
  border-radius: 124.89px;
  height: 435px;
  left: 0;
  position: absolute;
  top: 158px;
  width: 1336px;
}

.application .laissez-vous-sduire {
  color: var(--orange);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-l);
  font-weight: 600;
  left: 101px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 0.85px 1.83px #0000002c;
  top: 391px;
}

.application .comment-a-marche {
  color: var(--orange);
  font-family: var(--font-family-inter);
  font-size: 52.9px;
  font-weight: 600;
  left: 101px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 30.6px 66.17px #0000009e;
  top: 210px;
}

.application .laissez-vous-sduire-1 {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 600;
  left: 149px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 290px;
  width: 605px;
}

.application .comment {
  height: 593px;
  left: 865px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 395px;
}

.application .presentation {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 178px;
  left: 7px;
  min-width: 1298px;
  position: absolute;
  top: 0;
}

.application .overlap-group11 {
  align-items: flex-start;
  background-image: url(../img/rectangle-20.svg);
  background-size: 100% 100%;
  display: flex;
  height: 203px;
  justify-content: flex-end;
  margin-bottom: -22.66px;
  margin-left: -15px;
  min-width: 328px;
  padding: 31.9px 20.2px;
}

.application .utilisation-facile {
  letter-spacing: 0;
  line-height: normal;
  min-height: 111px;
  text-align: center;
  text-shadow: 0px 1.65px 1.32px #00000016;
  width: 278px;
}

.application .overlap-group12 {
  align-items: flex-start;
  background-image: url(../img/rectangle-23.svg);
  background-size: 100% 100%;
  display: flex;
  height: 203px;
  justify-content: flex-end;
  margin-bottom: -22.66px;
  min-width: 328px;
  padding: 31.9px 38.1px;
}

.application .support-permanent {
  letter-spacing: 0;
  line-height: normal;
  min-height: 110px;
  min-width: 241px;
  text-align: center;
  text-shadow: 0px 1.65px 1.32px #00000016;
}

/* zoom inverse pour .support : petit hors-centre, grand au centre */
.application .support {
  display: block;
  transform-origin: center center;
  /* échelle minimale hors centre */
  transform: scale(0.5);
  transition: transform 0.1s linear;
}


.application .overlap-group14 {
  align-items: flex-start;
  background-image: url(../img/rectangle-24.svg);
  background-size: 100% 100%;
  display: flex;
  height: 203px;
  justify-content: flex-end;
  margin-bottom: -22.66px;
  min-width: 328px;
  padding: 31.9px 62.9px;
}

.application .payment-scuris {
  letter-spacing: 0;
  line-height: normal;
  min-height: 110px;
  min-width: 193px;
  text-align: center;
  text-shadow: 0px 1.65px 1.32px #00000016;
}

.application .overlap-group13 {
  align-items: flex-start;
  background-image: url(../img/rectangle-25.svg);
  background-size: 100% 100%;
  display: flex;
  height: 203px;
  justify-content: flex-end;
  margin-bottom: -22.66px;
  min-width: 328px;
  padding: 42.6px 41.6px;
}

.application .inscription-rapide {
  letter-spacing: 0;
  line-height: normal;
  min-height: 110px;
  min-width: 235px;
  text-align: center;
  text-shadow: 0px 1.65px 1.32px #00000016;
}

.application .overlap-group16 {
  height: 4735px;
  margin-top: 48px;
  position: relative;
  width: 1472px;
}

.application .chat-gpt-image-11-mai-2025-a-23_45_34-1 {
  height: 2180px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 2160px;
  width: 1453px;
}

.application .chat-gpt-image-11-mai-2025-a-23_41_38-1 {
  height: 2160px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 1440px;
}

.application .flex-row-1 {
  background-color: var(--shark);
  gap: 69px;
  height: 471px;
  justify-content: flex-end;
  left: 0;
  min-width: 1440px;
  padding: 0 9.0px;
  position: absolute;
  top: 4264px;
}

.application .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  width: 528px;
}

.application .flex-row-2 {
  gap: 6px;
  min-width: 348px;
}

.application .homebags {
  align-self: flex-end;
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  min-height: 58px;
  min-width: 259px;
  opacity: 0.75;
}

.application .home-bagsest-une-soc {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 10.75px;
  margin-top: 31px;
  min-height: 196px;
  width: 480px;
}

.application .contactez-nous {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 800;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 62.86px;
  margin-top: 20px;
  min-height: 28px;
}

.application .exclude {
  align-self: flex-end;
  height: 61px;
  margin-top: 19px;
  width: 465px;
}

.application .flex-col-1 {
  align-items: flex-end;
  align-self: center;
  margin-top: 24.0px;
  min-height: 413px;
  width: 824px;
}

.application .flex-row-3 {
  align-self: flex-start;
  gap: 121px;
  height: 299px;
  min-width: 752px;
}

.application .flex-col-2 {
  align-items: center;
  align-self: flex-end;
  gap: 36px;
  min-height: 270px;
  width: 377px;
}

.application .navigation {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 800;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 102.47px;
  min-height: 28px;
  min-width: 124px;
}

.application .flex-row-4 {
  gap: 69px;
  height: 206px;
  min-width: 377px;
}

.application .flex-col-3 {
  align-items: flex-start;
  gap: 21px;
  min-height: 206px;
  width: 108px;
}

.application .connexion-1 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}


.application .application-1 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}

.application .instagram {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}

.application .facebook {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}

.application .tiktok {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}

.application .flex-col-4 {
  align-items: flex-start;
  min-height: 206px;
  width: 200px;
}

.application .devenir-franchis {
  margin-top: 21px;
}

.application .devenir-groom {
  margin-top: 17px;
}

.application .rservation-sjour-chez-nos-partenaires {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 21px;
  min-height: 48px;
}

.application .qui-sommes-nous {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 2px;
  min-height: 24px;
}

.application .logo-homebags-1 {
  align-items: flex-start;
  border-radius: 827.11px;
  display: flex;
  overflow: hidden;
  width: 254px;
}

.application .g1 {
  align-items: flex-end;
  background-image: url(../img/image1-2@2x.png);
  background-size: 100% 100%;
  display: flex;
  min-width: 254px;
}

.application .g2 {
  height: 254px;
  width: 254px;
}

.application .termes-et-conditions {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 58px;
  min-height: 24px;
  width: 212px;
}

.application .x2025-homebags-tous-droits-rservs {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.63px;
  margin-top: 7px;
  min-height: 24px;
  min-width: 390px;
}

.application .overlap-group1 {
  height: 559px;
  left: 134px;
  position: absolute;
  top: 3715px;
  width: 953px;
}

.application .rectangle-27 {
  height: 353px;
  left: 286px;
  position: absolute;
  top: 205px;
  width: 667px;
}

.application .vous-profitez {
  height: 24px;
  left: 425px;
  position: absolute;
  text-shadow: 0px 8.27px 33.08px #000000;
  top: 293px;
  white-space: nowrap;
  width: 218px;
}

.application .plus-besoin-de-rev {
  left: 316px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 3.31px 3.31px #00000066;
  top: 347px;
  width: 596px;
}

.application .et-pendant-ce-temps {
  left: 325px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px -0.15px 1.32px #00000010;
  top: 243px;
  white-space: nowrap;
  width: 548px;
}

.application .support {
  height: 552px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 368px;
}

.application .gestion-compte {
  align-items: flex-start;
  display: flex;
  gap: 66px;
  height: 658px;
  left: 117px;
  min-width: 1218px;
  position: absolute;
  top: 3305px;
}

.application .overlap-group2 {
  align-items: flex-start;
  align-self: center;
  background-image: url(../img/rectangle-27-6.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  gap: 39px;
  margin-bottom: 132.1px;
  margin-left: -15px;
  min-height: 288px;
  padding: 59.6px 35.9px;
  width: 667px;
}

.application .votre-compte-est-personnalisable {
  align-self: flex-end;
  height: 38px;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 18.35px;
  min-width: 511px;
  text-shadow: 0px 8.27px 33.08px #000000;
}

.application .accdez-vos-inform {
  letter-spacing: 0;
  line-height: normal;
  min-height: 78px;
  text-shadow: 0px 3.31px 3.31px #00000066;
  width: 596px;
}

.application .overlap-group3 {
  height: 658px;
  position: relative;
  width: 496px;
}

/* slide-in + fade-in depuis la droite pour .compte et .recap */
.application .compte,
.application .recap {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-out,
              transform 0.6s ease-out;
}

.application .compte.in-view,
.application .recap.in-view {
  opacity: 1;
  transform: translateX(0);
}


.application .compte {
  height: 618px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 324px;
}

.application .recap {
  height: 559px;
  left: 237px;
  object-fit: cover;
  position: absolute;
  top: 99px;
  width: 258px;
}

.application .overlap-group4 {
  height: 865px;
  left: 64px;
  position: absolute;
  top: 2539px;
  width: 1318px;
}

.application .rectangle-27-1 {
  height: 455px;
  left: 651px;
  position: absolute;
  top: 253px;
  width: 667px;
}

.application .dans-letableau-de-b {
  height: 114px;
  left: 735px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 8.27px 33.08px #000000;
  top: 350px;
}

.application .son-lieu-dorigine {
  left: 690px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 3.31px 3.31px #00000066;
  top: 478px;
  width: 596px;
}

.application .suivez-vos-bagages-en-temps-rel {
  left: 690px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px -0.15px 1.32px #00000010;
  top: 309px;
  white-space: nowrap;
  width: 548px;
}

/* slide-in + fade-in depuis la droite pour .notification et .en_cours2 */
.application .notification,
.application .en_cours2 {
  opacity: 0;
  transform: translateX(-100%);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.application .notification.in-view,
.application .en_cours2.in-view {
  opacity: 1;
  transform: translateX(0);
}


.application .notification {
  height: 736px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 129px;
  width: 316px;
}

.application .en_cours2 {
  height: 836px;
  left: 227px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 439px;
}

.application .qr-code {
  align-items: flex-start;
  display: flex;
  gap: 13px;
  height: 796px;
  left: 151px;
  min-width: 1089px;
  position: absolute;
  top: 1843px;
}

.application .payement {
  height: 796px;
  object-fit: cover;
  width: 418px;
}

/* zoom inverse pour .payement : petit hors-centre, grand au centre */
.application .payement {
  display: block;
  transform-origin: center center;
  /* échelle minimale hors centre */
  transform: scale(0.5);
  transition: transform 0.1s linear;
}

.application .overlap-group5 {
  align-items: flex-end;
  align-self: center;
  background-image: url(../img/rectangle-27-8.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  margin-top: 159.82px;
  min-height: 452px;
  padding: 55.9px 17.7px;
  width: 667px;
}

.application .payez-et-recevez-votre-qr-code {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 12px;
  min-height: 34px;
  text-shadow: 0px -0.15px 1.32px #00000010;
  white-space: nowrap;
  width: 492px;
}

.application .vous-visualisez-unr {
  align-self: center;
  height: 114px;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 31.32px;
  margin-top: 17px;
  min-width: 473px;
  text-shadow: 0px 8.27px 33.08px #000000;
}

.application .puis-vous-payez-dire {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 14.89px;
  margin-top: 30px;
  min-height: 133px;
  text-shadow: 0px 3.31px 3.31px #00000066;
  width: 596px;
}

.application .span {
  color: var(--shark);
  font-size: var(--font-size-xxs);
}

.application .overlap-group6 {
  height: 915px;
  left: 63px;
  position: absolute;
  top: 1117px;
  width: 1280px;
}

.application .rectangle-27-2 {
  height: 375px;
  left: 327px;
  position: absolute;
  top: 229px;
  width: 646px;
}

.application .choisissez-vos-horaires {
  height: 38px;
  left: 362px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 8.27px 33.08px #000000;
  top: 270px;
  width: 375px;
}

.application .indiquez-le-lieu-de {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-weight: 700;
  left: 395px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 3.31px 3.31px #00000066;
  top: 347px;
  width: 467px;
}

.application .span-1 {
  color: var(--white);
  font-size: 19.9px;
}

/* slide-in + fade-in depuis la droite pour .lieu */
.application .lieu {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-out,
              transform 0.6s ease-out;
}

.application .lieu.in-view {
  opacity: 1;
  transform: translateX(0);
}


.application .lieu {
  height: 683px;
  left: 958px;
  object-fit: cover;
  position: absolute;
  top: 232px;
  width: 322px;
}

/* slide-in + fade-in depuis la gauche pour .restitution */
.application .restitution {
  opacity: 0;
  transform: translateX(-100%);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.application .restitution.in-view {
  opacity: 1;
  transform: translateX(0);
}


.application .restitution {
  height: 688px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 333px;
}

.application .ajoutez-vos-bagages {
  align-items: flex-start;
  display: flex;
  gap: 50px;
  height: 749px;
  left: 112px;
  min-width: 1213px;
  position: absolute;
  top: 439px;
}

.application .overlap-group8 {
  align-items: flex-end;
  align-self: center;
  background-image: url(../img/rectangle-27-10.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  margin-left: -15px;
  margin-top: 79.1px;
  min-height: 535px;
  padding: 54.3px 17.7px;
  width: 667px;
}

.application .ajoutez-vos-bagages-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 0;
  margin-top: 13px;
  min-height: 34px;
  text-shadow: 0px -0.15px 1.32px #00000010;
  white-space: nowrap;
  width: 333px;
}

.application .rserver-en-quelques {
  height: 76px;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 43.05px;
  margin-top: 18px;
  min-width: 416px;
  text-shadow: 0px 8.27px 33.08px #000000;
}

.application .vous-choisissez {
  min-height: 286px;
  text-shadow: 0px 3.31px 3.31px #00000066;
  width: 596px;
}

.application .overlap-group7 {
  height: 749px;
  position: relative;
  width: 504px;
}

/* slide-in + fade-in depuis la droite pour .ajout et .saisie_2 */
.application .ajout,
.application .saisie_2 {
  /* état initial : hors-écran à droite + transparent */
  opacity: 0;
  transform: translateX(100%);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.application .ajout.in-view,
.application .saisie_2.in-view {
  /* en vue : position d’origine + opaque */
  opacity: 1;
  transform: translateX(0);
}


.application .ajout {
  height: 634px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 336px;
}

.application .saisie_2 {
  height: 634px;
  left: 168px;
  object-fit: cover;
  position: absolute;
  top: 116px;
  width: 336px;
}

.application .crez-un-compte {
  align-items: center;
  display: flex;
  gap: 49px;
  height: 513px;
  left: 155px;
  min-width: 1127px;
  position: absolute;
  top: 74px;
}

.application .connexion-2 {
  height: 513px;
  object-fit: cover;
  width: 272px;
}

/* zoom inverse : petit à l’extérieur, grand au centre */
.application .connexion-2 {
  display: block;
  transform-origin: center center;
  /* on part d'une échelle minimale */
  transform: scale(0.5);
  transition: transform 0.1s linear;
}




.application .overlap-group9 {
  height: 295px;
  margin-bottom: 30.24px;
  position: relative;
  width: 815px;
}

.application .rectangle-27-3 {
  height: 295px;
  left: 0;
  position: absolute;
  top: 0;
  width: 815px;
}

.application .comment-a-marche-1 {
  color: var(--shark);
  font-family: var(--font-family-inter);
  font-size: 33.1px;
  font-weight: 600;
  height: 40px;
  left: 115px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 8.27px 33.08px #000000;
  top: 100px;
}

.application .ds-louverture-de-l {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  left: 61px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px 3.31px 3.31px #00000066;
  top: 155px;
  width: 596px;
}

.application .crez-un-compte-gratuitement {
  left: 32px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-shadow: 0px -0.15px 1.32px #00000010;
  top: 52px;
  white-space: nowrap;
  width: 768px;
}

.application .devenir {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
}

.application .flex-col-5 {
  display: flex;
  flex-direction: column;
}

.application .flex-row-5 {
  align-items: flex-start;
  display: flex;
}

.contactez-nous .footer-links {
  position: absolute;
  bottom: 50px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.contactez-nous .footer-links .about-link {
  color: white;
  font-family: var(--font-family-inter);
  font-size: 20px;
  text-decoration: none;
}