/*
 * Les guides : des pages de lecture, en HTML simple, sans JavaScript, pour
 * que Google et les assistants les lisent telles quelles. Même encre et mêmes
 * polices que la vitrine (voir web/src/styles/tokens.css), en plus sobre.
 */
:root {
  color-scheme: dark;
  --ground: #16181c; --rail: #1d2026; --card: #23262d;
  --rule: #313640; --rule-2: #262a32;
  --ink: #edeef0; --ink-2: #b4bac3; --ink-3: #8a919c;
  --jaune: #f5c518;
  --display: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.7 var(--sans); }
a { color: inherit; text-underline-offset: 3px; }

.haut {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: var(--rail); border-bottom: 1px solid var(--rule-2);
}
.haut__marque { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; }
.haut__marque img { width: 26px; height: 26px; }
.haut__lien { color: var(--ink-2); text-decoration: none; font-size: 14.5px; margin-left: auto; }
.haut__lien:hover { color: var(--ink); }
.bouton {
  display: inline-block; padding: 10px 16px; border-radius: 4px; text-decoration: none;
  background: var(--jaune); color: #141414; font-weight: 700; font-size: 15px; white-space: nowrap;
}
@media (max-width: 520px) { .haut { padding: 10px 16px; gap: 10px; } .haut .bouton { padding: 8px 12px; font-size: 14px; } }

main { max-width: 44rem; margin: 0 auto; padding: 48px 16px 72px; }
.fil { font-size: 13.5px; color: var(--ink-3); margin: 0 0 12px; }
.fil a { color: var(--ink-3); }
h1 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 88;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px;
}
.chapeau { font-size: 19px; color: var(--ink-2); margin: 0 0 32px; }
h2 {
  font-family: var(--display); font-weight: 750; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.01em; margin: 44px 0 12px;
}
h3 { font-size: 18px; margin: 28px 0 8px; }
p, li { color: var(--ink-2); }
p { margin: 0 0 16px; }
strong { color: var(--ink); font-weight: 650; }
ul, ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }
li::marker { color: var(--jaune); }
code { font-size: 15px; background: var(--card); padding: 1px 6px; border-radius: 3px; color: var(--ink); }

.encart {
  margin: 36px 0; padding: 20px 22px; background: var(--rail);
  border: 1px solid var(--rule); border-top: 3px solid var(--jaune); border-radius: 4px;
}
.encart p { margin-bottom: 14px; }
.encart p:last-child { margin-bottom: 0; }

.liste-guides { list-style: none; padding: 0; display: grid; gap: 14px; }
.liste-guides li { margin: 0; }
.liste-guides a {
  display: block; padding: 18px 20px; background: var(--rail); border: 1px solid var(--rule);
  border-radius: 4px; text-decoration: none;
}
.liste-guides a:hover { border-color: var(--ink-3); }
.liste-guides b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.liste-guides span { color: var(--ink-2); font-size: 15.5px; }

.bas {
  border-top: 1px solid var(--rule-2); padding: 28px 24px 40px; font-size: 14px; color: var(--ink-3);
  display: grid; gap: 12px; max-width: 72rem; margin: 0 auto;
}
.bas nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bas a { color: var(--ink-2); }