:root{--vert:#4a6150;--sauge:#bcc2ad;--or:#db8264;--jaune:#e8b05a;--fond:#232623;--carte:#2c322d;--txt:#e9e6dc}
*{box-sizing:border-box}
body{margin:0;font:18px/1.7 Georgia,'Times New Roman',serif;color:var(--txt);background:var(--fond)}
a{color:var(--or)}
header{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;padding:22px 28px;background:linear-gradient(#000a,#0000)}
nav a{color:var(--txt);margin-left:26px;text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:13px}
nav a:hover{color:var(--or)}
.hero{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 20px 70px;background:linear-gradient(#0008,#232623) ,#313131 url(/accueil.jpg) center/cover}
.hero.court{min-height:54vh}
.hero h1{font-weight:normal;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:.12em;text-transform:uppercase;margin:0}
.hero p{font-style:italic;color:var(--sauge);font-size:1.25rem;margin:10px 0 0}
.btn{display:inline-block;border:1px solid var(--or);color:var(--or);padding:12px 30px;margin-top:26px;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:13px}
.btn:hover{background:var(--or);color:#fff}
main{max-width:1000px;margin:auto;padding:50px 22px}
h2{font-weight:normal;text-transform:uppercase;letter-spacing:.2em;text-align:center;color:var(--jaune);font-size:1.3rem;margin:50px 0 26px}
h2:after{content:"";display:block;width:60px;height:1px;background:var(--or);margin:14px auto 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.card{position:relative;background:var(--carte)}
.photo{height:230px;display:flex;align-items:center;justify-content:center;font:italic 18px Georgia;color:#fff;text-shadow:0 1px 6px #000;background:linear-gradient(#0005,#0005),var(--img) center/cover}
.card .t{padding:20px 22px 26px;text-align:center}
.card b{display:block;text-transform:uppercase;letter-spacing:.15em;color:#fff;font-size:1rem;font-weight:normal}
.card span{color:var(--sauge);font-size:.95rem}
.menu{max-width:680px;margin:0 auto;border:1px solid var(--vert);padding:10px 34px 30px}
.menu h3{font-weight:normal;color:var(--or);text-transform:uppercase;letter-spacing:.18em;text-align:center;margin:30px 0 4px}
.menu p{text-align:center;margin:0;color:var(--sauge)}
.intro{text-align:center;max-width:680px;margin:0 auto;color:var(--sauge);font-style:italic}
footer{text-align:center;padding:40px 20px;background:#1a1d1b;color:var(--sauge);font-size:14px;letter-spacing:.1em}
.banner{position:relative;z-index:3;background:var(--jaune);color:#333;text-align:center;padding:4px;font:13px sans-serif}
@media(max-width:600px){
body{font-size:16px}
header{justify-content:center;padding:14px 10px}
nav a{margin:0 9px;font-size:11px;letter-spacing:.1em}
.hero{min-height:70vh;padding:100px 16px 50px}
.hero.court{min-height:45vh}
main{padding:30px 14px}
.menu{padding:6px 18px 24px}
.photo{height:200px}
}