/* =========================================================================
   agble — manuel technique muji édition 2.0
   feuille de style scopée .muj-*
   philosophie : utilitarian instructional manual / muji / spec-sheet
   ========================================================================= */


/* -------------------------------------------------------------------------
   1.0 — tokens / variables
   ------------------------------------------------------------------------- */

:root {

  /* palette stricte muji */
  --muj-bg:        #FAFAFA;     /* blanc cassé du papier */
  --muj-bg-alt:    #F4F3F0;     /* registre alterné, sous-section */
  --muj-bg-deep:   #EDEAE5;     /* zone colophon */
  --muj-ink:       #1F1F1F;     /* noir d'impression */
  --muj-ink-soft:  #2B2B2B;     /* paragraphes */
  --muj-grey:      #6E6A66;     /* gris chaud secondaire */
  --muj-grey-soft: #9C9893;     /* méta-textes */
  --muj-line:      #EAEAEA;     /* filets standard */
  --muj-line-deep: #D6D2CC;     /* filets de cadre planche */

  /* accent unique — ciel */
  --muj-sky:       #6B95B5;
  --muj-sky-soft:  rgba(107, 149, 181, 0.10);
  --muj-sky-deep:  #4F7795;

  /* accents fonctionnels (réduits, pour tags risque uniquement) */
  --muj-warn-bg:   #F4EFE6;     /* warm sand */
  --muj-warn-ink:  #5C4D2E;
  --muj-low-bg:    #EFF2EE;     /* very pale moss */
  --muj-low-ink:   #3B5234;
  --muj-mid-bg:    #F2EEE8;
  --muj-mid-ink:   #5C4F38;
  --muj-high-bg:   #F1E8E6;
  --muj-high-ink:  #5E2E26;

  /* typographie */
  --muj-sans:  'Söhne', 'Suisse Int\'l', 'Helvetica Neue', 'Arial', sans-serif;
  --muj-display: 'Tenor Sans', 'Söhne', 'Helvetica Neue', sans-serif;
  --muj-mono:  'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;

  /* échelle typographique */
  --muj-fs-xxs:   10px;
  --muj-fs-xs:    11px;
  --muj-fs-sm:    13px;
  --muj-fs-base:  15px;
  --muj-fs-md:    17px;
  --muj-fs-lg:    20px;
  --muj-fs-xl:    28px;
  --muj-fs-2xl:   42px;
  --muj-fs-3xl:   62px;
  --muj-fs-4xl:   96px;

  /* tracking */
  --muj-tk-tight:  -0.012em;
  --muj-tk-normal: 0;
  --muj-tk-wide:   0.05em;
  --muj-tk-xwide:  0.12em;
  --muj-tk-mono:   0.02em;

  /* espace */
  --muj-gap-1:  4px;
  --muj-gap-2:  8px;
  --muj-gap-3:  12px;
  --muj-gap-4:  16px;
  --muj-gap-5:  20px;
  --muj-gap-6:  24px;
  --muj-gap-8:  32px;
  --muj-gap-10: 40px;
  --muj-gap-12: 48px;
  --muj-gap-16: 64px;
  --muj-gap-20: 80px;
  --muj-gap-24: 96px;
  --muj-gap-32: 128px;

  /* containers */
  --muj-max:    1320px;
  --muj-pad-x:  clamp(20px, 5vw, 64px);
  --muj-pad-y:  clamp(96px, 12vw, 144px);

  /* timing */
  --muj-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --muj-ease-in:  cubic-bezier(0.4, 0, 0.7, 0.2);
  --muj-dur-1:    180ms;
  --muj-dur-2:    320ms;
  --muj-dur-3:    600ms;

  /* filet standard, jamais d'ombre, jamais de border-radius */
  --muj-rule:    1px solid var(--muj-line);
  --muj-rule-ink: 1px solid var(--muj-ink);
}


/* -------------------------------------------------------------------------
   2.0 — reset doux
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body.muj-doc {
  margin: 0;
  background: var(--muj-bg);
  color: var(--muj-ink-soft);
  font-family: var(--muj-sans);
  font-size: var(--muj-fs-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: var(--muj-tk-normal);
  text-transform: lowercase;
  font-feature-settings: 'ss01', 'kern', 'liga';

  /* texture de papier muji très subtile */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(107, 149, 181, 0.018) 0, transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(31, 31, 31, 0.012) 0, transparent 42%);
  background-attachment: fixed;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--muj-dur-1) var(--muj-ease),
              border-color var(--muj-dur-1) var(--muj-ease);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(107, 149, 181, 0.18);
  color: var(--muj-ink);
}


/* -------------------------------------------------------------------------
   3.0 — utilitaires monospaces (labels manuel)
   ------------------------------------------------------------------------- */

.muj-mono {
  font-family: var(--muj-mono);
  font-weight: 400;
  letter-spacing: var(--muj-tk-mono);
  text-transform: lowercase;
}

.muj-mono--xs    { font-size: var(--muj-fs-xxs); letter-spacing: var(--muj-tk-xwide); text-transform: uppercase; color: var(--muj-grey); }
.muj-mono--sm    { font-size: var(--muj-fs-sm); }
.muj-mono--label { font-size: var(--muj-fs-xs); color: var(--muj-grey); letter-spacing: var(--muj-tk-wide); text-transform: uppercase; }
.muj-mono--value { font-size: var(--muj-fs-sm); color: var(--muj-ink); }

em {
  font-family: var(--muj-display);
  font-style: normal;
  letter-spacing: var(--muj-tk-tight);
  color: var(--muj-ink);
}


/* -------------------------------------------------------------------------
   4.0 — barre haute (entête manuel)
   ------------------------------------------------------------------------- */

.muj-rule {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--muj-bg);
  border-bottom: var(--muj-rule);
}

.muj-rule__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr auto;
  align-items: center;
  gap: var(--muj-gap-8);
  max-width: var(--muj-max);
  margin: 0 auto;
  padding: 14px var(--muj-pad-x);
}

.muj-rule__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.muj-rule__cell--brand {
  border-left: var(--muj-rule);
  padding-left: var(--muj-gap-4);
  margin-left: -16px;
}

