/* =========================================================
   Fonts
   - "Syne"          : Google Fonts, weight 500 (loaded in index.html)
   - "Neue Montreal" : local @font-face family (./fonts/Neue Montreal)
   ========================================================= */

/* ---- Neue Montreal : Light (300) ---- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-LightItalic.otf')
    format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ---- Neue Montreal : Regular (400) ---- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-Regular.otf')
    format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-Italic.otf')
    format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Neue Montreal : Medium (500) ---- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-Medium.otf')
    format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-MediumItalic.otf')
    format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---- Neue Montreal : Bold (700) ---- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/Neue%20Montreal/NeueMontreal-BoldItalic.otf')
    format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body:
    'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  background: #111; /* fills the sides once the page stops growing at 1920px */
}

body.popup-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

body {
  /* The layout stops growing at 1920px and sits centred in wider viewports. */
  max-width: 1920px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: #111;
  background: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  line-height: inherit;
}

a {
  text-decoration: none;
  color: inherit;
  line-height: inherit;
}

p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
}

/* .ui-event-info-bars-wrapper {
    display: none;
} */

.ui-mobile-header {
  display: none;
}

/** =========================================================
   UI Banner Video Wrapper
   ========================================================= */

/* Home layout: the banner lives in the template, so in the DOM it comes
   after the shared header nav. Reorder them (banner on top, nav below) so the
   sticky header shows at the bottom of the first screen — same as the demo.
   Scoped with :has() so it only applies on pages that render the banner. */
main:has(> .ui-banner-video-wrapper) {
  display: flex;
  flex-direction: column;
}

main:has(> .ui-banner-video-wrapper) > .ui-banner-video-wrapper {
  order: 1;
}

main:has(> .ui-banner-video-wrapper) > .ui-header {
  order: 2;
}

main:has(> .ui-banner-video-wrapper) > :not(.ui-banner-video-wrapper):not(.ui-header) {
  order: 3;
}

.ui-banner-video-wrapper {
  position: relative;
  height: calc(100vh - var(--header-h, 64px)); /* fills the viewport under the header */
  max-height: 810px;
  width: 100%;
}

