/* TonIAssistant · "Vos données". Every selector is scoped under .tr or prefixed tr-.
   Light, in the site's own colours (white ground, ink text, the blue accent).
   Reads the page tokens (--sc-*, --glow) when present, falls back to Palette L otherwise.
   Without JS, or with reduced motion, every state is the final one. trust.js adds .tr-js to animate. */

.tr {
  --tr-ink: var(--sc-ink, #0a1020);
  --tr-accent: var(--sc-accent, #2152ff);
  --tr-glow: var(--tr-accent);
  --tr-paper: var(--sc-canvas, #ffffff);
  --tr-bg: var(--tr-paper);
  --tr-on: var(--tr-ink);
  --tr-on-soft: color-mix(in oklab, var(--tr-ink) 68%, var(--tr-paper));
  --tr-on-faint: color-mix(in oklab, var(--tr-ink) 50%, var(--tr-paper));
  --tr-line: color-mix(in oklab, var(--tr-ink) 10%, transparent);
  --tr-card: var(--tr-paper);
  --tr-display: var(--sc-font-display, "Bricolage Grotesque", "Geist", system-ui, sans-serif);
  --tr-text: var(--sc-font-text, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif);
  --tr-mono: var(--sc-font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  --tr-ease: var(--sc-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --tr-gutter: var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem));
  --tr-maxw: var(--sc-maxw, 82rem);
  --tr-t-xs: var(--sc-t-xs, clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem));
  --tr-t-sm: var(--sc-t-sm, clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem));
  --tr-t-base: var(--sc-t-base, clamp(1rem, 0.96rem + 0.22vw, 1.125rem));
  --tr-t-lg: var(--sc-t-lg, clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem));

  position: relative;
  isolation: isolate;
  background: var(--tr-bg);
  color: var(--tr-on);
  font-family: var(--tr-text);
  font-size: var(--tr-t-base);
  line-height: 1.55;
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: clip;
}
.tr::before { content: none; }
.tr *, .tr *::before, .tr *::after { box-sizing: border-box; }
.tr .ia { color: var(--tr-glow); }
.tr-wrap { width: 100%; max-width: var(--tr-maxw); margin-inline: auto; padding-inline: var(--tr-gutter); }

/* ---------- head + seal ---------- */
.tr-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.tr-main { min-width: 0; }
.tr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px 6px 9px; border-radius: 999px;
  font-size: var(--tr-t-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--tr-glow);
  background: color-mix(in oklab, var(--tr-glow) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tr-glow) 28%, transparent); }
.tr-eyebrow svg { width: 15px; height: 15px; }
.tr-title { margin: 0; font-family: var(--tr-display); font-weight: 500; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.tr-title em { font-style: normal; color: var(--tr-glow); }
.tr-lead { margin: 16px 0 0; max-width: 36rem; color: var(--tr-on-soft); font-size: var(--tr-t-base); line-height: 1.45; text-wrap: pretty; }

.tr-seal { position: relative; margin: 0; width: 100%; max-width: min(480px, 64vh); justify-self: end; aspect-ratio: 1; }
.tr-map { display: block; width: 100%; height: 100%; overflow: visible; }
.tr-halo { opacity: 0; }
.tr-map stop { stop-color: var(--tr-accent); }
.tr-dots circle { fill: var(--tr-on); opacity: 0.15; transition: opacity 600ms var(--tr-ease), fill 900ms var(--tr-ease); transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms + 520ms); }
.tr-dots circle.e { fill: var(--tr-glow); opacity: 0.92; }
.tr-route { fill: none; stroke: color-mix(in oklab, var(--tr-glow) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 3 6; }
.tr-pulse circle { fill: var(--tr-glow); }
.tr-pulse__ring { fill: none !important; stroke: var(--tr-glow); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tr-ring 2.6s var(--tr-ease) infinite; }
.tr-pulse__ring--2 { animation-delay: 1.3s; }
@keyframes tr-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(5.5); opacity: 0; } }
.tr-home { fill: var(--tr-on); stroke: var(--tr-ink); stroke-width: 3; }
.tr-ring { fill: none; stroke: color-mix(in oklab, var(--tr-glow) 50%, transparent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--tr-ease) 300ms; }
.tr-ringtext { font-family: var(--tr-mono); font-size: 15px; fill: var(--tr-on-faint); transition: opacity 900ms var(--tr-ease) 1200ms; }
.tr-lock { transform: translate(0px, -304px); transform-box: view-box; transform-origin: 0 0; transition: transform 600ms var(--tr-ease) 1500ms, opacity 400ms var(--tr-ease) 1500ms; }
.tr-lock circle { fill: var(--tr-accent); stroke: #fff; stroke-width: 6; }
.tr-lock rect { fill: #fff; }
.tr-lock path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
.tr-packet { fill: var(--tr-ink); }
.tr-packet--tail { fill: var(--tr-glow); }

.tr-tag { position: absolute; left: calc((var(--x) + 340) * 100% / 680); top: calc((var(--y) + 340) * 100% / 680);
  font-size: 0.78rem; font-weight: 500; line-height: 1; white-space: nowrap; padding: 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--tr-ink); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--tr-line), 0 6px 16px -10px rgba(10,16,32,.35); transition: opacity 500ms var(--tr-ease), transform 500ms var(--tr-ease); }
