/* #271 : Cinzel (SIL OFL 1.1, `fonts/OFL.txt`), hébergée ici — aucun CDN tiers. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cinzel-latin.woff2') format('woff2');
}

/* #271 : palette de la direction validée — plusieurs niveaux de sombre, or et ivoire. */
:root {
  --ink: #e8dcc0;
  --ink-muted: #bdb09a;
  --charcoal: #0b0b0c;
  --brown: #15120f;
  --panel-2: #1a1713;
  --bronze: #8a6a32;
  --gold: #d4af67;
  --sand: #e2c58d;
  --focus: #f0e2b8;
  --line: #493a28;
  --positive: #1f4d3a;
  --alert: #a3443a;
  --header-h: 5rem;
  --page-max: 90rem;
  --font-display: 'Cinzel', 'Iowan Old Style', Palatino, 'Times New Roman', serif;
  /* Motif géométrique discret (étoile à huit branches), jamais au premier plan. */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d4af67' stroke-opacity='.06'%3E%3Cpath d='M36 12l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='24' y='24' width='24' height='24' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0l12 12M72 0 60 12M0 72l12-12M72 72 60 60'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'Iowan Old Style', Palatino, 'Palatino Linotype', 'Times New Roman', serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--charcoal);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--charcoal);
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--sand);
}

a:hover {
  color: var(--gold);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 20;
  padding: 0.6rem 0.9rem;
  background: var(--brown);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: linear-gradient(to bottom, rgb(11 11 12 / 0.96), rgb(21 18 15 / 0.9));
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
  box-shadow: 0 1px 0 rgb(212 175 103 / 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(var(--page-max) + 2.5rem);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* #271 : logo validé (emblème + wordmark), ~50 % plus grand qu'avant. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.brand-emblem {
  inline-size: auto;
  block-size: 2.5rem;
}

.brand-wordmark {
  inline-size: auto;
  block-size: 2rem;
}

.site-nav-desktop {
  display: none;
  flex: 1;
  justify-content: center;
  gap: 1.6rem;
}

.site-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--gold);
}

.site-nav-desktop a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.45rem;
  block-size: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.site-nav-desktop a:hover::after,
.site-nav-desktop a[aria-current='page']::after {
  transform: scaleX(1);
}

.nav-toggle {
  margin-inline-start: auto;
}

.nav-toggle summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  min-block-size: 44px;
  min-inline-size: 44px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.nav-toggle summary::-webkit-details-marker {
  display: none;
}

.nav-toggle .site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--header-h);
  padding: 1rem 1.25rem 1.25rem;
  background: var(--brown);
  border-block-end: 1px solid var(--line);
}

.lang {
  position: relative;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 44px;
  padding-inline: 0.5rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang-globe,
.lang-caret {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

.lang-globe {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.lang-caret {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  inline-size: 15rem;
  padding: 0.75rem 1rem;
  background: var(--brown);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}

.lang-menu p {
  margin: 0;
}

.lang-current {
  color: var(--gold);
}

.lang-later {
  margin-block-start: 0.4rem;
  color: var(--ink-muted);
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-media picture,
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgb(13 11 9 / 0.92) 0%,
      rgb(13 11 9 / 0.35) 48%,
      rgb(13 11 9 / 0.2) 100%
    ),
    linear-gradient(to right, rgb(13 11 9 / 0.55), transparent 55%);
}

.hero-copy {
  width: min(42rem, calc(100% - 2.5rem));
  margin: 0 1.25rem 2.5rem;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge,
.badge-status {
  display: inline-block;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--line);
  color: var(--sand);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.badge-status {
  border-color: var(--gold);
  color: var(--gold);
}

.hero h1 {
  margin: 0.7rem 0 0.4rem;
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-stub h1 {
  margin: 0.35rem 0 0.6rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tagline {
  margin: 0.6rem 0;
  font-size: 1.15rem;
  color: var(--sand);
}

.hero-desc {
  margin: 0 0 1.2rem;
  max-width: 38rem;
  color: var(--ink-muted);
}

.hero-cta,
.page-stub .btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.btn-primary {
  background: var(--gold);
  color: var(--charcoal);
}

.btn-primary:hover {
  color: var(--charcoal);
  background: var(--sand);
}

.btn-secondary {
  background: rgb(13 11 9 / 0.72);
  color: var(--ink);
  border: 1px solid var(--line);
}

.pillar-icon svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}

.footer-col h2,
.page-stub h1 {
  margin: 0.35rem 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-stub {
  background: var(--brown);
  border: 1px solid var(--line);
}

.card-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.card-media img,
.stub-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.site-footer {
  border-block-start: 1px solid var(--line);
  padding: 2.5rem 1.25rem 2.5rem;
  background: var(--pattern), linear-gradient(to bottom, var(--brown), #090908);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: var(--page-max);
  margin: 0 auto 1.5rem;
}

.footer-col h2 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold);
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.45rem;
  text-decoration: none;
}

.footer-note {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.page-stub {
  max-width: 46rem;
  margin: 2rem auto 4rem;
  padding: 1.5rem 1.25rem 2rem;
}

.stub-figure {
  margin: 1rem 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .site-nav-desktop {
    display: flex;
  }

  .lang {
    margin-inline-start: auto;
  }

  .footer-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .hero-copy {
    margin-block-end: 3.5rem;
    margin-inline-start: max(2rem, calc((100% - 72rem) / 2));
  }
}

/* #271 — homepage réalignée sur la maquette WEB-001 : pleine largeur, logo, cards. */
.home-hero {
  align-items: flex-end;
  padding-block: 4rem 2rem;
}

/* Mobile : le texte couvre toute la largeur, le voile monte depuis le bas. */
.home-hero .hero-media::after {
  background: linear-gradient(
    to top,
    var(--charcoal) 0%,
    rgb(11 11 12 / 0.78) 45%,
    rgb(11 11 12 / 0.3) 100%
  );
}

.home-hero-inner {
  inline-size: 100%;
  max-inline-size: calc(var(--page-max) + 2.5rem);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.home-hero-copy {
  max-inline-size: 36rem;
}

.home-logo {
  margin: 1rem 0 0.6rem;
}

.home-logo img {
  inline-size: clamp(14rem, 22vw, 20rem);
  filter: drop-shadow(0 4px 18px rgb(0 0 0 / 0.6));
}

.home-hero .tagline {
  margin: 0 0 0.6rem;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

.home-hero .hero-desc {
  max-inline-size: 33rem;
  color: var(--ink);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

.home-hero-aside {
  display: none;
}

.btn-lg {
  gap: 0.6rem;
  min-block-size: 3.25rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.btn-primary.btn-lg {
  background: linear-gradient(to bottom, var(--sand), var(--gold) 55%, #b8904a);
  border: 1px solid var(--sand);
  color: #1a130a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 6px 18px rgb(0 0 0 / 0.4);
}

.btn-primary.btn-lg:hover {
  background: linear-gradient(to bottom, #f0dcae, var(--sand));
  color: #1a130a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 0 0 3px rgb(212 175 103 / 0.25),
    0 6px 18px rgb(0 0 0 / 0.4);
}

.btn-secondary.btn-lg {
  background: rgb(11 11 12 / 0.62);
  border: 1px solid var(--gold);
  color: var(--ink);
}

.btn-secondary.btn-lg:hover {
  background: rgb(212 175 103 / 0.14);
  color: var(--sand);
}

.btn-arrow,
.home-card-arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.home-pillars {
  position: relative;
  z-index: 1;
  padding: 1.75rem 1.25rem;
  background: var(--pattern), var(--charcoal);
  border-block-start: 1px solid rgb(212 175 103 / 0.25);
}

.home-pillar-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-inline-size: var(--page-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.home-pillar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.home-pillar img {
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.6));
}

.home-pillar h2 {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.home-pillar p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.home-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-inline-size: calc(var(--page-max) + 2.5rem);
  margin: 0 auto;
  padding: 2rem 1.25rem 1rem;
}

/* `isolation` : l'image (z-index -1) passe sous le texte mais reste dans la card. */
.home-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--panel-2), var(--brown));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Angles décoratifs dorés. */
.home-card::before,
.atlas-frame::before,
.atlas-panel::before,
.atlas-card::before,
.atlas-upcoming-card::before {
  content: '';
  position: absolute;
  inset: 0.4rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 0.9rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 1px 0.9rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 0.9rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 1px 0.9rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 0.9rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 1px 0.9rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 0.9rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1px 0.9rem no-repeat;
}

.home-card-media {
  position: relative;
  z-index: -1;
  inline-size: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-block-start: -4rem;
  padding: 3rem 1.15rem 1.1rem;
  background: linear-gradient(to bottom, rgb(21 18 15 / 0), var(--brown) 4rem);
}

.home-card h2 {
  margin: 0.25rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

/* Toute la card est cliquable, le lien reste le titre. */
.home-card h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.home-card p:not(.eyebrow) {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.home-card-arrow {
  align-self: flex-end;
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
}

.home-card:hover {
  border-color: var(--gold);
  box-shadow:
    0 16px 36px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(212 175 103 / 0.25);
  transform: translateY(-4px);
}

.home-card:hover .home-card-media {
  transform: scale(1.05);
}

.home-card:hover h2 a {
  color: var(--sand);
}

.home-card:hover .home-card-arrow {
  transform: translateX(4px);
}

/* Séparateur doré orné, repris de la maquette. */
.signature {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-inline-size: calc(var(--page-max) + 2.5rem);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.signature::before,
.signature::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

.signature::after {
  background: linear-gradient(to left, transparent, var(--gold));
}

.signature p {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  text-align: center;
  color: var(--sand);
}

.signature p::before,
.signature p::after {
  content: '◆';
  content: '◆' / '';
  margin-inline: 0.75rem;
  font-size: 0.6em;
  font-style: normal;
  vertical-align: middle;
  color: var(--gold);
}

@media (min-width: 600px) {
  .home-pillar-list,
  .home-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 769px) {
  /* Hauteur bornée : comme sur la maquette, les cards affleurent dès l'arrivée. */
  .home-hero {
    min-block-size: min(calc(100svh - var(--header-h)), 40rem);
    align-items: center;
    padding-block: 2.5rem 7rem;
  }

  /* Voile localisé : sombre à gauche sous le texte, presque transparent à droite. */
  .home-hero .hero-media::after {
    background:
      linear-gradient(
        90deg,
        rgb(11 11 12 / 0.9) 0%,
        rgb(11 11 12 / 0.66) 28%,
        rgb(11 11 12 / 0.16) 52%,
        transparent 70%
      ),
      linear-gradient(to top, var(--charcoal) 0%, rgb(11 11 12 / 0.55) 12%, transparent 32%);
  }
}

/* Trop étroit pour l'emblème, le wordmark, « Menu » et « EN » sur une ligne. */
@media (max-width: 419px) {
  .brand-wordmark {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav-desktop {
    gap: 0.9rem;
  }

  .site-nav a {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .brand-wordmark {
    display: none;
  }
}

@media (min-width: 1024px) {
  .header-inner {
    max-inline-size: calc(var(--page-max) + 5rem);
    padding-inline: 2.5rem;
  }

  .brand-emblem {
    block-size: 3rem;
  }

  .brand-wordmark {
    block-size: 2.4rem;
  }

  .home-hero-inner,
  .home-cards,
  .signature {
    max-inline-size: calc(var(--page-max) + 5rem);
    padding-inline: 2.5rem;
  }

  .home-hero-aside {
    display: block;
    position: absolute;
    inset-block-start: 2.5rem;
    inset-inline-end: max(2.5rem, calc((100% - var(--page-max)) / 2));
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-block-end: 1px solid var(--gold);
    background: radial-gradient(ellipse at center, rgb(11 11 12 / 0.6), rgb(11 11 12 / 0.25));
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-align: end;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
  }

  .home-pillars {
    margin-block-start: -6.5rem;
    padding: 1.5rem 2.5rem 1.75rem;
    background: linear-gradient(to bottom, rgb(11 11 12 / 0.35), var(--charcoal) 70%);
  }

  .home-pillar-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .home-pillar {
    justify-content: center;
    padding-inline: 1.25rem;
  }

  .home-pillar + .home-pillar {
    border-inline-start: 1px solid;
    border-image: linear-gradient(transparent, var(--gold), transparent) 1;
  }

  .home-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding-block-start: 1.5rem;
  }

  .site-footer {
    padding-inline: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-card,
  .home-card-media,
  .home-card-arrow,
  .btn-arrow,
  .btn-lg,
  .site-nav-desktop a::after {
    transition: none;
  }

  .home-card:hover,
  .home-card:hover .home-card-media {
    transform: none;
  }
}

/* Apparition progressive au défilement, sans JS ; ignorée si non supportée. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-pillar,
    .home-card {
      animation: home-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes home-reveal {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.page-block {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.page-block h2,
.system-card h3 {
  margin: 0.35rem 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.system-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.system-card,
.status-board {
  border: 1px solid var(--line);
  background: var(--brown);
  padding: 1rem 1.1rem;
}

.status {
  display: inline-block;
  margin: 0.35rem 0;
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  border: 1px solid var(--line);
}

.status-playable {
  color: var(--sand);
}

.status-dev {
  color: var(--gold);
  border-color: var(--gold);
}

.status-planned {
  color: var(--ink-muted);
}

.status-board {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.4rem 1rem;
}

.status-board li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  min-height: 44px;
  border-block-end: 1px solid var(--line);
}

.status-board li:last-child {
  border-block-end: 0;
}

.split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .system-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

#campaign-map {
  scroll-margin-block-start: calc(var(--header-h) + 0.75rem);
}

.campaign-map {
  margin: 0;
  aspect-ratio: 700 / 633;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
}

.campaign-map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.campaign-questions {
  margin: 1rem 0 0;
  padding-inline-start: 1.25rem;
  color: var(--ink-muted);
}

.campaign-questions li {
  margin-block-end: 0.65rem;
}

/* #272 — Atlas réaligné : la carte au premier plan, puis légende, repère de période et couches. */
.atlas-hero {
  padding: 2.5rem 1.25rem 3rem;
  background:
    radial-gradient(ellipse at 70% 40%, rgb(212 175 103 / 0.12), transparent 60%), var(--pattern),
    linear-gradient(to bottom, var(--brown), var(--charcoal));
  border-block-end: 1px solid rgb(212 175 103 / 0.25);
}

.atlas-hero-inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  max-inline-size: var(--page-max);
  margin: 0 auto;
}

.atlas-hero h1,
.atlas-page h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atlas-hero h1 {
  margin: 0.8rem 0 0.3rem;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
}

.atlas-hero .hero-desc {
  max-inline-size: 34rem;
}

/* Cadre de carte : liseré bronze, angles dorés (règle `.home-card::before`). */
.atlas-frame {
  position: relative;
  margin: 0;
  padding: 0.5rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

.atlas-frame img {
  inline-size: 100%;
}

.atlas-frame > .media-label {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.atlas-frame figcaption,
.atlas-note {
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.atlas-frame figcaption {
  padding-inline: 0.25rem;
}

.atlas-section {
  max-inline-size: var(--page-max);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 0;
}

.atlas-head {
  max-inline-size: 46rem;
  margin-block-end: 1.5rem;
}

.atlas-head h2 {
  margin: 0.35rem 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.atlas-head p:not(.eyebrow) {
  margin: 0;
  color: var(--ink-muted);
}

.atlas-explore-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

/* Sans `overflow: hidden` : Marrakech est au bord bas, son point déborde sur le cadre. */
.atlas-map-canvas {
  position: relative;
}

/* Coordonnées de l'image (physiques) : `left`/`top`, pas de propriétés logiques. */
.atlas-map-overlay > span,
.atlas-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
}

.atlas-markers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.atlas-marker {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: var(--sand);
  border: 2px solid #2a1f12;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(212 175 103 / 0.35);
}

.atlas-marker span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% -0.3rem;
  padding: 0.05rem 0.4rem;
  background: rgb(11 11 12 / 0.72);
  color: var(--ink);
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  white-space: nowrap;
}

/* Voisins proches (Jaca/Saraqusta, Ishbiliya/Gharnata) : un nom passe sous le point. */
.atlas-marker.is-below span {
  top: 100%;
  bottom: auto;
  translate: -50% 0.3rem;
}

.atlas-region,
.atlas-sea {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.85);
}

.atlas-region {
  color: var(--sand);
  font-size: clamp(0.65rem, 1.5vw, 1.05rem);
}

.atlas-sea {
  color: rgb(232 220 192 / 0.6);
  font-size: clamp(0.5rem, 1vw, 0.75rem);
  font-style: italic;
}

.atlas-map-overlay > .atlas-compass {
  left: auto;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  translate: none;
  inline-size: clamp(2.5rem, 6vw, 4.5rem);
}

.atlas-compass svg,
.atlas-icon svg {
  display: block;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}

.atlas-compass svg {
  inline-size: 100%;
  block-size: auto;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.8));
}

.atlas-panel,
.atlas-card,
.atlas-upcoming-card {
  position: relative;
  background: linear-gradient(to bottom, var(--panel-2), var(--brown));
  border: 1px solid var(--line);
  padding: 1.25rem;
}

.atlas-panel h3,
.atlas-card h3,
.atlas-upcoming-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.atlas-layers,
.atlas-timeline ol,
.atlas-upcoming {
  margin: 0;
  padding: 0;
  list-style: none;
}

.atlas-layer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--line);
}

.atlas-layer h4,
.atlas-timeline h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.atlas-layer p,
.atlas-timeline p,
.atlas-card p,
.atlas-upcoming-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.atlas-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line);
  background: rgb(212 175 103 / 0.06);
}

.atlas-icon svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}

.atlas-shown {
  color: var(--sand);
  border-color: var(--bronze);
}

.atlas-side {
  display: grid;
  gap: 1.25rem;
}

.atlas-timeline ol {
  display: grid;
  gap: 1rem;
  margin-block-start: 0.5rem;
}

.atlas-timeline li {
  position: relative;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--line);
}

.atlas-timeline li::before {
  content: '';
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-start: 0;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  rotate: 45deg;
  background: var(--brown);
  border: 1px solid var(--line);
}

.atlas-timeline li.is-current {
  border-block-start-color: var(--gold);
}

.atlas-timeline li.is-current::before {
  background: var(--gold);
  border-color: var(--sand);
}

.atlas-year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--sand);
}

.atlas-focus {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.atlas-focus-media {
  margin: 0;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

.atlas-focus-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.atlas-focus-copy h2 {
  margin: 0.3rem 0 0.6rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--ink);
}

.atlas-focus-copy > p:not(.eyebrow, .status) {
  color: var(--ink-muted);
}

.atlas-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.25rem 0;
  border-block: 1px solid var(--line);
}

.atlas-facts div {
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.atlas-facts div + div {
  border-inline-start: 1px solid var(--line);
}

.atlas-facts dt {
  color: var(--ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.atlas-facts dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--sand);
}

.atlas-duo,
.atlas-upcoming {
  display: grid;
  gap: 1.25rem;
}

.atlas-card .atlas-icon,
.atlas-upcoming-card .atlas-icon {
  margin-block-end: 0.9rem;
}

.atlas-upcoming-card {
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease;
}

.atlas-upcoming-card .status {
  align-self: flex-start;
  margin-block-start: auto;
}

.atlas-upcoming-card p {
  margin-block-end: 0.9rem;
}

.atlas-upcoming-card:hover,
.atlas-card:hover {
  border-color: var(--bronze);
}

.atlas-questions {
  max-inline-size: 52rem;
}

.atlas-cta {
  margin-block-start: 4rem;
  padding: 3.5rem 1.25rem;
  text-align: center;
  background: var(--pattern), linear-gradient(to bottom, var(--panel-2), var(--brown));
  border-block: 1px solid rgb(212 175 103 / 0.3);
}

.atlas-cta h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.atlas-cta p:not(.hero-cta) {
  max-inline-size: 38rem;
  margin: 0 auto 1.5rem;
  color: var(--ink-muted);
}

.atlas-cta .hero-cta {
  justify-content: center;
}

/* Trop petite, la carte n'a pas la place des mers : villes et régions d'abord. */
@media (max-width: 599px) {
  .atlas-sea {
    display: none;
  }

  /* Tous les coins portent une ville ou la rose des vents : le label passe sous l'image. */
  .atlas-frame.atlas-map > .media-label {
    position: static;
    margin-block-start: 0.5rem;
  }
}

@media (min-width: 768px) {
  .atlas-duo {
    grid-template-columns: 1fr 1fr;
  }

  .atlas-upcoming {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .atlas-timeline ol {
    grid-template-columns: repeat(3, 1fr);
  }

  .atlas-focus {
    grid-template-columns: 1.3fr 1fr;
  }
}

@media (min-width: 1024px) {
  .atlas-hero {
    padding-block: 3.5rem 4rem;
  }

  .atlas-hero-inner {
    grid-template-columns: minmax(22rem, 1fr) 1.45fr;
    gap: 3rem;
  }

  .atlas-explore-grid {
    grid-template-columns: 1fr 22rem;
  }

  .atlas-side .atlas-timeline ol {
    grid-template-columns: 1fr;
  }
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  color: var(--sand);
  text-decoration: none;
}

.category-nav a:hover {
  border-color: var(--bronze);
  color: var(--ink);
}

/* #276 : l'actif se lit par le fond, le texte et le trait, pas par une nuance de bordure. */
.category-nav a[aria-current='page'] {
  background: var(--gold);
  border-color: var(--sand);
  color: #1a130a;
  font-weight: 600;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.article-card {
  border: 1px solid var(--line);
  background: var(--brown);
}

.article-card a {
  display: block;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
}

.article-card h3 {
  margin: 0.35rem 0;
}

.article-meta,
.newsletter-why,
.delete-why {
  color: var(--ink-muted);
}

.article-prose {
  max-width: 42rem;
}

.article-prose h2 {
  margin-block-start: 1.8rem;
}

.devlog-quote {
  margin: 1.25rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--gold);
  color: var(--sand);
}

.article-figure,
.article-hero {
  margin: 0;
}

.article-figure img,
.article-hero img {
  width: 100%;
  height: auto;
}

.related-links {
  padding-inline-start: 1.25rem;
}

.newsletter {
  border: 1px solid var(--line);
  background: var(--brown);
  margin-block: 2rem;
}

.btn:disabled,
.form-field input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.empty-state {
  text-align: start;
}

/* #276 — Devlog : hero compact qui mène à la lecture, mise en avant d'article. */
.devlog-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 3rem 1.25rem 2.5rem;
  border-block-end: 1px solid rgb(212 175 103 / 0.25);
}

.devlog-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.devlog-hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

/* Voile localisé derrière le texte ; le décor reste lisible à droite. */
.devlog-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(11 11 12 / 0.85),
    rgb(11 11 12 / 0.55) 55%,
    rgb(11 11 12 / 0.35)
  );
}

.devlog-hero-copy {
  inline-size: 100%;
  max-inline-size: 40rem;
}

.devlog-hero h1 {
  margin: 0 0 0.9rem;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.7);
}

.devlog-hero h1 .eyebrow {
  display: block;
  margin-block-end: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-shadow: none;
}

.devlog-hero .hero-desc {
  max-inline-size: 34rem;
  color: var(--ink);
  font-size: 1.08rem;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

.devlog-page h2,
.devlog-feature .eyebrow,
.article-card .eyebrow {
  font-family: var(--font-display);
}

.devlog-listing h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.devlog-feature,
.article-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--panel-2), var(--brown));
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.devlog-feature {
  display: grid;
  margin-block-end: 1.25rem;
}

