/* Composants partagés : menu et pictogrammes identiques sur toutes les pages. */
.menu-panel,
.page-menu{
  position:fixed!important;
  inset:0 auto 0 0!important;
  z-index:1150!important;
  width:min(388px,92vw)!important;
  height:100dvh!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  overflow-y:auto!important;
  color:#fff!important;
  background:#0c4b3d!important;
  clip-path:none!important;
  transform:translateX(-102%)!important;
  visibility:hidden!important;
  box-shadow:18px 0 45px rgba(7,35,29,.3)!important;
  transition:transform .46s cubic-bezier(.77,0,.18,1),visibility 0s .46s!important;
}

.menu-panel.open,
.page-menu.open{
  transform:translateX(0)!important;
  visibility:visible!important;
  transition:transform .46s cubic-bezier(.77,0,.18,1)!important;
}

.menu-panel-brand,
.page-menu-brand{
  width:100%!important;
  height:106px!important;
  min-height:106px!important;
  flex:0 0 106px!important;
  padding:0 29px!important;
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  background:#ffb300!important;
  border:0!important;
}

.menu-panel-brand>a,
.page-menu-brand>a{
  display:block!important;
  width:215px!important;
  max-width:calc(100% - 53px)!important;
}

.menu-panel-brand img,
.page-menu-brand img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  mix-blend-mode:multiply!important;
}

.menu-close,
.page-menu-close{
  position:relative!important;
  inset:auto!important;
  width:31px!important;
  height:42px!important;
  min-width:31px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
}

.menu-close span,
.page-menu-close span{
  position:absolute!important;
  left:0!important;
  top:20px!important;
  width:31px!important;
  height:2px!important;
  background:#071713!important;
}

.menu-close span:first-child,
.page-menu-close span:first-child{transform:rotate(45deg)!important}
.menu-close span:last-child,
.page-menu-close span:last-child{transform:rotate(-45deg)!important}

.menu-panel nav,
.page-menu nav{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  padding:20px 29px!important;
}

.menu-panel nav a,
.page-menu nav a{
  position:relative!important;
  display:block!important;
  padding:14px 0!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:1.1rem!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
  text-transform:uppercase!important;
  opacity:1!important;
  transform:none!important;
  transition:color .2s,padding .2s!important;
}

.menu-panel nav a:last-child,
.page-menu nav a:last-child{border-bottom:1px solid rgba(255,255,255,.16)!important}
.menu-panel nav a>span{display:none!important}

.menu-panel nav a.current,
.page-menu nav a.current{
  padding-left:18px!important;
  color:#ffb300!important;
}

.menu-panel nav a.current::before,
.page-menu nav a.current::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border:2px solid #ffb300!important;
  background:transparent!important;
  transform:translateY(-50%) rotate(45deg)!important;
}

.menu-meta,
.page-menu-meta{
  display:block!important;
  margin-top:auto!important;
  padding:18px 29px 25px!important;
  color:rgba(255,255,255,.78)!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:.67rem!important;
  line-height:1.6!important;
}

.menu-scrim,
.page-scrim{z-index:1140!important}

/* Triangles et flèches dessinés : aucun rendu emoji sur iOS/Android. */
.ui-play{
  display:block;
  width:0;
  height:0;
  margin-left:2px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid currentColor;
}

.play-feature i,
.video-thumb i{font-size:0!important}

.play-feature i::before,
.video-thumb i::before{
  content:"";
  display:block;
  width:0;
  height:0;
  margin-left:2px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid currentColor;
}

.ui-arrow-ne,
.ui-arrow-se{
  position:relative;
  display:inline-block;
  width:18px;
  height:18px;
  color:currentColor;
}

.ui-arrow-ne::before,
.ui-arrow-se::before,
.ui-arrow-ne::after,
.ui-arrow-se::after{
  content:"";
  position:absolute;
  display:block;
}

.ui-arrow-ne::before{
  top:1px;
  right:1px;
  width:8px;
  height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}

.ui-arrow-ne::after{
  left:2px;
  top:9px;
  width:15px;
  height:2px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
}

.ui-arrow-se::before{
  right:1px;
  bottom:1px;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
}

.ui-arrow-se::after{
  left:2px;
  top:8px;
  width:15px;
  height:2px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:center;
}

.side-copy nav a::before,
.course-side-copy nav a::before,
.news-side-copy nav a::before{
  content:"↗︎"!important;
  font-family:Arial,sans-serif!important;
  font-variant-emoji:text!important;
}

.news-brand .news-wordmark{
  width:auto!important;
  max-width:none!important;
  color:#fff!important;
  background:transparent!important;
  font:1.35rem/1 'Archivo Black',Inter,Arial,sans-serif!important;
  letter-spacing:-.04em!important;
  text-transform:uppercase!important;
}

@media(max-width:650px){
  .menu-panel-brand,
  .page-menu-brand{
    height:90px!important;
    min-height:90px!important;
    flex-basis:90px!important;
    padding-inline:24px!important;
  }

  .menu-panel-brand>a,
  .page-menu-brand>a{width:185px!important}

  .menu-panel nav,
  .page-menu nav{padding:18px 24px!important}

  .menu-panel nav a,
  .page-menu nav a{
    padding:14px 0!important;
    font-size:1.05rem!important;
  }

  .menu-meta,
  .page-menu-meta{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .menu-panel,
  .page-menu{transition:none!important}
}
