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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.js-reveler [data-reveler] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-reveler [data-reveler][data-revele] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveler [data-reveler] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: var(--lh-tight); letter-spacing: -0.028em; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
dl, dd { margin: 0; }
figure { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--prim);
  color: var(--on-prim);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, filter 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn--primary{position:relative;isolation:isolate;overflow:hidden;color:var(--on-prim);background:linear-gradient(180deg,#fff 0%,#f3efe8 55%,#e2dcd2 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,9,.16),0 0 0 1px rgba(255,255,255,.12),0 2px 5px -1px rgba(0,0,0,.6),0 8px 22px -12px rgba(255,193,69,.4);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,color .2s}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,206,120,.55) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.btn--primary:hover{color:var(--on-prim);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,9,.16),0 0 0 1px rgba(255,193,69,.45),0 4px 10px -2px rgba(0,0,0,.6),0 14px 30px -10px rgba(255,193,69,.6)}
.btn--primary:hover::before{transform:translateX(110%)}
.btn--primary:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(10,10,9,.25),0 0 0 1px rgba(255,193,69,.35),0 1px 3px rgba(0,0,0,.5)}
.btn--primary .ic{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn--primary:hover .btn__suite{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn--primary,.btn--primary::before,.btn--primary .ic{transition:none}.btn--primary:hover,.btn--primary:hover .btn__suite{transform:none}.btn--primary::before{display:none}}
.btn--secondary { background: var(--bg-3); color: var(--fg-1); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-4); }
.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { background: var(--bg-2); color: var(--fg-1); }
.btn--sm { height: 38px; padding: 0 15px; }

.btn[hidden] { display: none; }

.btn--lg { height: 52px; padding: 0 var(--sp-8); font-size: var(--text-base); }

.btn--dark { background: var(--on-paper); color: var(--paper); }

.btn--dark:hover { background: var(--bg-4); }
.btn--line { background: transparent; color: var(--on-paper); border-color: var(--paper-line-2); }
.btn--line:hover { background: rgba(10, 10, 9, 0.06); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  flex-wrap: wrap;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
  flex: none;
}

.nav__mark {
  width: 22px;
  height: 22px;
  flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%23F3F1ED'%3E%3Crect x='0' y='13' width='3' height='9' rx='1'/%3E%3Crect x='4.75' y='9' width='3' height='13' rx='1'/%3E%3Crect x='14.25' y='7' width='3' height='15' rx='1'/%3E%3Crect x='19' y='12' width='3' height='10' rx='1'/%3E%3C/g%3E%3Crect x='9.5' y='1' width='3' height='21' rx='1' fill='%23FF6A3D'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.nav__links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav__link {
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--text-sm);
  
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.nav__link:hover { background: var(--bg-2); color: var(--fg-1); }

.nav > .langue { margin-left: auto; }
.nav__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  
  min-height: clamp(520px, 84svh, 880px);
  padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 56px);
}

.hero__inner { width: 100%; }
.hero__eyebrow { margin-bottom: clamp(20px, 3vw, 36px); }

.display {
  font-family: var(--font-display);
  font-weight: 400;              
  text-transform: uppercase;
  
  line-height: 0.96;
  
  letter-spacing: 0.004em;
  text-wrap: balance;
}

.hero__titre { font-size: clamp(33px, 8.3vw, 120px); line-height: 1.0; }
.hero__l1, .hero__l2 { display: block; }

.hero__l2 { margin-left: clamp(0px, 4.2vw, 60px); }

