/* ================= DESIGN TOKENS ================= */

@font-face  {
  font-family : 'Janda';
  src: url("./fonts/JandaManateeSolid.woff") format("woff"),
       url("./fonts/JandaManateeSolid.woff2") format("woff2");
  font-weight : normal;
  font-style : normal;
  font-display: swap;
}

@font-face  {
  font-family : 'Gilroy-Medium';
  src: url("./fonts/Gilroy-Medium.woff") format("woff"),
       url("./fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight : normal;
  font-style : normal;
  font-display: swap;
}

@font-face  {
  font-family : 'Gilroy-Regular';
  src: url("./fonts/Gilroy-Regular.woff") format("woff"),
       url("./fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight : normal;
  font-style : normal;
  font-display: swap;
}

@font-face  {
  font-family : 'Gilroy-Thin';
  src: url("./fonts/Gilroy-Thin.woff") format("woff"),
       url("./fonts/Gilroy-Thin.woff2") format("woff2");
  font-weight : normal;
  font-style : normal;
  font-display: swap;
}

:root {
  --color-yellow: #FFE701;
  --color-dark: #707070;
  --color-white: #ffffff;

  --font-main-medium: 'Gilroy-Medium', sans-serif;
  --font-main-regular: 'Gilroy-Regular', sans-serif;
  --font-main-thin: 'Gilroy-Thin', sans-serif;
  --font-title: 'Janda', cursive;


  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
}



/* ================= RESET ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body {
  font-family: var(--font-main-regular);
  background-color: var(--color-yellow);
  color: var(--color-dark);
  overflow: hidden;
}

/* ================= MAIN ================= */

main {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  padding: 40px 80px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.shape-decor-d {
  position: absolute;
  top: 0;
  right: -100px;
  z-index: -1;
  height: 100vh;
}

/* ================= HEADER SECTION ================= */

header img {
  max-width: 10vw;
  height: auto;
  object-fit: cover;
}

/* ================= HERO SECTION ================= */

.hero {
  display: flex;
  align-items: center;
}

.hero-text {
  width: 50vw;
}

.hero-text h1 {
  font-family: var(--font-title);
  font-size: clamp(2.3rem, 6vw, 7rem);
  margin-bottom: 20px;
  letter-spacing: 1.5px;
}


/* Effet Slide & Fade pour tous les textes importants */
.slide-fade-in {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards;
}
.slide-fade-in-2 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.8s forwards;
}
.slide-fade-in-3 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 1.1s forwards;
}
.slide-fade-in-4 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 1.4s forwards;
}
.slide-fade-in-5 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 1.6s forwards;
}
.slide-fade-in-6 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 1.8s forwards;
}
.slide-fade-in-7 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 2.0s forwards;
}
.slide-fade-in-8 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 2.2s forwards;
}
.slide-fade-in-9 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 2.4s forwards;
}
.slide-fade-in-10 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 2.6s forwards;
}
.slide-fade-in-11 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 2.8s forwards;
}
.slide-fade-in-12 {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.23, 1, 0.32, 1) 3.0s forwards;
}

@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-text p {
  font-family: var(--font-main-regular);
  font-size: clamp(1.3rem, 4vw, 3rem);
  margin-bottom: 30px;
}

.hero-image {
  width: 50vw;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  /* aspect-ratio: 1 / 1; */
  transform: translateX(10%);
  opacity: 0;
}

/* Animation flottante douce pour l'image du kebab */
.kebab-anim {
  animation: slideInFromRight 1.5s ease-in-out 0.4s forwards, floatKebab 2.5s ease-in-out 2s infinite;
}

@keyframes floatKebab {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(1.04);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

/* Animation slide from right douce pour l'image du kebab */
@keyframes slideInFromRight {

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ================= DELIVERY LIST ================= */

.delivery {
  font-family: var(--font-main-regular);
  width: 50vw;
}

.delivery h2 {
  font-size: clamp(1rem, 3vw, 2rem);
  margin-bottom: 20px;
}

.delivery-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.delivery-list span {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(0.7rem, 1.3vw, 2rem);
}

.zone {
  font-family: var(--font-main-medium);
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
  body { 
    overflow: auto;
  }
  main {
    padding: 20px 40px;
    overflow: hidden;
  }

  header { 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16vh;
    padding: 8px;
  }

  header img {
    max-width: 35vw;
    height: auto;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-text {
    width: fit-content;
  }

  .hero-text h1 { 
    margin-bottom: 4px;
  }

  .hero-text p {
    margin-bottom: 4px;
  }

  .hero-image {
    width: 75vw;
    margin : auto;
  }


  .delivery {
    width: 100%;
  }

  .delivery h2 {
    margin-bottom: 4px;
  }

  .delivery-list {
    flex-direction: column;
    gap: 8px;
  }

  .shape-decor-d {
    display: none;
  }

  .shape-decor-m {
    position: absolute;
    bottom: -25vw;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
  }
  
}

/* ================= TABLET / IPAD ================= */

@media (min-width: 769px) and (max-width: 1024px) {
  body { 
    overflow: auto;
  }
  main {
    padding: 20px 40px;
  }

  header { 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16vh;
    padding: 8px;
  }

  header img {
    max-width: 35vw;
    height: auto;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-text {
    width: fit-content;
  }

  .hero-text h1 { 
    margin-bottom: 4px;
  }

  .hero-text p {
    margin-bottom: 4px;
  }

  .hero-image {
    width: 60vw;
    margin : auto;
  }


  .delivery {
    width: 100%;

  }

  .delivery h2 {
    margin-bottom: 4px;
  }

  .delivery-list {
    flex-direction: column;
    gap: 8px;
  }

  .shape-decor-d {
    display: none;
  }

  .shape-decor-m {
    position: absolute;
    bottom: -10vw;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
  }
}