/* Coqpit Nav Menu widget - structural styles (colors/spacing/typography come from Elementor controls) */

.coqpit-nav {
    position: relative;
    width: 100%;
}

/* Logo corner on the left, menu on the right */
.coqpit-nav--has-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coqpit-nav__logo {
    --coqpit-logo-slant: 20px;
    --coqpit-logo-h: 89px;
    --coqpit-logo-radius: 6px;
    --coqpit-logo-angle: 12.7deg;

    position: relative;
    z-index: 210;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden; /* keeps the left edge straight while the background is skewed */
}

/* Same slope whatever the size (trigonometric functions need a recent browser) */
@supports (transform: skewX(atan2(1px, 2px))) {
    .coqpit-nav__logo {
        --coqpit-logo-angle: atan2(var(--coqpit-logo-slant), var(--coqpit-logo-h));
    }
}

/* The corner itself: slanted right edge and rounded bottom-right corner */
.coqpit-nav__logo::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: #191c2a;
    border-bottom-right-radius: var(--coqpit-logo-radius);
    transform-origin: 0 0;
    transform: skewX(calc(-1 * var(--coqpit-logo-angle)));
}

.coqpit-nav__logo > * {
    position: relative;
    z-index: 1;
}

.coqpit-nav__logo-link {
    display: inline-flex;
}

.coqpit-nav__logo-img {
    display: block;
    width: auto;
    max-width: 100%;
}

.coqpit-nav__bar {
    position: relative;
    align-items: center;
}

/* Wraps only the regular links - the CTA item (e.g. "Réserver") sits outside
   it as a sibling in .coqpit-nav__bar, so it never inherits the pill's
   background/blur/shadow. */
.coqpit-nav__pill {
    display: flex;
    align-items: center;
}

.coqpit-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.coqpit-nav__item {
    display: flex;
    align-items: center;
}

.coqpit-nav__link,
.coqpit-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
}

.coqpit-nav__caret {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
    line-height: 0;
}

.coqpit-nav__item--open > .coqpit-nav__link .coqpit-nav__caret {
    transform: rotate(180deg);
}

/* ---- Desktop dropdown ---- */

.coqpit-nav__dropdown {
    /* Positioned relative to .coqpit-nav__bar (not the triggering item) so it
       always spans the bar's full width, per design. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 12px;
    display: flex;
    align-items: stretch;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 100;
}

.coqpit-nav__item--open > .coqpit-nav__dropdown,
.coqpit-nav__item--has-dropdown:hover > .coqpit-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.coqpit-nav__dropdown-links {
    flex: 0 0 auto;
    width: 218px;
}

.coqpit-nav__dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2.6px;
}

.coqpit-nav__dropdown-list .coqpit-nav__item {
    /* the link fills the whole row: hovering the row and hovering the link are the same thing */
    display: block;
}

.coqpit-nav__dropdown-list a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.coqpit-nav__dropdown-promo {
    --coqpit-promo-radius: 6.5px;

    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 200px;
    height: 132px;
    overflow: hidden;
    border-radius: var(--coqpit-promo-radius);
    text-decoration: none;
}

.coqpit-nav__dropdown-promo:has(.coqpit-nav__dropdown-promo-badge) {
    /* the tab covers this corner: a rounded clip would leave a faint arc against the white panel */
    border-bottom-left-radius: 0 !important;
}

/* Stronger selector: Elementor/themes ship `img { height: auto; max-width: 100% }` (0,1,1), which let the image
   keep its own ratio: it overflowed the box and only its top part showed, so it was never really centred. */
.coqpit-nav__dropdown-promo .coqpit-nav__dropdown-promo-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/* "Billetterie" tab: a notch cut into the bottom-left corner of the image. The two small
   corner pieces below round the image where it meets the notch. */
.coqpit-nav__dropdown-promo-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 6px 13px 6px 18px;
    border-top-right-radius: var(--coqpit-promo-radius);
    background-color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: normal;
}

