/* ============================================================
   PAGE TROUVAILLES (finding_home)  —  foundation
   Mobile-first. Réutilise base.css (tokens typo/couleurs/boutons).
   Figma desktop : 779:1560   |   Figma mobile : 779:1070
   ------------------------------------------------------------
   Gouttières (mirror header) : 30px mobile / 40px tablette /
   100px desktop, contenu 1166, centré au-delà de 1366.
============================================================ */

/* Harmonise .container (base.css) avec la gouttière header sur
   toute la plage de largeur. Scopé à cette page (finding.css n'est
   chargé que sur la page Trouvailles). */
@media (min-width: 769px) and (max-width: 1100px) {
  .container { padding: 0 40px; max-width: 100%; }
  /* NB : les cartes du bloc Suggestions ne se redimensionnent plus (taille fixe) ;
     voir la section « SUGGESTIONS — responsive » plus bas. */
}
@media (min-width: 1101px) {
  .container {
    max-width: min(1166px, calc(100% - 200px));
    margin-inline: auto;
    padding: 0;
  }
}

/* ============================================================
   HEADER  — identique aux pages pays / voyage / destinations
   topbar.css garde .header-transparant en display:none (sticky au
   scroll uniquement). country.css le passe en display:block sur ces
   pages : le header devient une barre opaque (sauge/beige) en flux,
   qui pousse le contenu vers le bas (plus de chevauchement du hero).
   On réplique ici cette règle (scopée à la page Trouvailles).
============================================================ */
.header-transparant { display: block; }
@media (min-width: 1100px) {
  .header-transparant { display: block; }

  /* Corrections pixel Figma (779:1561) :
     texte ink #0f1b24 (au lieu de #2D2D2D), gap Menu↔Destinations 20px,
     logo 373×27. */
  .header-transparant .menu,
  .header-transparant .destinations-menu { color: #0f1b24; }
  .header-transparant .menu { margin-right: 0; }
  .header-transparant .topbar_top .image-logo { width: 373px; height: 27px; }
  /* CTA devis toujours sur une seule ligne (Figma : whitespace-nowrap) */
  .header-transparant .btn-quote_request { white-space: nowrap; }

  /* Rangée droite : CTA · devise · icône "espace client".
     Aucun élément ne rétrécit → l'icône person reste à sa taille (20px)
     et visible à droite, juste à côté du sélecteur de devise. */
  .header-transparant .right-menu { align-items: center; }
  .header-transparant .right-menu > * { flex-shrink: 0; }
  .header-transparant .right-menu > a:last-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-transparant .right-menu > a:last-child img {
    width: 20px;
    height: 20px;
    display: block;
  }
}

/* ============================================================
   HERO  (titre + visuel + fil d'ariane)
   Figma desktop 779:1576  |  mobile 779:1089
============================================================ */
.section-finding-hero {
  background-color: #efece9;
  padding: 20px 0;
}

.finding-hero {
  display: flex;
  flex-direction: column;
}

/* En-tête de section partagé (eyebrow à gauche, méta/flèches à droite).
   Empilé sur mobile (Figma 779:1133), en ligne dès 769px. */
.section-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}
@media (min-width: 769px) {
  .section-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}
.bar_title_hero{
  color: #9F9A7C;

  /* Suit la taille responsive du titre (26px hamburger → 50px full) */
  font-family: Asul;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
}
.finding-hero__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
  text-align: center;
}

