/* Monde unique et assumé : la page papier du site Excellia (pas de variante sombre). */
:root {
  color-scheme: light;
  --paper: #f6f5f2;
  --paper-2: #fbfaf8;
  --paper-3: #eceae5;
  --ink: #0b0b0b;
  --ink-2: #5b5a56;
  --line: rgba(11, 11, 11, 0.1);
  --line-2: rgba(11, 11, 11, 0.2);
  --accent: #0a84ff;
  --accent-ink: #0059c7;
  --accent-wash: rgba(10, 132, 255, 0.12);
  --warn: #9a4a00;
  --warn-wash: rgba(178, 80, 0, 0.1);
  --danger: #a1231b;
  --danger-wash: rgba(161, 35, 27, 0.08);
  --scrim: rgba(24, 22, 18, 0.24);
  --shadow: 0 14px 34px -22px rgba(46, 40, 30, 0.45);
  --shadow-float: 0 30px 80px -32px rgba(46, 40, 30, 0.55), 0 2px 8px rgba(46, 40, 30, 0.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --display: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bar-h: 64px;
  --gutter: clamp(16px, 4vw, 56px);
}
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
::selection { background: rgba(10, 132, 255, 0.18); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(11, 11, 11, 0.22) transparent; }

/* ---------- Couches : papier, particules, actes, barre, dock ---------- */
.paper {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--paper);
  background-image: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(46, 40, 30, 0.045) 100%);
  background-size: 100% 100%, 100% 100%;
}
#orb { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 3;
  height: var(--bar-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand__tile { width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(46, 40, 30, 0.12), 0 6px 16px -8px rgba(46, 40, 30, 0.3); display: grid; place-items: center; }
.brand__tile img { display: block; width: 24px; height: 24px; }
.bar__right { display: flex; align-items: center; gap: 18px; }
.saved { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); opacity: 0; transition: opacity 300ms ease; }
.saved svg { width: 16px; height: 16px; color: var(--accent); }
body[data-act="atelier"] .saved { opacity: 1; }

