/* ==========================================================================
   Myrak — page Méthode, tuiles v2
   Chargé après styles.css. Tout est préfixé .m-* pour ne rien casser ailleurs.
   Chaque tuile = une « planche » : barre d'outil + scène à grille de points.
   Les tuiles jouent leur animation une fois quand l'étape arrive à l'écran
   (.is-playing posé par methode.js). Sans JS ou en mouvement réduit,
   l'état final s'affiche directement.
   ========================================================================== */

.process-page{
  --m-blue: var(--primary, #0212EE);
  --m-lemon: var(--interaction, #D7FF3F);
  --m-ink: var(--ink, #241916);
  --m-paper: var(--paper, #f8f7f3);
  --m-chalk: var(--chalk, #fff);
  --m-line: var(--line, #d5d0c7);
  --m-muted: var(--muted, #6b625b);
  --m-pink: #ebe7df; /* neutral (the pink was removed) */
  --m-peer: #cdc7bd;
  --m-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------------ tile shell */
.process-page .process-journey--v3 .journey-step .journey-object.m-tile{
  position: relative;
  z-index: 4;
  width: min(100%, 468px);
  margin: 0;
  justify-self: center;
  align-self: center;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 11%);
  border-radius: 22px;
  background: var(--m-chalk);
  box-shadow:
    0 38px 70px -38px rgb(36 25 22 / 34%),
    0 4px 12px rgb(36 25 22 / 5%);
  transform: none !important;
  rotate: var(--m-tilt, -1.6deg);
  transition: rotate 800ms var(--ease), translate 800ms var(--ease), box-shadow 800ms var(--ease);
}
.process-page .process-journey--v3 .journey-step--right .journey-object.m-tile{ --m-tilt: 1.6deg; }
.process-page .process-journey--v3 .journey-step:hover .journey-object.m-tile,
.process-page .process-journey--v3 .journey-step.is-in-view .journey-object.m-tile{
  rotate: 0deg;
  translate: 0 -6px;
  box-shadow:
    0 46px 80px -40px rgb(36 25 22 / 38%),
    0 4px 12px rgb(36 25 22 / 6%);
}

.m-tile__bar{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid rgb(36 25 22 / 9%);
  background: var(--m-paper);
}
.m-tile__dots{ display: flex; gap: 5px; }
.m-tile__dots i{ width: 8px; height: 8px; border-radius: 50%; background: #e4dfd7; }
.m-tile__label{
  flex: 1;
  color: var(--m-muted);
  font: 500 11px/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-tile__state{
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--m-line);
  transition: background 500ms var(--ease), box-shadow 500ms var(--ease);
}
.m-tile.is-played .m-tile__state{ background: var(--m-blue); box-shadow: inset 0 0 0 1.5px var(--m-blue), 0 0 0 4px rgb(2 18 238 / 10%); }

.m-tile__stage{
  position: relative;
  height: 75cqw;
  overflow: hidden;
  background:
    radial-gradient(circle, rgb(36 25 22 / 13%) 1px, transparent 1.3px) 0 0 / 4.2cqw 4.2cqw,
    #fbfaf7;
}

/* cursors (Auriane, Killermy) — same as the Studio page */
.m-cursor{
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  transition: left 900ms var(--ease), top 900ms var(--ease), opacity 400ms ease;
}
.m-cursor svg{ width: 4.2cqw; min-width: 16px; fill: var(--m-blue); stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(36 25 22 / 25%)); }
.m-cursor b{
  margin: 3.4cqw 0 0 .6cqw;
  padding: .7cqw 1.5cqw;
  border-radius: 7px;
  background: var(--m-blue);
  color: #fff;
  font: 600 max(10px, 2.5cqw)/1 var(--sans);
  white-space: nowrap;
}
.m-cursor--lemon svg{ fill: var(--m-lemon); stroke: var(--m-ink); stroke-width: 1.4; }
.m-cursor--lemon b{ background: var(--m-lemon); color: var(--m-ink); }

/* helpers for the armed / playing states */
.m-tile.m-armed [data-m-in]{ opacity: 0; }
@keyframes m-in{ from{ opacity: 0; translate: 0 2.4cqw; scale: .96; } to{ opacity: 1; translate: 0 0; scale: 1; } }
@keyframes m-pop{ 0%{ opacity: 0; scale: .4; } 70%{ opacity: 1; scale: 1.12; } 100%{ opacity: 1; scale: 1; } }
@keyframes m-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* ==================================================================
   01 · La rencontre — une vraie conversation, puis le brief se remplit
   (mise en page en flux : rien ne se superpose, quelle que soit la langue)
   ================================================================== */
.m-talk{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2.6cqw;
  padding: 5.4cqw 6cqw 6.2cqw;
}
.m-bubble{
  position: relative;
  max-width: 66cqw;
  padding: 2.4cqw 3.2cqw 2.6cqw;
  border-radius: 4.4cqw 4.4cqw 4.4cqw 1.2cqw;
  box-shadow: 0 1.6cqw 3.6cqw -1.8cqw rgb(36 25 22 / 28%);
}
.m-bubble small{
  display: block;
  margin-bottom: .9cqw;
  font: 600 max(9px, 2.2cqw)/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}
.m-bubble p{ margin: 0; font: 500 max(12px, 3.5cqw)/1.24 var(--sans); letter-spacing: -.02em; }
.m-bubble--you{ border: 1px solid rgb(36 25 22 / 12%); background: #fff; color: var(--m-ink); }
.m-talk__reply{ position: relative; align-self: flex-end; }
.m-bubble--us{ border-radius: 4.4cqw 4.4cqw 1.2cqw 4.4cqw; background: var(--m-blue); color: #fff; }
.m-bubble--us small{ color: var(--m-lemon); opacity: 1; }
.m-bubble--typing{
  position: absolute; right: 0; top: 50%;
  display: flex; gap: 1.1cqw;
  padding: 2.4cqw 3cqw;
  border-radius: 4.4cqw 4.4cqw 1.2cqw 4.4cqw;
  background: var(--m-blue);
  box-shadow: none;
  translate: 0 -50%;
  opacity: 0;
}
.m-bubble--typing i{ width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--m-paper); animation: m-typing 900ms ease-in-out infinite; }
.m-bubble--typing i:nth-child(2){ animation-delay: 150ms; }
.m-bubble--typing i:nth-child(3){ animation-delay: 300ms; }
@keyframes m-typing{ 0%, 60%, 100%{ translate: 0 0; opacity: .35; } 30%{ translate: 0 -1cqw; opacity: 1; } }

.m-brief{
  position: relative;
  margin-top: auto;
  width: 58cqw;
  padding: 4.2cqw 3.6cqw 3cqw;
  border: 1px solid rgb(36 25 22 / 12%);
  border-radius: 3cqw;
  background: #fff;
  rotate: -2deg;
  box-shadow: 0 2cqw 4cqw -2.4cqw rgb(36 25 22 / 30%);
}
.m-brief__tab{
  position: absolute;
  top: -2.4cqw; left: 3.4cqw;
  padding: 1cqw 2.2cqw;
  border-radius: 99px;
  background: var(--m-lemon);
  color: var(--m-ink);
  font: 700 max(9px, 2.3cqw)/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-brief ul{ display: grid; gap: 1.7cqw; margin: 0; padding: 0; list-style: none; }
.m-brief li{ display: flex; align-items: center; gap: 2cqw; color: var(--m-ink); font: 500 max(11px, 3cqw)/1.1 var(--sans); letter-spacing: -.01em; }
.m-brief li i{
  position: relative;
  flex: none;
  width: 3.6cqw; height: 3.6cqw;
  border-radius: 50%;
  background: var(--m-blue);
  box-shadow: inset 0 0 0 1.5px var(--m-blue);
}
.m-brief li i::after{
  content: "";
  position: absolute;
  left: 34%; top: 20%;
  width: 26%; height: 44%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.m-tile--talk.m-armed .m-bubble--you,
.m-tile--talk.m-armed .m-bubble--us,
.m-tile--talk.m-armed .m-brief{ opacity: 0; }
.m-tile--talk.m-armed .m-brief li i{ background: transparent; }
.m-tile--talk.m-armed .m-brief li i::after{ opacity: 0; }
.m-tile--talk.is-playing .m-bubble--you{ animation: m-in 700ms var(--ease) 200ms both; }
.m-tile--talk.is-playing .m-bubble--typing{ animation: m-typing-show 1300ms linear 900ms both; }
@keyframes m-typing-show{ 0%{ opacity: 0; scale: .7; } 12%{ opacity: 1; scale: 1; } 88%{ opacity: 1; scale: 1; } 100%{ opacity: 0; scale: .7; } }
.m-tile--talk.is-playing .m-bubble--us{ animation: m-in 700ms var(--m-spring) 2150ms both; }
.m-tile--talk.is-playing .m-brief{ animation: m-in 800ms var(--ease) 2700ms both; }
.m-tile--talk.is-playing .m-brief li i{ animation: m-check-ring 500ms var(--ease) both; }
.m-tile--talk.is-playing .m-brief li i::after{ animation: m-fade 250ms ease both; }
.m-tile--talk.is-playing .m-brief li:nth-child(1) i, .m-tile--talk.is-playing .m-brief li:nth-child(1) i::after{ animation-delay: 3300ms; }
.m-tile--talk.is-playing .m-brief li:nth-child(2) i, .m-tile--talk.is-playing .m-brief li:nth-child(2) i::after{ animation-delay: 3700ms; }
.m-tile--talk.is-playing .m-brief li:nth-child(3) i, .m-tile--talk.is-playing .m-brief li:nth-child(3) i::after{ animation-delay: 4100ms; }
@keyframes m-check-ring{ 0%{ background: transparent; scale: 1; } 50%{ scale: 1.25; } 100%{ background: var(--m-blue); scale: 1; } }

/* ==================================================================
   02 · Le cap — on raye les codes du secteur, on fixe votre cap
   ================================================================== */
.m-cap{ position: absolute; inset: 0; padding: 5cqw 6cqw; }
.m-cap__lab{
  display: block;
  margin-bottom: 2.8cqw;
  color: var(--m-muted);
  font: 600 max(8px, 2.1cqw)/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-cap__codes{ display: flex; flex-wrap: wrap; gap: 2.2cqw 1.8cqw; padding-right: 2cqw; }
.m-cap__code{
  position: relative;
  padding: 1.5cqw 2.8cqw;
  border: 1px solid rgb(36 25 22 / 14%);
  border-radius: 99px;
  background: #fff;
  color: rgb(107 98 91 / 70%);
  font: 500 max(11px, 3.1cqw)/1 var(--sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  rotate: var(--r);
}
.m-cap__strike{ position: absolute; left: -6%; top: 50%; width: 112%; height: 4.4cqw; overflow: visible; translate: 0 -50%; }
.m-cap__strike path{ fill: none; stroke: var(--m-blue); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.m-cap__card{
  position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 4cqw;
  padding: 5.2cqw 4.6cqw 4.4cqw 5cqw;
  border: 1px solid rgb(36 25 22 / 12%);
  border-radius: 3cqw;
  background: #fff;
  rotate: -1.5deg;
  box-shadow: 0 2.4cqw 4.6cqw -2.6cqw rgb(36 25 22 / 34%);
}
.m-cap__tab{
  position: absolute; top: -2.4cqw; left: 3.6cqw;
  padding: 1cqw 2.2cqw;
  border-radius: 99px;
  background: var(--m-blue);
  color: #fff;
  font: 700 max(9px, 2.3cqw)/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-cap__words{ display: grid; gap: .6cqw; }
.m-cap__word{
  display: flex; align-items: baseline;
  color: var(--m-ink);
  font: 700 max(17px, 6cqw)/1 var(--sans);
  letter-spacing: -.055em;
}
.m-cap__word i{ width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--m-ink); }
.m-cap__word:last-child{ color: var(--m-blue); }
.m-cap__word:last-child i{ background: var(--m-blue); }

/* the positioning map: the sector crowds one corner, your dot leaves it and claims free ground */
.m-cap__map{
  position: relative; flex: none;
  width: 22cqw; height: 22cqw; min-width: 64px; min-height: 64px;
  border-radius: 2.4cqw;
  background: radial-gradient(circle, rgb(36 25 22 / 14%) .7px, transparent 1px) 0 0 / 2.75cqw 2.75cqw, #fbfaf7;
  box-shadow: inset 0 0 0 1.5px rgb(36 25 22 / 12%);
}
.m-cap__map::before, .m-cap__map::after{ content: ""; position: absolute; background: rgb(36 25 22 / 18%); }
.m-cap__map::before{ left: 50%; top: 9%; bottom: 9%; width: 1px; }
.m-cap__map::after{ top: 50%; left: 9%; right: 9%; height: 1px; }
.m-cap__them{
  position: absolute; z-index: 1; left: var(--x); top: var(--y);
  width: 2.3cqw; height: 2.3cqw; min-width: 6px; min-height: 6px;
  border-radius: 50%; background: rgb(36 25 22 / 30%);
  translate: -50% -50%;
}
.m-cap__you{
  --x0: 69%; --y0: 34%; --x1: 31%; --y1: 68%;
  position: absolute; z-index: 2; left: var(--x1); top: var(--y1);
  width: 4.2cqw; height: 4.2cqw; min-width: 11px; min-height: 11px;
  border-radius: 50%; background: var(--m-blue);
  box-shadow: 0 0 0 .7cqw #fbfaf7;
  translate: -50% -50%;
}
.m-cap__zone{
  position: absolute; z-index: 1; left: 31%; top: 68%;
  width: 13cqw; height: 13cqw; min-width: 38px; min-height: 38px;
  translate: -50% -50%; overflow: visible;
}
.m-cap__zone circle{ fill: rgb(2 18 238 / 6%); stroke: var(--m-blue); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 4.45; }

.m-tile--cap.m-armed .m-cap__code,
.m-tile--cap.m-armed .m-cap__card,
.m-tile--cap.m-armed .m-cap__word{ opacity: 0; }
.m-tile--cap.m-armed .m-cap__code{ color: var(--m-ink); }
.m-tile--cap.m-armed .m-cap__strike{ clip-path: inset(-50% 100% -50% 0); }
.m-tile--cap.m-armed .m-cap__them,
.m-tile--cap.m-armed .m-cap__you,
.m-tile--cap.m-armed .m-cap__zone{ opacity: 0; }
.m-tile--cap.is-playing .m-cap__code{ animation: m-rise 450ms var(--m-spring) both, m-cap-dim 400ms ease both; animation-delay: calc(150ms + var(--k) * 110ms), calc(1150ms + var(--k) * 170ms); }
.m-tile--cap.is-playing .m-cap__strike{ animation: m-cap-strike 420ms var(--ease) both; animation-delay: calc(1100ms + var(--k) * 170ms); }
@keyframes m-cap-strike{ from{ clip-path: inset(-50% 100% -50% 0); } to{ clip-path: inset(-50% 0 -50% 0); } }
.m-tile--cap.is-playing .m-cap__card{ animation: m-in 800ms var(--ease) 2300ms both; }
.m-tile--cap.is-playing .m-cap__word{ animation: m-rise 500ms var(--m-spring) both; animation-delay: calc(2750ms + var(--k) * 220ms); }
.m-tile--cap.is-playing .m-cap__them{ animation: m-rise 380ms var(--m-spring) both; animation-delay: calc(2600ms + var(--k) * 70ms); }
.m-tile--cap.is-playing .m-cap__you{ animation: m-cap-move 1400ms var(--ease) 3050ms both; }
.m-tile--cap.is-playing .m-cap__zone{ animation: m-cap-zone 650ms var(--m-spring) 4250ms both, m-cap-spin 16s linear 4250ms infinite; }
@keyframes m-cap-dim{ from{ color: var(--m-ink); } to{ color: rgb(107 98 91 / 70%); } }
@keyframes m-cap-move{
  0%{ opacity: 0; left: var(--x0); top: var(--y0); scale: .3; }
  14%{ opacity: 1; scale: 1.15; }
  24%{ left: var(--x0); top: var(--y0); scale: 1; }
  34%{ left: calc(var(--x0) + 4%); top: calc(var(--y0) - 4%); }
  100%{ opacity: 1; left: var(--x1); top: var(--y1); scale: 1; }
}
@keyframes m-cap-zone{ from{ opacity: 0; scale: .3; } to{ opacity: 1; scale: 1; } }
@keyframes m-cap-spin{ to{ rotate: 1turn; } }
@keyframes m-rise{ from{ opacity: 0; scale: .8; } to{ opacity: 1; scale: 1; } }

/* ==================================================================
   03 · L'exploration — trois pistes, on en garde une
   ================================================================== */
.m-deck{ position: absolute; inset: 0; }
.m-card{
  --r: 0deg;
  position: absolute;
  top: 10cqw; left: 35.5cqw;
  display: flex; flex-direction: column;
  width: 29cqw; height: 44cqw;
  padding: 1.6cqw 1.6cqw 0;
  border: 0;
  border-radius: 2.6cqw;
  background: #fff;
  box-shadow: 0 2.6cqw 5cqw -2.6cqw rgb(36 25 22 / 40%), 0 0 0 1px rgb(36 25 22 / 8%);
  color: var(--m-ink);
  cursor: pointer;
  rotate: var(--r);
  transition: left 800ms var(--ease), top 800ms var(--ease), rotate 800ms var(--ease), scale 600ms var(--ease), box-shadow 600ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.m-card[data-m-card="0"]{ --r: -6deg; left: 3.5cqw; top: 14cqw; }
.m-card[data-m-card="1"]{ --r: 0deg; z-index: 2; }
.m-card[data-m-card="2"]{ --r: 6deg; left: 67.5cqw; top: 14cqw; }
.m-card[data-m-card="2"] .m-card__cap{ text-align: right; }
.m-card[aria-pressed="true"]{ z-index: 3; top: 8cqw; scale: 1.06; box-shadow: 0 3.4cqw 6cqw -2.6cqw rgb(2 18 238 / 40%), 0 0 0 1px rgb(36 25 22 / 8%); }
.m-card:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 3px; }
.m-card__art{ position: relative; flex: 1; overflow: hidden; border-radius: 1.4cqw; }
.m-card__cap{
  padding: 1.8cqw .4cqw 2cqw;
  font: 600 max(8px, 2.1cqw)/1 var(--m-mono);
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}
/* vos visuels : un <img> posé dans .m-card__art remplace l'illustration de secours */
.m-card__art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-card__art:has(img) > :not(img){ display: none; }
/* art — Matière */
.m-card--matiere .m-card__art{ background: var(--m-pink); }
.m-art-grid{ position: absolute; left: 12%; top: 10%; width: 48%; height: 40%; rotate: -6deg; background: #fff linear-gradient(rgb(2 18 238 / 25%) 1px, transparent 1px) 0 0 / 100% 18%, #fff linear-gradient(90deg, rgb(2 18 238 / 25%) 1px, transparent 1px) 0 0 / 18% 100%; box-shadow: 0 .8cqw 1.6cqw -.8cqw rgb(36 25 22 / 40%); }
.m-art-wave{ position: absolute; left: 0; bottom: 18%; width: 100%; height: 42%; overflow: visible; }
.m-art-wave path{ fill: none; stroke: var(--m-blue); stroke-width: 9; stroke-linecap: round; }
.m-art-swatch{ position: absolute; right: 12%; top: 16%; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--m-lemon); box-shadow: 0 .8cqw 1.4cqw -.6cqw rgb(36 25 22 / 40%); }
.m-art-stone{ position: absolute; right: 14%; bottom: 8%; width: 11cqw; height: 7cqw; border-radius: 1cqw; background: radial-gradient(circle, rgb(36 25 22 / 35%) .4cqw, transparent .5cqw) 0 0 / 2.2cqw 2.2cqw, #efe9df; rotate: 8deg; }
/* art — Édition */
.m-card--edition .m-card__art{ background: var(--m-lemon); }
.m-art-type{ position: absolute; left: 10%; top: 6%; font: 400 13cqw/1 var(--display); letter-spacing: 0; color: var(--m-ink); }
.m-art-lines{ position: absolute; left: 11%; right: 14%; top: 50%; display: grid; gap: 1.2cqw; }
.m-art-lines i{ display: block; height: 1.2cqw; border-radius: 1cqw; background: var(--m-ink); opacity: .75; }
.m-art-lines i:nth-child(2){ width: 80%; } .m-art-lines i:nth-child(3){ width: 55%; }
.m-art-half{ position: absolute; right: -6cqw; bottom: -6cqw; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--m-blue); }
/* art — Digital */
.m-card--digital .m-card__art{ background: var(--m-blue); }
.m-art-win{ position: absolute; inset: 12% 9% 16%; border: 1.5px solid var(--m-blue); border-radius: 1.6cqw; background: #fff; overflow: hidden; }
.m-art-winbar{ display: flex; gap: .7cqw; height: 4cqw; align-items: center; padding: 0 1.4cqw; border-bottom: 1.5px solid var(--m-blue); }
.m-art-winbar i{ width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--m-blue); }
.m-art-winbar i + i{ background: var(--m-lemon); }
.m-art-dot{ position: absolute; left: 12%; top: 32%; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--m-blue); }
.m-art-pill{ position: absolute; right: 10%; top: 38%; width: 10cqw; height: 3.4cqw; border-radius: 99px; background: var(--m-lemon); }
.m-art-row{ position: absolute; left: 12%; right: 12%; bottom: 12%; height: 1.4cqw; border-radius: 1cqw; background: rgb(2 18 238 / 25%); }

.m-deck__frame{
  position: absolute;
  z-index: 4;
  left: 0; top: 0; width: 0; height: 0;
  border: 2px dashed var(--m-blue);
  border-radius: 3.2cqw;
  pointer-events: none;
  transition: left 800ms var(--ease), top 800ms var(--ease), width 800ms var(--ease), height 800ms var(--ease), rotate 800ms var(--ease), opacity 400ms ease;
}
.m-deck__frame i{ position: absolute; width: 2.2cqw; height: 2.2cqw; border: 2px solid var(--m-blue); background: #fff; }
.m-deck__frame i:nth-child(1){ left: -1.2cqw; top: -1.2cqw; } .m-deck__frame i:nth-child(2){ right: -1.2cqw; top: -1.2cqw; }
.m-deck__frame i:nth-child(3){ left: -1.2cqw; bottom: -1.2cqw; } .m-deck__frame i:nth-child(4){ right: -1.2cqw; bottom: -1.2cqw; }
.m-deck__pick{
  position: absolute;
  z-index: 5;
  left: 0; top: 0;
  display: flex; align-items: center; gap: 1cqw;
  padding: 1.1cqw 2.2cqw;
  border-radius: 99px;
  background: var(--m-lemon);
  color: var(--m-ink);
  font: 700 max(9px, 2.4cqw)/1 var(--sans);
  white-space: nowrap;
  rotate: 6deg;
  box-shadow: 0 1cqw 2cqw -1cqw rgb(36 25 22 / 40%);
  transition: left 800ms var(--ease), top 800ms var(--ease), opacity 300ms ease;
}
.m-deck__pick::before{ content: ""; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--m-blue); }
.m-deck:not(.is-framed) .m-deck__frame, .m-deck:not(.is-framed) .m-deck__pick, .m-deck:not(.is-framed) .m-cursor{ opacity: 0; }

.m-tile--deck.m-armed .m-card{ left: 35.5cqw; top: 14cqw; rotate: 0deg; }
.m-tile--deck.is-playing .m-card{ transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
.m-card[data-m-card="0"]{ --i: 0; } .m-card[data-m-card="2"]{ --i: 2; }

/* ==================================================================
   04 · La construction — la sélection passe de cellule en cellule
   et chaque élément du système s'anime quand on le sélectionne
   (data-active posé par methode.js : 0 typo, 1 forme, 2 couleurs, 3 composant)
   ================================================================== */
.m-sys{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3cqw;
  padding: 5cqw;
}
.m-sys__cell{
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 12%);
  border-radius: 2.6cqw;
  background: #fff;
}
.m-sys__cell small{
  position: absolute;
  left: 2cqw; bottom: 1.8cqw;
  color: var(--m-muted);
  font: 600 max(8px, 2cqw)/1 var(--m-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* typo — la lettre se dessine sur ses lignes de construction */
.m-sys__cell--type{ background: var(--m-lemon); }
.m-sys__cell--type small{ color: var(--m-ink); }
.m-sys__type{ position: relative; display: flex; align-items: baseline; margin-top: -2cqw; color: var(--m-ink); font: 400 12cqw/1 var(--display); letter-spacing: 0; }
.m-sys__type b{ font: inherit; -webkit-text-stroke: 0 transparent; }
.m-sys__guide{ position: absolute; left: -7cqw; right: -7cqw; height: 1px; background: var(--m-blue); opacity: 0; transform-origin: 0 50%; }
.m-sys__guide--cap{ top: 14%; } .m-sys__guide--x{ top: 36%; } .m-sys__guide--base{ top: 87%; }
.m-sys[data-active="0"] .m-sys__guide{ animation: m-sys-guide 1900ms var(--ease) both; }
.m-sys[data-active="0"] .m-sys__guide--x{ animation-delay: 90ms; }
.m-sys[data-active="0"] .m-sys__guide--base{ animation-delay: 180ms; }
.m-sys[data-active="0"] .m-sys__type b{ animation: m-sys-glyph 1500ms var(--ease) both; }
.m-sys[data-active="0"] .m-sys__type b + b{ animation-delay: 160ms; }
@keyframes m-sys-guide{ 0%{ opacity: 0; scale: 0 1; } 20%{ opacity: .7; scale: 1 1; } 78%{ opacity: .7; } 100%{ opacity: 0; scale: 1 1; } }
@keyframes m-sys-glyph{
  0%{ color: transparent; -webkit-text-stroke: 1.5px var(--m-blue); translate: 0 2cqw; opacity: 0; }
  25%{ color: transparent; -webkit-text-stroke: 1.5px var(--m-blue); translate: 0 0; opacity: 1; }
  60%{ color: transparent; -webkit-text-stroke: 1.5px var(--m-blue); }
  100%{ color: var(--m-ink); -webkit-text-stroke: 0 transparent; }
}

/* forme — le tracé se redessine, les poignées se replacent */
.m-sys__cell--curve svg{ width: 58%; margin-top: -2cqw; overflow: visible; }
.m-sys__cell--curve path{ fill: none; stroke: var(--m-ink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.m-sys__h line{ stroke: var(--m-blue); stroke-width: 1.5; }
.m-sys__h circle{ fill: #fff; stroke: var(--m-blue); stroke-width: 2; }
.m-sys__h--a{ transform-box: view-box; transform-origin: 18px 70px; }
.m-sys__h--b{ transform-box: view-box; transform-origin: 82px 32px; }
.m-sys__anchor{ fill: #fff; stroke: var(--m-blue); stroke-width: 3; }
.m-sys[data-active="1"] .m-sys__cell--curve path{ animation: m-draw 1300ms var(--ease) 150ms both; }
.m-sys[data-active="1"] .m-sys__h--a{ animation: m-sys-handle-a 1500ms var(--m-spring) both; }
.m-sys[data-active="1"] .m-sys__h--b{ animation: m-sys-handle-b 1500ms var(--m-spring) 120ms both; }
@keyframes m-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes m-sys-handle-a{ 0%{ transform: rotate(-55deg) scale(.6); } 100%{ transform: none; } }
@keyframes m-sys-handle-b{ 0%{ transform: rotate(50deg) scale(.6); } 100%{ transform: none; } }

/* couleurs — les pastilles tournent, le code suit */
.m-sys__swatches{ --step: 6.6cqw; position: relative; width: calc(9cqw + var(--step) * 2); height: 9cqw; margin-top: -3cqw; }
.m-sys__swatches i{
  --pos: 0;
  position: absolute; top: 0; left: calc(var(--pos) * var(--step));
  z-index: calc(3 - var(--pos));
  width: 9cqw; height: 9cqw;
  border-radius: 50%;
  background: var(--m-blue);
  box-shadow: 0 0 0 .6cqw #fff;
  transition: left 750ms var(--m-spring), scale 750ms var(--m-spring);
}
.m-sys__swatches i:nth-child(2){ --pos: 1; background: var(--m-lemon); }
.m-sys__swatches i:nth-child(3){ --pos: 2; background: var(--m-ink); }
.m-sys[data-active="2"] .m-sys__swatches i{ animation: m-sys-bob 700ms var(--m-spring) both; }
.m-sys[data-active="2"] .m-sys__swatches i:nth-child(2){ animation-delay: 80ms; }
.m-sys[data-active="2"] .m-sys__swatches i:nth-child(3){ animation-delay: 160ms; }
@keyframes m-sys-bob{ 0%{ translate: 0 0; } 40%{ translate: 0 -2.4cqw; } 100%{ translate: 0 0; } }
.m-sys__cell--color code{ position: absolute; right: 2cqw; bottom: 1.8cqw; color: var(--m-blue); font: 600 max(8px, 2cqw)/1 var(--m-mono); transition: color 300ms ease; }
.m-sys__cell--color code.is-ink{ color: var(--m-ink); }
.m-sys[data-active="2"] .m-sys__cell--color code{ animation: m-rise 400ms var(--m-spring) 350ms both; }

/* composant — le curseur clique, le bouton répond */
.m-sys__cell--ui{ background: var(--m-blue); }
.m-sys__cell--ui small{ color: var(--m-paper); }
.m-sys__btn{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 1.8cqw;
  margin-top: -2cqw;
  padding: 1.3cqw 1.3cqw 1.3cqw 2.8cqw;
  border-radius: 99px;
  background: var(--m-paper);
  color: var(--m-blue);
  font: 700 max(10px, 2.9cqw)/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 1.4cqw 2.4cqw -1.2cqw rgb(0 0 0 / 22%);
  transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.m-sys__btn-txt{ display: grid; }
.m-sys__btn-txt > *{ grid-area: 1 / 1; transition: opacity 250ms ease, translate 350ms var(--ease); }
.m-sys__btn-txt .is-alt{ opacity: 0; translate: 0 70%; }
.m-sys__btn i{ width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--m-lemon); transition: background 300ms ease, translate 500ms var(--m-spring); }
.m-sys__ripple{ position: absolute; left: 50%; top: calc(50% - 2cqw); width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--m-paper); opacity: 0; pointer-events: none; }
.m-sys[data-active="3"] .m-sys__btn{ animation: m-sys-press 700ms var(--ease) 650ms both; background: var(--m-lemon); color: var(--m-ink); box-shadow: 0 1.4cqw 2.4cqw -1.2cqw rgb(36 25 22 / 40%); transition-delay: 800ms; }
.m-sys[data-active="3"] .m-sys__btn i{ background: var(--m-blue); translate: .6cqw 0; transition-delay: 800ms; }
.m-sys[data-active="3"] .m-sys__btn-txt > :first-child{ opacity: 0; translate: 0 -70%; transition-delay: 800ms; }
.m-sys[data-active="3"] .m-sys__btn-txt .is-alt{ opacity: 1; translate: 0 0; transition-delay: 800ms; }
.m-sys[data-active="3"] .m-sys__ripple{ animation: m-sys-ripple 800ms ease-out 780ms both; }
@keyframes m-sys-press{ 0%{ scale: 1; } 25%{ scale: .9; } 60%{ scale: 1.06; } 100%{ scale: 1; } }
@keyframes m-sys-ripple{ from{ opacity: .8; scale: .5; } to{ opacity: 0; scale: 2.2; } }

/* sélection + curseur */
.m-sys__frame{
  position: absolute;
  z-index: 5;
  left: 5cqw; top: 5cqw;
  width: calc((100% - 13cqw) / 2); height: calc((100% - 13cqw) / 2);
  border: 2px dashed var(--m-blue);
  border-radius: 2.8cqw;
  pointer-events: none;
  transition: left 650ms var(--ease), top 650ms var(--ease), opacity 300ms ease;
}
.m-sys__frame i{ position: absolute; width: 2cqw; height: 2cqw; border: 2px solid var(--m-blue); background: #fff; }
.m-sys__frame i:nth-child(1){ left: -1.1cqw; top: -1.1cqw; } .m-sys__frame i:nth-child(2){ right: -1.1cqw; top: -1.1cqw; }
.m-sys__frame i:nth-child(3){ left: -1.1cqw; bottom: -1.1cqw; } .m-sys__frame i:nth-child(4){ right: -1.1cqw; bottom: -1.1cqw; }
.m-sys .m-cursor{ --cx: 36cqw; --cy: 27cqw; left: calc(var(--cx) - 1cqw); top: calc(var(--cy) - 1cqw); transition: left 700ms var(--ease), top 700ms var(--ease), opacity 300ms ease; }
.m-sys:not([data-active]) .m-sys__frame, .m-sys:not([data-active]) .m-cursor{ opacity: 0; }
.m-sys[data-active="1"] .m-sys__frame{ left: calc(50% + 1.5cqw); }
.m-sys[data-active="2"] .m-sys__frame{ top: calc(50% + 1.5cqw); }
.m-sys[data-active="3"] .m-sys__frame{ left: calc(50% + 1.5cqw); top: calc(50% + 1.5cqw); border-color: var(--m-paper); }
.m-sys[data-active="1"] .m-cursor{ --cx: 70cqw; --cy: 28cqw; }
.m-sys[data-active="2"] .m-cursor{ --cx: 30cqw; --cy: 57cqw; }
.m-sys[data-active="3"] .m-cursor{ --cx: 84.5cqw; --cy: 53cqw; }
.m-sys .m-cursor b{ transition: opacity 250ms ease; }
.m-sys[data-active="3"] .m-cursor b{ opacity: 0; }
.m-sys[data-active="3"] .m-cursor svg{ animation: m-sys-click 500ms var(--ease) 650ms both; }
@keyframes m-sys-click{ 0%, 100%{ scale: 1; } 40%{ scale: .78; } }

.m-tile--system.m-armed .m-sys__cell{ opacity: 0; }
.m-tile--system.is-playing .m-sys__cell{ animation: m-pop 650ms var(--ease) both; }
.m-tile--system.is-playing .m-sys__cell:nth-child(1){ animation-delay: 200ms; }
.m-tile--system.is-playing .m-sys__cell:nth-child(2){ animation-delay: 380ms; }
.m-tile--system.is-playing .m-sys__cell:nth-child(3){ animation-delay: 560ms; }
.m-tile--system.is-playing .m-sys__cell:nth-child(4){ animation-delay: 740ms; }
.m-tile--system.is-playing .m-sys:not([data-active]) .m-sys__cell--curve path{ animation: m-draw 1200ms var(--ease) 800ms both; }

/* ==================================================================
   05 · Les ajustements — le « m » passe de l'esquisse à la version finale
   ================================================================== */
.m-evo{ --v: 0; --v1: 1; --v2: 0; --v3: 0; position: absolute; inset: 0; display: flex; flex-direction: column; }
.m-evo__canvas{ position: relative; flex: 1; display: grid; place-items: center; }
.m-evo__art{ width: 50cqw; height: auto; overflow: visible; }
.m-evo__v1{ opacity: var(--v1); }
.m-evo__v1 use, .m-evo__v1 circle{ fill: none; stroke: var(--m-ink); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-evo__v1 use:nth-child(1){ opacity: .28; } .m-evo__v1 use:nth-child(2){ opacity: .4; } .m-evo__v1 use:nth-child(3){ opacity: .8; stroke-dasharray: none; stroke-width: 1.8; }
.m-evo__v2{ opacity: var(--v2); }
.m-evo__guides line, .m-evo__guides circle{ fill: none; stroke: var(--m-blue); stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.m-evo__v2 > use, .m-evo__v2 > circle{ fill: rgb(2 18 238 / 6%); stroke: var(--m-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.m-evo__handles circle{ fill: #fff; stroke: var(--m-blue); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.m-evo__v3{ opacity: var(--v3); }
.m-evo__m{ fill: #0212EE; }
.m-evo__dot{ fill: #D7FF40; }
.m-evo__version{
  position: absolute; left: 4.4cqw; top: 4cqw;
  padding: 1cqw 2cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(36 25 22 / 12%);
  color: var(--m-ink);
  font: 700 max(9px, 2.3cqw)/1 var(--m-mono);
  letter-spacing: .06em;
}
.m-evo[data-stage="2"] .m-evo__version{ background: var(--m-lemon); box-shadow: none; }
.m-evo__bar{ display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; padding: 0 5cqw; }
.m-evo__status{ margin: 0; display: flex; align-items: baseline; gap: 1.6cqw; }
.m-evo__status strong{ color: var(--m-blue); font: 700 max(13px, 3.8cqw)/1 var(--sans); letter-spacing: -.03em; }
.m-evo__status span{ white-space: nowrap; color: var(--m-muted); font: 600 max(8px, 2.1cqw)/1 var(--m-mono); letter-spacing: .07em; text-transform: uppercase; }
.m-evo__hint{ position: absolute; right: 4.4cqw; top: 3.6cqw; margin: 0; rotate: -3deg; color: var(--m-muted); font: 400 max(12px, 3.4cqw)/1 var(--hand); white-space: nowrap; }
/* the rail is a segmented pill: three steps written inside it, and a blue pill that slides under them.
   .m-evo__track stays an invisible line between the first and last thumb centres : methode.js maps the
   pointer onto it, so dragging lines up with the thumb. */
.m-evo__rail{
  --pad: 1cqw; --tw: calc((100% - 2 * var(--pad)) / 3);
  position: relative;
  height: max(36px, 10.5cqw);
  margin: 1.4cqw 5cqw 4.4cqw;
  border-radius: 99px;
  background: #f1efe9;
  box-shadow: inset 0 0 0 1px rgb(36 25 22 / 9%), inset 0 1px 2px rgb(36 25 22 / 6%);
  touch-action: none;
  cursor: pointer;
}
.m-evo__track{ position: absolute; left: calc(var(--pad) + var(--tw) / 2); right: calc(var(--pad) + var(--tw) / 2); top: 50%; height: 0; }
.m-evo__fill{ display: none; }
.m-evo__handle{
  position: absolute; z-index: 1;
  left: calc(var(--pad) + (100% - 2 * var(--pad) - var(--tw)) * var(--v));
  top: var(--pad); bottom: var(--pad);
  width: var(--tw);
  padding: 0; border: 0;
  border-radius: 99px;
  background: var(--m-blue);
  box-shadow: 0 1px 0 rgb(255 255 255 / 25%) inset, 0 .8cqw 1.8cqw -.8cqw rgb(2 18 238 / 60%);
  cursor: grab;
  touch-action: none;
  transition: scale 300ms var(--m-spring);
}
.m-evo__handle:active, .m-evo.is-dragging .m-evo__handle{ cursor: grabbing; scale: 1.04; }
.m-evo__handle:focus-visible{ outline: 2px solid var(--m-ink); outline-offset: 3px; }
.m-evo__stop{
  position: absolute; z-index: 2;
  left: calc(var(--pad) + var(--tw) * var(--at) * 2);
  top: var(--pad); bottom: var(--pad); width: var(--tw);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 99px; background: none;
  color: var(--m-muted);
  font: 700 max(8.5px, 2.2cqw)/1 var(--m-mono); letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none; /* the rail takes every press: a tap on a label slides there, a drag follows the finger */
  transition: color 250ms ease;
}
.m-evo__stop span{ white-space: nowrap; }
.m-evo__stop[aria-current="step"]{ color: #fff; }
.m-evo__stop:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; }

/* ==================================================================
   06 · La transmission — le site se construit pendant le chargement
   ================================================================== */
.m-live{ --p: 1; position: absolute; inset: 0; }
.m-live__win{
  position: absolute; left: 6cqw; right: 6cqw; top: 5cqw;
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 12%);
  border-radius: 2.6cqw;
  background: #fff;
  box-shadow: 0 2.4cqw 4.6cqw -2.6cqw rgb(36 25 22 / 34%);
}
.m-live__winbar{ position: relative; display: flex; align-items: center; gap: 1cqw; height: 6.4cqw; padding: 0 2.4cqw; border-bottom: 1px solid rgb(36 25 22 / 9%); background: var(--m-paper); }
.m-live__winbar > i{ width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #e4dfd7; }
.m-live__winbar span{ margin-left: 1.6cqw; padding: .8cqw 2.4cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgb(36 25 22 / 9%); color: var(--m-muted); font: 500 max(8px, 2.1cqw)/1 var(--m-mono); white-space: nowrap; }
.m-live__winbar em{ color: var(--m-blue); font-style: normal; }
.m-live__pct{ margin-left: auto; color: var(--m-blue); font: 700 max(8px, 2.1cqw)/1 var(--m-mono); font-variant-numeric: tabular-nums; }
.m-live__load{ position: absolute; left: 0; bottom: -1px; width: calc(var(--p) * 100%); height: 2px; background: var(--m-blue); transition: opacity 500ms ease 300ms; }
.m-live.is-live .m-live__load{ opacity: 0; }

.m-live__site{ position: relative; height: 35cqw; padding: 3cqw 4cqw; }
.m-live__nav{ display: flex; align-items: center; gap: 1.6cqw; }
.m-live__logo{ display: flex; align-items: center; gap: .6cqw; }
.m-live__logo::before{ content: ""; width: 9cqw; height: 2.2cqw; border-radius: 99px; background: var(--m-ink); transition: background 400ms ease; }
.m-live__logo i{ width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--m-blue); transition: background 400ms ease; }
.m-live__nav > i{ width: 6cqw; height: 1.6cqw; border-radius: 99px; background: rgb(36 25 22 / 22%); transition: background 400ms ease; }
.m-live__nav > i:first-of-type{ margin-left: auto; }
.m-live__hero{ display: grid; justify-items: start; gap: 2cqw; width: 58%; margin-top: 5cqw; }
.m-live__title{ border-radius: 1cqw; color: var(--m-ink); font: 700 max(17px, 6.4cqw)/.95 var(--sans); letter-spacing: -.06em; transition: color 400ms ease, background 400ms ease; }
.m-live__lines{ display: grid; gap: 1.2cqw; width: 100%; }
.m-live__lines i{ height: 1.3cqw; border-radius: 99px; background: rgb(36 25 22 / 20%); transition: background 400ms ease; }
.m-live__lines i + i{ width: 72%; }
.m-live__cta{ display: flex; align-items: center; justify-content: flex-end; width: 16cqw; height: 5cqw; padding: 0 1.1cqw; border-radius: 99px; background: var(--m-lemon); transition: background 400ms ease; }
.m-live__visual{ position: absolute; right: 5cqw; bottom: 4cqw; width: 21cqw; height: 21cqw; border-radius: 50%; background: var(--m-blue); transition: background 400ms ease, scale 600ms var(--m-spring); }
.m-live__cta i{ width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--m-blue); transition: background 400ms ease; }

/* skeleton while loading (only when the tile is armed by JS) */
.m-tile--live.m-armed .m-live__logo:not(.is-on)::before,
.m-tile--live.m-armed .m-live__logo:not(.is-on) i,
.m-tile--live.m-armed .m-live__nav > i:not(.is-on),
.m-tile--live.m-armed .m-live__lines i:not(.is-on),
.m-tile--live.m-armed .m-live__cta:not(.is-on),
.m-tile--live.m-armed .m-live__cta:not(.is-on) i,
.m-tile--live.m-armed .m-live__visual:not(.is-on){ background: #efebe4; }
.m-tile--live.m-armed .m-live__visual:not(.is-on){ scale: .9; }
.m-tile--live.m-armed .m-live__title:not(.is-on){ color: transparent; background: #efebe4; }

.m-live__checks{ position: absolute; left: 7cqw; bottom: 5cqw; display: grid; gap: 1.8cqw; margin: 0; padding: 0; list-style: none; }
.m-live__checks li{ display: flex; align-items: center; gap: 1.8cqw; color: var(--m-ink); font: 500 max(11px, 3cqw)/1 var(--sans); }
.m-live__checks li i{ position: relative; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--m-blue); box-shadow: inset 0 0 0 1.5px var(--m-blue); transition: background 400ms var(--ease); }
.m-live__checks li i::after{ content: ""; position: absolute; left: 34%; top: 20%; width: 26%; height: 44%; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; transition: opacity 300ms ease; }
.m-live__pill{
  position: absolute; right: 7cqw; bottom: 5.4cqw;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.8cqw 3.2cqw 1.8cqw 2.4cqw;
  border-radius: 99px;
  background: var(--m-lemon);
  color: var(--m-ink);
  font: 700 max(11px, 3.2cqw)/1 var(--sans);
  box-shadow: 0 1.6cqw 3cqw -1.6cqw rgb(36 25 22 / 45%);
  rotate: -4deg;
}
.m-live__pill i{ position: relative; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--m-blue); }
.m-live__pill i::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--m-blue); animation: m-ping 1600ms ease-out infinite; }
@keyframes m-ping{ from{ opacity: .6; scale: 1; } to{ opacity: 0; scale: 2.6; } }
.m-tile--live.m-armed .m-live{ --p: 0; }
.m-tile--live.m-armed .m-live__checks li:not(.is-done) i{ background: transparent; }
.m-tile--live.m-armed .m-live__checks li:not(.is-done) i::after{ opacity: 0; }
.m-tile--live.m-armed .m-live__pill{ opacity: 0; scale: .5; }
.m-live.is-live .m-live__pill{ animation: m-pop 650ms var(--m-spring) both; opacity: 1; scale: 1; }

/* ==================================================================
   Hero — « Du sens. Puis la forme. » monté comme une planche :
   capsule typo, capsule tracé, « forme. » sélectionnée par Auriane
   ================================================================== */
.process-page .method-line-hero h1.m-hero-title{
  grid-column: 1 / 13;
  margin-top: 70px;
  font-size: clamp(4.4rem, 8.4vw, 9.6rem);
  line-height: 1.04;
}
.process-page .method-line-hero h1.m-hero-title .m-hl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .16em;
  white-space: nowrap;
}
.process-page .method-line-hero h1.m-hero-title .m-hl--2{ justify-content: flex-end; margin-top: .04em; padding-right: .75em; color: var(--primary); }
.process-page .method-line-hero h1.m-hero-title .m-hw{ display: inline-block; }
.process-page .method-line-hero h1.m-hero-title .m-hl--2 .m-hw{ color: var(--primary); }

.process-page .method-line-hero h1.m-hero-title .m-hcap{
  --r: -7deg;
  display: inline-flex; align-items: center; justify-content: center;
  height: .64em;
  border-radius: 99px;
  rotate: var(--r);
  box-shadow: 0 .09em .16em -.1em rgb(36 25 22 / 45%);
}
.m-hcap--aa{ width: 1.08em; background: var(--interaction); }
.m-hcap--aa b{ color: var(--ink); font: 400 .4em/1 var(--display); letter-spacing: 0; }
.process-page .method-line-hero h1.m-hero-title .m-hcap--curve{ --r: 5deg; width: 1.3em; background: #fff; box-shadow: inset 0 0 0 1px rgb(36 25 22 / 12%), 0 .09em .16em -.1em rgb(36 25 22 / 45%); }
.m-hcap--curve svg{ width: 78%; overflow: visible; }
.m-hc__path{ fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; }
.m-hc__h line{ stroke: var(--primary); stroke-width: 1.6; }
.m-hc__h circle, .m-hc__anchor{ fill: #fff; stroke: var(--primary); stroke-width: 2.2; }
.m-hc__h--a{ transform-box: view-box; transform-origin: 14px 46px; }
.m-hc__h--b{ transform-box: view-box; transform-origin: 106px 14px; }

.process-page .method-line-hero h1.m-hero-title .m-hsel{ position: relative; display: inline-block; padding: 0 .05em; }
.m-hsel::before{
  content: "";
  position: absolute; inset: .02em -.04em -.06em;
  border: max(2px, .016em) dashed var(--primary);
  border-radius: .05em;
  pointer-events: none;
  transform-origin: 0 0;
}
.m-hsel > i{ position: absolute; width: .085em; height: .085em; min-width: 9px; min-height: 9px; border: max(2px, .014em) solid var(--primary); background: #fff; translate: -50% -50%; }
.m-hsel > i:nth-of-type(1){ left: -.04em; top: .02em; }
.m-hsel > i:nth-of-type(2){ left: calc(100% + .04em); top: .02em; }
.m-hsel > i:nth-of-type(3){ left: -.04em; top: calc(100% + .06em); }
.m-hsel > i:nth-of-type(4){ left: calc(100% + .04em); top: calc(100% + .06em); }
.process-page .method-line-hero h1.m-hero-title .m-hcursor{
  position: absolute; left: calc(100% + .02em); top: calc(100% + .04em);
  display: flex;
  width: max-content;
  z-index: 2;
  letter-spacing: 0;
}
.m-hcursor svg{ flex: none; width: clamp(18px, 1.7vw, 26px); min-width: 0; }
.process-page .method-line-hero h1.m-hero-title .m-hcursor b{ display: block; margin: clamp(18px, 1.9vw, 28px) 0 0 4px; padding: 5px 9px; border-radius: 7px; font: 600 clamp(11px, .95vw, 14px)/1 var(--sans); letter-spacing: 0; }

.process-page .method-line-hero h1.m-hero-title .m-hwrap{ display: inline-flex; align-items: baseline; }
.process-page .method-line-hero h1.m-hero-title .m-hdot{
  display: inline-block;
  width: .17em; height: .17em;
  margin-left: .045em;
  border-radius: 50%;
  background: var(--primary);
}
.process-page .method-line-hero h1.m-hero-title .m-hsel .m-hdot{ margin-right: .02em; }

/* the dot of « forme » drops onto the page's line */
.process-page .method-line-hero .m-hwire{ position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.m-hwire__line{ fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 11; }
.m-hwire__reveal{ fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; }
.process-page .method-line-hero .m-hdrop{
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 6px 14px -6px rgb(2 18 238 / 70%);
  offset-rotate: 0deg;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 760px){
  .process-page .method-line-hero .m-hwire, .process-page .method-line-hero .m-hdrop{ display: none; }
}

/* the step index under the intro */
.process-page .m-hsteps{ grid-column: 8 / 13; display: grid; grid-template-columns: repeat(3, max-content); gap: 7px; margin-top: 26px; }
.process-page .m-hsteps a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgb(36 25 22 / 13%);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font: 600 13px/1 var(--sans);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background 250ms ease, translate 350ms var(--ease), border-color 250ms ease;
}
.process-page .m-hsteps a b{
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--primary);
  color: var(--primary);
  font: 700 10px/1 var(--m-mono);
  transition: background 250ms ease, color 250ms ease;
}
.process-page .m-hsteps a:hover, .process-page .m-hsteps a:focus-visible{ background: var(--interaction); border-color: transparent; translate: 0 -2px; }
.process-page .m-hsteps a:hover b, .process-page .m-hsteps a:focus-visible b{ background: var(--primary); color: #fff; }
.process-page .m-hsteps a:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

/* entrance */
@media (prefers-reduced-motion: no-preference){
  .m-hero-title .m-hw{ animation: m-hero-rise 900ms var(--ease) both; }
  .m-hl--1 .m-hw{ animation-delay: 80ms; }
  .m-hl--2 > .m-hw{ animation-delay: 340ms; }
  .m-hsel .m-hw{ animation-delay: 520ms; }
  .m-hero-title .m-hdot{ animation: m-pop 500ms var(--m-spring) both; }
  .m-hl--1 .m-hdot{ animation-delay: 560ms; }
  .m-hsel .m-hdot{ animation-delay: 1000ms; }
  .m-hero-title .m-hdot.is-kick{ animation: m-hero-kick 520ms var(--m-spring) both; }
  .m-hero-title .m-hcap{ animation: m-hero-cap 950ms var(--m-spring) both, m-hero-float 6s ease-in-out 2.4s infinite; }
  .m-hcap--aa{ animation-delay: 640ms, 2.4s !important; }
  .m-hcap--curve{ animation-delay: 860ms, 3.1s !important; }
  .m-hc__path{ animation: m-draw 1100ms var(--ease) 1150ms both; }
  .m-hc__h--a{ animation: m-sys-handle-a 1300ms var(--m-spring) 1250ms both; }
  .m-hc__h--b{ animation: m-sys-handle-b 1300ms var(--m-spring) 1350ms both; }
  .m-hsel::before{ animation: m-hero-frame 700ms var(--ease) 1250ms both, m-hero-stretch 5.5s var(--ease) 3.4s infinite; }
  .m-hsel > i{ animation: m-pop 450ms var(--m-spring) both; }
  .m-hsel > i:nth-of-type(1){ animation-delay: 1450ms; } .m-hsel > i:nth-of-type(2){ animation-delay: 1530ms; }
  .m-hsel > i:nth-of-type(3){ animation-delay: 1610ms; }
  .m-hsel > i:nth-of-type(4){ animation: m-pop 450ms var(--m-spring) 1690ms both, m-hero-drag-h 5.5s var(--ease) 3.4s infinite; }
  .m-hero-title .m-hcursor{ animation: m-hero-cursor 1100ms var(--ease) 1800ms both, m-hero-drag 5.5s var(--ease) 3.4s infinite; }
  .process-page .m-hsteps a{ animation: m-hero-rise 600ms var(--ease) both; animation-delay: calc(1300ms + var(--k) * 70ms); }
}
@keyframes m-hero-kick{ 0%{ scale: 1; } 35%{ scale: 1.35 .7; translate: 0 .03em; } 70%{ scale: .9 1.15; translate: 0 -.04em; } 100%{ scale: 1; translate: 0 0; } }
@keyframes m-hero-rise{ from{ opacity: 0; translate: 0 .35em; } to{ opacity: 1; translate: 0 0; } }
@keyframes m-hero-cap{ from{ opacity: 0; scale: .2; rotate: 40deg; } to{ opacity: 1; scale: 1; rotate: var(--r); } }
@keyframes m-hero-float{ 0%, 100%{ translate: 0 0; } 50%{ translate: 0 -.035em; } }
@keyframes m-hero-frame{ from{ opacity: 0; scale: 1.12; } to{ opacity: 1; scale: 1; } }
@keyframes m-hero-cursor{ from{ opacity: 0; translate: 3em 1.4em; } to{ opacity: 1; translate: 0 0; } }
@keyframes m-hero-drag{ 0%, 55%, 100%{ translate: 0 0; } 70%, 82%{ translate: .1em .05em; } }
@keyframes m-hero-stretch{ 0%, 55%, 100%{ scale: 1; } 70%, 82%{ scale: 1.035 1.06; } }
@keyframes m-hero-drag-h{ 0%, 55%, 100%{ translate: -50% -50%; } 70%, 82%{ translate: calc(-50% + .1em) calc(-50% + .05em); } }

@media (max-width: 620px){
  .process-page .method-line-hero h1.m-hero-title{ margin-top: 0; line-height: 1.04 !important; }
  /* Long translated phrases need a smaller scale, never compressed tracking. */
  html:is([lang="en"], [lang="de"]) .process-page .method-line-hero h1.m-hero-title{ font-size: clamp(2.2rem, 11vw, 4rem) !important; }
  .process-page .method-line-hero h1.m-hero-title .m-hl--2{ padding-right: 0; }
  .process-page .method-line-hero h1.m-hero-title .m-hl--2{ justify-content: flex-start; row-gap: .08em; }
  .process-page .method-line-hero h1.m-hero-title .m-hcursor b{ display: none; }
  .process-page .m-hsteps{ margin-top: 30px; grid-template-columns: repeat(2, max-content); }
  .process-page .m-hsteps a{ font-size: 13px; }
}

/* ------------------------------------------------------------------ step numbers, cleaner */
.process-page .process-journey--v3 .journey-number{
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgb(36 25 22 / 28%);
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: color 600ms var(--ease), -webkit-text-stroke-color 600ms var(--ease);
}
.process-page .process-journey--v3 .journey-step.is-in-view .journey-number{
  color: var(--m-blue) !important;
  -webkit-text-stroke-color: var(--m-blue);
}
.process-page .process-journey--v3 .journey-number::before,
.process-page .process-journey--v3 .journey-number::after{ content: none !important; }


/* ==================================================================
   Ce qui ne change jamais — trois planches, même langage que les tuiles
   ================================================================== */
.process-page .m-constants{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 88px);
}
.process-page .m-const{
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 11%);
  border-radius: 22px;
  background: var(--m-chalk);
  box-shadow: 0 38px 70px -40px rgb(36 25 22 / 30%), 0 4px 12px rgb(36 25 22 / 4%);
  transition: translate 700ms var(--ease), box-shadow 700ms var(--ease);
}
.process-page .m-const:nth-child(2){ margin-top: 44px; }
.process-page .m-const:hover{ translate: 0 -6px; box-shadow: 0 46px 80px -40px rgb(36 25 22 / 36%), 0 4px 12px rgb(36 25 22 / 6%); }
.m-const__stage{
  position: relative;
  height: 46cqw;
  overflow: hidden;
  border-bottom: 1px solid rgb(36 25 22 / 8%);
  background: radial-gradient(circle, rgb(36 25 22 / 13%) 1px, transparent 1.3px) 0 0 / 18px 18px, #fbfaf7;
}
.m-const__body{ padding: 26px 26px 30px; }
.process-page .m-const__body strong{
  display: block;
  max-width: 11ch;
  margin: 0 0 14px;
  color: var(--m-ink);
  font: 700 clamp(1.6rem, 2.3vw, 2.3rem)/.98 var(--sans);
  letter-spacing: -.055em;
}
.process-page .m-const__body p{ max-width: 30ch; margin: 0; color: var(--m-muted); font-size: 16px; line-height: 1.5; }

/* 01 · on vous écoute — vos mots arrivent, le point les reçoit */
.m-c1{ position: absolute; inset: 0; }
.m-c1__memo{
  position: absolute; left: 50%; top: 40%;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 2.2cqw 3.6cqw 2.2cqw 2.2cqw;
  border: 1px solid rgb(36 25 22 / 10%);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 2.4cqw 4.6cqw -2.6cqw rgb(36 25 22 / 32%);
  translate: -50% -50%;
  rotate: -2deg;
}
.m-c1__play{ position: relative; flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--m-blue); }
.m-c1__play::after{ content: ""; position: absolute; left: 38%; top: 30%; width: 32%; height: 40%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.m-c1__wave{ display: flex; align-items: center; gap: .9cqw; height: 12cqw; }
.m-c1__wave i{ width: 1.3cqw; height: calc(var(--h) * .9cqw); border-radius: 99px; background: var(--m-blue); transform-origin: 50% 50%; }
.m-c1__time{ color: var(--m-muted); font: 600 max(9px, 2.5cqw)/1 var(--m-mono); font-variant-numeric: tabular-nums; }
.m-c1__arrow{ position: absolute; left: 50%; top: 58%; width: 13cqw; overflow: visible; }
.m-c1__arrow path{ fill: none; stroke: var(--m-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.m-c1 + .m-c1__note{ position: absolute; left: calc(50% + 14cqw); top: 72%; color: var(--m-blue); font: 400 max(15px, 5.6cqw)/1 var(--hand); rotate: -6deg; white-space: nowrap; }
.m-tile--listen.m-armed .m-c1__memo, .m-tile--listen.m-armed .m-c1__note{ opacity: 0; }
.m-tile--listen.m-armed .m-c1__wave i{ background: rgb(36 25 22 / 18%); }
.m-tile--listen.m-armed .m-c1__arrow path{ stroke-dashoffset: 1; }
.m-tile--listen.is-playing .m-c1__memo{ animation: m-rise 600ms var(--m-spring) 200ms both; }
.m-tile--listen.is-playing .m-c1__wave i{ animation: m-c1-play 260ms linear both, m-c1-talk 700ms ease-in-out 3 alternate; animation-delay: calc(700ms + var(--k) * 110ms), calc(700ms + var(--k) * 60ms); }
.m-tile--listen.is-playing .m-c1__arrow path{ animation: m-draw 600ms var(--ease) 2700ms both; }
.m-tile--listen.is-playing .m-c1__note{ animation: m-in 600ms var(--ease) 3000ms both; }
@keyframes m-c1-play{ from{ background: rgb(36 25 22 / 18%); } to{ background: var(--m-blue); } }
@keyframes m-c1-talk{ from{ scale: 1 1; } to{ scale: 1 1.5; } }

/* 02 · un chemin lisible — les étapes s'allument une à une */
.m-c2{ position: absolute; inset: 0 3cqw; }
.m-c2__line{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-c2__line path{ fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-c2__base{ stroke: rgb(36 25 22 / 28%); stroke-width: 2; stroke-dasharray: 2 7; }
.m-c2__done{ stroke: var(--m-blue); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: .12; }
.m-c2__stop{
  position: absolute; left: var(--x); top: var(--y);
  width: 5cqw; height: 5cqw;
  border-radius: 50%;
  background: var(--m-blue);
  box-shadow: 0 0 0 1.4cqw #fbfaf7;
  translate: -50% -50%;
}
.m-c2__stop--next{ width: 7cqw; height: 7cqw; background: var(--m-lemon); box-shadow: 0 0 0 1.4cqw #fbfaf7, inset 0 0 0 2px var(--m-ink); }
.m-c2__tag{
  position: absolute; left: var(--x); top: var(--y);
  padding: 1.2cqw 2.2cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(36 25 22 / 12%);
  color: var(--m-ink);
  font: 600 max(9px, 2.9cqw)/1 var(--m-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% calc(-100% - 5cqw);
}
.m-c2__tag--down{ translate: -50% 5cqw; }
.m-c2__tag:last-of-type{ translate: -88% calc(-100% - 6cqw); }
.m-tile--path.m-armed .m-c2__done{ stroke-dashoffset: 1; }
.m-tile--path.m-armed .m-c2__stop:not([style*="--k:0"]){ background: #fff; box-shadow: 0 0 0 1.4cqw #fbfaf7, inset 0 0 0 2px var(--m-blue); }
.m-tile--path.m-armed .m-c2__tag{ opacity: 0; }
.m-tile--path.is-playing .m-c2__done{ animation: m-c2-draw 2400ms var(--ease) 300ms both; }
.m-tile--path.is-playing .m-c2__stop{ animation: m-c2-on 400ms var(--m-spring) both; animation-delay: calc(300ms + var(--k) * 700ms); }
.m-tile--path.is-playing .m-c2__tag{ animation: m-rise 500ms var(--ease) both; animation-delay: calc(450ms + var(--k) * 700ms); }
@keyframes m-c2-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: .12; } }
@keyframes m-c2-on{
  from{ background: #fff; box-shadow: 0 0 0 1.4cqw #fbfaf7, inset 0 0 0 2px var(--m-blue); scale: .7; }
  to{ background: var(--m-blue); box-shadow: 0 0 0 1.4cqw #fbfaf7; scale: 1; }
}
@keyframes m-c2-next{
  from{ background: #fff; box-shadow: 0 0 0 1.4cqw #fbfaf7, inset 0 0 0 2px var(--m-blue); scale: .7; }
  to{ background: var(--m-lemon); box-shadow: 0 0 0 1.4cqw #fbfaf7, inset 0 0 0 2px var(--m-ink); scale: 1; }
}
.m-tile--path.is-playing .m-c2__stop--next{ animation-name: m-c2-next; }

/* 03 · on soigne ce qui compte — le superflu s'en va, on garde le point */
.m-c3{ position: absolute; inset: 0; }
.m-c3__crumb{
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw);
  border-radius: 50%;
  background: var(--m-peer);
  translate: -50% -50%;
}
.m-c3__keep{
  position: absolute; left: 50%; top: 50%;
  width: 14cqw; height: 14cqw;
  border-radius: 50%;
  background: var(--m-lemon);
  box-shadow: inset 0 0 0 2px var(--m-ink);
  translate: -50% -50%;
}
.m-c3__frame{
  position: absolute; left: 50%; top: 50%;
  width: 24cqw; height: 24cqw;
  border: 2px dashed var(--m-blue);
  border-radius: 3cqw;
  translate: -50% -50%;
}
.m-c3__frame i{ position: absolute; width: 2.8cqw; height: 2.8cqw; border: 2px solid var(--m-blue); background: #fff; }
.m-c3__frame i:nth-child(1){ left: -1.6cqw; top: -1.6cqw; } .m-c3__frame i:nth-child(2){ right: -1.6cqw; top: -1.6cqw; }
.m-c3__frame i:nth-child(3){ left: -1.6cqw; bottom: -1.6cqw; } .m-c3__frame i:nth-child(4){ right: -1.6cqw; bottom: -1.6cqw; }
.m-c3 + .m-c3__note{
  position: absolute; left: calc(50% + 15cqw); top: calc(50% - 17cqw);
  color: var(--m-blue);
  font: 400 max(14px, 5cqw)/1 var(--hand);
  rotate: -8deg;
  white-space: nowrap;
}
/* final state: the crumbs are gone */
.m-tile--care .m-c3__crumb{ opacity: 0; scale: 0; }
.m-tile--care.m-armed .m-c3__crumb{ opacity: 1; scale: 1; }
.m-tile--care.m-armed .m-c3__frame, .m-tile--care.m-armed .m-c3__note{ opacity: 0; }
.m-tile--care.is-playing .m-c3__crumb{ animation: m-c3-out 450ms var(--ease) both; animation-delay: calc(500ms + var(--k) * 180ms); }
.m-tile--care.is-playing .m-c3__keep{ animation: m-c3-keep 700ms var(--m-spring) 1900ms both; }
.m-tile--care.is-playing .m-c3__frame{ animation: m-c3-frame 700ms var(--ease) 2000ms both; }
.m-tile--care.is-playing .m-c3__note{ animation: m-in 600ms var(--ease) 2500ms both; }
@keyframes m-c3-out{ from{ opacity: 1; scale: 1; } to{ opacity: 0; scale: 0; } }
@keyframes m-c3-keep{ 0%{ scale: 1; } 40%{ scale: 1.2; } 100%{ scale: 1; } }
@keyframes m-c3-frame{ from{ opacity: 0; scale: 1.5; } to{ opacity: 1; scale: 1; } }

@media (max-width: 900px){
  .process-page .m-constants{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .process-page .m-const:nth-child(2){ margin-top: 0; }
}

/* Editorial titles follow the card width rather than the old narrow measures. */
.process-page .process-journey--v3 .journey-copy h2{
  max-width: none;
  font-size: clamp(2rem,4vw,4.5rem);
}
.process-page .method-constants--integrated h2{
  max-width: none;
  font-size: clamp(2.5rem,7.2vw,8rem);
}
.process-page .method-constants-heading .method-title-line,
.process-page .method-constants-heading .method-title-ending{
  display: block;
  width: max-content;
  white-space: nowrap;
}
.process-page .method-title-ending > span{ color: inherit; }

/* ------------------------------------------------------------------ step 03: same grid as the other steps
   (the old wide photo deck had its own two-column layout) */
@media (min-width: 761px){
  .process-page .process-journey--v3 #etape-03{
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }
  .process-page .process-journey--v3 #etape-03 .journey-number{ top: 45px; }
  .process-page .process-journey--v3 #etape-03 .journey-copy{ grid-column: 3 / 8; margin-left: 0; top: 0; }
  .process-page .process-journey--v3 #etape-03 .journey-object.m-tile{ grid-column: 9 / 13; height: auto; }
}

@media (max-width: 620px){
  .process-page .process-journey--v3 #etape-03{ min-height: 700px; padding: 70px 18px 70px 34px; }
  .process-page .process-journey--v3 #etape-03 .journey-copy{ padding: 22px; }
  .process-page .process-journey--v3 #etape-03 .journey-copy h2{ max-width: none; margin-bottom: 24px; font-size: clamp(1.9rem, 9vw, 2.7rem); line-height: 1.04; }
  .process-page .process-journey--v3 #etape-03 .journey-copy > p:last-child{ font-size: 16px; line-height: 1.5; }
}

@media (max-width: 620px){
  .process-page .process-journey--v3 .journey-copy h2{ font-size: clamp(1.9rem, 9vw, 2.7rem); overflow-wrap: anywhere; hyphens: auto; }
  .process-page .method-constants--integrated h2{ font-size: clamp(2rem,9vw,3.5rem); }
}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 760px){
  .process-page .process-journey--v3 .journey-step .journey-object.m-tile{
    width: 100% !important;
    max-width: 440px;
    margin: 40px auto 0 !important;
  }
}

/* ------------------------------------------------------------------ reduced motion: final state, no loop */
@media (prefers-reduced-motion: reduce){
  .m-hero-title *, .m-hero-title *::before{ animation: none !important; }
  .m-tile, .m-tile *{ animation: none !important; transition: none !important; }
  .m-tile .m-bubble--typing{ display: none; }
  .m-sys__frame, .m-sys .m-cursor{ display: none; }
}