/* Animations du site (validées par Haris le 20/10, d'après la démo) : cartes des circuits, boutons, menu mobile,
   confirmation d'envoi des formulaires. Chargé sur toutes les pages (site/lib/animations.mjs), avec animations.js.
   Tout ce qui bouge est réservé aux visiteurs qui n'ont pas demandé à réduire les animations ; les effets de survol,
   aux écrans avec souris. Ressort : cubic-bezier(.34,1.56,.64,1) ; sortie douce : cubic-bezier(.2,.8,.2,1). */

@media (prefers-reduced-motion: no-preference) {

  /* Cartes des circuits : toute la carte se soulève avec une ombre ; la photo zoome plus lentement (le zoom IX2
     de Webflow est neutralisé). */
  .package-slide-content-wrapper { transition: translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1); }
  .package-thumbnail-wrapper { -webkit-mask-image: -webkit-radial-gradient(white, black); }
  .package-thumbnail-image { transform: none !important; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) !important; }
  @media (hover: hover) and (pointer: fine) {
    .package-slide-content-wrapper:hover { translate: 0 -6px; box-shadow: 0 22px 44px -22px rgba(2,19,27,.4); }
    .package-slide-content-wrapper:hover .package-thumbnail-image { transform: scale(1.05) !important; }
  }

  /* Boutons : léger enfoncement au clic, avec la propriété scale (IX2 utilise transform). */
  .primary-button-wrapper, .contact-page-button, .form-submit-button, .package-card-button-wrapper { transition: color .3s, background-color .3s, scale .2s cubic-bezier(.34,1.56,.64,1) !important; }
  .primary-button-wrapper:active, .contact-page-button:active, .form-submit-button:active, .package-card-button-wrapper:active { scale: .96; transition-duration: .08s !important; }

  /* Menu mobile : les liens arrivent l'un après l'autre (ordre --arb-i posé par animations.js). */
  .w-nav-menu[data-nav-menu-open] .navbar-brand,
  .w-nav-menu[data-nav-menu-open] .nav-menu-link-item,
  .w-nav-menu[data-nav-menu-open] .primary-button-wrapper { animation: arbMenu .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(120ms + var(--arb-i, 0) * 45ms); }
  @keyframes arbMenu { from { opacity: 0; transform: translateY(14px); } }

  /* Confirmation d'envoi : la carte apparaît, la coche se dessine. */
  .w-form-done { animation: arbConfirme .6s cubic-bezier(.34,1.56,.64,1) backwards; }
  @keyframes arbConfirme { from { opacity: 0; transform: translateY(14px) scale(.96); } }
  .w-form-done .arb-coche circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: arbTrace .6s cubic-bezier(.2,.8,.2,1) .2s forwards; }
  .w-form-done .arb-coche path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: arbTrace .35s cubic-bezier(.2,.8,.2,1) .65s forwards; }
  .w-form-done .arb-coche { animation: arbPopCoche .5s cubic-bezier(.34,1.56,.64,1) .1s backwards; }
  @keyframes arbTrace { to { stroke-dashoffset: 0; } }
  @keyframes arbPopCoche { from { transform: scale(.6); opacity: 0; } }
}

/* Cartes cliquables : main au survol (le clic est géré par animations.js). */
@media (hover: hover) and (pointer: fine) {
  .arb-carte { cursor: pointer; }
}

/* Confirmation d'envoi : carte blanche et coche verte (aussi sans animation ; la coche est alors déjà dessinée).
   La coche est ajoutée au HTML à la construction. */
