/* ============================================================
   Dorian Bouchet — v2.css
   « Le fil rouge » : papier, encre, surligneur.
   MOBILE-FIRST. Anime avec GSAP (site-v2.js).
   ============================================================ */

:root {
  --paper: #f5f0e4;
  --paper-2: #ede7d7;
  --ink: #1b1812;
  --ink-soft: #56503f;
  --hl: #d6f0ff;            /* surligneur */
  --rouge: #c5371d;         /* fil rouge */
  --rouge-deep: #8a2a14;
  /* mapping pour captures.css */
  --g1: #8a2a14;
  --g2: #c5371d;
  --g3: #d98b16;
  --blue-deep: #1f3a5f;
  --line: #d9d2bd;
  --bg2: #ede7d7;            /* utilisé par captures.css */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --pad: 22px;
  --max: 1100px;
  --header-h: 58px;
  --ink-muted: #56503f;     /* alias captures.css */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* fond dégradé — voile coloré fixe sous tout le contenu :
   bleu surligneur en haut, ambre chaud à gauche, rouge très dilué en bas */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23gn)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 85% at 88% -12%, color-mix(in oklch, var(--hl) 52%, var(--paper)) 0%, transparent 52%),
    radial-gradient(95% 75% at -18% 28%, color-mix(in oklch, #ecc987 38%, var(--paper)) 0%, transparent 50%),
    radial-gradient(115% 85% at 108% 92%, color-mix(in oklch, var(--rouge) 11%, var(--paper)) 0%, transparent 55%),
    var(--paper);
  background-blend-mode: overlay, normal, normal, normal, normal;
}
::selection { background: var(--hl); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }

body[data-motion="reduit"] *,
body[data-motion="reduit"] *::before,
body[data-motion="reduit"] *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.065;
  animation: grain-shift 0.9s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); } 25% { transform: translate(-1.5%,1%); }
  50% { transform: translate(1%, -1.5%); } 75% { transform: translate(-1%, -0.5%); }
  100% { transform: translate(0,0); }
}

/* ---------- intro overlay ---------- */
.intro {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
}
.intro .intro-name {
  font-family: var(--serif); font-size: clamp(34px, 9vw, 64px);
  color: var(--paper); letter-spacing: 0.01em; line-height: 1.1;
  display: flex; gap: 0.32em;
}
.intro .intro-name em { font-style: normal; color: inherit; }
.intro .intro-name span { display: inline-block; }
.intro .intro-line {
  width: 0px; height: 3px; background: var(--rouge); border-radius: 2px;
}
body.no-intro .intro { display: none; }
/* filet de sécurité : si JS/GSAP ne tourne pas, l'intro s'efface seule */
.intro { animation: intro-failsafe 0.5s 4s forwards; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- fil rouge — fil de progression cousu, fixe en haut ---------- */
.fil-top {
  position: fixed; top: 0; left: 0; right: 0; height: 8px;
  z-index: 120; pointer-events: none;
}
.fil-top-line {
  position: absolute; left: 0; top: 2.5px; height: 3px; width: 0%;
  background: repeating-linear-gradient(90deg, var(--rouge) 0 11px, transparent 11px 20px);
}
body[data-fil-style="pointille"] .fil-top-line {
  background: repeating-linear-gradient(90deg, var(--rouge) 0 3.5px, transparent 3.5px 14px);
  border-radius: 2px;
}
body[data-fil-style="trait"] .fil-top-line { background: var(--rouge); height: 2.5px; top: 3px; }
.fil-top-dot {
  position: absolute; top: 0.5px; left: 0%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--rouge);
  translate: -50% 0;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--rouge) 18%, transparent);
}
body[data-fil="off"] .fil-top { display: none; }
/* ancien fil pleine page — retiré au profit du fil de progression */
.fil-rouge { display: none; }

/* ---------- surligneur ---------- */
.hl {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--hl) 88%, transparent), color-mix(in srgb, var(--hl) 88%, transparent));
  background-repeat: no-repeat;
  background-size: 0% 78%;
  background-position: 0 62%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.08em; margin: 0 -0.08em;
  border-radius: 2px;
}
/* griffonnages SVG (soulignés / cercles) */
.scribble { position: relative; white-space: nowrap; }
.scribble svg {
  position: absolute; overflow: visible; pointer-events: none;
}
.scribble svg path {
  fill: none; stroke: var(--rouge); stroke-linecap: round;
}
.scribble-under svg { left: -2%; bottom: -0.14em; width: 104%; height: 0.32em; }
.scribble-under svg path { stroke-width: 7; }
.scribble-circle svg { left: -9%; top: -16%; width: 118%; height: 132%; }
.scribble-circle svg path { stroke-width: 5; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.logo {
  font-family: var(--serif); font-size: 18px; text-decoration: none; line-height: 1;
  color: var(--ink);
}
.logo em { font-style: normal; color: inherit; }

/* Point de marque — gros point coloré après le nom */
.brand-dot {
  color: var(--rouge);
  font-size: 1.55em;
  line-height: 0;
  font-style: normal;
  font-family: var(--serif);
  display: inline-block;
  translate: 0.02em -0.02em;
}
.intro .brand-dot { color: var(--rouge); font-size: 1.4em; }
.avail-pill {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 99px;
  border: 1.5px solid var(--ink); text-decoration: none;
  background: var(--paper);
}
.avail-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; position: relative; flex: none; }
.avail-pill .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid #2e9e5b; animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.45); opacity: 0.9; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }
section { position: relative; }

.eyebrow-v2 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rouge);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow-v2 .stop {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2.5px solid var(--rouge); flex: none;
  transform: scale(0);
  background: var(--paper);
}
.eyebrow-v2 .stop.lit { background: var(--rouge); }

/* ============ HERO ============ */
.hero-v2 {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 30px) 0 92px;
  overflow: hidden;
}
.hero-bgword {
  position: absolute; top: 9%; left: 0; right: 0; z-index: 0;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(120px, 34vw, 360px); line-height: 0.85;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 14%, transparent);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.hero-bgword span { display: block; padding-left: 4vw; }
.hero-bgword span + span { padding-left: 18vw; }

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero-kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
h1.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 13vw, 110px);
  line-height: 1.0; letter-spacing: -0.012em; text-wrap: balance;
}
h1.hero-title em { font-style: italic; }
h1 .line { display: block; overflow: hidden; }
h1 .line > span { display: block; transform: translateY(110%); }
body.no-intro h1 .line > span { transform: none; }

