/* Global Styles */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'HelveticaLt';
  src: url('../assets/fonts/HelveticaLt.ttf');
}

@font-face {
  font-family: 'atelier';
  src: url('../assets/fonts/atelier.woff2');
}

:root {
  /* Font Size */
  --header1: calc(2rem + 1vw);
  --header2: calc(2.5rem + 1vw);
  --header3: calc(3rem + 1vw);
  --header4: calc(3.5rem + 1vw);
  --header5: calc(4.5rem + 1vw);
  --header6: calc(1rem + 1vw);
  --logo: calc(2rem + 1vw);
  --menu: calc(0.7rem + 1vw);
  --sousMenu: calc(0.3rem + 1vw);
  --liens: calc(1rem + 1vw);
  --title: calc(1.1rem + 1vw);
  --button: calc(0.8rem + 1vw);
  --paragraphe: calc(1.5rem + 1vw);
  --cgu: calc(0.6rem + 1vw);
  --big: calc(6rem + 1vw);
  /* Color */
  --specialColor: #159499;
  --hoverColor: #5eb1cb;
  --couleurPrincipale: #20a9b0;
  --couleurSecondaire: #f0dc26;
  --azulText: #1c979c;
  --yellowText: #f5d422;
  --buttonColor: #189fb4;
  --spanBurger: #525252;
  --backgroundColorBurger: #414141;
  /* Viewport */
  --res: calc(0.45 * 10vmin);
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

h1 {
  font-size: var(--logo);
  font-family: 'atelier', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

h2 {
  font-size: var(--header1);
  font-family: 'atelier', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

h3 {
  font-size: var(--header3);
  font-family: 'atelier', sans-serif;
  font-weight: 400;
}

h4,
h5,
h6 {
  font-size: var(--header1);
  font-family: 'atelier', sans-serif;
  font-weight: 400;
}

li,
label,
input,
p {
  font-size: var(--paragraphe);
}

ul {
  list-style-type: none;
}

a {
  font-size: var(--liens);
  color: #fff;
  text-decoration: none;
}

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

/* a:link, a:visited, a:focus, a:active {
  color: yellow;
} */

/* .active:not(h1, img) {
  border: 0 solid var(--couleurSecondaire);
  border-bottom-width: thin;
} */

.typed-cursor {
  padding-left: 5px;
  color: #fff;
}

button {
  display: block;
  padding: 1rem;
  background-color: var(--buttonColor);
  border-radius: 6px;
  border: .3px solid #f1f1f1f1;
  overflow: hidden;
  cursor: pointer;
  transition: all ease-in 0.5s;
}

button a {
  font-size: var(--button);
  font-family: 'atelier', sans-serif;
  color: #fff;
  transition: all ease-out 0.3s;
}

button::after, button::before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  left: 25%;
  transform: skew(90deg) translate(-50%, -50%);
  inset: 50%;
  background-color: var(--hoverColor);
  transition: all ease-out .5s;
  z-index: -1;
 }

 button::before {
  top: -50%;
  left: -25%;
  transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
 }

 button:hover::before {
  transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
 }

 button:hover::after {
  transform: skew(45deg) translate(-50%, -50%);
 }

 button a:hover {
  color: var(--couleurSecondaire);
 }

 button:active {
  filter: brightness(.7);
  transform: scale(.98);
 }

[class*='reveal-'] {
  transform: translateY(30px);
  opacity: 0;
}

.reveal-visible {
  transform: translateY(0);
  opacity: 1;
  transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-2 {
  transition-delay: 0.1s;
}

.reveal-3 {
  transition-delay: 0.2s;
}

.reveal-4 {
  transition-delay: 0.3s;
}

.reveal-5 {
  transition-delay: 0.4s;
}

.reveal-6 {
  transition-delay: 0.5s;
}

.reveal-7 {
  transition-delay: 0.6s;
}

/* Fin du Global Styles */

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

/* Barre de Progression */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0.5rem;
  background-color: var(--couleurSecondaire);
  z-index: 9999; /* Peut-être important si le menu se met en position fixe */
}

/* Menu Navigation */
.main-head {
  position: relative;
  top: 0px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  color: #fff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

nav {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1.5rem;
}

#logo {
  flex: 1 1 20rem;
  margin-left: 5rem;
  color: var(--buttonColor);
}

nav ul {
  display: flex;
  flex: 1 1 60rem;
}

nav ul li {
  position: relative;
  flex: 1 1 auto;
  text-align: center;
}

nav ul li a {
  font-size: var(--menu);
  font-family: 'HelveticaLt', sans-serif;
  color: var(--buttonColor);
}

nav ul li a:hover {
  color: var(--hoverColor);
}

nav ul li:nth-of-type(1) a:not(.sub-menu *) {
  color: var(--yellowText);
}

.sub-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.6rem;
  border: 0.2px solid var(--hoverColor);
  transform: scale(0);
  transform-origin: center center;
  transition: all 300ms ease-in-out;
  z-index: 9999;
}

.sub-menu::before {
  position: absolute;
  top: -1rem;
  left: 45%;
  content: '';
  border-top: 0px solid var(--hoverColor);
  border-bottom: 1rem solid var(--hoverColor);
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}

nav > ul li:hover .sub-menu {
  display: flex;
  flex-flow: column wrap;
}

.sub-menu li {
  padding: 0rem 1rem;
  line-height: 3rem;
  color: var(--azulText);
  background-color: #fff;
  transform: scale(0);
  transform-origin: top center;
  transition: all 300ms ease-in-out;
  z-index: 9000;
  cursor: pointer;
}

.sub-menu li a {
  font-size: var(--sousMenu);
}

.sub-menu li a:hover {
  color: var(--spanBurger);
}

nav ul > li:hover .sub-menu {
  transform: scale(1);
}

nav ul > li:hover .sub-menu li {
  transform: scale(1);
}

/* Section Présentation */
#presentation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  min-height: 70vh;
  margin: auto;
  padding-top: 3%;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0.1), transparent),
    var(--couleurPrincipale);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.presentation-image {
  display: flex;
  justify-content: center;
}

