:root{
  --rose:#FF4F7B;
  --jaune:#FFD166;
  --menthe:#06D6A0;
  --blanc:#FAFAFA;
  --noir:#121212;
  --gris-900:#1e1e1e;
  --gris-700:#3a3a3a;
  --gris-500:#6b6b6b;
  --gris-300:#e9e9e9;
  --rayon:20px;
  --contenu:1200px;
  --ombre:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--blanc); color:var(--gris-900);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; line-height:1.2; margin:0 0 .5rem}
h1{font-size:clamp(2rem, 3vw + 1rem, 3rem)}
h2{font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem)}
h3{font-size:1.25rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--contenu); margin:0 auto; padding:0 1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:none; cursor:pointer; font-weight:600; padding:.9rem 1.2rem; border-radius:999px; transition:transform .15s ease, box-shadow .2s ease}
.btn:focus-visible{outline:3px solid var(--gris-300); outline-offset:3px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--rose); color:white; box-shadow:var(--ombre)}
.btn-secondary{background:var(--jaune); color:#221}
.btn-ghost{background:transparent; color:var(--gris-900)}
.pill{display:inline-block; font-size:.8rem; padding:.25rem .6rem; border-radius:999px; background:var(--blanc); color:var(--rose); border:1px solid rgba(0,0,0,.06)}
.tag{font-size:.75rem; font-weight:600; color:white; background:rgba(0,0,0,.55); padding:.35rem .6rem; border-radius:8px; position:absolute; top:.8rem; left:.8rem}
/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(250,250,250,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #f1f1f1}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
.logo-mark{width:28px; height:28px; border-radius:8px; background:conic-gradient(from 180deg, #ff8aa6, var(--rose) 60%, #ff8aa6); position:relative; box-shadow:0 6px 16px rgba(255,79,123,.35)}
.logo-mark:after{content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:white; right:-3px; top:-3px; box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.logo b{font-family:'Poppins',sans-serif; font-size:1.15rem}
nav ul{display:flex; list-style:none; gap:1rem; padding:0; margin:0}
nav a{padding:.5rem .7rem; border-radius:10px}
nav a:hover, nav a[aria-current="page"]{background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06)}
.nav-cta{display:flex; gap:.6rem; align-items:center}
/* Mobile */
.burger{display:none; background:transparent; border:none; padding:.4rem}
.burger svg{width:28px; height:28px}
@media (max-width: 900px){
  nav ul{display:none}
  .burger{display:block}
  .nav.open nav ul{display:flex; position:absolute; left:0; right:0; top:68px; background:var(--blanc); padding:1rem; flex-direction:column; gap:.2rem; border-bottom:1px solid #eee}
}
/* Hero */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero .bg{position:absolute; inset:0; background:
  radial-gradient(1200px 600px at -10% -10%, rgba(255,79,123,.10), transparent 40%),
  radial-gradient(800px 400px at 110% -20%, rgba(6,214,160,.10), transparent 40%),
  linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 85%),
  url('https://images.unsplash.com/photo-1524255684952-d7185b509571?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
  z-index:-1; filter:saturate(1.05)}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; padding:4rem 1rem 3rem}
.hero-copy p{font-size:1.1rem; color:#333; margin:.8rem 0 1.6rem}
.hero .cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.hero .card{background:white; border-radius:var(--rayon); padding:1rem; box-shadow:var(--ombre)}
@media (max-width: 900px){.hero .container{grid-template-columns:1fr; padding:3rem 1rem}}
/* Sections */
section{padding:2.8rem 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.section-head p{color:var(--gris-500); margin:0}
/* Grids & Cards */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem}
@media (max-width: 980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:white; border-radius:var(--rayon); overflow:hidden; box-shadow:var(--ombre); display:flex; flex-direction:column}
.card .media{position:relative; aspect-ratio:16/9; background:#f7f7f7}
.card .body{padding:1rem}
.card .meta{display:flex; align-items:center; gap:.6rem; color:var(--gris-500); font-size:.85rem}
.card .actions{margin-top:auto; padding:0 1rem 1rem}
/* Top sites */
.site-card{display:grid; grid-template-columns:72px 1fr; gap:1rem; align-items:center; padding:1rem; border-radius:var(--rayon); background:linear-gradient(180deg, #fff, #fff6); box-shadow:var(--ombre)}
.site-logo{width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg, var(--rose), #ff8aa6)}
.stars{display:inline-flex; gap:2px}
.stars svg{width:18px; height:18px; fill:gold}
.site-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
/* Newsletter */
.newsletter{background:linear-gradient(140deg, rgba(6,214,160,.15), rgba(255,209,102,.18)); border:1px dashed rgba(0,0,0,.06); border-radius:24px; padding:2rem; box-shadow:var(--ombre)}
.newsletter form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.newsletter input[type=email]{flex:1 1 260px; padding:1rem; border-radius:999px; border:1px solid var(--gris-300); font-size:1rem}
/* Footer */
footer{margin-top:2rem; border-top:1px solid #efefef; background:#fff}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem; padding:2rem 0}
.social{display:flex; gap:.6rem}
.social a{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid #eee}
.legal{font-size:.9rem; color:var(--gris-500); padding:1rem 0; border-top:1px solid #f2f2f2}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width: 600px){.footer-grid{grid-template-columns:1fr}}
/* Utilities */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.prose p{margin:.6rem 0}
.prose ul{padding-left:1.2rem}
.breadcrumbs{font-size:.9rem; color:var(--gris-500); margin:.5rem 0 1rem}
kbd{background:#fff; border:1px solid #eee; border-bottom-width:2px; border-radius:6px; padding:.1rem .4rem; font-size:.9em}