/* ============================================================
   ARGANE \002014 Page Actualit\0000e9s (liste / archive)
   Syst\0000e8me \0000e9ditorial industriel \002014 fond clair (paper)
   ============================================================ */
:root{
  --forge:#081F2C;
  --acier:#253746;
  --ardoise:#57728B;
  --ardoise-brut:#506D85;
  --braise:#EE2737;
  --paper:#FAFAFA;
  --paper-warm:#F2F2F2;
  --ink-15:rgba(250,250,250,0.15);
  --ink-10:rgba(250,250,250,0.10);
  --paper-60:rgba(250,250,250,0.60);
  --forge-15:rgba(8,31,44,0.12);
  --forge-08:rgba(8,31,44,0.08);
  --ff-display:"Space Grotesk", sans-serif;
  --ff-body:"DM Sans", sans-serif;
  --ff-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter:clamp(20px, 4vw, 64px);
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:clip;}
html{background:#081F2C;}
body{
  background:transparent;
  color:var(--forge);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Contenu au-dessus du footer parallax (footer fix\0000e9 bas) */
body > section{position:relative; z-index:2;}
.util{z-index:70;}
.nav{z-index:60;}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

:focus-visible{outline:2px solid var(--braise); outline-offset:3px; border-radius:2px;}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding:0 var(--gutter);}

h1,h2,h3{font-family:var(--ff-display); font-weight:500; letter-spacing:-0.035em; line-height:0.96; margin:0;}

/* ----- Boutons (sous-ensemble du syst\0000e8me) ----- */
/* Boutons : composant partag\0000e9 \002014 voir components/argane-buttons.css */

/* ============================================================
   HERO
   ============================================================ */
.ni-hero{
  background:var(--paper); color:var(--forge);
  padding:var(--sp-hero-top) 0 clamp(32px,4vw,52px);
}
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--ff-body); font-size:12px; letter-spacing:0.04em; color:var(--ardoise);
}
.breadcrumb a{color:var(--ardoise); transition:color .2s ease;}
.breadcrumb a:hover{color:var(--braise);}
.breadcrumb .sep{color:rgba(8,31,44,0.25);}
.breadcrumb .current{color:var(--forge);}
.ni-hero h1{
  text-align:center;
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-display);
  line-height:0.9; letter-spacing:-0.04em; margin-top:clamp(28px,4vw,48px);
}
.ni-hero .lead{
  margin-top:24px; font-family:var(--ff-body); font-size:var(--fs-lead);
  line-height:1.55; color:var(--acier); max-width:58ch; text-align:center; margin-left:auto; margin-right:auto;
}

/* ============================================================
   ARTICLE \0000c0 LA UNE
   ============================================================ */
.ni-featured{background:var(--paper); padding:clamp(16px,2vw,28px) 0 clamp(48px,6vw,80px);}
.ni-feature{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,64px);
  align-items:center; color:inherit;
}
.ni-feature-fig{
  position:relative; aspect-ratio:16/11; border-radius:12px; overflow:hidden;
  background:linear-gradient(150deg, var(--forge), var(--acier));
}
.ni-feature-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.ni-feature:hover .ni-feature-img{transform:scale(1.04);}
.ni-feature-fig .lab{
  position:absolute; bottom:14px; left:16px; z-index:2;
  font-family:var(--ff-body); font-size:10px; letter-spacing:0.20em; text-transform:uppercase;
  color:var(--paper-60);
}
.ni-feature-flag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--ff-body); font-size:10px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--paper); background:var(--braise);
  padding:7px 14px; border-radius:999px;
}
.ni-feature-body{display:flex; flex-direction:column; align-items:flex-start; gap:0;}
.ni-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--ff-body); font-size:13px; color:var(--ardoise); margin-bottom:20px;
}
.ni-meta .cat{
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper); background:var(--forge); padding:6px 14px; border-radius:999px; line-height:1;
}
.ni-meta .meta-date{color:var(--ardoise);}
.ni-feature-title{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2);
  letter-spacing:-0.03em; line-height:1.02; color:var(--forge); margin:0 0 18px;
  transition:color .2s ease; text-wrap:balance;
}
.ni-feature:hover .ni-feature-title{color:var(--braise);}
.ni-feature-excerpt{
  font-family:var(--ff-body); font-size:clamp(15px,1.15vw,18px); line-height:1.6;
  color:var(--acier); max-width:48ch; margin:0 0 28px;
}
.ni-feature-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-body); font-size:13px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--forge);
  border-bottom:1.5px solid var(--forge); padding-bottom:5px; transition:color .2s ease, border-color .2s ease;
}
.ni-feature-cta svg{width:15px; height:11px; transition:transform .25s ease;}
.ni-feature:hover .ni-feature-cta{color:var(--braise); border-color:var(--braise);}
.ni-feature:hover .ni-feature-cta svg{transform:translateX(5px);}

/* ============================================================
   ARCHIVE \002014 barre de filtres + grille
   ============================================================ */
.ni-archive{background:var(--paper); padding:0 0 clamp(90px,11vw,150px);}
.ni-archive-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:clamp(28px,3.4vw,44px);
  border-bottom:1px solid var(--forge-15);
}
.ni-filter{display:flex; flex-wrap:wrap; gap:9px;}
.ni-pill{
  position:relative;
  font-family:var(--ff-body); font-size:13px; font-weight:500; letter-spacing:0.01em;
  color:var(--acier); background:#fff; border:1px solid var(--forge-15); border-radius:999px;
  padding:9px 18px; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .12s ease;
}
/* Cible tactile 44px de haut minimum, sans agrandir la pilule visuellement. */
.ni-pill::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;}
.ni-pill:hover{border-color:var(--ardoise); color:var(--forge); transform:translateY(-1px);}
.ni-pill.active{background:var(--forge); border-color:var(--forge); color:var(--paper);}
.ni-count{font-family:var(--ff-body); font-size:13px; color:var(--ardoise); white-space:nowrap; font-variant-numeric:tabular-nums;}

/* La grille r\0000e9utilise le composant partag\0000e9 : .news-grid / .news-card (argane-news-card.css) */
.news-card[hidden]{display:none;}

.ni-empty{
  display:none; padding:60px 0; text-align:center;
  font-family:var(--ff-body); font-size:15px; font-style:italic; color:var(--ardoise);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .ni-feature{grid-template-columns:1fr; gap:24px;}
  .ni-feature-fig{aspect-ratio:16/10;}
}
@media (max-width:600px){
  .ni-archive-bar{flex-direction:column; align-items:flex-start; gap:16px;}
  .ni-filter{gap:8px;}
  .ni-pill{padding:8px 15px; font-size:12.5px;}
}