/* =========================================================================
   /tunnel-de-vente · styles propres à la page (préfixe .tdv-)
   Composants partagés réutilisés : .hero, .frame, .section-head, .tag--num, .cut-line,
   .pulses--static, .actions, .link, partial contact. Rien de nouveau dans components.css.
   ========================================================================= */

/* ---------- Héros : titre long → échelle .h1 (40 → 72), pas .display ---------- */
.tdv-hero .hero__title { max-width: 12em; }

/* ---------- Trois outils : cartes coupées (1/4 → --ch-block 24 px), filet trait, fond blanc (à valider) ---------- */
.tdv-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); list-style: none; }
.tdv-tool {
  --ch: var(--ch-block); --bw: 1px; --line: var(--trait); --fill: var(--blanc);
  display: flex; flex-direction: column; min-height: 264px; padding: 30px 30px 34px;
}
.tdv-tool__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tdv-tool__picto { width: 32px; height: 32px; flex: none; }
.tdv-tool__title {
  margin-top: auto; padding-top: 40px;
  font-weight: 800; font-size: var(--fs-sub); line-height: 1.05; letter-spacing: -0.025em;
}
.tdv-tool__text { margin-top: 12px; max-width: 26em; color: var(--graphite); font-size: var(--fs-body); line-height: 1.45; }
@media (max-width: 760px) {
  .tdv-tools { grid-template-columns: 1fr; gap: 14px; }
  .tdv-tool { min-height: 0; padding: 24px 24px 28px; }
  .tdv-tool__title { padding-top: 24px; }
}

/* ---------- Ce qui change : titre à gauche, panneau citron 40 coupé à droite ---------- */
.tdv-change { align-items: start; }
.tdv-change__title { margin-top: 16px; }
.tdv-change__panel {
  --ch: var(--ch-block);
  padding: clamp(28px, 1.2rem + 1.4vw, 44px) clamp(24px, 1rem + 1.6vw, 48px);
  background: var(--citron-40); color: var(--encre);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.tdv-change__list { list-style: none; }
.tdv-change__list > li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--graphite);
}
.tdv-change__list > li:first-child { border-top: 0; padding-top: 4px; }
.tdv-change__list > li:last-child { padding-bottom: 4px; }
.tdv-change__list .ico { width: 26px; height: 26px; margin-top: 2px; }
.tdv-change__item {
  font-weight: 700; font-size: clamp(1.125rem, 0.98rem + 0.55vw, 1.4375rem); line-height: 1.3; letter-spacing: -0.012em;
}
.tdv-change__note { grid-column: 2; margin-top: 8px; font-size: var(--fs-small); line-height: 1.45; }
/* Entre 900 et 1100 px, la colonne de titre est étroite : le titre et le panneau s'empilent. */
@media (min-width: 900px) and (max-width: 1099px) {
  .tdv-change > .span-5, .tdv-change > .span-6 { --span: 12; --start: auto; }
}
@media (max-width: 1099px) { .tdv-change__panel { max-width: 760px; } }

/* ---------- Trois niveaux : paliers montants (≥ 901 px) + impulsions statiques (p.25) ---------- */
.tdv-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); list-style: none; align-items: start; }
.tdv-level { border-top: 2px solid var(--filet-encre); padding-top: 22px; }
.tdv-level__k { margin-top: 20px; color: var(--cendre); }
.tdv-level__title { margin-top: 8px; font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; }
.tdv-level__lead { margin-top: 12px; font-weight: 600; font-size: var(--fs-lead); line-height: 1.35; color: var(--papier); }
.tdv-level__list { margin-top: 18px; display: grid; gap: 10px; list-style: none; }
.tdv-level__list li { position: relative; padding-left: 26px; color: var(--cendre); font-size: var(--fs-body); line-height: 1.45; }
.tdv-level__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 2px; background: var(--cendre); }
.tdv-levels__foot { margin-top: clamp(36px, 2rem + 1vw, 56px); }
@media (min-width: 901px) {
  .tdv-level:nth-child(1) { margin-top: 112px; }
  .tdv-level:nth-child(2) { margin-top: 56px; }
}
@media (max-width: 900px) {
  .tdv-levels { grid-template-columns: 1fr; gap: 40px; }
}