:root{
      --bg:#FAFBFC;
      --surface:#FFFFFF;
      --ink:#0F172A;
      --ink-soft:#64748B;
      --ink-faint:#94A3B8;
      --line:#E2E8F0;
      --line-strong:#CBD5E1;
      --green:#10B981;
      --green-ink:#047857;
      --font-display:'Outfit', sans-serif;
      --font-body:'DM Sans', sans-serif;
      --font-mono:'JetBrains Mono', monospace;
      --maxw:1080px;
    }
    
    *{box-sizing:border-box; margin:0; padding:0;}
    html{scroll-behavior:smooth;}
    body{
      font-family:var(--font-body);
      color:var(--ink);
      background:var(--bg);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    a{color:inherit; text-decoration:none;}

    /* Reveal animation */
    .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
    .reveal.in{opacity:1; transform:translateY(0);}

    /* Header */
    header.site{
      position:fixed; top:0; left:0; right:0; z-index:50;
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(12px);
      border-bottom:1.5px solid var(--line);
      transition:border-color .3s ease, box-shadow .3s ease;
    }
    header.site.scrolled{border-bottom-color:var(--line-strong); box-shadow:0 4px 12px rgba(0,0,0,.05);}
    header.site .wrap{
      max-width:var(--maxw); margin:0 auto; padding:18px 24px;
      display:flex; align-items:center; justify-content:space-between;
    }
    header.site .logo{
      font-family:var(--font-display); font-weight:800; font-size:20px;
      display:flex; align-items:center; gap:10px; color:var(--ink);
      letter-spacing: -0.02em;
    }
    header.site .logo img{width:36px; height:auto;}
    header.site nav a{
      font-size:14px; color:var(--ink-soft); font-weight:600;
      transition:color .2s ease;
    }
    header.site nav a:hover{color:var(--green-ink);}

    /* Main Content */
    main{padding:140px 0 80px; flex: 1;}
    main .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

    .eyebrow{
      font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
      text-transform:uppercase; color:var(--ink-soft);
      display:flex; align-items:center; gap:8px; margin-bottom:16px; font-weight:600;
    }
    .eyebrow::before{
      content:""; width:8px; height:8px; border-radius:50%;
      background:var(--green); display:inline-block;
    }

    h1{
      font-family:var(--font-display); font-size:clamp(28px,3.6vw,40px);
      font-weight:800; line-height:1.15; margin-bottom:32px; color:var(--ink);
      letter-spacing: -0.02em;
    }

    /* Barre outils : recherche + filtre favoris */
    .blog-toolbar{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
    .search-bar{
      flex:1; display:flex; align-items:center; gap:10px;
      background:var(--surface); border:1.5px solid var(--line); border-radius:24px;
      padding:0 16px; height:46px; max-width:420px;
      transition:border-color .2s ease;
    }
    .search-bar:focus-within{border-color:var(--green);}
    .search-bar svg{width:16px; height:16px; color:var(--ink-faint); flex-shrink:0;}
    .search-bar input{
      flex:1; border:none; outline:none; background:transparent;
      font-family:var(--font-body); font-size:14.5px; color:var(--ink); height:100%;
    }
    .search-bar input::placeholder{color:var(--ink-faint);}
    .search-clear{
      border:none; background:transparent; cursor:pointer; color:var(--ink-faint);
      display:flex; align-items:center; padding:4px; line-height:0;
    }
    .search-clear:hover{color:var(--ink-soft);}

    .article-list{display:flex; flex-direction:column;}

    .article-card{
      padding:28px 0;
      border-bottom:1.5px solid var(--line);
      display:flex;
      gap:20px;
      align-items:flex-start;
      transition:transform .2s ease;
    }
    .article-card:first-child{padding-top:0;}
    .article-card:hover{transform:translateX(6px);}

    .article-thumb{
      width:96px; height:96px; border-radius:12px; object-fit:cover;
      flex-shrink:0; border:1.5px solid var(--line);
    }
    .article-card-body{ flex:1; min-width:0; }

    .article-card .date{
      font-family:var(--font-mono); font-size:13px; color:var(--ink-faint);
      margin-bottom:10px; display:block; font-weight:500;
    }
    .article-card h2{
      font-family:var(--font-display); font-size:22px; font-weight:700;
      margin-bottom:10px; color:var(--ink); transition:color .2s ease;
    }
    .article-card:hover h2{color:var(--green-ink);}

    .article-card p{
      color:var(--ink-soft); font-size:15.5px; line-height:1.65; margin-bottom:12px;
    }
    .article-card .read-more{
      color:var(--green-ink); font-weight:600; font-size:14px;
      display:inline-flex; align-items:center; gap:6px;
    }
    .article-card .read-more svg{width:16px; height:16px; transition:transform .2s ease;}
    .article-card:hover .read-more svg{transform:translateX(4px);}

    .empty-state{
      color:var(--ink-soft); font-size:16px; padding:60px 0; text-align:center;
      background:var(--surface); border-radius:16px; border:1.5px dashed var(--line);
    }

    /* Footer */
    footer{padding:40px 0 30px; border-top:1.5px solid var(--line); background: var(--bg);}
    .footer-inner{
      max-width:var(--maxw); margin:0 auto; padding:0 24px;
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
      font-size:14px; color:var(--ink-soft);
    }
    .footer-inner a{font-weight:500; transition:color .2s ease;}
    .footer-inner a:hover{color:var(--ink);}

    @media (max-width:720px){
      header.site .wrap{flex-direction:column; gap:16px;}
      main{padding:120px 0 60px;}
      .footer-inner{flex-direction: column; text-align: center;}
      .article-thumb{width:64px; height:64px; border-radius:10px;}
    }