.hero__pied {
  margin-top: clamp(32px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.hero__lede { font-size: var(--text-lg); color: var(--fg-2); max-width: 52ch; }
.hero__lede strong { color: var(--fg-1); font-weight: 600; }
.hero__act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.hero__fine { font-size: var(--text-xs); color: var(--fg-3); max-width: 40ch; }

.hero__discord {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 120ms ease;
}
.hero__discord:hover,
.hero__discord:focus-visible { color: var(--fg-1); }
.hero__discord svg { flex: none; }

.bloc { padding-block: clamp(56px, 7vw, 104px); }
.bloc--relief {
  background: var(--bg-1);
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.bloc__tete { max-width: 62ch; }
.bloc__tete--centre { margin-inline: auto; text-align: center; }
.bloc__h2 {
  margin-top: var(--sp-3);
  font-size: clamp(27px, 3.8vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.bloc__h2--moyen { font-size: clamp(24px, 3vw, 33px); }
.bloc__sub { margin-top: var(--sp-4); font-size: var(--text-base); color: var(--fg-2); max-width: 60ch; }
.bloc__tete--centre .bloc__sub { margin-inline: auto; }
.bloc__sub strong { color: var(--fg-1); font-weight: 600; }

.coupure { padding-block: clamp(80px, 12vw, 176px); text-align: center; }
.coupure__mot {
  font-size: clamp(29px, 5.4vw, 62px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
.coupure__sub {
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 58ch;
  font-size: var(--text-lg);
  color: var(--fg-2);
}

.parcours { margin-top: clamp(32px, 4vw, 56px); padding: 0; position: relative; list-style: none; display: grid; gap: clamp(28px, 3.5vw, 44px); }
.parcours::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--line-1);
}
.etape { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.etape__n {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  
  background: var(--bg-1);
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.parcours--mots::before { display: none; }
.parcours--mots .etape { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.parcours--mots .etape__n {
  width: auto;
  height: auto;
  padding: 7px 14px;
  border-radius: 999px;
  
  white-space: nowrap;
}
.etape__t { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.etape__d { margin-top: var(--sp-3); font-size: var(--text-base); color: var(--fg-2); max-width: 64ch; }

.montre {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.montre--inverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.montre--inverse .montre__dire { order: 2; }
.montre--inverse .montre__voir { order: 1; }
.montre .mockup { margin-top: 0; }
.montre__voir { min-width: 0; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.lien-fleche::after { content: "\2192"; }
.lien-fleche:hover { color: var(--fg-1); }

.atelier { overflow: hidden; }

.atelier__grid {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto clamp(170px, 19vw, 240px);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
}
.atelier__fleche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.atelier__fleche::before {
  content: "";
  width: 34px;
  height: 9px;
  flex: none;
  background: currentColor;
  
  clip-path: polygon(0 35%, 62% 35%, 62% 0, 100% 50%, 62% 100%, 62% 65%, 0 65%);
}
.atelier__lot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.atelier__legende {
  font-size: var(--text-xs);
  color: var(--fg-2);
  line-height: var(--lh-snug);
}
.atelier__legende b { color: var(--fg-1); font-weight: 600; }

.scene {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  
  background:
    radial-gradient(90% 120% at 72% 38%, var(--bg-4) 0%, transparent 62%),
    linear-gradient(168deg, var(--bg-3) 0%, var(--bg-2) 58%, var(--bg-1) 100%);
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to top, rgba(10, 10, 9, 0.45), transparent);
}

.perso {
  position: absolute;
  bottom: 0;
  left: var(--x, 50%);
  transform: translateX(-50%);
  width: var(--w, 22%);
  height: var(--h, 62%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.perso__tete {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-0);
  opacity: 0.8;
}
.perso__buste {
  margin-top: 6%;
  width: 100%;
  flex: 1;
  border-radius: 44% 44% 0 0;
  background: var(--bg-0);
  opacity: 0.8;
}

.perso--parle .perso__tete,
.perso--parle .perso__buste { background: #04050A; opacity: 1; }

.scene__cadre {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: var(--cx, 60%);
  transform: translateX(-50%);
  aspect-ratio: 9 / 16;
  border: 2px solid var(--fg-1);
  border-radius: 4px;
  box-shadow: 0 0 0 2000px rgba(10, 10, 9, 0.6);
}
.scene__cadre span {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--fg-1);
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}

.scene__tag,
.clip9__tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(10, 10, 9, 0.78);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clip9 {
  --contour:
    -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
    -2px  0   0 #000,               2px  0   0 #000,
    -2px  2px 0 #000, 0  2px 0 #000, 2px  2px 0 #000;
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(78% 42% at 50% 32%, var(--bg-4) 0%, transparent 66%),
    linear-gradient(168deg, var(--bg-3) 0%, var(--bg-2) 60%, var(--bg-1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 10px 12px;
}
.clip9__accroche {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 96%;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: 0.006em;
  font-size: clamp(13px, 1.5vw, 18px);
  color: #FFFFFF;
  text-shadow: var(--contour);
}
.clip9__bas { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.clip9__st {
  max-width: 98%;
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-size: clamp(12px, 1.4vw, 17px);
  color: #FFFFFF;
  text-shadow: var(--contour);
}

.clip9__st .est-dit { color: #FFFF00; }
.clip9__ban {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.clip9 .perso { --x: 50%; --w: 62%; --h: 58%; }

.bench {
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  padding: clamp(28px, 4vw, 52px) max(var(--sp-4), 2.5vw) clamp(24px, 3vw, 40px);
  background: var(--bg-2);
}
.bench__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.bench__title { margin-top: var(--sp-2); font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; letter-spacing: -0.015em; max-width: 30ch; }

.bench__read {
  
  display: flex;
  
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.bench__read b { color: var(--fg-1); font-weight: 500; }

.bench__frame { position: relative; }

.bench__marks { position: relative; height: 20px; }
.bench__peak {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--heat-3);
  white-space: nowrap;
}
.bench__peak::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--heat-3);
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: clamp(88px, 13vw, 150px);
}
.bars i {
  flex: 1 1 0;
  min-width: 0;
  
  height: max(6%, calc(var(--v) * 1%));
  border-radius: 2px 2px 0 0;
  background: var(--heat-1);
}
.bars i.m { background: var(--heat-2); }
.bars i.h { background: var(--heat-3); }

.rail {
  position: relative;
  height: 10px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-4);
  overflow: hidden;
}
.rail span {
  position: absolute;
  inset-block: 0;
  min-width: 3px;
  border-radius: var(--r-pill);
  
  background: color-mix(in srgb, var(--heat-2) 70%, transparent);
}

.bench__piste {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ruler { margin-top: 10px; }
.ruler__ticks {
  height: 7px;
  background: repeating-linear-gradient(
    to right,
    var(--line-2) 0 1px,
    transparent 1px var(--ruler-step, 2.0833%)
  );
}
.ruler__marks {
  position: relative;
  height: 18px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.ruler__marks span { position: absolute; top: 0; transform: translateX(-50%); }
.ruler__marks span:first-child { transform: none; }
.ruler__marks span:last-child { transform: translateX(-100%); }

.bench__cursor {
  position: absolute;
  top: 20px;
  bottom: 22px;
  width: 1px;
  background: var(--fg-1);
  opacity: 0.6;
  pointer-events: none;
  display: none;
}
.bench.is-live .bench__cursor { display: block; }

.bench__note {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--fg-3);
  max-width: 82ch;
}

.section { padding-block: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line-1); }
.section h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; max-width: 22ch; }
.section__sub { margin-top: var(--sp-4); font-size: var(--text-base); color: var(--fg-2); max-width: 60ch; }
.section__sub strong { color: var(--fg-1); font-weight: 600; }

.steps {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.step { padding: var(--sp-6) var(--sp-5) 0; border-left: 1px solid var(--line-1); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.step__t { margin-top: var(--sp-3); font-size: var(--text-lg); font-weight: 600; }
.step__d { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--fg-2); }

.ledger {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  overflow: hidden;
}
.ledger__row {
  background: var(--bg-0);
  padding: clamp(20px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ledger__t { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.ledger__d { font-size: var(--text-sm); color: var(--fg-2); }
.ledger__d strong { color: var(--fg-1); font-weight: 600; }

.ui {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.ui--duo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.ui--editeur { grid-template-columns: clamp(150px, 18vw, 210px) minmax(0, 1fr); align-items: start; }

.ui-carte {
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ui-carte__t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
}

.ui-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
}
.ui-onglet {
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.ui-onglet.est-actif { background: var(--bg-0); color: var(--fg-1); font-weight: 600; }

.ui-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.ui-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
  overflow: hidden;
}
.ui-champ span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-aide { font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }
.ui-aide strong { color: var(--fg-1); font-weight: 600; }

.ui-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px var(--sp-4);
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-1);
}
.ui-ligne:last-of-type { border-bottom: 0; }
.ui-ligne__n { font-size: var(--text-sm); font-weight: 500; color: var(--fg-1); }
.ui-ligne__d { grid-column: 1; font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }

.ui-ligne__v { grid-row: 1 / span 2; grid-column: 2; }

.ui-etiq {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  font-size: var(--text-xs);
  color: var(--fg-2);
  white-space: nowrap;
}
.ui-etiq--cout { border-color: transparent; background: var(--heat-bg); color: var(--heat-2); }

.ui-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.ui-pastille::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ui-pastille--chaud { background: var(--heat-bg); color: var(--heat-2); }

.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  color: var(--fg-1);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}
.ui-bouton--primaire { background: var(--prim); color: var(--on-prim); border-color: transparent; }

.ui-seg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.ui-seg + .ui-seg { margin-top: 4px; }
.ui-seg time { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-seg.est-retire { text-decoration: line-through; background: var(--bg-2); color: var(--fg-3); }

.ui-cibles { display: grid; gap: 6px; }
.ui-cible {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.ui-cible::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-3);
}
.ui-cible.est-coche::before {
  background: var(--prim);
  border-color: var(--prim);
  
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 56%, 30% 56%, 30% 74%, 70% 74%, 70% 26%, 88% 26%, 88% 88%, 12% 88%, 12% 44%, 0 44%);
}
.ui-cible em { font-style: normal; margin-left: auto; font-size: var(--text-xs); color: var(--fg-2); }

.ui-apercu { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-apercu .clip9 { max-width: 210px; margin: 0 auto; }

.mockup { margin-top: var(--sp-8); container-type: inline-size; }

.mockup--etroit { max-width: 560px; margin-inline: auto; }

@container (max-width: 700px) {
  .ui--duo { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 520px) {
  .ui--editeur { grid-template-columns: minmax(0, 1fr); }
  .ui-apercu .clip9 { max-width: 180px; }
}

@container (max-width: 420px) {
  .ui { padding: 10px; border-radius: var(--r); }
  .ui-carte { padding: 12px; }
  .ui-ligne { grid-template-columns: minmax(0, 1fr); }
  .ui-ligne__v { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 4px; }
  .ui-seg { flex-direction: column; gap: 2px; }
}
.mockup__legende {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.paper {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-1);
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(255, 193, 69, 0.10), transparent 70%),
    var(--bg-0);
  color: var(--fg-1);
}
.paper__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.paper .eyebrow { color: var(--heat-2); }
.paper h1 {
  margin-top: var(--sp-3);
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.6vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.paper h1 em { font-style: normal; color: var(--heat-2); }
.paper__lede { margin-top: var(--sp-5); max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--fg-2); }
.paper__act { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: 10px; }
.paper__act .btn { min-height: 44px; padding-inline: 18px; }
.paper__preuves { margin-top: var(--sp-6); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.paper__preuves li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--fg-2); }
.paper__preuves svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--heat-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.paper__fiche { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.cpt {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.8);
}
.cpt__t { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.cpt__reglage { margin-top: var(--sp-4); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cpt__reglage label { font-size: var(--text-sm); color: var(--fg-2); }
.cpt__reglage output { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.cpt input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 6px 0 0;
  background: transparent;
  accent-color: var(--heat-2);
  cursor: pointer;
}
.cpt__total { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--text-base); color: var(--fg-2); }
.cpt__total b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--heat-2); font-variant-numeric: tabular-nums; }
.cpt__total span { flex-basis: 100%; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.cpt__plans { margin-top: var(--sp-4); padding: 0; list-style: none; border-top: 1px solid var(--line-1); }
.cpt__plans li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-1); }
.cpt__nom { display: flex; flex-direction: column; font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.cpt__nom small { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--fg-3); }
.cpt__fois { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); text-align: right; font-variant-numeric: tabular-nums; }
.cpt__fois--0 { font-weight: 400; color: var(--fg-3); }

.spec { padding: 0 4px; }

.spec__row[hidden] { display: none; }

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-1);
  align-items: baseline;
}
.spec dt { font-size: var(--text-sm); color: var(--fg-3); }
.spec dd {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.spec__note { padding: 0 4px; font-size: var(--text-xs); color: var(--fg-3); }

@media (max-width: 899px) {
  .paper__grid { grid-template-columns: minmax(0, 1fr); }
  .paper h1 { max-width: 14ch; }
}
@media (max-width: 479px) {
  .paper__act .btn { flex: 1 1 100%; }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec dd { text-align: left; }
}

.caps__intro { display: grid; gap: var(--sp-3); }
.caps__legende { margin-top: var(--sp-2); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-xs); color: var(--fg-3); }
.caps__legende li { display: inline-flex; align-items: center; gap: 7px; }
.caps__legende i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); }
.caps__legende .caps__i--c { border-color: var(--heat-2); background: var(--heat-bg); }
.caps__legende .caps__i--s { border-color: var(--heat-3); background: rgba(255, 106, 61, 0.16); }
.caps__groupes { margin-top: var(--sp-8); display: grid; }
.caps__groupe {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line-1);
}
.caps__tete { align-self: start; position: sticky; top: 88px; }
.caps__tete h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.caps__tete p { margin-top: var(--sp-2); max-width: 30ch; font-size: var(--text-sm); color: var(--fg-2); }

.caps .inclus { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
.caps .inclus li { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line-1); color: var(--fg-1); }
.caps__nom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.caps__detail { font-size: var(--text-xs); color: var(--fg-3); line-height: 1.45; }
.caps__pastille { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.caps__pastille--c { border: 1px solid rgba(255, 193, 69, 0.45); background: var(--heat-bg); color: var(--heat-2); }
.caps__pastille--s { border: 1px solid rgba(255, 106, 61, 0.5); background: rgba(255, 106, 61, 0.14); color: #ff9a78; }

@media (max-width: 899px) {
  .caps__groupe { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .caps__tete { position: static; }
}
@media (max-width: 599px) {
  .caps .inclus { grid-template-columns: minmax(0, 1fr); }
}

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-8); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.card__pour { margin-top: 2px; }
.card__prix { margin-top: var(--sp-4); }
.card__prix + .card__note { margin-top: 4px; }
.card__quota { margin-top: var(--sp-4); }

.card__quota + .card__note { margin-top: 0; min-height: 0; }
.card__plafond { margin-top: 4px; }
.card__plafond + .card__plafond { margin-top: 2px; }
.card .btn--bloc { margin-top: var(--sp-4); }

.card__t {
  font-size: var(--text-lg, var(--text-base));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card__d { font-size: var(--text-sm); color: var(--fg-2); }

.card__prix {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.card__cadence {
  margin-left: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-3, var(--fg-2));
  font-variant-numeric: normal;
}

.inclus { margin-top: 2px; padding-left: 18px; list-style: disc; display: grid; gap: 7px; }
.inclus li { font-size: var(--text-sm); color: var(--fg-2); }
.inclus li::marker { color: var(--line-2); }

.inclus:has(.inclus__m) {
  margin-top: var(--sp-4);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line-1);
  list-style: none;
}
.inclus:has(.inclus__m) li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.inclus__m { color: var(--ok, var(--fg-2)); font-variant-numeric: tabular-nums; }

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

.inclus li[data-phare] {
  margin-inline: -6px;
  padding: 4px 6px;
  border: 1px solid color-mix(in oklab, var(--heat-2) 40%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: var(--heat-bg);
  color: var(--fg-1);
  font-weight: 600;
}
.inclus li[data-phare] .inclus__m { color: var(--heat-2); }

.inclus li[data-absent] { color: var(--fg-3, var(--fg-2)); text-decoration: line-through; }
.inclus li[data-absent] .inclus__m { color: var(--line-2); text-decoration: none; }

.card__badge {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--heat-2) 40%, transparent);
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--heat-2) 12%, transparent);
  color: var(--heat-2);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.card__note { font-size: var(--text-xs); color: var(--fg-3, var(--fg-2)); min-height: 1.2em; }

.card__pour { font-size: var(--text-xs); color: var(--fg-3, var(--fg-2)); margin-top: -4px; }

.card__quota { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); margin-top: var(--sp-2); }
.card__plafond { font-size: var(--text-xs); font-weight: 500; color: var(--fg-2); }

.inclus li.card__herite {
  display: block;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
  text-decoration: none;
}

.btn--bloc { display: flex; width: 100%; margin-top: 4px; }

.cadence {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin-inline: auto;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: var(--sp-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  background: var(--bg-2);
}
.cadence__b {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: calc(var(--r) - 4px);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.cadence__b:hover { color: var(--fg-1); }
.cadence__b[aria-checked='true'] { background: var(--fg-1); color: var(--bg-0); }

.close { padding-block: clamp(76px, 10vw, 152px); border-top: 1px solid var(--line-1); }
.close__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close__titre { font-size: clamp(44px, 10.5vw, 128px); }
.close__sub { margin-top: var(--sp-5); font-size: var(--text-lg); color: var(--fg-2); max-width: 48ch; }
.close__act { margin-top: clamp(24px, 3vw, 36px); display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; justify-content: center; }
.close__fine { margin-top: var(--sp-5); font-size: var(--text-xs); color: var(--fg-3); }

.prose { max-width: 68ch; padding: var(--sp-12) 0; }
.prose h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.prose h2 { font-size: var(--text-xl); font-weight: 700; margin-top: var(--sp-12); }
.prose p, .prose li { color: var(--fg-2); font-size: var(--text-base); }
.prose p { margin-top: var(--sp-4); }
.prose ul { margin-top: var(--sp-4); padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--fg-1); }
.prose strong { color: var(--fg-1); }

.todo {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r);
  background: var(--heat-bg);
  border: 1px solid var(--heat-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.todo strong { color: var(--fg-1); }

.foot { padding-block: var(--sp-8); display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line-1); }
.foot__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-left: auto; }
.foot a {
  color: var(--fg-3);
  font-size: var(--text-xs);
  text-decoration: none;
  
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.foot a:hover { color: var(--fg-1); }
.foot__copy { color: var(--fg-3); font-size: var(--text-xs); }

@media (max-width: 1000px) {
  .hero__pied { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  
  .montre { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .montre--inverse .montre__dire,
  .montre--inverse .montre__voir { order: 0; }
  .paper__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .step { border-left: 0; border-top: 1px solid var(--line-1); padding: var(--sp-5) 0 0; }
  .step:first-child { border-top: 1px solid var(--line-2); }
  .ledger { grid-template-columns: minmax(0, 1fr); }

  
  .atelier__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .atelier__fleche::before { transform: rotate(90deg); }
  .atelier__lot { width: 100%; max-width: 290px; }
  .atelier__lot--source { max-width: none; }
}

@media (max-width: 760px) {
  .hero__l2 { margin-left: 0; }
}

@media (max-width: 620px) {
  .cards, .cards--2 { grid-template-columns: minmax(0, 1fr); }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec dd { text-align: left; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 var(--sp-4); }
  .nav { gap: var(--sp-2); padding: var(--sp-3) 0; }
  
  .nav__links { order: 3; flex-basis: 100%; }
  .nav__actions { margin-left: auto; }
  .hero__act .btn, .close__act .btn { width: 100%; }
  .hero__act, .close__act { align-self: stretch; width: 100%; }
  
  .hero__l2 { margin-left: 0; }
  
  .parcours::before { left: 19px; }
  .etape { grid-template-columns: 40px minmax(0, 1fr); }
  .etape__n { width: 40px; height: 40px; font-size: var(--text-xs); }
  
  .parcours--mots .etape { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .parcours--mots .etape__n { justify-self: start; font-size: var(--text-xs); padding: 5px 11px; }
  
  .bench__head { flex-direction: column; align-items: flex-start; }
  .bars { gap: 1px; }

  
  .nav__links { gap: 0; }
  .nav__link { padding: 8px 3px; }

  
  .btn--sm { min-height: 44px; height: auto; }
  .nav__brand { min-height: 44px; }

  
  .nav__brand .nav__mark { align-self: center; }
}

.card--phare {
  border-color: color-mix(in srgb, var(--heat-2) 45%, transparent);
  background: var(--bg-2);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-1);
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .entete {
    background: color-mix(in srgb, var(--bg-0) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.entete__inner { padding-block: 10px; }

.pied { border-top: 1px solid var(--line-1); padding-block: clamp(32px, 4vw, 56px); }
.pied__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}
.pied__mot { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--fg-2); max-width: 32ch; }
.pied__t { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.pied__liste { margin-top: var(--sp-3); padding: 0; list-style: none; display: grid; gap: 10px; }
.pied__liste a { font-size: var(--text-sm); color: var(--fg-2); text-decoration: none; }
.pied__liste a:hover { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }
.pied__bas {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

@media (max-width: 900px) {
  .pied__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pied__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.bloc__sub--suite { margin-top: var(--sp-6); }

@media (max-width: 900px) {
  .entete .nav__links { display: none; }
}

@media (max-width: 560px) {
  .entete .nav__actions .btn--ghost { display: none; }
}

main > section[id],
.entete ~ main [id] {
  scroll-margin-top: 104px;
}

.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  background: var(--bg-2);
}
.media--16x9 { aspect-ratio: 16 / 9; }

.media--9x16 { aspect-ratio: 9 / 16; max-height: 70vh; margin-inline: auto; }

.media--intrinseque { aspect-ratio: auto; }
.media--intrinseque video { height: auto; object-fit: contain; }

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

.media__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-0) 76%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
}

.ruban {
  --ruban-gap: var(--sp-4);
  display: flex;
  gap: var(--ruban-gap);
  margin-top: var(--sp-8);
  overflow: hidden;
  
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ruban__piste {
  display: flex;
  gap: var(--ruban-gap);
  flex: 0 0 auto;
  
  align-items: stretch;
}

.ruban[data-anime] .ruban__piste {
  animation: ruban-defile var(--ruban-duree, 40s) linear infinite;
}
.ruban[data-anime]:hover .ruban__piste,
.ruban[data-anime]:focus-within .ruban__piste { animation-play-state: paused; }

@keyframes ruban-defile {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--ruban-gap))); }
}

@media (prefers-reduced-motion: reduce) {
  .ruban {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: var(--sp-2);
  }
  .avis { scroll-snap-align: start; }
}

.avis {
  flex: 0 0 clamp(258px, 27vw, 340px);
  display: flex;
  flex-direction: column;
  
  justify-content: space-between;
  gap: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  padding: var(--sp-5);
}
.avis__mot {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.avis__qui { display: flex; align-items: center; gap: 10px; }
.avis__photo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  object-fit: cover;
  
  background: var(--bg-2);
}
.avis__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.avis__nom { font-size: var(--text-sm); font-weight: 600; }
.avis__ou { font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-mono); }

.cmp__cadre { position: relative; margin-top: var(--sp-8); overflow-x: auto; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--bg-1); }
.cmp__cadre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--lh-snug); }
.cmp th, .cmp td { padding: 12px 18px; border-bottom: 1px solid var(--line-1); text-align: center; vertical-align: middle; }
.cmp thead th[scope="col"] { width: 18%; }
.cmp thead th { padding-block: 20px 14px; font-size: var(--text-base); font-weight: 700; color: var(--fg-1); }
.cmp th[scope="row"], .cmp__coin { position: sticky; left: 0; z-index: 1; width: 46%; min-width: 230px; text-align: left; background: var(--bg-1); box-shadow: inset -1px 0 0 var(--line-1); }
.cmp th[scope="row"] { font-weight: 500; color: var(--fg-1); }
.cmp__note { display: block; margin-top: 3px; font-size: var(--text-xs); font-weight: 400; color: var(--fg-3); }
.cmp__groupe th { padding: 24px 18px 8px; text-align: left; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--heat-2); }

.cmp__groupe th > span { position: sticky; left: 18px; }
.cmp__pop { background: rgba(255, 193, 69, 0.05); }
.cmp thead .cmp__pop { box-shadow: inset 0 2px 0 var(--heat-2); }
.cmp__badge { display: block; width: max-content; margin: 6px auto 0; padding: 2px 9px; border-radius: var(--r-pill); background: var(--heat-bg); color: var(--heat-2); font-size: 12px; font-weight: 600; }
.cmp__oui { font-size: 17px; font-weight: 700; color: var(--ok); }
.cmp__non { color: var(--fg-3); }
.cmp__val { font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp__pied { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--fg-3); }
.cmp__pied a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .cmp { min-width: 540px; font-size: var(--text-xs); }
  .cmp th, .cmp td { padding: 10px 12px; }
  .cmp th[scope="row"], .cmp__coin { width: auto; min-width: 176px; }
  .cmp thead th { font-size: var(--text-sm); }
}