/* ============================================================
   ELEGANCE LEARNING AI — Page Actualités
   ============================================================ */

/* ---- Hero ---------------------------------------------------- */
.a-hero{position:relative;background:var(--bleu-nuit);overflow:hidden;padding:168px 0 84px;}
.a-hero-ondes{position:absolute;will-change:transform;pointer-events:none;z-index:1;}
.a-hero-ondes.a{width:52%;right:-14%;top:-32%;opacity:.55;}
.a-hero-ondes.b{width:32%;left:-10%;bottom:-36%;opacity:.3;}
.a-hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 40px;max-width:60ch;}
.a-hero-title{font-family:var(--font-display);font-weight:500;font-size:var(--t-h1);
  line-height:1.1;letter-spacing:-.01em;color:var(--on-dark-1);margin-top:18px;}
.a-hero-sub{margin-top:20px;font-size:var(--t-body-lg);line-height:1.6;color:var(--on-dark-2);max-width:52ch;}

/* ---- Filtres -------------------------------------------------- */
.a-filters{position:relative;max-width:var(--maxw);margin:0 auto;padding:56px 40px 0;
  display:flex;gap:10px;flex-wrap:wrap;}
.a-filter{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--fg2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 20px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.a-filter:hover{border-color:var(--bleu-profond);}
.a-filter.active{background:var(--bleu-nuit);border-color:var(--bleu-nuit);color:var(--on-dark-1);}

/* ---- Cartes (structure commune) ------------------------------ */
.a-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;color:inherit;
  transition:border-color var(--dur) var(--ease);}
.a-card[hidden],.a-featured[hidden],.a-grid-wrap[hidden]{display:none!important;}
.a-card-thumb{position:relative;overflow:hidden;flex:none;}
.a-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.a-card-pill{position:absolute;top:14px;left:14px;z-index:2;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(205,181,163,.96);color:var(--bleu-nuit);}
.a-card-body{display:flex;flex-direction:column;flex:1;}
.a-card-date{font-weight:600;letter-spacing:.02em;color:#9c7350;}
.a-card-t{font-family:var(--font-display);font-weight:500;color:var(--bleu-nuit);
  letter-spacing:-.005em;text-wrap:pretty;}
.a-card-d{color:var(--fg2);text-wrap:pretty;}

/* ---- Featured (2 premières du filtre) ------------------------ */
.a-list{padding-bottom:130px;}
.a-featured{position:relative;max-width:var(--maxw);margin:0 auto;padding:40px 40px 12px;}
.a-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.a-feat-grid:has(> .a-card:only-child){grid-template-columns:1fr;}
.a-feat-grid .a-card{border-radius:var(--r-xl);box-shadow:var(--sh-md);}
.a-feat-grid .a-card:hover{border-color:var(--bleu-glacier);}
.a-feat-grid .a-card-thumb{height:280px;}
.a-feat-grid .a-card-pill{top:20px;left:20px;font-size:10.5px;padding:7px 14px;}
.a-feat-grid .a-card-body{padding:32px 32px 28px;justify-content:center;}
.a-feat-grid .a-card-date{font-size:12.5px;margin-bottom:12px;}
.a-feat-grid .a-card-t{font-size:var(--t-h4);line-height:1.28;margin-bottom:14px;}
.a-feat-grid .a-card-d{font-size:14.5px;line-height:1.62;margin-bottom:18px;}

/* ---- Grille compacte ----------------------------------------- */
.a-grid-wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:34px 40px 0;}
.a-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.a-grid .a-card{border-radius:var(--r-lg);min-width:0;height:100%;}
.a-grid .a-card:hover{border-color:var(--bleu-glacier);}
.a-grid .a-card-thumb{height:200px;}
.a-grid .a-card-body{padding:22px 24px 22px;}
.a-grid .a-card-date{font-size:12px;margin-bottom:11px;}
.a-grid .a-card-t{font-size:21px;line-height:1.22;margin-bottom:12px;}
.a-grid .a-card-d{font-size:14px;line-height:1.6;margin-bottom:14px;}

@media (max-width:960px){
  .a-feat-grid{grid-template-columns:1fr;}
  .a-grid{grid-template-columns:repeat(2,1fr);}
  .a-hero{padding:150px 0 64px;}
}
@media (max-width:640px){
  .a-grid{grid-template-columns:1fr;}
}