.w-form-done { background: #fff !important; border-radius: 16px; padding: 32px 24px !important; box-shadow: 0 18px 40px -24px rgba(2,19,27,.35); color: #02131b; font-weight: 600; line-height: 1.5; }
.w-form-done .arb-coche { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }

/* ---------------------------------------------------------------------------------------------------------------
   Étape 8 UX (validée par Haris sur la démo, 22/10 ; valeurs reprises de demo-animations/webflow-footer-ux.html) :
   barre qui revient quand on remonte, sections compactes de l'accueil sur les écrans peu hauts, carrousel des tours,
   autres tours en bas des pages de tour, sélecteur de langue de l'en-tête. Comportement dans animations.js.
   Retouche du 5/11 (version 5 de la démo, demo-animations/webflow-footer-ux-v5.html) : cartes centrées avec 1 ou
   2 tours, encadré « nouvelles dates » sans tour (point 3), site à 80 % sur les portables à écran haute densité peu
   hauts (point 6) et sections compactes désactivées sur ces écrans (point 2). Suite du 5/11 (version 7,
   demo-animations/webflow-footer-ux-v7.html) : page 404 réduite elle aussi, encadré sur fond blanc sur l'accueil et
   la page Tours, et encadré à la place de « Next tour coming soon! » sur la page Tours. */

/* 1. Barre qui revient : fixe et cachée au-delà de sa hauteur + 60 px, visible en remontant. Seuls le logo, le bouton
   du menu et, sur ordinateur, la liste des liens ont un fond verre fumé (sur mobile, la liste est dans le menu plein
   écran et garde son fond). */
.site-header.arb-fixe{position:fixed!important;top:0;left:0;right:0;z-index:1001;padding-top:14px!important;padding-bottom:14px!important;transform:translateY(-115%)}
@media (prefers-reduced-motion:no-preference){.site-header.arb-fixe{transition:transform .45s cubic-bezier(.2,.8,.2,1),padding .3s ease!important}}
.site-header.arb-fixe.arb-visible{transform:none}
.site-header.arb-fixe .navbar-content-wrapper>.navbar-brand,.site-header.arb-fixe .menu-button{background:rgba(2,19,27,.5)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 28px rgba(2,19,27,.16)}
.site-header.arb-fixe .navbar-content-wrapper>.navbar-brand{border-radius:999px;padding:10px 18px;box-sizing:content-box}
.site-header.arb-fixe .menu-button{border-radius:14px}
.site-header.arb-fixe .navbar-cta-wrapper a{box-shadow:0 8px 28px rgba(2,19,27,.16)}
@media (min-width:992px){.site-header.arb-fixe .nav-menu-list-wrapper{background:rgba(2,19,27,.5)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 28px rgba(2,19,27,.16)}}

/* 2. Accueil, écrans d'ordinateur peu hauts : sections des tours et des articles compactes (la page /blog garde
   sa mise en page). Pas quand le site est déjà réduit à 80 % (portables à écran haute densité, point 6) : sinon double
   réduction (condition reprise de Webflow, 5/11). */
@media (min-width:992px) and (max-width:1279px) and (max-height:940px),(min-width:1280px) and (max-height:940px) and (max-resolution:1.19dppx),(min-width:1280px) and (max-height:940px) and (-webkit-max-device-pixel-ratio:1.19),(min-width:1280px) and (max-height:940px) and (pointer:coarse),(min-width:1280px) and (max-height:940px) and (pointer:none){
.packages-carousel-section .section-gap,[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .section-gap{padding-top:44px!important;padding-bottom:44px!important}
.packages-carousel-section .section-top-block,[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .section-top-block{margin-bottom:22px!important}
.packages-carousel-section .section-title,[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .section-title{font-size:36px!important;line-height:1.15!important}
.packages-carousel-section .package-thumbnail-wrapper{margin-bottom:12px!important}
.packages-carousel-section .package-thumbnail-image{aspect-ratio:16/9;height:auto!important;object-fit:cover}
.packages-carousel-section .package-card-title{font-size:20px!important;line-height:1.25!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.packages-carousel-section .package-card-title-block{margin-top:8px!important;margin-bottom:6px!important}
.packages-carousel-section .package-card-summary{font-size:15px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0!important}
.packages-carousel-section .package-card-bottom-block{padding-top:14px!important;padding-bottom:14px!important}
.packages-carousel-section .package-card-price-text{font-size:24px!important}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-collection-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-card-item{padding:20px!important;box-sizing:border-box!important;width:auto!important;height:100%}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-thumbnail-image{aspect-ratio:16/9;height:auto!important;width:100%;object-fit:cover}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-title-wrapper{margin-top:14px!important;margin-bottom:8px!important}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-card-title{font-size:20px!important;line-height:1.25!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
[data-wf-page="689dece4ff3cff68bf5a7312"] .blog-section .blog-card-summary{font-size:15px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px!important}
}

/* 3. Flèches rondes des carrousels de tours (accueil et pages destination) et des autres tours ; les flèches
   marron de Webflow sont cachées partout. Placées par animations.js. */
/* Centre de la flèche à left/top (posés par animations.js) : marges négatives de la moitié de sa taille. */
.arb-cote{display:none;position:absolute;z-index:5;width:56px;height:56px;margin:-28px 0 0 -28px;padding:0;border:0;border-radius:50%;place-items:center;cursor:pointer;color:#02131b;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(2,19,27,.18)}
@media (hover:hover) and (pointer:fine){.arb-cote:hover{background:#fff;box-shadow:0 14px 34px rgba(2,19,27,.26)}}
@media (prefers-reduced-motion:no-preference){
.arb-cote{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background-color .2s ease,opacity .25s ease,visibility .25s}
.arb-cote svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover) and (pointer:fine){.arb-cote:hover{transform:scale(1.1)}.arb-cote.g:hover svg{transform:translateX(-2px)}.arb-cote.d:hover svg{transform:translateX(2px)}}
.arb-cote:active{transform:scale(.92);transition-duration:.08s}
}
.arb-cote:disabled{opacity:0;visibility:hidden}
.arb-cote:focus-visible{outline:3px solid #5f9775;outline-offset:3px}
.packages-carousel-arrow{display:none!important}
.arb-carrousel .packages-carousel-block{position:relative}
.arb-carrousel .arb-cote{display:grid}
.arb-carrousel.arb-seul .arb-cote{display:none}
/* Ordinateur : place de 3 cartes, sur l'accueil et les pages destination (comme sur Webflow) ; avec 1 ou 2 tours
   (classes arb-n1 et arb-n2 posées par animations.js), cartes centrées (validé par Haris le 4/11 sur Webflow). */
@media (min-width:992px){
.packages-carousel-section .packages-carousel-slider-mask,.similar-packages-section .packages-carousel-slider-mask{width:calc(100% / 3)!important}
.packages-carousel-section .packages-carousel-slider,.similar-packages-section .packages-carousel-slider{margin-left:max(0px,calc(40px - (100vw - 100%) / 2));margin-right:max(0px,calc(40px - (100vw - 100%) / 2))}
.arb-carrousel.arb-peu .arb-cote{display:none}
.arb-carrousel.arb-n1 .packages-carousel-slider-mask{margin-left:calc(100% / 3)}
.arb-carrousel.arb-n2 .packages-carousel-slider-mask{margin-left:calc(100% / 6)}
}
@media (max-width:991px){.arb-carrousel .arb-cote{width:38px;height:38px;margin:-19px 0 0 -19px}.arb-carrousel .arb-cote svg{width:18px;height:18px}}
/* Carrousel ou page Tours sans aucun tour : remplacé à la construction par l'encadré « nouvelles dates »
   (site/lib/ux.mjs ; validé par Haris le 4/11 sur Webflow). La marge de la phrase ne vise que les paragraphes enfants
   directs : le texte du bouton et sa flèche restent sur une ligne. Fond blanc sur l'accueil et la page Tours, beige
   sur les pages destination (décision de Haris du 5/11, bloc UX v7). */
.arb-bientot{padding:48px 24px;border-radius:12px;background:#f5efe6;text-align:center}
.arb-bientot .arb-bientot-titre{font-size:28px;line-height:1.2;font-weight:500;color:#02131b;margin:0 0 10px}
.arb-bientot>p{margin:0 0 24px}
.packages-carousel-section .arb-bientot,.all-packages-section .arb-bientot{background:#fff}

/* 4. Autres tours en bas des pages de tour (HTML écrit à la construction) : cartes horizontales, 2 visibles à partir
   de 768 px, défilement horizontal au-delà de 2 ; liste verticale en dessous. */
.arb-autres{padding:80px 0 96px;background:#f5efe6;position:relative}
/* Le titre du haut des pages entre en glissant depuis la droite (animation de Webflow) : la page est un instant plus
   large que l'écran, et avec les flèches des autres tours, Chrome gardait cette largeur (14 px de défilement
   horizontal). Le haut de page est rogné sur les côtés seulement ; rien de visible n'est coupé. */
.page-hero{overflow-x:clip}
.arb-autres .arb-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.arb-autres .arb-defile{position:relative}
.arb-autres .arb-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.arb-autres .package-card-title{font-size:22px!important;line-height:1.25!important}
.arb-autres .package-slide-content-wrapper{display:grid!important;grid-template-columns:42% 1fr;align-items:stretch;padding:0!important;overflow:hidden;cursor:pointer;height:100%}
.arb-autres .package-card-top-block{display:contents}
.arb-autres .package-thumbnail-wrapper{grid-row:1/span 4;margin:0!important;border-radius:12px 0 0 12px!important;height:100%;overflow:hidden}
.arb-autres .package-thumbnail-image{height:100%!important;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
.arb-autres .package-thumbnail-image{transition:transform .6s cubic-bezier(.2,.8,.2,1)!important}
@media (hover:hover) and (pointer:fine){.arb-autres .package-slide-content-wrapper:hover .package-thumbnail-image{transform:scale(1.1)!important}}
}
.arb-autres .tour-meta-wrap{padding:18px 20px 0}
.arb-autres .package-card-title-block{padding:6px 20px 0}
.arb-autres .package-card-bottom-block{grid-column:2;padding:12px 20px 18px!important;border-top:0!important}
@media (min-width:768px){
.arb-autres .arb-grille{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.arb-autres .arb-grille::-webkit-scrollbar{display:none}
.arb-autres .arb-grille>*{scroll-snap-align:start}
/* Plus de 2 autres tours : la carte suivante dépasse un peu à droite (en CSS, pour ne pas changer la grille après
   l'affichage : Chrome gardait alors la page plus large que l'écran). */
.arb-autres .arb-grille:has(> :nth-child(3)){grid-auto-columns:calc((100% - 48px) / 2.12)}
.arb-autres .arb-defile.arb-deborde .arb-cote{display:grid;top:50%}
.arb-autres .arb-cote.g{left:0}.arb-autres .arb-cote.d{left:100%}
}
@media (max-width:767px){.arb-autres .arb-grille{grid-template-columns:1fr}}
@media (max-width:600px){
.arb-autres .package-slide-content-wrapper{grid-template-columns:38% 1fr}
.arb-autres .tour-meta-wrap{padding:12px 12px 0;font-size:12px;gap:6px}
.arb-autres .package-card-title-block{padding:4px 12px 0}
.arb-autres .package-card-title{font-size:16px!important}
.arb-autres .package-card-bottom-block{padding:8px 12px 12px!important}
.arb-autres .arb-entete .section-title{font-size:26px!important}
}

/* 5. Sélecteur de langue. En-tête, ordinateur : pilule comme les liens du menu, liste blanche ouverte au clic, au
   clavier ou au survol ; mobile : les deux langues dans le menu plein écran. Drapeaux de même taille dans tous les
   états (en-tête et pied de page). */
.arb-langue{position:relative;margin-right:10px}
.arb-langue__bouton{display:flex;align-items:center;gap:6px;padding:14px 12px;border:0;border-radius:30px;background:#ffffff0d;color:#fff;font:inherit;font-size:16px;font-weight:500;line-height:1.2;cursor:pointer}
.arb-langue__bouton:hover,.arb-langue__bouton[aria-expanded="true"]{background:var(--header-menu,#f5efe6);color:#02131b}
.arb-langue__bouton:focus-visible,.arb-langue__lien:focus-visible,.arb-langue-mobile__lien:focus-visible{outline:3px solid #5f9775;outline-offset:3px}
.site-header.arb-fixe .arb-langue__bouton{background:rgba(2,19,27,.5);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 28px rgba(2,19,27,.16)}
.site-header.arb-fixe .arb-langue__bouton:hover,.site-header.arb-fixe .arb-langue__bouton[aria-expanded="true"]{background:var(--header-menu,#f5efe6);color:#02131b}
/* Sous 1536 px, le code de la langue (« Eng », « Ita ») n'est lu que par les lecteurs d'écran : les liens du menu
   restent sur une ligne là où ils l'étaient. */
@media (max-width:1535px){.arb-langue__code{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Sous 1366 px (place mesurée : 54 px libres à 1280 px en anglais) : drapeau seul. */
@media (max-width:1365px){.arb-langue{margin-right:8px}.arb-langue__chevron{display:none}}
@media (prefers-reduced-motion:no-preference){.arb-langue__bouton{transition:background-color .3s,color .3s}.arb-langue__chevron{transition:transform .25s ease}}
.arb-langue__bouton[aria-expanded="true"] .arb-langue__chevron{transform:rotate(180deg)}
.arb-langue__drapeau{flex:none;display:block;width:20px;height:20px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(2,19,27,.12)}
.arb-langue__drapeau img{display:block;width:20px!important;height:20px!important;max-width:none;object-fit:cover}
.arb-langue__liste{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(2,19,27,.2);z-index:10}
.arb-langue__liste[hidden]{display:none}
.arb-langue__liste li{margin:0!important;padding:0!important;background:none!important;list-style:none!important}
.arb-langue__liste li::before,.arb-langue__liste li::after{content:none!important;display:none!important}
.arb-langue__lien{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#02131b;text-decoration:none;font-weight:500}
.arb-langue__lien:hover{background:#f5efe6}
.arb-langue__lien[aria-current="page"]{color:#609476}
.arb-langue-mobile__liens{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0}
.arb-langue-mobile__lien{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.25);border-radius:30px;color:#fff;text-decoration:none;font-weight:500}
.arb-langue-mobile__lien[aria-current="page"]{border-color:#7fb092;color:#7fb092}
@media (min-width:992px){.arb-langue-mobile{display:none!important}}
.ouiflow-flag-wrap{flex:none;width:1rem!important;height:1rem!important}
.ouiflow-flag-wrap img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover}

/* 6. Portables à écran haute densité peu hauts (zoom Windows ou Retina) : au moins 1280 px de large, moins de 940 px
   de haut, densité d'au moins 1,2, souris ou pavé tactile. Le modèle Webflow y donne la version « grand moniteur »
   (breakpoints 1280, 1440, 1920) avec très peu de hauteur : tout le site à 80 % (validé par Haris le 5/11 sur
   Webflow). La galerie photo plein écran (lightbox de Webflow, hauteurs en vh) garde sa taille normale. La page 404
   (100vw sur 100vh) occupe tout l'écran, contenu centré (décision de Haris du 5/11, bloc UX v7). Positions calculées en
   JavaScript : animations.js (echelle). */
@media (min-width:1280px) and (max-height:940px) and (pointer:fine) and (min-resolution:1.2dppx),(min-width:1280px) and (max-height:940px) and (pointer:fine) and (-webkit-min-device-pixel-ratio:1.2){html{zoom:.8}.w-lightbox-backdrop{zoom:1.25}.utility-page-wrap{width:125vw;height:125vh;max-width:none;max-height:none}}