/* .hero-lede — version simplifiée */
.hero-lede {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 36ch;
}
.lede-statement {
  font-family: var(--serif); font-size: clamp(18px, 4.8vw, 24px);
  line-height: 1.52; color: var(--ink); text-wrap: pretty;
}
.lede-creds {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero-ctas { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 6px; }

/* boutons */
.btn-v2 {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 15px 26px;
  border-radius: 14px; text-decoration: none; cursor: pointer; border: none;
  position: relative; overflow: hidden;
  transition: transform 0.2s ease;
}
.btn-v2:active { transform: scale(0.97); }
.btn-fill { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--rouge); }
.btn-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-130%); pointer-events: none;
  animation: btn-shine 4.5s ease infinite;
}
@keyframes btn-shine { 0%, 62% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-block { width: 100%; }

/* fragments flottants — multi-couches parallaxe */
.hero-scraps { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Scraps : cachés sur mobile (trop encombrant) — desktop seulement */
.scrap-v2 { display: none; }
/* Scraps : position mobile — coin supérieur droit, au-dessus du texte */
.scrap-postit {
  top: 5%; right: 3%; width: 118px;
  background: #fff8b8; border-radius: 3px;
  font-family: var(--serif); font-style: italic; font-size: 12px;
  rotate: 4deg; color: #4a4527;
  box-shadow: 0 12px 24px -12px rgba(27,24,18,0.4);
}
.scrap-err {
  top: 17%; right: 3%;
  background: #fff; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; color: var(--rouge);
  rotate: -5deg;
}
.scrap-ok {
  top: 28%; right: 4%;
  background: var(--ink); color: var(--paper);
  rotate: 2deg; display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 12px; padding: 8px 11px;
}
.scrap-ok i {
  width: 16px; height: 16px; border-radius: 50%; background: #2e9e5b;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 10px; color: #fff; flex: none;
}

/* indice de scroll */
.scroll-cue {
  position: absolute; bottom: 26px; left: var(--pad); z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.scroll-cue .tick { width: 38px; height: 2px; background: var(--rouge); overflow: hidden; position: relative; }
.scroll-cue .tick::after {
  content: ""; position: absolute; inset: 0; background: var(--paper-2);
  animation: cue-sweep 1.6s ease-in-out infinite;
}
@keyframes cue-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ============ MARQUEE ============ */
.marquee {
  background: var(--ink); color: var(--paper);
  padding: 13px 0; overflow: hidden;
  rotate: -1.6deg; scale: 1.04; margin: 8px 0;
  position: relative; z-index: 3;
}
.marquee-inner {
  display: flex; gap: 0; white-space: nowrap; width: max-content;
  animation: marquee-roll 26s linear infinite;
}
.marquee-chunk {
  display: flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
}
.marquee-chunk em { font-family: var(--serif); font-style: italic; color: var(--hl); font-size: 17px; }
.marquee-chunk .sep { width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); flex: none; }
@keyframes marquee-roll { to { transform: translateX(-50%); } }

/* ============ 01 CONSTAT ============ */
/* Hiérarchie en 3 temps : accroche énorme → explication discrète → punch surligné.
   Un seul élément se lit en 6 secondes ; le reste suit si on veut. */
.constat-v2 { padding: 88px 0; background: transparent; }
.constat-v2 .wrap { display: flex; flex-direction: column; gap: 34px; }
.constat-quote {
  display: flex; flex-direction: column; gap: 20px;
  font-weight: 400; max-width: 820px;
}
.cq-open {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(32px, 8.8vw, 60px); line-height: 1.06;
  letter-spacing: -0.012em; text-wrap: balance;
}
.cq-open::before { content: "« "; color: var(--rouge); }
.cq-mid {
  font-family: var(--sans); font-size: clamp(15.5px, 4.2vw, 18px);
  line-height: 1.62; color: var(--ink-soft);
  max-width: 40ch; text-wrap: pretty;
}
.cq-mid em { font-style: italic; color: var(--ink); }
.cq-punch {
  font-family: var(--serif);
  font-size: clamp(24px, 6.6vw, 40px); line-height: 1.3;
  text-wrap: balance;
}
.constat-quote .w { opacity: 0.16; }
.constat-quote .hl { font-style: italic; }

/* ============ 02 CAS ============ */
.cas-v2 { padding: 72px 0; background: color-mix(in srgb, var(--paper-2) 55%, transparent); border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); overflow: hidden; }
.section-head-v2 { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-bottom: 40px; }
.section-head-v2 h2 {
  font-size: clamp(34px, 9vw, 64px); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.section-head-v2 h2 em { font-style: italic; }

.cases-v2 { display: flex; flex-direction: column; gap: 52px; }
.case-v2 { position: relative; display: flex; flex-direction: column; gap: 20px; }
.case-num {
  position: absolute; top: -36px; right: -4px; z-index: 0;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(80px, 24vw, 220px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--rouge) 30%, transparent);
  pointer-events: none; user-select: none; overflow: hidden;
  max-width: 50%;
}
.case-text-v2 { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.case-kicker-v2 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--rouge);
}
.case-text-v2 h3 { font-size: clamp(26px, 7vw, 40px); font-weight: 400; line-height: 1.12; }
.case-text-v2 p { font-family: var(--sans); font-size: 16px; color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; max-width: 46ch; }
.case-visual { z-index: 1; }
.case-visual .shot { rotate: -1.2deg; }
.case-v2:nth-child(even) .case-visual .shot { rotate: 1.2deg; }

.cases-close-v2 {
  margin: 64px auto 0; text-align: center;
  font-size: clamp(21px, 5.8vw, 32px); max-width: 660px; text-wrap: balance; line-height: 1.4;
}

/* ============ 03 PREUVE (encre) ============ */
.preuve-v2 {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23gn)' opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(120% 95% at 90% -8%, color-mix(in oklch, var(--rouge-deep) 26%, var(--ink)) 0%, transparent 55%),
    radial-gradient(100% 80% at -10% 100%, color-mix(in oklch, var(--blue-deep) 30%, var(--ink)) 0%, transparent 50%),
    var(--ink);
  background-blend-mode: soft-light, normal, normal, normal;
  color: var(--paper); padding: 76px 0;
}
.preuve-v2 .eyebrow-v2 { color: var(--hl); }
.preuve-v2 .eyebrow-v2 .stop { border-color: var(--hl); background: var(--ink); }
.preuve-v2 .eyebrow-v2 .stop.lit { background: var(--hl); }
.preuve-v2 h2 { color: var(--paper); }
.preuve-v2 .hl { color: var(--ink); }

.temoignages-v2 {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: 14px; margin: 50px calc(var(--pad) * -1) 0;
  padding: 0 var(--pad) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.temoignages-v2::-webkit-scrollbar { display: none; }
.temoignage-v2 {
  scroll-snap-align: center;
  border: 1px solid rgba(245,240,228,0.16); border-radius: 4px;
  padding: 28px 22px; display: flex; flex-direction: column; gap: 16px;
  background: rgba(245,240,228,0.03);
}
.temoignage-v2 .mark { font-family: var(--serif); font-size: 54px; line-height: 0.6; color: var(--rouge); }
.temoignage-v2 .t-claim { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--hl); letter-spacing: -0.01em; text-wrap: balance; }
.temoignage-v2 p { font-style: italic; font-size: 18px; line-height: 1.55; color: rgba(245,240,228,0.85); }
.temoignage-v2 .who { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: rgba(245,240,228,0.45); margin-top: auto; }
.placeholder-tag-v2 {
  font-family: var(--mono); font-size: 10.5px; color: var(--hl);
  border: 1px dashed color-mix(in srgb, var(--hl) 55%, transparent);
  border-radius: 4px; padding: 3px 9px; align-self: flex-start; letter-spacing: 0.05em;
}
.swipe-hint-v2 {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,240,228,0.4); margin-top: 18px;
}
.swipe-hint-v2 .arr { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.chiffres-v2 { display: grid; grid-template-columns: 1fr; margin-top: 48px; }
.chiffre-v2 { border-top: 1px solid rgba(245,240,228,0.16); padding: 24px 0; display: flex; flex-direction: column; gap: 8px; }
.chiffre-v2 .num { font-size: clamp(44px, 12vw, 64px); line-height: 1; color: var(--hl); }
.chiffre-v2 .label { font-family: var(--sans); font-size: 13.5px; color: rgba(245,240,228,0.55); }

/* ---------- 03 Preuve — variante bento (tweak « La preuve ») ---------- */
.preuve-bento { display: none; }
body[data-preuve="bento"] .preuve-v2 .temoignages-v2,
body[data-preuve="bento"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="bento"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="bento"] .preuve-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "t1 t1"
    "c1 i1"
    "t2 t2"
    "i2 c2"
    "t3 t3"
    "c3 c3";
  gap: 12px;
  margin-top: 46px;
}
.bento-cell {
  position: relative; overflow: hidden;
  border: 1px solid rgba(245,240,228,0.16);
  border-radius: 16px;
  background: rgba(245,240,228,0.035);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.bento-t1 { grid-area: t1; }
.bento-t2 { grid-area: t2; }
.bento-t3 { grid-area: t3; }
.bento-c1 { grid-area: c1; }
.bento-c2 { grid-area: c2; }
.bento-c3 { grid-area: c3; }
.bento-i1 { grid-area: i1; }
.bento-i2 { grid-area: i2; }

/* témoignages */
.preuve-bento .mark { font-family: var(--serif); font-size: 54px; line-height: 0.6; color: var(--rouge); }
.preuve-bento .t-claim { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hl); letter-spacing: -0.01em; text-wrap: balance; }
.preuve-bento article p { font-style: italic; font-size: 18px; line-height: 1.55; color: rgba(245,240,228,0.85); }
.preuve-bento .who { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: rgba(245,240,228,0.45); margin-top: auto; }
.bento-t1 { padding: 30px 24px; background: rgba(245,240,228,0.06); }
.bento-t1 p { font-size: 21px; line-height: 1.5; }

/* chiffres */
.bento-c1, .bento-c2, .bento-c3 { justify-content: flex-end; gap: 8px; min-height: 150px; }
.preuve-bento .num { font-size: clamp(36px, 10vw, 56px); line-height: 1; color: var(--hl); }
.preuve-bento .label { font-family: var(--sans); font-size: 13px; line-height: 1.4; color: rgba(245,240,228,0.55); }
/* tuile accent : surligneur plein */
.bento-c1 { background: var(--hl); border-color: transparent; }
.bento-c1 .num { color: var(--ink); }
.bento-c1 .label { color: color-mix(in srgb, var(--ink) 62%, transparent); }
/* bandeau horizontal en bas (mobile) */
.bento-c3 { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; min-height: 0; padding: 20px; }
.bento-c3 .label { max-width: 24ch; }

/* images — l'utilisateur dépose les siennes */
.bento-i1, .bento-i2 { padding: 0; min-height: 180px; }
.bento-i1 image-slot, .bento-i2 image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (min-width: 700px) {
  body[data-preuve="bento"] .preuve-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "t1 t1 i1 c1"
      "t2 t2 i1 c2"
      "i2 t3 t3 c3";
    gap: 14px;
  }
  .bento-i1 { min-height: 0; }
  .bento-i2 { min-height: 220px; }
  .bento-c3 { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; min-height: 150px; padding: 24px 20px; }
}

/* ---------- Section « Ce que je fais » — toggle (tweak) ---------- */
body[data-cas="off"] .cas-v2 { display: none; }

/* ---------- 03 Preuve — variante mur d'avis (tweak « La preuve ») ---------- */
.preuve-mur { display: none; }
body[data-preuve="mur"] .preuve-v2 .temoignages-v2,
body[data-preuve="mur"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="mur"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="mur"] .preuve-mur {
  display: flex; flex-direction: column; gap: 13px;
  margin-top: 46px;
}
.avis-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(245,240,228,0.12);
  border-radius: 18px;
  background: rgba(245,240,228,0.035);
  padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.avis-card:hover { border-color: rgba(245,240,228,0.22); background: rgba(245,240,228,0.05); }
.avis-head { display: flex; align-items: center; gap: 13px; }
.avis-ava {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--paper); letter-spacing: -0.01em;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 4px 12px -4px rgba(0,0,0,0.5);
}
.avis-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.avis-name { font-family: var(--sans); font-weight: 600; font-size: 16.5px; color: var(--paper); line-height: 1.1; }
.avis-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(245,240,228,0.42);
}
.avis-quote {
  margin-left: auto; align-self: flex-start;
  font-family: var(--serif); font-size: 50px; line-height: 0.55; font-weight: 700;
  color: var(--rouge); opacity: 0.5; pointer-events: none;
}
.avis-claim {
  font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--hl); letter-spacing: -0.01em; text-wrap: balance;
}
.avis-card > p:not(.avis-claim) {
  font-size: 16px; line-height: 1.6; color: rgba(245,240,228,0.82); text-wrap: pretty;
}

@media (min-width: 700px) {
  body[data-preuve="mur"] .preuve-mur {
    display: block; column-count: 2; column-gap: 14px;
  }
  body[data-preuve="mur"] .avis-card { break-inside: avoid; margin-bottom: 14px; }
}

/* ---------- 03 Preuve — variante Vitrine (spotlight rotatif) ---------- */
.preuve-vitrine { display: none; }
body[data-preuve="vitrine"] .preuve-v2 .temoignages-v2,
body[data-preuve="vitrine"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="vitrine"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="vitrine"] .preuve-vitrine { display: block; position: relative; margin-top: 40px; }

.vitrine-aura {
  position: absolute; left: -22%; right: -22%; top: -8%; height: 340px; z-index: 0;
  background:
    radial-gradient(58% 60% at 28% 32%, color-mix(in srgb, var(--rouge) 62%, transparent), transparent 70%),
    radial-gradient(52% 52% at 82% 38%, color-mix(in srgb, var(--hl) 50%, transparent), transparent 72%);
  filter: blur(40px); opacity: 0.55; pointer-events: none;
  animation: vitrineAura 13s ease-in-out infinite alternate;
}
@keyframes vitrineAura {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(5%, 7%, 0) scale(1.18); }
}
.vitrine-track { position: relative; z-index: 1; }
.vitrine-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 15px;
  opacity: 0; transform: translateY(28px) scale(0.985);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.vitrine-card.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.vitrine-mark { font-family: var(--serif); font-size: 92px; line-height: 0.42; color: var(--rouge); opacity: 0.5; }
.vitrine-stat { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.vitrine-stat .vs-num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 11vw, 46px); letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--hl), var(--rouge));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine-stat .vs-lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,228,0.5); }
.vitrine-claim {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 9.2vw, 46px);
  line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
  background: linear-gradient(96deg, var(--paper) 18%, var(--hl) 52%, var(--rouge) 92%);
  background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vitrineShine 6.5s linear infinite;
}
@keyframes vitrineShine { to { background-position: 230% 0; } }
.vitrine-text { font-size: 16.5px; line-height: 1.6; color: rgba(245,240,228,0.8); font-style: italic; }
.vitrine-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.vitrine-ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--paper);
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.vitrine-id { display: flex; flex-direction: column; gap: 2px; }
.vitrine-id b { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--paper); }
.vitrine-id i { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-style: normal; color: rgba(245,240,228,0.45); }
.vitrine-nav { display: flex; gap: 9px; margin-top: 24px; position: relative; z-index: 2; }
.vitrine-dot {
  width: 46px; height: 4px; border-radius: 99px; padding: 0; border: 0; cursor: pointer;
  background: rgba(245,240,228,0.18); overflow: hidden; position: relative;
}
.vitrine-dot span { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--hl), var(--rouge)); }
.vitrine-dot.is-active span { animation: vitrineFill 5.2s linear forwards; }
@keyframes vitrineFill { from { width: 0; } to { width: 100%; } }

/* ---------- 03 Preuve — variante Vitrine défilé (scroll horizontal) ---------- */
.preuve-vitrine2 { display: none; }
body[data-preuve="vitrine2"] .preuve-v2 .temoignages-v2,
body[data-preuve="vitrine2"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="vitrine2"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="vitrine2"] .preuve-vitrine2 { display: block; position: relative; margin-top: 40px; }

.vitrine2-track {
  position: relative; z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: 18px;
  margin: 0 calc(var(--pad) * -1);
  padding: 6px var(--pad) 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.vitrine2-track::-webkit-scrollbar { display: none; }
.vitrine2-card {
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 15px;
  min-width: 0;
}
.vitrine2-card .vitrine-claim { font-size: clamp(27px, 8vw, 42px); }
.vitrine2-card .vitrine-mark { font-size: 80px; }

.vitrine2-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 22px;
}
.vitrine2-nav { display: flex; gap: 8px; }
.vitrine2-dot {
  width: 26px; height: 5px; border-radius: 99px; padding: 0; border: 0; cursor: pointer;
  background: rgba(245,240,228,0.2);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}
.vitrine2-dot.is-active { width: 46px; background: linear-gradient(90deg, var(--hl), var(--rouge)); }
.vitrine2-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,240,228,0.4); display: inline-flex; align-items: center; gap: 7px;
}
.vitrine2-hint .arr { animation: nudge 1.8s ease-in-out infinite; }

@media (min-width: 700px) {
  .vitrine2-track { grid-auto-columns: 46%; }
}

/* ---------- 03 Preuve — variante Portraits (stories rail + reveal) ---------- */
.preuve-portraits { display: none; }
body[data-preuve="portraits"] .preuve-v2 .temoignages-v2,
body[data-preuve="portraits"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="portraits"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="portraits"] .preuve-portraits { display: block; position: relative; margin-top: 38px; }
.portrait-defs { position: absolute; }

.portrait-aura {
  position: absolute; left: -24%; right: -24%; top: -10%; height: 320px; z-index: 0;
  background:
    radial-gradient(56% 60% at 30% 30%, color-mix(in srgb, var(--rouge) 60%, transparent), transparent 70%),
    radial-gradient(50% 50% at 80% 40%, color-mix(in srgb, var(--hl) 48%, transparent), transparent 72%);
  filter: blur(44px); opacity: 0.5; pointer-events: none;
  animation: vitrineAura 14s ease-in-out infinite alternate;
}

/* --- stage : cartes empilées, crossfade --- */
.portrait-stage { position: relative; z-index: 1; display: grid; }
.portrait-card {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.portrait-card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.portrait-mark { font-family: var(--serif); font-size: 86px; line-height: 0.4; color: var(--rouge); opacity: 0.5; }

.portrait-stat { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(7px);
  transition: opacity 0.6s ease 0.05s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s, filter 0.6s ease 0.05s;
}
.portrait-card.is-active .portrait-stat { opacity: 1; transform: none; filter: none; }
.portrait-stat .vs-num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 11vw, 44px); letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--hl), var(--rouge));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portrait-stat .vs-lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,228,0.5); }

.portrait-claim {
  font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 8.4vw, 44px);
  line-height: 1.06; letter-spacing: -0.02em; color: var(--hl); text-wrap: balance;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s ease 0.1s, transform 0.72s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.portrait-card.is-active .portrait-claim { opacity: 1; transform: none; }

.portrait-text {
  font-size: 16.5px; line-height: 1.6; color: rgba(245,240,228,0.8); font-style: italic;
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease 0.18s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.18s;
}
.portrait-card.is-active .portrait-text { opacity: 1; transform: none; }

