/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jun 02 2026 | 23:52:15 */
/* =========================================================
   PACHAMAMA VOYAGES - PAGE CIRCUIT
   CSS VARIABLE PAR CIRCUIT

   Ce fichier contient ce qui peut changer selon le voyage :
   1) le bref itinéraire ;
   2) la logique couleur des cards jour par jour ;
   3) les ancres des jours ;
   4) les ajustements mobiles liés aux jours.

   À charger APRÈS pachamama-circuit-global.css.

   HTML conseillé pour le bouton de retour dans chaque card jour :
   <a class="pacha-back-itinerary" href="#details-etapes" aria-label="Retour au bref itinéraire">
     <i class="fa fa-arrow-up" aria-hidden="true"></i>
     <span>Bref itinéraire</span>
   </a>
========================================================= */

/* =========================================================
   NOTE D'ADAPTATION DU BREF ITINÉRAIRE

   Le bloc .pacha-brief-list reprend les jours du voyage.
   Pour chaque <li>, le lien doit pointer vers la card correspondante :
   <li><a href="#jour1"><b>Jour 1</b>Arrivée à Rio</a></li>

   Les classes .pacha-zone-start créent une séparation visuelle entre les grandes zones du voyage.
   Elles sont à déplacer selon l'itinéraire réel du circuit.
========================================================= */

/* =========================================================
   9. BREF ITINÉRAIRE CLIQUABLE
========================================================= */

body.single-tour .pacha-brief-box {
  --pacha-paper: #fff8df;
  --pacha-paper-light: #fffdf3;
  --pacha-gold: #f2a51a;
  --pacha-teal: #1f9c8a;
  --pacha-forest: #28A058;
  --pacha-coral: #df5147;
  --pacha-purple: #8f4aa8;
  --pacha-ink: #3f3a32;
  --pacha-muted: #7b6f60;
  --pacha-line: #e2c36d;

  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  background: linear-gradient(180deg, var(--pacha-paper-light) 0%, var(--pacha-paper) 100%) !important;

  border: 2px solid var(--pacha-line) !important;
  border-radius: 22px !important;
  padding: 30px 24px 26px 24px !important;
  box-shadow: 0 14px 34px rgba(80, 55, 20, 0.12) !important;
  overflow: hidden !important;
}

body.single-tour .pacha-brief-box .gdlr-core-text-box-item-content,
body.single-tour .pacha-brief-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.single-tour .pacha-brief-list {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-tour .pacha-brief-list::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;

  background: repeating-linear-gradient(
    to bottom,
    rgba(226, 195, 109, 0.85) 0,
    rgba(226, 195, 109, 0.85) 8px,
    transparent 8px,
    transparent 14px
  ) !important;

  z-index: 0 !important;
}

body.single-tour .pacha-brief-list li {
  position: relative !important;
  display: block !important;

  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(226, 195, 109, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 14px rgba(93, 67, 24, 0.05) !important;

  color: var(--pacha-ink) !important;
  box-sizing: border-box !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  overflow: visible !important;
}

body.single-tour .pacha-brief-list li:last-child {
  margin-bottom: 0 !important;
}

body.single-tour .pacha-brief-list li::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;

  background: var(--pacha-gold) !important;
  border: 4px solid var(--pacha-paper) !important;
  box-shadow: 0 2px 8px rgba(80, 55, 20, 0.22) !important;

  z-index: 2 !important;
  pointer-events: none !important;
}

