/* ==========================================================================
   SETLINE — site de présentation.

   La page qui entoure les appareils de `setline.css`. Charte reprise de
   l'application (Theme.swift) : noirs neutres, un seul accent — le vert de la
   bonne prise. Bebas Neue reste sur les grands titres, parce que c'est la voix
   de la maison et non celle du logiciel ; le reste de la page est en mono.

   Un principe repris du site voisin : la page ne doit jamais entrer en
   concurrence avec ce qui bouge dedans. Les appareils sont les seules choses
   animées en continu ; tout le reste apparaît une fois et se tait.

   Différence assumée avec l'application : la page suit le système, clair ou
   sombre. L'application, elle, ne suit rien — et l'appareil posé sur la page
   reste sombre dans les deux thèmes. C'est le sujet d'une section entière.
   ========================================================================== */

:root {
  color-scheme: dark light;

  --ink: #0b0b0d;
  --ink-2: #101013;
  --panel: #16161a;
  --line: rgba(245, 245, 247, 0.12);
  --line-soft: rgba(245, 245, 247, 0.06);
  --text: #f5f5f7;
  --text-2: #c7c7cc;
  /* `Brand.dim` (#6E6E73) ne tient que 4,2:1 sur le fond de l'application.
     Dans l'app c'est un choix — une étiquette qu'on ne lit pas deux fois, sur
     un instrument qu'on connaît par cœur. Sur une page publique, les légendes
     doivent se lire du premier coup : le gris du site est relevé.
     Celui de l'appareil, lui, reste exactement celui du logiciel. */
  --muted: #93939b;

  --accent: #22c55e;
  --accent-text: #4ade80; /* `Brand.accentBright` : le vert plein tient mal en petit texte */
  --accent-ink: #ffffff;
  --accent-wash: rgba(34, 197, 94, 0.12);
  --good: #22c55e;
  --bad: #ff5f56;

  --shadow: 0 40px 90px -32px rgba(0, 0, 0, 0.85);

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

  /* La même pile que le site de Replica. Geist porte toute la page ; le
     monospace ne sert qu'aux données qui s'alignent en colonne, et vient du
     système, comme dans l'application. */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --display: var(--font);
}

@media (prefers-color-scheme: light) {
  :root {
    /* Le fond clair de l'identité Arcane & Bestiaire : `Brand.bone`, que
       Theme.swift annote « --bg (fond clair du site) ». */
    --ink: #f6f6f8;
    --ink-2: #eeeef1;
    --panel: #ffffff;
    --line: rgba(29, 29, 31, 0.14);
    --line-soft: rgba(29, 29, 31, 0.07);
    --text: #1d1d1f;
    --text-2: #3a3a3c;
    --muted: #5c5c62;
    /* Le vert clair ne tient pas le contraste AA en petit texte sur fond
       clair : le texte accentué prend le vert foncé, les aplats gardent le
       vert de marque. C'est exactement ce que fait le thème clair de
       Replica. */
    --accent: #16a34a;
    --accent-text: #15803d;
    --accent-wash: rgba(22, 163, 74, 0.12);
    --shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.3);
  }
}

*,
*::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;
}
/* Les scènes cachent des commandes avec `hidden` ; un `display` posé par la
   charte l'emporterait sur celui du navigateur. */
[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;
}
.wrap-wide {
  width: min(100% - 48px, var(--wide));
  margin-inline: auto;
}
@media (max-width: 480px) {
  .wrap,
  .wrap-wide {
    width: min(100% - 32px, var(--wrap));
  }
  /* Le monospace à 15,5 px ne laisse que vingt-huit signes par ligne sur un
     téléphone. Un cran plus bas, la mesure redevient lisible. */
  body {
    font-size: 14px;
  }
}

/* ---- 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 {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Le mot-symbole garde ses capitales : c'est un logotype, pas un titre. Son
   interlettrage se resserre, Geist n'a pas besoin d'autant d'air que Bebas. */
.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);
}
/* La barre de lecture de la page : la même grammaire que les barres du
   logiciel, à l'échelle du document. Mise à jour en `scaleX`, jamais en
   largeur. */
.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: 900px) {
  .nav-links {
    display: none;
  }
}
/* Sur un très petit écran, c'est le bouton qui part : le héros annonce la
   date de sortie deux centimètres plus bas, alors que le passage d'une langue
   à l'autre n'a pas d'autre porte que celle-ci. */
@media (max-width: 420px) {
  .nav-end .btn {
    display: none;
  }
  .nav-in {
    gap: 12px;
  }
}

/* ---- Boutons du site -------------------------------------------------------- */

.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 ---------------------------------------------------
   Les titres en Bebas Neue capitales : le traitement que l'application donne
   à ses propres titres d'écran. Le reste en IBM Plex Mono, comme tout le
   reste de l'application.
   ------------------------------------------------------------------------------ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em; /* le motif « eyebrow » : taille × 0,22 */
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* Les titres perdent leurs capitales avec Bebas : Geist se lit en bas de casse,
   serré. L'interlettrage passe en négatif, comme sur le site de Replica, et
   `text-wrap: balance` répartit les lignes au lieu de laisser la dernière
   pendre toute seule. */
h1 {
  font-weight: 600;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* Assez large pour que les seuls sauts soient ceux écrits dans la copie. */
  max-width: 22ch;
  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.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.body {
  margin-top: 18px;
  color: var(--text-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.punch {
  margin-top: 18px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text);
  max-width: 34ch;
  text-wrap: pretty;
}
.caption {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 64ch;
  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: 56px 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: 46ch;
}
.hero-actions {
  margin-top: 28px;
  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;
}
/* L'appareil du héros prend toute la largeur utile : c'est le produit, en
   train de travailler, et c'est le sujet de la page. */
.hero-stage {
  position: relative;
  margin-top: 40px;
  padding-bottom: 26px;
}
/* L'appareil du héros a la forme d'un iPad, et c'est tout l'objet de cette
   règle. Avec une hauteur libre, il sortait en 952 x 600 : une boîte bien plus
   large et plus courte qu'une tablette, dans laquelle le formulaire se
   retrouvait coupé aux deux tiers. On lisait un morceau d'écran, pas un écran.

   La largeur est donc deduite de la hauteur qu'on s'autorise, et non
   l'inverse : `width` prend la plus petite des deux valeurs, la place
   disponible ou la largeur qui tiendrait dans cette hauteur. Le rapport 4/3
   est ainsi toujours respecte, la ou un `max-height` pose sur un element large
   se contenterait de l'ecraser.

   Le formulaire continue de defiler a l'interieur : c'est ce que fait
   l'application sur un vrai iPad, et le site n'a pas a pretendre le
   contraire. Ce qu'on gagne, c'est la vue d'ensemble, l'en-tete, les deux
   colonnes et la barre d'onglets, avant que les sections d'en dessous ne
   reprennent chaque fonction une par une. */
@media (min-width: 721px) {
  .hero-stage .sl {
    /* 10/7, le rapport d'un iPad Pro 11 pouces en paysage. Le 4/3 d'un iPad
       classique rendait l'appareil trop etroit : il repassait sous les 900 px
       ou la requete de conteneur replie la vue en une seule colonne, et l'on
       perdait justement ce qu'on cherchait a montrer. */
    aspect-ratio: 10 / 7;
    height: auto;
    width: min(100%, calc(min(82vh, 880px) * 10 / 7));
    margin-inline: auto;
  }
}

/* L'appui sur « bonne prise » dans le panneau de la section ①. Même échelle
   que le bouton de l'application, pour que le choix se lise comme un geste et
   non comme un changement d'écran. */
.sl-btn.is-pressed {
  transform: scale(0.965);
}

/* Les dailies : une hauteur d'écran, pour que la grille défile chez elle et
   que le réordonnancement tienne dans un seul regard. Sans hauteur, l'appareil
   s'étirerait sur onze cartes et le mouvement se perdrait hors du champ. */
#dailies .sl {
  height: min(70vh, 620px);
}
/* Les échanges : même parti. La liste doit se remplir dans un cadre stable,
   sinon l'appareil grandirait à chaque dépôt et la page sauterait sous le
   lecteur. */
#exchanges .sl {
  height: min(64vh, 560px);
}
/* En bloc et non en flex : la pastille doit rester collée au début de la
   phrase quand celle-ci passe à la ligne. */
