@import url('variable.css');
@font-face {
  font-family: 'oxanium';
  src: url('../fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'oxanium', sans-serif;
  background-color: #2D2C2C;
}

.orange{
  color: var(--orange);
}

/* NAVIGATION */
nav {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: black;
}

.inscription-connexion{
  width: 210px;
  display: flex;
  justify-content: space-between;
}

.connexion{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 8px;
  border: none;
  background: var(--linear-orange);
  color: #1d1f20;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(
    calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);
}

nav img {
  width: 50px;
}

/* SECTION INTRO (Image en background) */
.intro {
  height: 100vh;
  background-image: url(../img/auth_img/pres_1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}

h1 {
  color: white;
  font-size: 10vw;
  margin-bottom: 10px;
}

h2{
  color: white;
  text-align: left;
}

p{
  text-align: justify;
  font-size: 20px;
  color: white;
}

.intro p {
  margin-top: 0;
  width: 45%;
}


/* DESCRIPTION */
.description p{
  text-align: center;
}

.description-1 {
  background-color: #282622;
  padding: 20px;
}

.description-1 h2, .description-1 p{
  margin-bottom: 30px;
  line-height: 1.5;
}

.description-1 .text-description{
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px;
  background: var(--linear-orange);
  text-align: center;
  color: black;
  clip-path: polygon(
    calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px), 0 0);
}

.description-cards{
  background-color: #282622;
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  justify-content: space-around;
}

.card {
  display: flex;
  border-radius: 10px;
  width: 100%;
  height: 300px;
  clip-path: polygon(85% 0, 100% 10%, 100% 100%, 10% 100%, -10% 85%, 0 0);
  /* clip-path: polygon(85% 0, 100% 10%, 100% 100%, 10% 100%, -10% 85%, 0 0); */
  border: 2px solid var(--orange);
}

.card .parent{
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.card .description-text{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #2D2C2C;
  border-bottom-right-radius: 10px;
}

.peuples-20{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.peuples-20-text{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;

  background: var(--linear-orange);
  clip-path: polygon(
    calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px), 0 0);
}

.peuples-20-text p{
  color: black;
  text-align: center;
}

.image1, .image2{
  border-top-left-radius: 10px;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all .5s;
}

.parent{
  overflow: hidden;
}

.parent:hover .image1, .parent:hover .image2{
  transform: scale(1.2) rotate(5deg);
}

.image1{
  background-image: url(../img/auth_img/porteur_marque_optimized.webp);
  background-position: 20%;
}

.image2{
  background-image: url(../img/auth_img/syndrome_optimized.webp);
}

.image3{
  background-image: url(../img/auth_img/porteur_marque_optimized.webp);
}

.description p {
  margin: 0;
  /* color: #BEBEBE; */
  color: white;
}

.description-corporation{
  padding: 20px;
}

.description-corporation h2, .description-corporation p{
  margin-bottom: 30px;
  line-height: 1.5;
}

.container-corporation{
  width: 100%;
  min-height: 80px;
  margin: 0 auto;
  background: var(--linear-orange);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  clip-path: polygon(
    calc(100% - 30px) 0, /* Coin supérieur droit en diagonale */
    100% 30px,           /* Fixe un point légèrement en dessous du coin droit */
    100% 100%, 
    30px 100%,           /* Coin inférieur gauche en diagonale */
    0 calc(100% - 30px), /* Fixe le point de la diagonale */
    0 0
);

}

.container-corporation .text-description{
  font-size: 20px;
  width: 80%;
  color: black;
}

/* SECTION VIDÉO */
.video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VIDÉO EN ARRIÈRE-PLAN */
.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  /* object-position: 0 30%; */
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* OVERLAY POUR MIEUX VOIR LE TEXTE */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* CONTENU SUPERPOSÉ */
.content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 1;
  padding: 20px;
}

