/* Schéma fonctionnel de la page « Comment ça marche », en complément d'adalan.css et de docs.css.
   Une plaque encre à courbes de niveau ; les acteurs en cartes papier ; les liaisons, dessinées par
   schema.js, passent sous les cartes. Trois dispositions selon la largeur du schéma (requêtes de
   conteneur) : une colonne, trois colonnes (Vous au-dessus de Claude), quatre colonnes.
   Sans script, tout est affiché : les acteurs, les sites et le texte de chaque étape, à la suite. */

.schema {
  --sx-gap: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  --text: #fff;
  --text-2: var(--ink-200);
  --text-3: var(--ink-300);
  --line: rgb(255 255 255 / 0.12);
  --line-2: rgb(255 255 255 / 0.2);
  --kicker: var(--peach);
  position: relative; isolation: isolate; overflow: clip;
  container: sx / inline-size;
  display: flex; flex-direction: column; gap: clamp(1.1rem, 0.8rem + 0.9vw, 1.6rem);
  margin: 0; padding: clamp(1rem, 0.5rem + 1.4vw, 1.9rem);
  border-radius: var(--shape-ink);
  background: var(--ink); color: var(--text);
  box-shadow: var(--shadow-2);
}
.doc > .schema { margin-top: 1.9rem; }
.schema::before {
  content: ''; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none; opacity: 0.75;
  background: url('/_adalan/motifs/topo-sur-encre.svg') center / cover no-repeat;
  animation: topo-drift 36s ease-in-out infinite alternate;
}
.schema::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 60% at 92% 0%, rgb(80 64 190 / 0.5) 0%, transparent 65%),
    radial-gradient(60% 70% at 0% 100%, rgb(10 7 40 / 0.7) 0%, transparent 70%);
}

/* Le texte de la documentation (docs.css) cède la place à celui du schéma */
.doc .schema p, .doc .schema li { max-width: none; color: inherit; }
.doc .schema ul, .doc .schema ol { margin: 0; padding: 0; list-style: none; }
.doc .schema li + li { margin-top: 0; }
.doc .schema strong { color: var(--text); }
.doc .schema code {
  padding: 0.05em 0.36em; border-radius: 5px 2px 5px 2px; font-size: 0.86em; overflow-wrap: anywhere;
  color: #fff; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
.schema svg { flex: none; }
.schema svg:not(.sx-wires) {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.sx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.schema button { font-family: var(--font); }
.schema button:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }

/* Les variantes d'un texte selon l'outil choisi */
.schema[data-mode='claude-ai'] [data-mode-only='claude-code'],
.schema[data-mode='claude-code'] [data-mode-only='claude-ai'] { display: none; }

/* --------------------------------------------------------------------------
   En-tête : titre, outil, lecture
   -------------------------------------------------------------------------- */
.sx-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.sx-bar-text { display: grid; gap: 0.7rem; }
.doc .schema .sx-title {
  color: #fff; text-wrap: balance;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 760; font-stretch: 110%;
  line-height: 1.08; letter-spacing: -0.024em;
}
.sx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.schema:not(.is-ready) .sx-tools { display: none; }
.sx-modes {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 14px 5px 14px 5px;
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line);
}
.sx-mode {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.75rem; padding: 0.45rem 0.9rem;
  border: 0; border-radius: var(--shape-s); background: transparent; color: var(--ink-100); cursor: pointer;
  font-size: 0.9rem; font-weight: 580; font-stretch: 104%; line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s var(--ease);
}
.sx-mode svg { width: 1.05em; height: 1.05em; color: var(--ink-300); transition: color 0.2s ease; }
.sx-mode:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.sx-mode[aria-pressed='true'] { background: var(--peach); color: var(--ink); box-shadow: var(--shadow-peach); }
.sx-mode[aria-pressed='true'] svg { color: var(--ink); }
.sx-play { min-width: 7.4rem; justify-content: center; }
.sx-play .sx-pause-icon, .schema.is-playing .sx-play .sx-play-icon { display: none; }
.schema.is-playing .sx-play .sx-pause-icon { display: block; }

