/* ==========================================================================
   PAGE IA — TerraGrow
   Overrides pour le fond navy pleine page + composants Solution en mode sombre.
   Reutilise integralement les classes sol-* de solution.css.
   ========================================================================== */

/* Fond navy pleine page + grille pointillee fixe */
body.ia-page {
  background-color: var(--navy, #0A1A3C);
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* Vague lumineuse animee */
body.ia-page .ia-page__glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(59,118,246,.1) 0%, transparent 70%);
  background-size: 200% 200%;
  animation: dotGlow 7s ease-in-out infinite;
}

@keyframes dotGlow {
  0%   { background-position: 20% 20%;  opacity: 0.4; }
  20%  { background-position: 80% 30%;  opacity: 1; }
  40%  { background-position: 60% 80%;  opacity: 0.5; }
  60%  { background-position: 30% 60%;  opacity: 1; }
  80%  { background-position: 70% 20%;  opacity: 0.6; }
  100% { background-position: 20% 20%;  opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  body.ia-page .ia-page__glow { animation: none; opacity: 0.6; }
}

/* Hero : fond transparent (le body porte le navy) */
body.ia-page .sol-hero--dark {
  background: transparent;
  border-radius: 0;
}

/* Product frame — fondu en bas qui se fond dans le navy */
body.ia-page .sol-hero__product-frame {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

/* Marquee logos — element separe, scroll infini */
.ia-hero__marquee {
  position: relative;
  z-index: 3;
  padding: 40px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 40%, #000 60%, transparent 85%);
  mask-image: linear-gradient(90deg, transparent 15%, #000 40%, #000 60%, transparent 85%);
}

.ia-hero__marquee .sol-hero__marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: iaMarquee 25s linear infinite;
}

.ia-hero__marquee .sol-hero__marquee-track img {
  height: 18px;
  width: auto;
  opacity: 0.3;
  filter: brightness(10);
  flex-shrink: 0;
}

@keyframes iaMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .ia-hero__marquee .sol-hero__marquee-track { animation: none; }
}

/* Hero 3-column layout: left flow | text | right flow */
.ia-hero__layout {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 24px;
  align-items: center;
  min-height: 60vh;
  padding: 24px 0 48px;
}

.ia-hero__center { position: relative; z-index: 2; }
.ia-hero__side { position: relative; z-index: 2; }

/* Vertical flow — serpentine organique, positions decalees aleatoirement */
.wf-hero-canvas__flow--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Pas de decalage — cartes centrees */

/* Vertical wire */
.wf-hero-canvas__wire--v {
  flex: 0 0 28px;
  width: 2px;
  height: 28px;
  align-self: center;
  position: relative;
}

.wf-hero-canvas__wire--v .wf-hero-canvas__wire-bg {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  border-radius: 1px;
  transition: background 0.4s ease;
}

/* Wire track visible only when neighbors are active */
.wf-hero-canvas__card--ghost.is-active ~ .wf-hero-canvas__wire--v .wf-hero-canvas__wire-bg,
.wf-hero-canvas__card--ghost.is-done ~ .wf-hero-canvas__wire--v .wf-hero-canvas__wire-bg {
  background: rgba(255,255,255,.08);
}

.wf-hero-canvas__wire--v .wf-hero-canvas__wire-fill {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0;
  background: rgba(59,118,246,.5);
  transition: height 0.5s cubic-bezier(.22,1,.36,1);
}

.wf-hero-canvas__wire--v .wf-hero-canvas__wire-fill.traced {
  height: 100%;
  box-shadow: 0 0 6px rgba(59,118,246,.25);
}

/* Ghost card — decoratif en fond du hero */
/* Force override du .wf-hero-canvas__card blanc de workflow-canvas.css */
.wf-hero-canvas__card.wf-hero-canvas__card--ghost {
  flex: none; min-width: 0;
  padding: 10px 14px; gap: 10px;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px;
  box-shadow: none !important;
  opacity: 0.35;
  display: flex; align-items: center;
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1), background 0.4s ease, border-color 0.4s ease;
}

