.main-nav .menuV4--parent {
  --w: 70rem;
}
.main-nav .menuV4--parent > ul {
  top: 100%;
  left: 0;
  transform: translateX(0);
  width: var(--w);
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0,0,0,0.125);
  text-align: left;
  padding-right: calc(var(--w) * 0.4);
  background: linear-gradient(
    to right,
    #ffffff 0%,          /* blanc jusqu'au 2/3 */
    #ffffff 60%,      /* fin du blanc */
    #e5e5e5 60.01%, 
    #e5e5e5 60.05%,     /* ligne grise foncée très fine */
    #f6f6f6 60.06%,      /* gris clair pour le dernier tiers */
    #f6f6f6 100%
  );
}
.main-nav .menuV4--parent:hover > ul {
  display: flex;
}

.main-nav .menuV4--parent > ul > li {
  background-color: transparent;
  flex: 0 0 calc(var(--w) * 0.3);
  padding: 0.75rem 0.5rem 0.75rem 1rem;
}
.main-nav .menuV4--parent > ul > li.menuV4--col2 {
  padding: 0.75rem 1rem 0.75rem 0.5rem;
}
.main-nav .menuV4--parent > ul > li:hover {
	background-color: transparent;
}
.main-nav .menuV4--parent > ul > li:first-child::before {
  content: '';
  display: none;
}
.main-nav .menuV4--parent ul > li:first-child,
.main-nav .menuV4--parent ul > li:last-child {
  border-radius: 0;
  background: transparent;
}
.main-nav .menuV4--parent ul > li.menuV3--theme {
  margin-bottom: 4px;
}
.main-nav .menuV4--col > ul > li.menu-item-has-children > a {
  background-image: url(https://creactifs.com/wp-content/themes/creactifs/assets/img/menuV3-arrow.svg);
  background-repeat: no-repeat;
  background-size: 1.25em auto;
  background-position: center right 0.35rem;
}
.main-nav .menuV4--col ul li > a {
	position: relative;
  display: block;
  white-space: normal;
  padding: 0.5rem calc(1rem + 12px) 0.5rem 0.75rem;
  border-radius: 0.5rem;
}
.main-nav .menuV4--col > ul > li a:hover {
	color: var(--black);
	transition: 0.25s;
}
.main-nav .menuV4--col li:not(.menuV3--groupe):not(.menuV3--all):not(.menuV3--allBtn):not(.menuV3--intro) > a:hover {
	text-decoration: underline;
}
.main-nav .menuV4--col > ul > li > ul {
  position: absolute;
  top: 0;
  left: calc(var(--w) * 0.6);
  width: calc(var(--w) * 0.4);
  display: none;
/*  min-height: calc(100% - 2em);*/
}
.main-nav .menuV4--col > ul > li > ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3em;
  height: 100%;
  width: 3em;
}

.main-nav .menuV3--groupe > a {
  padding: 1rem 1.5rem 0.75rem 0.5rem !important;
  font-weight: bold;
  font-size: 1.2em
}
.main-nav .menuV4--col > ul > li > ul > li > a {
  padding: 0.5rem 1.5rem;
}

.main-nav .menuV4--col > ul > li > ul > li.menuV3--intro {
	display: flex;
  position: relative;
  width: calc(100% - 3rem);
  margin: 1.5rem 1.5rem 1rem 1.5rem;
  border-radius: 0.5rem;
  min-height: 8em;
  overflow: clip;
}
.main-nav .menuV4--col > ul > li > ul > li.menuV3--intro::before {
  content: '';
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.main-nav .menuV4--col > ul > li > ul > li.menuV3--intro::after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
.main-nav .menuV4--col > ul > li > ul > li.menuV3--intro > a {
  z-index: 4;
  position: relative;
  padding: 1.25rem;
  margin: auto 0 0 0;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
  flex: 0 0 100%;
  text-align: left;
}

.main-nav .menuV4--col > ul > li > ul > li:not(.menuV3--intro) {
	padding: 0 0.75rem;
}
.main-nav .menuV4--col > ul > li > ul > li:not(.menuV3--intro) a {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	border-radius: 0.5rem;
}
.main-nav .menuV4--col > ul > li > ul > li:not(.menuV3--intro) a::before {
  content: '• ';
}
.main-nav .menuV4--col > ul li.w-icon > a,
.mobile-nav li.w-icon > a {
  z-index: 2;
  position: relative;
  padding-left: calc(1.75rem + 10px) !important;
}
.mobile-nav li.w-icon > a {
  padding-left: 1.75rem !important;
}
.main-nav .menuV4--col > ul li.w-icon a img,
.mobile-nav li.w-icon a img {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  display: inline-block !important;
  margin: 0 !important;
  width: 1em !important;
  height: 1em !important;
  transform: translateY(-50%);
}
.mobile-nav li.w-icon a img {
	left: 0.05rem;
}
.main-nav .menuV4--col > ul li.w-icon > a::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 1.7em;
  height: 1.7em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f6f6f6;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: 0.3s;
}
.main-nav .menuV4--col > ul li.w-icon.is-open > a::before {
  background-color: #ffffff;
}

