/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   POLICES LOCALES
   ========================================================================== */

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-v38-latin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Montaga';
    src: url('fonts/montaga-v14-latin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face { font-family:"Sport Travel Icons"; src:url("fonts/sport-travel-icons.woff2") format("woff2"),url("fonts/sport-travel-icons.woff") format("woff"),url("fonts/sport-travel-icons.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
[class^="stm-icon-"],[class*=" stm-icon-"]{font-family:"Sport Travel Icons"!important;font-style:normal;font-weight:400;line-height:1;display:inline-block;width:1em;height:1em;vertical-align:middle;-webkit-font-smoothing:antialiased}
.stm-icon-agrandir::before { content:"\e900"; }
.stm-icon-calendrier::before { content:"\e901"; }
.stm-icon-fermer::before { content:"\e902"; }
.stm-icon-non-inclus::before { content:"\e903"; }
.stm-icon-valide-cercle::before { content:"\e904"; }
.stm-icon-valide::before { content:"\e905"; }
.stm-icon-etoile::before { content:"\e906"; }
.stm-icon-etoile-pleine::before { content:"\e907"; }
.stm-icon-filtres::before { content:"\e908"; }
.stm-icon-fleche-droite::before { content:"\e909"; }
.stm-icon-fleche-gauche::before { content:"\e90a"; }
.stm-icon-fleche-haut::before { content:"\e90b"; }
.stm-icon-chevron-bas::before { content:"\e90c"; }
.stm-icon-chevron-droite::before { content:"\e90d"; }
.stm-icon-chevron-gauche::before { content:"\e90e"; }
.stm-icon-chevron-haut::before { content:"\e90f"; }


/* ==========================================================================
   VARIABLES CSS DU PROJET
   ========================================================================== */

:root {
    --font-heading: 'Fraunces', Georgia, serif;
    --font-body: 'Montserrat', Arial, sans-serif;
    --font-accent: 'Montaga', Georgia, serif;
    --st-color-brun: #4A3A31;
    --ft-color-pierre-claire : #FFFAF2;
    --st-color-sable : #F8EFE4;
    --st-color-terracota:#C97953;
    --st-color-olive:#7A8162;
    --st-color-noir-volcanique:#272424;
    --st-breadcrumb-size: 0.875rem; /* 14px, à valider */

    --subnav-h: 120px; /* à ajuster : header + hauteur de la sous-nav */

    /* Espacements (mobile first) */
    --st-section-py: 64px;
    --st-title-gap: 32px;
    --st-card-gap: 16px;
    --st-sable-pad: 24px;
    --st-radius-card: 16px;
    --st-radius-sable: 0;
    --st-header-h: 64px;

    --st-titre-h1 : clamp(2.25rem, 0.25rem + 4.1667vw, 4rem);
    --st-titre-h2 : clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
    --st-titre-h3 : clamp(1.375rem, 1.5179rem + -0.2976vw, 1.25rem);

    --header-height: 88px;        /* desktop : menu principal mesuré */
    --header-height-mobile: 56px; /* à mesurer sur mobile, voir ci-dessous */


    /* Layout : marges latérales et largeurs max */
    --st-margin-x: 20px;       /* S : jusqu'à 767 */
    --st-frame-max: 1440px;    /* cadre maximal */
    --st-content-max: 1280px;  /* contenu maximal */

    --st-aspect-ratio16-9 : 16/9;
    --st-aspect-ratio4-5 : 4/5;
  
}
@media (min-width: 768px)  { :root { --st-margin-x: 40px; } }  /* M  */
@media (min-width: 1024px) { :root { --st-margin-x: 48px; } }  /* L  */
@media (min-width: 1280px) { :root { --st-margin-x: 80px; } }  /* XL */

@media (min-width: 768px) {
  :root {
    --st-section-py: 96px; --st-title-gap: 40px; --st-card-gap: 20px;
    --st-sable-pad: 48px; --st-radius-sable: 24px; --st-header-h: 72px;
  }
}
@media (min-width: 1024px) {
  :root {
    --st-section-py: 120px; --st-title-gap: 48px; --st-card-gap: 24px;
    --st-sable-pad: 64px; --st-radius-card: 20px;
    --st-radius-sable: 32px; --st-header-h: 88px;
  }
}

body {
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
}


body .elementor-shortcode h3 a, body h3 a {
  font-family: var(--font-accent) !important;
  font-size: clamp(1.375rem, 1.5893rem + -0.4464vw, 1.1875rem) !important
}
body .elementor-shortcode h3.grid-loop {
  margin-top:10px
}

footer .elementor-icon-box-icon svg {
  stroke:var(--ft-color-pierre-claire);
}

.footer-logo a img {
  filter: brightness(0) invert(1);
}
footer .elementor-icon-box-description a{
  color:var(--ft-color-pierre-claire);
}

/* Menu : "Nos expériences" non cliquable (desktop) */
@media (max-width: 1024px) {
  .nav, .circuit-subnav {
    box-shadow:0 1px 4px rgba(0,0,0,.3)
  }
}
@media (min-width: 1025px) {
  .elementor-nav-menu li.no-click > a { cursor: default; }
}

/* ===== Liste des derniers articles (Loop Grid, 1 colonne) ===== */
.loop-derniers-articles .elementor-loop-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Une ligne = un article, avec séparateur fin en bas */
.loop-derniers-articles .loop-article {
  padding: 32px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.loop-derniers-articles .e-loop-item:last-child .loop-article {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Image */
.loop-article .elementor-widget-theme-post-featured-image {
  flex: 0 0 293px;
  max-width: 293px;
}
.loop-article .elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* Catégorie */
.loop-article__cat span span,
.loop-article__cat .elementor-heading-title span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:var(--st-color-terracota);
}

/* Titre */
.loop-article__title .elementor-heading-title {
 /* font-family: "Votre Serif", Georgia, serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0;*/
}

/* Extrait */
.loop-article__excerpt {
  max-width: 840px;
  line-height: 1.6;
}

/* Lien "Lire l'article →" */
.loop-article .elementor-button {
  background: none;
  padding: 0;
  color: var(--st-color-terracota);
  font-weight: 500;
}

/* Mobile : image au-dessus */
@media (max-width: 767px) {
  .loop-article {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .loop-article .elementor-widget-theme-post-featured-image {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
  }
  .loop-article__title .elementor-heading-title {
    font-size: 22px;
  }
}

.st-picto-before a::before, .st-picto-after a::after,
.st-avis-carousel__nav--prev::before, .st-avis-carousel__nav--next::before {
  font-family: "Sport Travel Icons" !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}
.st-picto-before a::before { margin-right: .5em; }
.st-picto-after a::after   { margin-left: .5em; }


.lien-fleche.st-picto-after a::after   { content: "\e909"; } /* fleche-droite */

/* navigation  */
.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
  margin-top:10px !important;
  margin-bottom: 10px !important;
}
nav ul li .elementor-sub-item {
  font-size: 14px !important;
  padding: 5px  !important;
}
nav ul li a {
  text-transform: none !important;
}
/*
.elementor-304 .elementor-element.elementor-element-791747ae .elementor-nav-menu--dropdown li {
  margin: 0;
}
*/
.elementor-304 .elementor-element.elementor-element-791747ae .elementor-nav-menu--dropdown {
  padding:10px
}
body nav .elementor-nav-menu--dropdown li a {
  border-radius:16px !important;
}
body nav .elementor-nav-menu--dropdown li {
  margin-top:4px;
  margin-bottom:4px;
}

body header .st-btn, body section .st-btn, #st-sticky-bar .st-btn,
.wp-grid-builder .wpgb-card .wpgb-card-footer .st-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 999px;
    color: var(--ft-color-pierre-claire);
    font-weight: bold;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}


.st-btn:hover, .st-btn:focus-visible,
#st-sticky-bar .st-btn:hover, #st-sticky-bar .st-btn:focus-visible,
.wp-grid-builder .wpgb-card .wpgb-card-footer .st-btn.terracota:hover, .wp-grid-builder .wpgb-card .wpgb-card-footer .st-btn.terracota:focus-visible {
    background: transparent !important;
    color: var(--st-color-terracota) !important;
}

body .envie .st-btn.terracota {
  border:1px solid var(--ft-color-pierre-claire);
}

body .envie .st-btn.terracota:hover {
  background:var(--ft-color-pierre-claire) !important;
  color:var(--st-color-terracota);
}

.st-btn.terracota, #st-sticky-bar .st-btn.terracota,
.wp-grid-builder .wpgb-card .wpgb-card-footer .st-btn.terracota {
  background:var(--st-color-terracota);
  border: 1px solid var(--st-color-terracota);
}




/* ===== Avis clients (shortcodes [avis_liste] / [avis_carte]) ===== */

/* =========================================================
   Carrousel d'avis
   ========================================================= */
/* ===== Carrousel d'avis ===== */
.st-carousel {
  background:var(--st-color-brun);
    padding: var(--st-sable-pad);

}

.e-con.e-parent.st-section.st-brun-avis {
  background-color:var(--st-color-brun);
  padding:var(--st-sable-pad);
}


.st-avis-carousel { position: relative; max-width: 760px; margin: 0 auto; padding: 0 64px; }

.st-avis-carousel .st-carousel-track { display: block; }
/* Desktop : une seule carte visible */
.st-avis-carousel .st-carousel-item { display: none; }
.st-avis-carousel .st-carousel-item.is-current { display: block; }

.st-avis { border: 1px solid var(--ft-color-pierre-claire);    border-radius:var(--st-radius-card) !important; padding: 20px; text-align: center; color:var(--ft-color-pierre-claire); }
.st-avis__etoiles { display: inline-flex; margin-bottom: 16px;}
.st-avis__etoile.is-on { color: var(--st-color-terracota); }
.st-avis__etoile.is-off { color: var(--ft-color-pierre-claire); }
.st-avis__texte { margin: 0 0 20px; font-family:var(--font-heading); }
.st-avis__texte p { margin: 0 0 12px; }
.st-avis__texte p:last-child { margin-bottom: 0; }
.st-avis__nom { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* Flèches rondes */
.st-avis-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  border: 1px solid #fff;
   cursor: pointer;
}
.st-avis-carousel__nav--prev { left: 0; }
.st-avis-carousel__nav--next { right: 0; }
.st-avis-carousel__nav--prev::before { content: "\e90e"; font-size: 20px; line-height: 1; color:var(--ft-color-pierre-claire) }
.st-avis-carousel__nav--next::before { content: "\e90d"; font-size: 20px; line-height: 1; color:var(--ft-color-pierre-claire)}
.st-avis-carousel__nav:hover { background:var(--ft-color-pierre-claire); color: var(--st-color-brun); }



/* Étoiles des avis : taille et espacement */
.st-avis__etoiles,
.st-avis .st-etoiles,
.st-avis [class*="etoile"],
.st-avis [class*="star"] {
  font-size: 28px;      /* taille des étoiles : ajustez (22 à 36px) */
  letter-spacing: 2px;  /* espace entre les étoiles */
  line-height: 1;
  margin-bottom: 10px;
}

/* Points : masqués en desktop */
.st-avis-carousel .st-carousel-dots { display: none; }

/* Mobile : on laisse mobile-carousel.css gérer scroll-snap + points */
@media (max-width: 767px) {
  .st-avis-carousel { padding: 0; max-width: none; }
  .st-avis-carousel .st-carousel-item,
  .st-avis-carousel .st-carousel-item.is-current { display: block; }
  .st-avis-carousel__nav { display: none; }
  .st-avis-carousel .st-carousel-dots { display: flex; }
    .st-avis__etoiles,
  .st-avis .st-etoiles,
  .st-avis [class*="etoile"],
  .st-avis [class*="star"] {
    font-size: 24px;
    letter-spacing: 4px;
  }
}
/*.st-avis-liste {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.st-avis {
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.st-avis__etoiles { display: inline-flex; gap: 2px; font-size: 20px; line-height: 1; }
.st-avis__etoile.is-on  { color: #f5a623; }
.st-avis__etoile.is-off { color: #ccc; }
.st-avis__texte {
    margin: 12px 0;
    padding: 0;
    border: 0;
    font-style: italic;
}
.st-avis__nom { margin: 0; font-weight: 600; }
*/
.fleche h3 {
  display: inline;
  position: relative;
  padding-right: 40px;
}

body header ul li::before {
   content:none;
}



/* ratio images */

.ratio-4-5 img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}