.finding-hero__image {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 30px;
  background-color: #d9d4ce;
}
.finding-hero__image { position: relative; }
.finding-hero__image img {
  width: 100%;
  height: 100%;
  /* Responsive : l'image zoome/dézoome pour couvrir la zone (object-fit),
     reste toujours centrée (object-position) et la hauteur est constante
     (350px, imposée par le conteneur — aucune variation par breakpoint). */
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Empêche l'enregistrement de l'image (glisser + appui long mobile) */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none;
}
.finding-hero__credit {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.finding-hero__breadcrumb {
  margin-top: 30px;
}
/* Fil d'ariane : réutilise les classes .breadcrumb / __light / __bold
   (breadcrumb.css). Reset du style legacy bootstrap éventuel. */
.finding-hero__breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: block;
  /* Le titre (appelation) passe à la ligne mot par mot, jamais en coupant
     un mot au milieu. Écrase le word-break:break-word de breadcrumb.css
     (mobile), qui coupait l'appelation en plein mot quand elle wrappait. */
  word-break: normal;
  overflow-wrap: normal;
}
.finding-hero__breadcrumb .breadcrumb .breadcrumb__bold {
  word-break: normal;
  overflow-wrap: normal;
}
.finding-hero__breadcrumb .breadcrumb a { color: #0f1b24; }
.finding-hero__breadcrumb .breadcrumb .sep { padding: 0 6px; color: #0f1b24; }

@media (min-width: 769px) {
  .section-finding-hero {
    padding-top: 40px;
  }
  .finding-hero__image {
    margin-top: 40px;
  }
  .finding-hero__breadcrumb {
    margin-top: 20px;
  }
}

/* Grand titre : la taille de police bascule UNIQUEMENT au changement de
   structure du site (breakpoint 1100). Menu hamburger (<1100) → taille
   mobile (26px, centré) ; menu complet (≥1100) → taille desktop (50px). */
@media (min-width: 1100px) {
  .finding-hero__title {
    font-size: 50px;
    line-height: 1;
    text-align: left;
  }
}

/* ============================================================
   MAP  (carte interactive Google, plein conteneur, arrondie)
   Figma desktop 779:1615  |  mobile 779:1119
============================================================ */
.section-finding-map {
  background-color: #efece9;
  border-top: 0.7px solid #c3c3c3;
  padding: 40px 0 0;
}

.finding-map {
  width: 100%;
  height: 350px;
  overflow: hidden;
  position: relative;
  background-color: #d9d4ce;
}
.finding-map #map_1,
.finding-map .map-space {
  width: 100%;
  height: 100%;
}

@media (min-width: 769px) {
  .section-finding-map {
    padding: 60px 0 0;
  }
  .finding-map {
    height: 400px;
  }
}

/* ============================================================
   ORGANISER SON VOYAGE — page Trouvailles
   Carrousel ÉLASTIQUE (transform translate3d, rubber-band + snap),
   identique au bloc Inspirations. Borné à 1366px ; cartes à la taille
   Figma (desktop 583×344, mobile 320×189). Piloté par finding.js.
   Scopé à cette page (finding.css chargé uniquement ici).
============================================================ */
/* Base (mobile) : modèle transform — inset porté par la piste,
   la fenêtre masque le débordement. */
.organiser-scroll {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding-left: 0;
}
.organiser-scroll.is-static { cursor: default; }
.organiser-scroll.is-dragging { cursor: grabbing; user-select: none; }
.organiser-scroll.is-dragging a { cursor: grabbing; }
.organiser-scroll.is-dragging img { pointer-events: none; }
.organiser-grid {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  padding-left: 30px;
  padding-right: 30px;
}

/* Flèches du carrousel « Organiser son voyage » — visibilité responsive.
   Masquées par défaut : en structure réduite (menu hamburger, < 1100px) le
   carrousel se parcourt au glissement → pas de flèches. Elles sont réaffichées
   en structure complète (≥ 1100px) dans le bloc média plus bas, où le padding
   header de 100px les place — et les maintient au resize — à 100px du bord droit.
   Masquées aussi quand il n'y a rien à faire défiler (.is-static posé par
   finding.js), comme le bloc Inspirations. */
.section-organiser .organiser-arrows { display: none; }
.section-organiser.is-static .organiser-arrows { display: none !important; }

/* Survol des images du carrousel Organiser : léger zoom. overflow:hidden est
   déjà posé sur .organiser-card__visual → le zoom reste contenu dans le cadre. */
.section-organiser .organiser-card__visual img {
  transition: transform 0.45s ease;
  will-change: transform;
}
.section-organiser .organiser-card__visual:hover img {
  transform: scale(1.06);
}

/* ------------------------------------------------------------
   RESPONSIVE — bascule sur la STRUCTURE du site (breakpoint 1100).
   • ≥ 1100px (structure complète)  : cartes à taille FIXE (Figma 583×344),
     espacement FIXE (40px) — aucun redimensionnement.
   • < 1100px (menu hamburger)      : position, taille des cartes et
     espacement = version mobile (320×189, gap 20px, inset 30px).
   On ré-affirme les valeurs voulues pour neutraliser le layout desktop du
   module partagé organiser.css (qui bascule dès 769px), y compris ses règles
   de repli 1–2 cartes (:not(:has(3)), forte spécificité).
------------------------------------------------------------ */

/* < 1100px : version mobile sur toute la plage hamburger (tablette incluse). */
@media (max-width: 1099px) {
  .section-organiser { padding: 40px 0; }

  .organiser-container {
    max-width: none;
    margin: 0;
    width: 100%;
    gap: 20px;
  }

  .organiser-header { padding: 0 20px 0 30px; }

  .organiser-scroll,
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) {
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: static;
  }
  .organiser-grid,
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) .organiser-grid {
    margin-left: 0;
    gap: 20px;                 /* espacement mobile (fixe) */
    width: max-content;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Taille mobile (320×189), quel que soit le nombre de cartes. */
  .organiser-card,
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) .organiser-card {
    width: 320px;
    gap: 24px;
  }
  .organiser-card__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 583 / 344;
  }

  /* Clones de boucle masqués : en structure réduite le glissement ne parcourt
     que les cartes réelles (pas de boucle). */
  .organiser-grid .organiser-clone { display: none; }
}

/* ≥ 1100px : structure complète — cartes et espacement FIXES (pas de
   redimensionnement) ; carrousel centré/boucle piloté par finding.js. */