/* ---------- Actes ---------- */
.act {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 2;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms;
}
.act.is-on { opacity: 1; visibility: visible; transition: opacity 480ms var(--ease-out) 100ms, visibility 0s; }
.act .st {
  opacity: 0; transform: translateY(14px); filter: blur(5px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.act.is-on .st {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out), filter 560ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.act.is-off .st { transform: translateY(-10px); }

/* ---------- Boutons, liens, champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--display); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 38px; padding: 0 16px; gap: 8px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.linkbtn[disabled] { opacity: 0.4; cursor: default; text-decoration-color: transparent; }
.linkbtn {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: 500 14px/1.35 var(--display); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #2a2925; }
  .btn--ghost:hover { background: var(--paper-3); }
  .linkbtn:not([disabled]):hover { color: var(--ink); text-decoration-color: var(--ink); }
}
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font-size: 14px; font-weight: 500; color: var(--ink); }
.in {
  width: 100%; height: 52px; padding: 0 20px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2);
  font: 500 16px var(--display); color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14); }
textarea.in { height: auto; min-height: 92px; padding: 14px 18px; border-radius: 16px; resize: vertical; line-height: 1.45; }
.field { display: grid; gap: 8px; }

/* ---------- Acte 1 : le seuil ---------- */
.seuil {
  min-height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-inline: var(--gutter); padding-block: clamp(16px, 4vh, 56px) clamp(72px, 10vh, 96px);
}
.kick {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 3.4vh, 36px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2);
}
.kick__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h-hero {
  margin: 0; font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
  font-size: clamp(40px, min(6.3vw, 11vh), 112px);
}
.h-hero > span { display: block; }
.wave-slot { width: min(820px, 86vw); height: clamp(96px, 16vh, 168px); margin: clamp(8px, 1.6vh, 18px) 0 clamp(8px, 2vh, 22px); }
.lede { margin: 0 0 clamp(20px, 3.4vh, 32px); max-width: 35rem; font-size: 17px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.urlform { width: min(640px, 100%); display: grid; gap: 8px; text-align: left; }
.urlbar {
  display: flex; align-items: center; height: 64px; box-sizing: border-box; padding: 6px 6px 6px 22px;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.urlbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14), var(--shadow); }
.urlbar__prefix { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.urlbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; padding: 0 12px 0 2px; font: 500 18px var(--display); color: var(--ink); }
.urlform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-inline: 4px; }
.hint { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.err { margin: 0; font-size: 14px; color: var(--danger); padding-inline: 4px; }

/* ---------- Acte 2 : la lecture ---------- */
.lecture {
  min-height: 100%; box-sizing: border-box; max-width: 1360px; margin-inline: auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--gutter); padding-block: clamp(16px, 4vh, 48px) clamp(72px, 10vh, 96px);
}
.lecture__orb { display: grid; place-items: center start; min-height: min(62vh, 580px); padding-left: clamp(0px, 3vw, 56px); }
.orb-slot--lecture { width: min(25vw, 42vh, 380px); aspect-ratio: 1; }
.lecture__log { max-width: 470px; }
.h-2 { margin: 0 0 8px; font-weight: 600; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.lecture__src { margin: 0 0 26px; font-family: var(--mono); font-size: 14px; color: var(--accent-ink); overflow-wrap: anywhere; }
.pages { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; }
.pages li {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; height: 34px;
  font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); transition: color 220ms ease;
}
.pages li svg { width: 16px; height: 16px; }
.pages .ic { display: grid; place-items: center; width: 18px; height: 18px; }
.pages .ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.pages li { position: relative; }
.pages li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.4); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.pages li[data-s="reading"]::before { opacity: 1; transform: none; transition-delay: 160ms; } /* la pointe de la tresse arrive, puis le point s'allume */
.pages li.is-take::before { transform: scale(1.9); transition-duration: 120ms; }
.pages li[data-s="reading"] { color: var(--ink); }
.pages li[data-s="reading"] .ring { border-color: var(--accent); border-top-color: transparent; animation: spin 700ms linear infinite; }
.pages li[data-s="done"] .ic { color: var(--accent); }
.pages .n { font-size: 12px; font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }
.lecture__sum { margin: 0 0 22px; min-height: 3.2em; font-size: 16px; color: var(--ink); text-wrap: pretty; }
.lecture__sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lecture__sum .w { color: var(--warn); font-weight: 600; }
.lecture__next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.grains { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- Acte 3 : l'atelier (les questions) ---------- */
.atelier {
  min-height: 100%; box-sizing: border-box; max-width: 1400px; margin-inline: auto;
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 316px; align-items: start; gap: clamp(24px, 3.4vw, 60px);
  padding-inline: var(--gutter); padding-block: clamp(16px, 4vh, 40px) clamp(80px, 12vh, 110px);
}
.rail { position: sticky; top: clamp(16px, 4vh, 40px); display: grid; gap: 22px; }
.rail__who { display: grid; gap: 14px; }
.orb-slot--rail { width: 132px; height: 132px; margin-left: -10px; }
.rail__name { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.rail__status { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.rail__say { margin: 0; min-height: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.rail__say.is-on { opacity: 1; transform: none; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapters button {
  width: 100%; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px 9px 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; text-align: left;
  font: 500 14.5px/1.2 var(--display); color: var(--ink-2); transition: background-color 160ms ease, color 160ms ease;
}
.chapters .mk { display: grid; place-items: center; width: 18px; height: 18px; color: var(--accent); }
.chapters .mk svg { width: 15px; height: 15px; }
.chapters .n { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.chapters [aria-current="step"] { background: var(--paper-3); color: var(--ink); font-weight: 600; }
.chapters [aria-current="step"] .mk::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .chapters button:hover { color: var(--ink); } }

.stage { width: 100%; max-width: 680px; justify-self: center; display: grid; gap: 30px; }
.progress { display: flex; align-items: center; gap: 14px; }
.progress__txt { font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress__bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress__bar > span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 460ms var(--ease-out); }
.detour { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; }
.detour svg { width: 15px; height: 15px; }
.q { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out); }
.q.is-out { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.q.is-pre { opacity: 0; transform: translateY(10px); filter: blur(3px); transition: none; }
.q h2 { margin: 0; font-weight: 600; font-size: clamp(27px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.q h2:focus { outline: none; }
.q h2 .w { display: inline-block; opacity: 0; transform: translateY(0.25em); filter: blur(4px); animation: word 420ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 26ms + 60ms); }
@keyframes word { to { opacity: 1; transform: none; filter: blur(0); } }
.q .help { margin: 14px 0 0; max-width: 58ch; font-size: 16.5px; color: var(--ink-2); text-wrap: pretty; }
.src { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.src svg { width: 14px; height: 14px; }
.ctl { margin-top: 28px; display: grid; gap: 12px; }
.sub { margin: 16px 0 0; font-size: 15px; font-weight: 600; }

.opts { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; }
.opt {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 3px 14px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper-2); cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.opt:active { transform: scale(0.99); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__mk { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.opt__t { font-weight: 600; font-size: 16px; line-height: 1.35; }
.opt__rec { margin-left: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent-ink); }
.opt__d { grid-column: 2; font-size: 14.5px; color: var(--ink-2); }
.opt:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.opt:has(input:checked) .opt__mk { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #fff; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .opt:hover { border-color: rgba(11, 11, 11, 0.36); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper-2); cursor: pointer;
  font: 500 14.5px/1 var(--display); color: var(--ink);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip svg { width: 15px; height: 15px; }
.chip .from { font-family: var(--mono); font-size: 10.5px; color: var(--accent-ink); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] .from, .chip[aria-checked="true"] .from { color: #9ccbff; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: rgba(11, 11, 11, 0.4); } }

.facts { display: grid; gap: 18px; }
.facts__grp { display: grid; gap: 4px; }
.facts__grp + .facts__grp { padding-top: 18px; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 7px 0; }
.fact__l { font-size: 14px; color: var(--ink-2); }
.fact__v { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.fact__v .in { height: 40px; font-size: 15px; }
.fact__s { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-2); transition: background-color 160ms ease, color 160ms ease; }
.iconbtn svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { background: var(--paper-3); color: var(--ink); } }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 500; }
.tag--w { background: var(--warn-wash); color: var(--warn); }
.hours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.hours > * {
  display: grid; gap: 4px; align-content: start; padding: 10px 8px; border-radius: 12px;
  background: var(--paper-2); border: 1px solid var(--line); text-align: center;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.hours > *:active { transform: scale(0.97); }
.hours b { font-size: 12.5px; font-weight: 600; }
.hours span { font-family: var(--mono); font-size: 11px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours .nx { margin-left: 2px; font-size: 9.5px; vertical-align: super; line-height: 0; }
@media (hover: hover) and (pointer: fine) { .hours > button:hover { border-color: rgba(11, 11, 11, 0.36); background: #fff; } }
.hours__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.hours__note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.hours__note .tag { margin-right: -8px; }
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.voice { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
.voice__pick { display: grid; gap: 3px; cursor: pointer; }
.voice__pick::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.voice .opt__d { grid-column: 1; }
.voice__play { position: relative; z-index: 1; }
.voice__play { justify-self: start; height: 36px; padding: 0 14px; font-size: 13.5px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }

.qnav { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.qnav .grow { flex: 1; }

.fiche { position: sticky; top: clamp(16px, 4vh, 40px); }
.fiche__box { border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; }
.fiche__box > summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; cursor: pointer; }
.fiche__box > summary::-webkit-details-marker { display: none; }
.fiche__t { font-size: 16px; font-weight: 600; }
.fiche__n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fiche__body { max-height: calc(100dvh - var(--bar-h) - 200px); overflow-y: auto; padding: 0 20px 14px; }
.fg { padding: 12px 0 8px; border-top: 1px solid var(--line); }
.fg__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.fg h3 { margin: 0; font-size: 13px; font-weight: 600; }
.fg__a { padding: 2px; font-size: 12.5px; }
.fg--w h3 { color: var(--warn); }
.fi {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px;
  padding: 5px 8px; margin-inline: -8px; border-radius: 10px; cursor: pointer;
  transition: background-color 140ms ease;
}
.fi__l { font-size: 12.5px; color: var(--ink-2); }
.fi__v { grid-column: 1; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.fi__s { grid-row: 1; grid-column: 2; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); align-self: start; padding-top: 2px; }
.fi__s--vous { color: var(--accent-ink); }
.fi__s--check { color: var(--warn); }
.fi__e {
  grid-row: 2; grid-column: 2; align-self: center; display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin: -4px -4px -4px 0; border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); cursor: pointer; transition: opacity 120ms ease, background-color 140ms ease, color 140ms ease;
}
.fi__e svg { width: 14px; height: 14px; }
.fi.is-editing { cursor: default; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.fi.is-editing .fi__e { visibility: hidden; }
.in--fi { height: 36px; margin-top: 4px; padding: 0 12px; font-size: 14px; font-weight: 500; }
textarea.in--fi { height: auto; min-height: 64px; padding: 8px 12px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .fi:not(.is-editing):hover { background: var(--paper-3); }
  .fi__e { opacity: 0; }
  .fi:hover .fi__e, .fi:focus-within .fi__e { opacity: 1; }
  .fi__e:hover { background: #fff; color: var(--ink); }
}
.fi.is-fresh { animation: fresh 1.8s var(--ease-out); }
@keyframes fresh { from { background-color: rgba(10, 132, 255, 0.16); } to { background-color: rgba(10, 132, 255, 0); } }

/* ---------- Arrivée depuis la lecture : la poussière d'abord, l'écriture ensuite ----------
   L'orbe voyage de la lecture au rail en ~1,9 s. Le titre de la question paraît à 0,95 s (les grains
   sont passés sous lui), les faits à 1,28 s, le nom et les chapitres à 1,9 s (la poussière arrive par là). */
.act.is-dust.is-on .stage.st { transition-delay: 950ms; }
.act.is-dust.is-on .fiche.st { transition-delay: 1000ms; }
/* le rail est posé à sa place sans glisser : l'orbe vise l'emplacement exact */
.act.is-dust .rail.st { transform: none; filter: none; transition: opacity 560ms var(--ease-out); }
.act.is-dust.is-on .rail.st { transition-delay: 1900ms; }
.act.is-dust .q .ctl, .act.is-dust .qnav { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.act.is-dust.dust-facts .q .ctl, .act.is-dust.dust-facts .qnav {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-out), filter 520ms var(--ease-out);
}

/* même arrivée en poussière pour le compte et le test : l'écriture paraît une fois la poussière passée */
.act.is-dust.is-on .contact .st, .act.is-dust.is-on .lecture__log .st { transition-delay: calc(950ms + var(--i, 0) * 90ms); }
/* l'étape quittée s'efface vite quand l'orbe part en poussière */
.act.is-gone { transition: opacity 120ms var(--ease-out), visibility 0s linear 120ms; }

/* ---------- Horaires : le volet d'édition ----------
   Ouvert depuis le relevé, depuis « Sa fiche » ou depuis la question des transferts.
   Les changements s'appliquent tout de suite (enregistrement automatique) ; « Annuler mes changements »
   revient à l'état d'ouverture. Aucune particule ne passe dessus : le canvas reste sous les actes. */
.scrim {
  position: fixed; inset: 0; z-index: 5; background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out), visibility 0s; }
.volet {
  position: fixed; z-index: 6;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(640px, calc(100vw - 24px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float);
  overflow: hidden; visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.volet.is-on { visibility: visible; transform: none; transition: transform 340ms var(--ease-drawer), visibility 0s; }
.volet__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 22px 20px 18px 28px; border-bottom: 1px solid var(--line); }
.volet__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; }
.volet__title:focus { outline: none; }
.volet__x { margin-top: -4px; }
.volet__lede { grid-column: 1; margin: 0; max-width: 52ch; font-size: 14.5px; color: var(--ink-2); text-wrap: pretty; }
.volet__body { overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 32px; display: grid; gap: 28px; align-content: start; }
.volet__foot { display: flex; align-items: center; gap: 18px; padding: 12px 16px 12px 28px; border-top: 1px solid var(--line); background: var(--paper-2); }
.volet__foot .grow { flex: 1; }
.volet__saved { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); opacity: 0; transition: opacity 240ms ease; }
.volet__saved svg { width: 15px; height: 15px; color: var(--accent); }
.volet__saved.is-on { opacity: 1; }

/* ce qu'elle dira : la phrase se recompose à chaque heure validée */
.say { display: grid; gap: 10px; }
.say__l { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.say__q { margin: 0; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 16.5px; font-weight: 500; line-height: 1.5; letter-spacing: -0.006em; text-wrap: pretty; }

.vs { display: grid; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line); }
.vs__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vs__t { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.vs__t:focus { outline: none; }
.vs__src { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.vs__d { margin: -4px 0 2px; max-width: 58ch; font-size: 14.5px; color: var(--ink-2); text-wrap: pretty; }
.stack { display: grid; gap: 12px; }

/* la semaine : un jour par ligne */
.week { display: grid; gap: 2px; }
.day {
  position: relative; display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) auto;
  align-items: center; gap: 4px 14px; min-height: 52px; padding: 6px 8px 6px 10px; margin-inline: -10px; border-radius: 14px;
}
.day__n { font-size: 15px; font-weight: 600; }
.day__slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.day__off { font-size: 14.5px; color: var(--ink-2); }
.day__acts { display: flex; align-items: center; min-width: 32px; }
.day__err { grid-column: 3 / -1; margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--danger); }

.sw {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(46, 40, 30, 0.22), 0 3px 8px -3px rgba(46, 40, 30, 0.35);
  transition: transform 180ms var(--ease-out);
}
.sw[aria-checked="true"] { background: var(--ink); box-shadow: none; }
.sw[aria-checked="true"]::after { transform: translateX(16px); }

.slot {
  display: inline-flex; align-items: center; height: 40px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.slot:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14); }
.slot.is-bad { border-color: var(--danger); }
.t {
  width: 54px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; text-align: center;
  font: 500 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background-color 140ms ease;
}
.t:focus { outline: none; background: var(--accent-wash); }
.t[aria-invalid="true"] { color: var(--danger); background: var(--danger-wash); }
.slot__to { padding: 0 1px; font-size: 13.5px; color: var(--ink-2); }
.slot__nx:empty { display: none; }
.slot__nx { display: inline-flex; margin-left: 2px; }
.tag--n { height: 22px; padding: 0 8px; background: var(--paper-3); color: var(--ink-2); }
.slot__x {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); cursor: pointer; transition: background-color 140ms ease, color 140ms ease;
}
.slot__x svg { width: 14px; height: 14px; }
.addslot {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font: 500 13.5px var(--display); color: var(--ink-2);
  transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}
.addslot:active { transform: scale(0.97); }
.addslot svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .slot__x:hover, .addslot:hover { background: var(--paper-3); color: var(--ink); }
}

/* infobulle des boutons icônes : délai au premier survol, immédiate au clavier */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% + 6px); right: 0;
  padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 12px/1.2 var(--display); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out);
}
[data-tip]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  [data-tip]:hover::after { opacity: 1; transform: none; transition-delay: 450ms; }
}
[aria-expanded="true"][data-tip]::after { opacity: 0 !important; }

/* copier un jour sur d'autres */
.pop {
  position: absolute; z-index: 4; top: calc(100% - 2px); right: 6px; width: 312px; box-sizing: border-box;
  display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 22px 50px -22px rgba(46, 40, 30, 0.5), 0 1px 3px rgba(46, 40, 30, 0.08);
  transform-origin: top right;
}
.pop__t { margin: 0; font-size: 14px; font-weight: 600; }
.pop__days { display: flex; flex-wrap: wrap; gap: 6px; }
.pop__days .chip { height: 34px; padding: 0 12px; gap: 6px; font-size: 13.5px; }
.pop__days .chip svg { width: 13px; height: 13px; }
.pop__quick { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pop__quick .linkbtn { font-size: 13.5px; }
.pop__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* jours fériés */
.line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.line__t { font-size: 15px; font-weight: 500; cursor: pointer; }
.hols { display: flex; flex-wrap: wrap; gap: 6px; }
.hchip { height: 36px; padding: 0 14px; gap: 7px; font-size: 13.5px; }
.hchip svg { width: 13px; height: 13px; }
.hchip__w { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.hchip[aria-pressed="true"] .hchip__w { color: #c9c7c1; }
.hchip:disabled { opacity: 0.45; cursor: default; }

/* congés et fermetures */
.cgs { display: grid; gap: 10px; }
.cg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px;
  padding: 14px 12px 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--paper-2);
}
.cg__f { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)) minmax(0, 1fr); gap: 10px 12px; }
.cg__f .field { gap: 6px; }
.cg__f .lbl { font-size: 13px; }
.opt-l { font-weight: 400; color: var(--ink-2); }
.in--sm { height: 42px; padding: 0 14px; font-size: 14.5px; }
.in--date { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.cg__err { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--danger); }
.empty { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* transferts */
.opts--sm { gap: 8px; }
.opts--sm .opt { padding: 13px 16px; }
.opts--sm .opt__t { font-size: 15px; }
.opts--sm .opt__d { font-size: 14px; }
.week--tr { margin-top: 6px; padding: 10px 14px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.week--tr .day { margin-inline: -6px; }

/* ---------- Acte 4 : prête ---------- */
.prete {
  min-height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-inline: var(--gutter); padding-block: clamp(16px, 4vh, 56px) clamp(80px, 11vh, 104px);
}
.wave-slot--prete { width: min(980px, 90vw); height: clamp(120px, 20vh, 200px); }
.prete__quote { margin: 0 0 10px; max-width: 40ch; font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.4; transition: opacity 400ms var(--ease-out); }
.prete__quote.is-dim { opacity: 0.35; }
.prete .lede { margin-bottom: 26px; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Dock de la maquette ---------- */
.dock {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(12px, 2.2vh, 22px) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(251, 250, 248, 0.95); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.dock__label { padding: 0 10px 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.dock button { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 13px var(--display); color: var(--ink-2); transition: background-color 160ms ease, color 160ms ease; }
.dock button[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Horaires « à confirmer », sous-question des urgences ---------- */
.fi__s--confirm { color: var(--warn); }
.fact__tag { display: flex; width: max-content; margin-top: 8px; }
body.is-offer #orb { filter: grayscale(1); }
.subq { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.subq__l { margin: 0; font-size: 14.5px; font-weight: 600; }
.subq__err { margin: 0; font-size: 13px; line-height: 1.4; color: var(--danger); }

/* ---------- Agenda connecté (question de l'entretien) ---------- */
.spin { display: inline-block; flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--accent); animation: spin 700ms linear infinite; }
.swap-in { animation: swapIn 240ms var(--ease-out); }
@keyframes swapIn { from { opacity: 0; filter: blur(3px); transform: scale(0.98); } }

/* ---------- Fiche contact : qui vous êtes, juste avant l'assemblage ---------- */
.contact {
  min-height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-inline: var(--gutter); padding-block: clamp(16px, 4vh, 56px) clamp(80px, 11vh, 104px);
}
.orb-slot--contact { width: clamp(88px, 13vh, 128px); aspect-ratio: 1; margin: 0 0 clamp(22px, 4vh, 40px); }
.contact .h-2 { margin-bottom: 14px; }
.contact .h-2:focus { outline: none; }
.contact .lede { max-width: 34rem; }
.contact__form { width: min(600px, 100%); display: grid; gap: 14px; text-align: left; }
.contact__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* champs en creux, erreur en ligne sous chaque champ */
.contact__form .in { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.contact__form .in:focus { border-color: transparent; box-shadow: var(--sunk), 0 0 0 3px rgba(10, 132, 255, 0.3); }
.contact__form .in[aria-invalid="true"] { box-shadow: var(--sunk), 0 0 0 1.5px var(--danger); }
.contact__form .err { font-size: 13.5px; line-height: 1.4; }
.contact__go { display: flex; justify-content: center; padding-top: 6px; }
.contact__rgpd { margin: 22px 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Test : elle s'assemble, puis s'appelle elle-même ---------- */
.bench__sub { margin: 0 0 24px; max-width: 42ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.tests { list-style: none; margin: 0 0 20px; padding: 0; display: grid; }
.tests li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 32px; font-size: 15px; line-height: 1.3; color: var(--ink-2); transition: color 220ms ease; }
.tests .ic { display: grid; place-items: center; width: 18px; height: 18px; }
.tests .ic svg { width: 16px; height: 16px; }
.tests .ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.tests .n { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.tests li[data-s="run"] { color: var(--ink); }
.tests li[data-s="run"] .ring { border-color: var(--accent); border-top-color: transparent; animation: spin 700ms linear infinite; }
.tests li[data-s="ok"] .ic { color: var(--accent); }
.tests li[data-s="ko"], .tests li[data-s="ko"] .ic { color: var(--danger); }
.tests li[data-s="skip"] { opacity: 0.45; }
.tests li[data-s="ok"] .ic svg, .tests li[data-s="ko"] .ic svg { animation: pop 260ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.8); } }
.bench__fail { display: grid; gap: 16px; }
.bench__why { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--danger-wash); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.bench__ref { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Prête : l'appel test scripté ----------
   Une feuille posée : la rangée d'instrument (LED en direct, état, vumètre, chronomètre, « Raccrocher »),
   puis le sous-titre (qui parle, la réplique) ; l'indicateur de frappe quand elle note ; la sonnerie du transfert. */
.callbar {
  display: grid; gap: 12px; width: min(680px, 100%); box-sizing: border-box; padding: 6px 6px 16px; text-align: left;
  border-radius: 24px; border: 0;
  background-color: var(--sheet); background-image: linear-gradient(180deg, var(--sheet-hi), var(--sheet)); background-size: 100% 100%;
  box-shadow: var(--lift-2);
}
.callbar__row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding-left: 16px; }
.callbar__dot { flex: none; }
.callbar__ring { display: none; width: 18px; height: 18px; color: var(--ink); }
.callbar__ring svg { width: 18px; height: 18px; }
.callbar[data-state="connecting"] .callbar__dot, .callbar:not([data-state="connecting"]) .spin, .callbar[data-state="connecting"] .callbar__time, .callbar[data-state="connecting"] .vu { display: none; }
.callbar[data-state="ringing"] .callbar__dot, .callbar[data-state="ringing"] .vu { display: none; }
.callbar[data-state="ringing"] .callbar__ring { display: inline-grid; place-items: center; animation: ring 1s var(--ease-out) infinite; }
.callbar__t { font-size: 15px; font-weight: 500; white-space: nowrap; }
.vu { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.vu i { display: block; width: 3px; border-radius: 1px; background: var(--hair-2); transition: background-color 140ms ease; }
.vu i:nth-child(1) { height: 5px; } .vu i:nth-child(2) { height: 8px; } .vu i:nth-child(3) { height: 11px; } .vu i:nth-child(4) { height: 14px; } .vu i:nth-child(5) { height: 16px; }
.callbar[data-talk="1"] .vu i:nth-child(-n+4) { background: var(--live); }
.callbar__time { margin-left: auto; padding: 7px 11px; border-radius: 999px; font: 500 13px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink); background: var(--well); box-shadow: var(--sunk); }
.callbar .btn--hang { flex: none; }
.btn--hang { background: var(--danger); color: #fff; }
/* le fil de la conversation, en direct : l'assistante à gauche sur une feuille, l'équipe à gauche en encre, vous à droite en creux,
   les gestes de l'appel au milieu (elle note, elle consulte l'agenda, le transfert). Pendant l'appel, l'accueil et ses outils s'effacent. */
.prete.is-call .prete__quote, .prete.is-call .prete__tools, .prete.is-call #prete-lede, .prete.is-call .prete__edit { display: none; }
.prete.is-call .callbar { width: min(760px, 100%); }
/* le témoin du micro : ouvert, ou coupé pendant qu'elle parle (mode haut-parleurs de Safari) */
.callbar__mic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); background: var(--well); box-shadow: var(--sunk); transition: color 160ms ease; }
.callbar__mic svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity 160ms ease; }
.callbar__mic svg:last-child, .callbar__mic[data-muted="1"] svg:first-child { opacity: 0; }
.callbar__mic[data-muted="1"] svg:last-child { opacity: 1; }
.callbar__mic[data-muted="1"] { color: var(--ink-3); }
.callbar[data-state="connecting"] .callbar__mic, .callbar[data-state="ringing"] .callbar__mic { display: none; }
/* pendant l'appel, le titre et l'onde se resserrent : le fil tient entre l'onde et le dock, sans défilement de la page */
.prete .h-hero { transition: font-size 420ms var(--ease-out); }
.prete .wave-slot--prete { transition: height 420ms var(--ease-out), margin 420ms var(--ease-out); }
.prete.is-call { justify-content: flex-start; }
.prete.is-call .h-hero { font-size: clamp(34px, min(4.4vw, 6.4vh), 64px); }
.prete.is-call .wave-slot--prete { height: clamp(64px, 11vh, 110px); margin-block: 4px 10px; }
.prete.is-call .thread { max-height: clamp(150px, calc(100dvh - 420px), 520px); }
.thread { display: flex; flex-direction: column; gap: 12px; min-height: 96px; max-height: min(46vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 4px; scrollbar-width: thin; }
.thread:empty::before { content: "La conversation s'affiche ici, en direct."; align-self: center; margin: auto; font-size: 14px; color: var(--ink-3); }
.msg { display: grid; gap: 4px; max-width: 84%; animation: msg-in 260ms var(--ease-out) both; }
.msg__who { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.msg__t { margin: 0; padding: 10px 14px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.msg--lea, .msg--team { align-self: flex-start; }
.msg--lea .msg__t { background: var(--raised); box-shadow: var(--lift-1); border-bottom-left-radius: 5px; }
.msg--team .msg__t { color: #fff; background-color: #0b0b0b; background-image: var(--ink-face); background-size: 100% 100%; box-shadow: var(--ink-edge); border-bottom-left-radius: 5px; }
.msg--you { align-self: flex-end; justify-items: end; }
.msg--you .msg__t { background: var(--well); box-shadow: var(--sunk); border-bottom-right-radius: 5px; }
.msg.is-live .msg__t::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.14em; border-radius: 1px; background: var(--live); animation: caret 900ms steps(2) infinite; }
.msg.is-wait .msg__t { padding: 14px 16px; }
.ev { align-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 13px; border-radius: 999px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); background: var(--well); box-shadow: var(--sunk); animation: msg-in 260ms var(--ease-out) both; }
.ev svg { flex: none; width: 15px; height: 15px; }
.ev.is-live { color: var(--ink); }
.ev--note { padding: 0 8px; max-width: 46ch; border-radius: 0; background: none; box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-align: center; color: var(--ink-2); }
.thread .dots { display: inline-flex; gap: 3px; }
.thread .dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; animation: typing 900ms ease-in-out infinite; }
.thread .dots i:nth-child(2) { animation-delay: 150ms; }
.thread .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes typing { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(0); } }
/* l'accueil : écouter, modifier sur place ; l'étape suivante (les offres) ; le quota d'essais */
.prete__tools { display: flex; justify-content: center; gap: 10px; margin: 0 0 22px; }
.prete__tools .btn.is-playing, .voice__play.is-playing { box-shadow: 0 0 0 1.5px var(--live); }
.btn.is-loading { cursor: progress; opacity: 0.7; }
.prete__edit { width: min(600px, 100%); margin: 0 auto 22px; display: grid; gap: 8px; text-align: left; }
.prete__edit textarea.in { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.prete__edit textarea.in:focus { border-color: transparent; box-shadow: var(--sunk), 0 0 0 3px rgba(10, 132, 255, 0.3); }
.prete__edit .row { align-items: center; }
.prete__why { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.prete__next { margin: 22px 0 0; font-size: 14px; color: var(--ink-2); }
.prete__next .linkbtn { padding: 0; font-size: inherit; }

/* ---------- Après l'appel : la pop-up, noir et blanc inversé (v8) ----------
   Le monde passe en niveaux de gris derrière le voile, puis la carte blanche monte.
   Elle rappelle le chemin déjà fait (quatre étapes cochées), la seule qui manque (sa ligne)
   et le geste qui la comble. Sortie plus rapide que l'entrée. */
.offer-scrim {
  position: fixed; inset: 0; z-index: 7; background: rgba(11, 11, 11, 0.34);
  -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}
.offer-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 520ms var(--ease-out), visibility 0s; }
.offer {
  position: fixed; z-index: 8; left: 50%; top: 50%;
  width: min(500px, calc(100vw - 32px)); box-sizing: border-box; padding: 38px 36px 26px;
  max-height: calc(100dvh - 24px); overflow-y: auto;
  border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.55), 0 12px 30px -18px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(11, 11, 11, 0.05);
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 14px)) scale(0.96); filter: blur(4px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out), visibility 0s linear 180ms;
}
.offer.is-on {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%); filter: blur(0);
  transition: opacity 320ms var(--ease-out) 160ms, transform 460ms var(--ease-out) 160ms, filter 320ms var(--ease-out) 160ms, visibility 0s;
}
.offer ::selection { background: rgba(11, 11, 11, 0.14); color: var(--ink); }
.offer :focus-visible { outline-color: var(--ink); }
.offer__grab { display: none; }
.offer__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; color: var(--ink-2); }
.offer__x svg { width: 17px; height: 17px; }
.offer__t { margin: 0 40px 12px 0; font-size: clamp(28px, 2.7vw, 34px); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.offer__t:focus { outline: none; }
.offer__d { margin: 0 0 22px; max-width: 40ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* le chemin fait : quatre coches pleines, puis l'étape qui manque en pointillé */
.offer__steps { list-style: none; margin: 0 0 24px; padding: 8px 0; display: grid; border-block: 1px solid var(--line); }
.offer__steps li { display: flex; align-items: center; gap: 12px; min-height: 34px; font-size: 15px; }
.offer__steps .k { font-weight: 500; }
.offer__steps .v { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer__steps li[data-s="todo"] .k { font-weight: 600; }
.offer__steps li[data-s="todo"] .v { color: var(--ink); }
.ck { flex: none; width: 20px; height: 20px; overflow: visible; }
.ck circle { fill: var(--ink); }
.ck path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.offer__steps li[data-s="todo"] .ck circle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2.6 2.4; }
/* entrée : les lignes après la carte, puis les coches se tracent une à une.
   Hors .is-on, la remise à zéro attend la fin de la sortie (200 ms) pour ne jamais se voir. */
.offer__steps li { opacity: 0; transform: translateY(6px); transition: opacity 0s linear 200ms, transform 0s linear 200ms; }
.offer.is-on .offer__steps li { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) calc(320ms + var(--i) * 50ms), transform 360ms var(--ease-out) calc(320ms + var(--i) * 50ms); }
.ck path { transition: stroke-dashoffset 0s linear 200ms; }
.offer.is-on .ck path { stroke-dashoffset: 0; transition: stroke-dashoffset 260ms var(--ease-out) calc(480ms + var(--i) * 80ms); }
.offer__ctas { display: flex; gap: 10px; }
.offer__go { flex: 1 1 auto; }
.offer__fine { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
#orb { transition: filter 700ms var(--ease-out); }
body[data-act="offres"] #orb { filter: grayscale(1); }
/* ---------- Offres : l'univers noir et blanc (v8) ----------
   Fond gris neutre, cartes blanches, la formule conseillée en encre, le sur-mesure en filaire.
   À l'arrivée, l'onde grise se défait en poussière et dessine le contour des quatre cartes (Orb.cards) ;
   chaque carte se matérialise sous ses grains, son texte ne paraît qu'une fois les grains posés. */
.paper::after { content: ''; position: absolute; inset: 0; background: #e9e9e7; opacity: 0; transition: opacity 700ms var(--ease-out); }
body[data-act="offres"] .paper::after { opacity: 1; }
.plans { min-height: 100%; box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding: clamp(12px, 2.4vh, 36px) var(--gutter) clamp(104px, 14vh, 128px); }
.plans__head { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: clamp(18px, 2.4vh, 28px); }
.plans__t { margin: 0; font-size: clamp(32px, min(3.6vw, 5.6vh), 54px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.plans__t:focus { outline: none; }
.plans__ctl { display: grid; justify-items: center; gap: 9px; }
.plans__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Mensuel / Annuel : une pastille d'encre glisse sous le choix */
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(11, 11, 11, 0.07); }
.seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
  border: 0; border-radius: 999px; background: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: color 220ms ease;
}
.seg button[aria-checked="true"] { color: #fff; }
.seg button:focus-visible { outline-color: var(--ink); outline-offset: 2px; }
.seg__off { font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(11, 11, 11, 0.08); color: var(--ink); transition: background-color 220ms ease, color 220ms ease; }
.seg button[aria-checked="true"] .seg__off { background: rgba(255, 255, 255, 0.18); color: #fff; }
.seg__ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform 340ms var(--ease-io), width 340ms var(--ease-io); }
.seg.is-still .seg__ind { transition: none; }
/* les cartes : une sous-grille aligne nom, prix, minutes, bouton et liste d'une carte à l'autre */
.plans__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; align-items: start; }
.plans__wave { position: absolute; left: 0; right: 0; top: calc(min(50%, 290px) - 90px); height: 180px; pointer-events: none; }
.plan {
  grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; box-sizing: border-box; margin-bottom: 14px;
  padding: 20px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(11, 11, 11, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 22px 44px -34px rgba(0, 0, 0, 0.4);
}
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.plan__name { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.plan__tag { font-size: 12.5px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(11, 11, 11, 0.07); }
.plan__pitch { margin: 5px 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-height: 44px; }
.plan__was { font-size: 16px; color: var(--ink-2); text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.plan__amt { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.plan__amt--txt { font-size: 27px; letter-spacing: -0.025em; }
.plan__per { font-size: 13.5px; color: var(--ink-2); }
.plan__sub { margin: 3px 0 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.plan__min { margin: 0; padding: 10px 0; border-block: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.plan__min b { font-weight: 600; font-variant-numeric: tabular-nums; }
.plan__min span { display: block; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.plan__cta { width: 100%; margin: 16px 0 16px; }
.plan__feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; font-size: 13.5px; line-height: 1.38; }
.plan__feat li { display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; align-items: start; }
.plan__feat svg { width: 16px; height: 16px; margin-top: 1.5px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan__feat .is-lead { display: block; font-weight: 600; }
.plan__feat .is-out { color: var(--ink-2); opacity: 0.62; }
.plan__feat .is-hl { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: start; margin: 0 0 4px; padding: 11px 12px; border-radius: 12px; background: var(--ink); color: #fff; }
.plan__feat .is-hl svg { width: 18px; height: 18px; margin-top: 1px; }
.plan__feat .is-hl b { display: block; font-weight: 600; font-size: 14px; }
.plan__feat .is-hl small { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
/* Pro, conseillée : la carte passe en encre */
.plan--encre { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7); }
.plan--encre .plan__pitch, .plan--encre .plan__per, .plan--encre .plan__sub, .plan--encre .plan__was, .plan--encre .plan__min span { color: rgba(255, 255, 255, 0.64); }
.plan--encre .plan__min { border-color: rgba(255, 255, 255, 0.14); }
.plan--encre .plan__tag, .plan--encre .plan__cta { background: #fff; color: var(--ink); }
.plan--encre .is-out { color: rgba(255, 255, 255, 0.6); }
.plan--encre :focus-visible { outline-color: #fff; }
/* Sur mesure : filaire, hors grille tarifaire */
.plan--mesure { background: transparent; border-color: rgba(11, 11, 11, 0.24); box-shadow: none; }
.plan.is-chosen { box-shadow: 0 0 0 2px var(--ink), 0 22px 44px -34px rgba(0, 0, 0, 0.4); }
.plan--encre.is-chosen { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink), 0 30px 60px -36px rgba(0, 0, 0, 0.7); }
.plans__foot { display: grid; justify-items: center; gap: 8px; margin-top: 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.plans__foot p { margin: 0; max-width: 70ch; text-wrap: pretty; }
.plans__msg { min-height: 1.5em; font-weight: 500; color: var(--ink); }
.plans__foot .linkbtn { margin-top: 6px; }
.act#act-offres :focus-visible { outline-color: var(--ink); }
.act#act-offres ::selection { background: rgba(11, 11, 11, 0.14); color: var(--ink); }
/* arrivée : la carte se matérialise sous ses grains (sans échelle : les grains visent son contour exact),
   puis son texte, puis le choix de facturation et le pied */
.plan { opacity: 0; filter: blur(6px); }
.plan.is-in { opacity: 1; filter: none; transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out), box-shadow 320ms var(--ease-out); }
/* avec la poussière : la carte s'ouvre depuis la ligne de l'onde en épousant le trajet des grains. Le script pose, à chaque
   image, un polygone dont chaque sommet va, comme un grain, de sa place sur la ligne à sa place sur le contour (même courbe et
   même horloge que le shader, sur la hauteur réelle de l'onde). Ouverte, elle retrouve ses coins arrondis et son ombre */
.plan.is-pre { opacity: 0; filter: none; box-shadow: none; transition: none; }
.plan > * { opacity: 0; transform: translateY(6px); }
/* le texte balaie la rangée de cartes : rangée par rangée, et de gauche à droite dans chaque rangée */
.plan.is-lit > * { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out) calc(var(--j, 0) * 45ms + var(--ci, 0) * 35ms), transform 460ms var(--ease-out) calc(var(--j, 0) * 45ms + var(--ci, 0) * 35ms); }
.pl-in { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.plans.is-ready .pl-in { opacity: 1; transform: none; filter: none; transition: opacity 460ms var(--ease-out), transform 560ms var(--ease-out), filter 460ms var(--ease-out); }
/* Mensuel / Annuel : prix, minutes et liste se relaient dans un léger flou */
.plan.is-swap .plan__swap { opacity: 0.15; filter: blur(3px); transform: translateY(3px); }
.plan.is-swapping .plan__swap { transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out), transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .seg button[aria-checked="false"]:hover { color: var(--ink); }
  .plan--encre .plan__cta:hover { background: #ecebe9; }
}
@media (max-width: 1120px) {
  .plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .plans__grid { grid-template-columns: minmax(0, 1fr); }
  .plan { grid-row: auto; display: flex; flex-direction: column; }
  .plans__wave { top: 110px; }
  .seg button { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan.is-in, .pl-in, .plans.is-ready .pl-in { filter: none; transform: none; }
  .plan > *, .plan.is-lit > * { transform: none; }
  .plan.is-swap .plan__swap { filter: none; transform: none; }
  .seg__ind { transition: none; }
}

@media (hover: hover) and (pointer: fine) {
  .btn--hang:hover { background: #8a1c15; }
  .offer__x:hover { background: rgba(11, 11, 11, 0.06); color: var(--ink); }
  .offer .btn--ghost:hover { background: rgba(11, 11, 11, 0.05); }
}

/* ---------- Dock : étapes et variantes de la maquette ---------- */
.dock { max-width: calc(100vw - 24px); box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.dock::-webkit-scrollbar { display: none; }
.dock > * { flex: none; }
.dock__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }
.dock .dock__var { display: inline-flex; align-items: center; gap: 6px; }
.dock .dock__var svg { width: 14px; height: 14px; }
.dock .dock__var[aria-expanded="true"] { background: var(--paper-3); color: var(--ink); }
.dockpop {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(12px, 2.2vh, 22px) + 54px + env(safe-area-inset-bottom, 0px));
  width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 6px 16px;
  border-radius: 16px; background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 22px 50px -22px rgba(46, 40, 30, 0.5), 0 1px 3px rgba(46, 40, 30, 0.08);
}
.dockpop .line { min-height: 48px; padding-block: 6px; box-sizing: border-box; }
.dockpop .line + .line { border-top: 1px solid var(--line); }
.dockpop .line__t { cursor: default; font-size: 14.5px; }

/* ============================================================================
   v9 « Instrument sur papier » : l'atelier (papier grainé, feuilles, creux, encre en relief).
   Tout est encre sur papier ; seule la voix de Léa a des couleurs (fil de voix).
   Périmètre : tout sauf la pop-up (.offer*) et l'écran Offres (#act-offres).
   ============================================================================ */
.act { overflow-x: hidden; }
.mono, .m-num { font-variant-numeric: tabular-nums; }

/* barre : filet d'instrument, tuile en relief, index d'étape */
.bar::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--hair) 14%, var(--hair) 86%, transparent); transition: opacity 400ms var(--ease-out); }
.brand__tile { background: var(--raised); box-shadow: var(--lift-1); }
.bar__idx { position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 300ms var(--ease-out); }
/* une étape par acte du parcours (le dock en compte six), jamais deux fois le même numéro */
.bar__idx::before { content: "01 / 06"; }
body[data-act="lecture"] .bar__idx::before { content: "02 / 06"; }
body[data-act="atelier"] .bar__idx::before { content: "03 / 06"; }
body[data-act="contact"] .bar__idx::before { content: "04 / 06"; }
body[data-act="offres"] .bar__idx { opacity: 0; }
body[data-act="assemblage"] .bar__idx::before { content: "05 / 06"; }
body[data-act="prete"] .bar__idx::before { content: "06 / 06"; }
/* téléphone : la barre est trop étroite pour l'index, la marque et le brouillon */
@media (max-width: 480px) { .bar__idx { display: none; } }

/* bouton primaire : encre en relief (le pop-up et les offres gardent le leur) */
.act:not(#act-offres) .btn--primary, .volet .btn--primary {
  color: #fff; border-color: transparent;
  background-color: #0b0b0b; background-image: var(--ink-face); background-size: 100% 100%;
  box-shadow: var(--ink-edge);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), filter 150ms ease;
}
.act:not(#act-offres) .btn--primary:active, .volet .btn--primary:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px #000, 0 1px 1px rgba(0, 0, 0, 0.2); }
.act:not(#act-offres) .btn--ghost, .volet .btn--ghost { background: var(--sheet); border-color: transparent; box-shadow: 0 0 0 1px var(--hair-2), var(--hi), 0 1px 2px rgba(46, 40, 30, 0.05); }
.btn--hang { background-image: linear-gradient(180deg, #b52a20, #a1231b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(80, 8, 4, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18); }
@media (hover: hover) and (pointer: fine) {
  .act:not(#act-offres) .btn--primary:hover, .volet .btn--primary:hover { background-color: #0b0b0b; filter: brightness(1.16); }
  .act:not(#act-offres) .btn--ghost:hover, .volet .btn--ghost:hover { background: #fff; }
}

/* champs : en creux */
.in { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.in:focus { border-color: transparent; box-shadow: var(--sunk), 0 0 0 3px rgba(10, 132, 255, 0.3); }
.urlbar { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.urlbar:focus-within { border-color: transparent; box-shadow: var(--sunk), 0 0 0 3px rgba(10, 132, 255, 0.3); }
.slot { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.slot:focus-within { border-color: transparent; box-shadow: var(--sunk), 0 0 0 3px rgba(10, 132, 255, 0.3); }
.slot.is-bad { border-color: transparent; box-shadow: var(--sunk), 0 0 0 1.5px var(--danger); }
.sw { background: var(--well); box-shadow: var(--sunk); }
.sw[aria-checked="true"] { background-color: #0b0b0b; background-image: var(--ink-face); box-shadow: var(--ink-edge); }
.sw::after { background: linear-gradient(180deg, #fff, #f3f1ec); }

/* le seuil : champ de mesure et croix de repérage autour de la scène de l'onde */
#slot-seuil, #slot-prete, .orb-slot--lecture { position: relative; }
#slot-seuil::before, #slot-prete::before, .orb-slot--lecture::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(11, 11, 11, 0.24) 0.9px, transparent 1.4px) 0 0 / 20px 20px;
}
#slot-seuil::before, #slot-prete::before { inset: -8px -7%; -webkit-mask: radial-gradient(closest-side at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(closest-side at 50% 50%, #000 30%, transparent 100%); }
.orb-slot--lecture::before { inset: -26%; -webkit-mask: radial-gradient(closest-side, #000 34%, transparent 100%); mask: radial-gradient(closest-side, #000 34%, transparent 100%); }
#slot-seuil::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none; --c: var(--hair-3);
  background:
    linear-gradient(var(--c), var(--c)) 6px 0 / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 0 6px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 6px) 0 / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 100% 6px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 6px 100% / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 0 calc(100% - 6px) / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 6px) 100% / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 100% calc(100% - 6px) / 13px 1px no-repeat;
}

/* la lecture : un journal d'instrument */
.pages li { grid-template-columns: 26px 18px minmax(0, 1fr) auto; gap: 8px; height: 36px; border-bottom: 1px dashed var(--hair-dash); }
.pages li:last-child { border-bottom: 0; }
.pages .ix { align-self: center; }
.pages li[data-s="reading"] .ix { color: var(--ink); }
.pages .n { min-width: 4.6em; text-align: right; }
.lecture__sum b { font-family: var(--mono); font-size: 0.9em; font-weight: 500; }
.tests li { border-bottom: 1px dashed var(--hair-dash); }
.tests li:last-child { border-bottom: 0; }

/* les questions : index mono, questions de Léa au fil de voix */
.progress__txt { font: 500 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.progress__txt b { font-weight: 500; color: var(--ink); }
.q h2 { position: relative; }
.prete__quote { max-width: 36ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.prete__quote::before { display: none; }
.chapters [aria-current="step"] { background: var(--well); box-shadow: var(--sunk); }
.chapters .n { color: var(--ink-3); }
.chapters [aria-current="step"] .n { color: var(--ink-2); }

/* feuilles posées */
.opt { border-color: transparent; background-color: var(--sheet); background-image: linear-gradient(180deg, var(--sheet-hi), var(--sheet)); background-size: 100% 100%; box-shadow: var(--lift-1); }
.opt:has(input:checked) { border-color: transparent; background-color: var(--raised); background-image: linear-gradient(180deg, #fff, var(--sheet-hi)); box-shadow: 0 0 0 1.5px var(--ink), var(--hi), 0 12px 24px -14px rgba(46, 40, 30, 0.22); }
.opt__mk { border-color: var(--hair-3); background: var(--well); box-shadow: inset 0 1px 2px rgba(46, 40, 30, 0.14); }
.opt:has(input:checked) .opt__mk { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #fff; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: transparent; }
  .opt:not(:has(input:checked)):hover { box-shadow: 0 0 0 1px var(--hair-3), var(--hi), 0 2px 5px -2px rgba(46, 40, 30, 0.08); }
  .chip:hover { border-color: transparent; }
  .chip[aria-pressed="false"]:hover, .chip[aria-checked="false"]:hover { box-shadow: 0 0 0 1px var(--hair-3), var(--hi); }
}
.chip { border-color: transparent; background: var(--sheet); box-shadow: 0 0 0 1px var(--hair-2), var(--hi), 0 1px 2px rgba(46, 40, 30, 0.05); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: transparent; color: #fff; background-color: #0b0b0b; background-image: var(--ink-face); background-size: 100% 100%; box-shadow: var(--ink-edge); }
.chip:disabled { box-shadow: 0 0 0 1px var(--hair); }
.fiche__box, .say__q, .cg, .subq, .week--tr {
  border-color: transparent; background-color: var(--sheet); background-image: linear-gradient(180deg, var(--sheet-hi), var(--sheet)); background-size: 100% 100%; box-shadow: var(--lift-1);
}
.fiche__box { border: 0; overflow: hidden; }
.fiche__n { font: 500 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.fg { border-top: 1px solid var(--hair); }
.fg h3 { font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.fg--w h3 { color: var(--warn); }
.fi + .fi::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px dashed var(--hair-dash); }
.fi.is-editing { background: var(--raised); box-shadow: var(--sunk); }
.fi.is-editing::before, .fi.is-editing + .fi::before { display: none; }
.fact + .fact { border-top: 1px dashed var(--hair-dash); }
.hours { gap: 6px; }
.hours > * { border-color: transparent; background: var(--well); box-shadow: var(--sunk); }
.hours > *.off { background: transparent; box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 1px rgba(46, 40, 30, 0.05); }
@media (hover: hover) and (pointer: fine) { .hours > button:hover { border-color: transparent; background: #f8f6f2; } }
.hours span { color: var(--ink-2); }

/* premier plan : le volet, la fenêtre de copie */
.volet { border: 0; background: var(--raised); box-shadow: var(--lift-3); }
.volet__head { border-bottom-color: var(--hair); }
.volet__foot { border-top-color: var(--hair); background-color: var(--sheet); }
.vs { border-top-color: var(--hair); }
.pop { border: 0; background: var(--raised); box-shadow: var(--lift-3); }
.dockpop { border: 0; background: var(--raised); box-shadow: var(--lift-2); }
.dock { border: 0; background-color: rgba(251, 250, 248, 0.96); box-shadow: var(--lift-1); }
.dock__label { color: var(--ink-3); }

/* prête : LED verte, fil de voix sur l'accueil */
.prete__led { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.6vh, 28px); }
.prete__led .m-label { color: var(--ink-2); }


/* ============================================================================
   v9.2 : 3 chapitres, conduite des motifs, prénom et voix réelles, fiche contact, appel test en direct, pop-up des offres (v9)
   ============================================================================ */
/* la barre s'efface derrière la pop-up : le monde gris, puis la carte blanche, rien d'autre à atteindre */
.bar { transition: opacity 300ms var(--ease-out); }
body[data-act="offres"] .bar::after { opacity: 0; }
body.is-offer .bar { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), visibility 0s linear 200ms; }
/* arrivée en poussière : la question est peinte dès l'arrivée, ses mots attendent que la poussière soit passée */
.act.is-dust .q h2 .w { animation-play-state: paused; }
.act.is-dust.dust-facts .q h2 .w { animation-play-state: running; }
/* sous-titres d'un même écran (prénom, voix) */
.sub--first { margin-top: 0; }
/* la conduite : une ligne par motif coché, deux choix */
.cd { display: grid; }
.cd__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px dashed var(--hair-dash); }
.cd__r:first-child { border-top: 0; padding-top: 0; }
.cd__m { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.cd__m small { display: block; margin-top: 2px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); }
.cd__r .chips { flex-wrap: nowrap; }
@media (max-width: 640px) { .cd__r { grid-template-columns: minmax(0, 1fr); } .cd__r .chips { flex-wrap: wrap; } }
/* la fiche repliée (téléphone) : son contenu n'existe plus pour la page, rien à mesurer ni à atteindre */
.fiche__box:not([open]) .fiche__body { display: none; }

/* ---------- Adaptations ---------- */
@media (max-width: 1180px) {
  .atelier { grid-template-columns: 210px minmax(0, 1fr); }
  .fiche { grid-column: 2; position: static; }
  .fiche__body { max-height: none; }
}
@media (max-width: 860px) {
  .lecture { grid-template-columns: 1fr; align-content: start; }
  .lecture__orb { min-height: 0; padding-top: 4px; padding-left: 0; place-items: center; }
  .orb-slot--lecture { width: min(62vw, 34vh, 320px); }
  .lecture__log { max-width: none; }
  .atelier { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rail { position: static; gap: 14px; }
  .rail__who { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .orb-slot--rail { width: 76px; height: 76px; margin-left: -6px; }
  .chapters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .chapters button { width: auto; white-space: nowrap; grid-template-columns: 16px auto auto; background: var(--paper-2); border: 1px solid var(--line); }
  .fiche { grid-column: 1; }
  .voices { grid-template-columns: 1fr; }
  .fact { grid-template-columns: minmax(0, 1fr) auto; }
  .fact__l { grid-column: 1 / -1; }
  .hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dock__label { display: none; }
  .saved__t { display: none; }
  .orb-slot--lecture { width: min(52vw, 28vh, 280px); }
  .pages li { height: 30px; }
}
@media (max-width: 560px) {
  .urlbar { flex-wrap: wrap; height: auto; padding: 8px; border-radius: 28px; }
  .urlbar__prefix { padding-left: 12px; }
  .urlbar input { height: 48px; }
  .urlbar .btn { width: 100%; }
  .qnav { flex-wrap: wrap; }
  .dock button { padding: 0 10px; font-size: 12.5px; }
  .progress { flex-wrap: wrap; row-gap: 8px; }

  /* le volet devient une feuille qui monte du bas */
  .volet {
    top: calc(10px + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; left: 0; width: auto;
    border-radius: 16px 16px 0 0; border-bottom: 0; transform: translateY(100%);
  }
  .volet.is-on { transform: none; }
  .volet__head { padding: 18px 10px 14px 16px; }
  .volet__title { font-size: 21px; }
  .volet__body { padding: 18px 16px 28px; gap: 24px; }
  .volet__foot { gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .volet__saved { display: none; }
  .say__q { padding: 16px 18px; font-size: 16px; }
  .day {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n acts sw" "sl sl sl" "er er er";
    gap: 8px 10px; padding: 10px; margin-inline: -10px;
  }
  .day.is-off { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "n sl acts sw" "er er er er"; }
  .day__n { grid-area: n; }
  .day .sw { grid-area: sw; }
  .day__acts { grid-area: acts; min-width: 0; }
  .day__slots { grid-area: sl; }
  .day__err { grid-area: er; }
  .slot { height: 44px; }
  .slot .t { height: 36px; }
  .week--tr { padding: 8px 10px; }
  .pop { left: 6px; right: 6px; width: auto; }
  .cg__f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg__f .field:last-child { grid-column: 1 / -1; }

  /* la pop-up devient une feuille posée en bas de l'écran : elle monte du bord, se glisse vers le bas pour fermer */
  .offer {
    top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto;
    max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain;
    padding: 34px 22px 18px; border-radius: 28px;
    opacity: 1; filter: none; transform: translateY(calc(100% + 24px));
    transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .offer.is-on { transform: none; filter: none; transition: transform 520ms var(--ease-drawer) 140ms, visibility 0s; }
  .offer.can-drag { touch-action: none; }
  .offer.is-drag { transition: none; }
  .offer__grab { display: block; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(11, 11, 11, 0.16); }
  .offer__x { top: 12px; right: 12px; }
  .offer__t { font-size: 26px; margin-right: 38px; }
  .offer__d { font-size: 15.5px; margin-bottom: 18px; }
  .offer__steps { margin-bottom: 20px; }
  .offer__steps li { min-height: 32px; font-size: 14.5px; }
  .offer__ctas { flex-direction: column; }
  .offer__ctas .btn { width: 100%; }
  .offer__fine { text-align: center; }
  .contact__two { grid-template-columns: minmax(0, 1fr); }
  .contact__go .btn { width: 100%; }
  .callbar { width: 100%; padding: 6px 6px 14px; }
  .callbar__row { flex-wrap: wrap; justify-content: center; min-height: 0; padding: 8px 8px 0 12px; }
  .callbar__time { margin-left: 0; }
  .callbar .btn--hang { flex: 1 1 100%; }
  .thread { max-height: 52vh; padding-inline: 8px; }
  .msg { max-width: 92%; }
  .prete__tools { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .volet, .volet.is-on { transform: none; }
  .volet { opacity: 0; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .volet.is-on { opacity: 1; transition: opacity 160ms ease, visibility 0s; }
  .sw::after { transition: none; }
  .act .st, .act.is-on .st { transform: none; filter: none; transition: opacity 200ms ease; }
  .q, .q.is-out, .q.is-pre { transform: none; filter: none; }
  .q h2 .w { animation: none; opacity: 1; transform: none; filter: none; }
  .pages li[data-s="reading"] .ring { animation: none; }
  .fi.is-fresh { animation: none; background-color: rgba(10, 132, 255, 0.1); }
  .offer { filter: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .offer.is-on { transition: opacity 220ms ease, visibility 0s; }
  .offer__steps li, .offer.is-on .offer__steps li { transform: none; }
  .ck path, .offer.is-on .ck path { stroke-dashoffset: 0; transition: none; }
  .thread .dots i, .msg, .ev, .msg.is-live .msg__t::after, .callbar[data-state="ringing"] .callbar__ring { animation: none; }
  .callbar__dot, .tests li[data-s="run"] .ring, .spin { animation: none; }
  .tests li[data-s="ok"] .ic svg, .tests li[data-s="ko"] .ic svg, .swap-in { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .offer { transform: none; opacity: 0; }
  .offer.is-on { opacity: 1; }
}

/* ---------- 02/10/2026 : la vraie lecture (site ou registre), dans le site ---------- */
/* les entreprises trouvées au registre : mêmes choix que les questions */
.regs { display: grid; gap: 14px; margin: 18px 0 6px; }
.regs .opt__rec { color: var(--warn); }
.lecture__alt { align-items: center; }
/* une ligne de la fiche trouvée au registre des entreprises */
.fi__s--reg { color: var(--ink-2); }
/* lecture en échec : la liste des étapes est vidée, elle ne garde pas sa marge */
.pages:empty { margin: 0; }
/* intégrée à l'accueil du site : « Revenir au site » dans la barre */
.bar__close { gap: 6px; }
.bar__close svg { width: 15px; height: 15px; }

/* ---------- 03/10/2026 : retouches d'Evan ---------- */
/* la voix recommandée : une étiquette discrète en haut à droite de sa carte */
.voice__rec {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 7px 3px;
  border-radius: 4px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
/* les formules : la petite flèche « en savoir plus » en haut à droite de la carte (à côté de « Conseillé » sur Pro) */
.plan__droite { display: inline-flex; align-items: center; gap: 8px; }
.plan__fleche {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.plan__fleche svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan__fleche:hover { background: rgba(255, 255, 255, 0.1); transform: translate(1px, -1px); }
.plan:not(.plan--encre) .plan__fleche { box-shadow: inset 0 0 0 1px var(--line-2); }
.plan:not(.plan--encre) .plan__fleche:hover { background: rgba(11, 11, 11, 0.06); }
/* sur une carte noire, l'encadré « Une automatisation offerte » se détache par un voile clair */
.plan--encre .plan__feat .is-hl { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
/* la confirmation d'une demande de formule : un bandeau d'encre en bas de l'écran, visible où que l'on soit dans la page */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(640px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 13px 20px 13px 16px;
  border-radius: 16px;
  font: 500 15px/1.4 var(--display);
  color: #fff;
  background: #0b0b0b linear-gradient(180deg, #262625 0%, #111110 55%, #0b0b0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.18), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #6ee7a0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast--err { background: #a1231b; }
/* le bouton d'une formule déjà demandée */
.plan__cta.is-sent { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.plan__cta.is-sent svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }