*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
}

/* Compensation pour le contenu sous la navbar fixe */
body {
    padding-top: 80px; /* Ajustez cette valeur selon la hauteur réelle de votre navbar */
    margin: 0; /* Supprime les marges par défaut */
}


.navbar {
    position: fixed; /* Changé de sticky à fixed */
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background-color: black;
    width: 100%; /* Assure que la navbar prend toute la largeur */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}


.navbar .logo h1{
    color: white;
    cursor: pointer;
    font-size: 1.2rem; /* Taille de police réduite pour mobile */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}
.navbar .menu li{
    list-style: none;
    display: inline-block; /* Ou flex selon vos besoins */
    white-space: 20px;
}
.navbar .menu li a{
    color: white;
    text-decoration: none;
    font-size: 14px; /* Taille de police réduite */
    font-weight: bold;
    padding: 5px 10;
    display: flex;
    align-items: center;
    gap: 5px;
}
.navbar .menu li .active{
    border-bottom: 2px solid #f63e4e; /* Bordure plus fine pour mobile */
}
.navbar .menu li .a:hover{
    border-bottom: 4px solid #f63e4e;
}
.navbar .menu li a:hover {
    color: #f63e4e;
}
/* Icônes */
.navbar .menu li a i {
    font-size: 16px;
}
.promo10{
    background-size: cover;
    background-position: center;
    min-width: 350px;
    height: 200px;
    flex: 1;
}
.content0{
    background-color: #f63e4e;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    margin: 2%; /* Au lieu de 20px */
    padding: 2%;
}
.promo4{
    background-image: url(images/mai-sourire.jpg);
}
.promo5{
    background-image: url(images/mai-accueil6.jpg);
}
.promo6{
    background-image: url(images/mai-sourire2.jpg);
}

.promo{
    background-size: cover;
    background-position: center;
    min-width: 350px;
    height: 400px;
    flex: 1;
}
.content1{
    background-color: #f63e4e;
    min-height: 400px;
    display: flex;
    flex-wrap: wrap;
    margin: 2%; /* Au lieu de 20px */
    padding: 2%;
}
.promo1{
    background-image: url(images/mai-doct1.jpg);
}
.promo2{
    background-image: url(images/mai-sourire1.jpg);
}
.promo3{
    background-image: url(images/mai-doct3.jpg);
}



@keyframes clignoter{
    0%{ opacity: 1;}
    50%{ opacity: 0;}
    100%{ opacity: 1;}
}
.content h1{
    font-size: 40px;
    color: #f63e4e;
    animation: clignoter 1s infinite;
}
.content p{
    font-size: 20px;
    margin-top: 0px;
    color: #580dc9;
}
.content button{
    margin-top: 0px;
    padding: 15px 30px;
    border: none;
    background: #f63e4e;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
.content2 h1{
    font-size: 40px;
    color: #f63e4e;
    animation: clignoter 1s infinite;
    margin: 10px;
    text-align: center;
}
.content2 p{
    font-size: 30px;
    margin-top: 0px;
    color: #580dc9;
    text-align: center;
}

.produits_texte{
    text-align: left;
    font-size: 30px;
    font-weight: 300;
    margin-top: 30px;
    margin-left: 80px;
    color:#424144;
}
.section_produits{
    padding: 40px 5%;
}
.produits1{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}



footer{
    background: #f3f4f6;
    height: 10vh;
}
footer p{
    text-align: center;
    line-height: 10vh;
}
footer p a{
    text-decoration: none;
    color: #f63e4e;
    font-weight: bold;
}






.image-scroll-container {
    width: 100%; /* Largeur du conteneur */
    overflow-x: auto; /* Active le défilement horizontal */
    white-space: nowrap; /* Empêche les images de passer à la ligne */
    border: 1px solid #ccc; /* Optionnel : pour visualiser le conteneur */
    padding: 10px 0; /* Ajoute un peu d'espace autour */
}
  
.image-scroll {
    display: inline-block; /* Affiche les images en ligne */
    white-space: nowrap; /* Assure que les images restent sur une seule ligne */
}
  
.image-scroll img {
    display: inline-block; /* Affiche les images en ligne */
    width: 200px; /* Largeur des images */
    height: auto; /* Hauteur automatique pour conserver les proportions */
    margin-right: 10px; /* Espacement entre les images */
    border-radius: 10px; /* Optionnel : pour un look plus esthétique */
}


.produits1 .carte-produit{
    width: 310px;
    background: #f5f5f5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
}
.produits1 .carte-produit img{
    height: 250px;
    width: 100%;
    border-radius: 10px;
}


.produits1 .carte-produit .titre{
    font-weight: 900;
    font-size: 20px;
    color: #424144;
    padding: 0 20px;
}
.produits1 .carte-produit .box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}




/* Styles pour le formulaire de contact */
.contact-info, .contact-form {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    margin: 20px auto;
}
.contact-info p {
    margin: 10px 0;
    color: var(--light-text-color);
}