/* --------------------------------------------------------------------------
   Scène : une colonne par défaut (téléphone)
   -------------------------------------------------------------------------- */
.sx-stage {
  position: relative; display: grid; gap: var(--sx-gap) 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'vous' 'claude' 'space' 'visitors' 'id' 'cycle';
}
.sx-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-col, .sx-lane { position: relative; z-index: 1; min-width: 0; }
.sx-col { display: flex; flex-direction: column; gap: 0.65rem; }
.sx-col > .sx-node, .sx-col > .sx-visitors { margin-block: auto; }
.sx-col--vous { grid-area: vous; }
.sx-col--claude { grid-area: claude; }
.sx-col--space { grid-area: space; }
.sx-col--visitors { grid-area: visitors; }
.sx-lane--id { grid-area: id; }
.sx-lane--cycle { grid-area: cycle; }

.doc .schema .sx-label {
  display: flex; align-items: center; gap: 0.6em; color: var(--ink-300);
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s ease;
}
.sx-label::before { content: ''; flex: none; width: 0.62em; height: 0.62em; border-radius: 4px 1px 4px 1px; background: currentColor; }
.doc .schema .sx-col:has(.is-active) > .sx-label, .doc .schema .sx-lane.is-active > .sx-label { color: var(--peach); }

/* Liaisons et paquets (schema.js) : pointillés au repos, pêche pendant l'étape qui s'en sert */
.sx-wire {
  fill: none; stroke: rgb(207 203 238 / 0.34); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 7;
  animation: sx-flow 1.4s linear infinite; transition: stroke 0.35s ease, stroke-width 0.35s ease;
}
.schema.is-focus .sx-wire { stroke: rgb(207 203 238 / 0.14); animation: none; }
.schema .sx-wire.is-active { stroke: rgb(249 166 107 / 0.8); stroke-width: 2; stroke-dasharray: none; animation: none; }
.sx-packet { fill: var(--peach); }
@keyframes sx-flow { to { stroke-dashoffset: -8; } }

/* --------------------------------------------------------------------------
   Acteurs : cartes papier ; celles de l'étape montent et se réchauffent
   -------------------------------------------------------------------------- */
.sx-node {
  --text: var(--ink);
  --text-2: #4b467a;
  --text-3: #6e6a93;
  --line: rgb(31 23 90 / 0.1);
  --line-2: rgb(31 23 90 / 0.18);
  position: relative; padding: 0.95rem 1rem 1rem;
  border-radius: var(--shape); background: var(--paper); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.schema.is-focus .sx-node:not(.is-active), .schema.is-focus .sx-lane:not(.is-active) { opacity: 0.45; }
.sx-node.is-active { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--peach), var(--shadow-peach); }

