/* ==========================================================================
   Easy Shop — page vitrine
   --------------------------------------------------------------------------
   Aucune couleur, aucun rayon, aucune famille en dur : tout vient de
   `tokens.css`, copie de `packages/design-tokens/src/tokens.css` (la source de
   vérité — l'image de production la recopie au build, voir deploy/web.Dockerfile).

   Deux licences prises sur le design system, toutes deux assumées :

   1. L'échelle typographique. Le produit est applicatif (corps 14 px, titres
      32 px) ; une page qui se lit dans un navigateur est éditoriale. Les
      tailles sont plus grandes, les familles, les graisses et le tracking ne
      bougent pas.

   2. Le ticket. En thème sombre, il est en papier clair (--color-ink en fond,
      --color-canvas en encre) — l'inverse de ce que DESIGN.md autorise pour
      une surface d'interface. Ce n'est pas une surface d'interface : c'est un
      objet posé sur le comptoir, et un ticket est blanc. C'est le seul endroit
      de la page où l'audace est dépensée ; tout le reste est calme.
   ========================================================================== */

/* --- Polices, servies en local ------------------------------------------ */

@font-face {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens locaux, composés à partir des tokens du produit -------------- */

:root {
  --font-hero: 600 clamp(56px, 9.5vw, 120px) / 0.94 var(--font-family-display);
  --font-h2: 600 clamp(30px, 3.6vw, 44px) / 1.06 var(--font-family-display);
  --font-h3: 550 20px/1.3 var(--font-family-display);
  --font-lede: 400 clamp(18px, 1.7vw, 21px) / 1.55 var(--font-family-base);
  --font-prose: 400 17px/1.65 var(--font-family-base);
  --font-small: 400 15px/1.55 var(--font-family-base);
  --font-mono-ui: 500 12px/1.4 var(--font-family-mono);
  --font-ticket: 500 13px/1.5 var(--font-family-mono);

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-space: clamp(64px, 8vw, 112px);
  --rail: 200px;

  /* Le ticket : papier et encre. En clair, la surface et l'encre du produit. */
  --paper: var(--color-surface-1);
  --paper-ink: var(--color-ink);
  --paper-rule: var(--color-hairline-strong);
}

[data-theme='dark'] {
  /* Voir l'en-tête : un ticket est blanc, même la nuit. */
  --paper: var(--color-ink);
  --paper-ink: var(--color-canvas);
  --paper-rule: var(--color-ink-disabled);
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font: var(--font-prose);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, dt, figure, ol, ul, table {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

em {
  font-style: normal;
  color: var(--color-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline-strong);
  font: var(--font-button);
}

.skip:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* --- Barre de tête ------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.topbar.is-stuck {
  border-bottom-color: var(--color-hairline);
}

.topbar-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.brand-mark svg {
  width: 16px;
  height: 16px;
}

.brand-word {
  font: var(--font-title);
  letter-spacing: var(--tracking-title);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.brand-word b {
  font-weight: 600;
  color: var(--color-ink);
}

.nav {
  display: flex;
  gap: var(--space-md);
  margin-left: auto;
}

.nav a {
  padding: var(--space-xxs) 0;
  border-bottom: 1px solid transparent;
  font: var(--font-label);
  color: var(--color-ink-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

.nav a.is-current {
  color: var(--color-ink);
  border-bottom-color: var(--color-primary);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: var(--touch-min);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  font: var(--font-button);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--color-glass-strong);
  color: var(--color-ink);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

[data-theme='dark'] .ico-sun,
[data-theme='light'] .ico-moon {
  display: none;
}

/* --- Accueil ------------------------------------------------------------- */

.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--font-mono-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-warning);
}

.hero h1 {
  font: var(--font-hero);
  letter-spacing: -0.045em;
  text-wrap: balance;
  margin-top: var(--space-lg);
}

.lede {
  font: var(--font-lede);
  max-width: 34em;
  margin-top: var(--space-xl);
}

.hero-note {
  font: var(--font-small);
  color: var(--color-ink-subtle);
  max-width: 36em;
  margin-top: var(--space-md);
}

/* --- Le ticket ----------------------------------------------------------- */

.hero-ticket {
  justify-self: end;
  width: min(100%, 340px);
}

.ticket {
  --dent: 7px;
  position: relative;
  padding: 28px 24px 34px;
  background: var(--paper);
  color: var(--paper-ink);
  font: var(--font-ticket);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-float);
  transform: rotate(-1.5deg);
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--dent)) no-repeat,
    radial-gradient(circle at 50% 0, #000 var(--dent), transparent calc(var(--dent) + 0.5px)) 0 100% / calc(var(--dent) * 2) var(--dent) repeat-x;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--dent)) no-repeat,
    radial-gradient(circle at 50% 0, #000 var(--dent), transparent calc(var(--dent) + 0.5px)) 0 100% / calc(var(--dent) * 2) var(--dent) repeat-x;
}

.ticket-head {
  display: grid;
  gap: 2px;
  text-align: center;
  font-size: 12px;
}

.ticket-brand {
  font: 600 22px/1.1 var(--font-family-display);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-xs);
}

.ticket-brand b {
  font-weight: 600;
}

.ticket-lines {
  margin: var(--space-md) 0 var(--space-xs);
  padding: var(--space-xs) 0;
  border-top: 1px dashed var(--paper-rule);
  border-bottom: 1px dashed var(--paper-rule);
  display: grid;
  gap: 4px;
}

.ticket-line {
  display: grid;
  grid-template-columns: 1fr 20px 60px;
  gap: var(--space-xs);
}

.ticket-line span:nth-child(2),
.ticket-line span:nth-child(3) {
  text-align: right;
}

.ticket-line.is-discount {
  opacity: 0.7;
}

.ticket-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 20px/1.2 var(--font-family-display);
  letter-spacing: var(--tracking-title);
  margin-top: var(--space-xs);
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.ticket-row.is-muted {
  opacity: 0.6;
  font-size: 12px;
}

.ticket-row.is-loyalty {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--paper-rule);
}

.ticket-foot {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 11px;
  opacity: 0.6;
}

.hero-ticket figcaption {
  margin-top: var(--space-lg);
  font: var(--font-caption);
  font-size: 13px;
  color: var(--color-ink-subtle);
  max-width: 30em;
}

/* --- Sections ------------------------------------------------------------ */

.section {
  padding: var(--section-space) 0;
  border-top: 1px solid var(--color-hairline);
}

.section-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.rail {
  position: sticky;
  top: 88px;
}

.rail-label {
  font: var(--font-mono-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.rail-note {
  font: var(--font-small);
  font-size: 14px;
  color: var(--color-ink-subtle);
  margin-top: var(--space-xs);
  max-width: 22ch;
}

.main h2 {
  font: var(--font-h2);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  max-width: 20ch;
}

.prose {
  font: var(--font-prose);
  max-width: 62ch;
  margin-top: var(--space-lg);
}

.figure {
  margin-top: clamp(32px, 4vw, 48px);
}

.figure figcaption {
  margin-top: var(--space-md);
  font: var(--font-small);
  font-size: 14px;
  color: var(--color-ink-subtle);
  max-width: 68ch;
}

/* --- Schémas ------------------------------------------------------------- */

.figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-ink);
  font-family: var(--font-family-base);
}

.figure svg rect,
.figure svg line,
.figure svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.figure svg rect {
  fill: var(--color-surface-1);
}

.figure svg marker path {
  fill: currentColor;
  stroke: none;
}

.figure svg text {
  fill: currentColor;
  stroke: none;
  font-size: 12px;
}

.figure svg .d-title {
  font-size: 13px;
  font-weight: 550;
}

.figure svg .d-muted {
  fill: var(--color-ink-subtle);
  font-size: 11px;
}

.figure svg .d-label {
  fill: var(--color-ink-muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.figure svg .d-mono {
  font-family: var(--font-family-mono);
}

.figure svg .d-strong {
  font-size: 13px;
  font-weight: 600;
}

.figure svg .d-faint {
  opacity: 0.35;
}

.figure svg .d-dashed {
  stroke-dasharray: 4 4;
}

.figure svg .d-ticket rect {
  fill: var(--paper);
  stroke: var(--paper-rule);
}

.figure svg .d-ticket text,
.figure svg .d-ticket line {
  fill: var(--paper-ink);
  stroke: var(--paper-ink);
}

.figure svg .d-ticket text {
  stroke: none;
}

.figure svg .d-accent rect,
.figure svg rect.d-accent {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  fill: var(--color-primary-subtle);
}

.figure svg .d-accent .d-title {
  fill: var(--color-primary);
}

[data-theme='dark'] .figure svg .d-accent .d-title {
  fill: var(--color-primary-bright);
}

/* --- Définitions sous une figure ---------------------------------------- */

.defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xxl);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
}

.defs dt {
  font: 550 15px/1.35 var(--font-family-base);
}

.defs dd {
  font: var(--font-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-xs);
}

/* --- La journée ---------------------------------------------------------- */

.day {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--color-hairline);
}

