/* ==========================================================================
   1. GRILLE PRODUITS (RESPONSIVE)
   ========================================================================== */
@media (max-width: 576px) {
    .product-grid .card-body { 
        padding: 10px; 
    }
    .product-grid .card-title { 
        font-size: 0.9rem; 
    }
}

/* ==========================================================================
   2. BARRE SUPÉRIEURE (TOP-BAR) ET MESSAGE DÉFILANT EN HAUT
   ========================================================================== */
.top-bar-custom {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Conteneur pour le défilement en haut de page */
.scroll-container-top {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/* Texte défilant de l'entête */
.scroll-text-top {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-top 25s linear infinite;
}

@keyframes marquee-top {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* ==========================================================================
   3. ANIMATION CLIGNOTEMENT (NUMÉRO DE TÉLÉPHONE)
   ========================================================================== */
.blink-text {
    display: inline-block !important;
    animation: blink 1.5s linear infinite !important;
    color: #6b8e23 !important; /* Vert-olive MKUNIVERS */
    text-decoration: none;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }
}

/* ==========================================================================
   4. PAGE À PROPOS (MESSAGE DÉFILANT CORPS DE PAGE)
   ========================================================================== */
.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-left: 4px solid #6b8e23;
}

.scroll-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    font-size: 1.1rem;
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.scroll-container:hover .scroll-text {
    animation-play-state: paused;
    cursor: pointer;
}

/* ==========================================================================
   5. AJUSTEMENTS SPÉCIFIQUES ANDROID / MOBILE
   ========================================================================== */
@media (max-width: 767px) {
    /* Texte plus petit en haut pour mobile */
    .scroll-text-top { 
        font-size: 0.75rem; 
        animation-duration: 20s; 
    }
    
    /* Texte page À propos */
    .scroll-text {
        font-size: 0.9rem;
        animation-duration: 15s;
    }
    
    /* Écart entre message et numéro sur mobile */
    .ms-5 { 
        margin-left: 1rem !important; 
    }
}


/* Écart réduit (environ 3-4 cm sur écran) */
.numero-container {
    margin-left: 120px; /* Écart réduit pour un meilleur équilibre */
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    padding-left: 15px;
}

/* Ajustement pour Android */
@media (max-width: 767px) {
    .numero-container {
        margin-left: 15px; /* Écart minimal sur mobile pour laisser de la place au texte */
        padding-left: 5px;
    }
}