/* ==== Fonts ==== */
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.old-standard-tt-regular {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: normal;
}

.old-standard-tt-bold {
  font-family: "Old Standard TT", serif;
  font-weight: 700;
  font-style: normal;
}

.old-standard-tt-regular-italic {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: italic;
}


.raleway-light {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/* ==== Colors ==== */
:root{
  --black: #252323;
  --white: #F5F1ED;
  --light: #DAD2BC;
  --beige: #A99985;
  --slate: #70798C;

/* ====  Variables ==== */
  --radius:2rem;
  --smallRadius:5px;
  --padding:.5rem;
  --borderThickness:1rem;
  --gap:0;
  --tornHeight:8px;
  --max-container-width:1200px;
  --margin:150px;
  --hoverPicturesScale:0.95;
}

.black{
  background-color: var(--black);
  color: var(--light);
}

.slate{
  background-color: var(--slate);
  color: var(--white);
}

/*==== Global ====*/
*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin:0;
  background: var(--white);
  font-family: "Old Standard TT", serif !important;
  font-optical-sizing: auto;
  font-style:normal;
  color: var(--black);
}

header{

}

.logo{
  display: block;
  a{
    color: var(--slate);
  }

  a:hover{
    color: var(--white);
    >svg{
      fill: var(--white);
    }
  }

  svg {
    fill: var(--slate);
    transition: fill .8s;
    height: 5rem;
    line-height: 1;
  }


  --gap:1rem;

  h1{
    margin: 0 !important;
  }
}

section{
    padding: 2rem;
}



#recherche{
  box-shadow:
    inset 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
}

input{
  background-color: var(--beige);
  border-radius: var(--radius);
  color: var(--white);
  border: none;
  padding: 1rem;
  margin: 1rem;
  border: inset 2px var(--light);

}

input:active{
  border: inset 4px var(--white);
  box-shadow:
    inset 7px 6px 6px 2px rgba(0, 0, 0, 0.13);
  transition: box-shadow .8s;
}
label{
  display: none;
}

figure{
  margin: 0px;
  line-height: 0px;
}

figure > a {
  padding: 0px;
}

figcaption{
  line-height: normal;
}


.submit{
  margin-left: 0px;
}

#recherche{
  width: 50vw;

}

h1{
  margin: 0;
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 2.5rem;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  --gap: 1rem;
}

a{
  text-decoration: none;
  font-weight: 500;
  color: var(--beige);
  border-radius: var(--radius);
  padding: calc(var(--radius) / 2);
  transition: background-color .8s, color .8s;
}

.thumbnail a, .gallery a{
    padding: 0;
}

a:hover{
  background-color: var(--beige);
  color: var(--white);
  transition: background-color .1s, color .1s;
}

nav, .socials{

  --gap:2rem;

  ul, ul li a{
    padding: 1rem;
    border-radius: var(--radius);
    font-family:"Raleway", sans-serif !important;
    font-weight: 200;
  }

}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.thumbnail > li, .galerie > li {
  border-radius: 5px;
  overflow: hidden;
  border-bottom-right-radius: var(--radius);
  transform: rotate(2deg) scale(var(--hoverPicturesScale));

}

.thumbnail > li, .galerie > li, .discover > li {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  font-size: 0;
  transition: border-radius 1s, transform .5s, box-shadow .5s;
}

.thumbnail > li:nth-of-type(odd), .galerie > li:nth-of-type(odd) {
    transform: rotate(-1deg)  scale(var(--hoverPicturesScale));
  }

.thumbnail > li:hover, .discover > li:hover, .galerie > li:hover{
  transform: rotate(0deg);
  border-radius: var(--smallRadius);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.socials{
  --gap:0;
}

.thumbnail, .galerie, .discover, .image{
  position: relative;
}

.thumbnail img, .galerie img{
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.thumbnail-title{
  position: absolute;
  background-color: hsl(from var(--black) h s l / .5);
  color: var(--white);
  font-family: "Raleway", sans-serif;
  font-size: 1.5rem;
  border-bottom-right-radius: var(--radius);
  padding: 15px;
  padding-top: 5px;
  padding-left: 5px;
  top:0px;
}


.galerie-details{
  position: absolute;
  background-color:  hsl(from var(--white) h s l / .2);
  color:var(--black);
  z-index: 10;
  bottom: 0px;
  text-align: center;
  width: 100%;
  padding: 10px;
  padding-bottom: calc(var(--radius)/2);
  padding-right: var(--radius);
}

.galerie{
  --gap:3px;
  margin: 0 auto;
}

.galerie > li{
    min-width: 300px;
    max-width: min(23%, 500px);
}

.discover img{
  width: 100%;
  height: auto;
}

.discover > li {
  transform: scale(0.98);
}

.image img{
  max-width: 100%;
  max-height: 100%;
  max-height: 100svh;
  height: auto;
}

.image-details{
  flex-grow: 1;
  min-height: 100%;
  min-height: 100svh;
}

.infos{
  list-style: circle;
  display: block;
  margin: 1rem;
  a{
    display: block;
    padding: .5rem;
  }
}

/* ==== Utils ==== */
.contained{
  max-width: var(--max-container-width);
  margin: 0 auto;
  padding-top: var(--padding);
  padding-bottom: var(--padding);

}

.grid-two{
  /*display: grid;
  grid-template-columns: 3fr 1fr;*/
  padding: 0px;
}

@media(max-width:1200px){
  .grid-two{
    flex-direction: column;
  }
  .image-details{
    min-height: 0;
    width: 100%;
  }
}

.flex{
  display: flex;
  gap: var(--gap, 1rem);
  align-items: center;
  flex-wrap: nowrap;
}

.container {
  margin: 0 auto;
  max-width: var(--max-container-width);
  width: 90%;
  padding-left: 1rem;
  padding-right: 1rem;
}


.row{
  flex-flow: row wrap;
  flex-direction: row;
}

.reverse-rows{
  flex-direction: row-reverse;
}

.col{
  flex-flow: column;
}

.spread{
  justify-content: space-between;
  flex-wrap: wrap;

}

.separate{
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.center, .pagination-items{
  align-items: center;
  align-content: center;
  justify-content:center;
  text-align: center;
}

.vcenter{
  height: 100%;
}

.wrap{
  flex-wrap: wrap !important;
}

.no-gap{
  --gap:0px;
}

.no-padding{
  padding: 0px;
}

.stretch{
  align-items: stretch;
  justify-content: center;
}

.top-gap{
  margin-top: 5rem;
}

.gapped{
  --gap:1rem;
}