/* Police */
@font-face {
  font-family: Montserra;
  src: url(../assets/fonts/Montserra.ttf);
}

/* Corps et éléments généraux */
html,
body {
  background: #ead8b8;
  height: 100vh;
  overflow-x: hidden;
}

body * {
  color: #c49071;
  font-family: Montserra;
  font-size:clamp(1rem, 5vw, 1.3rem);
}

header{
  height:20vh;
  background-image: url(../assets/bandeau-web.png);
  background-size: contain;
  background-repeat: repeat-x;
  background-position:top center;
  background-color: #EAD8B8;
  z-index:10;
  position:relative;
}

.decoration-none{text-decoration:none}

/* Logo */
#logo {
  width: auto;
  height:47vh;
  display: inline-block;
}

/* Icones des réseaux sociaux */
.social_network_icon {
  width: 70%;
  max-width: 50px;
  height: auto;
  min-width:35px;
}

/* Classes de mise en page */
.full-height {
  height: 100%;
}
.rest-height{
  height:calc(100% - 200px - 3rem)
}

.panel {
  padding:0;
}

/* Bordures */
.panel-border{height:110%}
.panel .panel-border{
  padding-top:30px;
  border-style:solid;
  border-color:#c59171;
  border-width:0;
  border-top-width:2px;
}
.panel-left .panel-border{
  padding-right:30px;
  border-right-width:2px;
}
.panel-right .panel-border{
  padding-left:30px;
  border-left-width:2px;
}

.panel-center{z-index:1}
.panel-left{z-index:10}
.panel-right{z-index:0}

.border-center, .panel-border{
  position:relative;
}
.border-center:before {
    content: "";
    position: absolute;
    top: 50px;
    right: -2px;
    width: 100vw;
    height: 88.5%;
    border-right: 2px solid #c59171;
    border-bottom: 2px solid #c59171;
    border-radius: 0 0 50px 0;
    z-index: -1;
}


@media (min-width: 768px) {
  .panel-right .panel-border:before {
      content: "";
      position: absolute;
      top: 50px;
      left: -3px;
      width: 4px;
      border-right: 3px solid #ead8b8;
      z-index: 0;
      height: calc(100% - 50px);
  }
}
.panel-left .panel-border{
  border-radius: 0 50px 0 0;
}
.panel-right .panel-border{
  border-radius: 50px 0 0 0;
}

.panel-left .img_bg{
  border-radius: 0 25px 0 0;
}
.panel-right .img_bg{
  border-radius: 25px 0 0 0;
}

/* Arrière-plan avec ombre */
.bg-shadow {
  background-color: rgba(110, 87, 57, 0.4);
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
}

/* Images de fond */
.img_bg {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_left {
  background-image: url(../assets/amandine_paillasse_marqueterie_24_004.jpg);
  height: 100%;
  background-size: 120vh;
  background-position: 50% 0;
}

.img_right {
  background-image: url(../assets/amandine_paillasse_presse_24_006.jpg);
  height: 100%;
  background-size: 100vh;
  background-position: 50% 30%;
}

.social_network{position:relative;z-index:10}
.social_network_link{background:#ead8b8;padding:0 20px}
.social_network_icon{}

@media (max-width: 991px) {
  header {
      height: 150px;
  }
  .panel-right .img_bg{
    height:72vh;
  }
}

@media (max-width: 767px) {
  body *{
    font-size:0.9rem
  }
  #logo{
/*      width: 70%;*/
      max-width: 280px;
/*      height: auto;*/
  }
  header {
      height: 12vh;
      background-size:cover;
  }
  .border-center:before {
      top: -150px;
      right: 30px;
      width: 100vw;
      height: 129%;
  }
  .panel-right{
    margin-top: 30px;
  }
  .panel-right .panel-border{
    border:none;
    padding:0 30px;
  }
  .panel-right .img_bg {
    border-radius: 25px 25px 0 0;
  }
}
@media (max-width: 450px) {
  header {
      height: 10vh;
      background-size:cover;
  }
  .border-center:before {
    right:10px;
    border-radius:0;
    border-right:0;
  }
  .social_network_link{
    padding:0 10px;
  }
}