/* --- rail : portraits cliquables + anneau de progression « stories » --- */
.portrait-rail {
  position: relative; z-index: 2; margin-top: 30px;
  display: flex; justify-content: center; align-items: flex-start; gap: 14px;
}
.portrait-pick {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 86px;
}
.portrait-ava {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245,240,228,0.06);
  box-shadow: inset 0 0 0 1px rgba(245,240,228,0.12);
  transform: scale(0.86); opacity: 0.5;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease, box-shadow 0.4s ease;
}
.portrait-ava .mono { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--paper); letter-spacing: -0.01em; }
.portrait-pick.is-active .portrait-ava {
  transform: scale(1.12); opacity: 1;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 8px 22px -8px rgba(0,0,0,0.6);
}
.portrait-ava .ring {
  position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px);
  transform: rotate(-90deg); opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.portrait-pick.is-active .portrait-ava .ring { opacity: 1; }
.portrait-ava .ring .track { fill: none; stroke: rgba(245,240,228,0.16); stroke-width: 4; }
.portrait-ava .ring .prog {
  fill: none; stroke: url(#portraitGrad); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 289; stroke-dashoffset: 289;
}
.portrait-pick.is-active .portrait-ava .ring .prog { animation: portraitRing var(--dwell, 6s) linear forwards; }
@keyframes portraitRing { to { stroke-dashoffset: 0; } }
.portrait-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(245,240,228,0.4); transition: color 0.4s ease; text-align: center; line-height: 1.2;
}
.portrait-pick.is-active .portrait-name { color: var(--paper); }

@media (min-width: 700px) {
  .portrait-rail { gap: 28px; }
  .portrait-ava { width: 66px; height: 66px; }
  .portrait-text { font-size: 17px; }
}

/* mouvement réduit : tout statique, navigation au tap conservée */
@media (prefers-reduced-motion: reduce) {
  .portrait-aura { animation: none; }
  .portrait-card.is-active .portrait-claim,
  .portrait-card.is-active .portrait-stat,
  .portrait-card.is-active .portrait-text { opacity: 1; transform: none; filter: none; }
  .portrait-pick.is-active .portrait-ava .ring .prog { animation: none; stroke-dashoffset: 0; }
}
body[data-motion="reduit"] .portrait-aura { animation: none; }
body[data-motion="reduit"] .portrait-card.is-active .portrait-claim { opacity: 1; transform: none; }
body[data-motion="reduit"] .portrait-pick.is-active .portrait-ava .ring .prog { animation: none; stroke-dashoffset: 0; }

/* ---------- 03 Preuve — variante Liste (avis empilés, lecture au scroll) ---------- */
.preuve-liste { display: none; }
body[data-preuve="liste"] .preuve-v2 .temoignages-v2,
body[data-preuve="liste"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="liste"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="liste"] .preuve-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }

.liste-avis {
  position: relative;
  border: 1px solid rgba(245,240,228,0.12);
  border-radius: 18px;
  background: rgba(245,240,228,0.035);
  padding: 22px 20px 24px 24px;
  display: flex; flex-direction: column; gap: 13px;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.liste-avis:hover { border-color: rgba(245,240,228,0.22); background: rgba(245,240,228,0.055); }
/* fin liseré dégradé à gauche, ancre l'œil au fil du scroll */
.liste-avis::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: 99px; background: linear-gradient(var(--hl), var(--rouge)); opacity: 0.85;
}
.liste-head { display: flex; align-items: center; gap: 13px; }
.liste-ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--paper); letter-spacing: -0.01em;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 4px 12px -4px rgba(0,0,0,0.5);
}
.liste-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.liste-name { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--paper); line-height: 1.1; }
.liste-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,228,0.42); }
.liste-badge {
  flex: none; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  line-height: 1; white-space: nowrap; text-align: right;
}
.liste-badge b {
  font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
  color: var(--hl); white-space: nowrap;
}
.liste-badge i { font-family: var(--mono); font-style: normal; font-size: 9.5px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,228,0.4); }
.liste-claim {
  font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--hl); letter-spacing: -0.01em; text-wrap: balance;
}
.liste-text { font-size: 15.5px; line-height: 1.6; color: rgba(245,240,228,0.78); text-wrap: pretty; }

/* reveal doux à la montée dans le viewport */
.preuve-liste .liste-avis[data-rv] { opacity: 0; transform: translateY(20px); }
.preuve-liste .liste-avis.rv-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

