/* Mega menu of the header (tools/mirror/mega-menu.mjs). Desktop: panels under the header, above 1024 px.
   Burger menu (1024 px and below): column titles between the links. Palette of the home page (seo/home/home.css). */

/* ---- desktop panels ------------------------------------------------------------------------------------ */
@media (min-width: 1025px) {
  /* The panel is placed against the header box, not against its link: the elements between the link and that box
     lose their positioning. 13805 (home, built pages): the white pill 895dd1b. 36 (other pages): the bar 489e58b,
     through the menu column d0644eb. Every other link keeps the Elementor positioning (underline pointer). */
  .elementor-element-d6696c4,
  .elementor-element-9a864f3,
  .elementor-element-d0644eb,
  .elementor-nav-menu--main > ul.elementor-nav-menu,
  .elementor-nav-menu--main .elementor-nav-menu > li.dg-mega-item { position: static; }
  .elementor-nav-menu--main .elementor-nav-menu > li.dg-mega-item > a.elementor-item { position: relative; }
  /* "Ressources" got an arrow: the items are brought a little closer so the pill keeps its balance */
  html .elementor-13805 .elementor-element.elementor-element-d6696c4 { --e-nav-menu-horizontal-menu-item-margin: 9px; }

  .dg-mega {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    left: 50%;
    width: min(1100px, calc(100vw - 48px));
    margin-left: calc(min(1100px, calc(100vw - 48px)) / -2);
    box-sizing: border-box;
    padding: 26px 26px 18px;
    background: #fff;
    color: #181816;
    border-radius: 24px;
    box-shadow: 0 28px 70px -18px rgba(24, 24, 22, .32), 0 0 0 1px rgba(24, 24, 22, .07);
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  /* pill header: the panel takes the width of the pill */
  .elementor-element-895dd1b .dg-mega { left: 0; right: 0; width: auto; margin-left: 0; }
  /* bar header: centred under the bar */
  .elementor-element-489e58b .dg-mega { top: calc(100% + 8px); }
  /* the gap between the link and the panel stays part of the item while the pointer crosses it */
  .dg-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; }

  html:not(.dg-mega-js) .dg-mega-item:hover > .dg-mega,
  html:not(.dg-mega-js) .dg-mega-item:focus-within > .dg-mega,
  .dg-mega-item.is-open > .dg-mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .elementor-sticky__spacer .dg-mega { display: none !important; }
  /* Elementor gives every menu link "transition: all .4s": inside a closing panel the links would stay visible,
     and focusable, for 0.4 s. Only colours and backgrounds are animated here. */
  html .elementor-nav-menu .dg-mega a { transition: background-color .15s ease, color .15s ease; }
  /* closed from the keyboard (Escape, focus leaving): no fade, the links leave the tab order at once */
  .dg-mega-item.dg-mega-instant > .dg-mega { transition: none; }

  /* top link: arrow turned and pointer kept while its panel is open */
  .dg-mega-item > a.elementor-item .sub-arrow svg { transition: transform .2s ease; }
  .dg-mega-item.is-open > a.elementor-item .sub-arrow svg { transform: rotate(180deg); }
  .elementor-nav-menu--main .dg-mega-item.is-open > a.elementor-item::after { opacity: 1; }

  .dg-mega-grid { display: grid; gap: 6px 22px; align-items: stretch; }
  .dg-mega-c1 { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  .dg-mega-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(250px, 310px); }
  .dg-mega-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 270px); }
  .dg-mega-col { display: flex; flex-direction: column; min-width: 0; }
  .dg-mega .dg-mega-title {
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #5b4dd1;
  }

  html .elementor-nav-menu .dg-mega a.dg-mega-link,
  html .elementor-nav-menu .dg-mega a.dg-mega-link:hover,
  html .elementor-nav-menu .dg-mega a.dg-mega-link:focus {
    display: block;
    flex-grow: 0;
    padding: 9px 12px;
    border-radius: 14px;
    line-height: 1.35;
    white-space: normal;
    text-decoration: none;
    color: #181816;
    background: transparent;
    transition: background-color .15s ease;
  }
  html .elementor-nav-menu .dg-mega a.dg-mega-link:hover,
  html .elementor-nav-menu .dg-mega a.dg-mega-link:focus-visible { background: #f1efff; }
  html .elementor-nav-menu .dg-mega a.dg-mega-link:focus-visible,
  html .elementor-nav-menu .dg-mega a.dg-mega-more:focus-visible,
  html .elementor-nav-menu .dg-mega a.dg-mega-feature:focus-visible { outline: 2px solid #5b4dd1; outline-offset: 2px; }
  .dg-mega .dg-mega-name { display: block; font-size: 15px; font-weight: 600; color: #181816; }
  .dg-mega .dg-mega-desc { display: block; margin-top: 2px; font-size: 13px; color: #6a6a65; }
  .dg-mega a.dg-mega-link.is-current .dg-mega-name { color: #5b4dd1; }
  .dg-mega a.dg-mega-link.is-current .dg-mega-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: #5b4dd1; }

  html .elementor-nav-menu .dg-mega a.dg-mega-feature,
  html .elementor-nav-menu .dg-mega a.dg-mega-feature:hover,
  html .elementor-nav-menu .dg-mega a.dg-mega-feature:focus {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 0;
    min-height: 100%;
    box-sizing: border-box;
    padding: 22px 22px 20px;
    border-radius: 18px;
    overflow: hidden;
    line-height: 1.35;
    white-space: normal;
    text-decoration: none;
    color: #fafaff;
    background:
      radial-gradient(120% 85% at 100% 0%, rgba(207, 249, 65, .30), rgba(207, 249, 65, 0) 58%),
      radial-gradient(90% 70% at 0% 100%, rgba(188, 179, 255, .26), rgba(188, 179, 255, 0) 62%),
      #232321;
  }
  .dg-mega .dg-mega-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #cff941; }
  .dg-mega .dg-mega-ftitle { display: block; margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
  .dg-mega .dg-mega-ftext { display: block; margin-top: 8px; font-size: 13.5px; color: #cfcfca; }
  .dg-mega .dg-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #181816;
    background: #cff941;
    transition: transform .15s ease;
  }
  .dg-mega .dg-mega-ftitle, .dg-mega .dg-mega-ftext { margin-bottom: 18px; }
  .dg-mega .dg-mega-ftitle + .dg-mega-ftext { margin-top: -10px; }
  .dg-mega .dg-mega-cta::after { content: "→"; }
  .dg-mega a.dg-mega-feature:hover .dg-mega-cta { transform: translateX(3px); }

  .dg-mega-foot { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; padding: 14px 12px 0; border-top: 1px solid #ecebe6; }
  html .elementor-nav-menu .dg-mega a.dg-mega-more,
  html .elementor-nav-menu .dg-mega a.dg-mega-more:hover,
  html .elementor-nav-menu .dg-mega a.dg-mega-more:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-grow: 0;
    padding: 2px 0;
    line-height: 1.35;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #181816;
    background: transparent;
  }
  .dg-mega a.dg-mega-more::after { content: "→"; color: #5b4dd1; transition: transform .15s ease; }
  .dg-mega a.dg-mega-more:hover { color: #5b4dd1; }
  .dg-mega a.dg-mega-more:hover::after { transform: translateX(3px); }
  .dg-mega .dg-mega-end { display: none; }
}

/* bar header between 1025 and 1240 px: the menu stays on one line next to the logo and the contact button */
@media (min-width: 1025px) and (max-width: 1240px) {
  html .elementor-36 .elementor-element.elementor-element-9a864f3 { --e-nav-menu-horizontal-menu-item-margin: 6px; }
  html .elementor-36 .elementor-element.elementor-element-9a864f3 .elementor-nav-menu--main .elementor-item { font-size: 15px; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  html .elementor-36 .elementor-element.elementor-element-9a864f3 { --e-nav-menu-horizontal-menu-item-margin: 3px; }
  html .elementor-36 .elementor-element.elementor-element-9a864f3 .elementor-nav-menu--main .elementor-item { font-size: 14px; }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .dg-mega { padding: 22px 20px 16px; }
  .dg-mega-grid { column-gap: 14px; }
  .dg-mega-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 230px); }
  .dg-mega .dg-mega-ftitle { font-size: 17px; }
}

@media (max-width: 1024px) {
  .dg-mega { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dg-mega, .dg-mega-item > a.elementor-item .sub-arrow svg, .dg-mega .dg-mega-cta, .dg-mega a.dg-mega-link { transition: none !important; }
  .dg-mega { transform: none !important; }
}

/* ---- burger menu: column titles between the links --------------------------------------------------------- */
.elementor-nav-menu--dropdown .dg-mega-mtitle > span {
  display: block;
  padding: 14px 26px 4px;
  border-inline-start: 8px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #5b4dd1;
}
.elementor-nav-menu--dropdown .dg-mega-sub > .dg-mega-mtitle:first-child > span { padding-top: 8px; }
.elementor-nav-menu--dropdown .dg-mega-mfoot > a,
.elementor-nav-menu--dropdown .dg-mega-mfeature > a { font-weight: 600 !important; }
.elementor-nav-menu--dropdown .dg-mega-mfoot:first-of-type { margin-top: 6px; }