:root {
  --mat: #1e6f5c;
  --mat-deep: #17594a;
  --mat-line: rgb(190 235 218 / 0.2);
  --mat-line-strong: rgb(190 235 218 / 0.42);
  --paper: #f8f9f3;
  --kraft: #cda873;
  --kraft-deep: #a98350;
  --ink: #10302a;
  --ink-soft: #47625b;
  --mineure: #93c572;
  --significative: #f3c94f;
  --grave: #f08a37;
  --critique: #cf2338;
  --grid: 32px;
  --stencil: "Saira Stencil One", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

html { background: var(--mat); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size:
    calc(var(--grid) * 5) calc(var(--grid) * 5),
    calc(var(--grid) * 5) calc(var(--grid) * 5),
    var(--grid) var(--grid),
    var(--grid) var(--grid);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ruler {
  height: 30px;
  overflow: hidden;
  display: flex;
  color: var(--paper);
  background-color: var(--mat-deep);
  background-image: repeating-linear-gradient(90deg, var(--mat-line-strong) 0 1px, transparent 1px calc(var(--grid) / 4));
  background-size: 100% 8px;
  background-repeat: no-repeat;
}

.ruler span {
  flex: 0 0 calc(var(--grid) * 5);
  padding: 9px 0 0 5px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 40px 24px 48px;
}

.masthead { color: var(--paper); margin-bottom: 32px; }

.masthead h1 {
  margin: 0;
  font: 400 clamp(2.75rem, 9vw, 6.25rem)/0.95 var(--stencil);
}

.masthead p {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 1.25rem;
  font-stretch: 90%;
}

.bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

/* La feuille : zone de dépôt, aperçu des coupes, puis résultat */
.sheet {
  position: relative;
  display: block;
  aspect-ratio: 1.414 / 1;
  cursor: pointer;
  background: var(--paper);
  box-shadow: 3px 4px 0 rgb(8 40 33 / 0.55);
}

.sheet:focus-within { outline: 3px solid var(--significative); outline-offset: 3px; }
.sheet.is-over { outline: 3px dashed var(--significative); outline-offset: 3px; }
.sheet.is-locked { cursor: default; }

.tiles {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: gap 0.45s ease, padding 0.45s ease;
}

.tile-row { flex: 1; display: flex; min-height: 0; gap: 0; transition: gap 0.45s ease; }

.tile {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  font: 400 var(--tile-font, 1.5rem)/1 var(--stencil);
  color: var(--ink);
  background: var(--paper);
  border-right: 1.5px dashed rgb(16 48 42 / 0.32);
  border-bottom: 1.5px dashed rgb(16 48 42 / 0.32);
  transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.5, 1), background-color 0.3s;
  transition-delay: var(--delay, 0s);
}

.tile-row .tile:last-child { border-right: 0; }
.tile-row:last-child .tile { border-bottom: 0; }
.tiles.is-dense .tile { border-width: 0 1px 1px 0; border-style: solid; border-color: rgb(16 48 42 / 0.16); }

.sheet.is-cut { background: transparent; box-shadow: none; }
.sheet.is-cut .tiles { gap: var(--cut-gap, 8px); }
.sheet.is-cut .tile-row { gap: var(--cut-gap, 8px); }
.sheet.is-cut .tile {
  border: 0;
  box-shadow: 1px 2px 0 rgb(8 40 33 / 0.5);
  transform: rotate(var(--tilt, 0deg));
}

.tile.mineure { background: var(--mineure); }
.tile.significative { background: var(--significative); }
.tile.grave { background: var(--grave); }
.tile.critique { background: var(--critique); color: #fff; }

.sheet-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

.sheet-text strong { font: 400 clamp(1.25rem, 3.2vw, 2rem)/1.15 var(--stencil); }
.sheet-text span { color: var(--ink-soft); max-width: 30em; }
.sheet.has-file .sheet-text strong,
.sheet.has-file .sheet-text span { background: var(--paper); padding: 2px 10px; overflow-wrap: anywhere; }
.sheet.is-cut .sheet-text { display: none; }

.scissors {
  position: absolute;
  top: calc(50% - 26px);
  left: -8%;
  width: 84px;
  height: 52px;
  color: var(--critique);
  opacity: 0;
  pointer-events: none;
}

.sheet.is-cutting .scissors {
  opacity: 1;
  animation: sweep 0.9s linear infinite;
}

@keyframes sweep {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--sheet-w, 700px) * 1.08)); }
}

