/* Hallmark · genre: playful · macrostructure: Workbench · theme: studied-DNA (source: https://codex-resets.com/)
 * studied: yes · raised under discipline 7 (ambition request): motion, constructed visuals, depth
 * paper oklch(97% 0.032 85) · accents sun / rose / sky (one per parcours) + coral for the teacher marks (stamp, checks, circle)
 * fonts: Baloo 2 + Plus Jakarta Sans + JetBrains Mono · nav: N9 edge-aligned · footer: Ft8 marquee
 * enrichment: hand-built SVG desk scene (Tier B) + real captures · motion: GSAP entrance, scroll scenes, press physics
 * Hallmark · pre-emit critique: P5 H4 E5 S5 R3 V5
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

.label {
  margin: 0;
  font: 700 var(--text-label)/1.25 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.section-title {
  margin: 0 0 var(--space-lg);
  font: 800 var(--text-xl)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.section-title .w { display: inline-block; }
.section-sub {
  max-width: 34em;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-xl);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.2rem);
  color: var(--color-muted);
}

.card {
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.chip {
  display: inline-block;
  padding: 0.4em 0.65em 0.32em;
  font: 700 0.68rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.18em;
  color: var(--color-ink);
  background: var(--color-card);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lessons .chip { margin-left: 0.4em; }
.chip--free { background: var(--color-mint); }
.chip--sun  { background: var(--color-sun); }
.chip--rose { background: var(--color-rose); }
.chip--sky  { background: var(--color-sky); }

.pill {
  display: inline-block;
  padding: 0.6em 0.95em 0.52em;
  font: 700 var(--text-label)/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.pill--sun { background: var(--color-sun); }

/* ---------- dessins (SVG) ---------- */
.ill { width: 100%; height: auto; overflow: visible; }
.f-ink   { fill: var(--color-ink); }
.f-card  { fill: var(--color-card); }
.f-sun   { fill: var(--color-sun); }
.f-rose  { fill: var(--color-rose); }
.f-sky   { fill: var(--color-sky); }
.f-mint  { fill: var(--color-mint); }
.f-wood  { fill: var(--color-paper-deep); }
.f-faint { fill: var(--color-faint); }
.f-glass { fill: color-mix(in oklab, var(--color-sky) 45%, transparent); }
.s-ink, .s-ink-thin, .s-ink-thick {
  stroke: var(--color-ink);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s-ink       { stroke-width: 3; }
.s-ink-thin  { stroke-width: 2; }
.s-ink-thick { stroke-width: 6; }
.s-ink-light { stroke: color-mix(in oklab, var(--color-ink) 28%, transparent); stroke-width: 2; }
.s-ink-light-thick { fill: none; stroke: var(--color-card); stroke-width: 6; stroke-linecap: round; }
.s-rose  { stroke: var(--color-rose); stroke-width: 2.5; }
.s-faint { stroke: var(--color-faint); stroke-width: 1.5; }
.s-pen   { fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-check { fill: none; stroke: var(--color-coral); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.t-display { font-family: var(--font-display); font-weight: 800; fill: var(--color-ink); }
.t-mono    { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.12em; fill: var(--color-ink); }
.q-mark    { fill: var(--color-sun); stroke: var(--color-ink); stroke-width: 3; paint-order: stroke fill; }
.handle-out { fill: none; stroke: var(--color-ink); stroke-width: 15; stroke-linecap: round; }
.handle-in  { fill: none; stroke: var(--color-rose); stroke-width: 8; stroke-linecap: round; }

.gear { transform-box: fill-box; transform-origin: center; }
.gear--cw  { animation: spin 16s linear infinite; }
.gear--ccw { animation: spin 10.7s linear infinite reverse; }
.art-gears .gear--cw { animation-duration: 10s; }
.art-gears .gear--ccw { animation-duration: 6.67s; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.82rem 1.35rem 0.7rem;
  font: 700 var(--text-base)/1 var(--font-display);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-press),
    box-shadow var(--dur-micro) var(--ease-press);
}
.btn--sun { background: var(--color-sun); }
.btn--ink { background: var(--color-ink); color: var(--color-card); }
.btn--sm  { padding: 0.62rem 1rem 0.52rem; font-size: var(--text-sm); }
.btn--lg  { padding: 1rem 1.55rem 0.88rem; font-size: 1.125rem; box-shadow: var(--shadow-md); }
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-press);
  transition-duration: 70ms;
}

/* ---------- en-tête ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}
.masthead .btn { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding-top: 0.14em;
  font: 800 1rem/1 var(--font-display);
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transform: rotate(-6deg);
}
.brand__name {
  font: 800 clamp(1.3rem, 1vw + 1rem, 1.7rem)/1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- ouverture ---------- */
