/* Accueil : la phrase de 2006, le calculateur en vedette avec les portraits des classes, les nouvelles du site. */
.accroche { font-family: var(--titre); font-size: clamp(20px, 3.4vw, 28px); margin: 6px 0 18px; max-width: 560px; color: var(--brun); }
.vedette { max-width: 780px; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--bord);
  box-shadow: 0 6px 24px rgba(60, 35, 10, .08); }
.vedette .portraits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); background: #000; }
.vedette .portraits a { display: block; overflow: hidden; }
.vedette .portraits img { width: 100%; height: 170px; object-fit: cover; object-position: center 28%; display: block; opacity: .85; transition: opacity .15s, transform .15s; }
.vedette .portraits a:hover img, .vedette .portraits a:focus-visible img { opacity: 1; transform: scale(1.04); }
.vedette-texte { display: grid; gap: 4px; padding: 16px 18px; text-decoration: none; color: var(--texte); }
.vedette-texte strong { font-family: var(--titre); font-size: 22px; color: var(--bleu); }
.vedette-texte span { color: var(--doux); }
.vedette-texte:hover strong { color: var(--brun); }
@media (max-width: 560px) {
  .vedette .portraits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vedette .portraits img { height: 120px; }
}
.nouvelles { max-width: 780px; }
.nouvelles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nouvelles li { background: rgba(255, 255, 255, .78); border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; }
.nouvelles time { display: block; font-size: 12px; font-weight: 700; color: var(--brun); }
.nouvelles details { margin-top: 10px; }
.nouvelles summary { cursor: pointer; color: var(--doux); font-size: 14px; padding: 4px 0; }