* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }

 body {
   font-family: Arial, sans-serif;
   background-color: #f8f8f8;
 }

 /* Style général de la navbar */
 .navbar {
   background: #F9c611;
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
   position: relative;
   z-index: 10;
 }

 .navbar-container {
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: space-between;
 }

 .navbar-logo img {
   width: 60px;
 }

 .navbar-links {
   display: flex;
   list-style: none;
   margin: 0;
   gap: 15px;
 }

 .navbar-links li {
   margin: 0;
 }

 .navbar-links a {
   color: #fff;
   text-decoration: none;
   padding: 5px 10px;
   transition: background 0.3s ease;
 }

 .navbar-links a:hover,
 .navbar-links a.active {
   background: #000;
   border-radius: 5px;
 }

 /* Bouton hamburger */
 .navbar-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   color: white;
   cursor: pointer;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .navbar-links {
     display: none;
     flex-direction: column;
     width: 100%;
     background-color: #F9c611;
     position: absolute;
     top: 60px;
     left: 0;
     padding: 10px 0;
   }

   .navbar-links.active {
     display: flex;
   }

   .navbar-links li {
     text-align: center;
     margin: 10px 0;
   }

   .navbar-toggle {
     display: block;
   }
 }

 /* Section des produits */
 /* Section des produits */
 .products {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   /* 4 colonnes maximum */
   gap: 20px;
   padding: 20px;
 }

 /* Carte produit */
 .product-card {
   background-color: #fff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }

 /* Image du produit */
 .product-info {
   padding: 5px;
   text-align: center;
   height: 40%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .product-info h3 {
   font-size: 14px;
   font-weight: 500;
   margin: 0;
   color: #333;
 }

 .price {
   font-size: 12px;
   font-weight: 500;
   color: #000000;
   margin-top: 3px;
 }

 .color {
   font-size: 10px;
   color: #777;
 }

 /* Responsive - 3 colonnes sur tablettes */
 @media (max-width: 1024px) {
   .products {
     grid-template-columns: repeat(3, 1fr);
     /* 3 colonnes pour tablettes */
   }
 }

 /* Responsive - 2 colonnes sur téléphones larges */
 @media (max-width: 768px) {
   .products {
     grid-template-columns: repeat(2, 1fr);
     /* 2 colonnes pour téléphones larges */
   }
 }

 /* Responsive - 1 colonne sur petits écrans (téléphones mobiles) */
 @media (max-width: 480px) {
   .products {
     grid-template-columns: 1fr;
     /* 1 colonne pour petits écrans */
   }
 }

 /* Section PDF et bouton de téléchargement */
 .pdf-reader {
   padding: 15px;
   text-align: center;
   background-color: #f9f9f9;
 }

 .download-link {
   display: inline-block;
   font-size: 14px;
   color: #000000;
   background-color: #f9c611;
   padding: 10px 15px;
   border-radius: 5px;
   text-decoration: none;
   margin-top: 15px;
 }

 .download-link:hover {
   background-color: #000000;
   color: #ffffff;
 }

 /* Responsivité */
 @media (max-width: 768px) {
   .product-card {
     font-size: 12px;
   }

   .products {
     grid-template-columns: repeat(2, 1fr);
   }

   .navbar-links {
     flex-direction: column;
   }
 }

 footer {
   background-color: #111;
   color: #fff;
   padding: 40px 20px;
   font-family: 'Poppins', sans-serif;
 }

 .footer-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   margin: 0 auto;
   padding: 0 20px;
   max-width: 1200px;
 }

 .footer-logo {
   flex: 1;
   text-align: center;
   margin-bottom: 20px;
 }

 .footer-logo img {
   width: 80px;
   margin-bottom: 10px;
 }

 .footer-logo p {
   font-size: 1.2rem;
   font-weight: bold;
   color: #f9c611;
 }

 .footer-info,
 .footer-social,
 .footer-newsletter {
   flex: 1;
   margin-bottom: 20px;
   text-align: center;
 }

 .footer-info h3,
 .footer-social h3,
 .footer-newsletter h3 {
   color: #f9c611;
   font-size: 1.3rem;
   margin-bottom: 10px;
 }

 .footer-info a,
 .footer-newsletter a {
   color: #f9c611;
   text-decoration: none;
 }

 .footer-info a:hover,
 .footer-newsletter a:hover {
   text-decoration: underline;
 }

 .footer-social .social-icons a {
   color: #f9c611;
   font-size: 1.5rem;
   margin: 0 8px;
   transition: color 0.3s;
 }

 .footer-social .social-icons a:hover {
   color: #ffdd57;
 }

 .footer-form {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   /* Assurer que les champs se réorganisent sur petits écrans */
   gap: 15px;
   /* Espacement entre les champs */
   width: 100%;
 }

 .form-group {
   width: 48%;
   /* Permet aux champs de se diviser en 2 sur les écrans plus grands */
   margin-bottom: 20px;
 }

 .form-group label {
   color: #f9c611;
   margin-bottom: 10px;
   font-size: 16px;
 }

 .form-group input,
 .form-group textarea {
   width: 100%;
   padding: 15px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 16px;
 }

 .form-group textarea {
   resize: vertical;
   height: 100px;
 }

 button {
   padding: 15px;
   background-color: #f9c611;
   color: #fff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-weight: bold;
   font-size: 16px;
   width: auto;
 }

 button:hover {
   background-color: #ffdd57;
 }

 /* Responsive design pour les petits écrans */
 @media (max-width: 768px) {
   .footer-container {
     flex-direction: column;
     text-align: center;
   }

   .footer-info,
   .footer-social,
   .footer-newsletter {
     flex: none;
     margin-bottom: 20px;
   }

   .footer-form {
     flex-direction: column;
     align-items: center;
   }

   .form-group {
     width: 100%;
     /* Champs prennent toute la largeur sur petits écrans */
   }
 }