/* PROTOTYPE (throwaway, ticket 005). Shared by both variants: reset, menu
   mechanics, Article typography, pagination, prototype bar.
   Breakpoints: < 48em (768px) = mobile, burger menu; >= 48em = desktop menu;
   >= 64em (1024px) = wide (more air, bigger list images). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0625rem;           /* 17px mobile */
  line-height: 1.55;
  color: #000;
  background: #fff;
  padding-bottom: 4rem;           /* room for the prototype bar */
}
@media (min-width: 48em) { body { font-size: 1.125rem; } }  /* 18px */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid #d40000; outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Star ---------- */
.star { display: inline-block; flex: none; }

/* ---------- Menu: two navs, only one rendered at a time ----------
   Desktop: a plain <nav>. Mobile: <details>/<summary>. display:none removes
   the hidden one from the accessibility tree, so screen readers see one menu. */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav--mobile summary { list-style: none; cursor: pointer; }
.nav--mobile summary::-webkit-details-marker { display: none; }
.nav--mobile summary::marker { content: ""; }
.burger { width: 2rem; height: 2rem; display: block; fill: currentColor; }
.nav--desktop { display: none; }
@media (min-width: 48em) {
  .nav--desktop { display: block; }
  .nav--mobile { display: none; }
}

/* ---------- Section list ---------- */
.items { list-style: none; margin: 0; padding: 0; }
.item__title { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.item__title a { text-decoration: none; }
.item__title a:hover { text-decoration: underline; }
.item__date { margin: .35rem 0 0; font-size: .9rem; color: #555; }
.item__img img { background: #ddd; }
.section-title__page { font-weight: normal; color: #666; font-size: .6em; }
.proto-note {
  font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  background: #fff6d6; border: 1px dashed #b89a00; padding: .4rem .6rem;
  margin: 0 0 1.5rem;
}

/* ---------- Pagination ---------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 3rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid #000;
  font-size: 1rem;
}
.pager a, .pager span { text-decoration: none; padding: .5rem .25rem; }
.pager a:hover { text-decoration: underline; }
.pager__prev[aria-disabled] { color: #aaa; }
.pager__nums { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pager__nums a { display: inline-block; min-width: 2.5rem; text-align: center; padding: .5rem; }
.pager__nums a[aria-current] { background: #000; color: #fff; }
@media (max-width: 30em) {
  .pager__nums { order: 3; width: 100%; justify-content: center; }
}

/* ---------- Article page ---------- */
.article {
  background: #fff; color: #000;
  max-width: 42rem;                 /* ~70 characters per line */
  margin: 0 auto; padding: 1.5rem 1rem 2rem;
}
@media (min-width: 48em) { .article { padding: 3rem 0 3rem; } }
.article__section { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.article__section a { text-decoration: none; color: #d40000; font-weight: bold; }
.article__title { font-size: 1.85rem; line-height: 1.15; margin: 0 0 .5rem; }
@media (min-width: 48em) { .article__title { font-size: 2.5rem; } }
.article__date { margin: 0 0 1.5rem; color: #555; font-size: .95rem; }
.article__body p, .article__body li {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;   /* relies on lang="fr" */
  overflow-wrap: break-word;
}
.article__body p { margin: 0 0 1.1em; }
.article__body h2 { font-size: 1.4rem; line-height: 1.2; margin: 2em 0 .6em; }
.article__body h3 { font-size: 1.15rem; line-height: 1.25; margin: 1.6em 0 .5em; }
.article__body a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article__body a:hover { color: #d40000; }
.article__body blockquote {
  margin: 1.5em 0; padding: .1em 0 .1em 1.25em;
  border-left: 4px solid #d40000; font-style: italic;
}
.article__body blockquote p { text-align: left; }
.article__body ul { padding-left: 1.25em; margin: 0 0 1.1em; }
.article__fig { margin: 1.75em 0; }
.article__fig--lead { margin-top: 0; }
@media (min-width: 64em) {
  /* lead image breaks out of the text column on wide screens */
  .article__fig--lead { margin-left: -4rem; margin-right: -4rem; }
}
.article__fig img { width: 100%; background: #ddd; }
.article__fig--portrait img { width: auto; max-height: 75vh; margin: 0 auto; }
.article__fig figcaption { font-size: .85rem; color: #444; margin-top: .45rem; line-height: 1.4; }
.article__foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #000; font-size: 1rem; }
.article__foot a { text-decoration: none; }

/* ---------- Prototype bar (not part of the design) ---------- */
.protobar {
  position: fixed; left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: flex; gap: .6rem; align-items: center; max-width: calc(100% - 1rem);
  background: #ffe14d; color: #000; border: 2px solid #000; border-radius: 999px;
  padding: .35rem .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; z-index: 100;
}
.protobar a { text-decoration: none; font-weight: bold; }
.protobar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }