/* ==========================================================================
   MAROC EN SAC À DOS — responsive.css
   Approche mobile-first : 360 → 390 → 600 → 768 → 1024 → 1180 → 1280 → 1440+
   ========================================================================== */

/* ---------- Très petits écrans (≤ 380px) ---------- */
@media (max-width: 380px) {
  .brand__text { font-size: .9rem; }
  .brand__mark { width: 40px; height: 40px; }
  .hero__actions .btn { width: 100%; }
  .float-chip { padding: 8px 10px; }
  .float-chip--riddle { right: 0; }
  .tabs__tab { padding: 11px 14px; font-size: .78rem; }
  .jstep__num { font-size: 2.4rem; }
}

@media (max-width: 599px) {
  .tabs__list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tabs__tab { text-align: center; }
  .hero__proof { gap: 8px 16px; }
  .pricing__ctas .btn, .final-cta__actions .btn { width: 100%; }
  .final-cta__actions { width: 100%; }
  .footer__giant { transform: translateY(12%); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin-top: 0; }
  .lightbox__prev { left: calc(50% - 56px); }
  .lightbox__next { right: calc(50% - 56px); }
}

/* ---------- ≥ 600px ---------- */
@media (min-width: 600px) {
  .how__grid, .testi__grid, .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
  .float-chip--badge { display: inline-flex; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .footer__cols > :last-child { grid-column: auto; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- ≥ 768px (tablette) ---------- */
@media (min-width: 768px) {
  :root { --header-h: 96px; }
  .section-head--split { grid-template-columns: 1.4fr 1fr; gap: 48px; }
  .section-head--split .section-head__aside { justify-self: end; }
  .aud { grid-template-columns: 1fr 1.1fr; }
  .adventure__features { grid-template-columns: 1fr; }
  .hero__scroll { display: block; }
  .footer__top { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .journey__meter { display: flex; }
  .page-hero__grid { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- ≥ 1024px (desktop) ---------- */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; }
  .hero-phone .phone--sm { --pw: clamp(140px, 14vw, 200px); }
  .hero { display: flex; align-items: center; }
  .hero__inner { width: 100%; }
  .adventure__grid { grid-template-columns: 1fr 1.05fr; }
  .how__grid { grid-template-columns: repeat(4, 1fr); }
  .how-card:nth-child(even) { margin-top: 48px; }
  .pricing__grid { grid-template-columns: repeat(4, 1fr); align-items: center; }
  .price-card--featured { padding-block: 44px 34px; transform: scale(1.03); }
  .price-card--featured:hover { transform: scale(1.03) translateY(-8px); }
  .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
  .testi__grid { grid-template-columns: repeat(4, 1fr); }
  .testi:nth-child(even) { transform: translateY(32px); }

  /* App : téléphone collant, étapes qui défilent */
  .app__grid { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .app__phone-col { position: sticky; top: calc(50vh - (var(--pw-lg) * 2.17 / 2) - 10px); --pw-lg: clamp(260px, 22vw, 320px); }
  .app__phone-col .phone--lg { --pw: var(--pw-lg); }
  .app__steps { gap: 14px; }
  .app-step { min-height: 26vh; display: flex; align-items: center; }
  .app-step:last-child { min-height: 40vh; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); max-width: 780px; }
}

/* ---------- Journey horizontal (desktop, mouvement autorisé) ---------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .journey__pin { height: 100vh; min-height: 640px; padding-top: 72px; padding-bottom: 24px; display: flex; flex-direction: column; overflow: hidden; }
  .journey__head .h2 { font-size: clamp(2rem, 3vw, 3.2rem); }
  .journey__head .eyebrow { margin-bottom: 12px; }
  .journey__viewport { flex: 1; margin-top: 8px; min-height: 0; }
  .journey__track {
    position: relative; height: 100%; max-width: none; margin: 0; padding: 0;
    width: 330vw; will-change: transform;
  }
  .journey__route { display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 34%; transform: translateY(-50%); overflow: visible; }
  .journey__marker { display: block; position: absolute; left: 0; top: 0; width: 62px; z-index: 3; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); }
  .journey__steps { position: absolute; inset: 0; padding: 0; display: block; }
  .journey__steps::before, .journey__steps::after { display: none; }
  .jstep { position: absolute; left: var(--x); top: 50%; width: 0; height: 0; }
  .jstep__pin { left: -16px; top: -16px; width: 32px; height: 32px; box-shadow: 0 0 0 8px rgba(6, 48, 63, .8); }
  .jstep__pin span { width: 12px; height: 12px; }
  .jstep.is-active .jstep__pin span { animation: pinBeat 1.6s ease-in-out infinite; }
  @keyframes pinBeat { 50% { transform: scale(1.5); } }
  .jstep__card { position: absolute; left: -48px; width: clamp(480px, 36vw, 560px); padding: 14px; display: grid; grid-template-columns: 40% 1fr; gap: 18px; align-items: stretch; transition: opacity .6s, transform .7s var(--ease-out), border-color .4s, background-color .4s; }
  .jstep--down .jstep__card { top: 34px; }
  .jstep--up .jstep__card { bottom: 34px; }
  .jstep:not(.is-active) .jstep__card { opacity: .42; transform: translateY(14px) scale(.97); }
  .jstep--up:not(.is-active) .jstep__card { transform: translateY(-14px) scale(.97); }
  .jstep__photo { margin: 0; aspect-ratio: auto; min-height: 170px; border-radius: 999px 999px 14px 14px; }
  .jstep__body { padding: 8px 6px 4px 0; display: flex; flex-direction: column; }
  .jstep__foot { margin-top: auto !important; padding-top: 12px; }
  .jstep__num { font-size: 2.2rem; }
  .jstep__city { font-size: 1.5rem; }
  .jstep__head { gap: 12px; }
  .jstep__title { margin-top: 12px; }
  .jstep__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .jstep__challenge { margin-top: 10px; padding: 8px 10px; font-size: .84rem; }
  .jstep__title { font-size: .95rem; }
  .jstep__coords { font-size: .68rem; }
  .jstep__foot { margin-top: 12px; }
  .journey__finish { position: absolute; left: 96%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; margin: 0; text-align: center; }
  .journey__finish svg { width: 96px; height: 96px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (max-height: 1000px) {
  .jstep__text { display: none; }
  .jstep__title { margin-top: 12px; }
  .jstep__num { font-size: 2.4rem; }
}

/* ---------- ≥ 1180px : navigation complète ---------- */
@media (min-width: 1180px) {
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 1280px) {
  .nav__link { padding: 10px 16px; }
  .hero__inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≥ 1440px ---------- */
@media (min-width: 1440px) {
  :root { --container: 1400px; }
}

/* ---------- Écrans larges et peu hauts : hero compact ---------- */
@media (min-width: 1024px) and (max-height: 780px) {
  .hero__title { font-size: clamp(2.8rem, 5.2vw, 5rem); }
  .hero__visual { max-width: 520px; }
}

/* ---------- Journey : écrans bas (≤ 800px de haut) ---------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (max-height: 800px) {
  .journey__pin { padding-top: 64px; }
  .journey__head .h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
  .jstep__card { grid-template-columns: 34% 1fr; }
  .jstep__photo { min-height: 132px; }
  .jstep__challenge { display: none; }
  .jstep--down .jstep__card { top: 26px; }
  .jstep--up .jstep__card { bottom: 26px; }
}