@media (min-width: 1100px) {
  .section-organiser { padding: 40px 0; }

  /* Conteneur borné à la structure 1366px, centré. */
  .organiser-container {
    max-width: 1366px;
    margin: 0 auto;
    gap: 30px;
  }

  .organiser-header { padding: 0 100px; }

  /* Fenêtre du carrousel (≤1366) ; la piste est translatée par JS. */
  .organiser-scroll,
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) {
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: static;
  }
  .organiser-grid,
  .organiser-scroll:not(:has(.organiser-card:nth-child(3))) .organiser-grid {
    margin-left: 0;
    gap: 40px;                 /* espacement FIXE */
    width: max-content;
    padding-left: 100px;
    padding-right: 100px;
  }

  /* Cartes à taille FIXE Figma desktop (583×344). */
  .organiser-card { width: 583px; }
  .organiser-card__visual {
    width: 583px;
    height: 344px;
    aspect-ratio: auto;
  }

  /* Slider dès 2 cartes (1 carte → pas de slider). Le padding 100px cale les
     flèches à 100px du bord droit et les y maintient au resize. :has(2) écrase
     la règle :has(3) du module partagé (organiser.css). */
  .section-organiser:has(.organiser-card:nth-child(2)) .organiser-arrows { display: flex; }
  .section-organiser:not(:has(.organiser-card:nth-child(2))) .organiser-arrows { display: none; }
}

/* ============================================================
   SUGGESTIONS — responsive (bloc « Nos voyages … »)
   Comportement demandé :
   • pas de redimensionnement des cartes (taille FIXE = 362px, Figma) ;
   • pas de redimensionnement de l'espace entre les cartes (40px fixe) ;
   • une carte qui ne tient plus dans la section passe à la ligne, SOUS
     les autres (flex-wrap) ;
   • alignement à gauche (sous la carte de gauche) ;
   • espacement vertical entre rangées : 40px.
   Scopé à .suggestion-package-card (classe propre à cette page) ; le
   module partagé suggestions.css / la page Pays ne sont pas impactés.
============================================================ */
.section-suggestions .cards-grid--3 {
  flex-wrap: wrap;
  gap: 40px;                       /* 40px horizontal ET vertical, fixe */
  justify-content: flex-start;     /* aligné à gauche */
}
.section-suggestions .cards-grid--3 > .suggestion-package-card {
  width: 362px;                    /* taille Figma, jamais redimensionnée */
  flex: 0 0 362px;                 /* ni grow ni shrink → largeur constante */
  max-width: 100%;                 /* garde-fou : pas de scroll horizontal en très petit écran */
}

/* ============================================================
   SUGGESTIONS — typographie carte conforme Figma (779:1633)
   • Pays      : Lexend Light 15/24  (.body-m, déjà OK)
   • Titre     : Asul 20            (.heading-s, déjà OK)
   • Description: Lexend Light 15/24 → 13/22 (.body-s, 2 lignes max)
   • Séjour/prix: Lexend REGULAR 15/24 → 13/22 (et non Lexend Deca)
   • Découvrir : Lexend Deca 16/1.7 sauge souligné (.link-decouvrir, OK)
============================================================ */
.suggestion-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;              /* 2 lignes maximum ; au-delà → « … » */
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #0f1b24;
  /* Hauteur figée = 2 lignes (2 × 24px, line-height de .voyage-card .body-s en
     mobile) : même si la description est plus courte (ou absente), le bloc réserve
     2 lignes → le prix et « Découvrir » s'alignent sur les 3 cartes. */
  height: 48px;
}

/* Titre de la carte : 2 lignes MAXIMUM, au-delà → « … » (-webkit-line-clamp).
   Le min-height réserve toujours 2 lignes : une carte dont le titre tient sur
   1 ligne occupe la même hauteur qu'une carte sur 2 lignes → la description, le
   prix et « Découvrir » restent alignés entre les cartes (sinon décalage). */
.suggestion-package-card .voyage-card__body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* coupe à 2 lignes, ajoute « … » */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 26px;
  min-height: 52px;                    /* 2 × 26px */
}

.suggestion-price {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
}

/* Survol de la carte : léger zoom de l'image (overflow:hidden est déjà posé
   sur .voyage-card__image, le zoom reste donc contenu dans le cadre arrondi).
   Scopé au bloc « Nos voyages … » de la page Trouvailles. */
.suggestion-package-card .voyage-card__image img {
  transition: transform 0.45s ease;
  will-change: transform;
}
.suggestion-package-card:hover .voyage-card__image img {
  transform: scale(1.06);
}

/* Toute la carte cliquable (image + titre + description + prix + bouton) →
   page du package. Motif « stretched link » : le lien « Découvrir » projette
   un overlay transparent sur toute la carte via ::after. Les liens image/titre
   pointent déjà vers la même URL, donc aucun conflit de destination. */
.suggestion-package-card {
  position: relative;
}
.suggestion-package-card .link-decouvrir::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (min-width: 769px) {
  .suggestion-price {
    font-size: 13px;
    line-height: 22px;
  }
  .suggestion-desc {
    height: 44px;                    /* 2 × 22px (line-height .body-s desktop) */
  }
}