/* Force un ratio 16/9 sur les images des cartes équipe */
.card-depart {
  border-radius: var(--st-radius-card) !important;
  overflow:hidden;
}
.circuit-depart img,
.circuit-depart picture {
    display: block;
    width: 100%;
}

.circuit-depart img {
    aspect-ratio: var(--st-aspect-ratio16-9) ;   
    height: auto;           
    object-fit: cover;      
    object-position: center center; 
}
.card-depart .pastille-duree span {
  display: inline-block;
  padding: 4px 12px;
  background:var(--ft-color-pierre-claire);
  border-radius: 999px;
}


.pastille {
  aspect-ratio: 1 / 1;        /* reste parfaitement ronde */
  align-items: center;
  justify-content: center !important;
  z-index: 2;
}

ul {
  padding-left:0;
}
ul li {
  position:relative;
  list-style:none;
  padding: 6px 0 6px 26px;
}
ul li:before {
  position: absolute;
  left: 0;
  top: 10px;
  content: "\e905";
  color: var(--st-color-olive);
  font-family: "Sport Travel Icons" !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.img16-9 { 
  aspect-ratio:var(--st-aspect-ratio16-9);
}
.img4-5{ 
  aspect-ratio:var(--st-aspect-ratio4-5);
}

/* ===== FAQ ===== */

/* Ligne d'entête : titre à gauche, icône poussée à droite */
.faq .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

/* Le titre occupe toute la place disponible */
.faq .e-n-accordion-item-title-header {
  flex: 1 1 auto;
  min-width: 0;
}

/* L'icône reste à sa taille, collée au bord droit */
.faq .e-n-accordion-item-title-icon {
  flex: 0 0 auto;
  margin-left: auto;
}
.faq .e-n-accordion-item:last-child summary {
  border-width:1px 0 !important;
}

/* ===== FIN FAQ  ===== */



/* Anti-scroll horizontal */
html, body { overflow-x: clip; }

/* ==========================================================
 Trait pinceau sous H2 : 96×9 px à 14 px du titre.
   ========================================================== */
.st-h2-brush .elementor-heading-title::after, .st-h2-brush-white .elementor-heading-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 9px;
  margin-top: 30px;
  margin-inline: 0 auto;   /* par défaut : à gauche */
  background: url('/wp-content/themes/hello-elementor-child/assets/images/trait-pinceau-terracotta.svg') no-repeat center / contain;
}
.st-h2-brush-white .elementor-heading-title::after {
  background: url('/wp-content/themes/hello-elementor-child/assets/images/trait-pinceau-pierre-claire.svg') no-repeat center / contain;
}

/* Titre centré : ajouter la classe st-h2-center sur le widget */
.st-h2-brush.st-h2-center .elementor-heading-title::after, .st-h2-brush-white.st-h2-center .elementor-heading-title::after {
  margin-inline: auto;
}

/* Titre à droite : ajouter la classe st-h2-right sur le widget */
.st-h2-brush.st-h2-right .elementor-heading-title::after, .st-h2-brush-white.st-h2-right .elementor-heading-title::after {
  margin-inline: auto 0;
}

@media (max-width: 767px) {
   h2 {
    text-align:left;
    }
    .st-h2-brush.st-h2-center .elementor-heading-title::after, .st-h2-brush-white.st-h2-center .elementor-heading-title::after {
    margin-inline: 0 auto;   /* par défaut : à gauche */
    }
}



.st-card-radius {
    border-radius: var(--st-radius-card);
    overflow: hidden;
}

/* ==========================================================
 Bloc Sable
   ========================================================== */
/* Bloc Sable : le cadre est porté par le conteneur lui-même. */
.e-con.st-sable.st-sable,
.st-sable.st-sable,
.e-con.e-parent.st-section.st-sable-home {
  --border-radius: var(--st-radius-sable);   /* variable native Elementor */
  border-radius: var(--st-radius-sable);
  background-color: var(--st-color-sable);
  padding:var(--st-sable-pad);
}

.st-section.chiffres {
  padding: var(--st-sable-pad);
}

.chiffres svg,.chiffres svg path,.chiffres svg circle,.chiffres svg line,.chiffres polyline {
  stroke: white;
}

/* ==========================================================================
   LAYOUT CUSTOM
   ========================================================================== */

html {
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 1.5;
}


/* ==========================================================================
   HERO (classe .hero-home)
   ========================================================================== */
/* Hero accueil : max 1440px centré, le fond du site apparaît de chaque côté */
/*.elementor .hero-home.e-con {
          
    --width: 100%;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    margin-top: var(--header-height);

    padding-block: 0;         

    aspect-ratio:var(--st-aspect-ratio16-9);
    min-height:0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;        
}*/


/*@media (max-width: 767px) {
    .elementor .hero-home.e-con {
      margin-top: var(--header-height-mobile);
      aspect-ratio:var(--st-aspect-ratio4-5);
    }       
}*/

/* ==========================================================================
   HERO (classe .hero-home) – visuel pleine largeur, contenu cadré 1440px
   ========================================================================== */
.elementor .hero-home.e-con {
    --width: 100%;                         /* variable interne Elementor */

    /* Marge latérale du contenu : identique à l'ancien rendu dans le cadre 1440px */
    --hero-inline-pad: max(0px, calc((100% - var(--st-frame-max)) / 2));

    position: relative;
    overflow: hidden;
    isolation: isolate;

    width: 100%;
    max-width: none;                       /* ✅ plus de limite à 1440px : l'image suit le navigateur */
    margin-inline: 0;
    margin-top: var(--header-height);
    padding-block: 0;

    aspect-ratio: var(--st-aspect-ratio16-9);
   max-height: 60svh;                    /* garde-fou : évite un hero énorme sur très grand écran (ajustable/supprimable) */
    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Le conteneur interne boxed d'Elementor : on le recadre à 1440px centré,
   pour que titre et sous-titre restent exactement à leur place actuelle */
.elementor .hero-home.e-con > .e-con-inner {
    width: 100%;
    max-width: var(--st-frame-max);        /* 1440px */
    margin-inline: auto;
    padding-inline: 0;                     /* le padding éventuel vient de .hero-content */
    position: relative;
    z-index: 2;
}



/* Fallback pour les navigateurs sans support svh */
/*
@supports not (height: 1svh) {
    .elementor .hero-home { --hero-height: 75vh; }
}*/

/* Image plein cadre : le widget ET tous ses wrappers remplissent le hero */
.elementor .hero-home .hero-bg,
.elementor .hero-home .hero-bg > .elementor-widget-container,
.elementor .hero-home .hero-bg a {
    display: block;
    width: 100%;
    height: 100%;
}

.elementor .hero-home .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.elementor .hero-home .hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

/* Dégradé sombre en bas, au-dessus de l'image, sous le texte */
.elementor .hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0) 65%
    );
}

/* Contenu texte au-dessus du dégradé */
.elementor .hero-home .hero-content {
    position: relative;
    z-index: 2;
}
.elementor .hero-home .hero-title,
.elementor .hero-home .hero-subtitle {
    color: var(--ft-color-pierre-claire);
}

.e-con.e-parent.hero-home.st-section {
  --st-section-py: 0;
}




/* INSPIRATIONS VISUELS */
.cat-voyages img, .cat-destinations img,  .cat-activites img {
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
/*

.circuit-subnav a.is-active{color:var(--terracotta);border-bottom:2px solid var(--terracotta);}
*/
/*
selector { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
selector::-webkit-scrollbar { display:none; }
selector a { white-space:nowrap; flex:0 0 auto; }

@media (max-width:767px){
  .circuit-subnav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;
    background:linear-gradient(to right,rgba(255,255,255,0),var(--ft-color-pierre-claire));pointer-events:none;}
}

*/





/* ===== Sous-nav circuit : mobile ===== */
/* Sticky natif sur la section Nav ancres */
.nav-circuit {
  position: sticky !important;
  top: var(--header-height-mobile);
  z-index: 90;
}

/* Admin bar WordPress (utilisateur connecté) */
.admin-bar .nav-circuit {
  top: calc(var(--header-height) + 32px);
}

@media (max-width: 782px) {
  .admin-bar .nav-circuit {
    top: calc(var(--header-height-mobile) + 46px);
  }
}

@media (max-width: 767px) {
  .nav-circuit {
    top: var(--header-height-mobile);
  }
}



/* ===== Nav ancres circuit : défilement horizontal mobile ===== */
@media (max-width: 767px) {

  /* 1. Conteneurs : suppression du padding Elementor et hauteur fixe */
  .circuit-subnav__scroll,
  .nav-circuit,
  .elementor-element-53eaef9 {
    padding-inline: 0 !important;
    --padding-left: 0px;
    --padding-right: 0px;
  }

  .circuit-subnav__scroll,
  .nav-circuit {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    height: 52px;
    align-items: center;
    position: relative;
  }

  /* 2. Liste d'icônes : une seule ligne défilante */
  .circuit-subnav,
  .circuit-subnav .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 20px;
    scroll-padding-right: 0px;   /* le défilement peut aller jusqu'au bord */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
  }

  .circuit-subnav::-webkit-scrollbar {
    display: none;
  }

  /* 3. Chaque lien : une seule ligne */
  .circuit-subnav .elementor-icon-list-item {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: auto !important;
    padding-inline: 12px;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Marge de départ */
  .circuit-subnav .elementor-icon-list-item:first-child {
    margin-left: 20px;
    padding-left: 0;
  }

  /* Marge de fin : permet au dernier lien de dépasser le fondu */
  .circuit-subnav .elementor-icon-list-item:last-child {
    padding-right:40px;
  }

  /* 4. Fondu à droite : signale la suite du menu */
  .circuit-subnav__scroll::after,
  .nav-circuit::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(245, 240, 232, 0), #F5F0E8);
    z-index: 1;
  }
}

.circuit-subnav a.is-active {
  color: #C4704B;
  box-shadow: inset 0 -2px 0 #C4704B;
}

/* Décalage des ancres : évite que le header et la sous-nav masquent la section ciblée */
/*
html {
    scroll-padding-top: var(--subnav-h, 64px);
}*/

/* FIN SOUS NAV CIRCUIT */











/* Mobile : recadrage portrait 4:5, point focal ajustable */
@media (max-width: 767px) {
    /*.elementor .hero-home {
        --hero-height: 75svh;
    }*/
    .elementor .hero-home.e-con {
        aspect-ratio: auto;                /* désactive le 16/9 */
        min-height: 75svh;                 /* ou aspect-ratio: 4 / 5 */
    }
    .elementor .hero-home .hero-bg img {
        object-position: 50% 40%;  /* ajuste le point focal selon l'image */
    }
    /* Option : ratio strict 4:5 au lieu de la hauteur en svh
    .hero-home { min-height: 0; aspect-ratio: 4 / 5; }
    */

    .elementor .hero-home .hero-btn a {
    width:100% !important;
    }
}


/* ==========================================================================
   FULL BLEED - Sortie de la contrainte 1440px pour le Hero
   ========================================================================== */

.page-content .full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
/*
section {
    margin-top:clamp(1.25rem, -0.1786rem + 2.9762vw, 2.5rem) !important;
    margin-bottom:clamp(1.25rem, -0.1786rem + 2.9762vw, 2.5rem) !important;
    padding-top:20px;
    padding-bottom:30px
}
*/


/* bloc image 7 colonnes - texte 5 colonnes */
.st-section.bloc-7-5 .e-con-inner {
  overflow: hidden;
  align-items: stretch;           /* les 2 enfants ont la même hauteur */
}

.st-section.bloc-7-5 .posImgProduct,
.st-section.bloc-7-5 .posImgProduct .elementor-widget-container {
  height: 100%;
}
.st-section.bloc-7-5 .posImgProduct img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* recadre au lieu d'étirer */
  object-position: center;
  display: block;
}

/* 4) Mobile : colonne, ratio fixe sur l'image */
@media (max-width: 767px) {
  /*.st-engagement .posImgProduct img {
    height: auto;
    aspect-ratio: 4 / 3;
  }*/
}

/* ==========================================================================
   Bloc "Pourquoi voyager avec Sport Travel Maroc"
   ========================================================================== */

.stm-pourquoi__grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* colonnes strictement égales */
    gap: 2.5rem 1.5rem;
    text-align: center;
}

.stm-pourquoi__item {
    min-width: 0; /* évite qu'un contenu élargisse sa colonne */
}

.stm-pourquoi__icone {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.stm-pourquoi__icone img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.stm-pourquoi__item-titre.stm-pourquoi__item-titre {
    font-family: var(--e-global-typography-9b1c7a1-font-family), Sans-serif;
    font-size: clamp(0.75rem, 0.6071rem + 0.2976vw, 0.875rem);   
    font-weight: var(--e-global-typography-9b1c7a1-font-weight);
    line-height: var( --e-global-typography-b71ef5e-line-height );
    letter-spacing: var( --e-global-typography-b71ef5e-letter-spacing );
    color: var(--e-global-color-ddeeda2);
}

.stm-pourquoi__item-texte {
    font-size: 0.9rem;
    color: #3a2e28;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Tablette Elementor (≤ 1024px) : 2 colonnes */
@media (max-width: 1024px) {
    .elementor .stm-pourquoi__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile Elementor (≤ 767px) : 1 colonne */
@media (max-width: 767px) {
    .elementor .stm-pourquoi__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}



/* ==========================================================================
   Bloc "Les incontournables"
   ========================================================================== */
/* Conteneur de chaque carte */
.e-loop-item {
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Important pour éviter que l'image dépasse */
   /* border-radius: 25px;*/ /* Même rayon que ta carte */
}

/* Image : état normal avec transition */
.e-loop-item .circuit-featured-image img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.5s ease-out;
    transform-origin: center;
}

/* Au survol : zoom + assombrir */
.e-loop-item:hover .circuit-featured-image img {
    transform: scale(1.08);
    filter: brightness(0.65);
}

/* Overlay : état initial (caché en bas) */
.e-loop-item .circuit-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
  /*  padding-bottom: 20px;*/
    opacity: 1;
   /* visibility: hidden;*/
    transform: translateY(50%);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    overflow: auto; /* Permet le scroll si c'est trop long */
}

.e-loop-item:hover .circuit-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.e-loop-item .circuit-overlay .info-plus {
    opacity:0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.e-loop-item:hover .circuit-overlay .info-plus {
    opacity:1;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Alignement des valeurs : libellé à largeur fixe (s'ajoute au CSS existant) */
.circuit-info-overlay .circuit-info-item {
    display: flex;
    align-items: center;      /* centre verticalement texte et bottes */
}

.circuit-info-overlay .circuit-info-label {
    flex: 0 0 100px;          /* même largeur pour les 3 libellés, donc valeurs alignées */
    white-space: nowrap;
}

/* Bottes : on neutralise les décalages inline (padding-top / margin) */
.circuit-info-overlay .circuit-niveau {
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile : visible par défaut */
@media (max-width: 768px) {
    .e-loop-item .circuit-overlay {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        max-height: none; /* Optionnel : laisse la hauteur naturelle */
    }

    /* Pas besoin du hover en mobile */
    .e-loop-item:hover .circuit-overlay, .e-loop-item:hover .circuit-overlay .info-plus {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Blog Flexible Content — Widget Elementor + ACF      */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-flexible-content__items {
    display: flex !important;
    flex-direction: column;
    gap: 40px;
}

/* ------------------------*/
/* BLOCS : Basiques                                       */
/* ------------------------*/

.blog-flexible-content__block {
    display: block !important;
    width: 100%;
}

/* ------------------------*/
/* BLOCS : 2 colonnes (Choix 1 & 2)                       */
/* ------------------------*/

.blog-flexible-content__block--text-visual-2col,
.blog-flexible-content__block--visual-text-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;
}

/* ------------------------*/
/* BLOCS : Full width (Choix 3 & 4)                       */
/* ------------------------*/

.blog-flexible-content__block--text-full {
    display: block !important;
    width: 100%;
}

.blog-flexible-content__block--visual-full {
    display: block !important;
    width: 100%;
}

/* ------------------------*/
/* Wrappers texte & visuels                              */
/* ------------------------*/

.blog-flexible-content__text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-flexible-content__visual-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-flexible-content__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* ------------------------*/
/* Contenu texte (WYSIWYG)                               */
/* ------------------------*/

.blog-flexible-content__copy {
    line-height: 1.7;
    font-size: 1rem;
}

.blog-flexible-content__copy p {
    margin: 0 0 1rem 0;
    color: #666;
}

.blog-flexible-content__copy p:last-child {
    margin-bottom: 0;
}

/* TITRES */
.blog-flexible-content__copy h1,
.blog-flexible-content__copy h2,
.blog-flexible-content__copy h3,
.blog-flexible-content__copy h4,
.blog-flexible-content__copy h5,
.blog-flexible-content__copy h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #C97A4E;
}

.blog-flexible-content__copy h1:first-child,
.blog-flexible-content__copy h2:first-child,
.blog-flexible-content__copy h3:first-child {
    margin-top: 0;
}

/* LISTES */
.blog-flexible-content__copy ul,
.blog-flexible-content__copy ol {
    margin: 1rem 0;
    padding-left: 2rem;
    color: #666;
}

.blog-flexible-content__copy li {
    margin-bottom: 0.5rem;
}

/* LIENS */
.blog-flexible-content__copy a {
    color: #0073aa;
    text-decoration: none;
}

.blog-flexible-content__copy a:hover {
    text-decoration: underline;
}

/* FORMATAGE */
.blog-flexible-content__copy strong {
    font-weight: 700;
}

.blog-flexible-content__copy em {
    font-style: italic;
}

/* ------------------------*/
/* RESPONSIVE : Tablette (max 1024px)                     */
/* ------------------------*/

@media (max-width: 1024px) {
    .blog-flexible-content__block--text-visual-2col,
    .blog-flexible-content__block--visual-text-2col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-flexible-content__items {
        gap: 2rem;
    }
}

/* ------------------------*/
/* RESPONSIVE : Mobile (max 768px)                        */
/* ------------------------*/

@media (max-width: 768px) {
    .blog-flexible-content__items {
        gap: 1.5rem;
    }

    .blog-flexible-content__copy {
        font-size: 0.95rem;
    }

    .blog-flexible-content__copy h1,
    .blog-flexible-content__copy h2,
    .blog-flexible-content__copy h3 {
        font-size: 1.5rem;
    }

    .blog-flexible-content__image {
        border-radius: 4px;
    }
}


/* TEAMS */
.team-loop .prenom .elementor-heading-title {
  margin-bottom: 8px;
}
/* Éléments masqués au-delà du 6e en mobile, tant que la liste n'est pas dépliée */
@media (max-width: 767px) {
    .team-loop:not(.is-expanded) .elementor-loop-container > .e-loop-item.is-team-hidden {
        display: none;
    }
}


/* ==========================================================================
   LAYOUT : cadre 1440 px / contenu 1280 px
   ========================================================================== */

/*
 * .st-section est le conteneur parent : par défaut son fond reste pleine
 * largeur et son contenu utile est limité à 1280 px par le padding.
 * Le calcul utilise min(100vw, cadre) : il reste donc cohérent avec la
 * largeur du cadre même quand la page dépasse 1440 px (et n'impose aucun
 * conteneur enfant supplémentaire). La marge minimale conserve les
 * respirations responsive et évite de coller le contenu aux bords.
 */
.e-con.e-parent.st-section,
.e-con.e-parent.st-section.st-section {
    --padding-top: 0;
    --padding-bottom: 0;
    --st-section-inline-pad: max(
    var(--st-margin-x),
    calc((100vw - var(--st-content-max)) / 2)
    );
    --padding-left: var(--st-section-inline-pad);
    --padding-right: var(--st-section-inline-pad);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-top: var(--st-section-py) !important;
    margin-bottom: var(--st-section-py) !important;
    padding-inline: var(--st-section-inline-pad);
}

.e-con.e-parent.st-section.st-section.st-section-breadcrumb {
  --st-section-py: 0;
  margin-top: 24px !important;    
  margin-bottom: 16px !important;  
}

.elementor-location-footer .e-con.e-parent.st-section,
.elementor-location-footer .e-con.e-parent.st-section.st-section {
    margin-bottom: 0 !important;
    margin-top:0 !important;
}

/* 1er bloc situé juste après le fil d'Ariane : pas de marge haute */
.e-con.e-parent.st-section.st-section.st-section-breadcrumb + .e-con.e-parent.st-section {
  margin-top: 0 !important;
  /* margin-bottom: 60px !important; */ /* décommentez pour personnaliser la marge basse */
}
.e-con.e-parent.hero-home + .e-con.e-parent.nav-circuit {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .e-con.e-parent.st-section.st-section.st-section-breadcrumb { margin-top: 16px !important; margin-bottom: 12px !important; }
  .e-con.e-parent.st-section.st-section.st-section--first      { margin-bottom: 40px !important; }
}
@media (max-width: 767px) {
  .e-con.e-parent.st-section.st-section.st-section-breadcrumb { margin-top: 12px !important; margin-bottom: 8px !important; }
  .e-con.e-parent.st-section.st-section.st-section-first      { margin-bottom: 32px !important; }
 .e-con.e-parent.st-section, .e-con.e-parent.st-section.st-section.carousel-section {padding-left:0; padding-right:0}
  .e-con.e-parent.st-section, .e-con.e-parent.st-section.st-section.carousel-section .elementor-widget-heading {margin-left:var(--st-margin-x); margin-right:var(--st-margin-x)}
}


#breadcrumbs, #breadcrumbs a {
  font-size: var(--st-breadcrumb-size);
  line-height: 1.4;
}
#breadcrumbs .breadcrumb_last, #breadcrumbs a:hover {
    color:var( --e-global-color-ddeeda2 );
}
#breadcrumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
#breadcrumbs > li + li::before { content: ">"; margin-right: 8px; }




/* SOUS NAV CIRCUIT*/
.st-section.nav-circuit ul li::before {
    content:'';
}



/*
 * Modificateur de cadre pour sable, header, footer et hero : le conteneur
 * lui-même porte le fond et reste limité à 1440 px. Le padding est calculé
 * sur min(100vw, 1440px), plutôt que sur 100% : ainsi le contenu intérieur
 * reste aligné sur une colonne de 1280 px quand la fenêtre est plus large.
 * 100vw est volontaire ici : il garantit le même repère que la largeur de
 * l'élément dans un viewport classique ; le débordement éventuel de barre
 * de défilement est neutralisé par overflow-x: clip déjà défini plus haut.
 */
.e-con.e-parent.st-frame,.e-con.e-parent.st-section.st-frame,.e-con.e-parent.st-section.st-sable,
.e-con.st-frame,.e-con.st-section.st-frame,.e-con.st-sable.st-sable,.st-frame,.st-sable.st-sable,
.e-con.e-parent.st-section.st-sable-home,
.e-con.e-parent.st-section.st-brun-avis {
  --st-frame-inline-pad: max(var(--st-margin-x), calc((min(100vw, var(--st-frame-max)) - var(--st-content-max)) / 2));
  --padding-left: var(--st-frame-inline-pad);
  --padding-right: var(--st-frame-inline-pad);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--st-frame-max);
  margin-inline: auto;
  padding-inline: var(--st-frame-inline-pad);
}
@media (max-width: 767px) {
  body .e-con.e-parent.st-section.noPad {
    padding-left:0;
    padding-right:0;
  }

}

  body .e-con.e-parent.st-section.noBackg .st-sable {
   background:none;
   padding:0 !important;
  }

/* st-sable fonctionne directement avec « st-section st-sable ». */
/*
.e-con.e-parent.st-section.st-sable,.e-con.e-parent.st-section.st-sable-home,
.st-section.st-sable {
 background-color: var(--st-color-sable);
  border-radius: var(--st-radius-sable);
}
*/
/* Contenu large explicite : 1440 px, sans le padding de st-section. */
.e-con.e-parent.st-wide,
.e-con.e-parent.st-section.st-wide,
.st-wide {
  --st-wide-inline-pad: var(--st-margin-x);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--st-frame-max);
  margin-inline: auto;
  padding-inline: var(--st-wide-inline-pad);
}

/* Conteneur pleine largeur explicite. */
.e-con.e-parent.st-full,
.st-full {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}


.e-con.e-parent.st-section.ariane.ariane {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}





/* Galerie mosaïque — à coller dans style.css. Les couleurs et polices
   reprennent les variables du thème Sport Travel Maroc. */
.galerie-moments { --galerie-gap: 20px; }

/*
 * Mobile : Elementor peut réappliquer ses propres variables de grille sur
 * .e-con/.e-grid et conserver les spans desktop des cartes. Les sélecteurs
 * ci-dessous couvrent le conteneur full et son .e-con-inner boxed éventuel.
 * Aucun changement de markup/JSON n'est requis.
 */
/* Neutralisation des espacements Elementor sur la grille et ses cartes. */


/*

.galerie-moments .galerie-moments__grid.e-con,
.galerie-moments .galerie-moments__grid.e-grid,
.galerie-moments .galerie-moments__grid > .e-con-inner,
.ganlerie-momets .galerie-moments__grid > .e-con,
.galerie-moments .galerie-moments__card.e-con {
  padding: 0;
  gap: 0;
  min-width: 0;
}
*/

/* Des moments qui marquent les esprits */

.galerie-moments .galerie-moments_caption {
  background:rgba(0, 0, 0, .5);
  display: inline-table;
  padding:5px 8px;
}

/* Des expériences à la carte */
.experiences .pastille span, .experiences .pastille:first-child span {
  display: inline-block;
  padding: 4px 12px;
  background:var(--ft-color-pierre-claire);
  border-radius: 999px;
}
.experiences .pastille:first-child span {
  background:none;
  padding: 4px 0;
}



/* contact */
.contact-grid .contact-photo {
    grid-column: 1;
    grid-row: 1 / span 2;
}*/
.contact-grid > .contact-photo {
 
  grid-row: 1 / -1;
}
/* Bloc titre : colonne 2, ligne 1 */
.contact-grid > .e-con:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* Bloc texte : colonne 2, ligne 2, juste sous le titre */
.contact-grid > .interlocuteur_texte {
  grid-column: 2;
  grid-row: 2;
}
body .card-contact {
    border-radius: var(--st-radius-card);
}

.card-contact .contact-projet {
    padding:var(--st-sable-pad);
}
@media (max-width: 767px) {
    .contact-grid > .interlocuteur_texte {
        grid-column: 1/span2;
    }
}

/*
.kb-zoom {
  overflow: hidden;
}
.kb-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 3s ease-out;
}
.kb-zoom:hover img {
  transform: scale(1.15) translate(-2%, -2%);
}*/

/* Experiences */
/*.experiences .experience-card-1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 1;
    height: 320px;
    overflow: hidden;
    border-radius: var(--st-radius-card);
}*/



  /* ==========================================================================
   Comment ça se passe — mobile
   Classes réelles : .comment-marche, .etapes, .numero, .active
   ========================================================================== */

/* Ligne pointillée horizontale reliant les ronds (desktop) */
.comment-marche .etapes::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 48px;
  right: 25%;
  border-top: 2px dashed var(--st-color-terracota);
  z-index: 0;
}