.hero {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-lg) var(--space-xl);
}
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-md);
}
.hero__title {
  display: grid;
  justify-items: start;
  gap: 0.06em;
  margin: 0 0 var(--space-md);
  font: 800 clamp(2.4rem, 5.4vw + 0.6rem, 5.2rem)/0.98 var(--font-display);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.w { display: inline-block; }
.hero__figure {
  position: relative;
  display: inline-block;
  margin-left: -0.08em;
  padding: 0.08em 0.2em 0;
  transform: rotate(-2deg);
}
.hero__figure-bg {
  position: absolute;
  inset: 0;
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  transform-origin: left center;
}
.hero__figure-text { position: relative; }
.hero__lede {
  max-width: 30em;
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.0625rem, 0.5vw + 0.98rem, 1.3rem);
  color: var(--color-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  margin: var(--space-xs) 0 0 1.4rem;
  font: 700 1.1rem/1 var(--font-display);
  transform: rotate(-3deg);
}
.hero__note span { padding-top: 2.1rem; }
.scribble {
  width: 4.6rem;
  height: auto;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* le bureau */
.desk {
  position: relative;
  width: 100%;
  max-width: 35rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  container-type: inline-size;
}
.desk__item {
  position: absolute;
  transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--r, 0deg));
  transition: transform 500ms var(--ease-out);
}
.desk__float { position: relative; }
.desk__sheet    { left: 42%; top: 3%;  width: 50%; --r: 6deg;   z-index: 1; }
.desk__notebook { left: 6%;  top: 17%; width: 45%; --r: -7deg;  z-index: 2; }
.desk__bubble   { left: 0;   top: 0;   width: 52%; --r: -3deg;  z-index: 4; }
.desk__postit   { left: 68%; top: 55%; width: 29%; --r: 8deg;   z-index: 3; }
.desk__mug      { left: 2%;  top: 70%; width: 21%; --r: -6deg;  z-index: 3; }
.desk__pencil   { left: 30%; top: 84%; width: 54%; --r: -6deg;  z-index: 5; }

.bubble {
  position: relative;
  padding: 0.75em 0.95em 0.8em;
  font: 600 clamp(0.78rem, 3.3cqw, 1.06rem)/1.35 var(--font-body);
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow-md);
}
.bubble__who {
  display: block;
  margin-bottom: 0.3em;
  font: 700 clamp(0.6rem, 2cqw, 0.72rem)/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.postit {
  position: relative;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  gap: 0.15em;
  text-align: center;
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}
.postit::before {
  content: "";
  position: absolute;
  top: -0.7em;
  left: 50%;
  width: 46%;
  height: 1.3em;
  background: color-mix(in oklab, var(--color-rose) 75%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--color-ink) 35%, transparent);
  transform: translateX(-50%) rotate(-4deg);
}
.postit b { font: 800 clamp(1rem, 6cqw, 1.9rem)/1 var(--font-display); }
.postit span {
  font: 700 clamp(0.55rem, 2.3cqw, 0.78rem)/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.steam path {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
  animation: steam 3s var(--ease-in-out) infinite;
}
.steam path:nth-child(2) { animation-delay: -1s; }
.steam path:nth-child(3) { animation-delay: -2s; }
@keyframes steam {
  0%   { transform: translateY(6px); opacity: 0; }
  40%  { opacity: 0.55; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* le tampon « vérifié » */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 0.85em 0.55em;
  font: 700 0.92rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-coral);
  background: var(--color-card);
  border: 3px solid var(--color-coral);
  border-radius: 9px;
  box-shadow: inset 0 0 0 2px var(--color-card), inset 0 0 0 3.5px var(--color-coral);
  pointer-events: none;
  white-space: nowrap;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.15'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.15'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.stamp__tick { font: 800 1.25em/1 var(--font-display); letter-spacing: 0; }
.stamp--desk {
  position: absolute;
  right: 4%;
  top: 56%;
  font-size: clamp(0.62rem, 2.6cqw, 0.95rem);
  transform: rotate(-12deg);
}

/* chiffres sous l'ouverture */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 2vw, 1.25rem);
}
.fact {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.9rem clamp(0.75rem, 2.4vw, 1.3rem) 0.75rem;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--tone);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transform: rotate(var(--tilt));
  transition:
    transform var(--dur-micro) var(--ease-press),
    box-shadow var(--dur-micro) var(--ease-press);
}
.fact .label { color: color-mix(in oklab, var(--color-ink) 80%, transparent); }
.fact__num {
  font: 800 clamp(1.8rem, 3vw + 1rem, 3rem)/1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fact:active {
  transform: rotate(var(--tilt)) translate(3px, 3px);
  box-shadow: var(--shadow-press);
  transition-duration: 70ms;
}

/* bandeau défilant */
.marquee-wrap {
  overflow: hidden;
  margin-top: var(--space-xl);
  padding-block: var(--space-md);
}
.marquee {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  overflow: hidden;
  background: var(--color-rose);
  border-block: var(--rule) solid var(--color-ink);
  transform: rotate(-1.4deg);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: max-content;
  padding-block: 0.95rem 0.8rem;
  animation: marquee 60s linear infinite;
}
.marquee__track span {
  font: 800 clamp(1.25rem, 1.2vw + 1rem, 1.8rem)/1 var(--font-display);
  white-space: nowrap;
}
.marquee__track i {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- parcours ---------- */
.chooser { padding-top: var(--space-3xl); }
.chooser__grid { display: grid; gap: var(--space-lg); }
.chooser__tabs { display: grid; gap: var(--space-sm); align-content: start; }
.tab {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 0.85rem var(--space-md) 0.85rem 0.85rem;
  font: inherit;
  color: var(--color-ink);
  text-align: left;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-press),
    box-shadow var(--dur-micro) var(--ease-press),
    background-color var(--dur-short) var(--ease-out);
}
.tab__icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  background: var(--tone);
  border: var(--rule) solid var(--color-ink);
  border-radius: 12px;
}
.tab__icon svg { width: 2.2rem; height: 2.2rem; overflow: visible; }
.tab__body { display: grid; gap: 0.3rem; min-width: 0; }
.tab .label { color: color-mix(in oklab, var(--color-ink) 80%, transparent); }
.tab__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-sm);
}
.tab__name,
.tab__price {
  font: 800 clamp(1.1rem, 0.6vw + 0.9rem, 1.25rem)/1.15 var(--font-display);
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  background: var(--tone);
  box-shadow: var(--shadow-md);
  transform: rotate(calc(var(--tilt) * 0.45));
}
.tab[aria-selected="true"] .tab__icon { background: var(--color-card); }
.tab:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
  transition-duration: 70ms;
}