/* Le ticket kraft : réglages */
.ticket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: var(--kraft);
  box-shadow: 3px 4px 0 rgb(8 40 33 / 0.55);
}

.ticket label { font-weight: 700; font-size: 1.0625rem; }

.ticket input[type="number"] {
  width: 100%;
  padding: 2px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 400 3rem/1.2 var(--stencil);
}

.ticket input[type="range"] { width: 100%; accent-color: var(--ink); }

button, .primary {
  display: inline-block;
  padding: 11px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 700 1rem/1.25 var(--body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

#cut, .primary { background: var(--ink); color: var(--paper); }
#cut { font: 400 1.5rem/1.2 var(--stencil); }

button:hover:not(:disabled), .primary:hover { background: var(--critique); border-color: var(--critique); color: #fff; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

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

.status { margin: 0; min-height: 1.5em; font-weight: 600; }
.error { margin: 0; padding: 8px 10px; background: var(--critique); color: #fff; font-weight: 600; }

/* Le rapport */
.report {
  margin-top: 40px;
  padding: clamp(20px, 4vw, 44px);
  background: var(--paper);
  box-shadow: 3px 4px 0 rgb(8 40 33 / 0.55);
}

.report:focus { outline: none; }

.report-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.report h2 { margin: 0 0 16px; font: 400 clamp(1.75rem, 4vw, 2.75rem)/1.05 var(--stencil); }
.report h3, figcaption { margin: 0 0 12px; font: 400 1.375rem/1.2 var(--stencil); }

.facts { margin: 0; display: grid; gap: 2px; }
.facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts .hash { font-weight: 400; font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.stamp {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px 10px;
  border: 5px solid var(--stamp, var(--critique));
  color: var(--stamp, var(--critique));
  font-family: var(--stencil);
  transform: rotate(-7deg);
  animation: slam 0.34s cubic-bezier(0.3, 1.4, 0.6, 1) 0.65s backwards;
}

.stamp-score { font-size: clamp(3.25rem, 8vw, 5.5rem); line-height: 1; }
.stamp-score small { font-size: 0.34em; }
.stamp-level { font-size: 1.5rem; line-height: 1.1; }

.stamp.mineure { --stamp: #3f7d1e; }
.stamp.significative { --stamp: #94700a; }
.stamp.grave { --stamp: #bf5a0b; }
.stamp.critique { --stamp: var(--critique); }

@keyframes slam {
  from { opacity: 0; transform: rotate(-7deg) scale(2.4); }
}

.verdict {
  margin: 24px 0;
  max-width: 34em;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.actions .primary[hidden], .actions button[hidden] { display: none; }
.countdown { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.analysis {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  margin-top: 36px;
}

.matrix-wrap { margin: 0; }

.matrix-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px;
}

.axis-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  color: var(--ink-soft);
}

.axis-x { grid-column: 2; text-align: center; color: var(--ink-soft); }

.matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }

.cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font: 400 1.5rem/1 var(--stencil);
}

.cell.mineure { background: var(--mineure); }
.cell.significative { background: var(--significative); }
.cell.grave { background: var(--grave); }
.cell.critique { background: var(--critique); color: #fff; }
.cell.empty { color: transparent; }

.table-wrap { max-height: 420px; overflow: auto; border: 2px solid var(--ink); }

table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9375rem; }

th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-align: left;
}

td { padding: 7px 10px; border-top: 1px solid rgb(16 48 42 / 0.18); vertical-align: top; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-block;
  padding: 1px 7px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip.mineure { background: var(--mineure); }
.chip.significative { background: var(--significative); }
.chip.grave { background: var(--grave); }
.chip.critique { background: var(--critique); color: #fff; }

.foot { margin-top: 32px; color: var(--paper); max-width: 46em; font-size: 0.9375rem; }
.foot p { margin: 0 0 6px; }

@media (max-width: 820px) {
  .bench { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .analysis { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .matrix-wrap { max-width: 320px; }
}

@media (max-width: 560px) {
  .page { padding: 24px 16px 36px; }
  .report-head { flex-direction: column-reverse; }
  .stamp { align-self: flex-end; }
  .actions > * { width: 100%; }
  .sheet { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sheet.is-cutting .scissors { left: calc(50% - 42px); }
}