/* ROI Calculator styles.
 *
 * Hand-authored 2026-08-06 against the Chorus iAdvize design system, replacing the
 * minified bundle captured from the old roi-calculator-en module. Token values come
 * from the design system's colors_and_type.css; the previous file carried its own
 * copy of them, with --green-1200 wrong (#003b38 against the real #0b3b37).
 *
 * Tokens are scoped to .roi-root rather than :root. A module has no business
 * declaring --grey-800 for the whole page.
 *
 * Raleway and Open Sans are already served by the site. Do not add @font-face here.
 */

.roi-root {
  --green-100: #f5fffa;
  --green-200: #d0fbf4;
  --green-400: #93f0cd;
  --green-600: #3be1a4;
  --green-800: #29a37a;
  --green-1000: #176251;
  --green-1200: #0b3b37;

  --grey-000: #fff;
  --grey-100: #f8f8f6;
  --grey-200: #f0f0ec;
  --grey-400: #d1d1cb;
  --grey-600: #9b9b97;
  --grey-800: #6c6c68;
  --grey-1000: #3d3d38;
  --grey-1200: #0a0a09;

  /* Hairlines on the near-black panel. Alpha, so the panel can change without them. */
  --rule-inverse: rgba(255, 255, 255, 0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 40px;
  --radius-pill: 9999px;

  --container-max: 1324px;
  --container-px: 24px;

  --font-display: "Raleway", sans-serif;
  --font-body: "Open Sans", sans-serif;
}

.roi-root *,
.roi-root *::before,
.roi-root *::after { box-sizing: border-box; }

/* ==========================================================================
   Section and shell
   ========================================================================== */

/* No padding at all, in either axis.
 *
 * Vertical: the HubSpot dnd-section hosting this module carries the theme's 60px, and
 * so does the section on either side. 64px here produced a 184px gulf under the hero.
 *
 * Horizontal: the dnd cell wrapping this module is already exactly --container-max wide
 * and starts on the same left edge as the hero headline. Adding gutters here pushed the
 * calculator 24px inboard of everything above it, for no gain.
 *
 * Both therefore depend on the page section providing the frame. If this module is ever
 * dropped somewhere without one, pad that wrapper rather than putting it back here. */
.roi-section {
  padding: 0;
}

.roi-section--grey-200 { background: var(--grey-200); }
.roi-section--grey-100 { background: var(--grey-100); }
.roi-section--grey-000 { background: var(--grey-000); }

/* padding: 0 while the card is white on a white section, because then the shell is
 * invisible and its padding is not card padding, it is just a gap. That is what put
 * 116px of nothing between the hero and the first thing a reader can actually see.
 *
 * The padding comes back automatically if the section is given a background, because
 * at that point the card has an edge and needs to breathe inside it. Tying the two
 * together means switching `Section background` in the editor cannot produce a card
 * whose content is flush against its own border. */
.roi-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  background: var(--grey-000);
  border-radius: var(--radius-4xl);
}

.roi-section--grey-100 > .roi-shell,
.roi-section--grey-200 > .roi-shell { padding: 56px; }

/* start, not stretch: the results panel is the taller of the two and the storefront
   panel is meant to end after its last slider, as in the design. Stretching it and
   distributing the fields blows the 32px rhythm out to a couple of hundred pixels. */
.roi-top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 468px);
  gap: 24px;
  align-items: start;
}

.roi-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--grey-1200);
}

.roi-panel-title--inverse { color: var(--grey-000); }

/* ==========================================================================
   Storefront panel
   ========================================================================== */

.roi-inputs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background: var(--grey-100);
  border-radius: var(--radius-3xl);
}

.roi-fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.roi-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roi-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.roi-field__name {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grey-1000);
}

/* Kept in the DOM and hidden. module.js writes the formatted value here, the parity
   harness reads it, and it is the accessible text when a value is announced. The
   numeric entry above carries the same figure visually. */
.roi-field__value[hidden] { display: none; }

.roi-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 172px;
  padding: 10px 14px;
  background: var(--grey-000);
  border: 1px solid var(--grey-400);
  border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}

.roi-entry:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(59, 225, 164, .28);
}

.roi-entry__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: right;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-entry__input:focus { outline: none; }

.roi-entry__unit {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-800);
}

