/* ============================================================
   Rubrique Actualité — liste et article
   ============================================================ */

/* ---------- Liste ---------- */
.posts{display:grid;gap:20px}
@media(min-width:720px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}

.post{
  display:flex;flex-direction:column;
  background:var(--paper);border:2px solid var(--ink);border-radius:12px;overflow:hidden;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.post:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--rust)}
.post__img{aspect-ratio:16/10;object-fit:cover;border-bottom:2px solid var(--ink)}
.post__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__cat{
  align-self:flex-start;font-family:var(--display);font-size:.64rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--pine);
  padding:4px 9px;border-radius:4px;
}
.post h3{font-family:var(--display);font-weight:800;font-size:1.14rem;line-height:1.14;
  letter-spacing:-.03em;margin:0}
.post p{font-size:.88rem;color:var(--ink-soft);line-height:1.5;flex:1}
.post__meta{font-size:.76rem;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.post__meta::before{content:"";width:14px;height:2px;background:var(--rust)}

.post--une{grid-column:1/-1}
@media(min-width:720px){
  .post--une{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
  .post--une .post__img{height:100%;aspect-ratio:auto;border-bottom:0;border-right:2px solid var(--ink)}
  .post--une .post__body{padding:clamp(22px,3vw,36px);justify-content:center}
  .post--une h3{font-size:clamp(1.5rem,3vw,2.2rem)}
  .post--une p{font-size:.98rem}
}

/* Filtres par catégorie */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtre{
  padding:7px 15px;border:2px solid var(--ink);border-radius:100px;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:-.01em;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.filtre:hover,.filtre.is-on{background:var(--ink);color:var(--paper)}

/* ---------- Article ---------- */
.art{padding:clamp(30px,5vw,60px) 0 0}
.art__head{max-width:74ch;margin-bottom:clamp(26px,4vw,42px)}
.art__head h1{margin:16px 0 18px;font-size:clamp(2.1rem,5.6vw,3.9rem)}
.art__meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-size:.82rem;color:var(--ink-soft);margin-top:18px;
  padding-top:16px;border-top:2px solid var(--ink)}
.art__cover{border:2px solid var(--ink);border-radius:14px;overflow:hidden;
  box-shadow:8px 8px 0 var(--paper-3);margin-bottom:clamp(28px,4vw,48px)}
.art__cover img{width:100%;aspect-ratio:2/1;object-fit:cover}

.prose{max-width:72ch;font-size:1.04rem;line-height:1.72;color:var(--ink-2)}
.prose h2{
  font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1.05;letter-spacing:-.032em;color:var(--ink);
  margin:44px 0 14px;padding-top:24px;border-top:2px solid var(--ink);
}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.022em;
  color:var(--ink);margin:30px 0 8px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose a:hover{color:var(--rust-deep)}

.prose table{
  width:100%;border-collapse:collapse;margin:0 0 24px;
  font-size:.9rem;background:var(--paper);border:2px solid var(--ink);border-radius:10px;overflow:hidden;
}
.prose thead{background:var(--ink);color:var(--paper)}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.02em}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr:nth-child(even){background:var(--paper-2)}
@media(max-width:640px){
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
}

.prose .encart{
  background:var(--pine-soft);border:2px solid var(--pine);border-radius:12px;
  padding:22px 24px;margin:0 0 30px;
}
.prose .encart h3{margin:0 0 12px;color:var(--pine);font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase}
.prose .encart ul{margin:0;padding-left:20px}
.prose .encart li{color:var(--ink-2);margin-bottom:7px}
.prose .encart li:last-child{margin-bottom:0}

/* Encart de recommandation inséré dans l'article */
.reco{
  background:var(--ink);color:var(--paper);border-radius:14px;
  padding:clamp(24px,3.5vw,36px);margin:44px 0;max-width:72ch;
}
.reco .eyebrow{color:var(--gold)}
.reco h3{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.8vw,1.8rem);
  letter-spacing:-.03em;color:var(--paper);margin:12px 0 12px;line-height:1.1}
.reco p{color:rgba(251,247,240,.78);font-size:.95rem;margin-bottom:20px}
.reco .cta-note{color:rgba(251,247,240,.5);margin-top:14px}

/* Sources */
.sources{max-width:72ch;margin-top:44px;padding-top:22px;border-top:2px solid var(--ink)}
.sources h2{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;margin:0 0 12px}
.sources ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sources a{color:var(--rust);text-decoration:underline;font-size:.88rem}

/* Suite de lecture */
.suite{margin-top:clamp(46px,6vw,80px)}

/* Quiz de fin d'article : on le sort de la colonne de lecture pour
   qu'il se distingue nettement du corps. */
.quiz-fin{max-width:72ch;margin:clamp(40px,6vw,72px) 0 0}
.quiz-fin .quiz{padding:clamp(24px,4vw,38px)}
.quiz-fin h2.display{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:12px 0 0;border-top:0;padding-top:0}
.quiz-fin .eyebrow{display:block}

/* ------------------------------------------------------------------
   Même précaution côté thème clair : « .prose a » est plus spécifique
   que « .btn » et repeignait le texte des boutons en orange.
   ------------------------------------------------------------------ */
.prose .btn,.reco .btn,.quiz .btn{text-decoration:none;font-weight:700}
.prose .btn--main,.reco .btn--main,.quiz .btn--main{color:#fff;background:var(--rust)}
.prose .btn--main:hover,.reco .btn--main:hover,.quiz .btn--main:hover{color:#fff}
.prose .btn--ghost,.reco .btn--ghost{
  color:var(--paper);border:2px solid rgba(251,247,240,.5);background:transparent;
}
.prose .btn--ghost:hover,.reco .btn--ghost:hover{background:var(--paper);color:var(--ink)}
.quiz .btn--ghost{color:var(--ink);border:2px solid var(--ink)}