/* ==========================================================================
   ÉTUDE DE CAS — mise en page longue + module de démo jouable
   ========================================================================== */

/* --------------------------------------------------------------------------
   RETOUR
   -------------------------------------------------------------------------- */

.back {
  position: fixed;
  left: var(--gutter);
  bottom: var(--s-6);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: 0.7ch;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: 100px;
  background: rgba(8, 9, 10, 0.8);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-100);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.back:hover { background: var(--acid); color: var(--ink-900); border-color: var(--acid); }

/* --------------------------------------------------------------------------
   HERO D'ÉTUDE DE CAS
   -------------------------------------------------------------------------- */

.chero {
  position: relative;
  padding-top: calc(var(--s-24) + var(--s-8));
  padding-bottom: var(--section);
  overflow: hidden;
}

.chero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-bottom: var(--s-8);
}

.chero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 16vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}

.chero__title .u-script {
  display: block;
  font-size: 0.24em;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-3deg);
  margin-left: 0.1em;
  margin-top: 0.1em;
}

.chero__lede {
  font-size: var(--fs-lead);
  max-width: 44ch;
  color: var(--fg-muted);
  margin-bottom: var(--s-12);
}
.chero__lede strong { color: var(--fg); }

.cmeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) { .cmeta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cmeta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-2);
}
.cmeta dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; }

/* --------------------------------------------------------------------------
   CHAPITRES
   -------------------------------------------------------------------------- */

.chap {
  display: grid;
  gap: var(--s-6) var(--gutter);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-12);
}

@media (min-width: 1024px) {
  .chap { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); align-items: start; }
}

.chap__id {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.5em;
}

.chap__title {
  font-size: var(--fs-h2);
  letter-spacing: -0.04em;
  margin-bottom: var(--s-6);
}

.rich > * + * { margin-top: var(--s-4); }
.rich p { max-width: 64ch; color: var(--fg-muted); }
.rich p.rich__lead { color: var(--fg); font-size: var(--fs-lead); line-height: 1.5; max-width: 48ch; }
.rich strong { color: var(--fg); font-weight: 600; }

.rich ul { margin-top: var(--s-4); max-width: 64ch; }
.rich li {
  position: relative;
  padding-left: 1.6em;
  color: var(--fg-muted);
}
.rich li + li { margin-top: var(--s-3); }
.rich li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* Citation détachée */
.pull {
  margin: var(--s-16) 0;
  padding: var(--s-8) 0;
  border-block: 1px solid var(--line);
}
.pull blockquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.pull blockquote em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  font-size: 1.3em;
  line-height: 0.7;
  letter-spacing: 0;
}
.pull figcaption {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Figure pleine largeur — pour les planches de conception */
.figfull { margin-block: var(--s-12); }
/* ratio libre : la planche impose sa hauteur, l'image n'est pas recadrée */
.figfull .plate { aspect-ratio: auto; }
.figfull .plate > img,
.figphone .plate > img { height: auto; }
.figfull figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Visuel à afficher en entier plutôt qu'en recadrage (logotypes) */
.plate--contain > img { object-fit: contain; }

/* Capture d'écran de téléphone — bridée, sinon elle mange toute la page */
.figphone { margin-block: var(--s-12); max-width: 340px; }
.figphone .plate { aspect-ratio: auto; border: 1px solid var(--line); }
.figphone figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Rangées de figures */
.figrow {
  display: grid;
  gap: var(--s-6) var(--gutter);
  grid-template-columns: 1fr;
  margin-block: var(--s-12);
}
@media (min-width: 768px) { .figrow--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .figrow--3 { grid-template-columns: repeat(3, 1fr); } }

.figrow figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Nuancier */
.swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 700px) { .swatches { grid-template-columns: repeat(4, 1fr); } }

.swatch { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.swatch__chip { height: 88px; }
.swatch__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.swatch__body b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.swatch__body span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ==========================================================================
   DÉMO JOUABLE
   ========================================================================== */

.demo {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
  container-type: inline-size;
}

.demo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}

.demo__bar h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.demo__bar h3 b { color: var(--acid); font-weight: 500; }

