/* Accessibilité (écrit à la main, non généré) : navigation au clavier. */

/* Lien d'évitement : invisible, il apparaît au premier appui sur Tab. */
.skip-link {
  position: fixed; z-index: 100; left: 16px; top: 12px;
  padding: 12px 18px; border-radius: 999px; background: #222121; color: #F3F2EF !important;
  font: 500 14px/1 'Instrument Sans', system-ui, sans-serif; text-decoration: none;
  translate: 0 -160%; transition: translate .25s ease;
}
.skip-link:focus { translate: 0 0; }

/* Contour de focus visible uniquement au clavier, aux couleurs du site. */
:focus-visible { outline: 2px solid #7A6470; outline-offset: 3px; border-radius: 6px; }
a[style*="border-radius:999px"]:focus-visible, button:focus-visible { border-radius: 999px; }
#contact :focus-visible { outline-color: #F3F2EF; }
input:focus-visible, textarea:focus-visible { outline: none; } /* le soulignement du champ suffit */

/* Maquette du hero : étiquette « Exemple » dans la barre du navigateur. */
.mock-tag {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  padding: 3px 9px; border-radius: 999px; background: #F3F2EF; color: #222121;
  font: 500 clamp(8px, .7vw, 10px)/1.2 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
}