/* PAGE COMPLETE */

body{

margin:0;

font-family: Arial, sans-serif;

background: linear-gradient(145deg,#5a0a14,#7a1422);

color:white;

}


/* HEADER */

header{

text-align:center;

padding:30px;

background:linear-gradient(145deg,#6b0f1a,#8b1e2d);

box-shadow:0 8px 20px rgba(0,0,0,0.4);

}

header h1{

font-size:32px;

letter-spacing:2px;

}

.contact span{

margin:10px;

}


/* SLIDER (zone des images) */

.hero{

height:400px;

overflow:hidden;

position:relative;

background:black;

box-shadow:0 15px 35px rgba(0,0,0,0.5);

}

.hero img{

width:100%;

height:400px;

object-fit:cover;

position:absolute;

opacity:0;

transition:opacity 1s;

}

.hero img.active{

opacity:1;

}


/* TEXTE */

.presentation{

text-align:center;

padding:60px;

}

.presentation h2{

font-size:36px;

}

.presentation p{

font-size:20px;

max-width:700px;

margin:auto;

}


/* BOUTON 3D */

.btn{

background:white;

color:#6b0f1a;

padding:15px 35px;

border-radius:10px;

text-decoration:none;

font-weight:bold;

display:inline-block;

margin-top:30px;

box-shadow:0 8px 20px rgba(0,0,0,0.4);

transition:0.3s;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,0.5);

}


/* FOOTER */

footer{

text-align:center;

padding:40px;

background:#4a0710;

margin-top:40px;

}
.collection{

padding:40px;
text-align:center;

}

.slider{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

}

.slides{

display:flex;
overflow:hidden;
width:350px;

}

.slides img{

width:350px;
height:250px;
object-fit:cover;

}

.prev,
.next{

font-size:30px;
background:#6b0f1a;
color:white;
border:none;
padding:10px;
cursor:pointer;

}

.cart{

background:#f5f5f5;
padding:40px;
text-align:center;

}

.btn{

background:#6b0f1a;
color:white;
padding:12px 25px;
text-decoration:none;
margin:10px;
display:inline-block;
border-radius:6px;

}