/* ============================================================
   Planifier une démo — page styles  (MDS Templates plugin)
   Figma 3839-35441 (desktop 1920) / 5410-33118 (mobile 414).

   Loaded only on posts that contain the [mds_demo] shortcode.
   Typography always comes from the DS classes in the markup
   (.h4, .text-p1–.text-p3 + .fw-*) — this file carries layout,
   colour and documented deviations only.
   ============================================================ */
.demo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* page-scoped border-box: the form panel and the field grid pair a %
   width with padding/border, and the DS sets no global box-sizing */
[class^="demo-"], [class*=" demo-"] { box-sizing: border-box; }

/* ============================================================
   1. Section shell (4027-53173 / 5410-33122)
   One flattened export per breakpoint, cropped by Figma to the
   exact visible area — so `cover` reproduces the frame 1:1.
   The template sets --demo-bg / --demo-bg-mobile from the ACF
   images (falling back to the bundled exports).
   ============================================================ */
.demo-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-step-11); /* 64px */
  background: var(--demo-bg, url("../img/demo-bg-desktop.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}

/* 1420 content container, sized as a % of the 1920 design width */
.demo-in {
  width: 73.958%; /* 1420/1920 */
  max-width: var(--section-container);
  margin-inline: auto;
}

/* the copy + form column — 710/1420 of the container */
.demo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8); /* 32px */
  width: 50%;
  min-width: 0;
}

/* ============================================================
   2. Title + "Pendant et après la démo" checklist (4027-53175)
   ============================================================ */
.demo-title { color: var(--neutrals-100-white); margin: 0; }

.demo-intro {
  display: flex;
  flex-direction: column;
  gap: 13px; /* Figma 12.97px — between two spacing steps, no token fits */
  width: 100%;
}
.demo-intro-lead { margin: 0; }

.demo-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-5); /* 12px (Figma 12.155) */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the connector behind the numbers (Figma "Line 55": white, 0.81px —
   rendered as 1px at 80% so the on-screen weight matches) */
.demo-steps::before {
  content: "";
  position: absolute;
  left: 11.5px; /* centre of the 24px number */
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--overlay-light-80);
}
.demo-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4); /* 8px (Figma 8.103) */
}
.demo-step-num {
  position: relative; /* sits over the connector */
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  /* two-tone (--primary-light circle / --primary-default numeral) is baked
     into the sprite's fills — see demo-sprite.php */
}
.demo-step-num svg { display: block; width: 100%; height: 100%; }
/* Figma only draws the numerals 1–3; a step added by an editor gets the same
   two-tone circle with the number set in the DS body font (see
   mds_demo_step_num()) instead of a drawn numeral */
.demo-step-num-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 50%;
}
.demo-step-num-text > span { color: var(--primary-default); }
.demo-step-text { margin: 0; }

/* ============================================================
   3. Glass form panel (4027-53196 / 5410-33126)
   ============================================================ */
.demo-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* 24px desktop / 16px mobile */
  width: 100%;
  /* Figma strokes do not consume layout space, so the 1px border is taken
     out of the padding — keeps the inner container at exactly 662/1420 */
  padding: calc(var(--spacing-lg) - 1px);
  background: var(--overlay-light-10);
  border: 1px solid var(--overlay-light-20);
  border-radius: var(--radius-9md); /* 20px */
}
/* the pill must keep its own width inside the stretching column */
.demo-form > .btn-pill { align-self: flex-start; }
.demo-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px at both tiers */
}
.demo-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-step-6); /* 16px at both tiers */
}

/* .input .input-sm gives the exact Figma type ramp (label P3, value 14px);
   only the box padding differs — Figma pairs it with the -md padding. */
.demo-field {
  display: flex;
  width: calc(50% - (var(--spacing-step-6) / 2)); /* 323/662 */
  padding: 0px;
  border: none;
}

.demo-field-full { width: 100%; }
/* -sm padding + the DS's 1px transparent focus border == the Figma 12/16 box */
.demo-field .input-box {
  box-sizing: border-box; /* so the mobile select's min-height reads as total */
  padding: calc(var(--spacing-sm) - 1px) calc(var(--spacing-md) - 1px);
}

/* glass surface — the DS .on-dark assumes an opaque dark background */
.demo-field.on-dark .input-box { background: var(--overlay-light-20); }
.demo-field.on-dark:focus-within .input-box,
.demo-field.on-dark .input-box:has(input:not(:placeholder-shown)),
.demo-field.on-dark .input-box:has(textarea:not(:placeholder-shown)) {
  background: var(--overlay-light-30);
}
.demo-field.on-dark .input-required { color: var(--neutrals-100-white); }

/* ── product dropdown (4027-52253: Default / Hover / Active) ──
   Shared DS component (components.css ▸ 4b. Dropdown Input) — the closed
   control's glass look (white label, white/60% placeholder) comes free from
   .input.on-dark .dropdown-value, same as every text field on this page.
   Figma's Active variant (4027-52252) keeps the OPEN LIST light even though
   the trigger sits on the dark hero — .input.on-dark otherwise darkens the
   list too (built for some other on-dark context, not this component), so
   that part is put back to the base light styling here. Same "later file,
   equal specificity wins" override .demo-field.on-dark already uses on
   .input-box above. */
