/* Pages piliers : styles propres, au-dessus de liste.css (cartes, filtres partagés avec les
   pages lettre). Quelques classes reprises de design/css/pilier.css. */

/* Bandeau « année de la lettre » */
.pil-annee{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--accent-tint);border:1.5px solid var(--ink);border-radius:var(--radius-lg)}
.pil-annee__t{margin:0;font:600 22px/28px var(--font-display)}

/* Top 10 */
.pil-top10{margin:0;padding:var(--space-1) var(--space-4);list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.pil-top10 li{display:flex;align-items:center;gap:var(--space-3);min-height:52px;border-top:1px solid var(--line)}
.pil-top10 li:first-child{border-top:0}
.pil-top10__rang{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);border:1.5px solid var(--ink);font:600 16px/1 var(--font-display)}
.pil-top10__nom{flex:1;font:600 18px/24px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.pil-top10__src{margin:var(--space-3) 0;font-size:14px;color:var(--ink-muted)}

/* Sélections */
.pil-sels{display:grid;gap:var(--space-3)}
.pil-sel{display:flex;flex-direction:column;gap:4px;min-height:84px;padding:var(--space-3) var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--accent);color:var(--ink);text-align:left;cursor:pointer}
.pil-sel:hover{background:var(--accent-tint)}
.pil-sel:active{transform:translateY(2px);box-shadow:0 3px 0 var(--accent)}
.pil-sel__t{font:600 19px/24px var(--font-display)}
.pil-sel__n{font-size:16px;line-height:22px;color:var(--ink-muted)}

.pil-listtitle{margin-bottom:0}

/* Partenaires */
.pil-partners{display:grid;gap:var(--space-3)}

@media (min-width:1024px){
  .pil-sels{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
  .pil-partners{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
}

/* Sidebar un peu plus large que sur la page lettre (300 px au lieu de 248), et emplacement
   publicité en tête de colonne, repris de design/css/pilier.css. */
@media (min-width:1024px){
  .pcc-page--pilier .let-body{grid-template-columns:300px minmax(0,1fr)}
}