/* ==========================================================================
   WeRefund — Mise en page des sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(56px, 6vw, 96px) clamp(56px, 6vw, 88px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero h1 { margin-top: 26px; }
.hero__lede { margin-top: 22px; max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* @home-search (Rico, 17/09) */
/* Champ de recherche d'entreprise entre l'en-tête et le hero : pas de titre, le logo animé à gauche, bouton vert
   à texte noir. Le hero remonte d'autant pour que le pli ne bouge presque pas. */
.home-search { display: flex; justify-content: center; padding-top: clamp(24px, 3.2vw, 46px); }
.home-search__form { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 640px; margin: 0; }
.home-search__mark { --wr-mark-size: 44px; flex: none; }
.home-search__mark > svg { display: block; width: 44px; height: 44px; }
.home-search__field {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 6px 0 18px; border: 1px solid var(--stage-border, #E5E5E5); border-radius: 999px;
  background: var(--bg); box-shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 6px 20px -12px rgba(15, 17, 21, .18);
  transition: border-color var(--dur, .2s) var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease);
}
.home-search__field:hover { border-color: #D6D9DE; }
.home-search__field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(46, 241, 156, .28); }
.home-search__icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.home-search__field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-size: 16px; color: var(--ink);
}
.home-search__field input::placeholder { color: var(--ink-muted); }
.home-search__field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.home-search__btn {
  flex: none; height: 42px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: #2EF19C; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.1px;
  transition: background-color var(--dur, .2s) var(--ease, ease), transform var(--dur, .2s) var(--ease, ease);
}
.home-search__btn:hover { background: #22DE8B; }
.home-search__btn:active { transform: scale(.98); }
.home-search__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-search + .hero { padding-top: clamp(40px, 5vw, 76px); }
@media (max-width: 560px) {
  /* Rico, 17/09 : pas de logo animé sur mobile, « ça fait trop chargé ». */
  .home-search__mark { display: none; }
  .home-search__field { height: 50px; padding-left: 14px; gap: 8px; }
  .home-search__icon { display: none; }
  .home-search__btn { height: 38px; padding: 0 16px; font-size: 14px; }
}
/* @/home-search */

.hero__proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 52px;
}
.hero__proof h4 { font-size: var(--fs-lg); }
.hero__proof p {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  max-width: 32ch;
}

/* --- Composition de droite ---------------------------------------------- */

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 18px;
  padding: 18px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 70% at 85% 5%, var(--accent-soft), transparent 62%),
    var(--surface-1);
  border: 1px solid var(--line-hair);
}

/* Carte « checkout » */
.checkout { padding: 18px; }
.checkout__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
}
.checkout__row b { color: var(--ink-body); font-weight: 500; }
.checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.checkout__total span { color: var(--ink-muted); font-size: var(--fs-2xs); }
.checkout__total b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Bandeau « Works with »
   Les intégrations réelles, logos officiels en gris, sur une seule ligne. Ici
   la mise en page seule : la liste et sa copie aria-hidden, toujours affichées
   côte à côte. Le défilement, pour tout le monde y compris en mouvement réduit
   (Rico, 15/09), vient de motion.css (5.5).
   -------------------------------------------------------------------------- */