/* border: none is load-bearing. The iAdvize theme puts `1px solid rgb(16,16,16)` on
   every input, which draws a black rectangle around the 4px track. The module this
   replaced carried the same reset; dropping it was a regression. */
.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 0;
  padding: 0;
  background: var(--grey-200);
  border: none;
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}

.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--grey-1200);
  border: 3px solid var(--green-600);
  cursor: grab;
  transition: transform .15s;
}

.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-slider::-webkit-slider-thumb:active { cursor: grabbing; }

.roi-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--grey-1200);
  border: 3px solid var(--green-600);
  cursor: grab;
}

.roi-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--green-800);
  outline-offset: 3px;
}

.roi-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--green-800);
  outline-offset: 3px;
}

/* ==========================================================================
   Results panel
   ========================================================================== */

.roi-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--grey-1200);
  border-radius: var(--radius-3xl);
}

.roi-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roi-hero__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.roi-hero__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 112px;
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--grey-000);
}

/* The sign stays before the number, matching the markup module.js emits and what both
   live pages have always shown. It was briefly moved after the figure for fidelity with
   the Claude Design mockup; the Creative Studio lead did not notice it on first read,
   which is disqualifying for the unit of the page's headline number. Leading, the eye
   meets the operator before the digits and frames them as a multiple immediately. */
/* 72px against the 112px figure, both design-system type tokens. It was 56px, exactly
   half the number, and the Creative Studio lead did not register it on first read. At
   0.64 of the figure it carries as an operator instead of a superscript, without
   competing with the number. The responsive steps below hold roughly the same ratio. */
.roi-hero__value span {
  font-size: 72px;
  line-height: 1;
  color: var(--green-600);
}

.roi-hero__sub {
  margin-top: -4px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grey-400);
}

.roi-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-inverse);
}

.roi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-inverse);
}

.roi-row:last-child { border-bottom: none; }

.roi-row--stacked { align-items: flex-start; }

.roi-row__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.roi-row__label {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grey-400);
}

.roi-row__link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--green-400);
  text-decoration: underline;
}

.roi-row__link:hover { color: var(--green-600); }

.roi-row__value {
  flex: none;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--grey-000);
}

.roi-row__value--green { color: var(--green-600); }

.roi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  background: var(--green-600);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-1200);
  text-decoration: none;
  transition: background .2s, transform .15s;
}

.roi-cta:hover {
  background: var(--green-400);
  color: var(--grey-1200);
  transform: translateY(-1px);
}

.roi-cta svg { width: 18px; height: 18px; }

/* ==========================================================================
   Disclosures
   ========================================================================== */

.roi-disclosure {
  background: var(--grey-100);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.roi-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  cursor: pointer;
  list-style: none;
}

.roi-disclosure__summary::-webkit-details-marker { display: none; }

.roi-disclosure__summary:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: -2px;
}

.roi-disclosure__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roi-disclosure__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-disclosure__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--grey-800);
}

.roi-disclosure__sign {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--grey-1200);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--green-600);
}

.roi-disclosure__sign::before { content: "+"; }
.roi-disclosure[open] .roi-disclosure__sign::before { content: "\2212"; }

.roi-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px 32px;
}

/* ==========================================================================
   Calculation steps
   ========================================================================== */

.roi-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* Grid rather than flex so the rows can be handed to subgrid below. Five rows:
   number, title, body, value, tag. */
.roi-step {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  justify-items: start;
  gap: 12px;
  padding: 24px;
  background: var(--grey-000);
  border-radius: var(--radius-xl);
}

.roi-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--green-600);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-step__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-step__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-800);
  text-wrap: pretty;
}

.roi-step__value {
  justify-self: stretch;
  padding-top: 12px;
  border-top: 1px solid var(--grey-200);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--grey-1200);
}

/* gap, not a literal space, because this is a flex container: the conversion-rate tag
   is a <span> written by JS followed by a text node, and flex drops the whitespace
   between them. Tags made of a single text node are unaffected, having nothing to
   space apart. */
.roi-step__tag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--green-200);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--green-1000);
}

.roi-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  background: var(--green-100);
  border: 1px solid var(--green-400);
  border-radius: var(--radius-xl);
}

/* Same face as .roi-step__title: the summary strip closes the row of step cards and
   reads as their conclusion, so it should not switch to the body font halfway. */
.roi-total__label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-total__value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--green-1000);
}