.muj-rule__nav {
  display: flex;
  align-items: center;
  gap: var(--muj-gap-6);
}

.muj-rule__link {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--muj-dur-1) var(--muj-ease),
              border-color var(--muj-dur-1) var(--muj-ease);
}

.muj-rule__link:hover {
  color: var(--muj-ink);
  border-bottom-color: var(--muj-ink);
}

.muj-rule__link--cta {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
  color: var(--muj-bg);
  background: var(--muj-ink);
  padding: 8px 14px;
  border-bottom: none;
  transition: background var(--muj-dur-1) var(--muj-ease),
              transform 60ms var(--muj-ease);
}

.muj-rule__link--cta:hover {
  background: #000;
  border-bottom-color: transparent;
  color: var(--muj-bg);
}

.muj-rule__link--cta:active {
  transform: translateY(1px);
}

.muj-rule__progress {
  height: 1px;
  background: var(--muj-line);
  position: relative;
  overflow: hidden;
}

.muj-rule__progress-bar {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--muj-ink);
  transition: right 80ms linear;
}


/* -------------------------------------------------------------------------
   5.0 — section générique
   ------------------------------------------------------------------------- */

.muj-section {
  position: relative;
  max-width: var(--muj-max);
  margin: 0 auto;
  padding: var(--muj-pad-y) var(--muj-pad-x);
  border-bottom: var(--muj-rule);
}

.muj-section--alt {
  background: var(--muj-bg-alt);
  border-top: var(--muj-rule);
  max-width: none;
  padding-left: var(--muj-pad-x);
  padding-right: var(--muj-pad-x);
}

.muj-section--alt > * {
  max-width: var(--muj-max);
  margin-inline: auto;
}

.muj-section--quote {
  background: var(--muj-bg);
  text-align: left;
}

.muj-section--colophon {
  background: var(--muj-bg-deep);
  max-width: none;
  border-bottom: none;
}

.muj-section--colophon > * {
  max-width: var(--muj-max);
  margin-inline: auto;
}

.muj-section--plate {
  max-width: none;
  padding-left: var(--muj-pad-x);
  padding-right: var(--muj-pad-x);
  background: linear-gradient(180deg, var(--muj-bg) 0%, var(--muj-bg-alt) 100%);
  border-top: var(--muj-rule);
}

.muj-section--plate > * {
  max-width: var(--muj-max);
  margin-inline: auto;
}

.muj-section__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: var(--muj-gap-8);
  align-items: baseline;
  margin-bottom: var(--muj-gap-12);
}

.muj-section__head--center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.muj-section__num {
  grid-row: 1 / span 2;
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  border-top: var(--muj-rule-ink);
  padding-top: 6px;
  text-transform: uppercase;
  letter-spacing: var(--muj-tk-wide);
}

.muj-section__title {
  font-family: var(--muj-display);
  font-size: clamp(32px, 5.5vw, 62px);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.05;
  color: var(--muj-ink);
  text-transform: lowercase;
  max-width: 22ch;
}

.muj-section__head--center .muj-section__title {
  margin-top: var(--muj-gap-3);
}

.muj-section__lede {
  grid-column: 2;
  font-size: var(--muj-fs-md);
  color: var(--muj-grey);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: var(--muj-gap-4);
}

.muj-section__rule {
  height: 1px;
  background: var(--muj-line);
  margin-bottom: var(--muj-gap-12);
}


/* -------------------------------------------------------------------------
   6.0 — cover (chapitre 0.0)
   ------------------------------------------------------------------------- */

.muj-cover {
  position: relative;
  padding: clamp(96px, 14vw, 160px) var(--muj-pad-x) clamp(56px, 8vw, 80px);
  border-bottom: var(--muj-rule);
  background: var(--muj-bg);
  overflow: hidden;
}

.muj-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(31, 31, 31, 0.025) 25%, rgba(31, 31, 31, 0.025) 26%, transparent 27%, transparent 74%, rgba(31, 31, 31, 0.025) 75%, rgba(31, 31, 31, 0.025) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, rgba(31, 31, 31, 0.025) 25%, rgba(31, 31, 31, 0.025) 26%, transparent 27%, transparent 74%, rgba(31, 31, 31, 0.025) 75%, rgba(31, 31, 31, 0.025) 76%, transparent 77%);
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.4;
}

.muj-cover__inner {
  position: relative;
  max-width: var(--muj-max);
  margin: 0 auto;
}

.muj-cover__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.muj-cover__corner--tl { top: -56px; left: 0; }
.muj-cover__corner--tr { top: -56px; right: 0; align-items: flex-end; }

.muj-cross {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.muj-cross::before,
.muj-cross::after {
  content: "";
  position: absolute;
  background: var(--muj-ink);
}

.muj-cross::before { left: 6px; top: 0; bottom: 0; width: 1px; }
.muj-cross::after  { top: 6px; left: 0; right: 0; height: 1px; }

.muj-cross--tl { top: -28px; left: -28px; }
.muj-cross--tr { top: -28px; right: -28px; }
.muj-cross--bl { bottom: -28px; left: -28px; }
.muj-cross--br { bottom: -28px; right: -28px; }

.muj-cover__head {
  margin-bottom: var(--muj-gap-16);
  max-width: 78ch;
}

.muj-cover__chapter {
  display: inline-block;
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-xwide);
  text-transform: uppercase;
  border-top: var(--muj-rule-ink);
  padding-top: 8px;
  margin-bottom: var(--muj-gap-6);
}

.muj-cover__title {
  font-family: var(--muj-display);
  font-size: clamp(48px, 9vw, 128px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.96;
  color: var(--muj-ink);
  text-transform: lowercase;
}

.muj-cover__title em {
  font-family: var(--muj-display);
  font-style: italic;
  color: var(--muj-grey);
  font-feature-settings: 'ss01';
}

.muj-cover__subtitle {
  margin-top: var(--muj-gap-6);
  font-size: var(--muj-fs-md);
  line-height: 1.6;
  color: var(--muj-grey);
  max-width: 56ch;
}

/* spec sheet 4 col */
.muj-cover__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
  margin-bottom: var(--muj-gap-12);
}

.muj-spec {
  padding: var(--muj-gap-6) var(--muj-gap-5);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.muj-spec:last-child { border-right: none; }

.muj-spec__label {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xxs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-xwide);
  text-transform: uppercase;
}

.muj-spec__value {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-md);
  color: var(--muj-ink);
  letter-spacing: 0;
  margin-top: 4px;
}

.muj-spec__sub {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
}

/* barcode décoratif */
.muj-cover__barcode {
  display: flex;
  align-items: center;
  gap: var(--muj-gap-5);
  margin-bottom: var(--muj-gap-12);
  padding: var(--muj-gap-4) 0;
  border-top: var(--muj-rule);
}

.muj-barcode {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 36px;
}

.muj-barcode span {
  display: block;
  background: var(--muj-ink);
  width: 2px;
  height: 100%;
  margin-right: 1px;
}

.muj-barcode span:nth-child(2n)  { width: 1px; }
.muj-barcode span:nth-child(3n)  { width: 3px; }
.muj-barcode span:nth-child(5n)  { height: 78%; align-self: center; }
.muj-barcode span:nth-child(7n)  { width: 4px; }
.muj-barcode span:nth-child(11n) { width: 1px; height: 64%; align-self: center; }
.muj-barcode span:nth-child(13n) { width: 2px; }

/* foot strip */
.muj-cover__foot {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: var(--muj-rule);
  border-bottom: var(--muj-rule);
}

.muj-cover__foot-cell {
  padding: var(--muj-gap-5) var(--muj-gap-4);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 80px;
  justify-content: center;
}

.muj-cover__foot-cell:last-child { border-right: none; }

.muj-cover__foot-cell--cta {
  align-items: flex-start;
  justify-content: center;
  background: var(--muj-bg-alt);
}


/* -------------------------------------------------------------------------
   7.0 — boutons
   ------------------------------------------------------------------------- */

.muj-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
  padding: 12px 18px;
  border: var(--muj-rule-ink);
  background: transparent;
  color: var(--muj-ink);
  transition: background var(--muj-dur-1) var(--muj-ease),
              color var(--muj-dur-1) var(--muj-ease),
              transform 60ms var(--muj-ease);
}

.muj-btn:hover {
  background: var(--muj-ink);
  color: var(--muj-bg);
}

.muj-btn:active {
  transform: translateY(1px);
}

.muj-btn--ghost {
  border-color: var(--muj-ink);
}

.muj-btn--primary {
  background: var(--muj-ink);
  color: var(--muj-bg);
  border-color: var(--muj-ink);
}

.muj-btn--primary:hover {
  background: #000;
}


/* -------------------------------------------------------------------------
   8.0 — section 1.0 description (3 colonnes utilitaires)
   ------------------------------------------------------------------------- */

.muj-desc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule);
}

.muj-desc__col {
  padding: var(--muj-gap-8) var(--muj-gap-6);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-4);
  min-height: 320px;
  position: relative;
}

.muj-desc__col:last-child { border-right: none; }

.muj-desc__num {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-desc__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-xl);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.1;
  color: var(--muj-ink);
  margin-bottom: var(--muj-gap-3);
}

.muj-desc__body {
  font-size: var(--muj-fs-base);
  line-height: 1.6;
  color: var(--muj-ink-soft);
  flex-grow: 1;
}

.muj-desc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--muj-gap-4);
  border-top: var(--muj-rule);
}

.muj-desc__list li {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--muj-gap-2);
  align-items: baseline;
}

.muj-desc__list li .muj-mono {
  color: var(--muj-ink);
}

/* bandeau pictogrammes */
.muj-pictobar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: var(--muj-gap-12);
  border: var(--muj-rule-ink);
}

.muj-pictobar__item {
  padding: var(--muj-gap-5) var(--muj-gap-4);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--muj-gap-3);
  background: var(--muj-bg);
}

.muj-pictobar__item:last-child { border-right: none; }

.muj-pictobar__item img {
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1 / 1;
}

.muj-pictobar__item figcaption {
  text-align: center;
}


/* -------------------------------------------------------------------------
   9.0 — section 2.0 services / table spec-sheet
   ------------------------------------------------------------------------- */

.muj-table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
  font-size: var(--muj-fs-base);
  table-layout: fixed;
}

.muj-table__col-code { width: 12%; }
.muj-table__col-name { width: 22%; }
.muj-table__col-desc { width: 40%; }
.muj-table__col-num  { width: 13%; }

.muj-table thead th {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xxs);
  font-weight: 400;
  letter-spacing: var(--muj-tk-xwide);
  text-transform: uppercase;
  text-align: left;
  color: var(--muj-grey);
  padding: var(--muj-gap-3) var(--muj-gap-4);
  border-bottom: var(--muj-rule);
  vertical-align: bottom;
}

.muj-table thead th .muj-mono--xs {
  display: block;
  color: var(--muj-grey-soft);
  margin-bottom: 4px;
}

.muj-table__th-num { text-align: right; }

.muj-table tbody tr {
  border-bottom: var(--muj-rule);
  transition: background var(--muj-dur-1) var(--muj-ease);
}

.muj-table tbody tr:hover {
  background: var(--muj-bg-alt);
}

.muj-table tbody td {
  padding: var(--muj-gap-5) var(--muj-gap-4);
  vertical-align: top;
  font-size: var(--muj-fs-base);
  line-height: 1.55;
  color: var(--muj-ink-soft);
}

.muj-table__code .muj-mono {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
  letter-spacing: var(--muj-tk-mono);
  text-transform: uppercase;
}

.muj-table__name {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-md);
  letter-spacing: var(--muj-tk-tight);
  color: var(--muj-ink);
}

.muj-table__desc {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  line-height: 1.5;
}

.muj-table__num {
  text-align: right;
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-md);
  color: var(--muj-ink);
}

.muj-table__num .muj-mono {
  font-size: var(--muj-fs-md);
  letter-spacing: 0;
}

.muj-table__risk { text-align: right; }

.muj-table tfoot td {
  border-top: var(--muj-rule);
  padding: var(--muj-gap-4);
  background: var(--muj-bg-alt);
}

