/* ==========================
   SAVEURS BY RAPHAËL
   MENU.CSS
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#0b0b0b;

color:#fff;

line-height:1.7;

}

/*================ HEADER ================*/

header{

padding:70px 20px;

text-align:center;

background:linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("images/banniere.png");

background-size:cover;

background-position:center;

border-bottom:2px solid #b58a45;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

.logo{

width:150px;

border-radius:50%;

margin-bottom:20px;

box-shadow:0 0 25px rgba(181,138,69,.5);

}

header h1{

font-family:'Playfair Display',serif;

font-size:60px;

color:#d8b26e;

margin-bottom:20px;

}

header p{

max-width:700px;

margin:auto;

font-size:18px;

color:#ddd;

}

.retour{

display:inline-block;

margin-top:35px;

padding:15px 35px;

border:2px solid #b58a45;

color:#d8b26e;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.retour:hover{

background:#b58a45;

color:#fff;

}

/*================ SECTION ================*/

.categorie{

padding:90px 0;

}

.categorie h2{

text-align:center;

font-family:'Playfair Display',serif;

font-size:48px;

margin-bottom:60px;

color:#d8b26e;

position:relative;

}

.categorie h2::after{

content:"";

width:120px;

height:3px;

background:#b58a45;

display:block;

margin:20px auto;

}

/*================ BLOCS ================*/

.bloc{

background:#111;

border:1px solid rgba(181,138,69,.35);

border-radius:18px;

padding:35px;

margin-bottom:35px;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.4);

}

.bloc:hover{

transform:translateY(-8px);

border-color:#d8b26e;

box-shadow:0 20px 45px rgba(181,138,69,.25);

}

.bloc h3{

font-family:'Playfair Display',serif;

font-size:30px;

color:#d8b26e;

margin-bottom:25px;

}

.bloc ul{

list-style:none;

}

.bloc li{

padding:14px 0;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:17px;

color:#eee;

}

.bloc li:last-child{

border-bottom:none;

}

.bloc li::before{

content:"✦";

color:#d8b26e;

margin-right:12px;

}

/*================ FOOTER ================*/

footer{

margin-top:70px;

padding:60px 20px;

text-align:center;

background:#080808;

border-top:2px solid #b58a45;

}

.footer-logo{

width:90px;

margin-bottom:20px;

border-radius:50%;

}

footer p{

margin-top:10px;

color:#ccc;

}

/*================ SCROLLBAR ================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#b58a45;

border-radius:50px;

}

/*================ RESPONSIVE ================*/

@media(max-width:900px){

header h1{

font-size:42px;

}

.categorie h2{

font-size:36px;

}

.bloc{

padding:25px;

}

.bloc h3{

font-size:24px;

}

}

@media(max-width:600px){

header{

padding:50px 15px;

}

.logo{

width:110px;

}

header h1{

font-size:34px;

}

header p{

font-size:16px;

}

.retour{

width:100%;

text-align:center;

}

.categorie{

padding:60px 15px;

}

.categorie h2{

font-size:30px;

}

.bloc{

padding:20px;

}

.bloc li{

font-size:15px;

}

}