@font-face { font-family: "Kiwi Maru"; src: url("fonts/kiwi-maru-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Kiwi Maru"; src: url("fonts/kiwi-maru-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kiwi Maru"; src: url("fonts/kiwi-maru-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zen-maru-gothic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zen-maru-gothic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zen-maru-gothic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --blanc: #FFFFFF; --encre: #16201B; --gris: #56605A; --pale: #EEF1EF; --rouge: #A3191F; --rouge-f: #7C1217;
  --titre: "Kiwi Maru", "Hiragino Maru Gothic ProN", serif;
  --texte: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --marge: clamp(16px, 4vw, 48px);
  --mg: max(var(--marge), env(safe-area-inset-left), env(safe-area-inset-right));
  --g: min(1600px, 100vw - 2 * var(--mg));
  --rang: 68px; --utile: 36px; --tete: 88px;
  --q-corps: var(--encre); --q-pneu: var(--encre); --q-garde: var(--rouge); --q-jour: var(--blanc); --q-moyeu: var(--blanc);
  --visiere: var(--blanc);
}
@media (max-width: 1023.98px) { :root { --rang: 56px; --utile: 44px; --tete: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blanc); color: var(--encre); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--rang) + var(--tete) + 16px); scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); font: 400 17px/1.5 var(--texte); font-synthesis: none; }
@media (max-width: 1023.98px) { body { font-size: 16px; padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
main { overflow-x: clip; }
main:focus { outline: none; }
sup { color: var(--rouge); font: 700 12px/0 var(--texte); margin-left: 2px; vertical-align: 0.55em; }
.choisie sup { color: var(--blanc); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.grille { width: var(--g); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.choisie :focus-visible, .menu :focus-visible { outline-color: var(--blanc); }

.evitement { position: fixed; z-index: 100; top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  min-height: 44px; padding: 12px 18px; border-radius: 8px; background: var(--encre); color: var(--blanc); font-weight: 700;
  text-decoration: none; transform: translateY(calc(-100% - 60px)); }
.evitement:focus { transform: none; outline: 3px solid var(--rouge); outline-offset: 2px; }

/* Les dessins : aplats, couleurs passées par variables pour la version négative (colonne rouge, menu). */
.q-pneu { fill: var(--q-pneu); }
.q-moyeu { fill: var(--q-moyeu); }
.q-corps { fill: var(--q-corps); }
.q-garde { fill: var(--q-garde); }
.q-corps-t { fill: none; stroke: var(--q-corps); stroke-linecap: round; stroke-linejoin: round; }
.q-jour-t { fill: none; stroke: var(--q-jour); stroke-linecap: round; }
.casque-visiere { fill: var(--visiere); }
.negatif, .choisie { --q-corps: var(--blanc); --q-garde: var(--encre); --q-jour: var(--rouge); --q-moyeu: var(--rouge); --q-pneu: var(--encre); }

/* Les notes et la fin de page. */
.notes { padding: clamp(56px, 7vw, 112px) 0 calc(32px + env(safe-area-inset-bottom)); }
.notes__in { display: grid; grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 4vw, 80px); align-items: stretch; }
.notes__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 36px clamp(28px, 3vw, 56px); counter-reset: note; padding: 8px 0 clamp(0px, 8vw, 160px); align-content: space-between; }
.notes__liste li { counter-increment: note; display: grid; grid-template-columns: clamp(44px, 3.4vw, 64px) 1fr; font-size: clamp(17px, 1.1vw, 21px); line-height: 1.5; max-width: 32ch; }
.notes__liste li::before, .note7__num { content: counter(note); font: 400 clamp(32px, 2.6vw, 48px)/1 var(--titre); color: var(--rouge); }
.notes__liste li:target { background: linear-gradient(transparent 60%, rgb(163 25 31 / .16) 60%); }
.notes__venir img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.note7 { display: grid; grid-template-columns: 44px 1fr; row-gap: 8px; margin-top: 24px; font-size: 17px; line-height: 1.6; }
.note7 a { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  font: 400 28px/1 var(--titre); text-decoration: none; border-bottom: 2px solid var(--rouge); }
.mentions { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 96px); font-size: 14px; color: var(--gris); max-width: 62ch; }
@media (max-width: 1023.98px) {
  .notes__in { grid-template-columns: 1fr; }
  .notes__liste { grid-template-columns: 1fr; gap: 24px; }
  .notes__liste li { font-size: 16px; max-width: none; }
  .notes__venir { margin-top: 40px; margin-inline: calc(-1 * var(--mg)); }
  .note7 { padding-inline: var(--mg); font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; } }