/* ─────────────────────────────────────────
   FOOD Truck – style.css
   Palette : rose du camion + marron “crêpe”
────────────────────────────────────────── */
:root {
  --rose:        #d63384;                /* accent rose principal */
  --rose-light:  #ff69b4;                /* rose clair (boutons) */
  --marron:      #8d6e63;                /* marron crêpe */
  --marron-dark: #5d4037;                /* marron foncé (hover) */
  --beige:       #fff8f1;                /* fond clair crème */
  --ombre:       rgba(141,110,99,0.30);  /* ombre douce */
}

/* ───────── Reset & Base ───────── */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins',sans-serif;
  background: linear-gradient(135deg, #ffd1dc, #ffe4f0);
  overflow-x:hidden;
  color:var(--marron);
  transition: transform 0.4s ease;
}

/* ───────── Vidéo plein écran ───────── */
#bgVideo{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-1;
  filter:brightness(0.7);
}

/* ───────── Header & Navbar ───────── */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,248,241,0.6);
  box-shadow:0 2px 6px var(--ombre);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background 0.3s ease;
}

.navbar{
  max-width:1200px;margin:auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2rem;
}

/* Logo animé (léger flottement) */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--marron);
  user-select: none;  /*not done yet*/
  animation: float 4s ease-in-out infinite;
  background: transparent; /*  a rectifier*/
  padding: 0.2rem 0.5rem; 
}

.logo img {
  height: 60px ;
  width: auto;
  border-radius: 30px 30px ;
  box-shadow: #8d6e63;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)); /* optionnel */
}
.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Liens de navigation */
.nav-links{
  display:flex;gap:1.5rem;list-style:none;
}

.nav-links a{
  position:relative;
  text-decoration:none;font-weight:500;
  color:var(--marron);
  transition:color 0.3s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--rose);
  transition:width 0.3s ease;
}

.nav-links a:hover{
  color:var(--rose);
}

.nav-links a:hover::after{
  width:100%;
}

/* Boutons génériques */
.btn{
  background:var(--rose-light);color:#fff;
  border:none;padding:0.5rem 1rem;
  border-radius:25px;font-weight:600;
  cursor:pointer;
  transition:background 0.3s,transform 0.2s;
}

.btn:hover{
  background:var(--rose);
  transform:translateY(-2px);
  box-shadow:0 4px 6px var(--ombre);
}


.accueil-text {
  padding: 4rem 2rem;
  text-align: center;
 
  backdrop-filter: blur(4px);
  color: var(--marron);
  animation: slideIn 0.5s ease-in-out;
}

.accueil-text h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--beige);
}

.accueil-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color:  var(--beige);
}

/* ───────── Hamburger (mobile) ───────── */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;transition:transform 0.3s;
}

.hamburger div{
  width:25px;height:3px;
  background:var(--marron);
  transition:all 0.3s ease;
}

/* Transition “hamburger → croix” */
.hamburger.open div:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}
.hamburger.open div:nth-child(2){opacity:0;}
.hamburger.open div:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

/* ───────── Animations & media queries ───────── */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes slideIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}

/* Mobile : menu coulissant */
@media (max-width:768px){
  .nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:70px;
    right:20px;
    background:rgba(255,248,241,0.95);
    box-shadow:0 4px 8px var(--ombre);
    padding:1rem 1.5rem;
    border-radius:10px;
    transform-origin:top right;
  }
  .nav-links.active{
    display:flex;
    animation:slideIn 0.3s ease forwards;
  }
  .hamburger{display:flex;}
  /* cache la barre de défilement si trop longue */
  .nav-links::-webkit-scrollbar{display:none;}
}

/*_______________________________a_propos___________________________________*/




.a_propos {
  position: relative;
  padding: 4rem 2rem;
  background: rgba(255, 248, 241, 0.9);
  backdrop-filter: blur(6px);
  color: var(--marron);
  animation: slideIn 0.5s ease-in-out;
  overflow: hidden; /* pour contenir le pseudo-élément */
}