/* ==========================================================================
   Methodology notes
   ========================================================================== */

.roi-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.roi-note {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 24px 28px;
  background: var(--grey-000);
  border-radius: var(--radius-xl);
}

.roi-note__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-1200);
}

.roi-note__text,
.roi-notes-legacy {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-800);
  text-wrap: pretty;
}

.roi-note__text p,
.roi-notes-legacy p { margin: 0 0 8px; }
.roi-note__text p:last-child,
.roi-notes-legacy p:last-child { margin-bottom: 0; }

.roi-note__text a,
.roi-notes-legacy a { color: var(--green-1000); }

.roi-notes-legacy {
  padding: 24px 28px;
  background: var(--grey-000);
  border-radius: var(--radius-xl);
}

.roi-notes-legacy ul { margin: 0; padding-left: 20px; }
.roi-notes-legacy li + li { margin-top: 8px; }

/* ==========================================================================
   Value update animation
   ========================================================================== */

@keyframes roiCountUp {
  from { opacity: .6; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0); }
}

.roi-hero__value,
.roi-row__value,
.roi-step__value,
.roi-total__value { transition: color .3s cubic-bezier(.22, 1, .36, 1); }

.roi-updating { animation: roiCountUp .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .roi-root *,
  .roi-root *::before { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .roi-top { grid-template-columns: 1fr; }
  .roi-hero__value { font-size: 96px; }
}

@media (max-width: 768px) {
  .roi-shell { border-radius: var(--radius-3xl); gap: 16px; }
  .roi-section--grey-100 > .roi-shell,
  .roi-section--grey-200 > .roi-shell { padding: 24px; }
  .roi-inputs,
  .roi-results { padding: 24px 20px; border-radius: var(--radius-2xl); }
  .roi-panel-title { font-size: 22px; }
  .roi-hero__value { font-size: 72px; }
  .roi-hero__value span { font-size: 40px; }
  .roi-row__value { font-size: 24px; }
  .roi-disclosure__summary { padding: 20px; }
  .roi-disclosure__body { padding: 0 20px 20px; }
  .roi-total { padding: 20px; }
  .roi-total__value { font-size: 26px; }
}

@media (max-width: 480px) {
  .roi-shell { border-radius: var(--radius-2xl); }
  .roi-section--grey-100 > .roi-shell,
  .roi-section--grey-200 > .roi-shell { padding: 16px; }
  .roi-field__head { align-items: flex-start; gap: 12px; }
  .roi-entry { width: 140px; padding: 8px 12px; }
  .roi-entry__input,
  .roi-entry__unit { font-size: 18px; }
  .roi-hero__value { font-size: 60px; }
  .roi-hero__value span { font-size: 36px; }
  .roi-row { flex-wrap: wrap; }
  .roi-row__value { font-size: 22px; }
  .roi-disclosure__title { font-size: 18px; }
  .roi-step { padding: 20px; }
  .roi-note { padding: 20px; }
}

/* ==========================================================================
   Cross-card row alignment
   ==========================================================================
   Without this, a title that wraps to two lines in one card pushes that card's
   paragraph, value and tag down while its neighbours stay put, and the row reads as
   ragged. It shows up constantly across four languages: "Sessions eligibles" is one
   line, "Commandes supplementaires" is two.

   subgrid makes every card share the container's rows, so each band lines up on the
   tallest card in that band. grid-auto-flow: column guarantees a single row of cards,
   which is what makes a five-row template meaningful, and it handles 2 cards (English,
   consent off) and 3 cards identically.

   Wrapped in @supports so a browser without subgrid simply keeps the ragged-but-working
   layout rather than collapsing. */
@supports (grid-template-rows: subgrid) {
  /* Steps go up to four cards since the orders-today step was added, so they need more
     room before being forced onto one line. Below this they fall back to auto-fit and
     wrap, which loses the alignment but keeps the text readable. */
  @media (min-width: 1024px) {
    .roi-steps {
      grid-template-columns: none;
      grid-template-rows: auto auto 1fr auto auto;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
    .roi-step {
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
  }

  /* Notes are three cards at most, so they hold their row much lower down. */
  @media (min-width: 769px) {
    .roi-notes {
      grid-template-columns: none;
      grid-template-rows: auto 1fr;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
    .roi-note {
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }
}