.demo__reset {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur), border-color var(--dur);
}
.demo__reset:hover { color: var(--acid); border-color: var(--acid); }

.demo__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@container (min-width: 760px) {
  .demo__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .demo__panel { border-left: 1px solid var(--line); border-top: none !important; }
}

/* --- Plateau ------------------------------------------------------------ */

.demo__stage { padding: var(--s-6) var(--s-4); }

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.4cqw, 12px);
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin-inline: auto;
}

.cell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  background: var(--ink-800);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.cell b { font-variant-numeric: tabular-nums; font-weight: 500; }
.cell i { font-style: normal; text-transform: uppercase; font-size: 8px; line-height: 1.2; }

.cell b s { text-decoration: none; opacity: 0.75; }

.cell[data-kind='event']     { border-color: rgba(245, 197, 66, 0.45); color: var(--g-budget); }
.cell[data-kind='justif']    { border-color: rgba(255, 122, 90, 0.5);  color: var(--g-pmr); }
.cell[data-kind='pause']     { border-color: rgba(94, 200, 245, 0.45); color: var(--g-temps); }
.cell[data-kind='transport'] { border-color: rgba(244, 243, 238, 0.4); color: var(--fg); }
.cell[data-kind='eco']       { border-color: rgba(205, 255, 62, 0.4);  color: var(--g-eco); }
.cell[data-kind='budget']    { border-color: rgba(245, 197, 66, 0.4);  color: var(--g-budget); }
.cell[data-kind='pmr']       { border-color: rgba(255, 122, 90, 0.4);  color: var(--g-pmr); }

.cell[data-kind='depart'],
.cell[data-kind='arrivee'] {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink-900);
}
.cell[data-kind='arrivee'] { background: var(--paper-100); border-color: var(--paper-100); }

.cell.is-done { background: var(--ink-700); }

.cell.is-here {
  border-color: var(--acid);
  box-shadow: inset 0 0 0 1px var(--acid);
}

/* Le pion */
.pawn {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--acid);
  border: 2px solid var(--ink-900);
  z-index: 3;
  pointer-events: none;
  transition: transform 480ms var(--ease-out);
  will-change: transform;
}
.pawn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--acid);
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .pawn { transition-duration: 1ms; }
}

/* --- Panneau ------------------------------------------------------------ */

.demo__panel {
  padding: var(--s-6) var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.panel__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-3);
}

/* Jauges */
.gauges { display: flex; flex-direction: column; gap: var(--s-3); }

.gauge { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); align-items: baseline; }

.gauge__name {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.gauge__name svg { width: 12px; height: 12px; fill: none; stroke: var(--gc); stroke-width: 1.6; }

.gauge__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--fg);
}

.gauge__track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--ink-600);
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gc);
  transform-origin: 0 50%;
  transition: transform 520ms var(--ease-out), background-color var(--dur);
}

.gauge.is-low .gauge__fill { background: #ff4d3d; }
.gauge.is-low .gauge__val { color: #ff8577; }

/* Sélecteur de mode */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--s-2); }

.mode {
  min-height: 68px;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--fg-muted);
  transition: border-color var(--dur), color var(--dur), background-color var(--dur);
}
.mode svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mode span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mode:hover { color: var(--fg); border-color: var(--line-strong); }
.mode[aria-pressed='true'] {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink-900);
}

/* Dé + action */
.roll { display: flex; align-items: center; gap: var(--s-4); }

.die {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--paper-100);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  transition: transform 420ms var(--ease-out);
}
.die.is-rolling { transform: rotate(360deg) scale(0.9); }

@media (prefers-reduced-motion: reduce) { .die { transition: none; } }

.roll .btn { flex: 1; min-height: 56px; }

/* Journal */
.log {
  max-height: 168px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
  overscroll-behavior: contain;
}
.log p { margin: 0; }
.log b { color: var(--acid); font-weight: 500; }
.log .neg { color: var(--danger); }

/* Carte événement */
.card {
  position: relative;
  border: 1px solid var(--g-budget);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  background: rgba(245, 197, 66, 0.07);
  animation: card-in 420ms var(--ease-out);
}
.card[data-kind='arg'] { border-color: var(--g-pmr); background: rgba(255, 122, 90, 0.08); }

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); }
  to   { opacity: 1; transform: none; }
}