.a_propos::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10%; /* décalé légèrement à droite */
  width: 60%;
  height: 100%;
  background-image: url("Images/Remplace.jpg");
 
  background-position: center;
  border-top-left-radius: 50% 100%;
  border-bottom-left-radius: 50% 100%;
  opacity: 0.3; /* pour que le texte reste visible */
  z-index: 0;
}

/* Pour que le texte soit au-dessus de l'image */
.a_propos .container {
  position: relative;
  z-index: 1;
}


.a_propos h1 {
  font-size: 2.5rem;
  color: var(--rose);
  text-align: center;
  margin-bottom: 2rem;
}

.a_propos h2 {
  font-size: 1.8rem;
  margin-top: 2rem;
  color: var(--marron-dark);
}

.a_propos p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-top: 1rem;
}

.a_propos ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.a_propos li {
  padding: 0.5rem 0;
  font-size: 1.05rem;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.a_propos .conclusion {
  margin-top: 2rem;
  font-style: italic;
  text-align: center;
  font-weight: 500;
  color: var(--rose);
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}



/*_________________________________menu_____________________________________*/

.hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

/* Supprime le soulignement des liens */
a {
  text-decoration: none;
  color: inherit;
}


/* Transition de page vers le blanc */
.page-transition {
  background: linear-gradient(135deg, #ffe4f0, #fff8f1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-transition img {
  width: 80px;
  animation: zoomIn 0.5s ease forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}




.card {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}

.categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 40px 0;
}

.category-card, .card {
  background-color: rgba(255, 255, 255, 0.85);
  color: #222;
  backdrop-filter: blur(5px);
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  width: 90vw;
  max-width: 1000px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover, .card:hover {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

/* Images personnalisées */
#sucre {
  background-image: url("Images/immaaaaaaage.png");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

#sale {
  background-image: url("Images/Receptek 🍽️ _ Facebook.jpeg");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

#boisson {
  background-image: url("Images/Smoothie Delight A Culinary Visual Experience _ Premium AI-generated image.jpeg");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

#Confiserie {
  background-image: url("Images/maybe.jpeg");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

#glace{
  background-image: url("Images/gggg.jpeg");
 background-size: cover;
  background-position: center;
  
  color: white;
  text-shadow: 1px 1px 2px #000;
}
/*__________________________________sucre*/
   body {
      opacity: 0;
      animation: fadeIn 1s ease forwards;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }

    .sucre-section {
      display: flex;
      flex-direction:row;
      gap: 40px;
      padding: 40px 20px;
      max-width: 1000px;
      margin: auto;
    }

    @media (max-width: 768px) {
   .sucre-section {
    flex-direction: column;
    }
    }

    .sucre-card:hover{
      transform: scale(1.1);
       animation: fadeIn 1s ease forwards;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .sucre-card {
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .sucre-card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
    }

    .sucre-content {
      padding: 20px;
    }

    .sucre-content h2 {
      margin-top: 0;
      font-size: 1.8em;
      color: #7a2d18;
    }

    .sucre-content p {
      margin: 5px 0;
      line-height: 1.5;
    }

    .sucre-content .prix {
      margin-top: 15px;
    }

    .sucre-content .prix p {
      margin: 3px 0;
      color: #444;
    }

    .footer-message {
      text-align: center;
      font-size: 1.8em;
      padding: 20px;
      color: #555;
      font-size: 0.95em;
       line-height: 1.5;
     
}


/*____________________________________salè*/
/* Container général */
.cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 20px;
  max-width: 900px;
  margin: 10px auto;
}

/* Style des éléments de menu */
.cont a {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 100px 20px;
  font-size: 1.6rem;
  text-align: center;
  color: #222;
  font-weight: bold;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Hover : zoom + autres floutés */
.cont:hover a {
  filter: blur(3px) brightness(0.8);
  transform: scale(0.95);
 
}
.cont a:hover {
  filter: none !important;
  transform: scale(1.08);
  z-index: 2;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Responsive : une colonne sur petits écrans */
@media (max-width: 600px) {
  .cont {
    grid-template-columns: 1fr;
  }
}

#item1 {
   background-image: url("Images/couscous.jpeg");
   background-size: cover;
   background-position: center; 
  color: white; 
  text-shadow: 1px 1px 2px black;
}

#item2 { 
  background-image: url("Images/tajine.jpeg");
  background-size: cover; 
  background-position: center;
  color: white; 
  text-shadow: 1px 1px 2px black; 
}

#item3 {
   background-image: url("Images/rollup.jpeg");
   background-size: cover;
   background-position: center; 
   color: white;
   text-shadow: 1px 1px 2px black; 
  }

#item4 {
   background-image: url("Images/galette.jpeg");
   background-size: cover;
   background-position: center;
   color: white;
   text-shadow: 1px 1px 2px black;
   }