@media (min-width: 700px) {
  .liste-claim { font-size: 21px; }
  .liste-text { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .preuve-liste .liste-avis[data-rv] { opacity: 1; transform: none; }
}
body[data-motion="reduit"] .preuve-liste .liste-avis[data-rv] { opacity: 1; transform: none; }

/* ---------- 03 Preuve — variante Liste V2 (fiches d'avis premium) ---------- */
.preuve-liste2 { display: none; }
body[data-preuve="liste2"] .preuve-v2 .temoignages-v2,
body[data-preuve="liste2"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="liste2"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="liste2"] .preuve-liste2 {
  display: flex; flex-direction: column; gap: 12px; margin-top: 34px;
  font-family: 'Schibsted Grotesk', 'Instrument Sans', sans-serif;
}

/* barre de confiance */
.liste2-trust {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 2px 2px 14px;
}
.liste2-stars { display: inline-flex; gap: 2px; }
.liste2-stars svg { width: 19px; height: 19px; fill: #f5b21e; flex: none; }
.liste2-stars.sm svg { width: 14px; height: 14px; }
.liste2-trust-txt { font-size: 14px; color: rgba(245,240,228,0.62); letter-spacing: -0.01em; }
.liste2-trust-txt b { color: var(--paper); font-weight: 700; }

/* fiche claire sur fond sombre */
.liste2-card {
  background: #fbf8f0;
  border-radius: 20px;
  padding: 20px 20px 18px;
  color: #211d16;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 40px -22px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.liste2-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 26px 50px -22px rgba(0,0,0,0.78); }

.liste2-top { display: flex; align-items: center; gap: 12px; }
.liste2-ava {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -0.01em;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
}
.liste2-check {
  position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; background: #2e9e5b; box-shadow: 0 0 0 2.5px #fbf8f0;
}
.liste2-check svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.liste2-id { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.liste2-name { font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: #1a1610; line-height: 1.1; }
.liste2-role { font-size: 12.5px; color: #8a8472; letter-spacing: -0.005em; }
.liste2-top .liste2-stars { align-self: flex-start; margin-top: 3px; }

.liste2-quote {
  font-size: 16.5px; line-height: 1.58; color: #4a4434;
  letter-spacing: -0.011em; text-wrap: pretty;
}
.liste2-quote mark {
  background: none; color: #16130d; font-weight: 600;
  box-shadow: inset 0 -0.5em 0 color-mix(in srgb, var(--hl) 70%, transparent);
  padding: 0 1px;
}

.liste2-foot { display: flex; }
.liste2-metric {
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: #6f6957; letter-spacing: -0.005em;
  background: #efe9d8; border-radius: 99px; padding: 7px 13px;
}
.liste2-metric b { font-weight: 700; font-size: 14.5px; color: var(--rouge); }
.liste2-metric s { color: #b3ab95; text-decoration: line-through; }

/* reveal stagger */
.preuve-liste2 [data-rv2] { opacity: 0; transform: translateY(22px); }
.preuve-liste2 [data-rv2].rv-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.72s cubic-bezier(0.16,1,0.3,1);
}
.preuve-liste2 [data-rv2].rv-in:nth-child(2) { transition-delay: 0.06s; }
.preuve-liste2 [data-rv2].rv-in:nth-child(3) { transition-delay: 0.12s; }
.preuve-liste2 [data-rv2].rv-in:nth-child(4) { transition-delay: 0.18s; }

@media (min-width: 700px) {
  body[data-preuve="liste2"] .preuve-liste2 { gap: 14px; }
  .liste2-card { padding: 26px 28px 22px; }
  .liste2-quote { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .preuve-liste2 [data-rv2] { opacity: 1; transform: none; }
  .liste2-card:hover { transform: none; }
}
body[data-motion="reduit"] .preuve-liste2 [data-rv2] { opacity: 1; transform: none; }

/* ---------- 03 Preuve — variante Édito (gros titres + reveal) ---------- */
.preuve-edito { display: none; }
body[data-preuve="edito"] .preuve-v2 .temoignages-v2,
body[data-preuve="edito"] .preuve-v2 .swipe-hint-v2,
body[data-preuve="edito"] .preuve-v2 .chiffres-v2 { display: none; }
body[data-preuve="edito"] .preuve-edito { display: flex; flex-direction: column; margin-top: 38px; }

.edito-row {
  position: relative; overflow: hidden; padding: 38px 0 34px;
  border-top: 1px solid rgba(245,240,228,0.16);
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.edito-row:last-child { border-bottom: 1px solid rgba(245,240,228,0.16); }
.preuve-edito .edito-row:nth-child(2) { transition-delay: 0.09s; }
.preuve-edito .edito-row:nth-child(3) { transition-delay: 0.18s; }
.edito-row.seen { opacity: 1; transform: none; }
.edito-idx {
  position: absolute; top: 12px; right: -4px; z-index: 0;
  font-family: var(--serif); font-weight: 700; font-size: 128px; line-height: 0.66;
  color: transparent; -webkit-text-stroke: 1px rgba(245,240,228,0.10);
  pointer-events: none; user-select: none;
}
.edito-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.edito-claim {
  font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 8.6vw, 46px);
  line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
  background: linear-gradient(92deg, var(--hl) 5%, var(--paper) 55%, var(--rouge) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.95s cubic-bezier(0.16,1,0.3,1) 0.12s;
}
.edito-row.seen .edito-claim { clip-path: inset(0 0 0 0); }
.edito-text { font-size: 16px; line-height: 1.6; color: rgba(245,240,228,0.8); max-width: 42ch; }
.edito-foot { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,228,0.5); }
.edito-ava {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--paper);
  background: linear-gradient(150deg, var(--rouge), var(--rouge-deep, #8a2a14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

/* respect du mouvement réduit (préf. système ou tweak « Réduit ») */
@media (prefers-reduced-motion: reduce) {
  .vitrine-aura, .vitrine-claim, .vitrine-dot.is-active span { animation: none; }
  .vitrine-claim { background-position: 0 0; }
  .edito-row { opacity: 1; transform: none; }
  .edito-claim { clip-path: none; }
}
body[data-motion="reduit"] .vitrine-aura,
body[data-motion="reduit"] .vitrine-claim,
body[data-motion="reduit"] .vitrine-dot.is-active span { animation: none; }
body[data-motion="reduit"] .vitrine-claim { background-position: 0 0; }
body[data-motion="reduit"] .edito-row { opacity: 1; transform: none; }
body[data-motion="reduit"] .edito-claim { clip-path: none; }

@media (min-width: 700px) {
  body[data-preuve="edito"] .edito-row { padding: 48px 0 44px; }
  .edito-text { font-size: 17px; }
}

/* ============ 04 POUR VOUS ============ */
/* Contraste primaire/secondaire : la condition en grand serif,
   la nuance honnête en petit sans — deux niveaux de lecture. */
.pourvous-v2 { padding: 84px 0; }
.pourvous-v2 .wrap { display: flex; flex-direction: column; gap: 30px; max-width: 800px; }
.pourvous-v2 p { font-size: clamp(20px, 5.6vw, 30px); line-height: 1.45; text-wrap: pretty; }
.pourvous-v2 p + p {
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  color: var(--ink-soft); max-width: 42ch;
}
.pourvous-v2 p + p em { font-family: var(--serif); font-size: 1.12em; }

/* ============ 05 QUI ============ */
.qui-v2 { padding: 72px 0 84px; background: color-mix(in srgb, var(--paper-2) 55%, transparent); border-top: 1.5px solid var(--line); overflow: hidden; }
.qui-grid-v2 { display: flex; flex-direction: column; gap: 36px; }
/* ---------- photo « Qui je suis » — 4 cadres via body[data-photo] ---------- */
.qui-photo-v2 { position: relative; max-width: 380px; rotate: -1.6deg; }
.qui-photo-v2 .ph-frame { position: relative; }
.qui-photo-v2 .ph-clip { overflow: hidden; position: relative; }
.qui-photo-v2 img { width: 100%; height: auto; transform: scale(1.12); }
.qui-photo-v2 .ph-cap {
  position: absolute; bottom: 12px; left: 14px; right: 14px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft);
}
.ph-tape {
  position: absolute; display: none; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--hl) 48%, rgba(255,255,255,0.38));
  box-shadow: 0 2px 5px rgba(27,24,18,0.14);
}

/* — Polaroïd (défaut) : cadre blanc + scotch en haut — */
.qui-photo-v2 .ph-frame {
  background: #fff; padding: 12px 12px 46px;
  box-shadow: 0 28px 56px -28px rgba(27,24,18,0.45), 0 2px 8px rgba(27,24,18,0.1);
}
body[data-photo="polaroid"] .ph-tape-a {
  display: block; top: -13px; left: 50%; translate: -50% 0; rotate: -3deg;
  width: 98px; height: 28px;
}

/* — Scotché : photo nue, deux morceaux de scotch en diagonale — */
body[data-photo="scotch"] .qui-photo-v2 .ph-frame { background: transparent; padding: 0 0 42px; box-shadow: none; }
body[data-photo="scotch"] .qui-photo-v2 .ph-clip { box-shadow: 0 22px 44px -22px rgba(27,24,18,0.5); }
body[data-photo="scotch"] .ph-tape { display: block; width: 88px; height: 26px; }
body[data-photo="scotch"] .ph-tape-a { top: -10px; left: -20px; rotate: -38deg; }
body[data-photo="scotch"] .ph-tape-b { bottom: 32px; right: -20px; rotate: -38deg; }
body[data-photo="scotch"] .qui-photo-v2 .ph-cap { bottom: 8px; left: 4px; right: 4px; text-align: left; }

/* — Cousu : marge papier, bordure cousue rouge, étiquette mono — */
body[data-photo="cousu"] .qui-photo-v2 .ph-frame {
  background: var(--paper); padding: 14px 14px 46px;
  box-shadow: 0 22px 44px -24px rgba(27,24,18,0.4);
}
body[data-photo="cousu"] .qui-photo-v2 .ph-frame::after {
  content: ""; position: absolute; inset: 6px;
  border: 2px dashed var(--rouge); border-radius: 2px; pointer-events: none;
}
body[data-photo="cousu"] .qui-photo-v2 .ph-cap {
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--rouge);
  bottom: 17px;
}

/* — Encré : cadre encre, liseré rouge, légende papier — */
body[data-photo="encre"] .qui-photo-v2 .ph-frame {
  background: var(--ink); padding: 12px 12px 46px;
  box-shadow: 0 30px 60px -26px rgba(27,24,18,0.65);
}
body[data-photo="encre"] .qui-photo-v2 .ph-frame::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px;
  background: var(--rouge); z-index: 2;
}
body[data-photo="encre"] .qui-photo-v2 img { filter: saturate(0.82) contrast(1.06); }
body[data-photo="encre"] .qui-photo-v2 .ph-cap { color: rgba(245,240,228,0.72); }
.qui-text-v2 { display: flex; flex-direction: column; gap: 18px; }
.qui-text-v2 h2 { font-size: clamp(31px, 8.4vw, 56px); font-weight: 400; line-height: 1.1; text-wrap: balance; }
.qui-text-v2 h2 em { font-style: italic; }
.qui-text-v2 p { font-family: var(--sans); font-size: 16.5px; color: var(--ink-soft); line-height: 1.62; text-wrap: pretty; }
.qui-text-v2 p strong { font-weight: 600; color: var(--ink); }

/* ============ CONTACT ============ */
.contact-v2 { padding: 96px 0 108px; overflow: hidden; text-align: center; }
.contact-inner-v2 { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: 700px; margin: 0 auto; }
.contact-v2 h2 {
  font-size: clamp(38px, 10.5vw, 80px); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.contact-v2 h2 em { font-style: italic; }
.contact-v2 .lede-v2 { font-family: var(--sans); font-size: clamp(16px, 4.4vw, 20px); color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; max-width: 50ch; }
.contact-v2 .btn-v2 { width: 100%; max-width: 380px; }
.contact-note { font-family: var(--mono); font-size: 11px; color: var(--g3); letter-spacing: 0.05em; }

/* ============ FOOTER ============ */
.footer-v2 { border-top: 1.5px solid var(--line); padding: 28px 0 calc(88px + env(safe-area-inset-bottom)); }
.footer-grid-v2 { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-grid-v2 .name { font-size: 18px; }
.footer-grid-v2 .name em { font-style: normal; color: inherit; }
.footer-ph-v2 { font-family: var(--mono); font-size: 11.5px; color: var(--g3); letter-spacing: 0.04em; }
.footer-grid-v2 .legal { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }

/* ============ CTA mobile collant ============ */
.mobile-cta-v2 {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1.5px solid var(--line);
  transform: translateY(120%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-cta-v2.show { transform: translateY(0); }
.mobile-cta-v2 .btn-v2 { width: 100%; }

/* ======= RICHESSE TYPOGRAPHIQUE ======= */

/* CTA header (desktop seulement — mobile a la barre du bas) */
.header-cta { display: none; }

/* ======= BANDE 2bis — interlude sombre ======= */
.bande-v2 {
  padding: 92px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23gn)' opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(130% 90% at 105% 0%, color-mix(in oklch, var(--rouge-deep) 22%, var(--ink)) 0%, transparent 52%),
    radial-gradient(110% 85% at -12% 105%, color-mix(in oklch, var(--blue-deep) 24%, var(--ink)) 0%, transparent 48%),
    var(--ink);
  background-blend-mode: soft-light, normal, normal, normal;
  color: var(--paper);
  overflow: hidden; position: relative;
}
/* liseré rouge en haut : le fil qui entre dans le noir */
.bande-v2::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 64px;
  background: var(--rouge);
}
.bande-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 940px; }

.bande-kicker {
  display: flex; flex-direction: column; gap: 5px;
}
.bande-kicker-em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 9vw, 56px); line-height: 1;
  color: var(--paper); letter-spacing: -0.01em;
}
.bande-kicker-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(245,240,228,0.45);
}

/* la liste des corvées — cochées d'une croix main levée, texte lisible */
.bande-nots { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bande-nots li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 5.6vw, 34px); line-height: 1.2;
  color: rgba(245,240,228,0.62);
}
.bande-cross {
  width: 0.72em; height: 0.72em; flex: none;
  overflow: visible;
}
.bande-cross path {
  fill: none; stroke: var(--rouge); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* le verdict : énorme, encré, surligné */
.bande-claim {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(50px, 16vw, 124px); line-height: 0.96;
  letter-spacing: -0.02em; color: var(--paper); margin-top: 10px;
  text-wrap: balance;
}
.bande-claim .hl { font-style: italic; color: var(--ink); }
.bande-claim .brand-dot { color: var(--rouge); }

.bande-rest {
  font-family: var(--sans); font-size: clamp(15px, 4.2vw, 18px);
  letter-spacing: 0.01em; color: rgba(245,240,228,0.55);
  max-width: 26ch; margin-top: 6px;
}
.bande-rest-em { color: var(--paper); }

/* ======= Intro sous les titres de section ======= */
.section-intro {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink-soft);
  line-height: 1.62; max-width: 56ch; text-wrap: pretty;
}
.preuve-v2 .section-intro { color: rgba(245,240,228,0.6); }

/* flèche avant → après */
.case-text-v2 p .arr-r { color: var(--rouge); font-weight: 600; }

/* ======= FAQ ======= */
.faq-v2 { padding: 72px 0; background: transparent; }
.faq-list { display: flex; flex-direction: column; border-top: 1.5px solid var(--line); }
.faq-item { border-bottom: 1.5px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; min-height: 44px;
  font-family: var(--serif); font-size: clamp(18px, 5vw, 23px); line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { position: relative; width: 22px; height: 22px; flex: none; }
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%; background: var(--rouge); border-radius: 2px;
  transition: rotate 0.3s ease, opacity 0.3s ease;
}
.faq-ic::before { width: 14px; height: 2.5px; }
.faq-ic::after { width: 2.5px; height: 14px; }
.faq-item[open] .faq-ic::after { rotate: 90deg; opacity: 0; }
.faq-item p {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink-soft);
  line-height: 1.6; padding: 0 0 20px; max-width: 60ch; text-wrap: pretty;
}
.faq-note {
  font-family: var(--mono); font-size: 10.5px; color: var(--g3);
  border: 1px dashed color-mix(in srgb, var(--g3) 45%, transparent);
  border-radius: 4px; padding: 3px 9px; display: inline-block;
  margin-bottom: 18px; letter-spacing: 0.04em;
}

