:root {
  --background-color: #f5f5f5;

  --color-titles: #71aa53;
  --color-suptitle: #1a4509;
  --color-text: #1f231e;
  --color-accent: #e4863a;
  --color-faded: #fae8d1;

  --main-font: "Chewy", system-ui, sans-serif;
  --second-font: "Source sans", system-ui, sans-serif;

  --font-size-h2: clamp(1.563rem, 0.9528rem + 3.0508vw, 3.813rem);
  --font-size-h3: clamp(1.563rem, 1.3257rem + 1.1864vw, 2.438rem);
  --font-size-h4: clamp(1.25rem, 0.7754rem + 2.3729vw, 3rem);
  --font-size-suptitle: clamp(1rem, 0.9322rem + 0.339vw, 1.25rem);
  --font-size-p: clamp(0.75rem, 0.6822rem + 0.339vw, 1rem);

  --border-radius-1: 40px;
  --border-radius-2: clamp(1.25rem, 0.911rem + 1.6949vw, 2.5rem);
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! fonts !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@font-face {
  font-family: "Chewy";
  src: url(../assets/fonts/chewy-latin-400-normal.woff2)
    format("woff2-variations");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source sans";
  src: url(../assets/fonts/source-sans-3-variable.woff2) format("woff2");
  src: url(../assets/fonts/source-sans-3-variable.woff2)
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source sans";
  src: url(../assets/fonts/source-sans-3-italic-variable.woff2) format("woff2");
  src: url(../assets/fonts/source-sans-3-italic-variable.woff2)
    format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! header et html !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

html {
  font-family: var(--second-font);
}

*,
*::before,
*::after {
  margin-block-start: 0;
}

body {
  margin: 0;
  padding: 0;
  background-image: url(../assets/img/photos/artwork/background-paper.jpeg);
  background-repeat: repeat-y;
  background-size: 100% auto;

  font-family: var(--second-font);
  font-size: var(--font-size-p);
  color: #454844;
  line-height: 1.5;
}

.section {
  --section-padding: clamp(1.688rem, 1.2983rem + 1.9485vw, 3.125rem);
  padding-block: var(--section-padding);
}

.container {
  --container-max-size: 1500px;
  --container-padding: clamp(1.75rem, -0.6229rem + 11.8644vw, 10.5rem);
  max-inline-size: var(--container-max-size);
  padding-inline: var(--container-padding);
}

a {
  text-decoration: none;
  color: var(--color-accent);
}

.header-img {
  width: 100%;
}

.header-title {
  margin: 0;
  text-indent: -9999px;
}

.header-nav {
  justify-content: center;
  align-items: center;
}

.mainnav {
  list-style: none;
  margin: 0;
  padding: 0;

  padding-top: clamp(2.875rem, 2.0275rem + 4.2373vw, 6rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;

  @media (width>=750px) {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1rem, -2rem + 6.4vw, 4rem);
  }
}

.mainnav-link {
  display: block;
  font-family: var(--second-font);
  color: var(--color-accent);
  font-size: clamp(0.75rem, 0.6144rem + 0.678vw, 1.25rem);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  letter-spacing: 8%;

  background-color: var(--color-faded);
  padding-block: clamp(0.25rem, 0.0805rem + 0.8475vw, 0.875rem);
  padding-inline: clamp(1rem, 0.7288rem + 1.3559vw, 2rem);
  border: 0.1rem solid;
  border-color: #e4863a;
  border-radius: var(--border-radius-1);

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 105%;
  }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! intro !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.suptitle {
  color: #e4863a;
  font-size: var(--font-size-suptitle);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2;
  margin-block-end: 0;
}

.title2 {
  font-family: var(--main-font);
  color: #71aa53;
  font-size: var(--font-size-h2);
  line-height: 1.2;
  margin-block-end: 0.16em;
}

.lead {
  color: #1a4509;
  font-size: var(--font-size-suptitle);
  line-height: 1.2;
}

.intro {
  background-image: url(../assets/img/dessins/chara-sit.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;

  height: clamp(43.75rem, 35.3779rem + 41.8605vw, 55rem);

  @media (width>=750px) {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: baseline;
    height: clamp(43.75rem, 31.25rem + 26.6667vw, 56.25rem);
  }
}

.intro-text {
  @media (width>=750px) {
    width: clamp(20rem, 4.125rem + 33.8667vw, 35.875rem);
  }
}

.softwares {
  list-style: none;
  margin: 0;
  padding: 0;

  margin-block: 16px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  gap: 10px;

  @media (width>=750px) {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1rem, 0rem + 2.1333vw, 2rem);
  }
}

.fluidimg {
  width: 100%;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! digits !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.digits {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 24px;

  @media (width>=750px) {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1rem, -13.75rem + 31.4667vw, 15.75rem);
  }
}

.digits-item {
  padding-inline: 1%;
  border-inline: solid;
  border-color: #454844;
  width: clamp(9.375rem, 7.0494rem + 11.6279vw, 12.5rem);
}

.digits-numbers {
  font-family: var(--second-font);
  font-size: clamp(3rem, 2.5254rem + 2.3729vw, 4.75rem);
  color: #e4863a;
  font-weight: 300;
  text-align: center;
  margin-block-end: 8px;
}

.digits-text {
  font-family: var(--second-font);
  font-size: var(--font-size-suptitle);
  color: #1a4509;
  text-transform: uppercase;
  text-align: center;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! artwork !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.artworktype {
  padding-block: clamp(1.938rem, 1.8534rem + 0.4231vw, 2.25rem);
}

.title-artwork {
  margin: 0;
  padding-block-end: 1.6rem;

  text-indent: -9999px;
  display: inline-block;
  inline-size: clamp(10.25rem, 7.5381rem + 13.5593vw, 20.25rem);
  block-size: clamp(2.8125rem, 2.1345rem + 3.3898vw, 5.3125rem);

  background-image: url(../assets/img/titre/artwork.png);
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#artwork {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.artworktype {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "gif" "txt";
  gap: 16px;

  @media (width >=750px) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    grid-template-areas: "gif txt";
    gap: clamp(1rem, -1.7372rem + 5.8394vw, 2rem);
  }

  @media (width >=1024px) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 5fr);
    grid-template-areas: "gif . txt";
  }
}