.panel {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: color-mix(in oklab, var(--tone) 30%, var(--color-card));
  box-shadow: var(--shadow-lg);
}
.panel[hidden] { display: none; }
.panel__head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.panel__goal {
  max-width: 19em;
  margin: 0 0 var(--space-2xs);
  font: 800 clamp(1.45rem, 1.3vw + 1.05rem, 2.1rem)/1.08 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.panel__for { margin: 0; font-weight: 500; }
.panel__art {
  width: min(70%, 13.5rem);
  height: auto;
  overflow: visible;
}
.art-loupe .loupe {
  transform-box: view-box;
  animation: orbit 6s var(--ease-in-out) infinite;
}
@keyframes orbit {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-34px, 14px); }
  50% { transform: translate(-58px, -6px); }
  75% { transform: translate(-22px, -22px); }
}
.env {
  transform-box: view-box;
  animation: belt 6s linear infinite;
}
.env:nth-child(2) { animation-delay: -2s; }
.env:nth-child(3) { animation-delay: -4s; }
@keyframes belt {
  0%   { transform: translateX(14px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(214px); opacity: 0; }
}
.lessons {
  display: grid;
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}
.lessons li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2.75rem;
  border-bottom: 2px dashed color-mix(in oklab, var(--color-ink) 22%, transparent);
  counter-increment: lesson;
  font-weight: 500;
}
.lessons li::before {
  content: counter(lesson);
  position: absolute;
  left: 0;
  top: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  font: 700 0.78rem/1 var(--font-mono);
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
}
.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.panel__price {
  margin: 0;
  font: 800 clamp(2.1rem, 2vw + 1.5rem, 3rem)/1 var(--font-display);
  letter-spacing: -0.01em;
}
.panel__price small,
.extra__price small {
  font: 600 var(--text-sm)/1 var(--font-body);
  letter-spacing: 0;
}

