:root{
  --color-bg: #FFFADD;
  --color-bg-offset: #243713;
  --color-text: #243713;
  --color-text-offset: #FFFADD;
  --color-primary: #5D6D30;
  --color-secondary: #FFFADD;
  --color-tertiary: #243713;
  --color-shadow: rgba(36,55,19, 0.8);

}
@media(prefers-color-scheme: dark){
  :root{
    --color-bg: #243713;
    --color-bg-offset:#5D6D30;
    --color-text: #FFFADD;
    --color-text-offset: #FFFADD;
    --color-primary: #5D6D30;
    --color-secondary: #FFFADD;
    --color-tertiary: #243713;
    --color-shadow: rgba(255, 250, 221, 0.8)
  }
}

[data-theme="light"]{
  --color-bg: #FFFADD;
  --color-bg-offset: #243713;
  --color-text: #243713;
  --color-text-offset: #FFFADD;
  --color-primary: #5D6D30;
  --color-secondary: #FFFADD;
  --color-tertiary: #243713;
  --color-shadow: rgba(36,55,19, 0.8);

}
[data-theme="dark"]{
  --color-bg: #243713;
  --color-bg-offset:#5D6D30;
  --color-text: #FFFADD;
  --color-text-offset: #FFFADD ;
  --color-primary: #5D6D30;
  --color-secondary: #FFFADD;
  --color-tertiary: #243713;
  --color-shadow: rgba(255, 250, 221, 0.8);
}

body{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  line-height:1.5;
  margin: 0px;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}
::selection{
  background-color: var(--color-bg-offset);
  color: var(--color-text-offset);
}

.cursor {
  width:40px;
  height:40px;
  border:3px solid var(--color-text);
  border-radius:50%;
  background-color: transparent;
  backdrop-filter: blur(4px);
  position: absolute;
  box-shadow: 0px 0px 40px 0px var(--color-shadow);
  transition: all .1s linear; 
  pointer-events: none;
  z-index: 3000;
  display: none;
}

/* MOBILE FIRST */
.js-theme-trigger{
  padding: 10px 20px;
  background-color: var(--color-primary);
  border: none;
  color: var(--color-secondary);
  box-shadow: 0px 0px 40px 0px rgba(36, 55, 19, 0.8);
  cursor: pointer;
  position: fixed;
  font-size: 1.2rem;
  top: 0px;
  right: 0px;
  z-index: 10000;
}

.section{
  margin: 0px;
  width: 100%;
  transition: background-color 1s;
}
.section--first{
  position:relative;
  background: linear-gradient(rgba(36, 55, 19, 0.8), transparent), url(../images/cour/cour.webp);
  background-size: cover;
  background-position: center;
  color: var(--color-secondary);
  min-height: 50vh;
  z-index: 2000;
}
.section--presentation{
  background-image: url('../images/cour/cour.webp');
  background-size: cover;
  background-repeat: no-repeat;
}
.back-blur{
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(rgba(255, 250, 221, 0.8), rgba(255, 250, 221, 0.9))
}
[data-theme="dark"] .back-blur{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9))
}

.section--first .title:first-child{
  margin-top: 120px;
}
.absolute{
  poistion: absolute;
  top: 0;
  max-height: none;
}
.bg{
  background-color: var(--color-bg-offset);
  color: var(--color-text-offset);
}
img{
  max-width: 100%;
}
/* GRID */
.grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.grid > * {
  grid-column: 1 / -1;
}


/* EXCEPTION */
.full-width{
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  max-width: none;
}

/* Titre & text*/
.title{
  font-size: 3rem;
  text-align: left;
  margin-bottom: 0;
}
.title--medium{
  font-size: 2rem;
  color: var(--color-primary);
}
.title--small{
  font-size: 1rem;
  margin-top: 0px;
  color: var(--color-primary);
}
.title--header{
  color: var(--color-secondary);
  font-size: 1.5rem;
}
.bold{
  font-weight: 700;
}
.text-last{
  margin-bottom: 4rem;
}
.link{
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
}
.link:hover{
  text-decoration: underline;
}
.link:visited{
  text-decoration: underline;
  font-weight: 500;
}

.grid > p:first-of-type{
  margin-top: 6rem;
}
.first-text{
  margin-top: 6rem;
}
.second-text{
  margin-top: 0rem;
}

