@import url(fonts/worksans-font.css);

html {

  --fondtexte: #1c2149;
  --piedgris: #3e3e3e;
  --texteclair: white;
  --lien: gray;
  --liensurvol: white;
  --lienselect: DarkGray;
  --lair:#3569FF;
  --margeg: 8.75em;
}

body {
  font-family: 'Work-Sans', arial;

}

h1,
h2,
h3 {
  font-weight: normal;
  font-family: 'Work-Sans-light', arial;
}

mark {
  background-color: transparent;
}

.main {
  max-width: 120em;
  display: grid;
  grid-template-columns: var(--margeg) auto var(--margeg);
  grid-template-rows: 53em auto 60em 49em 14em;
  grid-template-areas: "entete entete entete"
    "premier premier premier"
    "actus actus actus"
    "solutions solutions solutions"
    "pied pied pied";

}
.langue{
  position: absolute;
  top:5dvh;
  right: 15vw;
  color: white;
  & a{
    color: white;
    text-decoration: none;
    
    &:hover{
      color: gray;
    }
  }

}

.inter {
  max-width: 120em;
  display: grid;
  grid-template-columns: var(--margeg) auto var(--margeg);
  grid-template-rows: auto auto auto 14em;
  grid-template-areas: "entete entete entete"
    "savoir savoir savoir"
    "solutions solutions solutions"
    "pied pied pied";

}

.main #header {
  background: var(--fondtexte) url(../img/bruleurtop.webp);
  background-size: cover;
  grid-area: entete;
  padding-left: var(--margeg);
  padding-top: 1.2em;
}

.inter #header {
  background: var(--fondtexte);
  grid-area: entete;
  padding-left: var(--margeg);
  padding-top: 1.2em;
}

.llair {
  display: inline-block;
}

.main #header h2 {
  margin-top: 5em;
  color: var(--texteclair, white);
  font-size: 4.5em;
}

.inter #header h2 {
  margin-top: 1em;
  color: var(--texteclair, white);
  font-size: 4.5em;
  &:first-letter {
    text-transform: uppercase
  }
}

.premier {
  background: var(--fondtexte);
  color: var(--texteclair, white);
  padding-left: var(--margeg);
  grid-area: premier;
  position: relative;
  & p span{
    font-weight: bold;
    color:var(--lair)

  }
}

.savoir {
  background: var(--fondtexte);
  color: var(--texteclair, white);
  padding-left: var(--margeg);
  grid-area: savoir;
  position: relative;

  & img {
    position: absolute;
    top: 0;
    left: var(--margeg);
    width: 25vw;
  }
}

.savoir img:nth-child(2) {
  top: 5em;
  left: calc(var(--margeg) + 20vw);
  padding-right: 2em;
}

.savoir > p {
  width: 30vw;
  margin-left: 48vw;
  margin-right: 2em;
  padding-bottom: 7em;
  min-height: 34em;
}
.cgv p {
  width: 80vw;
  margin-left: 8vw;
  margin-right: 2em;
  padding-bottom: 1em;
}

.savoir p.texte2 {
  position: absolute;
  left: -37vw;
  padding-bottom: 2em;
}

.savoir hr {
  width: 40vw;
  margin-top: 13vw;
  margin-left: 0;
}

hr.hr2 {
  margin-top: 1vw;
  /* margin-bottom: 13vw; */
  visibility: hidden;
}

.premier h1,
.savoir h1 {
  font-size: 4.5em;
}

.premier p {
  width: 35%;
  padding: 1em;

}

img.bruleur_lair {
  position: absolute;
  width: 42%;
  right: 8em;
  top: 32em;
}

.catalogue {
  background: var(--fondtexte);
  color: var(--texteclair, white);
  padding-left: var(--margeg);
  grid-area: savoir;
  display: grid;
  grid-template-columns: 15vw auto;
  column-gap: 2em;
  grid-template-areas: "liste items";
  padding-bottom: 3em;
}

.catalogue aside {
  grid-area: liste;
  padding: .4em;
}

aside h6 {
  margin: 0;

  & mark {
    color: white;
    font-size: 1.2em;
  }
}

