/* ==========================================================================
   Modal — generic centered dialog (dark backdrop + light card), reusable
   anywhere on the site for a "more detail" popup. Only the shell (open/close
   mechanics, backdrop, card chrome) is shared here; content is authored per
   instance inside .modal__body. js/modal.js wires up any trigger carrying
   [data-modal-target="<modal-id>"] to the matching .modal#<modal-id>, and
   closes on [data-modal-close], backdrop click, or Escape.
   Blocks: .modal, .modal__backdrop, .modal__card, .modal__close,
           .modal__scroll, .modal__body
   Modifiers: .modal--wide (80vw card, for content-heavy modals)
   ========================================================================== */

/* html is the actual scrolling element on this page (body has no
   height/overflow constraint that would make it the scroller), so the
   lock has to hit both — body alone leaves the background scrollable. */
html.modal-open,
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 24, 27, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal__card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 46, 0.32);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(23, 24, 27, 0.28);
  transform: translateY(16px);
  transition: transform var(--transition-base);
}

/* Product-tinted ambient wash, same corner-glow language as
   .products__card::before — carries the card's identity into its modal
   instead of the detail view going flat white. */
.modal__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15%;
  right: -12%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.modal--circuit .modal__card::before {
  background: var(--color-apple-green);
  opacity: 0.14;
}

.modal--parcours .modal__card::before {
  background: var(--color-red);
  opacity: 0.12;
}

.modal.is-open .modal__card {
  transform: translateY(0);
}

/* Wider variant for content-heavy modals (e.g. #modal-formules) that don't
   read well squeezed into the default 620px card. Guarded to desktop only
   so it never fights the mobile override below, which already needs the
   card at full available width on small screens. */
@media (min-width: 641px) {
  .modal--wide .modal__card {
    max-width: 80vw;
  }
}

/* Scroll region lives inside the card (which owns the rounded corners and
   clips via overflow: hidden) so the native scrollbar never sits flush
   against a squared-off edge. The scrollbar track itself ignores padding
   and always runs the full height of its box, so it's additionally inset
   from the top/bottom by the card's own corner radius — clearing the
   curve entirely — with padding reduced by the same amount so the visible
   spacing around the content stays identical to a flush edge-to-edge box. */
.modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-block: var(--radius-lg);
  padding: calc(var(--space-7) - var(--radius-lg)) var(--space-7);
  scrollbar-width: thin;
  scrollbar-color: var(--color-apple-gray) transparent;
}

.modal__scroll::-webkit-scrollbar {
  width: 8px;
}

.modal__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.modal__scroll::-webkit-scrollbar-thumb {
  background: var(--color-apple-gray);
  border-radius: var(--radius-pill);
}

.modal__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-light-gray);
}

.modal__close {
  position: absolute;
  z-index: 1;
  top: var(--space-5);
  right: var(--space-5);
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--glass-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-carbon-black);
  border-color: var(--color-carbon-black);
  color: var(--color-white);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Modules/benefits list reused inside a modal shouldn't inherit the
   margin-top: auto footer-push meant for the fixed-height card context
   it was designed for (see css/components/products.css). */
.modal__body .products__modules {
  margin-top: 0;
}

.modal__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-right: var(--space-7);
}

/* Same colored left-rule + baseline "prix :" subscript as the card's
   buy-row (css/components/products.css) — one price treatment reused
   everywhere instead of the modal getting its own flat gray pill. */
.modal__heading .products__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border: none;
  border-left: 2px solid var(--color-text-muted);
  background: none;
  border-radius: 0;
}

.modal--circuit .modal__heading .products__price {
  border-left-color: var(--color-apple-green);
}

.modal--parcours .modal__heading .products__price {
  border-left-color: var(--color-red);
}

.modal__heading .products__price-value {
  font-size: var(--fs-lg);
}

.modal__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* Product name picks up the card's own accent instead of flat black —
   apple-green reads fine at this weight/size; parcours uses the darker
   red (same token as .founder__quote) since the vivid red is lower
   contrast at large sizes. */
.modal--circuit .modal__title {
  color: var(--color-apple-green);
}

.modal--parcours .modal__title {
  color: var(--color-red-dark);
}

.modal__title-trademark {
  color: var(--color-text-primary);
}

.modal--circuit .modal__heading .eyebrow {
  color: var(--color-apple-green);
}

.modal--parcours .modal__heading .eyebrow {
  color: var(--color-red);
}

.modal__text {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* Reassurance line for the "Acheter" lead-capture forms — this isn't a
   real checkout, so it heads off "where's the payment screen?" before
   the person submits. */
.modal__note {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .modal {
    padding: var(--space-4);
  }

  .modal__card {
    max-width: none;
    max-height: 85vh;
  }

  /* --space-7 inline padding (used on desktop to match the card's generous
     margins) eats too much of a 320-375px viewport — switch to a tighter
     inset than the shared mobile gutter so fields (already stacked full-width
     by .cf-row below) get as much room as possible next to the card's own
     outer margin (.modal padding, above). */
  .modal__scroll {
    padding-inline: var(--space-4);
  }

  /* On desktop the eyebrow + price fit on one row with room to spare. On a
     narrow phone that row (plus the fixed-position close button eating
     ~56px off the right) doesn't fit, and since neither flex child shrinks
     its text, the price silently overflows its own box and collides with
     the close button instead of wrapping. Let it wrap to its own line. */
  .modal__heading {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding-right: var(--space-6);
  }
}