/* carrousel spécialités */
#carouselSpecialites .carousel-item {
    min-height: 300px;
    padding: 0 50px; /* Espace pour ne pas chevaucher les flèches */
}

#carouselSpecialites .carousel-control-prev, 
#carouselSpecialites .carousel-control-next {
    opacity: 0.8;
}
/* Style personnalisé pour le carrousel des spécialités */
#carouselSpecialites {
    padding-bottom: 40px; /* Espace pour les indicateurs (points) en bas */
}

#carouselSpecialites .carousel-item {
    transition: transform 0.8s ease-in-out; /* Transition plus douce */
}

/* On s'assure que les icônes ressortent bien */
.fa-3x.text-success {
    color: #198754 !important; /* Ton vert officiel */
    margin-bottom: 20px;
}

/* Ajustement des flèches pour qu'elles ne gênent pas la lecture */
@media (max-width: 768px) {
    #carouselSpecialites .carousel-item {
        padding: 0 40px; /* Plus d'espace sur les côtés sur mobile */
    }
    #carouselSpecialites .carousel-control-prev, 
    #carouselSpecialites .carousel-control-next {
        width: 10%; /* Flèches plus discrètes sur mobile */
    }
}

/* Ajoute de l'espace sous les carrousels pour les indicateurs */
#carouselPC, #carouselMobile {
    margin-bottom: 60px; /* Espace pour les points */
}

/* Style des points pour qu'ils soient plus visibles */
.carousel-indicators [data-bs-target] {
    background-color: #198754 !important; /* Couleur verte de ta pharmacie */
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Points ronds au lieu de traits */
    margin: 0 6px;
}

/* Style du point actif */
.carousel-indicators .active {
    opacity: 1;
    background-color: #0b8efb !important; /* Bleu pour le point actif (rappel parking/appli) */
}


/*
======================
navbar
======================
*/

/* Style des liens de la navbar */
.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #26c97e !important; /* Jaune au survol pour le rappel du caducée */
}

/* Adaptation Mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #198754;
        padding-bottom: 20px;
        border-radius: 0 0 15px 15px;
    }
}

/* Fond semi-transparent au survol */
.navbar-nav .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Blanc à 20% d'opacité */
    color: #ffffff !important; /* Le texte RESTE blanc */
    border-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Petite lueur autour */
}

/* carrousel spécialités */
#carouselSpecialites .carousel-item {
    min-height: 300px;
    padding: 0 50px; /* Espace pour ne pas chevaucher les flèches */
}

#carouselSpecialites .carousel-control-prev, 
#carouselSpecialites .carousel-control-next {
    opacity: 0.8;
}
/* Style personnalisé pour le carrousel des spécialités */
#carouselSpecialites {
    padding-bottom: 40px; /* Espace pour les indicateurs (points) en bas */
}

#carouselSpecialites .carousel-item {
    transition: transform 0.8s ease-in-out; /* Transition plus douce */
}

/* On s'assure que les icônes ressortent bien */
.fa-3x.text-success {
    color: #198754 !important; /* Ton vert officiel */
    margin-bottom: 20px;
}

/* Ajustement des flèches pour qu'elles ne gênent pas la lecture */
@media (max-width: 768px) {
    #carouselSpecialites .carousel-item {
        padding: 0 40px; /* Plus d'espace sur les côtés sur mobile */
    }
    #carouselSpecialites .carousel-control-prev, 
    #carouselSpecialites .carousel-control-next {
        width: 10%; /* Flèches plus discrètes sur mobile */
    }
}


/*
======================
bandeau réseaux
======================
*/

.bandeau-info-social {
    width: 100%;
    background-color: #198754; /* Ton vert success */
    color: white;
}

