/* Pages d'aide et légales (étape 17, design/specs/screens/shop-and-help.md § 2) : HTML statique, sans le moteur du
   jeu. Fond uni (pas de mosaïque sous un texte long), Londrina Solid pour les titres, Atkinson Hyperlegible pour le
   texte, Patrick Hand pour les courts éléments. Polices servies par le jeu (aucun appel à un service tiers). */
@font-face { font-family: 'Londrina Solid'; font-weight: 400; font-display: swap; src: url(/fonts/londrina-solid-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-weight: 400; font-display: swap; src: url(/fonts/patrick-hand-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'); }

:root {
  --chalk: #F4F1E8; --blue: #8FD3FF; --yellow: #FFD84D; --todo: #FF4B2B;
  --f-display: 'Londrina Solid', system-ui, sans-serif; --f-text: 'Patrick Hand', system-ui, sans-serif; --f-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --tab-mark: url(/illu/ui-tab-mark.svg);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
.doc { background: #1E2024; color: var(--chalk); min-height: 100vh; font: 400 18px/1.65 var(--f-body); }

/* Barre du haut : logo, langue, « ‹ Retour au jeu ». */
.doc__bar, .doc__rule, .doc__wrap, .doc__foot { max-width: 1440px; margin-inline: auto; }
.doc__bar { display: flex; justify-content: space-between; align-items: center; height: 86px; padding: 0 72px; }
.doc__home { display: block; line-height: 0; }
.doc__bar .logo { width: 110px; height: auto; }
.doc__tools { display: flex; align-items: center; gap: 28px; }
.doc .doc__lang { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 18px/1 var(--f-text); }
.doc .doc__lang b { font-weight: 400; color: var(--chalk); }
.doc__lang a { color: inherit; opacity: 0.55; text-decoration: none; }
.doc__lang a:hover { opacity: 1; }
.doc__lang span { opacity: 0.4; }
.btn-secondary { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; gap: 8px; font: 400 22px/1 var(--f-display); color: var(--chalk); text-decoration: none; opacity: 0.85; transition: opacity 120ms linear, transform 80ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn-secondary::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url(/illu/ui-btn-secondary.svg) center / 100% 100% no-repeat; mask: url(/illu/ui-btn-secondary.svg) center / 100% 100% no-repeat; pointer-events: none; }
.btn-secondary:hover { opacity: 1; }
.btn-secondary:active { transform: scale(0.96, 0.92); }
.btn-secondary:focus-visible { outline: 2px dashed var(--chalk); outline-offset: 4px; }
.doc__arrow { width: 20px; height: 20px; flex: none; background: currentColor; rotate: 180deg; -webkit-mask: url(/illu/icon-arrow.svg) center / contain no-repeat; mask: url(/illu/icon-arrow.svg) center / contain no-repeat; }
.doc__short { display: none; }
.doc__rule { height: 8px; margin: 0 72px; background: var(--chalk); opacity: 0.35; -webkit-mask: var(--tab-mark) center / 100% 100% no-repeat; mask: var(--tab-mark) center / 100% 100% no-repeat; }
@media (min-width: 1585px) { .doc__rule { margin-inline: auto; width: 1296px; } }

/* Colonne du sommaire (240) et du texte (720). */
.doc__wrap { display: grid; grid-template-columns: 240px 720px; column-gap: 80px; padding: 34px 72px 120px; }
.doc__side { position: relative; }
.doc__toc { position: sticky; top: 24px; }
.doc__toc summary { display: none; }
.doc__toc nav { display: flex; flex-direction: column; gap: 4px; font: 400 18px/1.2 var(--f-text); }
.doc__toc a { position: relative; padding: 8px 0 10px; color: inherit; opacity: 0.7; text-decoration: none; }
.doc__toc a:hover { opacity: 1; }
.doc__toc a[aria-current="true"] { opacity: 1; }
.doc__toc a[aria-current="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60%; height: 8px; background: var(--chalk); -webkit-mask: var(--tab-mark) center / 100% 100% no-repeat; mask: var(--tab-mark) center / 100% 100% no-repeat; }
.doc__main { min-width: 0; }

/* Texte. */
.doc h1 { margin: 0; font: 400 56px/1.05 var(--f-display); }
.doc__meta { display: block; margin-top: 12px; font: 400 16px/1.3 var(--f-text); color: rgba(244, 241, 232, 0.6); }
.doc__note { font: 400 17px/1.4 var(--f-text) !important; color: rgba(244, 241, 232, 0.7) !important; }
.doc h2 { position: relative; margin: 44px 0 0; padding-bottom: 14px; font: 400 32px/1.1 var(--f-display); scroll-margin-top: 24px; }
.doc h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 8px; background: var(--chalk); opacity: 0.6; -webkit-mask: var(--tab-mark) center / 100% 100% no-repeat; mask: var(--tab-mark) center / 100% 100% no-repeat; }
.doc h3 { margin: 28px 0 0; font: 400 24px/1.15 var(--f-display); }
.doc p, .doc li, .doc td, .doc th { font: 400 18px/1.65 var(--f-body); color: rgba(244, 241, 232, 0.9); text-wrap: pretty; }
.doc b, .doc strong { font-weight: 700; color: var(--chalk); }
.doc p { margin: 16px 0 0; }
.doc .lead { margin-top: 24px; font-size: 21px; line-height: 1.6; color: var(--chalk); }
.doc ul { margin: 12px 0 0; padding: 0; list-style: none; }
.doc li { position: relative; margin: 4px 0; padding-left: 24px; }
.doc li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 3px; background: var(--chalk); }
.doc a { color: var(--blue); text-decoration: underline dashed 2px; text-underline-offset: 5px; }
.doc a:hover { text-decoration-style: solid; }
.doc .doc__bar a, .doc .doc__toc a, .doc .doc__foot a { text-decoration: none; }
.doc .doc__bar .doc__lang a, .doc .doc__toc a, .doc .doc__foot a { color: inherit; }
.doc .doc__back { color: var(--chalk); }
.doc .table { margin-top: 16px; overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; font-size: 16px; line-height: 1.5; border-bottom: 2px dashed rgba(244, 241, 232, 0.2); }
.doc th { font: 400 17px/1.3 var(--f-text); color: rgba(244, 241, 232, 0.6); }
.doc .todo { color: var(--todo); font-weight: 700; }

/* Comment jouer : le geste en trois temps (illu-geste.svg, 720 × 240), les modes (illu-mode-*.svg). */
.doc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.geste, .modes { --accent: var(--yellow); color: var(--chalk); }
.doc .geste { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 240px); }
.doc .geste__step { padding: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 240px auto; column-gap: 8px; align-items: start; margin: 0; }
.doc .geste__step::before { content: none; }
.geste__img { grid-column: 1 / 3; width: 240px; height: 240px; color: var(--chalk); overflow: hidden; }
.geste__n { font: 400 30px/1 var(--f-display); color: var(--yellow); }
.geste__txt { padding-right: 16px; font: 400 18px/1.25 var(--f-text); color: var(--chalk); }
.doc .modes { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.doc .mode { padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.doc .mode::before { content: none; }
.mode__img { width: 180px; height: 120px; color: var(--chalk); }
.mode__name { font: 400 26px/1.05 var(--f-display) !important; color: var(--chalk); }
.mode__rule { font: 400 16px/1.45 var(--f-body); color: rgba(244, 241, 232, 0.9); }

/* Pied : les pages d'aide et légales, même langue. */
.doc__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 28px 72px; font: 400 15px/1 var(--f-text); color: rgba(244, 241, 232, 0.6); }
.doc__foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.doc__foot a:hover, .doc__foot a[aria-current="page"] { color: var(--chalk); }

/* Entre téléphone et ordinateur : le texte prend la largeur restante. */
@media (min-width: 481px) and (max-width: 1180px) {
  .doc__wrap { grid-template-columns: 200px minmax(0, 720px); column-gap: 48px; padding-inline: 40px; }
  .doc__bar { padding-inline: 40px; } .doc__rule { margin-inline: 40px; } .doc__foot { padding-inline: 40px; }
}

/* Téléphone (390). */
@media (max-width: 480px) {
  .doc__bar { height: 110px; padding: 44px 16px 0; }
  .doc__bar .logo { width: 84px; }
  .doc__tools { gap: 14px; }
  .doc .doc__lang { font-size: 17px; }
  .doc__bar .btn-secondary { height: 44px; padding: 0 14px; font-size: 19px; }
  .doc__long { display: none; } .doc__short { display: inline; }
  .doc__rule { margin: 0 16px; }
  .doc__wrap { display: block; padding: 22px 24px 80px; }
  /* Sommaire replié : « Sur cette page », cadre de craie 2,5 px à 50 %, 48 de haut, flèche tournée 90°. */
  .doc__toc { position: static; margin-bottom: 24px; }
  .doc__toc summary { position: relative; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; list-style: none; cursor: pointer; font: 400 18px/1 var(--f-text); }
  .doc__toc summary::-webkit-details-marker { display: none; }
  .doc__toc summary::before { content: ""; position: absolute; inset: 0; border: 2.5px solid rgba(244, 241, 232, 0.5); pointer-events: none; }
  .doc__toc summary::after { content: ""; width: 18px; height: 18px; background: currentColor; rotate: 90deg; -webkit-mask: url(/illu/icon-arrow.svg) center / contain no-repeat; mask: url(/illu/icon-arrow.svg) center / contain no-repeat; transition: rotate 120ms linear; }
  .doc__toc[open] summary::after { rotate: -90deg; }
  .doc__toc nav { padding: 6px 14px 4px; font-size: 17px; }
  .doc h1 { font-size: 38px; }
  .doc h2 { font-size: 26px; margin-top: 34px; }
  .doc h2::after { width: 90px; height: 7px; }
  .doc h3 { font-size: 21px; margin-top: 22px; }
  .doc p, .doc li { font-size: 17px; line-height: 1.6; }
  .doc .lead { font-size: 18px; line-height: 1.55; }
  .doc th, .doc td { font-size: 15px; }
  /* Le geste : une étape par ligne, vignette 150 × 150, son numéro et sa légende. */
  .doc .geste { grid-template-columns: 1fr; gap: 10px; }
  .doc .geste__step { grid-template-columns: 150px 28px 1fr; grid-template-rows: auto; align-items: center; column-gap: 12px; }
  .geste__img { grid-column: auto; width: 150px; height: 150px; }
  .geste__n { font-size: 28px; text-align: center; }
  .geste__txt { padding: 0; font-size: 18px; }
  .doc .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .mode__img { width: 150px; max-width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .mode__name { font-size: 22px !important; }
  .mode__rule { font-size: 15px; }
  .doc__foot { flex-direction: column; justify-content: center; gap: 12px; padding: 18px 24px 40px; font-size: 14px; text-align: center; }
  .doc__foot nav { justify-content: center; gap: 6px 14px; }
}