/* ============================================================================
   The Product Builder Newsletter, landing page
   See DESIGN.md for the full design system. Tokens below are extracted from
   the newsletter itself (HubSpot email), not invented.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --purple: #462880;
  --blue: #2c34f1;
  --cyan: #5ae6fa;
  --cream: #fffff5;
  --white: #ffffff;
  --grey: #474747;
  --black: #000000;

  /* Typefaces. PROVISIONAL: mirrors the newsletter for now, will be revised.
     Changing a family here is the only edit needed. */
  --font-titre: Verdana, Geneva, sans-serif;
  --font-corps: Arial, Helvetica, sans-serif;
  /* Reserved for the newsletter's slash-command motif. Unused on this page. */
  --font-signature: Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 20px;
  --s5: 30px;
  --s6: 48px;
  --s7: 72px;

  /* Layout. One content width everywhere, inherited from the email (600px),
     so every section lines up on the same left and right edges. */
  --largeur-texte: 600px;
  --radius: 4px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font: 15px/1.5 var(--font-corps);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul {
  padding-left: 1.2em;
}

a {
  color: var(--blue);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* On purple, blue links fall below AA. Cyan is the only readable accent.
   See the contrast rule in DESIGN.md §3. */
.sur-violet a,
.section--violet a {
  color: var(--cyan);
}

/* Focus is never removed, only restyled per background. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sur-violet :focus-visible {
  outline-color: var(--cyan);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Visually hidden but readable by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.section {
  padding: var(--s7) var(--s4);
}

.section--clair {
  background: var(--cream);
}

.section--blanc {
  background: var(--white);
}

.section--violet {
  background: var(--purple);
  color: var(--white);
}

.contenu {
  max-width: var(--largeur-texte);
  margin: 0 auto;
}

/* ── Brand motif 1: the terminal underscore ──────────────────────────── */

.underscore {
  color: var(--purple);
}

.sur-violet .underscore,
.section--violet .underscore {
  color: var(--cyan);
}

/* ── Brand motif 2: the bracket label ────────────────────────────────── */

.label-equerre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s4);
  font: bold 15px/1 var(--font-titre);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple);
}

.label-equerre::before {
  content: "";
  flex: 0 0 40px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}

.label-equerre::after {
  content: "";
  flex: 1;
  height: 10px;
  border-top: 1px solid currentColor;
}

.section--violet .label-equerre {
  color: var(--cyan);
}

/* Brand motif 3, the slash command, lives in the newsletter only. It is
   documented in DESIGN.md but not used on this page, so it has no CSS here. */

/* ── Brand motif 4: the fact box ─────────────────────────────────────── */

.encadre {
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  padding: var(--s4);
  font-size: 14px;
  line-height: 1.5;
  background: var(--white);
}

/* ── Typography ───────────────────────────────────────────────────────── */

.section-titre {
  font: bold 24px/1.5 var(--font-titre);
  margin-bottom: var(--s4);
}

.rubrique-titre {
  font: bold 18px/1.5 var(--font-titre);
  margin-bottom: var(--s2);
}

.texte + .texte {
  margin-top: var(--s3);
}

.secondaire {
  color: var(--grey);
  font-size: 14px;
}

/* Bulleted list in body copy. */
.liste {
  margin-top: var(--s3);
}

.liste li + li {
  margin-top: var(--s2);
}

/* Spacing utilities. The only vertical rhythm overrides allowed in markup. */
.mt-3 {
  margin-top: var(--s3);
}

.mt-4 {
  margin-top: var(--s4);
}

.mt-5 {
  margin-top: var(--s5);
}

.mb-4 {
  margin-bottom: var(--s4);
}

.mb-5 {
  margin-bottom: var(--s5);
}

.section--violet .secondaire {
  color: var(--white);
  opacity: 0.85;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 12px var(--s4);
  min-height: 44px;
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  background: var(--purple);
  color: var(--white);
  font: bold 15px/1.4 var(--font-corps);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--white);
  color: var(--purple);
}

.section--violet .btn {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--black);
}

.section--violet .btn:hover {
  background: transparent;
  color: var(--cyan);
}

.btn--ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

.btn--ghost:hover {
  background: var(--purple);
  color: var(--white);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  background: var(--purple);
  color: var(--white);
  padding: var(--s5) var(--s4) var(--s7);
}

.hero__logo {
  width: 160px;
  margin-bottom: var(--s6);
}

.wordmark {
  font-family: var(--font-titre);
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: var(--s4);
}

.wordmark__the {
  display: block;
  font-weight: normal;
  font-size: 15px;
}

.wordmark__nom {
  display: block;
  font-size: 30px;
}

.wordmark__nl {
  display: block;
  font-size: 28px;
  color: var(--cyan);
}

.hero__promesse {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: var(--s5);
  max-width: 34em;
}

.hero__reassurance {
  margin-top: var(--s3);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Set by the form script once the sign-up is confirmed. */
.hero__reassurance.est-masque {
  display: none;
}

/* ── Cards grid ───────────────────────────────────────────────────────── */

.grille {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.carte {
  background: var(--white);
  border: 1px solid rgba(70, 40, 128, 0.25);
  border-radius: var(--radius);
  padding: var(--s4);
}

.carte__num {
  font: bold 13px/1 var(--font-titre);
  letter-spacing: 1px;
  color: var(--purple);
  margin-bottom: var(--s2);
}

/* ── Edition cards: two states, upcoming and published ───────────────── */

.edition {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--white);
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  padding: var(--s4);
}

/* Upcoming: no link yet. Dashed border and muted tone say "not out". */
.edition--a-paraitre {
  border-style: dashed;
  border-color: rgba(70, 40, 128, 0.45);
  background: transparent;
}

.edition__meta {
  font: bold 13px/1 var(--font-titre);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple);
}

.edition--a-paraitre .edition__meta {
  color: var(--grey);
}

.edition__titre {
  font: bold 18px/1.4 var(--font-titre);
}

.edition--a-paraitre .edition__titre {
  color: var(--grey);
  font-weight: normal;
}

.edition__teaser {
  font-size: 14px;
  color: var(--grey);
  flex: 1;
}

.edition__lien {
  align-self: flex-start;
  font-weight: bold;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  background: var(--purple);
  color: var(--white);
  padding: var(--s6) var(--s4);
  font-size: 13px;
}

.footer__logo {
  width: 140px;
  margin-bottom: var(--s4);
}

.footer a {
  color: var(--cyan);
}

.footer__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: var(--s3);
  padding: 0;
  list-style: none;
}

/* ── HubSpot form ─────────────────────────────────────────────────────────
   This form renders inside an IFRAME, so nothing here can reach its fields.
   The actual form styling lives in the `cssRequired` string at the bottom of
   index.html, which HubSpot injects inside the iframe. Keep it in sync with
   the tokens above.

   Only the wrapper and the fallback are styled from this side.
   ────────────────────────────────────────────────────────────────────── */

.form-wrap {
  min-height: 96px;
}

.form-wrap iframe {
  width: 100% !important;
  border: 0;
  display: block;
}

/* Shown only if the HubSpot script never rendered anything. */
.form-secours {
  display: none;
}

.form-secours.est-visible {
  display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .section {
    padding: var(--s6) var(--s4);
  }

  .wordmark__nom {
    font-size: 26px;
  }

  .wordmark__nl {
    font-size: 24px;
  }

  .slash__cmd {
    font-size: 28px;
  }

  .hero__promesse {
    font-size: 16px;
  }
}