.main-nav .menuV3--intro a {
  cursor: text;
}

.main-nav .menuV3--groupe a {
	cursor: text;
	background: none !important;
}
.main-nav .menuV3--groupe a:hover {
	background: none !important;
}

.main-nav .menuV3--spacer {
  height: 1rem;
}
.main-nav .menuV3--spacer > a {
  display: none !important;
}


.main-nav .menuV3--spacer {
  height: 1rem;
}
.main-nav .menuV3--spacer > a {
  display: none !important;
}

.main-nav .menuV4--all a {
  text-align: right;
  font-weight: 700;
  text-decoration: underline;
  padding-right: 0.5rem !important;
}

.main-nav .menuV3--all {
  position: relative;
  width: 100% !important;
  background-color: #f6f6f6 !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  border-top: rgba(0,0,0,0.1) 1px solid;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.main-nav .menuV3--all > a {
	background: none !important;
	display: block;
	width: 50%;
}
.main-nav .menuV4--col > ul > li.menuV3--all > ul {
  top: 50%;
  transform: translateY(-50%);
  right: 1.5rem;;
  left: auto;
  display: block;
}
.main-nav .menuV4--col > ul > li > ul > .menuV3--allBtn {
  text-align: right;
  padding-right: 0 !important;
}
.main-nav .menuV4--col > ul > li > ul > .menuV3--allBtn a {
  cursor: pointer;
  transition-duration: 0.5s;
  text-decoration: none;
  color: currentColor;
  position: relative;
  display: inline-block;
  font-size: 1em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--black);
  font-weight: 600;
  padding: 0.7em 1em 0.7em 3em !important;
  border-radius: 9999px !important;
  border: var(--yellow) 1px solid;
  background: var(--yellow) !important;;
}
.main-nav .menuV4--col > ul > li > ul > .menuV3--allBtn a:hover {
  background: #fff !important;
}
.main-nav .menuV4--col > ul > li > ul > .menuV3--allBtn a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.5em;
  height: 1.7em;
  margin-top: -0.85em;
  width: 1.7em;
  background-color: #fff !important;;
  background-image: url(https://creactifs.com/wp-content/themes/creactifs/assets/img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  border-radius: 50%;
  transition: 0.5s;
}
.main-nav .menuV4--col > ul > li > ul > .menuV3--allBtn a:hover::after {
  background-color: var(--yellow) !important;
}


.main-nav .menuV4--col > ul > li:not(.menuV3--groupe):not(.menuV3--all):not(.menuV3--allBtn):not(.menuV3--groupe) > a:hover {
  text-decoration: underline;
}
.main-nav .menuV4--col > ul > li > ul {
  opacity: 0;
  max-height: 0;
  display: block;
  overflow: clip;
  transition: opacity 0.25s 0s;
}
.main-nav .menuV4--col > ul > li.is-open > ul {
  opacity: 1;
  max-height: 80vh;
  transition: opacity 0.25s 0.25s;
}
.main-nav .menuV4--col > ul > li.is-open > a {
  background-color: #f6f6f6;
}

 @media screen and (max-width: 1450px) {
  .main-nav .menuV4--parent > ul {
    left: -10vw;
  }
 }
 @media screen and (max-width: 1200px) {
 	.main-nav .menuV4--parent {
    --w: 58rem;
  }
  .main-nav .menuV4--parent > ul {
    left: 0;
  }
 }
 @media screen and (max-width: 1050px) {
  .main-nav .menuV4--parent > ul {
    left: -9vw;
  }
 }
 @media screen and (max-width: 950px) {
  .main-nav .menuV4--parent {
    --w: 53rem;
  }
  .main-nav .menuV4--parent > ul {
    left: -10vw;
  }
 }


