/* Reset & tokens */
*,*::before,*::after{box-sizing:border-box} *{margin:0}
html,body{height:100%} html:focus-within{scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit}

:root{
  --brand:#0E3F43; --brand-ink:#093135; --accent:#B89B5E;
  --bg:#ffffff; --bg-alt:#f7f9fa; --ink:#1F2427; --muted:#66707a; --border:#E6EBEF; --card:#ffffff;
  --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.08); --shadow-strong:0 25px 60px rgba(0,0,0,.12);
  --font:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-hero:clamp(34px, 5vw, 60px); --fs-h2:clamp(22px, 2.5vw, 30px); --fs-h3:clamp(18px, 2vw, 22px); --fs-body:clamp(16px, 1.2vw, 18px); --fs-small:clamp(13px, 1vw, 15px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0f10; --bg-alt:#111518; --ink:#E7ECEF; --muted:#A5B0BA; --border:#1e262b; --card:#12161a;
         --shadow:0 12px 40px rgba(0,0,0,.35); --shadow-strong:0 30px 70px rgba(0,0,0,.45);
         --brand:#5AC0C7; --brand-ink:#7DD3D9; --accent:#D9C28D; }
}

body{font-family:var(--font); line-height:1.6; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}

.bg-grad{ position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.grain{ position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.05; background-image:radial-gradient(#000 0.7px, transparent 0.7px); background-size:3px 3px; mix-blend-mode:multiply; }

.top{ position:sticky; top:0; backdrop-filter:saturate(1.2) blur(6px);
      background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--border); z-index:5; }
.wrap{ width:min(1120px,92%); margin:0 auto; }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 10px; }
.brand{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.02em; }

/* Logo PNG recoloré via mask (light/dark) */
.logo-mask{
  width:28px; height:28px; display:inline-block; flex:0 0 28px;
  -webkit-mask: url('/assets/logo.png') center / contain no-repeat;
          mask: url('/assets/logo.png') center / contain no-repeat;
  background-color: var(--ink); /* clair */
}
@media (prefers-color-scheme: dark){
  .logo-mask{ background-color: #E6F0F1; } /* sombre */
}

.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none;
      background:linear-gradient(180deg, var(--brand), var(--brand)); color:#fff; border:1px solid var(--brand);
      font-weight:800; letter-spacing:.02em; box-shadow:var(--shadow); transition:transform .18s var(--ease), filter .2s var(--ease); }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05) }

.hero{ width:min(1120px,92%); margin:0 auto; padding: clamp(30px, 5vw, 70px) 10px 0; text-align:center; }
.hero h1{ font-size:var(--fs-hero); letter-spacing:-.02em; margin-bottom:12px;
          background:linear-gradient(90deg, var(--ink), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ color:var(--muted); font-size:var(--fs-body) }

.router{ width:min(1120px,92%); margin: 20px auto 0; display:grid; gap:12px; grid-template-columns: 1fr; }
.row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.label{ color:var(--muted); font-size:var(--fs-small); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-right:6px }
.chip{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card);
       color:var(--ink); font-weight:700; cursor:pointer; user-select:none;
       transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.chip:hover{ transform:translateY(-1px) }
.chip.active{ border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.help{ margin-left:8px; color:var(--muted); font-size:var(--fs-small); }

.categories{ width:min(1120px,92%); margin: 22px auto 30px; display:grid; gap:28px; }
.hidden{ display:none !important; }

.group-title{ font-size:var(--fs-h2); color:var(--brand); margin:8px 0 10px; }
.cards{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.card{
  grid-column: span 4;
  display:flex; align-items:flex-start; gap:14px; text-decoration:none; color:var(--ink);
  background: linear-gradient(0deg, var(--card), var(--card)) padding-box,
              linear-gradient(135deg, color-mix(in srgb, var(--brand) 24%, transparent), transparent) border-box;
  border:1px solid var(--border); border-radius: var(--radius); padding: 16px 16px; box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-strong);
             border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.card h3{ font-size:var(--fs-h3); margin:0 0 4px; color:var(--brand) }
.card p{ margin:0; color:var(--muted); font-size:var(--fs-small) }
.ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
      background:conic-gradient(from 0deg, color-mix(in srgb, var(--brand) 84%, transparent), color-mix(in srgb, var(--accent) 84%, transparent), color-mix(in srgb, var(--brand) 84%, transparent));
      color:#fff; border:1px solid color-mix(in srgb, var(--brand) 40%, transparent) }

@media (max-width: 1024px){ .card{ grid-column: span 6 } }
@media (max-width: 720px){ .card{ grid-column: 1 / -1 } }

.footer{ width:min(1120px,92%); margin: 28px auto 24px; border-top:1px solid var(--border); color:var(--muted);
         padding:16px 10px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer a{ color:inherit } .footer a:hover{ color:var(--brand) }