.artworktype-reversed {
  @media (width >=750px) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    grid-template-areas: "txt gif";
    gap: clamp(1rem, -1.7372rem + 5.8394vw, 2rem);
  }

  @media (width >=1024px) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 4fr);
    grid-template-areas: "txt . gif";
  }
}

.artworktype-image {
  grid-area: gif;

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 102%;
  }
}

.artworktype-text {
  grid-area: txt;
}

.title3 {
  font-family: var(--second-font);
  color: #1a4509;
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--font-size-h3);
  line-height: 1.2;

  margin-block-end: 0.24em;
}

.artcategories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.artcategories-item {
  font-family: var(--second-font);
  font-size: clamp(1rem, 0.8473rem + 0.7634vw, 1.563rem);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-top: 16px;
}

.artcategories-link {
  display: inline-block;
  padding-inline-start: clamp(1.5rem, 1.1949rem + 1.5254vw, 2.625rem);
  background-image: url(../assets/img/titre/star.png);
  background-repeat: no-repeat;
  background-size: clamp(1.25rem, 1.0805rem + 0.8475vw, 1.875rem);
  background-position: 0 0;

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 103%;
  }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! inspirations !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.container-full {
  --container-max-size: 1500;
  --container-padding: 0px;
  max-inline-size: var(--container-max-size);
  padding-inline: var(--container-padding);
}