.muj-table__footnote {
  display: flex;
  gap: var(--muj-gap-3);
  align-items: baseline;
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  line-height: 1.6;
}

.muj-table__footnote a {
  color: var(--muj-ink);
  border-bottom: 1px solid var(--muj-line);
}

.muj-table__footnote a:hover {
  border-bottom-color: var(--muj-ink);
}

/* tag risque */
.muj-tag {
  display: inline-block;
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xxs);
  letter-spacing: var(--muj-tk-xwide);
  text-transform: uppercase;
  padding: 4px 10px;
  border: var(--muj-rule);
}

.muj-tag--low  { color: var(--muj-low-ink);  background: var(--muj-low-bg);  border-color: var(--muj-low-ink); }
.muj-tag--mid  { color: var(--muj-mid-ink);  background: var(--muj-mid-bg);  border-color: var(--muj-mid-ink); }
.muj-tag--high { color: var(--muj-high-ink); background: var(--muj-high-bg); border-color: var(--muj-high-ink); }


/* -------------------------------------------------------------------------
   10.0 — section 3.0 contenu / projets exploded
   ------------------------------------------------------------------------- */

.muj-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-project {
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-5);
  padding: var(--muj-gap-8) var(--muj-gap-6);
  border-right: var(--muj-rule);
  position: relative;
}

.muj-project:last-child { border-right: none; }

.muj-project__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--muj-rule);
  padding-bottom: var(--muj-gap-3);
}

.muj-project__id {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-project__country {
  color: var(--muj-grey);
}

.muj-project__diagram {
  background: var(--muj-bg);
  padding: var(--muj-gap-4) 0;
}

.muj-project__svg { width: 100%; height: auto; }

.muj-project__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-lg);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.2;
  color: var(--muj-ink);
}

.muj-project__body {
  font-size: var(--muj-fs-sm);
  line-height: 1.6;
  color: var(--muj-grey);
}

.muj-project__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--muj-rule);
  border-bottom: var(--muj-rule);
}

.muj-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--muj-gap-3);
  padding: 10px 0;
  border-bottom: var(--muj-rule);
}

.muj-project__specs .muj-kv {
  padding: 10px var(--muj-gap-3);
  border-bottom: var(--muj-rule);
  border-right: var(--muj-rule);
}

.muj-project__specs .muj-kv:nth-child(2n)        { border-right: none; }
.muj-project__specs .muj-kv:nth-last-child(-n+2) { border-bottom: none; }

.muj-kv__k {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xxs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-kv__v {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
}

.muj-kv__u {
  display: inline-block;
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xxs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
  margin-left: 4px;
}

.muj-project__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: var(--muj-rule-ink);
  color: var(--muj-ink);
  align-self: flex-start;
  transition: gap var(--muj-dur-1) var(--muj-ease);
}

.muj-project__cta:hover {
  gap: 14px;
}


/* -------------------------------------------------------------------------
   11.0 — section 4.0 instructions / steps muji
   ------------------------------------------------------------------------- */

.muj-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-step {
  padding: var(--muj-gap-8) var(--muj-gap-5);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-3);
  background: var(--muj-bg);
  position: relative;
}

.muj-step:last-child { border-right: none; }

.muj-step__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--muj-rule);
  padding-bottom: 6px;
}

.muj-step__num {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-step__time {
  color: var(--muj-grey);
}

.muj-step__pic {
  width: 100%;
  max-width: 140px;
  margin: var(--muj-gap-4) auto;
}

.muj-step__pic img {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.muj-step__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-xl);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.1;
  color: var(--muj-ink);
}

.muj-step__body {
  font-size: var(--muj-fs-sm);
  line-height: 1.6;
  color: var(--muj-grey);
}

/* avis style manuel */
.muj-warning {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--muj-gap-5);
  align-items: baseline;
  margin-top: var(--muj-gap-8);
  padding: var(--muj-gap-5) var(--muj-gap-6);
  background: var(--muj-warn-bg);
  border-left: 3px solid var(--muj-warn-ink);
}

.muj-warning__label {
  color: var(--muj-warn-ink);
}

.muj-warning__body {
  font-size: var(--muj-fs-sm);
  color: var(--muj-warn-ink);
  line-height: 1.6;
}


/* -------------------------------------------------------------------------
   12.0 — planche pleine largeur (exploded view)
   ------------------------------------------------------------------------- */

.muj-plate {
  margin: var(--muj-gap-12) 0 0;
  padding: var(--muj-gap-8);
  background: var(--muj-bg);
  border: var(--muj-rule-ink);
}

.muj-plate--secondary {
  margin-top: var(--muj-gap-12);
  background: var(--muj-bg-alt);
}

.muj-plate img {
  width: 100%;
  height: auto;
}

.muj-plate__cap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--muj-gap-3);
  padding-top: var(--muj-gap-4);
  margin-top: var(--muj-gap-4);
  border-top: var(--muj-rule);
}

.muj-plate__cap span:nth-child(2) { text-align: center; }
.muj-plate__cap span:nth-child(3) { text-align: right; }


/* -------------------------------------------------------------------------
   13.0 — section 5.0 mesures
   ------------------------------------------------------------------------- */

.muj-measures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-measure {
  padding: var(--muj-gap-8) var(--muj-gap-5);
  border-right: var(--muj-rule);
  border-bottom: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-2);
  min-height: 220px;
  justify-content: space-between;
  background: var(--muj-bg);
  position: relative;
}

.muj-measure:nth-child(4n)        { border-right: none; }
.muj-measure:nth-last-child(-n+4) { border-bottom: none; }

.muj-measure::before {
  content: "";
  position: absolute;
  top: var(--muj-gap-4);
  right: var(--muj-gap-4);
  width: 8px;
  height: 8px;
  border: 1px solid var(--muj-grey-soft);
}

.muj-measure__head {
  border-bottom: var(--muj-rule);
  padding-bottom: 8px;
}

.muj-measure__num {
  font-family: var(--muj-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 0.95;
  color: var(--muj-ink);
}

.muj-measure__num .muj-mono {
  font-family: var(--muj-mono);
  font-weight: 400;
  letter-spacing: 0;
}

.muj-measure__unit {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-sm);
  color: var(--muj-sky-deep);
  letter-spacing: var(--muj-tk-mono);
  text-transform: uppercase;
}

