/**
 * Page Actualités — CFA Prince George
 * Scoped: .page-news
 * Senior polish: hierarchy, spacing, sidebar, cards, micro-interactions
 */

.page-news{
  --n-bg:#f3f5f8;
  --n-card:#ffffff;
  --n-text:#121826;
  --n-muted:#5b6475;
  --n-border:rgba(18,24,38,.10);

  --n-blue:#2d4a8a;
  --n-blue-dark:#1e3268;
  --n-accent:#1a9b75;

  --n-orange:#f07a2c;
  --n-navy:#1f3763;
  --n-magenta:#b12464;
  --n-green:#2b7a6a;

  --n-pill-employabilite:#2f6be6;
  --n-pill-communaute:#1f3763;
  --n-pill-services:#b12464;
  --n-pill-ressources:#2b7a6a;

  --n-radius:18px;
  --n-radius-sm:12px;
  --n-shadow:0 10px 28px rgba(16,24,40,.08);
  --n-shadow-hover:0 18px 42px rgba(16,24,40,.14);

  --n-ease:cubic-bezier(.2,.8,.2,1);
}

/* Container */
.page-news .c-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width:768px){
  .page-news .c-container{ padding: 0 2rem; }
}

/* =================================
   HERO
================================= */
.page-news .news-hero--dark{
  position:relative;
  padding: 3.1rem 0 2.6rem;
  color:#fff;
  overflow:hidden;
}
.page-news .news-hero__bg{
  position:absolute;
  inset:0;
  background: linear-gradient(145deg, var(--n-blue-dark) 0%, #152a52 50%, #1e3268 100%);
  z-index:0;
}
.page-news .news-hero__bg::before{
  content:"";
  position:absolute;
  top:-60%;
  right:-18%;
  width:72%;
  height:160%;
  background: radial-gradient(ellipse, rgba(26,155,117,.16) 0%, transparent 70%);
  pointer-events:none;
}
.page-news .news-hero--dark .c-container{ position:relative; z-index:1; }

.page-news .news-breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin: 0 0 1rem;
  font-size:.9rem;
  color: rgba(255,255,255,.78);
}
.page-news .news-breadcrumb__link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:800;
}
.page-news .news-breadcrumb__link:hover{ text-decoration:underline; }
.page-news .news-breadcrumb__separator{ opacity:.65; }
.page-news .news-breadcrumb__current{ color:#fff; font-weight:800; }

.page-news .news-eyebrow{
  margin:0 0 .55rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.86);
}
.page-news .news-hero__title{
  margin:0 0 .85rem;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 950;
  letter-spacing:-0.03em;
  line-height:1.1;
}
.page-news .news-hero__lead{
  margin:0 0 1.25rem;
  font-size:1.1rem;
  line-height:1.55;
  color: rgba(255,255,255,.92);
  max-width: 68ch;
}

.page-news .news-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.page-news .news-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.82rem 1.25rem;
  border-radius: var(--n-radius-sm);
  font-weight:900;
  font-size:.95rem;
  text-decoration:none;
  transition: transform .18s var(--n-ease), box-shadow .18s var(--n-ease), background .18s var(--n-ease), border-color .18s var(--n-ease);
}
.page-news .news-btn--primary{
  background: var(--n-accent);
  color:#fff;
  box-shadow: 0 10px 22px rgba(26,155,117,.30);
}
.page-news .news-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(26,155,117,.38);
  background:#22b88a;
}
.page-news .news-btn--outline{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.38);
  backdrop-filter: blur(6px);
}
.page-news .news-btn--outline:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* =================================
   SECTION header
================================= */
.page-news .news-section{
  padding: 2.2rem 0 3.2rem;
  background: var(--n-bg);
}

.page-news .news-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin: 0 0 1.35rem;
}
.page-news .news-h2{
  margin:0 0 .25rem;
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 950;
  color: var(--n-blue);
  letter-spacing:-0.02em;
}
.page-news .news-sub{
  margin:0;
  color: var(--n-muted);
  line-height:1.6;
}
.page-news .news-all{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color: var(--n-blue);
  font-weight:900;
  text-decoration:none;
  padding:.55rem .75rem;
  border-radius: 12px;
}
.page-news .news-all:hover{
  background: rgba(45,74,138,.08);
}

/* =================================
   LAYOUT
================================= */
.page-news .news-layout{
  display:grid;
  grid-template-columns: 260px 1fr; /* sidebar fine */
  gap: 2rem;
  align-items:start;
}

/* Sur tablette: sidebar en haut */
@media (max-width: 1023px){
  .page-news .news-layout{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* =================================
   SIDEBAR (plus légère, plus premium)
================================= */
.page-news .news-sidebar{ position:relative; }
@media (min-width:1024px){
  .page-news .news-sidebar{
    position: sticky;
    top: 120px;
  }
}

.page-news .news-filterCard{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--n-border);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
  padding: 1.05rem;
}

.page-news .news-filterTitle{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight:950;
  color: var(--n-text);
  margin: 0 0 .85rem;
}

.page-news .news-field{
  display:block;
  margin: 0 0 .95rem;
}
.page-news .news-field > span{
  display:block;
  font-size:.9rem;
  font-weight:900;
  color: var(--n-text);
  margin: 0 0 .45rem;
}

.page-news .news-inputWrap,
.page-news .news-selectWrap{
  display:flex;
  align-items:center;
  gap:.55rem;
  border:1px solid rgba(18,24,38,.12);
  background:#fff;
  border-radius: 12px;
  padding:.72rem .85rem;
  transition: box-shadow .18s var(--n-ease), border-color .18s var(--n-ease);
}
.page-news .news-inputWrap:focus-within,
.page-news .news-selectWrap:focus-within{
  border-color: rgba(26,155,117,.45);
  box-shadow: 0 0 0 4px rgba(26,155,117,.12);
}
.page-news .news-inputWrap i,
.page-news .news-selectWrap i{ color: var(--n-muted); }

.page-news input[type="search"]{
  width:100%;
  border:none;
  outline:none;
  font-size:.95rem;
  color: var(--n-text);
  background:transparent;
}

.page-news .news-select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:.95rem;
  font-weight:900;
  color: var(--n-text);
  appearance:none;
}

