/* -------------------------
   Sunny Café — Styles
   Charte : Playfair Display (titres), Lato (texte)
   Palette : #000500 (rich black), #362417 (coffee), #92817A (taupe),
             #F1DABF (sand), #FFFBFF (paper)
-------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root{
  --rich-black:#000500;
  --coffee:#362417;
  --taupe:#92817A;
  --sand:#F1DABF;
  --paper:#FFFBFF;
  --radius:18px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--coffee)}
body{font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6}

/* Layout (zoning) */
.site-wrap{max-width:var(--maxw); margin:0 auto; padding:1rem}
header.site-header,
nav.site-nav,
main.site-main,
aside.site-sidebar,
footer.site-footer{
  border:2px solid var(--taupe);
  border-radius:var(--radius);
  margin:1rem 0;
  background:white;
}

/* Header */
.site-header{padding:1.25rem 1.5rem; text-align:center}
.brand{font-family:'Playfair Display', serif; font-size:2rem; margin:0; letter-spacing:.5px}
.tagline{color:var(--taupe); margin:.25rem 0 0}

/* Navigation */
.site-nav{padding:.5rem 1rem}
.nav-list{display:flex; gap:.75rem; flex-wrap:wrap; list-style:none; margin:0; padding:0; justify-content:center}
.nav-list a{
  display:block; padding:.6rem 1rem; text-decoration:none; color:var(--rich-black); border:1px solid var(--taupe);
  border-radius:999px; transition:transform .08s ease, background .2s;
}
.nav-list a:hover{background:var(--sand); transform:translateY(-1px)}

/* Main + Sidebar grid */
.content-grid{display:grid; grid-template-columns:2fr 1fr; gap:1rem}
@media (max-width: 900px){ .content-grid{grid-template-columns:1fr} }

/* Cards / blocks */
.block{padding:1.25rem 1.25rem 1.5rem}
.block h2, .block h3{font-family:'Playfair Display',serif; margin-top:0}
.muted{color:var(--taupe)}

/* Homepage hero (texte seulement) */
.hero{padding:1rem 1.25rem; border:2px dashed var(--sand); border-radius:var(--radius); background:#fffdf9}
.hero h2{margin:.25rem 0 0}

/* Menu */
.menu-section{margin-bottom:1rem; border:1px solid var(--sand); border-radius:var(--radius); padding:1rem}
.menu-items{display:grid; grid-template-columns:1fr auto; gap:.2rem .75rem; align-items:baseline}
.menu-name{font-weight:600}
.menu-desc{color:var(--taupe); font-size:.95rem}
.menu-price{font-variant-numeric: tabular-nums}

/* Galerie (placeholders en b&w pour respecter la consigne "structure") */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.gallery-item{aspect-ratio:1/1; background:repeating-linear-gradient(45deg,#eee,#eee 12px,#fff 12px,#fff 24px); border:1px solid #ddd; border-radius:12px}
@media (max-width: 900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
.gallery-item img {width:200px; }

/* Contact */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.form-grid textarea{grid-column:1/-1; min-height:140px}
label{font-weight:600}
input, textarea{width:100%; padding:.65rem .8rem; border:1px solid #ccc; border-radius:10px; font:inherit}
button.btn{appearance:none; border:none; background:var(--coffee); color:#fff; padding:.7rem 1.1rem; border-radius:999px; cursor:pointer}
button.btn:hover{background:var(--rich-black)}

/* Sidebar */
.sidebar-card{border:1px dashed var(--taupe); border-radius:var(--radius); padding:1rem; margin-bottom:1rem}
.sidebar-card h3{margin:.25rem 0 .5rem}

/* Footer */
.site-footer{padding:1rem; text-align:center; color:var(--taupe); font-size:.95rem}
.site-footer a{color:inherit}


.flash--error   { border: 1px solid #d33; border-radius: 12px; }
.flash--success { border: 1px solid #8bbf8b; border-radius: 12px; }