.muj-measure__note {
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
  border-top: var(--muj-rule);
  padding-top: 8px;
  line-height: 1.5;
}

.muj-measures__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--muj-gap-4);
  padding: var(--muj-gap-4) 0;
  border-bottom: var(--muj-rule);
  margin-top: -1px;
}


/* -------------------------------------------------------------------------
   14.0 — section 6.0 garantie / pull-quote
   ------------------------------------------------------------------------- */

.muj-quote {
  position: relative;
  max-width: 920px;
  margin: var(--muj-gap-12) auto 0;
  padding: var(--muj-gap-12) var(--muj-gap-10);
  background: var(--muj-bg);
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
  text-align: left;
}

.muj-quote__mark {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
}

.muj-quote__body {
  font-family: var(--muj-mono);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: var(--muj-tk-mono);
  color: var(--muj-ink);
  text-transform: lowercase;
  max-width: 28ch;
  margin: 0 auto;
  text-align: left;
}

.muj-quote__cite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--muj-gap-8);
  padding-top: var(--muj-gap-4);
  border-top: var(--muj-rule);
}

.muj-quote__name {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-lg);
  letter-spacing: var(--muj-tk-tight);
  color: var(--muj-ink);
}

.muj-quote__role { color: var(--muj-grey); }

.muj-quote__cartouche {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}


/* -------------------------------------------------------------------------
   15.0 — section 7.0 voix
   ------------------------------------------------------------------------- */

.muj-voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-voice {
  padding: var(--muj-gap-8) var(--muj-gap-6);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-5);
  background: var(--muj-bg);
}

.muj-voice:last-child { border-right: none; }

.muj-voice__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--muj-rule);
  padding-bottom: var(--muj-gap-3);
}

.muj-voice__id {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-voice__score { color: var(--muj-sky-deep); }

.muj-voice__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--muj-rule);
  border-bottom: var(--muj-rule);
}

.muj-voice__meta .muj-kv {
  padding: 8px var(--muj-gap-3);
  border-right: var(--muj-rule);
  border-bottom: var(--muj-rule);
}

.muj-voice__meta .muj-kv:nth-child(2n)        { border-right: none; }
.muj-voice__meta .muj-kv:nth-last-child(-n+2) { border-bottom: none; }

.muj-voice__quote {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-md);
  font-style: italic;
  line-height: 1.55;
  color: var(--muj-ink);
}


/* -------------------------------------------------------------------------
   16.0 — section 8.0 fabricant
   ------------------------------------------------------------------------- */

.muj-maker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-maker__col {
  padding: var(--muj-gap-8) var(--muj-gap-6);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-3);
  background: var(--muj-bg);
}

.muj-maker__col:last-child { border-right: none; }

.muj-maker__num {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-maker__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-xl);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.1;
  color: var(--muj-ink);
}

.muj-maker__body {
  font-size: var(--muj-fs-base);
  line-height: 1.6;
  color: var(--muj-ink-soft);
}


/* -------------------------------------------------------------------------
   17.0 — section 9.0 formulaire
   ------------------------------------------------------------------------- */

.muj-form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-form__aside {
  padding: var(--muj-gap-8);
  border-right: var(--muj-rule);
  background: var(--muj-bg-alt);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-6);
}

.muj-form__aside-title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-lg);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.2;
  color: var(--muj-ink);
  border-bottom: var(--muj-rule);
  padding-bottom: var(--muj-gap-3);
}

.muj-form__contact .muj-kv {
  padding: 8px 0;
  border-bottom: var(--muj-rule);
}

.muj-form__aside-note {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  line-height: 1.55;
  padding-top: var(--muj-gap-3);
  border-top: var(--muj-rule);
}

.muj-form__aside-fig {
  margin-top: auto;
  padding-top: var(--muj-gap-5);
  border-top: var(--muj-rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.muj-form__aside-fig img {
  width: 80px;
  aspect-ratio: 1 / 1;
}

.muj-form__fields {
  padding: var(--muj-gap-8);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-6);
  background: var(--muj-bg);
}

.muj-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.muj-field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--muj-gap-5);
}

.muj-field__sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.muj-field label {
  display: flex;
  align-items: baseline;
  gap: var(--muj-gap-3);
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
}

.muj-field label .muj-mono--xs {
  color: var(--muj-grey);
}

.muj-field input[type="text"],
.muj-field input[type="email"],
.muj-field select,
.muj-field textarea {
  width: 100%;
  font-family: var(--muj-sans);
  font-size: var(--muj-fs-base);
  padding: 10px 0;
  background: transparent;
  color: var(--muj-ink);
  border: none;
  border-bottom: 1px solid var(--muj-sky);
  text-transform: lowercase;
  transition: border-color var(--muj-dur-1) var(--muj-ease);
}

.muj-field textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}

.muj-field input::placeholder,
.muj-field textarea::placeholder {
  color: var(--muj-grey-soft);
  text-transform: lowercase;
}

.muj-field input:focus,
.muj-field select:focus,
.muj-field textarea:focus {
  border-bottom-color: var(--muj-ink);
}

.muj-field--check {
  flex-direction: row;
  gap: var(--muj-gap-3);
  align-items: flex-start;
  border-top: var(--muj-rule);
  padding-top: var(--muj-gap-5);
}

.muj-field--check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--muj-ink);
  background: var(--muj-bg);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--muj-dur-1) var(--muj-ease);
  position: relative;
}

.muj-field--check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--muj-ink);
}

.muj-field--check label {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  line-height: 1.5;
}

.muj-field--actions {
  flex-direction: row;
  align-items: center;
  gap: var(--muj-gap-5);
  border-top: var(--muj-rule);
  padding-top: var(--muj-gap-5);
}

.muj-form__hint { color: var(--muj-grey); }

.muj-form__status {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-xs);
  color: var(--muj-sky-deep);
  letter-spacing: var(--muj-tk-mono);
  min-height: 18px;
}

.muj-form__status[data-state="ok"] { color: var(--muj-low-ink); }
.muj-form__status[data-state="err"] { color: var(--muj-high-ink); }