.contact-info a {
    color: var(--secondary-color);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.contact-form button {
    width: 100%;
    margin-top: 10px;
}

/* Lien vers Facebook */
.search-bar p {
    margin: 0;
    font-size: 14px;
}

/* Style pour l'icône Facebook */
.fab.fa-facebook {
    font-size: 32px;
    color: #1877F2; /* Couleur officielle de Facebook */
    transition: transform 0.3s ease; /* Animation au survol */
}

.fab.fa-facebook:hover {
    transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}



.whatsapp-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    margin: 10px;
    
}

.whatsapp-link:hover {
    background-color: #128C7E;
}


.actions {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.share-button {
    background-color: #3498db;
    color: white;
}

.like-button {
    background-color: #e74c3c;
    color: white;
}

.save-button {
    background-color: #2ecc71;
    color: white;
}

.like-button.liked {
    background-color: #c0392b;
}

/* Styles pour le formulaire de contact */
.contact-info1, .contact-form {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 20px auto;
}
.contact-info1 p {
    margin: 10px 0;
    color: var(--light-text-color);
}

.contact-info1 a {
    color: var(--secondary-color);
    text-decoration: none;
}

.contact-info1 a:hover {
    text-decoration: underline;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.contact-form button {
    width: 100%;
    margin-top: 10px;
}


.pdf-container {
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
    margin: 20px 0;
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.navbar img, .nav-mobile img {
    max-width: 80px;
    height: auto; /* Maintient les proportions */
  }

.carte1, .carte2, .carte3 {
    width: 100%; /* Prend toute la largeur de la grille */
    max-width: 100%; /* Évite les débordements */
  }

/* Pour les écrans < 768px (mobiles) */
@media (max-width: 767px) {
    .produit {
      width: 100%;
    }
    .menu { display: none; } /* Ex: remplacer par un menu hamburger */
  }
  
  /* Pour les tablettes (768px - 992px) */
  @media (min-width: 768px) and (max-width: 991px) {
    .produit { width: 50%; }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  body { font-size: 1rem; }
  h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

  input, button {
    padding: 12px;
    width: 100%; /* Pleine largeur sur mobile */
  }

/* Menu hamburger - caché par défaut sur desktop/tablette */
.hamburger {
    display: none;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

/* Media Queries pour la version mobile */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap;
        padding: 10px 5%;
    }
    
    .navbar .logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .hamburger {
        display: block;
        color: white;
        font-size: 24px;
        cursor: pointer;
    }
    
    .navbar .menu {
        display: none;
        width: 100%;
        flex-direction: column;
        padding-top: 10px;
    }
    
    .navbar .menu.active {
        display: flex;
    }
    
    .navbar .menu li {
        width: 100%;
        text-align: center;
        padding: 8px 0;
        display: inline-block; /* Ou flex selon vos besoins */
    }
    
    body {
        padding-top: 120px; /* Augmentez si nécessaire pour la version mobile */
    }
    
    .navbar .menu li a {
        justify-content: center;
        padding: 8px 0;
    }
    
    .navbar img {
        width: 60px;
    }
}

@media (max-width: 480px) {
    .navbar .logo h1 {
        font-size: 0.9rem;
    }
    
    .navbar img {
        width: 50px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .navbar .menu li:nth-last-child(-n+3) {
        margin-left: auto; /* Aligne les icônes à droite */
    }
}

.tablet-title { display: none; }

@media (max-width: 992px) {
    .desktop-title { display: none; }
    .tablet-title { display: block; }
}

/* Assure que la largeur ne dépasse jamais celle de l'écran */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ajustements pour les très petits écrans */
@media (max-width: 480px) {
    .navbar .logo h1 {
        font-size: 0.8rem;
    }
    
    .navbar img {
        width: 50px;
    }
    
    .produits_texte {
        margin-left: 20px;
        font-size: 1.5rem;
    }
}


/* Masquer le menu desktop sur mobile */
@media (max-width: 767px) {
    .navbar .menu { display: none; }
    .nav-mobile { display: flex; }
  }
  
  /* Afficher le menu desktop sur grand écran */
  @media (min-width: 768px) {
    .nav-mobile { display: none; }
  }

/* Tablettes */
@media (min-width: 768px) and (max-width: 991px) {
    .produit { width: 50%; }
    .navbar .menu li a { font-size: 14px; }
  }
  
/* Mobiles (portrait et paysage) */
@media (max-width: 767px) {
    .produits_texte { margin-left: 20px; } /* Réduire la marge */
    .content2 h1 { font-size: 24px; } /* Texte plus petit */
  }

/* Remplacer les classes .carte1, .carte2, .carte3 par une seule classe */
.carte-produit {
    background: #f5f5f5;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
  }
  
@media (max-width: 767px) {
    .carte-produit {
      margin: 5px;
    }
  }