/**
 * Feuille de style de la page de présentation.
 *
 * Elle ne définit aucune couleur : tout vient des rôles posés par `docs.css`,
 * pour que la présentation et la documentation ne puissent pas diverger. Ce
 * fichier ne décrit que des mises en page.
 *
 * Le rythme est unique et tenu jusqu'au pied : intitulé à gauche dans une
 * colonne étroite, contenu à droite, filet d'un pixel entre les sections. Le
 * seul écart est le hero, où la figure occupe la moitié droite — c'est le seul
 * endroit de la page où l'outil se montre en train de fonctionner.
 */

.lp {
  --lp-max: 84rem;
  --lp-gutter: 2rem;
  --lp-label: 16.5rem;
  background: var(--bg);
  color: var(--ink);
}

.lp-wrap { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-gutter); }

/* ------------------------------------------------------------- Typographie -- */

.lp-eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: .715rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.lp-h1 {
  margin: 1.15rem 0 0; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem);
  line-height: 1.04; letter-spacing: -.042em; font-weight: 600; color: var(--ink-strong);
  max-width: 19ch;
}
.lp-h1 em { font-style: normal; color: var(--ink-strong); }
.lp-h2 {
  margin: .75rem 0 0; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.7rem);
  line-height: 1.15; letter-spacing: -.03em; font-weight: 600; color: var(--ink-strong);
}
.lp-section-lead { margin: .6rem 0 0; font-size: .91rem; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------------------- Sections -- */

.lp-section { border-top: 1px solid var(--border); }
.lp-split { display: grid; grid-template-columns: var(--lp-label) minmax(0, 1fr); gap: 3rem; padding-top: 3.5rem; padding-bottom: 3.75rem; }
.lp-split-head { position: sticky; top: 4.5rem; align-self: start; }
.lp-split-body { min-width: 0; }

/* ---------------------------------------------------------------- Boutons -- */

.lp-button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .625rem 1.05rem; border-radius: 8px;
  font-size: .875rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.lp-button-primary { background: var(--ink); color: var(--bg); }
.lp-button-primary:hover { background: var(--ink-strong); color: var(--bg); }
.lp-button-ghost { border-color: var(--border); color: var(--ink); background: var(--surface); }
.lp-button-ghost:hover { border-color: var(--ink); color: var(--ink); }
.lp-button-small { padding: .4rem .75rem; font-size: .82rem; border-color: var(--border); color: var(--ink); background: var(--surface); }
.lp-button-small:hover { border-color: var(--ink); }

/* ------------------------------------------------------------- Barre haute -- */

.lp-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.lp-topbar-inner { display: flex; align-items: center; gap: 1.6rem; height: 3.375rem; }

.lp-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.lp-brand-mark { font-size: .95rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink-strong); transition: color .15s var(--ease); }
.lp-brand:hover .lp-brand-mark { color: var(--accent); }
.lp-version {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .1rem .45rem; border-radius: 100px; background: var(--surface-sunk);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lp-version i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.lp-nav { display: flex; gap: 1.15rem; font-size: .855rem; }
.lp-nav a { color: var(--muted); text-decoration: none; transition: color .15s var(--ease); }
.lp-nav a:hover { color: var(--ink); }

.lp-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: .45rem; }

@media (max-width: 940px) { .lp-nav { display: none; } }
@media (max-width: 560px) { .lp-topbar-tools .lang-switch { display: none; } }

/* ------------------------------------------------------------------- Hero -- */

/* Le hero et la bande d'appel partagent le même fond teinté : les deux bouts
   de la page se répondent, et les blocs opaques posés dessus — le bandeau
   d'installation, les mesures, le navigateur simulé — s'en détachent. */
.lp-hero {
  position: relative; overflow: hidden;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

/* La trame de fond : un quadrillage estompé, tenu au coin haut gauche pour ne
   jamais passer derrière le texte long. */
/* La trame : un quadrillage de 56 pixels posé derrière le contenu. Elle sert
   deux fois — le hero et la bande d'appel — et ne diffère que par son masque,
   qui l'éteint là où elle toucherait un filet de section. */
.lp-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Des mailles larges, et un flou optique sur le tracé : le filet net devient
     une trame diffuse, qui se lit comme une texture et non comme un
     quadrillage. Le flou étalant l'encre, le trait part du filet appuyé pour
     retomber, une fois flouté, au poids d'un filet ordinaire. */
  background-image:
    linear-gradient(to right, var(--border-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-strong) 1px, transparent 1px);
  background-size: 76px 76px;
  filter: blur(0.7px);
}

