/* ============================================================
   PRICING — deux offres, un curseur, un prix qui suit.
   Volontairement démonstratif : c'est la section qui doit
   se voir le plus de la page.
   ============================================================ */

  .pricing {
    position: relative; isolation: isolate;
  }
  .pricing > .container { position: relative; z-index: 1; }

  .pricing__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .pricing__title { max-width: 20ch; margin-inline: auto; }
  .pricing__lead {
    margin: var(--space-md) auto 0; max-width: 56ch;
    font-size: var(--fs-lead); color: var(--text-muted);
  }
  .pricing__lead strong { color: var(--k-purple); font-weight: 600; }

  .pricing__grid {
    display: grid; gap: var(--space-lg);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .plan {
    display: flex; flex-direction: column;
    background: var(--k-white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: 0 1px 2px rgba(10, 4, 6, 0.04), 0 18px 44px rgba(55, 12, 130, 0.09);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
  }

  .plan__name { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); margin: 0; }
  .plan__desc {
    margin: var(--space-sm) 0 0; color: var(--text-muted);
    font-size: 0.9375rem; line-height: 1.6;
  }

  /* ---------- Curseur ---------- */
  .plan__meter { margin-top: var(--space-xl); }
  .plan__label {
    display: block; margin-bottom: 0.7rem;
    font-size: 0.9375rem; color: var(--text-primary);
  }
  .plan__amount { font-weight: 600; font-variant-numeric: tabular-nums; }

  .plan__range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 10px; border-radius: var(--radius-pill);
    background: linear-gradient(to right,
      var(--k-purple) 0 var(--fill, 50%), #EFEBF5 var(--fill, 50%) 100%);
    cursor: pointer; outline-offset: 4px;
  }
  .plan__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--k-white); border: 1px solid var(--hairline);
    box-shadow: 0 1px 3px rgba(10, 4, 6, 0.18), 0 4px 12px rgba(55, 12, 130, 0.16);
    cursor: grab;
  }
  .plan__range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline);
    background: var(--k-white);
    box-shadow: 0 1px 3px rgba(10, 4, 6, 0.18), 0 4px 12px rgba(55, 12, 130, 0.16);
    cursor: grab;
  }
  .plan__range::-moz-range-track { height: 10px; border-radius: var(--radius-pill); background: transparent; }

  /* ---------- Prix ---------- */
  .plan__price {
    margin-top: var(--space-xl); padding-top: var(--space-lg);
    border-top: 1px solid var(--hairline);
  }
  .plan__figure { margin: 0; display: flex; align-items: baseline; gap: 0.15rem; }
  .plan__num {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2rem, 1.4rem + 1.9vw, 2.625rem);
    line-height: 1; letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  .plan__per { font-size: 1rem; color: var(--text-muted); }
  .plan__billed { margin: 0.55rem 0 0; font-size: 0.8125rem; color: var(--text-muted); }

  /* Au maximum du curseur : plus de prix affiché, on parle à quelqu'un. */
  .plan.is-custom .plan__num { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.375rem); }
  .plan.is-custom .plan__per { display: none; }

  .plan__cta { margin-top: var(--space-lg); justify-content: space-between; }

  /* ---------- Ce qui est inclus ---------- */
  .plan__incl {
    margin-top: var(--space-xl); padding-top: var(--space-lg);
    border-top: 1px solid var(--hairline);
  }
  .plan__incl-title {
    margin: 0 0 0.85rem; font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  }
  .plan__list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.7rem; }
  .plan__list li {
    position: relative; padding-left: 1.6rem;
    font-size: 0.9375rem; line-height: 1.5;
  }
  .plan__list li::before {
    content: ''; position: absolute; left: 0; top: 0.3em;
    width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--k-purple-bg);
  }
  .plan__list li::after {
    content: ''; position: absolute; left: 0.31rem; top: 0.52em;
    width: 0.22rem; height: 0.42rem;
    border: solid var(--k-purple); border-width: 0 1.7px 1.7px 0;
    transform: rotate(45deg);
  }

  @media (max-width: 860px) {
    .pricing__grid { grid-template-columns: 1fr; }
  }

  /* « Most popular » : pas une pastille verte de comparateur SaaS.
     Une mention discrète sur la ligne de facturation, dans le violet
     de la marque, séparée par un point médian. */
  .plan__pop {
    display: inline; margin-left: 0.5rem; padding-left: 0.6rem;
    position: relative;
    font-weight: 600; color: var(--k-purple);
    opacity: 0; transition: opacity 0.18s ease;
  }
  .plan__pop::before {
    content: '·'; position: absolute; left: 0; color: var(--text-muted); font-weight: 400;
  }
  .plan.is-popular .plan__pop { opacity: 1; }
  .plan.is-custom .plan__pop { display: none; }

  /* Carte sans curseur : le prix n'a pas de filet au-dessus,
     il ouvre la carte au lieu de conclure une simulation. */
  .plan__price--solo { border-top: 0; padding-top: 0; }
  .plan__price--solo .plan__num { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.375rem); }

  /* Une seule offre : carte horizontale sur toute la largeur.
     À gauche ce qu'on achète, à droite le curseur et le prix. */
  .pricing__grid { grid-template-columns: minmax(0, 1fr); max-width: 64rem; margin-inline: auto; }
  .pricing__grid .plan {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem); align-items: start;
  }
  .pricing__grid .plan__head  { grid-column: 1; grid-row: 1; }
  .pricing__grid .plan__incl  { grid-column: 1; grid-row: 2 / span 3; margin-top: var(--space-xl);
                                padding-top: var(--space-lg); }
  .pricing__grid .plan__meter { grid-column: 2; grid-row: 1; margin-top: 0; }
  .pricing__grid .plan__price { grid-column: 2; grid-row: 2; }
  .pricing__grid .plan__cta   { grid-column: 2; grid-row: 3; }
  @media (max-width: 860px) {
    .pricing__grid .plan { grid-template-columns: 1fr; }
    .pricing__grid .plan > * { grid-column: 1 !important; grid-row: auto !important; }
  }

  /* Le volume choisi devient un vrai chiffre d'affichage : il remplit le haut
     de la colonne de droite au lieu de flotter en petit au-dessus du curseur. */
  .pricing__grid .plan__label {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem;
    margin-bottom: 1.1rem; font-size: 1.0625rem; color: var(--text-muted);
  }
  .pricing__grid .plan__amount {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.625rem); line-height: 1;
    letter-spacing: -0.015em; color: var(--text-primary);
  }
  .pricing__grid .plan__range { height: 12px; }
  .pricing__grid .plan__range::-webkit-slider-thumb { width: 30px; height: 30px; }
  .pricing__grid .plan__range::-moz-range-thumb { width: 30px; height: 30px; }