/* Socle commun à toutes les pages : remise à zéro, colonne, titres, en-tête, pied de page. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  padding-inline: 24px;
}
a { color: var(--link); }
.wrap { max-width: 1420px; margin: 0 auto; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* En-tête */
/* Un seul bandeau : marque, navigation des sections, compte. Sa hauteur, lue par
   le héros de l'accueil, change quand la navigation passe sur sa propre ligne. */
:root { --top-h: 76px; }
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav account"; align-items: center; column-gap: 40px; height: var(--top-h); }
.brand { grid-area: brand; display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-mark); overflow: hidden; flex: none; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: -5px; width: 5px; height: 46px; background: var(--bg); transform: rotate(22deg); }
.brand-mark::before { left: 9px; } .brand-mark::after { left: 19px; }
.brand b { display: block; font: 700 19px/1 var(--display); letter-spacing: .3px; }
.site-nav { grid-area: nav; display: flex; gap: 26px; min-width: 0; }
.site-nav a { color: var(--text-3); text-decoration: none; font-size: 14.5px; white-space: nowrap; padding-block: 4px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.account { grid-area: account; display: flex; align-items: center; gap: 8px; }
.account form { display: contents; }
.account .btn { white-space: nowrap; }
/* Libellés courts quand l'en-tête manque de place */
.account .short { display: none; }

/* Sections */
section { padding-block: 80px; border-top: 1px solid var(--line); }
h2, h1.title { font: 700 clamp(28px, 3.6vw, 42px)/1.1 var(--display); letter-spacing: -.8px; text-wrap: balance; max-width: 22ch; }
.intro { color: var(--text-2); font-size: 17px; margin-top: 16px; max-width: 62ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px 40px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--text-3); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: inherit; }
footer a:hover { color: var(--text); }

/* Écrans étroits : la navigation passe sous la marque et défile seule. */
@media (max-width: 900px) {
  :root { --top-h: 116px; }
  .top { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 76px 40px; grid-template-areas: "brand account" "nav nav"; column-gap: 16px; }
  .account { justify-self: end; }
  .site-nav { align-self: stretch; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-right: 28px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  body { padding-inline: 16px; }
  section { padding-block: 56px; }
  .account { gap: 6px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .top { column-gap: 10px; }
  .brand { gap: 8px; }
  .account .btn { padding-inline: 9px; }
  .account .long { display: none; }
  .account .short { display: inline; }
}