.stage-note {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
}
.stage-note .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.stage-note .btn {
  margin-left: 12px;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .hero {
    padding-top: 36px;
  }
  .hero-stage .sl {
    height: min(80vh, 620px);
    min-height: 0;
  }
  .hero-stage {
    margin-top: 28px;
  }
}

/* ---- 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, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.split-mirror {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
/* Le panneau de la section ① est étroit : dans une colonne large il se colle
   au texte et l'écart entre les deux se perd. On le pousse vers la droite, où
   il respire, et où le regard le retrouve après avoir lu. Sur une seule
   colonne, il se recentre. */
/* Le panneau de la section 1 est étroit : dans une colonne large il se colle
   au texte. On le pousse vers la droite, où il respire.

   La poussée s'applique a l'appareil, **pas** a l'element de grille qui le
   contient. Une marge automatique, comme `justify-self: end`, fait
   dimensionner un element de grille sur son contenu ; or l'appareil porte
   `container-type: inline-size`, ce qui met sa largeur intrinseque a zero. La
   colonne entiere s'effondrerait alors en trait de deux pixels. En bloc
   ordinaire, la meme marge automatique se comporte bien. */
@media (min-width: 1001px) {
  .split-push > .sl {
    margin-left: auto;
    margin-right: clamp(0px, 4vw, 64px);
  }
}
@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;
  }
}

