/* KommIA : styles propres à la page Tarifs, chargés après site.css */
:root { --vnav-h: 52px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h) + 8px); }
.phero strong, .plans strong, .verdict strong { font-weight: 600; color: var(--ink); }
.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 : le prix et la promesse, puis les deux formules ────── */
.phero {
  max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3.5vw, 56px) var(--gutter) clamp(40px, 5vw, 72px);
  min-height: min(calc(100dvh - var(--nav-h)), 820px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  gap: 48px clamp(40px, 6vw, 104px);
}
.phero__text { container-type: inline-size; }
.phero__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;
}
.phero__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);
}
.phero__title {
  font-size: clamp(1.8rem, 10.7cqi, 4.8rem); font-weight: 620; /* « 39,90 € HT par mois. » vaut 9 fois la taille : deux lignes, même à 320 px */
  letter-spacing: -0.045em; line-height: 1; text-wrap: balance;
  animation: fx-up 900ms var(--ease-out) both 120ms;
}
.phero__title .grad { display: block; width: fit-content; margin-top: 0.04em; font-style: normal; white-space: nowrap; }
.phero__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;
}
.phero__lead strong { font-weight: 500; }
.phero__actions {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  animation: fx-up 900ms var(--ease-out) both 460ms;
}
.phero__trust {
  margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  animation: fx-up 900ms var(--ease-out) both 580ms;
}
.phero__reassure { font-size: 13.5px; color: var(--ink-60); }

/* Les deux formules : l'annuelle en premier, avec le contour en dégradé de la carte KommIA de l'accueil */
/* Les deux formules côte à côte, puis ce qu'elles comprennent et la note sur l'essai, sur toute la largeur */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; animation: fx-up 1000ms var(--ease-out) both 380ms; }
.incl, .plans__note { grid-column: 1 / -1; }
.plan { display: flex; flex-direction: column; }
.plan__for { margin-top: auto !important; }
.plan__detail { margin-bottom: 12px; }
.plan {
  position: relative; isolation: isolate; padding: 22px 22px 20px; border-radius: 24px;
  background: #fff; box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(14, 14, 20, 0.06);
}
.plan--best { box-shadow: 0 34px 70px -40px rgba(52, 36, 130, 0.55); }
.plan--best::before {
  content: ''; position: absolute; z-index: -1; inset: -1.5px; border-radius: 25.5px; padding: 1.5px;
  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;
}
.plan__badge {
  position: absolute; top: 20px; right: 18px; padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em;
}
.plan__name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.plan__price { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.plan__num { font-size: clamp(2.3rem, 1.6rem + 1.6vw, 2.9rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan--best .plan__num { color: var(--violet); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .plan--best .plan__num { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.plan__unit { font-size: 15px; font-weight: 500; color: var(--ink-60); }
.plan__ttc { margin-top: 4px; font-size: 13.5px; color: var(--ink-60); }
.plan__detail { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
/* L'économie de l'annuel ressort sans crier : violet, un peu plus appuyée */
.plan__save { margin: -6px 0 12px; font-size: 14.5px; font-weight: 600; color: var(--violet-ink); }
.plan__for { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink); }
/* Ce que comprennent les deux formules : une liste courte, là où l'on regarde les prix */
.incl { margin-top: 6px; padding: 20px 6px 4px; border-top: 1px solid var(--line); }
.incl__title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.incl__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.incl__list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.incl__list svg { flex: none; color: var(--violet); }
.incl__bonus { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.incl__more { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-60); }
.incl__more .text-link { font-size: 14px; white-space: nowrap; }
.plans__note { margin-top: 4px; padding: 0 6px; font-size: 14px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }

/* ────── Coût réel : un tableau clair, la colonne KommIA posée dessus comme une carte ────── */
.compare { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
/* La ligne du coût réel : les montants en grand, une jauge fine sous chacun, à la même échelle */
.compare__total :is(th, td) { padding-top: 18px !important; padding-bottom: 18px !important; background: rgba(135, 106, 255, 0.05); }
.compare__total td.is-k { background: none; }
.compare__total th { color: var(--ink); }
.compare__total .cost { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.compare__total td.is-k .cost { color: var(--violet-ink); }
.compare__total td.is-k .k-ico { display: none; }
.range { position: relative; display: block; height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(14, 14, 20, 0.07); overflow: hidden; }
.range::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--a); border-radius: inherit; background: rgba(14, 14, 20, 0.34); }
.range span { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); background: rgba(14, 14, 20, 0.16); }
.range--k::before { width: max(var(--a), 8px); background: linear-gradient(90deg, #168EFF, #876AFF); }
.js .compare__box:not(.is-in) .range::before, .js .compare__box:not(.is-in) .range span { transform: scaleX(0); }
.range::before, .range span { transform-origin: left center; transition: transform 1100ms var(--ease-out) 300ms; }

/* La conclusion du comparatif : une phrase en grand, la preuve à côté */
.verdict {
  margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end; gap: 24px clamp(32px, 5vw, 72px);
}
.verdict__big { font-size: clamp(1.9rem, 1rem + 2.3vw, 2.9rem); font-weight: 620; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.verdict__big .grad { display: block; width: fit-content; }
.verdict__text { margin-top: 14px; max-width: 38rem; font-size: 16.5px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
.verdict__text strong { font-weight: 600; color: var(--ink); }
.verdict .stack__proof { margin-top: 0; }
/* La preuve, sous le verdict : le cas de Gaby, avec le fil violet des citations */
.stack__proof { margin-top: 16px; max-width: 30rem; padding-left: 16px; border-left: 2px solid rgba(135, 106, 255, 0.4); font-size: 15px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.stack__proof a { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.stack__proof a:hover { text-decoration-color: currentColor; }

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

/* ────── Mobile ────── */
@media (max-width: 899px) {
  :root { --vnav-h: 48px; }
  .phero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; }
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .compare__total .cost { font-size: 15px; }
}
@media (max-width: 599px) {
  .phero__actions { flex-direction: column; align-items: flex-start; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .incl__list { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 22px 22px 20px; }
}
@media (max-width: 420px) {
  .phero__actions { align-items: stretch; }
  .phero__actions .text-link { align-self: center; }
}

/* ────── Mouvement réduit : tout est affiché dans son état final ────── */
@media (prefers-reduced-motion: reduce) {
  .phero__eyebrow, .phero__title, .phero__lead, .phero__actions, .phero__trust, .plans, .plan--best::before { animation: none; }
  .range::before, .range span { transition: none; }
}
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes edge-spin { to { --edge: 360deg; } }
@keyframes fx-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Renvoi vers les comparatifs, sous le tableau du vrai coût (revue SEO du 2026-09-29) */
.compare__more { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.compare__more a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 3px; }
.compare__more a:hover { text-decoration-color: currentColor; }