/* ---------- réalisations ---------- */
.gallery { padding-top: var(--space-3xl); }
.gallery__grid {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
}
.shot { margin: 0; }
.shot__frame {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  transition: transform 320ms var(--ease-out);
}
.shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.shot__frame--empty {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--color-paper-deep);
  border-style: dashed;
  box-shadow: none;
}
.yours { width: 72%; height: auto; }
.yours__text {
  position: absolute;
  right: 8%;
  bottom: 10%;
  padding: 0.12em 0.45em 0.02em;
  font: 800 clamp(1.1rem, 1.2vw + 0.8rem, 1.5rem)/1.1 var(--font-display);
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-5deg);
}
.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-top: 1.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------- comment ça se passe : bande sombre ---------- */
.how {
  position: relative;
  margin-top: var(--space-3xl);
  padding-block: calc(var(--space-3xl) + 2vw) calc(var(--space-3xl) + 2vw);
  color: var(--color-card);
  background-color: var(--color-ink);
  background-image: radial-gradient(color-mix(in oklab, var(--color-card) 12%, transparent) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  clip-path: polygon(0 2.4vw, 100% 0, 100% calc(100% - 2.4vw), 0 100%);
}
.how .section-title { color: var(--color-card); margin-bottom: 0; }
.how-row {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding-top: var(--space-2xl);
}
.how-row__text p {
  max-width: 24em;
  margin: 0;
  color: color-mix(in oklab, var(--color-card) 80%, transparent);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.2rem);
}
.step__num {
  display: block;
  margin-bottom: var(--space-xs);
  font: 800 var(--text-numeral)/0.8 var(--font-display);
  color: var(--tone);
  text-shadow: 6px 6px 0 color-mix(in oklab, var(--tone) 28%, transparent);
}
.step__title {
  margin: 0 0 var(--space-2xs);
  font: 800 clamp(1.7rem, 1.6vw + 1.2rem, 2.4rem)/1.04 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--tone);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* quiz */
.quiz {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2rem);
  color: var(--color-ink);
  transform: rotate(0.8deg);
}
.quiz__q {
  margin: var(--space-xs) 0 var(--space-md);
  font: 700 clamp(1.2rem, 0.8vw + 1rem, 1.5rem)/1.25 var(--font-display);
  text-wrap: balance;
}
.quiz__opts { display: grid; gap: var(--space-xs); }
.opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 3.25rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  font: 600 var(--text-base)/1.2 var(--font-body);
  color: var(--color-ink);
  text-align: left;
  white-space: nowrap;
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 0 var(--color-ink);
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-press),
    box-shadow var(--dur-micro) var(--ease-press);
}
.opt__key {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  font: 700 0.8rem/1 var(--font-mono);
  background: var(--color-paper);
  border: var(--rule) solid var(--color-ink);
  border-radius: 8px;
}
.opt::after { margin-left: auto; font: 800 1.15rem/1 var(--font-display); }
.opt:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--color-ink); transition-duration: 70ms; }
.opt[data-state="wrong"] { background: var(--color-rose); }
.opt[data-state="wrong"]::after { content: "✕"; }
.opt[data-state="right"] { background: var(--color-mint); box-shadow: 3px 3px 0 0 var(--color-ink); }
.opt[data-state="right"]::after { content: "✓"; }
.quiz.is-done .opt:not([data-state="right"]) { opacity: 0.5; }
.quiz__say { margin: var(--space-sm) 0 0; font-weight: 600; }
.quiz__say:empty { margin: 0; }
.stamp--quiz {
  position: absolute;
  top: -1.1rem;
  right: clamp(0.75rem, 3vw, 1.5rem);
  opacity: 0;
  transform: rotate(-8deg);
}
@keyframes stamp-slam {
  0%   { opacity: 0; transform: rotate(-16deg) scale(1.8); }
  60%  { opacity: 1; transform: rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
.quiz.is-done .stamp--quiz { animation: stamp-slam var(--dur-long) var(--ease-out) forwards; }

/* conversation */
.chat { display: grid; gap: var(--space-xs); margin: 0; }
.msg {
  max-width: min(26rem, 90%);
  padding: 0.75rem 1.05rem 0.8rem;
  color: var(--color-ink);
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.msg p { margin: 0; }
.msg--claude { justify-self: start; border-bottom-left-radius: 4px; }
.msg--you { justify-self: end; background: var(--color-rose); border-bottom-right-radius: 4px; }
.msg__who {
  display: block;
  margin-bottom: 0.3rem;
  font: 700 var(--text-label)/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-ink) 75%, transparent);
}
.msg__ok {
  display: inline-block;
  margin-right: 0.35em;
  padding: 0.32em 0.55em 0.26em;
  font: 700 0.68rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  background: var(--color-mint);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-pill);
}

