html {
    scroll-behavior: smooth;
}

#baniere {
    background-image: url('../imgs/baniere/font-baniere.png');
    width: 100%;
    min-height: 30vh;
    padding-top: 20px;
    padding-bottom: 20px;
}
.mrg-icon-head{
    margin-right: 50px;
}

#footer{
 background-color: #2e2d2d;  
 width: 100%;
 min-height: 30vh;
 
}
a{
    text-decoration: none;
}
#voir:hover{
    color: orange

}
#footer a:hover{
    color: orange  
}

.navbar.scrolled {
     background-color: #fff; 
     color: #333;
}
section{
    padding-top: 3px;
}

.slogan{
    color: aliceblue;
}
.boutton{
    background-color: #ff7f22 !important; 
    color: aliceblue;
    border: none;
}
.form-control:focus {
    border-color: #9b8668d2 !important;      
    box-shadow: 0 0 0 0.2rem rgba(247, 164, 47, 0.486) !important;
}
.boutton_commande{
    background-color: #ff7f22 !important; 
    color: aliceblue;
    border: none;
     box-shadow: 0 0 0 0 rgba(235, 180, 41, 0.999);
     animation: battement 2s infinite cubic-bezier(.66, 0, 0, 1);
}
/* animation du boutton commande */
@keyframes battement {
  to {
    box-shadow: 0 0 0 30px rgba(255, 71, 84, 0);
  }
}
/* end animation */
.boutton:hover {
    background-color: orange !important; 
    color: white !important;
}
.boutton_commande:hover {
    background-color: orange !important; 
    color: white !important;
}
.oeil{
    color:#444
}
.oeil:hover{
    color:#ff6a00
}
.panier{
    color:#ff6a00
}
.favory{
    color:#444
}
.favory:hover{
    color:orange
}
.mon-image {
    max-width: 100%;
    height: auto;
}


/* Carte plat */
.card-plat {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.5s ease;
}

/* Effet hover carte */
.card-plat:hover {
    transform: translateY(-10px) scale(1.02);
   
}

/* Image */
.card-plat img {
    transition: transform 0.5s ease;
}

/* Zoom image */
.card-plat:hover img {
    transform: scale(1.1);
}

/* Corps */
.card-plat .card-body:hover {
    transition: transform 0.35s ease;
}

/* Actions */
.card-plat .actions {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    display: flex;
    gap: 18px;
    transition: all 0.35s ease;
}

/* Apparition actions */
.card-plat:hover .actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.navbar-nav .nav-link {
    position: relative;
    display: inline-block; 
    color: #000;
    text-decoration: none;
    padding: 4px; 
}

/* L'underline */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; 
    width: 100%; 
    height: 2px;
    background-color: #ff9800; 
    transform: scaleX(0); 
    transform-origin: left;
    transition: transform 0.4s ease;
}

/* Au survol */
.navbar-nav .nav-link:hover::after {
    transform: scaleX(1); 
}


.connex {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: transparent;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.4s ease; /* transition fluide */
}

/* Effet au survol */
.connex:hover {
    background-color: #ff6a00;
    color: #fff;
    transform: scale(1.05); /* léger zoom */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* légère ombre */
}


/* flash message d'ajout au panier  */

.toast-custom {
    position: fixed;
    top: 20px;
    left: -400px; /* caché à gauche */
    z-index: 9999;
    min-width: 250px;
    padding: 15px 20px;
    background-color: #28a745;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-weight: 500;
    transition: all 0.5s ease;
}

.toast-custom.show {
    left: 20px; /* apparaît */
}

.toast-custom.hide {
    opacity: 0;
}