/* Premier mot en dégradé */
.grad-word {
  background: linear-gradient(90deg, var(--rouge) 0%, color-mix(in srgb, var(--rouge) 48%, var(--g3)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-family: var(--sans);
}

/* Anciens styles lede multi-lignes supprimés */

/* Gros texte dans les sections corps */
.text-xl {
  font-size: clamp(20px, 5.5vw, 28px); font-weight: 400;
  line-height: 1.4; color: var(--ink);
}
.text-muted { color: var(--ink-soft); }
.text-italic { font-style: italic; }
.text-strong { font-weight: 600; font-family: var(--sans); }

/* Variation de taille inline */
.sz-sm { font-size: 0.8em; }
.sz-lg { font-size: 1.25em; }

/* Séparateur de section fin */
.section-rule {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--rouge), transparent);
  margin-bottom: 20px;
}
[data-rv] { opacity: 0; }
body.no-js [data-rv], body.no-intro [data-rv] { opacity: 1; }
body.no-intro .hl { background-size: 100% 78%; }
body.no-intro .eyebrow-v2 .stop { transform: scale(1); }
body.no-intro .scrap-v2, body.no-intro .constat-quote .w { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; transform: none !important; }
  h1 .line > span { transform: none; }
  .intro { display: none; }
  .marquee-inner { animation: none; }
}

