main{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
     
     @font-face {
      font-family: "Monpolice";
      src: url("../polices/Rubik/Rubik-VariableFont_wght.ttf") format("truetype");
    }
    body {
      margin: 0;
      padding: 0;
      color: #333;
      width: 100%;
    }
  .photo {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.4s ease;
  }

  .photo.loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .photo .spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
  }

  /* Nouveau loader 3D */
  .spinner {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: rgb(18, 41, 114);
    position: relative;
  }

  .spinner:before,
  .spinner:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
  }

  .spinner:after {
    color: rgb(18, 41, 114);
    transform: rotateY(70deg);
    animation-delay: .4s;
  }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

    .mode {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 1000;
    }
    #moon:checked ~ body {
      background-color: rgb(5, 20, 58);
      color: white;
    }
    #moontitle i {
      padding: 5px;
      border-radius: 1px;
    }
    
    nav.dark {
      background-color: rgb(166 194 204) !important;
    }
    #moontitle i {
      font-size: 20px;
    }
   .contact-us {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  font-size: 20px;
}
.contact-us:hover {
  transform: scale(1.2);
}

    nav {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      opacity: 1;
      border-bottom: 1px solid rgb(225, 228, 233);
      text-decoration: none;
      z-index: 1000;
      padding: 2px 10px;
      padding-right: 0px;
      position: fixed; /* ← Changement ici */
      top: 0;
      left: 0;
      width: 100%; /* ← Pour qu’elle prenne toute la largeur */
      font-family: 'LXGW Marker Gothic', sans-serif; 
       z-index: 1001;
    }
    header {
      padding-top: 80px; /* ← Ajuste selon la hauteur exacte du nav */
      
    }

    .navbar.scrolled-down {
      background-color: white;
      transition: all 1s ease;
    }
    .navbar.scrolled-down .rechercher input::placeholder {
      color: rgb(105, 112, 119);
    }
    .navbar.scrolled-down .rechercher input {
      background-color: rgb(242, 244, 248);
    }
    .navbar.scrolled-down .rechercher #searchloop {
      color: rgb(105, 112, 119);
    }
    .navbar.scrolled-down .rechercher #rightFleche {
      color: rgb(105, 112, 119);
    }
 
    nav img,
    #logofoot {
      text-decoration: none;
      margin-right: 30px;
      width: 65px;
      margin-left: 5px;
    }
    nav ul li a {
      text-decoration: none;
      color: rgb(51, 51, 51);
    }
    nav ul li {
      text-decoration: none;
      margin-right: 30px;
      list-style: none;
    }
    nav ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-decoration: none;
      margin: 20px 0px;
    }
    nav ul li a {
      position: relative; /* nécessaire pour le ::after positionné */
      text-decoration: none;
      color: rgb(51, 51, 51);
      padding-bottom: 3px; /* un peu d’espace pour la ligne */
    }

    nav ul li .ligne::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 0.7px; /* épaisseur de la ligne */
      width: 0; /* largeur initiale à 0 */
      background-color: rgb(51, 51, 51); /* couleur de la ligne */
      transition: width 0.4s ease; /* animation de la largeur */
      border-radius: 2px;
    }

    nav ul li .ligne:hover::after {
      width: 100%; /* la ligne s’étend à toute la largeur */
    }
    #fire-conteneur {
      position: relative;
      padding-right: 5px;
    }
    #fire {
      position: absolute;
      right: -10px;
      top: -6px;
      transform: rotate(10deg);
      color: rgb(254, 124, 2);
      font-size: 18px;
      animation: fire 1s infinite ease-in-out;
    }

    @keyframes fire {
      0% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-5px) rotate(20deg);
      }
      100% {
        transform: translateY(0) rotate(0deg);
      }
    }
    @keyframes panier {
      0% {
        transform: translatex(0);
      }
      50% {
        transform: translatex(2px);
      }
      100% {
        transform: translatex(0);
      }
    }
    #fire:hover {
      transform: scale(1.2);
    }
    .rechercher input {
      width: 400px;
      transition: width 0.3s ease;
      height: 38px;
      padding: 2px 27px;
      border: none;
      margin: 8px;
      margin-left: 30px;
      border-radius: 3px;
      outline: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0); /* blanc translucide */
      color: #333;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      margin-left: 5px;
    }
    /* Points de rupture progressifs */