.comment-marche .numero span {
    display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--st-color-terracota);
  background: var( --ft-color-pierre-claire);
  color: var(--st-color-terracota);
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: 1;
  margin: 0;
}
.comment-marche .numero.active span {
      background:var(--st-color-terracota);
      color:var(--ft-color-pierre-claire);
}

/* ---------- Mobile : timeline verticale ---------- */
@media (max-width: 767px) {
 
 .comment-marche .etapes::before  {
    display: block;
    top: 18px;
    bottom: 18px;
    left: 17px;
    right: auto;
    width: 0;
    border-top: none;
    border-left: 2px dashed var(--st-color-terracota);
  }

  .comment-marche .etape {
    grid-template-columns: 36px 1fr;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    padding-bottom: 32px;
  }

  .comment-marche .numero span {
    width:36px;
    height:36px;
  }


  /* Conteneur des étapes : empilement vertical */
  .comment-marche .etapes > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Chaque étape : rond en colonne 1, titre et texte en colonne 2 */
  .comment-marche .etapes .e-con-inner > .e-child.numero > .e-con-inner {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }

  /* Rond numéro : colonne 1, ligne 1 */
  .comment-marche .etapes .elementor-widget.numero {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Titre : colonne 2, ligne 1 */
  /*.comment-marche .etapes .elementor-widget-heading h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }*/

  /* Texte : colonne 2, ligne 2 */
 /* .comment-marche .etapes .elementor-widget-text-editor {
    grid-column: 2;
    grid-row: 2;
  }*/

  /* Bouton : pleine largeur */
  .comment-marche .elementor-widget-button .elementor-button {
    width: 100%;
    text-align: center;
  }
}














/* ==========================================================================
   Filtres circuits (WP Grid Builder) — desktop, maquette filtre-desktop.pdf
   Structure Elementor :
     .st-filtres-bar    = 3 selects + facette compteur
     .st-filtres-actifs = facette « Filtres sélectionnés » + facette « Réinitialiser »
   ========================================================================== */

/* ---------- 1. Barre : filets haut/bas, selects à gauche, compteur à droite ---------- */
.st-filtres-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(74, 58, 49, .12);
  border-bottom: 1px solid rgba(74, 58, 49, .12);
}

/* Les facettes ne doivent pas s'étirer */
.st-filtres-bar .wpgb-facet {
  flex: 0 0 auto;
  margin: 0;
}

/* ---------- 2. Selects natifs WPGB : pastille ---------- */
.st-filtres-bar .wpgb-select-facet label {
  position: relative;
  display: inline-block;
}

.st-filtres-bar .wpgb-select-facet .wpgb-select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 36px;
  padding: 0 38px 0 16px;            /* place à droite pour le chevron */
  background: transparent;
  border: 1px solid var(--st-color-brun);
  border-radius: 999px;
  color: var(--st-color-brun);
  font: 500 14px/1 var(--font-body, 'Montserrat'), sans-serif;
  cursor: pointer;
  box-shadow: none;
}

/* Filtre actif ou focus : contour et texte terracotta */
.st-filtres-bar .wpgb-facet-active .wpgb-select,
.st-filtres-bar .wpgb-select-facet .wpgb-select:focus {
  border-color: var(--st-color-terracota);
  color: var(--st-color-terracota);
  outline: none;
}

/* Séparateur vertical supprimé (absent de la maquette) */
.st-filtres-bar .wpgb-select-facet .wpgb-select-separator {
  display: none;
}

/* Chevron à droite ; le clic traverse jusqu'au select */
.st-filtres-bar .wpgb-select-facet .wpgb-select-controls {
  position: absolute;
  top: 0;
  right: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.st-filtres-bar .wpgb-select-facet .wpgb-select-toggle {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: var(--st-color-brun);
}

/* ---------- 3. Compteur de résultats : aligné à droite ---------- */
.st-filtres-bar .wpgb-result-count-facet,
.st-filtres-bar .wpgb-facet:last-child {
  margin-left: auto;                 /* pousse le compteur à droite */
  font: 600 14px/1 var(--font-body, 'Montserrat'), sans-serif;
  color: var(--st-color-brun);
  white-space: nowrap;
}

/* ---------- 4. Rangée des filtres actifs ---------- */
.st-section .st-filtres-actifs > .e-con-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 24px;
}

.st-section .st-filtres-actifs .wpgb-facet {
  margin: 0;
}

/* ---------- 5. Chips de filtres actifs ---------- */
.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list li {
  margin: 0;
  padding: 0;
}

/* Chip : on neutralise le style WPGB puis on applique le nôtre */
.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-height: 0;
  padding: 0 14px;
  margin: 0;
  background: color-mix(in srgb, var(--st-color-terracota) 30%, transparent);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--st-color-terracota);
  font: 500 13px/1 var(--font-body, 'Montserrat'), sans-serif;
  cursor: pointer;
}
.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list li::before {
  content:"";
}

.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button-label {
  order: 1;
  color: inherit;
  font: inherit;
}

/* Croix : WPGB dessine déjà son pseudo-élément, on le remplace */
.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button-control {
  order: 2;
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button-control::before,
.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button-control::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor !important;
  border: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.st-section .st-filtres-actifs .wpgb-facet .wpgb-inline-list .wpgb-button-control::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- 6. Lien « Effacer les filtres » ---------- */
.st-section .st-filtres-actifs .wpgb-facet .wpgb-button.wpgb-reset {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--st-color-brun);
  font: 400 13px/1 var(--font-body, 'Montserrat'), sans-serif;
  text-decoration: underline;
  cursor: pointer;
}

.st-section .st-filtres-actifs .wpgb-facet .wpgb-button.wpgb-reset:hover {
  color: var(--st-color-terracota);
}

.st-section .nbrVoyage {
  margin:0 0 0 auto;
}





/* ========== WP Grid Builder – Cartes circuits : border-radius ========== */

/* Variable unique pour régler le rayon */


/* Le conteneur interne porte le rayon et coupe ce qui dépasse (image, overlay) */
.wpgb-card .wpgb-card-inner {
    border-radius: var(--st-radius-card);
    overflow: hidden;
    /* Fix Safari : garde les coins arrondis pendant le zoom/transform au hover */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(var(--ft-color-pierre-claire), black);
}

/* L'ombre se met sur le wrapper (non coupé par overflow:hidden), avec le même rayon */
.wpgb-card .wpgb-card-wrapper {
    border-radius: var(--st-radius-card);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}




/* ========== WP Grid Builder – Ratio image des cartes circuits ========== */


.wpgb-card .wpgb-block-2 {
  color:var(--st-color-terracota) !important;
  font-weight:bold  !important;
  margin-bottom:10px !important;
}

.wpgb-card .wpgb-block-3::before {
  font-family: "Sport Travel Icons" !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}
.wpgb-card .wpgb-block-3::before{  content:"\e901";margin-right: .5em;margin-top: -3px; }
/* Montant du prix en gras uniquement */
.st-card__price-amount {
    font-weight: 700;
}

/* On neutralise le placeholder SVG (padding-top inline) et on pilote le ratio en CSS */
/*.wpgb-card .wpgb-card-media > svg {
    display: none;
}
*/
/* La zone média prend le ratio voulu */
/*.wpgb-card .wpgb-card-media {
    aspect-ratio: var(--card-media-ratio);
    position: relative;
    overflow: hidden;
}
*/
/* L'image remplit toute la zone (le cadrage se fait via background-size) */
/*.wpgb-card .wpgb-card-media-thumbnail,
.wpgb-card .wpgb-card-media-thumbnail > a,
.wpgb-card .wpgb-card-media-thumbnail > a > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
*//*
.wpgb-card .wpgb-card-media-thumbnail > a > div {
    background-size: cover;
    background-position: center;
}*/
*/
/* Ratio différent sur mobile (plus compact) */
@media (max-width: 767px) {
    .wpgb-card {
   /*     --card-media-ratio: 4 / 5;*/
    }
}






/* ===== Filtres circuits : panneau desktop + tiroir mobile ===== */
/* ===== Filtres catalogue : desktop en ligne / mobile en tiroir ===== */

/* Barre : [Filtres] ... [N voyages] */
.st-fm > .e-con-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.st-fm__count { margin-left: auto; }