/* -------------------------------------------------------------------------
   18.0 — section 10.0 colophon
   ------------------------------------------------------------------------- */

.muj-versions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-version {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--muj-gap-6);
  padding: var(--muj-gap-5) 0;
  border-bottom: var(--muj-rule);
  align-items: baseline;
}

.muj-version:last-child { border-bottom: none; }

.muj-version__num {
  font-family: var(--muj-mono);
  font-size: var(--muj-fs-md);
  color: var(--muj-grey);
  letter-spacing: 0;
}

.muj-version--current .muj-version__num {
  color: var(--muj-ink);
  font-size: var(--muj-fs-lg);
}

.muj-version__body {
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-2);
}

.muj-version__date {
  font-size: var(--muj-fs-xs);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-version__txt {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink-soft);
  line-height: 1.6;
  max-width: 72ch;
}

.muj-version--current .muj-version__txt {
  color: var(--muj-ink);
}

/* crédits */
.muj-credits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--muj-gap-12);
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-credits .muj-kv {
  padding: var(--muj-gap-4);
  border-right: var(--muj-rule);
  border-bottom: var(--muj-rule);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

.muj-credits .muj-kv:nth-child(4n)        { border-right: none; }
.muj-credits .muj-kv:nth-last-child(-n+4) { border-bottom: none; }

.muj-credits .muj-kv__k {
  font-size: var(--muj-fs-xxs);
  letter-spacing: var(--muj-tk-xwide);
}

.muj-credits .muj-kv__v {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
}


/* -------------------------------------------------------------------------
   19.0 — pied de manuel
   ------------------------------------------------------------------------- */

.muj-foot {
  background: var(--muj-ink);
  color: var(--muj-bg);
  padding: var(--muj-gap-16) var(--muj-pad-x) var(--muj-gap-8);
}

.muj-foot__inner {
  max-width: var(--muj-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--muj-gap-12);
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
  padding-bottom: var(--muj-gap-12);
}

.muj-foot__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.muj-foot__col a {
  font-size: var(--muj-fs-sm);
  color: rgba(250, 250, 250, 0.6);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--muj-dur-1) var(--muj-ease),
              border-color var(--muj-dur-1) var(--muj-ease);
}

.muj-foot__col a:hover {
  color: var(--muj-bg);
  border-bottom-color: var(--muj-bg);
}

.muj-foot__head {
  font-size: var(--muj-fs-xxs);
  color: rgba(250, 250, 250, 0.4);
  letter-spacing: var(--muj-tk-xwide);
  text-transform: uppercase;
  margin-bottom: var(--muj-gap-3);
}

.muj-foot__col--mark {
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-3);
}

.muj-foot__col--mark .muj-mono--xs {
  color: rgba(250, 250, 250, 0.4);
}

.muj-foot__brand {
  font-family: var(--muj-display);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 0.95;
  color: var(--muj-bg);
  text-transform: lowercase;
}

.muj-foot__tag {
  color: rgba(250, 250, 250, 0.55);
  max-width: 36ch;
}

.muj-foot__base {
  max-width: var(--muj-max);
  margin: var(--muj-gap-6) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--muj-gap-4);
}

.muj-foot__base .muj-mono--xs {
  color: rgba(250, 250, 250, 0.4);
}


/* -------------------------------------------------------------------------
   20.0 — animations utilitaires
   tout est subtil (1px slide), une seule courbe
   ------------------------------------------------------------------------- */

[data-mu-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms var(--muj-ease),
    transform 700ms var(--muj-ease);
  will-change: opacity, transform;
}

[data-mu-reveal].is-mu-in {
  opacity: 1;
  transform: translateY(0);
}

[data-mu-row] {
  opacity: 0;
  transform: translateX(-2px);
  transition:
    opacity 600ms var(--muj-ease),
    transform 600ms var(--muj-ease);
}

[data-mu-row].is-mu-in {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-mu-reveal],
  [data-mu-row] {
    opacity: 1;
    transform: none;
  }
}


