/* ==========================================================================
   ZEREX — la feuille de style du site de la société.

   La charte n'est pas nouvelle : elle est celle que Replica et SETLINE
   partagent depuis le 9 août 2026 — accent vert `#22c55e`, noirs neutres,
   Geist sur les pages, monospace du système pour ce qui s'aligne en colonne.
   Les jetons ci-dessous sont repris mot pour mot de `setline-site/site.css`,
   volontairement : une page société qui invente sa propre palette raconte
   qu'elle est ailleurs, alors qu'elle est la maison.

   Ce qui diffère des deux sites produits, et pourquoi :

     · le mouvement est plus court. Chez le produit, l'appareil tourne en
       continu parce qu'il *est* le sujet. Ici les deux vignettes tournent, et
       tout le reste apparaît une fois et se tait.
     · le héros ne porte pas un appareil mais deux, côte à côte : la société,
       c'est précisément ce qui tient les deux ensemble.
   ========================================================================== */

:root {
  color-scheme: dark light;

  --ink: #0b0b0d;
  --ink-2: #101013;
  --panel: #16161a;
  --panel-2: #1b1b21;
  --line: rgba(245, 245, 247, 0.12);
  --line-soft: rgba(245, 245, 247, 0.06);
  --text: #f5f5f7;
  --text-2: #c7c7cc;
  --muted: #93939b;

  --accent: #22c55e;
  --accent-text: #4ade80;
  --accent-ink: #ffffff;
  --accent-wash: rgba(34, 197, 94, 0.12);
  --bad: #ff5f56;

  --shadow: 0 40px 90px -32px rgba(0, 0, 0, 0.85);
  --shadow-sm: 0 18px 44px -22px rgba(0, 0, 0, 0.7);

  --radius: 14px;
  --radius-lg: 18px;
  --wrap: 1220px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #f6f6f8;
    --ink-2: #eeeef1;
    --panel: #ffffff;
    --panel-2: #f2f2f5;
    --line: rgba(29, 29, 31, 0.14);
    --line-soft: rgba(29, 29, 31, 0.07);
    --text: #1d1d1f;
    --text-2: #3a3a3c;
    --muted: #5c5c62;
    --accent: #16a34a;
    --accent-text: #15803d;
    --accent-wash: rgba(22, 163, 74, 0.12);
    --shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 18px 44px -26px rgba(0, 0, 0, 0.28);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--ink);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--accent-wash);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.tabular {
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.skip:focus {
  left: 16px;
}

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}
@media (max-width: 480px) {
  .wrap {
    width: min(100% - 32px, var(--wrap));
  }
  body {
    font-size: 16px;
  }
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 60px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  position: relative;
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  flex: none;
}
.mark {
  display: block;
  border-radius: 22%;
}
.nav-links {
  display: flex;
  gap: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 2px;
}
.nav-links a {
  transition: color 0.18s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.on {
  color: var(--text);
}
.nav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  flex: none;
}
.langs > * {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.langs a:hover {
  color: var(--text);
  background: var(--line-soft);
}
.langs .on {
  color: var(--text);
  background: var(--line);
}
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav-progress {
      animation: nav-read linear;
      animation-timeline: scroll();
    }
    @keyframes nav-read {
      to {
        transform: scaleX(1);
      }
    }
  }
}
@media (max-width: 940px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 420px) {
  .nav-end .btn {
    display: none;
  }
  .nav-in {
    gap: 12px;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease),
    background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-sm {
  min-height: 32px;
  padding: 0 15px;
  font-size: 11px;
}
.btn-lg {
  min-height: 46px;
  padding: 0 26px;
  font-size: 13px;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-quiet {
  color: var(--text);
  border: 1px solid var(--line);
  background: transparent;
}
.btn-quiet:hover {
  background: var(--line-soft);
  transform: translateY(-1px);
}
.btn-quiet:active {
  transform: translateY(0) scale(0.98);
}
.btn .ic {
  flex: none;
}

/* ---- Typographie de section ------------------------------------------------ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
h1 {
  font-weight: 600;
  font-size: clamp(2.2rem, 3.7vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--accent-text);
}
.h2 {
  font-weight: 600;
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
}
.lede {
  margin-top: 20px;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.body {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.72;
  max-width: 62ch;
  text-wrap: pretty;
}
.ticks {
  margin-top: 24px;
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 54ch;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* ---- Héros ----------------------------------------------------------------- */

.hero {
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% 30% auto -10%;
  height: 70vh;
  background: radial-gradient(60% 55% at 30% 30%, var(--accent-wash), transparent 70%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  max-width: 54ch;
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.hero-avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  white-space: nowrap;
}
.hero-avail i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
  flex: none;
}

/* Les deux produits côte à côte : c'est le sujet de la société. Sur un écran
   étroit ils s'empilent, et l'ordre reste celui de la lecture. */
.hero-stage {
  position: relative;
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.hero-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.hero-card-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
.stage-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 70ch;
}
.stage-note .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
@media (max-width: 720px) {
  .hero {
    padding-top: 38px;
  }
  .hero-stage {
    margin-top: 32px;
  }
}

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

.sec {
  padding: 100px 0;
}
.sec-alt {
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
}
.sec-head {
  max-width: 66ch;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.split-mirror {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
@media (max-width: 1000px) {
  .sec {
    padding: 72px 0;
  }
  .split,
  .split-mirror {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .split-mirror > .split-copy {
    order: -1;
  }
}

/* ---- Les deux produits -------------------------------------------------------- */

.products {
  margin-top: 64px;
  display: grid;
  gap: 84px;
}
.product {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.product-mirror .product-copy {
  order: 2;
}
.product-name {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.h3-line {
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--accent-text);
  max-width: 34ch;
  text-wrap: pretty;
}
.product-foot {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.product-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.product-price-l,
.product-price-u {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.product-price b {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
@media (max-width: 1000px) {
  .products {
    margin-top: 48px;
    gap: 64px;
  }
  .product,
  .product-mirror {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .product-mirror .product-copy {
    order: 0;
  }
}

/* ---- Engagements ------------------------------------------------------------- */

.pledges {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pledge {
  background: var(--ink);
  padding: 30px 26px 32px;
}
.pledge-n {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-text);
  letter-spacing: 0.08em;
}
.pledge h3 {
  margin-top: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}
.pledge p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-2);
  text-wrap: pretty;
}
@media (max-width: 980px) {
  .pledges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pledges {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }
}

/* ---- L'organigramme ------------------------------------------------------------
   Trois étages reliés par deux traits. Rien d'animé : c'est une structure, et
   une structure ne clignote pas.
   -------------------------------------------------------------------------------- */

.org {
  display: grid;
  justify-items: center;
  padding: 34px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.org-node {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  width: min(100%, 340px);
}
.org-child {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-wash);
}
.org-child .mark {
  margin-bottom: 10px;
}
.org-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.org-child .org-name {
  letter-spacing: 0.1em;
}
.org-role {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.org-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
}
.org-stem {
  width: 1px;
  height: 26px;
  background: var(--line);
}
/* Le trait qui se divise vers les deux produits : une barre, deux montants. */
.org-split {
  position: relative;
  width: min(100%, 240px);
  height: 26px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin-top: 0;
}
.org-split::before {
  content: '';
  position: absolute;
  top: -26px;
  left: 50%;
  width: 1px;
  height: 26px;
  background: var(--line);
}
.org-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 340px);
}
.org-prod {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.org-prod img {
  border-radius: 22%;
}
.org-prod:hover {
  border-color: var(--muted);
  transform: translateY(-2px);
}
.org-foot {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

.facts {
  margin-top: 30px;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.facts > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
}
.facts dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-top: 2px;
}
.facts dd {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---- Support -------------------------------------------------------------------- */

.support-list {
  margin-top: 28px;
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.support-list > div {
  display: grid;
  gap: 5px;
}
.support-list dt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.support-list dd {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 56ch;
}
.support-card {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.support-ic {
  display: inline-flex;
  padding: 11px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-wash);
}
.support-sla {
  display: grid;
  gap: 6px;
}
.support-sla dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.support-sla dd {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  text-wrap: balance;
}
/* Dans la carte de support, la pastille « à compléter » remplace un chiffre :
   elle prend donc la place d'un chiffre, sur sa propre ligne. */
.support-sla dd .todo {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.support-note {
  font-size: 12px;
  color: var(--muted);
  max-width: 34ch;
}

/* ---- Tarifs ---------------------------------------------------------------------- */

.price-cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.price-card {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease);
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.price-card img {
  border-radius: 22%;
}
.price-name {
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.price-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-v {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-v i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}
.price-v b {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--accent-text);
  line-height: 1;
}
.price-go {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.price-card:hover .price-go {
  color: var(--accent-text);
}
.pricing-note {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 74ch;
}
@media (max-width: 700px) {
  .price-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Appel ------------------------------------------------------------------------ */

.cta {
  padding: 108px 0 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: auto 0 -40% 0;
  height: 80%;
  background: radial-gradient(50% 60% at 50% 40%, var(--accent-wash), transparent 70%);
  pointer-events: none;
}
.cta-in {
  position: relative;
  display: grid;
  justify-items: center;
}
.mark-lg {
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.avail {
  margin-top: 26px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.avail-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.avail-date {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.avail-count {
  font-size: 12.5px;
  color: var(--muted);
  min-height: 1.2em;
}
.cta h2 {
  margin-top: 30px;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.cta p {
  margin-top: 16px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
  max-width: 54ch;
  text-wrap: pretty;
}
.cta .btn {
  margin-top: 28px;
}
.cta-note {
  margin-top: 18px !important;
  font-size: 12.5px !important;
  color: var(--muted) !important;
}
@media (max-width: 760px) {
  .cta {
    padding: 84px 0 92px;
  }
}

/* ---- Pied -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding: 46px 0 0;
  background: var(--ink-2);
}
.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 44px;
  padding-bottom: 40px;
}
.foot-brand {
  display: grid;
  justify-items: start;
  gap: 14px;
  align-content: start;
}
.foot-tag {
  font-size: 13.5px;
  color: var(--text-2);
  max-width: 34ch;
  line-height: 1.6;
}
.foot-parent {
  font-size: 12px;
  color: var(--muted);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.foot-col {
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 13px;
}
.foot-col h2 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.foot-col a {
  color: var(--text-2);
  transition: color 0.18s var(--ease);
  overflow-wrap: anywhere;
}
.foot-col a:hover {
  color: var(--text);
}
.foot-rule {
  border-top: 1px solid var(--line-soft);
  padding: 20px 0 32px;
  font-size: 11.5px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .foot-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}
@media (max-width: 520px) {
  .foot-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

/* ---- Page intérieure (mentions légales) ---------------------------------------------- */

.page {
  padding-top: 64px;
}
.page-in h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}
.page-block {
  margin-top: 42px;
  max-width: 74ch;
}
.page-block h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.page-block p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-2);
  text-wrap: pretty;
}
.ident {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.ident > div {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ident dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.ident dd {
  font-size: 14.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ident dd a {
  color: var(--accent-text);
}
/* Un champ resté à compléter se voit. C'est le but : il ne doit pas pouvoir
   traverser une relecture sans qu'on le remarque. */
.todo {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--bad);
  border: 1px dashed color-mix(in srgb, var(--bad) 60%, transparent);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}
.page-back {
  margin-top: 52px;
}
@media (max-width: 620px) {
  .ident > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ==========================================================================
   La vignette Replica

   Une fenêtre macOS réduite à ce qu'il faut pour dire la vérification : la
   carte, deux destinations, quatre fichiers. L'empreinte n'apparaît qu'une
   fois le fichier prouvé — c'est la règle du logiciel, et la page ne s'en
   écarte pas.
   ========================================================================== */

.rp,
.sl {
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-size: 12px;
  user-select: none;
}

.rp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.rp-lights {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.rp-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
}
.rp-lights i:nth-child(2) {
  background: #ffbd2e;
}
.rp-lights i:nth-child(3) {
  background: #27c93f;
}
.rp-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rp-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.rp-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text-2);
  white-space: nowrap;
}
.rp-node .ic {
  color: var(--muted);
  flex: none;
}
.rp-arrow {
  color: var(--muted);
  display: inline-flex;
  flex: none;
}
.rp-dests {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rp-rows {
  padding: 6px 0;
}
.rp-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 78px 68px 62px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}
.rp-row + .rp-row {
  border-top: 1px solid var(--line-soft);
}
.rp-ic {
  color: var(--muted);
  display: inline-flex;
}
.rp-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-row.is-done .rp-name {
  color: var(--text);
}
.rp-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.rp-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.rp-hash {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.rp-row.is-done .rp-hash {
  opacity: 1;
}
.rp-state {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.rp-row.is-done .rp-state {
  color: var(--accent-text);
}
.rp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 10.5px;
  color: var(--muted);
}
.rp-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 500;
}
.rp-legend::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
/* Sous 520 px de conteneur, l'empreinte et l'état ne tiennent plus à côté du
   nom sans le tronquer à trois lettres. On garde le nom entier et la barre :
   c'est ce que la vignette raconte. */
@container (max-width: 520px) {
  .rp-row {
    grid-template-columns: 20px minmax(0, 1fr) 56px;
  }
  .rp-hash,
  .rp-state {
    display: none;
  }
}

/* ==========================================================================
   La vignette Setline

   Les prises à gauche, le geste à droite — la disposition de l'application
   sur un iPad de plein format. La prise circulée l'est au chargement : c'est
   un état du rapport, pas une animation.
   ========================================================================== */

.sl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.sl-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sl-badge {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.sl-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
/* La hauteur est réservée pour cinq lignes alors que le rapport en porte
   quatre : la scène en ajoute une à chaque tour, et une liste qui grandit
   pousserait tout ce qui la suit à chaque boucle. Le blanc qui reste en bas
   d'un rapport de quatre prises n'a rien de faux — il y a toujours une prise
   suivante. */
.sl-takes {
  padding: 6px 0;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
  min-height: calc(5 * 40px + 12px);
  align-content: start;
}
.sl-take {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.sl-take + .sl-take {
  border-top: 1px solid var(--line-soft);
}
.sl-slug {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.sl-take-n {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-dur {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
/* Le coup de crayon de la scripte : la même ellipse que la marque de SETLINE,
   ramenée à la taille d'une ligne.

   Il est masqué par défaut, et pas seulement dépourvu de bordure. La grille
   de la ligne a trois colonnes pour quatre enfants : laissé dans le flux, le
   `span` vide des lignes non circulées repliait sur une deuxième rangée
   implicite et leur ajoutait dix pixels. Les prises gardées paraissaient
   alors plus serrées que les autres, ce qui est exactement l'inverse de ce
   qu'un rapport raconte. */
.sl-mark {
  display: none;
}
.sl-take.is-circled .sl-take-n {
  color: var(--text);
  font-weight: 500;
}
.sl-take.is-circled .sl-mark {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-1.4deg);
  pointer-events: none;
}
.sl-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}
.sl-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.sl-clock-v {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sl-clock-l {
  color: var(--muted);
  display: inline-flex;
}
.sl-verdict {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
}
.sl-good,
.sl-bad {
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.sl.is-good .sl-good {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent-text);
}
.sl-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.16s var(--ease);
}
.sl.is-pressed .sl-save {
  transform: scale(0.965);
}
/* Sous 460 px, la colonne de droite passe sous la liste plutôt que de réduire
   les deux à des timbres-poste. */
@container (max-width: 460px) {
  .sl-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .sl-takes {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .sl-verdict {
    font-size: 10.5px;
  }
}

/* ---- Apparition au défilement ----------------------------------------------------
   IntersectionObserver dans scenes.js : aucun écouteur de défilement, et
   l'observateur se détache dès que l'élément est passé.
   ------------------------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover,
  .btn:active,
  .price-card:hover,
  .org-prod:hover {
    transform: none;
  }
  .rp-bar i {
    transition: none;
  }
}