@media (min-width: 1200px) { .rechercher input { width: 400px !important; } }
@media (max-width: 1100px) { .rechercher input { width: 196px; } }
@media (max-width: 1024px) { .rechercher input { width: 70px; } }
@media (max-width: 960px)  { .rechercher input { width: 69px; } } @media (max-width: 920px)  { .rechercher input { width: 68px; } }
@media (max-width: 900px)  { .rechercher input { width: 67px; } }
@media (max-width: 840px)  { .rechercher input { width: 60px; } }
    .rechercher {
      position: relative;
      margin-left: 20px;
      padding-top: 4px;
    }
    .rechercher input::placeholder {
      color: white;
      font-size: 16px;
      font-weight: 200;
    }
   .search-container {
  position: relative; /* Ajoutez ceci */
  display: flex;
  align-items: center;
}

.rechercher #rightFleche {
  position: absolute;
  right: 17px;
  top: 46%;
  transform: translateY(-50%);
  color: white;
  font-size: 14px;
}
    #rightFleche:hover {
      cursor: pointer;
    }
   
    #bar {
      width: 27px;
      height: 27px;
      display: inline;
      z-index: -1px;
      position: relative;
      top: -4px;
      right: 15px;
      margin: 0;
      color: rgb(51, 51, 51);
      cursor: pointer;
    }
    header {
      background: url('../images/graduation.jpg') no-repeat fixed;
      background-color: rgb(235 235 235);

      background-size: cover;
      background-position: right center;
    }

    .connecter {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      margin: 15px;
      margin-top: 0px;
      position: relative;
    }
    #user {
      margin: auto 10px;
      font-size: 19px;
    }
    #shop {
      font-size: 19px;
      margin: 10px;
      position: absolute;
      top: 11px;
      left: 2px;
    }
    .panier {
      position: relative;
      cursor: pointer;
      animation: panier 2.5s infinite ease-in-out;
    }
    .cart-badge {
      position: absolute;
      top: 10px;
      left: 25px;
      background-color: white;
      color: rgb(51, 51, 51);
      font-size: 14px;
      width: 20px;
      height: 20px;
      font-size: 15px;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      font-weight: bold;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    #bar:hover,
    .panier:hover {
      transform: scale(1.1);
    }
    .connecter:hover {
      transform: scale(1.05);
      cursor: pointer;
    }
    /* Ajouter le cœur au-dessus de l'icône utilisateur */
    .connecter::after {
      content: '❤';
      position: absolute;
      top: 16px;
      left: 3px;
      font-size: 12px;
      color: red;
      animation: floatHeart 1.7s infinite ease-in-out;
    }
    
    /* Flottement du cœur */
    @keyframes floatHeart {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
      100% {
        transform: translateY(0);
      }
    }
    #user:hover {
      transform: scale(1.2);
    }
    .welcoming {
      position: relative;
      height: 380px;
    }
    @font-face {
      font-family: 'Monpolice';
      src: url('../polices/Rubik/Rubik-VariableFont_wght.ttf')
        format('truetype');
    }
    .welcoming-content {
      position: absolute;
      color: rgba(35, 52, 81, 0.87);
      top: 100px;
      left: 30px;
      width: 40%;
      font-size: 15px;
      margin: 10px;
      font-family: "Monpolice";
    }
    @media (max-width: 575.98px) { 
      .welcoming {
        height: 480px;
      }
      .mode-grid-3{
        display: none;
      }
      .sidebar{
        width:80% !important;
      }
      .login-panel{
        width:72% !important;
      }
      .login-header h4{
        padding: 14px 7px !important;
      }
      .login-header{
       flex-wrap: nowrap !important;
      }
      header {
    background: url(../images/graduation.jpg) no-repeat fixed;
    background-color: rgb(235 235 235);
    background-size: cover;
    background-position: center top;
}
     }
     @media (max-width: 870px) {
       .welcoming-content {
        width: 88%;
        top: 145px;
    left: 8px;

      }
  
      
     }
    .welcoming-content h1 {
      font-family: "Monpolice";
      color: rgb(18, 39, 66);
      font-size: 28px;
      padding: 10px;
      padding-left: 0px;
    }
    footer.footer {
      background: linear-gradient(
        to right,
        rgb(12, 25, 42),
        rgb(18, 39, 66),
        rgb(20, 44, 76),rgb(29, 53, 81),rgb(29, 53, 81),rgb(35, 52, 81));
      color: white;
      padding: 15px 30px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    footer {
      display: flex;
      flex-direction: column;
      
    }
    .footer-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start; /* ou center si tu veux centrer */
      gap: 70px; /* distance entre les blocs */
      padding: 25px 0;
    }

    .footer-section {
      max-width: 230px;
    }

    .footer img {
      width: 150px;
      background-color: rgb(212, 212, 212);
      border-radius: 5px;
      padding: 6px;
      margin-bottom: 0;
      
    }

    .footer-section h4 {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #fff;
      font-size: 16px;
      padding-bottom: 10px;
      margin-left: 15px;
    }

    .footer-section ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-section ul li {
      margin-bottom: 10px;
      font-size: 14px;
    }

    .footer-section ul li a {
      color: #fff;
      text-decoration: none;
      position: relative;
      transition: color 0.3s ease;
    }

    .footer-section ul li a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 1px;
      width: 0;
      background-color: white;
      transition: width 0.3s ease;
      border-radius: 5px;
    }

    .footer-section ul li a:hover::after {
      width: 100%;
    }

    .footer-section ul li a:hover {
      color: #f0f0f0;
    }

    .footer p,
    .footer pre {
      font-size: 14px;
      line-height: 1.6;
      color: #eee;
    }

    .footer .social-icons {
      margin-top: 10px;
    }

    .footer .social-icons i {
      font-size: 20px;
      margin-right: 15px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    
    .footer .social-icons i:hover {
      transform: scale(1.2);
      color: #f0f0f0;
    }
    #para a {
      color: white;
    }
    #para  {
      margin-top: 2px;
    }
    .footer-bottom {
      text-align: center;
      padding: 5px 0;
      margin-top: 20px;
      border-top: 1px solid #ffffff50;
      font-size: 13px;
      color: #ccc;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    #before-footer-bottom{
      padding: 0;
      width: 100%;
      border: none;
      margin: 0;
    }
    #barre{
      width: 60%;
      height: 0.5px;
      border-radius: 2px;
      background: #ffffff50;
      margin: 0 auto;
    }
    .fermer {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

#message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 255, 255);
  padding: 10px 20px;
  border: none;
  z-index: 2000;
  max-width: 500px;
  box-shadow: 0 0 20px rgba(13, 21, 80, 0.3);
  border-radius: 4px;
  overflow-y: scroll;
  font-family: 'LXGW Marker Gothic', sans-serif;  
}
#message input ,textarea{
  margin-bottom: 15px;
  padding: 10px;
  font-size: 14px;
  outline: none;
  border: 1px solid gainsboro;
  width: 100%;
}
#message label {
  font-family: 'Times New Roman', Times, serif;
  padding: 10px;
}
#message button {
  padding: 10px;
  background-color: rgb(19, 43, 71);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: 20px;
  border-radius: 5px;
}
#message button:hover {
  background-color: #132a4998;
}
#message form {
  max-height: 500px;
  display: flex;
  flex-direction: column;
}
/* ✅ Adaptation du modal Contact pour mobile */
@media (max-width: 768px) {
  #message {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: none;
    max-height: 85vh;
    padding: 15px;
    font-size: 14px;
    border-radius: 8px;
    overflow-y: auto;
  }

  #message h3 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 10px;
  }

  #message label {
    padding: 5px;
    font-size: 13px;
  }

  #message input,
  #message textarea {
    padding: 10px;
    font-size: 13px;
    border-radius: 4px;
  }

  #message button {
    padding: 10px;
    font-size: 14px;
    margin-top: 10px;
    border-radius: 6px;
  }
  

  /* Bouton fermer */
  #message .fermer {
    font-size: 24px;
    color: rgb(19, 43, 71);
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
  }

  nav {
    padding : 0 !important;
  }
  nav ul > #fire-conteneur {
    display: none !important;
  } 
  nav ul > #produits-conteneur {
    display: none !important;
  }
  nav ul > #aboutus-conteneur {
    display: none !important;
  }
  nav > .connecter {
    font-size: 16px;
    order: 3;
  }
  nav > .panier {
    font-size: 16px;
    order: 4;
  }
  nav > .rechercher {
    order: 5;
    width: 100%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav #logo-conteneur a img {
    width: 60px;
    margin: 0 !important;
  }
  nav > #logo-conteneur {
    order: 1 !important;
    padding: 0 0px 0 8px;
  }
  nav > ul #bar-menu-conteneur {
    margin: 0 !important;
  }
  nav > ul {
    order: 2 !important;
  }

  .rechercher input{
    width: 100%;
    margin: 0 auto !important;
  }
  .search-container{
    width:330px;
  }
  .rechercher #rightFleche{
    right: 20px;
  }
  .navbar.scrolled-down .rechercher{
    display: none !important;
  }
  .autocomplete-items {
    position: absolute;
    top: 102% !important;
    left: 18px !important;
    right: 0;
    background-color: #fff;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 5px 5px;
    max-width: 90%;
    overflow-x: auto;
}
.cart-badge{
  left:14px !important;

}
#shop{
  left:-11px !important;}
  .related-products-container {
   
    padding: 0 0px 0 0px !important;
  
}
}

