/* DA inspirée de ta carte : noir/ivoire + textures légères */
:root{
  --ivory:#F3F0E9; --ink:#111111; --text:#ECECEC; --muted:#B8B8B8;
  --brand:#FFFFFF; --ring:rgba(255,255,255,.22); --hair:#e1ded7;
  --max:1120px; --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;background:var(--ivory);color:var(--ink)}
img{max-width:100%;height:auto;display:block;border-radius:14px}
.container{width:min(100%,var(--max));margin-inline:auto;padding:24px}
.muted{color:var(--muted)}
.lead{max-width:60ch}

/* Grain global */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;z-index:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/></svg>')}

/* Header */
.site-header{position:sticky;top:0;background:color-mix(in oklab, var(--ivory) 92%, white);border-bottom:1px solid var(--hair);z-index:30}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.18em}
.brand-text{font-size:.95rem}
.logo{color:var(--ink)}
.nav-toggle{display:none}
.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.menu a{padding:8px 10px;border-radius:12px;color:var(--ink);font-weight:600;position:relative}
.menu a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:currentColor;opacity:.15;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu a:hover::after{transform:scaleX(1)}
.menu .cta{background:var(--ink);color:var(--text)}
@media (max-width:760px){
  .nav-toggle{display:inline-flex;background:transparent;border:1px solid #d6d2ca;padding:8px 12px;border-radius:12px;color:var(--ink)}
  .menu{display:none;flex-direction:column;position:absolute;inset:58px 16px auto 16px;background:var(--ivory);padding:12px;border-radius:16px;border:1px solid var(--hair)}
  .menu.open{display:flex}
}

/* Hero */
.hero{position:relative;padding:0;z-index:1}
.hero-grid{display:grid;grid-template-columns:0.9fr 1.1fr}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-logo{background:var(--ivory);display:grid;place-items:center;padding:48px}
.k-tile{background:#F2EEE7;border-radius:12px;padding:28px;box-shadow:inset 0 0 0 1px #e2dfd7, 0 12px 30px rgba(0,0,0,.06)}
.shadow-xl{box-shadow:0 30px 50px rgba(0,0,0,.08)}
.k-mark{width:160px;height:160px;display:block;fill:#000}
.hero-copy{position:relative;background:var(--ink);color:var(--text);padding:56px 24px;overflow:hidden}
.hero-copy::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:60%;background:radial-gradient(120px 80px at 20% 20%, rgba(255,255,255,.12), transparent 60%), radial-gradient(160px 100px at 80% 0%, rgba(255,255,255,.08), transparent 70%);pointer-events:none}
.accent-bar{width:64px;height:2px;background:rgba(255,255,255,.5);margin:0 0 14px}
.eyebrow{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase}
.hero h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin:6px 0 10px;text-transform:uppercase;letter-spacing:.12em}
.contacts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.contacts a{color:var(--text)}
.tagline{font-size:clamp(18px,2.4vw,22px);margin:12px 0 18px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:var(--brand);color:#000;border:1px solid transparent;text-decoration:none;font-weight:700;position:relative;overflow:hidden}
.btn.sheen::after{content:"";position:absolute;top:0;left:-120%;height:100%;width:120%;transform:skewX(-20deg);background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);transition:transform .8s ease}
.btn.sheen:hover::after{transform:translateX(200%)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--text)}
.btn.small{padding:10px 12px;font-size:14px}
.hero-gridlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);background-size:40px 40px;opacity:.35}

/* Sections */
.section{padding:56px 0;position:relative}
.section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cards{grid-template-columns:1fr}}
.card{background:#ffffff;border:1px solid #ece9e2;border-radius:14px;padding:18px}
.card-lined{background:linear-gradient(#fff,#fff) padding-box, conic-gradient(from 180deg at 50% 0%, #eee, #faf7f0, #eee) border-box; border:1px solid transparent}
.card-soft{background:#ffffffcc;border:1px solid #ece9e2;border-radius:14px;padding:18px;backdrop-filter:saturate(120%) blur(4px)}

/* Portfolio */
.project{padding:0;overflow:hidden}
.project img{border-radius:14px 14px 0 0}
.project-body{padding:14px}

/* Grille contact */
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.contact{display:grid;gap:12px}
label{display:grid;gap:6px;font-weight:600}
input,textarea{background:#fff;color:#111;border:1px solid #dedad3;border-radius:14px;padding:12px;outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring)}
.form-status{margin-top:8px;font-weight:600}
.form-status.ok{color:#155724}
.form-status.err{color:#7f1d1d}

/* Footer */
.site-footer{border-top:1px solid var(--hair);padding:24px 0;margin-top:40px;background:#fff}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer-grid a{color:#4b4b4b}

/* Accessibilité */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;z-index:999;background:#000;color:#fff;padding:8px 10px;border-radius:8px}