/* Édition v0.6 — sortie complète du pattern landing SaaS.
       Aucun hero, aucune section, aucune topbar nav, aucun footer
       multi-col, aucune card. Une seule colonne de prose continue. */
    body.ed-body {
      background: var(--bg);
      color: var(--ink-soft);
      margin: 0;
      font-family: var(--font-sans);
      font-size: 17px;
      line-height: 1.7;
    }
    .ed-mark {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 32px clamp(20px, 5vw, 56px) 0;
      max-width: 720px;
      margin: 0 auto;
    }
    .ed-mark a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -0.015em;
    }
    .ed-mark .brand-mark { width: 20px; height: 20px; }

    .ed-article {
      max-width: 64ch;
      margin: 0 auto;
      padding: 56px clamp(20px, 5vw, 56px) 120px;
    }
    .ed-date {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted-2);
      margin: 0 0 22px;
      letter-spacing: 0.02em;
    }
    .ed-h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 4.2vw, 40px);
      line-height: 1.18;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0 0 28px;
      text-wrap: balance;
    }
    .ed-lede {
      font-size: 18.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      margin: 0 0 28px;
    }
    .ed-article > p {
      margin: 0 0 22px;
    }
    .ed-article > p strong { color: var(--ink); font-weight: 600; }
    .ed-article > p em { font-style: italic; color: var(--ink); }
    .ed-article > p a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: var(--muted-2);
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
    .ed-article > p a:hover {
      text-decoration-color: var(--accent);
    }
    .ed-alt {
      font-size: 14px !important;
      color: var(--muted) !important;
      margin-top: -8px !important;
    }
    .ed-foot {
      margin-top: 12px !important;
      font-family: var(--font-mono);
      font-size: 12.5px !important;
      color: var(--muted-2) !important;
      letter-spacing: 0.02em;
    }
    .ed-foot a {
      color: var(--muted-2) !important;
      text-decoration: underline;
      text-decoration-color: var(--border);
      text-underline-offset: 3px;
    }
    .ed-foot a:hover {
      color: var(--ink-soft) !important;
      text-decoration-color: var(--muted-2) !important;
    }

    .ed-form {
      display: flex;
      align-items: stretch;
      gap: 1px;
      margin: 0 0 22px;
      padding: 4px;
      background: rgba(245, 246, 250, 0.04);
      border: 1px solid var(--border);
    }
    .ed-form input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: 0;
      padding: 12px 14px;
      color: var(--ink);
      font: 15px/1.4 var(--font-sans);
    }
    .ed-form input::placeholder { color: var(--muted-2); }
    .ed-form button {
      flex: none;
      background: var(--ink);
      color: var(--bg);
      border: 0;
      padding: 12px 18px;
      font: 600 14px/1.4 var(--font-sans);
      cursor: pointer;
      white-space: nowrap;
    }
    .ed-form button:hover { background: var(--accent); color: var(--accent-ink); }
    @media (max-width: 520px) {
      .ed-form { flex-direction: column; }
      .ed-form button { width: 100%; }
    }

    /* Etait un « — § — » compose en monospace : un ornement a lire, annonce
       comme du texte aux lecteurs d'ecran, et bati sur des tirets cadratins
       que la charte proscrit. Un filet fait le meme travail en silence. */
    .ed-rule {
      width: 72px;
      margin: 36px auto;
      border: 0;
      border-top: 1px solid var(--muted-2);
      opacity: 0.45;
    }

    /* Product-proof — anatomie sobre d'un clip en sortie. Pas un faux
       screenshot : un cadre 9:16 qui montre ce que le pipeline pose
       (hook, sous-titres incrustés, recadrage, score par objectif). */
    .ed-proof {
      margin: 4px 0 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .ed-proof-frame {
      position: relative;
      width: 200px;
      aspect-ratio: 9 / 16;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: linear-gradient(180deg, rgba(245, 246, 250, 0.05), rgba(245, 246, 250, 0.015));
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 10px;
      overflow: hidden;
    }
    .ed-proof-score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .ed-proof-score b {
      color: var(--accent);
      font-size: 15px;
      font-weight: 700;
      margin-right: 3px;
    }
    .ed-proof-ratio {
      position: absolute;
      top: 10px;
      right: 10px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted-2);
    }
    .ed-proof-hook {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      line-height: 1.28;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .ed-proof-cc {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 12.5px;
      text-transform: uppercase;
      line-height: 1.15;
    }
    .ed-proof-cc span {
      padding: 2px 5px;
      background: var(--ink);
      color: var(--bg);
    }
    .ed-proof-cc span:last-child {
      background: var(--accent);
      color: var(--accent-ink);
    }
    .ed-proof figcaption {
      max-width: 46ch;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.6;
      letter-spacing: 0.01em;
      color: var(--muted);
    }

    .ed-result {
      margin: 4px 0 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .ed-result img {
      width: 248px;
      max-width: 72vw;
      height: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      display: block;
    }
    .ed-result figcaption {
      max-width: 48ch;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.6;
      letter-spacing: 0.01em;
      color: var(--muted);
    }
    .ed-result figcaption b {
      color: var(--ink);
      font-weight: 600;
    }

    .ed-article h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 21px;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 8px 0 14px;
    }

    .ed-sign {
      margin-top: 56px !important;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      font-size: 14px;
      color: var(--muted);
    }
    .ed-sign a { color: var(--ink-soft); }

    .ed-footer {
      max-width: 64ch;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 56px) 64px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted-2);
      letter-spacing: 0.02em;
    }
    .ed-footer a {
      color: var(--muted-2);
      text-decoration: underline;
      text-decoration-color: var(--border);
      text-underline-offset: 2px;
    }
    .ed-footer a:hover { color: var(--ink-soft); text-decoration-color: var(--muted-2); }

/* Bascule de langue (topbar) : discret, cliquable, meme famille que les liens. */
.lang-toggle {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 246, 250, 0.18);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lang-toggle:hover { border-color: rgba(245, 246, 250, 0.45); }


/* Visuel reel dans le cadre demo : l'image remplit le cadre, le hook,
   les sous-titres et le score restent incrustes au-dessus. */
.ed-proof-frame { position: relative; overflow: hidden; }
.ed-proof-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Le score et le ratio gardent leur position absolue d'origine (coins) :
   on ne touche qu'a l'ordre d'empilement, jamais au positionnement. */
.ed-proof-frame > :not(.ed-proof-img) { z-index: 1; }
.ed-proof-hook, .ed-proof-cc { position: relative; }