.page-news .news-checks{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.page-news .news-check{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:850;
  color: var(--n-muted);
}
.page-news .news-check input{
  width:16px;
  height:16px;
  accent-color: var(--n-accent);
}

.page-news .news-hint{
  margin:.45rem 0 0;
  font-size:.85rem;
  color: var(--n-muted);
  line-height:1.4;
}

.page-news .news-reset{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.85rem 1rem;
  border-radius: 12px;
  border:1px solid rgba(18,24,38,.12);
  background:#fff;
  font-weight:950;
  color: var(--n-blue);
  cursor:pointer;
  transition: transform .18s var(--n-ease), box-shadow .18s var(--n-ease), background .18s var(--n-ease);
}
.page-news .news-reset:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(16,24,40,.10);
  background: rgba(45,74,138,.04);
}

/* =================================
   GRID + CARDS (rendu maquette amélioré)
================================= */
.page-news .news-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
@media (max-width: 820px){
  .page-news .news-grid{ grid-template-columns: 1fr; }
}

/* card */
.page-news .news-card{
  display:grid;
  grid-template-columns: 140px 1fr;  /* IMPORTANT: plus étroit que 180 => meilleure balance */
  background: var(--n-card);
  border: 1px solid var(--n-border);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--n-shadow);
  min-height: 170px;
  transition: transform .22s var(--n-ease), box-shadow .22s var(--n-ease);
}
.page-news .news-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--n-shadow-hover);
}

/* colonne gauche */
.page-news .news-card__iconArea{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, #eaf0f9 0%, #e8eef7 100%);
}

/* bubble icon */
.page-news .news-icon{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 1.75rem;
  box-shadow: 0 10px 18px rgba(16,24,40,.12);
}
.page-news .news-icon--orange{ background: var(--n-orange); }
.page-news .news-icon--navy{ background: var(--n-navy); }
.page-news .news-icon--magenta{ background: var(--n-magenta); }
.page-news .news-icon--green{ background: var(--n-green); }

/* body */
.page-news .news-card__body{
  padding: 1.05rem 1.15rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.65rem;
}

/* meta row */
.page-news .news-meta{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
}

/* pill */
.page-news .news-pill{
  display:inline-flex;
  align-items:center;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-weight: 950;
  font-size: .72rem;
  letter-spacing: .10em;
  color:#fff;
}
.page-news .news-pill--employabilite{ background: var(--n-pill-employabilite); }
.page-news .news-pill--communaute{ background: var(--n-pill-communaute); }
.page-news .news-pill--services{ background: var(--n-pill-services); }
.page-news .news-pill--ressources{ background: var(--n-pill-ressources); }

.page-news .news-read{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color: var(--n-muted);
  font-weight: 900;
  font-size:.92rem;
}

/* title: moins de “cassure”, hiérarchie nette */
.page-news .news-title{
  margin:0;
  color: var(--n-blue);
  font-weight: 950;
  font-size: 1.22rem;
  line-height: 1.18;
  letter-spacing:-0.01em;
  max-width: 46ch;
}

/* bottom row */
.page-news .news-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.1rem;
}
.page-news .news-date{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color: var(--n-muted);
  font-weight:900;
  font-size: .98rem;
}

/* arrow button */
.page-news .news-go{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border: 1px solid rgba(18,24,38,.12);
  color: var(--n-blue);
  text-decoration:none;
  transition: transform .18s var(--n-ease), background .18s var(--n-ease);
}
.page-news .news-go:hover{
  transform: translateX(3px);
  background: rgba(45,74,138,.05);
}

/* empty */
.page-news .news-empty{
  grid-column: 1 / -1;
  padding: 1.2rem;
  background:#fff;
  border: 1px solid var(--n-border);
  border-radius: 16px;
  color: var(--n-muted);
  font-weight:900;
}

/* =================================
   CTA BAS
================================= */
.page-news .news-cta{
  padding: 3.1rem 0;
  background: linear-gradient(135deg, var(--n-accent) 0%, #158368 100%);
  color:#fff;
}
.page-news .news-cta__inner{
  max-width: 640px;
  margin: 0 auto;
  text-align:center;
}
.page-news .news-cta__title{
  margin:0 0 .6rem;
  font-size: 1.6rem;
  font-weight: 950;
  letter-spacing:-0.01em;
}
.page-news .news-cta__text{
  margin:0 0 1.2rem;
  opacity:.95;
  line-height:1.6;
  font-size:1.05rem;
}
.page-news .news-cta .news-btn--primary{
  background: rgba(255,255,255,.95);
  color: var(--n-accent);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.page-news .news-cta .news-btn--primary:hover{
  background:#fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

/* =================================
   Accessibility + Reduced motion
================================= */
.page-news a:focus-visible,
.page-news button:focus-visible,
.page-news input:focus-visible,
.page-news select:focus-visible{
  outline: 3px solid rgba(26,155,117,.45);
  outline-offset: 3px;
  border-radius: var(--n-radius-sm);
}
@media (prefers-reduced-motion: reduce){
  .page-news *{ transition:none !important; }
}