.marks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding-block: 30px;
}
.marks__label {
  padding-right: 32px;
  border-right: 1px solid var(--line-hair);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.marquee {
  --mq-gap: 56px;
  min-width: 0;
  padding-left: 32px;
}
.marquee:focus-visible { outline-offset: -2px; }
.marquee__track { display: flex; }
.marquee__list {
  display: flex;
  align-items: center;
  column-gap: var(--mq-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee__item { display: flex; align-items: center; height: 32px; }
/* Hauteur réglée logo par logo (--h) pour un poids optique égal ; la largeur
   suit le rapport du tracé (--r) : aucune dépendance au dimensionnement
   intrinsèque d'un SVG inline. */
.marquee__logo {
  display: block;
  height: var(--h);
  width: calc(var(--h) * var(--r));
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   3. Parcours (« comment ça marche »)
   -------------------------------------------------------------------------- */

.steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.steps__visual {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--panel);   /* Rico, 16/09 : #F5F5F5 plein, sans halo vert */
  border: 1px solid var(--line-hair);
}
.steps__panel {
  grid-area: 1 / 1;
  width: min(100%, 380px);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.steps__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.contract-doc { padding: 18px; }
.contract-doc__clause {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-block: 9px;
  font-size: var(--fs-2xs);
  color: var(--ink-body);
  border-bottom: 1px dashed var(--line);
}
.contract-doc__clause:last-of-type { border-bottom: 0; }
.contract-doc__clause svg { width: 18px; height: 18px; color: var(--ok); }
.contract-doc__sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.snippet {
  padding: 14px 16px 16px;
  border-radius: var(--r-md);
  background: var(--surface-inset);
  border: 1px solid var(--line-hair);
}
.snippet pre {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-body);
}
.snippet .tag { color: var(--accent-ink); }
.snippet .attr { color: var(--ink-muted); }
.snippet .str { color: var(--ok); }

.category-list { padding: 8px; }
.category-list__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: var(--r-md);
}
.category-list__row + .category-list__row { border-top: 1px dashed var(--line); }
.category-list__row i {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
}
.category-list__row i svg { width: 18px; height: 18px; }
.category-list__row b { display: block; color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.category-list__row span { display: block; color: var(--ink-muted); font-size: var(--fs-2xs); }

.alert-card { padding: 16px; }
.alert-card__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 11px;
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.alert-card__row + .alert-card__row { margin-top: 9px; }
.alert-card__row i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
}
.alert-card__row i svg { width: 15px; height: 15px; }
.alert-card__row b { display: block; color: var(--ink); font-size: var(--fs-2xs); font-weight: 600; }
.alert-card__row span { display: block; margin-top: 2px; color: var(--ink-muted); font-size: var(--fs-3xs); line-height: 1.5; }
.alert-card__row time { display: block; margin-top: 4px; color: var(--ink-faint); }
.alert-card__foot { display: block; margin-top: 6px; color: var(--ink-muted); font-size: var(--fs-3xs); }
.alert-card__foot b { display: inline; font-size: inherit; font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Bénéfices — trois rangées (Rico, 15/09)
   Texte à gauche (1/3), panneau gris et maquette à droite (2/3). Le HTML porte
   l'état FINAL de chaque maquette ; ce qui construit les rangées 1 et 2 vit
   dans motion.css (4.2), sous l'attribut que pose main.js (featureRows). La
   rangée 3 est statique : aucune règle de mouvement ne la vise.
   Chaque élément est stylé par SA classe, jamais par un sélecteur d'élément
   descendant : `.alert-card__row span` a déjà montré ce que ça coûte.
   -------------------------------------------------------------------------- */

.feats { display: grid; gap: 16px; }
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  align-items: stretch;   /* Rico, 16/09 : le texte se centre sur l'animation (voir .feat__text) */
}
/* Rico, 16/09 : la colonne de texte prend toute la hauteur de la rangée, le contenu se centre
   verticalement sur l'animation. Plus de filet en haut (Rico, 16/09 soir). */
.feat__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 20px;
}
.feat__title {
  font-size: calc(var(--fs-h3) * 1.3);   /* 28,6 → 36,4 px, tiré d'un jeton existant */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
}
.feat__sub {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.feat__link { margin-top: 24px; }

/* Le panneau. Pas d'aspect-ratio : à côté d'une hauteur minimale, il laisserait
   rogner le contenu ; ici la hauteur suit la maquette. */
.feat__panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(440px, 40vw, 560px);
  padding: 56px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
}
.feat__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feat__name { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.feat__strong { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.feat__strong--sm { font-size: var(--fs-xs); }
.feat__meta { color: var(--ink-muted); font-size: var(--fs-3xs); overflow-wrap: anywhere; }
.feat__meta--soft { color: var(--ink-muted); }
.feat__aside { flex: none; margin-left: auto; }
.feat__desc { display: block; margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-3xs); }
.feat__cap { margin-top: 16px; color: var(--ink-muted); font-size: var(--fs-3xs); letter-spacing: var(--ls-caps); }
.feat__ico { flex: none; width: 14px; height: 14px; color: var(--ink-faint); }

.feat__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
}
.feat__tile svg { width: 16px; height: 16px; }
.feat__tile--md { width: 28px; height: 28px; }
.feat__tile--sm { width: 24px; height: 24px; }
.feat__tile--sm svg { width: 13px; height: 13px; }
.feat__tile--accent { background: var(--accent-soft); color: var(--accent-ink); }
.feat__tile--quiet { background: var(--surface-2); color: var(--ink-soft); }
.feat__tile--line { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); }
.feat__tile--ok { background: var(--ok-soft); color: var(--ok); }

/* Rangée 1 — la liste de contrôle */
.feat__list { margin-top: 6px; }
.feat__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 40px;
  border-top: 1px solid var(--line-hair);
}
.feat__item:first-child { border-top: 0; }
.feat__mark { display: grid; width: 18px; height: 18px; }
.feat__mark > * { grid-area: 1 / 1; }
.feat__ring { width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: var(--r-pill); opacity: 0; }
.feat__ok { width: 18px; height: 18px; color: var(--ok); }
.feat__label { min-width: 0; }
.feat__val { color: var(--ink-muted); font-size: var(--fs-3xs); text-align: right; }
.feat__who { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.feat__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-hair);
}

/* Rangée 3 — la commande et la version de politique qu'elle garde (statique).
   Le titre de la commande reste sur la ligne de sa tuile, même à 375 px. */
.feat__head--record { flex-wrap: nowrap; }
.feat__kv { margin-top: 16px; }
.feat__pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  border-top: 1px solid var(--line-hair);
}
.feat__value { display: inline-flex; align-items: center; gap: 6px; }

/* Rangée 2 — les deux emplacements du badge */
.feat__thumb { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-3); }
.feat__price { flex: none; margin-left: auto; color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.feat__places { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-hair); }
.feat__place { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-1); }
.feat__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 24px;
  margin-left: auto;
  padding-inline: 9px;
  border: 1px solid var(--ok-line);
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: var(--fs-3xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Rangée 3 (suite) — le journal des versions, statique : fils tracés,
   surlignage posé. `.feat__split` le sépare de la commande. */
.feat__split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.feat__log { display: grid; margin-top: 14px; }
.feat__entry {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  padding-bottom: 14px;
}
.feat__entry:last-child { padding-bottom: 0; }
.feat__body { min-width: 0; }
.feat__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.feat__wire {
  position: absolute;
  left: 11.25px;
  top: 28px;
  bottom: 2px;
  width: 1.5px;
  background: var(--line);
  transform-origin: top center;
}
.feat__diff {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  isolation: isolate;
}
.feat__del { color: var(--ink-muted); font-size: var(--fs-2xs); text-decoration: line-through; }
.feat__add {
  position: relative;
  display: block;
  padding: 2px 6px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: var(--fs-2xs);
  text-decoration: none;
}
.feat__add::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-soft);
  transform-origin: left center;
}

/* Certificat */
.cert { width: 100%; padding: 16px; text-align: center; }
.cert__seal {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-inline: auto;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.cert__seal svg { width: 26px; height: 26px; }
.cert h4 { margin-top: 12px; font-size: var(--fs-sm); }
.cert__meta { margin-top: 4px; color: var(--ink-faint); }
.cert__rows { margin-top: 14px; text-align: left; display: grid; gap: 7px; }
.cert__rows div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-3xs);
  color: var(--ink-muted);
}
.cert__rows b { color: var(--ink-body); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Jauges — orphelines
   Plus aucune page ne pose `.gauges` (relevé du 15/09). Laissées en place :
   leur suppression est un geste à part, pas un effet de bord de la refonte
   des Bénéfices.
   -------------------------------------------------------------------------- */

.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* --------------------------------------------------------------------------
   6. Intégrations — la note sous le chapeau (Rico, 15/09)
   -------------------------------------------------------------------------- */

.sec-head__note { margin-top: 12px; color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.55; }
.sec-head--center .sec-head__note { max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   7. Bento des fonctionnalités
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-hair);
}
.bento__cell {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 32px;
  border-left: 1px solid var(--line-hair);
  border-bottom: 1px solid var(--line-hair);
}
.bento__cell:nth-child(3n) { border-right: 1px solid var(--line-hair); }
.bento__cell--head { justify-content: flex-start; }
.bento__cell h4 { font-size: var(--fs-lg); }
.bento__cell > p { margin-top: 10px; color: var(--ink-muted); font-size: var(--fs-xs); }
.bento__art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 230px;
  margin-bottom: 26px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--line-hair);
  overflow: hidden;
}
.bento__art > * { width: 100%; }
.bento__cell--foot .bento__art { order: 2; margin: 26px 0 0; }
.bento__cell--foot h4 { order: 0; }
.bento__cell--foot > p { order: 1; }

.thread { padding: 14px; }
.thread__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-hair);
}
.thread__top b { color: var(--ink); font-size: var(--fs-2xs); font-weight: 600; }
.thread__body { padding-top: 12px; }

.stores { padding: 12px; }
.stores__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: var(--r-sm);
}
.stores__row + .stores__row { border-top: 1px dashed var(--line); }
.stores__row i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); }
.stores__row i svg { width: 17px; height: 17px; }
.stores__row b { display: block; color: var(--ink); font-size: var(--fs-2xs); font-weight: 600; }
.stores__row span { display: block; color: var(--ink-muted); font-size: var(--fs-3xs); }
.stores__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line);
  color: var(--ink-muted);
  font-size: var(--fs-3xs);
  font-weight: 500;
}
.stores__add svg { width: 13px; height: 13px; }

.policy-edit { padding: 14px; }
.policy-edit__field {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
}
.policy-edit__field + .policy-edit__field { margin-top: 9px; }
.policy-edit__field label { display: block; color: var(--ink-faint); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.policy-edit__field .val { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; color: var(--ink); font-size: var(--fs-2xs); font-weight: 500; }
.policy-edit__field--focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.policy-edit__hint { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: var(--ok); font-size: var(--fs-3xs); }
.policy-edit__hint svg { width: 13px; height: 13px; }

.liability { padding: 14px; }
.liability__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.liability__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.liability__spark { margin-top: 14px; }
.liability__legend { display: flex; gap: 14px; margin-top: 10px; color: var(--ink-muted); font-size: 10px; }
.liability__legend span { display: inline-flex; align-items: center; gap: 5px; }
.liability__legend i { width: 8px; height: 8px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   8. Témoignages — la citation et sa preuve (variante B, Rico, 16/09/2026)
   Gauche : le guillemet, FIXE (hors des diapositives : il ne bouge ni ne
   clignote d'une citation à l'autre), la citation, l'auteur en initiales,
   puis le sélecteur de boutique et les flèches. Droite : « What the shopper
   sees », la page produit de la boutique citée.
   La carte suit la diapositive active par :has() : main.js n'en sait rien.
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "main proof"
    "foot proof";
  column-gap: clamp(32px, 5.5vw, 80px);
  row-gap: 32px;
  padding-block: var(--sp-section);
}

/* ---- Citation ------------------------------------------------------------ */
/* La colonne a une hauteur constante (guillemet + pile, qui prend la hauteur
   de la plus longue citation) : la centrer ne fait rien bouger. */
.quotes__main { grid-area: main; align-self: center; }
.quotes__glyph {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 28px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-ink);
}
.quotes__glyph svg { width: 24px; height: 24px; }

/* Pile de diapositives : toutes superposées dans la même cellule de grille.
   La hauteur est celle de la plus haute, donc rien ne saute au changement —
   et le fondu est réel, ce qu'un `display: none` ne permet jamais. */
.quotes__stack,
.case-stack { display: grid; }
.quotes__stack > *,
.case-stack > * { grid-area: 1 / 1; }

.quotes__slide,
.case {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity .5s var(--ease-out),
    transform .5s var(--ease-out),
    visibility 0s linear .5s;
}
.quotes__slide.is-active,
.case.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
/* Collée en haut de la pile : une citation courte ne descend pas. */
.quotes__slide { align-self: start; }

.quotes blockquote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-size: clamp(1.5rem, 1.05rem + 1.45vw, 2.125rem);
  line-height: 1.28;
  letter-spacing: -.028em;
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}
.quotes__person { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.quotes__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
}
.quotes__person p { margin: 0; }
.quotes__person b { display: block; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-body); }
.quotes__person p span { display: block; margin-top: 1px; color: var(--ink-muted); font-size: var(--fs-xs); }

/* ---- Pied : sélecteur de boutique, flèches ------------------------------- */
.quotes__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.quotes__stores {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-hair);
}
.quotes__store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quotes__store svg { width: 15px; height: 15px; flex: none; }
.quotes__store:hover { color: var(--ink); }
.quotes__store[aria-current="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--sh-md);
}
.quotes__store[aria-current="true"] svg { color: var(--accent-ink); }
.quotes__store:focus-visible,
.quotes .carousel__btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---- Panneau de preuve --------------------------------------------------- */
.quotes__proof {
  grid-area: proof;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 40vw, 548px);
  padding: 64px 32px 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(64% 54% at 50% 56%, var(--accent-glow) 0%, var(--accent-soft) 48%, transparent 100%),
    var(--panel);
}
.quotes__proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--hatch) 1.1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, var(--ink) 30%, transparent 85%);
          mask-image: radial-gradient(75% 70% at 50% 50%, var(--ink) 30%, transparent 85%);
}

.quotes__cards { position: relative; display: grid; width: min(100%, 316px); }
/* Carte fantôme derrière la page produit : profondeur, sans contenu. */
.quotes__cards::before {
  content: "";
  position: absolute;
  inset: 22px -16px -12px 18px;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  opacity: .6;
  transform: rotate(4deg);
}
.quotes__card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition:
    opacity .45s var(--ease-out),
    transform .6s var(--ease-out),
    visibility 0s linear .45s;
}
.quotes:has(.quotes__slide:nth-child(1).is-active) .quotes__card:nth-child(1),
.quotes:has(.quotes__slide:nth-child(2).is-active) .quotes__card:nth-child(2),
.quotes:has(.quotes__slide:nth-child(3).is-active) .quotes__card:nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .06s, .06s, 0s;
}
@supports not selector(:has(*)) {
  .quotes__card:first-child { opacity: 1; visibility: visible; transform: none; }
}

/* Page produit dessinée. Tout texte y fait au moins 12 px. */
.shop-card {
  padding: 12px 12px 14px;
  border-radius: 24px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-soft), var(--sh-pop);
}
.shop-card--sweater { --p-bg: var(--ill-sweater-bg); --p-1: var(--ill-sweater); --p-2: var(--ill-sweater-deep); }
.shop-card--holder  { --p-bg: var(--ill-holder-bg); --p-1: var(--ill-holder); --p-3: var(--ill-holder-card); --p-4: var(--ill-holder-band); }
.shop-card--lamp    { --p-bg: var(--ill-lamp-bg); --p-1: var(--ill-lamp); --p-2: var(--ill-lamp-deep); --p-3: var(--ill-lamp-shade); --p-4: var(--ill-lamp-rim); }
.shop-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; }
.shop-card__store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.035em;
}
.shop-card__store svg { width: 18px; height: 18px; }
.shop-card__bag { position: relative; display: block; width: 20px; height: 20px; color: var(--ink-soft); }
.shop-card__bag svg { width: 100%; height: 100%; }
.shop-card__bag i {
  position: absolute;
  top: -6px; right: -8px;
  display: grid;
  place-items: center;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-invert);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}
.shop-card__img {
  display: grid;
  place-items: center;
  height: 176px;
  border-radius: 16px;
  background: var(--p-bg);
}
.shop-card__img svg { width: 74%; height: auto; }
.shop-card__info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; padding-inline: 4px; }
.shop-card__name { display: block; color: var(--ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-body); line-height: 1.3; }
.shop-card__var { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 12px; line-height: 1.3; }
.shop-card__price { color: var(--ink); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.shop-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 14px;
  border-radius: var(--r-pill);
  background: var(--solid);
  color: var(--solid-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.shop-card__badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.shop-card__wr { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.shop-card__logo { display: block; flex: none; width: 58px; height: 9.3px; color: var(--ink); }
.shop-card__wr b { color: var(--accent-ink); font-size: 12px; font-weight: 600; line-height: 1; }
.shop-card__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-on);
}
.shop-card__check svg { width: 10px; height: 10px; }
.shop-card__days {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.shop-card__days svg { width: 12px; height: 12px; color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .quotes:has(.quotes__slide:nth-child(1).is-active) .quotes__card:nth-child(1) .shop-card__badge,
  .quotes:has(.quotes__slide:nth-child(2).is-active) .quotes__card:nth-child(2) .shop-card__badge,
  .quotes:has(.quotes__slide:nth-child(3).is-active) .quotes__card:nth-child(3) .shop-card__badge {
    animation: quotes-glow 1.4s .45s var(--ease-out) both;
  }
}
@keyframes quotes-glow {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  55%  { box-shadow: 0 0 0 7px var(--accent-soft); }
  100% { box-shadow: 0 0 0 4px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .quotes__slide,
  .quotes__card { transition: none; transform: none; }
}

/* ---- Étroit -------------------------------------------------------------- */
@media (max-width: 980px) {
  .quotes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    /* Le sélecteur reste collé à la citation qu'il pilote : sous la page
       produit, il tomberait ~600 px plus bas et changerait un texte hors de
       l'écran. Ordre : citation, sélecteur, page produit. */
    grid-template-areas: "main" "foot" "proof";
    row-gap: 28px;
  }
  .quotes blockquote { max-width: 26ch; }
  .quotes__proof { min-height: 0; padding: 60px 24px 36px; }
}
@media (max-width: 560px) {
  .quotes blockquote { max-width: none; }
  .quotes__proof { padding: 56px 16px 30px; border-radius: var(--r-md); }
  .quotes__cards::before { inset: 20px -8px -10px 12px; }
  .quotes__foot { padding-top: 20px; }
  .quotes__stores { display: flex; width: 100%; }
  .quotes__store { flex: 1 1 0; justify-content: center; padding-inline: 8px; }
  .quotes .carousel__nav { display: none; }
}

/* --------------------------------------------------------------------------
   9. Arbre d'intégrations
   Quatre PSP en haut, WeRefund au centre, sept plateformes dessous (4 + 3).
   Les PSP et la première ligne de plateformes partagent la même grille de
   quatre colonnes (12,5 / 37,5 / 62,5 / 87,5 %) ; les fils des PSP entrent
   dans le concentrateur par le côté, à sa hauteur.
   Tout vit dans une scène à proportions FIXES : les tuiles y sont placées en
   pourcentage, et les fils dans un SVG qui la couvre, viewBox de 1000 de
   large aux mêmes proportions. Une tuile et son fil partagent donc la même
   abscisse et la même ordonnée à toutes les largeurs. Deux scènes : large
   (1000 × 680) et étroite sous 760 px (1000 × 1240), chacune avec son SVG.
   Les fils partent et arrivent au CENTRE des tuiles et du concentrateur,
   sous eux : quelle que soit la taille de la tuile, le fil la touche.
   -------------------------------------------------------------------------- */

.tree { display: grid; justify-items: center; padding-block: 20px 0; }
.tree__stage {
  --tile: clamp(46px, 6.9cqw, 62px);
  --hub: clamp(62px, 9.1cqw, 82px);
  --y-psp: 10.294%;   /* 70 / 680 */
  --y-hub: 33.824%;   /* 230 / 680 */
  --y-l1: 69.118%;    /* 470 / 680 */
  --y-l2: 89.706%;    /* 610 / 680 */
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1000 / 680;
  container-type: inline-size;
}
.tree__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tree__wires--narrow { display: none; }
.tree__wires path { fill: none; }

/* Deux calques superposés : les rails, qui ne bougent jamais, et les paquets,
   qui portent la couleur de la marque dont ils viennent. Les rails gardent
   1,25 px à toute échelle (non-scaling-stroke). Les paquets, NON : Chrome
   ignore alors `pathLength` dans le calcul des tirets, et le paquet couvre tout
   le tracé — leur épaisseur est donc posée en unités de viewBox, par scène. */
.tree__wires .tree__track path {
  stroke: var(--line);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.tree__wires .tree__flow path {
  stroke: var(--c, var(--accent));
  stroke-width: 2.6;
  stroke-linecap: round;
  /* `pathLength="100"` normalise les onze tracés, qui n'ont pas la même
     longueur réelle : sans lui, les paquets des canaux longs traverseraient
     plus lentement que ceux du centre. */
  stroke-dasharray: 9 300;
  stroke-dashoffset: 12;   /* au repos, le paquet est HORS du tracé */
}

/* Un nœud est un point (largeur et hauteur nulles) posé sur la scène ; la
   tuile et son libellé s'y centrent. Le centrage passe par `translate`, pas
   par `transform`, que l'animation de flottement occupe déjà. */
.tree__node { position: absolute; left: var(--x); top: var(--y); }
.tree__node--psp { --y: var(--y-psp); }
.tree__node--l1 { --y: var(--y-l1); }
.tree__node--l2 { --y: var(--y-l2); }
.tree__node .app-tile {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * .26);
}
.tree__node .app-tile svg {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0 round calc(var(--tile) * .26 - 1px));
}
/* Anneau d'émission de la tuile, allumé à l'instant du départ. */
.tree__node .app-tile::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--tile) * .26 + 3px);
  border: 2px solid var(--c, transparent);
  opacity: 0;
  pointer-events: none;
}
/* Le libellé se place du côté opposé au fil : sous les plateformes, au-dessus
   des PSP, dont le fil descend. */
.tree__label {
  position: absolute;
  left: 0;
  top: calc(var(--tile) / 2 + 7px);
  translate: -50% 0;
  white-space: nowrap;
  color: var(--ink-muted);
  font-size: clamp(12px, 1.45cqw, 13px);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-body);
}
.tree__node--psp .tree__label { top: auto; bottom: calc(var(--tile) / 2 + 7px); }

/* Moyeu (Rico, 16/09) : le logo animé <werefund-mark> sur un disque blanc qui masque le croisement des fils. */
.tree__hub {
  position: absolute;
  left: 50%;
  top: var(--y-hub);
  translate: -50% -50%;
  width: var(--hub);
  height: var(--hub);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--sh-pop);
}
.tree__hub werefund-mark,
.tree__hub werefund-mark > svg { display: block; width: 100%; height: 100%; }

@media (max-width: 760px) {
  .tree__stage {
    --tile: clamp(44px, 11.5cqw, 52px);
    --hub: clamp(56px, 14.8cqw, 68px);
    --y-psp: 11.935%;   /* 148 / 1240 */
    --y-hub: 34.677%;   /* 430 / 1240 */
    --y-l1: 64.516%;    /* 800 / 1240 */
    --y-l2: 87.903%;    /* 1090 / 1240 */
    /* La scène déborde dans les gouttières (pas au-delà de l'écran) : sous
       400 px, les 36 px gagnés écartent les fils de la ligne 2 des libellés
       de la ligne 1. */
    width: calc(100% + 2 * var(--gutter));
    max-width: 460px;
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 1000 / 1240;
  }
  .tree__wires--wide { display: none; }
  .tree__wires--narrow { display: block; }
  .tree__wires--narrow .tree__flow path { stroke-width: 5.8; --glow: 11px; }
  .tree__label {
    top: calc(var(--tile) / 2 + 5px);
    font-size: clamp(10px, 3.2cqw, 11px);
    line-height: 14px;
  }
  .tree__node--psp .tree__label { bottom: calc(var(--tile) / 2 + 5px); }
}

/* --------------------------------------------------------------------------
   10. Clients / étude de cas
   -------------------------------------------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  border-block: 1px solid var(--line-hair);
}
.cases__left { padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px) clamp(36px, 4vw, 56px) 0; }
.cases__left h2 { margin-top: 22px; }
.cases__left > p { margin-top: 20px; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 34ch; }
.cases__left .link-arrow { margin-top: 22px; }
.cases__trust { margin-top: clamp(40px, 6vw, 92px); }
.cases__trust p { color: var(--ink-muted); font-size: var(--fs-xs); max-width: 30ch; }
.cases__rating { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: var(--ink-muted); font-size: var(--fs-xs); }

.cases__right {
  padding: clamp(36px, 4vw, 56px) 0 clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  border-left: 1px solid var(--line-hair);
}
.case__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 1.375rem; font-weight: 600; letter-spacing: -.035em; }
.case__logo svg { width: 26px; height: 26px; }
.case h3 { margin-top: 22px; font-size: var(--fs-h3); max-width: 24ch; }
.case__author { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.case__author .avatar { width: 42px; height: 42px; }
.case__author b { display: block; color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.case__author span { display: block; color: var(--ink-muted); font-size: var(--fs-2xs); }
.case__link { margin-top: 20px; }
.case__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px dashed var(--line);
}
.case__stat { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.case__stat i {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--ok);
}
.case__stat i svg { width: 15px; height: 15px; }
.case__stat b { display: block; color: var(--ink); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums; }
.case__stat span { display: block; color: var(--ink-muted); font-size: var(--fs-2xs); }
.cases__controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; }
.cases__count { color: var(--ink-muted); font-size: var(--fs-2xs); }

/* --------------------------------------------------------------------------
   11. Articles
   -------------------------------------------------------------------------- */

.posts { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); }
.post-lead__thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, #C3D2DE 0%, #8FA6BA 60%, #6C8398 100%);
}
.post-lead__thumb .go {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.post-lead__thumb .go svg { width: 13px; height: 13px; }
.post-meta { margin-top: 20px; color: var(--ink-muted); font-size: var(--fs-2xs); }
.post-lead h3 { margin-top: 12px; font-size: var(--fs-h3); max-width: 18ch; }
.post-lead .tag, .post-row .tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 12px;
  margin-top: 18px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--fs-3xs);
  font-weight: 500;
}
.post-list { display: grid; gap: 22px; align-content: start; }
.post-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: center; }
.post-row__thumb { aspect-ratio: 16 / 11; border-radius: var(--r-md); overflow: hidden; }
.post-row h4 { margin-top: 8px; font-size: var(--fs-md); }
.post-row .post-meta { margin-top: 0; }
.post-row .tag { margin-top: 12px; }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.help { display: grid; gap: 14px; }
.help__card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--line-hair);
}
.help__card i {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-body);
  box-shadow: var(--sh-sm);
}
.help__card i svg { width: 20px; height: 20px; }
.help__card b { display: block; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.help__card p { margin-top: 3px; color: var(--ink-muted); font-size: var(--fs-2xs); }
.help__card .link-arrow { margin-top: 7px; font-size: var(--fs-2xs); }

/* --------------------------------------------------------------------------
   13. Appel final
   -------------------------------------------------------------------------- */

.final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 88px);
  border-block: 1px solid var(--line-hair);
}
.final__kicker { color: var(--ink-muted); font-size: var(--fs-sm); }
.final h2 { margin-top: 14px; max-width: 20ch; }
.final > div > p:last-of-type { margin-top: 14px; color: var(--ink-muted); font-size: var(--fs-sm); }
.final__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.foot { padding-block: clamp(48px, 5vw, 76px) 0; }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 28px;
}
/* Titres de colonne : des h2 dans le <nav> du pied de page. On neutralise ce que
   base.css donne aux h2 pour garder le rendu des anciens h5. */
