:root {
  --test-bg: var(--site-background, #07100d);
  --test-surface: var(--site-surface, #0b1b15);
  --test-surface-alt: var(--site-surface-alt, #10251d);
  --test-primary: var(--site-primary, #123e35);
  --test-secondary: var(--site-secondary, #0f897d);
  --test-accent: var(--site-accent, #d7ad62);
  --test-accent-soft: var(--site-accent-soft, #f0d49b);
  --test-text: var(--site-text, #f4f0e7);
  --test-muted: var(--site-muted, #9fb7a9);
  --test-line: color-mix(in srgb, var(--test-accent) 18%, transparent);
}

body.bg.temoignage-page {
  min-height: 100vh;
  color: var(--test-text);
  background:
    radial-gradient(circle at 8% 9%, color-mix(in srgb, var(--test-secondary) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 91% 35%, color-mix(in srgb, var(--test-accent) 11%, transparent), transparent 34rem),
    var(--test-bg);
}

.temoignage-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.temoignage-page *,
.temoignage-page *::before,
.temoignage-page *::after { box-sizing: border-box; }

.testimony-shell {
  width: min(1240px, calc(100% - 150px));
  margin: 0 auto;
  padding-bottom: 120px;
}

.testimony-hero {
  position: relative;
  min-height: 545px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.075);
  border-top: 0;
  border-radius: 0 0 38px 38px;
  background:
    linear-gradient(112deg,
      color-mix(in srgb, var(--test-primary) 74%, var(--test-bg)) 0%,
      color-mix(in srgb, var(--test-surface-alt) 86%, var(--test-bg)) 65%,
      color-mix(in srgb, var(--test-surface) 92%, var(--test-bg)) 100%);
  box-shadow: 0 42px 110px rgba(0,0,0,.28);
}

.testimony-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .085;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(90deg, transparent 6%, #000 72%, transparent);
}

.testimony-hero__glow {
  position: absolute;
  z-index: -1;
  top: -270px;
  right: -150px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--test-accent) 22%, transparent), transparent 69%);
}

.testimony-hero__copy { max-width: 750px; padding: 70px 22px 64px 68px; }
.testimony-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--test-accent-soft); font-size: .64rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.testimony-eyebrow > span { width: 30px; height: 1px; background: var(--test-accent); }
.testimony-hero h1 { max-width: 710px; margin: 20px 0 22px; color: var(--test-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5vw, 4.85rem); font-weight: 400; line-height: .99; letter-spacing: -.052em; }
.testimony-hero h1 em { color: var(--test-accent-soft); font-weight: 400; }
.testimony-hero__copy > p { max-width: 620px; margin: 0; color: color-mix(in srgb, var(--test-muted) 88%, var(--test-text)); font-size: .91rem; line-height: 1.75; }
.testimony-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.testimony-button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: var(--test-text); background: rgba(255,255,255,.025); font-size: .7rem; font-weight: 900; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.testimony-button:hover { color: var(--test-text); border-color: color-mix(in srgb, var(--test-accent) 55%, transparent); transform: translateY(-2px); }
.testimony-button--primary { color: #152019; border-color: var(--test-accent-soft); background: var(--test-accent-soft); box-shadow: 0 15px 36px color-mix(in srgb, var(--test-accent) 20%, transparent); }
.testimony-button--primary:hover { color: #101a14; background: color-mix(in srgb, var(--test-accent-soft) 90%, white); }
.testimony-button--ghost { backdrop-filter: blur(8px); }
.testimony-trust { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.testimony-trust span { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--test-muted) 84%, transparent); font-size: .59rem; }
.testimony-trust svg { width: 16px; fill: var(--test-secondary); }

.testimony-hero__visual { position: relative; align-self: stretch; min-height: 500px; }
.testimony-halo { position: absolute; border: 1px solid var(--test-line); border-radius: 50%; }
.testimony-halo--one { top: 74px; right: 54px; width: 375px; height: 375px; }
.testimony-halo--one::before { content: ""; position: absolute; inset: 45px; border: 1px dashed color-mix(in srgb, var(--test-accent) 20%, transparent); border-radius: inherit; }
.testimony-halo--two { top: 128px; right: 108px; width: 265px; height: 265px; opacity: .5; }
.testimony-feature-card { position: absolute; z-index: 2; right: 48px; top: 116px; width: min(355px, calc(100% - 58px)); margin: 0; padding: 30px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--test-accent) 25%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--test-bg) 76%, transparent); box-shadow: 0 32px 85px rgba(0,0,0,.35); backdrop-filter: blur(16px); }
.testimony-feature-card > span { position: absolute; top: -22px; right: 14px; color: color-mix(in srgb, var(--test-accent) 12%, transparent); font: 400 8rem/1 Georgia, serif; }
.testimony-feature-card p { position: relative; margin: 0 0 18px; color: var(--test-text); font: italic 400 1.05rem/1.65 Georgia, serif; }
.testimony-feature-card cite { color: var(--test-accent-soft); font-size: .58rem; font-style: normal; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.testimony-stat { position: absolute; z-index: 3; min-width: 105px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.095); border-radius: 16px; background: color-mix(in srgb, var(--test-surface) 86%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.28); backdrop-filter: blur(13px); }
.testimony-stat strong { display: block; color: var(--test-accent-soft); font: 400 1.65rem/1 Georgia, serif; }
.testimony-stat span { display: block; margin-top: 4px; color: var(--test-muted); font-size: .51rem; font-weight: 800; text-transform: uppercase; }
.testimony-stat--count { left: 4px; bottom: 83px; }
.testimony-stat--modes { right: 21px; bottom: 48px; }

.testimony-principles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 28px 0 0; }
.testimony-principles article { min-height: 112px; display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: color-mix(in srgb, var(--test-surface) 86%, transparent); }
.testimony-principles article > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--test-line); border-radius: 50%; color: var(--test-accent-soft); font: 400 .8rem/1 Georgia, serif; }
.testimony-principles h2 { margin: 0 0 4px; color: var(--test-text); font: 400 1rem/1.1 Georgia, serif; }
.testimony-principles p { margin: 0; color: var(--test-muted); font-size: .6rem; line-height: 1.5; }