/* ============================================================
   ≥ 700px — tablette
   ============================================================ */
@media (min-width: 700px) {
  :root { --pad: 40px; }
  .hero-ctas { flex-direction: row; width: auto; }
  .hero-ctas .btn-v2 { width: auto; }
  .case-v2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; }
  .case-v2:nth-child(even) .case-text-v2 { order: 2; }
  .case-v2:nth-child(even) .case-visual { order: 1; }
  .case-num { top: -70px; }
  .temoignages-v2 {
    grid-auto-flow: initial; grid-template-columns: repeat(3, 1fr); grid-auto-columns: initial;
    overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 20px;
  }
  .swipe-hint-v2 { display: none; }
  .chiffres-v2 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .qui-grid-v2 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
  .footer-v2 { padding-bottom: 32px; }
  .footer-grid-v2 { flex-direction: row; align-items: baseline; gap: 28px; flex-wrap: wrap; }
}

/* ============================================================
   ≥ 1000px — desktop
   ============================================================ */
@media (min-width: 1000px) {
  :root { --header-h: 70px; }
  .hero-v2 { padding-bottom: 110px; }
  .hero-lede { max-width: 42ch; }
  .scrap-v2 {
    display: block; position: absolute;
    font-family: var(--sans); font-size: 12px; line-height: 1.45;
    border-radius: 10px; padding: 12px 14px;
    box-shadow: 0 14px 30px -14px rgba(27,24,18,0.35);
    opacity: 0;
  }
  .scrap-postit { right: 12%; top: 16%; width: 170px; font-size: 16px; }
  .scrap-err { right: 30%; top: 38%; font-size: 13px; }
  .scrap-ok { right: 10%; top: 52%; font-size: 14px; }
  .marquee { rotate: -1deg; }
  .mobile-cta-v2 { display: none; }
  .contact-v2 .btn-v2 { width: auto; }
  /* Restore desktop section paddings */
  .constat-v2 { padding: 110px 0; }
  .bande-v2 { padding: 128px 0; }
  .bande-inner { gap: 24px; }
  .bande-rest { font-size: 19px; max-width: 30ch; }
  .faq-v2 { padding: 110px 0; }
  .header-cta { display: inline-flex; min-height: 42px; padding: 10px 18px; font-size: 14px; border-radius: 11px; box-shadow: 3px 3px 0 var(--rouge); }
  .cas-v2 { padding: 96px 0 80px; }
  .section-head-v2 { margin-bottom: 64px; }
  .cases-v2 { gap: 86px; }
  .cases-close-v2 { margin-top: 80px; }
  .preuve-v2 { padding: 100px 0; }
  .pourvous-v2 { padding: 110px 0; }
  .qui-v2 { padding: 96px 0 110px; }
  .contact-v2 { padding: 120px 0 130px; }
  .case-num { top: -54px; right: -8px; font-size: clamp(110px, 30vw, 220px); max-width: none; }
}


/* ============ BANDEAU DE CONFIANCE (sous le hero) ============ */
.trust-v2 { border-block: 1.5px solid var(--line); background: color-mix(in srgb, var(--paper-2) 50%, transparent); position: relative; z-index: 3; }
.trust-v2-inner { display: flex; flex-direction: column; }
.trust-v2-item { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 6vw, 30px) 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-soft); }
.trust-v2-item:first-child { border-top: 0; }
.trust-v2-item b { font-family: var(--serif); font-size: clamp(38px, 12vw, 56px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.trust-v2-item .ar { color: var(--rouge); }
.trust-v2-item.quote { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 6.6vw, 30px); line-height: 1.16; color: var(--ink); letter-spacing: 0; }
@media (min-width: 700px) {
  .trust-v2-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
  .trust-v2-item { border-top: 0; padding: clamp(28px, 4vw, 40px) 0; flex: 1; }
  .trust-v2-item b { font-size: clamp(34px, 3.4vw, 46px); }
}