.moment {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.moment:not(.is-period) + .moment.is-period {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline-strong);
}

.moment-time {
  font: 500 14px/1.4 var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
  padding-top: 5px;
}

.is-period .moment-time {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.moment h3 {
  font: var(--font-h3);
  letter-spacing: var(--tracking-title);
}

.moment p {
  font: var(--font-small);
  font-size: 16px;
  color: var(--color-ink-muted);
  max-width: 60ch;
  margin-top: var(--space-xs);
}

.moment-mod {
  display: inline-block;
  margin-top: var(--space-sm);
  font: var(--font-mono-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* --- Le grand livre ------------------------------------------------------ */

.ledger-wrap {
  overflow-x: auto;
  border-top: 2px solid var(--color-ink);
}

.ledger {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font: 400 14px/1.4 var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

.ledger th {
  text-align: left;
  font: var(--font-mono-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
}

.ledger td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
}

.ledger td:nth-child(2) {
  white-space: nowrap;
  color: var(--color-ink-muted);
}

.ledger .num {
  text-align: right;
  white-space: nowrap;
}

.ledger tr.is-error td {
  color: var(--color-ink-muted);
}

.ledger tr.is-fix td {
  background: var(--color-primary-subtle);
}

/* --- Les modules --------------------------------------------------------- */

.modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--color-hairline);
}

.module {
  padding: var(--space-lg) var(--space-xl) var(--space-xl) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.module:nth-child(odd) {
  border-right: 1px solid var(--color-hairline);
}

.module:nth-child(even) {
  padding-left: var(--space-xl);
  padding-right: 0;
}

.module dt {
  font: 600 clamp(28px, 3vw, 36px) / 1.05 var(--font-family-display);
  letter-spacing: var(--tracking-display);
}

.module-domains {
  font: var(--font-mono-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: var(--space-xs);
}

.module dd:last-child {
  font: var(--font-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-md);
}

.foundations {
  font: var(--font-small);
  color: var(--color-ink-subtle);
  margin-top: var(--space-lg);
}

/* --- L'avancement -------------------------------------------------------- */

.progress {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--color-hairline);
}

.progress-row {
  display: grid;
  grid-template-columns: 180px 110px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.progress-row dt {
  font: var(--font-h3);
  letter-spacing: var(--tracking-title);
}

.progress-state {
  font: var(--font-mono-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 5px;
}

.progress-state.is-done {
  color: var(--color-success);
}

.progress-state.is-doing {
  color: var(--color-warning);
}

.progress-row dd:last-child {
  font: var(--font-small);
  color: var(--color-ink-muted);
  max-width: 56ch;
}

/* --- Pied de page -------------------------------------------------------- */

.footer {
  padding: var(--space-xxl) 0;
  border-top: 1px solid var(--color-hairline);
}

.footer-grid {
  display: grid;
  gap: var(--space-sm);
}

.footer p {
  font: var(--font-small);
  color: var(--color-ink-muted);
  max-width: 60ch;
}

.footer .footer-mono {
  font: var(--font-mono-ui);
  font-weight: 400;
  color: var(--color-ink-subtle);
}

/* --- Adaptatif ----------------------------------------------------------- */

@media (max-width: 1040px) {
  .nav {
    gap: var(--space-sm);
  }
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .theme-toggle {
    margin-left: auto;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hero-ticket {
    justify-self: start;
    margin-top: var(--space-md);
  }

  .ticket {
    transform: none;
  }

  .section-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .rail {
    position: static;
  }

  .rail-note {
    max-width: 40ch;
  }

  .modules {
    grid-template-columns: minmax(0, 1fr);
  }

  .module,
  .module:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .progress-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .progress-row dd:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .theme-word {
    display: none;
  }

  .defs {
    grid-template-columns: minmax(0, 1fr);
  }

  .moment {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .moment-time {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}