/* Les points lumineux : ils parcourent les filets de la trame, chacun sur sa
   ligne, à sa vitesse, avec son retard au départ — rien ne se synchronise, donc
   rien ne se remarque comme une boucle.

   Ils vivent sur un calque à part, et non dans la trame : celle-ci porte un
   filtre de flou, et animer un enfant à l'intérieur obligerait le navigateur à
   refaire ce flou sur toute la surface à chaque image. Le calque reprend en
   revanche le même masque, si bien qu'un point s'éteint là où le motif
   s'éteint. */
.lp-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.lp-spark { position: absolute; overflow: hidden; }

/* La tête est posée au bord de la boîte, et c'est la boîte entière — large ou
   haute comme la ligne — qui se déplace : le trajet fait exactement une ligne,
   sans que sa longueur ait à être connue, et reste une simple translation. */
.lp-spark-x {
  left: 0; right: 0; height: 20px;
  top: calc(var(--line) * 76px - 10px);
}
.lp-spark-x::after {
  content: ""; position: absolute; inset: 0;
  /* Trois couches : le halo large, le corps du point, puis un cœur presque
     blanc — c'est lui qui fait la lumière plutôt que la seule couleur. */
  background:
    radial-gradient(16px 9px at calc(100% - 4px) 50%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%),
    radial-gradient(5px 4px at calc(100% - 4px) 50%, var(--accent), transparent 74%),
    radial-gradient(2px 1.5px at calc(100% - 4px) 50%, color-mix(in srgb, var(--accent) 30%, #fff), transparent 78%);
  animation: lp-spark-x var(--dur) var(--delay) linear infinite;
}

.lp-spark-y {
  top: 0; bottom: 0; width: 20px;
  left: calc(var(--line) * 76px - 10px);
}
.lp-spark-y::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(9px 16px at 50% calc(100% - 4px), color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%),
    radial-gradient(4px 5px at 50% calc(100% - 4px), var(--accent), transparent 74%),
    radial-gradient(1.5px 2px at 50% calc(100% - 4px), color-mix(in srgb, var(--accent) 30%, #fff), transparent 78%);
  animation: lp-spark-y var(--dur) var(--delay) linear infinite;
}

@keyframes lp-spark-x {
  0% { transform: translateX(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes lp-spark-y {
  0% { transform: translateY(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .lp-sparks { display: none; } }

/* Le hero : pleine largeur, franche en haut, éteinte avant la bordure basse. */
.lp-hero-grid {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .55) 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .55) 76%, transparent 99%);
}

/* La bande d'appel : l'écho du hero, montée depuis le bas. */
.lp-cta-grid {
  -webkit-mask-image: linear-gradient(to top, #000 0 34%, rgba(0, 0, 0, .5) 72%, transparent 99%);
  mask-image: linear-gradient(to top, #000 0 34%, rgba(0, 0, 0, .5) 72%, transparent 99%);
}

.lp-hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 3rem;
  padding-top: 4rem; padding-bottom: 3.5rem;
}
.lp-hero-text { min-width: 0; }

.lp-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  padding: .3rem .7rem .3rem .55rem; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); font-size: .755rem; color: var(--prose);
}
.lp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--accent); }

.lp-hero-lead { margin: 1.25rem 0 0; max-width: 58ch; font-size: 1.06rem; line-height: 1.65; color: var(--muted); }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0 0; }

/* Le bloc d'installation : trois onglets, une commande, un bouton de copie. */
.lp-install {
  max-width: 33rem; margin: 1.4rem 0 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
}
.lp-install-bar { display: flex; align-items: center; padding: 0 .35rem 0 .15rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.lp-install-tabs { display: flex; }
.lp-install-tab {
  border: 0; background: none; cursor: pointer; position: relative;
  font-family: var(--font-mono); font-size: .715rem; font-weight: 500; color: var(--muted);
  padding: .5rem .5rem; transition: color .15s var(--ease);
}
.lp-install-tab::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 1.5px;
  background: transparent; transition: background .15s var(--ease);
}
.lp-install-tab:hover { color: var(--ink); }
.lp-install-tab[aria-selected="true"] { color: var(--ink); }
.lp-install-tab[aria-selected="true"]::after { background: var(--ink); }
.lp-install-copy {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .69rem; font-weight: 500; color: var(--muted);
  padding: .3rem .35rem; border-radius: 5px; transition: color .15s var(--ease), background .15s var(--ease);
}
.lp-install-copy:hover { color: var(--ink); background: var(--surface-sunk); }
.lp-install-copy.is-done { color: var(--ok); }
.lp-install-panel { padding: .7rem .9rem; }
.lp-install-panel code {
  display: block; font-family: var(--font-mono); font-size: .785rem; line-height: 1.6;
  color: var(--prose); overflow-x: auto; white-space: nowrap;
}
.lp-command-prompt { color: var(--muted); margin-right: .4rem; }
.lp-command-hint { margin: .7rem 0 0; font-size: .8rem; color: var(--muted); }

/* Les mesures : une bande de cellules séparées par des filets, pas des cartes. */
.lp-stats {
  position: relative; display: flex; flex-wrap: wrap; margin: 2rem 0 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  /* Opaque : la trame du hero passerait sinon en travers des cellules, sans
     jamais tomber sur leurs séparateurs. */
  background: var(--surface);
}
.lp-stat { flex: 1 1 8rem; padding: .8rem 1rem; border-right: 1px solid var(--border); }
.lp-stat:last-child { border-right: 0; }
.lp-stat-value { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.lp-stat-label { display: block; margin-top: .1rem; font-size: .765rem; line-height: 1.35; color: var(--muted); }

@media (max-width: 1080px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-h1 { max-width: 22ch; }
}

/* ------------------------------------------------------ La figure du hero -- */

.lp-demo { position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.lp-demo-frame { position: relative; }

.lp-browser {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--lift);
}
.lp-browser-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.lp-browser-dots { display: flex; gap: 5px; }
.lp-browser-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.lp-browser-url {
  padding: .1rem .5rem; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); font-family: var(--font-mono); font-size: .705rem; color: var(--muted);
}
.lp-browser-url b { font-weight: 500; color: var(--ink); opacity: 0; transition: opacity .3s var(--ease); }
.lp-browser-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .67rem; font-weight: 500; color: var(--muted);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lp-browser-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

.lp-browser-page { position: relative; padding: 1.35rem 1.35rem 5.75rem; min-height: 18.5rem; }
/* Le bloc média est un champ comme les autres : même anneau, même étiquette.
   Son panneau se pose par-dessus le texte qui suit, comme le fait l'overlay. */
.lp-mock-media-field {
  position: relative; border-radius: 3px;
  outline: 2px solid transparent; outline-offset: 6px;
  transition: outline-color .3s var(--ease);
}
.lp-mock-media {
  height: 5.5rem; border: 1px solid var(--border-soft); border-radius: 7px;
  background: repeating-linear-gradient(135deg, var(--surface-alt) 0 7px, var(--surface-sunk) 7px 14px);
}
.lp-mock-media-field .lp-field-tag { top: auto; bottom: -2.15rem; left: -6px; }

/* Les deux médias côte à côte : la photo, qui ajoute un fichier au dépôt, et
   la vidéo, qui n'en ajoute aucun. Les voir ensemble dit la différence mieux
   qu'une phrase. */
.lp-media-panel {
  position: absolute; z-index: 4; top: calc(100% + 2.35rem); left: 0; right: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: .7rem .8rem .75rem;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); box-shadow: var(--lift);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lp-media-col { min-width: 0; padding-right: .8rem; }
.lp-media-col + .lp-media-col { padding: 0 0 0 .8rem; border-left: 1px solid var(--border-soft); }

.lp-media-title { margin: 0; font-size: .755rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.lp-media-file {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: .5rem;
  margin: .45rem 0 0; align-items: center;
}
.lp-media-thumb {
  grid-row: span 2; width: 1.75rem; height: 1.75rem; border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: repeating-linear-gradient(135deg, var(--surface-alt) 0 5px, var(--surface-sunk) 5px 10px);
}
.lp-media-file b {
  font-family: var(--font-mono); font-size: .655rem; font-weight: 500; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-media-file span { font-size: .64rem; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-media-label { margin: .5rem 0 0; font-size: .655rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.lp-media-input {
  margin: .25rem 0 0; padding: .28rem .4rem; min-height: 1.55rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt);
  font-family: var(--font-mono); font-size: .655rem; line-height: 1.35; color: var(--ink);
  overflow: hidden; white-space: nowrap;
}
.lp-media-ok {
  margin: .35rem 0 0; display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .64rem; line-height: 1.35; color: var(--ok);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lp-media-ok::before { content: "✓"; }

/* Le champ éditable : un anneau d'accent, une étiquette de champ, une barre
   d'outils — exactement ce que l'overlay pose sur la page du client. */
.lp-mock-field {
  position: relative; margin: 2.4rem 0 0; padding: 2px 0; border-radius: 3px;
  outline: 2px solid transparent; outline-offset: 6px;
  transition: outline-color .3s var(--ease);
}
.lp-mock-title { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink-strong); line-height: 1.2; }
.lp-mock-lead { margin: 1.1rem 0 0; max-width: 46ch; font-size: .875rem; line-height: 1.65; color: var(--muted); }

.lp-field-tag {
  position: absolute; top: -1.75rem; left: -6px;
  padding: .1rem .38rem; border-radius: 4px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  opacity: 0; transform: translateY(3px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.lp-overlay-toolbar {
  position: absolute; top: -2rem; right: -6px;
  display: flex; align-items: center; gap: .2rem; padding: .25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--lift);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.lp-overlay-size {
  padding: .15rem .42rem; border-radius: 5px;
  font-family: var(--font-mono); font-size: .655rem; font-weight: 500; color: var(--muted);
}
.lp-overlay-size.is-on { background: var(--surface-sunk); color: var(--ink); }
.lp-overlay-sep { width: 1px; height: 12px; background: var(--border); margin: 0 .2rem; }
.lp-swatch { display: block; width: 11px; height: 11px; border-radius: 50%; }
.lp-swatch.is-ink { background: var(--ink); }
.lp-swatch.is-accent { background: var(--accent); margin-left: .25rem; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--accent-line); }

.lp-caret {
  display: inline-block; width: 1.5px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: -.12em; opacity: 0;
}
@keyframes lp-blink { 50% { opacity: 0; } }

/* La saisie de la clé : un panneau posé au centre de la page simulée. */
.lp-key {
  position: absolute; inset: auto 1.35rem 1.35rem; z-index: 2;
  padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); box-shadow: var(--lift);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lp-key-label { margin: 0; font-size: .7rem; font-weight: 500; color: var(--muted); }
.lp-key-input {
  margin: .35rem 0 0; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-alt); font-family: var(--font-mono); font-size: .78rem; color: var(--ink);
  min-height: 1.9rem;
}
.lp-key-hint { margin: .35rem 0 0; font-size: .7rem; color: var(--muted); }

.lp-deploy {
  position: absolute; inset: auto 1.35rem 1.35rem; z-index: 2;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: var(--lift);
  font-family: var(--font-mono); font-size: .715rem; color: var(--muted);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lp-deploy-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); border-top-color: var(--accent);
  animation: lp-spin 900ms linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-pointer {
  position: absolute; left: 42%; top: 58%; width: 14px; height: 18px; z-index: 3;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3 19 12l-6.5 1.5L9.5 20 5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3 19 12l-6.5 1.5L9.5 20 5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transition: opacity .3s var(--ease), transform .5s var(--ease);
}

/* La couture entre la page et le commit : ce que le bouton « Publier » écrit. */
.lp-demo-seam {
  display: flex; align-items: center; gap: .6rem; margin: .35rem 0 0; padding: 0 2px;
  font-family: var(--font-mono); font-size: .655rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.lp-demo-seam i {
  flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px);
}

.lp-commit {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);
  transition: border-color .3s var(--ease);
}
.lp-commit-head {
  display: flex; align-items: center; padding: .5rem .7rem;
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
  font-family: var(--font-mono); font-size: .705rem; font-weight: 500; color: var(--muted);
}
.lp-commit-count { margin-left: auto; }
.lp-commit-diff { padding: .5rem 0; font-family: var(--font-mono); font-size: .715rem; line-height: 1.8; color: var(--prose); }
.lp-diff-row { display: block; padding: 0 .75rem; white-space: pre; overflow-x: auto; }
.lp-diff-row b {
  display: inline-block; width: 1.35rem; margin-right: .7rem; text-align: right;
  font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums;
}
.lp-diff-sign { display: inline-block; width: .8rem; }
.lp-diff-row.is-del { background: var(--accent-line); }
.lp-diff-row.is-del b, .lp-diff-row.is-del .lp-diff-sign { color: var(--accent); }
.lp-diff-row.is-add { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.lp-diff-row.is-add b, .lp-diff-row.is-add .lp-diff-sign { color: var(--ok); }
/* Ce que les médias ajoutent au commit : un fichier pour la photo, rien pour
   la vidéo. Les deux se lisent d'un coup d'œil sous le diff. */
.lp-commit-files { padding: .55rem .7rem; border-top: 1px solid var(--border-soft); }
.lp-commit-add {
  display: flex; align-items: baseline; gap: .5rem; margin: 0;
  font-family: var(--font-mono); font-size: .705rem; color: var(--muted);
}
.lp-commit-add .lp-diff-sign { width: auto; color: var(--ok); }
.lp-commit-add b { font-weight: 500; color: var(--ink); }
.lp-commit-add span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.lp-commit-note { margin: .35rem 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }

.lp-commit-foot {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border-top: 1px solid var(--border); background: var(--surface-alt);
  font-size: .765rem; color: var(--muted);
}
.lp-commit-sha { font-family: var(--font-mono); font-size: .69rem; font-weight: 500; transition: color .3s var(--ease); }

/* Les états de la séquence. Chacun n'allume que ce qu'il concerne. */
.lp-demo[data-state="auth"] .lp-key { opacity: 1; transform: none; }
.lp-demo[data-state="auth"] .lp-browser-url b { opacity: 1; }
.lp-demo[data-state="auth"] .lp-key-input .lp-caret { opacity: 1; animation: lp-blink 1s steps(1) infinite; }

/* Le texte. */
.lp-demo[data-state="edit"] .lp-mock-field { outline-color: var(--accent); }
.lp-demo[data-state="edit"] .lp-mock-field .lp-field-tag { opacity: 1; transform: none; }
.lp-demo[data-state="edit"] .lp-overlay-toolbar { opacity: 1; transform: none; }
.lp-demo[data-state="edit"] .lp-mock-title .lp-caret { opacity: 1; animation: lp-blink 1s steps(1) infinite; }

/* La photo et la vidéo : le même anneau, un cran plus haut dans la page. */
.lp-demo[data-state="media"] .lp-mock-media-field { outline-color: var(--accent); }
.lp-demo[data-state="media"] .lp-mock-media-field .lp-field-tag { opacity: 1; transform: none; }
.lp-demo[data-state="media"] .lp-media-panel { opacity: 1; transform: none; }
/* Le récapitulatif n'apparaît qu'une fois l'adresse collée en entier. */
.lp-demo[data-state="media"] .lp-media-ok { opacity: 1; transition-delay: 2.9s; }
.lp-demo[data-state="publish"] .lp-media-ok,
.lp-demo[data-state="deploy"] .lp-media-ok { opacity: 1; }
.lp-demo.is-alt [data-demo-alt] + .lp-caret,
.lp-demo.is-video [data-demo-video] + .lp-caret { opacity: 1; animation: lp-blink 1s steps(1) infinite; }

.lp-demo[data-state="edit"] .lp-pointer,
.lp-demo[data-state="media"] .lp-pointer,
.lp-demo[data-state="publish"] .lp-pointer { opacity: .8; }
.lp-demo[data-state="media"] .lp-pointer { transform: translate(-2rem, -6.5rem); }
.lp-demo[data-state="publish"] .lp-pointer { transform: translate(3.5rem, -1.5rem); }

.lp-demo[data-state="edit"] .lp-browser-url b,
.lp-demo[data-state="media"] .lp-browser-url b,
.lp-demo[data-state="publish"] .lp-browser-url b { opacity: 1; }

.lp-demo[data-state="publish"] .lp-commit,
.lp-demo[data-state="deploy"] .lp-commit { border-color: var(--ink); }
.lp-demo[data-state="publish"] .lp-commit-sha,
.lp-demo[data-state="deploy"] .lp-commit-sha { color: var(--accent); }

.lp-demo[data-state="deploy"] .lp-deploy { opacity: 1; transform: none; }
.lp-demo[data-state="deploy"] .lp-browser-badge { opacity: 1; }
.lp-demo[data-state="deploy"] .lp-browser-url b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp-caret, .lp-deploy-spin { animation: none; }
}

/* La barre de la séquence : cinq repères et un bouton de lecture. */
.lp-demo-rail { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; }
.lp-demo-dot { border: 0; background: none; padding: .3rem .15rem; cursor: pointer; flex: 1; }
.lp-demo-dot span { display: block; height: 2px; border-radius: 2px; background: var(--border); transition: background .2s var(--ease); }
.lp-demo-dot:hover span { background: var(--border-strong); }
.lp-demo-dot.is-past span { background: var(--accent); }
.lp-demo-dot[aria-current] span { background: var(--accent); }
.lp-demo-play {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-left: .35rem; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--muted); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.lp-demo-play svg { width: 10px; height: 10px; }
.lp-demo-play:hover { color: var(--ink); border-color: var(--border-strong); }
.lp-demo-play.is-playing svg { opacity: .4; }

.lp-demo-caption { margin-top: .3rem; }
.lp-demo-caption[hidden] { display: none; }
.lp-demo-tag { margin: 0; font-size: .82rem; font-weight: 550; color: var(--ink); }
.lp-demo-text { margin: .15rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }

.lp-demo-caption-note {
  margin: 0 auto; padding-top: 1rem; padding-bottom: 1rem;
  font-size: .8rem; color: var(--muted);
}
.lp-demo-caption-note a { color: var(--ink); text-decoration: none; }
.lp-demo-caption-note a:hover { color: var(--accent); }

/* ------------------------------------------------------------ Le geste, écrit -- */

.lp-rows { display: flex; flex-direction: column; }
.lp-row {
  display: grid; grid-template-columns: 2.1rem 12.5rem minmax(0, 1fr); gap: 1.25rem;
  align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--border);
}
.lp-row:last-child { border-bottom: 1px solid var(--border); }
.lp-row-num { font-family: var(--font-mono); font-size: .755rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-row[data-lit] .lp-row-num { color: var(--accent); }
.lp-row-name { font-size: .91rem; font-weight: 550; color: var(--ink); }
.lp-row-text { font-size: .91rem; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------- Le problème -- */

.lp-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.lp-compare-card {
  padding: 1.1rem 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-alt);
}
.lp-compare-card.is-yes { border-color: var(--ink); background: var(--surface); }
.lp-compare-label {
  margin: 0; font-family: var(--font-mono); font-size: .705rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.lp-compare-title { margin: .55rem 0 0; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink-strong); }
.lp-compare-card ul { margin: .6rem 0 0; padding-left: 1.05rem; font-size: .845rem; line-height: 1.7; color: var(--muted); }
.lp-compare-card.is-yes { --color-muted: var(--prose); }
.lp-compare-card li { margin: 0; }

@media (max-width: 780px) { .lp-compare { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Les deux flux -- */

.lp-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lp-flow { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lp-flow-head {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem;
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.lp-flow-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lp-flow-title { font-size: .855rem; font-weight: 550; color: var(--ink); }
.lp-flow-count { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-flow-steps { list-style: none; margin: 0; padding: .25rem 0; }
.lp-flow-steps li {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .7rem;
  padding: .7rem .85rem; border-bottom: 1px solid var(--border-soft);
}
.lp-flow-steps li:last-child { border-bottom: 0; }
.lp-flow-num { font-family: var(--font-mono); font-size: .705rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.55; }
.lp-flow-step-title { display: block; font-size: .845rem; font-weight: 550; color: var(--ink); }
.lp-flow-step-text { display: block; margin-top: .1rem; font-size: .82rem; line-height: 1.5; color: var(--muted); }

.lp-flow.is-in .lp-flow-steps li { animation: lp-rise .38s var(--ease) both; animation-delay: calc(var(--i, 0) * .05s); }
@keyframes lp-rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .lp-flow.is-in .lp-flow-steps li { animation: none; } }

.lp-callout {
  margin: 1rem 0 0; padding: .9rem 1.1rem;
  border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem; line-height: 1.6; color: var(--muted);
}
.lp-callout-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); }
.lp-callout code { font-family: var(--font-mono); font-size: .84em; background: var(--surface-sunk); border-radius: 4px; padding: .08em .35em; color: var(--ink-strong); }

@media (max-width: 780px) { .lp-flows { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Le périmètre -- */

.lp-scope { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.75rem; align-items: start; }
.lp-specs { display: flex; flex-direction: column; }
.lp-spec {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.1rem;
  align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--border);
}
.lp-spec:last-child { border-bottom: 1px solid var(--border); }
.lp-spec-name { font-size: .875rem; font-weight: 550; color: var(--ink); }
.lp-spec-text { font-size: .845rem; line-height: 1.55; color: var(--muted); }

.lp-refuse { padding: 1.1rem 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.lp-refuse-label {
  margin: 0; font-family: var(--font-mono); font-size: .705rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.lp-refuse-list { display: flex; flex-direction: column; gap: .55rem; margin: .75rem 0 0; font-size: .845rem; line-height: 1.45; color: var(--muted); }
.lp-refuse-list div { display: flex; gap: .55rem; }
.lp-refuse-dash { color: var(--dim); }
.lp-refuse-note { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border); font-size: .82rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 900px) {
  .lp-scope { grid-template-columns: minmax(0, 1fr); }
  .lp-spec { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* --------------------------------------------------------------- Le code -- */

.lp-code { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lp-code-bar { position: relative; display: flex; padding: 0 .35rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); overflow-x: auto; }
.lp-code-tab {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 500; color: var(--muted);
  padding: .6rem .55rem; white-space: nowrap; transition: color .15s var(--ease);
}
.lp-code-tab[aria-selected="true"], .lp-code-tab:hover { color: var(--ink); }
.lp-code-ink { position: absolute; z-index: 0; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--ink); transition: transform .22s var(--ease), width .22s var(--ease); }
.lp-code-panel[hidden] { display: none; }
.lp-code-head { display: flex; align-items: center; padding: .45rem .5rem .45rem .9rem; border-bottom: 1px solid var(--border-soft); }
.lp-code-file { font-family: var(--font-mono); font-size: .715rem; font-weight: 500; color: var(--muted); }
.lp-code-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
  border: 0; background: none; cursor: pointer; padding: .2rem .4rem; border-radius: 5px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; color: var(--muted);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.lp-code-copy svg { width: 12px; height: 12px; }
.lp-code-copy:hover { color: var(--ink); background: var(--surface-sunk); }
.lp-code-copy.is-done { color: var(--ok); }
.lp-code-panel pre { margin: 0; padding: .9rem 1rem 1.1rem; overflow-x: auto; }
.lp-code-panel code { font-family: var(--font-mono); font-size: .785rem; line-height: 1.7; color: var(--prose); }
.lp-code-source { position: absolute; left: -9999px; }

/* --------------------------------------------------------- La documentation -- */

.lp-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.lp-doc-card {
  position: relative; display: block; padding: 1.05rem 1.1rem 2.1rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: inherit; transition: border-color .16s var(--ease);
}
.lp-doc-card:hover { border-color: var(--ink); }
.lp-doc-kicker { margin: 0; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lp-doc-title { margin: .5rem 0 0; font-size: .955rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink-strong); }
.lp-doc-text { margin: .35rem 0 0; font-size: .83rem; line-height: 1.55; color: var(--muted); }
.lp-doc-arrow { position: absolute; left: 1.1rem; bottom: 1rem; color: var(--dim); transition: color .16s var(--ease), transform .16s var(--ease); }
.lp-doc-arrow svg { display: block; width: 15px; height: 15px; }
.lp-doc-card:hover .lp-doc-arrow { color: var(--accent); transform: translateX(3px); }

@media (max-width: 1000px) { .lp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .lp-docs { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Le pied d'appel -- */

.lp-cta { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--surface-alt); }
.lp-cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; padding-top: 2.5rem; padding-bottom: 2.75rem; }
.lp-cta .lp-h2 { margin: 0; }
.lp-cta .lp-hero-actions { margin-top: 1rem; }
.lp-cta-meta { margin: 0; text-align: right; font-size: .8rem; line-height: 1.7; color: var(--muted); }
.lp-cta-meta b { display: block; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
  .lp-cta-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lp-cta-meta { text-align: left; }
}

/* ------------------------------------------------------------------ Footer -- */

.lp-footer { border-top: 1px solid var(--border); background: var(--bg); }
.lp-footer-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 2rem; padding-top: 2.5rem; padding-bottom: 3rem; }
.lp-footer-mark { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink-strong); }
.lp-footer-tagline { margin: .4rem 0 0; font-size: .84rem; color: var(--muted); max-width: 32ch; }
.lp-footer-meta { margin: .5rem 0 0; font-family: var(--font-mono); font-size: .715rem; color: var(--muted); }
.lp-footer-label { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; color: var(--ink); }
.lp-footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lp-footer-column a { font-size: .845rem; color: var(--muted); text-decoration: none; }
.lp-footer-column a:hover { color: var(--accent); }

@media (max-width: 780px) { .lp-footer-inner { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Responsive -- */

@media (max-width: 900px) {
  .lp { --lp-gutter: 1.35rem; }
  /* Le hero empilé est deux fois plus haut : la trame s'arrête plus tôt,
     sinon elle court sur toute la colonne. */
  .lp-hero-grid {
    -webkit-mask-image: linear-gradient(to bottom, #000 0 16%, rgba(0, 0, 0, .45) 34%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0 16%, rgba(0, 0, 0, .45) 34%, transparent 60%);
  }
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .lp-split-head { position: static; }
  .lp-row { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .lp-row-text { grid-column: 2; }
}

@media (max-width: 620px) {
  .lp-hero-inner { padding-top: 2.5rem; }
  .lp-stat { flex-basis: 50%; border-bottom: 1px solid var(--border); }
  .lp-stat:nth-child(2n) { border-right: 0; }
  .lp-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .lp-browser-page { padding: 1rem 1rem 3.5rem; min-height: 26rem; }
  .lp-mock-title { font-size: 1.2rem; }
  /* Deux colonnes dans 350 pixels ne se lisent pas : l'image au-dessus, la
     vidéo en dessous, séparées par le même filet. */
  .lp-media-panel { grid-template-columns: minmax(0, 1fr); }
  .lp-media-col { padding-right: 0; }
  .lp-media-col + .lp-media-col {
    margin-top: .6rem; padding: .6rem 0 0;
    border-left: 0; border-top: 1px solid var(--border-soft);
  }
}

/* ------------------------------------------------------------ Apparitions -- */

.js [data-reveal-group] > * { opacity: 0; transform: translateY(10px); }
.js [data-reveal-group].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i, 0) * .05s);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-group] > *, .js [data-reveal-group].is-in > * { opacity: 1; transform: none; transition: none; }
}


/* ------------------------------------------ L'échelle des tokens de style -- */

/*
 * La présentation est la seule page du site dont les textes sont des champs
 * `text` : le client y choisit un cran — « Petit », « Grand titre », « Accent »
 * — jamais une valeur. `tokens.css`, dans le paquet, traduit chaque cran en
 * variable, et n'en fixe aucune : c'est ici que le site dit ce qu'elles valent.
 *
 * Elles sont redéfinies composant par composant, et c'est le point important.
 * « Normal » ne vaut pas la même chose dans une carte de documentation (.955)
 * et dans un chapô de section (.91) ; les rabattre sur une seule valeur aurait
 * aplati une typographie réglée au centième de rem. Le cran reste relatif, le
 * composant dit ce qu'il vaut chez lui, et le client peut malgré tout monter ou
 * descendre l'échelle.
 *
 * `tokens.css` est chargée après cette feuille — voir `Presentation.astro`.
 * Un réglage du client l'emporte donc sur la règle du composant, qui reste le
 * repli exact si la feuille du paquet venait à manquer.
 */

.lp {
  --size-xs: .715rem;
  --size-sm: .82rem;
  --size-base: .875rem;
  --size-lg: 1.06rem;
  --size-xl: 1.2rem;
  --size-2xl: clamp(1.4rem, 1.1rem + .9vw, 1.7rem);
  --size-3xl: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem);

  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --color-primary: var(--ink-strong);
  --color-secondary: var(--ink);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-inverse: var(--bg);

  /* Lues par la règle `body` de tokens.css, qui passe après cette feuille.
     Sans elles, la page perdrait sa police et son interligne. */
  --font-body: var(--font-sans);
  --line-height: 1.65;
  --color-surface: var(--bg);
}

/* Ce que valent les crans, là où la maquette s'écarte de l'échelle de la page. */
.lp-badge            { --size-xs: .755rem; --color-muted: var(--prose); }
.lp-stat             { --size-xs: .765rem; }
.lp-section-lead     { --size-base: .91rem; }
.lp-command-hint     { --size-sm: .8rem; }
.lp-demo-caption-note { --size-sm: .8rem; }
.lp-row              { --size-sm: .91rem; --weight-medium: 550; }
.lp-compare-card     { --size-xs: .705rem; --size-sm: .845rem; --size-base: 1rem; }
.lp-flow-head        { --size-xs: .68rem; --size-sm: .855rem; }
/* L'intitulé d'un flux est en 500 et son titre en 550, côte à côte dans la même
   barre : le cran « Moyen » ne vaut donc pas la même chose sur les deux. */
.lp-flow-title       { --weight-medium: 550; }
.lp-flow-body        { --size-sm: .82rem; --size-base: .845rem; --weight-medium: 550; }
.lp-callout          { --size-sm: .8rem; }
.lp-spec             { --size-sm: .845rem; --weight-medium: 550; }
.lp-refuse           { --size-xs: .705rem; }
.lp-refuse-list      { --size-sm: .845rem; }
.lp-refuse-note      { --size-sm: .82rem; }
.lp-doc-card         { --size-xs: .68rem; --size-sm: .83rem; --size-base: .955rem; }
.lp-footer-brand     { --size-sm: .84rem; }