/* -------- Site 3 Final: Elegant with Profile & Contact Adjustments -------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia, 'Agrandir', serif;color:#2b2b2b;background:#fffdf8}
header{background:linear-gradient(135deg,#e5f3eb,#fff);border-bottom:1px solid #eee}
.wrap{width:min(1100px,92%);margin:auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.top .brand{display:flex;gap:10px;align-items:center;font-weight:700}
.top img{height:40px;width:40px;border-radius:10px;object-fit:cover}
nav a{text-decoration:none;color:#2b2b2b;margin-left:16px}
nav a:hover{border-bottom:2px solid #2b2b2b}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;padding:28px 0}
.hero h1{font-size:44px;margin:0}
.hero p{font-size:18px;line-height:1.6}
.hero .cover{border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.hero .cover img{width:100%;display:block}
h2{font-size:28px;margin:8px 0 14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid img{width:100%;height:180px;object-fit:cover;border-radius:10px;cursor:pointer}
blockquote{font-style:italic;background:#faf6ee;border-left:4px solid #e5d3b3;padding:12px 16px;border-radius:8px}
footer{border-top:1px solid #eee;padding:18px 0;margin-top:30px;text-align:center;color:#777}
/* Intro with profile */
.intro{display:grid;grid-template-columns:1fr 0.8fr;gap:20px;align-items:center}
.intro img{width:100%;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
/* Contact layout with vertical centering */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card img{width:100%;border-radius:12px}
small.hint{color:#777}
@media(max-width:950px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .intro{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:999}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px}
.lightbox.show{display:flex}
.close{position:absolute;top:20px;right:24px;font-size:28px;color:#fff;cursor:pointer}