<style>
    :root{
      --bg:#f6f7f9;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#0f766e; /* teal-ish */
      --accent-2:#0b5f67;
      --accent-3:#083a3b;
      --glass: rgba(255,255,255,0.6);
      --radius: 18px; /* arrondis "un max" */
      --shadow: 0 6px 18px rgba(15,23,42,0.08);
      --transition: 240ms cubic-bezier(.2,.9,.3,1);
    }
    *{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:linear-gradient(180deg,#f8fafc 0%, var(--bg) 100%);
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:40px 24px;
      line-height:1.45;
    }

    /* Header flottant */
    .site-header{
      position:sticky;
      top:20px;
      z-index:50;
      margin:0 auto 28px auto;
      max-width:1200px;
      background:#0f766e;
      border-radius:24px;
      padding:20px 24px;
      min-height:80px;
      box-shadow:var(--shadow);
      display:flex;
      gap:16px;
      align-items:center;
    }
    .brand{
      display:flex;align-items:center;gap:12px;
    }
    .logo{
      width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:grid;place-items:center;color:white;font-weight:800;font-size:18px;box-shadow:0 6px 20px rgba(11,102,103,0.18);
    }
    .site-title{font-size:18px;font-weight:700}
    .site-tag{font-size:12px;color:var(--muted)}

    /* Menu de navigation (boutons) */
    .nav{display:flex;gap:8px;margin-left:18px}
    .nav button{
      border:0;padding:8px 14px;border-radius:12px;background:transparent;cursor:pointer;
      font-weight:600;color:var(--accent-3);transition:var(--transition);
      box-shadow:none;outline:none;
    }
    .nav button:hover{
      color:white; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transform:translateY(-2px);
    }
    /* état cliqué (active) change le fond */
    .nav button.active{
      color:white;background:linear-gradient(90deg,var(--accent),var(--accent-3));box-shadow:0 8px 28px rgba(8,58,59,0.14);
    }
    /* focus visible accesibilité */
    .nav button:focus{outline:3px solid rgba(15,118,110,0.14)}

    /* Layout principal */
    .container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:24px}

    /* Hero / top stories */
    .hero{display:grid;grid-template-columns:1fr 360px;gap:18px}
    .main-card{background:var(--card);border-radius:calc(var(--radius));box-shadow:var(--shadow);overflow:hidden;padding:18px}
    .kicker{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:8px}
    .headline{font-size:22px;font-weight:800;margin:0 0 10px}
    .excerpt{color:var(--muted);margin:0 0 12px}
    .readmore{display:inline-block;padding:8px 12px;border-radius:12px;background:transparent;border:1px solid rgba(11,102,103,0.08);font-weight:700}

    /* Grid d'articles */
    .articles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
    .article{background:var(--card);padding:14px;border-radius:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
    .thumb{width:92px;height:72px;border-radius:12px;background:linear-gradient(135deg,#e6f6f5, #d7eef0);flex-shrink:0}
    .art-meta{font-size:13px;color:var(--muted);font-weight:600}
    .art-title{font-size:15px;font-weight:700;margin:6px 0}

    /* Sidebar */
    .sidebar{position:relative}
    .card{background:var(--card);border-radius:16px;padding:12px;box-shadow:var(--shadow);margin-bottom:14px}
    .small-list{display:flex;flex-direction:column;gap:10px}

    /* Footer */
    footer{max-width:1200px;margin:28px auto 0 auto;text-align:center;color:var(--muted);font-size:13px}

    /* Responsive */
    @media (max-width:980px){
      .container{grid-template-columns:1fr;}
      .hero{grid-template-columns:1fr}
      .nav{flex-wrap:wrap}
      .articles{grid-template-columns:1fr}
    }

    /* Petite finition: boutons dans les articles */
    .tag{
      display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:var(--accent-3);background:rgba(11,102,103,0.06)
    }
  .brand img{
  max-height:48px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:0;
}