.demo-field.on-dark .dropdown-list { background: var(--neutrals-300); }
.demo-field.on-dark .dropdown-item {
  background: var(--neutrals-300);
  box-shadow: inset 0 -1px 0 var(--neutrals-500);
  color: var(--neutrals-700);
}
.demo-field.on-dark .dropdown-item:hover { background: var(--neutrals-400); }
.demo-field.on-dark .dropdown-item:has(.dropdown-input:checked) {
  background: var(--neutrals-400);
  color: var(--neutrals-950);
}
.demo-field.on-dark .dropdown-mark { background-color: var(--neutrals-500); }

.demo-field .dropdown-shell.has-error .input-box { box-shadow: inset 0 0 0 1px var(--neutrals-100-white); }

/* the panel is fixed-geometry in Figma — no resize grabber */
.demo-field textarea { resize: none; }

/* ── consent checkbox — shared .checkbox (components.css ▸ 4a. Checkbox) ── */
/* The constraint-validation proxy for a required dropdown. It must stay in the
   render tree — display:none or [hidden] makes the browser skip it and refuse
   the submit silently — so it is laid transparently over the control, where the
   browser also anchors its bubble. */
.dropdown-proxy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.demo-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4); /* 8px */
  cursor: pointer;
}
.demo-consent-box { margin-top: 4px; } /* Figma wraps the 18px box in a 26px row */
.demo-consent-text { margin: 0; }
/* The privacy notice closes the form, under the submit button. */
.demo-form-notice {
  margin: var(--spacing-step-6) 0 0;
  opacity: .8;
}
.demo-form-notice a { color: inherit; text-decoration: underline; }

/* ── sent state (4027-52640, "Form=Sent") ──
   Same panel, content swapped and centred. Driven by mds-demo.js, which
   cancels the submit so the page never reloads. */
.demo-sent {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg); /* 24px */
  width: 100%;
  text-align: center;
}
.demo-sent-title,
.demo-sent-text { margin: 0; }
.demo-form.is-sent { justify-content: center; }
.demo-form.is-sent .demo-form-body,
.demo-form.is-sent > .btn-pill { display: none; }
.demo-form.is-sent .demo-sent { display: flex; }
.demo-form-error {
  margin: 0;
  color: var(--neutrals-100-white);
}
@media (min-width: 1024px) {
  .demo-form.is-sent { min-height: 584px; } /* Figma keeps the panel's height */
}

/* ============================================================
   4. Decorative medO mark (4027-53213 / 5410-33471)
   ============================================================ */
.demo-mark {
  position: absolute;
  left: 55.833%;  /* 1072/1920 */
  bottom: 65.77px;
  width: 32.327%; /* 620.68/1920 */
  aspect-ratio: 620.818 / 615.005;
  background: var(--demo-mark, url("../img/demo-mark.svg")) center / contain no-repeat;
  pointer-events: none;
}

/* ============================================================
   5. Tablet — no Figma frame; keep it unbroken: the column takes
   the full container (capped at the 710px design width) and the
   mark drops below the content like it does on mobile.
   ============================================================ */
@media (max-width: 1279px) {
  .demo-col { width: 100%; max-width: 710px; }
  .demo-mark {
    position: static;
    width: 100%;
    max-width: 620px;
    /* left edge of the 1420 container, so it lines up with the form */
    margin: var(--spacing-step-11) auto 0 13.021%;
  }
}

/* ============================================================
   6. Mobile (5410-33118) — 414 frame
   ============================================================ */
@media (max-width: 1023px) {
  .demo-section {
    padding-block: var(--spacing-step-10); /* 48px */
    background-image: var(--demo-bg-mobile, url("../img/demo-bg-mobile.jpg"));
  }
  .demo-in { width: 88.406%; } /* 366/414 */
  .demo-col { max-width: none; }

  /* the mobile frame leaves a bigger gap above the submit button */
  .demo-form { gap: var(--spacing-step-10); } /* 48px (Figma 49) */
  .demo-form.is-sent { gap: var(--spacing-lg); }
  .demo-field { width: 100%; }
  .demo-field .dropdown-shell .input-box { min-height: 40px; }

  /* Figma's mobile consent box is the DS Checkbox "Size=Small" (24px) —
     .checkbox-lg's sizing, redeclared rather than swapped in since PHP can't
     change the emitted class per breakpoint. */
  .demo-consent-box {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    margin-top: 0;
  }
  .demo-consent-box:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.647 9.15195' fill='none'%3E%3Cpath d='M0.666667 4.4379L4.4379 8.20914L11.9804 0.666667' stroke='white' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 12.647px 9.152px;
  }

  .demo-mark { width: 88.406%; max-width: none; margin-left: auto; } /* 366/414 */
}

/* Figma deviation: the mobile frame types the title with H3 (28/34) while
   the desktop frame uses H4 (48/50). The markup keeps .h4 — which is exact
   at 1920 — and the mobile tier re-points size/line-height at the H3 tokens
   so the 414 frame matches too. Scoped to the <768 token tier, not the
   1023 layout breakpoint, so the two never disagree mid-range. */
@media (max-width: 767px) {
  .demo-title {
    font-size: var(--typography-size-h3);
    line-height: var(--typography-line-height-h3);
  }
}

/* QA only: .qa-hover mirrors every :hover rule so headless runs can measure
   hover geometry without a pointer (see the QA block in the prompt). */
.qa-hover.btn-pill {
  padding: 8px 24px;
  margin-right: 34px;
  background-clip: padding-box;
  border-radius: 28px;
}
.qa-hover.btn-pill .btn-icon-circle { width: 0; opacity: 0; margin-right: -10px; }
.qa-hover.btn-pill .btn-icon-pop { opacity: 1; transform: scale(1); }
.qa-hover.btn-primary.on-dark { background: #fff; }