/* ==============================
   CHRONO SVG – BACKGROUND GLOBAL
============================== */

#maincontener {
  position: relative;
  overflow: hidden;
}

/* zone du chrono */
#chrono-bg {
  position: absolute;
  top: 55vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 0;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );
}

/* SVG chrono */
#chrono-bg svg {
  width: min(140vw, 1600px);
  height: auto;
  opacity: 0.14;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* tout le contenu au-dessus */
#maincontener > .elementor-element {
  position: relative;
  z-index: 1;
}


/* ==================================================
   MENU ACTIF – TRACÉ ORGANIQUE SPORT
   Fade à gauche / biseau net à droite
   Couleur brand : #f39200
================================================== */

.e-n-menu-heading .e-n-menu-title{
  position: relative;
}

/* Texte au-dessus */
.e-n-menu-title-text{
  position: relative;
  z-index: 2;
}

/* ITEM ACTIF */
.e-n-menu-title.e-current::before{
  content:"";
  position:absolute;

  left:-6px;
  right:-14px;

  bottom:-7px;
  height:26%;

  background:#f39200;
  z-index:1;

  clip-path: polygon(
    0 10%,
    94% 0,
    100% 50%,
    94% 100%,
    0 90%
  );

  border-radius:4px 2px 2px 4px;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.6) 12%,
    #000 22%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.6) 12%,
    #000 22%,
    #000 100%
  );

  transform-origin: left center;
  transform: scaleX(0);

  animation: goalOrganicDraw 1.4s cubic-bezier(.22,.85,.25,1) forwards;
}

/* Animation */
@keyframes goalOrganicDraw{
  0%{
    transform: scaleX(0);
    filter: blur(0.6px);
  }
  60%{
    transform: scaleX(1.02);
    filter: blur(0.2px);
  }
  100%{
    transform: scaleX(1);
    filter: blur(0);
  }
}

/* Hover discret */
.e-n-menu-title:not(.e-current):hover .e-n-menu-title-text{
  color:#f39200;
  transition: color .25s ease;
}

/* Mobile : désactivé (menu custom) */
@media (max-width: 1024px){
  .e-n-menu-title.e-current::before{
    display:none;
  }
}


/* ==============================
   Menu mobile
============================== */


:root{
  --gt-orange:#F39200;
  --gt-orange-soft:rgba(243,146,0,.14);
  --gt-bg:#F6F4EF;
  --gt-text:#111;
}


body.gt-lock{
  overflow:hidden !important;
  touch-action:none;
}


#gt-menu{
  position:fixed;
  inset:0;
  z-index:999999;

  background:
    radial-gradient(circle at 50% 35%, var(--gt-orange-soft), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--gt-bg) 100%);

  font-family:"Exo 2", sans-serif;
  color:var(--gt-text);

  transform:translateY(-100%);
  transition:transform .75s cubic-bezier(.16,.9,.2,1);
}

#gt-menu.is-open{
  transform:translateY(0);
}


#gt-menu .gt-chrono{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:1;
  opacity:.28;
}

#gt-menu .gt-chrono svg{
  width:min(135vw,1300px);
  height:auto;
  transform-origin:50% 50%;
  will-change:transform;
}


#gt-menu .gt-top{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:5;
}

#gt-menu .gt-brand img{
  height:20px;
  width:auto;
  display:block;
}

#gt-menu .gt-close{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid var(--gt-orange);
  background:#fff;
  color:#000;
  font-size:16px;
  line-height:1;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:transform .15s ease;
}

#gt-menu .gt-close:hover{ transform:translateY(-1px); }
#gt-menu .gt-close:active{ transform:scale(.94); }


#gt-menu .gt-content{
  position:relative;
  z-index:4;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#gt-menu nav{
  display:grid;
  gap:28px;
  text-align:center;
}

#gt-menu nav a{
  font-size:clamp(26px,6vw,40px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gt-text);
  text-decoration:none;
  position:relative;
  line-height:1;
}

#gt-menu nav a.is-current::before{
  content:"";
  position:absolute;
  left:-4px;
  right:-6px;
  bottom:-4px;
  height:8%;
  background:var(--gt-orange);
  z-index:-1;

  clip-path: polygon(
    0 20%,
    95% 0,
    100% 50%,
    95% 100%,
    0 80%
  );

  border-radius:2px;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.6) 22%,
    #000 36%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.6) 22%,
    #000 36%,
    #000 100%
  );

  transform-origin:left center;
  transform:scaleX(0);
  animation: goalOrganicDraw 1.1s cubic-bezier(.22,.85,.25,1) forwards;
}

@keyframes goalOrganicDraw{
  0%{ transform:scaleX(0); filter:blur(.3px); }
  70%{ transform:scaleX(1.01); filter:blur(.1px); }
  100%{ transform:scaleX(1); filter:blur(0); }
}

#gt-menu nav a:not(.is-current):hover{
  color:var(--gt-orange);
  transition:color .2s ease;
}


@media(min-width:1025px){
  #gt-menu{ display:none; }
}