.card__kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g-budget);
  margin-bottom: var(--s-2);
}
.card[data-kind='arg'] .card__kicker { color: var(--g-pmr); }

.card h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.card p { font-size: 0.8125rem; color: var(--fg-muted); margin-bottom: var(--s-3); }

.card__choices { display: flex; flex-direction: column; gap: var(--s-2); }

.card__choice {
  text-align: left;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  line-height: 1.4;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
.card__choice:hover { background: var(--acid); border-color: var(--acid); color: var(--ink-900); }

/* Écran de fin */
.over {
  border: 1px solid var(--acid);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  background: var(--acid-wash);
}
.over h4 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.over__score {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--acid);
  font-variant-numeric: tabular-nums;
  margin-block: var(--s-2) var(--s-3);
}
.over p { font-size: 0.8125rem; color: var(--fg-muted); margin-bottom: var(--s-3); }

.demo__note {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  line-height: 1.6;
}

/* --- Sélection de journée ------------------------------------------------ */

.jsel { padding: var(--s-8) var(--s-4); }

.jsel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

@container (min-width: 620px) {
  .jsel__grid { grid-template-columns: repeat(3, 1fr); }
}

.jcard {
  text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 132px;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.jcard:hover { border-color: var(--acid); background: var(--acid-wash); }

.jcard b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
}
.jcard em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.jcard span { font-size: 0.75rem; color: var(--fg-muted); }
.jcard__c { margin-top: auto; padding-top: var(--s-2); color: var(--fg-faint) !important; }

.jsel__hint {
  font-size: 0.8125rem;
  color: var(--fg-muted);
  max-width: 68ch;
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}

/* --- Bandeau de contexte -------------------------------------------------- */

.ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}
.ctx b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
}
.ctx span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-faint);
}

/* --- Jauges à pastilles (3 points, comme dans le jeu) --------------------- */

.gauge--pips { grid-template-columns: 1fr auto; align-items: center; }

.pips { display: inline-flex; gap: 5px; }
.pips i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--ink-600);
  border: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pips i.on { background: var(--gc); border-color: var(--gc); }
.gauge--pips.is-low .pips i.on { background: #ff4d3d; border-color: #ff4d3d; }

.pmr {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7ch;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pmr b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--g-pmr);
}
.pmr span { margin-left: auto; color: var(--fg-faint); }

/* --- Loi du dé ------------------------------------------------------------ */

.dielaw {
  margin-top: var(--s-3);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

.card[data-kind='transport'] { border-color: var(--line-strong); background: rgba(244, 243, 238, 0.03); }
.card[data-kind='transport'] .card__kicker { color: var(--fg-muted); }
.card[data-kind='pause']     { border-color: rgba(94, 200, 245, 0.5); background: rgba(94, 200, 245, 0.07); }
.card[data-kind='pause'] .card__kicker { color: var(--g-temps); }
.card[data-kind='eco']       { border-color: rgba(205, 255, 62, 0.5); background: var(--acid-wash); }
.card[data-kind='eco'] .card__kicker { color: var(--g-eco); }
.card[data-kind='pmr']       { border-color: rgba(255, 122, 90, 0.5); background: rgba(255, 122, 90, 0.07); }
.card[data-kind='pmr'] .card__kicker { color: var(--g-pmr); }

.over__score small {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   RÈGLES — tableau des coûts
   -------------------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }

.rules {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.rules th, .rules td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.rules thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  background: var(--bg-sunken);
}
.rules tbody th { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
.rules td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.rules tbody tr:last-child th, .rules tbody tr:last-child td { border-bottom: none; }
.rules .up { color: var(--accent); }
.rules .down { color: var(--danger); }

/* --------------------------------------------------------------------------
   GALERIE DE POCHETTES
   -------------------------------------------------------------------------- */

.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s-6) var(--gutter);
  margin-block: var(--s-8);
}