.tr-tag--lock { transform: translate(-50%, 0); color: var(--tr-glow); }
.tr-tag--call { transform: translate(16px, -50%); color: var(--tr-glow); }
.tr-tag--home { transform: translate(calc(-100% - 14px), -50%); }

/* ---------- three big facts ---------- */
.tr-facts { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.tr-fact { padding-top: 14px; border-top: 1px solid var(--tr-line); transition: opacity 700ms var(--tr-ease), transform 700ms var(--tr-ease); transition-delay: calc(var(--i) * 120ms); }
.tr-fact__big { display: block; font-family: var(--tr-display); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; letter-spacing: -0.035em; white-space: nowrap;
  color: var(--tr-glow); }
.tr-fact__big small { font-size: 0.42em; letter-spacing: -0.02em; }
.tr-fact__title { margin: 8px 0 0; font-size: var(--tr-t-sm); font-weight: 600; line-height: 1.3; }

/* ---------- three rules Toni keeps ---------- */
.tr-rules { list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tr-rule { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: var(--tr-card); box-shadow: inset 0 0 0 1px var(--tr-line);
  transition: opacity 700ms var(--tr-ease), transform 700ms var(--tr-ease); transition-delay: calc(var(--i) * 110ms + 200ms); }
.tr-rule svg { flex: none; width: 26px; height: 26px; color: var(--tr-glow); margin-top: 1px; }
.tr-rule h3 { margin: 0 0 4px; font-size: var(--tr-t-base); font-weight: 600; line-height: 1.3; }
.tr-rule p { margin: 0; color: var(--tr-on-soft); font-size: var(--tr-t-sm); line-height: 1.5; }

/* ---------- honest footnote + policy ---------- */
.tr-foot { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: 16px; border-top: 1px solid var(--tr-line); display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tr-foot p { margin: 0; flex: 1 1 20rem; max-width: 62ch; color: var(--tr-on-faint); font-size: var(--tr-t-xs); line-height: 1.5; }
.tr-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: var(--tr-accent); color: #fff; font-weight: 500; font-size: var(--tr-t-sm);
  transition: transform 160ms var(--tr-ease), box-shadow 200ms var(--tr-ease); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--tr-glow) 60%, transparent); }
.tr-link svg { width: 14px; height: 14px; transition: transform 200ms var(--tr-ease); }
.tr-link:hover { transform: translateY(-1px); }
.tr-link:hover svg { transform: translateX(3px); }
.tr-link:focus-visible { outline: 2px solid var(--tr-glow); outline-offset: 3px; }

/* ---------- motion: start states, only when trust.js runs and motion is allowed ---------- */
.tr-js .tr-reveal, .tr-js .tr-fact, .tr-js .tr-rule { opacity: 0; transform: translateY(16px); }
.tr-js .tr-reveal { transition: opacity 800ms var(--tr-ease), transform 800ms var(--tr-ease); }
.tr-js.is-in .tr-reveal, .tr-js.is-facts .tr-fact, .tr-js.is-facts .tr-rule { opacity: 1; transform: none; }
.tr-js:not(.is-map) .tr-dots circle { opacity: 0; }
.tr-js:not(.is-map) .tr-dots circle.e { fill: var(--tr-on); }
.tr-js:not(.is-map) .tr-ring { stroke-dashoffset: 1; }
.tr-js:not(.is-map) .tr-ringtext { opacity: 0; }
.tr-js:not(.is-map) .tr-lock { opacity: 0; transform: translate(0px, -304px) scale(0.4); }
.tr-js:not(.is-map) .tr-tag { opacity: 0; }
.tr-js .tr-tag { transition-delay: 1700ms; }
.tr-js:not(.is-live) .tr-pulse__ring { animation-play-state: paused; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1023px) {
  /* one column: text, then the map, then the policy button right under it, then the note */
  .tr-top { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tr-main { display: contents; }
  .tr-seal { order: 1; justify-self: center; max-width: min(420px, 100%); margin-top: clamp(1.5rem, 5vw, 2.5rem); }
  .tr-foot { order: 2; flex-direction: column; align-items: stretch; margin-top: 4px; padding-top: 0; border-top: 0; }
  .tr-link { order: -1; justify-content: center; }
  .tr-foot p { flex: none; }   /* in a column its 20rem basis became a 320px-tall block of empty space */
  .tr-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tr-fact { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; }
  .tr-fact__big { flex: none; min-width: 5.5rem; }
  .tr-fact__title { margin-top: 0; }
  .tr-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tr { padding-bottom: 2rem; }
  .tr-title { font-size: clamp(2.4rem, 1.2rem + 6vw, 3rem); }
  .tr-lead { font-size: var(--tr-t-base); margin-top: 20px; }
  .tr-seal { margin-inline: -6px; width: calc(100% + 12px); }
  .tr-ringtext { font-size: 19px; }
  .tr-tag { font-size: 0.72rem; padding: 6px 8px; }
  .tr-rule { padding: 14px 16px; }
  .tr-foot { flex-direction: column; align-items: stretch; }
  .tr-link { justify-content: center; white-space: normal; text-align: center; }
  .tr-foot p { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tr *, .tr *::before, .tr *::after { transition: none !important; animation: none !important; }
}

/* phones: more air around the privacy button */
@media (max-width: 560px) { .tr-foot { gap: var(--sc-4, 1rem); margin-top: var(--sc-5, 1.5rem); } .tr-link { min-height: 48px; } }