footer {
  margin-top: 50px !important;
}

.autocomplete-items {
  position: absolute;
  top: 80%;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 0 0 5px 5px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  color: #333;
}

.autocomplete-items div:hover {
  background-color: #f0f0f0;
}
 .navbar .rechercher #place::placeholder {
      color: rgb(105, 112, 119);
    }

#message #confirmation-title{
    font-size: 1.5rem;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

    /* ============================================
   STYLES DE BASE DES MODAUX
   ============================================ */

    #message,
    #modifierProduit {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 25px 30px;
        border: none;
        z-index: 2000;
        width: 90%;
        max-width: 550px;
        box-shadow: 0 0 20px rgba(13, 21, 80, 0.3);
        border-radius: 8px;
        overflow-y: auto;
        font-family: 'LXGW Marker Gothic', sans-serif;
        max-height: 90vh;
    }

    /* Bouton de fermeture */
    .fermer {
        float: right;
        font-size: 24px;
        cursor: pointer;
        padding: 5px 10px;
        color: #333;
        line-height: 1;
        transition: all 0.3s ease;
        margin-top: -5px;
        margin-right: -10px;
    }

    .fermer:hover {
        color: #ff0000;
        transform: scale(1.2);
    }

    /* Titre du modal */
    #message h3,
    #modifierProduit h3 {
        margin-bottom: 20px;
        font-size: 20px;
        color: rgb(19, 43, 71);
    }

    /* Formulaires */
    #message form,
    #modifierProduit form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Labels */
    #message label,
    #modifierProduit label {
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
        margin-bottom: 4px;
        display: block;
        font-size: 14px;
    }

    /* Inputs, textarea, select */
    #message input,
    #message textarea,
    #message select,
    #modifierProduit input,
    #modifierProduit textarea,
    #modifierProduit select {
        padding: 12px;
        font-size: 14px;
        outline: none;
        border: 1px solid gainsboro;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        font-family: inherit;
        transition: border-color 0.3s ease;
    }

    #message input:focus,
    #message textarea:focus,
    #message select:focus,
    #modifierProduit input:focus,
    #modifierProduit textarea:focus,
    #modifierProduit select:focus {
        border-color: rgb(35, 78, 128);
    }

    /* Boutons de soumission */
    #message button,
    #modifierProduit button {
        padding: 12px;
        background-color: rgb(19, 43, 71);
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        width: 100%;
        margin-top: 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        font-size: 16px;
    }

    #message button:hover,
    #modifierProduit button:hover {
        background-color: rgba(19, 42, 73, 0.8);
    }

    /* Texte d'aide (small) */
    small {
        font-size: 0.8rem;
        color: #666;
        display: block;
        margin-top: 4px;
        line-height: 1.4;
    }

    /* Messages d'erreur */
    .erreurs {
        background-color: #ffeeee;
        border-left: 4px solid #ff0000;
        padding: 10px 15px;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .erreurs ul {
        margin: 0;
        padding-left: 20px;
    }

    /* Liens */
    #message a,
    #modifierProduit a {
        font-size: 0.9rem;
        color: #007BFF;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    #message a:hover,
    #modifierProduit a:hover {
        color: #0056b3;
        text-decoration: underline;
    }

    /* ============================================
   RESPONSIVE TABLETTES (≤ 768px)
   ============================================ */

    @media (max-width: 768px) {

        #message,
        #modifierProduit {
            padding: 20px;
            width: 80%;
            max-width: 95%;
            border-radius: 6px;
            max-height: 85vh;
        }

        #message h3,
        #modifierProduit h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .fermer {
            font-size: 26px;
            padding: 5px 8px;
        }

        #message label,
        #modifierProduit label {
            font-size: 13px;
        }

        #message input,
        #message textarea,
        #message select,
        #modifierProduit input,
        #modifierProduit textarea,
        #modifierProduit select {
            padding: 10px;
            font-size: 14px;
        }

        #message button,
        #modifierProduit button {
            padding: 12px;
            font-size: 15px;
        }

        #message form,
        #modifierProduit form {
            gap: 12px;
        }

        small {
            font-size: 0.75rem;
        }
    }

    /* ============================================
   RESPONSIVE MOBILE (≤ 480px)
   ============================================ */

    @media (max-width: 480px) {

        #message,
        #modifierProduit {
            padding: 15px;
            width: 80%;
            max-width: 98%;
            border-radius: 4px;
            max-height: 80vh;
        }

        #message h3,
        #modifierProduit h3 {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .fermer {
            font-size: 28px;
            padding: 3px 6px;
        }

        #message label,
        #modifierProduit label {
            font-size: 12px;
            margin-bottom: 3px;
        }

        #message input,
        #message textarea,
        #message select,
        #modifierProduit input,
        #modifierProduit textarea,
        #modifierProduit select {
            padding: 10px 8px;
            font-size: 13px;
        }

        #message button,
        #modifierProduit button {
            padding: 10px;
            font-size: 14px;
            margin-top: 10px;
        }

        #message form,
        #modifierProduit form {
            gap: 10px;
        }

        small {
            font-size: 0.7rem;
            line-height: 1.3;
        }

        #message a,
        #modifierProduit a {
            font-size: 0.85rem;
        }
    }

    /* ============================================
   RESPONSIVE TRÈS PETITS ÉCRANS (≤ 360px)
   ============================================ */
    @media (380px < width <= 412px) {
      nav ul {
        margin: 20px 23px !important;
      }
    }
    @media (max-width: 360px) {

        #message,
        #modifierProduit {
            padding: 12px;
            width: 100%;
            max-width: 100%;
            border-radius: 0;
            max-height: 100vh;
            top: 0;
            left: 0;
            transform: none;
        }

        #message h3,
        #modifierProduit h3 {
            font-size: 15px;
            margin-bottom: 10px;
        }

        .fermer {
            font-size: 26px;
        }

        #message label,
        #modifierProduit label {
            font-size: 11px;
        }

        #message input,
        #message textarea,
        #message select,
        #modifierProduit input,
        #modifierProduit textarea,
        #modifierProduit select {
            padding: 8px;
            font-size: 12px;
        }

        #message button,
        #modifierProduit button {
            padding: 9px;
            font-size: 13px;
        }

        #message form,
        #modifierProduit form {
            gap: 8px;
        }

        small {
            font-size: 0.65rem;
        }
    }
     @media (max-width: 380px) {
       nav ul {
        margin: 20px 3px !important;
    }
         
     }

    /* ============================================
   AUTRES STYLES (NAVBAR, BOUTONS, IMAGES)
   ============================================ */

    .navbar .rechercher #place::placeholder {
        color: rgb(105, 112, 119);
    }

    #ajouter {
        background-color: rgb(35, 78, 128);
        color: white;
        max-height: 40px !important;
        padding: 10px !important;
        font-size: 15px;
        margin-right: 5px;
        transition: all 0.3s ease;
    }

    #ajouter:hover {
        background-color: rgb(29, 53, 81);
        transform: scale(1.025);
    }