/* styles.css — thème clair minimaliste, sans dépendance externe */
:root{
  --bg: #f3f4f6;
  --grid: rgba(17,24,39,.05);
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --accent: #2563eb;
  --icon-bg: #e8efff;
  --radius-card: 10px;
  --radius-btn: 12px;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background-color: var(--bg);
  /* trame de grille discrète */
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 56px;
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:#fff; border:2px solid var(--accent); border-radius:8px; z-index:1000;
}

header.site-header{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
header .brand{
  display:flex; align-items:center; gap:12px; flex:1;
}
header img.logo{
  height:100px; width:auto; display:block;
}
header h1{
  font-size: clamp(20px, 2.4vw, 28px);
  margin:0; letter-spacing:.2px;
}
header p.subtitle{
  margin:0; color:var(--muted); font-size:14px;
}

main{
  margin-top:24px;
}

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; text-decoration:none; color:var(--text);
  background:var(--card); border:1px solid var(--border);
  border-radius: var(--radius-card);
  padding:22px 18px;
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
}
.tile:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-md);
  border-color: #d8dbe2;
}
.tile:active{ transform: translateY(0); }
.tile:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.tile img{
  width: 96px; height: 96px; display:block; user-select:none;
}

.tile .label{
  font-size: 16px; font-weight:600;
}
.tile .hint{
  color: var(--muted); font-size: 13px;
}

footer.site-footer{
  margin-top:28px; color:var(--muted); font-size:13px; text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}