.title-inspirations {
  margin: 0;
  text-indent: -9999px;
  display: inline-block;
  inline-size: clamp(13.9375rem, 10.2426rem + 18.4746vw, 27.5625rem);
  block-size: clamp(3.75rem, 2.7331rem + 5.0847vw, 7.5rem);

  background-image: url(../assets/img/titre/inspirations.png);
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#inspirations {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.slider {
  margin: 0;
  padding: 16px;
  list-style: none;

  display: grid;
  grid-template-columns: clamp(7.4375rem, 1.7595rem + 28.3898vw, 28.375rem);
  gap: clamp(0.75rem, 0.5466rem + 1.0169vw, 1.5rem);
  grid-auto-flow: column;
  grid-auto-columns: clamp(7.4375rem, 1.7595rem + 28.3898vw, 28.375rem);

  overflow-x: scroll;
  scrollbar-color: var(--color-accent) transparent;

  scroll-snap-type: x mandatory;
}

.slider-slide {
  align-self: center;
  scroll-snap-align: center;
}

.inspirations-img {
  width: 100%;
  border-radius: var(--border-radius-2);

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 102%;
  }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! contact !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.container-small {
  --container-max-size: 1500;
  --container-padding: clamp(1.75rem, -2.6568rem + 22.0339vw, 18rem);
  max-inline-size: var(--container-max-size);
  padding-inline: var(--container-padding);
}

.title-contact {
  margin: 0;
  padding-block-end: 3.2rem;

  text-indent: -9999px;
  display: inline-block;
  inline-size: clamp(9.1875rem, 6.7638rem + 12.1186vw, 18.125rem);
  block-size: clamp(2.8125rem, 2.1345rem + 3.3898vw, 5.3125rem);

  background-image: url(../assets/img/titre/contact.png);
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#contact {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.contact_illustrations {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.icone {
  margin-bottom: 10%;
}

.icone-img {
  width: clamp(3.75rem, 1.0381rem + 13.5593vw, 13.75rem);

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 103%;
  }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! footer !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.footer {
  border-top: 0.1rem solid;
  border-color: #1a4509;
  color: #1a4509;
}

.fluidimg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! other pages !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.title2big {
  font-size: clamp(3.5625rem, 2.9184rem + 3.2203vw, 5.9375rem);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding-block-start: 2.4rem;
}

.galery-text {
  width: clamp(16.5625rem, 7.393rem + 45.8475vw, 50.375rem);
}

.title4 {
  font-family: var(--second-font);
  color: var(--color-suptitle);
  font-size: var(--font-size-h4);
  font-weight: 400;
  text-transform: uppercase;

  margin-block-end: 0;
  line-height: 1;
}

.dates {
  color: #e4863a;
  font-size: var(--font-size-suptitle);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2;
  margin-block-end: 0.8rem;
}

.galery-1f {
  margin: 0;
  padding: 0;
  padding-block-start: 32px;

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.galery-2x1f {
  margin: 0;
  padding: 0;
  padding-block-start: 32px;

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;

  @media (width>=750px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
}

.galery-4fx6f {
  margin: 0;
  padding: 0;
  padding-block-start: 32px;

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;

  @media (width>=750px) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 16px;
  }
}

.galery-3x1f {
  margin: 0;
  padding: 0;
  padding-block-start: 32px;

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;

  @media (width>=750px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
}

.galery-7fx3f {
  margin: 0;
  padding: 0;
  padding-block-start: 32px;

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;

  @media (width>=750px) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 16px;
  }
}

.galery-item {
  align-self: center;
}

/*
<figcaption class="galery-caption">African mask - Material reference</figcaption>

.galery-caption {
  font-family: var(--second-font);
  color: var(--color-suptitle);
  text-align: center;
  font-size: 16px;

  opacity: 0;
  &:hover {
    opacity: 100%;
  }
}
*/

.bottom-gif {
  width: clamp(16.5rem, 13.2458rem + 16.2712vw, 28.5rem);
  margin: 0 auto;
  transition: scale 0.1s ease-out;
  &:hover {
    scale: 102%;
  }
}

.mb-link {
  padding-block-end: clamp(1rem, 0.4576rem + 2.7119vw, 3rem);
  align-items: center;

  transition: scale 0.1s ease-out;
  &:hover {
    scale: 103%;
  }
}

.others-music {
  height: clamp(40.625rem, 1.0901rem + 197.6744vw, 93.75rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;

  @media (width>=750px) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
  }
}