* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}

body {
  background-color: #000000;
  color: #f1f1f1;
  /*width: 400px;*/
}

header {
  position: relative;
  top: 20px;
  z-index: 1;
  height: 700px;
  padding-top: 50px;
  text-align: center;
}

header .overlay {
  position: absolute;
  top: -20px;
  z-index: -1;
  inset: 0;
  background-color: #30303032;
}

#Pochette {
  position: absolute;
  top: 20px;
  left: 20px;
}

header video {
  position: absolute;
  top: -40px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#LogoContact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  top: 0px;
  border-radius: 600px;
  cursor: url(Curseurs/MainSuperGF-ok.png) 5 5, auto;
}
/*
#DrapMondeContact {
  position: relative;
  display: flex;
  align-items: center;
  /*justify-content:space-between;* /
  top: -42px;
  z-index: 33;
}
*/
.gpsRedContact1 {
  position: relative;
  display: flex;
  top: -25px;
  font-size: 1.3rem;
  font-weight: 400;
  color: rgb(255, 255, 255);
  text-align: center;
  justify-content: center;
  z-index: 100;
}

.gpsRedContact2 {
  position: relative;
  display: flex;
  top: -0px;
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
  justify-content: center;
  font-weight: 700;
  z-index: 100;
}

h1 {
  text-align: center;
  padding: 20px;
  background-color: #999999;
  border-bottom: 3px solid #8b8b8b;
  /*box-shadow: 0px 2px 8px #00000080;*/
  margin-bottom: 20px;
}

h1C {
  text-align: center;
  padding: 20px;
}

.player:hover .controls,
.player:focus .controls {
  opacity: 1;
}

.containerKK {
  position: absolute;
  display: block;
  flex-direction: row;
  width: 100vw;

  height: 800px;
  top: 335px;
  /*border: 1px solid #ddd;*/
  /*margin: 0 auto;*/
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

gpsRouge {
  color: rgb(254, 250, 0);
  font-size: 1.4rem;
  line-height: 10px;
  padding-top: 9px;
}

gpsJaune {
  position: relative;
  color: rgb(254, 250, 0);
  font-size: 1.4rem;
  line-height: 10px;
  top: 6px;
}

.PosFleche {
  position: relative;
  width:90%;
  margin-left:5%;
  margin-right:5%;
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  top: 235px;
  /*opacity : 0.3;*/
  z-index:120;
  
}

#FG{
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
  z-index:120;
  opacity : 0.3;
}

#FD{
 cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
 z-index:120;
 opacity : 0.3;
}

#FG:hover{
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
  opacity : 1.0;
}

#FD:hover{
 cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
  opacity : 1.0;
}

.container {
  position: relative;
  display: block;
  width: 80vw;
  height: 80vw;
  top: -715px;
  /*border: 1px solid #ddd;*/
  margin: 0 auto;
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  justify-content: space-around;
  z-index: 200;
}

.col1 {
  display: flex;
  width: 350px;
  height: 2.5rem;
  height: 45px;
  margin: 0 auto;
  justify-content: space-evenly;
  align-items: center;
}

.col2 {
  display: flex;
  width: 350px;
  height: 2.5rem;
  margin: 0 auto;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
}

.box {
  background: #2d2d2d;
  height: 100px;
  /*border: 1.8rem solid purple;*/
  align-items: center;
  /*padding-left: 5px;*/
}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7 {
  display: flex;
  height: 2rem;
  border-radius: 0rem;
  border: 0.08rem solid #9b9b9b;
  margin: 0px;
  width: 800px;
  padding: 6px;
  opacity: 0.5;
}

.box3,
.box4 {
  flex-grow: 1;
}

.box8 {
  flex-grow: 1;
  height: 4rem;
  border: 0.08rem solid #9b9b9b;
  border-radius: 0rem;
  padding: 6px;
  opacity: 0.5;
}

.box9 {
  flex-grow: 1;
  height: 8rem;
  border: 0.08rem solid #9b9b9b;
  border-radius: 0rem;
  padding: 6px;
  opacity: 0.5;
}

.box10 {
  flex-grow: 1;
  line-height: 2rem;
  height: 38px;
  border: 0.08rem solid #9b9b9b;
  border-radius: 0px;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding-top: 2px;
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
  opacity: 0.4;
}

.box10:hover {
  /*animation: MyZoomBtn 1s 0.2s infinite;*/
  flex-grow: 1;
  background-color: #3e852c;
  color: #ffffff;
  border: 0.14rem solid #000000;
  border-radius: 0px;
  text-shadow: 1px 1px 2px #000000;
  text-align: center;
  padding-top: 2px;
}

.box11 {
  flex-grow: 1;
  height: 10rem;
  border: 0.14rem solid #9b9b9b;
  border-radius: 0.4rem;
  background-color: #ddd;
  color: #000000;
  font-weight: 500;
  text-align: center;
  padding-top: 3px;
}

#PosCopy {
  position: relative;
  top: 250px;
  font-size: 1rem;
}

#Z1 {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  top: 20px;
}

#Z2 {
  position: relative;
  top: 30px;
}

#Z3 {
  position: relative;
  top: 40px;
}

#Z4 {
  position: relative;
  top: 50px;
}

#Z5 {
  position: relative;
  top: 75px;
}

#Z6 {
  position: relative;
  top: 146px;
}

#Z7 {
  position: relative;
  top: 206px;
  z-index: 40;
}

#ZStatut {
  position: relative;
  top: 230px;
}

/*======================= ECRAN 430 px =========================================*/
@media (max-width: 443px) {
  .container {
    width: 90vw;
  }

  .col1 {
    flex-wrap: wrap;
    display: flex;
    width: 290px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    gap: 8px;
  }
  .col2 {
    flex-wrap: wrap;
    display: flex;
    width: 290px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    gap: 8px;
  }

  .box1,
  .box2,
  .box3,
  .box4,
  .box5,
  .box6,
  .box7 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 2rem;
    border-radius: 0rem;
    border: 0.08rem solid #9b9b9b;
    flex-grow: 1;
    padding: 6px;
    margin-bottom: 5px;
  }

  .box8,
  .box9,
  .box10,
  .box11 {
    padding: 6px;
    border: 0.08rem solid #9b9b9b;
  }

  #Z1 {
    position: relative;
    top: 20px;
  }

  #Z2 {
    /* 47px */
    position: relative;
    top: 67px;
  }

  #Z3 {
    /* Téléphone 5px */
    position: relative;
    top: 72px;
  }

  #Z4 {
    /* Code Postal & Ville 8px */
    position: relative;
    top: 80px;
  }

  #Z5 {
    /* Sujet  52px */
    position: relative;
    top: 132px;
  }

  #Z6 {
    /* Message */
    position: relative;
    top: 168px;
  }

  #ZStatut {
    /* Votre Statut */
    position: relative;
    top: 223px;
  }

  #Z7 {
    /* Btn Envoyer le formulaire */
    position: relative;
    top: 280px;
  }

  #PosCopy {
    position: relative;
    top: 330px;
    font-size: 1rem;
  }
}