.gal__item .plate {
  aspect-ratio: 1 / 1;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .gal__item:hover .plate { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .gal__item .plate { transition: none; }
  .gal__item:hover .plate { transform: none; }
}

.gal__item figcaption {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gal__item figcaption b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.gal__item figcaption span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   POULES — tirage au sort
   -------------------------------------------------------------------------- */

.pools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  margin-block: var(--s-8);
}

.pool {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
}

.pool h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  background: #f5821f;
  color: #0b1f3a;
}

.pool li {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small);
  border-top: 1px solid var(--line);
  position: relative;
  padding-left: var(--s-8);
}

.pool li::before {
  content: '';
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #1c7a3e;
}

/* --------------------------------------------------------------------------
   INDICATEURS CHIFFRÉS
   -------------------------------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-block: var(--s-8);
}

.kpi {
  padding: var(--s-6) var(--s-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kpi dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-3);
  line-height: 1.4;
}

.kpi dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
  flex-wrap: wrap;
}

.kpi b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--accent);
}

.kpi span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   CONSTRUCTION DE SIGLE
   -------------------------------------------------------------------------- */

.constr {
  margin-block: var(--s-8);
  padding: var(--s-8) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.constr svg {
  width: 100%;
  min-width: 560px;
  height: auto;
  color: var(--fg);
}

.constr figcaption {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Marque en positif / négatif */
.mark {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  border-radius: var(--radius-lg);
  padding: var(--s-8);
}
.mark svg { width: 100%; height: auto; }
.mark--light { background: var(--paper-100); color: var(--ink-900); }
.mark--dark  { background: var(--ink-900);  color: var(--paper-100); }

/* --------------------------------------------------------------------------
   TERRITOIRES DE COULEUR
   -------------------------------------------------------------------------- */

.terr {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-block: var(--s-8);
}

@media (min-width: 600px)  { .terr { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .terr { grid-template-columns: repeat(4, 1fr); } }

.terr__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tbg);
}

.terr__chip {
  height: 120px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 62%),
    var(--tbg);
  position: relative;
}

/* le sigle, réduit à sa géométrie : lentille + éclat */
.terr__chip::before,
.terr__chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.terr__chip::before {
  width: 46px;
  height: 74px;
  border-radius: 50% / 46% 46% 54% 54%;
  border: 3px solid transparent;
  background: linear-gradient(160deg, var(--t1), var(--t2)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.terr__chip::after {
  width: 26px;
  height: 26px;
  background: linear-gradient(160deg, var(--t1), var(--t2));
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%
  );
}

.terr__card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  padding: var(--s-4) var(--s-4) var(--s-2);
  color: var(--paper-100);
}
.terr__card p {
  padding: 0 var(--s-4) var(--s-4);
  font-size: 0.8125rem;
  color: rgba(244, 243, 238, 0.72);
}

/* --------------------------------------------------------------------------
   BOUCLE DE JEU — cinq temps
   -------------------------------------------------------------------------- */

.loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--s-12);
  counter-reset: loop;
}

@media (min-width: 640px)  { .loop { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .loop { grid-template-columns: repeat(5, 1fr); } }

.loop__step {
  position: relative;
  padding: var(--s-6) var(--s-4) var(--s-8);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.loop__step:first-child { border-left: none; }

@media (max-width: 639px) { .loop__step { border-left: none; } }

/* la flèche qui relie les étapes — purement décorative */
@media (min-width: 1100px) {
  .loop__step::after {
    content: '';
    position: absolute;
    top: calc(var(--s-6) + 0.35em);
    right: -5px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    transform: rotate(45deg);
  }
  .loop__step:last-child::after { display: none; }
}

.loop__step > b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

.loop__step h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-2);
}

.loop__step p { font-size: var(--fs-small); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   LES DOUZE JOURNÉES
   -------------------------------------------------------------------------- */

.days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-block: var(--s-8);
}

.days li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}
.days li:hover { background: var(--acid-wash); }

.days b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.days span { font-size: var(--fs-small); line-height: 1.35; }

/* --------------------------------------------------------------------------
   PROJET SUIVANT
   -------------------------------------------------------------------------- */

.next {
  display: block;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
  text-align: center;
}
.next span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-4);
}
.next b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  display: block;
  transition: color var(--dur) var(--ease-out);
}
.next:hover b { color: var(--acid); }