.devlog-feature-media {
  margin: 0;
  overflow: hidden;
  background: #111;
}

.devlog-feature-media img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.devlog-feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.4rem;
}

.devlog-feature-body > p {
  margin: 0;
}

.devlog-feature h3 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
}

.devlog-feature h3 a {
  color: var(--ink);
  text-decoration: none;
}

/* Toute la mise en avant est cliquable, le lien reste le titre. */
.devlog-feature h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.devlog-feature-body > p:not(.eyebrow, .article-meta) {
  color: var(--ink-muted);
  font-size: 1.02rem;
}

.devlog-feature-cta {
  align-self: flex-start;
  gap: 0.5rem;
  margin-block-start: 0.6rem;
  border-color: var(--gold);
}

.devlog-feature:hover,
.article-card:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
}

.devlog-feature:hover .devlog-feature-media img {
  transform: scale(1.03);
}

.devlog-feature:hover h3 a {
  color: var(--sand);
}

.devlog-feature:hover .btn-arrow {
  transform: translateX(4px);
}

.devlog-discover {
  margin-block: 2.5rem 3rem;
  padding-block: 2.25rem;
  text-align: center;
  border-block: 1px solid rgb(212 175 103 / 0.3);
  background: var(--pattern);
}

.devlog-discover h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
}

.devlog-discover p {
  margin: 0 0 1.25rem;
  color: var(--ink-muted);
}

.devlog-discover p:last-child {
  margin: 0;
}

@media (min-width: 768px) {
  .devlog-feature {
    grid-template-columns: 55fr 45fr;
    align-items: stretch;
  }

  .devlog-feature-body {
    justify-content: center;
    padding: 2rem 2.25rem;
  }
}

@media (min-width: 1024px) {
  .devlog-hero {
    min-block-size: clamp(24rem, 50vh, 28.5rem);
    padding-block: 3rem;
    padding-inline-start: max(1.25rem, calc((100% - 72rem) / 2 + 1.25rem));
  }

  .devlog-hero-media::after {
    background:
      linear-gradient(
        to right,
        rgb(11 11 12 / 0.92) 0%,
        rgb(11 11 12 / 0.72) 32%,
        rgb(11 11 12 / 0.15) 62%,
        transparent 80%
      ),
      linear-gradient(to top, rgb(11 11 12 / 0.6), transparent 30%);
  }
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* WEB-006 — page Playtest : formulaire sans JS, FAQ en <details>, états. */
#how-it-works,
#register,
#playtest-status {
  scroll-margin-block-start: calc(var(--header-h) + 0.75rem);
}

button.btn {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.status-positive {
  background: var(--positive);
  border-color: var(--positive);
  color: var(--ink);
}

.playtest-steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.playtest-form {
  max-width: 42rem;
}

.form-field label,
.form-consents legend {
  display: block;
  margin-block-end: 0.3rem;
  color: var(--sand);
}

.form-field input,
.form-field select,
.form-field textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--charcoal);
  color: var(--ink);
  font: inherit;
}