body.single-tour .pacha-brief-list li a {
  position: relative !important;
  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 56px !important;
  box-sizing: border-box !important;

  padding: 15px 18px 15px 60px !important;

  color: var(--pacha-ink) !important;
  text-decoration: none !important;

  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.single-tour .pacha-brief-list li a b {
  display: inline-block !important;
  flex: 0 0 auto !important;

  color: #ffffff !important;
  background: var(--pacha-gold) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  box-shadow: 0 2px 6px rgba(80, 55, 20, 0.12) !important;
}

body.single-tour .pacha-brief-list li:hover {
  transform: translateY(-2px) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(93, 67, 24, 0.12) !important;
}

body.single-tour .pacha-brief-list li:hover a {
  color: #00833b !important;
}

/* Détail des jours dans la liste bref itinéraire */

body.single-tour .pacha-brief-list li:nth-child(-n+3)::after,
body.single-tour .pacha-brief-list li:nth-child(-n+3) a b {
  background: var(--pacha-gold) !important;
}

body.single-tour .pacha-brief-list li:nth-child(n+4):nth-child(-n+5)::after,
body.single-tour .pacha-brief-list li:nth-child(n+4):nth-child(-n+5) a b {
  background: var(--pacha-teal) !important;
}

body.single-tour .pacha-brief-list li:nth-child(n+6):nth-child(-n+8)::after,
body.single-tour .pacha-brief-list li:nth-child(n+6):nth-child(-n+8) a b {
  background: var(--pacha-forest) !important;
}

body.single-tour .pacha-brief-list li:nth-child(n+9):nth-child(-n+10)::after,
body.single-tour .pacha-brief-list li:nth-child(n+9):nth-child(-n+10) a b {
  background: var(--pacha-coral) !important;
}

body.single-tour .pacha-brief-list li:nth-child(n+11):nth-child(-n+13)::after,
body.single-tour .pacha-brief-list li:nth-child(n+11):nth-child(-n+13) a b {
  background: var(--pacha-purple) !important;
}

body.single-tour .pacha-brief-list li:nth-child(n+14):nth-child(-n+15)::after,
body.single-tour .pacha-brief-list li:nth-child(n+14):nth-child(-n+15) a b {
  background: var(--pacha-coral) !important;
}

body.single-tour .pacha-brief-list li.pacha-zone-start {
  margin-top: 22px !important;
}

body.single-tour .pacha-brief-list li.pacha-zone-start::before {
  content: "" !important;
  position: absolute !important;
  top: -13px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;

  background: repeating-linear-gradient(
    to right,
    rgba(226, 195, 109, 0.95) 0,
    rgba(226, 195, 109, 0.95) 10px,
    transparent 10px,
    transparent 16px
  ) !important;

  z-index: 1 !important;
}


/* =========================================================
   11. CARDS JOURNÉES DÉTAILLÉES

   COMMENT CHANGER LA COULEUR DES CARDS JOUR :
   Dans le HTML de chaque card, ajoute simplement la classe couleur :
   - pacha-day-gold   : jaune / doré
   - pacha-day-teal   : vert-bleu
   - pacha-day-coral  : rouge corail
   - pacha-day-purple : violet

   Exemple :
   <div id="jour1" class="pacha-day-card pacha-day-gold">
   <div id="jour4" class="pacha-day-card pacha-day-teal">
   <div id="jour9" class="pacha-day-card pacha-day-coral">
   <div id="jour11" class="pacha-day-card pacha-day-purple">

   Pour rester cohérent avec le bref itinéraire actuel :
   - Jours 1 à 3   : pacha-day-gold
   - Jours 4 à 8   : pacha-day-teal
   - Jours 9 à 10  : pacha-day-coral
   - Jours 11 à 13 : pacha-day-purple
   - Jours 14 à 15 : pacha-day-coral
========================================================= */

body.single-tour .pacha-day-card {
  --pacha-paper: #fff8df;
  --pacha-gold: #f2a51a;
  --pacha-teal: #1f9c8a;
  --pacha-forest: #28A058;
  --pacha-coral: #df5147;
  --pacha-purple: #8f4aa8;
  --pacha-ink: #3f3a32;
  --pacha-muted: #7b6f60;
  --pacha-line: #e2c36d;
  --pacha-day-color: var(--pacha-gold);

  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin: 24px 0 28px 0 !important;

  background: rgba(255, 253, 246, 0.86) !important;
  border: 1px solid rgba(226, 195, 109, 0.58) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(80, 55, 20, 0.075) !important;
  overflow: hidden !important;
}

body.single-tour .pacha-day-card.pacha-day-gold {
  --pacha-day-color: var(--pacha-gold);
}

body.single-tour .pacha-day-card.pacha-day-forest {
  --pacha-day-color: var(--pacha-forest);
}

body.single-tour .pacha-day-card.pacha-day-teal {
  --pacha-day-color: var(--pacha-teal);
}

body.single-tour .pacha-day-card.pacha-day-coral {
  --pacha-day-color: var(--pacha-coral);
}

body.single-tour .pacha-day-card.pacha-day-purple {
  --pacha-day-color: var(--pacha-purple);
}

body.single-tour .pacha-day-header {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;

  padding: 16px 20px 15px 20px !important;

  background: linear-gradient(
    180deg,
    rgba(255, 253, 246, 0.96) 0%,
    rgba(255, 248, 223, 0.68) 100%
  ) !important;

  border-bottom: 1px solid rgba(226, 195, 109, 0.55) !important;
}

body.single-tour .pacha-day-header::after {
  content: "";
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  bottom: -1px !important;
  height: 3px !important;

  background: linear-gradient(
    to right,
    var(--pacha-day-color) 0%,
    rgba(226, 195, 109, 0.35) 45%,
    transparent 100%
  ) !important;
}

body.single-tour .pacha-day-heading {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;

  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.single-tour .pacha-day-badge {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 13px !important;
  border-radius: 999px !important;

  background: var(--pacha-day-color) !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;

  box-shadow: 0 3px 8px rgba(80, 55, 20, 0.14) !important;
}

body.single-tour .pacha-day-title,
body.single-tour .pacha-day-region {
  color: var(--pacha-ink) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

body.single-tour .pacha-back-itinerary {
  position: relative !important;
  flex: 0 0 auto !important;
  z-index: 3 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  height: 36px !important;
  min-height: 36px !important;
  padding: 0 13px !important;

  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(226, 195, 109, 0.55) !important;
  border-radius: 999px !important;

  color: #6b3f12 !important;
  text-decoration: none !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;

  box-shadow: 0 3px 8px rgba(80, 55, 20, 0.08) !important;
  transition: all 0.22s ease !important;
}

body.single-tour .pacha-back-itinerary span {
  display: inline-flex !important;
  align-items: center !important;
  height: 16px !important;
  line-height: 1 !important;
}

body.single-tour .pacha-back-itinerary i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #7a4a18 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  vertical-align: middle !important;

  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

body.single-tour .pacha-back-itinerary i::before {
  display: block !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

body.single-tour .pacha-day-content {
  padding: 22px 24px 24px 24px !important;

  color: var(--pacha-muted) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

body.single-tour .pacha-day-content h3 {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  color: var(--pacha-day-color) !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

body.single-tour .pacha-day-content p {
  margin: 0 0 15px 0 !important;

  color: var(--pacha-muted) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

body.single-tour .pacha-day-content span,
body.single-tour .pacha-day-content em,
body.single-tour .pacha-day-content a {
  font-size: inherit !important;
  line-height: inherit !important;
}

body.single-tour .pacha-day-image {
  max-width: 300px !important;
  margin: 0 0 16px 24px !important;
  padding: 0 !important;
}

body.single-tour .pacha-day-image.alignright {
  float: right !important;
}

body.single-tour .pacha-day-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  border-radius: 14px !important;
  border: 3px solid #fff8df !important;
  box-shadow: 0 7px 18px rgba(80, 55, 20, 0.13) !important;
}

body.single-tour .pacha-day-image figcaption {
  margin-top: 6px !important;

  color: var(--pacha-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-style: italic !important;
  text-align: right !important;
}

body.single-tour .pacha-day-included {
  clear: both !important;

  display: flex !important;
  align-items: baseline !important;
  gap: 9px !important;

  margin-top: 18px !important;
  padding: 12px 14px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(226, 195, 109, 0.42) !important;
  border-left: 4px solid var(--pacha-day-color) !important;
  border-radius: 12px !important;

  color: var(--pacha-ink) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

body.single-tour .pacha-day-included strong {
  flex: 0 0 auto !important;
  display: inline-block !important;

  padding: 4px 9px !important;
  border-radius: 999px !important;

  background: var(--pacha-day-color) !important;
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body.single-tour .pacha-day-included-text,
body.single-tour .pacha-day-included span {
  display: inline !important;
  color: var(--pacha-ink) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

body.single-tour .pacha-included-emoji {
  display: inline-block !important;
  font-size: 1em !important;
  line-height: 1 !important;
  vertical-align: 0.01em !important;
  margin-right: 2px !important;
}

body.single-tour .pacha-day-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(80, 55, 20, 0.09) !important;
  transition: all 0.22s ease !important;
}


/* =========================================================
   16. ANCRES
========================================================= */

#details-etapes,
#jour1,
#jour2,
#jour3,
#jour4,
#jour5,
#jour6,
#jour7,
#jour8,
#jour9,
#jour10,
#jour11,
#jour12,
#jour13,
#jour14,
#jour15,
#carte,
#photos,
#tarifs,
#infos-comp,
#impacts-positifs,
#voyages-relation,
#menu-interne {
  scroll-margin-top: 120px !important;
}


/* =========================================================
   3. RESPONSIVE MOBILE - BREF ITINÉRAIRE + CARDS JOUR
   À garder dans le fichier circuit, car le nombre de jours et les zones peuvent changer.
========================================================= */

@media (max-width: 768px) {  body.single-tour .pacha-brief-box {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }

  body.single-tour .pacha-brief-list::before {
    left: 19px !important;
  }

  body.single-tour .pacha-brief-list li {
    margin-bottom: 9px !important;
    border-radius: 14px !important;
  }

  body.single-tour .pacha-brief-list li::after {
    left: 8px !important;
    width: 25px !important;
    height: 25px !important;
    border-width: 3px !important;
  }

  body.single-tour .pacha-brief-list li a {
    align-items: flex-start !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 13px 14px 13px 52px !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
  }

  body.single-tour .pacha-day-card {
    border-radius: 16px !important;
    margin: 22px 0 26px 0 !important;
  }

  body.single-tour .pacha-day-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 15px 16px 14px 16px !important;
  }

  body.single-tour .pacha-day-header::after {
    left: 16px !important;
    right: 16px !important;
  }

  body.single-tour .pacha-day-title,
  body.single-tour .pacha-day-region {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  body.single-tour .pacha-day-badge {
    font-size: 12.5px !important;
    padding: 5px 11px !important;
  }

  body.single-tour .pacha-back-itinerary {
    align-self: flex-end !important;
    padding: 5px 8px !important;
    font-size: 11.5px !important;
  }

  body.single-tour .pacha-day-content {
    padding: 20px 18px !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  body.single-tour .pacha-day-content h3 {
    font-size: 21px !important;
  }

  body.single-tour .pacha-day-content p {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  body.single-tour .pacha-day-image,
  body.single-tour .pacha-day-image.alignright {
    float: none !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  body.single-tour .pacha-day-image figcaption {
    text-align: left !important;
  }

  body.single-tour .pacha-day-included {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }


}