/* Le widget partagé reste la source unique du formulaire et des récits. */
.temoignage-page .tst-section { margin: 72px 0 0; padding: 48px; border-color: var(--test-line); border-radius: 30px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--test-accent) 12%, transparent), transparent 30rem), radial-gradient(circle at 0 100%, color-mix(in srgb, var(--test-secondary) 13%, transparent), transparent 28rem), color-mix(in srgb, var(--test-surface) 94%, #000); }
.temoignage-page .tst-heading { margin-bottom: 31px; }
.temoignage-page .tst-heading h2 { max-width: 760px; }
.temoignage-page .tst-layout { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 18px; }
.temoignage-page .tst-form-card,
.temoignage-page .tst-stories { border-color: rgba(255,255,255,.085); background: linear-gradient(155deg, color-mix(in srgb, var(--test-surface-alt) 91%, var(--test-bg)), color-mix(in srgb, var(--test-surface) 95%, var(--test-bg))); box-shadow: 0 24px 65px rgba(0,0,0,.2); }
.temoignage-page .tst-form-card { padding: 29px; }
.temoignage-page .tst-stories { padding: 27px; }
.temoignage-page .tst-field input,
.temoignage-page .tst-panel textarea { background: color-mix(in srgb, var(--test-bg) 67%, transparent); }
.temoignage-page .tst-tabs { background: color-mix(in srgb, var(--test-bg) 49%, transparent); }
.temoignage-page .tst-tab.is-active { color: #152019; border-color: var(--test-accent); background: var(--test-accent-soft); }
.temoignage-page .tst-recorder,
.temoignage-page .tst-upload { background: color-mix(in srgb, var(--test-accent) 5%, transparent); }
.temoignage-page .tst-list { max-height: 955px; gap: 11px; padding-right: 5px; overflow-y: auto; scrollbar-color: color-mix(in srgb, var(--test-accent) 35%, transparent) transparent; scrollbar-width: thin; }
.temoignage-page .tst-story { padding: 19px; border-color: rgba(255,255,255,.075); background: color-mix(in srgb, var(--test-bg) 46%, transparent); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.temoignage-page .tst-story:hover { border-color: color-mix(in srgb, var(--test-accent) 25%, transparent); background: color-mix(in srgb, var(--test-bg) 62%, transparent); transform: translateY(-2px); }
.temoignage-page .tst-story::after { color: color-mix(in srgb, var(--test-accent) 13%, transparent); }
.temoignage-page .tst-avatar { border-color: color-mix(in srgb, var(--test-accent) 28%, transparent); background: color-mix(in srgb, var(--test-accent) 8%, transparent); }
.temoignage-page .tst-submit { min-height: 51px; padding-inline: 22px; }
.temoignage-page .tst-load-more { margin-top: 15px; }
.temoignage-page .tst-shared-player { bottom: 22px; }

@media (min-width: 1160px) {
  .temoignage-page .tst-form-card { position: sticky; top: 104px; }
}

@media (min-width: 1380px) {
  .testimony-shell { width: min(1240px, calc(100% - 48px)); }
}

@media (max-width: 1100px) {
  .testimony-hero { grid-template-columns: minmax(0, 1fr) 330px; }
  .testimony-hero__copy { padding-left: 44px; }
  .testimony-feature-card { right: 24px; }
  .testimony-halo--one { right: 12px; width: 330px; height: 330px; }
  .testimony-halo--two { right: 62px; width: 230px; height: 230px; }
  .temoignage-page .tst-layout { grid-template-columns: 1fr; }
  .temoignage-page .tst-list { max-height: none; overflow: visible; }
}

@media (max-width: 820px) {
  .testimony-shell { width: min(100% - 24px, 1240px); padding-bottom: 104px; }
  .testimony-hero { min-height: auto; grid-template-columns: 1fr; border-radius: 0 0 30px 30px; }
  .testimony-hero__copy { padding: 58px 30px 34px; }
  .testimony-hero h1 { font-size: clamp(2.75rem, 10vw, 4.15rem); }
  .testimony-hero__visual { min-height: 385px; }
  .testimony-feature-card { top: 70px; right: 50%; width: min(360px, calc(100% - 64px)); transform: translateX(50%); }
  .testimony-halo--one { top: 31px; right: 50%; width: 330px; height: 330px; transform: translateX(50%); }
  .testimony-halo--two { top: 78px; right: 50%; width: 235px; height: 235px; transform: translateX(50%); }
  .testimony-stat--count { left: 8%; bottom: 36px; }
  .testimony-stat--modes { right: 8%; bottom: 20px; }
  .testimony-principles { grid-template-columns: 1fr; }
  .testimony-principles article { min-height: 92px; }
  .temoignage-page .tst-section { margin-top: 64px; padding: 34px 28px; }
}

@media (max-width: 580px) {
  .testimony-shell { width: min(100% - 16px, 1240px); }
  .testimony-hero__copy { padding: 48px 23px 29px; }
  .testimony-hero h1 { font-size: clamp(2.45rem, 11vw, 3.35rem); }
  .testimony-hero__copy > p { font-size: .82rem; }
  .testimony-hero__actions { align-items: stretch; flex-direction: column; }
  .testimony-button { width: 100%; }
  .testimony-trust { align-items: flex-start; flex-direction: column; gap: 8px; }
  .testimony-hero__visual { min-height: 350px; overflow: hidden; }
  .testimony-feature-card { top: 58px; width: calc(100% - 38px); padding: 24px; }
  .testimony-feature-card p { font-size: .91rem; }
  .testimony-halo--one { top: 24px; width: 280px; height: 280px; }
  .testimony-halo--two { top: 64px; width: 200px; height: 200px; }
  .testimony-stat { min-width: 92px; padding: 11px 13px; }
  .testimony-stat strong { font-size: 1.4rem; }
  .testimony-stat--count { left: 3px; bottom: 25px; }
  .testimony-stat--modes { right: 3px; bottom: 13px; }
  .testimony-principles { gap: 8px; margin-top: 16px; }
  .testimony-principles article { padding: 16px; }
  .temoignage-page .tst-section { margin-top: 52px; padding: 29px 13px 13px; border-radius: 24px; }
  .temoignage-page .tst-heading { padding-inline: 5px; }
  .temoignage-page .tst-heading > p { padding-left: 14px; }
  .temoignage-page .tst-form-card,
  .temoignage-page .tst-stories { padding: 18px; border-radius: 19px; }
  .temoignage-page .tst-shared-player { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .temoignage-page *,
  .temoignage-page *::before,
  .temoignage-page *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}