/* =========================================================
   ITA SARL
   CORRECTION RESPONSIVE MOBILE COMPLETE
   À COLLER TOUT EN BAS DE styles.css
   ========================================================= */


/* ========================================
   1. SECURITE GENERALE CONTRE DEBORDEMENT
   ======================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  min-width: 0;
}

* {
  max-width: 100%;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1200px, calc(100% - 40px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-grid,
.destination-grid,
.service-grid,
.method-grid,
.about-grid,
.evaluation-grid,
.contact-grid,
.footer-grid,
.form-grid,
.trust-grid {
  min-width: 0;
}

.hero-grid > *,
.destination-grid > *,
.service-grid > *,
.method-grid > *,
.about-grid > *,
.evaluation-grid > *,
.contact-grid > *,
.footer-grid > *,
.form-grid > *,
.trust-grid > * {
  min-width: 0;
}


/* ========================================
   2. TABLETTE
   ======================================== */

@media screen and (max-width: 900px) {

  .container {
    width: calc(100% - 32px);
  }


  /* HEADER */

  .nav {
    min-height: 72px;
    height: auto;
    gap: 15px;
  }

  .brand {
    flex: 0 1 auto;
    max-width: 65%;
  }

  .brand img {
    height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .nav-btn {
    display: none !important;
  }

  .menu-toggle {
    display: block !important;
    margin-left: auto;
    flex-shrink: 0;
    cursor: pointer;
  }

  .menu {
    display: none;
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 16px 20px 24px;

    background: #ffffff;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    box-shadow:
      0 20px 40px
      rgba(8, 31, 54, 0.14);

    z-index: 999;
  }

  .menu.open {
    display: flex !important;
  }

  .menu a {
    display: block;
    width: 100%;

    padding: 14px 4px;

    border-bottom:
      1px solid #edf0f3;
  }

  .menu a:last-child {
    border-bottom: 0;
  }

  .menu a::after {
    display: none !important;
  }


  /* HERO */

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    min-height: auto !important;

    gap: 20px !important;
  }

  .hero-copy {
    width: 100%;

    padding:
      55px 0 15px !important;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(40px, 7vw, 52px);

    line-height: 1.05;

    overflow-wrap: break-word;
  }

  .hero-text {
    max-width: 100% !important;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-highlights {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  /* HERO SHOWCASE */

  .hero-showcase {
    position: relative !important;

    width: 100% !important;
    max-width: 600px !important;

    height: 430px !important;

    margin:
      0 auto 30px !important;

    transform: none !important;
  }

  .showcase-frame {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: min(100%, 420px) !important;

    margin:
      60px auto 0 !important;
  }

  .canada-card {
    left: 0 !important;
    bottom: 18px !important;
  }

  .europe-card {
    right: 0 !important;
    top: 0 !important;
  }

  .plane {
    left: 20px !important;
    top: 10px !important;
  }

  .orbit-a,
  .orbit-b {
    display: none !important;
  }


  /* DESTINATIONS */

  .section-intro {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .destination-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .destination-card.featured {
    grid-column: span 2;
  }


  /* SERVICES */

  .service-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  /* METHODE */

  .method-grid {
    grid-template-columns:
      1fr !important;

    gap: 40px !important;
  }


  /* ABOUT */

  .about-grid {
    grid-template-columns:
      1fr !important;

    gap: 40px !important;
  }

  .about-visual {
    width: 100%;
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;
  }


  /* EVALUATION */

  .evaluation-grid {
    grid-template-columns:
      1fr !important;

    gap: 35px !important;
  }


  /* CONTACT */

  .contact-grid {
    grid-template-columns:
      1fr !important;

    gap: 30px !important;
  }


  /* FOOTER */

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* ========================================
   3. TELEPHONE
   ======================================== */

@media screen and (max-width: 600px) {

  html {
    font-size: 16px;
  }

  .container {
    width:
      calc(100% - 28px) !important;

    max-width:
      calc(100% - 28px) !important;
  }


  /* =====================
     TOP BAR
     ===================== */

  .topbar {
    font-size: 10px;
  }

  .topbar-inner {
    display: block !important;

    padding:
      8px 0 !important;
  }

  .topbar-left {
    width: 100%;

    margin-bottom: 6px;
  }

  .topbar-right {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 3px !important;
  }

  .topbar-right a {
    max-width: 100%;

    overflow-wrap:
      anywhere;
  }


  /* =====================
     HEADER
     ===================== */

  .header {
    width: 100%;
  }

  .nav {
    width: 100%;

    min-height: 68px !important;
  }

  .brand {
    width: auto;

    max-width: 68% !important;
  }

  .brand img {
    max-width: 100%;

    height: 42px !important;
  }

  .menu-toggle {
    font-size: 25px;

    padding: 8px;

    line-height: 1;

    color: var(--navy);
  }


  /* =====================
     HERO
     ===================== */

  .hero {
    width: 100%;

    min-height: auto !important;
  }

  .hero-grid {
    display: block !important;

    width: 100% !important;
  }

  .hero-copy {
    width: 100% !important;

    padding:
      45px 0 20px !important;
  }

  .eyebrow {
    font-size: 10px !important;

    letter-spacing:
      0.12em !important;

    line-height: 1.5;
  }

  .hero h1 {
    width: 100% !important;

    max-width: 100% !important;

    font-size:
      clamp(
        32px,
        10vw,
        40px
      ) !important;

    line-height:
      1.07 !important;

    letter-spacing:
      -0.02em !important;

    margin:
      13px 0 17px !important;

    overflow-wrap:
      break-word;
  }

  .hero-text {
    width: 100%;

    max-width: 100% !important;

    font-size:
      14px !important;

    line-height:
      1.7 !important;
  }


  /* CTA HERO */

  .hero-actions {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    width: 100%;

    gap: 10px !important;

    margin:
      25px 0 34px !important;
  }

  .hero-actions .btn {
    width: 100% !important;

    min-height: 52px;

    padding:
      0 16px !important;
  }


  /* POINTS HERO */

  .hero-highlights {
    grid-template-columns:
      1fr !important;

    gap: 12px !important;
  }

  .hero-highlights div {
    padding:
      12px 0 !important;
  }


  /* =====================
     HERO SHOWCASE MOBILE
     ===================== */

  .hero-showcase {
    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: 390px;

    margin:
      0 auto 20px !important;

    padding-top: 45px;

    overflow: visible !important;

    transform: none !important;
  }


  .showcase-frame {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding:
      22px 18px !important;

    border-radius:
      20px !important;
  }


  .showcase-header {
    flex-wrap: wrap;

    gap: 8px !important;
  }


  .showcase-title {
    font-size:
      24px !important;

    line-height:
      1.2 !important;
  }


  .journey-item {
    gap: 11px !important;
  }


  .journey-item small {
    font-size:
      10px !important;
  }


  /* IMPORTANT :
     on retire les cartes flottantes
     qui provoquent le débordement */

  .floating-card {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;

    max-width: 100% !important;

    margin-top:
      12px !important;

    box-shadow:
      0 10px 25px
      rgba(
        8,
        31,
        54,
        0.12
      ) !important;
  }


  .europe-card {
    display: flex !important;
  }


  .plane {
    display: none !important;
  }


  .orbit-a,
  .orbit-b,
  .gold-orbit {
    display: none !important;
  }


  /* =====================
     TRUST
     ===================== */

  .trust-grid {
    display: grid !important;

    grid-template-columns:
      1fr !important;
  }

  .trust-grid > div {
    width: 100%;

    padding:
      18px 0 !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--line);
  }

  .trust-grid > div:last-child {
    border-bottom: 0;
  }


  /* =====================
     SECTIONS
     ===================== */

  .section {
    padding:
      55px 0 !important;
  }


  .section-intro,
  .section-heading {
    width: 100%;

    max-width: 100% !important;
  }


  .section-intro h2,
  .section-heading h2,
  .method-copy h2,
  .about-copy h2,
  .evaluation-copy h2,
  .contact-copy h2 {

    font-size:
      clamp(
        29px,
        8vw,
        37px
      ) !important;

    line-height:
      1.12 !important;

    overflow-wrap:
      break-word;
  }


  .section-intro p,
  .section-heading p,
  .method-copy p,
  .about-copy p,
  .evaluation-copy p {

    font-size:
      14px !important;

    line-height:
      1.7 !important;
  }


  /* =====================
     DESTINATIONS
     ===================== */

  .destination-grid {

    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      13px !important;

  }


  .destination-card,
  .destination-card.featured {

    grid-column:
      auto !important;

    width:
      100% !important;

    min-height:
      auto !important;

    padding:
      20px !important;

  }


  .destination-card .flag,
  .country-top span {

    font-size:
      38px !important;

  }


  /* =====================
     SERVICES
     ===================== */

  .service-grid {

    grid-template-columns:
      1fr !important;

    gap:
      14px !important;

  }


  .service-card {

    width:
      100% !important;

    min-height:
      auto !important;

    padding:
      22px 20px !important;

  }


  .service-card h3 {

    font-size:
      19px !important;

  }


  /* =====================
     METHODE
     ===================== */

  .method-grid {

    display:
      block !important;

  }


  .method-copy {

    margin-bottom:
      30px;

  }


  .method-steps article {

    grid-template-columns:
      42px 1fr !important;

    gap:
      12px !important;

    width:
      100%;

    padding:
      17px !important;

  }


  .method-steps article > span {

    width:
      38px !important;

    height:
      38px !important;

  }


  /* =====================
     ABOUT
     ===================== */

  .about-grid {

    display:
      flex !important;

    flex-direction:
      column !important;

    gap:
      30px !important;

  }


  .about-visual {

    order:
      2;

    position:
      relative;

    width:
      100% !important;

    max-width:
      100% !important;

    height:
      310px !important;

    margin:
      0 auto;

    overflow:
      hidden;

  }


  .about-copy {

    order:
      1;

  }


  .globe {

    width:
      120px !important;

    height:
      120px !important;

    font-size:
      65px !important;

  }


  .ring-1 {

    width:
      180px !important;

    height:
      180px !important;

  }


  .ring-2 {

    width:
      235px !important;

    height:
      235px !important;

  }


  .ring-3 {

    width:
      290px !important;

    height:
      290px !important;

  }


  .country-chip {

    padding:
      6px 9px !important;

    font-size:
      9px !important;

  }


  .chip-1 {
    left:
      2px !important;

    top:
      55px !important;
  }


  .chip-2 {
    right:
      2px !important;

    top:
      45px !important;
  }


  .chip-3 {
    left:
      2px !important;

    bottom:
      55px !important;
  }


  .chip-4 {
    right:
      2px !important;

    bottom:
      68px !important;
  }


  /* =====================
     EVALUATION
     ===================== */

  .evaluation-grid {

    display:
      block !important;

  }


  .evaluation-copy {

    margin-bottom:
      30px;

  }


  .form-card {

    width:
      100% !important;

    max-width:
      100% !important;

    padding:
      22px 17px !important;

    border-radius:
      18px !important;

  }


  .form-top {

    flex-direction:
      column !important;

    gap:
      8px !important;

  }


  .form-grid {

    grid-template-columns:
      1fr !important;

    gap:
      0 !important;

  }


  .form-card label {

    width:
      100%;

  }


  .form-card input,
  .form-card select,
  .form-card textarea {

    display:
      block;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    font-size:
      16px !important;

  }


  .submit-btn {

    width:
      100% !important;

    min-height:
      52px;

    padding:
      10px 15px;

  }


  .direct-contact a {

    width:
      100%;

  }


  .direct-contact b {

    max-width:
      100%;

    font-size:
      13px;

    overflow-wrap:
      anywhere;

  }


  /* =====================
     CONTACT
     ===================== */

  .contact-grid {

    display:
      block !important;

  }


  .contact-copy {

    margin-bottom:
      28px;

  }


  .contact-boxes {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    width:
      100%;

    border-radius:
      17px !important;

  }


  .contact-boxes a {

    width:
      100%;

    padding:
      19px 17px !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--line) !important;

  }


  .contact-boxes a:last-child {

    border-bottom:
      0 !important;

  }


  .contact-boxes b {

    font-size:
      13px !important;

    overflow-wrap:
      anywhere;

  }


  /* =====================
     FOOTER
     ===================== */

  .footer {

    padding:
      45px 0 18px !important;

  }


  .footer-grid {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      27px !important;

  }


  .footer-brand img {

    width:
      175px !important;

  }


  .footer-bottom {

    display:
      flex !important;

    flex-direction:
      column !important;

    gap:
      10px !important;

  }


  /* =====================
     WHATSAPP
     ===================== */

  .whatsapp-float {

    right:
      14px !important;

    bottom:
      14px !important;

    width:
      52px !important;

    height:
      52px !important;

    font-size:
      24px !important;

  }

}


/* ========================================
   4. PETITS TELEPHONES
   iPhone SE / petits Android
   ======================================== */

@media screen and (max-width: 380px) {

  .container {

    width:
      calc(100% - 22px)
      !important;

    max-width:
      calc(100% - 22px)
      !important;

  }


  .hero h1 {

    font-size:
      31px !important;

  }


  .showcase-frame {

    padding:
      18px 15px !important;

  }


  .showcase-title {

    font-size:
      21px !important;

  }


  .floating-card {

    padding:
      12px !important;

  }


  .section {

    padding:
      47px 0 !important;

  }


  .form-card {

    padding:
      18px 14px !important;

  }


  .section-intro h2,
  .section-heading h2,
  .method-copy h2,
  .about-copy h2,
  .evaluation-copy h2,
  .contact-copy h2 {

    font-size:
      28px !important;

  }

}


/* ========================================
   5. MODE PAYSAGE TELEPHONE
   ======================================== */

@media screen
and (max-height: 500px)
and (orientation: landscape) {

  .hero-grid {

    min-height:
      auto !important;

  }


  .hero-copy {

    padding-top:
      35px !important;

  }


  .hero-showcase {

    min-height:
      350px !important;

  }

}