.catalogue aside ul {
  list-style: none;
  margin: 0;

  & li {
    margin-left: -2em;

    a {
      color: white;
      text-decoration: none;

      &:hover,
      &:focus {
        color: var(--lienselect);
      }
    }
  }
}

.catalogue section {
  grid-area: items;
  display: flex;
  column-gap: 1em;
  row-gap: 1em;
  flex-wrap: wrap;
}

.catalogue section .item {
  aspect-ratio: 1;
  min-width: 25%;
  max-width: 30%;
  background: white;
  color: #1c2149;
  padding: .5em;
}

.catalogue section .item a {
  color: #1c2149;
  text-decoration: none;
}
.item h1,.item h2{
  font-size: 70%;
  overflow-wrap: anywhere;
}

.catalogue section .detail {
  width: 85%;
  background: white;
  color: #1c2149;
  padding: .5em;
}

.catalogue section .detail img {
  width: 75%;
}

.actus {
  background: white;
  color: var(--fondtexte);
  grid-area: actus;
  padding-left: var(--margeg);
  padding-right: var(--margeg);
  margin-top: 5em;
}

.actus h2 {
  font-size: 4.5em;
}

.listactu {
  display: flex;
  justify-content: space-around;
}

.actu {
  aspect-ratio: 1/1;
  width: 20vw;
  background-color: var(--fondtexte);
  color: white;
  padding: 2em;
}

.solutions {
  background: var(--fondtexte);
  color: var(--texteclair, white);
  grid-area: solutions;
  padding-left: var(--margeg);
  position: relative;
}

.inter .solutions {
  background: white;
}

.solutions h2 {
  font-size: 4.5em;
}

.listesolutions {
  display: flex;
  justify-content: start;
}

article.solution {
  width: 20vw;
  background-color: white;
  color: var(--fondtexte);
  padding: 2em;
  z-index: 5;
}

img.solution {
  position: absolute;
  width: 42%;
  right: 0;
  top: 0;
}

section.contact img.form {
  z-index: 0;
  margin-left: 55vw;
  margin-top: -4em;
}

.contact form {
  z-index: 5;
  position: relative;
  width: 40vw;
  background-color: white;
  color: var(--fondtexte);
  padding: 5em;
  margin-right: var(--margeg);
  margin-top: 0em;
}

.contact form label {
  display: inline-block;
  color: var(--fondtexte);
  width: 10vw;
}

.contact form input,
.contact form select {
  margin-bottom: 1em;
}

.contact form select {
  /* Reset Select */
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: .2em .6em;
  color: white;
  background-color: var(--fondtexte, #2c3e50);
  background-image: none;
  cursor: pointer;
  border: white solid .2em;
}

input[type=submit] {
  margin-top: 1em;
  padding: 1em 1em;
  background: var(--fondtexte, #2c3e50);
  color: white;
  border: 0 none;
  cursor: pointer;
}
input[required]:invalid {
  border-right: 8px solid red;
}
[required]:valid {
  border-right: 8px solid var(--fondtexte, #2c3e50);;
}
a.ensavoir{
  display: inline-block;
  background-color: var(--fondtexte, #2c3e50);
  color: white;
  padding: .4em .6em;
  text-decoration: none;
  }


.sr-only {
  position: absolute;
  left: -10000em;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

#carte {
  margin-left: calc (var(--margeg) - 3em);
  margin-top: 8em;

  & iframe {
    width: 50vw;
  }
}

p.adresse {
  position: absolute;
  bottom: 7em;
  right: 5em;
}

.pied {
  background: var(--piedgris);
  color: var(--texteclair, white);
  grid-area: pied;
  padding-left: var(--margeg);
  padding-top: 2em;
  display: flex;
  justify-content: start;
}

.pied article p {
  margin: 0;
}

.pied article ul {
  list-style: none;
  display: inline-block;
  margin-top: 0;

  & a {
    color: white;
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--lienselect);
    }
  }
  & h2{
    font-size: .8em;
    margin-top: 0;
  }
}
video{
  max-width: 80vw;
}
.parallax {
  transition: 800ms cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateX(25px);

}
.parallax:nth-child(2) {
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateX(1.5em);

}