.bandeau-info-social .social-text {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.bandeau-info-social .social-item {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.95rem; /* Taille plus petite et élégante */
    font-weight: 600;
    transition: 0.3s;
}

.bandeau-info-social .social-item:hover {
    color: #d4f0d4 !important; /* Même vert clair que ton footer au survol */
    transform: translateY(-2px);
}

.bandeau-info-social .fa-brands, 
.bandeau-info-social .fa-solid {
    font-size: 1.1rem; /* Taille des icônes équilibrée */
}

/* Ajustement mobile */
@media (max-width: 576px) {
    .bandeau-info-social .social-item {
        font-size: 0.85rem;
    }
}

 /* DIV des rappels */
.alert-importante {
   // background: linear-gradient(135deg, #fcd4d4 50%, #ffffff 100%);
    background: #fcd4d4;
  //  background-color: #fac0c0; /* Fond rosé doux */
    border: 5px solid #f8d7da; /* Bordure fine rose */
    border-left: 20px solid #dc3545; /* Grosse barre rouge à gauche pour l'impact */
    border-right: 1px solid #f8d7da;
    border-top: 1px solid #f8d7da;
    border-bottom: 1px solid #f8d7da;
    padding: 30px;
    border-radius: 12px;
    color: #842029; /* Texte rouge foncé pour la lisibilité */
}

.alert-importante i {
    color: #dc3545; /* L'icône en rouge vif */
}

.alert-importante h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajustement pour mobile */
@media (max-width: 576px) {
    .alert-importante {
        padding: 15px;
    }
    .alert-importante i {
        font-size: 1.5rem;
    }
    .alert-importante p {
        font-size: 0.95rem;
    }
}

/*---------footer --------*/ 

.form-header h2 {
    color: #198754; /* Le vert "success" de Bootstrap */
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.form-header p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ---------- GENERAL ---------- */
body { font-family:"Segoe UI", sans-serif; }

/* HEADER */
header {
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
}
header a { color:#fff !important; font-weight:600; }

/* ---------- HERO ---------- */
.hero {
 /* background:url('images/hero.jpg') center/cover no-repeat; */
  color:white;
  padding:6rem 1rem;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* Icônes */
.feature-icon { font-size:2rem; color:#2E7D32; }

/* ---------- FOOTER ---------- */
footer { background:#111; color:#ddd; }
footer a { color:#bbb; text-decoration:none; }

/* ---------- LOADER ---------- */
#loader {
  position: fixed;
  inset: 0;
  background: #1B5E20;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity .50s ease;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#galerie img {
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

#contact h2 {
  font-weight: 700;
}

#contact h5 {
  font-weight: 600;
}

#contact .fa-brands {
  transition: 0.2s;
}

#contact .fa-brands:hover {
  transform: scale(1.2);
}


#horaires .card {
  backdrop-filter: blur(6px);
}

.horaires-list .list-group-item {
  font-size: 1.05rem;
  transition: background 0.3s;
}

.horaires-list .list-group-item:hover {
  background: #f4fdf4;
}

.horaires-today {
  background: #d9f8d9 !important;
  font-weight: bold;
  border-left: 5px solid #28a745;
}

.etat-horaire {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
}

.etat-horaire.ouvert {
    color: #198754; /* vert */
    font-weight: bold;
}

.etat-horaire.ferme {
    color: #dc3545; /* rouge */
    font-weight: bold;
}

.etat-horaire.bientot {
    color: #fd7e14; /* orange */
    font-weight: bold;
}

.etat-horaire.ouvre-bientot {
    color: #0d6efd; /* bleu */
    font-weight: bold;
}


footer a:hover { text-decoration: none; color: #d4f0d4; }
@media(max-width:576px){
  footer p, footer small { font-size:0.9rem; }
}

.hero img {
  filter: brightness(0.8); /* assombrit l'image pour mieux voir le texte */
}

/* --- IMPORTANT : NE PAS FIXER LA HAUTEUR SUR MOBILE --- */
/* => On laisse #accueil prendre la hauteur nécessaire */
@media (max-width: 768px) {
  .hero-content .d-grid.gap-2.d-md-block {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem; /* espace entre les boutons */
  }

  .hero-content .d-grid.gap-2.d-md-block .btn {
    width: 100%;          /* prend la majeure partie de la largeur, centrée */
    font-size: 0.95rem;   /* réduit légèrement le texte pour que ça tienne */
    padding: 0.4rem 0.8rem; /* réduit le padding vertical/horizontal */
    white-space: normal;   /* texte peut aller à la ligne si nécessaire */
  }
}




/* Boutons carrés par défaut */
.btn-square {
  width: 100%;
  padding: 1.5rem 0;
  border-radius: 1rem;
  font-size: 1rem;
}

/* Sur mobile : réduire la taille */
@media (max-width: 576px) {
  .btn-square {
    padding: 1rem 0;
    font-size: 0.85rem;
  }

  .btn-square i {
    font-size: 1.5rem; /* réduire icônes sur mobile */
  }
}

/* fin bouton carrés*/




.install-button {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #28a745;
  color: white;
  padding: 12px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 0.95rem;
  font-weight: bold;
  z-index: 9999;
  cursor: pointer;
}

.install-button i {
  margin-right: 6px;
}

/* Message iPhone */
.ios-tip {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 10px;
  right: 10px;
  background: #ffffff;
  color: #333;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  font-size: 0.9rem;
  z-index: 9999;
}

/* Masquer sur desktop */
@media(min-width: 992px){
  .install-button, .ios-tip {
    display: none !important;
  }
}


  /* Style général */
  .bouton-long {
    white-space: nowrap;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Version smartphone */
  @media(max-width: 576px) {
    .bouton-long {
      font-size: 0.9rem;
      padding-left: 1.2rem;
      padding-right: 1.2rem;
    }
  }

/* ---- LOGO HERO ---- */

.hero-logo img {
    width: 190px;        /* taille desktop */
    height: auto;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
    opacity: 0.85;
}

/* Mobile : logo plus petit */
@media (max-width: 576px) {
    .hero-logo img {
        width: 60px;
    }
}


/* ---- bandeau infos ---- */
.bandeau-info {
    width: 100%;
    background-color: #198754;
    color: white;
    padding: 12px 0;
    font-size: 25px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#bandeau-track {
    display: inline-block;
    padding-left: 100%;
    animation: scrollMsg 10s linear infinite;
    pointer-events: auto; /* permet le clic malgré l'animation */
}

#bandeau-track a {
    color: #fff !important;
    text-decoration: none !important;
}
#bandeau-track a:hover {
    color: #fff;
    text-decoration: none;
}

/* Animation du texte */
@keyframes scrollMsg {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

body { background-color: #f4f7f6; }
        .form-container { max-width: 750px; margin: 40px auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); font-family: 'Open Sans', sans-serif; }
        .form-header { color: #00a651; text-align: center; border-bottom: 2px solid #f1f1f1; margin-bottom: 25px; padding-bottom: 15px; }
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-weight: 600; margin-bottom: 8px; color: #444; }
        .form-control { width: 100%; padding: 12px; border: 1px solid #dee2e6; border-radius: 6px; transition: all 0.2s; }
        .form-control:focus { border-color: #00a651; box-shadow: 0 0 0 0.25rem rgba(0, 166, 81, 0.15); outline: none; }

        /* Style commun pour les bandeaux de section */
        .section-title {
    background: linear-gradient(90deg, #e8f5e9 0%, #ffffff 100%);
    border-left: 5px solid #00a651;
    padding: 12px 15px;
    margin: 30px 0 20px 0;
    font-weight: 700;
    color: #008542;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
}

/* Ajout d'une petite icône avant le texte via CSS */
.section-title::before {
    content: "\f2bd"; /* Code FontAwesome pour l'icône utilisateur */
    font-family: "Font Awesome 6 Free";
    margin-right: 10px;
    font-size: 16px;
    font-weight: 900;
}
        .section-title i { margin-right: 12px; font-size: 18px; color: #00a651; width: 25px; text-align: center; }
        .section-title.mt-0 { margin-top: 0; }

        .btn-submit { background-color: #00a651; color: white; padding: 15px; border: none; border-radius: 6px; font-size: 18px; cursor: pointer; width: 100%; transition: all 0.3s; font-weight: bold; margin-top: 20px; }
        .btn-submit:hover { background-color: #008542; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        
        .idel-box { background: #fdfdfd; border: 1px dashed #00a651; padding: 20px; border-radius: 8px; margin: 25px 0; }
        .alert { padding: 15px; border-radius: 8px; margin-bottom: 25px; border: none; font-weight: 500; }
        .alert-success { background: #d1e7dd; color: #0f5132; }
        .alert-danger { background: #f8d7da; color: #842029; }
        @media (max-width: 576px) { .flex-mobile { flex-direction: column; gap: 0 !important; } }