/* ==========================================================================
   home.css — the five sections of /en/ and /fr/
   Depends on tokens.css + base.css. Holds no colour or size literals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero__title {
  font-size: var(--step-hero);
  font-weight: var(--weight-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-hero);
  max-width: var(--measure-hero);
  margin-bottom: var(--space-md);
}

/* The one accented word. --signal appears as an underline only; the letter-
   forms stay --ink so the headline keeps its 13.60:1 contrast. */
.hero__mark {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: var(--rule-w-thick);
  text-underline-offset: 0.12em;
}

.hero__lead {
  font-size: var(--step-lead);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--step-lead);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   2. Services
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  gap: var(--space-lg);
}

.services__name {
  font-size: var(--step-h3);
  margin-bottom: var(--space-3xs);
}

.services__desc {
  max-width: var(--measure);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Proof — The Grab Method
   -------------------------------------------------------------------------- */

.proof__text {
  font-size: var(--step-lead);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}

.proof__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   4. Method
   -------------------------------------------------------------------------- */

.method {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
}

.method__item strong {
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   5. Contact
   -------------------------------------------------------------------------- */

.contact__lead {
  font-size: var(--step-lead);
  max-width: var(--measure);
  margin-bottom: var(--space-lg);
}

/* The progress readout lives in the annotation column and only exists once
   the sequential journey is running. It is hidden in the served HTML and
   revealed by form.js, so the no-JS page never shows a step counter for a
   form that has no steps. */
.qform__progress[hidden] { display: none; }

.qform {
  background-color: var(--paper-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 2vw, var(--space-lg));
  max-width: var(--measure);
}

/* --- Honeypot -------------------------------------------------------------
   Pulled out of view without display:none and without visibility:hidden, so
   the field stays a real, non-focusable, non-announced input. Bots that fill
   every input trip it; nobody else can reach it. */
.qform__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* --- Steps ---------------------------------------------------------------
   Served state: all four visible, stacked, plain form. form.js sets
   data-seq="on" and only then does anything get hidden. */
.qform__steps {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qform[data-seq="on"] .qform__steps {
  gap: 0;
}

.qform[data-seq="on"] .qform__step {
  display: none;
}

.qform[data-seq="on"] .qform__step.is-active {
  display: block;
  animation: step-in var(--dur-step) var(--ease-out) both;
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(var(--step-shift)); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qform[data-seq="on"] .qform__step.is-active { animation: none; }
}

/* --- Question label ------------------------------------------------------
   A real <label>, always visible, always associated. No placeholder is ever
   used to carry a field's name. */
.qform__q {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--weight-display);
  line-height: var(--lh-title);
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

/* The Shift+Enter hint is only true once the sequential journey is running:
   in the plain served form, Enter in a textarea already inserts a newline.
   So it stays hidden until form.js sets data-seq. */
.qform__hint {
  display: none;
  font-size: var(--step-small);
  color: var(--ink-soft);
  margin-bottom: var(--space-2xs);
}

.qform[data-seq="on"] .qform__hint { display: block; }

/* --- Fields -------------------------------------------------------------- */

.qform__input,
.qform__textarea {
  display: block;
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--paper);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-quick) var(--ease-out),
    background-color var(--dur-quick) var(--ease-out);
}

.qform__textarea {
  min-height: calc(var(--target-min) * 2.5);
  resize: vertical;
}

.qform__input:hover,
.qform__textarea:hover {
  border-color: var(--ink-soft);
}

.qform__input:focus,
.qform__textarea:focus {
  border-color: var(--signal);
  background-color: var(--paper-raised);
}

.qform__input[aria-invalid="true"],
.qform__textarea[aria-invalid="true"] {
  border-color: var(--ink);
  border-width: var(--rule-w-thick);
}

/* --- Errors ---------------------------------------------------------------
   Messages say what to fix. Never "invalid field". Colour is not the only
   carrier: the border thickens and aria-invalid is set. */
.qform__error {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--step-small);
  color: var(--ink);
}

.qform__error[hidden] { display: none; }

.qform__error::before {
  content: "!";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.18em;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: var(--weight-medium);
  color: var(--paper);
  background-color: var(--ink);
  border-radius: 50%;
}

/* --- Navigation ----------------------------------------------------------- */

.qform__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding-inline: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--dur-quick) var(--ease-out),
    color var(--dur-quick) var(--ease-out),
    border-color var(--dur-quick) var(--ease-out);
}

.btn[hidden] { display: none; }

.btn--primary {
  color: var(--paper);            /* 13.60:1 on --ink */
  background-color: var(--ink);
  border: var(--rule-w) solid var(--ink);
  flex: 1 1 auto;
}

.btn--primary:hover {
  background-color: var(--signal);
  border-color: var(--signal);
}

.btn--primary:disabled {
  background-color: var(--ink-soft); /* --paper on --ink-soft = 5.00:1 */
  border-color: var(--ink-soft);
  cursor: progress;
}

.btn--ghost {
  color: var(--ink);
  background-color: transparent;
  border: var(--rule-w) solid var(--rule-strong);
  flex: 0 0 auto;
}

.btn--ghost:hover {
  border-color: var(--ink);
}

@media (max-width: 419px) {
  .qform__nav { flex-direction: column-reverse; }
  .btn { width: 100%; }
}

/* --- Result region --------------------------------------------------------
   role="status" + tabindex="-1": announced politely, and focusable so the
   caret lands here after a send. */
.qform__result {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: var(--rule-w) solid var(--rule-strong);
  background-color: var(--paper);
}

.qform__result[hidden] { display: none; }

.qform__result:focus { outline: none; }

.qform__result:focus-visible {
  outline: var(--focus-w) solid var(--signal);
  outline-offset: var(--focus-offset);
}

.qform__result--ok {
  border-color: var(--signal);
  border-left-width: var(--focus-w);
}

.qform__result--fail {
  border-color: var(--ink);
  border-left-width: var(--focus-w);
}

.qform__result-title {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
}

/* --- WhatsApp fallback under the form ------------------------------------- */

.qform__alt {
  margin-top: var(--space-md);
}

.qform__alt a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   6. Confirmation pages (/en/thanks/, /fr/merci/) and 404
   -------------------------------------------------------------------------- */

.plain__title {
  font-size: var(--step-h2);
  font-weight: var(--weight-hero);
  letter-spacing: var(--track-hero);
  margin-bottom: var(--space-md);
}

.plain__text {
  font-size: var(--step-lead);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}

.plain__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.plain__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--weight-medium);
}

/* Push the footer to the bottom on short pages without a viewport-unit hack
   that would misbehave on mobile browsers with a collapsing address bar. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page > main { flex: 1 0 auto; }