.ui-banner-video-wrapper .ui-banner-main-video {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.ui-banner-video-wrapper .ui-banner-main-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ui-banner-video-wrapper .ui-logo {
  position: absolute;
  right: 20px;
  top: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.ui-banner-video-wrapper .ui-logo img {
  width: 300px;
  height: auto;
  aspect-ratio: 300/60;
  object-fit: contain;
}

.ui-banner-video-wrapper .ui-banner-small-video {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 278px;
  height: auto;
  aspect-ratio: 278/156;
  outline: 4px solid #c3ff74;
}

.ui-banner-video-wrapper .ui-banner-small-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ui-mobile-menu {
  display: none;
}

/* header  */
.ui-header {
  position: sticky;
  top: 0;
  z-index: 99;
}

.ui-header .ui-header-nav {
  display: flex;
  justify-content: space-between;
  background: #111;
  border-top: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
}

.ui-header .ui-header-nav ul {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-header .ui-header-nav ul li {
  flex: 1;
  display: flex;
}

.ui-header .ui-header-nav ul li a {
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 20px;
  transition: 0.3s all ease;
  padding-inline: 20px;
  flex: 1;
}

.ui-header .ui-header-nav ul li a:hover {
  background: #fff;
  color: #000;
}

.ui-header .ui-header-nav .ui-nav-logo {
  display: flex;
  align-items: center;
  padding-inline: 43px;
  transition: 0.3s all ease;
}

.ui-header .ui-header-nav .ui-nav-logo:hover {
  background: #fff;
}

/* Give the wordmark SVG a CSS width so it scales with the header on big
   screens (its intrinsic 65×16 attributes otherwise keep it fixed). */
.ui-header .ui-header-nav .ui-nav-logo svg {
  width: 65px;
  height: auto;
  display: block;
}

.ui-header .ui-header-nav .ui-nav-logo:hover svg path {
  fill: #000;
}

/* Uploaded logo (img): white hover background (like the wordmark), and the
   logo turns dark so it stays visible on white. */
/* 24px at the 1440 design width, scales up with the viewport, capped at 32px
   so it never gets oversized on very large screens (the rem cap survives the
   px→vw big-screen build; a px cap would be scaled too). */
.ui-header .ui-header-nav .ui-nav-logo img {
  height: clamp(24px, 1.6667vw, 2rem);
  width: auto;
  display: block;
}

.ui-header .ui-header-nav .ui-nav-logo--custom:hover img {
  filter: brightness(0);
}

.ui-header .ui-header-nav .ui-header-cta {
  background: #c3ff74;
  display: flex;
  align-items: center;
  padding-inline: 50px;
  color: #000;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  gap: 10px;
  transition: 0.3s all ease;
}

.ui-header .ui-header-nav .ui-header-cta:hover {
  background: #0082fe;
  color: #fff;
}

.ui-header .ui-header-nav .ui-header-cta:hover svg path {
  fill: #fff;
}

/* desktop language switcher (between CONTACT and Billeterie) */
.ui-header .ui-header-nav .ui-header-langs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 40px;
}

.ui-header .ui-header-nav .ui-header-langs a {
  color: #9e9e9e;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.ui-header .ui-header-nav .ui-header-langs a.active {
  color: #c3ff74;
}

.ui-header .ui-header-nav .ui-header-langs .ui-header-langs-sep {
  width: 1px;
  height: 16px;
  background: #9e9e9e;
}

/* header submenus  */
.ui-nav-submenu-wrapper {
  background: #c3ff74;
  width: 990px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.ui-nav-submenu-wrapper.is-hovered {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 10px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-head .ui-nav-submenu-head-item p {
  color: #848484;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-head .ui-nav-submenu-head-item {
  flex: 1;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-body {
  display: flex;
  justify-content: space-between;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-body .ui-nav-submenu-col-item {
  flex: 1;
  border-right: 1px solid #000;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-body .ui-nav-submenu-col-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #000;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-body .ui-nav-submenu-col-item ul li a {
  color: #000;
  padding: 17px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

/* the column carries the vertical divider, so it spans the full body height
   even when columns hold different numbers of items. Direct children only —
   the nested edition flyouts keep their own right border. */
.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  > ul
  > li
  > a {
  border-right: none;
}

.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  ul
  li
  a::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M12.5003 4.26753V15H15L15 2.23573e-06L0 0L1.77755e-06 2.49971L10.7325 2.49971L2.17093e-06 13.2322L1.76783 15L12.5003 4.26753Z' fill='black'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}

.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  ul
  li:has(.ui-nav-submenu-col-submenu):hover
  a::after {
  transform: rotate(45deg);
}

/* deepest-level submenu (nested col-submenu) — 215px wide, no arrow icon */
.ui-nav-submenu-col-submenu .ui-nav-submenu-col-submenu {
  max-width: 215px;
}

.ui-nav-submenu-body
  .ui-nav-submenu-col-item
  .ui-nav-submenu-col-submenu
  .ui-nav-submenu-col-submenu
  ul
  li
  a::after {
  display: none;
}

/* nested-list panels are narrow (single column); columns panels keep 990px */
.ui-nav-submenu-wrapper--list {
  width: auto;
  min-width: 300px;
  max-width: 335px;
}

.ui-nav-submenu-wrapper .ui-nav-submenu-body .ui-nav-submenu-col-item ul li {
  position: relative;
}

.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  ul
  li
  .ui-nav-submenu-col-submenu {
  position: absolute;
  top: 0;
  min-width: 215px;
  left: 100%;
  right: auto;
  background: #c3ff74;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    visibility 0s 0.15s;
}

.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  ul
  li:hover
  > .ui-nav-submenu-col-submenu,
.ui-nav-submenu-wrapper
  .ui-nav-submenu-body
  .ui-nav-submenu-col-item
  ul
  li
  .ui-nav-submenu-col-submenu:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.15s ease,
    visibility 0s;
}

/* header submenus  */

/* bars  */
.ui-event-info-bars {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  right: 0;
}

.ui-event-info-bars .ui-event-info-bar-1 {
  background: #efff8b;
  display: flex;
  justify-content: flex-end;
  max-width: 473px;
  padding-block: 15px;
  padding-inline: 30px;
  position: relative;
  overflow: hidden;
}

.ui-event-info-bars .ui-event-info-bar-1 .ui-ei-content {
  max-width: 131px;
}

.ui-event-info-bars .ui-event-info-bar-1 .ui-ei-content p {
  color: #000;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 25.2px */
  text-transform: uppercase;
  margin: 0;
}

.ui-event-info-bars .ui-event-info-bar-1 .ui-ei-vectors {
  position: absolute;
  left: 15px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
}

.ui-event-info-bars .ui-event-info-bar-1 .ui-ei-vectors svg:first-child {
  width: 77px;
  height: 80px;
}

.ui-event-info-bars .ui-event-info-bar-1 .ui-ei-vectors svg:last-child {
  width: 77px;
  height: 80px;
  position: relative;
  bottom: -10px;
}

.ui-event-info-bars .ui-event-info-bar-2 {
  background: #ffb6ee;
  display: flex;
  justify-content: flex-end;
  max-width: 710px;
  padding-block: 15px;
  padding-inline: 30px;
  position: relative;
  overflow: hidden;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-vectors {
  position: absolute;
  top: 0;
  left: 20px;
  display: flex;
  align-items: flex-start;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-vectors svg {
  width: 77px;
  height: 80px;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-vectors svg:first-child {
  position: relative;
  top: -10px;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-content p {
  color: #000;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-content h3 {
  color: #000;
  text-align: right;
  font-family: Syne;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}

.ui-event-info-bars .ui-event-info-bar-2 .ui-ei-content p:first-child {
  margin-bottom: 30px;
}

.ui-event-info-bar-3 {
  background: #b597e9;
  padding: 30px;
  max-width: 355px;
}

.ui-event-info-bar-3 p {
  color: #000;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

/** =========================================================
   End UI Banner Video Wrapper
   ========================================================= */

.ui-event-info-bar-1,
.ui-event-info-bar-2,
.ui-event-info-bar-3 {
  clip-path: inset(0 100% 0 0);
}

.ui-event-info-bar-1 .ui-ei-vectors,
.ui-event-info-bar-1 .ui-ei-content,
.ui-event-info-bar-2 .ui-ei-vectors,
.ui-event-info-bar-2 .ui-ei-content,
.ui-event-info-bar-3 .ui-ei-content {
  opacity: 0;
}

/* ---- Bar 1 & 3 (simultaneous) ---- */
.ui-event-info-bars.is-animated .ui-event-info-bar-1,
.ui-event-info-bars.is-animated .ui-event-info-bar-3 {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.65s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.ui-event-info-bars.is-animated .ui-event-info-bar-1 .ui-ei-vectors,
.ui-event-info-bars.is-animated .ui-event-info-bar-1 .ui-ei-content,
.ui-event-info-bars.is-animated .ui-event-info-bar-3 .ui-ei-content {
  opacity: 1;
  transition: opacity 0.4s ease 0.5s;
}

/* ---- Bar 2 (200ms later) ---- */
.ui-event-info-bars.is-animated .ui-event-info-bar-2 {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.65s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.ui-event-info-bars.is-animated .ui-event-info-bar-2 .ui-ei-vectors,
.ui-event-info-bars.is-animated .ui-event-info-bar-2 .ui-ei-content {
  opacity: 1;
  transition: opacity 0.4s ease 0.7s;
}

/** =========================================================
    End UI Event Info Bars
    ========================================================= */

/** =========================================================
    End UI engagement
    ========================================================= */
.ui-engagement-wrapper {
  padding-inline: 20px;
  padding-block: 60px;
  color: #fff;
}

.ui-engagement-wrapper .ui-engagement-row {
  display: flex;
  gap: 94px;
}

.ui-engagement-wrapper .ui-engagement-row .ui-engagement-title label {
  color: #b0b0b0;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ui-engagement-wrapper .ui-engagement-row .ui-engagement-title h3 {
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ui-engagement-wrapper .ui-engagement-row .ui-engagement-title {
  min-width: 300px;
}

.ui-engagement-wrapper .ui-engagement-row .ui-engagement-content {
  flex: 1;
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-text {
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-top: 24px;
  margin-bottom: 58px;
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-states {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-states
  .ui-engagement-state {
  width: calc(25% - 26.5px);
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-states
  .ui-engagement-state
  h4 {
  color: #c3ff74;
  font-family: 'Neue Montreal';
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-states.is-animated
  .ui-engagement-state
  h4 {
  opacity: 1;
  transform: translateY(0);
}

.ui-engagement-wrapper
  .ui-engagement-row
  .ui-engagement-content
  .ui-engagement-states
  .ui-engagement-state
  p {
  color: #b0b0b0;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 21.6px */
}

footer {
  background-color: #014b4c;
  color: #d5fbd4;
}
.footer-main {
  display: flex;
  gap: 19px;
  justify-content: space-between;
}
.footer-left {
  padding: 10px 0px 30px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.footer-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 9px;
  font-size: 60px;
  line-height: 72px;
  font-weight: 500;
}
.footer-header .line {
  height: 8px;
  flex: 1;
  width: 100%;
  background: #d5fbd4;
}
.footer-right {
  width: 473px;
  flex-shrink: 0;
}
.footer-right a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 20px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  text-transform: uppercase;
  color: #1d2122;
  transition: background-color 0.3s ease;
}
.footer-right a svg path {
  transition: fill 0.3s ease;
}
.footer-right a:nth-child(odd) {
  background-color: #d6fcd3;
}
.footer-right a:nth-child(even) {
  background-color: #54f993;
}
.footer-right a:hover {
  background-color: #fe5d26;
}
.footer-right a:hover svg path {
  fill: #fff;
}

.footer-left .futur-section {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-top: 63px;
}
.footer-left div {
  flex-shrink: 0;
}
.footer-left .futur-section h3 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
}
.footer-left .futur-section .be-part {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.footer-left .futur-section .be-part img {
  width: 32px;
  height: 32px;
}
.footer-left .futur-section .be-part p {
  padding: 4px 10px;
  color: #575757;
  font-size: 18px;
  line-height: 22px;
  background-color: #eaff66;
  margin-top: 8px;
}
.footer-left .futur-section p {
  font-size: 18px;
  font-weight: 500;
}
.footer-left .footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.footer-left .footer-links .list-desktop {
  display: flex;
}
.footer-left .footer-links .list-mobile {
  display: none;
}
.footer-left .footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-left .footer-links ul li {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.footer-left .footer-links ul li:hover {
  color: #eaff66;
}
.footer-copyright {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo | privacy link on the page centre | credit */
  align-items: center;
  padding: 20px 20px 6px; /* tight above the copyright row */
  background-color: #111;
}
.footer-copyright > img {
  justify-self: start;
}
.footer-copyright > p:not(:last-child) {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
.footer-copyright > p:last-child {
  grid-column: 3;
  justify-self: end;
}
.footer-copyright-mobile {
  display: none;
}
.footer-copyright img {
  width: 62.5px;
  height: 50px;
}
.footer-copyright p {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-legal {
  padding: 0 20px 20px;
  background-color: #111;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  text-transform: uppercase;
}
/** =========================================================
    End UI engagement
    ========================================================= */

/* end bars  */

/** =========================================================
    UI Recap
    ========================================================= */
.ui-recap {
  position: relative;
  width: 100%;
  min-height: 990px; /* fixed minimum instead of filling the viewport */
  overflow: hidden;
}

.ui-recap .ui-recap-video {
  position: absolute; /* fills the min-height box (a % height would not) */
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-recap .ui-recap-text {
  position: absolute;
  top: 30px;
  left: 20px;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
/** =========================================================
    End UI Recap
    ========================================================= */

/** =========================================================
    UI Programmes
    ========================================================= */
.ui-programmes .ui-programmes-inner {
  display: flex;
  flex-direction: column;
}

.ui-programmes .ui-programmes-cols {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ui-programmes .ui-programmes-col {
  position: relative;
  flex: 1;
  height: 100vh; /* fills the viewport, capped */
  max-height: 720px;
  overflow: hidden;
  background: var(--col-bg);
  padding: 54px 20px 40px;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ui-programmes .ui-programmes-col:hover .ui-programmes-col-img {
  opacity: 1;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: opacity 0.4s ease;
}

.ui-programmes .ui-programmes-col:hover .ui-programmes-col-content {
  opacity: 0;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-title {
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-badge {
  align-self: flex-start;
  padding: 10px 15px;
  border-radius: 60px;
  border: 1px solid #fff;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.ui-programmes .ui-programmes-col .ui-programmes-col-text {
  margin-top: 20px;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* global reusable full-width link bar */
.ui-link-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 33px;
  background: #0082fe;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.4s ease;
}

.ui-link-bar:hover {
  background: #111;
}
/** =========================================================
    End UI Programmes
    ========================================================= */

/** =========================================================
    UI Theme
    ========================================================= */
.ui-theme {
  display: flex;
  gap: 44px;
  padding: 40px 30px;
  padding-bottom: 0;
  background: #c3ff74;
}

.ui-theme .ui-theme-left {
  flex: 1;
}

.ui-theme .ui-theme-label {
  margin-bottom: 15px;
}

.ui-theme .ui-theme-label span {
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ui-theme .ui-theme-title {
  margin-bottom: 40px;
}

.ui-theme .ui-theme-title h2 {
  color: #000;
  font-family: 'Syne';
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1.2px;
  text-transform: uppercase;
}

.ui-theme .ui-theme-desc {
  margin-bottom: 50px;
}

.ui-theme .ui-theme-desc p {
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.ui-theme .ui-theme-list li {
  border-top: 1px solid #575757;
  padding-block: 12px;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.ui-theme .ui-theme-right {
  --arrow-thickness: 175px;
  flex: 1;
  align-self: flex-start;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: #111;
}

/* black arrow lives in the list wrapper — desktop hides it (tablet shows it) */
.ui-theme .ui-theme-black-arrow {
  display: none;
}

/* CSS-built arrow — shared by .ui-theme-right and .ui-theme-black-arrow.
   Top + right bars are fluid, the diagonal spans the (square) block. */
.ui-theme .ui-theme-arrow-top,
.ui-theme .ui-theme-arrow-right,
.ui-theme .ui-theme-arrow-diagonal {
  position: absolute;
  background: #c3ff74;
}

.ui-theme .ui-theme-arrow-top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--arrow-thickness);
}

.ui-theme .ui-theme-arrow-right {
  top: 0;
  right: 0;
  width: var(--arrow-thickness);
  height: 100%;
}

.ui-theme .ui-theme-arrow-diagonal {
  top: 50%;
  left: 50%;
  /* full diagonal of the square (side × √2 = 141.42%) minus the bar
     thickness, so the shaft stops short of the corners and leaves the
     black triangles — fully derived from the block size, no magic number */
  width: calc(100% * 1.41421356 - var(--arrow-thickness));
  height: var(--arrow-thickness);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

.ui-theme .ui-link-bar {
  display: none;
}

.ui-theme .ui-theme-right .ui-theme-arrow-circle {
  background: #0082fe;
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  top: 50%;
  gap: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  opacity: 0;
  transition: all 0.3s ease;
}

.ui-theme-right:hover .ui-theme-arrow-circle {
  opacity: 1;
}
/** =========================================================
    End UI Theme
    ========================================================= */

/** =========================================================
    UI Speakers
    ========================================================= */
.ui-speakers {
  padding: 131px 0px 60px;
  background: #111;
}

/* head */
.ui-speakers .ui-speakers-label {
  margin-bottom: 15px;
  text-align: center;
}

.ui-speakers .ui-speakers-label span {
  color: #b0b0b0;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.ui-speakers .ui-speakers-title {
  margin-bottom: 94px;
  text-align: center;
}

.ui-speakers .ui-speakers-title h2 {
  color: #fff;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

/* checkerboard grid — 4 cols × 3 rows, cards placed on alternating cells.
   The track wrapper is transparent here (display: contents) so the 5 cards
   act as direct grid items alongside the CTA. */
.ui-speakers .ui-speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ui-speakers .ui-speakers-track {
  display: contents;
}

.ui-speakers .ui-speakers-track > .ui-speakers-card:nth-child(1) {
  grid-area: 1 / 1;
}
.ui-speakers .ui-speakers-track > .ui-speakers-card:nth-child(2) {
  grid-area: 1 / 3;
}
.ui-speakers .ui-speakers-track > .ui-speakers-card:nth-child(3) {
  grid-area: 2 / 2;
}
.ui-speakers .ui-speakers-track > .ui-speakers-card:nth-child(4) {
  grid-area: 2 / 4;
}
.ui-speakers .ui-speakers-track > .ui-speakers-card:nth-child(5) {
  grid-area: 3 / 1;
}
.ui-speakers .ui-speakers-cta {
  grid-area: 3 / 3;
}

/* speaker card */
.ui-speakers .ui-speakers-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ui-speakers .ui-speakers-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.ui-speakers .ui-speakers-card:hover img {
  filter: grayscale(0);
}

/* dark gradient overlay for text legibility — fades out on hover */
.ui-speakers .ui-speakers-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
  transition: opacity 0.4s ease;
}

.ui-speakers .ui-speakers-card:hover::after {
  opacity: 0;
}

.ui-speakers .ui-speakers-card .ui-speakers-card-info {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px;
  transition: opacity 0.3s ease;
}

.ui-speakers .ui-speakers-card:hover .ui-speakers-card-info {
  opacity: 0;
}

.ui-speakers .ui-speakers-card .ui-speakers-card-info h3 {
  margin-bottom: 8px;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 34px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

.ui-speakers .ui-speakers-card .ui-speakers-card-info p {
  color: #ededed;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

/* blue CTA box */
.ui-speakers .ui-speakers-cta {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background: #0082fe;
  transition: background 0.4s ease;
}

.ui-speakers .ui-speakers-cta:hover {
  background: #48b071;
}

.ui-speakers .ui-speakers-cta p {
  color: #fff;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-speakers .ui-speakers-cta .ui-speakers-cta-btn {
  padding: 10px 20px;
  border: 1px dashed #fff;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-speakers .ui-speakers-cta .ui-speakers-cta-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  background: #eaff66;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/** =========================================================
    End UI Speakers
    ========================================================= */

/** =========================================================
    UI Companies
    ========================================================= */
.ui-companies {
  padding-inline: 20px;
  padding-block: 60px;
  background: #111;
}

.ui-companies .ui-companies-inner {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* left column — sticky head that flows with scroll until section bottom */
.ui-companies .ui-companies-left {
  flex: 1;
}

.ui-companies .ui-companies-left .ui-companies-head {
  position: sticky;
  top: var(--header-h, 64px);
}

.ui-companies .ui-companies-label {
  margin-bottom: 10px;
}

.ui-companies .ui-companies-label span {
  color: #b0b0b0;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ui-companies .ui-companies-title {
  margin-bottom: 10px;
}

.ui-companies .ui-companies-title h2 {
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ui-companies .ui-companies-arrow svg {
  display: block;
  width: 31px;
  height: 32px;
}

/* grid — 3 equal columns */
.ui-companies .ui-companies-grid {
  flex: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* company card */
.ui-companies .ui-companies-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--card-bg);
}

.ui-companies .ui-companies-card img {
  max-width: 60%;
  height: auto;
  object-fit: contain;
}

/* "visiter siteweb" pill — revealed on hover */
.ui-companies .ui-companies-card .ui-companies-visit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #eaff66;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ui-companies .ui-companies-card:hover .ui-companies-visit {
  opacity: 1;
}

.ui-companies .ui-companies-card .ui-companies-visit svg {
  width: 8px;
  height: 8px;
  aspect-ratio: 1 / 1;
}

/* CTA card */
.ui-companies .ui-companies-cta {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #d1d1d1;
  transition: background 0.4s ease;
}

.ui-companies .ui-companies-cta:hover {
  background: #0082fe;
}

.ui-companies .ui-companies-cta:hover p,
.ui-companies .ui-companies-cta:hover .ui-companies-cta-btn {
  color: #fff;
}

.ui-companies .ui-companies-cta:hover .ui-companies-cta-btn {
  border-color: #fff;
}

.ui-companies .ui-companies-cta p {
  margin-bottom: 10px;
  color: #111;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-companies .ui-companies-cta .ui-companies-cta-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px dashed #111;
  color: #111;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-companies .ui-companies-cta .ui-companies-cta-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  background: #eaff66;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/** =========================================================
    End UI Companies
    ========================================================= */

/** =========================================================
    UI Activities
    ========================================================= */
.ui-activities {
  padding-top: 183px;
  padding-inline: 20px;
  padding-bottom: 60px;
  background: #111;
}

/* head */
.ui-activities .ui-activities-head {
  max-width: 750px;
  margin: 0 auto;
}

.ui-activities .ui-activities-label {
  margin-bottom: 25px;
  text-align: center;
}

.ui-activities .ui-activities-label span {
  color: #b0b0b0;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.ui-activities .ui-activities-title {
  margin-bottom: 100px;
  text-align: center;
}

.ui-activities .ui-activities-title h2 {
  color: #fff;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

/* grid — 2 equal columns */
.ui-activities .ui-activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* card — image + explore on the left half, colored panel + title on the right */
.ui-activities .ui-activities-card {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--card-bg);
  min-height: 275px;
}

.ui-activities .ui-activities-card-media {
  flex: 1;
}

.ui-activities .ui-activities-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 413 / 275;
  object-fit: cover;
}

/* body — title on top, explore bar pinned to the bottom */
.ui-activities .ui-activities-card-body {
  flex: 1;
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: flex-start;
}

.ui-activities .ui-activities-card-body h3 {
  padding: 10px 20px 0;
  color: #fff;
  font-family: 'Neue Montreal';
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.ui-activities .ui-activities-explore {
  margin-top: auto;
  display: flex;
  width: 100%;
  padding-inline: 20px;
  max-width: 100%;
  height: 90px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #c3ff74;
  color: #000;
  text-align: right;
  font-family: 'Neue Montreal';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  transition: 0.3s ease all;
}

/* stretch the link's hit area over the whole card so it's fully clickable */
.ui-activities .ui-activities-explore::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* hovering anywhere on the card triggers the link animation */
.ui-activities .ui-activities-card:hover .ui-activities-explore {
  background: #0082fe;
  color: #fff;
}

/* the name label is only used on tablet (bar shows the activity title there) */
.ui-activities .ui-activities-explore-name {
  display: none;
}

.ui-activities .ui-activities-explore svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ui-activities .ui-activities-card:hover .ui-activities-explore svg path {
  fill: #fff;
}

/** =========================================================
    End UI Activities
    ========================================================= */

/** =========================================================
    UI Partners  (pinned + horizontal scroll on desktop)
    ========================================================= */
.ui-partners {
  padding-top: 186px;
  padding-left: 20px;
  padding-right: 0;
  background: #111;
}

.ui-partners .ui-partners-inner {
  position: sticky;
  top: var(--header-h, 64px);
  height: 100vh; /* fills the viewport, capped */
  max-height: 685px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ui-partners.is-freeze-mode .ui-partners-inner,
.ui-speakers.is-freeze-mode .ui-speakers-inner {
  position: static;
}

/* head */
.ui-partners .ui-partners-head {
  max-width: 750px;
  margin: 0 auto 94px;
}

.ui-partners .ui-partners-label {
  margin-bottom: 25px;
  text-align: center;
}

.ui-partners .ui-partners-label span {
  color: #b0b0b0;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.ui-partners .ui-partners-title h2 {
  color: #fff;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

/* horizontal track — fills the height below the head and centers the cards */
.ui-partners .ui-partners-track {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  width: max-content;
  will-change: transform;
}

/* cards wrapper is transparent on desktop/tablet (becomes the scroller on mobile) */
.ui-partners .ui-partners-cards {
  display: contents;
}

/* partner logo card — capped at 406px, shrinks (square) on short viewports */
.ui-partners .ui-partners-card {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  max-height: 406px;
  width: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #d1d1d1;
  transition: background 0.4s ease;
}

.ui-partners .ui-partners-card:hover {
  background: var(--hover-bg);
}

.ui-partners .ui-partners-card img {
  max-width: 60%;
  height: auto;
  object-fit: contain;
}

/* "visiter siteweb" pill — revealed on hover */
.ui-partners .ui-partners-card .ui-partners-visit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  height: 30px;
  padding: 0 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #eaff66;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ui-partners .ui-partners-card:hover .ui-partners-visit {
  opacity: 1;
}

/* full CTA card = content panel + arrow box — same height rule as the logo
   cards (fills the track, capped at 406px) so they always line up; the two
   panels keep their 433x406 / 416x406 proportions from that height */
.ui-partners .ui-partners-cta {
  flex: 0 0 auto;
  display: flex;
  height: 100%;
  max-height: 406px;
}

.ui-partners .ui-partners-cta-content {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 433 / 406;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #d1d1d1;
  transition: background 0.4s ease;
}

.ui-partners .ui-partners-cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ui-partners .ui-partners-cta-content p {
  margin-bottom: 20px;
  color: #111;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

/* line break in the CTA text — mobile only */
.ui-partners .ui-partners-br {
  display: none;
}

.ui-partners .ui-partners-cta-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12.119px 20px;
  border: 1.212px dashed #111;
  color: #111;
  text-align: center;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-partners .ui-partners-cta-count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  height: 36px;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  background: #eaff66;
  color: #575757;
  font-family: 'Neue Montreal';
  font-size: 21.815px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* arrow box — CSS-built arrow (top + right bars + diagonal) */
.ui-partners .ui-partners-cta-arrow {
  --arrow-thickness: 100px;
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 416 / 406;
  /* overlap the content panel by 1px to kill the sub-pixel seam between them */
  margin-left: -1px;
  overflow: hidden;
  background: #111;
  transition: background 0.4s ease;
}

.ui-partners .ui-partners-arrow-top,
.ui-partners .ui-partners-arrow-right,
.ui-partners .ui-partners-arrow-diagonal {
  position: absolute;
  background: #d1d1d1;
  transition: background 0.4s ease;
}

.ui-partners .ui-partners-arrow-top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--arrow-thickness);
}

.ui-partners .ui-partners-arrow-right {
  top: 0;
  right: 0;
  width: var(--arrow-thickness);
  height: 100%;
}

.ui-partners .ui-partners-arrow-diagonal {
  top: 50%;
  left: 50%;
  width: calc(100% * 1.41421356 - var(--arrow-thickness));
  height: var(--arrow-thickness);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

/* CTA hover — content panel goes blue (white text); arrow box stays black
   but its bars turn blue */
.ui-partners .ui-partners-cta:hover .ui-partners-cta-content {
  background: #0082fe;
}

.ui-partners .ui-partners-cta:hover .ui-partners-cta-content p,
.ui-partners .ui-partners-cta:hover .ui-partners-cta-btn {
  color: #fff;
}

.ui-partners .ui-partners-cta:hover .ui-partners-cta-btn {
  border-color: #fff;
}

.ui-partners .ui-partners-cta:hover .ui-partners-arrow-top,
.ui-partners .ui-partners-cta:hover .ui-partners-arrow-right,
.ui-partners .ui-partners-cta:hover .ui-partners-arrow-diagonal {
  background: #0082fe;
}
/** =========================================================
    End UI Partners
    ========================================================= */

.ui-reservation {
  position: relative;
  padding-block: 195px;
}
.ui-reservation .reservation-stage {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ui-reservation .reservation-gate {
  display: flex;
  width: 100%;
  color: white;
  position: relative;
}
.ui-reservation .reservation-title {
  font-size: 100px;
  line-height: 115%;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  font-family: 'Neue Montreal';
  max-width: 1164px;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
.ui-reservation .reservation-gate .gate-side {
  flex: 1;
  min-width: 0;
  height: 340px;
  position: relative;
  z-index: 2;
  background: #111;
  /* the 720x340 bitmaps are exactly half of the 1440px design: cover renders
     them 1:1 on desktop and lets them scale with the box on big screens
     (object-fit: none would pin them at 340px and show the background) */
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.ui-reservation .gate-side:first-of-type {
  object-position: right center;
}
.ui-reservation .gate-side:last-of-type {
  object-position: left center;
}
.ui-reservation .reservation-gate.is-animated .gate-side:first-of-type {
  transform: translate3d(-100%, 0, 0);
}
.ui-reservation .reservation-gate.is-animated .gate-side:last-of-type {
  transform: translate3d(100%, 0, 0);
}

.reservation-card {
  color: black;

  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50vh);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.ui-reservation.is-revealed .reservation-card {
  transform: translate(-50%, -50%);
}
.reservation-card-left,
.reservation-card-right {
  background-color: #c3ff74;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.ui-reservation.is-revealed .reservation-card-left {
  transform: rotate(-5deg);
  transition-delay: 0.75s;
}
.ui-reservation.is-revealed .reservation-card-right {
  transform: translateX(30px) rotate(5deg);
  transition-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
  .ui-reservation .reservation-gate .gate-side,
  .reservation-card,
  .reservation-card-left,
  .reservation-card-right {
    transition: none;
  }
  .ui-reservation.is-revealed .reservation-card-left,
  .ui-reservation.is-revealed .reservation-card-right {
    transition-delay: 0s;
  }
}
.reservation-card-left {
  width: 572px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  /* watermark sits on top of the #c3ff74 fill — background-image longhand so the
     colour set on the shared rule above survives */
  background-image: url('../assets/bg-reservation-card-left-desktop.png');
  background-repeat: no-repeat;
  background-position: center;
}
.reservation-card-left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-image: repeating-linear-gradient(
    to bottom,
    black 0 10px,
    transparent 10px 20px
  );
}
.reservation-card-left-content {
  padding: 20px 25px 14px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.reservation-card-left-content h4 {
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-weight: 700;
  line-height: 130%;
  text-transform: uppercase;
  max-width: 408px;
}
.reservation-card-left-content-head {
  display: flex;
  justify-content: space-between;
}

.reservation-card-left-content-head-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reservation-card-left-content-head-label {
  font-size: 14px;
  line-height: 17px;
}
.reservation-card-left-content-head-value {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
}

.reservation-card-left-cta-btn {
  font-size: 20px;
  padding: 33px;
  background-color: #00e427;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.reservation-card-left-cta-btn svg {
  width: 15px;
  height: 15px;
}
.reservation-card-right {
  padding: 14px 7px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background-image: url('../assets/bg-reservation-card-right-desktop.png');
  background-repeat: no-repeat;
  background-position: center;
}
.reservation-card-right svg {
  width: 40px;
  height: 36.57px;
  margin: 0 auto;
  flex-shrink: 0;
}
.reservation-card-right p {
  font-family: 'Neue Montreal';
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  max-width: 60px;
  margin: 0 auto;
  text-align: center;
}
.reservation-card-right img {
  width: 80px;
  height: 80px;
  margin-top: 6px;
}
/* Partners — short desktop viewports (e.g. 1440×700): shrink the head so the
   406px cards fit inside the pinned area instead of being clipped. */
@media (max-height: 820px) {
  .ui-partners {
    padding-top: 90px;
  }
  .ui-partners .ui-partners-head {
    margin-bottom: 40px;
  }
  .ui-partners .ui-partners-label {
    margin-bottom: 12px;
  }
  .ui-partners .ui-partners-title h2 {
    font-size: 40px;
  }
}

/** =========================================================
    UI Infolettre (newsletter bar before the footer)
    ========================================================= */
.ui-infolettre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 90px;
  padding-inline: 20px;
  background: #eaff66;
}

.ui-infolettre .ui-infolettre-title h2 {
  color: #1d2122;
  font-family: 'Neue Montreal';
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

/* Grid: field + button, and the result message on its own row below. */
.ui-infolettre .ui-infolettre-form {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.ui-infolettre .ui-infolettre-input {
  width: 384px;
  min-width: 0;
  height: 51px;
  padding-inline: 15px;
  border: 1px solid #111;
  background: transparent;
  color: #111;
  font-family: 'Neue Montreal';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ui-infolettre .ui-infolettre-input::placeholder {
  color: #111;
  opacity: 1;
}

.ui-infolettre .ui-infolettre-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 51px;
  padding: 0 10px;
  border: none;
  cursor: pointer;
  background: #014b4c;
  color: #eaff66;
  font-family: 'Neue Montreal';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.ui-infolettre .ui-infolettre-form.is-sending .ui-infolettre-submit {
  cursor: progress;
  opacity: 0.7;
}

/* Result message (js/main.js). width 0 + min-width 100%: it spans the form
   without widening it. */
.ui-infolettre .ui-infolettre-msg {
  grid-column: 1 / -1;
  width: 0;
  min-width: 100%;
  color: #1d2122;
  font-family: 'Neue Montreal';
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.ui-infolettre .ui-infolettre-msg:empty {
  display: none;
}

/* Honeypot field: off-screen for people, still filled in by bots. */
.ui-infolettre .ui-infolettre-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/** =========================================================
    End UI Infolettre
    ========================================================= */

/* ==========================================================================
   Rich text from WYSIWYG fields (lists, headings, emphasis, quotes).
   The global reset strips list bullets and heading sizes, so restore them
   inside every dynamic content wrapper. (.ui-apropos-intro-content keeps its
   own copy in a-propos.css.)
   ========================================================================== */
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h1,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h2,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h3,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h4,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h5,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h6 {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h1 {
  font-size: clamp(28px, 3.4vw, 44px);
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h2 {
  font-size: clamp(22px, 2.6vw, 30px);
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h3 {
  font-size: clamp(20px, 2.2vw, 25px);
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h4 {
  font-size: 20px;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h5 {
  font-size: 18px;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) h6 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) ul,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #b0b0b0;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) ul {
  list-style: disc;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) ol {
  list-style: decimal;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) li {
  margin: 0 0 8px;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) li:last-child {
  margin-bottom: 0;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) li::marker {
  color: #c3ff74;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) strong,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) b {
  color: #fff;
  font-weight: 500;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) em,
:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) i {
  font-style: italic;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) a {
  color: #c3ff74;
  text-decoration: underline;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body, .pg-txt-body) a:hover {
  color: #eaff66;
}

:is(.art-body, .dt-bio-body, .mm-message-body, .gen-media-text, .hp-event-body, .mn-message-body) blockquote {
  margin: 0;
  border-left: 6px solid #c3ff74;
  padding-left: clamp(14px, 1.6vw, 22px);
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #fff;
}