/* CSS blog premium Mint — coherent avec landing et /app */
@font-face{font-family:'Geist';src:url('/static/fonts/Geist-Variable.woff2') format('woff2-variations'),url('/static/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'GeistMono';src:url('/static/fonts/GeistMono-Variable.woff2') format('woff2-variations'),url('/static/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/static/fonts/Fraunces-Variable.woff2') format('woff2-variations'),url('/static/fonts/Fraunces-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap;font-optical-sizing:auto}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    /* Palette Mint (coherent avec landing + /app) */
    --mint-50:#E6F4F4;--mint-100:#D4EDED;--mint-200:#7FD6D6;--mint-300:#4FC3C3;
    --mint-400:#2CB3B3;--mint-500:#1A9B9B;--mint-700:#0F7A7A;--mint-900:#0E2A2A;
    --cream:#F4E4C1;--cream-soft:#F9EED8;
    --amber:#1A9B9B;--amber-dark:#0F7A7A;--amber-soft:#E6F4F4;--amber-glow:rgba(26,155,155,.28);
    --ink:#0E2A2A;--ink-soft:#1f4545;--mute:#595959;
    --line:#e6ebeb;--line-soft:#f0f5f5;
    --blood:#c2392a;--blood-soft:#f9e4e0;--moss:#3d5a3a;
    --paper:#F7FAFA;--paper-dark:#E6F4F4;--bg:#fcfefe;
    --shadow-sm:0 1px 0 rgba(10,10,40,.04);
    --shadow:0 4px 16px rgba(26,155,155,.08);
    --shadow-lg:0 20px 48px rgba(26,155,155,.15);
    --font:'Geist',system-ui,-apple-system,sans-serif;
    --font-display:'Fraunces',Georgia,serif;
    --font-mono:'GeistMono','SF Mono',Menlo,monospace;
}
html[data-theme="dark"]{
    --amber:#4FC3C3;--amber-dark:#2CB3B3;--amber-soft:rgba(79,195,195,.14);--amber-glow:rgba(79,195,195,.35);
    --ink:#E6F4F4;--ink-soft:#D4EDED;--mute:#7FD6D6;
    --line:#1f4545;--line-soft:#0E2A2A;
    --blood:#f87171;--paper:#0a1f1f;--paper-dark:#0E2A2A;--bg:#061616;
    color-scheme:dark;
}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink-soft);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";transition:background-color .2s,color .2s}
a{color:var(--amber-dark);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ========== NAV premium (sticky + blur) ========== */
.nav{
    position:sticky;top:0;z-index:40;
    background:rgba(252,254,254,.82);
    backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(230,235,235,.6);
}
html[data-theme="dark"] .nav{background:rgba(14,42,42,.72);border-bottom-color:rgba(31,69,69,.6)}
.nav-in{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:14px 24px;gap:16px;height:64px}
.logo-link{display:inline-flex;align-items:center;gap:12px;font-size:20px;color:var(--ink);text-decoration:none !important;flex-shrink:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.logo-link svg{flex:0 0 36px;filter:drop-shadow(0 4px 12px var(--amber-glow))}
.logo-link em{color:var(--amber-dark);font-style:normal;font-weight:600}
.logo-link .wm{line-height:1;white-space:nowrap}
html[data-theme="dark"] .logo-link em{color:var(--amber)}
.nav-right{display:flex;gap:4px;align-items:center}
.nav-link{color:var(--ink-soft);font-size:14px;text-decoration:none !important;font-weight:600;padding:8px 14px;border-radius:999px;transition:all .15s;letter-spacing:-.005em}
.nav-link:hover,.nav-link.active{color:var(--amber-dark);background:var(--amber-soft)}
.nav-cta{
    background:var(--amber);color:#fff !important;padding:10px 20px;font-size:13px;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;text-decoration:none !important;
    border-radius:999px;min-height:40px;
    display:inline-flex;align-items:center;white-space:nowrap;border:none;
    box-shadow:0 8px 24px var(--amber-glow);transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--amber-glow)}
.theme-toggle{
    width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:none;color:var(--ink-soft);cursor:pointer;
    border-radius:999px;transition:all .15s;padding:0;
}
.theme-toggle:hover{background:var(--amber-soft);color:var(--amber-dark)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ========== PAGE HERO ========== */
.page-hero{
    padding:80px 24px 56px;position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--amber-soft) 0%,#fff 100%);
    border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .page-hero{background:linear-gradient(135deg,var(--paper-dark) 0%,var(--bg) 100%)}
.page-hero::before{
    content:'';position:absolute;top:-40%;right:-10%;width:500px;height:500px;
    background:var(--amber);border-radius:50%;filter:blur(120px);opacity:.2;pointer-events:none;
}
.page-hero-in{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.breadcrumb{font-family:var(--font-mono);font-size:11px;color:var(--mute);margin-bottom:24px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.breadcrumb a{color:var(--mute);text-decoration:none}
.breadcrumb a:hover{color:var(--amber-dark);text-decoration:underline}
.eyebrow{
    display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:800;
    color:var(--amber-dark);letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:16px;padding:6px 14px;background:var(--amber-soft);border-radius:999px;
}
.page-hero h1{
    font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5vw,64px);
    color:var(--ink);line-height:1.02;margin-bottom:16px;letter-spacing:-.03em;
    font-variation-settings:"opsz" 144;max-width:800px;
}
.page-hero h1 em{font-style:italic;background:linear-gradient(90deg,var(--mint-700),var(--mint-400));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.page-hero .lede{
    font-family:var(--font);font-size:17px;color:var(--ink-soft);max-width:640px;
    line-height:1.6;font-weight:500;
}

/* ========== MAIN WRAP ========== */
.main-wrap{max-width:900px;margin:0 auto;padding:56px 24px}

/* ========== ARTICLE CARDS (blog index) ========== */
.article-grid{display:grid;gap:20px}
.article-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    padding:28px 32px;text-decoration:none !important;color:var(--ink);display:block;
    position:relative;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .2s;
}
html[data-theme="dark"] .article-card{background:var(--paper-dark)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--amber);color:var(--ink)}
.article-card h2{
    font-family:var(--font-display);font-weight:500;font-size:22px;color:var(--ink);
    line-height:1.2;letter-spacing:-.015em;margin-bottom:8px;
}
.article-card h2 em{font-style:italic;color:var(--amber-dark)}
.article-card p{font-size:14px;color:var(--mute);line-height:1.55;margin-bottom:12px}
.article-card .meta{
    font-family:var(--font-mono);font-size:11px;color:var(--mute);
    letter-spacing:.06em;text-transform:uppercase;font-weight:600;
    display:flex;gap:14px;align-items:center;
}
.article-card .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--mute)}
.article-card .arrow{
    position:absolute;top:28px;right:28px;width:36px;height:36px;border-radius:50%;
    background:var(--amber-soft);color:var(--amber-dark);
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform .25s,background .25s;
}
.article-card:hover .arrow{transform:translate(4px,-4px);background:var(--amber);color:#fff}

/* ========== ARTICLE BODY (article single) ========== */
.article{max-width:720px;margin:0 auto;padding:56px 24px}
.date{
    font-family:var(--font-mono);font-size:11px;color:var(--amber-dark);
    text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:20px;
    display:inline-block;padding:6px 14px;background:var(--amber-soft);border-radius:999px;
}
h1{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,5vw,48px);color:var(--ink);line-height:1.08;margin-bottom:20px;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
h1 em{font-style:italic;background:linear-gradient(90deg,var(--mint-700),var(--mint-400));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.intro{font-family:var(--font-display);font-weight:400;font-size:19px;color:var(--ink-soft);margin-bottom:40px;line-height:1.6;font-variation-settings:"opsz" 32;font-style:italic}
h2{font-family:var(--font-display);font-weight:500;font-size:28px;color:var(--ink);margin:44px 0 18px;line-height:1.2;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
h3{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink);margin:28px 0 12px;line-height:1.25;letter-spacing:-.015em}
p{font-size:16px;margin-bottom:18px;line-height:1.75;color:var(--ink-soft)}
p strong{color:var(--ink);font-weight:700}
ul,ol{margin:12px 0 22px 24px}
li{font-size:16px;margin-bottom:8px;line-height:1.65;color:var(--ink-soft)}
li strong{color:var(--ink);font-weight:700}

/* ========== RANK CARDS (top marques article) ========== */
.rank{
    display:flex;align-items:flex-start;gap:20px;padding:22px 24px;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    margin-bottom:14px;transition:transform .2s,box-shadow .2s,border-color .2s;
}
html[data-theme="dark"] .rank{background:var(--paper-dark)}
.rank:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--amber-soft)}
.rank-num{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:48px;color:var(--amber);min-width:48px;text-align:center;line-height:.9;font-variation-settings:"opsz" 144}
.rank-info{flex:1}
.rank-name{font-family:var(--font-display);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.015em;margin-bottom:6px}
.rank-detail{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:10px}
.rank-tag{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:800;padding:4px 12px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
.tag-hot{background:rgba(194,57,42,.1);color:var(--blood)}
.tag-premium{background:var(--mint-900);color:var(--cream)}
.tag-stable{background:var(--amber-soft);color:var(--amber-dark)}

/* ========== TIP BOX ========== */
.tip{
    background:linear-gradient(135deg,var(--amber-soft) 0%,#fff 100%);
    border:1px solid var(--amber);border-radius:16px;
    padding:22px 24px 22px 56px;margin:28px 0;
    font-size:15px;line-height:1.6;position:relative;
}
.tip::before{
    content:'★';position:absolute;top:20px;left:20px;
    width:28px;height:28px;border-radius:50%;
    background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:800;
}
.tip strong{color:var(--ink);font-weight:700}

/* ========== CTA BOX ========== */
.cta{
    text-align:center;margin-top:56px;padding:48px 32px;
    background:linear-gradient(135deg,var(--mint-900) 0%,var(--amber) 100%);
    border:none;border-radius:24px;color:#fff;position:relative;overflow:hidden;
}
.cta::before{
    content:'';position:absolute;top:-60px;right:-40px;width:280px;height:280px;
    background:var(--cream);border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none;
}
.cta > *{position:relative;z-index:1}
.cta h3{font-family:var(--font-display);font-weight:500;font-size:28px;color:#fff;margin-bottom:12px;font-variation-settings:"opsz" 144;letter-spacing:-.02em}
.cta p{font-size:16px;color:rgba(255,255,255,.9);margin-bottom:24px;font-family:var(--font);font-style:normal;font-weight:500}
.cta a{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--font);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:16px 32px;background:#fff;color:var(--ink) !important;text-decoration:none !important;
    border:none;border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.25);
    transition:transform .2s,box-shadow .2s;min-height:48px;
}
.cta a:hover{transform:scale(1.03);box-shadow:0 20px 50px rgba(0,0,0,.3)}

/* ========== FOOTER ========== */
.site-footer{padding:56px 24px 60px;font-size:13px;color:var(--mute);border-top:1px solid var(--line);background:var(--paper);margin-top:80px}
.site-footer-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.site-footer-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.site-footer-links a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:14px}
.site-footer-links a:hover{color:var(--amber-dark)}
.site-footer-note{font-size:12px;color:var(--mute);max-width:620px;line-height:1.6;font-family:var(--font-mono);letter-spacing:.04em}

/* ========== RESPONSIVE ========== */
@media(max-width:720px){
    .nav-in{height:56px;padding:0 16px}
    .nav-right{gap:2px}
    .nav-link{padding:6px 10px;font-size:13px}
    .nav-link.hide-mobile{display:none}
    .nav-cta{padding:8px 14px;font-size:11px;min-height:36px}
    .logo-link .wm{font-size:17px}
    .page-hero{padding:48px 20px 40px}
    .article{padding:32px 20px}
    .article-card{padding:22px 24px}
    .article-card .arrow{top:22px;right:22px;width:32px;height:32px}
    .rank{padding:18px;gap:14px}
    .rank-num{font-size:36px;min-width:36px}
    .cta{padding:32px 24px}
    .cta h3{font-size:22px}
}