/* ============================================================
   SITE CSS ADDITIONS — loaded after styles.css (a11y + small UI enhancements)
   Keeps the vendored maquette styles.css untouched.
   ============================================================ */

/* Screen-reader-only text (visually hidden, still announced) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link — off-screen until it receives keyboard focus */
.skip-link{
  position:fixed;left:50%;top:10px;z-index:200;
  transform:translate(-50%,-160%);
  background:var(--gold);color:#1c1808;
  padding:11px 20px;border-radius:var(--r);
  font-family:var(--sans);font-weight:500;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

/* WCAG AA contrast — lift the smallest muted text off the too-dark token
   (--muted-2 #6f6a5a fails 4.5:1; --muted #9a9381 passes on these grounds) */
.footer__bottom,.form__note{color:var(--muted)}

/* Footer column headings promoted to <h2> for heading order — keep the maquette look */
.footer h2{
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}

/* Visible keyboard focus (the design strips input outlines) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-soft);outline-offset:2px;
}

/* Styled upload — unmistakable "file selected" state (filename shown by app.js) */
.upload.is-filled{border-color:var(--gold);background:rgba(176,141,60,.06)}
.upload.is-filled svg{stroke:var(--gold-soft)}
.upload.is-filled [data-upload-name]{color:var(--paper)}

/* Links inside prose (legal pages) and the footer credit — make them visible */
.prose a,.footer__bottom a{color:var(--gold)}
.prose a:hover,.footer__bottom a:hover{color:var(--gold-soft)}

/* Réalisations — gold divider between the Avant and Après images */
.work__ba{gap:2px;background:var(--gold)}