.presentation-image span {
  display: flex;
  align-items: flex-start;
  font-size: var(--menu);
  font-family: 'atelier', sans-serif;
  letter-spacing: 0.1rem;
  color: var(--couleurSecondaire);
}

.presentation-image span:nth-of-type(2) {
  padding-left: 1rem;
}

.presentation-image img {
  width: 100%;
  max-width: 14%;
  object-fit: cover;
}

#presentation .type-writer {
  font-size: var(--big);
  font-family: 'atelier', sans-serif;
  font-weight: normal;
  display: inline;
}

#presentation h3 {
  padding: 5rem;
  color: var(--couleurSecondaire);
}

.btn-presentation {
  margin-bottom: 5%;
}

/* Section Collection */
#collection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.collection-head {
  width: 95%;
  margin: 2rem auto 1rem;
  padding: 1rem;
  color: var(--azulText);
  background-color: var(--couleurSecondaire);
}

.collection-head h2 {
  text-align: center;
  font-size: var(--paragraphe);
}

#owl-demo {
  width: 840px;
  max-width: 100%;
}

#owl-demo .item {
  margin: 3px;
  overflow: hidden;
}

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  transform: scale(1);
  transition: transform ease 0.5s;
  cursor: pointer;
}

#owl-demo .item img:hover {
  transform: scale(1.5);
}

.cards {
  flex-direction: row;
  flex-wrap: wrap;
  width: 70%;
  min-height: 70vh;
  margin: auto;
}

.card {
  flex: 1 1 25rem;
  min-height: 60vh;
  /* margin: 0 5rem; */
  text-align: center;
  background-image: radial-gradient(
    circle,
    rgba(24, 159, 180, 0),
    rgba(24, 159, 180, 1)
  );
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1);
}

.card-icon {
  padding: 2rem;
  background-color: var(--buttonColor);
}

.card-icon h4 {
  padding: 1rem;
  color: var(--couleurSecondaire);
}

.collection-image {
  padding: 5rem;
  transition: all ease 0.5s;
}

.collection-image img {
  width: 20%;
  height: 20%;
  max-width: 30%;
  object-fit: cover;
}

.collection-image img:nth-of-type(2) {
  width: 26%;
}

.btn-collection {
  margin: 2rem auto 3rem;
}

.btn-collection a {
  color: #fff;
}

/* Section Work */
#work {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0rem auto 10rem;
}

.work-head {
  width: 100%;
}

.work-head h2:before {
  content: '';
  position: absolute;
  top: 0;
  width: 65px;
  height: 5px;
  background-color: var(--couleurSecondaire);
}

.work-head h2 {
  margin: 5% auto 0;
  padding: 1rem;
  text-align: center;
  font-family: 'atelier', sans-serif;
  text-transform: uppercase;
  color: var(--buttonColor);
}

.work {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.work-text {
  flex: 1 1 90rem;
}

.work-text p {
  padding: 0rem 2rem;
  font-size: var(--liens);
  line-height: 1.25;
  text-indent: 2rem;
  color: var(--azulText);
}

.work-text p::first-letter {
  font-size: var(--header2);
  font-weight: bold;
  color: var(--couleurSecondaire);
}

.work-image {
  flex: 1 1 auto;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  shape-outside: content-box;
  transition: all ease-in 0.5s;
}

.btn-visit {
  margin: 0rem auto;
}

/* Section Contact */
#contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  min-height: 100vh;
  background-color: var(--couleurPrincipale);
}

.form-wrapper {
  flex: 0 1 50rem;
  color: #fff;
}

.form-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-header h2 {
  padding: 2rem;
  text-transform: capitalize;
  letter-spacing: 2px;
}

.form-header p {
  font-size: var(--liens);
  font-family: 'atelier', sans-serif;
}

.form-header p:nth-of-type(2) {
  margin-left: 3.5rem;
}

.form-header p:nth-of-type(3) {
  margin: 2rem 0rem;
}

.form-header p i {
  margin-right: 1rem;
  font-size: var(--cgu);
  color: #181fa9;
}

.form-header a {
  color: var(--couleurSecondaire);
}

.form-header a:hover {
  color: var(--backgroundColorBurger);
}

.contact-logo {
  display: flex;
}

.contact-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-metier img {
  width: 30%;
}

/* Scroll To Top */
.scrollToTop {
  position: fixed;
  bottom: 0;
  right: 2rem;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 3rem;
  text-align: center;
  background-color: var(--buttonColor);
  color: #fff;
  border-radius: 50%;
  z-index: 9999;
  cursor: pointer;
  transition: all ease 1s;
  transform: translateY(100%);
}

.link {
  bottom: 2rem;
  transform: translateY(0%);
}

/* Footer */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 10vh;
  padding: 2rem 5%;
  background: rgba(19, 28, 39, 1);
  color: #fff;
}

footer h4 {
  flex: 1 1 20rem;
  font-size: var(--menu);
  color: #fff;
}

footer ul {
  display: flex;
  flex: 1 1 40rem;
  justify-content: space-around;
  list-style-type: none;
}

footer ul li a {
  font-size: var(--cgu);
  color: var(--azulText);
}

footer ul li a i {
  font-size: var(--liens);
}

footer ul li a:hover {
  color: #fff;
}