/* =====================================
   PAGE METIERS
===================================== */

.metiers-page{
  background:var(--dark);
  color:var(--white);
}

/* =====================================
   NAVIGATION UNIVERS
===================================== */

.univers-nav-wrapper{

  position:sticky;
  top:84px;

  z-index:30;

  width:100%;

  display:flex;
  justify-content:center;

  background:#343432;

}
.univers-nav{

  display:flex;

  width:100%;
  max-width:1280px;

  gap:2px;

  background:#343432;

}

.univers-btn{

  flex:1 1 0;

  border:0;

  background:#343432;
  color:#fff;

  padding:18px 10px;

  font-size:13px;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;

  cursor:pointer;

  transition:.25s ease;

}

.univers-btn:hover{
  background:#454542;
}

.univers-btn.active{
  background:var(--accent);
  color:#fff;
}

.univers-btn:hover{
  background:#454542;
}

.univers-btn.active{
  background:var(--accent);
  color:#fff;
}

/* =====================================
   HERO UNIVERS
===================================== */

.univers-hero{

  position:relative;

  min-height:82vh;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

}

.hero-image{

  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

}

.hero-image::after{

  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(38,38,36,.62) 0%,
      rgba(38,38,36,.45) 45%,
      rgba(38,38,36,.08) 100%
    );

}

.hero-content{

  position:relative;
  z-index:2;

  width:100%;
  max-width:1280px;

  margin:0 auto;

  padding:240px 40px 90px;

}

.hero-content .kicker{
  margin-bottom:24px;
}

.hero-content h1{
  margin:0;
}

.hero-content h2{

  margin:16px 0 0;

  color:var(--accent);

  font-size:clamp(2rem,4vw,4rem);
  line-height:1;

  text-transform:uppercase;
  font-weight:950;

}

.hero-content .lead{

  margin-top:32px;

  max-width:760px;

}

.univers-voice{

  margin-top:36px;

  max-width:700px;

  padding-left:20px;

  border-left:4px solid var(--accent);

  font-size:18px;
  line-height:1.5;
  font-weight:700;

  color:#ffffff;

}

/* =====================================
   CONTENU
===================================== */

.univers-content{

  width:100%;
  max-width:1280px;

  margin:0 auto;

  padding:80px 40px 120px;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:50px;

}

.formations-column h3,
.metiers-column h3{

  margin:0 0 30px;

  color:var(--accent);

  font-size:14px;
  font-weight:900;

  letter-spacing:.18em;
  text-transform:uppercase;

}

/* =====================================
   FORMATIONS
===================================== */

#formationsContainer{

  display:grid;
  gap:20px;

}

.formation-card{

  display:block;

  background:#ffffff;

  color:#262624;

  text-decoration:none;

  padding:28px;

  border-top:8px solid var(--accent);

  font-size:22px;

  line-height:1.2;

  font-weight:950;

  transition:.25s ease;

}

.formation-card:hover{

  transform:translateY(-4px);

  box-shadow:0 15px 35px rgba(0,0,0,.18);

}

/* =====================================
   METIERS
===================================== */

#metiersContainer{

  display:grid;
  gap:20px;

}

.metier-item{

  background:rgba(255,255,255,.06);

  border-left:5px solid var(--accent);

  padding:24px;

  font-size:18px;
  line-height:1.35;
  font-weight:700;

  transition:.25s ease;

}

.metier-item:hover{

  background:rgba(255,255,255,.10);

}

/* =====================================
   IMAGES UNIVERS
===================================== */

.hero-image.transmettre-img{
  background-image:url("../IMG/entrainer.png");
}

.hero-image.animer-img{
  background-image:url("../IMG/animer.png");
}

.hero-image.developper-img{
  background-image:url("../IMG/developper.png");
}

.hero-image.organiser-img{
  background-image:url("../IMG/organiser.png");
}

.hero-image.accompagner-img{
  background-image:url("../IMG/accompagner.png");
}

.hero-image.performer-img{
  background-image:url("../IMG/performer.png");
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:1100px){

  .univers-content{
    grid-template-columns:1fr;
  }

}

@media (max-width:900px){

  .hero-content{
    padding:190px 24px 70px;
  }

  .univers-content{
    padding:60px 24px 80px;
  }

  .univers-nav{
    flex-wrap:wrap;
  }

  .univers-btn{

    flex:1 1 33.33%;

    min-width:140px;

  }

}

.formation-disabled {

    cursor: default;

    opacity: .7;

}

@media (max-width:700px){

  .univers-nav{
    flex-wrap:wrap;
  }

  .univers-btn{

    flex:1 1 50%;

    min-width:0;

    font-size:12px;

    padding:16px 8px;

  }

  .hero-content h2{
    font-size:2rem;
  }

  .formation-card{
    font-size:20px;
  }

  .metier-item{
    font-size:17px;
  }

}