.foot__title {
  margin: 0 0 18px;
  font-family: inherit;
  line-height: inherit;
  font-variation-settings: normal;
  color: var(--ink-faint);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.foot__title:not(:first-child) { margin-top: 34px; }
.foot__col ul { display: grid; gap: 11px; }
.foot__col a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  transition: color var(--dur) var(--ease);
}
.foot__col a:hover { color: var(--ink); }
.foot__col a svg { width: 10px; height: 10px; color: var(--ink-faint); }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(44px, 5vw, 72px);
  padding-block: 26px;
  border-top: 1px solid var(--line-hair);
  color: var(--ink-muted);
  font-size: var(--fs-2xs);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* Mention réglementaire — obligatoire dès qu'on parle de paiement. */

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width: 1120px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .cases { grid-template-columns: 1fr; }
  .cases__left { padding-right: 0; padding-bottom: 0; }
  .cases__right { border-left: 0; border-top: 1px solid var(--line-hair); padding-left: 0; margin-top: 40px; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  /* Liens masqués : deux colonnes seulement, logo à gauche, actions calées à droite. Avant, les actions tombaient dans
     la colonne 1fr, collées au logo (Rico, 17/09), et une colonne vide gardait une gouttière de trop. */
  .nav { grid-template-columns: auto minmax(0, 1fr); }
  .nav__actions { grid-column: 2; justify-self: end; }
  .nav__burger { display: block; }
  .feats { gap: var(--sp-block); }
  .feat { grid-template-columns: 1fr; gap: 20px; }
  .feat__text { max-width: 56ch; padding-bottom: 0; }
  .feat__panel { min-height: 460px; padding: 48px 24px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell:nth-child(3n) { border-right: 0; }
  .bento__cell:nth-child(2n) { border-right: 1px solid var(--line-hair); }
  .posts { grid-template-columns: 1fr; }
  .marks { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .marks__label { padding-right: 0; border-right: 0; text-align: center; }
  .marquee { padding-left: 0; }
  .final { grid-template-columns: 1fr; gap: 28px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .frame { border-inline: 0; }
  .frame::before, .frame::after { display: none; }
  .hero__grid { gap: 40px; }
  .hero__stage { grid-template-columns: 1fr; padding: 14px; }
  /* 375 px : logo + Sign in + Get Verified + menu débordaient de 58 px ; « Sign in » vit aussi dans le menu. */
  .nav__actions .btn--quiet { display: none; }
  .hero__proof { margin-top: 36px; }
  .steps__grid { grid-template-columns: 1fr; }
  .steps__visual { min-height: 320px; order: -1; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell, .bento__cell:nth-child(2n) { border-right: 1px solid var(--line-hair); }
  .sec-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .post-row { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .case__stats { grid-template-columns: 1fr; }
  .acc__body { padding-inline: 0 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .gauges { grid-template-columns: 1fr; }
  .feat__sub { font-size: var(--fs-md); }
  .feat__panel { min-height: 0; padding: 28px 16px; border-radius: var(--r-md); }
  .feat__item { grid-template-columns: 18px minmax(0, 1fr); }
  .feat__val { grid-column: 2; padding-bottom: 8px; text-align: left; }
  .feat__place { flex-wrap: wrap; }
  .marquee { --mq-gap: 40px; }
  .marquee__logo { height: calc(var(--h) * .86); width: calc(var(--h) * .86 * var(--r)); }
}

/* ---------- Rico, 15/09 : le titre du hero et ses sources ---------- */
/* « trust » en #2EF19C, à sa demande, sur un titre en encre. */
.hero__trust { color: var(--accent); }
/* Les sources du chiffre du sous-titre, en tout petit sous le hero. */
.hero__source { margin-top: 22px; max-width: 60ch; font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); }

/* ---------- Rico, 15/09 : la démonstration du hero (composant <werefund-animation>) ---------- */
.hero__demo { display: flex; justify-content: flex-end; min-width: 0; }
.hero__demo werefund-animation { --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-stage: var(--panel); --wr-stage-border: var(--stage-border); }
@media (max-width: 1120px) { .hero__demo { justify-content: center; } }

/* Rico, 15/09 : l'appel de note « 1 » sur « 16% » du sous-titre, renvoyant aux sources sous le hero. */
.hero__lede sup, .hero__source sup { font-size: .62em; line-height: 0; vertical-align: super; }
.hero__fn a { color: inherit; text-decoration: none; }
.hero__fn a:hover { color: var(--ink); }

/* Rico, 15/09 : l'animation « Verify it. » (composant <werefund-signup>) posée dans le panneau gris de la rangée 1.
   Son propre fond s'efface : la carte blanche flotte sur --panel, comme les autres rangées. */
.feat__panel werefund-signup { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); margin-inline: auto; }

/* Rico, 15/09 : l'animation « Show it. » (composant <werefund-trust>) dans le panneau gris de la rangée 2.
   Fond transparent sur --panel ; verts du site, et le vert foncé des textes aligné sur --accent-ink. */
.feat__panel werefund-trust { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-deep: var(--accent-ink); margin-inline: auto; }

/* Rico, 15/09 : l'animation « Keep it on record. » (composant <werefund-record>) dans le panneau gris de la rangée 3.
   Cercles en --accent, bouton d'envoi en --checkout-wr, textes verts sur --accent-ink. */
.feat__panel werefund-record { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-deep: var(--accent-ink); margin-inline: auto; }

/* Rico, 16/09 : les animations des étapes de « Three Steps. One Promise. » (#how). */
/* Étapes 01 et 02 : <werefund-account> et <werefund-connect> sur le fond du visuel ; verts du site. Le panneau
   s'élargit pour eux (.steps__panel vaut min(100%, 380px) : l'élément y serait écrasé). Le visuel prend la
   hauteur de l'animation ; la carte de l'étape 03, plus basse, y reste centrée (place-items: center). */
.steps__panel werefund-account { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-deep: var(--accent-ink); margin-inline: auto; }
.steps__panel werefund-connect { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-deep: var(--accent-ink); margin-inline: auto; }
.steps__panel:has(> werefund-account),
.steps__panel:has(> werefund-connect) { width: min(100%, 600px); }
/* L'avance de l'accordéon est suspendue hors écran (main.js) : l'anneau s'arrête avec elle. */
.steps__grid.is-paused .acc__dot .bar { animation-play-state: paused; }

/* 320 px (reflow WCAG) : le logo, « Get Verified » et le bouton du tiroir ne tiennent pas ensemble ;
   « Get Verified » reste dans le tiroir (.drawer__cta). */
/* 360-420 px : logo, Get Verified et menu se touchaient (le bouton recouvrait le logo à 360 px). On resserre la barre,
   pas le logo, dont la taille est fixée par D29. */
@media (max-width: 420px) {
  .nav { gap: 12px; padding-left: 14px; padding-right: 6px; }
  .nav__actions { gap: 4px; }
  .nav__actions .btn--sm { padding-inline: 12px; }
}
@media (max-width: 380px) {
  .nav { gap: 8px; padding-left: 12px; }
  .nav__actions .btn--sm { padding-inline: 10px; }
  .nav__burger { width: 36px; }
}
@media (max-width: 359px) { .nav__actions .btn--solid { display: none; } }

/* Rico, 16/09 : animation de l'étape 03 (<werefund-verified>) dans le panneau de « Three Steps ». */
.steps__panel werefund-verified { --wr-stage: transparent; --wr-font: var(--font-text); --wr-button: var(--checkout-wr); --wr-accent: var(--accent); --wr-deep: var(--accent-ink); margin-inline: auto; }
.steps__panel:has(> werefund-verified) { width: min(100%, 600px); }