.wf-hero-canvas__card--ghost .wf-hero-canvas__title {
  font-size: 13px; color: rgba(255,255,255,.5); font-weight: 600;
  transition: color 0.4s ease;
}

.wf-hero-canvas__card--ghost .wf-hero-canvas__icon {
  width: 30px; height: 30px; min-width: 30px; border-radius: 8px; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}

.wf-hero-canvas__card--ghost .wf-hero-canvas__icon svg { width: 15px; height: 15px; }

/* Icones sur fond sombre — pas de fond clair opaque */
.wf-hero-canvas__icon--blue { background: rgba(59,118,246,.12); color: #60A5FA; }
.wf-hero-canvas__icon--green { background: rgba(22,163,74,.12); color: #4ADE80; }
.wf-hero-canvas__icon--purple { background: rgba(147,51,234,.12); color: #C084FC; }
.wf-hero-canvas__icon--amber { background: rgba(217,119,6,.12); color: #FBBF24; }
.wf-hero-canvas__icon--rose { background: rgba(225,29,72,.12); color: #FB7185; }

/* Active — en cours, bleu */
.wf-hero-canvas__card.wf-hero-canvas__card--ghost.is-active {
  opacity: 0.75;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(59,118,246,.3) !important;
}
.wf-hero-canvas__card--ghost.is-active .wf-hero-canvas__title { color: rgba(255,255,255,.8); }
.wf-hero-canvas__card--ghost.is-active .wf-hero-canvas__icon { opacity: 0.9; }

/* Done — valide, contour vert, meme taille */
.wf-hero-canvas__card.wf-hero-canvas__card--ghost.is-done {
  opacity: 0.5;
  background: rgba(22,163,74,.03) !important;
  border-color: rgba(22,163,74,.2) !important;
}
.wf-hero-canvas__card--ghost.is-done .wf-hero-canvas__title { color: rgba(255,255,255,.45); }
.wf-hero-canvas__card--ghost.is-done .wf-hero-canvas__icon { opacity: 0.5; }

/* Badge hidden by default, shown only on is-done */
.wf-hero-canvas__card--ghost .wf-hero-canvas__badge {
  display: none;
}

.wf-hero-canvas__card--ghost.is-done .wf-hero-canvas__badge {
  display: inline-flex;
  position: static;
  margin-left: auto;
  opacity: 1;
  transform: none;
  background: rgba(22,163,74,.15);
  color: #4ADE80;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive: hide side columns */
@media (max-width: 900px) {
  .ia-hero__layout { grid-template-columns: 1fr; gap: 0; min-height: auto; padding: 16px 0 32px; }
  .ia-hero__side { display: none; }
}

body.ia-page .sol-hero--dark::after {
  background: none;
  animation: none;
}

/* Sections sur fond transparent */
body.ia-page .sol-transform,
body.ia-page .sol-impact,
body.ia-page .sol-testi,
body.ia-page .sol-faq-v2,
body.ia-page .sol-others {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Contact section — fond blanc casse, moins large, bords arrondis */
body.ia-page .contact-section {
  background: rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
  border-radius: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 48px;
  border: 1px solid rgba(255,255,255,.08);
}

body.ia-page .contact-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.ia-page .contact-card__title { color: var(--accent, #3B76F6); }
body.ia-page .contact-card__desc { color: rgba(255,255,255,.5); }
body.ia-page .contact-card__label { color: rgba(255,255,255,.6); }
body.ia-page .contact-card__input {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
body.ia-page .contact-card__input::placeholder { color: rgba(255,255,255,.25); }
body.ia-page .contact-card__trust-label { color: rgba(255,255,255,.35); }
body.ia-page .contact-card__separator-line { background: rgba(255,255,255,.08); }
body.ia-page .contact-card__separator-text { color: rgba(255,255,255,.25); }

@media (max-width: 768px) {
  body.ia-page .contact-section {
    margin: 0 16px;
    padding: 40px 20px;
    border-radius: 16px;
  }
}

/* How section — transparent comme le reste */
body.ia-page .sol-how {
  background: transparent;
  position: relative;
  z-index: 1;
}

body.ia-page .sol-cta {
  background: rgba(255,255,255,.03);
  border-radius: 0;
}

/* Footer reste lisible */
body.ia-page .footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   TEXTE — Adaptation au fond sombre
   ========================================================================== */

/* Headings */
body.ia-page .sol-impact__header h2,
body.ia-page .sol-faq-v2__header h2,
body.ia-page .sol-others__header h2,
body.ia-page .sol-transform__subtitle,
body.ia-page .wf__microcopy,
body.ia-page .sol-impact__card h3,
body.ia-page .sol-faq-v2__item summary span:first-child {
  color: #fff;
}

/* Body text */
body.ia-page .sol-impact__card p,
body.ia-page .sol-faq-v2__body p,
body.ia-page .sol-faq-v2__sub,
body.ia-page .sol-testi__sub,
body.ia-page .sol-others__card p,
body.ia-page .sol-counter__text {
  color: rgba(255,255,255,.55);
}

body.ia-page .sol-impact__eyebrow,
body.ia-page .sol-impact__label {
  color: rgba(255,255,255,.5);
}

body.ia-page .sol-testi__header h2 {
  color: #fff;
}

body.ia-page .sol-others__all {
  color: rgba(255,255,255,.5);
}

body.ia-page .sol-others__card h3 {
  color: #fff;
}

/* ==========================================================================
   COMPOSANTS — Adaptation au fond sombre
   ========================================================================== */

/* Drop zone / transformation */
body.ia-page .sol-drop__file {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}

body.ia-page .sol-drop__zone-inner {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

body.ia-page .sol-transform__chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}

body.ia-page .sol-counter__value {
  color: #fff;
}

/* Retire toutes les lignes/bordures de separation sur fond navy */
body.ia-page .sol-transform,
body.ia-page .sol-impact,
body.ia-page .sol-how,
body.ia-page .sol-testi,
body.ia-page .sol-faq-v2,
body.ia-page .sol-others,
body.ia-page .proof-bar {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

body.ia-page .sol-transform::before,
body.ia-page .sol-transform::after,
body.ia-page .sol-impact::before,
body.ia-page .sol-how::before {
  display: none !important;
}

/* Retire les dots loading du compteur + le trait */
body.ia-page .sol-counter__dots { display: none; }
body.ia-page .sol-counter { border-top: none !important; }

/* Drop zone animation en boucle infinie (7s cycle) */
body.ia-page .sol-transform.visible .sol-drop__file--1 { animation: fileDrop 7s cubic-bezier(0.4,0,0.2,1) 0s infinite; }
body.ia-page .sol-transform.visible .sol-drop__file--2 { animation: fileDrop 7s cubic-bezier(0.4,0,0.2,1) 0.3s infinite; }
body.ia-page .sol-transform.visible .sol-drop__file--3 { animation: fileDrop 7s cubic-bezier(0.4,0,0.2,1) 0.6s infinite; }

body.ia-page .sol-transform.visible .sol-drop__zone { animation: zonePulse 7s ease-in-out 1s infinite; }

body.ia-page .sol-transform.visible .sol-transform__chip {
  animation: chipAppear 7s ease 3s infinite;
  opacity: 0;
  transition: none;
}
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(1) { animation-delay: 3s; }
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(2) { animation-delay: 3.15s; }
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(3) { animation-delay: 3.3s; }
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(4) { animation-delay: 3.45s; }
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(5) { animation-delay: 3.6s; }
body.ia-page .sol-transform.visible .sol-transform__chip:nth-child(6) { animation-delay: 3.75s; }

@keyframes chipAppear {
  0%, 40% { opacity: 0; transform: translateY(6px); }
  50% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes zonePulse {
  0%, 15% { transform: scale(1); }
  25% { transform: scale(1.04); }
  40%, 100% { transform: scale(1); }
}

/* Impact cards */
body.ia-page .sol-impact__card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 32px;
}

body.ia-page .sol-impact__card h3,
body.ia-page .sol-impact__card p,
body.ia-page .sol-impact__label {
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   STEPS — 3 cartes Comment ca marche (remplace sol-how sur fond navy)
   ========================================================================== */
.ia-steps {
  padding: 96px 0;
  position: relative;
  z-index: 1;
}

.ia-steps__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}

.ia-steps__header h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-top: 16px;
}

.ia-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ia-steps__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.ia-steps__card:hover {
  border-color: rgba(59,118,246,.2);
}

.ia-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(59,118,246,.12);
  color: #60A5FA;
  font-size: 14px;
  font-weight: 700;
  margin: 24px 0 0 24px;
}

.ia-steps__img {
  margin: 20px 16px 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.04);
}

.ia-steps__img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.ia-steps__card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 20px 24px 8px;
  line-height: 1.3;
}

.ia-steps__card p {
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin: 0 24px 28px;
}

@media (max-width: 768px) {
  .ia-steps__grid { grid-template-columns: 1fr; gap: 16px; }
  .ia-steps__img img { height: 200px; }
}

@media (max-width: 480px) {
  .ia-steps { padding: 64px 0; }
  .ia-steps__header { margin-bottom: 32px; }
}

/* Workflow canvas — fond transparent, integre au navy */
body.ia-page .wf__canvas {
  background-color: transparent;
  background-image: none;
  border: none;
  padding: 20px 0;
}

body.ia-page .wf-node {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-left: 3px solid rgba(255,255,255,.06) !important;
  border-radius: 10px;
  box-shadow: none !important;
}

body.ia-page .wf-node__title { color: rgba(255,255,255,.5); }
body.ia-page .wf-node__roles { color: rgba(255,255,255,.3); }
body.ia-page .wf-node__roles strong { color: rgba(255,255,255,.5); }

body.ia-page .wf-node__num {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.4);
}

body.ia-page .wf-node__badge[data-badge="idle"] {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.3);
}

body.ia-page .wf-node__badge[data-badge="trigger"] {
  background: rgba(59,118,246,.1);
  color: #60A5FA;
}

body.ia-page .wf-node__badge[data-badge="running"] {
  background: rgba(242,163,43,.1);
  color: #FBBF24;
}

body.ia-page .wf-node__badge[data-badge="completed"] {
  background: rgba(22,163,74,.1);
  color: #4ADE80;
}

/* States */
body.ia-page .wf-node[data-state="triggered"] {
  border-left-color: rgba(59,118,246,.4) !important;
  opacity: 0.8;
}

body.ia-page .wf-node[data-state="triggered"] .wf-node__title { color: rgba(255,255,255,.8); }
body.ia-page .wf-node[data-state="triggered"] .wf-node__num { background: rgba(59,118,246,.12) !important; color: #60A5FA; }

body.ia-page .wf-node[data-state="running"] {
  border-left-color: rgba(242,163,43,.5) !important;
  background: rgba(255,255,255,.05) !important;
  opacity: 1;
}

body.ia-page .wf-node[data-state="running"] .wf-node__title { color: rgba(255,255,255,.9); }
body.ia-page .wf-node[data-state="running"] .wf-node__num { background: rgba(242,163,43,.12) !important; color: #FBBF24; }

body.ia-page .wf-node[data-state="completed"] {
  border-left-color: rgba(22,163,74,.3) !important;
  opacity: 0.5;
}

body.ia-page .wf-node[data-state="completed"] .wf-node__title { color: rgba(255,255,255,.45); }
body.ia-page .wf-node[data-state="completed"] .wf-node__num { background: rgba(22,163,74,.1) !important; color: #4ADE80; }

/* Wires */
body.ia-page .wf__wire {
  stroke: rgba(255,255,255,.06) !important;
}

body.ia-page .wf__wire.traced {
  stroke: rgba(59,118,246,.3) !important;
}

body.ia-page .wf__wire-arrow {
  fill: rgba(255,255,255,.06) !important;
}

body.ia-page .wf__wire.traced + .wf__wire-arrow,
body.ia-page .traced ~ .wf__wire-arrow {
  fill: rgba(59,118,246,.3) !important;
}

/* Running glow */
body.ia-page .wf-node[data-state="running"]::after {
  border-color: rgba(59,118,246,.1);
}

/* Microcopy */
body.ia-page .wf__microcopy {
  color: rgba(255,255,255,.25);
}

/* FAQ — fond semi-transparent comme les autres sections */
body.ia-page .sol-faq-v2 {
  background: rgba(248,249,250,.06) !important;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 48px;
}

body.ia-page .sol-faq-v2__header h2 { color: #fff !important; }
body.ia-page .sol-faq-v2__sub { color: rgba(255,255,255,.45) !important; }

body.ia-page .sol-faq-v2__item {
  border-color: rgba(255,255,255,.08);
}

body.ia-page .sol-faq-v2__item summary span:first-child {
  color: #fff !important;
}

body.ia-page .sol-faq-v2__body p {
  color: rgba(255,255,255,.5) !important;
}

body.ia-page .sol-faq-v2__body a {
  color: #60A5FA;
}

body.ia-page .sol-faq-v2__icon::before,
body.ia-page .sol-faq-v2__icon::after { background: rgba(255,255,255,.5); }

body.ia-page .sol-faq-v2__tab {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
}

body.ia-page .sol-faq-v2__tab.is-active {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

body.ia-page .eyebrow {
  background: rgba(59,118,246,.1);
  color: #3B76F6;
}

@media (max-width: 768px) {
  body.ia-page .sol-faq-v2 {
    margin: 0 16px;
    padding: 40px 20px;
    border-radius: 16px;
  }
}

/* doublon retire */

body.ia-page .contact-card__title { color: #fff; }
body.ia-page .contact-card__desc { color: rgba(255,255,255,.55); }
body.ia-page .contact-card__label { color: rgba(255,255,255,.6); }
body.ia-page .contact-card__input {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
body.ia-page .contact-card__input::placeholder { color: rgba(255,255,255,.3); }
body.ia-page .contact-card__trust-label { color: rgba(255,255,255,.4); }
body.ia-page .contact-card__separator-line { background: rgba(255,255,255,.1); }
body.ia-page .contact-card__separator-text { color: rgba(255,255,255,.3); }

/* Others cards */
body.ia-page .sol-others__card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

body.ia-page .sol-others__card:hover {
  border-color: rgba(59,118,246,.3);
}

body.ia-page .sol-others__badge {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
}

/* Eyebrow dans les sections */
body.ia-page .eyebrow {
  background: rgba(59,118,246,.1);
  color: #60A5FA;
  border: 1px solid rgba(59,118,246,.2);
}

body.ia-page .eyebrow--dark {
  background: rgba(59,118,246,.15);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(59,118,246,.2);
}

/* ==========================================================================
   COMPARATIF AVANT/APRES — pastilles
   ========================================================================== */
.ia-compare {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  text-align: center;
  padding: 80px 0 0;
  max-width: 640px;
  margin: 0 auto;
}

.ia-compare__card {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 32px 24px;
}

.ia-compare__label {
  display: inline-block;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.04);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

.ia-compare__value {
  display: block;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}

.ia-compare__rate {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.3);
  margin-top: 12px;
  line-height: 1.5;
}

.ia-compare__cost {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  font-feature-settings: 'tnum' 1;
}

.ia-compare__unit {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.2);
  margin-top: 4px;
}

.ia-compare__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ia-compare__arrow svg {
  width: 36px;
  height: 36px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.3);
}

.ia-compare__footer {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.2);
  margin-top: 24px;
  padding-bottom: 80px;
  font-weight: 500;
}

@media (max-width: 480px) {
  .ia-compare { flex-direction: column; gap: 16px; }
  .ia-compare__arrow { justify-content: center; }
  .ia-compare__arrow svg { transform: rotate(90deg); }
}

/* Proof bar (si utilise) */
body.ia-page .proof-bar {
  background: transparent;
  border-color: rgba(255,255,255,.06);
}

body.ia-page .proof-bar__text { color: rgba(255,255,255,.55); }
body.ia-page .proof-bar__text strong { color: #fff; }