/* olwhyde/main_site/static/main_site/css/summary.css */
 
/* ============================================================
   summary.css — Composant Sommaire de page
   ============================================================
   Sommaire vertical des sections d'une page, présenté comme
   un cadre discret avec liserés haut/bas bleu ciel.
 
   Le composant fait par défaut la même largeur que les cartes
   section-card (max-width 1100px), pour que sommaire et cartes
   soient visuellement alignés et que le lecteur comprenne le
   lien d'appartenance.
 
   Hiérarchie HTML attendue :
     <div id="haut" class="summary" aria-label="Sommaire de la page">
       <div class="summary-inner">
         <a href="#section-1">…</a>
         <a href="#section-2">…</a>
       </div>
     </div>
   ============================================================ */
 
.summary {
  max-width: 1100px;
  margin: 20px auto 20px;
  padding: 18px 32px;
  background: var(--paler-blue-sky);
  border-top: 1px var(--accent-sky-blue) solid;
  border-bottom: 1px var(--accent-sky-blue) solid;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.summary-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--text);
}
 
.summary-inner a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
 
.summary-inner a:hover,
.summary-inner a:focus {
  color: var(--accent-sky-blue);
}
 
@media (max-width: 700px) {
  .summary { padding: 22px 24px; }
  .summary-inner { gap: 10px; }
}