*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
min-height:100vh;
}

/* VIDEO BACKGROUND */

#bgvideo{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
filter:brightness(25%);
}

/* HERO */

.container{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
min-height:100vh;
padding:40px;
color:white;
}

/* HERO */

.hero{

max-width:500px;
}

.hero h1{
font-size:60px;
margin-bottom:10px;
}

.hero h2{
font-size:28px;
font-weight:300;
margin-bottom:20px;
}

.hero p{
font-size:18px;
line-height:1.6;
color:#ddd;
margin-bottom:30px;
}

/* CTA */

.cta{
display:inline-block;
padding:14px 28px;
background:white;
color:black;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.cta:hover{
background:#eaeaea;
}

/* PRIX */

.price{
margin-top:15px;
}

.old{
text-decoration:line-through;
color:#ff6b6b;
font-size:28px;
margin-right:10px;
}

.new{
color:#00ff99;
font-size:42px;
font-weight:bold;
}

.promo{
margin-top:10px;
display:inline-block;
background:rgba(195, 32, 32, 0.6);
padding:8px 14px;
border-radius:6px;
}

/* GALERIE */

.gallery{
display:flex;
align-items:center;
gap:20px;
}

.gallery img{
width:32vw;
max-width:900px;
border-radius:10px;
box-shadow:0 0 20px rgba(0,0,0,0.8);
}

/* BOUTONS */

/* BOUTON RETOUR */
.back-btn{
position:fixed;
top:20px;
left:20px;
background:white;
color:black;
padding:10px 15px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

#bback-container {
    margin: 2%;
}

button{
background:rgba(255,255,255,0.9);
border:none;
font-size:22px;
padding:12px 20px;
cursor:pointer;
border-radius:6px;
}

button:hover{
background:white;
}
/* CARD CONTACT */
.contact-card{
margin-top:30px;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
padding:20px 25px;
border-radius:10px;
max-width:350px;
width:100%;
box-shadow:0 0 15px rgba(0,0,0,0.5);
}

.contact-card h3{
margin-bottom:10px;
color: #eae5e5;
}

.contact-card p{
font-size:14px;
color:#ddd;
margin:5px 0;
}
/* RESPONSIVE */

@media screen and (max-width: 600px){

.container{
flex-direction:column;
gap:30px;
}

.hero{
max-width:90%;
}

.hero h1{
font-size:36px;
}

.hero h2{
font-size:20px;
}

.hero p{
font-size:16px;
}

/* GALERIE MOBILE */

.gallery{
position:relative;
margin-top:30px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
}

.gallery img{
width:70vw;
}

/* BOUTONS */

button{
font-size:18px;
padding:10px 15px;
}

#bback-container {
    margin: 10%;
}

.new{
font-size:30px;
}

.old{
font-size:18px;
}

}