/* -------------------------------------------------------------------------
   21.0 — responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .muj-section__head {
    grid-template-columns: 60px 1fr;
    column-gap: var(--muj-gap-5);
  }
  .muj-cover__foot     { grid-template-columns: repeat(3, 1fr); }
  .muj-cover__specs    { grid-template-columns: repeat(2, 1fr); }
  .muj-spec:nth-child(2) { border-right: none; }
  .muj-spec:nth-child(odd) { border-right: var(--muj-rule); }
  .muj-spec:nth-child(even){ border-right: none; }
  .muj-spec:nth-child(-n+2){ border-bottom: var(--muj-rule); }

  .muj-pictobar  { grid-template-columns: repeat(3, 1fr); }
  .muj-pictobar__item:nth-child(3n) { border-right: none; }
  .muj-pictobar__item:nth-child(-n+3) { border-bottom: var(--muj-rule); }

  .muj-desc      { grid-template-columns: 1fr 1fr; }
  .muj-desc__col:nth-child(2n) { border-right: none; }
  .muj-desc__col:nth-child(-n+2) { border-bottom: var(--muj-rule); }
  .muj-desc__col:last-child { grid-column: 1 / -1; border-right: none; }

  .muj-projects  { grid-template-columns: 1fr 1fr; }
  .muj-project:nth-child(2n) { border-right: none; }
  .muj-project:last-child { grid-column: 1 / -1; border-right: none; border-top: var(--muj-rule); }

  .muj-steps     { grid-template-columns: 1fr 1fr; }
  .muj-step:nth-child(2n) { border-right: none; }
  .muj-step:nth-child(-n+2) { border-bottom: var(--muj-rule); }

  .muj-measures  { grid-template-columns: 1fr 1fr; }
  .muj-measure:nth-child(2n)        { border-right: none; }
  .muj-measure:nth-last-child(-n+2) { border-bottom: var(--muj-rule); }
  .muj-measure:nth-last-child(-n+4):not(:nth-last-child(-n+2)) { border-bottom: var(--muj-rule); }

  .muj-voices    { grid-template-columns: 1fr 1fr; }
  .muj-voice:nth-child(2n) { border-right: none; }
  .muj-voice:last-child { grid-column: 1 / -1; border-right: none; border-top: var(--muj-rule); }

  .muj-maker     { grid-template-columns: 1fr 1fr; }
  .muj-maker__col:nth-child(2n) { border-right: none; }
  .muj-maker__col:last-child { grid-column: 1 / -1; border-right: none; border-top: var(--muj-rule); }

  .muj-foot__inner { grid-template-columns: 1fr 1fr; gap: var(--muj-gap-8); }

  .muj-credits { grid-template-columns: 1fr 1fr; }
  .muj-credits .muj-kv:nth-child(2n) { border-right: none; }

  .muj-rule__inner { grid-template-columns: 1fr auto; gap: var(--muj-gap-4); }
  .muj-rule__cell:not(.muj-rule__cell--brand) { display: none; }
}

@media (max-width: 720px) {
  :root {
    --muj-pad-y: 80px;
    --muj-pad-x: 18px;
  }

  .muj-cover__title    { font-size: clamp(40px, 12vw, 84px); }
  .muj-section__title  { font-size: clamp(28px, 8vw, 44px); }

  .muj-rule__inner { padding: 12px 18px; }
  .muj-rule__nav   { gap: var(--muj-gap-3); }
  .muj-rule__link:not(.muj-rule__link--cta) { display: none; }

  .muj-section__head { grid-template-columns: 1fr; row-gap: var(--muj-gap-3); }
  .muj-section__num  { grid-row: auto; }
  .muj-section__lede { grid-column: 1; }

  .muj-cover__corner--tl,
  .muj-cover__corner--tr { display: none; }
  .muj-cross { display: none; }

  .muj-cover__specs    { grid-template-columns: 1fr; }
  .muj-spec            { border-right: none; border-bottom: var(--muj-rule); }
  .muj-spec:last-child { border-bottom: none; }

  .muj-cover__foot     { grid-template-columns: 1fr 1fr; }
  .muj-cover__foot-cell:nth-child(2n) { border-right: none; }
  .muj-cover__foot-cell:not(:last-child):not(:nth-last-child(2)) { border-bottom: var(--muj-rule); }

  .muj-pictobar  { grid-template-columns: 1fr 1fr; }
  .muj-pictobar__item:nth-child(2n) { border-right: none; }
  .muj-pictobar__item:not(:last-child):not(:nth-last-child(2)) { border-bottom: var(--muj-rule); }

  .muj-desc      { grid-template-columns: 1fr; }
  .muj-desc__col { border-right: none; border-bottom: var(--muj-rule); }
  .muj-desc__col:last-child { border-bottom: none; }

  .muj-projects  { grid-template-columns: 1fr; }
  .muj-project   { border-right: none; border-bottom: var(--muj-rule); }
  .muj-project:last-child { border-bottom: none; border-top: none; }

  .muj-steps     { grid-template-columns: 1fr; }
  .muj-step      { border-right: none; border-bottom: var(--muj-rule); }
  .muj-step:last-child { border-bottom: none; }

  .muj-warning   { grid-template-columns: 1fr; row-gap: var(--muj-gap-2); }

  .muj-measures  { grid-template-columns: 1fr 1fr; }
  .muj-measure   { min-height: 180px; }

  .muj-voices    { grid-template-columns: 1fr; }
  .muj-voice     { border-right: none; border-bottom: var(--muj-rule); }
  .muj-voice:last-child { border-bottom: none; border-top: none; }

  .muj-maker     { grid-template-columns: 1fr; }
  .muj-maker__col{ border-right: none; border-bottom: var(--muj-rule); }
  .muj-maker__col:last-child { border-bottom: none; border-top: none; }

  .muj-form      { grid-template-columns: 1fr; }
  .muj-form__aside { border-right: none; border-bottom: var(--muj-rule); }
  .muj-field--row { grid-template-columns: 1fr; }

  .muj-foot__inner { grid-template-columns: 1fr; }
  .muj-foot__base  { flex-direction: column; align-items: flex-start; }

  .muj-credits   { grid-template-columns: 1fr; }
  .muj-credits .muj-kv { border-right: none; }

  .muj-table {
    display: block;
    overflow-x: auto;
  }

  .muj-quote { padding: var(--muj-gap-10) var(--muj-gap-5); }
  .muj-quote__cartouche {
    position: static;
    text-align: left;
    margin-top: var(--muj-gap-5);
    padding-top: var(--muj-gap-3);
    border-top: var(--muj-rule);
  }
}


/* -------------------------------------------------------------------------
   22.0 — états utilitaires (focus visible, scroll, print)
   ------------------------------------------------------------------------- */

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

a:focus-visible,
button:focus-visible {
  outline-offset: 4px;
}

@media print {
  .muj-rule,
  .muj-foot { display: none; }
  body.muj-doc { background: #fff; }
  .muj-section { break-inside: avoid; }
}


/* -------------------------------------------------------------------------
   23.0 — micro-rythmes
   ------------------------------------------------------------------------- */

[data-mu-reveal][data-mu-delay="1"] { transition-delay: 80ms; }
[data-mu-reveal][data-mu-delay="2"] { transition-delay: 160ms; }
[data-mu-reveal][data-mu-delay="3"] { transition-delay: 240ms; }
[data-mu-reveal][data-mu-delay="4"] { transition-delay: 320ms; }
[data-mu-reveal][data-mu-delay="5"] { transition-delay: 400ms; }


/* -------------------------------------------------------------------------
   24.0 — couleur du caret (input)
   ------------------------------------------------------------------------- */

.muj-field input,
.muj-field textarea {
  caret-color: var(--muj-sky-deep);
}


/* -------------------------------------------------------------------------
   25.0 — sélecteur custom propre (sans flèche os)
   ------------------------------------------------------------------------- */

.muj-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muj-grey) 50%),
                    linear-gradient(135deg, var(--muj-grey) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.muj-field select:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--muj-ink) 50%),
                    linear-gradient(135deg, var(--muj-ink) 50%, transparent 50%);
}


/* -------------------------------------------------------------------------
   26.0 — page utilities
   ------------------------------------------------------------------------- */

