:root {
  --bg: #f6f9fc;
  --card: #ffffff;
  --accent: #1e88e5;
  --muted: #6b7280;
  --radius: 12px;
  --gap: 1rem;
}

* { box-sizing: border-box; }
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg); /* Couleur unie au lieu du dégradé */
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:1rem 1.25rem;
}

.site-header{
  padding:1rem 0 1.25rem;
  background: transparent;
  border-bottom: none;
}
.top-logo{display:flex;justify-content:center;margin:1.5rem 0 0.75rem}
.top-logo img.top-logo-img{width:clamp(180px, 36vw, 360px);max-width:92%;height:auto;display:block;object-fit:contain;padding:0.4rem;background:transparent;border-radius:8px;filter:drop-shadow(0 4px 12px rgba(11,95,199,0.12))}
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:1.25rem;
  margin-top:1.5rem;
}
.card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem 1.25rem;
  background:var(--card);
  border:1px solid rgba(30,136,229,0.08);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--accent);
  font-weight:600;
  font-size:0.95rem;
  box-shadow:0 4px 12px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height:72px;
  text-align:center;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), #4CAF50);
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.card:hover::before{transform:translateX(0)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(16,24,40,0.1), 0 4px 8px rgba(16,24,40,0.08);border-color:rgba(30,136,229,0.15)}
.card:focus{outline:3px solid rgba(30,136,229,0.25);outline-offset:3px}

.site-footer{margin-top:2rem;padding:2rem 0;color:var(--muted);font-size:0.95rem}

/* Large screens */
@media (min-width:760px){
  .cards{grid-template-columns: repeat(4, 1fr);}
}

@media (max-width:420px){
  .card{padding:0.95rem;font-size:0.95rem}
}

@media (prefers-reduced-motion:reduce){
  .card{transition:none}
}

.hero{display:flex;flex-wrap:wrap;gap:32px;padding:32px 0 8px;align-items:center}
.hero-text{flex:1 1 320px;min-width:280px}
.hero-chip{display:inline-block;padding:6px 14px;border-radius:999px;font-size:0.85em;letter-spacing:0.08em;text-transform:uppercase;background:#e6ecff;color:#0b5fc7;font-weight:700;margin-bottom:16px}
.hero-text h1{font-size:2.4rem;margin:0;color:#0f172a;letter-spacing:-0.02em}
.hero-sub{color:#6b7280;max-width:480px;margin:12px 0 24px;font-size:1.05rem;line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta{padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s}
.cta.primary{background:#0b5fc7;color:#fff;box-shadow:0 12px 24px rgba(11,95,199,.2)}
.cta.primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(11,95,199,.3)}
.cta.ghost{border:1px solid rgba(11,95,199,.2);color:#0b5fc7;background:#fff}
.cta.ghost:hover{border-color:#0b5fc7;box-shadow:0 16px 26px rgba(11,95,199,.15)}
.hero-card{flex:0 1 320px;background:#fff;border-radius:18px;padding:24px;box-shadow:0 16px 40px rgba(15,23,42,.12);border:1px solid rgba(11,95,199,.08);min-height:260px}
.hero-card-label{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 8px;font-weight:600}
.hero-card-title{font-size:1.5rem;margin:0 0 10px;color:#0b5fc7}
.hero-card-text{margin:0 0 18px;color:#475569;line-height:1.6}
.hero-card-pill{display:flex;flex-wrap:wrap;gap:8px}
.hero-card-pill span{background:rgba(11,95,199,.08);color:#0b5fc7;font-weight:600;padding:8px 12px;border-radius:999px;font-size:0.9rem}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:28px}
.cards-grid .card{border-radius:16px;padding:18px 14px;background:linear-gradient(135deg,#ffffff 0%,#f5f8ff 100%);border:1px solid rgba(11,95,199,.12);color:#0b5fc7;font-weight:700;letter-spacing:0.02em;transition:transform .2s,box-shadow .2s}
.cards-grid .card:focus{outline:3px solid rgba(11,95,199,.25);outline-offset:3px}
.cards-grid .card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,95,199,.18)}

@media (max-width:768px){
  .hero-text h1{font-size:2rem}
  .hero-card{flex:1 1 100%}
  .hero-card-pill{justify-content:flex-start}
}