.content h1 {
  font-size: 5vw;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.item {
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
}

.item.hidden {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -100%;
}

.super-container-slider-zoom {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.container-slider-zoom {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.item {
  width: 200px;
  height: 140px;
  list-style-type: none;
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;
}

.item:nth-child(1), .item:nth-child(2) {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}

.item:nth-child(3) { left: 50%; }
.item:nth-child(4) { left: calc(50% + 220px); }
.item:nth-child(5) { left: calc(50% + 440px); }
.item:nth-child(6) { left: calc(50% + 660px); }
.item:nth-child(7) { left: calc(50% + 880px); opacity: 0; }
.item:nth-child(8) { left: calc(50% + 1100px); opacity: 0; }
.item:nth-child(9) { left: calc(50% + 1320px); opacity: 0; }
.item:nth-child(10) { left: calc(50% + 1540px); opacity: 0; }
.item:nth-child(11) { left: calc(50% + 1760px); opacity: 0; }
.item:nth-child(12) { left: calc(50% + 1980px); opacity: 0; }
.item:nth-child(13) { left: calc(50% + 2200px); opacity: 0; }
.item:nth-child(14) { left: calc(50% + 2420px); opacity: 0; }
.item:nth-child(15) { left: calc(50% + 2640px); opacity: 0; }
.item:nth-child(16) { left: calc(50% + 2860px); opacity: 0; }
.item:nth-child(17) { left: calc(50% + 3080px); opacity: 0; }
.item:nth-child(18) { left: calc(50% + 3300px); opacity: 0; }
.item:nth-child(19) { left: calc(50% + 3520px); opacity: 0; }
.item:nth-child(20) { left: calc(50% + 3740px); opacity: 0; }
.item:nth-child(21) { left: calc(50% + 3960px); opacity: 0; }


.content-slider {
  width: min(40vw,400px);
  position: absolute;
  top: 65%;
  left: 1rem;
  transform: translateY(-50%);
  font: 400 1rem helvetica,sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  opacity: 0;
  display: none;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px;
  border-radius: 20px;
}

.content-slider .title {
  font-family: 'oxanium';
  text-transform: uppercase;
}

.content-slider .description {
  line-height: 1.7;
  margin: 1rem 0 1.5rem;
  font-size: 0.8rem;
}

.content-slider button {
  width: fit-content;
  background-color: rgba(0,0,0,0.1);
  color: white;
  border: 2px solid white;
  border-radius: 0.25rem;
  padding: 0.75rem;
  cursor: pointer;
}

.item:nth-of-type(2) .content-slider {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

.illus-slide-peuple_1 {
  background-image: url('../img/chapitre2_img/argilien_1_optimized.webp');
}

.illus-slide-peuple_2 {
  background-image: url('../img/chapitre2_img/humain_1_optimized.webp');
}

.illus-slide-peuple_3 {
  background-image: url('../img/chapitre2_img/malard_1_optimized.webp');
  background-position: top;
}

.illus-slide-peuple_4 {
  background-image: url('../img/chapitre2_img/mutant_1_optimized.webp');
  background-position: 0 25%;
}

.illus-slide-peuple_5 {
  background-image: url('../img/chapitre2_img/krog_1_optimized.webp');
  background-position: top;
}

.illus-slide-peuple_6 {
  background-image: url('../img/chapitre2_img/innommable_1_optimized.webp');
}

.illus-slide-peuple_7 {
  background-image: url('../img/chapitre2_img/edenide_1_optimized.webp');
}

.illus-slide-peuple_8 {
  background-image: url('../img/chapitre2_img/oublie_1_optimized.webp');
  background-position: center;
}

.illus-slide-peuple_9 {
  background-image: url('../img/chapitre2_img/capele_1_optimized.webp');
}

.illus-slide-peuple_10 {
  background-image: url('../img/chapitre2_img/mapiti_1_optimized.webp');
}

.illus-slide-peuple_11 {
  background-image: url('../img/chapitre2_img/reptilien_1_optimized.webp');
}

.illus-slide-peuple_12 {
  background-image: url('../img/chapitre2_img/bentari_1_optimized_optimized.webp');
}

.illus-slide-peuple_13 {
  background-image: url('../img/chapitre2_img/vaygr_1_optimized.webp');
}

.illus-slide-peuple_14 {
  background-image: url('../img/chapitre2_img/pigme_2_optimized.webp');
  background-position: top;
}

.illus-slide-peuple_15 {
  background-image: url('../img/chapitre2_img/vinefood_1.webp');
}

.illus-slide-peuple_16 {
  background-image: url('../img/chapitre2_img/vanthar_1_optimized.webp');
}

.illus-slide-peuple_17 {
  background-image: url('../img/chapitre2_img/karaps_1_optimized.webp');
}

.illus-slide-peuple_18 {
  background-image: url('../img/chapitre2_img/thars_1_optimized.webp');
  background-position: top;
}

.illus-slide-peuple_19 {
  background-image: url('../img/chapitre2_img/chitineu_1.webp');
  background-position: top;
}

.illus-slide-peuple_20 {
  background-image: url('../img/chapitre2_img/mogard_1_optimized.webp');
  background-position: top;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;
  display: flex;
  gap: 1rem;
}

.btn-slide-zoom {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(0, 0, 0, 0.6);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.btn-slide-zoom:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}


@media (width > 650px) and (width < 900px) {
  .content-slider .title { font-size: 1rem; }
  .content-slider .description-slider { font-size: 1rem; }
  .content-slider button { font-size: 0.7rem; }
  .item { width: 160px; height: 140px; }
  .item:nth-child(3) { left: 50%; }
  .item:nth-child(4) { left: calc(50% + 170px); }
  .item:nth-child(5) { left: calc(50% + 340px); }
  .item:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
}

@media (width < 650px) {
  .content-slider .title { font-size: 1rem; }
  .content-slider .description-slider { font-size: 1rem; margin-top: 10px; font-family: 'oxanium'; text-align: justify;}
  .content-slider button { font-size: 0.7rem; }
  .item { width: 130px; height: 140px; }
  .item:nth-child(3) { left: 50%; }
  .item:nth-child(4) { left: calc(50% + 140px); }
  .item:nth-child(5) { left: calc(50% + 280px); }
  .item:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
}

/*Footer*/
footer{
  padding: 20px;
}

.footer-connexion{
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.legal{
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.legal a{
  text-decoration: none;
  color: white;
}

/* MEDIA QUERIES POUR LE RESPONSIVE */
@media screen and (min-width: 500px) {
  .content {
    left: -5%;
    max-width: 430px;
  }

  .card{
    clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0% 85%, 0 0);
  }

  .peuples-20-text{
    height: 80px;
  }

  footer{
    display: flex;
    justify-content: space-around;

  }

  .footer-connexion{
    gap: 15px;
    align-items: center;
    margin-bottom: 0;
  }

  footer .connexion{
    height: 50px;
  }

  .legal{
    text-align: right;
  }
}

@media screen and (min-width: 600px) {
  .content {
    left: -15%;
  }

  .description-cards{
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card{
    flex-direction: column;
    width: 45%;
    height: 80%;
    clip-path: polygon(85% 0, 100% 10%, 100% 100%, 10% 100%, -10% 85%, 0 0);
  }
  
  .card .parent{
    height: 60%;
    width: 100%;
  }

  .card .description-text{
    height: 40%;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {

  .description{
    flex-direction: row;
  }

  .peuples-20-text{
    width: 80%;
  }
}

@media screen and (min-width: 900px) {
  .container-description{
    flex-direction: row;
  }
  .card{
    width: 360px;
  }
}

@media screen and (min-width: 1240px) {
  .content {
    left: -25%;
  }

  .card{
    width: 360px;
  }

  .peuples-20-text{
    width: 70%;
  }
}

@media screen and (min-width: 1440px) {
  h1 {
    font-size: 10vw;
  }

  .intro p {
    font-size: 3vw;
  }

  .peuples-20-text{
    max-width: 1440px;
  }
}

/*CSS pour l'animation du fade in du texte*/
p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

p.visible {
  opacity: 1;
  transform: translateY(0);
}