/* Big Button */
.button{
  box-sizing: border-box;
  text-decoration: none;
}
.button:after{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 1vw;
  right: 1vw;
  z-index: 1;
  background: url(../images/arrow-light.svg) 0 0 no-repeat;
  transform: rotate(-45deg);
}
.button--giant{
  width: calc(100% + 40px);
  height: 25vh;
  position: relative;
  left: -20px;
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
}
.button--primary{
  background-color: var(--color-primary);
  color: var(--color-secondary);
}
.button--secondary{
  background-color: var(--color-secondary);
  color: var(--color-tertiary);
}
.button--secondary:after{
  background: url(../images/arrow-dark.svg) 0 0 no-repeat;
}
.button--tertiary{
  background-color: var(--color-tertiary);
  color: var(--color-secondary);
}
.giant__title{
  font-size: 2rem;
}
.hidden{
  display: none;
}
.button--interview{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/int/int-1.webp);
  background-size: cover;
}
.button--interview:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/int/int-1.webp);
  background-size: cover;
}
.button--intcroquis{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/int-croquis/int-croquis-2.webp);
  background-size: cover;
}
.button--intcroquis:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/int-croquis/int-croquis-2.webp);
  background-size: cover;
}
.button--cour{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/cour/cour.webp);
  background-size: cover;
}
.button--cour:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/cour/cour.webp);
  background-size: cover;
}
.button--zones{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/cour-visuel.jpg);
  background-size: cover;
}
.button--zones:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/cour-visuel.jpg);
  background-size: cover;
}
.button--solutions{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/solutions/pique-nique.webp);
  background-size: cover;
}
.button--solutions:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/solutions/pique-nique.webp);
  background-size: cover;
}
.button--user{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/user/user-charlotte.webp);
  background-size: cover;
}
.button--user:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/user/user-charlotte.webp);
  background-size: cover;
}
.button--moodboard{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/moodboard/sites.webp);
  background-size: cover;
}
.button--moodboard:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/moodboard/sites.webp);
  background-size: cover;
}
.button--xd{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/xd.webp);
  background-size: cover;
}
.button--xd:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/xd.webp);
  background-size: cover;
}
.button--croquis{
  background: linear-gradient(rgba(36, 55, 19, 0.8), rgba(36, 55, 19, 0.9)), url(../images/croquis/plan1.webp);
  background-size: cover;
}
.button--croquis:hover{
  background: linear-gradient(rgba(36, 55, 19, 0.4), rgba(36, 55, 19, 0.5)), url(../images/croquis/plan1.webp);
  background-size: cover;
}


.image-btn{
  width: 100%;
}

.tfull-width-img{
    width: calc(100% + 40px);
    position: relative;
    left: -20px;
    max-width: none;
  }


/* TABLETTE */
@media (min-width: 730px){
  /* GRID */
  .grid{
    width: calc(100% - 40px);
    grid-template-columns: repeat(8, 1fr);
    column-gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .grid > * {
    grid-column: 1 / -1;
  }

  /* classe de grille pour tablette */
  .tgrid-demi-start{
    grid-column: 1 / 5;
  }
  .tgrid-demi-end{
    grid-column: 5 / -1;
  }

  

  /* Autre classe */
  
  .button--giant{
    width: calc(100% + 30px);
    left: -20px;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }
  .button:after{
    width: 60px;
    height: 60px;
  }

  .tfull-width{
    width: calc(100% + 40px);
    position: relative;
    left: -20px;
    max-width: none;
  }

  }
  
/* DESKTOP */
@media (min-width: 1000px){
  
  
  .cursor{
    display: block;
  }
  .section{
    min-height: 100vh;
  }
  .section--first{
    min-height: 40vh;
  }
  /* GRID */
  .grid{
    grid-template-columns: repeat(8, 1fr);
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
  }

.second-text{
  margin-top: 6rem;
}

  .grid > * {
    grid-column: 1 / 5;
  }
  .dgrid-demi-end{
    grid-column: 5 / -1;
  }
  .dgrid-demi-start{
    grid-column: 1 / 5;
  }
  .bg .grid > *{
    grid-column: 5 / -1;
  }
  .bg .dgrid-demi-end{
    grid-column: 1 / 5;
  }
  .dgrid-demi-middle{
    grid-column: 1 / 7;
  }
  .bg .dgrid-demi-start, .bg .button--giant{
    grid-column: 1 / 5;
    left: calc(-10% - 10px);
  }

  .dgrid-row3{
    grid-row: 3 / 4;
  }
  /* .second-text{
    margin-top: 6rem;
  } */
  .button--giant{
    width: calc(110% + 10px);
    height: 50vh;
    position: relative;
    top: 0;
    left: 0;
    max-width: none;
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .giant__title{
    font-size: 4rem;
  }
  .button:after{
    width: 80px;
    height: 80px;
    bottom: 2rem;
    right: 2rem;
  }
  .button .dgrid-demi-start{
    position: relative;
    left: -10%;
  }
  .dfull-width{
    width: calc(100% + 20%);
    position: relative;
    left: -20px;
    max-width: none;
  }
  .button--left{
    left: calc(-10px - 10%);
  }

  .button--first{
    grid-row-start: 1;
    position: absolute;
  }
  .button--second{
    grid-row-start: 1;
    position: absolute;
    margin-top: 50vh;
  }


  .image-btn{
  width: calc(100% + 80px);
  height: 50vh;
  position: relative;
  left: 0px;
  max-width: none;
  }
  .image-btn-full{
    width: 100%;
    height: auto
  }

  .image-btn--second{
    grid-row-start: 1;
    position: absolute;
    margin-top: 50vh;
  }
  .image-btn--left{
    left: calc(-10px - 10%);
    width: calc(100% + 80px);
  }
}


.section--footer{
  min-height: 2vh;
  padding: 20px;
  background-color: var(--color-bg-offset);
  box-sizing: border-box;
}
.dwt{
  width: 40px;
  fill: var(--color-text-offset);
}
.credits, .credits a {
  color: var(--color-text-offset);
}
.logo-dwt{
  content: none;
}
.subnav{
  list-style: none;
  padding: 0;
  margin: 0;
}
.subnav__el a{
  color: var(--color-text-offset);
  transition: all .6s;
  text-decoration: none;
}

.subnav__el:hover a{
  text-decoration: underline;
}