/* KommIA : styles propres aux pages comparatives kommia-vs-*, chargés après site.css
   (le tableau, les marques, la FAQ et l'appel final viennent de site.css) */
/* Hauteur du sommaire collant, déduite des ancres et des éléments collants */
:root { --vnav-h: 52px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h) + 8px); }

/* Le sommaire lui-même est un composant commun (site.css) */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--violet-ink); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }
.muted { font-weight: 400; color: var(--ink-60); }

/* ────── Haut de page : le duel en titre, les deux logos face à face ────── */
.vhero {
  max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3.5vw, 56px) var(--gutter) clamp(48px, 6vw, 88px);
  min-height: min(calc(100dvh - var(--nav-h)), 860px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 40px clamp(40px, 6vw, 96px);
}
.vhero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  animation: fx-up 800ms var(--ease-out) both 40ms;
}
.vhero__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }
.vhero__title {
  font-size: clamp(2.8rem, 1.4rem + 5vw, 5.6rem); font-weight: 620; letter-spacing: -0.05em; line-height: 0.98;
  animation: fx-up 900ms var(--ease-out) both 120ms;
}
.vhero__vs { font-size: 0.62em; font-weight: 500; font-style: italic; letter-spacing: -0.02em; color: var(--ink-60); }
.vhero__sub {
  margin-top: 18px; max-width: 36rem; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance;
  animation: fx-up 900ms var(--ease-out) both 220ms;
}
.vhero__lead {
  margin-top: 22px; max-width: 38rem; font-size: 1.08rem; line-height: 1.62; color: var(--ink-70); text-wrap: pretty;
  animation: fx-up 900ms var(--ease-out) both 320ms;
}
.vhero__lead strong { display: block; margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.vhero__lead em { font-style: italic; color: var(--ink); }
.vhero__status {
  margin-top: 18px; display: flex; align-items: baseline; gap: 10px; max-width: 38rem; font-size: 14.5px; line-height: 1.5; color: var(--ink-60);
  animation: fx-up 900ms var(--ease-out) both 400ms;
}
.vhero__status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3CC48A; box-shadow: 0 0 0 4px rgba(60, 196, 138, 0.16); transform: translateY(-1px); }
.vhero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; animation: fx-up 900ms var(--ease-out) both 480ms; }
.vhero__duel { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.6vw, 34px); }
.vhero__logo {
  display: grid; place-items: center; width: clamp(118px, 11.5vw, 168px); aspect-ratio: 1; border-radius: 28%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.07), 0 30px 60px -34px rgba(40, 28, 96, 0.55);
}
.vhero__logo img { width: 100%; height: 100%; object-fit: cover; }
.vhero__logo--k img, .vhero__logo--later img { width: 70%; height: 70%; object-fit: contain; }
.vhero__logo--k { box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.06), 0 34px 70px -30px rgba(91, 63, 224, 0.6); animation: duel-in-l 1100ms var(--ease-out) both 300ms; }
.vhero__logo:not(.vhero__logo--k) { animation: duel-in-r 1100ms var(--ease-out) both 380ms; }
.vhero__x { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); font-weight: 600; font-style: italic; color: var(--violet); animation: fx-up 900ms var(--ease-out) both 600ms; }

/* ────── Le verdict rapide : deux colonnes ouvertes, KommIA soulignée d'un trait en dégradé ────── */
.verdict2 { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.verdict2__grid { --vg: clamp(44px, 5.6vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--vg); }
.vcard { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.vcard--k { border-top-color: transparent; }
.vcard--k::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #168EFF, #876AFF, #5AD3FF); }
.vcard--k::after {
  content: ''; position: absolute; left: calc(var(--vg) / -2); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(14, 14, 20, 0.09), rgba(14, 14, 20, 0.09) 80%, rgba(14, 14, 20, 0));
}
.vcard__label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink-60); }
.vcard--k .vcard__label { color: var(--ink); }
.vcard__logo {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.08), 0 8px 16px -12px rgba(40, 28, 96, 0.5);
}
.vcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.vcard__logo--k img, .vcard__logo--later img { width: 72%; height: 72%; object-fit: contain; }
.vcard__badge { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; }
.vcard__title { margin-top: 16px; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.vcard__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.vcard__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.vcard__list .st { margin: 0; }
.vcard__list strong { font-weight: 600; color: var(--ink); }
.js .verdict2__grid .vcard:nth-child(2) { transition-delay: 110ms; }

/* ────── Le tableau : une colonne par outil, KommIA posée dessus comme une carte ────── */
.compare { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
@media (min-width: 900px) { .vs-stage { --first: 24%; --col: 38%; } }
.vs-table thead td { font-size: 14px; font-weight: 500; color: var(--ink-60); }
.vs-table tbody th { font-size: 15px; }

/* ────── Les quatre différences : le titre et sa conclusion à gauche, l'argument à droite ────── */
.deep2 { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.deep2__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.deep2__item {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 18px clamp(32px, 5vw, 80px);
  padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--line);
}
.deep2__head { align-self: start; }
.deep2__num { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--violet); }
.deep2__head h3 { margin-top: 10px; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.18; text-wrap: balance; }
.deep2__body p { font-size: 16px; line-height: 1.68; color: var(--ink-70); text-wrap: pretty; }
.deep2__body p + p { margin-top: 14px; }
.deep2__body em { font-style: italic; color: var(--ink); }
.deep2__body strong { font-weight: 600; color: var(--ink); }
/* La conclusion : un simple filet violet à gauche, comme la citation de Gaby, sans encadré */
.deep2__verdict {
  margin-top: 18px; padding: 2px 0 2px 18px; font-size: 16px; line-height: 1.55; text-wrap: pretty;
  border-left: 2px solid rgba(135, 106, 255, 0.45); color: var(--ink); font-weight: 500;
}
.deep2__verdict strong { color: var(--violet-ink); font-weight: 650; }
/* Sur téléphone, le développement se replie derrière « Lire le détail » (texte présent dans la page) */
.deep2__toggle { display: none; }

/* ────── La preuve de Gaby, seule entre le décryptage et les profils ────── */
.vproof { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.vproof .proof { margin: 0; padding-top: 0; border-top: 0; }

/* ────── Passer à KommIA : trois étapes en colonnes ouvertes, séparées par des filets ────── */
.switch { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.switch__steps { --sg: clamp(36px, 4.6vw, 72px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sg); }
.switch__steps li { position: relative; padding: 6px 0 4px; }
.switch__steps li + li::before {
  content: ''; position: absolute; left: calc(var(--sg) / -2); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(14, 14, 20, 0), rgba(14, 14, 20, 0.09) 16%, rgba(14, 14, 20, 0.09) 84%, rgba(14, 14, 20, 0));
}
.switch__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(135, 106, 255, 0.12); color: var(--violet-ink); font-size: 13px; font-weight: 650; letter-spacing: 0.02em;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), transform 400ms var(--ease-spring);
}
.switch__steps h3 { margin-top: 16px; font-size: 1.12rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.switch__steps p { margin-top: 8px; max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
@media (hover: hover) {
  .switch__steps li:hover .switch__num { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; transform: scale(1.06); }
}

/* ────── Quand choisir l'un ou l'autre : le composant de la page Comparatifs ────── */
.fit {
  --fg: clamp(40px, 6vw, 96px);
  max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--fg); align-items: start;
}
.fit__col:first-child { position: sticky; top: calc(var(--nav-h) + var(--vnav-h) + 32px); }
.fit__col--k { position: relative; }
.fit__col--k::before {
  content: ''; position: absolute; left: calc(var(--fg) / -2); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(14, 14, 20, 0), rgba(14, 14, 20, 0.09) 14%, rgba(14, 14, 20, 0.09) 86%, rgba(14, 14, 20, 0));
}
.fit__title { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.5rem); font-weight: 620; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.fit__lead { margin-top: 12px; max-width: 32rem; font-size: 16px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
.fit__list { list-style: none; margin: 24px 0 0; padding: 0; }
.fit__list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.fit__list li:last-child { border-bottom: 1px solid var(--line); }
.fit__list h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.fit__list p { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }
.fit__logos { display: inline-flex; flex: none; width: 32px; }
.fit__logo {
  width: 32px; height: 32px; border-radius: 9px; background: #fff; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.08), 0 8px 16px -12px rgba(40, 28, 96, 0.5);
  transition: transform 400ms var(--ease-spring);
}
.fit__logo--later { padding: 6px; object-fit: contain; }
.fit__mark {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(135, 106, 255, 0.14); color: var(--violet);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), transform 400ms var(--ease-spring);
}
.fit__mark svg { width: 14px; height: 14px; }
.fit__cta { margin-top: 28px; }
@media (hover: hover) {
  .fit__list li:hover .fit__logo { transform: translateY(-2px) rotate(-4deg); }
  .fit__list li:hover .fit__mark { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; transform: scale(1.06); }
}