/* versions */
.versions {
  position: relative;
  display: grid;
  padding: 3.6rem 0 0 var(--space-md);
  color: var(--color-ink);
}
.version { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.version--old {
  position: absolute;
  top: 0;
  left: 0;
  right: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: 0.75rem 1.1rem 2.5rem;
  background: var(--color-paper-deep);
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.version--old .version__title {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.version--new { position: relative; box-shadow: var(--shadow-lg); transform: rotate(1.5deg); }
.version__title { margin: 0.4rem 0 0.6rem; font: 800 var(--text-lg)/1.15 var(--font-display); }
.version__note { margin: 0; font-size: var(--text-sm); }

/* ---------- programme ---------- */
.programme { padding-top: var(--space-3xl); }
.map { padding: clamp(1rem, 3.5vw, 2rem); }
.map__rows { display: grid; gap: var(--space-md); }
.map__row { display: grid; gap: var(--space-2xs); }
.map__label { font: 700 var(--text-base)/1 var(--font-display); white-space: nowrap; }
.map__label::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  vertical-align: -0.05em;
  background: var(--tone);
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
}
.map__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.2vw, 0.7rem);
}
.tile {
  appearance: none;
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  font: 700 0.85rem/1 var(--font-mono);
  color: var(--color-ink);
  background: var(--tone);
  border: var(--rule) solid var(--color-ink);
  border-radius: 9px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-press),
    box-shadow var(--dur-micro) var(--ease-press);
}
.tile.is-active {
  color: var(--color-card);
  background: var(--color-ink);
  box-shadow: var(--shadow-sm);
  transform: translate(-2px, -2px) rotate(-4deg);
}
.tile[data-free]::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 15px;
  height: 15px;
  background: var(--color-mint);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
}
.map__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-md);
  row-gap: 0.3rem;
  min-height: 5.5rem;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 2px dashed color-mix(in oklab, var(--color-ink) 25%, transparent);
}
.map__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  padding-top: 0.12em;
  font: 800 1.9rem/1 var(--font-display);
  background: var(--tone);
  border: var(--rule) solid var(--color-ink);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-5deg);
}
.map__caption .label { align-self: end; }
.map__title { align-self: start; font: 800 var(--text-lg)/1.15 var(--font-display); }

/* ---------- prix ---------- */
.pricing {
  display: grid;
  gap: var(--space-xl);
  padding-top: var(--space-3xl);
}
.pricing__text p {
  max-width: 21em;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.35rem);
}
.printer { justify-self: center; width: min(100%, 23rem); }
.printer__body {
  position: relative;
  z-index: 2;
  height: 3.4rem;
  background: var(--color-ink);
  border-radius: 16px 16px 10px 10px;
  box-shadow: var(--shadow-md);
}
.printer__led {
  position: absolute;
  left: 1.1rem;
  top: 0.9rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-mint);
  border-radius: 50%;
}
.printer__slot {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 0.7rem;
  height: 0.45rem;
  background: var(--color-ink-soft);
  border-radius: 4px;
}
.printer__out {
  overflow: hidden;
  margin-top: -0.9rem;
  padding: 0 1rem 1.4rem;
}
.receipt-wrap {
  filter:
    drop-shadow(2px 0 0 var(--color-ink))
    drop-shadow(-2px 0 0 var(--color-ink))
    drop-shadow(0 2px 0 var(--color-ink))
    drop-shadow(5px 5px 0 var(--color-ink));
}
.receipt {
  --zz: 16px;
  padding: calc(var(--space-lg) + 0.6rem) var(--space-md) calc(var(--space-lg) + var(--zz) / 2);
  font: 500 0.875rem/1.55 var(--font-mono);
  background: var(--color-card);
  -webkit-mask: conic-gradient(from -45deg at bottom, var(--mask-off), var(--mask-on) 1deg 89deg, var(--mask-off) 90deg) 50% / var(--zz) 100%;
          mask: conic-gradient(from -45deg at bottom, var(--mask-off), var(--mask-on) 1deg 89deg, var(--mask-off) 90deg) 50% / var(--zz) 100%;
}
.receipt__head {
  margin: 0 0 var(--space-md);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.receipt__head span { font-weight: 500; color: var(--color-muted); }
.receipt__lines {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) 0 0;
  list-style: none;
  border-top: 2px dashed var(--color-ink);
}
.receipt__lines li { display: flex; align-items: baseline; gap: 0.5rem; }
.receipt__lines i {
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted color-mix(in oklab, var(--color-ink) 45%, transparent);
  transform: translateY(-0.3em);
}
.receipt__sub {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 2px dashed var(--color-ink);
}
.receipt__sub s { text-decoration-thickness: 2px; }
.receipt__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-xs) 0 var(--space-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.receipt__total strong {
  display: inline-block;
  padding: 0.1em 0.22em 0;
  font: 800 2.4rem/1 var(--font-display);
  letter-spacing: -0.01em;
  background: var(--color-sun);
  border-radius: 8px;
  transform: rotate(-2deg);
}
.receipt__foot {
  margin: 0;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-muted);
}
.extras { display: grid; gap: var(--space-lg); }
.extra { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.extra .label { color: color-mix(in oklab, var(--color-ink) 80%, transparent); }
.extra--sky  { background: var(--color-sky);  transform: rotate(-0.8deg); }
.extra--rose { background: var(--color-rose); transform: rotate(1deg); }
.extra__title { margin: 0.45rem 0 0.25rem; font: 800 var(--text-lg)/1.1 var(--font-display); }
.extra__price { margin: 0 0 0.5rem; font: 800 clamp(1.9rem, 1.4vw + 1.4rem, 2.5rem)/1 var(--font-display); }
.extra p:last-child { margin: 0; }

/* ---------- questions ---------- */
.faq { padding-top: var(--space-3xl); }
.faq__list { display: grid; gap: var(--space-sm); max-width: 48rem; }
.qa {
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.qa.is-open { box-shadow: var(--shadow-md); transform: rotate(-0.4deg); }
.qa h3 { margin: 0; }
.qa__q {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  font: 700 clamp(1.02rem, 0.7vw + 0.88rem, 1.3rem)/1.25 var(--font-display);
  color: var(--color-ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-card);
  cursor: pointer;
}
.qa__icon {
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
  transition: transform 360ms var(--ease-out);
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 2.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.is-open .qa__icon { transform: rotate(135deg); }
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-in-out);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}
.qa.is-open .qa__a > div { visibility: visible; transition-delay: 0s; }
.qa__a p { max-width: 36em; margin: 0; padding: 0 var(--space-md) var(--space-md); }

/* ---------- leçon gratuite ---------- */
.band {
  margin-top: var(--space-3xl);
  padding-block: var(--space-3xl);
  background-color: var(--color-sun);
  background-image: radial-gradient(color-mix(in oklab, var(--color-ink) 12%, transparent) 1.5px, transparent 1.6px);
  background-size: 20px 20px;
  border-block: var(--rule) solid var(--color-ink);
}
.band__inner { display: grid; gap: var(--space-lg); align-items: center; justify-items: start; }
.band__badge {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  padding-top: 0.14em;
  font: 800 4.4rem/1 var(--font-display);
  background: var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-7deg);
}
.band .section-title { margin-bottom: 0.4rem; }
.band p { margin: 0; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.3rem); }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled__mark {
  position: absolute;
  max-width: none;
  left: -10%;
  top: -16%;
  width: 120%;
  height: 136%;
  fill: none;
  stroke: var(--color-coral);
  stroke-width: 3.5;
  stroke-linecap: round;
  overflow: visible;
  pointer-events: none;
}

/* ---------- pied de page ---------- */
.foot { padding-block: 0 var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot__marquee {
  overflow: hidden;
  margin-bottom: var(--space-xl);
  padding-block: var(--space-md);
  border-bottom: var(--rule) solid var(--color-ink);
}
.foot__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  animation: marquee 34s linear infinite reverse;
}
.foot__track span {
  font: 800 clamp(2.6rem, 6vw, 5.6rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-shadow: 4px 4px 0 var(--color-sun);
  white-space: nowrap;
}
.foot__track span:nth-of-type(even) {
  color: var(--color-sun);
  text-shadow: 4px 4px 0 var(--color-ink);
}
.foot__track i {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--color-sun);
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  color: var(--color-ink);
  border-bottom: var(--rule) solid var(--color-ink);
}
.foot__name { font: 800 1.15rem/1 var(--font-display); }
.foot__lang b { font-weight: 700; }
.foot p { margin: 0.3rem 0; }
.foot a { color: var(--color-ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- avant l'animation d'ouverture ---------- */
.js-anim [data-intro],
.js-anim .desk__float { opacity: 0; }

/* ---------- survol (souris seulement) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:active) { transform: translate(-2px, -2px); box-shadow: var(--shadow-up); }
  .fact:hover:not(:active) { transform: rotate(var(--tilt)) translate(-2px, -2px); box-shadow: var(--shadow-up); }
  .tab:hover:not([aria-selected="true"]):not(:active) { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
  .opt:hover:not(:active):not([data-state]) { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 0 var(--color-ink); }
  .tile:hover:not(.is-active) { transform: translate(-2px, -2px) rotate(-4deg); box-shadow: var(--shadow-sm); }
  .qa:not(.is-open):hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
  .qa__q:hover .qa__icon { transform: rotate(90deg); }
  .qa.is-open .qa__q:hover .qa__icon { transform: rotate(135deg); }
  .foot a:hover { text-decoration-color: var(--color-coral); }
}

/* ---------- écrans plus larges ---------- */
@media (min-width: 25.5rem) {
  .masthead .btn { display: inline-flex; }
  .map__tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .map__row { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-md); }
  .extras { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .band__inner { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xl); }
  .band__inner .btn { grid-column: 2; }
  .panel__head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .panel__art { width: 12rem; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .tab[aria-selected="true"] { transform: rotate(var(--tilt)); }
  .chooser__grid { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .gallery__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: center;
  }
  .gallery__grid .shot:first-child { grid-row: 1 / span 2; }
  .how-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); }
  .how-row--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .how-row--flip .how-row__text { order: 2; }
  .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); column-gap: var(--space-2xl); align-items: center; }
  .extras { grid-column: 1 / -1; max-width: 52rem; }
  .map { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; }
  .map__tiles { grid-template-columns: repeat(8, 3.6rem); }
  .map__row { grid-template-columns: 7.5rem max-content; }
  .map__caption {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-self: stretch;
    margin: 0 0 0 var(--space-xl);
    padding: 0 0 0 var(--space-xl);
    border-top: 0;
    border-left: 2px dashed color-mix(in oklab, var(--color-ink) 25%, transparent);
  }
  .map__num { grid-row: auto; margin-bottom: var(--space-xs); }
  .band__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .band__inner .btn { grid-column: auto; }
}

