guichet/static/css/lesgv/faire-ma-page.css

body {
  margin: 0 auto;
  max-width: 1300px;
  overflow-x: hidden;
}
h1 {
  text-align: center;
} 
h2 {
  text-align: left;
}
div.enclosing-grid {
  display: grid;
}
div.enclosing-grid img {
  scale: 90%;
}
.TL {
  grid-area: 1 / 1 / 2 / 4;
  display: flex;
  justify-content: flex-start;
  margin-bottom: -4rem;
}
.TL img {
  display: inline-block;
  align-self: flex-start;
}
.TR {
  grid-area: 1 / 3 / 2 / 8;
  z-index: 11;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-bottom: -4rem;
}
.TR img {
  display: inline-block;
  align-self: flex-start;
}
.HH {
  grid-area: 2 / 1 / 3 / 7  ;
  z-index: 15;
  display: flex;
  justify-content: center;
  height: 100%;
  border-radius: 1rem 1rem 0 0;
  width: fit-content;
  margin: 0 auto;
}
.HH a {
  align-self: center;
}
.HH a img {
  max-width: 100vw;
  height: auto;
  padding: 0 1rem;
}

.ML {
  grid-area: 2 / 1 / 6 / 2;
  z-index: 20;
}
.ML img {
  margin-top: -75%;
}
.CT {
  grid-area: 3 / 2 / 6 / 5;
  z-index: 36;
  max-width: 86vw;
  background-color: var(--color-background);
  padding: 1rem;
  height: 100%;
  border-radius: 1rem 1rem 0 1rem;
}
.MR {
  grid-area: 2 / 5 / 10 / 8;
  /* grid-area: 2 / 6 / 10 / 9; */
  z-index: 17;
}
.FL {
  grid-area: 6 / 2 / 8 / 4;
  z-index: 28;
  margin-left: 4rem;
  border-radius: 0 0 0 1rem;
}
.FR {
  grid-area: 6 / 4 / 8 / 5;
  z-index: 29;
  border-radius: 0 0 1rem 0;

}
.FR, .FL {
  margin-bottom: 4rem;
  background-color: var(--color-background);
  padding: 1rem;
  max-width: 86vw;
}
.BL {
  grid-area: 5 / 1 / 9 / 4;
  z-index: 12;
  text-align: left;
  display: flex;
  justify-content: flex-start;
}
.BL a {
  align-self: flex-end;
}
.BC {
  grid-area: 7 / 1 / 9 / 6;
  z-index: 14;
  margin-top: 6rem;
  text-align: center;
}
.BR {
  grid-area: 7 / 1 / 9 / 8;
  z-index: 13;
  display: flex;
  justify-content: flex-end;
}
.BR img {
  display: inline-block;
  align-self: flex-end;
}

.darkmode div.cadre img,
.darkmode div.HH img {
  filter: sepia(0.25) brightness(1.25) contrast(0.75);
}
div.block-ghost_index_blog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
body.fait_ma_page_home iframe,
div.lesgv-footer iframe,
div.enclosing-grid iframe {
  height: 14rem;
  width: 100%;
  padding-right: 0;
  padding-bottom: 0;
  border-radius: 1rem;
}
@media (max-width: 1200px) { 
  .CT {
    grid-area: 3 / 2 / 6 / 6;
  }
  
  .FL {
    grid-area: 6 / 2 / 7 / 6;
    margin-left: unset;
    height: 100%;
  }
  .FR {
    grid-area: 7 / 3 / 8 / 6;  
    border-radius: 0 0 1rem 1rem;
  }
  .MR {
    grid-area: 2 / 6 / 10 / 8;
  }
} 
@media (max-width: 1000px) {
  div.block-ghost_index_blog{
    grid-template-columns: 1fr;
  }
  body.fait_ma_page_home iframe,
  div.lesgv-footer iframe,
  div.enclosing-grid iframe {
    padding-right: unset;
    padding-bottom: unset;
  }
}
@media (max-width: 800px) {
  body {
    overflow-x: hidden;
  }
  div.enclosing-grid div {
    scale: 60%;
  }
  div.enclosing-grid div.CT,
  div.enclosing-grid div.HH,
  div.enclosing-grid div.CT div,
  div.enclosing-grid div.FL,
  div.enclosing-grid div.FR{
    scale: unset;
  } 
  .HH {
    grid-area: 2 / 1 / 4 / 8;
    padding-right: revert;
  }
  .CT {
    grid-area: 4 / 1 / 5 / 8;
  }
  .FL {
    grid-area: 5 / 1 / 6 / 8;
    border-radius: 0 0 0 0;
  }
  .FR {
    grid-area: 6 / 1 / 7 / 8;  
  }
  .MR {
    grid-area: 2 / 3 / 7 / 8;
  }
  .BR {
    grid-area: 5 / 1 / 8 / 8;
  }
  .BC {
    grid-area: 7 / 1 / 8 / 4;
  }
  .CT, .FL, .FR {
    max-width: 83vw;
    margin: 0 3vw;
  }
  div.TL img {
    position:fixed;
    left: -12rem;
  }
  div.TR img {
    position:fixed;
    right: -15rem;
  }
  div.ML img {
    position:fixed;
    left: -10rem;
  }
  div.BC img {
    position:fixed;
    bottom: -15rem;
  }
  div.MR img {
    position:absolute;
    right: -15rem;
  }
  div.BL img {
    position:fixed;
    left: -10rem;
    bottom: -22rem;
  }
  div.BR img {
    position:fixed;
    right: -22rem;
    bottom: -22rem;
  }
} 

@media print {
  div.enclosing-grid {
    margin: 1rem auto;
  }
  img {
    left: unset;
    right: unset;
  }
  body {
    margin-left: 5rem;
  }
  .CT {
    grid-area: 4 / 3 / 5 / 7;
  }
  .FL {
    grid-area: 5 / 2 / 6 / 7;
    margin-left: unset;
  }
  .FR {
    grid-area: 6 / 3 / 7 / 7;  
  }
  .BC {
    grid-area: 7 / 4 / 9 / 5;
  }
}