.stats {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.stat dt {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.stat dd {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 30ch;
}
@media (max-width: 760px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- Resolve ------------------------------------------------------------------
   Le tableau de métadonnées tel que Resolve le reçoit. Ce n'est pas une copie
   de son interface : ce sont ses noms de colonnes — ceux de l'en-tête CSV que
   l'application écrit — et les valeurs qui viennent s'y ranger.
   ------------------------------------------------------------------------------ */

.resolve {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.resolve-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.resolve-bar .sl-spacer {
  flex: 1;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.seg button:hover:not(.on) {
  color: var(--text);
}
.seg button.on {
  background: var(--accent-wash);
  color: var(--accent-text);
}
.resolve-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}
.resolve-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.resolve-table th {
  position: sticky;
  top: 0;
  text-align: left;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
/* La colonne d'appariement : c'est elle qui fait tout le travail. */
.resolve-table th:first-child,
.resolve-table td:first-child {
  color: var(--accent-text);
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}
.resolve-table th:first-child {
  background: var(--ink-2);
  z-index: 2;
}
.resolve-table td {
  padding: 7px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
}
/* Une cellule se remplit : elle apparaît et se pose, sans pousser sa voisine.
   La largeur de la colonne ne bouge pas — le tableau ne tremble jamais. */
.resolve-table td span {
  display: inline-block;
  opacity: 0;
  transform: translateY(3px);
}
.resolve-table td.in span {
  opacity: 1;
  transform: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.resolve-table tr.on td {
  background: var(--accent-wash);
}
.resolve-table tr.on td:first-child {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.resolve-csv {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--text-2);
  white-space: pre;
  overflow: auto;
  max-height: 420px;
  padding: 16px;
  scrollbar-width: thin;
}
.resolve-note {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-height: 44px;
}

/* ---- Le rapport journalier -----------------------------------------------------
   La feuille reste blanche dans les deux thèmes : c'est un document destiné à
   l'impression, pas un morceau d'interface.
   ------------------------------------------------------------------------------ */

.paper-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 1000px) {
  .paper-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}
.paper,
.paper-code {
  background: #fff;
  color: #141414;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px 24px 18px;
  font-size: 9px;
  line-height: 1.5;
  overflow: hidden;
}
.paper-code {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: #3d3a34;
  white-space: pre;
  overflow: auto;
  max-height: 520px;
  scrollbar-width: thin;
}
.paper-rule {
  height: 4px;
  background: #141414;
  margin-bottom: 12px;
}
.paper-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: start;
}
.pkick {
  display: block;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #e61919;
}
.paper h3 {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 4px;
  color: #141414;
}
.pprod {
  margin-top: 8px;
  font-size: 9px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pprod b {
  font-weight: 500;
}
.pprod span {
  color: #3d3a34;
}
.pby {
  margin-top: 3px;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: #6b675f;
}
.paper-logo {
  width: 110px;
  height: auto;
  align-self: center;
  opacity: 0.9;
}
.pdoc {
  border: 1px solid #141414;
  width: 176px;
  font-size: 7px;
}
.pdoc > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
}
.pdoc > div + div {
  border-top: 1px solid #d9d5cc;
}
.pdoc span,
.pdoc b {
  padding: 3px 6px;
}
.pdoc span {
  color: #6b675f;
  letter-spacing: 0.08em;
  border-right: 1px solid #d9d5cc;
}
.pdoc b {
  font-weight: 500;
}
.pband {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #141414;
  border: 1px solid #141414;
  margin: 14px 0;
}
.pcell {
  background: #fff;
  padding: 6px 8px;
}
.pcell span {
  display: block;
  font-size: 6.5px;
  letter-spacing: 0.13em;
  color: #6b675f;
}
.pcell b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
}
.pcell.hot b {
  color: #e61919;
  font-size: 12px;
}
.psec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #141414;
  border-bottom: 1px solid #141414;
  padding-bottom: 3px;
  margin: 12px 0 8px;
}
.psec i {
  font-style: normal;
  color: #6b675f;
  letter-spacing: 0.1em;
}
.pcams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pcam {
  border: 1px solid #141414;
}
.pcam-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid #141414;
}
.pcam-head b {
  font-size: 9.5px;
  font-weight: 700;
}
.pcam-head span {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.pcam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pcam-grid > div {
  padding: 3px 8px;
  min-width: 0;
}
.pcam-grid > div:nth-child(n + 3) {
  border-top: 1px solid #ece9e1;
}
.pcam-grid span {
  display: block;
  font-size: 5.8px;
  letter-spacing: 0.15em;
  color: #6b675f;
}
.pcam-grid b {
  display: block;
  font-size: 7px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le take log. Les colonnes et leurs largeurs viennent du PDF lui-même :
   `DailyReportPDF.columns`, converties en pourcentages par le gabarit. */
.plog {
  overflow-x: auto;
  scrollbar-width: thin;
}
.plog-row {
  display: grid;
  grid-template-columns: var(--plog);
  gap: 0;
  min-width: 620px;
  font-size: 7.6px;
  border-bottom: 1px solid #e5e2d9;
  /* Chaque ligne arrive dans le document. C'est le seul endroit du site où
     une liste se construit à l'écran, et c'est ce que le rapport fait. */
  opacity: 0;
  transform: translateY(4px);
}
.plog-row.in,
.plog-row.head {
  opacity: 1;
  transform: none;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.plog-row.head {
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  border-bottom: 1.6px solid #141414;
}
.plog-row span {
  padding: 3px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plog-row span.r {
  text-align: right;
}
.plog-row span.soft {
  color: #3d3a34;
}
.plog-row span.star {
  color: #e61919;
  font-weight: 700;
}
.plog-row.circled {
  background: #fcedeb;
}
.proll-row {
  display: grid;
  grid-template-columns: 14% 8% 10% 9% 21% 21% minmax(0, 1fr);
  font-size: 7.6px;
  border-bottom: 1px solid #e5e2d9;
  min-width: 520px;
}
.proll-row.head {
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  border-bottom: 1.6px solid #141414;
}
.proll-row span {
  padding: 3px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proll-row span.red {
  color: #e61919;
}
.pnotes {
  display: grid;
  grid-template-columns: 0.58fr 0.42fr;
  gap: 12px;
  margin-top: 4px;
}
.pnote-box {
  border: 1px solid #141414;
  padding: 6px 8px;
  font-size: 7.4px;
  line-height: 1.7;
  color: #3d3a34;
  min-height: 70px;
}
.psign {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 70px;
}
.psign span {
  border: 1px solid #141414;
  padding: 4px 6px;
  font-size: 6.2px;
  letter-spacing: 0.14em;
  color: #6b675f;
}
.paper-foot {
  margin-top: 12px;
  padding-top: 5px;
  border-top: 1px solid #141414;
  font-size: 6.5px;
  letter-spacing: 0.09em;
  color: #6b675f;
}
@media (max-width: 640px) {
  .paper {
    padding: 16px 14px;
  }
  .paper-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdoc {
    width: 100%;
  }
  .pband {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Sept intitulés dans quatre colonnes laissent une case vide au bout. Le
     temps tourné — la valeur qu'on vient chercher — l'occupe. */
  .pcell:last-child {
    grid-column: span 2;
  }
  .pcams,
  .pnotes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.paper-side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.formats {
  display: grid;
  gap: 8px;
}
.format {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.format:hover {
  border-color: var(--muted);
}
.format.on {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.format .badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.format .for {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.format.on .for {
  color: var(--text);
}

/* ---- Sombre uniquement --------------------------------------------------------- */

.dark-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 26px;
}
.dark-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.swatch span {
  display: block;
  height: 58px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.swatch b {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dark-switch {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 38px;
}
.dark-answer {
  font-size: 12.5px;
  color: var(--accent-text);
  animation: dark-said 0.4s var(--ease);
}
@keyframes dark-said {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
.dark-steps {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
  max-width: 58ch;
}
@media (max-width: 560px) {
  .dark-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dark-stage {
    padding: 18px;
  }
}

/* ---- Capacités ------------------------------------------------------------------ */

.spec-groups {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.spec-group h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.spec-group ul {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 11px;
}
.spec-group li {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .spec-groups {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

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

.plans {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  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);
}
.plan:hover {
  transform: translateY(-3px);
  border-color: var(--muted);
}
.plan-term {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-price {
  margin-top: 14px;
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.plan-per {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.plan-who {
  margin-top: 16px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}
.plan-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-featured:hover {
  border-color: var(--accent);
}
.plan-featured .plan-price {
  color: var(--accent-text);
}
/* L'étiquette de la formule complémentaire. Elle est poussée en pied de carte
   pour dire ce que le prix seul ne dit pas : cette ligne s'ajoute, elle ne
   remplace pas. */
.plan-tag {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-text);
  line-height: 1.45;
}
.pricing-note {
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 70ch;
}
@media (max-width: 860px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Disponibilité ------------------------------------------------------------------ */

.download {
  padding: 108px 0 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.download::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;
}
.download-in {
  position: relative;
  display: grid;
  justify-items: center;
}
.mark-lg {
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.download h2 {
  margin-top: 24px;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
}
.download p {
  margin-top: 16px;
  color: var(--text-2);
  max-width: 50ch;
  text-wrap: pretty;
}
.avail {
  margin-top: 30px;
  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);
}
.download-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 760px) {
  .download {
    padding: 84px 0 92px;
  }
}

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

.foot {
  border-top: 1px solid var(--line);
  padding: 32px 0 42px;
}
.foot-in {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.foot-brand span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text);
}
.foot-brand i {
  font-style: normal;
}
.foot-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .foot-end {
    margin-left: 0;
  }
}

/* ---- Apparition au défilement -------------------------------------------------------
   Pilotée par 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-slow {
  transition-duration: 1s;
  transition-delay: 0.08s;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-slow {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .plog-row {
    opacity: 1;
    transform: none;
  }
  .resolve-table td span {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .btn:active,
  .plan:hover {
    transform: none;
  }
  .dark-answer {
    animation: none;
  }
}