:root{
      --bg:#FAFBFC;
      --surface:#FFFFFF;
      --ink:#0F172A;
      --ink-soft:#475569;
      --ink-faint:#64748B;
      --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);}

    /* En-tête : commun aux pages publiques (includes/site-header.php, 01/10/2026). */

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

    /* Même sur-titre que la page d'accueil (01/10/2026). */
    .eyebrow{
      font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink);
      display:block; margin-bottom:8px; font-weight:700;
    }

    h1{
      font-family:var(--font-display); font-size:clamp(30px,4.6vw,44px);
      font-weight:800; line-height:1.12; margin-bottom:28px; color:var(--ink);
      letter-spacing: -0.03em;
    }

    /* 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:12px;
      padding:0 16px; height:48px; max-width:420px;
      transition:border-color .2s ease;
    }
    .search-bar:focus-within{border-color:var(--green-ink);}
    .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:none;}

    .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);
    }

    /* Pied de page : commun aux pages publiques (includes/footer.php, 01/10/2026). */

    @media (max-width:720px){
      main{padding:36px 0 60px;}
      .article-thumb{width:64px; height:64px; border-radius:10px;}
    }
    :focus-visible{outline:2px solid var(--green-ink); outline-offset:2px;}
    @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }