/* KommIA : styles propres à la page Comparatifs, chargés après site.css (le tableau vient de site.css) */
/* Sommaire collant sous l'en-tête (2026-09-29) : sa hauteur entre dans le décalage des ancres et des éléments collants */
:root { --vnav-h: 52px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h) + 8px); }
.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); }

/* ────── Haut de page : la promesse à gauche, « trouve ton match » à droite ────── */
.chero {
  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)), 820px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: 48px clamp(40px, 6vw, 96px);
}
.chero__text { container-type: inline-size; }
.chero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  animation: fx-up 800ms var(--ease-out) both 40ms;
}
.chero__eyebrow::before {
  content: ''; flex: none; 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);
}
.chero__title {
  font-size: clamp(2.1rem, 13.2cqi, 4.8rem); font-weight: 620; /* « KommIA face aux » remplit sa colonne, comme le titre de Tarifs */
  letter-spacing: -0.045em; line-height: 1; text-wrap: balance;
  animation: fx-up 900ms var(--ease-out) both 120ms;
}
.chero__title .grad { display: block; width: fit-content; margin-top: 0.04em; }
.chero__lead {
  margin-top: 26px; max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); text-wrap: pretty;
  animation: fx-up 900ms var(--ease-out) both 320ms;
}
.chero__lead strong { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.chero__lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14, 14, 20, 0.28); transition: text-decoration-color 200ms var(--ease-out); }
.chero__lead a:hover { text-decoration-color: currentColor; }
.chero__actions {
  margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  animation: fx-up 900ms var(--ease-out) both 460ms;
}
.chero__date { margin-top: 18px; font-size: 13.5px; color: var(--ink-60); animation: fx-up 900ms var(--ease-out) both 580ms; }

/* Trouve ton match : quatre lignes fines, la dernière (KommIA) mise en avant */
.match { animation: fx-up 1000ms var(--ease-out) both 380ms; }
.match__title { font-size: clamp(1.2rem, 1rem + 0.45vw, 1.4rem); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 14px; }
.match__list { list-style: none; margin: 0; padding: 0; }
.match__list li { border-top: 1px solid var(--line); }
.match__list li:last-child { border-bottom: 1px solid var(--line); }
.match__list a {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  padding: 15px 4px; text-decoration: none; color: var(--ink);
}
.match__who { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-60); }
.match__who img { width: 22px; height: 22px; }
.match__body h3 { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.match__link { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-60); transition: color 200ms var(--ease-out); }
.match__arrow { position: relative; width: 20px; height: 20px; color: var(--ink-60); transition: transform 300ms var(--ease-spring), color 200ms var(--ease-out); }
.match__arrow::before {
  content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px;
  border-right: 1.3px solid currentColor; border-top: 1.3px solid currentColor; transform: rotate(45deg);
}
.match__list a:hover .match__link, .match__list a:hover .match__arrow { color: var(--violet-ink); }
.match__list a:hover .match__arrow { transform: translateX(3px); }
/* La ligne KommIA : une carte blanche fine, contour en dégradé */
.match__k { position: relative; margin-top: 10px; border: 0 !important; }
.match__k a {
  position: relative; isolation: isolate; padding: 16px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 22px 44px -36px rgba(52, 36, 130, 0.45);
}
.match__k a::before {
  content: ''; position: absolute; z-index: -1; inset: -1px; border-radius: 19px; padding: 1px;
  background: conic-gradient(from var(--edge), #5AD3FF, #168EFF, #876AFF, #B8A5FF, #5AD3FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: edge-spin 8s linear infinite;
}
.match__k .match__who { color: var(--ink); font-weight: 600; }
.match__k .match__link { color: var(--violet-ink); font-weight: 600; }

/* ────── Le tableau global (le composant vient de site.css) ────── */
.compare { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
/* Sur grand écran, la colonne KommIA est plus large : c'est elle qu'on lit, ses textes tiennent sur deux lignes au plus */
@media (min-width: 900px) { .compare__stage { --first: 20.5%; --col: 25%; } }

/* ────── L'écart IA : une grille, les outils nommés une fois en tête, une marque par case, la colonne KommIA teintée ────── */
.gaps { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.gaps__board { --mc: clamp(84px, 8.5vw, 124px); }
.gaps__head, .gap { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, var(--mc)); }
.gaps__head > span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-60); }
.gaps__head img { width: 22px; height: 22px; }
.gaps__head .is-k { color: var(--ink); border-radius: 18px 18px 0 0; }
.gaps__head .is-k, .gap__cell.is-k { background: rgba(135, 106, 255, 0.07); }
.gaps__list { list-style: none; margin: 0; padding: 0; }
.gap { border-top: 1px solid var(--line); transition: background-color 250ms var(--ease-out); }
.gap:last-child { border-bottom: 1px solid var(--line); }
.gap:last-child .gap__cell.is-k { border-radius: 0 0 18px 18px; }
.gap__text { padding: 26px clamp(24px, 4vw, 56px) 26px 0; }
.gap__text h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.gap__text p { margin-top: 6px; max-width: 38rem; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.gap__marks { display: contents; }
.gap__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
/* Les noms ne se lisent qu'en tête de grille sur grand écran ; ils restent pour les lecteurs d'écran */
.gap__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gap .st { width: 30px; height: 30px; margin: 0; }
.gap .st svg { width: 15px; height: 15px; }
.gap .st--star svg { width: 16px; height: 16px; }
@media (hover: hover) { .gap:hover { background-color: rgba(135, 106, 255, 0.03); } }
/* À l'arrivée de chaque ligne : l'étoile de KommIA d'abord, puis les trois autres, et une onde fine autour de l'étoile */
.js .gap .st { transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-spring); transition-delay: 200ms; }
.js .gap .gap__cell:nth-child(2) .st { transition-delay: 320ms; }
.js .gap .gap__cell:nth-child(3) .st { transition-delay: 400ms; }
.js .gap .gap__cell:nth-child(4) .st { transition-delay: 480ms; }
.js .gap:not(.is-in) .st { opacity: 0; transform: scale(0.4); }
.gap.is-in .st--star { animation: st-ring 1500ms var(--ease-out) 500ms 1 both; }
.gaps__board .compare__legend { margin-top: 24px; }
/* Le halo reste, adouci : sous la grille, il ternissait les marques */
.gaps .halo--violet { opacity: 0.55; }
/* La preuve de Gaby sous la grille : composant commun dans site.css */

/* ────── Les trois décryptages : trois colonnes ouvertes, séparées par des filets, un face-à-face par outil ────── */
.dives { position: relative; max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.dives__list { --dg: clamp(44px, 5.6vw, 88px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--dg); }
/* La liste déclenche l'apparition, les colonnes arrivent l'une après l'autre */
.js .dives__list[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.js .dives__list > .dive { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js .dives__list:not(.is-in) > .dive { opacity: 0; transform: translateY(28px); }
.js .dives__list > .dive:nth-child(2) { transition-delay: 110ms; }
.js .dives__list > .dive:nth-child(3) { transition-delay: 220ms; }
.dive { position: relative; display: flex; }
/* Filet vertical fin entre deux colonnes, qui s'efface en haut et en bas */
.dive + .dive::before {
  content: ''; position: absolute; left: calc(var(--dg) / -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));
}
.dive__card { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; padding: 26px 0 18px; }
/* Au survol : un trait en dégradé se dessine en haut de la colonne, une lueur douce monte derrière */
.dive__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #168EFF, #876AFF, #5AD3FF); transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.dive__card::after {
  content: ''; position: absolute; z-index: -1; inset: -8% -14% 0; pointer-events: none; opacity: 0;
  background: radial-gradient(58% 44% at 50% 30%, rgba(135, 106, 255, 0.14), rgba(135, 106, 255, 0) 100%);
  transition: opacity 600ms var(--ease-out);
}
@media (hover: hover) {
  .dive__card:hover::before { transform: scaleX(1); }
  .dive__card:hover::after { opacity: 1; }
  .dive__card:hover .dive__logo--k { transform: translateX(-3px) rotate(-4deg); }
  .dive__card:hover .dive__logo:not(.dive__logo--k) { transform: translateX(3px) rotate(4deg); }
  .dive__card:hover .dive__vs { color: var(--violet-ink); }
  .dive__card:hover .dive__arrow { transform: translateX(3px); background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
}
.dive__card:focus-within::before { transform: scaleX(1); }
.dive__card:has(.dive__cta:focus-visible) { outline: 2px solid var(--violet); outline-offset: 6px; border-radius: 18px; }
.dive__cta:focus-visible { outline: none; }
/* Les deux logos côte à côte, comme deux icônes d'app */
.dive__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.dive__pair { display: inline-flex; align-items: center; gap: 10px; }
.dive__logo {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.07), 0 10px 22px -14px rgba(40, 28, 96, 0.45);
  transition: transform 500ms var(--ease-spring);
}
.dive__logo img { width: 100%; height: 100%; object-fit: cover; }
.dive__logo--k img, .dive__logo--later img { width: 68%; height: 68%; object-fit: contain; }
.dive__vs { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-60); transition: color 300ms var(--ease-out); }
.dive__num { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-60); }
.dive h3 { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.15; }
.dive__text { margin: 8px 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
/* Le face-à-face : l'outil à gauche, KommIA à droite dans sa colonne teintée ; calé en bas pour s'aligner d'une carte à l'autre */
.duel { width: 100%; margin-top: auto; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; line-height: 1.4; }
.duel th { padding: 10px 12px 8px; text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-60); }
.duel td { padding: 10px 12px; border-top: 1px solid rgba(14, 14, 20, 0.07); color: var(--ink-60); vertical-align: top; }
.duel :is(th, td):first-child { padding-left: 0; }
.duel th:first-child { width: 41%; }
.duel .is-k { color: var(--ink); font-weight: 600; background: rgba(135, 106, 255, 0.08); }
.duel th.is-k { color: var(--violet-ink); border-radius: 12px 12px 0 0; }
.duel td.is-k { border-top-color: rgba(135, 106, 255, 0.16); }
.duel tr:last-child td.is-k { border-radius: 0 0 12px 12px; }
.dive__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.dive__cta::after { content: ''; position: absolute; inset: -12px -10px; z-index: 3; border-radius: 22px; }
.dive__arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(135, 106, 255, 0.12); color: var(--violet);
  transition: transform 300ms var(--ease-spring), background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
/* Fil de progression du défilement des colonnes, sur téléphone seulement */
.dives__rail { display: none; }

/* ────── Quand choisir un autre outil, quand choisir KommIA : côte à côte, un filet entre les deux ────── */
.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;
}
/* La colonne courte reste en place pendant qu'on lit les cinq signaux */
.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__title .grad { display: block; width: fit-content; }
.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__list a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.fit__list a:hover { text-decoration-color: currentColor; }
/* À gauche, les logos des outils conseillés ; à droite, la coche violette du tableau */
.fit__logos { display: inline-flex; flex: none; width: 54px; }
.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 + .fit__logo { margin-left: -10px; box-shadow: 0 0 0 2px #fff, 0 8px 16px -12px rgba(40, 28, 96, 0.5); }
.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; }
/* L'invitation à l'essai sous les cinq signaux */
.fit__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.fit__cta p { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
@media (hover: hover) {
  .fit__list li:hover .fit__logo:first-child { transform: translateY(-2px) rotate(-4deg); }
  .fit__list li:hover .fit__logo + .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); }
}

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

/* ────── Mobile ────── */
@media (max-width: 899px) {
  :root { --vnav-h: 48px; }
  .chero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; }
  .gaps__head { display: none; }
  .gap { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
  .gap__text { padding: 22px 0 14px; }
  .gap__marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .gap__cell { padding: 12px 0 10px; border-radius: 14px; }
  .gap:last-child .gap__cell.is-k { border-radius: 14px; }
  .gap__who { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-60); }
  .gap__cell.is-k .gap__who { color: var(--ink); }
  .gap .st { width: 28px; height: 28px; }
  /* Sur téléphone et tablette, les cartes défilent une par une, la suivante dépasse pour inviter à glisser */
  .dives__list {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .dives__list::-webkit-scrollbar { display: none; }
  .dives__list { --dg: 36px; gap: var(--dg); }
  .dive { flex: 0 0 min(80%, 360px); scroll-snap-align: start; }
  .dives__rail { display: block; position: relative; height: 2px; margin-top: 18px; border-radius: 2px; background: rgba(14, 14, 20, 0.08); overflow: hidden; }
  .dives__rail span { position: absolute; left: 0; top: 0; bottom: 0; width: 33.34%; border-radius: inherit; background: linear-gradient(90deg, #168EFF, #876AFF); transform: translateX(calc(var(--p, 0) * 200%)); }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit__col:first-child { position: static; }
  .fit__col--k::before { display: none; }
}
@media (max-width: 599px) {
  .match__list a { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; }
  .match__who { grid-column: 1; }
  .match__body { grid-column: 1; }
  .match__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .chero__actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .chero__actions { align-items: stretch; }
  .chero__actions .text-link { align-self: center; }
}

/* ────── Mouvement réduit : tout est affiché dans son état final ────── */
@media (prefers-reduced-motion: reduce) {
  .chero__eyebrow, .chero__title, .chero__lead, .chero__actions, .chero__date, .match, .match__k a::before { animation: none; }
  .gap.is-in .st--star { animation: none; }
  .dive__card::before, .dive__card::after, .dive__logo, .dive__arrow { transition: none; }
  .fit__logo, .fit__mark { transition: none; }
  .js .gap:not(.is-in) .st, .js .gap .st { opacity: 1; transform: none; transition: none; }
}
@keyframes fx-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────── Lignes de prix lisibles d'un coup d'œil (2026-10-05, Bruno) : le montant d'abord, puis ce qu'il paie sur une ligne
   marquée d'un point (ambré : ce que la formule ne donne pas ; violet : tout est compris), l'annuel et le détail en petit.
   Allégé le même jour (« légèrement grossier ») : montants moins gros, « par mois » sur la même ligne, plus de pastille pleine ────── */
.compare__table .price { display: block; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ink-60); }
.compare__table .price strong {
  margin-right: 3px; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.compare__table .price__what { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--violet-ink); }
.compare__table .price__what::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; background: currentColor; }
/* ce qui manque ressort un peu plus (Bruno, 2026-10-05) : texte orange très foncé et plus gras que la ligne violette de KommIA, sans fond */
.compare__table .price__what--peu { font-weight: 600; color: #B83E0A; }
.compare__table .price__alt { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--ink-60); }
@media (max-width: 599px) {
  /* colonne étroite (95 px utiles à 375 px) : « Programmation » doit tenir sur sa ligne, point compris */
  .compare__table .price__what { gap: 5px; font-size: 12px; letter-spacing: -0.01em; }
  .compare__table .price__what::before { width: 5px; height: 5px; }
  .compare__table .price__what--peu { font-size: 11.5px; }
}

/* ────── Infobulles du tableau (2026-10-05, Bruno, crédits IA de Later) : le terme souligné en pointillé, la bulle au survol,
   au clavier ou au toucher (site.js), refermée par Échap. La bulle reste ouverte quand on passe dessus (pont sous la bulle) et
   se décale (--dx, posé par site.js) pour ne jamais sortir de l'écran ; la pointe reste sur le terme ────── */
.tip { position: relative; display: inline; }
.tip__term {
  display: inline; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: help;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tip__term:hover { color: var(--ink); }
.tip__term:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
.tip__bubble {
  --dx: 0px;
  position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: min(270px, calc(100vw - 32px));
  padding: 10px 13px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-align: left; white-space: normal; -webkit-hyphens: none; hyphens: none;
  box-shadow: 0 14px 34px -14px rgba(14, 14, 20, 0.55);
  opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dx)), 4px); pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.tip__bubble::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.tip__bubble::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--dx)); margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip__bubble, .tip__term:focus-visible + .tip__bubble, .tip.is-open .tip__bubble {
  opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx)), 0); pointer-events: auto; transition-delay: 0s;
}
.tip.is-dismissed .tip__bubble { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tip__bubble { transition: none; } }

/* ────── Lecture rapide (2026-10-05, maquette comparatifs-v2 validée par Bruno) : réponse courte en tête de cellule et détail
   dessous, « Autres critères » repliés, en-tête collant, phrase « En bref » au-dessus du tableau ────── */

/* La phrase « En bref » : celui qui ne lit qu'elle repart avec la bonne idée */
.cverdict { max-width: 58rem; margin: 0 0 34px; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 500; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.cverdict strong { font-weight: 650; color: var(--violet-ink); }

/* Cellules : la réponse d'abord, en gras, le détail dessous en petit */
.compare__table .cv { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.compare__table .cd { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink-60); }
.compare__table td.is-k .cd { color: var(--ink-70); }
.compare__table .cv .tip__term { font-weight: 600; }

/* Deux groupes de lignes : ce qui fait la différence, puis les bases */
.compare__table tbody .cgroup :is(th, td) { padding-top: 30px; padding-bottom: 12px; border-top: 0; background: none; }
.compare__table tbody .cgroup th { white-space: nowrap; overflow: visible; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; color: var(--violet-ink); }
.compare__table tbody:first-of-type .cgroup :is(th, td) { padding-top: 18px; }
@media (hover: hover) { .compare__table tbody tr.cgroup:hover :is(th, td) { background: none; } }

/* L'en-tête (noms des outils) reste collé sous la navigation et le sommaire au défilement */
/* son fond n'apparaît que quand il est collé (classe is-stuck posée par site.js) : au repos, pas de bande claire */
.compare__table thead :is(th, td) { position: sticky; top: calc(var(--nav-h) + var(--vnav-h, 52px)); z-index: 5; transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.compare__table.is-stuck thead :is(th, td) {
  background: rgba(253, 253, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line);
}
.compare__table.is-stuck thead th.is-k { background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 0 rgba(135, 106, 255, 0.18); }
/* prix : l'annuel, puis les utilisateurs et comptes, chacun sur sa ligne */
.compare__table .price__alt + .price__alt { margin-top: 1px; }
@media (max-width: 599px) {
  .compare__table .cv { font-size: 14px; }
  .compare__table .cd { font-size: 12.5px; }
}

/* « Autres critères » (réseaux, application, plan gratuit, essai, origine) : repliés par défaut, un bouton les déplie
   (Bruno, 2026-10-05 : « pas un élément hyper important à mettre en avant, mais ça doit pouvoir être consulté ») */
.cmore {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 12px 6px 0; border: 0; background: none;
  font: inherit; text-align: left; color: var(--violet-ink); cursor: pointer; white-space: nowrap;
}
.cmore span { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
.cmore small { font-size: 13px; font-weight: 400; color: var(--ink-60); }
.cmore svg { flex: none; align-self: center; transition: transform 300ms var(--ease-out); }
.cmore[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) { .cmore:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.cmore:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
.compare__table tbody.cbases .cgroup :is(th, td) { padding-top: 22px; padding-bottom: 14px; }
.js .cbases:not(.is-open) tr:not(.cgroup) { display: none; }
@media (max-width: 599px) {
  .cmore small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmore svg { transition: none; } }