.sx-head { display: flex; align-items: center; gap: 0.65rem; }
.sx-head > span:last-child { min-width: 0; }
.doc .schema .sx-head strong {
  display: block; font-size: 0.98rem; font-weight: 720; font-stretch: 106%; line-height: 1.2; letter-spacing: -0.01em;
}
.sx-head small { display: block; margin-top: 0.12rem; color: var(--text-3); font-size: 0.78rem; line-height: 1.3; }
.sx-badge, .sx-avatar {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px 3px 10px 3px;
}
.sx-badge { background: var(--peach-100); color: var(--peach-700); }
.sx-badge svg { width: 1.1rem; height: 1.1rem; }
.sx-avatar { background: var(--ink); color: #fff; font-size: 0.78rem; font-weight: 650; font-stretch: 112%; letter-spacing: 0.02em; }

/* Vous : la demande, dans la bulle encre du visiteur */
.doc .schema .sx-bubble {
  margin-top: 0.85rem; padding: 0.7rem 0.85rem 0.75rem; border-radius: 5px 18px 5px 18px;
  background: var(--ink); color: #fff; font-size: 0.86rem; font-weight: 520; line-height: 1.45;
}
.sx-bubble.is-typing .sx-w { animation: sx-word 0.34s var(--ease) both; animation-delay: calc(var(--w) * 55ms); }
@keyframes sx-word { from { opacity: 0; } }

/* Claude : ses deux outils, puis ses vérifications */
.sx-surfaces { display: grid; gap: 0.4rem; margin-top: 0.85rem; }
.sx-surface {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem;
  border-radius: var(--shape-s); background: var(--ink-50); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.3s ease, box-shadow 0.3s var(--ease);
}
.sx-surface > svg { width: 1.05rem; height: 1.05rem; color: var(--text-3); transition: color 0.3s ease; }
.doc .schema .sx-surface strong { display: block; font-size: 0.86rem; font-weight: 650; line-height: 1.2; }
.sx-surface small { display: block; color: var(--text-3); font: 400 0.7rem/1.3 var(--mono); }
.schema[data-mode='claude-ai'] .sx-surface[data-mode-is='claude-ai'],
.schema[data-mode='claude-code'] .sx-surface[data-mode-is='claude-code'] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.schema[data-mode='claude-ai'] .sx-surface[data-mode-is='claude-ai'] > svg,
.schema[data-mode='claude-code'] .sx-surface[data-mode-is='claude-code'] > svg { color: var(--peach-700); }
.schema[data-step='3'][data-mode='claude-ai'] .sx-surface[data-mode-is='claude-ai'],
.schema[data-step='3'][data-mode='claude-code'] .sx-surface[data-mode-is='claude-code'] {
  background: var(--peach-100); box-shadow: inset 0 0 0 2px var(--peach-600);
}

.sx-checks { margin-top: 0.75rem; padding-top: 0.7rem; box-shadow: inset 0 1px 0 var(--line); }
.doc .schema .sx-checks-head { color: var(--peach-700); font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.sx-checklist { display: grid; gap: 0.3rem; margin-top: 0.55rem; }
.doc .schema .sx-checklist li { display: flex; align-items: center; gap: 0.45rem; color: var(--text-2); font: 400 0.74rem/1.25 var(--mono); }
.schema .sx-checklist svg {
  width: 0.95rem; height: 0.95rem; padding: 0.14rem; stroke-width: 3;
  border-radius: 4px 1px 4px 1px; background: var(--peach-200); color: var(--peach-700);
}
.schema[data-step='2'] .sx-checklist li { animation: sx-rise 0.5s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 0.38s); }

/* Votre Space : l'entrée où l'identité est vérifiée, les sites, les gestes de la page du Space */
.sx-gate {
  position: absolute; left: -0.875rem; top: 1.12rem; z-index: 2;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 9px 3px 9px 3px;
  background: var(--ink-700); color: var(--peach); box-shadow: 0 0 0 3px var(--ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sx-gate svg { width: 0.95rem; height: 0.95rem; }
.sx-gate.is-active { background: var(--peach); color: var(--ink); animation: sx-beat 1.5s var(--ease) infinite; }
@keyframes sx-beat { 50% { scale: 1.12; } }
.doc .schema .sx-head .sx-address { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; overflow-wrap: anywhere; }

.sx-sites { display: grid; gap: 0.35rem; margin-top: 0.85rem; }
.sx-site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem;
  padding: 0.48rem 0.65rem; border-radius: var(--shape-s); background: var(--ink-50);
}
.sx-site-name { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font: 500 0.8rem/1.2 var(--mono); }
.schema .sx-app { width: 0.85rem; height: 0.85rem; color: var(--text-3); }
.sx-access { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-2); font-size: 0.76rem; font-weight: 580; line-height: 1.2; }
.sx-access svg { width: 0.85rem; height: 0.85rem; color: var(--peach-700); }
.sx-life { margin-left: auto; color: var(--text-3); font: 400 0.68rem/1.2 var(--mono); }
.sx-site--new { background: var(--peach-100); box-shadow: inset 0 0 0 1px var(--peach-200); }
.sx-url { flex-basis: 100%; color: var(--peach-700); font: 400 0.68rem/1.35 var(--mono); overflow-wrap: anywhere; }
.schema[data-step='4'] .sx-site--new { animation: sx-rise 0.6s var(--ease) both; }
/* La place du site à venir, en pointillé ; à l'étape 3, il est en cours d'envoi */
.sx-site--new { position: relative; }
.schema.is-ready .sx-site--new.is-later {
  visibility: visible; opacity: 1; transform: none;
  background: transparent; box-shadow: none; outline: 1.5px dashed rgb(31 23 90 / 0.22); outline-offset: -1.5px;
}
.schema.is-ready .sx-site--new.is-later > * { visibility: hidden; }
.schema[data-step='3'] .sx-site--new.is-later { outline-color: var(--peach-600); }
.schema[data-step='3'] .sx-site--new.is-later::after {
  content: 'envoi de offre-rh…'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--peach-700); font: 500 0.7rem/1 var(--mono);
  animation: sx-blink 0.9s ease-in-out infinite alternate;
}
@keyframes sx-blink { from { opacity: 0.4; } }
.schema[data-step='4'] .sx-url > span { animation: sx-type 1.3s steps(33, end) 0.55s both; }
@keyframes sx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.sx-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; margin-top: 0.7rem; }
.doc .schema .sx-actions li {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.5rem; border-radius: var(--shape-xs);
  color: var(--text-2); font-size: 0.74rem; font-weight: 600; line-height: 1.2; box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.sx-actions svg { width: 0.82rem; height: 0.82rem; color: var(--peach-700); }
.doc .schema .sx-actions.is-active li {
  background: var(--peach); color: var(--ink); box-shadow: none;
  animation: sx-pop 0.45s var(--ease-back) both; animation-delay: calc(0.2s + var(--i) * 90ms);
}
.sx-actions.is-active svg { color: var(--ink); }
.doc .schema .sx-team { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.65rem; color: var(--text-3); font-size: 0.76rem; }
.sx-team svg { width: 0.9rem; height: 0.9rem; color: var(--peach-700); }

/* Vos visiteurs : un par accès, chacun relié au site qu'il ouvre */
.sx-visitors { display: grid; gap: 0.55rem; }
.sx-visitor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.6rem;
  padding: 0.65rem 0.75rem; border-radius: var(--shape-md);
}
.sx-visitor .sx-badge { grid-row: 1 / span 2; width: 1.9rem; height: 1.9rem; }
.sx-visitor .sx-badge svg { width: 1rem; height: 1rem; }
.doc .schema .sx-visitor strong { display: block; font-size: 0.9rem; font-weight: 700; font-stretch: 105%; line-height: 1.2; }
.sx-visitor small { display: block; color: var(--text-3); font-size: 0.76rem; line-height: 1.25; }
.sx-open {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.16rem 0.42rem; border-radius: var(--shape-xs);
  background: var(--peach-100); color: var(--peach-700); font: 500 0.68rem/1.2 var(--mono);
}
.schema .sx-open svg { width: 0.72rem; height: 0.72rem; stroke-width: 3; }
.schema[data-step='6'] .sx-open { animation: sx-pop 0.45s var(--ease-back) both; animation-delay: 0.45s; }
.schema[data-step='6'] .sx-visitor:nth-child(2) .sx-open { animation-delay: 0.8s; }
.schema[data-step='6'] .sx-visitor:nth-child(3) .sx-open { animation-delay: 1.15s; }

