/* BACKGROUND ANIMÉ */

body{
    background: linear-gradient(120deg,#ff7b00,#ffffff,#00a651);
    background-size:400% 400%;
    animation: gradientMove 12s infinite alternate;
    min-height:100vh;
}

@keyframes gradientMove{
0%{background-position:left}
100%{background-position:right}
}

/* BULLES */

.bubble{
position:fixed;
border-radius:50%;
opacity:.4;
animation: float 12s infinite linear;
}

.b1{width:120px;height:120px;background:#ff7b00;top:10%;left:10%}
.b2{width:80px;height:80px;background:white;top:60%;left:20%}
.b3{width:150px;height:150px;background:#00a651;top:30%;left:80%}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-60px)}
100%{transform:translateY(0)}
}


/* NAVBAR */

.navbar{
backdrop-filter: blur(10px);
background:rgba(255,255,255,0.7);
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.logo{
font-weight:bold;
font-size:22px;
color:#ff7b00;
}


/* FORM */

.form-card{
background:white;
padding:40px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.form-title{
font-weight:700;
color:#ff7b00;
margin-bottom:25px;
}


/* SOCIAL CARDS */

.social-container{
margin-top:80px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.social-card{
width:160px;
padding:20px;
border-radius:12px;
background:white;
text-align:center;
transition:.4s;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
cursor:pointer;
}

.social-card i{
font-size:28px;
}

.social-card:hover{
transform:translateY(-6px);
color:white;
}

.facebook:hover{background:#1877f2}
.instagram:hover{background:#e1306c}
.twitter:hover{background:#1da1f2}
.linkedin:hover{background:#0a66c2}
.pinterest:hover{background:#e60023}


/* FOOTER PRODUITS */
/*

.product-marquee{
margin-top:80px;
background:#111;
padding:20px 0;
overflow:hidden;
}

.marquee-container{
overflow:hidden;
width:100%;
}

.marquee-track{
display:flex;
gap:20px;
animation: scrollProducts 25s linear infinite;
}

/* carte produit */
/*

.mini-product{

min-width:120px;
height:120px;
background:white;
border-radius:10px;
padding:10px;
text-align:center;
transition:0.3s;
cursor:pointer;

}

.mini-product img{

width:100%;
height:70px;
object-fit:cover;
border-radius:6px;

}

.mini-product p{

font-size:12px;
margin-top:5px;
font-weight:600;

}

/* hover */
/*

.mini-product:hover{

transform:scale(1.1);
box-shadow:0 5px 20px rgba(0,0,0,0.4);

}

/* animation */
/*

@keyframes scrollProducts{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

*/

/**/
.product-marquee{
background:#000;
padding:25px 0;
overflow:hidden;
}

.marquee-container{
overflow:hidden;
width:100%;
}

.marquee-track{
display:flex;
gap:20px;
width:max-content;
animation:scrollProducts 25s linear infinite;
}

/* pause hover */

.marquee-track:hover{
animation-play-state:paused;
}

.mini-product{

min-width:120px;
height:120px;
background:white;
border-radius:10px;
padding:10px;
text-align:center;
transition:.3s;
cursor:pointer;

}

.mini-product img{

width:100%;
height:70px;
object-fit:cover;
border-radius:6px;

}

.mini-product p{

font-size:12px;
font-weight:600;
margin-top:6px;

}

.mini-product:hover{

transform:scale(1.08);
box-shadow:0 6px 20px rgba(0,0,0,0.4);

}

@keyframes scrollProducts{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/**/