/* ────── Pourquoi chercher une alternative : le titre à gauche, trois paragraphes à droite ────── */
.why { position: relative; max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.why .halo--violet { opacity: 0.5; }
.why__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
.why__title { position: sticky; top: calc(var(--nav-h) + var(--vnav-h) + 32px); }
/* Le concurrent puis KommIA, chacun avec son logo et son nom ; KommIA soulignée du trait en dégradé du verdict */
.why__side { position: relative; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.why__side--k { border-top-color: transparent; }
.why__side--k::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #168EFF, #876AFF, #5AD3FF); }
.why__label { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ink-60); }
.why__side--k .why__label { color: var(--ink); }
.why__side p:not(.why__label) { font-size: 17px; line-height: 1.68; color: var(--ink-60); text-wrap: pretty; }
.why__side--k p:not(.why__label) { color: var(--ink); }
.why__stay { padding-top: 18px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }

/* ────── Questions et appel final ────── */
.faq__head .kicker { margin-bottom: 14px; }

/* ────── Tablette et téléphone ────── */
@media (max-width: 899px) {
  :root { --vnav-h: 48px; }
  .vhero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
  .vhero__duel { order: -1; justify-content: flex-start; gap: 14px; }
  .vhero__duel { gap: 12px; }
  .vhero__logo { width: 56px; border-radius: 17px; }
  .vhero__x { font-size: 1.15rem; }
  .verdict2__grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .vcard--k::after { display: none; }
  .deep2__item { grid-template-columns: minmax(0, 1fr); }
  .deep2__head { position: static; }
  .js .deep2__toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0;
    border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--violet-ink); cursor: pointer;
  }
  .deep2__toggle svg { transition: transform 300ms var(--ease-out); }
  .deep2__item.is-open .deep2__toggle svg { transform: rotate(180deg); }
  .js .deep2__item:not(.is-open) .deep2__body { display: none; }
  .switch__steps { grid-template-columns: minmax(0, 1fr); }
  .switch__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
  .switch__steps li:last-child { border-bottom: 1px solid var(--line); }
  .switch__steps li + li::before { display: none; }
  .switch__steps h3 { grid-column: 2; margin-top: 4px; }
  .switch__steps p { grid-column: 2; }
  .switch__num { grid-row: 1 / span 2; }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit__col:first-child { position: static; }
  .fit__col--k::before { display: none; }
  .why__inner { grid-template-columns: minmax(0, 1fr); }
  .why__title { position: static; }
}
/* Sur téléphone, chaque critère devient un bloc : son nom, puis l'outil et KommIA côte à côte */
@media (max-width: 599px) {
  .vs-stage .compare__lift { display: none; }
  .vs-table, .vs-table tbody { display: block; width: 100%; }
  .vs-table thead { display: none; }
  .vs-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
  .vs-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .vs-table tbody :is(th, td) { border-top: 0 !important; }
  .vs-table tbody th { grid-column: 1 / -1; padding: 0 0 4px !important; font-size: 15px; }
  .vs-table tbody td { padding: 12px !important; border-radius: 14px; background: rgba(14, 14, 20, 0.035); font-size: 14px; }
  .vs-table tbody td.is-k { background: rgba(135, 106, 255, 0.09); }
  .vs-table tbody td.is-plus { background-image: none; }
  .vs-table tbody td::before { content: attr(data-col); display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; color: var(--ink-60); }
  .vs-table tbody td.is-k::before { color: var(--violet-ink); }
  .vhero__actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .vhero__actions { align-items: stretch; }
  .vhero__actions .text-link { align-self: center; }
}

/* ────── Mouvement réduit : tout est affiché dans son état final ────── */
@media (prefers-reduced-motion: reduce) {
  .vhero__eyebrow, .vhero__title, .vhero__sub, .vhero__lead, .vhero__status, .vhero__actions, .vhero__logo, .vhero__x { animation: none; }
  .fit__logo, .fit__mark, .switch__num, .deep2__toggle svg { transition: none; }
}
@keyframes fx-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes duel-in-l { from { opacity: 0; transform: translateX(-28px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes duel-in-r { from { opacity: 0; transform: translateX(28px) rotate(6deg); } to { opacity: 1; transform: none; } }

/* ────── Le vrai prix (2026-10-05, Bruno) : les trois formules de Swello face à l'offre unique de KommIA, lisibles en
   trente secondes, allégé le même jour (barres et montants plus fins). Une ligne par formule : ce qu'elle comprend, puis une barre dont la longueur suit le prix (120 € = la
   barre entière). Les noms des fonctions sont lus partout, montrés en en-tête sur ordinateur et en pastilles sur téléphone ────── */
.ladder { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.ladder__board { --cols: minmax(180px, 1.15fr) repeat(4, minmax(0, 0.6fr)) minmax(0, 2.3fr); --cg: 16px; }
.ladder__head, .rung { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: var(--cg); }
.ladder__head { padding: 0 20px 12px; font-size: 13px; font-weight: 600; color: var(--ink-60); }
.ladder__head span:not(:first-child):not(:last-child) { text-align: center; }
.ladder__list { list-style: none; margin: 0; padding: 0; }
.rung { padding: 14px 20px; border-top: 1px solid var(--line); }
.rung--k { margin-top: 12px; border-top: 0; border-radius: 18px; background: rgba(135, 106, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(135, 106, 255, 0.16); }
.rung__name { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.3; color: var(--ink-70); }
.rung__name img { flex: none; width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.07); }
.rung--k .rung__name img { padding: 4px; object-fit: contain; }
.rung__name strong { font-weight: 600; color: var(--ink); }
.rung__has { grid-column: 2 / span 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); list-style: none; margin: 0; padding: 0; }
.rung__f { display: grid; justify-items: center; gap: 4px; }
.rung__f .st { margin: 0; width: 22px; height: 22px; }
.rung__f .st svg { width: 11px; height: 11px; }
.rung__fname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rung__soon { font-size: 12px; font-weight: 600; line-height: 1.2; color: #946300; }
.rung__price { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; color: var(--ink-60); }
.rung__bar { flex: none; width: calc(var(--p) * (100% - 170px)); height: 8px; border-radius: 999px; background: rgba(40, 28, 96, 0.12); transform-origin: left center; }
.rung--k .rung__bar { background: linear-gradient(90deg, #168EFF, #876AFF); }
.rung__price strong { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rung__all { font-size: 13px; font-weight: 600; color: var(--violet-ink); white-space: nowrap; }
.ladder__foot { margin-top: 22px; max-width: 64rem; font-size: 13.5px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }
/* Le seul mouvement du bloc : chaque barre pousse jusqu'à son prix quand le tableau arrive à l'écran */
.js .ladder__board .rung__bar { transition: transform 1100ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 150ms); }
.js .ladder__board:not(.is-in) .rung__bar { transform: scaleX(0); }
@media (max-width: 899px) {
  .ladder__board { --cols: minmax(150px, 1fr) repeat(4, minmax(0, 0.55fr)) minmax(0, 1.9fr); --cg: 10px; }
  .ladder__head { padding: 0 14px 10px; font-size: 12px; }
  .rung { padding: 14px; }
  .rung__bar { width: calc(var(--p) * (100% - 150px)); }
}
@media (max-width: 699px) {
  .ladder__head { display: none; }
  .rung { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 16px 14px; }
  .rung__has { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rung__f { justify-self: stretch; }
  .rung__f { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(14, 14, 20, 0.045); font-size: 13px; font-weight: 500; color: var(--ink); }
  .rung--k .rung__f { background: rgba(135, 106, 255, 0.12); }
  .rung__f .st { width: 20px; height: 20px; }
  .rung__f .st svg { width: 11px; height: 11px; }
  .rung__f--no { color: var(--ink-60); }
  .rung__fname { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .rung__soon { font-size: 12px; white-space: nowrap; }
  .rung__bar { width: calc(var(--p) * (100% - 160px)); height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ladder__board .rung__bar { transition: none; }
  .js .ladder__board:not(.is-in) .rung__bar { transform: none; }
}

/* ────── Crédits IA de Later (2026-10-05, Bruno) : même principe que « le vrai prix » de Swello. Une ligne par formule :
   une barre à la longueur des légendes IA possibles par mois (la barre pleine vaut 160, les 100 de Scale n'en atteignent
   pas le bout), la messagerie, le prix. La barre de KommIA court jusqu'au bout et s'efface : pas de plafond ────── */
.ladder--later .ladder__board { --cols: minmax(170px, 1.1fr) minmax(0, 2.6fr) minmax(0, 0.75fr) minmax(0, 1fr); }
.ladder--later .ladder__head span:nth-child(2) { text-align: left; }
.ladder--later .ladder__head span:last-child { text-align: left; }
.rung__name img.is-contain { padding: 4px; object-fit: contain; }
.rung__ai { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rung__track { flex: 1; min-width: 0; height: 8px; border-radius: 999px; background: rgba(40, 28, 96, 0.06); overflow: hidden; }
.ladder--later .rung__bar { display: block; width: max(6px, calc(var(--a) * 100%)); height: 100%; }
.ladder--later .rung--k .rung__track { background: transparent; overflow: visible; }
.ladder--later .rung--k .rung__bar { -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.rung__count { flex: none; min-width: 112px; font-size: 13.5px; color: var(--ink-60); white-space: nowrap; }
.rung__count strong { margin-right: 3px; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rung--k .rung__count strong { color: var(--violet-ink); }
.rung__inbox { display: grid; justify-items: center; }
.rung__inbox .st { margin: 0; width: 22px; height: 22px; }
.rung__inbox .st svg { width: 11px; height: 11px; }
.rung__cost { font-size: 13px; line-height: 1.3; color: var(--ink-60); }
.rung__cost strong { display: block; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rung--k .rung__cost span { font-weight: 600; color: var(--violet-ink); }
@media (max-width: 899px) {
  .ladder--later .ladder__board { --cols: minmax(140px, 1fr) minmax(0, 2.2fr) minmax(0, 0.8fr) minmax(0, 0.9fr); }
  .rung__count { min-width: 98px; }
}
@media (max-width: 699px) {
  .ladder--later .rung { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .ladder--later .rung__name { grid-column: 1; grid-row: 1; }
  .ladder--later .rung__cost { grid-column: 2; grid-row: 1; text-align: right; }
  .ladder--later .rung__ai { grid-column: 1 / -1; }
  .ladder--later .rung__inbox {
    grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
    border-radius: 999px; background: rgba(14, 14, 20, 0.045); font-size: 13px; font-weight: 500; color: var(--ink);
  }
  .ladder--later .rung--k .rung__inbox { background: rgba(135, 106, 255, 0.12); }
  .ladder--later .rung__inbox .st { width: 20px; height: 20px; }
  .ladder--later .rung__track { height: 6px; }
}