.form-consents {
  margin: 1rem 0;
  padding: 0;
  border: 0;
}

.form-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.form-check input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.2rem;
  flex: none;
}

.form-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.faq-item {
  border-block-end: 1px solid var(--line);
}

.faq-item summary {
  min-block-size: 44px;
  padding-block: 0.7rem;
  cursor: pointer;
  color: var(--sand);
}

.faq-item p {
  margin-block-start: 0;
  color: var(--ink-muted);
}

.form-alert {
  padding: 0.6rem 0.8rem;
  border-inline-start: 3px solid var(--alert);
}

.reason-list li {
  margin-block-end: 0.5rem;
  color: var(--ink-muted);
}

.reason-list li:target {
  padding-inline-start: 0.6rem;
  border-inline-start: 3px solid var(--alert);
  color: var(--ink);
}

/* #246 — lien personnel de suppression : une URL longue, sans espace. */
.deletion-link {
  overflow-wrap: anywhere;
}

/* WEB-007 — Community : carrousel des créations sans JS (défilement natif). */
.highlight-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}

.highlight-track > li {
  scroll-snap-align: start;
}

.newsletter .form-field {
  max-inline-size: 28rem;
}

/* WEB-008 — About : labels de provenance des visuels, flow et équipe. */
.media-label {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  background: rgb(13 11 9 / 0.85);
  color: var(--sand);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.media-label-gameplay {
  border-color: var(--positive);
  background: var(--positive);
  color: var(--ink);
}

.media-label-wip {
  border-color: var(--gold);
  color: var(--gold);
}

.media-label-concept {
  color: var(--ink);
}

.media-label-reference {
  border-color: var(--bronze);
  color: var(--sand);
}

.labelled-media,
.about-page .hero {
  position: relative;
}

.labelled-media > .media-label,
.about-page .hero > .media-label {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.about-page .split {
  align-items: start;
}

.about-page .hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
}

.about-research-media {
  aspect-ratio: 530 / 122;
  max-inline-size: 530px;
  margin-block: 1rem;
}

.about-flow {
  display: grid;
  gap: 2rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.about-flow > li {
  position: relative;
}

.about-flow > li:not(:last-child)::after {
  content: '↓';
  content: '↓' / '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  color: var(--gold);
  line-height: 2rem;
}

.team-avatar {
  inline-size: 6rem;
  block-size: 6rem;
  object-fit: cover;
}

.team-grid {
  margin: 0.5rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .about-flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }

  .about-flow > li:not(:last-child)::after {
    content: '→';
    content: '→' / '';
    inset-block-start: 50%;
    inset-inline-start: 100%;
    inline-size: 1.5rem;
    text-align: center;
    line-height: 1;
  }
}

/* WEB-009 — Press Kit : faits empilés sur mobile, galerie défilante, impression. */
.press-hero h1 {
  margin: 0.35rem 0 0.6rem;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.press-version,
.press-note,
.press-empty {
  color: var(--ink-muted);
}

.press-empty {
  padding: 0.8rem 1rem;
  border-inline-start: 3px solid var(--gold);
  background: var(--brown);
}

.press-facts {
  display: grid;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 0;
}

.press-facts dt,
.press-meta dt {
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.press-facts dd,
.press-meta dd {
  margin: 0.15rem 0 0;
}

.press-page button.btn-secondary {
  border: 1px solid var(--line);
}

/* `.btn` impose `display` : sans cette règle, `hidden` ne cacherait pas ces boutons sans JS. */
[data-press-copy][hidden],
[data-press-print][hidden] {
  display: none;
}

.press-quote {
  max-inline-size: 46rem;
  font-size: 1.15rem;
  color: var(--sand);
}

.press-grid {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.press-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 85%);
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}

.press-track > li {
  scroll-snap-align: start;
}

.press-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.press-thumb {
  margin: 0;
  background: #111;
  border: 1px solid var(--line);
}

.press-thumb img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.press-logo {
  display: grid;
  place-items: center;
  min-block-size: 8rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
}

.press-logo img {
  max-inline-size: 100%;
  max-block-size: 6rem;
}

/* Aperçu sur le fond pour lequel le logo est prévu, sinon un logo sombre disparaît. */
.press-logo-dark {
  background: var(--charcoal);
}

.press-logo-light {
  background: var(--ink);
}

.press-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.press-download {
  inline-size: 100%;
  margin-block-start: auto;
}

.press-do h4,
.press-dont h4 {
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.press-do h4 {
  color: var(--sand);
}

.press-dont h4 {
  color: var(--alert);
}

.press-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 1rem;
}

.press-usage figure {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  inline-size: 12rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.press-usage-box {
  display: grid;
  place-items: center;
  inline-size: 5rem;
  block-size: 3rem;
  margin: 1rem;
  border: 1px dashed var(--gold);
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.press-usage-stretched {
  transform: scaleX(1.8);
}

.press-usage-rotated {
  transform: rotate(-18deg);
}

.press-manifest {
  padding-inline-start: 1.25rem;
  overflow-wrap: anywhere;
}

.press-feature-list li {
  margin-block-end: 0.5rem;
}

@media (min-width: 768px) {
  .press-facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .press-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    overflow-x: visible;
  }

  .press-download {
    inline-size: auto;
    align-self: flex-start;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .press-screen-only {
    display: none;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .press-factsheet .eyebrow,
  .press-factsheet .press-version,
  .press-factsheet .press-facts dt,
  .press-factsheet .status {
    color: #333;
  }

  .press-factsheet a {
    color: #000;
  }
}