@media (min-width: 26rem) {
  .tab__row { flex-wrap: nowrap; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .marquee__track, .foot__track { animation: none !important; }
  .desk__item { transform: rotate(var(--r, 0deg)) !important; }
}

/* =====================================================================
   Passe « détails » : annotations à la main, objets cliquables, sommaire
   ===================================================================== */

/* papier de cahier : lignes très légères et marge rose sur grand écran */
body {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in oklch, var(--color-sky) 28%, transparent) 31px 32px);
}
@media (min-width: 80rem) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 4.5rem;
    width: 2px;
    background: color-mix(in oklch, var(--color-rose) 85%, transparent);
    pointer-events: none;
    z-index: 0;
  }
}

/* barre de lecture : un trait de crayon en haut */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: var(--z-sticky);
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--color-sun);
  border-bottom: var(--rule) solid var(--color-ink);
  border-right: var(--rule) solid var(--color-ink);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* sommaire : une fiche épinglée qui coche les parties lues */
.toc { display: none; }
@media (min-width: 100rem) {
  .toc {
    display: block;
    position: fixed;
    top: 50%;
    right: 1.25rem;
    z-index: var(--z-sticky);
    width: 11.5rem;
    padding: 0.9rem 0.9rem 0.7rem;
    background: var(--color-card);
    border: var(--rule) solid var(--color-ink);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    transform: translateY(-50%) rotate(1.5deg);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }
  .toc::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 64px;
    height: 20px;
    background: color-mix(in oklch, var(--color-rose) 70%, transparent);
    transform: translateX(-50%) rotate(-3deg);
  }
}
.toc__title {
  margin: 0 0 0.4rem;
  font: 700 1.35rem/1 var(--font-hand);
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font: 600 0.8rem/1.2 var(--font-body);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.toc a::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border: var(--rule) solid var(--color-ink);
  border-radius: 4px;
  background: var(--color-card) no-repeat center / 80%;
  transition: background-color var(--dur-short) var(--ease-out);
}
.toc a.is-done { color: var(--color-ink); }
.toc a.is-done::before {
  background-color: var(--color-mint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2326201A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.toc a.is-here { color: var(--color-ink); font-weight: 700; }
.toc a.is-here::after {
  content: "←";
  font: 700 1rem/1 var(--font-hand);
  color: var(--color-coral);
}
.toc a:hover { color: var(--color-ink); }

/* annotations à la main */
.note {
  position: absolute;
  z-index: var(--z-raised);
  margin: 0;
  font: 700 clamp(1.15rem, 0.6vw + 1rem, 1.5rem)/1.05 var(--font-hand);
  color: var(--color-coral);
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(var(--nr, -4deg));
}
.note__arrow {
  display: inline-block;
  width: 3.2rem;
  height: 2rem;
  vertical-align: middle;
  overflow: visible;
}
.note path, .sign path, .note__circle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.on-dark .note { color: var(--color-sun); }

.hero { position: relative; }
.note--desk { left: 46%; bottom: -1.5rem; --nr: -5deg; }
.note--desk .note__arrow { order: -1; transform: scaleY(-1) rotate(-20deg); margin-right: 0.2rem; }

.facts { position: relative; }
.note--facts { right: 0.5rem; bottom: -2.4rem; --nr: 3deg; }

.chooser { position: relative; }
.note--tabs { top: calc(var(--space-3xl) + 0.4rem); right: var(--gutter); --nr: 4deg; }
.note--tabs .note__arrow { transform: rotate(60deg) translateY(4px); }

.how-row__text { position: relative; }
.note--quiz { position: relative; display: inline-block; margin-top: var(--space-md); font-size: 1.6rem; --nr: -3deg; }
.note--quiz .note__arrow { transform: rotate(-10deg); }

.programme { position: relative; }
.note--map { top: calc(var(--space-3xl) + 1rem); right: var(--gutter); --nr: -6deg; }
.note--map .note__arrow { transform: rotate(80deg); }

.printer { position: relative; }
.note--receipt { left: -7rem; bottom: 6.8rem; --nr: -10deg; font-size: 1.9rem; }
.note__circle { position: absolute; inset: -0.6rem -0.9rem; width: calc(100% + 1.8rem); height: calc(100% + 1.2rem); overflow: visible; }

@media (max-width: 59.99rem) {
  .note--desk, .note--tabs, .note--map { display: none; }
  .note--receipt { left: auto; right: 0.5rem; bottom: auto; top: -2.2rem; }
}
@media (max-width: 39.99rem) {
  .note--facts { display: none; }
}

/* signature */
.sign {
  position: relative;
  display: inline-block;
  margin-top: var(--space-md) !important;
  font: 700 2.6rem/1 var(--font-hand);
  color: var(--color-ink);
  transform: rotate(-4deg);
}
.sign svg { position: absolute; left: -4%; bottom: -0.35rem; width: 108%; height: 0.8rem; overflow: visible; }
.sign path { stroke: var(--color-coral); stroke-width: 3; }

/* bouton : la flèche avance au survol */
.btn__arrow {
  display: inline-block;
  margin-left: 0.15em;
  transition: transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arrow { transform: translateX(5px); }
}

/* carnet : on l'ouvre en cliquant */
.desk__notebook, .desk__sheet, .desk__postit, .desk__pencil, .desk__mug, .desk__bubble { cursor: pointer; }
.nb { position: relative; perspective: 900px; }
.nb__cover {
  position: relative;
  z-index: 2;
  transform-origin: 6% 50%;
  transition: transform 700ms var(--ease-in-out);
  backface-visibility: hidden;
}
.nb__page {
  position: absolute;
  inset: 4% 4% 3% 7%;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.35em;
  padding: 12% 10%;
  font-size: clamp(0.6rem, 2.6cqw, 0.95rem);
  background:
    repeating-linear-gradient(to bottom, transparent 0 1.55em, color-mix(in oklch, var(--color-sky) 55%, transparent) 1.55em calc(1.55em + 1px)),
    var(--color-card);
  border: var(--rule) solid var(--color-ink);
  border-radius: 6px 14px 14px 6px;
  box-shadow: var(--shadow-sm);
}
.nb__label { font: 700 0.75em/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.nb__page b { font: 800 1.35em/1.1 var(--font-display); }
.nb__page i { display: block; height: 0.5em; margin-top: 0.6em; border-radius: 3px; background: color-mix(in oklch, var(--color-ink) 16%, transparent); }
.nb__page i:nth-of-type(2) { width: 80%; }
.nb__page i:nth-of-type(3) { width: 60%; }
.nb__hand { margin-top: 0.6em; font: 700 1.5em/1 var(--font-hand); color: var(--color-coral); transform: rotate(-5deg); }
.nb.is-open .nb__cover { transform: rotateY(-155deg); }

/* copie : chaque clic pose un tampon */
.stamp--mini {
  position: absolute;
  font-size: clamp(0.5rem, 2cqw, 0.75rem);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--sr, -10deg));
  animation: mini-slam 360ms var(--ease-out) both;
}
@keyframes mini-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--sr)) scale(2.2); }
  70% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--sr)) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--sr)) scale(1); }
}

/* post-it : le coin se soulève */
.postit { transition: transform 300ms var(--ease-out); transform-origin: 50% 0; }
@media (hover: hover) and (pointer: fine) {
  .desk__postit:hover .postit { transform: rotate(-6deg) skewX(-3deg); }
  .desk__mug:hover .steam path { animation-duration: 1.2s; }
  .desk__pencil:hover .ill { animation: wiggle 500ms var(--ease-out); }
}
@keyframes wiggle { 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }

/* bulle : Claude tape */
.caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--color-ink);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* cases du programme : petit drapeau sur la leçon offerte */
.tile[data-free]::before {
  content: "offerte";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 0.2em 0.45em;
  font: 700 0.95rem/1 var(--font-hand);
  color: var(--color-ink);
  background: var(--color-mint);
  border: 1.5px solid var(--color-ink);
  border-radius: 6px;
  transform: translateX(-50%) rotate(-6deg);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .nb__cover { transition: none; }
  .stamp--mini { animation: none; }
}

/* fil des frictions, sous la liste Construire */
.panel__thread {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--color-coral);
  margin: var(--space-xs) 0 0;
  rotate: -1deg;
}