:root{
    --bg:#080d14;
    --bg-soft:#0d131d;
    --card:#101821;
    --card-hover:#151f2b;
    --border:#263140;
    --text:#f7f8fb;
    --muted:#a9b2c2;
    --blue:#4f8dff;
    --violet:#7c6cff;
    --pink:#d64fd8;
    --gradient-primary:linear-gradient(90deg,#4f8dff 0%,#7c6cff 50%,#d64fd8 100%);
    --radius:12px;
}
*{box-sizing:border-box}
body{
    background:radial-gradient(circle at 50% 0%,#111b29 0%,var(--bg) 45%,#060910 100%);
    color:var(--text);
    font-family: "Manrope", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;    
    min-height:100vh
}
.theme-blue {
  --cat-color:#5B8CFF;
  --cat-light:#8DB0FF;
  --cat-border:rgba(91,140,255,.35);
  --cat-glow:rgba(91,140,255,.14);
  --cat-rank-bg:rgba(91,140,255,.20);
}

.theme-indigo {
  --cat-color:#6366F1;
  --cat-light:#A5B4FC;
  --cat-border:rgba(99,102,241,.35);
  --cat-glow:rgba(99,102,241,.14);
  --cat-rank-bg:rgba(99,102,241,.20);
}

.theme-violet {
  --cat-color:#8B5CF6;
  --cat-light:#C4B5FD;
  --cat-border:rgba(139,92,246,.35);
  --cat-glow:rgba(139,92,246,.14);
  --cat-rank-bg:rgba(139,92,246,.20);
}

.theme-fuchsia {
  --cat-color:#C084FC;
  --cat-light:#E9D5FF;
  --cat-border:rgba(192,132,252,.32);
  --cat-glow:rgba(192,132,252,.12);
  --cat-rank-bg:rgba(192,132,252,.18);
}

.theme-rose-soft {
  --cat-color:#FB7185;
  --cat-light:#FDA4AF;
  --cat-border:rgba(251,113,133,.30);
  --cat-glow:rgba(251,113,133,.11);
  --cat-rank-bg:rgba(251,113,133,.17);
}

.theme-cyan {
  --cat-color:#22D3EE;
  --cat-light:#67E8F9;
  --cat-border:rgba(34,211,238,.30);
  --cat-glow:rgba(34,211,238,.11);
  --cat-rank-bg:rgba(34,211,238,.18);
}

.theme-teal {
  --cat-color:#2DD4BF;
  --cat-light:#99F6E4;
  --cat-border:rgba(45,212,191,.30);
  --cat-glow:rgba(45,212,191,.11);
  --cat-rank-bg:rgba(45,212,191,.18);
}

.theme-emerald {
  --cat-color:#34D399;
  --cat-light:#A7F3D0;
  --cat-border:rgba(52,211,153,.30);
  --cat-glow:rgba(52,211,153,.11);
  --cat-rank-bg:rgba(52,211,153,.18);
}

.theme-lime {
  --cat-color:#A3E635;
  --cat-light:#D9F99D;
  --cat-border:rgba(163,230,53,.28);
  --cat-glow:rgba(163,230,53,.10);
  --cat-rank-bg:rgba(163,230,53,.16);
}

.theme-amber {
  --cat-color:#FBBF24;
  --cat-light:#FDE68A;
  --cat-border:rgba(251,191,36,.28);
  --cat-glow:rgba(251,191,36,.10);
  --cat-rank-bg:rgba(251,191,36,.16);
}

.theme-orange {
  --cat-color:#FB923C;
  --cat-light:#FDBA74;
  --cat-border:rgba(251,146,60,.28);
  --cat-glow:rgba(251,146,60,.10);
  --cat-rank-bg:rgba(251,146,60,.16);
}

.theme-slate {
  --cat-color:#94A3B8;
  --cat-light:#CBD5E1;
  --cat-border:rgba(148,163,184,.28);
  --cat-glow:rgba(148,163,184,.08);
  --cat-rank-bg:rgba(148,163,184,.15);
}
a{text-decoration:none}.site-header{background:rgba(8,13,20,.88);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.navbar{min-height:74px}.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;line-height:1.05;font-size:1.12rem}.brand img{border-radius:10px}.navbar-nav .nav-link{color:#fff;font-weight:650;padding:1.65rem .25rem;position:relative}.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--blue)}.navbar-nav .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gradient-primary);border-radius:999px}.icon-btn{width:40px;height:40px;border:1px solid var(--border);background:#0e1621;color:#fff;border-radius:10px;display:grid;place-items:center}.btn-gradient{background:var(--gradient-primary);border:0;color:#fff;font-weight:700;border-radius:9px;padding:.68rem 1.05rem}.btn-gradient:hover{color:#fff;filter:brightness(1.08)}
.hero{padding:4.4rem 0 2.2rem;text-align:center}
.hero h1{
    font-size:clamp(2rem,4vw,4rem);
    line-height:1.08;font-weight:850;
    letter-spacing:-.055em;margin-bottom:1rem}
.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#d2d7e1;font-size:1.13rem;margin-bottom:1.6rem}
.hero-search{max-width:none;margin:0 auto;display:flex;align-items:center;gap:.85rem;background:rgba(16,24,33,.8);border:1px solid var(--border);border-radius:10px;padding:.45rem .55rem .45rem 1.1rem;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.hero-search i{font-size:1.35rem;color:#fff}
.hero-search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:1.05rem;outline:0;height:48px}
.hero-search input::placeholder{color:#8e99aa}
.hero-search button{border:0;border-radius:8px;background:var(--gradient-primary);color:#fff;font-weight:800;padding:0 2.15rem;height:48px}.hero-stats{display:flex;justify-content:center;gap:4.5rem;flex-wrap:wrap;margin-top:1.3rem;color:#d7dbe3}.hero-stats i{color:var(--blue);margin-right:.55rem;font-size:1.2rem}
/*
.category-section{padding:0 0 2rem}.section-title{font-weight:800;font-size:1.15rem;margin-bottom:.8rem}
.section-title i{color:var(--blue);margin-right:.45rem}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}

.category-card{
    background:linear-gradient(180deg,rgba(18,27,38,.92),rgba(13,20,29,.92));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem 1.08rem;box-shadow:0 18px 50px rgba(0,0,0,.18);
    min-height:267px}
.category-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--cat-color) 75%, #ffffff 10%),
        color-mix(in srgb, var(--cat-color) 65%, transparent)
    );
    box-shadow: 0 0 18px color-mix(in srgb, var(--cat-color) 55%, transparent);
}
.category-card:hover{background:var(--card-hover);border-color:#334258}
.category-head{
    background: var(--cat-color);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.category-head h2{font-size:1.05rem;margin:0;font-weight:850}
.category-head h2 i{font-size:1.35rem;margin-right:.55rem;color:var(--blue)}
.category-head a,.more-link,.ranking-cta a{color:#6fa0ff;font-weight:700;font-size:.92rem}
.site-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-list li{display:grid;grid-template-columns:20px 24px minmax(90px,1fr) auto;align-items:center;gap:.5rem;min-height:28px}
.rank{color:#fff;font-size:.9rem}
.favicon{width:22px;height:22px;border-radius:5px;background:#f4f6fb;color:#132034;display:grid;place-items:center;font-size:.68rem;font-weight:900;line-height:1}.site-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tags{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:wrap}.tag{background:#1e2936;color:#c8d0dc;border-radius:6px;padding:.2rem .5rem;font-size:.72rem}.tag.gratuit,.tag.lgbtqplus{background:#0f332c;color:#65d7b0}.tag.premium{background:#372d0b;color:#ffd84d}.more-link{display:inline-block;margin-top:.85rem}.ranking-cta{margin-top:1rem;border:1px solid var(--border);border-radius:var(--radius);background:rgba(16,24,33,.82);padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.ranking-cta strong{font-size:1.08rem}.ranking-cta p{margin:.15rem 0 0;color:var(--muted)}.trophy{font-size:2rem;color:#ffd15c}
*/
.category-section{padding:0 0 2rem}

.section-title{
    font-weight:850;
    font-size:1.25rem;
    margin-bottom:1rem;
    letter-spacing:-.035em;
}
.section-title i{
    color:var(--blue);
    margin-right:.55rem;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.9rem;
}

/* CARD */
.category-card{
    position:relative;
    overflow:hidden;
    min-height:280px;
    padding:1.05rem 1.05rem 1rem;
    border-radius:14px;
    border:1px solid var(--border);
    background:
        linear-gradient(180deg,rgba(20,30,42,.94),rgba(10,17,26,.96));
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

/* bande supérieure couleur catégorie */
.category-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(
        90deg,
        color-mix(in srgb,var(--cat-color) 85%,#fff 5%),
        color-mix(in srgb,var(--cat-color) 60%,transparent)
    );
    box-shadow:0 0 14px color-mix(in srgb,var(--cat-color) 45%,transparent);
}

/* halo subtil */
.category-card::after{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:90px;
    background:linear-gradient(
        180deg,
        color-mix(in srgb,var(--cat-color) 10%,transparent),
        transparent
    );
    pointer-events:none;
    opacity:.55;
}

.category-card:hover{
    transform:translateY(-2px);
    border-color:var(--cat-border);
    box-shadow:0 24px 55px rgba(0,0,0,.30);
}

.category-card > *{
    position:relative;
    z-index:1;
}

/* HEADER CARD */
.category-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:.85rem;
    align-items:start;
    margin-bottom:.95rem;
    padding-bottom:.9rem;
    border-bottom:1px solid color-mix(in srgb,var(--cat-color) 25%,#263140);
    background:transparent;
}

.category-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:var(--cat-color);
    background:color-mix(in srgb,var(--cat-color) 11%,#121b26);
    border:1px solid var(--cat-border);
}

.category-icon i{
    font-size:1.65rem;
}

.category-title-wrap h2{
    margin:0;
    font-size:1.1rem;
    line-height:1.15;
    font-weight:850;
    letter-spacing:-.035em;
}

.category-title-wrap p{
    margin:.32rem 0 0;
    font-size:.78rem;
    line-height:1.35;
    color:#a9b2c2;
    max-width:190px;
}

.category-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.8rem;
}

.site-count{
    padding:.22rem .55rem;
    border-radius:999px;
    font-size:.72rem;
    line-height:1;
    color:#dce3ee;
    background:rgba(255,255,255,.035);
    border:1px solid color-mix(in srgb,var(--cat-color) 28%,#334154);
}

.category-head a{
    color:var(--cat-color);
    font-size:.82rem;
    font-weight:750;
    text-decoration:none;
    white-space:nowrap;
}

.category-head a:hover{
    filter:brightness(1.15);
}

/* LISTE */
.site-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.46rem;
}

.site-list li{
    display:grid;
    grid-template-columns:22px 24px minmax(0,1fr) auto;
    gap:.5rem;
    align-items:center;
    min-height:26px;
}

.rank{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:5px;
    font-size:.72rem;
    font-weight:800;
    color:#fff;
    background:var(--cat-rank-bg);
    border:1px solid color-mix(in srgb,var(--cat-color) 35%,transparent);
}

.favicon{
    width:22px;
    height:22px;
    border-radius:6px;
    background:#f4f6fb;
    color:#132034;
    display:grid;
    place-items:center;
    font-size:.68rem;
    font-weight:900;
    line-height:1;
    overflow:hidden;
}

.site-name{
    font-size:.88rem;
    font-weight:750;
    color:#f7f8fb;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.tags{
    display:flex;
    gap:.3rem;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.tag{
    background:rgba(255,255,255,.055);
    color:#b7c0ce;
    border-radius:6px;
    padding:.16rem .42rem;
    font-size:.65rem;
    font-weight:650;
    line-height:1.25;
}

.tag.gratuit,
.tag.lgbtqplus{
    background:rgba(16,185,129,.13);
    color:#6ee7b7;
}

.tag.premium{
    background:rgba(251,191,36,.13);
    color:#facc15;
}

.more-link{
    display:inline-block;
    margin-top:.85rem;
    color:var(--cat-color);
    font-size:.92rem;
    font-weight:800;
    text-decoration:none;
}

.more-link:hover{
    filter:brightness(1.12);
}

/* CTA bas */
.ranking-cta{
    margin-top:1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(16,24,33,.82);
    padding:1.2rem 1.4rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.ranking-cta strong{font-size:1.08rem}
.ranking-cta p{margin:.15rem 0 0;color:var(--muted)}
.ranking-cta a{
    color:#6fa0ff;
    font-weight:750;
    font-size:.92rem;
}
.trophy{font-size:2rem;color:#ffd15c}

/* Responsive */
@media (max-width:1199px){
    .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero-stats{gap:2rem}
}

@media (max-width:767px){
    .category-grid{grid-template-columns:1fr}

    .category-card{
        min-height:auto;
        padding:1rem;
    }

    .category-head{
        grid-template-columns:auto 1fr;
    }

    .category-meta{
        grid-column:1 / -1;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        width:100%;
    }

    .site-list li{
        grid-template-columns:22px 24px minmax(0,1fr);
    }

    .tags{
        grid-column:3 / -1;
        justify-content:flex-start;
        margin-top:-.1rem;
    }
}

.site-footer{border-top:1px solid rgba(255,255,255,.06)}
@media (max-width:1199px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-stats{gap:2rem}}
@media (max-width:767px){.hero{text-align:left;padding-top:2.4rem}.hero-search{display:grid;grid-template-columns:auto 1fr}.hero-search button{grid-column:1 / -1;width:100%}.hero-stats{justify-content:flex-start;gap:1rem}.category-grid{grid-template-columns:1fr}.ranking-cta{align-items:flex-start;flex-direction:column}.header-actions{margin-top:1rem}.navbar-nav .nav-link{padding:.8rem 0}}