/* ===== Blog page-specific ===== */
  /* featured article */
  .feat{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:stretch;margin-top:var(--space-4);background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
  .feat__cover{position:relative;overflow:hidden;background:var(--navy-800);min-height:240px}
  .feat__cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.14) 1px,transparent 1px);background-size:30px 30px}
  .feat__cover svg{position:absolute;inset:0;width:100%;height:100%}
  .feat__cover .badge{position:absolute;top:var(--space-5);left:var(--space-5);z-index:2}
  .feat__body{padding:var(--space-8);display:flex;flex-direction:column;justify-content:center}
  .feat__meta{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.05em;color:var(--neutral-500);text-transform:uppercase}
  .feat__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);color:var(--navy);line-height:1.12;letter-spacing:-.01em;margin:var(--space-3) 0 var(--space-4)}
  .feat__excerpt{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600);max-width:48ch}
  .feat__cta{margin-top:var(--space-6);display:flex;align-items:center;gap:var(--space-4)}

  /* filter */
  .filterbar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-10)}
  .filterbar button{font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-600);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-full);padding:12px 18px;cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
  .filterbar button:hover{border-color:var(--navy);color:var(--navy)}
  .filterbar button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

  /* posts grid — colonnes FIXES responsives (1 / 2 / 3), pas d'auto-fill.
     auto-fill réservait autant de pistes de 280px que la largeur le permettait
     (4 sur desktop) : avec 3 articles en grille (le plus récent passe « à la
     une »), la 4e piste restait VIDE et les cartes se tassaient à gauche,
     laissant un grand vide à droite — le contenu ne remplissait pas la largeur
     du site. Des colonnes fixes font remplir la rangée.
     Le piège qu'auto-fill évitait — un article isolé (dernière page de
     pagination) étiré par auto-fit sur toute la largeur, .post__cover 16/10
     démesuré — ne se reproduit pas : dans une piste 1fr sur 3, une carte seule
     occupe 1/3 de la largeur, jamais la totalité. */
  .posts{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-8)}
  .post{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#fff;transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .post:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .post.is-hidden{display:none}
  .post__cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--navy-800)}
  .post__cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.14) 1px,transparent 1px);background-size:26px 26px}
  .post__cover svg{position:absolute;inset:0;width:100%;height:100%}
  .post__cat{position:absolute;top:12px;left:12px;z-index:2}
  .post__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
  .post__date{font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);letter-spacing:.04em}
  .post__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);line-height:1.25;transition:color var(--dur-base)}
  .post:hover .post__title{color:var(--blue-600)}
  .post__more{margin-top:auto;font-size:var(--text-sm);font-weight:600;color:var(--blue-500)}

  .pager-wrap{display:flex;justify-content:center;margin-top:var(--space-12)}

  /* newsletter */
  .news-band{background:var(--navy-900);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:var(--space-8);text-align:center}
  .news-band__topo{position:absolute;inset:0;opacity:.4;pointer-events:none}
  .news-band h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);color:#fff;line-height:1.1;letter-spacing:-.01em;position:relative}
  .news-band h2 em{font-style:italic;color:var(--cyan-300)}
  .news-band p{color:var(--text-ondark-muted);margin:var(--space-3) auto 0;max-width:48ch;position:relative;line-height:var(--leading-relaxed)}
  .news-form{position:relative;display:flex;flex-direction:column;gap:var(--space-3);max-width:480px;margin:var(--space-8) auto 0}
  .news-form .input{flex:1;min-height:44px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
  .news-form .input::placeholder{color:#8f8cc4}
  .news-form .input:focus{border-color:var(--cyan-400)}
  .news-band__note{position:relative;font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);margin-top:var(--space-4)}

  /* ---- Paliers (mobile-first) ----
     Deux rebases sur l'echelle fluide : .feat__title (clamp 24/3vw/--text-3xl)
     et .news-band h2 (clamp 26/3.2vw/--text-3xl) valaient deja exactement
     --text-3xl des 1200 px. Rendu desktop inchange. */
  @media(min-width:640px){
    .news-band{padding:var(--space-12) var(--space-16)}
    .news-form{flex-direction:row}
    .posts{grid-template-columns:repeat(2,1fr)}
  }
  @media(min-width:900px){
    .filterbar button{padding:9px 18px}
    /* min-height n'existe que pour la cible tactile mobile. */
    .news-form .input{min-height:0}
  }
  /* Quatrieme palier — 1000 px, hors de la serie 640/900/1200.
     Il existe parce que le seuil de bascule a deux colonnes de ce theme est
     historiquement a ~980 px (les blocs @media(max-width:980px) d'avant la
     refonte mobile-first) : la composition a deux colonnes etait donc active
     des 981 px. Le forcer a 1200 pour respecter la serie a trois paliers
     laissait toute la bande 981-1199 px — celle des portables — empilee sur
     une seule colonne, au prix de +54 % de hauteur sur /contact/ a 1024 px.
     La regle des trois paliers a cede, pas le rendu. */
  @media(min-width:1000px){
    .feat{grid-template-columns:1.1fr .9fr}
    .feat__cover{min-height:340px}
    .feat__body{padding:var(--space-10) var(--space-10) var(--space-10) 0}
    .posts{grid-template-columns:repeat(3,1fr)}
  }