/* ---------- DESKTOP (≥ 768px) : facettes en ligne ---------- */
@media (min-width: 768px) {
  .st-fm-panel {
    position: static;
    transform: none;
    visibility: visible;
    flex: 1 1 auto;
    background: transparent;
    padding: 0;
  }
  .st-fm-panel__close,
  .st-fm__trigger { display: none !important; }
  .st-fm-panel__facets {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  .st-fm::after { display: none; }
}

/* ---------- MOBILE (≤ 767px) : tiroir par le bas ---------- */
@media (max-width: 767px) {
  .st-fm-panel {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    /* Hauteur : s'adapte au contenu, jusqu'à 92% de l'écran visible */
    height: auto;
    max-height: 92vh;
    max-height: 92dvh;              /* dvh = hauteur réellement visible sur mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ft-color-pierre-claire);
    /* padding bas : zone sûre iOS + marge pour que la dernière facette respire */
    padding: 24px 20px calc(48px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    z-index: 100000 !important;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }
  .st-fm.is-open .st-fm-panel {
    transform: translateY(0);
    visibility: visible;
  }

  /* Le conteneur interne ne doit pas imposer sa propre hauteur */
  .st-fm-panel,
  .st-fm-panel__facets {
    min-height: 0;
    height: auto;
  }
  .st-fm-panel__facets {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 auto;
  }

  /* Facettes pleine largeur dans le tiroir */
  .st-fm-panel .wpgb-facet,
  .st-fm-panel .wpgb-select-facet,
  .st-fm-panel .wpgb-select {
    width: 100%;
  }

  .st-fm .st-fm-panel.e-con {
  --height: auto;
  --min-height: 0px;
  height: auto !important;
  min-height: 0 !important;
  max-height: 92dvh !important;
  overflow-y: auto !important;
}
.st-fm .st-fm-panel__facets.e-con {
  --height: auto;
  --min-height: 0px;
  height: auto !important;
  min-height: 0 !important;
  flex-shrink: 0;
}

}

@media (max-width: 767px) {
  /* Force l'affichage du contenu interne des facettes dans le tiroir */
  .st-fm .wpgb-facet,
  .st-fm .wpgb-facet fieldset,
  .st-fm .wpgb-facet fieldset > * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .st-fm .wpgb-facet [hidden] {
    display: block !important;
  }
}


.jrs {
  background: rgba(0,0,0,20%);
  display: inline !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  border: 1px solid var(--ft-color-pierre-claire) !important;
}

.wpgb-card-body, .wpgb-card-footer {
  background:var(--st-color-sable) !important;

}

.wp-grid-builder .wpgb-card [class*="wpgb-block-"] > a.btn-plus-infos {
  border: none;
  font-weight: bold;
  background:none;
  color:var(--st-color-terracota);
  text-decoration:underline;
}
/* ===== FAQ CIRCUIT [circuit_faq] ===== */

/* ==========================================================================
   FAQ circuit : deux colonnes indépendantes, accordéon accessible
   ========================================================================= */
.circuit-faq {
  color: var(--st-color-brun, #4A3A31);
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
}

.circuit-faq__title {
  margin: 0 0 24px;
  color: var(--st-color-brun, #4A3A31);
  font-family: var(--font-heading, 'Fraunces', Georgia, serif);
}

.circuit-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.circuit-faq__column {
  min-width: 0;
}

.circuit-faq__item {
  margin: 0;
  border-bottom: 1px solid #E7DCCF;
}

.circuit-faq__question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  color: var(--st-color-brun, #4A3A31);
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.circuit-faq__question::-webkit-details-marker {
  display: none;
}

.circuit-faq__question::marker {
  content: "";
}

.circuit-faq__question::after {
  content: "+";
  flex: 0 0 24px;
  width: 24px;
  color: #C8683F;
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.circuit-faq__item[open] > .circuit-faq__question::after {
  content: "×";
  font-size: 25px;
}

.circuit-faq__question:focus-visible {
  outline: 2px solid #C8683F;
  outline-offset: 3px;
}

.circuit-faq__answer {
  padding: 0 44px 20px 0;
  color: var(--st-color-brun, #4A3A31);
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.7;
}

.circuit-faq__answer > :first-child {
  margin-top: 0;
}

.circuit-faq__answer > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .circuit-faq__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .circuit-faq__question {
    min-height: 58px;
    padding: 16px 0;
  }

  .circuit-faq__answer {
    padding-right: 36px;
  }
}


/* ==========================================================================
   Carte « Circuits similaires » (Loop Item) – .st-aimer-card
   Structure : .st-aimer-card > .e-con-inner > [.aimer-image__img + .aimer-card__content]
   ========================================================================== */

/* --- Carte : SEUL repère de positionnement (image, overlay, lien étendu) --- */
.elementor .elementor-element.st-aimer-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--st-radius-card);
    background: var(--st-color-noir-volcanique);
    color: var(--ft-color-pierre-claire);
    padding: 0;
    isolation: isolate;
    min-height: 0;
    aspect-ratio: 4 / 5;        /* format portrait : à ajuster (3/4, 1/1…) */
    cursor: pointer;            /* CHANGÉ : déplacé ici */
}

/* Conteneur interne Elementor (boxed) : remplit toute la carte */
.elementor .st-aimer-card > .e-con-inner {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
}

/* --- Image : plein cadre, derrière tout --- */
.st-aimer-card .aimer-image__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.st-aimer-card .aimer-image__img picture,
.st-aimer-card .aimer-image__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.st-aimer-card:hover .aimer-image__img img {
    transform: scale(1.04);
}

/* --- Overlay dégradé (sous le texte, sur l'image) --- */
.elementor .elementor-element.st-aimer-card.e-con::before, .st-cv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(39,36,36,.85) 0%, rgba(39,36,36,0) 65%);
    opacity: 1;
    pointer-events: none;
}

/* --- Bloc de contenu : NON positionné pour ne pas devenir le repère du lien étendu --- */
.st-aimer-card .aimer-card__content {
    position: static;           /* CHANGÉ : était relative */
    width: 100%;
    padding: 20px;
    gap: 8px;
    background: transparent;
}

/* CHANGÉ : le texte reste au-dessus de l'overlay SANS créer de repère.
   z-index sans position ne marche pas, donc on utilise un enfant en flex :
   les éléments flex acceptent z-index même en position: static. */
.st-aimer-card .aimer-card__content > .elementor-widget {
    position: static;
    z-index: 2;                 /* actif car l'enfant est un item flex */
}

/* Le titre et son lien ne doivent pas être des repères */
.st-aimer-card .elementor-widget-theme-post-title,
.st-aimer-card .elementor-widget-theme-post-title .elementor-widget-container,
.st-aimer-card .elementor-widget-theme-post-title .elementor-heading-title,
.st-aimer-card .elementor-widget-theme-post-title a {
    position: static;
}

/* --- Textes : tailles maîtrisées --- */
.st-aimer-card .elementor-heading-title {
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0;
    color: var(--ft-color-pierre-claire);
}
.st-aimer-card .aimer-sous-titre {
    margin: 0;
    font-size: .95rem;
    color: var(--ft-color-pierre-claire);
}


/* --- Picto éco-responsable (haut droite) ------------------------------ */
.st-aimer-card .cv-eco-wrap {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    margin: 0;
    width: auto;
}
.st-aimer-card .cv-eco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ft-color-pierre-claire);
    color:var(--st-color-olive);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.st-aimer-card .circuit-eco svg {
    width: 35px;
    height: 35px;
    background:var(--ft-color-pierre-claire);
    border-radius: 999px;
    padding: 5px;
    stroke:var(--st-color-olive);
}

.st-aimer-card .circuit-eco .textEco {
  display:none;
}















/* --- Pastilles --- */
.st-aimer-card .aimer-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.st-aimer-card .aimer-pastille {
    display: inline-block;
    background: var(--st-color-terracota);
    color: var(--ft-color-pierre-claire);
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

/* --- Prix / durée sur une ligne --- */
.st-aimer-card .aimer-prix-duree {
  /*  display: flex;
    justify-content: space-between;
    align-items: baseline;*/
  /*  gap: 12px;
    font-size: .95rem;*/
    color:var(--ft-color-pierre-claire);
    font-weight:bold
}
.st-aimer-card .aimer-prix__valeur {
    font-size: 1.15rem;
}

/* --- Lien du titre étendu à toute la carte (stretched link) ---
   Le <a> reste sur le <h3> (ancre SEO propre) ; le ::after se repère
   sur .st-aimer-card, seul ancêtre positionné. */
.st-aimer-card .elementor-widget-theme-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;                 /* au-dessus de l'image, de l'overlay et du texte */
}

/* Focus clavier visible sur la carte entière */
.st-aimer-card:has(a:focus-visible) {
    outline: 2px solid var(--st-color-terracota);
    outline-offset: 3px;
}
.st-aimer-card .elementor-widget-theme-post-title a:focus-visible {
    outline: none;
}
/* === Lot A — Lightbox formulaire devis Sport Travel === */
.st-form-lock { position: fixed; width: 100%; overflow: hidden; }
.st-form-lightbox-root { position: fixed; inset: 0; z-index: 99999; display: none; color: #4A3A31; font-family: var(--font-body, 'Montserrat', Arial, sans-serif); }
.st-form-lightbox-root.is-open { display: block; }
.st-form-lightbox__overlay { position: absolute; inset: 0; background: rgba(39,36,36,.68); backdrop-filter: blur(2px); }
.st-form-lightbox__panel { position: relative; width: min(1120px, calc(100% - 48px)); height: auto; min-height: 0; max-height: none; overflow: visible; margin: 40px auto; padding: clamp(24px, 4vw, 56px); border-radius: 20px; background: #FFFAF2; box-shadow: 0 24px 80px rgba(39,36,36,.28); outline: none; }
.st-form-lightbox__close { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 1px solid rgba(74,58,49,.22); border-radius: 50%; background: #FFFAF2; color: #4A3A31; font: 32px/1 var(--font-body, Arial, sans-serif); cursor: pointer; }
.st-form-context { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 16px; border-radius: 16px; background: #F8EFE4; color: #4A3A31; }
.st-form-context img { display: block; flex: 0 0 112px; width: 112px; height: 82px; border-radius: 12px; object-fit: cover; }
.st-form-context strong { display: block; font: 22px/1.3 var(--font-accent, 'Montaga', Georgia, serif); }
.st-form-context p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.st-form-loading { display: grid; justify-items: center; gap: 12px; min-height: 180px; align-content: center; color: #4A3A31; }
.st-form-loading span { width: 40px; height: 40px; border: 3px solid rgba(201,121,83,.22); border-top-color: var(--st-color-terracota); border-radius: 50%; animation: st-form-spin .8s linear infinite; }
@keyframes st-form-spin { to { transform: rotate(360deg); } }
.st-form-error { padding: 16px; border-left: 4px solid var(--st-color-terracota); background: #F8EFE4; }
.st-form-retry { min-height: 48px; margin-top: 16px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--st-color-terracota); color: #FFFAF2; font: 600 15px var(--font-body, Arial, sans-serif); cursor: pointer; }
.st-form-lightbox-root input, .st-form-lightbox-root select, .st-form-lightbox-root textarea { font-size: 16px; }
@media (max-width: 767px) {
  .st-form-lightbox__panel { position: relative; inset: auto; width: 100vw; height: auto; min-height: 100dvh; max-height: none; overflow: visible; margin: 0; padding: 72px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 0; }
  .st-form-lightbox__close { top: max(12px, env(safe-area-inset-top)); right: 12px; margin: 0; }
  .st-form-context { gap: 12px; margin: 0 -20px 20px; padding: 12px 20px; border-radius: 0; }
  .st-form-context img { flex-basis: 72px; width: 72px; height: 60px; border-radius: 10px; }
  .st-form-context strong { font-size: 20px; }
  .st-form-context p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .st-form-loading span { animation-duration: 1.8s; } }

/* ==========================================================
   LIGHTBOX FORMULAIRE : bloc complet (à coller à la fin de style.css)
   ========================================================== */
.st-form-lightbox-root {
  --st-accent: var(--st-color-terracota);
  --st-accent-soft: #FBF1EA;
  --st-line: #E3D9CF;
  --st-text: var(--st-color-noir-volcanique);
  --st-radius: 12px;
}

/* ---------- 1. Barre d'étapes segmentée ---------- */
.st-form-lightbox-root .e-form__indicators {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.st-form-lightbox-root .e-form__indicators__indicator {
  flex: 1 1 0;
  position: relative;
  display: block;
  padding: 14px 0 0;
  text-align: left;
}

/* Masque ronds numérotés et séparateurs */
.st-form-lightbox-root .e-form__indicators__indicator__number,
.st-form-lightbox-root .e-form__indicators__indicator__separator {
  display: none;
}

/* Segment */
.st-form-lightbox-root .e-form__indicators__indicator::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--st-line);
  transition: background .3s ease;
}
.st-form-lightbox-root .e-form__indicators__indicator--state-active::before,
.st-form-lightbox-root .e-form__indicators__indicator--state-completed::before {
  background: var(--st-accent);
}

/* Libellé */
.st-form-lightbox-root .e-form__indicators__indicator__label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--st-text);
  opacity: .5;
}
.st-form-lightbox-root .e-form__indicators__indicator--state-active
.e-form__indicators__indicator__label {
  opacity: 1;
  font-weight: 600;
}

/* ---------- 2. Grand titre d'étape ---------- */
.st-form-lightbox-root .st-form-step-title {
  margin: 0 0 20px;
  font-family: var(--e-global-typography-primary-font-family, serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--st-text);
}

/* ---------- 3. Libellés et champs ---------- */
.st-form-lightbox-root .elementor-field-label {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--st-text);
}
.st-form-lightbox-root .elementor-field-textual {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: #fff;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-form-lightbox-root .elementor-field-textual:focus {
  border-color: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(201, 121, 83, .18);
  outline: none;
}

/* ---------- 4. Cartes de choix (classe st-choice-cards sur le champ) ---------- */
.st-form-lightbox-root .st-choice-cards .elementor-field-subgroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option {
  position: relative;
  margin: 0;
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option label {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: #fff;
  color: var(--st-text);
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option:hover label {
  border-color: var(--st-accent);
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option input:checked + label {
  border-color: var(--st-accent);
  background: var(--st-accent-soft);
  box-shadow: 0 0 0 1px var(--st-accent) inset;
}
.st-form-lightbox-root .st-choice-cards .elementor-field-option input:focus-visible + label {
  outline: 2px solid var(--st-text);
  outline-offset: 2px;
}

/* ---------- 5. Boutons Suivant / Précédent / Envoyer ---------- */
.st-form-lightbox-root .e-form__buttons {
  gap: 12px;
  margin-top: 8px;
}
.st-form-lightbox-root .elementor-button {
  border-radius: var(--st-radius);
  padding: 14px 24px;
  background: var(--st-accent);
  color: #fff;
  font-weight: 600;
  transition: opacity .2s ease, transform .2s ease;
}
.st-form-lightbox-root .elementor-button:hover {
  opacity: .9;
}
.st-form-lightbox-root .elementor-button:focus-visible {
  outline: 2px solid var(--st-text);
  outline-offset: 2px;
}
/* Bouton « Précédent » en version discrète */
.st-form-lightbox-root .e-form__buttons__wrapper__button-previous {
  background: transparent;
  color: var(--st-text);
  border: 1px solid var(--st-line);
}

/* ---------- 6. Erreurs et message de succès ---------- */
.st-form-lightbox-root .elementor-message-danger,
.st-form-lightbox-root .elementor-error .elementor-field {
  border-color: #B3412F;
}
.st-form-lightbox-root .elementor-message-success {
  padding: 16px;
  border-radius: var(--st-radius);
  background: var(--st-accent-soft);
  color: var(--st-text);
}
/* Correctif formulaire Sport Travel : rendre la valeur de plage sélectionnée lisible. */
.st-form-lightbox-root .st-date-range-input {
  position: relative !important;
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 12px 16px;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid #E3D9CF;
  border-radius: 10px;
  background: #fff;
  color: #4a3b34;
  font: inherit;
  text-align: center;
}



/* ---------- 7. Mobile ---------- */
@media (max-width: 767px) {
  /* Seul le libellé de l'étape active reste visible */
  .st-form-lightbox-root .e-form__indicators__indicator__label { display: none; }
  .st-form-lightbox-root .e-form__indicators__indicator--state-active
  .e-form__indicators__indicator__label { display: block; }

  .st-form-lightbox-root .st-choice-cards .elementor-field-subgroup {
    grid-template-columns: 1fr;
  }
  .st-form-lightbox-root .e-form__buttons { flex-direction: column-reverse; }
  .st-form-lightbox-root .elementor-button { width: 100%; }
}

/* ---------- 8. Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-form-lightbox-root * { transition: none !important; }
}
/* Correctifs lightbox formulaire : scroll stable, fermeture et layout des étapes. */
.st-form-lock {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.st-form-lightbox-root {
  overscroll-behavior: contain;
}
.st-form-lightbox__panel {
  box-sizing: border-box;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}
.st-form-lightbox__close {
  /* Positionné dans la lightbox, sans sticky : le bouton défile avec son contenu. */
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 100001;
  float: none;
  margin: 0;
}
.st-form-lightbox__content,
.st-form-lightbox-root form.elementor-form,
.st-form-lightbox-root .elementor-field-type-step {
  min-height: 0;
  height: auto;
  transform: none;
  scroll-margin: 0;
}
.st-form-lightbox-root .elementor-field-type-step {
  margin-block: 0;
}
@media (max-width: 767px) {
  .st-form-lightbox__panel {
    height: auto;
    max-height: none;
    overflow-y: auto;
    margin: 0;
    padding: 72px 20px max(20px, env(safe-area-inset-bottom));
  }
  .st-form-lightbox__close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    margin: 0;
  }
}
/* État d'ouverture explicite, même si une règle tierce masque les overlays. */
.st-form-lightbox-root.is-open {
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.st-form-lightbox-root:not(.is-open) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   CHAMPS DES FORMULAIRES SPORT TRAVEL — radios en pastilles, textarea, dates
   Référence : maquettes Formulaires_Sport_Travel + Web Guidelines 2026.
   Les couleurs utilisent les tokens définis plus haut dans le lightbox ; les
   fallbacks reprennent la palette officielle. Les champs .st-choice-cards
   gardent leur présentation de cartes existante ; .st-choice-pills force les
   pastilles si cette classe doit être ajoutée au champ.
   ============================================================================ */

.st-form-lightbox-root { --st-choice-soft: #FCEFE7; }

/* ---------- Radios courts : pastilles accessibles (ne change pas les cartes) ---------- */
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-subgroup,
.st-form-lightbox-root .st-choice-pills .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option,
.st-form-lightbox-root .st-choice-pills .elementor-field-option {
  position: relative;
  display: inline-flex;
  margin: 0;
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option input[type="radio"],
.st-form-lightbox-root .st-choice-pills .elementor-field-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option label,
.st-form-lightbox-root .st-choice-pills .elementor-field-option label {
  display: inline-flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--st-line, #E3D9CF);
  border-radius: 999px;
  background: #fff;
  color: var(--st-text, var(--st-color-noir-volcanique));
  font: 500 14px/1.35 var(--font-body, 'Montserrat', Arial, sans-serif);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option:hover label,
.st-form-lightbox-root .st-choice-pills .elementor-field-option:hover label {
  border-color: var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option input[type="radio"]:checked + label,
.st-form-lightbox-root .st-choice-pills .elementor-field-option input[type="radio"]:checked + label,
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option:has(input[type="radio"]:checked) label,
.st-form-lightbox-root .st-choice-pills .elementor-field-option:has(input[type="radio"]:checked) label {
  border-color: var(--st-accent, var(--st-color-terracota));
  background: var(--st-choice-soft, #FCEFE7);
  color: var(--st-text, var(--st-color-noir-volcanique));
  box-shadow: inset 0 0 0 1px var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option input[type="radio"]:focus-visible + label,
.st-form-lightbox-root .st-choice-pills .elementor-field-option input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--st-text, var(--st-color-noir-volcanique));
  outline-offset: 2px;
}

/* ---------- Texte libre : largeur fluide et hauteur proche de la maquette ---------- */
.st-form-lightbox-root textarea.elementor-field,
.st-form-lightbox-root .elementor-field-type-textarea .elementor-field-textual {
  min-height: 96px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--st-line, #E3D9CF);
  border-radius: 8px;
  background: #fff;
  color: var(--st-text, var(--st-color-noir-volcanique));
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.st-form-lightbox-root textarea.elementor-field::placeholder,
.st-form-lightbox-root .elementor-field-type-textarea .elementor-field-textual::placeholder {
  color: #81776F;
  opacity: 1;
}
.st-form-lightbox-root textarea.elementor-field:focus,
.st-form-lightbox-root .elementor-field-type-textarea .elementor-field-textual:focus {
  border-color: var(--st-accent, var(--st-color-terracota));
  box-shadow: 0 0 0 3px rgba(201, 121, 83, .18);
  outline: none;
}

/* ---------- Flatpickr : calendrier visible dans la lightbox ---------- */
.st-form-lightbox-root .flatpickr-calendar,
body:has(.st-form-lightbox-root.is-open) .flatpickr-calendar {
  overflow: hidden;
  border: 1px solid var(--st-line, #E3D9CF);
  border-radius: var(--st-radius, 12px);
  background: #fff;
  box-shadow: 0 12px 32px rgba(39, 36, 36, .16);
  color: var(--st-text, var(--st-color-noir-volcanique));
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
}
.st-form-lightbox-root .flatpickr-calendar.arrowTop::before,
.st-form-lightbox-root .flatpickr-calendar.arrowTop::after,
body:has(.st-form-lightbox-root.is-open) .flatpickr-calendar.arrowTop::before,
body:has(.st-form-lightbox-root.is-open) .flatpickr-calendar.arrowTop::after {
  border-bottom-color: #fff;
}
.st-form-lightbox-root .flatpickr-months,
body:has(.st-form-lightbox-root.is-open) .flatpickr-months {
  padding-top: 4px;
  background: var(--st-color-sable, #F8EFE4);
}
.st-form-lightbox-root .flatpickr-current-month,
body:has(.st-form-lightbox-root.is-open) .flatpickr-current-month {
  color: var(--st-color-brun, #4A3A31);
  font: 600 14px/1.3 var(--font-body, 'Montserrat', Arial, sans-serif);
}
.st-form-lightbox-root .flatpickr-current-month .flatpickr-monthDropdown-months,
.st-form-lightbox-root .flatpickr-current-month input.cur-year,
body:has(.st-form-lightbox-root.is-open) .flatpickr-current-month .flatpickr-monthDropdown-months,
body:has(.st-form-lightbox-root.is-open) .flatpickr-current-month input.cur-year {
  color: inherit;
  font: inherit;
}
.st-form-lightbox-root .flatpickr-prev-month,
.st-form-lightbox-root .flatpickr-next-month,
body:has(.st-form-lightbox-root.is-open) .flatpickr-prev-month,
body:has(.st-form-lightbox-root.is-open) .flatpickr-next-month {
  fill: var(--st-color-brun, #4A3A31);
  color: var(--st-color-brun, #4A3A31);
}
.st-form-lightbox-root .flatpickr-prev-month:hover svg,
.st-form-lightbox-root .flatpickr-next-month:hover svg,
body:has(.st-form-lightbox-root.is-open) .flatpickr-prev-month:hover svg,
body:has(.st-form-lightbox-root.is-open) .flatpickr-next-month:hover svg {
  fill: var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .flatpickr-weekdays,
body:has(.st-form-lightbox-root.is-open) .flatpickr-weekdays {
  background: #fff;
}
.st-form-lightbox-root span.flatpickr-weekday,
body:has(.st-form-lightbox-root.is-open) span.flatpickr-weekday {
  color: var(--st-color-olive, #7A8162);
  font: 600 11px/1 var(--font-body, 'Montserrat', Arial, sans-serif);
  text-transform: uppercase;
}
.st-form-lightbox-root .flatpickr-day,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day {
  border-radius: 50%;
  color: var(--st-text, var(--st-color-noir-volcanique));
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
}
.st-form-lightbox-root .flatpickr-day:hover,
.st-form-lightbox-root .flatpickr-day:focus,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day:hover,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day:focus {
  border-color: var(--st-accent, var(--st-color-terracota));
  background: var(--st-accent-soft, #FBF1EA);
}
.st-form-lightbox-root .flatpickr-day.today,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.today {
  border-color: var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .flatpickr-day.selected,
.st-form-lightbox-root .flatpickr-day.startRange,
.st-form-lightbox-root .flatpickr-day.endRange,
.st-form-lightbox-root .flatpickr-day.selected:hover,
.st-form-lightbox-root .flatpickr-day.startRange:hover,
.st-form-lightbox-root .flatpickr-day.endRange:hover,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.selected,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.startRange,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.endRange,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.selected:hover,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.startRange:hover,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.endRange:hover {
  border-color: var(--st-accent, var(--st-color-terracota));
  background: var(--st-accent, var(--st-color-terracota));
  color: var(--ft-color-pierre-claire, #FFFAF2);
}
.st-form-lightbox-root .flatpickr-day.inRange,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.inRange {
  border-color: var(--st-accent-soft, #FBF1EA);
  background: var(--st-choice-soft, #FCEFE7);
  box-shadow: -5px 0 0 var(--st-choice-soft, #FCEFE7), 5px 0 0 var(--st-choice-soft, #FCEFE7);
  color: var(--st-text, var(--st-color-noir-volcanique));
}
.st-form-lightbox-root .flatpickr-day.prevMonthDay,
.st-form-lightbox-root .flatpickr-day.nextMonthDay,
.st-form-lightbox-root .flatpickr-day.flatpickr-disabled,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.prevMonthDay,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.nextMonthDay,
body:has(.st-form-lightbox-root.is-open) .flatpickr-day.flatpickr-disabled {
  color: #B7ADA4;
}

/* Icône calendrier décorative pour le champ date; Flatpickr conserve l'interaction. */
.st-form-lightbox-root .elementor-field-type-date .elementor-field-textual,
.st-form-lightbox-root input.elementor-field-textual.flatpickr-input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A3A31' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Correctif de disposition : radios en pastilles sur une ligne avec retour automatique.
   Exclusion des champs cartes pour préserver leur grille et leurs styles. */
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-subgroup {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 12px;
}
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-subgroup > .elementor-field-option,
.st-form-lightbox-root .elementor-field-type-radio:not(.st-choice-cards) .elementor-field-option {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Navigation des boutons multi-étapes Elementor dans la lightbox.
   Le ciblage couvre les deux variantes de structure : .e-form__buttons et les groupes d'action
   directement enfants de .elementor-form-fields-wrapper. */
.st-form-lightbox-root .elementor-form .e-form__buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px;
  margin-top: 8px;
}

.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-previous,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-next,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-submit {
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: none !important;
}

.st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
}

.st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-previous {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-right: auto !important;
  order: 1;
}
.st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-next,
.st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-submit {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  order: 2;
}

.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-previous,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-next,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-submit {
  display: inline-flex !important;
  padding: 14px 32px !important;
  border-radius: 999px;
  font-family: var(--font-body, 'Montserrat', Arial, sans-serif);
  white-space: nowrap;
}

.st-form-lightbox-root .elementor-form .e-form__buttons .elementor-button {
  width: auto !important;
  max-width: none !important;
  padding: 14px 32px !important;
}
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-previous .elementor-button {
  border: 1px solid var(--st-color-terracota) !important;
  background: transparent !important;
  color: var(--st-color-terracota) !important;
}
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-next .elementor-button,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-submit .elementor-button {
  background: var(--st-color-terracota) !important;
  color: #fff !important;
}

.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-previous {
  margin-right: auto !important;
  border: 1px solid var(--st-color-terracota) !important;
  background: transparent !important;
  color: var(--st-color-terracota) !important;
}
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-next,
.st-form-lightbox-root .elementor-form .e-form__buttons__wrapper__button-submit {
  margin-left: auto !important;
  background: var(--st-color-terracota) !important;
  color: #fff !important;
}

@media (max-width: 480px) {
  .st-form-lightbox-root .elementor-form .e-form__buttons {
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
  }
  .st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-previous,
  .st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-next,
  .st-form-lightbox-root .elementor-form .elementor-form-fields-wrapper > .elementor-field-type-submit {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   CONDITIONS FORMULAIRE MULTI-ÉTAPES — voyageurs & dates
   ========================================================================== */
.st-form-lightbox-root .elementor-field-type-step.elementor-hidden { display: none !important; }
.st-form-lightbox-root .st-conditional-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.st-form-lightbox-root .st-conditional-pills input[type="radio"] { position:absolute; opacity:0; width:1px; height:1px; }
.st-form-lightbox-root .st-conditional-pills label { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 17px; border:1px solid #E3D9CF; border-radius:999px; background:#fff; cursor:pointer; }
.st-form-lightbox-root .st-conditional-pills input:checked + label { border-color:#4a3b34; background:#4a3b34; color:#fff; box-shadow:inset 0 0 0 1px #4a3b34; }
.st-form-lightbox-root .st-conditional-pills input:focus-visible + label { outline:2px solid var(--st-color-terracota); outline-offset:2px; }
.st-form-lightbox-root .st-party-panel { margin-top:18px; padding:20px; border-radius:16px; background:#F5EEE3; }
.st-form-lightbox-root .st-party-panel h4,.st-form-lightbox-root .st-date-range-panel h4 { margin:0 0 14px; font-size:18px; }
.st-form-lightbox-root .st-party-counts { display:grid; gap:10px; }
.st-form-lightbox-root .st-counter-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.62); }
.st-form-lightbox-root .st-counter-copy { display:grid; gap:3px; }
.st-form-lightbox-root .st-counter-copy small { color:#766b62; }
.st-form-lightbox-root .st-counter { display:flex; align-items:center; gap:14px; }
.st-form-lightbox-root .st-counter button { padding:0; width:36px; height:36px; border:1px solid var(--st-color-terracota); border-radius:50%; background:#fff; color:#4a3b34; font-size:22px; cursor:pointer; }
.st-form-lightbox-root .st-counter output { min-width:1.5em; text-align:center; font-weight:600; }
.st-form-lightbox-root .st-child-ages { margin-top:18px; }
.st-form-lightbox-root .st-child-age-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.st-form-lightbox-root .st-child-age-fields label { display:grid; gap:6px; }
.st-form-lightbox-root .st-child-age-fields select { min-height:44px; padding:9px 12px; border:1px solid #E3D9CF; border-radius:8px; background:#fff; }
.st-form-lightbox-root .st-date-range-panel { margin-top:18px; padding:20px; border-radius:16px; background:#F5EEE3; }
.st-form-lightbox-root .st-date-range-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline { width:100%; max-width:690px; margin:0 auto; border:0; border-radius:12px; background:#fff; box-shadow:none; }
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .dayContainer { min-width:calc(50% - 1px); max-width:calc(50% - 1px); }
.st-form-lightbox-root .flatpickr-calendar .flatpickr-prev-month,.st-form-lightbox-root .flatpickr-calendar .flatpickr-next-month { top:8px; width:34px; height:34px; border-radius:50%; background:#fff; }
.st-form-lightbox-root .flatpickr-calendar .flatpickr-prev-month:hover,.st-form-lightbox-root .flatpickr-calendar .flatpickr-next-month:hover { background:#F5EEE3; }
.st-form-lightbox-root .flatpickr-day.selected,.st-form-lightbox-root .flatpickr-day.startRange,.st-form-lightbox-root .flatpickr-day.endRange { border-color:var(--st-color-terracota)!important; background:var(--st-color-terracota)!important; color:#fff!important; }
.st-form-lightbox-root .flatpickr-day.inRange { border-color:#FCEFE7!important; background:#FCEFE7!important; box-shadow:-5px 0 0 #FCEFE7,5px 0 0 #FCEFE7!important; }
.st-form-lightbox-root .st-date-summary { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.st-form-lightbox-root .st-date-summary span { padding:8px 14px; border-radius:999px; background:#fff; color:#4a3b34; font-size:14px; }
.st-form-lightbox-root .st-conditional-error { display:block; box-sizing:border-box; width:100%; flex:0 0 100%; margin:12px 0 0; padding:10px 12px; border-left:3px solid #B5443C; border-radius:4px; color:#9B322B; background:#FFF4F2; }
/* Les field groups Elementor/pastilles possèdent des display:flex explicites qui peuvent
   supplanter l'attribut hidden. Les conditions sont donc fail-closed par classe CSS. */

/* Elementor/les styles de pastilles posent display:flex sur les groupes. Fail closed même
   avant l'initialisation JS et quel que soit le display applicatif. */
.st-form-lightbox .st-conditional:not(.is-visible),
.st-form-lightbox-root .st-conditional:not(.is-visible),
.st-form-lightbox .st-month-choice-group:not(.is-visible),
.st-form-lightbox-root .st-month-choice-group:not(.is-visible),
.st-form-lightbox .st-duration-choice-group:not(.is-visible),
.st-form-lightbox-root .st-duration-choice-group:not(.is-visible),
.st-form-lightbox .elementor-field-group-quand_partir:not(.is-visible),
.st-form-lightbox-root .elementor-field-group-quand_partir:not(.is-visible),
.st-form-lightbox .elementor-field-group-DureeApproximative:not(.is-visible),
.st-form-lightbox-root .elementor-field-group-DureeApproximative:not(.is-visible),
.st-form-lightbox .elementor-field-group:has([name="form_fields[quand_partir]"]):not(.is-visible),
.st-form-lightbox-root .elementor-field-group:has([name="form_fields[quand_partir]"]):not(.is-visible),
.st-form-lightbox .elementor-field-group:has([name="form_fields[DureeApproximative]"]):not(.is-visible),
.st-form-lightbox-root .elementor-field-group:has([name="form_fields[DureeApproximative]"]):not(.is-visible) { display:none!important; }
.st-form-lightbox .elementor-field-group.st-conditional.is-visible,
.st-form-lightbox-root .elementor-field-group.st-conditional.is-visible,
.st-form-lightbox .elementor-field-group.st-month-choice-group.is-visible,
.st-form-lightbox-root .elementor-field-group.st-month-choice-group.is-visible,
.st-form-lightbox .elementor-field-group.st-duration-choice-group.is-visible,
.st-form-lightbox-root .elementor-field-group.st-duration-choice-group.is-visible { display:flex!important; }
.st-form-lightbox .st-conditional.is-visible:not(.elementor-field-group),
.st-form-lightbox-root .st-conditional.is-visible:not(.elementor-field-group) { display:block!important; }
.st-form-lightbox-root [hidden] { display:none!important; }
@media(max-width:767px) {
  .st-form-lightbox-root .st-party-panel,.st-form-lightbox-root .st-date-range-panel { padding:16px; }
  .st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline { max-width:360px; }
  .st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .dayContainer { min-width:100%; max-width:100%; }
  .st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .flatpickr-days { width:100%; }
}

.st-form-lightbox-root .st-travel-precision-field input[type="radio"]:checked + label,
.st-form-lightbox-root .st-travel-precision-field .elementor-field-option:has(input[type="radio"]:checked) label { background:#4a3b34!important; border-color:#4a3b34!important; color:#fff!important; box-shadow:inset 0 0 0 1px #4a3b34!important; }
.st-form-lightbox-root .st-month-more { display:none; margin-top:12px; padding:9px 16px; border:1px solid var(--st-color-terracota); border-radius:999px; background:#fff; color:#4a3b34; cursor:pointer; }
@media(max-width:767px) {
 .st-form-lightbox-root .st-month-choice-group .elementor-field-option:nth-child(n+5) { display:none!important; }
 .st-form-lightbox-root .st-month-choice-group.st-show-all-months .elementor-field-option:nth-child(n+5) { display:inline-flex!important; }
 .st-form-lightbox-root .st-month-more { display:inline-flex; }
}

/* Pastilles de composition du groupe : Elementor ajoute parfois des largeurs de colonnes
   et les règles historiques de cartes ne doivent pas s'appliquer à ce champ. */
.st-form-lightbox-root .st-travel-party-field .elementor-field-subgroup {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
}
.st-form-lightbox-root .st-travel-party-field .elementor-field-subgroup > .elementor-field-option {
  position:relative !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.st-form-lightbox-root .st-travel-party-field .elementor-field-option label {
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:auto !important;
  height:auto !important;
  min-height:44px !important;
  margin:0 !important;
  padding:10px 16px !important;
  border:1px solid #e5dcd0 !important;
  border-radius:999px !important;
  background:#fff;
  line-height:1.35 !important;
}
.st-form-lightbox-root .st-travel-party-field .elementor-field-option input[type="radio"]:checked + label,
.st-form-lightbox-root .st-travel-party-field .elementor-field-option:has(input[type="radio"]:checked) label {
  border-color:var(--st-color-terracota) !important;
  box-shadow:inset 0 0 0 1px var(--st-color-terracota);
}

/* Flatpickr peut inscrire une largeur minuscule en style inline s'il a été
   calculé dans une étape cachée : largeur explicite, deux colonnes fluides. */
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline {
  width:100% !important;
  max-width:690px !important;
}
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .flatpickr-rContainer,
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .flatpickr-days {
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
.st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .dayContainer {
  width:50% !important;
  min-width:0 !important;
  max-width:50% !important;
  flex:0 0 50% !important;
}
@media(max-width:767px) {
  .st-form-lightbox-root .st-date-range-panel .flatpickr-calendar.inline .dayContainer {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex-basis:100% !important;
  }
}



/* Champ « Comment imaginez-vous votre voyage ? » : pills à sélection multiple.
   Les inputs restent focusables et associés à leurs labels (état focus visible). */
.st-form-lightbox-root .st-travel-style-field .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option {
  position: relative;
  display: inline-flex;
  margin: 0;
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option label {
  display: inline-flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--st-line, #E3D9CF);
  border-radius: 999px;
  background: #fff;
  color: var(--st-text, var(--st-color-noir-volcanique));
  font: 500 14px/1.35 var(--font-body, 'Montserrat', Arial, sans-serif);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option:hover label {
  border-color: var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option input[type="checkbox"]:checked + label,
.st-form-lightbox-root .st-travel-style-field .elementor-field-option:has(input[type="checkbox"]:checked) label {
  border-color: var(--st-accent, var(--st-color-terracota));
  background: var(--st-choice-soft, #FCEFE7);
  color: var(--st-text, var(--st-color-noir-volcanique));
  box-shadow: inset 0 0 0 1px var(--st-accent, var(--st-color-terracota));
}
.st-form-lightbox-root .st-travel-style-field .elementor-field-option input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--st-text, var(--st-color-noir-volcanique));
  outline-offset: 2px;
}

/* La colonne du résumé reste dans le template Elementor ; le parent est identifié
   côté JS pour composer formulaire (60 %) + carte/infos statiques (40 %). */
.st-form-lightbox-root .st-form-two-column {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  align-items: start;
  gap: 28px;
  width: 100%;
}
.st-form-lightbox-root .st-form-two-column > .e-con {
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  flex: initial !important;
  --width: auto !important;
}
.st-form-lightbox-root #circuit_choisi {
  box-sizing: border-box;
  min-width: 0;
}
.st-form-lightbox-root #circuit_choisi .st-form-context {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 16px;
  background: #F5EEE3;
}

.st-form-llightbox-root .etape {
  color: var(--st-color-terracota);
  font-weight: bold;
  font-size: .8rem;
}
@media (max-width: 767px) {
  .st-form-lightbox-root .st-form-two-column {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .st-form-lightbox-root #circuit_choisi .st-form-context {
    gap: 12px;
    padding: 12px;
  }
  .st-form-lightbox-root #circuit_choisi .st-form-context img {
    flex-basis: 72px;
    width: 72px;
    height: 60px;
  }
}


/* ============================================================================
   Hauteur libre — lightbox calée sur l'étape et les conditions visibles.
   Le root est le conteneur scrollable (le JS verrouille le body pendant l'ouverture).
   ============================================================================ */
.st-form-lightbox-root {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.st-form-lightbox-root.is-open {
  display: flex !important; /* remplace le display:block !important déclaré plus haut */
  align-items: flex-start;
  justify-content: center;
}
.st-form-lightbox__overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.st-form-lightbox__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 40px auto;
}
.st-form-lightbox__content,
.st-form-lightbox-root form.elementor-form,
.st-form-lightbox-root .elementor-field-type-step {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
@media (max-width: 767px) {
  .st-form-lightbox-root.is-open {
    align-items: stretch;
    justify-content: flex-start;
  }
  .st-form-lightbox__panel {
    flex: 1 0 auto;
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 72px 20px max(20px, env(safe-area-inset-bottom));
    border-radius: 0;
  }
}







  /* ==========================================================
  BLOC CLIQUABLE GÉNÉRIQUE (stretched link)
  Usage : classe .st-block-link sur le conteneur Elementor.
  ========================================================== */

.st-block-link {position: relative; cursor: pointer;}
.st-block-link .st-block-link_target a::before {content: ""; position: absolute; inset: 0; z-index: 2;}
.st-block-link .elementor-widget, .st-block-link .elementor-widget-container {position: static;}

/* ==========================================================
   Effet Ken Burns sur l'image au survol du titre
   Structure : .st-kb-card > .st-kb-img + .elementor-widget-heading
   ========================================================== */
/* Zoom lent sur l'image au survol du bloc cliquable */
.st-block-link .st-kb { overflow: hidden; border-radius: inherit; }
.st-block-link .st-kb img {
    transition: transform 0.6s ease-out;
    transform: scale(1);
}
.st-block-link:hover .st-kb img {
    transform: scale(1.12) translate(-1.5%, -1.5%);
    transition: transform 3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .st-block-link .st-kb img,
    .st-block-link:hover .st-kb img { transition: none; transform: none; }
}