html{

  --margeg: .5em;
}

.main{
  max-width: 100em;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "entete "
                       "premier"
                       "actus"
                       "solutions "
                       "pied";

}
.premier p{
  width:85%;
  padding:1em;

}
.premier p:last-child{
  clear:both;

}
img.bruleur_lair{
  position: unset;
  width:85%;
  margin-left: 1.4em;
}
.actus{
  margin-top: .5em;
}

.listactu{
flex-direction: column;
}
article.actu, article.solution{
  aspect-ratio: 1/1;
  width:80vw;
  padding: .5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}
.listesolutions{
  flex-direction: column;
}

.savoir img{
  position: initial;
  top: 0;
  width: 60vw;
  margin-bottom: 27em;
}
.contact img{
  position: initial;
  top: 0;
  width: 0;
  margin-bottom: 0;
}
.contact form{
  margin-top: 4em;
}
.savoir img:nth-child(2){
  position: absolute;
  top: 8em;
  left: 35vw;
}
.savoir p{
  position:initial;
  width: 80vw;
  margin-left: 5vw;
  margin-right: 5em;
  padding-bottom: 1em;
}
.savoir p.texte2{
  position:initial;
  left: 0;
}
.savoir hr{
  width: 40vw;
  margin-top: .2em;
  margin-left: 0;
}
hr.hr2{
  margin-bottom: 7em;
  visibility: hidden;
}
.savoir video{
  width: 90vw;
}
.catalogue{
  grid-template-columns:  auto;
  grid-template-areas: "liste" "items";
  padding-bottom: 2em;
}
.catalogue aside {
  border:.1em solid white;
  min-height: 5em;
  overflow: none; 
}

.catalogue aside.deplie{
  height: max-content;
}

.catalogue hr{
  visibility: hidden;
}
.catalogue section{
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}
.catalogue section .item{
  width :95%;
  padding: .5em;
  min-width: fit-content;
}


.contact form{
  width:70vw;
}
#carte {
  & iframe{
    width: 95vw;
  }
}

.pied{
  flex-direction: column;
}

.pied article p,.pied article ul li {
  text-align: center;
}
.pied article ul {
  margin: 0;
  padding-top: .5em;
}