/* --------------------------------------------------------------------------
   Bandes transverses : votre identité, le cycle de vie d'un site
   -------------------------------------------------------------------------- */
.sx-lane {
  display: grid; align-content: start; gap: 0.6rem; padding: 0.85rem 1rem 0.9rem;
  border-radius: var(--shape-md); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line);
  transition: opacity 0.45s var(--ease), background-color 0.45s ease, box-shadow 0.45s var(--ease);
}
.sx-lane.is-active { background: rgb(249 166 107 / 0.09); box-shadow: inset 0 0 0 1.5px var(--peach); }
.doc .schema .sx-note { color: var(--ink-200); font-size: 0.8rem; line-height: 1.45; }

.sx-ids { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.doc .schema .sx-ids li {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border-radius: var(--shape-xs);
  background: rgb(255 255 255 / 0.08); color: #fff; font-size: 0.78rem; font-weight: 580; line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sx-ids svg { width: 0.9rem; height: 0.9rem; color: var(--peach); }
.sx-ids small { color: var(--ink-300); font: 400 0.68rem/1 var(--mono); }
.doc .schema[data-mode='claude-ai'] .sx-lane.is-active [data-mode-is='claude-ai'],
.doc .schema[data-mode='claude-code'] .sx-lane.is-active [data-mode-is='claude-code'] { background: var(--peach); color: var(--ink); }
.schema[data-mode='claude-ai'] .sx-lane.is-active [data-mode-is='claude-ai'] :is(small, svg),
.schema[data-mode='claude-code'] .sx-lane.is-active [data-mode-is='claude-code'] :is(small, svg) { color: var(--on-peach-2); }

.sx-cycle { position: relative; padding-top: 1.15rem; }
.sx-track {
  position: absolute; left: 0.4rem; right: calc(25% - 0.775rem); top: 0.35rem; height: 2px;
  border-radius: 2px; background: rgb(255 255 255 / 0.16); overflow: hidden;
}
.sx-track > span { position: absolute; inset: 0; background: var(--peach); transform: scaleX(0); transform-origin: left; }
.sx-lane--cycle.is-active .sx-track > span { animation: sx-fill 4.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s both; }
@keyframes sx-fill { to { transform: scaleX(1); } }
.sx-milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.doc .schema .sx-milestones li { position: relative; display: grid; align-content: start; gap: 0.15rem; }
.sx-milestones li::before {
  content: ''; position: absolute; left: 0; top: calc(-1.2rem + 1px); width: 0.8rem; height: 0.8rem;
  border-radius: 4px 1px 4px 1px; background: var(--ink-300); box-shadow: 0 0 0 3px var(--ink);
}
.sx-lane--cycle.is-active .sx-milestones li::before { animation: sx-light 0.35s ease both; animation-delay: calc(0.3s + var(--i) * 1.45s); }
@keyframes sx-light { to { background: var(--peach); } }
.doc .schema .sx-milestones strong { font-size: 0.84rem; font-weight: 650; line-height: 1.2; }
.sx-milestones small { color: var(--ink-300); font: 400 0.68rem/1.25 var(--mono); }
.doc .schema .sx-renew { display: flex; align-items: center; gap: 0.45rem; }
.sx-renew svg { width: 0.95rem; height: 0.95rem; color: var(--peach); }
.sx-lane--cycle.is-active .sx-renew svg { animation: sx-spin 1.1s var(--ease) 4.7s both; }
@keyframes sx-spin { to { rotate: 360deg; } }

/* Apparitions : ce qui n'existe pas encore à l'étape en cours (schema.js pose .is-later) */
.schema.is-ready [data-from] { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s; }
.schema.is-ready .is-later {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
/* Les vérifications de Claude restent en filigrane jusqu'à leur étape */
.schema.is-ready .sx-checks.is-later { opacity: 0.3; visibility: visible; transform: none; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sx-pop { from { opacity: 0; transform: scale(0.82); } }

/* --------------------------------------------------------------------------
   Étapes : sans script, le texte de chacune à la suite ; avec, un pas à pas
   -------------------------------------------------------------------------- */
.sx-steps { display: grid; gap: 1rem; }
.sx-step-btn {
  display: flex; align-items: center; gap: 0.55rem; padding: 0; border: 0; background: none;
  color: var(--peach); font-size: 0.92rem; font-weight: 680; font-stretch: 104%; line-height: 1.2; text-align: left;
}
.schema:not(.is-ready) .sx-step-btn { pointer-events: none; }
.sx-step-n { color: var(--peach); font: 500 0.72rem/1 var(--mono); letter-spacing: 0.04em; }
.sx-step-icon { width: 1rem; height: 1rem; color: var(--peach); }
.sx-step-text {
  margin-top: 0.5rem; padding: 1rem 1.15rem 1.1rem; border-radius: var(--shape-md);
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line);
}
.doc .schema .sx-step-title { color: #fff; font-size: 1.08rem; font-weight: 720; font-stretch: 106%; line-height: 1.25; }
.doc .schema .sx-step-text > p + p { margin-top: 0.4rem; }
.doc .schema .sx-step-text > p:not(.sx-step-title):not(.sx-more-line) { color: var(--ink-200); font-size: 0.96rem; line-height: 1.55; max-width: 80ch; }
.doc .schema .sx-more-line { margin-top: 0.65rem; }
.doc .schema .sx-step-text a.sx-more {
  color: #fff; font-size: 0.9rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.doc .schema .sx-step-text a.sx-more::after { content: '→'; display: inline-block; margin-left: 0.4em; transition: transform 0.2s var(--ease); }
.doc .schema .sx-step-text a.sx-more:hover { color: var(--peach); text-decoration-color: var(--peach); }
.doc .schema .sx-step-text a.sx-more:hover::after { transform: translateX(3px); }

.schema.is-ready .sx-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.4rem; }
.schema.is-ready .sx-step { display: contents; }
.schema.is-ready .sx-step-btn {
  grid-row: 1; position: relative; display: grid; align-content: center; justify-items: center; gap: 0.3rem;
  min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.3rem 0.6rem; border-radius: var(--shape-s);
  background: rgb(255 255 255 / 0.04); color: var(--ink-100); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.86rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s var(--ease);
}
.schema.is-ready .sx-step-btn:hover { background: rgb(255 255 255 / 0.09); color: #fff; }
.schema.is-ready .sx-step.is-current .sx-step-btn { background: rgb(255 255 255 / 0.12); color: #fff; box-shadow: inset 0 0 0 1.5px var(--peach); }
.schema.is-ready .sx-step-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-step-btn::after {
  content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.32rem; height: 2px; border-radius: 2px;
  background: var(--peach); transform: scaleX(0); transform-origin: left; opacity: 0;
}
.schema.is-playing .sx-step.is-current .sx-step-btn::after { opacity: 1; animation: sx-progress var(--sx-dur, 6s) linear both; }
@keyframes sx-progress { to { transform: scaleX(1); } }
.schema.is-ready .sx-step-text {
  grid-row: 2; grid-column: 1 / -1; margin-top: 0.35rem;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.schema.is-ready .sx-step.is-current .sx-step-text {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 0.45s var(--ease) 0.05s, transform 0.45s var(--ease) 0.05s, visibility 0s;
}
/* Téléphone : numéros seuls ; le pas à pas reste à l'écran pendant qu'on fait défiler la scène */
.schema.is-ready .sx-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.schema.is-ready .sx-steps {
  order: 1; position: sticky; top: calc(var(--top-h, 4rem) + 0.5rem); z-index: 3;
  margin: -0.5rem; padding: 0.5rem; border-radius: var(--shape-md);
  background: rgb(21 15 68 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.schema.is-ready .sx-stage { order: 2; }
.schema.is-ready .sx-step:not(.is-current) .sx-step-text { display: none; }
.doc .schema.is-ready .sx-step-text > p:not(.sx-step-title):not(.sx-more-line) { font-size: 0.86rem; line-height: 1.48; }
.schema.is-ready .sx-more-line { display: none; }

/* Téléphone et tablette : les trois visiteurs côte à côte en cartes courtes, l'entrée du Space au-dessus */
.sx-visitors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.sx-visitor { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.45rem; padding: 0.6rem 0.6rem 0.65rem; }
.sx-visitor .sx-badge { grid-row: auto; }
.sx-visitor small { display: none; }
.sx-open { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.22rem; }
.sx-open > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sx-gate { left: calc(50% - 0.875rem); top: -0.875rem; }
.doc .schema .sx-col--visitors > .sx-label { align-self: start; padding: 0.3em 0.6em 0.3em 0; background: var(--ink); }

/* --------------------------------------------------------------------------
   Tablette : Vous, Claude et votre Space sur une rangée, vos visiteurs sous le Space
   -------------------------------------------------------------------------- */
@container sx (min-width: 37.5rem) {
  .sx-stage {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: 'vous claude space' 'id id visitors' 'cycle cycle cycle';
    gap: var(--sx-gap) clamp(2.2rem, 4.6cqi, 3rem);
  }
  .sx-gate { left: -0.875rem; top: 1.12rem; }
  .schema.is-ready .sx-steps { position: static; order: 0; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .schema.is-ready .sx-stage { order: 0; }
  .schema.is-ready .sx-step:not(.is-current) .sx-step-text { display: block; }
  .doc .schema.is-ready .sx-step-text > p:not(.sx-step-title):not(.sx-more-line) { font-size: 0.96rem; line-height: 1.55; }
  .schema.is-ready .sx-more-line { display: block; }
}
@container sx (min-width: 46rem) {
  .schema.is-ready .sx-steps { grid-template-columns: minmax(0, 1.6fr) repeat(7, minmax(0, 1fr)); }
  .schema.is-ready .sx-step-btn { justify-items: start; padding-inline: 0.7rem; }
  .schema.is-ready .sx-step-name { position: static; width: auto; height: auto; clip-path: none; }
  .schema.is-ready .sx-step:first-child .sx-step-btn { grid-auto-flow: column; justify-content: start; gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Grand écran : de votre demande à vos visiteurs, de gauche à droite
   -------------------------------------------------------------------------- */
@container sx (min-width: 53rem) {
  .sx-stage {
    grid-template-columns: minmax(9.5rem, 0.88fr) minmax(11.5rem, 1.08fr) minmax(14rem, 1.4fr) minmax(9.5rem, 0.82fr);
    grid-template-areas: 'vous claude space visitors' 'id id cycle cycle';
    gap: 1.25rem clamp(2.6rem, 4.6cqi, 4rem);
  }
  .sx-visitors { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .sx-visitor { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; gap: 0.2rem 0.6rem; padding: 0.65rem 0.75rem; }
  .sx-visitor .sx-badge { grid-row: 1 / span 2; }
  .sx-visitor small { display: block; }
  .sx-open { position: static; grid-column: 2; padding: 0.16rem 0.42rem; }
  .sx-open > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .doc .schema .sx-col--visitors > .sx-label { align-self: stretch; padding: 0; background: none; }
}

@media print {
  .schema { background: none; box-shadow: none; color: var(--ink); --text: var(--ink); --text-2: #4b467a; --text-3: #6e6a93; }
  .schema::before, .schema::after, .sx-tools, .sx-wires, .sx-step-btn::after { display: none !important; }
  .schema.is-ready .sx-steps { position: static; display: grid; grid-template-columns: minmax(0, 1fr); background: none; }
  .schema.is-ready .sx-step { display: block; }
  .schema.is-ready .sx-step-text { visibility: visible; opacity: 1; transform: none; }
  .schema.is-ready .is-later { opacity: 1; visibility: visible; transform: none; }
}