.coqpit-nav__dropdown-promo-badge::before,
.coqpit-nav__dropdown-promo-badge::after {
    content: "";
    position: absolute;
    width: var(--coqpit-promo-radius);
    height: var(--coqpit-promo-radius);
    background: radial-gradient(circle at 100% 0, transparent var(--coqpit-promo-radius), var(--coqpit-promo-badge-bg, #fff) calc(var(--coqpit-promo-radius) + 0.5px));
    pointer-events: none;
}

.coqpit-nav__dropdown-promo-badge::before {
    left: 0;
    bottom: 100%;
}

.coqpit-nav__dropdown-promo-badge::after {
    left: 100%;
    bottom: 0;
}

/* ---- Mobile toggle / panel ---- */

.coqpit-nav__toggle {
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    z-index: 210;
}

/* role="button" span on purpose: the Elementor kit styles every <button> (red background, padding) */
.coqpit-nav__toggle svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.coqpit-nav__toggle-icon--close {
    display: none;
}

.coqpit-nav--mobile-open .coqpit-nav__toggle-icon--open {
    display: none;
}

.coqpit-nav--mobile-open .coqpit-nav__toggle-icon--close {
    display: inline-flex;
}

.coqpit-nav__mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
}

.coqpit-nav--mobile .coqpit-nav__bar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
}

/* The panel background (mobile_panel_bg control) already covers the whole
   drawer, so the pill's own background/blur/shadow would just double up. */
.coqpit-nav--mobile .coqpit-nav__pill {
    background: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.coqpit-nav--mobile.coqpit-nav--mobile-open .coqpit-nav__bar {
    transform: translateX(0);
    visibility: visible;
}

.coqpit-nav--mobile.coqpit-nav--mobile-open .coqpit-nav__mobile-overlay {
    display: block;
}

.coqpit-nav--mobile[data-mobile-style="slide-left"] .coqpit-nav__bar {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.coqpit-nav--mobile[data-mobile-style="slide-left"].coqpit-nav--mobile-open .coqpit-nav__bar {
    transform: translateX(0);
}

.coqpit-nav--mobile[data-mobile-style="fullscreen"] .coqpit-nav__bar {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none !important;
    transform: translateY(-100%);
}

.coqpit-nav--mobile[data-mobile-style="fullscreen"].coqpit-nav--mobile-open .coqpit-nav__bar {
    transform: translateY(0);
}

.coqpit-nav--mobile[data-mobile-style="dropdown"] .coqpit-nav__bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.coqpit-nav--mobile[data-mobile-style="dropdown"].coqpit-nav--mobile-open .coqpit-nav__bar {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.coqpit-nav--mobile .coqpit-nav__list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
}

.coqpit-nav--mobile .coqpit-nav__item {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.coqpit-nav--mobile .coqpit-nav__link,
.coqpit-nav--mobile .coqpit-nav__cta {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
}

.coqpit-nav--mobile .coqpit-nav__cta {
    justify-content: center;
    margin-top: 16px;
}

.coqpit-nav--mobile .coqpit-nav__dropdown {
    position: static;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    flex-direction: column;
    display: none;
    padding-left: 16px;
    box-shadow: none !important;
    background: transparent !important;
}

.coqpit-nav--mobile[data-mobile-submenu="always-open"] .coqpit-nav__dropdown {
    display: flex;
}

.coqpit-nav--mobile[data-mobile-submenu="accordion"] .coqpit-nav__item--open > .coqpit-nav__dropdown {
    display: flex;
}

.coqpit-nav--mobile .coqpit-nav__dropdown-promo {
    display: none;
}

/* Header pinned to the viewport (class added by JS on the top-level container) */
.coqpit-header-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
}

.admin-bar .coqpit-header-fixed {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .coqpit-header-fixed {
        top: 46px;
    }
}

/* Collapsed admin bar (theme: admin-bar-toggle.php) no longer takes room at the top */
html.glb-abt-collapsed .admin-bar .coqpit-header-fixed {
    top: 0;
}

/* ---- Logo corner extended to the edges of the screen ----
   The background (not the logo) grows: a very large margin to the left, and a block above it to the top.
   Elementor adds the prefix classes `coqpit-nav-edge-left-yes` / `coqpit-nav-edge-top-yes` on the widget. */
.coqpit-nav-edge-left-yes .coqpit-nav__logo,
.coqpit-nav-edge-top-yes .coqpit-nav__logo {
    overflow: visible;
}

.coqpit-nav-edge-left-yes .coqpit-nav__logo::before {
    left: -100vw;
}

.coqpit-nav-edge-top-yes .coqpit-nav__logo::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -100vh;
    right: 0;
    left: 0;
    height: 100vh;
    background-color: #191c2a;
}

.coqpit-nav-edge-top-yes.coqpit-nav-edge-left-yes .coqpit-nav__logo::after {
    left: -100vw;
}