#bc{
   background-image: url("Images/bc.jpeg");
   background-size: cover;
   background-position: center;
   color: white;
   text-shadow: 1px 1px 2px black;
   }



#bf{
 background-image: url("Images/bff.jpeg");
   background-size: cover;
   background-position: center;
   color: white;
   text-shadow: 1px 1px 2px black;
   }

/*__________________________Couscous*/

.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px 20px;
  gap: 20px;
}



.com {
text-align: center;
padding-top: 20px;
}

.card {
  flex: 0 0 auto;
  width: 280px;
  height: 380px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  scroll-snap-align: start;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card .overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
  padding: 20px;
  border-radius: 0 0 20px 20px;
}

.card .overlay h3 {
  font-size: 1.4rem;
  margin: 0;
}

.card .overlay p {
  font-size: 1.2rem;
  margin-top: 5px;
}

@media (max-width: 600px) {
  .horizontal-scroll {
    padding: 70px;
    margin-left: 15px ;
    gap: 16px;
  }

  .card {
    width: 90vw;
    height: 500px;
    border-radius: 16px;
  }

  .card .overlay {
    padding: 16px;
    border-radius: 0 0 16px 16px;
  }

  .card .overlay h3 {
    font-size: 1.5rem;
  }

  .card .overlay p {
    font-size: 1.2rem;
  }
}
/***** le swap */
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 30px 20px;
  gap: 20px;
}

/*________________________wrap*/
.rollup h2 {
margin-left: 30px;
margin-top: 10px;
}

/*________________________glace*/
#vf{
  background-image: url('Images/vf.jpeg');
  background-size:cover;
   background-position: center;
  
}


/* _______________________contact______________ */

.contact body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background: #fffdf7;
  color: #333;
}

.contact-hero {
  text-align: center;
  background: linear-gradient(135deg, #d7365b, #ffe4f0);
  padding: 60px 20px;
  color: #fff;
  animation: fadeInDown 1s ease-out;
}

.contact-hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.contact-hero p {
  font-size: 1.2rem;
}

.truck-info {
  padding: 40px 20px;
  background: #fff;
  text-align: center;
}

.locations {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  align-items: center;
}

.location-card {
  background: #fff6e0;
  border: 2px solid #ef46b4;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.location-card:hover {
  transform: scale(1.05);
}

.contact-form-section {
  background: #fee7fd;
  padding: 60px 20px;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
  padding: 15px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.contact-form button {
  padding: 15px;
  background: #e94a9f;
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: #f38bdc;
}

/* Animations */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media screen and (min-width: 768px) {
  .locations {
    flex-direction: row;
    justify-content: center;
  }
}

/* Avant que la section apparaisse */
.hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

/* Quand elle devient visible */
.visible {
  opacity: 1;
  transform: translateY(0);
}