:root{
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-weak: #e8efff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --radius: 14px;
  --container: 1100px;
  --t: 600ms;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--text); background: var(--bg); line-height:1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

.container{ max-width: var(--container); margin-inline: auto; padding: 0 20px; }

/* Header + brand */
.site-header{
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.7));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand{ display:inline-flex; align-items:center; gap:14px; padding: 12px 0; text-decoration:none; color:inherit; }
.brand__logo{
  width: clamp(64px, 10vw, 110px); height:auto; display:block;
  visibility: hidden; opacity: 0; transition: opacity var(--t) ease; /* révélé via .is-visible */
}
.brand__logo.is-visible{ visibility: visible; opacity: 1; }
.brand__title{ font-size: clamp(18px, 2.2vw, 22px); font-weight:650; }

/* Main content sits close to the header */
.content{ padding: 8px 0 48px; }

/* Project list */
.projects{ display:block; }
.project-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  opacity:0; transform: translateY(6px); transition: opacity var(--t) ease, transform var(--t) ease; }
.project-list.is-revealed{ opacity:1; transform:none; }

@media (min-width: 720px){ .project-list{ grid-template-columns: 1fr; } }

.project-card{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  text-decoration:none; color:inherit; box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.project-card:hover, .project-card:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.08);
  outline:none;
}
.project-card__logo{
  width: clamp(44px, 10vw, 64px); height: clamp(44px, 10vw, 64px);
  border-radius: 8px; background: var(--accent-weak); padding: 6px; object-fit: contain;
}
.project-card__text{ min-width:0; }
.project-card__title{ font-size: clamp(16px, 2.2vw, 18px); margin:0 0 4px 0; }
.project-card__desc{ margin:0; color:var(--muted); font-size: clamp(14px, 2vw, 15px); }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:#fff6; backdrop-filter: blur(6px); position: sticky; bottom:0; }
.site-footer .container{ padding:10px 0; }

/* No-JS fallbacks */
html.no-js .brand__logo{ visibility: visible; opacity: 1; }
html.no-js .project-list{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .project-list{ transition:none !important; }
  .brand__logo{ transition:none !important; }
}