.mobile-menu {
	font-size: 1em;
}
.mobile-menu .mobile-nav,
.mobile-menu > nav::after {
	background-color: #fff;
}
.mobile-menu > nav {
	max-width: 100%;
}

.mobile-menu .menuV3--spacer,
.mobile-menu .menuV3--intro {
	display: none;
}
.mobile-menu .menuV3--groupe > a {
	font-weight: 700;
}
.mobile-menu li.menuV3--groupe a:hover {
	text-decoration: none;
	cursor: text;
}
.mobile-nav .menuV4--parent > ul li.w-icon a {
  z-index: 2;
  position: relative;
}
.mobile-nav .menuV4--parent > ul li.w-icon > a::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: -0.3em;
  width: 1.7em;
  height: 1.7em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f6f6f6;
  border-radius: 50%;
  transform: translateY(-50%);
}

.mobile-nav li.w-icon a:hover {
	text-decoration: none;
}

.mobile-menu a {
	display: block;
}

.mobile-menu > nav > ul {
	border-top: var(--lightGrey) 1px solid;
}
.mobile-menu > nav > ul > li {
	position: relative;
}
.mobile-menu > nav > ul > li::after,
.mobile-menu > nav > ul > li.current-menu-item::after,
.mobile-menu > nav > ul > li.current-post-ancestor::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--lightGrey);
	top: auto;
}
.mobile-menu > nav > ul > li > a {
	font-weight: bold;
	font-size: 1.125em;
	padding: 0.5em 1em 0.5em 0;
	text-transform: none;
}
.mobile-nav > ul > li.active > a::before {
	right: 1em;
}
.mobile-menu > nav > ul > li.menu-item-has-children {
	padding-right: 1.8em;
}
.mobile-nav > ul > li.menu-item-has-children:not(.no-arrow) > a::before {
	filter: brightness(0);
	transform: rotate(90deg);
	transition: 0.1s;
}
.mobile-nav > ul > li.menu-item-has-children.active:not(.no-arrow) > a::before {
	transform: rotate(-90deg);
}
.mobile-nav > ul > li:not(.menu-item-has-children) > a::before {
	display: none !important;
}
.mobile-menu > nav > ul > li > ul {
	margin-top: 0;
}
.mobile-menu > nav > ul > li > ul a {
	padding: 0.25em 0;
}
.mobile-menu > nav > ul > li > ul > li::before {
	display: none;
}
.mobile-menu > nav > ul > li > ul > li {
	padding-left: 0;
}
.mobile-menu > nav > ul > li > ul > li > ul > li {
	padding-left: 0;
	margin: 0.15em 0;
}
.mobile-menu > nav > ul > li > ul > li > ul {
	list-style-type: none;
}
.mobile-menu > nav > ul > li > ul > li.menu-item-has-children.menuV3--theme a {
	position: relative;
}

.mobile-nav > ul > li > ul > li.menuV3--theme > a::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -0.3725em;
  right: 0;
  width: 0.8em;
  height: 0.8em;
  background-image: url(https://creactifs.com/wp-content/themes/creactifs/assets/img/mm-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0);
  transform: rotate(90deg);
  transition: 0.1s;
}
.mobile-nav > ul > li > ul > li.active > a::after {
  transform: rotate(-90deg);
}
.mobile-menu > nav > ul > li > ul > li > ul {
	display: none;
}
.mobile-menu > nav > ul > li > ul > li.active > ul {
	display: block;
}

.mobile-nav .menuV4--parent .menuV4--all a {
  cursor: pointer;
  transition-duration: 0.5s;
  text-decoration: none;
  color: currentColor;
  position: relative;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--black);
  font-weight: 600;
  padding: 0.7em 1em 0.7em 3em !important;
  border-radius: 9999px !important;
  border: var(--yellow) 1px solid;
  background: var(--yellow) !important;
  margin-top: 0.5rem;
}
.mobile-nav .menuV4--parent .menuV4--all a:hover {
  background: #fff !important;
}
.mobile-nav .menuV4--parent .menuV4--all a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.5em;
  height: 1.7em;
  margin-top: -0.85em;
  width: 1.7em;
  background-color: #fff !important;;
  background-image: url(https://creactifs.com/wp-content/themes/creactifs/assets/img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  border-radius: 50%;
  transition: 0.5s;
}
.mobile-nav .menuV4--parent .menuV4--all a:hover::after {
  background-color: var(--yellow) !important;
}