.muj-doc {
  scroll-padding-top: 80px;
}

/* -------------------------------------------------------------------------
   27.0 — annexe a / glossaire
   ------------------------------------------------------------------------- */

.muj-glossary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-glossary__row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--muj-gap-8);
  padding: var(--muj-gap-5) 0;
  border-bottom: var(--muj-rule);
  align-items: baseline;
}

.muj-glossary__row:last-child { border-bottom: none; }

.muj-glossary__term {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.muj-glossary__word {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-md);
  letter-spacing: var(--muj-tk-tight);
  color: var(--muj-ink);
}

.muj-glossary__def {
  font-size: var(--muj-fs-sm);
  line-height: 1.6;
  color: var(--muj-ink-soft);
  max-width: 70ch;
}


/* -------------------------------------------------------------------------
   28.0 — annexe c / checklist
   ------------------------------------------------------------------------- */

.muj-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-check {
  padding: var(--muj-gap-6) var(--muj-gap-5);
  border-right: var(--muj-rule);
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-3);
  background: var(--muj-bg);
  position: relative;
}

.muj-check:last-child { border-right: none; }

.muj-check::before {
  content: "";
  position: absolute;
  top: var(--muj-gap-5);
  right: var(--muj-gap-5);
  width: 14px;
  height: 14px;
  border: 1px solid var(--muj-ink);
}

.muj-check__id {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-wide);
  text-transform: uppercase;
}

.muj-check__body {
  display: flex;
  flex-direction: column;
  gap: var(--muj-gap-2);
}

.muj-check__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-md);
  font-weight: 400;
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.2;
  color: var(--muj-ink);
}

.muj-check__desc {
  font-size: var(--muj-fs-sm);
  line-height: 1.55;
  color: var(--muj-ink-soft);
}

.muj-check__fmt {
  margin-top: auto;
  padding-top: var(--muj-gap-3);
  border-top: var(--muj-rule);
  color: var(--muj-grey);
}

@media (max-width: 1100px) {
  .muj-checklist { grid-template-columns: 1fr 1fr; }
  .muj-check:nth-child(2n)        { border-right: none; }
  .muj-check:nth-last-child(-n+2) { border-bottom: none; }
  .muj-check:nth-child(-n+2)      { border-bottom: var(--muj-rule); }

  .muj-glossary__row { grid-template-columns: 1fr; gap: var(--muj-gap-3); }
}

@media (max-width: 720px) {
  .muj-checklist { grid-template-columns: 1fr; }
  .muj-check     { border-right: none; border-bottom: var(--muj-rule); }
  .muj-check:last-child { border-bottom: none; }
}


/* -------------------------------------------------------------------------
   29.0 — focus état clavier raffiné
   ------------------------------------------------------------------------- */

body.mu-kbd a:focus-visible,
body.mu-kbd button:focus-visible {
  outline: 2px solid var(--muj-sky);
  outline-offset: 4px;
}


/* -------------------------------------------------------------------------
   29.4 — bloc consignes de lecture (1.4)
   ------------------------------------------------------------------------- */

.muj-reading {
  margin-top: var(--muj-gap-12);
  padding: var(--muj-gap-6) var(--muj-gap-8);
  background: var(--muj-bg-alt);
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-reading__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--muj-rule);
  padding-bottom: var(--muj-gap-3);
  margin-bottom: var(--muj-gap-4);
}

.muj-reading__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--muj-gap-4) var(--muj-gap-8);
}

.muj-reading__line {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--muj-gap-3);
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink-soft);
  line-height: 1.55;
}

.muj-reading__line a {
  color: var(--muj-ink);
  border-bottom: 1px solid var(--muj-line);
}

.muj-reading__line a:hover { border-bottom-color: var(--muj-ink); }

.muj-reading__step { color: var(--muj-ink); }

@media (max-width: 720px) {
  .muj-reading__body { grid-template-columns: 1fr; }
  .muj-reading       { padding: var(--muj-gap-5); }
}


/* -------------------------------------------------------------------------
   29.5 — table des matières (section 11.0)
   ------------------------------------------------------------------------- */

.muj-toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: var(--muj-rule-ink);
  border-bottom: var(--muj-rule-ink);
}

.muj-toc__row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: baseline;
  gap: var(--muj-gap-4);
  padding: 12px var(--muj-gap-3);
  border-bottom: var(--muj-rule);
  transition: background var(--muj-dur-1) var(--muj-ease);
}

.muj-toc__row:last-child  { border-bottom: none; }

.muj-toc__row:hover { background: var(--muj-bg); }

.muj-toc__row--annex { background: rgba(107, 149, 181, 0.04); }

.muj-toc__num {
  font-size: var(--muj-fs-sm);
  color: var(--muj-grey);
  letter-spacing: var(--muj-tk-mono);
  text-transform: uppercase;
}

.muj-toc__title {
  font-family: var(--muj-display);
  font-size: var(--muj-fs-md);
  letter-spacing: var(--muj-tk-tight);
  line-height: 1.2;
  color: var(--muj-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--muj-dur-1) var(--muj-ease);
}

.muj-toc__title:hover { border-bottom-color: var(--muj-ink); }

.muj-toc__dots {
  flex: 1;
  border-bottom: 1px dotted var(--muj-grey-soft);
  margin-bottom: 6px;
  min-width: 32px;
}

.muj-toc__page {
  font-size: var(--muj-fs-sm);
  color: var(--muj-ink);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .muj-toc__row { grid-template-columns: 48px 1fr auto; }
  .muj-toc__dots { display: none; }
}


/* -------------------------------------------------------------------------
   30.0 — micro-animation barcode (très lente, opt-in)
   ------------------------------------------------------------------------- */

@keyframes muj-barcode-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: 0.78; }
  94%           { opacity: 1; }
  96%           { opacity: 0.92; }
}

.muj-barcode.is-mu-live span:nth-child(7n) {
  animation: muj-barcode-flicker 9s linear infinite;
}

.muj-barcode.is-mu-live span:nth-child(11n) {
  animation: muj-barcode-flicker 13s linear infinite;
  animation-delay: 2s;
}


/* fin de feuille */