/* ============================================================
   SECTION ORGANISER SON VOYAGE  —  module autonome
   Mobile-first.  Toutes les classes préfixées .organiser-*
   pour pouvoir réutiliser le bloc sur d'autres pages sans
   collision avec d'autres sections (ex. trouvailles).

   Sources Figma :
     • Desktop : 600:4515  — cards 583×344
     • Mobile  : 600:2562  — cards 320×189 (carousel scroll)

   Layout cards ≥769px  —  adaptatif selon nombre de cards
   (détecté CSS-only via :has()).

   Cards toujours à la taille Figma desktop : 583×344 (fixe).

     ▸ 3+ cards  →  50 / 100 / 50 EXACT sur toute la largeur écran
        Pour que le 50/100/50 soit exact à toute largeur, les
        cards scalent avec le viewport :
            cw = (100vw − 80) / 2     (gap = 40)
            0.5·cw + 40 + cw + 40 + 0.5·cw = 2cw + 80 = 100vw  ✓
        Image height via aspect-ratio 583/344 (proportions Figma
        préservées). À vw=1246, cards = 583 (taille Figma exacte).
        En dessous, plus petites ; au-dessus, plus grandes.

     ▸ 1 ou 2 cards →  card 1 alignée avec le titre
        scroll-wrap revient en flow normal dans le container
        max-w 1366. Le grid démarre à container_left
        (= même X que le titre = même X que "Menu" du header).

   Alignement titre ↔ Menu header :
     mirror exact du .header → section padding identique
     + container max-w 1366 + margin auto.
============================================================ */

.section-organiser {
  /* Inset horizontal partagé titre <-> cards.
     Une seule source pour garantir l'alignement vertical
     parfait entre "Organiser son voyage" et l'image 1. */
  --organiser-inset-left: 30px;

  background-color: #ffffff;
  padding: 40px 0;
}

.organiser-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* ---- Header (eyebrow + flèches) -------------------------- */
.organiser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px 0 var(--organiser-inset-left);
}

.organiser-arrows {
  display: none;
  gap: 10px;
  align-items: center;
}

.organiser-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #9f9a7c;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.organiser-arrow-btn img {
  width: 20px;
  height: 20px;
}

.section-organiser .organiser-arrow-btn:hover { opacity: 0.65; }
.section-organiser .organiser-arrow-btn:active { transform: scale(0.92); }
.section-organiser .organiser-arrow-btn.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}
.section-organiser .organiser-arrow-btn:focus-visible {
  outline: 2px solid #9f9a7c;
  outline-offset: 4px;
}

/* ---- Scroll wrap (carousel mobile) -----------------------
   Même variable que le header → carte 1 commence pixel-pour-pixel
   à la même position X que le titre "Organiser son voyage". */
.organiser-scroll {
  padding-left: var(--organiser-inset-left);
  scroll-padding-left: var(--organiser-inset-left);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.organiser-scroll::-webkit-scrollbar {
  display: none;
}

.organiser-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  padding-right: 20px;
}

/* ---- Card ------------------------------------------------- */
.organiser-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 320px;
  flex-shrink: 0;
  scroll-snap-align: start;
  color: #0f1b24;
}

.organiser-card__visual {
  width: 320px;
  aspect-ratio: 583 / 344;
  overflow: hidden;
}

.organiser-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   ≥ 769px  —  Layout cards 50/100/50 toute la largeur écran
   Logique partagée tablet + desktop. Seuls section padding et
   max-width container changent pour caler le titre sur le
   header (cf. blocs spécialisés en bas).
============================================================ */
@media (min-width: 769px) {
  .section-organiser {
    overflow: hidden;
  }

  .organiser-container {
    gap: 30px;
    max-width: 1366px;
    margin: 0 auto;
  }

  .organiser-header {
    padding: 0;
  }

  .organiser-arrows {
    display: flex;
  }

  /* Scroll-wrap : pleine largeur écran (100vw) via margin
     calc(50% − 50vw), qui sort du container max-w 1366. */
  .organiser-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    overflow: hidden;
    position: relative;
    scroll-snap-type: none;
  }

  /* Grid décalé de -cw/2 pour que la carte 0 démarre à -cw/2
     dans le scroll-wrap (= 100vw) → 50% cachée à gauche, suivie
     de gap + carte 1 (100%) + gap + carte 2 (50%). Soit le
     50/100/50 exact à toute largeur écran (les cards scalent).

       cw = (100vw − 80) / 2  →  -cw/2 = (80 − 100vw) / 4

     Indépendant de N : le décalage est calé sur la carte 0.
     Corrige aussi le bug où un centrage géométrique tombait
     dans un gap pour N=4.

     --organiser-slide-offset : translation additionnelle
     pilotée par JS sur clic des flèches. Default 0 → état
     initial 50/100/50 sur les 3 premières cards. */
  .organiser-grid {
    margin-left: calc((80px - 100vw) / 4);
    transform: translateX(var(--organiser-slide-offset, 0px));
    transition: transform 400ms ease;
    flex-wrap: nowrap;
    gap: 40px;
    width: max-content;
    padding-right: 0;
  }

  /* Cards fluides : largeur dérivée du viewport pour 50/100/50
     exact. Les proportions Figma sont préservées par le visual
     (aspect-ratio 583/344, hérité de la base mobile). */
  .organiser-card {
    gap: 20px;
    width: calc((100vw - 80px) / 2);
    flex-shrink: 0;
    scroll-snap-align: none;
  }

  .organiser-card__visual {
    width: 100%;
    height: auto;
  }

  /* === 1 ou 2 cards : carte 1 alignée avec le titre =========
     :not(:has(.organiser-card:nth-child(3))) → la grille n'a
     ni 3e carte ni plus. On annule le scroll-wrap 100vw + le
     décalage du grid : tout revient en flow normal dans le
     container max-w 1366. Le grid démarre à container_left
     (même X que le titre = même X que "Menu" du header).
     Cards repassent en taille Figma 583×344 fixe (pas de
     scaling fluide quand il n'y a pas de carrousel).
  ============================================================ */
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    position: static;
  }

  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) .organiser-grid {
    position: static;
    margin-left: 0;
    transform: none;
    width: auto;
  }

  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) .organiser-card {
    width: 583px;
  }

  /* < 3 cards : pas de carousel à parcourir → flèches masquées. */
  .section-organiser:not(:has(.organiser-card:nth-child(3))) .organiser-arrows {
    display: none;
  }
}


/* ============================================================
   TABLETTE  —  769px → 1100px
   Mirror du .header tablet (padding 0 40px) → titre aligné
   avec le label "Menu" du header.
============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  .section-organiser {
    padding: 40px 40px;
  }
}


/* ============================================================
   DESKTOP  —  ≥ 1101px
   Mirror du .header desktop (padding 0 100px) → titre aligné
   avec le label "Menu" du header.
============================================================ */
@media (min-width: 1101px) {
  .section-organiser {
    padding: 40px 100px;
  }
}