.elementor-kit-9364{--e-global-color-primary:#008C8C;--e-global-color-secondary:#061E26;--e-global-color-text:#101820;--e-global-color-accent:#52606D;--e-global-color-wsurface:#FFFFFF;--e-global-color-wlightbg:#F7F9F9;--e-global-color-wborder:#E5EAEA;--e-global-color-wember:#F4A900;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.2em;--e-global-typography-wmeta-font-family:"Inter";--e-global-typography-wmeta-font-size:14px;--e-global-typography-wmeta-font-weight:500;--e-global-typography-wmeta-line-height:1.5em;--e-global-typography-wbadge-font-family:"Inter";--e-global-typography-wbadge-font-size:12px;--e-global-typography-wbadge-font-weight:600;--e-global-typography-wbadge-text-transform:uppercase;--e-global-typography-wbadge-letter-spacing:0.06em;color:#101820;font-family:"Inter", sans-serif;font-size:16px;font-weight:400;line-height:1.6em;}.elementor-kit-9364 button,.elementor-kit-9364 input[type="button"],.elementor-kit-9364 input[type="submit"],.elementor-kit-9364 .elementor-button{background-color:#00706F;font-family:"Inter", sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;border-radius:8px 8px 8px 8px;padding:14px 28px 14px 28px;}.elementor-kit-9364 button:hover,.elementor-kit-9364 button:focus,.elementor-kit-9364 input[type="button"]:hover,.elementor-kit-9364 input[type="button"]:focus,.elementor-kit-9364 input[type="submit"]:hover,.elementor-kit-9364 input[type="submit"]:focus,.elementor-kit-9364 .elementor-button:hover,.elementor-kit-9364 .elementor-button:focus{background-color:#061E26;color:#FFFFFF;}.elementor-kit-9364 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9364 a{color:#008C8C;}.elementor-kit-9364 a:hover{color:#061E26;}.elementor-kit-9364 h1{color:#101820;font-family:"Manrope", sans-serif;font-size:56px;font-weight:700;line-height:1.05em;}.elementor-kit-9364 h2{color:#101820;font-family:"Manrope", sans-serif;font-size:40px;font-weight:700;line-height:1.1em;}.elementor-kit-9364 h3{color:#101820;font-family:"Manrope", sans-serif;font-size:28px;font-weight:700;line-height:1.15em;}.elementor-kit-9364 h4{color:#101820;font-family:"Manrope", sans-serif;font-size:22px;font-weight:600;line-height:1.25em;}.elementor-kit-9364 h5{color:#101820;font-family:"Manrope", sans-serif;font-size:18px;font-weight:600;line-height:1.35em;}.elementor-kit-9364 h6{color:#101820;font-family:"Manrope", sans-serif;font-size:16px;font-weight:600;line-height:1.4em;}.elementor-kit-9364 input:not([type="button"]):not([type="submit"]),.elementor-kit-9364 textarea,.elementor-kit-9364 .elementor-field-textual{font-family:"Inter", sans-serif;font-size:15px;font-weight:400;color:#101820;background-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-9364 h1{font-size:40px;}.elementor-kit-9364 h2{font-size:32px;}.elementor-kit-9364 h3{font-size:24px;}.elementor-kit-9364 h4{font-size:20px;}.elementor-kit-9364 h5{font-size:18px;}.elementor-kit-9364 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9364 h1{font-size:32px;}.elementor-kit-9364 h2{font-size:26px;}.elementor-kit-9364 h3{font-size:22px;}.elementor-kit-9364 h4{font-size:18px;}.elementor-kit-9364 h5{font-size:16px;}.elementor-kit-9364 h6{font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Header auth state. WordPress puts .logged-in on <body>, so the correct
   account button shows without JavaScript or an extra plugin.
   Lives in the kit because Elementor does not emit page-settings Custom CSS
   for header/footer templates. */
body.logged-in .wse-auth-out{ display:none !important; }
body:not(.logged-in) .wse-auth-in{ display:none !important; }

/* FR | EN switcher. color:inherit so it reads correctly on the light header
   and the dark footer without two sets of rules. */
.wse-lang{ display:inline-flex; align-items:center; gap:7px; font-family:Inter,sans-serif; font-size:14px; line-height:1; }
.wse-lang__item{ color:inherit; text-decoration:none; font-weight:500; opacity:.6; transition:opacity .15s ease, color .15s ease; }
.wse-lang__item:hover{ opacity:1; color:#008C8C; }
.wse-lang__item.is-active{ font-weight:700; opacity:1; }
.wse-lang__sep{ opacity:.3; }

/* Legal pages: long-form reading, and a loud marker for anything the business
   still has to supply before these can be relied on. */
.wse-legal{ color:#101820; }
.wse-legal h2{ font-family:Manrope,system-ui,sans-serif; font-weight:800; font-size:24px; color:#061E26; margin:38px 0 12px; padding-top:22px; border-top:1px solid #E5EAEA; }
.wse-legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.wse-legal h3{ font-family:Manrope,system-ui,sans-serif; font-weight:700; font-size:18px; color:#061E26; margin:24px 0 8px; }
.wse-legal p, .wse-legal li{ font-family:Inter,system-ui,sans-serif; font-size:16px; line-height:1.75; color:#2C3A42; }
.wse-legal ul, .wse-legal ol{ margin:0 0 16px 22px; }
.wse-legal li{ margin-bottom:8px; }
.wse-legal a{ color:#008C8C; font-weight:600; }
.wse-legal strong{ color:#061E26; }
.wse-legal mark{ background:#FFF3D6; color:#6B4A00; border:1px solid #F4A900; border-radius:5px; padding:1px 7px; font-family:Inter,system-ui,sans-serif; font-weight:600; font-size:14px; }
.wse-legal table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-family:Inter,system-ui,sans-serif; font-size:14.5px; }
.wse-legal th, .wse-legal td{ border:1px solid #E5EAEA; padding:10px 12px; text-align:left; vertical-align:top; }
.wse-legal th{ background:#F7F9F9; font-weight:700; color:#061E26; }
.wse-legal code{ background:#F7F9F9; border:1px solid #E5EAEA; border-radius:4px; padding:1px 6px; font-size:13.5px; }
.wse-legal__notice{ background:#FFF8E8; border:1px solid #F4A900; border-radius:12px; padding:16px 18px; margin:0 0 28px; }
.wse-legal__notice p{ margin:0; font-size:15px; color:#6B4A00; }

/* Legal tables can be wider than a phone. Give each one its own horizontal
   scroll rather than letting it be clipped. */
@media (max-width:781px){
  .wse-legal table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wse-legal table th, .wse-legal table td{ white-space:normal; min-width:120px; }
  .wse-legal table td:first-child, .wse-legal table th:first-child{ min-width:150px; }
}
/* --- wse-anchor-button-fix ------------------------------------------------
   Elementors global link colour (.elementor-kit-9364 a, specificity 0,1,1)
   outranks Blocksys button rule (.button, 0,1,0). Any button that is an <a>
   - Proceed to checkout, Return to shop, View cart, Add to cart on archives -
   therefore rendered teal text on the blue button background, which fails
   contrast. Hand the text colour back to the theme variable rather than
   hardcoding a colour, so it keeps following the Customizer button setting. */
.elementor-kit-9364 a.button,
.elementor-kit-9364 a.ct-button,
.elementor-kit-9364 a.checkout-button,
.elementor-kit-9364 a.added_to_cart,
.elementor-kit-9364 a.wp-element-button,
.elementor-kit-9364 a.wp-block-button__link,
.elementor-kit-9364 .woocommerce a.button,
.elementor-kit-9364 .woocommerce-page a.button{
  color: var(--theme-button-text-initial-color, #fff);
}
.elementor-kit-9364 a.button:hover,
.elementor-kit-9364 a.ct-button:hover,
.elementor-kit-9364 a.checkout-button:hover,
.elementor-kit-9364 a.added_to_cart:hover,
.elementor-kit-9364 a.wp-element-button:hover,
.elementor-kit-9364 a.wp-block-button__link:hover,
.elementor-kit-9364 .woocommerce a.button:hover,
.elementor-kit-9364 .woocommerce-page a.button:hover{
  color: var(--theme-button-text-hover-color, #fff);
}
/* Part divider inside a long legal document - marks where the audience changes
   (for example the switch from attendee terms to organizer terms). Deliberately
   distinct from the numbered h2 rules so it reads as a level above them. */
.wse-legal p.wse-legal__part{
  margin:56px 0 0; padding:20px 0 0; border-top:2px solid #008C8C;
  font-family:Manrope,system-ui,sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:#008C8C; text-align:center;
}
/* The numbered heading that follows a part divider must not draw its own rule. */
.wse-legal p.wse-legal__part + h2{ margin-top:16px; padding-top:0; border-top:0; }
/* --- wse-card-thumb-fix ---------------------------------------------------
   Elementor wraps a linked image in an inline-block <a>. That anchor shrink-
   wraps to the image intrinsic width at the fixed 190px height, so a square
   thumbnail lays out 190px wide inside a 283px card and leaves gaps, while a
   3:2 thumbnail happens to fill it. width:100% on the img was resolving
   against the shrunken anchor rather than the card, and object-fit:cover
   never got to crop. Make the anchor fill the card so every thumbnail is
   cropped to the same box. */
.elementor-9409 .elementor-element-lpimg a,
.elementor-9409 .elementor-element-lpimg .elementor-widget-container > a{
  display:block; width:100%;
}
.elementor-9409 .elementor-element-lpimg img{ display:block; }
/* --- wse-spotlight --------------------------------------------------------
   Featured-event banner. The content column was unconstrained and the scrim
   faded across 78% of the width, so the headline landed on top of the poster
   own typography and two type systems competed. Treat the banner as a ticket:
   a solid brand stub carrying all the words, a perforated edge, and the
   artwork left clean on the other side. */
.elementor-9375 .elementor-element-slidea,
.elementor-9375 .elementor-element-slideb{
  border-radius:22px; overflow:hidden; position:relative; isolation:isolate;
  background-position:right center; background-size:cover;
  box-shadow:0 30px 70px -30px rgba(6,30,38,.60);
}
/* Crisp stub instead of a wide muddy fade */
.elementor-9375 .elementor-element-slidea::before,
.elementor-9375 .elementor-element-slideb::before{
  background-image:linear-gradient(90deg,
    rgba(6,30,38,.975) 0%, rgba(6,30,38,.975) 36%,
    rgba(6,30,38,.80) 48%, rgba(6,30,38,.18) 72%,
    rgba(6,30,38,.10) 100%) !important;
}
/* Perforated ticket edge */
.elementor-9375 .elementor-element-slidea::after,
.elementor-9375 .elementor-element-slideb::after{
  content:""; position:absolute; top:22px; bottom:22px; left:36%;
  border-left:2px dashed rgba(255,255,255,.30);
  z-index:3; pointer-events:none;
}
/* Keep the words inside the stub */
.elementor-9375 .elementor-element-slal,
.elementor-9375 .elementor-element-slbl{
  flex:0 0 auto; width:36%; max-width:520px; z-index:4; position:relative;
}
@media (max-width:1024px){
.elementor-9375 .elementor-element-slidea::after,.elementor-9375 .elementor-element-slideb::after{ left:46%; }
.elementor-9375 .elementor-element-slal,.elementor-9375 .elementor-element-slbl{ width:46%; }
}
@media (max-width:767px){
.elementor-9375 .elementor-element-slidea::after,.elementor-9375 .elementor-element-slideb::after{ display:none; }
.elementor-9375 .elementor-element-slal,.elementor-9375 .elementor-element-slbl{ width:100%; max-width:none; }
.elementor-9375 .elementor-element-slidea::before,.elementor-9375 .elementor-element-slideb::before{
  background-image:linear-gradient(180deg, rgba(6,30,38,.80) 0%, rgba(6,30,38,.96) 55%) !important;
}
}
/* --- wse-spotlight-type ---------------------------------------------------
   One clear reading order inside the stub: badge, kicker, name, place, facts,
   action. Tracking and weight carry the hierarchy so the type does not have to
   compete with the artwork. */
/* amber badge */
.elementor-9375 .elementor-element-slabg,
.elementor-9375 .elementor-element-slbbg{
  border-radius:999px; box-shadow:0 6px 18px -6px rgba(244,169,0,.65);
}
.elementor-9375 .elementor-element-slabt p,
.elementor-9375 .elementor-element-slbbt p{
  margin:0; font-family:Manrope,system-ui,sans-serif; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
}
/* kicker */
.elementor-9375 .elementor-element-slae p,
.elementor-9375 .elementor-element-slbe p{
  margin:0; font-family:Inter,system-ui,sans-serif; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:#7FD8D6;
}
/* event name */
.elementor-9375 .elementor-element-slat .elementor-heading-title,
.elementor-9375 .elementor-element-slbt .elementor-heading-title{
  font-family:Manrope,system-ui,sans-serif; font-weight:800;
  line-height:1.04; letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
/* place */
.elementor-9375 .elementor-element-slas p,
.elementor-9375 .elementor-element-slbs p{ margin:0; font-weight:600; }
/* facts row */
.elementor-9375 .elementor-element-slam .elementor-icon-list-items,
.elementor-9375 .elementor-element-slbm .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.elementor-9375 .elementor-element-slam .elementor-icon-list-item,
.elementor-9375 .elementor-element-slbm .elementor-icon-list-item{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:7px 14px; font-size:14px;
}
.elementor-9375 .elementor-element-slam .elementor-icon-list-icon i,
.elementor-9375 .elementor-element-slbm .elementor-icon-list-icon i{ color:#20AEB5; }
/* action */
.elementor-9375 .elementor-element-slab .elementor-button,
.elementor-9375 .elementor-element-slbb .elementor-button{
  border-radius:12px; font-family:Manrope,system-ui,sans-serif; font-weight:800;
  letter-spacing:.01em; box-shadow:0 14px 30px -12px rgba(0,112,111,.85);
  transition:transform .18s ease, box-shadow .18s ease;
}
.elementor-9375 .elementor-element-slab .elementor-button:hover,
.elementor-9375 .elementor-element-slbb .elementor-button:hover{
  transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(0,112,111,.95);
}
/* carousel arrows sit on the artwork, not the stub */
.elementor-9375 .elementor-element-wshpcar .elementor-swiper-button{
  background:rgba(6,30,38,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff;
}
/* --- wse-spotlight-opacity ------------------------------------------------
   Elementor sets opacity:.5 on the overlay pseudo-element, which was halving
   the scrim and letting the artwork wash through behind the headline. The
   gradient above already carries its own alpha per stop, so the element itself
   must render at full strength. */
.elementor-9375 .elementor-element-slidea::before,
.elementor-9375 .elementor-element-slideb::before{ opacity:1 !important; }
/* --- wse-spotlight-height -------------------------------------------------
   Elementor reserves padding-bottom on .swiper for the pagination row, so the
   carousel box was 502px while the slide card was 484px - an 18px strip of page
   background under the artwork that read as the image not filling its
   container. The dots are absolutely positioned and only 8px tall, so the
   reserved strip is not needed: drop it and float the dots inside the card. */
.elementor-9375 .elementor-element-wshpcar .swiper{ padding-bottom:0 !important; }
.elementor-9375 .elementor-element-wshpcar .swiper-pagination{ bottom:14px !important; z-index:5; }
.elementor-9375 .elementor-element-wshpcar .swiper-pagination-bullet{
  width:8px; height:8px; opacity:1; background:rgba(255,255,255,.50);
  transition:width .2s ease, background .2s ease;
}
.elementor-9375 .elementor-element-wshpcar .swiper-pagination-bullet-active{
  width:24px; border-radius:999px; background:#F4A900;
}
/* --- wse-mobile ----------------------------------------------------------
   Mobile hardening. Two problems found auditing at 375px:
   1. Every form control renders at 15px. iOS Safari zooms the viewport when a
      field under 16px receives focus and does not zoom back out - painful on
      the 45-field event submission form.
   2. Primary controls are below the 44px minimum touch target: the menu
      toggle at 33px and the language switcher at 17x14 are the worst. */
@media (max-width:1024px){
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  select, textarea{
    font-size:16px !important;
  }

  /* menu toggle - the single most important control on a phone */
  .elementor-menu-toggle{
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
  }

  /* language switcher */
  .wse-lang__item{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 10px;
  }

  /* social icons */
  .elementor-social-icon{
    min-width:44px !important; min-height:44px !important;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* carousel controls */
  .elementor-swiper-button{ width:44px !important; height:44px !important; }

  /* buttons and chips */
  .elementor-button, .ct-button, .button, [type="submit"]{ min-height:44px; }
}
/* --- wse-mobile-nav ------------------------------------------------------
   Footer and mobile menu links render 26px tall, so adjacent items sit close
   enough to mis-tap. Give each link a full 44px touch row without changing
   the type or the visual rhythm. */
@media (max-width:1024px){
  .elementor-nav-menu a.elementor-item{
    min-height:44px; display:flex; align-items:center;
  }
}
/* --- wse-mobile-header ---------------------------------------------------
   Gaps, type sizes and the language switcher are handled in the header
   template itself (9404). Only two things cannot be expressed as an Elementor
   per-breakpoint setting, so they live here: a shorter CTA label and dropping
   the Sign In wording. Both are mobile-only; desktop is untouched.
   The label is language-aware because the French string is far longer, which
   is what broke the row in the first place. */
@media (max-width:767px){
  .elementor-element-wshbtn01 .elementor-button-text{ font-size:0; }
  .elementor-element-wshbtn01 .elementor-button-text::after{ content:"Create"; font-size:12px; }
  body.translatepress-fr_FR .elementor-element-wshbtn01 .elementor-button-text::after{ content:"Créer"; }

  /* Sign In keeps its accessible name but shows only the icon */
  .elementor-element-wshbtn02 .elementor-button-text{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .elementor-element-wshbtn02 .elementor-button-icon{ margin:0; }
}
/* --- wse-mobile-header-target --------------------------------------------
   Icon-only Sign In collapsed to 10px, far below a usable touch target. Give
   it the full 44px and take the width back from the switcher padding, which
   the generic 44px tap rule had inflated to 80px for five characters. */
@media (max-width:767px){
  .elementor-element-wshbtn02 .elementor-button{ min-width:44px; justify-content:center; }
  .wse-lang__item{ padding:0 4px; }
}
/* --- wse-mobile-header-shrink --------------------------------------------
   The action widgets were being squeezed narrower than the buttons inside
   them, so the button painted outside its own widget and sat on top of the
   language switcher. Let each widget size to its content and refuse to shrink,
   so the row lays out from the real button widths. */
@media (max-width:767px){
  .elementor-element-wshbtn01,
  .elementor-element-wshbtn02,
  .elementor-element-wshlang1{
    width:auto !important; flex:0 0 auto !important; min-width:0;
  }
  .elementor-element-wshbtn01 .elementor-button,
  .elementor-element-wshbtn02 .elementor-button{ white-space:nowrap; }
  .elementor-element-wshnav01{ flex:0 1 auto; min-width:44px; }
}
/* --- wse-mobile-header-toggle --------------------------------------------
   The nav widget reserved 106px on mobile for a 44px hamburger - 62px of dead
   space, which was the whole overflow. The dropdown it opens is positioned
   absolutely, so narrowing the widget to the toggle does not affect the menu
   itself. This is what finally makes the French row fit. */
@media (max-width:767px){
  .elementor-element-wshnav01{ flex:0 0 auto !important; width:44px !important; }
  .elementor-element-wshnav01 > .elementor-widget-container{ width:44px; }
  .elementor-element-wshnav01 .elementor-menu-toggle{ margin:0 auto; }
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown{ min-width:220px; }
}
/* --- wse-mobile-header-order ---------------------------------------------
   Mobile bar is logo | Create | FR|EN | burger, with the burger at the far
   right. Sign In leaves the bar and lives in the menu instead (added to Main
   Menu with the wse-mobile-only class, hidden on desktop below). */
@media (max-width:767px){
  .elementor-element-wshrgrp1{ flex-direction:row; align-items:center; }
  .elementor-element-wshact01{ order:1; }
  .elementor-element-wshnav01{ order:2; }
  .elementor-element-wshbtn02,
  .elementor-element-wshbtn03{ display:none !important; }
}

/* The Sign In entry belongs to the burger menu only - the desktop header
   already carries its own Sign In button. */
@media (min-width:768px){
  .elementor-nav-menu li.wse-mobile-only{ display:none !important; }
}
/* --- wse-mobile-header-label ---------------------------------------------
   Fuller label on the mobile CTA. French is the longer string, so it takes a
   smaller size to stay on one line. The action group is pushed to the right so
   the button and switcher sit beside the burger, leaving the slack between the
   logo and the group rather than scattered across the row. */
@media (max-width:767px){
  .elementor-element-wshbtn01 .elementor-button-text::after{ content:"Create Event"; font-size:12px; }
  body.translatepress-fr_FR .elementor-element-wshbtn01 .elementor-button-text::after{
    content:"Créer événement"; font-size:11px;
  }
  .elementor-element-wshbtn01 .elementor-button{ padding-left:10px; padding-right:10px; }

  /* hug the right so the group sits next to the burger */
  .elementor-element-wshrgrp1{ margin-left:auto; flex:0 0 auto; }
  .elementor-element-wshact01{ column-gap:8px; }
}
/* --- wse-mobile-header-tighten -------------------------------------------
   The row was full, so there was no slack to put between the logo and the
   action group. Recover it from the switcher - FR|EN needs nowhere near 72px -
   and set one consistent 8px rhythm between the button, switcher and burger.
   What is left collects to the left of the group, which is the gap wanted. */
@media (max-width:767px){
  .wse-lang{ font-size:11px; }
  .wse-lang__item{ padding:0 3px; min-width:0; }
  .wse-lang__sep{ margin:0 1px; }
  .elementor-element-wshrgrp1{ column-gap:8px; }
  .elementor-element-wshact01{ column-gap:8px; }
}
/* --- wse-mobile-header-slack ---------------------------------------------
   The row was exactly full, so nothing could collect between the logo and the
   group. Take the type down a step and tighten the button padding; the header
   is space-between, so whatever is freed lands where the gap is wanted. */
@media (max-width:767px){
  .elementor-element-wshbtn01 .elementor-button{ padding-left:9px; padding-right:9px; }
  .elementor-element-wshbtn01 .elementor-button-text::after{ font-size:11px; }
  body.translatepress-fr_FR .elementor-element-wshbtn01 .elementor-button-text::after{ font-size:10px; }
  .elementor-element-wshrgrp1{ column-gap:8px; }
  .elementor-element-wshnav01{ margin-left:0; }
}
/* --- wse-mobile-header-pack ----------------------------------------------
   The right group is stretched, so freed width kept collecting between the
   switcher and the burger instead of after the logo. Pack its children to the
   end: the button, switcher and burger sit together on the right and all the
   slack falls to the left of them, next to the logo. */
@media (max-width:767px){
  .elementor-element-wshrgrp1{ justify-content:flex-end; }
}
/* --- wse-mobile-header-pack2 ---------------------------------------------
   The actions container itself was 15px wider than its content, leaving dead
   space at its right end - that was the stubborn gap before the burger. Pack
   its children to the end as well so the slack moves to the left of the
   button, beside the logo, which is where the breathing room belongs. */
@media (max-width:767px){
  .elementor-element-wshact01{ justify-content:flex-end; }
}
/* --- wse-btn-center -------------------------------------------------------
   The CTA is an inline-block with 11px padding and a 44px min-height, so its
   11px content box sat high and left 22px below. Centre it properly. */
@media (max-width:767px){
  .elementor-element-wshbtn01 .elementor-button{
    display:flex; align-items:center; justify-content:center;
    padding-top:0; padding-bottom:0;
  }
  .elementor-element-wshbtn01 .elementor-button-content-wrapper{ align-items:center; }
  .elementor-element-wshbtn01 .elementor-button-text{ display:inline-flex; align-items:center; line-height:1; }
  .elementor-element-wshbtn01 .elementor-button-text::after{ line-height:1; }
}

/* --- wse-lang-pill --------------------------------------------------------
   Segmented pill switcher: a soft track with the active language filled in
   brand teal. Same on desktop and mobile, sized down on phones. */
.wse-lang{
  display:inline-flex; align-items:center; gap:2px;
  background:#EDF1F1; border-radius:999px; padding:3px;
  line-height:1;
}
.wse-lang__sep{ display:none !important; }
.wse-lang__item{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 15px; border-radius:999px;
  font-family:Manrope,system-ui,sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.02em; color:#5C6F76; opacity:1; text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
  min-height:0;
}
.wse-lang__item:hover{ color:#00706F; opacity:1; }
.wse-lang__item.is-active{ background:#00706F; color:#fff; font-weight:800; }
.wse-lang__item.is-active:hover{ color:#fff; }

@media (max-width:767px){
  .wse-lang{ padding:2px; font-size:11px; }
  .wse-lang__item{ padding:5px 9px; font-size:11px; min-width:0; }
}
/* --- wse-lang-pill-fix ----------------------------------------------------
   Two corrections. The inactive chip rendered teal because the kit global link
   colour (.elementor-kit-9364 a, 0-1-1) outranks .wse-lang__item (0-1-0), so
   the .elementor-kit-9364s below carry the kit scope to win. And the chips were only 25px
   tall; height costs nothing here since the width is the tight dimension, so
   give them a proper target that matches the 44px button beside them. */
.elementor-kit-9364 a.wse-lang__item{ color:#5C6F76; opacity:1; }
.elementor-kit-9364 a.wse-lang__item:hover{ color:#00706F; }
.elementor-kit-9364 a.wse-lang__item.is-active{ background:#00706F; color:#fff; }
.elementor-kit-9364 a.wse-lang__item.is-active:hover{ color:#fff; }
.wse-lang__item{ min-height:32px; }
@media (max-width:767px){
  .wse-lang__item{ min-height:36px; padding:5px 9px; }
  .wse-lang{ padding:3px; }
}
/* --- wse-mobile-menu-panel ------------------------------------------------
   The dropdown was position:static inside the 44px nav widget, so it flowed
   from x=330 and ran 160px off the right edge with its items clipped. Anchor
   it to the header instead and let it span the full width, with large rows
   that are comfortable to hit with a thumb. */
@media (max-width:767px){
  .elementor-element-wshhdr01{ position:relative; }
  .elementor-element-wshnav01{ position:static !important; }
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown{
    position:absolute !important; top:100% !important;
    left:0 !important; right:0 !important; width:100% !important;
    min-width:0 !important; max-width:none !important;
    background:#061E26 !important; border:0 !important; border-radius:0 !important;
    box-shadow:0 18px 40px -12px rgba(6,30,38,.45);
  }
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown a.elementor-item{
    font-family:Manrope,system-ui,sans-serif;
    font-size:20px !important; font-weight:700; letter-spacing:-.01em;
    color:#fff !important; padding:20px 24px !important; min-height:64px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown li:last-child a.elementor-item{ border-bottom:0; }
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
    background:rgba(255,255,255,.06) !important; color:#20AEB5 !important;
  }
}

/* --- wse-cat-grid ---------------------------------------------------------
   Category cards are 171px wide with a 24px gap in a 358px row, so two could
   never fit and every card dropped onto its own line. Tighten the gap and let
   each card take half the row. */
@media (max-width:767px){
  .elementor-element-wshcgrd{ gap:16px !important; }
  .elementor-element-wshcgrd > .e-con{ width:calc(50% - 8px) !important; flex:0 0 calc(50% - 8px) !important; }
}
/* --- wse-mobile-menu-anchor -----------------------------------------------
   Elementor containers are position:relative by default, so the dropdown was
   anchoring to the 257px right group rather than the header. Make that group
   static on mobile so the panel spans the full header width. */
@media (max-width:767px){
  .elementor-element-wshrgrp1{ position:static !important; }
  .elementor-element-wshact01{ position:static !important; }
}
/* --- wse-menu-anim-fix ----------------------------------------------------
   Elementor opens this panel by animating a custom property:
     closed  --menu-height: 0     open  --menu-height: 1000vmax
   and its own rule is max-height: var(--menu-height). Setting max-height here
   overrode that and pinned the panel at 0 height - it was on screen, full
   width, and completely invisible. Leave max-height to Elementor and only
   scroll once the panel is genuinely taller than the screen. */
@media (max-width:767px){
  .elementor-element-wshnav01 .elementor-nav-menu--dropdown{ overflow-y:auto; }
}
/* --- wse-menu-open-force --------------------------------------------------
   Elementor opens the panel by animating max-height from a --menu-height
   custom property together with transform:scaleY(0 -> 1). That pairing is what
   left the panel present but zero-height. Match Elementor own open .elementor-kit-9364 so
   the specificity is equal, and state the open geometry outright instead of
   relying on the animated values. The closed rule is untouched, so the panel
   still hides when the toggle is not active. */
@media (max-width:767px){
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
    max-height:none !important;
    height:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow-y:auto !important;
  }
}
/* --- wse-menu-no-anim -----------------------------------------------------
   The panel opens by transitioning max-height and transform:scaleY. A stalled
   transition leaves it present but flat, which is exactly the reported
   symptom. Drop the animation on mobile so the panel simply is open or closed
   with no in-between state to get stuck in. */
@media (max-width:767px){
  .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container,
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
    transition:none !important; animation:none !important;
  }
  .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container{
    max-height:0 !important; transform:none !important;
    visibility:hidden !important; opacity:0 !important;
  }
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
    max-height:none !important; height:auto !important; transform:none !important;
    visibility:visible !important; opacity:1 !important;
  }
}
/* --- wse-menu-stack -------------------------------------------------------
   Guarantee the panel paints above the hero and that its own background is on
   the panel rather than relying on the list inside it. */
@media (max-width:767px){
  .elementor-element-wshhdr01{ z-index:100; }
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
    z-index:999 !important; background-color:#061E26 !important; isolation:isolate;
  }
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container ul.elementor-nav-menu{ background:transparent; margin:0; padding:0; }
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li{ background:transparent; }
}
/* wse-account -- align the WooCommerce My Account screens with the WASEHO palette.
   Blocksy declares these account-nav colours as custom properties that fall back to its
   own palette (--theme-palette-color-1 is #2872fa, the blue). Setting the properties is
   the theme's supported hook, so no !important and no specificity fight. */
.woocommerce-account .ct-acount-nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
    --account-nav-background-initial-color: #FFFFFF;
    --account-nav-background-active-color: #008C8C;
    --account-nav-text-active-color: #FFFFFF;
    --account-nav-text-initial-color: #101820;
    --account-nav-divider-color: #E5EAEA;
}

/* Nav labels use the site's UI/Button style: Inter 600 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
}

/* Headings use Manrope, as everywhere else on the site */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend,
.woocommerce-account .page-title,
.woocommerce-account .entry-title {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    color: #101820;
}

/* Body copy */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .ct-account-user-box {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #101820;
}

/* Links inside the account area, including the logged-out login screen.
   Blocksy points these at palette-1/2 (blue) via --theme-link-*-color. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .ct-account-user-box {
    --theme-link-initial-color: #008C8C;
    --theme-link-hover-color: #061E26;
}

/* Form focus rings pick up the blue too */
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce-form-login input:focus,
.woocommerce-account .woocommerce-form-register input:focus {
    --theme-form-field-border-focus-color: #008C8C;
    border-color: #008C8C;
}
/* wse-orgform -- WP Event Manager's submit-organizer form on /organizers/.
   Selectors mirror the plugin's own chains and add the scope class, so these win on
   specificity without !important. Presentation only: the form and its handling stay
   entirely with the plugin. */
.wse-orgform .wpem-form-wrapper .wpem-form-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #101820;
    margin-bottom: 18px;
}
.wse-orgform .wpem-form-wrapper .wpem-form-group > label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #101820;
    margin-bottom: 6px;
    display: block;
}
.wse-orgform .wpem-form-wrapper .wpem-form-group .require-field { color: #D92D20; }
.wse-orgform .wpem-form-wrapper .wpem-form-group small.description {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: #52606D;
}.wse-orgform .wpem-form-wrapper .wpem-form-group .field input.input-text,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field select,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field textarea {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #101820;
    background-color: #FFFFFF;
    border: 1px solid #E5EAEA;
    border-radius: 10px;
    padding: 12px 14px;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
}
.wse-orgform .wpem-form-wrapper .wpem-form-group .field input.input-text:focus,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field select:focus,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field textarea:focus {
    border-color: #008C8C;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 140, 140, 0.15);
}
.wse-orgform .wpem-form-wrapper input[type="submit"],
.wse-orgform .wpem-form-wrapper button[type="submit"] {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
    background: #008C8C;
    border: 0;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
}
.wse-orgform .wpem-form-wrapper input[type="submit"]:hover,
.wse-orgform .wpem-form-wrapper button[type="submit"]:hover {
    background: #061E26;
}
/* Logged-out visitors get the plugin's own alert - make it readable, not alarming */
.wse-orgform .wpem-alert.wpem-alert-danger {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #101820;
    background-color: #FFFFFF;
    border: 1px solid #E5EAEA;
    border-radius: 10px;
    padding: 16px 18px;
}
/* wse-woo-error -- WooCommerce error notice sits on a red background, but the field
   names inside are <a> links that the Kit paints teal, which is unreadable there.
   Blocksy colours notice links through --theme-link-initial-color; the Kit styles the
   bare links directly, which beats a variable-driven rule, so both layers are set. */
.woocommerce-error {
    --theme-link-initial-color: #FFFFFF;
    --theme-link-hover-color: #FFFFFF;
    --theme-text-color: #FFFFFF;
    color: #FFFFFF;
}
.woocommerce-error li,
.woocommerce-error p,
.woocommerce-error strong,
.woocommerce-error b,
.woocommerce-error a,
.woocommerce-error a:link,
.woocommerce-error a:visited,
.woocommerce-error a:hover,
.woocommerce-error a:focus,
.woocommerce-error li a strong,
.woocommerce-error li strong a {
    color: #FFFFFF;
}
/* Colour alone no longer marks these as links, so keep an affordance on hover. */
.woocommerce-error a:hover,
.woocommerce-error a:focus {
    text-decoration: underline;
}
/* wse-orgform-metrics -- WPEM ships height:42px AND line-height:42px on these controls.
   The earlier block replaced their padding but left both in place, so a 42px line box had
   to fit inside a 42px element that now also carried vertical padding: the value was
   clipped out of view. Height and line-height must be released together with the padding. */
.wse-orgform .wpem-form-wrapper .wpem-form-group .field input.input-text,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field select,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field textarea {
    box-sizing: border-box;
    height: auto;
    line-height: 1.5;
}
.wse-orgform .wpem-form-wrapper .wpem-form-group .field input.input-text,
.wse-orgform .wpem-form-wrapper .wpem-form-group .field select {
    min-height: 48px;
}
.wse-orgform .wpem-form-wrapper .wpem-form-group .field textarea {
    min-height: 120px;
}
/* wse-dashboard -- WP Event Manager paints its dashboard accents from its own
   --wpem-primary-color, which ships as #0096ff. Setting that variable on the dashboard
   wrapper recolours the action icons, links and accents in one place, using the plugin's
   own hook rather than overriding each rule. Scoped to the dashboard so WPEM output
   elsewhere on the site is untouched. */
.wpem-main-vmenu-dashboard-wrapper {
    --wpem-primary-color: #008C8C;
    --wpem-dark-color: #101820;
    --wpem-gray-color: #52606D;
    --wpem-gray-border-color: #E5EAEA;
    --wpem-gray-bg-color: #F7F9F9;
}
/* Event thumbnail added via wpem_event_dashboard_event_info_start */
.wpem-main-vmenu-dashboard-wrapper .wse-dash-thumb {
    margin: 0 0 14px 0;
}
.wpem-main-vmenu-dashboard-wrapper .wse-dash-thumb img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 124px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #E5EAEA;
}
/* wse-dashboard-active -- WPEM colours the active menu label with
   color: var(--wpem-primary-color) and paints no background of its own. Retheming that
   variable to teal therefore put teal text on the teal active pill and the label vanished.
   Background and text are set together here so the pair can never drift apart again. */
.wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-nav .wpem-main-vmenu-dashboard-ul .wpem-main-vmenu-dashboard-li a.wpem-main-vmenu-dashboard-link.wpem-main-vmenu-dashboard-link-active,
.wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-nav .wpem-main-vmenu-dashboard-ul .wpem-main-vmenu-dashboard-li a.wpem-main-vmenu-dashboard-link.wpem-main-vmenu-dashboard-link-active:hover {
    background-color: #008C8C;
    color: #FFFFFF;
}
.wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-nav .wpem-main-vmenu-dashboard-ul .wpem-main-vmenu-dashboard-li a.wpem-main-vmenu-dashboard-link.wpem-main-vmenu-dashboard-link-active i {
    color: #FFFFFF;
}
/* Submenu active item keeps the teal marker but stays readable on white */
.wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-nav .wpem-main-vmenu-dashboard-ul .wpem-main-vmenu-dashboard-li .wpem-main-vmenu-dashboard-submenu-ul .wpem-main-vmenu-dashboard-submenu-li .wpem-main-vmenu-dashboard-link.wpem-main-vmenu-dashboard-link-active {
    background-color: #FFFFFF;
    color: #008C8C;
    border-left-color: #008C8C;
}/* End custom CSS */